Создаем на JavaScript приложение записи заметок в реальном времени
Подробная инструкция, включая настройку аутентификации, реализацию real-time обновления приложения при внесении изменений в БД и процесс авторизации через Google-аккаунт.
Основные принципы темного UI-дизайна
Сегодня темное оформление UI-дизайна встречается повсюду — от мобильных экранов до широкомасштабных телевизоров. Сила, роскошь и элегантность — это то, что выражает темное оформление....
Как увеличить производительность CSS-in-JS в 175 раз
Мне нравится удобство CSS-in-JS, особенно возможность совместного расположения стилей, но в некоторых деталях я не уверен:
В том, что обязательно нужно использовать хешированные классы вместо...
5 инструментов Chrome DevTools, упрощающих разработку
Большинство из нас владеет основами Chrome (например, принципами исследования элементов на странице), но не все знают о дополнительных функциях, значительно упрощающих задачи разработчика.
7 инструментов для создания дизайн-систем в 2020 году
Легенда гласит, что первая дизайн-система была представлена НАСА в 1976 году. С тех пор дизайн-системы превратились в широко распространенную практику, используемую для стандартизации проектирования...
Познай прокси-объект JavaScript как самого себя
Первым делом ознакомимся с официальным определением Proxy на сайте веб-документации MDN, которое гласит:
“Объект Proxy позволяет создавать прокси для другого объекта, обладая способностью перехватывать и...
Советы по анимации с CSS и JavaScript
Основы “плавности”
Анимации - важная часть создания привлекательных веб-приложений и сайтов. Пользователи ожидают высокую отзывчивость и интерактивность.
В классической анимации движение, скорость которого в начале низкая,...
Создание RESTful API-интерфейсов на C++
Разберем ключевые компоненты RESTful API и преимущества C++ на примере приложения с базовыми CRUD-операциями. Научимся настройке сервера, обработке HTTP-запросов и парсингу JSON при помощи Boost.Beast и nlohmann/json.
Как исправить ошибки сертификатов в Node-приложениях при работе с SSL
Если вам уже доводилось писать приложения на Node/Express, то вы не понаслышке знаете, что такие приложения обычно устанавливаются с HTTPS и сертификатом сервера. Однако...
Что такое Throttling и Debouncing?
Throttling и debouncing — это широко используемые техники для увеличения производительности кода, который выполняется повторно с некоторой периодичностью.
Давайте разберёмся, как лучше их применять, чтобы ускорить работу...
8 мощных пакетов NPM для любого веб-разработчика
NPM (Node Package Manager) — это менеджер пакетов Node.js. Он предоставляет разработчикам широкий ассортимент полезных библиотек и инструментов.
С помощью этого репозитория процесс разработки веб-проекта,...
Пять причин поместить функции в класс
Не все функции созданы одинаковыми. Класс — это набор каким-то образом связанных друг с другом функций. Они могут принадлежать одной категории и иметь что-то общее в...
10 CSS-однострочников для преобразования веб-приложения
Эти 10 CSS-однострочников позволят изменить внешний вид и поведение веб-приложения всего за несколько минут! Они помогут справиться с такими задачами, как повышение адаптивности изображений, отмена float-элементов, создание пользовательских стилей флажков и многими другими.
Как не лажать с JavaScript. Часть 1
Часть 1, Часть 2
JavaScript самый распространенный язык программирования в мире и с его силой нужно считаться. Благодаря своей простоте и обилию учебных материалов его...
JavaScript async/await: что хорошего, в чём опасность и как применять?
Механизм async/await , представленный ES7, является фантастическим улучшением асинхронного программирования с использованием JavaScript. Он предоставил возможность использовать код, написанный в синхронном стиле, для асинхронного доступа к...
Является ли Bun следующим значительным достижением после WebPack?
Bun - новичок в экосистеме JS-инструментов - не просто ускоряет компиляцию и синтаксический анализ, но и предоставляет собственный менеджер зависимостей и пакетирование. Предлагаем сравнить новый инструмент с его предшественниками swc и esbuild, а также посмотреть, как он сочетается с npm, babel и Webpack.
Flutter зовет: 5 проектов за выходные
Выходные — это время, когда семья и друзья собираются вместе, общаются, трапезничают и веселятся. Однако если вы именно так провели свои прошлые выходные, то...
Будущее CSS: новейшие возможности языка декорирования в 2023 году
CSS - популярный инструмент стилизации и декорирования. В этом году в него вводятся улучшения, которые помогут улучшить опыт разработчика. О них и поговорим.
Реализация слайдера изображений и текста на React.js с вариантами оптимизации
Предлагаем возможность проверить свои знания и потренироваться на скорость в реализации слайдера изображений на React.js с разными вариантами оптимизации. Отсчет пошел!
Асинхронный JavaScript ― Цикл обработки событий
В этой статье вы узнаете, как работает асинхронность в JavaScript
JavaScript — однопоточный язык программирования. Движок JS единовременно может обрабатывать только одно выражение — в одном потоке.
С одной стороны,...
Как использовать библиотеку веб-компонентов React от Uber
Представляем библиотеку компонентов Uber с открытым исходным кодом. Это надежный инструмент для реализации всех задач разработки пользовательского интерфейса.
Лучшие JavaScript-фреймворки и тенденции веб-разработки в 2021 году
В прошлом году весь мир сильно пострадал от пандемии COVID-19. Этим беспрецедентным кризисом до сих пор охвачены абсолютно все сферы человеческой деятельности. Негативные последствия...
Как работает новый await верхнего уровня в JavaScript
Раньше, чтобы использовать await, код нужно было помещать в асинхронную функцию. Это означало, что вы не могли использовать его вне какого-либо обозначения функции. Await...
Введение в GraphQL: сложные операции и переменные
GraphQL — это язык запросов для среды выполнения на стороне сервера и API для выполнения запросов с использованием системы типов для наших данных.
Рассмотрим более сложные операции...
10 API консольных утилит Chrome
1. monitor
Используется для мониторинга функции:
function traceFunc (arg) { }
monitor(traceFunc)
Функция traceFunc передается в качестве аргумента в monitor. Теперь при каждом вызове traceFunc на мониторе будет...
Шаблон Медиатор в JavaScript
Поскольку медиатор изменяет поведение программы и отвечает за координацию взаимодействий, он считается поведенческим шаблоном. По мере роста приложения возрастает и потребность в медиаторе из-за...
10 хитрых приемов в JavaScript, о которых должен знать каждый разработчик
Рыночная доля JavaScript за последние 5–10 лет поднялась на новый уровень, особенно с тех пор, как в июне 2015 года был запущен ES6. Обновление...
10 рекомендаций по повышению производительности от экспертов JS React
Хук слева, хук справа… Отработаем приемы эффективной разработки: применение функциональной архитектуры, мемоизации, разделения кода. Отправим в нокаут лишние повторные вычисления и отображения.
Возможности автозаполнения для веб-разработчиков
Разберем понятия автозаполнения/автодополнения и узнаем, как браузеры автоматически заполняют стандартные поля, кредитные карты, адреса и пароли на примере Chrome.
10 заповедей UI-дизайна
Этот список составлен на основе книги "101 UX-принцип" (101 UX Principles), написанной Уиллом Грантом (Will Grant).
1. Пустые состояния
Пустые состояния должны представлять нечто большее, чем...
REST API для приложения со Spring Boot, Kotlin и Gradle
Я много раз пытался спроектировать API для своих приложений, и это всякий раз заканчивалось разочарованием по одной из этих причин:
Недостаточное понимание языка или фреймворка.Неготовность...
Микрофронтенды - а почему бы и нет?
Фронтенд-разработка всегда занимала положение младшего ребенка в семействе веб-приложений. И пока фронтенд-разработчики расхаживали в своих модненьких шапочках, с аккуратными усиками, MacBook и дорогим кофе,...
Лучшие практики JavaScript: переменные
Как и у любого языка программирования, у JavaScript есть свой список лучших практик, помогающих создавать более простые для понимания и дальнейшей поддержки программы. В...
Основные принципы кэширования веб-приложений
Веб-приложения прошли большой путь с самого начала. Традиционный процесс создания веб-приложений проходит через несколько этапов проектирования, разработки и тестирования перед тем, как они будут...
19 лучших инструментов прототипирования для дизайнеров UX/UI
Прототипирование выполняет роль чертежа и позволяет разработчикам просмотреть полный обзор сайта или приложения до начала его создания.
Это необходимый шаг в дизайнерском процессе, поскольку он...
12 ошибок начинающих веб-разработчиков
Никто из начинающих программистов не застрахован от ошибок, которые, в свою очередь, помогают обучаться. Проанализируем основные промахи начинающих программистов и убедимся в своем профессионализме....
Иконки в веб-дизайне
Некоторые иконки отталкивают аудиторию. Некрасивый дизайн или непонятный рисунок — причины могут быть разные. Очень часто пользователи и сами не понимают, что именно им...
Proxy - сокровище JavaScript
Что такое прокси? Что именно он делает? Перед тем, как разобраться, посмотрим на пример из реальной жизни. У каждого из нас есть множество ежедневных...
Прекращайте пользоваться Git CLI
Переходите на Git GUI, узнавайте больше о Git и забудьте о случайных отправках в master
Если вы разработчик, то, должно быть, уже пользуетесь Git. Если нет,...
5 тегов HTML, о которых вы могли не знать
Предлагаем вашему вниманию 5 недооцененных HTML-тегов. Не каждый разработчик знаком с ними, хотя они очень полезны и удобны. И вы наверняка пожалеете, что не знали их раньше.
Как создавать собственные хуки на React
Учимся использовать логику компонентов для создания многоразовых хуков
Хуки React, впервые появившиеся в версии React v16.8, кардинально изменили подход к написанию кода. Из коробки React...
Как использовать WebGL для интерактивной 3D-графики
Расширьте возможности веб-приложения за счет интерактивной 3D-графики. Предлагаем пошаговый гайд по 3D-моделированию с использованием WebGL (API JavaScript) и библиотеки Three.js.
В погоне за продуктивностью, или 9 полезных расширений для браузера
В данной статье речь пойдет о расширениях для браузера, способствующих повышению продуктивности разработчиков.
С недавних пор они стали незаменимыми помощниками в мой работе, поскольку действительно...
Введение в создание веб-компонентов
Приложения становятся все сложнее, и нам нужен способ разделять код на управляемые фрагменты. Веб-компоненты подойдут для создания компонентов, которые можно неоднократно использовать.
Веб-компоненты также изолированы...
Маршрутизация и получение данных в Next.js
В статье мы рассмотрим:
Отрисовку отдельных компонентов по разным маршрутам.Разницу между статической генерацией и генерацией на стороне сервера.Получение данных с помощью getStaticProps.Получение данных и динамическую...
Паттерн проектирования «Наблюдатель»: объект под прицелом
В книге “Приемы объектно-ориентированного проектирования: паттерны проектирования” Эриха Гамма описываются 23 классических паттерна, которые предлагают решения часто встречающихся задач в разработке ПО.
В данной...
Простая защита от DoS и брутфорс атак
Наиболее типичными и опасными являются DoS(DDoS) и брутфорс атаки. Оба их вида подразумевают ежесекундную отправку тысячи запросов, которые перегружают сервера. Зачем такое позволять? Сегодня...
Как развернуть приложение на Vercel
Быстро, доступно и легко! О чем идет речь? О развертывании приложения на платформе Vercel. Поделимся успешным практическим опытом и подробными пошаговыми инструкциями.
Как работает архитектурный паттерн «модель-вид-контроллер»
За последние двадцать лет веб-сайты превратились из простых страниц с вкраплением CSS в гораздо более сложные и мощные приложения.
Чтобы упростить разработку этих приложений, программисты...
Отладка с Git
В этой статье мы рассмотрим два метода Git для отладки ошибок в базе кода - blame и bisect. С помощью Git blame описываются детали изменения...
Чистая архитектура фронтенда
Концепции и практики, такие как SOLID, KISS, DRY и DDD, помогут создавать более чистые архитектуры фронтенда. А правила создания компонентов с учетом развития бизнес-логики позволят коду оставаться ожидаемо поддерживаемым.
Руководство по созданию настольного приложения в Electron
Если вы занимаетесь веб-разработками, то, вероятно, наслышаны об Electron. Для тех же, кто не в курсе, скажу, что это достаточно противоречивый фреймворк для создания...
Различия между псевдонимами типов и интерфейсами в TypeScript 4.6
Псевдонимы типов и интерфейсы в TypeScript 4.6 очень похожи, но все же у них есть определенные различия и ограничения. Поговорим о том, в каких случаях следует использовать каждый из них.
Обзор 10 приемов JavaScript для эффективного программирования
Пополни знания JavaScript 10 эффективными приемами и начни использовать его возможности по максимуму.
Мой любимый вопрос на собеседовании для веб-разработчиков: «Понимаете ли вы, что такое массивы?»
От веб-разработчика на собеседовании требуется продемонстрировать хорошие знания PHP и Javascript. Всего один простой вопрос помогает выявить, действительно ли разбирается человек в том инструментарии,...
Как реализовать feature gate в React
Предлагаем доступное руководство по реализации feature gate. Этот простой, но мощный механизм позволит легко управлять выпуском новых функций.
10 конструкторов сайтов с ИИ, которые стоит попробовать каждому UI/UX-дизайнеру
Возможности искусственного интеллекта позволяют создать собственный персонализированный сайт. Предлагаем топ-10 ИИ-конструкторов сайтов, среди которых можно найти наиболее подходящего помощника.
12 хуков React, которые должен знать каждый разработчик
Используйте эти хуки React, чтобы сэкономить время и повысить свою продуктивность. Некоторые из них реально меняют правила игры.
Kubernetes избавляется от Docker
Как многие уже знают, Kubernetes с версии v1.20 прекращает использование Docker в качестве среды выполнения. Выбор сделан в пользу тех сред, что задействуют Container...
4 принципа качественного рефакторинга функций
Каждый проект в программировании так или иначе связан с данными, в управлении которыми важную роль играют функции, подготавливающие эти данные для представления в числовом...
У приложений будущего может не быть бэкенда
История циклична.
Я создал свой первый веб-сайт в 1999 году с помощью самых передовых технологий, доступных веб-мастерам (не могу использовать слово разработчики в данном случае):...
Основы дизайна, которые должен знать каждый креативщик
Обычный поиск в Google по запросу “образовательные онлайн-ресурсы по дизайну” даёт миллионы результатов — вовсе неудивительно, что понимание того, с чего начинать изучение, может показаться дизайнеру-новичку...
Пожалуйста, отложите TypeScript ненадолго
Сперва позвольте уточнить: типизированный JavaScript — это фантастика. Я использовал Flow и продолжу использовать TypeScript в будущем, ведь это мощнейший быстро растущий инструмент.
Но какова цена этой...
Минималистичная конфигурация терминала с возможностью тонкой настройки
Мой терминал настроен очень минималистично. Это просто черный ящик, который сообщает мне полезную информацию. Основное удобство в том, что каждый его аспект имеет собственный...
Как написать переключатель темы на базе файлов cookie с помощью CSS и ванильного JavaScript
Показываем, как с легкостью создать механизм переключения на темную тему всего за пятьдесят две строчки кода.
Tailwind CSS: как разработать продвинутую пользовательскую анимацию
Анимация с Tailwind CSS обеспечивает отличный пользовательский опыт. Ознакомьтесь с примерами, демонстрирующими различные эффекты анимации, такие как вращение, подпрыгивание, пульсация, переворачивание и покачивание.
Лучшие практики JavaScript: объекты
Как любой другой язык программирования, JavaScript имеет свой собственный список лучших практик, которые помогают создавать программы проще для понимания и дальнейшей поддержки. Этот язык...
Не используйте for при переборе массивов
Циклы for имеют для меня особое значение. Довольно продолжительное время я активно их использовал, пытаясь уйти от циклов while. При этом неизбежно забываешь об...
Анимация границ с помощью свойств CSS
Движущиеся красочные элементы всегда привлекают внимание пользователей сайтов. Научимся создавать интересные анимированные границы с помощью CSS.
Паттерн “Шаблонный метод” и его реализация в JavaScript
Обучающее руководство по работе с паттерном проектирования JavaScript "Шаблонный метод". Автор подробно рассматривает принцип действия шаблона, умело сочетая теорию, наглядность и практику.
10 видов шаблонного кода на NextJS
Шаблонный код — это минимальный код многократного использования, который требуется всем приложениям и встречается в каждом из них. Это такой многоразовый «клей» для компонентов.
В...
Компоненты высшего порядка в React
Что такое компоненты и функции высшего порядка и в чем заключаются их преимущества? Представляем вам комплексное руководство по компонентам высшего порядка в React.
Создаем темный режим, используя React и Styled Components
React упрощает реализацию функции темного режима, которая порой необходима при просмотре сайтов. Рассмотрим, как ее можно реализовать.
TypeScript. Что, зачем и как?
Те из вас, кто занимается разработкой на JavaScript, наверняка так или иначе слышали о TypeScript. Если при этом вы не решались попробовать освоить этот...
4 функциональные концепции, которые следует знать каждому разработчику JavaScript
Функции - мощные инструменты в языке JavaScript. Сегодня поговорим о 4 главных концепциях функционального программирования, которые повысят уровень вашего мастерства.
AutoScraper и Flask: создание API для любого сайта менее чем за 5 минут
В этом руководстве мы создадим собственный поисковый API электронной коммерции с поддержкой как eBay, так и Etsy без использования каких-либо внешних API. С помощью AutoScraper и Flask мы можем достичь этой цели менее чем за 20 строк Python кода для каждого сайта.
Как избежать CORS в одностраничных приложениях
За последнее десятилетие применение технологии одностраничных приложений стало обычным явлением при создании веб-приложений. Сегодня во фронтенд-разработке господствуют такие фреймворки, как Angular и Vue, и...
Лучшие библиотеки React 2024 года
В этом руководстве собраны самые востребованные библиотеки React 2024 года. Они помогают настраивать и оформлять приложения, управлять состоянием и получать данные, выполнять маршрутизацию, аутентификацию и многое другое. С ними вы сможете создавать полноценные мобильные и веб-приложения.
Разделение пользовательского интерфейса и логики в React: чистый код с безголовыми компонентами
Ознакомьтесь с headless-подходом в React-разработке. Он позволит создавать более удобный для сопровождения и многократного использования код, сокращая его избыточность и потенциальные ошибки.
Элементы управления выбором в пользовательском интерфейсе
Элементы управления выбором уже давно присутствуют в пользовательских интерфейсах, поэтому у пользователей выработались определённые и весьма серьезные ожидания от них. Вот простая шпаргалка, которой...
Все, что нужно знать о SASS
Что такое SASS и зачем его осваивать? Какие в SASS функциональные возможности, для чего здесь файлы «Partials» и какие есть инструменты для компиляции?
Найти и обезвредить: утечки памяти в Node.js
Если вы ломаете голову над тем, почему ваше приложение JavaScript преподносит неприятные сюрпризы в виде сильного торможения, низкой производительности, продолжительных задержек или частых сбоев,...
Чистый код JavaScript: обработка ошибок
Обработка ошибок — важная часть любой программы. Зачастую программы сталкиваются с неожиданными значениями, которые нужно правильно обрабатывать.
В этой статье мы рассмотрим, как легко находить ошибки и...
Проблема устаревших замыканий и способы ее решения в React. Часть 1
Хотите проникнуть в одну из самых страшных тайн JavaScript-кода, называемую "устаревшими замыканиями"? Первая часть руководства поможет понять, что такое замыкания, почему они возникают и в чем заключается проблема устаревших замыканий.
Разработка и развёртывание приложения машинного обучения: полное руководство
Приложение для прогнозирования COVID-19: от и до
Похоже, коронавирус не спешит уходить из нашей жизни. Но мы можем не только носить маски и мыть руки. Давайте...
5 проектов по программированию для начинающих
Забавные и полезные идеи для проектов
Проект 1: автоматический генератор ASCII-графики
ASCII-графика — это вид изобразительного искусства, где при создании картинок используются составленные вместе символы ASCII. Вот...
Чистый код JavaScript - объекты и классы
При написании чистого кода нужно быть осторожным с объектами, классами или конструкторами, которые мы объявляем. Мы не хотим предоставлять данные, которые не должны быть...
Введение в фронтэнд и бэкэнд – основы веб-разработки
Хотите создать веб-сайт?
Здорово! Создание веб-сайта - плодотворный творческий проект, увлекательный и полезный как для приобретения востребованных навыков, так и отличный способ попробовать себя в новом...
Знакомство с AWS WebSocket
Первая статья из серии изучения WebSocket. В ней вы узнаете, что такое WebSocket, для чего и как он используется, а также познакомитесь с простейшей реализацией подписок и уведомлений.
10 лучших фреймворков Node.js
Node.js приобрел большую популярность среди разработчиков, которые предпочитают использовать JavaScript для разработки приложений.
Возможность управления клиентскими и серверными сценариями одним и тем же языком привела...
Web Speech API в JavaScript: от текста к речи
Практическое руководство по работе с Web Speech API в JavaScript. Рассказываем, как создать веб-страницу, реализующую преобразование текста в речь.
TypeScript: продвинутые типы и их скрытые возможности
Признанный во всем мире TypeScript поражает своими возможностями. Но все ли из них вам известны? Погрузитесь в систему TS, чтобы открыть для себя новые возможности использования свойств-аксессоров, условных типов, вывода и рекурсии типов.
Как получить все неуникальные значения в массиве JavaScript?
Иногда бывает нужно получить все повторяющиеся значения из массива JavaScript.
В этой статье мы рассмотрим способы получения всех неуникальных значений в массиве JavaScript.
Array.prototype.filter
Один из таких...
Настройка современной среды разработки в Windows 10
Вступление
С 90-х годов в качестве основной операционной системы я задействовал то Windows, то различные дистрибутивы Linux. И почти каждый раз использовал обе эти системы,...
Чистый код на JavaScript: вертикальное форматирование
Форматирование кода в легко читаемый во многом определяет его итоговую чистоту. Не отформатированный как следует код требует больше умственных усилий для понимания.
В этой статье...
Что такое Open Graph и как применять его для веб-сайта?
На то, чтобы наполнять сайт контентом и поддерживать его, уходит много времени. Как удостовериться в том, что контент отображается правильно, когда им делятся в...
11 сверхполезных советов для JavaScript разработки
1. Преобразование в Boolean с помощью оператора !!
Иногда нам необходимо проверить существование переменной или наличие у нее верного значения. Для подобной проверки вы можете использовать !!...
Next.js и React.js: что выбрать для проекта
Какой фреймворк - React.js или Next.js - стоит использовать в проекте, чтобы получить максимальную выгоду? Разберем оба фреймворка и определим, какие преимущества дает каждый из них.
Погружение в unserialize(): больше, чем RCE
Обход аутентификации и внедрение SQL-кода через unserialize() в PHP
Сериализация в PHP через метод unserialize() приводит к появлению уязвимостей, открывающих через RCE (удаленное выполнение кода) доступ...
Обзор JavaScript на основе диалога с ChatGPT
Предлагаем вам обзор JavaScript, составленный по материалам интервью с ChatGPT. ИИ-модель продемонстрировала свои уникальные возможности, предоставив развернутые естественные ответы на 12 непростых вопросов.
Как находить уязвимости в коде на PHP?
Сегодня я наткнулся на вот этот пост Intigriti в Twitter:
«Мы только что написали потрясающий фрагмент кода, но… Наша команда разработки утверждает, что он небезопасен....
Swift: ссылочные типы и циклы сохранения, weak и unowned
Разберем один из 10 технических вопросов недавнего собеседования по Swift и Objective C. На примере покажем, почему для предотвращения цикла сохранения применяется слабая ссылка weak, а не бесхозная unowned.
Клятва Гиппократа для дизайнеров в эпоху искусственного интеллекта
Время разработки этических принципов для дизайнеров настало. Клятва Гиппократа для дизайнеров не только послужит защитой от возможных ошибок, но и станет навигатором, направляющим специалистов на создание инноваций, действительно служащих интересам человечества.
Язык запросов Lisp Query Notation
Автор делится своей разработкой — альтернативой sed и awk для любителей Lisp. В материале вы найдете примеры применения языка, в частности для JSON, и ссылку на более техническое описание в формате PDF.
Ловушка для горутины
Горутина — это эффективный и легковесный механизм многопоточного выполнения, популярный среди разработчиков Go. С помощью семантики горутин программисты добиваются эффективного выполнения параллельных процессов в программе. Впрочем,...