JS Dates Are About to Be Fixed

Статья, объясняющая грядущие изменения работы с датами в JS. Работа с датами в системах, где нужно учитывать часовой пояс - это всегда боль. Мой любимый пример, с одной из прошлых работ: сотрудник агенства недвижимости работает из Владивостока, само агенство недвижимости зарегистрировано в Казани, а объекты недвижимости продает в Екатеринбург. Вопрос: как отображать время работы менеджера в интерфейсе?

Новое предложение как раз решает эту проблему, добавляя Temporal.ZonedDateTime, в которой кроме, собственно, времени, также хранится и таймзона и календарь (Грегорианский например)

Более того, новое API, кроме таймзон и календаря, будет иметь удобные методы для работы с ним. Например, сравнения

```
const one = Temporal.ZonedDateTime.from('2020-11-01T01:45-07:00[America/Los_Angeles]');
const two = Temporal.ZonedDateTime.from('2020-11-01T01:15-08:00[America/Los_Angeles]');

Temporal.ZonedDateTime.compare(one, two);

```

https://docs.timetime.in/blog/js-dates-finally-fixed/

#development #javascript #Date #proposal

docs.timetime.in

JS Dates Are About to Be Fixed | TimeTime

Why I’m excited about the new Temporal API in JavaScript: finally, easy and accurate date handling with time zones using ZonedDateTime. Say goodbye to the headaches of traditional Date objects.

Всем привет! Мы в Т-Банк ищем таланты ?

У нас тут:
- Проекты разного размера: от бекенда для бекенда до крутых клиентских сервисов
- Можно радовать результатами своей работы миллионы пользователей, а можно быть частью технической команды и разрабатывать внутренние инструменты
- В компании выстроена культура обмена знаниями и роста. Есть внутренние конференции, митапы, системы менторинга, курсы, книжные клубы и тд и тп. Каждый день что-то происходит
- Крутая инженерная культура. Я, когда пришел сюда фронтендером, был сильно впечатлен скилом местных фронтендеров - есть куча ребят, которые реально профи в своем деле и имеют глубокую экспертизу. Сейчас я уже менеджер и могу сказать, что скиловые не только технари, но и ребята из дискавери и менеджеры.

Вообще Т-Банк большой и нам нужны все, но я пишу отдельный пост потому что в моем проекте - Т-Банк Отели, нужен мощный фронтендер.

Что у нас по фронтенду:
- Пишем на React
- Приложение на крутом самописном (но заопенсорсенном) фреймворке tramvai (про который, кстати, часто пишет Олег Драпеза в своем канале)
- Есть немножко nodejs (SSR, внутренние мелкие сервисы и небольшие api). Мы не сильно развиваем эту область, но она есть.
- Покрываем все автотестами, автоматизируем любую рутину (кастомные правила линтинга, релизные скрипты и тд)
- Делаем крутой клиентский продукт - целимся стать лучшим сервисом для бронирования отелей. Сейчас ищем человека конкретно в команду поиска. Цель команды - сделать такой поиск, чтобы пользователь мог найти максимально "свой" отель в максимально короткий срок

Если вас заинтересовало или вы знаете того, кого могло бы подобное заинтересовать - велком ко мне в личку (@crazymax101) - отвечу на любые вопросы, либо можете сразу закинуть свою резюмешку по ссылке (но если вы хотите прям в Отели - лучше написать мне в личку, чтоб я нашел вас и вас направили в Отели)

Дайджест за 2024-08-26 - 2024-08-30

One on One Meeting Format Ideas
Неплохая статья про 1:1. Автор делится собственным опытом проведения 1:1 с сотрудниками и показывает свой формат ведения 1:1

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

*⭐️Regexes Got Good: The History And Future Of Regular Expressions In JavaScript*
Хорошая статья про развитие RegExp в JavaScript и про современные фишки RegExp. RegExp в JS прошел большой путь - от простой первоначальной реализации, до современной и удобной реализации, которая по фичам не сильно уступает другим языкам, а некоторые языки даже обгоняет

Автор хорошо описывает относительно новые фичи регулярок в JS - именованные группы, lookbeind, упрощение глобального матчинга и работу с юникодом

Using JavaScript Generators to Visualize Algorithms
Интересная статья про нетривиальное использование генераторов. А именно: для визуализации алгоритмов на JS.

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

Optimizing SPA load times with async chunks preloading
Интересная статья про ускорение загрузки SPA сайта. Есть много разных техник, но тут автор рассказывает, как имплементировать автоматический прелоад всех ресурсов, необходимых страницы

fuite - is a CLI tool for finding memory leaks in web apps.
Вышел релиз 5.0.0 инструмента fuite, который ищет утечки памяти. Я не пробовал, но уже по описанию инструмента понятно, что он может быть очень полезным

Инструмент запускает браузер через puppeteer, загружает страницу, прогоняет целевой сценарий несколько раз и анализирует, какие объекты утекают. Из поддерживаемых типов утекающих сущностей: объекты, обработчики событий, DOM-ноды, коллекции (массивы, мапки, сеты)

——————————————

Спасибо что читаете, ставите реакции и отмечаетесь в комментариях. Если вы хотите помочь каналу - расскажите о нем своим коллегам или друзьям. Также оставляйте фидбек по формату, материалу и чему-угодно еще ?

Why, after 6 years, I’m over GraphQL

Отличная статья про проблемы GraphQL. Особенно интересна она тем, что автор буквально залетел в GraphQL 6 лет назад, когда еще был hype train, но теперь он не может советовать использовать GraphQL в большинстве проектов.

В целом минусы GraphQL касаются безопасности, производительности и удобства. То что легко сделать в обычном REST API, становится сложно делать в GraphQL

Автор начинает с безопасности. А конкретно с авторизации. Если у вас есть данные, которые не может доставать любой пользователей (ну например, поле с имейлом пользователя может доставать только сам этот пользователь), то вам необходимо разбираться с фреймворками авторизации для GraphQL

Так как GraphQL это язык запросов, то пользователь можно создавать разные странные запросы. Например, можно в 128 байт уместить запрос, ответ на который возвращает мегабайты данных и который может полоржить сервер. С этим приходится бороться ограничивая максимальную вложенность полей в запросе и отдельно рассчитывая "сложность" доставания каждого поля. В то же время в REST достаточно поставить разные стратегии rate limiter для разных енд-поинтов

Другой интересный кейс, что можно послать заведомо неверный запрос

```
query {
__typename @a @b @c @d @e ... # imagine 1k+ more of these
}

```

И чтобы собрать ответ с ошибкой сервер потратит в 2000 раз больше памяти, чем занимает сам запрос

Также автор дважды подмечает N+1 проблему, которую можно решать через паттерн Dataloader. Проблема с GraphQL не только в том, что N+1 актуальна для загрузки данных, но она актуальна и для авторизации.

В целом, конечно, ничего нового в этой статье нет - GraphQL очень удобен для запроса данных, но не очень удобен для безопасного и производительного резолва этих данных. Кроме того, для большинства решений и дебага, backend-разработчику проще работать с REST, чем с GraphQL.

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

https://bessey.dev/blog/2024/05/24/why-im-over-graphql/

#development #graphql #recommended

bessey.dev

Why, after 6 years, I’m over GraphQL

GraphQL is an incredible piece of technology that has captured a lot of mindshare since I first started slinging it in production in 2018. You won’t have to ...

Дайджест за 2024-06-10 - 2024-06-14

Speeding up the JavaScript ecosystem - Server Side JSX
Новая статья про ускорение JS-экосистемы. На этот раз ускоряется не какая-то конкретная библиотека, а рендер JSX на сервере. Ускорение делается за счет прекомпиляции статичного и почти-статичного JSX в html-строку. За счет этого достигается ускорение в 7-20 раз и уменьшение работы сборщика мусора в 2 раза.

Node.js Performance Hooks: Mastering the Mental Model
Статья, объясняющая, как работают performance-хуки в nodejs. Если коротко, в nodejs есть API для обработки всех замеров через performance. Собственно это API и называется хуками.

Статья объясняет про особенности работы этих хуков (например, про наличие буферов у каждого обсервера).

Node.js Test Runner: A Beginner's Guide
Неплохая статья, рассказывающая про то, как работать с nodejs тест-ранером. Статья по шагам раскрывает возможности этого тест-ранера, включая не только самые обычные API (как сравнивать, как скипать тест), но также раскрываются возможности для мокирования модулей и таймеров.

*⭐️The Gap: An exploration of the pain points that CSS gap solves.*
Хорошая статья с хорошей визуализацией про то, почему в css появилось свойство gap и почему оно лучше всех предыдущих решений.

Половина статьи посвящена тому, как делались отступы между элементами до gapи какие проблемы у них были. Например, были сложности с учетом RTL-лэйаутов.

——————————————

Спасибо что читаете, ставите реакции и отмечаетесь в комментариях. Если вы хотите помочь каналу - расскажите о нем своим коллегамдрузьям. Также оставляйте фидбек по формату, материалу и чему-угодно еще ?

Дайджест за 2024-06-03 - 2024-06-07

*⭐️Why react Query*
Большая и хорошая статья про то, зачем и почему появился react query. Статья идет от простого сложного и объясняет, как тяжело в React учесть все нюансы для загрузки данных (понадобится много хуков и много бойлерплейта) и как React Query забирает на себя весь бойлерплейт и улучшает DX, производительность и качество решения.

Как и всегда на ui dev, в стате понятные примеры кода и крутая интерактивная анимация. Рекомендую к прочтению

Speed Up Your Playwright Scripts with Request Interception
Небольшая статья про ускорение браузерных тестов на Playwright через мокирование сети. И проблема и решение чисто классические - они были актуальны даже 20 лет назад. Проблема: даже если мы тестируем сайт чисто загружая его и делая скриншот, инструменты для такого тестирования как правило ждут завершения всех или почти всех сетевых запросов. На каких-то сайтах это пара секунд, на других десятки. В любом случае, больше времени уходит на ожидание завершения запросов, чем на сам тест. Решение: мокать запросы, чтобы не ходить в сеть

В статье разобраны несколько сценариев для мокания запросов в Playwright: для неважного контента можно обрывать запросы, для важного - мокировать ответ или модифицировать ответ. В целом практика подходит не только для Playwright.

Coding my handwriting
Не совсем обычная ссылка, но тем не менее достаточно интересная. В статье рассказывается, как сделать рукописный шрифт с помощью p5js. Основная проблема рукописных шрифтов - это то, что начертание буквы зависит от её соседей.

Например, если буква соединяется с р - то соединительная линия идет сверху строки, а если с л - то снизу. Сделала для каждой буквы несколько вариантов ее написания, а с помощью простого JS-кода корректируются линии букв. Выглядит очень красиво.

Understand errors and warnings better with Gemini
Еще один виток использования AI в рабочих инструментах: в Chrome DevTools теперь можно подключить AI, который будет объяснять ошибки в консоли. Например, у вас упал запрос из-за CORS. Тыкаете кнопку и AI вам рассказывает, что это за ошибка и что конкретно нужно сделать, чтобы она исчезла.

Regexper
Интересный сервис, который визуализирует работу regexp. Вводите конкретный regexp, а сервис рисует диаграмму, которая показывает, как он работает. Выглядит достаточно занятно и полезно для изучения regexp

——————————————

Спасибо что читаете, ставите реакции и отмечаетесь в комментариях. Если вы хотите помочь каналу - расскажите о нем своим коллегамдрузьям. Также оставляйте фидбек по формату, материалу и чему-угодно еще ?

Thoughts on Pair Programming

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

В статье также есть неплохое подсвечивание проблемы двойных стандартов от менеджеров. Заключается оно в простом примере: если разработчики садятся работать в режиме парного программирования, то менеджер может начать ругаться, что сидеть вдвоем над одной задачей - это неэффективно. Но этот же менеджер готов собрать встречу на 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...

20+ JavaScript libraries to draw your own diagrams (2024 edition)

В продолжение предыдущей ссылки - обзор 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.

Дайджест за 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 с призовым фондом.

——————————————

Спасибо что читаете, ставите реакции и отмечаетесь в комментариях. Если вы хотите помочь каналу - расскажите о нем своим коллегамдрузьям. Также оставляйте фидбек по формату, материалу и чему-угодно еще ?

How to Detect Clicks Anywhere on a Page in React

Небольшая заметка про то, как трекать любой клик в рамках страницы в React. Для многих описанное в статье не будет откровением (спойлер: обработчик вешается на body), но в статье есть интересный кусок с добавлением условной логики в глобальный обработчик на основе условия "является ли событие - событием из формы". Для меня стало открытием, что у любого события есть метод composedPath, который позволяет определить, через какие элементы проходило событие.

https://spacejelly.dev/posts/how-to-detect-clicks-anywhere-on-a-page-in-react

#development #javascript #react

Space Jelly

How to Detect Clicks Anywhere on a Page in React on Space Jelly

Read How to Detect Clicks Anywhere on a Page in React at Space Jelly.