ブログをリニューアルしました
お久しぶりの更新です。ブログをリニューアルしました。 お久しぶりです。 久しぶりのブログ更新です。 ブログのデザインをリニューアルしたいなーと思い立ち、リニューアルを推進するために自分自身にブログのデザインを刷新するまではブログを更新しないぞ、という制約をかけてました。 その過程で TTIL なんていう雑メモ置き場的なサブ・ブログを初めてしまい、本家のこちらの更新をサボっておりました。 が、一念発起してブログをリニューアルしました。 技術スタック ブログの技術スタック…という程大きな技術スタックの変化はないのですが、今回のリニューアルで使った技術を紹介します。 （🆕 が付いているのが今回のリニューアルでの新たな取り組み） Blog Engine: Jekyll Hosting: GitHub Pages 開発中のホスティング: Cloudflare Pages (🆕) CSS: Tai
似ているけどちょっと違うものをスタイリングする CSS テクニック - mizdra's blog
React + CSS Modules なプロジェクトを例にサンプルコードを書いてるけど、それ以外の構成のプロジェクトでも使えるテクニックのはず。記事タイトルは id:hitode909 さんの 似ているけどちょっと違うものたちをモデリングする技術 - hitode909 のリスペクトです。 data 属性, 属性セレクター, CSS カスタムプロパティを使う 記事のリストがあって、記事のカテゴリごとに文字色やボーダーの色を変えたい、みたいな状況だったとする。多分素朴に書くと以下のようになるはず。 import styles from './Entry.module.css'; import clsx from 'clsx' function Entry(props) { return ( <div className={ clsx(props.category === '暮らし' ? s
2024年からはTailwindを使い続けると決めた理由 | Cntlog
ずっとCSSのStyleをいい感じに使いたいと思いつつ、しっくりくるの運用が見つけられず2024年からTailwindを使い続けることを決めました。 Tailwindはこれまでにも何度か使っていたのですが、いつも別の選択をしていたのですが最近のフロントエンドの状況やAIコーディングの進歩を考えると最善ではないかもしれないけど外れない選択肢と決めました。 同じような悩みを持たれてる方に向けてどういう背景からTailwindを使うように決めたのかをこの記事で整理します。 私が悩んでいたこと 悩んでいたことは下記のようなことで、Tailwindを選ぶことで緩和できたと考えています。 ReactのStylingは結局どれを選べば良いのか ChatGPTなどのAIツールに情報をおくるときにstyleのデータも送るのか悩む Stylingが決まっていないのでプロジェクト毎にコンポーネントやディレクトリ
BEMで底に達した問題を探す問題のために生まれる問題 - saneyuki_s log
最近、社内のいろんなプロジェクトのリポジトリを眺めているとスタイルシートの記述にstyled-componentsとかwebpackのcss-loaderとかで頑張っているものを頻繁に目にする。 んで、Lintとかどうしてるの？みたいな話をすると「〜はこの『A（どこかのCSS-in-JS派閥の一つ）』は対応してないんだよねー」という返答が返ってくる。 そのたびに思う。「BEMで問題解決してたんだからBEMでいいじゃん」と。 このようなことを言うと「JVMのJITコンパイラの仕組みを聞いた後に『アセンブラを生で書けばいいじゃん』と言い出す痛いおじさん」感がするので自分でもあんまり好きじゃない。ただ、CSSに関してはBEMで問題が底に達してしまっていて、そこから先の標準化されてないwebdevツール群は問題を再発明しているだけに過ぎないなと思う。 書き味をどう頑張ろうが結局我々はCascadi
限定公開URLについて適当に書く - 日々量産
過去に限定公開URLっぽい機能を実装したので、その時考えていたことを書こうと下書きを始めてから1年以上経ったものを手直しして公開しています。具体的なコードとかは出てきませんし、終始フワフワした感じで歯がゆい感じかもしれませんが、ごめんなさい。 はじめに まず、限定公開URLについては、渋川よしき先生のスライドが詳しいです。特にURLに使う識別子(?)の長さにおけるセキュリティ強度の各サービスの比較と検討に関するページは貴重なまとめだと思います。 （URLの性質を考えればできることは知っていたが、Capability URLといった呼び方があることを知ったのがこのスライドでした） docs.google.com またスライドでも触れられているW3CのCapability URLのデザインに関する記事もわかりやすいです。 どういうものか、使い時、注意点といった話もすべて書かれています。 w3c
控えめな App Router と持続可能な開発 - PWA Night vol.59
PWA Night vol.59 ～フロントエンド設計の振り返り〜 (2024.01.17) https://pwanight.connpass.com/event/306410/ で使用したスライドです。本編 20 分。 ===== ▼ 元データで参考リンクとして張っていた URL たち ※ SpeakerDeck でダウンロードできる PDF はスライド中のリンクが有効です Offers「オファーズ」 - エンジニア、PM、デザイナーの副業・転職採用サービス プロダクト開発組織/エンジニアリング組織のマネジメント・パフォーマンス最大化 | Offers MGR（オファーズマネージャー） turbo/examples/basic at main · vercel/turbo Web フロントエンドの推しディレクトリ構成と Next.js App Router なコードベース | Offe
組織内サーバーをCloudflare Accessで保護してみた話
Twilogの亡骸を抱きしめながらおひとり様Mastodonを立てる こんにちは。日々是発見が楽しみな西山です。 とある事情があって、自分用のおひとり様Mastodonサーバーを構築しました。 とある事情とはTwitter社のAPI規約改定で、今まで自分のTwitterアカウントの全ツイートを「Twilog」というサービスで残していたのが取れなくなってしまいました（Twilog運営の方、長い間大変お世話になりました……）。 仕方なく「自分がツイートすると「IFTTT」でアクションが起動し、おひとり様MastodonにAPIで投稿する」という代替手段でツイートのログを取ることにしました。 このMastodonインスタンスはAPIの連携投稿を受け付け、ツイートのログをためていくだけで、手動投稿もしないし他のユーザーを作る事もありません。 完全なプライベートインスタンスなので、自分以外アクセスで
【GitLab】scaffdog + Docusaurus + GitLab Pagesでリリースドキュメントの生成・運用を楽にしてみました - OPTiM TECH BLOG
この記事は、Advent Calendar 2022 / DevOps・インフラ・SRE「GitLab Advent Calendar 2022」の22日目の記事です。 はじめに こんにちは、AI・IoT サービス開発部のがんがんこと岩丸です。 今年も技術記事を読むのが忙しい季節がやってきましたね。昨年はVue.js + TypeScript + Vuetifyに関する記事を執筆しました。今年はGitLabに関した記事を執筆いたしました。 今回はGitLab Pagesに関する記事です。 前回も GitLab に関する記事を執筆しており、前回の記事ではGitLab Runnerで AWS Lambda 用 ZIP 生成を行いました。もしお時間ある方は合わせてご覧ください。 https://tech-blog.optim.co.jp/entry/2022/09/12/100000 今回はsc
WordPress を導入する前に、人間は怠惰で弱い生き物であるという事実と向き合った方が良い - nico0927's log
WEB 制作を生業としてきた私にとって、今日までWordPress という単語を見かけない・聞かない日は無かったというほど、このCMS は業界内での確固たる地位を、順調に確立し続けてきた。 実は私は、フリーランスだった3〜4年ぐらい前に、もうWordPress は終わると勝手に思っていた。 「かちびと.net」や「Web デザインレシピ」といったWordPress のハウツー記事を配信するブログが隆盛を極め切り、Jekyll やMiddleman といった静的サイトジェネレーターが再び注目され始め、そこにGhost が登場してきた頃の話だ。 しかしWordPress は死ぬどころか、感覚的には増々その勢いを増していった。 この実感には当時の私の無知に加え、どちらかといえば受託制作の現場で過ごす時間が多かったことも影響していると思う。 今では顧客がWordPress の存在を知っていて、「W
ブログ記事を書くのはめんどくさい - xarsh
ブログの記事を書くというのはマジでめんどくさく、しかししばらく経ってから読み返すと案外面白いという唯一の利点のために10年くらい投稿している。めんどくささをできるだけ排除し、少しでも楽をするためにこまごまとした工夫はたくさんある。コマンドひとつでfrontmatter付きの新しいMarkdownファイルを作れるようにMakefileを書いたり、git pushしたら勝手にビルドして公開するようにしたり、404を検知できるようにしたりと、記事投稿やサイト運用のハードルを定期的に取り除きつづけないとわたしはめんどくささに負けてブログを放置してしまうのだ。 旅行系の記事に貼り付ける画像を用意するというのもまたとんでもなくめんどくさい。たくさんある写真から載せたい画像を選び、記事中に貼れるサイズに縮小し、固定URLを発行し、Markdown形式で記事に貼り付ける、という手順を画像の枚数だけ繰り替え
WordPress 5.9で実装されたフルサイト編集機能とは – ワードプレステーマTCD
サイトヘルスに表示される「永続オブジェクトキャッシュを使用してください。」の解決方法 2024.04.17
最小のHTML文書とは何か - Qiita
何が最小の (最短の) HTML 文書であるか、というのはたまに話題になります (実用上はあまり意味がありませんが)。答えは少し複雑です。 Web ブラウザーなどに含まれる HTML 構文解析器はどんな入力が与えられるかわかりませんから、任意の文字列を処理できる必要があります。構文解析器の立場では、空文字列 (長さ0の文字列) が最短の HTML 文書となります。 しかし任意の文字列がすべて意味のある HTML 文書を構成しているわけではありません。そこで HTML の仕様に適合するもので文字数が最短のものを考えることにします。 原則 HTML 文書には、最低でも DOCTYPE と html 要素が必要です。 html 要素には、 head 要素と body 要素が必要です。しかし、これら3つの要素の開始タグと終了タグは、曖昧でなければ省略できます。 (タグを省略しても、要素は暗黙のうち
ちょっと見てて面白かったので : As Sloth As Possible
なんか金縛りにあって眠れなくなったのでTwitter見てたら面白いやりとりをみかけた。すげー大雑把に要約すると、こんな感じ。 Railsの勉強をしてる人が「なんでHello worldしたいだけなのにDB必要なの！？DB使うにしたってMySQLなんか今必要じゃないしチュートリアルではSQLiteとかにしといてくれたっていいのに！プリプリ！」みたいな呟きをする 「いやRails使うんなら普通DB要るでしょ。なんでそこに文句言ってるの。」とツッコミが入る 「とりあえずチュートリアルは一番簡単なやり方書いといてくれた方が親切じゃないですか。」と反論 「いやだから、Railsを使うのに一番当たり前の構成を作るのにはどうしたらいいかがチュートリアルでしょ。それが必要ないんなら別なの、例えばSinatraとか使えばいいじゃん。フレームワークの特性も分からずに使っておいてチュートリアルがおかしいとか筋違
ブログをAstroに移行した
ブログを Astro に移行した Astro とは Astro の公式サイトの説明を見てもらうのが早いかもしれない Astro is an all-in-one web framework for buildingfast, content-focusedwebsites. コンテンツ主体のウェブサイトを高速に作れるオールインワンウェブフレームワーク、という説明だが実際使ってみた感じ概ね合っていると思う. 特徴的なのが Astro で採用している Island Architecture と呼ばれるアーキテクチャで、UI の各コンポーネントを Island (島）のように見立ててそれぞれ独立したマイクロフロントエンドのように扱うことが出来る構成になっていること。 完全に Static な HTML とレンダリング後に Hydration (静的な HTML に後からイベントハンドラを設定)し
デベロッパーツールと Wireshark のキャプチャーを紐づけ - troushoo
デベロッパーツールと Wireshark のキャプチャーを紐づける方法を紹介します。 手順 (Chrome で試しています) 1. Chrome を起動し、「その他のツール」から「デベロッパーツール」を起動します。 2.「ネットワーク」タブに移動し、タイトルの列を右クリックし「接続 ID」にチェックを入れます。 ＊タイトルが表示されていない場合は、任意のサイトを開き HTTP の接続を実施すると表示されます。 3. 新しいタブで chrome://net-export を開き (Edge の場合は edge://net-export で開けます。)「Start Logging to Disk」をクリックします。 4. ログを保存するために、任意のパスを開きます。 5. Wireshark でパケットキャプチャーを開始します。 6. デベロッパーツールのタブで、キャプチャーしたいアクセスを実
当ブログを GatsbyJS で作り直した
式年遷宮です。54. YATTEIKI の本が商業書籍化決定！ そして Coinhive の話 でも少し話題にしたのですが、元気を出したいときはブログを作るのがよくて、定期的にブログを作っています。思い返してみると、この習慣はプログラミングをしたことがないような頃からありました。それこそガラケーでHTMLタグ打ってたような時から。その時代にできる一番テンションの上がるスタックでブログを組むというのが楽しい。 まずはデザイン含め Rails で組んでいたブログの構造をそのまま GatsbyJS に移行するというところからはじめました。見た目変わっていないので、以前から知っていた人は違いに気づかないレベルかと思います。ちょくちょく改良を加えていきたい。 GatsbyJS GatsbyeJSというのは React 製の速度に特化した静的サイトジェネレーターです。自分のフロントエンドスタックとして
負荷試験ツールのk6が良さそう - rochefort's blog
またもやisucon本から。 前回はこちら（アクセスログの集計ツールのalpが良い ）。 達人が教えるWebパフォーマンスチューニング 〜ISUCONから学ぶ高速化の実践 作者:藤原 俊一郎,馬場 俊彰,中西 建登,長野 雅広,金子 達哉,草野 翔技術評論社Amazon 本題 負荷テストツールとしては、Apache JMeter、Apache Bench（ab）辺りをよく使っていましたが、 isucon本で紹介されているk6の感触が良かったので、ご紹介です。 installationはmacだとbrewでサクッと入るので省略。 使い方 シナリオをjsで書いて、コマンドで実行するだけです。 本書で紹介されていたab的な使い方だと、以下のような感じです。 import http from "k6/http"; const BASE_URL = "http://localhost"; expor
shimba.co をCrystalで作り直した | shimba.co
このサイト、ほとんど更新していないのに何度作り直すんだ…という感じだけど作り直した。 今まで Write.as というブログホスティングサービスを利用して公開していた。 Webブラウザから雑に記事を書いて公開できるのが楽で良かったんだけど、スタイルの調整などは少しやりづらかった。 最近はGitHubのリポジトリ上でファイルを作ったり編集できたりするので、 Markdownファイルをリポジトリに置いてWebブラウザからファイルを編集すればブログホスティングサービスを利用するのと大差ないのでは？と思い始めた。 作り直すにあたり以前みたいにJekyllなどの静的サイトジェネレータを使うのも良いかもと思ったが、 最近またCrystalに興味が出てきたので、 練習がてらKemalというCrystal製のWebフレームワークを使ってページを作ることにした。 このサイトのリポジトリはこちら。 言語やフレ
しぶとく生き残る、いにしえのタグ - Qiita
Web 2.0よりも前の世界 まだNetscape Navigatorがブラウザのシェアを握っていた頃… 「iモード」が時代の先端だった頃… CSS 1.0すらブラウザ互換が取れなかった頃… そんな時代には、HTMLであらゆる表現のディテールを書き込むほかありませんでした。ページは<table>でレイアウトして、フォント調整には<b>、<i>、<u>1や<font>といったタグを使っていました。 もちろんJavaScriptもまともに使えるような状況ではなかったのですが、そんな中で用意された、動きのある要素が<marquee>でした。 懐かしの風景 マーキーでカクカクと流れてくる文字は、独特の風情を持ったものだったと、（そんなものがなくなった今になってみれば）思うかもしれません。ただ、画像なんかをマーキーにされた日には、たまったものではなかったでしょう。 HTML5にももちろん取り込まれる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ブログを自作の静的サイトジェネレータ Salmon に移行しました