Frontend Meetup vol.1 - SPAを語り尽くす会! でのLT資料です。 http://connpass.com/event/38112/
![SPAと覚悟](https://cdn-ak-scissors.b.st-hatena.com/image/square/a04234b8182baca08a9866e37de1152fb94380db/height=288;version=1;width=512/https%3A%2F%2Fcdn.slidesharecdn.com%2Fss_thumbnails%2Fspa-kakugo-160916123230-thumbnail.jpg%3Fwidth%3D640%26height%3D640%26fit%3Dbounds)
2016.08.22Webフォントのロードをやめたこのサイトではフォントに Roboto と Roboto Mono を適用している。以前までは Google Fonts で配信されているそれぞれのフォントをロードしていたが、それをやめて font-family の指定のみに変更した。 プログレッシブな適用とOS共通フォントの選択まず前提として、テキストのベースフォントとして明朝(serif)を、 <h1> ~ <h6> の見出しにはゴシック(sans-serif)を、コードには等幅(monospace)を適用する前提方針がある。明朝・ゴシック・等幅の中から自分の好みに近く、尚且つ Mac と Windows にインストールされているものを優先的に選ぶようにした。 body { font-family: YuMincho, serif; font-weight: normal; } h1,
This is the second chapter of the Writing a JavaScript framework series. In this chapter, I am going to explain the different ways of executing asynchronous code in the browser. You will read about the event loop and the differences between timing techniques, like setTimeout and Promises. The series is about an open-source client-side framework, called NX. During the series, I explain the main dif
Talk about Stream API difference between node.js and whatwg at #tng11 2016/08/08
Selectors APIのDraftに、matchesSelectorというAPIが定義されていて、現在、WebKitとMinefieldのNightlyに搭載されている。 ただし、ドラフトなのでベンダープレフィックスがついていて、Element#webkitMatchesSelectorやElement#mozMatchesSelectorを使わなければいけない(というより、まだ直接使うには時期尚早だ)。 使い方は簡単。 var paragraphs = document.getElementsByTagName("p"); paragraphs.item(0).webkitMatchesSelector("p"); // true paragraphs.item(1).webkitMatchesSelector("div#main > p"); // <div id="main"><
JavaScript4 Types of Memory Leaks in JavaScript and How to Get Rid Of ThemLearn about memory leaks in JavaScript and what can be done to solve it! In this article we will explore common types of memory leaks in client-side JavaScript code. We will also learn how to use the Chrome Development Tools to find them. Read on! IntroductionMemory leaks are a problem every developer has to face eventually.
こんばんは、国民的スポーツのアニメGIFについてのニュースをお届けします。 今回はクライアントサイドのJavaScriptだけでアニメーションGIFを作る方法を共有させて頂きます。 ふつうアニメGIFを作ろうと思うとimagemagickなどを使ってサーバーサイドで処理させると思いますが、今回紹介するのはブラウザだけでアニメGIFを作る方法です。 jsgif antimatter15/jsgif · GitHub jsgifというJavaScriptでCanvasをアニメGIFに変換してくれる超絶便利ライブラリがあるのでこれを使います。 同名でアニメGIFをCanvasで制御再生できるライブラリがあって、そっちのほうが有名ですがそれとは別です。 どうやらAS3のライブラリをJSに移植したものみたいでソースコードを読もうとしても全然分からないけど、便利すぎるので全面の信頼をおいて使います。
Intro DOM のイベントリスナの仕様に Passive Event Listeners というオプションが追加された。 このオプションは、主にモバイルなどでのスクロールの詰まり(Scroll Junk) を解決するために導入されたものである。 今回は、この仕様が解決する問題と、本サイトへの適用を解説する。 Passive Event Listeners Spec Scroll Event の PreventDefault() 画面のスクロールに合わせたインタラクションを実装する場合、 Scroll Event にイベントリスナを登録する。 典型的な例では touchstart や touchend をフックし、その中で DOM の操作などを実施するなどがある。 場合によってはイベントリスナ内で preventDefault() を呼ぶことで、スクロールそのものを止めることもできる。
Sometimes, you’re going to need to build a JavaScript countdown clock. You may have an event, a sale, a promotion, or a game. You can build a clock in raw JavaScript rather than reaching for the nearest plugin. While there are many great clock plugins, here are the benefits you’ll get from using raw JavaScript: Your code will be lightweight because it will have zero dependencies. Your website will
こんにちは、最近隔週でやっている社内週末ハッカソンでElixirとGroovyを触ってニヤニヤしているプログラミング言語好きのedvakfです。次はClojureをやってみたいです。 弊社で開かれた第0回 東京 Web Performance - SIMD.jsを味見するというイベントで、SIMD.jsに触ってきました。 SIMD.jsはJavaScriptで高速なベクトル演算ができるAPIです。Firefox NightlyやMicrosoft Edgeで試せるそうです。ほとんど情報が無いので、集まった各自がググりながら使い方を調べてね♪というかなりストイックな集まりでした。 MDNに記事があるのですが、引数が書いてなかったり、現在のFirefoxのNightlyとAPIの乖離があったりして、かなりアルファな匂いがします。 https://developer.mozilla.org/ja
前書きこのブログには(リンク記事も含め)約300件ほどの記事がたまっています。 左側にある最新記事一覧やタグ一覧はJavaScriptでTumblrのAPIを叩いてとってきているんですが、これがですね、流石に重過ぎるだろと。 もう5兆回ぐらい言っているんですが、Tumblrにはタグ一覧を取得する機能がありません。初回読み込み時には20件ずつしこしことリクエストを発行、全件取得してから更に編集、表示と言うプロセスを踏んでいます。 一連の動作はほとんどすべて同期処理で行われています。他のJavaScriptを読み込んだり、実行したり、HTMLのレンダリングもやっているスレッドでやらざるを得ないので、一瞬画面が固まったりするのは大体そのせいです。 しかしJavaScriptにはマルチスレッド処理がないのでどうにもならない…と思っていたんですが、Web Workersと呼ばれる概念を使うことで可能
I love the idea of Redux. Managing state in an application is critical! There is nothing like “the state of a web application”. Let’s go back a few years when there were none of these “javascript applications”. The query string did a quite good job in shipping the document (aka web application) with a predictable state. If we change application state we do this by following a hyperlink :cool:. Som
JSDocをassertに変換するライブラリとそれを使ったBabelプラグインを書きました。 azu/babel-plugin-jsdoc-to-assert: Babel plugin for jsdoc-to-assert. azu/jsdoc-to-assert: JSDoc to assert ライブラリのjsdoc-to-assertの方は、JavaScript ASTのコメントからassertの文字列を作り出すだけのシンプルなものです。 実際に使う場合は、Babelのプラグインとしてbabel-plugin-jsdoc-to-assertを使い、コードを変換してランタイムassertを追加させます。 やっていることとしては、FlowTypeをランタイムチェックするbabel-plugin-typecheckのJSDoc版とも言えます。 babel-plugin-typechec
Introduction I've developed some pretty seriously Javascript intensive sites, where the sheer quantity of Javascript on the page is so much that I worry about the load time for the page getting too big. Often large chunks of the Javascript code are only used very rarely, and it seems a shame to load all that code that the user will probably never use. So I wanted a way to dynamically load Javascri
IE 8 で文字列から動的に script 要素を生成したい時もあると思います。 オフラインにキャッシュしておいた文字列を JavaScript として評価したい場合などです。 こうすると動作します IE6 ~ IE8 専用です。 var script = document.createElement("script"); document.getElementsByTagName("head")[0]).appendChild(script); script.outerHTML = ' <script defer="defer">' + jsExpression + '</script>'; document.createElement("script") でダミーの(プレースホルダの) script 要素を作り、そのあとで outerHTML で上書きしています。 これでも良
何かJavaScriptのソースコードを機械的にチェックするためのツールを作りたいという場合に、JavaScriptのASTというものを触る必要が出てくると思います。 この記事では、その取っ掛かりとなる案内を簡単にまとめたものです。 ASTとは AST(Abstract Syntax Tree)はコードをパースした抽象構文木のこと。 JavaScriptの場合はJavaScriptオブジェクト(JSON)として表現されます。 コード: { "range": [ 0, 10 ], "type": "Program", "body": [ { "range": [ 0, 10 ], "type": "VariableDeclaration", "declarations": [ { "range": [ 4, 9 ], "type": "VariableDeclarator", "id": {
@kazumich さんにお声がけいただき、WCAN 2015 Winter でおよそ 60 分ほどのセッションを登壇してきました。32:9 のスクリーンがあるという、TED でもやるんかオイという特殊な環境でした。普段はプロジェクター的な投影なので、スクリーンの前に立つのが微妙なんですが、ここはディスプレイが壁面に大量に並んでいて自ら発光するので、部屋を暗くしなくてもテレビのように十分に見えますし前に立っても平気です。 一緒に登壇したのが @yhassy さんと @Hidehisa さんということもあり、近年まれに見る胃痛を伴う緊張を味わいながらお話させていだきました。(リアルにセッション終了後、1時間くらい胃痛がズキズキしてました) 技術的なお話でした 参加されたみなさま、メインセッションや LT に登壇された各位、ならびに運営されたスタッフの方々、ひとまずお疲れさまでございました。貴
Have you ever wondered: what is the correct way to check if a Javascript variable is an Array? Do a Google search and you will get a great variety of answers. And, unfortunately, there's is no correct answer. This is one of the sad things about Javascript, not only are there many varying implementations of the language, there are also many varying opinions about how things should be done. Enough p
IE以外のブラウザであれば、関数.nameで関数名を取得することができる。 var func = function hoge() { } func.name; // => "hoge" 事実上標準でES6にも取り入れられそう。 しかしIEではバージョン11においても関数.nameは定義されていない。そこで、Function.prototype.toStringの結果を使って関数名を取得するコードを書くことにした。 今回は対象がIEだけだけど、複数のブラウザで確かめてみるとFunction.prototype.toStringの実装はまちまちだった(ES5仕様書にも実装依存と書いてある)。後述のテスト用ページを複数のブラウザで見比べると分かりやすい。 Firefoxでは、仮引数リストの前の「(」(開き括弧)より前の部分は正規化される(コメントは削除され、エスケープされたキーワードと識別子は変
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く