Верстальщик от бога
Самый большой канал по верстке в телеграм. По крупицам собираем frontend-годноту из интернета. Чат верстальщиков: @godinhtmlchat По всем вопросам: @godinmedia
Ko'proq ko'rsatish12 306
Obunachilar
-624 soatlar
-37 kunlar
-9730 kunlar
Post vaqtlarining boʻlagichi
Ma'lumot yuklanmoqda...
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.
Nashrni tahlil qilish
| Postlar | Ko'rishlar | Ulashishlar | Ko'rish dinamikasi |
01 10 CSS-однострочников для преобразования веб-приложения
#почитать
CSS позволяет создавать красивые и отзывчивые веб-дизайны. Однако написание кода CSS может отнимать много времени и сил, особенно если вы не знакомы с новейшими методиками и лучшими практиками. К счастью, есть несколько однострочников, помогающих оптимизировать CSS-код и создавать более эффективные проекты.
1. Центрирование div
2. Создание свободно перемещающихся элементов
3. Позиционирование элементов в любом месте DOM
4. Универсальное свойство box-sizing
5. Адаптивные изображения
6. Центрирование элементов
7. Создание пользовательских стилей флажков
8. Выравнивание текста
9. Очистка float-элементов
10. Сброс всех стилей
⏱Читать статью | 749 | 28 | Loading... |
02 Изменить цвета и кнопки сервиса — и не сломать дизайн-систему
#почитать
В прошлом году нам понадобилось полностью изменить внешний вид нашего сервиса. Разработчики и дизайнеры интерфейсов часто сталкиваются с подобными задачами: есть уже работающий сервис, но его нужно стилизовать, например, в случае ребрендинга.
⏱Читать статью | 1 003 | 20 | Loading... |
03 Почему AVIF вместо JPEG, WebP, PNG и GIF
#почитать
Вам может не нравиться стиль каких-то артефактов изображения, но если это означает, что кто-то сможет быстрее загрузить сайт в поезде или с низкой задержкой, то вам придется пойти на компромисс. Конечная цель — предоставить пользователю наименьшую полезную нагрузку в пределах разумного.
⏱Читать статью | 1 186 | 22 | Loading... |
04 "Заявляю: Мы, как цивилизация, разучились использовать центрирование"
#почитать
Плохое выравнивание может испортить прекрасный интерфейс. И напротив, с правильно выровненным текстом ваш интерфейс обретёт утончённую красоту. Даже если это трудно. Даже если инструменты создают неудобства. Даже если приходится искать решения. Я верю, что вместе мы можем разобраться, как засунуть один прямоугольник в другой ровно.
⏱Читать статью | 1 370 | 17 | Loading... |
05 Анимация в веб-интерфейсе, влияние на UX
#почитать
Любое движение в визуале триггерит пользователей лучше. По данным, Engagement Rate у видео и анимаций в 2 раза выше, в сравнении со статикой.
⏱Читать статью | 1 734 | 22 | Loading... |
06 😙 | 1 748 | 10 | Loading... |
07 CSS in Depth
Автор: Keith J. Grant
Год: 2018
⏱Обзор
⏱Скачать книгу | 1 751 | 9 | Loading... |
08 Архитектура Inverted Triangle CSS (ITCSS)
#почитать
▪️Settings (Настройки): Основополагающий слой, включающий конфигурацию, переменные и глобальные настройки. Он задаёт основу для всей таблицы стилей.
▪️Tools (Инструменты): Этот слой включает миксины, функции и другие инструменты, используемые в проекте. Он предоставляет разработчикам набор инструментов для эффективного управления и расширения стилей.
Generic (Общий): на этом слое применяются сброс стилей и normalize.css, создавая единую базу для стилей в разных браузерах.
▪️Elements (Элементы): Далее идёт базовая стилизация элементов HTML. Это неклассифицированные селекторы, определяющие базовые стили для стандартных HTML-тегов.
▪️Objects (Объекты): Этот слой определяет многократно используемые шаблоны дизайна и структуры макета. Он сосредоточен на создании объектов, содержащих специфическое поведение стилей, что способствует модульности и возможности повторного использования.
▪️Components (Компоненты): На этом слое выполняется стилизация конкретных компонентов пользовательского интерфейса. Этот слой реализует большую часть стилизации приложения, обеспечивая чёткое разделение задач.
▪️Trumps (Козыри): Вершина перевёрнутого треугольника, слой Trumps, имеет дело с утилитарными классами и переопределением стилей. Он позволяет вносить специфические изменения и тонкие настройки, не нарушая целостности нижних слоёв.
⏱Читать статью | 1 631 | 25 | Loading... |
09 Яндекс приглашает студентов и начинающих разработчиков на Young Con — фестиваль для тех, кто интересуется карьерой в IT
• 6000 участников
• Свыше 10 часов нетворкинга и активностей
• 30 топ-менеджеров расскажут о внутренней кухне больших IT-компаний и дадут советы, как начать карьеру в одной из команд
• Знакомство с технологиями Яндекса
• 9 тематических «миров» — интерактивных стендов, где участники смогут узнать про сервисы и карьерные возможности, которые дает работа в IT-компании.
У участников будет возможность в будущем попасть на стажировку в Яндекс, ведь прямо на фестивале пройдут экспресс-собеседования.
На фестивале также пройдет «Баттл вузов» — финал турнира по спортивному программированию между студентами. Команда-победитель разделит между собой призовой фонд в размере 1 млн рублей. Завершится мероприятие концертом музыкальных групп The Hatters и ХЛЕБ.
Фестиваль пройдет 27 июня в Live Arena. Принять участие в нем можно очно или онлайн — для этого необходимо заполнить форму на сайте. | 1 523 | 2 | Loading... |
10 Инь-Ян в UI/UX дизайне
#почитать
Эта статья адресована моим коллегам-юиксерам, а также всем, кого затрагивают задачи анализа, обсуждения и согласования предложений и результатов работы над дизайном.
⏱Читать статью | 1 638 | 18 | Loading... |
11 Юмористический рассказ «Как неофит познавал яваскрипт»
#почитать
Пятьдесят лет назад программистов не было в природе. А сейчас они, кажется, уже вымирают – народился «Чат Гопоты», дьявольский Devin и всё такое прочее. Но, думаю, настоящие программисты не вымрут – они просто перестанут зарабатывать деньги. Ведь до сих пор умельцы и лапти плетут – не за деньги, для души. Собственно, дальше будет история о душе программирования.
⏱Читать статью | 2 086 | 10 | Loading... |
12 Платный Chrome Enterprise
#почитать
Платный браузер (подписка $6/месяц за 1 рабочее место) с ИИ-элементами для борьбы с киберугрозами.
Комент:
Максимально странное решение, после выхода бесплатного ChatGpt многие перестали пользоваться поиском гугл, а тут еще такие непопулярные решения как будто бы забьют гвоздь в крышку гроба.
⏱Читать статью | 2 145 | 6 | Loading... |
13 Введение в CSS Grid
#почитать
▫️Что такое CSS Grid
▫️Фракционные единицы (fr)
▫️Создание CSS Grid
▫️Функция repeat()
▫️Добавление gap
▫️Варьирующиеся размеры
▫️Создание универсальной системы
⏱Читать статью | 2 010 | 34 | Loading... |
14 Что может сломать aspect-ratio в CSS
#почитать
В CSS есть свойство aspect-ratio, полностью поддерживаемое примерно с 2021 года. Это свойство может быть очень полезным и помочь там, где нельзя использовать фиксированный размер. Но всё может пойти не так.
⏱Читать статью | 1 978 | 20 | Loading... |
15 Firefox остаётся самым быстрым браузером
#почитать
Как уже говорилось, Firefox остался последним свободным браузером на независимом движке (Gecko). Сейчас это единственная альтернатива монополии WebKit (Safari) и его форка Blink (Chrome, Edge, Opera и др.). И это единственный популярный браузер, который не принадлежит крупной корпорации.
⏱Читать статью | 2 018 | 12 | Loading... |
16 Вопросы по вёрстке на интервью фронтендера: значения свойства display
#почитать
Продолжаю отвечать на вопросы из собеседований на должность фронтендера. Сегодня я отвечу на следующий вопрос: «В чём отличия между значениями block, inline, flex, inline-flex, grid и inline-grid для свойства display?»
⏱Читать статью | 2 487 | 21 | Loading... |
17 ▫️ Фронтенд-рынок: динамика и спрос
#посмотреть
Друзья, фронтенд-рынок мертв. Вакансий меньше, чем поданных резюме, а конкуренция бесконечна. Кажется, найти работу невозможно, а даже если и найдешь, зарплата невелика. По крайней мере, так считают выпускники крупных онлайн-школ — тех самых известных школ, рекламу которых вы повсюду видите по телевидению или у блоггеров. Или, может быть, это просто люди, которые не совсем понимают, как работает эта индустрия.
Как основатель Result University, онлайн-заведения, полностью занимающегося фронтенд-разработкой, я решил углубиться в цифры и факты. Что на самом деле происходит на рынке фронтенда? Действительно ли все так плохо, как многие утверждают? В этом видео я хочу ответить на один важный вопрос: можно ли устроиться на работу младшим разработчиком прямо сейчас? Есть ли возможности для разработчиков среднего и старшего уровня? Сколько вакансий имеется? И самое главное, сколько денег могут заработать эти профессионалы?
Для анализа всех этих данных я воспользовался известным сервисом HeadHunter. Обратите внимание, что эта статистика отражает общие тенденции и динамику рынка труда. Она может не отражать точные цифры, но дает общее представление о том, что сейчас происходит в отрасли.
⏱Смотреть на YouTube ⏱ | 2 287 | 11 | Loading... |
18 Адаптивное видео с помощью встроенных математических функций CSS
#почитать
Пока копалась в математических функциях, пришло в голову, что aspect-ratio можно попробовать воспроизвести с помощью этих функций и кастомных свойств.
⏱Читать статью | 1 950 | 28 | Loading... |
19 Селектор потомков (пробел)
#почитать
Селектор потомков в CSS используется для выбора элементов, которые являются потомками другого элемента в структуре документа. Этот селектор обозначается простым пробелом между двумя селекторами и позволяет применить стили к элементам, находящимся внутри других элементов, независимо от глубины их вложенности.
⏱Читать статью | 1 938 | 14 | Loading... |
20 Infinite-Scrolling Logos In Flat HTML And Pure CSS
#почитать
Помните элемент HTML <marquee>? Он устарел, так что вряд ли вы будете использовать его, когда вам понадобится что-то вроде горизонтальной автопрокрутки. Вот тут-то и приходит на помощь CSS, потому что в нем есть все необходимые инструменты для реализации этой функции. Автор демонстрирует технику, которая позволяет сделать это с помощью набора изображений и минимального HTML.
⏱Читать статью (en) | 1 867 | 20 | Loading... |
21 Пятничное. История Dark Mode: как баг стал фичей
#почитать
«Темная тема», «темный режим», «ночной режим», «дарк мод» — опция, которая сейчас есть практически в каждой операционной системе, приложении, браузере, сайте.
Многие текстовые редакторы и интегрированные среды разработки (IDE) предлагают темную тему по умолчанию.
Давным-давно в 19 веке, еще до появления школьных тетрадей (и уж тем более аналоговых и цифровых электронных устройств) у каждого ученика (или ученого «мужа») была своя собственная аспидная доска, выполненная из сланца — так называемого аспида.
⏱Читать статью | 2 329 | 15 | Loading... |
22 Как стать Frontend-лидом за 4 года
#почитать
Оценивая свои знания я понял, что их не хватает даже для устройства на позицию джуна. Поэтому на протяжении следующих трёх месяцев я учился по 10-12 часов в день, чтобы начать ходить на интервью.
⏱Читать статью | 2 231 | 32 | Loading... |
23 ▫️ Новое в Chrome 124
#почитать #посмотреть
Основные моменты Chrome 124:
▫️ Есть два новых API, которые позволяют использовать декларативную теневую DOM из JavaScript
▫️ Вы можете использовать потоки в веб-сокетах
▫️ Просмотр переходов стал немного лучше
▫️ И есть еще много чего
⏱Читать статью
⏱Видео | 2 184 | 10 | Loading... |
Photo unavailableShow in Telegram
10 CSS-однострочников для преобразования веб-приложения
#почитать
CSS позволяет создавать красивые и отзывчивые веб-дизайны. Однако написание кода CSS может отнимать много времени и сил, особенно если вы не знакомы с новейшими методиками и лучшими практиками. К счастью, есть несколько однострочников, помогающих оптимизировать CSS-код и создавать более эффективные проекты.
1. Центрирование div
2. Создание свободно перемещающихся элементов
3. Позиционирование элементов в любом месте DOM
4. Универсальное свойство box-sizing
5. Адаптивные изображения
6. Центрирование элементов
7. Создание пользовательских стилей флажков
8. Выравнивание текста
9. Очистка float-элементов
10. Сброс всех стилей
⏱Читать статью
👍 5👎 2
Photo unavailableShow in Telegram
Изменить цвета и кнопки сервиса — и не сломать дизайн-систему
#почитать
В прошлом году нам понадобилось полностью изменить внешний вид нашего сервиса. Разработчики и дизайнеры интерфейсов часто сталкиваются с подобными задачами: есть уже работающий сервис, но его нужно стилизовать, например, в случае ребрендинга.⏱Читать статью
🔥 7❤ 1
Photo unavailableShow in Telegram
Почему AVIF вместо JPEG, WebP, PNG и GIF
#почитать
Вам может не нравиться стиль каких-то артефактов изображения, но если это означает, что кто-то сможет быстрее загрузить сайт в поезде или с низкой задержкой, то вам придется пойти на компромисс. Конечная цель — предоставить пользователю наименьшую полезную нагрузку в пределах разумного.⏱Читать статью
❤ 6👍 3🔥 2
Photo unavailableShow in Telegram
"Заявляю: Мы, как цивилизация, разучились использовать центрирование"
#почитать
Плохое выравнивание может испортить прекрасный интерфейс. И напротив, с правильно выровненным текстом ваш интерфейс обретёт утончённую красоту. Даже если это трудно. Даже если инструменты создают неудобства. Даже если приходится искать решения. Я верю, что вместе мы можем разобраться, как засунуть один прямоугольник в другой ровно.⏱Читать статью
🎉 6👍 3🔥 1
Photo unavailableShow in Telegram
Анимация в веб-интерфейсе, влияние на UX
#почитать
Любое движение в визуале триггерит пользователей лучше. По данным, Engagement Rate у видео и анимаций в 2 раза выше, в сравнении со статикой.⏱Читать статью
👍 6❤ 2🔥 1
Photo unavailableShow in Telegram
CSS in Depth
Автор: Keith J. Grant
Год: 2018
⏱Обзор
⏱Скачать книгу
😁 9👍 2🎉 2
Photo unavailableShow in Telegram
Архитектура Inverted Triangle CSS (ITCSS)
#почитать
▪️Settings (Настройки): Основополагающий слой, включающий конфигурацию, переменные и глобальные настройки. Он задаёт основу для всей таблицы стилей.
▪️Tools (Инструменты): Этот слой включает миксины, функции и другие инструменты, используемые в проекте. Он предоставляет разработчикам набор инструментов для эффективного управления и расширения стилей.
Generic (Общий): на этом слое применяются сброс стилей и normalize.css, создавая единую базу для стилей в разных браузерах.
▪️Elements (Элементы): Далее идёт базовая стилизация элементов HTML. Это неклассифицированные селекторы, определяющие базовые стили для стандартных HTML-тегов.
▪️Objects (Объекты): Этот слой определяет многократно используемые шаблоны дизайна и структуры макета. Он сосредоточен на создании объектов, содержащих специфическое поведение стилей, что способствует модульности и возможности повторного использования.
▪️Components (Компоненты): На этом слое выполняется стилизация конкретных компонентов пользовательского интерфейса. Этот слой реализует большую часть стилизации приложения, обеспечивая чёткое разделение задач.
▪️Trumps (Козыри): Вершина перевёрнутого треугольника, слой Trumps, имеет дело с утилитарными классами и переопределением стилей. Он позволяет вносить специфические изменения и тонкие настройки, не нарушая целостности нижних слоёв.
⏱Читать статью
👍 10❤ 1🔥 1
Photo unavailableShow in Telegram
Яндекс приглашает студентов и начинающих разработчиков на Young Con — фестиваль для тех, кто интересуется карьерой в IT
• 6000 участников
• Свыше 10 часов нетворкинга и активностей
• 30 топ-менеджеров расскажут о внутренней кухне больших IT-компаний и дадут советы, как начать карьеру в одной из команд
• Знакомство с технологиями Яндекса
• 9 тематических «миров» — интерактивных стендов, где участники смогут узнать про сервисы и карьерные возможности, которые дает работа в IT-компании.
У участников будет возможность в будущем попасть на стажировку в Яндекс, ведь прямо на фестивале пройдут экспресс-собеседования.
На фестивале также пройдет «Баттл вузов» — финал турнира по спортивному программированию между студентами. Команда-победитель разделит между собой призовой фонд в размере 1 млн рублей. Завершится мероприятие концертом музыкальных групп The Hatters и ХЛЕБ.
Фестиваль пройдет 27 июня в Live Arena. Принять участие в нем можно очно или онлайн — для этого необходимо заполнить форму на сайте.
👍 7❤ 3🔥 1
Photo unavailableShow in Telegram
Инь-Ян в UI/UX дизайне
#почитать
Эта статья адресована моим коллегам-юиксерам, а также всем, кого затрагивают задачи анализа, обсуждения и согласования предложений и результатов работы над дизайном.⏱Читать статью
👍 9👏 2🔥 1