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

HTML *

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

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

Создание кастомного интерактивного минисайта с ИИ без платных сервисов

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

У любого последователя создания nocode сайтов может возникнуть проблема: хочу создать то‑то, но у сервиса нет этой функции, при этом сервис прекрасный: хорошая цена, обширная функциональность, доступность эксклюзивных функций и т. д. То есть менять на другой нет смысла, но того что я хочу — нет.

Этот рассказ о том, как я пытался решить эту проблему и что из этого вышло.

Спойлер: Получилось

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

Новости

Ультимативный ресурс по программированию: сборник бесплатных чит-листов по программированию

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

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

Обязательно сохраняйте в закладки!

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

DRY-фреймворк: как сократить HTML-код и писать только на CSS

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

Привет! Я Толя, Frontend-разработчик в Selectel. В мире фронтенда есть «острый недостаток» фреймворков, поэтому я, как и 90% JavaScript-разработчиков, решил разработать собственный. В тексте расскажу, как «запихать» HTML-элементы в CSS и не испортить проект. Читайте до конца — вас ждет неожиданный сюжетный поворот.
Читать дальше →
Всего голосов 26: ↑25 и ↓1+29
Комментарии9

WebSim AI: Бесплатный ИИ-помощник для быстрой веб-разработки – время фронтендерам напрячься

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

Привет, Хабр! Наткнулся на интересный и, как по мне, революционный проект WebSim AI. Покопался в нем несколько дней и сейчас, как вы уже поняли, решил с вами поделиться информацией о нем.

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

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

Истории

Создание собственного API на Python (FastAPI): Подключаем фронтенд и статические файлы

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

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

- Основы создания простого приложения с использованием FastAPI.

- Основные HTTP‑запросы: POST, GET, PUT и DELETE.

- Принципы работы с Pydantic моделями и их интеграцию в FastAPI.

- Использование инструментов Alembic и SQLAlchemy для управления базой данных.

- Настройку асинхронной работы с базой данных PostgreSQL в SQLAlchemy.

- Реализацию кастомной авторизации и аутентификации в FastAPI.

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

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

Магия CSS на практике: советы по вёрстке от гика. Часть 2

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

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


Сегодня я расскажу:

  • какие правила у меня есть при именовании CSS-переменных для дизайн-систем;
  • на какие логические свойства вам стоит обратить внимание;
  • зачем нужно делать прозрачные рамки;
  • как я делаю зависимость значения одного свойства от других более явным;
  • про пользу «внутренних» переменных.

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

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

Мы сопоставили языки программирования с специализацией World Of Warcraft

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

Привет, друзья разработчики и геймеры!

Мы с командой разработчиков "*** Telecom" решили весело и с увлечением сопоставить языки программирования с классами из мира World of Warcraft. Почему бы не объединить наше любимое хобби с нашей профессиональной деятельностью? Давайте вместе погрузимся в этот волшебный мир и узнаем, как каждый язык программирования может быть аналогом одного из классов в WoW!

Читать далее
Всего голосов 25: ↑7 и ↓18-10
Комментарии17

CSS-классы вредны

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

Если вы когда-нибудь заглядывали за кулисы пользовательских веб-интерфейсов, то знаете для чего нужно свойство class. Оно ведь нужно для связи HTML с CSS, правда? Сейчас я расскажу о том, почему настало время отказаться от него. Имена классов — это архаичная система, используемая как неудачный посредник для примитивов UI; ещё хуже то, что они создают ужасные сочетания, приводящие к комбинаторному взрыву странных пограничных случаев. Давайте изучим этот вопрос, начав со скучного урока истории, который вы уже слышали миллион раз.
Читать дальше →
Всего голосов 71: ↑63 и ↓8+75
Комментарии107

Книга: «Hypermedia-разработка. htmx и Hyperview»

Время на прочтение25 мин
Количество просмотров1.9K
image Привет, Хаброжители!

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

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

Познакомьтесь с новыми инструментами — htmx и Hyperview, которые используют гипермедиа в качестве системной архитектуры. Научитесь строить сложные пользовательские интерфейсы с использованием гипермедиа как базовой технологии: на базе htmx для веб-приложений и на базе Hyperview для мобильных. А затем исследуйте прикладные современные подходы к построению веб-приложений, в которых эта архитектура используется.

Гипермедиа-управляемая архитектура подойдет не для каждого приложения, но повышенная гибкость и простота станут огромным преимуществом. Даже если этот подход не улучшит вашу программу, вам стоит понять его суть, сильные и слабые стороны и отличия от традиционно применяемой методики. Веб-среда росла быстрее, чем любая другая распределенная система в истории, и веб-разработчики должны уметь использовать сильные стороны базовых технологий, которые сделали возможным этот рост.
Читать дальше →
Всего голосов 9: ↑8 и ↓1+12
Комментарии2

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 9

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

Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.


Сегодня мы рассмотрим следующие аспекты:

  • какие сюрпризы есть при использовании свойства display;
  • о чём нужно помнить при вёрстке кнопки «Показать пароль»;
  • зачем нужны подсказки с помощью атрибута aria-label при разметке областей навигации;
  • как можно переборщить с заголовками и какие проблемы будут.

Давайте начнём!

Читать дальше →
Всего голосов 27: ↑26 и ↓1+37
Комментарии9

Вопросы к собеседованию React (Junior level)

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

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

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

Создание статических сайтов из Markdown без HTML (pandoc, mkdocs, hugo и jekyll)

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

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

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

Как настроить SEO при создании сайтов самостоятельно?

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

Привет, Хабр! Я — Марина, специалист по продвижению сайтов в Selectel. В тексте расскажу, как правильно настроить SEO-параметры для разных типов веб-ресурсов на этапе их создания. Пригодится вебмастерам, маркетологам и всем, кто работает с сайтами.

Ранее мы выпустили текст о том, как разработать HTML-шаблон страницы с учетом SEO. Моя статья ориентирована больше на оптимизацию разных типов сайтов, а не код.
Читать дальше →
Всего голосов 32: ↑31 и ↓1+38
Комментарии27

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

19 сентября
CDI Conf 2024
Москва
24 сентября
Конференция Fin.Bot 2024
МоскваОнлайн
30 сентября – 1 октября
Конференция фронтенд-разработчиков FrontendConf 2024
МоскваОнлайн

Как я написал загрузчик YouTube видео на Ktor + HTMX. Убийца React?

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

Мы вырастили монстра, который больше не нужен (с)

Рассмотрим возможности применения модного фреймворка HTMX в связке с Ktor на примере написания загрузчика видео.

Читать далее
Всего голосов 18: ↑14 и ↓4+11
Комментарии10

Магия CSS на практике: советы по вёрстке от гика

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


Хабр, привет! Я частенько пишу про работу CSS, его неизвестные возможности и влияние на доступность. Кажется, этих направлений мало для меня. Теперь я хочу показать техники вёрстки, используемые мной постоянно.


Цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но, пожалуйста, относитесь к этому контенту, как просто альтернативному мнению. Мои техники не являются единственными правильными решениями.


Сегодня я расскажу:

  • как избавиться от соседнего родственного комбинатора + при реализации нестандартных чекбоксов и радиокнопок;
  • про свойство inset, сокращающее код на целых три строки;
  • мой сниппет для расширения интерактивной области у кнопок и ссылок;
  • стиль написания медиа-запросов, позволяющий сократить количество правил;
  • альтернативный способ центрирования элемента без свойства transform.
Читать дальше →
Всего голосов 39: ↑39 и ↓0+54
Комментарии9

Кофе по SSH, сайты в zip-архивах. Чистый HTML лучше всего

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

Очень интересная штука — интернет-магазин в консоли. Он позволяет авторизоваться в магазине и заказать товар (кофе), не выходя из терминала. Говорят, кофе из командной строки даже вкуснее, чем обычный.

Просто заходим в магазин по SSH:

ssh terminal.shop

или

ssh 172.65.113.113
Читать дальше →
Всего голосов 52: ↑51 и ↓1+66
Комментарии14

Telegram Боты на Aiogram 3.x: Message handler и трюки с текстом

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

Приветствую! Благодарю за подписки, лайки и прочий позитивный отклик на мою деятельность. Продолжим.

Мы уже обсудили:

Текстовые клавиатуры

Инлайн клавиатуры

Командное меню

Встроенные фильтры и магические фильтры

Собственные фильтры

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

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

Factor and Block CSS — методология CSS

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

Hello, Developers!! Сегодня я расскажу о новой методологии для CSS, которая поможет вам сэкономить время на чтение и редактирование CSS-файлов. Методологию я придумал сам, если будут какие-то идеи, как улучшить её, буду рад обсудить это с вами в комментариях. Давайте же начнем.

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

Полный гайд по CSS Flexbox с примерами из практики

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

Привет! Сегодня мы поговорим про flexbox в css. Это очень важная тема, в которой должен разбираться каждый фронтенд-разработчик или верстальщик. Я покажу вам как flexbox работает на реальных примерах. А в конце статьи покажу лайфхаки, которыми сам постоянно пользуюсь на работе.

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

Как определить текущее местоположение пользователя на сайте

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

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

Прежде чем писать код, хотелось бы отметить, что моё решение не претендует на "чистое" и единственно-верное, поэтому если есть более гармоничное и красивое решение - используйте его (буду только рад если поделитесь им).

Если кому интересно, задача была реализована на Options API, фреймворка Vue, но сам код написан на чистом JS. Это может быть полезно и тем, кто пишет на React и т.д.

Читать далее
Всего голосов 6: ↑2 и ↓40
Комментарии14
1
23 ...

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