igtm, tmr, ymdarake

火曜日のおフロ

Education JA ↓ 80 episodes

@igtm, @t-gyo, @ymdarake が、ゆるーくフロントエンド周りの気になった記事を紹介しながらお届けします。おフロは「フロントエンド」から来てます。毎週土曜日更新。https://tue-ofuro.vercel.app/

Author

igtm, tmr, ymdarake

Episodes

Type Syntax in Javascript, Typescript4.6, Nextjs 12.1, React 18, CSS @layer, 12.03.2022 2:09:52

これだけは押さえよう！住所フォームの作り方 - ケンオールブログ押下(おうか)にまつわる話 - Qiita New in Chrome 99 - Chrome Developers JavaScriptに「型」を～Microsoftが新構文を提案へ - 窓の杜 A Proposal For Type Syntax in JavaScript - TypeScript ついにTypeScriptがブラウザで動くようになりそう〜 JavaScriptへの型構文の導入について - Qiita Announcing TypeScript 4.6 - TypeScript Blog - Next.js 12.1 | Ne...

oklab/oklchとlab/lchの違い, The State of JS 2021, Wasm VM 19.02.2022 2:12:33

Color Combinations Generator apca-w3 - npm 達成基準 1.4.3 を理解する | WCAG 2.0解説書 It's time for a more sophisticated color contrast check for data visualizations - Datawrapper Blog PostCSS さん CSS Color Module 4 got a new oklab() and oklch() color functions. / Twitter CSS Color Module Level 4 （日本語訳） A perceptual color space for image processing Amazon Prime Videoが動画再生にWebAsse...

requestAnimationFrameとrequestIdleCallback, Typescript 4.6 beta 29.01.2022 2:06:06

State of JavaScript 2021/2022 【LINE証券 Frontend】requestIdleCallbackを活用して初期レンダリング時間を約14%削減した話 - LINE ENGINEERING Using requestIdleCallback | Web | Google Developers requestIdleCallback - Web API | MDN [Umbrella] Releasing Suspense · Issue #13206 · facebook/react Cooperative Scheduling of Background Tasks（日本語訳） react/Scheduler.js at main · facebook/react Better JS...

HTML Living Standard, Origin Trials, 2022年のCSS 15.01.2022 1:22:45

Focus the dialog element instead of the first focusable item by dpogue · Pull Request #4184 · whatwg/html HTML Standard 2022年のブラウザとウェブ標準：新春特別企画｜gihyo.jp … 技術評論社 Web 標準化のフィードバックサイクルを円滑にする Origin Trials について | blog.jxck.io Origin Trials 2022年のCSS：新春特別企画｜gihyo.jp … 技術評論社 OSS「faker.js」と「colors.js」の開発者、自身でライブラリを意図的に...

tc39-notes 読んで見る, 正規表現のパフォーマンス問題, A-Frameで作るWebVR など 08.01.2022 1:52:55

tc39-notes/meetings at master · rwaldron/tc39-notes DenoがTypeScriptの使用をやめる5つの理由 - Qiita ECMAScript® 2021 Language Specification tc39/test262: Official ECMAScript Conformance Test Suite ECMAScript - Wikipedia array.prototype.groupBy notes/oct-27.md at master · tc39/notes ReDos攻撃サスペンスを使ったデータ取得（実験的機能） – React Introduction – A-Frame VRコンテンツをHTMLとJavascriptで...

CSS of 2021, React Conf, Suspense for data fetching 18.12.2021 2:04:42

重いサイトを軽くしろ！年末年始は #WebSpeedHackathon 2021 に挑戦しよう | CyberAgent Developers Blog Open Props: sub-atomic styles Adam Argyle / Twitter Thinking on ways to solve TOASTS - YouTube CSSのボックスモデルにおける古い方法とこれからの方法 -論理プロパティにおける考え方 | コリス Document.getAnimations() - Web API | MDN <output>: 出力要素 - HTML: HyperText Markup Language | MDN React Con...

Chrome96, Typescript4.5, AMPの終焉, wbrタグなど 20.11.2021 2:59:36

New in Chrome 96 - Chrome Developers Back/forward cache What's New In DevTools (Chrome 96) - Chrome Developers Deprecations and removals in Chrome 96 - Chrome Developers What's new in Lighthouse 9.0 - Chrome Developers アメブロのAMPを終了します | CyberAgent SEO Information　　(サイバーエージェントSEO情報ブログ) TwitterがGoogle主導で開発されたウェブサイトを高速化する形式「AMP」のサポート...

Chrome Dev Summit 2021, npm package "coa" 13.11.2021 1:47:24

NPM - coa - Versions diffs - 2.0.2 → 2.0.3 - Diffend - OSS supply chain security and management platform Popular 'coa' NPM library hijacked to steal user passwords Everything announced at Chrome Dev Summit 2021 Record, replay and measure user flows - Chrome Developers なぜE2Eテストでidを使うべきではないのか | Autify Blog Chrome 97のDevToolsに新機能、Webブラウザ上の操作を記録、再実行、編...

Nextjs 12, Connect 2021, Jamstack Survey, Material You, Fontのはなし 30.10.2021 2:36:29

Jamming into the Mainstream: Jamstack Community Survey 2021 | Jamstack AddyOsmani.com - Browser-Sync: Sync Scrolls, Clicks, Forms And Edits In Multiple Browsers For Free そな太@GraphQLの記事を書くぞ / Twitter Facebook CSS-in-JS Solution Stylex Introduced at React Finland 2021 The State of CSS Survey Dan / Twitter 2018年の段階で私が知らないこと — Overreacted LIVE: React State Animations | @keyframe...

Nuxt.js 3 beta, Nominal Typing vs Structual Typing vs Duck Typing, Material You 16.10.2021 1:21:18

Appleシリコン「M1」MacでLinux直接起動を目指す「Asahi Linux」、独自ブートローダーm1n1開発 | TechCrunch Japan NuxtJS / Twitter Ingvar Stepanyan / Twitter TypeScriptでNominal Typingを実現する4つの方法 - Qiita Material3(Material You) の変更点 / Changes in Material3(Material You) - Speaker Deck usagimaru ⌘ / Twitter

Google Meetの背景ぼかし技術(wasm SIMD), ライブ配信プロトコル(RTMP, HLS, MPEG-DASH), BlinkとGecko, Typescript 4.5 Template Literal Type, CSS小ネタ(list-style-type) 09.10.2021 2:13:56

React Native for Webのこれまでから読み解くReact GUIのこれから - Speaker Deck 池田泰延 / ICSさん / Twitter list-style-type - CSS: カスケーディングスタイルシート | MDN How Blink works - Google ドキュメント JavaScript 処理系 V8 とレンダリングエンジン Blink のアーキテクチャ Source/core/css/parser/CSSParser.cpp - chromium/blink - Git at Google Takeshi Kano 鹿野壮さん / Twitter なぜGoogle Meetの背景ぼ...

Material UI v5, 有償版 MUI X Pro, GridのLayoutShift 02.10.2021 1:45:14

MUI: The React component library you always wanted こんにちはMUI！新しくなったMaterial UI v5 Material-UI v5を先取りする - Techtouch Developers Blog Pricing - MUI @mui/x-data-grid - npm @mui/x-data-grid-pro - npm Avoiding layout shift by putting the CSS in charge - HTTP 203 - YouTube UIデザインは奥が深い、CSSで美しいシャドウを実装する方法 | コリス

音声遅延, 海底ケーブル JUPITER, iPhone 13, Safari 15, iOS 15のプライベートリレー, APCA(色のコントラスト) 25.09.2021 2:43:38

データサイエンティスト検定™ リテラシーレベル | 一般社団法人データサイエンティスト協会世界100万kmの海底ケーブル、地理と速度と冗長性を考える「その経路、本当に冗長ですか？」【IIJ Technical DAY 2019】 - INTERNET Watch Mumble - Wikipedia iPhone 13 ProとiPhone 13 Pro Max - Apple（日本） A11ycasts with Rob Dodson - YouTube Just use button -- A11ycasts #05 - YouTube The art of labeling -- A11ycasts #12...

Epic&Apple, React Code Splitting, Lazy loading, Material You, DevTools Chrome 94 18.09.2021 2:01:52

EpicとAppleの『フォートナイト』裁判が決着。Apple独自決済の強制などが反競争的と認められ、該当規約の削除が言い渡される Epic Games対Apple訴訟 - Wikipedia コード分割 – React Lazy Loading | webpack Code Splitting | webpack Rome Toolchain Adam ArgyleさんはTwitterを使っています「how are you tree shaking / dead code eliminating unused design tokens / custom properties?」 / Twitter csstools/postcss-preset...

Webviewアプリの話、Android 12, iOS15, iPhone13 RogPhone5, Next.js Conf 11.09.2021 1:20:54

React + TypeScriptで固めつつ、新しいことも取り入れる　LINE証券のフロントエンドエンジニアが大切にしていること - ログミーTech Android 12の最終ベータ版がリリースされる、正式版のリリースは「数週間以内」 - GIGAZINE Android 12のベータ版に「顔でスマホを操作する新機能」が登場 - GIGAZINE ROG Phone 5 新登場満たされぬ、挑戦者たちへ。究極のゲーミングスマートフォン｜ASUS Store EyeDropper API Dropped | CSS-Tri...

Chrome93, Nextjs ISRを Vercel以外でやる方法, s-maxageと max-ageの違い, オンラインゲームのラグについて 04.09.2021 2:01:11

Adam Argyle / Twitter 知ってると役立つかもしれない min-height の話 ++ Gaji-Laboブログ What Happens When Border Radii Overlap? | CSS-Tricks New in Chrome 93: CSS Module Scripts, URL Handlers for PWAs, the PWA Summit, and more! - YouTube New in Chrome 93 - Chrome Developers 2021/9/1に発生したSTUDIOサービス全体における障害の経緯について | STUDIO Blog デジタル庁発足　公式サイトにITエンジニアから反応続...

WebComponentsとReactの相性, Typescript 4.4, Chrome 93, CSS Container Queries 28.08.2021 1:08:39

メルカリShops のフロントエンド | メルカリエンジニアリング新しいメルカリDesign System Web | メルカリエンジニアリング HTMLElement - Web API | MDN Microdata DOM API - Web APIs | MDN Announcing TypeScript 4.4 | TypeScript Unicodeで絶対知っておくべきセキュリティ5つの注意（翻訳）｜TechRacho（テックラッチョ）〜エンジニアの「？」を「！」に〜｜BPS株式会社アップル、他社決済も容認　米アプリ開発者と合意：時...

CORS, 2021 Scroll Survey Report, VSCode Server, Next.js 11.1, getServerSideProps, JSの末尾再帰最適 21.08.2021 2:21:25

CORSの仕様はなぜ複雑なのか独自ヘッダをチェックするだけのステートレスなCSRF対策は有効なのか？ — A Day in Serenity (Reloaded) — PHP, CodeIgniter, FuelPHP, Linux or something 2021 Scroll Survey Report touch-action - CSS: Cascading Style Sheets | MDN ‘-‘ という名前の、中身が無いのに70万回ダウンロードされてる謎のnpmパッケージ – 秋元@サイボウズラボ・プログラマー・ブログ JavaScript で文字数を length で...

react-gui, React.FC vs Function, ReactのCSSどれがいいのか 31.07.2021 2:31:27

react-gui - npm 10 Usability Heuristics for User Interface Design 10 Usability Heuristics for User Interface Design gyo.gitlab.io ReactのCSSの選択肢を比較してみた Airbnb React/JSX Style Guide | Airbnb JavaScript Style Guide 池田泰延さん / Twitter TypeScript + React: Why I don't use React. FC Facebook、どんな話題にも対応できるAIチャットボット「BlenderBot 2.0」オープンソースで公開。会話しつつ裏でネ...

line-height と vertical-align の話（em-square） 10.07.2021 2:31:40

55:50 本編スタート Evan You / Twitter 久下玄 / Twitter Patrick Kelly / Twitter SVGが特定のサイズ以下でずれる現象の原因と解決策 · nametake.info Deep dive CSS: font metrics, line-height and vertical-align - Vincent De Oliveira line-height と vertical-align The Dilemma of Naming Font Size Variables | CSS-Tricks font - CSS: カスケーディングスタイルシート | MDN 「早くリリースして、早く改善しよう」の落...

Typescript 4.4 Beta, Github Copilot, Server Driven UI, OpenTypeのchws/vchw 03.07.2021 2:02:34

Announcing TypeScript 4.4 Beta | TypeScript Google TypeScript Style Guide VSCode React Refactor GitHub Copilot · Your AI pair programmer 本サイトの AMP 提供の停止とここまでの振り返り Google Japan Blog: サードパーティ Cookie 廃止に関するタイムラインの変更について全角約物が連続したときのアキを調整する | Webフォント・サービス FONTPLUS レタースペーシングタイポグラフィにおける文字間調整の考え方 A Dee...

Safari Technology Preview 126, タイムスタンプ文字列, Wasmer 2.0, Flutter Hooks, ES2021, Windows 11 26.06.2021 2:29:28

Safari v15の機能を導入した「Safari Technology Preview 126」をmacOS 11 Big SurにインストールするとSTPが動かない/クラッシュする問題があり一時的に非公開に。 https://applech2.com/archives/20210618-apple-pull-safari-technology-preview-126-for-big-sur.html タイムゾーンを含むタイムスタンプ文字列表現の標準化 - ASnoKaze blog https://asnokaze.hatenablog.com/entry/2021/06/21/010141 HTML標準仕様の策定について...

polyfill-library, Next.js Conf, React 18などについて 19.06.2021 2:24:25

ABEMA Web で Polyfill のコードをモダンブラウザ向けに 99% 削減した話 | CyberAgent Developers Blog https://developers.cyberagent.co.jp/blog/archives/30373/ https://abema.tv/polyfill.fd0550eafa7b16148ccb.js Financial-Times/polyfill-useragent-normaliser https://github.com/Financial-Times/polyfill-useragent-normaliser Next.js Conf https://nextjs.org/conf Next.js Conf – Special Edition - YouTube https:/...

Minecraft 1.17, Web font, React 18, deno 1.11, React 並列モード 12.06.2021 1:54:31

Java Edition 1.17 - Minecraft Wiki <a href="https://minecraft.fandom.com/ja/wiki/Java_Edition_1.17">https://minecraft.fandom.com/ja/wiki/Java_Edition_1.17</a> Best practices for fonts <a href="https://web.dev/font-best-practices/">https://web.dev/font-best-practices/</a> CSS size-adjust for...

Web Font重い問題、JSのtry catch finallyの変わった挙動、Tailwind CSS 05.06.2021 2:04:16

Noto Sans JP のパフォーマンスへの影響 https://gyo.gitlab.io/ui-alm/noto-sans-jp/ Webフォント読み込み戦略（2021年） - MOL https://t32k.me/mol/log/optimize-webfont-loading/ CSS for Web Vitals https://web.dev/css-web-vitals/ JavaScript — Errors and Exception Handling | by Miriam Bellon | JavaScript in Plain English https://javascript.plainenglish.io/javascript-errors-exceptions-handling-43ae983cbbb3...