а
Все верстальщики рано или поздно сталкивались с болью, которая заключается в адаптиве сайта под различные устройства. Существуют разные технологии, упрощающие подгонку размеров под определённые устройства, например, clamp(). Эта функция удобна, так как позволяет минимизировать использование брейкпоинтов, но у неё есть свои недостатки:
Автор этой статьи затронул по-моему мнению очень важную тему, но может как-то не очень подробно её раскрыл, написание комментария с ответом вылилось в этот пост.
Цель этого руководства — познакомить вас со списком новых (потрясающих) возможностей, недавно появившихся в CSS.
В представленных здесь функциях есть гораздо больше синтаксиса, подробностей и нюансов, я просто хотел показать вам возможности, продемонстрировать базовый синтаксис и примеры использования, чтобы вы при желании могли исследовать тему глубже.
В предыдущей части мы подробно разобрали как устроены touch события и реализовали жест rotate, самое время добавить оставшиеся.
Создание сайтов с помощью нейросетей – новый тренд, и написано об этом уже много, но если раньше нужно было задействовать сразу несколько ИИ-сервисов: в ChatGPT сгенерировать идею и структуру сайта, нарисовать дизайн с помощию MidJourney или Stable Diffusion, а уже потом сверстать из этого сайт, то в последние полгода начали набирать обороты No-code платформы, которые объединяют в себе сразу несколько нейросетей и выдают готовый сайт исходя из промта в несколько строчек. В этой статье расскажу как работают No-code сервисы на основе нейросетей и разберу ТОП-20 ИИ No-code платформ для создания сайта.
Привет, Хабр! Меня зовут Артём Поморцев. Я фронтенд-разработчик компании «Криптонит» и хочу поделиться своим опытом создания набора иконок (icon pack).
Скажу сразу, что иконочные шрифты не всегда являются наиболее эффективным и надёжным вариантом, но они по-прежнему относительно просты и легки в реализации.
display: flex;
justify-content: center; /* Горизонтальное центрирование */
align-items: center; /* Вертикальное центрирование */display: grid;
justify-items: center; /* Горизонтальное центрирование */
align-items: center; /* Вертикальное центрирование */justify-content стало justify-items.
В моем предыдущем посте Time Uniform For CSS Animation я рассказал о способе создания CSS-анимации с использованием тиков вместо ключевых кадров. Он был ограничен в применении, поскольку в CSS отсутствовала возможность выполнять сложные математические вычисления.
После долгих лет ожидания в CSS теперь поддерживается достаточное количество математических функций, в частности, mod(), round() и тригонометрические функции. Пришло время вернуться к анимации, основанной на времени, надеюсь, на этот раз она будет более полезной.
«Я хочу творить, а не быть следствием чужого творчества. Я хочу принадлежать к тем, кто создает смыслы, а не быть плодом этого смысла».
Представьте себе ситуацию. Скоро истекут сроки подачи документов в колледж. Очередная партия новичков изберет профессию, адепты которой постоянно задаются вопросом: «А нужны ли будут программисты через год... через пять лет... или через десять лет?». И хотя горячие дебаты на этот счет уже улеглись, в воздухе висит немой вопрос: не настанет ли час, когда крупные языковые модели, такие как ChatGPT, заменят нас на поприще написания кода. Неважно, кто ты — абитуриент, зависший в нерешительности перед выбором ВУЗа, или матерый кодер, я предлагаю тебе остановиться и кое-что переосмыслить. А поможет нам в этом деле... кукла Барби.
Ко мне в коучинг пришёл джентльмен. Чуть меньше 20 лет опыта в разработке. Одна из ключевых задач, которая ему была интересна — Как начать литкодить каждый день?
«То настроения, то сил нету, то задачи не понимаю.. Начинаю раз в полгода и бросаю» — самый обычный набор приколов, которые мешают.
Я предложил ему обернуть всё это в привычку и дисциплину. Я собрал свою методологию прививания привычек основываясь на:
Ежедневно он тратил на Литкод 15–20 минут. Не более. Иногда участвовал в турнирах, которые и зафиксировали результат в топ 4%.
Привет, Хабр. Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS-фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React-приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.
Сегодня мы рассмотрим:
background;display, которое позволяет сделать так, что свойства элемента будут влиять через потомка;nth-child выбрать элементы без привязки к позиции;position: absolute, если для него заданы свойства grid-column и grid-row.Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.
Привет, Хабр. Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS-фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React-приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.
Сегодня мы рассмотрим:
image-set();:focus-within при вёрстке кастомных чекбоксов;Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.
Всем привет! Меня зовут Анатолий Барцев, я frontend-разработчик в команде Модерации Циан. Я решил протестировать Copilot, чтобы оценить, полезен ли он для реальной разработки. В статье расскажу, какие выделил для себя плюсы использования, а также покажу, как GitHub Copilot помогает в разработке на примере проекта на React/Typescript.
Артур — айтишник из Минска, который любит все технологичное и современное. После покупки новой квартиры с черновой отделкой все сомнения были отброшены: она будет умной!
Как тогда казалось Артуру, беспроводные технологии — самое передовое и удобное решение для инженерных систем умного дома. Тем более многие кондиционеры, пылесосы, приводы штор, лампы, регуляторы теплых полов и другая бытовая техника поддерживают Wi-Fi «из коробки».
Однако появились аргументы против. В итоге Артур выбрал гибридное решение, сочетающее как проводные технологии, так и Wi-Fi с Zigbee.
В статье мы расскажем о выборе Артура и инженерных системах, которые работают в его умной квартире. Интересно? Ныряйте под кат.
В этой статье мы сосредоточимся на ключевых элементах асинхронного программирования в Java Script: Event Loop, Event Bus, промисы и синтаксический сахар async/await. Разберемся, как эти концепции взаимодействуют между собой и как их использование помогает нам создавать более эффективные и отзывчивые веб-приложения.
Мы начнем с изучения роли Event Loop - механизма, ответственного за управление выполнением асинхронного кода. Затем мы перейдем к рассмотрению Event Bus, который обеспечивает коммуникацию между различными компонентами приложения. После этого мы ознакомимся с промисами и синтаксическим сахаром async/await, которые значительно упрощают работу с асинхронным кодом и делают его более читаемым и понятным.
В статье расскажу и покажу, как сверстать письмо, чтобы оно наверняка правильно отображалось во всех почтовых клиентах — особенно в Outlook, который до сих пор возглавляет подборки по популярности в РФ.
В конце — пример целого письма в HTML.