Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

CSS only animated exclusive accordion update 🚀 details { interpolate-size: allow-keywords; } ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: auto; }

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,403 subscribers

51,149 görüntüleme • 1 yıl önce •via X (Twitter)

Bilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

10 Yorum

Nine profil fotoğrafı
Nine1 yıl önce

Can you make a css based ui library called jhey/ui

Alexis Morin profil fotoğrafı
Alexis Morin1 yıl önce

What version of Chrome will have support for the ::details-content pseudo-element?

mh profil fotoğrafı
mh1 yıl önce

Probably going to be a while until this is useful, right?

Eugene Korchagin profil fotoğrafı
Eugene Korchagin1 yıl önce

God Are you magician?

Gustav Ekerot profil fotoğrafı
Gustav Ekerot1 yıl önce

where's the npm package jhey!? seriously though, would be cool with a css-only based component lib, copy paste á la shadcn

Sudhansu Bhushan Mishra profil fotoğrafı
Sudhansu Bhushan Mishra1 yıl önce

Thank you for sharing this codepen

👑 Satoshi 16px profil fotoğrafı
👑 Satoshi 16px1 yıl önce

You inspire me man!! Its crazy what you do with Css

Manu | UX UI Designer profil fotoğrafı
Manu | UX UI Designer1 yıl önce

Nice!!!!

Facundo Muoio profil fotoğrafı
Facundo Muoio1 yıl önce

Wow! Men, it is so pretty accordion. I would like to know where you learn these CSS skills.

Carlito profil fotoğrafı
Carlito1 yıl önce

Sorcery!

Benzer Videolar

Animated exclusive accordions with CSS 😎 ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: calc-size(auto); } Exclusive On the way! 🫶
0:28

Animated exclusive accordions with CSS 😎 ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: calc-size(auto); } Exclusive On the way! 🫶

jhey ʕ•ᴥ•ʔ

216,545 görüntüleme • 2 yıl önce

accordion transitions w/ css ::details-content, <details> + <summary> 🧑‍🍳 details:has(~ [open]) { --y: -1; } [open] ~ details { --y: 1; } details { translate: 0 calc(var(--y) * 1rem); } [open]::details-content { height: fit-content; }
0:28

accordion transitions w/ css ::details-content, <details> + <summary> 🧑‍🍳 details:has(~ [open]) { --y: -1; } [open] ~ details { --y: 1; } details { translate: 0 calc(var(--y) * 1rem); } [open]::details-content { height: fit-content; }

jhey ʕ•ᴥ•ʔ

151,054 görüntüleme • 8 ay önce

Neat piece is the responsive morph using CSS min() ✨ [popover] { transition-property: display, width, height; transition-behavior: allow-discrete; width: anchor-size(width); @​starting-style { width: min(640px, 100vw - 2rem); }}
0:22

Neat piece is the responsive morph using CSS min() ✨ [popover] { transition-property: display, width, height; transition-behavior: allow-discrete; width: anchor-size(width); @​starting-style { width: min(640px, 100vw - 2rem); }}

jhey ʕ•ᴥ•ʔ

64,806 görüntüleme • 1 yıl önce

sidebar details 🤌 CSS auto-height transition w/ grid 🎬 li > div[inert] { grid-template-rows: 0fr; } li > div { grid-template-rows: 1fr; transition: grid-template-rows .26s; } arrow keys for navigation 📍
0:28

sidebar details 🤌 CSS auto-height transition w/ grid 🎬 li > div[inert] { grid-template-rows: 0fr; } li > div { grid-template-rows: 1fr; transition: grid-template-rows .26s; } arrow keys for navigation 📍

jhey ʕ•ᴥ•ʔ

118,414 görüntüleme • 9 ay önce

responsive CSS pinned sidebar transition 📌 .layout:has(:popover-open) { grid-template-columns: var(--sidebar-width) 1fr; } aside:popover-open { translate: 0 var(--ctrl); height: var(--extend); } actual zero JS for the layout transition here so many details to play with! 🧑‍🍳
0:36

responsive CSS pinned sidebar transition 📌 .layout:has(:popover-open) { grid-template-columns: var(--sidebar-width) 1fr; } aside:popover-open { translate: 0 var(--ctrl); height: var(--extend); } actual zero JS for the layout transition here so many details to play with! 🧑‍🍳

jhey ʕ•ᴥ•ʔ

386,721 görüntüleme • 9 ay önce

Future CSS Tip! 🚀 You can create auto-resizing text inputs with one line of CSS 🔥 textarea, input { field-sizing: content; } No more JavaScript to sync a textarea height to fit the content 🫶 Perfect for chat, messaging, comments, etc. 💬 The size of your input will grow to fit your content. If you want to constrain the size, do something like this: textarea { field-sizing: content; min-height: 2lh; /* Use the line-height unit 😎*/ max-height: 10lh; } Love the fact you could use this for auto-resizing in both directions too! 🙌 Want a search field that expands horizontally? Do it! Love these one-liners that bring incredible value to the platform like this 💙 CodePen.IO link below! 👇
1:31

Future CSS Tip! 🚀 You can create auto-resizing text inputs with one line of CSS 🔥 textarea, input { field-sizing: content; } No more JavaScript to sync a textarea height to fit the content 🫶 Perfect for chat, messaging, comments, etc. 💬 The size of your input will grow to fit your content. If you want to constrain the size, do something like this: textarea { field-sizing: content; min-height: 2lh; /* Use the line-height unit 😎*/ max-height: 10lh; } Love the fact you could use this for auto-resizing in both directions too! 🙌 Want a search field that expands horizontally? Do it! Love these one-liners that bring incredible value to the platform like this 💙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

319,234 görüntüleme • 2 yıl önce

After the success of Pokédate, We are happy to announce that another route will be added to the game as Downloadable Content! Featuring the one and only Flame Pokémon, Charizard! See if you can crack open his volcanic heart and rough exterior. More details and screens below👇
0:28

After the success of Pokédate, We are happy to announce that another route will be added to the game as Downloadable Content! Featuring the one and only Flame Pokémon, Charizard! See if you can crack open his volcanic heart and rough exterior. More details and screens below👇

incineroar fan

147,552 görüntüleme • 3 yıl önce

Tonight, on Real America w/ Dan Ball - TPUSA Frontlines Reporter & Content Creator Bo Alford Turning Point USA - TPUSA's Bo Alford just revealed the chilling details of the Saturday terror attempt at Gracie Mansion; is this the 'new normal' for America when leaders allow radical ideologies to take root in our greatest cities? Watch Real America on Spectrum and YouTube TV Today!
1:50

Tonight, on Real America w/ Dan Ball - TPUSA Frontlines Reporter & Content Creator Bo Alford Turning Point USA - TPUSA's Bo Alford just revealed the chilling details of the Saturday terror attempt at Gracie Mansion; is this the 'new normal' for America when leaders allow radical ideologies to take root in our greatest cities? Watch Real America on Spectrum and YouTube TV Today!

One America News

36,301 görüntüleme • 4 ay önce

real humans + AI editor = 200 UGC videos. $3/video. 2 minutes. DansUGC Content Factory waitlist is open. here's how it works: > upload 10 product demos > plugged into 3k b-rolls from dansugc > auto-generates 200 reaction + demo combos > real human hooks. ready to deploy. no briefing. no editing. no waiting. just 10 uploads and 200 videos. comment "content factory" and I'll send you more details. must be following so i can DM.
0:34

real humans + AI editor = 200 UGC videos. $3/video. 2 minutes. DansUGC Content Factory waitlist is open. here's how it works: > upload 10 product demos > plugged into 3k b-rolls from dansugc > auto-generates 200 reaction + demo combos > real human hooks. ready to deploy. no briefing. no editing. no waiting. just 10 uploads and 200 videos. comment "content factory" and I'll send you more details. must be following so i can DM.

daniel

23,675 görüntüleme • 3 ay önce

SonicScribe V1 is LIVE! We are excited to announce a true breakthrough in confidential audio data handling – SonicScribe is now available for all users! This revolutionary technology transforms how organizations work with sensitive audio content by: • Accurate Transcriptions – with automatic redaction of personal identifiers. • Smart Q&A – ask natural language questions and receive context-aware, privacy-preserving answers. • Providing answers – that preserve context while protecting privacy. • Safe Search – analyze content without ever exposing confidential details. For the first time, organizations handling confidential information can safely allow employees to perform critical tasks without privacy risks. Law firms can analyze case recordings, HR departments can process interview transcripts, and customer service teams can mine call data – all while sensitive details remain protected. This technology bridges a critical gap that has long existed in regulated industries. Now you can extract maximum value from confidential audio while maintaining complete compliance with privacy regulations. 👉 Try it now:
0:45

SonicScribe V1 is LIVE! We are excited to announce a true breakthrough in confidential audio data handling – SonicScribe is now available for all users! This revolutionary technology transforms how organizations work with sensitive audio content by: • Accurate Transcriptions – with automatic redaction of personal identifiers. • Smart Q&A – ask natural language questions and receive context-aware, privacy-preserving answers. • Providing answers – that preserve context while protecting privacy. • Safe Search – analyze content without ever exposing confidential details. For the first time, organizations handling confidential information can safely allow employees to perform critical tasks without privacy risks. Law firms can analyze case recordings, HR departments can process interview transcripts, and customer service teams can mine call data – all while sensitive details remain protected. This technology bridges a critical gap that has long existed in regulated industries. Now you can extract maximum value from confidential audio while maintaining complete compliance with privacy regulations. 👉 Try it now:

ZKCrypt AI

17,101 görüntüleme • 1 yıl önce

🎮 Get Ready for GAP Season 8! Level up your gaming experience with an all-new roster featuring: - An expanded game roster with fresh titles - Groundbreaking new features and content - Exclusive partnerships with B3OS and HyperPlayGaming 🎬 Don't miss our latest teaser showcasing the incredible lineup of quest-ready games coming to Season 8. Which game has caught your eye? Drop a comment below and join the conversation! Launch details dropping soon – don't miss out! 🚀 #GAPS8 #TogetherWePlay #YGG #ComingSoon
1:27

🎮 Get Ready for GAP Season 8! Level up your gaming experience with an all-new roster featuring: - An expanded game roster with fresh titles - Groundbreaking new features and content - Exclusive partnerships with B3OS and HyperPlayGaming 🎬 Don't miss our latest teaser showcasing the incredible lineup of quest-ready games coming to Season 8. Which game has caught your eye? Drop a comment below and join the conversation! Launch details dropping soon – don't miss out! 🚀 #GAPS8 #TogetherWePlay #YGG #ComingSoon

Yield Guild Games

30,833 görüntüleme • 1 yıl önce

🏝️ More Kuroro Wilds Content coming to you soon! As we are getting closer to launch of Kuroro Wilds, we will be sharing more details about this mysterious island! 👀 Sneak Peeks: Get a first look at the game's amazing features and gameplay! 🧠 Gameplay Deep Dives: Learn the ins and outs of Kuroro Wilds mechanics and strategies. ⚔️ Character Reveals: Meet the fascinating characters that will drive the story! 👑 Kuroro Showcase: Witness the power of Kuroro in action, discover their lore, and explore the Kuroropedia! 🚀 Want a head start? Follow Kuroro Wilds for exclusive content, tips, tricks, and more! #pixelart #game
0:49

🏝️ More Kuroro Wilds Content coming to you soon! As we are getting closer to launch of Kuroro Wilds, we will be sharing more details about this mysterious island! 👀 Sneak Peeks: Get a first look at the game's amazing features and gameplay! 🧠 Gameplay Deep Dives: Learn the ins and outs of Kuroro Wilds mechanics and strategies. ⚔️ Character Reveals: Meet the fascinating characters that will drive the story! 👑 Kuroro Showcase: Witness the power of Kuroro in action, discover their lore, and explore the Kuroropedia! 🚀 Want a head start? Follow Kuroro Wilds for exclusive content, tips, tricks, and more! #pixelart #game

kuroro beasts

47,732 görüntüleme • 1 yıl önce

WhatsApp is working on a feature to share spoiler messages! The demo video is OUT! WhatsApp will make it easier for users to send messages that can hide sensitive content behind a blurred layer. The video shows the new formatting tool that will allow users to hide selected text as spoiler content before sending a message. Recipients would be able to tap the message to reveal the text. This would help people share messages without immediately exposing the details. The feature will also reduce accidental spoilers in group chats where not everyone wants to see the same information at the same time. It will be compatible with text messages and media captions. In the future, it may support photo and video content as well. The feature is under testing, and it will be available to beta testers soon.
0:21

WhatsApp is working on a feature to share spoiler messages! The demo video is OUT! WhatsApp will make it easier for users to send messages that can hide sensitive content behind a blurred layer. The video shows the new formatting tool that will allow users to hide selected text as spoiler content before sending a message. Recipients would be able to tap the message to reveal the text. This would help people share messages without immediately exposing the details. The feature will also reduce accidental spoilers in group chats where not everyone wants to see the same information at the same time. It will be compatible with text messages and media captions. In the future, it may support photo and video content as well. The feature is under testing, and it will be available to beta testers soon.

WABetaInfo

13,611 görüntüleme • 2 ay önce

Today we’re releasing OpenEQA — the Open-Vocabulary Embodied Question Answering Benchmark. It measures an AI agent’s understanding of physical environments by probing it with open vocabulary questions like “Where did I leave my badge?” More details ➡️ All of today’s state-of-art vision+language models (VLMs) fall well short of human performance. In fact, for questions that require spatial understanding, today’s VLMs are nearly “blind” – access to visual content provides only minor improvements over language-only models. We hope that OpenEQA motivates additional research into helping AI understand and communicate about the world it sees.
1:58

Today we’re releasing OpenEQA — the Open-Vocabulary Embodied Question Answering Benchmark. It measures an AI agent’s understanding of physical environments by probing it with open vocabulary questions like “Where did I leave my badge?” More details ➡️ All of today’s state-of-art vision+language models (VLMs) fall well short of human performance. In fact, for questions that require spatial understanding, today’s VLMs are nearly “blind” – access to visual content provides only minor improvements over language-only models. We hope that OpenEQA motivates additional research into helping AI understand and communicate about the world it sees.

AI at Meta

407,109 görüntüleme • 2 yıl önce

Don’t stop talking about this California Democrat Mia Bonta introduced California Assembly Bill 2624, The Stop Nick Shirley Act Not only will it criminalize investigative journalism, IT CREATES SERVICES FOR IMMIGRANTS COMMITTING THE CRIMES The bill will create a new address confidentiality program for employees, volunteers, and providers working with immigration support services. Organizations helping immigrants, including daycare, learning centers, hospice, or other taxpayer-funded social services Holy crap…. - The bill prohibits posting or sharing on the internet the photo, personal information, or home address of these individuals with the intent to incite harassment, threats, or violence - Violations allow lawsuits for damages, injunctions to remove content and criminal penalties - Punishments include misdemeanor, fines up to $10,000, possible jail time, and court orders to delete content - It allow affected individuals or organizations to demand takedown of videos or posts that include their images/personal details, even if the recording happened in or around a public or semi-public facility The bill advanced out of the Assembly Judiciary Committee
1:10

Don’t stop talking about this California Democrat Mia Bonta introduced California Assembly Bill 2624, The Stop Nick Shirley Act Not only will it criminalize investigative journalism, IT CREATES SERVICES FOR IMMIGRANTS COMMITTING THE CRIMES The bill will create a new address confidentiality program for employees, volunteers, and providers working with immigration support services. Organizations helping immigrants, including daycare, learning centers, hospice, or other taxpayer-funded social services Holy crap…. - The bill prohibits posting or sharing on the internet the photo, personal information, or home address of these individuals with the intent to incite harassment, threats, or violence - Violations allow lawsuits for damages, injunctions to remove content and criminal penalties - Punishments include misdemeanor, fines up to $10,000, possible jail time, and court orders to delete content - It allow affected individuals or organizations to demand takedown of videos or posts that include their images/personal details, even if the recording happened in or around a public or semi-public facility The bill advanced out of the Assembly Judiciary Committee

Wall Street Apes

190,327 görüntüleme • 3 ay önce

American bought a Vizio Smart TV from Walmart. He took it home only to find you cannot use the TV without a Walmart account logged in You cent even turn it on and get past the first screen This is because Walmart bought Vizio and by having you sign in with your account they can like the data collected to you This TV collects everything and links it to your account - Contact details - Payment information - Subscription information - Account authentication and security information The optional data that most people just click next through is the really invasive data capturing, it includes - Viewing Data - Activity Data - Mobile App Data - Mobile Streaming Data It also uses built-in technology to analyze what’s playing on the TV in real time, including: - Audio and video programming, ads and gaming content - Content from connected devices like HDMI - Third-party apps like streaming services for movies, shows, episodes, channels, launch events - Device state details: volume, channel, picture controls, inputs, power on/off But it doesn’t stop there, it also collects - Basic identifiers: Name, email, phone, address, account credentials - Device/online identifiers: Device IDs, advertising IDs, IP/MAC addresses, model/serial numbers, firmware, Wi-Fi access points, cookies - Activity Data: Settings, inputs, clicks, impressions, operational/performance data, some content interaction details - Commercial/financial info: Purchases, subscriptions, warranties, payment cards - Internet/network activity: How you use the apps, sites, ads, and services - Mobile app and streaming data if you use the Vizio app You agree to have all this data collected from you just because you bought a TV…..
1:22

American bought a Vizio Smart TV from Walmart. He took it home only to find you cannot use the TV without a Walmart account logged in You cent even turn it on and get past the first screen This is because Walmart bought Vizio and by having you sign in with your account they can like the data collected to you This TV collects everything and links it to your account - Contact details - Payment information - Subscription information - Account authentication and security information The optional data that most people just click next through is the really invasive data capturing, it includes - Viewing Data - Activity Data - Mobile App Data - Mobile Streaming Data It also uses built-in technology to analyze what’s playing on the TV in real time, including: - Audio and video programming, ads and gaming content - Content from connected devices like HDMI - Third-party apps like streaming services for movies, shows, episodes, channels, launch events - Device state details: volume, channel, picture controls, inputs, power on/off But it doesn’t stop there, it also collects - Basic identifiers: Name, email, phone, address, account credentials - Device/online identifiers: Device IDs, advertising IDs, IP/MAC addresses, model/serial numbers, firmware, Wi-Fi access points, cookies - Activity Data: Settings, inputs, clicks, impressions, operational/performance data, some content interaction details - Commercial/financial info: Purchases, subscriptions, warranties, payment cards - Internet/network activity: How you use the apps, sites, ads, and services - Mobile app and streaming data if you use the Vizio app You agree to have all this data collected from you just because you bought a TV…..

Wall Street Apes

227,054 görüntüleme • 3 gün önce

NEWS: Google is rolling out AI-powered EV trip planning and battery predictions in Google Maps to over 350 car models with Android Auto. The update recommends when and where to charge based on your vehicle and battery level, showing estimated battery at arrival and adjusting ETAs with charging time, something that Tesla already does, but this Google Maps update will reduce the need for multiple apps in non-Tesla EVs. Google: "To deliver accurate battery predictions for hundreds of vehicles, we combine AI with advanced energy models that analyze car details — like weight and battery size — alongside Maps’ real-time information about traffic, road elevation and weather. This will allow us to bring intelligent trip-planning features to most U.S. EVs soon."
0:21

NEWS: Google is rolling out AI-powered EV trip planning and battery predictions in Google Maps to over 350 car models with Android Auto. The update recommends when and where to charge based on your vehicle and battery level, showing estimated battery at arrival and adjusting ETAs with charging time, something that Tesla already does, but this Google Maps update will reduce the need for multiple apps in non-Tesla EVs. Google: "To deliver accurate battery predictions for hundreds of vehicles, we combine AI with advanced energy models that analyze car details — like weight and battery size — alongside Maps’ real-time information about traffic, road elevation and weather. This will allow us to bring intelligent trip-planning features to most U.S. EVs soon."

Sawyer Merritt

153,054 görüntüleme • 4 ay önce

🦍 $GOGO The cartoon gorilla TAKING OVER Solana! He’s wild. He’s fearless. And he RAIDS harder than anyone 💣 Built by the community. Designed to PUMP. Engineered to MOON! 🚀 🔥 Dual Launch on PumpFun & Moonit ✅ KYC ✔️ AUDIT ✔️ Hype is REAL. This ain’t just another meme… It’s a movement. And early buyers WILL win big! 💰 🌐 Website: 📢 Telegram: 💥 PumpFun CA: Ge2xZqDky9LZgVwfLgXet7ApejgGKcANTt5buCbdpump 💥 Moonit CA: BM8WpyfqfSzMAEV64o1vn2moi4LmfZLMt74Va4Svmoon ⚠️ Don’t watch this gorilla moon without you JOIN THE $GOGO ARMY NOW! 🦍🔥 ——————————————— 📢 Sponsored Content 🛑 NFA: For informational purposes only 🔍 DYOR before any investment 🎁 Free Offer - See Details
0:33

🦍 $GOGO The cartoon gorilla TAKING OVER Solana! He’s wild. He’s fearless. And he RAIDS harder than anyone 💣 Built by the community. Designed to PUMP. Engineered to MOON! 🚀 🔥 Dual Launch on PumpFun & Moonit ✅ KYC ✔️ AUDIT ✔️ Hype is REAL. This ain’t just another meme… It’s a movement. And early buyers WILL win big! 💰 🌐 Website: 📢 Telegram: 💥 PumpFun CA: Ge2xZqDky9LZgVwfLgXet7ApejgGKcANTt5buCbdpump 💥 Moonit CA: BM8WpyfqfSzMAEV64o1vn2moi4LmfZLMt74Va4Svmoon ⚠️ Don’t watch this gorilla moon without you JOIN THE $GOGO ARMY NOW! 🦍🔥 ——————————————— 📢 Sponsored Content 🛑 NFA: For informational purposes only 🔍 DYOR before any investment 🎁 Free Offer - See Details

Sol Queen 👑

193,211 görüntüleme • 1 yıl önce

How I turn my templates into real landing pages. Works for any vibe coding platform or site. This is my full guide. I start with Gemini 3. I copy the HTML code and paste to Cursor/v0/lovable and prompt "Create a new landing page /page-name using this design but adapted to {site_name}. Replace the header and footer with the ones from my site. Adapt the whole page, keep everything: {HTML_code}" Details that can to be adapted or improved: Fonts: "Use {font_name} Google font for headings and {font_name} for body text." Icons: "Use Iconify {icon_set} icons" Colors: "Change primary color to blue. Everything else should be monotone." Bonus: "Make the outlines subtle" for a cleaner design. Animation intro/on scroll: "Animate when in view observed, fade in, slide in, blur in, element by element. Use 'both' instead of 'forwards'. Don't use opacity 0." Static to animated: "Animate details with {animate_type} and decorations.". Example types: line, beam animation, noodles, grid, sonar, etc. Background animation: "Apply the background animation using Unicorn Studio {animation_code}" Details to make your layout stand out: "Add vertical container-size lines. Add 01 02 03 number details." Stand out from generic-looking: "Make this more upscale with large tall fonts, Newsreader font and black and white agency". Adapt content: "Adapt the content to {copy and paste site texts}". Buttons: "Change main button to {code}. Add a 1px border beam animation around the pill-shaped button on hover." Adding sections like testimonials: "Adapt a new section after {section} using this code: {component code}". You can copy the code from Codepen, 21st dev or Aura. Responsiveness: "Make this responsive. Add a hamburger menu for mobile. Hide this {element} for mobile." Making forms work: "Make the form send an email to {your_email}". Payments: "Link the buy button to {LemonSqueezy payment link}". I use composer-1 for quick fixes. I finish with Claude Opus 4.5 for code reviews "Please review the code for performance and robustness". The template HTML code should give you a blueprint for all these, but I think it's important to keep iterating for your specific site.
0:46

How I turn my templates into real landing pages. Works for any vibe coding platform or site. This is my full guide. I start with Gemini 3. I copy the HTML code and paste to Cursor/v0/lovable and prompt "Create a new landing page /page-name using this design but adapted to {site_name}. Replace the header and footer with the ones from my site. Adapt the whole page, keep everything: {HTML_code}" Details that can to be adapted or improved: Fonts: "Use {font_name} Google font for headings and {font_name} for body text." Icons: "Use Iconify {icon_set} icons" Colors: "Change primary color to blue. Everything else should be monotone." Bonus: "Make the outlines subtle" for a cleaner design. Animation intro/on scroll: "Animate when in view observed, fade in, slide in, blur in, element by element. Use 'both' instead of 'forwards'. Don't use opacity 0." Static to animated: "Animate details with {animate_type} and decorations.". Example types: line, beam animation, noodles, grid, sonar, etc. Background animation: "Apply the background animation using Unicorn Studio {animation_code}" Details to make your layout stand out: "Add vertical container-size lines. Add 01 02 03 number details." Stand out from generic-looking: "Make this more upscale with large tall fonts, Newsreader font and black and white agency". Adapt content: "Adapt the content to {copy and paste site texts}". Buttons: "Change main button to {code}. Add a 1px border beam animation around the pill-shaped button on hover." Adding sections like testimonials: "Adapt a new section after {section} using this code: {component code}". You can copy the code from Codepen, 21st dev or Aura. Responsiveness: "Make this responsive. Add a hamburger menu for mobile. Hide this {element} for mobile." Making forms work: "Make the form send an email to {your_email}". Payments: "Link the buy button to {LemonSqueezy payment link}". I use composer-1 for quick fixes. I finish with Claude Opus 4.5 for code reviews "Please review the code for performance and robustness". The template HTML code should give you a blueprint for all these, but I think it's important to keep iterating for your specific site.

Meng To

41,015 görüntüleme • 7 ay önce

As part of my assignment, I was tasked with designing a high-density data grid for an SEO platform. During development, our analysis of Google Analytics data revealed that the majority of our users access the platform on 13-inch display laptops. This insight necessitated optimizing the data grid for this screen size. A key challenge we encountered was the sidebar housing keyword filters, which occupied a significant portion of the available space. Since this feature was integral to the page, removing it was not an option. Even making it collapsible would have had minimal impact on the overall layout. Our initial approach involved implementing an inner horizontal scroll to accommodate additional columns. However, this solution introduced technical limitations due to the grid’s accordion UI pattern, which enables users to expand rows for detailed views. This functionality effectively split the table in half, making it difficult to synchronize scrolling across two separate grid sections within modern browsers. To address these constraints, I devised an alternative solution: implementing auto-expandable and collapsible columns based on content visibility. For instance, the "Flag" and "Performance" columns dynamically collapse by default and expand when hovered over, allowing users to access the necessary details when needed. This approach enabled us to fit all columns within a 13-inch display without relying on horizontal scrolling, ensuring a more efficient and user-friendly experience.
0:35

As part of my assignment, I was tasked with designing a high-density data grid for an SEO platform. During development, our analysis of Google Analytics data revealed that the majority of our users access the platform on 13-inch display laptops. This insight necessitated optimizing the data grid for this screen size. A key challenge we encountered was the sidebar housing keyword filters, which occupied a significant portion of the available space. Since this feature was integral to the page, removing it was not an option. Even making it collapsible would have had minimal impact on the overall layout. Our initial approach involved implementing an inner horizontal scroll to accommodate additional columns. However, this solution introduced technical limitations due to the grid’s accordion UI pattern, which enables users to expand rows for detailed views. This functionality effectively split the table in half, making it difficult to synchronize scrolling across two separate grid sections within modern browsers. To address these constraints, I devised an alternative solution: implementing auto-expandable and collapsible columns based on content visibility. For instance, the "Flag" and "Performance" columns dynamically collapse by default and expand when hovered over, allowing users to access the necessary details when needed. This approach enabled us to fit all columns within a 13-inch display without relying on horizontal scrolling, ensuring a more efficient and user-friendly experience.

virgil pana

44,560 görüntüleme • 1 yıl önce