​​🚀Zustand.js: современный, невесомый, производительный и очень гибкий state manager

В этой статье вы узнаете о state manager'е Zustand.js, который является современным, невесомым, производительным и гибким инструментом для управления состоянием в веб-разработке.

Читать...


Original post link: t.me/frontendnoteschannel/3396
Forwarded and filtered by @smartfeed_bot

This is a daily stats digest!
Today the bot processed: 14 messages
Today you received: 8 messages
Our filtering prevented you from: 6 messages

Top 3 source channels:
Frontender's notes [ru]: 4 message(s)
Веб-страница: 4 message(s)
Senior Frontend - javascript, html, css: 4 message(s)


React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report

CSS Animation Effects

В этом видео создаётся svg картинка, которая затем анимируется в CSS. В итоге получается простой и оригинальный loader.

👉 @seniorFront


Original post link: t.me/seniorFront/3891
Forwarded and filtered by @smartfeed_bot

​​Какой инструмент для сборки лучше: Webpack или vite?

Кто-то хоронит Webpack. Кто-то говорит, что он как PHP — ещё долго будет поддерживаться, и что его точно стоит учить хотя бы на всякий случай.

Какие инструменты для сборки сейчас в топе? Что уже можно учить новичку, а что лучше обойти стороной? Какие есть достойные альтернативы Wepack сегодня и есть ли они вообще?

@tproger_web #обсуждение


Original post link: t.me/tproger_web/4433
Forwarded and filtered by @smartfeed_bot

​​Какую профессию вы бы выбрали, если бы не IT?

Представьте, что профессии фронтендера, бэкендера, сисадмина, да и всего IT никогда не существовало. Чем бы вы занялись и какую профессию освоили?

@tproger_web #обсуждение


Original post link: t.me/tproger_web/4434
Forwarded and filtered by @smartfeed_bot

​​🥳Написание слоя API в приложении — это прошлый век! Встречайте универсальный прокси

В данной статье я хочу поделиться методом, который позволяет избежать этих сложностей.

Читать...


Original post link: t.me/frontendnoteschannel/3398
Forwarded and filtered by @smartfeed_bot

Понимание условий асинхронной гонки JavaScript

Термин «состояние гонки» обычно применяется к конфликту при доступе к общим переменным в многопоточной среде. В Javascript ваш JS-код выполняется только одним потоком за раз, но все же можно создавать похожие проблемы.

Это распространенная проблема, когда люди просто вслепую делают свои функции асинхронными, не задумываясь о последствиях.

https://dev-gang.ru/article/ponimanie-uslovii-asinhronnoi-gonki-javascript-jro3mt2525/


Original post link: t.me/senior_front/1903
Forwarded and filtered by @smartfeed_bot

✍️ Gochi Hand – это типографская интерпретация почерка подростка. Шрифт выглядит спонтанным и непринужденным, но на самом деле все символы хорошо проработаны и подходят для печати. Пример есть в дизайне "Kids Toys & Games Store Website"

Сайтодел | #шрифт


Original post link: t.me/sitodel/1695
Forwarded and filtered by @smartfeed_bot

​​😎Директор директив. Расширяем функционал angular-компонентов красиво. Директива-контекст

В этой статье автор расскажет о том, как использовать директивы в Angular для расширения функционала компонентов.

Читать...


Original post link: t.me/frontendnoteschannel/3400
Forwarded and filtered by @smartfeed_bot

This is a daily stats digest!
Today the bot processed: 9 messages
Today you received: 7 messages
Our filtering prevented you from: 2 messages

Top 3 source channels:
Frontender's notes [ru]: 4 message(s)
Веб-страница: 2 message(s)
Senior Frontend - javascript, html, css: 1 message(s)


React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report

​​Google Chrome начнет защищать от фишинга в реальном времени

Google объявила войну злодеям в интернете, внедрив новые возможности в свой браузер Chrome: https://tproger.ru/articles/google-chrome-nachnet-zashhishhat-ot-fiwinga-i-virusov-v-realnom-vremeni

Раньше Chrome сравнивал адрес сайта со списком опасных, который обновлялся раз в полчаса. А мошенники наловчились создавать левые сайты на пару минут, успевая делать гадости.

Google решили это исправить и тепер защита от вирусов и фишинга работает в реальном времени. Chrome мгновенно сверяется с базой Google, где хранится инфа о «плохих» сайтах. Результат: на 25% больше заблокированных мошеннических страниц.

Google обещает, что вся проверка происходит анонимно и безопасно. Обновление вот-вот появится в Chrome для компьютеров и iOS. А в течение месяца еще и на Android.

@tproger_web #безопасность #chrome #google


Original post link: t.me/tproger_web/4435
Forwarded and filtered by @smartfeed_bot

Are the numbers in order?

Ваша задача определить, находятся ли числа в порядке возрастания.
Пустой массив и массив с одним значением автоматически считается отсортированным в порядке возрастания.

Пример:
inAscOrder([1,2,4,7,19]); // true
inAscOrder([1,2,3,4,5]); // true
inAscOrder([1,6,10,18,2,4,20]); // false

👉 @seniorFront


Original post link: t.me/seniorFront/3892
Forwarded and filtered by @smartfeed_bot

Вместе уютно собираемся по вечерам каждый у себя дома и учимся верстать сайты с нуля. В комплекте приятная музыка, тёмная тема и добрейшее сообщество неопытных верстальщиков, которые вообще-то огого и всем ещё покажут.

Всё это будет на бесплатном марафоне по HTML и СSS «ночной кружок по вёрстке», который пройдёт с 20 по 25 марта.

За 6 дней вы:

— Изучите основы веб-технологий и попробуете себя в роли фронтенд-разработчика;
— Напишете в тренажёрах свои строчки кода и увидите как изменяется страница сайта в реальном времени;
— Поймёте нравится ли вам веб-разработка

Вступить в кружок.


Original post link: t.me/frontendnoteschannel/3401
Forwarded and filtered by @smartfeed_bot

​​💪Angular на стероидах: наращиваем производительность при помощи WebAssembly

В статье описывается процесс написания функций для работы с простыми числами на AssemblyScript, компиляции их в WebAssembly, передачи двоичных данных через WebAssembly API и вызова этих функций из приложения Angular.

Читать...


Original post link: t.me/frontendnoteschannel/3402
Forwarded and filtered by @smartfeed_bot

Wavy Color Cube

Куб с анимацией переливающихся цветов в каждой из его сторон. Анимация реализована на чистом CSS.

https://codepen.io/hexagoncircle/pen/MWwjpYY


Original post link: t.me/senior_front/1904
Forwarded and filtered by @smartfeed_bot

Насколько потолстел JavaScript к 2024 году?

В этой статье автор статьи решил проанализировать популярные сайты и сервисы на предмет объема загружаемого JS кода. И пришел к неутешительным выводам: Например, Gitlab требуется 13 МБ кода, а именно 500К строк JS, просто для отображения статичного лендинга.

Ставь 🔥, если твой лендинг подгружает меньше 1 МБ.

👉 @seniorFront


Original post link: t.me/seniorFront/3897
Forwarded and filtered by @smartfeed_bot

🐙 UI – репозиторий с примерами простых компонентов пользовательского интерфейса. Элементы написаны на React.js и Next.js.

Сайтодел | #репозиторий #github


Original post link: t.me/sitodel/1696
Forwarded and filtered by @smartfeed_bot

This is a daily stats digest!
Today the bot processed: 16 messages
Today you received: 7 messages
Our filtering prevented you from: 9 messages

Top 3 source channels:
Senior Frontend - javascript, html, css: 6 message(s)
Senior Frontend Developer | JavaScript, React, HTML & CSS: 5 message(s)
Frontender's notes [ru]: 3 message(s)


React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report

​​CreateHtmlForm — простой инструмент для создания HTML-форм с помощью Markdown

Результат можно отображать в виде кода для фреймворков pico.css, Bootstrap или Tailwindcss: https://www.producthunt.com/products/create-html-form

@tproger_web #инструменты


Original post link: t.me/tproger_web/4436
Forwarded and filtered by @smartfeed_bot

​​Element.closest()

Метод Element.closest() ищет и возвращает ближайший (начиная с самого элемента) родительский элемент, соответствующий указанному CSS-селектору. Если ни один элемент не соответствует указанному CSS-селектору, возвращается null.

Типичный пример использования Element.closest() — определение области действия при клике. Допустим у нас есть множество кнопок, находящихся во вложенных контейнерах. Необходимо найти ближайший к нажатой кнопке контейнер.
<div class="container main-container">
   <button id="1">Кнопка 1</button>
   <div class="container parent-container">
     <button id="2">Кнопка 2</button>
     <div class="container child-container">
       <button id="3">Кнопка 3</button>
     </div>
   </div>
</div>

Для решения задачи достаточно добавить только один обработчик события click:
const mainContainer = document.querySelector('.main-container')

mainContainer.addEventListener('click', function (e) {
   const targetElem = e.target

   if (targetElem.tagName !== 'BUTTON') {
     // Eсли клик выполнен не на кнопке ничего не делаем
     e.stopPropagation()
     return
   }

   const containerElem = targetElem.closest('.container')
   // Выводим в консоль контейнер, содержащий нажатую кнопку
   console.log(containerElem)
})

👉 @seniorFront

Производительность фронтенда: большое приложение на реактивном SSR-топливе

Как построить архитектуру фронта, чтобы приложение загружалось быстро и при этом выполняло требования поисковой оптимизации? Как мы можем это измерить?

Значительно повысить производительность можно при помощи серверного рендеринга, но какая будет цена у такой оптимизации? Какой инструмент выбрать — готовую библиотеку или собственное решение? Какие ограничения в дальнейшем могут быть вызваны выбором того или иного подхода?

На все эти вопросы ответил frontend-разработчик Виталий Старов на конференции FrontendConf 2021.

https://habr.com/ru/companies/superjob/articles/660681/


Original post link: t.me/senior_front/1909
Forwarded and filtered by @smartfeed_bot