OpenTelemetry in Practice: Instrumenting JavaScript Apps for Tracing
Статья про интеграцию nodejs и браузерных js приложений в OpenTelemetry.
OpenTelemetry - это проект, который предлагает фреймворк для сбора, обработки и экспорта телеметрии (сигналов, трейсов, логов), и вокруг которого можно настроить разные бекенды для анализа телеметрии.
Если говорить простым языком, то OpenTelemetry позволяет реализовать в проекте хороший observability, когда вы, расследуя какой-то инцидент с прода и зная traceId одного из запросов, можете восстановить весь процесс обработки запроса пользователя от "клика на кнопку" и до запросов в базу. Причем, это все можно красиво визуализировать, агрегировать и по разному обрабатывать.
Вернемся к JS. OpenTelementry описывает протокол, по которому нужно передавать телеметрию, а также дает готовый sdk для подключения в nodejs и браузер, который отправляет базовую телеметрию (не уверен точно какую, но как минимум исполняемые http запросы должны логироваться). SDK для подключения, судя по всему, супер гибкое, поэтому чтоб подключить SDK надо установить около 10 npm пакетов и написать около 50 строчек инициализации.
В статье коротко рассказывается и показывается, как подключить OpenTelementry в nodejs и браузерное приложение, как локально поднять простой коллектор для данных и смотреть трейсы со своим приложений
https://marmelab.com/blog/2024/03/14/opentelemetry-in-practice-instrumenting-javascript-apps-for-tracing.html
#development #javascript #nodejs #opentelemetry #monitoring #sre
Статья про интеграцию nodejs и браузерных js приложений в OpenTelemetry.
OpenTelemetry - это проект, который предлагает фреймворк для сбора, обработки и экспорта телеметрии (сигналов, трейсов, логов), и вокруг которого можно настроить разные бекенды для анализа телеметрии.
Если говорить простым языком, то OpenTelemetry позволяет реализовать в проекте хороший observability, когда вы, расследуя какой-то инцидент с прода и зная traceId одного из запросов, можете восстановить весь процесс обработки запроса пользователя от "клика на кнопку" и до запросов в базу. Причем, это все можно красиво визуализировать, агрегировать и по разному обрабатывать.
Вернемся к JS. OpenTelementry описывает протокол, по которому нужно передавать телеметрию, а также дает готовый sdk для подключения в nodejs и браузер, который отправляет базовую телеметрию (не уверен точно какую, но как минимум исполняемые http запросы должны логироваться). SDK для подключения, судя по всему, супер гибкое, поэтому чтоб подключить SDK надо установить около 10 npm пакетов и написать около 50 строчек инициализации.
В статье коротко рассказывается и показывается, как подключить OpenTelementry в nodejs и браузерное приложение, как локально поднять простой коллектор для данных и смотреть трейсы со своим приложений
https://marmelab.com/blog/2024/03/14/opentelemetry-in-practice-instrumenting-javascript-apps-for-tracing.html
#development #javascript #nodejs #opentelemetry #monitoring #sre
Marmelab
OpenTelemetry in Practice: Instrumenting JavaScript Apps for Tracing
We've enabled OpenTelemetry on some of our Node.js APIs and their React client, and it was surprisingly easy. The full-stack traces let us debug faster. This hands-on guide explains how to do it.
Type Predicate Inference: The TS 5.5 Feature No One Expected
В TS 5.5 появится автоматическое уточнение типов у функций-предикатов. Проще всего это объяснить на примерах
Typescript давно умеет уточнять типы в условиях: если мы будем проверять тип переменной в условии if, то в теле if переменная будет уточненного типа
С функциями типа
Однако, есть 2 проблемы: 1) нужно не забывать писать этот специальный синтаксис 2) TS не проверяет, действительно ли тело функции сходится с объявленной проверкой. Например, если случайно указать
В релизе 5.5 Typescript сам будет уточнять тип переменных в таких функциях
И это работает даже в более сложных примерах
Однако, это все еще не будет работать для
https://www.totaltypescript.com/type-predicate-inference
#development #typescript
В TS 5.5 появится автоматическое уточнение типов у функций-предикатов. Проще всего это объяснить на примерах
Typescript давно умеет уточнять типы в условиях: если мы будем проверять тип переменной в условии if, то в теле if переменная будет уточненного типа
console.log(value); // value: string | number
if (typeof value === "string") {
console.log(value); // value: string
}
С функциями типа
isString такое не работало, пока не добавили специальный синтаксисfunction isString(value: unknown): value is string {
return typeof value === "string";
}
if (isString(value)) {
console.log(value); // const value: string
}
Однако, есть 2 проблемы: 1) нужно не забывать писать этот специальный синтаксис 2) TS не проверяет, действительно ли тело функции сходится с объявленной проверкой. Например, если случайно указать
is number вместо is string и TS ничего не скажет на этот счетВ релизе 5.5 Typescript сам будет уточнять тип переменных в таких функциях
function isString(value: unknown) {
return typeof value === "string";
}
if (isString(value)) {
console.log(value); // string
}
И это работает даже в более сложных примерах
function isObjAndHasIdProperty(value: unknown) {
return (
typeof value === "object" &&
value !== null &&
"id" in value &&
typeof value.id === "number"
);
}
if (isObjAndHasIdProperty(value)) {
console.log(value.id); // number
}
Однако, это все еще не будет работать для
arr.filter(Boolean) т.к. Boolean - это не предикат. Но эта проблема решается установкой ts-resethttps://www.totaltypescript.com/type-predicate-inference
#development #typescript
Total TypeScript
Type Predicate Inference: The TS 5.5 Feature No One Expected
TypeScript 5.5 introduces type predicate inference from function bodies, simplifying type narrowing and making development easier.
Node.js: The Documentary | An origin story
Вышла документалка про node.js. Я еще не смотрел (но собираюсь посмотреть), но судя по навигации, документалка посвящена истории создания ноды: от появления самой идеи использовать v8 для рантайма, до драмы о разделении коммьюнити на 2 лагеря (io.js и node.js) и дальнейшего их воссоединения
https://www.youtube.com/watch?v=LB8KwiiUGy0
#development #nodejs #documentary #youtube
Вышла документалка про node.js. Я еще не смотрел (но собираюсь посмотреть), но судя по навигации, документалка посвящена истории создания ноды: от появления самой идеи использовать v8 для рантайма, до драмы о разделении коммьюнити на 2 лагеря (io.js и node.js) и дальнейшего их воссоединения
https://www.youtube.com/watch?v=LB8KwiiUGy0
#development #nodejs #documentary #youtube
YouTube
Node.js: The Documentary | An origin story
Back in 2008, most people thought of JavaScript as just a client-side language. But when Google's V8 appeared, young developer Ryan Dahl made the connection between non-blocking servers, V8, and JavaScript. It was by combining these key elements that he was…
Дайджест за 2024-03-25 - 2024-03-28
Type system of the React compiler
Статья про систему типов в разрабатываемом компиляторе React Forget. В данной статье объясняется, как на основе анализа кода компилятор может понять, что используемые функции и переменные оперируют только примитивами и поэтому их не нужно оборачивать в useMemo, сохранив устройство немного ОЗУ и уменьшив размер поставляемого бандла.
Использование своей системы типов позволяет React'у не только оптимизировать код на этапе компиляции, но и проводить проверки корректности использования кода. Например, запрещать мутировать state из useState.
OpenTelemetry in Practice: Instrumenting JavaScript Apps for Tracing
Статья про интеграцию nodejs и браузерных js приложений в OpenTelemetry.
OpenTelemetry - это проект, который предлагает фреймворк для сбора, обработки и экспорта телеметрии (сигналов, трейсов, логов), и вокруг которого можно настроить разные бекенды для анализа телеметрии.
Type Predicate Inference: The TS 5.5 Feature No One Expected
В TS 5.5 появится автоматическое уточнение типов у функций-предикатов. Проще всего это объяснить на примерах
Typescript давно умеет уточнять типы в условиях: если мы будем проверять тип переменной в условии if, то в теле if переменная будет уточненного типа
Node.js: The Documentary | An origin story
Вышла документалка про node.js. Я еще не смотрел (но собираюсь посмотреть), но судя по навигации, документалка посвящена истории создания ноды: от появления самой идеи использовать v8 для рантайма, до драмы о разделении коммьюнити на 2 лагеря (io.js и node.js) и дальнейшего их воссоединения
https://www.youtube.com/watch?v=LB8KwiiUGy0
——————————————
Спасибо что читаете, ставите реакции и отмечаетесь в комментариях. Если вы хотите помочь каналу - расскажите о нем своим коллегамдрузьям. Также оставляйте фидбек по формату, материалу и чему-угодно еще 🙂
Type system of the React compiler
Статья про систему типов в разрабатываемом компиляторе React Forget. В данной статье объясняется, как на основе анализа кода компилятор может понять, что используемые функции и переменные оперируют только примитивами и поэтому их не нужно оборачивать в useMemo, сохранив устройство немного ОЗУ и уменьшив размер поставляемого бандла.
Использование своей системы типов позволяет React'у не только оптимизировать код на этапе компиляции, но и проводить проверки корректности использования кода. Например, запрещать мутировать state из useState.
OpenTelemetry in Practice: Instrumenting JavaScript Apps for Tracing
Статья про интеграцию nodejs и браузерных js приложений в OpenTelemetry.
OpenTelemetry - это проект, который предлагает фреймворк для сбора, обработки и экспорта телеметрии (сигналов, трейсов, логов), и вокруг которого можно настроить разные бекенды для анализа телеметрии.
Type Predicate Inference: The TS 5.5 Feature No One Expected
В TS 5.5 появится автоматическое уточнение типов у функций-предикатов. Проще всего это объяснить на примерах
Typescript давно умеет уточнять типы в условиях: если мы будем проверять тип переменной в условии if, то в теле if переменная будет уточненного типа
Node.js: The Documentary | An origin story
Вышла документалка про node.js. Я еще не смотрел (но собираюсь посмотреть), но судя по навигации, документалка посвящена истории создания ноды: от появления самой идеи использовать v8 для рантайма, до драмы о разделении коммьюнити на 2 лагеря (io.js и node.js) и дальнейшего их воссоединения
https://www.youtube.com/watch?v=LB8KwiiUGy0
——————————————
Спасибо что читаете, ставите реакции и отмечаетесь в комментариях. Если вы хотите помочь каналу - расскажите о нем своим коллегамдрузьям. Также оставляйте фидбек по формату, материалу и чему-угодно еще 🙂
Как в Node.js контролировать потребление памяти при обработке сетевых запросов
Статья на хабре от Тинькофф про потоковую обработку данных в node.js небольшими порциями. При обработке запросов расходуется память - ведь нужно все пришедшие реквесты где-то хранить перед их обработкой. Один из способов вызвать DoS - это отправить много очень тяжелых запросов на бекенд и тем самым вызвать у него падение по потреблению памяти. Поэтому в высоконагруженных проектах необходимо чутко относится к обработке запросов. В статье рассказывается, как обрабатывать запросы на node.js и не падать по памяти
Техника, о которой говорится в статье, одновременно и проста и сложна. Нужно спроектировать такой протокол передачи данных, чтобы не нужно было дожидаться получения всех данных для их обработки. Это открывает нам возможность обрабатывать данные потоками. В свою очередь, TCP-протокол поддерживает явное указание сервером количества пакетов, которые он может принять.
Суммарно это дает следующее решение: в node.js создается Stream, в котором указано количество данных, после которого приостанавливается наполнение Stream (эта отметка называется
Как итог: запрос обрабатывается потоково, nodejs не расходует лишнюю память.
Данная статья очень хороша тем, что объясняет и работу потоков в nodejs, объясняет немножко про TCP и показыает реальный кейс оптимизации nodejs приложения.
https://habr.com/ru/companies/tinkoff/articles/799709/
#development #nodejs #performance #stream #habr #recommended
Статья на хабре от Тинькофф про потоковую обработку данных в node.js небольшими порциями. При обработке запросов расходуется память - ведь нужно все пришедшие реквесты где-то хранить перед их обработкой. Один из способов вызвать DoS - это отправить много очень тяжелых запросов на бекенд и тем самым вызвать у него падение по потреблению памяти. Поэтому в высоконагруженных проектах необходимо чутко относится к обработке запросов. В статье рассказывается, как обрабатывать запросы на node.js и не падать по памяти
Техника, о которой говорится в статье, одновременно и проста и сложна. Нужно спроектировать такой протокол передачи данных, чтобы не нужно было дожидаться получения всех данных для их обработки. Это открывает нам возможность обрабатывать данные потоками. В свою очередь, TCP-протокол поддерживает явное указание сервером количества пакетов, которые он может принять.
Суммарно это дает следующее решение: в node.js создается Stream, в котором указано количество данных, после которого приостанавливается наполнение Stream (эта отметка называется
highWaterMark). Этот Stream обарабатывается через for await of и связывается с обработчиком request. Node.js видя, что request связан со стримом, у которого есть highWaterMark, отправляет клиенту по TCP-соединению информацию о том, сколько еще данных можно отослать. Как итог: запрос обрабатывается потоково, nodejs не расходует лишнюю память.
Данная статья очень хороша тем, что объясняет и работу потоков в nodejs, объясняет немножко про TCP и показыает реальный кейс оптимизации nodejs приложения.
https://habr.com/ru/companies/tinkoff/articles/799709/
#development #nodejs #performance #stream #habr #recommended
Хабр
Как в Node.js контролировать потребление памяти при обработке сетевых запросов
Всем привет! Я Виктор Кугай, руководитель команды разработки спецпроектов в Тинькофф. Мы создаем геймификационные проекты, основанные на данных, чтобы познакомить пользователей с экосистемой компании...
Для подписчиков из Новосибирска: 9 апреля SRE-Митап в Новосибирске
https://meetup.tinkoff.ru/event/sre-on-the-road-novosibirsk/
Программа:
18:30 - 19:00 Регистрация участников
19:00 - 19:40 Вячеслав Хаверко, Паттерны отказоустойчивой архитектуры
19:40 - 19:45 Перерыв
19:45 - 20:25 Максим Снежков, Аварийное восстановление Kubernetes в Cluster API
20:25 - 20:30 Перерыв
20:30 - 21:10 Лев Алимов, SRE+GPT. Использование LLM в повседневной работе инженера
21:10 Нетворкинг
https://meetup.tinkoff.ru/event/sre-on-the-road-novosibirsk/
Программа:
18:30 - 19:00 Регистрация участников
19:00 - 19:40 Вячеслав Хаверко, Паттерны отказоустойчивой архитектуры
19:40 - 19:45 Перерыв
19:45 - 20:25 Максим Снежков, Аварийное восстановление Kubernetes в Cluster API
20:25 - 20:30 Перерыв
20:30 - 21:10 Лев Алимов, SRE+GPT. Использование LLM в повседневной работе инженера
21:10 Нетворкинг
Тинькофф Митапы
Митап SRE on the Road: Новосибирск
Тинькофф отправляется в путь, чтобы поделиться с инженерами, разработчиками и архитекторами опытом по созданию надежных сервисов. Присоединяйтесь к SRE on the Road в Новосибирске!
JavaScript Visualized: Promise Execution
Крутой визуализированный гайд по Promise. Короткий обзор про то, как работают промисы, как разбирается очередь микротасок и все это очень круто визуализировано
https://www.lydiahallie.com/blog/promise-execution
#development #javascript #Promise #guide #recommended
Крутой визуализированный гайд по Promise. Короткий обзор про то, как работают промисы, как разбирается очередь микротасок и все это очень круто визуализировано
https://www.lydiahallie.com/blog/promise-execution
#development #javascript #Promise #guide #recommended
Lydiahallie
JavaScript Visualized - Promise Execution
This guide covers some of the inner workings of Promises, exploring how they leverage concepts like the Microtask Queue and Event Loop to enable non-blocking async code. Follow along with easy-to-understand examples and visualizations.
JavaScript Playground: Write and run code with instant live feedback.
Playground для запуска JS-кода, который показывает результат работы expression'ов (например, вы написали
https://runjs.app/play
#development #javascript #playground
Playground для запуска JS-кода, который показывает результат работы expression'ов (например, вы написали
5*5, а playground рядом покажет 25). Выглядит очень круто.https://runjs.app/play
#development #javascript #playground
RunJS
RunJS - JavaScript Playground | Run JavaScript Online
An easy-to-use online JavaScript editor with live feedback. Write and run JavaScript instantly. Great for learning and prototyping.
We Rewrote our React App in Svelte in Three Weeks
Короткая история, как Dusty Phillips вместе со своей женой развивали небольшой проект (приложение для написания историй) и столкнулись с проблемой реализации drag-and-drop в React, но нашли хорошее решение на Svelte. Svelte настолько им понравился, что они переписали все приложение на нем
Какие основные плюсы Svelte, по сравнению с React, выделяет автор:
- Более быстрая разработка (в тексте буквально есть передергивание "сделал на Svelte за 1 день то, что на React мы тратили 6 недель")
- Необходимо писать меньше кода
- Разработка на Svelte намного веселее, чем разработка на React. А с релизом Svelte 5 станет еще веселее
- Легче изучить. Для начала разработки на Svelte необходимо знать HTML, JS и CSS.
В целом миграция прошла удачно т.к. в проекте уже были Cypress-тесты (если я правильно понял текст).
Кроме того видно, что пришлось побороться с реактивностью Svelte (как, наверное, и всем, кто начал трогать Svelte). Но в Svelte5 реактивность будет более управляемой, что должно пойти на пользу разработчикам. Тем, кого заинтересует статья, автор рекомендует подождать Svelte5
Также автор выделил один большой минус Svelte - сложно добавлять стили в используемые внешние компоненты. Как следствие, использование любого ui-kit'а отзывается болью борьбы со стилями.
https://dusty.phillips.codes/2024/03/20/we-rewrote-our-react-app-in-svelte-in-three-weeks/
#development #javascript #react #svelte #refactoring
Короткая история, как Dusty Phillips вместе со своей женой развивали небольшой проект (приложение для написания историй) и столкнулись с проблемой реализации drag-and-drop в React, но нашли хорошее решение на Svelte. Svelte настолько им понравился, что они переписали все приложение на нем
Какие основные плюсы Svelte, по сравнению с React, выделяет автор:
- Более быстрая разработка (в тексте буквально есть передергивание "сделал на Svelte за 1 день то, что на React мы тратили 6 недель")
- Необходимо писать меньше кода
- Разработка на Svelte намного веселее, чем разработка на React. А с релизом Svelte 5 станет еще веселее
- Легче изучить. Для начала разработки на Svelte необходимо знать HTML, JS и CSS.
В целом миграция прошла удачно т.к. в проекте уже были Cypress-тесты (если я правильно понял текст).
Кроме того видно, что пришлось побороться с реактивностью Svelte (как, наверное, и всем, кто начал трогать Svelte). Но в Svelte5 реактивность будет более управляемой, что должно пойти на пользу разработчикам. Тем, кого заинтересует статья, автор рекомендует подождать Svelte5
Также автор выделил один большой минус Svelte - сложно добавлять стили в используемые внешние компоненты. Как следствие, использование любого ui-kit'а отзывается болью борьбы со стилями.
https://dusty.phillips.codes/2024/03/20/we-rewrote-our-react-app-in-svelte-in-three-weeks/
#development #javascript #react #svelte #refactoring
Dusty Phillips Codes
We Rewrote our React App in Svelte in Three Weeks
My wife and I have been working on Fablehenge—a
writing app for novelists—for several years. It had been a free time project
where we’d push hard over a few weekends, then let it sit idle for a couple
months perhaps tinkering in the evenings when we had a…
writing app for novelists—for several years. It had been a free time project
where we’d push hard over a few weekends, then let it sit idle for a couple
months perhaps tinkering in the evenings when we had a…
3D DOM viewer, copy-paste this into your console to visualise the DOM topographically.
Сниппет js-кода, который визуализирует в 3D DOM-дерево страницы. Открываете свой любимый сайт, копируете код из сниппета в консоль, выполняете и наслаждаетесь приколдесной визуализацией.
Насколько знаю, что-то подобное есть нативно и в DevTools, но тут весь прикол как раз в том, что это сделано небольшим сниппетом js-кода.
https://gist.github.com/OrionReed/4c3778ebc2b5026d2354359ca49077ca
#development #javascript
Сниппет js-кода, который визуализирует в 3D DOM-дерево страницы. Открываете свой любимый сайт, копируете код из сниппета в консоль, выполняете и наслаждаетесь приколдесной визуализацией.
Насколько знаю, что-то подобное есть нативно и в DevTools, но тут весь прикол как раз в том, что это сделано небольшим сниппетом js-кода.
https://gist.github.com/OrionReed/4c3778ebc2b5026d2354359ca49077ca
#development #javascript
Gist
3D DOM viewer, copy-paste this into your console to visualise the DOM topographically.
3D DOM viewer, copy-paste this into your console to visualise the DOM topographically. - dom3d.js
Tinkoff запускает командное соревнование Tinkoff CTF с призовым фондом.
Я сам не любитель такого формата, но наверняка кому то будет интересно.
Что нужно делать: есть задачки связанные с инфобезом, надо их решать. Что-то типа спортивного программирования, но это спортивный хакинг.
Разбор одной из задач есть на хабре и он достаточно интересный и полезный, как минимум, для общего развития (декомпилириуется Android APK, подменяются ресурсы, перехватываются сетевые запросы к мобильному приложику).
Соревнование идет в командах до 3х человек. На всё про всё - 36 часов от 9 утра 20 апреля, до 9 вечера 21 апреля.
Участвовать можно как в онлайне, так и в офлайне в офисах Тинькофф в Москве и регионах (в том числе в Новосибирске).
Регистрация тут
Я сам не любитель такого формата, но наверняка кому то будет интересно.
Что нужно делать: есть задачки связанные с инфобезом, надо их решать. Что-то типа спортивного программирования, но это спортивный хакинг.
Разбор одной из задач есть на хабре и он достаточно интересный и полезный, как минимум, для общего развития (декомпилириуется Android APK, подменяются ресурсы, перехватываются сетевые запросы к мобильному приложику).
Соревнование идет в командах до 3х человек. На всё про всё - 36 часов от 9 утра 20 апреля, до 9 вечера 21 апреля.
Участвовать можно как в онлайне, так и в офлайне в офисах Тинькофф в Москве и регионах (в том числе в Новосибирске).
Регистрация тут
ctf.tinkoff.ru
Соревнование по спортивному хакингу Tinkoff CTF
Соревнование по спортивному хакингу Tinkoff CTF для разработчиков, SRE- и QA-инженеров, аналитиков
Дайджест за 2024-04-01 - 2024-04-05
Как в Node.js контролировать потребление памяти при обработке сетевых запросов
Статья на хабре от Тинькофф про потоковую обработку данных в node.js небольшими порциями. При обработке запросов расходуется память - ведь нужно все пришедшие реквесты где-то хранить перед их обработкой. Один из способов вызвать DoS - это отправить много очень тяжелых запросов на бекенд и тем самым вызвать у него падение по потреблению памяти. Поэтому в высоконагруженных проектах необходимо чутко относится к обработке запросов. В статье рассказывается, как обрабатывать запросы на node.js и не падать по памяти
Для подписчиков из Новосибирска: 9 апреля SRE-Митап в Новосибирске
JavaScript Visualized: Promise Execution
Крутой визуализированный гайд по Promise. Короткий обзор про то, как работают промисы, как разбирается очередь микротасок и все это очень круто визуализировано
JavaScript Playground: Write and run code with instant live feedback.
Playground для запуска JS-кода, который показывает результат работы expression'ов (например, вы написали 5*5, а playground рядом покажет 25). Выглядит очень круто.
We Rewrote our React App in Svelte in Three Weeks
Короткая история, как Dusty Phillips вместе со своей женой развивали небольшой проект (приложение для написания историй) и столкнулись с проблемой реализации drag-and-drop в React, но нашли хорошее решение на Svelte. Svelte настолько им понравился, что они переписали все приложение на нем
3D DOM viewer, copy-paste this into your console to visualise the DOM topographically.
Сниппет js-кода, который визуализирует в 3D DOM-дерево страницы. Открываете свой любимый сайт, копируете код из сниппета в консоль, выполняете и наслаждаетесь приколдесной визуализацией.
Насколько знаю, что-то подобное есть нативно и в DevTools, но тут весь прикол как раз в том, что это сделано небольшим сниппетом js-кода.
Tinkoff запускает командное соревнование Tinkoff CTF с призовым фондом.
——————————————
Спасибо что читаете, ставите реакции и отмечаетесь в комментариях. Если вы хотите помочь каналу - расскажите о нем своим коллегамдрузьям. Также оставляйте фидбек по формату, материалу и чему-угодно еще 🙂
Как в Node.js контролировать потребление памяти при обработке сетевых запросов
Статья на хабре от Тинькофф про потоковую обработку данных в node.js небольшими порциями. При обработке запросов расходуется память - ведь нужно все пришедшие реквесты где-то хранить перед их обработкой. Один из способов вызвать DoS - это отправить много очень тяжелых запросов на бекенд и тем самым вызвать у него падение по потреблению памяти. Поэтому в высоконагруженных проектах необходимо чутко относится к обработке запросов. В статье рассказывается, как обрабатывать запросы на node.js и не падать по памяти
Для подписчиков из Новосибирска: 9 апреля SRE-Митап в Новосибирске
JavaScript Visualized: Promise Execution
Крутой визуализированный гайд по Promise. Короткий обзор про то, как работают промисы, как разбирается очередь микротасок и все это очень круто визуализировано
JavaScript Playground: Write and run code with instant live feedback.
Playground для запуска JS-кода, который показывает результат работы expression'ов (например, вы написали 5*5, а playground рядом покажет 25). Выглядит очень круто.
We Rewrote our React App in Svelte in Three Weeks
Короткая история, как Dusty Phillips вместе со своей женой развивали небольшой проект (приложение для написания историй) и столкнулись с проблемой реализации drag-and-drop в React, но нашли хорошее решение на Svelte. Svelte настолько им понравился, что они переписали все приложение на нем
3D DOM viewer, copy-paste this into your console to visualise the DOM topographically.
Сниппет js-кода, который визуализирует в 3D DOM-дерево страницы. Открываете свой любимый сайт, копируете код из сниппета в консоль, выполняете и наслаждаетесь приколдесной визуализацией.
Насколько знаю, что-то подобное есть нативно и в DevTools, но тут весь прикол как раз в том, что это сделано небольшим сниппетом js-кода.
Tinkoff запускает командное соревнование Tinkoff CTF с призовым фондом.
——————————————
Спасибо что читаете, ставите реакции и отмечаетесь в комментариях. Если вы хотите помочь каналу - расскажите о нем своим коллегамдрузьям. Также оставляйте фидбек по формату, материалу и чему-угодно еще 🙂
What You Need to Know about Modern CSS (Spring 2024 Edition)
Крутая статья про современный CSS, которая рассказывает про свежие фичи CSS, которые уже пора во всю использовать в разработке. Для каждой фичи есть описание фичи, чем она полезна, поддержка браузерами и интерактивный пример в Codepen.
Некоторые фичи из списка доступны еще не во всех браузерах, некоторые доступны во всех уже год с лишним. Рекомендую ознакомиться со статьей.
Список описанных фичей:
- Container Queries (size)
- Container Queries (style)
- Container Units
- View Transitions
- Nesting
- Scroll-Driven Animations
- Anchor Positioning
- Scoping
- Cascade Layers
- Logical Properties
- P3 Colors
- Color Mixing
- Margin-trim
- Text wrapping
- Subgrid
https://frontendmasters.com/blog/what-you-need-to-know-about-modern-css-spring-2024-edition/
#development #css #recommended #cssContainerQueries #cssHas #viewTransition
Крутая статья про современный CSS, которая рассказывает про свежие фичи CSS, которые уже пора во всю использовать в разработке. Для каждой фичи есть описание фичи, чем она полезна, поддержка браузерами и интерактивный пример в Codepen.
Некоторые фичи из списка доступны еще не во всех браузерах, некоторые доступны во всех уже год с лишним. Рекомендую ознакомиться со статьей.
Список описанных фичей:
- Container Queries (size)
- Container Queries (style)
- Container Units
- View Transitions
- Nesting
- Scroll-Driven Animations
- Anchor Positioning
- Scoping
- Cascade Layers
- Logical Properties
- P3 Colors
- Color Mixing
- Margin-trim
- Text wrapping
- Subgrid
https://frontendmasters.com/blog/what-you-need-to-know-about-modern-css-spring-2024-edition/
#development #css #recommended #cssContainerQueries #cssHas #viewTransition
Frontendmasters
What You Need to Know about Modern CSS (Spring 2024 Edition) – Frontend Masters Boost
My goal with this bookmarkable guide is to provide a list of (frankly: incredible) new additions to CSS lately. There is no hardline criteria for this list other than that these things are all fairly new and my sense is that many people aren’t aware of these…
Technology Radar | An opinionated guide to today's technology landscape | Thoughtworks
Thoughtworks обновили свой техрадар. Появилось много всяких новых инструментов. Много внимания уделяется использованию AI.
Что такое техрадар - это визуализация в виде радара инструментов и подходов, используемых в компании (в данном случае Thoughtworks). Радар поделен на 4 сектора (языки, инструменты, платформы, техники) и каждая секция поделена на 4 секции по удаленности от центра: 1) Можно смело использовать; 2) выглядит хорошо, но нет уверенности что можно смело использовать; 3) пробуем использовать; 4) прекращаем использовать
Ценность техрадара в том, что он позволяет синхронизировать технологический ландшафт в компании. Чужие техрадары (как этот) интересно изучать для нахождения новых инструментов и практик.
https://www.thoughtworks.com/radar
#development #techradar
Thoughtworks обновили свой техрадар. Появилось много всяких новых инструментов. Много внимания уделяется использованию AI.
Что такое техрадар - это визуализация в виде радара инструментов и подходов, используемых в компании (в данном случае Thoughtworks). Радар поделен на 4 сектора (языки, инструменты, платформы, техники) и каждая секция поделена на 4 секции по удаленности от центра: 1) Можно смело использовать; 2) выглядит хорошо, но нет уверенности что можно смело использовать; 3) пробуем использовать; 4) прекращаем использовать
Ценность техрадара в том, что он позволяет синхронизировать технологический ландшафт в компании. Чужие техрадары (как этот) интересно изучать для нахождения новых инструментов и практик.
https://www.thoughtworks.com/radar
#development #techradar
Thoughtworks
Technology Radar | An opinionated guide to today's technology landscape | Thoughtworks
The Technology Radar is an opinionated guide to today's technology landscape. Read the latest here.
From Text to Models: A Comprehensive Guide to Textual Modeling and Diagrams as Code Tools in 2024
Большой обзор инструментов для построения диаграм на основе текста. Статья рассматривает кучу современных инструментов для построения диаграмм. Большинство из них так или иначе связаны с визуализацией UML, но есть и другие инструменты.
Интересно, что автор не стал "повторяться" относительно своей предыдущей статьи и некоторые инструменты не вошли в список (например mermaidjs)
https://modeling-languages.com/text-uml-tools-complete-list/
#development #uml #diagram #architecture
Большой обзор инструментов для построения диаграм на основе текста. Статья рассматривает кучу современных инструментов для построения диаграмм. Большинство из них так или иначе связаны с визуализацией UML, но есть и другие инструменты.
Интересно, что автор не стал "повторяться" относительно своей предыдущей статьи и некоторые инструменты не вошли в список (например mermaidjs)
https://modeling-languages.com/text-uml-tools-complete-list/
#development #uml #diagram #architecture
Modeling Languages
From Text to Models: A Comprehensive Guide to Textual Modeling and Diagrams as Code Tools in 2024
Sometimes the easiest way to draw a model is to "write" it down. These tools will render nicely looking UML diagrams from a few lines of text.
20+ JavaScript libraries to draw your own diagrams (2024 edition)
В продолжение предыдущей ссылки - обзор JS библиотек для построения диаграмм.
https://modeling-languages.com/javascript-drawing-libraries-diagrams/
#development #uml #javascript #diagram
В продолжение предыдущей ссылки - обзор JS библиотек для построения диаграмм.
https://modeling-languages.com/javascript-drawing-libraries-diagrams/
#development #uml #javascript #diagram
Modeling Languages
20+ JavaScript libraries to draw your own diagrams (2024 edition)
Discover the power of JavaScript for your diagramming needs! Our comprehensive guide features over 20 top JavaScript libraries to create dynamic UML, ER, BPMN diagrams (or even your own types of models), and more, right in your browser.
Thoughts on Pair Programming
Короткая статья про парное программирование от лида небольшой команды, которая недавно начала очень активно использовать эту технику. В статье нет каких-то больших подробностей про то, как эта техника используется в команде, но описаны основные преимущества, которые получила команда от использования техники
В статье также есть неплохое подсвечивание проблемы двойных стандартов от менеджеров. Заключается оно в простом примере: если разработчики садятся работать в режиме парного программирования, то менеджер может начать ругаться, что сидеть вдвоем над одной задачей - это неэффективно. Но этот же менеджер готов собрать встречу на 2 часа на 10+ человек, которую нельзя пропускать.
Далее автор описывает, как парное программирование помогает в работе. Предположим, что работа делится на 2 типа: в которой много неопределенности и в которой все понятно.
Для задач, в которых все понятно, есть 2 хороших юзкейса для парного программирования:
- Если в задаче все понятно, но кто-то еще не является профессионалом в области задачи, то можно применить парное программирование как средство обучения, где опытный разработчик обучается неопытного
- Бывает так, что нам нужно заонбордить опытного разработчика в новую для него кодовую базу. В этом случае парное программирование также хорошо показывает себя
Для задач, в которых много неопределенности, парное программирование помогает разными способами:
- Второй разработчик в паре позволяет не зациклиться паре на каком-то одном решении. Например, часто разработчики входят в поток и наблюдается что-то типа туннельного зрения - когда мозг сфокусирован на одном решении и сложно посмотреть на это решение со стороны и увидеть его проблемы. При работе в паре есть второй пилот, который помогает преодолеть проблему туннельного зрения
- Более быстрая обратная связь, которая способствует быстрой генерации и проверки идей и гипотез
- Психологический момент - когда сталкиваешься с проблемой один, хочется ее избежать - начать делать что-то простое или ответить в чате или на почте. При работе в паре работа получается более сфокусированной и эффективной
https://dev.to/shaharke/thoughts-on-pair-programming-1i8g
#development #managment #pairProgramming
Короткая статья про парное программирование от лида небольшой команды, которая недавно начала очень активно использовать эту технику. В статье нет каких-то больших подробностей про то, как эта техника используется в команде, но описаны основные преимущества, которые получила команда от использования техники
В статье также есть неплохое подсвечивание проблемы двойных стандартов от менеджеров. Заключается оно в простом примере: если разработчики садятся работать в режиме парного программирования, то менеджер может начать ругаться, что сидеть вдвоем над одной задачей - это неэффективно. Но этот же менеджер готов собрать встречу на 2 часа на 10+ человек, которую нельзя пропускать.
Далее автор описывает, как парное программирование помогает в работе. Предположим, что работа делится на 2 типа: в которой много неопределенности и в которой все понятно.
Для задач, в которых все понятно, есть 2 хороших юзкейса для парного программирования:
- Если в задаче все понятно, но кто-то еще не является профессионалом в области задачи, то можно применить парное программирование как средство обучения, где опытный разработчик обучается неопытного
- Бывает так, что нам нужно заонбордить опытного разработчика в новую для него кодовую базу. В этом случае парное программирование также хорошо показывает себя
Для задач, в которых много неопределенности, парное программирование помогает разными способами:
- Второй разработчик в паре позволяет не зациклиться паре на каком-то одном решении. Например, часто разработчики входят в поток и наблюдается что-то типа туннельного зрения - когда мозг сфокусирован на одном решении и сложно посмотреть на это решение со стороны и увидеть его проблемы. При работе в паре есть второй пилот, который помогает преодолеть проблему туннельного зрения
- Более быстрая обратная связь, которая способствует быстрой генерации и проверки идей и гипотез
- Психологический момент - когда сталкиваешься с проблемой один, хочется ее избежать - начать делать что-то простое или ответить в чате или на почте. При работе в паре работа получается более сфокусированной и эффективной
https://dev.to/shaharke/thoughts-on-pair-programming-1i8g
#development #managment #pairProgramming
DEV Community
Thoughts on Pair Programming
I am currently leading a team of four very talented engineers, and we started practicing pair...
Дайджест за 2024-04-08 - 2024-04-12
⭐What You Need to Know about Modern CSS (Spring 2024 Edition)
Крутая статья про современный CSS, которая рассказывает про свежие фичи CSS, которые уже пора во всю использовать в разработке. Для каждой фичи есть описание фичи, чем она полезна, поддержка браузерами и интерактивный пример в Codepen.
Некоторые фичи из списка доступны еще не во всех браузерах, некоторые доступны во всех уже год с лишним. Рекомендую ознакомиться со статьей.
Technology Radar | An opinionated guide to today's technology landscape | Thoughtworks
Thoughtworks обновили свой техрадар. Появилось много всяких новых инструментов. Много внимания уделяется использованию AI.
Что такое техрадар - это визуализация в виде радара инструментов и подходов, используемых в компании (в данном случае Thoughtworks). Радар поделен на 4 сектора (языки, инструменты, платформы, техники) и каждая секция поделена на 4 секции по удаленности от центра: 1) Можно смело использовать; 2) выглядит хорошо, но нет уверенности что можно смело использовать; 3) пробуем использовать; 4) прекращаем использовать
From Text to Models: A Comprehensive Guide to Textual Modeling and Diagrams as Code Tools in 2024
Большой обзор инструментов для построения диаграм на основе текста. Статья рассматривает кучу современных инструментов для построения диаграмм. Большинство из них так или иначе связаны с визуализацией UML, но есть и другие инструменты.
Интересно, что автор не стал "повторяться" относительно своей предыдущей статьи и некоторые инструменты не вошли в список (например mermaidjs)
20+ JavaScript libraries to draw your own diagrams (2024 edition)
В продолжение предыдущей ссылки - обзор JS библиотек для построения диаграмм.
Thoughts on Pair Programming
Короткая статья про парное программирование от лида небольшой команды, которая недавно начала очень активно использовать эту технику. В статье нет каких-то больших подробностей про то, как эта техника используется в команде, но описаны основные преимущества, которые получила команда от использования техники
В статье также есть неплохое подсвечивание проблемы двойных стандартов от менеджеров. Заключается оно в простом примере: если разработчики садятся работать в режиме парного программирования, то менеджер может начать ругаться, что сидеть вдвоем над одной задачей - это неэффективно. Но этот же менеджер готов собрать встречу на 2 часа на 10+ человек, которую нельзя пропускать.
——————————————
Спасибо что читаете, ставите реакции и отмечаетесь в комментариях. Если вы хотите помочь каналу - расскажите о нем своим коллегамдрузьям. Также оставляйте фидбек по формату, материалу и чему-угодно еще 🙂
⭐What You Need to Know about Modern CSS (Spring 2024 Edition)
Крутая статья про современный CSS, которая рассказывает про свежие фичи CSS, которые уже пора во всю использовать в разработке. Для каждой фичи есть описание фичи, чем она полезна, поддержка браузерами и интерактивный пример в Codepen.
Некоторые фичи из списка доступны еще не во всех браузерах, некоторые доступны во всех уже год с лишним. Рекомендую ознакомиться со статьей.
Technology Radar | An opinionated guide to today's technology landscape | Thoughtworks
Thoughtworks обновили свой техрадар. Появилось много всяких новых инструментов. Много внимания уделяется использованию AI.
Что такое техрадар - это визуализация в виде радара инструментов и подходов, используемых в компании (в данном случае Thoughtworks). Радар поделен на 4 сектора (языки, инструменты, платформы, техники) и каждая секция поделена на 4 секции по удаленности от центра: 1) Можно смело использовать; 2) выглядит хорошо, но нет уверенности что можно смело использовать; 3) пробуем использовать; 4) прекращаем использовать
From Text to Models: A Comprehensive Guide to Textual Modeling and Diagrams as Code Tools in 2024
Большой обзор инструментов для построения диаграм на основе текста. Статья рассматривает кучу современных инструментов для построения диаграмм. Большинство из них так или иначе связаны с визуализацией UML, но есть и другие инструменты.
Интересно, что автор не стал "повторяться" относительно своей предыдущей статьи и некоторые инструменты не вошли в список (например mermaidjs)
20+ JavaScript libraries to draw your own diagrams (2024 edition)
В продолжение предыдущей ссылки - обзор JS библиотек для построения диаграмм.
Thoughts on Pair Programming
Короткая статья про парное программирование от лида небольшой команды, которая недавно начала очень активно использовать эту технику. В статье нет каких-то больших подробностей про то, как эта техника используется в команде, но описаны основные преимущества, которые получила команда от использования техники
В статье также есть неплохое подсвечивание проблемы двойных стандартов от менеджеров. Заключается оно в простом примере: если разработчики садятся работать в режиме парного программирования, то менеджер может начать ругаться, что сидеть вдвоем над одной задачей - это неэффективно. Но этот же менеджер готов собрать встречу на 2 часа на 10+ человек, которую нельзя пропускать.
——————————————
Спасибо что читаете, ставите реакции и отмечаетесь в комментариях. Если вы хотите помочь каналу - расскажите о нем своим коллегамдрузьям. Также оставляйте фидбек по формату, материалу и чему-угодно еще 🙂
JavaScript Signals standard proposal
Во фронтенде одна из основных тем сейчас - это сигналы. Сигналы - это новый удобный способ работы с данными. И вот в tc39 появился пропозал на введение сигналов в стандарт языка. Пропозал на stage 0 - т.е. это еще супер-ранний черновик, но знаменательно то, что кто-то оформил этот черновик
https://github.com/proposal-signals/proposal-signals
#development #javascript #signal #proposal #tc39
Во фронтенде одна из основных тем сейчас - это сигналы. Сигналы - это новый удобный способ работы с данными. И вот в tc39 появился пропозал на введение сигналов в стандарт языка. Пропозал на stage 0 - т.е. это еще супер-ранний черновик, но знаменательно то, что кто-то оформил этот черновик
https://github.com/proposal-signals/proposal-signals
#development #javascript #signal #proposal #tc39
GitHub
GitHub - tc39/proposal-signals: A proposal to add signals to JavaScript.
A proposal to add signals to JavaScript. Contribute to tc39/proposal-signals development by creating an account on GitHub.
Bun 1.1
Вышел Bun 1.1. Основная большая фича - поддержка работы Bun на Windows. По заверениям команды Bun - на Windows он быстрее и работает и устанавливает зависимости. В целом, вспоминая свой последний опыт установки node.js на Windows, я не удивлен.
Кроме поддержки Windows добавлены разные фичи поменьше, ускорен запуск приложения.
Из прикольных фич:
- Поддержка WebSocket перешла статуса экспериментальной фичи в стабильную фичу.
- В Bun теперь необходимо явно указывать пакеты, чьи скрипты жизненного цикла (например
- Можно билдить код для запуска в Node.js
- Можно помечать импорты встроенных модулей как макросы. Это позволяет исполнить их на этапе компиляции, а не в рантайме. Например, можно заимпортировать
- Улучшен тулинг для тестирования: добавили новые матчеры и возможность мокировать модули
В общем, достаточно крупный релиз, все из него описать в одном посте нереально - куча изменений разного размера и значимости почти во все аспекты Bun.
https://bun.sh/blog/bun-v1.1
#development #javascript #bun #releaseNotes
Вышел Bun 1.1. Основная большая фича - поддержка работы Bun на Windows. По заверениям команды Bun - на Windows он быстрее и работает и устанавливает зависимости. В целом, вспоминая свой последний опыт установки node.js на Windows, я не удивлен.
npx somepackage из коробки после установки nodejs просто не работаетКроме поддержки Windows добавлены разные фичи поменьше, ускорен запуск приложения.
Из прикольных фич:
- Поддержка WebSocket перешла статуса экспериментальной фичи в стабильную фичу.
- В Bun теперь необходимо явно указывать пакеты, чьи скрипты жизненного цикла (например
postinstall) вы хотите запускать- Можно билдить код для запуска в Node.js
- Можно помечать импорты встроенных модулей как макросы. Это позволяет исполнить их на этапе компиляции, а не в рантайме. Например, можно заимпортировать
readFileSync как макрос и считать какой-нибудь файл во время компиляции, а не каждый раз считывать его при запуске приложения. Выглядит интересно- Улучшен тулинг для тестирования: добавили новые матчеры и возможность мокировать модули
В общем, достаточно крупный релиз, все из него описать в одном посте нереально - куча изменений разного размера и значимости почти во все аспекты Bun.
https://bun.sh/blog/bun-v1.1
#development #javascript #bun #releaseNotes
Bun
Bun 1.1
Bun now supports Windows!