✍️ 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

​​📋Ленивые бесконечные списки на основе Deferrable Views

В этой статье поделюсь реализацией списков на основе Deferrable Views, недавно появившихся в Angular 17.

Читать...


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

Animated Covers

Здесь реализовано множество простых анимаций при наведении на блок.

👉 @seniorFront


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

​​Осторожно, PHP калечит людей...


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

Platonic solids

Анимированный настраиваемый многогранник, выполненный с помощью CSS и JavaScript.

https://codepen.io/Dillo/pen/OJOjdQp


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

​​👆Интерфейс под один палец. Концепция ONE TOUCH

В этой статье автор расскажет о концепции ONE TOUCH, которая предполагает выполнение любого действия в приложении одним пальцем, в любом положении экрана.

Читать...


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

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

Top 3 source channels:
Frontender's notes [ru]: 4 message(s)
Веб-страница: 3 message(s)
Senior Frontend Developer | JavaScript, React, HTML & CSS: 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

​​​Наглядные примеры использования React Hooks

В этой статье вы узнаете различные особенности React Hooks и получите полезные советы по их использованию. Автор объясняет, как работать с хуками жизненного цикла, кастомными хуками и хуками контекста, а также как обрабатывать ошибки в хуках на наглядных примерах с кодом.

https://css-tricks.com/react-hooks-the-deep-cuts/

@tproger_web #react #фронтенд


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