正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

CSS is mind-blowing 🤯 Browser does what it can to keep the menus in view. Even when you scroll. Zero JavaScript (Aside from the Draggable part) This is the important HTML 👇 (anchor) <button id="trigger" popovertarget="menu"> <div popover="auto" id="menu" anchor="trigger">

jhey ʕ•ᴥ•ʔ

146,377 subscribers

307,283 次观看 • 2 年前 •via X (Twitter)

教育科学技术

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

No-JS hamburger menu w/the popover API: Browser handles: - clicks on hamburger & close btns - esc key to exit - tab nav - spacebar + enter key toggle (open & close) - light dismiss (click away) close How: <btn popovertarget="menu">..</> <div popover role="menu" id="menu">..</>

No-JS hamburger menu w/the popover API: Browser handles: - clicks on hamburger & close btns - esc key to exit - tab nav - spacebar + enter key toggle (open & close) - light dismiss (click away) close How: <btn popovertarget="menu">..</> <div popover role="menu" id="menu">..</>

Una 🇺🇦

379,685 次观看 • 2 年前

LOOK. This is just a regular ol' website. No JavaScript whatsoever. Navigation pages with clicks <a> links to other HTML pages. The most basic website in the world. Yet, with a few lines of code to activate View Transitions, KAPOW.

LOOK. This is just a regular ol' website. No JavaScript whatsoever. Navigation pages with clicks <a> links to other HTML pages. The most basic website in the world. Yet, with a few lines of code to activate View Transitions, KAPOW.

Chris Coyier

830,480 次观看 • 3 年前

a well-known iOS Safari quirk is that inputs with a font-size <16px trigger an auto-zoom on focus using 16px is probably the best solution, but it can feel a bit heavy in tight UIs a clever workaround is to keep the font-size at 16px and scale the input down with CSS!

a well-known iOS Safari quirk is that inputs with a font-size <16px trigger an auto-zoom on focus using 16px is probably the best solution, but it can feel a bit heavy in tight UIs a clever workaround is to keep the font-size at 16px and scale the input down with CSS!

daniel petho

150,029 次观看 • 3 个月前

Forgot to mention this CSS tip when sharing the :has() calendar 🤦‍♂️ It's a <table> & a snippet like this 👇 tr:has(:checked) ~ tr:has(:hover) .cell:has(~ .cell:hover) Says target the cell in a sibling row that's hovered and has a sibling that is hovered 🤯 You :has() power! 💪

Forgot to mention this CSS tip when sharing the :has() calendar 🤦‍♂️ It's a <table> & a snippet like this 👇 tr:has(:checked) ~ tr:has(:hover) .cell:has(~ .cell:hover) Says target the cell in a sibling row that's hovered and has a sibling that is hovered 🤯 You :has() power! 💪

jhey ʕ•ᴥ•ʔ

298,144 次观看 • 3 年前

This is from a opensource company , and you can see it cooked better than others in comparison yet to launch , i got private access today , i can't share more than this < guess the name by yourself > > multimodal > thinking / non thinking > soon to be released

This is from a opensource company , and you can see it cooked better than others in comparison yet to launch , i got private access today , i can't share more than this < guess the name by yourself > > multimodal > thinking / non thinking > soon to be released

Chetaslua

32,832 次观看 • 5 个月前

this OpenClaw bot finds ugly digital menus, rebuilds them as branded apps, and mails the owner a postcard with the QR...on autopilot. here's how agencies can land recurring contracts with this system: - scans every restaurant with a digital menu in real time - pulls the full menu — items, prices, photos from the live page - ranks them by how bad the design is (no photos, default font, no logo) - pulls the brand colors and font straight from the restaurant's own page - rebuilds each menu as an app, live at a QR-accessible URL - writes a postcard quoting the restaurant's actual menu quirks - mails it to the registered office addressed to the owner by first name every step from discovery to brand-matching to outreach is automated. reply "MENU" and i'll send you a free guide so you can build this too

Chris

41,532 次观看 • 2 个月前

this OpenClaw bot finds restaurants with ugly menus, rebuilds them as live web menus, and mails the owner a postcard...on autopilot. here's how agencies can land recurring contracts with this system: - scrapes every restaurant in a city in real time - filters by review count + rating + last menu update + photo quality - pulls the real menu items from the official site, PDF, or Google reviews - samples the brand palette from the restaurant's own visual identity - renders a 9:16 brand-matched menu, hosted live at a QR-accessible URL - writes a personalized postcard referencing a real reviewer and a real dish - mails it to the registered office addressed to the owner by first name every step from discovery to brand-matching to outreach is automated. reply "MENU" + RT and i'll send you a free guide so you can build this too

Chris

453,584 次观看 • 2 个月前

I built a website where you can browse the #threejs shaders code by expanding the <includes> in place. It gives a better understanding of what the code is doing without having to open each file individually. #glsl #WebGL

I built a website where you can browse the #threejs shaders code by expanding the <includes> in place. It gives a better understanding of what the code is doing without having to open each file individually. #glsl #WebGL

grgrdvrt

23,573 次观看 • 1 年前

Key Cycle 01162- NO “Sudden Braking” Trigger Below you see Trooper Paul’s testing. As you see he travels in reverse and slams the brakes, causing a “sudden braking” trigger to record. In fact, 4 separate times he does this and a trigger is recorded each time. On key cycle 01162 however, we see ZERO “sudden braking” triggers recorded. Welcher claimed today that Karen’s SUV was traveling 23.9 MPH in reverse when the “trigger data stopped recording”. Based on Jen McCabes testimony, we can conclude that since there is no “sudden braking” trigger on key cycle 01162- that means that Karen’s SUV would have reversed directly into Brian Higgins Jeep and left no damage to her SUV. Amazing.

Key Cycle 01162- NO “Sudden Braking” Trigger Below you see Trooper Paul’s testing. As you see he travels in reverse and slams the brakes, causing a “sudden braking” trigger to record. In fact, 4 separate times he does this and a trigger is recorded each time. On key cycle 01162 however, we see ZERO “sudden braking” triggers recorded. Welcher claimed today that Karen’s SUV was traveling 23.9 MPH in reverse when the “trigger data stopped recording”. Based on Jen McCabes testimony, we can conclude that since there is no “sudden braking” trigger on key cycle 01162- that means that Karen’s SUV would have reversed directly into Brian Higgins Jeep and left no damage to her SUV. Amazing.

Joe TurtleHead

22,883 次观看 • 1 年前

DOM3 is made from HTML, CSS and Javascript, closer to a document than a canvas. It's a strange contemporary material that shapes much of our digital lives. The rhythm of endless creation and deletion in DOM3 is a self-driving version of what happens when you browse the web. "The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory." A html element, and a rectangle on a canvas, are not the same thing. It's a different material. Even if it all ends up controlling the same pixels, the process is different. The html element kind of actually exists, in this abstract context of a document object model. And in memory, in the moment. If it was possible to measure its weight, it would be heavier than a pixel on a canvas.

DOM3 is made from HTML, CSS and Javascript, closer to a document than a canvas. It's a strange contemporary material that shapes much of our digital lives. The rhythm of endless creation and deletion in DOM3 is a self-driving version of what happens when you browse the web. "The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory." A html element, and a rectangle on a canvas, are not the same thing. It's a different material. Even if it all ends up controlling the same pixels, the process is different. The html element kind of actually exists, in this abstract context of a document object model. And in memory, in the moment. If it was possible to measure its weight, it would be heavier than a pixel on a canvas.

Leander Herzog

11,484 次观看 • 9 个月前

Microsoft is testing a new feature in Windows 11 called Low Latency Profile that gives a short boost to your CPU for 1 to 3 seconds when you open apps or menus. Early tests show Microsoft apps like Edge and Outlook open up to 40% faster, while the Start menu and other menus can load up to 70% faster, with CPU use jumping high for a few seconds then dropping right back down. Microsoft says this is normal because Apple does it in macOS and Linux, plus phones use the same type of quick CPU boosts for better speed. The feature is only in early Insider testing now, so it is not out for everyone yet.

Pirat_Nation 🔴

145,459 次观看 • 2 个月前

Sure, but the idea of simplifying the appearance of Fortnite, the locker and the shop are all going in the exact opposite direction of simplicity. Equipping cosmetics takes double, if not triple the clicks. The UI is impractical and janky, not to mention the introduction of buttons and drop-down menus that were far easier to access previously. Selecting a skin to rotate it, preview it or even spin it around now requires clicking on it, which then applies it to your loadout. Previously this needed a confirm button so you could preview and choose skins, backblings etc without loosing your currently equipped on if you want to go back. Wraps are not included as part of a character's preset despite being completely relevant to the skin worn. Changing emotes, lobby tracks, and all cosmetics now means you have to back out and change tabs, something that could have previously been done on 1 page. The sectioned tabs make sense with new types like LEGO Kits, Cars, Instruments but there's no need to separate Character from Wraps, Emotes or Lobby. Archiving or Favoriting items can no longer be done in batches or quickly. Previously all you had to do was click once per cosmetic on the button but now you have to enter a drop down and select it for every individual item. Applying wraps to all slots now requires a drop down menu rather than simply clicking the button at the bottom. Swinging a pickaxe or redeploying a glider is near impossible to do and feels like more of a chore to actually accomplish with the drop-down menu. It overlays onto other items meaning as soon as it's clicked the menu vanishes and switches to another cosmetic before the animation can even begin. Cosmetics in the locker can be searched by seasons using "S1-17" but after S18+ they no longer filter. Entering the drop-down menu or right-clicking anything in the locker accidentally immediately takes you all the way back to your currently equipped item when exiting. The filter menu requires an "apply" button to be pressed rather than simply closing and applying when selecting one of the filters, taking longer and more clicks to simply find your recent items or remove a filter. The filter menu was also better as a side panel so you don't have to move your cursor to the center of the screen and back every single time. As a side panel it also allowed for more options to be displayed, whereas the current one requires a huge scroll bar to simply filter by favorite. The presets menu scroll wheel also zooms the skins in and out as you scroll up and down the list. Because of the randomize preset button, the list compared to when saving a preset is all moved up by 1, becoming disorientating to where the preset was in relation to the rows. The shop no longer displays item descriptions or set names on cosmetics - now requiring a click on each individual item when there is adequate space to do so. The new shop and locker appearance can be accustomed to, however, it NEEDS the basic functionality and user-friendly UI elements that the previous ones had. Simple buttons at the bottom to favorite, swing, redeploy and equip. Less tabs to switch between, less clicks required to complete simple tasks and less feeling like there's a battle against the UI itself just to equip the cosmetics you paid for. We appreciate the moves the renew the locker and shop, but in terms of functionality and user interaction, there is nothing we want more than the old one back or the old one's elements merged into the new appearance. Thank you.

Sure, but the idea of simplifying the appearance of Fortnite, the locker and the shop are all going in the exact opposite direction of simplicity. Equipping cosmetics takes double, if not triple the clicks. The UI is impractical and janky, not to mention the introduction of buttons and drop-down menus that were far easier to access previously. Selecting a skin to rotate it, preview it or even spin it around now requires clicking on it, which then applies it to your loadout. Previously this needed a confirm button so you could preview and choose skins, backblings etc without loosing your currently equipped on if you want to go back. Wraps are not included as part of a character's preset despite being completely relevant to the skin worn. Changing emotes, lobby tracks, and all cosmetics now means you have to back out and change tabs, something that could have previously been done on 1 page. The sectioned tabs make sense with new types like LEGO Kits, Cars, Instruments but there's no need to separate Character from Wraps, Emotes or Lobby. Archiving or Favoriting items can no longer be done in batches or quickly. Previously all you had to do was click once per cosmetic on the button but now you have to enter a drop down and select it for every individual item. Applying wraps to all slots now requires a drop down menu rather than simply clicking the button at the bottom. Swinging a pickaxe or redeploying a glider is near impossible to do and feels like more of a chore to actually accomplish with the drop-down menu. It overlays onto other items meaning as soon as it's clicked the menu vanishes and switches to another cosmetic before the animation can even begin. Cosmetics in the locker can be searched by seasons using "S1-17" but after S18+ they no longer filter. Entering the drop-down menu or right-clicking anything in the locker accidentally immediately takes you all the way back to your currently equipped item when exiting. The filter menu requires an "apply" button to be pressed rather than simply closing and applying when selecting one of the filters, taking longer and more clicks to simply find your recent items or remove a filter. The filter menu was also better as a side panel so you don't have to move your cursor to the center of the screen and back every single time. As a side panel it also allowed for more options to be displayed, whereas the current one requires a huge scroll bar to simply filter by favorite. The presets menu scroll wheel also zooms the skins in and out as you scroll up and down the list. Because of the randomize preset button, the list compared to when saving a preset is all moved up by 1, becoming disorientating to where the preset was in relation to the rows. The shop no longer displays item descriptions or set names on cosmetics - now requiring a click on each individual item when there is adequate space to do so. The new shop and locker appearance can be accustomed to, however, it NEEDS the basic functionality and user-friendly UI elements that the previous ones had. Simple buttons at the bottom to favorite, swing, redeploy and equip. Less tabs to switch between, less clicks required to complete simple tasks and less feeling like there's a battle against the UI itself just to equip the cosmetics you paid for. We appreciate the moves the renew the locker and shop, but in terms of functionality and user interaction, there is nothing we want more than the old one back or the old one's elements merged into the new appearance. Thank you.

FNAssist

178,290 次观看 • 2 年前

A guy in Vancouver built an entire operating system inside a Chrome tab. By himself. Over six years. His personal website is the OS. You open and a Windows-style desktop loads. File explorer. Start menu. Taskbar. You can drag in a zip and extract it. You can play DOOM. You can play Quake III Arena. You can boot Linux from an ISO. You can run Stable Diffusion locally for image generation. You can open a Python terminal. You can edit code in Monaco, the same engine that powers VS Code. All of it runs in your browser tab. Nothing installs. His name is Dustin Brett. Self-taught engineer. Father. Husband. 4,473 commits. All his. He had to swap the Windows icon for the π symbol because of legal pressure. The repo has 12,883 stars. MIT license. His hosting bill is one dollar a month. A single Cloudflare CDN does the rest. This is what the open web was built for. (Link in the comments)

A guy in Vancouver built an entire operating system inside a Chrome tab. By himself. Over six years. His personal website is the OS. You open and a Windows-style desktop loads. File explorer. Start menu. Taskbar. You can drag in a zip and extract it. You can play DOOM. You can play Quake III Arena. You can boot Linux from an ISO. You can run Stable Diffusion locally for image generation. You can open a Python terminal. You can edit code in Monaco, the same engine that powers VS Code. All of it runs in your browser tab. Nothing installs. His name is Dustin Brett. Self-taught engineer. Father. Husband. 4,473 commits. All his. He had to swap the Windows icon for the π symbol because of legal pressure. The repo has 12,883 stars. MIT license. His hosting bill is one dollar a month. A single Cloudflare CDN does the rest. This is what the open web was built for. (Link in the comments)

Nav Toor

71,836 次观看 • 24 天前

Claude Opus 4.8 + OpenClaw now turns a restaurant's menu photos into 3D models guests can view, customize and order, then mails the owner a postcard with the QR…on autopilot. here's how agencies can land recurring contracts with this system: - scans every restaurant in a city in real time - pulls their real reviews, ratings, and reviewer-uploaded food photos - turns each dish photo into an interactive 3D model - samples the brand color straight from the restaurant's photos - guests can view each dish, customize it, and order on the spot - writes a printed postcard about their best dish - mails it to the registered office, addressed to the owner, with a QR to the live 3D menu every step from the scrape to the 3D models to the mailbox is automated reply "3D" + RT and i'll send you a free guide so you can build this too (must be following so i can DM you)

Chris

11,179 次观看 • 28 天前

SOMEONE JUST VIBECODED A PROGRAM THAT DOWNLOADS ANY WEBSITE ON THE INTERNET every $35,000 agency site is now yours to rip clean for $0 fully open source, save it before it's gone you paste one url and it does the rest: → crawls the entire site → grabs every file: html, css, js, images, even the fonts → rewrites every link to run fully offline → packs it all into a downloadable zip runs entirely in the browser, nothing to install or sign up for point it at any site you admire and the whole front-end is yours: → clone it → archive it before it dies → crack open exactly how it was built the thing agencies gatekeep for five figures is now a 10-second download bookmark this one

SOMEONE JUST VIBECODED A PROGRAM THAT DOWNLOADS ANY WEBSITE ON THE INTERNET every $35,000 agency site is now yours to rip clean for $0 fully open source, save it before it's gone you paste one url and it does the rest: → crawls the entire site → grabs every file: html, css, js, images, even the fonts → rewrites every link to run fully offline → packs it all into a downloadable zip runs entirely in the browser, nothing to install or sign up for point it at any site you admire and the whole front-end is yours: → clone it → archive it before it dies → crack open exactly how it was built the thing agencies gatekeep for five figures is now a 10-second download bookmark this one

Argona

121,605 次观看 • 9 天前

Your Ring alert goes off and the live view pops up. A man is at your front door, calmly trying different keys in the lock. One slips from his hand and clatters to the ground. He bends to pick it up—and suddenly the Ring voice cuts in: “You are being recorded.” He freezes. Looks straight at the camera. Whispers, “omg.” That’s when you notice it. A second figure, barely visible, standing motionless in the shadows just off to the side. Watching. So what is this? Two people working together? A lookout hiding in the dark? Or did the shadowy figure follow him home—and this is actually his door? Did that movement in the shadows trigger the Ring to speak? What do you think happened next? 👀

Your Ring alert goes off and the live view pops up. A man is at your front door, calmly trying different keys in the lock. One slips from his hand and clatters to the ground. He bends to pick it up—and suddenly the Ring voice cuts in: “You are being recorded.” He freezes. Looks straight at the camera. Whispers, “omg.” That’s when you notice it. A second figure, barely visible, standing motionless in the shadows just off to the side. Watching. So what is this? Two people working together? A lookout hiding in the dark? Or did the shadowy figure follow him home—and this is actually his door? Did that movement in the shadows trigger the Ring to speak? What do you think happened next? 👀

TheRealCherokeeOwl 🦉

2,060,318 次观看 • 5 个月前

You can now create AI images directly from Google Slides. No need to spend hours searching for images for your presentations. And this feature is available for free. Here's how to activate it: 1. Go to labs .google .com 2. Scroll down to "Google Workspace". 3. Click on the "Learn more" button to access the waitlist. When it's activated, you'll see the button that appears in Google Slides as in the video. Click on it and enter your prompt: E.g.: "a cat in front of a raspberry pie". You can even choose different styles: photography, vector art, sketch, ... This will save a lot of time when creating slideshows! Don't hesitate to follow me to learn how to do more with AI.

You can now create AI images directly from Google Slides. No need to spend hours searching for images for your presentations. And this feature is available for free. Here's how to activate it: 1. Go to labs .google .com 2. Scroll down to "Google Workspace". 3. Click on the "Learn more" button to access the waitlist. When it's activated, you'll see the button that appears in Google Slides as in the video. Click on it and enter your prompt: E.g.: "a cat in front of a raspberry pie". You can even choose different styles: photography, vector art, sketch, ... This will save a lot of time when creating slideshows! Don't hesitate to follow me to learn how to do more with AI.

Paul Couvert

318,240 次观看 • 2 年前

‼️🇺🇸: US Rep Amodei is not CONCLUSIVELY present in the US House Committee hearing on 9/9/25 until 3rd Roll call. "But you can see someone in his chair at the beginning of the meeting just after 11am ET" NO—you can not positively ID that person. It's too blurry and he doesn't speak or vote. Someone is sitting in Mr. Amodei's seat at 2:27:00 and DOES NOT ANSWER ROLL CALL. Committee members, especially Chairs, NEVER ignore roll call when they're present in the room. Ever. 👇🏻 There was obviously different people sitting in his chair throughout part of the day. The footage is too low-res to ID for sure. Which is why the roll call voting record is the only conclusive evidence. Hope this helps 🫡

‼️🇺🇸: US Rep Amodei is not CONCLUSIVELY present in the US House Committee hearing on 9/9/25 until 3rd Roll call. "But you can see someone in his chair at the beginning of the meeting just after 11am ET" NO—you can not positively ID that person. It's too blurry and he doesn't speak or vote. Someone is sitting in Mr. Amodei's seat at 2:27:00 and DOES NOT ANSWER ROLL CALL. Committee members, especially Chairs, NEVER ignore roll call when they're present in the room. Ever. 👇🏻 There was obviously different people sitting in his chair throughout part of the day. The footage is too low-res to ID for sure. Which is why the roll call voting record is the only conclusive evidence. Hope this helps 🫡

Diligent Denizen 🇺🇸

41,467 次观看 • 6 个月前

I built a clone of the Yeezy store with Next.js. This was a fun challenge — the site has some smooth animations and feels very fast. But it was bothering me that I couldn't use the browser back button. Can we do better? So I rebuilt the site with v0 and Motion. Here's how it works: 1. When you click on a product, Motion is able to animate the original position of the product in the grid, to the zoomed in product detail page. 2. During this transition, we also shallow update the URL with the `/p/slug` route for the page. 3. If you press the back button in the navbar, or use the browser back button, or press escape — all options will take you back to the main product listing page. 4. If you reload the page while looking at a product, or someone sends you a link to a specific product, it still works! This is the best parts of a SPA and MPA mixed together. In the future, I can make this even better with View Transitions (I wasn't able to get the product animation just right, but if you can I'd love to see it!). I also took some creative liberties from the original design. The whole 1/2/3 size thing, where you needed to click the "?" to see SM/MD/LG was strange, so I just went directly to those sizes. Similarly, I prefered the more traditional style sheet/modal with the background color change, versus the full screen takeover. If you wanted to actually hook this up to Shopify now, you can swap the cart implementation with Next.js Commerce, which has all the APIs you need + optimistic writes 🔥 Should I make a video walking through the code?

I built a clone of the Yeezy store with Next.js. This was a fun challenge — the site has some smooth animations and feels very fast. But it was bothering me that I couldn't use the browser back button. Can we do better? So I rebuilt the site with v0 and Motion. Here's how it works: 1. When you click on a product, Motion is able to animate the original position of the product in the grid, to the zoomed in product detail page. 2. During this transition, we also shallow update the URL with the `/p/slug` route for the page. 3. If you press the back button in the navbar, or use the browser back button, or press escape — all options will take you back to the main product listing page. 4. If you reload the page while looking at a product, or someone sends you a link to a specific product, it still works! This is the best parts of a SPA and MPA mixed together. In the future, I can make this even better with View Transitions (I wasn't able to get the product animation just right, but if you can I'd love to see it!). I also took some creative liberties from the original design. The whole 1/2/3 size thing, where you needed to click the "?" to see SM/MD/LG was strange, so I just went directly to those sizes. Similarly, I prefered the more traditional style sheet/modal with the background color change, versus the full screen takeover. If you wanted to actually hook this up to Shopify now, you can swap the cart implementation with Next.js Commerce, which has all the APIs you need + optimistic writes 🔥 Should I make a video walking through the code?

Lee Robinson

148,840 次观看 • 1 年前

With ChatGPT Atlas, we aim to push the boundary of what a browser can be — integrating ChatGPT and evolving it into an agent that takes action for you. But even as we build that future, the basics still matter. For most people we talk to, their tab strip is overflowing with too many tabs (mine certainly is!). This week's Atlas release: revamped tab search and a new 'auto organize' your tabs button. Click to remove duplicates, merge windows, or let ChatGPT group your tabs in a way that makes sense. Just hit “update” in the top right to try.

With ChatGPT Atlas, we aim to push the boundary of what a browser can be — integrating ChatGPT and evolving it into an agent that takes action for you. But even as we build that future, the basics still matter. For most people we talk to, their tab strip is overflowing with too many tabs (mine certainly is!). This week's Atlas release: revamped tab search and a new 'auto organize' your tabs button. Click to remove duplicates, merge windows, or let ChatGPT group your tabs in a way that makes sense. Just hit “update” in the top right to try.

Adam Fry

153,388 次观看 • 4 个月前