[B! javascript] [4ページ] kyaidoのブックマーク

優秀なJavaScriptの開発者になるための5か条 | POSTD

(注記：7/15、いただいた翻訳フィードバックを元に記事を修正いたしました。) 子供の頃、私の興味は互いに関係性のない様々な分野に及んでいました。数学も歴史も大好きでした。ルネッサンスマン、つまり博学者と言う、複数の分野に秀でた人になりたいと思っていました。これはとても難しい課題で、私は突如として、器用貧乏な人になってしまう危機に直面したのです。私は特定の分野に特化しなくては、と考え始めました。そうすればたとえルネッサンスマンにはなれなくても、少なくとも、器用貧乏にならなくても済むと思ったのです。どうしたらソフトウェア開発をするのに必要な広い知識を保ちながら、1つの分野で専門性を高めることができるのでしょうか。この記事では、過去5年間、私が良いJavaScript開発者になるために使ったテクニックとリソースの概要をお伝えしようと思います。最近の多くのWeb開発者は、ある共通の

kyaido 2015/07/14

javascript

リンク

[JS]コンテンツの区切り線を水面に見立てて、ぽちゃんたぷんっと波立たせる癒やし系スクリプト -Raindrops.js

コンテンツの区切りなどの線を水面に見立てて、滴を落としたように波立たせる素敵なアニメーションを簡単に実装できるスクリプトを紹介します。 ↓区切り線がぽちゃんたぷんっと波立ちます。 Raindrop.js ヘッダやフッタあたりに少し適用するのはいい感じですね。 Raindrops.jsの使い方 Step 1: 外部ファイル当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="js/jquery-1.9.1.min.js"></script> <script src="js/raindrops.js"></script> </body> Step 2: HTML 水面のアニメーションを適用する要素を用意します。 <div id="example1"></div> Step 3: JavaScript 適用する要素

kyaido 2015/07/13

javascript

リンク

中上級者になるためのJavaScript【知識編】 - Qiita

【News】電子書籍化しました！ Gitbook Read Online Download PDF Download EPUB Download MOBI この記事は、敷居が低いもののなかなか中上級に進めず困っているJavaScript学習者の方を対象としています。よりJavaScriptに対する理解を深める際に気を付けるべき事柄、知っておくべきキーワードの提供をゴールとします。「クロージャーについてもっと知りたい！」「カリー化なるものがあるのか、知らなかった！」といったきっかけになれば幸いです。 JavaScriptは書ける人が多く、ベストプラクティスが整ってあるものの、逆に間口が広すぎてコピペで済ませてしまったり（場合によってはしょうがないことですが）基礎を学ぶ機会がなくなんとなく現場に出てしまったりすることがありますので、ぜひこの機会にJavaScriptを復習してみてください。

kyaido 2015/07/06

javascript

リンク

スマブラ(スマートフォンのブラウザ)上で動画をインライン再生させる方法① - Qiita

最初に最近仕事で動画ものを扱うことが頻繁にあります。(変な意味ではありません) HTML5ではvideoタグを使えば、Webブラウザ上で動画を再生させるのがとても簡単になりました。しかし対象のデバイスがスマートフォンの場合はそうは簡単にはいきません。例えばvideoタグを使って動画をiPhoneで再生しようとすると、動画をページに埋め込むような形式で再生することができません。 ※以下、「動画をページに埋め込む形式」のことを「インライン」と呼びます。 (業務に使うかは置いといて) スマートフォンでもインライン再生させたい思いを胸に抱きつつ、実現できそうな方法を調べていたら、とてもシンプルで使いやすいやつを見つけたのでメモ。こいつです。 Frame Player http://vagnervjs.github.io/frame-player/ おそらく"スマートフォン動画インライ

kyaido 2015/07/05

javascript

リンク

シンプルでかつ最高のJavaScriptプロファイラ sjsp を作りました！ ― Webアプリケーションが複雑化する中でプロファイラに求められるものとは何か - プログラムモグモグ

あらすじ Web技術が複雑になる中で、JavaScriptのプロファイリングをとる方法とは。プロファイリングを取るためのコードを手で書いてみましょう。とてもシンプルで、かつ最高のJavaScriptプロファイラ sjsp を作りました。本当にあった怖い話上司「とにかくJavaScriptのコードを速くしてくれ」私「分かりました、速くします」 (次の日) 私「いいプロファイラがないなら作ればいいじゃない」同じチームの人「えっ？」私「最高のJavaScriptプロファイラ作ったよ」同じチームの人「「えっえっ？？？」」私「早速使ってみたらこことここが遅いって分かったよ」同じチームの人「「「この子は一体…」」」 JavaScriptのプロファイリングの難しさ近年、Webブラウザーの処理速度は著しく向上し、その可用性の高さから、アプリケーションのプラットフォーム

kyaido 2015/07/02

javascript

リンク

[JS]物理法則に基づいたさまざまなアニメーションを実装できるスクリプト -Dynamics.js

デモページ物理法則に基づいたさまざまな動きは、ブルーのプルダウンからいろいろ試すこともできます。 Dynamics.jsの使い方 Step 1: 外部ファイル当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="dynamics.js"></script> </body> Step 2: JavaScript 適用するエレメントを指定し、アニメーションを設定します。 elは要素、el内のプロパティはアニメーションさせるプロパティと値、typeはアニメーションの種類、frequency, frictionはアニメーションの細かい設定、durationはタイミングです。 var el = document.getElementById("logo") dynamics.animate(el, { translateX: 350,

kyaido 2015/06/30

javascript

リンク

Importing CSS Breakpoints Into JavaScript | Lullabot

There are a lot of challenges within responsive web design, and one that that has constantly been a pain is triggering JavaScript based on the current CSS media query breakpoint. The probl em is that the breakpoints are in CSS, which JavaScript has no native way to access. Many solutions (including window.matchMedia(), and Enquire.js) involve declaring your breakpoints in both CSS and JS, or requir

kyaido 2015/06/16

リンク

Page Scroll Effects | CodyHouse

Page Scroll Effects Introducing a mini-library of experimental page scroll effects. We put together some fancy effects that take place while the user is surfing through the sections of a web page. Some of the effects are quite extreme, but they can prove very useful if your goal is to create an immersive user experience. All animations have been created using Velocity.js. Please note that these ef

kyaido 2015/06/12

javascript

リンク

今、改めてBackboneを評価する

2015/05/27 Data Binding JS Night

kyaido 2015/05/28

リンク

ここ数年前から2015/5までのモダンフロントエンドを総まとめしてみた

HTML5や、次々と台頭するJavaScriptフレームワークにみられるように、現在のフロントエンドは異常なほど動きがあります。常にキャッチアップしていないと、いつのまにかOLDな技術を使い続けることになります。実際に今回記事にしてみて、ちょっとつらくなりました。。しかし、フロントエンドエンジニアとしてコードを書いていて（最近は主にJavaScript）、そのおもしろさに日々驚いています。そこで今回は、ここ数年~2015年のフロントエンド界隈で一度は流行った技術、今後の動向などをまとめました。タイトルにモダンとありますが、その辺は適当です。ぜひ一度整理してみてください。目次 Javascriptフレームワーク React.js Angular.js Angular.js 2.0 Backbone.js Vue.js Mithril.js Aurelia.js Knockout.js

kyaido 2015/05/28

javascript

リンク

小さく始める JavaScript のテスト - Qiita

書かないと怒られるし、書きたいとは思っているが、書くまでの敷居がやたらと高くなってしまった気がしている人へ。最小のテスト本質的にテストを書くのにフレームワークはいらない。 assertion だけあればいい。 isomorphic にしたいなら、 node の assert モジュールすら使わず console.assert だけで書ける。 // assert function assert(actual, expected) { console.log('.'); console.assert(actual === expected, '\nact: ' + actual + '\nexp: ' + expected); } function TestSum() { assert(1+2, 3); } // exec TestSum(); あとは普通にこのスクリプトを node/io

kyaido 2015/05/27

javascript

リンク

plainJS - The Vanilla JavaScript Repository

Vanilla JavaScript for building powerful web applications jQuery is one of the great libraries that helped us overcome JavaScript browser issues when IE 6 and 7 were still around. Today, it may be a good choice to drop jQuery and its cousins, because modern browsers are pretty easy to deal with on their own. Using plain JavaScript will make your applications load and react blazingly fast. Why choo

kyaido 2015/05/27

リンク

JSDocコメント - Google JavaScript スタイルガイド - 日本語訳

#divclass(page_title){ &this_page() } 我々は&blanklink(C++ style for comments){http://google-styleguide.googlecode.com/svn/trunk/cppguide.xml#Comments}の考え方に従います。全てのファイル、クラス、メソッド、プロパティに&blanklink(JSDoc){http://code.google.com/p/jsdoc-toolkit/}コメントが、適切な&link_anchor(jsdoc_tag_reference){タグ}と&link_anchor(js_type_language,pageid=17){データ型}を伴って記されるべきです。また名前から明白に判断できる場合を除き、プロパティ、メソッド、メソッドの引数、メソッドの戻り値を説明する文章

kyaido 2015/05/26

javascript

リンク

JavaScriptでJSDocコメントを書くメリットとは – ICS MEDIA

筆者が試したところ、開発環境としてWebStormやVS Codeがとくに優れており、ツールチップにJSDocコメントの情報がすべて表示されました。ちなみにReactやAngularなどのメジャーなJSライブラリにおいても、そのソースコードではJSDocコメントが使われています (例 : Angular、React)。APIが多岐に渡るJSライブラリを利用するとき、わざわざリファレンスをブラウザで開いたり解説書で調べることなく、コード上で関数の仕様を確認できます。 ▲描画ライブラリCreateJSのAPIを表示したもの JSDocコメントのメリット② APIリファレンスの生成 TypeDoc等のツールを使うことでコードのリファレンスドキュメントを作成できます。こういったJSライブラリのリファレンスはみなさんも一度は見たことがあるのではないでしょうか。ウェブサイト案件のソースコードでAP

kyaido 2015/05/26

javascript

リンク

AngularJSモダンプラクティス - Qiita

Help us understand the probl em. What is going on with this article? こんにちは、@armorik83です。私のAngularJS歴は2年弱で、これまでAngularJSに関する記事はQiitaにたくさん書いてきました。例えば次のような記事です。 AngularJSアンチパターン集 2014.9 ここらでDirective Scopeの@=&をまとめておきたいと思う 2014.9 TypeScriptで書くAngularJSのMVC 2014.2 AngularJS Directiveの処理順を網羅してみた 2014.12 他にもニッチなものやイマイチだったものも含めてけっこうな数となってきました。また、こういった記事の縁で勉強会でも登壇させて頂きました。モダンAngularJS 2014.12 GDG中国 TypeScr

kyaido 2015/05/22

リンク

angularJS と jQuery に関する誤解を解く - nazokingのブログ

最近 angularJS に対する期待の低下が著しくてつらい。なんだかんだで SPA から jQuery に戻った話 - ボクココ Angularの問題でははてなブックマーク - mizchi のブックマーク - 2015年5月18日みんな使いどころを間違ってるんや。１年半くらい使ってて不満もあるけど自分のよく使う範囲では angularJS 最強だと思う。 angularJS が向いてるのは Single Page Application ではない angularJS が向いてるのは ◎ フォームのような細かい部品を多用＆ DOMツリーとデータスコープがほぼ一致していてユーザの入力をサーバに送ったりする webアプリ。管理画面、マイページ、業務アプリなど △ Single Page Application ← 簡単に作れるけどページ間の連携が必要ないならサーバ側で分けてしまった方

kyaido 2015/05/19

リンク

ブラウザでビジュアルテストをする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 リファ

kyaido 2015/05/16

リンク

Rubyist Magazine - スはスペックのス【第 1 回】 RSpec の概要と、RSpec on Rails (モデル編)

『るびま』は、Ruby に関する技術記事はもちろんのこと、Rubyist へのインタビューやエッセイ、その他をお届けするウェブ雑誌です。 Rubyist Magazine について『Rubyist Magazine』、略して『るびま』は、Rubyist の Rubyist による、Rubyist とそうでない人のためのウェブ雑誌です。最新号 Rubyist Magazine 0062 号バックナンバー Rubyist Magazine 0062 号 Kaigi on Rails 特集号 RubyKaigi Takeout 2020 特集号 Rubyist Magazine 0061 号 Rubyist Magazine 0060 号 RubyKaigi 2019 直前特集号 Rubyist Magazine 0059 号 Rubyist Magazine 0058 号 RubyKai

kyaido 2015/05/13

javascript

リンク

2日でできる! JavaScript トレーニング - mixi engineer blog

こんにちは。SNS mixi の JavaScripter、kuniwak です。新しい仲間たちが入社する季節になりましたね。さて、ミクシィを支えるエンジニアが作成した JavaScript 研修の資料を Github にて公開しました。ミクシィは 2013年から研修資料を公開していましたが、今年は JavaScript の進化に合わせて内容を刷新しています！ 2015年度の JavaScript 研修は、Web アプリケーションの部品（モジュール）をつくれるようにすることを目標とした、実践的な研修として計画されました。 JavaScript 研修のために与えられた期間は2日ということもあり、MVC や Flux といった設計方面の話題には踏み込めていませんが、Promise、Fetch API、Bower など、現在・未来のフロントエンド開発に必須の要素を盛り込んだ最新のJavaS