2018/08/17

pug(Jade)でエスケープせずhtmlタグやscriptをそのまま表示させる方法

pug(旧Jade)でhtmlやscript、styleのサンプルコードを表示させたい場合、<>などをエスケープする必要がある。

たとえば以下のような感じだ。

pre
  code
    | &lt;script&gt;
    | alert(&#039;Hello&#039;);
    | &lt;/script&gt;

これではサンプルコードが変わるたびにいちいちエスケープしてから書き換えなければならないし、そもそもヒューマンリーダブルでない。

ということで、エスケープせずにそのままサンプルコードを貼る方法をまとめる。

Labels: HTML/CSS , JavaScript

JavaScriptしか触れないフロントエンドエンジニアになりかけていたので、CSSの練習も兼ねて、HTML5+CSS3+JavaScriptでアナログ時計を作ろうと思う。
完成図は以下のような感じだ。

Labels: CanvasAPI , JavaScript

シミュレーションゲームやリアルタイムストラテジーゲーム（RTS）でよくある「クリックした位置までキャラクタを移動させる」動作をJavaScript+Canvas APIで実装する。

イメージは以下のような感じ。

Labels: CanvasAPI , HTML/CSS , JavaScript

この記事は、2018年6月29日にさくらインターネットで行われた「さくらの勉強会フロントエンドナイト」で発表した内容を文字起こししたものの「後編」です。

※ [ディレクターズ・カット版]と書かれたスライドが、この記事を公開するにあたり追加したものです。
※ この記事には多くの画像が貼れれているため、読み込みに時間がかかる可能性があります

Labels: CanvasAPI , HTML/CSS , JavaScript

この記事は、2018年6月29日にさくらインターネットで行われた「さくらの勉強会フロントエンドナイト」で発表した内容を文字起こししたものの「前編」です。