• Previewing Content Changes In Your Work Withdocument.designMode
    smashingmagazine.com
    So, you just deployed a change to your website. Congrats! Everything went according to plan, but now that you look at your work in production, you start questioning your change. Perhaps that change was as simple as a new heading and doesnt seem to fit the space. Maybe you added an image, but it just doesnt feel right in that specific context.What do you do? Do you start deploying more changes? Its not like you need to crack open Illustrator or Figma to mock up a small change like that, but previewing your changes before deploying them would still be helpful.Enter document.designMode. Its not new. In fact, I just recently came across it for the first time and had one of those Wait, this exists? moments because its a tool weve had forever, even in Internet Explorer 6. But for some reason, Im only now hearing about it, and it turns out that many of my colleagues are also hearing about it for the first time.What exactly is document.designMode? Perhaps a little video demonstration can help demonstrate how it allows you to make direct edits to a page.At its simplest, document.designMode makes webpages editable, similar to a text editor. Id say its like having an edit mode for the web one can click anywhere on a webpage to modify existing text, move stuff around, and even delete elements. Its like having Apples Distraction Control feature at your beck and call.I think this is a useful tool for developers, designers, clients, and regular users alike.You might be wondering if this is just like contentEditable because, at a glance, they both look similar. But no, the two serve different purposes. contentEditable is more focused on making a specific element editable, while document.designMode makes the whole page editable.How To Enable document.designMode In DevToolsEnabling document.designMode can be done in the browsers developer tools:Right-click anywhere on a webpage and click Inspect.Click the Console tab.Type document.designMode = "on" and press Enter.To turn it off, refresh the page. Thats it.Another method is to create a bookmark that activates the mode when clicked:Create a new bookmark in your browser.You can name it whatever, e.g., EDIT_MODE.Input this code in the URL field:javascript:(function(){document.designMode = document.designMode === 'on' ? 'off' : 'on';})();And now you have a switch that toggles document.designMode on and off.Use CasesThere are many interesting, creative, and useful ways to use this tool.Basic Content EditingI dare say this is the core purpose of document.designMode, which is essentially editing any text element of a webpage for whatever reason. It could be the headings, paragraphs, or even bullet points. Whatever the case, your browser effectively becomes a What You See Is What You Get (WYSIWYG) editor, where you can make and preview changes on the spot.Landing Page A/B TestingLets say we have a product website with an existing copy, but then you check out your competitors, and their copy looks more appealing. Naturally, youd want to test it out. Instead of editing on the back end or taking notes for later, you can use document.designMode to immediately see how that copy variation would fit into the landing page layout and then easily compare and contrast the two versions.This could also be useful for copywriters or solo developers.SEO Title And Meta DescriptionEveryone wants their website to rank at the top of search results because that means more traffic. However, as broad as SEO is as a practice, the <title> tag and <meta> description is a websites first impression in search results, both for visitors and search engines, as they can make or break the click-through rate.The question that arises is, how do you know if certain text gets cut off in search results? I think document.designMode can fix that before pushing it live.With this tool, I think itd be a lot easier to see how different title lengths look when truncated, whether the keywords are instantly visible, and how compelling itd be compared to other competitors on the same search result.Developer WorkflowsTo be completely honest, developers probably wont want to use document.designMode for actual development work. However, it can still be handy for breaking stuff on a website, moving elements around, repositioning images, deleting UI elements, and undoing what was deleted, all in real time.This could help if youre skeptical about the position of an element or feel a button might do better at the top than at the bottom; document.designMode sure could help. It sure beats rearranging elements in the codebase just to determine if an element positioned differently would look good. But again, most of the time, were developing in a local environment where these things can be done just as effectively, so your mileage may vary as far as how useful you find document.designMode in your development work.Client And Team CollaborationIt is a no-brainer that some clients almost always have last-minute change requests stuff like Can we remove this button? or Lets edit the pricing features in the free tier.To the client, these are just little tweaks, but to you, it could be a hassle to start up your development environment to make those changes. I believe document.designMode can assist in such cases by making those changes in seconds without touching production and sharing screenshots with the client.It could also become useful in team meetings when discussing UI changes. Seeing changes in real-time through screen sharing can help facilitate discussion and lead to quicker conclusions.Live DOM TutorialsFor beginners learning web development, I feel like document.designMode can help provide a first look at how it feels to manipulate a webpage and immediately see the results sort of like a pre-web development stage, even before touching a code editor.As learners experiment with moving things around, an instructor can explain how each change works and affects the flow of the page.Social Media Content PreviewWe can use the same idea to preview social media posts before publishing them! For instance, document.designMode can gauge the effectiveness of different call-to-action phrases or visualize how ad copy would look when users stumble upon it when scrolling through the platform. This would be effective on any social media platform.MemesI didnt think itd be fair not to add this. It might seem out of place, but lets be frank: creating memes is probably one of the first things that comes to mind when anyone discovers document.designMode.You can create parody versions of social posts, tweak article headlines, change product prices, and manipulate YouTube views or Reddit comments, just to name a few of the ways you could meme things. Just remember: this shouldnt be used to spread false information or cause actual harm. Please keep it respectful and ethical!Conclusiondocument.designMode = "on" is one of those delightful browser tricks that can be immediately useful when you discover it for the first time. Its a raw and primitive tool, but you cant deny its utility and purpose.So, give it a try, show it to your colleagues, or even edit this article. You never know when it might be exactly what you need.Further ReadingNew Front-End Features For Designers In 2025, Cosima MielkeUseful DevTools Tips and Tricks, Patrick BrossetUseful CSS Tips And Techniques, Cosima Mielke
    0 Comments ·0 Shares ·3 Views
  • Winter Blooms Colorfully at Milwaukee Museum of Art
    design-milk.com
    Even as winters grip lingers and many of us await springs warmth, vibrant signs of life are emerging at the Milwaukee Art Museum (MAM). Over in Windover Hall, DRIFTs latest installation, Meadow, transforms the atrium of the iconic Santiago Calatrava-designed Quadracci Pavilion into a kinetic garden that defies the season. The studio, founded by Dutch artists Lonneke Gordon and Ralph Nauta, is renowned for its innovative fusion of art and technology. Meadow is a continuation of their exploration, drawing inspiration from both North American wildflowers and the museums organic architecture. This ever-changing, immersive dance of light and motion celebrates the intersection of art and nature amid the winter chill.Meadow is the second iteration of the MAMs seasonal Winter Series, which started in 2024 in an effort to bring a spot of joy during the shortest days of the year. In creating Meadow, DRIFT drew on years of research to develop a choreography of kinetic blooms crafted from aluminum, stainless steel, robotic components, and vibrant fabric shades. Each flower is meticulously programmed to open and close in a rhythmic dance that mimics the delicate workings of nature. Unlike other similar installations by DRIFT, Meadow is site-specific in its number of flowers, choreography, and colors, which are inspired by North American wildflowers.View this post on InstagramA post shared by Milwaukee Art Museum (@milwaukeeart)The installations experience will also evolve each day with the changing canvas outside. As the lakefront landscape transforms with the seasons, each visit offers a new dialogue between nature and art. The Burke Brise Soleil Windhover Halls moveable sunscreen also flaps its wings every day at noon, altering the natural light and casting dynamic shadows across Meadow. This interplay of shifting vistas and light patterns deepens the immersive quality of the installation, ensuring that no two visits are ever the same.Now through April 13, 2025, Meadow invites visitors to rediscover the beauty of transformation. The installation will leave all who enter Windhover Hall mesmerized when they experience the magic that blooms when design, nature, and technology converge.Meadow is on view at the Milwaukee Art Museum until April 13, 2025 and open to all with free admission. To learn more, visit mam.org.Photography by Front Room Studios, courtesy of the Milwaukee Art Museum.
    0 Comments ·0 Shares ·4 Views
  • F5: Leo Marmol Talks a Desert Getaway, Saltwater Fly Fishing + More
    design-milk.com
    When architect and painter Leo Marmol was a student, he was an awkward and shy boy. His sixth-grade teacher, Mr. Laurie, had him give presentations to the class until he was more comfortable. His instructor not only helped young Leo gain self-confidence, he also sparked his love for learning beyond the standard curriculum.The Salk Institute, by Louis Kahn, made a lasting impression on Marmol. As he learned about the architect in college, he was drawn to more than his structures. Kahn in particular resonated deeply with me not just for his buildings but for his philosophical musings on architecture, Marmol says. Kahns idea of moving from silence to light spoke to me in a profound way.Leo Marmol \\\ Photo: Jesse GreenIn 1989, Marmol and Ron Radziner founded their eponymous practice, Marmol Radziner. The firm is noted for its holistic approach to every element of design-build, from construction to furniture. But even with a full roster of projects on tap, Marmol still finds time to indulge in other pursuits. He enjoys saltwater fly fishing, which allows him to connect with nature. He visits museums when he travels, where hell often find a spark of unexpected inspiration.Marmol not only admires fine artists, he is one himself. He started painting as a way to help manage the pressures he faced while in architecture school. Painting allowed Marmol to unwind and express himself, free of restrictions. Yet he never imagined that a creative outlet would someday become a key facet of his life.Marmol often experiments with oil paint and cold wax, and he has exhibited his work in galleries throughout California and other locales. Painting began as something playful and personal, he notes. It was only after I had my first solo show that I began to see painting as more than a hobby. That experience was transformative, and the opportunity to showcase my work to a broader audience made me realize that this was no longer just a private endeavor.Today, Leo Marmol joins us for Friday Five!1. The Myth of Sisyphus by Albert CamusOne of my favorite works is Albert Camus The Myth of Sisyphus. In this essay, Camus reimagines the Greek myth of Sisyphus, who is condemned to eternally push a boulder up a hill, only for it to roll back down each time. Camus suggests that despite the endless repetition and futility of Sisyphus task, we must imagine Sisyphus happy finding meaning and joy in the struggle itself. I first encountered this text in an existential philosophy course at Cal Poly. The idea of embracing the process, knowing the outcome will never fully satisfy, resonates with the creative journey as an artist and architect. Each time I approach a new painting, I feel like Sisyphus pushing that boulder up the hill, knowing it will fall, yet finding fulfillment in the act of creation itself. For me, the boulder acts as a metaphor for the love of a new creative endeavor, the belief we have while creating that this will somehow be worthwhile, only for the work to never reach the top. We have no choice but to delight in the process not the outcome.Photo: Courtesy of Leo Marmol2. Robert Motherwell paintingSeeing Robert Motherwells work in person during a recent visit to the Modern Art Museum of Fort Worth was a deeply moving experience. Motherwell has long been a hero to me. Standing before pieces like Elegy to the Spanish Republic, I was struck by the power of his bold composition, where thick black ovals and vertical bands are both confrontational and gentle. Theres a visceral quality to Motherwells work, a rawness that transcends the canvas and speaks to the struggles and themes of his time.There was a major retrospective on view, Robert Motherwell: Pure Painting, which beautifully captured the evolution of his art. From the earlier abstracted figurative works to his later, more explosive explorations, each piece offered insights into his journey. I found myself reflecting on the balance of control and spontaneity and, moreover, the physical power of painting brilliantly illustrated by Motherwells practice, which articulates the philosophical weight of a simple stroke or form.Photo: Courtesy of Leo Marmol3. Salt Water Fly Fishing in CatalinaSaltwater fly fishing is another one of my favorite escapes. I love the rhythm of casting into the clear waters, feeling the pull of the current, and the anticipation of that first strike. Theres something meditative about itbeing surrounded by the beauty of the ocean, all while focusing on the cast. The challenge of fly fishing in saltwater, with its unpredictable conditions, keeps it exciting. My teenage son and I spent a couple of weeks last summer fly-fishing in Montana. It was a perfect way to end the summer season before he returned to school and me to work. Its a chance to disconnect, get lost in nature, and experience the power of the water.Photo: Jaime Kowal, courtesy of Sparrows Lodge4. Sparrows LodgeThe Sparrows Lodge is a mid-century gem I hold especially dear to my heart. Located in Palm Springs, the Sparrows Lodge has enjoyed many incarnations, epitomizing the adaptive reuse of the most lasting Modernist structures. Originally built as Castles Red Barn in 1952 by MGM actor Don Castle, it was one of the original glamorous getaways for the Hollywood Elite. Restored in 2013, the lodge retains its original charm while embracing a rustic simplicity exposed beams, pebble-inlaid floors, and reclaimed horse troughs as bathtubs creating a serene yet tactile experience.What draws me to the desert, and to Sparrows Lodge in particular, is the tension between the harshness of the desert environment and the myth of Modern luxury that has been cultivated in Palm Springs. In the desert, the extremes of heat and light choreograph moments of intense vitality that feel both chaotic and calming. The desert is beautiful and strange, deadly yet teeming with life. Sparrows Lodge makes space to ponder this duality a place where simplicity invites reflection, offering the rare luxury of slowing down and reconnecting with the rhythms of nature within an oasis of classic 1950s modern design.Photo: Courtesy of Kimbell Art Museum5. Kimbell Art MuseumStanding inside the Kimbell Art Museum during a recent visit was a profound experience. Designed by Louis Kahn, the architects use of natural light, filtered through skylights and reflectors, transformed the space into something sacred. The interplay of concrete, travertine, and oak created a Modern yet timeless atmosphere, with the Roman-inspired vaults evoking a sense of quiet grandeur. It was incredible to see how the architecture itself became part of the art, shaping my experience with its simplicity and elegance. The way light constantly shifts throughout the day felt like stepping into one of Kahns reflections on space and silence.Works by Leo Marmol and Marmol Radziner:The Desert House by Marmol Radziner \\\ Photo: Benny Chan, courtesy of Marmol RadzinerScottsdale House by Marmol Radziner \\\ Photo: Bill Timmerman, courtesy of Marmol RadzinerScottsdale House by Marmol Radziner \\\ Photo: Bill Timmerman, courtesy of Marmol RadzinerPoint Dume House by Marmol Radziner \\\ Photo: Manolo Langis, courtesy of Marmol RadzinerPoint Dume House by Marmol Radziner \\\ Photo: Manolo Langis, courtesy of Marmol RadzinerGarcia House by Marmol Radziner \\\ Photo: Richard Powers, courtesy of Marmol RadzinerGarcia House by Marmol Radziner \\\ Photo: Benny Chan, courtesy of Marmol RadzinerLeonardo E. Marmol, Winds Caress, 2022, Oil and cold wax on board, 30 x 40Leonardo E. Marmol, Eulogy for Yesterdays Dawn, 2022, Oil and cold wax on board, 30 x 40Leonardo E. Marmol, Pastoral Views in the Borrego I, 2022, Oil and cold wax on board, 40 x 30Leonardo E. Marmol, Pastoral Views in the Borrego II, 2022, Oil and cold wax on board, 40 x 30Leonardo E. Marmol, Poets Call It Sleep I, 2022. Oil and cold wax on board, 40 x 30Leonardo E. Marmol, Poets Call It Sleep II, 2022. Oil and cold wax on board, 40 x 30
    0 Comments ·0 Shares ·4 Views
  • AMC Theatres will screen a Swedish movie 'visually dubbed' with the help of AI
    www.engadget.com
    On May 9, AMC Theatres will start showing a sci-fi movie that was shot in Swedish but will look like it was made in English instead. Watch the Skies, which was released in its home country as UFO Sweden, had undergone "visual dubbing" with the help of artificial intelligence. An AI company called Flawless used its technology to digitally alter the film's images, making the actors look like they were truly speaking in English. Notably, the original actors recorded their own dialogues in English in a sound booth Flawless AI's technology merely altered the movements of their lips in the movie.On its website, Flawless says its TrueSync AI technology "captures every nuance of an actors performance and generates new lip movements that perfectly map to the new language audio, providing the perfect visual dub." Variety says the tool is compliant with the rules set by SAG-AFTRA, which ended a four-month strike in 2023 after securing a deal with studios that protects members "from the threat of AI."Flawless AI's technology could lower the barrier of entry into foreign films. It could make them more appealing to audiences resistant to watching subtitled movies and could provide a better experience for audiences in countries that normally dub movies in their native language. "Showing our materials to filmmakers, especially over the past year, they realize the potential from going to a local stage to a global stage," the company's co-founder, Scott Mann, told Variety. "Its a huge opportunity to get your work out and its been invigorating. They are so excited about showing their work in a wider audience, and especially in America."Watch the Skies revolves around a teenager who believes that her missing father wasn't dead but was abducted by aliens. To uncover the truth about her father's disappearance, she teams up with UFO Club to look for him. AMC Theatres has committed to showing the film in 100 locations across America.This article originally appeared on Engadget at https://www.engadget.com/ai/amc-theatres-will-screen-a-swedish-movie-visually-dubbed-with-the-help-of-ai-130022232.html?src=rss
    0 Comments ·0 Shares ·5 Views
  • A 'Split Fiction' movie is reportedly in the works
    www.engadget.com
    There's a bidding war for the film adaptation of Split Fiction, according to the information Variety has gathered at this year's Game Developers Conference. Split Fiction is a split-screen multiplayer co-op game by Swedish indie developer Hazelight, which was also the studio behind the genre-defining game It Takes Two. The publication says Story Kitchen, the same media company that pieced together the It Takes Two film adaptation package until it was picked up by Amazon, is already looking for actors, writers and a director for the project.Variety didn't mention specific companies bidding for the game's rights, but offers are reportedly coming in from "multiple top Hollywood studios." Split Fiction was specifically designed for split-screen gaming through local or online play. You can control either one of the two main characters, Zoe and Mio, as they navigate multiple worlds and overcome various obstacles. The game's story revolves around the two authors who were invited by a company called Rader Publishing to test a new simulation technology that allows players to experience their own fictional stories as reality.Due to an accident, Mio fel into Zoe's story, which created a glitch that allowed them to travel to and from each other's science fiction stories featuring dragons, cyberpunk motorcycles and other sci-fi and fantasy elements. The game was released on March 6, 2025 and is currently available on the PlayStation 5, Xbox Series X|S and PC.This article originally appeared on Engadget at https://www.engadget.com/gaming/a-split-fiction-movie-is-reportedly-in-the-works-121528148.html?src=rss
    0 Comments ·0 Shares ·4 Views
  • 0 Comments ·0 Shares ·6 Views
  • Finally, the more powerful Lenovo Legion Go S model has a release date - but the price is a gut punch
    www.techradar.com
    The Lenovo Legion Go S has a new model on the way, promising better gaming performance, but at an unappealing cost.
    0 Comments ·0 Shares ·5 Views
  • Whats happening at Heathrow Airport? Update after London fire throws air travel into disarray
    www.fastcompany.com
    Heathrow Airport, Europes busiest, has shut down today, following a fire last night at a nearby electrical substation that caused a major power outage. The closure has disrupted at least 1,350 flights, according to Flightradar24, with some aircraft diverted to alternate airports like Gatwick, Amsterdams Schiphol, and Pariss Charles de Gaulle.What caused the fire?While the cause of the fire is still under investigation, British officials have stated that there is no evidence of foul play.According to the London Fire Brigade, the fire broke out at an electrical substation around 11:20 p.m. on Thursday, involving a transformer containing 25,000 liters of cooling oil that was fully alight.The blaze posed a serious risk due to live high-voltage equipment and the nature of an oil-fueled fire, the brigade said. Around 70 firefighters responded to the incident. As of the latest update, about 10% of the fire remains burning.The incident left 67,000 homes without power, with 5,000 still affected. Both Heathrow Terminals 2 and 4 are without power. Additionally, around 150 people were evacuated to a rest center for safety. Firefighters and emergency services are continuing to address the situation.This was a very visible and significant incident, and our firefighters worked tirelessly in challenging conditions to bring the fire under control as swiftly as possible, Pat Goulbourne, assistant commissioner of the London Fire Brigade, said in a statement.What should I do if I have a flight from Heathrow Airport today?Heathrow Airport confirmed that it would remain closed until at least 11:59 p.m. on Friday, warning passengers not to attempt to travel. Authorities have warned of continued disruptions and advised travelers to check with their airlines for updates.The U.K.s Department for Transport travel guide includes a detailed breakdown of passenger rights covered by law when something goes wrong at a U.K. airport.
    0 Comments ·0 Shares ·5 Views
  • The old Twitter bird sign just sold for $34,000
    www.fastcompany.com
    The blue Twitter bird sign that once was once mounted on the exterior of the San Francisco headquarters of the social media company now known as X sold Thursday at auction for $34,325, failing to reach an estimated bidding price of $40,000.Nicknamed Larry, after Boston Celtics star Larry Bird, the 560 lb. logo was one of two displayed on the building before the company rebranded. Elon Musk, the worlds richest man and a special government employee overseeing aggressive cuts to the federal government for President Donald Trump, bought Twitter in 2022 and renamed it to X the following year complete with a new, worse logo. The rebrand and new ownership has proven abysmal for the companys worth. As of last December, the value of X had fallen 72% from what Musk paid for Twitter, according to a valuation from Fidelity, an investment services company. The lost brand equity thats come from removing the blue bird logo and old name have also proven costly. Its AP style to refer to the social network on first reference as X, formerly known as Twitter. As X is both new and less distinctive than Twitter, readers may be less familiar with its new single-letter name. The same can be said of the old versus new logos. RR Auction, the auction house that sold the sign, likened the old Twitter logo to the logos of some of Americas most iconic brands.Although Twitter and its light blue bird have since retired, the symbol remains an icon of tech and social media history, an instantly recognizable emblem in the same league as Nike or Apple Computer, the auction house says in its listing. Its a symbol that represented the company from 2012 to 2023, an 11-year span representing Twitters most popular and influential period.After buying the social network that would become X, Musk turned the app into a pro-Trump site that amplified his own posts, ended unpaid verification, and became a more accommodating platform for right-leaning news influencers and a less accommodating one for news sites. In a bit of mutual admiration this month, Trump has promoted Musks cars on the White House grounds while Musks political action committee has run more than $200 million in pro-Trump ads on X. X as it is now is associated with Musk, Trump, DOGE, and MAGA while Twitter is now nostalgia, associated with a previous era when it was publicly owned and public opinion of social media was more positive.The giant sign that just sold is now a piece of history (not to mention one that the new owner is now responsible for paying shipping costs on, per its listing). But its also a reminder of a time before social networks felt as politicized and as heavily influenced by their partisan owners as they do today.
    0 Comments ·0 Shares ·6 Views
  • Industrial Design Case Study: Speck Design Tackles a Smart Frying Pan
    www.core77.com
    When a startup called Smartypans wanted to create a smart cooking pan, they contracted industrial design and engineering consultancy Speck Design. The firm brought six of their skillsets to bear on the project, which aimed to combine technology with user-friendly design.Electrical EngineeringSeamlessly embedding advanced sensors and smart technology for optimal functionality.Speck Design's electrical engineering team played a crucial role in embedding advanced sensors and intelligent technology into the Smartypans. This involved ensuring seamless communication between components, optimizing functionality, and achieving a balance between tech sophistication and user-friendliness. Mechanical EngineeringDeveloping a durable and robust smart pan, focusing on materials and thermal properties for daily use.Our mechanical engineers were tasked with creating a durable and robust smart cooking pan. This included selecting materials with optimal thermal properties, ensuring structural integrity, and designing a product that could withstand the rigors of daily kitchen use while providing a premium cooking experience. Industrial DesignDesigning a smart pan that combines ergonomic aesthetics with practical user interface.The industrial design team at Speck Design was responsible for the elegant and functional design of Smartypans. They focused on the ergonomic aspects of the product, ensuring it was not only visually appealing but also practical and easy to use, thereby integrating smart technology into a user-friendly interface. Packaging DesignCreating packaging that highlights the pan's features while reinforcing Smartypans' brand identity.Our packaging design team developed an attractive package for the Smartypans that not only protected the product but also effectively communicated its unique features. The design was strategic in reinforcing the brand's identity and message, ensuring it resonated with the target audience and stood out on shelves. Brand DesignRevamping the brand identity to resonate with the market and emphasize the product's uniqueness.The brand design team undertook the challenge of refreshing the Smartypans brand. This involved developing a unique brand identity with a new logo, color scheme, typography, and messaging. The goal was to create a brand that appealed to the target market, differentiated Smartypans from competitors, and communicated the product's innovative nature. Experience DesignDesigning an intuitive app experience that simplifies cooking metrics tracking and recipe sharing.The experience design team focused on the user interface and experience, particularly in the integration of the Smartypans app. The design was centered around ease of use, reliability, and functionality, allowing users to seamlessly track various cooking metrics and share their culinary creations, thus enhancing the overall cooking experience. You can see more of Speck Design's work here.
    0 Comments ·0 Shares ·4 Views