Телеграм канал 'WiseJS | Frontend tips'

WiseJS | Frontend tips


1'968 подписчиков
1'167 просмотров на пост

Авторский канал БЕЗ РЕКЛАМЫ по Frontend разработке: статьи, задачи с собеседований, tips and tricks.

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

Admin: @maks1mp

Пиши свои идеи для постов сюда: @front_idea_bot

Детальная рекламная статистика будет доступна после прохождения простой процедуры регистрации


Что это дает?
  • Детальная аналитика 209'263 каналов
  • Доступ к 80'851'956 рекламных постов
  • Поиск по 311'045'388 постам
  • Отдача с каждой купленной рекламы
  • Графики динамики изменения показателей канала
  • Где и как размещался канал
  • Детальная статистика по подпискам и отпискам
Telemetr.me

Telemetr.me Подписаться

Аналитика телеграм-каналов - обновления инструмента, новости рынка.

Найдено 38 постов

☑️ СВОЙСТВО all В CSS

Универсальное свойство, которое сбрасывает все значения свойств в исходные или наследуемые.
Применимо, чтобы разрешить сброс стилей на уровне компонентов, так как иногда гораздо проще начать создание стиля с нуля, чем бороться со всем, что уже есть.
Изображение
☑️ ЗНАЧЕНИЯ URL ДЛЯ КУРСОРА CSS

Позволяет указывать произвольные изображения в качестве курсоров мыши. Ограничение размера курсора 128 × 128 пикселей. Однако, следует ограничиться размером 32 × 32 для максимальной совместимости.
Изображение
☑️ ТРИ ВАРИАНТА ИСПОЛЬЗОВАНИЯ ОПЦИОНАЛЬНОЙ ЦЕПОЧКИ

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

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

obj?.prop
obj?.[prop]
obj.method?.()
Изображение
☑️ “true” / “false” В ЛОГИЧЕСКОЕ ЗНАЧЕНИЕ

4 способа преобразовать строку в логическое значение.
Изображение
☑️ IF-ELSE | SWITCH-CASE | Object

Альтернативный способ организации длинных цепочек условных выражений. Особенно хорошо применимо в Redux приложениях.
Изображение
☑️ 9 СПОСОБОВ ПРИМЕНЕНИЯ …SPREAD

Данные способы применения spread оператора могут помочь в решении множества проблем в JavaScript.
Изображение
☑️ TIPS AND TRICKS #14

Разбить строку несколькими разделителями одновременно можно используя регулярное выражение вместе с методом split().
Изображение
☑️ cookieStore

Работа над cookie на чистом JavaScript ужасно неудобна, так, как document.cookie представляет собой не объект, а строку в специальном формате, для манипуляций с которой часто нужны дополнительные функции или библиотеки.
Но, с предложеним по внедрению API асинхронных файлов cookie в скрипты и ​​сервис-воркеры работа над cookie станет намного удобнее.
cookieStore уже работает в Chrome начиная с 87 версии!
Изображение
☑️ CВОЙСТВО LENGTH ОБЪЕКТА FUNCTION

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

Пусть в новом году неудачи обернутся новыми победами, а трудные решения станут правильным выбором.

Спасибо, что читаете!
Больше контента в 2021!

🎉🎉🎉
☑️ TIPS AND TRICKS #13

Сниппет для определения предпочтительного языка пользователя в браузере.
Изображение
☑️ TIPS AND TRICKS #12

Все способы заполнить массив последовательными числами.
Изображение
☑️ ЛЕНИВЫЕ ФУНКЦИИ

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

Cвойство new.target позволяет определить, была ли вызвана функция или конструктор с помощью оператора new. В конструкторах и функциях, вызываемых с помощью оператора new, new.target вернет ссылку на конструктор или функцию. При обычных вызовах функций new.targetundefined.
Изображение
☑️ КОРОТКО = ХОРОШО?

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

Все способы очистить массив не изменяя ссылку.
Изображение
☑️ TIPS AND TRICKS #9

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

Какой Вы используете?
Изображение
☑️ TIPS AND TRICKS #8

Я много работал с изоморфными приложениями, которые, используют один и тот же JavaScript код на клиенте и на сервере. Однако, в зависимости от платформы, некоторая логика может отличаться. Нам же, в таком случае, нужно определять в какой среде запускается код.
Cуществует множетсво npm пакетов, которые выполняют это простое действие. Делюсь решением в несколько строк, без лишних зависимостей.
Изображение
☑️ ПОСЛЕДОВАТЕЛЬНЫЕ ВЫЗОВЫ API

Видео уже доступно на YouTube.

За лайки и комментарии + в карму 🎯
Web-страница:
РАБОТА С АСИНХРОННЫМ КОДОМ. ПОСЛЕДОВАТЕЛЬНЫЕ ВЫЗОВЫ.
Решаем задачу последовательных вызовы API с использованием различных подходов: callback, promise, reduce, generators, async/await.

Ссылки из видео:

GET profiles: https://5fba8ddd7f538800165a5dc7.mockapi.io/api/profiles
GET companies: https://5fba8ddd7f538800165a5dc7.mockapi.io/api/companies
GET locations: https://5fba8ddd7f538800165a5dc7.mockapi.io/api/locations

Вступайте в телеграм чат WiseJS: https://t.me/frontend_tips
☑️ CSS СВОЙСТВО caret-color

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

Найдено 38 постов