Tutorial: Getting Started With Webpack Applications in WebStorm | The WebStorm Blog
IDEs AppCode CLion DataGrip DataSpell Fleet GoLand IntelliJ IDEA PhpStorm PyCharm RustRover Rider RubyMine WebStorm Plugins & Services Big Data Tools Code With Me Quality Assurance JetBrains Platform Scala Toolbox App Writerside JetBrains AI Grazie Team Tools Datalore Space TeamCity Upsource YouTrack Hub Qodana .NET & Visual Studio .NET Tools ReSharper C++ Languages & Frameworks Kotlin Ktor MPS Am
『Ameba OwndのSEOを支える技術 for AngularJS』
こんにちは、サーバーサイドのエンジニアをやっているoinumeです。今回は昨年8月ぐらいから作っていたAmeba Owndというサービスで行ったSEO対策について紹介します。 AmebaOwndって？ブログ機能を備えたスタイリッシュなデザインのWebサイトを簡単に作成できるサービスです。 香川真司オフィシャルサイトスターバックス コーヒー オフィシャルブログなどのサイトがAmeba Owndを利用して作られています。 アーキテクチャユーザーさんがWebブラウザでアクセスするページについてはAngularJS + REST API(Nginx + Go)で作られています。一方でGooglebotなどのクローラーからのアクセスの場合は、受けたリクエストをNginxがPrerender CacheというシステムにProxyして、このPrerender CacheからHTMLを返すようにしています
ReactをjQueryの数行に要約する | POSTD
「Reactが素晴らしい理由は、UIをアプリケーションの状態の純粋関数にできるからだ」いうような話を聞いたことがあるでしょう。しかしそれだけではなく、不変性と仮装DOMを利用して動作するということも聞きますよね。その上、保存、読み込み、取り消し、それにタイムトラベル・デバッグと呼ばれるすごい機能まで自由に手に入れられる。でも知っていますか？ Reactの核となるアイデアを利用し、その恩恵に預かるのにこれらのことは必要ありません。jQueryの数行にしてお見せします。 <span id="colored-counter">0</span> <input id="color"></input> <button id="inc"></button> <script> $('#color').on('keyup', function () { $('#colored-counter').css('
Angularが嫌い - mizchi's blog
僕は本当にAngularが嫌いで、もはや許せないレベルに達していて、今ではもう本当に使いたくない。 イカ理由。 APIがほんっっっっっとうに糞 趣味の問題といえばそうでもあるが僕は糞だと思う 実装が黒魔術 良識あるJSエンジニアなら Function.prototype.toString() しない 実際に一部のクロージャが破壊されてて挙動が直感に反する DirtyCheckの実装、表面的にもDirtyな挙動として現れるのでデータバインドとして何も嬉しくない Googleだから許される、みたいなコミュニティの驕りが本当に嫌 Angularの都合だけでChromeでObject.observeを前倒しするのやめろ Angularの内部モジュール同士が密結合 DI, module, factory, それぞれ大きなテーマなのに密結合 使いはじめるとAngularをやめることが困難 パフォーマン
Railsが時代に合わなくなってきた - Qiita
追記 RailsでJS辛い問題に関しての結論：http://qiita.com/kaiinui@github/items/dad6180f1910c6a4bfd5 -- 近年、(1) Web/App両対応が増えてきたこと、(2) WebでもJSを多用するようになったこと、の二つがあり、以下の点でRailsが微妙になっている。 ViewのJavascriptがRailsから独立している API層のサポートが微妙 最初に書いておきますが、特に決定的な解決策もなく、辛いから今後解消されてほしいよね、な話です。 ViewのJavascriptがRailsから独立している Railsはとても堅牢。 モデル、コントローラ、ルーティングと、変にいじらない限りはほとんどテストが要らない。 必要なのは、モデルに新たにpublicメソッドを付けたときくらいだろう。 実際、バックエンドはそうそうバグが出ない。
Web フロントエンド開発用パッケージマネージャ component について
Takuto Wada @t_wada TJ が component を開発するにあたっての所信表明エントリ。なぜ npm や bower や browserify とは別のものを開発することにしたか。 / “Components - TJ Holowaychuk” htn.to/713F39
なぜクライアントJavaScriptの単体テストを書くのが難しいか、考えてみた - mizchi's blog
ってsinonのスタブ漏れを探しながら何度目かわからない感じにキレてた。 とにかく仕事でJSのテスト書くのが辛いので考えてみる。比較的JSのテストに慣れてる自分ですら辛いのだから、世界はもっと辛いに間違いない。サーバーサイドのnode.jsの話ではない。 JavaScriptで完結しない 構造がHTMLの構造と密結合している。装飾や位置、表示/非表示はCSSによって制御されている。 クライアントJSはHTMLと密結合しており、CSSからビューは影響を受ける。それらがネットワークの結果を受け非同期に振る舞いを帰る。その最終的な値を取得するのが難しい。 もちろんサーバーサイドだってDBやネットワークという外部リソースを扱うが、モックの手法が確立しているし、局所的な複雑度は、JSの方がはるかに多い。 言語仕様が貧弱 mochaやjsmineはrspecを真似てるけど、本質的にJavaScript
WEBアクセス解析ツールMixpanelが簡単なのに凄い。
Mixpanel Mixpanelは、Google Analyticsと同じく、WEBサイトのアクセス解析ツールです。しかしツールの性質は、Google Analyticsとは大きく違います。Google AnalyticsがWEBサイトのあらゆるアクセスをガンガン突っ込んで大量のデータをなんやかんやしようとするのに対して、Mixpanelは比較的数の少ない特定のイベントなどに絞って使います。 全部を丸ごと見ようとするのではなく、特定の一部分をとにかく詳しく解析しよう、というイメージです。 導入はものすごく簡単 登録は名前とメールアドレスとパスワードだけ。簡単です。 Google Analytics同様に、JavaScriptが発行されるので、自分のサイトに埋め込みます。JavaScriptなので、トークンが見えてしまっていて、自分以外の人でも解析データ投げ込めるような気がします。 (fu
jqコマンドが実は高性能すぎてビビッた話
GWが始まりましたが、鎌倉のGWは観光客多すぎて逆に住民はげんなりして外に出なくなる感じです。とはいえ路地まで観光客が攻め込んでくることは少ないので、路地を散歩する分には天気がよくていい感じですね。ちなみに人力車のおにーさんはそういう味のある路地を知り尽くしているので人力車で移動するのはそこそこオススメです(ぼくは乗ったことないけど「こんなところも通るんだ!」ってところで見かけたりします)。 さて、jqというコマンドをご存じでしょうか。 jq jq is a lightweight and flexible command-line JSON processor. と書いてあるとおり、コマンドラインでJSONを扱うことができるコマンドです。で、今まさに仕事で巨大JSONと戦うことが多く、このコマンドが大活躍です。 とはいえ、ぼくの使い方としては「巨大JSONをキレイに整形して表示する」とい
JavaScript でカリー化、再び: Days on the Moon
以前、「JavaScript で引数束縛」において関数のカリー化を試みました。しかし、そこでカリー化された関数は、そのままでは一度しか部分適用ができず、また、最初の関数呼び出しは必ず部分適用として扱われていました。 function mean3(a, b, c) { return (a + b + c) / 3; } // 「JavaScript で引数束縛」における curry 関数。 var curriedMean3 = curry(mean3); curriedMean3(1)(2, 3); // => 2 curriedMean3(1)(2)(3); // => TypeError: curriedMean3(1)(2) is not a function // そのままでは部分適用を 2 回以上行えない。 // curry(curriedMean3(1))(2)(3) なら大丈夫
constructorとprototype.constructorがわからなくなった - 宇宙野武士は元気にしているか
constructor（プロパティ）とprototype.constructor（プロパティ）は 別物だと思っていたけど、やっぱり同じ物だとおもいつつもやっぱり違うのか？と よくわからなくなってきた。（特に継承とかしようとした場合に） ので少し調べてみた。 （ちなみにSpiderMonkeyをつかって試している） constructorプロパティとは サイ本によると、 オブジェクトの初期化で使用されたコンストラクタ関数を参照する。 とある。 var a = new Array(); a.constructor == Array;//>trueになる 確かに、Arrayオブジェクトでnewした変数aのconstructorプロパティは Arrayになっているようだ。 じゃあ、Arrayのconstructorプロパティってなんだろ？ これで気になったのは、newしてないArrayオブジェクト
JavaScriptでアスペクト指向プログラミング | DevelopersIO
JavascriptでAOP JavaではDIと同時に当たり前になったAOP(アスペクト指向プログラミング)ですが、Javascriptでも行うことができます。 今回紹介するAopJSは、JavascriptでAOPを行うためのライブラリです。 ドキュメントを参考にいろいろとためしてみましょう。 ※ちなみに、AopJSは通常のライブラリとしてだけでなく、JQueryのプラグインとしても提供されています。 環境構築方法 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.7.5 Node.js : v0.10.8 npm : 1.2.23 gitリポジトリからAopJSを取得します。 % mkdir aopjs % cd aopjs % git clone https://github.com/victorcastroamigo/aopjs.git 次のようにindex
javascriptでthisと戯れる — ありえるえりあ
Recent entries Re: Adaで超いい加減HTTPサーバ iwanaga 2010-01-10 javascriptでthisと戯れる iwanaga 2009-11-13 第一回五反田Emacs勉強会のUstream配信 iwanaga 2009-09-29 わかった気になる気になるandroid iwanaga 2009-07-04 Rhinoを組み込む為のイントロダクション iwanaga 2009-02-02 最近のありえるはGoやったり、Closureやったりかっこ良いですね。 このあたりは社内の自称二十代の勉強会で教えて貰えることを期待しつつ、 新人さん向けに開催したjavascript勉強会の小ネタとして、 javascriptのthisについての話をしたのでその内容を載せてみます。 javascriptが本業の方などからしてみれば自明な内容かもしれませんが、
フロントエンドJavaScriptにおける設計とテスト
今日話さないこと JavaScriptの基礎知識、jQueryの導入 気持ちいいUIやUXがうんちゃら CanvasやWebGLを使ったリッチでイケてるゲームの作り方
JSX の進化速度が半端ない - ぐるぐる～
気に入らない所を直して pull request 投げたら、取り入れられたので、8 日前に書いたエントリが過去のものとなっちゃいました。 関数型 以前の JSX では、関数型は function(: int): string のように書く必要がありました。 これはこれでそのまま使えるのですが、新たに (int) -> string という形式にも対応しました。 ちなみに、複数引数はカンマ区切りで (int, boolean) -> string のようになります。 カリー化された関数は、 function(: int): function(: number): string の代わりに (int) -> (number) -> string と書けます。 引数を囲むカッコは、(今のところ) 省略不可能です。 これには 2 つの理由があります。 この機能を追加したとき、JSX のパーサの能力
『JavaScriptで始める関数型プログラミング 1 - 3』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさまこんばんは。 前回に引き続き、平松 @co_sche (co-sche)です。 想定している読者は、JavaScriptの基本的な構文を理解している方JavaScriptで関数を定義・使用したことのある方LLと総称される言語を扱っているが、関数型プログラミングを意識したことのない方です。 はじめに前回は、関数型プログラミング(以下、たまにFP)を学ぶ上で欠かせない、関数の特徴について学びました。 今回は、実務にありがちな例を挙げてFP的なアプローチ方法を見て、FPのメリットを実感してみましょう。 今回のサンプルコードの出力には、console
コンテント・スクリプト | Chrome Extensions API リファレンス
This domain may be for sale!
Twitterがページ表示時間を5分の1に高速化。どのようなテクニックを使ったのか？
Twitterがフロントエンドのアーキテクチャを見直し、Webページの読み込み速度を改善したことをブログで明らかにしています。 新しいアーキテクチャでは、これまでWebブラウザ上でJavaScriptの処理によって行ってきたWebページのレンダリングを見直し、サーバ側でレンダリング済みのHTMLページを送信し表示することにしています。これによってWebページの読み込みから最初のツイートの表示までの時間が大幅に短縮されることになりました。 When we shipped #NewTwitter in September 2010, we built it around a web application architecture that pushed all of the UI rendering and logic to JavaScript running on our users’
JavaScript SDK
2011年07月03日14:12 by oklahomer JavaScript SDK カテゴリドキュメントJS SDK http://developers.facebook.com/docs/reference/javascript/ JavaScript SDKは、全てのGraph APIとDialogへのアクセスをJavaScriptを介して行うことを可能にします。認証やXFBML版のSocial Plugins表示を行うリッチなクライアントサイドの機能を提供します。 JavaScript SDKの大部分の関数はアプリケーションIDを必須としますが、アプリケーション登録することで取得することができます。 使い方の例は、Facebook for Websites とAuthentication guideを参照してください。 JavaScript Testコンソールを用いてJavaS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JSX - 公開から１年を迎えて
