🙃
Верстальщик от бога
@godinhtml
Регистрация в перечне РКН:
https://knd.gov.ru/license?id=6757e1989d804a279b283165®istryType=bloggersPermission
Самый большой канал по верстке в телеграм.
Чат верстальщиков: @godinhtmlchat
По всем вопросам: @godinmedia
Верстальщик от бога (Russian)
Вы когда-нибудь задумывались, что верстка веб-сайтов может быть искусством? Если да, то канал "Верстальщик от бога" (@godinhtml) именно для вас. Этот канал является самым большим каналом по верстке в Telegram, где собирается frontend-годнота из интернета. Здесь вы найдете крупицы знаний, советы и лучшие практики по верстке, которые помогут вам стать настоящим профессионалом.
Кроме того, вы можете присоединиться к чату верстальщиков по ссылке @godinhtmlchat, где можно обсудить интересующие вас вопросы и делиться опытом с другими участниками канала. Для всех остальных вопросов и предложений вы всегда можете обратиться к администраторам по контакту @godinmedia.
Не упустите возможность улучшить свои навыки в верстке и узнать последние тенденции в этой области - присоединяйтесь к каналу "Верстальщик от бога" прямо сейчас!
Верстальщик от бога
10 Jan, 14:02
#посмотреть
В спецификации CSS Cascading and Inheritance Level 5 появилась сущность, которая сильно повлияет на способ организации CSS-кода в проектах. Эта сущность — слои, которые задаются директивой @layer. С введением слоёв методологии вроде БЭМ становятся не такими уж и универсальными.
Верстальщик от бога
25 Dec, 16:01
Bootstrap и CSS-препроцессор Sass
Автор: Прохоренок Н. А.
Год издания: 2021
#css #ru
Скачать книгу
Автор: Прохоренок Н. А.
Год издания: 2021
#css #ru
Скачать книгу
Верстальщик от бога
23 Dec, 10:14
Векторизация с помощью Three.js
#почитать
Преобразовать картинки разных форматов в векторное изображение.
⏱ Читать статью
#почитать
Преобразовать картинки разных форматов в векторное изображение.
Верстальщик от бога
20 Dec, 11:07
47 Best Glowing Effects in CSS
#почитать
Modern websites often feature visually appealing components like buttons, navigation bars, headers, hero sections, product galleries, and testimonials to captivate users. These components are styled intentionally to enhance user engagement and improve the overall user experience. One popular way to achieve this is by using the glowing effect.
The glowing effect in CSS is a powerful tool to make elements stand out and create a striking visual appeal. By applying subtle or vibrant glows to text, buttons, or other elements, developers can draw attention to key areas of a webpage.
⏱ Читать статью
#почитать
Modern websites often feature visually appealing components like buttons, navigation bars, headers, hero sections, product galleries, and testimonials to captivate users. These components are styled intentionally to enhance user engagement and improve the overall user experience. One popular way to achieve this is by using the glowing effect.
The glowing effect in CSS is a powerful tool to make elements stand out and create a striking visual appeal. By applying subtle or vibrant glows to text, buttons, or other elements, developers can draw attention to key areas of a webpage.
Верстальщик от бога
19 Dec, 11:19
CSS-анимации: 20 полезных библиотек
#почитать
Анимации в веб-дизайне давно стали стандартом. Они делают интерфейсы более живыми, помогают привлечь внимание к важным элементам и улучшают пользовательский опыт. Эти 20 библиотек помогут быстро добавить анимации в ваши проекты.
⏱ Читать статью
#почитать
Анимации в веб-дизайне давно стали стандартом. Они делают интерфейсы более живыми, помогают привлечь внимание к важным элементам и улучшают пользовательский опыт. Эти 20 библиотек помогут быстро добавить анимации в ваши проекты.
Верстальщик от бога
19 Dec, 07:30
Base Virtualization — бесплатный курс для тех, кто хочет погрузиться в облачные технологии
Уже используете облака, только планируете переезд или просто хотите разобраться в терминологии? Что такое IaaS, SaaS, PaaS? В чем разница между частным, публичным и гибридным облаками? Что такое миграция и как организовать бесшовный переезд в облако? Об этом и о многом другом узнаете в новом курсе.
Что вас ждет:
— 10 уроков о виртуализации и облачной инфраструктуре.
— Доступ к материалам курса без ограничений.
— Поддержка и общение с экспертами в Telegram-сообществе.
Зарегистрируйтесь на курс по ссылке и начните погружение в виртуализацию прямо сейчас.
Реклама ПАО «ВымпелКом», beeline.ru
Уже используете облака, только планируете переезд или просто хотите разобраться в терминологии? Что такое IaaS, SaaS, PaaS? В чем разница между частным, публичным и гибридным облаками? Что такое миграция и как организовать бесшовный переезд в облако? Об этом и о многом другом узнаете в новом курсе.
Что вас ждет:
— 10 уроков о виртуализации и облачной инфраструктуре.
— Доступ к материалам курса без ограничений.
— Поддержка и общение с экспертами в Telegram-сообществе.
Зарегистрируйтесь на курс по ссылке и начните погружение в виртуализацию прямо сейчас.
Реклама ПАО «ВымпелКом», beeline.ru
Верстальщик от бога
16 Dec, 05:02
Пишем одностраничное приложение с помощью htmx
#почитать
JS-библиотеку htmx воспринимают как средство, которое спасает интернет от одностраничных приложений. Всё дело в том, что React поглотил разработчиков своей сложностью (так говорят), а htmx предлагает столь желанное спасение.
Создатель htmx, Карсон Гросс, иронично объясняет эту динамику библиотеки так:
Нет, здесь у нас диалектика Гегеля:
тезис: традиционные многостраничные приложения,
антитезис: одностраничные приложения,
синтез (возвышенная форма): гипермедиа-приложения с островками интерактивности.
⏱ Читать статью
#почитать
JS-библиотеку htmx воспринимают как средство, которое спасает интернет от одностраничных приложений. Всё дело в том, что React поглотил разработчиков своей сложностью (так говорят), а htmx предлагает столь желанное спасение.
Создатель htmx, Карсон Гросс, иронично объясняет эту динамику библиотеки так:
Нет, здесь у нас диалектика Гегеля:
тезис: традиционные многостраничные приложения,
антитезис: одностраничные приложения,
синтез (возвышенная форма): гипермедиа-приложения с островками интерактивности.
Верстальщик от бога
12 Dec, 12:31
Бесплатный курс Cloud DevSecOps — ваш шаг к безопасной разработке
Каждая строка кода — это потенциальная уязвимость. Если вы DevOps-инженер или разработчик, который хочет не просто писать код, а создавать защищенные приложения, этот курс для вас.
Вас научат не допускать ошибок, которые могут привести к утечкам данных и уязвимостям. Познакомят с инструментами для предотвращения угроз и создания безопасного ПО.
Что вас ждет:
— 10 уроков, которые помогут разобраться с DevSecOps.
— Практика с примерами кода на Java и разбором ошибок.
— Поддержка экспертов и активное комьюнити.
Учитесь бесплатно и в удобном для вас ритме — записывайтесь на курс Cloud DevSecOps по ссылке.
Реклама ПАО «ВымпелКом», beeline.ru
erid: LjN8K58hJ
Каждая строка кода — это потенциальная уязвимость. Если вы DevOps-инженер или разработчик, который хочет не просто писать код, а создавать защищенные приложения, этот курс для вас.
Вас научат не допускать ошибок, которые могут привести к утечкам данных и уязвимостям. Познакомят с инструментами для предотвращения угроз и создания безопасного ПО.
Что вас ждет:
— 10 уроков, которые помогут разобраться с DevSecOps.
— Практика с примерами кода на Java и разбором ошибок.
— Поддержка экспертов и активное комьюнити.
Учитесь бесплатно и в удобном для вас ритме — записывайтесь на курс Cloud DevSecOps по ссылке.
Реклама ПАО «ВымпелКом», beeline.ru
erid: LjN8K58hJ
Верстальщик от бога
12 Dec, 10:34
CSS Wrapped 2024
#почитать
Join the Chrome DevRel team and a skateboarding Chrome Dino on a journey through the forest, over the mountains, and across the seas as they explore the latest CSS launched for Chrome and the web platform in 2024.
⏱ Посмотреть
#почитать
Join the Chrome DevRel team and a skateboarding Chrome Dino on a journey through the forest, over the mountains, and across the seas as they explore the latest CSS launched for Chrome and the web platform in 2024.
Верстальщик от бога
11 Dec, 05:15
Стилизация meter
#почитать
Элемент применяется для наглядного представления числа, лежащего в заданном диапазоне. Отображается в виде горизонтальной полосы, где цветным фоном отмечается текущее значение.
⏱ Читать статью
#почитать
Элемент применяется для наглядного представления числа, лежащего в заданном диапазоне. Отображается в виде горизонтальной полосы, где цветным фоном отмечается текущее значение.
Верстальщик от бога
10 Dec, 10:35
Я вообще обожаю описывать Readme файл и кайфую, когда всё красиво, чётко и ясно. Мне трудно понять людей, которые не ведут документируют собственные проекты, ведь это помогает не только другим, но и автору кода!
Например, недавно я создавала первый проект с Docker, Jenkins и генерацией отчета тестирования. Захотела сделать всё «по-умному», чтобы джобы сами работали и всё в этом духе. Так вот, мой Readme файл пригодился не только девопсу разобраться с моим кодом и помочь, но и мне! Потому что все эти команды запомнить не очень просто, а благодаря документации всё становится структурированным (это моё личное наслаждение)
Я пишу Readme по всем канонам: с тайтлами, изображениями, блоками кода, сносками и так далее. И вам советую! Потому что таким образом вашу документацию будет проще читать и использовать.
А возвращаясь к GitHub README файлу, здесь вообще большое пространство для фантазии. Потому что это ваша презентация, и вы имеете право писать всё, что угодно, в любом стиле.
А именно поэтому я хочу поделиться подборкой полезных ресурсов, которые помогут сделать вашу «визитную карточку» на GitHub более привлекательной:
▫️awesome-github-profile-readme
▫️creative-profile-readme
▫️skill-icons
▫️github-readme-stats
▫️cicirello/user-statistician
▫️dec0dOS/amazing-github-template
▫️markdown-badges
(источник)
Верстальщик от бога
09 Dec, 11:33
JavaScript. Дополнительные уроки
для начинающих
Автор: Владимир Дронов
Год издания: 2022
#javascript #ru
Скачать книгу
для начинающих
Автор: Владимир Дронов
Год издания: 2022
#javascript #ru
Скачать книгу
Верстальщик от бога
06 Dec, 10:39
Что нужно знать про OOCSS и организацию CSS
#почитать
Один из подходов к организации CSS-кода, отличительной чертой которого является разделение структуры элемента и его оформления.
⏱ Читать статью
#почитать
Один из подходов к организации CSS-кода, отличительной чертой которого является разделение структуры элемента и его оформления.
Верстальщик от бога
03 Dec, 05:10
Веб-дизайн для начинающих
Автор: Роббинс Дженнифер
Год издания: 2021
#css #ru
Скачать книгу
Автор: Роббинс Дженнифер
Год издания: 2021
#css #ru
Скачать книгу
Верстальщик от бога
02 Dec, 10:58
Настройка цитат в HTML и CSS
#почитать
Цитаты позволяют выделять часть текста и придавать особое значение.
⏱ Читать статью
#почитать
Цитаты позволяют выделять часть текста и придавать особое значение.
Верстальщик от бога
29 Nov, 10:56
Как читать W3C-спецификации
#почитать
▫️Поймите, что спецификации W3C написаны для разработчиков реализаций, а не для конечных пользователей.
▫️Во многих спецификациях есть раздел с описанием, как они организованы и как их нужно читать.
▫️Знайте словарь, используемый в спецификациях.
▫️Помните, что не нужно читать каждое слово. Бегло просматривайте в поисках частей, которые имеют смысл.
▫️Избегайте обсуждений пространств имен.
▫️Научитесь читать BNF — он используется во многих местах.
▫️Научитесь читать DTD для ответов на вопросы по синтаксису.
▫️Если технология поддерживает скрипты, информация находится в привязках.
⏱ Читать статью
#почитать
▫️Поймите, что спецификации W3C написаны для разработчиков реализаций, а не для конечных пользователей.
▫️Во многих спецификациях есть раздел с описанием, как они организованы и как их нужно читать.
▫️Знайте словарь, используемый в спецификациях.
▫️Помните, что не нужно читать каждое слово. Бегло просматривайте в поисках частей, которые имеют смысл.
▫️Избегайте обсуждений пространств имен.
▫️Научитесь читать BNF — он используется во многих местах.
▫️Научитесь читать DTD для ответов на вопросы по синтаксису.
▫️Если технология поддерживает скрипты, информация находится в привязках.
Верстальщик от бога
28 Nov, 17:44
#почитать
Фундаментальный практикум на русском, по книге CSS Animation 101
Видеопрактика:
Верстальщик от бога
28 Nov, 13:42
Фриланс — это свобода и возможность работать из любой точки мира. Но все мы знаем, что за этой свободой стоит множество подводных камней, связанных с получением оплат и легализацией доходов от иностранных клиентов. Как безопасно и быстро получать деньги за свои услуги, работая с зарубежными клиентами по всему миру?
Mellow — ваша надежная платформа для получения платежей с любой точки мира. А главное, безопасно и быстро!
С помощью платформы вы можете:
▫️Получать деньги от зарубежных клиентов с гарантией безопасности.
▫️Иметь полный пакет документов для налоговой: договор, счет и акт выполненных работ
▫️Легально выводить деньги на счёт ИП, или банковскую карточку или электронный кошелек.
Безопасная сделка внутри системы защитит ваши деньги, а бесплатные услуги по оформлению документов для налоговых органов сделают вашу жизнь проще.
Проверьте сами, насколько легко можно работать с клиентами из США, Европы и других стран.
💬 Узнать больше о Mellow, зарегистрироваться и получать деньги можно здесь https://clc.to/RV5uyg
Реклама. Рекламодатель "FRWD Limited" erid: 2VtzqvQj1Rq
Mellow — ваша надежная платформа для получения платежей с любой точки мира. А главное, безопасно и быстро!
С помощью платформы вы можете:
▫️Получать деньги от зарубежных клиентов с гарантией безопасности.
▫️Иметь полный пакет документов для налоговой: договор, счет и акт выполненных работ
▫️Легально выводить деньги на счёт ИП, или банковскую карточку или электронный кошелек.
Безопасная сделка внутри системы защитит ваши деньги, а бесплатные услуги по оформлению документов для налоговых органов сделают вашу жизнь проще.
Проверьте сами, насколько легко можно работать с клиентами из США, Европы и других стран.
💬 Узнать больше о Mellow, зарегистрироваться и получать деньги можно здесь https://clc.to/RV5uyg
Реклама. Рекламодатель "FRWD Limited" erid: 2VtzqvQj1Rq
Верстальщик от бога
28 Nov, 10:55
Elastic Overflow Scrolling
#почитать
Для начала понадобится какой-то элемент, выступающий в качестве контейнера для прокручиваемого контента. Конечно, можно JS, но это потребует добавления слушателей прокрутки или комбинации событий pointerDown, pointerUp и pointerMove, не говоря уже об отслеживании положения, инерционного движения и т. д. Идеальным было бы решение на CSS, и вот оно
⏱ Читать статью
#почитать
Для начала понадобится какой-то элемент, выступающий в качестве контейнера для прокручиваемого контента. Конечно, можно JS, но это потребует добавления слушателей прокрутки или комбинации событий pointerDown, pointerUp и pointerMove, не говоря уже об отслеживании положения, инерционного движения и т. д. Идеальным было бы решение на CSS, и вот оно
Верстальщик от бога
27 Nov, 10:54
Семантическая вёрстка
#почитать
Подход к разметке, который опирается не на содержание сайта, а на смысловое предназначение каждого блока.
⏱ Читать статью
#почитать
Подход к разметке, который опирается не на содержание сайта, а на смысловое предназначение каждого блока.
Верстальщик от бога
26 Nov, 10:47
Адаптивная вёрстка сайта
#почитать
▫️Прочность
▫️Относительность единиц измерения
▫️Использование контрольных точек
▫️Максимальные и минимальные значения
▫️Вложенность объектов
▫️Правильные шрифты
▫️Грамотное использование графики
▫️Выдерживание размеров макетов
⏱ Читать статью
#почитать
▫️Прочность
▫️Относительность единиц измерения
▫️Использование контрольных точек
▫️Максимальные и минимальные значения
▫️Вложенность объектов
▫️Правильные шрифты
▫️Грамотное использование графики
▫️Выдерживание размеров макетов
Верстальщик от бога
25 Nov, 10:50
Фоны для блочной модели
#почитать
Можно ограничить распространение background-image элемента с помощью background-clip. Это означает, что можно применить различные фоны, скажем, к padding и border.
⏱ Читать статью
#почитать
Можно ограничить распространение background-image элемента с помощью background-clip. Это означает, что можно применить различные фоны, скажем, к padding и border.
Верстальщик от бога
22 Nov, 10:46
CSS по БЭМ. Описание с примерами
#почитать
В БЭМ не используют селекторы тегов и идентификаторов. Стили блоков и элементов описываются через селекторы классов.
⏱ Читать статью
#почитать
В БЭМ не используют селекторы тегов и идентификаторов. Стили блоков и элементов описываются через селекторы классов.
Верстальщик от бога
21 Nov, 10:23
Определение типа с @property
#почитать
Большой гайд.
⏱ Читать статью
#почитать
Большой гайд.
Верстальщик от бога
20 Nov, 10:57
Переходы и анимация
#почитать
Эволюцией CSS3 стала возможность задавать поведение для переходов и анимации. Фронтенд-разработчики много лет просили реализовать эти взаимодействия внутри HTML и CSS, без использования JavaScript или Flash.
С помощью переходов CSS3 у вас есть потенциал менять внешний вид и поведение элемента всякий раз, когда происходит изменение его состояния, к примеру, когда на элемент наводится курсор, он получает фокус, становится активным или к элементу происходит переход по ссылке.
Анимация в CSS3 позволяет менять внешний вид и поведение элемента с помощью нескольких ключевых кадров. Переходы обеспечивают смену от одного состояния к другому, в то время как анимация может установить несколько точек перехода через разные ключевые кадры.
⏱ Быстрый гайд WebRef
#почитать
Эволюцией CSS3 стала возможность задавать поведение для переходов и анимации. Фронтенд-разработчики много лет просили реализовать эти взаимодействия внутри HTML и CSS, без использования JavaScript или Flash.
С помощью переходов CSS3 у вас есть потенциал менять внешний вид и поведение элемента всякий раз, когда происходит изменение его состояния, к примеру, когда на элемент наводится курсор, он получает фокус, становится активным или к элементу происходит переход по ссылке.
Анимация в CSS3 позволяет менять внешний вид и поведение элемента с помощью нескольких ключевых кадров. Переходы обеспечивают смену от одного состояния к другому, в то время как анимация может установить несколько точек перехода через разные ключевые кадры.
Верстальщик от бога
19 Nov, 05:10
Справочник JavaScript
Авторы: Никольский А.П.,
Дубовик Е.В.
Год издания: 2021
#javascript #ru
Скачать книгу
Авторы: Никольский А.П.,
Дубовик Е.В.
Год издания: 2021
#javascript #ru
Скачать книгу
Верстальщик от бога
18 Nov, 10:45
Всё о селекторах в CSS: от основ до высшего пилотажа
#почитать
Быстрый гайд от МТС.
⏱ Читать статью
#почитать
Быстрый гайд от МТС.
Верстальщик от бога
15 Nov, 10:43
Комбинированные селекторы
#почитать
Иногда при написании стилей мы хотим обратиться к селектору более точно, чем просто по имени класса или тега. Для этого можно использовать различные комбинации.
⏱ Читать статью
#почитать
Иногда при написании стилей мы хотим обратиться к селектору более точно, чем просто по имени класса или тега. Для этого можно использовать различные комбинации.
Верстальщик от бога
14 Nov, 10:37
Псевдокласс :has()
#почитать
В CSS не существует селектора родителя, позволяющего применить стиль к родителю при наличии у него указанного дочернего элемента. Роль такого селектора выполняет псевдокласс :has().
Псевдокласс :has() применяет стилевые правила к элементу, если у него есть указанный потомок или родственный элемент. Это даёт возможность задавать стили родителя на основе его дочерних элементов.
⏱ Читать статью
#почитать
В CSS не существует селектора родителя, позволяющего применить стиль к родителю при наличии у него указанного дочернего элемента. Роль такого селектора выполняет псевдокласс :has().
Псевдокласс :has() применяет стилевые правила к элементу, если у него есть указанный потомок или родственный элемент. Это даёт возможность задавать стили родителя на основе его дочерних элементов.
Верстальщик от бога
13 Nov, 10:32
Стилевая функция rgb()
#почитать
Цвет в виде шестнадцатеричного значения не всегда удобен для использования из-за сложности перевода десятичных чисел в шестнадцатеричные. В качестве альтернативы в CSS имеется стилевая функция rgb(), позволяющая задавать компоненты цвета в виде десятичных чисел.
Сама функция rgb() принимается в качестве значения стилевого свойства и позволяет установить цвет фона или текста с помощью цветовой модели RGB. В настоящий момент функция rgb() поддерживает два синтаксиса, несколько различающихся между собой: традиционный и современный.
⏱ Читать статью
#почитать
Цвет в виде шестнадцатеричного значения не всегда удобен для использования из-за сложности перевода десятичных чисел в шестнадцатеричные. В качестве альтернативы в CSS имеется стилевая функция rgb(), позволяющая задавать компоненты цвета в виде десятичных чисел.
Сама функция rgb() принимается в качестве значения стилевого свойства и позволяет установить цвет фона или текста с помощью цветовой модели RGB. В настоящий момент функция rgb() поддерживает два синтаксиса, несколько различающихся между собой: традиционный и современный.
Верстальщик от бога
12 Nov, 10:41
Кратко о методологиях объектно-ориентированного CSS: OOCSS, SMACSS, BEM и SASS
#почитать
Многие девелоперы, даже имея за плечами не один успешно выполненный коммерческий проект не оставляют поиски наилучшего способа организации стилей в макете. И большинство из них остановились на синтезе OOCSS, SMACSS, BEM и SASS. В этой статье мы не только поговорим о том, что из себя представляет правильный CSS.
⏱ Читать статью
#почитать
Многие девелоперы, даже имея за плечами не один успешно выполненный коммерческий проект не оставляют поиски наилучшего способа организации стилей в макете. И большинство из них остановились на синтезе OOCSS, SMACSS, BEM и SASS. В этой статье мы не только поговорим о том, что из себя представляет правильный CSS.
Верстальщик от бога
11 Nov, 05:19
JavaScript с нуля
Автор: Кирупа Чиннатхамби
Год издания: 2021
#javascript #ru
Скачать книгу
Автор: Кирупа Чиннатхамби
Год издания: 2021
#javascript #ru
Скачать книгу
Верстальщик от бога
08 Nov, 10:30
Синус и косинус в веб-дизайне
#почитать
В CSS добавились новые стилевые тригонометрические функции, такие как sin(), cos(), tan() и др. В физике, математике и программировании, понятно, тригонометрические функции востребованы и нужны для различных вычислений. Но где их можно применять в веб-дизайне? В итоге появление всяких синусов и косинусов вызвало недоумение у многих веб-разработчиков.
⏱ Читать статью
#почитать
В CSS добавились новые стилевые тригонометрические функции, такие как sin(), cos(), tan() и др. В физике, математике и программировании, понятно, тригонометрические функции востребованы и нужны для различных вычислений. Но где их можно применять в веб-дизайне? В итоге появление всяких синусов и косинусов вызвало недоумение у многих веб-разработчиков.
Верстальщик от бога
07 Nov, 05:09
Специфичность в CSS
#почитать
Специфичность в CSS определяет, как браузеры определяют важность, актуальность и «старшинство» стилей, то есть как разрешаются уонфликтующие стили.
⏱ Читать статью
#почитать
Специфичность в CSS определяет, как браузеры определяют важность, актуальность и «старшинство» стилей, то есть как разрешаются уонфликтующие стили.
Верстальщик от бога
06 Nov, 10:45
25 передовых CSS-техник
#почитать
scroll-behavior: smooth и так далее
⏱ Читать
#почитать
scroll-behavior: smooth и так далее
Верстальщик от бога
05 Nov, 05:09
Справочник HTML
Кратко, быстро, под рукой
Автор: Кириченко А.В.
Год издания: 2021
#html #ru
Скачать книгу
Кратко, быстро, под рукой
Автор: Кириченко А.В.
Год издания: 2021
#html #ru
Скачать книгу
Верстальщик от бога
04 Nov, 05:11
Изображения. Быстрый бесплатный курс для новых фронтендеров
#почитать
Курс от знакомства с элементом и до CDN-сетей доставки.
⏱ Читать
#почитать
Курс от знакомства с элементом и до CDN-сетей доставки.
Верстальщик от бога
01 Nov, 05:21
Сократить HTML-код и писать только на CSS
#почитать
Вооружившись принципом DRY.
⏱ Читать статью
#почитать
Вооружившись принципом DRY.
Верстальщик от бога
31 Oct, 10:42
Ключи в JavaScript фреймворках и библиотеках
#почитать
"Ключи" в JavaScript фреймворках и библиотеках, зачем они используются и как помогают при работе с DOM.
⏱ Читать статью
#почитать
"Ключи" в JavaScript фреймворках и библиотеках, зачем они используются и как помогают при работе с DOM.
Верстальщик от бога
30 Oct, 10:59
Как работать с box shadows
#почитать
В инструментах наподобие Photoshop, Gimp, Figma и CSS есть множество разных реализаций фильтра отбрасываемой тени, каждая из которых обладает своим набором возможностей. Например, CSS поддерживает опциональное значение размытия, применяемого к отбрасываемой тени.
⏱ Читать статью
#почитать
В инструментах наподобие Photoshop, Gimp, Figma и CSS есть множество разных реализаций фильтра отбрасываемой тени, каждая из которых обладает своим набором возможностей. Например, CSS поддерживает опциональное значение размытия, применяемого к отбрасываемой тени.
Верстальщик от бога
29 Oct, 10:32
"Умные" макеты с контейнерными запросами
#почитать
Поскольку медиа запросы сыграли важную роль в наступлении эры отзывчивого веб-дизайна, не хочется говорить о них ничего плохого… но медиа-запросы — это тупость.
⏱ Читать статью
#почитать
Поскольку медиа запросы сыграли важную роль в наступлении эры отзывчивого веб-дизайна, не хочется говорить о них ничего плохого… но медиа-запросы — это тупость.
Верстальщик от бога
28 Oct, 11:04
#посмотреть
Плавающие элементы и очистка потока (Floating Elements & Clearfix)
Верстальщик от бога
28 Oct, 06:14
Ускоряем сайт с помощью CSS
#почитать
Какие проблемы возникают с CSS:
CSS блокирует рендеринг: каждый @import останавливает другие загрузки, пока браузер загружает и анализирует требуемый файл CSS;
CSS влияет на рендеринг. Браузеры рендерят страницу в три этапа: (размер элементов), рисование (текст, цвета и т.д.) и позиционирование. Некоторые свойства CSS запускают все три фазы, что может сказаться на производительности;
Код CSS со временем может разрастаться. Выявление неиспользуемых стилей может быть сложной задачей, а их удаление может привести к хаосу, но разработчики выбирают лёгкий путь и добавляют больше свойств. Таблица стилей становится всё больше. Отсюда вывод: чем больше файл, тем дольше время загрузки и обработки.
⏱ Читать статью
#почитать
Какие проблемы возникают с CSS:
CSS блокирует рендеринг: каждый @import останавливает другие загрузки, пока браузер загружает и анализирует требуемый файл CSS;
CSS влияет на рендеринг. Браузеры рендерят страницу в три этапа: (размер элементов), рисование (текст, цвета и т.д.) и позиционирование. Некоторые свойства CSS запускают все три фазы, что может сказаться на производительности;
Код CSS со временем может разрастаться. Выявление неиспользуемых стилей может быть сложной задачей, а их удаление может привести к хаосу, но разработчики выбирают лёгкий путь и добавляют больше свойств. Таблица стилей становится всё больше. Отсюда вывод: чем больше файл, тем дольше время загрузки и обработки.
Верстальщик от бога
25 Oct, 11:24
Наглядный CSS
Автор: Сидельников Грег
Год издания: 2021
#css #ru
Скачать книгу
Автор: Сидельников Грег
Год издания: 2021
#css #ru
Скачать книгу
Верстальщик от бога
25 Oct, 07:30
Прими участие в «Хакатоне по разработке кибериммунных технологий 3.0» от «Лаборатории Касперского» с призовым фондом 1 000 000 рублей!
Регистрация на хакатон открыта до 15 ноября: https://cnrlink.com/cyberimmunehack3gdhtml
Приглашаем разработчиков, аналитиков, архитекторов ПО, экспертов по информационной безопасности и студентов программирования и кибербезопасности. Участвуй индивидуально или в команде до 5 человек.
Тебе предстоит разработать систему удалённого управления автомобилем для каршеринга, устойчивую к кибератакам. Специальных знаний в автомобильной отрасли не требуется — задача будет понятна всем, независимо от опыта.
Это твой шанс прокачать навыки в кибербезопасности и пообщаться с экспертами «Лаборатории Касперского».
Ключевые даты:
• 15 октября – 15 ноября – регистрация участников
• 8 ноября – митап с экспертами и игра «Огнеборец»
• 15 ноября – старт хакатона
• 17 ноября – дедлайн загрузки решений
• 22 ноября – подведение итогов и объявление победителей
Регистрируйся, прояви себя и внеси вклад в безопасность каршеринговых сервисов: https://cnrlink.com/cyberimmunehack3gdhtml
Реклама. АО «Лаборатория Касперского». ИНН 7713140469. erid: LjN8K5SaJ
Регистрация на хакатон открыта до 15 ноября: https://cnrlink.com/cyberimmunehack3gdhtml
Приглашаем разработчиков, аналитиков, архитекторов ПО, экспертов по информационной безопасности и студентов программирования и кибербезопасности. Участвуй индивидуально или в команде до 5 человек.
Тебе предстоит разработать систему удалённого управления автомобилем для каршеринга, устойчивую к кибератакам. Специальных знаний в автомобильной отрасли не требуется — задача будет понятна всем, независимо от опыта.
Это твой шанс прокачать навыки в кибербезопасности и пообщаться с экспертами «Лаборатории Касперского».
Ключевые даты:
• 15 октября – 15 ноября – регистрация участников
• 8 ноября – митап с экспертами и игра «Огнеборец»
• 15 ноября – старт хакатона
• 17 ноября – дедлайн загрузки решений
• 22 ноября – подведение итогов и объявление победителей
Регистрируйся, прояви себя и внеси вклад в безопасность каршеринговых сервисов: https://cnrlink.com/cyberimmunehack3gdhtml
Реклама. АО «Лаборатория Касперского». ИНН 7713140469. erid: LjN8K5SaJ
Верстальщик от бога
24 Oct, 10:42
50 сайтов с бесплатными HTML/CSS/JS шаблонами
#почитать
Источники вдохновения, или творческого заимствования.
⏱ Ознакомиться
#почитать
Источники вдохновения, или творческого заимствования.
Верстальщик от бога
23 Oct, 16:41
#посмотреть
Разбираемся с асинхронностью в JavaScript, изучаем промисы (Promise), async await и узнаем, как работает событийный цикл (Event Loop).
Верстальщик от бога
23 Oct, 13:00
Технологический гараж на МТС True Tech Champ
Дата: 8 ноября
Место: МТС Live Холл + онлайн
МТС приглашает в True Tech Garage. Тут можно поиграть в деловые игры, научиться управлять логикой на воркшопе, побатлиться в кодинге с победителем олимпиады, а к вечеру просто весело провести время за прогерскими шутками. Максимально ламповая и кодерская атмосфера!
А вот несколько примеров, что тебя ждет:
— Деловая игра THE CODE от разработчика бизнес-симуляций Александра Белякова. Нужно будет распутать сложный узел причинно-следственных связей и найти код.
— Мастер-класс по прокачке логики от Максима Дорофеева. Узнаешь, как избавиться от лишней работы, устранив логические нарушения задач.
— «Плохие прогреские шутки». ИТ-батл, где пары разработчиков попробуют перешутить друг друга, а победителей выберут зрители.
— «Плохой собес». Стресс-воркшоп, где участникам предстоит оказаться на худшем собеседовании в жизни.
True Tech Garage будет работать на очном финале ИТ-чемпионата в МТС Live Холл. Приходи — тут все свои!
Узнать подробности и зарегистрироваться на событие можно по ссылке: https://truetechchamp.ru/conf
Дата: 8 ноября
Место: МТС Live Холл + онлайн
МТС приглашает в True Tech Garage. Тут можно поиграть в деловые игры, научиться управлять логикой на воркшопе, побатлиться в кодинге с победителем олимпиады, а к вечеру просто весело провести время за прогерскими шутками. Максимально ламповая и кодерская атмосфера!
А вот несколько примеров, что тебя ждет:
— Деловая игра THE CODE от разработчика бизнес-симуляций Александра Белякова. Нужно будет распутать сложный узел причинно-следственных связей и найти код.
— Мастер-класс по прокачке логики от Максима Дорофеева. Узнаешь, как избавиться от лишней работы, устранив логические нарушения задач.
— «Плохие прогреские шутки». ИТ-батл, где пары разработчиков попробуют перешутить друг друга, а победителей выберут зрители.
— «Плохой собес». Стресс-воркшоп, где участникам предстоит оказаться на худшем собеседовании в жизни.
True Tech Garage будет работать на очном финале ИТ-чемпионата в МТС Live Холл. Приходи — тут все свои!
Узнать подробности и зарегистрироваться на событие можно по ссылке: https://truetechchamp.ru/conf
Верстальщик от бога
23 Oct, 05:03
Ограничение Contain
#почитать
Ограничение области применения стилей, компоновок и отрисовок.
⏱ Читать
⏱ Также новый подробный гайд DevNotes
#почитать
Ограничение области применения стилей, компоновок и отрисовок.
Верстальщик от бога
22 Oct, 05:14
Виды анимаций на верстке
#почитать
CSS Transition, CSS Animation, SVG animation, JS-Анимацию, JS canvas и JS. WebGL / ThreeJs.
⏱ Читать статью
#почитать
CSS Transition, CSS Animation, SVG animation, JS-Анимацию, JS canvas и JS. WebGL / ThreeJs.
Верстальщик от бога
21 Oct, 05:06
Советы по вёрстке от гика
#почитать
▪️почему декоративные элементы, сделанные с помощью чистого CSS могут не отобразиться в режиме повышенной контрастности Windows;
▪️чем можно заменить объявления свойства height со значением auto для изображений;
▪️какой есть нюанс при установке максимальной ширины у группы элементов;
▪️плавную прокрутку без неприятных ситуаций для пользователя;
▪️чего не хватает при использовании фоновых изображений.
⏱ Читать статью
#почитать
▪️почему декоративные элементы, сделанные с помощью чистого CSS могут не отобразиться в режиме повышенной контрастности Windows;
▪️чем можно заменить объявления свойства height со значением auto для изображений;
▪️какой есть нюанс при установке максимальной ширины у группы элементов;
▪️плавную прокрутку без неприятных ситуаций для пользователя;
▪️чего не хватает при использовании фоновых изображений.
Верстальщик от бога
17 Oct, 05:02
Основы и практика CSS Grid Layout
#почитать
Grid — это способ двумерной раскладки. Именно ДВУмерной, в отличии от Flexbox. Flexbox позволяет полноценно управлять элементами только по одной оси.
⏱ Читать статью
#почитать
Grid — это способ двумерной раскладки. Именно ДВУмерной, в отличии от Flexbox. Flexbox позволяет полноценно управлять элементами только по одной оси.
Верстальщик от бога
16 Oct, 05:01
Чистый CSS или фреймворк
#почитать
Пару очевидных и не очень фактов:
• Flex - первый инструмент для работы с макетами, но имеет недостатки.
• Grid позволяет думать о макете в целом и заменяет множество элементов-контейнеров.
• Использование функций min, max и clamp упрощает изменение ширины элементов в адаптивных макетах.
• Aspect-ratio упрощает отображение адаптивных изображений и видео с определенным соотношением сторон.
• Определение пользовательских переменных упрощает использование одного и того же значения цвета в разных местах на странице.
• CSS предоставляет механизм управления состоянием, включая использование псевдокласса focus-within.
• Использование относительных единиц, таких как em и rem, вместо статических значений пикселей может быть более предпочтительным.
• Ориентирование на цвета HSL упрощает вычисление красивой цветовой палитры.
⏱ Читать статью
#почитать
Пару очевидных и не очень фактов:
• Flex - первый инструмент для работы с макетами, но имеет недостатки.
• Grid позволяет думать о макете в целом и заменяет множество элементов-контейнеров.
• Использование функций min, max и clamp упрощает изменение ширины элементов в адаптивных макетах.
• Aspect-ratio упрощает отображение адаптивных изображений и видео с определенным соотношением сторон.
• Определение пользовательских переменных упрощает использование одного и того же значения цвета в разных местах на странице.
• CSS предоставляет механизм управления состоянием, включая использование псевдокласса focus-within.
• Использование относительных единиц, таких как em и rem, вместо статических значений пикселей может быть более предпочтительным.
• Ориентирование на цвета HSL упрощает вычисление красивой цветовой палитры.
Верстальщик от бога
15 Oct, 10:52
Продвинутая адаптивная верстка - CSS container queries
#посмотреть
Технология адаптивной верстки container queries, позволяющая изменять элементы в зависимости от их размера.
⏱ Смотреть на YouTube ⏱15 минут
#посмотреть
Технология адаптивной верстки container queries, позволяющая изменять элементы в зависимости от их размера.
Верстальщик от бога
15 Oct, 06:08
Шпаргалки для начинающего
верстальщика HTML/CSS
Автор: Эберт Елена
Год издания: 2021
#html #css #ru
Скачать книгу
верстальщика HTML/CSS
Автор: Эберт Елена
Год издания: 2021
#html #css #ru
Скачать книгу
Верстальщик от бога
14 Oct, 10:51
Сборник генераторов CSS-градиентов
#почитать
Curated list of the best gradient websites.
⏱ Посмотреть
#почитать
Curated list of the best gradient websites.
Верстальщик от бога
09 Oct, 04:47
Сборник CSS-градиентов
#почитать
Подборка 23-х фонов с линейным и радиальным градиентом.
⏱ Читать статью
#почитать
Подборка 23-х фонов с линейным и радиальным градиентом.
Верстальщик от бога
08 Oct, 14:57
Хотите освоить прогрессивный фреймворк для создания веб-приложений на JS?
➡️ Ждем вас на открытом вебинаре 23 октября в 20:00 мск, где мы разберем:
✔️ архитектурные принципы Nest.Js, включая внедрение зависимостей и модульность;
✔️ как создавать маршруты, контроллеры и использовать middleware;
✔️ как работать с базами данных, включая MongoDB, PostgreSQL и MySQL;
✔️ методы тестирования и отладки приложений Nest.Js.
Спикер Николай Лапшин — опытный архитектор, тимлид, преподаватель и разработчик с широким технологическим стеком.
Встречаемся в преддверии старта курса «Node.js Developer». Все участники вебинара получат специальную цену на обучение!
➡️ Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие: https://u.to/caTuIA
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru, erid: LjN8JyLdf
Спикер Николай Лапшин — опытный архитектор, тимлид, преподаватель и разработчик с широким технологическим стеком.
Встречаемся в преддверии старта курса «Node.js Developer». Все участники вебинара получат специальную цену на обучение!
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru, erid: LjN8JyLdf
Верстальщик от бога
08 Oct, 07:08
JavaScript с нуля до профи
Авторы: Лоренс Ларс Свекис,
М. ван Путтен, Р. Персиваль
Год издания: 2023
#javascript #ru
Скачать книгу
Авторы: Лоренс Ларс Свекис,
М. ван Путтен, Р. Персиваль
Год издания: 2023
#javascript #ru
Скачать книгу
Верстальщик от бога
07 Oct, 10:52
25 HTML тегов, элементов и атрибутов, которые должен знать каждый фронтендер
#почитать
В HTML есть средства для создания раскрывающихся виджетов, индикаторов прогресса и скалярных значений, переадресации на нужный URL, воспроизведения аудио/видео, сохранения форматирования кода и валидации с помощью regex.
⏱ Список
#почитать
В HTML есть средства для создания раскрывающихся виджетов, индикаторов прогресса и скалярных значений, переадресации на нужный URL, воспроизведения аудио/видео, сохранения форматирования кода и валидации с помощью regex.
Верстальщик от бога
06 Oct, 06:18
Область видимости и замыкания
Автор: Кайл Симпсон
Год издания: 2022
#javascript #ru
Скачать книгу
Автор: Кайл Симпсон
Год издания: 2022
#javascript #ru
Скачать книгу
Верстальщик от бога
04 Oct, 10:26
Погружение в Atomic CSS
#почитать
Методология верстки, в которой мы используем маленькие атомарные CSS-правила, каждое из которых делает одно действие. Эти классы еще называют утилитами. Часто они применяет одно CSS-свойство (например, меняет цвет текста).
⏱ Читать статью
#почитать
Методология верстки, в которой мы используем маленькие атомарные CSS-правила, каждое из которых делает одно действие. Эти классы еще называют утилитами. Часто они применяет одно CSS-свойство (например, меняет цвет текста).
Верстальщик от бога
03 Oct, 10:36
Что, если использовать контейнерные единицы измерения для всего
#почитать
Казалось, ответ может быть таким: всё будет очень хорошо масштабироваться!
⏱ Читать статью
#почитать
Казалось, ответ может быть таким: всё будет очень хорошо масштабироваться!
Верстальщик от бога
02 Oct, 10:47
Полезный CSS. Часть 4
#почитать
▫️сброс стилей до значений, взятых из веб-стандартов;
▫️возврат значений свойств, установленных в браузере;
▫️что можно сделать с прыжками контента при открытии и закрытии модального окна;
▫️возможность отобразить текст «красиво» с помощью ключевого слова system-ui;
▫️способ стилизации элементов на языке, отличающимся от основного.
⏱ Читать статью
#почитать
▫️сброс стилей до значений, взятых из веб-стандартов;
▫️возврат значений свойств, установленных в браузере;
▫️что можно сделать с прыжками контента при открытии и закрытии модального окна;
▫️возможность отобразить текст «красиво» с помощью ключевого слова system-ui;
▫️способ стилизации элементов на языке, отличающимся от основного.
Верстальщик от бога
01 Oct, 10:33
Советы по вёрстке от гика, часть 3
#почитать
▫️подходы при стилизации элементов для вёрстки текста;
▫️какая может быть проблема с радиокнопками в проекте;
▫️как задать размеры с использованием функций min() и max();
▫️CSS-наследование и свойство line-height;
▫️для чего делать подсказки в имени класса.
⏱ Читать статью
#почитать
▫️подходы при стилизации элементов для вёрстки текста;
▫️какая может быть проблема с радиокнопками в проекте;
▫️как задать размеры с использованием функций min() и max();
▫️CSS-наследование и свойство line-height;
▫️для чего делать подсказки в имени класса.
Верстальщик от бога
30 Sep, 13:58
Разработка игр на языке JavaScript
Автор: Беляев С. А
Год издания: 2022
#javascript #ru
Скачать книгу
Автор: Беляев С. А
Год издания: 2022
#javascript #ru
Скачать книгу
Верстальщик от бога
30 Sep, 09:31
Ждём вас на открытом вебинаре 3 октября в 20:00 мск, где мы разберем:
- как создать простой color picker с использованием Context API и Composables;
- как передавать состояние родительского компонента к дочерним компонентам;
- как переиспользовать код с помощью создания своих Composables и использования готовых из коллекции VueUse.
Урок для разработчиков, желающих улучшить понимание внутренних механизмов Vue 3, создавать свои компоненты и контролы, а также повысить эффективность разработки за счет переиспользования кода.
Спикер Юрий Тимофеев — опытный разработчик с широким технологическим стеком, преподаватель.
Встречаемся в преддверии старта курса «Vue.js разработчик». Все участники вебинара получат специальную цену на обучение!
Верстальщик от бога
30 Sep, 05:18
Вендорные префиксы
#почитать
Если перед названием свойства стоит некоторый префикс, то это означает, что данное свойство реализовано и будет применяться исключительно в указанном браузере. Все остальные браузеры данное свойство будут игнорировать.
⏱ Читать статью
#почитать
Если перед названием свойства стоит некоторый префикс, то это означает, что данное свойство реализовано и будет применяться исключительно в указанном браузере. Все остальные браузеры данное свойство будут игнорировать.
14,413
subscribers
1,075
photos
15
videos
