[B! web.dev] okyawaã®ãƒ–ãƒƒã‚¯ãƒžãƒ¼ã‚¯

okyawa id:okyawa

web.devã«é–¢ã™ã‚‹okyawaã®ãƒ–ãƒƒã‚¯ãƒžãƒ¼ã‚¯ (20)

${{author_name}}$

{{author_name}} {{created}}

{{{comment_expanded}}}

{{label}}

{{#is_bookmark}}ãƒªã‚¹ãƒˆ{{/is_bookmark}}{{^is_bookmark}}ãƒªãƒ³ã‚¯{{/is_bookmark}}

${{author_name}}$
{{author_name}}{{created}}
{{ #comment }}{{ comment }}{{ /comment }}
- {{ label }}

{{#following_bookmarks}}

${{author_name}}$

{{author_name}} {{created}}

{{{comment_expanded}}}

{{label}}

{{#is_bookmark}}ãƒªã‚¹ãƒˆ{{/is_bookmark}}{{^is_bookmark}}ãƒªãƒ³ã‚¯{{/is_bookmark}}

{{/following_bookmarks}}

{{/is_wiped}}

IndexedDB ã‚’æ“ä½œã™ã‚‹ Â |Â Articles Â |Â web.dev
IndexedDB ã‚’æ“ä½œã™ã‚‹ ã‚³ãƒ¬ã‚¯ã‚·ãƒ§ãƒ³ã§ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã‚’æ•´ç† å¿…è¦ã«å¿œã˜ã¦ã€ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã®ä¿å˜ã¨åˆ†é¡žã‚’è¡Œã„ã¾ã™ã€‚ ã“ã®ã‚¬ã‚¤ãƒ‰ã§ã¯ã€Terraform ãƒ¯ãƒ¼ã‚¯ãƒ•ãƒãƒ¼ã® IndexedDB API ã“ã“ã§ã¯ã€Jake Archibald ã® IndexedDB ã®ç¢ºç´„ ã“ã®ãƒ©ã‚¤ãƒ–ãƒ©ãƒªã¯ IndexedDB API ã«ã‚ˆãä¼¼ã¦ã„ã¾ã™ãŒã€Promise ã‚’ä½¿ç”¨ã—ã¾ã™ã€‚ await ã‚’ä½¿ç”¨ã™ã‚‹ã¨æ§‹æ–‡ã‚’ã‚ˆã‚Šç°¡æ½”ã«ã§ãã¾ã™ã€‚ã“ã‚Œã«ã‚ˆã‚Š API ãŒç°¡ç´ åŒ–ã•ã‚Œ ãã®æ§‹é€ ã‚’ç¶æŒã—ã¾ã™ã€‚ IndexedDB ã¨ã¯ IndexedDB ã¯å¤§è¦æ¨¡ãª NoSQL ã‚¹ãƒˆãƒ¬ãƒ¼ã‚¸ ã‚·ã‚¹ãƒ†ãƒ ã§ã‚ã‚Šã€ ãƒ–ãƒ©ã‚¦ã‚¶ã«è¡¨ç¤ºã•ã‚Œã‚‹æƒ…å ±ã§ã™é€šå¸¸ã®æ¤œç´¢ã«åŠ ãˆã¦ã€ put ã‚¢ã‚¯ã‚·ãƒ§ãƒ³ã®ã»ã‹ã€IndexedDB ã¯ãƒˆãƒ©ãƒ³ã‚¶ã‚¯ã‚·ãƒ§ãƒ³ã‚‚ã‚µãƒãƒ¼ãƒˆã—ã¦ãŠã‚Šã€ å¤§é‡ã®æ§‹é€ åŒ–ãƒ‡ãƒ¼ã‚¿ã®ä¿å˜ã«ä½¿ç”¨ã•ã‚Œã¦ã„ã¾ã™ IndexedDB ã®å„ãƒ‡ãƒ¼ã‚¿ãƒ™ãƒ¼ã‚¹ã¯ã‚ªãƒªã‚¸ãƒ³ã«
okyawa 2024/10/03
IndexDB

idb

DB

js

javascript

ts

web.dev
ãƒªãƒ³ã‚¯
Learn JavaScript ã¸ã‚ˆã†ã“ãï¼ Â |Â web.dev
Learn JavaScript ã¸ã‚ˆã†ã“ãï¼ ã‚³ãƒ¬ã‚¯ã‚·ãƒ§ãƒ³ã§ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã‚’æ•´ç† å¿…è¦ã«å¿œã˜ã¦ã€ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã®ä¿å˜ã¨åˆ†é¡žã‚’è¡Œã„ã¾ã™ã€‚ JavaScript ã¯ã‚¦ã‚§ãƒ–ãƒšãƒ¼ã‚¸ã®ã€Œã‚¤ãƒ³ã‚¿ãƒ©ã‚¯ãƒ†ã‚£ãƒ– ãƒ¬ã‚¤ãƒ¤ã€ã‚’æ‹…ã„ã€ãƒžãƒ¼ã‚¯ã‚¢ãƒƒãƒ—ã«ã‚ˆã£ã¦æä¾›ã•ã‚Œã‚‹ã€Œæ§‹é€ ã€ãƒ¬ã‚¤ãƒ¤ã¨ CSS ã«ã‚ˆã£ã¦æä¾›ã•ã‚Œã‚‹ã€Œãƒ—ãƒ¬ã‚¼ãƒ³ãƒ†ãƒ¼ã‚·ãƒ§ãƒ³ã€ãƒ¬ã‚¤ãƒ¤ã‚’è£œå®Œã—ã¾ã™ã€‚JavaScript ã‚’ä½¿ç”¨ã™ã‚‹ã¨ã€ãƒ‡ãƒ™ãƒãƒƒãƒ‘ãƒ¼ã¯ãƒ¦ãƒ¼ã‚¶ãƒ¼æ“ä½œã¨å†…éƒ¨ãƒã‚¸ãƒƒã‚¯ã®ã‚ã‚‰ã‚†ã‚‹çµ„ã¿åˆã‚ã›ã«å¿œã˜ã¦ãƒžãƒ¼ã‚¯ã‚¢ãƒƒãƒ—ã¨ã‚¹ã‚¿ã‚¤ãƒ«ã‚’è¿½åŠ ã€å‰Šé™¤ã€å¤‰æ›´ã—ã€ãƒšãƒ¼ã‚¸ã®æ§‹é€ ã‚„è¡¨ç¤ºæ–¹æ³•ã‚’å¤‰æ›´ã§ãã¾ã™ã€‚JavaScript ã‚’ä½¿ç”¨ã™ã‚‹ã¨ã€ã‚¦ã‚§ãƒ–ãƒšãƒ¼ã‚¸ã®ãƒ¬ãƒ³ãƒ€ãƒªãƒ³ã‚°ã¨å‹•ä½œã‚’ç´°ã‹ãåˆ¶å¾¡ã§ãã¾ã™ã€‚ãƒ–ãƒ©ã‚¦ã‚¶ã®çµ„ã¿è¾¼ã¿å‹•ä½œã®ä¸€éƒ¨ã‚’å¤‰æ›´ã™ã‚‹ã“ã¨ã‚‚ã§ãã¾ã™ã€‚ ã“ã®ã‚³ãƒ¼ã‚¹ã§ã¯ã€è¨€èªžã®è¨˜è¿°æ–¹æ³•ã‚’æ±ºã‚ã‚‹åŸºæœ¬çš„ãªãƒ«ãƒ¼ãƒ«ã‹ã‚‰ã€JavaScript ãŒæä¾›ã™ã‚‹çµ„ã¿è¾¼ã¿ã®ãƒ¡ã‚½ãƒƒãƒ‰ã‚„ãƒ—ãƒãƒ‘ãƒ†ã‚£ã¾ã§ã€JavaScript
okyawa 2024/04/11
web.dev

javascript

js

å…¥é–€

è³‡æ–™

å¦ç¿’

å‹‰å¼·
ãƒªãƒ³ã‚¯
Learn Performance Â |Â web.dev
Web Platform Dive into the web platform, at your pace.
okyawa 2023/12/15
performance

web

ãƒ‘ãƒ•ã‚©ãƒ¼ãƒžãƒ³ã‚¹

learning

å¦ç¿’

web.dev

ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰

html

JavaScript
ãƒªãƒ³ã‚¯
The Cache API: A quick guide Â |Â Articles Â |Â web.dev
The Cache API is a system for storing and retrieving network requests and their corresponding responses. These might be regular requests and responses created in the course of running your application, or they could be created solely for the purpose of storing data for later use. The Cache API was created to enable service workers to cache network requests so that they can provide fast responses,
okyawa 2023/03/08
Cache API

cache

js

JavaScript

web.dev

ã‚ãƒ£ãƒƒã‚·ãƒ¥

web api
ãƒªãƒ³ã‚¯
Building a dialog component Â |Â Articles Â |Â web.dev
In this post I want to share my thoughts on how to build color-adaptive, responsive, and accessible mini and mega modals with the <dialog> element. Try the demo and view the source! Demonstration of the mega and mini dialogs in their light and dark themes. If you prefer video, here's a YouTube version of this post: Overview The <dialog> element is great for in-page contextual information or action
okyawa 2022/12/08
html

dialog

ãƒ€ã‚¤ã‚¢ãƒã‚°

web.dev

google

tutorial

accessibility

javascript

css

button
ãƒªãƒ³ã‚¯
Payment and address form best practices Â |Â Articles Â |Â web.dev
Checklist Use meaningful HTML elements: <form>, <input>, <label>, and <button>. Label each form field with a <label>. Use HTML element attributes to access built-in browser features, in particular type and autocomplete with appropriate values. Avoid using type="number" for numbers that aren't meant to be incremented, such as payment card numbers. Use type="text" and inputmode="numeric" instead. If
okyawa 2022/03/22
ãƒ•ã‚©ãƒ¼ãƒ

form

Best Practice

html

web.dev

google

ãƒ¦ãƒ¼ã‚¶ãƒ“ãƒªãƒ†ã‚£

ã‚¢ã‚¯ã‚»ã‚·ãƒ“ãƒªãƒ†ã‚£
ãƒªãƒ³ã‚¯
Account authentication and password management best practices | Google Cloud Blog
13 best practices for user account, authentication, and password management Editor's note: This post includes updated best practices including the latest from Google's Best Practices for Password Management whitepapers for both users and system designers. Account management, authentication and password management can be tricky. Often, account management is a dark corner that isn't a top priority f
okyawa 2022/02/09
ãƒ¢ãƒã‚¤ãƒ«

ãƒ•ã‚©ãƒ¼ãƒ

mobile

ui

web

web.dev

ãƒ™ã‚¹ãƒˆãƒ—ãƒ©ã‚¯ãƒ†ã‚£ã‚¹

javascript

form
ãƒªãƒ³ã‚¯
Learn Forms Â |Â web.dev
Web Platform Dive into the web platform, at your pace.
okyawa 2022/02/09
ãƒ¢ãƒã‚¤ãƒ«

ãƒ•ã‚©ãƒ¼ãƒ

mobile

ui

web

web.dev

ãƒ™ã‚¹ãƒˆãƒ—ãƒ©ã‚¯ãƒ†ã‚£ã‚¹

javascript

form
ãƒªãƒ³ã‚¯
Sign-in form best practices Â |Â Articles Â |Â web.dev
If users ever need to log in to your site, then good sign-in form design is critical. This is especially true for people on poor connections, on mobile, in a hurry, or under stress. Poorly designed sign-in forms get high bounce rates. Each bounce could mean a lost and disgruntled userâ€”not just a missed sign-in opportunity. Here is an example of a simple sign-in form that demonstrates all of the be
okyawa 2022/02/09
ãƒ¢ãƒã‚¤ãƒ«

ãƒ•ã‚©ãƒ¼ãƒ

mobile

ui

web

web.dev

ãƒ™ã‚¹ãƒˆãƒ—ãƒ©ã‚¯ãƒ†ã‚£ã‚¹

javascript

form
ãƒªãƒ³ã‚¯
Minimal CLS font adjustment tool
okyawa 2021/11/19
css

font

ãƒ•ã‚©ãƒ³ãƒˆ

size-adjust

web.dev

@font-face
ãƒªãƒ³ã‚¯
CSS size-adjust for @font-face Â |Â Articles Â |Â web.dev
Consider the following demo where the font-size is a consistent 64px, and the only difference between each of these headers is the font-family. The examples on the left have not been adjusted and have an inconsistent final size. The examples on the right use size-adjust to ensure 64px is the consistent final size. In this example Chrome DevTools CSS grid layout debug tools are used to show heights
okyawa 2021/11/15
css

font

ãƒ•ã‚©ãƒ³ãƒˆ

size-adjust

web.dev

@font-face
ãƒªãƒ³ã‚¯
CSS accent-color Â |Â Articles Â |Â web.dev
Published: August 11, 2021 Today's HTML form elements are difficult to customize. It feels as if it's a choice between few or no custom styles, or resetting input styles and build it up from scratch. Building it up from scratch ends up being much more work than anticipated. It can also lead to forgotten styles for element states (indeterminate, I'm looking at you), and the loss of built-in accessi
okyawa 2021/11/15
css

color

accent-color

web.dev
ãƒªãƒ³ã‚¯
Layout patterns Â |Â Patterns Â |Â web.dev
Web Platform Dive into the web platform, at your pace.
okyawa 2021/11/15
grid

flex

css

ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆ

web.dev
ãƒªãƒ³ã‚¯
https://web.dev/
Web Platform Dive into the web platform, at your pace.
okyawa 2021/11/09
webdev

development

å¦ç¿’

å‹‰å¼·

web

google

ãƒ‘ãƒ•ã‚©ãƒ¼ãƒžãƒ³ã‚¹

æ•™æ

web.dev

pwa
ãƒªãƒ³ã‚¯
Web Fundamentals â€” Google Developers
Web Platform Dive into the web platform, at your pace.
okyawa 2021/11/08
design

ãƒ‡ã‚¶ã‚¤ãƒ³

css

ui

responsive

ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–ãƒ‡ã‚¶ã‚¤ãƒ³

web.dev
ãƒªãƒ³ã‚¯
Browser-level image lazy loading for the web Â |Â Articles Â |Â web.dev
You can use the loading attribute to lazy-load images without the need to write custom lazy-loading code or use a separate JavaScript library. Here's a demo of the feature: Lazy-loaded images load as the user scrolls through the page. This page walks through the details of implementing lazy-loading in the browser. Why browser-level lazy loading? According to the HTTP Archive, images are the most-r
okyawa 2021/10/06
image

lazy

web.dev

ãƒ‘ãƒ•ã‚©ãƒ¼ãƒžãƒ³ã‚¹

performance

lighthouse

lazysizes

lazy-load
ãƒªãƒ³ã‚¯
Use Imagemin to compress images Â |Â Articles Â |Â web.dev
Measure Run Lighthouse to check for opportunities to improve page load by compressing images. These opportunities are listed under "Efficiently encode images": Imagemin Imagemin is an excellent choice for image compression because it supports a wide variety of image formats and is easily integrated with build scripts and build tools. Imagemin is available as both a CLI and an npm module. Generally
okyawa 2021/10/06
ç”»åƒåœ§ç¸®

imagemin

google

web.dev

ãƒ‘ãƒ•ã‚©ãƒ¼ãƒžãƒ³ã‚¹

lighthouse

performance

image

CLI

plugin
ãƒªãƒ³ã‚¯
Improving user privacy and developer experience with User-Agent Client Hints Â |Â Privacy & Security Â |Â Chrome for Developers
Client Hints enable developers to actively request information about the user's device or conditions, rather than needing to parse it out of the User-Agent (UA) string. Providing this alternative route is the first step to eventually reducing User-Agent string granularity. Learn how to update your existing functionality that relies on parsing the User-Agent string to make use of User-Agent Client
okyawa 2021/06/23
chrome

browser

privacy

UserAgent

ãƒ¦ãƒ¼ã‚¶ãƒ¼ã‚¨ãƒ¼ã‚¸ã‚§ãƒ³ãƒˆ

JavaScript

header

web.dev
ãƒªãƒ³ã‚¯
ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã‚¨ã‚ã‚¹ãƒ‘ãƒ¼ãƒˆãƒãƒ¼ãƒ ãŒé¸ã¶ web.dev Live2020 ã‚ªã‚¹ã‚¹ãƒ¡ã‚»ãƒƒã‚·ãƒ§ãƒ³ - Cybozu Inside Out | ã‚µã‚¤ãƒœã‚¦ã‚ºã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ã®ãƒ–ãƒã‚°
ã“ã‚“ã«ã¡ã¯ã€ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã‚¨ã‚ã‚¹ãƒ‘ãƒ¼ãƒˆãƒãƒ¼ãƒ ã§ã™ã€‚ ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã‚¨ã‚ã‚¹ãƒ‘ãƒ¼ãƒˆãƒãƒ¼ãƒ ã§ã¯ã€ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã«é–¢ã™ã‚‹æƒ…å ±å…±æœ‰ä¼šã‚’ç¤¾å†…å‘ã‘ã«è¡Œã£ã¦ã„ã¾ã™ã€‚ 2017å¹´ã‹ã‚‰2020å¹´ã¾ã§ã«10å›žé–‹å‚¬ã—ã¦ãŠã‚Šã€ã€ŒWeb ãƒšãƒ¼ã‚¸ã®ãƒ‘ãƒ•ã‚©ãƒ¼ãƒžãƒ³ã‚¹ã€ã€ã€ŒReact ã®ä»Šã¨ã“ã‚Œã‹ã‚‰ã€ã€ã€ŒGoogle I/O ã‚»ãƒƒã‚·ãƒ§ãƒ³ã¾ã¨ã‚ã€ãªã©ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã«é–¢ã™ã‚‹æƒ…å ±ã‚’ç¤¾å†…ã«å…±æœ‰ã—ã¦ãã¾ã—ãŸã€‚ ä»Šå›žè¡Œã£ãŸã®ã¯ã€2020å¹´6æœˆ30æ—¥ã‹ã‚‰7æœˆ2æ—¥ã«ã‹ã‘ã¦3æ—¥é–“ã‚ªãƒ³ãƒ©ã‚¤ãƒ³ã§é–‹å‚¬ã•ã‚ŒãŸ web.dev Live2020 ã®ã‚»ãƒƒã‚·ãƒ§ãƒ³ã«ã¤ã„ã¦ã®æƒ…å ±å…±æœ‰ã§ã™ã€‚å„ã‚»ãƒƒã‚·ãƒ§ãƒ³ã¯YouTubeã«ã¦è¦–è´ã§ãã¾ã™ã€‚ ä»Šå›žã¯å„ãƒãƒ¼ãƒ ãƒ¡ãƒ³ãƒãƒ¼ãŒè¦–è´ã—ãŸã‚»ãƒƒã‚·ãƒ§ãƒ³ã®ä¸ã‹ã‚‰ã€ãã‚Œãžã‚Œ2ã¤ã®ã‚»ãƒƒã‚·ãƒ§ãƒ³ã‚’é¸ã‚“ã§å†…å®¹ã¨æ„Ÿæƒ³ã‚’ç´¹ä»‹ã—ã¾ã™ã€‚ ã¾ã web.dev Live2020 ã‚’è¦‹ã¦ã„ãªã„æ–¹ãŒèˆˆå‘³ã‚’æŒã¤ãã£ã‹ã‘ã«ãªã‚Œã°å¹¸ã„ã§ã™ã€‚ BaHoã®ã‚ªã‚¹ã‚¹ãƒ¡ Ba
okyawa 2020/08/24
PWA

ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰

javascript

ãƒ‘ãƒ•ã‚©ãƒ¼ãƒžãƒ³ã‚¹

ãƒãƒ¥ãƒ¼ãƒ‹ãƒ³ã‚°

web.dev
ãƒªãƒ³ã‚¯
web.dev live 2020 ã‚’è´è¬›ã—ãŸ - from scratch
ä»Šå¹´ã¯ã‚³ãƒãƒŠã®å½±éŸ¿ã§ã„ã‚ã‚“ãªã‚¤ãƒ™ãƒ³ãƒˆãŒã‚ªãƒ³ãƒ©ã‚¤ãƒ³ã«ãªã£ãŸã‚Šã€ä¸æ¢ã«ãªã£ãŸã‚Šã—ã¦ã¾ã™ãŒã€ web.dev live 2020 ãŒ7æœˆåˆé ã«ã‚„ã£ã¦ã„ãŸã®ã§ã€è´è¬›ã—ã¦ãã¾ã—ãŸã€‚ web.dev ãã®ä¸ã§ã‚‚é¢ç™½ã‹ã£ãŸã‚‚ã®ã«ã¤ã„ã¦ã„ãã¤ã‹ç´¹ä»‹ã—ã¾ã™ã€‚ Day 1 ã»ã¼ Core Web Vitals ã«ã¤ã„ã¦ã®è©±ã§ã—ãŸã€‚ ä»¥ä¸‹ã®ãƒˆãƒ¼ã‚¯ãŒé¢ç™½ã‹ã£ãŸã§ã™ã€‚ What's new in speed tooling Optimize for Core Web Vitals Core Web Vitals ã«ã¤ã„ã¦ã¯ã‚‚ã†æ—¢ã«ãŸãã•ã‚“è³‡æ–™ãŒã‚ã‚‹ã¨æ€ã„ã¾ã™ãŒã€ä¸€å¿œè§£èª¬ã—ã¦ãŠãã¾ã™ã€‚ Core Web Vitals åˆæœŸè¡¨ç¤ºã®æ–°ã—ã„æŒ‡æ¨™ã§ã™ã€‚åŽ»å¹´ãã‚‰ã„ã‹ã‚‰ãšã£ã¨ Chrome Dev Summit ã¨ã‹ã§ã¯è¨€ã‚ã‚Œã¦ã„ã¦ã€æ—¢ã«Lighthouse ã‚’ã¯ã˜ã‚ã¨ã—ã¦ã€è‰²ã€…ãªãƒ„ãƒ¼ãƒ«ã§ã‚µãƒãƒ¼ãƒˆã•ã‚Œã¦ã„ã¾ã™ã€‚Largest C
okyawa 2020/07/16
Core Web Vitals

web.dev

web

google

V8 Engine

performance
ãƒªãƒ³ã‚¯
1

ãŠçŸ¥ã‚‰ã›

ã‚‚ã£ã¨èªã‚€

å…¬å¼Twitter

@HatenaBookmark
ãƒªãƒªãƒ¼ã‚¹ã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“ã‚¹ã®ãŠçŸ¥ã‚‰ã›
@hatebu
æœ€æ–°ã®äººæ°—ã‚¨ãƒ³ãƒˆãƒªãƒ¼ã®é…ä¿¡

ã‚ãƒ¼ãƒœãƒ¼ãƒ‰ã‚·ãƒ§ãƒ¼ãƒˆã‚«ãƒƒãƒˆä¸€è¦§

jæ¬¡ã®ãƒ–ãƒƒã‚¯ãƒžãƒ¼ã‚¯

kå‰ã®ãƒ–ãƒƒã‚¯ãƒžãƒ¼ã‚¯

lã‚ã¨ã§èªã‚€

eã‚³ãƒ¡ãƒ³ãƒˆä¸€è¦§ã‚’é–‹ã

oãƒšãƒ¼ã‚¸ã‚’é–‹ã

è¨å®šã‚’å¤‰æ›´ã—ã¾ã—ãŸx