Страница телеграм канала Defront — про фронтенд-разработку и не только

defront logo

Defront — про фронтенд-разработку и не только

2304 подписчиков

Пою про то, что вижу. Канал ведёт @myshov


Входит в категории:
Defront — про фронтенд-разработку и не только
21.02.2021 00:02
Несколько дней назад команда разработчиков Vue зерилизила Vite 2.0. В статье "Announcing Vite 2.0" Эван Ю рассказал о новом проекте. Vite — это сборщик и dev server, использующий ESM, для ускорения применения изменений на этапе разработки. По своей философии он очень похож на Snowpack и WMR. Vite создавался для улучшения разработки Vue-приложений, но команда разработчиков решила сделать его независимым от Vue (на данный момент есть поддержка Vue, React, Preact и LitElement). Из-за смены курса разработки первая версия так и не достигла стабильной версии, поэтому Vite 2.0 можно считать официальной первой стабильной версией. Vite очень похож на Snowpack, но в нём есть несколько уникальных фич: поддержка автоматического код-сплиттинга для CSS, поддержка многостраничных приложений, есть режим для разработки браузерных библиотек, есть встроенная поддержка монорепозиториев и CSS-препроцессоров. #tool #bundle https://dev.to/yyx990803/announcing-vite-2-0-2f0a
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Defront — про фронтенд-разработку и не только
19.02.2021 21:02
В декабре 2020 года вебу исполнилось 30 лет. Дэниэл Кэо вспомнил ранние дни веба и написал про это статью — "Out of the Matrix: Early Days of the Web". Дэниэл работал техническим писателем и редактором журнала NeXTWORLD, когда он узнал про Тима Бернерса-Ли и его проект World Wide Web. Дэниэл познакомился с Тимом и захотел опубликовать статью про веб, но ему не получилось убедить главного редактора, так как интернет тогда был в зачаточном состоянии, и им пользовались только учёные из CERN. Интересно, что самый первый браузер — Nexus, который был сделан Тимом Бернерсом-Ли до Mosaic — имел встроенные инструменты для редактирования HTML-страниц. Потом эту функциональность добавили нативно в SDK NeXTSTEP. Но с релизом браузеров за пределами операционной системы NeXT, эта функция потерялась. Ещё Дэниэл предложил Тиму использовать вместо HTML новый формат для редактируемого PostScript от Adobe (который получил название PDF). Он организовал встречу Роберта Кайо (одна из ключевых фигур в популяризации веба) c менеджментом Adobe, но, как мы уже знаем, HTML пережил это событие. Очень интересная статья. Рекомендую почитать, если интересуетесь историей развития веба. #web #history https://blog.yax.com/posts/early-days-of-the-web-1991/
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Defront — про фронтенд-разработку и не только
18.02.2021 23:02
Саймон Харн рассказал о том, как предотвратить сдвиг контента из-за загрузки web-шрифтов — "How to avoid layout shifts caused by web fonts". Сдвиг контента (CLS) — это метрика Web Vitals, в будущем она будет влиять на алгоритм ранжирования результатов Google. Самый железный вариант предотвращения сдвига из-за загрузки шрифтов — использование font-display: optional. В этом случае браузер будет ждать загрузки шрифта 100мс, делая фоллбек на системный шрифт после истечения этого времени. Таким образом при первом посещении сайта пользователи с большой вероятностью увидят страницу с фоллбек-шрифтом без сдвига контента; при переходах на другие страницы сайта шрифт будет уже находится в кэше браузера и будет применяться к тексту на странице без задержек. Если font-display: optional использовать невозможно, тогда нужно оптимизировать время доставки шрифта. Для этого можно использовать сабсеттинг, отказаться от формата woff и использовать woff2, делать предзагрузку шрифтов. Если используется font-display: swap, тогда нужно настроить метрики шрифта фоллбека так, чтобы они совпадали с загружаемым шрифтом, в этом могут помочь font-display modifiers (f-mods) — новые свойства @font-face. #performance #fonts https://simonhearne.com/2021/layout-shifts-webfonts
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Defront — про фронтенд-разработку и не только
17.02.2021 23:02
Филип Уолтон рассказал о том, как можно улучшить отзывчивость страницы с помощью паттерна "Idle Until Urgent". Инициализация и выполнение JavaScript при загрузке сайта может негативно повлиять на метрики производительности. Для улучшения отзывчивости страницы Филип предлагает использовать паттерн idle-until-urgent. В этом паттерне выполнение ресурсоёмких задач откладывается с помощью метода requestIdleCallback, при этом код может быть выполнен сразу, если это, действительно, нужно. После внедрения этого паттерна в блоге Филипа First Input Delay уменьшился в три раза с 254 мс до 85 мс. Очень рекомендую почитать статью. Idle-until-urgent использует команда VS Code для улучшения отзывчивости приложения. #performance https://philipwalton.com/articles/idle-until-urgent/
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Defront — про фронтенд-разработку и не только
16.02.2021 21:02
Джаред Уайт рассказал, почему он больше не хочет использовать Tailwind CSS — "Why Tailwind Isnt for Me". Tailwind CSS — это набирающий популярность CSS-фреймворк, использующий методологию атомного CSS, в которой для каждой комбинации свойство/значение используется уникальный класс. Джаред пишет, что проработал с Tailwind год, но не смог свыкнуться с его недостатками: — HTML-код с Tailwind выглядит неэстетично — Для упрощения работы с фреймворком используется директива @apply, которая не является стандартом и в перспективе может принести проблемы, если проект будет переезжать на другой CSS-фреймворк — Tailwind использует дизайн-токены, которые определяется с помощью JavaScript, а не с помощью кастомных свойств — Tailwind плохо подходит для работы с web-компонентами — Использование Tailwind поощряет использование большого количества divов и spanов В последнее время видел в твиттере много хороших отзывов про Tailwind, поэтому познакомиться с альтернативным мнением было очень интересно. #css #library #musings https://dev.to/jaredcwhite/why-tailwind-isn-t-for-me-5c90
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Defront — про фронтенд-разработку и не только
16.02.2021 10:02
За прошедшие две недели в канале для патронов Defront было опубликовано десять постов: — Какие оптимизации используются в VS Code для ускорения загрузки — Золотое правило производительности — Влияние скорости работы сайта на SEO — Корректное отслеживание интервалов времени в браузерах — Текущее состояние 5G-сетей в мире и их влияние на производительность — Бенчмарк минификаторов JavaScript — Проектирование переиспользуемых UI-блоков — Как используют Webpack в Avito — Сравнение производительности Cypress, Puppeteer, Selenium и Playwright — Опыт использования React в Enterprise-секторе Становитесь патроном канала на Patreon, чтобы получить доступ к дополнительным постам в Defront Plus. На данный момент Patreon мой единственный источник дохода; все донаты идут на покупку еды, оплату аренды квартиры и т.п. Спасибо всем, кто читает и поддерживает Defront! https://www.patreon.com/myshov
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Defront — про фронтенд-разработку и не только
15.02.2021 22:02
Гал Шлёзингер поделился подходом для создания лёгкого встраиваемого виджета — "HTML over the wire with Preact". Галу надо было сделать интерактивный виджет, который можно встроить на любой сайт. Он хотел как можно сильнее уменьшить размер js-бандла виджета, поэтому вместо React выбрал Preact. Для работы с GrahpQL на стороне клиента была выбрана библиотека urlq, но её размер тоже был очень большим. В итоге вместо отправки JSON стал отправлять на клиент уже готовую разметку HTML (проект это позволял). Так как dangerouslySetInnerHTML ломал доступность (пропадал фокус и DOM-состояние при замене разметки), он воспользовался библиотекой preact-markup для преобразования полученной HTML-размеки в Preact-элементы, чтобы работал diff виртуального DOM при замене элементов. В общем, довольно интересный подход, его также можно использовать в React. #preact #architecture https://gal.hagever.com/posts/hotwire-in-preact-apps/
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Defront — про фронтенд-разработку и не только
14.02.2021 22:02
Кэти Хемпениус написала статью о лучших практиках создания каруселей — "Best practices for carousels". С точки зрения производительности не рекомендуется использовать JS для динамического создания каруселей, так как такой подход негативно влияет на метрику LCP (Largest Contentful Paint). Для создания каруселей рекомендуется использовать обычную HTML-разметку и Scroll Snap API. С точки зрения UX не рекомендуется использовать автоматическое переключение слайдов карусели, так как анимации у пользователей ассоциируются с рекламой. Если от автоматического переключения отказаться нельзя, то переключение слайдов нужно временно останавливать при наведении курсора на слайд. Полезная статья. Рекомендую почитать. #performance #ux https://web.dev/carousel-best-practices/
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Defront — про фронтенд-разработку и не только
13.02.2021 23:02
Йонас Штреле рассказал о новом подходе для фингерпринтинга пользователей, который работает во всех браузерах, включая инкогнито. В этом методе для идентификации пользователей используются фавиконки. Сначала на сервере подготавливается набор путей с уникальными фавиконками. Каждому пути соответствует один бит идентификатора пользователя, например для четырёхбитного идентификтатора они могут выглядеть так: [/a, /b, /c, /d] -> 1111. При посещении сайта, пользователю присваивается уникальный идентификатор, например "3" (0011 в двоичном виде) и запускается серия редиректов для тех путей, на которые приходится единица идентификатора ([/c, /d]), с каждым редиректом браузер запрашивает уникальную для данного роута фавиконку и сохраняет её в favicone cache (F-Cache). При повторном посещении сайта, пользователь снова прогоняется через серию редиректов в этот раз по всем путям; сервер тем временем восстанавливает идентификатор пользователя, наблюдая за тем, какие фавиконки были загружены. У этого подхода фингерпринтинга есть проблема — скорость установки и чтения такой "куки". В моих экспериментах На установку и чтение 15-битного идентификатора ушло около 10 секунд. В оригинальной статье написано, что при хороших сетевых условиях для установки и чтения 34-битного идентификатора (17 миллиардов записей) требуется восемь секунд. #privacy #research https://supercookie.me/workwise https://github.com/jonasstrehle/supercookie
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Defront — про фронтенд-разработку и не только
12.02.2021 23:02
В блоге skypack была опубликована отличная статья-обзор современных библиотек для работы с датами — "The best JavaScript date libraries in 2021". По набору возможностей лидером стал date-fns. Он предоставляет отличную документацию, функциональную модульную архитектуру и очень много утилит для работы с датами. Эту библиотеку можно использовать без бандлеров. Для работы с часовыми поясами лучше всего подходит Luxon. Luxon под капотом использует браузерное API Intl, оборачивая всё в иммутабельное и дружественное API. Если вам нужен самый минимум от работы с датами, а с нативным Date работать не хочется, то можно воспользоваться Day.js (размер 4kb). Day.js предоставляет API очень похожее на Moment.js. Moment.js в свою очередь не рекомендуются использовать, так как он был задеприкейчен в 2020 году. #library #date https://www.skypack.dev/blog/2021/02/the-best-javascript-date-libraries/
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Defront — про фронтенд-разработку и не только
11.02.2021 20:02
Алекс Бирсан — исследователь в области информационной безопасности — опубликовал статью о том, как ему удалось получить доступ к внутренним сетям 35 организаций — "Dependency Confusion: How I Hacked Into Apple, Microsoft and Dozens of Other Companies". Из публичных источников (GitHub, ресурсы сайтов и т.п.) были собраны имена приватных пакетов, которые доступны только из внутренних сетей организаций. Для этих пакетов в публичных репозиториях (npm, PyPi, RubyGems) были опубликованы одноимённые пакеты. Из-за ошибки в конфигурации некоторые билд-системы начали скачивать и устанавливать пакеты из публичного репозитория. Таким образом Алекс получил доступ к внутренним сетям Apple, Microsoft, PayPal, Uber, Yelp. После публикации статьи Microsoft выпустила документ с рекомендациями для предотвращения подобных ошибок в npm, yarn, NuGet Gallery, Pip, Gradle и Maven Central. Советы для npm: используйте scoped packages, настройте npm так, чтобы в приоритете был приватный реестр, не удаляйте package-lock.json и используйте npm ci для установки зависимостей. #security #npm https://medium.com/@alex.birsan/dependency-confusion-4a5d60fec610 https://azure.microsoft.com/en-us/resources/3-ways-to-mitigate-risk-using-private-package-feeds/
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Defront — про фронтенд-разработку и не только
10.02.2021 20:02
Райан Карниато — автор библиотеки Solid.js — написал статью о общих принципах работы точечной реактивности — "A Hands-on Introduction to Fine-Grained Reactivity". Точечная реактивность (fine-grained reactivity) используется в MobX, Vue, Svelte, Knockout и Solid. Если объяснять совсем просто, то её суть сводится к выполнению реакций при изменении наблюдаемых значений. Точно также как меняется результат выполнения формулы в Excel при изменении ячеек, которые используются формулой. Если продолжать аналогию, то эти "ячейки" в разных библиотеках называются по-разному: Signals, Observables, Atoms, Subjects, Refs, — а "формулы": Reactions, Effects, Autoruns, Watches, Computeds. В статье нет каких-либо деталей реализации, но её можно рекомендовать как хорошее введение в тему точечной реактивности. #jsframeworks #reactivity #architecture https://dev.to/ryansolid/a-hands-on-introduction-to-fine-grained-reactivity-3ndf
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Defront — про фронтенд-разработку и не только
09.02.2021 20:02
Элад Шехтер подробно разобрал логику применения дефолтных стилей в браузерах — "How Does CSS Work?". При отображении HTML-элементов к ним всегда применяются стили. Эти стили могут прийти из разных источников: — значения CSS-свойств по умолчанию из CSS-движка; — значения элементов, переопределённые с помощью "внутренних" каскадных таблиц стилей браузера (User-Agent Stylesheet); — стили для нормализации отображения элементов между разными браузерами (normalize.css); — стили со сбросом значений CSS-свойств (reset.css). При нормализации и сбросе стилей особую роль играют два первых уровня. За последние пару лет в стандарт было добавлено несколько новых значений и свойств, благодаря которым можно "лавировать" между этими уровнями и уместить в несколько строк полноценный reset.css: * { all: unset; display: revert; } *, *::before, *::after{ box-sizing: border-box; } Очень хорошая статья. Рекомендую почитать. #css https://elad.medium.com/how-does-css-work-92fe7116916d
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Defront — про фронтенд-разработку и не только
08.02.2021 22:02
В блоге sqreen была опубликована статья про эксперименты с удалённой отладкой Node.js — "Experimenting with remote debugging: Node.js runtime code injection". Любой Node.js-процесс, работающий на Linux или macOS, можно перевести в режим отладки с помощью сигнала SIGUSR1: kill -USR1 . Затем к этому процессу можно подключиться с помощью Chrome DevTools, поставить брекпойнты, проинспектировать код и сделать всё, что можно сделать в отладчике. В статье разбирается другой подход — внедрение кода в работающий процесс. Для этого используется библиотека chrome-remote-interface, которая реализует протокол Chrome DevTools, но предоставляет больше возможностей, чем стандартный JS-отладчик в браузере. Автор статьи пишет, что нигде не встречал подобный подход, но он может использоваться для создания мощных инструментов отладки Node.js. #nodejs #debug https://blog.sqreen.com/remote-debugging-nodejs-runtime-code-injection/
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Defront — про фронтенд-разработку и не только
08.02.2021 01:02
Юна Кравец написала статью про новое CSS-свойство aspect-ratio — "New aspect-ratio CSS property supported in Chromium, Safari Technology Preview, and Firefox Nightly". Явное указание соотношения сторон критично в отзывчивом дизайне и для того чтобы предотвратить внезапный сдвига контента во время загрузки страницы. Сегодня для задания соотношения сторон элементов можно использовать "Padding-Top Hack", но это решение неинтуитивно и требует абсолютного позиционирования у элементов. Новое CSS-свойство aspect-ratio позволяет задать соотношение сторон у любых элементов на странице в более логичном виде: .container { width: 100%; aspect-ratio: 16 / 9; } Поддержка aspect-ratio уже появилась в Chrome 88. В Safari и Firefox aspect-ratio появится в следующих версиях. #css https://web.dev/aspect-ratio/
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме