ブログ
フォームは作ってあった。行き方が無かった
このサイトには、問い合わせフォームが置いてあります。プロフィールページの一番下です。 リンクを探したところ、サイトのどこにもありませんでした。 この記事で扱うこと 作ってあるのに辿り着けなかったフォームの話です。なぜ気づ […]
Criticalが4件並んだ日にやったこと
朝、通知を見たらCriticalが4件並んでいました。どれも同じ相手、Next.js本体です。 この日にやったことを順に書きます。結論から言うと、上げました。ただ、上げる前にやったことのほうが本題です。 この記事で扱うこ […]
印を付けただけでは、探せるようにならなかった
記事一覧のカードには、前から「読了済み」の印を付けていました。 付けた当時は57本でした。いまは110本を超えています。印は役に立たなくなっていました。 この記事で扱うこと 読了の印だけでは足りず、未読だけを出す絞り込み […]
崩れる理由が分かるCSS — ボックスモデルと詳細度（第2回）
CSSが効かない原因は詳細度、幅が合わない原因はボックスモデル。この2つを押さえたうえで、FlexboxとGridの使い分けまで進みます。
生成した画像に、undefinedと書いてあった
記事のアイキャッチは、自分で書いたスクリプトで作っています。タイトルと一言、それに題材に合わせた線画を1枚に組んで、画像として書き出す仕組みです。 連載を続けるために作った5枚を見返したとき、そのうち1枚に「undefi […]
勉強法(4) 教える側に回ると、穴が見える
教える側に回って見えた、自分の理解の穴。答えられなかった質問の種類と、そのあと説明の仕方をどう変えたかです。
勉強法(3) 調べる場所が決まらない時間
「読めない」「分からない」を、調べられる形まで分解する話です。詰まる場所は毎回ほぼ同じ構造をしていました。
再試行は入れていた。それでもデプロイが落ちた
再試行の処理は、半年前から入れていました。CMSが500を返したら、少し待ってもう一度投げる。3回まで。 それでも、デプロイが落ちました。 この記事で扱うこと 再試行を入れてあったのに効かなかった話です。何が返ってきてい […]
勉強法(2) 測らないと、分かったことにならない
このサイトで実際にやった「確かめ方」を3つ。どれも、確かめていなかったら間違ったまま進んでいたものです。
勉強法(1) 1つ作り切ると、広く当たる
ポートフォリオサイトを1つ作るのに、結果として何を触ることになったか。その一覧と、それが「順番に勉強する」やり方とどう違ったかです。
divだらけをやめる — セマンティックHTML（第1回）
同じ見た目でも、HTMLが意味を持っている場合と持っていない場合があります。覚えるタグは8つだけ。divをやめる基準を決めます。
ソース解説(5) 文字列を自分で組み立てる場所
このサイトで、HTMLを文字列として自分で組み立てている場所は2つあります。RSSフィードとサイトマップです。 画面に出るページは、部品を組み合わせれば勝手に出来上がります。この2つは違います。1行ずつ並べて、最後に文字 […]
ソース解説(4) 速くしたら、デプロイが止まった
記事のデータは、共用サーバー上のWordPressから取ってきています。この部分は2回作り直しました。 最初は「常に最新を取る」形。速度の問題が出て、キャッシュする形へ。すると今度は、デプロイが止まるようになりました。 […]
細かく刻んでも直らなかった、経路を変えたら一度で通った
記事のアイキャッチ画像を、CMSへ入れる作業をしていました。画像を文字列に変換して、少しずつ送り込む方法です。 ところが、ときどき壊れます。送った文字列と、届いた文字列が違う。 対処として分割をどんどん細かくしていきまし […]
ソース解説(3) 旗を折るのではなく、読み込まない
クッキー同意のバナーは、置くこと自体は難しくありません。難しいのは、「同意していない人には何も送っていない」と自分で言い切れる形にすることでした。 今回はその部分のコードを読んでいきます。保存する形、版番号を持たせた理由 […]
そのページは何だと名乗っているか
用語集の分類ページを調べていて、妙な指定に気づきました。このページは「記事」だと名乗っていました。 中身は用語が並んだ一覧です。公開日もなければ、書いた人もいません。それでも、SNSや検索エンジンに向けては「これは1本の […]
見た目で区別が付いているものは、機械には区別が付いていない
見た目で伝わっている区別が、機械には伝わっていなかった話です。何が起きていたか、どう直したか、そして「見えるから伝わっている」という思い込みについて書きます。
一覧と詳細だけのアプリで、フロントエンドの全体像を掴む（第0回）
一覧と詳細だけの小さなアプリを、21回かけて作り切る連載です。第0回では最終回に手元に残るものと、積み上げの順番を先に示します。
一部だけ足したつもりが、丸ごと置き換わっていた
1行足したつもりでした。実際には、そのページの共有画像が消えていました。 しかも消えたのは、その日に触ったページだけではありません。調べたら、以前から9ページで同じことが起きていました。画面には出ず、動作も壊れず、誰も気 […]
ソース解説(2) 目次は本文から作る
本文が文字列として届くこと、そこから見出しを拾う方法、既にあるidを勝手に変えてはいけない理由、そして読んでいる位置をどう追いかけているかです。
「送っていない」と言い切るために、同意まで読み込まないことにした
止める対象の数え方、旗を立てる方式と読み込まない方式の違い、スクリプトが無い環境の扱い、そして同意の記録に版を持たせた理由です。
ソース解説(1) 全体の地図と、境目の引き方
このサイトの作りについては何度か書きましたが、中のコードそのものには触れていませんでした。 ここから何本かに分けて、実際のファイルを開きながら説明していきます。まずは全体の地図と、読むために知っておいたほうがいい前提から […]
同じ「丸み」でも、比べる相手が違えば別の表に置く
フッターの上の角を丸めています。ページの下に別の面が敷かれている、という見え方を作るためです。 ところが、実機で見返すと「もう少し丸くていい、50pxでもいいくらい」と感じました。当時は14pxでした。 この記事で扱うこ […]
フロントエンドエンジニア養成読本 — 知らないものは、検索できない
フロントエンドの知識が、断片のまま溜まっていました。 必要になるたびに調べて、動いたら次へ進む。それを繰り返していたので、個々のやり方は知っているのに、全体のどこに位置する話なのかが分かっていない状態でした。 この記事で […]