その他のサンプル: Wikipedia:良質な記事, Wikipedia:長いページ 紹介 「テキストゆれないくん」は文章に含まれる表記揺れを検出するツールです。「コンピュータ」と「コンピューター」、あるいは「全て」と「すべて」といった同じ単語の別表記が使われていないかどうかをチェックできます。 「テキストゆれないくん」は元々このサイト (https://inzkyk.xyz/) の文章校正用に開発されました。機能が成熟してきたので UI を付けて公開します。 このページから手動で使う限り、「テキストゆれないくん」は商用/非商用を問わず自由に使って構いません。「テキストゆれないくん」は無保証で提供されます。 特徴 ウェブブラウザから使える このページをウェブブラウザで開いているなら、「テキストゆれないくん」は既に動いています。このページの最初にあるのは「テキストゆれないくん」を使うための完

はじめに GitHub Actions (GHA) 、便利ですね。 便利なんですが、動作確認するのに PR 出してマージするのが煩わしい...。そもそも PR する前に動作確認しておきたいし、やたらに PR 作りたくもない...。 そんな悩みを解消してくれるのが act でした。これならローカルで動作確認できるので GHA 開発が捗ります！！ act 使ってみた記事は沢山ありますが、動かすまでに詰まったポイントをお作法として整理 してみました。act の使い方に悩まれている方の参考になれば幸いです。 2024/5/8 追記 act の実行に IAM ロールに追加設定が必要な点を追記しました。 AssumeRole するために sts:TagSession 権限を付与する 対象読者 GitHub Actions を使っている / 使おうとしている方 GitHub Actions の動作確認に

2024/04/24 令和トラベルで発表した Node.js v22 で変わることの話です。

ランダムなパーティクルを中心にシンプルなものから印象的なもの等、背景で参考になりそうなスニペットを幾つかまとめてみました。 Particle Text マウスオーバーで入力した文字の形に変化が起きるパーティクルになります。 マウスに連動して動くものはやはり面白いですね。 表示されるテキストも任意で変更できるのですごく使いやすそうです。 ICOSAHEDRON 3Dのシェイプがランダムに生成され波のように動きます。 Antigravity FLOW アイコンがふわふわと浮き上がっていく様子が可愛くてずっと見ていられます Fluid Simulation こちらもマウスに連動して動くタイプのものになります。 光の粒がドラッグに合わせた動きをするのが楽しいですね。 CSS PARTICLES まるで宇宙空間のような表現、白いパーティクルがゆっくりと上にあがっていきます。 単純な動きですが、ちゃん

本ハンドブックは、WCAG 2.0（JIS X 8341-3:2016）の達成基準をもとに すべての利用者がウェブサイト利用できるようにするためのアクセシビリティ向上の具体的な指針と実践的なアドバイスを提供します。 はじめに ウェブアクセシビリティとは 運用時のウェブアクセシビリティの取り組み 開発時のウェブアクセシビリティの取り組み ウェブアクセシビリティ試験 ウェブアクセシビリティ試験の流れ ウェブアクセシビリティ方針（サンプル） ウェブアクセシビリティ検証結果（サンプル） ウェブアクセシビリティ検証試験実施ページリスト（サンプル） 参考 実装の参考 ツールの参考 達成基準（適合レベルA,AAを解説） 1. 知覚可能の原則 代替テキストのガイドライン 【A】非テキストコンテンツの達成基準 時間依存メディアのガイドライン 【A】音声だけまたは映像だけ（収録済み）の達成基準 【A】キャプシ

PHPカンファレンス小田原2024 の発表資料です。 https://phpcon-odawara.connpass.com/event/296492/ https://fortee.jp/phpconodawara-2024/proposal/7c57d5ca-213a-4d7a-aaf0-26ddc44897f0

言葉の定義 モバファクの 1on1 の目的 1on1 で自分が大事にしていること 1on1 はメンティーの時間である 1on1 はメンターの時間でもある 1on1 初回 今使っている 1on1 のフォーマット 体調 半期目標の進捗振り返り ネクストアクションの振り返り うまくいかなかったこと・もっとよくなりそうなところ・うまくいったこと・その他に話したいこと ネクストアクション 1on1 の中でのやりとり お休みの取り方がわからない 最近見積もりの精度が高くなっている 朝会の議事録をとるようにしたい 最近チームの動きがぎこちないと感じている 1on1 定期的な振り返り まとめ こんにちは。駅メモエンジニアの id:dorapon2000 です。 今回は自分自身がメンター側として実施している 1on1 について、どのように実施しているのかご紹介しようと思います。 1on1 のやり方はメンター

【この連載について】 この連載では、「1週間でGoogleアナリティクス4の基礎が学べる本」を執筆されているWeb解析士のみなさん（GA4アベンジャーズ）を中心に、初心者が引っかかりがちな疑問・トラブル解決の基礎知識から、知っておきたい役立ちノウハウ、解析の設定事例、個々の機能解説、最新のホットな話題までをお届けします。 今回は、フリーコンサルタント「デジタルドクター」としても活動する島田敬子さんによる解説です。 【以下の14のポイントでつまづきやすい！】標準レポートとデータ探索は同じ指標の数字が微妙にずれることがある。どっちのレポートが正しいの？ページビューがない！ユーザー数がわかりづらい！エンゲージメント率と直帰率はどちらを見るべき？離脱率はどこに表示される？閲覧開始数とランディングページの違いは？　セッションあたりの平均エンゲージメント時間と平均セッション継続時間、平均エンゲージメン

先週MacBookAirのM3モデルが発表されて、勢いで買ってしまいました。 普段は行き当たりばったりで必要なアプリをインストールする感じでセットアップしているのですが、もう少しスマートにセットアップしたいので、整理しながらセットアップしようと思います。 スクリーンショットの見た目等が変わると思うのでOSVersion等貼っておきます。 MacBookAirのスペック また、この記事で紹介されていないアプリでおすすめなものやおすすめ設定があればコメントしていただけると喜びます！ OS設定 トラックパッド まず一番最初にやりたいのはOS設定からトラックパッドを選択して軌跡の速さを最速にします。 これをしておくとこの後の作業も早くなるのでまずはこれ。 Dockの整理 MacにはDockというよく使うアプリや起動中のアプリが表示される領域が存在します。 個人的には1軍のアプリしかDockに置いて

Xの初学者のポストにて古の手法を教わっている方をよく見かけるので、2024年現在そのCSSテクニックはもう古いってものをいくつか列挙しました。 ブロックのセンタリングに margin を使うなら margin-inline:auto を使いなさいmarginを使ってブロックのセンタリングを行う際によく教わるのはmargin:0 autoあるいはmargin:autoでしょう。

当ブログのレスポンシブコーディング施策のまとめです。 メディアクエリよりもコンテナクエリを優先する前回の記事でも触れたようにメディアクエリを一切使わずレスポンシブコーディングしました。 僕がメディアクエリを使用しなかった理由は以下の点が気になっていたからです。 各コンポーネントの状態変化をウィンドウのサイズに依存させるのは都合が悪い。実装者はウィンドウのサイズとにらめっこしながらデザインを調整する必要があり、非常に面倒。ある程度の的確な位置・間隔でブレイクポイントを用意するコーディングは効率的だが、全ての画面サイズで完璧な表示を実現するのが難しい。必ずどこかしらのサイズで見た目を妥協しないといけなくなってくる。ウィンドウのサイズではなく各コンポーネントのサイズを基準にデザイン調整するなら、どのように配置されるかを細かく考える必要がなくなる。代わりに、それぞれのコンポーネントが含まれるコンテ

＜この記事の著者＞ ばんか（bamka） - Tech Team Journal Web制作会社の会社員として働きつつ、個人でブログ／メディアライターとして活動するパラレルワーカー。 iPhone・iPad・Mac・ITツールを用いて人々の生活をより豊かにするための活用術を提供する「デジタルライフブロガー」です。 Web制作に関わる人にとって、すでに公開されているWebサイトというのは非常に重要な勉強材料です。中には「こういった表現、次のプロジェクトで使ってみよう」「こういう見せ方いいなぁ。いつかやってみたい」と、いつか役立てたいサイトもあるでしょう。 そういった「参考サイト」は、自分だけのデータベース化しておくと便利です。私はNotionを使って、自分だけの参考サイト集を作成しています。 【目次】 自分だけの参考サイトギャラリーをNotionで作ろう 自分専用の参考サイトギャラリーを作る

週末に自分がよく使っている技術をまとめたら反応が良かったので、テンプレートを作りました。 なにかWebサービスを作るときに、自分はこれらのライブラリを基本的には入れます。 ベースはcreate-next-appとなりますが、そこで生成された状態だと認証もDBも何もありません。 しかし、サービスを作るにあたって必要なケースがほとんどです。 このテンプレートには特定のライブラリを入れると毎回書かないといけない項目等を事前に作っておき、 開発に集中できる仕組みを作るのがゴールとなります。また、例を示しつつ削除するコード量を最小限に抑えます。 主にNext.js固有のハマるポイントや環境構築などめんどくさいけど毎回書いている点をカバーします。 linterと関連があるVSCode, pre-commit等の設定NextAuthに指定されたDB Schemaの作成やAPI routeの設置開発、テス

まえがきアニメーションを多く取り入れたWebサイトが好きかどうかのアンケートを取ると、ネガティブな票が多く占めることがよくありますが、それに関して思うところがあったので「Webサイトにアニメーションは必要あるのか」というテーマで自分の思っていることを言語化してみました。 X (Twitter)で「動くWebサイト　嫌い」で検索 Xでちらっと検索しただけでも動くサイトが嫌い、という方は結構いそうですね。もし「アニメーションはすべて悪」と思っている人がいたらぜひ読んでいただきたいです。 この議論はアプリなどにも言えることですが、私の主なお仕事はWebサイトのフロントエンド実装なので、Webサイトについて書かせていただきます。 また、保険をかけているわけではないですが、私はUI (ユーザーインターフェース) の研究をしている専門家でもないんでもないので、この記事の内容に学術的なものは一切ありませ

IntroductionFor a long time, centering an element within its parent was a surprisingly tricky thing to do. As CSS has evolved, we've been granted more and more tools we can use to solve this problem. These days, we're spoiled for choice! I decided to create this tutorial to help you understand the trade-offs between different approaches, and to give you an arsenal of strategies you can use, to han

はじめに 「eslint-plugin-react の plugin:react/recommended に含まれていないルールにも有効なものがあるよ！みんなで同じようなコンポーネント書いて、レビューを楽にして保守性も上げよう！」という内容の記事です。 この記事では React の関数コンポーネント、TypeScript、Prettier を使っている前提で書いています。そのため、タグの位置調整など Prettier で対応可能なものは Prettier に任せる方針です。 先に結論の .eslintrc.cjs を載せておきます。React 以外の設定は省いています。 { extends: [ "plugin:react/recommended", "plugin:react/jsx-runtime", "plugin:react-hooks/recommended" ], rules: