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

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

Пиши свої ідеї для постів сюди: @front_idea_bot
Download Telegram
Все еще желаете освоить Front-end 💻, но так и не переходите к его изучению, или не знаете с чего начать?

Начните с HTML!

Выучите данный язык разметки всего за 40 минут моем новом видео!
☑️ TIPS AND TRICKS #1

Самый простой способ создать HTML-элемент из строкового шаблона.

The easiest way to create an HTML element from a string template.
☑️ 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() с соответствующим запросом, чтобы проверить настройки цветовой схемы пользователя.
☑️ 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

Все способы очистить массив не изменяя ссылку.