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

Создание computedAsync для вычисления значений сигналов в Angular

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

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

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

Что нужно учить фронтенд-разработчику в 2021 году

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

Какой метод глубокого клонирования в JavaScript наиболее эффективный — исследование

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

Что следует учитывать при разработке дизайна для людей с дислексией?

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

Смертоносные интерфейсы

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

REST API CRUD в Laravel 11 с лучшими практиками

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

Дуэт Markdown и JavaScript (mdjs) - залог отличной документации

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

Разделение кода в Next JS

Приложение слишком долго загружается? Узнайте о решении этой проблемы с помощью разделения кода в Next JS, и ваша загрузка будет проходить значительно быстрее.

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

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

Мой любимый вопрос на собеседовании для веб-разработчиков: «Понимаете ли вы, что такое массивы?»

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

Создание надежной библиотеки JavaScript: пошаговое руководство

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

Реализация Redux на Rust

Создадим веб-приложение на Rust с помощью Yew и Redux, разберем его базовую структуру и то, как создаются действия и функция редьюсера. Рассмотрим также реализацию с макросом и перечислениями.

Отладка кода на Python с помощью icecream

Вопрос: какую из стандартных функций Python разработчики используют чаще всего? Наверняка, как и в большинстве языков программирования, ответом будет функция print(): во время разработки...

5 функций CSS, которые пригодятся при разработке сайтов

В CSS появились 5 новых функций, о которых знают пока не все. Они предоставляют дополнительные возможности для создания привлекательного визуального интерфейса на сайтах.

Service Workers и стратегии кэширования

Что такое service workers и применение стратегий кэширования Service Workers — наверняка, вы что-то об этом слышали. Что это такое? Говоря простыми словами, это сценарий, который запускается...

Интуитивно понятное объяснение конструкции Async/await в JavaScript

Как избежать "ада обратных вызовов"? Всегда ли полезны промисы? В чем сила синтаксической конструкции Async/await? Ответим на эти вопросы и научимся проектировать мощные асинхронные конвейеры для эффективной обработки данных.

Как оптимизация изображений снизила “вес” главной страницы на моем веб-сайте на 62%

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

Создание кольцевой диаграммы на JavaScript

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

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

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

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

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

10 полезных инструментов для фронтенд-разработчика

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

UI/UX дизайн прайс-листа и таблицы тарифных планов

10 лучших советов по оформлению тарифной сетки: согласованность цен с характеристиками, легкость визуального сканирования и другие практики.

Практики фронтенд-разработки, которые помогут избежать неудач

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

Повысьте свой уровень мастерства в JavaScript ES6

JavaScript - удобный и практичный язык программирования. Знание его тонкостей оказывается полезным для разработчиков любого уровня. Сегодня поговорим о JavaScript ES6 и его особенностях.

Топ-25 полезных советов для React-разработчиков. Часть 1

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

Стриминг видео и чат в учебном приложении

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

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

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

Диспетчер загрузки на Swift

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

Применение пустого пространства в UI-дизайне

Хороший UI-дизайн — это продуманное применение пустого пространства во всех масштабах интерфейса: от элемента до страницы. Если пустое пространство правильно использовано, в результате получается...

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

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

Освоение Scrollable во Flutter

Это руководство посвящено разъяснению неочевидных нюансов Flutter-разработки. Вы узнаете, что такое dragDetails, как работает ScrollPhysics, почему невозможно поместить Spacer или Flexible в Scrollable и, наконец, как реализовать слушатель прокрутки, обновляющий представление в панели приложения.

Дизайн системы Netflix

Балансирование между удивительными возможностями и соответствием строгим требованиям - отличительная черта дизайна системы Netflix. Изучение ее "умных" компонентов наверняка обогатит ваш инженерный опыт.

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

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

Почему разрабатывать веб-интерфейсы так сложно?

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

Wasp — DSL-язык для современных веб-приложений

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

11 ключевых принципов эргономики в UI-дизайне

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

Автоматизация создания стикеров с помощью веб-скрейпинга и обработки изображений в Python

Познакомьтесь с автоматизированным способом создания стикеров для мессенджеров. Краткая пошаговая инструкция поможет вам быстро сгенерировать стикерпак в Telegram.

Объясняем Z-index: как позиционировать элементы с помощью CSS

CSS свойство под названием z-index всегда вызывало у меня страдания. На первый взгляд принцип его работы звучит просто: элементы с более высоким значением z-index отображаются поверх элементов...

Изучаем WebAssembly с помощью Rust

Внимание: с этой статьёй вы не освоите Rust, зато сможете быстро разобраться и приступить к работе с WASM, используя замечательный инструментарий wasm-pack и интуитивно...

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

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

JavaScript async/await: что хорошего, в чём опасность и как применять?

Механизм async/await , представленный ES7, является фантастическим улучшением асинхронного программирования с использованием JavaScript. Он предоставил возможность использовать код, написанный в синхронном стиле, для асинхронного доступа к...

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

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

Nest.js и Next.js: в чем разница?

Стоите перед дилеммой: Nest.js или Next.js? Возможно, стоит использовать оба фреймворка? Каждый из них идеален в своей области, и при этом они прекрасно дополняют друг друга в разработке полного цикла. Узнайте об особенностях Nest.js и Next.js, чтобы принять обоснованное решение.

3 способа улучшить управление состоянием в React

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

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

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

Как это использовать: объявление функции и функциональные выражения

Первое отличие: название Если вы создаёте функцию с названием, то вам необходимо объявить функцию. В функциональных выражениях же название не обязательно. Объявление функции: function doStuff() {}; Функциональное выражение: const doStuff...

React Native: полное руководство по созданию виджета для домашнего экрана для iOS и Android

Виджеты - это инструменты, которые делают домашний экран более привлекательным и предоставляют полезную информацию. Рассказываем, как создавать виджеты для Android и iOS и как внедрить их в приложение на React Native.

Лучшие практики JavaScript: объекты

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

PHP: поймай меня, если сможешь

Рассмотрим механизмы управления ошибками и исключениями в коде: блоки try, catch, finally, типы-объединения. Изучим продвинутые техники для создания более надежных и сопровождаемых PHP-приложений.

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

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

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

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

Как структурировать API-вызовы при автоматизированном тестировании с Playwright и JavaScript

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

Var, Let, Const - в чем разница?

ES2015 (ES6) принес с собой много новых интересных фич. Теперь на дворе 2020 год, и можно предположить, что многие JavaScript-разработчики уже познакомились с этими...

Элементы архитектуры веб-приложений

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

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

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

5 инструментов Chrome DevTools, упрощающих разработку

Большинство из нас владеет основами Chrome (например, принципами исследования элементов на странице), но не все знают о дополнительных функциях, значительно упрощающих задачи разработчика.

20 скрытых особенностей JavaScript

Представленные ниже 20 хитростей JavaScript были указаны пользователями Stack Overflow. 1. Работа с аргументами функций Вам не нужно определять параметры для функции — можете просто использовать...

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

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

Эта информация навсегда изменит ваше отношение к коду JavaScript

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

Как масштабировать Angular без ограничений

Ограничения мешают успешному развитию продукта. Освободите свой разум от тормозящих стереотипов и приступайте к масштабированию проектов на Angular!

Как создать простую браузерную игру с помощью Phaser 3 и TypeScript

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

Переход с Webpack на Rspack

Подумываете о переходе с Webpack на Rspack? Настоятельно рекомендуем попробовать! Только сначала изучите опыт тех, кто это уже сделал. Вас впечатлит как повышение производительности разработки, так и удобство сопровождения проекта при переходе на Rspack.

SonarQube: за качество кода отвечаем

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

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

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

Шаблоны проектирования в React

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

Проблемы при использовании отзывчивого веб-дизайна

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

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

Часть 1, Часть 2, Часть 3 Навигация по DOM элементам Обход DOM или, проще говоря, навигация по DOM элементам — это работа со свойствами родительских, дочерних и соседних...

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

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

Цифры без диаграмм: хаки по JS-диаграммам

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

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

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

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

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

Чистая архитектура фронтенда

Концепции и практики, такие как SOLID, KISS, DRY и DDD, помогут создавать более чистые архитектуры фронтенда. А правила создания компонентов с учетом развития бизнес-логики позволят коду оставаться ожидаемо поддерживаемым.

7 бесплатных шаблонов React для разработки проектов

Не обязательно начинать работу с нуля! Эти продвинутые шаблоны React помогут создавать проекты легко и быстро.

Вам больше не нужны ветви для фич…

Что такое магистральная разработка? Магистральная разработка (Trunk Based Development - TBD) - процесс разработки ПО. Согласно trunkbaseddevelopment.com (отличный источник информации о TBD) он определяется как: Модель...

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

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

Способы публикации библиотеки JavaScript: CDN, NPM, GitHub

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

5 способов стилизовать компоненты React в 2019

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

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

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

Как укорачиваются ссылки на TinyURL и Bit.ly?

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

React Native vs Flutter

Некоторые инструменты так похожи друг на друга, что порой очень сложно сделать выбор. Разница, как всегда, кроется в деталях. В данной статье разберем, в чем разница между React Native и Flutter, и вы сможете выбрать оптимальное решение для вашего проекта.

11 инструментов для ускорения создания пользовательского интерфейса

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

Как получить все неуникальные значения в массиве JavaScript?

Иногда бывает нужно получить все повторяющиеся значения из массива JavaScript. В этой статье мы рассмотрим способы получения всех неуникальных значений в массиве JavaScript. Array.prototype.filter Один из таких...

Логи контейнеров Kubernetes: реализация и управление

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

Как создать Open Source финтех-проект

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

Создаем библиотеку компонентов Angular

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

Пять причин поместить функции в класс

Не все функции созданы одинаковыми. Класс — это набор каким-то образом связанных друг с другом функций. Они могут принадлежать одной категории и иметь что-то общее в...

JavaScript: 5 нововведений 2021 года

JavaScript — это легкий для освоения язык программирования, что делает его весьма подходящим для начинающих. За многие годы он развился до такой степени, что...

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

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

Однопоточность и асинхронность: как у Node это получается?

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

Создание многофункционального калькулятора на чистом JavaScript

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

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

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

Python Django: как изменить страницу ошибки 404?

Настройка страницы ошибки 404 “Страница не найдена” — одна из самых любопытных практик в разработке проекта на Django: сейчас же давайте узнаем, как обработать...

Реализация React Query в веб-приложении

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

Пожалуйста, отложите TypeScript ненадолго

Сперва позвольте уточнить: типизированный JavaScript — это фантастика. Я использовал Flow и продолжу использовать TypeScript в будущем, ведь это мощнейший быстро растущий инструмент. Но какова цена этой...

Руководство для начинающих по Git: что такое журнал изменений и как его создать

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

Запуск Puppeteer в Akka.js

Мечтаете создать многопоточное приложение для командной игры? Читайте о том, как использовать для этого модель акторов и правильно запустить Puppeteer в Akka.js.

Почему не рекомендуется использовать JWT?

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

Прощай, Adobe

Впервые я познакомилась с программами от компании Adobe примерно десять лет назад, когда, будучи подростком, открыла для себя Photoshop и магические свойства Clone Tool. Затем...

Scrum на грани вымирания?

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

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