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

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

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

Отложенная загрузка на уровне шаблонов в Angular

Знакомьтесь с новой фичей Angular 17 — Deferrable Views. Этот API для отложенной загрузки зависимостей шаблонов обеспечит беспрецедентный уровень эргономики. Чтобы оценить его преимущества, предлагаем сравнить новый и традиционный подходы к отложенной загрузке шаблонов.

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

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

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

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

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

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

8 советов, которые сделают JavaScript-код чище

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

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

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

Почему я перешёл на Lite после 3-х лет пользования Visual Studio Code

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

7 факторов, которые помогут улучшить UX-дизайн

Чтобы улучшить UX, нужно знать «слабые места» интерфейса. Есть типичные «проблемные зоны», на которые дизайнеру следует обращать особое внимание. Обычно именно здесь кроются причины...

Создаем 3D-модель из акварельной картины

Небольшое руководство о том, как конвертировать портретную картину или рисунок в 3D-модель с небольшим текстурированием и правильной разверткой. Для этого я использую платформу Blender,...

Создание сайдбара с помощью HTML, CSS и JavaScript

Хотите разработать пользовательскую боковую панель с HTML, CSS и JavaScript? Этот простой и понятный гайд с примерами кода позволит вам создать с нуля боковую панель и настроить ее по своему усмотрению.

Подробнее о JSON RPC

Не хочу разводить очередной холивар на эту тему. Поэтому, если вкратце, то GraphQL — это сложно, RPC — быстро, REST — некий медиум, но не хватает batch-запросов. И если у...

Как читать и понимать документацию API

Если, получив совет “почитать документацию API”, вы так и сделали, но так толком и не поняли, что в ней к чему, то эта статья...

3 альтернативы репозитория в Laravel

Рассмотрим преимущества и недостатки шаблона «Репозиторий». Изучим три альтернативы абстрагирования управления данными: заготовки Eloquent, пользовательские запросы и классы action.

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

Познакомимся с новыми функциональностями CSS 2022 года. Они отражают современные тенденции в развитии языка и нацелены на улучшение стилизации веб-страниц.

Node.js — не однопоточная система

А вы раскрыли для себя секрет потрясающей производительности Node.js? Знаете, какую роль в этом играет библиотека libuv? В любом случае предлагаем углубиться в архитектуру Node.js, чтобы понять, как однопоточной программе удается развивать молниеносную скорость.

Руководство по принципам моушн-дизайна

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

Flutter зовет: 5 проектов за выходные

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

Создание базовых 3D-сцен с помощью Three.js

Продуманная 3D-графика радует глаз и вдохновляет на новые креативные разработки. Сегодня мы попробуем создать 3D-сцену, используя библиотеку Three.js.

JavaScript-анализ: выявление и устранение уязвимостей в веб-приложениях

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

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

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

Понятие о порталах в React с примерами использования

Что такое порталы в React? Узнаем, для чего, когда и как они применяются, а также какие нюансы надо при этом учитывать. Ознакомимся с реальным примером порталов в React.

8 мощных пакетов NPM для любого веб-разработчика

NPM (Node Package Manager) — это менеджер пакетов Node.js. Он предоставляет разработчикам широкий ассортимент полезных библиотек и инструментов. С помощью этого репозитория процесс разработки веб-проекта,...

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

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

Роль сервисной сетки и шлюзов API в архитектуре микросервисов

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

Переключатель темного режима в веб-приложении

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

WebSocket для получения автоматически обновляющихся криптографических данных

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

Как выглядит нескучный модульный лендинг React

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

UX в 2021 — что ожидать?

UX-дизайн — это переменчивая сфера, в которой появляются новые направления каждый год, и последний — не исключение. COVID-19 и всемирная изоляция внесли неожиданные коррективы...

Хватит использовать Fetch API в JavaScript

Каковы преимущества и недостатки Fetch API по сравнению с Axiom? Подробный обзор особенностей этих инструментов с примерами в коде.

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

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

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

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

Как создавать надежные SSL-сертификаты для локальной разработки

Случалось ли так, что вы понимали — необходимо добавить HTTPS в приложение, запущенное на локальном хостинге или каком-нибудь еще местном домене вроде local.my-app.com? Есть некоторые...

TypeScript: основы

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

Развертывание Flask приложения на Heroku и подключение к БД MySQL - JawsDB

Проблемы развертывания Новички часто устанавливают все пакеты на системном уровне из-за отсутствия опыта (например, с помощью pip). Получение зависимостей из requirements.txt для каждого проекта создаёт...

Введение в WebAssembly (WASM)

Хотите разрабатывать высокопроизводительные веб-приложения, выполняющие обработку видео, 3D-рендеринг, мультимедийные игры и криптографические вычисления? WebAssembly поможет легко справиться с этой задачей.

10 отличных JavaScript библиотек на 2020 год

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

10 API консольных утилит Chrome

1. monitor Используется для мониторинга функции: function traceFunc (arg) { } monitor(traceFunc) Функция traceFunc передается в качестве аргумента в monitor. Теперь при каждом вызове traceFunc на мониторе будет...

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

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

Кто придет на замену JavaScript

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

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

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

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

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

6 полезных приемов для создания интерфейсов

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

Nexus — новый визуализатор дерева компонентов для Next.js

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

Мы забываем основы фронтенд-разработки

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

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

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

Анализ работы Guess.js в приложении Angular

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

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

1. Злоупотребление setTimeout(() => { … }) setTimeout(() => { ... }), вероятно, является наиболее популярным хаком для решения некоторых распространенных проблем рендеринга в Angular,...

Создание компонентной дизайн-системы UI

Создание и обслуживание согласованного UI и UX (опыт взаимодействия пользователя с приложением) во всех частях вашего продукта помогает пользователям интуитивно перемещаться и успешно взаимодействовать...

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

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

Создаем темный режим, используя React и Styled Components

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

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

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

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

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

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

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

11 новых возможностей JavaScript в ES13

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

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

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

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

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

ТОП 5 советов, как улучшить свои UI навыки

Однажды у меня произошел нервный срыв из-за моих UI знаний. В то время я работал над множеством проектов — в основном над стартапами. Я...

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

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

Советы по отладке JavaScript

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

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

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

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

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

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

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

Первые шаги в JavaScript: создание калькулятора

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

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

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

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

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

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

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

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

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

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

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

Полезные глобальные функции языка Swift

Глобальные функции (их можно вызвать отовсюду без привязки к области действия определённого типа) — это довольно старая концепция, которая была популярна в таких языках, как С...

Чистый код JavaScript: обработка ошибок

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

Как JavaScript повзрослел и стал настоящим языком

Мало кто представлял себе, что этот язык превратится в профессиональную платформу Если ещё лет 20 назад вы бы сказали, что JavaScript станет одним из самых...

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

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

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

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

7 лучших библиотек для создания эффективных приложений ReactJS

Библиотека ReactJS выделяется своей производительностью. Но теперь у нас появилась возможность еще больше ее усовершенствовать. Сообщество пользователей React создало несколько дополнительных весьма эффективных библиотек. Рассмотрим...

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

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

Использование WebSocket с Python

WebSocket позволяет создавать долговременный канал связи между клиентом и сервером, что устраняет недостатки протокола HTTP. Рассмотрим создание сервера и клиента WebSocket на Python.

13 трендов в типографике в 2021 году

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

Создайте собственный AdBlocker за 10 минут

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

Как работает новый await верхнего уровня в JavaScript

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

6 советов, как улучшить работу UX-дизайнера

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

Прототипирование с веб-компонентами: создание RSS Reader

Приготовьтесь отправиться в путешествие по изучению прототипирования приложения с помощью веб-компонентов, модулей es6, event target, bit cli и т. д. Вместе мы узнаем, как...

Как создать сетевой API с помощью Express.js, Bun и MongoDB

С появлением Bun - среды выполнения JavaScript, заменившей Node.js, - создавать высокопроизводительные API стало гораздо проще. Предлагаем пошаговое руководство по разработке сетевого API с помощью Express.js, MongoDB и Bun.

10 рекомендаций по ускорению рабочего процесса в Visual Studio Code

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

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

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

Как работает проверка доступности API в Swift

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

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

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

Var, let и const в JavaScript

Пока я разбирался что к чему в основах JavaScript, я наткнулся на три способа объявления переменных, а именно var, let и const. В данной...

Быстрый веб-скрейпинг с библиотекой Polars

Рассказываем, как с помощью Polars выполнить простой и быстрый веб-скрейпинг с превращением таблиц с HTML-страниц в датафреймы Polars.

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

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

Масштабирование фронтенд-приложений в 2023 году

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

Основные различия между Flexbox и CSS Grid

Главное отличие Flexbox от CSS Grid определяется размерностью. По сути, Flexbox создавался для одноразмерных макетов, а CSS Grid можно было применять к двухмерным макетам....

Автоматизация и масштабирование инфраструктуры приложений с Docker Swarm и AWS

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

Ключевое слово static в PHP

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

Комплексное руководство по Node.js для разработчиков всех уровней

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

Почему нельзя прерывать цикл forEach в JavaScript

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

Прощай, Ramda

Несмотря на свои сильные стороны, Ramda не всегда подходит для написания эффективного и понятного кода. Рассмотрим случаи, когда стоит придерживаться современного нативного JavaScript и Lodash.

Репозитории GitHub в помощь каждому веб-разработчику

Я недавно узнал о репозитории с полезным контентом (что для меня самое важное) и решил углубиться в тему, составив список репозиториев GitHub, которые принесут...

Основные различия между React.js и React Native

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

Почему пора завязывать с React

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

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