✅ Page visibility API

В js есть апи для определения видимости всей страницы. Видит пользователь страницу в данный момент или нет? (окно браузера свернули или переключили вкладку)

У этих апи есть 2 свойства состояния и 1 событие

Свойства:
- document.hidden (только для чтения) - возвращает булевское значение видимости текущей страницы
- document.visibilityState (только для чтения) - возвращает 1 из 4х значений состояния видимости:
1️⃣ visible(страница не свернута и видна пользователю);
2️⃣ hidden (страница скрыта или неактивна);
3️⃣ prerender(страница в процессе отрисовки);
4️⃣ unloaded (страница выгружается, данное значение не везде поддерживается)


Событие:
- visibilitychange - срабатывает, когда изменяется состояние видимости

Для чего можно применять:

- Для оптимизации
- Для кеширования
- Для сохранения результатов (например, состояние игры или заполненной формы)

Полная статья на английском языке

#js #core

✅ Плохие практики в js

Выше уже был пост про подобные правила, что лишний раз подтверждает эту проблему.

Если резюмировать (хорошие практики):
- Используй let, const вместо устаревшего var (благо линтеры в IDE сами тебе подсказывают)
- Не комментарий должен объяснять код, а сам код (лучше упростить, чем писать полотна с комментариями, в придачу они очень быстро становятся неактуальными или удаляются)
- Используй строгое === вместо обычного == (Обычное сравнение надо использовать с осторожностью и понимать, зачем ты это делаешь)
- Используй необязательный оператор ? (если есть вероятность отсутствия свойства в объекте), дабы обрабатывать не ошибку, а undefined
- Не используй магические значения (числа и строки, которые появляются из неоткуда, например, в сравнениях). Создавай для этого константы с понятным названием
- Обрабатывай каждый запрос к api через try/catch, даже если это микро-макро-несерьезный запрос и ты уверен что там все точно будет в порядке.

Ссылка на статью на английском

#js #base

✅ Новое в CSS 2023

11 мая гугл выпустил статью о нововведениях в css.

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

Из интересного:
- @ container element - новый медиа запрос. Очень крупное нововведение. Позволяет применять стили относительно размеров РОДИТЕЛЬСКОГО элемента. И неограниченно по вложенности. Допустим, мы хотим поменять стили у элементов, у которых родитель имеет минимальную ширину в 200px или родитель родителя имеет конкретный размер. Теперь адаптивка заиграет новыми красками, подробнее тут

- @ container style - аналогичен первому пункту, только проверяет определенные стили, а не размеры, данный пункт еще очень сырой, в сафари и лисе еще даже не ввели поддержку.

- :has() - новый селектор. Позволяет определить содержит ли родительский элемент дочерние элементы с определенными параметрами, которые перечисляются в скобках. Подробнее

- initial-letter позволяет определить место, занимаемое первой буквой в параграфе (буквицы). Через свойство задается размер и смещение. Выглядит красиво.

- Новые динамические единицы размеров: svh и svw, lvh и lvw, dvh и dvw. В статье приведены хорошие примеры.

- color-mix - функция смешивания цветов. Теперь можно просто взять цвет и добавить к нему прозрачности (например, через переменную). Те, кто работал с палитрами в проекте оценят всю прелесть нововведения)

- ВЛОЖЕННОСТЬ - пока все очень сыро и плохая поддержка, но надобность в препроцессорах может очень сильно уменьшиться. Это, по сути, базовая вещь для чего подобные инструменты используются. Ждем.

Там еще много чего, например, scope, cos, sin и т.д.

Пост на chrome.com на английском

#css #news

✅ Vue 3.3

Эван Ю 11 мая опубликовал у себя в блоге анонс новой версии вью.

Typescript:

- Добавили дженерики для всего компонента. Штука очень полезная, надеюсь работать будет как надо.
- Наконец убрали грязь в defineEmits, теперь не придется каждый раз писать много ненужных букав.
(e: 'foo', id: number): void => foo: [id: number]
- Добавили типизацию для слотов через defineSlots

Экспериментальное:
- Деструктуризация для пропсов (сомнительная штука, проблема в том, что добавляет новый вариант описания пропсов, а чем больше вариантов, тем больше каши)
- defineModel, по сути сахар для объявления двухстороннего связывания v-model. Он сам регистрирует пропс и мутирует значение. По RFCS можно увидеть, что будут и типы и свойства пропса. Это интересно. Это мы пробуем.

Из мелкого и незначительного:
- Улучшили скорость сборки в 10 раз
- Тесты теперь быстрее из-за перехода на vitest
- Улучшили скорость создания типов

В 2023 году обновления по vue будут чаще, но меньшими по объему.

#vue #js #news

✅ Object.keys

Если надо пробежаться по объекту, используем Object.keys(). Метод возвращает массив, содержащий имена всех свойств объекта.

Часто используется.

#junior #base #js

✅ Preline UI

Набор компонентов с использованием Tailwind CSS. Простенько, но красиво.

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

Есть инструкции по установке с разными фреймворками

Страничка на productHunt
Ссылка на либу

#lib #js #css #tailwind #vue #react

✅ JS Clipboard API

Апи на самом деле примитивные и ограниченные. Основные функции две - запись и чтение.

Хоть раз в жизни вам придется поработать с этими апишками. Но вечно всплывают какие-то косяки. А все из-за безопасности. Записать в буфер обмена можно что угодно, а вот прочитать оттуда информацию - целое приключение)

Автор объясняет в чем подвох, и как бороться.

Статья на английском

#js #core

✅ Микросервисы + фронтенд = Микрофронтенд

Относительно новый альтернативный способ разработки модульных приложений. Микрофронтенды подходят для больших, я бы даже сказал для ОГРОМНЫХ приложений. Если предполагается, что у проекта будут проблемы с масштабируемостью, можно задуматься об использовании данной архитектуры.

Автор описывает базовые подходы к фронтенд разработки и рассказывает о микрофронтенде.

Статья на английском языке

#base #frontend

✅ Strawberry

На днях релизнулся прикольный макро фреймворк. Реализована реактивность и компоненты. Весит все это чудо в сжатом виде 3кб.

Автор настаивает на том, что это не альтернатива react и vue, а скорее дополнение к ванильному js. Серьезно воспринимать такое творение не надо, но поиграться можно)

Ссылка на это творение

#js #framework

✅ Typescript 5.1

Релизнулась ts 5.1 rc. А это значит, что ее уже можно попробовать (основной версией она станет спустя некоторое время)

Кратко, что добавили:

- Упрощенный неявный возврат для undefined значений у функций
- Несвязанные типы для геттеров и сеттеров
- Раздельная проверка типов между элементами jsx и типами тегов
- Пространство имен для атрибутов jsx
- Оптимизацию

Изменились и минимальные требования, теперь это ES2020 и Node.js 14.17.

Ссылка на релиз

#js #ts #news

✅ Filter

Метод .filter() применяется для фильтрации массива на основе функции, переданной в качестве аргумента. Возвращает новый массив.

Часто используется

#junior #base #function

✅ Функция Debounce

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

Самый элементарный пример, это ввод данных в инпуте, чтобы реагировать не сразу на каждый введенный символ, а с задержкой. Например, поле поиска. Отправлять запрос на api после ввода каждого символа - накладно, поэтому пользуемся debounce и сокращаем количество запросов.

#middle #js #custom

✅ Map, Set, WeakMap

Пытаемся разобраться как они работают.

Автор объясняет зачем их использовать, когда выбрать map вместо объекта и почему такая разница в скорости.

Статья на английском

#js #middle

✅ useHooks

Стоило написать про функцию debounce, как ребятки из ui.dev выкатили свою либу с готовыми хуками для подобных функций(К сожалению, только для React)

Хуков прям много, на сайте только примеры использования, но в гите можно реализацию глянуть, красота.

Сайт useHooks
Github

#js #react #lib

✅ Find

Метод .find() позволяет отыскать элемент, который удовлетворяет условиям переданной функции.

Если нам требуется найти только индекс данного элемента, то можно воспользоваться методом .findIndex().

Не забываем, что в ES14 добавили .findLast() и .findLastIndex(), которые позволяют отыскать элемент в массиве, проверяя элементы с конца (раньше для подобного решения требовалось вручную развернуть массив)

Часто используются.

#js #junior #base

✅ Движок JS

Весь наш красивый код обрабатывает движок javascript (в основном это v8). Что происходит при его выполнении и как осуществляется оптимизация?

Статья небольшая, но для понимания самое то.

Ссылка на статью на английском

#js #middle

✅ Функция Throttle

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

Троттлинг функции означает, что функция вызывается не более одного раза в указанный период времени (например, раз в 10 секунд). Другими словами - троттлинг предотвращает запуск функции, если она уже запускалась недавно.

Debouncing функции означает, что все вызовы будут игнорироваться до тех пор, пока они не прекратятся на определённый период времени. Только после этого функция будет вызвана.

Например, прокрутка страницы, вешаем обработчик тротлинга на событие scroll и реагируем на него (смотри изображение).

Троттлинг наиболее эффективен, когда входные данные для вызова функции не имеют значения или одинаковы каждый раз (например, событие scroll), в то время как debouncing лучше всего подходит, когда результат последнего события (например, инпут или изменение размера окна) имеет значение для конечного пользователя.

#middle #js #customFunction

✅ Event Loop

Ключевой механизм обработки асинхронных задач и поддержания неблокирующего поведения в js​.

Как функции добавляются в стек вызовов и выполняются в порядке LIFO (последним пришел - первым вышел).

Статья на английском

#junior #js

✅ DaisyUI 3

На днях релизнулась новая версия библиотеки компонентов для Tailwind css. (Библиотека для библиотеки))

Поправили ошибки и баги. Добавили несколько новых функций и улучшений:
- Новые компоненты загрузки
- Новые темы
- и т.д.

Для информации, либа позволяет сокращать полотна с перечислением классов tailwind css.

Ссылка на релиз
Сайт DaisyUI

#css #tailwind #lib #news

✅ Object.hasOwn

Если требуется проверить наличие свойства в объекте используем .hasOwn(obj, prop)

Данный метод ввели в ES13, в конце прошлого года. По MDN документации он является заменой hasOwnProperty.

#js #junior #object