カテゴリー
js

barba(v2.9.7)で.no-barba的な。

お久しぶり。 久しぶりにPjax(barba.js)使ったら、リファレンスがあるようなないような、かすっててもドンピシャのものがなかったのでがんばって公式で調べたらめっけた。 barbaのv1？ではno-barbaってclassつけたリンクはbarbaの対象外の普通の遷移になるってのあったけど、今は無いのね？？ってのをしらべた。 https://barba.js.org/docs/advanced/strategies/ 
barba.init({
  // define a custom function that will prevent Barba
  // from working on links that contains a `prevent` CSS class
  prevent: ({ el }) => el.classList && el.classList.contains('prevent')
});
英語めっちゃ時間かかったけどめっけたからシェア。みんな実装頑張れ！ お久しぶりでした。またいつか。
カテゴリー
wp

All-in-One WP MigrationでDLできないサーバがあるらしい

【All-in-One WP Migration】「サーバーに問題が発生しました」エラーの原因と対処法【WordPress】 | webico blog
https://blog.webico.work/all-in-one-wp-migration-error#i-4 プラグイン用のディレクトリに保存されているから、FTPでDLしてねって。
カテゴリー
design ソフト全般（開発用）

AEでトランジションのあるボタンを作る

案件のサイトパーツを作ってるときに、ここ注目させたいので印象的に現れるボタンにできませんか、って言われたので、SVGパーツを動かしてAEからbodymovinで書き出してみた。なにげに自分で作るのは初。
気をつけるのが、AEの機能を使ってグラデーションをアニメートしたものはwebように書き出しできないということ・・・（見事今回グラデ使っていた・・・
しかしグラデ自体はアニメートしていないようにして（全体に回転掛けてグラデを動かすとか）書き出したら行けた。
なのでグラデがあるからって全部が全部書き出しできないわけじゃないのね・・・
勉強になりました。
カテゴリー
開発関連

タブ退避2021/05/27

再起動する前に退避。Google Search Consoleからリダイレクトエラーのメールが来ていたのでNetlify対応のプラグイン入れようとしたら、今年はじめにGatsbyｖ２→v3になっていてプラグイン使えなかったのの対応まわりと、とnode 14〜への更新まわりでエラー出て調べたこと（主にES6のお作法まわりに沿うように変更入れた）をバラバラと。
続きを読む “タブ退避2021/05/27”
カテゴリー
git

gitで存在しないブランチにプッシュし続けて差分が消えちゃったとき

初心者がよくやる間違いらしいよ

どないしてなったのか忘れたけど、過去の状態を確認するためにheadを数個戻した。それを忘れてずっとコミットし続けて（存在しないブランチの発生）いざmasterに最新が入っているよ、と言おうとしたら、あれ、俺のコミットたちツリーに表示されてねぇ・・・ってなった。oh///

ありがたき有識者の投稿

git でコミットが消えた場合に簡単に復帰する方法 – Qiita

https://qiita.com/Ratty27/items/7ebfe9a4933eba7630dc

初心者から一歩抜け出すためのGitの業 〜 git reflog – Qiita

https://qiita.com/tbaba/items/af563deac65d1b12de49

後コレも。
VSCodeでgitのconflictを解消させる話 – Qiita

https://qiita.com/penpenta/items/08b59f4b788ca2ae1c07

ありがとう有識者・・・
カテゴリー
wp 開発関連

WP管理画面カスタム

これはやっといてね、が案件チームによって違う

今回やったやつを羅列
続きを読む “WP管理画面カスタム”
カテゴリー
wp

Contact Form 7カスタム関連

久しぶりにやったら

やることいろいろあったのでメッも

条件分岐でフォームパーツ出し分け

続きを読む “Contact Form 7カスタム関連”
カテゴリー
開発関連

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

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

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

Gzip

サイト置くのが一般のレンサバじゃなかったので、対応可否が不明でやってなかった。やった。そもそもそのあたりの情報も検証もなかったのでサーバを調べるところから・・・。心配だったけど、構築途中でNginxからApacheに仕様変わったのもあり調べた情報ですんなり行けた。よかった・・・。NginxよりApacheのほうが文献多い＆先方エンジニアさん再起動とかで動かないで良いので速度だけでNginxで！って言うとweb本業じゃないエンジニアさんは多分対応大変だよ！（こっちも一緒にやってて申し訳ない感じで辛いよ！）
続きを読む “ちょっぱや公開後にLighthouseのスコアの相談されてやったこと”
カテゴリー
開発関連

css clip-pathとなかよし

楽しいよね

ってことで最近よくご一緒するcss clip-path

つい頼っちゃう。

 CSSのclip-pathプロパティでいろいろ簡単に実装できる、便利な使い方と実装のポイント | コリス

https://coliss.com/articles/build-websites/operation/css/how-to-use-css-clip-path.html
CSS clip-path の使い方 / Web Design Leaves

https://www.webdesignleaves.com/pr/css/css_clip_path.html
個人的にはcircleが便利

SCSSサンプルコード

@mixin cliping {
    overflow: hidden;
    &:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        opacity: 0.15;
        clip-path: circle(0 at center);
    }
    &:hover:before {
        clip-path: circle(200px at center);
        transition: 0.8s $easeOutCubic;
    }
}```
ってな感じ。コレは固定値だけど変数にすればもっと汎用性出る（興味あればコリスさんに書いてあるよ）ちょう便利。
カテゴリー
開発関連

Cookieとsessionとローカルストレージと部屋とワイシャツと私

二回目の訪問時は表示させないでってアレ。

久々に入れたので、メッも。最近はよーろっぱの法律（GDPR？）でCookie入ってたらその旨ページにアクセスしてきたユーザーに知らせなきゃ、とか、いろいろめんどくさそうなので、実装に可能ならcookieを使わないほうがいいのかしら、と、localstrage使うかぁ〜と思いつつなんとなく全体的におさらいしてみた。
ちなみに今回はブラウザ閉じてアクセスのたびに復活してほしいとのことだったので最終的にはsessionStrageをつかった。
続きを読む “Cookieとsessionとローカルストレージと部屋とワイシャツと私”