TypeScriptのtsdがオワコンになったのでtypingsを使ってみた

photo by Daniel Foster

TypeScriptでの型定義管理で使っていたtsdがオワコンになった。
代わりに typings を使ってくれとのこと。

▶ Deprecate TSD · Issue #269 · DefinitelyTyped/tsd

ということで、typingsを使ってみた。

開発環境

• Mac OS X Yosemite
• npm 3.3.12
• typings 0.6.8

詳しいTypeScriptの開発環境構築は以下のエントリを参照してほしい。

エラー箇所など指定した要素にスクロールで移動する

photo by mollyali

縦長Webページの入力フォームなどで、バリデーション後にエラーを表示したいことがある。その方法はいくつもあるが、今回はエラー箇所にスクロールで移動する方法を実装する。

※サンプルではjQueryを使用しているが、使わなくても対応可能（アニメーションが面倒だけど）

【JavaScript】jquery.xdomainajax.jsで簡単スクレイピング

スクレイピングとは、ウェブサイトから情報を抽出する技術のこと。
簡単に言えば、とあるサイトのHTMLを取得できるってこと。

jQueryだけでスクレイピング

これを実現するためには、ajaxを使う。

var url = 'http://kuroeveryday.blogspot.com/';

$.ajax(url, {
  crossDomain: true,
  success    : function (res) {
    console.log(res);
  }
});

ただしこのままでは以下のようなエラーがでる。

XMLHttpRequest cannot load http://kuroeveryday.blogspot.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

アクセス先のサーバからのレスポンスに Access-Control-Allow-Origin が含まれていないとアクセスすることができないからだ。

GitHubなどに公開されているコードをscriptタグで読み込む方法

Photo credit: kana hata via Visual Hunt / CC BY-NC-ND

jsFiddleやjsbin、CodePenといったサービスやローカル環境で実験用にコードを書くことがある。実験用なのでなるべく労力をかけず、なるべく1ファイルで完結させたい。

GitHubで公開されているコードを直接scriptタグで読み込めたらいいが、Raw（https://raw.githubusercontent.com）のURLを読み込もうとしてもうまくいかない。

Github is not a CDN, using it as such will cause issues with loading the file. Do you still wish to it?

良い方法はないかとググったら RawGit というsushiのアイコンが目立つサービスをみつけた。

::beforeや::afterのcontentプロパティを動的に変更する方法

Elementの前後にコンテンツを挿入するために擬似要素がある。
とりあえず擬似要素のサンプル。どちらも「擬似テスト要素」と表示される。

<style>
  .pseudo::before {
    content: "擬似";
    font-size: 50%;
  }
  .pseudo::after {
    content: "要素";
    font-size: 80%;
  }
</style>

<!-- 擬似要素を使う -->
<p class="pseudo">テスト</p>

<!-- 擬似要素を使わない -->
<p><span class="before">擬似</span>テスト<span class="after">要素</span></p>

擬似要素を使うことで、HTMLの可読性が向上していることがわかるだろう。
他にもいろんなことができるが、本題に逸れるため省略する。