Краткий обзор нововведений TypeScript 4.1
Я работаю с TypeScript уже не первый год и считаю, что он достаточно прост, особенно для людей с опытом разработки на Java. Тем не...
Пользовательские структурные директивы в Angular
Что такое структурные директивы?
Структурные директивы в Angular отвечают за манипулирование элементами, их изменение и удаление внутри шаблона компонента. Структурная директива применяется к основному элементу,...
Преимущества использования препроцессора (Sass) при написании CSS
В сети ведётся много споров о том, стоит ли использовать CSS-препроцессор в разработке. По моему личному мнению, препроцессор излишен для маленьких веб-проектов и приложений.
Тем...
Супергеройский макет: комбинируем CSS-сетки и CSS-фигуры
Создадим нестандартный макет на основе страницы комикса, используя свойство clip-path для наложения изображений и придания им нужных форм.
Почему NestJS — лучший фреймворк Node.js для микросервисов
JavaScript является одним из самых популярных языков программирования, поэтому в качестве бэкенда часто выбирают Node.js. Сегодня поговорим о том, какой из фреймворков Node.js оптимален для микросервисов.
Получение общих данных в Next.js одним запросом
Просматривая процесс сборки своего текущего проекта, я обратил внимание на то, что при генерировании страниц с использованием getStaticProps выдается много запросов к одной конечной...
8 репозиториев, которые используют продвинутые React-разработчики
Хотите узнать, какие репозитории пользуются популярностью у продвинутых IT-специалистов? В этом списке собраны лучшие платформы, к которым регулярно обращаются профессиональные программисты.
Балансировка нагрузки и последовательное хеширование
Рассмотрим, как работает хеширование запросов при наличии в системе двух и более серверов и как его можно усовершенствовать для балансировки нагрузки.
Введение в GraphQL: основные принципы использования
GraphQL — это язык запросов к API-интерфейсам. Он отображает предоставляемые сервером данные, чтобы клиент смог выбрать именно то, что ему нужно.
Помимо этого, с помощью GraphQL можно...
Объяснение понятия «состояние» в JavaScript на примере приготовления простого блюда
Когда вы начинаете писать простые JavaScript программы, вам не нужно волноваться о количестве используемых вами переменных или о том, как работают разные функции и...
Ускорьте создание пиксельной графики в 10 раз ✨?
Эта статья будет кратка и проста, чтобы вы могли сразу взять на вооружение эту технику и начать рисовать изумительную пиксельную графику. До знакомства с...
Развертывание Flask приложения на Heroku и подключение к БД MySQL - JawsDB
Проблемы развертывания
Новички часто устанавливают все пакеты на системном уровне из-за отсутствия опыта (например, с помощью pip). Получение зависимостей из requirements.txt для каждого проекта создаёт...
Agile — враг (хорошего проектирования)?
Интеграция
Чтобы приступить к обсуждению, вначале надо поговорить об интеграции. Интеграция — это…
действие или случай объединения в единое целое.
Частая интеграция помогает людям более эффективно решать задачи:
Вы...
Автоматическое пакетирование в React 18
Предлагаем подробно ознакомиться с автоматической пакетной обработкой в обновленном React 18. Эта функция позволит существенно повысить производительность приложения.
Удачные решения UX-дизайна на примере Big Sur
У новой операционной системы macOS Big Sur от компании Apple есть определённые проблемы, но я предлагаю рассмотреть решения UX-дизайна, которые оказались удачными — и...
Веб-скрапинг для веб-разработчиков: краткие сведения
Для извлечения данных с веб-страницы существует множество решений и инструментов. Каждый метод обладает своими сильными и слабыми сторонами, знание которых сохранит время и повысит...
Условный JavaScript для экспертов
Осваиваем условные выражения для написания более чистого кода
Условные выражения являются очень важным аспектом в синтаксисе любого языка программирования. Если вы уже некоторое время программируете на...
Руководство разработчика по оптимизации скорости работы веб-сайтов
Я много размышляю о том, как можно оптимизировать сайты, чтобы они работали быстрее. Ценность времени всё больше возрастает, и никому не нравится ждать, пока...
Как настроить Next.js на TypeScript, чтобы получить оценку в 100% от Google Lighthouse и...
Создаем прогрессивное веб-приложение с помощью Next.js и пытаемся достичь 100-процентной оценки от Google Lighthouse и Vercel Analytics. Проходим весь путь оптимизации проекта Next.js, который будет написан на TypeScript.
Плохие практики Angular
Загрязнение ngOnInit
ngOnInit - один из самых важных хуков жизненного цикла в компонентах Angular. Он используется для инициализации данных, настройки слушателей, создания соединений и т.д....
JavaScript Symbols. Новый тип примитивов
Введение
В JavaScript есть два основных типа значений. Первый тип — это примитивы, а второй — объекты (в том числе функции). Примитивы — это простые типы, например числа (integer, float, infiniti,...
6 полезных приемов для создания интерфейсов
Фронтенд-разработка сегодня весьма востребована. Программисты, выполняющие подобные проекты, постоянно сталкиваются со множеством новых задач.
Для их решения приходится создавать код с использованием HTML, CSS и...
Rust как часть микросервисной архитектуры
Как включить Rust в приложение и использовать преимущества дифференцированной масштабируемости? Реализуем и развертываем в докере 3 микросервиса. Внутри - весь код и ссылка на репозиторий.
Введение в сетки в цифровом дизайне
Возможно, после открытия дизайнерской программы у вас возникнут вопросы: «С чего начать?» и «Куда поместить заголовок?». Ответ очень прост: начинать работу стоит с создания...
10 полезных библиотек для фронтенд-разработки
Эти библиотеки могут значительно упростить фронтенд-разработку. Каждая из них, предлагая уникальные функции, имеет такие преимущества, как небольшой размер, высокую производительность и легкость интеграции.
Введение в Page Visibility API
Познакомимся с Page Visibility API, рассмотрим его назначение, принцип работы, область применения и практические примеры.
Способы публикации библиотеки JavaScript: CDN, NPM, GitHub
Производство программного обеспечения включает в себя множество этапов, таких как проектирование, разработка ПО и ещё много других. Распространение программного обеспечения также является важной частью...
Что не так с новыми логотипами приложений Google
К этому моменту вы, скорее всего, уже видели новые логотипы приложений Google Workspace (ранее G Suite) для продуктивной работы, таких как Gmail, Google Drive...
12 UI Grid-систем и библиотек для React актуальных в 2019 году
Я провёл исследование и сделал обзор на 12 библиотек и компонентов для React (без рейтинга). Часть из них автономные, а некоторые входят в состав...
Создание эффектов при прокрутке
В этом руководстве мы поговорим о том, как создать эффект открывающегося блока при прокрутке. Эффект состоит из сплошного цветного блока, который уменьшается в размере,...
10 правил программирования NASA
10 правил, призванных облегчить проведение контроля и статического анализа кода.
Вот что об этих правилах говорят в NASA:
Правила можно сравнить с ремнём безопасности в машине: сначала...
Революция в условном рендеринге React
Вам знакома проблема условного рендеринга JSX? Библиотека Solid.js предлагает ее элегантное решение: достаточно создать компонент Show, чтобы значительно упростить обработку условного рендеринга. Этот простой компонент не только делает чище и читабельнее код, но и повышает эффективность разработки.
Важнейшие инструменты и технологии для разработки под Web 3.0
Будущее интернета за Web 3.0, и пока этот сегмент разработки еще не заполнен специалистами, хотя спрос на них уже велик. На каких же принципах строится эта система, и какие навыки потребуются разработчикам для вхождения в нее? Объясняем просто и понятно.
Создание компонента Timer с React и Bit
Рассмотрим пример создания компонента countdown timer в React с использованием Bit.
В результате компоненты будут выглядеть следующим образом.
Помимо этого, мы научимся обмениваться компонентами и использовать...
Адаптивный дизайн на разных уровнях Flutter
Адаптивный дизайн очень важен для тех, кто ориентируется на разные платформы, используя единую кодовую базу. И особенно это относится к разработке на Flutter, ведь...
Решаем проблему запроса N+1 в GraphQL с помощью Dataloader
Предыдущая часть: “Почему нельзя разрешать поля GraphQL как конечные точки REST”
В предыдущей статье мы закончили на том, что при разрешении полей возникает проблема запроса...
Обзор функциональностей CSS, которые появились в 2022 году
Познакомимся с новыми функциональностями CSS 2022 года. Они отражают современные тенденции в развитии языка и нацелены на улучшение стилизации веб-страниц.
Flutter против React Native: правильный выбор может определить успех вашего проекта
Оба фреймворка - как Flutter, так и React Native - являются популярными мультиплатформенными инструментами для быстрого и легкого создания мобильных приложений. И все же перед разработкой очередного проекта стоит выяснить, чем отличаются эти платформы и как лучше использовать каждую из них.
Создание приложения-планировщика в React с Easy Peasy и Ant Design
Обучающее руководство по созданию приложения-планировщика React при непосредственном участии библиотек Easy Peasy и Ant Design.
Создаем 3D-модель из акварельной картины
Небольшое руководство о том, как конвертировать портретную картину или рисунок в 3D-модель с небольшим текстурированием и правильной разверткой. Для этого я использую платформу Blender,...
1 Кодовая база - 3 платформы
Все, что нужно знать для успешного развертывания кроссплатформенного приложения в 2021 году.
Представим простую ситуацию:
Вы соло-разработчик. У вас появилась идея. Вы делитесь ей со своими друзьями....
Как писать лог-файлы, которые экономят время
Сначала позвольте немного поразглагольствовать: программа, поддержкой которой я занимаюсь по работе, содержит много милых особенностей. “Произошла ошибка” — не то, что достойно такого описания....
React SPA SEO с Prerender.io
Как правильно настроить SEO для JavaScript-приложения? Рассказываем про Server Side Rendering, Client Side Rendering, Dynamic Rendering и Prerender.io.
Чистая архитектура фронтенда: 7 советов для достижения успеха
Эти экспертные советы помогут вам добиться того, о чем мечтает каждый разработчик — чистой архитектуры фронтенда. Ваши проекты станут легко поддерживаемыми, а новые функции будут добавляться в приемлемые сроки.
Повышение дизайнерских навыков: советы и упражнения
Четыре года назад я бросила работу в детской поликлинике и начала свое путешествие в мире дизайна. Я читала книги по UX по дороге на...
Сказание о шаблоне Стратегия и его реализации
Я, конечно же, не Майкл Фелпс, да и плавать больше предпочитаю в море, но мне очень нравится наблюдать за тренировками пловцов. Этот процесс словно...
Как предотвратить состояние гонки с помощью React Context API
В сервисной команде Stream мы с удовольствием работаем с различными клиентами и ежедневно решаем захватывающие задачи.
Эта статья посвящена одному из таких решений. В ней...
Стоит ли писать код Dart на стороне сервера?
Как настроить сервер при создании приложения на Flutter? Задействуем фреймворк gRPC и разберем преимущества и недостатки Dart.
Анализ возможностей React Native или 15 вариантов улучшить ваше приложение!
Фреймворк React Native радикально изменил процесс разработки мобильных приложений, особенно после создания таких гибридных мобильных приложений, как Phone-gap, Ionichas и т.д.
Однако набора компонентов React...
Как повысить SEO-рейтинг сайта с помощью Next.JS
Хотите, чтобы ваши приложения успешно проходили ранжирование во всех поисковиках? Next.js поможет достичь отличных SEO-результатов, а заодно получить бесплатный SSL-сертификат.
Service Workers и стратегии кэширования
Что такое service workers и применение стратегий кэширования
Service Workers — наверняка, вы что-то об этом слышали. Что это такое? Говоря простыми словами, это сценарий, который запускается...
Лучший способ для привязки обработчиков событий в React
Благодаря JavaScript привязка обработчиков событий в React может быть достаточно сложным занятием. Для тех, кто знаком с историей Perl или Python, аббревиатуры TMTOWTDI (There’s...
Как создать адаптивную галерею для интернет-магазина
В этой статье вы узнаете, как создать адаптивную галерею с помощью простенького JavaScript-фреймворка Stimulus для HTML-страницы вашего будущего интернет-магазина. Stimulus — это мощная альтернатива...
8 полезных приемов в CSS: Эффект параллакса, прилипающий футер и многое другое
В этой статье я поделюсь некоторыми полезными советами и приемами, без понимания которых я бы не смог успешно завершить свой путь по изучению CSS....
7 вопросов по фронтенд-разработке
Хотите проверить, насколько вы продвинуты в области разработки пользовательского интерфейса? Попробуйте ответить на эти 7 вопросов (но не торопитесь заглядывать в подсказки).
Почему я больше не пользуюсь D3.js
Когда я работаю над проектами с визуализацией, мои менеджеры обычно ужасаются, когда я говорю, что не использую D3. Почему они так переживают? Почему я...
Как развернуть React-приложение в Netlify
Я научу вас развертке и хостингу React приложения с Netlify.Netlify — это сервис для автоматизации сборки, развертывания и управления сайтами. В настоящее время Netlify считается одним...
React Colorful: минималистичная и быстрая альтернатива для React Color
Вы создаёте приложение, связанное с рисованием и выбором цветов с помощью React? Если так, то наверняка вам знакома React Color, коллекция компонентов с цветовой...
Как защитить текст от комбинации Ctrl+F в браузере
До сих пор не существует простого способа скрыть содержимое веб-страницы от функции find-in-page. Тем не менее поиски обходных путей все еще ведутся.
React hooks: никакой магии, только массивы
Я большой фанат новых API хуков. Но знаете, у них есть странные ограничения по применению. Для тех, кто жаждет понять причины появления этих правил,...
Краткое введение в функции высшего порядка в JavaScript
Функции высшего порядка
Функция, принимающая в качестве аргументов другие функции или возвращающая другую функцию в качестве результата, называется функцией высшего порядка.
С функциями в JavaScript вы можете:
Хранить...
Как создать веб-сервер с модулями HTTP и FS Node.js
Хотите создать веб-сервер с помощью NodeJS? Основные модули Node.js - HTTP и fs - позволят вам обойтись без сторонних зависимостей.
ТОП-5 признаков качественного продуктового дизайна
Как отличить хороший дизайн от плохого? Хороший дизайн — это четкое понимание предпочтений пользователей. Один из самых выдающихся дизайнеров 20 века Дитер Рамс как-то...
Создание надежной библиотеки JavaScript: пошаговое руководство
Освоим процесс создания и сопровождения собственной, хорошо документированной библиотеки JS, которую легко использовать и развивать. Сделаем библиотеку служебных функций для упрощения работы с массивами.
Секреты разработки высокопроизводительных приложений и микросервисов
Архитектура на основе микросервисов все чаще используется при создании веб-приложений. Рассмотрим ее преимущества и рекомендации по реализации.
Завершаем настройку мощного API на Nodejs, GraphQL, MongoDB, Hapi, и Swagger. Часть 2
Это вторая часть в серии, где мы строим мощный API GraphQL. Пожалуйста, посмотрите первую часть нашей статьи,если вы до сих пор этого не сделали.
Я знаю,...
Структура типизации в Ruby 3
Об авторе: Соутаро является ведущим разработчиком Ruby в Square, работающим над Steep и статической типизацией; вместе с Матцем и другими разработчиками ядра он работает...
Как преобразовать шестнадцатеричное число в десятичное в JavaScript
Расскажем, как легко преобразовать шестнадцатеричное число в его десятичный эквивалент в JavaScript, и рассмотрим реальный пример использования этой функции.
Принципы минимализма в цифровом дизайне
Минимализм — это концепция, смысл которой заключается во фразе «меньше значит больше». Это концепция, которая проникает в нашу жизнь в разных формах: для одних...
Дизайн для всех: подробное руководство по созданию интерфейсов для людей с ограниченными возможностями
Создание дизайн-решений, которые будут работать для каждого — сейчас разработчики сосредоточены на этой теме больше, чем когда-либо раньше. Всё чаще ведётся речь о том, что интересы...
Как создать инструмент командной строки в NodeJS
Мы, как разработчики, живем среди CLI-инструментов. От gitдо cloud shells — этими средствами мы пользуемся повсеместно. И настала пора научиться создавать свои собственные. В процессе работы...
Элементы минималистичного дизайна
На сегодняшний день минимализм является одним из самых популярных UX/UI трендов в 2021 году. Минималистичный дизайн — это художественный замысел, который подразумевает использование наиболее важных...
Как создать GraphQL-сервер с запросами, мутациями и подписками
Если вы ещё не знакомы с TypeScript — не беда. Продолжайте читать дальше: основные понятия и большую часть синтаксиса освоить будет несложно.
Предполагается, что у вас...
Масштабирование фронтенд-приложений в 2023 году
При создании масштабируемых фронтенд-приложений нужно учитывать целый ряд факторов. Какие из них и почему сегодня следует рассматривать в первую очередь?
7 FrontEnd трендов и инструментов для JavaScript на 2020
Мир JavaScript быстро развивается.
Изменения во фронтенде и веб-разработке происходят невероятно быстро. Сегодня, если вы не мастер Webpack, React Hooks, Jest, Vue и NG, вы,...
Input и Output в компонентах Angular
Недавно у нас была статья по созданию и запуску приложения. Работает оно отлично, но вот его структуру стоило бы улучшить. На данный момент весь...
GitHub Codespaces: быстрая разработка на ходу с Flutter
В прошлую пятницу мне на почту пришло приглашение попробовать бета-версию GitHub Codespaces!
Я сразу же взял один из своих примерных проектов на Flutter (Fluttersaurus) и...
Делаем Node.js быстрым: инструменты, техники и советы для создания эффективных серверов на Node.js Часть...
Предыдущие части: Часть 1
Понимание проблемной области
В кратком руководстве Clinic Doctor говорится что, если задержки Event Loop на уровне, который мы наблюдаем, весьма вероятно, что...
Sniper-CSS: как избавиться от неиспользуемых стилей
Рассмотрим на практическом примере, как сократить код приложения, избавившись от неиспользуемых стилей. Кроме того, поделимся эффективными инструментами для работы.
Из двух модулей Angular выбирай лучший- задачка для программиста
Важным аспектом любой системы, определяющим будущую лёгкость обслуживания и чистоту кода, является ее модульная структура, при чем независимо от размера этой системы. В этой...
Аутентификация и авторизация пользователей в Angular 16 с помощью JWT
Предлагаем руководство по созданию надежной системы аутентификации и авторизации пользователей в Angular 16 с использованием JWT. Интегрировав несколько компонентов в маршрутизацию и конфигурацию модулей приложения, вы обеспечите его пользователям повышенную безопасность и комфортные условия работы.
8 пунктов по стилю React + TypeScript
Ценность этих рекомендаций в их практическом значении. Добавьте их в собственное руководство по стилю React + TypeScript, и ваш код станет чище и понятнее.
Как обеспечить работу современного кода JavaScript во всех браузерах
После введения ES6 в старых браузерах и JS-движках возникают проблемы с новыми функциями и синтаксическими конструкциями. Предлагаем простейшие способы разрешения этих проблем.
Индексация строк в Rust и TypeScript в сравнениях
Сравнительный анализ обработки строк в Rust и TypeScript. Примеры и пища для размышлений гарантированы!
Разбираемся с Render Props и HOC в React
Детальное представление Render Props и компонентов высшего порядка в React
Для чего нужны эти паттерны?
React предлагает Компоненты, представляющие собой простой способ повторного использования кода. Компонент инкапсулирует множество вещей...
Node.js быстрее, чем Go
…когда пишешь плохой код. О том, как применять пул соединений, а не просто копипастить найденный в интернете код.
Как разбить монолитное приложение на микросервисы без рефакторинга
Сделаем шаг навстречу более гибкой методологии разработки и познакомимся с концепцией архитектуры Just-in-Time (пер. в нужный момент), которая позволяет реорганизовывать приложения без рефакторинга.
Применение Let’s Encrypt для автоматизации HTTPS в кластерах Kubernetes на Raspberry Pi
Автоматическая генерация сертификатов — на первый взгляд, нечто прямиком из мира крупных корпораций, и потому вне досягаемости обычного разработчика, который размещает контент в кластере...
В чём разница между var, let и const в JavaScript
Сегодня вы узнаете два новых способа создавать переменные в JavaScript (ES6), а именно с помощью let и const. Мы разберёмся в чём разница между...
8 полезных функций Angular, о которых стоит знать
Angular - достаточно большой и сложный фреймворк. В нем можно постоянно находить новые возможности. Представляем подборку полезных функций Angular, о которых вы, возможно, не слышали.
Как выбрать подходящую версию Node.js?
Node.js - популярный инструмент для разработки различных проектов. Поговорим о различиях между версиями LTS и Current в Node.js и о том, как выбрать подходящий вариант.
Rust: работа с потоками
Жил я себе поживал раньше без забот и без хлопот в однопоточной счастливой стране JavaScript, где имел дело с потоками разве что при взаимодействии...
Как создать галерею изображений с помощью Gatsby и Cloudinary
Настроим от начала до конца бессерверное веб-приложение с использованием Git и системы непрерывной интеграции.
Реализация Redux на Rust
Создадим веб-приложение на Rust с помощью Yew и Redux, разберем его базовую структуру и то, как создаются действия и функция редьюсера. Рассмотрим также реализацию с макросом и перечислениями.
Построение архитектуры данных реального времени с помощью Apache Kafka, Flink и Druid
Обработка пакетных данных в режиме реального времени - одна из наиболее сложных задач. Каждый этап, от доставки и обработки данных до их анализа, занимает определенное время. К счастью, для устранения этих задержек есть такие инструменты, как Apache Kafka, Flink и Druid.
Зачем использовать HttpClientFactory вместо HttpClient в .NET
Как показала практика, использование стандартного HttpClient чревато подводными камнями. Обойти их и получить весомые преимущества позволяет HttpClientFactory. Убедитесь в этом, отправившись в увлекательное приключение с примерами использования HttpClientFactory.
Как создать HTTP-фреймворк «Hello World!» на Rust
Пошагово сделаем минималистичный фреймворк HTTP-сервера с подробным разбором кода и синтаксиса, возможностью создания системы маршрутизации. Затем запустим его в контейнере Docker.
Типы данных JavaScript
Хотите иметь четкое представление о типах данных JavaScript? Вы на правильном пути! Понимание типов данных обеспечит сбор данных в предпочтительном формате, а значение каждого свойства будет соответствовать вашим ожиданиям.
Введение в вычисляемые свойства в Vue JS
Причины, по которым ‘вычисляемые свойства’ играют важную роль при написании чистого и эффективного кода Vue
Vue JS, созданный Эваном Ю и членами сообщества, представляет собой прогрессивный...
Почему в JavaScript, в функцию лучше передавать только один аргумент?
В JavaScript нет определённой идеи о ключах, передаваемых в аргументах, и в тоже время этот язык необычайно гибкий, когда дело касается передачи чего-либо в...
Как создать простой планировщик событий в Go
Базовый рабочий механизм представляет собой следующее: запланированное событие добавляется в базу данных, из которой оно будет выполняться в определенное время. Другая задача будет запускаться...
Go: трассировочный пакет
ℹ️ В статье речь идёт о Go 1.13.
В Go имеется инструмент для проведения трассировки и получения подробного представления о работе программы во время её...
Как профессионально писать логи Python
Научимся писать логи как настоящие профессионалы. Сначала познакомимся с библиотекой structlog и ее возможностями, затем закрепим теорию практическими примерами и под конец вооружимся полезными советами для эффективного логирования на Python.
Почему крупные проекты отказываются от TypeScript?
Появление TypeScript было встречено многими специалистами с энтузиазмом. Этот язык обещал улучшить опыт разработчиков, повысить безопасность кода и уменьшить количество ошибок. Тем не менее со временем некоторые команды стали отказываться от TypeScript. Почему так происходит? Попробуем разобраться.
Три способа захвата скриншотов с помощью Selenium WebDriver
При работе с автоматизированными тестами в Selenium часто приходится делать скриншот веб-страницы или ее части. Это полезно, особенно при отладке ошибок или проверке согласованности...