青いやつの進捗日記。

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

パフォーマンスのために、遅延読み込み・非同期読み込みについて調べる

qiita.com これを読んで。最適化とか表示早くするのが特に必要なものならここらへんのチューニング必要なのかもしれないなーと思い調べてみようと決意。ちなみにこれ書いてる現状はなにも知らない。 JavaScriptの非同期読み込み qiita.com 全然気にしたこと…

CSSで良い感じに調整可能なよみがな、ルビを振る

CSS

qiita.com このQiitaが参考になります。 一応HTMLのタグとして存在はしているものの、そこもline-heightに含まれてしまうが故に見た目として悪い。のでこのQiitaのようにdata属性に読みがな降ってあげるのが正しそう。 アクセシビリティ的に気にする必要ある…

macでOSアップデートでデフォルトのシェルがzshに、nodenvの再設定が必要

nodenvでnodeのバージョン変えようと思ったらnodenvがない的な言われ方して怒られた。 そういえば、macOSがCatalinaになってデフォルトのシェルがbashからzshになっていたのでした。 そもそもnodenv入れるときってどんなことしてたっけなあと思い返してみる…

最新のnodenvのアップデート方法

tech.motoki-watanabe.net って書いたんですけど。 $ nodenv install 13.0.0 をしたら、 node-build: definition not found: 13.0.0 See all available versions with `nodenv install --list'. If the version you need is missing, try upgrading node-bui…

Sassで & + & がなんか理解できていなかったのでちゃんと考える

Sassで、同じ要素同士の隣接セレクタの指定として .class { & + & { margin-top: 10px; } } みたいなのあるじゃないですか。なんかずっと腑に落ちてなくて、 .class { + & { margin-top: 10px; } } え、こうじゃないの?ってなぜか思ってたんですよねずっと…

webpack-route-data-mapperのファイル除外指定方法

www.npmjs.com github.com webpack-route-data-mapperというのを案件で使っていた。 まあ良い感じにファイルの指定を出来るようになるプラグインだと理解している。これをpug-loaderに流し込んでいたはず。jsonファイルをpug-loaderに流し込んでその情報に基…

CDNって結局なに?

プレビュー環境でNetlifyでパスワードかけてるとCDN使えないからページの速度が遅くなる、ということを聴いた(正しい理解じゃないかも)のだが、そもそもCDNってなんなんですかね? NetlifyはCDNのサーバーが日本にないから遅い、だったっけな…?一番近いの…

CSSでhover時になぜか少しずれるときがある…対策

【CSS】transitionプロパティ使用時に、Chromeブラウザで1pxずれる現象を回避する | バシャログ。 backface-visibility: hidden; これで謎のずれが消える。 backface-visibility - CSS: カスケーディングスタイルシート | MDN なんで消えるんですかね…?裏側…

Next.jsでstyled-jsxは最初から使える

らしい。 qiita.com styled-jsxとnext.jsは同じZeitが作っているので、 inside.dmm.com github.com next.jsで使いたいときはなにもインストールする必要がなく、そのまま書ける。 <div className="container">{children}</div> <style jsx>{` .container { width: 1000px; margin: auto; } `}</style>

Javascriptの親をたどって探すclosestを関数として作る

IE11で使えないんですよねーclosest。 なので、 getParent($current, cls) { let $target = $current.parentNode; while ($target.tagName !== 'BODY') { if ($target.classList.contains(cls)) { return $target; } $target = $target.parentNode; } } 「現…

buttonタグのtypeの初期値はsubmitなので、なにかに付随してbuttonタグをクリックされるとバリデーションが効いてしまいエラー挙動が出る

前提として、formタグで囲われている中身の話。 隠れたフォームのバリデーションに失敗 - Qiita ページにrequiredのinputがあったのだが、 今回はある挙動でJSでクリックさせていたbuttonがtypeが未指定だったため、その挙動が動く度にブラウザデフォルトの…

cloneNodeでコピーしてappendChildで最後尾に増やす

JavaScriptで特定の要素を複製(コピー)する方法|今村だけがよくわかるブログ Node.cloneNode() 例えばスライダーのページネーションとか。1つだけHTML上に作っておいて、あとは複製するとかできる。 _set() { for (let i = 0; i < this.length - 1; i++) …

SNSのシェア機能の実装

developer.mozilla.org これでURLを取得しエンコード const url = encodeURIComponent(location.href); blog.maromaro.co.jp tsudoi.org getTwitterUrl(url) { return `https://twitter.com/share?${url}`; } みたいな感じ 追記。Pinterestはシェア対象の画…

Create React App と Next.js と Gatsby.js の違いは何なのか調べようと色々まとめてみた

Single Page ApplicationかServer Side RenderingかStatic Site Generateか、の3種類ある watablogtravel.com 前提として、Next.jsのStatic Site Genelateが可能になったのは最近の話??2020年3月に本格的に純粋なStatic Site Genelateの機能が備わったらし…

IEだと游ゴシックちょっと下に隙間できる件

grow-group.jp いやこれどうしたらいいんでしょうね…IEのときだけフォント変えるのか、IEのとき判定して一律文字の位置調整してあげるのか…正直文字の位置を調整するのは現実的じゃない気がするしなあ…ボタンコンポーネントだけ一律調整してあげるのかなあ…

LodashのforEachを使う

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

スマホをWebカメラの代わりにするやつ

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

select要素のデフォルトのUIを消す 特にIEでは特殊な記述が必要

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

window.openでウィンドウをポップアップさせる

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

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がエラー起こして自動再生が止まってしまう…