タグ

JavaScriptとWebに関するrydotのブックマーク (11)

  • ブラウザレンダリング入門〜知ることで見える世界〜 - Qiita

    はじめに 『レンダリングの仕組みなんて知らなくても、ブラウザが勝手にやってくれるじゃん!』 当時駆け出しのエンジニアだった私はそう思っていました。 実際、当時の私はレンダリングの『レ』の字も知りませんでしたが、特に業務上で問題はありませんでした。 しかし、その時は突然訪れました。 クライアントの要望でアニメーションを多彩に取り入れた案件を実装した際に、テスト段階で一部ブラウザ(S○f○ri、E○ge)でアニメーションがひどい状況になっていることが発覚しました。 (開発中はChromeで確認を行っており、Chromeでは特に問題はなかったので発覚が遅れました。) それからは、狂ったようにパフォーマンスの改善方法をググり、修正する日々が続きました。(最終的には、なんとかマルチブラウザでの動作も担保し、納品まで完了しました。) その案件が落ち着いた後、改めて自分の調べたことを振り返ると、局所的な

    ブラウザレンダリング入門〜知ることで見える世界〜 - Qiita
  • step by stepで始めるwebpack - Qiita

    webpack1系の記事です。 1→2への移行ガイドを見る限り破壊的な変更点はそんなにありませんが、preLoadersやpostLoadersがなくなっていたり、差が出ていますのでご注意ください。 https://webpack.js.org/guides/migrating/ webpackを手を動かしつつ学べる初学者向け資料を作成しました。 公式のチュートリアルもあるのですが、webpackが使用されているOSSのボイラープレートを見る限り、世の中の使われ方に沿ってないかも?と思い書きました。 これから始める人の手助けになれば幸いです。 また最終形のソースをupしてあるので詰まったら見てください。 webpackとは webpack で始めるイマドキのフロントエンド開発の説明が良かったので引用させていただきます。m(_ _)m webpack は WebApp に必要なリソースの依

    step by stepで始めるwebpack - Qiita
  • Webブラウザで高速な演算を可能にする低水準言語asm.jsと、WebAssembly詳解ーJavaScript が動く仕組み

    Webブラウザで高速な演算を可能にする低水準言語asm.jsと、WebAssembly詳解ーJavaScript が動く仕組み 清水智公(Mozilla) Webブラウザの上で動作するアプリを書くための言語、といえば何が想起されるでしょうか。Flash、Sliverlight、Java、さまざまな言語が利用されてきましたが、やはり今のメインストリームはJavaScriptでしょう。 JavaScriptはさまざまな言語の特徴を併せ持つ動的言語で、Web技術の発展とAPIの整備の結果、Virtual Reality(VR)や画像認識、DAW(Desktop Audio Workstation)といった、少し前まではネイティブでの実装しかありえなかった種類のアプリケーションもWebブラウザをランタイムとするJavaScripで実装されるようになってきました。 そのようなアプリの代表例がゲーム

    Webブラウザで高速な演算を可能にする低水準言語asm.jsと、WebAssembly詳解ーJavaScript が動く仕組み
  • さいきょうの二重サブミット対策 - Qiita

    この記事はシステムエンジニア Advent Calendar 2015 - Qiitaの記事です。 弊社アーキ部で@kawasimaさんに教えてもらったさいきょうの二重サブミット対策について書いていきます! 二重サブミットが発生するケース 不正な更新リクエストが発生するケースとして、以下のものが考えられます。 サブミットボタンをダブルクリックする 戻るボタンで戻って、再度保存ボタンを押す 完了ページでブラウザリロードする CSRF攻撃による不正な更新リクエスト 1. サブミットボタンをダブルクリックする 確定ボタンをダブルクリックすることによって、ユーザが意図していないリクエストが発生してしまうケース。 2. 戻るボタンで戻って、再度保存ボタンを押す 処理完了画面から戻るボタンで前の画面に遷移し、再び確定ボタンを押すケース。 来は入力➡︎確認➡︎完了の画面遷移が適切だが、その画面遷移にな

    さいきょうの二重サブミット対策 - Qiita
  • 【翻訳】リッチな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氏が見えるので、そこで詳しく聞いてみるのもいいのではないでしょうか。

    【翻訳】リッチなWebアプリケーションのための7つの原則 - from scratch
  • Railsが時代に合わなくなってきた - Qiita

    Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 追記 RailsでJS辛い問題に関しての結論:http://qiita.com/kaiinui@github/items/dad6180f1910c6a4bfd5 -- 近年、(1) Web/App両対応が増えてきたこと、(2) WebでもJSを多用するようになったこと、の二つがあり、以下の点でRailsが微妙になっている。 ViewのJavascriptRailsから独立している API層のサポートが微妙 最初に書いておきますが、特に決定的な解決策もなく、辛いから今後解消されてほしいよね、な話です。 ViewのJavascript

    Railsが時代に合わなくなってきた - Qiita
  • ノンプログラマーのためのjQuery入門

    kanazawa.js v1.0 〜JavaScriptコトハジメ〜(2011年2月5日開催)で使用したスライドです。

    ノンプログラマーのためのjQuery入門
  • Web ブラウザで動くとは思えない、凄い WebGL デモ・アプリ 65 個 - WebOS Goodies

    今月の 22 日に GTUG Girls のイベントで WebGL (Three.js) のハンズオンをやります。内容は初心者向けで、簡単な物体を表示してみたりして Three.js の基礎を学ぼうというものです。女性限定ですが、興味のある方はぜひご参加ください。 【告知】第10回GTUG Girls Meetup 「キラリとひかるモノ作り!WebGL(Three.js)入門編」 募集開始! で、日は宣伝も兼ねて WebGL を使ったデモやアプリケーションのまとめエントリを書いてみました。いずれも Web ブラウザで動くとは思えないほどインパクトのあるものばかり。 WebGL 対応のブラウザで(Chrome か Firefox の最新版が無難です)、おもいっきり堪能しちゃってください! 長編デモ 音楽に合わせてインパクトのある映像を展開していく、ちょっとしたストーリー性のあるデモなどを集

  • なんだこれ!!「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ!! | ゴリミー

    今のウェブデザインの流行りは「レスポンシブ・ウェブデザイン」! 昨日、とあるアプリの紹介ページについて話し合っていたのだが、株式会社LIGのデザイナブログに書いてあった「必読!5分でわかる流行のレスポンシブWebデザインまとめ」に載っていた「NHKスタジオパーク」のレスポンシブ・ウェブデザインがイケイケすぎて感動したので、紹介する!これは当にすごい!! まず普通に表示するとこんな感じ。よくある3コラムベースのウェブサイト。 少し幅を狭めると、下にあったコンテンツが右サイドバーに移動し、右サイドバーにあったコンテンツが下に移動した。 さらに狭めてみると、右のサイドバーが完全に無くなった。 さらに狭めると今度は左のサイドバーが消えた。 ブラウザの限界まで狭めてみると、各パーツの幅も狭まってこのような形に落ち着いた。 これを試している時、各要素の動きがあまりにも滑らかでものすごく感動した。皆さ

    なんだこれ!!「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ!! | ゴリミー
  • Home | Millstream CMS

    Design and Development Millstream create bespoke web solutions with extensive functionality built on our Millstream CMS platform. Take your content to the web with our simple to use publishing tools. Sample projects

    Home | Millstream CMS
  • JavaScript でリアルタイム 3DCG を実現する WebGL の使い方 - WebOS Goodies

    先日、ちょっとした思いつきで WebKit の Nightly Build をインストールし、 WebGL を試してみました。 WebGL というのは現在策定中の新しい規格で、 JavaScript を使って格的な 3DCG を実現する API です。同じ目的を持つものとして Google の O3D がありますが、 WebGL は OpenGL ES を管理している Khronos グループを中心に Google, Mozilla, Opera, NVIDIA, AMD といった企業が参画しており、標準化という面ではリードしています。 まだ策定中の規格なので今後変化するかもしれませんが(WebGL 1.0 が正式リリースされました)、少なくとも現状の WebKit の実装については使い方がわかったので、日はそれをご紹介します。 WebGL は Web 上の最も重要なグラフィックス A

  • 1