Насобирал себе веберов...

Собрал для вас в одну папку авторов, ведущих блоги по фронтенду, веб-разработке и вокруг неё.

🔗 https://t.me/addlist/Z6Efi4jXwe9lODcy

Специально отобрал именно ламповые авторские блоги, а не перепосты ссылок, документации или тексты не про код.

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

Надеюсь, будет полезно ✌️

@web_platform | Поддержать канал 🤝

Заметка будет полезна для тех, кто использует PNPM + Turborepo на GitHub Actions.

Благодаря этому экшену https://github.com/dtinth/setup-github-actions-caching-for-turbo получилось ускорить сборку в несколько раз » FULL TURBO. Ниже прикладываю пример, забирайте, кому будет полезно 🤝🤝

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup turborepo cache
        uses: dtinth/setup-github-actions-caching-for-turbo@v1

      - name: Install pnpm
        uses: pnpm/action-setup@v3
        with:
          version: 8

      - name: Install Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: pnpm

      - name: Install dependencies
        run: pnpm install

      - name: Build apps
        run: pnpm build

Iterator helpers (proposal)

Пропозал расширяет Iterator.prototype новыми методами: drop, every, filter, find, flatMap, forEach, map, reduce, some, take и toArray (уже доступно в Google Chrome 122+).

Cтатический метод Iterator.from создает итератор. Если объект имеет Symbol.iterator, вызывает его для получения итератора. В противном случае создается новый объект Iterator.

class Iter {
  value = 0

  next() {
    return { value: ++this.value, done: this.value > 3 }
  }
}

for (const value of Iterator.from(new Iter())) {
  console.log(value) // 1, 2, 3
}

for (const value of Iterator.from([1, 2, 3])) {
  console.log(value) // 1, 2, 3
}

Один из долгожданных пропозалов, который смог добраться до первой реализации в v8 🎉 Поскорее бы еще увидеть Temporal, ShadowRealm и Pipeline Operator.

https://v8.dev/features/iterator-helpers

P.S. Полифил в core-js https://github.com/zloirock/core-js#iterator-helpers

Наткнулся на сайт "Вопросы с собеседований". Раздел с Frontend насчитывает около 1400 вопросов, а прикол в том, что просчитана вероятность с которой вопрос будет задан на собеседовании и есть пример ответа.

Еще можете зайти в канал с разбором вопросов: https://t.me/easy_javascript_ru

Пост по обновлению Node.js 21.7.0 задержался, ну да ладно, пишу с небольшой просьбой (только maсOS), но для начала пройдемся по новым фичам.

Неожиданно, форматирование из коробки, окей!

import util from 'node:util'

util.styleText('bold', styleText('bgCyan', 'Привет!')

console.log(util.inspect.colors) // мапка с цветами

Загрузка и парсинг .env файлов, поддержка многострочных значений. К тому же, ранее был добавлен флаг --env-file

process.loadEnvFile() // загрузит .env, можно передать аргументом актуальный путь до .env
console.log(process.env.SOME_ENV_VALUE)

import util from 'node:util'
util.parseEnv('HELLO=world') // { HELLO: 'world' }

Node.js SEA — как же я много хапнул боли, копаясь в них, начиная от сборки, заканчивая внедрением внешних зависимостей, шокирование людей размером бинарника 😁

Ну так вот, теперь перейдем к самой просьбе для macOS-ников. Есть у меня тут репозиторий, где я тестирую SEA как оно есть. Начиная с 21.7.0 перестала работать подпись, вообще, даже на macOS, а вот с патча 21.7.1 вроде как исправили, но я не уверен насчет macOS, если есть желающие, можете законтрибьютить сюда, пример сборки находится здесь.

P.S. Кто не понял, что за Node.js SEA, прошу ознакомится https://t.me/crashmaxdev/351

React RFC: use()

Читая X(Twitter) увидел пост про новый RFC в React: useIsolation()
Поизучав тему, вспомнил про свои наработки в этом русле, когда у нас есть контекст с полями и нужно чтобы хук был привязан ТОЛЬКО к определенному полю, дабы избежать лишних ререндеров, чтобы было понятнее, вот пример с псевдокодом (ререндер будет производиться только с тем полем, которое было изменено в скоупе):

const IsolatedContext = createIsolatedContext(null);

function useBar() {
  const { bar } = useIsolatedContext(IsolatedContext);
  return bar;
}

function useFoo() {
  const { foo } = useIsolatedContext(IsolatedContext);
  return foo;
}

function Foo() {
  const foo = useFoo();
  return <div>{foo}</div>;
}

function Bar() {
  const bar = useBar();
  return <div>{bar}</div>;
}

export function App() {
  return (
    <IsolatedContext.Provider>
      <Foo />
      <Bar />
    </IsolatedContext.Provider>
  );
}

К тому же, есть еще такой паттерн: https://github.com/reactjs/rfcs/issues/168

Но я тут не для этого пишу этот пост, самое интересное, что хук use() в будущем скорее всего станет работать именно так (ответ Дэна):

function useFoo() {
  return useMemo(() => {
    const { foo } = use(SomeContext);
    return foo;
  }, []);
}

К тому же, есть информация, что React Forget будет на этапе компиляции точечно мемоизировать такие участки кода.

Всё это были мои мысли насчет надвигающего хука use(), а что думаете вы? 🤔

Подборка TypeScript расширений для VS Code

Расширение для просмотра типов, представленные в виде иерархической структуры, с возможностью быстрого поиска и навигации: https://marketplace.visualstudio.com/items?itemName=mxsdev.typescript-explorer

Красиво выводит TS ошибки: https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors

Новое расширение в моем арсенале, позволяет посмотреть тип в развернутом виде: https://marketplace.visualstudio.com/items?itemName=MylesMurphy.prettify-ts
Без расширения можно использовать лайфхак (вложенность не будет видно):

type A = { a: string }
type B = { b: string }
type C = A & B // A & B

type UnwrapType<T> = Omit<T, never>
type U = UnwrapType<C> // { a: string, b: string }

На этот раз последний пост в этом году, всех с наступающим! ❤️

Тут оказывается вышла вторая бета фреймворка SolidStart 🎉

Очень сильно жду стабильного релиза, чтобы слезть с иглы Next.js, причина этому, как ни странно - React!

Пройдемся по технической части:
- Под капотом Nitro (авторы unjs, кто не понял) на котором работает Nuxt, и Vinxi. Всё это добро можно будет настраивать 😎

import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
  start: {
    server: {
      /* NITRO SETTINGS */
    }
  }
});

- Агностик роутер/метадата библиотеки будут работать в Solid/SolidStart, замечательное изменение для разработчиков библиотек, которые будут использовать эти зависимости в своих проектах (э - экосистема).

- Клиентский рендеринг, как и у других, через динамический импорт, тут ничего нового.

import { clientOnly } from "@solidjs/start"

const BigDataGrid = clientOnly(() => import("../BigDataGrid"));

function IsomorphicComp() {
  return <BigDataGrid />
}

- Поддержка серверных функций. "use client" 🤡

async function callMeAnywhere(id: number) {
  "use server";
  const res = await db.findSomething({ where: { id } });
  return res.data;
}

- Провели рефакторинг кодовой базы, значительно сократив количество строк кода с более чем 10 тысяч до примерно 1400 в 32 файлах вместо исходных 150.

Всех с наступающим новым годом, надеюсь не последний пост в этом году. ☕️

https://github.com/solidjs/solid-start/releases/tag/v0.4.0

https://githubunwrapped.com

Astro 4.0

- Тулбар для отладки в браузере
- Интернационализации (i18n) теперь поддерживается в роутинге
- Поддержка View Transition API
- Переработан вывод ошибок
- Документация переехала на Starlight

В ближайшее время, сделаю пост про стак разработки, в составе которого, как раз будет Astro, на этом примере покажу какие есть фишки и особенности у данной платформы, а для начала нужно будет обновиться 😎

proposal-array-grouping добрался до stage 4 🎉

const array = [1, 2, 3, 4, 5];

// `Object.groupBy` groups items by arbitrary key.
// In this case, we're grouping by even/odd keys
Object.groupBy(array, (num, index) => {
  return num % 2 === 0 ? 'even': 'odd';
});
// =>  { odd: [1, 3, 5], even: [2, 4] }

// `Map.groupBy` returns items in a Map, and is useful for grouping
// using an object key.
const odd  = { odd: true };
const even = { even: true };
Map.groupBy(array, (num, index) => {
  return num % 2 === 0 ? even: odd;
});
// =>  Map { {odd: true}: [1, 3, 5], {even: true}: [2, 4] }

Node.js single executable application

Мало кто в курсе, с недавних пор, Node.js экспериментально поддерживает компиляцию исполняемых приложений.

Из минусов сейчас имеем:
- Приложение с "Hello World" весит ~100MB ⚰️
- Работает только с CJS
- Проблема с внедрением внешних зависимостей (используйте esbuild, rollup, etc..)

Ознакомиться с примером можно тут: https://github.com/crashmax-dev/node-sea
Ссылка на документацию: https://nodejs.org/api/single-executable-applications.html

Извините, что так долго не писал, был на минус морали 😔

Ну так вот, продолжаем продолжать.
Еще из интересного, теперь имеем navigator.platform и navigator.language 😲

В обновлении Node.js 21.2.0 добавили __dirname для ESM. Он находится в import.meta.dirname, и там же import.meta.filename.

Кто не в курсе, раньше мы делали вот так 💀

import url from 'node:url'
import path from 'node:path'
const __dirname = path.dirname(url.fileURLToPath(import.meta.url))

Всем привет. Немного подпропал ибо происходило много всего интересного.

Но давайте по порядку:
1. Официально подтвердили мое участие в ufadevconf. Начинаю готовиться с докладом "JS которого нет", в котором буду обсуждать заблуждения и мифы вокруг языка JS, а так же как 1 язык существует сразу в нескольких реальностях.

2. Совершенно спонтанно из моей идеи сделать курс по вью и прогнать по нему 1 человека это превратилось в публичную серию лекций по ускоренному изучению Vue за 2 недели (ауф маркетинг XD). Принять участие в нем может любой и совершенно бесплатно, кто напишет мне в лс с просьбой в участии.

Как будет все происходить
1. Мы будем все собираться в районе 17-18 00 по мск на стриме (поэтому +- кто работает будет ок)
2. Будет лекция с вопросами/ответами на 1,5-2ч
3. Будет домашка чтоб быстро закрепить пройденное
4. Будем смотреть прошлую домашку либо по желанию, либо рандомно
5. На финалочку смотрим проект по реализацию real time чата с реактивностью, фильтрами и тп

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

Вышел Mantine 7.0 🎉

Из самого вкусного, то что теперь библиотека не зависит от emotion css-in-js, тем самым, это изменение повышает производительность, уменьшает размер js-бандла и позволяет использовать библиотеку в средах, где css-in-js не поддерживается, например, Next.js с App Router.

- Список изменений - https://mantine.dev/changelog/7-0-0
- Релиз на GitHub - https://github.com/mantinedev/mantine/releases/tag/7.0.0

Оказывается с версии Node.js 20.6.0 была встроена поддержка .env
Прощай dotenv получается 😁

До сих пор не придумал название для канала. Пускай пока будет так 😄
Пишите в комментариях, если есть идеи 🤔