Breakpoint - Issue 4

Hey folks,

Hope you are doing well. I just recently visited Toronto and finally went to Niagara Falls and it was nothing like I’ve seen before. We also went on a cruise that would sail almost right into the falls. We were soaking wet indeed but it was nice to feel the force of nature. Traveling meant I had a lot of time on transportation so let’s see what I’ve read this week.

Frontend Shares

Nuxt 3.4

There’ve been a lot of updates in React world but Vue isn’t slowing down either. Chrome just included official support for View Transition API and Nuxt already has this as an experimental feature.

• View Transition API support
• Better and easier devtools integrations
• More layers aliases

SPA view transitions land in Chrome 111 by Jake Archibald (4 mins)

You may have noticed sometimes when you use certain apps and try to navigate between different views, it gives you that nice animated transitions in between. We now have the ability to do the same on web thanks to View Transitions API. When done correctly, this should give your users a fluid experience.

CSS Nesting by Adam Argyle (8 mins)

One of the things I love the most from SCSS is the ability to nest our CSS like:

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

This makes organization very easy and I don’t need to duplicate a lot of selectors. Such feature has officially come to CSS and Chrome already supports it.

CSS Tips for Better Web Development by Yoav Ganbar (11 mins)

I wish I found this blog from builder.io sooner. They cover wide range of topics on web developments and these are stuffs you might see in your day-to-day works. Here are some CSS tips you can use for your next project. I personally like the scroll-snap property. Before one would need the combination of JavaScript and CSS to make a carousel and making calculation. Now we have CSS property that should get you 80% of the way.

Storybook 7

• First-class Vite support
• Zero-config support for Next and SvelteKit
• MDX2 support
• Improved testing experience

Interview Question

System design question: Design a search interface.

• Should have a search input
• Search should happen when user is typing in the input
• Show the search result in a list
• What considerations would you put in place to make it performant