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

HTML *

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

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

Ранее мы выпустили текст о том, как разработать HTML-шаблон страницы с учетом SEO. Моя статья ориентирована больше на оптимизацию разных типов сайтов, а не код.
Читать дальше →

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

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

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

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

Читать далее

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

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


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


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


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

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

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

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

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

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

ssh terminal.shop

или

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

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

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

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

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

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

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

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

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

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

Читать далее

Gcov/Lcov — покрытие кода и отчет по нему

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

Рассказываю о том, как сделать отчет о покрытии кода

Gcov
 — свободно распространяемая утилита для исследования покрытия кода. Gcov генерирует точное количество исполнений для каждого оператора в программе и позволяет добавить аннотации к исходному коду. Gcov поставляется как стандартная утилита в составе пакета GCC.

Lcov — графический интерфейс для gcov. Он собирает файлы gcov для нескольких файлов с исходниками и создает комплект HTML-страниц с кодом и сведениями о покрытии. Также генерируются страницы для упрощения навигации. Lcov поддерживает покрытие строк, функций, ветвлений.[6]

Читать далее

Простая настройка VPS, NGINX и FastAPI: Пошаговое руководство. Часть 2

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

Всем привет! Продолжаю раскрывать тему простой настройки VPS, NGINX и FastApi. В прошлой части мы раскрыли следующие темы: покупка VPS сервера, покупка доменного имени и создали простое FastApi приложение, которое подгружает index.html файл с простыми стилями.

Напоминаю, что написание всего контента было в рамках темы про запуск aiogram 3.x телеграм бота с технологией вебхуков в связке с FastApi. Раскрыл тему максимально подробно, так что если для вас было проблематично работать с вебхкуками, то милости прошу к моей статье.

Небольшой дисклеймер

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

Теперь к делу. Сегодня мы:

Читать вторую часть

Простая настройка VPS, NGINX и FastAPI: Пошаговое руководство. Часть 1

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

Привет, Хабр! Недавно я писал статью о запуске Telegram-бота на aiogram 3.x с использованием веб-хуков и FastAPI. В той статье я упустил такие важные темы, как создание FastAPI приложения, настройка NGINX, настройка VPS сервера и другие детали, которые могут затруднить работу с вебхуками для новичков.

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

Читать первую часть

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

Как просто создать aiogram 3.x бота на вебхуках (webhook)?

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

Приветствую, Хабр! Меня зовут Алексей, и я опытный Python-разработчик с многолетним стажем. Как и многие другие, я начинал с создания телеграм-ботов, используя метод лонг поллинга. Однако, передо мной встала задача реализации бота через вебхуки, и я решил поделиться своим опытом с вами.

На сегодняшний день я уже хорошо знаком с FastAPI, умею настраивать серверы и поднимать NGINX с защищённым сертификатом HTTPS. Для этой статьи мы будем считать, что вы тоже имеете эти навыки. Если будет необходимость, я с удовольствием опишу, как создать базовый шаблон FastAPI и настроить VPS сервер, но сейчас будем считать, что всё уже настроено.

Итак, сервер у нас готов, и теперь мы приступим к созданию бота на aiogram 3.x с использованием вебхуков.

Читать далее

Пишем веб-компонент для svg иконок

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

Всем привет! Сегодня мы рассмотрим один из вариантов интеграции svg иконок в наш фронтенд проект используя веб-компоненты. Основная идея компонента заключается в том, чтобы лениво подгружать в SVG спрайт иконки и переиспользовать уже загруженные иконки при необходимости. Сами иконки будем вставлять в разметке в виде <svg-icon name="arrow-angle-down"> нам понадобится всего сотня строк кода! Кому интересна реализация, прошу под кат!

Читать далее

Используем REM для адаптива: комфортная резиновая вёрстка для всех устройств

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

Все верстальщики рано или поздно сталкивались с болью, которая заключается в адаптиве сайта под различные устройства. Существуют разные технологии, упрощающие подгонку размеров под определённые устройства, например, clamp(). Эта функция удобна, так как позволяет минимизировать использование брейкпоинтов, но у неё есть свои недостатки:

Читать далее

Нейминг HTML-тегов

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

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

Читать далее

Что нужно знать о современном CSS (весна 2024 года)

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

Цель этого руководства — познакомить вас со списком новых (потрясающих) возможностей, недавно появившихся в CSS.

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

Читать далее

Реализуем touch жесты на vanilla js. Часть 2 (drag, resize)

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

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

Читать далее

Как создать сайт с помощью нейросети: ТОП-20 ИИ No-code платформ

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

Создание сайтов с помощью нейросетей – новый тренд, и написано об этом уже много, но если раньше нужно было задействовать сразу несколько ИИ-сервисов: в ChatGPT сгенерировать идею и структуру сайта, нарисовать дизайн с помощию MidJourney или Stable Diffusion, а уже потом сверстать из этого сайт, то в последние полгода начали набирать обороты No-code платформы, которые объединяют в себе сразу несколько нейросетей и выдают готовый сайт исходя из промта в несколько строчек. В этой статье расскажу как работают No-code сервисы на основе нейросетей и разберу ТОП-20 ИИ No-code платформ для создания сайта.

Читать далее