ウェブページのタイトルの生成方法に関する最新情報をGoogleが発表した developers.google.com Google はウェブページのタイトルを生成する新しいシステムを導入したみたい 新システムではタイトルタグだけではなくサイトの内容をみてドキュメント全体をより…

ReactとTypeScriptにStyledComponentを使って見出し用のコンポーネントをつくりasにh1〜h6までの要素を渡せるようにしたい <Title as={props.sectionLevel || "h2"}>{props.title}</Title> このとき、sectionLevelをstringにしていたら、型チェックエラーがでた TS2769: No overload matches this call. Over…

RustのcharとStringと&strについて char型 char型の場合は「'」シングルクォートを用いる この辺はJavaと一緒なのですんなり理解できる charは0x0000から0xD7FFまで、もしくは0xE000から0x10FFFFまでのUnicodeポイントを保持する つまり、Unicode Scalar Val…

RustをIntelliJ IDEAでRustを書こうと思ったが[New Project]でRustが出てこなかったのでちょっと焦った 調べたらプラグインのインストールが必要だが、バッチリ対応していた IntelliJ Rustというらしい www.jetbrains.com シンタックスハイライトはもちろん…

WebAssemblyに興味をもった昨今、こちらのイベントで@chikoskiさんが「エコシステムとWebAssembly」というタイトルで登壇されていたので参加メモ oss-x-users-meeting.connpass.com Angry Botsの紹介 Unity WebGL Player - AngryBots WebGL Demo UnityがWebA…

はじめて触った言語はFortranで、先人が書いたコードをスパコンで動かすというようなことをしたことがある そのあとCとC++も同じような感じでちょっとだけ触ったことがあるが、どちらもメモリを正しく管理することが難しいというか、あまり理解できぬままにJ…

フロントエンドが学ぶべき言語がTypescriptの次はRustかもしれないというお話しを聞いて、なぜRustなのかを自分なりに答えられるように調べてみた （2021/9/17 更新） この記事の執筆時点ではwasmが目的というまとめ方をしましたが、その後いろいろ調べた結…

画像の圧縮方法を調べていたらlibsquooshというのを知った github.com web.devで記事になっていた web.dev そもそもsquoosh.appというのがあり、これがブラウザで画像を圧縮することができるPWAということ（オフラインでも動く）、そしてChrome DevSummit 20…

画像圧縮するためにimagemin-cliを使うことにした github.com インストールと使用方法はREADME通り $ npm install imagemin-cli $ npx imagemin --help Usage $ imagemin <path|glob> ... --out-dir=build [--plugin=<name> ...] $ imagemin <file> > <output> $ cat <file> | imagemin > <output> Options</output></file></output></file></name></path|glob>…

8月4日くらいから自社サイトが利用しているGCPで、認識していない料金が発生している 具体的には以下の２つのSKUの費用がいままでよりもかかっていて Network Internet Egress from Japan to Americas Network Internet Egress from Japan to EMEA どちらも1…

自社サイトをスマホでみてみたらアイコンが全部表示されていない障害をみつけてしまった 原因は最近対応したこれだった uga-box.hatenablog.com webpackのurl-loaderをつかって、スプライトSVGをimportするようにして、次のようにSVGアイコンを実装していた <svg> <use href={sprite + "#icon-star"} /></use></svg>…

深夜に自社サイトをスマホでみてみたら障害をみつけてしまい、急いでソースを確認しようとGitHubからソースをpullしようとしたらエラーがでてpullができなかった $ git pull origin master remote: Password authentication is temporarily disabled as part…

検索キーワードのサジェスト機能をつくるときにinput type="search"は使うべきか？と聞かれて答えられなかったので調べた developer.mozilla.org ドキュメントより input要素の search 型は、ユーザーが検索クエリを入力するために設計されたテキスト入力欄…

Java Bean間のマッピングにMapStructを使っている uga-box.hatenablog.com 他にどんなものがあるのか気になっていたが、下の記事にまとまっていたので、これをもとに自分でもまとめてみた www.baeldung.com Dozer https://github.com/DozerMapper/dozer#what…

Speed Insightで自サイトを計測したときにLCP（Largest Contentful Paint）で改善できる項目としてLargest Contentful Paint の画像のプリロードが挙げられていた web.dev プリロードは特定のリソースに優先順位を付けてダウンロードする必要があることがわ…

2021/10/27 更新 この記事にあるようなことをしなくてもやりたいことが実現できたので、以下の記事も合わせて確認してください。 uga-box.hatenablog.com 以前の記事のPostGISを使った緯度経度検索で、取得結果を次のプロパティをもつDTOを用意した private …

ページ内のあるセクションにidを付与しておき、ボタンをクリックしたらその位置までスクロールする機能を作りたい jQueryを利用していた時代ではanimateをつかって次のように実装していたが const $target = $('#js-scroll-to-target'); if (!$target) { ret…

AssemblyScript が WebAssembly グループから非推奨にされてしまう可能性があるという話で、その前提の話になるUnicodeとサロゲートの話を聞く機会があったが全くわからなかったので自分なりに復習してみた Unicodeとかサロゲートペアは以前調べてたが、特に…

SVGのぬり色を変更したい場合、SVGにfillのスタイルを当てていたが、例えばエラー時に文字色とボーダーと合わせてSVGの色も変えたいというときに面倒 そんなときcurrentColor を使ったら簡単になることを知ったので調べた https://www.w3.org/TR/css-color-3…

下のようなリストを実装するときにモダンなブラウザとFlexboxのgapを使えば簡単に実装ができるが、gapを対応していないブラウザの場合にどうするか考えた 全ての要素にmargin-rightを設けてしまうと、右端の列に不要な余白ができてしまうので、3n-2（n=1,2,3…

Figmaの階層構造はTeams > Projects > Files > Pages に分かれているが、これをどう使うかは各プロジェクトに委ねられている（公式見解はあるが当てはまらないところが多い） そんな中でFigma見せ合いっこというイベントがあり、そのまとめ記事があったので…

ABテストをやっていて、BパターンはSEO毀損の恐れがあるためGooglebotの場合はAパターンの表示したいという要望があった UAでGooglebotかどうかを判定するというのをやれると思っていたが、やったことがなかったの調査した ここにGooglebotの概要が書かれて…