Как стать автором
Обновить
53.77

HTML *

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

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

Настройка проекта AstroJS: VS Code, Prettier, ESlint, Stylelint, Tailwind CSS, PostCSS, минификация файлов

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

AstroJS изначально был движком для создания статичных сайтов. Теперь там есть работа с API, server-side рендеринг, гибридный режим сервера. Можно написать код сайта в Astro-файлах на обычном html + js, а можно подключить визуальный фреймворк на свой выбор: React, Preact, Vue, Solid, Svelte. Подключаем CMS или backend-as-a-service - вот уже замена именитым NextJS и NuxtJS.

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

Читать далее
Всего голосов 6: ↑5 и ↓1 +4
Комментарии 3

Загрузка файлов и каталогов перетаскиванием с помощью drag and drop JS

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

На многих веб-сайтах есть форма для загрузки файла. Для некоторых сайтов, таких как OneDrive или Google Диск, загрузка файлов является основной функцией. С течением времени веб-страницы становятся все более интерактивными. Таким образом, пользователи ожидают большего количества взаимодействий, таких как перетаскивание файлов или каталогов или вставка скриншотов.

Давайте посмотрим, что предоставляют браузеры для загрузки файлов!

Читать далее
Всего голосов 5: ↑5 и ↓0 +5
Комментарии 0

Делай так, и твой адаптив болеть не будет

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

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

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

Читать далее
Всего голосов 9: ↑7 и ↓2 +5
Комментарии 5

Чем отличается реализация non-keyed от keyed в javascript фреймворках?

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

Часто, при разработке сайтов на фреймворках, не придаётся особого внимания деталям, которые в данный фреймворк включены. И это нормально, ведь главная задача фреймворка - чтобы удобно было сайт делать и чтобы он был быстрым и функциональным. Но, эти детали тем и интересны, что узнав некоторые моменты, взгляд на javascript разработку чуть дополняется.

Читать далее
Всего голосов 1: ↑1 и ↓0 +1
Комментарии 2

Истории

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

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


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

Предыдущая часть здесь.

В этом выпуске — DevTools для мобильных браузеров, CSS-антистресс для Booking.com (на КДПВ), единственная защита от фингерпринтинга (спойлер: это браузер Tor, он же Firefox) и др.
Читать дальше →
Всего голосов 35: ↑34 и ↓1 +33
Комментарии 7

Компонентный подход в вёрстке: подробный разбор для джунов и сочувствующих

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

Зачем использовать в вёрстке компонентный подход? Разбираемся, как и зачем верстать интерфейсы, используя этот подход, какие параметры и проблемы важно учесть. Разберём азы, забежим вперёд и подробно погрузимся в тему. Кстати, эта статья написана на основе одного из уроков курса «Профессиональная вёрстка на HTML и CSS» Яндекс Практикума. 

Читать далее
Всего голосов 6: ↑6 и ↓0 +6
Комментарии 1

React Content Elements

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

Примечание: авторский перевод статьи Web Content Elements

В HTML разработке мы используем тег в качестве дескриминатора - тег определяет элемент. Мы используем классы, чтобы применять стили к HTML элементам. Разработчик создает структуру и описывает стили руководствуясь правилами конкретного проекта, своим опытом и общепринятыми рекомендациями.

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

Проблему можно описать следующим образом: разработка HTML структуры и системы стилей для этой структуры недостаточно формализована для обеспечения единого и независимого от проекта, разработчика или этапа разработки стандарта.

Web Content Elements(WCE) - это концепция, шаблон проектирования, который позволяет описать любые решения подобного рода линейно и однообразно.

Согласно WCE, тег - это переменная для генерации синтаксической структуры элемента разметки.

Основная идея паттерна заключается в группировке элементов по роли, которую они представляют на странице.

💡 Элементы сгруппированы по их ролям на странице, а не тегам.

Основные роли:

Читать далее
Всего голосов 3: ↑3 и ↓0 +3
Комментарии 4

Вышел Chrome 115

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

В этой статье вы узнаете про:

Анимации на основе скрола

Topics API

Ограждённые Фреймы

Privacy Sandbox

и многое другое!

Читать далее
Рейтинг 0
Комментарии 2

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

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

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

Читать далее
Всего голосов 85: ↑84 и ↓1 +83
Комментарии 84

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

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

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

Подробнее
Всего голосов 2: ↑2 и ↓0 +2
Комментарии 1

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

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

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

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

Читать далее
Всего голосов 8: ↑7 и ↓1 +6
Комментарии 56

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

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


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

Читать дальше →
Всего голосов 2: ↑2 и ↓0 +2
Комментарии 2

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

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

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

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

Читать далее
Всего голосов 8: ↑8 и ↓0 +8
Комментарии 7

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

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн

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

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

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

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

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

Читать далее
Всего голосов 6: ↑5 и ↓1 +4
Комментарии 3

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

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

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

Читать далее
Всего голосов 5: ↑5 и ↓0 +5
Комментарии 10

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

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

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

Читать далее
Всего голосов 3: ↑3 и ↓0 +3
Комментарии 1

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

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

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

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

Читать далее
Всего голосов 26: ↑26 и ↓0 +26
Комментарии 18

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

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

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

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

Читать далее
Всего голосов 4: ↑3 и ↓1 +2
Комментарии 7

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

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


Последние несколько месяцев открыли золотую эру веб 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 и другим технологиям, связанным с разработкой веб-приложений.

Читать дальше →
Всего голосов 10: ↑10 и ↓0 +10
Комментарии 3

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

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

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

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

Читать далее
Всего голосов 3: ↑3 и ↓0 +3
Комментарии 0

Вклад авторов