dialog要素を使用したアクセシブルなモーダルウィンドウの実装メモです。このブログのハンバーガーメニューで使われている実装と同じものになります。 dialog要素は現在全てのモダンブラウザでサポートされているため、iOS Safariをどこまで対応するかに依りますが実務で使用しても差し支えないでしょう。

Reactなどを始めとする特定のJavaScriptフレームワークやライブラリには依存していないため、基本的にどんなフレームワークとも組み合わせて利用することが可能。 Lexicalは信頼性、アクセシビリティ、実行速度にフォーカスして開発されていると説明されており、W3Cのアクセシビリティ標準となる「Web Content Accessibility Guidelines」（WCAG）にも準拠しており、Webブラウザの読み上げ機能などを始めとするアクセシビリティ機能に対応。 圧縮後のサイズは22kbと比較的小さく、性能に関しては同社が以前から公開していたエディタ用UIコンポーネントのDraft.jsと比較してタイピング性能が20％から70％向上したと説明されています。これは特に性能の低いデバイスで利用するときに有利に働くとのこと。 拡張が容易になるようにAPIが容易されており、すでにRea

Ryan Dahl は Node.js の original author ですが、彼の作ったプロダクト deno に関するトークが jsconf.eu 2018 でありました。 Node.js にずっと関わってきた僕が見て非常に興奮するような話だったので、しばらくぶりにブログに書き起こすことにしました。 背景 Ryan Dahl は2009年に Node.js の話を初めて公の場に公開しました。その時の「公の場」というのが「jsconf.eu 2009」です。 www.youtube.com Video: Node.js by Ryan Dahl - JSConf.eu - 2009 この発表から Node.js が広まり、今やサーバのみならず、IoTデバイス、デスクトップアプリなど、様々なところで動作しています。 で、今回はその発表から9年の歳月が経過し、Node.jsに対しての設計不

なぜエラーを収集するのか バグ探し バグを見つけて潰していくため ユーザからのバグ報告の補助 ユーザに報告の負担をかけないため エラーを取得する 取得タイミング window.onerror Promise のエラー フレームワーク毎の特定のタイミング window.onerror window.onerror にメソッドを登録しておくことでエラー発生時にそのメソッドが呼ばれる。try-catch でハンドリングしていないエラーが流れてくる。

どうも、まさとらん（@0310lan）です！ 今回は、自分好みのマップをブラウザ上でカスタマイズしたり、JavaScriptから自在に制御可能な地図サービスのご紹介です！ データを取り込んでマッピングしたり、プラグインによる拡張も可能で自分のWebアプリやサービスなどにも簡単に組み込めるスグレモノです！ 【 Mapbox Studio 】 ■「Mapbox Studio」の使い方 それでは、まず最初に「Mapbox Studio」の基本的な使い方から見ていきましょう！ 初めての人は無料のユーザー登録が必要なので、サイトのトップページにあるボタンをクリックします。 好きなユーザー名・メルアド・パスワードだけで、簡単に登録ができます！ 登録後は、Webページにマップを表示させる簡単なチュートリアルが始まるので、試しにやってみましょう！ 表示された画面にある「JS」の項目をクリック！ 左側の「C

昨今、よく「jQueryはもう必要ない」という声を聞きます。 しかし、一時期JavaScriptのデファクトスタンダードのライブラリといわれたjQueryに対しての扱いの変化を疑問に思う方もいるでしょう。 そこで、この記事ではそもそもjQueryとは何のために作られたどんなライブラリか、そしてそれがなぜレガシーと呼ばれるようになったのかを学んでいきたいと思います。 間違った事を書いているなどのご指摘は大歓迎です。 なぜ jQuery ができたのか 昔のWeb開発 jQuery ができたのは2006年。 そのころはJavaScriptはWebページに文章を読むのを妨げる動きをつける言語で、HTML5やCSS3、ES2015なんてものはもちろんなく、今ではコード数行でできることが時にはトリッキーな方法も混ぜながら何十行も書く必要がありました。その上、ECMAによって標準化されているとはいえ、ブ

jQueryScript.NetはjQueryのプラグインをコレクションしているWebサイトです。プラグインだけでなく、その使用方法やライセンス、ファイルサイズ等を簡単に紹介しています。今更感が否めない情報ではありますが、結構な量が収集されているので覚えておいて損は無さそうです。 jQueryScript.Net

対象読者 Javaのフレームワークというと、いまだにStrutsに代表されるServletベースのMVCフレームワークを経験されている方がほとんどだと思います。 Node.jsも経験されている方であれば比較的理解しやすいかもしれませんが、ここでは「伝統的な同期型のマルチスレッドプログラミングになれているJavaプログラマー」を対象とし、Vert.xのアーキテクチャを理解して実際にアプリケーションを作成する手助けになることを目指していきます。 なお、この記事は執筆時点で最新の安定版である2.1.5を前提に記述していきます。 Vert.xのインストール Vert.xは、2012年5月に1.0、2013年に2.0がリリースされ、現在3.0が開発中のまだまだ若く枯れていないオープンソースです。 公式サイトのインストール解説を見てもらえば早いとは思いますが、簡単にインストール手順を説明しておきます。

すでに当サイトにも導入してみたのですが、お気づきでしょうか。 PC版で当サイトをご覧いただくと、画面右上にパーセンテージが表示されます。 プログレスバーです。 ページの読み込みが完了して、100%になると消えていきます。 このプログレスバーはPACE.jsをいうプラグインを利用しています。 これがとってもお手軽だったのでご紹介します。 もしよろしければどうぞ。 PACE.jsは、プラグインを読み込んで、CSSだけで12種類のプログレスバーを表示できる、超お手軽なプログレスバーです。 PACE — Automatic page load progress bars PACE.jsの使い方：jQueryを読み込む jQueryを読み込んでいない方はjQueryをまずは読み込んでください。