developer.mozilla.org developer.mozilla.org以前からAndroidのChromeには搭載されていたものの、iOSのSafariには搭載されてなかったWeb Share APIですが、iOS15にてついに有効になったとのことなので、早速実装してみました。一番ハマったところは、naviga…

passiveをfalseにしてtouchmoveのEvent.preventDefaultを実行すれば、Pull to Refresh（引っ張って更新）を止めることができます。 document.addEventListener('touchmove', function(evt) { evt.preventDefault(); }, { passive: false }); 今回は、touchmo…

今朝、iOSを15にアップグレードしつつ、Mac版のSafariも最新にしてみたところ、どちらもサイトによってメニューバーやナビゲーションバーの色が変わるようになってました。Safari15から、theme-colorを評価するようになったようです。developer.mozilla.org…

通常、positionをfixedにした要素の親要素のoverflowをhiddenにしても、はみ出した部分は隠れません。 HTML <div class="parent"> <div class="child"></div> </div> CSS .parent { position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 160px; height: 160px; background: red; overfl…

developer.mozilla.orgMDN Web Docsにてwindow.closeの仕様を確認してみると、 Window.close() メソッドは、現在のウィンドウ、またはそのページ上で呼び出されたウィンドウを閉じます。このメソッドが許可されるのは、window.open() メソッドを用いたスクリ…

基本的には、React.cloneElementを使い、propsを固定した状態のcomponentを作るのがセオリーのようです。ja.reactjs.orgイメージ的には、Function.prototype.bindを使って引数を固定した関数を作るのに似ている気がしました。developer.mozilla.org実際に例…

functionで宣言した関数の中でthisを使うと、 'this' implicitly has type 'any' because it does not have a type annotation. とエラーが出ます。アローファンクションと近い、functionによる関数宣言は実行方法によってthisが変化するからです。TypeScrip…

Node.jsで普通にimportを使おうとすると、 SyntaxError: Cannot use import statement outside a module と怒られます。いままではおとなしくrequireを使ってきましたが、世間はもう2021年。子供の頃思い描いていた未来です。 そう。流石にimportを使いたい…

4年ぐらいぶりにシリアル通信を行うElectronアプリを作りました。おぼろげながら、 electronとserialportを普通に組み合わせるとエラーが出る rebuildすると使える という4年前の記憶がありまして、まずは、electron + serialportで中身が空っぽのアプリを作…