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

5 Методов сохранения состояния в промежутках между перезагрузками страниц в React

1. LocalStorage — классовые компоненты Один из простых вариантов для сохранения состояния — использовать localStorage в браузере. Рассмотрим пример: import React from "react"; import "./styles.css"; export default class...

Лучшие практики именования переменных в JavaScript

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

Теория цвета для дизайнеров - краткий курс (с инфографикой)

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

Django-приложение для ведения личного дневника

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

Как работает React Fiber Reconciler?

Вселенная React не перестает развиваться. Представляем вашему вниманию функцию React Fiber Reconciler, которая предлагает новый способ обработки процессов и виртуального дерева DOM.

Лучшие JavaScript-фреймворки и тенденции веб-разработки в 2021 году

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

Цикл For…of в JavaScript

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

Техника каррирования в JavaScript: суть, преимущества, примеры

Расскажем о такой эффективной технике в JavaScript, как каррирование. Продемонстрируем на практических примерах принцип ее действия и преимущества.

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

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

Найти и обезвредить: утечки памяти в Node.js

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

Разбираемся с новым HTTP-заголовком Deprecated

Разработчик программируемой платформы управления API Zuplo рассказывает о заголовке HTTP, который указывает на устаревание API, также касаясь применения заголовков Sunset и Warning. В конце вы найдете примеры реализации Deprecated для разных языков и фреймворков.

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

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

Обработка ошибок API в веб-приложении, используя Axios

Когда вы делаете вызов к бэкенд API с axios, вы должны рассмотреть, что делать с блоком .catch() вашего промиса. Теперь вам может показаться, что ваш...

7 моих любимых расширений VS Code

Расширения для VS Code Я, как и многие другие, люблю настраивать VS Code под себя. Я постоянно ищу новые плагины, настройки, темы, шрифты и рекомендации по...

Об Apache Spark - интересно и со вкусом!

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

Создаем на JavaScript приложение записи заметок в реальном времени

Подробная инструкция, включая настройку аутентификации, реализацию real-time обновления приложения при внесении изменений в БД и процесс авторизации через Google-аккаунт.

Почему каркасы бесполезны?

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

10 полезных приемов работы со строками JavaScript

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

Как создавать собственные хуки на React

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

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

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

Из финансов в разработку: как стать инженером-программистом

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

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

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

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

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

Как компания Airbnb стала лидером в UX дизайне

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

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

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

Как защитить текст от комбинации Ctrl+F в браузере

До сих пор не существует простого способа скрыть содержимое веб-страницы от функции find-in-page. Тем не менее поиски обходных путей все еще ведутся.

Разбор методов Ruby

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

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

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

Не используйте for при переборе массивов

Циклы for имеют для меня особое значение. Довольно продолжительное время я активно их использовал, пытаясь уйти от циклов while. При этом неизбежно забываешь об...

Поддержка нескольких модальных окон в React Native: новый подход

Управление несколькими модальными окнами - ограничение, с которым вы столкнетесь как в стандартной реализации модальных окон в React Native, так и в популярных сторонних библиотеках. Новый подход к решению этой проблемы с использованием библиотеки rn-modal-presenter позволит снизить сложность приложения и сделать его более удобным.

Современная фронтенд-разработка: мир HTML, CSS, JavaScript и популярных фреймворков

Фронтенд-разработка - постоянно развивающаяся область, требующая от разработчиков адаптации к новым технологиям, практикам и лучшим cтандартам. Сегодня рассмотрим ее базовые основы, включая HTML, СSS и JavaScript, а также поговорим о более продвинутых концепциях.

Создание приложения-планировщика в React с Easy Peasy и Ant Design

Обучающее руководство по созданию приложения-планировщика React при непосредственном участии библиотек Easy Peasy и Ant Design.

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

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

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

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

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

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

Движки JavaScript. Часть 2: генерация кода и базовые оптимизации

В этой части продолжим разговор о том, как работают движки JavaScript. Поговорим о компиляторах, этапах создания кода и основных оптимизациях.

Почему React 16 — это благословение для React разработчиков

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

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

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

Возможности автозаполнения для веб-разработчиков

Разберем понятия автозаполнения/автодополнения и узнаем, как браузеры автоматически заполняют стандартные поля, кредитные карты, адреса и пароли на примере Chrome.

Как создать веб-сервер с модулями HTTP и FS Node.js

Хотите создать веб-сервер с помощью NodeJS? Основные модули Node.js - HTTP и fs - позволят вам обойтись без сторонних зависимостей.

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

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

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

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

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

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

Самые популярные фреймворки React

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

Введение в Page Visibility API

Познакомимся с Page Visibility API, рассмотрим его назначение, принцип работы, область применения и практические примеры.

Пять алиасов Git, без которых мне не прожить

Я большой фанат коротких путей. Алиасы, хаки, скрипты, автоматизация, обходные варианты… я люблю избыточную оптимизацию, поэтому неудивительно, что мне особенно нравится функциональность алиасов в Git — настолько,...

Креативное программирование: методы и инструменты для JavaScript, Python и других языков

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

Переключение между табличным и списковым представлением в Vue.js

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

Осваиваем NestJS: построение эффективного бэкенда REST API

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

Официальный CLI GitHub

GitHub — самый известный провайдер Git хостинга долгие годы существовал, не имея официального инструмента CLI (интерфейс командной строки). Это весьма удивительно, учитывая, что сам GitHub является...

Почему решения CSS-in-JS во время сборки сейчас в тренде?

Узнайте, почему инструменты CSS-in-JS с нулевым временем выполнения стали предпочтительным выбором для веб-разработчиков. Чтобы использовать эти инструменты в своих проектах, изучите механизм и преимущества извлечения CSS во время сборки.

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

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

22 CSS-свойства для позиционирования

В статье пойдет речь о нескольких редко упоминаемых в технической литературе свойствах CSS. Тем не менее их использование повлечет за собой повышение скорости и...

Типы данных JavaScript

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

Layout для Material-UI

Material-UI — одна из самых популярных библиотек компонентов react. Однако невозможно найти ни одной инструкции или статьи о том, как создать layout на основе этих...

Почему стоит избегать динамических ссылок

Превращаем динамичные ссылки в хорошо продвигаемые статические ссылки Так называемые “SEO-friendly” ссылки созданы для того, чтобы удовлетворить нужды поисковиков и пользователей. В мире, где правят...

Как запустить несколько приложений React на одном порту Nginx с Docker

Разместим на одном порту два приложения React с Nginx и Docker. Настроим Docker, добавим конфигурацию Nginx глобально и файл docker-compose.yml.

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

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

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

Создадим компоненты React для совместного использования с Redux, MobX, Recoil и любыми другими библиотеками управления состоянием. Узнаем, какие задачи и каким образом решают данные библиотеки.

Использование Angular Elements с расширением Chrome

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

Пишем фронтенд-компоненты на ванильном JS

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

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

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

TypeScript: разница между типами any и unknown

Чем тип any отличается от unknown? Рассмотрим нюансы их использования в описании неизвестного значения и утверждении типа.

Как определить и протестировать SLO

SLO - уровень удовлетворенности пользователей производительностью сервиса. Предлагаем подробное руководство по определению и тестированию SLO для REST API с помощью Grafana Labs K6.

GitHub-репозитории, о которых должен знать каждый разработчик

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

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

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

Супергеройский макет: комбинируем CSS-сетки и CSS-фигуры

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

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

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

Создаем расширение Chrome на Mint

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

Использование лямбда-авторизатора с AWS WebSocket

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

Давайте разберемся с методами: slice( ), splice( ) и split( ) в JavaScript

Всю пользу встроенных методов JavaScript можно оценить только правильно понимая, как они работают. В этой статье мы разберем три метода: slice (), splice () и split (). Даже...

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

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

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

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

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

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

Революция в условном рендеринге React

Вам знакома проблема условного рендеринга JSX? Библиотека Solid.js предлагает ее элегантное решение: достаточно создать компонент Show, чтобы значительно упростить обработку условного рендеринга. Этот простой компонент не только делает чище и читабельнее код, но и повышает эффективность разработки.

Zod — гарант безопасности кода TypeScript

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

Платформы Angular в деталях. Часть 2. Процесс начальной загрузки приложения

Часть 1, Часть 2 Фреймворк Angular был задуман платформенно-независимым. Такой подход позволяет запускать Angular-приложения в разных средах: в браузере, сервере, веб-воркере и даже на мобильных...

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

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

От HTTP до HTTP 3 - интернета будущего

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

8 полезных приемов в CSS: Эффект параллакса, прилипающий футер и многое другое

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

Как работает JavaScript Proxy

Раскройте для себя возможности JavaScript Proxy, углубившись в настройку операций с объектами и контроль над ними. Используя JavaScript Proxy, вы будете создавать надежные и безопасные приложения.

Разработка современных приложений с помощью WEBPACK

Насколько далеко можно зайти с конфигурацией Webpack по умолчанию? Я выступал на конференции GDG Devfest, где говорил об использовании webpack в разработке современных приложений. Изначально...

10 распространенных ошибок UI-дизайнеров

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

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

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

Как не лажать с JavaScript. Часть 1

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

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

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

Почему стоит использовать обратные вызовы и асинхронный код на NodeJS

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

Технологический стек для создания веб-приложений

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

Понятие о горячей замене модулей в Webpack

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

Next.js: шаблоны управления состоянием через React Server Components

Вы уже используете React Server Components (RSC) - полезную фичу, представленную в React 18? В любом случае ознакомьтесь с шаблонами управления состоянием с помощью RSC. Они избавят вас от излишней сложности и повысят производительность ваших приложений.

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

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

7 советов по очистке кода React

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

Почему мы не используем лучшие практики CI/CD

Или причины избегать npm и отказаться от Google Play В Kalisio мы разрабатываем геопространственное программное обеспечение с открытым исходным кодом — то есть программное обеспечение, которое управляет геолокационными...

Как сделать интернет-магазин из Spring Boot, Angular, MySQL и Jasper Reports

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

Как создать опрос удовлетворенности сотрудников с Angular и сохранить его результаты в коллекции MongoDB

Представляем вашему вниманию пошаговое руководство по созданию опроса удовлетворенности сотрудников с помощью Angular и SurveyJS - бесплатной библиотеки опросов с открытым исходным кодом.

Как оптимизировать приложения на Angular

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

Практическое введение в Composition API Vue 3

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

Rust против JavaScript: повышение производительности на 66 % с помощью WebAssembly

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

Связывание файла JavaScript с HTML: полное руководство

Научимся связывать JavaScript с HTML тегом

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

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

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