Web API, которые функционально приближают веб-приложения к нативным
Чтобы дать пользователям доступ к функциям, привычным в нативных приложениях, и добавить новые, можно использовать Web API.
В статье подробно рассказали о них и раскрыли некоторые тонкости: https://habr.com/ru/companies/clevertec/articles/820227/
#javascript #api #react
Original post link: t.me/tproger_web/4661
Forwarded and filtered by @smartfeed_bot
Чтобы дать пользователям доступ к функциям, привычным в нативных приложениях, и добавить новые, можно использовать Web API.
В статье подробно рассказали о них и раскрыли некоторые тонкости: https://habr.com/ru/companies/clevertec/articles/820227/
#javascript #api #react
Original post link: t.me/tproger_web/4661
Forwarded and filtered by @smartfeed_bot
🖥 Dynamic 3D Business Icons Set – набор из 44 объемных иконок на тему бизнеса. У иконок красивые пастельные цвета, напоминающие конфеты.
Сайтодел | #макет #figma
Original post link: t.me/sitodel/1838
Forwarded and filtered by @smartfeed_bot
Сайтодел | #макет #figma
Original post link: t.me/sitodel/1838
Forwarded and filtered by @smartfeed_bot
🖥 Самые интересные публикации за последние дни:
• Коварные утечки памяти в React: как можно обжечься на useCallback и замыканиях
• Загружаем товары из магазина Ozon в Google-таблицу
• Многопоточность JavaScript с SharedArrayBuffer и Atomics: основы
• Загрузка es-модулей в браузерные приложения
• Tramvai — фреймворк для создания веб-приложений
Original post link: t.me/frontendnoteschannel/3711
Forwarded and filtered by @smartfeed_bot
• Коварные утечки памяти в React: как можно обжечься на useCallback и замыканиях
• Загружаем товары из магазина Ozon в Google-таблицу
• Многопоточность JavaScript с SharedArrayBuffer и Atomics: основы
• Загрузка es-модулей в браузерные приложения
• Tramvai — фреймворк для создания веб-приложений
Original post link: t.me/frontendnoteschannel/3711
Forwarded and filtered by @smartfeed_bot
Хабр
Коварные утечки памяти в React: как можно обжечься на useCallback и замыканиях
Я работаю в Ramblr, это ИИ-стартап, где мы строим на React сложные приложения для аннотирования видео. Недавно мне попалась сложная утечка памяти, которая возникает при одновременном использовании...
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
