Все потоки
Поиск
Написать публикацию
Обновить
62.55

HTML *

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

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

GPT 5 сделал мне 100 игр, 13 даже не запустились

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

Я потратил 6 часов на этот эксперимент и спешу обрадовать, новая модель от chatgpt не готова заменить программистов и сейчас я коротко напишу почему (бонус: короткое видео).

Читать далее

Как гуманитарий создал сайт с нуля при помощи DeepSeek. Примеры рабочих промптов

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

История о том, как гуманитарий себе сайт навайбкодил. Внутри - примеры промптов, код и размышления на тему RLHF.

Читать далее

Когда if-else не нужен: знакомство с тернарным оператором и switch в JS

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

Привет! Я — Александр Дудукало, автор базового курса по JavaScript. Если вы читаете эту статью, значит, вероятно, уже знакомы с одной из основных логических конструкций в JavaScript — if-else. Если нет, рекомендую сначала прочитать предыдущий материал, где я подробно разобрал эту тему.

В этой же статье мы поговорим о других способах управления логикой в коде — тернарном операторе и конструкции switch. Да, звучит сложно и, возможно, пугающе. Но я уверяю, все очень просто. В итоге вы узнаете, когда их стоит использовать и чем они могут быть полезнее привычного if-else. Поехали?

Поехали!

Что такое инкрементальная гидратация в Angular

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

Как инкрементальная гидратация в Angular помогает сделать приложения действительно быстрыми

Если вы когда-либо запускали SSR в Angular, вы наверняка сталкивались с этим парадоксом: страница вроде бы загружается молниеносно, но ощущается медленной. Контент есть, кнопки на месте — а кликаешь по ним, и в ответ тишина. Почему? Потому что браузер всё ещё «оживляет» интерфейс — запускает JavaScript, подключает обработчики, восстанавливает состояние. Это и есть гидратация, и в классическом исполнении она не так уж и быстра.

Читать далее

Разработка с учетом паттернов WAI ARIA

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

Сегодня веб-приложения стали сложными интерактивными системами, напоминающими полноценные десктоп приложения. Однако за красивыми интерфейсами и богатым функционалом часто скрывается важный аспект, которому уделяется недостаточно внимания — доступность (accessibility). Для миллионов пользователей с ограниченными возможностями это означает, что они не могут полноценно взаимодействовать с сайтом, выполнить базовые действия или получить информацию.

Проблема особенно ярко выражена в современных одностраничных приложениях (SPA), кастомных компонентах, модальных окнах и прочих динамических UI-решениях, которые не учитывают, как с ними будут работать вспомогательные технологии. Например:

Читать далее

Дружеское знакомство с SVG

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

SVG – одна из самых интересных технологий браузера. С его помощью можно делать массу полезных и интересных компонентов. Это неотъемлемая часть моего стека.

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

Для понимания этой статьи не требуется специальных знаний и опыта работы с SVG, но предполагается, что вы знакомы с основами HTML/CSS/JS.

Читать далее

CSS Anchor Positioning API

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

Большой обзор нового API для позиционирования элементов в CSS.

В статье вы узнаете как теперь без использования библиотек можно создавать tooltip'ы, контекстные меню, индикаторы и другие элементы UI, которым необходима якорная связка.

Читать далее

Как мы сделали «ssyoutube для ChatGPT» и что из этого вышло

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

Потребность поделиться диалогом из ChatGPT рано или поздно возникает. Однако нативного экспорта в удобный формат вроде PDF или Markdown платформа не предлагает. Копипаст — плохое решение: таблицы разваливаются, форматирование кода съезжает, а изображения просто пропадают. Мы решили эту задачу для себя, написав собственный конвертер. Оказалось, что он полезен не только нам.

Так появился pdfchatgpt.com. Принцип простой: копируешь share-ссылку и диалога с ChatGPT, добавляешь pdf в начало ссылки и получаешь готовый файл. Также можно перейти на pdfchatgpt.com и просто вставить ссылку на диалог.

В этой статье — технический разбор нашего решения: от простого скрипта с puppeteer до асинхронной системы с очередями. Делимся опытом для тех, кто решает схожие задачи.

Читать далее

Простой веб-сайт

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

Мой веб-сайт — это путешествие по волнам памяти. Я не хочу сказать, что нужно прекратить современную веб-разработку. На моём веб-сайте используются технологии, которые в обсуждаемые на нём времена были ещё недоступны. Он работает на мобильных (протестировано в Firefox для Android), отсутствует только фоновое изображение.

Свой первый веб-сайт я создал где-то в начале 2000-х, и как и большинство веб-сайтов того времени, он был очень простым. Это неудивительно, учитывая то, что большинство (включая и меня) писали такие веб-сайты в Блокноте, что накладывало ограничения на сложность. Можно было выбрать или Блокнот, или какой-то из WYSIWYG-редакторов, которые привязывали к себе тем, что сгенерированный ими HTML было бы совершенно невозможно поддерживать без них, а если вносить изменения вручную, то это вполне могло поломать всё в редакторе.

Тогда не было iPhone, почти не было SEO, а JavaScript, как и CSS, использовать было совсем необязательно.

Цветопередача первых ЖК-экранов была плохой, поэтому лучше было выбирать цветовую схему с высокой контрастностью.

Оптимальным разрешением было 1024×768 (или 1280×1024, если вы могли себе это позволить), однако стоило и обеспечить работоспособность размеров окна и панелей в 800×600. Вам же не нужно, чтобы контент выходил за левый или правый край экрана?

Читать далее

Организация селекторов для тестирования

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

Зачастую обычные веб-приложения не покрывают E2E тестами, однако, когда разговор заходит об административных панелях, формах биллинга и разнообразных конструкторах, то данная потребность быстро возникает.

В этой статье мы рассмотрим, как правильно организовать селекторы для тестирования веб-приложений.

🧪🧪🧪 TEST_ID="Читать далее" 🧪🧪🧪

Слайдер с бесконечной плавной прокруткой на JavaScript

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

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

Приблизительный результат следующий:

Читать далее

Введение в WebRTC

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

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

Читать 📞📞📞

Docs as Code и его использование на проектах

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

Раскрываем Docs as Code: как этот подход меняет создание документации, какие инструменты стоит изучить в первую очередь, и с чего начать внедрение.

Читать далее

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

Да, этот HTML и CSS старый, но всё ещё полезный

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

Привет, Хабр!

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

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

Давайте посмотрим, что я подготовил.

Читать далее

Практическое руководство по иконкам в веб-проектах — Часть 1

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

Сегодня почти каждый веб-проект использует иконки. Это отличный инструмент визуальной коммуникации, который помогает акцентировать внимание на элементах интерфейса. Существует хорошая статья о том, почему стоит использовать иконки — "Icons in Web Design". Но эта статья отвечает на другой вопрос — как их использовать?

Читать далее

Золотое сечение в дизайне 2025: Современные подходы к применению в веб и мобильном дизайне

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

Сегодня я хочу поделиться глубоким исследованием того, как применять золотое сечение в современном дизайне 2025 года. Эта статья основана не только на теории, но и на реальном опыте работы с крупными проектами, A/B тестах и исследованиях пользователей.

Читать далее

Когда мобильной версии мало: зачем и как включать «Версию для ПК»

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

Разработка мобильных интерфейсов — непростая задача. Иногда по разным причинам пользователю недоступен функционал Web-приложения в мобильной версии. Что делать если десктопа под рукой нет?

Читать далее

Измерение тангенциальной компоненты скорости вихревых течений с помощью лазерной доплеровской анемометрии

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

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

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

Читать далее

Создаём свой Telegram-клон с помощью Next.js и TailwindCSS — Часть 1

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

Разработка чат-приложения с нуля может показаться довольно сложной задачей. Но при наличии правильных инструментов все становится намного проще, чем вы думаете.

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

Читать далее

Как сделать ужасный для пользователя интерфейс. Коллекция HTML/CSS лайфхаков

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


Привет, Хабр!


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


А недавно я подумал: а вдруг есть фронтендеры, которые хотят сделать ужасный интерфейс? Ну не любят они пользователей. Или хотят сделать пакость работодателю, который их обидел. Где им взять советы?


Надо помочь! Я собрал вредные HTML и CSS техники. Они супер простые, но очень действенные. Я уверен на сто процентов, что благодаря им интерфейс вашего проекта заставит пользователя вспомнить несколько «ласковых» слов.


Давайте посмотрим, что я вам подготовил.

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