HTML *

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

СтатьиПостыНовостиАвторыКомпании

Drm-a 17 мая 2021 в 11:58

Швейцарский нож отладки JavaScript

4 мин

19K

Блог компании Delivery Club TechБлог компании VKGoogle ChromeHTML * JavaScript *

Кажется, что все в начале пути разработчика отлаживали код при помощи console.log(). Я уверен, что и сейчас среди читателей найдётся человек, который сможет отладить код любой сложности при помощи вывода информации в консоль.

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

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

+34

alexzfort 16 мая 2021 в 20:16

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

3 мин

8.5K

CSS * HTML * JavaScript * Веб-разработка *

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

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

+20

owlofmacloud 15 мая 2021 в 07:00

Шпаргалка по JS-методам для работы с DOM

18 мин

85K

Блог компании МаклаудHTML * JavaScript * Веб-разработка *

Основные источники

Введение

JavaScript предоставляет множество методов для работы с Document Object Model или сокращенно DOM (объектной моделью документа): одни из них являются более полезными, чем другие; одни используются часто, другие почти никогда; одни являются относительно новыми, другие признаны устаревшими.

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

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

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

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

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

+33

MaxRokatansky 14 мая 2021 в 11:15

Доступный toggle

10 мин

17K

Блог компании OTUSCSS * HTML *

Перевод

Toggles (или их еще называют "тумблеры"/"переключатели") широко используются в современных интерфейсах. Они, как правило, относительно просты, и их можно рассматривать как простые флажки (checkbox). Тем не менее, их часто делают недоступными тем или иным способом.

В этой статье я покажу небольшую имплементацию доступного toggle на HTML + CSS, которую вы можете применить в своих проектах и доработать по своему усмотрению.

MaxRokatansky 13 мая 2021 в 13:57

Приветствуем CSS Container Queries

7 мин

23K

Блог компании OTUSHTML * CSS *

Перевод

*Container Queries — Выражения от контейнера

За последние шесть лет моей работы в качестве front-end разработчика я не был так рад появлению CSS фитчи, как сейчас. Прототип container queries теперь доступен в Chrome Canary. Благодаря усилиям таких умных людей, как Miriam Suzanne и других.

Я помню, что видел много шуток по поводу поддержки CSS container queries, но они наконец-то появились. В этой статье я расскажу вам, зачем нужны container queries, как они облегчат вам жизнь, а главное, вы увидите более мощные компоненты и разметки.

Если вы взволнованы так же, как и я, то давайте начнем. Вы готовы?

owlofmacloud 13 мая 2021 в 10:54

Ускоряем загрузку веб-страниц: тестируем 4 стратегии оптимизации изображений

10 мин

9.4K

Блог компании МаклаудHTML * Веб-разработка * Серверная оптимизация *

Перевод

Статистика не устаёт повторять нам про устойчивую корреляцию между падением скорости загрузки страниц сайта и ростом частоты отказов со снижением конверсии. Я не открою Америку, если скажу, что работу сайта замедляет «раздутая» полезная нагрузка (с плохо оптимизированными изображениями и избыточным HTML-кодом). Это заставляет сервер выполнять лишнюю работу. Огромный пласт такой работы связан с проблемами оптимизации изображений.

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

Не очень эффективными я считаю стратегии, которые опираются на тезис о том, что изображения — это статический контент (в течение статьи я ещё разовью эту мысль и приведу аргументы). Сейчас на мобильные устройства приходится большая доля интернет-трафика, но есть проблема: эти устройства имеют различные размеры, разрешения экрана, операционные системы и прикладное ПО (например, браузеры). Каким образом сделать так, чтобы веб-страница быстро (!)и корректно загружалась на любой платформе и выглядела при этом одинаково?

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

+27

alexzfort 9 мая 2021 в 19:51

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

3 мин

8.4K

CSS * HTML * JavaScript * Веб-разработка *

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

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

+16

m5xim 9 мая 2021 в 12:00

Модульные front-end блоки – пишем свой мини фреймворк

37 мин

7.4K

HTML * JavaScript * CSS * PHP *

Из песочницы

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

MagisterLudi 7 мая 2021 в 15:09

HTML трюки

2 мин

15K

Блог компании Timeweb CloudHTML * Учебный процесс в IT

Перевод

1. Атрибут `loading=lazy`

Совет по производительности. Вы можете использовать атрибут loading = lazy, чтобы отложить загрузку изображения до тех пор, пока пользователь не домотает до них.

<img src='image.jpg' loading='lazy' alt='Alternative Text'>

+22

romalinanova 6 мая 2021 в 12:57

Вышел Bootstrap 5: оцениваем 7 главных нововведений

4 мин

47K

Блог компании SelectelВеб-разработка * Программирование * HTML * CSS *

Перевод

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

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

+70

egaxegax 5 мая 2021 в 18:21

Карта метро Москвы с расчётом пути

Простой

2 мин

11K

JavaScript * Векторная графика * HTML * Canvas *

Туториал

В своей предыдущей статье про интерактивную карту метро Москвы я описывал процесс создания векторной карты на svg-движке, сравнивая с канвасным отображением.

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

host_m 5 мая 2021 в 06:55

Почему стоит использовать тег <picture> вместо <img>

6 мин

57K

Блог компании VDSina.ruHTML * ReactJS * Веб-дизайн * Интерфейсы *

Перевод

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

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

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

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

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

+30

MagisterLudi 4 мая 2021 в 11:27

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

9 мин

142K

Блог компании МаклаудHTML * Веб-дизайн * Веб-разработка * Учебный процесс в IT

Перевод

<!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>

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

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

+35

spylypchuk 4 мая 2021 в 09:18

Фреймворк Webix Jet глазами новичка. Часть 2. Взаимодействие с интерфейсом

20 мин

2.4K

Веб-разработка * JavaScript * Программирование * HTML * Интерфейсы *

Туториал

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

В этой статье я продолжу свой рассказ о Jet фреймворке и библиотеке Webix, и реализую следующее:

добавлю в уже известное вам приложение немного интерактива

организую серверные модели с разными подходами к загрузке и сохранению данных.

С кодом готового приложения можно ознакомиться тут.

alexzfort 2 мая 2021 в 19:21

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

3 мин

Веб-разработка * JavaScript * HTML * CSS *

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

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

+15

Get-Web 2 мая 2021 в 17:59

Кастомный виджет Яндекс.Переводчик для сайтов

6 мин

18K

Веб-разработка * CSS * JavaScript * HTML *

Туториал

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

owlofmacloud 1 мая 2021 в 11:01

HTML-теги и атрибуты, о которых вы, возможно, не знали

14 мин

54K

Блог компании МаклаудВеб-разработка * 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

honyaki 30 апр 2021 в 11:21

Примеры применения переменных CSS на практике

9 мин

9.6K

Блог компании SkillfactoryВеб-дизайн * Веб-разработка * CSS * HTML *

Туториал

Перевод

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

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

hisbvdis 29 апр 2021 в 20:10

HTMHell — адовая разметка (25 плохих примеров)

32 мин

18K

Веб-разработка * CSS * HTML * Usability * Accessibility *

Туториал

Перевод

Перевод заметок с сайта HTMHell - коллекции плохих примеров HTML-кода, взятых из реальных проектов.

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

+10

MaxRokatansky 27 апр 2021 в 13:07

Как обеспечить глассморфизм с помощью HTML и CSS

4 мин

14K

Блог компании OTUSВеб-разработка * CSS * HTML *

Перевод

Вы, наверное, подумаете — ну вот еще один тренд дизайна? Разве они у нас не каждый год появляются или около того?

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

Но давайте поговорим немного больше о глассморфизме.

1 2 ...

32 33

35 36 ...

108 109

HTML *

Швейцарский нож отладки JavaScript

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

Шпаргалка по JS-методам для работы с DOM

Основные источники

Введение

Доступный toggle

Приветствуем CSS Container Queries

Ускоряем загрузку веб-страниц: тестируем 4 стратегии оптимизации изображений

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

Модульные front-end блоки – пишем свой мини фреймворк

HTML трюки

1. Атрибут `loading=lazy`

Вышел Bootstrap 5: оцениваем 7 главных нововведений

Карта метро Москвы с расчётом пути

Почему стоит использовать тег <picture> вместо <img>

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

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

Фреймворк Webix Jet глазами новичка. Часть 2. Взаимодействие с интерфейсом

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

Кастомный виджет Яндекс.Переводчик для сайтов

HTML-теги и атрибуты, о которых вы, возможно, не знали

`abbr`

`address`

Примеры применения переменных CSS на практике

HTMHell — адовая разметка (25 плохих примеров)

Как обеспечить глассморфизм с помощью HTML и CSS

Вклад авторов