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

defront logo

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

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

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


Входит в категории:
Defront — про фронтенд-разработку и не только
19.06.2021 14:06
Всем привет! Два месяца назад у меня начались проблемы со здоровьем. Чтобы не ухудшать текущую ситуацию, я принял решение временно остановить работу над каналом. Это означает что Defront переходит в режим поддержки, то есть посты в канале теперь будут публиковаться гораздо реже. Также временно останавливаю работу над Defront Plus. Донаты с Patreon на время гибернации канала списываться не будут. Сколько это будет продолжаться, я не знаю. Надеюсь, что всё придёт в норму в течение нескольких месяцев. Как бы то ни было у меня есть очень много планов по развитию канала. Хочу поблагодарить всех за поддержку канала. Берегите себя!
Читать

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


Defront — про фронтенд-разработку и не только
18.06.2021 23:06
Несколько дней назад вышла новая версия Next.js. Команда разработчиков фреймворка рассказала о новинках релиза — "Next.js 11". — В новую версию попали наработки Google, которые включают в себя разные оптимизации и правила eslint, предотвращающие использование паттернов, приводящих к деградации производительности. — Добавлена новая реализация загрузчика Babel, ускоряющая время пересборки приложения. — Добавлен новый компонент Script, упрощающий управление приоритетами загрузки скриптов. — Компонент Image теперь может генерировать width и height автоматически для улучшения метрики CLS. Была добавлена возможность автоматического создания плейсхолдеров изображений. — Добавлена экспериментальная автоматическая миграция кодовой базы Create React App на Next.js. — Добавлен Next.js Live (Preview Release), предоставляющий удобные средства коллобарации. — Завершена миграция на Webpack 5. #release #jsframeworks https://nextjs.org/blog/next-11
Читать

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


Defront — про фронтенд-разработку и не только
18.06.2021 01:06
Юна Кравец и Алекс Тотик рассказали о результатах работы над улучшением таблиц в Chrome — "TablesNG Resolves 72 Chromium Bugs for Better Interoperability". На протяжении нескольких лет разработчики Chrome переделывали механизм рендеринга таблиц, так как старая архитектура не отвечала новым требованиям. Эта инициатива получила название TablesNG. Благодаря ей было решено много проблем. Например, была исправлена совместимость таблиц и position: sticky, улучшен рендеринг границ и исправлены проблемы с субпиксельной геометрией, которые приводили к проблемам с выравниванием при изменении масштаба страницы. TablesNG был включён по умолчанию в Chrome 91. #chrome https://developer.chrome.com/blog/tablesng/
Читать

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


Defront — про фронтенд-разработку и не только
17.06.2021 12:06
Будущее HTTP клиента в Node.js В Node.js существует 3 встроенных модуля для HTTP запросов: HTTP, HTTPS и HTTP/2. Из названий, в общем-то, понятно для чего каждый из них предназначен. Все эти модули используют встроенный модуль Net для осуществления запросов. Но обычно с этими модулями напрямую мы не работаем. Самый популярный пакет-обертка — это request. (он, кстати, задепрекейчен) Следующий по популярности это node-fetch, ну а догоняет его got от Синдре Сорхуса. Где-то в районе четвёртого места появляется axios. Все эти библиотеки используют те самые встроенные модули. И это проблема, т.к. многие из них манки-патчат методы и это затрудняет добавление фич и исправление багов в ноде. И здесь мы переходим к undici. Этот непопулярный клиент (52 000 установок в неделю против более 20 000 000 у каждого из пакетов выше) написаный Маттео Калина (со-автор fastify и член TSC Node.js) фундаментально отличается от всех остальных библиотек — он использует модуль Net в обход встроенных http и https. Так же используется WASM билд парсера llhttp. За счёт этого undici в разы быстрее, но что более интересно — в документации Node.js будет ссылка на undici. Т.е. это будет один из рекомендованных способов для работы с HTTP. Но отвлечёмся на node-fetch и axios: их популярность более чем очевидна — зачем мне учить 2 разных API для сервера и клиента, если я могу использовать одну и ту же библиотеку и всё работает? Тем более учитывая, что в ноде начинают появляться Web API, например Crypto. А ишью с просьбой добавить fetch в ноду вот уже 3 года, но недавно началось интересное движение: один из членов репозитория ноды запостил скрин с использванием fetch из ноды со словами «now who wants to write tests for it :P». Конечно, это ничего не значит, но немного приближает нас к наличию fetch в ноде. Так же нужно отметить, что существует undici-fetch и скорей всего он будет вмерджен в сам undici. Опять же, сейчас это не более чем размышления на тему, но, возможно, именно undici — будущее HTTP в Node.js. Отдельно оставлю ссылки на ключевые ишью: Future of the Node HTTP Client Implement window.fetch into core
Читать

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


Defront — про фронтенд-разработку и не только
16.06.2021 22:06
Томас Штайнер написал статью про Storage Foundation API — "High performance storage for your app: the Storage Foundation API". Современные веб-приложения не могут эффективно и гибко работать с большими массивами данных, сохранёнными на диске, что особенно критично для баз данных и программ редактирования аудио и видео. Эту проблему призван решить Storage Foundation API. Он предоставляет средства для производительной работы с хранилищем данных и включает в себя набор примитивов, работа с которыми напоминает работу с обычной файловой системой. С его помощью можно получать информацию о доступном месте, создавать/удалять/переименовывать файлы, производить запись/чтение данных со смещением и т.п. На данный момент экспериментальная поддержка Storage Foundation API есть только в Chrome в рамках программы Origin Trial. #api #chrome #experimental https://web.dev/storage-foundation/
Читать

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


Defront — про фронтенд-разработку и не только
16.06.2021 04:06
Джейк Арчибальд написал статью о том, кам добиться чёткого отображения фотографий на экранах с высокой плотностью пикселей, не теряя качества и сохранив разумный вес файлов — "Serving sharp images to high density screens". Самый главный совет — не нужно использовать высокое качество сжатия для изображений, которые будут отображаться на ретина-экранах. На экранах с высокой плотностью пикселей изображения отображаются меньше своего фактического размера, скрывая артефакты сжатия. Ещё можно использовать медиавырыжаение -webkit-min-device-pixel-ratio с тегом , чтобы браузер смог выбрать подходящее изображение в зависимости от текущей ситуации. Полезная статья. Рекомендую почитать. #performance https://jakearchibald.com/2021/serving-sharp-images-to-high-density-screens/
Читать

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


Defront — про фронтенд-разработку и не только
15.06.2021 10:06
За прошедшие две недели в канале для патронов Defront было опубликовано десять постов: — Список нетехнических навыков для опытных разработчиков — Нестандартное использование функций плавности — Организация работы с npm-скриптами — Использование Babel в современном TypeScript-проекте — Корреляция между Performance Score в Lighthouse и Core Web Vitals — Функции плавности (easing functions) в CSS — Как Facebook кодирует видео — Кастомный REPL для Node.js — SVG и доступность — Этапы написания статьи и способы снятия писательского блока Становитесь патроном канала на Patreon, чтобы получить доступ к дополнительным постам в Defront Plus. Все донаты идут на поддержку канала, на оплату аренды квартиры, покупку еды и т.п. Спасибо всем, кто читает и поддерживает Defront! https://www.patreon.com/myshov
Читать

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


Defront — про фронтенд-разработку и не только
15.06.2021 00:06
Джек Франклин — участвует в разработке Chrome DevTools — реализовал на React и Svelte небольшое приложение для трекинга времени с сохранением данных в Firebase и рассказал о своём опыте в статье "Comparing Svelte and React". В статье сравнивается простота интеграции с аутентификацией Firebase, работа с веб-воркерами, условный рендеринг, реактивность, композиция компонентов, стилизация. По результатам сравнения победил Svelte, так как в нём проще работать с сайд-эффектами. Кодовая база Svelte в целом также оказалась проще. Из коробки идут средства для работы со стилями. Как бы то ни было Джек пишет, что ему нравится работать и с React, и со Svelte. Немного субъективная статья, но всё равно интересная. Рекомендую заглянуть. #jsframeworks #react #svelte https://www.jackfranklin.co.uk/blog/comparing-svelte-and-react-javascript/
Читать

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


Defront — про фронтенд-разработку и не только
14.06.2021 14:06
Недавно вышел Lighthouse 8. Самым значимым изменением в релизе стало изменение оценки "Performance Score". Каролина Щур в статье "How Lighthouse 8 Changes Affect Your Metrics" рассказала, как именно поменялась эта оценка. Были изменены веса метрик FCP, SI, TTI, TBT и CLS. Теперь наибольшее влияние будут оказывать TBT (Total Blocking Time, +30% от общего веса всех метрик) и CLS (Cumulative Layout Shift, +10%). Если на вашем сайте была хорошая оценка, но в новой версии Lighthouse она упала, это означает, что при открытии страницы много времени занимает инициализация и выполнение клиентского кода или из-за того, что на странице происходит сдвиг контента. Также было изменено определение метрики CLS. Подсчёт общего сдвига контента теперь происходит на основе сгруппированных оценок сдвига за пять секунд. Это изменение позволило устранить корреляцию между оценкой сдвига контента и количеством времени, проведённым на странице, улучшив общую оценку для долгоживущих страниц. Lighthouse 8 уже доступен в PageSpeed Insights; его поддержка в Chrome появится в версии 93. #performance #release #lighthouse https://calibreapp.com/blog/lighthouse-8
Читать

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


Defront — про фронтенд-разработку и не только
13.06.2021 01:06
Мэттью Гауде — разработчик SpiderMonkey — написал статью про опыт имплементации приватных полей класса в JavaScript-движке — "Implementing Private Fields for JavaScript". Мэттью пишет о том, что при добавлении новой фичи в движок нужно учитывать три аспекта: ментальную модель, спецификацию и реализацию. Иногда они совпадают друг с другом, и имплементация сводится к пошаговой реализации алгоритма из спецификации. Иногда они расходятся, и имплементация начинает сильно отличаться от спецификации, сохраняя только семантику. Реализация приватных полей попала во вторую категорию. Также в статье разбираются нюансы работы c приватными полями. Оказывается, приватные поля могут быть добавлены к любому объекту, даже если он был явно закрыт от изменений с помощью Oblect.seal(). Насколько я понимаю, это "побочный эффект" спецификации, и его не стоит использовать для решения своих задач. Очень интересная статья. Рекомендую почитать. #js #internals #spec #firefox https://www.mgaudet.ca/technical/2021/5/4/implementing-private-fields-for-javascript
Читать

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


Defront — про фронтенд-разработку и не только
11.06.2021 20:06
В мае вышла новая мажорная версия Angular. Марк Тексон рассказал о всех нововведениях релиза — "Angular v12 is now available". — Экосистема Angular продолжает миграцию на пайплайн компиляции и рендеринга Ivy; View Engine с 12-ой версии задеприкейчен и будет удалён в одном из будущих релизов. — Добавлены инструменты для автоматической миграции на новый формат идентификаторов сообщений i18n. — Protractor (инструмент E2E-тестирования Angular-приложений) больше не используется при создании новых проектов. Его дальнейшая судьба пока неизвестна. — Теперь @Component поддерживает инлайн SASS-кода. Добавлена поддержка новой модульной системы SASS. Angular CDK и Angular Material больше не поддерживают node-sass. — Добавлена поддержка Nullish Coalescing в шаблонах. Завершена миграция на Webpack 5 и добавлена поддержка TypeScript 4.2. Команда ng по умолчанию переключена в production-режим. Задеприкейчена поддержка IE11, она будет удалена полностью в следующей мажорной версии. #angular #release https://blog.angular.io/angular-v12-is-now-available-32ed51fbfd49
Читать

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


Defront — про фронтенд-разработку и не только
10.06.2021 21:06
Андрей Мелихов на канале ДевШахты опубликовал вторую часть видео, посвящённую Server-Sent Events — "Server-Sent Events: Снимаем ограничения". В первой части Андрей рассказывал про основные концепции использования API и про решаемые ей задачи (простая альтернатива веб-сокетам, однонаправленный канал связи с сервером). Вторая часть посвящена использованию SSE в реальных проектах. При использовании SSE поверх первой версии HTTP есть ограничение на максимальное количество подключений к источнику данных — в рамках одной страницы нельзя сделать больше шести подключений. Эту проблему можно обойти переходом на HTTP/2. Также при создании подключения с помощью конструктора EventSource нет возможности передать дополнительные HTTP-заголовки, например, для авторизации. Это ограничение можно обойти с помощью кук. Рекомендую посмотреть видео, если хотите узнать больше подробностей про нюансы работы с SSE. #api #nodejs #video

Читать

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


Defront — про фронтенд-разработку и не только
09.06.2021 20:06
Фред Шотт — автор проекта Snowpack — представил первую публичную бета-версию статического генератора сайтов Astro — "Introducing Astro: Ship Less JavaScript". Astro помогает создавать быстрые статические сайты с помощью популярных компонентных фреймворков (React, Vue, Svelte, Preact) или с помощью обычного HTML и JavaScript. По умолчанию он настроен так, чтобы на клиент не попадал JavaScript. Если какому-то компоненту для работы требуется дополнительный код, он загружается и инициализируется независимо от самой страницы. Есть поддержка инициализации компонентов "по требованию" с загрузкой кода компонента только в том случае, когда он попадает во вьюпорт браузера. Есть поддержка TypeScript, Scoped CSS, CSS Modules, Sass, Tailwind, Markdown, MDX и т.п. #announcement #ssg https://astro.build/blog/introducing-astro
Читать

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


Defront — про фронтенд-разработку и не только
08.06.2021 21:06
Команда React поделилась планами разработки следующей мажорной версии библиотеки — "The Plan for React 18". В React 18 будет добавлен автоматический батчинг обновлений стейта компонентов, новые API (например, startTransition) и стриминговый серверный рендерер с поддержкой React.lazy. Изменится работа с конкурентным режимом. Он будет включаться автоматически при использовании новых фич, которые требуют этот режим. Такая стратегия упростит миграцию приложений на React 18. С этой версии команда React начинает больше работать с сообществом. Для этого была организована специальная рабочая группа из экспертов, разработчиков, авторов библиотек и образовательных программ. Также была опубликована альфа-версия React 18. Команда React призывает авторов библиотек поэкспериментировать с ней и поделиться фидбеком. #react https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html
Читать

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


Defront — про фронтенд-разработку и не только
08.06.2021 01:06
Сегодня Стэфан Джудис твитнул про то, что в Chrome 91 появилась поддержка JSON-модулей. Это новая фича JavaScript, с помощью которой можно использовать import с JSON-файлами. Твит Стэфана дополнил Аксель Раушмайер ссылкой на статью про Import Assertions. Синтаксис для импорта JSON немного отличается от стандартного импорта: // статический импорт import config from ./data/config.json assert { type: json }; // динамический импорт import(./data/config.json, { assert: { type: json } }) Добавление assert декларирует намерение разработчика импортировать файл заданного типа. Это нужно делать явно, потому что на расширение имени файла в мире веба полагаться нельзя. Import Assertions находится в статусе пропозала на stage 3. Он открывает дорогу для импорта не только JSON, но и WebAssembly-модулей и CSS-файлов. #js #proposal #chrome https://2ality.com/2021/01/import-assertions.html
Читать

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