От живых гайдлайнов к Documentation as Code. Как изменилась документация во фронтенд-разработке

#почитать

Помню, как ещё несколько лет назад в большинстве проектов документация существовала в виде PDF-файлов или, в лучшем случае, статичных веб-страниц в корпоративной wiki. Дизайнеры создавали подробные гайдлайны в Sketch или Figma (не всегда), которые команда разработки должна была воплотить в код. На практике это создавало множество проблем: документация быстро устаревала, реальные компоненты начинали отличаться от описанных в гайдлайнах, а новые разработчики тратили часы на то, чтобы разобраться, какая версия документации актуальна.

⏱Читать статью

▫️Vue.js. Полный курс

#посмотреть

В данном видео-курсе мы с вами рассмотрим работу с JavaScript фрэймовком Vue.js 2-й версии. А так же разберём все необходимые темы и понятия, которые нужны для того что бы начать разрабатывать на Vue.js.

⏱Смотреть на YouTube ⏱️2 часа 30 минут

▫️Сколько памяти ест ваша вкладка?

#посмотреть

При разработке веб-приложений не все задумываются о том, сколько ресурсов потребляет код. Разработчики привыкают к своим мощным макбукам, и им не всегда интересно «экономить на спичках». Разве может наш код на языке JavaScript требовать много памяти? И «много» — это вообще сколько? 100 мегабайт — это много?

⏱Смотреть на YouTube ⏱️45 минут

style.setProperty vs setAttribute

#почитать

Начнем с того, что немного освежим мат. часть. Мы знаем, что стили описываются с помощью языка CSS. Получив строковое описание стилей на языке CSS, браузер разбирает его и составляет объект CSSOM. Интерфейс этого объекта представлен спецификацией https://www.w3.org/TR/cssom-1.

⏱Читать статью

link rel='modulepreload': Оптимизация загрузки модулей JavaScript

#почитать

rel='modulepreload' указывает, что скрипт модуля должен быть получен, проанализирован и откомпилирован заранее, и сохранён для последующего выполнения.

⏱Читать статью

История Electron

#почитать

Electron — это один из самых известных инструментов современного разработчика. Если присмотреться, то это родственник React Native, манящий лозунгом «пиши один раз, запускай везде!», но с гораздо меньшими издержками по сборке и релизу, чем в случае мобильной разработки. Его уникальное преимущество заключается в комбинации Node.js и Chromium, создающей мощную десктопную среду для веб-технологий. Официальный блог Electron не так давно отметил своё десятилетие, что весьма удивляет с учётом того, насколько глубоко этот инструмент успел проникнуть в культуру разработки.

⏱Читать статью

Кнопки с несколькими состояниями

#почитать

Как правило, кнопки либо нажаты, либо нет. Но при условии, что обеспечена доступность, можно сделать группу радиокнопок внешне похожей на кнопку с несколькими состояниями с помощью CSS-хитростей.

⏱Читать статью

Практикум. Счётчик символов в поле ввода

#почитать

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

⏱Читать статью

Позиционирование текста вокруг элементов с помощью смещения CSS

#почитать

Когда речь заходит о позиционировании элементов на странице, в том числе и текста, в CSS существует множество способов сделать это - буквальное свойство position с соответствующими свойствами inset-*, translate, margin, anchor() (на данный момент поддерживается несколькими браузерами) и так далее. Свойство offset - еще одно, которое входит в этот список.

⏱Читать статью

Настройка одного набора цветов для светлого и тёмного режимов

#почитать

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

⏱Читать статью

Предзагрузка отзывчивых изображений

#почитать

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

⏱Читать статью

Всё, что нужно знать о работе с API в JavaScript

#почитать

Если вы хотите получать данные с сервера, отправлять информацию или взаимодействовать с внешними сервисами (например, картами Google, платёжными системами или погодными сервисами), вам не обойтись без этого навыка. Разберём работу с API на практике: от базовых запросов до обработки ошибок и аутентификации.

⏱Читать статью

Пишем идеальную mobile-first галерею

#почитать

Давайте так, возможно это и не галерея вовсе. Название не так важно, важна задача. Описать её можно так: нам нужна mobile-first свайпалка слайдов. Свайпы должны выглядеть максимально нативно и работать без съедания кадров. Хоть она и mobile-first, десктопы с их мышками стороной обходить нельзя.

⏱Читать статью

Интеграция CSS-фреймворков в Angular

#почитать

Вы создали новое Angular‑приложение, подключили популярный CSS‑фреймворк, но вместо ожидаемого вау‑эффекта столкнулись с проблемами: стили выглядят не так, как хотелось, валидация форм работает странно, а некоторые элементы вообще не реагируют на изменения состояния. Знакомо? Это типичная ситуация, когда CSS‑фреймворки интегрируются без учета особенностей Angular.

⏱Читать статью

navigator.clipboard — Новый асинхронный Clipboard API в JavaScript

#почитать

Копирование и вставка текста, изображений и файлов с помощью нового API navigator.clipboard

⏱Читать статью

HTML-коды популярных эмодзи

#почитать

Эта таблица станет настоящим помощником для начинающих и опытных веб-разработчиков, которые хотят улучшить пользовательский опыт и добавить яркие элементы на свои проекты.

⏱Читать статью