The ideal viewport doesn’t exist

Сайт про вьюпорты. Основная мысль которого - что завязываться на определенный размер окна браузера - это равносильно созданию плохого UX. Т.к. пользователи имеют всякие разные вьюпорты и их комбинации намного шире, чем вы можете себе представить (только в ios есть несколько видов отображения браузеров - в safari, webview, in-app browser, 3d touch preview)

Вместо завязки на брекпоинты, необходимо учиться делать удобные интерфейсы для любых разрешений экрана.

https://viewports.fyi/

#development #viewports

Shadow DOM: Not by Default

В продолжении недавних статей про взлет и падение веб-компонентов, вышла статья про проблемы Shadow DOM

В целом, статья рассказывает, что применение Shadow DOM для инкапсуляции привносит в проект лишь проблемы. В будущем ситуация будет лучше, но пока так. Поэтому Enhance (я так понял это фреймворк) не использует Shadow DOM при описании компонентов

Проблемы Shadow DOM:

1. Shadow DOM требует загрузки и исполнения JS, что по перформансу намного хуже чем простой HTML
2. Пока не завезли декларативный Shadow DOM, нет возможности делать серверный рендер
3. Пока не будет вызван customElements.define(), к компоненту не будут применены стили (FOUCE - Flash of Unstyled Custom Element)
4. Кнопки в Shadow DOM в формах работают иначе, чем кнопки вне Shadow DOM в формах.
5. Shadow DOM усложняет реализацию доступности

https://begin.com/blog/posts/2023-08-18-shadow-dom-not-by-default

#development #javascript #webcomponents #shadowDom

Announcing Biome

Рим пал, центурион! Rome - набор инструментов, который обещал изменить веб-разработку, но разработка которого остановилась. Но т.к. Rome - это опенсорс, то часть разработчиков форкнулась с названием Biome и они планируют продолжать работать над инструментарием.

Также они планируют следовать философии и миссии Rome. С одной стороны - это хорошо, т.к. новый тулинг всегда полезен в сообществе. С другой стороны, делать так же как в Rome - это означает быть необычайно медленными. Лично у меня сложилось в свое время впечатление, что Rome это проект созданный не для принесения пользы, а для развлечения пишущих его разработчиков. Т.к. за 2 года активной разработки мы увидели очень быстрые линтер и форматтер, которые оказались никому не нужны

В общем, смотрим что будет с Biome, но я надежд не питаю.

https://biomejs.dev/blog/annoucing-biome

#development #javascript #rome

Дайджест за 2023-09-04 - 2023-09-08

⭐The complexity of writing an efficient NodeJS Docker image
Хороший гайд про создание оптимизированного докер-образа для nodejs приложения. Докер образа построены на слоях - т.е. каждая команда в нем создает отдельный слой, который затем может кешироваться. При скачивании образа, где оптимизации не были применены, мы можем скачать много "лишних" слоев

В этом гайде шаг за шагом показано, как использовать особенности работы Docker себе во благо. Автор добивается ускорения сборки новой версии образа в 43% без кеша и 73% с кешом, а также уменьшения размера образа в 5 раз.

Yes, you should test on production…
Статья объясняет, почему необходимо стремиться к тому, чтобы тестировать прямо на проде. Если коротко: это экономически выгодно

В целом, автор, конечно же, говорит о том, что существуют разные контексты. В одних мы не можем тестировать постоянно на проде (финансы, медицина и тд), в других же можем. Основной критерий для принятия решения о тестировании на проде - это ответ на вопрос "а что может случится?". Если вы делаете ПО для атомных реакторов, то тестировать на проде, очевидно, плохая идея. Если вы еще не запустились - то почему нет? Ведь для заведения тестовых стендов, регламентов, проверок нужно постоянно тратить время, а мы ничем не рискуем

The ideal viewport doesn’t exist
Сайт про вьюпорты. Основная мысль которого - что завязываться на определенный размер окна браузера - это равносильно созданию плохого UX. Т.к. пользователи имеют всякие разные вьюпорты и их комбинации намного шире, чем вы можете себе представить (только в ios есть несколько видов отображения браузеров - в safari, webview, in-app browser, 3d touch preview)

Вместо завязки на брекпоинты, необходимо учиться делать удобные интерфейсы для любых разрешений экрана.

Shadow DOM: Not by Default
В продолжении недавних статей про взлет и падение веб-компонентов, вышла статья про проблемы Shadow DOM

В целом, статья рассказывает, что применение Shadow DOM для инкапсуляции привносит в проект лишь проблемы. В будущем ситуация будет лучше, но пока так. Поэтому Enhance (я так понял это фреймворк) не использует Shadow DOM при описании компонентов

Announcing Biome
Рим пал, центурион! Rome - набор инструментов, который обещал изменить веб-разработку, но разработка которого остановилась. Но т.к. Rome - это опенсорс, то часть разработчиков форкнулась с названием Biome и они планируют продолжать работать над инструментарием.

Также они планируют следовать философии и миссии Rome. С одной стороны - это хорошо, т.к. новый тулинг всегда полезен в сообществе. С другой стороны, делать так же как в Rome - это означает быть необычайно медленными. Лично у меня сложилось в свое время впечатление, что Rome это проект созданный не для принесения пользы, а для развлечения пишущих его разработчиков. Т.к. за 2 года активной разработки мы увидели очень быстрые линтер и форматтер, которые оказались никому не нужны

——————————————

Спасибо что читаете, ставите реакции и отмечаетесь в комментариях. Если вы хотите помочь каналу - расскажите о нем своим коллегамдрузьям. Также оставляйте фидбек по формату, материалу и чему-угодно еще 🙂

Why React Renders

react gg начали продавать свои интерактивные курсы. Часть уроков доступна бесплатно. Один из них "Why React Renders". Урок хорошо поясняет про то, как рендерится React

https://ui.dev/c/react/renders

#development #react #javascript

Managing Effects

Второй хороший бесплатный урок от react gg - про сайд эффекты

https://ui.dev/c/react/effects


#development #react #javascript

Node.js includes built-in support for .env files

Node.js, начиная с 20.6.0, поддерживает env файлы. Пример запуска node --env-file .env --env-file .env.development. В целом, мы давно уже привыкли считывать env файлы с помощью библиотек, но у нативного способа есть одно преимущество - т.к. нативно Node.js считывает енвы перед запуском, то есть возможность описать NODE_OPTIONS. Раньше такой возможности не было (т.к. устанавливать опции надо до запуска ноды, а считывать через либы можно только после запуска ноды) и нужно было указывать разные важные для ноды вещи отдельно.

Для тех кто не знает что такое env-файлы. Это файлы, описывающие переменные окружения, которые будут использоваться для запуска приложения. Часто часть конфигов приложения (урлы до API, уровень логирования, ключи) выносят в переменные окружения, которые сохраняют в отдельном env-файле и из которого их в последствии устанавливают для приложения

https://philna.sh/blog/2023/09/05/nodejs-supports-dotenv/

#development #nodejs #release #envFiles

Bun 1.0

Вышел Bun 1.0. С момента релиза 0.1.1 прошло чуть больше года. Bun достаточно уверенно прошел за год от состояния "опять хайпожоры придумали новый рантайм для JS", до "это интересное, удобное и производительное решение для использования в пет-проектах и библиотеках".

С одной стороны, в соседних чатиках видны хвалебные оды, направленные bun. С другой стороны, в каждом релизе пользователи пробуют запустить свои проекты на bun и у них не получается. В любом случае выглядит интересно

https://bun.sh/blog/bun-v1.0

#development #javascript #bun #release

А еще сегодня я буду выступать на митапе в Омске. Буду рассказывать про применение ИИ в разработке. Приходите, если вы тут

Using Labeled Loops In JavaScript

А вы знали что в JS есть метки, которые, по-сути, позволяют сделать GOTO ? Вот многие не знают, а статья объясняет как это работает и для чего может быть полезно. На мой скромный взгляд лучше конечно избегать таких техник (ну хотя бы потому что почти никто в JS сообществе о них не знает), но лучше знать чем не знать.

В статье обсуждается как раз одно из популярных применений ручного управления GOTO. Бывало ли у вас такое, что у вас цикл в цикле (ну вот такой алгоритм, не бейте палками) и вам в случае нахождения ответа во внутреннем цикле, надо завершить оба цикла. Что делать в этом случае? Конечно же выносить оба цикла в функцию и делать return, но если вы хотите козырнуть перед коллегами черными практиками, то можете воспользоваться метками :)

Вот минимальный пример, показывающий как это работает

let count = 0;
searchLoop:
while (true) {
    while (true) {
        if (count === 100) break searchLoop;
        count++;
    }
}

console.log(count);

https://www.bennadel.com/blog/4512-using-labeled-loops-in-javascript.htm

#development

Песочница, которая собирает UI по текстовому запросу. К сожалению, доступ к функционалу через ожидание в вайтлисте, но выглядит интригующе

Дайджест за 2023-09-11 - 2023-09-15

Why React Renders
react.gg начали продавать свои интерактивные курсы. Часть уроков доступна бесплатно. Один из них "Why React Renders". Урок хорошо поясняет про то, как рендерится React


Managing Effects
Второй хороший бесплатный урок от react.gg - про сайд эффекты


Node.js includes built-in support for .env files
Node.js, начиная с 20.6.0, поддерживает env файлы. Пример запуска node --env-file .env --env-file .env.development. В целом, мы давно уже привыкли считывать env файлы с помощью библиотек, но у нативного способа есть одно преимущество - т.к. нативно Node.js считывает енвы перед запуском, то есть возможность описать NODE_OPTIONS. Раньше такой возможности не было (т.к. устанавливать опции надо до запуска ноды, а считывать через либы можно только после запуска ноды) и нужно было указывать разные важные для ноды вещи отдельно.

Для тех кто не знает что такое env-файлы. Это файлы, описывающие переменные окружения, которые будут использоваться для запуска приложения. Часто часть конфигов приложения (урлы до API, уровень логирования, ключи) выносят в переменные окружения, которые сохраняют в отдельном env-файле и из которого их в последствии устанавливают для приложения

Bun 1.0
Вышел Bun 1.0. С момента релиза 0.1.1 прошло чуть больше года. Bun достаточно уверенно прошел за год от состояния "опять хайпожоры придумали новый рантайм для JS", до "это интересное, удобное и производительное решение для использования в пет-проектах и библиотеках".

С одной стороны, в соседних чатиках видны хвалебные оды, направленные bun. С другой стороны, в каждом релизе пользователи пробуют запустить свои проекты на bun и у них не получается. В любом случае выглядит интересно

В комментариях к посту ссылки на другие каналы, где обсуждали релиз

Using Labeled Loops In JavaScript
А вы знали что в JS есть метки, которые, по-сути, позволяют сделать GOTO ? Вот многие не знают, а статья объясняет как это работает и для чего может быть полезно. На мой скромный взгляд лучше конечно избегать таких техник (ну хотя бы потому что почти никто в JS сообществе о них не знает), но лучше знать чем не знать.

В статье обсуждается как раз одно из популярных применений ручного управления GOTO. Бывало ли у вас такое, что у вас цикл в цикле (ну вот такой алгоритм, не бейте палками) и вам в случае нахождения ответа во внутреннем цикле, надо завершить оба цикла. Что делать в этом случае? Конечно же выносить оба цикла в функцию и делать return, но если вы хотите козырнуть перед коллегами черными практиками, то можете воспользоваться метками 🙂

Рядом с постом есть опрос «знали ли вы о лейблах». В комментариях к посту и опросу есть разное интересное

——————————————

Спасибо что читаете, ставите реакции и отмечаетесь в комментариях. Если вы хотите помочь каналу - расскажите о нем своим коллегамдрузьям. Также оставляйте фидбек по формату, материалу и чему-угодно еще 🙂

TCP echo server for Node.js

Оказывается, можно сделать свои npx скрипты, не публикуя их через npm, а публикуя их как github gist. По ссылке находится пример, который запускает простой сервер командой npx https://gist.github.com/kfox/1280c2f0ee8324067dba15300e0f2fd3

https://gist.github.com/kfox/1280c2f0ee8324067dba15300e0f2fd3

#development #javascript #npx

TypeScript 5.3 First Look

Скоро выходит TypeScript 5.3 и можно глянуть что там нового завезли

Во первых, Import Attributes достигли stage 3 в tc39 и будут реализованы в TS 5.3.

Это новая фича ES, которая позволяет указать, например, корректные MIME типы для загрузки модулей

import json from './foo.json' with { type: 'json' };

Во вторых, занесли новую опцию в TS: isolatedDeclarations. Она указывает, что TS следует рассматривать типы пакетов изолированно. Например, если у вас есть монорепа, где пакет А, испольует Б, а тот использует В, а тот использует Г, то TS сначала компилирует типы Г, затем В, затем Б и только потом проверяет типы А. Это долгий и медленный процесс, поэтому сообщество предложило внести опцию для изменения механизма сборки типов. Это значительно ускоряет работу TS в монорепо с пакетами

Также пофиксили уточнение типов в условиях внутри дженериков. Сейчас есть кейс, когда TS не может корректно уточнить тип в условиях в дженериках, что мешает разработчикам экспериментировать с дженериками. В 5.3 кейс будет исправлен

Починили проблему в DX при автокомполите union'а, который расширялся до очень широкого типа
Например, если в коде был такой тип

type IconSize =
  | "small"
  | "medium"
  | "large"
  | string;

То TS language server не давал вариантов small medium и large в автокомплите т.к. тип расширялся до string. Однако такая запись типов часто используется в коде, например в случае с иконкой мы можем указать пресет или кастомный размер. В целом этот кейс очень популярен в ui-kit-ах. Например type Color = 'primary' | 'secondary' | string позволяет указать основной и дополнительный цвет или любой кастомный

https://www.totaltypescript.com/typescript-5-3

#development #typescript #release

JavaScript is getting array grouping methods

В stage 3 дошли методы группировки массивов. Также это уже реализовано в Chrome 117.

Раньше, для группировки элементов массива нужно было либо тащить либку, либо вручную писать цикл или reduce. Теперь же в метод groupBy будет встроен прямо в язык.

Примеры применения:

Можно получить объект
const peopleByAge = Object.groupBy(people, (person) => person.age);

А можно Map
const peopleByManager = Map.groupBy(people, (person) => person.reportsTo);

Стоит отметить, что Object.groupBy возвращает объект, у которого prototype - null. Это значит, что у него нет встроенных в объект методов

const peopleByAge = Object.groupBy(people, (person) => person.age);
console.log(peopleByAge.hasOwnProperty("28"));
// TypeError: peopleByAge.hasOwnProperty is not a function

Метод не стали встраивать в прототипа массива т.к. есть либки, которые уже добавляют его в прототип массива, поэтому метод сделан статичным у класса.

https://philna.sh/blog/2023/09/14/javascript-array-grouping-methods/

#development #javascript #groupBy

Automatic visual tests + 2.2x faster React+TS build times

Грядет обновление Storybook. Самое интересное в нем: альфа-тестирование аддона для визуального тестирования. Естественно на Chromatic - инструменте от Storybook. В посте есть гифки с демонстрацией, выглядит интересно

Также ускорили react-docgen в 2 раза. Этот аддон позволяет, например, генерировать контролы к истории в storybook на основе типов. А еще улучшили репорт ошибок и поработали над туториалиами

https://storybook.js.org/blog/automatic-visual-tests-plus-2x-faster-react-ts/

#development #storybook #release

Typescript Prevents Bad Things... and Good Things

Достаточно большая статья, иллюстрирующая большую проблему TypeScript. В большинстве случаев TypeScript помогает разработчику, отлавливая проблемы и баги, заставляя описывать документацию (типы как часть документации). Но также есть ряд кейсов, когда полностью рабочий код не проходит проверку TS и необходимо как-то убедить TS, что я, разработчик, не дурак и знаю что делаю.

В целом в сообществе разработчиков на это есть 2 лагеря. Первый - если TS просит, значит надо. Кажется, это те же люди, которые ненавидят any и ts-expect-error в коде. Второй лагерь - если TS просит, а я не дурак - значит TS дурак и надо его "убедить". Например, поставить as или ts-expect-error

Я лично во втором лагере - я не борюсь с TS больше необходимого, но в сложных случаях предпочитаю делать тайпкасты через as.

В статье автор разбирает свою личную боль - TS плохо справляется с функциональных подходом, например с pattern matching. В статье автор достаточно подробно описывает свою борьбу с TS, в которой ему удалось победить ценой написания кучи дополнительного кода с нетривиальным решением

https://kyleshevlin.com/typescript-prevents-bad-things-and-good-things

#development #typescript

Дайджест за 2023-09-18 - 2023-09-22

TCP echo server for Node.js
Оказывается, можно сделать свои npx скрипты, не публикуя их через npm, а публикуя их как github gist. По ссылке находится пример, который запускает простой сервер командой npx https://gist.github.com/kfox/1280c2f0ee8324067dba15300e0f2fd3


TypeScript 5.3 First Look
Скоро выходит TypeScript 5.3 и можно глянуть что там нового завезли

Во первых, Import Attributes достигли stage 3 в tc39 и будут реализованы в TS 5.3.

JavaScript is getting array grouping methods
В stage 3 дошли методы группировки массивов. Также это уже реализовано в Chrome 117.

Раньше, для группировки элементов массива нужно было либо тащить либку, либо вручную писать цикл или reduce. Теперь же в метод groupBy будет встроен прямо в язык.

Automatic visual tests + 2.2x faster React+TS build times
Грядет обновление Storybook. Самое интересное в нем: альфа-тестирование аддона для визуального тестирования. Естественно на Chromatic - инструменте от Storybook. В посте есть гифки с демонстрацией, выглядит интересно

Также ускорили react-docgen в 2 раза. Этот аддон позволяет, например, генерировать контролы к истории в storybook на основе типов. А еще улучшили отчеты об ошибках и поработали над туториалами

Typescript Prevents Bad Things... and Good Things
Достаточно большая статья, иллюстрирующая большую проблему TypeScript. В большинстве случаев TypeScript помогает разработчику, отлавливая проблемы и баги, заставляя описывать документацию (типы как часть документации). Но также есть ряд кейсов, когда полностью рабочий код не проходит проверку TS и необходимо как-то убедить TS, что я, разработчик, не дурак и знаю что делаю.

В целом в сообществе разработчиков на это есть 2 лагеря. Первый - если TS просит, значит надо. Кажется, это те же люди, которые ненавидят any и ts-expect-error в коде. Второй лагерь - если TS просит, а я не дурак - значит TS дурак и надо его "убедить". Например, поставить as или ts-expect-error

——————————————

Спасибо что читаете, ставите реакции и отмечаетесь в комментариях. Если вы хотите помочь каналу - расскажите о нем своим коллегамдрузьям. Также оставляйте фидбек по формату, материалу и чему-угодно еще 🙂