Pull to refresh
241
80
Igor Agapov @aio350

JavaScript Developer

Новые клиентские хуки React 19

Level of difficulty Medium
Reading time 6 min
Views 11K



Вопреки распространенному мнению, основная команда разработчиков React занимается не только серверными компонентами React и Next.js. В следующей версии — React 19 — появятся новые клиентские хуки. Они сфокусированы на двух ключевых аспектах: выборке данных и работе с формами. Эти хуки повысят производительность всех React-разработчиков, включая тех, кто создает одностраничные приложения.

Читать дальше →
Total votes 24: ↑23 and ↓1 +22
Comments 8

Практическое руководство по Rust. 2/4

Level of difficulty Medium
Reading time 29 min
Views 4.5K



Hello world!


Представляю вашему вниманию вторую часть практического руководства по Rust.



Руководство основано на Comprehensive Rust — руководстве по Rust от команды Android в Google и рассчитано на людей, которые уверенно владеют любым современным языком программирования. Еще раз: это руководство не рассчитано на тех, кто только начинает кодить 😉

Читать дальше →
Total votes 31: ↑29 and ↓2 +27
Comments 1

Начало работы с Axum — самым популярным веб-фреймворком Rust

Level of difficulty Medium
Reading time 11 min
Views 7.9K


Когда дело доходит до выбора серверного веб-фреймворка в экосистеме Rust, можно запутаться из-за большого количества вариантов. В прошлом, лидером по популярности был Rocket, но сейчас за первенство сражаются Axum и actix-web, и Axum все больше набирает обороты. В этой статье мы немного погрузимся в Axum — веб-фреймворк для создания REST API на Rust, разрабатываемый командой Tokio. Он прост в использовании и хорошо совместим с Tower — надежной библиотекой для создания модульных компонентов сетевых приложений.


В этой статье мы подробно рассмотрим, как использовать Axum для создания веб-сервиса. Кроме того, мы рассмотрим изменения, которые произошли в версии 0.7.

Читать дальше →
Total votes 30: ↑28 and ↓2 +26
Comments 6

Практическое руководство по Rust. 1/4

Level of difficulty Medium
Reading time 21 min
Views 9.2K



Hello world!


Представляю вашему вниманию первую часть практического руководства по Rust.



Руководство основано на Comprehensive Rust — руководстве по Rust от команды Android в Google и рассчитано на людей, которые уверенно владеют любым современным языком программирования. Еще раз: это руководство не рассчитано на тех, кто только начинает кодить 😉

Читать дальше →
Total votes 35: ↑30 and ↓5 +25
Comments 11

Большая шпаргалка по Rust. 2/2

Level of difficulty Medium
Reading time 39 min
Views 5.2K



Hello world!


Представляю вашему вниманию вторую часть большой шпаргалки по Rust.


Первая часть.


Другой формат, который может показаться вам более удобным.


Обратите внимание: шпаргалка рассчитана на людей, которые хорошо знают любой современный язык программирования, а не на тех, кто только начинает кодить 😉


Также настоятельно рекомендуется хотя бы по диагонали прочитать замечательный Учебник по Rust (на русском языке).

Читать дальше →
Total votes 28: ↑27 and ↓1 +26
Comments 2

Важные аспекты Unicode, о которых должен знать каждый разработчик JavaScript

Level of difficulty Medium
Reading time 22 min
Views 6.9K


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


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


Приложив определенные усилия, прочитав кучу статей — я постепенно начал понимать что к чему, и это оказалось не так уж трудно. Хотя, некоторые статьи приходилось перечитывать раза по 3.


Как оказалось, Unicode — это универсальный и удобный стандарт, но работать с ним может быть непросто из-за множества абстрактных терминов.


Если у вас есть пробелы в понимании Unicode, то сейчас самое подходящее время их заполнить! Заварите себе вкусный чай или кофе ☕. И давайте погрузимся в удивительный мир абстракций, символов, астралов (astrals) и суррогатов (surrogates).


В этой статье объясняются основные концепции Unicode, которые создадут необходимую базу для работы с ним.


Вы также узнаете, как JavaScript взаимодействует с Unicode и какие трудности могут возникнуть на этом пути.


А также, каким образом новые функции из ECMAScript 2015 могут помочь в решении этих проблем.


Готовы? Давайте начнем!

Читать дальше →
Total votes 43: ↑43 and ↓0 +43
Comments 7

Большая шпаргалка по Rust. 1/2

Level of difficulty Medium
Reading time 29 min
Views 10K



Hello world!


Представляю вашему вниманию первую часть большой шпаргалки по Rust.


Вторая часть.


Другой формат, который может показаться вам более удобным.


Обратите внимание: шпаргалка рассчитана на людей, которые хорошо знают любой современный язык программирования, а не на тех, кто только начинает кодить 😉


Также настоятельно рекомендуется хотя бы по диагонали прочитать замечательный Учебник по Rust (на русском языке).

Читать дальше →
Total votes 47: ↑45 and ↓2 +43
Comments 5

Знакомство с WebTransport API

Level of difficulty Medium
Reading time 20 min
Views 8.7K


Hello world!


На днях я прочитал статью о WebTransport API как будущей альтернативе или даже замене WebSockets. Мне стало интересно, что это такое и с чем его едят. Давайте разбираться вместе.

Читать дальше →
Total votes 40: ↑40 and ↓0 +40
Comments 5

Анатомия shadcn/ui

Level of difficulty Medium
Reading time 14 min
Views 4.2K


Если вы следите за новинками экосистемы JavaScript, то должны были слышать об интересной библиотеке пользовательского интерфейса (user interface, UI) под названием shadcn/ui. Вместо того, чтобы распространяться в виде пакета npm, компоненты shadcn/ui добавляются с помощью интерфейса командной строки (command line interface, CLI), который помещает исходный код компонентов непосредственно в ваш проект. Разработчик библиотеки указывает причину такого решения на официальном сайте shadcn/ui.


"Почему код для копирования/вставки, а не библиотека?

Идея заключается в том, что вы полностью владеете и контролируете код. Это позволяет вам решать, как именно будут построены и оформлены ваши компоненты.

Начните с настроек по умолчанию, а затем кастомизируйте компоненты под свои нужды.

Используя пакет npm, можно наткнуться на один недостаток — стиль всегда связан с реализацией. Дизайн компонентов должен быть отделен от их реализации".

На самом деле, shadcn/ui — это не просто очередная библиотека компонентов, а технология, позволяющая представить дизайн-систему в виде кода.


Цель этой статьи — изучить архитектуру и реализацию shadcn/ui.


Если вы еще не использовали shadcn/ui, я советую просмотреть ее документацию и немного поэкспериментировать с ней, чтобы извлечь из статьи максимальную пользу.

Читать дальше →
Total votes 18: ↑18 and ↓0 +18
Comments 1

О JavaScript и WebAssembly

Level of difficulty Medium
Reading time 5 min
Views 6.7K


Hello world!


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


Хорошо, если вы знаете JS/Node.js и хотя бы слышали о WASM и Rust.

Читать дальше →
Total votes 20: ↑16 and ↓4 +12
Comments 4

Вопросы по DevOps. Часть 1

Level of difficulty Medium
Reading time 75 min
Views 16K


Hello world!


В первой части шпаргалки (вопросника, если угодно) на высоком уровне рассматриваются такие вещи, как сеть, HTTP, операционная система, виртуализация, хранилище etc., а также несколько технологий, используемых в сфере DevOps, таких как Prometheus, OpenStack, Puppet, Elastic etc. (вопросы с ответами из основного репозитория оригинала). Полагаю, шпаргалка будет интересна всем, кто связан с разработкой программного обеспечения, прежде всего, с разработкой веб-приложений. Буду признателен за помощь в уточнении/исправлении понятий/терминов, а также в обнаружении очепяток.


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

Читать дальше →
Total votes 9: ↑8 and ↓1 +7
Comments 9

System Design 101

Level of difficulty Medium
Reading time 42 min
Views 61K



О сложных системах простыми словами.


В шпаргалке на высоком уровне рассматриваются такие вещи, как протоколы коммуникации, DevOps, CI/CD, архитектурные паттерны, базы данных, кэширование, микросервисы (и монолиты), платежные системы, Git, облачные сервисы etc. Особую ценность представляют диаграммы — рекомендую уделить им пристальное внимание. Полагаю, шпаргалка будет интересна всем, кто хоть как-то связан с разработкой программного обеспечения и, прежде всего, веб-приложений. Буду признателен за помощь в уточнении/исправлении понятий, терминологии, логики/алгоритмов работы систем (в рамках того, что по этому поводу содержится в оригинале), а также в обнаружении очепяток.


Выражаю благодарность Анне Неустроевой за помощь в редактировании материала.


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


System Design (сборник на английском языке).

Читать дальше →
Total votes 79: ↑79 and ↓0 +79
Comments 17

Особенности кодировки строк в Base64 в JavaScript

Level of difficulty Hard
Reading time 6 min
Views 6.6K


Кодировка (encoding) и декодирование (decoding) в Base64 — распространенный способ преобразования двоичных данных в безопасный текст. Он часто используется в Data URL, таких как встроенные (inline) изображения.


Прим. пер.: с помощью data URL можно решить проблему (ошибку) отсутствующей фавиконки в браузере.


<link rel="icon" href="data:." />

Что происходит при кодировке и декодировании в base64 строк в JS? В этой статье мы рассмотрим некоторые особенности и ловушки, связанные с этими процессами.

Читать дальше →
Total votes 11: ↑10 and ↓1 +9
Comments 3

Паттерны реактивности в современном JavaScript

Level of difficulty Hard
Reading time 12 min
Views 11K



"Реактивность" — это то, как системы реагируют на обновление данных. Существуют разные типы реактивности, но в рамках этой статьи, реактивность — это когда мы что-то делаем в ответ на изменение данных.


Паттерны реактивности являются ключевыми для веб-разработки


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


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


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

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

Читать дальше →
Total votes 14: ↑12 and ↓2 +10
Comments 8

Как работает компьютер: глубокое погружение (на примере Linux)

Level of difficulty Hard
Reading time 48 min
Views 123K



Введение


Я делала много вещей с компьютерами, но в моих знаниях всегда был пробел: что конкретно происходит при запуске программы на компьютере? Я думала об этом пробеле — у меня было много низкоуровневых знаний, но не было цельной картины. Программы действительно выполняются прямо в центральном процессоре (central processing unit, CPU)? Я использовала системные вызовы (syscalls), но как они работают? Чем они являются на самом деле? Как несколько программ выполняются одновременно?


Наконец, я сломалась и начала это выяснять. Мне пришлось перелопатить тонны ресурсов разного качества и иногда противоречащих друг другу. Несколько недель исследований и почти 40 страниц заметок спустя я решила, что гораздо лучше понимаю, как работают компьютеры от запуска до выполнения программы. Я бы убила за статью, в которой объясняется все, что я узнала, поэтому я решила написать эту статью.


И, как говорится, ты по-настоящему знаешь что-то, только если можешь объяснить это другому.


Более удобный формат статьи.

Читать дальше →
Total votes 152: ↑152 and ↓0 +152
Comments 36

Как работает Zustand

Level of difficulty Hard
Reading time 8 min
Views 14K


Hello world!


Zustand (читается как "цуштанд", что переводится с немецкого как "состояние") — это, на мой взгляд, один из лучших на сегодняшний день инструментов для управления состоянием приложений, написанных на React.


В этой статье я немного расскажу о том, как он работает.


Давайте начнем с примера использования zustand для реализации функционала отображения/скрытия модального окна.

Читать дальше →
Total votes 4: ↑4 and ↓0 +4
Comments 9

Как React 18 улучшает производительность приложения

Level of difficulty Medium
Reading time 11 min
Views 9.1K


React 18 представил конкурентные (concurrent) возможности, которые радикально меняют способ рендеринга приложений. В этой статье мы рассмотрим, как эти возможности улучшают производительность приложения.


Начнем с повторения основ "долгих (долго выполняющихся) задач" (long tasks) и соответствующих метрик производительности.

Читать дальше →
Total votes 8: ↑7 and ↓1 +6
Comments 7

Введение в View Transitions API

Level of difficulty Easy
Reading time 7 min
Views 4.3K


Новый View Transitions API, что можно перевести как "интерфейс переходов отображения", предлагает легкий способ анимирования перехода между двумя состояниями DOM — даже между загрузками страниц. Это прогрессивное улучшение, которое можно реализовать уже сегодня.

Читать дальше →
Total votes 2: ↑2 and ↓0 +2
Comments 2

Введение в потоковую передачу данных в Вебе

Level of difficulty Medium
Reading time 8 min
Views 9.3K


Веб-потоки (web streams) предоставляют основанный на веб-стандартах способ асинхронной потоковой передачи данных по сети. Они позволяют разработчикам обрабатывать большие наборы данных по чанкам (chunks — части, куски), контролировать перегрузку сети (обратное давление — backpressure) и создавать высокоэффективные и отзывчивые приложения.


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


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




Читать дальше →
Total votes 4: ↑4 and ↓0 +4
Comments 3

Новинки CSS и UI: I/O 2023

Level of difficulty Medium
Reading time 13 min
Views 12K


Последние несколько месяцев открыли золотую эру веб UI (User Interface — пользовательский интерфейс).


Вот 20 самых захватывающих и впечатляющих возможностей, которые появились недавно или появятся в ближайшем будущем:


  • запросы контейнера (container queries);
  • запросы стиля (style queries);
  • селектор :has();
  • микросинтаксис nth-of;
  • text-wrap: balance;
  • initial-letter;
  • динамические единицы измерения области просмотра (viewport);
  • цветовые пространства с широкой гаммой;
  • color-mix();
  • вложенность селекторов (nesting);
  • каскадные слои (cascade layers);
  • стили с ограниченной областью видимости (scoped styles);
  • тригонометрические функции;
  • индивидуальные свойства трансформации;
  • popover;
  • позиционирование якоря (anchor positioning);
  • selectmenu;
  • дискретные свойства переходов;
  • анимации, управляемые прокруткой (scroll-driven animations);
  • переходы отображения (view transitions).

Руководства, шпаргалки, вопросы и другие материалы по JavaScript, TypeScript, React, Next.js, Node.js, Express, Prisma, GraphQL, Docker и другим технологиям, связанным с разработкой веб-приложений.

Читать дальше →
Total votes 10: ↑10 and ↓0 +10
Comments 3

Information

Rating
56-th
Location
Екатеринбург, Свердловская обл., Россия
Date of birth
Registered
Activity