• So, there's this thing where someone made a Minecraft clone using just HTML and CSS. No JavaScript at all. Seems a bit limited, but hey, it's possible. You can check it out if you want, but honestly, it doesn't seem like it offers much. Just another example of what you can do with web tech, I guess. Not super exciting, but it's there.

    #MinecraftClone
    #HTML
    #CSS
    #WebDevelopment
    So, there's this thing where someone made a Minecraft clone using just HTML and CSS. No JavaScript at all. Seems a bit limited, but hey, it's possible. You can check it out if you want, but honestly, it doesn't seem like it offers much. Just another example of what you can do with web tech, I guess. Not super exciting, but it's there. #MinecraftClone #HTML #CSS #WebDevelopment
    HACKADAY.COM
    Minecraft Clone Manages With Nothing But HTML + CSS
    Can a 3D Minecraft implementation be done entirely in CSS and HTML, without a single line of JavaScript in sight? The answer is yes! True, this small clone is limited …read more
    1 Reacties 0 aandelen
  • liens, JavaScript, CSS, SEO, ergonomie, développement web, optimisation, interface utilisateur

    ## Introduction

    Dans un monde où chaque pixel compte, où chaque détail peut faire la différence entre une expérience utilisateur réussie et une déception amère, la question de l'optimisation des liens en JavaScript et en CSS prend un sens profond. C'est une danse entre la beauté et la fonctionnalité, une quête sans fin pour atteindre l'harmonie parfaite. Mais que se passe-t-il lorsque l'on réalise qu...
    liens, JavaScript, CSS, SEO, ergonomie, développement web, optimisation, interface utilisateur ## Introduction Dans un monde où chaque pixel compte, où chaque détail peut faire la différence entre une expérience utilisateur réussie et une déception amère, la question de l'optimisation des liens en JavaScript et en CSS prend un sens profond. C'est une danse entre la beauté et la fonctionnalité, une quête sans fin pour atteindre l'harmonie parfaite. Mais que se passe-t-il lorsque l'on réalise qu...
    Étendre les liens en JavaScript (ou en CSS) : Une danse avec l'ombre
    liens, JavaScript, CSS, SEO, ergonomie, développement web, optimisation, interface utilisateur ## Introduction Dans un monde où chaque pixel compte, où chaque détail peut faire la différence entre une expérience utilisateur réussie et une déception amère, la question de l'optimisation des liens en JavaScript et en CSS prend un sens profond. C'est une danse entre la beauté et la...
    Like
    Love
    Wow
    Sad
    Angry
    615
    1 Reacties 0 aandelen
  • Mock up a website in five prompts

    “Wait, can users actually add products to the cart?”Every prototype faces that question or one like it. You start to explain it’s “just Figma,” “just dummy data,” but what if you didn’t need disclaimers?What if you could hand clients—or your team—a working, data-connected mock-up of their website, or new pages and components, in less time than it takes to wireframe?That’s the challenge we’ll tackle today. But first, we need to look at:The problem with today’s prototyping toolsPick two: speed, flexibility, or interactivity.The prototyping ecosystem, despite having amazing software that addresses a huge variety of needs, doesn’t really have one tool that gives you all three.Wireframing apps let you draw boxes in minutes but every button is fake. Drag-and-drop builders animate scroll triggers until you ask for anything off-template. Custom code frees you… after you wave goodbye to a few afternoons.AI tools haven’t smashed the trade-off; they’ve just dressed it in flashier costumes. One prompt births a landing page, the next dumps a 2,000-line, worse-than-junior-level React file in your lap. The bottleneck is still there. Builder’s approach to website mockupsWe’ve been trying something a little different to maintain speed, flexibility, and interactivity while mocking full websites. Our AI-driven visual editor:Spins up a repo in seconds or connects to your existing one to use the code as design inspiration. React, Vue, Angular, and Svelte all work out of the box.
    Lets you shape components via plain English, visual edits, copy/pasted Figma frames, web inspos, MCP tools, and constant visual awareness of your entire website.
    Commits each change as a clean GitHub pull request your team can review like hand-written code. All your usual CI checks and lint rules apply.And if you need a tweak, you can comment to @builderio-bot right in the GitHub PR to make asynchronous changes without context switching.This results in a live site the café owner can interact with today, and a branch your devs can merge tomorrow. Stakeholders get to click actual buttons and trigger real state—no more “so, just imagine this works” demos.Let’s see it in action.From blank canvas to working mockup in five promptsToday, I’m going to mock up a fake business website. You’re welcome to create a real one.Before we fire off a single prompt, grab a note and write:Business name & vibe
    Core pages
    Primary goal
    Brand palette & toneThat’s it. Don’t sweat the details—we can always iterate. For mine, I wrote:1. Sunny Trails Bakery — family-owned, feel-good, smells like warm cinnamon.
    2. Home, About, Pricing / Subscription Box, Menu.
    3. Drive online orders and foot traffic—every CTA should funnel toward “Order Now” or “Reserve a Table.”
    4. Warm yellow, chocolate brown, rounded typography, playful copy.We’re not trying to fit everything here. What matters is clarity on what we’re creating, so the AI has enough context to produce usable scaffolds, and so later tweaks stay aligned with the client’s vision. Builder will default to using React, Vite, and Tailwind. If you want a different JS framework, you can link an existing repo in that stack. In the near future, you won’t need to do this extra step to get non-React frameworks to function.An entire website from the first promptNow, we’re ready to get going.Head over to Builder.io and paste in this prompt or your own:Create a cozy bakery website called “Sunny Trails Bakery” with pages for:
    • Home
    • About
    • Pricing
    • Menu
    Brand palette: warm yellow and chocolate brown. Tone: playful, inviting. The restaurant is family-owned, feel-good, and smells like cinnamon.
    The goal of this site is to drive online orders and foot traffic—every CTA should funnel toward "Order Now" or "Reserve a Table."Once you hit enter, Builder will spin up a new dev container, and then inside that container, the AI will build out the first version of your site. You can leave the page and come back when it’s done.Now, before we go further, let’s create our repo, so that we get version history right from the outset. Click “Create Repo” up in the top right, and link your GitHub account.Once the process is complete, you’ll have a brand new repo.If you need any help on this step, or any of the below, check out these docs.Making the mockup’s order system workFrom our one-shot prompt, we’ve already got a really nice start for our client. However, when we press the “Order Now” button, we just get a generic alert. Let’s fix this.The best part about connecting to GitHub is that we get version control. Head back to your dashboard and edit the settings of your new project. We can give it a better name, and then, in the “Advanced” section, we can change the “Commit Mode” to “Pull Requests.”Now, we have the ability to create new branches right within Builder, allowing us to make drastic changes without worrying about the main version. This is also helpful if you’d like to show your client or team a few different versions of the same prototype.On a new branch, I’ll write another short prompt:Can you make the "Order Now" button work, even if it's just with dummy JSON for now?As you can see in the GIF above, Builder creates an ordering system and a fully mobile-responsive cart and checkout flow.Now, we can click “Send PR” in the top right, and we have an ordinary GitHub PR that can be reviewed and merged as needed.This is what’s possible in two prompts. For our third, let’s gussy up the style.If you’re like me, you might spend a lot of time admiring other people’s cool designs and learning how to code up similar components in your own style.Luckily, Builder has this capability, too, with our Chrome extension. I found a “Featured Posts” section on OpenAI’s website, where I like how the layout and scrolling work. We can copy and paste it onto our “Featured Treats” section, retaining our cafe’s distinctive brand style.Don’t worry—OpenAI doesn’t mind a little web scraping.You can do this with any component on any website, so your own projects can very quickly become a “best of the web” if you know what you’re doing.Plus, you can use Figma designs in much the same way, with even better design fidelity. Copy and paste a Figma frame with our Figma plugin, and tell the AI to either use the component as inspiration or as a 1:1 to reference for what the design should be.Now, we’re ready to send our PR. This time, let’s take a closer look at the code the AI has created.As you can see, the code is neatly formatted into two reusable components. Scrolling down further, I find a CSS file and then the actual implementation on the homepage, with clean JSON to represent the dummy post data.Design tweaks to the mockup with visual editsOne issue that cropped up when the AI brought in the OpenAI layout is that it changed my text from “Featured Treats” to “Featured Stories & Treats.” I’ve realized I don’t like either, and I want to replace that text with: “Fresh Out of the Bakery.”It would be silly, though, to prompt the AI just for this small tweak. Let’s switch into edit mode.Edit Mode lets you select any component and change any of its content or underlying CSS directly. You get a host of Webflow-like options to choose from, so that you can finesse the details as needed.Once you’ve made all the visual changes you want—maybe tweaking a button color or a border radius—you can click “Apply Edits,” and the AI will ensure the underlying code matches your repo’s style.Async fixes to the mockup with Builder BotNow, our pull request is nearly ready to merge, but I found one issue with it:When we copied the OpenAI website layout earlier, one of the blog posts had a video as its featured graphic instead of just an image. This is cool for OpenAI, but for our bakery, I just wanted images in this section. Since I didn’t instruct Builder’s AI otherwise, it went ahead and followed the layout and created extra code for video capability.No problem. We can fix this inside GItHub with our final prompt. We just need to comment on the PR and tag builderio-bot. Within about a minute, Builder Bot has successfully removed the video functionality, leaving a minimal diff that affects only the code it needed to. For example: Returning to my project in Builder, I can see that the bot’s changes are accounted for in the chat window as well, and I can use the live preview link to make sure my site works as expected:Now, if this were a real project, you could easily deploy this to the web for your client. After all, you’ve got a whole GitHub repo. This isn’t just a mockup; it’s actual code you can tweak—with Builder or Cursor or by hand—until you’re satisfied to run the site in production.So, why use Builder to mock up your website?Sure, this has been a somewhat contrived example. A real prototype is going to look prettier, because I’m going to spend more time on pieces of the design that I don’t like as much.But that’s the point of the best AI tools: they don’t take you, the human, out of the loop.You still get to make all the executive decisions, and it respects your hard work. Since you can constantly see all the code the AI creates, work in branches, and prompt with component-level precision, you can stop worrying about AI overwriting your opinions and start using it more as the tool it’s designed to be.You can copy in your team’s Figma designs, import web inspos, connect MCP servers to get Jira tickets in hand, and—most importantly—work with existing repos full of existing styles that Builder will understand and match, just like it matched OpenAI’s layout to our little cafe.So, we get speed, flexibility, and interactivity all the way from prompt to PR to production.Try Builder today.
    #mock #website #five #prompts
    Mock up a website in five prompts
    “Wait, can users actually add products to the cart?”Every prototype faces that question or one like it. You start to explain it’s “just Figma,” “just dummy data,” but what if you didn’t need disclaimers?What if you could hand clients—or your team—a working, data-connected mock-up of their website, or new pages and components, in less time than it takes to wireframe?That’s the challenge we’ll tackle today. But first, we need to look at:The problem with today’s prototyping toolsPick two: speed, flexibility, or interactivity.The prototyping ecosystem, despite having amazing software that addresses a huge variety of needs, doesn’t really have one tool that gives you all three.Wireframing apps let you draw boxes in minutes but every button is fake. Drag-and-drop builders animate scroll triggers until you ask for anything off-template. Custom code frees you… after you wave goodbye to a few afternoons.AI tools haven’t smashed the trade-off; they’ve just dressed it in flashier costumes. One prompt births a landing page, the next dumps a 2,000-line, worse-than-junior-level React file in your lap. The bottleneck is still there. Builder’s approach to website mockupsWe’ve been trying something a little different to maintain speed, flexibility, and interactivity while mocking full websites. Our AI-driven visual editor:Spins up a repo in seconds or connects to your existing one to use the code as design inspiration. React, Vue, Angular, and Svelte all work out of the box. Lets you shape components via plain English, visual edits, copy/pasted Figma frames, web inspos, MCP tools, and constant visual awareness of your entire website. Commits each change as a clean GitHub pull request your team can review like hand-written code. All your usual CI checks and lint rules apply.And if you need a tweak, you can comment to @builderio-bot right in the GitHub PR to make asynchronous changes without context switching.This results in a live site the café owner can interact with today, and a branch your devs can merge tomorrow. Stakeholders get to click actual buttons and trigger real state—no more “so, just imagine this works” demos.Let’s see it in action.From blank canvas to working mockup in five promptsToday, I’m going to mock up a fake business website. You’re welcome to create a real one.Before we fire off a single prompt, grab a note and write:Business name & vibe Core pages Primary goal Brand palette & toneThat’s it. Don’t sweat the details—we can always iterate. For mine, I wrote:1. Sunny Trails Bakery — family-owned, feel-good, smells like warm cinnamon. 2. Home, About, Pricing / Subscription Box, Menu. 3. Drive online orders and foot traffic—every CTA should funnel toward “Order Now” or “Reserve a Table.” 4. Warm yellow, chocolate brown, rounded typography, playful copy.We’re not trying to fit everything here. What matters is clarity on what we’re creating, so the AI has enough context to produce usable scaffolds, and so later tweaks stay aligned with the client’s vision. Builder will default to using React, Vite, and Tailwind. If you want a different JS framework, you can link an existing repo in that stack. In the near future, you won’t need to do this extra step to get non-React frameworks to function.An entire website from the first promptNow, we’re ready to get going.Head over to Builder.io and paste in this prompt or your own:Create a cozy bakery website called “Sunny Trails Bakery” with pages for: • Home • About • Pricing • Menu Brand palette: warm yellow and chocolate brown. Tone: playful, inviting. The restaurant is family-owned, feel-good, and smells like cinnamon. The goal of this site is to drive online orders and foot traffic—every CTA should funnel toward "Order Now" or "Reserve a Table."Once you hit enter, Builder will spin up a new dev container, and then inside that container, the AI will build out the first version of your site. You can leave the page and come back when it’s done.Now, before we go further, let’s create our repo, so that we get version history right from the outset. Click “Create Repo” up in the top right, and link your GitHub account.Once the process is complete, you’ll have a brand new repo.If you need any help on this step, or any of the below, check out these docs.Making the mockup’s order system workFrom our one-shot prompt, we’ve already got a really nice start for our client. However, when we press the “Order Now” button, we just get a generic alert. Let’s fix this.The best part about connecting to GitHub is that we get version control. Head back to your dashboard and edit the settings of your new project. We can give it a better name, and then, in the “Advanced” section, we can change the “Commit Mode” to “Pull Requests.”Now, we have the ability to create new branches right within Builder, allowing us to make drastic changes without worrying about the main version. This is also helpful if you’d like to show your client or team a few different versions of the same prototype.On a new branch, I’ll write another short prompt:Can you make the "Order Now" button work, even if it's just with dummy JSON for now?As you can see in the GIF above, Builder creates an ordering system and a fully mobile-responsive cart and checkout flow.Now, we can click “Send PR” in the top right, and we have an ordinary GitHub PR that can be reviewed and merged as needed.This is what’s possible in two prompts. For our third, let’s gussy up the style.If you’re like me, you might spend a lot of time admiring other people’s cool designs and learning how to code up similar components in your own style.Luckily, Builder has this capability, too, with our Chrome extension. I found a “Featured Posts” section on OpenAI’s website, where I like how the layout and scrolling work. We can copy and paste it onto our “Featured Treats” section, retaining our cafe’s distinctive brand style.Don’t worry—OpenAI doesn’t mind a little web scraping.You can do this with any component on any website, so your own projects can very quickly become a “best of the web” if you know what you’re doing.Plus, you can use Figma designs in much the same way, with even better design fidelity. Copy and paste a Figma frame with our Figma plugin, and tell the AI to either use the component as inspiration or as a 1:1 to reference for what the design should be.Now, we’re ready to send our PR. This time, let’s take a closer look at the code the AI has created.As you can see, the code is neatly formatted into two reusable components. Scrolling down further, I find a CSS file and then the actual implementation on the homepage, with clean JSON to represent the dummy post data.Design tweaks to the mockup with visual editsOne issue that cropped up when the AI brought in the OpenAI layout is that it changed my text from “Featured Treats” to “Featured Stories & Treats.” I’ve realized I don’t like either, and I want to replace that text with: “Fresh Out of the Bakery.”It would be silly, though, to prompt the AI just for this small tweak. Let’s switch into edit mode.Edit Mode lets you select any component and change any of its content or underlying CSS directly. You get a host of Webflow-like options to choose from, so that you can finesse the details as needed.Once you’ve made all the visual changes you want—maybe tweaking a button color or a border radius—you can click “Apply Edits,” and the AI will ensure the underlying code matches your repo’s style.Async fixes to the mockup with Builder BotNow, our pull request is nearly ready to merge, but I found one issue with it:When we copied the OpenAI website layout earlier, one of the blog posts had a video as its featured graphic instead of just an image. This is cool for OpenAI, but for our bakery, I just wanted images in this section. Since I didn’t instruct Builder’s AI otherwise, it went ahead and followed the layout and created extra code for video capability.No problem. We can fix this inside GItHub with our final prompt. We just need to comment on the PR and tag builderio-bot. Within about a minute, Builder Bot has successfully removed the video functionality, leaving a minimal diff that affects only the code it needed to. For example: Returning to my project in Builder, I can see that the bot’s changes are accounted for in the chat window as well, and I can use the live preview link to make sure my site works as expected:Now, if this were a real project, you could easily deploy this to the web for your client. After all, you’ve got a whole GitHub repo. This isn’t just a mockup; it’s actual code you can tweak—with Builder or Cursor or by hand—until you’re satisfied to run the site in production.So, why use Builder to mock up your website?Sure, this has been a somewhat contrived example. A real prototype is going to look prettier, because I’m going to spend more time on pieces of the design that I don’t like as much.But that’s the point of the best AI tools: they don’t take you, the human, out of the loop.You still get to make all the executive decisions, and it respects your hard work. Since you can constantly see all the code the AI creates, work in branches, and prompt with component-level precision, you can stop worrying about AI overwriting your opinions and start using it more as the tool it’s designed to be.You can copy in your team’s Figma designs, import web inspos, connect MCP servers to get Jira tickets in hand, and—most importantly—work with existing repos full of existing styles that Builder will understand and match, just like it matched OpenAI’s layout to our little cafe.So, we get speed, flexibility, and interactivity all the way from prompt to PR to production.Try Builder today. #mock #website #five #prompts
    WWW.BUILDER.IO
    Mock up a website in five prompts
    “Wait, can users actually add products to the cart?”Every prototype faces that question or one like it. You start to explain it’s “just Figma,” “just dummy data,” but what if you didn’t need disclaimers?What if you could hand clients—or your team—a working, data-connected mock-up of their website, or new pages and components, in less time than it takes to wireframe?That’s the challenge we’ll tackle today. But first, we need to look at:The problem with today’s prototyping toolsPick two: speed, flexibility, or interactivity.The prototyping ecosystem, despite having amazing software that addresses a huge variety of needs, doesn’t really have one tool that gives you all three.Wireframing apps let you draw boxes in minutes but every button is fake. Drag-and-drop builders animate scroll triggers until you ask for anything off-template. Custom code frees you… after you wave goodbye to a few afternoons.AI tools haven’t smashed the trade-off; they’ve just dressed it in flashier costumes. One prompt births a landing page, the next dumps a 2,000-line, worse-than-junior-level React file in your lap. The bottleneck is still there. Builder’s approach to website mockupsWe’ve been trying something a little different to maintain speed, flexibility, and interactivity while mocking full websites. Our AI-driven visual editor:Spins up a repo in seconds or connects to your existing one to use the code as design inspiration. React, Vue, Angular, and Svelte all work out of the box. Lets you shape components via plain English, visual edits, copy/pasted Figma frames, web inspos, MCP tools, and constant visual awareness of your entire website. Commits each change as a clean GitHub pull request your team can review like hand-written code. All your usual CI checks and lint rules apply.And if you need a tweak, you can comment to @builderio-bot right in the GitHub PR to make asynchronous changes without context switching.This results in a live site the café owner can interact with today, and a branch your devs can merge tomorrow. Stakeholders get to click actual buttons and trigger real state—no more “so, just imagine this works” demos.Let’s see it in action.From blank canvas to working mockup in five promptsToday, I’m going to mock up a fake business website. You’re welcome to create a real one.Before we fire off a single prompt, grab a note and write:Business name & vibe Core pages Primary goal Brand palette & toneThat’s it. Don’t sweat the details—we can always iterate. For mine, I wrote:1. Sunny Trails Bakery — family-owned, feel-good, smells like warm cinnamon. 2. Home, About, Pricing / Subscription Box, Menu (with daily specials). 3. Drive online orders and foot traffic—every CTA should funnel toward “Order Now” or “Reserve a Table.” 4. Warm yellow, chocolate brown, rounded typography, playful copy.We’re not trying to fit everything here. What matters is clarity on what we’re creating, so the AI has enough context to produce usable scaffolds, and so later tweaks stay aligned with the client’s vision. Builder will default to using React, Vite, and Tailwind. If you want a different JS framework, you can link an existing repo in that stack. In the near future, you won’t need to do this extra step to get non-React frameworks to function.(Free tier Builder gives you 5 AI credits/day and 25/month—plenty to follow along with today’s demo. Upgrade only when you need it.)An entire website from the first promptNow, we’re ready to get going.Head over to Builder.io and paste in this prompt or your own:Create a cozy bakery website called “Sunny Trails Bakery” with pages for: • Home • About • Pricing • Menu Brand palette: warm yellow and chocolate brown. Tone: playful, inviting. The restaurant is family-owned, feel-good, and smells like cinnamon. The goal of this site is to drive online orders and foot traffic—every CTA should funnel toward "Order Now" or "Reserve a Table."Once you hit enter, Builder will spin up a new dev container, and then inside that container, the AI will build out the first version of your site. You can leave the page and come back when it’s done.Now, before we go further, let’s create our repo, so that we get version history right from the outset. Click “Create Repo” up in the top right, and link your GitHub account.Once the process is complete, you’ll have a brand new repo.If you need any help on this step, or any of the below, check out these docs.Making the mockup’s order system workFrom our one-shot prompt, we’ve already got a really nice start for our client. However, when we press the “Order Now” button, we just get a generic alert. Let’s fix this.The best part about connecting to GitHub is that we get version control. Head back to your dashboard and edit the settings of your new project. We can give it a better name, and then, in the “Advanced” section, we can change the “Commit Mode” to “Pull Requests.”Now, we have the ability to create new branches right within Builder, allowing us to make drastic changes without worrying about the main version. This is also helpful if you’d like to show your client or team a few different versions of the same prototype.On a new branch, I’ll write another short prompt:Can you make the "Order Now" button work, even if it's just with dummy JSON for now?As you can see in the GIF above, Builder creates an ordering system and a fully mobile-responsive cart and checkout flow.Now, we can click “Send PR” in the top right, and we have an ordinary GitHub PR that can be reviewed and merged as needed.This is what’s possible in two prompts. For our third, let’s gussy up the style.If you’re like me, you might spend a lot of time admiring other people’s cool designs and learning how to code up similar components in your own style.Luckily, Builder has this capability, too, with our Chrome extension. I found a “Featured Posts” section on OpenAI’s website, where I like how the layout and scrolling work. We can copy and paste it onto our “Featured Treats” section, retaining our cafe’s distinctive brand style.Don’t worry—OpenAI doesn’t mind a little web scraping.You can do this with any component on any website, so your own projects can very quickly become a “best of the web” if you know what you’re doing.Plus, you can use Figma designs in much the same way, with even better design fidelity. Copy and paste a Figma frame with our Figma plugin, and tell the AI to either use the component as inspiration or as a 1:1 to reference for what the design should be.(You can grab our design-to-code guide for a lot more ideas of what this can help you accomplish.)Now, we’re ready to send our PR. This time, let’s take a closer look at the code the AI has created.As you can see, the code is neatly formatted into two reusable components. Scrolling down further, I find a CSS file and then the actual implementation on the homepage, with clean JSON to represent the dummy post data.Design tweaks to the mockup with visual editsOne issue that cropped up when the AI brought in the OpenAI layout is that it changed my text from “Featured Treats” to “Featured Stories & Treats.” I’ve realized I don’t like either, and I want to replace that text with: “Fresh Out of the Bakery.”It would be silly, though, to prompt the AI just for this small tweak. Let’s switch into edit mode.Edit Mode lets you select any component and change any of its content or underlying CSS directly. You get a host of Webflow-like options to choose from, so that you can finesse the details as needed.Once you’ve made all the visual changes you want—maybe tweaking a button color or a border radius—you can click “Apply Edits,” and the AI will ensure the underlying code matches your repo’s style.Async fixes to the mockup with Builder BotNow, our pull request is nearly ready to merge, but I found one issue with it:When we copied the OpenAI website layout earlier, one of the blog posts had a video as its featured graphic instead of just an image. This is cool for OpenAI, but for our bakery, I just wanted images in this section. Since I didn’t instruct Builder’s AI otherwise, it went ahead and followed the layout and created extra code for video capability.No problem. We can fix this inside GItHub with our final prompt. We just need to comment on the PR and tag builderio-bot. Within about a minute, Builder Bot has successfully removed the video functionality, leaving a minimal diff that affects only the code it needed to. For example: Returning to my project in Builder, I can see that the bot’s changes are accounted for in the chat window as well, and I can use the live preview link to make sure my site works as expected:Now, if this were a real project, you could easily deploy this to the web for your client. After all, you’ve got a whole GitHub repo. This isn’t just a mockup; it’s actual code you can tweak—with Builder or Cursor or by hand—until you’re satisfied to run the site in production.So, why use Builder to mock up your website?Sure, this has been a somewhat contrived example. A real prototype is going to look prettier, because I’m going to spend more time on pieces of the design that I don’t like as much.But that’s the point of the best AI tools: they don’t take you, the human, out of the loop.You still get to make all the executive decisions, and it respects your hard work. Since you can constantly see all the code the AI creates, work in branches, and prompt with component-level precision, you can stop worrying about AI overwriting your opinions and start using it more as the tool it’s designed to be.You can copy in your team’s Figma designs, import web inspos, connect MCP servers to get Jira tickets in hand, and—most importantly—work with existing repos full of existing styles that Builder will understand and match, just like it matched OpenAI’s layout to our little cafe.So, we get speed, flexibility, and interactivity all the way from prompt to PR to production.Try Builder today.
    0 Reacties 0 aandelen
  • FX Drops ‘Alien: Earth’ Official Trailer, Key Art

    If we don’t lock them down, it will be too late. The official trailer and key art have been revealed for Alien: Earth, which hits FX and Hulu August 12.
    In the upcoming series, when the mysterious deep space research vessel USCSS Maginot crash-lands on Earth, Wendy and a ragtag group of tactical soldiers make a fateful discovery that puts them face-to-face with the planet’s greatest threat.
    The series stars Sydney Chandler as Wendy; Timothy Olyphant as Kirsh; Alex Lawther as Hermit; Samuel Blenkin as Boy Kavalier; Babou Ceesay as Morrow;  Adrian Edmondson as Atom Eins; David Rysdahl as Arthur Sylvia; Essie Davis as Dame Sylvia; Lily Newmark as Nibs; Erana James as Curly; Adarsh Gourav as Slightly; Jonathan Ajayi as Smee; Kit Young as Tootles; Diêm Camille as Siberian; Moe Bar-El as Rashidi; and Sandra Yi Sencindiver as Yutani.
    Noah Hawley is creator and executive producer. Ridley Scott, David W. Zucker, Joseph Iberti, Dana Gonzales, and Clayton Krueger also executive produce. FX Productions produces.
    VFX are created by Clear Angle Studios, Fin Design & Effects, MPC, Pixomondo, The Third Floor, Untold Studios, and Zoic Studios, with Jonathan Rothbart acting as visual effects supervisor.
    Check out the official trailer now:

    Source: FX

    Journalist, antique shop owner, aspiring gemologist—L'Wren brings a diverse perspective to animation, where every frame reflects her varied passions.
    #drops #alien #earth #official #trailer
    FX Drops ‘Alien: Earth’ Official Trailer, Key Art
    If we don’t lock them down, it will be too late. The official trailer and key art have been revealed for Alien: Earth, which hits FX and Hulu August 12. In the upcoming series, when the mysterious deep space research vessel USCSS Maginot crash-lands on Earth, Wendy and a ragtag group of tactical soldiers make a fateful discovery that puts them face-to-face with the planet’s greatest threat. The series stars Sydney Chandler as Wendy; Timothy Olyphant as Kirsh; Alex Lawther as Hermit; Samuel Blenkin as Boy Kavalier; Babou Ceesay as Morrow;  Adrian Edmondson as Atom Eins; David Rysdahl as Arthur Sylvia; Essie Davis as Dame Sylvia; Lily Newmark as Nibs; Erana James as Curly; Adarsh Gourav as Slightly; Jonathan Ajayi as Smee; Kit Young as Tootles; Diêm Camille as Siberian; Moe Bar-El as Rashidi; and Sandra Yi Sencindiver as Yutani. Noah Hawley is creator and executive producer. Ridley Scott, David W. Zucker, Joseph Iberti, Dana Gonzales, and Clayton Krueger also executive produce. FX Productions produces. VFX are created by Clear Angle Studios, Fin Design & Effects, MPC, Pixomondo, The Third Floor, Untold Studios, and Zoic Studios, with Jonathan Rothbart acting as visual effects supervisor. Check out the official trailer now: Source: FX Journalist, antique shop owner, aspiring gemologist—L'Wren brings a diverse perspective to animation, where every frame reflects her varied passions. #drops #alien #earth #official #trailer
    WWW.AWN.COM
    FX Drops ‘Alien: Earth’ Official Trailer, Key Art
    If we don’t lock them down, it will be too late. The official trailer and key art have been revealed for Alien: Earth, which hits FX and Hulu August 12. In the upcoming series, when the mysterious deep space research vessel USCSS Maginot crash-lands on Earth, Wendy and a ragtag group of tactical soldiers make a fateful discovery that puts them face-to-face with the planet’s greatest threat. The series stars Sydney Chandler as Wendy; Timothy Olyphant as Kirsh; Alex Lawther as Hermit; Samuel Blenkin as Boy Kavalier; Babou Ceesay as Morrow;  Adrian Edmondson as Atom Eins; David Rysdahl as Arthur Sylvia; Essie Davis as Dame Sylvia; Lily Newmark as Nibs; Erana James as Curly; Adarsh Gourav as Slightly; Jonathan Ajayi as Smee; Kit Young as Tootles; Diêm Camille as Siberian; Moe Bar-El as Rashidi; and Sandra Yi Sencindiver as Yutani. Noah Hawley is creator and executive producer. Ridley Scott, David W. Zucker, Joseph Iberti, Dana Gonzales, and Clayton Krueger also executive produce. FX Productions produces. VFX are created by Clear Angle Studios, Fin Design & Effects, MPC, Pixomondo, The Third Floor, Untold Studios, and Zoic Studios, with Jonathan Rothbart acting as visual effects supervisor. Check out the official trailer now: Source: FX Journalist, antique shop owner, aspiring gemologist—L'Wren brings a diverse perspective to animation, where every frame reflects her varied passions.
    0 Reacties 0 aandelen
  • Ansys: UX Designer II (Remote - US)

    Requisition #: 16391 Our Mission: Powering Innovation That Drives Human Advancement When visionary companies need to know how their world-changing ideas will perform, they close the gap between design and reality with Ansys simulation. For more than 50 years, Ansys software has enabled innovators across industries to push boundaries by using the predictive power of simulation. From sustainable transportation to advanced semiconductors, from satellite systems to life-saving medical devices, the next great leaps in human advancement will be powered by Ansys. Innovate With Ansys, Power Your Career. Summary / Role Purpose The User Experience Designer II creates easy and delightful experiences for users interacting with ANSYS products and services. The UX designer assesses the functional and content requirements of a product, develops storyboards, creates wireframes and task flows based on user needs, and produces visually detailed mockups. A passion for visual design and familiarity with UI trends and technologies are essential in this role, enabling the UX designer to bring fresh and innovative ideas to a project. This is an intermediate role, heavily focused on content production and communication. It is intended to expose the UX professional to the nuts-and-bolts aspects of their UX career; while building on presentation, communication, and usability aspects of the design role. The User Experience Designer II will contribute to the development of a new web-based, collaborative solution for the ModelCenter and optiSLang product lines. This work will be based on an innovative modeling framework, modern web technologies, micro-services and integrations with Ansys' core products. The User Experience Designer II will contribute to the specification and design of user interactions and workflows for new features. The solution will be used by Ansys customers to design next generation systems in the most innovative industries. Location: Can be 100% Remote within US Key Duties and Responsibilities Designs, develops, and evaluates cutting-edge user interfaces Reviews UX artifacts created by other UX team members Utilizes prototyping tools and UX toolkits Creates and delivers usability studies Communicates design rationale across product creation disciplines and personnel Records usability/UX problems with clear explanations and recommendations for improvement Works closely with product managers, development teams, and other designers Minimum Education/Certification Requirements and Experience BS or BA in Human-Computer Interaction, Design Engineering, or Industrial Design with 2 years' experience or MS Working experience with technical software development proven by academic, research, or industry projects. Professional working proficiency in English Preferred Qualifications and Skills Experience with: UX design and collaboration tools: Figma, Balsamiq or similar tools Tools & technologies for UI implementation: HTML, CSS, JavaScript, Angular, React Screen-capture/editing/video-editing tools Adobe Creative Suite Ability to: Smoothly iterate on designs, taking direction, adjusting, and re-focusing towards a converged design Organize deliverables for future reflection and current investigations Communicate succinctly and professionally via email, chat, remote meetings, usability evaluations, etc. Prototype rapidly using any tools available Knowledge of Model Based System Engineeringor optimization is a plus Culture and Values Culture and values are incredibly important to ANSYS. They inform us of who we are, of how we act. Values aren't posters hanging on a wall or about trite or glib slogans. They aren't about rules and regulations. They can't just be handed down the organization. They are shared beliefs - guideposts that we all follow when we're facing a challenge or a decision. Our values tell us how we live our lives; how we approach our jobs. Our values are crucial for fostering a culture of winning for our company: • Customer focus • Results and Accountability • Innovation • Transparency and Integrity • Mastery • Inclusiveness • Sense of urgency • Collaboration and Teamwork At Ansys, we know that changing the world takes vision, skill, and each other. We fuel new ideas, build relationships, and help each other realize our greatest potential. We are ONE Ansys. We operate on three key components: our commitments to stakeholders, our values that guide how we work together, and our actions to deliver results. As ONE Ansys, we are powering innovation that drives human advancement Our Commitments:Amaze with innovative products and solutionsMake our customers incredibly successfulAct with integrityEnsure employees thrive and shareholders prosper Our Values:Adaptability: Be open, welcome what's nextCourage: Be courageous, move forward passionatelyGenerosity: Be generous, share, listen, serveAuthenticity: Be you, make us stronger Our Actions:We commit to audacious goalsWe work seamlessly as a teamWe demonstrate masteryWe deliver outstanding resultsVALUES IN ACTION Ansys is committed to powering the people who power human advancement. We believe in creating and nurturing a workplace that supports and welcomes people of all backgrounds; encouraging them to bring their talents and experience to a workplace where they are valued and can thrive. Our culture is grounded in our four core values of adaptability, courage, generosity, and authenticity. Through our behaviors and actions, these values foster higher team performance and greater innovation for our customers. We're proud to offer programs, available to all employees, to further impact innovation and business outcomes, such as employee networks and learning communities that inform solutions for our globally minded customer base. WELCOME WHAT'S NEXT IN YOUR CAREER AT ANSYS At Ansys, you will find yourself among the sharpest minds and most visionary leaders across the globe. Collectively, we strive to change the world with innovative technology and transformational solutions. With a prestigious reputation in working with well-known, world-class companies, standards at Ansys are high - met by those willing to rise to the occasion and meet those challenges head on. Our team is passionate about pushing the limits of world-class simulation technology, empowering our customers to turn their design concepts into successful, innovative products faster and at a lower cost. Ready to feel inspired? Check out some of our recent customer stories, here and here . At Ansys, it's about the learning, the discovery, and the collaboration. It's about the "what's next" as much as the "mission accomplished." And it's about the melding of disciplined intellect with strategic direction and results that have, can, and do impact real people in real ways. All this is forged within a working environment built on respect, autonomy, and ethics.CREATING A PLACE WE'RE PROUD TO BEAnsys is an S&P 500 company and a member of the NASDAQ-100. We are proud to have been recognized for the following more recent awards, although our list goes on: Newsweek's Most Loved Workplace globally and in the U.S., Gold Stevie Award Winner, America's Most Responsible Companies, Fast Company World Changing Ideas, Great Place to Work Certified.For more information, please visit us at Ansys is an Equal Opportunity Employer. All qualified applicants will receive consideration for employment without regard to race, color, religion, sex, sexual orientation, gender identity, national origin, disability, veteran status, and other protected characteristics.Ansys does not accept unsolicited referrals for vacancies, and any unsolicited referral will become the property of Ansys. Upon hire, no fee will be owed to the agency, person, or entity.Apply NowLet's start your dream job Apply now Meet JobCopilot: Your Personal AI Job HunterAutomatically Apply to Remote Full-Stack Programming JobsJust set your preferences and Job Copilot will do the rest-finding, filtering, and applying while you focus on what matters. Activate JobCopilot
    #ansys #designer #remote
    Ansys: UX Designer II (Remote - US)
    Requisition #: 16391 Our Mission: Powering Innovation That Drives Human Advancement When visionary companies need to know how their world-changing ideas will perform, they close the gap between design and reality with Ansys simulation. For more than 50 years, Ansys software has enabled innovators across industries to push boundaries by using the predictive power of simulation. From sustainable transportation to advanced semiconductors, from satellite systems to life-saving medical devices, the next great leaps in human advancement will be powered by Ansys. Innovate With Ansys, Power Your Career. Summary / Role Purpose The User Experience Designer II creates easy and delightful experiences for users interacting with ANSYS products and services. The UX designer assesses the functional and content requirements of a product, develops storyboards, creates wireframes and task flows based on user needs, and produces visually detailed mockups. A passion for visual design and familiarity with UI trends and technologies are essential in this role, enabling the UX designer to bring fresh and innovative ideas to a project. This is an intermediate role, heavily focused on content production and communication. It is intended to expose the UX professional to the nuts-and-bolts aspects of their UX career; while building on presentation, communication, and usability aspects of the design role. The User Experience Designer II will contribute to the development of a new web-based, collaborative solution for the ModelCenter and optiSLang product lines. This work will be based on an innovative modeling framework, modern web technologies, micro-services and integrations with Ansys' core products. The User Experience Designer II will contribute to the specification and design of user interactions and workflows for new features. The solution will be used by Ansys customers to design next generation systems in the most innovative industries. Location: Can be 100% Remote within US Key Duties and Responsibilities Designs, develops, and evaluates cutting-edge user interfaces Reviews UX artifacts created by other UX team members Utilizes prototyping tools and UX toolkits Creates and delivers usability studies Communicates design rationale across product creation disciplines and personnel Records usability/UX problems with clear explanations and recommendations for improvement Works closely with product managers, development teams, and other designers Minimum Education/Certification Requirements and Experience BS or BA in Human-Computer Interaction, Design Engineering, or Industrial Design with 2 years' experience or MS Working experience with technical software development proven by academic, research, or industry projects. Professional working proficiency in English Preferred Qualifications and Skills Experience with: UX design and collaboration tools: Figma, Balsamiq or similar tools Tools & technologies for UI implementation: HTML, CSS, JavaScript, Angular, React Screen-capture/editing/video-editing tools Adobe Creative Suite Ability to: Smoothly iterate on designs, taking direction, adjusting, and re-focusing towards a converged design Organize deliverables for future reflection and current investigations Communicate succinctly and professionally via email, chat, remote meetings, usability evaluations, etc. Prototype rapidly using any tools available Knowledge of Model Based System Engineeringor optimization is a plus Culture and Values Culture and values are incredibly important to ANSYS. They inform us of who we are, of how we act. Values aren't posters hanging on a wall or about trite or glib slogans. They aren't about rules and regulations. They can't just be handed down the organization. They are shared beliefs - guideposts that we all follow when we're facing a challenge or a decision. Our values tell us how we live our lives; how we approach our jobs. Our values are crucial for fostering a culture of winning for our company: • Customer focus • Results and Accountability • Innovation • Transparency and Integrity • Mastery • Inclusiveness • Sense of urgency • Collaboration and Teamwork At Ansys, we know that changing the world takes vision, skill, and each other. We fuel new ideas, build relationships, and help each other realize our greatest potential. We are ONE Ansys. We operate on three key components: our commitments to stakeholders, our values that guide how we work together, and our actions to deliver results. As ONE Ansys, we are powering innovation that drives human advancement Our Commitments:Amaze with innovative products and solutionsMake our customers incredibly successfulAct with integrityEnsure employees thrive and shareholders prosper Our Values:Adaptability: Be open, welcome what's nextCourage: Be courageous, move forward passionatelyGenerosity: Be generous, share, listen, serveAuthenticity: Be you, make us stronger Our Actions:We commit to audacious goalsWe work seamlessly as a teamWe demonstrate masteryWe deliver outstanding resultsVALUES IN ACTION Ansys is committed to powering the people who power human advancement. We believe in creating and nurturing a workplace that supports and welcomes people of all backgrounds; encouraging them to bring their talents and experience to a workplace where they are valued and can thrive. Our culture is grounded in our four core values of adaptability, courage, generosity, and authenticity. Through our behaviors and actions, these values foster higher team performance and greater innovation for our customers. We're proud to offer programs, available to all employees, to further impact innovation and business outcomes, such as employee networks and learning communities that inform solutions for our globally minded customer base. WELCOME WHAT'S NEXT IN YOUR CAREER AT ANSYS At Ansys, you will find yourself among the sharpest minds and most visionary leaders across the globe. Collectively, we strive to change the world with innovative technology and transformational solutions. With a prestigious reputation in working with well-known, world-class companies, standards at Ansys are high - met by those willing to rise to the occasion and meet those challenges head on. Our team is passionate about pushing the limits of world-class simulation technology, empowering our customers to turn their design concepts into successful, innovative products faster and at a lower cost. Ready to feel inspired? Check out some of our recent customer stories, here and here . At Ansys, it's about the learning, the discovery, and the collaboration. It's about the "what's next" as much as the "mission accomplished." And it's about the melding of disciplined intellect with strategic direction and results that have, can, and do impact real people in real ways. All this is forged within a working environment built on respect, autonomy, and ethics.CREATING A PLACE WE'RE PROUD TO BEAnsys is an S&P 500 company and a member of the NASDAQ-100. We are proud to have been recognized for the following more recent awards, although our list goes on: Newsweek's Most Loved Workplace globally and in the U.S., Gold Stevie Award Winner, America's Most Responsible Companies, Fast Company World Changing Ideas, Great Place to Work Certified.For more information, please visit us at Ansys is an Equal Opportunity Employer. All qualified applicants will receive consideration for employment without regard to race, color, religion, sex, sexual orientation, gender identity, national origin, disability, veteran status, and other protected characteristics.Ansys does not accept unsolicited referrals for vacancies, and any unsolicited referral will become the property of Ansys. Upon hire, no fee will be owed to the agency, person, or entity.Apply NowLet's start your dream job Apply now Meet JobCopilot: Your Personal AI Job HunterAutomatically Apply to Remote Full-Stack Programming JobsJust set your preferences and Job Copilot will do the rest-finding, filtering, and applying while you focus on what matters. Activate JobCopilot #ansys #designer #remote
    WEWORKREMOTELY.COM
    Ansys: UX Designer II (Remote - US)
    Requisition #: 16391 Our Mission: Powering Innovation That Drives Human Advancement When visionary companies need to know how their world-changing ideas will perform, they close the gap between design and reality with Ansys simulation. For more than 50 years, Ansys software has enabled innovators across industries to push boundaries by using the predictive power of simulation. From sustainable transportation to advanced semiconductors, from satellite systems to life-saving medical devices, the next great leaps in human advancement will be powered by Ansys. Innovate With Ansys, Power Your Career. Summary / Role Purpose The User Experience Designer II creates easy and delightful experiences for users interacting with ANSYS products and services. The UX designer assesses the functional and content requirements of a product, develops storyboards, creates wireframes and task flows based on user needs, and produces visually detailed mockups. A passion for visual design and familiarity with UI trends and technologies are essential in this role, enabling the UX designer to bring fresh and innovative ideas to a project. This is an intermediate role, heavily focused on content production and communication. It is intended to expose the UX professional to the nuts-and-bolts aspects of their UX career; while building on presentation, communication, and usability aspects of the design role. The User Experience Designer II will contribute to the development of a new web-based, collaborative solution for the ModelCenter and optiSLang product lines. This work will be based on an innovative modeling framework, modern web technologies, micro-services and integrations with Ansys' core products. The User Experience Designer II will contribute to the specification and design of user interactions and workflows for new features. The solution will be used by Ansys customers to design next generation systems in the most innovative industries (Aerospace and Defense, Automotive, semi-conductors, and others). Location: Can be 100% Remote within US Key Duties and Responsibilities Designs, develops, and evaluates cutting-edge user interfaces Reviews UX artifacts created by other UX team members Utilizes prototyping tools and UX toolkits Creates and delivers usability studies Communicates design rationale across product creation disciplines and personnel Records usability/UX problems with clear explanations and recommendations for improvement Works closely with product managers, development teams, and other designers Minimum Education/Certification Requirements and Experience BS or BA in Human-Computer Interaction, Design Engineering, or Industrial Design with 2 years' experience or MS Working experience with technical software development proven by academic, research, or industry projects. Professional working proficiency in English Preferred Qualifications and Skills Experience with: UX design and collaboration tools: Figma, Balsamiq or similar tools Tools & technologies for UI implementation: HTML, CSS, JavaScript, Angular, React Screen-capture/editing/video-editing tools Adobe Creative Suite Ability to: Smoothly iterate on designs, taking direction, adjusting, and re-focusing towards a converged design Organize deliverables for future reflection and current investigations Communicate succinctly and professionally via email, chat, remote meetings, usability evaluations, etc. Prototype rapidly using any tools available Knowledge of Model Based System Engineering (MBSE) or optimization is a plus Culture and Values Culture and values are incredibly important to ANSYS. They inform us of who we are, of how we act. Values aren't posters hanging on a wall or about trite or glib slogans. They aren't about rules and regulations. They can't just be handed down the organization. They are shared beliefs - guideposts that we all follow when we're facing a challenge or a decision. Our values tell us how we live our lives; how we approach our jobs. Our values are crucial for fostering a culture of winning for our company: • Customer focus • Results and Accountability • Innovation • Transparency and Integrity • Mastery • Inclusiveness • Sense of urgency • Collaboration and Teamwork At Ansys, we know that changing the world takes vision, skill, and each other. We fuel new ideas, build relationships, and help each other realize our greatest potential. We are ONE Ansys. We operate on three key components: our commitments to stakeholders, our values that guide how we work together, and our actions to deliver results. As ONE Ansys, we are powering innovation that drives human advancement Our Commitments:Amaze with innovative products and solutionsMake our customers incredibly successfulAct with integrityEnsure employees thrive and shareholders prosper Our Values:Adaptability: Be open, welcome what's nextCourage: Be courageous, move forward passionatelyGenerosity: Be generous, share, listen, serveAuthenticity: Be you, make us stronger Our Actions:We commit to audacious goalsWe work seamlessly as a teamWe demonstrate masteryWe deliver outstanding resultsVALUES IN ACTION Ansys is committed to powering the people who power human advancement. We believe in creating and nurturing a workplace that supports and welcomes people of all backgrounds; encouraging them to bring their talents and experience to a workplace where they are valued and can thrive. Our culture is grounded in our four core values of adaptability, courage, generosity, and authenticity. Through our behaviors and actions, these values foster higher team performance and greater innovation for our customers. We're proud to offer programs, available to all employees, to further impact innovation and business outcomes, such as employee networks and learning communities that inform solutions for our globally minded customer base. WELCOME WHAT'S NEXT IN YOUR CAREER AT ANSYS At Ansys, you will find yourself among the sharpest minds and most visionary leaders across the globe. Collectively, we strive to change the world with innovative technology and transformational solutions. With a prestigious reputation in working with well-known, world-class companies, standards at Ansys are high - met by those willing to rise to the occasion and meet those challenges head on. Our team is passionate about pushing the limits of world-class simulation technology, empowering our customers to turn their design concepts into successful, innovative products faster and at a lower cost. Ready to feel inspired? Check out some of our recent customer stories, here and here . At Ansys, it's about the learning, the discovery, and the collaboration. It's about the "what's next" as much as the "mission accomplished." And it's about the melding of disciplined intellect with strategic direction and results that have, can, and do impact real people in real ways. All this is forged within a working environment built on respect, autonomy, and ethics.CREATING A PLACE WE'RE PROUD TO BEAnsys is an S&P 500 company and a member of the NASDAQ-100. We are proud to have been recognized for the following more recent awards, although our list goes on: Newsweek's Most Loved Workplace globally and in the U.S., Gold Stevie Award Winner, America's Most Responsible Companies, Fast Company World Changing Ideas, Great Place to Work Certified (China, Greece, France, India, Japan, Korea, Spain, Sweden, Taiwan, and U.K.).For more information, please visit us at Ansys is an Equal Opportunity Employer. All qualified applicants will receive consideration for employment without regard to race, color, religion, sex, sexual orientation, gender identity, national origin, disability, veteran status, and other protected characteristics.Ansys does not accept unsolicited referrals for vacancies, and any unsolicited referral will become the property of Ansys. Upon hire, no fee will be owed to the agency, person, or entity.Apply NowLet's start your dream job Apply now Meet JobCopilot: Your Personal AI Job HunterAutomatically Apply to Remote Full-Stack Programming JobsJust set your preferences and Job Copilot will do the rest-finding, filtering, and applying while you focus on what matters. Activate JobCopilot
    0 Reacties 0 aandelen
  • Creating The “Moving Highlight” Navigation Bar With JavaScript And CSS

    I recently came across an old jQuery tutorial demonstrating a “moving highlight” navigation bar and decided the concept was due for a modern upgrade. With this pattern, the border around the active navigation item animates directly from one element to another as the user clicks on menu items. In 2025, we have much better tools to manipulate the DOM via vanilla JavaScript. New features like the View Transition API make progressive enhancement more easily achievable and handle a lot of the animation minutiae.In this tutorial, I will demonstrate two methods of creating the “moving highlight” navigation bar using plain JavaScript and CSS. The first example uses the getBoundingClientRect method to explicitly animate the border between navigation bar items when they are clicked. The second example achieves the same functionality using the new View Transition API.
    The Initial Markup
    Let’s assume that we have a single-page application where content changes without the page being reloaded. The starting HTML and CSS are your standard navigation bar with an additional div element containing an id of #highlight. We give the first navigation item a class of .active.
    See the Pen Moving Highlight Navbar Starting Markupby Blake Lundquist.
    For this version, we will position the #highlight element around the element with the .active class to create a border. We can utilize absolute positioning and animate the element across the navigation bar to create the desired effect. We’ll hide it off-screen initially by adding left: -200px and include transition styles for all properties so that any changes in the position and size of the element will happen gradually.
    #highlight {
    z-index: 0;
    position: absolute;
    height: 100%;
    width: 100px;
    left: -200px;
    border: 2px solid green;
    box-sizing: border-box;
    transition: all 0.2s ease;
    }

    Add A Boilerplate Event Handler For Click Interactions
    We want the highlight element to animate when a user changes the .active navigation item. Let’s add a click event handler to the nav element, then filter for events caused only by elements matching our desired selector. In this case, we only want to change the .active nav item if the user clicks on a link that does not already have the .active class.
    Initially, we can call console.log to ensure the handler fires only when expected:

    const navbar = document.querySelector;

    navbar.addEventListener{
    // return if the clicked element doesn't have the correct selector
    if')) {
    return;
    }

    console.log;
    });

    Open your browser console and try clicking different items in the navigation bar. You should only see "click" being logged when you select a new item in the navigation bar.
    Now that we know our event handler is working on the correct elements let’s add code to move the .active class to the navigation item that was clicked. We can use the object passed into the event handler to find the element that initialized the event and give that element a class of .active after removing it from the previously active item.

    const navbar = document.querySelector;

    navbar.addEventListener{
    // return if the clicked element doesn't have the correct selector
    if')) {
    return;
    }

    - console.log;
    + document.querySelector.classList.remove;
    + event.target.classList.add;

    });

    Our #highlight element needs to move across the navigation bar and position itself around the active item. Let’s write a function to calculate a new position and width. Since the #highlight selector has transition styles applied, it will move gradually when its position changes.
    Using getBoundingClientRect, we can get information about the position and size of an element. We calculate the width of the active navigation item and its offset from the left boundary of the parent element. Then, we assign styles to the highlight element so that its size and position match.

    // handler for moving the highlight
    const moveHighlight ==> {
    const activeNavItem = document.querySelector;
    const highlighterElement = document.querySelector;

    const width = activeNavItem.offsetWidth;

    const itemPos = activeNavItem.getBoundingClientRect;
    const navbarPos = navbar.getBoundingClientRectconst relativePosX = itemPos.left - navbarPos.left;

    const styles = {
    left: ${relativePosX}px,
    width: ${width}px,
    };

    Object.assign;
    }

    Let’s call our new function when the click event fires:

    navbar.addEventListener{
    // return if the clicked element doesn't have the correct selector
    if')) {
    return;
    }

    document.querySelector.classList.remove;
    event.target.classList.add;

    + moveHighlight;
    });

    Finally, let’s also call the function immediately so that the border moves behind our initial active item when the page first loads:
    // handler for moving the highlight
    const moveHighlight ==> {
    // ...
    }

    // display the highlight when the page loads
    moveHighlight;

    Now, the border moves across the navigation bar when a new item is selected. Try clicking the different navigation links to animate the navigation bar.
    See the Pen Moving Highlight Navbarby Blake Lundquist.
    That only took a few lines of vanilla JavaScript and could easily be extended to account for other interactions, like mouseover events. In the next section, we will explore refactoring this feature using the View Transition API.
    Using The View Transition API
    The View Transition API provides functionality to create animated transitions between website views. Under the hood, the API creates snapshots of “before” and “after” views and then handles transitioning between them. View transitions are useful for creating animations between documents, providing the native-app-like user experience featured in frameworks like Astro. However, the API also provides handlers meant for SPA-style applications. We will use it to reduce the JavaScript needed in our implementation and more easily create fallback functionality.
    For this approach, we no longer need a separate #highlight element. Instead, we can style the .active navigation item directly using pseudo-selectors and let the View Transition API handle the animation between the before-and-after UI states when a new navigation item is clicked.
    We’ll start by getting rid of the #highlight element and its associated CSS and replacing it with styles for the nav a::after pseudo-selector:
    <nav>
    - <div id="highlight"></div>
    <a href="#" class="active">Home</a>
    <a href="#services">Services</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
    </nav>

    - #highlight {
    - z-index: 0;
    - position: absolute;
    - height: 100%;
    - width: 0;
    - left: 0;
    - box-sizing: border-box;
    - transition: all 0.2s ease;
    - }

    + nav a::after {
    + content: " ";
    + position: absolute;
    + left: 0;
    + top: 0;
    + width: 100%;
    + height: 100%;
    + border: none;
    + box-sizing: border-box;
    + }

    For the .active class, we include the view-transition-name property, thus unlocking the magic of the View Transition API. Once we trigger the view transition and change the location of the .active navigation item in the DOM, “before” and “after” snapshots will be taken, and the browser will animate the border across the bar. We’ll give our view transition the name of highlight, but we could theoretically give it any name.
    nav a.active::after {
    border: 2px solid green;
    view-transition-name: highlight;
    }

    Once we have a selector that contains a view-transition-name property, the only remaining step is to trigger the transition using the startViewTransition method and pass in a callback function.

    const navbar = document.querySelector;

    // Change the active nav item on click
    navbar.addEventListener{

    if')) {
    return;
    }

    document.startViewTransition=> {
    document.querySelector.classList.remove;

    event.target.classList.add;
    });
    });

    Above is a revised version of the click handler. Instead of doing all the calculations for the size and position of the moving border ourselves, the View Transition API handles all of it for us. We only need to call document.startViewTransition and pass in a callback function to change the item that has the .active class!
    Adjusting The View Transition
    At this point, when clicking on a navigation link, you’ll notice that the transition works, but some strange sizing issues are visible.This sizing inconsistency is caused by aspect ratio changes during the course of the view transition. We won’t go into detail here, but Jake Archibald has a detailed explanation you can read for more information. In short, to ensure the height of the border stays uniform throughout the transition, we need to declare an explicit height for the ::view-transition-old and ::view-transition-new pseudo-selectors representing a static snapshot of the old and new view, respectively.
    ::view-transition-old{
    height: 100%;
    }

    ::view-transition-new{
    height: 100%;
    }

    Let’s do some final refactoring to tidy up our code by moving the callback to a separate function and adding a fallback for when view transitions aren’t supported:

    const navbar = document.querySelector;

    // change the item that has the .active class applied
    const setActiveElement ==> {
    document.querySelector.classList.remove;
    elem.classList.add;
    }

    // Start view transition and pass in a callback on click
    navbar.addEventListener{
    if')) {
    return;
    }

    // Fallback for browsers that don't support View Transitions:
    if{
    setActiveElement;
    return;
    }

    document.startViewTransition=> setActiveElement);
    });

    Here’s our view transition-powered navigation bar! Observe the smooth transition when you click on the different links.
    See the Pen Moving Highlight Navbar with View Transitionby Blake Lundquist.
    Conclusion
    Animations and transitions between website UI states used to require many kilobytes of external libraries, along with verbose, confusing, and error-prone code, but vanilla JavaScript and CSS have since incorporated features to achieve native-app-like interactions without breaking the bank. We demonstrated this by implementing the “moving highlight” navigation pattern using two approaches: CSS transitions combined with the getBoundingClientRectmethod and the View Transition API.
    Resources

    getBoundingClientRectmethod documentation
    View Transition API documentation
    “View Transitions: Handling Aspect Ratio Changes” by Jake Archibald
    #creating #ampampldquomoving #highlightampamprdquo #navigation #bar
    Creating The “Moving Highlight” Navigation Bar With JavaScript And CSS
    I recently came across an old jQuery tutorial demonstrating a “moving highlight” navigation bar and decided the concept was due for a modern upgrade. With this pattern, the border around the active navigation item animates directly from one element to another as the user clicks on menu items. In 2025, we have much better tools to manipulate the DOM via vanilla JavaScript. New features like the View Transition API make progressive enhancement more easily achievable and handle a lot of the animation minutiae.In this tutorial, I will demonstrate two methods of creating the “moving highlight” navigation bar using plain JavaScript and CSS. The first example uses the getBoundingClientRect method to explicitly animate the border between navigation bar items when they are clicked. The second example achieves the same functionality using the new View Transition API. The Initial Markup Let’s assume that we have a single-page application where content changes without the page being reloaded. The starting HTML and CSS are your standard navigation bar with an additional div element containing an id of #highlight. We give the first navigation item a class of .active. See the Pen Moving Highlight Navbar Starting Markupby Blake Lundquist. For this version, we will position the #highlight element around the element with the .active class to create a border. We can utilize absolute positioning and animate the element across the navigation bar to create the desired effect. We’ll hide it off-screen initially by adding left: -200px and include transition styles for all properties so that any changes in the position and size of the element will happen gradually. #highlight { z-index: 0; position: absolute; height: 100%; width: 100px; left: -200px; border: 2px solid green; box-sizing: border-box; transition: all 0.2s ease; } Add A Boilerplate Event Handler For Click Interactions We want the highlight element to animate when a user changes the .active navigation item. Let’s add a click event handler to the nav element, then filter for events caused only by elements matching our desired selector. In this case, we only want to change the .active nav item if the user clicks on a link that does not already have the .active class. Initially, we can call console.log to ensure the handler fires only when expected: const navbar = document.querySelector; navbar.addEventListener{ // return if the clicked element doesn't have the correct selector if')) { return; } console.log; }); Open your browser console and try clicking different items in the navigation bar. You should only see "click" being logged when you select a new item in the navigation bar. Now that we know our event handler is working on the correct elements let’s add code to move the .active class to the navigation item that was clicked. We can use the object passed into the event handler to find the element that initialized the event and give that element a class of .active after removing it from the previously active item. const navbar = document.querySelector; navbar.addEventListener{ // return if the clicked element doesn't have the correct selector if')) { return; } - console.log; + document.querySelector.classList.remove; + event.target.classList.add; }); Our #highlight element needs to move across the navigation bar and position itself around the active item. Let’s write a function to calculate a new position and width. Since the #highlight selector has transition styles applied, it will move gradually when its position changes. Using getBoundingClientRect, we can get information about the position and size of an element. We calculate the width of the active navigation item and its offset from the left boundary of the parent element. Then, we assign styles to the highlight element so that its size and position match. // handler for moving the highlight const moveHighlight ==> { const activeNavItem = document.querySelector; const highlighterElement = document.querySelector; const width = activeNavItem.offsetWidth; const itemPos = activeNavItem.getBoundingClientRect; const navbarPos = navbar.getBoundingClientRectconst relativePosX = itemPos.left - navbarPos.left; const styles = { left: ${relativePosX}px, width: ${width}px, }; Object.assign; } Let’s call our new function when the click event fires: navbar.addEventListener{ // return if the clicked element doesn't have the correct selector if')) { return; } document.querySelector.classList.remove; event.target.classList.add; + moveHighlight; }); Finally, let’s also call the function immediately so that the border moves behind our initial active item when the page first loads: // handler for moving the highlight const moveHighlight ==> { // ... } // display the highlight when the page loads moveHighlight; Now, the border moves across the navigation bar when a new item is selected. Try clicking the different navigation links to animate the navigation bar. See the Pen Moving Highlight Navbarby Blake Lundquist. That only took a few lines of vanilla JavaScript and could easily be extended to account for other interactions, like mouseover events. In the next section, we will explore refactoring this feature using the View Transition API. Using The View Transition API The View Transition API provides functionality to create animated transitions between website views. Under the hood, the API creates snapshots of “before” and “after” views and then handles transitioning between them. View transitions are useful for creating animations between documents, providing the native-app-like user experience featured in frameworks like Astro. However, the API also provides handlers meant for SPA-style applications. We will use it to reduce the JavaScript needed in our implementation and more easily create fallback functionality. For this approach, we no longer need a separate #highlight element. Instead, we can style the .active navigation item directly using pseudo-selectors and let the View Transition API handle the animation between the before-and-after UI states when a new navigation item is clicked. We’ll start by getting rid of the #highlight element and its associated CSS and replacing it with styles for the nav a::after pseudo-selector: <nav> - <div id="highlight"></div> <a href="#" class="active">Home</a> <a href="#services">Services</a> <a href="#about">About</a> <a href="#contact">Contact</a> </nav> - #highlight { - z-index: 0; - position: absolute; - height: 100%; - width: 0; - left: 0; - box-sizing: border-box; - transition: all 0.2s ease; - } + nav a::after { + content: " "; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + border: none; + box-sizing: border-box; + } For the .active class, we include the view-transition-name property, thus unlocking the magic of the View Transition API. Once we trigger the view transition and change the location of the .active navigation item in the DOM, “before” and “after” snapshots will be taken, and the browser will animate the border across the bar. We’ll give our view transition the name of highlight, but we could theoretically give it any name. nav a.active::after { border: 2px solid green; view-transition-name: highlight; } Once we have a selector that contains a view-transition-name property, the only remaining step is to trigger the transition using the startViewTransition method and pass in a callback function. const navbar = document.querySelector; // Change the active nav item on click navbar.addEventListener{ if')) { return; } document.startViewTransition=> { document.querySelector.classList.remove; event.target.classList.add; }); }); Above is a revised version of the click handler. Instead of doing all the calculations for the size and position of the moving border ourselves, the View Transition API handles all of it for us. We only need to call document.startViewTransition and pass in a callback function to change the item that has the .active class! Adjusting The View Transition At this point, when clicking on a navigation link, you’ll notice that the transition works, but some strange sizing issues are visible.This sizing inconsistency is caused by aspect ratio changes during the course of the view transition. We won’t go into detail here, but Jake Archibald has a detailed explanation you can read for more information. In short, to ensure the height of the border stays uniform throughout the transition, we need to declare an explicit height for the ::view-transition-old and ::view-transition-new pseudo-selectors representing a static snapshot of the old and new view, respectively. ::view-transition-old{ height: 100%; } ::view-transition-new{ height: 100%; } Let’s do some final refactoring to tidy up our code by moving the callback to a separate function and adding a fallback for when view transitions aren’t supported: const navbar = document.querySelector; // change the item that has the .active class applied const setActiveElement ==> { document.querySelector.classList.remove; elem.classList.add; } // Start view transition and pass in a callback on click navbar.addEventListener{ if')) { return; } // Fallback for browsers that don't support View Transitions: if{ setActiveElement; return; } document.startViewTransition=> setActiveElement); }); Here’s our view transition-powered navigation bar! Observe the smooth transition when you click on the different links. See the Pen Moving Highlight Navbar with View Transitionby Blake Lundquist. Conclusion Animations and transitions between website UI states used to require many kilobytes of external libraries, along with verbose, confusing, and error-prone code, but vanilla JavaScript and CSS have since incorporated features to achieve native-app-like interactions without breaking the bank. We demonstrated this by implementing the “moving highlight” navigation pattern using two approaches: CSS transitions combined with the getBoundingClientRectmethod and the View Transition API. Resources getBoundingClientRectmethod documentation View Transition API documentation “View Transitions: Handling Aspect Ratio Changes” by Jake Archibald #creating #ampampldquomoving #highlightampamprdquo #navigation #bar
    SMASHINGMAGAZINE.COM
    Creating The “Moving Highlight” Navigation Bar With JavaScript And CSS
    I recently came across an old jQuery tutorial demonstrating a “moving highlight” navigation bar and decided the concept was due for a modern upgrade. With this pattern, the border around the active navigation item animates directly from one element to another as the user clicks on menu items. In 2025, we have much better tools to manipulate the DOM via vanilla JavaScript. New features like the View Transition API make progressive enhancement more easily achievable and handle a lot of the animation minutiae. (Large preview) In this tutorial, I will demonstrate two methods of creating the “moving highlight” navigation bar using plain JavaScript and CSS. The first example uses the getBoundingClientRect method to explicitly animate the border between navigation bar items when they are clicked. The second example achieves the same functionality using the new View Transition API. The Initial Markup Let’s assume that we have a single-page application where content changes without the page being reloaded. The starting HTML and CSS are your standard navigation bar with an additional div element containing an id of #highlight. We give the first navigation item a class of .active. See the Pen Moving Highlight Navbar Starting Markup [forked] by Blake Lundquist. For this version, we will position the #highlight element around the element with the .active class to create a border. We can utilize absolute positioning and animate the element across the navigation bar to create the desired effect. We’ll hide it off-screen initially by adding left: -200px and include transition styles for all properties so that any changes in the position and size of the element will happen gradually. #highlight { z-index: 0; position: absolute; height: 100%; width: 100px; left: -200px; border: 2px solid green; box-sizing: border-box; transition: all 0.2s ease; } Add A Boilerplate Event Handler For Click Interactions We want the highlight element to animate when a user changes the .active navigation item. Let’s add a click event handler to the nav element, then filter for events caused only by elements matching our desired selector. In this case, we only want to change the .active nav item if the user clicks on a link that does not already have the .active class. Initially, we can call console.log to ensure the handler fires only when expected: const navbar = document.querySelector('nav'); navbar.addEventListener('click', function (event) { // return if the clicked element doesn't have the correct selector if (!event.target.matches('nav a:not(active)')) { return; } console.log('click'); }); Open your browser console and try clicking different items in the navigation bar. You should only see "click" being logged when you select a new item in the navigation bar. Now that we know our event handler is working on the correct elements let’s add code to move the .active class to the navigation item that was clicked. We can use the object passed into the event handler to find the element that initialized the event and give that element a class of .active after removing it from the previously active item. const navbar = document.querySelector('nav'); navbar.addEventListener('click', function (event) { // return if the clicked element doesn't have the correct selector if (!event.target.matches('nav a:not(active)')) { return; } - console.log('click'); + document.querySelector('nav a.active').classList.remove('active'); + event.target.classList.add('active'); }); Our #highlight element needs to move across the navigation bar and position itself around the active item. Let’s write a function to calculate a new position and width. Since the #highlight selector has transition styles applied, it will move gradually when its position changes. Using getBoundingClientRect, we can get information about the position and size of an element. We calculate the width of the active navigation item and its offset from the left boundary of the parent element. Then, we assign styles to the highlight element so that its size and position match. // handler for moving the highlight const moveHighlight = () => { const activeNavItem = document.querySelector('a.active'); const highlighterElement = document.querySelector('#highlight'); const width = activeNavItem.offsetWidth; const itemPos = activeNavItem.getBoundingClientRect(); const navbarPos = navbar.getBoundingClientRect() const relativePosX = itemPos.left - navbarPos.left; const styles = { left: ${relativePosX}px, width: ${width}px, }; Object.assign(highlighterElement.style, styles); } Let’s call our new function when the click event fires: navbar.addEventListener('click', function (event) { // return if the clicked element doesn't have the correct selector if (!event.target.matches('nav a:not(active)')) { return; } document.querySelector('nav a.active').classList.remove('active'); event.target.classList.add('active'); + moveHighlight(); }); Finally, let’s also call the function immediately so that the border moves behind our initial active item when the page first loads: // handler for moving the highlight const moveHighlight = () => { // ... } // display the highlight when the page loads moveHighlight(); Now, the border moves across the navigation bar when a new item is selected. Try clicking the different navigation links to animate the navigation bar. See the Pen Moving Highlight Navbar [forked] by Blake Lundquist. That only took a few lines of vanilla JavaScript and could easily be extended to account for other interactions, like mouseover events. In the next section, we will explore refactoring this feature using the View Transition API. Using The View Transition API The View Transition API provides functionality to create animated transitions between website views. Under the hood, the API creates snapshots of “before” and “after” views and then handles transitioning between them. View transitions are useful for creating animations between documents, providing the native-app-like user experience featured in frameworks like Astro. However, the API also provides handlers meant for SPA-style applications. We will use it to reduce the JavaScript needed in our implementation and more easily create fallback functionality. For this approach, we no longer need a separate #highlight element. Instead, we can style the .active navigation item directly using pseudo-selectors and let the View Transition API handle the animation between the before-and-after UI states when a new navigation item is clicked. We’ll start by getting rid of the #highlight element and its associated CSS and replacing it with styles for the nav a::after pseudo-selector: <nav> - <div id="highlight"></div> <a href="#" class="active">Home</a> <a href="#services">Services</a> <a href="#about">About</a> <a href="#contact">Contact</a> </nav> - #highlight { - z-index: 0; - position: absolute; - height: 100%; - width: 0; - left: 0; - box-sizing: border-box; - transition: all 0.2s ease; - } + nav a::after { + content: " "; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + border: none; + box-sizing: border-box; + } For the .active class, we include the view-transition-name property, thus unlocking the magic of the View Transition API. Once we trigger the view transition and change the location of the .active navigation item in the DOM, “before” and “after” snapshots will be taken, and the browser will animate the border across the bar. We’ll give our view transition the name of highlight, but we could theoretically give it any name. nav a.active::after { border: 2px solid green; view-transition-name: highlight; } Once we have a selector that contains a view-transition-name property, the only remaining step is to trigger the transition using the startViewTransition method and pass in a callback function. const navbar = document.querySelector('nav'); // Change the active nav item on click navbar.addEventListener('click', async function (event) { if (!event.target.matches('nav a:not(.active)')) { return; } document.startViewTransition(() => { document.querySelector('nav a.active').classList.remove('active'); event.target.classList.add('active'); }); }); Above is a revised version of the click handler. Instead of doing all the calculations for the size and position of the moving border ourselves, the View Transition API handles all of it for us. We only need to call document.startViewTransition and pass in a callback function to change the item that has the .active class! Adjusting The View Transition At this point, when clicking on a navigation link, you’ll notice that the transition works, but some strange sizing issues are visible. (Large preview) This sizing inconsistency is caused by aspect ratio changes during the course of the view transition. We won’t go into detail here, but Jake Archibald has a detailed explanation you can read for more information. In short, to ensure the height of the border stays uniform throughout the transition, we need to declare an explicit height for the ::view-transition-old and ::view-transition-new pseudo-selectors representing a static snapshot of the old and new view, respectively. ::view-transition-old(highlight) { height: 100%; } ::view-transition-new(highlight) { height: 100%; } Let’s do some final refactoring to tidy up our code by moving the callback to a separate function and adding a fallback for when view transitions aren’t supported: const navbar = document.querySelector('nav'); // change the item that has the .active class applied const setActiveElement = (elem) => { document.querySelector('nav a.active').classList.remove('active'); elem.classList.add('active'); } // Start view transition and pass in a callback on click navbar.addEventListener('click', async function (event) { if (!event.target.matches('nav a:not(.active)')) { return; } // Fallback for browsers that don't support View Transitions: if (!document.startViewTransition) { setActiveElement(event.target); return; } document.startViewTransition(() => setActiveElement(event.target)); }); Here’s our view transition-powered navigation bar! Observe the smooth transition when you click on the different links. See the Pen Moving Highlight Navbar with View Transition [forked] by Blake Lundquist. Conclusion Animations and transitions between website UI states used to require many kilobytes of external libraries, along with verbose, confusing, and error-prone code, but vanilla JavaScript and CSS have since incorporated features to achieve native-app-like interactions without breaking the bank. We demonstrated this by implementing the “moving highlight” navigation pattern using two approaches: CSS transitions combined with the getBoundingClientRect() method and the View Transition API. Resources getBoundingClientRect() method documentation View Transition API documentation “View Transitions: Handling Aspect Ratio Changes” by Jake Archibald
    0 Reacties 0 aandelen