カテゴリー
開発関連

ちょっぱや公開後にLighthouseのスコアの相談されてやったこと

最初はちょっぱやでってオーダーだったけど

ガリガリつくってなんとか期日までに公開・・・と最終クライアント様にサイト見せたら目の付け所がシャープでしょ、って単純に成果物評価のプライオリティが想定と全然違っていたので、作った後からいろいろ軽量化を試みる流れとなった。最近はreactとかばっかいじってたから己でそこをチューニングすることなかったし、ヒェってなったので、そんなDaysのメモ。

Gzip

サイト置くのが一般のレンサバじゃなかったので、対応可否が不明でやってなかった。やった。そもそもそのあたりの情報も検証もなかったのでサーバを調べるところから・・・。心配だったけど、構築途中でNginxからApacheに仕様変わったのもあり調べた情報ですんなり行けた。よかった・・・。NginxよりApacheのほうが文献多い&先方エンジニアさん再起動とかで動かないで良いので速度だけでNginxで!って言うとweb本業じゃないエンジニアさんは多分対応大変だよ!(こっちも一緒にやってて申し訳ない感じで辛いよ!)
カテゴリー
css

フォーム系memo jsで制御する場合にもhtml5デフォルトのバリデーションを機能させる

デフォルトのバリデーションを残すmemo

formタグに onsubmitでreturn false →デフォルトのバリデーションはされるが、送信は行われない
ボタンにonclickかonsubmitでJS制御を追加

【JavaScript入門】submitイベントで入力フォームの送信処理をする | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト

JavaScriptのsubmitイベントで、フォーム送信をコントロールしよう

カテゴリー
css

フォーム系memo cssトグルスイッチでフォームパーツを制御

チェックボックスでトグルスイッチ

のび太スニペットくれよ〜と言わんばかりにネットで探す。

さいしょにめっけたやつ
円形、フラット、フリップ……3種類のトグルスイッチをCSSのみで作成する方法!|SeleQt【セレキュト】

Webデザイナー必見!CSSだけで作るトグルスイッチ3種【丸スタイル・2択スタイル】

結局コレ参考にしたよってやつ
Simple CSS Toggle Switch — Create a toggle switch with only a checkbox
https://danklammer.com/articles/simple-css-toggle-switch/

最初に選んでから記事が読めて便利
CSS3 Toggle Switch Button – HTML Lion
https://www.htmllion.com/css3-toggle-switch-button.html

色んなデザイン
10 Free Customizable CSS Snippets for Radio Toggles & Switches – 1stWebDesigner

10 Free Customizable CSS Snippets for Radio Toggles & Switches

How To Create a Toggle Switch
https://www.w3schools.com/howto/howto_css_switch.asp

トグルスイッチと他のパーツのdisabledを連携させる

【jQuery入門】checkboxのchecked設定や取得まとめ! | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト

【jQuery入門】checkboxのchecked設定や取得まとめ!

input 要素の disabled 属性と readonly 属性の違い: 小粋空間
http://www.koikikukan.com/archives/2009/04/26-003300.php

inputがdisabledの時のCSSを指定する | CloudAdvisor

inputがdisabledの時のCSSを指定する

2014-04-11 1st – jsdo.it – Share JavaScript, HTML5 and CSS
http://jsdo.it/Yukimi.Sato/5y3C

jQueryでshow/hide, addClass/removeClass, disabledの切り替えを一行で書く
https://qiita.com/nmta/items/0f5c460d135c4f72dc4a

カテゴリー
css

ひさしぶり svg IE11 高さauto バグる

bodymovinのsvg突っ込んだら久しぶりにIEさんの制御不能に出くわすなど。
height:autoナシでwidthだけCSSで指定したら治った

IEでSVGタグを使った時にheight:autoが効かない | ふたえごのWEBテクニックブログ
https://www.futaego.com/2017/ie%E3%81%A7svg%E3%82%BF%E3%82%B0%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E6%99%82%E3%81%ABheightauto%E3%81%8C%E5%8A%B9%E3%81%8B%E3%81%AA%E3%81%84/

カテゴリー
css 開発関連

【IE】いんらいんSVG めんどくさい【爆発しろ】

IEにも対応したレスポンシブSVGの作り方 | たんしおどっとねっと
https://tanshio.net/responsive-svg

レスポンシブSVGをインラインで配置するとき、IEとandroidが高さを計算しないのに対応する -『CSS』 – webmanab.html/ウェブまなぶ
https://webmanab-html.com/tip/svg-height/