青いやつの進捗日記。

べんきょうのしんちょくをかいていきます。

pugでクラスが〜〜から始まっていたら、という指定

pug

if (attributes.class && attributes.class.startsWith('in-page-anchor')) { // } これでattributesとして渡したClassがin-page-anchorから始まったとき、というif文を書ける

アクセシビリティのチェック。FirefoxのHTML Validatorの使い方

wwws.kobe-c.ac.jp が参考になります。 大前提として、仕事でやっているならアクセシビリティのチェックをする際にオフラインでチェックできるものでなければいけません。W3Cのやつとかはデータ送信しちゃうはず。

アクセシビリティのチェック。Chromeのフォントサイズを200%に。

Chromeの設定>デザイン>フォントをカスタマイズ から、フォントの詳細設定(拡張機能のオプション) chrome.google.com この拡張機能を入れ、拡張機能で文字サイズを16pxから32pxにすると、200%にしたときの検証ができます。 W3Cアクセシビリティの担保と…

アクセシビリティのチェック。MacにWebページを読ませる。

support.apple.com 公式サイトが参考になります。 アクセシビリティのチェックとして、音声でWebサイトを正しく読めるかがあります。 もちろんHTMLで入れた文字は問題なく読めますが、画像のAltなどは目でWebサイトを見ている限りは 認知されない情報ですよ…

bowserってライブラリでブラウザのuseragentとか色々とってこれるっぽい

知らなかった。会社のチャンネルで投稿されていて知った。言われてみればそりゃこういうのは全部ライブラリあるよね。 Webブラウザの種類やバージョンを判別するJSライブラリ「bowser」 lancedikson/bowser ・ブラウザ名 ・OS ・デバイス(PCかタブレットかS…

pugの変数へのアクセス

pug

最近仕事でpugを触っている。 data-b-pdf-volume=attributes.pdf-volume だとだめで、 data-b-pdf-volume=attributes['pdf-volume'] と書く。 もしくは変数名のルール変えるか。 data-b-pdf-volume=attributes.pdfvolume -あると記号として扱われてしまう。

scrollToのbehaviorのPolyfill別のもあった

iamdustan/smoothscroll これのsrcの中身をダウンロードして置くか、 今どきのスムーズスクロール(2019年版) Webpack使えてimportで済むならscroll-behavior-polyfillで良い感じがする が、Webpack使えないのであれば、smoothscrollのsrcの中身のsmoothscrol…

addListenerでmatchmediaの切り替えでイベント発生

matchMediaを使うとCSSとほぼ同じような書き味でメディアクエリを書けます。 が、CSSのようにデバイス幅をいつでも取得してるわけじゃない(そう書けばそう書けますが)ので、PCSPの切替時にイベントを起こせません。 と思ったら、matchmediaでaddListerを使…

GatsbyでProps渡してPCSP表示非表示切り替えする

SizedImageというComponentでspOnlyというPropsにtrueを渡す <SizedImage spOnly={true} filename={'about/history/img-logo.png'}></Image> SizedImageのComponentを定義 export default class SizedImage extends React.Component { render() { return( <Container spOnly={this.props.spOnly}> <Image filename={this.props.filename}><…</image></container>

BitbucketよりGithubのほうが良い理由

メモ。 最近GithubのTeamの有料アカウントが9ドルから4ドルに値下げされましたね。 jp.techcrunch.com とはいえBitbucketは3ドルなので、まだBitbucketのほうが安い。 www.atlassian.com じゃあどんなところがGithubのほうが良いのか…? 具体的には、 ・Inte…

Swiper、おそらくサイト重いとAutoplayが正しく動かないときがある?

原因は確かじゃないのであれなのですが。まあ備忘録として。メモです。 Swiperっていうスライダーを簡単に作れるライブラリ。 あれで自動再生して、サムネイル機能もつけて、ってのを作ったのですが。 たまにSwiperがエラー起こして自動再生が止まってしまう…

JavaScriptのscrollToはIEとかSafariで効かないからPolyfillで対応

これがIEとSafariでは効かない。 window.scrollTo({ top: 100, behavior: 'smooth' }); 正確に言えばbehaviorが効かない。CSSのscroll-behaviorも同じく。 jQueryでanimateさせればよかったかもしれないが、今回はPolyfillで解決。 scroll-behavior-polyfill…

Gatsbyでローカルネットワークで他端末で検証を行いたいとき

gatsby develop -H 0.0.0.0 で、いける。 これで自分のIPアドレスに他端末からアクセスしたら検証出来ます。

GithubでForkしたリポジトリ、とはいえFork元の本家の更新も受け取りたい。コロナ対策サイトにコントリビューションしたくて…

qiita.com これが参考になります。 $ git remote add upstream https://github.com/tokyo-metropolitan-gov/covid19.git これで、本家をfetchしてくるupstreamブランチを作成できます。 これで、 $ git fetch upstream で、upstreanブランチに本家の更新を反…

ブラウザで見ると、選択時に青枠出るやつ。消したい。

nichiyogogo.com まあ直し方は簡単で、 outline: none; これで終わり。inputがfocusされてるときとかだと思うので、そのときにoutlineがブラウザによって規定のものが出るはずなのでそれを消せます。 まあただ、これ出るのには理由あって、健常者なら関係な…

東京都 新型コロナウイルス対策サイトに貢献したかったのだが、nodeのversionで詰まった。nodenvでnodeのバージョンを管理しているが10.19.0がlistにないしアップデートもできない…!→できた!

東京都 新型コロナウイルス対策サイトに貢献したかった。 で、yarn install しようとしたら、 nodenv: version `10.19.0' is not installed (set by./covid19/.node-version) こんな感じの表示が。で、なぜかって言うと、まあ表示の通りなのですが、nodenvを…

console って console.log しかないと思っていました

qiita.com qiita.com とにかくデバッグてきなことしたいときは console.log これでコンソールのログを出す、これしかないと思っていました。 なにかの拍子に、会社のマネージャーに 「console.infoとかでエラー挙動のときはエラー文出すようにしたほうがいい…

ヘッドレスCMSを使ってみる contentful

fromscratch-y.work これが参考になります。ちなみに qiita.com 最初これ参考にして進めてたけど、CLIからいじることあんのかよくわかんなくて結局途中から普通にブラウザ上からいじる方に以降した、そしたらなんかCLIでやってた過程でContent ModelとかCont…

よく考えると、クラスの取得をjQueryでしかやっていなかった。JavaScriptでクラスを取得し、そのクラス全部に同じ挙動を適応させるやり方。

github.com これめちゃめちゃ見ます。参考になります。 jQueryでHTMLのクラス取得するなら、普段なら const $tabItem = $('.tabItem') みたいにやりますよね。 で、例えばこのクラス全体に同じ挙動を実行させたい。例えばクリックイベントを起こしたいなら、…

gulpのグローバルインストールの必要性

グローバルインストールって必要以上にしたくないですよね、なんかに影響出そうで怖いじゃないですか。 で、gulpを使うときってグローバルインストール必要だと勝手に思ってたんですよね。 どうやらそういうわけでもないらしく。というよりか、正確に言えば …

GIthubのSecurity Alertで We found a potential security vulnerability in one of your dependencies. でserialize-javascriptのなんかで怒られるやつ。

www.autovice.jp これが参考になります。 Reactのチュートリアルをやっていたらリポジトリが怒られた。 yarn.lockを見てみたらserialize-javascriptのバージョンが2.1.0だった。serialize-javascriptがなにをしているものかよくわかっていないが、create-rea…

MacのKeyboardをHHKB風に、右Shiftと[;'/で矢印キーを入力

会社でメンターだった先輩がHHKB大好きでして、 それに加え最近自分がMagic Keyboard飽きたなあと思っていまして、 じゃあHHKBか??買うか?? とか思ったけど、まずそもそもちょっと不満だったのが 矢印キー の入力 なんですよね。 キーボード入力の手をそ…

aosとかの、スクロールアニメーションを動かすときのInitのタイミング。

michalsnik.github.io AOS とか、スクロールで起動するアニメーションのライブラリを使うとき、もしくは普通にスクロールでアニメーションを動かすとき。 必要なことに、各要素の位置の取得があります。 AOSを使う場合は、JSで AOS.init(); をします。 で、…

.htaccessの書き方。とりあえずそのサイトにアクセスあったら違うサイトに飛ばしたい。

www.itti.jp これが参考になりました。 ポートフォリオとしてある https://motoki-watanabe.net/ このサイト、学部3年の時に作ったのですが汚すぎて更新もしんどいので放置されてて、今ポートフォリオはnotionで仮運用されているのでそちらに飛ばしたい。 FT…

VDMXでAKAI APC miniのボタンを光らせる

こんな感じで押してないときは緑、押したら赤に光らせようと思います。 saikuro0526.hatenablog.com 参考にしました。 まずMIDIコンをDetectでアサイン。 ここまでは普通。ここからが重要。 nanoKONTROL2とかなら普通に echo values back out to:でMIDIコン…

Photoshopで1倍では書き出せるのにそれ以上の倍率で書き出せない時。

たぶんバグですけどね。散々使ってて初めて出会いました。 普通にレイヤーの名前を 200% img05.jpgとかにしてアセット書き出ししようとしたら こうなる。クリッピングマスクしてそのマスクかけた方の名前変更したらこれ。 で、原因は謎。おそらくPhotoshopの…

CSSで禁則処理のおすすめ

手動で文章に改行を入れたくない。 wemo.tech 禁則処理、例えば句読点(,や.)が文章の先頭に来ないようにとか。 どこまでを禁則にするかによりますが、単語レベルで単語中では改行しないように、とかも出来ます。これらを改行調整することなく良い感じに自動…

SwiperをWebpackで利用するときは設定をしないとIEでのみエラーになる

Swiperというスライダーを作るときに便利なプラグイン。 swiperjs.com もう超絶便利ですよね。 で、こいつをWebpackとかで使う際に注意が必要だと最近わかりました。 なぜかIEでだけ、普通に使ってるとJS全部機能しません。 【JS】スライダーのSwiperをwebpa…

自分用のMacを買い替えたのでyarn入れようと思ったらまずHomebrewとか入ってなかった。npmとかyarnとかnodeとかgulpとかnodenvとかどう入れるんだっけ。インストール。

fukatsu.tech というわけでまずはこれ。 brew.sh /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" で、Homebrewが入ります。 次に、yarnのインストール。 yarnpkg.com brew install yarn これでインス…

テキストの両端揃え

sterfield.co.jp text-align: justify; text-justify: inter-ideograph; これで出来る。 基本はtext-align: justifyで問題ない。 text-justify: inter-ideographはIE用とのことだが、やってみたところ上手くいかなかったので諸説ある気がする。text-justify:…