便利なCDNリンク | 鯖缶オープンソースがけ

#はじめに
#機能一覧
#作り出してから確認するところ

#はじめに

今時フルスクラッチでサイトを作成するなんてダサいような気もするけど、そうした順序を踏まないといまだに満足にサイト一つ作れてないので、毎回今までのページから必要なものを検索して再利用するのやめたいので一覧を作っておこうと思う。

#機能一覧

##BootStrap v4.3

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDeliv...

最近ようやく勉強を始めたBootstrap。積極的に使って理解していこうと思う。すでにオワコン臭がすごいけど枯れてるからこそ勉強するには向いてるように思う。

css:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

integrityがあるから毎回取得し直しした方がいいのかな…?

js:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

jQueryが含まれてることに注意。別途用意するならこっちは削除した方がいい。
というか、BootstrapCDNから取得すると*.slim.min.jsなので一部機能がないから変なところでドツボにはまりがち。

##jQuery

jQuery CDN

Worldwide distribution of jQuery releases.

CDNはjQuery公式とGoogleとMicrosoftとあとどっかCDNの専門サイトみたいなところがあった気がする。結局はどれでもいいんだけど面倒なんで公式サイトのでいいかな…

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

##FontAwesome

Get Started instantly With 1,000+ Free Icons | Font Awesome

Get vector icons and social logos on your website with the web's most popular icon set and toolkit. Always open source a...

2019年3月9日現在最新版はv5.7.2
Free版とPro版があるが、リンクはFree/cssの方。使用の際は使用していることを明記し、規約へのリンクをつける（だったはず）
実はjs形式の方が（技術的に）できる範囲が広かったりする。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

このサイト一時期メールアドレスの登録しなきゃいけなかった気がするけどあれはv5へのメーリングリストの登録だったのかな…? 英語読めるようになりたいね。

##Vue v2.x

https://jp.vuejs.org/v2/guide/

Vueはどれだけ有用なのかいまだによくわかってないけど使ってるうちにまあなんかいい感じになっていくのかなと思ってちょこちょこ加えていってる。

<!-- 開発バージョン、便利なコンソールの警告が含まれています -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

本番で公開する際は /dist/vue.js の部分を削除すると最適化されたものになって良いらしい。

##飽きた

あとはこの辺みたらいいんじゃないかな（適当）
仮置きのテキストとか画像何かを手軽に用意できるサイト集

https://qiita.com/redshoga/items/1d06c8cda3af77e0c5e8

##CSSだけど…

@charset - CSS: カスケーディングスタイルシート | MDN

@charset は CSS のアットルールで、スタイルシートで使う文字エンコーディングを定義します。このルールはスタイルシートの最初の要素でなければならず、これより前には文字を一切記述してはいけません。入れ子の文でないとしても、条件付き...

@charset "utf-8";

おまじない

#作り出してから確認するところ

##それほんとに使える？/Can I use…?

Can I use... Support tables for HTML5, CSS3, etc

"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile w...

ブラウザとそのバージョンごとに利用可能かどうかを調べられるサイト。
CSSやHTML何かの色々を検索できる。(flexとかarticleとか)
モダンなブラウザだけじゃない場合には確認しておいた方がいい。

##機能が足りないなーと思った時に見る

2018年のフロントエンドエンジニアならこの程度は知ってて当然だよな？ - Qiita

可及的速やかにReactが絶滅しますように。以下はFront-End Developer Handbook 2018の第三部、Front-end Developer Toolsからリンクされているツールと、その簡単な紹介です。ドキュメン...

クッソ長いので正直最後まで見切ったことない。
ざっくり必要そうな技術にアタリをつけたらそれを中心に探せばいいと思う。

##TwitterOGPの確認

https://cards-dev.twitter.com/validator

Twitter公式の確認ページ
逆に言えばTwitterしか確認できないので、Facebookとか対応したかったらまた別のところ探して♡