Modern JavaScript概観、そしてElectronへ | さにあらず
この一か月分の学習成果を整理したリポジトリを作ったので、その成果についてまとめておく。 作ったサンプルプロジェクトだけを手軽に欲しければ、このリポジトリを clone してほしい。 taichi/js-boilerplatemaster ブランチには、ミニマムな JavaScript 開発環境がサンプルコード付きで入っているfrontend ブランチには、React/Redux/webpackなウェブアプリケーション用の開発環境が入っているデフォルトブランチにしてある electron ブランチには、frontend ブランチの内容に加えてElectronでアプリケーションを開発するための環境が入っているはじめに#最近の JavaScript について#僕は仕事として JavaScript を書いている訳ではないけども、この半年くらいの間にちょっとしたツールならいくつか作った。どちらも便利
katatema.js - ✘╹◡╹✘
次のようなコードを書いて、 import React from "react" export default () => <div>Hello!</div> 次のようなコマンドを叩くと、 katatema build 次のようなファイルが生成されるという、katatema というツールをつくった。 <!DOCTYPE html> <html> <head> </head> <body> <div>Hello!</div> </body> 最先端の消耗 前に キーボードショートカットをカスタマイズするブラウザ拡張 - ✘╹◡╹✘ で、こういうことを書いた。 id:moznion へ、寒い日が続きますがお元気ですか。ともあれChrome拡張を1つこさえれば、大の大人が寄ってたかってモダンと言い合う類のものが一通り学べるだろうと思います。 最近のJavaScriptの周辺環境は大変で、何をやるに
phiary
ちょっとしたコードで JavaScript を豊かにしよう♪ ってこと jQuery は 嫌い 使いたくない. だけど Pure JavaScript だとちょっと物足りないってときに使える便利なメソッドをまとめてみました. すべて Runstant によるサンプル付きなので, 実際に開いて動かして試すことができます. 実行したりコードをいじってみたりと遊んでみてください. 他にもこんなメソッドあるよーとかあれば追加するので 気軽に Twitter などでご連絡下さい. String.prototype.format() - 文字列フォーマット 文字列を拡張して Phyton っぽい format メソッドを定義しています. '(' + a + ')' って書いていたところを '({0})'.format(a) といった感じで書くことができるようになります. Define 実装です. Ob
2015年上半期エンジニアの注目技術タグランキング- dots.[ドッツ]
［ 2015年上半期 総評 ］ JavaScriptやフロントエンド開発界隈は相変わらず流行の移り変わりが激しく、2015年上半期も様々なプロダクト・アーキテクチャが登場し注目を集めました。 未来のJavaScript標準であるECMAScript（以下、ES）6/7を現代のモダンブラウザで動作するES5に変換するBabel（旧:6to5）が、CoffeeScriptなどのAltJSと比べ学習コスト・移行コストが低く、様々なプロジェクトで採用されました。それによって、今まで、一部のモダンなブラウザなどでしか使えず敬遠されがちだったES6/ES7のシンタックスをより身近に感じるようになりました。 先日、標準化団体ECMA Internationalから ES6の正式な仕様が公開されたことで、今後、ブラウザなどでの実装が進むことが期待されており、classやarrow functionなど
![2015年上半期エンジニアの注目技術タグランキング- dots.[ドッツ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/4a9e6fff8b2eaef64e9577e794ada2fd8b2a200c/height=288;version=1;width=512/http%3A%2F%2Feventdots.jp%2Fimg%2FrankingPages%2F2015_first_half%2Fbnr_ogp.png)
ブラウザでビジュアルテストをするreftest-runnerを作った
概要 reftest-runnerというブラウザで描画内容やレイアウトといった表示結果をテストするためのライブラリを作りました。 要素技術としてはブラウザ、WebDriver API、レンダリングキャプチャ、画像Diffという感じです。 azu/reftest-runner 時間が無い人向け 以下のスライドに簡単にreftest-runnerやreftestとはなにか、どういうユースケースがあるのかが書いてあります。 reftest-runner-overview.pdf reftestとは reftest(Referrence Test)とは、2つのHTMLの表示結果(スクリーンショット)を比較することで表示結果が意図したものかをテストする方法です。 用意するHTMLとして以下の2種類を1セットとして用意して利用します。 テスト用HTML テストしたい機能を使って実装したHTML リファ
[JS]ボタンがパネルに、パネルがモーダルウインドウにアニメーションで変形する超軽量スクリプト -cta.js
最近のWebページで人気があるのは、ビジュアルの連続性。 パネルをクリックすると、それが拡大してモーダルウインドウになり、ボタンをクリックすると、それが変形してパネルになるなど、ユーザーのアクションをトリガーに要素が別の要素にアニメーションで表示される超軽量（1.2KB）スクリプトを紹介します。 モーダルウインドウとサイドバーのデモ コマを落としているので分かりにくいですが、ボタンをクリックするとモーダルウインドウやサイドバーに、アニメーションで変形して表示されます。 cta.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="src/cta.js"></script> </body> Step 2: HTML 一つ目のデモ「タイル状コンテンツ」のHTMLは、こんな感じです。 data
![[JS]ボタンがパネルに、パネルがモーダルウインドウにアニメーションで変形する超軽量スクリプト -cta.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/3b796beb0e3307e8d7086ea2aaa29efd7e12d443/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015042101.png)
amCharts: customizable free flash charts
JavaScript Charts & Maps Programming library for all your data visualization needs. Readme.md Came here to find your next charting library? Good. Our charts were designed to feel modern, sleek and fast, out-of-the box. But don’t take our word for it – check out our demos and fall in love. And best of all, our libs natively integrate with TypeScript, Angular, React, Vue and plain JavaScript apps. F
[JS]スマホでもデスクトップでも快適！水平スクロールコンテンツを簡単に実装できるスクリプト -horizonScroll.js
マークアップは非常にシンプル、スクリプトの設置も簡単、スマホでもタブレットでもデスクトップでもすいすい快適に操作できる水平スクロールコンテンツを実装できるjQueryのプラグインを紹介します。 デモのアニメーション horizonScroll.jsの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="jquery-1.10.2.js"></script> <script type="text/javascript" src="jquery.horizonScroll.js"></script> </head> スマホなどタッチデバイス対応にする場合は、touchSwipe.jsも加えます。 <head> ... <script type="tex
![[JS]スマホでもデスクトップでも快適！水平スクロールコンテンツを簡単に実装できるスクリプト -horizonScroll.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/87c79333735eb75d10033e33d194426b66f5def3/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015031609.png)
たのしいglitch - Qiita
この記事はJavaScript Advent Calendar 2014の12/19(金)の記事になります。 glitchとは このような感じのデジタルノイズエフェクトをglitch(グリッチ)といいます。 電子信号の異常によって引き起こされる映像の乱れの再現処理〜 〜とかなんやかんや。 実際にはこんなglitch起きないよ！というような正しいglitch論もありますが ここでは触れません。こわい。 今回はこのglitchをjavascriptで実装しようじゃないかと。 うすうす感付かれてるかもしれませんが そう、あたりです。 見栄えヨロシクでチャラい方のjs案内になります。 どうぞお手柔らかにお願いします。 解説 1. はじめてのglitch 簡単なglitch処理は、 canvas内をgetImageData & putImageDataすることによって可能です。 var ctx =
【翻訳】リッチなWebアプリケーションのための7つの原則 - from scratch
はじめに この話はGuillermo Rauch氏が書いたhttp://rauchg.com/2014/7-principles-of-rich-web-applications/ という記事の翻訳です。許可を得て翻訳しています。 ここ最近Web業界を賑わしているSingle Page Applicationの必要性、HTTP2/SPDYといった技術、リアクティブプログラミングやIsomorphicデザインという考え方について包括的にまとめたすごく良い記事になっております。 最初に断っておきますが、ものすごく長いです。各セクションがわかれているので時間がない方はセクションごとに書かれたtl;DRとまとめを読むだけでも参考になるかと思います。 ちなみに明日のNode学園祭には、本記事を記述したGuillermo Rauch氏が見えるので、そこで詳しく聞いてみるのもいいのではないでしょうか。
フォントを利用できるかどうかを調べる。 - jsdo.it - Share JavaScript, HTML5 and CSS
function isFontInstalled(fontName) { var testNode = document.querySelector('#test-node span'); testNode.style.fontFamily = "'" + fontName + "', 'Empty'"; return !!testNode.offsetWidth; } window.addEventListener('DOMContentLoaded', function () { setTimeout(function () { var ul = document.querySelector('ul'); ['メイリオ', 'MS PGothic', 'ＭＳ Ｐゴシック', 'Hiragino Kaku Gothic Pro', 'Hoge'].forEach(function (fo
Velocity.js is next generation animation engine.
8. DOM操作は同期的処理で非効率である Layout thrashing var h1 = element1.clientHeight; <== Read element1.style.height = (h1 * 2) + 'px'; <== Write var h2 = element2.clientHeight; <== Read(trigger layout) element2.style.height = (h1 * 2) + 'px'; <== Write var h3 = element3.clientHeight; <== Read(trigger layout) element3.style.height = (h3 * 2) + 'px'; <== Write var h1 = element1.clientHeight; <== Read var h2 = ele
インタラクティブ・プログラミング勉強会 第1回 乱数 | fladdict
巷では、スマホは「手触り」が重要・・・って話が持ち上がりつつあるが、使い易さと気持ちよさを両方できる人材が不足している。広告Flash業界で培われたインタラクションのノウハウは、だんだんと失伝しつつあり、ビジュアルや動きをちゃんとコーディングできるスマホ系の人材なかなかいない。新しく勉強するパスもほとんどない。 そんなわけでTHE GUILDの社員研修として勉強会をすることに。目標は1年ぐらいでこの程度のモリモリ動くものを作れるようにすること。で、2年目に動きや手触りに、合理性や必然性、使い易さを付加できるとこまでもっていく。 第1回はインタラクティブの根幹となる乱数について。 1: 乱数とは ランダムな値を返す関数、機能。 乱数はインタラクティブ・プログラミングの根源。静的な絵とは根本に異なる、永遠に定着しない絵を作り出す。 インタラクティブなプログラミングでは、知識以上にその応用力が問
JavaScriptで制御しているCSS3のtransitionを途中で中断させる方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エンジニアチームのづやです。 CSS3のtransition便利ですよね。 JavaScriptから制御してると、jQueryでanimateをstopさせるときみたいに途中で動きを止めたいことがありました。そんな時どうすればいいかわからなかったので、調べてみました。 JavaScriptから制御しているCSS3のtransitionを途中で中断させる方法 動かしてるstyleを上書きしてしまう これが一番ベターっぽい。中断したいタイミングで対象となってるstyleを上書きすると止まってくれるようでした。 <!-- こんな要素があって --> <input type="button" name="start" id="start" value="開始"><br> <input type="button" name="stop" id="stop" value="停止"><br>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
careernews.id - Crazy Domains
Koalas to the Max dot Com
WebGL Bits
Elevator.js
cow2design.com
レンダリングを意識したパフォーマンスチューニング
