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

HTML *

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

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №481 (15 — 22 августа 2021)

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

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

Почему инлайнить стили — плохо

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

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

Но в очень редких случаях. И лучше ими не вообще не пользоваться, если нет необходимости. В статье разберём, почему так, и что с этим вообще теперь делать.

Читать далее

Критерии качества вёрстки 2021

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

6 лет назад мы обсуждали с сообществом критерии качества вёрстки, которые мы используем в обучении, чтобы наши выпускники радовали рынок своими умениями и подходом к работе.

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

Сейчас пришло время обсудить с сообществом обновлённые критерии.

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

Читать далее

Повышение скорости написания кода: Emmet и его использование в VSCode

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

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

Читать далее

Адаптивные изображения. Что использовать: img или picture?

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

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

Читать далее

6 хороших практик по HTML и CSS

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

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

Читать далее

Дайджест свежих материалов из мира фронтенда за последнюю неделю №480 (2 — 8 августа 2021)

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

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

О ходе создания игры «Колобок» в июле

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

В июле с помощью Matter.js реализовал прыжки колобка из-под платформы и подкидывание стрелы.

Как называть функции во фронтенде

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

Тут нет правильного варианта ответа, это вкусовщина. Единственная цель этой статьи – узнать ваше мнение по этому вопросу и окончательно сформировать своё, потому что сейчас я в сомнениях.

Не знаю, какие там проблемы в других сферах программирования, мой вопрос касается фронтенда.

Независимо от того, каким фреймворком вы пользуетесь, и пользуетесь ли вообще, у нас есть HTML-шаблон и JavaScript-код. Код частично залезает в шаблон, и тут и появляется наша проблема. От чего отталкиваться при названии функций?

Читать далее

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

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

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

Как создать 3d игру прямо в браузере

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

Ссылка на обучающее видео

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

Узнать как

Свойства блочной модели CSS. Объяснение с примерами

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

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

Погнали!

50 цветных оттенков Mavo. Решение задач веб-разработчика без JavaScript

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

В начале 2016 года в опросе Лии Веру в Твиттере половина из 3578 человек ответили, что не очень комфортно чувствуют себя с JavaScript. И речь не только о новичках. Профессионалам тоже нелегко — ежедневно выходит огромное количество библиотек, и невозможно уследить за всеми современными трендами в мире веб-разработки. 

Но кое-что все-таки выделяется. В 2016 году появилась новая технология от лаборатории Массачусетского технологического института — Mavo. Он прекрасен тем, что позволяет прокачать HTML за счёт добавления в него относительно небольшого количества атрибутов. В результате вы получаете рабочее веб-приложение так, будто вы использовали JavaScript, но на самом деле кода JS там будет ноль. Точнее, там не будет JS-кода, который вам пришлось бы писать руками.

Дмитрий Шарабин, евангелист технологии Mavo, сегодня расскажет нам про ее 50 цветных оттенков. Видео его выступления на FrontendConf 2020 — здесь.

Читать далее

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

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

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

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

Как использовать IndexDB для управления состоянием в JavaScript

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

Эта статья — перевод оригинальной статьи Craig Buckler "How to Use IndexDB to Manage State in JavaScript".

В этой статье объясняется, как использовать IndexedDB для хранения состояния в типичном клиентском приложении на JavaScript.

Код доступен на Github. Он представляет собой пример to-do приложения, которое вы можете использовать или адаптировать для своих собственных проектов.

Читать далее

Очень интересная библиотека JS: распознавание символов, введённых с дисплея вашего смартфона на сайте

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

Ссылка на github

Привет всем. Представим у вас есть сайт и для мобильной версии вы хотите сделать такую фитчу, чтобы вы рисовали какой-либо символ пальцем по дисплею смартфона и что-то выполнялось. Например, рисуем букву Z и появляется окно с информацией как на гифке.

Очень простая библиотека JavaScript, которая распознаёт ваши рисунки на мобильной версии сайта.

Читать далее

Создание видео урока по веб программированию с использованием: Jsfiddle, SpeechSynthesisUtterance, OBS Studio

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

Для демонстрации небольшого объема кода (html, js, css), удобно пользовать онлайн редактором Jsfiddle.

У меня возникла мысль. Как вывести объяснения кода в виде информационных баннеров и озвучить их при помощи SpeechSynthesisUtterance

Мое решение подключить в консоли браузера хром: css, js и создать див с id=”info_mysmx” для отображения текста.

Читать далее

Easy canvas — простая js библиотека, которая невероятно упрощает работу с canvas html

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

Ссылка на GitHub

Очень простая библиотека javascript, которая сильно упрощает работу с canvas html.

Очень простая библиотека javascript, которая сильно упрощает работу с canvas html.

Читать

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

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

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

Что такое Core Web Vitals

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

Что такое Core Web Vitals? Это набор определенных моментов и факторов, в совокупности действительно имеющих значительное влияние на ранжирование.

На самом деле, Core Web Vitals уже работает на протяжении какого-то времени. Ни много ни мало, с 2018 года. Помимо прочего, существуют официальные подтверждения в документации корпорации.

В Core Web Vital грядут изменения, способные изменить понимание о том, как стоит относиться, обсуждать и объяснять работу Core Web Vitals.

Читать далее