☑️ TIPS AND TRICKS #2

Получаем полное название дня недели из объекта Date:

✅ на любом языке
✅ без использования сторонних библиотек

Верстаем сайт с нуля за 4 часа!🔥 Бесплатный марафон по HTML/CSS + Bootstrap.

🗓 Когда: с 12 по 13 октября (2 дня), начало в 19:00 по Киеву.

👥 Рассчитан на новичков+, которые хотят прокачать свои навыки или попробовать себя в верстке сайтов*.

📍Где: прямой эфир на YouTube канале. Подписывайтесь чтобы не пропустить начало!

✔️за 4 часа мы сверстаем сайт в прямом эфире;
✔️я познакомлю Вас с основами и тонкостями верстки сайтов;
✔️”оживим” его с помощью JS
✔️Вы “примеряете” на себе новую професcию;
✔️получите ответы на все интересующие вопросы в прямом эфире;
✔️мотивация и советы куда двигаться дальше в подарок 😁

Все материаллы, файлы и ссылки будут опубликованы в телеграмм канале: https://t.me/free_front_end

*Чтобы иметь минимальные знания рекомендую посмотреть мое видео HTML за 40 минут.

☑️ TIPS AND TRICKS #3

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

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

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

☑️ ВСЕ, ЧТО НУЖНО ЗНАТЬ ПРО ТЕГ LINK

Разбираемся с особенностями атрибутов: preconnect, prefetch, preload и многих других по ссылке.

☑️ TIPS AND TRICKS #4

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

☑️ НОВЫЕ ВОЗМОЖНОСТИ ES2021 / ES12

Новые версии спецификации ECMAScript дополняются каждый год, а новые предложения для изменений финализируются довольно быстро.
Узнайте, какие возможности получил JavaScript по ссылке.

🚀🚀🚀

☑️ TIPS AND TRICKS #5

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

🎯 Такую функциональность можно реализовать с помощью данной функции.

☑️ WEB ПРИЛОЖЕНИЕ С НУЛЯ: react, hooks, redux, redux-saga, material-ui

Записал туториал по разработкие приложения с использованием выше перечисленных технологий.

Welcome 🙌

P.S.: За лайки и комментарии + в карму 🎯

☑️ 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

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

☑️ ПОСЛЕДОВАТЕЛЬНЫЕ ВЫЗОВЫ API

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

За лайки и комментарии + в карму 🎯

☑️ 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.target – undefined.

☑️ ЛЕНИВЫЕ ФУНКЦИИ

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