#sveltekit by @misharodshtein
Вышел SvelteKit 1.0 🥳🎉🍺
— Поздравляю всех с выходом ))
———————————
Новый интерактивный учебник
Охватывает Svelte и SvelteKit, готов на 80%.
Посмотреть: learn.svelte.dev
———————————-
Библиотека для аутентификации
Анонс в блоге у Vercel
Сайт решения: authjs.dev
————————————
Встроенный инспектор компонентов
https://www.tgoop.com/sveltejs/217164
————————————
Обзор от Джеффа Дилейни
https://www.tgoop.com/sveltejs/217308
Вышел SvelteKit 1.0 🥳🎉🍺
— Поздравляю всех с выходом ))
———————————
Новый интерактивный учебник
Охватывает Svelte и SvelteKit, готов на 80%.
Посмотреть: learn.svelte.dev
———————————-
Библиотека для аутентификации
Анонс в блоге у Vercel
Сайт решения: authjs.dev
————————————
Встроенный инспектор компонентов
https://www.tgoop.com/sveltejs/217164
————————————
Обзор от Джеффа Дилейни
https://www.tgoop.com/sveltejs/217308
svelte.dev
Welcome to Svelte • Svelte Tutorial
#sveltekit by @misharodshtein
Встроенный инспектор
В Kit 1.0.0 появилась экспериментальная функция «Веб-инспектор»
По сочетанию клавиш ⌘(Ctrl)+Shift позволяет инспектировать ваши svelte-компоненты с переходом в код по клику.
Для активации необходимо дополнить конфиг в файле svelte.config.js:
⚠️ Работает только в 1.0.0
Страница плагина на GitHub
Встроенный инспектор
В Kit 1.0.0 появилась экспериментальная функция «Веб-инспектор»
По сочетанию клавиш ⌘(Ctrl)+Shift позволяет инспектировать ваши svelte-компоненты с переходом в код по клику.
Для активации необходимо дополнить конфиг в файле svelte.config.js:
const config = {
kit: {
adapter: adapter()
},
+ vitePlugin: {
+ experimental: {
+ inspector: {
+ holdMode: true
+ }
+ }
+ },
};
⚠️ Работает только в 1.0.0
Страница плагина на GitHub
Svelte-Pathfinder 4.0 By @PaulMaly Released
Теперь абсолютная свобода в управлении состоянием роутинга и URL!
Новый кастомный стор - paramable() и набор встроенных сторов для управления частями URL ($path, $query, $fragment, $url, $pattern, $state), позволяют вносить измения в любую часть URL масимально точечно, подписываться на изменение этих состояний и применять эти изменения к интерфейсу и другим состояниям.
Кроме npm, в комплект поставки входят umd/esm модули, iife/esm бандлы, а также минифицированные cdn версии.
Пробуем на npm | unpkg | jsdelivr
#stores
Теперь абсолютная свобода в управлении состоянием роутинга и URL!
Новый кастомный стор - paramable() и набор встроенных сторов для управления частями URL ($path, $query, $fragment, $url, $pattern, $state), позволяют вносить измения в любую часть URL масимально точечно, подписываться на изменение этих состояний и применять эти изменения к интерфейсу и другим состояниям.
Кроме npm, в комплект поставки входят umd/esm модули, iife/esm бандлы, а также минифицированные cdn версии.
Пробуем на npm | unpkg | jsdelivr
#stores
Forwarded from Misha Rodshtein
Недельный отчёт
https://www.youtube.com/watch?v=OG70PKD0hEU
---
Этот выпуск посвящен деплою на свой сервер.
Инфы много. Всё немного путанно и небрежно, но как вышло )
7:30 Как деплоить Кит на свой сервер
- конфиг деплоя по коммиту через Github экшены
- конфиг сервера через файл
- настройка caddy proxy
- подключение базы данных sqlite
---
Остальное
⚠️ В Ките запретили экшн функции в layout.server.js
3:40 Как дебажить Кит в VSCode с брейкпоинтами 🔥🔥
Репо примера
https://github.com/theetrain/this-week-in-svelte
46:00 Новые viewport Units
47:40 Как стилизовать компоненты снаружи
(для новичков 👀)
54:20 Sass & Postcss -- как установить и использовать
59:47 Апдэйт пакетов npm / pnpm
https://www.youtube.com/watch?v=OG70PKD0hEU
---
Этот выпуск посвящен деплою на свой сервер.
Инфы много. Всё немного путанно и небрежно, но как вышло )
7:30 Как деплоить Кит на свой сервер
- конфиг деплоя по коммиту через Github экшены
- конфиг сервера через файл
- настройка caddy proxy
- подключение базы данных sqlite
---
Остальное
⚠️ В Ките запретили экшн функции в layout.server.js
3:40 Как дебажить Кит в VSCode с брейкпоинтами 🔥🔥
Репо примера
https://github.com/theetrain/this-week-in-svelte
46:00 Новые viewport Units
47:40 Как стилизовать компоненты снаружи
(для новичков 👀)
54:20 Sass & Postcss -- как установить и использовать
59:47 Апдэйт пакетов npm / pnpm
YouTube
This Week in Svelte (2023 June 9) - Updates, Self-hosting SvelteKit, Passing styles to children
Channel Sponsored by Vercel - https://bit.ly/3SkkVNb
This Week in Svelte is a weekly event where we casually discuss things that happened on the Svelte Discord, showcase community projects, and review some popular Q&A to learn and grow together.
This week’s…
This Week in Svelte is a weekly event where we casually discuss things that happened on the Svelte Discord, showcase community projects, and review some popular Q&A to learn and grow together.
This week’s…
#sveltekit #rpc
Пользуясь моментом, хочу прорекламировать свой фреймворк сетевого уровня Chord 🙃
https://github.com/chord-ts/rpc
Позволяет не писать кучу эндпоинтов и +server, бесшовно связывает бекенд с фронтендом с сохранением typescript типизации. Уже используется в продакшене и выиграно 2 хакатона с ним 💪
Поддержите звёздочкой, и любая обратная связь приветствуется ☺️
Пользуясь моментом, хочу прорекламировать свой фреймворк сетевого уровня Chord 🙃
https://github.com/chord-ts/rpc
Позволяет не писать кучу эндпоинтов и +server, бесшовно связывает бекенд с фронтендом с сохранением typescript типизации. Уже используется в продакшене и выиграно 2 хакатона с ним 💪
Поддержите звёздочкой, и любая обратная связь приветствуется ☺️
GitHub
GitHub - chord-ts/rpc: 💎 Cutting edge transport framework vanishing borders between frontend and backend
💎 Cutting edge transport framework vanishing borders between frontend and backend - chord-ts/rpc
This media is not supported in your browser
VIEW IN TELEGRAM
#svelte #widget #mediaquery
Привет, пару дней назад решил залить на npm виджет который уже многие годы сильно облегчает мне рутину адаптивной вёрстки.
Это мини виджет который отображает текущий брейкпоинт ширины экрана (based on tailwind defaults), а так же позволяет быстро скопировать media-query selector.
Идею взял с какого-то англоязычного канала и всё это время интегрировал что-то подобное во все проекты на этапе вёрстки.
https://www.npmjs.com/package/svelte-screensize-widget
Привет, пару дней назад решил залить на npm виджет который уже многие годы сильно облегчает мне рутину адаптивной вёрстки.
Это мини виджет который отображает текущий брейкпоинт ширины экрана (based on tailwind defaults), а так же позволяет быстро скопировать media-query selector.
Идею взял с какого-то англоязычного канала и всё это время интегрировал что-то подобное во все проекты на этапе вёрстки.
https://www.npmjs.com/package/svelte-screensize-widget