| Date | Title | Description |
| 17.01.2025 | Unlocking Multilingual Websites with i18next in Next.js | In today's globalized world, websites must speak multiple languages. The ability to localize content is no longer a luxury; it's a necessity. Imagine a storefront that only speaks one language. It limits potential customers. Similarly, a we... |
| 16.01.2025 | Локализуем React (NextJS, TypeScript) сайт на несколько языков с помощью i18next | У меня появилась задача в проекте:
Перевести личный кабинет пользователя на русский и английский (в перспективе и на другие языки).
При этом, определять язык пользователя при первом заходе в ЛК и давать его изменить.
Запоминать выбранный яз... |
| 13.01.2025 | Building a Telegram Bot with FastAPI and Vue.js: A Step-by-Step Guide | In the digital age, convenience is king. Imagine a world where booking a doctor's appointment is as easy as sending a message. This is the promise of a Telegram bot integrated with a MiniApp, powered by FastAPI and Vue.js. This article will... |
| 13.01.2025 | FastAPI и Vue.js 3: телеграм-бот с MiniApp для записи и автоматических уведомлений. Пишем бэкенд | Приветствую, друзья!
Сегодня я рад представить вам новый крупный проект, в рамках которого мы разберем технологии и подходы, которые ранее не освещались в моих статьях.
На этот раз мы создадим телеграм-бота с MiniApp (ранее известным как We... |
| 31.12.2024 | The Secret to 99% Uptime: How Web Design Impacts Website Stability | Share
Tweet
Share
Share
Email
When we think of web design, most of us picture glossy layouts, interactive animations, and perfectly placed buttons that seem to anticipate every user’s whim. But behind every visually stunning website lies a ... |
| 27.12.2024 | Daily Deal: DevDojo Pro, Premium Content, Tools, and Courses for Devs | This DevDojo Pro subscription gives you access to a set of tools to help you build your next great idea. Start with the Page Creator, where you’ll find Tailwind CSS Page Builder, a tool for crafting beautiful landing pages. Then, move on to... |
| 24.12.2024 | Как я разрабатываю конвертер в 2024 (Frontend часть) | Всем привет!
Меня зовут Руслан и я fullstack разработчик, я работаю над заказами и разрабатываю свои digital продукты. На данный момент я разрабатываю конвертер файлов, например картинок, png в webp, jpg в png и так далее. Итак, я решил под... |
| 29.11.2024 | The Rise of Vanilla Calendar Pro: A Developer's Journey into Open Source | In the world of web development, tools come and go. Yet, some tools stick around, becoming staples in the developer's toolkit. Vanilla Calendar Pro is one such tool. It’s a lightweight, flexible calendar built with JavaScript and TypeScript... |
| 29.11.2024 | Как я создал Vanilla Calendar Pro — легкий и гибкий календарь на JavaScript с использованием TypeScript | Превью Vanilla Calendar Pro v3
Привет, Habr!
Честно говоря, долго сомневался, стоит ли писать эту статью. Я понимаю, что среди комментариев наверняка будут такие, кто скажет: «Очередной никому не нужный датапикер». Но сегодня, когда Vanilla... |
| 24.11.2024 | Bridging the Digital Divide: Enhancing Connectivity for Remote Work | In the modern world, connectivity is as vital as air. The digital landscape is a vast ocean, and reliable internet is the boat that keeps us afloat. Yet, many regions, especially remote areas, find themselves stranded on islands of poor con... |
| 22.11.2024 | 5 полезных фреймворков и библиотек для начинающего фронтенд-разработчика на конец 2024 года | Привет, Хабр! Это Саша Раднаев, фронтенд-разработчик в МТС Диджитал. Сегодня поговорим о фронтенде и тех инструментах, которые делают работу специалистов более эффективной. Я бы сказал, что подборка рассчитана на начинающих, но, возможно, и... |
| 15.11.2024 | Что нового в Strapi 5. Спойлер: стало лучше | Всем привет! Меня зовут Александр, я фронтенд-разработчик в KTS.
Не так давно я уже рассказывал про Strapi — одно из ведущих опенсорсных headless CMS‑решений, которое на протяжении долгого времени пользуется большой популярностью у разработ... |
| 09.11.2024 | The State of CSS 2024: Trends, Tools, and Future Directions | The digital landscape is ever-evolving, and CSS is no exception. The recent release of the State of CSS 2024 survey sheds light on the latest trends, tools, and community sentiments surrounding CSS. This annual survey, which gathers insight... |
| 07.11.2024 | Опубликовали результаты State of CSS 2024 | State of CSS 2024
Пробежимся по самому интересному.
Для тех, кто не курсе что это вообще такое. State of CSS - это ежегодный опрос разработчиков со всего мира о последних тенденциях CSS
Фичи:
Фильтр-эффекты (blur(), contrast() и подобные) н... |
| 07.11.2024 | Как я создавал бесплатный сервис оптимизации изображений FlashImg.ru | FlashImg - оптимизатор изображений
Всем привет. В этом материале я расскажу как создавал бесплатный сервис оптимизации изображений FlashImg.ru Зачем оптимизировать изображения
Сегодня любой сайт содержит огромное количество изображений. Цел... |
| 06.11.2024 | Тестирование фронтенд компонентов с jest-dom на видимость пользователю | Решаем проблему с тестированием элемента, что он виден пользователю или не виден.Предпосылки
Разработчики react-testing-library рекомендуют нам писать тесты так, как если бы код работал как у пользователя. А это значит что нужно вызывать по... |
| 05.11.2024 | Как сделать один плагин сразу для всех сборщиков фронтенда? | Здравствуйте, товарищи! Сегодня мы снова поговорим про тулинг для фронтенда. В этот раз обсудим разработку плагинов для сборщиков, таких как: Webpack, Vite, esbuild и подобных. За основу мы возьмем Unplugin.
Короткий ответ на вопрос из заго... |
| 25.10.2024 | Создание пользовательского интерфейса для модуля Webhook с помощью Angular | Предыдущая статья: Создание конфигурируемого Webhook-модуля для NestJS-приложении
В этой статье я опишу создание таблички отображающей данные и формы для ее заполнения, интерфейсы строятся на компонентах от https://ng.ant.design, формы созд... |
| 18.10.2024 | Daily Deal: DevDojo Pro, Premium Content, Tools, and Courses for Devs | This DevDojo Pro subscription gives you access to a set of tools to help you build your next great idea. Start with the Page Creator, where you’ll find Tailwind CSS Page Builder, a tool for crafting beautiful landing pages. Then, move on to... |
| 17.10.2024 | Создание простой CRM на Next.js и Prisma для B2B | интерфейс "дела"Введение
Мой опыт работы в продажах в различных компаниях многому меня научил. Одним из ключевых инструментов, без которого невозможен эффективный процесс продаж, является CRM-система. Для руководителей и менеджеро... |
| 06.10.2024 | Vike — современный SSR-фреймворк | Всем привет. Я являюсь ведущим frontend-разработчиком компании 21Yard. Мы разрабатываем сервис для поиска строительных подрядчиков.
На проект я пришел желторотым масленком, который мало смыслил в seo-продвижении продукта, но жизнь внесла св... |
| 03.10.2024 | Bridging the Gap: Crafting Code for Humans and Machines | In the world of programming, two distinct realms exist: the language of machines and the language of humans. Writing code for computers is a complex puzzle. You take a vague business goal and break it down into logical steps. Each piece mus... |
| 02.10.2024 | DRY-фреймворк: продолжение | Особая благодарность автору идеи @akopyl Его статья по теме.
Идея нехитрая, но очень заманчивая — пишешь CSS, пишется и CSS и HTML одновременно. Это ускорит и упростит разработку, да и реализовать несложно — HTML очень простой язык, по боль... |
| 18.09.2024 | Daily Deal: DevDojo Pro, Premium Content, Tools, and Courses for Devs | This DevDojo Pro subscription gives you access to a set of tools to help you build your next great idea. Start with the Page Creator, where you’ll find Tailwind CSS Page Builder, a tool for crafting beautiful landing pages. Then, move on to... |
| 02.09.2024 | Как я сделал Notion 'у себя дома', есть фулл | Привет, хабровчане!
UPD: ссылка не прикрепилась, и я благополучно ушел на созвон. Вот она, со всем уважением, короткий видос в ютубе и в ВК (там еще обрабатывается)
Давно не писал, потому что для меня Хабр изначально был DIY-тусовкой, в хор... |
| 14.08.2024 | От Web к Native с React | React Native — отличный выбор для веб-разработчиков, имеющих опыт работы с React, которые хотят создать первое мобильное приложение.
Хотя у React и React Native много общего, между веб-платформой и нативными приложениями существуют некоторы... |
| 10.08.2024 | Создание пустого Angular проекта и связь его с существующим сервером на NestJS | Предыдущая статья: Создание пустого проекта с помощью NestJS-mod
Создание приложения происходит через nx схематик для Angular.
Адрес сервера задается жестко в коде, в следующих постах адрес будет перенесен в переменные окружения.
Для запуск... |
| 09.08.2024 | Yaml — король мета-описаний | На Хабре, было несколько статей о Yaml, но мне кажется все они однобоки и не раскрывают его истинную природу. Я попробую это исправить и рассказать о Yaml в положительном контексте. Не буду вновь описывать детали синтаксиса стандартного Yam... |
| 06.08.2024 | Daily Deal: DevDojo Pro, Premium Content, Tools, and Courses for Devs | This DevDojo Pro subscription gives you access to a set of tools to help you build your next great idea. Start with the Page Creator, where you’ll find Tailwind CSS Page Builder, a tool for crafting beautiful landing pages. Then, move on to... |
| 04.08.2024 | Atomic CSS Deep Dive | Здравствуйте, товарищи! Меня зовут Валик и сегодня мы поговорим про подход Atomic CSS в верстке, разработку инструментов и смежные темы.
Кратко вспомним базу - почему Atomic CSS. Рассмотрим популярные решения для работы в этом подходе и сра... |
| 02.08.2024 | Ультимативный ресурс по программированию: сборник бесплатных чит-листов по программированию | В мире программирования чит-листы — это секретное оружие каждого разработчика. От новичков до опытных программистов, эти чит-листы помогают быстро найти нужную информацию и повысить продуктивность. Сегодня я собрал для вас лучший набор чит-... |
| 15.07.2024 | Разработчик представил веб-сайт, который имитирует работу утилиты Disk Defragmenter в Windows 98, включая звуки HDD | Разработчик Деннис Морелло представил онлайн-проект Windows 98 Disk Defrag Simulator, который имитирует работу утилиты Disk Defragmenter в Windows 98, включая звуки HDD. На сайте defrag98.com можно посмотреть, как работала система дефрагмен... |
| 30.06.2024 | Как я написал загрузчик YouTube видео на Ktor + HTMX. Убийца React? | Мы вырастили монстра, который больше не нужен (с)
Рассмотрим возможности применения модного фреймворка HTMX в связке с Ktor на примере написания загрузчика видео.
Ещё давным-давно я мечтал ворваться в написание сайтов, но меня всегда остана... |
| 23.06.2024 | Введение в Advanced Views Framework | Оригинальное видео (English)
Если вы знаете английский язык, вы можете посмотреть видео-введение ниже.
1. О фреймворке
Всем привет! Мы - WPLake, агентство по разработке WordPress веб-сайтов. Представляем вам Advanced Views, специализированн... |
| 13.06.2024 | Как мы повысили продуктивность написания админ-панелей, используя Filament | Сегодня мы хотим поделиться нашим опытом разработки админ-панелей (CMS) с использованием Filament — чрезвычайно мощной библиотеки Fullstack-компонентов, основанной на фреймворке Laravel и технологии Livewire.
Мы используем Laravel в качеств... |
| 29.05.2024 | Делаем кондиционер умным с помощью Elixir и Nerves | С каждым днём всё ближе обжигающее японское лето, поэтому я всё больше думал о своей давней идее: дистанционном управлении кондиционером воздуха в моей спальне через Интернет. Простым нажатием кнопки за десять минут до отправления ко сну я ... |
| 16.05.2024 | React.js: Знакомимся с useReducer, Axios и JSON Server на примере создания инвентарного списка | Когда речь заходит о веб-разработке, трудно обойти вниманием React.js. Она уже десять лет является одной из главных библиотек пользовательского интерфейса и лежит в основе множества популярных фреймворков, таких как, например, Next.js.
Если... |
| 13.05.2024 | Автостопом по дизайн-системе. Путеводитель с оглавлением | Эта статья поверхностна, как водная гладь, по которой скачет камушек-блинчик. Каждый прыг — развилка на Пути дизайн-системы.
Делать свою или взять готовую? Прыг.
Платформенная или универсальная? Прыг.
Версионировать компоненты или всю библи... |
| 24.04.2024 | Руководство по Next.js. 2/3
Получение данных
Рендеринг
Кеширование
Стилизация | Hello world!
Представляю вашему вниманию вторую часть обновленного руководства по Next.js.
Первая часть
На мой взгляд, Next.js — это лучший на сегодняшний день инструмент для разработки веб-приложений.
Предполагается, что вы хорошо знаете J... |
| 18.04.2024 | Почему FilamentPHP — это хорошее решение для создания CMS | Привет, Хабр! Меня зовут Егор Черненок, я работаю PHP-разработчиком в AGIMA. В этой статье расскажу вам о FilamentPHP. В документации говорится, что это набор красивых Fullstack-компонентов для Laravel. От себя добавлю, что он отлично подхо... |
| 12.04.2024 | Нейросеть для веб-сайтов Vercel v0 выложили в открытую бету | Инструмент позволяет сделать интерфейс по текстовому запросу или скриншоту. Готовый макет можно сразу проверить в работе, поднажимав кнопки.
v0 - это продукт от Vercel Labs, который позволяет создавать веб-сайты с помощью генеративного инте... |
| 05.04.2024 | Создание серверного Live Chat приложения с использованием Next.js, Fauna и WunderGraph для GraphQL Live Queries | Пошаговое руководство по созданию масштабируемого, чат-приложения реального времени с использованием серверных технологий... с небольшой помощью от NextAuth.js для входа через GitHub. Кому нужны WebSockets, когда у вас есть Live Queries? Не... |
| 06.03.2024 | Анатомия StyleX | Hello world!
По данным 2023 JavaScript Rising Stars библиотека StyleX заняла второе место в разделе Styling / CSS in JS (первое место вполне ожидаемо занял TailwindCSS).
stylex — это решение CSS в JS от Facebook, которое недавно стало откры... |
| 03.03.2024 | 7+ Bootstrap Alternatives: Best Lightweight Bootstrap Alternatives for 2024? | Share
Tweet
Share
Share
Email
There is no doubt that Bootstrap is an exceptional web development framework used by millions. However, there are several bootstrap alternatives that you can use to create a website with ease while consuming le... |
| 02.01.2024 | Стартап — Сервис по тестированию. Часть 1. «О проекте» | Разделы
О чем пойдет речь
Обо мне
Пройденный путь
Что под капотом
Текущее состояние проекта
ИтогиО чем пойдет речь
Примерно 2.5 года назад я приступил к созданию простенького пет проекта для тестирования себя на предмет усвоения знаний. Как... |
| 21.12.2023 | Вышла предварительная версия Catalyst v0.1.0, которую разработчики называют современным UI-kit для React | 21 декабря 2023 года вышла предварительная версия Catalyst v0.1.0, которую разработчики называют современным UI-kit для React.
Согласно Хабру, UI-kit — это набор компонентов, из которых собирается интерфейс. Кроме визуала он включает в себя... |
| 20.12.2023 | Анатомия shadcn/ui | Если вы следите за новинками экосистемы JavaScript, то должны были слышать об интересной библиотеке пользовательского интерфейса (user interface, UI) под названием shadcn/ui. Вместо того, чтобы распространяться в виде пакета npm, компоненты... |
| 04.12.2023 | Разработка одностраничных приложений с помощью HappyX | В прошлой статье я сравнивал HappyX и Karax, показывая их декларативный подход к разработке с помощью Nim.
В этой статье я подробнее расскажу о разработке одностраничных приложений с помощью HappyX с использованием императивного подхода к р... |
| 01.12.2023 | Atomic CSS здорового человека | Перевод статьи «Reimagine Atomic CSS» двухлетней давности одного из членов команды Vue core Anthony Fu, автора UnoCSS, в которой обсуждается концепция Atomic CSS, плюсы и минусы Tailwind и Windi.
Первая часть.Что такое Atomic CSS?
Для начал... |
| 10.09.2023 | Что бы я хотел знать до переноса 50 000 строк кода на серверные компоненты React | Серверные компоненты React – это большой кусок работы. Недавно мы переосмыслили нашу документацию и устроили ребрендинг Mux. Пока мы этим занимались, мы перенесли весь материал сайтов mux.com и docs.mux.com на серверные компоненты. Так что,... |
| 25.05.2023 | Чем хорош и чем плох Tailwind CSS, или «Допустим, у вас стартап!» | Привет, Хабр! Меня зовут Александр Водолазских. Я живу в Новосибирске и я работаю Frontend Domain Lead в СберМаркете. Сегодня хочу немного поговорить об опыте работы с Tailwind CSS — utility-first CSS framework. Поделюсь болью и радостью, к... |
| 13.04.2023 | Искусственный Художник — Google от мира Text-To-Img | Здравствуйте, меня зовут Дмитрий Карловский и я люблю рисовать шедевры, но у меня совсем не хватает терпения довести хоть один из них до конца.
Ранее я уже показывал вам самописного убийцу Гугл Поиска. Пользуюсь им до сих пор и доволен чист... |
| 21.03.2023 | React: интересная схема работы с формами | Hello, world!
В этой статье я хочу рассказать о схеме (назовем ее так) работы с формами в React, которая на сегодняшний день кажется мне наиболее эффективной. Эта схема предполагает использование React Hook Form для обработки форм и Zod для... |
| 01.03.2023 | Как кастомизировать стандартные страницы ошибок | В процессе настройки нового веб-сервера, вы можете захотеть чтобы страницы ошибок отображались в красивом виде, вместо стандартного. Также иногда страницы ошибок должны быть в том же оформлении, что и основной сайт и/или предоставлять польз... |
| 21.02.2023 | Что должен уметь Frontend разработчик в 2023 году (+Roadmap) | Ситуация на рынке IT
С каждым годом войти в IT становится всё труднее. За счёт высоких зарплат, комфортного образа жизни, амбиций, потребности в специалистах, сейчас чуть ли не каждый второй хочет стать программистом. За счёт этих факторов,... |
| 17.02.2023 | Полное руководство по Remix. Часть 1 | Привет, друзья!
В этой серии статей я расскажу вам о Remix — новом фреймворке для создания клиент-серверных веб-приложений на JavaScript (точнее, на React) со встроенной поддержкой TypeScript.
Remix позволяет разрабатывать так называемые PE... |
| 07.02.2023 | CSS-селектор :has() и междустрочные интервалы в длинных текстах | Если вы работали с сайтами, содержащими много длинных текстов, особенно с сайтами на CMS, где пользователи работают в WYSIWYG-редакторе, то вы наверняка писали CSS для управления междустрочными интервалами между различными элементами типогр... |
| 21.01.2023 | Почему вам не стоит использовать Styled | common issue example for css-in-jsПролог
Технология css-in-js существует уже довольно давно. Ещё в начале своего профессионального опыта я встречал подходы, в которых стайлинг локальных частей интерфейса пробрасывался в html через javascrip... |
| 21.12.2022 | Postgresso 48 (11) | PostgreSQL 16: Часть 3 или Коммитфест 2022-11
Вышел очередной обзор Павла Лузанова. Самое интересное из первых коммитфестов можно прочитать в предыдущих статьях серии: 2022-07 (ru / en), 2022-09 (ru / en).
В этот обзор попало 17 разработок.... |
| 10.12.2022 | Под капотом autofocus.su | Привет. Сегодня хочу рассказать про то, как за кулисами устроена работа моего мини-проекта по ведению задач autofocus.su. В предыдущей заметке я рассказал про принципы, лежащие в основе метода Автофокуса. А тут будет скорее набор ключевых с... |
| 23.11.2022 | Как мы делали приложение а-ля Google Meet с помощью PeerJS, SocketIO и NextJS | Всем привет, дорогие читатели Хабр. Мы долго думали, чтобы нам сделать такое, что от нас не потребует глубоких знаний бэкенда и базы данных, но все же интересное и обучающее, исключительно ориентированное на конечного пользователя. Так мы п... |
| 09.11.2022 | База знаний веб-разработчика: прокачиваем навыки владения CSS | Архипкин Дмитрий
веб-разработчик в HTDev
Любые навыки прокачиваются опытным путём и упорным изучением – это факт, с которым сложно не согласиться. Изучение языков программирования и каскадных таблиц стилей не являются исключением – достичь ... |
| 01.09.2022 | Кто-нибудь, объясните мне прелесть tailwind | Я честно пытаюсь понять, читаю официальную документацию и в преимуществах вижу полную ересь:
You aren’t wasting energy inventing class names. No more adding silly class names like sidebar-inner-wrapper just to be able to style something, an... |
| 20.07.2022 | Sass: разрабатываем дизайн-систему | Привет, друзья!
В данной статье мы разработаем простую, но относительно полноценную дизайн-систему для веб-приложения средствами Sass.
Почему Sass? Потому что, кроме полной поддержки CSS, Sass предоставляет несколько интересных инструментов... |
| 30.06.2022 | Разрабатываем десктопное приложение для заметок с помощью Tauri (React + Rust) | Привет, друзья!
В данном туториале мы разработаем десктопное приложение с помощью Tauri. Tauri — это фреймворк для создания десктопных приложений, похожий на Electron, но позволяющий использовать Rust вместо Node.js, например, для взаимодей... |
| 08.04.2022 | Разрабатываем чат с помощью Nest, React и Postgres | Привет, друзья!
В данном туториале мы разработаем чат с использованием следующих технологий:
TypeScript — статический типизатор;
NestJS — сервер;
Socket.IO — библиотека для работы в [веб-сокетами]();
React — клиент;
TailwindCSS — библиотека... |
| 12.12.2021 | Дайджест свежих материалов из мира фронтенда за последнюю неделю №497 (6 — 12 декабря 2021) | Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | CSS | JavaScript | Браузеры
Веб-разработка
• Актуальные форматы изображений в вебе
• Что такое и зачем нужны шабло... |
| 17.11.2021 | Div на div’е не сидит и div’ом не погоняет: пишем семантически верные индикаторы загрузки на Angular | Сверстать собственный индикатор загрузки — одна из самых простых задач, с которой может столкнуться веб-разработчик. Для получения рабочего решения пригодятся базовые знания HTML и CSS, а JS будет нужен лишь для управления процентом выполне... |
| 10.10.2021 | Как правильно верстать 2, или зачем я написал еще одну UI-библиотеку, мой первый npm-модуль? | Спойлер: атомарный дизайн
Это работа является логическим продолжением моего первого подробного текста для сообщества об актуальных подходах к верстке Как верстать веб-интерфейсы быстро, качественно и интересно. Но, если, в первом трактате, ... |
| - | O que é CSS [Cascading Style Sheets]? | CSS é a sigla para Cascading Style Sheets (ou Folha de Estilos em Cascata, em tradução livre). Trata-se de uma linguagem de formatação de conteúdo muito utilizada em conjunto com o HTML na construção de páginas da internet, sendo responsáve... |
| - | Как создать редактор кода для 40+ языков с помощью React | Подробностями разработки онлайн-платформы выполнения и компиляции кода более чем на 40 языках делимся к старту курса по Frontend-разработке. Автор этого материала — основатель TailwindMasterKit.
Онлайн-платформа выполнения кода позволяет пи... |
| - | Заметка о полезных возможностях современного CSS | Привет, друзья!
В данной заметке я расскажу вам о некоторых полезных возможностях, предоставляемых современным CSS. Также мы немного поговорим о полезных "фичах", которые ждут нас в ближайшие 2 года.
"Полезный" означает,... |
