Что фронтенд-разработчик должен знать про UX и зачем прокачиваться в этом направлении

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

Чтобы разобраться в этих вопросах, авторы статьи пригласили опытных экспертов в области фронтенд-разработки и пользовательского опыта. Вот, что они рассказали:

https://tprg.ru/2lCH

#фронтенд

​Создание ссылки для ска­чи­ва­ния

Иногда необходимо сделать ссылку, которая должна открывать системный диалог для сохранения файла. Браузеры достаточно умны, чтобы открывать такой диалог при скачивании бинарников вроде архивов или EXE-файлов. Но что делать, если нужно скачать картинку или какое-нибудь видео?

Ответ найдёте в этой статье:

https://tprg.ru/JLlY

​Ленивая подгрузка библиотек из CDN в Angular

Подробная инструкция, как можно применить имеющиеся инструменты для ленивой подгрузки библиотеки в Angular:

https://tprg.ru/1lxU

#angular

​7 npx-команд, которые помогают при разработке

Большинство разработчиков знает, что такое npm. Чаще всего именно с помощью npm мы добавляем зависимости в JavaScript проекты. Чтобы у вас был доступен npm вам нужно установить Node.js. С версии npm 5.2.0 вместе устанавливается npx — node package execute. Он позволяет запускать пакеты Node.js, не устанавливая его и не добавляя зависимости в ваш проект. Некоторые пакеты разрабатываются специально для того, чтобы быть запущенными с помощью npx, например, create-react-app.

В этой статье автор собрал 7 полезных npx-команд, которые использует сам и рекомендует всем:

https://tprg.ru/YMng

Осталось только найти хорошую библиотеку готовых компонентов

​​Создание 3D-персонажей в Three.js

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

https://tprg.ru/2FEj

#javascript

​Как создать библиотеку компонентов React

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

Подробнее:

https://tprg.ru/lLeh

#фронтенд #react

​Применение невидимых unicode-символов для скрытия действий в JavaScript-коде

Опубликована новая техника внедрения скрытых действий, применимая для кода на языке JavaScript.

Новый метод базируется на применении unicode-символа «ㅤ» (код 0x3164, "HANGUL FILLER"), который относится к разряду букв, но не имеет видимого содержимого.

Подробнее:

https://tprg.ru/tqyY

​Как работает JS: отслеживание изменений в DOM с помощью MutationObserver

Статья вышла уже давно, но всё ещё не потеряла актуальности. Речь в ней пойдёт об API MutationObserver, который позволяет JavaScript отслеживать изменения в DOM.

Как это работает, зачем нужно и где использовать, узнаете здесь:

https://tprg.ru/thrM

#javascript

Компании Atlassian требуется эксперт по React AI и Mia Khalifa

Звучит странно? Но именно так и есть, если верить их приглашению на собеседование.

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

Если верить ему, то она успешно смогла улучшить алгоритмы поиска в LinkedIn благодаря использованию VoldemortDB и Charizard. Это не единственное её достижение, описанное в резюме.

Так вот, рекрутёры различных компаний настолько были впечатлены её талантами (ну или просто не читали даже, что написано), что завалили предложениями.

Посмотрите сами и поймёте, что перед вами ещё непаханое поле технологий, которые надо изучить.

Ссылку на её пост на Reddit тоже оставим, если хотите почитать комментарии: https://tprg.ru/Gx0t

​Бесплатный курс JavaScript с качественной и понятной подачей от нашего подписчика

В нём он старается подать каждый урок в максимально понятной форме. Бонусом после каждого урока есть домашка. Также все материалы урока доступны для скачивания бесплатно:

https://tprg.ru/gkd8

#видео #javascript

​Когда оставил console.log() в продакшене:

​Elf — реактивное хранилище с магическими способностями для приложений JS

Elf — это реактивное решение для управления неизменяемым состоянием, построенное на основе RxJS . Он использует пользовательские операторы RxJS для запроса состояния и чистые функции для его обновления.

Подробнее:

https://tprg.ru/lfbP

#javascript

​Сравнение методов добавления и вставки контента в DOM с помощью JavaScript

Добавить контент на страницу можно различными способами — append, appendChild, insertAdjacentHTML или innerHTML.

У каждого из них есть свои особенности. Подробнее о них в статье:

https://tprg.ru/ObsS

#фронтенд #javascript

​Почему хуки — лучшее, что могло случиться с React

Интересная статья из блога StackOverflow, повествующая о том, что такое хуки, что делает их уникальными и почему они лучше всего подходят для React.

https://tprg.ru/zIRr

#react

​Depp — быстрая проверка неиспользуемых и дублированных пакетов

Полезный инструмент, который помогать находить ненужные для вашего проекта пакеты и удалять их. Устанавливается просто, использует Golang, имеет подробную инструкцию.

Подробнее:

https://tprg.ru/PyuG

​​Когда пытаешься сделать сайт максимально адаптивным без медиазапросов:

​Какой метод отображения SVG лучше всего подходит для большого количества иконок

Если у вас одновременно отображается менее сотни SVG-иконок, вам, вероятно, не нужно слишком сильно беспокоиться о своей технике: разница между одной техникой и другой составляет доли миллисекунды на иконку. А вот если иконок достаточно много, то рекомендуем прочитать эту статью:

https://tprg.ru/Nila

​Процесс создания CSS-фреймворка

Автор статьи поделился своим опытом разработки CSS-фреймворка CodyFrame, а точнее его третьей версии.

https://tprg.ru/Xu2S

#css

​Отключение JavaScript не спасает вас от фингерпринтинга

Фингерпринтинг — это способ идентифицировать пользователей веб-сайта без использования файлов cookie или хранилища данных. Считается, что отключение JavaScript может предотвратить это.

В этой статье доказали обратное:

https://tprg.ru/NiKa