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

Как реализовать feature gate в React

Предлагаем доступное руководство по реализации feature gate. Этот простой, но мощный механизм позволит легко управлять выпуском новых функций.

Изучаем замыкания в JavaScript

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

Изучите эти основы JavaScript и станьте лучшим разработчиком

В языке JavaScript есть примитивы, объекты и функции и все они рассматриваются в качестве объектов, даже примитивы. Примитивы Число, булевый (логический) тип данных, строка, undefined и...

Как создать библиотеку компонентов React

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

7 бесплатных Node пакетов с открытым исходным кодом

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

Рекомендации по обработке и регистрации ошибок в React

Прогрессивные веб-приложения для начинающих

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

Компоновщик в JavaScript

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

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

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

Как оптимизировать пулл-реквесты и порадовать тех, кто проверяет ваш код

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

Изучаем шаблоны проектирования в JavaScript

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

Изучаем функции высшего порядка в JavaScript

Вы узнаете, что такое функции высшего порядка и как их применять в JavaScript. Если вы изучаете JavaScript, то наверняка сталкивались с термином ― «Функции высшего...

React.js за 5 минут

В этом туториале вы получите базовое представление о React.js путём создания очень простого приложения. Установка Так как вы только начинаете работать с React, то я бы посоветовал вам...

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

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

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

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

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

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

10 UX-трендов для мобильных приложений в 2021 году

В этой статье мы бы хотели рассказать про 10 трендов в UX-дизайне мобильных приложений, которые будут преобладать в 2021 году. 1. Суперприложения Одно приложение, одна цель...

Замечательные новые фичи TypeScript 3.5

Новые фичи включают в себя: увеличение скорости для поэтапных сборок; вспомогательный тип Omit;улучшенные проверки избыточных свойств в типах объединения;вывод типов для объединения конструкторов. Увеличение скорости С режимом сборки...

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

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

Как развернуть приложение на Vercel

Быстро, доступно и легко! О чем идет речь? О развертывании приложения на платформе Vercel. Поделимся успешным практическим опытом и подробными пошаговыми инструкциями.

Мемоизация как средство ускорения веб-приложений

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

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

Часть 1, Часть 2 Получаем доступ к DOM элементам В данном разделе мы посмотрим на методы, которые помогут получить доступ к DOM элементам: getElementById(), getElementsByClassName(), getElementsByTagName(), querySelector()...

7 основных навыков, необходимых для фронтенд-разработчика в 2021 году

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

PHP 8.1 уже обещает стать одним из лучших релизов

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

Что выбрать: React Native, Flutter или нативный подход

Важнейшая проблема кроссплатформенной разработки решалась в мобильных фреймворках разными способами. Первоначально проект Apache Cordova (ранее PhoneGap) решил эту проблему внедрением webview-рендеринга. Затем в проекте...

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

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

Чистый код JavaScript — Вертикальное форматирование

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

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

Если вы не совсем в курсе современных тенденций JavaScript, то, по крайней мере, слышали о промисах ранее, но не знаете, где и как их...

Рандомизатор на чистом CSS

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

Псевдоклассы CSS, на которые стоит обратить внимание

Согласно определению из "CSS: The Definitive Guide" Эрика Майера (Eric Meyer) и Эстеля Вейля (Estelle Weyl): С помощью (псевдо) селекторов можно назначать стили так называемым...

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

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

Refs в React: от доступа к DOM до императивного API

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

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

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

Советы по созданию хорошего дизайна API

Систематизируем некоторые общие правила дизайна API в современную эпоху, которые избавят от базовых "подводных камней" при их разработке.

Анимация границ с помощью свойств CSS

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

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

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

Создаём «ToDo» приложение с помощью Electron

Мы будем создавать приложение ToDo с помощью библиотеки Electron. Мы затронем следующие темы: хранение данных, использование нескольких окон, взаимодействие между браузерами. Что необходимо для этого Я...

Супербыстрый веб-фреймворк Astro: подробный обзор

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

Зачем нужен Strict Mode в JavaScript?

Строгий режим — это важная часть современного JavaScript. Он позволяет использовать ограниченный синтаксис JavaScript. Семантика строгого режима отличается от старого “неаккуратного режима” JavaScript с его слабым синтаксисом...

Аспектно-ориентированное программирование в JavaScript

Кто из программистов JavaScript не знает об объектно-ориентированном (ООП) или функциональном программировании (ФП)?! Но вот слышали ли вы об аспектно-ориентированном (АОП)? Что самое интересное, АОП...

Когда не стоит использовать метод find() в JavaScript

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

Свойства CSS, которые вы должны начать использовать прямо сейчас

Мы хотим поделиться с вами несколькими удивительными советами и приемами касательно CSS, которые вы должны знать. 1. content-visibility:auto Эта функция работает подобно отложенной загрузке данных. Мы...

Цветовые схемы в дизайне

Цвет — один из важнейших элементов дизайнерских проектов, а не просто визуальная составляющая, приятная глазу. Он влияет на восприятие пользователя и на то, какие...

12 генераторов CSS для работы в 2023 году

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

Решение головоломки судоку на JavaScript с помощью хэш-карт и рекурсий

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

Решение проблемы с CSS :hover

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

Советы по разработке больших приложений JavaScript

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

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

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

Как легко управлять зависимостями в монорепозитории JS

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

Станут ли прогрессивные веб-приложения заменой нативным?

Когда Стив Джобс представил самый первый iPhone в 2007 году, он также высказал идею о том, что разработчики смогут создавать приложения для iPhone лишь...

Сайты с модальными диалоговыми окнами без JavaScript

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

Продвинутые техники PHP: от шаблонов проектирования до тестирования. Часть 1

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

3 простых шага для написания сложных компонентов

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

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

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

Настройка проекта TypeScript с помощью ESLint, Prettier и VS Code

Собираетесь работать с проектом Typescript? Не забудьте настроить для него подходящую среду!

Новый взгляд на старые истины: принцип «Не повторяйся!» (DRY)

Первый принцип, с которым вы знакомитесь, начиная свой путь в мир разработок ПО и записывая первые строки кода, — это постулат DRY (“Не повторяйся”). А как...

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

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

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

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

5 простых советов для улучшенного написания стрелочных функций

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

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

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

Основы синтаксиса PHP

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

Как тестировать компоненты React

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

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

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

Как преобразовать функции JavaScript в генераторы, эффективно использующие память

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

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

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

Почему не стоит использовать localStorage

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

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

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

Javascript и функциональное программирование. Часть 2: полноправные функции

Предыдущие части: Часть 1 Добро пожаловать в параллельный мир Вам необходимо кое-что узнать прежде, чем мы начнем... Если вы когда-либо программировали в JS, вы, вероятно, раньше использовали...

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

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

7 правил ESLint, рекомендуемых для проектов TypeScript/React

Хотите, чтобы на выполнение и проверку кода уходило меньше времени и сил? Ознакомьтесь с 7 правилами ESLint, рекомендуемыми для проектов TypeScript/React. Они существенно улучшат код и сэкономят ваше время.

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

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

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

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

JavaScript Style Guide от Google. 13 примечательных рекомендаций

Для тех, кто ещё не в курсе, Google выпускает руководство, которое излагает лучшие (по мнению Google) стилистические практики для написания чистого и понятного кода...

10 самых серьезных ошибок в UX/UI-дизайне

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

Дата и время в JavaScript

Учимся работать с датой и временем в JavaScript: разбираемся с определением и способом создания объекта Data, его методами и форматами вывода.

Основы JavaScript: функции

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

Восемь быстрых советов по улучшению пользовательского интерфейса

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

Краткое руководство по ООП в JS

В данной статье я постараюсь объяснить новые возможности ES6 JavaScript с точки зрения объектно-ориентированной парадигмы. Для начала, Что такое парадигма программирования? Парадигма — это пример или модель чего-то. То...

Миграция REST API на GraphQL

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

Ember.js или Vue.js: какой фреймворк выбрать?

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

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

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

Создание тестового фреймворка JavaScript

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

Введение в веб-скрэпинг с помощью Node.js

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

Как посещать сайты, не заходя в браузер

Узнайте, как взаимодействовать с сайтом без браузера, используя "безголовый" Chrome, простой JavaScript и контейнеры Docker.

Повесть об однонаправленном потоке данных в Angular

У Angular есть свои фишки и причуды. В то время как React реализует модель однонаправленного потока данных по умолчанию, Angular с самого начала точно...

Что такое Snowflake ID?

Как обеспечить сохранность больших объемов данных? Три метода помогут вам в этом разобраться.

Мониторинг сайта: просто, но эффективно

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

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

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

Создание пользовательских хуков React: полное руководство

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

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

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

Наскучил JavaScript? Достойная альтернатива - Mint

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

Цикл For…of в JavaScript

В JavaScript много операторов цикла: оператор whileоператор do...whileоператор forоператор for...inоператор for...of Их основная функция: повторять действия до тех пор, пока не будет выполнено определенное условие. В этой статье мы узнаем, как работает...

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