🌶️ IMHO 🌶️ - Rich Harris on frameworks, the web, and the edge.
この記事はSvelte/Sveltekitの作者であるRich Harris氏による講演「🌶️ IMHO 🌶️」を翻訳したものです。 この記事の作成には、Whisperによる書き起こし、DeepLおよびChatGPTによる翻訳を補助的に使用しています。 また、本文中には適宜訳注を入れています。 この場を借りて、翻訳を許可していただいたRich氏、 またこの翻訳をきめ細かくレビューしていただいたtomoam氏、英文解釈の相談に乗っていただいたshamokit氏へ感謝を表明したいと思います。 So, I'm going to be giving a talk tonight called In My Humble Opinion, and it's a collection of loosely connected thoughts about recent trends in front
Announcing SvelteKit 1.0
Announcing SvelteKit 1.0 Web development, streamlined The Svelte team Dec 14 2022 After two years in development, SvelteKit has finally reached 1.0. As of today, it’s the recommended way to build Svelte apps of all shapes and sizes. We’re so excited to share this release with you. It’s the culmination of thousands of hours of work, both from the Svelte core team and the wider community, and we thi
Panda CSS - Chakra UI の Zero Runtime CSS フレームワーク
🐼 パンダが来た / Panda CSS Chakra UI から、新しい CSS フレームワークである Panda CSS がリリースされました。 2023 年 3 月に公開された Chakra UI の今後のロードマップに関するブログ内でもすでに言及されていましたが、今回それが正式にリリースされた形となります。 Panda CSS の特徴 リポジトリ内 README からの抜粋となりますが、次のような特徴があります。 ⚡️ Write style objects or style props, extract them at build time → Style 用のオブジェクトや Props を定義してビルドで抽出 ✨ Modern CSS output — cascade layers @layer, css variables and more → Cascade Layers
Denoのフロントエンド開発の動向【2021年秋】
半年ほど前にDenoのフロントエンド開発についてまとめた以下のような記事を書きました。 ここ半年程でまた色々と変化があったため、改めてまとめてみます。 要約 DenoにNode.js互換モードが実装されました Aleph.js v0.3 betaがリリースされました Freshやpackup, Ultraなどの新しいフレームワーク/ツールが登場しました SnelによってSvelteアプリが作れるようになりました vnoがSSRやSSGなどをサポート VelociraptorがGit hooksをサポート npmパッケージとの相互運用性について Node.js互換モード Deno v1.5でNode.js互換モードが実装されました。 現時点でもexpressやkoaなどのパッケージがある程度動作するようです。 現在、このNode.js互換モードを使用して、ViteやNext.jsなどを動かす
Published: August 4, 2023 Updated: October 27, 2023 Part 1: an intro about music, defaults, and bubbles Like a lot of people, there was a time when the only music I listened to was whatever was played on my local radio station. (A lot of people over 30 or so, anyway. If this doesn’t sound familiar to you yet, just stick with me for a minute here.) At the time, I was happy with that. It seemed like
Unovis
import React, { useCallback } from 'react' import { VisXYContainer, VisAxis, VisArea, VisXYLabels } from '@unovis/react' import { data, formats, DataRecord, getLabels } from './data' export default function StackedArea (): JSX.Element { const labels = getLabels(data) return ( <> <VisXYContainer data={data} height={'50vh'}> <VisArea x={useCallback((d: DataRecord) => d.year, [])} y={formats.map(g =>
Webアプリケーションフレームワーク「SvelteKit 1.0」正式リリース。SSR/SSG/SPAなど対応
Webアプリケーションフレームワーク「SvelteKit 1.0」正式リリース。SSR/SSG/SPAなど対応 Webアプリケーションフレームワーク「SvelteKit 1.0」が正式リリースとなりました。 SvelteKitは、Web UIフレームワークの「Svelte」と、ビルドツールの「Vite」を基盤としたWebアプリケーションフレームワークです。 It's here.https://t.co/mP8vD5zcta — Svelte (@sveltejs) December 14, 2022 Svelteは、読みやすく簡潔なコードでWebアプリケーションのユーザーインターフェイスを構成できるフレームワークです。 仮想DOMを使わず、コンパイル時に状態が変化する箇所を特定し、その変更のためのJavaScriptを生成することで実行時の高速な状態変更を実現することも大きな特徴です。 J
2022年10月の「TechFeed Night #4 - フロントエンドアーキテクチャを語る」でSvelte/SvelteKitのユースケースやReactやVue.jsとの併用について紹介してくれた山下裕一朗さんはSvelteのメンテナーとしても活動中です。日々、Svelteの情報発信をひたすら続けている山下さんに、なぜSvelteにそこまで入れ込むのか、Svelteの魅力はどこにあるのか、Svelteへのアツい思いをあますところなく語っていただきます! 今回話を伺ったエキスパート フォローしよう！ Attention! 本記事では何度かVue.jsとの比較が登場します。Vue.jsと比較する理由は以下の2点です。 私が業務で Vue.jsを使用しておりある程度わかるから 読者の皆さんもよく知っているであろうVue.jsとSvelteを比較することで理解を促進できるであろうから この記事
Fower
Atomic PropsWrite styles with Atomic Props, rapid to develop complicated UI by composing Atomic Props. Scoped styleBorned with scoped styles, So don't worry any conflicts due to the globalnamespace. Type SafePerfect support for TypeScript, which bring Type definition,IntelliSense,Self documentation.
https://sveltesummit.com/ https://www.youtube.com/watch?v=vHHLLJA0b70 JST夜中スタートだとリアルタイムで見れない...😴 というわけで、気になるトークだけまとめました。 The Zen of Svelte (Morgan Williams) https://www.youtube.com/watch?v=vHHLLJA0b70&t=683s Svelteはフレームワークである そして学びやすいのが特徴 Pythonのように、Zenの心得がある https://github.com/feltcoop/why-svelte#easy-to-learn 作者のRich氏もこう言ってる Frameworks are not tools for organizing your code, They are tools for
<script> let count = 0; function handleClick() { count += 1; } $: doubled = count * 2; </script> <button on:click={handleClick}> Clicked {count} {count === 1 ? "time" : "times"} </button> <p>{count} doubled is {doubled}</p> 上記のコード例では通常の JavaScript と同じ方法で変数が宣言されていますが、これは Svelte のコンパイラによりリアクティブな変数に変換されます。count 変数の値が更新されるたびに、UI が自動的に更新されます。$: で始まる式は Svelte のリアクティビティシステムにより自動的に監視され、変更があると再評価されます（構文として
lib/Counter.svelteのファイル先頭に<svelte:options tag="my-counter" />を追加してコンポーネントをカスタム要素としてコンパイルするようにします。 tagで指定した文字列が、Web Componentsの名前となります。 <svelte:options tag="my-counter" /> <script lang="ts"> let count: number = 0 const increment = () => { count += 1 } </script> <button on:click={increment}> Clicks: {count} </button> <style> button { font-family: inherit; font-size: inherit; padding: 1em 2em; color:
「Svelte」はWebページ用UIフレームワークで、コンパイル時にプレーンなJavaScriptを生成するといった特徴があります。本連載ではSvelteの活用方法を順を追って説明していきます。初回となる今回は、Svelteの概要と特徴を説明するとともに、実際にプロジェクトを作成して実行させ、Svelteを体験します。 はじめに WebページのUIを構築するためのライブラリやフレームワークは、ReactやVue.js、Angularといったさまざまなものが存在します。本記事で取り上げるSvelteも、そのようなフレームワークの1つです。 図1 Svelteの公式ページ 他のライブラリやフレームワークでは、それ自体のコードがブラウザーに読み込まれて実行されるのに対して、Svelteでは、Svelte自身のコードを含まないプレーンなJavaScriptをコンパイルで生成するため、実行ファイルサ
これは、仮想DOMを使用しない宣言的UIフレームワークであるSvelteに関するセッションです。 今回は、Svelteコンポーネントがどのようなランタイムになるのかを解説します。このセッションを聞くことで、なぜSvelteランタイムが小さく高速なのかを理解できます。 https://jsconf.jp/2022/talk/svelte-runtime-101
Storybook 6.2
Storybook is the industry standard UI development workshop for components and pages. It's used by Netflix, Slack, Target, Shopify, Stripe, and thousands of teams around the world. As a modern frontend developer, you’re in a constant cat-and-mouse game to stay on top of ecosystem changes. Every Storybook release contains hundreds of adaptations to try to make that easier for you, whether you’re upg
GitHub - rajnandan1/kener: Kener is a Modern Self hosted Status Page, batteries included
Kener: Open-source Node.js status page tool, designed to make service monitoring and incident handling a breeze. It offers a sleek and user-friendly interface that simplifies tracking service outages and improves how we communicate during incidents. And the best part? Kener integrates seamlessly with GitHub, making incident management a team effort—making it easier for us to track and fix issues t
What's the deal with SvelteKit?
What's the deal with SvelteKit? We're rethinking how to build Svelte apps. Here's what you need to know Rich Harris Nov 5 2020 If you attended Svelte Summit last month you may have seen my talk, Futuristic Web Development, in which I finally tackled one of the most frequently asked questions about Svelte: when will Sapper reach version 1.0? The answer: never. This was slightly tongue-in-cheek — as
Histoire はフランス語で「Story」という意味の単語であり、Storybook のように UI コンポーネントのカタログを作成するツールです。 Histoire は以下のような特徴を謳っています。 Vite にネイティブ対応 Histoire は Vite 向けのツールであるので、vite.config.ts の設定を再利用できます。このあたりの特徴は Vitest と同様ですね Story をフレームワークそのままの書き方で作成できる Storybook の場合 Vue で SFC ファイル形式のコンポーネントを作成していたとしても、Story を作成する場合には .stories.ts のような拡張子でファイルを作成して Storybook 向けのコンポーネントの記述をする必要があります。一方 Histoire は Story を作成する際にも .vue や .svelte
続・React x MobXな趣味プロダクトをTypeScriptでリライトした - console.lealog(); このシリーズの続編で、いわばSvelte人柱シリーズです。 どんなプロダクトなの 一言でいうと、ブラウザで動くiTunesみたいなSPA。 CDをリッピングしてMP3にしたものをVPSにおいてて、それをWebのUIから再生できるようにしてる。 使い続けてかれこれ3年くらい・・思えば最初はVueだった気もする・・。 TodoAppほど小さくはなくて、でも片手で数えられるくらいのルートしかなくて、非同期処理はあって、ちょいインタラクティブなUIになってる程度のサイズ。 なので正直いってそこまで大きくないので、どんなものを使ってもそれなりにきれいなコードは書けると思ってた。 なのでここは好奇心ドリブンで、最近イチオシになりつつあるSvelteを採用することにした。 ビフォーア
Introducing runes
Introducing runes Rethinking 'rethinking reactivity' The Svelte team Sep 20 2023 In 2019, Svelte 3 turned JavaScript into a reactive language. Svelte is a web UI framework that uses a compiler to turn declarative component code like this... <script> let count = 0; function increment() { count += 1; } </script> <button on:click={increment}> clicks: {count} </button>...into tightly optimized JavaScr
JavaScripr言語にリアクティビティを実現するフロントエンドフレームワークSvelte 3 - 作者のRich Harris氏に聞く
原文(投稿日：2019/05/06)へのリンク Svelteフロントエンドフレームワークは先頃、Svelte 3をリリースした。Svelte 3では、ユーザーインターフェイスの実装に関連して、エンティティをリンクするインバリアントを宣言的に表現する、新たな方法を導入している。これによって開発者は、パフォーマンスを意識して再レンダリングを実施したり、状態依存の部分を意識的に同期するような処理が不要になる可能性がある。新しいロゴとキャッチフレーズ、Webサイトも用意された。Sapper(Svelteを搭載したNext.jsスタイルのアプリケーションフレームワーク)とSvelte Native (モバイルアプリケーション開発をターゲットとする)は、Svelte 3にアップグレードされている。InfoQは今回、Svelteの開発者であるRich Harris氏にインタビューして、Svelte 3の
MapLibre, Svelte, Wikipediaデータを用いた地理空間情報可視化の事例 / MIERUNE Meetup mini #01
MIERUNE Meetup mini #01 - connpass A People Map of Japan | sorami.dev sorami/people-map-japan - GitHub
Announcing Svelte 4
Announcing Svelte 4 Updated performance, developer experience, and site The Svelte team Jun 22 2023 After months in the making, we're excited to announce the stable release of Svelte 4. Time flies - Svelte 3 was released more than four years ago! In JavaScript-framework-time, that's eons. Svelte’s freshness has persisted throughout, but Node.js and browser APIs have evolved during that time and to
2023年4月28日紙版発売 2023年4月28日電子版発売 Kyohei Hamaguchi (tnzk)，小関泰裕 著 B5変形判／320ページ 定価3,740円（本体3,400円＋税10%） ISBN 978-4-297-13495-2 Gihyo Direct Amazon 楽天ブックス ヨドバシ.com 電子版 Gihyo Digital Publishing Amazon Kindle ブックライブ 楽天kobo honto 本書のサポートページサンプルファイルのダウンロードや正誤表など この本の概要 「Svelte（スベルト）」は，ユーザーインターフェイスを構築するためのJavaScriptフレームワークのひとつです。Svelteには，ユーザインターフェイスで重要な役割を担う「状態管理」を特別な記法や関数を使うことなく記述できる，作成したコンポーネントをランタイムなしで実行可
Slinkity
To eleventy and beyond Follow along on Twitter for project updates ❤️ ⚠️ Slinkity is no longer maintained. The project owner (@bholmesdev) now works on Astro full-time. If you want to build component-driven content sites, give Astro a try! If you're committed to 11ty and want to use client components, consider 11ty's WebC project. Slinkity is the simplest way to handle styles and component framewo
フロントエンドの技術選定 によって Svelte と SvelteKit を使って管理画面を作ることに決めました。Unicorn Cloud ID Manager (以下UCIDM) の管理画面を SvelteKit を使って開発しています。 UCIDM のフロントエンドのアーキテクチャBFF (Backend For Frontend) サーバーに Node.js を配置し、サーバーサイドレンダリングを採用したフロントエンドを提供しています。マイクロサービスでは一般的なアーキテクチャだと思います。 エンドユーザー (ブラウザ) は BFF サーバーに対して認証を行い、BFF サーバーが UCIDM API サーバーと認証します。エンドユーザーは透過的に UCIDM API サーバーが返す情報を参照できますが、直接 UCIDM API とは通信できません。これはセキュリティを担保する上での
How Astro Works Astro works a lot like a static site generator. If you have ever used Eleventy, Hugo, or Jekyll (or even a server-side web framework like Rails, Laravel, or Django) then you should feel right at home with Astro. In Astro, you compose your website using UI components from your favorite JavaScript web framework (React, Svelte, Vue, etc). Astro renders your entire site to static HTML
欲しい物がなければ、自分で作るしかないシリーズ なぜ作ったか .svelte のテンプレートは .tsx と違って JS/TS としてのプログラミング言語としての構文の影響下になく、プログラムをあまり書かないマークアップエンジニアとの連携に便利で気に入っています(リスト表示に .map で目を回すぐらいの人を想定しています)。シンプルな構文で TypeScript の型もつきやすく、IDE支援もそこそこで、 モダンな vue テンプレートという感じです。 しかしながら、 GitHub のオープンソースのトレンドを見ればわかるように、フロントエンドのエコシステムは基本的に jsx/tsx を中心に回っています。そして現代の View 層のライブラリは(WebComponents がライブラリ間のブリッジとして失敗しているので)同じライブラリ同士でしか接続できず、この現状に不満を持っていました
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
UIを最小限のJSに変換するコンパイラ rollupのRich Harrisさんがメインで開発 Svelte = KonMari(React + Vue) 利点 バンドルサイズが小さい コード量も少ない ビルドが速い（体感） 欠点 開発環境の快適さはReactやVueに劣る シェアが少ないので採用するリスクが大きい 使いどころ ファイルサイズに制約がある環境 SPAじゃないWebサイトの一部 興味本位 / 趣味 まだ快適に開発できるとは言いがたい状態なので試行錯誤は必要ですが、短いコードでシンプルに書ける気持ちよさと、バンドルサイズを抑えられる利点は大きいです。特に、ファイルサイズに制約がある環境では有力な選択肢になると思います。 あとは、SPAじゃないWeサイトの一部にコンポーネントを埋め込みたい時などは、大きなランタイムが不要なSvelteの最大限に活かせる。ReactやVueが築き上
Virtual Branches You don’t need to switch branches if you can work on several simultaneously. Fix your bug while you work on your feature. More Branch Management Undo, squash and amend your work by just dragging and dropping. No need to wrestle with rebase -i. More
Migrating from Vue 2 to Svelte
Svelte offers a better typing experience with easier components' designing processes and built-in typed events, making it very user-friendly for us. Restricted global access. With Svelte, it is possible to import enums from other files and use them in the template, which is not the case for Vue 3. Escape Benchmark about frontend stackSyntax. Personally, I find Svelte syntax more elegant and user-f
西田@CX事業本部です 今回は1.0が発表された(SvelteKit 1.0 発表) SvelteKit を Cloudflare Workers で動かしてみたいと思います SvelteKit は Svelte と Vite を使用しており、最低限のコンフィグで開発が始められるWEBアプリケーションフレームワークです SPA, MPA, SSR, SSG 全てに対応しており、アダプタと呼ばれる機能でCloudflare、Vercel などの多くのサービスに簡単にデプロイすることができます Svelte について Svelte の特徴の一つには純粋なコンパイラであることが挙げられます。 React や Vue と違い、Vitural DOMを実行時に構築せずに、あらかじめvanila JS(ピュアなJS)とCSS にコンパイルしておき、これらをデプロイし実行します SvelteKit につ
Svelvet
Build interactive, node-based UIs and diagrams in Svelte Svelvet is a lightweight component library for building dynamic, customizable node graphs Beautiful and Customizable Svelvet allows you to easily create intuitive user interfaces and diagrams with pre-built components with node-to-node data flow, seamless zooming and panning, customizable edges and nodes and more! Learn More Get Started Easi
TypeScript support in Svelte - Learn web development | MDN
Complete beginners start here!Getting started with the webGetting started with the webInstalling basic softwareWhat will your website look like?Dealing with filesHTML basicsCSS basicsJavaScript basicsPublishing your websiteHow the web worksHTML — Structuring the webIntroduction to HTMLIntroduction to HTMLGetting started with HTMLWhat's in the head? Metadata in HTMLHTML text fundamentalsCreating hy
Svelte <3 TypeScript
Svelte <3 TypeScript Typernetically enhanced web apps Orta Therox Jul 17 2020 It's been by far the most requested feature for a while, and it's finally here: Svelte officially supports TypeScript. We think it'll give you a much nicer development experience — one that also scales beautifully to larger Svelte code bases — regardless of whether you use TypeScript or JavaScript. Image of TypeScript +
AutoAnimate - Add motion to your apps with a single line of code
Add motion to your apps with a single line of code. AutoAnimate is a zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Solid, Vue, Svelte, or any other JavaScript application.
fast Powered by Svelte and Vite, speed is baked into every crevice: fast setup, fast dev, fast builds, fast page loads, fast navigation. Did we mention it's fast? fun No more wasted days figuring out bundler configuration, routing, SSR, CSP, TypeScript, deployment settings and all the other boring stuff. Code with joy. flexible SPA? MPA? SSR? SSG? Check. SvelteKit gives you the tools to succeed wh
The UI toolkit for Svelte and Tailwind. Skeleton allows you to create adaptive and accessible interfaces for web apps of any shape or size.
Zero-effort type safety
Zero-effort type safety More convenience and correctness, less boilerplate Simon Holthausen Mar 9 2023 By sprinkling type annotations into your SvelteKit apps, you can get full type safety across the network — the data in your page has a type that's inferred from the return values of the load functions that generated that data, without you having to explicitly declare anything. It's one of those t
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Things you forgot (or never knew) because of React
【Svelteメンテナー 山下裕一朗】シンプルさこそがSvelteの真髄! その素晴らしさをメンテナーとして伝えていく
Svelte Summit 2020 気になったトークのまとめ - console.lealog();
Svelte v5 で導入された Runes によるリアクティビティシステム
SvelteでWeb Componentsを作成し、CDNから配布して使う
Webページ用UIフレームワーク「Svelte」とは？ プレーンで軽量なJavaScript生成を体験しよう！
Svelte Runtime 101 (JSConf JP 2022)
Vue 向けの Vite 製の UI コンポーネントカタログツール Histoire
React x MobXな趣味プロダクトをSvelteでリライトした - console.lealog();
実践 Svelte入門
SvelteKit はどのようにコンパイルしているのか？
Introducing Astro: Ship Less JavaScript | Astro
Svelte テンプレートから React コンポーネント を生成するコンパイラを書いた (PoC)
GitHub - nuejs/nue: The Content First Web Framework
SvelteでWebサイトを作ってみて感じた魅力 - Qiita
GitButler | Git Branching, Refined
SvelteKit を Cloudflare Workers で動かしてみた | DevelopersIO
SvelteKit • Web development, streamlined
Skeleton — UI Toolkit for Svelte + Tailwind