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

Роль сервисной сетки и шлюзов API в архитектуре микросервисов

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

Супергеройский макет: комбинируем CSS-сетки и CSS-фигуры

Создадим нестандартный макет на основе страницы комикса, используя свойство clip-path для наложения изображений и придания им нужных форм.

Иконки в веб-дизайне

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

React Colorful: минималистичная и быстрая альтернатива для React Color

Вы создаёте приложение, связанное с рисованием и выбором цветов с помощью React? Если так, то наверняка вам знакома React Color, коллекция компонентов с цветовой...

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

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

Что не так с новыми логотипами приложений Google

К этому моменту вы, скорее всего, уже видели новые логотипы приложений Google Workspace (ранее G Suite) для продуктивной работы, таких как Gmail, Google Drive...

4 принципа качественного рефакторинга функций

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

Три функции JavaScript для освоения метода Reduce

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

Надоело работать во фронтенд с JavaScript? Используйте Python для браузера!

“Как так?” —думаю, примерно такой будет реакция большинства на заголовок этой статьи. Что значит “Используйте Python для браузера?”. Ведь всем известно, что в браузерах...

5 полезных советов для загрузки HTML-файлов

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

Понятие о порталах в React с примерами использования

Что такое порталы в React? Узнаем, для чего, когда и как они применяются, а также какие нюансы надо при этом учитывать. Ознакомимся с реальным примером порталов в React.

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

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

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

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

Шпаргалка по основным командам Bash

Неважно кто вы, разработчик ПО, специалист по данным, менеджер ИТ-инфраструктуры или просто любитель компьютеров — вам нужно знать, как пользоваться терминалом в Linux и...

Краткий обзор нововведений TypeScript 4.1

Я работаю с TypeScript уже не первый год и считаю, что он достаточно прост, особенно для людей с опытом разработки на Java. Тем не...

Kubernetes избавляется от Docker

Как многие уже знают, Kubernetes с версии v1.20 прекращает использование Docker в качестве среды выполнения. Выбор сделан в пользу тех сред, что задействуют Container...

4 Способа обмена данными между вкладками браузера в режиме реального времени

На протяжении многих лет возможности браузеров постоянно увеличивались в ответ на растущие потребности веб-приложений. И теперь у нас есть множество способов получения одной и...

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

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

20 сокращений JavaScript, которые сэкономят ваше время

В любом языке программирования сокращения помогают написать более чистый и оптимизированный код и выполнить задачи, использовав кротчайший синтаксис. Разберём способы сокращения в JavaScript. 1. Объявление...

Непрерывная интеграция и развёртывание ПО: лучшие практики

Непрерывная интеграция и развёртывание (CI/CD) — это гибкая методология, используемая многими организациями. Она помогает им эффективно и безопасно поставлять своё программное обеспечение.

Перевод любого приложения Vue.js за час

Инструкция по полной автоматизации процесса перевода приложений на любое количество языков с помощью vue-i18n. Настраиваем инструменты, организуем их взаимодействие и получаем возможность мгновенного перевода через Google Translate.

3D-формат в профессии дизайнера продукта

За время карантина у меня было много времени подумать о своих дизайнерских целях. Я точно осознал, что не хочу застыть на одном месте. Непрерывное...

Как увеличить производительность CSS-in-JS в 175 раз

Мне нравится удобство CSS-in-JS, особенно возможность совместного расположения стилей, но в некоторых деталях я не уверен: В том, что обязательно нужно использовать хешированные классы вместо...

Создание пользовательского HTML-элемента без фронтенд-фреймворка

Научимся создавать многократно используемые динамические элементы с помощью JavaScript. Рассмотрим все этапы (от добавления класса до настройки свойств и доступа) и сделаем пользовательский компонент для отображения приветственного сообщения.

Airflow и Kubernetes - лучшее решение для конвейеров данных Geoblink

Конвейеры данных в Geoblink Кто в Geoblink не любит видео игры! И нет смысла отрицать. Мы любим их настолько, что каждый раз называем в их честь...

Веб-доступность: навигация с клавиатуры

Введение Раскладка QWERTY появилась около 150 лет назад, а с 40-х годов XX века клавиатурами обзавелись и компьютеры. И пусть клавиатуры — это теперь не...

Балансировка нагрузки и последовательное хеширование

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

10 видов шаблонного кода на NextJS

Шаблонный код — это минимальный код многократного использования, который требуется всем приложениям и встречается в каждом из них. Это такой многоразовый «клей» для компонентов. В...

Перехват ошибок в компоненте React

Поговорим о механизме перехвата ошибок из компонента и отображении резервного компонента («ErrorComponent») в случае возникновения ошибки при отображении компонента. В статье речь пойдёт о следующих...

Переиспользуем соединения OkHttp по-максимуму Журнал

Введение Мы на Booking.com знаем, как важна для наших пользователей производительность, в том числе сетевая. Недавно мы исследовали производительность сетевого стека нашего приложения для Android...

Стратегии обнаружения изменений в Angular - «onPush» и «Default»

В Angular есть две стратегии обнаружения изменений — «Default» и «onPush». Рассмотрим преимущества и недостатки этих стратегий. Что такое «обнаружение изменений» в Angular? Механизм обнаружения изменений в...

Одномерный клеточный автомат в JavaScript

Концепция клеточного автомата возникла в середине 20 века, и с того времени область ее практического и теоретического применения значительно расширилась. Клеточный автомат состоит из любого...

Удачные решения UX-дизайна на примере Big Sur

У новой операционной системы macOS Big Sur от компании Apple есть определённые проблемы, но я предлагаю рассмотреть решения UX-дизайна, которые оказались удачными — и...

Резолвер в Angular для предвыборки данных

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

Найти и обезвредить: утечки памяти в Node.js

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

Полиморфизм в TypeScript

Как правило, люди думают, что объектно-ориентированное программирование (ООП) и функциональное программирование (ФП) взаимно исключают друг друга. И это объяснимо: любая дискуссия о них довольно...

Принципы минимализма в цифровом дизайне

Минимализм — это концепция, смысл которой заключается во фразе «меньше значит больше». Это концепция, которая проникает в нашу жизнь в разных формах: для одних...

Создание многопользовательской игры с использованием Socket.io при помощи NodeJS и React

Кратко знакомимся с Socket.io, а затем пошагово рассматриваем создание проекта, начиная с архитектуры сервера и структуры каталогов, заканчивая настройкой каналов и подключений.

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

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

Изучите webpack менее чем за 10 минут

Webpack - это сборщик модулей. Он анализирует их, создает граф зависимостей и собирает в правильном порядке в один или более бандлов, на которые может ссылаться index.html. Webpack помогает не только не забыть про какие-либо скрипты, но и расположить их в правильном порядке.

Введение: 4 новейших операции JavaScript

Технический комитет 39 (TC39) — это группа экспертов по JavaScript, которые работают над стандартизацией ECMAScript. Рабочий процесс TC39 состоит из нескольких этапов: Этап 0 (Идея): прием...

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

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

Автоматизируйте код-ревью и ускорьте итерации

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

Маршрутизация 101 в Angular 9+

Чему мы научимся? Показывать и скрывать компоненты, используя вместо свойств input/output маршруты.Поддерживать взаимосвязь этих компонентов, передавая по маршруту данные.Настраивать маршруты в модуле маршрутизации.Использовать routerLink для...

Концепции разработки UI на примерах еды

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

Как работает проверка доступности API в Swift

Мы постоянно применяем проверки на доступность API, чтобы обеспечить откаты ПО для пользователей, использующих старые версии iOS. А задавались ли вы вопросом, как эту...

ТОП-5 признаков качественного продуктового дизайна

Как отличить хороший дизайн от плохого? Хороший дизайн — это четкое понимание предпочтений пользователей. Один из самых выдающихся дизайнеров 20 века Дитер Рамс как-то...

Тестирование производительности приложения в браузере Chrome

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

Креативное программирование: методы и инструменты для JavaScript, Python и других языков

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

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

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

Эскизы - почему они так необходимы в работе дизайнера?

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

Сравнение производительности JS-фреймворков на RealWorld Demo

Во-первых, сразу вам сообщу, что в тестах производительности я полный неудачник. Поэтому я начал свой путь с написания реактивной UI-библиотеки на JavaScript, чтобы хоть...

Улучшаем свои дизайнерские навыки: один «легкий» трюк

Главный совет: заниматься дизайном — единственное, что я советую всем новичкам. Как можно больше. А затем еще больше. Как и во всем, практика способствует вашему...

Пользовательские структурные директивы в Angular

Что такое структурные директивы? Структурные директивы в Angular отвечают за манипулирование элементами, их изменение и удаление внутри шаблона компонента. Структурная директива применяется к основному элементу,...

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

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

Точки останова CSS в Material UI

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

Биоинформатика? С R это легко!

Введение Эта статья предназначена для тех, кто находится в поиске “точки входа” в область биоинформатики и имеет опыта работы с R (в идеале с использованием...

Kubernetes: сэкономьте до 50% с вытесняемыми объектами

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

Запускаем ваш первый веб-сайт на Rails + React

Поздравляем, вы создали свое первое full-stack веб-приложение и теперь хотите выложить его в Интернет, чтобы показать своим друзьям, семье и будущим работодателям. С помощью...

ТОП 5 советов, как улучшить свои UI навыки

Однажды у меня произошел нервный срыв из-за моих UI знаний. В то время я работал над множеством проектов — в основном над стартапами. Я...

UX или UI - на что уделить внимание?

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

Продвинутая версия Hello World для A-Frame

В прошлой статье я описал, с чего начинать разработку VR в браузере. Для этого мы взяли популярный пример “Hello World” для A-Frame и немного...

Как проще всего выполнять запросы GraphQL в iOS

Такие сторонние библиотеки, как Apollo iOS client и AWS AppSync нужны для связи с сервером GraphQL в iOS-приложении, но они также вводят в ваш...

Эффективное или частное хранение данных с помощью JavaScript WeakMaps

Новая структура данных под названием WeakMaps была представлена с в новой спецификации ES6 наряду с Maps. Как и в Maps, данные в WeakMaps хранятся в...

Relay для Angular

Всем привет! Сегодня я представлю вашему вниманию relay-angular, молодую инновационную библиотеку, которая доказала свою стабильность в процессе создания библиотек react-relay-offline и relay-hooks. Признаюсь, что не...

Kubernetes: безопасное управление секретами с GitOps

GitOps — это модное словечко в последнее время на слуху. Обозначает оно, по сути, декларативное управление ресурсами для такого представления текущего состояния, чтобы в...

Как перейти от Flask к FastAPI

Из этой статьи вы узнаете о фундаментальных концепциях FastAPI и научитесь переносить сервер с Flask целиком на FastAPI. FastAPI представляет собой современный, быстрый (высокопроизводительный) веб-фреймворк...

29 инструментов и сайтов для дизайнера, о которых вы никогда не слышали

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

Реализация VR-пространства в браузере

Предлагаю начать с основ, а именно с фреймворка A-Frame, поскольку он упрощает работу на основе уже имеющихся знаний об HTML5 и JavaScript. Совместим ли...

Как сымитировать UDP-флуд у себя на компьютере

Внимание: нижеследующее руководство предназначено исключительно для обучающих целей. Выполняйте атаку только на компьютерах, которые принадлежат вам. UDP-флуд — это атака типа “отказ в обслуживании” (Denial of service,...

Функции Java 15: скрытые и запечатанные классы, сопоставление шаблонов и текстовые блоки

Java 15 — это еще один функциональный релиз, таким будет и 16. Следующий LTS (релиз с долгосрочной поддержкой) запланирован как Java 17, и выйдет...

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

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

Рефакторинг: от мусорного кода к SOLID-ному

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

9 мифов об интерфейсах для людей с ограниченными возможностями

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

Об Apache Spark - интересно и со вкусом!

Возможно, многие из вас уже начинали изучать инженерию данных, но вскоре понимали, что осилить эту науку вам не под силу. То ли из-за сложной...

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

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

Решаем проблему запроса N+1 в GraphQL с помощью Dataloader

Предыдущая часть: “Почему нельзя разрешать поля GraphQL как конечные точки REST” В предыдущей статье мы закончили на том, что при разрешении полей возникает проблема запроса...

Построение горизонтально масштабируемых stateful-приложений с помощью ASP.NET Core

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

Микрофронтенды - а почему бы и нет?

Фронтенд-разработка всегда занимала положение младшего ребенка в семействе веб-приложений. И пока фронтенд-разработчики расхаживали в своих модненьких шапочках, с аккуратными усиками, MacBook и дорогим кофе,...

Динамическое масштабирование элементов в CSS

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

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

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

AutoScraper и Flask: создание API для любого сайта менее чем за 5 минут

В этом руководстве мы создадим собственный поисковый API электронной коммерции с поддержкой как eBay, так и Etsy без использования каких-либо внешних API. С помощью AutoScraper и Flask мы можем достичь этой цели менее чем за 20 строк Python кода для каждого сайта.

Развертывание Flask приложения на Heroku и подключение к БД MySQL - JawsDB

Проблемы развертывания Новички часто устанавливают все пакеты на системном уровне из-за отсутствия опыта (например, с помощью pip). Получение зависимостей из requirements.txt для каждого проекта создаёт...

Добавление отношений в схему GraphQL

Отправная точка Строить мы будем на базовом сервере GraphQL. Код можно скачать здесь или с помощью: git clone --branch setup https://github.com/bjdixon/graphql-server.git При клонировании/загрузке нужно создать экземпляр MongoDB...

Синхронизация Git-репозиториев в режиме реального времени

Работая с клиентами на таких платформах, как Github или Gitlab, мы в Gitstart часто сталкиваемся с необходимостью синхронизировать кодовые базы между удаленными репозиториями. По...

Удаленные вызовы процедур с запросом-ответом

За последние два года я много работал с удаленными вызовами процедур (RPC), применяя этот подход для взаимодействия между нашими микро-сервисами. В подобных ситуациях RPC...

Практичные Canary-релизы в Kubernetes с Argo Rollouts

Основанная на микросервисах инфраструктура Soluto, совмещенная со всеми инструментами CI/CD, позволяет осуществлять по несколько релизов в день, предоставляя пользователям новые возможности и внося исправления. При...

Современный COBOL: руководство по реализации микросервиса

Предварительные условия Вы знаете основные принципы, методы и стандарты COBOL. В этом руководстве мы используем GnuCOBOL — бесплатный компилятор COBOL, реализующий значительную часть стандартов COBOL 85, COBOL...

Элементы управления выбором в пользовательском интерфейсе

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

Как создать полезную офлайн-страницу для веб-приложения

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

Обработка ошибок в React Hooks

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

Дизайн для всех: подробное руководство по созданию интерфейсов для людей с ограниченными возможностями

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

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

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

Множества ES6 в JavaScript. Зачем?

Что такое множество? Это набор уникальных значений — ни одно из них не возникает дважды или более раз. Это единственное ограничение, которое делает множество значений...

ТОП-5 проблем с доступностью, которые чаще всего игнорируют

Доступность стремительно становится одним из важнейших аспектов (если не самым важным) в использовании интернета. За 2017–2018 гг. в федеральном суде почти втрое увеличилось число...

Как спроектировать REST API для выполнения системных команд с помощью Actix Rust

Привет! Сегодня я расскажу, как создать REST API для выполнения системных команд на вашем сервере с помощью метода, которым пользуются известные компании. Представьте, что вы...

Ускорьте создание пиксельной графики в 10 раз ✨?

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

Избавляемся от рендеринга в Angular: только функциональность и никакого рендера

Я ежедневно работаю как с Angular, так и с React, а также большой поклонник Vue и Svelte и слежу за их развитием. В этой...

Три примера, когда не стоит использовать стрелочные функции JavaScript

Стрелочные функции ES6 Вы их знаете, любите и наверняка постоянно используете! Представленные в 2015 году как часть обновления ECMAScript 6 стрелочные функции приобрели свою популярность совершенно...

Структура типизации в Ruby 3

Об авторе: Соутаро является ведущим разработчиком Ruby в Square, работающим над Steep и статической типизацией; вместе с Матцем и другими разработчиками ядра он работает...

1...789...12 Страница 8 из 12

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

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

4 частые ошибки в рефакторинге

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

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