くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

front-end

【小ネタ】webpackでhtmlも扱う

webpackでhtmlも出力したかったので、その時のメモ。 html-webpack-pluginとhtml-loaderを使えばOK ディレクトリ構成はこんな感じ。 . ├── src │ ├── html │ │ └── index.html │ └── index.js │ └── dist ├── js │ └── main.js └── index.html インストール …

CSSの国旗アイコンライブラリ(flag-icon-css)がよかった。

Webサイト内で、国旗を表示したいなと思ってたら、flag-icon-cssという、いい感じのCSSアイコンがあったので、その時の備忘録。 NPMでインストール $ npm install flag-icon-css 使い方。簡単。 <span class="flag-icon flag-icon-jp"></span> <span class="flag-icon flag-icon-kr"></span> ただ、国旗は標準サイズが決まってないらしく、アスペクト比…

ScrollRevealで簡単JavaScriptアニメーション

スクロールすると表示されるアニメーションとかをやりたかったので、 いろいろ調べたら、ScrollRevealがいい感じだった。その時の備忘録 npmでインストール $ npm install scrollreveal --save スクロールアニメーションの設定 import ScrollReveal from "sc…

Django x jQuery x Ajaxで非同期にファイルをアップロードしてサーバ側で処理をする

前に記事で書いた処理のファイルバージョン。 wannabe-jellyfish.hatenablog.com 見た目的にはこんな感じ。 HTML側 <form id="form" class="form" action="upload_file" method="post" enctype="multipart/form-data"> {% csrf_token %} <div class="input-group"> <input type="text" class="form-control" readonly=""> </div></form>

DjangoとjQueryでAjaxする

最近、フロントエンドもやるようになり、いまさらjQueryでAjaxを使うことに。。 右も左も分からないので、その際の備忘録。 コードはこんなかんじ formで入力を受け付けて、submitの際に、Ajaxでの通信に切り替える感じ 成功するとdiv配下に、帰ってきたHTML…

Webpack+React+BootstrapでWebアプリ

最近、WebpackとかReactとかがイケているらしいので、かじってみたときの備忘録。 環境 $ npm -v 3.3.12 $ node -v v5.4.0 $ uname -o Cygwin $ arch x86_64 プロジェクトの初期化 npm initでpackage.jsonをつくる $ npm init $ tree . sample └── package.j…