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

Собрал для вас в одну папку авторов, ведущих блоги по фронтенду, веб-разработке и вокруг неё. 🔗 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 получается 😁

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