はてなブックマーク

2017年版、オレオレフロントエンド開発環境です。 前提条件 ここでいうフロントエンド開発とは、ペライチ、もしくは数ページから数十ページのWebサイトのこと サーバサイドとやりとりなどはあまりなく、ランディングページやキャンペーンサイト、コーポレートサイトをよく実装する 構成 まず、ざっくりと構成です。 HTMLはEJSで書いてコンパイル CSSはSass(SCSS記法)で書いてコンパイル MixinライブラリはBourbon JSはES2015で書いてBabelでコンパイル Browserifyでバンドルする タスクランナーはGulp パッケージマネージャはnpm 省略記法に疲れた つい最近まで、HTMLはPug(Jade)で、CSSはStylusで書いてました。省略記法で書ける楽でのええわ〜、省略記法で書いてる俺カッコいい！と思ってましたが、なんだかだんだん疲れてきた。 JadeとSt

初投稿です。 先日、僕のサークルのWebサイトをリニューアルしました。サイトは更新がかんたんなのでTumblrで作っています。リニューアル前はTumblr APIを使ってReactで作っていましたが、今回はVue.jsを使って作り直しました。そのときのもろもろをメモしておきます。 作ったサイト Dancng Girl. [2017.9.8 追記] 結局↑のサイトはTumblrをやめてWordPress(WP REST API) + Vue.jsに移行しました。 中の人について Webデザイナー。 なぜTumblr API + Vue.jsなのか Tumblrのテーマタグは自由度が低い Tumblrはテーマタグが用意されていて、テーマカスタマイズ画面でHTMLを編集し、テーマタグを埋め込んだりすることでカスタマイズが可能です。 Creating a custom HTML theme | T

Expressで簡単なプロダクトを作る時のオレオレ最小構成です。 要件 サーバーサイドもクライアントサイドもES2015(ES6)で書く サーバーサイドはNode.jsがv4以上だとES2015で書けるはず importなどが使えないと知ったので、babel-nodeを使います クライアントサイドJSはBrowserify + Babelifyでコンパイルする 開発時はWatchifyする ビルド時はUglifyする CSSはStylusで書く StylusはExpressのMiddlewareで都度コンパイルする ライブラリはkouto-swissを使う ベンダープレフィックスはautoprefixerでつける ViewはJadeで書く サーバーからJadeに変数を渡したりする Gulpなどのタスクランナーは使わない $ npm run xxxでやる 画像のSprite化とかするならGu

Sketch、便利ですよね。 まぁ僕はPhotoshopの方が好きで、普段はできるだけフォトショを使うんですけど。 でもSketchを使わなければならない局面(案件)、ありますよね。めっちゃ量産が必要とか、なんかよく分からんけど「これからはSketchでしょ！」と言われて、とか…。 本記事はSketchを使うとイライラしてしょうがない、みたいな人向けの、設定方法や使い方のメモです。 ちなみに、本記事執筆時点のSketchのバージョンは3.8.2です。 まず設定 まずはSketch Toolboxをインストールする Sketch Toolbox - A super simple plugin manager for Sketch Sketch Toolboxは、Sketchのプラグインを一括管理できるMacアプリです。プラグインのインストールやアンインストールが簡単にできるようになるので、オ

最近個人的にProcessingにハマってます。面白いですよね、ジェネラティブ・アート。 作ったスケッチはやっぱりGIFアニメで保存して、サイトなどに載せたいですよね。スケッチをGIFアニメにできる「gifAnimation」というライブラリがあります。Processing 2以下までにしか対応してないと思ってたら、サラッとProcessing 3以上対応ver.がありました。 ダウンロードとインストール extrapixel/gif-animation at 3.0 3.0ブランチにて「Download ZIP」からファイル一式をダウンロードします Zipを解凍して、gifAnimationフォルダを、~/Documents/Processing/libraries/にコピーします 完了 GIFアニメの作成方法 // gifAnimationライブラリを読み込む import gifAn

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?