Как инструмент проектирования может работать лучше для разработчиков? Этот вопрос мы задаем себе и нашему сообществу. Сегодня мы рады представить Dev Mode - новое рабочее пространство в Figma, созданное для того, чтобы разработчики получали то, что им нужно, когда им это нужно, используя инструменты, которые они используют каждый день.
HTML *
Стандартный язык разметки web-страниц
Новости
Какой язык программирования выбрать? Часть 3. JavaScript
Если вы никогда раньше не работали с JavaScript и читаете этот текст из десктопной версии одного из современных браузеров, то вы можете прямо сейчас написать свой первый HelloWorld-скрипт. Нужно нажать клавишу F12 (открыть инспектор), перейти на вкладку «Console», ввести alert("Hello, World!"); и нажать клавишу «Enter».
Можно назвать JS особенным: будучи самым распространённым языком для браузеров, он также является одним из самых популярных языков программирования в мире.
Новинки CSS и UI: I/O 2023
Последние несколько месяцев открыли золотую эру веб 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).
Как сделать кастомный Semi Donut Chart с помощью SVG
Я сделал конфигурируемый Semi Donut Chart на svg, и решил поделиться с вами.
В этой статье вы узнаете как сделать Semi Donut Chart, гибким и конфигурируем меньше чем за 100 строк кода на Vue 3(применимо к любому другому Фреймворку).
Истории
Треугольник Серпинского — Canvas, JS
Треугольник Серпинского — фрактал, математическое описание которого опубликовал польский математик Вацлав Серпинский в 1915 году.
В этом посте мы напишем рекурсивный алгоритм отрисовки данного известного фрактала в canvas с помощью JS
Знакомимся с @scope в CSS
В январе 2019 года я поднял вопрос в W3C CSS GitHub под названием Please bring back scoped styles. Когда-то существовал атрибут HTML scoped, но он был устаревшим. В CSS он был заменен на @scope
. Поддержка должна появиться в Chrome 117. Safari так же занимает положительную позицию по спецификации.
У @scope
есть два преимущества: стилизация на основе близости и установка нижней границы для селектора.
Реализация реактивности и компонуемости во фронтенд-фреймворке без зависимостей
Что будет, если у программиста появится хобби кулинария. Часть 2
Всем привет, продолжаю свою историю увлечения кулинарией и мобильной разработкой в MIT App Inventor (буду называть "аппинвентор" далее в статье) под это дело. Будет подробно расписана эволюция моего приложения и запредельные, не побоюсь этого слова, возможности аппинвентора, который некоторые считают "инструментом для детей". Кстати, сразу, пока не забыл - дети, если у вас есть интерес к программированию вообще и мобильной разработке под андроид в частности, то я очень рекомендую вам ознакомиться с аппинвентором. А фуллстак-разработчикам и UI/UX дизайнерам возможно будет интересны мои мысли, на основе которых происходила эволюция интерфейса приложения, потому что путь к итоговому результату был очень неблизкий и я бы дорого дал, чтобы сразу придумать то, что получилось в итоге, пропустив промежуточные шаги и сэкономив два года, но я не верю, что это реально в принципе. Зато теперь у меня есть вся эволюция в картинках, так что есть о чем на Хабре рассказать и показать, короче, будет "комикс" ))).
Представляем popover API
Всплывающие окна встречаются в вебе повсеместно. Вы можете увидеть их в меню, переключателях и диалоговых окнах, которые могут проявляться в виде настроек учетной записи, виджетов раскрытия информации и предварительных просмотров карточек товаров. Несмотря на распространенность этих компонентов, их создание в браузерах все еще остается на удивление громоздким. Вам нужно добавить скрипты для управления фокусом, состояниями открытия и закрытия, доступные хуки для компонентов, привязки к клавиатуре для входа и выхода из опыта, и это все еще до того, как вы начнете создавать полезную, уникальную, основную функциональность вашего всплывающего окна.
Чтобы решить эту проблему, в браузеры приходит новый набор декларативных HTML API для создания всплывающих окон, начиная с popover API в Chromium 114.
Рендеринг на сервере и HTMX — это будущее
Современная ситуация с разработкой веб-приложений
Сегодня пользователи ожидают от веб-приложений плавной работы без перезагрузок страниц. К сожалению, эти ожидания обычно реализуются в виде одностраничных приложений (single-page application, SPA), использующих библиотеки и фреймворки наподобие React и Angular. Эти фреймворки очень специализированы и с ними может быть трудно работать.
Новый подход заключается в том, чтобы вернуть возможность реализации этого UX в руки инженеров, разрабатывавших веб-сайты до возникновения безумия SPA, используя готовые наборы инструментов и знания. HTMX — лучший пример такого подхода из тех, что я видел.
25 советов для начинающего верстальщика
В статье собраны 24 совета для новичков-верстальщиков которые возможно сделают ваш код чище и приятнее.
Проблема воспроизведения видео и его адаптация под iPhone и iPad. HTML5
Недавно, в процессе реализации одного из модулей проекта, над которым я работаю — возникла проблема воспроизведения видео на web странице, а также возникли проблемы с его адаптацией под iPhone и iPad.
Проблема была в следующем:
Создал веб‑страницу HTML5, на которой есть небольшое видео, создал свою control‑panel для плейера, и все отлично работает в Chrome и FireFox, но совсем не работает ни на iPhone, ни на iPad. Получаю просто пустую страницу.
Про API, Rest API для начинающего тестировщика. Какой запрос быстрее? 2023
Если вы начинающий тестировщик, то знание API может быть полезным для вас, так как API-тестирование может помочь выявлять ошибки и улучшать качество приложения.
Как сделать сервисы доступнее для людей с нарушениями зрения. Исправляем 5 самых частых ошибок
Всем привет! Меня зовут Юля Долгун, я фронтенд-разработчик из Поиска. Одна из моих задач — поддерживать доступность в поиске по товарам для пользователей с различными ограничениями здоровья.
Прошлой осенью Яндекс улучшил доступность в ряде своих сервисов. Наша команда тоже принимала участие в этом проекте — исправляла баги доступности и помогала с этим другим разработчикам. Среди всех ошибок некоторые повторялись чаще всего — о них и пойдёт речь в этой статье. Я расскажу, где они скрываются, а также как и почему их нужно исправлять.
Butterflynet. Обзор приложения с JS на Android
Чуть больше года назад у меня появилась идея сделать мобильное приложение, в котором можно будет писать код и смотреть результат прямо «не отходя от кассы». Для реализации такого «механизма» был выбран язык JS и HTML в качестве каркаса для представления. Разработка велась на Xamarin. Давайте посмотрим, что из этого вышло.
Вышел Chrome 113
Что вы узнаете:
WebGPU уже здесь, он позволяет использовать высокопроизводительную 3D-графику и параллельные вычисления в вебе.
С помощью инструментов разработчика теперь можно переопределять заголовки ответов сети.
Начинает распространяться First Party Sets, часть Privacy Sandbox, которая позволяет организациям объявлять связанные сайты.
И многое другое.
Webpack. Создание WebP вместе с Jpeg и Png
Как вы знаете, формат изображений WebP в большинстве случаев имеет меньший вес, по сравнению со своими братьями: png и jpeg. Поэтому использовать его в своих приложениях - это хорошая практика.
Как я написал удобную оболочку над электронным дневником
Статья о том, как я в 15 лет облегчил работу с электронным дневником, представленным Кировской области в 2022 году.
Что получилось сделать и как это было реализовано.
Интересные трюки HTML, CSS и JS
Здесь вы найдёте небольшую подборку нестандартных вариантов использования HTML/CSS/JS. Если информация окажется полезной, будем собирать эти хаки на постоянной основе и публиковать по мере накопления.
Примечание. Некоторые трюки основаны на открытых уязвимостях браузеров и поисковой системы Google и др. Поэтому могут перестать работать в ближайшее время (или продолжат, если разработчики не признают баги и не захотят их исправлять). Другие функции работают только начиная с конкретных версий Chrome, Firefox и т. д.
Веб-разработка: 15 материалов для самостоятельного изучения
Привет, Хабр! Мы на курсе Практикума по веб-разработке постоянно смотрим, что новенького появилось в сети для самостоятельного обучения веб-технологиям. И ресурсов в доступе довольно много. Они разнообразны и обучают современным технологиям в разных форматах: видео, учебники, интерактивные курсы, гайды и доклады. Если вы учитесь на курсах или уже работаете во фронтенде, эти материалы помогут улучшить навыки и избавиться от белых пятен. Делимся найденными сокровищами.