-
Notifications
You must be signed in to change notification settings - Fork 7.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(route): add Smashing magazine #12961
Conversation
Successfully generated as following: http://localhost:1200/smashingmagazine/wallpapers - Success ✔️<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"
>
<channel>
<title><![CDATA[Smashing Magazine Articles]]></title>
<link>https://www.smashingmagazine.com/category/wallpapers</link>
<atom:link href="http://localhost:1200/smashingmagazine/wallpapers" rel="self" type="application/rss+xml" />
<description><![CDATA[Latest Articles on Smashingmagazine.com - Made with love by RSSHub(https://github.com/DIYgod/RSSHub)]]></description>
<generator>RSSHub</generator>
<webMaster>i@diygod.me (DIYgod)</webMaster>
<language>en-us</language>
<lastBuildDate>Wed, 09 Aug 2023 14:25:32 GMT</lastBuildDate>
<ttl>5</ttl>
<item>
<title><![CDATA[Living In The Moment (August 2023 Wallpapers Edition)]]></title>
<description><![CDATA[New month, new wallpapers! In this post, you’ll find unique and inspiring wallpapers for August 2023. Created with love by the community for the community, they come in versions with and without a calendar. Enjoy!
]]></description>
<pubDate>Sun, 30 Jul 2023 16:00:00 GMT</pubDate>
<guid isPermaLink="false">https://www.smashingmagazine.com/2023/07/desktop-wallpaper-calendars-august-2023/</guid>
<link>https://www.smashingmagazine.com/2023/07/desktop-wallpaper-calendars-august-2023/</link>
<author><![CDATA[Cosima Mielke]]></author>
<category>Wallpapers</category>
</item>
<item>
<title><![CDATA[Off To New Adventures (July 2023 Wallpapers Edition)]]></title>
<description><![CDATA[Let’s welcome the new month with some fresh desktop wallpapers. Designed by artists and designers from around the globe, they come in versions with and without a calendar for July 2023. Enjoy!
]]></description>
<pubDate>Sun, 30 Jul 2023 16:00:00 GMT</pubDate>
<guid isPermaLink="false">https://www.smashingmagazine.com/2023/06/desktop-wallpaper-calendars-july-2023/</guid>
<link>https://www.smashingmagazine.com/2023/06/desktop-wallpaper-calendars-july-2023/</link>
<author><![CDATA[Cosima Mielke]]></author>
<category>Wallpapers</category>
</item>
<item>
<title><![CDATA[Create Your Own Path In June (2023 Wallpapers Edition)]]></title>
<description><![CDATA[Do you need a little inspiration boost? Well, then our new batch of desktop wallpapers might be for you. Designed by artists and designers from across the globe, the wallpapers in this post come in versions with and without a calendar for June 2023. Enjoy!
]]></description>
<pubDate>Sun, 30 Jul 2023 16:00:00 GMT</pubDate>
<guid isPermaLink="false">https://www.smashingmagazine.com/2023/05/desktop-wallpaper-calendars-june-2023/</guid>
<link>https://www.smashingmagazine.com/2023/05/desktop-wallpaper-calendars-june-2023/</link>
<author><![CDATA[Cosima Mielke]]></author>
<category>Wallpapers</category>
</item>
<item>
<title><![CDATA[Make Your May Magnificent (2023 Wallpapers Edition)]]></title>
<description><![CDATA[May is almost here, so what better occasion could there be for some fresh and inspiring desktop and mobile wallpapers? Created with love by artists and designers from across the globe, the wallpapers in this post come in versions with and without a calendar. Enjoy!
]]></description>
<pubDate>Sun, 30 Jul 2023 16:00:00 GMT</pubDate>
<guid isPermaLink="false">https://www.smashingmagazine.com/2023/04/desktop-wallpaper-calendars-may-2023/</guid>
<link>https://www.smashingmagazine.com/2023/04/desktop-wallpaper-calendars-may-2023/</link>
<author><![CDATA[Cosima Mielke]]></author>
<category>Wallpapers</category>
</item>
<item>
<title><![CDATA[Swing Into April (2023 Wallpapers Edition)]]></title>
<description><![CDATA[With April just around the corner, we have a new collection of desktop and mobile wallpapers waiting for you to celebrate the beginning of the new month. Designed by creatives from all across the globe, the wallpapers come in versions with and without a calendar. Enjoy!
]]></description>
<pubDate>Sun, 30 Jul 2023 16:00:00 GMT</pubDate>
<guid isPermaLink="false">https://www.smashingmagazine.com/2023/03/desktop-wallpaper-calendars-april-2023/</guid>
<link>https://www.smashingmagazine.com/2023/03/desktop-wallpaper-calendars-april-2023/</link>
<author><![CDATA[Cosima Mielke]]></author>
<category>Wallpapers</category>
</item>
<item>
<title><![CDATA[Daydreaming In March (2023 Wallpapers Edition)]]></title>
<description><![CDATA[Let’s get ready for March with some fresh wallpapers! Designed with love by the community for the community, the wallpaper designs in this collection are available in versions with and without a calendar. Enjoy!
]]></description>
<pubDate>Sun, 30 Jul 2023 16:00:00 GMT</pubDate>
<guid isPermaLink="false">https://www.smashingmagazine.com/2023/02/desktop-wallpaper-calendars-march-2023/</guid>
<link>https://www.smashingmagazine.com/2023/02/desktop-wallpaper-calendars-march-2023/</link>
<author><![CDATA[Cosima Mielke]]></author>
<category>Wallpapers</category>
</item>
<item>
<title><![CDATA[The Magic Of February (2023 Wallpapers Edition)]]></title>
<description><![CDATA[Do you need a little inspiration boost? Well, then our new batch of desktop wallpapers is for you. Designed by artists and designers from across the globe, they come in versions with and without a calendar for February 2023.
]]></description>
<pubDate>Sun, 30 Jul 2023 16:00:00 GMT</pubDate>
<guid isPermaLink="false">https://www.smashingmagazine.com/2023/01/desktop-wallpaper-calendars-february-2023/</guid>
<link>https://www.smashingmagazine.com/2023/01/desktop-wallpaper-calendars-february-2023/</link>
<author><![CDATA[Cosima Mielke]]></author>
<category>Wallpapers</category>
</item>
<item>
<title><![CDATA[Opening The Doors To 2023 (January Wallpapers Edition)]]></title>
<description><![CDATA[Let’s start into the new year with a little inspiration boost: wallpapers created with love by the community for the community. Happy 2023!
]]></description>
<pubDate>Sun, 30 Jul 2023 16:00:00 GMT</pubDate>
<guid isPermaLink="false">https://www.smashingmagazine.com/2022/12/desktop-wallpaper-calendars-january-2023/</guid>
<link>https://www.smashingmagazine.com/2022/12/desktop-wallpaper-calendars-january-2023/</link>
<author><![CDATA[Cosima Mielke]]></author>
<category>Wallpapers</category>
</item>
<item>
<title><![CDATA[Endings And New Beginnings (December 2022 Desktop Wallpapers Edition)]]></title>
<description><![CDATA[December is almost here, so why not spread some holiday love across your devices? We’ve got some beautiful wallpapers to sweeten up the last days of the year.
]]></description>
<pubDate>Sun, 30 Jul 2023 16:00:00 GMT</pubDate>
<guid isPermaLink="false">https://www.smashingmagazine.com/2022/11/desktop-wallpaper-calendars-december-2022/</guid>
<link>https://www.smashingmagazine.com/2022/11/desktop-wallpaper-calendars-december-2022/</link>
<author><![CDATA[Cosima Mielke]]></author>
<category>Wallpapers</category>
</item>
<item>
<title><![CDATA[On The Edge Of November (2022 Desktop Wallpapers Edition)]]></title>
<description><![CDATA[November is just around the corner, and with it, a new collection of desktop wallpapers to celebrate the beginning of the month. Designed by creatives from all across the globe, they come in versions with and without a calendar. Let’s make November colorful!
]]></description>
<pubDate>Sun, 30 Jul 2023 16:00:00 GMT</pubDate>
<guid isPermaLink="false">https://www.smashingmagazine.com/2022/10/desktop-wallpaper-calendars-november-2022/</guid>
<link>https://www.smashingmagazine.com/2022/10/desktop-wallpaper-calendars-november-2022/</link>
<author><![CDATA[Cosima Mielke]]></author>
<category>Wallpapers</category>
</item>
</channel>
</rss>
http://localhost:1200/smashingmagazine - Success ✔️<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"
>
<channel>
<title><![CDATA[Smashing Magazine Articles]]></title>
<link>https://www.smashingmagazine.com/articles</link>
<atom:link href="http://localhost:1200/smashingmagazine" rel="self" type="application/rss+xml" />
<description><![CDATA[Latest Articles on Smashingmagazine.com - Made with love by RSSHub(https://github.com/DIYgod/RSSHub)]]></description>
<generator>RSSHub</generator>
<webMaster>i@diygod.me (DIYgod)</webMaster>
<language>en-us</language>
<lastBuildDate>Wed, 09 Aug 2023 14:25:34 GMT</lastBuildDate>
<ttl>5</ttl>
<item>
<title><![CDATA[Using Friction As A Feature In Machine Learning Algorithms]]></title>
<description><![CDATA[Friction often has a negative connotation in user experience design, but it actually has many benefits. Its best-known use case is mitigating unintended consequences in high-risk scenarios, yet it has a new place in the age of artificial intelligence. Adding strategic friction to interfaces can lead to profound efficiency gains in machine learning algorithms.
]]></description>
<pubDate>Sun, 06 Aug 2023 16:00:00 GMT</pubDate>
<guid isPermaLink="false">https://www.smashingmagazine.com/2023/08/friction-feature-machine-learning-algorithms/</guid>
<link>https://www.smashingmagazine.com/2023/08/friction-feature-machine-learning-algorithms/</link>
<author><![CDATA[Maximillian Piras]]></author>
<category>AI</category>
<category>UX</category>
<category>Design</category>
<category>Machine Learning</category>
</item>
<item>
<title><![CDATA[Designing Accessible Text Over Images: Best Practices, Techniques, And Resources (Part 1)]]></title>
<description><![CDATA[In this two-part series of articles, Hannah Milan covers the best practices when using various accessible text over images techniques for designing your web and mobile app content.
]]></description>
<pubDate>Sun, 06 Aug 2023 16:00:00 GMT</pubDate>
<guid isPermaLink="false">https://www.smashingmagazine.com/2023/08/designing-accessible-text-over-images-part1/</guid>
<link>https://www.smashingmagazine.com/2023/08/designing-accessible-text-over-images-part1/</link>
<author><![CDATA[Hannah Milan]]></author>
<category>Design</category>
<category>Accessibility</category>
<category>Techniques</category>
<category>Typography</category>
</item>
<item>
<title><![CDATA[How We Optimized Performance To Serve A Global Audience]]></title>
<description><![CDATA[Liran Cohen and the team at Bookaway, a travel booking service, dramatically improved their site’s performance by auditing Core Web Vitals. In this article, Liran shares his team’s process for auditing and monitoring Web Vitals and the effort it took to dramatically improve Bookaway’s performance — and the benefits that came with it.
]]></description>
<pubDate>Sun, 06 Aug 2023 16:00:00 GMT</pubDate>
<guid isPermaLink="false">https://www.smashingmagazine.com/2023/08/optimize-performance-serve-global-audience/</guid>
<link>https://www.smashingmagazine.com/2023/08/optimize-performance-serve-global-audience/</link>
<author><![CDATA[Liran Cohen]]></author>
<category>Performance</category>
<category>Case Studies</category>
<category>Optimization</category>
<category>Core Web Vitals</category>
</item>
<item>
<title><![CDATA[Smashing Podcast Episode 64 With Alvin Bryan: What Is A Headless CMS?]]></title>
<description><![CDATA[We’re talking about headless content management systems. What are they, and how do they differ from more traditional systems? Drew McLellan talks to Alvin Bryan to find out.
]]></description>
<pubDate>Sun, 06 Aug 2023 16:00:00 GMT</pubDate>
<guid isPermaLink="false">https://www.smashingmagazine.com/2023/08/smashing-podcast-episode-64/</guid>
<link>https://www.smashingmagazine.com/2023/08/smashing-podcast-episode-64/</link>
<author><![CDATA[Drew McLellan]]></author>
<category>Smashing Podcast</category>
</item>
<item>
<title><![CDATA[CSS And Accessibility: Inclusion Through User Choice]]></title>
<description><![CDATA[In this article, Carie Fisher outlines which CSS media features are available for detecting user preferences and how they are used to design and build more inclusive user experiences.
]]></description>
<pubDate>Sun, 06 Aug 2023 16:00:00 GMT</pubDate>
<guid isPermaLink="false">https://www.smashingmagazine.com/2023/08/css-accessibility-inclusion-user-choice/</guid>
<link>https://www.smashingmagazine.com/2023/08/css-accessibility-inclusion-user-choice/</link>
<author><![CDATA[Carie Fisher]]></author>
<category>CSS</category>
<category>Accessibility</category>
<category>User Experience</category>
</item>
<item>
<title><![CDATA[How To Define An Array Of Colors With CSS]]></title>
<description><![CDATA[Join Temani Afif on experiment with modern CSS features to create an array of colors. The goal is to define a comma-separated list of colors and iterate through them using an index.
]]></description>
<pubDate>Sun, 06 Aug 2023 16:00:00 GMT</pubDate>
<guid isPermaLink="false">https://www.smashingmagazine.com/2023/07/define-array-colors-css/</guid>
<link>https://www.smashingmagazine.com/2023/07/define-array-colors-css/</link>
<author><![CDATA[Temani Afif]]></author>
<category>CSS</category>
<category>Design</category>
<category>Techniques</category>
</item>
<item>
<title><![CDATA[How To Use Artificial Intelligence And Machine Learning To Summarize Chat Conversations]]></title>
<description><![CDATA[In this article, we’ll explore how to build a chat summarizer using the Cohere API and deploy it as a web application using Gradio. is an AI platform that provides state-of-the-art natural language processing models for a variety of tasks, including summarization. We’ll cover the steps involved in training the summarizer using sample chat conversations, interacting with the Cohere API to generate summaries, and creating a user-friendly interface using .
]]></description>
<pubDate>Sun, 06 Aug 2023 16:00:00 GMT</pubDate>
<guid isPermaLink="false">https://www.smashingmagazine.com/2023/07/artificial-intelligence-machine-learning-summarize-chat-conversations/</guid>
<link>https://www.smashingmagazine.com/2023/07/artificial-intelligence-machine-learning-summarize-chat-conversations/</link>
<author><![CDATA[Joas Pambou]]></author>
<category>Tools</category>
<category>ML</category>
<category>AI</category>
</item>
<item>
<title><![CDATA[Modern Technology And The Future Of Language Translation]]></title>
<description><![CDATA[The field of language translation has never been more exciting. Explore the evolution of language translation platforms, how we got to where we are today, and what advancements we can look forward to in the coming years.
]]></description>
<pubDate>Sun, 06 Aug 2023 16:00:00 GMT</pubDate>
<guid isPermaLink="false">https://www.smashingmagazine.com/2023/07/modern-technology-future-language-translation/</guid>
<link>https://www.smashingmagazine.com/2023/07/modern-technology-future-language-translation/</link>
<author><![CDATA[Adriano Raiano]]></author>
<category>UX</category>
<category>Internationalization</category>
<category>AI</category>
<category>User Interaction</category>
</item>
<item>
<title><![CDATA[Recreating YouTube’s Ambient Mode Glow Effect]]></title>
<description><![CDATA[In this article, Adrian deconstructs YouTube’s “Ambient Mode” feature and how HTML and the function are used to create the glowing effect.
]]></description>
<pubDate>Sun, 06 Aug 2023 16:00:00 GMT</pubDate>
<guid isPermaLink="false">https://www.smashingmagazine.com/2023/07/recreating-youtube-ambient-mode-glow-effect/</guid>
<link>https://www.smashingmagazine.com/2023/07/recreating-youtube-ambient-mode-glow-effect/</link>
<author><![CDATA[Adrian Bece]]></author>
<category>CSS</category>
<category>HTML</category>
<category>UI</category>
<category>Tools</category>
<category>Techniques</category>
</item>
<item>
<title><![CDATA[Living In The Moment (August 2023 Wallpapers Edition)]]></title>
<description><![CDATA[New month, new wallpapers! In this post, you’ll find unique and inspiring wallpapers for August 2023. Created with love by the community for the community, they come in versions with and without a calendar. Enjoy!
]]></description>
<pubDate>Sun, 30 Jul 2023 16:00:00 GMT</pubDate>
<guid isPermaLink="false">https://www.smashingmagazine.com/2023/07/desktop-wallpaper-calendars-august-2023/</guid>
<link>https://www.smashingmagazine.com/2023/07/desktop-wallpaper-calendars-august-2023/</link>
<author><![CDATA[Cosima Mielke]]></author>
<category>Wallpapers</category>
</item>
</channel>
</rss>
|
lib/v2/smashingmagazine/category.js
Outdated
const { data: response } = await got(item.link); | ||
const $ = cheerio.load(response); | ||
item.category = $('li.meta-box--tags a') | ||
.toArray() | ||
.map((item) => $(item).text()); | ||
return item; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since you're visiting the full article, you can put the article html into description
as well.
Successfully generated as following: http://localhost:1200/smashingmagazine/wallpapers - Success ✔️<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"
>
<channel>
<title><![CDATA[Smashing Magazine Articles]]></title>
<link>https://www.smashingmagazine.com/category/wallpapers</link>
<atom:link href="http://localhost:1200/smashingmagazine/wallpapers" rel="self" type="application/rss+xml" />
<description><![CDATA[Latest Articles on Smashingmagazine.com - Made with love by RSSHub(https://github.com/DIYgod/RSSHub)]]></description>
<generator>RSSHub</generator>
<webMaster>i@diygod.me (DIYgod)</webMaster>
<language>en-us</language>
<lastBuildDate>Thu, 10 Aug 2023 02:03:38 GMT</lastBuildDate>
<ttl>5</ttl>
<item>
<title><![CDATA[Living In The Moment (August 2023 Wallpapers Edition)]]></title>
<description><![CDATA[<h1 id="main-heading" class="article-header--title">Living In The Moment (August 2023 Wallpapers Edition)</h1><span id="article__start" class="summary__heading" aria-hidden="true"></span>New month, new wallpapers! In this post, you’ll find unique and inspiring wallpapers for August 2023. Created with love by the community for the community, they come in versions with and without a calendar. Enjoy!<ul class="meta-box meta-box--article"><li class="meta-box--item meta-box--published">15 min read</li><li class="meta-box--item meta-box--tags"><a href="https://www.smashingmagazine.com/category/wallpapers">Wallpapers</a></li><li class="meta-box--item meta-box--share">Share on <a rel="nofollow" href="https://twitter.com/intent/tweet?text=Living%20In%20The%20Moment%20%28August%202023%20Wallpapers%20Edition%29&url=https%3A%2F%2Fwww.smashingmagazine.com%2f2023%2f07%2fdesktop-wallpaper-calendars-august-2023%2f&via=smashingmag">Twitter</a>, <a rel="nofollow" href="https://data.smashing.services/ball?uri=//www.linkedin.com/shareArticle?url=https://www.smashingmagazine.com%2f2023%2f07%2fdesktop-wallpaper-calendars-august-2023%2f&title=Living%20In%20The%20Moment%20%28August%202023%20Wallpapers%20Edition%29">LinkedIn</a></li></ul><p>Everybody loves a beautiful wallpaper to freshen up their desktops and home screens, right? To cater for <strong>new and unique artworks</strong> on a regular basis, we started our <a href="https://www.smashingmagazine.com/category/wallpapers">monthly wallpapers series</a> more than twelve years ago, and from the very beginning to today, artists and designers from across the globe have accepted the challenge and submitted their designs to it. Just like this month.</p><p>In this post, you’ll find their wallpapers for <strong>August 2023</strong>. All of them come in versions with and without a calendar, so no matter if you need to count down the days to a big deadline (or a few days off, maybe?) or plan to use your favorite wallpaper even after the month has ended, we’ve got you covered. A big thank-you to everyone who shared their designs with us — we sincerely appreciate it!</p><p>As a little bonus goodie, we also added some “oldies but goodies” at the end of this post, timeless wallpaper treasures that we rediscovered way down in our archives and that are just too good to be forgotten. Now there’s only one question left to be answered: Which one to choose? Happy August!</p><ul><li>You can <strong>click on every image to see a larger preview</strong>,</li><li>We respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the <strong>full freedom to explore their creativity</strong> and express emotions and experience through their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us but rather designed from scratch by the artists themselves.</li><li><strong><a href="https://www.smashingmagazine.com/desktop-wallpaper-calendars-join-in/">Submit a wallpaper!</a></strong><br>Did you know that <em>you</em> could get featured in our next wallpapers post, too? We are always <strong>looking for creative talent</strong>.</li></ul><h2 id="summer-day-08-2023">Summer Day</h2><p>Designed by <a href="https://cpsp.in/">Kasturi Palmal</a> from India.</p><figure class="break-out"><a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/aug-23-summer-day-full.png" title="Summer Day"><img alt="Summer Day" src="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2023/aug-23-summer-day-preview-opt.png" referrerpolicy="no-referrer"></a></figure><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/aug-23-summer-day-preview.png" title="Summer Day - Preview">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/cal/aug-23-summer-day-cal-800x600.jpg" title="Summer Day - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/cal/aug-23-summer-day-cal-1280x1024.jpg" title="Summer Day - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/cal/aug-23-summer-day-cal-1600x1200.jpg" title="Summer Day - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/cal/aug-23-summer-day-cal-1680x1200.jpg" title="Summer Day - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/cal/aug-23-summer-day-cal-1920x1080.jpg" title="Summer Day - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/cal/aug-23-summer-day-cal-1920x1200.jpg" title="Summer Day - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/cal/aug-23-summer-day-cal-1920x1440.jpg" title="Summer Day - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/cal/aug-23-summer-day-cal-2560x1440.jpg" title="Summer Day - 2560x1440">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/nocal/aug-23-summer-day-nocal-800x600.jpg" title="Summer Day - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/nocal/aug-23-summer-day-nocal-1280x1024.jpg" title="Summer Day - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/nocal/aug-23-summer-day-nocal-1600x1200.jpg" title="Summer Day - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/nocal/aug-23-summer-day-nocal-1680x1200.jpg" title="Summer Day - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/nocal/aug-23-summer-day-nocal-1920x1080.jpg" title="Summer Day - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/nocal/aug-23-summer-day-nocal-1920x1200.jpg" title="Summer Day - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/nocal/aug-23-summer-day-nocal-1920x1440.jpg" title="Summer Day - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/nocal/aug-23-summer-day-nocal-2560x1440.jpg" title="Summer Day - 2560x1440">2560x1440</a></li></ul><h2 id="retro-road-trip-08-2023">Retro Road Trip</h2><p>“As the sun dips below the horizon, casting a warm glow upon the open road, the retro van finds a resting place for the night. A campsite bathed in moonlight or a cozy motel straight from a postcard become havens where weary travelers can rest, rejuvenate, and prepare for the adventures that await with the dawn of a new day.” — Designed by <a href="https://www.popwebdesign.net/seo-optimizacija.html">PopArt Studio</a> from Serbia.</p><figure class="break-out"><a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/aug-23-retro-road-trip-full.jpg" title="Retro Road Trip"><img alt="Retro Road Trip" src="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2023/aug-23-retro-road-trip-preview-opt.png" referrerpolicy="no-referrer"></a></figure><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/aug-23-retro-road-trip-preview.jpg" title="Retro Road Trip - Preview">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-320x480.jpg" title="Retro Road Trip - 320x480">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-640x480.jpg" title="Retro Road Trip - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-800x480.jpg" title="Retro Road Trip - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-800x600.jpg" title="Retro Road Trip - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-1024x768.jpg" title="Retro Road Trip - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-1024x1024.jpg" title="Retro Road Trip - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-1152x864.jpg" title="Retro Road Trip - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-1280x720.jpg" title="Retro Road Trip - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-1280x800.jpg" title="Retro Road Trip - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-1280x960.jpg" title="Retro Road Trip - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-1280x1024.jpg" title="Retro Road Trip - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-1400x1050.jpg" title="Retro Road Trip - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-1440x900.jpg" title="Retro Road Trip - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-1600x1200.jpg" title="Retro Road Trip - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-1680x1050.jpg" title="Retro Road Trip - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-1680x1200.jpg" title="Retro Road Trip - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-1920x1080.jpg" title="Retro Road Trip - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-1920x1200.jpg" title="Retro Road Trip - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-1920x1440.jpg" title="Retro Road Trip - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-2560x1440.jpg" title="Retro Road Trip - 2560x1440">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-320x480.jpg" title="Retro Road Trip - 320x480">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-640x480.jpg" title="Retro Road Trip - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-800x480.jpg" title="Retro Road Trip - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-800x600.jpg" title="Retro Road Trip - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1024x768.jpg" title="Retro Road Trip - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1024x1024.jpg" title="Retro Road Trip - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1152x864.jpg" title="Retro Road Trip - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1280x720.jpg" title="Retro Road Trip - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1280x800.jpg" title="Retro Road Trip - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1280x960.jpg" title="Retro Road Trip - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1280x1024.jpg" title="Retro Road Trip - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1400x1050.jpg" title="Retro Road Trip - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1440x900.jpg" title="Retro Road Trip - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1600x1200.jpg" title="Retro Road Trip - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1680x1050.jpg" title="Retro Road Trip - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1680x1200.jpg" title="Retro Road Trip - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1920x1080.jpg" title="Retro Road Trip - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1920x1200.jpg" title="Retro Road Trip - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1920x1440.jpg" title="Retro Road Trip - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-2560x1440.jpg" title="Retro Road Trip - 2560x1440">2560x1440</a></li></ul><h2 id="spooky-campfire-stories-08-2023">Spooky Campfire Stories</h2><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Sweden.</p><figure class="break-out"><a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/aug-23-spooky-campfire-stories-full.png" title="Spooky Campfire Stories"><img alt="Spooky Campfire Stories" src="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2023/aug-23-spooky-campfire-stories-preview-opt.png" referrerpolicy="no-referrer"></a></figure><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/aug-23-spooky-campfire-stories-preview.png" title="Spooky Campfire Stories - Preview">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-640x480.png" title="Spooky Campfire Stories - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-800x480.png" title="Spooky Campfire Stories - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-800x600.png" title="Spooky Campfire Stories - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-1024x768.png" title="Spooky Campfire Stories - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-1024x1024.png" title="Spooky Campfire Stories - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-1152x864.png" title="Spooky Campfire Stories - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-1280x720.png" title="Spooky Campfire Stories - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-1280x800.png" title="Spooky Campfire Stories - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-1280x960.png" title="Spooky Campfire Stories - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-1280x1024.png" title="Spooky Campfire Stories - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-1366x768.png" title="Spooky Campfire Stories - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-1400x1050.png" title="Spooky Campfire Stories - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-1440x900.png" title="Spooky Campfire Stories - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-1600x1200.png" title="Spooky Campfire Stories - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-1680x1050.png" title="Spooky Campfire Stories - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-1680x1200.png" title="Spooky Campfire Stories - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-1920x1080.png" title="Spooky Campfire Stories - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-1920x1200.png" title="Spooky Campfire Stories - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-1920x1440.png" title="Spooky Campfire Stories - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-2560x1440.png" title="Spooky Campfire Stories - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-3840x2160.png" title="Spooky Campfire Stories - 3840x2160">3840x2160</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-640x480.png" title="Spooky Campfire Stories - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-800x480.png" title="Spooky Campfire Stories - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-800x600.png" title="Spooky Campfire Stories - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1024x768.png" title="Spooky Campfire Stories - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1024x1024.png" title="Spooky Campfire Stories - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1152x864.png" title="Spooky Campfire Stories - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1280x720.png" title="Spooky Campfire Stories - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1280x800.png" title="Spooky Campfire Stories - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1280x960.png" title="Spooky Campfire Stories - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1280x1024.png" title="Spooky Campfire Stories - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1366x768.png" title="Spooky Campfire Stories - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1400x1050.png" title="Spooky Campfire Stories - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1440x900.png" title="Spooky Campfire Stories - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1600x1200.png" title="Spooky Campfire Stories - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1680x1050.png" title="Spooky Campfire Stories - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1680x1200.png" title="Spooky Campfire Stories - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1920x1080.png" title="Spooky Campfire Stories - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1920x1200.png" title="Spooky Campfire Stories - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1920x1440.png" title="Spooky Campfire Stories - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-2560x1440.png" title="Spooky Campfire Stories - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-3840x2160.png" title="Spooky Campfire Stories - 3840x2160">3840x2160</a></li></ul><h2 id="party-night-under-the-stars-08-2023">Party Night Under The Stars</h2><p>“August… it’s time for a party and summer vacation — sea, moon, stars, music… and magical vibrant colors.” — Designed by <a href="https://teodoravasileva.net/">Teodora Vasileva</a> from Bulgaria.</p><figure class="break-out"><a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/aug-23-party-night-under-the-stars-full.png" title="Party Night Under The Stars"><img alt="Party Night Under The Stars" src="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2023/aug-23-party-night-under-the-stars-preview-opt.png" referrerpolicy="no-referrer"></a></figure><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/aug-23-party-night-under-the-stars-preview.png" title="Party Night Under The Stars - Preview">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/cal/aug-23-party-night-under-the-stars-cal-640x480.jpg" title="Party Night Under The Stars - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/cal/aug-23-party-night-under-the-stars-cal-800x480.jpg" title="Party Night Under The Stars - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/cal/aug-23-party-night-under-the-stars-cal-800x600.jpg" title="Party Night Under The Stars - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/cal/aug-23-party-night-under-the-stars-cal-1024x768.jpg" title="Party Night Under The Stars - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/cal/aug-23-party-night-under-the-stars-cal-1280x720.jpg" title="Party Night Under The Stars - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/cal/aug-23-party-night-under-the-stars-cal-1280x960.jpg" title="Party Night Under The Stars - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/cal/aug-23-party-night-under-the-stars-cal-1280x1024.jpg" title="Party Night Under The Stars - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/cal/aug-23-party-night-under-the-stars-cal-1400x1050.jpg" title="Party Night Under The Stars - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/cal/aug-23-party-night-under-the-stars-cal-1680x1050.jpg" title="Party Night Under The Stars - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/cal/aug-23-party-night-under-the-stars-cal-1680x1200.jpg" title="Party Night Under The Stars - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/cal/aug-23-party-night-under-the-stars-cal-1920x1080.jpg" title="Party Night Under The Stars - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/cal/aug-23-party-night-under-the-stars-cal-1920x1200.jpg" title="Party Night Under The Stars - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/cal/aug-23-party-night-under-the-stars-cal-1920x1440.jpg" title="Party Night Under The Stars - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/cal/aug-23-party-night-under-the-stars-cal-2560x1440.jpg" title="Party Night Under The Stars - 2560x1440">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-640x480.jpg" title="Party Night Under The Stars - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-800x480.jpg" title="Party Night Under The Stars - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-800x600.jpg" title="Party Night Under The Stars - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-1024x768.jpg" title="Party Night Under The Stars - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-1280x720.jpg" title="Party Night Under The Stars - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-1280x960.jpg" title="Party Night Under The Stars - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-1280x1024.jpg" title="Party Night Under The Stars - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-1400x1050.jpg" title="Party Night Under The Stars - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-1680x1050.jpg" title="Party Night Under The Stars - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-1680x1200.jpg" title="Party Night Under The Stars - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-1920x1080.jpg" title="Party Night Under The Stars - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-1920x1200.jpg" title="Party Night Under The Stars - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-1920x1440.jpg" title="Party Night Under The Stars - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-2560x1440.jpg" title="Party Night Under The Stars - 2560x1440">2560x1440</a></li></ul><h2 id="japanese-fashion-week-08-2023">Japanese Fashion Week</h2><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Sweden.</p><figure class="break-out"><a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/aug-23-japanese-fashion-week-full.png" title="Japanese Fashion Week"><img alt="Japanese Fashion Week" src="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2023/aug-23-japanese-fashion-week-preview-opt.png" referrerpolicy="no-referrer"></a></figure><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/aug-23-japanese-fashion-week-preview.png" title="Japanese Fashion Week - Preview">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-640x480.png" title="Japanese Fashion Week - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-800x480.png" title="Japanese Fashion Week - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-800x600.png" title="Japanese Fashion Week - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-1024x768.png" title="Japanese Fashion Week - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-1024x1024.png" title="Japanese Fashion Week - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-1152x864.png" title="Japanese Fashion Week - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-1280x720.png" title="Japanese Fashion Week - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-1280x800.png" title="Japanese Fashion Week - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-1280x960.png" title="Japanese Fashion Week - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-1280x1024.png" title="Japanese Fashion Week - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-1366x768.png" title="Japanese Fashion Week - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-1400x1050.png" title="Japanese Fashion Week - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-1440x900.png" title="Japanese Fashion Week - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-1600x1200.png" title="Japanese Fashion Week - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-1680x1050.png" title="Japanese Fashion Week - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-1680x1200.png" title="Japanese Fashion Week - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-1920x1080.png" title="Japanese Fashion Week - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-1920x1200.png" title="Japanese Fashion Week - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-1920x1440.png" title="Japanese Fashion Week - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-2560x1440.png" title="Japanese Fashion Week - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-3840x2160.png" title="Japanese Fashion Week - 3840x2160">3840x2160</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-640x480.png" title="Japanese Fashion Week - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-800x480.png" title="Japanese Fashion Week - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-800x600.png" title="Japanese Fashion Week - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-1024x768.png" title="Japanese Fashion Week - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-1024x1024.png" title="Japanese Fashion Week - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-1152x864.png" title="Japanese Fashion Week - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-1280x720.png" title="Japanese Fashion Week - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-1280x800.png" title="Japanese Fashion Week - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-1280x960.png" title="Japanese Fashion Week - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-1280x1024.png" title="Japanese Fashion Week - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-1366x768.png" title="Japanese Fashion Week - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-1400x1050.png" title="Japanese Fashion Week - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-1440x900.png" title="Japanese Fashion Week - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-1600x1200.png" title="Japanese Fashion Week - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-1680x1050.png" title="Japanese Fashion Week - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-1680x1200.png" title="Japanese Fashion Week - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-1920x1080.png" title="Japanese Fashion Week - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-1920x1200.png" title="Japanese Fashion Week - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-1920x1440.png" title="Japanese Fashion Week - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-2560x1440.png" title="Japanese Fashion Week - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-3840x2160.png" title="Japanese Fashion Week - 3840x2160">3840x2160</a></li></ul><h2 id="train-ride-08-2023">Train Ride</h2><p>“We got on a plane and went to the other part of the world to Australia. In this case, we got to Melbourne and we are ready to go to Flinders Street Station to catch a train and move around this wonderful country.” — Designed by <a href="https://www.silocreativo.com/en">Veronica Valenzuela</a> from Spain.</p><figure class="break-out"><a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/aug-23-train-ride-full.png" title="Train Ride"><img alt="Train Ride" src="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2023/aug-23-train-ride-preview-opt.png" referrerpolicy="no-referrer"></a></figure><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/aug-23-train-ride-preview.png" title="Train Ride - Preview">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/cal/aug-23-train-ride-cal-640x480.png" title="Train Ride - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/cal/aug-23-train-ride-cal-800x480.png" title="Train Ride - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/cal/aug-23-train-ride-cal-1024x768.png" title="Train Ride - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/cal/aug-23-train-ride-cal-1280x720.png" title="Train Ride - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/cal/aug-23-train-ride-cal-1280x800.png" title="Train Ride - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/cal/aug-23-train-ride-cal-1440x900.png" title="Train Ride - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/cal/aug-23-train-ride-cal-1600x1200.png" title="Train Ride - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/cal/aug-23-train-ride-cal-1920x1080.png" title="Train Ride - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/cal/aug-23-train-ride-cal-1920x1440.png" title="Train Ride - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/cal/aug-23-train-ride-cal-2560x1440.png" title="Train Ride - 2560x1440">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/nocal/aug-23-train-ride-nocal-640x480.png" title="Train Ride - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/nocal/aug-23-train-ride-nocal-800x480.png" title="Train Ride - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/nocal/aug-23-train-ride-nocal-1024x768.png" title="Train Ride - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/nocal/aug-23-train-ride-nocal-1280x720.png" title="Train Ride - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/nocal/aug-23-train-ride-nocal-1280x800.png" title="Train Ride - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/nocal/aug-23-train-ride-nocal-1440x900.png" title="Train Ride - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/nocal/aug-23-train-ride-nocal-1600x1200.png" title="Train Ride - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/nocal/aug-23-train-ride-nocal-1920x1080.png" title="Train Ride - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/nocal/aug-23-train-ride-nocal-1920x1440.png" title="Train Ride - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/nocal/aug-23-train-ride-nocal-2560x1440.png" title="Train Ride - 2560x1440">2560x1440</a></li></ul><h2 id="proud-08-2023">Proud</h2><p>“Chandrayaan-3 is the third and most recent lunar Indian Space Research exploration mission under the Chandrayaan programme. It consists of a lander named Vikram and a rover named Pragyan similar to Chandrayaan-2, but does not have an orbiter. Its propulsion module behaves like a communication relay satellite.” — Designed by <a href="https://design-studio.io/">Bhabna Basak</a> from India.</p><figure class="break-out"><a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/aug-23-proud-full.png" title="Proud"><img alt="Proud" src="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2023/aug-23-proud-preview-opt.png" referrerpolicy="no-referrer"></a></figure><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/aug-23-proud-preview.png" title="Proud - Preview">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/cal/aug-23-proud-cal-1440x900.jpg" title="Proud - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/cal/aug-23-proud-cal-1600x1200.jpg" title="Proud - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/cal/aug-23-proud-cal-1680x1050.jpg" title="Proud - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/cal/aug-23-proud-cal-1680x1200.jpg" title="Proud - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/cal/aug-23-proud-cal-1920x1080.jpg" title="Proud - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/cal/aug-23-proud-cal-1920x1200.jpg" title="Proud - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/cal/aug-23-proud-cal-1920x1440.jpg" title="Proud - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/cal/aug-23-proud-cal-2560x1440.jpg" title="Proud - 2560x1440">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/nocal/aug-23-proud-nocal-1440x900.jpg" title="Proud - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/nocal/aug-23-proud-nocal-1600x1200.jpg" title="Proud - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/nocal/aug-23-proud-nocal-1680x1050.jpg" title="Proud - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/nocal/aug-23-proud-nocal-1680x1200.jpg" title="Proud - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/nocal/aug-23-proud-nocal-1920x1080.jpg" title="Proud - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/nocal/aug-23-proud-nocal-1920x1200.jpg" title="Proud - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/nocal/aug-23-proud-nocal-1920x1440.jpg" title="Proud - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/nocal/aug-23-proud-nocal-2560x1440.jpg" title="Proud - 2560x1440">2560x1440</a></li></ul><h2 id="flowers-08-2023">Flowers</h2><p>Designed by <a href="https://www.freepik.com/author/sahra">Sahra Tamo</a> from Turkey.</p><figure class="break-out"><a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/aug-23-floral-illustration-full.png" title="Floral Illustration"><img alt="Floral Illustration" src="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2023/aug-23-floral-illustration-preview-opt.png" referrerpolicy="no-referrer"></a></figure><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/aug-23-floral-illustration-preview.png" title="Floral Illustration - Preview">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-320x480.jpg" title="Floral Illustration - 320x480">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-640x480.jpg" title="Floral Illustration - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-800x480.jpg" title="Floral Illustration - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-800x600.jpg" title="Floral Illustration - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-1024x768.jpg" title="Floral Illustration - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-1024x1024.jpg" title="Floral Illustration - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-1152x864.jpg" title="Floral Illustration - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-1280x720.jpg" title="Floral Illustration - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-1280x800.jpg" title="Floral Illustration - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-1280x960.jpg" title="Floral Illustration - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-1280x1024.jpg" title="Floral Illustration - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-1400x1050.jpg" title="Floral Illustration - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-1600x1200.jpg" title="Floral Illustration - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-1680x1050.jpg" title="Floral Illustration - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-1680x1200.jpg" title="Floral Illustration - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-1920x1080.jpg" title="Floral Illustration - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-1920x1200.jpg" title="Floral Illustration - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-1920x1440.jpg" title="Floral Illustration - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-2560x1440.jpg" title="Floral Illustration - 2560x1440">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-320x480.jpg" title="Floral Illustration - 320x480">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-640x480.jpg" title="Floral Illustration - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-800x480.jpg" title="Floral Illustration - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-800x600.jpg" title="Floral Illustration - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-1024x768.jpg" title="Floral Illustration - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-1024x1024.jpg" title="Floral Illustration - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-1152x864.jpg" title="Floral Illustration - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-1280x720.jpg" title="Floral Illustration - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-1280x800.jpg" title="Floral Illustration - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-1280x960.jpg" title="Floral Illustration - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-1280x1024.jpg" title="Floral Illustration - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-1400x1050.jpg" title="Floral Illustration - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-1600x1200.jpg" title="Floral Illustration - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-1680x1050.jpg" title="Floral Illustration - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-1680x1200.jpg" title="Floral Illustration - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-1920x1080.jpg" title="Floral Illustration - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-1920x1200.jpg" title="Floral Illustration - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-1920x1440.jpg" title="Floral Illustration - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-2560x1440.jpg" title="Floral Illustration - 2560x1440">2560x1440</a></li></ul><h2>Oldies But Goodies</h2><p>Going for a swim, the smell of a summer field, or that sweet feeling of freedom when you’re on vacation — a lot of things have inspired the design community to create a wallpaper for August in the past few years. Here are some <strong>favorites from our wallpapers archives</strong>. Please note that these designs don’t come with a calendar.</p><p></p><h3 id="happiness-happens-in-august">Happiness Happens In August</h3><p>“Many people find August one of the happiest months of the year because of holidays. You can spend days sunbathing, swimming, birdwatching, listening to their joyful chirping, and indulging in sheer summer bliss. August 8th is also known as the Happiness Happens Day, so make it worthwhile.” — Designed by <a href="https://www.popwebdesign.net/index_eng.html">PopArt Studio</a> from Serbia.</p><figure class="break-out"><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c02105d1-3e31-49e7-b909-ddb84982b7e0/aug-17-happiness-happens-in-august-full.png" title="Happiness Happens In August"><img alt="Happiness Happens In August" src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9d979d10-f87f-4935-828a-de2ecd2de311/aug-17-happiness-happens-in-august-preview.png" referrerpolicy="no-referrer"></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9d979d10-f87f-4935-828a-de2ecd2de311/aug-17-happiness-happens-in-august-preview.png" title="Happiness Happens In August - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-320x480.jpg" title="Happiness Happens In August - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-640x480.jpg" title="Happiness Happens In August - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-800x480.jpg" title="Happiness Happens In August - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-800x600.jpg" title="Happiness Happens In August - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1024x768.jpg" title="Happiness Happens In August - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1024x1024.jpg" title="Happiness Happens In August - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1152x864.jpg" title="Happiness Happens In August - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1280x720.jpg" title="Happiness Happens In August - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1280x800.jpg" title="Happiness Happens In August - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1280x960.jpg" title="Happiness Happens In August - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1280x1024.jpg" title="Happiness Happens In August - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1366x768.jpg" title="Happiness Happens In August - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1400x1050.jpg" title="Happiness Happens In August - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1440x900.jpg" title="Happiness Happens In August - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1600x1200.jpg" title="Happiness Happens In August - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1680x1050.jpg" title="Happiness Happens In August - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1680x1200.jpg" title="Happiness Happens In August - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1920x1080.jpg" title="Happiness Happens In August - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1920x1200.jpg" title="Happiness Happens In August - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1920x1440.jpg" title="Happiness Happens In August - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-2560x1440.jpg" title="Happiness Happens In August - 2560x1440">2560x1440</a></li></ul><p></p><p></p><h3 id="swimming-in-the-summer">Swimming In The Summer</h3><p>“It’s the perfect evening and the water is so warm! Can you feel it? You move your legs just a little bit and you feel the water bubbles dancing around you! It’s just you in there, floating in the clean lake and small sparkly lights shining above you! It’s a wonderful feeling, isn’t it?” — Designed by <a href="https://ko-fi.com/creativepinky">Creative Pinky</a> from the Netherlands.</p><figure class="break-out"><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2023/aug-22-swimming-in-the-summer-full-opt.png" title="Swimming In The Summer"><img alt="Swimming In The Summer" src="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2023/aug-22-swimming-in-the-summer-preview-opt.png" referrerpolicy="no-referrer"></a></figure><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2023/aug-22-swimming-in-the-summer-preview-opt.png" title="Swimming In The Summer - Preview">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/swimming-in-the-summer/nocal/aug-22-swimming-in-the-summer-nocal-320x480.png" title="Swimming In The Summer - 320x480">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/swimming-in-the-summer/nocal/aug-22-swimming-in-the-summer-nocal-640x480.png" title="Swimming In The Summer - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/swimming-in-the-summer/nocal/aug-22-swimming-in-the-summer-nocal-800x480.png" title="Swimming In The Summer - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/swimming-in-the-summer/nocal/aug-22-swimming-in-the-summer-nocal-800x600.png" title="Swimming In The Summer - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/swimming-in-the-summer/nocal/aug-22-swimming-in-the-summer-nocal-1024x768.png" title="Swimming In The Summer - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/swimming-in-the-summer/nocal/aug-22-swimming-in-the-summer-nocal-1152x864.png" title="Swimming In The Summer - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/swimming-in-the-summer/nocal/aug-22-swimming-in-the-summer-nocal-1280x720.png" title="Swimming In The Summer - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug ... |
http://localhost:1200/smashingmagazine - Success ✔️<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"
>
<channel>
<title><![CDATA[Smashing Magazine Articles]]></title>
<link>https://www.smashingmagazine.com/articles</link>
<atom:link href="http://localhost:1200/smashingmagazine" rel="self" type="application/rss+xml" />
<description><![CDATA[Latest Articles on Smashingmagazine.com - Made with love by RSSHub(https://github.com/DIYgod/RSSHub)]]></description>
<generator>RSSHub</generator>
<webMaster>i@diygod.me (DIYgod)</webMaster>
<language>en-us</language>
<lastBuildDate>Thu, 10 Aug 2023 02:03:40 GMT</lastBuildDate>
<ttl>5</ttl>
<item>
<title><![CDATA[Using Friction As A Feature In Machine Learning Algorithms]]></title>
<description><![CDATA[<h1 id="main-heading" class="article-header--title">Using Friction As A Feature In Machine Learning Algorithms</h1><span id="article__start" class="summary__heading" aria-hidden="true"></span>Friction often has a negative connotation in user experience design, but it actually has many benefits. Its best-known use case is mitigating unintended consequences in high-risk scenarios, yet it has a new place in the age of artificial intelligence. Adding strategic friction to interfaces can lead to profound efficiency gains in machine learning algorithms. This makes learning to leverage it a priority for any applications hoping to remain competitive.<ul class="meta-box meta-box--article"><li class="meta-box--item meta-box--published">18 min read</li><li class="meta-box--item meta-box--tags"><a href="https://www.smashingmagazine.com/category/ai">AI</a>,
<a href="https://www.smashingmagazine.com/category/ux">UX</a>,
<a href="https://www.smashingmagazine.com/category/design">Design</a>,
<a href="https://www.smashingmagazine.com/category/machine-learning">Machine Learning</a></li><li class="meta-box--item meta-box--share">Share on <a rel="nofollow" href="https://twitter.com/intent/tweet?text=Using%20Friction%20As%20A%20Feature%20In%20Machine%20Learning%20Algorithms&url=https%3A%2F%2Fwww.smashingmagazine.com%2f2023%2f08%2ffriction-feature-machine-learning-algorithms%2f&via=smashingmag">Twitter</a>, <a rel="nofollow" href="https://data.smashing.services/ball?uri=//www.linkedin.com/shareArticle?url=https://www.smashingmagazine.com%2f2023%2f08%2ffriction-feature-machine-learning-algorithms%2f&title=Using%20Friction%20As%20A%20Feature%20In%20Machine%20Learning%20Algorithms">LinkedIn</a></li></ul><p>A common assumption in user experience design is less friction makes apps more delightful. But in practice, the happy path isn’t always the smoothest. The term “friction” in the digital sense usually refers to anything that makes experiences cumbersome. It’s an analogy to the physical resistance that occurs when objects interact. Digital friction comes in many forms, from frustrating flows to confusing copy. But plenty of scenarios actually benefit with a bit of resistance. Its killer feature is <strong>mitigating unintended consequences</strong>, such as an accidental <a href="https://www.theverge.com/2017/1/7/14200210/amazon-alexa-tech-news-anchor-order-dollhouse">Alexa shopping spree</a>.</p><p>You’ve likely already encountered intentional friction many times. Most apps leverage it for destructive actions, account security, and error handling, as recommended by experts from <a href="https://www.nngroup.com/videos/friction-flow-customer-journeys/">Norman Nielsen Group</a> to the magazine <a href="https://www.smashingmagazine.com/2018/01/friction-ux-design-tool/">you’re currently reading</a>.</p><p>Yet friction has found a new calling in the age of artificial intelligence. When implemented correctly, it can improve the efficiency of AI systems such as machine learning algorithms. These algorithms are often used to personalize experiences through predictive recommendations. Some applications incorporating these algorithms realize that adding a bit of friction to their interface can turn each user interaction into an opportunity to improve algorithmic quality.</p><p>While less friction makes an app smoother, a bit more may make it even smarter.</p><figure><a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/1-friction-present-examples.png"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="600" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/1-friction-present-examples.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/1-friction-present-examples.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/1-friction-present-examples.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/1-friction-present-examples.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/1-friction-present-examples.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/1-friction-present-examples.png" sizes="100vw" alt="Various examples of dialogs in popular apps that display before important actions are taken. They include headlines such as “abusive website ahead” or “notify 11 people across 3 time zones?” with additional information explaining the consequences of an action and a button that allows a user to confirm before proceeding" referrerpolicy="no-referrer"></a><figcaption class="op-vertical-bottom">Various examples of the friction in popular apps. (Sources: Discord, MacOS, MailChimp, Slack, Airbnb, GitHub, Lyft, and Venmo) (<a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/1-friction-present-examples.png">Large preview</a>)</figcaption></figure><h2 id="friction-as-a-feature">Friction As A Feature</h2><p>Before venturing down the AI rabbit hole, let’s explore some simple examples showcasing the basic benefits of friction in UX. These are a helpful foundation to build off as we ascend into more complex applications for machine learning algorithms. Regardless of your familiarity, this will ground the following lessons in first principles.</p><h3 id="preventing-unintended-consequences">Preventing Unintended Consequences</h3><p>A common use for friction is error prevention, the fifth entry in <a href="https://www.nngroup.com/articles/ten-usability-heuristics/">Jakob Nielsen’s list of usability heuristics</a>. In scenarios with the potential for high-cost errors, such as irreversible deletion, apps often request confirmation before executing requests. Confirmations often display in a modal, locking the rest of the screen to increase focus on copy explaining an action’s implications. This extra step provides some extra time to consider these ramifications.</p><blockquote>“By forcing us to slow down and think at this exact moment, we’re kept from making potentially disastrous decisions by accident.”<br><br>— Archana Madhavan in Amplitude’s “<a href="https://amplitude.com/blog/onboarding-ikea-effect-retention/">Onboarding With The IKEA Effect: How To Use UX Friction To Build Retention</a>”</blockquote><p>Sometimes more resistance is present when the consequences can be catastrophic. For instance, a confirmation may involve cognitive work such as typing “DELETE” to submit a deletion request. This level of resistance makes sense when considering the humbling fact of life from Steve Krug’s classic UX book <a href="https://sensible.com/dont-make-me-think/"><em>Don’t Make Me Think</em></a>, which states, “We don’t read pages. We scan them.” This makes it easy to imagine how a streamlined design can make it too easy to overlook the consequences of a click.</p><figure><a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/2-friction-delete-modal.png"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="600" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/2-friction-delete-modal.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/2-friction-delete-modal.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/2-friction-delete-modal.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/2-friction-delete-modal.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/2-friction-delete-modal.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/2-friction-delete-modal.png" sizes="100vw" alt="A generic delete modal example that requires a user to type the phrase “delete account” into an input field to confirm their deletion request" referrerpolicy="no-referrer"></a><figcaption class="op-vertical-bottom">A delete modal that requires cognitive effort to minimize accidents. (Image source: <a href="https://uxpsychology.substack.com/p/how-to-design-better-destructive">UX Psychology</a>) (<a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/2-friction-delete-modal.png">Large preview</a>)</figcaption></figure><p>While these tactics may look <a href="https://www.designernews.co/stories/84443-redditors-design-worst-volume-sliders-possible">comically cumbersome</a>, they mitigate devastating downsides. This use of friction is like a train’s brakes screeching to a halt right in time to avoid a collision — everyone breathes a sigh of relief, crisis averted. This also outlines the basic framework for understanding when to add friction. It boils down to a <strong>cost-benefit analysis</strong>: do the rewards of streamlining outweigh the risk? If not, slow it down. Now let’s move on from a black & white example to venture into a grayer area.</p><h3 id="nudging-toward-healthy-behavior">Nudging Toward Healthy Behavior</h3><p>Some problems aren’t classifiable as errors but still aren’t in anyone’s best interest. Trying to solve them becomes wicked because there is no right or wrong solution. Yet that doesn’t make failing to address them any less of an existential risk. Consider social media’s medley of knee-jerk, tribalistic behavior. It has led many to question the value of these apps altogether, which isn’t good for business, or society at large. In an attempt to encourage more thoughtful discourse, these platforms turn to friction.</p><figure><a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/3-friction-twitter-nudge.png"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="600" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/3-friction-twitter-nudge.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/3-friction-twitter-nudge.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/3-friction-twitter-nudge.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/3-friction-twitter-nudge.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/3-friction-twitter-nudge.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/3-friction-twitter-nudge.png" sizes="100vw" alt="A prompt displays when a user attempts to retweet an article. The headline reads, “Headlines don’t tell the full story,” and the subheadline reads, “You can read the article on Twitter before Retweeting”. Available actions include an article card that can be clicked to read the article as well as buttons to “Retweet” & “Quote Tweet”" referrerpolicy="no-referrer"></a><figcaption class="op-vertical-bottom">A Twitter prompt nudges users to read an article before retweeting it. (Image source: <a href="https://twitter.com/TwitterComms/status/1309178718456221696">Twitter</a>) (<a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/3-friction-twitter-nudge.png">Large preview</a>)</figcaption></figure><p>Twitter explored <a href="https://www.theverge.com/2020/9/25/21455635/twitter-read-before-you-tweet-article-prompt-rolling-out-globally-soon">adding an extra step</a> that asks people to read articles before retweeting them. This nudge aims to craft a more trustworthy experience for everyone by slowing the spread of misinformation. According to their reporting, people shown the prompt opened articles 40% more often, and some decided not to retweet it after all. They built on this success by showing a warning before users post <a href="https://twitter.com/TwitterSupport/status/1257717113705414658">messages which include harmful language</a>.</p><p>Instagram also implemented a similar feature in its fight against online bullying. Adam Mosseri, the Head of Instagram, <a href="https://about.instagram.com/blog/announcements/instagrams-commitment-to-lead-fight-against-online-bullying">published a blog post</a> stating that this “intervention gives people a chance to reflect.” Although specific data isn’t provided, they suggest it had <a href="https://www.theverge.com/2019/12/16/21024051/instagram-captions-potentially-offensive-ai-moderation-bullying-edit">promising results</a> in cultivating a more humane experience for their communities.</p><p>These examples show how faster is not always better. Sometimes we need restraint from saying things we don’t mean or sharing things that we don’t understand. Friction helps algorithms in a similar manner. Sometimes they also need more information about us so they don’t recommend things we won’t appreciate.</p><h3 id="understanding-preferences-objectives">Understanding Preferences & Objectives</h3><p>Let’s shift focus to AI with a simple example of how friction plays a role in machine learning algorithms. You’ve probably signed up for an app that begins by asking you a bunch of questions about your interests. Behind the scenes, an algorithm uses these answers to personalize your experience. These onboarding flows have become so common over the past decade that you may have forgotten a time before apps were smart enough to get to know you.</p><figure><a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/4-friction-twitter-onboarding.png"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="600" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/4-friction-twitter-onboarding.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/4-friction-twitter-onboarding.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/4-friction-twitter-onboarding.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/4-friction-twitter-onboarding.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/4-friction-twitter-onboarding.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/4-friction-twitter-onboarding.png" sizes="100vw" alt="A screen from Twitter’s 2014 onboarding flow with a headline that reads “What are you interested in?” & a subheadline that reads “Choose one or more of the options below, and we’ll suggest some good stuff for you”. Below this text is a list of checkboxes that correspond to categories of content featured on Twitter" referrerpolicy="no-referrer"></a><figcaption class="op-vertical-bottom">Twitter’s onboarding flow in 2014. (Image source: <a href="https://www.useronboard.com/how-twitter-onboards-new-users/?slide=36">useronboard.com</a>) (<a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/4-friction-twitter-onboarding.png">Large preview</a>)</figcaption></figure><p>You may have never even questioned why you must go through a preference capture flow before getting to explore content. The value is obvious because no one wants the quickest path to something irrelevant. Many apps are simply in the business of making relevant connections, and these personalization tactics have been one of the best ways to do so. A <a href="https://www.mckinsey.com/industries/retail/our-insights/how-retailers-can-keep-up-with-consumers">McKinsey report</a> illuminates this further by reporting that “35 percent of what consumers purchase on Amazon and 75 percent of what they watch on Netflix come from product recommendations based on such algorithms.”</p><blockquote>“The top two reasons that customers churn are 1) they don’t understand your product, and 2) they don’t obtain any value from it. Customer onboarding can solve both of these issues.”<br><br>— Christina Perricone in HubSpot’s “<a href="https://blog.hubspot.com/service/customer-onboarding">The Ultimate Guide to Customer Onboarding</a>”</blockquote><p>Perhaps these onboarding flows are so familiar that they don’t feel like friction. They may seem like necessary steps to unlock an app’s value. However, that perspective quickly changes for anyone designing one of these flows. The inherent tension lies in attempting to balance the diametrically opposite needs of two parties. On the one hand, an algorithm provides better output relative to its input (although asymptotes exist). <strong>Success is a function of maximizing data collection touchpoints</strong>, but this tends to result in more steps with more complex questions.</p><p>In short, the quicker an app makes a recommendation, the more likely it will be wrong. On the other hand, an extremely long onboarding flow is unlikely to make an amazing first impression on new users. I had the pleasure of walking this tightrope when designing the onboarding flow at Headliner. Each new step we added always felt like it would be the straw that broke the camel’s back. We nervously monitored our activation reports for signs we went too far but surprisingly saw no meaningful dropoff. Yet, even a slight decrease would easily be worth the improved retention that personalization yielded.</p><figure class="video-embed-container break-out"><div class="video-embed-container--wrapper"><lite-vimeo videoid="851570073" videotitle="Headliner’s new user onboarding flow. (Source: <a href='https://www.headliner.app'>headliner.app</a>)"></lite-vimeo></div><figcaption>Headliner’s new user onboarding flow. (Source: <a href="https://www.headliner.app/">headliner.app</a>)</figcaption></figure><p>The Product Design Manager at Stitch Fix, Deanna Alcorn, documented their process of <a href="https://multithreaded.stitchfix.com/blog/2016/11/30/us-design-capture-style-preferences-during-sign-up/">working through this</a>. The tension is clearly illustrated when she asks the question, “How do we get customers to evaluate as many images as possible while keeping it fun and fast?”. While their case study is a great reference, the right solution will be different for every app. Your onboarding flow should follow the needs of your algorithm while balancing the needs of your users.</p><p>With that said, there is one app that is legendary for its rapid personalization, and surprisingly, it doesn’t have any onboarding flow at all.</p><h2 id="giving-an-algorithm-glasses">Giving An Algorithm Glasses</h2><p>TikTok’s personalization is so good that the New York Times compares it to <a href="https://www.nytimes.com/2021/12/05/business/media/tiktok-algorithm.html">mind reading</a>. But after signing up for their service, you can just start browsing! In stark contrast, Instagram has multiple onboarding steps without the same algorithmic reputation. How can TikTok have such an advantage if it doesn’t even ask you what you want to see?</p><figure><a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/6-friction-insta-onboarding.png"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="600" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/6-friction-insta-onboarding.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/6-friction-insta-onboarding.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/6-friction-insta-onboarding.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/6-friction-insta-onboarding.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/6-friction-insta-onboarding.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/6-friction-insta-onboarding.png" sizes="100vw" alt=" A sequence of screens sampled from Instagram’s onboarding flow. The first screen has a headline that reads, “Next, you’ll be able to sync your contacts to find your friends,” with a “continue” button and a smaller “skip” button. The second screen reads “Get Facebook suggestions” with a “continue” button and a smaller “skip” button. The third screen reads “Discover people” above a list of popular users that can be followed" referrerpolicy="no-referrer"></a><figcaption class="op-vertical-bottom">Instagram’s numerous onboarding screens collect information to improve their algorithmic recommendations. (Image source: <a href="https://instagram.com/">Instagram</a>) (<a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/6-friction-insta-onboarding.png">Large preview</a>)</figcaption></figure><p>This is thanks to some clever interface innovations. TikTok’s design turns user engagement into clear signals they use to tweak their algorithms. Content recommendation quality is a direct function of this, which some refer to as an <a href="https://www.eugenewei.com/blog/2020/9/18/seeing-like-an-algorithm">algorithm’s vision</a>.</p><blockquote class="pull-quote"><p><a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aOptimizing%20an%20app%e2%80%99s%20key%20interactions%20to%20understand%20implicit%20signals%20makes%20an%20explicit%20means%20of%20capturing%20preferences%20unnecessary.%0a&url=https://smashingmagazine.com%2f2023%2f08%2ffriction-feature-machine-learning-algorithms%2f">Optimizing an app’s key interactions to understand implicit signals makes an explicit means of capturing preferences unnecessary.</a></p><div class="pull-quote__quotation"><div class="pull-quote__bg"><span class="pull-quote__symbol">“</span></div></div></blockquote><h3 id="engagement-signals">Engagement Signals</h3><p>Every interaction is an opportunity to improve understanding through bidirectional feedback. An interface should provide system feedback to the user engaging with it while also reporting to the system how performance meets user expectations. Everything from button taps to the absence of action can become a signal. Interfaces that successfully incorporate this are referred to as <a href="https://medium.com/user-experience-design-1/designing-algorithm-friendly-interfaces-84da3ed076a9">algorithm-friendly</a>.</p><figure><a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/7-friction-signals.jpeg"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="600" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/7-friction-signals.jpeg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/7-friction-signals.jpeg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/7-friction-signals.jpeg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/7-friction-signals.jpeg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/7-friction-signals.jpeg 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/7-friction-signals.jpeg" sizes="100vw" alt="A diagram illustrated by Maximillian Piras displays a feedback loop: “user engagement” → “signals” → “data collection” → “model training” → “content filtering” → “personalization” → back to “user engagement” in a continuous loop" referrerpolicy="no-referrer"></a><figcaption class="op-vertical-bottom">A feedback loop in an algorithm-friendly interface. (Image source: <a href="https://www.maximillian.nyc/">Maximillian Piras</a>) (<a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/7-friction-signals.jpeg">Large preview</a>)</figcaption></figure><p>A study by <a href="https://machinelearning.apple.com/research/leveraging-user-engagement-signals-for-entity-labeling-in-virtual-assistant">Apple’s Machine Learning Research Department</a> details their success in leveraging engagement signals, which they believe “provide strong indications of a user’s true intent,” to efficiently train a machine learning model through a process called <a href="https://en.wikipedia.org/wiki/Reinforcement_learning_from_human_feedback">Reinforcement Learning from Human Feedback</a>. Their results documented “significant accuracy gains in a production deep learning system,” meaning that an interface designed well enough to analyze naturally occurring user behavior is all that is needed to create personalization that feels like mind reading.</p><p>Instagram actually <a href="https://www.instagram.com/p/Cs6gh_NgPF0/">employs this strategy</a> as well, although its approach is a bit less cohesive since they seem to be in a perpetual <a href="https://www.inc.com/jason-aten/instagram-is-walking-back-its-controversial-changes-its-an-important-reminder-that-failure-isnt-your-enemy.html">state of transition</a>.</p><h3 id="tiktokification">TikTokification</h3><p>But what exactly makes an interface algorithm-friendly? In TikTok’s case, it was the design decision to only show one video at a time. That’s right, friction! By decreasing the information density in the viewport at any given time, they increased their understanding of a user’s focus. This localizes interactions (or lack thereof) to specific content as quality measures.</p><p>Gustav Söderström, the Co-President, CPO & CTO at Spotify <a href="https://www.theverge.com/23638082/spotify-redesign-gustav-soderstrom-tiktok-stream-podcasts-music-discovery">has referred</a> to this approach as “giving the algorithm glasses.” Compare this to the medley of distractions in other feeds, and it’s easy to imagine which one is better at collecting data.</p><blockquote class="pull-quote"><p><a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aUsing%20friction%20as%20a%20tool%20allows%20designers%20to%20craft%20an%20interface%20that%20separates%20engagement%20signals%20from%20noise.%0a&url=https://smashingmagazine.com%2f2023%2f08%2ffriction-feature-machine-learning-algorithms%2f">Using friction as a tool allows designers to craft an interface that separates engagement signals from noise.</a></p><div class="pull-quote__quotation"><div class="pull-quote__bg"><span class="pull-quote__symbol">“</span></div></div></blockquote><figure><a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/8-friction-tiktok.gif"><img src="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/8-friction-tiktok.gif" width="800" height="600" alt="An animation by Maximillian Piras displays an “algorithm vision” comparison of TikTok’s feed with Instagram’s. TikTok provides cleaner signals since only one piece of content remains in the viewport at a time." referrerpolicy="no-referrer"></a><figcaption>Algorithmic visibility comparison of TikTok & Instagram’s home feeds. (Source: <a href="https://www.maximillian.nyc/">Maximillian Piras</a>) (<a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/8-friction-tiktok.gif">Large preview</a>)</figcaption></figure><p>As we return to my aforementioned framework for evaluating when to add friction, we can understand how it makes sense in this scenario. While each interaction may take slightly longer, relevant content can be found quicker. The trade-off makes sense since relevance sits atop a user’s hierarchy of needs.</p><p>Additionally, if you were to measure friction over a longer time horizon, you likely would find an <strong>experience with better personalization feels more frictionless</strong>. This is because the efficiency in helping users find what they’re looking for would consistently compound (although, again, asymptotes exist). So each subsequent visit theoretically requires less work on the user’s part, which makes the alternate approach look like the cumbersome one.</p><blockquote>“The secret of why some of these products are so good at recommendations is not actually that they have better algorithms. It’s the same algorithms with a more efficient user interface.”<br><br>— Gustav Söderström in The Verge’s “<a href="https://www.theverge.com/23638082/spotify-redesign-gustav-soderstrom-tiktok-stream-podcasts-music-discovery">Why Spotify wants to look like TikTok</a>”</blockquote><p>While TikTok popularized this interface, anybody who was single in the last decade may notice a similarity to dating apps. Using directional gestures as engagement signals dates back to the swipeable card paradigm Tinder <a href="https://www.wired.com/2016/09/history-of-tinder-right-swipe/">introduced in 2012</a>. They, too, limited the viewport to one result at a time and used actions to inform subsequent recommendations. But TikTok took it mainstream since not everyone needs a dating app, and those who do will churn once they’ve met someone.</p><p>The results of using this paradigm in everyday entertainment led many platforms to copy it in hopes of the same algorithmic gains. The latest to embark on this journey is Spotify, much to <a href="https://mashable.com/article/spotify-tiktok-video-feed-internet-reactions">the chagrin of their users</a>. In fact, this decision even landed it on Mashable’s list of <a href="https://mashable.com/article/worst-app-updates-2023">worst app updates in 2023</a>. But Söderström says they don’t have a choice, and he believes in the long run, the signal clarity will make up for any interim backlash because of how much quicker it can learn user preferences. Critics fail to realize how important these changes are for Spotify’s future.</p><blockquote class="pull-quote"><p><a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aIn%20the%20machine%20learning%20age,%20apps%20with%20inefficient%20interfaces%20for%20signal%20analysis%20risk%20becoming%20uncompetitive.%0a&url=https://smashingmagazine.com%2f2023%2f08%2ffriction-feature-machine-learning-algorithms%2f">In the machine learning age, apps with inefficient interfaces for signal analysis risk becoming uncompetitive.</a></p><div class="pull-quote__quotation"><div class="pull-quote__bg"><span class="pull-quote__symbol">“</span></div></div></blockquote><figure><a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/9-friction-spotify.gif"><img src="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/9-friction-spotify.gif" width="800" height="600" alt="An animation by Maximillian Piras displays an “algorithm vision” comparison of Spotify’s old & new home feed designs within their mobile app. Their new home feed provides cleaner signals since only one piece of content remains in the viewport at a time." referrerpolicy="no-referrer"></a><figcaption>Algorithmic visibility comparison of Spotify’s old & new home feeds. (Source: <a href="https://www.maximillian.nyc/">Maximillian Piras</a>) (<a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/9-friction-spotify.gif">Large preview</a>)</figcaption></figure><h3 id="making-lemonade">Making Lemonade</h3><p>The reason this approach is so powerful is due to the compounding nature of good data. Optimizing signals for any individual user creates a data network effect that benefits everyone else. It even turns negatives into positives! An individual bad experience can mitigate others from encountering the same, making the system <a href="https://en.wikipedia.org/wiki/Antifragility">antifragile</a>.</p><p>This approach dates back to 2003 with the introduction of Amazon’s <a href="https://www.cs.umd.edu/~samir/498/Amazon-Recommendations.pdf">item-to-item collaborative filtering</a>. You may know it as “customers who viewed this also viewed this.”</p><figure><a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/10-friction-itemtoitem-collaborative-filtering.jpg"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="600" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/10-friction-itemtoitem-collaborative-filtering.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/10-friction-itemtoitem-collaborative-filtering.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/10-friction-itemtoitem-collaborative-filtering.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/10-friction-itemtoitem-collaborative-filtering.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/10-friction-itemtoitem-collaborative-filtering.jpg 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/10-friction-itemtoitem-collaborative-filtering.jpg" sizes="100vw" alt="An illustration by Maximillian Piras displays an icon of a user that is connected to three icons representing media files. Each of these media files is then connected to many more media files, which then are recursively linked to many others. This linking of media files continues until the icons are cropped by the edge of the canvas" referrerpolicy="no-referrer"></a><figcaption class="op-vertical-bottom">Item-to-item collaborative filtering. (Image source: <a href="https://www.maximillian.nyc/">Maximillian Piras</a>) (<a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/10-friction-itemtoitem-collaborative-filtering.jpg">Large preview</a>)</figcaption></figure><p>This type of filtering produces high-quality recommendations with limited user data. It does so by building relationships between items to proxy user preferences. With only two to three data points, an algorithm can draw connections across the entire dataset. It effectively piggybacks off previous patterns that are <em>similar enough</em>.</p><p>This means an app like TikTok only needs a few swipes before it can make high-probability assumptions about your preferences. That’s why friction is so useful in algorithm-friendly interfaces. If the initial interactions send clean signals, then an algorithm can graph a user’s interests almost immediately.</p><h2 id="friction-in-the-future">Friction In The Future</h2><p>We began in the past by reviewing how friction found its way into UX toolkits through error prevention and healthy nudges. Then we moved on to its ability to help algorithms learn user preferences and objectives. While explicit onboarding flows are still in vogue, TikTok is popularizing an interface that makes them unnecessary by <strong>using implicit engagement signals leading to significant algorithmic gains</strong>. Yet the machine learning age is just beginning, and friction is only accelerating its evolution.</p><h3 id="inverting-the-pareto-principle">Inverting The Pareto Principle</h3><p>We’ve focused on algorithms that recommend content, but more diverse uses of personalization may emerge due to the newfound capabilities of Large Language Models. These models unlock the ability to manipulate <a href="https://www.spiceworks.com/tech/data-management/guest-article/ai-analyze-dark-data/">unstructured data at scale</a>. This allows engagement patterns of greater complexity to be analyzed and productized. The result is algorithms can recommend much more than media and metadata.</p><p>Perhaps they can craft <strong>completely personalized feature sets</strong> based on our preferences and objectives. Imagine selecting effects in Photoshop and seeing suggestions such as “Creators who used this effect also used this one.” These capabilities could increase the usage of buried features that only power users tend to find.</p><p>Microsoft is exploring this by <a href="https://www.youtube.com/watch?v=Bf-dbS9CcRU&t=778s">adding Copilot to its products</a>. They claim the “average person uses less than 10% of what PowerPoint can do,” but AI will unlock all that latent value.</p><figure><a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/11-friction-microsoft-copilot-llms.gif"><img src="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/11-friction-microsoft-copilot-llms.gif" width="800" height="450" alt="A collage of various Microsoft interface elements that illustrate how users can type their goals into a chat window so generative AI can help them execute tasks. A block of AI-generated text is displayed & a cursor parses values in a dropdown labeled “Adjust”. Each value allows the user to manipulate the generated text based on parameters such as “Text length”." referrerpolicy="no-referrer"></a><figcaption>Microsoft Copilot uses LLMs in an attempt to unlock the 90% of features that most users don’t know exist. (Source: <a href="https://dribbble.com/shots/21097757-Microsoft-Copilot-UX-Design">Microsoft Design</a>) (<a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/11-friction-microsoft-copilot-llms.gif">Large preview</a>)</figcaption></figure><p>Using LLMs to create feature recommendation engines is a fascinating idea. It would allow developers to stop relying on the Pareto Principle for prioritization. Especially because Joel Spolsky claims the <sup>80</sup>⁄<sub>20</sub> rule is actually a myth.</p><blockquote>“A lot of software developers are seduced by the old “80/20” rule. It seems to make a lot of sense: 80% of the people use 20% of the features… Unfortunately, it’s never the same 20%. Everybody uses a different set of features.”<br><br>— Joel Spolsky in “<a href="https://www.joelonsoftware.com/2001/03/23/strategy-letter-iv-bloatware-and-the-8020-myth/">Strategy Letter IV: Bloatware and the 80/20 Myth</a>”</blockquote><p>It would be nice if irreducible simplicity in interface design were only a power law away, but feature creep is hard to combat when different people find value in different options. It’s unrealistic to believe that there is some golden 20% of features driving 80% of value. If there was, then why isn’t the Pareto Principle ever applied to content?</p><p>I can’t imagine a team at YouTube suggesting that removing 80% of videos would improve the service. Instead, it’s viewed as a routing problem: find the right piece of content for the right person. If machine learning algorithms can recommend features, I hope the value of friction goes without saying at this point. The efficiency gains unlocked by algorithm-friendly interfaces absolutely apply.</p><h3 id="hallucinations-or-creations">Hallucinations Or Creations</h3><p>The recent inflection point in the capability of LLMs unlocks an entirely new computing paradigm. The legendary UX researcher Jakob Nielsen believes it introduces <a href="https://www.nngroup.com/articles/ai-paradigm/">the first new UI paradigm in 60 years</a>, which he calls Intent-Based Outcome Specification. Instead of telling computers <em>what</em> to do, we now explain an outcome so they can determine <em>how</em> to achieve it.</p><p>Using machine learning algorithms to recommend features is one example. Another fairly new example that you’re likely familiar with is chatbots like ChatGPT. Hundreds of millions of people <a href="https://www.reuters.com/technology/chatgpt-sets-record-fastest-growing-user-base-analyst-note-2023-02-01/">already use it</a>, which is a testament to how out of this world the experience is. Yet therein lies a problem: sometimes its responses literally aren’t grounded in reality because it has a tendency to make them up! This isn’t obvious to those unfamiliar with the technology’s inner workings since there aren’t many safeguards. As a result, some people become dangerously overreliant on its unverified output.</p><p>In one case, a <a href="https://news.bloomberglaw.com/business-and-practice/lawyers-ai-blunder-shows-perils-of-chatgpt-in-early-days">lawyer based legal arguments on research from ChatGPT</a> only to find out in court that multiple cited sources turned out to be completely nonexistent. The lawyer’s defense was that he was “unaware of the possibility that its content could be false.” Examples like this reinforce the importance of friction in preventing unintended consequences. While ChatGPT’s empty state mentions its limitations, they obviously aren’t stated explicitly enough for <em>everyone</em>.</p><figure><a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/12-friction-chatgpt.png"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="600" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/12-friction-chatgpt.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/12-friction-chatgpt.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/12-friction-chatgpt.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/12-friction-chatgpt.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/12-friction-chatgpt.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/12-friction-chatgpt.png" sizes="100vw" alt="The empty state for ChatGPT displays three columns of text above the input field. The columns are titled “Examples”, “Capabilities”, & “Limitations”. Within each column, there are three rows of text blocks, all displayed in the same font size, color, & weight" referrerpolicy="no-referrer"></a><figcaption class="op-vertical-bottom">ChatGPT’s empty state mentions its limitations, but the lack of text hierarchy in this design means many users are likely to overlook them. (Image source: <a href="https://chat.openai.com/">ChatGPT</a>) (<a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/12-friction-chatgpt.png">Large preview</a>)</figcaption></figure><p>Extra steps and prompts, such as those mentioned earlier, could better educate users about what is referred to as a “hallucination.” It’s a phenomenon of chatbots confidently outputting responses that don’t align with their training data. Similar to telling a lie when you don’t have a correct answer, although that characterization overly anthropomorphizes the software.</p><p>Yet some see hallucinations as more of a feature than a bug. Marc Andreessen, the co-founder of Netscape, states <a href="https://play.headliner.app/episode/15425185">during an interview</a> that “another term for hallucination is just simply creativity.” He views it as a significant evolution from the hyperliteral systems of the past because they can now brainstorm and improvise.</p><p>The problem is that chatbot interfaces tend to be simplistic by attempting to be one size fits all. More controls or modes would educate users about available output types so they can specify which they expect. Sometimes we may want an imaginative response from a creative partner. Other times we want the hyper-accuracy of a deterministic calculator, such as ChatGPT’s <a href="https://writings.stephenwolfram.com/2023/03/chatgpt-gets-its-wolfram-superpowers/">Wolfram plugin</a>.</p><p>Perhaps a creativity slider or persona selector similar to <a href="https://www.youtube.com/watch?v=oDuVAczLqTk">Maggie Appleton’s exploration</a> will better align the system to user needs. However it’s implemented, a bit of friction can maximize benefits while minimizing risks.</p><h2 id="finding-your-friction">Finding Your Friction</h2><p>We’ve covered using friction for simple error prevention to complex algorithm optimizations. Let’s end with a few tips that make implementing it as smooth as possible.</p><h3 id="peak-end-rule">Peak-End Rule</h3><p>When adding resistance to an experience, the Peak-End Rule is a useful psychological heuristic to leverage. It’s rooted in <a href="https://www.jstor.org/stable/40062570">studies</a> by Daniel Kahneman & Amos Tversky, where they found that perception of painful experiences doesn’t tend to correlate with duration. It’s the peak & end of the experience that subjects recall.</p><p>In practice, <a href="https://www.nngroup.com/articles/peak-end-rule/">experts suggest</a> that delight is a function of positive emotional peaks and rewarding emotional payoffs. Optimizing for the peak & end provides room to shift focus from time spent and steps taken as performance indicators; long and complex experiences can still be delightful if designed correctly.</p><figure><a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/13-friction-peak-end-rule.jpg"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="600" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/13-friction-peak-end-rule.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/13-friction-peak-end-rule.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/13-friction-peak-end-rule.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/13-friction-peak-end-rule.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/13-friction-peak-end-rule.jpg 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/13-friction-peak-end-rule.jpg" sizes="100vw" alt="A chart titled “Peak-End Rule” by Maximillian Piras displays “emotion” on the y-axis and “time” on the x-axis. A trend line is drawn that begins below the midway point of the y-axis labeled with a neutral face emoji. The trendline shoots upward to an all-time high point located two-fourths through the graph and labeled with a happy face emoji. The trendline drops to its lowest point, located three-fourths through the graph and labeled with a sad face emoji. The trendline ends closer to its all-time high, labeled with a happy face emoji" referrerpolicy="no-referrer"></a><figcaption class="op-vertical-bottom">The Peak-End Rule states that experiences tend to be recalled by the emotional peaks & end state as opposed to their full duration. (Image source: <a href="https://www.maximillian.nyc/">Maximillian Piras</a>) (<a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/13-friction-peak-end-rule.jpg">Large preview</a>)</figcaption></figure><h3 id="maps-aren-t-territories">Maps Aren’t Territories</h3><p>People experience friction emotionally, but developers see it as a value on a chart. In the same way that a map is not a territory, this ratio is only an approximation of the actual experience. It’s something to consider when evaluating any strategies for adding or removing friction. Since applications are complex ecosystems, any measurements should consider a <strong>holistic view</strong>. Every step has <a href="https://medium.com/paloit/second-order-effect-in-product-design-and-strategy-82c7fd2c52e6">second-order effects</a>, which makes one-dimensional measurements prone to blind spots.</p><p>For example, when a wrong file is deleted, the data can’t report people cursing at their computer screen. Nor is it likely to include the context of them opening a new file just to recreate their old file from scratch. The same subjectivity applies to all instances of friction. For instance, are your reports equipped to measure the trade-off of an action that takes longer but results in better data collection? It might increase algorithmic efficiency, which compounds across a neural network.</p><p>As we’ve discussed, better recommendations tend to yield better retention, which tends to yield more revenue if a business model aligns with usage. Myopic measurements will miss these types of gains, so make sure to analyze friction in a way that really matters.</p><h3 id="keep-pushing">Keep Pushing</h3><p>As software is eating the world, AI is eating software. If it’s a paradigm shift as big as social, mobile, or even the web, then applications must adapt or die. If you want to remain competitive in the machine learning age, then don’t fear friction.</p><h3 id="further-reading-on-smashing-magazine">Further Reading on Smashing Magazine</h3><ul><li>“<a href="https://www.smashingmagazine.com/2023/06/ai-detect-sentiment-audio-files/">Using AI To Detect Sentiment In Audio Files</a>,” Joas Pambou</li><li>“<a href="https://www.smashingmagazine.com/2023/07/modern-technology-future-language-translation/">Modern Technology And The Future Of Language Translation</a>,” Adriano Raiano</li><li>“<a href="https://www.smashingmagazine.com/2023/04/skills-designers-ai-cant-replicate/">Beyond Algorithms: Skills Of Designers That AI Can’t Replicate</a>,” Lyndon Cerejo</li><li>“<a href="https://www.smashingmagazine.com/2023/05/ai-tools-skyrocket-programming-productivity/">How To Use AI Tools To Skyrocket Your Programming Productivity</a>,” Shane Duggan</li></ul>]]></description>
<pubDate>Sun, 06 Aug 2023 16:00:00 GMT</pubDate>
<guid isPermaLink="false">https://www.smashingmagazine.com/2023/08/friction-feature-machine-learning-algorithms/</guid>
<link>https://www.smashingmagazine.com/2023/08/friction-feature-machine-learning-algorithms/</link>
<author><![CDATA[Maximillian Piras]]></author>
<category>AI</category>
<category>UX</category>
<category>Design</category>
<category>Machine Learning</category>
</item>
<item>
<title><![CDATA[Designing Accessible Text Over Images: Best Practices, Techniques, And Resources (Part 1)]]></title>
<description><![CDATA[<h1 id="main-heading" class="article-header--title">Designing Accessible Text Over Images: Best Practices, Techniques, And Resources (Part 1)</h1><span id="article__start" class="summary__heading" aria-hidden="true"></span>In this two-part series of articles, Hannah Milan covers the best practices when using various accessible text over images techniques for designing your web and mobile app content. These practices can help you to make the text over images more accessible while retaining an aesthetically pleasing look. Get ready to deep-dive through the subtle changes in your design, such as the text’s position, size, and background style, and explore the importance of using real text for accessibility purposes, as opposed to using images of text.<ul class="meta-box meta-box--article"><li class="meta-box--item meta-box--published">11 min read</li><li class="meta-box--item meta-box--tags"><a href="https://www.smashingmagazine.com/category/design">Design</a>,
<a href="https://www.smashingmagazine.com/category/accessibility">Accessibility</a>,
<a href="https://www.smashingmagazine.com/category/techniques">Techniques</a>,
<a href="https://www.smashingmagazine.com/category/typography">Typography</a></li><li class="meta-box--item meta-box--share">Share on <a rel="nofollow" href="https://twitter.com/intent/tweet?text=Designing%20Accessible%20Text%20Over%20Images%3a%20Best%20Practices%2c%20Techniques%2c%20And%20Resources%20%28Part%201%29&url=https%3A%2F%2Fwww.smashingmagazine.com%2f2023%2f08%2fdesigning-accessible-text-over-images-part1%2f&via=smashingmag">Twitter</a>, <a rel="nofollow" href="https://data.smashing.services/ball?uri=//www.linkedin.com/shareArticle?url=https://www.smashingmagazine.com%2f2023%2f08%2fdesigning-accessible-text-over-images-part1%2f&title=Designing%20Accessible%20Text%20Over%20Images%3a%20Best%20Practices%2c%20Techniques%2c%20And%20Resources%20%28Part%201%29">LinkedIn</a></li></ul><p>What is the <em>text over images</em> design pattern? How do we apply this pattern to our designs without sacrificing legibility and readability?</p><p>The text over images design pattern is a design technique used to place text on top of images. It is often used to provide information about the image or to serve as the main website navigation. However, this technique can quickly sacrifice legibility and readability if there is not enough contrast between the text and the image. To prevent this, designers need to ensure that the text and the image have a <strong>high enough contrast ratio</strong> to be legible and readable. Additionally, designers should also make sure the <strong>text is positioned in the right place</strong>, away from any image elements that might cause confusion, distraction, or make it difficult to read.</p><blockquote>“Because images play such an important role, often designers end up placing text over an image to leverage the attention-grabbing aspect of the photo while providing text-based content to communicate actual information. However, these endeavors commonly backfire, usually when the <a href="https://www.nngroup.com/articles/low-contrast/">contrast between the text and the background is too low</a>.”<br><br>— Aurora Harley, “<a href="https://www.nngroup.com/articles/text-over-images/">Ensure High Contrast for Text Over Images</a>” (NN/g Nielsen Group)</blockquote><p>Before going forward, here are some <strong>useful resources</strong> (on how you can apply these techniques in practice with HTML/CSS) that are worth checking out:</p><ul><li>“<a href="https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-2-430de537ba96">7 Rules For Creating Gorgeous UI - Part 2</a>,” by <a href="https://twitter.com/erikdkennedy">Erik Kennedy</a></li><li>“<a href="https://ishadeed.com/article/handling-text-over-image-css/">Handling Text Over Images by CSS</a>,” by <a href="https://twitter.com/shadeed9">Ahmad Shadeed</a></li><li>“<a href="https://css-tricks.com/design-considerations-text-images/">Design Considerations: Text On Images</a>,” by <a href="https://css-tricks.com/author/chriscoyier/">Chris Coyier</a></li><li>“<a href="https://twitter.com/addyosmani/status/1365735686838493187">How Spotify Makes Text On Images Readable</a>,” a Twitter thread by <a href="https://twitter.com/addyosmani">Addy Osmani</a></li></ul><h2 id="how-to-design-a-text-over-an-image">How To Design A Text Over An Image</h2><p>Admittedly, when I was starting my design career, and I had very little accessibility knowledge, one of the main things I used in my designs was the text over images design pattern, without me knowing that I was hurting my users who have low vision.</p><blockquote>“A picture says a thousand words. But sometimes, images alone won’t work. This is why typography still proves to be a vital aspect of design despite the focus on more visual content. Remember that the need for visual content does not tell you to stop adding text to your designs — it simply reminds you to do so in the most tasteful and stylish way possible. And, of course, readability should not be sacrificed in the name of design. You can’t add text that people can barely understand, then argue that it’s a piece of art. Sending a message that cannot be deciphered defies the purpose of what you’re doing.”<br><br>— Igor Ovsyannykov, “<a href="https://creativemarket.com/blog/typography-tricks-readability">10 Typography Tricks to Make Your Text Much More Readable</a>”</blockquote><p>Yet accessibility is a key aspect of design, and working with typography is one of the cornerstones of UX design. There are many typography principles that will help you create user-friendly designs. In the following sections of the article, you will learn more about how you can improve your design <em>without</em> sacrificing the accessibility aspect and how to combine text and images better.</p><blockquote>According to <a href="https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum">WCAG Success Criterion 1.4.3</a>, make sure that your text on images should meet the minimum contrast of<ul><li><em><strong>3:1</strong> for large text (text bigger than 18 pt normal, or text bigger than 14 pt bold);</em></li><li><em><strong>4.5:1</strong> for body text (text lower than 18 pt normal, or text lower than 14 pt bold).</em></li></ul>Ensure that a minimum visual contrast ratio of 4.5:1 is maintained between the text and its background. This minimum contrast ratio should also be maintained in the case of <a href="https://www.w3.org/WAI/WCAG21/Understanding/images-of-text">images of text</a>.<br><br>— “<a href="https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum">Understanding Success Criterion 1.4.3: Contrast (Minimum)</a>,” W3.org</blockquote><h2 id="using-an-overlay-technique-over-the-entire-image">Using An Overlay Technique Over The Entire Image</h2><p><strong>Overlays</strong> are colored layers such as overlay light, overlay dark, dark gradients, or colored overlays. As a general rule, overlays are used to make images stand out less or to act as a background for the text so that it has better readability and contrast.</p><figure><a href="https://files.smashing.media/articles/designing-accessible-text-over-images-part1/smashing-text-over-images-technique-overlay.jpg"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="600" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/designing-accessible-text-over-images-part1/smashing-text-over-images-technique-overlay.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/designing-accessible-text-over-images-part1/smashing-text-over-images-technique-overlay.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/designing-accessible-text-over-images-part1/smashing-text-over-images-technique-overlay.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/designing-accessible-text-over-images-part1/smashing-text-over-images-technique-overlay.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/designing-accessible-text-over-images-part1/smashing-text-over-images-technique-overlay.jpg 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/designing-accessible-text-over-images-part1/smashing-text-over-images-technique-overlay.jpg" sizes="100vw" alt="Try This and Avoid This for Accessible Text Over Images design techniques, with the left side showing an example of what to try such as using a dark overlay over a photo and white text on top, and the right side showing an example of what to avoid (white text directly over a photo). The text displayed over the image reads ‘sky, sea, & you.’" referrerpolicy="no-referrer"></a><figcaption class="op-vertical-bottom">Overlays are used to make images stand out less or to act as a background for the text. In the example on the left, the contrast is much better, while in the example on the right, the text is barely readable. (Image credit: Photo by <a href="https://unsplash.com/@d1280?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">dharmendra sahu</a> on <a href="https://unsplash.com/photos/Ia2Kjtrx8y4?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>) (<a href="https://files.smashing.media/articles/designing-accessible-text-over-images-part1/smashing-text-over-images-technique-overlay.jpg">Large preview</a>)</figcaption></figure><h3 id="examples-from-the-wild">Examples From The Wild</h3><ul><li><a href="https://www.strong.app/"><strong>Strong App</strong></a></li></ul><figure><a href="https://files.smashing.media/articles/designing-accessible-text-over-images-part1/smashing-text-over-images-technique-overlay-strong-app.jpg"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="500" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/designing-accessible-text-over-images-part1/smashing-text-over-images-technique-overlay-strong-app.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f |
sorry for the confusion, the document had spaces for the topic keywords |
Successfully generated as following: http://localhost:1200/smashingmagazine/wallpapers - Success ✔️<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"
>
<channel>
<title><![CDATA[Smashing Magazine Articles]]></title>
<link>https://www.smashingmagazine.com/category/wallpapers</link>
<atom:link href="http://localhost:1200/smashingmagazine/wallpapers" rel="self" type="application/rss+xml" />
<description><![CDATA[Latest Articles on Smashingmagazine.com - Made with love by RSSHub(https://github.com/DIYgod/RSSHub)]]></description>
<generator>RSSHub</generator>
<webMaster>i@diygod.me (DIYgod)</webMaster>
<language>en-us</language>
<lastBuildDate>Thu, 10 Aug 2023 16:19:49 GMT</lastBuildDate>
<ttl>5</ttl>
<item>
<title><![CDATA[Living In The Moment (August 2023 Wallpapers Edition)]]></title>
<description><![CDATA[<h1 id="main-heading" class="article-header--title">Living In The Moment (August 2023 Wallpapers Edition)</h1><span id="article__start" class="summary__heading" aria-hidden="true"></span>New month, new wallpapers! In this post, you’ll find unique and inspiring wallpapers for August 2023. Created with love by the community for the community, they come in versions with and without a calendar. Enjoy!<ul class="meta-box meta-box--article"><li class="meta-box--item meta-box--published">16 min read</li><li class="meta-box--item meta-box--tags"><a href="https://www.smashingmagazine.com/category/wallpapers">Wallpapers</a></li><li class="meta-box--item meta-box--share">Share on <a rel="nofollow" href="https://twitter.com/intent/tweet?text=Living%20In%20The%20Moment%20%28August%202023%20Wallpapers%20Edition%29&url=https%3A%2F%2Fwww.smashingmagazine.com%2f2023%2f07%2fdesktop-wallpaper-calendars-august-2023%2f&via=smashingmag">Twitter</a>, <a rel="nofollow" href="https://data.smashing.services/ball?uri=//www.linkedin.com/shareArticle?url=https://www.smashingmagazine.com%2f2023%2f07%2fdesktop-wallpaper-calendars-august-2023%2f&title=Living%20In%20The%20Moment%20%28August%202023%20Wallpapers%20Edition%29">LinkedIn</a></li></ul><p>Everybody loves a beautiful wallpaper to freshen up their desktops and home screens, right? To cater for <strong>new and unique artworks</strong> on a regular basis, we started our <a href="https://www.smashingmagazine.com/category/wallpapers">monthly wallpapers series</a> more than twelve years ago, and from the very beginning to today, artists and designers from across the globe have accepted the challenge and submitted their designs to it. Just like this month.</p><p>In this post, you’ll find their wallpapers for <strong>August 2023</strong>. All of them come in versions with and without a calendar, so no matter if you need to count down the days to a big deadline (or a few days off, maybe?) or plan to use your favorite wallpaper even after the month has ended, we’ve got you covered. A big thank-you to everyone who shared their designs with us — we sincerely appreciate it!</p><p>As a little bonus goodie, we also added some “oldies but goodies” at the end of this post, timeless wallpaper treasures that we rediscovered way down in our archives and that are just too good to be forgotten. Now there’s only one question left to be answered: Which one to choose? Happy August!</p><ul><li>You can <strong>click on every image to see a larger preview</strong>,</li><li>We respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the <strong>full freedom to explore their creativity</strong> and express emotions and experience through their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us but rather designed from scratch by the artists themselves.</li><li><strong><a href="https://www.smashingmagazine.com/desktop-wallpaper-calendars-join-in/">Submit a wallpaper!</a></strong><br>Did you know that <em>you</em> could get featured in our next wallpapers post, too? We are always <strong>looking for creative talent</strong>.</li></ul><h2 id="summer-day-08-2023">Summer Day</h2><p>Designed by <a href="https://cpsp.in/">Kasturi Palmal</a> from India.</p><figure class="break-out"><a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/aug-23-summer-day-full.png" title="Summer Day"><img alt="Summer Day" src="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2023/aug-23-summer-day-preview-opt.png" referrerpolicy="no-referrer"></a></figure><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/aug-23-summer-day-preview.png" title="Summer Day - Preview">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/cal/aug-23-summer-day-cal-800x600.jpg" title="Summer Day - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/cal/aug-23-summer-day-cal-1280x1024.jpg" title="Summer Day - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/cal/aug-23-summer-day-cal-1600x1200.jpg" title="Summer Day - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/cal/aug-23-summer-day-cal-1680x1200.jpg" title="Summer Day - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/cal/aug-23-summer-day-cal-1920x1080.jpg" title="Summer Day - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/cal/aug-23-summer-day-cal-1920x1200.jpg" title="Summer Day - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/cal/aug-23-summer-day-cal-1920x1440.jpg" title="Summer Day - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/cal/aug-23-summer-day-cal-2560x1440.jpg" title="Summer Day - 2560x1440">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/nocal/aug-23-summer-day-nocal-800x600.jpg" title="Summer Day - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/nocal/aug-23-summer-day-nocal-1280x1024.jpg" title="Summer Day - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/nocal/aug-23-summer-day-nocal-1600x1200.jpg" title="Summer Day - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/nocal/aug-23-summer-day-nocal-1680x1200.jpg" title="Summer Day - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/nocal/aug-23-summer-day-nocal-1920x1080.jpg" title="Summer Day - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/nocal/aug-23-summer-day-nocal-1920x1200.jpg" title="Summer Day - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/nocal/aug-23-summer-day-nocal-1920x1440.jpg" title="Summer Day - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/summer-day/nocal/aug-23-summer-day-nocal-2560x1440.jpg" title="Summer Day - 2560x1440">2560x1440</a></li></ul><h2 id="retro-road-trip-08-2023">Retro Road Trip</h2><p>“As the sun dips below the horizon, casting a warm glow upon the open road, the retro van finds a resting place for the night. A campsite bathed in moonlight or a cozy motel straight from a postcard become havens where weary travelers can rest, rejuvenate, and prepare for the adventures that await with the dawn of a new day.” — Designed by <a href="https://www.popwebdesign.net/seo-optimizacija.html">PopArt Studio</a> from Serbia.</p><figure class="break-out"><a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/aug-23-retro-road-trip-full.jpg" title="Retro Road Trip"><img alt="Retro Road Trip" src="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2023/aug-23-retro-road-trip-preview-opt.png" referrerpolicy="no-referrer"></a></figure><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/aug-23-retro-road-trip-preview.jpg" title="Retro Road Trip - Preview">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-320x480.jpg" title="Retro Road Trip - 320x480">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-640x480.jpg" title="Retro Road Trip - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-800x480.jpg" title="Retro Road Trip - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-800x600.jpg" title="Retro Road Trip - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-1024x768.jpg" title="Retro Road Trip - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-1024x1024.jpg" title="Retro Road Trip - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-1152x864.jpg" title="Retro Road Trip - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-1280x720.jpg" title="Retro Road Trip - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-1280x800.jpg" title="Retro Road Trip - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-1280x960.jpg" title="Retro Road Trip - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-1280x1024.jpg" title="Retro Road Trip - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-1400x1050.jpg" title="Retro Road Trip - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-1440x900.jpg" title="Retro Road Trip - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-1600x1200.jpg" title="Retro Road Trip - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-1680x1050.jpg" title="Retro Road Trip - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-1680x1200.jpg" title="Retro Road Trip - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-1920x1080.jpg" title="Retro Road Trip - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-1920x1200.jpg" title="Retro Road Trip - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-1920x1440.jpg" title="Retro Road Trip - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/cal/aug-23-retro-road-trip-cal-2560x1440.jpg" title="Retro Road Trip - 2560x1440">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-320x480.jpg" title="Retro Road Trip - 320x480">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-640x480.jpg" title="Retro Road Trip - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-800x480.jpg" title="Retro Road Trip - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-800x600.jpg" title="Retro Road Trip - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1024x768.jpg" title="Retro Road Trip - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1024x1024.jpg" title="Retro Road Trip - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1152x864.jpg" title="Retro Road Trip - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1280x720.jpg" title="Retro Road Trip - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1280x800.jpg" title="Retro Road Trip - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1280x960.jpg" title="Retro Road Trip - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1280x1024.jpg" title="Retro Road Trip - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1400x1050.jpg" title="Retro Road Trip - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1440x900.jpg" title="Retro Road Trip - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1600x1200.jpg" title="Retro Road Trip - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1680x1050.jpg" title="Retro Road Trip - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1680x1200.jpg" title="Retro Road Trip - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1920x1080.jpg" title="Retro Road Trip - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1920x1200.jpg" title="Retro Road Trip - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-1920x1440.jpg" title="Retro Road Trip - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/retro-road-trip/nocal/aug-23-retro-road-trip-nocal-2560x1440.jpg" title="Retro Road Trip - 2560x1440">2560x1440</a></li></ul><h2 id="spooky-campfire-stories-08-2023">Spooky Campfire Stories</h2><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Sweden.</p><figure class="break-out"><a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/aug-23-spooky-campfire-stories-full.png" title="Spooky Campfire Stories"><img alt="Spooky Campfire Stories" src="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2023/aug-23-spooky-campfire-stories-preview-opt.png" referrerpolicy="no-referrer"></a></figure><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/aug-23-spooky-campfire-stories-preview.png" title="Spooky Campfire Stories - Preview">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-640x480.png" title="Spooky Campfire Stories - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-800x480.png" title="Spooky Campfire Stories - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-800x600.png" title="Spooky Campfire Stories - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-1024x768.png" title="Spooky Campfire Stories - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-1024x1024.png" title="Spooky Campfire Stories - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-1152x864.png" title="Spooky Campfire Stories - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-1280x720.png" title="Spooky Campfire Stories - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-1280x800.png" title="Spooky Campfire Stories - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-1280x960.png" title="Spooky Campfire Stories - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-1280x1024.png" title="Spooky Campfire Stories - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-1366x768.png" title="Spooky Campfire Stories - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-1400x1050.png" title="Spooky Campfire Stories - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-1440x900.png" title="Spooky Campfire Stories - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-1600x1200.png" title="Spooky Campfire Stories - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-1680x1050.png" title="Spooky Campfire Stories - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-1680x1200.png" title="Spooky Campfire Stories - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-1920x1080.png" title="Spooky Campfire Stories - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-1920x1200.png" title="Spooky Campfire Stories - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-1920x1440.png" title="Spooky Campfire Stories - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-2560x1440.png" title="Spooky Campfire Stories - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/cal/aug-23-spooky-campfire-stories-cal-3840x2160.png" title="Spooky Campfire Stories - 3840x2160">3840x2160</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-640x480.png" title="Spooky Campfire Stories - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-800x480.png" title="Spooky Campfire Stories - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-800x600.png" title="Spooky Campfire Stories - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1024x768.png" title="Spooky Campfire Stories - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1024x1024.png" title="Spooky Campfire Stories - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1152x864.png" title="Spooky Campfire Stories - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1280x720.png" title="Spooky Campfire Stories - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1280x800.png" title="Spooky Campfire Stories - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1280x960.png" title="Spooky Campfire Stories - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1280x1024.png" title="Spooky Campfire Stories - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1366x768.png" title="Spooky Campfire Stories - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1400x1050.png" title="Spooky Campfire Stories - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1440x900.png" title="Spooky Campfire Stories - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1600x1200.png" title="Spooky Campfire Stories - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1680x1050.png" title="Spooky Campfire Stories - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1680x1200.png" title="Spooky Campfire Stories - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1920x1080.png" title="Spooky Campfire Stories - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1920x1200.png" title="Spooky Campfire Stories - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-1920x1440.png" title="Spooky Campfire Stories - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-2560x1440.png" title="Spooky Campfire Stories - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/spooky-campfire-stories/nocal/aug-23-spooky-campfire-stories-nocal-3840x2160.png" title="Spooky Campfire Stories - 3840x2160">3840x2160</a></li></ul><h2 id="party-night-under-the-stars-08-2023">Party Night Under The Stars</h2><p>“August… it’s time for a party and summer vacation — sea, moon, stars, music… and magical vibrant colors.” — Designed by <a href="https://teodoravasileva.net/">Teodora Vasileva</a> from Bulgaria.</p><figure class="break-out"><a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/aug-23-party-night-under-the-stars-full.png" title="Party Night Under The Stars"><img alt="Party Night Under The Stars" src="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2023/aug-23-party-night-under-the-stars-preview-opt.png" referrerpolicy="no-referrer"></a></figure><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/aug-23-party-night-under-the-stars-preview.png" title="Party Night Under The Stars - Preview">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/cal/aug-23-party-night-under-the-stars-cal-640x480.jpg" title="Party Night Under The Stars - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/cal/aug-23-party-night-under-the-stars-cal-800x480.jpg" title="Party Night Under The Stars - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/cal/aug-23-party-night-under-the-stars-cal-800x600.jpg" title="Party Night Under The Stars - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/cal/aug-23-party-night-under-the-stars-cal-1024x768.jpg" title="Party Night Under The Stars - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/cal/aug-23-party-night-under-the-stars-cal-1280x720.jpg" title="Party Night Under The Stars - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/cal/aug-23-party-night-under-the-stars-cal-1280x960.jpg" title="Party Night Under The Stars - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/cal/aug-23-party-night-under-the-stars-cal-1280x1024.jpg" title="Party Night Under The Stars - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/cal/aug-23-party-night-under-the-stars-cal-1400x1050.jpg" title="Party Night Under The Stars - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/cal/aug-23-party-night-under-the-stars-cal-1680x1050.jpg" title="Party Night Under The Stars - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/cal/aug-23-party-night-under-the-stars-cal-1680x1200.jpg" title="Party Night Under The Stars - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/cal/aug-23-party-night-under-the-stars-cal-1920x1080.jpg" title="Party Night Under The Stars - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/cal/aug-23-party-night-under-the-stars-cal-1920x1200.jpg" title="Party Night Under The Stars - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/cal/aug-23-party-night-under-the-stars-cal-1920x1440.jpg" title="Party Night Under The Stars - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/cal/aug-23-party-night-under-the-stars-cal-2560x1440.jpg" title="Party Night Under The Stars - 2560x1440">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-640x480.jpg" title="Party Night Under The Stars - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-800x480.jpg" title="Party Night Under The Stars - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-800x600.jpg" title="Party Night Under The Stars - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-1024x768.jpg" title="Party Night Under The Stars - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-1280x720.jpg" title="Party Night Under The Stars - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-1280x960.jpg" title="Party Night Under The Stars - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-1280x1024.jpg" title="Party Night Under The Stars - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-1400x1050.jpg" title="Party Night Under The Stars - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-1680x1050.jpg" title="Party Night Under The Stars - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-1680x1200.jpg" title="Party Night Under The Stars - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-1920x1080.jpg" title="Party Night Under The Stars - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-1920x1200.jpg" title="Party Night Under The Stars - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-1920x1440.jpg" title="Party Night Under The Stars - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/party-night-under-the-stars/nocal/aug-23-party-night-under-the-stars-nocal-2560x1440.jpg" title="Party Night Under The Stars - 2560x1440">2560x1440</a></li></ul><h2 id="japanese-fashion-week-08-2023">Japanese Fashion Week</h2><p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Sweden.</p><figure class="break-out"><a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/aug-23-japanese-fashion-week-full.png" title="Japanese Fashion Week"><img alt="Japanese Fashion Week" src="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2023/aug-23-japanese-fashion-week-preview-opt.png" referrerpolicy="no-referrer"></a></figure><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/aug-23-japanese-fashion-week-preview.png" title="Japanese Fashion Week - Preview">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-640x480.png" title="Japanese Fashion Week - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-800x480.png" title="Japanese Fashion Week - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-800x600.png" title="Japanese Fashion Week - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-1024x768.png" title="Japanese Fashion Week - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-1024x1024.png" title="Japanese Fashion Week - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-1152x864.png" title="Japanese Fashion Week - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-1280x720.png" title="Japanese Fashion Week - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-1280x800.png" title="Japanese Fashion Week - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-1280x960.png" title="Japanese Fashion Week - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-1280x1024.png" title="Japanese Fashion Week - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-1366x768.png" title="Japanese Fashion Week - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-1400x1050.png" title="Japanese Fashion Week - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-1440x900.png" title="Japanese Fashion Week - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-1600x1200.png" title="Japanese Fashion Week - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-1680x1050.png" title="Japanese Fashion Week - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-1680x1200.png" title="Japanese Fashion Week - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-1920x1080.png" title="Japanese Fashion Week - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-1920x1200.png" title="Japanese Fashion Week - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-1920x1440.png" title="Japanese Fashion Week - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-2560x1440.png" title="Japanese Fashion Week - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/cal/aug-23-japanese-fashion-week-cal-3840x2160.png" title="Japanese Fashion Week - 3840x2160">3840x2160</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-640x480.png" title="Japanese Fashion Week - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-800x480.png" title="Japanese Fashion Week - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-800x600.png" title="Japanese Fashion Week - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-1024x768.png" title="Japanese Fashion Week - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-1024x1024.png" title="Japanese Fashion Week - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-1152x864.png" title="Japanese Fashion Week - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-1280x720.png" title="Japanese Fashion Week - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-1280x800.png" title="Japanese Fashion Week - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-1280x960.png" title="Japanese Fashion Week - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-1280x1024.png" title="Japanese Fashion Week - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-1366x768.png" title="Japanese Fashion Week - 1366x768">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-1400x1050.png" title="Japanese Fashion Week - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-1440x900.png" title="Japanese Fashion Week - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-1600x1200.png" title="Japanese Fashion Week - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-1680x1050.png" title="Japanese Fashion Week - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-1680x1200.png" title="Japanese Fashion Week - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-1920x1080.png" title="Japanese Fashion Week - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-1920x1200.png" title="Japanese Fashion Week - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-1920x1440.png" title="Japanese Fashion Week - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-2560x1440.png" title="Japanese Fashion Week - 2560x1440">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/japanese-fashion-week/nocal/aug-23-japanese-fashion-week-nocal-3840x2160.png" title="Japanese Fashion Week - 3840x2160">3840x2160</a></li></ul><h2 id="train-ride-08-2023">Train Ride</h2><p>“We got on a plane and went to the other part of the world to Australia. In this case, we got to Melbourne and we are ready to go to Flinders Street Station to catch a train and move around this wonderful country.” — Designed by <a href="https://www.silocreativo.com/en">Veronica Valenzuela</a> from Spain.</p><figure class="break-out"><a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/aug-23-train-ride-full.png" title="Train Ride"><img alt="Train Ride" src="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2023/aug-23-train-ride-preview-opt.png" referrerpolicy="no-referrer"></a></figure><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/aug-23-train-ride-preview.png" title="Train Ride - Preview">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/cal/aug-23-train-ride-cal-640x480.png" title="Train Ride - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/cal/aug-23-train-ride-cal-800x480.png" title="Train Ride - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/cal/aug-23-train-ride-cal-1024x768.png" title="Train Ride - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/cal/aug-23-train-ride-cal-1280x720.png" title="Train Ride - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/cal/aug-23-train-ride-cal-1280x800.png" title="Train Ride - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/cal/aug-23-train-ride-cal-1440x900.png" title="Train Ride - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/cal/aug-23-train-ride-cal-1600x1200.png" title="Train Ride - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/cal/aug-23-train-ride-cal-1920x1080.png" title="Train Ride - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/cal/aug-23-train-ride-cal-1920x1440.png" title="Train Ride - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/cal/aug-23-train-ride-cal-2560x1440.png" title="Train Ride - 2560x1440">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/nocal/aug-23-train-ride-nocal-640x480.png" title="Train Ride - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/nocal/aug-23-train-ride-nocal-800x480.png" title="Train Ride - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/nocal/aug-23-train-ride-nocal-1024x768.png" title="Train Ride - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/nocal/aug-23-train-ride-nocal-1280x720.png" title="Train Ride - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/nocal/aug-23-train-ride-nocal-1280x800.png" title="Train Ride - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/nocal/aug-23-train-ride-nocal-1440x900.png" title="Train Ride - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/nocal/aug-23-train-ride-nocal-1600x1200.png" title="Train Ride - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/nocal/aug-23-train-ride-nocal-1920x1080.png" title="Train Ride - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/nocal/aug-23-train-ride-nocal-1920x1440.png" title="Train Ride - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/train-ride/nocal/aug-23-train-ride-nocal-2560x1440.png" title="Train Ride - 2560x1440">2560x1440</a></li></ul><h2 id="proud-08-2023">Proud</h2><p>“Chandrayaan-3 is the third and most recent lunar Indian Space Research exploration mission under the Chandrayaan programme. It consists of a lander named Vikram and a rover named Pragyan similar to Chandrayaan-2, but does not have an orbiter. Its propulsion module behaves like a communication relay satellite.” — Designed by <a href="https://design-studio.io/">Bhabna Basak</a> from India.</p><figure class="break-out"><a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/aug-23-proud-full.png" title="Proud"><img alt="Proud" src="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2023/aug-23-proud-preview-opt.png" referrerpolicy="no-referrer"></a></figure><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/aug-23-proud-preview.png" title="Proud - Preview">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/cal/aug-23-proud-cal-1440x900.jpg" title="Proud - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/cal/aug-23-proud-cal-1600x1200.jpg" title="Proud - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/cal/aug-23-proud-cal-1680x1050.jpg" title="Proud - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/cal/aug-23-proud-cal-1680x1200.jpg" title="Proud - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/cal/aug-23-proud-cal-1920x1080.jpg" title="Proud - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/cal/aug-23-proud-cal-1920x1200.jpg" title="Proud - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/cal/aug-23-proud-cal-1920x1440.jpg" title="Proud - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/cal/aug-23-proud-cal-2560x1440.jpg" title="Proud - 2560x1440">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/nocal/aug-23-proud-nocal-1440x900.jpg" title="Proud - 1440x900">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/nocal/aug-23-proud-nocal-1600x1200.jpg" title="Proud - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/nocal/aug-23-proud-nocal-1680x1050.jpg" title="Proud - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/nocal/aug-23-proud-nocal-1680x1200.jpg" title="Proud - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/nocal/aug-23-proud-nocal-1920x1080.jpg" title="Proud - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/nocal/aug-23-proud-nocal-1920x1200.jpg" title="Proud - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/nocal/aug-23-proud-nocal-1920x1440.jpg" title="Proud - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/proud/nocal/aug-23-proud-nocal-2560x1440.jpg" title="Proud - 2560x1440">2560x1440</a></li></ul><h2 id="flowers-08-2023">Flowers</h2><p>Designed by <a href="https://www.freepik.com/author/sahra">Sahra Tamo</a> from Turkey.</p><figure class="break-out"><a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/aug-23-floral-illustration-full.png" title="Floral Illustration"><img alt="Floral Illustration" src="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2023/aug-23-floral-illustration-preview-opt.png" referrerpolicy="no-referrer"></a></figure><ul><li><a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/aug-23-floral-illustration-preview.png" title="Floral Illustration - Preview">preview</a></li><li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-320x480.jpg" title="Floral Illustration - 320x480">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-640x480.jpg" title="Floral Illustration - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-800x480.jpg" title="Floral Illustration - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-800x600.jpg" title="Floral Illustration - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-1024x768.jpg" title="Floral Illustration - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-1024x1024.jpg" title="Floral Illustration - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-1152x864.jpg" title="Floral Illustration - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-1280x720.jpg" title="Floral Illustration - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-1280x800.jpg" title="Floral Illustration - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-1280x960.jpg" title="Floral Illustration - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-1280x1024.jpg" title="Floral Illustration - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-1400x1050.jpg" title="Floral Illustration - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-1600x1200.jpg" title="Floral Illustration - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-1680x1050.jpg" title="Floral Illustration - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-1680x1200.jpg" title="Floral Illustration - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-1920x1080.jpg" title="Floral Illustration - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-1920x1200.jpg" title="Floral Illustration - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-1920x1440.jpg" title="Floral Illustration - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/cal/aug-23-floral-illustration-cal-2560x1440.jpg" title="Floral Illustration - 2560x1440">2560x1440</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-320x480.jpg" title="Floral Illustration - 320x480">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-640x480.jpg" title="Floral Illustration - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-800x480.jpg" title="Floral Illustration - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-800x600.jpg" title="Floral Illustration - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-1024x768.jpg" title="Floral Illustration - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-1024x1024.jpg" title="Floral Illustration - 1024x1024">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-1152x864.jpg" title="Floral Illustration - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-1280x720.jpg" title="Floral Illustration - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-1280x800.jpg" title="Floral Illustration - 1280x800">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-1280x960.jpg" title="Floral Illustration - 1280x960">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-1280x1024.jpg" title="Floral Illustration - 1280x1024">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-1400x1050.jpg" title="Floral Illustration - 1400x1050">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-1600x1200.jpg" title="Floral Illustration - 1600x1200">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-1680x1050.jpg" title="Floral Illustration - 1680x1050">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-1680x1200.jpg" title="Floral Illustration - 1680x1200">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-1920x1080.jpg" title="Floral Illustration - 1920x1080">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-1920x1200.jpg" title="Floral Illustration - 1920x1200">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-1920x1440.jpg" title="Floral Illustration - 1920x1440">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-23/floral-illustration/nocal/aug-23-floral-illustration-nocal-2560x1440.jpg" title="Floral Illustration - 2560x1440">2560x1440</a></li></ul><h2>Oldies But Goodies</h2><p>Going for a swim, the smell of a summer field, or that sweet feeling of freedom when you’re on vacation — a lot of things have inspired the design community to create a wallpaper for August in the past few years. Here are some <strong>favorites from our wallpapers archives</strong>. Please note that these designs don’t come with a calendar.</p><p></p><h3 id="happiness-happens-in-august">Happiness Happens In August</h3><p>“Many people find August one of the happiest months of the year because of holidays. You can spend days sunbathing, swimming, birdwatching, listening to their joyful chirping, and indulging in sheer summer bliss. August 8th is also known as the Happiness Happens Day, so make it worthwhile.” — Designed by <a href="https://www.popwebdesign.net/index_eng.html">PopArt Studio</a> from Serbia.</p><figure class="break-out"><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c02105d1-3e31-49e7-b909-ddb84982b7e0/aug-17-happiness-happens-in-august-full.png" title="Happiness Happens In August"><img alt="Happiness Happens In August" src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9d979d10-f87f-4935-828a-de2ecd2de311/aug-17-happiness-happens-in-august-preview.png" referrerpolicy="no-referrer"></a></figure><ul><li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9d979d10-f87f-4935-828a-de2ecd2de311/aug-17-happiness-happens-in-august-preview.png" title="Happiness Happens In August - Preview">preview</a></li><li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-320x480.jpg" title="Happiness Happens In August - 320x480">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-640x480.jpg" title="Happiness Happens In August - 640x480">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-800x480.jpg" title="Happiness Happens In August - 800x480">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-800x600.jpg" title="Happiness Happens In August - 800x600">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1024x768.jpg" title="Happiness Happens In August - 1024x768">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1024x1024.jpg" title="Happiness Happens In August - 1024x1024">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1152x864.jpg" title="Happiness Happens In August - 1152x864">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1280x720.jpg" title="Happiness Happens In August - 1280x720">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1280x800.jpg" title="Happiness Happens In August - 1280x800">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1280x960.jpg" title="Happiness Happens In August - 1280x960">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1280x1024.jpg" title="Happiness Happens In August - 1280x1024">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1366x768.jpg" title="Happiness Happens In August - 1366x768">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1400x1050.jpg" title="Happiness Happens In August - 1400x1050">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1440x900.jpg" title="Happiness Happens In August - 1440x900">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1600x1200.jpg" title="Happiness Happens In August - 1600x1200">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1680x1050.jpg" title="Happiness Happens In August - 1680x1050">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1680x1200.jpg" title="Happiness Happens In August - 1680x1200">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1920x1080.jpg" title="Happiness Happens In August - 1920x1080">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1920x1200.jpg" title="Happiness Happens In August - 1920x1200">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-1920x1440.jpg" title="Happiness Happens In August - 1920x1440">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/aug-17/happiness-happens-in-august/nocal/aug-17-happiness-happens-in-august-nocal-2560x1440.jpg" title="Happiness Happens In August - 2560x1440">2560x1440</a></li></ul><p></p><p></p><h3 id="swimming-in-the-summer">Swimming In The Summer</h3><p>“It’s the perfect evening and the water is so warm! Can you feel it? You move your legs just a little bit and you feel the water bubbles dancing around you! It’s just you in there, floating in the clean lake and small sparkly lights shining above you! It’s a wonderful feeling, isn’t it?” — Designed by <a href="https://ko-fi.com/creativepinky">Creative Pinky</a> from the Netherlands.</p><figure class="break-out"><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2023/aug-22-swimming-in-the-summer-full-opt.png" title="Swimming In The Summer"><img alt="Swimming In The Summer" src="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2023/aug-22-swimming-in-the-summer-preview-opt.png" referrerpolicy="no-referrer"></a></figure><ul><li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-august-2023/aug-22-swimming-in-the-summer-preview-opt.png" title="Swimming In The Summer - Preview">preview</a></li><li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/swimming-in-the-summer/nocal/aug-22-swimming-in-the-summer-nocal-320x480.png" title="Swimming In The Summer - 320x480">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/swimming-in-the-summer/nocal/aug-22-swimming-in-the-summer-nocal-640x480.png" title="Swimming In The Summer - 640x480">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/swimming-in-the-summer/nocal/aug-22-swimming-in-the-summer-nocal-800x480.png" title="Swimming In The Summer - 800x480">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/swimming-in-the-summer/nocal/aug-22-swimming-in-the-summer-nocal-800x600.png" title="Swimming In The Summer - 800x600">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/swimming-in-the-summer/nocal/aug-22-swimming-in-the-summer-nocal-1024x768.png" title="Swimming In The Summer - 1024x768">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/swimming-in-the-summer/nocal/aug-22-swimming-in-the-summer-nocal-1152x864.png" title="Swimming In The Summer - 1152x864">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug-22/swimming-in-the-summer/nocal/aug-22-swimming-in-the-summer-nocal-1280x720.png" title="Swimming In The Summer - 1280x720">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/aug ... |
http://localhost:1200/smashingmagazine - Success ✔️<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"
>
<channel>
<title><![CDATA[Smashing Magazine Articles]]></title>
<link>https://www.smashingmagazine.com/articles</link>
<atom:link href="http://localhost:1200/smashingmagazine" rel="self" type="application/rss+xml" />
<description><![CDATA[Latest Articles on Smashingmagazine.com - Made with love by RSSHub(https://github.com/DIYgod/RSSHub)]]></description>
<generator>RSSHub</generator>
<webMaster>i@diygod.me (DIYgod)</webMaster>
<language>en-us</language>
<lastBuildDate>Thu, 10 Aug 2023 16:19:50 GMT</lastBuildDate>
<ttl>5</ttl>
<item>
<title><![CDATA[Running A Page Speed Test: Monitoring vs. Measuring]]></title>
<description><![CDATA[<h1 id="main-heading" class="article-header--title">Running A Page Speed Test: Monitoring vs. Measuring</h1><span id="article__start" class="summary__heading" aria-hidden="true"></span>What does your performance “stack” look like? There are all kinds of tools available for measuring page speed, but what data and assumptions do they use to measure performance? And speaking of <em>measuring</em> performance, there’s quite a difference between that and <em>monitoring</em> performance. Geoff Graham evaluates the data of different tools for measuring page speed performance and looks specifically at DebugBear, a commercial offering, that pulls together the best metrics for not only measuring performance, but monitoring it over time as well.<ul class="meta-box meta-box--article"><li class="meta-box--item meta-box--published">9 min read</li><li class="meta-box--item meta-box--tags"><a href="https://www.smashingmagazine.com/category/tools">Tools</a>,
<a href="https://www.smashingmagazine.com/category/techniques">Techniques</a>,
<a href="https://www.smashingmagazine.com/category/performance">Performance</a>,
<a href="https://www.smashingmagazine.com/category/optimization">Optimization</a></li><li class="meta-box--item meta-box--share">Share on <a rel="nofollow" href="https://twitter.com/intent/tweet?text=Running%20A%20Page%20Speed%20Test%3a%20Monitoring%20vs.%20Measuring&url=https%3A%2F%2Fwww.smashingmagazine.com%2f2023%2f08%2frunning-page-speed-test-monitoring-versus-measuring%2f&via=smashingmag">Twitter</a>, <a rel="nofollow" href="https://data.smashing.services/ball?uri=//www.linkedin.com/shareArticle?url=https://www.smashingmagazine.com%2f2023%2f08%2frunning-page-speed-test-monitoring-versus-measuring%2f&title=Running%20A%20Page%20Speed%20Test%3a%20Monitoring%20vs.%20Measuring">LinkedIn</a></li></ul><p>There is no shortage of ways to measure the <em>speed</em> of a webpage. The tooling to get a report with details from the time it takes to establish a server connection to the time it takes for the full page to render is out there. In fact, there’s great tooling right under the hood of most browsers in DevTools that can do many things that a tried-and-true service like WebPageTest offers, complete with recommendations for improving specific metrics.</p><figure class="break-out article__image"><a href="https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-devtools-lighthouse.png"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="686" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-devtools-lighthouse.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-devtools-lighthouse.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-devtools-lighthouse.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-devtools-lighthouse.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-devtools-lighthouse.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-devtools-lighthouse.png" sizes="100vw" alt="Chrome’s DevTools includes Google Lighthouse features for measuring Web Core Vitals." referrerpolicy="no-referrer"></a><figcaption class="op-vertical-bottom">Lighthouse results. (<a href="https://www.smashingmagazine.com/2023/08/running-page-speed-test-monitoring-versus-measuring/files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-devtools-lighthouse.png">Large preview</a>)</figcaption></figure><p>I don’t know about you, but it often feels like I’m missing something when measuring page speed performance. Even with all of the available tools at my disposal, I still find myself reaching for several of them. Certain tools are designed for certain metrics with certain assumptions that produce certain results. So, what I have is a hodgepodge of reports that needs to be collected, combined, and crunched before I have clear picture of what’s going on.</p><figure class="break-out article__image"><a href="https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-tools-collage.png"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="491" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-tools-collage.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-tools-collage.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-tools-collage.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-tools-collage.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-tools-collage.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-tools-collage.png" sizes="100vw" alt="Collage of open windows with performance results." referrerpolicy="no-referrer"></a><figcaption class="op-vertical-bottom">Not the best way to get a high-level view of performance. (<a href="https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-tools-collage.png">Large preview</a>)</figcaption></figure><p>The folks at <a href="https://www.debugbear.com/?utm_campaign=sm-1">DebugBear</a> understand this situation all too well, and they were kind enough to give me an account to poke around their site speed and core web vitals reporting features. I’ve had time to work with DebugBear and thought I’d give you a peek at it with some notes on my experience using it to monitor performance. If you’re like me, it’s hard to invest in a tool — particularly a paid one — before seeing how it actually works and fits into my work.</p><h2 id="monitoring-vs-measuring">Monitoring vs. Measuring</h2><p>Before we actually log in and look at reports, I think it’s worth getting a little semantic. The key word here is “monitoring” performance. After using DebugBear, I began realizing that what I’ve been doing all along is “measuring” performance. And the difference between “monitoring” and “measuring” is big.</p><p>When I’m <em>measuring</em> performance, I’m only getting a snapshot at a particular time and place. There’s no context about page speed performance before or after that snapshot because it stands alone. Think of it like a single datapoint on a line chart — there are no surrounding points to compare my results to which keeps me asking, <em>Is this a good result or a bad result?</em> That’s the “thing” I’ve been missing in my performance efforts.</p><p>There are ways around that, of course. I could capture that data and feed it into a spreadsheet so that I have a record of performance results over time that can be used to spot where performance is improving and, conversely, where it is failing. That seems like a lot of work, even if it adds value. The other issue is that the data I’m getting back is based on lab simulations where I can add throttling, determine the device that’s used, and the network connection, among other simulated conditions.</p><p>On that note, it’s worth calling out that there are multiple flavors of network throttling. One is powered by Lighthouse, which observes data by testing on a fast connection and <strong>estimates the amount of time it takes to load on different connections</strong>. This is the type of network throttling you will find in PageSpeed Insights, and it is the default method in Lighthouse. <a href="https://www.debugbear.com/blog/simulated-throttling?utm_campaign=sm-1">DebugBear explains this nicely</a> in its blog:</p><blockquote>Simulated throttling provides low variability and makes test quick and cheap to run. However, it can also lead to inaccuracies as Lighthouse doesn't fully replicate all browser features and network behaviors.</blockquote><p>In contrast, tools like DebugBear and WebPageTest use more realistic throttling that accurately reflects network round trips on a higher-latency connection.</p><p><em>Real</em> usage data would be better, of course. And we can get that with <strong>real-user monitoring</strong> (RUM) where a snippet of code on my site collects real data based on from real network conditions coming from real users is sent to a server and parsed for reporting.</p><p>That’s where a tool like DebugBear makes a lot of sense. It <em>measures</em> performance on an automated schedule (no more manual runs, but you can <a href="https://www.debugbear.com/test/website-speed?utm_campaign=sm-1">still do that with their free tool</a>) and <em>monitors</em> the results by keeping an eye on the historical results (no more isolated data points). And in both cases, I know I’m working with high-quality, realistic data.</p><p>From there, DebugBear <em>notifies</em> me when it spots an outlier in the results so I am always in the know.</p><h2 id="the-debugbear-dashboard">The DebugBear Dashboard</h2><p>This is probably what you want to see first, right? All I had to do to set up performance monitoring for a page is provide DebugBear with a URL and data flowed in immediately with subsequent automated tests running on a four-hour basis, which is configurable.</p><p>Once that was in place, DebugBear produced a dashboard of results. And kept doing that over time.</p><figure class="break-out article__image"><a href="https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-dashboard.png"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="601" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-dashboard.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-dashboard.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-dashboard.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-dashboard.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-dashboard.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-dashboard.png" sizes="100vw" alt="DebugBear dashboard of mini-charts." referrerpolicy="no-referrer"></a><figcaption class="op-vertical-bottom">(<a href="https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-dashboard.png">Large preview</a>)</figcaption></figure><p>You can probably look at that screenshot and see the immediate value of this high-level view of page performance. You get big score numbers, mini charts for a variety of web vital metrics, and a filmstrip of the page rendering with annotations identifying where those metrics sit in the process, among other great pieces of information.</p><p>But I’d like to call out a few especially nice affordances that have made my performance efforts easier and, more importantly, more insightful.</p><h2 id="working-with-page-speed-data">Working With Page Speed Data</h2><p>I’ve learned along the way that there are actually multiple kinds of data used to inform testing assumptions.</p><p>One type is called <strong>lab data</strong>. It, in turn, has its own subset of data types. One is <em>observed data</em> where CPU and network throttling conditions are applied to the test environment before opening the page — “applied throttling” as it were. Another is <em>simulated data</em> which describes the Lighthouse method mentioned earlier where tests are done on a high-powered CPU with a highspeed network connection and then estimates how “fast” a page would load on lower-powered devices. Observed data is the high-quality type of lab data used by tools like DebugBear and WebPageTest. Simulated data, on the other hand, might be convenient and fast, but also can be innacurate.</p><p>A second type of data is called <strong>real-user</strong> <strong>data</strong>. This is high-quality data from actual website visitors, for example <a href="https://www.debugbear.com/blog/chrome-user-experience-report?utm_campaign=sm-1">based on</a> <strong>Google’s Chrome User Experience (CrUX) Report</strong>. The report, released in 2017, provides network data from sessions collected from real Chrome users. This is high-quality data, for sure, but it comes with its own set of limitations. For example, the data is limited to Chrome users who are logged into their Google account, so it’s not completely representative of all users. Plus, the data is aggregated over 28 days, which means it may not be not the freshest data.</p><p>Alongside the CrUX report, we also have the <strong>RUM approach</strong> to data that we discussed earlier. It’s another type of real-user monitoring takes real traffic from your site and sends the information over for extremely accurate results.</p><p>So, having both a “real user” score and a “lab” score in DebugBear is sort of like having my cake and eating it.</p><figure class="break-out article__image"><a href="https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-real-lab-scores.png"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="109" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-real-lab-scores.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-real-lab-scores.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-real-lab-scores.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-real-lab-scores.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-real-lab-scores.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-real-lab-scores.png" sizes="100vw" alt="Real user and lab data scores." referrerpolicy="no-referrer"></a><figcaption class="op-vertical-bottom">(<a href="https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-real-lab-scores.png">Large preview</a>)</figcaption></figure><p>This way, I can establish a “baseline” set of conditions for DebugBear to use in my automated reports and view them alongside actual user data while keeping a historical record of the results.</p><h2 id="comparing-tests">Comparing Tests</h2><p>Notice how I can dig into the data by opening up any test at a specific point in time and compare it to other tests at different points in time.</p><figure class="break-out article__image"><a href="https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-compare-pages.png"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="506" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-compare-pages.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-compare-pages.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-compare-pages.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-compare-pages.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-compare-pages.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-compare-pages.png" sizes="100vw" alt="Comparing test results of different pages." referrerpolicy="no-referrer"></a><figcaption class="op-vertical-bottom">(<a href="https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-compare-pages.png">Large preview</a>)</figcaption></figure><p>The fact that I can add any experiment on any page — and as many of them as I need — is just plain awesome. It’s especially great for our team here at Smashing Magazine because different articles use different assets that affect performance, and the ability to compare the same article at different points in time or compare it to other pages is incredibly helpful to see exactly what is weighing down a specific page.</p><p>DebugBear’s comparison feature goes beyond mini charts by providing larger charts that evaluate more things than I can possibly print for you here.</p><figure class="break-out article__image"><a href="https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-large-chart.png"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="528" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-large-chart.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-large-chart.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-large-chart.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-large-chart.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-large-chart.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-large-chart.png" sizes="100vw" alt="Detailed line chart with a dropdown of metric options." referrerpolicy="no-referrer"></a><figcaption class="op-vertical-bottom">(<a href="https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-large-chart.png">Large preview</a>)</figcaption></figure><h2 id="running-page-test-experiments">Running Page Test Experiments</h2><p>Sometimes I have an idea to optimize page speed but find I need to deploy the changes to production first so that a reporting tool can re-evaluate the page for me to compare the results. It would be a lot cooler to know whether those changes are effective <em>before</em> hitting production.</p><p>That’s what you can do with DebugBear’s Experiments feature — tweak the code of the page being measured and run a test you can compare to other live results.</p><figure class="break-out article__image"><a href="https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-test-changes.png"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="667" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-test-changes.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-test-changes.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-test-changes.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-test-changes.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-test-changes.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-test-changes.png" sizes="100vw" alt="“Prettify Code” option" referrerpolicy="no-referrer"></a><figcaption class="op-vertical-bottom">See the “Prettify Code” option? 😍(<a href="https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-test-changes.png">Large preview</a>)</figcaption></figure><p>This is the kind of thing I would definitely expect from a paid service. It really differentiates DebugBear from something like a standard Lighthouse report, giving me more control as well as tools to help me gain deeper insights into my work.</p><h2 id="everything-in-one-place">Everything In One Place</h2><p>Having all of my reports in a central one-stop shop is worth the price of admission alone. I can’t stand the clutter of having multiple windows open to get the information I need. With DebugBear, I have everything that a mish-mash of DevTools, WebPageTest, and other tools provides, but in one interface that is as clean as it gets. There’s no hunting around trying to remember which window has my <abbr title="Time to First Byte">TTFB</abbr> score for one experiment or which has the filmstrip of another experiment I need.</p><p>But what you might not expect is a set of actionable recommendations to improve page speed performance right within reach.</p><figure class="break-out article__image"><a href="https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-recs.png"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="699" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-recs.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-recs.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-recs.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-recs.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-recs.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-recs.png" sizes="100vw" alt="Filmstrip and video of page rendering." referrerpolicy="no-referrer"></a><figcaption class="op-vertical-bottom">(<a href="https://files.smashing.media/articles/running-page-speed-test-monitoring-versus-measuring/debug-recs.png">Large preview</a>)</figcaption></figure><p>Let me be clear that I am no performance expert. There are plenty of situations where I don’t know what I don’t know, and performance is one of them. Performance can easily be a profession and full-time job by itself, just as design, accessibility, and other specializations. So, having a list of things I can do to improve performance is incredibly helpful for me. It’s like having a performance consultant in the room giving me directions.</p><h2 id="wrapping-up">Wrapping Up</h2><p>Again, this is merely a peek at some of the things that DebugBear can do and what I enjoy about it. The fact is that it does <em>so many things</em> that I’ve either glossed over or simply lack the space to show you.</p><p>The best thing you can do is <a href="https://www.debugbear.com/signup?utm_campaign=sm-1">create a free DebugBear account</a> and play around with it yourself. Seriously, there’s no credit card required. You set up a username and password, then it’s off to the races.</p><p>And when (not if!) you get your account, I’d love to know what stands out to you. Performance means a lot of things to different people and we all have our ways of approaching it. I’m keen to know how you would use a suite of features like this in your own work.</p>]]></description>
<pubDate>Wed, 09 Aug 2023 16:00:00 GMT</pubDate>
<guid isPermaLink="false">https://www.smashingmagazine.com/2023/08/running-page-speed-test-monitoring-versus-measuring/</guid>
<link>https://www.smashingmagazine.com/2023/08/running-page-speed-test-monitoring-versus-measuring/</link>
<author><![CDATA[Geoff Graham]]></author>
<category>Tools</category>
<category>Techniques</category>
<category>Performance</category>
<category>Optimization</category>
</item>
<item>
<title><![CDATA[Using Friction As A Feature In Machine Learning Algorithms]]></title>
<description><![CDATA[<h1 id="main-heading" class="article-header--title">Using Friction As A Feature In Machine Learning Algorithms</h1><span id="article__start" class="summary__heading" aria-hidden="true"></span>Friction often has a negative connotation in user experience design, but it actually has many benefits. Its best-known use case is mitigating unintended consequences in high-risk scenarios, yet it has a new place in the age of artificial intelligence. Adding strategic friction to interfaces can lead to profound efficiency gains in machine learning algorithms. This makes learning to leverage it a priority for any applications hoping to remain competitive.<ul class="meta-box meta-box--article"><li class="meta-box--item meta-box--published">18 min read</li><li class="meta-box--item meta-box--tags"><a href="https://www.smashingmagazine.com/category/ai">AI</a>,
<a href="https://www.smashingmagazine.com/category/ux">UX</a>,
<a href="https://www.smashingmagazine.com/category/design">Design</a>,
<a href="https://www.smashingmagazine.com/category/machine-learning">Machine Learning</a></li><li class="meta-box--item meta-box--share">Share on <a rel="nofollow" href="https://twitter.com/intent/tweet?text=Using%20Friction%20As%20A%20Feature%20In%20Machine%20Learning%20Algorithms&url=https%3A%2F%2Fwww.smashingmagazine.com%2f2023%2f08%2ffriction-feature-machine-learning-algorithms%2f&via=smashingmag">Twitter</a>, <a rel="nofollow" href="https://data.smashing.services/ball?uri=//www.linkedin.com/shareArticle?url=https://www.smashingmagazine.com%2f2023%2f08%2ffriction-feature-machine-learning-algorithms%2f&title=Using%20Friction%20As%20A%20Feature%20In%20Machine%20Learning%20Algorithms">LinkedIn</a></li></ul><p>A common assumption in user experience design is less friction makes apps more delightful. But in practice, the happy path isn’t always the smoothest. The term “friction” in the digital sense usually refers to anything that makes experiences cumbersome. It’s an analogy to the physical resistance that occurs when objects interact. Digital friction comes in many forms, from frustrating flows to confusing copy. But plenty of scenarios actually benefit with a bit of resistance. Its killer feature is <strong>mitigating unintended consequences</strong>, such as an accidental <a href="https://www.theverge.com/2017/1/7/14200210/amazon-alexa-tech-news-anchor-order-dollhouse">Alexa shopping spree</a>.</p><p>You’ve likely already encountered intentional friction many times. Most apps leverage it for destructive actions, account security, and error handling, as recommended by experts from <a href="https://www.nngroup.com/videos/friction-flow-customer-journeys/">Norman Nielsen Group</a> to the magazine <a href="https://www.smashingmagazine.com/2018/01/friction-ux-design-tool/">you’re currently reading</a>.</p><p>Yet friction has found a new calling in the age of artificial intelligence. When implemented correctly, it can improve the efficiency of AI systems such as machine learning algorithms. These algorithms are often used to personalize experiences through predictive recommendations. Some applications incorporating these algorithms realize that adding a bit of friction to their interface can turn each user interaction into an opportunity to improve algorithmic quality.</p><p>While less friction makes an app smoother, a bit more may make it even smarter.</p><figure><a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/1-friction-present-examples.png"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="600" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/1-friction-present-examples.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/1-friction-present-examples.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/1-friction-present-examples.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/1-friction-present-examples.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/1-friction-present-examples.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/1-friction-present-examples.png" sizes="100vw" alt="Various examples of dialogs in popular apps that display before important actions are taken. They include headlines such as “abusive website ahead” or “notify 11 people across 3 time zones?” with additional information explaining the consequences of an action and a button that allows a user to confirm before proceeding" referrerpolicy="no-referrer"></a><figcaption class="op-vertical-bottom">Various examples of the friction in popular apps. (Sources: Discord, MacOS, MailChimp, Slack, Airbnb, GitHub, Lyft, and Venmo) (<a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/1-friction-present-examples.png">Large preview</a>)</figcaption></figure><h2 id="friction-as-a-feature">Friction As A Feature</h2><p>Before venturing down the AI rabbit hole, let’s explore some simple examples showcasing the basic benefits of friction in UX. These are a helpful foundation to build off as we ascend into more complex applications for machine learning algorithms. Regardless of your familiarity, this will ground the following lessons in first principles.</p><h3 id="preventing-unintended-consequences">Preventing Unintended Consequences</h3><p>A common use for friction is error prevention, the fifth entry in <a href="https://www.nngroup.com/articles/ten-usability-heuristics/">Jakob Nielsen’s list of usability heuristics</a>. In scenarios with the potential for high-cost errors, such as irreversible deletion, apps often request confirmation before executing requests. Confirmations often display in a modal, locking the rest of the screen to increase focus on copy explaining an action’s implications. This extra step provides some extra time to consider these ramifications.</p><blockquote>“By forcing us to slow down and think at this exact moment, we’re kept from making potentially disastrous decisions by accident.”<br><br>— Archana Madhavan in Amplitude’s “<a href="https://amplitude.com/blog/onboarding-ikea-effect-retention/">Onboarding With The IKEA Effect: How To Use UX Friction To Build Retention</a>”</blockquote><p>Sometimes more resistance is present when the consequences can be catastrophic. For instance, a confirmation may involve cognitive work such as typing “DELETE” to submit a deletion request. This level of resistance makes sense when considering the humbling fact of life from Steve Krug’s classic UX book <a href="https://sensible.com/dont-make-me-think/"><em>Don’t Make Me Think</em></a>, which states, “We don’t read pages. We scan them.” This makes it easy to imagine how a streamlined design can make it too easy to overlook the consequences of a click.</p><figure><a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/2-friction-delete-modal.png"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="600" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/2-friction-delete-modal.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/2-friction-delete-modal.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/2-friction-delete-modal.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/2-friction-delete-modal.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/2-friction-delete-modal.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/2-friction-delete-modal.png" sizes="100vw" alt="A generic delete modal example that requires a user to type the phrase “delete account” into an input field to confirm their deletion request" referrerpolicy="no-referrer"></a><figcaption class="op-vertical-bottom">A delete modal that requires cognitive effort to minimize accidents. (Image source: <a href="https://uxpsychology.substack.com/p/how-to-design-better-destructive">UX Psychology</a>) (<a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/2-friction-delete-modal.png">Large preview</a>)</figcaption></figure><p>While these tactics may look <a href="https://www.designernews.co/stories/84443-redditors-design-worst-volume-sliders-possible">comically cumbersome</a>, they mitigate devastating downsides. This use of friction is like a train’s brakes screeching to a halt right in time to avoid a collision — everyone breathes a sigh of relief, crisis averted. This also outlines the basic framework for understanding when to add friction. It boils down to a <strong>cost-benefit analysis</strong>: do the rewards of streamlining outweigh the risk? If not, slow it down. Now let’s move on from a black & white example to venture into a grayer area.</p><h3 id="nudging-toward-healthy-behavior">Nudging Toward Healthy Behavior</h3><p>Some problems aren’t classifiable as errors but still aren’t in anyone’s best interest. Trying to solve them becomes wicked because there is no right or wrong solution. Yet that doesn’t make failing to address them any less of an existential risk. Consider social media’s medley of knee-jerk, tribalistic behavior. It has led many to question the value of these apps altogether, which isn’t good for business, or society at large. In an attempt to encourage more thoughtful discourse, these platforms turn to friction.</p><figure><a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/3-friction-twitter-nudge.png"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="600" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/3-friction-twitter-nudge.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/3-friction-twitter-nudge.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/3-friction-twitter-nudge.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/3-friction-twitter-nudge.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/3-friction-twitter-nudge.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/3-friction-twitter-nudge.png" sizes="100vw" alt="A prompt displays when a user attempts to retweet an article. The headline reads, “Headlines don’t tell the full story,” and the subheadline reads, “You can read the article on Twitter before Retweeting”. Available actions include an article card that can be clicked to read the article as well as buttons to “Retweet” & “Quote Tweet”" referrerpolicy="no-referrer"></a><figcaption class="op-vertical-bottom">A Twitter prompt nudges users to read an article before retweeting it. (Image source: <a href="https://twitter.com/TwitterComms/status/1309178718456221696">Twitter</a>) (<a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/3-friction-twitter-nudge.png">Large preview</a>)</figcaption></figure><p>Twitter explored <a href="https://www.theverge.com/2020/9/25/21455635/twitter-read-before-you-tweet-article-prompt-rolling-out-globally-soon">adding an extra step</a> that asks people to read articles before retweeting them. This nudge aims to craft a more trustworthy experience for everyone by slowing the spread of misinformation. According to their reporting, people shown the prompt opened articles 40% more often, and some decided not to retweet it after all. They built on this success by showing a warning before users post <a href="https://twitter.com/TwitterSupport/status/1257717113705414658">messages which include harmful language</a>.</p><p>Instagram also implemented a similar feature in its fight against online bullying. Adam Mosseri, the Head of Instagram, <a href="https://about.instagram.com/blog/announcements/instagrams-commitment-to-lead-fight-against-online-bullying">published a blog post</a> stating that this “intervention gives people a chance to reflect.” Although specific data isn’t provided, they suggest it had <a href="https://www.theverge.com/2019/12/16/21024051/instagram-captions-potentially-offensive-ai-moderation-bullying-edit">promising results</a> in cultivating a more humane experience for their communities.</p><p>These examples show how faster is not always better. Sometimes we need restraint from saying things we don’t mean or sharing things that we don’t understand. Friction helps algorithms in a similar manner. Sometimes they also need more information about us so they don’t recommend things we won’t appreciate.</p><h3 id="understanding-preferences-objectives">Understanding Preferences & Objectives</h3><p>Let’s shift focus to AI with a simple example of how friction plays a role in machine learning algorithms. You’ve probably signed up for an app that begins by asking you a bunch of questions about your interests. Behind the scenes, an algorithm uses these answers to personalize your experience. These onboarding flows have become so common over the past decade that you may have forgotten a time before apps were smart enough to get to know you.</p><figure><a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/4-friction-twitter-onboarding.png"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="600" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/4-friction-twitter-onboarding.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/4-friction-twitter-onboarding.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/4-friction-twitter-onboarding.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/4-friction-twitter-onboarding.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/4-friction-twitter-onboarding.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/4-friction-twitter-onboarding.png" sizes="100vw" alt="A screen from Twitter’s 2014 onboarding flow with a headline that reads “What are you interested in?” & a subheadline that reads “Choose one or more of the options below, and we’ll suggest some good stuff for you”. Below this text is a list of checkboxes that correspond to categories of content featured on Twitter" referrerpolicy="no-referrer"></a><figcaption class="op-vertical-bottom">Twitter’s onboarding flow in 2014. (Image source: <a href="https://www.useronboard.com/how-twitter-onboards-new-users/?slide=36">useronboard.com</a>) (<a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/4-friction-twitter-onboarding.png">Large preview</a>)</figcaption></figure><p>You may have never even questioned why you must go through a preference capture flow before getting to explore content. The value is obvious because no one wants the quickest path to something irrelevant. Many apps are simply in the business of making relevant connections, and these personalization tactics have been one of the best ways to do so. A <a href="https://www.mckinsey.com/industries/retail/our-insights/how-retailers-can-keep-up-with-consumers">McKinsey report</a> illuminates this further by reporting that “35 percent of what consumers purchase on Amazon and 75 percent of what they watch on Netflix come from product recommendations based on such algorithms.”</p><blockquote>“The top two reasons that customers churn are 1) they don’t understand your product, and 2) they don’t obtain any value from it. Customer onboarding can solve both of these issues.”<br><br>— Christina Perricone in HubSpot’s “<a href="https://blog.hubspot.com/service/customer-onboarding">The Ultimate Guide to Customer Onboarding</a>”</blockquote><p>Perhaps these onboarding flows are so familiar that they don’t feel like friction. They may seem like necessary steps to unlock an app’s value. However, that perspective quickly changes for anyone designing one of these flows. The inherent tension lies in attempting to balance the diametrically opposite needs of two parties. On the one hand, an algorithm provides better output relative to its input (although asymptotes exist). <strong>Success is a function of maximizing data collection touchpoints</strong>, but this tends to result in more steps with more complex questions.</p><p>In short, the quicker an app makes a recommendation, the more likely it will be wrong. On the other hand, an extremely long onboarding flow is unlikely to make an amazing first impression on new users. I had the pleasure of walking this tightrope when designing the onboarding flow at Headliner. Each new step we added always felt like it would be the straw that broke the camel’s back. We nervously monitored our activation reports for signs we went too far but surprisingly saw no meaningful dropoff. Yet, even a slight decrease would easily be worth the improved retention that personalization yielded.</p><figure class="video-embed-container break-out"><div class="video-embed-container--wrapper"><lite-vimeo videoid="851570073" videotitle="Headliner’s new user onboarding flow. (Source: <a href='https://www.headliner.app'>headliner.app</a>)"></lite-vimeo></div><figcaption>Headliner’s new user onboarding flow. (Source: <a href="https://www.headliner.app/">headliner.app</a>)</figcaption></figure><p>The Product Design Manager at Stitch Fix, Deanna Alcorn, documented their process of <a href="https://multithreaded.stitchfix.com/blog/2016/11/30/us-design-capture-style-preferences-during-sign-up/">working through this</a>. The tension is clearly illustrated when she asks the question, “How do we get customers to evaluate as many images as possible while keeping it fun and fast?”. While their case study is a great reference, the right solution will be different for every app. Your onboarding flow should follow the needs of your algorithm while balancing the needs of your users.</p><p>With that said, there is one app that is legendary for its rapid personalization, and surprisingly, it doesn’t have any onboarding flow at all.</p><h2 id="giving-an-algorithm-glasses">Giving An Algorithm Glasses</h2><p>TikTok’s personalization is so good that the New York Times compares it to <a href="https://www.nytimes.com/2021/12/05/business/media/tiktok-algorithm.html">mind reading</a>. But after signing up for their service, you can just start browsing! In stark contrast, Instagram has multiple onboarding steps without the same algorithmic reputation. How can TikTok have such an advantage if it doesn’t even ask you what you want to see?</p><figure><a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/6-friction-insta-onboarding.png"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="600" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/6-friction-insta-onboarding.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/6-friction-insta-onboarding.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/6-friction-insta-onboarding.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/6-friction-insta-onboarding.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/6-friction-insta-onboarding.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/6-friction-insta-onboarding.png" sizes="100vw" alt=" A sequence of screens sampled from Instagram’s onboarding flow. The first screen has a headline that reads, “Next, you’ll be able to sync your contacts to find your friends,” with a “continue” button and a smaller “skip” button. The second screen reads “Get Facebook suggestions” with a “continue” button and a smaller “skip” button. The third screen reads “Discover people” above a list of popular users that can be followed" referrerpolicy="no-referrer"></a><figcaption class="op-vertical-bottom">Instagram’s numerous onboarding screens collect information to improve their algorithmic recommendations. (Image source: <a href="https://instagram.com/">Instagram</a>) (<a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/6-friction-insta-onboarding.png">Large preview</a>)</figcaption></figure><p>This is thanks to some clever interface innovations. TikTok’s design turns user engagement into clear signals they use to tweak their algorithms. Content recommendation quality is a direct function of this, which some refer to as an <a href="https://www.eugenewei.com/blog/2020/9/18/seeing-like-an-algorithm">algorithm’s vision</a>.</p><blockquote class="pull-quote"><p><a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aOptimizing%20an%20app%e2%80%99s%20key%20interactions%20to%20understand%20implicit%20signals%20makes%20an%20explicit%20means%20of%20capturing%20preferences%20unnecessary.%0a&url=https://smashingmagazine.com%2f2023%2f08%2ffriction-feature-machine-learning-algorithms%2f">Optimizing an app’s key interactions to understand implicit signals makes an explicit means of capturing preferences unnecessary.</a></p><div class="pull-quote__quotation"><div class="pull-quote__bg"><span class="pull-quote__symbol">“</span></div></div></blockquote><h3 id="engagement-signals">Engagement Signals</h3><p>Every interaction is an opportunity to improve understanding through bidirectional feedback. An interface should provide system feedback to the user engaging with it while also reporting to the system how performance meets user expectations. Everything from button taps to the absence of action can become a signal. Interfaces that successfully incorporate this are referred to as <a href="https://medium.com/user-experience-design-1/designing-algorithm-friendly-interfaces-84da3ed076a9">algorithm-friendly</a>.</p><figure><a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/7-friction-signals.jpeg"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="600" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/7-friction-signals.jpeg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/7-friction-signals.jpeg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/7-friction-signals.jpeg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/7-friction-signals.jpeg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/7-friction-signals.jpeg 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/7-friction-signals.jpeg" sizes="100vw" alt="A diagram illustrated by Maximillian Piras displays a feedback loop: “user engagement” → “signals” → “data collection” → “model training” → “content filtering” → “personalization” → back to “user engagement” in a continuous loop" referrerpolicy="no-referrer"></a><figcaption class="op-vertical-bottom">A feedback loop in an algorithm-friendly interface. (Image source: <a href="https://www.maximillian.nyc/">Maximillian Piras</a>) (<a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/7-friction-signals.jpeg">Large preview</a>)</figcaption></figure><p>A study by <a href="https://machinelearning.apple.com/research/leveraging-user-engagement-signals-for-entity-labeling-in-virtual-assistant">Apple’s Machine Learning Research Department</a> details their success in leveraging engagement signals, which they believe “provide strong indications of a user’s true intent,” to efficiently train a machine learning model through a process called <a href="https://en.wikipedia.org/wiki/Reinforcement_learning_from_human_feedback">Reinforcement Learning from Human Feedback</a>. Their results documented “significant accuracy gains in a production deep learning system,” meaning that an interface designed well enough to analyze naturally occurring user behavior is all that is needed to create personalization that feels like mind reading.</p><p>Instagram actually <a href="https://www.instagram.com/p/Cs6gh_NgPF0/">employs this strategy</a> as well, although its approach is a bit less cohesive since they seem to be in a perpetual <a href="https://www.inc.com/jason-aten/instagram-is-walking-back-its-controversial-changes-its-an-important-reminder-that-failure-isnt-your-enemy.html">state of transition</a>.</p><h3 id="tiktokification">TikTokification</h3><p>But what exactly makes an interface algorithm-friendly? In TikTok’s case, it was the design decision to only show one video at a time. That’s right, friction! By decreasing the information density in the viewport at any given time, they increased their understanding of a user’s focus. This localizes interactions (or lack thereof) to specific content as quality measures.</p><p>Gustav Söderström, the Co-President, CPO & CTO at Spotify <a href="https://www.theverge.com/23638082/spotify-redesign-gustav-soderstrom-tiktok-stream-podcasts-music-discovery">has referred</a> to this approach as “giving the algorithm glasses.” Compare this to the medley of distractions in other feeds, and it’s easy to imagine which one is better at collecting data.</p><blockquote class="pull-quote"><p><a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aUsing%20friction%20as%20a%20tool%20allows%20designers%20to%20craft%20an%20interface%20that%20separates%20engagement%20signals%20from%20noise.%0a&url=https://smashingmagazine.com%2f2023%2f08%2ffriction-feature-machine-learning-algorithms%2f">Using friction as a tool allows designers to craft an interface that separates engagement signals from noise.</a></p><div class="pull-quote__quotation"><div class="pull-quote__bg"><span class="pull-quote__symbol">“</span></div></div></blockquote><figure><a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/8-friction-tiktok.gif"><img src="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/8-friction-tiktok.gif" width="800" height="600" alt="An animation by Maximillian Piras displays an “algorithm vision” comparison of TikTok’s feed with Instagram’s. TikTok provides cleaner signals since only one piece of content remains in the viewport at a time." referrerpolicy="no-referrer"></a><figcaption>Algorithmic visibility comparison of TikTok & Instagram’s home feeds. (Source: <a href="https://www.maximillian.nyc/">Maximillian Piras</a>) (<a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/8-friction-tiktok.gif">Large preview</a>)</figcaption></figure><p>As we return to my aforementioned framework for evaluating when to add friction, we can understand how it makes sense in this scenario. While each interaction may take slightly longer, relevant content can be found quicker. The trade-off makes sense since relevance sits atop a user’s hierarchy of needs.</p><p>Additionally, if you were to measure friction over a longer time horizon, you likely would find an <strong>experience with better personalization feels more frictionless</strong>. This is because the efficiency in helping users find what they’re looking for would consistently compound (although, again, asymptotes exist). So each subsequent visit theoretically requires less work on the user’s part, which makes the alternate approach look like the cumbersome one.</p><blockquote>“The secret of why some of these products are so good at recommendations is not actually that they have better algorithms. It’s the same algorithms with a more efficient user interface.”<br><br>— Gustav Söderström in The Verge’s “<a href="https://www.theverge.com/23638082/spotify-redesign-gustav-soderstrom-tiktok-stream-podcasts-music-discovery">Why Spotify wants to look like TikTok</a>”</blockquote><p>While TikTok popularized this interface, anybody who was single in the last decade may notice a similarity to dating apps. Using directional gestures as engagement signals dates back to the swipeable card paradigm Tinder <a href="https://www.wired.com/2016/09/history-of-tinder-right-swipe/">introduced in 2012</a>. They, too, limited the viewport to one result at a time and used actions to inform subsequent recommendations. But TikTok took it mainstream since not everyone needs a dating app, and those who do will churn once they’ve met someone.</p><p>The results of using this paradigm in everyday entertainment led many platforms to copy it in hopes of the same algorithmic gains. The latest to embark on this journey is Spotify, much to <a href="https://mashable.com/article/spotify-tiktok-video-feed-internet-reactions">the chagrin of their users</a>. In fact, this decision even landed it on Mashable’s list of <a href="https://mashable.com/article/worst-app-updates-2023">worst app updates in 2023</a>. But Söderström says they don’t have a choice, and he believes in the long run, the signal clarity will make up for any interim backlash because of how much quicker it can learn user preferences. Critics fail to realize how important these changes are for Spotify’s future.</p><blockquote class="pull-quote"><p><a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aIn%20the%20machine%20learning%20age,%20apps%20with%20inefficient%20interfaces%20for%20signal%20analysis%20risk%20becoming%20uncompetitive.%0a&url=https://smashingmagazine.com%2f2023%2f08%2ffriction-feature-machine-learning-algorithms%2f">In the machine learning age, apps with inefficient interfaces for signal analysis risk becoming uncompetitive.</a></p><div class="pull-quote__quotation"><div class="pull-quote__bg"><span class="pull-quote__symbol">“</span></div></div></blockquote><figure><a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/9-friction-spotify.gif"><img src="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/9-friction-spotify.gif" width="800" height="600" alt="An animation by Maximillian Piras displays an “algorithm vision” comparison of Spotify’s old & new home feed designs within their mobile app. Their new home feed provides cleaner signals since only one piece of content remains in the viewport at a time." referrerpolicy="no-referrer"></a><figcaption>Algorithmic visibility comparison of Spotify’s old & new home feeds. (Source: <a href="https://www.maximillian.nyc/">Maximillian Piras</a>) (<a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/9-friction-spotify.gif">Large preview</a>)</figcaption></figure><h3 id="making-lemonade">Making Lemonade</h3><p>The reason this approach is so powerful is due to the compounding nature of good data. Optimizing signals for any individual user creates a data network effect that benefits everyone else. It even turns negatives into positives! An individual bad experience can mitigate others from encountering the same, making the system <a href="https://en.wikipedia.org/wiki/Antifragility">antifragile</a>.</p><p>This approach dates back to 2003 with the introduction of Amazon’s <a href="https://www.cs.umd.edu/~samir/498/Amazon-Recommendations.pdf">item-to-item collaborative filtering</a>. You may know it as “customers who viewed this also viewed this.”</p><figure><a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/10-friction-itemtoitem-collaborative-filtering.jpg"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="600" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/10-friction-itemtoitem-collaborative-filtering.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/10-friction-itemtoitem-collaborative-filtering.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/10-friction-itemtoitem-collaborative-filtering.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/10-friction-itemtoitem-collaborative-filtering.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/10-friction-itemtoitem-collaborative-filtering.jpg 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/10-friction-itemtoitem-collaborative-filtering.jpg" sizes="100vw" alt="An illustration by Maximillian Piras displays an icon of a user that is connected to three icons representing media files. Each of these media files is then connected to many more media files, which then are recursively linked to many others. This linking of media files continues until the icons are cropped by the edge of the canvas" referrerpolicy="no-referrer"></a><figcaption class="op-vertical-bottom">Item-to-item collaborative filtering. (Image source: <a href="https://www.maximillian.nyc/">Maximillian Piras</a>) (<a href="https://files.smashing.media/articles/friction-feature-machine-learning-algorithms/10-friction-itemtoitem-collaborative-filtering.jpg">Large preview</a>)</figcaption></figure><p>This type of filtering p |
* initial commit * feat(route): add Smashing magazine * docs * docs update * add full article * fix docs * docs: spoiler ---------
* initial commit * feat(route): add Smashing magazine * docs * docs update * add full article * fix docs * docs: spoiler ---------
* style: auto format * fix(route): baozimh selector (#12790) * feat(route): add 长江大学动物科学学院 (#12795) * style: auto format * fix: 适配网信办页面更新 (#12792) * fix(route): 财新最新文章标题获取兼容火线评论 (#12798) * feat(route): add 火线 (#12784) * feat(route): add 火线 * fix pr * fix pr again * fix pr again and again. * fix(route): 更新联合早报时间获取方法 (#12789) * Update util.js * Update util.js * Update util.js * Update util.js * Update util.js * refactor: use cache.tryGet * Update util.js * Update util.js * Update util.js * fix: zaobao content order fix #10309 --------- Co-authored-by: TonyRL <TonyRL@users.noreply.github.com> * feat(router): add 东华大学学术信息 (#12791) * 增加学术信息 * 代码优化 * 测试性提交 * POST API * POST API * Update lib/v2/dhu/news/xsxx.js * Update lib/v2/dhu/radar.js --------- * style: auto format * fix(route): wxkol link (#12799) * fix(route): wxkol link * fix(core): fix wechat-mp date parsing `var ct = "timestamp"` can appear after `var ct=function()` * fix(route/bilibili): fix liveSearch (#12772) * fix(route/bilibili):fix liveSearch * style: auto format * Update liveSearch.js fix order not deliver to param remove qv_id remove fixed UA --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * fix(route): NMPA get accurate pubdate (#12801) * Update generic.js * Update index.js * fix: nmpa ditch puppeteer --------- * feat(add): SecIN信息安全社区 (#12800) * feat(add): SecIN信息安全社区 * fix lib/v2/sec-in/index.js * fix lib/v2/sec-in/radar.js --------- * fix(route/bilibili): user/followings & user/followers now require login (#12802) * Update router.js change followers/followings params * Update followers.js add login for followers * Update followings.js add login for followings * Update social-media.md update bilibili/followers bilibili/followings docs * Update followers.js Using camelCase. Adding Document link. Cookie check before declaring `uid `. * Update followings.js Using camelCase. Adding Document link. Cookie check before declaring `uid `. * Update maintainer.js * Update README.md Add docs for bilibili/user/followings & bilibili/user/followers * Update router.js Using camelCase * Update social-media.md * style: auto format * Update social-media.md --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * fix(route): copymanga with rate limit and cache (#12805) * feat(route): add 国家广播电视总局电视剧政务平台 (#12804) * feat(route): add 国家广播电视总局电视剧政务平台 * fix: set pool limit to 5 * refactor: remove direct dependent on xml2js (#12817) * fix(route): javdb (#12818) * fix(route): 2048 redirect (#12820) * fix(route): AP News获取方式调整 (#12812) * Resort to DOM parsing. * Update topics.js * Update topics.js * Remove unused code. * Fix cache error. * Remove "Other News". * Update lib/v2/apnews/topics.js --------- * chore(deps): bump pinyin-pro from 3.15.4 to 3.16.0 in /docs (#12825) Bumps [pinyin-pro](https://github.com/zh-lx/pinyin-pro) from 3.15.4 to 3.16.0. - [Release notes](https://github.com/zh-lx/pinyin-pro/releases) - [Changelog](https://github.com/zh-lx/pinyin-pro/blob/main/CHANGELOG.md) - [Commits](https://github.com/zh-lx/pinyin-pro/compare/3.15.4...3.16.0) --- updated-dependencies: - dependency-name: pinyin-pro dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * feat(route): add SecWiki-安全维基 (#12816) * feat(route): add SecWiki-安全维基 * fix pr * fix(route): duplicate entries in the Blizzard feed (#12828) * fix(route): duplicate entries in the Blizzard feed * refactor: migrate to v2 --------- * fix(route): shu 上海大学 (#12803) * fix(route): shu 上海大学 * Optimize code and update documentation - shu/index.js & shu/jwc.js - use @/utils/parse-date to parse date - change "item.description" from text to HTML - change "url.resolve" (deprecated) to "new URL" - change the way of mapping "ctx.params.type" to link - now it accepts more route types - university.md - update doc for new types - router.js - add an alias because the website changed its host * Update lib/routes/universities/shu/index.js * Update lib/routes/universities/shu/jwc.js * Update docs/university.md * refactor: migrate to v2 --------- * fix(route): 星岛日报链接获取方式调整,以去除重复项目 (#12830) * feat(route): add NPR (#12827) * feat(route): add NPR * fix(route/npr): docs * fix(route/npr): remove duplicate images * fix(route/npr): ignore item until audio is available * fix(route/npr): remove duplicate captions * fix(route/npr): caption * fix(route/npr): handle multiple audios * style: auto format * feat(route): add dhu/yjs/news 东华大学研究生院通知 (#12831) * add yjs-news * add yjs news * Update news.js * Update lib/v2/dhu/yjs/news.js * feat: add radar --------- * style: auto format * chore: update deps (#12833) * style: auto format * feat(route): add 纪妖 (#12824) * feat(route): add 纪妖 * fix: use wordpress restapi * update lib/v2/cbaigui/index.js --------- * style: auto format * fix(route): AP News时区调整 (#12842) * feat(route): add 爱思想专题 (#12845) * chore: bring back lint-staged (#12844) * chore: bring back lint-staged * fix: gha label * fix: yml format * fix(route): qidian chapter (#12850) * fix(route): qidian chapter * fix: chapter and forum author refs: https://github.com/DIYgod/RSSHub/pull/414 https://github.com/DIYgod/RSSHub/pull/501 https://github.com/DIYgod/RSSHub/pull/732 * fix(route): agefans (#12851) * feat(route): add V2rayShare (#12843) * add V2rayShare * style: auto format * add V2rayShare * style: auto format * Update docs/other.md * Update lib/v2/v2rayshare/maintainer.js * Update index.js * style: auto format * Update lib/v2/v2rayshare/index.js --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * chore(deps): bump fluxninja/openai-pr-reviewer from 0 to 1 (#12852) * chore(deps): bump fluxninja/openai-pr-reviewer from 0 to 1 Bumps [fluxninja/openai-pr-reviewer](https://github.com/fluxninja/openai-pr-reviewer) from 0 to 1. - [Release notes](https://github.com/fluxninja/openai-pr-reviewer/releases) - [Commits](https://github.com/fluxninja/openai-pr-reviewer/compare/v0...v1) --- updated-dependencies: - dependency-name: fluxninja/openai-pr-reviewer dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> * fix: don't relabel for `dependabot[bot]` --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix: twitter keyword * feat(route): 支持上海市文旅局审批公告 (#12862) * feat(route): 支持上海市文旅局审批公告 * fix(route): wgj * fix(route): currentUrl * fix(route): search params * feat: increase the timeout time for the fulltext_mode test * feat: support reverse proxy * style: auto format * fix: typo * test: fix empty request error * feat: bypass reverse proxy for requests with cookies * test: fix empty request error and remove node 16 support * fix: reverse proxy fails for some requests * feat: exclude some requests for reverse proxy * feat: expand the scope of retries and set proxy strategy * fix: logger.debug * fix(route/twitter): mixed media incomplete (#12863) * fix(route/twitter): media t.co links not purged (#12864) * fix(route): bloomberg api 404 error (#12834) * fix bloomberg api 404 error * fix(route): AP News时区调整 (#12842) * feat(route): add 爱思想专题 (#12845) * chore: bring back lint-staged (#12844) * chore: bring back lint-staged * fix: gha label * fix: yml format * newsletter ok * forget to remove debug * fix(route): qidian chapter (#12850) * fix(route): qidian chapter * fix: chapter and forum author refs: https://github.com/DIYgod/RSSHub/pull/414 https://github.com/DIYgod/RSSHub/pull/501 https://github.com/DIYgod/RSSHub/pull/732 * fix(route): agefans (#12851) * feat(route): add V2rayShare (#12843) * add V2rayShare * style: auto format * add V2rayShare * style: auto format * Update docs/other.md * Update lib/v2/v2rayshare/maintainer.js * Update index.js * style: auto format * Update lib/v2/v2rayshare/index.js --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * chore(deps): bump fluxninja/openai-pr-reviewer from 0 to 1 (#12852) * chore(deps): bump fluxninja/openai-pr-reviewer from 0 to 1 Bumps [fluxninja/openai-pr-reviewer](https://github.com/fluxninja/openai-pr-reviewer) from 0 to 1. - [Release notes](https://github.com/fluxninja/openai-pr-reviewer/releases) - [Commits](https://github.com/fluxninja/openai-pr-reviewer/compare/v0...v1) --- updated-dependencies: - dependency-name: fluxninja/openai-pr-reviewer dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> * fix: don't relabel for `dependabot[bot]` --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix: twitter keyword * feat(route): 支持上海市文旅局审批公告 (#12862) * feat(route): 支持上海市文旅局审批公告 * fix(route): wgj * fix(route): currentUrl * fix(route): search params * feat: increase the timeout time for the fulltext_mode test * feat: support reverse proxy * style: auto format * fix: typo * test: fix empty request error * feat: bypass reverse proxy for requests with cookies * test: fix empty request error and remove node 16 support * fix: reverse proxy fails for some requests * feat: exclude some requests for reverse proxy * feat: expand the scope of retries and set proxy strategy * fix: logger.debug * fix(route/twitter): mixed media incomplete (#12863) * fix(route/twitter): media t.co links not purged (#12864) * Add fix for bloomberg newsletter * Fix deepscan error --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Andvari <31068367+dzx-dzx@users.noreply.github.com> Co-authored-by: Ethan Shen <42264778+nczitzk@users.noreply.github.com> Co-authored-by: 钛白 <86600901+77taibai@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: DIYgod <i@diygod.me> Co-authored-by: GideonSenku <39037656+GideonSenku@users.noreply.github.com> Co-authored-by: Rongrong <i@rong.moe> Co-authored-by: Chenfei Xu <chenfxu@ebay.com> * feat(route): 添加 Javdb 的清单获取, 更新了搜索的排序筛选 (#12866) * feat(route): 添加 Javdb 的清单获取, 更新了搜索的排序筛选 * fix: sort router --------- * style: auto format * Fix(route): bloomberg story for newslettes (#12869) * fix minor bugs * fix page sel * reformat * wordaround to fix the deepscan error * fix(route/twitter/user): missing latest tweets (#12870) * fix(route/twitter/user): missing latest tweets Signed-off-by: Rongrong <i@rong.moe> * Update lib/v2/twitter/web-api/twitter-api.js --------- Signed-off-by: Rongrong <i@rong.moe> * feat(route): add 中国海洋大学教务处 (#12872) * feat(route): add 中国海洋大学教务处 * fix: sort entries --------- * feat(route): add 国务院国有资产监督管理委员会 (#12875) * feat: replace the full text content of utgd with description according to site owner's request * feat: support mobile subdomain of jandan in radar rules (#12876) * feat: support mobile subdomain of jandan in radar rules * fix: format * style: auto format * fix(route): 壹蘋新聞網獲取失敗 (#12886) * chore(deps): bump pinyin-pro from 3.16.0 to 3.16.1 in /docs (#12890) Bumps [pinyin-pro](https://github.com/zh-lx/pinyin-pro) from 3.16.0 to 3.16.1. - [Release notes](https://github.com/zh-lx/pinyin-pro/releases) - [Changelog](https://github.com/zh-lx/pinyin-pro/blob/main/CHANGELOG.md) - [Commits](https://github.com/zh-lx/pinyin-pro/compare/3.16.0...3.16.1) --- updated-dependencies: - dependency-name: pinyin-pro dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * feat(route): add route for bluesky post search ("keyword") (#12893) * add route for bluesky post search ("keyword") * try and fix up routes * Apply suggestions from code review --------- * fix(route): bloomberg: add default handing of news in storymode based on react-renderer (#12878) * fix minor bugs * fix page sel * reformat * wordaround to fix the deepscan error * fix bloomberg when dealing with 404 direct link * fix processVideo in cyclic depend * remove the toggle * feat(route): add 中国海洋大学选课信息教务通知 (#12880) * feat(route): add 中国海洋大学教务处 * fix: sort entries * fix: 修复错误的entries排序 * feat(route): add 中国海洋大学选课信息教务通知 * add selfhost --------- * feat(route): utgd: adjust utgd apiUrl to new (#12894) * Update timeline.js * Update topic.js * fix(route): segment fault user (#12900) * feat(route): add github all issue/pull comments (#12899) * style: auto format * feat(route): shiep (#12907) * fix(route/shiep): fix jsjxy,tyb * feat(route/shiep): add jxfz,nydlzk,rpstec,spgc,ztjy * ci: enable experimental feature in gha * feat(route): add bilibili频道排行榜 (#12906) * feat(route): add bilibili频道排行榜 * fix * fix: typo --------- * fix(route): wxkol (#12909) * docs: fix bilibili wrong parent * fix(route): coolapk item type 13 (#12910) * fix(route): 18comic (#12911) * fix(route): 18comic * feat: allow user provided domain * fix(route/twitter/user): missing all replies (#12912) Signed-off-by: Rongrong <i@rong.moe> * feat(route): add Rawkuma (#12901) * feat(route): add Rawkuma * update lib/v2/rawkuma/manga.js * fix: eslint --------- * feat(route): add 湖南农业大学教务处等通知 (#12913) * feat(route): add 湖南农业大学教务处等通知 * feat(route): add hunau湖南农业大学教务处等通知 * fix: Incomplete multi-character sanitization * fix: sort entries * fix: name using lowerCamelCase * fix: case bugs * fix:中国政府网-最新政策 url变更(#12908) (#12914) * fix: bilibili route /bilibili/user/video/:uid bug (#12920) * fix: radar rule for Telegram channels (#12927) * feat(route/odaily): Odaily 星球日报, 添加指定关键字快讯 (#12926) * feat(route/odaily): Odaily 星球日报, 添加指定关键字快讯 * fix: sort entries * fix: radar rules --------- * fix(route): finviz news (#12857) * fix(route): finviz news * fix: remove unnecessary escape characters * fix: remove cache * fix: add filter of title * fix: filter empty value --------- * feat: 为html/json转化为rss提供通用支持 (#12882) * feat: add rss proxy * docs: 增加文档 * feat: 增加description和自动链接提取 * feat: 增加一些有用的radar * fix: 链接补全 * fix: lint * fix: request config * docs: example encode * fix: rename proxy to transform * refactor: move it under rsshub fix: split radar rules * fix: maintainer build * style: camelCase * docs: fix example --------- * docs: fix table in other.md * chore(deps): bump pinyin-pro from 3.16.1 to 3.16.2 in /docs (#12934) Bumps [pinyin-pro](https://github.com/zh-lx/pinyin-pro) from 3.16.1 to 3.16.2. - [Release notes](https://github.com/zh-lx/pinyin-pro/releases) - [Changelog](https://github.com/zh-lx/pinyin-pro/blob/main/CHANGELOG.md) - [Commits](https://github.com/zh-lx/pinyin-pro/compare/3.16.1...3.16.2) --- updated-dependencies: - dependency-name: pinyin-pro dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix(route): radar rule for xueqiu snb & stock_info (#12935) * feat(route): add 电子工程专辑芯语 (#12939) * feat(route): add 电子工程专辑芯语 * fix radar * style: auto format * fix(route/ximalaya): categoryInfo is undefined (#12940) * fix(route/ximalaya): categoryInfo is undefined * fix(route/ximalaya): categoryInfo is undefined * refactor: migrate to v2 --------- * fix(route): zhihu (#12942) * fix(route): bilibili vsearch (#12943) * feat(route): add dnaindia (#12941) * feat(route): add dnaindia * Update docs/en/traditional-media.md Co-authored-by: Tony <TonyRL@users.noreply.github.com> * Update docs/en/traditional-media.md Co-authored-by: Tony <TonyRL@users.noreply.github.com> * Update docs/en/traditional-media.md Co-authored-by: Tony <TonyRL@users.noreply.github.com> * Update docs/en/traditional-media.md Co-authored-by: Tony <TonyRL@users.noreply.github.com> * Update docs/en/traditional-media.md Co-authored-by: Tony <TonyRL@users.noreply.github.com> * Update lib/v2/dnaindia/radar.js Co-authored-by: Tony <TonyRL@users.noreply.github.com> * Update lib/v2/dnaindia/radar.js Co-authored-by: Tony <TonyRL@users.noreply.github.com> * Update lib/v2/dnaindia/radar.js Co-authored-by: Tony <TonyRL@users.noreply.github.com> * Update<category.js>: change logger and item.category * Update traditional-media.md * Update lib/v2/dnaindia/radar.js Co-authored-by: Tony <TonyRL@users.noreply.github.com> * Update lib/v2/dnaindia/category.js --------- * fix(route): elsevier (#12948) * fix(route): cnki/journals (#12949) * style: auto format * feat(route): Spotify show route (#12945) * Add spotify show route * refactor: sort entries * docs: remove dupe field * Update lib/v2/spotify/show.js --------- * docs: spelling mistake and description update (#12953) * feat(route): add Stock Edge (#12950) * feat(route): add Stock Edge * fix(parseTime): utils * Update docs/en/finance.md Co-authored-by: Tony <TonyRL@users.noreply.github.com> * fix(stockedge):minor changes --------- * feat(route): add runtrail (#12963) * feat(route): thehindu topic (#12964) * feat(route): add A List Apart (#12960) * feat(route): add Stock Edge * fix(parseTime): utils * Update docs/en/finance.md Co-authored-by: Tony <TonyRL@users.noreply.github.com> * fix(stockedge):minor changes * feat(route): add 'A list apart' * docs * parse time * use wordpress api * add _embedded * fix * docs: spoiler --------- * feat(route): add Smashing magazine (#12961) * initial commit * feat(route): add Smashing magazine * docs * docs update * add full article * fix docs * docs: spoiler --------- * feat(route): add 早报网 (#12981) * chore(deps-dev): bump @types/koa from 2.13.6 to 2.13.8 (#12972) * chore(deps-dev): bump @types/koa from 2.13.6 to 2.13.8 Bumps [@types/koa](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/koa) from 2.13.6 to 2.13.8. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/koa) --- updated-dependencies: - dependency-name: "@types/koa" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> * chore: fix pnpm install --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump puppeteer from 20.9.0 to 21.0.2 (#12971) * chore(deps): bump puppeteer from 20.9.0 to 21.0.2 Bumps [puppeteer](https://github.com/puppeteer/puppeteer) from 20.9.0 to 21.0.2. - [Release notes](https://github.com/puppeteer/puppeteer/releases) - [Changelog](https://github.com/puppeteer/puppeteer/blob/main/release-please-config.json) - [Commits](https://github.com/puppeteer/puppeteer/compare/puppeteer-v20.9.0...puppeteer-v21.0.2) --- updated-dependencies: - dependency-name: puppeteer dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> * chore: fix pnpm install --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump @sentry/node from 7.59.3 to 7.62.0 (#12973) * chore(deps): bump @sentry/node from 7.59.3 to 7.62.0 Bumps [@sentry/node](https://github.com/getsentry/sentry-javascript) from 7.59.3 to 7.62.0. - [Release notes](https://github.com/getsentry/sentry-javascript/releases) - [Changelog](https://github.com/getsentry/sentry-javascript/blob/develop/CHANGELOG.md) - [Commits](https://github.com/getsentry/sentry-javascript/compare/7.59.3...7.62.0) --- updated-dependencies: - dependency-name: "@sentry/node" dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> * chore: fix pnpm install --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump prettier from 3.0.0 to 3.0.1 (#12975) * chore(deps-dev): bump prettier from 3.0.0 to 3.0.1 Bumps [prettier](https://github.com/prettier/prettier) from 3.0.0 to 3.0.1. - [Release notes](https://github.com/prettier/prettier/releases) - [Changelog](https://github.com/prettier/prettier/blob/main/CHANGELOG.md) - [Commits](https://github.com/prettier/prettier/compare/3.0.0...3.0.1) --- updated-dependencies: - dependency-name: prettier dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> * chore: fix pnpm install --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump @notionhq/client from 2.2.8 to 2.2.10 (#12976) * chore(deps): bump @notionhq/client from 2.2.8 to 2.2.10 Bumps [@notionhq/client](https://github.com/makenotion/notion-sdk-js) from 2.2.8 to 2.2.10. - [Release notes](https://github.com/makenotion/notion-sdk-js/releases) - [Commits](https://github.com/makenotion/notion-sdk-js/compare/v2.2.8...v2.2.10) --- updated-dependencies: - dependency-name: "@notionhq/client" dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> * chore: fix pnpm install --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump jest from 29.6.1 to 29.6.2 (#12980) * chore(deps-dev): bump jest from 29.6.1 to 29.6.2 Bumps [jest](https://github.com/facebook/jest/tree/HEAD/packages/jest) from 29.6.1 to 29.6.2. - [Release notes](https://github.com/facebook/jest/releases) - [Changelog](https://github.com/jestjs/jest/blob/main/CHANGELOG.md) - [Commits](https://github.com/facebook/jest/commits/v29.6.2/packages/jest) --- updated-dependencies: - dependency-name: jest dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> * chore: fix pnpm install --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump re2 from 1.19.1 to 1.20.1 (#12977) * chore(deps): bump re2 from 1.19.1 to 1.20.1 Bumps [re2](https://github.com/uhop/node-re2) from 1.19.1 to 1.20.1. - [Release notes](https://github.com/uhop/node-re2/releases) - [Commits](https://github.com/uhop/node-re2/compare/1.19.1...1.20.1) --- updated-dependencies: - dependency-name: re2 dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> * chore: fix pnpm install --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump @sentry/node from 7.62.0 to 7.63.0 (#12986) * chore(deps): bump @sentry/node from 7.62.0 to 7.63.0 Bumps [@sentry/node](https://github.com/getsentry/sentry-javascript) from 7.62.0 to 7.63.0. - [Release notes](https://github.com/getsentry/sentry-javascript/releases) - [Changelog](https://github.com/getsentry/sentry-javascript/blob/develop/CHANGELOG.md) - [Commits](https://github.com/getsentry/sentry-javascript/compare/7.62.0...7.63.0) --- updated-dependencies: - dependency-name: "@sentry/node" dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> * chore: fix pnpm install --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix(route): 少数派 -- 首页 ignores member articles previews (#12983) * Update index.js for route: sspai Add compatibility for member articles preview. * Update index.js of route sspai Clarify the code * style: auto format * feat(route): add 华理教务处 (#12982) * add ECUST-jwc rss route * fix code * fix review * style: auto format * fix(route): `/bilibili/user/video(article)` Broken for some uploaders (#12992) * Fix /bilibili/user/video Error message: Cannot read properties of undefined (reading 'name') * /bilibili/user/video returns error message if fail to fetch * feat(route): add 东南大学研究生院公告 (#12958) * feat(route): add 东南大学研究生院公告 * feat(route): add 东南大学研究生院公告 * add radar * format scripts * Update lib/v2/seu/radar.js * Update lib/v2/seu/yjs.js * Update lib/v2/seu/yjs.js * fix redundancy * refactor: migrate to v2 * fix: typo --------- * chore(deps): bump googleapis from 122.0.0 to 124.0.0 (#12984) * chore(deps): bump googleapis from 122.0.0 to 124.0.0 Bumps [googleapis](https://github.com/googleapis/google-api-nodejs-client) from 122.0.0 to 124.0.0. - [Release notes](https://github.com/googleapis/google-api-nodejs-client/releases) - [Changelog](https://github.com/googleapis/google-api-nodejs-client/blob/main/.release-please-manifest.json) - [Commits](https://github.com/googleapis/google-api-nodejs-client/compare/googleapis-v122.0.0...googleapis-v124.0.0) --- updated-dependencies: - dependency-name: googleapis dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> * chore: fix pnpm install --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump eslint from 8.45.0 to 8.46.0 (#12974) * chore(deps-dev): bump eslint from 8.45.0 to 8.46.0 Bumps [eslint](https://github.com/eslint/eslint) from 8.45.0 to 8.46.0. - [Release notes](https://github.com/eslint/eslint/releases) - [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md) - [Commits](https://github.com/eslint/eslint/compare/v8.45.0...v8.46.0) --- updated-dependencies: - dependency-name: eslint dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> * chore: fix pnpm install * style: remove --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump eslint-config-prettier from 8.8.0 to 9.0.0 (#12988) * chore(deps-dev): bump eslint-config-prettier from 8.8.0 to 9.0.0 Bumps [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier) from 8.8.0 to 9.0.0. - [Changelog](https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md) - [Commits](https://github.com/prettier/eslint-config-prettier/compare/v8.8.0...v9.0.0) --- updated-dependencies: - dependency-name: eslint-config-prettier dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> * chore: fix pnpm install --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * refactor: replace re2 with re2-wasm (#12998) * refactor: replace re2 with re2-wasm * refactor: remove migrated routes * ci: remove foresight https://github.com/runforesight Foresight is no longer in service * fix: add back removed wasm chore: bump base OS image * fix(route): yuque (#13001) * chore(deps): bump twitter-api-v2 from 1.15.0 to 1.15.1 (#12987) * chore(deps): bump twitter-api-v2 from 1.15.0 to 1.15.1 Bumps [twitter-api-v2](https://github.com/plhery/node-twitter-api-v2) from 1.15.0 to 1.15.1. - [Release notes](https://github.com/plhery/node-twitter-api-v2/releases) - [Changelog](https://github.com/PLhery/node-twitter-api-v2/blob/master/changelog.md) - [Commits](https://github.com/plhery/node-twitter-api-v2/compare/1.15.0...1.15.1) --- updated-dependencies: - dependency-name: twitter-api-v2 dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> * chore: fix pnpm install --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump lru-cache from 10.0.0 to 10.0.1 (#12985) * chore(deps): bump lru-cache from 10.0.0 to 10.0.1 Bumps [lru-cache](https://github.com/isaacs/node-lru-cache) from 10.0.0 to 10.0.1. - [Changelog](https://github.com/isaacs/node-lru-cache/blob/main/CHANGELOG.md) - [Commits](https://github.com/isaacs/node-lru-cache/compare/v10.0.0...v10.0.1) --- updated-dependencies: - dependency-name: lru-cache dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> * chore: fix pnpm install --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @vercel/nft from 0.22.6 to 0.23.0 (#12979) * chore(deps-dev): bump @vercel/nft from 0.22.6 to 0.23.0 Bumps [@vercel/nft](https://github.com/vercel/nft) from 0.22.6 to 0.23.0. - [Release notes](https://github.com/vercel/nft/releases) - [Commits](https://github.com/vercel/nft/compare/0.22.6...0.23.0) --- updated-dependencies: - dependency-name: "@vercel/nft" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> * chore: fix pnpm install --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build: fix vercel build (#13006) * chore(deps-dev): bump eslint from 8.46.0 to 8.47.0 (#13002) * chore(deps-dev): bump eslint from 8.46.0 to 8.47.0 Bumps [eslint](https://github.com/eslint/eslint) from 8.46.0 to 8.47.0. - [Release notes](https://github.com/eslint/eslint/releases) - [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md) - [Commits](https://github.com/eslint/eslint/compare/v8.46.0...v8.47.0) --- updated-dependencies: - dependency-name: eslint dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> * chore: fix pnpm install --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * feat(route): /bilibili/user/dynamic add showEmoji parameter (#13009) * chore(deps): bump puppeteer from 21.0.2 to 21.0.3 (#13003) * chore(deps): bump puppeteer from 21.0.2 to 21.0.3 Bumps [puppeteer](https://github.com/puppeteer/puppeteer) from 21.0.2 to 21.0.3. - [Release notes](https://github.com/puppeteer/puppeteer/releases) - [Changelog](https://github.com/puppeteer/puppeteer/blob/main/release-please-config.json) - [Commits](https://github.com/puppeteer/puppeteer/compare/puppeteer-v21.0.2...puppeteer-v21.0.3) --- updated-dependencies: - dependency-name: puppeteer dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> * chore: fix pnpm install --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: TonyRL <TonyRL@users.noreply.github.com> * docs: update readme * docs: update image size * feat(route): add Grist (#12991) * initial commit * radar and maintainer updates * add route grist * add grist changes * Update docs/en/new-media.md * Update lib/v2/grist/featured.js * get featured article via APi * docs: spoiler --------- * feat(route): caixin weekly (#13017) * docs: fix caixin weekly * fix(route): Update bilibili maintainer.js (#13021) * feat(route): add Finology (#12993) * feat(route): add Finology * Update radar.js * Update docs/en/finance.md * Update lib/v2/finology/bullets.js * Update lib/v2/finology/mostViewed.js * Update lib/v2/finology/bullets.js * Update docs/en/finance.md * Update lib/v2/finology/tag.js * Update lib/v2/finology/mostViewed.js * Update lib/v2/finology/tag.js * add the suggested changes * use promise.allSettled * clean up * docs: add spoiler --------- * fix(route): Fix bloomberg story by using the latest story id api (#13013) * fix minor bugs * fix page sel * reformat * wordaround to fix the deepscan error * fix bloomberg when dealing with 404 direct link * fix processVideo in cyclic depend * remove the toggle * change into new story api * reorg the files * use prop not instead of lodash * remove useless exports * use parseVideo in diff files * refactor to remove deps * add try/catch for renderer page * use story api for newsletters * update features example * change audio * add tabularData --------- Co-authored-by: Chenfei Xu <chenfxu@ebay.com> * feat(route): Science.org Blogs (#13016) * initial commit * clean up code, run fmt, add docs * fix caching Co-authored-by: Tony <TonyRL@users.noreply.github.com> * Apply suggestions from code review Co-authored-by: Tony <TonyRL@users.noreply.github.com> * remove regex * Add config import * docs: cn docs * docs: better link --------- * chore: try fix arm64 build * chore(deps): bump @vuepress/plugin-pwa from 1.9.9 to 1.9.10 in /docs (#13033) Bumps [@vuepress/plugin-pwa](https://github.com/vuejs/vuepress/tree/HEAD/packages/@vuepress/plugin-pwa) from 1.9.9 to 1.9.10. - [Release notes](https://github.com/vuejs/vuepress/releases) - [Changelog](https://github.com/vuejs/vuepress/blob/master/CHANGELOG.md) - [Commits](https://github.com/vuejs/vuepress/commits/v1.9.10/packages/@vuepress/plugin-pwa) --- updated-dependencies: - dependency-name: "@vuepress/plugin-pwa" dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump vuepress from 1.9.9 to 1.9.10 in /docs (#13034) Bumps [vuepress](https://github.com/vuejs/vuepress/tree/HEAD/packages/vuepress) from 1.9.9 to 1.9.10. - [Release notes](https://github.com/vuejs/vuepress/releases) - [Changelog](https://github.com/vuejs/vuepress/blob/master/CHANGELOG.md) - [Commits](https://github.com/vuejs/vuepress/commits/v1.9.10/packages/vuepress) --- updated-dependencies: - dependency-name: vuepress dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump @vuepress/plugin-google-analytics in /docs (#13036) Bumps [@vuepress/plugin-google-analytics](https://github.com/vuejs/vuepress/tree/HEAD/packages/@vuepress/plugin-google-analytics) from 1.9.9 to 1.9.10. - [Release notes](https://github.com/vuejs/vuepress/releases) - [Changelog](https://github.com/vuejs/vuepress/blob/master/CHANGELOG.md) - [Commits](https://github.com/vuejs/vuepress/commits/v1.9.10/packages/@vuepress/plugin-google-analytics) --- updated-dependencies: - dependency-name: "@vuepress/plugin-google-analytics" dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump @vuepress/shared-utils from 1.9.9 to 1.9.10 in /docs (#13037) Bumps [@vuepress/shared-utils](https://github.com/vuejs/vuepress/tree/HEAD/packages/@vuepress/shared-utils) from 1.9.9 to 1.9.10. - [Release notes](https://github.com/vuejs/vuepress/releases) - [Changelog](https://github.com/vuejs/vuepress/blob/master/CHANGELOG.md) - [Commits](https://github.com/vuejs/vuepress/commits/v1.9.10/packages/@vuepress/shared-utils) --- updated-dependencies: - dependency-name: "@vuepress/shared-utils" dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump @vuepress/plugin-back-to-top in /docs (#13035) Bumps [@vuepress/plugin-back-to-top](https://github.com/vuejs/vuepress/tree/HEAD/packages/@vuepress/plugin-back-to-top) from 1.9.9 to 1.9.10. - [Release notes](https://github.com/vuejs/vuepress/releases) - [Changelog](https://github.com/vuejs/vuepress/blob/master/CHANGELOG.md) - [Commits](https://github.com/vuejs/vuepress/commits/v1.9.10/packages/@vuepress/plugin-back-to-top) --- updated-dependencies: - dependency-name: "@vuepress/plugin-back-to-top" dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * feat: add docusaurus website (#13039) * fix: github workflows * feat(route): `/zhihu/daily/section/:sectionId` add pubDate (#13020) * docs: clear service worker * docs: fix editUrl * docs: fix i18n * fix(radar): stockedge sub-domain (#13038) * docs: compatible with the old logo link * docs: add umami * docs: add back meilisearch (#13041) * docs: add back meilisearch * fix: remove unused variable * Revert "fix: remove unused variable" This reverts commit 52bec57a1ec8c54166793b31cf972131555dc6bc. What is React * fix(route): 更换财新最新文章获取方式 (#13023) * 更换财新最新文章获取方式。 * Update latest.js * Update latest.js * Update latest.js * style: auto format * docs: recover DocSidebarItem * docs: fix new docs link * fix(route): Foresight News (#13026) * fix(route): Foresight News * fix docs * fix tags * fix index items --------- * fix: rsshub routes update * fix: rsshub routes update * fix(route): Aqara News (#12921) * fix(route): Aqara News * feat(route): add Aqara category & tag * fix: crlf to lf * fix broken images * fix url --------- * chore(deps): bump @notionhq/client from 2.2.10 to 2.2.11 (#13030) * chore(deps): bump @notionhq/client from 2.2.10 to 2.2.11 Bumps [@notionhq/client](https://github.com/makenotion/notion-sdk-js) from 2.2.10 to 2.2.11. - [Release notes](https://github.com/makenotion/notion-sdk-js/releases) - [Commits](https://github.com/makenotion/notion-sdk-js/compare/v2.2.10...v2.2.11) --- updated-dependencies: - dependency-name: "@notionhq/client" dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> * chore: fix pnpm install --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump prettier from 3.0.1 to 3.0.2 (#13042) * chore(deps-dev): bump prettier from 3.0.1 to 3.0.2 Bumps [prettier](https://github.com/prettier/prettier) from 3.0.1 to 3.0.2. - [Release notes](https://github.com/prettier/prettier/releases) - [Changelog](https://github.com/prettier/prettier/blob/main/CHANGELOG.md) - [Commits](https://github.com/prettier/prettier/compare/3.0.1...3.0.2) --- updated-dependencies: - dependency-name: prettier dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> * chore: fix pnpm install --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump @sentry/node from 7.63.0 to 7.64.0 (#13032) * chore(deps): bump @sentry/node from 7.63.0 to 7.64.0 Bumps [@sentry/node](https://github.com/getsentry/sentry-javascript) from 7.63.0 to 7.64.0. - [Release notes](https://github.com/getsentry/sentry-javascript/releases) - [Changelog](https://github.com/getsentry/sentry-javascript/blob/develop/CHANGELOG.md) - [Commits](https://github.com/getsentry/sentry-javascript/compare/7.63.0...7.64.0) --- updated-dependencies: - dependency-name: "@sentry/node" dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> * chore: fix pnpm install --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump googleapis from 124.0.0 to 125.0.0 (#13043) * chore(deps): bump googleapis from 124.0.0 to 125.0.0 Bumps [googleapis](https://github.com/googleapis/google-api-nodejs-client) from 124.0.0 to 125.0.0. - [Release notes](https://github.com/googleapis/google-api-nodejs-client/releases) - [Changelog](https://github.com/googleapis/google-api-nodejs-client/blob/main/.release-please-manifest.json) - [Commits](https://github.com/googleapis/google-api-nodejs-client/compare/googleapis-v124.0.0...googleapis-v125.0.0) --- updated-dependencies: - dependency-name: googleapis dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> * chore: fix pnpm install --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump lint-staged from 13.2.3 to 14.0.0 (#13031) * chore(deps-dev): bump lint-staged from 13.2.3 to 14.0.0 Bumps [lint-staged](https://github.com/okonet/lint-staged) from 13.2.3 to 14.0.0. - [Release notes](https://github.com/okonet/lint-staged/releases) - [Commits](https://github.com/okonet/lint-staged/compare/v13.2.3...v14.0.0) --- updated-dependencies: - dependency-name: lint-staged dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> * chore: fix pnpm install --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @tsconfig/docusaurus in /website (#13047) Bumps [@tsconfig/docusaurus](https://github.com/tsconfig/bases/tree/HEAD/bases) from 1.0.5 to 2.0.0. - [Commits](https://github.com/tsconfig/bases/commits/HEAD/bases) --- updated-dependencies: - dependency-name: "@tsconfig/docusaurus" dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump pinyin-pro from 3.16.2 to 3.16.3 in /website (#13059) Bumps [pinyin-pro](https://github.com/zh-lx/pinyin-pro) from 3.16.2 to 3.16.3. - [Release notes](https://github.com/zh-lx/pinyin-pro/releases) - [Changelog](https://github.com/zh-lx/pinyin-pro/blob/main/CHANGELOG.md) - [Commits](https://github.com/zh-lx/pinyin-pro/commits) --- updated-dependencies: - dependency-name: pinyin-pro dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * docs: redirect old docs urls (#13060) * docs: redirect old docs urls * fix: fix start en docs script * docs: fix redirects in netlify * docs: remove redirect for non matching /en/* to /en/404 This proceeds before docusaurus' redirects which breaks /en/category.html -> /en/category -> /en/routes/category * feat(route): IGDB - 学术活动 (#13027) * feat(route): IGDB - 学术活动 * fix: sort router & use https * fix: sort radar --------- * chore(deps-dev): bump @vercel/nft from 0.23.0 to 0.23.1 (#13029) * chore(deps-dev): bump @vercel/nft from 0.23.0 to 0.23.1 Bumps [@vercel/nft](https://github.com/vercel/nft) from 0.23.0 to 0.23.1. - [Release notes](https://github.com/vercel/nft/releases) - [Commits](https://github.com/vercel/nft/compare/0.23.0...0.23.1) --- updated-dependencies: - dependency-name: "@vercel/nft" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> * chore: fix pnpm install --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * docs: pwa (#13064) * chore(deps-dev): bump nock from 13.3.2 to 13.3.3 (#13058) * chore(deps-dev): bump nock from 13.3.2 to 13.3.3 Bumps [nock](https://github.com/nock/nock) from 13.3.2 to 13.3.3. - [Release notes](https://github.com/nock/nock/releases) - [Changelog](https://github.com/nock/nock/blob/main/CHANGELOG.md) - [Commits](https://github.com/nock/nock/compare/v13.3.2...v13.3.3) --- updated-dependencies: - dependency-name: nock dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> * chore: fix pnpm install --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix(route): fix `/bilibili/followings/dynamic` Cannot convert object to primitive value (#13065) * feat(route): tiktok iframe (#13066) * chore: add warp in docker-compose * feat(router): 增加 xiaote.com 论坛路由 (#13062) * feat: 增加 xiaote.com 论坛路由 * feat: add radar.js * feat: format code * bugfix: radar error * fix: all marge issuse * feat(route): add descriptions for nwafu (#13067) * feat(route): add descriptions for nwafu docs: update the docs scriptsformat scripts refactor: migrate to v2 * Create radar.js * Update radar.js * feat(route): fix the route * Update website/docs/routes/university.md * Update website/docs/routes/university.md * Update all.js * Update all.js * Update lib/v2/nwafu/all.js * Update all.js --------- * style: auto format * feat(parameter): use re2js instead (#13072) * feat(parameter): use re2js instead * fix: add back comment * chore(deps): bump clsx from 1.2.1 to 2.0.0 in /website (#13045) Bumps [clsx](https://github.com/lukeed/clsx) from 1.2.1 to 2.0.0. - [Release notes](https://github.com/lukeed/clsx/releases) - [Commits](https://github.com/lukeed/clsx/compare/v1.2.1...v2.0.0) --- updated-dependencies: - dependency-name: clsx dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump prism-react-renderer from 1.3.5 to 2.0.6 in /website (#13046) * chore(deps): bump prism-react-renderer from 1.3.5 to 2.0.6 in /website Bumps [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) from 1.3.5 to 2.0.6. - [Release notes](https://github.com/FormidableLabs/prism-react-renderer/releases) - [Commits](https://github.com/FormidableLabs/prism-react-renderer/compare/v1.3.5...prism-react-renderer@2.0.6) --- updated-dependencies: - dependency-name: prism-react-renderer dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> * fix: `prism-react-renderer` v2 changes --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump typescript from 4.7.4 to 5.1.6 in /website (#13044) * chore(deps-dev): bump typescript from 4.7.4 to 5.1.6 in /website Bumps [typescript](https://github.com/Microsoft/TypeScript) from 4.7.4 to 5.1.6. - [Release notes](https://github.com/Microsoft/TypeScript/releases) - [Commits](https://github.com/Microsoft/TypeScript/compare/v4.7.4...v5.1.6) --- updated-dependencies: - dependency-name: typescript dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> * chore: use group updates --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix(route): fix /baidu/tieba/forum time (#13077) * feat(route): add xhu (#13055) * feat(route): add xhu * add xhu doc * Remove unnecessary URL parameter * Store xhu cookie in cache * Add xhu to radar.js * Update website/docs/routes/social-media.md --------- * style: auto format * fix(route): update v2/scitation to v2/aip (#12955) * fix(route): scitation/journal * fix(docs): scitation/journal * fix(docs): (en) scitation/journal * chores * fix(radar): scitation/journal * fix(radar): scitation/journal * fix(radar): scitation/journal * style: auto format * fix(route): mv scitation to aip * fix(route): v2/AIP chores * fix(docs): v2/aip docs * fix(docs): chores: jounus/advanced/advanced-feed * fix(docs): update en docs * fix(docs): not right close the <RouteEn> * fix(docs): correct some mistake * Update lib/v2/aip/radar.js --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * chore(deps): bump googleapis from 125.0.0 to 126.0.0 (#13073) * chore(deps): bump googleapis from 125.0.0 to 126.0.0 Bumps [googleapis](https://github.com/googleapis/google-api-nodejs-client) from 125.0.0 to 126.0.0. - [Release notes](https://github.com/googleapis/google-api-nodejs-client/releases) - [Changelog](https://github.com/googleapis/google-api-nodejs-client/blob/main/release-please-config.json) - [Commits](https://github.com/googleapis/google-api-nodejs-client/compare/googleapis-v125.0.0...googleapis-v126.0.0) --- updated-dependencies: - dependency-name: googleapis dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> * chore: fix pnpm install --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump puppeteer from 21.0.3 to 21.1.0 (#13074) * chore(deps): bump puppeteer from 21.0.3 to 21.1.0 Bumps [puppeteer](https://github.com/puppeteer/puppeteer) from 21.0.3 to 21.1.0. - [Release notes](https://github.com/puppeteer/puppeteer/releases) - [Changelog](https://github.com/puppeteer/puppeteer/blob/main/release-please-config.json) - [Commits](https://github.com/puppeteer/puppeteer/compare/puppeteer-v21.0.3...puppeteer-v21.1.0) --- updated-dependencies: - dependency-name: puppeteer dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> * chore: fix pnpm install --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix(route): 2048 (#13079) * fix(route): 2048 * fix: codeql * fix: empty link * fix: url condition * feat(route): add more routes for nwafu (#13076) * feat(route): add more routes for nwafu * update all.js * Update all.js * style: auto format * fix(route): Fix bloomberg story when parsing react rendered page and videos missing id (#13082) * fix minor bugs * fix page sel * reformat * wordaround to fix the deepscan error * fix bloomberg when dealing with 404 direct link * fix processVideo in cyclic depend * remove the toggle * change into new story api * reorg the files * use prop not instead of lodash * remove useless exports * use parseVideo in diff files * refactor to remove deps * add try/catch for renderer page * use story api for newsletters * update features example * change audio * add tabularData * fix bug on bloomberg react page --------- Co-authored-by: Chenfei Xu <chenfxu@ebay.com> * docs: documentation prioritizes English and maintains only one route list (#13075) * chore: fix format.js * docs: move the Netlify config to the right place * Revert "docs: move the Netlify config to the right place" This reverts commit 3b588021b56b26559299209c2323445711aff48c. * docs: try language redirection * docs: try language redirection * fix: miniflux optional parameter * docs: i18nable component (#13084) * docs: try language redirection * docs: update README * fix: pixiv bypassCdn default value * docs: i18n sidebar, fix code block (#13085) * docs: i18n sidebar * docs: `code-group` to `tabs` * docs: admonitions use default title * docs: fix route * docs: fix build * docs: fix add-docs admonitions * docs: unwrap `details` wrapped content * docs: mention no i18n switch in dev mode * docs: fix add-docs rendering * docs: fix typo * chore: fix format * feat(route): add xhu collection, question and zhuanlan (#13087) * feat(route): add /zhihu/xhu/question * feat(route): add /zhihu/xhu/zhuanlan * feat(route): add /zhihu/xhu/collection * feat(route): add dlnews (#12997) * feat(route):add DLNEWS * clean up * use embedded JSON * fix: docusaurus style md * add description.art and rate limit * increase the concurency * fix: fix radar docs link * docs: move to finance --------- * chore: update meilisearch config `p`: general content `.params`: route params `table`: route params table `code`: env * feat(route): 百度贴吧按帖子创建时间排序 (#13102) * feat(route): add tieba sort by created time * Put /tieba/forum/good before /tieba/forum * Add parse for creation dates of format YYYY-MM * fix(route): NEW字幕组 (#12951) * fix(route): NEW字幕组 * add comments * fix: remove unnecessary await * fix: remove unnecessary async * fix: remove unnecessary async * fix: add cache for first response * fix typo * fix: new cache key * docs: use default title --------- * chore(deps-dev): bump lint-staged from 14.0.0 to 14.0.1 (#13094) * chore(deps-dev): bump lint-staged from 14.0.0 to 14.0.1 Bumps [lint-staged](https://github.com/okonet/lint-staged) from 14.0.0 to 14.0.1. - [Release notes](https://github.com/okonet/lint-staged/releases) - [Commits](https://github.com/okonet/lint-staged/compare/v14.0.0...v14.0.1) --- updated-dependencies: - dependency-name: lint-staged dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> * chore: fix pnpm install --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump chrono-node from 2.6.4 to 2.6.5 (#13096) * chore(deps): bump chrono-node from 2.6.4 to 2.6.5 Bumps [chrono-node](https://github.com/wanasit/chrono) from 2.6.4 to 2.6.5. - [Release notes](https://github.com/wanasit/chrono/releases) - [Commits](https://github.com/wanasit/chrono/compare/v2.6.4...v2.6.5) --- updated-dependencies: - dependency-name: chrono-node dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> * chore: fix pnpm install --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump jest from 29.6.2 to 29.6.3 (#13095) * chore(deps-dev): bump jest from 29.6.2 to 29.6.3 Bumps [jest](https://github.com/jestjs/jest/tree/HEAD/packages/jest) from 29.6.2 to 29.6.3. - [Release notes](https://github.com/jestjs/jest/releases) - [Changelog](https://github.com/jestjs/jest/blob/main/CHANGELOG.md) - [Commits](https://github.com/jestjs/jest/commits/v29.6.3/packages/jest) --- updated-dependencies: - dependency-name: jest dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> * chore: fix pnpm install --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump re2js from 0.3.2 to 0.3.3 (#13105) * chore(deps): bump re2js from 0.3.2 to 0.3.3 Bumps [re2js](https://github.com/le0pard/re2js) from 0.3.2 to 0.3.3. - [Release notes](https://github.com/le0pard/re2js/releases) - [Commits](https://github.com/le0pard/re2js/compare/0.3.2...0.3.3) --- updated-dependencies: - dependency-name: re2js dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> * chore: fix pnpm install --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump eslint-plugin-n from 16.0.1 to 16.0.2 (#13106) * chore(deps-dev): bump eslint-plugin-n from 16.0.1 to 16.0.2 Bumps [eslint-plugin-n](https://github.com/eslint-community/eslint-plugin-n) from 16.0.1 to 16.0.2. - [Release notes](https://github.com/eslint-community/eslint-plugin-n/releases) - [Commits](https://github.com/eslint-community/eslint-plugin-n/compare/16.0.1...16.0.2) --- updated-dependencies: - dependency-name: eslint-plugin-n dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> * chore: fix pnpm install --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix(route): add tophub cookie (#13104) * fix(route): add tophub cookie * add docs for tophub cookie * Update docs * docs: reorder env * feat(route): Start on support for generic discourse forums. (#13063) * Start on support for generic discourse forums. * Add doc. * Update doc. * Add exception. * Update doc. * Update bbs.md * test: add discourse config * docs: fix typo * fix: guard condition --------- * fix(route): leetcode articles (#13108) * refactor(route): move tophub to v2 * fix(route): 晚点报道 (#13092) * fix(route): 晚点报道 * fix: add programa * fix typo * update lib/v2/latepost/index.js --------- * fix(route): 南京大学研究生院 (#13116) * feat(route): Add Discourse notifications support (#13114) * Adding discourse notifications support. * Refactor & add doc. * feat(route): add router YouTube Live (#13110) * feat(route): add router YouTube Live * add docs * Insert new entries in alphabetical order. --------- * chore(deps-dev): bump typescript from 5.1.6 to 5.2.2 in /website (#13119) Bumps [typescript](https://github.com/Microsoft/TypeScript) from 5.1.6 to 5.2.2. - [Release notes](https://github.com/Microsoft/TypeScript/releases) - [Commits](https://github.com/Microsoft/TypeScript/commits) --- updated-dependencies: - dependency-name: typescript dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix(route): fix the title error for the YouTube Live (#13120) * feat(route): add router YouTube Live * add docs * Insert new entries in alphabetical order. * Fix the error in the title. --------- * feat(route): Bilibili UP主动态 参数格式更新 & 增加显示专栏全文参数 (#13109) * feat(route): /bilibili/user(followings)/dynamic change to routeParams * feat(route): Add displayArticle parameter * small change of uid * Original link can click to jump * chore(deps-dev): bump jest from 29.6.3 to 29.6.4 (#13118) * chore(deps-dev): bump jest from 29.6.3 to 29.6.4 Bumps [jest](https://github.com/jestjs/jest/tree/HEAD/packages/jest) from 29.6.3 to 29.6.4. - [Release notes](https://github.com/jestjs/jest/releases) - [Changelog](https://github.com/jestjs/jest/blob/main/CHANGELOG.md) - [Commits](https://github.com/jestjs/jest/commits/v29.6.4/packages/jest) --- updated-dependencies: - dependency-name: jest dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> * chore: fix pnpm install --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * feat(route): bilibili 动态中的视频链接默认改为 BV 号并增加配置参数;修改 专栏显示全文 的参数来源 (#13122) * feat(route): 添加 百度股市通 * fix: 修改 百度股市通 路径 * docs: 添加 百度股市通 文档 * feat: 添加 radar 支持 * fix: 按字母顺序插入新路由 * feat(route): 新增 腾讯新闻 - 新型冠状病毒肺炎疫情实时追踪 * fix: 优化 腾讯新闻 - 新型冠状病毒肺炎疫情实时追踪 的标题 * fix: 修复 腾讯新闻 - 新型冠状病毒肺炎疫情实时追踪 部分情况下的非空判断 * fix: 修复 地区名称标题的问题 * fix: 腾讯新闻 - 新型冠状病毒肺炎疫情实时追踪 的 guid 增加 pubDate * fix: 修复 腾讯新闻 - 新型冠状病毒肺炎疫情实时追踪 guid 中添加 pubDate * fix: 修改 腾讯新闻 - 新型冠状病毒肺炎疫情实时追踪 的 title * feat(route): 修复 HelloGitHub 的 月刊 路由 * fix: remove guid * feat(route): 新增 bilibili 热搜 * feat(route): 完善 bilibili热搜 的 radar * fix: 优化 bilibili热搜 list 的非空判断 * fix: 修复 bilibili热搜路由失效 fix #12632 * fix(route): 修复 bilibili热搜路由 的校验逻辑计算 * fix: 优化 bilibili/utils 的 addVerifyInfo 逻辑 * feat(route): bilibili 动态中的视频链接默认改为 BV 号并增加配置参数;修改 专栏显示全文 的参数来源 * fix(route): 修复 fulltext 来源错误;修复 addVerifyInfo 逻辑错误 * fix(route): 移除不必要的参数 * chore(deps-dev): bump eslint from 8.47.0 to 8.48.0 (#13124) * chore(deps-dev): bump eslint from 8.47.0 to 8.48.0 Bumps [eslint](https://github.com/eslint/eslint) from 8.47.0 to 8.48.0. - [Release notes](https://github.com/eslint/eslint/releases) - [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md) - [Commits](https://github.com/eslint/eslint/compare/v8.47.0...v8.48.0) --- updated-dependencies: - dependency-name: eslint dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> * chore: fix pnpm install --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.no * chore(deps): bump googleapis from 126.0.0 to 126.0.1 (#13125) * chore(deps): bump googleapis from 126.0.0 to 126.0.1 Bumps [googleapis](https://github.com/googleapis/google-api-nodejs-client) from 126.0.0 to 126.0.1. - [Release notes](https://github.com/googleapis/google-api-nodejs-client/releases) - [Changelog](https://github.com/googleapis/google-api-nodejs-client/blob/main/release-pl…
该 PR 相关 Issue / Involved Issue
Close #
路由地址示例 / Example for the Proposed Route(s)
新 RSS 路由检查表 / New RSS Route Checklist
Puppeteer
说明 / Note