REST API для приложения со Spring Boot, Kotlin и Gradle
Я много раз пытался спроектировать API для своих приложений, и это всякий раз заканчивалось разочарованием по одной из этих причин:
Недостаточное понимание языка или фреймворка.Неготовность...
Введение в GraphQL: сложные операции и переменные
GraphQL — это язык запросов для среды выполнения на стороне сервера и API для выполнения запросов с использованием системы типов для наших данных.
Рассмотрим более сложные операции...
Как использовать библиотеку веб-компонентов React от Uber
Представляем библиотеку компонентов Uber с открытым исходным кодом. Это надежный инструмент для реализации всех задач разработки пользовательского интерфейса.
Основные принципы кэширования веб-приложений
Веб-приложения прошли большой путь с самого начала. Традиционный процесс создания веб-приложений проходит через несколько этапов проектирования, разработки и тестирования перед тем, как они будут...
Лучшие практики JavaScript: переменные
Как и у любого языка программирования, у JavaScript есть свой список лучших практик, помогающих создавать более простые для понимания и дальнейшей поддержки программы. В...
12 ошибок начинающих веб-разработчиков
Никто из начинающих программистов не застрахован от ошибок, которые, в свою очередь, помогают обучаться. Проанализируем основные промахи начинающих программистов и убедимся в своем профессионализме....
Proxy - сокровище JavaScript
Что такое прокси? Что именно он делает? Перед тем, как разобраться, посмотрим на пример из реальной жизни. У каждого из нас есть множество ежедневных...
Полное руководство по React Context
Context - это необходимый для разработчиков инструмент React. Он упрощает обмен состоянием в приложениях. Рассмотрим особенности и назначение React Context, выясним в каких случаях он действительно нужен.
Прекращайте пользоваться Git CLI
Переходите на Git GUI, узнавайте больше о Git и забудьте о случайных отправках в master
Если вы разработчик, то, должно быть, уже пользуетесь Git. Если нет,...
Является ли Bun следующим значительным достижением после WebPack?
Bun - новичок в экосистеме JS-инструментов - не просто ускоряет компиляцию и синтаксический анализ, но и предоставляет собственный менеджер зависимостей и пакетирование. Предлагаем сравнить новый инструмент с его предшественниками swc и esbuild, а также посмотреть, как он сочетается с npm, babel и Webpack.
Как разработать систему для 100 миллионов пользователей: руководство для начинающих
Начнем с азов
Предлагаю начать с разработки базового приложения с несколькими пользователями. Развернуть всю систему на одном сервере проще простого. Именно с этого начинает большинство разработчиков.
Сайт...
Когда не стоит использовать метод find() в JavaScript
Немногие знают истинную ценность Map. Между тем, применение этой структуры данных позволяет повысить производительность и улучшить пользовательский опыт. Особенно она полезна при работе со сложными структурами данных или при необходимости получить быстрый доступ к данным.
Будущее CSS: новейшие возможности языка декорирования в 2023 году
CSS - популярный инструмент стилизации и декорирования. В этом году в него вводятся улучшения, которые помогут улучшить опыт разработчика. О них и поговорим.
5 важных моментов из JavaScript, которые помогут избегать ошибок
JavaScript - сложный язык, способный загнать в тупик не только новичков, но и опытных разработчиков. Предлагаемые рекомендации помогут принимать правильные решения при написании JS-кода, чтобы избежать многих ошибок.
Как исправить ошибки сертификатов в Node-приложениях при работе с SSL
Если вам уже доводилось писать приложения на Node/Express, то вы не понаслышке знаете, что такие приложения обычно устанавливаются с HTTPS и сертификатом сервера. Однако...
Что такое Throttling и Debouncing?
Throttling и debouncing — это широко используемые техники для увеличения производительности кода, который выполняется повторно с некоторой периодичностью.
Давайте разберёмся, как лучше их применять, чтобы ускорить работу...
10 CSS-однострочников для преобразования веб-приложения
Эти 10 CSS-однострочников позволят изменить внешний вид и поведение веб-приложения всего за несколько минут! Они помогут справиться с такими задачами, как повышение адаптивности изображений, отмена float-элементов, создание пользовательских стилей флажков и многими другими.
React-хуки useEffect и useLayoutEffect: различие и примеры использования
Понимание поведения хуков useEffect и useLayotEffect - ключ к оптимизации производительности React-приложения и обеспечению плавного взаимодействия с пользователем. Выясните, в чем разница между этими хуками, чтобы знать наверняка, когда и как их использовать.
Паттерн проектирования «Наблюдатель»: объект под прицелом
В книге “Приемы объектно-ориентированного проектирования: паттерны проектирования” Эриха Гамма описываются 23 классических паттерна, которые предлагают решения часто встречающихся задач в разработке ПО.
В данной...
Топ-5 новых функций JavaScript ES12, которые облегчат вам жизнь
Узнайте об удивительных возможностях, предлагаемых обновленным ECMAScript 2021. В 12-м выпуске спецификаций добавились новые фичи, которые сделают вашу жизнь проще, а код - короче и читабельнее.
В погоне за продуктивностью, или 9 полезных расширений для браузера
В данной статье речь пойдет о расширениях для браузера, способствующих повышению продуктивности разработчиков.
С недавних пор они стали незаменимыми помощниками в мой работе, поскольку действительно...
Как создавать собственные хуки на React
Учимся использовать логику компонентов для создания многоразовых хуков
Хуки React, впервые появившиеся в версии React v16.8, кардинально изменили подход к написанию кода. Из коробки React...
Введение в создание веб-компонентов
Приложения становятся все сложнее, и нам нужен способ разделять код на управляемые фрагменты. Веб-компоненты подойдут для создания компонентов, которые можно неоднократно использовать.
Веб-компоненты также изолированы...
5 тегов HTML, о которых вы могли не знать
Предлагаем вашему вниманию 5 недооцененных HTML-тегов. Не каждый разработчик знаком с ними, хотя они очень полезны и удобны. И вы наверняка пожалеете, что не знали их раньше.
Кто есть кто: обратные вызовы, промисы и асинхронные функции
В центре внимания статьи: обратные вызовы, промисы, асинхронные функции. Подробно разберем их внутреннюю работу и посмотрим, чем они отличаются.
Мой любимый вопрос на собеседовании для веб-разработчиков: «Понимаете ли вы, что такое массивы?»
От веб-разработчика на собеседовании требуется продемонстрировать хорошие знания PHP и Javascript. Всего один простой вопрос помогает выявить, действительно ли разбирается человек в том инструментарии,...
Зачем нужен CORS: просто о сложном
CORS — чрезвычайно полезный инструмент в мире, где орудуют киберпреступники и запускаются некорректно настроенные веб-серверы. Поэтому стоит выяснить, что такое CORS и как он может уберечь вас от межсайтовых подделок запросов.
Как работает архитектурный паттерн «модель-вид-контроллер»
За последние двадцать лет веб-сайты превратились из простых страниц с вкраплением CSS в гораздо более сложные и мощные приложения.
Чтобы упростить разработку этих приложений, программисты...
У приложений будущего может не быть бэкенда
История циклична.
Я создал свой первый веб-сайт в 1999 году с помощью самых передовых технологий, доступных веб-мастерам (не могу использовать слово разработчики в данном случае):...
4 принципа качественного рефакторинга функций
Каждый проект в программировании так или иначе связан с данными, в управлении которыми важную роль играют функции, подготавливающие эти данные для представления в числовом...
10 конструкторов сайтов с ИИ, которые стоит попробовать каждому UI/UX-дизайнеру
Возможности искусственного интеллекта позволяют создать собственный персонализированный сайт. Предлагаем топ-10 ИИ-конструкторов сайтов, среди которых можно найти наиболее подходящего помощника.
Пожалуйста, отложите TypeScript ненадолго
Сперва позвольте уточнить: типизированный JavaScript — это фантастика. Я использовал Flow и продолжу использовать TypeScript в будущем, ведь это мощнейший быстро растущий инструмент.
Но какова цена этой...
Иконки в веб-дизайне
Некоторые иконки отталкивают аудиторию. Некрасивый дизайн или непонятный рисунок — причины могут быть разные. Очень часто пользователи и сами не понимают, что именно им...
Kubernetes избавляется от Docker
Как многие уже знают, Kubernetes с версии v1.20 прекращает использование Docker в качестве среды выполнения. Выбор сделан в пользу тех сред, что задействуют Container...
Не используйте for при переборе массивов
Циклы for имеют для меня особое значение. Довольно продолжительное время я активно их использовал, пытаясь уйти от циклов while. При этом неизбежно забываешь об...
Создание UI-компонентов React на продвинутом уровне
Хотите создавать компоненты пользовательского интерфейса, как старший React-разработчик? Воспользуйтесь руководством по эффективному созданию компонента button. Усвоив его принципы, вы сможете разработать любой другой компонент без особых проблем.
Лучшие практики JavaScript: объекты
Как любой другой язык программирования, JavaScript имеет свой собственный список лучших практик, которые помогают создавать программы проще для понимания и дальнейшей поддержки. Этот язык...
Реализация слайдера изображений и текста на React.js с вариантами оптимизации
Предлагаем возможность проверить свои знания и потренироваться на скорость в реализации слайдера изображений на React.js с разными вариантами оптимизации. Отсчет пошел!
Как работает интернет: основы архитектуры веб-сетей
Каждому успешному разработчику современного ПО, во многом связанного с веб-сетями, необходимо иметь четкое представление о структуре сети интернет и взаимосвязях между ее компонентами. Помочь в этом и призван этот краткий обзор.
Простая защита от DoS и брутфорс атак
Наиболее типичными и опасными являются DoS(DDoS) и брутфорс атаки. Оба их вида подразумевают ежесекундную отправку тысячи запросов, которые перегружают сервера. Зачем такое позволять? Сегодня...
Движок JavaScript, JIT-компилятор, стек, куча, память, примитивы, ссылки и сборка мусора
Как функционирует JIT-компилятор? Что такое стек и куча памяти? В чем отличие примитивных типов от ссылочных? Представляем общий краткий гайд по основам JavaScript, в котором поговорим о том, как работает один из самых популярных языков программирования “под капотом”.
Как сделать приложение с дополненной реальностью, используя React Native
Введение
Возможно, вас в последнее время тоже, как и меня, заинтересовала постоянно растущая сфера дополненной реальности. В том или ином виде или форме эта технология...
Основы дизайна, которые должен знать каждый креативщик
Обычный поиск в Google по запросу “образовательные онлайн-ресурсы по дизайну” даёт миллионы результатов — вовсе неудивительно, что понимание того, с чего начинать изучение, может показаться дизайнеру-новичку...
Различия между псевдонимами типов и интерфейсами в TypeScript 4.6
Псевдонимы типов и интерфейсы в TypeScript 4.6 очень похожи, но все же у них есть определенные различия и ограничения. Поговорим о том, в каких случаях следует использовать каждый из них.
10 видов шаблонного кода на NextJS
Шаблонный код — это минимальный код многократного использования, который требуется всем приложениям и встречается в каждом из них. Это такой многоразовый «клей» для компонентов.
В...
TypeScript. Что, зачем и как?
Те из вас, кто занимается разработкой на JavaScript, наверняка так или иначе слышали о TypeScript. Если при этом вы не решались попробовать освоить этот...
Компоненты высшего порядка в React
Что такое компоненты и функции высшего порядка и в чем заключаются их преимущества? Представляем вам комплексное руководство по компонентам высшего порядка в React.
Все, что нужно знать о SASS
Что такое SASS и зачем его осваивать? Какие в SASS функциональные возможности, для чего здесь файлы «Partials» и какие есть инструменты для компиляции?
Чистый код JavaScript: обработка ошибок
Обработка ошибок — важная часть любой программы. Зачастую программы сталкиваются с неожиданными значениями, которые нужно правильно обрабатывать.
В этой статье мы рассмотрим, как легко находить ошибки и...
AutoScraper и Flask: создание API для любого сайта менее чем за 5 минут
В этом руководстве мы создадим собственный поисковый API электронной коммерции с поддержкой как eBay, так и Etsy без использования каких-либо внешних API. С помощью AutoScraper и Flask мы можем достичь этой цели менее чем за 20 строк Python кода для каждого сайта.
5 проектов по программированию для начинающих
Забавные и полезные идеи для проектов
Проект 1: автоматический генератор ASCII-графики
ASCII-графика — это вид изобразительного искусства, где при создании картинок используются составленные вместе символы ASCII. Вот...
Отладка с Git
В этой статье мы рассмотрим два метода Git для отладки ошибок в базе кода - blame и bisect. С помощью Git blame описываются детали изменения...
Обработка событий в JavaScript: всплытие, перехват, делегирование и распространение событий
JavaScript поможет сделать веб-приложение интерактивным и отзывчивым. Важно только освоить методы обработки событий, которые заставляют приложения адекватно реагировать на действия пользователей и предотвращают неожиданное поведение.
Как избежать CORS в одностраничных приложениях
За последнее десятилетие применение технологии одностраничных приложений стало обычным явлением при создании веб-приложений. Сегодня во фронтенд-разработке господствуют такие фреймворки, как Angular и Vue, и...
Как создать бессерверное приложение с Netlify и JavaScript
Обучающее руководство для новичков по созданию бессерверных функций с помощью Netlify: настройка проекта, создание приложения и развертывание API.
Как написать переключатель темы на базе файлов cookie с помощью CSS и ванильного JavaScript
Показываем, как с легкостью создать механизм переключения на темную тему всего за пятьдесят две строчки кода.
Создаем темный режим, используя React и Styled Components
React упрощает реализацию функции темного режима, которая порой необходима при просмотре сайтов. Рассмотрим, как ее можно реализовать.
Как получить все неуникальные значения в массиве JavaScript?
Иногда бывает нужно получить все повторяющиеся значения из массива JavaScript.
В этой статье мы рассмотрим способы получения всех неуникальных значений в массиве JavaScript.
Array.prototype.filter
Один из таких...
Руководство по применению паттерна Event Bus в архитектуре React
Подробно разберем паттерн проектирования Event Bus, попрактикуемся в создании и задействуем его в React.
Введение в фронтэнд и бэкэнд – основы веб-разработки
Хотите создать веб-сайт?
Здорово! Создание веб-сайта - плодотворный творческий проект, увлекательный и полезный как для приобретения востребованных навыков, так и отличный способ попробовать себя в новом...
Чистый код на JavaScript: вертикальное форматирование
Форматирование кода в легко читаемый во многом определяет его итоговую чистоту. Не отформатированный как следует код требует больше умственных усилий для понимания.
В этой статье...
10 лучших фреймворков Node.js
Node.js приобрел большую популярность среди разработчиков, которые предпочитают использовать JavaScript для разработки приложений.
Возможность управления клиентскими и серверными сценариями одним и тем же языком привела...
11 сверхполезных советов для JavaScript разработки
1. Преобразование в Boolean с помощью оператора !!
Иногда нам необходимо проверить существование переменной или наличие у нее верного значения. Для подобной проверки вы можете использовать !!...
Найти и обезвредить: утечки памяти в Node.js
Если вы ломаете голову над тем, почему ваше приложение JavaScript преподносит неприятные сюрпризы в виде сильного торможения, низкой производительности, продолжительных задержек или частых сбоев,...
Знакомство с AWS WebSocket
Первая статья из серии изучения WebSocket. В ней вы узнаете, что такое WebSocket, для чего и как он используется, а также познакомитесь с простейшей реализацией подписок и уведомлений.
Чистый код JavaScript - объекты и классы
При написании чистого кода нужно быть осторожным с объектами, классами или конструкторами, которые мы объявляем. Мы не хотим предоставлять данные, которые не должны быть...
Маршрутизация и получение данных в Next.js
В статье мы рассмотрим:
Отрисовку отдельных компонентов по разным маршрутам.Разницу между статической генерацией и генерацией на стороне сервера.Получение данных с помощью getStaticProps.Получение данных и динамическую...
Чистая архитектура фронтенда
Концепции и практики, такие как SOLID, KISS, DRY и DDD, помогут создавать более чистые архитектуры фронтенда. А правила создания компонентов с учетом развития бизнес-логики позволят коду оставаться ожидаемо поддерживаемым.
Основы JavaScript: управление DOM элементами (часть 4)
Часть 1, Часть 2, Часть 3, Часть 4
Изменения в DOM
Давайте теперь рассмотрим, как добавлять, изменять, заменять и удалять узлы из DOM. В частности рассмотрим методы...
Минималистичная конфигурация терминала с возможностью тонкой настройки
Мой терминал настроен очень минималистично. Это просто черный ящик, который сообщает мне полезную информацию. Основное удобство в том, что каждый его аспект имеет собственный...
Разработка и развёртывание приложения машинного обучения: полное руководство
Приложение для прогнозирования COVID-19: от и до
Похоже, коронавирус не спешит уходить из нашей жизни. Но мы можем не только носить маски и мыть руки. Давайте...
Next.js и React.js: что выбрать для проекта
Какой фреймворк - React.js или Next.js - стоит использовать в проекте, чтобы получить максимальную выгоду? Разберем оба фреймворка и определим, какие преимущества дает каждый из них.
Обзор 10 приемов JavaScript для эффективного программирования
Пополни знания JavaScript 10 эффективными приемами и начни использовать его возможности по максимуму.
Настройка современной среды разработки в Windows 10
Вступление
С 90-х годов в качестве основной операционной системы я задействовал то Windows, то различные дистрибутивы Linux. И почти каждый раз использовал обе эти системы,...
Что такое Open Graph и как применять его для веб-сайта?
На то, чтобы наполнять сайт контентом и поддерживать его, уходит много времени. Как удостовериться в том, что контент отображается правильно, когда им делятся в...
Паттерн “Шаблонный метод” и его реализация в JavaScript
Обучающее руководство по работе с паттерном проектирования JavaScript "Шаблонный метод". Автор подробно рассматривает принцип действия шаблона, умело сочетая теорию, наглядность и практику.
10 трендов UI-дизайна в 2021 году
2020 год уже позади. Пора узнать, что готовит нам текущий. Вот небольшой гайд по трендам UI-дизайна этого года.
1. 3D-изображения
3D-изображения все еще актуальны. Особенно сейчас,...
Множества ES6 в JavaScript. Зачем?
Что такое множество?
Это набор уникальных значений — ни одно из них не возникает дважды или более раз. Это единственное ограничение, которое делает множество значений...
Обзор JavaScript на основе диалога с ChatGPT
Предлагаем вам обзор JavaScript, составленный по материалам интервью с ChatGPT. ИИ-модель продемонстрировала свои уникальные возможности, предоставив развернутые естественные ответы на 12 непростых вопросов.
Погружение в unserialize(): больше, чем RCE
Обход аутентификации и внедрение SQL-кода через unserialize() в PHP
Сериализация в PHP через метод unserialize() приводит к появлению уязвимостей, открывающих через RCE (удаленное выполнение кода) доступ...
12 хуков React, которые должен знать каждый разработчик
Используйте эти хуки React, чтобы сэкономить время и повысить свою продуктивность. Некоторые из них реально меняют правила игры.
Как использовать шаблон проектирования “Адаптер” в React
Иногда при работе с React или любым другим инструментом нужно задействовать сторонние библиотеки. Показываем, как обращаться с ними, чтобы сохранять максимальную автономность приложения от подключаемых/отключаемых компонентов.
Шпаргалка по хукам в React
Хуки - это функции, позволяющие оперативно контролировать текущее состояние функциональных компонентов React. Новичкам эта статья поможет разобраться в сложных вопросах, а профессионалам - развеять имеющиеся сомнения.
10 распространенных ошибок UI-дизайнеров
Помните об этих ошибках при разработке своего следующего дизайна.
1. Пренебрежение всеми возможностями
Дизайнеры нередко вводят фичи, которые чрезмерно усложняют процесс разработки и при этом не...
Руководство по созданию настольного приложения в Electron
Если вы занимаетесь веб-разработками, то, вероятно, наслышаны об Electron. Для тех же, кто не в курсе, скажу, что это достаточно противоречивый фреймворк для создания...
4 функциональные концепции, которые следует знать каждому разработчику JavaScript
Функции - мощные инструменты в языке JavaScript. Сегодня поговорим о 4 главных концепциях функционального программирования, которые повысят уровень вашего мастерства.
Объектно-ориентированное программирование для самых маленьких
Вы когда-нибудь замечали, что на собеседованиях задают одни и те же клишированные вопросы?
Уверен, вы поняли, что я имею ввиду.
Ну вот, к примеру:
Кем вы видите...
Элементы управления выбором в пользовательском интерфейсе
Элементы управления выбором уже давно присутствуют в пользовательских интерфейсах, поэтому у пользователей выработались определённые и весьма серьезные ожидания от них. Вот простая шпаргалка, которой...
Отображение нативных всплывающих окон с помощью API уведомлений JavaScript
API уведомлений позволяет отображать всплывающие окна как нативные уведомления на рабочем столе или на экране мобильного телефона. Функциональность варьируется от платформы к платформе, но,...
Разбор позиционирования в CSS
Понять, как работает свойство position в CSS может оказаться весьма запутанным делом для новичка.
Я помню, как испытывал свою удачу играя в CSS-рулетку, использовал разные...
Лучшие библиотеки React 2024 года
В этом руководстве собраны самые востребованные библиотеки React 2024 года. Они помогают настраивать и оформлять приложения, управлять состоянием и получать данные, выполнять маршрутизацию, аутентификацию и многое другое. С ними вы сможете создавать полноценные мобильные и веб-приложения.
5 способов уменьшения размера пакетов JavaScript
Громоздкие пакеты мешают продуктивности приложения? Решение есть. Сегодня вы узнаете 5 методов оптимизации приложения путем уменьшения размера пакетов JavaScript.
4 секрета читаемого и производительного кода JavaScript
JavaScript настолько гибкий язык программирования, что дает вам возможность достигать целей разными способами. При этом существует ряд принципов и рекомендаций, соблюдение которых позволит улучшить...
6 шагов по созданию расширения Chrome, которое можно продать
Простой способ организации пассивного заработка без особых хлопот. Минимальный комплект необходимых инструкций прилагается.
Индексирование коммитов с Git Add Patch
Для разработчика нет, наверное, ничего более увлекательного, чем запуск нового проекта. Начинается он с разработки доменной модели и планирования логики предметной области. Затем происходит...
19 лучших инструментов прототипирования для дизайнеров UX/UI
Прототипирование выполняет роль чертежа и позволяет разработчикам просмотреть полный обзор сайта или приложения до начала его создания.
Это необходимый шаг в дизайнерском процессе, поскольку он...
Хватит везде использовать ===
Многие разработчики постоянно используют === вместо ==, но почему?
Большинство из просмотренных мной обучающих программ предполагают, что поскольку слишком сложно предугадать приведение типов в JavaScript,...
Динамические заголовки страницы в Angular
Angular — это MVC-фреймворк для создания одностраничных приложений в Javascript.
В этой статье мы узнаем, как установить заголовок браузера (страницы/документа) для всего приложения и как изменить заголовок...
Руководство по принципам моушн-дизайна
Моушн-дизайн отличается особым воздействием на пользовательский опыт цифровых продуктов. Однако, если элементы интерфейса не демонстрируют основные принципы моушн-дизайна, пригодность пользовательского опыта стоит под вопросом....
Как уменьшить размер компонента React: 3 профессиональных приема
Одними из основополагающих элементов в React являются компоненты. Поэтому для разработчика очень важна оптимизация их размера. Рассмотрим, как это можно сделать.
Разоблачение мифов о сеньоре
Хватит этих историй о том, “как стать старшим разработчиком”
Возможно, мой мозг избирательно раздражается, видя, как люди ловят на попутном ветре успех оригинальной статьи. Или,...
ИИ: решение неверно поставленных задач
В 2008 году восходящие звезды Кремниевой долины собрались вокруг стола в конференц-зале. В будущем все они станут титанами технологического мира, однако в то время...
Как выполнять выражения и процедуры PL/SQL в Python
Расскажем о том, как выполнять процедуры и выражения PL/SQL в Python.
TypeScript. Что, зачем и как?
Те из вас, кто занимается разработкой на JavaScript, наверняка так или иначе слышали о TypeScript. Если при этом вы не решались попробовать освоить этот...
Моделирование данных в мире современного стека данных 2.0
Сравнивать моделирование данных со стеком данных - все равно что уподоблять автомобили интеллектуальным навигационным системам. Предлагаем на практических примерах убедиться в том, что технологии современного стека данных позволяют аналитикам успешно вести исследования без моделирования.