HTML *

Рассмотрим распространенные ошибки которые допускают разработчики при работе с tailwind и пути их решения.

Микроразметка сайта: личный опыт и решения. Никита Неминущий, ведущий инженер-программист «Выберу.ру», рассказывает о том, как на их сайте была реализована микроразметка и какие трудности пришлось преодолеть. Узнайте, как микроразметка влияет на поисковую выдачу и какие инструменты помогли упростить процесс ее добавления.

Здравствуйте, товарищи! Сегодня мы снова поговорим про тулинг для фронтенда. В этот раз обсудим разработку плагинов для сборщиков, таких как: Webpack, Vite, esbuild и подобных. За основу мы возьмем Unplugin.

Короткий ответ на вопрос из заголовка: пока никак. Чуть более длинный - изображен на обложке. А в качестве полноценного ответа, предлагаю вам эту статью. Попробуем хотя бы приблизиться к заявленному результату.

Сразу стоит уточнить: это не туториал, а скорее case-study.

^{"И так сойдет" ((c) М/Ф "Вовка в 3/9 царстве")
"Работает - не чини" ((c) вольный перевод афоризма Б.Ланса "If it ain't broke, don't fix it")}

К появлению этой статьи привело совпадение нескольких событий.

Рынок с каждым днем развивается и для текущих разработчиков главной задачей всегда является держать руку на пульсе и быть с курсе всех изменений в сфере IT. Будь то технологии, библиотеки, либо архитектурные решения. Программисты любого направления Middle уровня и выше понимают, что главная ценность в разработчике это — решать проблему лучшим, доступным и самым простым способом. И для достижения этой цели необходимо использовать определенный набор инструментов, который не всегда одинаковый.

Приведу аналогию.

Мы знакомы с поведением поля ввода пятизвездочного рейтинга. Отображены пустые звезды. Пользователь решает, сколько баллов из пяти будет содержать его оценка. Он выбирает (тап/клик) звезду, которая соответствует оценке (в зависимости от позиции с начала). Выбранная звезда и все звезды, расположенные перед ней, отображаются закрашенными, что обозначает их активное состояние. Если, например, пользователь хочет оценить на три из пяти, он кликает на третьей звезде. После этого первая, вторая и третья звезда «зажигаются». Если не выбрана ни одна звезда, считается, что пользователь не оценивал и оценка не приравнивается к нулю. Оценив однажды, пользователь не может вернуться, чтобы отменить оценивание.

Векторизация — это процесс преобразования растрового изображения (состоящего из пикселей) в векторное изображение, которое описывается математическими формулами. Векторные изображения имеют несколько преимуществ, таких как возможность масштабирования без потери качества и меньший размер файла для определённых типов графики.

В контексте вашего вопроса, если вы преобразуете картинку в векторное отображение с картой высот, это может означать, что вы создаёте векторную графику, которая также включает информацию о высоте или рельефе, что может быть полезно, например, в 3D-моделировании или при создании карт.

Причины написания статьи, общие правила использования handlebars в superset и советы содержатся в первой статье, поэтому сразу опишу следующие шаблоны.

Всем привет. Я Андрей Осипов, фронтендер из Контура. Почти три года назад, когда у компании был еще старый фирменный стиль, мы столкнулись с проблемой экспорта из фигмы изображений в формате SVG. Сложность была с изображениями, где был эффект глассморфизма, он же эффект матового стекла (frosted glass).

Недавно чисто из любопытства я решил проверить, починили ли в Figma эту проблему. Проблема осталась. Плагинов так и нет, а гугл не предлагает хороших решений. Поэтому решил выложить эту статью сюда, может, кому пригодится.

Привет, Хабр! В прошлый раз мы с вами создавали «Игру жизни» на Godot. Движок показал себя отлично, но для такой простой задачи это всё равно что забивать микроскопом гвозди. Особенно когда речь идёт о веб‑экспорте.

В последнее время стоит заикнуться про генерацию изображений, как все сразу вспоминают про нейросети. Stable Diffusion, Midjourney и прочие модели впечатляют, не спорю. Но давайте взглянем на другую сторону генеративного искусства. Ту, где картинки создаются не гигабайтами весов нейронной сети, а несколькими килобайтами JavaScript-кода.

И кстати раз уж речь зашла про красоту в коде: мы как раз запустили «Конкурс красоты кода 2.0». Самое время показать, что даже простые алгоритмы могут создавать нечто впечатляющее. Именно такие работы, где за внешней простотой скрывается математическая элегантность, часто оказываются самыми интересными.

Признаюсь, поначалу я была скептиком ручного кодирования SVG. Будучи фронтенд-разработчиком, привыкшим приводить в порядок "плохие" SVG-файлы, я никогда всерьез не задумывалась о том, чтобы самой рисовать с помощью кода.

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

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

Apache Superset всё чаще становится выбором для визуализации данных благодаря открытому коду. Но, увы, столкнувшись с его ограничениями и тонкостями, даже самые опытные пользователи могут столкнуться с трудностями. Есть много ограничений, которые требуют обращения за доработками к разработчикам, но с помощью шаблона Handlebars в сочетании с шаблонизацией jinja некоторые трудности можно обойти.

С его помощью можно внедрить web-верстку прямо в ваши дашборды, обходя множество подводных камней. Готовых шаблонов для handlebars (superset) мало, так как это довольно трудоемкая задача, часто выходящая за рамки работы с готовыми BI-системами.

Вот что вам нужно знать:

Document "picture-in-picture" дает вам больше возможностей для управления окнами "picture-in-picture".

Вложенные объявления в CSS - исправление некоторых сложных ситуаций.

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

И многое другое.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam erat leo, tempus at malesuada sed, dapibus vitae ipsum. Morbi vitae dignissim lectus. Nulla lectus nisl, pretium sit amet viverra vitae, feugiat quis nunc. In semper justo orci. Praesent ultrices risus eu odio ornare suscipit. Pellentesque dapibus mauris magna. Sed congue, quam ut pharetra euismod, justo augue cursus ex, congue volutpat orci metus non enim. Suspendisse orci justo, vehicula et rhoncus eu, eleifend ut massa. Morbi sodales mauris felis, id tincidunt nulla congue quis.

Если у вас есть аккаунт на Vercel, вы, наверное, замечали, как плавно фон ссылок в панели навигации перемещается, следуя за курсором мыши. Такого эффекта несложно добиться с помощью CSS и нескольких строчек JS. Однако, интереса ради, я решил попробовать добиться похожего эффекта на чистом CSS.

Ссылка на конечный результат для тех, кто спешит: https://codepen.io/simzikov/pen/zYgojrb. Остальных прошу читать далее.

Сейчас пытаются автоматизировать с помощью ИИ вообще все: от программистов до консультантов, и врачей. Количество стартапов и сервисов для этого становится больше год к году. Насколько эти инструменты хороши и можно ли уже отказаться от продуктовой команды, заменив ее на пару сервисов за 20$ в месяц? Давайте попробуем!

Хочу рассказать про один из моих любимых Opensource проектов: Tauri. Это среда для создания десктопно-мобильных приложений на JavaScript, но быстрых и легковесных. С опциональными дополнениями на Rust, а через него и на всех других языках.

Про то, что такое бесконечная лента (Infinity Scroll, Feed) - есть много статей, постов, гайдов по реализации самого функционала, и, кажется, рассказывать про то, как именно ее реализовать и что это такое - не идея этой статьи. Так же, как и рассказывать о плюсах и минусах этого подхода. Если Вы все же не знаете, что это за чудо инженерной мысли - можно ознакомиться тут.

Лично я хочу сосредоточиться на доступности такой ленты, а в конце - пример реализации на простом HTML/CSS/JS с поддержкой альтернативного управления, однако такой пример легко портировать на любой другой фреймворк/библиотеку.

Хекслет и все его сайд-проекты: code-basics.com, codebattle.hexlet.io, guides.hexlet.io реализованы с помощью Bootstrap. Причем, в основном, это стандартный бутстрап, иногда расширенный с помощью его встроенных механизмов (theming).

Почему мы это делаем?

Процесс разработки, который включает в себя этап дизайна, а следом и верстки, значительно медленнее, чем процесс, в котором интерфейсы создаются из готовых блоков без привлечения дополнительных людей. Думаю, не ошибусь, если скажу, что скорость отличается в разы. По моей оценке, задача на полдня может выливаться в неделю работы.

Это особенно важно, учитывая, что для современных it-бизнесов наиболее критичная метрика — time to market, то есть скорость, с которой изменения доставляются до пользователей. Быстрые и частые релизы позволяют не тратить время на ненужные вещи и делать только то, что пользователям нужно по-настоящему.

Кроме удлинения цикла релиза появляются и другие проблемы. Дополнительные люди - это дополнительные деньги, причем весьма серьезные для Хекслета, да и для многих других компаний. А больше людей означает больше времени на синхронизацию. Невозможно сделать хороший дизайн, не понимая пользователей и не побывав в их шкуре.

С плюсами понятно, а что насчет минусов? Ведь сайт выглядит не “круто”.

Как показывает практика, влияние дизайна на успешность продукта нередко переоценивается. Более того, на Хекслете происходит ровно наоборот. Сейчас дизайн более стандартный для Bootstrap, чем был в начале 2018 года (у нас была попытка сделать что-то совсем своё), и мы получаем много положительных отзывов: