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

HTML *

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

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

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

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

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

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

Читать далее

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

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


Последние несколько месяцев открыли золотую эру веб 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 мин
Количество просмотров4K

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

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

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

Читать далее

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

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

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

Читать далее

Как сделать сервисы доступнее для людей с нарушениями зрения. Исправляем 5 самых частых ошибок

Уровень сложностиПростой
Время на прочтение8 мин
Количество просмотров3.6K

Всем привет! Меня зовут Юля Долгун, я фронтенд-разработчик из Поиска. Одна из моих задач — поддерживать доступность в поиске по товарам для пользователей с различными ограничениями здоровья.

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

Читать далее

Butterflynet. Обзор приложения с JS на Android

Уровень сложностиСредний
Время на прочтение4 мин
Количество просмотров2.5K

Чуть больше года назад у меня появилась идея сделать мобильное приложение, в котором можно будет писать код и смотреть результат прямо «не отходя от кассы». Для реализации такого «механизма» был выбран язык JS и HTML в качестве каркаса для представления. Разработка велась на Xamarin. Давайте посмотрим, что из этого вышло.

Читать далее

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

Вышел Chrome 113

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

Что вы узнаете:

WebGPU уже здесь, он позволяет использовать высокопроизводительную 3D-графику и параллельные вычисления в вебе.

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

Начинает распространяться First Party Sets, часть Privacy Sandbox, которая позволяет организациям объявлять связанные сайты.

И многое другое.

Читать далее

Webpack. Создание WebP вместе с Jpeg и Png

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

Как вы знаете, формат изображений WebP в большинстве случаев имеет меньший вес, по сравнению со своими братьями: png и jpeg. Поэтому использовать его в своих приложениях - это хорошая практика.

Читать далее

Как я написал удобную оболочку над электронным дневником

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

Статья о том, как я в 15 лет облегчил работу с электронным дневником, представленным Кировской области в 2022 году.

Что получилось сделать и как это было реализовано.

Читать далее

Интересные трюки HTML, CSS и JS

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

Здесь вы найдёте небольшую подборку нестандартных вариантов использования HTML/CSS/JS. Если информация окажется полезной, будем собирать эти хаки на постоянной основе и публиковать по мере накопления.

Примечание. Некоторые трюки основаны на открытых уязвимостях браузеров и поисковой системы Google и др. Поэтому могут перестать работать в ближайшее время (или продолжат, если разработчики не признают баги и не захотят их исправлять). Другие функции работают только начиная с конкретных версий Chrome, Firefox и т. д.
Читать дальше →

Веб-разработка: 15 материалов для самостоятельного изучения

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

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

Читать далее

Фичи WebKit в Safari 16.4

Уровень сложностиПростой
Время на прочтение21 мин
Количество просмотров9.4K

Сегодня мы рады рассказать вам о многочисленных дополнениях к WebKit, которые включены в Safari 16.4. Этот выпуск содержит 135 новых веб-функций и более 280 обновлений. Давайте посмотрим.

Читать далее

ARRS // Нам нужна ваша помощь

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

Русскоязычное Комьюнити Escape From Tarkov обращается к дешифровщикам и криптографам за помощью в дешифровке изображений из игры альтернативной реальности ARRS терминал.

Текущий процесс дешифровки силами энтузиастов из комьюнити зашёл в тупик.

Что такое ARRS?