Lenis – Get smooth or die trying
We’ve heard all the reasons to not use smooth scroll. It feels hacky. It’s inaccessible. It’s not performant. It’s over-engineered. And historically, those were all true. But we like to imagine things as they could be, then build them. So, why should you use smooth scroll? Create more immersive interfacesUnlock the creative potential and impact of your web experiences. Smoothing the scroll pulls u
Next.js+yjs+BlockNoteでGoogle Docs+Notionのような共同編集エディタを作ろう
サークルで制作してるアプリに、共同編集できるエディタを実装したいという話が上がり調査したところ Notionライクなテキストエディタ「BlockNote」 yjsという良さげなデータ構造のライブラリ を組み合わせたらいい感じに動作したので記事にしました。 yjsとは Yjs is a modular framework for syncing things in real-time - like editors! yjsはCRDT(a conflict-free replicated data type)を実装した競合しないデータ構造を扱えるフレームワークです。 分散コンピューティングに特化したデータ構造で、リアルタイムな共同編集などに用いることができ、マージの競合なしにデータを伝えることができます。 BlockNoteとは おしゃれなテキストエディターです。 Notionのようにカスタム
Scriptular - Javascript Regular Expression Editor
Scriptular is a javascript regular expression editor. Inspired by Rubular it gives you a simple way to test javascript regular expressions as you write them. Start by entering a regular expression and then a test string. Or give this example a try. Learn more about regular expressions in javascript.
React Native for Windows + macOS · Build native Windows & macOS apps with Javascript and React
Extend your desktop experience to more than just Windows! Try out our fully supported macOS extension to React Native. React Native for Windows + macOS brings React Native support for the Windows SDK as well as the macOS 10.14 SDK. With this, you can use JavaScript to build native Windows apps for all devices supported by Windows 10 and higher including PCs, tablets, 2-in-1s, Xbox, Mixed reality d
Clusterize.js
<!--HTML--> <div class="clusterize"> <table> <thead> <tr> <th>Headers</th> </tr> </thead> </table> <div id="scrollArea" class="clusterize-scroll"> <table> <tbody id="contentArea" class="clusterize-content"> <tr class="clusterize-no-data"> <td>Loading data…</td> </tr> </tbody> </table> </div> </div> <!--HTML--> <div class="clusterize"> <table> <thead> <tr> <th>Headers</th> </tr> </thead> </table> <
jspreadsheets
jspreadsheets compiles the best spreadsheets and data grids written in JavaScript. It helps you choose the most suitable component for your project.
Handsontable is a JavaScript data grid that looks and feels like a spreadsheet - Available for React, Angular, and Vue
JavaScript data grid with spreadsheet UI A front-end component that combines data grid features with spreadsheet UX/UI. Professional support included. Works with React, Angular, Vue, and plain JavaScriptGet Started What's new in v14.4.0 of June 11, 2024 → All spreadsheet featuresWhen you work with Handsontable, it's like you're working with Excel or Google Sheets. There's no steep learning curve –
Javascript Input Mask
Features get and set value and unmasked value easily no external dependencies supports overwrite mode supports all major browsers supports web components supports contenteditable RegExp mask Function mask Number mask (integer and decimal support) Date mask (with various format support and autofix mode) Dynamic/on-the-fly mask Pattern mask show placeholder always or when needed unmasked value can c
ふりがな自動入力の検証
始めに UXの向上のため名前を入力した際にふりがなを自動で入力したいことがあると思います。調べた感じ以下の2つのライブラリが有名っぽい気がしたのでそれぞれについて検証してみました。 https://www.npmjs.com/package/vanilla-autokana https://www.npmjs.com/package/historykana サンプルはcodesandboxで書きましたので、動作を確認したい方は触ってみてください。 各ライブラリの使い方 vanilla-autokana こちらはjqueryのプラグインにあるautokanaをインスパイアして作られたもののようです。DOM要素を指定するだけで後は自動で変換されるので楽ですね。 import * as AutoKana from 'vanilla-autokana'; AutoKana.bind('#name'
Javascriptで帳票印刷したい - Qiita
Vue.jsを利用したWebシステムで帳票印刷する必要がありました。 方法がいくつかあり、検討した知見を紹介します。 背景 フロントはVue.jsを利用したSPA 指定条件を入力しビジネスの統計情報を画面表示する 集計、グラフを伴う 統計画面上の「印刷」ボタンを押下すると帳票印刷 or PDFダウンロードする ビジネスレポートは複数ページに渡る 数値の集計表、グラフなどを伴う ヘッダ/フッタなどの体裁はこだわらない また、画面ページ上の統計情報と印刷ページ上の統計情報は同じ情報であり、 開発コスト低減のために可能であれば、集計表、グラフなどの画面表示用コンポーネントを流用して帳票をレイアウトしたい状況です。 方式検討 実現方式は以下のように複数考えられますが、 最終的には「ブラウザの印刷機能でPDF保存」させる方法を採用しました。 サーバサイドでPDFファイルを生成 テンプレートPDFを元
Mousetrap - Keyboard shortcuts in Javascript
A simple library for handling keyboard shortcuts in Javascript. Try pressing some of the keys here: // single keys Mousetrap.bind('4', function() { highlight(2); }); Mousetrap.bind('x', function() { highlight(3); }, 'keyup'); // combinations Mousetrap.bind('command+shift+k', function(e) { highlight([6, 7, 8, 9]); return false; }); Mousetrap.bind(['command+k', 'ctrl+k'], function(e) { highlight([11
e116d1bf937cf18369e0
PHPの場合、TCPDFで既存のPDFファイルに出力時の日時を入れるっていう方法もあるけど、日付入れるためだけにTCPDFの環境をつくるってのも面倒。 PDFそのものに自動で入力する方法がないものかと検索するもののなかなか見つからない。けっこう需要あると思うんだけどな… そしたら、ADOBE公式のAcrobat JavaScript Scripting Guideにちゃんと載ってるんですね。こういうのを探してたんですよ。引用 自動日付フィールドの作成 フォームでは、追跡調査を行えるように、日付を使用することがよくあります。ここでは、文書 を開いたときに現在の日付が自動的に表示されるテキストフィールドの作成手順を説明します。 文書が開いたときに現在の日付を表示するスクリプトは、文書レベルのスクリプトとして作成し ます。 自動日付フィールドを作成するには： テキストフィールドツールを選択して、
Expo
Expo and EAS are an ecosystem of tools that help you develop review& deployCreate universal native apps with React that run on Android, iOS, and the web. Iterate with confidence. We are the home for developers building native apps across Android and iOS with JavaScript (neat, right?). We’re open source. Offer a free plan. And are pretty-much the go-to if you’re building a mobile app. We’re a full
Delighters
Delighters.JS Add CSS animations to delight users as they scroll down. A tiny javascript library by Q42 https://github.com/Q42/delighters Features Declarative Flexible Light footprint Framework-agnostic Supports desktop, mobile & tablets Degrades gracefully to your default styling Usage 1. Include the script <script type="text/javascript" src="delighters.js"> 2. Add delighter attributes <div class
Wijmo 5 - Wijmo［ウィジモ］ | グレープシティ株式会社
帳票・レポート 日本仕様の帳票開発に必要な機能を搭載したコンポーネント ActiveReports for .NET 表計算・グリッド Excel風のビューと表計算機能を実現するUIコンポーネント SPREAD for Windows Forms SPREAD for ASP.NET SPREAD for WPF SpreadJS 入力支援 快適な入力を実現する日本仕様入力コンポーネントセット InputManPlus for Windows Forms InputManPlus for ASP.NET InputManPlus for WPF InputManJS 多段明細 1レコード複数行&日付表示に 最適なグリッドコンポーネント MultiRowPlus for Windows Forms 戻る コンポーネントセット Visual Studioで利用する .NET Framework
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - ssthouse/tree-chart: Flexible tree chart using Canvas and Svg, powered by D3.js; ✅Support Vue, Vue3 and React;
Text Mask: Conform user input to a string mask
Cleave.js - Format input text content when you are typing
Buefy: lightweight UI components for Vue.js based on Bulma
Custom Keyboard Shortcuts: User Script | Canvas LMS Community