Обновить
61.51

HTML *

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

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

Создаем веб-сайт, будто на дворе 1999 год

Уровень сложностиПростой
Время на прочтение16 мин
Охват и читатели38K

Задумывались ли вы когда-нибудь о том, как жилось веб-разработчикам 20+ лет назад, когда всемирная паутина была явлением совершенно новым, а чтобы войти в неё, приходилось некоторое время слушать специфические звуковые сигналы, JavaScript и CSS воспринимались скорее как диковинка, а не как привычные средства разработки веб-сайтов, а самым популярным браузером был Internet Explorer? Что ж, вероятнее всего, нет... Но, если у вас найдется несколько свободных минут и вы захотите разобраться в очередной бесполезной штуке — эта статья вас не разочарует!

Читать далее

Манипулируй DOM правильно

Уровень сложностиСредний
Время на прочтение8 мин
Охват и читатели21K

Зачастую, когда я наталкиваюсь на информацию о работе с DOM в Angular, в них присутствуют упоминания об одном или нескольких из этих классов: ElementRef, TemplateRef, ViewContainerRef. Именно упоминания, ведь общее  представление достаточно сложно сложить, даже тщательно изучив документацию Angular. Поэтому я решил подробно сформулировать, как это работает и для чего нужно.

Подробнее

Новый перспективный веб-фреймворк Cample.js. Реактивность без VDOM

Уровень сложностиСредний
Время на прочтение2 мин
Охват и читатели13K

Всем привет! В данной статье я бы хотел рассказать о таком фреймворке как Cample.js.

На сегодняшний момент (версия 3.0.1), фреймворк является активно поддерживаемым в разработке нового функционала. Есть поддержка работы с данными, которые благодаря реактивности без виртуального DOM отображаются крайне быстро. Пример тестов.

Читать далее

Введение в View Transitions API

Уровень сложностиПростой
Время на прочтение7 мин
Охват и читатели14K


Новый View Transitions API, что можно перевести как "интерфейс переходов отображения", предлагает легкий способ анимирования перехода между двумя состояниями DOM — даже между загрузками страниц. Это прогрессивное улучшение, которое можно реализовать уже сегодня.

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

Сравнение тяжеловесности популярных библиотек UI компонент для Vue 3

Уровень сложностиПростой
Время на прочтение3 мин
Охват и читатели17K

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

Было проведено исследование - взяты три HTML элемента: Button, Input и Select, и проверено, насколько увеличатся js и css бандлы если использовать для них одну из 10 распространенных UI библиотек для Vue 3.

Читать далее

Sandbox или как IT-гигант «утонул» в песочнице

Время на прочтение2 мин
Охват и читатели5.4K

Для начало что такое Sandbox - это песочница для iframe, устанавливается через аттрибут для ограничений на загружаемый фрейм, чтобы повысить безопасность текущего документа.

Список правил (перечисляются через пробел для iframe):

allow-forms - Разрешает работу форм на вложенной странице.
allow-pointer-lock - Включает API-интерфейсы на вложенной странице.
allow-popups - Разрешает отображение всплывающих окон на вложенной странице.
allow-same-origin - Воспринимает вставляемый документ как документ загруженный из того же источника, что и основной документ.
allow-scripts - Разрешает работу скриптов на вложенной странице.
allow-top-navigation - Разрешает содержимому вставляемого документа получать доступ к элементам верхнего уровня (документам, окнам).

Читать далее

React: как сделать динамический суффикс в <input />, который будет двигаться вместе с набранным текстом

Уровень сложностиПростой
Время на прочтение6 мин
Охват и читатели8.9K

В этой статье вы узнаете как с помощью react можно сделать input с двигающимся суффиксом, который идет сразу после значения ввода

Читать далее

Встречайте Dev Mode в Figma

Уровень сложностиПростой
Время на прочтение5 мин
Охват и читатели18K

Как инструмент проектирования может работать лучше для разработчиков? Этот вопрос мы задаем себе и нашему сообществу. Сегодня мы рады представить Dev Mode - новое рабочее пространство в Figma, созданное для того, чтобы разработчики получали то, что им нужно, когда им это нужно, используя инструменты, которые они используют каждый день.

Читать далее

В поисках лучшей версии EcmaScript для сборки сайта

Уровень сложностиСредний
Время на прочтение14 мин
Охват и читатели8K

Как оказалось, выбор версии ES для сборки веб приложения, а так же организация самой этой сборки, может оказаться весьма сложной задачей. Задачей, включающей в себя много разнообразных вопросов.

В статье вы увидите бенчмарк производительности EcmaScript фич; узнаете какой из компиляторов генерирует самый производительный JavaScript код; а также можно ли добиться прироста производительности, начав собирать сайт в более поздней версии ES.

Читать далее

Какой язык программирования выбрать? Часть 3. JavaScript

Время на прочтение6 мин
Охват и читатели8.6K

Если вы никогда раньше не работали с JavaScript и читаете этот текст из десктопной версии одного из современных браузеров, то вы можете прямо сейчас написать свой первый HelloWorld-скрипт. Нужно нажать клавишу F12 (открыть инспектор), перейти на вкладку «Console», ввести alert("Hello, World!"); и нажать клавишу «Enter».

Можно назвать JS особенным: будучи самым распространённым языком для браузеров, он также является одним из самых популярных языков программирования в мире.

Читать далее

Новинки CSS и UI: I/O 2023

Уровень сложностиСредний
Время на прочтение13 мин
Охват и читатели17K


Последние несколько месяцев открыли золотую эру веб UI (User Interface — пользовательский интерфейс).


Вот 20 самых захватывающих и впечатляющих возможностей, которые появились недавно или появятся в ближайшем будущем:


  • запросы контейнера (container queries);
  • запросы стиля (style queries);
  • селектор :has();
  • микросинтаксис nth-of;
  • text-wrap: balance;
  • initial-letter;
  • динамические единицы измерения области просмотра (viewport);
  • цветовые пространства с широкой гаммой;
  • color-mix();
  • вложенность селекторов (nesting);
  • каскадные слои (cascade layers);
  • стили с ограниченной областью видимости (scoped styles);
  • тригонометрические функции;
  • индивидуальные свойства трансформации;
  • popover;
  • позиционирование якоря (anchor positioning);
  • selectmenu;
  • дискретные свойства переходов;
  • анимации, управляемые прокруткой (scroll-driven animations);
  • переходы отображения (view transitions).

Руководства, шпаргалки, вопросы и другие материалы по JavaScript, TypeScript, React, Next.js, Node.js, Express, Prisma, GraphQL, Docker и другим технологиям, связанным с разработкой веб-приложений.

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

Как сделать кастомный Semi Donut Chart с помощью SVG

Уровень сложностиПростой
Время на прочтение6 мин
Охват и читатели4.7K

Я сделал конфигурируемый Semi Donut Chart на svg, и решил поделиться с вами.

В этой статье вы узнаете как сделать Semi Donut Chart, гибким и конфигурируем меньше чем за 100 строк кода на Vue 3(применимо к любому другому Фреймворку).

Читать далее

Треугольник Серпинского — Canvas, JS

Уровень сложностиПростой
Время на прочтение5 мин
Охват и читатели4.7K

Треугольник Серпинскогофрактал, математическое описание которого опубликовал польский математик Вацлав Серпинский в 1915 году.

В этом посте мы напишем рекурсивный алгоритм отрисовки данного известного фрактала в canvas с помощью JS

Читать далее

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

Знакомимся с @scope в CSS

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели10K

В январе 2019 года я поднял вопрос в W3C CSS GitHub под названием Please bring back scoped styles. Когда-то существовал атрибут HTML scoped, но он был устаревшим. В CSS он был заменен на @scope. Поддержка должна появиться в Chrome 117. Safari так же занимает положительную позицию по спецификации.

У @scope есть два преимущества: стилизация на основе близости и установка нижней границы для селектора.

Читать далее

Реализация реактивности и компонуемости во фронтенд-фреймворке без зависимостей

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели9.2K

Реализация реактивности и компонуемости стандартными средствами таких фреймворков, как React, Vue и прочие, несёт собой ряд сложностей, включая необходимость настройки множества зависимостей. Но этой цели также можно достичь более простым путём, о чём и пойдёт речь в текущей статье.
Читать дальше →

Что будет, если у программиста появится хобби кулинария. Часть 2

Уровень сложностиПростой
Время на прочтение9 мин
Охват и читатели8.8K

Всем привет, продолжаю свою историю увлечения кулинарией и мобильной разработкой в MIT App Inventor (буду называть "аппинвентор" далее в статье) под это дело. Будет подробно расписана эволюция моего приложения и запредельные, не побоюсь этого слова, возможности аппинвентора, который некоторые считают "инструментом для детей". Кстати, сразу, пока не забыл - дети, если у вас есть интерес к программированию вообще и мобильной разработке под андроид в частности, то я очень рекомендую вам ознакомиться с аппинвентором. А фуллстак-разработчикам и UI/UX дизайнерам возможно будет интересны мои мысли, на основе которых происходила эволюция интерфейса приложения, потому что путь к итоговому результату был очень неблизкий и я бы дорого дал, чтобы сразу придумать то, что получилось в итоге, пропустив промежуточные шаги и сэкономив два года, но я не верю, что это реально в принципе. Зато теперь у меня есть вся эволюция в картинках, так что есть о чем на Хабре рассказать и показать, короче, будет "комикс" ))).

Читать далее

Представляем popover API

Уровень сложностиСредний
Время на прочтение6 мин
Охват и читатели16K

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

Чтобы решить эту проблему, в браузеры приходит новый набор декларативных HTML API для создания всплывающих окон, начиная с popover API в Chromium 114.

Читать далее

25 советов для начинающего верстальщика

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели19K

В статье собраны 24 совета для новичков-верстальщиков которые возможно сделают ваш код чище и приятнее.

Читать далее

Проблема воспроизведения видео и его адаптация под iPhone и iPad. HTML5

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели9.9K

Недавно, в процессе реализации одного из модулей проекта, над которым я работаю — возникла проблема воспроизведения видео на web странице, а также возникли проблемы с его адаптацией под iPhone и iPad.

Проблема была в следующем:

Создал веб‑страницу HTML5, на которой есть небольшое видео, создал свою control‑panel для плейера, и все отлично работает в Chrome и FireFox, но совсем не работает ни на iPhone, ни на iPad. Получаю просто пустую страницу.

Читать далее

Про API, Rest API для начинающего тестировщика. Какой запрос быстрее? 2023

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели31K

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

Читать далее