Wise.js | Frontend tips
1.89K subscribers
72 photos
4 videos
66 links
Авторський канал БЕЗ РЕКЛАМИ з Frontend розробки: статті, завдання з співбесід, поради та трюки.

Youtube-канал: https://www.youtube.com/channel/UCOxqQhtg574p8kE4Te41PGg/featuredB

Пиши свої ідеї для постів сюди: @front_idea_bot
Download Telegram
☑️ TIPS AND TRICKS #3

Условие prefers-color-scheme в @media используется для определения темной/светлой темы в CSS.

Определить значение этого свойства можно и через JavaScript.

Используем window.matchMedia() с соответствующим запросом, чтобы проверить настройки цветовой схемы пользователя.
☑️ TIPS AND TRICKS #4

В мире JavaScript для таких задач написаны даже отдельные npm пакеты.
Но сами функции могут занимать всего несколько строк.
Преобразовываем URL параметры в объект и наоборот.
☑️ TIPS AND TRICKS #5

Распространенной потребностью является возможность копировать текст в буфер обмена одним нажатием кнопки.

🎯 Такую функциональность можно реализовать с помощью данной функции.
☑️ TIPS AND TRICKS #6

В обработчиках событий мы извлекаем значение с помощью event.target.value. И он всегда возвращает строку. Но что, если нам нужно число? Использовать Number(), parseInt() или parseFloat() для преобразования?

🎯 Вместо этого используйте event.target.valueAsNumber. Он возвращает значение как число.

Работает с type: date, month, week, time, number, range.
☑️ Перебирающие методы массивов являются неотъемлимой частью функционального программирования на JavaScript.

Наглядная инфографика описывающая суть работы каждого из них.
☑️ ВОПРОСЫ НА СОБЕСЕДОВАНИИ #4

Простая задача, которая, однако, у многих вызывает трудности: развернуть строку и число.
☑️ TIPS AND TRICKS #7

Различные способы найти максимальное значение массива в JavaScript.

Как думаете, какой самый быстрый?
☑️ CSS СВОЙСТВО caret-color

Определяет цвет указателя (курсора) ввода/вставки. Это вертикальная линия, которая по умолчанию имеет черный цвет. Свойство дает возможность выбрать для курсора любой цвет, в том числе сделать прозрачным.
☑️ TIPS AND TRICKS #8

Я много работал с изоморфными приложениями, которые, используют один и тот же JavaScript код на клиенте и на сервере. Однако, в зависимости от платформы, некоторая логика может отличаться. Нам же, в таком случае, нужно определять в какой среде запускается код.
Cуществует множетсво npm пакетов, которые выполняют это простое действие. Делюсь решением в несколько строк, без лишних зависимостей.
☑️ TIPS AND TRICKS #9

Все способы преобразования строки в массив.

Какой Вы используете?
☑️ TIPS AND TRICKS #10

Все способы очистить массив не изменяя ссылку.
☑️ КОРОТКО = ХОРОШО?

Можно сделать много вещей, не написав слишком много строк кода.
Однако, лучше писать код чистым и поддерживаемым.
Несколько практик, которые не стоит использовать в вашем коде.
☑️ TIPS AND TRICKS #11

Cвойство new.target позволяет определить, была ли вызвана функция или конструктор с помощью оператора new. В конструкторах и функциях, вызываемых с помощью оператора new, new.target вернет ссылку на конструктор или функцию. При обычных вызовах функций new.targetundefined.
☑️ ЛЕНИВЫЕ ФУНКЦИИ

В теле функции иногда содержится код, который выполняются только один раз.
Мы можем повысить быстродействие программы, избавившись от такого кода после первого выполнения, чтобы функции больше не приходилось выполнять их при последующих вызовах.
☑️ TIPS AND TRICKS #12

Все способы заполнить массив последовательными числами.
☑️ TIPS AND TRICKS #13

Сниппет для определения предпочтительного языка пользователя в браузере.
☑️ CВОЙСТВО LENGTH ОБЪЕКТА FUNCTION

Cоответствует числу аргументов, ожидаемых функцией. Это значение не включает в себя rest параметры (...) и только включает параметры перед первым со значением по умолчанию. В отличие от этого свойства, свойство length объекта arguments, который является локальным для функции и предоставляет количество аргументов, реально переданных в функцию. Свойство Function.length доступно только для чтения.