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

Краткое введение в функции высшего порядка в JavaScript

Функции высшего порядка Функция, принимающая в качестве аргументов другие функции или возвращающая другую функцию в качестве результата, называется функцией высшего порядка. С функциями в JavaScript вы можете: Хранить...

Как предотвратить состояние гонки с помощью React Context API

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

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

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

Стек вызовов JavaScript: объяснение с помощью иллюстраций

Как выполняются функции в Javascript? Каков порядок их выполнения? Что такое контекст выполнения? Отвечаем на эти вопросы с иллюстрациями.

Создаем первый «Astroвной» проект

Сделаем блог с «островом интерактивности», полем поиска в реальном времени и индексатором. Подключим настаиваемую интеграцию для индексирования каждого поста и расширения поведения на этапах процесса сборки.

Хочешь стать веб-разработчиком? Учи Node.js, а не PHP

Один из самых частых вопросов, которые я слышу от своих учеников, звучит так: "Почему вы преподаете нам Node.js, а не PHP?" Ответ "Поверьте, я...

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

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

7 Must Visit ресурсов с идеями для веб-дизайна

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

Функциональное программирование в JavaScript: руководство с практическими примерами

Функциональное программирование (ФП) — это стремительно набирающий популярность стиль написания кода. Есть много материалов о концепциях ФП, но мало — о том, как применять их на практике. На...

Получение общих данных в Next.js одним запросом

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

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

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

Прекращайте пользоваться Git CLI

Переходите на Git GUI, узнавайте больше о Git и забудьте о случайных отправках в master Если вы разработчик, то, должно быть, уже пользуетесь Git. Если нет,...

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

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

Напишите свой первый микросервис на JavaScript

Предлагаем пошаговую инструкцию по разработке простого микросервиса на основе API с использованием JavaScript, NodeJS и контейнеризации с помощью docker.

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

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

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

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

Состояние гонки в Node.js: практическое руководство

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

AlterNats — эффективный PubSub-клиент среды .NET. Как реализовать оптимизированное программирование сокетов в .NET 6

Как эффективно программировать сокеты? Рассказываем об основных принципах использования промежуточного ПО NATS.

PHP: типы операторов

Предыдущая часть: “PHP: типы констант” PHP поддерживает следующие типы операторов: арифметические операторы;операторы сравнения;логические (или реляционные) операторы;операторы присваивания;условные (или тернарные) операторы. Посмотрим, что делает каждый тип. Арифметические операторы Предположим, что переменная...

5 важных моментов из JavaScript, которые помогут избегать ошибок

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

7 вопросов по фронтенд-разработке

Хотите проверить, насколько вы продвинуты в области разработки пользовательского интерфейса? Попробуйте ответить на эти 7 вопросов (но не торопитесь заглядывать в подсказки).

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

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

Как организовать Express-контроллеры для крупных баз кода

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

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

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

Версионирование независимых UI-компонентов

Большинство компонентов версионируются как часть проекта (например, component-library), что противоречит концепции создания модульных UI-приложений. Например, чтобы использовать слайдер-компонент, нужно внедрить в приложение полную библиотеку...

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

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

5 основных рекурсивных задач на собеседованиях по программированию

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

Введение в Web Share API

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

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

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

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

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

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

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

Angular: как с функцией inject() сэкономить 1000 строк кода

В чем преимущества функции inject() по сравнению с конструкторами? Рассмотрим реальный пример, ссылки на коммиты - внутри.

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

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

Создание предметно-ориентированных микросервисов

Определение Приставка “микро” в термине микросервисы является не только показателем размера сервиса. При переходе на архитектуру микросервисов команды стремятся повысить свою подвижность, а именно получить...

Eloquent: 40 методов ORM для разработчиков Laravel

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

Асинхронное программирование с промисами JavaScript

Учимся работать с промисами JavaScript в приложении для обработки асинхронного кода.

Agile — враг (хорошего проектирования)?

Интеграция Чтобы приступить к обсуждению, вначале надо поговорить об интеграции. Интеграция — это… действие или случай объединения в единое целое. Частая интеграция помогает людям более эффективно решать задачи: Вы...

8 советов работы с JavaScript, которые повысят ценность вашего кода

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

Как создать HTTP-фреймворк «Hello World!» на Rust

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

Как сделать сайт в 25 раз быстрее с помощью нескольких строк кода

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

7 самых популярных библиотек React

Оптимизируйте разработку с помощью наиболее востребованных библиотек React. По количеству звезд на GitHub они опережают остальные библиотеки, а значит на них стоит обратить внимание.

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

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

Как использовать JavaScript для сокращения HTML-кода

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

18 советов по созданию чистого и эффективного кода JavaScript

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

Состояние микрофронтендов

Одна из наиболее противоречивых тем во фронтенд-разработке — это микрофронтенды. Заслуживают ли они внимания? Стоит ли на самом деле разделять приложение? Нужны ли они вам уже...

Компиляция TypeScript в нативный код

Представляем Static Hermes - новое поколение движков JavaScript. Ключевой особенностью его является опциональная компиляция JavaScript с указанием типов в нативный код, обеспечивающая предсказуемую производительность на уровне C и C++.

21 лайфхак для новичков в JavaScript

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

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

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

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

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

8 паттернов реактивности в современном JavaScript

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

Движок JavaScript, JIT-компилятор, стек, куча, память, примитивы, ссылки и сборка мусора

Как функционирует JIT-компилятор? Что такое стек и куча памяти? В чем отличие примитивных типов от ссылочных? Представляем общий краткий гайд по основам JavaScript, в котором поговорим о том, как работает один из самых популярных языков программирования “под капотом”.

4 недооцененных API браузера

Познакомимся с 4 полезными API браузера, которые лучше всегда держать под рукой : Battery API, IndexedDB API, Clipboard API и Page Visibility API.

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

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

9 лучших примеров макетов сайта и идей для веб-дизайна в 2018

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

Шаблоны рендеринга Next JS: полное руководство

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

Загрузка больших видео с помощью Node.js

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

Cначала Vue, потом React: совет начинающим разработчикам

По мнению автора, React категорически не подходит начинающим разработчикам, тогда как Vue является для них идеальным вариантом. В поддержку данного утверждения выдвигаются разные аргументы. Будем разбираться!

Шаблон “Декоратор” в разработке на TypeScript

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

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

Мощные современные инструменты Bit и Ripple CI внесли кардинальные улучшения в подход к разработке на Next.js. Они представляют современный и эффективный процесс создания композитных приложений. Рассмотрим подробнее преимущества Bit и Ripple CI и возможности их интеграции в Next.js.

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

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

Next.js и React.js: что выбрать для проекта

Какой фреймворк - React.js или Next.js - стоит использовать в проекте, чтобы получить максимальную выгоду? Разберем оба фреймворка и определим, какие преимущества дает каждый из них.

WebRTC: фреймворк ICE, STUN и сервера TURN

WebRTC (Web Real Time Communication) — это проект с открытым исходным кодом, позволяющий создавать одноранговые (P2P) аудио- и видеосвязи через JavaScript API. Для того чтобы установить P2P-соединение,...

Как с помощью Sentry реализовать захват исключений фронтенда

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

Эти маленькие сниппеты кода изменили мир

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

Да не нужен вам фреймворк JavaScript!

Не устали ли мы от вездесущих фреймворков JavaScript? Возможно, что мы не обращаем внимание на эффективность и пакетные данные от наших пользователей? Вернёмся в эпоху jQuery Помните...

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

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

Современное приложение выбирает… Redux, Context или Recoil?

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

Инкапсуляция состояния в JavaScript без использования классов в 2019 году (с приватными полями!)

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

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

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

Топ-10 библиотек React для создания высокопроизводительных веб-приложений в 2023 году

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

5 советов о браузерных инструментах разработчика

Инструменты разработчика из веб-браузеров стали незаменимыми для выполнения работы веб-программистов. С годами разработчики браузеров добавляли все больше и больше инструментов, призванных упростить работу. У...

Плохие практики Angular

Загрязнение ngOnInit ngOnInit - один из самых важных хуков жизненного цикла в компонентах Angular. Он используется для инициализации данных, настройки слушателей, создания соединений и т.д....

Входящий веб-перехватчик в MS Teams

Microsoft Teams с нами уже больше четырёх лет. Этот инструмент призван заменить программу-клиент «Skype для бизнеса» и был разработан в Microsoft как конкурент других...

Для подготовки к собеседованию: 10 задач по промисам JavaScript

Вам предстоит собеседование по JavaScript? Скорее всего, вас спросят о том, как использовать промисы. Эти задачи с пояснениями и иллюстрациями помогут к этому подготовиться.

Руководство по Webpack для начинающих

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

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

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

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

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

Комплексная разработка веб-приложений с помощью React и Node.js

Хотите создавать быстрые сайты? Предлагаем эффективный способ комплексной разработки с помощью "волшебного тандема" React и Node.js.

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

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

Javascript и функциональное программирование: Введение

Я всегда был нацелен на результат. Меня не привлекают псевдоинтеллектуальные концепции, причудливая терминология и пиар. Вместо этого, я всегда стремлюсь к тем инструментам и...

Как хранить и кодировать видео посредством Ruby on Rails, Lambda и S3

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

Разбор позиционирования в CSS

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

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

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

Как очистить код с помощью SASS

Итак, давайте знакомиться с SASS SASS (Syntactically Awesome StyleSheets — Синтаксически потрясающие таблицы стилей) является препроцессорным скрипт-языком, код которого компилируется в CSS, чтобы быть понятым браузерам. У SASS...

Проектирование базы кода API GraphQL в Node.js

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

Конец эпохи виртуального DOM (React)

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

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

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

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