PWAを一旦ホーム画面に保存して、ページの一番上が表示されている時(スクロールしていない状態)で上から下に引っ張る(スワイプする？に入るのかなこれも)と上部に謎の空白ができるんだけど、多分これはアプリとかで上から下に引っ張るとページを更新するPull…

色々書き比べた結果Tailwind CSSにしたという話 - Qiita メジャーな方法をいくつか紹介してからの流れで出してくれたのでそれぞれの良さとか違いがわかりやすいとても良い記事だった やっぱりアーティスティックな感じのUIは厳しいんだなと思うが、そもそも…

.top * + * { margin-top: 1.5em; } これぱっと見せられたら一瞬考えてしまう、特に+とかほとんど使わないので topクラスを持つ要素の子or孫要素の中で、何かしらの要素の兄弟要素にのみmarginをつける(つまりfirst-childにつかない)と言うこと

GitHub - tc39/proposal-intl-segmenter: Unicode text segmentation for ECMAScript ちょうど文章を単語ごとにくぎりたいことがあってどうしようかと思っていたところにすごいものを見つけた。Chromeではもう使える！ああでもこれSafariでも動かさないとい…

Introducing WebContainers: Run Node.js natively in your browser このターミナルで走ってるNode.jsはリモートのVMとかじゃなくてブラウザで動いているとのこと 興味深い… Devtool使ってバックエンドのデバッグできるのは結構惹かれるものがあるかもしれな…

Docker/Kubernetes で PID 1 問題を回避する | text․superbrothers․dev 普段Dockerをあまり使わないからまず考えたこともなかったけど調べると結構色々でてくるから割合メジャーな問題みたい

初心者がつまづいた、PWAアプリSafari版でホームボタンのアイコンが読み込まれない件 - Qiita iOSでPWAをホーム画面に保存しようと思うとSafariになるんだけど、manifestにアイコン追加しておくだけでは使ってくれなくてサイトのスクショがアイコンで使われ…

Wake Lock APIを使うと画面をつけたままにしておくことができるが、サポートがかなり限られているので、現時点だとNoSleep.jsのようにブラウザに応じて別の方法を適用してくれるユーティリティを使うのが現実的な気がする。

ブラウザはまだgRPCを解釈することができないので、gRPC-webのようなproxyが必要。Envoyなどが使われることが多い。

またの名をただ人に薦めたいものリストともいう。本当は買ってよかったもの2021みたいにできるといい感じなんですがそんな綺麗に区切れなかったのでここ一年ということで。 個人的に好きなだけのものが多いので汎用性は無いかもしれない。 冷凍生麩 ZENBヌー…

Compat2021: Eliminating five top compatibility pain points on the web Aspect-ratioはやく心置きなく使いたいからこれはありがたい gridでアニメーションできる(ブラウザによるけど)のは知らなかった Recreating the Fool's Mate chess move with CSS Gr…

Python のタプルとリストの違い、タプルの使いどころ - Life with Python なるほど、tupleはimmutableだからdictのキーに使えるんだなあ

WSGIアプリケーションとは？WebフレームワークからWSGIサーバーまで - Make組ブログ DjangoやFlaskといったフレームワークはWSGIという仕様に乗っ取って開発されているので、WSGIサーバー上で動かすことができる。Flaskで作ったアプリをgunicornでパッと立ち…

今までの海外ドラマおすすめまとめはこちら ネタバレなし感想 - 魔法学校とか人間界と違う世界とかハリポタ的要素はあるけどハリポタほど幻想的というかいわゆる魔法という感じではない。杖とか出てこなくて、元素を操る感じ。あとハリポタ後半くらいには最…

:focus-visible - CSS: カスケーディングスタイルシート | MDN キーボードでfocusした時のみ、みたいなことができるらしい 知らなかった…！

About rel=noopener 普通にtarget="_blank"使うとopenerでreferenceを与えてしまって背後で何かされる恐れがあるからnoopenerつけようねという話 昔聞いたなそういえば あの時は社内サイトから社内サイトのリンクだったのであまり気にしなかった 派生して、_…

CSS3D！まるでWebGLのような3Dを超気軽に実装するCSS技 3D感を出すにはtransform-style: preserve-3dが必要。これないとrotateとかで奥行き込みの回転させてもペラッペラになる

lru_cache 自分でtableとかsetとか用意しなくてもmemo化できる機構があるとは…dequeもあるしいわゆるLeetcode的な問題を解くのにPythonが人気なのもわかるなあ Making GitHub’s new homepage fast and performant - The GitHub Blog SVGでmaskできるの知らな…

文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA 和文フォントに慣れすぎているのか、詰まっている方にむしろ違和感を感じてしまう 数字との抱き合わせでズレるとかの調整には使えそう、でも今ま…

100 Days of CSS カーソルにくっついてくるタイプのアニメーション。正解と照らし合わせたいところ 波紋のように広がる輪っか。wrapperに作成してドットをabsoluteで中央配置？scaleで広げてopacityで消滅 →:afterでborderをアニメーションさせてた。なるほ…

DFS, BFS この解説が定型を掴むのにわかりやすかった 基本のポイントは一回訪れた場所をチェックしておくことと、進みながら次にスタートする地点を記録しておくことかなあ 記録の仕方はstuckに入れておくパターンが一番汎用性高そうだけど、Number of Islan…

ページ内でidを使ってジャンプ(スクロール)した時に指定した要素事態が画面外にいってしまう問題は、negative marginと同じ高さのpaddingを設定することでいい感じに位置を調節することができる。

Advanced English Vocabulary | Frequently Confused Verbs - YouTube メモ woundedは肌に傷ができるタイプの怪我のこと。切り傷や打たれた傷など。 hurtはinjuredと比べるとより一般的な「怪我」。特定の怪我ではなく「誰も怪我をしなかった」という広い意…

CSS Animation animation-directionにalternateを設定すると、0 -> 100% と100% -> 0の両方向で再生できる

CSS Logical Properties 例えばmargin-startはテキストが縦書きか横書きかで指定される場所が変わる。論理的ってそういうことかー 【JavaScript】FetchAPIとaxiosの違いって？機能やメリットを比較 私は素でfetchAPI使って実装したことがない(axiosも)ので何…

ダークモード対応 JSでOSのダークモードの設定を取得するには、メディアクエリをmatchMediaで読むのが良いらしい: 参考

CSS変数とSass変数 Sass変数はあくまでコンパイル前までしか存在しないのでランタイムで動的にテーマ切り替えとかができない 切り替え可能なダークモードの実装とかにはCSSh変数の方が適していそう