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

Web Speech API в JavaScript: от текста к речи

Практическое руководство по работе с Web Speech API в JavaScript. Рассказываем, как создать веб-страницу, реализующую преобразование текста в речь.

Улучшение производительности .NET Core API

Google предоставляет такую статистику посещаемости веб-страниц: 53% посетителей мобильных сайтов покидают страницу, если она загружается более трёх секунд.https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/ Это значит, что очень важно сделать ваш сайт...

Почему не стоит использовать объекты в роли карт в JavaScript?

До появления ES6 при создании карты или словаря хранение ключей и значений мы зачастую реализовывали посредством объектов. В таком способе есть свои проблемы, которых...

Повышение дизайнерских навыков: советы и упражнения

Четыре года назад я бросила работу в детской поликлинике и начала свое путешествие в мире дизайна. Я читала книги по UX по дороге на...

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

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

Почему в React важен порядок вызова хуков?

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

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

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

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

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

Создание компонента Timer с React и Bit

Рассмотрим пример создания компонента countdown timer в React с использованием Bit. В результате компоненты будут выглядеть следующим образом. Помимо этого, мы научимся обмениваться компонентами и использовать...

Основы JavaScript: управление DOM элементами (часть 1)

Объектная модель документа или DOM определяет логическую структуру HTML документа и в основном представляет собой интерфейс веб-страниц. С помощь таких языков программирования, как JavaScript,...

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

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

Как улучшить производительность Jest в средах CI с использованием TypeScript

Являетесь поклонником Jest? Узнайте, как можно улучшить тестирование проектов и избежать ошибок, связанных с памятью.

7 полезных методов объектов JavaScript

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

От джуниора до мидла: 7 советов для фронтенд-разработчиков

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

Обработка ошибок в TypeScript без try/catch

В отличие от TypeScript, в Go и Rust всегда известно, где возникнет ошибка. А можно ли сделать обработку ошибок в TypeScript такой же, как в Go и Rust, без использования try/catch? Предлагает простое решение.

Изучаем gRPC и Flutter для разработки современных приложений

Научимся работать с файлом .proto, генерировать код Dart с protoc и модифицировать приложение Flutter для применения gRPC вместо HTTP. А также взаимодействовать с API-интерфейсом и напрямую с gRPC.

Дизайн-система: иконки

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

Solibee: совершенно новая коллекция UI-компонентов для SolidJS

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

Новые правила дизайна интерфейсов в Google

На собственной ежегодной конференции Google I/O компания представила первые изображения будущего дизайна интерфейсов под названием “Material You”. Такие радикальные изменения приходят на смену концепции...

Как профессионально использовать сопоставимые типы TypeScript

Хотите освоить сопоставимые типы TypeScript и понять, как работают встроенные в TypeScript типы утилит? Этот краткий обзор, подкрепленный анимационными вставками, поможет разобраться во всем этом.

Введение в WebAssembly (WASM)

Хотите разрабатывать высокопроизводительные веб-приложения, выполняющие обработку видео, 3D-рендеринг, мультимедийные игры и криптографические вычисления? WebAssembly поможет легко справиться с этой задачей.

Как создать Chrome-расширение для приложения с прогнозом погоды

Хотите создать простое веб-приложение, чтобы быстро узнавать прогноз погоды? Воспользуйтесь доступным руководством по разработке Chrome-расширения для приложения с прогнозом погоды (с полным исходным кодом).

Как с помощью чистого CSS создать красивую анимацию загрузки для приложения

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

Аутентификация и авторизация пользователей в Angular 16 с помощью JWT

Предлагаем руководство по созданию надежной системы аутентификации и авторизации пользователей в Angular 16 с использованием JWT. Интегрировав несколько компонентов в маршрутизацию и конфигурацию модулей приложения, вы обеспечите его пользователям повышенную безопасность и комфортные условия работы.

Потоки и буферы в Node.js

Для управления потоковыми данными наподобие видео или большого файла в Node.js реализован отдельный потоковый модуль. В текущей статье мы сконцентрируемся на некоторых принципах его функционирования. Разделы...

Подробно о перечислениях в Typescript

Углубимся в тему перечислений в TypeScript и рассмотрим их в рабочей среде React: виды, особенности, случаи применения.

Кто есть кто: обратные вызовы, промисы и асинхронные функции

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

Визуализация данных и веб-отчёты в Angular

Недавно я столкнулась со следующей проблемой: мне нужно было найти полностью настраиваемые веб-компоненты, с которыми несложно взаимодействовать и которые могут использоваться как встроенные BI-инструменты...

Создаем 3D-модель из акварельной картины

Небольшое руководство о том, как конвертировать портретную картину или рисунок в 3D-модель с небольшим текстурированием и правильной разверткой. Для этого я использую платформу Blender,...

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

Забавные и полезные идеи для проектов Проект 1: автоматический генератор ASCII-графики ASCII-графика — это вид изобразительного искусства, где при создании картинок используются составленные вместе символы ASCII. Вот...

Создание приложения Flask на Python для визуализации мест путешествий

Воспоминания о местах путешествий можно хранить не только в сердце, но и на пользовательской карте HERE с прикрепленными на ней фотографиями. Для ее создания воспользуемся Python, API HERE maps, Flask и Heroku.

Повторные попытки HTTP-запросов в Angular

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

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

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

Как тренды визуального дизайна развивались со временем

Пользовательский интерфейс действует по принципу шутки: если её приходится объяснять, то она не удалась. Интуитивность — одна из основных концепций в области продуктового дизайна....

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

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

Обработка событий в JavaScript: всплытие, перехват, делегирование и распространение событий

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

Заменит ли аутентификация по лицу традиционную систему веб-аутентификации

Беспокоитесь о дополнительном уровне безопасности для своих веб-приложений? Новая SaaS-платформа FaceIO, предоставляющая библиотеку аутентификации по лицу, поможет решить эту проблему. Предлагаем подробный гайд по установке и использованию FaceIO.

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

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

WebAssembly: секретное оружие в разработке высокооптимизированных и безопасных веб-приложений

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

6 интересных веб-технологий в 2019 году

Фреймворки для фронтенд-разработки 1. React.js С помощью React.js разработчики могут создавать повторно используемые компоненты (reusable components), каждый из которых будет со своим собственным “state”, то есть “внутренним состоянием”....

Зачем использовать HttpClientFactory вместо HttpClient в .NET

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

Что такое Next.js App Router и готов ли он к использованию в производстве

Представляем App Router - новое решение последней версии Next.js. По ряду характеристик App Router превосходит классический Next.js Pages Router. Но можно ли его использовать при разработке крупных производственных приложений? Ознакомьтесь с опытом одного из первоиспытателей App Router.

Новая эра Angular: беззоновое обнаружение изменений

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

Разбираемся с Render Props и HOC в React

Детальное представление Render Props и компонентов высшего порядка в React Для чего нужны эти паттерны? React предлагает Компоненты, представляющие собой простой способ повторного использования кода. Компонент инкапсулирует множество вещей...

Работа с HTML и CSS: 10 полезных приемов для дизайнеров

Многие современные работодатели требуют от кандидатов знаний не только веб-дизайна, но и веб-разработки. Поэтому дизайнерам UX/UI важно обладать хотя бы базовыми навыками написания фронтенда. Эти...

8 приложений и сайтов, за которые стоит заплатить: UX/UI edition

Предлагаем список полезных платных приложений и сайтов для UX/UI дизайнера и подробно рассматриваем их преимущества и особенности.

Оптимизация ресурсов в Node.js

Ресурсы приложения - вещь дефицитная. Узнайте, как оптимизировать их работу, чтобы повысить стабильность, производительность и эффективность системы. Научитесь использовать потенциал Node.js по максимуму!

Структура UX-дизайна: рабочий процесс и штат сотрудников

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

Создание музыкального бота с помощью Discord.js

API discord предоставляет инструмент для создания и использования ботов. Рассмотрим пример создания базового музыкального бота и добавления его на сервер. Бот сможет проигрывать, пропускать...

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

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

Архитектура ПО: создайте свое приложение с AWS

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

Быстро о главном: визуализация с D3.js

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

Как улучшить код на TypeScript: 5 рекомендаций

Чем опасен тип any и почему константные перечисления лучше обычных? Применим на Typescript новейший функционал JavaScript, освоим расширенные вспомогательные типы для преобразования почти всех основных типов.

Как написать красивый и информативный README.md

Многие программисты лихо управляются с кодом и знают мельчайшие подробности своих проектов. Но некоторым из них (в том числе и мне) недостаёт коммуникативных навыков. Удивительное...

Баланс между креативностью и удобством

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

Ключевое слово this и контекст в JavaScript

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

Сравниваем REST, GraphQL и gRPC

Как лучше организовать обмен сообщениями между сервером и клиентом в приложении? Проведем детальное сравнение 3 наиболее популярных технологий разработки API.

Rust: работа с потоками

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

Meteor вместо Next.js: создаем NFT-маркетплейс

Хотите создать собственную версию NFT-маркетплейса, добавив в него новые функциональные возможности? Узнайте о том, как, используя Meteor вместо Next.js в качестве фреймворка, можно разрабатывать Web3-приложения.

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

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

Декораторы в JavaScript

Декораторы - это объекты, которые используются для динамического добавления дополнительной функциональности к другому объекту без изменения реализации этого объекта. Пример использования: @filterMales // Это декоратор class MyClass...

Компоненты высшего порядка в React Virtualized

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

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

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

Прототипирование без API

Я из тех, кто обычно очень нетерпелив, когда менеджер раскрывает функции нового продукта. После спринта я задаю этот ужасающий, трепещущий вопрос: … API уже готов?.. И ответ...

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

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

PHP: типы переменных

Основным способом хранения информации внутри PHP-программы является использование переменных. Рассмотрим типы данных для их создания.

Как ускорить отклик и повысить производительность при помощи кэширования Redis

Разберемся, как кэшировать API-запросы с помощью Redis и NodeJS, а также как значительно сократить время отклика при запросе сетевых данных.

Как Signal управляет состоянием приложения

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

eCommerce UI/UX дизайн: карточка товара в примерах

Карточки универсальны: они встречаются везде, от социальных сетей, таких как Instagram и Facebook, до магазинов электронной коммерции, таких как Amazon и Ebay. Макет представления...

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

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

Почему Lodash по-прежнему полезен?

С выпуском ES6 и более поздними версиями JavaScript появилось множество методов, расширяющих функциональность языка. Например, появились новые методы массивов и строк, а также такие...

Как повысить SEO-рейтинг сайта с помощью Next.JS

Хотите, чтобы ваши приложения успешно проходили ранжирование во всех поисковиках? Next.js поможет достичь отличных SEO-результатов, а заодно получить бесплатный SSL-сертификат.

Является ли Bun следующим значительным достижением после WebPack?

Bun - новичок в экосистеме JS-инструментов - не просто ускоряет компиляцию и синтаксический анализ, но и предоставляет собственный менеджер зависимостей и пакетирование. Предлагаем сравнить новый инструмент с его предшественниками swc и esbuild, а также посмотреть, как он сочетается с npm, babel и Webpack.

Плюсы и минусы React: виртуальная DOM, синтаксис JSX и другие аргументы для спора

Рассмотрим важные достоинства и недостатки React, чтобы с умом выбирать JavaScript-фреймворк и аргументированно отстаивать свой выбор.

Прогрессивное совершенствование и JavaScript-фреймворки: сложные взаимоотношения

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

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

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

Создание сайдбара с помощью HTML, CSS и JavaScript

Хотите разработать пользовательскую боковую панель с HTML, CSS и JavaScript? Этот простой и понятный гайд с примерами кода позволит вам создать с нуля боковую панель и настроить ее по своему усмотрению.

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

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

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

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

История создания одного бессерверного приложения рассылки с открытым ПО

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

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

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

Объяснение понятия «состояние» в JavaScript на примере приготовления простого блюда

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

Proxy - сокровище JavaScript

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

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

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

Медиа-запросы CSS: точки останова, типы устройств, стандартные разрешения и многое другое

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

Микрофронтенды: 9 шаблонов для каждого разработчика

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

6 проверенных методов повышения безопасности Node.js

Беспокоитесь о том, как защитить приложения от рисков вредоносных атак? Предлагаем ознакомиться с шестью надежными способами повышения безопасности Node.js.

У приложений будущего может не быть бэкенда

История циклична. Я создал свой первый веб-сайт в 1999 году с помощью самых передовых технологий, доступных веб-мастерам (не могу использовать слово разработчики в данном случае):...

Как веб-серверы обрабатывают запросы

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

Настройка современной среды разработки в Windows 10

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

11 новых возможностей JavaScript в ES13

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

Связь между микро-фронтендами

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

Эти JavaScript-методы всего за несколько минут прокачают ваши навыки

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

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

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

5 практик, которые облегчат работу с Next.js 14

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

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