Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

この記事はドワンゴ Advent Calendar 2020 最終日の記事です。年の瀬ですね。 はじめに 本記事は、WHATWG Living Standardに準拠することを目的としたHTMLパーサである「gammo」の紹介を目的としている。gammoが実現していることを詳細に伝えるため、単なるgemの紹介に留まらず、HTMLの歴史や昨今のHTMLを取り巻く状況を簡単に解説し、WHATWG Living StandardにおけるHTML文書の解析アルゴリズムについて、実例と共に紹介する。 本記事で紹介するgammoの開発に取り掛かった理由は、主に以下の二点が挙げられる。 WHATWG Living Standardに準拠したHTMLパーサをRubyGemsの中から見つけられなかったため。 現在HTMLパーサの機能を持つライブラリの中で、最も利用されていると考えられるNokogiriと比較
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 背景 ブラウザ上で動くリッチテキストエディタを作りたい。 時にはtext以外の要素も使いたいので、独自のDOM操作をしたい。そうなると、入力領域はtextareaではなく、contentEditableを設定したdiv等にしたい。このとき、殆どのブラウザではexecCommandでundoとredoができる。しかし、一度でもJavascriptからDOM操作すると、execCommandによるundo/redoは上手く動かなくなる。結局は独自のUndo/Redo機構を作りたくなる。 この際の鬼門がIME入力の検知。ブラウザごとの数々のバ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ###追記・修正 2020/1/28: ご指摘を受け、Firefoxの綴りを正式なものに修正しました(恥ずかしながら知りませんでした)。 また、旧Edgeという表記をしていますが、現時点ではEdge Legacyというのが正しい表現かもしれません。もっと正確にはEdgeHTMLエンジンのEdgeを指します。新Edge(Chromium)は体感的にChromeと同様の動きをします。 モチベーション Markdownエディタを作っていたが、Macの動作がWindowsやLinuxとは微妙に異なり、仕様変更が余儀なくされた。 一方で、Fire
チャンネルが増えすぎて目が辛いので、いい感じにまとめてくれる拡張を作りました! これが こうなります インストールはこちら Chrome: Slack Channels Grouping - Chrome ウェブストア Firefox: Slack Channels Grouping – 🦊 Firefox (ja) 向け拡張機能を入手 Opera: Slack Channels Grouping extension - Opera add-ons Edge: Slack Channels Grouping – Microsoft Edge Addons 特徴 ハイフンやアンダースコアで区切られたものをまとめます。 chat-犬 chat_猫 DOMの更新を監視しているので、チャンネル作成や名前変更などにも対応しています。 タブが非アクティブな場合はDOMの監視は止めています。 経緯 チ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? えっ このネタ続くの。。? 前回( Unity WebGLで使われているシェーダを抜き出してARBアセンブリを眺める )はWebGLビルドのUnityゲームをトレースして、使われているシェーダ命令があんまり多くないことを確認した。 ブラウザ上の動作では同期APIの実装に制約がありちょっと手を入れづらいため、Node.jsで動かしたかった。別案としてNW.jsを使うというのもあったが、今回の手法でもWebブラウザ側のDOMを使わないといけないところは一応クリアしている。 結果と手法 結局成功したんだか失敗したんだかよくわからないところまで
おことわり この発表はかなりお気持ちです 他の発表とは異なり(?)なんら学術的裏付けがあるものではありません なんと(?)まったく数式が出てきません 自己紹介 亀岡 亮太 株式会社HERP リードエンジニア Twitter: @ryotakameoka GitHub: @ryota-ka Web フロントエンドアプリケーションの話をします はじめに はじめに この発表の内容 Web フロントエンドフレームワークはどのような性質を満たすべきか? 異なる副作用を分離したい 非同期がほしい Cycle.js というフレームワークの紹介 effect を足していく effect を handle する この発表のゴール Cycle.js の存在を覚えて帰ってもらう 「Cycle.js おもしろそう,書いてみようかな」と思ってもらう Web フロントのフレームワークはどのような性質を満たしていてほし
この記事は、フロントエンドでTDDを実践する(理論編)の続編として書きました。 本記事では、react-testing-libraryでReactでTDDする方法をサンプルを使って解説します。 react-testing-library react-testing-libraryは、PayPalのエンジニアでありフロントエンドのTDDの第一人者であるKent C Doddsが、enzymeのリプレイスを意図して作ったReactのための新しいテストユーティリティです。 設計思想は、The more your tests resemble the way your software is used, the more confidence they can give you. enzymeのように実装そのもののテストをするよりも、ユーザーが使うようにテストされるべきというフィロソフィーがAPI
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Reactのアニメーションを攻略する 仕事でReactのアニメーションをするにあたり、 やりたいことを満たすために旅立った冒険記。 やりたいこと 要件 要素の追加・削除時にアニメーション リストではない複数要素を別々に動かす きもち カジュアルに使いたい 要件満たすために余計な記述はしたくない。可能な限りシンプルに保ちたい。 DOMに依存したくない Universalにしたいので、style弄りはVirtualDOM経由が原則。 ロジックで制御したい 複雑化への対応や保守性を考えると、絶対JSで全てコントロールできた方がよい。 汎用性の
注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く