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

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

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

По всем вопросам: @godinmedia
Download Telegram
Пишем идеальную mobile-first галерею

#почитать

Давайте так, возможно это и не галерея вовсе. Название не так важно, важна задача. Описать её можно так: нам нужна mobile-first свайпалка слайдов. Свайпы должны выглядеть максимально нативно и работать без съедания кадров. Хоть она и mobile-first, десктопы с их мышками стороной обходить нельзя.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥21
Перед тем, как делать анимацию по скроллу

#почитать

Я думаю, я попробовал все неправильные способы, как можно это реализовать, и дальше расскажу про свой опыт.


Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🤬2👎1
🐛 SQL для тестировщика — канал для развития одного из обязательных навыков QA-инженера. Публикуем обучающие видео и много-много задач и тестов для тренировки.

Чем мы отличаемся от остальных:
— грамотные редактора (работающие разработчики и QA, создатели канала Тестировщик от бога и портала testengineer.ru);
— качественное оформление;
— уникальные материалы (некоторые материалы мы пишем и переводим сами);

Подписывайтесь на наш канал по SQL.
👎5🙈3👍1
Интеграция CSS-фреймворков в Angular

#почитать

Вы создали новое Angular‑приложение, подключили популярный CSS‑фреймворк, но вместо ожидаемого вау‑эффекта столкнулись с проблемами: стили выглядят не так, как хотелось, валидация форм работает странно, а некоторые элементы вообще не реагируют на изменения состояния. Знакомо? Это типичная ситуация, когда CSS‑фреймворки интегрируются без учета особенностей Angular.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🙈21
navigator.clipboard — Новый асинхронный Clipboard API в JavaScript

#почитать

Копирование и вставка текста, изображений и файлов с помощью нового API navigator.clipboard

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥2👎1
HTML-коды популярных эмодзи

#почитать

Эта таблица станет настоящим помощником для начинающих и опытных веб-разработчиков, которые хотят улучшить пользовательский опыт и добавить яркие элементы на свои проекты.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5👍21
🧑🏻‍💻 Хотите начать разрабатывать с Vue.js, но не знаете, с чего начать?

На открытом вебинаре 22 апреля в 20:00 мск мы расскажем вам о Vue.js 3. Вы увидите, как просто установить Vue, какие основные концепции нужно освоить и какие библиотеки вам понадобятся для старта. Убедитесь, что этот фреймворк проще, чем кажется, и намного мощнее, чем вы могли бы подумать!

После вебинара вы будете понимать, как применять Vue.js в своих проектах. Это простой, быстрый и эффективный фреймворк для вашего будущего в веб-разработке.

👉 Регистрируйтесь прямо сейчас и получите скидку на большое обучение «Vue.js-разработчик»: https://otus.pw/H1Vg/

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, erid: 2W5zFHaFkWc
👍51🔥1
Липкие заголовки и полновысотные элементы: Сложная комбинация

#почитать

Липкое (sticky) позиционирование - одна из тех функций CSS, которая довольно чувствительна и может быть сведена на нет множеством факторов. И вот один из этих факторов, который стоит добавить в ваш мысленный каталог: липкие элементы плохо работают, если им приходится вместе с другими элементами формировать общую высоту, например, 100vh.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍92🔥1
Разбираемся с цветами: пространства, иллюзии и квантование

#почитать

Однажды я заметил, что цвет из Figma на симуляторе почему-то выглядел иначе. Вроде бы HEX-код один и тот же, но они явно отличались. Это заставило меня задуматься о том, что происходит с цветами при передаче изображения из одного приложения в другое. Чтобы разобраться, я решил погрузиться в вопрос и изучить природу цвета. Из этого исследования и появилась данная статья.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍42🔥1
CSS Grid Layout: Асимметричная резиновая сетка

#почитать

В веб-дизайны сетки, как в Pinterest уже давно не являются чем-то новым. Но что, если нужно сделать блоки различной высоты, при этом чтобы верстка была резиновой. Оказывается, это можно сделать, используя только стандартные возможности CSS Grid Layout.


Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8👎2🔥1
Frontend Masters: принципы SOLID в React/React Native

#почитать

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

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥21
Упрощаем CSS-анимации с помощью свойств display и размеров элемента

#почитать

До недавнего времени далеко не все свойства CSS можно было анимировать. Например, чтобы создать эффект плавного появления или исчезновения элемента, приходилось использовать свойство opacity, а не display, поскольку display нельзя было анимировать. А проблема в том, что визуально скрытый элемент всё же оставался на странице.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥2
Создание анимации орбиты с помощью CSS переменных

#почитать

Давайте анимируем CSS переменные! Это мощный способ применения CSS анимации, которая в противном случае была бы утомительной или непрактичной.


Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍51🔥1
CSS единицы измерения: lh и rlh

#почитать

Изучение новых относительных единиц измерения CSS основанных на высоте строки и позволяющих отказаться от угадывания вертикального ритма.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
Всего несколько строк CSS для плавных переходов между страницами

#почитать

Одна строка CSS-кода может обеспечить чёткие переходы между страницами веб-приложений (и сайтов — для тех, кто их обслуживает, есть разница), открывая новые возможности для проектирования и работы. Так что предлагаю разобрать тему переходов между представлениями (View Transitions), обсудив их актуальность и сделав первые шаги при помощи всего одной строки CSS.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10👎2🔥2
Веерное раскрытие с grid и @property

#почитать

Анимация веерное раскрытие подразумевает последовательное раскрытие элементов из стопки с эффектом подпрыгивания. Используя CSS grid, мы избавляемся от лишней работы по позиционированию.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥2
JavaScript: Всё ли ты знаешь о работе с асинхронностью?

#почитать

Думаете, что знаете вообще все об асинхронности в JavaScript? Уверены, что так оно и есть. Но проверить свои знания никогда не помешает — для этого как раз собрали эту небольшую викторину.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥2
Переходите на сторону light-dark()

#почитать

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


Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥2
Минималистичная JavaScript песочница

#почитать

Основное отличие этой песочницы от других — сжатие и кодирование пользовательского кода непосредственно в URL. Код не хранится на сервере или где-либо ещё. Если у вас есть ссылка, значит у вас есть код.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1
Функции call, apply и bind: использование и сравнение

#почитать

В JavaScript ключевое слово this имеет решающее значение для обеспечения работы функций в определенном контексте. Чтобы эффективно определить контекст и использовать функции для различных объектов, полезными решениями являются такие методы, как call(), apply() и bind(). Рассмотрим эти методы и способы их использования.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
6 главных технологий для хранения данных в браузере

#почитать

Ведущий инженер RxDB провел комплексный анализ и сравнение шести основных технологий хранения данных в браузере – от классических Cookies до современных WASM SQLite, оценивая их функциональность, производительность и потенциал для оптимизации.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥2