速習テンプレートSlim(HTML作成編) - Qiita
テンプレートエンジンSlimを使ってスマートにHTMLを作成する 昨日うちの事務所で開催したagatsuma.survive#02の中でSlimの説明が思ったよりも好評だったので改めてまとめてみます。 このエントリでは Slimを使ってHTMLを作成する ことだけを目的としているため、動的にSlimでゴニョゴニョするような話は出て来ません。HTMLの代替にSlimを使う、といった主旨の内容です。プログラムの話も出て来ませんが、残念ながらコマンドラインを少し使います。 Slim とは? 拡張子は .slim view の構文を本質的な部品まで減らすことを目指したテンプレート言語 Ruby製のテンプレートエンジン 高速, 軽量 インデント重要 用途 Railsプロジェクトのテンプレート Sinatra(Padorino)のテンプレート HTMLの代替(個人的には) SlimでHTMLを作成する
superagentとaxiosの使い分け - Qiita
モバイルファクトリー Advent Calendar一日目担当の@nekobatoです。 フロントエンドなので、ナウなフロントエンドっぽいライブラリ紹介でもします。 はじめに 周りに「フロントエンドでXHRライブラリ何使ってる？」と聞くと フレームワークに生えてるのを使ってるよ（Angularなど） ←一番多い superagentだよ ←二番目に多い require('http')だよ ←！？ JQueryだよ ←最近少ない 素のXHRだよ ←マジかよ 程度に大別される印象です。 私が普段使っているVue.jsだと、request周りは標準で生えていないのでsuperagentを使うことが多いのですが、最近場面によってはaxiosを使うこともあったりします。 axiosとは、Angularの$http serviceに影響を受けたXHRライブラリで、書き方が似たようなものになっています。
JS軽量クライアントサイドルーティングライブラリいろいろ - Qiita
JSの軽量クライアントサイドルーティングライブラリをなんとなくまとめました。 ここで述べるルーティングライブラリとは、文字列、または正規表現によって定義したパスに対してコールバックをマッピングできるライブラリを指します。また、ルーティング機能のみを提供するものを中心として紹介します。backbone.js等のフレームワークは省いています。 kazitori.js Example class Router extends Kazitori beforeAnytime:["testBefore"] befores: '/<int:id>':['testShow'] routes : '/':'index' '/<int:id>':'show' '/<string:username>/<int:id>':'post' index:()-> # console.log "index" $('.cu
vue.jsとpage.jsの組み合わせでルーティングをするときのサンプル - Qiita
はじめに 実用的なSPAの開発プロジェクトでvue.jsを採用するならば，何かしらのルーティングライブラリを一緒に使うことになるかと思います。 今回，シンプルなルーティングライブラリであるpage.jsを試したみたところ，page.js側で受け取ったパラメータをコンポーネントに渡す方法に少し悩んだので，こんな書き方はどうでしょう？という意味でサンプルコードを紹介します。 前提コード homeとexampleという2つのコンポーネントがあり，それぞれ/というパスと/example/:qというパスに対応しています。exampleの方はパラメータqを受け取り，パラメータに応じたコンテンツを表示します。 <script src="//cdnjs.cloudflare.com/ajax/libs/vue/0.11.0/vue.min.js"></script> <script src="//cdn.
z-index再入門 | 第1回 z-indexの仕組み
次のようなケースでは、冒頭のサンプルのような意図しない重なりになる可能性が高いため注意が必要です。 positionプロパティの値をrelative、absoluteにし、かつz-indexの値をauto以外の整数値にしたとき positionプロパティの値をfixed、stickyにしたとき なぜなら、上記の条件下では、スタック文脈というものが形成されるからです。次に、スタック文脈を解説します。 スタック文脈とスタックレベル スタック文脈（stacking contexts）、スタックレベル（stack level）という概念は、z-indexを扱う上でとても重要なものです。 スタック文脈 スタック文脈とは、ある条件を満たした要素によって形成される階層構造（文脈）のことです。 スタック文脈を形成する条件は前述した通りですが、例えば、position: absoluteとz-indexに整
YouTube動画を音量ミュートでWEBサイトに埋め込む方法
YouTube動画をWEBサイトやブログに埋め込むには、特に複雑な作業は必要ありません。 動画の下に表示されている共有から埋め込みコードを選択して、吐き出されるコードを表示させたい場所に貼り付ければOKです。 埋め込みコードは、サイズも自由に設定できますし、用意されたチェックボックスを使って、「動画が終わったら関連動画を表示する」「プレーヤーのコントロールを表示する」「動画のタイトルとプレーヤーの操作を表示する」「プライバシー強化モードを有効にする」の項目を設定することができます。 また、「自動的に動画を再生」や「繰り返し再生」、「コントロールバーとシークバーの色の変更」など細かいカスタマイズも埋め込みコードを追加修正すれば可能です。 詳しくは下記の情報を参考にどうぞ。 しかし、埋め込みコードでは「自動的に動画を再生」とセットで使うケースが多い動画再生時に音声をミュートさせる設定ができませ
もうはじめよう、ES6~ECMAScript6の基本構文まとめ(JavaScript)~ - Qiita
JavaScriptにおける、ECMAScript6についてのまとめの前編です。またこの記事では、実践で使える情報のみまとめています。網羅的にすべてをまとめている情報ではありません。 基本構文の続き、アロー関数やPromiseはこちらの記事で。 ECMAScript6のアロー関数とPromiseまとめ - JavaScript 技術情報のみつぶやくアカウント作成しました。ECMAScript6などの最新情報も追っていきます。 Twitter: @takeharumikami RSSはこちら Feedly: Feedlyをフォロー RSS: http://qiita.com/takeharu/feed letによるブロックスコープ JavaScriptの他言語との違いで、悩めるポイントとしてスコープの範囲があります。ECMAscript6から、let命令により関数スコープではなく、ブロックス
【Sassを覚えよう！Vol.4】Sassの基本的な記述方法
前回のエントリーで、無事にSassが動作する環境が整ったかと思います。 今回は、いよいよ通常のCSSでは出来なかったSassの記述（Sass記法）に関してです！ まずは基本って感じですが、これだけでも十分Sassを利用することでコーディングの効率が上がる！って思ってもらえれば幸いです＞＜ 記法の前に Sass記法の前に、SassはCSSの「完全な上位互換」と言えるので、CSSのルールはすべてそのまま利用することが出来ます。 その為、cssファイルをそのまま拡張子だけ .scssに変更して変換（コンパイル）し直すみたいな事も可能です。（圧縮できる程度のメリットしか有りませんが） 軽く余談ですが、このCSSとの完全な互換性が従来のSassには無かったのですが、現行のバージョンではそれが出来るので、余計な事を覚える必要がなく、Sassの機能を今までのCSSの知識にプラスアルファとして使えるんです
意外と知らない！疑似要素と疑似クラスでできること | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのはるえです。 突然ですが、疑似要素と疑似クラスってありますよね。 私がCSSを覚えたてのときは「は？何これ」って感じで、得体の知れないものを見るような目で使ってました。 「この2つって何が違うの？」「どれが疑似要素で疑似クラス？」「どういうときに使うの？」と何かと敬遠しがちな人も多いと思います。 ですが、この2つを使うことでできることがぐんと広がるので、今では恐縮しながらありがたく使わせていただいております。 疑似要素とは 疑似要素とは、要素内の特定の文字や行に対してスタイルを指定したりするものです。 よく使われる疑似要素 :before{} :after{} :first-letter{} 疑似要素の中でも特に「:before」と「:after」を極めると、CSSだけのデザインの表現幅が一気に広がります。 例えば、LIGブログでも使用している「blockquote
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - axios/axios: Promise based HTTP client for the browser and node.js
Youtube 動画の埋め込みをCSSでレスポンシブ対応する方法
