reduce関数は結構有用っていうお話 - あと味
JavaScriptに限った話ではないのですが、reduce関数を持つプログラミング言語がいくつかあります。 JavaScriptに関しては、一応、ECMAScript5の仕様に登場するようで、将来的にはどのブラウザでも使えるようになりそうな気配はあります。 Standard ECMA-262 また、MDCではreduceのアルゴリズムが掲載されているので、これを利用すれば現時点でもどのブラウザでもreduce関数を利用することができます。 reduce関数とは？ MDCに掲載されている文章を引用します。 配列の（左から右へ） 2 つの値に対して同時に関数を適用し、単一の値にします。 JavaScriptのreduceは、配列のメソッドです。左ら右へとありますが、右から左へ関数を適用するreduceRightという関数もあります。*1 どういう時に使えるか 元となる配列があって、それを累積
サイトに適したリソース配置とasync/defer完全マスター – レンダリング優先のグッド・プラクティス | ゆっくりと…
タイトル、少し変えました 😉 。 第1部「サイト高速化の「戦略」と「戦術」- GradeAのその先へ」では、YSlow や PageSpeed がアドバイスする Tips のうち、HTTP リクエストの削減を優先すべしという「戦略」の話をしました。 また css や js を束ねて結合し、HTTP リクエストを削減する時の「戦術」の話もしました。 今回は、「サイトの特性に適したリソースの配置を行う」ために、「束ねたリソースをドキュメント中にどう配置するのが適切か」を見い出したいと思います。またそのポイントとなるブラウザの基本的な挙動についても言及します。 ブラウザごとの挙動が確かめられる、実験サイト contentloaded.com を立ち上げたので、以下、同サイトから幾つかの例を引きながら話を進めたいと思います。 リソース配置を決める戦術 基本的な戦術 第1部 では、css や js
koa入門 - from scratch
さて、2013年12月19日にkoaというフレームワークの0.1.0がリリースされ、Hackers Newsに乗り、それが話題になっています。 これまでNode.jsのWeb Application Frameworkとして最もメジャーなのはExpressだと思いますが、Expressの作者であるTJを筆頭にExpressチームがKoaを積極的にエンハンスし始めているため、今後のNode.jsのフレームワーク勢力図が変わる可能性があります。 作者のメッセージを引用すると Koa is a new web framework designed by the team behind Express, which aims to be a smaller, more expressive, and more robust foundation for web applications and A
ソートアルゴリズムを映像化してみた - jsdo.it - Share JavaScript, HTML5 and CSS
よくあるやつです。ぼんやり眺めてると、とても癒されます。 2014/2/25 追記: 全面的に書き直しました。 // https://github.com/norahiko/sort-visualize var helper = { range: function(min, max) { var res = []; for(var i = min; i < max; i++) { res.push(i); } return res; }, shuffle: function(ary) { for(var i = ary.length - 1; 0 <= i; i--) { var rnd = Math.random() * (i + 1) | 0; helper.swap(ary, i, rnd); } }, swap: function(ary, a, b) { if(a < 0 ||
自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう！
自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう！ 石本 光司（Kaizen Platform, Inc...） こんにちわ、@t32kだよ！ 私は仕事では主にHTML/CSSコーディングを担当しているのですが、自分の書いたCSSがイケてるのか、そうでないのか、気になります。私、気になります！そうでなくても、他プロジェクトのCSSのレビューをお願いされたりすることもあるので、そのCSSがどのような状態であるのか、すばやく簡単に理解する必要性がありました。 そこで私は、StyleStatsというNode.js製のツールを作りました。 t32k/stylestats – GitHub StyleStatsの使い方はとても簡単です。ターミナルから下記コマンドを打てば、すぐにCSSを解析した結果が得られます。 $ npm install -g stylestats $
Windows XPだとページ全体に警告表示するJavaScriptを配布します
Microsoft による Windows XP のサポートはあと数十日で終了します。 サポート終了後はどのような脆弱性が見つかったとしても修正されません。 参考: 警察庁も注意喚起、サポート終了後のWindows XP利用は危険 -INTERNET Watch にも関わらず、まだまだ利用者がたくさんいるのが実態です。 さらに恐ろしいことに、ほぼWeb制作者向けの記事ばかりのこのブログも Windows XP からのアクセスが多い事がわかりました。 そこで、このブログでは Windows XP 利用者が記事を表示しようとした場合に警告（Webブラウザーの種類にかかわらず警告）するようにし、その JavaScript を配布することにしました。 Windows XP利用者はどのくらいいる？ このブログの2013年12月のアクセス解析を見ると、Windows の割合が 43.2% で、Wind
はてなブログが遅いのはだいたいJavaScriptのせい - もふぬこ動画☆画像
はてなブログって重いですよね～・・・ ブラウザ変えたら早くなるかなと思ってIE11、Firefox、Google Chromeで計測してみたけど、どれもそんなに差は出なくてどれも遅い（苦笑） いったい何が原因なのかなと調べていったら、JavaScriptのせいでした。 「もふぬこ戦記」のトップページを計測しました。 使用したのはGoogle Chromeのデベロッパーツール。 条件はJavaScriptオン、キャッシュオフです。 12.84秒でした。 次にキャッシュをオンにしてみます。 8.38秒です。 次にJavaScriptをオフ、キャッシュをオフにしてみます。 3.48秒！ キャッシュオンの場合・・・ 746ミリ秒 JavaScriptをオフにするだけでサクサク快適動作します！ 星つけたりできなくなるんですけど・・・（´～｀；） ・・・あれ？JavaScriptエラー出てる気がするけ
[JS]これスゴイよ！スクロール時にさまざまな楽しいエフェクトを与えるスクリプト -ScrollMagic
スクロールに合わせて、さまざまなアニメーションをシンクロさせるjQueryのプラグインを紹介します。 Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、div要素の内側のスクロールなどにも対応しています。
ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由 - hogehoge @teramako
結論から言うと、単なる格好付けです。 以下説明。 主要なJavaScript (ECMAScript 5th)では、functionは2種類あります。 文(Statement) *1 式(Expression) です。 所謂、「即時関数」と呼ばれるものはfunctionは式(Expression)である必要があります。 何故なら、関数実行を示す構文であるCallExpressionが式であり、それ以外存在しないからです。*2 JavaScript コードは文(Statement)の集合 JavaScriptのコードは文の集合と言えます。いきなり式が始まることはありえません。 とはいえ、 foo(); 1 + 2; といったものは成り立ちます。これは文(Statement)の解釈としてExpressionStatement(式を書いても良い)という、文が定義されているからです。 ともかく、文
すごい速度で文章が読めるようになる「Spritz」をウェブページで使用可能にするブックマークレット「OpenSpritz」
By Paul Watson 単語が目に飛び込んできてすごい速度で文章を読めるようになる「Spritz」という技術に着目したRich Jonesさんが開発したブックマークレットが、ウェブページのテキストをSpritz方式で表示させる「OpenSpritz」です。 Announcing OpenSpritz - A Free Speed Reading Bookmarklet - Gun.io https://gun.io/blog/openspritz-a-free-speed-reading-bookmarklet/ Spritzがどんな技術なのかは以下の記事を読めば分かります。 単語が目に飛び込んできてすごい速度で文章を読めるようになる「Spritz」 - GIGAZINE 「OpenSpritz」を使用するには、まずこのページへ飛び、「OpenSpritz this！」と書かれたアイ
JavaScript か CoffeeScript かで結果が変わるプログラム - 音の鳴るブログ
使い所皆無なんだけど、このプログラムは JavaScript だと "JavaScript" と評価されて CoffeeScript だと "CoffeeScript" と評価される。 { JavaScript: ["CoffeeScript"] }["JavaScript"][0] 検証用コード code = '{ JavaScript: ["CoffeeScript"] }["JavaScript"][0]'; // "CoffeeScript" と評価される eval(CoffeeScript.compile(code, {bare:true})); // "JavaScript" と評価される eval(code); こうしてしまうと、観察者効果でどちらでも "CoffeeScript" と評価されてしまう。 a = { JavaScript: ["CoffeeScript"] }
[JS]日本語のどんなWebフォントでも美しくカーニングできるスクリプト -jQuery.Kerning.js
ウェブページで日本語のWebフォントを使用する時にカーニングを適用して、読みやすくて美しく表示するjQueryのプラグインを紹介します。 全角の括弧や句読点などの約物は、日本語のどんなフォントでもスクリプトのみで美しくカーニングできます。 ※文字間のカーニングは、フォントごとに設定が必要です。 jQuery.Kerning.js jQuery.Kerning.js -GitHub jQuery.Kerning.jsのデモ jQuery.Kerning.jsの使い方 jQuery.Kerning.jsのデモ デモでは上：カーニング無し、下：カーニング有りの状態で、明朝とゴシックの2書体がチェックできます。 適用されている方が、読みやすいですね。 ゴシック体のデモ、上：カーニング無し、下：カーニング有り jQuery.Kerning.jsの使い方 Step 1: 外部ファイル jquery.j
Webアプリのパフォーマンス改善をWeb標準で行う方法、まとめ - ふろしき Blog
「HTML5 Advent Calendar 2013」の24日目の記事です。 Webアプリのパフォーマンス改善と言えば、JavaScriptやDOMアクセスなど、既存の技術ベースな改善手法を想像する方も多いでしょう。最近では、こうした改善のあり方を、別の視点からもう少し広げようというアイデアが存在感を持ち始めています。それは「Web標準」です。 そこで今回、Web標準側でできるWebアプリのパフォーマンス改善について、掻い摘んで紹介します。全てを説明となるとキリがないので、キーワードを中心とさせて頂きます。最近になって、結構実用化が進んできているので、悩んだ時には試してみる価値はあるでしょう。 1. リソースを先に読み込む linkタグにてURLなどを指定することで、これから先に読み込ませる可能性が高いWebページのリソースを予め読み込むWeb標準があります。ニュースサイトでは次のページ
2行追加するだけでWebサイトを高速化するInstantClick.io - atskimura-memo
Before visitors click on a link, they hover over that link. Between these two events, 200 ms to 300 ms usually pass by (test yourself here). 引用：InstantClick — JS library to make your website instant リンクにマウスオーバーしてからクリックするまでには200msから300msほど時間がかかるそうです。実際このテストページでクリックしてみるとMacのトラックパッドだとさらに遅く500msくらいかかってました。 InstantClick.ioはその間に裏でリンク先ページをロードして勝手にリンクをpjax化してしまうという高速化ライブラリです。 やってることはRails4のturbolinksと似てます
コピペが出来るなら誰でも出来る、Web制作タスク自動化ツール「Grunt」導入手順
なんだか、Web制作の際に起こる様々な面倒くさいタスクを自動化してくれるGruntというツールがあるらしく、私の周りのWebデザイナーさんやコーダーさんがこぞって導入されておりました。 はじめは「へぇ…あちきは別に興味ないからいいでありんすよ」と指をくわえて傍観していたのですが、便利便利の声を聞くにつれやっぱり羨ましくなってきました。だから導入した。使った。良かった。 そんな訳で今回は、Grunt.jsの導入から簡単な使い方までを紹介したいと思います。私のような黒い画面に抵抗を持っている初心者の方でも導入できるよう、コピペさえ出来ればGruntが使えるようになる記事にしてあるつもりです。 なお、今回導入した私のPC環境はOS X 10.9.1です。Windowsでの導入手順は今更だけどやるgrunt入門編・インストールから基本的な使い方｜WEB Drawerをご覧下さい。 Gruntで何が
「Amazonでいくら使ったか」を調べるブックマークレットが面白い｜イケハヤ大学【ブログ版】
これは面白い！ いままでいくらAmazonで買い物したか合計するブックマークレット書いた – モロ屋 モロ屋さんがAmazonでいくら使ったかを集計するブックマークレットを公開しています。使い方は簡単で、サイト上に公開されているコードをURLバーにコピーするだけ。 Chromeは少しわかりにくいので、簡単にキャプチャ付きで開設。購入履歴ページに飛んで、URLバーを選択します。 一旦空欄にして、 コードをコピーします。 Chromeだと冒頭の「javascript:」という記述が抜けるので、補足してenterを押します。 すると、集計年度を選択するポップアップが開きます。年度を入力してOKを押すと、集計が始まります。履歴があまりにも多いと、2012年はうまく動作しないかも。 2013年は早くも26.8万円使っていました。家電製品とかは買ってないので、本が大半ですかね…。 そんなわけで、みなさ
[取り組み] フロントエンドでコーディングスピードをアップさせる６つの方法！と思って書いてたら30個も書いちゃった。 - YoheiM .NET
[取り組み] フロントエンドでコーディングスピードをアップさせる６つの方法！と思って書いてたら30個も書いちゃった。 こんにちは、@yoheiMuneです。 フロントエンドとしてHTML,CSS,JSを中心と開発を行うことを仕事にして早くも半年が経ちました。 最近はだいぶ効率的にコーディングが出来てきたとやっと実感してきたので、ブログにも自分のコーディングスピードアップのコツを書きたいと思います！ 「こんなのよりももっと良いのあるよ」などたくさんの感じる点があるかと思います。ぜひTwitterなどで教えて頂けると助かります。 コーディングをスピードアップする６つ＋αのポイント 自分が思うにコーディングをスピードアップする最も大切なポイントは以下ではないかと思います。 めんどくさいと感じること、そして改善に動くこと 幸い自分はかなりのめんどくさがり屋で、コーディング中も「これ手動！？」「マウ
![[取り組み] フロントエンドでコーディングスピードをアップさせる６つの方法！と思って書いてたら30個も書いちゃった。 - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/d5148c26b0ae2a3585b08c6cf755d68966d223de/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F225.jpg)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
fladdict
http://plus.appgiga.jp/masatolan/2014/03/28/51357/
Flatis