Спаси глаза пользователей. Как добавить на сайт тёмную тему

#почитать #junior

Без лишних слов создадим простой переключатель для светлой и темной темы: HTML, CSS и JavaScript. Нам понадобятся три файла — index.html, styles.css и script.js.

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

Как корпорация-кракен Monotype захватила рынок шрифтов

#почитать #junior

Ей принадлежат Arial, Helvetica, Gotham и Times New Roman, а также отраслевой маркетплейс MyFonts. Как она развивалась и почему дизайнеры мирятся с её условиями — в кратком пересказе.

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

Способы центрировать текст в css

#почитать #junior

Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое (text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее.

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

Паттерны реактивности в современном JavaScript

#почитать #junior

Мы работаем с большим количеством JS на сайтах и в веб-приложениях, поскольку браузер — это полностью асинхронная среда. Мы должны реагировать на действия пользователя, взаимодействовать с сервером, отправлять отчеты, мониторить производительность и т.д. Это включает в себя обновление UI, сетевые запросы, изменения навигации и URL в браузере, что делает каскадное обновление данных ключевым аспектом веб-разработки. Реактивность, обычно, ассоциируется с фреймворками, но можно многому научиться, реализуя реактивность на чистом JS.

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

JavaScript повсюду или почему веб-технологии захватили мир

#почитать #junior

Раньше в айти входили не по ссылкам на рекламу курсов, а по зову сердца. Типичной историей было начать на коленке стряпать странички для друзей, просто вдохновляясь красивыми примерами, увиденными где-то на просторах тогдашнего интернета “по карточкам”, а потом делая это уже за деньги для первых заказчиков и открывая веб-студии. Примерно так начинал известный всем Артемий Лебедев.

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

Какой бесплатный HTML-редактор выбрать

#почитать #middle #junior

▪️ Notepad++
▪️ Brackets
▪️ Coffeecup
▪️ NoteTab
▪️ Eclipse
▪️ HTML-Online
▪️ BlueGriffon
▪️ Emacs + плагины
▪️ Atom
▪️ Visual Studio Community

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

Перенос, обрезка и ориентация текста в CSS

#почитать #junior

▪️Обработка пробелов (white-space)
▪️Обрезка текста (text-overflow)
▪️Перенос слов при переполнении (overflow-wrap)

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

Кнопка «Показать ещё» на чистом JavaScript - для подгрузки товаров через AJAX

#почитать #junior #middle

▫️Как работает кнопка «Показать ещё»
▫️Написание backend-кода на PHP
▫️Создание HTML-кода
▫️Стилизация карточек и кнопки
▫️Добавление функциональности к кнопке с помощью JavaScript

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

Как практически без вложений улучшить пользовательский опыт с растром

#почитать #junior #middle

Простые правила при работе с растровыми изображениями на каждый день:
▫️Исходные данные и выбор основного формата
▫️Изменение размеров
▫️Оптимизация
▫️WebP
▫️Тег picture и srcset
▫️Предзагрузка
▫️Ленивая загрузка
▫️Сдвиг макета
▫️Object-fit

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

Что делать, если дизайнеры принесли кучу кривых вместо макета

#почитать #junior #middle

▫️Нет базовых состояний
▫️Нет специфичных состояний
▫️Обратная связь
▫️Нет индикаторов загрузки
▫️Нет сообщений об ошибке загрузки или отправки
▫️Недостаточно оформления для валидации
▫️Технические страницы
▫️Разные отступы идентичных элементов
▫️Слишком много размеров похожих элементов

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

Web Accessibility в рассказе «A11Y от 0 до NaN»

#почитать #junior

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

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

Центрирование в CSS: полное руководство

#почитать #junior

Центрирование элементов — самая популярная причина для жалоб на CSS. «Ну почему нельзя было сделать всё попроще?» — возмущаются все кому не лень. Думаю, проблема не в том, что это сложно сделать, а в том, что способов центрирования элементов такое множество, что бывает трудно выбрать подходящий.

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

Шаблонизаторы для HTML

#почитать #junior

Есть много способов сэкономить время и упростить жизнь разработчика. Но они кажутся такими сложными и непонятными, что знакомство с ними постоянно откладывается. И зря: сегодня мы расскажем, как автоматизировать работу, используя вспомогательные инструменты. Шаблонизаторы для HTML — один из таких способов.

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

Частые ошибки в HTML-коде

#почитать #junior

Ошибки в коде — это несоответствия правилам и синтаксису языка HTML, использование некорректных или недопустимых тегов, атрибутов или значений. Ошибки приводят к неправильному отображению элементов, снижению производительности и доступности сайта.

▫️Вложенный тег закрывается позже родительского
▫️Нет закрывающего тега
▫️Повторяются идентификаторы
▫️Неправильное использование семантических тегов
▫️Отсутствие атрибута alt для изображений img
▫️Определение уровня заголовка по размеру текста на макете
▫️Включать в main то, что повторяется на других страницах
▫️Неверное обозначение комментариев
▫️Не использовать <li> для элементов списка

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

КОГДА УМЕСТЕН CAPS LOCK, как расставить акценты и другие заметки о типографике

#почитать #junior

Всё повторяющееся в проблемы в одной статье:

▫️Про шрифт DIN
▫️Про длину строки
▫️Про межстрочное расстояние
▫️Про близость
▫️Про точки в заголовках
▫️Про кернинг и лигатуры
▫️Про разрядку строчных и кражу овец
▫️Про всякие типографские мелочи для тех, кто молодец
▫️Про бесплатные шрифты
▫️Про ЗАГЛАВНЫЕ (капс)
▫️Про разговор
▫️Про акценты
▫️Про Дэвида Карсона

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

Как оформить текст: 11 главных css-свойств

#почитать #junior

У любого текстового элемента есть свои стили по умолчанию. Заголовки крупные и жирные, текст в абзацах нормального размера и начертания, а ссылки обычно синие и подчёркнутые снизу. Каждый из этих элементов можно стилизовать по-своему, например, поменять размер, начертание или цвет. Давайте посмотрим, как это сделать.

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

Старт в Figma

#почитать #junior

Figma — это онлайн-редактор графики для дизайнеров интерфейсов и веб-разработчиков. Это удобная, бесплатная альтернатива Photoshop. Большое преимущество платформы — возможность работать прямо в браузере.

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

Флексы для начинающих

#почитать #junior

Flexbox — инструмент построения крупных сеток и микросеток.
Чтобы превратить блок во флекс-контейнер, ему задают свойство display: flex. Непосредственные потомки такого контейнера — флекс-элементы — становятся гибкими. Они легко сжимаются или растягиваются, меняют порядок, поддаются выравниванию по главной и поперечной осям.

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