Forwarded from Веб-страница
Новый китайский владелец популярного проекта Polyfill JS внедрил вредоносное ПО более чем на 100 тысяч сайтов
Polyfill.js - популярная библиотека с открытым исходным кодом для поддержки старых браузеров. Более 100 тыс. сайтов встраивают ее через домен cdn.polyfill.io.
В феврале этого года китайская компания Funnull купила домен и аккаунт на Github. С тех пор этот домен был замечен в внедрении вредоносного ПО на мобильные устройства через вебсайты, использующие cdn.polyfill.io. Любые жалобы быстро удалялись из репозитория Github.
Самое интересное, что код имеет защиту от реверс-инжиниринга и активируется только на определенных мобильных устройствах в определенные часы, не активируется при обнаружении пользователя-администратора, а также приостанавливает выполнение при обнаружении службы веб-аналитики, предположительно, чтобы не попасть в отчёты.
Автор оригинального проекта рекомендует не использовать Polyfill, так как он больше не нужен современным браузерам. Тем временем, Fastly и Cloudflare предложили собственные альтернативы пользователям.
Google начал блокировать рекламу для сайтов eCommerce, использующих polyfill.io. Cloudflare реализовала перенаправление в реальном времени с cdn.polyfill.io на свою версию. Позже регистратор Namecheap приостановил действие домена, устранив риск на данный момент.
Этот инцидент является типичным примером атаки на цепочку поставок. Рекомендуется удалить все ссылки на polyfill.io в вашем коде.
Подробнее: https://sansec.io/research/polyfill-supply-chain-attack
#безопасность
Polyfill.js - популярная библиотека с открытым исходным кодом для поддержки старых браузеров. Более 100 тыс. сайтов встраивают ее через домен cdn.polyfill.io.
В феврале этого года китайская компания Funnull купила домен и аккаунт на Github. С тех пор этот домен был замечен в внедрении вредоносного ПО на мобильные устройства через вебсайты, использующие cdn.polyfill.io. Любые жалобы быстро удалялись из репозитория Github.
Самое интересное, что код имеет защиту от реверс-инжиниринга и активируется только на определенных мобильных устройствах в определенные часы, не активируется при обнаружении пользователя-администратора, а также приостанавливает выполнение при обнаружении службы веб-аналитики, предположительно, чтобы не попасть в отчёты.
Автор оригинального проекта рекомендует не использовать Polyfill, так как он больше не нужен современным браузерам. Тем временем, Fastly и Cloudflare предложили собственные альтернативы пользователям.
Google начал блокировать рекламу для сайтов eCommerce, использующих polyfill.io. Cloudflare реализовала перенаправление в реальном времени с cdn.polyfill.io на свою версию. Позже регистратор Namecheap приостановил действие домена, устранив риск на данный момент.
Этот инцидент является типичным примером атаки на цепочку поставок. Рекомендуется удалить все ссылки на polyfill.io в вашем коде.
Подробнее: https://sansec.io/research/polyfill-supply-chain-attack
#безопасность
Прокачай скиллы, чтобы получить заветный оффер
Ребята из команды FAANG School собрали в одном месте гайды, шпаргалки, мануалы и чек-листы, в общем всё, что поможет стать сильными профессионалами.
Основные концепции Docker, наборы команд в JetBrains, пошаговая RoadMap по Java и множество других полезных материалов будут всегда под рукой, помогут быстро справиться со сложными вопросами и тем самым приблизят вас к высокой зп.
Библиотечный каталог постоянно пополняется, а значит, будет еще больше ценного контента. Бесплатно и навсегда!
Переходи, заглядывай в библиотеку и сохраняй полезности, если хочешь увеличить шансы устроиться в Яндекс, Amazon, Google и другие.
Попасть в библиотеку JAVA JUNIOR
Original post link: t.me/seniorFront/4235
Forwarded and filtered by @smartfeed_bot
Ребята из команды FAANG School собрали в одном месте гайды, шпаргалки, мануалы и чек-листы, в общем всё, что поможет стать сильными профессионалами.
Основные концепции Docker, наборы команд в JetBrains, пошаговая RoadMap по Java и множество других полезных материалов будут всегда под рукой, помогут быстро справиться со сложными вопросами и тем самым приблизят вас к высокой зп.
Библиотечный каталог постоянно пополняется, а значит, будет еще больше ценного контента. Бесплатно и навсегда!
Переходи, заглядывай в библиотеку и сохраняй полезности, если хочешь увеличить шансы устроиться в Яндекс, Amazon, Google и другие.
Попасть в библиотеку JAVA JUNIOR
Original post link: t.me/seniorFront/4235
Forwarded and filtered by @smartfeed_bot
Forwarded from Frontender's notes [ru]
В России появилась среда разработки – встречайте GIGA IDE
На главной технологической конференции лета GigaConf 2024 СберТех представил российскую среду разработки GIGA IDE со встроенным AI-ассистентом*.
Среда позволяет вести разработку на популярных языках программирования, обеспечивает совместимость с востребованными плагинами, а также привычный пользовательский опыт. Встроенный в среду AI-ассистент GIGA CODE анализирует контекст, предлагает полные конструкции функций и других элементов, что позволяет писать код до 25% быстрее.
• GIGA IDE Desktop – это интегрированная среда разработки, которая включает 70 инструментов для облегчения задач разработки, автоматизации тестирования и администрирования приложений. Разработчики уже могут скачать GIGA IDE Desktop на платформе GitVerse.
• GIGA IDE Cloud позволит вести разработку в облаке, расширив возможности устройства дополнительными облачными ресурсами. Публичный релиз среды запланирован на осень 2024 года. Чтобы первыми получить доступ к GIGA IDE Cloud – регистрируйтесь на платформе GitVerse на раннее тестирование.
*AI (Artificial Intelligence) - «искусственный интеллект»
На главной технологической конференции лета GigaConf 2024 СберТех представил российскую среду разработки GIGA IDE со встроенным AI-ассистентом*.
Среда позволяет вести разработку на популярных языках программирования, обеспечивает совместимость с востребованными плагинами, а также привычный пользовательский опыт. Встроенный в среду AI-ассистент GIGA CODE анализирует контекст, предлагает полные конструкции функций и других элементов, что позволяет писать код до 25% быстрее.
• GIGA IDE Desktop – это интегрированная среда разработки, которая включает 70 инструментов для облегчения задач разработки, автоматизации тестирования и администрирования приложений. Разработчики уже могут скачать GIGA IDE Desktop на платформе GitVerse.
• GIGA IDE Cloud позволит вести разработку в облаке, расширив возможности устройства дополнительными облачными ресурсами. Публичный релиз среды запланирован на осень 2024 года. Чтобы первыми получить доступ к GIGA IDE Cloud – регистрируйтесь на платформе GitVerse на раннее тестирование.
*AI (Artificial Intelligence) - «искусственный интеллект»
Метрики, которые действительно имеют значение
Способность определить, что работает, а что нет, имеет решающее значение для определения успеха продукта. Кроме того, это позволяет руководителям продуктов правильно приоритезировать планы и инициативы. Принять решение о том, какими будут показатели успешности — важно, поскольку есть множество метрик, которые необходимо отслеживать, и отсутствие чёткого определения показателей успешности может дезинформировать.
В этой статье рассматриваются виды метрик и рассказывается о том, как их выбрать.
👉 @seniorFront
Original post link: t.me/seniorFront/4239
Forwarded and filtered by @smartfeed_bot
Способность определить, что работает, а что нет, имеет решающее значение для определения успеха продукта. Кроме того, это позволяет руководителям продуктов правильно приоритезировать планы и инициативы. Принять решение о том, какими будут показатели успешности — важно, поскольку есть множество метрик, которые необходимо отслеживать, и отсутствие чёткого определения показателей успешности может дезинформировать.
В этой статье рассматриваются виды метрик и рассказывается о том, как их выбрать.
👉 @seniorFront
Original post link: t.me/seniorFront/4239
Forwarded and filtered by @smartfeed_bot
Old but gold: Самый безопасный способ скрыть ключи API при использовании React
Хотите убедиться, что ваши ключи API в целости и сохранности при работе с React? В этой статье вы увидите лучшие способы скрыть ключи API, от использования переменных среды до создания собственного внутреннего прокси-сервера.
Подробнее: https://www.smashingmagazine.com/2023/05/safest-way-hide-api-keys-react/
#фронтенд #react
Original post link: t.me/tproger_web/4673
Forwarded and filtered by @smartfeed_bot
Хотите убедиться, что ваши ключи API в целости и сохранности при работе с React? В этой статье вы увидите лучшие способы скрыть ключи API, от использования переменных среды до создания собственного внутреннего прокси-сервера.
Подробнее: https://www.smashingmagazine.com/2023/05/safest-way-hide-api-keys-react/
#фронтенд #react
Original post link: t.me/tproger_web/4673
Forwarded and filtered by @smartfeed_bot
Forwarded from Frontender's notes [ru]
В этой задаче необходимо реализовать генератор хештэгов.
Условия:
— Выходная строка должна начинаться с хештега ( # )
— Во всех словах первая буква должна быть заглавной
— Если окончательный результат длиннее 140 символов, функция вернёт false
— Если ввод или результат представляет собой пустую строку, то функция должна вернуть false
Пример кода:
generateHashtag(" Hello there thanks for trying my Kata") => "#HelloThereThanksForTryingMyKata"
generateHashtag(" Hello World ") => "#HelloWorld"
generateHashtag("") => falseРешить задачу
Решение задачи🔽
function generateHashtag(str) {
if (str.trim() === "") {
return false;
}
const words = str.split(" ").map(word => word.charAt(0).toUpperCase() + word.slice(1));
const hashtag = "#" + words.join("");
return hashtag.length <= 140 ? hashtag : false;
}
console.log(generateHashtag(" Hello there thanks for trying my Kata")); // "
console.log(generateHashtag(" Hello World ")); // "
console.log(generateHashtag("")); // false
Please open Telegram to view this post
VIEW IN TELEGRAM
👩💻 Движок JavaScript, JIT-компилятор, стек, куча, память, примитивы, ссылки и сборка мусора
Как функционирует JIT-компилятор? Что такое стек и куча памяти? В чем отличие примитивных типов от ссылочных? Представляем общий краткий гайд по основам JavaScript, в котором поговорим о том, как работает один из самых популярных языков программирования “под капотом”.
Читать...
Original post link: t.me/frontendnoteschannel/3724
Forwarded and filtered by @smartfeed_bot
Как функционирует JIT-компилятор? Что такое стек и куча памяти? В чем отличие примитивных типов от ссылочных? Представляем общий краткий гайд по основам JavaScript, в котором поговорим о том, как работает один из самых популярных языков программирования “под капотом”.
Читать...
Original post link: t.me/frontendnoteschannel/3724
Forwarded and filtered by @smartfeed_bot
NOP::Nuances of programming
Движок JavaScript, JIT-компилятор, стек, куча, память, примитивы, ссылки и сборка мусора
Как функционирует JIT-компилятор? Что такое стек и куча памяти? В чем отличие примитивных типов от ссылочных? Представляем общий краткий гайд по основам JavaScript, в котором поговорим о том, как работает один из самых популярных языков программирования “под…
👩💻 Как интегрировать Cypress в Angular: полное руководство
Интеграция Cypress в Angular упрощает и оптимизирует тестирование веб-приложений. Предлагаем пошаговое руководство по настройке Cypress в проекте Angular, а также обзор ключевых и дополнительных возможностей Cypress как надежного и эффективного инструмента тестирования.
Читать...
Original post link: t.me/frontendnoteschannel/3726
Forwarded and filtered by @smartfeed_bot
Интеграция Cypress в Angular упрощает и оптимизирует тестирование веб-приложений. Предлагаем пошаговое руководство по настройке Cypress в проекте Angular, а также обзор ключевых и дополнительных возможностей Cypress как надежного и эффективного инструмента тестирования.
Читать...
Original post link: t.me/frontendnoteschannel/3726
Forwarded and filtered by @smartfeed_bot
NOP::Nuances of programming
Как интегрировать Cypress в Angular: полное руководство
Интеграция Cypress в Angular упрощает и оптимизирует тестирование веб-приложений. Предлагаем пошаговое руководство по настройке Cypress в проекте Angular, а также обзор ключевых и дополнительных возможностей Cypress как надежного и эффективного инструмента…
Что такое арность? Как получить арность функции в JS?
Арность — это количество аргументов функции. Например — вот объявление пары функций:
В JS можно получить арность функции с помощью свойства length:
Original post link: t.me/senior_front/2099
Forwarded and filtered by @smartfeed_bot
Арность — это количество аргументов функции. Например — вот объявление пары функций:
function fn(a, b) {
//...
}
function fn2(a, b, c) {
//...
}
Функция fn принимает два аргумента (это бинарная или 2-арная функция), функция fn2 принимает три аргумента (тернарная, 3-арная функция).В JS можно получить арность функции с помощью свойства length:
function foo(x, y, z) {
return foo.length; // Will return 3
}Original post link: t.me/senior_front/2099
Forwarded and filtered by @smartfeed_bot
Forwarded from Senior Frontend - javascript, html, css
Глобальный объект
Глобальными называют переменные и функции, которые не находятся внутри какой-то функции.
В JavaScript все глобальные переменные и функции являются свойствами специального объекта, который называется «глобальный объект» (global object).
В браузере этот объект явно доступен под именем window. Присваивая или читая глобальную переменную, мы, фактически, работаем со свойствами window.
Выполнение скрипта происходит в две фазы:
1. На первой фазе происходит инициализация, подготовка к запуску. Во время инициализации скрипт сканируется на предмет объявления функций вида Function Declaration, а затем — на предмет объявления переменных var. Каждое такое объявление добавляется в window. Функции, объявленные как Function Declaration, создаются сразу работающими, а переменные — равными undefined.
2. На второй фазе — собственно, выполнение. Присваивание (=) значений переменных происходит на второй фазе, когда поток выполнения доходит до соответствующей строчки кода.
👉 @seniorFront
Глобальными называют переменные и функции, которые не находятся внутри какой-то функции.
В JavaScript все глобальные переменные и функции являются свойствами специального объекта, который называется «глобальный объект» (global object).
В браузере этот объект явно доступен под именем window. Присваивая или читая глобальную переменную, мы, фактически, работаем со свойствами window.
var a = 5; // объявление var создаёт свойство window.a
alert(window.a); // 5Выполнение скрипта происходит в две фазы:
1. На первой фазе происходит инициализация, подготовка к запуску. Во время инициализации скрипт сканируется на предмет объявления функций вида Function Declaration, а затем — на предмет объявления переменных var. Каждое такое объявление добавляется в window. Функции, объявленные как Function Declaration, создаются сразу работающими, а переменные — равными undefined.
2. На второй фазе — собственно, выполнение. Присваивание (=) значений переменных происходит на второй фазе, когда поток выполнения доходит до соответствующей строчки кода.
// По окончании инициализации, до выполнения кода:
// window = { f: function, a: undefined, g: undefined }
var a = 5; // при инициализации даёт: window.a=undefined
function f(arg) { /*...*/ } // при инициализации даёт: window.f = function
var g = function(arg) { /*...*/ }; // при инициализации даёт: window.g = undefined👉 @seniorFront
👩💻 13 однострочников на JavaScript, которые сделают вас профессионалом
Этот язык программирования настолько крут, что позволяет творить чудеса с помощью только одной строки кода. Рассмотрим 13 таких однострочников из разряда like a pro.
Читать...
Original post link: t.me/frontendnoteschannel/3729
Forwarded and filtered by @smartfeed_bot
Этот язык программирования настолько крут, что позволяет творить чудеса с помощью только одной строки кода. Рассмотрим 13 таких однострочников из разряда like a pro.
Читать...
Original post link: t.me/frontendnoteschannel/3729
Forwarded and filtered by @smartfeed_bot
Библиотека программиста
🤹 13 однострочников на JavaScript, которые сделают вас профессионалом
Этот язык программирования настолько крут, что позволяет творить чудеса с помощью только одной строки кода. Рассмотрим 13 таких однострочников из разряда like a pro.
Forwarded from Senior Frontend - javascript, html, css
Разбираемся, зачем нужен и как выбрать оптимальный загрузочный экран для вашего веб-продукта
Нажимая на ссылку или вводя адрес в браузере, вам, наверняка, приходилось ждать, пока браузер бездействует. При долгом ожидании одни пользователи дождутся загрузки, а другие могут закрыть вкладку или отправятся писать гневные сообщения в поддержку. И панацеи от этой паузы не существует, но есть ограничения бюджета, сжатые сроки и внешние технические факторы. Тем не менее, сгладить эту ситуацию помогают загрузочные экраны, можно сказать, обманывая систему.
Когда и где нужны загрузочные экраны
Если страницы вашего продукта загружаются дольше 3-х секунд, даже периодически, то стоит задуматься о загрузочных экранах. Если вы волнуетесь, что при быстрых загрузках загрузочный экран будет появляться на доли секунды, нервируя пользователей таким мерцанием — делайте плавную анимацию появления контента
Типы загрузочных экранов
Если поискать в интернете примеры загрузочных экранов для веб‑страниц, то найдётся бесконечное количество вариаций дизайна, но они укладываются всего в три типа.
- Недетерминированная загрузка - это просто заглушка, закрывающая весь экран или область загрузки, вроде выпадающего списка или загружающегося блока на странице
- Детерминированная загрузка - это всё такая же заглушка, но сложная технически. Дизайн детерминированного загрузочного экрана ограничивается только его задачей — дать пользователю информацию о прогрессе загрузки. Он может быть отображён в текстовом формате в виде процентов, времени, объёма данных или любых других единиц, или графически, воспроизводя анимацию синхронно со статусом загрузки, от 0 до 100 процентов.
-Скелетон - представляет из себя множество недетерминированных заглушек, точечно закрывающих незагруженные данные, напоминающие скелет страницы визуально и технически. Особенность скелетонов в том, что они встречают пользователя структурой страницы, с первых секунд удерживая от закрывания вкладки браузера.
Средний по сложности загрузочный экран. По сути, это недетерминированный загрузочный экран, усложнённый кропотливой работой по оптимизации загрузки ресурсов и многократным точечным его использованием в виде косточек скелетона, практически для каждого элемента на странице. Отображается на доли секунды позже других, так как содержит вёрстку страницы, но этим полезен пользователям.
👉 @seniorFront
Нажимая на ссылку или вводя адрес в браузере, вам, наверняка, приходилось ждать, пока браузер бездействует. При долгом ожидании одни пользователи дождутся загрузки, а другие могут закрыть вкладку или отправятся писать гневные сообщения в поддержку. И панацеи от этой паузы не существует, но есть ограничения бюджета, сжатые сроки и внешние технические факторы. Тем не менее, сгладить эту ситуацию помогают загрузочные экраны, можно сказать, обманывая систему.
Когда и где нужны загрузочные экраны
Если страницы вашего продукта загружаются дольше 3-х секунд, даже периодически, то стоит задуматься о загрузочных экранах. Если вы волнуетесь, что при быстрых загрузках загрузочный экран будет появляться на доли секунды, нервируя пользователей таким мерцанием — делайте плавную анимацию появления контента
Типы загрузочных экранов
Если поискать в интернете примеры загрузочных экранов для веб‑страниц, то найдётся бесконечное количество вариаций дизайна, но они укладываются всего в три типа.
- Недетерминированная загрузка - это просто заглушка, закрывающая весь экран или область загрузки, вроде выпадающего списка или загружающегося блока на странице
- Детерминированная загрузка - это всё такая же заглушка, но сложная технически. Дизайн детерминированного загрузочного экрана ограничивается только его задачей — дать пользователю информацию о прогрессе загрузки. Он может быть отображён в текстовом формате в виде процентов, времени, объёма данных или любых других единиц, или графически, воспроизводя анимацию синхронно со статусом загрузки, от 0 до 100 процентов.
-Скелетон - представляет из себя множество недетерминированных заглушек, точечно закрывающих незагруженные данные, напоминающие скелет страницы визуально и технически. Особенность скелетонов в том, что они встречают пользователя структурой страницы, с первых секунд удерживая от закрывания вкладки браузера.
Средний по сложности загрузочный экран. По сути, это недетерминированный загрузочный экран, усложнённый кропотливой работой по оптимизации загрузки ресурсов и многократным точечным его использованием в виде косточек скелетона, практически для каждого элемента на странице. Отображается на доли секунды позже других, так как содержит вёрстку страницы, но этим полезен пользователям.
👉 @seniorFront
Проверка утечек личных данных от Google: «Dark Web Reports» станет бесплатным
После закрытия VPN-сервиса Google One, функция «Dark Web Reports» станет доступна всем владельцам Google-аккаунтов. Это произойдет в конце июля. Ранее функция была доступна лишь пользователям с подпиской Google One.
«Dark Web Reports» позволяет Google отслеживать дарквеб и уведомлять вас, если ваши личные данные были найдены в утечках и взломах. Вот как этим воспользоваться: https://tproger.ru/news/--proverka-utechek-lichnyh-dannyh-ot-google---dark-web-reports--stanet-besplatnym
#google #безопасность
Original post link: t.me/tproger_web/4689
Forwarded and filtered by @smartfeed_bot
После закрытия VPN-сервиса Google One, функция «Dark Web Reports» станет доступна всем владельцам Google-аккаунтов. Это произойдет в конце июля. Ранее функция была доступна лишь пользователям с подпиской Google One.
«Dark Web Reports» позволяет Google отслеживать дарквеб и уведомлять вас, если ваши личные данные были найдены в утечках и взломах. Вот как этим воспользоваться: https://tproger.ru/news/--proverka-utechek-lichnyh-dannyh-ot-google---dark-web-reports--stanet-besplatnym
#google #безопасность
Original post link: t.me/tproger_web/4689
Forwarded and filtered by @smartfeed_bot
🖥 Alien Staff Assets – более 20 PNG-элементов в футуристичном стиле. Шаблоны, изображения и иконки подойдут для веб-приложений развлекательного формата, а также для афиш и баннеров.
Сайтодел | #макет #figma
Original post link: t.me/sitodel/1847
Forwarded and filtered by @smartfeed_bot
Сайтодел | #макет #figma
Original post link: t.me/sitodel/1847
Forwarded and filtered by @smartfeed_bot
This media is not supported in your browser
VIEW IN TELEGRAM
Digital clock with separate indicators
Необычные часы, реализованные из трех svg-картинок, параметры которых задаются через JS с помощью логики вычисления текущего времени пользователя.
https://codepen.io/mortezasharifinia/pen/abEgNdJ
Original post link: t.me/senior_front/2113
Forwarded and filtered by @smartfeed_bot
Необычные часы, реализованные из трех svg-картинок, параметры которых задаются через JS с помощью логики вычисления текущего времени пользователя.
https://codepen.io/mortezasharifinia/pen/abEgNdJ
Original post link: t.me/senior_front/2113
Forwarded and filtered by @smartfeed_bot
Forwarded from Веб-страница
Playwright и Allure как хорошая практика для разработки веб-приложения
Разработчики вынуждены вечно искать баланс: как выпускать фичи быстро, качественно и желательно небольшой командой. Один из рабочих рецептов — это фронт + E2E-тесты.
E2E-тесты проверяют, как весь стек приложения работает вместе в реальной среде. Они имитируют действия конечного пользователя: нажатие кнопок, заполнение форм, навигацию по страницам и проверку содержимого.
Playwright предоставляет API для автоматизации действий в браузере. Он предлагает удобный способ создания и запуска E2E-тестов, благодаря поддержке браузеров Chromium, Firefox и WebKit, а также поддержке нескольких языков программирования: JavaScript, TypeScript, Python и других.
В статье автор рассказывает, как пользоваться этими инструментами и как прогонять порядка 1000 автотестов в сутки, имея всего 2 тестировщика вместо 15: https://habr.com/ru/companies/clevertec/articles/822583/
#react
Разработчики вынуждены вечно искать баланс: как выпускать фичи быстро, качественно и желательно небольшой командой. Один из рабочих рецептов — это фронт + E2E-тесты.
E2E-тесты проверяют, как весь стек приложения работает вместе в реальной среде. Они имитируют действия конечного пользователя: нажатие кнопок, заполнение форм, навигацию по страницам и проверку содержимого.
Playwright предоставляет API для автоматизации действий в браузере. Он предлагает удобный способ создания и запуска E2E-тестов, благодаря поддержке браузеров Chromium, Firefox и WebKit, а также поддержке нескольких языков программирования: JavaScript, TypeScript, Python и других.
В статье автор рассказывает, как пользоваться этими инструментами и как прогонять порядка 1000 автотестов в сутки, имея всего 2 тестировщика вместо 15: https://habr.com/ru/companies/clevertec/articles/822583/
#react
Forwarded from Senior Frontend - javascript, html, css
Что такое React Reconciliation (Cверка) и как он работает?
Reconciliation (Cверка) - это процесс, посредством которого React обновляет DOM. Когда состояние компонента изменяется, React должен рассчитать необходимость обновления DOM. Это делается путем создания виртуального DOM и сравнения его с текущим DOM. В этом контексте виртуальный DOM будет содержать новое состояние компонента.
При сравнении двух деревьев первым делом React сравнивает два корневых элемента. Поведение различается в зависимости от типов корневых элементов.
Всякий раз, когда корневые элементы имеют различные типы, React уничтожает старое дерево и строит новое с нуля.
При сравнении двух React DOM-элементов одного типа, React смотрит на атрибуты обоих, сохраняет лежащий в основе этих элементов DOM-узел и обновляет только изменённые атрибуты.
По умолчанию при рекурсивном обходе дочерних элементов DOM-узла React проходит по обоим спискам потомков одновременно и создаёт мутацию, когда находит отличие. Эта неэффективность может стать проблемой. Когда у дочерних элементов есть ключи, React использует их, чтобы сопоставить потомков исходного дерева с потомками последующего дерева.
👉 @seniorFront
Reconciliation (Cверка) - это процесс, посредством которого React обновляет DOM. Когда состояние компонента изменяется, React должен рассчитать необходимость обновления DOM. Это делается путем создания виртуального DOM и сравнения его с текущим DOM. В этом контексте виртуальный DOM будет содержать новое состояние компонента.
При сравнении двух деревьев первым делом React сравнивает два корневых элемента. Поведение различается в зависимости от типов корневых элементов.
Всякий раз, когда корневые элементы имеют различные типы, React уничтожает старое дерево и строит новое с нуля.
При сравнении двух React DOM-элементов одного типа, React смотрит на атрибуты обоих, сохраняет лежащий в основе этих элементов DOM-узел и обновляет только изменённые атрибуты.
По умолчанию при рекурсивном обходе дочерних элементов DOM-узла React проходит по обоим спискам потомков одновременно и создаёт мутацию, когда находит отличие. Эта неэффективность может стать проблемой. Когда у дочерних элементов есть ключи, React использует их, чтобы сопоставить потомков исходного дерева с потомками последующего дерева.
👉 @seniorFront
Forwarded from Веб-страница
Разработчик представил веб-сайт, который имитирует работу утилиты Disk Defragmenter в Windows 98, включая звуки HDD
Разработчик Деннис Морелло представил онлайн-проект Windows 98 Disk Defrag Simulator, который имитирует работу утилиты Disk Defragmenter в Windows 98, включая звуки HDD. На сайте можно посмотреть, как работала система дефрагментации дисковых носителей в Windows 98.
Для этого проекта Морелло использовал некоторые из самых мощных инструментов современной веб-разработки, включая:
— React для создания компонентов пользовательского интерфейса;
— Next.js для оптимизации производительности и SEO;
— Zustand для управления состоянием приложения;
— TailwindCSS для стилизации приложения вместе с 98.css для придания эстетики Windows 98;
— Radix UI Primitivesx для доступных интерактивных компонентов, таких как слайдеры и модальные окна;
— Vercel, хостинговую платформу для приложения.
Одной из самых больших проблем была реализация алгоритма дефрагментации, который выглядел бы аутентичным. Чтобы добиться точного внешнего вида Windows 98, требовалось пристальное внимание к деталям. Морелло использовал комбинацию 98.css и TailwindCSS. А чтобы добавить дополнительный слой ностальгии, Морелло реализовал реалистичные звуки жёсткого диска.
Ностальгируем: defrag98.com
#петпроект
Разработчик Деннис Морелло представил онлайн-проект Windows 98 Disk Defrag Simulator, который имитирует работу утилиты Disk Defragmenter в Windows 98, включая звуки HDD. На сайте можно посмотреть, как работала система дефрагментации дисковых носителей в Windows 98.
Для этого проекта Морелло использовал некоторые из самых мощных инструментов современной веб-разработки, включая:
— React для создания компонентов пользовательского интерфейса;
— Next.js для оптимизации производительности и SEO;
— Zustand для управления состоянием приложения;
— TailwindCSS для стилизации приложения вместе с 98.css для придания эстетики Windows 98;
— Radix UI Primitivesx для доступных интерактивных компонентов, таких как слайдеры и модальные окна;
— Vercel, хостинговую платформу для приложения.
Одной из самых больших проблем была реализация алгоритма дефрагментации, который выглядел бы аутентичным. Чтобы добиться точного внешнего вида Windows 98, требовалось пристальное внимание к деталям. Морелло использовал комбинацию 98.css и TailwindCSS. А чтобы добавить дополнительный слой ностальгии, Морелло реализовал реалистичные звуки жёсткого диска.
Ностальгируем: defrag98.com
#петпроект
Forwarded from Senior Frontend Developer | JavaScript, React, HTML & CSS
This media is not supported in your browser
VIEW IN TELEGRAM
Анимация в стиле Хэллоуина
Sass - это расширение CSS, которое добавляет много дополнительных возможностей, таких как переменные, вложенность, функции и другие, которые могут упростить и ускорить написание CSS. Sass написан на Ruby и компилируется в обычный CSS. SCSS - это особый тип файла для Sass, который имеет синтаксис, похожий на CSS.
Этот код представляет собой набор инструкций на языке Sass, который является препроцессором CSS. Препроцессоры CSS расширяют возможности обычного CSS, позволяя использовать переменные, функции и другие конструкции для более гибкого и эффективного написания стилей.
Вот, что делает каждая часть кода:
1. Определение переменных:
2. Цикл
Цикл выполняется, пока значение
Для каждой итерации цикла создается элемент с классом
Каждому элементу задается атрибут
3. Определение функций:
4. Определение переменных:
5. Стили для элемента
Устанавливаются свойства для контейнера
6. Стили для элементов с классом
Определяются стили для элементов с классом
Анимация
Анимация
Этот код создает элементы с классом
🌐 Ссылка на код
Sass - это расширение CSS, которое добавляет много дополнительных возможностей, таких как переменные, вложенность, функции и другие, которые могут упростить и ускорить написание CSS. Sass написан на Ruby и компилируется в обычный CSS. SCSS - это особый тип файла для Sass, который имеет синтаксис, похожий на CSS.
Этот код представляет собой набор инструкций на языке Sass, который является препроцессором CSS. Препроцессоры CSS расширяют возможности обычного CSS, позволяя использовать переменные, функции и другие конструкции для более гибкого и эффективного написания стилей.
Вот, что делает каждая часть кода:
1. Определение переменных:
c - массив цветов.n - длина массива c.2. Цикл
while:Цикл выполняется, пока значение
n не станет равным 0.Для каждой итерации цикла создается элемент с классом
.lyr.Каждому элементу задается атрибут
style, в котором используются переменные n и c для установки значения --i и color.3. Определение функций:
gcd($a, $b) - функция для нахождения наибольшего общего делителя двух чисел.lcm($a, $b) - функция для нахождения наименьшего общего кратного двух чисел.4. Определение переменных:
$ua - значение 135.$lcm - наименьшее общее кратное между $ua и 360.$m0 - результат деления $lcm на $ua.$m1 - результат деления $lcm на 360.5. Стили для элемента
body:Устанавливаются свойства для контейнера
body, включая отображение в виде сетки, отступы, высоту и фон.6. Стили для элементов с классом
.lyr:Определяются стили для элементов с классом
.lyr, включая размеры, радиус границы, фон с использованием градиента и анимацию.Анимация
mov изменяет позицию фона элемента.Анимация
rot поворачивает элемент на определенный угол.Этот код создает элементы с классом
.lyr и применяет к ним стили, чтобы создать анимированный эффект. Конкретный внешний вид зависит от значений переменных и используемых цветов в массиве c.🌐 Ссылка на код
Forwarded from Senior Frontend - javascript, html, css
Обучающие игры для разработчиков
Обучение программированию — это не только штудирование учебников, форумов и статей. Это еще и игра — вернее, игры, причем специализированные. Речь идет о геймификации в процессе учебы, когда материал подготавливают в игровой форме. Оказывается, таких проектов много.
Retro Gadgets
Симулятор предназначен для кодеров с опытом сборки электронных девайсов, то есть для тех, кто способен спаять устройство и разработать для него ПО. Задания в игре, несмотря на ее «ламповость», довольно сложные. Нужно паять, правда, в виртуальном мире, плюс собирать различные системы из отдельных модулей и писать код на Lua.
Joy of Programming
Ну а здесь — чистая радость программирования. По крайней мере, в том виде, в котором его себе представляют авторы проекта. Предусмотрена и возможность поработать с 3D-графикой, если есть такое желание. Задачи в игре достаточно сложные. Основной вектор здесь — автоматизация и управление роботами, навигация, логистика и машинное обучение.
CPU-Chef
Игра предназначена для новичков в мире электроники, поскольку ее единственная задача — помочь изучить строение ПК или ноутбука. Разработчики помогают пользователям понять, какие модули, включая процессор, хаб и т. п., для чего предназначены.
SQL Murder Mystery
Уже по названию понятно, что игра предназначена для разработчиков, изучающих SQL. Сюжет интересный: нужно раскрывать преступления в мире баз данных. В процессе расследования геймеры учатся создавать базы данных, формы, а еще — правильно писать SQL-запросы, чтобы выявить настоящего преступника.
Check IO
Отличная игра для изучения Python и TypeScript. Выглядит она неплохо, внутри интерфейса — острова, на которых расположены задачи и головоломки. У игры разные уровни сложности: она подойдет как новичкам, так и опытным кодерам. В самом начале есть подсказки, но постепенно их становится все меньше.
👉 @seniorFront
Обучение программированию — это не только штудирование учебников, форумов и статей. Это еще и игра — вернее, игры, причем специализированные. Речь идет о геймификации в процессе учебы, когда материал подготавливают в игровой форме. Оказывается, таких проектов много.
Retro Gadgets
Симулятор предназначен для кодеров с опытом сборки электронных девайсов, то есть для тех, кто способен спаять устройство и разработать для него ПО. Задания в игре, несмотря на ее «ламповость», довольно сложные. Нужно паять, правда, в виртуальном мире, плюс собирать различные системы из отдельных модулей и писать код на Lua.
Joy of Programming
Ну а здесь — чистая радость программирования. По крайней мере, в том виде, в котором его себе представляют авторы проекта. Предусмотрена и возможность поработать с 3D-графикой, если есть такое желание. Задачи в игре достаточно сложные. Основной вектор здесь — автоматизация и управление роботами, навигация, логистика и машинное обучение.
CPU-Chef
Игра предназначена для новичков в мире электроники, поскольку ее единственная задача — помочь изучить строение ПК или ноутбука. Разработчики помогают пользователям понять, какие модули, включая процессор, хаб и т. п., для чего предназначены.
SQL Murder Mystery
Уже по названию понятно, что игра предназначена для разработчиков, изучающих SQL. Сюжет интересный: нужно раскрывать преступления в мире баз данных. В процессе расследования геймеры учатся создавать базы данных, формы, а еще — правильно писать SQL-запросы, чтобы выявить настоящего преступника.
Check IO
Отличная игра для изучения Python и TypeScript. Выглядит она неплохо, внутри интерфейса — острова, на которых расположены задачи и головоломки. У игры разные уровни сложности: она подойдет как новичкам, так и опытным кодерам. В самом начале есть подсказки, но постепенно их становится все меньше.
👉 @seniorFront
