prasm prasmっていうブログだよ

最近捗ったweb系のあれこれ

自分用のメモです。

必要最低限かつモダンなブログくらいなら、以下のリソースでやれそうです。

だいたいこのブログに使ってるやつだけど、多分次も使うのでメモ。

jquery

サイドバーとか固定系が瞬時に実装できる

ブログのサイドバーで捗るヤツ。ブログ以外でも親要素の中で自由自在に付いてくるし、実装は鬼簡単だし、助かるヤツ。

Sticky-Kit

上スクロールで固定解除とか自力で実装しようとすると頭痛いけど、これなら簡単。

jQueryプラグイン「Sticky-Kit」のコツ – Qiita

固定系はコレ。

ライトボックスはこれかな

画像クリックで拡大するやつ。

DSC00986

このブログでも使ってますが、調子いいです。ふわっとモーダルがでるのがまどろっこしいのと、ビューンッて元の位置から拡大されるのが好きです。

fat/zoom.js

スクロールで格納されるのもシンプルで良いですね。

Card

ソースコードの表示を軽量で実装

highlight.js

ソースコードをハイライトする軽量ライブラリ、Highlight.jsの使い方

WordPressのプラグインは軒並み重いんだよなぁ。

Gist貼り付けるか、Codepenとかだけでもいける気はするけど、マークダウンでコードだけさっくり紹介とかで便利。

レスポンシブでフリック対応のカルーセル

カルーセルは回転木馬。

slick – the last carousel you’ll ever need

[JS]レスポンシブにも対応した使いやすいカルーセルを探す時はこのスクリプトがオススメ! -slick | コリス

このブログでは関連記事表示で実装。

レスポンシブで、フリック対応で、実装が楽なのでいうことないです。

コンテンツスライダーならば

画像だけスライドするのは味気ないならば、コンテンツをスライド。

Swiper

こっちもレスポンシブで、フリック対応。

Swiperという軽量でレスポンシブ対応でスワイプ切り替えもできちゃうスライダー | NeGiMeMo.net

何でも放り込めて、便利。

スポンサーリンク

アイキャッチとかの画像の色を取得なら

画像からプライマリカラーを取得する jQuery プラグインを作りました | rythgs.co

ちょっと画像によっては取り漏れもあるけども、なんせ簡単に取れるので。

apple musicっぽいかんじでアルバムジャケとかアー写から色を抜くようなヘッダーやタイトル周りが簡単に実装できますね。

ダミー画像

bracketsの拡張

joepenzo/DEVimg-for-Brackets

ブラケッツからダミーの画像コードが作成可能。ただ、ちょっと画像がコミカルなのでクライアントワークで使うと怒られる。

webサービス

Placehold.it – Quick and simple image placeholders

超絶無難なダミー画像がサクッとつくれて便利。

jsで差し込み

上のダミーはオフラインだと当たり前のようにリンクが切れるので、オフラインでも出るヤツ。

Holder.js – client side image placeholders

photoshopとか起動しなくてよくて、開発も捗るというもの。色やテキストも自由自在。

webサービス

外部リンク紹介に「Embedly」

Cards are a clean, responsive, and shareable way to display any embed. | Embedly

iframe内のわりと邪魔な影も消えて、使用にためらいがなくなりました。

レスポンシブでデバイスに沿った表示をしてくれるし、画像はデカいしなかなか便利。

公式の画面の下の方にブックマークレットがあります。

はてなブログカードをやめて Embedly に移行してもいいんじゃないか。公式ボタンもあるし。ブックマークレットも作った。

色味をパクる

BrandColors | Official color codes for the world’s biggest brands

普通に綺麗な色が並んでいるので、拝借。メインに合うサブないろを探すのが捗る。

フレームワーク

いや、そこまでごっついフレームワークいらんから

Pure

なんか相性がいいというか、ちょうど良くてつかっちゃうPure。

gridとtableとbase(Normalize)くらいだけ拝借。

faundationとかbootstrapとか使ったことないけど、こんくらいで十分。

Bootstrap · The world's most popular mobile-first and responsive front-end framework.

Foundation | The Most Advanced Responsive Front-end Framework from ZURB

たいていweb屋さんは自分のオレオレ開発テーマ持ってるよね。

最終的にはベタやけども

Underscores

automatic先生のスターターテーマで、乗り切る。安心感、ある。

瞬間もうマテリアルできてる

Material Design Lite

ここまで簡単だと、もうすることないよね。

分割してコンポーネントをパーツパーツで使いたいけど、超特急作業の時にはこれ使うよね。

アプリ

メニューバーからアイコン探せる!

Icons8 App: search 15,000 icons and import to Photoshop or Xcode | Icons8

これは革命的。それっぽいアイコンがメニューバーでさくっと探して、イラレやphotoshopにドラッグでポンですよ。

革命的。いちいちそれっぽいのを素材やwebで探す手間はもうなくなりました。eps使い放題を買ったらsvg-gulpで自前のアイコン作りまくりで夢が広がる。

でもなぁ、さすがにちょっと高いので、トレースに励みます。

意外といっぱいあったなぁ

とりあえずいろいろ探し疲れたので、上にあるヤツをしばらく使っていこうかとは思っています。

上のヤツは基本的に実装すごい楽なんで、オススメです。では。

次回の記事は
「ウタマロ石けんは常に2個くらいストックしてるよな?」
読みのがしなくッ!