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

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

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

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

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

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

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

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

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

Дизайн-система: иконки

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

Какие нововведения для веб-разработки представит Vue 3.0?

В ноябре прошлого года создатель Vue, Эван Ю, продемонстрировал ключевые обновления на Vue 3.0, благодаря которым Vue станет более эффективным, модульным и простым в...

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

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

Как преобразовать шестнадцатеричное число в десятичное в JavaScript

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

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

Функция поиска — одна из самых важных особенностей программного приложения. Поисковые сайты типа Google и DuckDuckGo помогают миллионам пользователей бороздить просторы Интернета и за...

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

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

6 современных возможностей JavaScript, о которых не знает большинство разработчиков

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

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

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

Мы снова написали самый быстрый JS-фреймворк UI

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

Топ - 9 фреймворков Java в 2020 году

Язык Java в настоящее временя участвует в функционировании 134 861 сайта, включая ESPN, SnapDeal, Alibaba и т.д. За всю историю существования этот язык доказал...

Глубокое погружение в Nuxt.js

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

Как использовать JavaScript для сокращения HTML-кода

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

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

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

Возможности и перспективы WebAssembly

WebAssembly - прорывная разработка нашего времени - обладает огромным потенциалом. Однако это в основном академический проект. Не пора ли вывести WebAssembly в свет?

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

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

Все, что нужно знать о SASS

Что такое SASS и зачем его осваивать? Какие в SASS функциональные возможности, для чего здесь файлы «Partials» и какие есть инструменты для компиляции?

Что значит this в JavaSсript?

Значение this — одна из самых запутанных составляющих JavaSсript. this может принимать различные значения в зависимости от того, где располагается. В этой статье мы рассмотрим, где используется...

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

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

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

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

7 бесплатных API для уникальных приложений

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

8 неэффективных практик JavaScript, которых лучше избегать

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

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

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

Используй Async/Await в JavaScript, как профессионал

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

Var, let и const в JavaScript

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

Как очистить код с помощью SASS

Итак, давайте знакомиться с SASS SASS (Syntactically Awesome StyleSheets — Синтаксически потрясающие таблицы стилей) является препроцессорным скрипт-языком, код которого компилируется в CSS, чтобы быть понятым браузерам. У SASS...

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

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

Что такое Hoisting в JavaScript

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

Откройте миру разрабатываемые вами API

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

Как работает маршрутизация Express

Как в приложении Node.js происходит обработка клиентских запросов? Какая функция помогает обрабатывать тот или иной запрос? Чтобы ответить на эти вопросы, заглянем в "закулисье" маршрутизации фреймворка Express.

5 проектов по программированию для начинающих

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

Чем веб-дизайн отличается от front end разработки?

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

5 продвинутых шаблонов React на пальцах

Знакомство с наиболее эффективными шаблонами через примеры их реализации, а также сопоставление основных плюсов и минусов.

Поэтапное создание рабочей контактной формы в Next.js

Учимся создавать контактную форму для эффективного взаимодействия с пользователями. В этом важном деле нам помогут API-маршруты Next.js и API SendGrid.

Разработка и развёртывание приложения машинного обучения: полное руководство

Приложение для прогнозирования COVID-19: от и до Похоже, коронавирус не спешит уходить из нашей жизни. Но мы можем не только носить маски и мыть руки. Давайте...

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

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

Что делает сайты медленнее?

Аналитики CatchJS отрендерили 1 миллион самых популярных сайтов. Они отследили разнообразные метрики производительности, учли каждую ошибку и отметили каждый запрошенный URL. Результат составляет, вероятно,...

Введение в фронтэнд и бэкэнд – основы веб-разработки

Хотите создать веб-сайт? Здорово! Создание веб-сайта - плодотворный творческий проект, увлекательный и полезный как для приобретения востребованных навыков, так и отличный способ попробовать себя в новом...

Как работать с — настраиваемым элементом HTML с возможностью анимации

Как работать с <qr-code> — настраиваемым элементом HTML с возможностью анимации

Рассказываем и показываем, как работать с элементом для создания стилизованных, современных qr-кодов с поддержкой SVG логотипов. В конце материала — таблица сравнения с другими подобными элементами для фреймворков фронтенда.

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

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

PHP: типы констант

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

Психология цвета в UX

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

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

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

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

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

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

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

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

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

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

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

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

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

React Single Page Application и React-Router для начинающих

Ваше первое React SPA с нуля: всё, что нужно знать про хуки UseParams, UseLocation и UseHistory, про маршрутизацию и панель навигации

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

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

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

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

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

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

Чего я не знал о CSS, а стоило бы

Делать сайты я учился по-старомодному: открывал исходный код и пытался повторить то, что видел. А по тому, чего не видел (PHP/MySQL), прочёл какую-то случайно...

5 важных принципов работы с хуками в React

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

Хуки Mongoose: все, что нужно знать

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

Создавайте веб-приложения, которые умеют говорить! ?

Сегодня трудно себе представить жизнь без Интернета. Интернет даёт огромные возможности. Он позволяет поддерживать связь с миром, не вставая с дивана. Аудиосегмент Интернета растёт...

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

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

Как создать бессерверное приложение с Netlify и JavaScript

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

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

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

Как реализовать простой контроль версий с помощью JavaScript, чтобы лучше разобраться в Git

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

8 пунктов по стилю React + TypeScript

Ценность этих рекомендаций в их практическом значении. Добавьте их в собственное руководство по стилю React + TypeScript, и ваш код станет чище и понятнее.

Что такое Throttling и Debouncing?

Throttling и debouncing — это широко используемые техники для увеличения производительности кода, который выполняется повторно с некоторой периодичностью. Давайте разберёмся, как лучше их применять, чтобы ускорить работу...

Знакомство с ReactJS на базовом уровне

Что такое ReactJS? ReactJS очень популярный в среде веб-разработчиков инструмент. Что же он собой представляет? ReactJS — библиотека JavaScript, разработанная Facebook для создания пользовательских интерфейсов. С ее помощью разрабатываются...

Руководство по применению паттерна Event Bus в архитектуре React

Подробно разберем паттерн проектирования Event Bus, попрактикуемся в создании и задействуем его в React.

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

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

Интеграция Django с материализованными представлениями PostgreSQL

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

Agile — враг (хорошего проектирования)?

Интеграция Чтобы приступить к обсуждению, вначале надо поговорить об интеграции. Интеграция — это… действие или случай объединения в единое целое. Частая интеграция помогает людям более эффективно решать задачи: Вы...

5 советов о браузерных инструментах разработчика

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

Проект инженерии данных с DAG Airflow «от и до». Часть 1

В реальном проекте валидации электронной почты проиллюстрируем потоковую передачу данных с отправителем и получением сообщений в теме Kafka для Cassandra и MongoDB. Наличие почты и пароля определим с помощью получателя и проверки данных.

Обрабатываем ошибки в React: полное руководство

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

9 плагинов в Figma, которые были популярны в 2024 году

Рассмотрим 9 плагинов в Figma, их особенности и способы интеграции в рабочий процесс.

Почему NestJS — лучший фреймворк Node.js для микросервисов

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

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

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

Как проще всего выполнять запросы GraphQL в iOS

Такие сторонние библиотеки, как Apollo iOS client и AWS AppSync нужны для связи с сервером GraphQL в iOS-приложении, но они также вводят в ваш...

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

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

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

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

React hooks: никакой магии, только массивы

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

React-приложение с шаблонами «Репозиторий» и «Адаптер»

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

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