`<aside>` 要素のアクセシビリティマッピングが変更
W3C が公開している HTML Accessibility API Mappings 1.0において、2022年4月4日付で <aside> 要素のアクセシビリティマッピングが変更されました。 Suggest <aside> should map to complementary with restrictions · Issue #86 · w3c/html-aam aside mapping revisions by scottaohara · Pull Request #350 · w3c/html-aam 本記事ではなぜこのような変更が行われたのか、 Web 制作者が注意すべき点を含めて確認してゆきます。 <aside> 要素はセクショニングコンテンツなので、 <section> や <article>, <nav> 要素と同じく比較的自由な場所に配置できます。 以下は HTML
TypeScriptのJSDocサポートでできること、できないこと
TypeScriptの主要な入力ファイルは .ts, .tsx, .mts, .cts ですが、JavaScriptファイル (.js, .jsx, .mjs, .cjs) も読み込んで処理することができます。JSDocによる型アノテーションを認識するため、生のJavaScriptでもそれなりに型をつけることができます。 本稿ではタイトル通り、TypeScriptのJSDocサポートでできることとできないこと (.ts でしかできないこと) をまとめます。 おことわり 本記事はTypeScript 4.4時点での実装状況に基づいています。なるべくソースコード中の関係する箇所を参照するようにしたので、今後の変更はご自分で検証してください。 (TypeScript Playgroundで試すだけでも有用です JavaScriptモードで開始できるリンク) JSDocの機能一覧・TypeScri
Node/Deno でソースコードにテストを書く
tl;dr ファイルをそれ単独で単体テストとして実行するボイラープレートを編み出した そのヘルパとして mizchi/test という実装を作った なぜソースコードにテストを書きたいか Rust や Python の doctest ではソースコードにテストを書く方法があります。 ソースコードにテストを書けると、コードとテストの心理的な距離が近くなってテストが書きやすくなる、という肌感があります。(諸説あります) 実装とテストが混ざって汚れるのが嫌という意見も理解できますが、それはありつつ認めた上で、あとでリファクタする前提で最初の一歩をその実装に書けると嬉しい、という気持ちがあります。 現状の Node だととりあえず assert するだけという単純なテストを書くことは可能ですが、構造化する方法がないので、簡単なスクラッチの時ぐらいしか行われません。 // test.js import
Zodで真のTypeScript firstを手にする
fullstack TSなアプリケーションも増えてきた昨今、TSでvalidatorを実装する際に何を採用するかは一大トピックです。今回は、その中でも新しめなライブラリでありBlitzも採用しているZodについて見ていきます。 Zodとは Zodの特徴として、Schema firstなvalidationライブラリであるというのがあります。 validateするschema（単一のschemaからobject, arrayまで）を定義し、それをベースにparseするというものです。 公式にあるexampleを見てみましょう。 import { z } from "zod"; // creating a schema for strings const mySchema = z.string(); mySchema.parse("tuna"); // => "tuna" mySchema.p
TypeScript without TypeScript -- JSDoc superpowers
One way to think about TypeScript is as a thin layer around JavaScript that adds type annotations. Type annotations that make sure you don’t make any mistakes. The TypeScript team worked hard on making sure that type checking also works with regular JavaScript files. TypeScript’s compiler (tsc) as well as language support in editors like VSCode give you a great developer experience without any com
Use CSS Variables instead of React Context
I've been riding the CSS-in-JS train for years (I was even a significant contributor to the "movement"). It's awesome. I've never been so productive working with CSS than when I added the power of JavaScript to it. I'm still a fan of CSS-in-JS, and in recent years, the CSS spec has evolved and improved a lot and modern browsers have too (unfortunately, Internet Explorer is NOT a modern browser in
Lazy Load Routes in Vue with webpack Dynamic Comments | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. The way routing works in JavaScript is usually that you specify which relative URL pattern you want for which component to render. So for /about you want the <About /> component to render. Let’s take a look at how to do this in Vue/Vue Router with lazy loading, and do it as cleanly as possible. I u
「SEOに強いHTMLの書き方」についての個人的な見解
「SEO に強い HTML の書き方」というツイートがそこそこバズっていて、その内容に対して駆け出しエンジニアの方たちが「参考になった」などと称賛の声を挙げていたのを見かけて思うところがあったのでこの記事を書きました。 元ツイの概要は次の通り。 body > main > article > sectionに h1は 1 ページに 1 つ（要キーワード） 見出しタグは毎度 section で囲む ヘッダーメニューは nav で囲む 画像に適切な alt を設定する title / description を書く 階層を意識して書く div はあまり使わない 画像は p で囲む この記事は元ツイおよび元ツイの投稿者を批判する意図で書いたものではなく、あくまで挙げられている内容に対する個人的見解をまとめたものです。 正しいか正しくないかをそれぞれの項目のはじめに書いていますが、あくまで僕個人の
W3CとIETF、「WebRTC」が正式な標準仕様に到達したと発表
W3CとIETFは、WebRTCが正式な標準仕様に到達したことを発表しました。 The @W3C and the @ietf are pleased to announce that Web Real-Time Communications (WebRTC) is now an official standard, bringing audio and video communications anywhere on the Web.https://t.co/GCHkDK7BHH pic.twitter.com/gBwdap47sO — W3C (@w3c) January 26, 2021 The @ietf and @w3c are pleased to announce that Web Real-Time Communications (WebRTC) is now an offi
Deno in 2020 | Deno
With API stabilizations, several large infrastructure refactors, the 1.0 release, and shipping the single most requested feature, 2020 brought a lot of action to the Deno project. Please fill out the Deno survey to help guide our development in 2021. Read on for Deno’s review of the year. January: Goodbye libdeno, hello rusty_v8 libdeno was a C++ library that facilitated an interface between V8 en
ぼくのかんがえたさいきょうの useState + useContext よりも Redux のほうが大抵勝っている
「Redux は学習コストが高い」などと言って useState（または useReducer）と useContext を組み合わせ 劣化 オレオレ Redux を作ってしまうのを見かけます[1]。よくないことだと思いますが、気持ちは非常にわかります。Redux エコシステムがそういう気持ちにさせてしまう部分は大いにあります。 Redux は それ単体なら 学習コストは useReducer + useContext と同等であることを示してこの気持ち（誤解）を解かしつつ、なぜそういう気持ちになってしまうのか考察してみます。 まず useState と useReducer の違いを押さえておく 知っている方はスキップしてください。 useState と useReducer は本質的には同等で、どちらもコンポーネントにステート（状態）を持たせる役割があります。次のようなカウンターアプリ
Automation: Which Is the Best?
Puppeteer, Selenium, Playwright, Cypress – how to choose? At Testim, a lot of what we do is build AI-based features on top of automation frameworks to add stability,… At Testim, a lot of what we do is build AI-based features on top of automation frameworks to add stability, accelerate test creation, and improve root-cause analysis. We evaluate a number of test automation frameworks to understand
Next.jsでトークン設定済みのAxiosを使えるようにしてみた - Qiita
経緯 Axiosに認証トークンを設定する処理を共通化したい 何ならAxiosを使用する際にトークン設定済みの状態にしたい 方法 Axiosのインスタンスを生成→ヘッダーの設定→そのインスタンスの返却、を行うラッパー?ソースファイルを用意する。 各ソースファイルでAxiosを使用したいときは、そのラッパーファイルから呼ぶようにする。 実装 ラッパーファイル（例：customAxios.ts） import axios from 'axios'; // Axios本体をインポート const instance = axios.create(); // Axiosインスタンスを生成 instance.interceptors.request.use( (config) => { // 認証トークンをヘッダーに付与 config.headers.common['Authorization'] =
Atomic CSS-in-JS
With utility/atomic CSS, we acknowledge it’s ok to couple the structure and presentation layers: when we need to change the button color, we modify the HTML, not the CSS. This tight coupling is also acknowledged in modern CSS-in-JS React codebases, but it seems the CSS world figured out first that the “separation of concern” of the web didn’t feel right. Specificity is also less a problem, as we u
C++ is faster and safer than Rust: benchmarked by Yandex
Myth 1. Arithmetic in Rust is no safer than in C++Myth 2. The only strong point of Rust is object lifetime analysisMyth 3. Function calls in Rust mindlessly take up memoryMyth 4. Rust is slower than C++Myth 5. C → C++ — noop, C → Rust — PAIN!!!!!!!Myth 6. unsafe disables all Rust checksMyth 7. Rust won't help you with C librariesMyth 8. Safety of Rust hasn't been provenConclusion Spoiler: C++ isn'
JavaBeansって言葉に煩わされない - 日々常々
JavaBeansって言葉を目にして、ふと検索してみたらあまりに酷かったので書いておこうかと。対象は「JavaBeansってなんだろ？」と思ってしまった初学者さん。でもそんな人って私のブログ読むんだろうか…… 今後は「このエントリ参照」にするつもりで書いてみる。 文字列連結と+演算子について整理しておく みたいな感じ。 ShortAnswer JavaBeansを学ぶ必要はありません。JavaBeansと説明されているものの多くは、JavaBeansの名前を借りた独自の物体です。 長い説明 「あまりに酷い」と「要らない」だけだと流石にアレなので、仕様を斜め読みしながら説明していきます。あ、EJBには触れません。まぜるなきけん。 仕様について JavaBeans仕様としてげったーせったーがーとか、こんすとらくたがーだとか、しりあらいざぶるがーだとか。よく見聞きするのだけど、仕様って読んだんだ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
現場で使用していたGitコマンド集 - Qiita
Next.jsとRustのTypeScriptなWebAssembly生活 - Qiita