Как создать библиотеку компонентов для совместного использования
Пример
Прежде чем начать, рассмотрим пример того, что должно получиться в результате. Здесь можно найти библиотеку Semantic-UI-React. Этот репозиторий также доступен как пакет на NPM.
С...
Как работает JavaScript Proxy
Раскройте для себя возможности JavaScript Proxy, углубившись в настройку операций с объектами и контроль над ними. Используя JavaScript Proxy, вы будете создавать надежные и безопасные приложения.
Как создать эффективную систему логирования с использованием Aspect и Spring Cloud Sleuth
Логирование крайне важно для оперативного отслеживания ошибок в приложении и установления причины этих ошибок. Разберемся, как без особых усилий настроить фреймворк для логирования в приложении Spring Boot.
Я разработал и запустил MVP продукт за 5 дней
За последний год я запустил несколько продуктов, каждый из которых потребовал от 3 до 6 месяцев от момента возникновения идеи до запуска. В то...
Делаем Node.js быстрым: инструменты, техники и советы для создания эффективных серверов на Node.js Часть...
Предыдущие части: Часть 1, Часть 2
Оптимизируем
Теперь, когда мы обнаружили проблемные области, давайте посмотрим, можем ли мы сделать сервер быстрее.
Лёгкий и быстрый способ
Давайте вернем код слушателя server.on (вместо...
Переключение между табличным и списковым представлением в Vue.js
Представляйте любой массив данных и переключайтесь между визуализациями
Vue.js — это простой в изучении, быстрый, легковесный и очень перспективный фреймворк.
В данной статье я расскажу о создании Vue...
Создание приложения-планировщика в React с Easy Peasy и Ant Design
Обучающее руководство по созданию приложения-планировщика React при непосредственном участии библиотек Easy Peasy и Ant Design.
React SPA SEO с Prerender.io
Как правильно настроить SEO для JavaScript-приложения? Рассказываем про Server Side Rendering, Client Side Rendering, Dynamic Rendering и Prerender.io.
Точки останова CSS в Material UI
В мире веб-дизайна точки останова CSS помогают создавать более надежный, отзывчивый веб-сайт, определять, когда показывать или скрывать определенные элементы, изменяя размер компонентов или растягивая...
Flutter против React Native: правильный выбор может определить успех вашего проекта
В среде разработчиков все чаще сопоставляются Flutter и React Native. Оба популярных инструмента являются мультиплатформенными, оба способны быстро и легко создавать мобильные приложения.
Тем не...
10 CSS-однострочников для преобразования веб-приложения
Эти 10 CSS-однострочников позволят изменить внешний вид и поведение веб-приложения всего за несколько минут! Они помогут справиться с такими задачами, как повышение адаптивности изображений, отмена float-элементов, создание пользовательских стилей флажков и многими другими.
Версионирование независимых UI-компонентов
Большинство компонентов версионируются как часть проекта (например, component-library), что противоречит концепции создания модульных UI-приложений. Например, чтобы использовать слайдер-компонент, нужно внедрить в приложение полную библиотеку...
Как развернуть приложение на Vercel
Быстро, доступно и легко! О чем идет речь? О развертывании приложения на платформе Vercel. Поделимся успешным практическим опытом и подробными пошаговыми инструкциями.
Будьте благодарны за массивы JavaScript: сравнение с языком C
Изучение того, как массивы и простые методы типа .push() работают в языках более низкого уровня, может значительно углубить понимание JavaScript и вызвать признательность за его чудо-массивы.
Как повысить SEO-рейтинг сайта с помощью Next.JS
Хотите, чтобы ваши приложения успешно проходили ранжирование во всех поисковиках? Next.js поможет достичь отличных SEO-результатов, а заодно получить бесплатный SSL-сертификат.
Разделение пользовательского интерфейса и логики в React: чистый код с безголовыми компонентами
Ознакомьтесь с headless-подходом в React-разработке. Он позволит создавать более удобный для сопровождения и многократного использования код, сокращая его избыточность и потенциальные ошибки.
Новые функции в TypeScript
Введение
TypeScript — это сильно типизированный, объектно-ориентированный и компилируемый open-source язык, разработанный и поддерживаемый компанией Microsoft. Он был создан в целях привнесения статических типов в современный JavaScript....
Rust как часть микросервисной архитектуры
Как включить Rust в приложение и использовать преимущества дифференцированной масштабируемости? Реализуем и развертываем в докере 3 микросервиса. Внутри - весь код и ссылка на репозиторий.
Создание эффектов при прокрутке
В этом руководстве мы поговорим о том, как создать эффект открывающегося блока при прокрутке. Эффект состоит из сплошного цветного блока, который уменьшается в размере,...
Почему написание собственного кода делает вас лучшим разработчиком
На днях я проводил собеседование на позицию senior разработчика JavaScript. Мой коллега, тоже присутствовавший на собеседовании, попросил претендента написать функцию, которая будет выполнять HTTP-вызов...
8 полезных функций Angular, о которых стоит знать
Angular - достаточно большой и сложный фреймворк. В нем можно постоянно находить новые возможности. Представляем подборку полезных функций Angular, о которых вы, возможно, не слышали.
Перехват ошибок в компоненте React
Поговорим о механизме перехвата ошибок из компонента и отображении резервного компонента («ErrorComponent») в случае возникновения ошибки при отображении компонента.
В статье речь пойдёт о следующих...
От джуниора до мидла: 7 советов для фронтенд-разработчиков
Обычно путь от новичка к разработчику среднего уровня занимает несколько месяцев. Можно ли его сократить? Что нужно делать в этот "переходный период"? Чему уделить особое внимание, а на чем не стоит зацикливаться? Воспользуйтесь рекомендациями опытного разработчика.
API Chrome: 7 новинок
1. Web Bundles
Этот API предоставляет возможность объединения веб-сайта в один файл. Более того, этим файлом можно поделиться через любое средство (Bluetooth или Wi-Fi Direct),...
Как создать галерею изображений с помощью Gatsby и Cloudinary
Настроим от начала до конца бессерверное веб-приложение с использованием Git и системы непрерывной интеграции.
Стоит ли писать код Dart на стороне сервера?
Как настроить сервер при создании приложения на Flutter? Задействуем фреймворк gRPC и разберем преимущества и недостатки Dart.
Какой метод глубокого клонирования в JavaScript наиболее эффективный — исследование
Чтобы выделить "победителя" среди методов глубокого клонирования в JavaScript, необходимо протестировать каждый из них. Предлагаем результаты серии модульных тестов.
Отзывчивость – это очень просто с CSS-переменными
Если вдруг до этого вы ни разу не слышали о CSS-переменных, то поясним, что это новая функция CSS, благодаря которой в таблице стилей вы...
Воссоздание графика вклада GitHub с помощью Flask и Google Sheets
Я помешана на продуктивности. Раньше я следила за выполнением своих задач каждый день с помощью ручки и бумаги. Затем, когда задачи стали более сложными,...
Веб-доступность: навигация с клавиатуры
Введение
Раскладка QWERTY появилась около 150 лет назад, а с 40-х годов XX века клавиатурами обзавелись и компьютеры. И пусть клавиатуры — это теперь не...
Как запустить сайд-проект за 10 дней
Инструменты для завершения процесса: Идея -> Дизайн -> Разработка -> Развертывание
Как и у многих людей, у меня нет недостатка в идеях для приложений, которые...
Эти маленькие сниппеты кода изменили мир
Всего несколько коротких строк кода способны оказать огромное влияние на развитие интернет-технологий по всему миру. Вот несколько примеров.
Новые правила дизайна интерфейсов в Google
На собственной ежегодной конференции Google I/O компания представила первые изображения будущего дизайна интерфейсов под названием “Material You”. Такие радикальные изменения приходят на смену концепции...
Интерфейсы с вкладками без JavaScript
Все больше и больше хитрых интерфейсных функций опираются на JavaScript, из-за чего создают проблемы доступности. Даже с учетом того, что на сегодняшний день JS...
Битва трендов: React vs Angular vs Vue
Подождите, по-моему, я уже писал на эту тему… Да, но слишком многие жаловались, что я так и не сказал, что же лучше. Поэтому в...
Как обеспечить работу современного кода JavaScript во всех браузерах
После введения ES6 в старых браузерах и JS-движках возникают проблемы с новыми функциями и синтаксическими конструкциями. Предлагаем простейшие способы разрешения этих проблем.
Как настроить Next.js на TypeScript, чтобы получить оценку в 100% от Google Lighthouse и...
Создаем прогрессивное веб-приложение с помощью Next.js и пытаемся достичь 100-процентной оценки от Google Lighthouse и Vercel Analytics. Проходим весь путь оптимизации проекта Next.js, который будет написан на TypeScript.
Адаптивный фавикон для современных веб-приложений на React
Адаптивные и динамические фавиконы позволяют React-проекту выделиться из общей массы и повысить качество пользовательского опыта. Рассказываем о том, как создавать SVG-фавиконы, а также о преимуществах их использования.
Как сымитировать UDP-флуд у себя на компьютере
Внимание: нижеследующее руководство предназначено исключительно для обучающих целей. Выполняйте атаку только на компьютерах, которые принадлежат вам.
UDP-флуд — это атака типа “отказ в обслуживании” (Denial of service,...
Улучшаем свои дизайнерские навыки: один «легкий» трюк
Главный совет: заниматься дизайном — единственное, что я советую всем новичкам. Как можно больше.
А затем еще больше. Как и во всем, практика способствует вашему...
Как не лажать с JavaScript. Часть 2
Часть 1, Часть 2
Значение рефакторинга
Рефакторинг — это контролируемый процесс улучшения кода без написания новой функциональности. При правильном применении рефакторинг может стать мощным оружием против монстра под...
Стриминг видео и чат в учебном приложении
Платформа Mux обеспечивает высококачественный стриминг, управляемый удобным API, так что вы можете сфокусироваться на создании своего продукта. Он чрезвычайно гибок и предлагает функции для...
Low-code для дизайнеров
Работа в реальных условиях
В течение последних нескольких лет я искал способ, который позволил бы дизайнерам (и другим заинтересованным лицам, не являющимися разработчиками) воплотить идею приложения...
React-хуки useEffect и useLayoutEffect: различие и примеры использования
Понимание поведения хуков useEffect и useLayotEffect - ключ к оптимизации производительности React-приложения и обеспечению плавного взаимодействия с пользователем. Выясните, в чем разница между этими хуками, чтобы знать наверняка, когда и как их использовать.
Планы на отпуск с Python и HERE Maps
Лето в самом разгаре, и вы наверняка уже готовы отправиться в путешествие. Эта статья как раз поможет его распланировать.
Интернет пестрит туристическими путеводителями, рассказывающими о...
8 пунктов по стилю React + TypeScript
Ценность этих рекомендаций в их практическом значении. Добавьте их в собственное руководство по стилю React + TypeScript, и ваш код станет чище и понятнее.
Как создать Chrome-расширение для приложения с прогнозом погоды
Хотите создать простое веб-приложение, чтобы быстро узнавать прогноз погоды? Воспользуйтесь доступным руководством по разработке Chrome-расширения для приложения с прогнозом погоды (с полным исходным кодом).
Руководство для начинающих по созданию с нуля сайта онлайн-курсов или e-коммерции
Востребованность онлайн-бизнеса, как мы знаем, привела к повышению спроса на сайты и приложения. Это отлично понимают Google и Facebook — главные конкуренты на интернет-рынке.
Именно...
Refs в React: от доступа к DOM до императивного API
React достаточно удобный инструмент для создания веб-приложений. Еще больше его возможности расширяют рефы (Ref или Reference), действующие как ссылки на элементы кода React и упрощающие решение нестандартных задач.
Создание надежной библиотеки JavaScript: пошаговое руководство
Освоим процесс создания и сопровождения собственной, хорошо документированной библиотеки JS, которую легко использовать и развивать. Сделаем библиотеку служебных функций для упрощения работы с массивами.
Представляем объект JS Window - видимость и дочерние элементы
Объект window — глобальный объект, обладающий свойствами, относящимися к текущему документу DOM — тому, что находится во вкладке браузера.
Он включает в себя конструкторы, значения свойств и методы для...
Почему никто не рассказал мне это о CSS
Многим разработчикам, кажется, нет дела до CSS и это не новость. Тем не менее многое из того, что мы узнаём, происходит в процессе общения...
Прототипирование для Vue
С июля 2019 года Vue занимает третье место по количеству звезд на Github. Он опережает React более чем на 10 000 звезд и оставляет...
8 полезных команд NPM для фронтенд-инженера
После ознакомления с этими техниками вам останется жалеть лишь об одном - о том, что не освоили их раньше. Одни из них помогут сэкономить много времени и сил, а другие просто поднимут настроение.
8 репозиториев, которые используют продвинутые React-разработчики
Хотите узнать, какие репозитории пользуются популярностью у продвинутых IT-специалистов? В этом списке собраны лучшие платформы, к которым регулярно обращаются профессиональные программисты.
Создавайте веб-приложения, которые умеют говорить! ?
Сегодня трудно себе представить жизнь без Интернета. Интернет даёт огромные возможности. Он позволяет поддерживать связь с миром, не вставая с дивана. Аудиосегмент Интернета растёт...
Как создать простую браузерную игру с помощью Phaser 3 и TypeScript
Большую часть своего времени я занимаюсь backend-разработкой, поэтому я не могу похвастаться большим опытом во frontend. Какое-то время назад у меня возникло желание создать...
Запуск с нуля: как я создала сайт с нуля при помощи Netlify + Gatsby
После года работы front-end разработчиком, я решила создать свой собственный сайт. Это должна была быть платформа, где я могла показать свою работу, чем-то поделиться....
Об Apache Spark - интересно и со вкусом!
Возможно, многие из вас уже начинали изучать инженерию данных, но вскоре понимали, что осилить эту науку вам не под силу. То ли из-за сложной...
Совместное использование компонентов React с различными библиотеками управления состоянием
При разработке приложения на React совместное использование компонентов в разных приложениях и проектах наладить бывает не так-то просто. Здесь надо решить ряд задач:
Необходимо убедиться,...
Чистая архитектура фронтенда
Концепции и практики, такие как SOLID, KISS, DRY и DDD, помогут создавать более чистые архитектуры фронтенда. А правила создания компонентов с учетом развития бизнес-логики позволят коду оставаться ожидаемо поддерживаемым.
Объединение Google API с Angular
?Мотивация
Задача: нужно получить доступ или отобразить события частного google-календаря.Проблема: нельзя поместить частный календарь внутрь iframe или запросить события, используя ключ API.Необходимые условия: совместимость с...
Ruby on Rails меняет всё
Ruby on Rails поможет вам сэкономить кучу времени при написании кода. Пишите меньше, достигая тех же целей, которых достигли бы при помощи других языков.
От...
Что такое Редьюсеры: Как использовать их без Redux
Обработать состояние можно с помощью редьюсера в Class Components, используя функцию, преобразующую действия в изменения состояния. Благодаря этому централизируются все функции setStates.
? Что такое...
Биоинформатика? С R это легко!
Введение
Эта статья предназначена для тех, кто находится в поиске “точки входа” в область биоинформатики и имеет опыта работы с R (в идеале с использованием...
Как загружать изображения в RAILS API и возвращать их обратно
Мне потребовалась неделя, чтобы написать back-end основу для Supagram при помощи Rails API. Supagram — это легкий браузерный клон Instagram, в котором есть те же посты,...
Автоматизируйте код-ревью и ускорьте итерации
Код-ревью играет важную роль в поддержании качества кода при разработке программного обеспечения.
Чтобы помочь тем, кто занимается поддержкой проекта, в реализации политики проверки кода, GitHub...
Что делает сайты медленнее?
Аналитики CatchJS отрендерили 1 миллион самых популярных сайтов. Они отследили разнообразные метрики производительности, учли каждую ошибку и отметили каждый запрошенный URL. Результат составляет, вероятно,...
Ключевое слово this и контекст в JavaScript
К освоению JavaScript лежит долгий путь, на котором вам может встретиться такое выражение, как this. Первый раз я встретил его в процессе работы с...
Эмпирический анализ схем GraphQL. Часть 2
Часть 1, Часть 2
Напомним, что в части 1 мы дали немного вводной информации о языке запросов GraphQL, о преимуществах GraphQL API в сравнении с...
Все, что вам нужно знать про Ivy, новый движок для Angular!
Около года назад команда Angular объявила на ng-conf (конференция по Angular), что она работает над Angular Ivy. Хотя он еще не на 100% готов...
Как улучшить производительность сайта с помощью мониторинга реальных пользователей
Время — деньги. Независимо от того, каковы ваши взгляды на этот счет, медленная загрузка — это плохо. Исследования показывают: коэффициент конверсии снижается прямо пропорционально с каждой проходящей секундой....
Продвинутая версия Hello World для A-Frame
В прошлой статье я описал, с чего начинать разработку VR в браузере. Для этого мы взяли популярный пример “Hello World” для A-Frame и немного...
UX-текст - как он формирует продукт?
Сегодня UX-писательство окружает нас повсюду. Мы постоянно взаимодействуем с ним, вне зависимости от того, осознаем мы это или нет. Кнопки, всплывающие окна, уведомления, оповещения...
Теория цвета для дизайнеров - краткий курс (с инфографикой)
Каждый профессиональный дизайнер знает, что цвета оказывают значительное влияние на цифровые продукты и пользователей. Однако как правильно использовать все потенциальные возможности цвета?
Создание гармоничной цветовой...
Факты о веб-сайтах в 2018 году (и почему токенизация стала отличной идеей для этой...
Новый способ применения технологии блокчейна. И переход от слов к действиям с проектом uKit AI.
Существование современной всемирной паутины началось почти 30 лет назад с...
5 библиотек ведения логов для Node.js
Обсуждаем, почему так важно вести логи, и разбираем популярные библиотеки, обеспечивающие эту возможность для приложений Node.js: Winston, Pino, Bunyan, Log Level и npmlog.
Функции-генераторы в JavaScript для оптимизации памяти
Управление памятью: обычные функции JavaScript против функций-генераторов
Едва ли не каждый программист сталкивается с проблемой перебора большого количества элементов (коллекции статей, изображения, записи в базе...
Tailwind CSS: как разработать продвинутую пользовательскую анимацию
Анимация с Tailwind CSS обеспечивает отличный пользовательский опыт. Ознакомьтесь с примерами, демонстрирующими различные эффекты анимации, такие как вращение, подпрыгивание, пульсация, переворачивание и покачивание.
Откройте миру разрабатываемые вами API
Современный мир как никогда ранее благоприятствует разработчикам. У вас есть доступ к тысячам статей, миллионам ответов на вопросы на StackOverflow и миллиардам твитов, связанным...
Map, CompactMap и FlatMap в Swift
В типичном приложении работа с массивами — вполне обыденное дело. Нам нередко приходится перебирать все элементы, применяя к ним необходимые изменения.
Для этой задачи многие...
Эффективное или частное хранение данных с помощью JavaScript WeakMaps
Новая структура данных под названием WeakMaps была представлена с в новой спецификации ES6 наряду с Maps.
Как и в Maps, данные в WeakMaps хранятся в...
Лучшие практики API-авторизации
Надежная API-авторизация необходима для защиты цифровых активов и поддержания доверия пользователей. Изучите 4 лучшие практики для реализации этой процедуры: авторизацию на основе токенов, детальный контроль доступа, конфигурацию безопасного API-шлюза и шифрование конфиденциальных данных при передаче и хранении.
Детальное исследование 3 подводных камней React, с которыми сталкиваются разработчики
Прислушайтесь к советам опытного программиста. Они позволят понять, насколько хорош ваш код, а также помогут обойти 3 главных подводных камня программирования с React.
Дизайн для всех: подробное руководство по созданию интерфейсов для людей с ограниченными возможностями
Создание дизайн-решений, которые будут работать для каждого — сейчас разработчики сосредоточены на этой теме больше, чем когда-либо раньше. Всё чаще ведётся речь о том, что интересы...
Var, let и const в JavaScript
Пока я разбирался что к чему в основах JavaScript, я наткнулся на три способа объявления переменных, а именно var, let и const. В данной...
Дизайн-системы в 2020 году: где источник истины?
Иногда системы лишь масштабируют проблему
Дизайн-система пользовательского интерфейса - это постоянно растущее и непрерывно развивающееся существо, охватывающее бренд и ощущения пользователя.
Дизайнеры создают визуальный язык для...
Создаем расширение Chrome на Mint
В последней статье я рассказывал о том, почему мне понравилось использовать Mint для создании небольшого веб-приложения, а именно расширения Chrome.
Разработка расширения с помощью Mint,...
Как запустить несколько приложений React на одном порту Nginx с Docker
Разместим на одном порту два приложения React с Nginx и Docker. Настроим Docker, добавим конфигурацию Nginx глобально и файл docker-compose.yml.
Разработка современных приложений с помощью WEBPACK
Насколько далеко можно зайти с конфигурацией Webpack по умолчанию?
Я выступал на конференции GDG Devfest, где говорил об использовании webpack в разработке современных приложений. Изначально...
Создание пользовательских хуков React: полное руководство
Пользовательские хуки React помогают оптимизировать разработку и создавать более динамичные и эффективные приложения. Предлагаем полное и доступное руководство по их созданию и использованию.
Кнопка sign-in для вашего веб-приложения
Далее вы узнаете, как использовать библиотеку gapi для настройки аутентификации, как произвести вход пользователя, а также я покажу несколько сниппетов для обработки распространённых пользовательских...
Почему в JavaScript, в функцию лучше передавать только один аргумент?
В JavaScript нет определённой идеи о ключах, передаваемых в аргументах, и в тоже время этот язык необычайно гибкий, когда дело касается передачи чего-либо в...
Как компилировать ZXing C++ в Wasm, используя WASI SDK в Linux
WASI — это системный интерфейс, предназначенный для создания программных модулей .wasm не только для Node.js и веб-браузеров, но и для любой совместимой с WASI среды выполнения. Хотя...
Создавайте веб-приложения, которые умеют слушать! ?
У вашего веб-приложения тоже могут быть уши!
Мир стоит на пороге настоящего бума голосовых технологий, которые имеют огромный потенциал в современных посткоронавирусных реалиях, когда приходится...
Почему все веб-сайты выглядят одинаково?
Интернету не хватает креативных решений, поэтому я попросил своих учеников разработать редизайн уже существующих веб-сайтов.
Современный интернет однообразен. Все выглядит одинаково: одинаковые шрифты, похожие страницы,...
Потоки Kafka: как обрабатывать CSV-файлы для выполнения вычислений
Обработаем большой файл с данными о погоде и рассчитаем результаты, которые потом можно будет переиспользовать в другом проекте.
Утверждения, применяемые при импортировании в JavaScript
Количество имеющихся в мире данных с течением времени продолжает бурно расти. Этот огромный объем существует во многих различных типах данных: текстовых файлах, изображениях, видео,...
5 актуальных рекомендаций по оптимизации отладки
Ох, уж эти ошибки! Их появление в коде ничего, кроме досады, не вызывает. Лично мне они точно портят настроение. Только представьте: вы создаете продукт,...
Топ-10 библиотек React для создания высокопроизводительных веб-приложений в 2023 году
Не все решения React предоставляются в готовом виде "из коробки". Поэтому приходится обращаться к дополнительным инструментам. Чтобы не тратить время на поиски подходящего фреймворка, воспользуйтесь обзором лучших библиотек React, помогающих эффективно решать различные проблемы.
Все что нужно знать о древовидных структурах данных
Когда вы впервые учитесь кодировать, общепринято изучать массивы в качестве «основной структуры данных».
В конце концов, вы также изучаете хэш-таблицы. Для получения степени по «Компьютерным...
4 типичные ошибки разработчиков Node.js
Растущее комьюнити Node.js - свидетельство надежности и эффективности этого инструмента. Однако не всем удается извлечь из него максимальную выгоду. Рассмотрим самые распространенные ошибки разработчиков Node.js.
Отзывчивость – это очень просто с CSS-переменными
Если вдруг до этого вы ни разу не слышали о CSS-переменных, то поясним, что это новая функция CSS, благодаря которой в таблице стилей вы...
Терминал: 3 команды для продуктивности
Вот несколько важных вещей, помогающих мне быть продуктивным в течение всего рабочего дня:
Псевдонимы для команд.Команда pbcopy.Обратный поиск и другие трюки.
Псевдонимы
Псевдоним может быть одним из...
Портрет плохого программиста
Первым шагом на пути к становлению профессионального программиста может стать выявление плохих привычек в процессе написания кода. Рассмотрим их подробнее.