優れたWebフロントエンド開発者になるには
この記事では、二人のエンジニアが書いたWeb開発者のためのアドバイスを紹介する。一人はおすすめの有用なツールとテクニックについて、もう一人はブラウザ向けに書くときに遭遇する課題への対処についてアドバイスしている。 今年のはじめ、BazaarvoiceのソフトウェアエンジニアであるRebecca Murphey氏は「A Baseline for Front-End [JS] Developers: 2015」というブログ記事を書き、クライアントサイドWeb開発に使えるツールとアプローチをJavaScript開発者にアドバイスした。記事を要約すると、彼女はこう言っている。 ECMAScript 2015を学ぶ。 Understanding ES6、ES6 Rocks、BabelJSがおすすめだ。私たちはこのリストにAxel Rauschmayer氏の新しい本、Exploring ES6を加える
Chrome DevToolsを使ってJavaScriptのメモリリークを検出し、解消する - 人生dat落ち
JavaScriptを書いていたらブラウザがくっそ重くなる症状に出くわした。あぁ、噂のメモリリークですわ。 先人の知恵に頼るマン。それっぽい記事が見つかる。 javascriptのメモリリーク対策(随時更新) - Qiita Shibu’s Diary: JavaScriptのメモリリークを10倍速で発見する Taming The Unicorn: Easing JavaScript Memory Profiling In Chrome DevTools Writing Fast, Memory-Efficient JavaScript - Smashing Magazine angularjs - How to catch memory leaks in an Angular application? - Stack Overflow 上の記事はProfiles + Take Heap
フロントエンジニアになってから５ヶ月間で欠かせなくなったツールを晒す - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 概要 今年からフロントエンドエンジニアにシフトチェンジして5ヶ月がたち、これがないと仕事にならんわレベルのツールを整理がてらに晒していこうと思う。 スペック的にはJava歴が10年くらい。 割とツール好きで、できればキーボード（カーソルキー以外）だけですべての操作を完結したいと思っている。 そんなおっさんがお送りします。 5ヶ月間のお仕事内容 PC/タブレット向けのAngularJSを使ったフロントエンド開発 HTML/CSS(SASS)/Javascript PCはIE8~、Chrome。モバイル端末はiPad、Nexus7 職場での
#最近のJavaScript情報の探し方
azu @azu_re 皆さんの集め方も書いてもいいんですよ "最近のJavaScript情報の探し方 · Issue #2 · azu/jser-info" http://t.co/tZeSNAvB59 2014-01-30 13:01:07
魔導師になって兵士を操作してJavascriptを覚えよう！っていうCodeCombatが面白い | バンクーバーのうぇぶ屋
僕は色々勉強しなきゃ行けないのは分かってるんだけど、勉強しなきゃなーとか言いながらズルズルとしてしまう人で、気づけばゲームばっかしてるような人間なんです。 もはや、WEB屋兼ゾンビキラーとか名乗った方がいいんじゃないかとこのまえ友人に冗談半分で言われましたが、そのくらいゲームは結構好きなんですね。（先月はCOD2のOriginsやりこんで、今はGTAVやってます…） そんな、学ぶの面倒だけどゲームは好きって人に、もしかしたらオススメできるかもしれない、CodeCombatというJavascriptを学ぶサイトを今日はご紹介させて頂ければと思います！ 内容は至って簡単で、ゲームをすすめる為にはJavascriptでコードを書かなきゃならないって感じの物。それっぽいのはいくつかありましたが、ちょっととりあえずやってみましょう。 とりあえず、PLAY！ どうやら僕はウィザードとしてプレイするよう
Rails で、Controller に定義されている action を一度に取得する方法はありますか？ - QA@IT
平素よりQA＠ITをご利用いただき、誠にありがとうございます。 QA＠ITは「質問や回答を『共有』し『編集』していくことでベストなQAを蓄積できる、ITエンジニアのための問題解決コミュニティー」として約7年間運営をしてきました。これまでサービスを続けることができたのは、QA＠ITのコンセプトに共感をいただき、適切な質問や回答をお寄せいただいた皆さまのご支援があったからこそと考えております。重ねて御礼申し上げます。 しかしながら、エンジニアの情報入手方法の多様化やQAサービス市場の状況、＠ITの今後のメディア運営方針などを検討した結果、2020年2月28日（金）15:00をもちましてQA＠ITのサービスを終了することにしました。 これまでご利用をいただきました皆さまには残念なお知らせとなり、誠に心苦しく思っております。何とぞ、ご理解をいただけますと幸いです。 QA＠ITの7年間で皆さまの知識
2012年末に観ておきたいJavaScript20選: githubでwatch数の多い200件から - memo.yomukaku.net
GithubでJavaScriptのコードとして分類されており、現時点でwatch数の多い200件の中で、実際に使ったことがあり便利または面白いと感じた20件をまとめてみました。 backbone-boilerplate、requirejs、yeoman、lodashのような定番になってきているものから、TimelineJSのような全く汎用性のないものまであります。 d3.js Data-Driven Documents。サンプル集を観るのが手っ取り早いと思います。 pdf.js JavaScriptだけでPDFをレンダリングできる時代です。1年半ほど前にくらべると、かなりPDF製作者の期待通りにレンダリングできるようになってきています。 backbone-boilerplate Backbone.jsを使ったアプリの骨格構造。サーバー側でいわゆるMVC2のアプリを作っている人にはB
HTML5で組んでるならこの魔法のjsも入れておけっていう話
現在、A!@attripさん発で話題になっている「たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS」という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。 もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応 属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応 透過PNGに対応 opacityに対応 といったことが可能になります。要はCS
Learn HTML5, CSS3, Javascript - video style tutorials
Learn HTML5, CSS3, Javascript and more... Video style walkthroughs showing cool stuff being created from scratch
JavaScriptのメモリリークを発見してくれるツール「Leak Finder」をグーグルが公開
ガベージコレクションの機能を備えるJavaScriptのような言語で開発されたアプリケーションでは、基本的にメモリリークは生じないはずですが、それでも回収されないメモリ領域がどんどん増えていくというメモリリーク的な状況は起こりえます。 leak-finder-for-javascript - Tool for finding memory leaks in JavaScript programs. - Google Project Hosting メモリリークは最終的にはそのソフトウェアの動作を遅くしたり不安定にしますが、短期的には問題なく動作しているように見え、単純なテストでは症状が表れにくいため、発見は難しいものです。 グーグルはこうしたJavaScriptのメモリリークを検出してくれるツール「Leak Finder」を公開したことを、ブログ「Leak Finder: a new to
JavaScript 言語概要 - JavaScript | MDN
JavaScriptチュートリアルBeginner's tutorialsYour first website: Adding interactivityDynamic scripting with JavaScriptJavaScript frameworks and librariesJavaScript ガイド入門編文法とデータ型制御フローとエラー処理ループとイテレーター関数式と演算子Numbers and stringsRepresenting dates & times正規表現インデックス付きコレクションキー付きコレクションオブジェクトを利用するクラスの使用プロミスの使用JavaScript 型付き配列イテレーターとジェネレーターInternationalizationJavaScript モジュール中級編Advanced JavaScript objectsAsynchrono
大規模JSプロジェクトのための、モダンなjavascript/coffee-script の学習用資料まとめ - mizchi log
A社coffee-scriptエヴァンジェリストのmizchiです。今日は昨今の大規模JSの需要の高まりに応えるべく、お前が知ってる資料をまとめろとのお達しが下ったので、社内wiki面倒だしここに載せてますん。 前提 大規模JSをモジュール化する為にcoffee-scriptのシンタックスシュガーでOOPのパラダイムを持ち込む coffee-scriptの煩雑なコンパイル作業を避けるために、Rails/Nodeではアセットパイプラインを使って動的にコンパイルと圧縮を行う JSプロジェクトを部分的にnode化してTDDでサイクルを回す coffee-scriptに関しては、基本的には本家チュートリアルと The Little Book on CoffeeScript を読めばいい coffee-script チュートリアル 本家チュートリアル CoffeeScript little book
JavaScript アニメーションのデザインパターン
JavaScript でアニメーションを作る アニメーションとは何？ ビューを少しずつ回転、拡大縮小、移動、変色などを行い、連続的な動きを作る こんな感じ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; setInterval(function() { el.style.opacity -= 0.01; }, 10); </script> なんで、あんな感じの書き方になるの？ setInterval の意味が分からない こんな感じで書けないの？ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; w
PhotoshopでのWeb制作効率を向上させる「JSX」とは
ご存じの方もいらっしゃると思いますが、Adobe Photoshop は JavaScript で制御することができます。 Photoshop 用の JavaScript ファイルのことを「JSX」と呼びます。拡張子は .jsx です。 Photoshop を使ってWeb制作されている方は多いかと思いますが、Photoshop は本来写真加工用のソフトでありWebデザイン用のソフトではないため、特にレイアウト機能が Fireworks、Illustrator、InDesign などに比べ貧弱です。 しかし、JSX を使用することにより Photoshop のレイアウト機能やWeb制作向けの機能をある程度向上させることができます。 JSX は昔から Photoshop に搭載されていましたが、書き方の参考になるような書籍やサイトが少ないためかそれ程注目されていなかった気がします。 しかし、最
JavaScriptの勉強を始めます - FutureInsight.info
1年に1つ、新しいプログラム言語を勉強しようと思っているのですが、今年はJavaScriptを勉強しようと考えています。最近はサーバーサイドでも使えますし、何よりなんかJavaScript書けるとブラウザ拡張とかでおもしろいことできそうなので。僕のJavaScriptの知識は昔サイ本を眺めた程度なので、ほとんど素人です。という訳で、ネット上で評判良かった以下の本を買いました。新しい本と古い本かったのは、スタイルの変化もあわせて勉強したいからです。JavaScriptパターン ―優れたアプリケーションのための作法Stoyan Stefanov オライリージャパン 2011-02-16売り上げランキング : 10802Amazon楽天市場価格.comby カエレバJavaScript: The Good Parts ―「良いパーツ」によるベストプラクティスDouglas Crockford オ
JavaScriptをやり始めた人が理解したほうが良いJSONパーサのコード - sifue's blog
そろそろ4月も近いということもあって、新たにWeb業界やSIer業界に入るぞという方がプログラミングの勉強をし始めているころでしょうか。最近は、エンタープライズでもWebクライアントが主流になりつつあるのでJavaScriptの習得は避けては通れない道だと思います。また、Node.js等サーバーサイドのJavaScriptも出てきたこともあって、非常に有用な言語になりつつあります。 そんなJavaScriptを学び始めている人の中でも、ある程度プログラミングをやったことがある人がJavaScriptの綺麗な書き方を学ぶのに絶対理解しておいた方が良い300行程度のソースコードがあります。 それは、JavaScript: The Good Partsに載っているJSONパーサのコードです。 JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス 作者:
やっと理解できた！JSオブジェクト指向プログラミング再入門 | ゆっくりと…
既に多くの方が JavaScript のオブジェクト指向的側面についての解説を記事にされていますが、読み手側から見ると、例えばプログラミング言語への習熟度やオブジェクト指向自体に対する理解度がマチマチなわけで、私自身、「おお、なるほど！」 っていう、頭の中のスイッチがパチンッ！と入るような境地には達していませんでした。 かつて私も オブジェクト指向なJavaScriptプログラミングのススメ なんていう翻訳記事を書いてはいるのですが、正直なところ prototype.constructor の存在は知りませんでしたし、Function.call や Function.apply をどう使えばよいのかなどをちゃんと理解できてはいませんでした。 そんな中、2011年12月に書かれた Doc Center | Mozilla Developer Network の記事 オブジェクト指向 Java
イモムシでjQuery入門 | 第1回デザイナーがイモムシで覚えるjQuery
こんにちは。kamecoです。 androidアプリをhtmlベースで作ったりしています。 それができるのも、jQueryの力でjavascriptをちょっと書けるようになったから。 ということで、jQueryを覚えよう！ 電卓で入門とか色々考えたのですが、 私が覚えた方法で。。 myベストイモムシを作ろう！！！！ とりあえずあなたのイモムシも用意しよう。 ダウンロード とりあえず名前を付けると愛着がわきます。 うちの子は「クロスケ」です。 ↑クロスケ。かわゆす。 練習で書いてた時から書き換えてないので、挙動がおかしいのは見逃してください。。 つまめます。動きます。顔変わります。などなど。 クロスケのjsもブログを書きながら新調してあげようと思います。 イモムシのhtml解説 これから使うhtmlですので構成や呼び出しているものを一応確認しておきます。 cssやh
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://plus.appgiga.jp/masatolan/2014/04/04/51522/
これ知らないプログラマって損してんなって思う汎用的なツール
