無料で利用可能な静的Webサイト構築の為のボイラープレート・「Static Starter」
Static Starter Static Starterは無料で利用可能な静的Webサイト構築の為のボイラープレートです。開発者が培った過去のキャリアが元になったベストプラクティスが詰まっているのだそう。 初級者から中級者まで...
Resource - フロントエンドエンジニア向け
様々なプログラミング言語の便利なコードスニペットを検索できる・「snipt.dev」
snipt.dev snipt.devは様々なプログラミング言語の便利なコードスニペットを検索できるスニペットコード検索エンジンです。コードは主にCodigaから収集されているようです。 JavaやPython、TS、Objec...
対話形式のフォームをブラウザで作成できるオープンソースのWebアプリ・「Typebot」
Typebot Typebotは対話形式のフォームをブラウザで作成できるオープンソースのWebアプリです。日本でもカスタマーサービスでも頻繁に見かけるようになりましたね。 ユーザーに質問し、選択してもらう事で解決案に導く、という...
直感的な操作で使えるTypeScriptベースのオープンソースなPDF生成ライブラリ・「pdfme」
pdfme pdfmeは直感的な操作で使えるTypeScriptベースのオープンソースなPDF生成ライブラリです。ユーザーの使用にあたり、特別なスキルや訓練等も不要でオンラインでPDFを生成する事が出来ます。 テンプレート式にな...
正規表現を視覚化、編集、テストするためのオープンソースのWebアプリ・「Regex-Vis」
Regex-Vis Regex-Visは正規表現を視覚化、編集、テストするためのオープンソースのWebアプリです。テストや学習用に作られたそうです。 コードを入力すれば自動で構造がビジュアル化され、右ペインで編集出来るようになり...
ブラウザで動作するシンプルで使いやすいオープンソースのビジュアルWebサイトビルダー・「Webstudio」
Webstudio Webstudioはブラウザで動作するシンプルで使いやすいオープンソースのビジュアルWebサイトビルダーです。いわゆるノーコードツールとなっており、作成したのちにそのまま公開する事も可能です。 上SSは操...
ビデオチャットによるリモート授業の為のOSSなオンラインティーチングプラットフォーム・「edrys」
edrys edrysはビデオチャットによるリモート授業の為のOSSなオンラインティーチングプラットフォームです。DenoとVueをベースに設計されています。 コロナ禍でオンライン授業を経験した学生の方も少なくないと思いますが、...
CSSライクに書けるオープンソースのデータバインディングJavaScriptライブラリ・「Corset」
Corset See the Pen Counter example by kachibito (@kachibito) on CodePen. CorsetはCSSライクに書けるオープンソースのデータバインデ...
Rustで書かれたクロスプラットフォーム対応のオープンソース軽量テキストエディタ・「Lapce」
Lapce LapceはRustで書かれたクロスプラットフォーム対応のオープンソース軽量テキストエディタです。Windows、Linux、MacOSで動作します。 とにかく高速である事に拘って設計されており、エディタ起動時の待ち...
リアルタイムで2Dまたは3DCGのシェーダーを作成するためのオープンソースJavaScriptフレームワーク・「Shader Park」
Shader Park Shader Parkはリアルタイムで2Dまたは3DCGのシェーダーを作成するためのオープンソースJavaScriptフレームワークです。 数行のコードで複雑なシェーダを作成できる、というもの。javas...
サポートが終了したパッケージや危険なパッケージが除外されたJavaScriptライブラリ検索ツール・「Code awesome」
Code awesome Code awesomeはサポートが終了したパッケージや危険なパッケージが除外されたJavaScriptライブラリ検索ツールです。 更にVanilla、React、Vueに分けられており、それぞれ更に細...
API開発に貢献するオープンソースのPostman代替・「Hoppscotch」
Hoppscotch HoppscotchはAPI開発に貢献するオープンソースのAPIリクエストビルダーです。Vue/TSで書かれておりMITライセンスの元、OSSとしてソースコードが公開されています。 Postman代替として...
PythonやPHP、JavaScriptなど言語別にそれぞれよく使われる正規表現のコードを確認出来る・「RegEx Library」
RegEx Library RegEx LibraryはPythonやPHP、JavaScriptなど言語別にそれぞれよく使われる正規表現のコードを確認出来る正規表現コードサンプルのライブラリです。 例えばメールアドレスや電話番...
モダンなWebサイト構築の為のTailwind.css向けUIコンポーネントライブラリ・「TailGrids」
TailGrids TailGridsはモダンなWebサイト構築の為のTailwind.css向けUIコンポーネントライブラリです。よく使われるUIの他にカードや認証、フォームやモーダル、テーブル、価格表などなどWebアプリや企業サイ...
好みのフレームワークやツールを選んで導入できるwebpackやParcelのboilerplateジェネレーター・「Create App」
Create App Create Appは好みのフレームワークやツールを選んで導入できるwebpackやParcelのboilerplateジェネレーターです。Webアプリの他、CLIでも使えます。 webpack、parce...
シンプルさとカスタマイズ性の高さでUI設計をサポートするフロントエンドライブラリ・「Xtend UI」
Xtend UI Xtend UIはシンプルさとカスタマイズ性の高さでUI設計をサポートするフロントエンドライブラリです。A11y規格に準拠しておりアクセシビリティにも配慮されています。 Tailwind.css、vanilla...
TailwindとAntDesignにインスパイアされたオープンソースのUIコンポーネントライブラリ・「Supabase UI」
Supabase UI Supabase UIはTailwindとAntDesignにインスパイアされたオープンソースのUIコンポーネントライブラリです。 名前から想定できる通りFirebaseのオープンソース代替であるSupa...
軽量、シンプルで使いやすく様々なユーティリティも備えられたCSSフレームワーク・「Beercss」
Beercss See the Pen Untitled by kachibito (@kachibito) on CodePen. Beercssは軽量、シンプルで使いやすく様々なユーティリティも備えられたC...
three.jsを使った3Dなアニメーション背景を簡単に作成、設置できるライブラリ・「Vanta.js」
Vanta.js Vanta.jsはthree.jsを使った3DなWebGLアニメーションの背景を簡単に作成、設置できるライブラリです。 同ライブラリのプロジェクトサイト内で簡単な編集を、プレビューを確認しながらツールバーの調整...
SvelteでWebアプリ開発する方の為のオープンソースIDE・「sVelocity」
sVelocity sVelocityはSvelteでWebアプリ開発する方の為のオープンソースのIDE（統合開発環境）です。electronベースみたいですね。クロスプラットフォーム対応となっています。 Svelteアプリのビ...
高速かつシンプルで使いやすいJavaScriptアニメーションライブラリ・「luge」
luge lugeは高速かつシンプルで使いやすいJavaScriptアニメーションライブラリです。プラグインを追加して拡張する事も可能です。 読み込むだけでhtmlタグに自動でデバイスやブラウザのclassも付与されるので異なる...
JavaScriptを使ったWebアプリの設計を改善するためのパターンやヒント、コツをまとめた・「Patterns.dev」
Patterns.dev Patterns.devはVanillaなJavaScriptやReactなどを使ったWebアプリの設計を改善するためのパターンやヒント、コツをまとめたWebサイトです。 チェックリストでは無く、パター...