Experience the exhilarating platforming speeds of Sonic Frontiers, the magical and nimble traversal of Forspoken, the delightful chaos of Rabbids, and the realistic rally simulation of WRC Generations. These games and more form Decembers PlayStation Plus Game Catalog lineup* and are available to play from December 17.Joining that lineup on PlayStation Plus Premium is immersive PS VR2 experience Star Wars: Tales from the Galaxys Edge. Three timeless classics have also joined PlayStation Plus Premium just yesterday: Sly 2: Band of Thieves, Sly 3: Honor Among Thieves and Jak & Daxter: The Precursor Legacy.Finally, in case you missed it, PlayStation Portal released a system update that allows PlayStation Plus Premium members to test Cloud Streaming (Beta) for select PS5 games on Game Catalog. Learn more here.PlayStation Plus Extra and Premium | Game CatalogView and download imageDownload the imagecloseCloseDownload this imageSonic Frontiers | PS4, PS5Worlds are colliding in Sonic the Hedgehogs newest high-speed adventure. Uncover the mysteries of an ancient civilisation plagued by robotic hordes. In search of the missing Chaos emeralds, Sonic becomes stranded on an island teeming with unusual creatures. Battle hordes of powerful enemies as you explore a breath-taking world of action, adventure and mystery. Accelerate to new heights and experience the thrill of high-velocity, open-zone platforming freedom as you race across the five massive Starfall Islands.View and download imageDownload the imagecloseCloseDownload this imageForspoken | PS5Forspoken is an action RPG that follows the journey of Frey, a young New Yorker transported to the beautiful and cruel land of Athia. In search of a way home, Frey must use her newfound magical abilities to traverse sprawling landscapes, battle monstrous creatures and defeat powerful matriarchs known as Tantas. Explore the vibrant realms of Athia, a striking land of remarkable vistas and otherworldly creatures brought to life through stunning graphics and cutting-edge technology. Scale walls, vault across canyons, leap from dizzying heights, and dash through vast landscapes. Freys unique abilities allow her to fluidly traverse the open world with ease. Take on twisted monsters in magical combat with numerous types of powerful abilities catering to a variety of playstyles from fast-paced and exhilarating to strategic and methodical.View and download imageDownload the imagecloseCloseDownload this imageRabbids: Party of Legends | PS4Embark on a legendary journey filled with colorful characters with the Rabbids in this uproarious party game. Gather with friends and family and jump into multiplayer mayhem with up to four players locally, sometimes partnering up and at other times, going head-to-head in a multitude of ridiculously fun mini-games. Anyone can get in on the action with customizable difficulty levels and intuitive controls.View and download imageDownload the imagecloseCloseDownload this imageWRC Generations | PS4, PS5Rise to the challenges of the most comprehensive, realistic and demanding rally simulation ever developed. Dive into the heart of the action and drive the cars from the WRC championship, including the new hybrid models. The hybrid era is a revolution for the rally world, significantly affecting performance, changing strategies and making drivers and teams adapt. In terms of gameplay, new mechanics have been integrated to represent the demands of the hybrid engines. In order to win, you have to carefully manage your battery by adapting your engine mapping throughout the special stages you take part in. For fans of competition, Leagues mode lets players challenge opponents with a similar level online. Finish ahead of your competitors to move up the ladder in the Legends category.View and download imageDownload the imagecloseCloseDownload this imageF.I.S.T.: Forged In Shadow Torch | PS4, PS5Diesel-punk exploratory platformer F.I.S.T.: Forged In Shadow Torch is filled with intense combat, challenging puzzles and an anthropomorphic cast of vibrant characters. After the animals of Torch City were defeated by the invading Robotic Legion in the Resistance War six years ago, former Resistance fighter Rayton the rabbit has kept a low profile. The arrest of a friend meant he had no choice but to put on his giant metal fist and fight against those oppressing him. Little did he know that he would soon be caught up in a maelstrom of conspiracies involving the Legion, the Resistance, and the Rat Gang.View and download imageDownload the imagecloseCloseDownload this imageJurassic World Evolution 2 | PS4, PS5Jurassic World Evolution 2 is the much-anticipated sequel to Frontiers ground-breaking 2018 management simulation. Experience exciting new features, four engaging game modes and an expanded roster of awe-inspiring dinosaurs. Immerse yourself in a compelling and original Jurassic World narrative set after the earth-shattering events of Jurassic World: Fallen Kingdom. Work alongside iconic characters from the films, including Dr. Ian Malcolm (voiced by Jeff Goldblum) and Claire Dearing (voiced by Bryce Dallas Howard) and lead the efforts to control, conserve and contain wild dinosaurs now rampaging across the USA. Avoid the mistakes of the past and build your own Jurassic World for dinosaurs and visitors alike.View and download imageDownload the imagecloseCloseDownload this imageCoffee Talk | PS4, PS5Coffee Talk is a game where you listen to peoples problems and help them by serving warm drinks made from the ingredients you have in stock. Immerse yourself in the stories of alternative-Seattle inhabitants, ranging from a dramatic love story between an elf and a succubus, an alien trying to understand humans lives, and many others modern readers will find strongly echo the world around them.View and download imageDownload the imagecloseCloseDownload this imageCoffee Talk Episode 2: Hibiscus & Butterfly | PS4, PS5Its time to revisit your favorite late-night coffee shop and reconnect with your fantasy friends over a warm drink or two. Set in an alternate present-day Seattle where humans, orcs, elves, and other races have been coexisting since the beginning of time, you are a barista who listens to their stories and influences their hearts with a warm cup of coffee or two. Its raining outside, brew yourself a warm drink, play some lo-fi chillhop beats, and listen to the coffee talk. In a time where people are isolated from each other, Coffee Talk is a place where we can reconnect over a cup of warm drink.View and download imageDownload the imagecloseCloseDownload this imageA Space for the Unbound | PS4, PS5A Space for the Unbound is a slice-of-life adventure game with beautiful pixel art set in the late 90s rural Indonesia that tells a story about overcoming anxiety, depression, and the relationship between a boy and a girl with supernatural powers. Follow two high school sweethearts, Atma and Raya, on a journey of self-discovery at the end of their high school years. When a mysteriously supernatural power is suddenly unleashed threatening their existence, they must explore and investigate their town to uncover hidden secrets, face the end of the world, and perhaps learn more about each other.View and download imageDownload the imagecloseCloseDownload this imagePHOGS | PS4Play as a duo of dogs linked by a stretchy belly in a captivating, puzzle-filled adventure. Youll need to bark, bite and bounce your way through obstacles set across the themed worlds of Food, Sleep and Play. Supporting single-player and shared-controller gameplay, plus local and online co-op, Red and Blue are always ready to play!View and download imageDownload the imagecloseCloseDownload this imageBiped | PS4, PS5Biped is a co-op action-adventure game that emphasizes real-time collaboration between two players. Guide Aku and Sila, two charming bipedal robots, through intricate paths leading to planetary beacons. Using two sticks to control each robots legs, you can perform a variety of movesfrom walking and sliding to operating machinery and cutting wood. Communicate and coordinate to overcome challenges together and discover how well you work as a team.PlayStation Plus PremiumView and download imageDownload the imagecloseCloseDownload this imageSly 2: Band of Thieves | PS4, PS5Sly and the gang are back! Originally released in 2004 on PlayStation 2, Sly 2: Band of Thieves is now enhanced with up-rendering, rewind, quick save, and custom video filters. Theyre ready to pull off the biggest job of their lives, yet! Journey around the world and beat the Klaww Gang at their own game.View and download imageDownload the imagecloseCloseDownload this imageSly 3: Honor Among Thieves | PS4, PS5Set one year after the events of Band of Thieves, and releasing on PS2 the following year, Sly 3: Honor Among Thieves brings the thieving gang back together for its greatest heist ever! Your favorite characters return as well as new playable specialists like Carmelita Fox and the Guru.View and download imageDownload the imagecloseCloseDownload this imageJak and Daxter: The Precursor Legacy | PS4, PS5Naughty Dogs iconic duo started in 2001 with Jak and Daxter: The Precursor Legacy on PlayStation 2. Heres the deal: Daxters had a bit of an accident. Hes now much smaller, cuter, furrier and mouthier. In short, hes now an Ottsel. When Daxter turns to best pal Jak for help the daring double act sets off to find a cure, and winds up on an adventure packed with cool combat, radical vehicles and loads of cheeky humor. But fixing Daxters problem will be far from easy especially with an army of baddies, evil masterminds and world-ending plots in the wayView and download imageDownload the imagecloseCloseDownload this imageStar Wars: Tales from the Galaxys Edge | PS VR2Star Wars: Tales from the Galaxys Edge is a VR FPS experience where you step into the role of a Droid Repair Technician. After an emergency crash landing, youll embark on thrilling missions in the Batuu wilds, confront the Guavian Death Gang, infiltrate a First Order facility and journey through different eras of the galaxy. Become a Jedi in the Temple of Darkness, train with your padawan in The Sacred Garden, or even take on a bounty as assassin droid IG-88 in The Bounty of Boggs Triff all in your own unforgettable Star Wars story.*PlayStation Plus Game Catalog and PlayStation Plus Premium/Deluxe lineups may differ by region. Please check PlayStation Store on release day.

Forspoken probably isnt destined for a comeback any time soon, but PlayStation Plus Extra and Premium subscribers on PlayStation 5 can try its surprisingly smooth fantasy parkour for free starting Dec. 17, Sony announced Wednesday.Its joined by some other notable games this month, including Sonic Frontiers, A Space for the Unbound, PHOGS!, and Jak and Daxter: The Precursor Legacy. However, none of them can match the rush of vaulting and sliding through Square Enixs pretty if a little bland open-world action RPG from last year.Although the critical response was mixed on whether or not Forspoken could stand next to the sprawling adventures in games like Final Fantasy 7: Remake, there were a few fans of main character Freys acrobatic finesse. Through her Flow ability, she can leap and slide over objects in the environment while you hold down a single button no finger gymnastics required. And it works in combat, too, letting her dodge and flee from enemies unscathed.In our review, Grayson Morley praised the abilitys traversal and the many ways you can expand it throughout the story, but found that its cut short just as it all starts to come together. By the time you get a fourth set of magical abilities, the game feels like its finally opening up, with a full suite of powers available to you, a feeling immediately undercut by the fact that its actually ending, Morley wrote.That sounds like the perfect kind of game to sample guilt-free with a PS Plus subscription, if you ask me. Maybe it wont satisfy you for 40 hours, but for 5 or 10? Thats a holiday treat. Forspokens story even takes place a few days before Christmas; this could be your new tradition.Forspoken will be available for both Extra and Premium PS Plus subscribers starting Dec. 17.

Its the most wonderful time of the year: when tabletop companies give away free stuff in the name of festive generosity! Both Dungeons & Dragons and competitor Kobold Press are giving away a litany of free digital assets, and we couldnt be merrier.Every year, D&D Beyond runs its 12 Days of D&D promotions in the leadup to the holiday season. Wizards of the Coast launched the highly anticipated giveaway event on Dec. 4, starting with a set of gift-wrapped digital dice for use on the virtual tabletop. As of this publication, two other digital dice collections a blood-red Sanguine Dice set, and a glittery blue Icewind Dale set are also available for free. A few setting guides, like the Baldurs Gate Gazetteer and The Radiant Citadel, adventures like Uni and the Hunt for the Lost Horn and Giants of the Star Forge, and a compendium of monsters from Dragonlance, are also included.This month, Kobold Press has parallel offerings with its cheekily named ADVENTure calendar. Every Monday, Wednesday, and Friday, the company will release free digital supplements compatible with Dungeons & Dragons 5e and its own Tales of the Valiant system. Among the releases include adventures like the Shards of the Spellforge and Mad Maze of the Moon Kingdom, the Deep Magic subclass collection, the Shoulders of Giants monster guide, and the 5e sci-fi supplement Reach for the Stars. Kobold Press is also running a 20% off discount for many of its titles during its general Holiday Sale.Both sellers will have more options available throughout the rest of the month. D&D Beyonds 12 Days of D&D is running until December 15th (after which they wont be available for free, but can still be purchased). But dont worry, Kobold Press is giving away PDFs of its titles every Monday, Wednesday, and Friday until Dec. 25.

You can safely use scroll-driven animations in Chrome as of December 2024. Firefox supports them, too, though youll need to enable a flag. Safari? Not yet, but dont worry you can still offer a seamless experience across all browsers with a polyfill. Just keep in mind that adding a polyfill involves a JavaScript library, so you wont get the same performance boost.There are plenty of valuable resources to dive into scroll-driven animations, which Ill be linking throughout the article. My starting point was Bramus video tutorial, which pairs nicely with Geoffs in-depth notes Graham that build on the tutorial.In this article, well walk through the latest published version by the W3C and explore the two types of scroll-driven timelines scroll progress timelines and view progress timelines. By the end, I hope that you are familiar with both timelines, not only being able to tell them apart but also feeling confident enough to use them in your work.Note: All demos in this article only work in Chrome 116 or later at the time of writing.Scroll Progress TimelinesThe scroll progress timeline links an animations timeline to the scroll position of a scroll container along a specific axis. So, the animation is tied directly to scrolling. As you scroll forward, so does the animation. Youll see me refer to them as scroll-timeline animations in addition to calling them scroll progress timelines.Just as we have two types of scroll-driven animations, we have two types of scroll-timeline animations: anonymous timelines and named timelines.Anonymous scroll-timelineLets start with a classic example: creating a scroll progress bar at the top of a blog post to track your reading progress.See the Pen Scroll Progress Timeline example - before animation-timeline scroll() [forked] by Mariana Beldi. In this example, theres a <div> with the ID progress. At the end of the CSS file, youll see it has a background color, a defined width and height, and its fixed at the top of the page. Theres also an animation that scales it from 0 to 1 along the x-axis pretty standard if youre familiar with CSS animations!Heres the relevant part of the styles:#progress { /* ... */ animation: progressBar 1s linear;}@keyframes progressBar { from { transform: scaleX(0); }}The progressBar animation runs once and lasts one second with a linear timing function. Linking this animation scrolling is just a single line in CSS:animation-timeline: scroll();No need to specify seconds for the durationthe scrolling behavior itself will dictate the timing. And thats it! Youve just created your first scroll-driven animation! Notice how the animations direction is directly tied to the scrolling direction scroll down, and the progress indicator grows wider; scroll up, and it becomes narrower.See the Pen Scroll Progress Timeline example - animation-timeline scroll() [forked] by Mariana Beldi.scroll-timeline Property ParametersIn a scroll-timeline animation, the scroll() function is used inside the animation-timeline property. It only takes two parameters: <scroller> and <axis>.<scroller> refers to the scroll container, which can be set as nearest (the default), root, or self.<axis> refers to the scroll axis, which can be block (the default), inline, x, or y.In the reading progress example above, we didnt declare any of these because we used the defaults. But we could achieve the same result with:animation-timeline: scroll(nearest block);Here, the nearest scroll container is the root scroll of the HTML element. So, we could also write it this way instead:animation-timeline: scroll(root block);The block axis confirms that the scroll moves top to bottom in a left-to-right writing mode. If the page has a wide horizontal scroll, and we want to animate along that axis, we could use the inline or x values (depending on whether we want the scrolling direction to always be left-to-right or adapt based on the writing mode).Well dive into self and inline in more examples later, but the best way to learn is to play around with all the combinations, and this tool by Bramus lets you do exactly that. Spend a few minutes before we jump into the next property associated with scroll timelines.The animation-range PropertyThe animation-range for scroll-timeline defines which part of the scrollable content controls the start and end of an animations progress based on the scroll position. It allows you to decide when the animation starts or ends while scrolling through the container.By default, the animation-range is set to normal, which is shorthand for the following:animation-range-start: normal;animation-range-end: normal;This translates to 0% (start) and 100% (end) in a scroll-timeline animation:animation-range: normal normal;which is the same as:animation-range: 0% 100%;You can declare any CSS length units or even calculations. For example, lets say I have a footer thats 500px tall. Its filled with banners, ads, and related posts. I dont want the scroll progress bar to include any of that as part of the reading progress. What I want is for the animation to start at the top and end 500px before the bottom. Here we go:animation-range: 0% calc(100% - 500px);See the Pen Scroll Progress Timeline example - animation-timeline, animation-range [forked] by Mariana Beldi.Just like that, weve covered the key properties of scroll-timeline animations. Ready to take it a step further?Named scroll-timelineLets say I want to use the scroll position of a different scroll container for the same animation. The scroll-timeline-name property allows you to specify which scroll container the scroll animation should be linked to. You give it a name (a dashed-ident, e.g., --my-scroll-timeline) that maps to the scroll container you want to use. This container will then control the animations progress as the user scrolls through it.Next, we need to define the scroll axis for this new container by using the scroll-timeline-axis, which tells the animation which axis will trigger the motion. Heres how it looks in the code:.my-class { /* This is my new scroll-container */ scroll-timeline-name: --my-custom-name; scroll-timeline-axis: inline;}If you omit the axis, then the default block value will be used. However, you can also use the shorthand scroll-timeline property to combine both the name and axis in a single declaration:.my-class { /* Shorthand for scroll-container with axis */ scroll-timeline: --my-custom-name inline;}I think its easier to understand all this with a practical example. Heres the same progress indicator weve been working with, but with inline scrolling (i.e., along the x-axis):See the Pen Named Scroll Progress Timeline [forked] by Mariana Beldi.We have two animations running:A progress bar grows wider when scrolling in an inline direction.The containers background color changes the further you scroll.The HTML structure looks like the following:<div class="gallery"> <div class="gallery-scroll-container"> <div class="gallery-progress" role="progressbar" aria-label="progress"></div> <img src="image1.svg" alt="Alt text" draggable="false" width="500"> <img src="image2.svg" alt="Alt text" draggable="false" width="500"> <img src="image3.svg" alt="Alt text" draggable="false" width="500"> </div></div>In this case, the gallery-scroll-container has horizontal scrolling and changes its background color as you scroll. Normally, we could just use animation-timeline: scroll(self inline) to achieve this. However, we also want the gallery-progress element to use the same scroll for its animation.The gallery-progress element is the first inside gallery-scroll-container, and we will lose it when scrolling unless its absolutely positioned. But when we do this, the element no longer occupies space in the normal document flow, and that affects how the element behaves with its parent and siblings. We need to specify which scroll container we want it to listen to.Thats where naming the scroll container comes in handy. By giving gallery-scroll-container a scroll-timeline-name and scroll-timeline-axis, we can ensure both animations sync to the same scroll:.gallery-scroll-container { /* ... */ animation: bg steps(1); scroll-timeline: --scroller inline;}And is using that scrolling to define its own animation-timeline:.gallery-scroll-container { /* ... */ animation: bg steps(1); scroll-timeline: --scroller inline; animation-timeline: --scroller;}Now we can scale this name to the progress bar that is using a different animation but listening to the same scroll:.gallery-progress { /* ... */ animation: progressBar linear; animation-timeline: --scroller;}This allows both animations (the growing progress bar and changing background color) to follow the same scroll behavior, even though they are separate elements and animations.The timeline-scope PropertyWhat happens if we want to animate something based on the scroll position of a sibling or even a higher ancestor? This is where the timeline-scope property comes into play. It allows us to extend the scope of a scroll-timeline beyond the current elements subtree. The value of timeline-scope must be a custom identifier, which again is a dashed-ident.Lets illustrate this with a new example. This time, scrolling in one container runs an animation inside another container:See the Pen Scroll Driven Animations - timeline-scope [forked] by Mariana Beldi.We can play the animation on the image when scrolling the text container because they are siblings in the HTML structure:<div class="main-container"> <div class="sardinas-container"> <img ...> </div> <div class="scroll-container"> <p>Long text...</p> </div></div>Here, only the .scroll-container has scrollable content, so lets start by naming this:.scroll-container { /* ... */ overflow-y: scroll; scroll-timeline: --containerText;}Notice that I havent specified the scroll axis, as it defaults to block (vertical scrolling), and thats the value I want.Lets move on to the image inside the sardinas-container. We want this image to animate as we scroll through the scroll-container. Ive added a scroll-timeline-name to its animation-timeline property:.sardinas-container img { /* ... */ animation: moveUp steps(6) both; animation-timeline: --containerText;}At this point, however, the animation still wont work because the scroll-container is not directly related to the images. To make this work, we need to extend the scroll-timeline-name so it becomes reachable. This is done by adding the timeline-scope to the parent element (or a higher ancestor) shared by both elements:.main-container { /* ... */ timeline-scope: --containerText;}With this setup, the scroll of the scroll-container will now control the animation of the image inside the sardinas-container!Now that weve covered how to use timeline-scope, were ready to move on to the next type of scroll-driven animations, where the same properties will apply but with slight differences in how they behave.View Progress TimelinesWe just looked at scroll progress animations. Thats the first type of scroll-driven animation of the two. Next, were turning our attention to view progress animations. Theres a lot of similarities between the two! But theyre different enough to warrant their own section for us to explore how they work. Youll see me refer to these as view-timeline animations in addition to calling them view progress animations, as they revolve around a view() function.The view progress timeline is the second type of type of scroll-driven animation that were looking at. It tracks an element as it enters or exits the scrollport (the visible area of the scrollable content). This behavior is quite similar to how an IntersectionObserver works in JavaScript but can be done entirely in CSS.We have anonymous and named view progress timelines, just as we have anonymous and named scroll progress animations. Lets unpack those.Anonymous View TimelineHeres a simple example to help us see the basic idea of anonymous view timelines. Notice how the image fades into view when you scroll down to a certain point on the page:See the Pen View Timeline Animation - view() [forked] by Mariana Beldi.Lets say we want to animate an image that fades in as it appears in the scrollport. The images opacity will go from 0 to 1. This is how you might write that same animation in classic CSS using @keyframes:img { /* ... */ animation: fadeIn 1s;}@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; }}Thats great, but we want the image to fadeIn when its in view. Otherwise, the animation is sort of like a tree that falls in a forest with no one there to witness it did the animation ever happen? Well never know!We have a view() function that makes this a view progress animation with a single line of CSS:img { /* ... */ animation: fadeIn; animation-timeline: view();}And notice how we no longer need to declare an animation-duration like we did in classic CSS. The animation is no longer tied by time but by space. The animation is triggered as the image becomes visible in the scrollport.View Timeline ParametersJust like the scroll-timeline property, the view-timeline property accepts parameters that allow for more customization:animation-timeline: view( );<inset>Controls when the animation starts and ends relative to the elements visibility within the scrollport. It defines the margin between the edges of the scrollport and the element being tracked. The default value is auto, but it can also take length percentages as well as start and end values.<axis>This is similar to the scroll-timelines axis parameter. It defines which axis (horizontal or vertical) the animation is tied to. The default is block, which means it tracks the vertical movement. You can also use inline to track horizontal movement or simple x or y.Heres an example that uses both inset and axis to customize when and how the animation starts:img { animation-timeline: view(20% block);}In this case:The animation starts when the image is 20% visible in the scrollport.The animation is triggered by vertical scrolling (block axis).Parallax EffectWith the view() function, its also easy to create parallax effects by simply adjusting the animation properties. For example, you can have an element move or scale as it enters the scrollport without any JavaScript:img { animation: parallaxMove 1s; animation-timeline: view();}@keyframes parallaxMove { to { transform: translateY(-50px); }}This makes it incredibly simple to create dynamic and engaging scroll animations with just a few lines of CSS.See the Pen Parallax effect with CSS Scroll driven animations - view() [forked] by Mariana Beldi.The animation-range PropertyUsing the CSS animation-range property with view timelines defines how much of an elements visibility within the scrollport controls the start and end points of the animations progress. This can be used to fine-tune when the animation begins and ends based on the elements visibility in the viewport.While the default value is normal, in view timelines, it translates to tracking the full visibility of the element from the moment it starts entering the scrollport until it fully leaves. This is represented by the following:animation-range: normal normal;/* Equivalent to */animation-range: cover 0% cover 100%;Or, more simply:animation-range: cover;There are six possible values or timeline-range-names:coverTracks the full visibility of the element, from when it starts entering the scrollport to when it completely leaves it.containTracks when the element is fully visible inside the scrollport, from the moment its fully contained until it no longer is.entryTracks the element from the point it starts entering the scrollport until its fully inside.exitTracks the element from the point it starts, leaving the scrollport until its fully outside.entry-crossingTracks the element as it crosses the starting edge of the scrollport, from start to full crossing.exit-crossingTracks the element as it crosses the end edge of the scrollport, from start to full crossing.You can mix different timeline-range-names to control the start and end points of the animation range. For example, you could make the animation start when the element enters the scrollport and end when it exits:animation-range: entry exit;You can also combine these values with percentages to define more custom behavior, such as starting the animation halfway through the elements entry and ending it halfway through its exit:animation-range: entry 50% exit 50%;Exploring all these values and combinations is best done interactively. Tools like Bramus view-timeline range visualizer make it easier to understand.Target Range Inside @keyframesOne of the powerful features of timeline-range-names is their ability to be used inside @keyframes:See the Pen target range inside @keyframes - view-timeline, timeline-range-name [forked] by Mariana Beldi.Two different animations are happening in that demo:slideInWhen the element enters the scrollport, it scales up and becomes visible.slideOutWhen the element leaves, it scales down and fades out.@keyframes slideIn { from { transform: scale(.8) translateY(100px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; }}@keyframes slideOut { from { transform: scale(1) translateY(0); opacity: 1; } to { transform: scale(.8) translateY(-100px); opacity: 0 }}The new thing is that now we can merge these two animations using the entry and exit timeline-range-names, simplifying it into one animation that handles both cases:@keyframes slideInOut { /* Animation for when the element enters the scrollport */ entry 0% { transform: scale(.8) translateY(100px); opacity: 0; } entry 100% { transform: scale(1) translateY(0); opacity: 1; } /* Animation for when the element exits the scrollport */ exit 0% { transform: scale(1) translateY(0); opacity: 1; } exit 100% { transform: scale(.8) translateY(-100px); opacity: 0; }}entry 0%Defines the state of the element at the beginning of its entry into the scrollport (scaled down and transparent).entry 100%Defines the state when the element has fully entered the scrollport (fully visible and scaled up).exit 0%Starts tracking the element as it begins to leave the scrollport (visible and scaled up).exit 100%Defines the state when the element has fully left the scrollport (scaled down and transparent).This approach allows us to animate the elements behavior smoothly as it both enters and leaves the scrollport, all within a single @keyframes block.Named view-timeline And timeline-scopeThe concept of using view-timeline with named timelines and linking them across different elements can truly expand the possibilities for scroll-driven animations. In this case, we are linking the scroll-driven animation of images with the animations of unrelated paragraphs in the DOM structure by using a named view-timeline and timeline-scope.The view-timeline property works similarly to the scroll-timeline property. Its the shorthand for declaring the view-timeline-name and view-timeline-axis properties in one line. However, the difference from scroll-timeline is that we can link the animation of an element when the linked elements enter the scrollport. I took the previous demo and added an animation to the paragraphs so you can see how the opacity of the text is animated when scrolling the images on the left:See the Pen View-timeline, timeline-scope [forked] by Mariana Beldi.This one looks a bit verbose, but I found it hard to come up with a better example to show the power of it. Each image in the vertical scroll container is assigned a named view-timeline with a unique identifier:.vertical-scroll-container img:nth-of-type(1) { view-timeline: --one; }.vertical-scroll-container img:nth-of-type(2) { view-timeline: --two; }.vertical-scroll-container img:nth-of-type(3) { view-timeline: --three; }.vertical-scroll-container img:nth-of-type(4) { view-timeline: --four; }This makes the scroll timeline of each image have its own custom name, such as --one for the first image, --two for the second, and so on.Next, we connect the animations of the paragraphs to the named timelines of the images. The corresponding paragraph should animate when the images enter the scrollport:.vertical-text p:nth-of-type(1) { animation-timeline: --one; }.vertical-text p:nth-of-type(2) { animation-timeline: --two; }.vertical-text p:nth-of-type(3) { animation-timeline: --three; }.vertical-text p:nth-of-type(4) { animation-timeline: --four; }However, since the images and paragraphs are not directly related in the DOM, we need to declare a timeline-scope on their common ancestor. This ensures that the named timelines (--one, --two, and so on) can be referenced and shared between the elements:.porto { /* ... */ timeline-scope: --one, --two, --three, --four;}By declaring the timeline-scope with all the named timelines (--one, two, --three, --four), both the images and the paragraphs can participate in the same scroll-timeline logic, despite being in separate parts of the DOM tree.Final NotesWeve covered the vast majority of whats currently defined in the CSS Scroll-Driven Animations Module Leve 1 specification today in December 2024. But I want to highlight a few key takeaways that helped me better understand these new rules that you may not get directly from the spec:Scroll container essentialsIt may seem obvious, but a scroll container is necessary for scroll-driven animations to work. Issues often arise when elements like text or containers are resized or when animations are tested on larger screens, causing the scrollable area to disappear.Impact of position: absoluteUsing absolute positioning can sometimes interfere with the intended behavior of scroll-driven animations. The relationship between elements and their parent elements gets tricky when position: absolute is applied.Tracking an elements initial stateThe browser evaluates the elements state before any transformations (like translate) are applied. This affects when animations, particularly view timelines, begin. Your animation might trigger earlier or later than expected due to the initial state.Avoid hiding overflowUsing overflow: hidden can disrupt the scroll-seeking mechanism in scroll-driven animations. The recommended solution is to switch to overflow: clip. Bramus has a great article about this and a video from Kevin Powell also suggests that we may no longer need overflow: hidden.PerformanceFor the best results, stick to animating GPU-friendly properties like transforms, opacity, and some filters. These skip the heavy lifting of recalculating layout and repainting. On the other hand, animating things like width, height, or box-shadow can slow things down since they require re-rendering. Bramus mentioned that soon, more propertieslike background-color, clip-path, width, and heightwill be animatable on the compositor, making the performance even better.Use will-change wiselyLeverage this property to promote elements to the GPU, but use it sparingly. Overusing will-change can lead to excessive memory usage since the browser reserves resources even if the animations dont frequently change.The order mattersIf you are using the animation shorthand, always place the animation-timeline after it.Progressive enhancement and accessibilityCombine media queries for reduced motion preferences with the @supports rule to ensure animations only apply when the user has no motion restrictions, and the browser supports them.For example:@media screen and (prefers-reduce-motion: no-preference) { @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) { .my-class { animation: moveCard linear both; animation-timeline: view(); } } }My main struggle while trying to build the demos was more about CSS itself than the scroll animations. Sometimes, building the layout and generating the scroll was more difficult than applying the scroll animation. Also, some things that confused me at the beginning as the spec keeps evolving, and some of these are not there anymore (remember, it has been under development for more than five years now!):x and y axesThese used to be called the horizontal and vertical axes, and while Firefox may still support the old terminology, it has been updated.Old @scroll-timeline syntaxIn the past, @scroll-timeline was used to declare scroll timelines, but this has changed in the most recent version of the spec.Scroll-driven vs. scroll-linked animationsScroll-driven animations were originally called scroll-linked animations. If you come across this older term in articles, double-check whether the content has been updated to reflect the latest spec, particularly with features like timeline-scope.ResourcesAll demos from this article can be found in this collection, and I might include more as I experiment further.A collection of demos from CodePen that I find interesting (send me yours, and Ill include it!)This GitHub repo is where you can report issues or join discussions about scroll-driven animations.Demos, tools, videos, and (even) more information from BramusGoogle Chrome video tutorial

10. House of Color: A Vibrant Tiny Cottage in a Warsaw GardenLocated near the city center of Warsaw, Poland, an unexpected haven lies within the gardens of a family allotment of land. Designed by NOKE Architects, the electric House of Color reflects the bold personalities of its owners, who sought tranquility away from the citys chaos without sacrificing its accessibility.9. Introducing MO.CA: The Future of Sustainable Living in a Mobile HomeIn a world where sustainability and mobility are becoming increasingly important, the Institute for Advanced Architecture of Catalonia (IAAC) has shared a groundbreaking project MO.CA (MOBILE CATALYST). This modern mobile home, crafted from zero-kilometer natural materials and employing cutting-edge digital construction techniques, marks a new option for eco-friendly living.8. Hi-Hat House Embraces Modular Aesthetics With Traditional CraftsmanshipIn the picturesque foothills of Boulder, Colorado, the Hi-Hat House stands as an example of adaptive architecture and design ingenuity. Designed by architecture firm FLOWER, this cozy home for empty nesters is a blend of modular design principles and traditional building techniques.7. A Modern Wood Pavilion Seamlessly Integrated Into Californias Joshua TreeIndustry of All Nations (IOAN) designed The Landing House, a modern wood pavilion that was seamlessly integrated into the rugged Mojave Desert landscape, near Californias Joshua Tree National Park. In the vast expanse of the desert, where the landscape is both harsh and delicate, the home is an example of eco-sensitive design that not only respects but enhances the surrounding environment.6. A Guemes Island Guest Cabin Thats Rustic Yet ModernNestled on Guemes Island looking out to the Bellingham Channel in Washington State, the Guemes Island Bunkhouse is two-story retreat with a nod to the past. Designed by SHED Architecture & Design, the rustic yet modern bunkhouse is set to be a family heirloom for future generations to enjoy on family vacations.5. A Bay Area Home Merges Architecture, Art, and Outdoor LivingThe Bay Area Home, designed by the Olson Kundigwith interiors by Nicole Hollis of NICOLEHOLLIS, was carefully crafted to promote the familys active and art-filled life. Situated in an established San Francisco Bay Area neighborhood, the house is a relaxing haven amid city life, blending indoor and outdoor living with the help of mature oak trees, reflective water features, and expansive views of curated gardens.4. A Historic Building With a 3D-Printed Ceramic Facade in AmsterdamRotterdam-based design firm Studio RAP designed a bespoke facade in Amsterdam called the Ceramic House. This project showcases the seamless integration of tradition and innovation through the use 3D-printed ceramic technology. By utilizing custom algorithms and 3D-printed ceramic tiles, Studio RAP transformed a boutique facade into a mesmerizing display of texture, form, and craftsmanship.3. A Nondescript Los Angeles Ranch Gets a Japandi TransformationInspired by mid-century Eichler homes, Wagoya House pays homage to the iconic architectural style while incorporating contemporary design elements. The residence, located in the Los Angeles neighborhood of Westchester, began as a indistinctive, outdated ranch before undergoing a major transformation at the hands of Alloi. Built with a Japanese post and beam construction method called wagoya, the house harmoniously blends natural materials, sustainability, and functionality.2. The Mid-Century Lark House Embraces Modernity While Preserving HistoryIn West Seattle, Washington, perched atop a cliff with views of Vashon Island, the Olympic Mountains, and the Puget Sound, stands the Lark House. Originally designed in 1958, this mid-century gem has undergone a transformative renovation, reimagining its space to better align with its present owners while honoring its legacy. The project, led by SHED Architecture & Design, breathes new life into the home by delicately balancing innovation with preservation.And the top architecture post of 2024 is1. SHED Revives a Mid-Century House in Portland With Japanese MinimalismNestled in a serene, forested enclave of Portland, Oregon, the Mori House merges mid-century modern architecture with contemporary minimalist sensibilities. Originally designed in 1963 by Saul Zaik, this home has been thoughtfully reimagined by SHED Architecture & Design to meet the aesthetic and functional needs of its new owners: a young family with a passion for design.Check out the rest of Design Milks end of the year coverage here!

If your floors need a splash of vibrant color and a touch of sculptural artistry, the latest collaboration from award-winning British rug designer Sonya Winner and American architect Kevin McClellan might just be the palette cleanser you need. Inspired by the mesmerizing canyons of Sedona, Arizona, the aptly named Sedona series, which includes the Sedona Square Rug and Sedona Irregular Rug, follows up on Winners 2021 Antelope Canyon collection, both marrying bold design with the beauty of nature. This time, the Sedona rugs capture the intense, earthy hues and organic silhouettes of the regions sandstone landscapes, blending bold design with the awe-inspiring beauty of nature.Winners signature use of irregular compositions and organic shapes found new depth through McClellans inventive architectural approach. His unique perspective on form and space artistically captures the lines, colors, and shapes of the Sedona landscape. When youre in Sedona and surrounded by the valleys, its very inspiring. The variation in the rock formation is like nothing else. Its a nexus of different typographies and climate zones from icy cold rivers created by the snowmelt to red rock and shrubby bush, says McClellan. The juxtaposition of plants and rocks sparked my idea for the series and the collaboration with Sonya has allowed me to come back to Sedona and see it with fresh eyes.Breaking away from traditional rectilinear shape, the Sedona rugs feel almost sculptural, even as they lie flat on the floor. Each piece is assembled in layers, handcrafted by a dedicated artisanal team to ensure that every line, color, and curve feels as natural and effortless as the landscape it reflects. Crafted from sustainable and durable New Zealand wool, the rugs are made to last as long as the canyons have been standing.The Sedona collection is available in six sizes, with bespoke options ready for those who dream big. Each one is ready to offer a slice of Arizonas unparalleled beauty right beneath your feet.Sedona Irregular RugSedona Square RugTo explore or shop the Sedona collection by Sonya Winner and Kevin McClellan, visit sonyawinner.com.

Without a coherent hypothesis for both user outcomes & business impact, a product teams outputs are waste rather thanvalueWhen thinking about product development, I perpetually return to two powerfulideas:Design works through abstracting and adapting systems (including from one domain toanother)A product is a system for delivering value, which means that a design practice is a kind of product that can bedesignedCombined, these ideas form a thesis: through studying other systems of value delivery, we can design not only products that are more valuable to our users, but also a practice that is more valuable to our organizations.And one of the most important aspects of a value-generating system is how that system transforms resources and effort intowaste.Getting nothing for somethingIf you are asking me to do work for exposure, you have to explain to me why its not the kind of exposure people die of.KJCharlesValue is a matter of perspective; when we say we are creating value the next question should always be forwhom?No domain better illustrates this principle than writing. In pure economic terms, the value of a writers writing is not the text itself, but in the ability to sell it to someone (such as a publisher who, in turn, derives value from putting the writing next to some ads). In theory, both the buyer and the seller of the writing gain value from the exchange.However, many writers are offered a much more dubious exchange: for exposure. In other words: if you give me free stuff, others will see what a great job youvedone.Writers who follow up to understand exactly what kind of bump in commissions or book sales others have actually seen as a result of this exposure are usually met with abstract promises and few if any figures. They are just being asked to work for free, but with extrasteps.Writers who end up working for exposure are still creating valuefor their customer. But for themselves, this work has novalue.Time & resources spent on outputs without value have another name:waste.Which brings us back to software.One mans waste is another mansvelocity[Many designers] think that user centricity is self-evidently desirable. As a result, they cant make convincing business arguments for their role.JorgeArangoUnlike freelance writers, product teams typically work for a salary. And yet, they do a tremendous amount of work for exposure. Its just that the pitch looks slightly different: instead of write me this article so that people can read it we can observe add this feature to the app so that users can use it across every product backlog in thenation.Animal Man#25From the perspective of the organization, its exactly the same situation as working for exposure, and just about as effective. The resources expended towards these features are converted directly into waste at 100% efficiency.Who will see it? What will the impact of them seeing it be? How have previous features performed? How will this work actually fit into the business strategy?Unless you can answer all of these questions, youre building features for exposure.Build-measure-learn optimizes forwastePeople get obsessed with change as a substitution for leadership so they interpret little change as evidence that leadership is missing.JoshuaFoustOne of the most common arguments used when building features for exposure is we cant answer those questions until we ship andsee.Sometimes, this will be true. For those true zero-to-one products, with nothing at all in production, theres no replacement for real data from real users (although, once again, you really should be studying analogous domains).But somehow the same argument ends up dragging past that first release: we still cant know, we have to ship more. The absence of measurable impact is interpreted not as a lack of value, but as a lack ofoutputs.And until the system is interrupted, the cycle of waste continues.Greenberg the Vampire, Bizarre Adventures #29Just like the author must ask how exposure will convert into book sales, we must ask how shipping will actually turn into seeing. What will make this release different from every previous release, so that we may at last begin to measure andlearn?Or, when the feature is done, will we begin working on the next assumption-informed feature in the roadmap, until someone realizes that all of this velocity amounts to waste and starts pointingfingers?Stop building features for exposure was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.

The daunting discussion around automated vs human-driven testing pushed me to arm myself with a pen again and write more about a diamond in the crown of all testing techniquesexploratory testingDo you remember Sherlocks hat? The legendary detective Sherlock Holmes (a character created by Arthur Conan Doyle) is best remembered for solving mysteries in the London fog, puffing on his pipe and a hat. It has become stereotypical headgear for detectives who investigate the most complicated cases.In our work routine, we wear multiple hats daily. Product Owners, Developers, Designers, and QA Engineers might juggle the various roles in line with the new challenges. However, the QA Engineers are often the ones in the team who try the imaginary detectives hat. And I must say, if you are a good QA, it will fityou.I started my career in software testing as a manual or (better to say) human QA Engineer. In a few years, I also learned the basics of automation in the Gherkin syntax, helped the Developers select the tests for automation, and regularly monitored the status of automated tests in CI/CD pipelines. Yet my primary focus was on applying human-driven testing techniques and improving the general teams testing strategy, which included manual and automated tests on multiple productlayers.Now, my eyes widen once I hear from some community voices that manual testers are obsolete. I dont take it as a personal offence. However, it is still hard to understand: are we ready to allow tools (machinery) to evaluate usability, UX, and accessibility, detect edge cases and UI glitches, and play with the product ashumans?Industry experts note that human-driven testing techniques are still essential for the products development. However, I observe that some well-known companies over-rely on automated tests ignoring human-driven testing techniques, which might be unhealthy for the overall products quality. Ive already touched on the danger of over-relying on automation in one of the recent stories. After some conversations on LinkedIn, Ive got a push to write more about one of the most exciting manual testing techniquesexploratory testing.Manual testing? Is it stillalive?First, lets clarify: does manual testing still rock? If yes, then why? Before some sceptics grab the raw tomato to throw in the author, Id like to clarify: yes, human-driven testing techniques matter. Without skills in human-driven techniques such as exploratory testing, the QA professionals would be redundant and could be easily replaced by AI. But it has not happened(yet).The aha! moment struck me after listening to the great talk In Praise of Manual Testing given by Sue Atkins at TestBustersNight (arranged by Rudolf Groetz). Sue stressed that we are still not at the point of delegating all the human-driven testing activities to AI-driven tools. That talk also sparked a discussion about whether the label manual is appropriate for testing activities humans perform. Other namings such as in person testing (originally suggested by Julian Harty) could workbetter.Dont get me wrong, I stand for the balanced approach in QA. An agile tester should be able to apply human-driven techniques and automate certain tests or collaborate on automation with developers. However, there are features that tools (machines) are bad at: they lack creativity, empathy and intuition.Automated tests will hardly detect edge cases that Developers or Designers did not think of (unhappy paths). They will not be able to assess UX from a deeper perspective and according to the product quality attributes (see ISO 25010: Systems and software engineering). Instead, human QA will excel in those areas. Consequently, the existing tools could hardly explore the product at the same level ashumans.As James Lyndsaynotes:An automated test wont tell you that the systems slow, unless you tell it to look in advance. It wont tell you that the window leaves a persistent shadow, that every other record in the database has been trashed, that even the false are returning true, unless it knows where to look, and what to look for. Sure, you may notice a problem as you dig through the reams of data youve asked it to gather, but then were back to exploratory techniques again.So lets come closer to exploratory testing and detectives hat.Exploratory testing in anutshellExploratory tests are purely based on human creativity and curiosity. These are tests performed without a prepared written script, where the testers are supposed to find issues on the fly. The exploratory tests allow us to investigate the system behaviours missed by scripted tests (e.g. end-to-end tests). As a result, the edge cases, UX discrepancies, and glitches will be detected:An exploratory test needs no script, no chosen set of actions. Choice of actions is up to the tester, at the point of testing. Choice of information, of observation, is limited not by pre-existing design, but by opportunity and resource. Moment to moment, the tester chooses what to do, what to do it with, how to check whats happened. Interesting things will be examined in more detail, weaknesses tried, doorknobs jiggled. The tester chooses to try two things together that between them open the system to a world of pain. The tester chooses to use this information, with that action, not to just to see whats desirable, but whats possible. The exploratory tester focuses onrisk.Exploratory testing is more spontaneous and informal than scripted testing, but it still requires discipline to be done properly. Normally, exploratory tests are guided by a defined goal (e.g. to test a new feature) and usually are executed in a session-based (time-boxed) manner. Testers might use a charter (task card) in which they note their observations.To make an impact, exploratory testing should be applied regularly. As Martin Fowler observes, it is not a good sign if the team does not perform exploratory testing: Even the best automated testing is inherently scripted testingand that alone is not good enough. From my experience, I suggest devoting time to exploratory testing sessionsweekly.QA Engineers, Developers, Product Owners, or Designers might perform the exploratory tests individually. In agile teams, each member can contribute to the quality by exploring the product and informing the team about their findings.Exploratory testing can also be applied in pairs using peer programming principles. As Mariia Hutsuk and Sivamoorthy Bose write, the paired exploratory testing assumes two roles. One person is a driver, another is a navigator:Driver is a person at the wheel, this person should focus on the application while he/she is performing actions and ask questions if they occur. The navigator is in an observer position and tells direction of further checks and makes notes of steps or findings. Those roles can be changed from time totime.From my experience, you will reach the multiplier effect by arranging a teams exploratory testing sessiona so-called bug bash. To detect potential bugs as soon as possible, the team might perform exploratory testing once new features are coded in the developers environments.Here is an example of a charter template for an imaginary teams exploratory testingsession.Hey! Todays goal is to step into the users shoes and test the Amazing Portal customer flows. Use your skills and intuition to find as many visual or functional issues in the product as possible. Once you run into a bug or UX discrepancy, note it in the test charter. Below are just loose guidelines. Anyhow, you will need to invent your scenarios on thefly.Task 1As a Customer, browse the products listed on AmazingPortal.Task 2As a Customer, make an order of the products A, B, C,D.Task 3As a Customer, update the data in the Customers Profile.Task 4As a Customer, explore other areas of AmazingPortal.Once the exploratory session is completed, the detected issues should be reported and discussed within the team. Sometimes, the feature must be completely reworked due to the findings revealed in the session. This might be painful for the team, yet it is still a win-win situation because there will be less rework in the later stages of development for Designers and Developers, and less pain and frustration for the customers.I believe no AI-driven tools can replace human creativity, empathy and intuition in testing. Thus human-driven techniques such as exploratory testing are still in demand and should be applied actively by the team members, whether they are Developers, Designers, Product Owners or QA Engineers (in case your team is lucky enough to have one;)) If used at the earliest stages of development, the exploratory testing will guide you through the potential edge cases and product issues, both visible for the users (UI level) and hidden ones (API level, backend behaviours). This might truly impact the quality of the product, reduce the costs of rework in the long run and shift the whole teams testing strategy to the left. To achieve that, keep exploring and wear your Sherlocks hatproudly.You may check my LinkedIn page if you feel like connecting with me or are curious about my background. As a QA Engineer with over 7 years of commercial experience in the industry, Im ready to communicate with teams looking for guidance and help in enhancing product quality and testing. At this very moment, Im looking for a new role as a QA Analyst, QA Engineer or QALead.Illustrations: by me (Apple Pencil, iPad, and no AI:))Resources:Sue Atkings, Playing with softwarelearning like a tester: https://medium.com/@TestSprite/playing-with-software-learning-like-a-tester-ca7412537d6bJames Lyndsay, Why Exploration has a Place in any Strategy: https://www.workroom-productions.com/why-exploration-has-a-place-in-any-strategy/Mike Chang, Running an Effective Bug Bash: https://medium.com/@changbot/running-an-effective-bug-bash-317fafa9d963Mariia Hutsuk and Sivamoorthy Bose, Importance of Exploratory Testing: https://medium.com/quality-matters/importance-of-exploratory-testing-3f02e34dc0c3Martin Fowler, Exploratory Testing: https://martinfowler.com/bliki/ExploratoryTesting.htmlTest smart: how to explore a product like Sherlock? was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.

Once you've worked your way through the best stretches for your upper back (not to mention your shoulders and hamstrings), you may want something for your lower back as well. Here are some stretches that will make your lower back feel great, or that can be added into a full-body stretching routine.Before we get into my favorite stretches, I want to say a few words about what it means when you have a stiff back. Pain or stiffness in the lower back is really common, but it tends to respond well to almost any type of exercise. Stretching is good, but so is strengthening, and so is movement in general (like walking, yoga, or whatever you like to do to stay at least a little bit active). I have more here on how doctors and scientists currently understand back pain and how to manage itgive that a read if you're concerned about stiffness or discomfort in your back. And now, on to the stretches.Cat/cowLook, it's a classic for a reason. Its also dual-purpose, since I included this in my article on upper back stretches as well. When you do this stretch, focus on the area youre trying to stretch. In this case, its your lower back, so make sure youre rounding and extending your lower back by tilting your pelvis, not putting all the motion into your upper back and shoulders.To do a cat/cow:Get on your hands and knees on the floor, with hands under your shoulders and knees under your hips. You should feel stable here. Use a yoga mat or cushion under your knees if you have a hard floor.Cat: You want to look like one of those Halloween cats thats scared and has its back rounded toward the sky, like a rainbow. Contract your abs, like youre doing a crunch, and try to feel a stretch in your lower back (and maybe your upper back as well, but thats not our focus here). Its OK if you dont feel much of a stretch, just do your best to exaggerate this position.Cow: This is the opposite of the cat position. Keep your arms and legs stable underneath you (like upright pillars) and let your belly relax and sag toward the floor.Go back and forth between cat and cow several times. Take your time, spending a breath or two in each position.Side-to-side childs poseThis one gets your lower back moving in a side-to-side direction.Get into childs pose. Thats the one where youre on your knees, your butt is close to your heels, and youre reaching out in front of you with your face close to the floor. You can spread your knees apart if that helps you get into a more comfortable position. You may feel a stretch in your lower back just from getting into this position. Reach forward as far as you comfortably can.Walk your hands to the left side. Youll feel a stretch on your right side. Stay here for a breath or two.Walk your hands over to the right side, for the opposite stretch.You can go back and forth between these positions for as long as you need.Jefferson curlThis is both a weighted stretch and a strengthening exercise. It may look a little strange if youre remembering all that advice not to lift with your back, but this is a movement that is safe for most people as long as you dont load it too heavy. (Heavy is, of course, relative to your strength level. There are extremely strong people out there Jefferson curling barbells. But you dont have to do that, at least not today.)To do a Jefferson curl:Stand on a step or a stable bench or box to make sure you can bend over without your hands hitting the floor. If youre using a weight, hold it in your hands.Curl your torso toward the ground. Youll end up in a touching-your-toes position, but with a rounded back.Let the weight of your body (and/or the weight youre holding) pull you toward the ground.Slowly stand up by un-curling your torso. This is like the movement thats sometimes described in yoga classes as standing up vertebra by vertebra.Repeat a few times.As you get better at this, youll be able to get deeper into the stretch, which means hanging your hands a little lower. Youll also get stronger, meaning you can start adding weight or increasing the weight you use. People who have been doing Jefferson curls for a while may do them while standing on a plyo box and holding a kettlebell. But its fine to use a chair or a step in your house, and whatever weight (or no weight) you have handy.Cobra pose (sort of)Yoga purists may say Im describing this wrong, but nobody would know what I meant if I said prone back extension, so cobra is the word Im going with. Just dont worry about making it a perfect cobra pose, or for that matter trying to tell the difference between cobra and upward facing dog. The point is that youll be letting your back relax into a position that bends it in the opposite direction of the Jefferson curl described above.Lie on your stomach with tops of your feet on the floor and your hands by your sides as if you were going to do a pushup.Leave your legs and hips on the floor, but push upward with your arms to lift your shoulders off the floor. You can place your hands forward of your shoulders, if thats more comfortable than having them underneath you.Relax your back, letting your stomach sag toward the ground like you did in the cow pose.After settling into this stretch, return your upper body to the floor. You can either repeat this stretch right away, or alternate this with a childs pose (with or without the side-to-side movements).

Every mouse is a little differentsome accelerate faster than others, for exampleand that can get annoying (and even disorienting) if you use one mouse at home and another at work. The Mac's mouse panel in System Settings lets you adjust things like tracking speed, sure, but changing the setting for one mouse changes it for all of them, meaning you can't really get the two devices to meet in the middle.LinearMouse is a free app that lets you choose different settings for every mouse and touchpad you connect to. This can help you solve the acceleration problem I just mentioned and also lets you do things like use natural scrolling on one device and not others. It can also customize all the buttons on your mouse.To get started, you need to download the application and launch it. You will be asked to grant Accessibility permission, which is necessary in order for the application to function. After that you can start configuring your devices. By default, the application will configure whichever device you've used most recentlyyou can configure a specific device instead by clicking the name of your current device in the top toolbar and unchecking the "Auto switch to the active device" option. Do that and you can choose which of your currently connected devices you want to configure. Credit: Justin Pot The app allow you to configure scrolling, pointer movement, and all the buttons on your mouse. The scrolling section has a modifier keys section that I particularly like, which allows you to do things like hold the Command key while scrolling to zoom in. Credit: Justin Pot The buttons section, meanwhile, can re-map the back and forward buttons your mouse may have so that it emulates the swiping motion on a trackpad. You might find that this allows you to use the buttons in more applications. There's also the ability to customize any button on your device to a wide variety of actions, from Mission Control to media playback. You can even trigger a Terminal command, if you want to get fancy.There's one more level of customization here. You can choose settings for any mouse that are specific to a particular application. So if you want to map the buttons on your mouse to do certain things while you're using a particular application, or playing a particular game, you can do that. You can also have your mouse behave differently on different displays. You might, for example, want your mouse to move faster on your giant widescreen without speeding it up on the smaller ones you sometimes use. That's possible.Basically, this is an application you can tweak endlessly to get exactly the experience you want. It's also completely free. Check it out if you wish your mouse worked differently.