Web-разработка

Сбросы базовых CSS-стилей для применения в любом приложении

Устали переписывать снова и снова базовые CSS-стили? Предлагаем код со сбросами, который можно вставить в корневой CSS-набор любого проекта.

Уменьшаем размер образа Docker для приложения Next.js

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

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

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

Preact вместо ручной оптимизации React-приложения

Preact предлагает оптимизацию производительности по умолчанию. Благодаря сокращению объема библиотеки и увеличению скорости, Preact позволяет сосредоточиться на разработке функций, а не на ручной оптимизации, как React.

Управляйте приложением React с помощью голоса

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

Чистый код JavaScript: обработка ошибок

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

8 советов, как стать лучше во фронтенд-разработке

Должен ли я планировать свой проект или лучше сразу погрузиться в процесс разработки? Стоит ли мне внедрить вот этот плагин или вон ту библиотеку?...

Как создать адаптивную галерею для интернет-магазина

В этой статье вы узнаете, как создать адаптивную галерею с помощью простенького JavaScript-фреймворка Stimulus для HTML-страницы вашего будущего интернет-магазина. Stimulus — это мощная альтернатива...

Отладка с Git

В этой статье мы рассмотрим два метода Git для отладки ошибок в базе кода - blame и bisect. С помощью Git blame описываются детали изменения...

Сравниваем WebGL-фреймворки Three.js и Babylon.js

В чем их основное отличие, какой их этих инструментов легче в освоении, а какой более лаконичен и понятен в коде? Знакомимся с обоими на примерах.

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

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

Совместное использование кода в микросервисах и микрофронтендах: в чем разница

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

4 секрета читаемого и производительного кода JavaScript

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

За хорошим UI следует хороший UX

Пересмотрим взаимосвязь UI и UX. Изучим понятие эффекта "эстетики в юзабилити" и его влияние на UX, а также элементы, связанные с этим эффектом.

6 принципов создания производительных веб-приложений

Какие преимущества у WebP-формата? Расскажем, как разработать наиболее успешные веб-приложения, а также рассмотрим такие понятия, как API-дизайн и асинхронные скрипты.

Отзывчивость – это очень просто с CSS-переменными

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

Как работает JavaScript Proxy

Раскройте для себя возможности JavaScript Proxy, углубившись в настройку операций с объектами и контроль над ними. Используя JavaScript Proxy, вы будете создавать надежные и безопасные приложения.

10 ключевых концепций JavaScript

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

Топ-8 инструментов для Angular-разработки в 2023 году

Предлагаем обзор самых продвинутых инструментов для современной Angular-разработки, включая Bit, PrimeNG, RxJS, NgRx. Они помогут проектировать более масштабируемые и надежные приложения Angular.

5 ведущих шаблонов проектирования распределенных систем

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

Доступная и масштабируемая 3-уровневая архитектура AWS

Построим структуру AWS, как трехуровневый торт: с уровнями веба, приложения и базы данных. Подготовим основу - виртуальное частное облако VPC, создадим подсети, шлюзы, маршрутную таблицу, шаблон запуска, группу автомасштабирования. Разберем значение и вклад каждого уровня.

Зачем усложнять разработку с AWS Lambda?

Время подискутировать! Автор рассматривает наметившуюся тенденцию усложнять бессерверную разработку с помощью AWS Lambda и высказывается за сохранение простоты и модульности данного сервиса.

Проект инженерии данных с DAG Airflow «от и до». Часть 2

Проверим корректность данных, отправим письмо и сообщение в Slack с информацией об адресе почты и пароле. Объединим все части проекта, создадим и запустим DAG Airflow со всеми задачами.

Как преобразовать шестнадцатеричное число в десятичное в JavaScript

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

Сказание о шаблоне Стратегия и его реализации

Я, конечно же, не Майкл Фелпс, да и плавать больше предпочитаю в море, но мне очень нравится наблюдать за тренировками пловцов. Этот процесс словно...

Wasp — DSL-язык для современных веб-приложений

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

Чистая архитектура фронтенда

Концепции и практики, такие как SOLID, KISS, DRY и DDD, помогут создавать более чистые архитектуры фронтенда. А правила создания компонентов с учетом развития бизнес-логики позволят коду оставаться ожидаемо поддерживаемым.

Проблема устаревших замыканий и способы ее решения в React. Часть 2

В этой части руководства вы узнаете, как не угодить в ловушку устаревших замыканий в распространенных скриптах React, таких как useCallback, React.memo, Ref.

Отложенная загрузка на уровне шаблонов в Angular

Знакомьтесь с новой фичей Angular 17 — Deferrable Views. Этот API для отложенной загрузки зависимостей шаблонов обеспечит беспрецедентный уровень эргономики. Чтобы оценить его преимущества, предлагаем сравнить новый и традиционный подходы к отложенной загрузке шаблонов.

Кнопка sign-in для вашего веб-приложения

Далее вы узнаете, как использовать библиотеку gapi для настройки аутентификации, как произвести вход пользователя, а также я покажу несколько сниппетов для обработки распространённых пользовательских...

Первые шаги в JavaScript: создание калькулятора

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

Представляем SafeTest: новый подход к тестированию фронтенда

Традиционные тесты пользовательского интерфейса сопряжены с определенным компромиссом. В этой статье мы поговорим о SafeTest, революционной библиотеке, которая предлагает новый взгляд на E2E-тесты для веб-приложений с пользовательским интерфейсом (UI).

7 инструментов для разработки веб-компонентов в 2019 году

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

5 Методов сохранения состояния в промежутках между перезагрузками страниц в React

1. LocalStorage — классовые компоненты Один из простых вариантов для сохранения состояния — использовать localStorage в браузере. Рассмотрим пример: import React from "react"; import "./styles.css"; export default class...

JavaScript: 5 нововведений 2021 года

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

Обзор 10 приемов JavaScript для эффективного программирования

Пополни знания JavaScript 10 эффективными приемами и начни использовать его возможности по максимуму.

4 пользовательских хука React, которые должен знать каждый разработчик

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

Организация таблиц стилей: самые свежие рекомендации

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

Краткое руководство по ООП в JS

В данной статье я постараюсь объяснить новые возможности ES6 JavaScript с точки зрения объектно-ориентированной парадигмы. Для начала, Что такое парадигма программирования? Парадигма — это пример или модель чего-то. То...

REST API для приложения со Spring Boot, Kotlin и Gradle

Я много раз пытался спроектировать API для своих приложений, и это всякий раз заканчивалось разочарованием по одной из этих причин: Недостаточное понимание языка или фреймворка.Неготовность...

Представляем объект JS Window - видимость и дочерние элементы

Объект window — глобальный объект, обладающий свойствами, относящимися к текущему документу DOM — тому, что находится во вкладке браузера. Он включает в себя конструкторы, значения свойств и методы для...

React SPA SEO с Prerender.io

Как правильно настроить SEO для JavaScript-приложения? Рассказываем про Server Side Rendering, Client Side Rendering, Dynamic Rendering и Prerender.io.

От HTTP до HTTP 3 - интернета будущего

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

Возможности контроля в JavaScript: методы AbortSignal.timeout() и AbortSignal.any()

Представляем два малоизвестных, но очень полезных метода управления асинхронными задачами: AbortSignal.timeout() и AbortSignal.any(). Оба эти метода поддерживаются основными веб-браузерами и позволяют корректно прервать асинхронные операции.

AEGIS — система аутентификации платформы Ankorstore

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

7 способов сократить код JavaScript

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

Создаем функции поиска и фильтрации в Ruby on Rails

Ruby on Rails замечательно подходит для создания мощного и гибкого бэкенда. Однако из-за популярности и гибкости JavaScript, Ruby используется для фронтэнда не так часто....

Нерассказанная история: исключение Stale Element Reference в Selenium

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

Руководство по принципам моушн-дизайна

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

13 трендов в типографике в 2021 году

Помимо шрифтов с засечками и кинетических шрифтов, в дизайне и типографике появляются новые тенденции. Существует мнение, что дизайн — это сочетание типографики и сетки. Однако...

Новый взгляд на старые истины: принцип «Не повторяйся!» (DRY)

Первый принцип, с которым вы знакомитесь, начиная свой путь в мир разработок ПО и записывая первые строки кода, — это постулат DRY (“Не повторяйся”). А как...

Streamlit для создания интерактивных веб-приложений: начало

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

Дашбордное решение Apache Superset

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

Как реализовать функциональность перетаскивания с помощью React Beautiful Dnd

Овладейте искусством создания бесшовных и визуально привлекательных взаимодействий с перетаскиванием в React-приложениях с помощью библиотеки React Beautiful Dnd.

1 Кодовая база - 3 платформы

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

Сравнение методов require() и import() в JavaScript

Методы require() и import() используются для включения модулей. У них есть несколько важных особенностей, о которых должен знать каждый разработчик.

9 убийственных приемов для JavaScript разработчиков в 2019 году

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

Разработка и развёртывание приложения машинного обучения: полное руководство

Приложение для прогнозирования COVID-19: от и до Похоже, коронавирус не спешит уходить из нашей жизни. Но мы можем не только носить маски и мыть руки. Давайте...

45 суперхаков JavaScript, которые должен знать каждый разработчик

Эти 45 суперхаков откроют основные секреты профессионального использования JavaScript. Они помогут оптимизировать код, сделать его более чистым и лаконичным, экономичным и безопасным, удобочитаемым и легко сопровождаемым.

Руководство разработчика по оптимизации скорости работы веб-сайтов

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

7 бесплатных Node пакетов с открытым исходным кодом

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

8 полезных функций Angular, о которых стоит знать

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

5 проектов на React для начинающих

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

4 ошибки при использовании useState в React, которых стоит избегать

Если вы стремитесь разрабатывать эффективные приложения с помощью React, стоит внимательно использовать хук useState. Рассмотрим наиболее распространенные ошибки, связанные с его некорректным применением, и методы их исправления.

Добавление 3D-элементов на сайты с помощью Babylon.js и Vite

Хотите погрузиться в мир веб-разработки с 3D-элементами в 2024 году? Ознакомьтесь с актуальным решением по добавлению на сайты 3D-элементов, воспользовавшись пошаговым руководством по созданию базовой версии проекта Babylon.js + Vite.

Компоновщик в JavaScript

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

Объединение Google API с Angular

?Мотивация Задача: нужно получить доступ или отобразить события частного google-календаря.Проблема: нельзя поместить частный календарь внутрь iframe или запросить события, используя ключ API.Необходимые условия: совместимость с...

Rust для разработчиков JS

Rust не вызвал у меня большого интереса, когда я впервые прочитал о нём. Это было около двух лет назад. Я работал веб-разработчиком, программировал в...

Утилиты, которые повышают эффективность приложения React на Typescript

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

Как построить надежную фронтенд-архитектуру

Что такое дизайн «Feature Sliced» во фронтенд-архитектуре? Рассмотрим особенности и результаты применения дизайна, его достоинства и недостатки.

5 недооцененных возможностей JavaScript

Скорее всего, вы не используете эти 5 методов работы с JavaScript. Их можно отнести к одним из самых недооцененных возможностей TypeScript. Впрочем, у вас есть шанс восполнить этот пробел.

Создание кастомного навигационного представления в SwiftUI

Зададим собственное навигационное представление с помощью двух generic-типов. Первый тип — Content, который применяется для передачи представлений внутри кастомного навигационного представления. Второй тип — ...

Отладка кода на Python с помощью icecream

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

Как не лажать с JavaScript. Часть 2

Часть 1, Часть 2 Значение рефакторинга Рефакторинг — это контролируемый процесс улучшения кода без написания новой функциональности. При правильном применении рефакторинг может стать мощным оружием против монстра под...

Как ускорить full-stack разработку, не создавая API

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

Топ-9 PET-проектов для начинающих javascript-разработчиков

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

Как создать трекер расходов с SheetJS

Научимся создавать и управлять электронными таблицами с помощью JavaScript. Попрактикуемся в процессе создания трекера расходов.

Лучшие библиотеки React 2024 года

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

Поверхностное и глубокое копирование в JavaScript

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

Очистка операторов импорта TypeScript с помощью псевдонимов путей

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

Интеграция Rust в Next.js: практическое руководство для разработчика

Как добавить Rust в свой инструментарий и проекты? Рассмотрим различные варианты развертывания кода Rust на Vercel с написанием конечных точек API, общие закономерности разработки API, проблемы применения Rust в продакшене. Весь код и примеры ― в шаблоне.

Почему стоит использовать AVIF вместо JPEG, WebP, PNG и GIF в 2024 году

Обсудим один из новейших графических форматов AVIF. На чем основана эта ультрасовременная технология? Каковы ее преимущества и проблемы? Почему, несмотря на возможные компромиссные решения, она значительно превосходит старые форматы JPEG, WebP, PNG и GIF?

SonarQube: за качество кода отвечаем

Сразу оговорюсь, что в настоящее время основное внимание я уделяю разработкам на JavaScript и, в частности, React, в связи с чем в статье будет...

Как создать планировщик по управлению недвижимостью с помощью Bryntum и ванильного JavaScript

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

Стратегии рендеринга, которые должен знать каждый React-разработчик

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

Как реализовать редактор форматированного текста в вашем React-приложении

Современный софт должен быть максимально удобным для пользователя. Посмотрим, как можно внедрить редактор форматированного текста в приложение на React.

GitHub Codespaces: быстрая разработка на ходу с Flutter

В прошлую пятницу мне на почту пришло приглашение попробовать бета-версию GitHub Codespaces! Я сразу же взял один из своих примерных проектов на Flutter (Fluttersaurus) и...

Переключатель темного режима в веб-приложении

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

Микросервисы gRPC в NestJS: пошаговое руководство

Протокол gRPC (Remote Procedure Call) обеспечивает эффективное взаимодействие между микросервисами, способствуя повышению производительности и масштабируемости приложений NestJS. Рассмотрим возможности gRPC при обмене сообщениями между микросервисами, написанными на NestJS.

Построение архитектуры данных реального времени с помощью Apache Kafka, Flink и Druid

Обработка пакетных данных в режиме реального времени - одна из наиболее сложных задач. Каждый этап, от доставки и обработки данных до их анализа, занимает определенное время. К счастью, для устранения этих задержек есть такие инструменты, как Apache Kafka, Flink и Druid.

Создание приложения для распознавания лиц с помощью Tensorflow.js

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

Основы дизайна, которые должен знать каждый креативщик

Обычный поиск в Google по запросу “образовательные онлайн-ресурсы по дизайну” даёт миллионы результатов — вовсе неудивительно, что понимание того, с чего начинать изучение, может показаться дизайнеру-новичку...

Какие нововведения для веб-разработки представит Vue 3.0?

В ноябре прошлого года создатель Vue, Эван Ю, продемонстрировал ключевые обновления на Vue 3.0, благодаря которым Vue станет более эффективным, модульным и простым в...

Дизайн-системы в 2020 году: где источник истины?

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

Основные принципы темного UI-дизайна

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

Переход с Webpack на Rspack

Подумываете о переходе с Webpack на Rspack? Настоятельно рекомендуем попробовать! Только сначала изучите опыт тех, кто это уже сделал. Вас впечатлит как повышение производительности разработки, так и удобство сопровождения проекта при переходе на Rspack.

Все что касается web-разработки: Front end, Back end, Full stack; HTML, CSS, JavaScript, фреймворки, технологии, безопасность и многое другое!