According to legend, Singer Vehicle Design founder and executive chairman Rob Dickinson was a young boy the first time his dad pointed out a Porsche 911. He was instantly smitten. Dickinson turned that passion into a multi-million dollar business, reimagining classic Porsche models with his own twist.To be perfectly clear, Singer is not sponsored, approved, endorsed by, or in any way associated or affiliated with Porsche. Customers bring their own 911 to the Singer shopnot just any old 911, but an air-cooled 964 version model from 1989-1994for a complete makeover. The cars are completely disassembled and modified around the original chassis with a process driven by Singers obsessive attention to detail.Painted Carbon Fiber Bodywork. Modified 3.8 Litre Twin Turbo Mezger Engine. Every Porsche 911 reimagined by Singer takes about 10 months to restore once the specification process is complete and the handwork begins. Images: Singer Vehicle DesignEvery piece, every bolt, every single tiny thing is evaluated and lovingly recrafted. Dickinson started Singer to recreate the classic 911 with modern science while keeping the essence of the car and making it better.I scrawled Everything is important on a wall 10 years ago, Dickinson says. It all needs to be addressed with the same amount of excessiveness. This is part of what our clients lovethat its bonkers. Its the most important sports car in the world, which is why I chose the 911 to be the lens through which the Singer brand operates.For all of its engineering advancements and technology, heres the surprise: At the end of the day, the car is analog. That means no touchscreens and no self-driving coding. Its faithful to the era, and intensely focused on crafting a perfect vehicle, not a cyborg imitation.Recreating a cultural German iconNamed partially after Norbert Singer, who began his career as a racing engineer in the development department of Porsche in 1970, the Singer Group now employs upwards of 600 staff in California and the UK. The 300th Porsche 911 reimagined through Singers Classic restoration services department was completed in February 2024, with unrelenting demand that has no end in sight.Whether you love the Porsche 911 or not, its a culturally important icon with millions and millions of faithful fans, Dickinson points out. Perhaps wisely or unwisely, we put ourselves out there as suggesting that we take this spectacular icon of a car and reimagine it to be better than it was when it started. And a little bit more relevant for the modern world.A client collaborates with Singer, picking their menu items to create the car they want to create within the boundaries Singer sets. It may be equipped with a normally aspirated or turbocharged engine. It may include body work that evokes the early 911 F-Model first introduced in the early 1960s, or the later 911 G-Model, or even a specific Porsche racing car, all based on the 964.Founded by Rob Dickinson, Singer Vehicle Design has a multi-year waiting list. Image: Singer Vehicle Design DREW PHILLIPSThese cars are not recreations or continuations; theyre not simply restored, either. To riff on a classic 1970s TV show, these Singer-rebuilt supercars are like the Six Million Dollar Man: They can rebuild it. They have the technology. They can make it better than it was. Better, stronger, faster. One Porsche 911 reimagined by Singer might not cost you six million dollars, but it will approach a million or more. And thats because of Singers fixation on perfection.From start to finish, a Singer project can take about 10 months once the process begins, and the company has a long line out the door, says Maz Fawaz, the companys CEO. Customers approaching Singer today might get their car back in three years after it proceeds through the gauntlet of disassembly and reassembly, guided by a cadre of experts in their craft. On the engineering side, Fawaz says, there are a multitude of Singer employees with motorsports experience, including F1, who understand the material science.Tearing apart a 911 to put it back together, better, stronger, and technically perfectThe first stepdisassemblyhappens off-site from Singers pristine Torrance, California shop floor. Mostly, because its extremely grimy work.Imagine bringing in a car from 1990, Fawaz explains. Its old and generally very, very dirty. Typically, the donor cars are high mileage, not precious.A donor car is media blasted to remove the muck and the paint down to bare metal, then given a rust inhibitor coating before transport to the Singer site. Then the team repairs and bolsters the chassis, using seam welding, then they remove the body panels, replacing them with lighter, stronger carbon fiber panels. The car is effectively restyled and rebodied. Finally, its painted and gets a full shakedown to check for squeaks and rattles.Using modern technology and classic restoration techniques, Singer completely disassembles classic 911 examples and modifies them.Images: Singer Vehicle DesignFrom a design perspective, the Singer shop is technologically advanced while blending analog methods. The team will both create a full-size clay model and use Autodesk Alias, which is the surfacing software used all over the world for car design. Singer uses modern milling techniques to mill from clay and build hard models before the baton is handed off to the engineers. The shop also displays artisanal skill in painting and surfacing the cars, wrapping the cars in leather. It runs the gamut from cutting-edge rapid prototyping and computer software to very old-fashioned ways of doing things. Whatever is needed to get the job done, Dickinson says.We start with a very specific 911, then deconstruct it and make the cars lighter, stiffer, and more beautiful than ever, Fawaz says. We use carbon fiber, aluminum, and titanium a lot, and we optimize the cast performance without resorting to expensive modeling.For all of its high-tech tools and materials, the Singer designers put these vehicles together more like a high-end watchmaker puts together a timepiece.We treat the paint, leather, and trim the way wed treat jewelry, not a car, Dickinson says. When we started, we built one or two cars per year. Now, were at the bleeding edge, proving that a restoration company can scale itself.Perfection takes time: A Singer restoration project can take 10 months. Image: Singer Vehicle Design DREW PHILLIPS

Nature, Published online: 01 January 2025; doi:10.1038/s41586-024-08313-zLeveraging metabarcoding and metagenomics, a survey of bacteria in the benthic microbiome across 152glacier-fed streams (GFSs) provides a global reference for future climate-change microbiology studies on the vanishing GFS ecosystem.

Nature, Published online: 01 January 2025; doi:10.1038/s41586-024-08221-2An avalanching-nanoparticle force sensor that can operate in the piconewton-to-micronewton range with exceptional force responsiveness is achieved by using the mechanical sensitivity of the photon-avalanching process.

Nature, Published online: 01 January 2025; doi:10.1038/s41586-024-08341-9Cellular, transcriptomic and proteomic analyses of organoids derived from human induced pluripotent stem cells show that mTOR pathway hypoactivation is involved in two genetically distinct lissencephaly spectrum disorders.

One of the best feelings in a roguelike is when the pieces all come together to create a perfect run. In Hades it's a powerful combination of powers, in Dead Cells it's a perfect set of weapons, and in Balatro it's all about getting the right combination of Jokers. With the right set of Jokers, a run in Balatro can feel almost easy at times. You have so many Joker effects happening that the game starts to speed up the animations and your score catches on fire because you aren't about to just win the round--you are about to blow past it, making the score you need to reach seem trivial in the process.These runs are amazing in Balatro and in other roguelikes, but that's because it's not how every run goes. In fact, that's how very few runs usually go. Most runs in Balatro, including many of my winning runs, have me barely beating out each round with my final hand. Every shop or bonus for skipping a blind becomes deeply important, because I need another boost in chips or multiplier; otherwise my run is about to crash and burn. This scrappiness is what makes Balatro special, and there are multiple mechanics that let you take some of the chance out of these runs, making it just as viable to fight tooth and nail to win a run as it is to break the game entirely with your build.Balatro lets you control your fate (mostly)Balatro's iconic Jokers can drastically change how each hand plays out.While it's not uncommon for roguelikes to allow you to influence the powers or weapons you might receive in a run, Balatro consistently provides you the opportunity to make risk-versus-reward assessments. Each ante has three blinds, two of which can be completely skipped. You won't earn any money or get to visit the shop, but you will get something else. Sometimes it's as simple as a pack of cards to add to your deck, or it can guarantee a Joker of a certain rarity or with a specific bonus type. Importantly, the reward is never a specific Joker--only certain modifiers or rarities. There is never any point where you can guarantee yourself the exact Joker you need, which puts an emphasis on working with whatever Jokers you do get.Continue Reading at GameSpot

For fans of Final Fantasy VII that want another version of the classic, Final Fantasy VII Ever Crisis is remaking the game on mobile with some twists to combat. This is the best Materia you should use in Final Fantasy VII Ever Crisis.

All of us, at some point in our lives, have imagined living in our favorite anime world. Having a chance to live out a life completely different and even become the cool hero that everyone loves is no less than a dream. However, it is also important to know that not every anime world is as warm and welcoming, and it might actually be a horrifying nightmare living in some of them. The one anime that seems no less than a living hell for many fans and beats every other title in this category is Attack on Titan or Shingeki No Kyojin.

A prominent Marvel Rivals leaker took to social media to post gameplay footage of a new skin for Doctor Strange, which could be coming to the game soon. As Season 0 comes to a close, fans are busy discussing the future of Marvel Rivals. While the game already has a large roster of 33 characters, many players are expecting that Season 1 will debut with new heroes and possibly even more maps.

Honkai: Star Rail just closed out its version 3.0 livestream, teasing whats to come in the next update, which launches the evening of Jan. 14. Alongside new characters and events, the Hoyoverse team uses the stream to distribute codes that reward free Stellar Jade and other upgrade materials.This update brings us to a new world, Amphoreus, filled with some familiar-looking faces, if youre into the Honkai franchise as a whole. This patch specifically will include the launch of Lightning Remembrance character, Aglaea, and the Erudition Ice character, The Herta. The Trailblazer will also be able to study the path of Remembrance, giving them another new form to use in combat. Therell be a lot to explore and tons of new characters to pull, so time to stock up on Stellar Jade while you can.Honkai: Star Rail 3.0 livestream codesThese codes are only active for a day or two, so youll want to make sure to use them quickly.The Honkai: Star Rail reward codes from the version 3.0 livestream are:HSR320250115HSR3AMPHOREUSHSR3DAWEISGIFTThese codes will expire on Jan. 2 at 10:59 a.m. EST / 7:59 a.m. PST, so use them quickly or youll miss out on the free loot. For more codes that dont expire in just a few hours, you can check out our constantly-updated list of active Honkai: Star Rail codes.How to redeem codes in Honkai: Star RailYou can redeem the codes in-game by opening the menu and tapping on the ellipses in the top right corner. A redemption code option will come up that you can select.You can also redeem them online through the Honkai: Star Rail code redeem website. Youll need to select your correct server and login through the website in order to get rewards. You will also need to have a working UID for Honkai: Star Rail. If youve never logged into Honkai: Star Rail in any form using your Hoyoverse account, it will not work.If youre just getting started in Honkai: Star Rail, you can check out our beginners guide and gacha explainer.

Component-specific styling, styling parents based on their children, relative colors the web platform is going through exciting times, and many things that required JavaScript in the past can today be achieved with one simple line of HTML and CSS.As we are moving towards 2025, its a good time to revisit some of the incredible new technologies that are broadly available and supported in modern browsers today. Lets dive right in and explore how they can simplify your day-to-day work and help you build modern UI components.Table of ContentsBelow youll find quick jumps to topics you may be interested in, or skip the table of contents. anchor-positioning auto field-sizing container queries <dialog> exclusive accordions :focus-visible :has hidden=until-found high-definition colors <hr> in select inputmode min(), max(), clamp() relative colors responsive videos scroll behavior scroll snap text-wrap: balance :user-valid and :user-invalid View Transitions APICSS Container Queries And Style QueriesComponent-specific styling? What has long sounded like a dream to any developer, is slowly but surely becoming reality. Thanks to container queries, we can now query the width and style of the container in which components live.As Una Kravets points out in her introduction to style queries, this currently only works with CSS custom property values, but there are already some real-world use cases where style queries shine: They come in particularly handy when you have a reusable component with multiple variations or when you dont have control over all of your styles but need to apply changes in certain cases.If you want to dive deeper into whats possible with container style queries and the things we can maybe look forward to in the future, also be sure to take a look at Geoff Grahams post. He dug deep into the more nuanced aspects of style queries and summarized the things that stood out to him.No More Typographic Orphans And WidowsWe all know those headlines where the last word breaks onto a new line and stands there alone, breaking the visual and looking, well, odd. Of course, theres the good ol <br> to break the text manually or a <span> to divide the content into different parts. But have you heard of text-wrap: balance already?By applying the text-wrap: balance property, the browser will automatically calculate the number of words and divide them equally between two lines perfect for page titles, card titles, tooltips, modals, and FAQs, for example. Ahmad Shadeed wrote a helpful guide to text-wrap: balance in which he takes a detailed look at the property and how it can help you make your headlines look more consistent.When dealing with large blocks of text, such as paragraphs, you might want to look into text-wrap: pretty to prevent orphans on the last line.Auto Field-Sizing For FormsFinding just the right size for an input field usually involves a lot of guesswork or JavaScript to count characters and increase the fields height or width as a user enters text. CSS field-sizing is here to change that. With field-sizing, we can auto-grow inputs and text areas, but also auto-shrink short select menus, so the form always fits content size perfectly. All we need to make it happen is one line of CSS.Adam Argyle summarized everything you need to know about field-sizing, exploring in detail how field-sizing affects different <form> elements. To prevent your input fields from becoming too small or too large, it is also a good idea to insert some additional styles that keep them in shape. Adam shares a code snippet that you can copy-and-paste right away.Making Hidden Content SearchableAccordions are a popular UI pattern, but they come with a caveat: The content inside the collapsed sections is impossible to search with find-in-page search. By using the hidden=until-found attribute and the beforematch event, we can solve the problem and even make the content accessible to search engines.As Joey Arhar explains in his guide to making collapsed content searchable, you can replace the styles that hide the section with the hidden=until-found attribute. If your page also has another state that needs to be kept in sync with whether or not your section is revealed, he recommends adding a beforematch event listener. It will be fired on the hidden=until-found element right before the element is revealed by the browser.Styling Groups Within Select MenusIts a small upgrade for the <select> element, but a mighty one: We can now add <hr> into the list of select options, and they will appear as separators to help visually break up the options in the list.If you want to refine things further, also be sure to take a look at <optgroup>. The HTML element lets you group options within a <select> element by adding a subheading for each group.Simpler Snapping For Scrollable ContainersSometimes, you need a quick and easy way to make an element a scrollable container. CSS scroll snap makes it possible. The CSS feature enables us to create a well-controlled scrolling experience that lets users precisely swipe left and right and snap to a specific item in the container. No JavaScript required.Ahmad Shadeed wrote a practical guide that walks you step by step through the process of setting up a container with scroll snap. You can use it to create image galleries, avatar lists, or other components where you want a user to scroll and snap through the content, whether its horizontally or vertically.Anchor Positioning For Tooltips And PopoversWhether you use it for footnotes, tooltips, connector lines, visual cross-referencing, or dynamic labels in charts, the CSS Anchor Positioning API enables us to natively position elements relative to other elements, known as anchors.In her introduction to the CSS Anchor Positioning API, Una Kravets summarized in detail how anchor positioning works. She takes a closer look at the mechanism behind anchor positioning, how to tether to one and multiple anchors, and how to size and position an anchor-positioned element based on the size of its anchor. Browser support is still limited, so you might want to use the API with some precautions. Unas guide includes what to watch out for.High-Definition Colors With OKLCH And OKLABWith high-definition colors with LCH, okLCH, LAB, and okLAB that give us access to 50% more colors, the times of RGB/HSL might be over soon. To get you familiar with the new color spaces, Vitaly wrote a quick overview of what you need to know.Both OKLCH and OKLAB are based on human perception and can specify any color the human eye can see. While OKLAB works best for rich gradients, OKLCH is a fantastic fit for color palettes in design systems. OKLCH/OKLAB colors are fully supported in Chrome, Edge, Safari, Firefox, and Opera. Figma doesnt support them yet.Relative Colors In CSSLets say you have a background color and want to reduce its luminosity by 25%, or you want to use a complementary color without having to calculate it yourself. The relative color syntax (RCS) makes it possible to create a new color based on a given color.To derive and compute a new color, we can use the from keyword for color functions (color(), hsl(), oklch(), etc.) to modify the values of the input color. Adam Argyle shares some code snippets of what this looks like in practice, or check the spec for more details.Smooth Transitions With The View Transitions APIThere are a number of use cases where a smooth visual transition can make the user experience more engaging. When a thumbnail image on a product listing page transitions into a full-size image on the product detail page, for example, or when you have a fixed navigation bar that stays in place as you navigate from one page to another. The View Transitions API helps us create seamless visual transitions between different views on a site.View transitions can be triggered not only on a single document but also between two different documents. Both rely on the same principle: The browser takes snapshots of the old and new states, the DOM gets updated while rendering is suppressed, and the transitions are powered by CSS Animations. The only difference lies in how you trigger them, as Bramus Van Damme explains in his guide to the View Transitions API. A good alternative to single page apps that often rely on heavy JavaScript frameworks.Exclusive AccordionsThe exclusive accordion is a variation of the accordion component. It only allows one disclosure widget to be open at the same time, so when a user opens a new one, the one that is already open will be closed automatically to save space. Thanks to CSS, we can now create the effect without a single line of JavaScript.To build an exclusive accordion, we need to add a name attribute to the <details> elements. When this attribute is used, all <details> elements that have the same name value form a semantic group and behave as an exclusive accordion. Bramus Van Damme summarized in detail how it works.Live And Late ValidationWhen we use :valid and :invalid to apply styling based on a users input, theres a downside: a form control that is required and empty will match :invalid even if a user hasnt started interacting with it yet. To prevent this from happening, we usually had to write stateful code that keeps track of input a user has changed. But not anymore.With :user-valid and :user-invalid, we now have a native CSS solution that handles all of this automatically. Contrary to :valid and :invalid, the :user-valid and :user-invalid pseudo-classes give users feedback about mistakes only after they have changed the input. :user-valid and :user-invalid work with input, select, and textarea controls.Smooth Scrolling BehaviorImagine you have a scrolling box and a series of links that target an anchored position inside the box. When a user clicks on one of the links, it will take them to the content section inside the scrolling box with a rather abrupt jump. The scroll-behavior property makes the scrolling transition a lot smoother, only with CSS.When setting the scroll-behavior value to smooth, the scrolling box will scroll in a smooth fashion using a user-agent-defined easing function over a user-agent-defined period of time. Of course, you can also use scroll-behavior: auto, and the scrolling box will scroll instantly.Making Focus VisibleFocus styles are essential to help keyboard users navigate a page. However, for mouse users, it can be irritating when a focus ring appears around a button or link as they click on it. :focus-visible is here to help us create the best experience for both user groups: It displays focus styles for keyboard users and hides them for mouse users.:focus-visible applies while an element matches the :focus pseudo-class and the User Agent determines via heuristics that the focus should be made visible on the element. Curious how it works in practice? MDN Web Docs highlights the differences between :focus and :focus-visible, what you need to consider accessibility-wise, and how to provide a fallback for old browser versions that dont support :focus-visible. Styling Parents Based On ChildrenHistorically, CSS selectors have worked in a top-down fashion, allowing us to style a child based on its parent. The new CSS pseudo-class :has works the other way round: We can now style a parent based on its children. But thats not all yet. Josh W. Comeau wrote a fantastic introduction to :has in which he explores real-world use cases that show what the pseudo-class is capable of.:has is not limited to parent-child relationships or direct siblings. Instead, it lets us style one element based on the properties or status of any other element in a totally different container. And it can be used as a sort of global event listener, as Josh shows to disable scrolling on a page when a modal is open or to create a JavaScript-free dark mode toggle, for example.Interpolate Between Values For Type And SpacingCSS comparison functions min(), max(), and clamp() are today supported in all major browsers, providing us with an effective way to create dynamic layouts with fluid type scales, grids, and spacing systems.To get you fit for using the functions in your projects right away, Ahmad Shadeed wrote a comprehensive guide in which he explains everything you need to know about min(), max(), and clamp(), with practical examples and use cases and including all the points of confusion you might encounter.If youre looking for a quick and easy way to create fluid scales, the Fluid Type Scale Calculator by Utopia has got your back. All you need to do is define min and max viewport widths and the number of scale steps, and the calculator provides you with a responsive preview of the scale and the CSS code snippet.Reliable Dialog And PopoverIf youre looking for a quick way to create a modal or popup, the <dialog> HTML element finally offers a native (and accessible!) solution to help you get the job done. It represents a modal or non-modal dialog box or other interactive component, such as a confirmation prompt or a subwindow used to enter data.While modal dialog boxes interrupt interaction with a page, non-modal dialog boxes allow interaction with the page while the dialog is open. Adam Argyle published some code snippets that show how <dialog> can block pop-ups and popovers for non-blocking menus, out of the box.Responsive HTML Video And AudioIn 2014, media attribute support for HTML video sources was deleted from the HTML standard. Last year, it made a comeback, which means that we can use media queries for delivering responsive HTML videos.Scott Jehl summarized how responsive HTML video and even audio works, what you need to consider when writing the markup, and what other types of media queries can be used in combination with HTML video.The Right Virtual Keyboard On MobileIts a small detail, but one that adds to a well-considered user experience: displaying the most comfortable touchscreen keyboard to help a user enter their information without having to switch back and forth to insert numbers, punctuation, or special characters like an @ symbol.To show the right keyboard layout, we can use inputmode. It instructs the browser which keyboard to display and supports values for numeric, telephone, decimal, email, URL, and search keyboards. To further improve the UX, we can add the enterkeyhint attribute: it adjusts the text on the Enter key. If no enterkeyhint is used, the user agent might use contextual information from the inputmode attribute.A Look Into The FutureAs we are starting to adopt all of these shiny new front-end features in our projects, the web platform is, of course, constantly evolving and there are some exciting things on the horizon already! For example, we are very close to getting masonry layout, fully customizable drop-downs with <selectmenu>, and text-box trimming for adjusting fonts to be perfectly aligned within the grid. Kudos to all the wonderful people who are working tirelessly to push the web forward! In the meantime, we hope you found something helpful in this post that you can apply to your product or application right away. Happy tinkering!Smashing Weekly NewsletterYou want to stay on top of whats happening in the world of front-end and UX? With our weekly newsletter, we aim to bring you useful, practical tidbits and share some of the helpful things that folks are working on in the web industry. Every issue is curated, written, and edited with love and care. No third-party mailings or hidden advertising.Also, when you subscribe, you really help us pay the bills. Thank you for your kind support!