const a = function(v){ return console.log(1); } a(); // => 1
![[JS]アロー関数の「v」の正体が、かなり地味に判明した件 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/f360c0fb7d63554208bd9bcfc05846d9246d9675/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSlMlNUQlRTMlODIlQTIlRTMlODMlQUQlRTMlODMlQkMlRTklOTYlQTIlRTYlOTUlQjAlRTMlODElQUUlRTMlODAlOEN2JUUzJTgwJThEJUUzJTgxJUFFJUU2JUFEJUEzJUU0JUJEJTkzJUUzJTgxJThDJUUzJTgwJTgxJUUzJTgxJThCJUUzJTgxJUFBJUUzJTgyJThBJUU1JTlDJUIwJUU1JTkxJUIzJUUzJTgxJUFCJUU1JTg4JUE0JUU2JTk4JThFJUUzJTgxJTk3JUUzJTgxJTlGJUU0JUJCJUI2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1mMTJjMTVkZjc1ZGNmMDZhNDdhODI2Zjg1OTNmNWU1ZQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBwb25fbWFlZGEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWIzNDI3ODM4MGE4MjM1Yzk2ZTY1OTkwZDc4NTZkMDU5%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D04ad7ca2bd32c56545aa40e92ba3667a)
[JS]アロー関数の「v」の正体が、かなり地味に判明した件 - Qiita
const a = function(v){ return console.log(1); } a(); // => 1
少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集 – TAKLOG
少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。最近クローズドな場所で登壇を行ったのですが、そちらで話した内容を纏めたものにいくつか内容を追加したものとなります。 原則的にこのブログで取り入れられている手法だったり過去の記事で触れた手法を紹介したものです。 button要素には touch-action:manipulation を指定するiOS限定の話ではありますが、button要素をつい連続でタップすると画面が拡大表示されてしまい非常に煩わしいです。 ポストを別枠で表示する そのため、パンおよびズームのジェスチャーは有効にしつつダブルタップ時のズームなどの標準外の追加的なジェスチャーを無効にするtouch-action:manipulationを指定して誤作動を防止しておくと良いでしょう。
令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
【vscode】TypeScriptで不要なimport文を自動削除＆自動で並べ替え - Qiita
はじめに こんにちは！@nyakako13 です。 少し前からtypescript,reactの学習を進めています。 pythonでの開発時はblack formatterとiSortの拡張機能でimport文の自動並べ替えをしていました。 今回、typescriptの開発でも同じように自動でimport文の整理ができないかな？と思い調べてみました。 eslintやprettierでもplugin等で実現できるみたいですが、現在は一人での開発で、すべてのプロジェクトに適用したいので、とりあえず今回はvscodeの設定でやってみます。 vscodeの設定方法 vscodeのsetting.jsonを開きます 下記を追記します。 "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.organizeImports"
How to use JSON Path · Bump.sh
A few years ago most API designers, developers, and technical writers would have had very little reason to bump into JSONPath, but its starting to get more and more relevant as more tools and standards start relying on it. So what is JSONPath, what is it used for, and how can you get up to speed with using it? JSONPath is a query language that can be used to extract data from JSON documents, which
コンポーネント | プロダクト | SmartHR Design System
SmartHR UIが大切にしていることSmartHR UIの開発における価値観や行動指針を以下のように定めています。これらはただ大切にしているだけでなく、開発コミュニケーションやタスクの優先順位づけなどにおける判断基準としても使っています。 使い勝手を損なわないことUIコンポーネントの使い勝手は、プロダクトの使い勝手に直結するため非常に重要です。 ユーザーエージェントの振る舞いからかけ離れないようにすることやアクセシビリティに取り組むことも使い勝手に関わります。もちろんプログレッシブエンハンスメントな考え方も大切にしています。 またコンポーネント単体の振る舞いだけでなく、プロダクトで一貫したUIになっているかどうかも忘れてはいけません。 開発者の生産性を損なわないこと私たちは、サービスを通じてプロダクトの利用者や社会に価値を届けることを目的にしています。その状態に早く到達するためにも、質
TextLink | コンポーネント | SmartHR Design System
デザインパターン特別なテキストリンク特定の役割を示すためにアイコンを使います。これはテキストが異なっていても、同じ挙動であることを示すためです。 新規ウィンドウで開くテキストリンク新規ウィンドウ（新規タブ）で開くテキストリンクには、テキストの右側に 新規ウィンドウ アイコン（FaUpRightFromSquareIcon）を必ず配置します。リンク先がSmartHRの内部ページ、外部サイトに関わらず表示します。
IME変換中のエンターキーで送信される！への対処法[追記あり] - Classi開発者ブログ
[2024年4月25日 追記] Safariの動作について考慮漏れがありましたので、一部追記・編集しました。 新宿にオフィスのあるClassiは、岡山在住の私のような地方在住者だけでなく、いわゆる通勤圏内に在住していてもリモートワークで働いている人が多い会社です。必然的にミーティングはいわゆるオンラインミーティングとなり、主にGoogle Meetが利用されています。 そのGoogle Meetのチャット機能、ここ1週間ぐらい「IMEで日本語に変換のために押すエンターキーで送信されてしまう」という現象が発生しています。このエントリーを読まれている時点では対応しているかも知れませんが、2024年4月22日17時時点ではその現象は続いています（Windowsでは再現しないという情報もあります）。 入力開始 変換して確定のエンターキーを押すと 送信される エンターキーに頼らない日本語入力を頑張り
![IME変換中のエンターキーで送信される！への対処法[追記あり] - Classi開発者ブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/0afc6ee0863caae4e576ca7dfc69f2761a288290/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F26006613504214060%2F6801883189100834220%2F1714006878)
rebase 教から脱退します - Qiita
rebase で色々あったので、備忘録として簡単に書いていきます。 前提背景 開発作業中、元のブランチに変更があった場合、私は変更を取り込むために常に rebase を使用します。これを選ぶ主な理由は「コミットログが見やすく保たれるため」です。 Gitには同様のコマンドとして merge がありますが、これは変更を取り込む際にマージコミットを作成する点が異なります。私はマージコミットによってコミットログが煩雑になると感じています。 このような理由から、私はrebaseを積極的に使用しています。 何があったのか 簡単に言うと、レビュー中にブランチ元の変更があったので、 git rebase からの git push -f origin [ブランチ名] やったらレビュアーのコメントが吹き飛びました。 いやー、めっちゃ怒られたよね💦 原因 「レビュー中」という状況がまずかった。 コードを共有し
Vite/VueでChrome拡張機能を作ってみる | 4. 環境構築/開発編 - くらげになりたい。
前回の続き。Vite/CRXJS/Vueで作るときの備忘録(*´ω｀*) www.memory-lovers.blog 使ったサンプルはこちらで公開中(*´ω｀*) github.com 環境構築 プロジェクトの作成 # viteでプロジェクトを作成 $ pnpm create vite chrome-extension-sample --template vue-ts $ cd chrome-extension-sample # .npmrcを設定 $ echo "auto-install-peers=true" > .npmrc # @crxjs/vite-pluginの追加。vite3はbeta版 $ pnpm add @crxjs/vite-plugin@beta -D manifest.jsonの設定 manifest.jsonが必要だけど、CRXJSでは.tsにも対応してる。
ハーフ・レディング算出用の SCSS の mixin - Qiita
line-height による余白 「セクション間は 50px 空けたい」という場合、margin-top: 50px;という指定をすると50px以上空いてしまいます。 これは line-height の仕様により、以下のように行の上下に line-height - font-size から算出された値が割り当てられるからです。 この例の7pxの部分をハーフ・レディングと呼びます。 そのため、50px に 7px が加わり、57px の余白になってしまいます。 解消方法 厳密に余白を設定したい場合は、以下の設定をする必要があります。 margin-top: 43px; を設定する margin-top: -7px; を見出しに設定する しかし、どちらにしても毎回計算をするのは面倒なため、ハーフ・レディング用の mixin を作成し、計算を自動化しておくと効率が上がります。 mixin の作
【HTML】dl, dt, ddで組みたくなる表、tableにするのがいいかもね（スクリーンリーダーと検索エンジンのために）
dl や ul で組むべきでないという主張ではありませんので誤解のなきよう！ dl で書くんだ！と思える人はそれがいいと思います😉👍 私自身は dl と table が HTML の使い方としてはどちらも正解で差がないように感じられて、どちらを使うべきか判断がつかず悩んだ末、具体的なメリットの部分を見て table にしたという話です。 同じように迷った人の参考になれば幸いです。 詳しくは以降で説明します。 想定する表の内容 この記事の議論では、名前と値の組が複数並んでいる、メタデータの表を想定します。 プログラミング言語でいうところの、連想配列 (Map, Dictionary, JS では Object) の構造に相当します。 具体的には以下のようなものです。 会社概要（「会社名：〇〇、所在地：〇〇、資本金：〇〇、…」） 商品の仕様表（「商品名：〇〇、価格：〇〇、サイズ：〇〇、…」
フォームのセレクトボックスとチェックボックス・ラジオボタンをCSSで装飾する | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは制作の奥田です。 お問い合わせフォームで、テキストフィールドやテキストエリアを装飾するのはとても簡単なんですが、セレクトボックスやチェックボックス・ラジオボタンの装飾はクロスブラウザの問題などでちょっとややこしいイメージをお持ちの方も多いと思います。 しかし、IE8以前のサポート終了によりIE9以降の対応でよくなったのを期に、フォームをデザインすることが容易になってきました。 せっかく良いデザインにしてもフォームの要素がデフォルトのままだとなんか残念な気持ちになりますよね？ というわけで今回はCSSのみでフォームを装飾する方法をご紹介いたします。 セレクトボックスの装飾まず、select要素の挙動を統一するため、要素をappearance: button;でボタン要素にしてしまいます。 select::-ms-expandでIEの矢印を非表示にします。 select:-moz-f
タブやアコーディオンの非表示コンテンツには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"を使
レイアウト手法の新しい武器になるCSSグリッドレイアウト入門 | cho-men
CSSのグリッドレイアウトが、主要ブラウザーで利用可能になってからしばらく経ちました。しかし、floatやFlexboxなど従来の手法で目的のレイアウトが実現できることも多く、あまり活用できていないケースもあるのではないでしょうか。筆者自身も、まだまだその使いどころに迷うことが多いです。 この記事では、CSSグリッドレイアウトの基本的な使い方を図版を交えて紹介します。基本のプロパティを整理し、実際のレイアウトでどのように活用できるのか見ていきたいと思います。 CSSグリッドが得意なレイアウトグリッドレイアウトは、格子状のグリッドを使用して要素の配置をコントロールするレイアウトシステムです。 引用：https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Grids上図のように、複数の行と列を使って柔軟なレイアウトを構築することが可
Yu Gothic UIに text-spacing-trim を適用するとバグる
以下のツイートを見て、自分の環境でも再現したので気になって調べてみた。 現象 text-spacing-trim プロパティを Yu Gothic UI のテキストに適用すると、一部の括弧類が重なってしまう。これは値に space-all を設定すると解消される。 halt と hmtx を見る Windows に標準搭載される Yu Gothic UI や游ゴシックには、GPOS テーブルに halt 機能タグが含まれている。 halt 機能タグの正式名称は「字幅半角メトリクス」であり、全角の約物を半角として扱う際などに位置を補正する役割を持つ。text-spacing-trim プロパティの実装においても、この halt の値を見て文字詰めを決定している。 TTX（fontTools が提供する解析ツール）を用いて、Yu Gothic UI／游ゴシック の halt と hmtx（水平
それでも私が<wbr>でなくinline-blockで改行調整をする、たった1つの理由
inline-block を使う理由、それは 入れ子構造を作れることにより、改行位置の優先順位をつけられるから！ 詳しくは以降で説明します。 （前提）そもそも改行調整ってなんの話？ このタイトルを見て記事を開いた方であれば知っていると思いますが、一応説明です。 スペースで単語が区切られる欧文とは違い、日本語は単語の区切りがないので、改行すべき位置を機械的に判断できず、不自然な位置で改行されてしまうことがあります。そこで、見た目を整えるため、改行すべき位置を指定するための手法が必要になります。 他に詳しい記事がいくつもありますので、詳細はそちらを参照してください。 代表的な改行調整の手法 <wbr> 要素 <wbr>要素は、改行してよい位置を表す要素です。 親要素に対して word-break: keep-all; を指定して基本的には改行されないようにすることで、<wbr>要素がある位置で
令和時代の CSS 記法再考
昔は CSS と言えば壊れやすい代名詞のようなもので、堅牢な CSS を書くためによく BEM や FLOCSS といったCSS 設計記法の縛りを入れて書いたりしていましたが、最近は React と Scoped CSS のセットで書くことが多くて、素の HTML/CSS で設計記法を遵守した CSS を書く機会はだいぶ減りました。 衝突を気にしなくて良い環境で CSS を書いているので BEM (Block/Element/Modifier) で言うところの Element あたりはあまり気にならなくなりましたが、Modifier の扱いに関しては引き続き現役というか、むしろコンポーネントの Props などでより意識をする機会が多くなったように感じます。 ちなみに 自分は CSS in JS に関しては若干距離を置いてるというか、Scoped CSS が実現できれば十分で、ユーザーに負
cool844自作キーボードキット - mki0002ozlet - BOOTH
◯注意 ・このキーボードはハンダ付けと組み立てが必要なキーボードキットです。 ・組み立て済みの写真は作成例です。 ・キーキャップ、キースイッチ等別途購入なものがあります。 ・以下の説明とビルドガイドをよく読み、ご理解の上、ご購入を検討ください。 ・私自身が使用することを目的で発注した最低生産数の残りを頒布しているため、在庫は多くありません。おまけとして、M2ネジ、M2スペーサー、シリコンワイヤー線を付けます。大したものではありませんが、余剰分を買って頂けた方への感謝の気持ちです。 ・もし売り切れていて、それでも欲しいと思う方がいらしたら、入荷お知らせメール登録を登録してください。追加発注します。ただ、在庫補充まで２週間ほどかかります。その間に、購買意欲がなくなったも気にしないでください。（4月16日加筆修正） ・右奥箇所のねじ止めができるようになったPCBがver.1.1となります。 ht
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
あなたが教わってるそのCSSテクニックはもう古い ｜ TAKLOG
