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

Самые значимые психологические исследования в UX-дизайне

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

Изучаем CSS Grid на примерах

Вступление Система Grid (сетка) является одной из наиболее полезных функций, добавленных в CSS. Она позволяет выравнивать элементы страницы по столбцам и строкам. CSS Grid упрощает...

TypeScript: продвинутые типы и их скрытые возможности

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

Стоит ли писать код Dart на стороне сервера?

Как настроить сервер при создании приложения на Flutter? Задействуем фреймворк gRPC и разберем преимущества и недостатки Dart.

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

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

Полиморфизм в TypeScript

Как правило, люди думают, что объектно-ориентированное программирование (ООП) и функциональное программирование (ФП) взаимно исключают друг друга. И это объяснимо: любая дискуссия о них довольно...

Полезные JavaScript-модули, на которые стоит обратить внимание

Эта статья представляет собой подборку наиболее полезных модулей и утилит для серверной и клиентской разработки на NodeJS и JavaScript, которые использует в своей работе...

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

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

Функции Java 15: скрытые и запечатанные классы, сопоставление шаблонов и текстовые блоки

Java 15 — это еще один функциональный релиз, таким будет и 16. Следующий LTS (релиз с долгосрочной поддержкой) запланирован как Java 17, и выйдет...

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

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

Функции call, apply и bind: использование и сравнение

Изучите практические способы управления контекстом в JavaScript. Эффективное использование функций call, apply и bind обеспечит ожидаемую их работу в различных объектах и скриптах, повысит надежность и гибкость кода.

Безопасность наглядно: CORS

Каждый разработчик периодически сталкивается с огромной красной строкой в консоли — Access to fetched has been blocked by CORS policy. Да, это здорово расстраивает. И хотя...

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

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

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

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

Все, что вам нужно знать про Ivy, новый движок для Angular!

Около года назад команда Angular объявила на ng-conf (конференция по Angular), что она работает над Angular Ivy. Хотя он еще не на 100% готов...

React TypeScript: Основы и лучшие практики

Подготовка к работе create-react-app с TypeScript $ npx create-react-app your-app-name --template typescript Если вы предпочитаете Yarn, используйте следующую команду: $ yarn create react-app your-app-name --template typescript Обратите внимание, что...

3 чудо-приема JavaScript для ускорения разработки

Обзор трех эффективных приемов для JavaScript: создание асинхронного контекста, работа с именованными параметрами и обертывание блоков try/catch.

5 тегов HTML, о которых вы могли не знать

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

Лучшие практики API-авторизации

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

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

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

Будущее за веб-компонентами

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

RxSignals: самая мощная синергия в истории Angular

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

Микросервисы gRPC в NestJS: пошаговое руководство

Протокол gRPC (Remote Procedure Call) обеспечивает эффективное взаимодействие между микросервисами, способствуя повышению производительности и масштабируемости приложений NestJS. Рассмотрим возможности gRPC при обмене сообщениями между микросервисами, написанными на NestJS.

Как написать переключатель темы на базе файлов cookie с помощью CSS и ванильного JavaScript

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

Реализация паттерна доступа к данным при работе с Drizzle

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

Обзор текущего состояния Next.js Router

Фреймворк Next.js динамично развивается, он сделал огромный скачок вперед, и поэтому многие предыдущие статьи о нем могли устареть. На момент написания этой статьи действует...

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

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

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

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

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

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

Создаем собственный блог с помощью Next.js и Strapi

В этой статье вы узнаете: о назначении CMS;как использовать Strapi;как с помощью Next.js и Strapi создавать статические сайты. Введение Предположим, что вы создаете блог при помощи Next.js....

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

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

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

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

Элементы управления выбором в пользовательском интерфейсе

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

Основы дизайна, которые должен знать каждый креативщик

Обычный поиск в Google по запросу “образовательные онлайн-ресурсы по дизайну” даёт миллионы результатов — вовсе неудивительно, что понимание того, с чего начинать изучение, может показаться дизайнеру-новичку...

Можно ли использовать бессерверные технологии для создания микросервисов?

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

4 типичные ошибки разработчиков Node.js

Растущее комьюнити Node.js - свидетельство надежности и эффективности этого инструмента. Однако не всем удается извлечь из него максимальную выгоду. Рассмотрим самые распространенные ошибки разработчиков Node.js.

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

Предыдущие статьи: Часть 1, Часть 2, Часть 3 Каррированием называется метод, при котором мы вызываем функцию с меньшим количеством аргументов. Но функция эта возвращает значения...

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

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

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

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

Утверждения, применяемые при импортировании в JavaScript

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

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

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

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

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

Как реализуется пользовательское взаимодействие на страницах JavaScript?

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

Что такое Tailwind CSS и как внедрить его на сайт или в React-приложение?

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

Индексирование коммитов с Git Add Patch

Для разработчика нет, наверное, ничего более увлекательного, чем запуск нового проекта. Начинается он с разработки доменной модели и планирования логики предметной области. Затем происходит...

3 вида циклов for в JavaScript

Каждый знает хотя бы один вид цикла for. Это классика, и они есть почти в каждом языке. В JavaScript есть три вида циклов (или...

Три примера, когда не стоит использовать стрелочные функции JavaScript

Стрелочные функции ES6 Вы их знаете, любите и наверняка постоянно используете! Представленные в 2015 году как часть обновления ECMAScript 6 стрелочные функции приобрели свою популярность совершенно...

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

Чтобы создать надежное ПО, нужен надежный тест. Рассказываем о тестировании приложений React: как устранить распространенные проблемы и ускорить этот процесс.

Продвинутые React Hooks: подробный разбор useEffect

С выходом React 16.8 в 2019 году React Hooks наконец-то стали доступны для использования в пригодных для эксплуатации приложениях. Хуки позволяют React-разработчикам делать функциональные...

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

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

Ключевые понятия JavaScript, которые должен знать каждый разработчик — часть 2

В первой части были представлены первые 11 из 32 ключевых понятий JavaScript. В этой части будут раскрыты следующие 11 понятий, включая побитовые операторы и буферы массивов, DOM и деревья макетов, фабрики и классы, ключевое слово this и методы call, apply, bind и др.

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

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

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

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

Основные принципы темного UI-дизайна

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

Как создать приложение на Go с gRPC

Разберем преимущества gRPC, 4 типа API и буферы протокола. Реализуем сервер и клиент на Golang с gRPC потоковой передачи данных: определим сообщения и сервисы, сгенерируем для них интерфейс и добавим функциональность.

Как настроить Next.js на TypeScript, чтобы получить оценку в 100% от Google Lighthouse и...

Создаем прогрессивное веб-приложение с помощью Next.js и пытаемся достичь 100-процентной оценки от Google Lighthouse и Vercel Analytics. Проходим весь путь оптимизации проекта Next.js, который будет написан на TypeScript.

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

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

Топ-45 библиотек React

Redux, NextJS, Axios, Formik, Styled-components, React-query, Storybook - решение 16-ти задач разработки на React в сторонних пакетах NPM.

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

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

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

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

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

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

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

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

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

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

Создаём расширение для Chrome

Написать расширение для Chrome непросто. Это не то же самое, что разработка веб-приложения: не хочется перегружать браузер оверхедом JS, ведь расширения работают одновременно с...

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

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

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

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

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

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

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

Что такое компоненты и функции высшего порядка и в чем заключаются их преимущества? Представляем вам комплексное руководство по компонентам высшего порядка в React.

8 советов по разработке на JavaScript, которые освободят вас от переработок

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

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

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

Надоело работать во фронтенд с JavaScript? Используйте Python для браузера!

“Как так?” —думаю, примерно такой будет реакция большинства на заголовок этой статьи. Что значит “Используйте Python для браузера?”. Ведь всем известно, что в браузерах...

Я разработал и запустил MVP продукт за 5 дней

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

Топ-9 PET-проектов для начинающих javascript-разработчиков

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

Руководство по созданию настольного приложения в Electron

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

Лучшие генераторы статических сайтов для React в 2019 году

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

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

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

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

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

UX или UI - на что уделить внимание?

Дизайнеры со всего мира часто и сами затрудняются ответить, что важнее — UI- или UX-дизайн. Мало кто воспринимает эти интерфейсы по отдельности и мало...

Светлый и темный режимы в веб-приложениях React на основе CSS Tailwind

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

Познай прокси-объект JavaScript как самого себя

Первым делом ознакомимся с официальным определением Proxy на сайте веб-документации MDN, которое гласит: “Объект Proxy позволяет создавать прокси для другого объекта, обладая способностью перехватывать и...

Sniper-CSS: как избавиться от неиспользуемых стилей

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

Представляем SafeTest: новый подход к тестированию фронтенда

Традиционные тесты пользовательского интерфейса сопряжены с определенным компромиссом. В этой статье мы поговорим о SafeTest, революционной библиотеке, которая предлагает новый взгляд на E2E-тесты для веб-приложений с пользовательским интерфейсом (UI).

6 шагов по созданию расширения Chrome, которое можно продать

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

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

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

Почему в JavaScript, в функцию лучше передавать только один аргумент?

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

React-хуки useEffect и useLayoutEffect: различие и примеры использования

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

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

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

Чистый код JavaScript - объекты и классы

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

Создание пользовательских уведомлений с помощью AWS WebSockets

Четвертая часть серии статей по WebSocket. Здесь мы узнаем, какие бывают типы пользовательских уведомлений и реализуем их в своем проекте.

Ваш JavaScript-бандлер слишком раздут

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

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