gRPC против REST: Как выбрать лучший подход к проектированию API

Всем привет! Наткнулась на полезную статью — https://blog.logrocket.com/grpc-vs-rest/
В ней объясняется, что такое REST и gRPC, в чём их ключевые различия и в каких случаях лучше применять тот или иной подход. Есть наглядные примеры.

Вот краткая выжимка, но всё же рекомендую прочитать статью целиком 👇

---

🔍 Основные различия

REST — архитектурный стиль, использующий HTTP/1.1 и JSON. Прост в использовании и широко поддерживается в браузерах.
gRPC — высокопроизводительный фреймворк от Google на базе HTTP/2 и Protocol Buffers. Обеспечивает эффективную, строготипизированную передачу данных между сервисами.

---

⚙️ Сравнение производительности

📦 Сериализация и объём данных

REST:

* Использует текстовые форматы (JSON/XML)
* Более крупный размер данных из-за текстового кодирования
* Читаем человеком, но менее эффективно
* Сериализация/десериализация может быть ресурсоёмкой для больших данных

gRPC:

* Использует бинарный формат (Protocol Buffers)
* Полезная нагрузка на 30–40% меньше по сравнению с JSON
* Быстрая сериализация и десериализация
* Меньшая нагрузка на пропускную способность сети

---

🌐 Сетевая эффективность

REST:

* Основан на HTTP/1.1 (поддержка HTTP/2 ограниченная)
* Один запрос — одно TCP-соединение
* Выше задержка при множестве запросов
* Ограниченное повторное использование соединений
* Сжатие заголовков доступно только с HTTP/2

gRPC:

* Основан на HTTP/2
* Мультиплексирует несколько запросов по одному соединению
* Поддерживает двусторонний стриминг, что снижает задержку
* Постоянные соединения повышают производительность
* Эффективное сжатие заголовков снижает издержки

---

✅ Когда выбрать REST

* Публичные API — когда важна широкая совместимость с клиентами и возможность обнаружения (discoverability).
* Веб-клиенты — для прямой поддержки в браузере без необходимости прокси или шлюзов.
* Простые CRUD-операции — когда достаточно базовых операций с ресурсами.
* Разные языки в микросервисах — если не все сервисы могут поддерживать gRPC.
* Удобная отладка — когда важно уметь просматривать и анализировать содержимое запросов.

---

🚀 Когда выбрать gRPC

* Микросервисная архитектура — когда важна эффективная внутренняя коммуникация между сервисами.
* Polyglot-среда — для совместимости между сервисами с помощью автогенерации кода.
* Реальное время — когда особенно полезны возможности стриминга в gRPC.
* Высокая нагрузка и требования к скорости — идеально для систем, критичных к производительности.
* IoT и мобильные приложения — где важны эффективность использования трафика и энергосбережение

---

P.S. Всё же советую прочитать статью целиком — когда дойдёт до реального выбора между REST и gRPC, вы будете во всеоружии и точно поймёте, какой подход лучше подойдёт именно в данном кейсе 🚀

Всем привет! А мы продолжаем серию постов про #тараканытимлида

И сегодня вашему вниманию следующий по мне актуальный вопрос)

Как мотивировать команду?

Честно? Универсального рецепта не существует. Потому что команда — это не механизм, а живые люди. Со своими страхами, целями, ценностями. Поэтому первое правило: узнай своих людей.

Что их зажигает? Куда они хотят расти? Кто-то мечтает вести свой проект, а кто-то — просто спокойно делать задачи без лишнего стресса. Одного мотивирует вызов, другого — стабильность. И вот когда вы это понимаете — можно начать по-настоящему вдохновлять.

Что реально работает:
– Доверие и свобода. Не контролируйте каждый шаг, дайте человеку пространство.
– Вовлечённость. Делитесь контекстом, рассказывайте, зачем всё это — люди хотят быть частью чего-то большего.
– Обратная связь. Особенно позитивная и своевременная — она способна зарядить человека надолго.
– Развитие. Курс, новая задача, мини-проект, менторство — любые возможности расти.
– Поддержка. Иногда просто быть рядом — уже большая сила.

А что тебя по-настоящему мотивирует?)

🎯 React-разминка!

Всем привет!
Давайте сегодня попробуем решить интересную задачку 🔍

import * as React from 'react'
import { useState, useEffect, useLayoutEffect, useInsertionEffect } from 'react'
import { createRoot } from 'react-dom/client'

function App() {
  console.log(1)
  const [state, setState] = useState(0)

  useEffect(() => {
    setState(state => state + 1)
  }, [])

  useEffect(() => {
    console.log(2)
    return () => {
      console.log(3)
    }
  }, [state])

  useEffect(() => {
    console.log(4)
    return () => {
      console.log(5)
    }
  }, [state])

  useLayoutEffect(() => {
    console.log(6)
    return () => {
      console.log(7)
    }
  }, [state])

  useInsertionEffect(() => {
    console.log(8)
    return () => {
      console.log(9)
    }
  }, [state])

  console.log(10)
  return null
}

const root = createRoot(document.getElementById('root'))
root.render(<App/>)

📌 Вопрос: в каком порядке выведутся `console.log()`?
Пишите свои версии в комментариях!

🧠 Вечером выложу разбор с объяснением + ссылку на задачу, где можно засабмитить своё решение.

🥁 Барабанная дробь!
Правильный порядок вывода console.log:

1  
10  
8  
6  
2  
4  
1  
10  
9  
8  
7  
6  
3  
5  
2  
4

---

### 📘 Разбираемся, почему именно так:

* useLayoutEffect — работает как useEffect, но вызывается до того, как браузер успеет нарисовать изменения на экране - https://ru.react.dev/reference/react/useLayoutEffect
* useInsertionEffect — срабатывает ещё раньше, до useLayoutEffect и useEffect. Предназначен в основном для библиотек (например, для вставки стилей) - https://ru.react.dev/reference/react/useInsertionEffect
* useEffect — срабатывает после маунта и при изменении зависимостей. Думаю, ты его и так часто используешь 😉 - https://ru.react.dev/reference/react/useEffect#useeffect

---

### 🧩 Ход выполнения:

1. Сначала срабатывают синхронные логи:
→ 1, 10

2. Затем отрабатывает useInsertionEffect:
→ 8

3. Потом useLayoutEffect:
→ 6

4. Первый useEffect вызывает setState, происходит обновление состояния и ререндер

5. Перед началом рендера завершают работу остальные эффекты текущего рендера:
→ 2, 4

---

### 🔄 Второй рендер:

6. Опять срабатывают синхронные логи:
→ 1, 10

---

### ♻️ Что происходит с return внутри эффектов?

После каждого рендера, при изменении зависимостей:

> 🔁 Сначала вызываются функции очистки — это return из предыдущих вызовов хуков. Они отрабатывают на старых значениях
> 🆕 Затем запускаются новые эффекты — уже с обновлёнными данными

7. Сначала отрабатывает return из предыдущего useInsertionEffect:
→ 9

8. Затем вызывается новый useInsertionEffect:
→ 8

9. Далее useLayoutEffect:
→ 7 (функция очистки), потом 6 (новый вызов)

10. Первый `useEffect` больше не срабатывает, так как у него пустой массив зависимостей — он выполняется только один раз.

11. Поэтому вызываются только функции очистки из второго и третьего useEffect:
→ 3, 5

12. А затем — их новые вызовы:
→ 2, 4

---

🎯 Задача отсюда:
https://bigfrontend.dev/react-quiz/all-kinds-of-effects

💡 ESLint теперь умеет проверять HTML!

Ещё в 2024 году команда ESLint объявила о планах сделать инструмент независимым от конкретного языка — и начать поддерживать не только JavaScript. С тех пор появилась официальная поддержка JSON, Markdown, а совсем недавно — и CSS.

А теперь отличные новости: с помощью плагина @html-eslint/eslint-plugin можно линтить HTML-файлы! 🎉 об этом было анонсировано 13 мая этого года.

Плагин уже включает набор правил, связанных с:

* лучшими практиками,
* стилем кода,
* SEO-оптимизацией,
* доступностью (a11y).

🔗 Подробнее: https://eslint.org/blog/2025/05/eslint-html-plugin

👩‍💻 Всем привет!

Сегодня хочу поднять интересную тему: а нужно ли вообще делить разработчиков на frontend и backend? И почему в крупных IT-компаниях всё чаще называют инженеров просто software engineers, без уточнений?

До того как я устроилась работать на российский рынок, я позиционировала себя как full stack разработчик. Да чего я только ни делала 😂
Но потом столкнулась с суровой реальностью: пришлось выбрать направление — и я ушла во фронт.

Недавно болтала с другом, который работает в Amazon, и спросила его:
👉 "На чём ты там кодишь?"
Он ответил: "У нас есть свой внутренний язык и ещё TypeScript."
И при этом он не называет себя ни фронтендером, ни бэкендером — просто software engineer.

И вот я задумалась:
🤔 А нужно ли вообще это деление?
🤝 Или в идеале разработчик должен быть универсальным инженером, решающим задачи целиком?

💭 Моё мнение:
Без деления не будет глубины знаний. Но вместе с этим появляется риск узкой специализации — когда человек силён в одном, но теряется в другом. В одиночку таким специалистам сложно закрывать задачи целиком.
С другой стороны — а нужно ли это вообще? 🤷‍♀️
Зачем тогда команда, если ты можешь всё сам?

Хотя всё равно, на мой взгляд, важно, чтобы инженер хотя бы немного разбирался в обе стороны.
Я, например, всегда была немного T-shapeнутой 😂

А что думаете вы? Делитесь опытом в комментах — будет интересно обсудить!

Смотрите как красиво 😍 Мои глаза, уши, голова просто отдыхают смотря на это 😍

https://www.igloo.inc/

Этот сайт был отмечен наградой Site of the Day на Awwwards в 2024 году за выдающийся UX/UI и использование 3D-анимаций, WebGL и интерактивных элементов .
https://www.awwwards.com/sites/igloo-inc

Знаете, в чём профит ведения Telegram-канала?

В том, что я стала буквально одержима новостями из мира фронтенда — и не только 😅 Всё время хочется что-то читать, листать, шерить… Но, к сожалению, мусора в инфополе очень много.

Читаешь статью и думаешь: *в чём суть? где ценность? зачем я вообще это прочитала?..*
И всё чаще ловлю себя на мысли, что про это писать не стоит, а вот то — вообще откровенное 🤦‍♀️
Да, аудитория у меня пока маленькая, но даже перед вами я чувствую ответственность — делиться только тем, что действительно полезно и интересно.

Так вот к чему я всё это...

🧵 Недавно, в поисках чего-то нового, наткнулась на вот эту статью:
👉 https://bun.sh/blog/bun-v1.2.14

📦 21 мая вышел свежий релиз Bun — и, к своему стыду (а может и нет 😅), вообще про него не слышала 🤣
А он, оказывается, реально крутая штука:

— пакетный менеджер
— сборщик
— рантайм для JS и TS
— и даже встроенный тест-раннер 🤯

Что за чудо-инструмент 😂

А вы уже пробовали Bun в продакшене или пилили с ним пет-проекты?
Поделитесь опытом — очень интересно! 💬

Всем привет!

Как многие из вас знают, на прошлой неделе прошла конференция Google I/O 2025, где представили множество интересных новинок. Одна из них — новые возможности CSS для создания каруселей без JavaScript!

✨ Что появилось в Chrome 135:

🔹 ::scroll-marker() — добавляет интерактивные маркеры прокрутки, которые позволяют пользователям легко ориентироваться и переходить к нужному слайду.

🔹 ::scroll-button() — создаёт встроенные кнопки прокрутки прямо средствами CSS. Никакого JS — всё работает «из коробки».

💡 Эти новые псевдоэлементы позволяют создавать карусели с минимальным количеством кода.
Например, в Pinterest смогли сократить реализацию карусели с 2000 строк JavaScript до 200 строк CSS!
🔗 https://developer.chrome.com/blog/web-at-io25

📚 Подробнее с примерами, есть даже демки на codepen:
https://developer.chrome.com/blog/carousels-with-css

⚠️ А как насчёт кроссбраузерности?
На данный момент эти фичи поддерживаются только в Chrome 135+. Пока что для продакшена стоит использовать с осторожностью и предусматривать fallback'и.

Почему мне так смешно 🤣🤣🤣

Сайт отзывчивый, но есть нюанс

@ithumor

Вы уже видели?

🚀 Вчера вышла версия v1.0.0 SDK от Google Gen AI для TypeScript/JavaScript!

Вот что нового:

✨ Поддерживаются:

* Live API — стриминг ответов в реальном времени
* MCP (Multi-turn Chat Prompting)
* TTS (Text-to-Speech)
* Модели генерации изображений и видео
* Интеграция с Gemini API и Vertex AI

📦 Установка:

npm install @google-genai

📘 Официальная документация:
https://googleapis.github.io/js-genai/release_docs/index.html

Надёжное обнаружение блокировки third-party cookies в 2025 году

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

Из-за неконсистентности браузеров блокировку сторонних кук не всегда легко выявить.

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

🔗 https://www.smashingmagazine.com/2025/05/reliably-detecting-third-party-cookie-blocking-2025/

Всем привет!

Сегодня — по горячим следам — хочу разобрать одну проблему, на которую я уже натыкалась как минимум пару раз 😅 Причём код изначально писала не я даже — ко мне просто приходили и говорили: "ничего не работает!"

Думаю, многие из вас знакомы с объектом URL. Подробнее можно почитать здесь:
https://developer.mozilla.org/ru/docs/Web/API/URL/URL

Сигнатура конструктора:
new URL(url, [base])

❗️И вот тут важно быть внимательным — особенно к тому, есть ли слэш `/` в конце base или нет.
Но не только это!

Сравните:

new URL('/clients', 'https://hostname/base').toString(); 
// 👉 https://hostname/clients (куда делся base?)

new URL('clients', 'https://hostname/base').toString();
// 👉 https://hostname/clients (тоже самое)

new URL('/clients', 'https://hostname/base/').toString(); 
// 👉 https://hostname/clients (и тут его нету)

Но! Если написать вот так:

new URL('clients', 'https://hostname/base/').toString();
// 👉 https://hostname/base/clients ✅

📌 Почему так происходит?

Поведение зависит сразу от двух вещей:

1. Заканчивается ли base на /
2. Начинается ли url с /

Если url начинается с /, он считается абсолютным путём от корня хоста, и весь путь из base будет проигнорирован — даже если base заканчивается слэшем.

Поэтому:

* '**/clients**' → абсолютный путь, затирает всё из base кроме хоста
* '**clients**' → относительный путь, добавляется к base если путь в base заканчивается со /

---

🧠 Вывод:

* Один / в начале или конце может полностью изменить итоговую ссылку!

---

📚 Подробнее о том, какие есть свойства у объекта URL, можно почитать здесь:
https://htmlacademy.ru/blog/js/url

Mastering Creational Design Patterns in JavaScript: экспертный гайд

Всем привет!
Нашла отличную статью про порождающие паттерны проектирования в JavaScript — https://jsdev.space/creational-design-patterns/.

Статья без воды и легко читается. Обычно подобные материалы ориентированы на Java, но здесь всё — на JavaScript 🙌

В ней вы найдёте примеры таких порождающих паттернов, как:

* Singleton (Одиночка)
* Prototype (Прототип)
* Factory (Фабрика)
* Builder (Строитель)

Очень рекомендую к прочтению, особенно если хотите систематизировать знания по паттернам в JS 💡

You're not a front-end developer until you've...

Прикольный quiz на тему: «Ты не фронтенд-разработчик, если не делал этого» 😄

Недавно один разработчик по имени Nic Chan осознал, что работает в веб-разработке уже 10 лет! (У меня, кстати, пока только 9 — ровно 9 лет 😂 вот в мае стукнуло)

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

Вот несколько пунктов (перевод ниже):

- Потратил три часа, пытаясь понять, откуда взялся горизонтальный скроллбар 😂
- Просили сдвинуть элемент на два пикселя вправо 🤣
- Уронил прод 😭

👉 Полный список: https://www.nicchan.me/blog/youre-not-a-front-end-developer-until-youve/

Ну и как вам подобный чеклист? Сколько у вас получилось совпадений?)

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

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

Мне кажется что также нужно писать и о простых вещах. Да при желании эту информацию очень легко найти, но как говорится мало ли может кто-нибудь в данный момент искал ответ на этот вопрос)

Поэтому вашему вниманию 🥁🥁🥁

🚀 Debounce vs Throttle: в чём разница?

Представьте: у вас есть поисковая строка, которая отправляет запрос на сервер при каждом вводе. Если делать это на каждый input — будут лишние запросы и нагрузка.

Решение: debounce и throttle — два способа контролировать частоту вызова функции. Но в чём разница?

1. Debounce
- Как работает: это функция, которая «откладывает» вызов другой функции до того момента, когда с последнего вызова пройдёт определённое количество времени, то есть ждёт, пока действия прекратятся на N миллисекунд, и только потом вызывает функцию.
- Пример: Поиск, который срабатывает только после паузы в вводе (например, 500 мс).

2. Throttle
- Как работает: это функция, которая вызывает другую функцию, «пропуская» некоторые вызовы с определённой периодичностью, то есть позволяет вызывать функцию не чаще, чем раз в N миллисекунд.
- Пример: Обработчик скролла, который срабатывает раз в 100 мс (а не на каждый пиксель).

Главное отличие:
- Debounce — ждёт "тишины".
- Throttle — гарантирует вызов не чаще, чем нужно.

Ниже приведены примеры из доки с реализацией:

https://doka.guide/js/debounce/
https://doka.guide/js/throttle/

ECMAScript 2025 утвержден!

25 июня на 129-й Ассамблее Ecma International утвердили спецификацию ES2025 🎉
С полным списком изменений можно ознакомиться здесь:
🔗 https://2ality.com/2025/06/ecmanoscript-2025.html
https://socket.dev/blog/ecmanoscript-2025-finalized

Мне показались особенно интересными следующие нововведения:

🔹 `Promise.try()`
Упрощает работу с синхронным кодом в промис-цепочках

🔹 Новые методы у `Set`
union, intersection, difference, symmetricDifference, isSubsetOf, и другие.
🔥 Больше операций — меньше велосипедов и Array.from(set).filter().

🔹 Хелперы для итераторов
iterator.map(), .filter(), .drop(), .take(), .toArray() —
Удобно, читаемо и без промежуточных массивов.

🚀 Node.js 24: Your Next Big Frontend Upgrade?

Наткнулась на классную статью, где поднимается важный вопрос —
а почему мы вообще не обновляем Node.js вовремя? 🤔

Часто разработчики сидят, например, на 16-й ноде,
а потом резко перескакивают на 20-ю, минуя всё, что было между.

В статье https://thenewstack.io/node-js-24-your-next-big-frontend-upgrade/ Matteo Collina искренне негодует, почему многие до сих пор не обновились,
и напоминает, что обновления — это в первую очередь про безопасность
и доступ к реально полезным новым фичам)

📈 Node 12 (!) всё ещё скачивают миллионы раз в месяц…
И автор статьи явно не понимает, почему.

А вы что думаете?
🧩 Следите за новыми релизами Node? Обновляетесь? Или "и так работает — не трогаем"? 😅

Всем привет 👋
Кажется, в моем канале всё больше набирают популярность две темы:

1. Реальные кейсы из опыта
2. Объяснение фронтенд-тем простым языком

Ну что, погнали!
Сегодня вашему вниманию тема: FavIcon — что это за зверь такой?
Есть люди, которые ни разу не добавляли его к реальному сайту — давайте разбираться.

---

Что такое Favicon?

Favicon (сокращение от *favorite icon*) — это маленький значок, который отображается:

* во вкладках браузера рядом с названием сайта
* в закладках
* и даже в истории посещений

Своё название favicon получил от функции "Favorites" в старом Internet Explorer — сейчас это просто "Bookmarks" или закладки в большинстве браузеров.

---

Форматы favicon

🔹 ICO — favicon.ico
Формат ICO был разработан Microsoft и является самым универсальным.
Он позволяет хранить в одном файле несколько изображений разного размера (например, 16x16, 32x32 и 48x48 пикселей), что удобно для разных экранов.
✅ Поддерживается всеми браузерами
⚠️ Это единственный формат, который работает в IE5–IE10

🔹 PNG — favicon.png
Формат, к которому все привыкли — легко создать в любом графическом редакторе.
На современных экранах PNG-иконки зачастую выглядят чётче, чем ICO.
❌ Но не поддерживается старыми IE (версии 5–10)

🔹 SVG — favicon.noscript
SVG — это векторный формат, он лёгкий и масштабируется без потери качества.
Картинка остаётся чёткой на любом экране, и весит при этом очень мало.
❌ Пока поддерживается только в Chrome, Firefox и Opera

---

Какие размеры и как подключить?

🟡 Favicon должен быть квадратным.

* ICO: 16x16, 32x32, 48x48
* PNG: 16x16 и 32x32, но подойдут и любые другие квадратные размеры
* SVG: может быть любого размера — он масштабируется сам

📌 Чтобы подключить favicon к сайту, нужно добавить в <head> HTML:

<link rel="icon" href="favicon.ico" type="image/x-icon" />

А сам файл положить рядом с index.html или указать путь вручную.

---

📚 Полезные ссылки:

* https://favicon.io/tutorials/what-is-a-favicon/
* https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata#adding_custom_icons_to_your_site
* https://developer.mozilla.org/en-US/docs/Glossary/Favicon

🕰 How well do you know JavaScript's Date class?

Смотрите, какой смешной quiz я нашла про объект Date в JS — https://jsdate.wtf/ 🤯

Всего 28 вопросов — и это нужно иметь какую фантазию, чтобы придумать столько странностей? 😂

Советую пробежаться:
— чтобы посмеяться 😂
— расслабиться 🧘‍♀️ (хотя не знаю даже 😂)
— и, возможно, узнать что-то новое 💡

📌 Фишка: после каждого вопроса есть объяснение, почему ответ именно такой — так что это не просто развлечение, но и прокачка 🧠