2021年7月のログ
目次
コアウェブバイタルを改善するポイント
投稿者：相田
Google直伝のCSSでコアウェブバイタルを改善するポイントの記事が出てたので共有します。（普段やってる部分もあります）
https://webtan.impress.co.jp/e/2021/06/18/40535
＜英語記事／Google翻訳使えばほぼほぼ読めます＞
https://web.dev/css-web-vitals/
https://web.dev/font-best-practices/
CSSのtransformは同じ関数を複数かい使ってもOK
投稿者：本田
そうだったのか！？となった記事を共有します…。
https://liginc.co.jp/552706
flexboxで線を使った見出しデザイン
投稿者：芝山
最近Flexに頼ってばかりな私ですが、改めてまとめてあったサイトわかりやすかったので共有します。
個人的には「flexboxで線を使った見出しデザイン」を最近まで知らず、目からウロコでございました。
https://pulpxstyle.com/flexbox/
デザインシステムについて
投稿者：西
「デザインシステム」というものについて調べてみましたので、共有します。
デザイナーいらずでデザインっぽいものを作れてしまうのでは？というイメージだったのですが、
デザイナー以外のメンバーと共通認識を持つことができる
というその制作活動自体をより円滑にしよう、という目的をブラさなければ、チームで同じ方向を向く手助けになるらしいことに目から鱗でした。
また、ディレクターさんサイドで、サイト構成の理解を深めていただくツールにも使えそうです。
https://www.concentinc.jp/design_research/2021/04/designsystem/
https://webdesign-trends.net/entry/9068
デザインのことはデザイナー、開発のことはエンジニア、と分業するのではなく、メンバー全員でコラボレーションすることが大切です。
合わせてデザイナー（広くいうと制作者）としてのあり方について、考えさせられます
Illustrator検定／フォント名についてるNとかProとかStdとかPr6とかUDとかの意味
投稿者：堤
Illustrator検定というものがあるそうです！
やったことないですがちょっと面白そうです。
https://ai.kentei.adobe.com/top
あとなんとなくしか知らなかったフォント名についてるNとかProとかStdとかPr6とかUDとかです。
https://qiita.com/masakun1150/items/6ee61aace5e13751ad8d
CSS見出しデザイン
投稿者：川目
うちの提携のやつよりはシンプルですが、その分使いまわしし易いかと思います。
https://pulpxstyle.com/heading-design/
Google Chromeのアップデート
投稿者：豆成
おとといに出た記事「クロームのアップデートを！」ニュースをお届けいたします。
悪用確認済みの脆弱性が見つかったとのことですので、皆様アップデートをお勧めいたします。
https://news.goo.ne.jp/article/mycom/business/mycom_2267301.html
セルフ終礼のすすめ
投稿者：尾髙
ウェブ知識ではないのですが、昨日気になった記事を見つけたので共有いたします。
セルフ終礼のすすめ
https://liginc.co.jp/551041
セルフ終礼とは
毎日の業務が忙しく、気付けば半年が経ち、「あ、そういえばこんな目標立ててたな、結局できなかったな」ということがよくありました。
また、せわしなく進む時間の中で、「最近勉強できてないなー、成長止まってんなー」とか思うことも多々ありました。
そんなとき「半期ごとで振り返るのは時間が空き過ぎだ。3日経ったらその日のことは忘れている。だったら毎日振り返ろう！」というわけで、毎日自分と対話することにしたのです。
この文章にとても共感をしまして、私も日々の忙しさに追われて勉強できていない自分に自己嫌悪を感じていました。
別に日報でもよくない？と思う方もいると思うのですが、日報は業務の記録をするものですし、人に見られるものです。
セルフ終礼というのは、あくまで自分と向き合うための日記のようなものであり、
自分の目標達成、習慣化を促してくれるものなので、とてもいいなぁと思いました。
ブログの記事の方は以下のような項目を振り返っていました。
振り返る項目
考えていること
今日の出来事
今日学んだこと
感謝すること
例えば今日学んだことがほんの小さなことだとしても、
毎日積み重なっていけば、何も成長できてない・・・勉強できてないと思ってても、
じつは結構色々知識が増えていたということがわかると思いますし、
感謝することもオフトンのようでいいなと思いました（ポイントはあげられませんが…）
別の方は以下のような項目で運用されていました。
https://note.com/kondoyuko/n/n5d53bedee8a7
「よかったこと3つ」
「新しい挑戦ができたかどうか」
自分なりに項目を変えて、運用すると楽しいかと思いました。
Notionもなかなか使いこなせていなかったのですが、新しい使い方を発見できたので、共有いたします。
フォントや色を一目で抽出できるVisual Inspector
投稿者：東江
最近見つけた拡張機能をご紹介します。
既にご存知の方もいらっしゃるかと思いますが、「Visual Inspector」というものです。これまでにもフォントや色を抽出するものはありましたが、この拡張機能だと一つでできますし、またディベロッパーツールを開かなくてもささっと見たいと時に便利かなと思います。個人的にキャプチャも取れるので良いかなと思いました。
https://coliss.com/articles/browser/chrome/visual-inspector-canvasflip.html
CSSセレクタのチートシート
投稿者：尾髙
もしかしたらみなさんご存じかもしれませんが、
CSSセレクタのチートシートがあったので、印刷できそうだったので、共有します！
https://webliker.info/css-selector-cheat-sheet/
色んなジェネレーターをひとまとめにしてるサイト
投稿者：河鰭
https://www.toolb.dev/
色んなジェネレーターをひとまとめにしてるサイトです。
グラデーションは色数2つまでなのでそんなにですが、ボタンなどのジェネレーターがあるのは良いなと。
あと個人的にはHTMLのJSONが作れるのが良きでした（VSCodeでスニペット登録したりするのに使うので）
ES6、JSの勉強／眼科実習のための英単語集
投稿者：有元
IE未対応になり、せっかくなのでふんわり覚えていたES6をちゃんと理解しておきたいと思い少しずつ記事を見ているのですが、理解が追いつけず、、、
以下見つけたわかりやすい記事を共有します。
・【JavaScript】アロー関数式を学ぶついでにthisも復習する話
https://qiita.com/mejileben/items/69e5facdb60781927929
これ見てもちょっとわからないので（理解力鍛えたい）やはり読む＋実験を繰り返すしかないと思いました
・JS(ES6)の文字列操作をプチ復習
https://qiita.com/siino_webdev/items/2d3b9c84ec3b34aa2bad
3のテンプレートリテラル素晴らしいと思いました！！
・眼科実習のためのカルテ頻用英単語・略語集
http://www.asahikawa-med.ac.jp/dept/mc/ophtha/invite/abbr_for_student_training.pdf
眼科案件のデータ名と英語タイトルに使用しました！助かりました:大泣き: