
HTML *
Стандартный язык разметки web-страниц
Почему инлайнить стили — плохо

CSS-стили можно встроить прямо в HTML, импортировать, создать с помощью JavaScript или подключить из отдельного файла. Среди разработчиков хорошим тоном считается использовать последний способ, то есть писать стили в отдельном файле и затем подключать их с помощью тега link
. А вот внутренних стилей стараются избегать, хотя их применение тоже бывает оправдано.
Но в очень редких случаях. И лучше ими не вообще не пользоваться, если нет необходимости. В статье разберём, почему так, и что с этим вообще теперь делать.
Критерии качества вёрстки 2021

6 лет назад мы обсуждали с сообществом критерии качества вёрстки, которые мы используем в обучении, чтобы наши выпускники радовали рынок своими умениями и подходом к работе.
С тех пор в разработке интерфейсов произошло море изменений: сначала в продакшн пришли флексы, потом подтянулись гриды, умер IE, все переехали из Фотошопа в Фигму, и много чего ещё. Каждое это изменение влияло на наши критерии, и мы постоянно их дорабатывали.
Сейчас пришло время обсудить с сообществом обновлённые критерии.
В посте — система, которую мы планируем внедрить на осенних запусках курсов. Мы публикуем её сейчас, чтобы собрать обратную связь от сообщества и внести изменения в критерии. Приглашаем к обсуждению всех, кто занимается веб-разработкой.
Повышение скорости написания кода: Emmet и его использование в VSCode

Emmet - это утилита для текстовых редакторов, которая упрощает и повышают скорость написания кода. Первоначально слово "Emmet" означало муравей - маленькое насекомое, которое может нести в 50 раз больше своего веса.
Адаптивные изображения. Что использовать: img или picture?

Теги img
и picture
предназначены для загрузки изображений. Каждый из них позволяет задать набор правил, согласно которым браузер будет выбирать, какое из изображений загружать. В статье рассмотрены синтаксис и различия данных тегов.
6 хороших практик по HTML и CSS
Можно легко найти хорошие практики по любой технологии, но, к сожалению, по HTML и CSS это сделать не так просто. Недолго думая, я написал свой список из 6 кейсов, когда вы можете сделать удобный или не удобный интерфейс для пользователя только через HTML и CSS.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №480 (2 — 8 августа 2021)
О ходе создания игры «Колобок» в июле
В июле с помощью Matter.js реализовал прыжки колобка из-под платформы и подкидывание стрелы.
Как называть функции во фронтенде

Тут нет правильного варианта ответа, это вкусовщина. Единственная цель этой статьи – узнать ваше мнение по этому вопросу и окончательно сформировать своё, потому что сейчас я в сомнениях.
Не знаю, какие там проблемы в других сферах программирования, мой вопрос касается фронтенда.
Независимо от того, каким фреймворком вы пользуетесь, и пользуетесь ли вообще, у нас есть HTML-шаблон и JavaScript-код. Код частично залезает в шаблон, и тут и появляется наша проблема. От чего отталкиваться при названии функций?
Дайджест свежих материалов из мира фронтенда за последнюю неделю №479 (26 — 31 июля 2021)
Как создать 3d игру прямо в браузере

Привет всем. Сегодня я вам расскажу как легко вы можете создать 3d игру прямо в вашем браузере и сделать вы сможете это очень быстро, примерно за минут 30.
Свойства блочной модели CSS. Объяснение с примерами

Приветствую всех жителей хабравиля! Сегодня я подготовил для вас основы по блочной модели CSS. Безусловно, многие из вас знают о чём идёт речь, но сегодня я постараюсь объяснить прописные истины более понятно и наглядно, что поможет вам создавать веб-сайты, с идеально подходящими друг другу элементами (с точностью до пикселя), и научит более точно использовать свойства размеров, полей, отступов и границ. Итак, всех приглашаю под кат и погнали!
50 цветных оттенков Mavo. Решение задач веб-разработчика без JavaScript

В начале 2016 года в опросе Лии Веру в Твиттере половина из 3578 человек ответили, что не очень комфортно чувствуют себя с JavaScript. И речь не только о новичках. Профессионалам тоже нелегко — ежедневно выходит огромное количество библиотек, и невозможно уследить за всеми современными трендами в мире веб-разработки.
Но кое-что все-таки выделяется. В 2016 году появилась новая технология от лаборатории Массачусетского технологического института — Mavo. Он прекрасен тем, что позволяет прокачать HTML за счёт добавления в него относительно небольшого количества атрибутов. В результате вы получаете рабочее веб-приложение так, будто вы использовали JavaScript, но на самом деле кода JS там будет ноль. Точнее, там не будет JS-кода, который вам пришлось бы писать руками.
Дмитрий Шарабин, евангелист технологии Mavo, сегодня расскажет нам про ее 50 цветных оттенков. Видео его выступления на FrontendConf 2020 — здесь.
Ближайшие события
Дайджест свежих материалов из мира фронтенда за последнюю неделю №478 (18 — 25 июля 2021)
Как использовать IndexDB для управления состоянием в JavaScript

Эта статья — перевод оригинальной статьи Craig Buckler "How to Use IndexDB to Manage State in JavaScript".
В этой статье объясняется, как использовать IndexedDB для хранения состояния в типичном клиентском приложении на JavaScript.
Код доступен на Github. Он представляет собой пример to-do приложения, которое вы можете использовать или адаптировать для своих собственных проектов.
Очень интересная библиотека JS: распознавание символов, введённых с дисплея вашего смартфона на сайте

Привет всем. Представим у вас есть сайт и для мобильной версии вы хотите сделать такую фитчу, чтобы вы рисовали какой-либо символ пальцем по дисплею смартфона и что-то выполнялось. Например, рисуем букву Z и появляется окно с информацией как на гифке.
Очень простая библиотека JavaScript, которая распознаёт ваши рисунки на мобильной версии сайта.
Создание видео урока по веб программированию с использованием: Jsfiddle, SpeechSynthesisUtterance, OBS Studio

Для демонстрации небольшого объема кода (html, js, css), удобно пользовать онлайн редактором Jsfiddle.
У меня возникла мысль. Как вывести объяснения кода в виде информационных баннеров и озвучить их при помощи SpeechSynthesisUtterance
Мое решение подключить в консоли браузера хром: css, js и создать див с id=”info_mysmx” для отображения текста.
Easy canvas — простая js библиотека, которая невероятно упрощает работу с canvas html

Очень простая библиотека javascript, которая сильно упрощает работу с canvas html.
Очень простая библиотека javascript, которая сильно упрощает работу с canvas html.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №477 (12 — 18 июля 2021)
Что такое Core Web Vitals

Что такое Core Web Vitals? Это набор определенных моментов и факторов, в совокупности действительно имеющих значительное влияние на ранжирование.
На самом деле, Core Web Vitals уже работает на протяжении какого-то времени. Ни много ни мало, с 2018 года. Помимо прочего, существуют официальные подтверждения в документации корпорации.
В Core Web Vital грядут изменения, способные изменить понимание о том, как стоит относиться, обсуждать и объяснять работу Core Web Vitals.
Вклад авторов
alexzfort 6864.0alizar 1773.0ilusha_sergeevich 1448.2melnik909 1180.0kichik 754.8TheShock 613.0ru_vds 530.0Paul_King 421.0krovatti 397.0Bright_Translate 377.6