До сих пор не придумал название для канала. Пускай пока будет так 😄
Пишите в комментариях, если есть идеи 🤔
Пишите в комментариях, если есть идеи 🤔
Оказывается с версии Node.js 20.6.0 была встроена поддержка .env
Прощай dotenv получается 😁
Прощай dotenv получается 😁
GitHub
node/doc/changelogs/CHANGELOG_V20.md at main · nodejs/node
Node.js JavaScript runtime ✨🐢🚀✨. Contribute to nodejs/node development by creating an account on GitHub.
Вышел 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
Из самого вкусного, то что теперь библиотека не зависит от 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
mantine.dev
Version v7.0.0 | Mantine
React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience
Forwarded from zede code
Всем привет. Немного подпропал ибо происходило много всего интересного.
Но давайте по порядку:
1. Официально подтвердили мое участие в ufadevconf. Начинаю готовиться с докладом "JS которого нет", в котором буду обсуждать заблуждения и мифы вокруг языка JS, а так же как 1 язык существует сразу в нескольких реальностях.
2. Совершенно спонтанно из моей идеи сделать курс по вью и прогнать по нему 1 человека это превратилось в публичную серию лекций по ускоренному изучению Vue за 2 недели (ауф маркетинг XD). Принять участие в нем может любой и совершенно бесплатно, кто напишет мне в лс с просьбой в участии.
Как будет все происходить
1. Мы будем все собираться в районе 17-18 00 по мск на стриме (поэтому +- кто работает будет ок)
2. Будет лекция с вопросами/ответами на 1,5-2ч
3. Будет домашка чтоб быстро закрепить пройденное
4. Будем смотреть прошлую домашку либо по желанию, либо рандомно
5. На финалочку смотрим проект по реализацию real time чата с реактивностью, фильтрами и тп
Формат сугубо экспериментальный и стихийный от которого я сам не знаю чего ожидать, но контента должно точно хватить
На это время техностримы откладываются до завершения 2-ух недельного цикла
Но давайте по порядку:
1. Официально подтвердили мое участие в ufadevconf. Начинаю готовиться с докладом "JS которого нет", в котором буду обсуждать заблуждения и мифы вокруг языка JS, а так же как 1 язык существует сразу в нескольких реальностях.
2. Совершенно спонтанно из моей идеи сделать курс по вью и прогнать по нему 1 человека это превратилось в публичную серию лекций по ускоренному изучению Vue за 2 недели (ауф маркетинг XD). Принять участие в нем может любой и совершенно бесплатно, кто напишет мне в лс с просьбой в участии.
Как будет все происходить
1. Мы будем все собираться в районе 17-18 00 по мск на стриме (поэтому +- кто работает будет ок)
2. Будет лекция с вопросами/ответами на 1,5-2ч
3. Будет домашка чтоб быстро закрепить пройденное
4. Будем смотреть прошлую домашку либо по желанию, либо рандомно
5. На финалочку смотрим проект по реализацию real time чата с реактивностью, фильтрами и тп
Формат сугубо экспериментальный и стихийный от которого я сам не знаю чего ожидать, но контента должно точно хватить
На это время техностримы откладываются до завершения 2-ух недельного цикла
Ufacoder
#UFADEVCONF2025
В обновлении 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))
Please open Telegram to view this post
VIEW IN TELEGRAM
Насобирал себе веберов...
В обновлении 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(…
Извините, что так долго не писал, был на минус морали 😔
Ну так вот, продолжаем продолжать.
Еще из интересного, теперь имеем😲
Ну так вот, продолжаем продолжать.
Еще из интересного, теперь имеем
navigator.platform и navigator.language Please open Telegram to view this post
VIEW IN TELEGRAM
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
Мало кто в курсе, с недавних пор, Node.js экспериментально поддерживает компиляцию исполняемых приложений.
Из минусов сейчас имеем:
- Приложение с "Hello World" весит ~100MB ⚰️
- Работает только с CJS
- Проблема с внедрением внешних зависимостей (используйте esbuild, rollup, etc..)
Ознакомиться с примером можно тут: https://github.com/crashmax-dev/node-sea
Ссылка на документацию: https://nodejs.org/api/single-executable-applications.html
This media is not supported in your browser
VIEW IN TELEGRAM
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] }
Please open Telegram to view this post
VIEW IN TELEGRAM
Astro 4.0
- Тулбар для отладки в браузере
- Интернационализации (i18n) теперь поддерживается в роутинге
- Поддержка View Transition API
- Переработан вывод ошибок
- Документация переехала на Starlight
В ближайшее время, сделаю пост про стак разработки, в составе которого, как раз будет Astro, на этом примере покажу какие есть фишки и особенности у данной платформы, а для начала нужно будет обновиться😎
- Тулбар для отладки в браузере
- Интернационализации (i18n) теперь поддерживается в роутинге
- Поддержка View Transition API
- Переработан вывод ошибок
- Документация переехала на Starlight
В ближайшее время, сделаю пост про стак разработки, в составе которого, как раз будет Astro, на этом примере покажу какие есть фишки и особенности у данной платформы, а для начала нужно будет обновиться
Please open Telegram to view this post
VIEW IN TELEGRAM
Насобирал себе веберов...
Solid.js в массы 🔥 Я эти мысли про Solid хотел написать еще раньше, но тут мне приглянулся интересный видос, сравнивающий концепцию React с Solid, также меня в последнее время сильно напрягает развитие React в сторону гибридных компонентов (RSC) и отказ от…
Тут оказывается вышла вторая бета фреймворка SolidStart 🎉
Очень сильно жду стабильного релиза, чтобы слезть с иглы Next.js, причина этому, как ни странно - React!
Пройдемся по технической части:
- Под капотом Nitro (авторы unjs, кто не понял) на котором работает Nuxt, и Vinxi. Всё это добро можно будет настраивать😎
- Агностик роутер/метадата библиотеки будут работать в Solid/SolidStart, замечательное изменение для разработчиков библиотек, которые будут использовать эти зависимости в своих проектах (э - экосистема).
- Клиентский рендеринг, как и у других, через динамический импорт, тут ничего нового.
- Поддержка серверных функций. "use client"🤡
- Провели рефакторинг кодовой базы, значительно сократив количество строк кода с более чем 10 тысяч до примерно 1400 в 32 файлах вместо исходных 150.
Всех с наступающим новым годом, надеюсь не последний пост в этом году.☕️
https://github.com/solidjs/solid-start/releases/tag/v0.4.0
Очень сильно жду стабильного релиза, чтобы слезть с иглы 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
Please open Telegram to view this post
VIEW IN TELEGRAM
GitHub
Release v0.4.0 - Beta 2 · solidjs/solid-start
It's been a long year and we couldn't be more thrilled to see all the amazing projects built on SolidStart. Things like https://post.news being built on Start among others. We've had in...
Подборка 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
Без расширения можно использовать лайфхак (вложенность не будет видно):
На этот раз последний пост в этом году, всех с наступающим!❤️
Расширение для просмотра типов, представленные в виде иерархической структуры, с возможностью быстрого поиска и навигации: 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 }На этот раз последний пост в этом году, всех с наступающим!
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
React RFC: use()
Читая X(Twitter) увидел пост про новый RFC в React: useIsolation()
Поизучав тему, вспомнил про свои наработки в этом русле, когда у нас есть контекст с полями и нужно чтобы хук был привязан ТОЛЬКО к определенному полю, дабы избежать лишних ререндеров, чтобы было понятнее, вот пример с псевдокодом (ререндер будет производиться только с тем полем, которое было изменено в скоупе):
К тому же, есть еще такой паттерн: https://github.com/reactjs/rfcs/issues/168
Но я тут не для этого пишу этот пост, самое интересное, что хук use() в будущем скорее всего станет работать именно так (ответ Дэна):
К тому же, есть информация, что React Forget будет на этапе компиляции точечно мемоизировать такие участки кода.
Всё это были мои мысли насчет надвигающего хука 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(), а что думаете вы?
Please open Telegram to view this post
VIEW IN TELEGRAM
Пост по обновлению Node.js 21.7.0 задержался, ну да ладно, пишу с небольшой просьбой (только maсOS), но для начала пройдемся по новым фичам.
Неожиданно, форматирование из коробки, окей!
Загрузка и парсинг .env файлов, поддержка многострочных значений. К тому же, ранее был добавлен флаг
Node.js SEA — как же я много хапнул боли, копаясь в них, начиная от сборки, заканчивая внедрением внешних зависимостей, шокирование людей размером бинарника 😁
Ну так вот, теперь перейдем к самой просьбе для macOS-ников. Есть у меня тут репозиторий, где я тестирую SEA как оно есть. Начиная с 21.7.0 перестала работать подпись, вообще, даже на macOS, а вот с патча 21.7.1 вроде как исправили, но я не уверен насчет macOS, если есть желающие, можете законтрибьютить сюда, пример сборки находится здесь.
P.S. Кто не понял, что за Node.js SEA, прошу ознакомится https://t.me/crashmaxdev/351
Неожиданно, форматирование из коробки, окей!
import util from 'node:util'
util.styleText('bold', styleText('bgCyan', 'Привет!')
console.log(util.inspect.colors) // мапка с цветами
Загрузка и парсинг .env файлов, поддержка многострочных значений. К тому же, ранее был добавлен флаг
--env-fileprocess.loadEnvFile() // загрузит .env, можно передать аргументом актуальный путь до .env
console.log(process.env.SOME_ENV_VALUE)
import util from 'node:util'
util.parseEnv('HELLO=world') // { HELLO: 'world' }
Node.js SEA — как же я много хапнул боли, копаясь в них, начиная от сборки, заканчивая внедрением внешних зависимостей, шокирование людей размером бинарника 😁
P.S. Кто не понял, что за Node.js SEA, прошу ознакомится https://t.me/crashmaxdev/351
Наткнулся на сайт "Вопросы с собеседований". Раздел с Frontend насчитывает около 1400 вопросов, а прикол в том, что просчитана вероятность с которой вопрос будет задан на собеседовании и есть пример ответа.
Еще можете зайти в канал с разбором вопросов: https://t.me/easy_javascript_ru
Еще можете зайти в канал с разбором вопросов: https://t.me/easy_javascript_ru
Iterator helpers (proposal)
Пропозал расширяет
Cтатический метод
Один из долгожданных пропозалов, который смог добраться до первой реализации в v8🎉 Поскорее бы еще увидеть Temporal, ShadowRealm и Pipeline Operator.
https://v8.dev/features/iterator-helpers
P.S. Полифил в core-js https://github.com/zloirock/core-js#iterator-helpers
Пропозал расширяет
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
https://v8.dev/features/iterator-helpers
P.S. Полифил в core-js https://github.com/zloirock/core-js#iterator-helpers
Please open Telegram to view this post
VIEW IN TELEGRAM
v8.dev
Iterator helpers · V8
Interfaces that help with general usage and consumption of iterators.
GitHub
GitHub - dtinth/setup-github-actions-caching-for-turbo: Action to set up Turborepo Remote Caching to work with GitHub Actions'…
Action to set up Turborepo Remote Caching to work with GitHub Actions' built-in cache instead of Vercel (codename: turbogha) - dtinth/setup-github-actions-caching-for-turbo
Заметка будет полезна для тех, кто использует PNPM + Turborepo на GitHub Actions.
Благодаря этому экшену https://github.com/dtinth/setup-github-actions-caching-for-turbo получилось ускорить сборку в несколько раз » FULL TURBO. Ниже прикладываю пример, забирайте, кому будет полезно🤝 🤝
Благодаря этому экшену 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
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from Виталий и Платформа
Собрал для вас в одну папку авторов, ведущих блоги по фронтенду, веб-разработке и вокруг неё.
🔗 https://t.me/addlist/Z6Efi4jXwe9lODcy
Специально отобрал именно ламповые авторские блоги, а не перепосты ссылок, документации или тексты не про код.
Для меня это хороший способ следить за реакциями о событиях индустрии. Например, конференции проходят не так часто, и контент с них становится общедоступным не сразу. Кроме того, там обычно рассказывают о чём-то эпичном, не сиюминутном, так как формат обязывает. А вот в авторских бложиках (и комментариях к постам) можно собрать цельную картинку происходящего в рутине, и не просто факты, а именно авторскую интерпретацию и комментарии.
Надеюсь, будет полезно ✌️
@web_platform | Поддержать канал 🤝
🔗 https://t.me/addlist/Z6Efi4jXwe9lODcy
Специально отобрал именно ламповые авторские блоги, а не перепосты ссылок, документации или тексты не про код.
Для меня это хороший способ следить за реакциями о событиях индустрии. Например, конференции проходят не так часто, и контент с них становится общедоступным не сразу. Кроме того, там обычно рассказывают о чём-то эпичном, не сиюминутном, так как формат обязывает. А вот в авторских бложиках (и комментариях к постам) можно собрать цельную картинку происходящего в рутине, и не просто факты, а именно авторскую интерпретацию и комментарии.
Надеюсь, будет полезно ✌️
@web_platform | Поддержать канал 🤝