В версии 2.1.3, помимо прочего, был введён новый функционал для улучшения производительности сайтов, использующих hmpl.js.
Мемоизация запроса - это один из отличнейших способов оптимизации в программировании. «Что это? Как оно работает?» - на эти вопросы я постараюсь ответить в данной статье.
Идея нехитрая, но очень заманчивая — пишешь 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-файле.
Приветствую всех! В данной статье хотелось бы рассмотреть такой проект как HMPL.js. "Зачем он нужен и как благодаря нему можно сократить размеры javascript файлов с сохранением дизайна сайта?" - на все эти вопросы я постараюсь ответить.
Так как данный проект является активно мной разрабатываемым, то данным блогом я бы хотел начать для себя активную отчётную деятельность, где аудитория, как в роли заказчика, а я, как в роли исполнителя, буду делать небольшие статьи о проделанной работе. Если вам будет интересна данная идея, то будет круто, если вы оставите комментарий по данной теме! Мне будет очень интересно прочитать!
Фронтенд — это то, что видит и с чем взаимодействует каждый пользователь интернета, но как он работает на самом деле?
Эта идея получила новую жизнь примерно восемь месяцев назад, когда Reworked AI представили llama 2d. Они научили языковые модели не просто «читать» текст, а по-настоящему воспринимать структуру и смысл двухмерных документов, таких как веб-страницы. Перед тем как расскажу как это работает - пару не очень удачных подходов, по которым пытались идти их конкуренты
Для некоторых задач, связанных с обновлением данных в реальном времени — например, новостные ленты, уведомления или поток чата, можно обойтись без сложных двусторонних протоколов, как WebSocket. Мы можем использовать простой механизм передачи данных от сервера к клиенту через HTTP, который часто оказывается удобнее и эффективнее в настройке для однонаправленного обмена данными.
Всем привет! В данной статье я бы хотел рассказать о таком понятии как "ключи" в JavaScript фреймворках и библиотеках; зачем они используются и как помогают при работе с DOM.
Зачастую, на собеседованиях спрашивают про эту тему и нередко выходят ответы по типу: "чтобы предотвратить неконтролируемое поведение" или "их нужно указывать, т.к. это что-то на подобие уникальных идентификаторов" и др. Конечно, данные ответы с одной стороны - правильные, но главного они не отражают.
Я постараюсь внести небольшую ясность в эту тему показав то, как эта концепция работает на реальных примерах и какой код за ней стоит.
13 августа стартовал 13-й игровой джем js13kGames (JS13K) для разработчиков веб-игр на JavaScript. За месяц участникам предстоит написать браузерные игры, размер которых не должен превышать 13 килобайт при сжатии до формата ZIP. Темой JS13K этого года выбрали «Трискайдекафобию» — боязнь числа «13».
Новая предметная область
ИИ - тема хайповая. Часто мы рассуждаем о том, сможет ли ИИ заменить мясных программистов и если сможет, то когда именно. Есть два базовых полярных мнения и множество комбинаций между ними: на одном полюсе считают, что скоро нам всем кирдык и интеллектуальный труд доживает последние дни. На другом полюсе - скептически ухмыляются, и говорят, что никакой особенной угрозы нет: у ИИ нет и никогда не будет того, что есть у человеческих мозгов.
У многих из нас уже есть опыт общения с разными нейросетями, как позитивный так и не очень. И еще имеется, я бы сказал, некий "странный" опыт, отдельная категория, от которого больше вопросов чем ответов. Техно-гиганты анонсируют повсеместное внедрение и тотальную разумность будущих железяк. А мы, тем временем, удивляемся, каким-же, кхм... тупым и ленивым может быть этот всемогущий ИИ, если его попросить сделать что-то действительно полезное.
В этой статье я предлагаю перейти от общих рассуждений в более прагматическую плоскость, и посмотреть на ИИ не как на возможную угрозу нашему будущему, а как на новую платформу для разработки, открывающую множество новых неизведанных и неожиданных возможностей, ну и, кучу новой работы для нас, программистов, естественно. Именно активное практическое применение современных возможностей ИИ я называю новой предметной областью, достойной пристального внимания и подробнейшего рассмотрения.
Сразу выдам ссылки на скачку того, о чем пойдет речь, чтобы ничего не потерялось и никто не теребил меня, что и где искать/качать (бесплатное и безрекламное android-приложение):
Прямая ссылка (если скачка с гугл-плей недоступна)
Ссылка вконтакте на видеообзор SystemCook v14.0 (если у вас проблемы с youtube)
Ранее про SystemCook я уже рассказывал на хабре в двух предыдущих статьях тут и тут. Знаю, что много хабровчан пробовало старые версии приложения в процессе разработки, т.к. веду статистику и "мёртвых" аккаунтов у меня в базе полным-полно (кстати, если кто потерял пароль - пишите на мыло, напомню, только скажете, на какой email регистрировались). Сейчас я подытожу, что в итоге у меня вышло, расскажу свои дальнейшие планы и буду ждать от вас фидбека в комментариях.
Прогресс за три года разработки, с июня 2021: