Все потоки
Поиск
Написать публикацию
Обновить
62.3

HTML *

Стандартный язык разметки web-страниц

Сначала показывать
Порог рейтинга
Уровень сложности

Искусство компонентов. Пишем карточку контакта Facebook Messenger

Время на прочтение12 мин
Количество просмотров9.1K
Вполне возможно оценить компонент и сказать, что он легко пишется на HTML и CSS. Соглашусь, это легко, когда вы работаете, только чтобы практиковаться, но в реальном проекте всё по-другому. Идеальный адаптивный компонент, который вы только что создали, быстро перестаёт работать, когда сталкивается с реальным контентом настоящего проекта. Почему? Потому, что, пока вы рассуждаете о разработке компонента, вы можете упустить крайние случаи. Сегодня, специально к старту нового потока нашего курса по веб-разработке, поделюсь переводом статьи, в которой показан простой на первый взгляд компонент, за которым стоит огромная работа. Ради реалистичности это будет пример прямо из Facebook Messenger.


Приятного чтения!

Свободно стилизируемый outline DOM элементов

Время на прочтение2 мин
Количество просмотров5.5K

В последнее время всё чаще и чаще возникает вопрос о доступности, если раньше скрытие outline для элементов страницы было общим правилом, то теперь хороший сайт должен иметь outline у элементов, как минимум :focus-visible.
Основная проблема outline - это их стилизирование.

Я пришел к своему решению, которое изложено в этой статье.

Читать далее

Дайджест свежих материалов из мира фронтенда за последнюю неделю №449 (4 — 10 января 2021)

Время на прочтение2 мин
Количество просмотров8.4K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

MarkedText — маркдаун здорового человека

Время на прочтение10 мин
Количество просмотров42K

Здравствуйте, меня зовут Дмитрий Карловский и все свои статьи (и презентации) пишу я в MarkDown разметке. И знаете что? Она уже порядочно меня подзаелозила! Тексты я пишу на русском, но большая часть спецсимволов есть только в английской раскладке клавиатуры. А редактирование таблиц - это вечная пизанская башня из вертикальных линий. Короче, есть у него проблемы как с удобством редактирования, так и с наглядностью представления. Так что давайте попробуем спроектировать его с нуля, не таща за собой килотонны головоломных конструкций.

Поехали..

React.js — формошлепство или работа с формами при помощи пользовательских хуков

Время на прочтение11 мин
Количество просмотров24K


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

Читать дальше →

Что такое рендеринг на стороне сервера и нужен ли он мне?

Время на прочтение8 мин
Количество просмотров24K
Привет, Хабр!

В новом году начнем общение с вами с затравочной статьи о серверном рендеринге (server-side rendering). В случае вашей заинтересованности возможна более свежая публикация о Nuxt.js и дальнейшая издательская работа в этом направлении
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №448 (28 декабря — 3 января 2021)

Время на прочтение2 мин
Количество просмотров8.7K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №447 (21 — 27 декабря 2020)

Время на прочтение3 мин
Количество просмотров8.4K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

Доступность — это не так просто

Время на прочтение4 мин
Количество просмотров5.7K


Привет, Хабр! В предыдущей статье я рассказывал о простых случаях проблем с доступностью, исправив которые можно сделать свой сайт или web-приложение гораздо доступнее. Я упоминал о правиле 80/20 и писал о проблемах, которые при наименьших затратах дают наибольший результат. Сегодня я бы хотел поговорить о другой группе проблем, которые входят в 20% и для решения которых нет готовых рецептов вроде «всегда заполняйте атрибут alt» или «используйте верные заголовки».

Выбирая формат повествования, я не придумал ничего лучше, чем просто описать ход своих мыслей на достаточно часто встречающемся примере.
Читать дальше →

С чего начать разработку приложения

Время на прочтение2 мин
Количество просмотров9.5K


Доброго времени суток, друзья!

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

Всем, кто искал, с чего начать разработку веб-приложения, хорошо известен HTML5 Boilerplate (официальный сайт, репозиторий). Как утверждают разработчики, он является «The web’s most popular front-end template». С most popular не поспоришь, а вот с современностью (соответствием современным реалиям веб-разработки) можно. И в этом нет ничего удивительного: проект создан около 6 лет назад. За последние 6 лет многое изменилось. При этом, насколько я могу судить, принципиальных изменений в проект не вносилось (для объявления переменных используется var, предусмотрена возможность добавления плагинов jQuery и т.д.), кроме, разве что, site.webmanifest, который бесполезен без сервис-воркера (и лучше использовать .json).

Я предлагаю своего рода альтернативу — современный стартовый HTML-шаблон (официальный сайт, репозиторий).
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №446 (14 — 20 декабря 2020)

Время на прочтение3 мин
Количество просмотров7.8K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

3D-индикатор крена и тангажа для HUD на Three.js

Время на прочтение8 мин
Количество просмотров2.4K
Браузерные игры с трехмерной графикой создаются достаточно давно. Существуют и симуляторы различных транспортных средств, где игроку необходимо контролировать пространственное положение управляемого объекта.



В статье «Индикатор искусственного горизонта на HTML5 canvas» представлен код индикатора с объемным макетом управляемого объекта на основе изобретения Пленцова А. П. и Законовой Н. А. В реальной технике такая индикация распространения не получила, но в компьютерных играх она вполне может быть использована.

К числу достоинств идеи индикатора с объемным макетом следует отнести эффектность. На этот раз необычный формат визуализации искусственного горизонта будет адаптирован для систем дополненной реальности.
Читать дальше →

Больше, больше фронтенда — доклады c ЮMoneyDay

Время на прочтение2 мин
Количество просмотров2.7K
Готовы потереть за фронтенд? Мы — да. Поэтому публикуем новую партию полезного видеоматериала от экспертов крупного платежного сервиса. Под катом найдете 2 нескучных доклада про:

  • лайфхаки в CSS, HTML и JS,
  • архитектуру фронтенда ЮMoney.

Устраивайтесь поудобнее: возможно, такого вы раньше не слышали.


Читать дальше →

Ближайшие события

Дайджест свежих материалов из мира фронтенда за последнюю неделю №445 (7 — 13 декабря 2020)

Время на прочтение3 мин
Количество просмотров7.2K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №444 (1 — 6 декабря 2020)

Время на прочтение3 мин
Количество просмотров8.4K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

Скачать готовую html-вёрстку письма можно с помощью плагина для Фигмы

Время на прочтение8 мин
Количество просмотров4.9K

Речь пойдёт о Marka Email Generator. Это новый плагин для Фигмы — инструмента, в котором мы работаем с дизайнами и прототипами писем.

До 2019 года мы знали два способа создания вёрстки: в редакторе кода и в блочных редакторах. Идеальный блочный редактор пока не изобрели, поэтому свою агентскую вёрстку мы создавали в редакторах кода. До настоящего момента.

В конце 2019 года появился плагин для Фигмы, который позволяет, при соблюдении определённых правил при создании дизайн-макета, выгружать макет в готовое для отправки письмо.

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

Мы предлагали разработчику исправления и фичи, участвовали в тестировании. В процессе работы над плагином стало очевидно, что мы недооценивали потенциал продукта, ведь в новом инструменте удалось реализовать поддержку даже самых сложных подходов и особенностей email-вёрстки.

Читать далее

Подробное руководство по HTML-инъекциям

Время на прочтение8 мин
Количество просмотров45K


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


Сегодня мы узнаем, как злоумышленники могут получить доступ к веб-приложению с помощью ошибок в его HTML коде.


Содержание:


  • Что такое HTML?
  • Что такое HTML-инъекция?
  • Угрозы HTML-инъекции
  • HTML-инъекция и XSS
  • Типы инъекций
    • Сохраненный HTML
    • Отраженный HTML
      • GET
      • POST
      • Текущий URL
  • Защита от HTML-инъекции

Что такое HTML?


HTML (HyperText Markup Langauge) — это основной строительный блок сети, который определяет формирование веб-страниц в веб-приложении. HTML используется для разработки веб-сайтов, состоящих из «гипертекста», чтобы включить «текст внутри текста» в качестве гиперссылки и комбинации элементов, которые визуально отображаются в браузере.


Что такое элемент?


Элемент — это основная структурная единица веб-страницы. Он содержит открывающий и закрывающий теги с текстовым содержимым между ними».


Читать дальше →

Опыт использования транслятора OberonJS для создания редактора интерактивных моделей

Время на прочтение6 мин
Количество просмотров2.4K

Занимательное дело — создавать образовательные модели. Приятно видеть, что человек понял что-то, взаимодействуя с твоей программой. Начинал делать модели в Matlab, пробовал использовать Flash и язык ActionScript, пока не узнал про Блэкбокс и Оберон, который идеально лёг на моё представление о том, сколько вообще язык программирования должен занимать в голове у специалиста предметной области. Однако в 21-веке люди просто боятся запускать компилированные приложения, и антивирусы часто дают ложно-положительные срабатывания. Как быть? Для дистрибуции образовательных приложений нужно было использовать браузерные технологии JavaScript и HTML5. В публикации разбирается, как удалось объединить Оберон и HTML5 canvas для создания интерактивных моделей онлайн.

Читать далее

Дайджест свежих материалов из мира фронтенда за последнюю неделю №443 (23 — 29 ноября 2020)

Время на прочтение3 мин
Количество просмотров8.4K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

Индикатор искусственного горизонта на HTML5 canvas

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



Назначение и область применения искусственного горизонта


Искусственный горизонт в рассматриваемом здесь узком смысле представляет собой визуализацию наклона объекта относительно местной вертикали, используемую для управления его движением. Наклон определяется значениями двух углов Эйлера, крена и тангажа. Авиационному термину «тангаж» моряки предпочитают синоним «дифферент».
Читать дальше →