qiita.com Lodashは配列操作とかで便利な関数を提供してくれるライブラリ。 import _ from 'lodash'; として _.forEach のようにして使える。このやり方ならlodashを全部読み込んでいる。 import { forEach } from 'lodash'; この書き方なら、lodashのforEac…

発端はこれを見たこと .@SPUR_magazine 連載Vol.106です。最近はPCにa7iiiを繋ぐのが面倒なので、ビデオチャットは基本この方法で参加してます。我が家は暖色系の照明なので夜は色温度がおかしくなっちゃうのが難点かな。手動で設定できるようになったら最高…

shinimae.hatenablog.com 基本的には、 select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; } これでいけるわけです。これでデフォルトで出る矢印のUIが消えてくれます。 しかし、IEではこれが効かない。 select{ -webkit-appeara…

window.open JSでwindow.openとやるとウィンドウをポップアップで出せます。 また、hrefにそのウィンドウのURL入れるとおもうんですけど普通にやるとポップアップも出すのと同時に遷移しちゃうので、その動作自体の無効化が必要です。 aタグの無効化 - preve…

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

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

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

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

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

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

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

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

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>

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

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

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

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

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がブラウザによって規定のものが出るはずなのでそれを消せます。 まあただ、これ出るのには理由あって、健常者なら関係な…

[追記] こちら最新です tech.motoki-watanabe.net 東京都 新型コロナウイルス対策サイトに貢献したかった。 で、yarn install しようとしたら、 nodenv: version `10.19.0' is not installed (set by./covid19/.node-version) こんな感じの表示が。で、なぜ…

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

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

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

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

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

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

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