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

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

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

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

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

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

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

Это не типичное руководство по vue-i18n  Вас ждет не просто рассказ о том “как”, здесь речь пойдет об отточенном рабочем потоке, выработанном на многих проектах по...

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

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

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

WebRTC (Web Real Time Communication) — это проект с открытым исходным кодом, позволяющий создавать одноранговые (P2P) аудио- и видеосвязи через JavaScript API. Для того чтобы установить P2P-соединение,...

В этой статье мы рассмотрим компоненты высшего порядка (Higher-Order Components, HOC) в React. Что такое HOC? HOC — это особая техника в React, при которой функция принимает аргумент Component...

1. Преобразование в Boolean с помощью оператора !! Иногда нам необходимо проверить существование переменной или наличие у нее верного значения. Для подобной проверки вы можете использовать !!...

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

Если вам уже доводилось писать приложения на Node/Express, то вы не понаслышке знаете, что такие приложения обычно устанавливаются с HTTPS и сертификатом сервера. Однако...

Наиболее типичными и опасными являются DoS(DDoS) и брутфорс атаки. Оба их вида подразумевают ежесекундную отправку тысячи запросов, которые перегружают сервера. Зачем такое позволять? Сегодня...

"Чему равно this в данном случае?" - этот вопрос часто сбивает с толку новичков в JavaScript-программировании. Предлагаем четкий алгоритм, который поможет быстро определить значение ключевого слова this.

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

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

Что такое множество? Это набор уникальных значений  —  ни одно из них не возникает дважды или более раз. Это единственное ограничение, которое делает множество значений...

Иногда бывает нужно получить все повторяющиеся значения из массива JavaScript. В этой статье мы рассмотрим способы получения всех неуникальных значений в массиве JavaScript. Array.prototype.filter Один из таких...

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

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

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

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

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

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

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

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

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

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

Обход аутентификации и внедрение SQL-кода через unserialize() в PHP Сериализация в PHP через метод unserialize() приводит к появлению уязвимостей, открывающих через RCE (удаленное выполнение кода) доступ...

Вступление С 90-х годов в качестве основной операционной системы я задействовал то Windows, то различные дистрибутивы Linux. И почти каждый раз использовал обе эти системы,...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

React Content Loader, React Filepond, React Select, React Query, React Hook Form, React Infinite Scroller и другие библиотеки JavaScript

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

В этом руководстве мы создадим собственный поисковый API электронной коммерции с поддержкой как eBay, так и Etsy без использования каких-либо внешних API. С помощью...

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

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

Предлагаем возможность проверить свои знания и потренироваться на скорость в реализации слайдера изображений на React.js с разными вариантами оптимизации. Отсчет пошел!

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

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

Какой фреймворк - React.js или Next.js - стоит использовать в проекте, чтобы получить максимальную выгоду? Разберем оба фреймворка и определим, какие преимущества дает каждый из них.

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

Обучающее руководство по работе с паттерном проектирования JavaScript "Шаблонный метод". Автор подробно рассматривает принцип действия шаблона, умело сочетая теорию, наглядность и практику.

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

Angular — это MVC-фреймворк для создания одностраничных приложений в Javascript.  В этой статье мы узнаем, как установить заголовок браузера (страницы/документа) для всего приложения и как изменить заголовок...

Громоздкие пакеты мешают продуктивности приложения? Решение есть. Сегодня вы узнаете 5 методов оптимизации приложения путем уменьшения размера пакетов JavaScript.

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

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

Часть 1, Часть 2, Часть 3, Часть 4 Изменения в DOM Давайте теперь рассмотрим, как добавлять, изменять, заменять и удалять узлы из DOM. В частности рассмотрим методы...

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

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

ES2015 (ES6) принес с собой много новых интересных фич. Теперь на дворе 2020 год, и можно предположить, что многие JavaScript-разработчики уже познакомились с этими...

Для тех, кто не совсем в теме, Deno — это детище Райана Даля, ставшего известным благодаря созданию Node.js, который вам, наверняка, знаком. Значит ли это, что...

Rust не вызвал у меня большого интереса, когда я впервые прочитал о нём. Это было около двух лет назад. Я работал веб-разработчиком, программировал в...

При изучении интернета и стоящих за ним технологий вы можете встретить термин HTTP. HTTP или Hypertext Transfer Protocol (протокол передачи гипертекста) является столпом всемирной...

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

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

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

В статье мы рассмотрим: Отрисовку отдельных компонентов по разным маршрутам.Разницу между статической генерацией и генерацией на стороне сервера.Получение данных с помощью getStaticProps.Получение данных и динамическую...

В статье будут рассмотрены:  случаи использования React Query; простые запросы fetch с помощью пакета React Query; поиск элементов через API по ID; пагинация; мутации.  Случаи использования React Query  Традиционный метод fetch() отлично...

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

Научимся создавать и управлять электронными таблицами с помощью JavaScript. Попрактикуемся в процессе создания трекера расходов.

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

Качественный код  —  это командная работа, вне зависимости от должности. Менеджер, разработчик и тестировщик должны вместе работать над созданием высококачественного кода. Ниже представлен список методов...

Функции - мощные инструменты в языке JavaScript. Сегодня поговорим о 4 главных концепциях функционального программирования, которые повысят уровень вашего мастерства.

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

Каждый веб-разработчик должен иметь навыки использования HTML. Без знания этого языка нельзя стать стать настоящим профессионалом. Любой сайт в интернете создан на основе HTML,...

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

В обзоре состояния CSS на 2020 года был раздел, посвященный служебным библиотекам. Речь в нем шла о StyleLint, Purge CSS и PurifyCSS. Две из...

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

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

Операторы Rest (остаток) и Spread (расширение) можно использовать не только для разделения и соединения отдельных значений массивов. Здесь я собрал 7 малоизвестных способов использования...

Пройдитесь по /usr/bin большинства систем Linux или macOS, и вы найдете сотни, если не тысячи, предлагаемых команд. Количество доступных опций кому угодно вскружит голову....

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

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

Метод forEach() выполняет функцию обратного вызова для каждого элемента в массиве. Что это значит? Метод forEach вызывает функцию, находящуюся вне forEach и имеющую дело...

Есть в жизни правила, нарушать которые нельзя: нарушишь — дорого заплатишь. В UI-дизайне такие тоже есть, и они называются “эвристика”, или общие правила улучшения юзабилити пользовательских...

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

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

Мой совет номер один для новичков: изучайте Git и выкладывайте код на GitHub каждый день. Я ежедневно получаю сообщения, письма, твиты от тех, кто только...

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

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

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