[B! html][HTML] z_dogmaのブックマーク

フロントエンドチェックリスト（日本語訳） - Qiita

GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau

z_dogma 2017/11/01

リンク

どんどん便利になってるChromeの機能拡張！Web制作に便利な機能がまとめられた -CanvasFlip

DOMの構造を調査する、要素のサイズを測る、要素のみのキャプチャを撮る、画像ファイルを抽出する、カラーやテキストを編集するなど、これらWeb制作に便利な機能がまとめて、しかも高性能で快適に利用できるChromeの機能拡張を紹介します。それぞれ単体の機能拡張を使用している人は、一つにまとめられて簡単だと思います。 CanvasFlip CanvasFlipの機能 CanvasFlipのインストール CanvasFlipの使い方 CanvasFlipの機能 CanvasFlipは先日リリースされたばかりの新しい機能拡張で、私も先週から使用していますが、かなり便利です。パネルのUIも操作しやすく、ページに表示されるハイライトやメジャーも見やすいと思います。ページの基本情報。指定した要素のプロパティを表示するインスペクタ。インスペクタでスタイルを変更すると、すぐにページに反映されます。メ

z_dogma 2017/08/29

リンク

宣言ブロックのCSS設計 - kojika17

日本語で「CSS設計」を検索すると、記事やつぶやきなどでセレクタの命名規則に関する話題が多いです。 CSSを設計する上で、命名規則は重要な要素でしょう。簡単なセレクタ名だと他のスタイルと重複する可能性もあります。他のスタイルと重複しないようにセレクタの子孫数を増やしてしまうと、今度はスタイルの取り回しが悪くなります。またデザインをコンポーネントに分ける粒度について紹介されていますが、命名規則の分け方のように紹介されているよう感じます。論理的に構造をわけて命名していくため、覚えやすく、伝えやすさもあわさって、現在の「CSS設計 = 命名規則」のような構図ができあがったと感じています。 CSS設計は命名規則だけか命名規則はCSS設計において、重要な要素です。しかしCSSは命名規則させ気を付ければ良い、というものではありません。私は、すでにあるサイトの一部のコンテンツの作成やすでに用

z_dogma 2017/07/19

勉強になる

リンク

[GAS] Google Apps Script のHtmlServiceまとめ - dackdive's blog

とりあえず、公式リファレンスであるこのあたりを読んでみた。 Create and Serve HTML Communicate with Server Functions Templated HTML 以下、要点まとめ。 Create and Serve HTML スクリプトの作成からWebアプリとして公開するまで新規 > Google Apps スクリプトでスタンドアロンなスクリプトファイルを作成。新規作成 > HTMLファイルで index.html を作成。コード.gs と index.html にそれぞれ以下を記述。コード.gs function doGet() { return HtmlService.createHtmlOutputFromFile('index') .setSandboxMode(HtmlService.SandboxMode.IFRAME); }

z_dogma 2016/07/03

リンク

旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ - Qiita

はじめにネットには様々な情報が溢れており、JavaScriptに関する情報も多数存在しております。その中には、「今時こんな書き方しねえよ…」と思わずツッコミを入れたくなるような、本当に、本当に古い内容について書かれている古文書も存在します。そんな罠記事の情報に囚われてしまって、いつまで経っても現代的なJavaScriptが書けない皆さんのために、このシリーズの記事では、各セクション毎に分けて、旧石器時代の記述と、現代の記述を紹介する形で、文明開化をしていきたいという思いで記述する。最初は、現在比較的メジャーなブラウザで一通り動作する「ECMAScript 5」までの内容に関してポエムを書き連ねていき、最終的には一連の内容を読むだけで「ES6(ES2015)」による新機能や、絶賛提案中の「ES7」の一部提案内容についても把握し、おおよそ現代人を育成することを目標とする。 …なんてめっ

z_dogma 2016/01/19

リンク

AMP （Accelerated Mobile Pages） HTML を出力するようにしてみたけど面倒くさかった話

Movable Type で運用している Blog の記事を AMP （Accelerated Mobile Pages） HTML で出力するようにしてみたけれど、とある自分の書き方の癖により既存の記事を AMP HTML に自動変換するのは結構面倒くさかったという話。 Google が発表したプロジェクト、Accelerated Mobile Pages （AMP）は、モバイル端末における Web ページの表示を高速化する取り組みで、超簡単に言ってしまえば、オープンソースで公開されるフレームワーク、AMP HTML の仕様に従って Web ページを作ってくれれば、その表示を大幅に高速化できますよという仕組み。単にファイルサイズ的に軽いよというような単純な話だけではなく、キャッシュなど様々な技術を組み合わせることでページのロード時間を大幅に短縮する仕組みで、制作者側が AMP HTM

z_dogma 2016/01/07

うわ、めんどくさそう‥‥

リンク

Webデザインの勉強を始める人が幸せになれるツール＆サービス

2015年7月7日便利ツール先日超初心者さん向けにHTML・CSSを使ってWebページを作る講座を開いたのですが、予想通りやはり「これから勉強したい！」という人は、何から勉強すればいいのかがわからない事が多いです。また情報が多すぎて必要なツールもどれを選んだらいいかわからないケースもよく耳にします。そこで今回はその時教えたツールやサービスを中心に「これだけはそろえておこう！」というものを紹介します。あまりたくさん挙げても使い切れないかなーと思ったので、かなり絞っています。まずはこれらをとっかかりにし、自分好みのものを探していってくださいね！ ↑私が10年以上利用している会計ソフト！環境を整えようまずはWebサイト制作をするための環境を整えましょう。テキストエディターテキストエディターは、HTMLやCSSなどを使ってWebページを作成する際に使うツールです。Windowsに最初か

z_dogma 2015/07/06

リンク

HTML の linkタグに prefetch 機能が追加され、より便利になるようです - latest log

linkタグに pre fetch 機能を追加する仕様 (Editor's Draft)が上がってきています。 Chrome - indevelopment IE - サポートするかも Firefox - 不明 Safari - 不明 <link rel="preload" href=“…" as=“…" onload=“…” onerror=“…”> 従来は、new Image や XHR と DOM API を使ってリソース毎に別々のJavaScriptを記述する必要がありましたが、お手軽になりますね。これまで var img = new Image(); img.onload = function() { document.body.appendChild(img); }; img.onerror = ... img.src = url; var script = document

z_dogma 2015/06/17

リンク

Timesheet.js - Beautiful time tables with HTML, JavaScript and CSS …

Timesheet.jsVisualize your data and events with sexy HTML5 and CSS3. Create simple time sheets with sneaky JavaScript. Style them with CSS and have mobile fun as well … Just include Timesheet.js and configure your data. No external dependencies, no jQuery needed and of course no Angular.JS! Just a few lines JavaScript to generate a beautiful HTML5 layout and some really delicious CSS to be customi