Shaun Chander

Form validation with Zod and Svelte

et's learn how to implement solid form validation with Zod and Svelte, two of the coolest frameworks in web dev right now.

SvelteKit

Effective modals in SvelteKit

Let's learn how to build effective modals in SvelteKit using portals!

SvelteKit

Client-side only middleware in SvelteKit

You can easily add client-only middleware to your SvelteKit project by modifying the file you export your load function from.

Up and running with Turborepo (feat. NextJS and SanityCMS)

YouTube

Building animated mobile navbars with framer-motion and TailwindCSS

Let's learn how to build a fully animated mobile navbar using framer-motion and TailwindCSS

Javascript

Remove an outer array in JavaScript with the flat method

If you're working with nested arrays and need to return just a singular array, reach for the Array.flat() method.

TailwindCSS

Tip #33: Automatically add ellipsis with the truncate utility

When working with large blocks on text on the frontend we sometimes want to truncate that text with an ellipsis (the three ...). Today, I'll show you how to use the truncate utility.

Frontend

Tip #32: Improve images by using the picture tag

In the previous tip I talked about optimizing your images using the loading attribute. Continuing with the theme, I want to talk about using a newer HTML tag called picture to build better-optimized images from an SEO standpoint.

Frontend

Tip #31: Improve image performance by using lazy loading

Today, I want to talk about improving image performance via something called lazy-loading.

HTML

Tip #30: Make your external links secure with the rel attribute

Did you know that your a carry inherit security risks? It's kinda weird but it's true, a naked a tag that doesn't define a rel attribute is considered "unsecure" by the Google Lighthouse audit and will be flagged by crawlers as unsafe.

TailwindCSS

Tip #29: Debug your CSS with a ??? utility

In JavaScript we can easily debug our code using console.log. Unfortunately, we don't have a console.log function in CSS, but that doesn't mean we can't build something with a similar functionality.

TailwindCSS

Tip #28: Use containers properly in TailwindCSS with padding

Today I'm showing you how to properly use containers in TailwindCSS with paddings.

Frontend

Tip #27: Build simple sliders with scroll snapping in TailwindCSS

Today I'll show you how to build simple flick sliders using HTML and TailwindCSS.

Frontend

Tip #26: Use clamps to build fluid typography systems

Fluid typography is one of those concepts in web design that I feel like is still in its infancy. Not many people know about or use it but it's actually among the most powerful tools for building better responsive websites.

Frontend

Tip #25: Fix z-index issues using relative positioning

One of the most annoying things in HTML/CSS is bug-fixing a z-index issue. Lucky for you, I'll show you an effective trick to fix z-indexing 99% of the time and it's actually really simple.

TailwindCSS

Tip #24: Use arbitrary variants in TailwindCSS to style headless CMS content

Got a bunch of raw HTML coming in from a headless CMS. Want to style all of it with TailwindCSS only? Don't want to use an extra CSS file? Introducing TailwindCSS's arbitrary variants.

HTML

Tip #23: Always define width and height attributes for images

When working with images on the web, it's extremely important that you define the width and height attributes on that image if you know its size before-hand.

TailwindCSS

Tip #22: Build price tables with flex-box

Let's learn how to build stellar price tables in TailwindCSS using flex-box. Price tables are an awesome way to quickly learn and master flex-box for those just starting our in more advanced frontend development.

Javascript

Tip #21: Add confetti effects to your website with confetti.js

One of the best effects on the web today is a burst of confetti that gets triggered when a user clicks a button or completes a task.

TailwindCSS

Tip #20: Use transforms to build wavy section dividers

Today I'll show you how you can build a wavey section divider using TailwindCSS and CSS transformations.

Frontend

Tip #19: Use containers and padding to build responsive websites

aking websites responsive is a skill learned through repetition and experience. Over the years, I've learned that a key aspect of making a website responsive is to use max-width containers along with padding. This isn't to make websites mobile response, but rather, desktop responsive instead.

TailwindCSS

Tip #18: Add TailwindCSS to any project with npx

Let's say your working on a custom boilerplate or you have an older project that needs a migration and you want to use TailwindCSS. You can very easily add TailwindCSS to any project thanks to the npx command.

Frontend

Tip #17: Use the scroll-behavior property to set smooth scrolling

Back in the old days, I used to use a jQuery script for adding smooth-scrolling to anchors on my websites. Nowadays, we have a native CSS property that can do that for us (hooray for less JS 🎉).

HTML

Tip #16: Use article tags correctly

The article tag is supposed to be used whenever you're linking to a blog post or some sort of content (either internal or external) somewhere on your page.

TailwindCSS

Tip #15: Build buttons using inline-flex

Button-building is somewhat of an art and certain people have certain preferences on how to build a good, re-usable button component.