Верстальщик от бога
Самый большой канал по верстке в телеграм. По крупицам собираем frontend-годноту из интернета. Чат верстальщиков: @godinhtmlchat По всем вопросам: @godinmedia
Більше
Сітка:12 222
Підписники
+1224 години
+967 днів
-5830 днів
Час активного постингу
Триває завантаження даних...
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 Нейминг HTML-тегов
#почитать
Речь пойдет именно о тегах с кастомными именами, не о веб-компонентах.
⏱Читать статью | 736 | 15 | Loading... |
02 Как я делал шрифтовые иконки. Совмещаем желание UX-дизайнеров и возможности фронтендеров
#почитать
Скажу сразу, что иконочные шрифты не всегда являются наиболее эффективным и надёжным вариантом, но они по-прежнему относительно просты и легки в реализации.
⏱Читать статью | 946 | 11 | Loading... |
03 🔤🔤🌌🔤🔤🔤🔤🔤 — канал с PM юмором
➡️ Подписаться | 1 035 | 7 | Loading... |
04 Заблуждения о Специфичности CSS
#почитать
▪️Специфичность — это десятичная оценка
▪️Использование атрибута style добавляет Специфичности
▪️Использование !important добавляет Специфичности
⏱Читать статью | 1 072 | 16 | Loading... |
05 Пишем веб-компонент для SVG-иконок
#почитать
Рассмотрим один из вариантов интеграции svg иконок в наш фронтенд проект используя веб-компоненты.
Основная идея компонента заключается в том, чтобы лениво подгружать в SVG спрайт иконки и переиспользовать уже загруженные иконки при необходимости.
Сами иконки будем вставлять в разметке в виде <svg-icon name="arrow-angle-down"> нам понадобится всего сотня строк кода.
⏱Читать статью | 1 164 | 30 | Loading... |
06 Каким было ваше первое место работы? Присоединяйтесь к обсуждению в комментариях
#discussion | 1 384 | 11 | Loading... |
07 Эффект размытия вместо тени на CSS
#почитать
С тенями в CSS все довольно просто: объявляете свойство box-shadow, задаете смещения тени, определяете размытие и задаете цвет. Это отличный способ придать глубину тому, что в остальном было бы плоским дизайном! Черпая вдохновение в тенях, автор статьи Яир Эвен Ор (Yair Even Or) создает нечто подобное, только с эффектом размытия вместо тени. В этой статье вы получите пошаговое объяснение того, как это делается с помощью комбинации масок, градиентов и старого доброго свойства backdrop-filter.
⏱Читать статью | 634 | 7 | Loading... |
08 Узнайте, как сделать ваш сайт быстрее и безопаснее, на бесплатном курсе Base cloudfort
Вас ждут 8 уроков с теорией и практикой, где опытные эксперты поделятся своими кейсами и реальными примерами. Обучение будет проходить в формате видеолекций и общения с преподавателями в чате, так что у вас всегда будет поддержка и ответы на вопросы.
Что вы изучите:
— Ускорение сайтов и защиту от DDoS-атак.
— Основы CDN и методы балансировки нагрузки.
— Принципы работы с медиахранилищем и адаптацией медиаконтента.
— Как запустить онлайн-трансляцию без лишних затрат.
Участники также получат бесплатный доступ к новому продукту cloudfort для защиты и ускорения сайтов. Сервис позволяет создавать S3-хранилища, ускорять веб-ресурсы и включать защиту от кибератак.
Регистрируйтесь на курс по ссылке.
Реклама ПАО «ВымпелКом», beeline.ru
erid: LjN8K9NV5 | 1 574 | 7 | Loading... |
09 Анимация элемента dialog - практикум
#почитать
Казалось бы, можно просто установить в CSS transition от 0 к 1 для opacity элемента dialog, но это не работает. Необходимо изучить @starting-style, а также ключевые слова overlay и allow-discrete.
⏱Читать статью | 1 328 | 24 | Loading... |
10 Непроизвольная тирания пользовательских интерфейсов
#почитать
Посыл этой статьи заключается в том, что одержимость лёгкими, «интуитивными» и, возможно, даже эффективными пользовательскими интерфейсами формирует слой мягкой тирании.
Такой слой я бы создал, будучи диктатором, стремящимся усладить общественность в подготовке к лишению её свобод в будущем.
Я бы так сильно привязал людей к нелепым ограничениям при использовании разных вещей, что подобное издевательство стало бы нормой.
⏱Читать статью | 1 526 | 11 | Loading... |
11 Media files | 1 420 | 1 | Loading... |
12 🎁 Готовый сайт Аспро со скидкой 30%
До 7 июля Аспро дарит скидку 30% на топовые интернет-магазины. При заказе в комплекте с 1С-Битрикс максимальная выгода — 34 900 ₽. Вводите промокод в форме на лендинге или корзине, чтобы получить скидку и запустить современный сайт:
VERSTKA30
Реклама: ООО "Аспро", erid 2Vtzqw75VXu | 1 424 | 1 | Loading... |
13 Bricks: подход к управлению интерфейсами
#почитать
Приходится много работать с разметкой страниц на сайте и экранах мобильного приложения, чтобы оперативно менять интерфейс под запросы пользователей. Часто даже мельчайшие изменения занимают значительное время, так как требуют работы с кодом и привлечения разработчиков. Чтобы оптимизировать процессы, мы решили создать платформу Bricks и управлять интерфейсами с её помощью.
⏱Читать статью | 1 450 | 18 | Loading... |
14 Как определить текущее местоположение пользователя на сайте
#почитать
Впервые за весь свой опыт работы frontend разработчиком я столкнулся с задачей определения города (решение применимо не только для города, но и страны, улицы и т.д.) текущего пользователя и, порыскав в интернете, находил лишь кусочки того, что мне нужно, поэтому, чтобы сэкономить время тех, кто столкнулся с похожей задачей решил опубликовать данную статью.
Прежде чем писать код, хотелось бы отметить, что моё решение не претендует на "чистое" и единственно-верное, поэтому если есть более гармоничное и красивое решение - используйте его (буду только рад если поделитесь им).
Если кому интересно, задача была реализована на Options API, фреймворка Vue, но сам код написан на чистом JS. Это может быть полезно и тем, кто пишет на React и т.д.
⏱Читать статью | 1 615 | 35 | Loading... |
15 Пятничное. Дитер Рамс: дизайнер, определивший современность
#почитать
Огромное влияние на индустрию дизайна, наш мир и наше ежедневное взаимодействие со всем вокруг оказал немецкий дизайнер Дитер Рамс. Для опытных дизайнеров имя Рамса давно стало синонимом иконического дизайна и принципов, которые легли в основу современной эстетики продуктов.
Возможно, вы уже замечали, как принципы минимализма и функциональности воплощаются в современных гаджетах, продуктах и интерьерах. Всё это во многом заслуга Рамса.
⏱Читать статью | 1 766 | 8 | Loading... |
16 Айтрекинг и юзабилити интерфейсов веб-сайтов
#почитать
Айтрекинг — это технология, позволяющая измерить и проанализировать, куда и как долго смотрит пользователь. В основе айтрекинга лежит использование специализированного оборудования и программного обеспечения для отслеживания движений глаз пользователя.
⏱Читать статью | 1 734 | 16 | Loading... |
17 Анимации CSS, основанные на времени
#почитать
Использование времени для анимации очень часто встречается в шейдерных программах и различных других местах. CSS не может запустить таймер, как это делает JavaScript, но сегодня можно определить пользовательскую переменную с помощью CSS Houdini API для отслеживания времени в миллисекундах.
⏱Читать статью | 1 704 | 22 | Loading... |
18 В поисках площадок для практики в программировании? Вот список вебсайтов, которые помогут вам улучшить свои навыки, подготовиться к техническим собеседованиям и стать еще лучше!
▫️LeetCode
LeetCode предлагает широкий спектр задач по программированию, охватывающих такие области, как алгоритмы, базы данных и другие. Отличный ресурс для подготовки к техническим собеседованиям благодаря разнообразным задачам.
▫️HackerRank
На HackerRank вы найдете разнообразные задачи по программированию, созданные сообществом. Платформа позволяет сравнивать свои решения с решениями других пользователей, что помогает учиться на примерах.
▫️Codewars
Codewars идеально подходит для начинающих программистов. Платформа предлагает небольшие задачи, которые помогают постепенно развивать навыки программирования.
▫️TopCoder
Один из старейших сообществ по конкурентному программированию. TopCoder регулярно проводит конкурсы по разработке программного обеспечения и дизайну, что делает его отличной платформой для тех, кто хочет соревноваться и улучшать свои навыки.
▫️Codecademy
Codecademy предлагает интерактивные курсы и упражнения по программированию для начинающих и программистов среднего уровня. Платформа помогает изучать новые языки и технологии с нуля. | 1 505 | 34 | Loading... |
19 Неизвестно полезный CSS. Часть 3
#почитать
Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS-фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React-приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.
Сегодня мы рассмотрим:
- возможность задать несколько фонов с помощью свойства background;
- свойство display, которое позволяет сделать так, что свойства элемента будут влиять через потомка;
- как заставить псевдо-элемент nth-child выбрать элементы без привязки к позиции;
- где будет находиться элемент с position: absolute, если для него заданы свойства grid-column и grid-row.
⏱Читать статью | 1 619 | 35 | Loading... |
20 ▫️ Бесплатный марафон по верстке сайта html/css/js для новичков
#посмотреть
Верстка сайта для всех, кто делает свои начальные шаги в верстке сайтов. В видео я подробно объясняю каждый этап разработки.
⏱Смотреть на YouTube ⏱2 часа 15 минут | 1 663 | 23 | Loading... |
21 Тенденции адаптивного и инклюзивного дизайна
#почитать
Здесь могло бы быть долгое вступление про то, как современные веб‑приложения прошли путь от простых макетов, ограниченных технологиями своего времени, до способных подстраиваться даже не под ограничения технологий, а под ограничения самих пользователей. Но сейчас важно совсем другое. Как ни крути, все пользователи разные, и иногда ограничения касаются их физических возможностей. Этими вопросами занимается адаптивный дизайн и, в частности, инклюзивный.
⏱Читать статью | 2 077 | 22 | Loading... |
22 Стилизация участков текста с помощью CSS Custom Highlight API
#почитать
В этой статье я расскажу, как с помощью CSS Custom Highlight API можно стилизовать выделенные диапазоны текста, а также разберу теорию на практическом примере.
⏱Читать статью | 1 930 | 19 | Loading... |
23 ▫️ Google I/O и Config, Translation API, Figma, Invokers, бета React 19
#посмотреть
Также длинные альты, атрибуты и свойства.
⏱Смотреть на YouTube ⏱1 час 30 минут | 1 757 | 13 | Loading... |
24 Как мы создавали дизайн-систему
#почитать
Спойлер – в результате разработка фич стала быстрее в 2 раза, сборка дизайн-макетов ускорилась в 3-4 раза, а UI приложения удалось избавить от хаоса из рандомных шрифтов и иконок и унифицировать.
⏱Читать статью | 1 814 | 22 | Loading... |
25 Когда во всех вакансиях просят минимум 10-15 лет опыта и возраст до 25-30 лет))) | 1 818 | 11 | Loading... |
26 Media files | 1 819 | 5 | Loading... |
27 Создали сайт, чтобы вам не пришлось 😊
Представляем готовую инновационную платформу для запуска сайта — Аспро: Приорити 2.0. На ней пользователи могут показать экспертность, собирать заявки и получать оплату. Только для подписчиков канала «Верстальщик от Бога» дарим скидку 20% по промокоду: VERSTKA20.
Реклама. ООО "Аспро", ИНН 7453223946, erid: LjN8KKRBR | 1 908 | 5 | Loading... |
28 10 непопуляризованных UI-элементов, улучшающих взаимодействие
#почитать
1. Микроинтеракции для Форм Обратной Связи
2. Персонализированные Тултипы
3. Индикаторы Прогресса для Длинных Форм
4. Гибкие Фильтры Контента
5. Ленивая Загрузка с Анимацией
6. Плавающие Кнопки Действия (Floating Action Buttons)
7. Кастомные Скроллбары
8. Интерактивные Иллюстрации
9. Свайп-карусели в Веб-Дизайне
10. Коллапсируемые Секции Контента (Accordion)
⏱Читать статью | 1 764 | 31 | Loading... |
29 Пятница. Аргументы против самозакрывающихся тегов в HTML
#почитать
Хотя мы, как индустрия, в целом отказались от большинства требований XHTML, это оформление самозакрывающегося тега, похоже, сохранилось, несмотря на то, что является пережитком спецификации, которая была отменена более 10 лет назад. Некоторые даже включают пробел до /, который был добавлен для совместимости с движком браузера еще в прошлом тысячелетии.
⏱Читать статью | 2 002 | 11 | Loading... |
30 «Всё — прямоугольник». Блочная модель
#почитать
Каждый элемент на веб-странице — это прямоугольник, к которому во время отрисовки браузеры применяют CSS-свойства. Чтобы конечные размеры элементов не были для вас сюрпризом и вы точно понимали, из чего они складываются, нужно разобраться с одной из основных концепций вёрстки — блочной моделью.
⏱Читать статью | 1 943 | 19 | Loading... |
31 Потрясающий CSS Easing - новая функция linear()
#почитать
"Лучшая анимация - это та, которая остается в тени". Одна из самых важных концепций моушн дизайна в вебе - сделать так, чтобы моушн "чувствовался правильно". В то же время CSS был довольно ограничен в создании анимации и переходов, которые выглядят естественно и ненавязчиво для пользователя.
К счастью, ситуация меняется. Сегодня мы рассмотрим новые возможности анимации, появившиеся в CSS. В частности, я хочу продемонстрировать супер возможности linear() - новой функции для анимации, которая в настоящее время определена в спецификации CSS Easing Level 2 в редакции Editor's Draft. Вместе мы изучим ее способность создавать кастомные кривые анимации.
⏱Читать статью | 1 865 | 15 | Loading... |
Фото недоступнеДивитись в Telegram
Нейминг HTML-тегов
#почитать
Речь пойдет именно о тегах с кастомными именами, не о веб-компонентах.
⏱Читать статью
👍 8🔥 1
Фото недоступнеДивитись в Telegram
Как я делал шрифтовые иконки. Совмещаем желание UX-дизайнеров и возможности фронтендеров
#почитать
Скажу сразу, что иконочные шрифты не всегда являются наиболее эффективным и надёжным вариантом, но они по-прежнему относительно просты и легки в реализации.⏱Читать статью
💘 5🔥 3
Фото недоступнеДивитись в Telegram
🔤🔤🌌🔤🔤🔤🔤🔤 — канал с PM юмором
➡️ Подписаться
😁 10👏 3🤬 2👎 1
Фото недоступнеДивитись в Telegram
Заблуждения о Специфичности CSS
#почитать
▪️Специфичность — это десятичная оценка
▪️Использование атрибута style добавляет Специфичности
▪️Использование !important добавляет Специфичности
⏱Читать статью
😁 6🔥 2
Фото недоступнеДивитись в Telegram
Пишем веб-компонент для SVG-иконок
#почитать
Рассмотрим один из вариантов интеграции svg иконок в наш фронтенд проект используя веб-компоненты. Основная идея компонента заключается в том, чтобы лениво подгружать в SVG спрайт иконки и переиспользовать уже загруженные иконки при необходимости. Сами иконки будем вставлять в разметке в виде <svg-icon name="arrow-angle-down"> нам понадобится всего сотня строк кода.⏱Читать статью
👍 7🔥 1
Фото недоступнеДивитись в Telegram
Каким было ваше первое место работы? Присоединяйтесь к обсуждению в комментариях
#discussion
👍 12😁 7👎 1
Фото недоступнеДивитись в Telegram
Эффект размытия вместо тени на CSS
#почитать
С тенями в CSS все довольно просто: объявляете свойство box-shadow, задаете смещения тени, определяете размытие и задаете цвет. Это отличный способ придать глубину тому, что в остальном было бы плоским дизайном! Черпая вдохновение в тенях, автор статьи Яир Эвен Ор (Yair Even Or) создает нечто подобное, только с эффектом размытия вместо тени. В этой статье вы получите пошаговое объяснение того, как это делается с помощью комбинации масок, градиентов и старого доброго свойства backdrop-filter.⏱Читать статью
👍 4
Фото недоступнеДивитись в Telegram
Узнайте, как сделать ваш сайт быстрее и безопаснее, на бесплатном курсе Base cloudfort
Вас ждут 8 уроков с теорией и практикой, где опытные эксперты поделятся своими кейсами и реальными примерами. Обучение будет проходить в формате видеолекций и общения с преподавателями в чате, так что у вас всегда будет поддержка и ответы на вопросы.
Что вы изучите:
— Ускорение сайтов и защиту от DDoS-атак.
— Основы CDN и методы балансировки нагрузки.
— Принципы работы с медиахранилищем и адаптацией медиаконтента.
— Как запустить онлайн-трансляцию без лишних затрат.
Участники также получат бесплатный доступ к новому продукту cloudfort для защиты и ускорения сайтов. Сервис позволяет создавать S3-хранилища, ускорять веб-ресурсы и включать защиту от кибератак.
Регистрируйтесь на курс по ссылке.
Реклама ПАО «ВымпелКом», beeline.ru
erid: LjN8K9NV5
👍 7🔥 2🎉 2👎 1
Фото недоступнеДивитись в Telegram
Анимация элемента dialog - практикум
#почитать
Казалось бы, можно просто установить в CSS transition от 0 к 1 для opacity элемента dialog, но это не работает. Необходимо изучить @starting-style, а также ключевые слова overlay и allow-discrete.⏱Читать статью
👍 9
Фото недоступнеДивитись в Telegram
Непроизвольная тирания пользовательских интерфейсов
#почитать
Посыл этой статьи заключается в том, что одержимость лёгкими, «интуитивными» и, возможно, даже эффективными пользовательскими интерфейсами формирует слой мягкой тирании.
Такой слой я бы создал, будучи диктатором, стремящимся усладить общественность в подготовке к лишению её свобод в будущем.
Я бы так сильно привязал людей к нелепым ограничениям при использовании разных вещей, что подобное издевательство стало бы нормой.
⏱Читать статью
🔥 7👎 4
Оберіть інший тариф
На вашому тарифі доступна аналітика тільки для 5 каналів. Щоб отримати більше — оберіть інший тариф.