🐷 What's Poku?A cross-platform test runner that brings the JavaScript essence back to testing. ⚡️ Quick Tutorials
Poku
🐷 What's Poku?A cross-platform test runner that brings the JavaScript essence back to testing. ⚡️ Quick Tutorials
Auth.js | Authentication for the Web
// auth.ts import NextAuth from "next-auth" import GitHub from "next-auth/providers/github" export const { auth, handlers } = NextAuth({ providers: [GitHub] }) // middleware.ts export { auth as middleware } from "@/auth" // app/api/auth/[...nextauth]/route.ts import { handlers } from "@/auth" export const { GET, POST } = handlers // src/auth.ts import { SvelteKitAuth } from "@auth/sveltekit" impor
Lucia documentation
Lucia documentation Lucia is an auth library for your server that abstracts away the complexity of handling sessions. It works alongside your database to provide an API that's easy to use, understand, and extend. Get started → No more endless configuration and callbacks Fully typed Works in any runtime - Node.js, Bun, Deno, Cloudflare Workers Extensive database support out of the box import { Luci
TypeScript-first schema validation with static type inference
TypeScript-first schema validation with static type inference
shadcn/uiを使って簡単なWebページを作ってみた
はじめに こんにちは、D2Cのフロントエンドエンジニアをやっている廣瀬です。 私が担当しているプロジェクトでは、Vite・React・MUIを主に使用しています。 最近、フロントエンド系の技術を調査してみたところ、shadcn/uiというものを見つけました。 今回、このshadcn/uiをViteで試してみましたので、その内容を記事にしたいと思います。 今回の記事では簡単なWebページを作ってみたいと思います。 shadcn/uiとは？ Radix UIとTailwind CSSをベースに開発された、比較的低レイヤーなUIコンポーネントの集まりです。 ここで注意なのが、shadcn/uiはMUIやChakraUIのようなUIライブラリではなく、npmパッケージとしては提供されていません。ですので、依存関係としてインストールすることはできません。 環境の準備 実際に、以下のような手順でsha
Free and Open source PDF generation library! | pdfme
"content": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZ4AAAKFCAMAAADLW3/4AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAADDUExURfLx8N7b2eLg3+7k2ero5+bl4/Do3e3r6vDw7+/u7PHr4ezh1c3LysjGxune0cLBw/b08vPu5tnW1dPQz769v+bZy9jNwtDEuuHa0ratp+LTxLe3uvby6sO4sObg2Orl3t3Uy6utsbazss68rayinXxiVaKYk5WMiLWZg5d5ZYhvYN/MuqWBacaxobKOc4qAemxXTbyml/bm06WJd9rDrsSli6OkqIFQRdS0mGlKOldCOJhSRY9oVfTdxEYvJCkYD8iadvAoFyAAACAASU
Deno
Deno is the open-source JavaScript runtime for the modern web. Built on web standards with zero-config TypeScript, unmatched security, and a complete built-in toolchain.
Hono - Ultrafast web framework for the Edges
HonoWeb application framework Fast, lightweight, built on Web Standards. Support for any JavaScript runtime.
Alpine.js
<script src="//unpkg.com/alpinejs" defer></script> <div x-data="{ open: false }"> <button @click="open = true">Expand</button> <span x-show="open"> Content... </span> </div> { let keys = Object.keys(steps) direction = keys.indexOf(value) > keys.indexOf(old) ? 'right' : 'left' })" > Alpine is a rugged, minimal tool for composing behavior directly in your markup. Think of it like jQuery for the mode
Refine | Open-source Retool for Enterprise
The sweet spot between low-code and full-code.Drag-and-drop tools shine initially but collapse under the weight of complexity. Refine offers comparable speed at the start and infinite scaling in the long run. Business applications not only share fundamental UI elements, but also the underlying logic.Stop writing repetitive code for CRUD, security and state management. Let Refine automatically tran
Flowbite Svelte - UI Component Library
Svelte UI components Flowbite Svelte is a free and open-source UI component library built using Svelte based on Flowbite and Tailwind CSS. By installing the package via NPM you will be able to build modern looking web applications fast by leveraging Svelte, Tailwind CSS and Flowbite using ready-made UI components like dropdowns, navbars, modals, and more. Huge collection of UI components Open-sour
SvelteKitでSSR/SSGのプロトを爆速構築したい - Qiita
はじめに フロントエンドに触れる機会が多いのですが、SSR/SSGに詳しくなりたい（ならねばならない）という焦燥に駆られたので、勉強も兼ねて触りたいと思います。手を動かすのであれば、何かものづくりしたいなと思ったので、話題の SvelteKit で SSR/SSG のプロト構築をしてみようと思います。 最終的には、↓のプロトタイプを完成させます。素早く。 SSR / SSG とは SSR は Server Side Rendering、SSG は Static Site Generator の略です。文字通りどちらもサーバ側でレンダリングや静的サイトを作成するもので、CSR(Client Side Rendering) と対比して考えられます。世間を賑わせている React, Vue, Angular によって普及した SPA(Single Page Application) は、CSR
SvelteKit • 研ぎ澄まされた Web 開発
高速 Svelteと Vite を使用しており、 あらゆる部分にその速さが組み込まれています: 高速なセットアップ、高速な開発、高速なビルド、高速なページロード、高速なナビゲーション。 楽しい もうこれ以上、バンドラーのコンフィグやルーティング、SSR、CSP、TypeScript、デプロイの設定、その他全ての退屈な作業に時間を費やすことはありません。 コーディングに喜びを。 柔軟 SPA? MPA? SSR? SSG? 全て対応しています。SvelteKit は、構築しようとしているものが何であれ、それを実現するためのツールを提供します。 そして、JavaScript が動作するところならどこでも動作します。
Svelte と Express.js で最低限の SSR を実装する
この記事は Svelte Advent Calendar 2020 14日目の記事です。 Svelte いいですよね。このサイトも Svelte で構築しています。 軽いし、実装は楽だし、とても気に入ってます。 Svelte の特徴は、ググったらたくさん出てくると思いますが、なんと言ってもコンパイラである事だと思います。コンパイルすると、ライブラリコードがほぼ無い状態の JavaScript と CSS が作られますので、あとはそれを HTML で読み込めば完成です。このサイトを構築している JS も約80kb程度しかありません。 しかし Svelte で SSR をするには Sapper or SvelteKit などの追加モジュールのインストールが推奨になっています。 が、なんとなく Svelte だけでさくっと最低限でも SSR をやりたかったので、実装してみました。 その方法のお伝
SvelteKit • Web development, streamlined
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
Svelte • The magical disappearing UI framework
compiled Svelte shifts as much work as possible out of the browser and into your build step. No more manual optimisations — just faster, more efficient apps. compact Write breathtakingly concise components using languages you already know — HTML, CSS and JavaScript. Oh, and your application bundles will be tiny as well. complete Built-in scoped styling, state management, motion primitives, form bi
Svelte をはじめる - ウェブ開発を学ぶ | MDN
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
Admin.jsを使って面倒な管理画面をサクッと作ろう | DevelopersIO
こんにちは、CX事業本部Delivery部サーバーサイドチームのmorimorkochanです。 突然ですが「あぁ〜管理画面作るのめんどくせ〜」って思うことはないですか？ 例えばRDBと接続されたRESTfulなAPIサーバーを作っていて、一部の管理者向けに管理画面を作りたいが管理画面にこだわりがない場合などなど。 そんな時に便利なのが、Admin.jsです。Admin.jsは管理画面を簡単に作成できるフレームワークです。オープンソースとして公開されており、クラウドにデプロイされているサービスを利用する場合は月額料金がかかりますが手動でサーバーに組み込んでデプロイする場合は無料です。 Admin.jsを使うと、RDBで管理される各テーブルごとにCRUD画面を簡単に作成することができます。これによってRDBと同じプロパティを何度も定義したり同じようなCRUDコードを何度も記述する必要はありま
JavaScript: 所望のイベントリスナの発火を妨げているイベントリスナを特定する | Wantedly Engineer Blog
Webアプリケーションでは、DOMの要素にイベントリスナ(イベントハンドラ)を取り付けることで、ユーザーによる様々な操作 (クリックなど) に応じて処理を行うことができます。 しかし、イベントリスナを登録しても、他のイベントリスナとの干渉によって意図した通りに発火しないことがあります。ここではその調査方法を紹介します。 前提知識: イベントバブリングイベントについては筆者の過去記事でも解説しましたが、あらためてここでも説明します。イベントバブリングを理解することが、イベントデバッグの近道だからです。 DOMにおいて、要素はネストすることによって木構造を形成します。ある要素(ターゲット要素)がクリックされるなどしてイベントが発生したとき、イベントはその要素自体だけではなく、その祖先要素にも送られます。これをイベントバブリングといいます。 イベントバブリングは2つの段階に分けられます。 Cap
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Svelte Material UI
