この記事のオリジナルは voxxed に投稿されたものです。 JavaScript関連の問題を抱えるチームをサポートする仕事を通じて、いくつか共通の問題点があることに気づきました。もしあなたもJavaScriptに対するイライラを感じているのであれば、この記事は何らかの助けになるかもしれません。おことわり：私がお教えするヒントはすでにご存知のものもあるとは思いますが、うまくいけば、多少なりとも有用な情報があるかもしれません。特にエンタープライズアプリケーションやCMSソリューションを構築する際に有効なヒントです。チームの誰もが話したがらないCMSのコードについてお話しします。いずれも必要に応じて採用できるものです。 debuggerステートメント 大半のブラウザでサポートされているにもかかわらず、JavaScriptを書く際に最も活用しきれていない機能の1つです。debuggerステートメ

7月19日に行った「覚醒！JavaScript」勉強会で使用したスライドです。 http://connpass.com/event/7082/Read less

# forked from edo_m18's "おっぱいがうごくJS inspire by damele0n" http://jsdo.it/edo_m18/kLpGn do (win = window, doc = window.document, exports = window) -> {sqrt, atan2, max, cos, sin, abs, ceil} = Math ARC = Math.PI * 2 requestAnimFrame = do -> return window.requestAnimationFrame or window.webkitRequestAnimationFrame or window.mozRequestAnimationFrame or window.oRequestAnimationFrame or window.msRequestA

The key to quickly learning JavaScript MV* Frameworks is to break them down into a series of features. The main features of an MV* application are routing, data binding, templates/views, models, and data storage. In this post I’ll describe these main features and show code examples from two or three frameworks for each feature. You will begin to concretely understand what these frameworks are tryi

The HTML5 Creation EngineCreate beautiful digital content with the fastest, most flexible 2D WebGL renderer.

簡単アニメーション！Pixi.jsを触ってみる！ 〜（4）パフォーマンスを測定してみた〜 Pixi.jsは 速い！ と定評の簡単にアニメーションが作れるライブラリです。 pixi.jsの公式サイトへ これまで亀のような歩みで使い方を覚えてきましたが、今回は中休み（ネタ考えるのが面倒w）ということでパフォーマンスを測定してみました。 パフォーマンス測定といえば、もうずいぶん前に、ICS池田さんの記事でも、ぶっちぎりの結果が紹介されていて、この記事を見て「pixi.jsしかないじゃん！」と、あっさりとprocessing.jsから乗り換えた思い出があります。 他のjsライブラリとの比較については、池田さんの記事を参照くださいね。 どのくらいの機種で動くのか知りたい! 今回の調査で知りたかったのは、 pixi.jsはどのくらいの機種や環境で動くの？ という点です。 なので、手持ちのPCや某所にあ

連載目次 一昔前であれば、HTML／JavaScript／CSSを使用してWebアプリを作成する場合、（筆者の経験では）所定の位置にファイルを置くだけでした。最近はHTML／JavaScript／CSS関連の技術も複雑化／多様化し、いろいろなことを考慮しなければなりません。 例えばJavaScriptファイルの場合は、以下の作業を行うこともあるでしょう。 minify（圧縮）や結合 単体テストの実行 JSLint（構文チェック）の実行 さらに、CoffeeScriptやTypeScriptを使用している場合にはコンパイル（JavaScript変換）を行う必要もあります。 また、SCSS（Sass）やLESSなどのCSS拡張メタ言語を使用している場合にも、コンパイル（CSS変換）作業が必要です。 ファイルを修正してビルドするたびに、これらの作業をいちいち手作業で行っていては非常に面倒でしょう

Enterprise x HTML5 Web Application Conference 2014の発表資料です。Read less

// フルスクリーンに切替 $('.fullscreen').on('touchstart', function(){ if(document.body.webkitRequestFullScreen) { document.body.onwebkitfullscreenchange = function(e) { document.body.style.width = window.innerWidth + 'px'; document.body.style.height = window.innerHeight + 'px'; document.body.onwebkitfullscreenchange = function() {}; } document.body.webkitRequestFullScreen(); } }); Register as a new user and

Google+ スニペットgoogle (+https://developers.google.com/+/web/snippet/)というテキストを含むユーザー エージェントのリクエストが表示されます html Google+ の場合、callbackを呼ぶためにタグにdata-callback="gplus"　を追加しています。 <!-- twitter --> <a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a> <!-- //twitter --> <!-- Facebook --> <div id="fb-root"></div> <div class="fb-like" data-href="{サイトのURL}" data-layout="button_c

Koji Ishimoto gives a presentation on front-end engineering. He defines a front-end engineer's responsibilities as including JavaScript, version control with Git, modular code, browser developer tools, command line, templating, CSS preprocessors, testing, automation, code quality and manuals. He discusses common front-end tools, managing tools with Grunt, and tracking speed with tools like WebPage

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と似てます

Google タグマネージャ （Google Tag Manager） をこの Blog 内の各ページで読み込んでいる JavaScript コードの管理に数ヶ月前から使い始めていますが、結構使いやすくて便利なのと、ページの表示速度的にもいい結果が出たので紹介してみます。 Google タグマネージャ公式サイト 機能 ： Google タグマネージャ Google タグマネージャとは？ Google タグマネージャは無料で簡単に使用できるタグ管理システムです。ウェブ上の使いやすい管理画面から自分でタグを管理してモバイル アプリを設定できるため、面倒なコード書き換えは不要で、IT 部門に依頼する必要もありません。 機能 ： Google タグマネージャ から引用 と公式には書いてありますが、簡単にいえば Web ページ内で読み込む各種の JavaScript コード、例えば Google A

こんにちは。荒井です。 Facebookもtwitterもgoogleも画面遷移のときには、非同期で次のページを読み込むような作りになってますね！ これは、ajaxで次のページを読み込むのと同時に「History API」というHTML5の機能を使って、URLを更新することで実現してます。 毎回全部読み直さないから通常の画面遷移よりも早いし、URLが変わるから履歴に残るし、良いことばっかり！！SEO的にも「#!」を使ったやつより良いよっていうのを何かで読みました！！！ これからWebサービスを作るなら、導入したいですね！！！ これpjaxを使えば簡単に導入できるんです！！！よし！！！ PJAX!! pjaxとは、GithubのChris Wanstrathって人が作ってるjqueryプラグインです。 上で説明した、History APIとajaxを使った非同期の画面遷移を簡単に導入すること

1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 フロントエンドエンジニアの谷です。 本記事ではGoogle Chromeの開発者ツール、Chrome DevToolsを使いこなすために参考になるサイト、ページの紹介をします。 すでに多くのフロントエンドエンジニアが開発で使っているかもしれませんが、「要素のインスペクタなどの基本的な機能しか使っていない」「UA切り替えくらいしかつかってない」というような方や、そもそもほとんど使ったことがない、という方もこれらを参考にフロントエンド開発を効率化していきましょう！ 基本的な使い方 Chrome DevTools Overview 基本はやはり公式ドキュメ

レッスン一覧 料金プラン ログイン 2024/07/25 NEW 【週刊ドットインストール】 コードレビュー付きメンタリングサービス、Swiperレッスン、クラス名ってどうつけるの？ 2024/07/25 NEW 【転職・副業したい方へ】 コードレビュー付きのメンタリングを始めます！ 2024/07/24 NEW 『Swiperでカルーセルを実装しよう』をリリースしました 2024/05/07 NEW あなただけの学習ロードマップを作成します 【随時受付中】

パチンコ P 宇宙戦艦ヤマト2202 超波動 ©西﨑義展/宇宙戦艦ヤマト2202製作委員会 パチンコ Ｐ 百花繚乱 ご奉仕129ver. パチスロ Ｌ アカメが斬る！ 2 パチスロ Ｌ ウルトラマンティガ ©円谷プロ

A framework for ambitious web developers. Ember.js is a productive, battle-tested JavaScript framework for building modern web applications. It includes everything you need to build rich UIs that work on any device. Read the Tutorial Build with the teams that never stop shipping. Some of the best development teams in the world have been iterating on their products for years with Ember. With scalab