Хабр, привет! Я частенько пишу про работу CSS, его неизвестные возможности и влияние на доступность. Кажется, этих направлений мало для меня. Теперь я хочу показать техники вёрстки, используемые мной постоянно.

Цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но, пожалуйста, относитесь к этому контенту, как просто альтернативному мнению. Мои техники не являются единственными правильными решениями.

Сегодня я расскажу:

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

DeepNude — это технология, использующая нейросети для создания изображений обнаженных тел на основе одетых фотографий или видео. Суть этой технологии заключается в том, чтобы "снять" одежду с изображения человека с помощью искусственного интеллекта и показать, как, предположительно, выглядит тело человека под одеждой.

Итак, в данной статье поговорим о пикантных и для некоторых людей непристойных темах, которые больше всего интересуют наше общество - обнаженное тело. Сделаем обзор таких сервисов как: Deepnude.ai, Deepfake.com, DeepSwap.ai, SoulGen и прочих.

Недавно мне посчастливилось развернуть Next.js на сервере с помощью PM2. Этот способ я не нашел в документации фреймворка, хотя считаю его довольно удобным, при этом гайдов по теме оказалось очень мало. Рассказываю, как всё сделать, и привожу рабочие примеры.

Любая достаточно сложная программа на Си или Фортране содержит заново написанную, неспецифицированную, глючную и медленную реализацию половины языка Common Lisp. — Десятое правило Гринспена

Все верстальщики рано или поздно сталкивались с болью, которая заключается в адаптиве сайта под различные устройства. Существуют разные технологии, упрощающие подгонку размеров под определённые устройства, например, 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; /* Вертикальное центрирование */

Демонстрация анимаций

В моем предыдущем посте 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 при вёрстке кастомных чекбоксов;
• мой любимый лайфхак на основе пользовательских CSS-свойств.

Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.

Всем привет! Меня зовут Анатолий Барцев, я frontend-разработчик в команде Модерации Циан. Я решил протестировать Copilot, чтобы оценить, полезен ли он для реальной разработки. В статье расскажу, какие выделил для себя плюсы использования, а также покажу, как GitHub Copilot помогает в разработке на примере проекта на React/Typescript.