普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
AMP/PWA をどこで/いつ使うか - Qiita
某所で使った資料の公開版 用語整理 PWA: ネイティブアプリのようなUXを提供するための機能群 SPA: JSで遷移するシングルページアプリケーション AMP: 後述 PWAMP: AMPで流入させてPWAを起動する形式 MFI: モバイルファーストインデックス いまさら聞けないPWAとAMP アメブロ2017: Isomorphic Web Appの進化編 AMP とは イニシャルビューのためのHTMLの特殊なサブセット GoogleにホワイトリストされたHTML属性しか使えない GoogleにホワイトリストされたJSプラグインしか使えない CSSはHEADに全部書く AMP仕様を満たすと、Googleがキャッシュして、モバイルの検索流入ではそのキャッシュを使う HTTPS必須 必ずしも全ページをAMPに対応する必要はない PWA: ServiceWorker の機能 リソースの先読み
サイトのパフォーマンス改善で重要なクリティカル レンダリング パスについて | コリス
ブラウザがページを表示する際にサーバーからHTMLのレスポンスを受け取ると、スクリーンにピクセルが描画されるまでに多くのステップが必要になります。ブラウザがページの最初のペイントを実行するために必要とするこのシーケンスは「クリティカル レンダリング パス(Critical Rendering Path)」と呼ばれます。 クリティカル レンダリング パスを理解することで、サイトのパフォーマンスを改善するのに役立ちます。 Understanding the Critical Rendering Path 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 クリティカル レンダリング パス(Critical Rendering Path)には、6つの段階があります。 クリティカル レンダリング パスの6つの段階 01. DOMツリーの構築
GitHub - theZiz/aha: Ansi HTML Adapter
aha --help | aha --black --title "the awesome aha help"> aha-help.htm Creates an HTML file of the help of aha with black background colordiff oldfile.c newfile.c | aha > colordiff.htm Creates an HTML file with a colorful diff-output of two files "oldfile.c" and "newfile.c" with white background ls --color=always | aha --pink > ls.htm Creates an HTML file with a colorful ls-output with pink backgro
Google Material Design Input Boxes in CSS3 | DigitalOcean
Introduction Google Material Design is all the rage right now. With Google announcing the new design philosophy and using Polymer to create rich animated applications, many developers are starting to incorporate these ideas into their own experiments. We created our own Google Material Design Checkboxes using CSS3 last week and here are some more examples of Google Material Design: Radio Buttons T
Photon
The fastest way to build beautiful Electron apps using simple HTML and CSS Powered by Electron Underneath it all is Electron. Originally built for GitHub's Atom text editor, Electron is the easiest way to build cross-platform desktop applications. If you can write a bit of HTML, CSS, and JS, you can build full featured applications. Companies like Microsoft, Facebook, and Slack are using it – why
ビデオと同期再生するHTMLアニメーション | fenomas.com
この間、パララックス・ビューというsupercrazy Japanese music videoを楽しみながら、組み込みビデオと同期再生するHTMLアニメーションを、ビジュアルで作れないか、と思いました。Edge Animationでやってみたらそう難しくなかったので、やり方とソースコードをシェアします。素材とデモは下記ですが、まずはチュートリアル。 ※ ビデオを作ってからコードをちっと更新しました。詳細は投稿の最後に。 リソースはこちら： デモアニメーション （チュートリアルで表示される） デモのソース そして最後に、ビデオとEdge Animateの同期させるためのJS。新規プロジェクトで使うには、下記のJSを creationComplete イベントのイベントハンドラーに入れて、そしてプロジェクトのどこかにビデオコンテナを作って、そのシンボル名を video_holder にすれば
Stage.js - 2D JavaScript library for cross-platform HTML5 game development
2D JavaScript library for cross-platform HTML5 game development
SVGアニメーションの現状 | POSTD
SVG（Scalabe Vector Graphics）の世界は魅力的です。そして、これを使ってできることや、これに用意されているオプションには圧倒されてしまうほどです。 SVGはXMLベースの2次元ベクター画像形式で、インタラクティビティとアニメーションをサポートします。言い換えると、SVGは図形やグラフをレンダリングするXMLタグで、その図形やグラフはHTMLの構成要素がそうであるように、インタラクトしたりアニメーション化したりできるのです。 SVGに関して、私がよく受ける質問の1つは、SVG画像のアニメーション化についてです。そのやり方だけではなく、それが何なのかということも聞かれます。ですから、現在の（そして未来の）SVGアニメーションの状況を見ながら、あなたが苦痛を感じずに行えるようなヒントやツールについてお話ししましょう。 同期マルチメディア統合言語、またの名をSMIL（Syn
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML Reference
GitHub - ericchiang/pup: Parsing HTML at the command line
BANDARNALO : Situs Togel Online Lisensi Resmi dan Situs Toto Di Indonesia
GitHub - usablica/kissui: :dizzy: Simple, easy to use, modern web development framework
レスポンシブ対応の高品質なHTMLのテンプレートのまとめ、商用利用無料で最近のUIデザインが分かる | コリス
GitHub - cyrilis/epub-gen: Generate EPUB books from HTML with simple API in Node.js.
GitHub - handsontable/handsontable: JavaScript Data Grid / Data Table with a Spreadsheet Look & Feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡
documentation.js
AMP - a web component framework to easily create user-first web experiences
bootstrap-wysihtml5
Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron