Random Note 2024-06-21
STATE OF JS 2023
State of JavaScript 2023
The 2023 edition of the annual survey about the latest trends in the JavaScript ecosystem.
Vite is soooooooo awesome.
Nuxt is too.
Vue is also moving in the right direction.
vite-study
yesterday, we hold vite-study#10.
we read this blog. so great.
Hot Module Replacement is Easy - Bjorn Lu
If you've built projects with Vite, chances are you've also used Hot Module Replacement (HMR). HMR allows you to update your code without...
basic concept of Vite's HMR (lifecycle, boundary, accepts, etc...)
Now I can better understand how and where replacement or reload occurs when an update occurs to the module shown in this image.
Hot Module Replacement is Easy - Bjorn Lu
If you've built projects with Vite, chances are you've also used Hot Module Replacement (HMR). HMR allows you to update your code without...
interesting!
Relearn the design system
since yesterday, I'm work on design system at one project.
so, I started relearn the design system.
fow now, I'm reading the "デザイントークンの作り方".
[受注生産] デザイントークンのつくりかた - 単行本（新装版） | putchom
概要2023年のFigmaのグローバルカンファレンスConfigでVariablesが発表され、デザイントークンはますます注目を集めています。しかし、デザイントークンという言葉は聞いたことあるものの、デザイントークンとは何なのか、また、何から始めたらいいかわからない方も多いのではないでしょうか。本書では、これまでGMOペパボ株式会社で複数のブランド向けにデザイントークンを設計した際に得た知見や、株式会社スマートバンクでモバイルアプリ向けにデザイントークンを設計した際に得た知見を共有します。デザイントークンを利用するメリットから実際の作り方まで幅広く網羅していますので、これからデザイントークンを設計する皆さんのお役にたてると幸いです。[著者]putchom（Ryo Fukushima）GMOペパボ株式会社でSUZURIのデザインリード及び共通基盤デザインシステムInhouseの設計を担当し、2022年のFigmaのグローバルカンファレンスConfigにて「One design system for multiple brands」を発表。現在は株式会社スマートバンクにて家計簿プリカB/43のプロダクトデザイン及びデザインシステムの設計を行っています。特徴デザイン読書日和で販売した通常版に新コンテンツを追加の上、小口染め加工などを加えた新装版としてグレードアップ予定です。注意この商品は受注生産商品です。発送までお時間をいただきますのでご了承ください。
![[受注生産] デザイントークンのつくりかた - 単行本（新装版） | putchom](https://146882075.cdn6.editmysite.com/uploads/1/4/6/8/146882075/s636140907569637749_p1_i1_w1200.png)
and I thinking about design tokens, tailwind css, css design, storybook, vue...
after all, I decide to do not use tailwind. and design grained css from scratch.
Cognitive Load is what matters
GitHub - zakirullin/cognitive-load: 🧠 Cognitive Load is what matters
🧠 Cognitive Load is what matters. Contribute to zakirullin/cognitive-load development by creating an account on GitHub.
this is good.
TypeScript 5.5 Released
new topics form rc:
- new method of ES
Setmethods
https://github.com/tc39/proposal-set-methods - regular expression checking
while still erroring on questionable escapes that are only allowed per ECMAScript’s Annex B.
what means??
Annex B
hmm. It's OK. maybe, here is: https://tc39.es/ecma262/multipage/additional-ecmascript-features-for-web-browsers.html#sec-regular-expressions-patterns - performance optimizations:
- skipped checking in transpileModule
- optimizations in how TypeScript filters contextual types
- revert some prs - https://github.com/microsoft/TypeScript/pull/57896
Inferred Type Predicates
Announcing TypeScript 5.5 - TypeScript
Today we’re excited to announce the release of TypeScript 5.5! If you’re not familiar with TypeScript, it’s a language that builds on top of JavaScript by making it possible to declare and describe types. Writing types in our code allows us to explain intent and have other tools check our code to catch mistakes like […]
Needless to say, key feature.
Control Flow Narrowing for Constant Indexed Accesses
Announcing TypeScript 5.5 - TypeScript
Today we’re excited to announce the release of TypeScript 5.5! If you’re not familiar with TypeScript, it’s a language that builds on top of JavaScript by making it possible to declare and describe types. Writing types in our code allows us to explain intent and have other tools check our code to catch mistakes like […]
TypeScript is now able to narrow expressions of the form objkey when both obj and key are effectively constant.
function f1(obj: Record<string, unknown>, key: string) { if (typeof obj[key] === "string") { // Now okay, previously was error obj[key].toUpperCase(); } }
great.
The JSDoc @import Tag
/** @import { SomeType } from "some-module" */
cool.
Regular Expression Syntax Checking
Announcing TypeScript 5.5 - TypeScript
Today we’re excited to announce the release of TypeScript 5.5! If you’re not familiar with TypeScript, it’s a language that builds on top of JavaScript by making it possible to declare and describe types. Writing types in our code allows us to explain intent and have other tools check our code to catch mistakes like […]
let myRegex = /@robot(\s+(please|immediately)))? do some task/;
// ~
// error!
// Unexpected ')'. Did you mean to escape it with backslash?
In fact, TypeScript’s checking goes slightly beyond syntactic checks.
Support for New ECMAScript Set Methods
Announcing TypeScript 5.5 - TypeScript
Today we’re excited to announce the release of TypeScript 5.5! If you’re not familiar with TypeScript, it’s a language that builds on top of JavaScript by making it possible to declare and describe types. Writing types in our code allows us to explain intent and have other tools check our code to catch mistakes like […]
union, intersection, difference, symmetricDifference, isDisjointFrom, isSubsetOf, isSupersetOf
details: https://github.com/tc39/proposal-set-methods
Isolated Declarations
Announcing TypeScript 5.5 - TypeScript
Today we’re excited to announce the release of TypeScript 5.5! If you’re not familiar with TypeScript, it’s a language that builds on top of JavaScript by making it possible to declare and describe types. Writing types in our code allows us to explain intent and have other tools check our code to catch mistakes like […]
Scraps / Isolated Declarations
Digital Agency publish the OpenID Connect Based Authentication API.
APIリファレンス（民間事業者向け） | デジタル認証アプリ | ドキュメント | デジタル庁 開発者サイト
民間事業者向けのAPIリファレンスです。
