[{"id":380064,"date":"2024-08-23T09:43:54","date_gmt":"2024-08-23T15:43:54","guid":{"rendered":"https:\/\/css-tricks.com\/?p=380064"},"modified":"2024-08-23T09:43:56","modified_gmt":"2024-08-23T15:43:56","slug":"quick-hit-12","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/quick-hit-12\/","title":{"rendered":"Quick Hit #12"},"content":{"rendered":"\n

向 Scott Jehl 发布了他的新课程 Web Components De-Mystified<\/a> 表示衷心的感谢！来自业界顶尖人物的八个小时的完整培训。<\/p>\n","protected":false},"excerpt":{"rendered":"

Eric 为我们分享了他关于锚点（不是链接<\/a>) 在 :focus<\/code> 状态下的各种行为的研究结果。<\/p>\n\n\n\n

\nTurns out, there\u2019s a lot!<\/p>\n<\/blockquote>\n\n\n\nThat’s an understatement! This is an incredible amount of work, even if Eric calls it “dry as a toast sandwich.” Boring ain’t always a bad thing.<\/a> Let me simply drop in a pen that Dave put together pulling all of Eric’s findings into a table organized to compare the different behaviors between operating systems \u2014 and additional tables for each specific platform \u2014 because I think it helps frame Eric’s points.<\/p>\n\n\n\n\n\n\n\n CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>That really <em>is<\/em> a lot! But why on Earth go through the trouble of documenting all of this?<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>All of the previously documented behavior needs to be built in JavaScript, since we need to go the synthetic link route. It also means that it is code we need to set aside time and resources to maintain.<\/p>\n\n\n\n<p>That also assumes that is even possible to recreate every expected feature in JavaScript, which is not true. It also leaves out the mental gymnastics required to make a business case for prioritizing engineering efforts to re-make each feature.<\/p>\n<\/blockquote>\n\n\n\n<p>There’s the rub! These are the behaviors you’re gonna need to mimic and maintain if veering away from semantic, native web elements. So what Eric is generously providing is perhaps an ultimate argument against adopting frameworks \u2014 or rolling some custom system \u2014 that purposely abstract the accessible parts of the web, often in favor of <a href=\"https:\/\/css-tricks.com\/what-is-developer-experience-dx\/\">DX<\/a>.<\/p>\n\n\n\n<p>As with anything, there’s more than meets the eye to all this. Eric’s got an exhaustive list at the end there that calls out all the various limitations of his research. Most of those notes sound to me like there are many, many other platforms, edge cases, user agent variations, assistive technologies, and considerations that could also be taken into account, meaning we could be responsible for a much longer list of behaviors than what’s already there.<\/p>\n\n\n\n<p>And yes, <a href=\"https:\/\/www.etsy.com\/listing\/1111658691\/bucatini-crewneck-sweatshirt-pasta\" rel=\"noopener\">this sweatshirt<\/a> is incredible. Indeed.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Eric gifting us with his research on all the various things that anchors (not links) do when they are in […]<\/p>\n","protected":false},"author":2508,"featured_media":273933,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"Turns out, there\u2019s a lot!","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2},"_share_on_mastodon":"1","_share_on_mastodon_status":"I truly hope the only takeaway someone gets from all of the data @eric@social.ericwbailey.website produced here is TO USE SEMANTICS ANCHORS OVER DIVS. Wonderful work, as always. \r\n\r\n%permalink%"},"categories":[4,19078],"tags":[466,19095,731],"class_list":["post-380042","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","category-notes","tag-accessibility","tag-links-urls","tag-semantics"],"jetpack_publicize_connections":[],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"https:\/\/mastodon.social\/@csstricks\/113011522479707002","error":""},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/link-pattern.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/380042"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=380042"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/380042\/revisions"}],"predecessor-version":[{"id":380060,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/380042\/revisions\/380060"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/273933"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=380042"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=380042"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=380042"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":380029,"date":"2024-08-22T08:01:35","date_gmt":"2024-08-22T14:01:35","guid":{"rendered":"https:\/\/css-tricks.com\/?p=380029"},"modified":"2024-08-22T08:01:46","modified_gmt":"2024-08-22T14:01:46","slug":"callbacks-on-web-components","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/callbacks-on-web-components\/","title":{"rendered":"Callbacks on Web Components?"},"content":{"rendered":"\n<p>A gem from <a href=\"https:\/\/gomakethings.com\/about\/\" rel=\"noopener\">Chris Ferdinandi<\/a> that details how to use custom events to hook into Web Components. More importantly, Chris dutifully explains <em>why<\/em> custom events are a better fit than, say, callback functions.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>With a typical JavaScript library, you pass callbacks in as part of the instantiate process. […] Because Web Components self-instantiate, though, there\u2019s no easy way to do that.<\/p>\n<\/blockquote>\n\n\n\n<p>There’s a way to use callback functions, just not an “easy” way to go about it.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>JavaScript provides developers with a way to emit custom events that developers can listen for with the <code>Element.addEventListener()<\/code> method.<\/p>\n\n\n\n<p>We can use custom events to let developers hook into the code that we write and run more code in response to when things happen. They provide a really flexible way to extend the functionality of a library or code base.<\/p>\n<\/blockquote>\n\n\n\n<p>Don’t miss the nugget about <a href=\"https:\/\/gomakethings.com\/callbacks-on-web-components\/#cancelling-the-event\" rel=\"noopener\">canceling custom events<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A gem from Chris Ferdinandi that details how to use custom events to hook into Web Components. More importantly, Chris […]<\/p>\n","protected":false},"author":2508,"featured_media":380032,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[17],"tags":[803],"class_list":["post-380029","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-links","tag-web-components"],"jetpack_publicize_connections":[],"acf":{"link_source":"Go Make Things","link_url":"https:\/\/gomakethings.com\/callbacks-on-web-components\/","link_icon":380030,"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/web-components-callback.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/380029"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=380029"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/380029\/revisions"}],"predecessor-version":[{"id":380041,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/380029\/revisions\/380041"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/380032"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=380029"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=380029"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=380029"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":380039,"date":"2024-08-21T15:25:08","date_gmt":"2024-08-21T21:25:08","guid":{"rendered":"https:\/\/css-tricks.com\/?p=380039"},"modified":"2024-08-21T15:25:10","modified_gmt":"2024-08-21T21:25:10","slug":"quick-hit-11-2","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/quick-hit-11-2\/","title":{"rendered":"Quick Hit #11"},"content":{"rendered":"\n<p>Hey look at that, the <a href=\"https:\/\/survey.devographics.com\/survey\/state-of-css\/2024\" rel=\"noopener\">State of CSS Survey for 2024<\/a> is open and taking submissions. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hey look at that, the State of CSS Survey for 2024 is open and taking submissions.<\/p>\n","protected":false},"author":2508,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"State of CSS Survey 2024","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[19079],"tags":[19081],"class_list":["post-380039","post","type-post","status-publish","format-standard","hentry","category-quick-hits","tag-news"],"jetpack_publicize_connections":[],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/380039"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=380039"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/380039\/revisions"}],"predecessor-version":[{"id":380040,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/380039\/revisions\/380040"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=380039"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=380039"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=380039"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":380016,"date":"2024-08-21T10:11:31","date_gmt":"2024-08-21T16:11:31","guid":{"rendered":"https:\/\/css-tricks.com\/?p=380016"},"modified":"2024-08-21T10:11:33","modified_gmt":"2024-08-21T16:11:33","slug":"the-intersection-of-speed-and-proximity","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/the-intersection-of-speed-and-proximity\/","title":{"rendered":"The Intersection of Speed and Proximity"},"content":{"rendered":"\n<p>You ever find yourself in bumper-to-bumper traffic? I did this morning on the way to work (read: whatever cafe I fancy). There’s a pattern to it, right? <em>Stop, go, stop, go, stop…<\/em> it’s almost rhythmic and harmonious in the most annoying of ways. Everyone in line follows the dance, led by some car upfront, each subsequent vehicle pressed right up to the rear of the next for the luxury of moving a few feet further before the next step.<\/p>\n\n\n\n\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"400\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/traffic-jam.jpg?resize=800%2C400&ssl=1\" alt=\"A closeup of three lanes of tight traffic from behind.\" class=\"wp-image-380025\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/traffic-jam.jpg?w=800&ssl=1 800w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/traffic-jam.jpg?resize=300%2C150&ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/traffic-jam.jpg?resize=768%2C384&ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-element-caption\">Photo by <a href=\"https:\/\/www.pexels.com\/photo\/view-of-a-traffic-jam-26630510\/\" rel=\"noopener\">Jakob Jin<\/a><\/figcaption><\/figure>\n\n\n\n<p>Have you tried breaking the pattern? Instead of playing shadow to the car in front of me this morning, I allowed space between us. I’d gradually raise my right foot off the brake pedal and depress the gas pedal only once my neighboring car gained a <em>little<\/em> momentum. At that point, my car begins to crawl. And continue crawling. I rarely had to tap the brakes at all once I got going. In effect, I had sacrificed <em>proximity<\/em> for a <em>smoother ride<\/em>. I may not be traveling the “fastest” in line, but I was certainly gliding along with a lot less friction.<\/p>\n\n\n\n<p>I find that many things in life are like that. Getting closest to anything comes with a cost, be it financial or consequence. Want the VIP ticket to a concert you’re stoked as heck about? Pony up some extra cash. Want the full story rather than a headline? Just enter your email address. Want up-to-the-second information in your stock ticker? Hand over some account information. Want access to <em>all<\/em> of today’s televised baseball games? Pick up an ESPN+ subscription.<\/p>\n\n\n\n<p>Proximity and speed are the commodities, the products so to speak. <em>Closer<\/em> and <em>faster<\/em> are what’s being sold.<\/p>\n\n\n\n<p>You may have run into the <a href=\"https:\/\/www.economicsonline.co.uk\/definitions\/law-of-diminishing-returns.html\/\" rel=\"noopener\">“law of diminishing returns”<\/a> in some intro-level economics class you took in high school or college. It’s the basis for a large swath of economic theory but in essence, is the “too much of a good thing” principle. It’s what AMPM commercials have been preaching this whole time.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"TV Spot - AmPm - Buy 3 Get the Fourth Free - Too Much Good Stuff\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/JFtuZjX42T4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>I’m embedding the clip instead of linking it up because it clearly illustrates the “problem” of having too many of what you want (or need). Dude resorted to asking two teens to reach into his front pocket for his wallet because his hands were full, creeper. But buy on, the commercial says, because the implication is that there’s never too much of a good thing, even if it ends in a not-so-great situation chockfull of friction.<\/p>\n\n\n\n<p>The only and only thing I took away from physics in college \u2014 besides gravity force being 9.8\u00a0m\/s<sup>2<\/sup> \u2014 is that there’s no way to have <em>bigger<\/em>, <em>cheaper<\/em>, and <em>faster<\/em> at the same time. You can take two, but all three cannot play together. For example, you can have a spaceship that’s faster and cheaper, but chances are that it ain’t gonna be bigger than a typical spaceship. If you were to aim for <em>bigger<\/em>, it’d be a lot less <em>cheap<\/em>, not only for the extra size but also to make the dang heavy thing go as fast as possible. It’s a good rule in life. I don’t have proof of it, but I’d wager Mick Jagger lives by it, or at least <a href=\"https:\/\/www.youtube.com\/watch?v=Ef9QnZVpVd8\" rel=\"noopener\">did at one time<\/a>.<\/p>\n\n\n\n<p>Speed. Proximity. Faster and slower. Closer and further. I’m not going to draw any parallels to web development, UX design, or any other front-end thing. They’re already there.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You ever find yourself in bumper-to-bumper traffic? I did this morning on the way to work (read: whatever cafe I […]<\/p>\n","protected":false},"author":2508,"featured_media":380025,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[19094],"class_list":["post-380016","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","tag-ui-ix-design"],"jetpack_publicize_connections":[],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/traffic-jam.jpg?fit=800%2C400&ssl=1","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/380016"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=380016"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/380016\/revisions"}],"predecessor-version":[{"id":380028,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/380016\/revisions\/380028"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/380025"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=380016"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=380016"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=380016"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":379949,"date":"2024-08-21T08:41:47","date_gmt":"2024-08-21T14:41:47","guid":{"rendered":"https:\/\/css-tricks.com\/?p=379949"},"modified":"2024-08-21T08:41:49","modified_gmt":"2024-08-21T14:41:49","slug":"elastic-overflow-scrolling","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/elastic-overflow-scrolling\/","title":{"rendered":"Elastic Overflow Scrolling"},"content":{"rendered":"\n<p>A client asked if we could mimic the <a href=\"https:\/\/www.cultofmac.com\/news\/bas-ording-rubber-band-effect-iphone\" rel=\"noopener\">“rubber band” scrolling behavior<\/a> on many mobile devices. I’m sure you know what I’m talking about. It\u2019s a behavior that already exists and happens automatically in most browsers. In iOS Safari, for example, you\u2019re allowed to scroll beyond the top or bottom edge of the viewport by a few hundred pixels, and letting go snaps the page back in place.<\/p>\n\n\n\n\n\n\n\n<figure class=\"wp-block-video ticss-27093cbe\"><video controls src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2024\/08\/elastic-scroll_1.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p>I had heard of some instances where someone <a href=\"https:\/\/www.specialagentsqueaky.com\/blog-post\/ssy5i7qw\/2015-06-10-six-things-i-learnt-about-ios-rubberband-overflow-scrolling\/\" rel=\"noopener\">might want to prevent the bounce from happening<\/a> but no one had asked me to implement it, especially in a way that supports devices without a touch interface. I was actually a bit surprised there isn’t an existing CSS property for this. There’s the non-standard <code>-webkit-overflow-scrolling<\/code> property but that’s for a different type of <a href=\"https:\/\/css-tricks.com\/snippets\/css\/momentum-scrolling-on-ios-overflow-elements\/\">“momentum” scrolling<\/a>. Nor would I want to rely on a non-standard property that’s not on track to become part of the specifications.<\/p>\n\n\n\n<p>OK, so what if we want to force this sort of rubber banding in our work? For starters, we’d need some sort of element acting as a container for content that requires scrolling. From there, we could reach for JavaScript, of course, but that involves adding scroll listeners or a combination of <code>pointerDown<\/code>, <code>pointerUp<\/code>, and <code>pointerMove<\/code> events, not to mention keeping track of positions, inertial movement, etc.<\/p>\n\n\n\n<p><strong>A CSS-only solution would be much more ideal.<\/strong><\/p>\n\n\n\n<p>Here is a container with a few child elements:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\"><div class=\"carousel\">\n <div class=\"slides\">\n <div class=\"slide\">1<\/div>\n <div class=\"slide\">2<\/div>\n <div class=\"slide\">3<\/div>\n <div class=\"slide\">4<\/div>\n <div class=\"slide\">5<\/div>\n <\/div>\n<\/div><\/code><\/pre>\n\n\n\n<p>Let’s get some baseline styles in place, specifically to create a situation where we’re guaranteed to overflow a parent container.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Parent container with fixed dimensions for overflow *\/\n.carousel {\n width: 200px;\n height: 400px;\n overflow-x: hidden;\n overflow-y: auto;\n}\n\n\/* Wrapper for slides, stacked in a column *\/\n.slides {\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n width: 100%;\n height: fit-content;\n}\n\n\/* Each slide is the full width of the carousel *\/\n.slide {\n width: 100%;\n aspect-ratio: 1;\n}<\/code><\/pre>\n\n\n\n<p>Let\u2019s start by adding some vertical margins. If your container has only one long item, add it to the top and bottom of the child element. If the container has multiple children, you\u2019ll want to add <code>margin<\/code> to the top of the first child element and the bottom of the last child element.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.carousel > .slides > .slide:first-child {\n margin-top: 100px;\n}\n\n.carousel > .slides > .slide:last-child {\n margin-bottom: 100px;\n}<\/code><\/pre>\n\n\n\n<p>Great! We can now scroll past the edges, but we need something to snap it back after the user lifts their finger or pointer. For this, we\u2019ll need the <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/scroll-snap-type\/\">scroll-snap-type<\/a><\/code> and <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/scroll-snap-align\/\">scroll-snap-align<\/a><\/code> properties<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.carousel {\n scroll-snap-type: y mandatory;\n}\n\n.carousel > .slides > .slide {\n scroll-snap-align: start;\n}\n\n.carousel > .slides > .slide:first-child {\n margin-top: 100px;\n}\n\n.carousel > .slides > .slide:last-child {\n scroll-snap-align: end;\n margin-bottom: 100px;\n}<\/code><\/pre>\n\n\n\n<p>Note that the same applies to a <em>horizontally<\/em> scrolling<strong> <\/strong>element. For that, you\u2019d change things up so that <code>margin<\/code> is applied to the element’s left and right edges instead of its top and bottom edges. You’ll also want to change the <code>scroll-snap-type<\/code> property’s value from <code>y mandatory<\/code> to <code>x mandatory<\/code> while you’re at it.<\/p>\n\n\n\n<p>That\u2019s really it! Here’s the final demo:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wvLorKe\" src=\"\/\/codepen.io\/anon\/embed\/preview\/wvLorKe?height=650&theme-id=1&slug-hash=wvLorKe&default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wvLorKe\" title=\"CodePen Embed wvLorKe\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>I know, I know. This isn’t some Earth-shattering or mind-blowing effect, but it does solve a very specific situation. And if you find yourself in that situation, now you have something in your back pocket to use.<\/p>\n\n\n\n<p><strong>Additional resources<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.cultofmac.com\/news\/bas-ording-rubber-band-effect-iphone#google_vignette\" rel=\"noopener\">“The inside story of the iconic \u2018rubber band\u2019 effect that launched the iPhone”<\/a> (Cult of Mac)<\/li>\n\n\n\n<li><a href=\"https:\/\/www.specialagentsqueaky.com\/blog-post\/ssy5i7qw\/2015-06-10-six-things-i-learnt-about-ios-rubberband-overflow-scrolling\/\" rel=\"noopener\">“Six things I learnt about iOS Safari’s rubber band scrolling”<\/a> (Special Agent Squeaky)<\/li>\n\n\n\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2018\/08\/scroll-bouncing-websites\/\" rel=\"noopener\">“Scroll Bouncing On Your Websites”<\/a> (Smashing Magazine)<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>A client asked if we could mimic the “rubber band” scrolling behavior on many mobile devices. I’m sure you know […]<\/p>\n","protected":false},"author":280512,"featured_media":332489,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"The Rubber Banding Effect Done on Purpose ","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2},"_share_on_mastodon":"1","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[598],"class_list":["post-379949","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","tag-scroll"],"jetpack_publicize_connections":[],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"https:\/\/mastodon.social\/@csstricks\/113000533750306434","error":""},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/smooth-scroll.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/379949"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/280512"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=379949"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/379949\/revisions"}],"predecessor-version":[{"id":380015,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/379949\/revisions\/380015"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/332489"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=379949"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=379949"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=379949"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":379926,"date":"2024-08-20T08:16:34","date_gmt":"2024-08-20T14:16:34","guid":{"rendered":"https:\/\/css-tricks.com\/?p=379926"},"modified":"2024-08-20T08:16:38","modified_gmt":"2024-08-20T14:16:38","slug":"rtl-styling-101","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/rtl-styling-101\/","title":{"rendered":"RTL Styling 101"},"content":{"rendered":"\n<p>A couple of weeks ago I was super excited about publishing my first CSS-Tricks post: <a href=\"https:\/\/css-tricks.com\/letter-spacing-is-broken-and-theres-nothing-we-can-do-about-it-maybe\/\">“Letter Spacing is Broken<\/a>. Forget about that though, what’s important is the post’s topic: <strong>letter spacing is broken and doesn’t work as the CSS Specification says it should<\/strong>. In a nutshell, instead of spacing the characters evenly, it leaves an unpleasant space at the end of the element.<\/p>\n\n\n\n\n\n\n\n<p>While this inconsistency between the web and the spec is just a quirk for a Spanish\/English speaker like me, for speakers of right-to-left (RTL) languages like Arabic or Hebrew, an annoying space is left at the start or end of a word. Firefox (Gecko) kinda fixes it and rearranges the unnecessary space at the end (in the reading order), but Google and Safari (Blink and Webkit) leave it at the start.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/07\/how-letter-spacing-renders-on-different-browsers.png?resize=1920%2C1080&ssl=1\" alt=\"Side-by-side comparison of letter spacing on Gecko and Blink\/Webkit\" class=\"wp-image-379322\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/07\/how-letter-spacing-renders-on-different-browsers.png?w=1920&ssl=1 1920w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/07\/how-letter-spacing-renders-on-different-browsers.png?resize=300%2C169&ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/07\/how-letter-spacing-renders-on-different-browsers.png?resize=1024%2C576&ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/07\/how-letter-spacing-renders-on-different-browsers.png?resize=768%2C432&ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/07\/how-letter-spacing-renders-on-different-browsers.png?resize=1536%2C864&ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Of course, I wanted to demo this major pain point, but styling RTL content was beyond my CSS power. That’s when I found this life-saver guide by <a href=\"https:\/\/ishadeed.com\/\" rel=\"noopener\">Ahmad Shadeed<\/a> that covers every major aspect of styling RTL content on the web and best practices to easily internationalize an LTR webpage. A resource that, I think, is a must-read if you are interested in i18n and accessibility in the web.<\/p>\n\n\n\n<p>I may have discovered warm water since this guide goes back to 2018, but I hope those like me who didn’t know about it have fun learning something new!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A couple of weeks ago I was super excited about publishing my first CSS-Tricks post: “Letter Spacing is Broken. Forget […]<\/p>\n","protected":false},"author":288740,"featured_media":379323,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[17],"tags":[1448],"class_list":["post-379926","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-links","tag-i18n"],"jetpack_publicize_connections":[],"acf":{"link_source":"RTL Styling 101","link_url":"https:\/\/rtlstyling.com\/posts\/rtl-styling","link_icon":379930,"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/07\/how-letter-spacing-would-works-with-symmetrical-fix.png?fit=1920%2C1080&ssl=1","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/379926"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/288740"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=379926"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/379926\/revisions"}],"predecessor-version":[{"id":379948,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/379926\/revisions\/379948"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/379323"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=379926"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=379926"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=379926"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":379959,"date":"2024-08-19T11:01:09","date_gmt":"2024-08-19T17:01:09","guid":{"rendered":"https:\/\/css-tricks.com\/?p=379959"},"modified":"2024-08-21T13:37:16","modified_gmt":"2024-08-21T19:37:16","slug":"on-the-ground-at-frostapalooza","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/on-the-ground-at-frostapalooza\/","title":{"rendered":"On the Ground at Frostapalooza"},"content":{"rendered":"\n<p>I can’t say I would have ever expected to see <a href=\"https:\/\/adactio.com\/\" rel=\"noopener\">Jeremy Keith<\/a> performing the Yeah Yeah Yeahs song <a href=\"https:\/\/www.youtube.com\/watch?v=oIIxlgcuQRU\" rel=\"noopener\">“Maps”<\/a>, but then again, I don’t know what I expected to happen at <a href=\"https:\/\/frostapalooza.bradfrost.com\/\" rel=\"noopener\"><em>Frostapalooza<\/em><\/a>.<\/p>\n\n\n\n\n\n\n<h3 class=\"wp-block-heading\" id=\"the-event\">The Event<\/h3>\n\n\n<p><a href=\"https:\/\/bradfrost.com\/\" rel=\"noopener\">Brad Frost<\/a>, web designer, author of <em>Atomic Design<\/em>, and an absolute maniac on the bass, celebrated his birthday by putting together a one-night-only benefit concert featuring musical performances by himself and his talented family and friends.<\/p>\n\n\n\n<p><em>Frostapalooza<\/em>, held at <a href=\"https:\/\/mrsmalls.com\/\" rel=\"noopener\">Mr. Smalls Theatre<\/a> in Pittsburgh, PA, was an all-ages event where 100% of the proceeds are headed towards two great causes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.nextstepfitness.org\/pittsburgh\" rel=\"noopener\">NextStep Pittsburgh<\/a>: Helping provide accessible rehabilitation for folks with spinal cord injuries and paralysis in Pittsburgh.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.projecthealthyminds.com\/\" rel=\"noopener\">Project Healthy Minds<\/a>: Providing research and resources to help tackle mental health.<\/li>\n<\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"performances\">Performances<\/h3>\n\n\n<p>The variation of musical performances sprawled across the night, covering tracks by Fleetwood Mac, Radiohead, David Bowie and so much more, check out this <a href=\"https:\/\/open.spotify.com\/playlist\/06QkEbTO5tATsF6EG9G2Iw?si=6e199a38e82a430d\" rel=\"noopener\">setlist of all 31 tracks on Spotify<\/a>.<\/p>\n\n\n\n<p>I loved the performance of Pink Floyd’s classic song, “Money.” As a Floyd fan who will never get to see them live, this was easily the best rendition I could ask for, which included the full lineup of instrumental sections.<\/p>\n\n\n\n<p>Brad was joined on stage by none other than <a href=\"https:\/\/css-tricks.com\/\">CSS-Tricks<\/a> founder, <a href=\"https:\/\/chriscoyier.net\/\" rel=\"noopener\">Chris Coyier<\/a>. Chris picked banjo on a few songs, such as Johnny Cash’s “Folsom Prison Blues” and The Band’s “The Weight,” both fantastic.<\/p>\n\n\n\n<p>The stage background prominently displayed visuals out of CodePen demos made by CodePen community members during the set. Check out the <a href=\"https:\/\/codepen.io\/tag\/frostapalooza\" rel=\"noopener\">Frostapalooza tag on CodePen<\/a> to see everything that was projected.<\/p>\n\n\n\n<p>Another favorite moment was Brad’s version of “Wake Up” by Arcade Fire, which felt like a perfectly matched song for the evening.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"musicians\">Musicians<\/h3>\n\n\n<p>If you haven’t caught on yet, many of the folks lending their musical talents to <em>Frostapalooza<\/em> also happen to be web designers and developers Brad has met and worked with during his career. At times it felt like the <em>Wu-Tang Clan<\/em> of CSS on stage.<\/p>\n\n\n\n<p>Brad’s family and musicians from his other bands pitched in, such as <a href=\"https:\/\/elbybrass.com\/\" rel=\"noopener\">Elby Brass<\/a>. Ridiculously impressive! I had never seen a tuba-playing lead vocalist until this night.<\/p>\n\n\n\n<p>You can see the full lineup on the <a href=\"https:\/\/frostapalooza.bradfrost.com\/\" rel=\"noopener\">event’s website<\/a>. But I’ll drop a screenshot in here just for posterity.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1886\" height=\"1054\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frostapalooza-lineup.png?resize=1886%2C1054&ssl=1\" alt=\"Full lineup of musicians who performed at Frostapalooza.\" class=\"wp-image-379964\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frostapalooza-lineup.png?w=1886&ssl=1 1886w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frostapalooza-lineup.png?resize=300%2C168&ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frostapalooza-lineup.png?resize=1024%2C572&ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frostapalooza-lineup.png?resize=768%2C429&ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frostapalooza-lineup.png?resize=1536%2C858&ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"photos-videos\">Photos! Videos!<\/h3>\n\n\n<div class=\"wp-block-jetpack-tiled-gallery aligncenter is-style-rectangular\"><div class=\"\"><div class=\"tiled-gallery__gallery\"><div class=\"tiled-gallery__row\"><div class=\"tiled-gallery__col\" style=\"flex-basis:70.83078%\"><figure class=\"tiled-gallery__item\"><img decoding=\"async\" srcset=\"https:\/\/i2.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frost-1-1024x771.jpg?strip=info&w=600&ssl=1 600w,https:\/\/i2.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frost-1-1024x771.jpg?strip=info&w=900&ssl=1 900w,https:\/\/i2.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frost-1-1024x771.jpg?strip=info&w=1200&ssl=1 1200w,https:\/\/i2.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frost-1-1024x771.jpg?strip=info&w=1500&ssl=1 1500w,https:\/\/i2.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frost-1-1024x771.jpg?strip=info&w=1800&ssl=1 1800w,https:\/\/i2.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frost-1-1024x771.jpg?strip=info&w=2000&ssl=1 2000w\" alt=\"\" data-height=\"1928\" style=\"height: 1928px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-id=\"379984\" data-link=\"https:\/\/css-tricks.com\/on-the-ground-at-frostapalooza\/frost-1\/\" data-url=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frost-1-1024x771.jpg\" data-width=\"2560\" src=\"https:\/\/i2.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frost-1-1024x771.jpg?ssl=1\" data-amp-layout=\"responsive\" tabindex=\"0\" role=\"button\" aria-label=\"Open image 1 of 4 in full-screen\"\/><\/figure><\/div><div class=\"tiled-gallery__col\" style=\"flex-basis:29.16922%\"><figure class=\"tiled-gallery__item\"><img decoding=\"async\" srcset=\"https:\/\/i2.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frost-4-958x1024.jpg?strip=info&w=600&ssl=1 600w,https:\/\/i2.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frost-4-958x1024.jpg?strip=info&w=900&ssl=1 900w,https:\/\/i2.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frost-4-958x1024.jpg?strip=info&w=1200&ssl=1 1200w,https:\/\/i2.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frost-4-958x1024.jpg?strip=info&w=1500&ssl=1 1500w,https:\/\/i2.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frost-4-958x1024.jpg?strip=info&w=1800&ssl=1 1800w,https:\/\/i2.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frost-4-958x1024.jpg?strip=info&w=2000&ssl=1 2000w\" alt=\"\" data-height=\"2560\" style=\"height: 2560px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-id=\"379983\" data-link=\"https:\/\/css-tricks.com\/on-the-ground-at-frostapalooza\/frost-4\/\" data-url=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frost-4-958x1024.jpg\" data-width=\"2394\" src=\"https:\/\/i2.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frost-4-958x1024.jpg?ssl=1\" data-amp-layout=\"responsive\" tabindex=\"0\" role=\"button\" aria-label=\"Open image 2 of 4 in full-screen\"\/><\/figure><figure class=\"tiled-gallery__item\"><img decoding=\"async\" srcset=\"https:\/\/i2.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frost-2-1024x771.jpg?strip=info&w=600&ssl=1 600w,https:\/\/i2.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frost-2-1024x771.jpg?strip=info&w=900&ssl=1 900w,https:\/\/i2.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frost-2-1024x771.jpg?strip=info&w=1200&ssl=1 1200w,https:\/\/i2.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frost-2-1024x771.jpg?strip=info&w=1500&ssl=1 1500w,https:\/\/i2.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frost-2-1024x771.jpg?strip=info&w=1800&ssl=1 1800w,https:\/\/i2.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frost-2-1024x771.jpg?strip=info&w=2000&ssl=1 2000w\" alt=\"\" data-height=\"1928\" style=\"height: 1928px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-id=\"379985\" data-link=\"https:\/\/css-tricks.com\/on-the-ground-at-frostapalooza\/frost-2\/\" data-url=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frost-2-1024x771.jpg\" data-width=\"2560\" src=\"https:\/\/i2.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frost-2-1024x771.jpg?ssl=1\" data-amp-layout=\"responsive\" tabindex=\"0\" role=\"button\" aria-label=\"Open image 3 of 4 in full-screen\"\/><\/figure><\/div><\/div><div class=\"tiled-gallery__row\"><div class=\"tiled-gallery__col\" style=\"flex-basis:100.00000%\"><figure class=\"tiled-gallery__item\"><img decoding=\"async\" srcset=\"https:\/\/i2.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frost-3-1024x771.jpg?strip=info&w=600&ssl=1 600w,https:\/\/i2.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frost-3-1024x771.jpg?strip=info&w=900&ssl=1 900w,https:\/\/i2.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frost-3-1024x771.jpg?strip=info&w=1200&ssl=1 1200w,https:\/\/i2.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frost-3-1024x771.jpg?strip=info&w=1500&ssl=1 1500w,https:\/\/i2.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frost-3-1024x771.jpg?strip=info&w=1800&ssl=1 1800w,https:\/\/i2.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frost-3-1024x771.jpg?strip=info&w=2000&ssl=1 2000w\" alt=\"\" data-height=\"1928\" style=\"height: 1928px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-id=\"379986\" data-link=\"https:\/\/css-tricks.com\/on-the-ground-at-frostapalooza\/frost-3\/\" data-url=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frost-3-1024x771.jpg\" data-width=\"2560\" src=\"https:\/\/i2.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frost-3-1024x771.jpg?ssl=1\" data-amp-layout=\"responsive\" tabindex=\"0\" role=\"button\" aria-label=\"Open image 4 of 4 in full-screen\"\/><\/figure><\/div><\/div><\/div><\/div><\/div>\n\n\n\n<p><a href=\"https:\/\/www.mikeaparicio.com\" rel=\"noopener\">Mike Aparicio<\/a> captured a great video of a group jam on Queen’s “Bohemian Rhapsody” that you’ve got to <a href=\"https:\/\/youtu.be\/VdN9FQ7bvKM?si=r4ArBDEpckFOkWmj\" rel=\"noopener\">watch on YouTube<\/a>. <a href=\"https:\/\/bkardell.com\" rel=\"noopener\">Brian Kardell<\/a> nabbed this gem of Chris pickin’ on “The Weight”:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Frostapalloza Chris Coyier doing one of the verses from The Band's "The Weight"\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/QOK2iQ4dEto?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Party boy Brad Frost shared a bunch of other photos from the event <a href=\"https:\/\/photos.app.goo.gl\/GzNQfjAoyvckBgZD6\" rel=\"noopener\">in a Google Photos album<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-end\">The end<\/h3>\n\n\n<p>Plain and simple, this was a super fun night celebrating music and friends. Happy birthday, Brad, and thanks for putting on an awesome show!<\/p>\n\n\n\n<p class=\"is-style-explanation\"><strong>Update (8\/21\/2024):<\/strong> You can check out <a href=\"https:\/\/adactio.com\/journal\/21355\" rel=\"noopener\">Jeremy Keith’s post-event wrap<\/a>, as well as <a href=\"https:\/\/bradfrost.com\/blog\/link\/adactio-journal-frostapalooza\/\" rel=\"noopener\">Brad’s commentary on it<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I can’t say I would have ever expected to see Jeremy Keith performing the Yeah Yeah Yeahs song “Maps”, but […]<\/p>\n","protected":false},"author":288741,"featured_media":379984,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2},"_share_on_mastodon":"1","_share_on_mastodon_status":"A little \"on the ground\" reporting of Frostapalooza by @mrtrimble@front-end.social %permalink%"},"categories":[4],"tags":[564],"class_list":["post-379959","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","tag-event"],"jetpack_publicize_connections":[],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"https:\/\/mastodon.social\/@csstricks\/112989757170757826","error":""},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/frost-1-scaled.jpg?fit=2560%2C1928&ssl=1","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/379959"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/288741"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=379959"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/379959\/revisions"}],"predecessor-version":[{"id":380037,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/379959\/revisions\/380037"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/379984"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=379959"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=379959"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=379959"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":379851,"date":"2024-08-19T08:21:07","date_gmt":"2024-08-19T14:21:07","guid":{"rendered":"https:\/\/css-tricks.com\/?p=379851"},"modified":"2024-08-21T08:14:24","modified_gmt":"2024-08-21T14:14:24","slug":"all-about-javascript-loops","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/all-about-javascript-loops\/","title":{"rendered":"All About JavaScript Loops"},"content":{"rendered":"\n<p>Every programming language has loops. Loops perform an operation (i.e., a chunk of work) a number of times, usually once for every item in an array or list, or to simply repeat an operation until a certain condition is met.<\/p>\n\n\n\n<p>JavaScript in particular has quite a few different types of loops. I haven’t even used all of them, so for my own curiosity, I thought I’d do a high-level overview of them. And as it turns out, there are pretty good reasons I haven’t used at least a couple of the different types.<\/p>\n\n\n\n<p>So, <code>for<\/code> now let’s spend a <code>while<\/code> exploring the different types of loops, what we can <code>do<\/code> with <code>each<\/code> of one, and why you might use one over another. (You’ll think that little play on words is absolutely hilarious by the end.)<\/p>\n\n\n\n\n\n\n<h3 class=\"wp-block-heading\" id=\"the-while-and-do-while-loops\">The <code>while<\/code> and <code>do...while<\/code> loops<\/h3>\n\n\n<p>First up is the <code>while<\/code> loop. It’s the most basic type of loop and has the potential to be the easiest to read and the fastest in many cases. It’s usually used for doing something until a certain condition is met. It’s also the easiest way to make an infinite loop or a loop that never stops. There is also the <code>do...while<\/code> statement. Really, the only difference is that the condition is checked at the end versus the beginning of each iteration.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/ remove the first item from an array and log it until the array is empty\nlet queue1 = [\"a\", \"b\", \"c\"];\n\nwhile (queue1.length) {\n let item = queue1.shift();\n\n console.log(item);\n}\n\n\/\/ same as above but also log when the array is empty\nlet queue2 = [];\n\ndo {\n let item = queue2.shift() ?? \"empty\";\n\n console.log(item);\n} while (queue2.length);<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-for-loop\">The <code>for<\/code> loop<\/h3>\n\n\n<p>Next is the <code>for<\/code> loop. It should be the go to way to do something a certain number of times. If you need to repeat an operation, say, 10 times, then use a <code>for<\/code> loop instead. This particular loop may be intimidating to those new to programming, but rewriting the same loop in the <code>while<\/code>-style loop can help illustrate the syntax make it easier to stick in your mind.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/ log the numbers 1 to 5\nfor (let i = 1; i <= 5; i++) {\n console.log(i);\n}\n\n\/\/ same thing but as a while loop\nlet i = 1; \/\/ the first part of a for loop\n\n\/\/ the second\nwhile (i <= 5) {\n console.log(i);\n\n i++; \/\/ the third\n}\n\n(\"end\");<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-for-of-and-for-await-of-loops\">The <code>for...of<\/code> and <code>for await...of<\/code> loops<\/h3>\n\n\n<p>A <code>for...of<\/code> loop is the easiest way to loop through an array.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">let myList = [\"a\", \"b\", \"c\"];\n\nfor (let item of myList) {\n console.log(item);\n}<\/code><\/pre>\n\n\n\n<p>They aren’t limited to arrays though. Technically they can iterate through anything that implements what is called an <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Iteration_protocols\" rel=\"noopener\">iterable protocol<\/a>. There are a few built-in types that implement the protocol: arrays, maps, set, and string, to mention the most common ones, but you can implement the protocol in your own code. What you’d do is add a <code>[Symbol.iterator]<\/code> method to any object and that method should return an iterator. It’s a bit confusing, but the gist is that iterables are things with a special method that returns iterators; a factory method for iterators if you will. A special type of function called a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\/Iterators_and_generators\" rel=\"noopener\">generator<\/a> is a function that returns both a iterable and iterator.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">let myList = {\n *[Symbol.iterator]() {\n yield \"a\";\n yield \"b\";\n yield \"c\";\n },\n};\n\nfor (let item of myList) {\n console.log(item);\n}<\/code><\/pre>\n\n\n\n<p>There is the <code>async<\/code> version of all the things I just mentioned: <code>async<\/code> iterables, <code>async<\/code> iterators, and <code>async<\/code> generators. You’d use an <code>async<\/code> iterable with for <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/for-await...of\" rel=\"noopener\"><code>await...of<\/code><\/a>.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">async function delay(ms) {\n return new Promise((resolve) => {\n setTimeout(resolve, ms);\n });\n}\n\n\/\/ this time we're not making an iterable, but a generator\nasync function* aNumberAMinute() {\n let i = 0;\n\n while (true) {\n \/\/ an infinite loop\n yield i++;\n\n \/\/ pause a minute\n await delay(60_000);\n }\n}\n\n\/\/ it's a generator, so we need to call it ourselves\nfor await (let i of aNumberAMinute()) {\n console.log(i);\n\n \/\/ stop after one hour\n if (i >= 59) {\n break;\n }\n}<\/code><\/pre>\n\n\n\n<p>One unobvious thing about for <code>await...of<\/code> statement is that you can use it with non-async iterables and it will work just fine. The reverse, however, is not true; you can’t use <code>async<\/code> iterables with the <code>for...of<\/code> statement.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-foreach-and-map-loops\">The <code>forEach<\/code> and <code>map<\/code> loops<\/h3>\n\n\n<p>While these are not technically loops per se, you can use them to iterate over a list.<\/p>\n\n\n\n<p>Here is the thing about the <code>forEach<\/code> method. Historically it was much slower than using a <code>for<\/code> loop. I think in some cases that may not be true anymore, but if performance is a concern, then I would avoid using it. And now that we have <code>for...of<\/code> I’m not sure there is much reason to use it. I guess the only reason that it still may come up is if you have a function ready to use as the callback, but you could easily just call that same function from inside the body of <code>for...of<\/code>.<\/p>\n\n\n\n<p><code>forEach<\/code> also receives the index for each item though, so that may be a thing you need too. Ultimately, the decision to use it will probably come down to whether any other code you’re working with uses it, but I personally would avoid using it if I’m writing something new.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">let myList = [\"a\", \"b\", \"c\"];\n\nfor (let item of myList) {\n\tconsole.log(item);\n}\n\n\/\/ but maybe if I need the index use forEach\n[\"a\", \"b\", \"c\"].forEach((item, index) => {\n console.log(`${index}: ${item}`);\n});<\/code><\/pre>\n\n\n\n<p>Meanwhile, <code>map<\/code> essentially converts one array into another. It still has the same performance impact that <code>forEach<\/code> has, but it is a bit nicer to read than the alternative. It’s certainly subjective though, and just like with <code>forEach<\/code> you’ll want to do what the rest of your other code is doing. You see it a ton in React and React-inspired libraries as the primary way to loop through an array and output a list of items within JSX.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">function MyList({items}) {\n return (\n <ul>\n {items.map((item) => {\n return <li>{item}<\/li>;\n })}\n <\/ul>\n );\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-for-in-loop\">The <code>for...in<\/code> loop<\/h3>\n\n\n<p>This list of loops in JavaScript wouldn’t be complete without mentioning the <code>for...in<\/code> statement because it can loop through the fields of an object. It visits fields that are inherited through the object’s prototype chain too, though, and I’ve honestly always avoided it for that reason.<\/p>\n\n\n\n<p>That said, if you have an object literal, then <code>for...in<\/code> might be a viable way to iterate through the keys of that object. Also it’s worth noting that if you’ve been programming JavaScript for a long time, you may remember that the order of keys use to be inconsistent between browsers, but now the order is consistent. Any key that could be an array index (i.e., positive integers) will be first in ascending order, and then everything else in the order as authored.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">let myObject = {\n a: 1,\n b: 2,\n c: 3,\n};\n\nfor (let k in myObject) {\n console.log(myObject[k]);\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"wrapping-up\">Wrapping up<\/h3>\n\n\n<p>Loops are something that many programmers use every day, though we may take them for granted and not think about them too much.<\/p>\n\n\n\n<p>But when you step back and look at all of the ways we have to loop through things in JavaScript, it turns out there are several ways to do it. Not only that, but there are significant \u2014 if not nuanced \u2014 differences between them that can and will influence your approach to scripts.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Every programming language has loops. Loops perform an operation (i.e., a chunk of work) a number of times, usually once […]<\/p>\n","protected":false},"author":288742,"featured_media":278550,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2},"_share_on_mastodon":"1","_share_on_mastodon_status":"Lots of ways to loop in JS! @erickjm@mastodon.online breaks them down so succinctly. %permalink%"},"categories":[4],"tags":[432],"class_list":["post-379851","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","tag-javascript"],"jetpack_publicize_connections":[],"acf":{"show_toc":"Yes"},"share_on_mastodon":{"url":"https:\/\/mastodon.social\/@csstricks\/112989127877893610","error":""},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/loops.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/379851"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/288742"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=379851"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/379851\/revisions"}],"predecessor-version":[{"id":380011,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/379851\/revisions\/380011"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/278550"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=379851"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=379851"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=379851"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":379881,"date":"2024-08-16T10:12:51","date_gmt":"2024-08-16T16:12:51","guid":{"rendered":"https:\/\/css-tricks.com\/?p=379881"},"modified":"2024-08-16T10:12:55","modified_gmt":"2024-08-16T16:12:55","slug":"csswg-minutes-telecon-2024-08-14","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/csswg-minutes-telecon-2024-08-14\/","title":{"rendered":"CSSWG Minutes Telecon (2024-08-14)"},"content":{"rendered":"\n<p>I was just going over the latest CSSWG minutes (you can <a href=\"https:\/\/lists.w3.org\/Archives\/Public\/www-style\/2024Aug\/0009.html\" rel=\"noopener\">subscribe to them<\/a> at W3C.org) and came across a few interesting nuggets I wanted to jot down for another time. The group discussed the CSS Values, CSS Easing, and Selectors modules, but what <em>really<\/em> caught my eye was adding triggered delays to CSS for things like hover, long taps, and focus states.<\/p>\n\n\n\n<p>The idea stems from an <a href=\"https:\/\/open-ui.org\/components\/interest-invokers.explainer\/\" rel=\"noopener\">OpenUI proposal<\/a>, the same group we can thank for raising things like the <a href=\"https:\/\/css-tricks.com\/poppin-in\/\">Popover API<\/a> and <a href=\"https:\/\/css-tricks.com\/the-selectmenu-element\/\">customizable select element<\/a>. The concept, if I understand it right, is that anytime someone hovers, taps, or focuses on, say, a <code><button><\/code> for a certain amount of time, we can invoke some sort of thing. A tooltip is the perfect illustration. Hovering over the trigger element, the reasoning goes, is an expression of interest and as web authors, we can do something with that interest, like displaying a tooltip.<\/p>\n\n\n\n\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"600\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/long-hover.png?resize=1200%2C600&ssl=1\" alt=\"A mouse cursor hovering an info button with an hourglass next to it indicating time passed before showing a tooltip.\" class=\"wp-image-379882\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/long-hover.png?w=1200&ssl=1 1200w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/long-hover.png?resize=300%2C150&ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/long-hover.png?resize=1024%2C512&ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/long-hover.png?resize=768%2C384&ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p><em>Whoa<\/em>, right?! There’s long been chatter about CSS encroaching on JavaScript territory (<a href=\"https:\/\/css-tricks.com\/the-great-divide\/\">isn’t it ironic<\/a>, don’t you think?). Firing events in response to interaction is quite literally the only thing I use JavaScript for. There’s no mistake about that in the CSSWG, as documented in the minutes:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>So. Does this belong in CSS? Or should it be elsewhere? Does the approach make sense? Are there better ideas? Most interested in the last.<\/p>\n\n\n\n<p>[…]<\/p>\n\n\n\n<p>Other question; does this belong in CSS or HTML\u2026 maybe this is just a javascript feature? In JS you can determine MQ state and change things so it wouldn’t necessarily be in CSS.<\/p>\n<\/blockquote>\n\n\n\n<p>And shortly later:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>As you were talking; one thing that I kept thinking of; should developers be customizing the delay at all? Original use case for delay is that hover shouldn’t be instant. But if we don’t allow for customizing we can align to platform delay lengths.<\/p>\n<\/blockquote>\n\n\n\n<p>But there’s an excellent point to be made about the way many of us are already doing this with CSS animations (<a href=\"https:\/\/css-tricks.com\/almanac\/properties\/a\/animation\/\"><code>animation-delay<\/code><\/a>) and transitions (<code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/transition-delay\/\">transition-delay<\/a><\/code>). Sometimes even applying those globally with the Universal Selector or a <code>prefers-*<\/code> query.<\/p>\n\n\n\n<p>Things get even hairier when considering how values are defined for this. Are they explicit delays (<code>800ms<\/code>), generic keywords (<code>none<\/code>\/<code>short<\/code>\/<code>medium<\/code>\/<code>long<\/code>), a custom property, a pseudo-class… <em>something else<\/em>? I’m glad there’re incredibly smart folks noodling on this stuff.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>I think here it would be good to go with time values. CSS is a good place to put it. We have all the ergonomics. The right declarative place to put it.<\/p>\n<\/blockquote>\n\n\n\n<p>Whatever the eventual case may be:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>I think this sounds reasonable and I’d like to explore it. Unsure if this is the exact shape, but this space seems useful to me.<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>I was just going over the latest CSSWG minutes (you can subscribe to them at W3C.org) and came across a […]<\/p>\n","protected":false},"author":2508,"featured_media":379882,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"Long Hovers, Taps, and Focus... oh my!","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2},"_share_on_mastodon":"1","_share_on_mastodon_status":"Note on %title% %permalink%"},"categories":[19078],"tags":[612,4976,1170],"class_list":["post-379881","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-notes","tag-animation","tag-popover","tag-transition"],"jetpack_publicize_connections":[],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"https:\/\/mastodon.social\/@csstricks\/112972580335753067","error":""},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/08\/long-hover.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/379881"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=379881"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/379881\/revisions"}],"predecessor-version":[{"id":379897,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/379881\/revisions\/379897"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/379882"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=379881"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=379881"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=379881"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}]