Фронтендер от бога – Telegram
Фронтендер от бога
3.89K subscribers
1.12K photos
19 videos
1.08K links
Божественные дайджесты по фронтенду и немного юмора.

По всем вопросам: @godinmedia
Download Telegram
HTML- и CSS-советы для джуниор фронтенд-разработчиков

#почитать

Я начинал изучать вёрстку в 2010 году. Я не знал английский, поэтому у меня был ограниченный набор материала. Кто помнит видеоуроки Попова?

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

Я собрал несколько советов. По моей задумке, если вы обратите внимание на эти аспекты, то ваш код будет лучше.

Давайте посмотрим, что я вам подготовил.


Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4👍1
Псевдоклассы валидации форм: делаем интерфейсы понятнее

#почитать

Когда вы создаёте веб-форму, важно, чтобы пользователь сразу понимал, правильно ли он заполнил поля. Здесь на помощь приходят псевдоклассы :valid и :invalid. Эти инструменты, доступные в браузерах с 2018 года (согласно Baseline, статус «Widely Available»), позволяют стилизовать элементы формы в зависимости от того, проходят ли они валидацию. Представьте: пользователь вводит email, а поле подсвечивается зелёным, если всё верно, или красным, если что-то пошло не так. Это не только удобно, но и делает интерфейс интуитивно понятным даже для новичков.

Кроме того, существуют псевдоклассы :required и :optional. Они помогают визуально выделить обязательные и необязательные поля. Например, можно добавить звёздочку или изменить цвет границы для обязательных полей, чтобы пользователь сразу знал, что их нужно заполнить.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1
JavaScript: хочу свой HTMLElement

#почитать

Просто хочу строить свой DOM из своих кирпичей.
С преферансом и поэтессами...
И, если уж на то пошло, может быть что‑то типа: «раз пошла такая пъянка...»

Думаю некторые понимают, что так можно, но — повторение мать учения, и, то есть, никто не мешает и не мешал делать не так, как все привыкли, не брать чей‑то готовый код, и не оставаться в рамках ограничений, наложенных кем‑то на что‑то «просто потому что».


Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
Что такое инкрементальная гидратация в Angular

#почитать

Если вы когда-либо запускали SSR в Angular, вы наверняка сталкивались с этим парадоксом: страница вроде бы загружается молниеносно, но ощущается медленной. Контент есть, кнопки на месте — а кликаешь по ним, и в ответ тишина. Почему? Потому что браузер всё ещё «оживляет» интерфейс — запускает JavaScript, подключает обработчики, восстанавливает состояние. Это и есть гидратация, и в классическом исполнении она не так уж и быстра.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
Что новенького есть в CSS в 2025 году

#почитать

Мне всегда было интересно наблюдать, как развивается CSS. Держу себя в форме, чтобы не пропустить что-то важное. А недавно подумал: «Почему бы не поделиться ими с подписчиками?». И я тут.

Составил список новинок, которые мне кажутся важными и интересными. Есть несколько новых возможностей, которые очень сильно изменят CSS. Думаю, лучше готовиться к ним заранее.

Также скажу, что на сегодняшний день они реализованы минимальным количеством браузеров. Не получится использовать их прямо сейчас. Хотя некоторые можно, если вы поддерживаете только браузер Google Chrome. В любом случае про браузерную поддержку я тоже расскажу.


Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
Резервные значения пользовательских свойств CSS

#почитать

Браузер не знает, является ли значение CSS переменной валидным, пока переменная не будет разрешена, а к тому времени её обработает каскад и отбросит возможные резервные значения.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
В чём разница между <p> и <br>

#почитать

Чтобы разметить текст, нужно понимать, какие использовать теги. Для создания новой строки в тексте есть несколько способов. В статье мы расскажем, как ими пользоваться.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
Мощь Intl API: подробное руководство по встроенной в браузер интернационализации

#почитать

В двух словах: интернационализация — это не только перевод текста. Она включает в себя форматирование дат, правильное образование множественного числа, сортировку имен и многое другое с учетом конкретных локалей. Вместо тяжелых сторонних библиотек современный JavaScript предлагает Intl API — мощный встроенный инструмент для работы с i18n. Еще одно напоминание о том, что веб действительно глобален.

Существует распространенное заблуждение, что интернационализация (i18n) сводится лишь к переводу интерфейса. Перевод, конечно, важен, но это лишь одна из частей. Настоящая сложность — в адаптации информации под культурные особенности.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
Всё самое важное о псевдоклассе :default

#почитать

Псевдокласс :default — это способ стилизации элемента формы, выбранного по умолчанию. Он особенно полезен при работе с группами радиокнопок, чекбоксов или выпадающих списков, где важно визуально выделить стартовый (предустановленный) вариант. Такой подход делает интерфейс понятнее и помогает пользователю быстрее ориентироваться в выборе.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥1
Как скачать JSON на JavaScript: метод fetch()

#почитать

Метод fetch() — это один из ключевых инструментов веб-разработки. Он появился как альтернатива устаревшему XMLHttpRequest и сразу изменил привычный подход к работе с данными в браузере. Сегодня трудно представить приложение без динамической подгрузки: комментарии в соцсетях, бесконечные ленты новостей, онлайн-магазины с фильтрацией товаров — всё это работает благодаря запросам к серверу, которые обрабатываются без перезагрузки страницы.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
<details name>: эксклюзивные аккордеоны на чистом HTML (+ стили через :has())

#почитать

За последний год HTML получил деталь, которая меняет привычные «аккордеоны». У <details> появился атрибут name, и этим всё сказано: теперь эксклюзивные аккордеоны можно сделать без строчек JavaScript, а стили и поведение дочистить через :has(). Поддержка стала широкой, а старые практики на дивчиках и ролях можно оставить для случаев, когда действительно нужна сложная логика.

В HTML у нас давно есть пара <details>/<summary>. Браузер сам рисует disclosure-виджет, умеет разворачивать содержимое, бережно обращается с фокусом и клавиатурой. Сейчас поверх этого добавился name, который превращает набор из нескольких <details> в группу, открываешь одно и закрываются остальные из той же группы. Если в группе вы отметили несколько элементов open в исходнике, браузер оставит открытым первый по порядку.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
7
▫️Как умение продавать помогает разработчику

#посмотреть

В жизни каждого разработчика наступает тот самый момент "X"...
... когда его зовут на встречу с клиентом, заказчиком, партнером или просто с соседней командой.

Смотреть на YouTube ⏱️50 минут
Please open Telegram to view this post
VIEW IN TELEGRAM