Как стать автором
Поиск
Написать публикацию
Обновить
26.94

HTML *

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

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

Расщепление монолита — пилотный опыт

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

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

После применения ряда рецептов я сравнил показатели производительности двух версий системы легаси и ремастера и был, мягко скажем, приятно удивлен. Такие подходы, как отделение слоя интерфейса от монолита, SPA и технологии прогрессивного рендеринга заставили меня взглянуть на разработку веб-продуктов совершенно иначе.

Читать далее

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

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

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

Стилизуем слайдер input range для всех популярных браузеров

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

https://toughengineer.github.io/demo/slider-styler
(смотреть лучше на десктопе)

Работает со всеми популярными браузерами.

Читать далее

Счёт может быть красивым и в HTML, а не в PDF

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

В статье “Что должно быть в счёте на оплату, чего быть не должно и что дико бесит” мы разбирали содержимое счёта. По результатам той работы возникло желание оформить счёт стильно ибо стандартный вариант бухгалтерских программ вроде 1С какой-то страшный.

В статье разберём плюсы генерации счетов в HTML-формате по сравнению с генерацией PDF и тюнинг версии для печати, добавим 5 копеек про ЭЦП (УКЭП).

Итак, погнали...

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

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

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

Ваше изображение не декоративно

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

Размещение изображений на сайте очень важно т.к. это помогает передать смысл страницы. Это значит, что почти каждое изображение, которое вы создаете, должно иметь альтернативное описание.

Читать далее

Новые форматы графики в CSS с помощью обновлённой функции image-set

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

CSS функция image-set поддерживается в браузерах на основе Chromium с 2012 года, а в Safari начиная с версии 6. Недавно поддержка появилась в Firefox 88. Давайте углубимся в эту тему и посмотрим, что мы можем и чего не можем делать с помощью функции image-set ()

Читать далее

Что случилось с игрой «Колобок» в июне

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

В июне сделал набросок собственного инструмента для дальнейшей разработки "Колобка" с помощью HTML, Matter.js и JSON.

Карго-культ HTML в современном фронтенде

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

Здравствуйте, меня зовут Дмитрий Карловский и я… люблю рвать шаблоны. А во фронтенде как раз крайне много заблуждений вокруг шаблонизации. Так что давайте порвём их на лоскуты снизу вверх и справа налево.


Разрыв шаблона


Далее мы разберём что такое шаблоны. Их ключевые достоинства и фатальные недостатки. Зачем они нужны и почему не нужны. Сформируем представление о правильном решении и проедемся катком по популярным. Так что полная гамма чувств нам обеспечена.

Прошу к столу..

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

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

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

Дизайнерский Multiselect на протеинах

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

Те из верстальщиков кто часто клепает формы регистрации или обратной связи обязательно столкнутся с задачей по выводу множественного выбора результатов - multiselect. К сожалению, не все элементы тега <select> все ещё можно из коробки стилизовать по желанию дизайнера. В этом маленьком уроке я хотел бы поделиться своим опытом решения данной проблемы на базе знания CSS и немного ванильного JS.

Про дизайнерский select

Bindon: малоизвестные фишки шаблонов Angular

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

Недавно вышел Angular 12, а вместе с ним в шаблоны подвезли оператор нулевого слияния (??). Но что еще умеют шаблоны Angular, о чем вы, возможно, и не слышали? Давайте разберемся!

Давайте!

Что можно положить в тег <head>

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

Рекомендуемый минимум

Ниже приведены основные элементы для любого веб-документа (веб-сайта/приложения):

meta charset — определяет кодировку веб-сайта, стандартом является utf-8.

meta name="viewport" — настройки viewport, связанные с мобильной отзывчивостью

width=device-width — физическая ширина устройства (отлично подходит для мобильных устройств!)

initial-scale=1 — начальный масштаб, 1 означает отсутствие масштабирования

Элементы

Допустимые элементы <head> включают meta, link, title, style, script, noscript и base.

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

Читать далее

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

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

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

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

Пробелы бывают разные: &nbsp; ≠ C2A0

Время на прочтение3 мин
Количество просмотров44K
image

Я только что потратил более двух часов на устранение, казалось бы, простой проблемы с HTML. Когда я скопировал и вставил небольшой раздел HTML, веб-браузер отображал только что вставленный раздел не так, как оригинал. Горизонтальный интервал между некоторыми элементами был немного другим, из-за чего вся страница выглядела неправильно. Но как такое могло быть? Два раздела HTML были идентичны — новый был буквально копией старого.

Эта простая на первый взгляд проблема бросала вызов всем моим попыткам ее объяснить. Я придумал множество замечательных теорий: проблемы с моими классами CSS или с полями и отступами. Несоответствующие теги HTML. Ошибки браузера. Я попробовал три разных браузера и во всех получил одинаковые результаты.

Чувствуя себя сбитым с толку, я снова посмотрел на два раздела HTML в редакторе WordPress (текстовое представление) и подтвердил, что они полностью идентичны. Затем я попробовал встроенные в Firefox инструменты веб-разработчика для просмотра отображаемых элементов страницы и сравнил все их свойства CSS. Идентичны, но каким-то образом визуализированы по-разному. Я использовал инструменты разработчика, чтобы проверить точный HTML, полученный с моего веб-сервера, снова проверил два раздела и убедился, что они символьно идентичны. Инструмент Firefox «источник страницы» также подтвердил, что эти два раздела полностью идентичны.

К этому моменту я был готов обвинить космические лучи или магию вуду.
Читать дальше →

DIV должен уйти: улучшаем HTML

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

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

Тег div во многом напоминает такие комнаты. Он является чистым листом. Он подходит для любого потока, позволяет управлять своими функциями, и может становиться всем, что мы пожелаем. Целые веб-сайты могут создаваться (и создаются) почти исключительно на одних div. Загуглите «single div designs», и вы найдёте бесчисленное множество дизайнеров, демонстрирующих свои навыки владения CSS, превращая один div в любую форму, которая им понадобится.

Иногда это вселяет трепет, но этой статье я хочу сказать, что нам следует двигаться дальше, к миру без div с именами классов или ID. В мир уникальных элементов HTML. Семантического HTML. Нам нужно сосредоточиться на основах.

<img>. Доклад Яндекса

Время на прочтение30 мин
Количество просмотров28K
«Просто добавь картинку на сайт», — говорили они. А оказалось, что «просто» не значит «правильно». В докладе я постарался разобраться, как эффективно добавлять изображения на страницу, какие форматы графики для каких случаев полезны и как автоматизировать автоматизируемое.

— Всем привет. У меня доклад с интригующим названием в виде одного тега.

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

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

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

История одной интеграции Agora SDK

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

Всем привет. Меня зовут Дмитрий, и я типичный представитель касты гребцов на галере X. Основной ЯП, который я использую - PHP, но иногда приходится писать на других.

Читать далее

Используйте ссылки и кнопки правильно. Пожалуйста

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

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

Читать далее