tgindex

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

описание

Ламповый канал про фронтенд и не только. Всё самое полезное для опытных web-разработчиков Обсуждение постов @defrontchat Также советую канал @webnya

← к каналу@defront
5 116
подписчиков
Охват к подписчикам
164,9%
ERR
Реакции к просмотрам
0,69%
1 163 на 19 постов
Пересылки к просмотрам
0,39%
652
Постов в день
0,0
всего 20

Где отзываются чаще

доля реакций к просмотрам
  • 29 янв. 2022 г.Сегодня каналу исполнилось три года! Сначала для меня канал был просто интересным занятием, который мотивировал читать что-то новое и делится найденными с коллегами. Сейчас ситуация складывается таким образом, что из-за обострения тоннельного синдрома я не могу идти работать фулл-тайм, и Defront стал моим, можно сказать, спасением. Я очень благодарен, что у меня есть возможность работать над каналом. Также хочу поблагодарить всех, кто читает Defront и поддерживает меня на Patreon. Особенная благодарность всем спонсорам канала — Зарплате.ру, Василисе Версус, Сергею Ufocoder, Андрею Советкину и Mykola Dekhtiarenko. И уже по традиции передаю привет всем дружественным каналам и сообществам (пишите в лс, если кого-то забыл): @webnya — канал про веб-стандарты, новости TC39 и JS, WebAssembly и т.п. @oleg_log — канал про бэкенд-разработку и программирование в целом @ufostation — подкасты и статьи про разработку @webstandards_ru — подкасты и канал про фронтенд-разработку @forwebdev — новости из мира фронтенда @valya_reads_issue — последние новости и инсайты из мира фронтенда @typesafesound — мысли про TypeScript и разработку @msosnovfeed — про процессы, архитектуру и т.п. @artalog — про разработку, React и софт скиллы @css_ru — разговоры про CSS и HTML @asterisk_js — ссылки на проекты и статьи про Node.js и около Ещё раз всем спасибо и берегите себя!2,23%
  • 24 февр. 2022 г.Про войну в Украине Шлю лучи поддержки братьям и сёстрам украинцам. В моём окружении нет ни одного человека, кто бы поддерживал текущие действия российских властей. Во всех соцсетях я вижу только посты с осуждениями текущей ситуации несмотря на то, что говорят по телевизору. Это заставляет верить, что российский народ не хочет войны, все хотят, чтобы текущая ситуация разрешилась как можно скорее. Мне больно видеть происходящее. Но я хочу и буду верить, что наши власти увидят осуждение своих действий внутри России и остановят весь этот бред.2,06%
  • 7 февр. 2022 г.Оператор конвейера в JavaScript (pipeline operator) Аксель Раушмайер написал статью об операторе конвейера (pipeline operator, pipe operator) — новом операторе, над которым идёт работа в TC39 — "A pipe operator for JavaScript: introduction and use cases". Есть два конкурирующих пропозала с реализацией оператора конвейера: конвейер в F#-стиле и Hack-стиле. Оба пропозала вводят в язык оператор |>, благодаря которому упрощается композиция функций: // стандартная композиция const y = h(g(f(x))); // композиция с пайпом в Hack-стиле const y = x |> f(%) |> g(%) |> h(%); // композиция с пайпом в F#-стиле const y = x |> f |> g |> h; Несмотря на то что пропозал c конвейером в F#-стиле выглядит чище, у него больше недостатков по сравнению с конвейером в Hack-стиле: нужно использовать каррирование, усложняется добавление поддержки yield и await, больше накладных расходов на память. По этим причинам работа над F#-версией конвейера была остановлена. На данный момент пропозал о добавлении конвейера в Hack-стиле находится на Stage 2, и его поддержки нет ни в одном браузере. #js #tc39 #proposal https://2ality.com/2022/01/pipe-operator.html1,16%
  • 4 февр. 2022 г.Deno в 2021 году Арон О'Муллан, Бартек Иванчук и Райан Дал подвели итоги разработки Deno и его экосистемы в 2021 году — "Deno in 2021". Летом был запущен Deno Deploy — коммерческое серверное решение для развёртывания JavaScript, TypeScript и WASM-сервисов. С версии 1.9 HTTP-модуль использует hyper — HTTP-сервер с поддержкой HTTP/2, написанный на Rust. Hyper по сравнению с предыдущей реализацией на TypeScript увеличил пропускную способность сервера и уменьшил задержки. Был добавлен FFI (Foreign Function Interface). Благодаря ему расширения для Deno можно писать на любом языке, поддерживающем соглашения вызова функций C. В четвёртом квартале началась работа над созданием режима совместимости с экосистемой Node.js для запуска npm-пакетов. На данный момент работа над этой фичей ещё не закончена. Её можно включить с помощью флага --compat. Было оптимизировано ядро Deno. Накладные расходы на вызов низкоуровневых функций платформы были сокращены в 100 раз. В августе Deno был добавлен в таблицу совместимости MDN. #deno https://deno.com/blog/deno-in-20211,04%
  • 27 янв. 2022 г.Что появилось в CSS после CSS3 Крис Койер сделал обзор CSS-фич для тех, кто не следил за развитием языка последние семь лет — "What should someone learn about CSS if they last boned up during CSS3?". С момента появления CSS3 в языке появились: — гриды и флексы для удобной раскладки элементов на странице; — Houdini — набор API для программного расширения возможностей CSS; — новый синтаксис определения цвета без запятой rgb(255 0 0 / 0.5); — кастомные свойства — близкий аналог переменных в препроцессорах var(--accentColor); — preference queries — медиавыражения, использующиеся для адаптации страницы под пользовательские настройки операционной системы; — поддержка вариативных шрифтов для создания страниц с богатой типографикой; — поддержка SVG-путей для определения масок, управления анимацией и обтеканием текста; — CSS-фильтры для определения функций наложения цвета и создания эффектов; — поддержка Shadow DOM для стилизации кастомных элементов. #css https://css-tricks.com/whats-new-since-css3/0,77%
  • 5 февр. 2022 г.Google разрабатывает новый API для определения предпочтений пользователей для показа релевантной рекламы — Topics API. Его разработка началась после того как предыдущее решение — FLoC — получило негативные отзывы от лидеров индустрии из-за высокого риска фингерпринтинга. Формирование предпочтений в Topics API происходит на стороне клиента, есть возможность отключить Topics API и настроить интересующие темы. https://blog.google/products/chrome/get-know-new-topics-api-privacy-sandbox/0,74%
  • 9 февр. 2022 г.Statoscope — тулкит для анализа Webpack-бандлов На Smashing Magazine был опубликован транскрипт доклада Сергея Мелюкова про тулкит для анализа Webpack-бандлов — "Statoscope: A Course Of Intensive Therapy For Your Bundle". С помощью Statoscope можно сравнить две сборки между собой и получить информацию об увеличении размера бандла, времени сборки и т.п. Он помогает обнаруживать дубликаты пакетов в бандле и, в отличие от webpack-bundle-analyzer, показывает конкретные файлы, в которых происходит импорт этих пакетов. Его можно использовать в CI для блокирования пулл-реквестов, если какой-либо критический показатель выходит за установленное порог. В нём поддерживается создание кастомных отчётов с помощью Jora и DiscoveryJS. Statoscope используется в проектах Яндекса: в Яндекс.Маркете, Яндекс.Картах, Кинопоиске. Также он используется в библиотеке size-limit. #webpack #bundle #tool https://www.smashingmagazine.com/2022/02/statoscope-course-intensive-therapy-bundle/ https://www.youtube.com/watch?v=aAkmZ0gMYQ8 (доклад на русском)0,73%
  • 8 февр. 2022 г.Релиз Firefox 97 В новом релизе была добавлена поддержка каскадных слоёв (CSS Cascade Layers) с помощью CSS-директивы @layer. Эта фича полезна при рефакторинге, темизации и структурировании стилей. Добавлена поддержка CSS-свойства scrollbar-gutter. С его помощью можно зарезервировать место на боковой границе вьюпорта, чтобы ширина страницы не прыгала при появлении полосы прокрутки. Добавлен метод AbortSignal.throwIfAborted() и свойство AbortSignal.reason. Эти изменения позволяют упростить реализацию отмены выполнения кода по внешнему событию. Теперь можно использовать requestAnimationFrame и cancelAnimationFrame внутри веб-воркеров. В CSS добавлены новые единицы измерения cap и ic, добавлена поддержка @scroll-timeline и animation-timeline для создания анимаций, привязанных к позиции скролла. CSS-свойство color-adjust было переименовано в print-color-adjust. #firefox #release https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/970,54%
  • 28 янв. 2022 г.Оптимизация производительности Angular-приложений Минко Гечев из Google рассказал про распространённые проблемы производительности Angular-приложений и способы их решения — "4 Runtime Performance Optimizations". — Загрязнение зоны (zone pollution). Возникает в том случае, когда механизм обнаружения изменений запускается асинхронными событиями, не влияющими на состояние основного приложения. Для решения этой проблемы регистрацию событий нужно выносить вне основной зоны Angular с помощью метода runOutsideAngular. Примером загрязнения зоны может быть регистрация обработчика события mousemove для отображения лейблов диаграммы из сторонней библиотеки. — Запуск обнаружения изменений вне границ компонента (out of bounds change detection). Происходит тогда, когда возникновение событий в одном компоненте запускает механизм обнаружения изменений в соседних независимых компонентах. Эта проблема решается использованием стратегии обнаружения изменений onPush. — Лишние перерасчёты значений в шаблонах (recalculation of referentially transparent expressions). Если в шаблоне используются методы для получения значений, то они будут исполняться каждый раз при ререндериге компонента. Если эти методы удовлетворяют принципу ссылочной прозрачности, то их можно либо мемоизировать, либо заменить пайпами. — Большое дерево компонентов (large component trees). Если дерево компонентов слишком большое, то как бы ни были оптимизированы компоненты, приложение будет работать с подтормаживаниями. Решение — уменьшить размер дерева. Это можно сделать с помощью пагинации или виртуализированного списка. #angular #performance #video https://youtu.be/f8sA-i6gkGQ0,47%
  • 1 февр. 2022 г.Производительность рендеринга в браузерах Мэт Перри — автор библиотек Framer Motion и Moion One — рассказал про особенности и трудности создания плавных анимаций. Плавные анимации достигаются за счёт оптимизации рендеринга и использования аппаратного ускорения. При оптимизации рендеринга нужно учитывать, что некоторые свойства приводят к перерасчёту раскладки страницы. Но если эти свойства используются в изолированном контексте, например, с position: absolute, то вполне можно достичь 60 fps. В сети можно найти список этих свойств (CSS Triggers), но он долгое время не обновлялся. Так например, обработка SVG и CSS-свойства filter в Firefox и Chrome уже выносится на GPU, а в Chrome скоро появится поддержка ускорения анимаций clip-path и background-color. Все браузеры для анимаций используют аппаратное ускорение. В Safari оно реализовано с помощью системной библиотеки Core Animation. Она несовместима с Web Animation API, из-за чего в некоторых случаях ускорение может отключаться. Полезная статья. Рекомендую почитать всем, кто интересуется темой производительности рендеринга. #performance #rendering https://motion.dev/guides/performance0,45%
  • 31 янв. 2022 г.Новинки iOS Safari 15.4 Beta Apple обычно не делится своими планами внедрения новых API в Safari. По этой причине Максимилиано Фиртман копается в новых релизах iOS, чтобы понять, что нас ждёт в будущем. В этот раз он проанализировал последнюю доступную версию Safari и WebView из iOS 15.4 Beta — "Push Notifications, WebXR, and better PWA support coming to iOS". Из нового релиза видно, что началась работа над добавлением Push API и Notification API. С их помощью сайты и PWA могут отображать системные нотификации. На данный момент Push API и Notification API ещё не работают, и их поддержки скорее всего не будет в стабильной версии iOS 15.4. Была добавлена поддержка icon из манифеста PWA. Благодаря этому свойству можно тонко настраивать иконку устанавливаемого PWA. На данный момент поддержка icon реализована с ограничениями: нет поддержки свойства maskable, есть проблемы с загрузкой иконки. Доступен набор экспериментальных фич для работы со смешанной и дополненной реальностью: WebXR Augmented Reality Mode, WebXR Device API, WebXR Gamepads Module, WebXR Hand Input Module. Была добавлена поддержка :has, поддержка CSS-свойства accent-color, добавлен элемент <dialog>, медиа-фича resolution и ленивая загрузка изображений с помощью loading="lazy". #safari #experimental https://firt.dev/ios-15.4b0,44%
  • 3 февр. 2022 г.Релиз Chrome 98 Позавчера вышла новая версия Chrome. Пит Лепаж и Джеселин Ин рассказали обо всех новинках релиза — "New in Chrome 98". В рамках Origin Trial автоматической тёмной темы на Android теперь можно отказаться от применения темы на отдельных страницах с помощью <meta name="color-scheme" content="only light"> и CSS-свойства color-scheme: only light;. Появилась поддержка COLRv1 — нового формата шрифтов c поддержкой цветных глифов, градиентов и смешивания. COLRv1 обеспечивает максимальное сжатие большого количества небольших изображений. При обращении к приватным сетям теперь отправляются CORS Preflight-запросы. Запущен новый Origin Trial кроппинга захватываемого видео с помощью Region Capture API. В инструментах разработчика теперь используется редактор на базе Codemirror 6. Благодаря ему была улучшена поддержка очень больших файлов, исправлена проблема со смещением прокрутки во время отладки. Появилась новая панель для отладки дерева доступности. Lighthouse был обновлён до девятой версии. Добавлен новый инструмент для упрощения отладки проблем с Back/Forward Cache. #chrome #release https://developer.chrome.com/blog/new-in-chrome-98/ https://developer.chrome.com/blog/new-in-devtools-98/0,36%