​​Уровни абстракции

Уровни абстракции — одна из самых важных и одновременно самых сложных концепций, понимание которой ведёт к написанию качественного кода.

Методы и функции — один из самых простых примеров, на основе которых можно рассмотреть концепцию уровней абстракции.

ℹ️ Когда мы описываем функцию, то все методы, которые мы вызываем внутри должны находиться на один уровень абстракции ниже. В конце концов, функции пишутся прежде всего для разложения более крупной концепции (иначе говоря, имени функции) на последовательность действий на следующем уровне абстракции.

Как понять, что метод написан на разных уровнях абстракции❓

- Когда мы смешиваем уровни абстракции, то функция обрастает большим количеством второстепенных подробностей — деталями с более низкого уровня абстракции
- Если читать код функции, вы найдёте одновременно действия, которые будут отвечать на вопросы “что?” и “как?”:
- “что?” — более высокий уровень абстракции, тут функция описывает, что мы делаем.
- “как?” — тут будет описано, “как” мы что-то делаем, а чтобы понять что именно, нужно будет напрячь извилины и подумать. И если мы заменим это “как” на функцию, имя которой будет отвечать на вопрос “что”, то всё станет на свои места и будет на одном уровне абстракции.

⚠️ Не окрепшим умам главное понять, что метод написанный на “одном уровне абстракции” это то, к чему нужно стремиться, но главное не переусердствовать, ведь не всегда так просто провести грань между уровнями абстракции.

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

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

Пример от Дядюшки Боба найдёте в комментариях, из него должно стать понятней, что имелось ввиду при описании “что?” и “как?”

#architecture #cleancode #abstraction

Подсветка кода на странице при помощи Custom Highlight API

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

Брамус показывает, как можно применять современный Custom Highlight API, чтобы не создавать span для стилизации в принципе. Это такая апишка, которая уже работает в Chrome 105 и Safari 17.2. И она позволяет при помощи JavaScript разбивать текстовые узлы на набор параметризированных токенов. Как это делать в JS, лучше смотреть в самой статье. Но зато в CSS всё становится сильно приятнее:

::highlight(important) {
    color: red;
    font-weight: bold;
}

::highlight(attr) {
    color: violet;
}

Имена хайлайтов как раз задаются в JS.

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

https://www.bram.us/2024/02/18/custom-highlight-api-for-syntax-highlighting/

Подборка для изучения CSS в игровой форме:

1. Flexbox groggy
2. Grid garden
3. Flexbox defense
4. Flexbox zombies 🧟‍♀️
5. Knights of the Flexbox Table
6. Flex Box adventure
7. CSS Diner
8. Grid attack

Бонус:
• CSS Battle
• 100 days of CSS
• CSS Challenges

☁️ Облако слов

Ради интереса решил построить облако слов на основе комментариев в пул реквестах.

Нашёл пару подходящих библиотек:

- react-tagcloud — нет типов для тайпскрипта, и облако само по себе выглядит не очень красиво
- react-wordcloud — типы есть, облако выглядит неплохо, использовать легко

<ReactWordcloud
  size={[1000, 500]}
  words={data}
  maxWords={350}
  options={{ fontSizes: [10, 120] }}
  callbacks={{
    onWordClick: (e) => {
      onClick(e.text);
    },
  }}
/>

#library #react

🆙 Кнопки в базах данных Notion

Когда-то давно я писал, как автоматически заполнять Completed Date поле в Notion.

С тех пор много воды утекло, и кажется об использовании Github Actions для этих целей можно забыть.

В Notion уже давно есть кнопки, наконец-то они появились и в базах данных.

Ещё пример

#notion #automation

Наконец-то попаду на "Я 💛 Фронтенд" в оффлайне. Трансляция тоже будет.

https://events.yandex.ru/events/ya-love-frontend-2024

#conference

⚙️ .editorconfig

Вопрос от менти: У меня проблемы с кодировкой. В гитхабе вижу битые символы вместо русских букв. Почему и как исправить?

Ответ: Скорее всего редактор создаёт файлы в кодировке типа “Cyrillic (Windows 1251)”. Чтобы это исправить, нужно пересохранить существующие файлы в кодировке UTF-8.

А, чтобы новые файлы создавались с правильной кодировкой, в корне проекта нужно создать файл .editorconfig и указать что все файлы ([*]) должны иметь кодировку utf-8 (charset = utf-8).

[*]
charset = utf-8

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

В нём же можно настроить отступы, размер табов и прочее. Подробнее здесь.

#mentee_question #essential

New client-side hooks coming to React 19

Статья рассказывает про новые API, которые, предположительно, будут в react 19. Пока они доступны в канареечном релизе React

В статье рассказывается про:
- use(Promise)
- use(Context)
- Возможность передавать специфичный action в form
- useFormState
- useFormStatus
- useOptimistic
- Асинхронные транзишны

Постараюсь коротко рассказать про это API

use(Promise) позволяет дождаться выполнения Promise. Выглядит как сахар для удобного ожидания промиса внутри Suspence. Также отличается от классических хуков тем, что этот можно использовать внутри циклов и условий

import { use } from 'react';

function MessageComponent({ messagePromise }) {
    const message = use(messagePromise);
    // ...
}

use(Context) это аналог useContext, но можно использовать внутри циклов и условных блоков

Также улучшили работу с формами. У форм есть проп action, в который теперь можно закидывать функцию - обработчик формы <form action={handleSubmit}>. Само по себе это мало что дает, но вместе с этой возможностью идут новые хуки, которые позволяют получить стейт и статус формы - useFormState и useFormStatus. Используя комбинацию этих API можно удобно работать с нативными формами.

Самой сложной API для меня оказался хук useOptimistic. Пришлось из статьи перейти в доку реакта, чтоб почитать подробнее, как это работает. Как я понял, useOptimistic позволяет врапнуть другой стейт и изменить его, пока врапнутый стейт не изменился. И это может быть полезно для оптимистичных апдейтов UI (техника, когда мы отрисовываем экран исходя из того, что асинхронное действие завершится успехом)

Я понял, что это работает вот так

function MyComponent() {
  // Объявляем стейт
  const [state, setState] = useState([])
  // Врапуем его с помощью нового хука
  // в optimisticState изначально будет лежать state
  // В колбеке описываем, как обрабатывать оптимистичные изменения
  const [optimisticState, addOptimistic] = useOptimistic(state, (state, newItem) => [...state, newItem])

  // Предположим мы делаем запрос на did mount 
  useEffect(async () => {
     const itemToAdd = {}
     // добавляем оптимистичный апдейт
     addOptimistic(itemToAdd)
     // делаем запрос
     const realItemToAdd = await fetch(url)
     // после завершения запроса, меняем корневой стейт
     // мы рендерим optimisticState, но после обновления state
     // optimisticState обновиться до state
     setState([...state, realItemToAdd])
  }, [])

  return <div> {optimisticState} </div>
}

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

Также добавили возможность делать асинхронные transitions в React. До этого было требование, чтобы транзишны были синхронными

https://marmelab.com/blog/2024/01/23/react-19-new-hooks.html

#development #javascript #react #react19 #reactHooks

⚛️ React 19 — use(Promise)

use — новый хук, который позволяет считывать данные из промиса и при этом интегрирован с Suspense и ErrorBoundary.

ℹ️ Основные моменты:

- На этот хук не распространяются правила хуков — его можно использовать внутри циклов и условных операторов.
- Если мы используем хук use(Promise), то где-то в родительском компоненте мы должны положить сам промис (не данные как мы делали раньше) в стейт (useState). Это позволяет избавиться от useEffect’а, который был нужен, чтобы запросить данные при первом рендере.
- Хук интегрирован с Suspense, поэтому пока промис не разрезолвится — будет показан fallback объявленный в ближайшем Suspense.
- Если промис зареджектился, то будет показан fallback объявленный в ближайшем ErrorBoundary

- Песочница тут
- Официальная документация тут

#frontend #react #new

⚛️ React 19 — useOptimistic

useOptimistic — новый хук, который позволяет отобразить “оптимистичное” состояние. Оно называется “оптимистичным”, потому что мы “оптимистично” надеемся, что наш запрос не свалится с ошибкой и после выполнения запроса состояние будет выглядеть именно так.

❓Как используется

- В useOptimistic передаётся реальное состояние (cart) и функцию-reducer, для обновления оптимистичного состояния
- Компонент (Cart) использует “оптимистичное” состояние (optimisticCart) для рендера
- Перед выполнением запроса обновляется “оптимистичное” состояние
- Когда запрос завершился, нужно обновить реальное состояние
- Как только реальное состояние обновилось, оптимистичное состояние обновится автоматически, так как оно передано в useOptimistic первым параметром. ⚠️ Поэтому важно следить, чтобы приходило одно и то же состояние.
- Если запрос упал с ошибкой, нужно откатить изменения в оптимистичном состоянии.

ℹ️ Первый вопрос, которым я задался, а в чём отличие от обычного setState, путём экспериментов, вот что удалось найти:

- useOptimistic работает с формами. Работать с обычной кнопкой в Single Page Application мне не удалось, обновление происходило только после завершения запроса
- useOptimistic работает только внутри асинхронного обработчика, что логично. Если убрать async/await, обновление произойдёт только после завершения запроса
- Параметр в useState используется только для инициализации, и игнорируется в последующих рендерах. useOptimistic будет сихронизироваться со значением переданным первым параметром.

🤷‍♂️ Очень мало полезного удалось найти о useOptimistic. Во всех статьях и видео тривиальные примеры, нигде не рассказывается как обрабатывать более сложные ситуации:

- Как обновлять оптимистичное состояние, если запустить несколько запросов одновременно?
- Как использовать useOptimistic в SPA вне форм?

Поэтому пришлось создать пару ишью: раз и два. В любом случае, пока useOptimistic выглядит каким-то низкоуровневым API. Надеюсь скоро появится больше Best Practices по его применению. Если вам есть что добавить — пишите в комментах.

Ещё по теме:

- Frontend First — Ep 179 - React Deep Dive: useOptimistic
- Официальная документация по useOptimistic
- Код из примера тут

#react #frontend #new

Максимальная длина строки в V8

У меня есть небольшой пет проект, для построения различных графиков для пул реквестов, которые показывают кто кому оставляет комментарии, ставит аппрувы и прочее. Бэкенда там нет, фронт ходит в Gitlab или Gitea, выкачивает информацию за указанный период времени и рисует графики.

Чтобы не гонят лишний раз данные, я добавил возможность импорта/экспорта. Вроде всё хорошо, но вчера я решил выгрузить данные за 4 года и при экспорте словил ошибку:

JSON.stringify Uncaught RangeError: Invalid string length

Немного погуглив, нашёл, что длина строки в V8:
- 268.4 мегабайт на 32-битных платформах
- 538.8 мегабайт на 64-битных платформах (на М1 похоже такая же)

✅ Решил проблему просто: при экспорте разбиваю мой большой массив, на несколько частей и экспортирую несколько файлов.

Аналогично не получится считать файл как текст, получите просто пустую строку. readAsArrayBuffer работает, но попробуй понять как байты преобразовать в строки меньших размеров, да так, чтобы получить валидные JSON объекты.

const reader = new FileReader();
reader.onload = function () {
 console.log(reader.result); // result будет пустой строкой
}
reader.readAsText(file);

В Firefox такой проблемы нет, всё работает.

#browser #frontend

#рекомендую_канал

Сегодня решил начать делиться каналами, которые читаю сам, возможно когда-нибудь даже опубликую ссылку на папку с каналами 🤔 , но это не сегодня …

Возможно вы уже знаете Даниэля по его сообществу Фронт.ру, он достаточно молод, и уже успел поработать фронтендером в Сбере и Яндекс Поиске. Даниэль пишет интересно и не только о коде, но и о том как работается в самой компании. Возможно, как-нибудь и я решусь написать пару постов о своей работе 😄.

В этих постах можете познакомиться с тем как проходят первые дни в Яндексе:

- Прошел первый день в офисе Яндекса
- Сегодня было парное программирование
- Моя первая таска в проде
- Как проходили собеседования в Яндекс?
- Сегодня ровно месяц как работаю в Яндекс.
- Закончился мой испытательный срок в Яндексе.

Кстати, сегодня ровно год блогу Даниэля а завтра, год как он работает в Яндексе, поэтому давайте поздравим его подпиской на его канал 🎂.

@cherkashindev

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

- https://chat.openai.com/ — представления не требует
- https://www.phind.com/ — о phind писал здесь
- https://gemini.google.com/app - AI чат бот от гугла, работает только через VPN
- https://ya.ru/alisa_davay_pridumaem — чат бот от Яндекса
- https://300.ya.ru/ — краткий пересказ, статей и видео от Яндекса
- https://t.me/gigachat_bot — чат бот от Сбера

В Сбере заморочились и реализовали расширение по типу Codeium (о нём писал здесь) для VS Code и IDE от JetBrains. Скорее всего это связано с запуском ими аналога Github — Gitverse, и альтернативы Copilot — Gigacode. Инструкция по установке здесь.

А какими AI ботами или другими сервисами пользуетесь вы?

#ai

🗣 Фраза недели — “Да надо”

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

📖 Несколько лет назад во время пандемии скучными вечерами, покуривая кальян, я читал книгу “Программист Прагматик”. Обсуждать всю книгу я конечно же не буду, остановлюсь лишь на одной теме, которая задела меня за живое. Автор описывал, что лишь одна фраза может внести полнейший хаос в работу и взаимопонимание коллектива — фраза “мы должны” также известная как “нам надо”.

Простой пример: на очередном митинге кто-то невзначай произносит “мы должны что-то сделать, чтобы эта страница загружалась за 2 секунды”. После этого митинг продолжается, затем заканчивается, но вам всё ещё непонятно, а кто мы? Кто именно должен это сделать?

ℹ️ Вот чтобы такого не было, нужно использовать более конкретные и четкие формулировки, которые ясно указывают на ответственность за выполнение задачи. Например, вместо того чтобы говорить "мы должны ускорить загрузку страницы", лучше сказать "Черкашин, тебе нужно ускорить загрузки страницы в следующем спринте".

👨 Не думаю, что мой батя читал эту книгу тайком, пока я кодил, но он сумел превратить недостатки фразы “нам надо” в достоинства. Родители живут в частном доме, и каждый год моя мама говорит отцу “Ваня, отделай крыльцо плиткой”, а он говорит “Да надо” (что означает, делать этого я конечно же не буду), и так уже года 4. Верх дипломатии, вроде и не отказался, но ответственность размыл, сроки тоже туманные.

Я как истинный сын своего отца, теперь всегда поддерживаю своего тимлида. Если он говорит “Нам нужно …” или “Мы должны”, я отвечаю ему “Да, надо”, в итоге никто этими предложениями не занимается 😄. Это стало своего рода мемом в команде.

👉 В общем, будьте конкретны в своих предложениях. И ставьте лайки для бати — если пост наберёт 20 лайков батя сделает крыльцо в этом году (но это не точно).

#weekphrase #meme