Стратегии рендеринга, которые должен знать каждый React-разработчик
Изучите 9 стратегий рендеринга, оценив преимущества и недостатки каждой из них. Используя эти стратегии, вы сможете создавать удобные веб-приложения, которые будут хорошо работать как для пользователей, так и для поисковых систем.
WebSocket для получения автоматически обновляющихся криптографических данных
WebSocket - крайне важный инструмент для получения постоянно обновляющихся данных. Знакомство с ним пригодится тем, кому нужна самая свежая информация, будь то текущие ставки, цены на акции, курсы криптовалют или обмен сообщениями в режиме реального времени.
Сравниваем REST, GraphQL и gRPC
Как лучше организовать обмен сообщениями между сервером и клиентом в приложении? Проведем детальное сравнение 3 наиболее популярных технологий разработки API.
Разбор позиционирования в CSS
Понять, как работает свойство position в CSS может оказаться весьма запутанным делом для новичка.
Я помню, как испытывал свою удачу играя в CSS-рулетку, использовал разные...
Множества ES6 в JavaScript. Зачем?
Что такое множество?
Это набор уникальных значений — ни одно из них не возникает дважды или более раз. Это единственное ограничение, которое делает множество значений...
Как использовать шаблон проектирования “Адаптер” в React
Иногда при работе с React или любым другим инструментом нужно задействовать сторонние библиотеки. Показываем, как обращаться с ними, чтобы сохранять максимальную автономность приложения от подключаемых/отключаемых компонентов.
WebAssembly на Golang с нуля
Разработаем небольшой проект для WebAssembly на Go. Разберемся, как он работает, и научимся создавать и запускать его в браузере всего одной командой.
4 секрета читаемого и производительного кода JavaScript
JavaScript настолько гибкий язык программирования, что дает вам возможность достигать целей разными способами. При этом существует ряд принципов и рекомендаций, соблюдение которых позволит улучшить...
10 трендов UI-дизайна в 2021 году
2020 год уже позади. Пора узнать, что готовит нам текущий. Вот небольшой гайд по трендам UI-дизайна этого года.
1. 3D-изображения
3D-изображения все еще актуальны. Особенно сейчас,...
10 распространенных ошибок UI-дизайнеров
Помните об этих ошибках при разработке своего следующего дизайна.
1. Пренебрежение всеми возможностями
Дизайнеры нередко вводят фичи, которые чрезмерно усложняют процесс разработки и при этом не...
6 шагов по созданию расширения Chrome, которое можно продать
Простой способ организации пассивного заработка без особых хлопот. Минимальный комплект необходимых инструкций прилагается.
Динамические заголовки страницы в Angular
Angular — это MVC-фреймворк для создания одностраничных приложений в Javascript.
В этой статье мы узнаем, как установить заголовок браузера (страницы/документа) для всего приложения и как изменить заголовок...
Отображение нативных всплывающих окон с помощью API уведомлений JavaScript
API уведомлений позволяет отображать всплывающие окна как нативные уведомления на рабочем столе или на экране мобильного телефона. Функциональность варьируется от платформы к платформе, но,...
Хватит везде использовать ===
Многие разработчики постоянно используют === вместо ==, но почему?
Большинство из просмотренных мной обучающих программ предполагают, что поскольку слишком сложно предугадать приведение типов в JavaScript,...
Решение головоломки судоку на JavaScript с помощью хэш-карт и рекурсий
Если вы погружены в мир судоку, то наверняка ищете варианты ускоренного решения задач по программированию. Предлагаем ознакомиться с одним из них. Использование в нем хэш-карт и рекурсий значительно ускоряет решение головоломки.
Руководство по принципам моушн-дизайна
Моушн-дизайн отличается особым воздействием на пользовательский опыт цифровых продуктов. Однако, если элементы интерфейса не демонстрируют основные принципы моушн-дизайна, пригодность пользовательского опыта стоит под вопросом....
Совместное использование компонентов React с Webpack 5
Поработаем с двумя приложениями и научимся совместно использовать компоненты React между ними. А поможет нам в этом важном деле плагин Webpack 5 Module Federation.
Переключатель темного режима в веб-приложении
Краткая инструкция по добавлению в приложение функции подстройки под цветовую схему системы, а также переключателя для изменения этой схемы внутри самого приложения.
5 способов уменьшения размера пакетов JavaScript
Громоздкие пакеты мешают продуктивности приложения? Решение есть. Сегодня вы узнаете 5 методов оптимизации приложения путем уменьшения размера пакетов JavaScript.
7 визуальных элементов в дизайне
Визуальные элементы являются строительными блоками искусства и дизайна. Всего существует 7 визуальных элементов: линия, фигура, цвет, насыщенность, форма, текстура и пространство. В этой статье...
Индексирование коммитов с Git Add Patch
Для разработчика нет, наверное, ничего более увлекательного, чем запуск нового проекта. Начинается он с разработки доменной модели и планирования логики предметной области. Затем происходит...
Объектно-ориентированное программирование для самых маленьких
Вы когда-нибудь замечали, что на собеседованиях задают одни и те же клишированные вопросы?
Уверен, вы поняли, что я имею ввиду.
Ну вот, к примеру:
Кем вы видите...
Как создать трекер расходов с SheetJS
Научимся создавать и управлять электронными таблицами с помощью JavaScript. Попрактикуемся в процессе создания трекера расходов.
Как уменьшить размер компонента React: 3 профессиональных приема
Одними из основополагающих элементов в React являются компоненты. Поэтому для разработчика очень важна оптимизация их размера. Рассмотрим, как это можно сделать.
REST API CRUD в Laravel 11 с лучшими практиками
Поэтапно создадим приложение: модель с миграцией, интерфейс, классы и ресурс. Привяжем интерфейс к реализации, проверим запросы, подготовим репозиторий, файл с маршрутами Api и запустим проект.
Обработка ошибок в TypeScript без try/catch
В отличие от TypeScript, в Go и Rust всегда известно, где возникнет ошибка. А можно ли сделать обработку ошибок в TypeScript такой же, как в Go и Rust, без использования try/catch? Предлагает простое решение.
5 ведущих веб-фреймворков 2023 года
Предлагаем обзор фреймворков, которые формируют ландшафт веб-разработки в 2023 году. С их помощью можно создавать захватывающие и отзывчивые веб-приложения.
22 CSS-свойства для позиционирования
В статье пойдет речь о нескольких редко упоминаемых в технической литературе свойствах CSS. Тем не менее их использование повлечет за собой повышение скорости и...
Что такое Deno и заменит ли он NodeJS?
Для тех, кто не совсем в теме, Deno — это детище Райана Даля, ставшего известным благодаря созданию Node.js, который вам, наверняка, знаком. Значит ли это, что...
7 правил ESLint, рекомендуемых для проектов TypeScript/React
Хотите, чтобы на выполнение и проверку кода уходило меньше времени и сил? Ознакомьтесь с 7 правилами ESLint, рекомендуемыми для проектов TypeScript/React. Они существенно улучшат код и сэкономят ваше время.
React Query - залог эффективных запросов
В статье будут рассмотрены:
случаи использования React Query; простые запросы fetch с помощью пакета React Query; поиск элементов через API по ID; пагинация; мутации.
Случаи использования React Query
Традиционный метод fetch() отлично...
Веб-скрапинг с помощью Node.js — Часть 1
В этой статье я расскажу о том, как использовать Node.js, чтобы выполнить быстрый и эффективный веб-скрапинг для одностраничных приложений. С помощью веб-скрапинга можно собирать...
Великолепная десятка библиотек SVG иконок
Как-то раз я провел опрос на Reddit и обратился к коллегам-разработчикам с простой просьбой: поделиться названиями любимых библиотек иконок. Идея нашла живой отклик у...
Автоматизация создания стикеров с помощью веб-скрейпинга и обработки изображений в Python
Познакомьтесь с автоматизированным способом создания стикеров для мессенджеров. Краткая пошаговая инструкция поможет вам быстро сгенерировать стикерпак в Telegram.
Что значит this в JavaSсript?
Значение this — одна из самых запутанных составляющих JavaSсript. this может принимать различные значения в зависимости от того, где располагается.
В этой статье мы рассмотрим, где используется...
Три библиотеки для удаления неиспользуемого CSS
В обзоре состояния CSS на 2020 года был раздел, посвященный служебным библиотекам. Речь в нем шла о StyleLint, Purge CSS и PurifyCSS. Две из...
Создание приложения для распознавания лиц с помощью Tensorflow.js
Распознавание лиц - передовая технология, используемая сегодня практически повсеместно. Рассмотрим поэтапный процесс создания приложения, способного обнаруживать лицо человека.
Итераторы и генераторы в JavaScript
Предлагаем полное руководство по итерационным механизмам JavaScript. Итераторы и генераторы позволят эффективно получать и обрабатывать данные, сделают кодовую базу более управляемой и масштабируемой.
Мы снова написали самый быстрый JS-фреймворк UI
Я выработал четкий алгоритм, который применяю практически ко всем видам возникающих передо мной задач.
Шаг 1. Определить задачу.
Этот этап нередко оказывается самым длительным, потому что...
Введение в Веб-безопасность
Нет такого понятия, как быть защищенным от взлома на 100%. Если вам скажут обратное, то это не правда.
Как профессионально использовать сопоставимые типы TypeScript
Хотите освоить сопоставимые типы TypeScript и понять, как работают встроенные в TypeScript типы утилит? Этот краткий обзор, подкрепленный анимационными вставками, поможет разобраться во всем этом.
29 инструментов и сайтов для дизайнера, о которых вы никогда не слышали
Инструментов, плагинов, сайтов и ресурсов в индустрии дизайна хоть отбавляй, и все они обещают сделать ваш рабочий процесс более продуктивным, а вас самих — ...
Изучаем WebAssembly с помощью Rust
Внимание: с этой статьёй вы не освоите Rust, зато сможете быстро разобраться и приступить к работе с WASM, используя замечательный инструментарий wasm-pack и интуитивно...
Как настроить мощный API на Nodejs, GraphQL, MongoDB, Hapi, и Swagger. Часть 1
В разделении фронтенда от бэкенда есть множество преимуществ:
Самая значительная причина, почему API популярны, в том, что API позволяют получать данные из любого источника:...
ТОП-25 библиотек React 2021–2022: новые, полезные, но малоизвестные пакеты JavaScript
React Content Loader, React Filepond, React Select, React Query, React Hook Form, React Infinite Scroller и другие библиотеки JavaScript
Делаем Node.js быстрым: инструменты, техники и советы для создания эффективных серверов на Node.js Часть...
Node очень универсальная платформа, однако именно создание сетевых процессов одно из основных её применений. В этой статье мы сосредоточимся на профилировании наиболее распространённого из...
5 советов о браузерных инструментах разработчика
Инструменты разработчика из веб-браузеров стали незаменимыми для выполнения работы веб-программистов. С годами разработчики браузеров добавляли все больше и больше инструментов, призванных упростить работу. У...
Введение в регулярные выражения в JavaScript
Введение
Первым делом необходимо выяснить, что такое регулярные выражения. Регулярные выражения — это способ описания шаблона или правила. Их можно использовать, чтобы проверить, есть ли в строке...
Как я самостоятельно освоила Tableau
Tableau - это высококлассное программное обеспечение для анализа и визуализации данных. Хотите изучить этот полезный продукт? Профессиональный аналитик данных поделится с вами опытом освоения Tableau с нуля.
React Native: полное руководство по созданию виджета для домашнего экрана для iOS и Android
Виджеты - это инструменты, которые делают домашний экран более привлекательным и предоставляют полезную информацию. Рассказываем, как создавать виджеты для Android и iOS и как внедрить их в приложение на React Native.
Cначала Vue, потом React: совет начинающим разработчикам
По мнению автора, React категорически не подходит начинающим разработчикам, тогда как Vue является для них идеальным вариантом. В поддержку данного утверждения выдвигаются разные аргументы. Будем разбираться!
Почему стоит использовать AVIF вместо JPEG, WebP, PNG и GIF в 2024 году
Обсудим один из новейших графических форматов AVIF. На чем основана эта ультрасовременная технология? Каковы ее преимущества и проблемы? Почему, несмотря на возможные компромиссные решения, она значительно превосходит старые форматы JPEG, WebP, PNG и GIF?
Продвинутые техники PHP: от шаблонов проектирования до тестирования. Часть 1
Раскроем нюансы шаблонов проектирования, эффективных взаимодействий с базами данных, защиты приложений от угроз безопасности и повышения производительности посредством оптимизации. По всем темам разберем примеры.
Введение в WebAssembly (WASM)
Хотите разрабатывать высокопроизводительные веб-приложения, выполняющие обработку видео, 3D-рендеринг, мультимедийные игры и криптографические вычисления? WebAssembly поможет легко справиться с этой задачей.
Дуэт Markdown и JavaScript (mdjs) - залог отличной документации
Каждому совместно используемому коду следует прописывать документацию, чтобы отразить его идею и назначение. Пользователи должны отчетливо понимать, что они используют, для чего и как.
В...
Да не нужен вам фреймворк JavaScript!
Не устали ли мы от вездесущих фреймворков JavaScript? Возможно, что мы не обращаем внимание на эффективность и пакетные данные от наших пользователей?
Вернёмся в эпоху jQuery
Помните...
Zod — гарант безопасности кода TypeScript
TypeScript может допускать ошибки при работе с неизвестными внешними данными. Zod позволяет сделать его более безопасным, предотвращая такие ошибки. Ознакомьтесь с этим инструментом, чтобы с его помощью проверять непредсказуемые данные, такие как вводимые формы или ответы API.
3 вида циклов for в JavaScript
Каждый знает хотя бы один вид цикла for. Это классика, и они есть почти в каждом языке. В JavaScript есть три вида циклов (или...
Refs в React: от доступа к DOM до императивного API
React достаточно удобный инструмент для создания веб-приложений. Еще больше его возможности расширяют рефы (Ref или Reference), действующие как ссылки на элементы кода React и упрощающие решение нестандартных задач.
Функции Java 15: скрытые и запечатанные классы, сопоставление шаблонов и текстовые блоки
Java 15 — это еще один функциональный релиз, таким будет и 16. Следующий LTS (релиз с долгосрочной поддержкой) запланирован как Java 17, и выйдет...
Как реализуется пользовательское взаимодействие на страницах JavaScript?
Рассмотрим процесс регистрации на интернет-странице изнутри: что происходит при нажатии на кнопку регистрации, появлении формы, ее заполнении и отправке пользователем, а также при перенаправлении на страницу авторизации и получении полного доступа к странице. Узнаем, куда поступает эта информация и как страница распознает пользователя, когда он снова на нее заходит.
Роль сервисной сетки и шлюзов API в архитектуре микросервисов
Наглядно рассмотрим разницу между сервисными сетками и API-шлюзами и узнаем, когда лучше применять ту или иную технологию - или обе совместно.
Разработка масштабируемых фронтендов с помощью Feature-Sliced Design
Предлагаем пошаговое руководство по созданию современных фронтендов с помощью Feature-Sliced Design и Bit. Использование этого подхода позволит организовать приложение в четко структурированном виде, быстро ориентироваться в нем и лучше понимать его специфику.
Супербыстрый веб-фреймворк Astro: подробный обзор
Обучающее руководство по работе с веб-фреймворком Astro, предназначенным для создания быстрых сайтов с большим количеством контента. Рассмотрим характеристики, установку, запуск Astro и разберем составляющие его исходного каталога: компоненты, макеты, страницы и директивы.
6 супер команд терминала, или как стать мастером продуктивности
Пройдитесь по /usr/bin большинства систем Linux или macOS, и вы найдете сотни, если не тысячи, предлагаемых команд. Количество доступных опций кому угодно вскружит голову....
ReactJS, Angular5 и Vue.js — какой фреймворк выбрать в 2018 году?
Некоторое время назад мы опубликовали статью, в которой сравнили Angular 2 и React. В ней мы обсудили плюсы и минусы этих фреймворков и предположили,...
Как выглядит нескучный модульный лендинг React
Рассмотрим красивый шаблон лендинга с качественным кодом и улучшенной доступностью. Разберемся, что делает его структурированным, самодокументируемым и легко настраиваемым.
Frontend Masters: принципы SOLID в React/React Native
Принципы SOLID кажутся простыми, но их важность в программировании трудно переоценить. Разберем каждый из принципов SOLID на конкретных примерах и покажем их практическую ценность.
Rust для разработчиков JS
Rust не вызвал у меня большого интереса, когда я впервые прочитал о нём. Это было около двух лет назад. Я работал веб-разработчиком, программировал в...
Почему разработчики JavaScript используют инструменты на Rust
JavaScript - удобный язык программирования, который пользуется популярностью у многих разработчиков. Однако иногда его медлительность приводит к серьезным расходам. Подобных проблем можно легко избежать, если использовать более скоростной инструментарий.
Создаем собственный блог с помощью Next.js и Strapi
В этой статье вы узнаете:
о назначении CMS;как использовать Strapi;как с помощью Next.js и Strapi создавать статические сайты.
Введение
Предположим, что вы создаете блог при помощи Next.js....
Интеграция ChatGPT с Node.js: руководство для начинающих
ChatGPT-3 позволяет добавить в приложение Node.js такие функции, как ответы чат-бота на вопросы пользователя, автоперевод, автореферирование и генерация связных текстов. Предлагаем пошаговое руководство по интеграции ChatGPT с Node.js.
8 советов по улучшению качества кода
Качественный код — это командная работа, вне зависимости от должности. Менеджер, разработчик и тестировщик должны вместе работать над созданием высококачественного кода.
Ниже представлен список методов...
Новичок! Ты должен был выучить Git ещё вчера
Мой совет номер один для новичков: изучайте Git и выкладывайте код на GitHub каждый день.
Я ежедневно получаю сообщения, письма, твиты от тех, кто только...
Что такое HTTP/3 и зачем он нужен?
При изучении интернета и стоящих за ним технологий вы можете встретить термин HTTP. HTTP или Hypertext Transfer Protocol (протокол передачи гипертекста) является столпом всемирной...
Психология цвета в UX
Введение
Считается, что цвет — это необходимый визуальный элемент, который легко запоминается. Каждый раз, когда мы открываем глаза, различные внешние факторы охватывают наше поле зрения....
Прогрессивные веб-приложения для начинающих
Концепция прогрессивных веб-приложений набирает популярность, однако многие не знакомы с их особенностями. Рассказываем, что такое PWA, из каких компонентов оно состоит, а также, как создать его самостоятельно
Как создать цифровые часы с помощью Moment.js
Предлагаем руководство по созданию часов в браузере с использованием только Vanilla JavaScript и библиотеки Moment.js.
6 полезных библиотек JavaScript
Рассмотрим несколько полезных для разработчика библиотек JavaScript: GSAP, Underscore, Chart.js, D3.js, Lodash и fullPage.js. Они упростят и ускорят создание различных проектов.
Принципы SOLID в React: так ли все с ними гладко?
Принципы SOLID принято описывать только в положительном свете. Поэтому многие нюансы часто упускаются из виду. Сегодня поговорим о том, применимы ли вообще принципы SOLID в React-приложении и какими ключевыми особенностями обладает каждый из них.
Var, Let, Const - в чем разница?
ES2015 (ES6) принес с собой много новых интересных фич. Теперь на дворе 2020 год, и можно предположить, что многие JavaScript-разработчики уже познакомились с этими...
PHP: создание и публикация пакета composer
Научимся публиковать пакет официально. Пройдем все пошагово: от его подготовки до размещения на GitHub и регистрации в Packagist.
Алгоритм JavaScript: Array.forEach()
Метод forEach() выполняет функцию обратного вызова для каждого элемента в массиве. Что это значит? Метод forEach вызывает функцию, находящуюся вне forEach и имеющую дело...
Искусство манипулирования массивами JavaScript: исследование метода Array.prototype.filter()
Говорят, что "дьявол кроется в деталях". Так почему бы не поискать его в недрах JavaScript? Совершите увлекательное путешествие в волшебное закулисье метода filter.
Топ-7 библиотек React
Предлагаем краткий обзор 7 лучших библиотек React, о которых должен знать каждый JavaScript-специалист и React-разработчик, - от Create React App до React Virtualized.
Визуализация данных и веб-отчёты в Angular
Недавно я столкнулась со следующей проблемой: мне нужно было найти полностью настраиваемые веб-компоненты, с которыми несложно взаимодействовать и которые могут использоваться как встроенные BI-инструменты...
Топ-10 антипаттернов при использовании микросервисов
Разделение на микросервисы доказало свою эффективность в практике программирования. Но всегда ли они работают так, как ожидается? Рассмотрим 10 антипаттернов при использовании микросервисов и способы их избежания.
Основы JavaScript: управление DOM элементами (часть 2)
Часть 1, Часть 2
Получаем доступ к DOM элементам
В данном разделе мы посмотрим на методы, которые помогут получить доступ к DOM элементам: getElementById(), getElementsByClassName(), getElementsByTagName(), querySelector()...
Как использовать JavaScript и Node.js, чтобы сразиться с драконом в игре Fight the Dragon?
Выдалась свободная минутка? Почему бы не устроить эпичный баттл с драконом? Наше пошаговое руководство поможет выйти из боя победителем!
Создание базовых 3D-сцен с помощью Three.js
Продуманная 3D-графика радует глаз и вдохновляет на новые креативные разработки. Сегодня мы попробуем создать 3D-сцену, используя библиотеку Three.js.
7 полезных атрибутов HTML, о которых не все знают
Каждый веб-разработчик должен иметь навыки использования HTML. Без знания этого языка нельзя стать стать настоящим профессионалом. Любой сайт в интернете создан на основе HTML,...
Организация таблиц стилей: самые свежие рекомендации
В процессе обучения совместному использованию HTML и CSS мой инструктор в Devslopes показал мне отличный способ организации CSS для крупных проектов. Конечно, ничто не...
3 способа визуализации больших списков в Angular
Мы рассмотрим следующие техники: виртуальная прокрутка (с использованием Angular CDK), ручной рендеринг и прогрессивный рендеринг. Несмотря на то, что для их реализации мы будем...
Дата и время в JavaScript
Учимся работать с датой и временем в JavaScript: разбираемся с определением и способом создания объекта Data, его методами и форматами вывода.
Обработка ошибок в React Hooks
Обработка ошибок в Hooks довольно проста. В этой статье мы продемонстрируем, как в React Hooks происходит обработка ошибок. Для этого нам нужно создать такой...
Платформы Angular в деталях. Часть 1. Что такое платформы Angular?
Инфраструктура для разработки приложений Angular была задумана как платформенно-независимая технология (далее по тексту — фреймворк). Такой подход позволяет запускать приложения на Angular в разных средах: в...
Javascript и функциональное программирование: Введение
Я всегда был нацелен на результат. Меня не привлекают псевдоинтеллектуальные концепции, причудливая терминология и пиар. Вместо этого, я всегда стремлюсь к тем инструментам и...
Введение в Web Share API
С каждым днем новые технологии сокращают разрыв между вебом и нативными приложениями. Один из таких примеров — прогрессивные веб-приложения, которые добавили в Интернет множество...
Как развернуть веб-приложение Streamlit в сети: три простых способа
Рассмотрим несколько вариантов развертывания веб-приложений Streamlit в облаке, которые позволяют легко, быстро, а также бесплатно делиться проектами с другими пользователями.
Создание предметно-ориентированных микросервисов
Определение
Приставка “микро” в термине микросервисы является не только показателем размера сервиса. При переходе на архитектуру микросервисов команды стремятся повысить свою подвижность, а именно получить...
15 расширений VSCode, необходимых программистам в 2021 году
Почему VSCode столь популярен?
Visual Studio Code быстро завоевал популярность среди разработчиков. Он оказался наиболее распространенной средой разработки по результатам опроса Stack Overflow 2019 года....
Как работать с большими наборами данных в Python: 3 способа
Нехватка памяти ПК при обработке больших данных - большая проблема для специалистов по науке о данных. Предлагаем узнать 3 оптимальных способа ее решения.
Топ-15 лайфхаков для работы с Python
Python, без сомнения, является одним из самых популярных языков программирования. Простой и легкий в освоении, он завоевал признание многочисленного сообщества.
Python — “самый мощный язык,...
Совместное использование кода в приложениях React и React Native
Хотите существенно сократить свои усилия и улучшить пользовательский опыт? Воспользуйтесь руководством по совместному использованию в веб- и мобильных приложениях общих элементов кода и дизайна в качестве зависимостей.
Сравнение производительности ввода/вывода: C, C++, Rust, Golang, Java и Python
Сравниваем, как различные языки, такие как C, C++, Rust, Golang, Java и Python, обрабатывают данные на вход/выход. Также попробуем выяснить, может ли Rust обрабатывать высокопроизводительные промисы.