Of SVG, Minification and Gzip
Smaller files are downloaded faster, so making an asset file size smaller before sending it to a client is a good thing to do. Actually, it’s not just a good thing to do, minification and compression are something that a modern developer is supposed to do. But minifiers are not perfect and compressors can perform better or worse depending on the data they compress. There are some tricks and patter
精度を保ってSVGを1バイトでも小さくする - Qiita
あらまし SVGを利用するメリットのひとつは、CSSにインラインで埋め込めるほどのサイズの小ささです。 ただ、SVGは作り方を誤るといくらでもファイルサイズが大きくなるデータフォーマットでもあります。 CSSのインラインに埋め込むということは、同時にそのWebページで表示されることのないSVGもロードされてしまいがち。エンジニアとしては、ちゃんと最低限のサイズで埋め込みをすることで通信コストを抑え、CO2排出量削減に貢献したいですね！ ちなみに、ここではSVGはHTMLに埋め込めればいいや、ではなく、SVG-valid (XML-valid) なサイズ削減を目指しています。 チェック項目 軽量化する前に SVGはどう利用されるのか（どのくらいのサイズで描画されるのか、白黒でいいのか、色を塗り分けたいのか、JavaScriptで動的に制御したいのか、など）によって、パスをどう定義するべきかが
あなたが知らないJavaScriptの便利すぎるショートハンド19選
日頃書いているJavaScriptをもっと短く書く方法を知っていますか？ 目からうろこ、すぐに使えるJavaScriptのショードハンドを紹介します。 JavaScriptを使うすべての開発者に向けて、私が長年かけて身につけたJavaScriptのショートハンド（短縮記法）を資料にしました。コードの違いが分かるように通常の記述方法も併記しました。 1．三項演算子 if-else文を1行に収めた短縮記法です。 通常const x = 20; let answer; if (x > 10) { answer = 'is greater'; } else { answer = 'is lesser'; } ショートハンドconst answer = x > 10 ? 'is greater' : 'is lesser'; 従来のif文を1行に収めることも可能です。 const big = x >
集え変態プログラマ！JavaScriptの最短コードに挑んだコードゴルフ大会 in Code 2013 | DX.univ
8月3日〜4日に開催されたプログラマのためのお祭り的イベント集え変態プログラマ！JavaScriptの最短コードに挑んだコードゴルフ大会 in Code 2013 by Yoshiaki Sato in Tech — 2013/08/06 フロントエンド担当のヨシアキです。 8月3日〜4日に開催された"Code 2013"に参加してJavaScriptのコードゴルフの問題を出題してきましたので、そのレポートを兼ねて、JavaScriptのショートコーディングについて語ってみようと思います。 Codeとは プラットフォーム・言語・コミュニティの壁を超えてプログラマが達が集う、プログラマのためのお祭り的イベントです。 開催地はこれまでのところ、温泉郷で有名な札幌の定山渓で開催されています。 そのため、ゆったりと温泉に浸かりながらプログラミングについて語り、美味しいお料理とお酒に舌鼓を打ちなが
JavaScript イディオム集
JavaScriptでは、初見の人にはさっぱりわからないけれども、ある程度慣れた人は当たり前に使うイディオムが結構たくさんあります。知ってしまえば何てことはないので、私の知っている限りのイディオムとその意味を解説します。 （7/3追記: twitter等で教えていただいた内容を追加しました） +v （数値化） var v = "123"; console.log(+v + 100) // 223 console.log(v + 100) // 123100 vを数値化する方法では最もメジャーです。parseFloat(v) に比べて高速なのに加えて、parseFloatとは細かい挙動が異なります（例えば空文字列の場合、parseFloatならば NaN になりますが、 +v の場合はゼロになります）。必ず数値になることが保証されており、文字列などで数値化出来ない場合はNaNが返ります。 v
JavaScript：undefined値の判定
JavaScriptでは初期化されていない変数には全て「undefined」という値が入っています。 var a; alert(a); //undefinedが入っている これを利用して、変数が定義済みかどうかを判別することが可能です。…が、やり方がいろいろあるみたいなので、まとめてみることにします。 undefinedと比較する if (a === undefined) { alert("aは未定義"); } グローバル変数として、そのまんまundefinedという名前の変数が用意されているので、それと比較するやり方。一番素直な方法ですが、JavaScriptにおいては良くない書き方とされています。 undefinedは予約語ではなく、単なる変数です。だから上書きすることができるし、関数スコープ内で同名のローカル変数を作ることもできます。（ただし最近の処理系ではconst扱いになって上書
即時関数(function(){ ... })()の別の書き方いろいろ - 泥のように
JavaScriptでよく使われるコード片に即時関数というものがあります。無名関数を宣言して即実行することで、ブロックスコープの存在しないJavaScriptにおいて擬似的にブロックスコープを再現します。 var a = "global"; (function(){ var a = "local"; alert(a); //local })(); alert(a); //global 一番有名なのはこの(function(){ ... })()の形式なのですが、なぜfunctionの外側にカッコが必要なのか不思議に思ったことはないでしょうか？ ためしにfunction(){ ... }()と書いてみると、Syntax Errorが発生します。 なぜfunction(){ ... }()はSyntax Errorなのか JavaScriptにはfunction文とfunction式があって、
jsのオレオレ演算子 - latest log
jsのオレオレ演算子といえば、 Boolean値に変換する !!arg 0又は1に変換する +!!arg 小数点を切り落とす arg|0 や arg >> 0 などがありますが、若干分かりづらいので、初心者の方にはおすすめできません。 http://jsdo.it/uupaa/9YFT で実行できます。 uu.ready(function(uu, doc) { var arg = 1.23; uu.log(" !!arg = @", !!arg); uu.log("+!!arg = @", +!!arg); uu.log(" arg|0 = @", arg|0); uu.log("arg>>0 = @", arg>>0); });
コードを削る - latest log
Twitter だとちょっと厳しいので、こっちでまとめ。 MobileWebKit に対応しようと思ったら、コードをなんとかして削る必要があります。 AND 演算子 で 4byte 削る(10byte → 6byte) if (a) { b(); } ↓ a && b(); OR 演算子 で 5byte 削る(11byte → 6byte) if (!a) { b(); } ↓ a || b(); ドット演算子以降を自力で Minify する JavaScriptは動的な言語なので、ドット演算子以降は基本的に minify しても圧縮されません。 document.createElement("div"); document.createElement("a"); document.createElement("p"); ↓ このままだと、minify しても縮まらない document.
//から始まるURL - by edvakf in hatena
このブログでも前に一回出てきたことがあるんだけど、// から始まる URL のことが紹介されていた。(問題・このブログのどの記事で出てきたでしょうか?) Using Protocol Relative URLs to Switch between HTTP and HTTPS - HttpWatch Blog <img src="//example.com/img/foo.jpg" />とか書いてあると、そのページのプロトコル (http: か https:) をブラウザが勝手に補完してくれるので HTTP と HTTPS を使い分けるのに便利だよっていう話。 ただし、IE7と8では // から始まる URL で指定されたスタイルシートは何故か2回リクエストが出てしまうので気をつけましょう。…らしい。(受け売りです) High Performance Web Sites :: 5a Mis
140字以内ブックマークレット - by edvakf in hatena
個人的にハマってる140字以内のブックマークレット。"javascript:" で既に11字使ってるのが痛い。 その1。 今月のカレンダー。 javascript:d=new Date;d.setDate(1);w=d.getDay();c=[];i=0;while(w--)c[i++]='\t';for(n=1;n<32;n++)c[i++]=n+(i%7?'\t':'\n');alert(c.join('')); 139字。 30日までの月と31日までの月と2月を分けようと思うと160字超えてしまう。閏年を判定すると180字ぐらいになってしまう。どうにかならんかなー。 119字でできた。 javascript:d=new Date;d.setDate(1);w=i=d.getDay();for(c='';w--;c+='\t');for(n=1;n<32;c+=n+++(++i%7?'
バッドノウハウ x 3 - latest log
id="foo" の要素にアクセス 普通はこう <script id="foo"> alert(document.getElementById("foo").txt); </script> document.getElementById は省略できる <script id="foo"> alert(foo.txt); </script> 27byte減 ショートコーダーならスルーしがたい小悪魔的誘惑 IEを判別(IE="\v"=="v";) (13byte) IE5〜IE8でtrueになるのはJScript5.xが垂直タブ(\v)を無視した比較を行うから だがJScript8.0ではfalseになる IE9で通用する保障が無い 他には IE=!!top.execScript; // ダメ Chrome でも true (20 byte) IE=!!top.ScriptEngine; //
空から降ってくる女の子(ゲームっぽく) - os0x.blog
空から女の子が降ってくる - ぼくはまちちゃん！(Hatena) id:murky-satyr先生 の http://gist.github.com/45346 を勉強目的に読んでたら、自分でも書きたくなってついやってしまった。すごく出遅れ感あるけど、折角なので公開。 <br /> javascript:H='http://hamachiya.com/g';E='.gif';R=Math.random;Q=new Image;Q.src=H+1+E;N=90;P='%';I=0;L=function(Y,r,V,f,S){S=(V=Q.cloneNode(r=R(Y=N)+1)).style;S.position='absolute';S.right=R()*N+P;(B=document.body).appendChild(V);f=function(){Y>2?(S.bottom=(Y
IT戦記 - Math.floor を使わずに小数を整数にする
少数を整数にしたいような場合 たとえば、 0 - 9 のランダムな整数が欲しい場合 普通はこう書く var value = Math.floor(Math.random()*10); Math.floor を使わない場合はこう書く var value = ~~(Math.random()*10); 「~」は補数を求める単項演算子で、オペランドを整数変換するので二回やることでオペランドを整数化できるのです。 まとめ でも、もっといい方法があるかも。 皆様なら「どう書く？」のでしょうか。
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Byte saving techniques
45346’s gists