3D-формат в профессии дизайнера продукта
За время карантина у меня было много времени подумать о своих дизайнерских целях. Я точно осознал, что не хочу застыть на одном месте. Непрерывное...
Как увеличить производительность CSS-in-JS в 175 раз
Мне нравится удобство CSS-in-JS, особенно возможность совместного расположения стилей, но в некоторых деталях я не уверен:
В том, что обязательно нужно использовать хешированные классы вместо...
Создание пользовательского HTML-элемента без фронтенд-фреймворка
HTML5 предоставляет возможность создавать повторно используемые динамические элементы с помощью нескольких строк кода. При этом никакого дополнительного фронтенд-фреймворка не понадобится.
Итак, создадим пользовательский компонент для...
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
Важно начать проект с уникальной идеи, но куда важнее выбрать правильное направление.
“Будущее принадлежит тем, кто осваивает больше навыков и совмещает их в потоке творчества”, — Роберт...
Как создать интересный онбординг и привлечь пользователей с первого взгляда
Есть много способов поприветствовать новых посетителей сайта, приложения или платформы. Грамотный онбординг может стать тем важным звеном, которое будет привлекать пользователей и побуждать их...
Изучите webpack менее чем за 10 минут
Что такое webpack?
Согласно официальной документации:
“webpack — это статический бандлер (инструмент для сборки модулей в единые пакеты) для современных приложений JavaScript.”
Как разработчики JavaScript, мы знаем, что...
Введение: 4 новейших операции JavaScript
Технический комитет 39 (TC39) — это группа экспертов по JavaScript, которые работают над стандартизацией ECMAScript.
Рабочий процесс TC39 состоит из нескольких этапов:
Этап 0 (Идея): прием...
Сравниваем WebGL-фреймворки Three.js и Babylon.js
Возможно, вы уже изучили информацию на Slack и Github, сравнивая длинный список плюсов и минусов, но все еще не можете определить, какой же из...
Автоматизируйте код-ревью и ускорьте итерации
Код-ревью играет важную роль в поддержании качества кода при разработке программного обеспечения.
Чтобы помочь тем, кто занимается поддержкой проекта, в реализации политики проверки кода, 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
Круговорот технологий в tech-индустрии не прекращается. При помощи таких современных инструментов, как Docker Engine и Kubernetes масштабировать приложения стало проще, чем когда-либо. К сожалению,...
Микрофронтенды - а почему бы и нет?
Фронтенд-разработка всегда занимала положение младшего ребенка в семействе веб-приложений. И пока фронтенд-разработчики расхаживали в своих модненьких шапочках, с аккуратными усиками, 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 и статической типизацией; вместе с Матцем и другими разработчиками ядра он работает...
WebRTC: фреймворк ICE, STUN и сервера TURN
WebRTC (Web Real Time Communication) — это проект с открытым исходным кодом, позволяющий создавать одноранговые (P2P) аудио- и видеосвязи через JavaScript API.
Для того чтобы установить P2P-соединение,...
Нерассказанная история: исключение Stale Element Reference в Selenium
StaleElementReferenceException — одно из самых интригующих исключений, какое вы могли встретить, тестируя с помощью Selenium. Надеюсь, что этот пост поможет вам решить проблему с появлением данного...
Новый взгляд на старые истины: принцип «Не повторяйся!» (DRY)
Первый принцип, с которым вы знакомитесь, начиная свой путь в мир разработок ПО и записывая первые строки кода, — это постулат DRY (“Не повторяйся”). А как...
Почему нельзя разрешать поля GraphQL как конечные точки REST
GraphQL сулит огромные преимущества. Вот некоторые из них:
Один и тот же API может использоваться несколькими клиентами, поскольку есть возможность запрашивать необходимые данные из API...
Запуск DBT в Azure Functions с помощью Snowflake
Практики DataOps очень быстро встают на вооружение в компаниях, работающих с данными, особенно в тех, которые переходят на Cloud Data Warehouses (облачные хранилища данных)....
Proxy - сокровище JavaScript
Что такое прокси? Что именно он делает? Перед тем, как разобраться, посмотрим на пример из реальной жизни. У каждого из нас есть множество ежедневных...
Как сжимать коммиты в Git с помощью git squash
Для начала давайте разберемся: что же это вообще такое — git squash.
Git squash — это прием, который помогает взять серию коммитов и уплотнить ее. Например, предположим: у вас...
Безопасность наглядно: CORS
Каждый разработчик периодически сталкивается с огромной красной строкой в консоли — Access to fetched has been blocked by CORS policy. Да, это здорово расстраивает. И хотя...
Telegram-бот с помощью таблицы Google
Для создания собственного Telegram-бота потребуется минимум программирования. На самом деле вам даже не нужно иметь редактор кода, чтобы начать. К концу этого поста вы...
Простой способ взлома сайта для получения его Git-данных
Внимание! Статья преследует чисто образовательные цели. Автор не одобряет и не поощряет хакерство, кроме его разрешённого этического применения (white hat).
Большинство разработчиков по всему миру...
Использование компонентов между фреймворками
Микрофронтенды становятся популярнее с каждым днем. Одна из причин заключается в том, что они предлагают способ выйти за рамки фреймворков. Однако это не единственная...
Как избежать CORS в одностраничных приложениях
За последнее десятилетие применение технологии одностраничных приложений стало обычным явлением при создании веб-приложений. Сегодня во фронтенд-разработке господствуют такие фреймворки, как Angular и Vue, и...
Повышение дизайнерских навыков: советы и упражнения
Четыре года назад я бросила работу в детской поликлинике и начала свое путешествие в мире дизайна. Я читала книги по UX по дороге на...
Создайте собственный AdBlocker за 10 минут
Расширения для браузера всегда меня восхищали. В современном мире их ценность уже не столь очевидна, в особенности из-за перехода от десктопных версий браузеров к...
Чего я не знал о CSS, а стоило бы
Делать сайты я учился по-старомодному: открывал исходный код и пытался повторить то, что видел. А по тому, чего не видел (PHP/MySQL), прочёл какую-то случайно...
Откройте миру разрабатываемые вами API
Современный мир как никогда ранее благоприятствует разработчикам. У вас есть доступ к тысячам статей, миллионам ответов на вопросы на StackOverflow и миллиардам твитов, связанным...
Почему нельзя прерывать цикл forEach в JavaScript
Недавно я проходил собеседование, которое включало сравнение двух разных схем. Опущу детали, но прямо в середине собеседования всплыла одна очень важная вещь — нельзя прерывать цикл...
Создание предметно-ориентированных микросервисов
Определение
Приставка “микро” в термине микросервисы является не только показателем размера сервиса. При переходе на архитектуру микросервисов команды стремятся повысить свою подвижность, а именно получить...
JMeter-тестирование динамической нагрузки Restful API
Пошаговая инструкция ко всем этапам нагрузочного тестирования, начиная с установки JMeter и заканчивая получением отчёта в удобной форме.
GitHub-репозитории, о которых должен знать каждый разработчик
Подборка репозиториев, которые помогут вам стать разноплановым разработчиком
В данной статье мы поговорим о GitHub-репозиториях для разработчиков на любом языке. Здесь найдется все: от подкастов...
JWT-аутентификация в Spring Boot Webflux
Spring Security всегда снижал мой интерес к собственным проектам. Как только возникала необходимость выяснить как аутентифицировать пользователей, я сразу начинал испытывать негодование или скуку...
PHP 8.1 уже обещает стать одним из лучших релизов
Распаковка массива со строковыми ключами
До версии PHP 8.1 эта простая операция не была доступна. Не будем много говорить о возможностях, которые она теперь открывает....
Устаревшие фреймворки JavaScript: как не потратить время на бесполезные технологии?
Список устаревших библиотек JavaScript и недостаточно популярных технологий, которые потратят ваше время впустую.
Несколько советов, которые помогут вам на собеседовании и не только
Зачастую, получить первую должность в качестве разработчика крайне трудно.
Как убедить человека принять вас на работу, если опыта как такового и нет? Какие вещи знать...
Реализация архитектуры с сохранением состояния в Streamlit
Streamlit
Streamlit прошел долгий путь становления с момента своего создания в октябре 2019 года. Он не только предоставил разработчикам ПО новые возможности, но и обеспечил...
Эта информация навсегда изменит ваше отношение к коду JavaScript
К концу этой статьи вы превратитесь из простого пользователя JavaScript в того, кто глубоко его понимает и кого не удивляют его уникальные возможности. Это открытие расширит ваши знания и навыки, а также позволит использовать такие "фишки" JS, которых нет в других популярных языках.