OGPを使ってMarkdownのリンクをカード型のリンクにマークアップする
ContentfulとNext.jsで作る技術ブログ Hello World ContentfulとNext.js、そしてVercelを使ってポートフォリオ兼技術ブログとなるサイトを作った。フロントエンドエンジニアとして、単に技術の知識を共有するだけで... 一般的なブログサービスやQiita、Zennといったサービスでは、Markdownに記述した外部リンクがカード的なUIで表示されることがある。これは OGP (Open Graph Protocol) という仕組みを使った表現で、単なるテキストリンクよりもずっと見栄えがいいのでこのブログでも実現したいと思っていた。先日試行錯誤してひとまず形になったので、この記事ではその実装の方法についてまとめておきたいと思う。上に貼り付けたこのブログ自身へのリンクがそれにあたる。 Next.js （ブログ記事のSSGに使用） marked （Mark
CSSのローディング・アイコンのコスト
今までは主にアニメーションGIFで作られていたローディング・アイコンをCSSアニメーションで作るみたいなのが流行っている。面白いとは思うし、ちゃんと作ればスケーラブルなので便利そうでもある。けれどもローディング・アイコンを表示するための空要素が必要になり、かつ後にそれを消さなくてはならない。CSSだけだと面倒くさそうだ。 どういうローディング・アイコンかはこの際問題ではないので、とりあえずmain要素以下に何かしら(仮にサムネイルとする)をロードするまでローディング・アイコンを表示することを考えてみる。普通はJavaScriptでローディング・アイコンの追加→サムネイルのビルド→ローディング・アイコンの削除→サムネイルの追加とやるわけだけど、ローディング・アイコンの追加と削除でDOM操作を伴うのはコストがある気がする。 <main id="result"> <div class="spin
Read Watirways | Leanpub
1. Introduction 1.1 Watir gems Watir consists of three gems (or projects): Watir - This gem is just a loader. Based on the browser that you want to run and your operating system, the Watir gem will load either Watir-Classic or Watir-Webdriver. Watir-Classic - This is the original Watir gem that drives Internet Explorer. Watir-Webdriver - This gem allows the driving of additional browsers - eg Chro
Latest topics > CSS3セレクタとXPathでの表現の対応表 - outsider reflex
Latest topics > CSS3セレクタとXPathでの表現の対応表 宣伝。日経LinuxにてLinuxの基礎？を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能！ « getElementsByなんちゃら の代わりにXPathを使う Main Mozilla 24 » CSS3セレクタとXPathでの表現の対応表 - Sep 13, 2007 拡張機能勉強会の時に焚き付けられた、Text Shadowのコード（textshadow.js）を教材にして拡張機能開発のノウハウを解説していくシリーズ。 XPathをノードの検索に活用する方法を紹介したけど、肝心のXPathが書けなきゃ意味がないわけで。でもXPathって、ノードセットがどうとかノードテストがどうとか軸がどうとか修飾がどうとか、い
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
