Верстальщик от бога

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

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

🧑🏻‍💻 Хотите начать разрабатывать с Vue.js, но не знаете, с чего начать? На открытом вебинаре 22 апреля в 20:00 мск мы расскажем вам о Vue.js 3. Вы увидите, как просто установить Vue, какие основные концепции нужно освоить и какие библиотеки вам понадобятся для старта. Убедитесь, что этот фреймворк проще, чем кажется, и намного мощнее, чем вы могли бы подумать! После вебинара вы будете понимать, как применять Vue.js в своих проектах. Это простой, быстрый и эффективный фреймворк для вашего будущего в веб-разработке. 👉 Регистрируйтесь прямо сейчас и получите скидку на большое обучение «Vue.js-разработчик»: https://otus.pw/H1Vg/ Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, erid: 2W5zFHaFkWc

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

navigator.clipboard — Новый асинхронный Clipboard API в JavaScript #почитать Копирование и вставка текста, изображений и файлов с помощью нового API navigator.clipboard ⏱Читать статью

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

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

Перед тем, как делать анимацию по скроллу #почитать

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

⏱Читать статью

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

🔒 Устали от использования сложных библиотек для автосохранения данных в проектах? Пора использовать Vue.js и локальное хранилище! На открытом вебинаре 14 апреля в 20:00 мск мы покажем, как работать с локальным хранилищем, включая LocalStorage, SessionStorage и базовые операции с IndexedDB. Вы увидите, как данные остаются, даже если вы перезагрузите страницу, и узнаете, как легко работать с ними через Composition API. Научитесь добавлять автосохранение в реальный проект без лишнего кода и сторонних инструментов! ⚡️ Зарегистрируйтесь и получите скидку на большое обучение «Vue.js-разработчик»: https://otus.pw/7rOU/ Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, erid: 2W5zFGF6hBN

Всё, что нужно знать о работе с API в JavaScript #почитать Если вы хотите получать данные с сервера, отправлять информацию или взаимодействовать с внешними сервисами (например, картами Google, платёжными системами или погодными сервисами), вам не обойтись без этого навыка. Разберём работу с API на практике: от базовых запросов до обработки ошибок и аутентификации. ⏱Читать статью

Предзагрузка отзывчивых изображений #почитать Как правильно предзагружать отзывчивые изображения, чтобы улучшить первоначальную загрузку страницы ⏱Читать статью

Настройка одного набора цветов для светлого и тёмного режимов #почитать CSS переменные можно использовать, чтобы сделать цвета темнее, когда они отображаются на светлом фоне, и светлее, когда они отображаются на тёмном, что делает их более яркими в обоих случаях. ⏱Читать статью

Что вы, возможно, не знаете о кастомных стилях @counter-style #почитать

Вы знаете о псевдоэлементе ::marker. Более чем вероятно, что вы баловались с кастомными счетчиками, используя counter-reset и counter-increment. А может быть, вы просто стираете стиль списка (осторожно!) и вручную ставите маркер на ::before псевдоэлемента списка.

⏱Читать статью

Время протестировать CodeFest'15 31 мая и 1 июня в Новосибирске пройдет юбилейный CodeFest’15 — масштабная конференция для ИТ-специалистов. Приглашают тимлидов, проджектов, тестировщиков, фронтенд- и бэкенд-разработчиков, аналитиков, дизайнеров, техлидов и руководителей направлений. На мероприятии можно обсудить тренды с другими профессионалами и перезагрузиться в неформальной обстановке. В программе: — 10 потоков и 150+ докладов от топовых спикеров по направлениям от Backend до Web3; — живые дискуссии в формате «квартирников»; — нетворкинг с экспертами из разных компаний; — кофе-брейки и грандиозная афтепати. Больше информации — по ссылке

Позиционирование текста вокруг элементов с помощью смещения CSS #почитать Когда речь заходит о позиционировании элементов на странице, в том числе и текста, в CSS существует множество способов сделать это - буквальное свойство position с соответствующими свойствами inset-*, translate, margin, anchor() (на данный момент поддерживается несколькими браузерами) и так далее. Свойство offset - еще одно, которое входит в этот список. ⏱Читать статью

Практикум. Счётчик символов в поле ввода #почитать Нередко разработчик хочет знать число символов, которые пользователь вводит. Например, так можно сообщать количество доступных знаков. Создадим такой счётчик без лишней нагрузки браузера (и человека). ⏱Читать статью

Кнопки с несколькими состояниями #почитать Как правило, кнопки либо нажаты, либо нет. Но при условии, что обеспечена доступность, можно сделать группу радиокнопок внешне похожей на кнопку с несколькими состояниями с помощью CSS-хитростей. ⏱Читать статью

История Electron #почитать Electron — это один из самых известных инструментов современного разработчика. Если присмотреться, то это родственник React Native, манящий лозунгом «пиши один раз, запускай везде!», но с гораздо меньшими издержками по сборке и релизу, чем в случае мобильной разработки. Его уникальное преимущество заключается в комбинации Node.js и Chromium, создающей мощную десктопную среду для веб-технологий. Официальный блог Electron не так давно отметил своё десятилетие, что весьма удивляет с учётом того, насколько глубоко этот инструмент успел проникнуть в культуру разработки. ⏱Читать статью

link rel='modulepreload': Оптимизация загрузки модулей JavaScript #почитать rel='modulepreload' указывает, что скрипт модуля должен быть получен, проанализирован и откомпилирован заранее, и сохранён для последующего выполнения. ⏱Читать статью