Верстальщик от бога
Самый большой канал по верстке в телеграм. По крупицам собираем frontend-годноту из интернета. Чат верстальщиков: @godinhtmlchat По всем вопросам: @godinmedia
Больше
Network:12 176
Подписчики
-1124 часа
-827 дней
-10230 дней
Время активного постинга
Загрузка данных...
Find out who reads your channel
This graph will show you who besides your subscribers reads your channel and learn about other sources of traffic.
Анализ публикаций
| Посты | Просмотры | Поделились | Динамика просмотров |
01 Пятничное. Дитер Рамс: дизайнер, определивший современность
#почитать
Огромное влияние на индустрию дизайна, наш мир и наше ежедневное взаимодействие со всем вокруг оказал немецкий дизайнер Дитер Рамс. Для опытных дизайнеров имя Рамса давно стало синонимом иконического дизайна и принципов, которые легли в основу современной эстетики продуктов.
Возможно, вы уже замечали, как принципы минимализма и функциональности воплощаются в современных гаджетах, продуктах и интерьерах. Всё это во многом заслуга Рамса.
⏱Читать статью | 563 | 4 | Loading... |
02 Айтрекинг и юзабилити интерфейсов веб-сайтов
#почитать
Айтрекинг — это технология, позволяющая измерить и проанализировать, куда и как долго смотрит пользователь. В основе айтрекинга лежит использование специализированного оборудования и программного обеспечения для отслеживания движений глаз пользователя.
⏱Читать статью | 820 | 11 | Loading... |
03 Анимации CSS, основанные на времени
#почитать
Использование времени для анимации очень часто встречается в шейдерных программах и различных других местах. CSS не может запустить таймер, как это делает JavaScript, но сегодня можно определить пользовательскую переменную с помощью CSS Houdini API для отслеживания времени в миллисекундах.
⏱Читать статью | 984 | 17 | Loading... |
04 В поисках площадок для практики в программировании? Вот список вебсайтов, которые помогут вам улучшить свои навыки, подготовиться к техническим собеседованиям и стать еще лучше!
▫️LeetCode
LeetCode предлагает широкий спектр задач по программированию, охватывающих такие области, как алгоритмы, базы данных и другие. Отличный ресурс для подготовки к техническим собеседованиям благодаря разнообразным задачам.
▫️HackerRank
На HackerRank вы найдете разнообразные задачи по программированию, созданные сообществом. Платформа позволяет сравнивать свои решения с решениями других пользователей, что помогает учиться на примерах.
▫️Codewars
Codewars идеально подходит для начинающих программистов. Платформа предлагает небольшие задачи, которые помогают постепенно развивать навыки программирования.
▫️TopCoder
Один из старейших сообществ по конкурентному программированию. TopCoder регулярно проводит конкурсы по разработке программного обеспечения и дизайну, что делает его отличной платформой для тех, кто хочет соревноваться и улучшать свои навыки.
▫️Codecademy
Codecademy предлагает интерактивные курсы и упражнения по программированию для начинающих и программистов среднего уровня. Платформа помогает изучать новые языки и технологии с нуля. | 983 | 32 | Loading... |
05 Неизвестно полезный CSS. Часть 3
#почитать
Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS-фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React-приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.
Сегодня мы рассмотрим:
- возможность задать несколько фонов с помощью свойства background;
- свойство display, которое позволяет сделать так, что свойства элемента будут влиять через потомка;
- как заставить псевдо-элемент nth-child выбрать элементы без привязки к позиции;
- где будет находиться элемент с position: absolute, если для него заданы свойства grid-column и grid-row.
⏱Читать статью | 1 072 | 30 | Loading... |
06 ▫️ Бесплатный марафон по верстке сайта html/css/js для новичков
#посмотреть
Верстка сайта для всех, кто делает свои начальные шаги в верстке сайтов. В видео я подробно объясняю каждый этап разработки.
⏱Смотреть на YouTube ⏱2 часа 15 минут | 1 166 | 22 | Loading... |
07 Тенденции адаптивного и инклюзивного дизайна
#почитать
Здесь могло бы быть долгое вступление про то, как современные веб‑приложения прошли путь от простых макетов, ограниченных технологиями своего времени, до способных подстраиваться даже не под ограничения технологий, а под ограничения самих пользователей. Но сейчас важно совсем другое. Как ни крути, все пользователи разные, и иногда ограничения касаются их физических возможностей. Этими вопросами занимается адаптивный дизайн и, в частности, инклюзивный.
⏱Читать статью | 1 606 | 18 | Loading... |
08 Стилизация участков текста с помощью CSS Custom Highlight API
#почитать
В этой статье я расскажу, как с помощью CSS Custom Highlight API можно стилизовать выделенные диапазоны текста, а также разберу теорию на практическом примере.
⏱Читать статью | 1 538 | 13 | Loading... |
09 ▫️ Google I/O и Config, Translation API, Figma, Invokers, бета React 19
#посмотреть
Также длинные альты, атрибуты и свойства.
⏱Смотреть на YouTube ⏱1 час 30 минут | 1 566 | 12 | Loading... |
10 Как мы создавали дизайн-систему
#почитать
Спойлер – в результате разработка фич стала быстрее в 2 раза, сборка дизайн-макетов ускорилась в 3-4 раза, а UI приложения удалось избавить от хаоса из рандомных шрифтов и иконок и унифицировать.
⏱Читать статью | 1 539 | 18 | Loading... |
11 Когда во всех вакансиях просят минимум 10-15 лет опыта и возраст до 25-30 лет))) | 1 573 | 10 | Loading... |
12 Media files | 1 561 | 5 | Loading... |
13 Создали сайт, чтобы вам не пришлось 😊
Представляем готовую инновационную платформу для запуска сайта — Аспро: Приорити 2.0. На ней пользователи могут показать экспертность, собирать заявки и получать оплату. Только для подписчиков канала «Верстальщик от Бога» дарим скидку 20% по промокоду: VERSTKA20.
Реклама. ООО "Аспро", ИНН 7453223946, erid: LjN8KKRBR | 1 624 | 5 | Loading... |
14 10 непопуляризованных UI-элементов, улучшающих взаимодействие
#почитать
1. Микроинтеракции для Форм Обратной Связи
2. Персонализированные Тултипы
3. Индикаторы Прогресса для Длинных Форм
4. Гибкие Фильтры Контента
5. Ленивая Загрузка с Анимацией
6. Плавающие Кнопки Действия (Floating Action Buttons)
7. Кастомные Скроллбары
8. Интерактивные Иллюстрации
9. Свайп-карусели в Веб-Дизайне
10. Коллапсируемые Секции Контента (Accordion)
⏱Читать статью | 1 644 | 28 | Loading... |
15 Пятница. Аргументы против самозакрывающихся тегов в HTML
#почитать
Хотя мы, как индустрия, в целом отказались от большинства требований XHTML, это оформление самозакрывающегося тега, похоже, сохранилось, несмотря на то, что является пережитком спецификации, которая была отменена более 10 лет назад. Некоторые даже включают пробел до /, который был добавлен для совместимости с движком браузера еще в прошлом тысячелетии.
⏱Читать статью | 1 939 | 9 | Loading... |
16 «Всё — прямоугольник». Блочная модель
#почитать
Каждый элемент на веб-странице — это прямоугольник, к которому во время отрисовки браузеры применяют CSS-свойства. Чтобы конечные размеры элементов не были для вас сюрпризом и вы точно понимали, из чего они складываются, нужно разобраться с одной из основных концепций вёрстки — блочной моделью.
⏱Читать статью | 1 897 | 18 | Loading... |
17 Потрясающий CSS Easing - новая функция linear()
#почитать
"Лучшая анимация - это та, которая остается в тени". Одна из самых важных концепций моушн дизайна в вебе - сделать так, чтобы моушн "чувствовался правильно". В то же время CSS был довольно ограничен в создании анимации и переходов, которые выглядят естественно и ненавязчиво для пользователя.
К счастью, ситуация меняется. Сегодня мы рассмотрим новые возможности анимации, появившиеся в CSS. В частности, я хочу продемонстрировать супер возможности linear() - новой функции для анимации, которая в настоящее время определена в спецификации CSS Easing Level 2 в редакции Editor's Draft. Вместе мы изучим ее способность создавать кастомные кривые анимации.
⏱Читать статью | 1 828 | 15 | Loading... |
18 Псевдокласс :focus
#почитать
Псевдокласс :focus в CSS используется для стилизации элементов, которые получили фокус. Это может быть, например, текстовое поле в форме, к которому пользователь переместил курсор для ввода, или ссылка, выбранная через клавиатурный ввод. Псевдокласс :focus позволяет создать более интерактивный и доступный пользовательский интерфейс, подсвечивая активные или выбранные элементы.
⏱Читать статью | 1 674 | 13 | Loading... |
19 Тренды в сфере графического дизайна
#почитать
▫️Минимализм и визуальная чистота
▫️Типографика как основной элемент
▫️Смешение классического и цифрового искусства
▫️Мультикультурный и инклюзивный дизайн
▫️3D и AR
▫️Дупликатор (Risograph)
▫️Антидизайн
▫️Работа с сервисом подписки
▫️Бренд-спринты
▫️Кинетическая идентичность все еще набирает популярность
▫️Абстрактная геометрия
▫️Схематическое представление
▫️Экологическая ориентация
⏱Читать статью | 1 703 | 19 | Loading... |
20 Рендерим таблицы с помощью Symbiote.js
#почитать
Symbiote.js - это библиотека для создания интерфейсных компонентов любой сложности, основанная на стандарте Custom Elements. Каждый созданный вами компонент - это полноправный DOM-элемент, со своим собственным API, который будет доступен через самые обычные селекторы и может быть использован совместно с, практически, любым набором веб-технологий. Он полный агностик, и будет дружить как с вашими фронтенд-либами, так и с любым подходом по созданию HTML-документов на сервере.
⏱Читать статью | 2 037 | 18 | Loading... |
21 Применение ключевого слова revert-layer в CSS
#почитать
В веб-разработке не так просто добиться идеально масштабируемого дизайна для разных браузеров и устройств. Трудности могут возникать везде: от настройки стиля для экранов разных устройств до переопределения стилей, попавших в наш код неизвестно откуда.
Распространённая причина переопределения стилей — это конфликты специфичности. В этом случае можно просто добавить в стиль свойство !important, повысив его приоритет по сравнению с остальными стилями.
⏱Читать статью | 2 015 | 16 | Loading... |
22 Нельзя предполагать, что все используют UTF-8
#почитать
Может показаться логичным, что если вы экспортируете лист Excel в файл csv в последней версии MS Excel, то получите UTF-8. Ну, или, возможно, UTF-16. Но вы ошибётесь. По умолчанию, в большинстве конфигураций Excel сохраняет CSV в кодировке Win-1252.
⏱Читать статью | 1 961 | 10 | Loading... |
23 Гибкая вёрстка под большие экраны
#почитать
Для экранов свыше 1921 пикселей.
⏱Читать статью | 2 044 | 40 | Loading... |
24 Мы забываем основы фронтенд-разработки
#почитать
Ситуация выглядит довольно печально. Во всей этой мешанине новых технологий и подходов разработчики начинают забывать основы фронтенда и утрачивают способность к критическому мышлению.
⏱Читать статью | 2 085 | 35 | Loading... |
25 Исследование переноса текста и слов
#почитать
О различных способах управления переноса текста на веб-странице. CSS даёт множество инструментов, позволяющих сделать текст таким, каким мы хотим его видеть. Также рассмотрим трюки с использованием HTML и спецсимволов.
⏱Читать статью | 2 219 | 30 | Loading... |
26 10 CSS-однострочников для преобразования веб-приложения
#почитать
CSS позволяет создавать красивые и отзывчивые веб-дизайны. Однако написание кода CSS может отнимать много времени и сил, особенно если вы не знакомы с новейшими методиками и лучшими практиками. К счастью, есть несколько однострочников, помогающих оптимизировать CSS-код и создавать более эффективные проекты.
1. Центрирование div
2. Создание свободно перемещающихся элементов
3. Позиционирование элементов в любом месте DOM
4. Универсальное свойство box-sizing
5. Адаптивные изображения
6. Центрирование элементов
7. Создание пользовательских стилей флажков
8. Выравнивание текста
9. Очистка float-элементов
10. Сброс всех стилей
⏱Читать статью | 2 315 | 39 | Loading... |
Фото недоступноПоказать в Telegram
Пятничное. Дитер Рамс: дизайнер, определивший современность
#почитать
Огромное влияние на индустрию дизайна, наш мир и наше ежедневное взаимодействие со всем вокруг оказал немецкий дизайнер Дитер Рамс. Для опытных дизайнеров имя Рамса давно стало синонимом иконического дизайна и принципов, которые легли в основу современной эстетики продуктов. Возможно, вы уже замечали, как принципы минимализма и функциональности воплощаются в современных гаджетах, продуктах и интерьерах. Всё это во многом заслуга Рамса.⏱Читать статью
Фото недоступноПоказать в Telegram
Айтрекинг и юзабилити интерфейсов веб-сайтов
#почитать
Айтрекинг — это технология, позволяющая измерить и проанализировать, куда и как долго смотрит пользователь. В основе айтрекинга лежит использование специализированного оборудования и программного обеспечения для отслеживания движений глаз пользователя.⏱Читать статью
🔥 2❤ 1
Фото недоступноПоказать в Telegram
Анимации CSS, основанные на времени
#почитать
Использование времени для анимации очень часто встречается в шейдерных программах и различных других местах. CSS не может запустить таймер, как это делает JavaScript, но сегодня можно определить пользовательскую переменную с помощью CSS Houdini API для отслеживания времени в миллисекундах.⏱Читать статью
❤ 7👍 2🔥 1
В поисках площадок для практики в программировании? Вот список вебсайтов, которые помогут вам улучшить свои навыки, подготовиться к техническим собеседованиям и стать еще лучше!
▫️LeetCode
LeetCode предлагает широкий спектр задач по программированию, охватывающих такие области, как алгоритмы, базы данных и другие. Отличный ресурс для подготовки к техническим собеседованиям благодаря разнообразным задачам.
▫️HackerRank
На HackerRank вы найдете разнообразные задачи по программированию, созданные сообществом. Платформа позволяет сравнивать свои решения с решениями других пользователей, что помогает учиться на примерах.
▫️Codewars
Codewars идеально подходит для начинающих программистов. Платформа предлагает небольшие задачи, которые помогают постепенно развивать навыки программирования.
▫️TopCoder
Один из старейших сообществ по конкурентному программированию. TopCoder регулярно проводит конкурсы по разработке программного обеспечения и дизайну, что делает его отличной платформой для тех, кто хочет соревноваться и улучшать свои навыки.
▫️Codecademy
Codecademy предлагает интерактивные курсы и упражнения по программированию для начинающих и программистов среднего уровня. Платформа помогает изучать новые языки и технологии с нуля.
👍 6❤ 1🔥 1
Фото недоступноПоказать в Telegram
Неизвестно полезный CSS. Часть 3
#почитать
Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS-фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React-приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его. Сегодня мы рассмотрим: - возможность задать несколько фонов с помощью свойства background; - свойство display, которое позволяет сделать так, что свойства элемента будут влиять через потомка; - как заставить псевдо-элемент nth-child выбрать элементы без привязки к позиции; - где будет находиться элемент с position: absolute, если для него заданы свойства grid-column и grid-row.⏱Читать статью
🔥 6👍 2
Фото недоступноПоказать в Telegram
▫️ Бесплатный марафон по верстке сайта html/css/js для новичков
#посмотреть
Верстка сайта для всех, кто делает свои начальные шаги в верстке сайтов. В видео я подробно объясняю каждый этап разработки.⏱Смотреть на YouTube ⏱2 часа 15 минут
❤ 9👍 2
Фото недоступноПоказать в Telegram
Тенденции адаптивного и инклюзивного дизайна
#почитать
Здесь могло бы быть долгое вступление про то, как современные веб‑приложения прошли путь от простых макетов, ограниченных технологиями своего времени, до способных подстраиваться даже не под ограничения технологий, а под ограничения самих пользователей. Но сейчас важно совсем другое. Как ни крути, все пользователи разные, и иногда ограничения касаются их физических возможностей. Этими вопросами занимается адаптивный дизайн и, в частности, инклюзивный.⏱Читать статью
❤ 7👍 2🔥 1
Фото недоступноПоказать в Telegram
Стилизация участков текста с помощью CSS Custom Highlight API
#почитать
В этой статье я расскажу, как с помощью CSS Custom Highlight API можно стилизовать выделенные диапазоны текста, а также разберу теорию на практическом примере.⏱Читать статью
👍 8
Фото недоступноПоказать в Telegram
▫️ Google I/O и Config, Translation API, Figma, Invokers, бета React 19
#посмотреть
Также длинные альты, атрибуты и свойства.
⏱Смотреть на YouTube ⏱1 час 30 минут
❤ 7👍 2🔥 1
Фото недоступноПоказать в Telegram
Как мы создавали дизайн-систему
#почитать
Спойлер – в результате разработка фич стала быстрее в 2 раза, сборка дизайн-макетов ускорилась в 3-4 раза, а UI приложения удалось избавить от хаоса из рандомных шрифтов и иконок и унифицировать.
⏱Читать статью
❤ 8👍 2
Войдите и получите доступ к детальной информации
Мы откроем вам доступ после авторизации. Мы обещаем, это быстро!