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

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

7 приложений и сайтов, которые облегчат работу UX/UI дизайнера

7 приложений и сайтов, которые облегчат работу UX/UI дизайнера

Рассмотрим 7 приложений и сайтов для UX/UI дизайнера и подробно изучим основные функции, особенности и области использования каждого из них.
Реальные возможности WASM

Реальные возможности WASM

Длительное и настойчивое изучение WASM убеждает в удивительных возможностях этой технологии. Ознакомьтесь с исследованиями разработчика, которого WASM заставил перейти от скепсиса к восторгу, вызванному прежде всего 40-кратным ускорением бэкенд-систем.
Шаблон проектирования "Цепочка ответственности" в TypeScript

Шаблон проектирования “Цепочка ответственности” в TypeScript

Нужно уменьшить зависимость между клиентом и обработчиками? Хотите реализовать принцип единственной ответственности, а заодно принцип открытости/закрытости? Во всех этих случаях выручит шаблон проектирования "Цепочка ответственности".
Пишите React-компоненты на профессиональном уровне 

Пишите React-компоненты на профессиональном уровне 

Профессионалы пишут компоненты, которые можно легко понять, удобно обслуживать и повторно использовать. Научитесь создавать такие компоненты с помощью шаблонов HOC и хуков - и ваша кодовая база выдержит испытание временем.
Как создать простой API с помощью Express и MongoDB

Как создать простой API с помощью Express и MongoDB

Создадим API с помощью Express, а для хранения данных будем использовать MongoDB. Чтобы следовать руководству, рекомендуется иметь базовые знания о JavaScript, MongoDB и Node.JS.

Как компилировать ZXing C++ в Wasm, используя WASI SDK в Linux

WASI — это системный интерфейс, предназначенный для создания программных модулей .wasm не только для Node.js и веб-браузеров, но и для любой совместимой с WASI среды выполнения. Хотя...
Webpack

Разработка современных приложений с помощью WEBPACK

Насколько далеко можно зайти с конфигурацией Webpack по умолчанию? Я выступал на конференции GDG Devfest, где говорил об использовании webpack в разработке современных приложений. Изначально...
Что делает сайты медленнее?

Что делает сайты медленнее?

Аналитики CatchJS отрендерили 1 миллион самых популярных сайтов. Они отследили разнообразные метрики производительности, учли каждую ошибку и отметили каждый запрошенный URL. Результат составляет, вероятно,...
Осваиваем NestJS: построение эффективного бэкенда REST API

Осваиваем NestJS: построение эффективного бэкенда REST API

Среда NestJS - популярное решение для разработки эффективных приложений. Познакомимся с пошаговым гайдом по построению надежного бэкенда REST API с помощью этого фреймворка.
Понятие о горячей замене модулей в Webpack

Понятие о горячей замене модулей в Webpack

В разработке приложения на JavaScript есть одна особенность: каждый раз при сохранении изменений кода для обновления пользовательского интерфейса приходится перезагружать браузер. Для отслеживания изменений в...
UX

Почему все веб-сайты выглядят одинаково?

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

7 факторов, которые помогут улучшить UX-дизайн

Чтобы улучшить UX, нужно знать «слабые места» интерфейса. Есть типичные «проблемные зоны», на которые дизайнеру следует обращать особое внимание. Обычно именно здесь кроются причины...
UX-текст - как он формирует продукт?

UX-текст - как он формирует продукт?

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

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

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

Функции-генераторы в JavaScript для оптимизации памяти

Управление памятью: обычные функции JavaScript против функций-генераторов Едва ли не каждый программист сталкивается с проблемой перебора большого количества элементов (коллекции статей, изображения, записи в базе...
7 советов по очистке кода React

7 советов по очистке кода React

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

Откройте миру разрабатываемые вами API

Современный мир как никогда ранее благоприятствует разработчикам. У вас есть доступ к тысячам статей, миллионам ответов на вопросы на StackOverflow и миллиардам твитов, связанным...
Проблема устаревших замыканий и способы ее решения в React. Часть 2

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

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

Факты о веб-сайтах в 2018 году (и почему токенизация стала отличной идеей для этой...

Новый способ применения технологии блокчейна. И переход от слов к действиям с проектом uKit AI. Существование современной всемирной паутины началось почти 30 лет назад с...
Как работать с — настраиваемым элементом HTML с возможностью анимации

Как работать с <qr-code> — настраиваемым элементом HTML с возможностью анимации

Рассказываем и показываем, как работать с элементом для создания стилизованных, современных qr-кодов с поддержкой SVG логотипов. В конце материала — таблица сравнения с другими подобными элементами для фреймворков фронтенда.
Использование лямбда-авторизатора с AWS WebSocket

Использование лямбда-авторизатора с AWS WebSocket

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

Создавайте веб-приложения, которые умеют слушать! ?

У вашего веб-приложения тоже могут быть уши! Мир стоит на пороге настоящего бума голосовых технологий, которые имеют огромный потенциал в современных посткоронавирусных реалиях, когда приходится...
Design

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

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

Как использовать React в приложениях Angular

Если вы программист, будьте готовы столкнуться с самыми разнообразными кейсами в своей практике. Может случиться, что вам нужно будет воспользоваться React в приложении Angular. Сегодня расскажем, как это сделать.
Создаем расширение Chrome на Mint

Создаем расширение Chrome на Mint

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

5 актуальных рекомендаций по оптимизации отладки

Ох, уж эти ошибки! Их появление в коде ничего, кроме досады, не вызывает. Лично мне они точно портят настроение. Только представьте: вы создаете продукт,...
Схватка "рекурсия против циклов" на арене JavaScript

Схватка “рекурсия против циклов” на арене JavaScript

Бой из пяти раундов между рекурсией и циклами за титулы "самый лаконичный", "самый понятный" и "самый быстрый." На кого в этих категориях поставите вы?
Ruby on Rails

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

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

5 советов по оптимизации производительности приложения NodeJS

Как оптимизировать производительность приложения NodeJS, чтобы максимально улучшить пользовательский опыт? Это один из самых частых вопросов на собеседовании. Ответить на него правильно помогут советы опытного бэкенд-инженера.
Web Development

Лучшие генераторы статических сайтов для React в 2019 году

До того, как CMS захватили интернет, на его просторах господствовали статические сайты, и казалось, что они остались в прошлом. Но сегодня статические сайты переживают...
Как написать тест-раннер в 80 строк кода на JavaScript/TypeScript

Как написать тест-раннер в 80 строк кода на JavaScript/TypeScript

Сделаем простой тест-раннер на nodejs с включением всех основных требований и почти без зависимостей. Разберем также самую интересную часть реализации - API на JavaScript из SWC.
7 React-проектов, которые помогут вам стать лучшим разработчиком

7 React-проектов, которые помогут вам стать лучшим разработчиком

Хотите расширить свое портфолио и основательно изучить ReactJS? Эти 7 React-проектов идеально подходят для развития навыков веб-разработки. Они помогут вам создавать интерактивные сайты и приложения на высоком профессиональном уровне.
Ключевые понятия JavaScript, которые должен знать каждый разработчик — часть 1

Ключевые понятия JavaScript, которые должен знать каждый разработчик — часть 1

Предлагаем 32 ключевых понятия JavaScript, собранные из 50+ руководств. Они помогут усвоить премудрости JavaScript, чтобы создавать оптимизированный код и избегать ошибок. В этой части будут раскрыты первые 11 понятий, включая стек вызовов, примитивные типы, типы-значения, ссылочные типы, системы типизации, операторы равенства и др.
Продвинутые техники PHP. Часть 2

Продвинутые техники PHP. Часть 2

Рассмотрим стратегии эффективной обработки ошибок, профессиональной отладки и возможностей PHP-фреймворков для быстрой разработки. Раскроем еще больше секретов PHP и пополним багаж знаний.
Serverless Functions & Microservices

Можно ли использовать бессерверные технологии для создания микросервисов?

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

Как правильно зарегистрировать плагин в nuxt.js

По моему мнению, официальная документация nuxt.js в недостаточной мере раскрывает процесс внедрения плагина в ваше приложение, поэтому хочу рассказать об этом поподробней. Cначала я покажу...
Уменьшаем размер образа Docker для приложения Next.js

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

Как избавиться от ненужных файлов в образе докера? Выполним контейнеризацию приложения и простую оптимизацию размеров образа Docker.
Разработка веб-дэшбордов с использованием React, Material UI, Tailwind CSS и Nivo. Часть 1

Разработка веб-дэшбордов с использованием React, Material UI, Tailwind CSS и Nivo. Часть 1

Представляем вашему вниманию серию статей, посвященных визуализации и ее применению в современном IT-ландшафте. В первой части цикла расскажем, как создать динамичное и отзывчивое приложение с использованием React, Material UI, Tailwind CSS и Nivo.
Двоичный поиск в Swift и расширение возможностей коллекций

Двоичный поиск в Swift и расширение возможностей коллекций

Многие из нас изучали алгоритмы, но не многие реализовывали их на практике.  Стандартная библиотека (Foundation для Swift) предлагает готовые методы и функции, которые сами реализуют...
JavaScript - идеальный выбор при аналитической обработке данных

JavaScript - идеальный выбор при аналитической обработке данных

По поводу отказа от фото- и видеоаппаратуры в пользу мобильных телефонов, оснащенных камерами, фотограф и предприниматель Чейз Джарвис однажды пошутил: “Лучшая камера  —  это...
Angular

ANGULAR v7: подсказки командной строки, виртуальная прокрутка, перетаскивание и др.

Версия Angular 7.0.0 уже вышла! Это основной релиз, который затронул всю платформу, включая ядро, Angular Material, и командную строку с синхронизированными базовыми версиями. В...
AWS WebSocket: написание документации с помощью Async API Spec

AWS WebSocket: написание документации с помощью Async API Spec

Третья статья из серии AWS WebSocket. В ней мы напишем познакомимся с удобным написанием необходимой документации для нашего WebSocket.
Java Script

Как JavaScript повзрослел и стал настоящим языком

Мало кто представлял себе, что этот язык превратится в профессиональную платформу Если ещё лет 20 назад вы бы сказали, что JavaScript станет одним из самых...
Angular

Оптимизация размера Angular bundle за 4 шага

Вам доводилось получать жалобы на слишком медленную загрузку веб-приложения или получать задачу “оптимизировать производительность” медленного приложения? Множество тем посвящено производительности приложений: отложенная загрузка, отслеживание...
Обзор текущего состояния Next.js Router

Обзор текущего состояния Next.js Router

Фреймворк Next.js динамично развивается, он сделал огромный скачок вперед, и поэтому многие предыдущие статьи о нем могли устареть. На момент написания этой статьи действует...
Angular

Улучшите производительность с помощью веб-воркеров

Введение В этой статье мы рассмотрим, как использовать веб-воркеры для повышения производительности при запуске. Примеры будут в приложении Angular 8 — с ним проще начать работать с...
Как создать интересный онбординг и привлечь пользователей с первого взгляда

Как создать интересный онбординг и привлечь пользователей с первого взгляда

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

Как добавить аутентификацию Supabase к приложению на Vue

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

Программирование будущего: беспилотный автомобиль, управляемый JavaScript и ИИ

Пытаетесь разгадать магию беспилотных автомобилей? Присоединяйтесь к программистам, увлекающимся автоматизированными транспортными средствами. Они помогут написать код, превращающий автомобиль в самоуправляемое чудо техники.
Nexus  -  новый визуализатор дерева компонентов для Next.js

Nexus  —  новый визуализатор дерева компонентов для Next.js

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

Связывание файла JavaScript с HTML: полное руководство

Научимся связывать JavaScript с HTML тегом
Рандомизатор на чистом CSS

Рандомизатор на чистом CSS

Каждый раз когда мы нажимаем на одну из игральных карт, нам будет выпадать новая: иногда король червей, иногда пиковый туз, иногда бубновая девятка  — ...
Вас неправильно учили объектно-ориентированному программированию

Вас неправильно учили объектно-ориентированному программированию

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

11 шагов на пути к работе дата-сайентиста

Получить работу в области науки о данных, МО и ИИ сложно. Эти 11 шагов помогут стратегически подойти к решению этой проблемы (спойлер: Kaggle не относится к их числу).
Electron

Создаём «ToDo» приложение с помощью Electron

Мы будем создавать приложение ToDo с помощью библиотеки Electron. Мы затронем следующие темы: хранение данных, использование нескольких окон, взаимодействие между браузерами. Что необходимо для этого Я...
Подключение Kafka в Spring Boot

Подключение Kafka в Spring Boot

Подробно разберем код для подключения Apache Kafka в Spring Boot. Подготовим приложение к отправке сообщений на сервер Kafka и их потреблению.