Верстальщик от бога
9.22K subscribers
1.38K photos
18 videos
1 file
1.64K links
Регистрация в перечне РКН:
https://knd.gov.ru/license?id=6757e1989d804a279b283165&registryType=bloggersPermission

Самый большой канал по верстке в телеграм.

Чат верстальщиков: @godinhtmlchat

По всем вопросам: @anothertechrock
Download Telegram
Как стать Frontend-лидом за 4 года

#почитать

Оценивая свои знания я понял, что их не хватает даже для устройства на позицию джуна. Поэтому на протяжении следующих трёх месяцев я учился по 10-12 часов в день, чтобы начать ходить на интервью.

⏱Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥1
Пятничное. История Dark Mode: как баг стал фичей

#почитать

«Темная тема», «темный режим», «ночной режим», «дарк мод» — опция, которая сейчас есть практически в каждой операционной системе, приложении, браузере, сайте.
Многие текстовые редакторы и интегрированные среды разработки (IDE) предлагают темную тему по умолчанию.

Давным-давно в 19 веке, еще до появления школьных тетрадей (и уж тем более аналоговых и цифровых электронных устройств) у каждого ученика (или ученого «мужа») была своя собственная аспидная доска, выполненная из сланца — так называемого аспида.

⏱Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥3
Infinite-Scrolling Logos In Flat HTML And Pure CSS

#почитать

Помните элемент HTML <marquee>? Он устарел, так что вряд ли вы будете использовать его, когда вам понадобится что-то вроде горизонтальной автопрокрутки. Вот тут-то и приходит на помощь CSS, потому что в нем есть все необходимые инструменты для реализации этой функции. Автор демонстрирует технику, которая позволяет сделать это с помощью набора изображений и минимального HTML.

⏱Читать статью (en)
Please open Telegram to view this post
VIEW IN TELEGRAM
❤9🔥3
Селектор потомков (пробел)

#почитать

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

⏱Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7👍2❤1
Адаптивное видео с помощью встроенных математических функций CSS

#почитать

Пока копалась в математических функциях, пришло в голову, что aspect-ratio можно попробовать воспроизвести с помощью этих функций и кастомных свойств.


⏱Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6🙈2👍1
▫️ Фронтенд-рынок: динамика и спрос

#посмотреть

Друзья, фронтенд-рынок мертв. Вакансий меньше, чем поданных резюме, а конкуренция бесконечна. Кажется, найти работу невозможно, а даже если и найдешь, зарплата невелика. По крайней мере, так считают выпускники крупных онлайн-школ — тех самых известных школ, рекламу которых вы повсюду видите по телевидению или у блоггеров. Или, может быть, это просто люди, которые не совсем понимают, как работает эта индустрия.

Как основатель Result University, онлайн-заведения, полностью занимающегося фронтенд-разработкой, я решил углубиться в цифры и факты. Что на самом деле происходит на рынке фронтенда? Действительно ли все так плохо, как многие утверждают? В этом видео я хочу ответить на один важный вопрос: можно ли устроиться на работу младшим разработчиком прямо сейчас? Есть ли возможности для разработчиков среднего и старшего уровня? Сколько вакансий имеется? И самое главное, сколько денег могут заработать эти профессионалы?

Для анализа всех этих данных я воспользовался известным сервисом HeadHunter. Обратите внимание, что эта статистика отражает общие тенденции и динамику рынка труда. Она может не отражать точные цифры, но дает общее представление о том, что сейчас происходит в отрасли.


⏱Смотреть на YouTube ⏱
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8👎2🔥1
Вопросы по вёрстке на интервью фронтендера: значения свойства display

#почитать

Продолжаю отвечать на вопросы из собеседований на должность фронтендера. Сегодня я отвечу на следующий вопрос: «В чём отличия между значениями block, inline, flex, inline-flex, grid и inline-grid для свойства display?»


⏱Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14❤3🔥2
Firefox остаётся самым быстрым браузером

#почитать

Как уже говорилось, Firefox остался последним свободным браузером на независимом движке (Gecko). Сейчас это единственная альтернатива монополии WebKit (Safari) и его форка Blink (Chrome, Edge, Opera и др.). И это единственный популярный браузер, который не принадлежит крупной корпорации.

⏱Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍19❤6👏5🤔2👎1
Что может сломать aspect-ratio в CSS

#почитать

В CSS есть свойство aspect-ratio, полностью поддерживаемое примерно с 2021 года. Это свойство может быть очень полезным и помочь там, где нельзя использовать фиксированный размер. Но всё может пойти не так.

⏱Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔8👍2🎉2
Введение в CSS Grid

#почитать

▫️Что такое CSS Grid
▫️Фракционные единицы (fr)
▫️Создание CSS Grid
▫️Функция repeat()
▫️Добавление gap
▫️Варьирующиеся размеры
▫️Создание универсальной системы

⏱Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9👍3🙈1
Платный Chrome Enterprise

#почитать

Платный браузер (подписка $6/месяц за 1 рабочее место) с ИИ-элементами для борьбы с киберугрозами.

Комент:
Максимально странное решение, после выхода бесплатного ChatGpt многие перестали пользоваться поиском гугл, а тут еще такие непопулярные решения как будто бы забьют гвоздь в крышку гроба.


⏱Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔8👍2🔥1😁1
Юмористический рассказ «Как неофит познавал яваскрипт»

#почитать

Пятьдесят лет назад программистов не было в природе. А сейчас они, кажется, уже вымирают – народился «Чат Гопоты», дьявольский Devin и всё такое прочее. Но, думаю, настоящие программисты не вымрут – они просто перестанут зарабатывать деньги. Ведь до сих пор умельцы и лапти плетут – не за деньги, для души. Собственно, дальше будет история о душе программирования.


⏱Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8❤3🎉2🤔1
Инь-Ян в UI/UX дизайне

#почитать

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


⏱Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9👏2🔥1
Архитектура Inverted Triangle CSS (ITCSS)

#почитать

▪️Settings (Настройки): Основополагающий слой, включающий конфигурацию, переменные и глобальные настройки. Он задаёт основу для всей таблицы стилей.

▪️Tools (Инструменты): Этот слой включает миксины, функции и другие инструменты, используемые в проекте. Он предоставляет разработчикам набор инструментов для эффективного управления и расширения стилей.
Generic (Общий): на этом слое применяются сброс стилей и normalize.css, создавая единую базу для стилей в разных браузерах.

▪️Elements (Элементы): Далее идёт базовая стилизация элементов HTML. Это неклассифицированные селекторы, определяющие базовые стили для стандартных HTML-тегов.

▪️Objects (Объекты): Этот слой определяет многократно используемые шаблоны дизайна и структуры макета. Он сосредоточен на создании объектов, содержащих специфическое поведение стилей, что способствует модульности и возможности повторного использования.

▪️Components (Компоненты): На этом слое выполняется стилизация конкретных компонентов пользовательского интерфейса. Этот слой реализует большую часть стилизации приложения, обеспечивая чёткое разделение задач.

▪️Trumps (Козыри): Вершина перевёрнутого треугольника, слой Trumps, имеет дело с утилитарными классами и переопределением стилей. Он позволяет вносить специфические изменения и тонкие настройки, не нарушая целостности нижних слоёв.

⏱Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10❤1🔥1
CSS in Depth

Автор: Keith J. Grant
Год: 2018

⏱Обзор
⏱Скачать книгу
Please open Telegram to view this post
VIEW IN TELEGRAM
😁9👍3🎉2
😙
🔥18👎3😱3👍1
Анимация в веб-интерфейсе, влияние на UX

#почитать

Любое движение в визуале триггерит пользователей лучше. По данным, Engagement Rate у видео и анимаций в 2 раза выше, в сравнении со статикой.


⏱Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6❤2🔥1
"Заявляю: Мы, как цивилизация, разучились использовать центрирование"

#почитать

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


⏱Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🎉7👍4🔥1
Почему AVIF вместо JPEG, WebP, PNG и GIF

#почитать

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


⏱Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6👍4🔥2
Изменить цвета и кнопки сервиса — и не сломать дизайн-систему

#почитать

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


⏱Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8❤2