タブやアコーディオンの非表示コンテンツにはhidden="until-found"を使うべし ｜ TAKLOG
タブやアコーディオンの非表示コンテンツにはdisplay:noneがよく用いられますが、hidden="until-found"を利用するほうがメリットがあります。 hidden=“until-found”で非表示にしたコンテンツはページ内検索でアクセスできるuntil-foundはhidden属性に新たに追加された属性値です。 hidden - HTML: ハイパーテキストマークアップ言語 | MDN 従来のhidden属性とは違い、until-found"属性値を指定した場合はブラウザのページ内検索やページ内リンクでそのコンテンツが検出された場合、自動でhidden属性が取り除かれて表示することができます。 従来のdisplay:noneを使用した非表示ではコンテンツ内にページ内検索でマッチすべきワードがあったとしても検出できませんでしたが、hidden="until-found"を使
npm scriptsで画像を最適化する（WebP変換とファイル監視を含む）
要件 srcディレクトリにある画像を対象に最適化する 最適化した画像は構造を変えずhtdocsディレクトリに出力する jpgとpngはWebPへの変換に対応する WebPのフォールバックが必要な案件に備えてjpgとpngも同時に出力できるようにする WebPを使わない WebPを使うけど、フォールバック画像が必要 フォールバック画像は不要で、WebPを使う パッケージをインストールする 画像最適化に必要なパッケージをインストールします。 npm i -D imagemin-keep-folder imagemin-mozjpeg imagemin-pngquant imagemin-gifsicle imagemin-svgo imagemin-webp imageminだとディレクトリ構成が無視されてしまうIssueが挙がっています（マージされている気配はなさそう？）。 今回は「imag
Responsive Samples by unshift
「固定値型」では、フォントサイズが固定値となるため、ヘッダーのコンテンツ幅によっては入り切らない場合があるため、ビューポートの幅が1280px未満の場合はSNSリンクを非表示にしている。 「相対値型」では、ビューポートの幅が変わってレイアウトに影響がないので、PCレイアウト時はSNSリンクは常に表示。 「固定・相対値複合型」では、「固定値型」の範囲内でフォントサイズが固定値となるため、ヘッダーのコンテンツ幅によっては入り切らない場合があるため、ビューポートの幅が1280px未満の場合はSNSリンクを非表示にしている。 「固定値型」では、ページのコンテンツの幅同様に、間延びを防ぐため最大幅を1680pxに設定。ビューポートの幅が1680pxより大きい場合は中央に配置される。 「相対値型」では、ページのコンテンツの幅同様に、常にヘッダーのコンテンツの幅がビューポートの幅と一致するため、最大値を
プログラミング初心者からthree.jsに慣れるまで｜misaki nakano
こんにちは。 私は現在クリエイティブディベロッパーという、フロントエンド＋WebGL 実装する仕事を2年半ほどやっています。 1年半東京の会社で働いたあと半年間フリーランスをして、その後アムステルダムの会社に入社して現在8ヶ月経ちます。 three.jsで絵を作るのが好きで、仕事でもプライベートでもこんなかんじのものを作っています。ほとんどtwitterにあげてるので、興味がある方はぜひ見てみてください。 最近ツイッターのDMでどうやってthree.jsを勉強すればいいかアドバイスが欲しいというのをもらうことが多くなってきたんですが、この質問に答えるのは難しいなと感じています。 人によって得意不得意があるし、始めようと思った時点でどのくらいプログラミングや数学に精通しているか人それぞれすぎて、これがベストな勉強法！これをやれば誰でも大丈夫とは言えないです。 この記事では、私が初心者レベルか
「“課題を見つけて分解する力”と“コードを書いて解決する力”は全然違う」 増井雄一郎氏が明かす“エンジニア力”の本質と鍛え方
「Windowsもインターネットも全然普及してない時からプログラミングに夢中だった」 “まずはやってみる”を大事にする、増井雄一郎氏の原動力とは 自分の強みは「新しいことをおもしろがって勉強できる」こと ーー増井さんご自身が考える、自身のエンジニアとしての強みはどこでしょうか？ 増井雄一郎氏（以下、増井）：新しいことを覚えられるというのは、やはり強みとしてあるなと思います。 1つの技術の初めから終わりまでは、だいたい20年でワンサイクルだと思っているんですよ。要するに、本当に初期から関わればその技術はだいたい20年ぐらい使える。逆に半分ぐらいから入ると10年ぐらいしか技術のライフタイムがもたないんですよね。 一昔前の35歳定年説みたいな話があったのもそうで、社会人の2年目、3年目ぐらいはたくさん覚えることがあるからたくさん勉強するじゃないですか。だけど、だいたい技術は10年ぐらいで陳腐化す
Usage with Next.js – SWR
In Next.js App Router, all components are React Server Components (RSC) by default. You could only import the key serialization APIs from SWR in RSC. import { unstable_serialize } from 'swr' // ✅ Available in server components import { unstable_serialize as infinite_unstable_serialize } from 'swr/infinite' // ✅ Available in server components
なぜReactは標準でComponentをmemo化しないのか？
はじめに 普段はスタートアップでBtoB SaaSの開発をしているtaroと申します。 今回は、Reactのmemo化について考えている中で抱いた 「なんでReactは標準でComponentをmemo化していないんだろう？」 という疑問を解消するために、色々と調べたり考えたりした内容をまとめました！ 途中でrenderのタイミングや、memo化で再renderが抑えられる理由などの前提知識の復習も含めていて、memo化について詳しくない方もmemo化の勉強にもなると思うので、ぜひぜひ読んでみてくださいー！ なぜこんな疑問を抱いたのか？ まずはそもそも僕がタイトルにあるような疑問を抱いた背景です。 疑問を抱くまでの思考プロセスはこんな感じです。 「再renderが余分に走ってて画面が重いから最適化したいなー」 →「React.memo()を使ってComponentをmemo化しよう！」 →
CSS filter generator to convert from black to target hex color
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
Webフロントエンドパフォーマンスチューニング80選 - Qiita
こんにちは、ぬこすけです。 近年、Webフロントエンドではサイトのパフォーマンスの重要性が高まっています。 例えば、GoogleはCore Web Vitalというパフォーマンスに指標を検索結果のランキング要因に組み込みました。 また、近年の某企業が「パフォーマンスの改善に取り組んだ結果、セッション数〇％アップ、CVR〇％アップ...」などの事例は枚挙にいとまがないでしょう。 パフォーマンスチューニングするためには、定量的に計測してボトルネックを探すようなトップダウンなアプローチもあります。 しかしながら、時には千本ノック的にハウツーを片っ端から試していくボトムアップなアプローチも有効になることもあったり、日々のコーディングでパフォーマンスを意識したコードを書くことは大切でしょう。 この記事ではパフォーマンス最適化のハウツーを紹介します。 パフォーマンス改善の施策が思い浮かばない時やフロン
Firebase の代替プラットフォーム「Supabase」
Firebase側にはこれ以外の様々な機能(Crashlytics等)がありますが、Supabase側にはありません。 まずは認証とデータ周りをしっかりとサポートしていくのだと考えられます。 価格 2020年12月現在、無料で使用できます。 2020年12月以前をαバージョン、2020年12月以降をβバージョンとしており、βバージョンのユーザは1年間無料でWeb上の機能が使用できます。 そのため、2021年あたりからクラウド版のホスティング料金体系が出てくるのではないでしょうか。 また、スポンサーとして貢献することも可能です。 触ってみた所管 データ構造が違う Firebaseとの一番の大きな違いは、Firebaseが NoSQL に対して、Supabaseは PostgreSQL を選択している点です。 Firebaseも確かに便利ではありますが、Realtime Databaseの作法
新聞広告に「書体名」を掲載したのはなぜ！？ ファミリーマートの新プライベートブランド「ファミマル」のパッケージデザインの舞台裏に迫る ｜モリサワ note編集部
新聞広告に「書体名」を掲載したのはなぜ！？ ファミリーマートの新プライベートブランド「ファミマル」のパッケージデザインの舞台裏に迫る 新聞広告は時代を映す鏡…なんて言われますが、そこで使われているフォントも気になるモリサワnote編集部です。 2021 年10月19日朝刊に掲載された全面見開き（30段と言われます）広告に、社内がざわめきました。ファミリーマートの新しいプライベートブランド（PB）「ファミマル」をお披露目する内容です。 今回、その広告をきっかけに、パッケージデザインの舞台裏を追いかけてみることになりました！ 2021 年10月19日掲載 読売新聞30段広告 より1. A1ゴシックの名が広告に!?冒頭の広告では「社内資料ですが、広告します。」とのコピーとともに、パッケージデザインのコンセプトやガイドラインが細かく紹介されています。よくよく見てみると、そこに「書体名：A1ゴシック
Next.js root ディレクトリをシンプルにしたい。 - かもメモ
Next.js でプロジェクトを作ると root ディレクトリに routing をするための /pages が作られるのでコンポーネントなどのファイルを作ろうとすると root にディレクトリが増えてしまっていって見通しがあまりよろしくないので、react のプロジェクトのように /src ないにまとめていい感じにしたかったメモ Next.js + TypeScript + ESLint + Preiiterでプロジェクトを作った状態 こんな感じのディレクトリ構成になってる / |- /.vscode |- /node_modules |- /pages |- /public |- /styles |- .gitignore |- .eslintrc.js |- .prettierrc.json |- next.config.js |- package-lock.json |- pack
無料のWindows10仮想マシンをEdge/IE11検証用途で使う
こんにちは、エクスチュアの権泳東(コン・ヨンドン)です。 普段Windowsを使ってないのですが、Web解析の仕事をしてるとやはりEdgeブラウザやIE11での動作確認が必要な時があります。 こういう時、会社にいれば検証用のWindows機を使えますがリモートワーク中だと困ります。 しかし、マイクロソフトはデベロッパー向けに90日間無料で使えるWindows仮想マシンイメージを公開してます。 もちろんEdgeブラウザもIE11もインストールされてます。 実際に使ってみましょう。 Windows仮想マシンを入手 今回はOracleが無償で公開しているVirtualBoxという仮想化ソフトを利用するので、VirtualBox上で動作するWindows仮想マシンのイメージファイルをダウンロードします。 Virtual Machines – Microsoft Edge Developer Cho
Record, replay, and measure user flows | DevTools | Chrome for Developers
Take a glance at the new Recorder panel (preview feature) with the video below. Complete this tutorial to learn how to use the Recorder panel to record, replay, and measure user flows. For more information on how to share the recorded user flows, edit them and their steps, see the Recorder features reference. Open the Recorder panel Open DevTools. Click on More options > More tools > Recorder.
[Web フロントエンド] esbuild が爆速すぎて webpack / Rollup にはもう戻れない - 株式会社カブク
TypeScript + Preact + Material UI + material-table で作っている管理画面のビルドツールを Rollup から esbuild に変えたお話です。 2021/01/07 追記 esbuild に新しく CSS ローダーやプラグイン機構が実装されたので紹介記事を書きました！ esbuild の機能が足りないならプラグインを自作すればいいじゃない https://www.kabuku.co.jp/developers/create-your-own-esbuild-plugin はじめに これまでの JavaScript ビルドツールと私 以前は私も定石通り「アプリには webpack、ライブラリには Rollup」をビルドに利用していましたが、近年はアプリのビルドにも Rollup を利用することが多くなり、 webpack を利用することはな
WordPress 管理画面のカスタマイズ まとめ | hijiriworld Web
WordPress管理画面のカスタマイズ詰め合わせ ※随時更新していきます ダッシュボード 不要なウィジェットを削除 カスタムウィジェットを追加 ウィジェットの配置を変更 投稿画面 不要な項目を削除 エディタ ビジュアルエディタを無効にする HTMLエディタの不要なボタンを非表示 HTMLエディタにカスタムボタンを追加 フッター サイドメニュー メニューの名称変更 メニューの並び替え メニューを非表示 カスタムメニューを追加 管理バー サイト側の管理バーを非表示 不要な項目を削除 投稿一覧画面 不要なカラムを削除（投稿、ページ、カスタム投稿タイプ） カスタムカラムを追加（投稿、ページ、カスタム投稿タイプ） ソート機能も実装した応用技 ログイン画面 スタイルを変更 ログイン/ログアウト後のリダイレクト先を変更 バージョンアップ通知をOFF WordPress本体のバージョンアップ通知 プラグ
カスタムタクソノミーのパーマリンクをいい感じにしたい
デフォルトのパーマリンク わかりやすくするため、カスタム投稿タイプ名を赤色に、カスタムタクソノミー名を青色、ターム名を緑色にしています。 ■カスタム投稿タイプ記事一覧ページ（archive-ownersblog.php） http://サイトアドレス/カスタム投稿タイプ名/ http://libre-co.com/ownersblog/ ■タクソノミーページ（taxonomy.php） 階層化タイプ： http://サイトアドレス/カスタムタクソノミー名/親ターム名/子ターム名/ http://libre-co.com/ownersblog-cat/tabearuki/wasyoku/ 階層なしタイプ： http://サイトアドレス/カスタムタクソノミー名/ターム名/ http://libre-co.com/ownersblog-tag/italian-tag/ ＊タクソノミーページにはカ
ブラウザのFavicon(ファビコン)でユーザーを追跡する「スーパークッキー」とは？
ブラウザのタブなどに表示されるFavicon(ファビコン)は、サイトのシンボルとして重要なアイコンです。しかし、このファビコンにはCookie(クッキー)のようにユーザーを追跡可能な「スーパークッキー」の問題が潜んでいると、研究者らが警鐘を鳴らしています。 Tales of Favicons and Caches – Persistent Tracking in Modern Browsers (PDFファイル)https://www.cs.uic.edu/~polakis/papers/solomos-ndss21.pdf supercookie • workwise https://supercookie.me/workwise ファビコンとは、サイトのシンボルマークとしてタブやURLの隣などに表示される小さなアイコンのことです。 イリノイ大学シカゴ校のセキュリティー研究者らは2021
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Caninclude
「檸檬堂」やバルミューダの家電、最後発で勝てるワケ - 日本経済新聞
