✅ Тенденции js в 2023

TypeScript все больше. Svelte врывается в гонку за реактивность и имеет все шансы стать четвертым товарищем среди React, Angular и Vue.

Ссылка на статью

#news #js #frontend

✅ Сокращаем условия

Перевели статью по поводу сокращений условий. И добавили от себя в конце примечание.

Только для хакеров БЕЗ СМС И РЕГИСТРАЦИИ

#js #base #translate

✅ Object.assign

Метод Object.assign() используется для копирования свойств из одного или нескольких исходных объектов в нужный объект.

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

Если свойства совпадают, значение свойства будет перезаписано значением из последнего объекта.

#junior #base #js

✅ CSS индикаторы загрузки

Наткнулись на статью, где автор отрисовал сотню индикаторов загрузки.

Берем и пользуемся. Даже если не потребуется сам индикатор, можно глянуть реализацию анимаций, их тут уйма

Ссылка на статью

#css #bundle

✅ Как вручную отрисовать окно подтверждения во Vue3?

Написали для вас статью, в которой вы узнаете как вручную отрисовать и поместить компонент диалогового окна в дом дерево.

Если используете react или angular тоже почитайте, реализация на этих фреймворках будет плюс-минус такая же.

#vue #js #promise #compositionAPI

✅ console.log

С помощью console.log отдебажено миллиард миллионов приложений. Настолько простой и быстрый способ еще поискать надо.

Но помимо главного метода логирования, есть, например, трассировка (составление мест вызова) или замер времени выполнения кода.

Эти и другие методы console. В конце автор расписал полезные хромовские утилиты консоли

✅ 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