HTML *

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

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

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

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

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

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

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

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

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

Всем доброго времени суток. Давно я что-то ничего не писал, и вот созрел. Предлагаю сегодня поговорить о ui-системе. Зачем она нужна, когда она нужна, что дает, какие минусы имеет и вообще стоит ли ввязываться в это блуд.  Я часто слышу на разных конференциях, что панацея от всех болезней в бизнесе  —  это наличие дизайн-системы (ui-системы). Что, как только вы достигаете ее, то сроки сокращаются в 100500 раз. Что разработчики не хотят открутить голову дизайнерам, и, наоборот, что качество продукта возноситься до небес, и еще много всего восхитительного об этой сущности. Но так ли все это ? Или это просто розовые очки, которые застилают глаза всех причастных к созданию ui-системы в компании и побочка от постоянных нервных срывов, скандалов, поиска компромиссов и просто выгорания? В этой статье я постарался разобраться, а стоит ли игра свеч или как в анекдоте про нюансы. 

Для начала, чтобы рассуждать, что чем является, нам потребуется разобраться в понятиях и терминах предметной области.  

UI - kit — это полный набор элементов и компонентов, необходимый для сборки большого однородного продукта. Он включает различные кнопки, иконки, поля для ввода данных и т. д. и позволяет сохранять узнаваемость продукта и доверие пользователей. Так мне сказал поисковик, я спорить не стал.

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

Приветствую всех! В данной статье, речь пойдёт о достаточно необычной теме, информацию о которой я почему-то не нашёл, хотя она достаточно полезна в современных JavaScript фреймворках и библиотеках для создания пользовательских интерфейсов, ведь, в некоторых случаях, применение концепции может помочь ускорить работу с DOM в несколько раз.

Начало статьи по быстрой разработке гипермедиа‑ориентированного веб‑приложения с HTMX 2.0.

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

В статье будет использоваться библиотека Htmx.js вместе с устаревшей серверной платформой ASP.NET MVC 5.

Всем привет! В данной статье я бы хотел рассказать о таком понятии как "ключи" в JavaScript фреймворках и библиотеках; зачем они используются и как помогают при работе с DOM.

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

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

В этой статье, я хочу показать базовые приемы работы с HTML-таблицами при использовании библиотеки Symbiote.js и раскрыть на практике некоторые ее важные особенности.

Вместе с Creative Developer We Wizards Даниилом Сарабьевым сделаем сервис, позволяющий получить случайный набор закрытых таро с возможностью вскрыть выбранные карты.

Каждый Frontend-разработчик знает, что такое объект Window. С самими объектом, вроде бы, все понятно. Но при детальном рассмотрении оказывается, что браузер никогда не отдает этот важнейший глобальный объект напрямую. В этой статье я предлагаю разобраться в спецификации HTML и в том, как именно ведет себя браузер в части глобального контекста.

Часто, при разработке сайтов на фреймворках, не придаётся особого внимания деталям, которые в данный фреймворк включены. И это нормально, ведь главная задача фреймворка - чтобы удобно было сайт делать и чтобы он был быстрым и функциональным. Но, эти детали тем и интересны, что узнав некоторые моменты, взгляд на javascript разработку чуть дополняется.

Недавно, в процессе реализации одного из модулей проекта, над которым я работаю — возникла проблема воспроизведения видео на web странице, а также возникли проблемы с его адаптацией под iPhone и iPad.

Проблема была в следующем:

Создал веб‑страницу HTML5, на которой есть небольшое видео, создал свою control‑panel для плейера, и все отлично работает в Chrome и FireFox, но совсем не работает ни на iPhone, ни на iPad. Получаю просто пустую страницу.

В Институте бизнеса и дизайна состоялась научная конференция «Эмоции в цифровой культуре: репрезентация, выражение, потребление»

18 и 19 февраля в Институте бизнеса и дизайна проходила научная конференция на тему «Эмоции в цифровой культуре: репрезентация, выражение, потребление». Участники обсудили самые актуальные вопросы цифровых гуманитарных наук: может ли нейросеть быть субъектом и как устроены отношения человека и искусственного интеллекта? Как в видеоиграх работают законы морали и почему «цифровые кладбища» становятся популярными?

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

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

HTML-атрибут hidden=until-found и событие beforematch могут решить эти проблемы. Добавляя hidden=until-found в контейнер для вашего скрытого контента, вы позволяете браузеру искать текст в этой скрытой области и открывать раздел, если совпадение найдено.

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

Эти функции доступны в Chrome 102, поэтому давайте посмотрим, как они работают.

Добрый день хабр! Решил поделиться своим небольшим, но полезным открытием в плане использования html data-attributes & css selectors.

Html data-attributes - это кастомные атрибуты, которые вы можете сами назначать куда-угодно и с каким угодно именем (но имя должно начинаться с префикса data-). Затем вы можете использовать их в css селекторах, чтобы влиять на содержимое классов и уже классами управлять элементами. Движок браузера автоматически среагирует на изменение data-атрибута и применит соответствующий код css класса.

В этой статье мы будем рассматривать ускорение работы страницы только с помощью файлов HTML и CSS

Делиться своими идеями с сообществом - хорошо и правильно. Это позволяет развиваться, перенимать лучшие практики, исследовать новые инструменты, учиться оформлять свои решения. Но какой код стоит выносить в общий доступ? И как делать это на постоянной основе? Чтобы разобраться в этих вопросах я решил сделать свой Javascript OpenSource Boilerplate - маленькую, но максимально расширяемую библиотеку компонентов. Она называется handy-ones.

Анимация — несколько рисунков, показанных последовательно, чтобы создать иллюзию движения. Анимации привлекают внимание пользователей и помогают сделать интерфейсы понятными. Мы подготовили перевод статьи, чтобы разобраться, как контролировать движения и переходы в CSS.