最近Githubでプロジェクトを進めることが増えたのですが（Bitbucketのほうが今までは多かった） Pull RequestとかIssueとかでラベルがあるのですね。 docs.github.com デフォルトでもあるし、作れたりもする。ラベル貼っておくと意味合いわかりやすい。 ただ…

sbfl.net sbfl.net 恥ずかしながらまだあまり非同期処理を使いこなせず…1回だけ書きましたがなんかうまくいった…という感じなので…次やる時また参考にしたい気持ちです

りあクトをKindleで読みたい。 booth.pm qiita.com www.amazon.co.jp KindleFireにメールで送って読むのは論文読むときもしていたのだけど、なんと「変換」ってタイトルで送るとKindle形式に変換してくれるだと…！ って勢いで書いてるうちに変換できたのだけ…

trinity.jp これみればわかる。（雑

hepokon365.hatenablog.com IEではclassListで使えない機能があります。 代表的なのがtoggleとか。 で、今回引っかかったのが const a = b.classList.value.replace(/-/g, '').split(' '); で、IEで未定義またはNULL参照プロパティ'replace'は取得できません…

.eslintrc.jsonに書いてある設定の "extends": ["eslint:recommended"], で、 onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void に対して 'event' is defined but never used とエラーが出ていました。 TypeScriptで型定義でno-unuse-varsのエラーが出ないよう</htmlbuttonelement>…

プロジェクトにeslintを入れてルールを書いてるプロジェクト、 VSCodeのPrettierの設定と、ESLintの衝突を回避したい。とりあえず文末のセミコロン - 青いやつの進捗日記。 このブログでも書いたが、VSCodeの拡張機能のPrettierが.vscode/settings.jsonに書…

最近はじめてstyled componentでCSSを書いています。 で、reset.cssを入れようと思ったのですが、もうそもそもどう入れるのかわからず。 qiita.com を参考にやりました。 入れたresetは github.com こちら。このパッケージをnpmやyarnでインストールして、 _…

www.atnr.net VSCodeのPrettierの拡張機能の設定の Prettier: Semi Whether to add a semicolon at the end of every line と ESLintのプロジェクトに置いた設定の.eslintrc.jsonの "semi": ["error", "never"], が衝突していた。 とりあえずこれを回避した…

HyperSwitchって便利アプリがあります。 bahoom.com Command + Tab で起動しているアプリごとの切り替えは出来ますが、そうではなくウィンドウごとの切り替えが出来るようになります。 GoolgeChromeで複数のウィンドウで見てるとか、VSCodeで複数のプロジェ…

type Props = { option?: string; } export const foo: React.FC<Props> = props = { return ( <div>{props.options}</div> ) } foo.defaultProps = { img: 'dummy.jpg', }; で、 型 'string | undefined' を型 'string' に割り当てることはできません。 型 'undefined' を型 '</props>…

qiita.com これが参考になります。 LiveServerって、拡張機能で開いているプロジェクトをlocalhostで立ち上げられるやつ。BrowserSync等の環境を用意していなくても気軽に立ち上げられるので便利な場面がたまにあります。 marketplace.visualstudio.com プロ…

JavaScriptをES5で書かざるを得ない場面があり、でもnodelistに対してforEachを使いたいので if (window.NodeList && !NodeList.prototype.forEach) { NodeList.prototype.forEach = Array.prototype.forEach; } と書いて使っている時がありました。 で、先…

JavaScriptの「&&」「||」について盛大に勘違いをしていた件 - Qiita const _perview = Number($body.getAttribute('data-perview')) || 'auto'; えっなにこれ、って思ってた。 Number($body.getAttribute('data-perview'))がtrueであればNumber($body.getAt…

タイトルで全て。 1pxで指定しているのに0.990pxって表示されて、その結果見えなくなっちゃったりしてて、これどう対策すれば……といろいろ試行錯誤し、調べていたらStackOverFlowにてこの記事が出てきまして stackoverflow.com I also had this issue. In my…

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

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

nodenvでnodeのバージョン変えようと思ったらnodenvがない的な言われ方して怒られた。 そういえば、macOSがCatalinaになってデフォルトのシェルがbashからzshになっていたのでした。 そもそも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で、同じ要素同士の隣接セレクタの指定として .class { & + & { margin-top: 10px; } } みたいなのあるじゃないですか。なんかずっと腑に落ちてなくて、 .class { + & { margin-top: 10px; } } え、こうじゃないの？ってなぜか思ってたんですよねずっと…

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

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

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

らしい。 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>

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

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

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

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

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

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