2022年、Instaで見かけて気になったフロントエンド技術

お疲れさまです！
早いものでもう師走ですね…
今年のウェブ業界の出来事といえば、1番はなんと言ってもIEのサポート終了ではないでしょうか。
検証ブラウザが減って新しい技術が使いやすくなる一方、しっかり流行りの技術をインプットしていかないといけなくなりました。（IE終了関係なくインプットは大事なんですが。）

みなさまはどういった方法で情報収集していますか。
わたしは最近はInstagramで
何気なく見て
キャッチアップしています。

そこで今回は今年Instaで見かけた気になるコードだったり、
何かインスピレーションを受けそうなコード、アカウントを共有したいと思います〜！

## 1行で書ける 知っておくと便利そうなコード
人によっては当たり前のコードもあるかもですが、わたしけっこう知らないもの多かったです。

### progress
プログレスバーを表示できる。
```
<progress value="32" max="100">32%</progress>
```
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="JjZewxW" data-user="unt-morikawa" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/unt-morikawa/pen/JjZewxW">
  Untitled</a> by un-T Morikawa (<a href="https://codepen.io/unt-morikawa">@unt-morikawa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### hidden
タグを非表示できる。（実際使う場面あるのか…🤔）
```
<p>
  次のテキストは「<span hidden>非表示</span>」です
</p>
```
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="poKQqmo" data-user="unt-morikawa" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/unt-morikawa/pen/poKQqmo">
  Untitled</a> by un-T Morikawa (<a href="https://codepen.io/unt-morikawa">@unt-morikawa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### Spellcheck
スペルのチェックを行ってくれる。
次の例文では1文目が誤字っています。クリックすると誤字がハイライトされます。
```
<p contenteditable spellcheck="true">hello</p>
```
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="OJEWgme" data-user="unt-morikawa" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/unt-morikawa/pen/OJEWgme">
  Untitled</a> by un-T Morikawa (<a href="https://codepen.io/unt-morikawa">@unt-morikawa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### Capture
スマホで「ファイルを選択」をクリックしてみてください。
カメラが起動します。
```
<input type="file" capture="user" accept="image/*">
```

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="YzvNQYd" data-user="unt-morikawa" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/unt-morikawa/pen/YzvNQYd">
  Untitled</a> by un-T Morikawa (<a href="https://codepen.io/unt-morikawa">@unt-morikawa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### cssで画像リフレクト

```
-webkit-box-reflect: below 4px linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.3));
```
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="mdKadLP" data-user="unt-morikawa" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/unt-morikawa/pen/mdKadLP">
  Untitled</a> by un-T Morikawa (<a href="https://codepen.io/unt-morikawa">@unt-morikawa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## インスピレーション湧きそうなコード
ちょっと数少ないですが、どこかチャンスがあれば使いたいな〜と思うコード。

### Avatar List
アイコン（丸）をホバーすると横にスッとズレるアニメーション
「~」をつかって隣接要素にstyleを当てているところ、色々使えそうですね

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="jOKQXxR" data-user="unt-morikawa" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/unt-morikawa/pen/jOKQXxR">
  Untitled</a> by un-T Morikawa (<a href="https://codepen.io/unt-morikawa">@unt-morikawa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### css shape
cssのみで月の形shape。お手軽ですね。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="wvXRvzz" data-user="unt-morikawa" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/unt-morikawa/pen/wvXRvzz">
  Untitled</a> by un-T Morikawa (<a href="https://codepen.io/unt-morikawa">@unt-morikawa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## css loader
汎用性ありそうなローディングアニメーション。
コピペでいけるのも使いやすいですね。

### 3本ラインのローダー
cssだけでポップなローダー
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="MWXZWqB" data-user="unt-morikawa" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/unt-morikawa/pen/MWXZWqB">
  Untitled</a> by un-T Morikawa (<a href="https://codepen.io/unt-morikawa">@unt-morikawa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 回転ローダー
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="BaVvyKJ" data-user="unt-morikawa" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/unt-morikawa/pen/BaVvyKJ">
  Untitled</a> by un-T Morikawa (<a href="https://codepen.io/unt-morikawa">@unt-morikawa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 脈打つパルスローダー
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="zYayGEz" data-user="unt-morikawa" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/unt-morikawa/pen/zYayGEz">
  Untitled</a> by un-T Morikawa (<a href="https://codepen.io/unt-morikawa">@unt-morikawa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 時計型ローダー
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="qBKLdpo" data-user="unt-morikawa" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/unt-morikawa/pen/qBKLdpo">
  Untitled</a> by un-T Morikawa (<a href="https://codepen.io/unt-morikawa">@unt-morikawa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


### 液体が注がれるローダー
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="MWXZwBJ" data-user="unt-morikawa" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/unt-morikawa/pen/MWXZwBJ">
  Untitled</a> by un-T Morikawa (<a href="https://codepen.io/unt-morikawa">@unt-morikawa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 炎の揺れみたいなローダー

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="qBKLEOO" data-user="unt-morikawa" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/unt-morikawa/pen/qBKLEOO">
  Untitled</a> by un-T Morikawa (<a href="https://codepen.io/unt-morikawa">@unt-morikawa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## スマホ メニュー

### 斜めのアニメーションが心地良いメニュー
洒落とんな〜
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="WNyLvLw" data-user="unt-morikawa" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/unt-morikawa/pen/WNyLvLw">
  Untitled</a> by un-T Morikawa (<a href="https://codepen.io/unt-morikawa">@unt-morikawa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### フッター固定に使えそうなメニュー
こちらはcssのみでアニメーションさせています。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="yLEGYpK" data-user="unt-morikawa" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/unt-morikawa/pen/yLEGYpK">
  Untitled</a> by un-T Morikawa (<a href="https://codepen.io/unt-morikawa">@unt-morikawa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## まとめ
今年気になったコードをまとめてご紹介しました！
ほんとはもっとすんごい動きのやつとかもストックしてたんですが、
コードを拾えなかったり、有料のものだったりして全部はご紹介できませんでしたー

ただ、参考にさせていただいた方々のアカウントはオススメなので、
ぜひフォローしてキャッチアップしていきましょう。

## 参考
https://codepen.io/vlt_dev/pens/public
https://codepen.io/OfigenusMaximus/pens/public
https://codepen.io/nothing4us/pens/public
https://codepen.io/davidhaz/pens/public