コンパイラかく語りき

import { Fun } from 'programming'

Slim

erbファイルをslimで書き換えてみた

タイトルの通り。 Webアプリケーションのデザイン変更をしていて、生のHTMLがあまりに苦痛だったので書き換え。 ちなみに、これが、 こうなった。 圧倒的シンプルさ。わかりやすさ。 slimは書き慣れているんだけど、erbにまつわる記述は初めてだった。 この…

RailsのHTMLテンプレートをslimに変更しました

全てはここに。 qiita.com gemインストール Gemfile追記 bundle update & bundle install 最後に、設定をいじる。 application.rbに以下の1行を追記。 これで準備完了。 これ以降、rails generateするとerbではなくslimファイルが作成される模様。 さすがRa…

slimで変数内の文字列を展開する

slimで初めて変数を使ったのでメモ。 Railsでhtml.erbからhtml.slimへの書き換えを行っていました。 そこでこんな1文がありました。 書き換えに苦戦したのは、class名の部分。 class="alert alert-<%= key %>" ※Bootstrapを使っています。 ここでクラス名を…

個人サイト作成④ チャット風ボックスの実装と、テキストコンテンツの挿入

chuckです。 引き続き、個人サイトを作成していきます。 前回までで、基本的な動作は実装できました。 今後微調整はあるかと思いますが、とりあえずスクリプトはいったん休止です。 chuckwebtips.hatenablog.com 今日はHTML側をいじって、肝心のコンテンツを…

個人サイト作成③ スワイプ追随イベントを実装

chuckです。 前回はスワイプ動作により、ページをめくる機能ができました。 chuckwebtips.hatenablog.com 今回は、スワイプに追随して、前・次のページも動くようにしたいと思います。 現状↓ http://chuck0523.github.io/front-end-coding/rotateWindow/rota…

個人サイト作成① スワイプ動作を実装…できなかった

chuckです。 自分のための個人サイトを作成しているので、作成過程を記録します。 ちなみに、現状↓ http://chuck0523.github.io/front-end-coding/rotateWindow/rotateWindow.html まあ、クリックイベントならスライドできます。 ここにスワイプ動作も付け加…

【HTML】画像を動画っぽく表現してみる

chuckです。 オシャレなサイトを発見しました。こちらです。 www.startup50.jp こちらのTOPページの背景画像が動いている(ように見える)んですよね。 面白いなーと思ったので、自分なりに再現してみます。

slim初心者のslimメモ2点

chuckです。slimにまだまだ慣れていなくて、新たに気づいたことを書きます。

slimで外部ファイル(CSS, JS)をインクルードする方法

どうも!chuckです。 新しくフロントエンド系の制作を始めました。せっかくなので、Slimを使ってみたいと思います。 chuckwebtips.hatenablog.com slimについてはこちらで導入や、基本的な使い方について書きました。 それでも、いざ使い始めてみると分から…

HTMLが高速に記述できると噂のslimを使ってみる

どうも!chuckです。 いきなり私事ですが、最近は転職に興味アリアリですw 求人を眺めているとやっぱりフロントエンドエンジニアになりたいな!と思う次第です。 そこで!今回はHTMLを高速で記述できると噂のslimを使ってみたいと思います。