フロントエンド

学習のステップ

①HTML、CSSの理解
②JavaScriptの理解
③PHP（サーバーサイド言語の理解）
④データベースの理解
⑤Apache等のWebサーバーの理解
⑥node.jsの理解
⑦なぜWebフレームワークが必要か
⑧Webフレームワークの種類
⑨Webフレームワークを使う

いきなりやってもワケワカメじゃ。

— おばあちゃんでもできるプログラミング教室（ばあプロ） (@Pythonist19) December 14, 2020

僕が0からwebエンジニア目指すなら

①GitHubに草生やす
②webの理解を深める
③Mentaをﾌﾙ活用する
④Zenn記事を月2で更新
⑤週に20時間の勉強を確保
⑥3ヶ月後には転職活動start
⑦ﾎﾟｰﾄﾌｫﾘｵは1ヶ月で作りきる
⑧転職活動は面接対策にﾌﾙｺﾐｯﾄ

②は抜かすと現場のコミュで詰みます。

— げん@朝に駆けるタンクトップ駆動開発 (@gen_signup) February 15, 2021

ツール：フロントエンドコーディング時によく利用するジェネレーターサイト https://t.co/2RvSE3lrAz

— Webクリエイター ボックス (@webcreatorbox) January 19, 2021

ツール：QRコードを読み取るだけでWi-Fiにログインできるカードを簡単に作成できる「WiFi Login Card」 https://t.co/dXdwAB39rp

— Webクリエイター ボックス (@webcreatorbox) June 2, 2020

私が使っていたCSSのクラス名のリストを表にまとめてみたので、
クラス名を何にしたらいいか迷ってる人は使ってみてください✨#webデザイン#プログラミング初心者#駆け出しエンジニアと繋がりたい pic.twitter.com/dpqbTOgaYz

— みさ🌺Web制作/営業 (@miiitan48) January 26, 2021

XDでWebデザインする時、私はいつも自作の「8の倍数物ものさし」を使っています。
多くのデバイスの解像度基準に8の倍数が使われててコーディングしやすい、デザインルールが乱れないという利点があり、あれ？ここ何px空けてたっけ？ってなった時にこの物差し使うと瞬時に分かるので地味に超便利です。 pic.twitter.com/Odc6oiElU4

— アッシー / Webデザイナー@ASHIMFACTORY (@Ashida_Assy) July 24, 2020

XDで　コ　みたいな一部の線がない図形作るとき、マスク使ってたけど、こないだCSS Niteで松下絵梨さんが紹介してた、リピートグリッドを図形制作に使うとすぐできることに気がついた…！！たのしい。 pic.twitter.com/nTwflWZ5wj

— すぴかあやか（角田綾佳）＠キテレツ (@spicagraph) October 30, 2019

公告で見た漫画で検索できるっておもしろい。たまたま気になって名前思い出せないときとか便利。この施策他でつかえないかな。 https://t.co/jBz6Wnl6vj

— クロイシヨシユキ / 𝔾𝕣𝕠𝕨𝕥𝕙 (@yopi813) June 23, 2020

noteのシステム障害中の画面はじめてみたけど、ツイッターのタイムラインを表示している。これ、わかりやすくていいな。あと猫のイラストかわいい！ pic.twitter.com/NemEOhA61j

— クロイシヨシユキ / 𝔾𝕣𝕠𝕨𝕥𝕙 (@yopi813) June 2, 2020

コーディングやプログラミングする人は、正規表現による検索や置換を覚えておくと非常に便利です。正規表現と聞くとなんだか敷居が高そうに思えるけど、一度覚えてしまえばツールが変わっても使えるので一生ものです。僕もたまに忘れるのでよく復習してます。https://t.co/UJZa4EkOPz

— けんじ｜Webデザイナー (@kenji_clown5) April 1, 2020

#メモ
コーポレートサイトのTOPに掲載するときの順番の考え方
・対面で人に話すときに、会社をどう紹介するか
・講演会で説明するとき、どの順番で話すと人が聞く気になるか

ページ数が多いコーポレートサイト制作は、作る人も見る人も大変 @sato_nezi https://t.co/5zYtqEmtj7

— クロイシヨシユキ / 𝔾𝕣𝕠𝕨𝕥𝕙 (@yopi813) July 21, 2020

FAQが重要なサイトはSEO対策して構造化の対応をするとアクセスすごい増える。

— クロイシヨシユキ / 𝔾𝕣𝕠𝕨𝕥𝕙 (@yopi813) June 3, 2020

グーグルアナリティクスだけだとこの流れを想像できないよな。#BtoBデジタルシフト2020 pic.twitter.com/e6qrWmpzPI

— クロイシヨシユキ / 𝔾𝕣𝕠𝕨𝕥𝕙 (@yopi813) June 19, 2020

各自治体の皆さんのサーバ負荷が心配ですが少しでも参考になれば。
– 増強
– 同一サーバで配信している余計なコンテンツを落とす
– 静的コンテンツでDBから引いてるものはDBキャッシュを見直す
– 静的コンテンツを外部CDNに逃す
– 構成にもよるがhttp配信に切り替える

— 宮坂学 Manabu Miyasaka (@miyasaka) October 12, 2019

Webサイトを改善したいなら「せっかちなおじさん」をイメージする。
せっかちなおじさんはデザインとか知ったこっちゃない。

「買うボタンどこや？」
「"選べる"ってなにをやねん？」
「なにがどうお得やねん？」
「利用規約ながっ！」

憑依させると改善点が見えてくる。
という話を聞いた。笑った。

— 寺田祐也｜編集×マーケ＠Nyle Inc. (@yatera1979) May 2, 2020

圧縮、キャッシュにwebp化ですかね。pixivってなんであんなに軽いんですかね

— Itoh 🤷🏻 (@FrontArtGraph) June 15, 2020

同感。特に「フィードバックと距離を置きたい」の指摘が響いた。最近の CMS 系サービスで外部 SNS 連携しても言及 (反応) 数を出さなくなってるのはこの点を考慮してのことだと認識している。 / “個人サイトについて” https://t.co/2dMXVuGu9G

— アカベコ (@akabekobeko) September 22, 2020

パフォーマンス測定に使うAPIをまとめて知りたいときの記事

① パフォーマンスに関する各種ブラウザAPI – EagleLand https://t.co/IriTSLtrEw

② PerformanceObserver() – Web API | MDN https://t.co/Pe97UQdyOV#JavaScript

— Takeshi Kano 鹿野 壮 (@tonkotsuboy_com) December 9, 2020

JavaScript Picture-in-Picture APIhttps://t.co/Rm5frYqSS5

PiPを実現するためのWeb API

videoElement.requestPictureInPicture()を実行するだけでフローティングウィンドウのように動画を表示することができる。今のところChromeとSafariで使えるみたい。

— ダーシノ / NES.css (@bc_rikko) April 14, 2020

使用済みポートを開放する3つの方法 https://t.co/kUKNUiaAx9

— Takeshi Kano 鹿野 壮 (@tonkotsuboy_com) January 7, 2021

日清食品のWeb動画広告が巧妙すぎてシェアせずにはいられない・・・・ pic.twitter.com/ue03SVXum9

— KOH🇬🇪 (@Luck81O) April 16, 2020