Если у вас есть аккаунт на 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 года (у нас была попытка сделать что-то совсем своё), и мы получаем много положительных отзывов:
Идея нехитрая, но очень заманчивая — пишешь CSS, пишется и CSS и HTML одновременно.
В этой статье разбирается воплощение идей akopyl в виде JS-фреймворка.
Особая благодарность автору идеи akopyl.
Пришло время дочке учить таблицу умножения, и я не смог найти нормальных тренажеров. В итоге, пара часов работы над программной частью и день работы над UI/UX вылились в полноценную игру для Яндекс.Игр.
Моя идея была простой — создать понятный и удобный тренажер для изучения таблицы умножения. Но, как это часто бывает.
Привет Хабр!
Меня зовут Алекс, и я автор фронтенд-библиотеки для создания UI-компонентов-агностиков - Symbiote.js. Я не единственный разработчик, но главный контрибьютор и тот, кто отвечает за концепцию, развитие, документацию, деврел, DX все остальное. Мейнтейнер то есть. Всем этим я занимаюсь в свободное от другой работы время, на которой я фуллстек, R&D-инженер и техлид.
Сегодня, я бы хотел рассказать о том, как появился Симбиот, и почему он вообще существует, при наличии огромного зоопарка библиотек и фреймворков для фронтенда, с куда более значительной аудиторией и поддержкой от крупных IT-компаний. Ведь мы, инженеры, очень НЕ любим, когда вокруг нас начинают плодиться лишние сущности, и сразу начинаем угрожающе размахивать бритвой Оккама. Верно? (хитро прищурился)
Всем доброго времени суток. Давно я что-то ничего не писал, и вот созрел. Предлагаю сегодня поговорить о ui-системе. Зачем она нужна, когда она нужна, что дает, какие минусы имеет и вообще стоит ли ввязываться в это блуд. Я часто слышу на разных конференциях, что панацея от всех болезней в бизнесе — это наличие дизайн-системы (ui-системы). Что, как только вы достигаете ее, то сроки сокращаются в 100500 раз. Что разработчики не хотят открутить голову дизайнерам, и, наоборот, что качество продукта возноситься до небес, и еще много всего восхитительного об этой сущности. Но так ли все это ? Или это просто розовые очки, которые застилают глаза всех причастных к созданию ui-системы в компании и побочка от постоянных нервных срывов, скандалов, поиска компромиссов и просто выгорания? В этой статье я постарался разобраться, а стоит ли игра свеч или как в анекдоте про нюансы.
Для начала, чтобы рассуждать, что чем является, нам потребуется разобраться в понятиях и терминах предметной области.
UI - kit — это полный набор элементов и компонентов, необходимый для сборки большого однородного продукта. Он включает различные кнопки, иконки, поля для ввода данных и т. д. и позволяет сохранять узнаваемость продукта и доверие пользователей. Так мне сказал поисковик, я спорить не стал.
UI component являются основными блоками и элементами для дизайна пользовательского интерфейса. Они предоставляют пользователям способ взаимодействия с вашим веб-сайтом или приложением. Этими компонентами могут являться интерактивный текст и графика, которые сообщат пользователю, что делать дальше.
Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.
Сегодня мы рассмотрим следующие аспекты:
disabled от скринридера.Давайте начнём!
Окончание статьи по быстрой разработке гипермедиа-ориентированного веб-приложения с HTMX 2.0.
Третья часть короткой обучающей статьи по разработке приложений, ориентированных на гипермедиа. В этой части вы можете завершить создавать свое первое гипермедиа-ориентированное приложение. В этой части будет добавлено несколько новых гипермедийных элементов на страницу игры и будут созданы страницы результатов игры.
В статье будет использоваться библиотека Htmx.js вместе с устаревшей серверной платформой ASP.NET MVC 5.
Продолжение статьи по быстрой разработке гипермедиа-ориентированного веб-приложения с HTMX 2.0.
Вторая часть короткой обучающей статьи по разработке приложений, ориентированных на гипермедиа. В этой части вы можете продолжить создавать свое первое гипермедиа-ориентированное приложение. В этой части будет произведен рефакторинг, будут добавлены несколько новых гипермедийных элементов на страницу ожидания игры и будет создана страница игры.
В статье будет использоваться библиотека Htmx.js вместе с устаревшей серверной платформой ASP.NET MVC 5.
Приветствую всех! В данной статье, речь пойдёт о достаточно необычной теме, информацию о которой я почему-то не нашёл, хотя она достаточно полезна в современных JavaScript фреймворках и библиотеках для создания пользовательских интерфейсов, ведь, в некоторых случаях, применение концепции может помочь ускорить работу с DOM в несколько раз.
Начало статьи по быстрой разработке гипермедиа‑ориентированного веб‑приложения с HTMX 2.0.
Первая часть короткой обучающей статьи по разработке приложений, ориентированных на гипермедиа. В этой части вы можете познакомится с гипермедийными системами и начать создавать свое первое гипермедиа‑ориентированное приложение.
В статье будет использоваться библиотека Htmx.js вместе с устаревшей серверной платформой ASP.NET MVC 5.
Если ребенок интересуется веб‑разработкой, его увлечение нужно поддержать. В этом помогут обучающие ролики или курсы HTML, CSS и JavaScript. Направление перспективно: оно знакомит даже неопытных школьников с IT, а также приближает их к пониманию основ написания кода. Если появится желание, можно пройти дополнительное обучение и освоить создание сайтов и программирование на продвинутом уровне.
Хочу отметить, что с освоением веб‑разработки способен справиться даже неопытный школьник, что возможно благодаря множеству простых способов обучения. Их действительно хватает, поэтому предлагаю рассмотреть варианты, доступные детям и подросткам: видеоролики в свободном доступе, предназначенные для самостоятельного просмотра.
Планомерное знакомство с роликами и понимание содержания каждого из них поможет построить эффективный маршрут дополнительного IT‑образования для ребенка, увлекающегося веб‑разработкой. Уроки подойдут подросткам от 12 лет и старше.
Всем привет! Помните череду недавних анонсов от IT-гигантов, о различном ИИ-функционале, внедренном во все, что только можно? Среди этих анонсов, например, были помощники в написании текстов писем и сообщений для почтовых и других сервисов. Эти помощники могут проверить вас на ошибки, перевести текст на другой язык, поменять тональность и настроение текста, сделать его более кратким, либо, напротив, дополнить.
На мой скромный взгляд, сейчас складывается такая ситуация, что создавать собственные ИИ-сервисы общего назначения очень рискованно, ибо крупным компаниям не составит труда воспроизвести ваш функционал, имея доступ к более значительным ресурсам, как вычислительным, так и в плане данных. Но и у нас, независимых разработчиков и энтузиастов, есть свои преимущества: мы можем создавать решения на уровне библиотек и компонентов, которые будут способны размыть и скорректировать разницу в конкурентных преимуществах, между гигантами и мелкими стартапами.
Итак, в этом материале, я предлагаю вам вместе со мной создать умный HTML-тег - текстовое поле, которое сможет помогать пользователю в настройке введенного текста. Этот тег можно будет использовать на любом сайте, в любом веб-приложении, созданном с помощью любого современного фреймворка, или даже, в простом статическом HTML-файле.
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.
Фронтенд — это то, что видит и с чем взаимодействует каждый пользователь интернета, но как он работает на самом деле?
Эта идея получила новую жизнь примерно восемь месяцев назад, когда Reworked AI представили llama 2d. Они научили языковые модели не просто «читать» текст, а по-настоящему воспринимать структуру и смысл двухмерных документов, таких как веб-страницы. Перед тем как расскажу как это работает - пару не очень удачных подходов, по которым пытались идти их конкуренты