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

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

Пиши свої ідеї для постів сюди: @front_idea_bot
Download Telegram
☑️ СГЕНЕРИРОВАТЬ CПИСОК С ЧИСЛАМИ В JavaScript

Иногда, нам нужно сгенерировать много случайных данных.
Красивый способ сделать это в одну строку кода.
☑️ HTMLElement.dataset

Открывает возможности как для чтения, так и для изменения всех пользовательских дата-атрибутов.

При извлечении:

удаляется префикс data- (вместе с дефисом);
имя атрибута переводится в camelCase;
☑️ ИЗМЕНЕНИЕ ПОВЕДЕНИЯ ФОРМЫ АТРИБУТАМИ КНОПОК

Атрибуты formaction, formmethod, formnovalidate у button позволяют преопределить action method и validate у самой формы.
Таким образом можно определять различное поведение формы в зависимости от нажатой кнопки.
☑️ TIPS AND TRICKS #18

Вы можете назвать группы захвата для регулярных выражений в JavaScript.
Определите именованный захват в угловых скобках <>, и они будут возвращены в .groups.
☑️ TIPS AND TRICKS #19

Декларативное извлечение ключей/значений из объекта с дальнейшим преобразованием.
☑️ НОВОЕ ВИДЕО НА КАНАЛЕ 🎬

Вы или ваши знакомые собираются пойти на курсы программирования?
Покажите им это видео:

https://www.youtube.com/watch?v=fsi_q5CxqY0

Заранее спасибо всем, кто подпишется, поддержит лайком и комментарием!
☑️ TIPS AND TRICKS #20

При создании списка, часто некоторые элементы бывают опциональными и добавляются в том случае, если выполняется/не выполняется конкретное условие.
Есть несколько способов инициализировать массив условными элементами.
This media is not supported in your browser
VIEW IN TELEGRAM
☑️ Замыкания в JavaScript за 1 минуту

Самое простое объяснение + реальный пример использования.

Как вам такой формат постов?
☑️ ОПЕРАТОРЫ ЛОГИЧЕСКОГО ПРИСВАИВАНИЯ

В JavaScript теперь есть возможность комбинировать логические операции и операцию присваивания с помощью новых операторов:
&&=, ||= и ??=
Ранее составные операторы можно было использовать только с математическими и побитовыми операциями.
This media is not supported in your browser
VIEW IN TELEGRAM
☑️ Разница между строгим и нестрогим сравнением в JavaScript за 1 минуту.

Помните, что разница возникает лишь при сравнении разных типов.
При сравнении одного типа операторы работают идентично.

А что вы используете == 🆚 === ?
☑️ ОПРЕДЕЛЯЕМ ПУСТОЙ ЛИ ОБЪЕКТ В JavaScript

Это довольно часто используемая операция, но у нас нет встроенного в язык функционала, который мог бы определить, есть ли в объекте какие-либо значения.
Пишем собственную реализацию в несколько строк.
☑️ ИМПОРТ JSON ФАЙЛА НАПРЯМУЮ ИЗ JavaScript в браузере

Множество веб приложений используют json файлы для получения конфигурации приложения, версионирования или других целей. Сегодня в Google Chrome последней версии была добавлена возможность импортировать .json файлы напрямую из .js модулей.

Когда разработчик хочет импортировать модуль JSON, он должен использовать утверждение импорта, assert: { type: 'json' } в асинхронном варианте или assert { type: 'json' } в обычном импорте, чтобы указать, что это должен быть JSON.
Импорт не удастся, если тип MIME, полученный из сети, не соответствует ожидаемому типу application/json.
☑️ TIPS AND TRICKS #21

Бывают случаи, когда нам нужно отображать только первые символы слов, например инициалы или аббревиатуры.
Достичь этого можно вообще без использования JavaScript, а лишь только с использованием CSS. Песочница: https://jsfiddle.net/dot21gcz/
This media is not supported in your browser
VIEW IN TELEGRAM
☑️ Контекст вызова this в JavaScript за 1 минуту.

Простое объяснение контекста в JavaScript + все варианты использования:
Глобальная область видимости, function, new, object, arrow function, bind, call, apply.
☑️ Новое свойство Object.hasOwn в JavaScript

Уже доступно в версии v9.3 движка V8 за флагом --harmony-object-has-own, и скоро будет доступен в Chrome и других современных браузерах.
☑️ TIPS AND TRICKS #22

Различные способы извлечения первого и последнего элементов массива.
☑️ TIPS AND TRICKS #23

Почти у всех списков и таблиц есть состояние, когда данные для показа отсутствуют.
Сообщение об отсутствии значений можно вывести используя только HTML и CSS.