В веб-разработке не так просто добиться идеально масштабируемого дизайна для разных браузеров и устройств. Трудности могут возникать везде, от настройки стиля для экранов разных устройств до переопределения стилей, попавших в наш код неизвестно откуда.
Самозакрывающиеся теги - зло? Prettier не прав? Разбор с примерами острой темы в HTML, где все будет разложено по полочкам
display: flex;
justify-content: center; /* Горизонтальное центрирование */
align-items: center; /* Вертикальное центрирование */display: grid;
justify-items: center; /* Горизонтальное центрирование */
align-items: center; /* Вертикальное центрирование */justify-content стало justify-items.
В данной статье я бы хотел провести последний отчёт по быстродействию Cample.js. За два года работы над фреймворком, сложились небольшие результаты, которые я бы хотел рассмотреть.
Отчёт включает в себя сравнения по производительности с популярными библиотеками и фреймворком, а также сравнение с реализацией на чистом javascript.
В прошлом, вышли отчёт № 0 и отчёт № 1, в которых я в похожей манере проводил тесты фреймворка, в этом же отчёте, я думаю, заострить внимание больше на результаты работы.
Все результаты тестов основаны на показателях keyed реализации в репозитории js-framework-benchmark в github. Сами они располагаются на странице выпуска №123.
Привет! Я frontend-разработчик в одной компании, занимающейся электронной коммерцией.
Не буду долго рассказывать о себе, о компании и о том, как возникла потребность написать подобный проект, сразу приступлю к описанию решения.
Представим, что у вас порядка 500-1000 доменов и 5-10 разных дизайнов сайтов, распределенных между этими доменами примерно так:
Доказано.
Пример реализации на чистом HTML и CSS конечного автомата, а именно, мини-калькулятора, складывающего два числа, заданных в двоичном формате.
Учеба в политехе заключается в сдаче лабораторных работ. Буквально. Очень редко бывает такое, что на парах мы чему-то учимся, зачастую все завязано на самообучении. Грубо говоря, вот вам методичка, разбирайтесь сами, через неделю дедлайн.
В связи с этим мы столкнулись с очередями на сдачу этих лабораторных. Сначала просто писали в общий чат, кто каким будет в очереди (например, "я первый", "я вторая", "я третий" и т.д.). Далее решили создать расшаренную таблицу в гугле для формирования очередей. Однако долго она тоже не прожила, так как со временем появились "умники", которые стали ставить себя первыми в очереди, сдвигая остальных вниз. Потом общий доступ для таблицы закрыли, и было принято решение для записи на сдачу писать старосте, он, в свою очередь, будет добавлять студентов в список. Но староста группы не может быть постоянно на связи, иными словами, оперативно добавиться в очередь было просто невозможно.
В связи с этим я задумался над созданием автоматизированной очереди. В качестве стека основных технологий выбрал HTML5+CSS3 для фронтенда, PHP для бэкенда. В качестве СУБД был выбран phpMyAdmin (SQL-DB). В первую очередь, конечно, необходимо было продумать структуру базы данных. Предметная область информационной системы уже была сформулирована: "Очередь на сдачу лабораторных работ с возможностью записи по отдельным дисциплинам, удаления своей записи. Учет истории создания записи, удаления записей, включая время записи. Возможность смены пароля, просмотра профиля." Даталогическая модель БД была построена в MySQL Workbench 8.0 CE в нотации IDEF1X.
Привет, Хабр. Сегодня мы посмотрим на достаточно тривиальную тему с совсем нетривиальной стороны. Пожалуй, для каждого вебера HTML-инъекции являются темой, которой зачастую уделяют не очень много внимания. Взять даже собеседования: когда в последний раз вас спрашивали не об XSS'ках, а об HTML-инъекциях?
Сегодня я попробую рассказать про большую часть интересных векторов, которые мы можем использовать при ограничении в применении JS. Не стесняйтесь пользоваться оглавлением, потому что статья подготовлена для разного уровня читателей. Чтобы не обделять новичков, я достаточно подробно описал работу HTML, ее структуры и даже то, как HTML парсится браузером!
Hello world!
По данным 2023 JavaScript Rising Stars библиотека htmx заняла второе место в разделе Front-end Frameworks (первое место вполне ожидаемо принадлежит React) и десятое место в разделе Most Popular Projects Overall.
htmx — это библиотека, которая предоставляет доступ к AJAX, переходам CSS, WebSockets и Server Sent Events прямо из HTML через атрибуты, что позволяет создавать современные пользовательские интерфейсы (насколько сложные — другой вопрос), пользуясь простотой и мощью гипертекста. На сегодняшний день у библиотеки почти 30 000 звезд на Github. Удивительно, что до такого решения мы додумались только сейчас, учитывая, что весь функционал был доступен уже 10 лет назад (вы сами убедитесь в этом, когда мы изучим исходный код htmx).
В этой статье мы с вами разберемся, как htmx работает. Но давайте начнем с примера ее использования.
Я разработал игру Desert Racer, чтобы показать уникальные и инновационные приемы, которые используют только CSS, включая функционал свайпа и детектирования столкновений, выполненные исключительно средствами CSS. На мой взгляд, это первые в своем роде решения. Вы вольны бросить вызов этому утверждению. В данной статье мы рассмотрим упомянутые техники и обсудим общие этапы создания игры со свайп-управлением.
Идеален ли CSS для этой задачи? На данный момент, возможно, нет. Однако CSS начинает заменять некоторые функции обработчиков событий JavaScript. Я надеюсь, что эта статья внесет вклад в продвижение к этой цели. В конце концов, как творческому человеку, мне нравится использовать неподходящие инструменты для создания чего-то, что считается невозможным — это вызов, который я не могу игнорировать. У меня было предчувствие, что это должно работать, и оно оправдалось.
Эта статья предложит вам интерактивный и, надеюсь, вдохновляющий опыт. Приятного прочтения! (По крайней мере, вы можете прокрутить вниз, чтобы посмотреть крутые GIF-анимации)
Всем привет! В этой статье я хотел бы поделиться своими мыслями о том, почему виртуального DOM можно избежать при создании реактивности сегодня. Я работаю со всем этим уже около полутора лет, создавая фреймворк Cample.js, и у меня есть некоторые соображения по этому поводу.
Приложениями пользуются разные люди, и некоторым из них для этого нужны вспомогательные технологии — например, скринридеры (программы экранного доступа). Такие программы могут озвучить контент на странице, если приложение соответствует определённым стандартам. Например, они могут прочесть текст из параграфов и заголовков, списки, альтернативные описания изображений, ссылки, переключатели и другие интерактивные элементы. Таким образом скринридеры обеспечивают доступ незрячих пользователей к контенту и сервисам.
Повышая доступность интерфейса для пользователей скринридеров, мы также улучшаем его доступность и для людей с другими особенностями здоровья. Например, для тех, кто использует системную настройку «Экран вслух» или взаимодействует с интерфейсом с помощью голосового управления.
Однако навигация со скринридерами по страницам и экранам отличается от обычной, поэтому нужно соблюдать несколько правил при сборке интерфейса приложений.
Привет! Я Вячеслав Дорогинин, занимаюсь фронтендом WebView клиентского приложения Лавки. В этой статье расскажу, как мы адаптировали приложение для работы с популярными скринридерами, с какими трудностями столкнулись и как их решили.
Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильей. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.
Сегодня мы рассмотрим следующие аспекты:
<label>;inputmode="numeric" улучшающий мою жизнь;Давайте начнём!
В этой статье мы создадим desktop-приложение, которое по нашему запросу будет сохранять на нашем диске заданное количество картинок. Так как картинок будет много, мы воспользуемся асинхронностью Python для конкурентной реализации операций ввода-вывода. Посмотрим, чем отличаются библиотеки requests и aiohttp. Также создадим два дополнительных потока приложения, чтобы обойти глобальную блокировку интерпретатора Python.
В этой статье вы узнаете про то как я вижу современную и актуальную карту развития frontend разработчика, я расскажу про основные технологии которые необходимы для старта, и как сделать свои первые шаги в frontend разработке.
Сталкивались ли вы с проблемой, когда вам не хватает рук при использовании телефона? Например, у вас одна рука занята пакетами или испачкана в чипсах, а до кнопки "назад" не дотянуться.
В декабре 23-го года Material for MkDocs обновился до версии 9.5, но из-за регрессов переходить на него многие не решились. Но сейчас версия уже достаточно стабильная и исправленная, поэтому я хотел бы поделиться с вами, что нового привнесла эта версия и какие лайфхаки я применил при переходе на эту версию при работе с документацией (и вам советую перейти также).
В современном мире, где цифровая трансформация становится неотъемлемой частью нашей повседневной жизни, веб-приложения занимают ведущее место, предоставляя доступ к огромному разнообразию услуг и информации. От онлайн-магазинов до банковских систем, от социальных сетей до систем управления данными - веб-приложения охватывают практически все аспекты нашего взаимодействия с цифровым миром.
Однако, с ростом функциональности и сложности веб-приложений, неизбежно возрастает и уровень угроз для их безопасности. Кибератаки становятся все более изощренными и масштабными, нацеленными на различные слои архитектуры приложений. Особенно уязвимым является уровень Backend, который обрабатывает и хранит критически важные данные, такие как данные пользователей, финансовая информация и другие конфиденциальные данные. Несанкционированный доступ к этим данным или их изменение могут привести к серьезным последствиям, как для пользователей, так и для организаций.
Целью данной работы является анализ и оценка методов защиты веб-приложений на уровне Backend от различных видов угроз и атак.
Привет! Это первая статья из серии разборов элементов веб-вёрстки для дизайнеров интерфейсов (и немного аналитиков). Разберём атрибуты разных тегов, свойства, которые можно к ним применить, поведение в разных обстоятельствах. А главное – как они влияют на то, что видит пользователь на экране (и слышит), и какие неочевидные моменты можно продумать в дизайне заранее.
Начнём со ссылок, которые обозначаются в HTML тегом <a></a>.