✅ Map()

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

Один из самых часто используемых методов js

#junior #base #function

✅ Reduce

Метод .reduce() применяется для преобразования массива в новое значение на основе функции, переданной в качестве аргумента.

Часто используется при работе с массивами

#junior #base #function

✅ Рефакторинг кода

Хороший код не нуждается в комментариях. Вернее нуждаться могут не только лишь все, мало кто может это сделать.

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

Вот выжимка, это база.

- Используй константы вместо магических значений (в комментах под постом есть горячее обсуждение по этому поводу)
- Упрощай, путем вынесения кода в отдельные функции (в пределах разумного)
- Повторяемые куски кода выноси в отдельные функции

#base #js

✅ ES14

В июне ожидается выпуск нового стандарта. Изменений немного:
- 2 новых типа данных (полностью неизменяемый объект и массив)
- новые методы для массивов
- поиск элемента с конца: findLastIndex и findLast
- Символы в качестве ключей для WeakMap.
- Hashbang

Если раньше для сортировки массива нам требовалось его скопировать, чтобы исходник не менялся (так как sort изменяет массив напрямую), а потом сортировать, то теперь мы можем использовать метод toSorted для возвращения отсортированного массива

[...arr].sort() => arr.toSorted()
Результат один, а глазу приятней.

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


Полный список нововведений

#news #es14 #js

✅ Тенденции 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