Codesandbox прямо в VS Code.
Недавно стал снова использовать Stackblitz. У меня были какие-то странные проблемы с Codesandbox, подсветка синтаксиса, отсутствие настроек ESLint (покрайней мере я не нашел настроек). Расширение выглядит очень даже интересным, лишний раз не нужно заходить на сайт, при этом открывается больше возможностей внутри самого редактора, ваши индивидуальные настройки, которых нету на сайте, сниппеты, расширения и тд.
https://marketplace.visualstudio.com/items?itemName=CodeSandbox-io.codesandbox-projects
Недавно стал снова использовать Stackblitz. У меня были какие-то странные проблемы с Codesandbox, подсветка синтаксиса, отсутствие настроек ESLint (покрайней мере я не нашел настроек). Расширение выглядит очень даже интересным, лишний раз не нужно заходить на сайт, при этом открывается больше возможностей внутри самого редактора, ваши индивидуальные настройки, которых нету на сайте, сниппеты, расширения и тд.
https://marketplace.visualstudio.com/items?itemName=CodeSandbox-io.codesandbox-projects
Solid.js в массы 🔥
Я эти мысли про Solid хотел написать еще раньше, но тут мне приглянулся интересный видос, сравнивающий концепцию React с Solid, также меня в последнее время сильно напрягает развитие React в сторону гибридных компонентов (RSC) и отказ от развития SPA.
Вкратце, я хочу сказать, что наличие Solid на рынке дает новый глоток воздуха для React разработчика.
Лично я жду стабильный релиз их метафреймворка SolidStart, который, как я надеюсь, станет убийцей Next.js.
Я эти мысли про Solid хотел написать еще раньше, но тут мне приглянулся интересный видос, сравнивающий концепцию React с Solid, также меня в последнее время сильно напрягает развитие React в сторону гибридных компонентов (RSC) и отказ от развития SPA.
Вкратце, я хочу сказать, что наличие Solid на рынке дает новый глоток воздуха для React разработчика.
Лично я жду стабильный релиз их метафреймворка SolidStart, который, как я надеюсь, станет убийцей Next.js.
Насобирал себе веберов...
TypeScript 5.2 представит новый оператор — using, которое вы можете использовать для удаления чего-либо с помощью функции [Symbol.dispose], когда оно выходит из области видимости. С оператором using я еще познакомился в С#. Оно позволяет создавать блок кода…
В обновлении Node.js 20.4.0 уже добавили поддержку
Кроме того, в node:test теперь можно мокать таймеры.
https://nodejs.org/en/blog/release/v20.4.0
Symbol.dispose Symbol.asyncDispose.Кроме того, в node:test теперь можно мокать таймеры.
https://nodejs.org/en/blog/release/v20.4.0
Интересное из обновления VS Code 1.80
- Встроенный терминал теперь поддерживает отображение изображений.
- Добавлена новая настройка
- При поиске теперь учитываются исключения из файла
- Параметр
https://code.visualstudio.com/updates/v1_80
- Встроенный терминал теперь поддерживает отображение изображений.
- Добавлена новая настройка
files.dialog.defaultPath, которая позволяет изменить стандартный путь при открытии проводника для сохранения или открытия файла.- При поиске теперь учитываются исключения из файла
.gitignore, если включена настройка search.useIgnoreFiles.- Параметр
editor.smartSelect.selectSubwords позволяет настроить выделение подслова. По умолчанию подслова выделяются, но теперь это можно отключить.https://code.visualstudio.com/updates/v1_80
Visualstudio
June 2023 (version 1.80)
Learn what is new in the Visual Studio Code June 2023 Release (1.80)
Prisma 5: Еще быстрее 🔥
Мажорное обновление Prisma привнесло мало чего нового ы плане функционала.
Была проведена огромная работа по улучшению перформанса, уменьшен бандлсайз, jsonProtocol включен по умолчанию, ускорен холодный запуск в 9 раз.
Интересно, что там у конкурентов. Drizzle, TypeORM... 🤔
Какую ORM используете Вы и почему?
Мажорное обновление Prisma привнесло мало чего нового ы плане функционала.
Была проведена огромная работа по улучшению перформанса, уменьшен бандлсайз, jsonProtocol включен по умолчанию, ускорен холодный запуск в 9 раз.
Интересно, что там у конкурентов. Drizzle, TypeORM... 🤔
Какую ORM используете Вы и почему?
www.prisma.io
Prisma 5: Faster by Default
Prisma 5.0.0 introduces new changes that make it significantly faster. These changes especially improve the experience using Prisma in serverless environments.
Как создать favicon в 2023 году
Ранее я часто задавался вопросом о том, как правильно создавать и использовать favicon. Похоже, что до сих пор я не знаю, как это делается правильно, самое главное чтобы было кроссбраузерно 😁
В блоге Evil Martians есть информация о том, как создавать и использовать favicon правильно: https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs
- Для легаси браузеров используйте в корне сайта
- Для устройств на Android используйте webmanifest с иконками размером 192x192 и 512x512.
- Оптимизируйте png и svg иконки с помощью инструментов svgo и Squoosh.
- Используйте svg иконку со светлой/темной версией для современных браузеров.
Ранее я часто задавался вопросом о том, как правильно создавать и использовать favicon. Похоже, что до сих пор я не знаю, как это делается правильно, самое главное чтобы было кроссбраузерно 😁
В блоге Evil Martians есть информация о том, как создавать и использовать favicon правильно: https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs
- Для легаси браузеров используйте в корне сайта
favicon.ico.- Для устройств на Android используйте webmanifest с иконками размером 192x192 и 512x512.
- Оптимизируйте png и svg иконки с помощью инструментов svgo и Squoosh.
- Используйте svg иконку со светлой/темной версией для современных браузеров.
evilmartians.com
How to Favicon in 2026: Three files that fit most needs—Martian Chronicles, Evil Martians’ team blog
Prefer SVG over PNG, trust browsers to downscale, drop obscure formats—the ultimate, exhaustive guide to favicons for modern web. Includes steps for static HTML and Webpack.
This media is not supported in your browser
VIEW IN TELEGRAM
Forwarded from Reatom новости (artalar)
Мигрировали на https://starlight.astro.build !
- перф перф перф
- продуманный дизайн
- мобильная, планшетная, десктопная раскладки
- удобная навигация
- поиск по сайту!
Please open Telegram to view this post
VIEW IN TELEGRAM
v1001.reatom.dev
Reatom - State Managers for Any Kind of Apps
Lightest and simplest at start, extremely feature-rich for growth. Modern state management for React, Vue, and more.
NPM теперь имеет галочку верификации пакета, опубликованный через GitHub Actions.
https://github.blog/2023-04-19-introducing-npm-package-provenance/
Краткий гайд как добавить галочку [тык]:
- В package.json указать repository.url
- В GitHub Actions workflow указать env
- Выставить версию Node.js 18
https://github.blog/2023-04-19-introducing-npm-package-provenance/
Краткий гайд как добавить галочку [тык]:
- В package.json указать repository.url
- В GitHub Actions workflow указать env
NPM_CONFIG_PROVENANCE: true и id-token: write в permissions- Выставить версию Node.js 18
The GitHub Blog
Introducing npm package provenance
How to verifiably link npm packages to their source repository and build instructions.
В create-vite было добавлено много новых темплейтов и парочка фреймворков.
Фреймворки:
- Solid
- Qwik
Добавился пункт Others, который включает в себя create-vite-extra и create-electron-vite темплейты.
Фреймворки:
- Solid
- Qwik
Добавился пункт Others, который включает в себя create-vite-extra и create-electron-vite темплейты.
Ну все, я закончил с переездом в новую хату, к завтрашнему дню уже буду подключен к глобальной сети интернет (полтора месяца ожидания), потом может быть подрублю стрим.
Многие тут не в курсе до сих пор где я, и почему канал пустовал больше месяца. Поэтому, предлагаю вам подписаться на мой Telegram форум «ТВИЧ КОРЫТО» (я пишу в топикеVS_Code Web_Storm).
В ближайшую неделю планирую начать писать хоть какие-нибудь посты, на очереди разбор грядущих обновлений Vitest 1.0 и Vite 5.0.
Многие тут не в курсе до сих пор где я, и почему канал пустовал больше месяца. Поэтому, предлагаю вам подписаться на мой Telegram форум «ТВИЧ КОРЫТО» (я пишу в топике
В ближайшую неделю планирую начать писать хоть какие-нибудь посты, на очереди разбор грядущих обновлений Vitest 1.0 и Vite 5.0.
До сих пор не придумал название для канала. Пускай пока будет так 😄
Пишите в комментариях, если есть идеи 🤔
Пишите в комментариях, если есть идеи 🤔
Оказывается с версии 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