Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только

2021-02-14 22:28:13 Кэти Хемпениус написала статью о лучших практиках создания каруселей — "Best practices for carousels".

С точки зрения производительности не рекомендуется использовать JS для динамического создания каруселей, так как такой подход негативно влияет на метрику LCP (Largest Contentful Paint). Для создания каруселей рекомендуется использовать обычную HTML-разметку и Scroll Snap API.

С точки зрения UX не рекомендуется использовать автоматическое переключение слайдов карусели, так как анимации у пользователей ассоциируются с рекламой. Если от автоматического переключения отказаться нельзя, то переключение слайдов нужно временно останавливать при наведении курсора на слайд.

Полезная статья. Рекомендую почитать.

#performance #ux

https://web.dev/carousel-best-practices/ Открыть/Комментировать

2021-02-13 23:51:01 Йонас Штреле рассказал о новом подходе для фингерпринтинга пользователей, который работает во всех браузерах, включая инкогнито.

В этом методе для идентификации пользователей используются фавиконки. Сначала на сервере подготавливается набор путей с уникальными фавиконками. Каждому пути соответствует один бит идентификатора пользователя, например для четырёхбитного идентификтатора они могут выглядеть так: ['/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 Открыть/Комментировать

2021-02-12 23:26:10 В блоге 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/ Открыть/Комментировать

2021-02-11 20:39:18 Алекс Бирсан — исследователь в области информационной безопасности — опубликовал статью о том, как ему удалось получить доступ к внутренним сетям 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/ Открыть/Комментировать

2021-02-10 20:48:20 Райан Карниато — автор библиотеки 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 Открыть/Комментировать

2021-02-09 20:09:49 Элад Шехтер подробно разобрал логику применения дефолтных стилей в браузерах — "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 Открыть/Комментировать

2021-02-08 22:04:21 В блоге 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/

2.8K viewsAlexander Myshov, 19:04

Открыть/Комментировать

2021-02-08 01:36:53 Юна Кравец написала статью про новое 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/ Открыть/Комментировать

2021-02-07 01:46:55 Мэтт Хоббс — эксперт в области web-производительности — рассказал о том, как проводить аудит производительности интранет-сайтов — "The web performance of internal systems is important, so optimise them too".

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

Для анализа производительности можно развернуть локальные версии WebPageTest и Sitespeed.io. С помощью браузерных девтулзов можно проанализировать производительность в рантайме. Если есть доступ к аналитике, то её можно расширить метками производительности с помощью Perfume.js.

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

#performance

https://nooshu.github.io/blog/2021/02/03/the-importance-of-internal-system-performance/ Открыть/Комментировать

2021-02-06 00:41:09 Стэфан Баумгартнер показал на примере как затипизировать сложную функцию для отправки запросов — "Dynamic Static Typing In TypeScript".

В статье разбирается типизация Express-like функции для отправки GET-запросов. Сначала она типизируется "в лоб". Потом пример немного усложняется: добавляются юнионы, дженерики. В конце статьи разбирается довольно интересный кейс с использованием литеральных шаблонных типов и рекурсивных условных типов (появились в TypeScript 4.1) для извлечения имён параметров из строки.

Хорошая статья. Рекомендую почитать всем, кто работает с TypeScript.

#typescript

https://www.smashingmagazine.com/2021/01/dynamic-static-typing-typescript/ Открыть/Комментировать