HTML

alexzfort вчера в 22:51

Дайджест свежих материалов из мира фронтенда за последнюю неделю №466 (3 — 9 мая 2021)
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →
- +14
- 3,5k
- Комментировать
Новости
- Хакеры забыли про индексацию Google, и украденные данные появились в поиске
  22 января 2021 в 19:01 Комментарии: 3
- RevolveR Contents Management Framework v.1.9.4.9
  1 ноября 2020 в 17:43 Комментарии: 35
- В британском реестре компаний обнаружили XSS
  28 октября 2020 в 04:39 Комментарии: 4
- Документация Webix на русском языке
  19 мая 2020 в 16:52 Комментарии: 0
- Прямой эфир конференции Я ❤︎ Фронтенд 2020 — 29 февраля. Спикеры и программа
  6 февраля 2020 в 18:53 Комментарии: 0
- Новый HTML-элемент <portal> от Google призван заменить фреймы
  11 мая 2019 в 14:51 Комментарии: 39
- Telegram опять раздаёт деньги за разработку простых шаблонов CSS
  5 февраля 2019 в 08:54 Комментарии: 39
- Выходит HTML 5.1, готовится HTML 5.2
  22 сентября 2016 в 16:07 Комментарии: 8
- Машинное обучение и нейросети позволили сократить время моделирования крупномасштабной структуры Вселенной в 1000 раз
  17:52 Комментарии: 0
- Резервуары воды фабрик TSMC наполнены на 11-23 % из-за засухи в регионе
  11:17 Комментарии: 17
Все новости
m5xim вчера в 15:00

Модульные front-end блоки – пишем свой мини фреймворк
- PHP,
- CSS,
- JavaScript,
- HTML
- Из песочницы
Доброго времени суток уважаемые читатели хабра. С каждым годом в веб разработке появляется все больше разнообразных решений которые используют модульный подход и упрощают разработку и редактирование кода. В данной статье я предлагаю вам свой взгляд на то, какими могут быть переиспользуемые front-end блоки (для проектов с бэкендом на php) и предлагаю пройти все шаги от идеи до реализации вместе со мной. Звучит интересно? Тогда добро пожаловать под кат.

Читать далее
- +1
- 2k
- 12
MagisterLudi 7 мая 2021 в 18:09

HTML трюки
- Перевод
1. Атрибут `loading=lazy`

Совет по производительности. Вы можете использовать атрибут loading = lazy, чтобы отложить загрузку изображения до тех пор, пока пользователь не домотает до них.
```
<img src='image.jpg' loading='lazy' alt='Alternative Text'>  
```
Читать дальше →
- +14
- 6,6k
- 16
romalinanova 6 мая 2021 в 15:57

Вышел Bootstrap 5: оцениваем 7 главных нововведений
- Перевод
Пройдя через несколько альфа- и бета-версий, наконец-то появился Bootstrap 5, на что у разработчиков ушло несколько месяцев. Новая версия претерпела серьезные изменения, включая отказ от поддержки Internet Explorer (IE) и зависимости jQuery. От IE было решено отказаться, потому что браузер занимает всего 3% рынка и его доля продолжает снижаться.

Что такое Bootstrap? Это самый популярный в мире CSS-фреймворк с открытым исходным кодом, который разработан командой Twitter. В v5 внесено сразу несколько критически важных изменений, давайте посмотрим, что там и как.

Читать дальше →
- +65
- 19,2k
- 12
Минуточку внимания
egaxegax 5 мая 2021 в 21:21

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

Читать далее
- +4
- 5,8k
- 14
host_m 5 мая 2021 в 09:55

Почему стоит использовать тег <picture> вместо <img>
- Перевод
Использование изображений и анимаций в интерфейсах пользователя стало распространённой практикой в современных веб-приложениях. Хотя эти примеры современного дизайна делают упор на повышение удобства работы с приложениями, если изображения не адаптируются ко всем устройствам, то могут возникать проблемы.

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

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

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

Читать дальше →
- +32
- 12,5k
- 25

MagisterLudi 4 мая 2021 в 14:27

Базовая структура HTML-документа с объяснением каждой строчки

Перевод

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">

  <title>Unique page title - My Site</title>

  <script type="module">
    document.documentElement.classList.remove('no-js');
    document.documentElement.classList.add('js');
  </script>

  <link rel="stylesheet" href="/assets/css/styles.css">
  <link rel="stylesheet" href="/assets/css/print.css" media="print">

  <meta name="description" content="Page description">
  <meta property="og:title" content="Unique page title - My Site">
  <meta property="og:description" content="Page description">
  <meta property="og:image" content="https://www.mywebsite.com/image.jpg">
  <meta property="og:image:alt" content="Image description">
  <meta property="og:locale" content="en_GB">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary_large_image">
  <meta property="og:url" content="https://www.mywebsite.com/page">
  <link rel="canonical" href="https://www.mywebsite.com/page">

  <link rel="icon" href="/favicon.ico">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/my.webmanifest">
  <meta name="theme-color" content="#FF00FF">
</head>

<body>
  <!-- Content -->
  <script src="/assets/js/xy-polyfill.js" nomodule></script>
  <script src="/assets/js/script.js" type="module"></script>
</body>
</html>

Под катом — разбор каждой строчки

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

Реклама
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
spylypchuk 4 мая 2021 в 12:18

Фреймворк Webix Jet глазами новичка. Часть 2. Взаимодействие с интерфейсом
- Tutorial
В предыдущей статье “Фреймворк Webix Jet глазами новичка. Часть 1. Композиция и навигация” мы подробно разобрали создание интерфейса нашего приложения с помощью UI компонентов Webix и распределили полномочия между view-модулями и моделями внутри архитектуры Jet фреймворка.
В этой статье мы продолжим изучать Jet и библиотеку Webix и реализуем следующее:
- добавим в уже известное вам приложение немного интерактива
- организуем серверные модели с разными подходами к загрузке и сохранению данных.

Читать далее
- +3
- 1k
- Комментировать
alexzfort 2 мая 2021 в 22:21

Дайджест свежих материалов из мира фронтенда за последнюю неделю №465 (26 — 2 мая 2021)
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →
- +15
- 6,4k
- 2
Get-Web 2 мая 2021 в 20:59

Кастомный виджет Яндекс.Переводчик для сайтов
- Tutorial
Когда-то я предложил свое решение по кастомизации виджета googleTranslate, тема оказалась действительно полезной и актуальна по сей день. Репозиторий с проектом на gitHub набрал немного звезд, а я рад тому, что мои труды не напрасны. И вот недавно мне понадобилось сделать пользовательский выпадающий список с выбором языков, но уже с виджетом яндекс переводчика...

Читать далее
- +6
- 2,5k
- 1
Вакансии
Больше вакансий на Хабр Карьере
owlofmacloud 1 мая 2021 в 14:01

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

abbr

Тег abbr определяет аббревиатуру или акроним. Аббревиатура или акроним расшифровываются с помощью атрибута title.
```
<abbr title="HyperText Markup Language">HTML</abbr> был разработан британским ученым Тимом Бернерсом-Ли приблизительно в 1986—1991 годах.
```
abbr часто используется совместно с тегом dfn, идентифицирующим понятие или термин:
```
<p><dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> - формальный язык описания внешнего вида документа (веб-страницы).</p>
```
address

Тег address определяет контактную информацию об авторе или владельце документа или статьи. Контактная информацию может включать в себя адрес электронной почты, адрес сайта, физический адрес, номер телефона, ссылки на аккаунты в социальных сетях и т.д.
Читать дальше →
- +42
- 15,1k
- 13
honyaki 30 апреля 2021 в 14:21

Примеры применения переменных CSS на практике
- Перевод
- Tutorial
Когда я впервые попробовал использовать переменные CSS, у меня не было полного представления об их возможностях. Правильное их использование позволяет существенно сократить время и трудозатраты на решение определённых задач в CSS. В преддверии старта нового потока курса по Frontend разработке делимся с вами описанием практического использования переменных CSS помимо их применения для создания маркеров дизайна, таких как цвета.

Приятного чтения
- +5
- 4,2k
- 5
hisbvdis 29 апреля 2021 в 23:10

HTMHell — адовая разметка
- Перевод
- Tutorial
Перевод заметок с сайта HTMHell - коллекции плохих примеров HTML-кода, взятых из реальных проектов.
Каждая заметка включает сам фрагмент плохого кода, который дополняется объяснениями, в чём именно ошибки и почему так лучше не делать. А в заключение предлагается вариант, который считается более корректным.

Читать далее
- +10
- 8,4k
- 10
Средняя зарплата в IT

120 000 _₽/мес.
Средняя зарплата по всем IT-специализациям на основании 7 204 анкет, за 1-ое пол. 2021 года Узнать свою зарплату
MaxRokatansky 27 апреля 2021 в 16:07

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

Читать далее
- +5
- 3,4k
- 6
JustJeremy 26 апреля 2021 в 16:18

Целительная сила JavaScript
- Перевод
Чуть меньше года назад, когда по всему миру начали распространяться локдауны в связи с Covid-19, большинство людей начало запасаться туалетной бумагой и консервами. Но лично я стремился получить нечто другое: реализовать функцию поиска.

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

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

Читать дальше →
- +15
- 6,5k
- Комментировать
alexzfort 25 апреля 2021 в 22:30

Дайджест свежих материалов из мира фронтенда за последнюю неделю №464 (19 — 25 апреля 2021)
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →
- +26
- 7k
- 2
Заказы
Больше заказов на Хабр Фрилансе
Osiris74 25 апреля 2021 в 11:28

Даешь свободную литературу! Или как я с политикой вуза боролся
- Программирование,
- Delphi,
- Алгоритмы,
- HTML,
- PDF
- Из песочницы
Доброго времени суток, хабровчане! Это мой первый пост на форуме, так что прошу строго не судить.
Как и полагается любому техническому вузу – в нашем есть куча интернет ресурсов, которыми вуз чрезмерно гордится. Однако есть оборотная сторона медали – качество этих сервисов. А именно, если говорить про электронную библиотеку, о коей и пойдет речь в данной статье, то в ней напрочь отсутствует возможность скачивания pdf-версии нужной тебе методички, точнее она есть, но за это придется заплатить немало денЯк. Деньги далеко не маленькие (если говорить именно про цену за вузовские методички). Если же такой формат не устраивает, то можешь пользоваться онлайн библиотекой.
В онлайн библиотеке есть просмотрщик книг, через который можно читать литературу. Просмотрщик оформлен максимально неудобно: долгое время не работал переход на определенную страницу книги, и книгу в 700 страниц приходилось перелистывать по страничке, что превращалось в адскую муку. Но самое ужасное в этом сайте то, что каждые 20 минут он просит авторизоваться по новой…
И теперь представьте картину: человек пытается подготовиться к контрольной по квантовой механике по методичкам преподавателя, объемом 700 страниц, где необходимый материал находится на 500, и может перелистывать по 5 страничек в минуту, и каждые 20 минут, его попытки приходится возобновлять.… В общем, жесть…. И вот после очередной неудачной попытки прочитать нужную главу, я решил, что пришло время положить конец данному произволу.

Читать далее
- +18
- 7,2k
- 32
alexzfort 18 апреля 2021 в 22:59

Дайджест свежих материалов из мира фронтенда за последнюю неделю №463 (12 — 18 апреля 2021)
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →
- +23
- 6,6k
- 1
arthurlomakin 17 апреля 2021 в 12:37

Еще не используешь SVG фавиконки?
- Перевод
Тебе нужно использовать SVG фавиконки. Они поддерживаются во всех современных браузерах.
Кроме того, не нужны все эти ссылки на значки и размеры, которые ты копируешь из проекта в проект. Давайте узнаем, какой абсолютный минимум для этого требуется...

Читать!
- +20
- 6,7k
- 17
host_m 14 апреля 2021 в 11:25

Малоизвестные, но крутые атрибуты в HTML
Спросите случайного фронтендера, какие атрибуты HTML он использует — и услышите что-то вроде «src, href, style, class...» и прочую чепуху, которую всем ещё в младенчестве вживили на чипе агенты IETF. Между тем, стандарты веба не стоят на месте, и с каждым годом в браузерах появляются всё более крутые фичи не только для монструозного CSS, но и для обычных элементов HTML. Вы знали, что с помощью атрибутов можно пинговать* произвольный адрес, а элементы формы могут многократно переопределять её поведение? Вряд ли.
Читать дальше →
- +63
- 22,8k
- 15