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

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

Пиши свої ідеї для постів сюди: @front_idea_bot
Download Telegram
☑️ 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 доступно только для чтения.
☑️ cookieStore

Работа над cookie на чистом JavaScript ужасно неудобна, так, как document.cookie представляет собой не объект, а строку в специальном формате, для манипуляций с которой часто нужны дополнительные функции или библиотеки.
Но, с предложеним по внедрению API асинхронных файлов cookie в скрипты и ​​сервис-воркеры работа над cookie станет намного удобнее.
cookieStore уже работает в Chrome начиная с 87 версии!
☑️ TIPS AND TRICKS #14

Разбить строку несколькими разделителями одновременно можно используя регулярное выражение вместе с методом split().
☑️ 9 СПОСОБОВ ПРИМЕНЕНИЯ …SPREAD

Данные способы применения spread оператора могут помочь в решении множества проблем в JavaScript.
☑️ IF-ELSE | SWITCH-CASE | Object

Альтернативный способ организации длинных цепочек условных выражений. Особенно хорошо применимо в Redux приложениях.
☑️ “true” / “false” В ЛОГИЧЕСКОЕ ЗНАЧЕНИЕ

4 способа преобразовать строку в логическое значение.
☑️ ТРИ ВАРИАНТА ИСПОЛЬЗОВАНИЯ ОПЦИОНАЛЬНОЙ ЦЕПОЧКИ

Оператор ?. проверяет левую часть выражения на равенство null/undefined, и продолжает дальнейшее вычисление, только если это не так.

Можно использовать как:

obj?.prop
obj?.[prop]
obj.method?.()
☑️ ЗНАЧЕНИЯ URL ДЛЯ КУРСОРА CSS

Позволяет указывать произвольные изображения в качестве курсоров мыши. Ограничение размера курсора 128 × 128 пикселей. Однако, следует ограничиться размером 32 × 32 для максимальной совместимости.
☑️ СВОЙСТВО all В CSS

Универсальное свойство, которое сбрасывает все значения свойств в исходные или наследуемые.
Применимо, чтобы разрешить сброс стилей на уровне компонентов, так как иногда гораздо проще начать создание стиля с нуля, чем бороться со всем, что уже есть.
This media is not supported in your browser
VIEW IN TELEGRAM
☑️ CSS СВОЙСТВО writing-mode

Устанавливает горизонтальное или вертикальное положение текста также как и направление блока.

Доступные значения:
writing-mode: horizontal-tb | horizontal-bt | vertical-rl | vertical-lr;

Код доступен по ссылке.