Shaun Chander - Ghost (Page 2)

Ghost

Sign in Subscribe

Shaun Chander

Tip #14: Change the text highlight color with ::selection

Notice how, by default, the browser applies a sort of blue-ish tint as the background color? You can actually customize what this background color is to any color you want (yes, even your brand color!).

Tip #13: Use Date to add the current year to your copyright claim

Typically at the bottom of websites you'll see something along the lines of "© Website Name 2023. All Rights Reserved". While you can hard-code this piece of content in your footer, I recommend you actually inject the year using a small amount of JavaScript.

Tip #12: Augment your browser console logs with CSS

Did you know you can use CSS when using console.log on the browser? That's right, you can change the font color, font size, padding, margin, and more to give your logs a lot more flare.

Tip #11: Push elements to the bottom of their containers with flex-grow

Picture this: you're working on a price table section that uses cards and each card has a different length list of features and a call-to-action button to purchase the plan below the list, you find that after implementing all the content, the section looks something like this:

Tip #10: Use divides in TailwindCSS to quickly add borders

Got a list? Want to add borders in between in each item? You can do that really quickly using TailwindCSS's divide-* utility.

Tip #9: Disable image drag by setting draggable to false

Annoyed that your users can drag and save your images offsite? It's actually an intended feature of the browser (and its recommend you keep it enabled for accessibility purposes)

Tip #8: Use focus-visible to improve keyboard accessibility

Accessibility (aka a11y) is a core web vital used by the Lighthouse audit to rank websites accordingly, so its important that the websites we build adhere to the standards expected thereof.

Tip #7: Build grid systems with flex containers

It may come as a surprise that I recommend you use flex containers for building the basic 12-column grid system rather than CSS grid. While CSS grid is great for building literal grids... it's not the best for building a responsive, 12-column grid that most websites today use for layouts.

Tip #6: Use focus rings to improve user experience on input forms

In this tip, I want to add fuel to the fire by introducing you to a really cool effect called the focus ring.

Tip #5: Use flex columns to create your website's layout

When you're just starting out on a new page, the first thing you want to tackle is the page's layout. This is where everything on your page will live: its navbar, the main content, and the footer.

Tip #4: Use semantic HTML tags to increase SEO

In this tip, I'll introduce you to three semantic tags you should always use on your pages: main, header, and footer.

Tip #3: Add hover effects to SVG icons with fill

n TailwindCSS, you can very easily add icon hover effects using the fill utility. Fill is actually a native CSS property that applies coloring into an SVG element's path tag(s).

Tip #2: Create faded background images using linear gradients

Stop using Photoshop to add a gradient on top of your images so you can fade them into background! Instead, let me know show you how you can do it with just HTML and CSS.

Tip #1: Use space and gap utilities in TailwindCSS

Spacing elements with margins and paddings is hard to read and hard to standardize. Instead, use Tailwind's built-in spacing utilities: space and gap.

Tailwind Tips — Maintaining global typography styles

Let's learn how we can apply global typography styling in TailwindCSS using the @apply directive!

Setting Ghost's admin url properly

This weekend I ran into a particular issue with Ghost where I wanted to have the public URL point to https://shaunchander.me/blog (so links in my newsletter can point to the correct domain) but also have the admin panel accessible on a different domain entirely.

All about variants in framer-motion

If there's one feature that makes framer-motion an absolute kick-ass framework, it's variants.

Coming back after a break

So... I've been out for a bit (so much for daily posting, *insert why god meme here*). It was a for a good reason though, I recently moved into a new place!

Building animated mesh gradients with whatamesh

Today we're building animated mesh gradient backgrounds using whatamesh.

Wizard with a wand over a cauldron and open books.

Enter and exit animations with framer-motion

One of framer-motion's coolest features is the ability to natively animate elements into, and out of, the page. Today, we're learning about AnimatePresence

Guy at a waterfall holding up a gesture

Gesture animations with framer-motion

This is Part 2 of my framer-motion series. Take a peek at Part 1 if you need an introduction to framer-motion. ... Gestures? It might sound really weird at first but gestures are actually just framer-motion talk for user interactions on your site. Think hovers, clicking, focusing, dragging. Things like that.

Guy overlooking the ocean on a high point

A lot happened in 2022

2022 was one of my wildest years on paper. I graduated college, launched a startup, broke an ankle, and joined a team as a fulltime frontend engineer.

Get started with framer-motion

Framer motion is a very powerful animation library for React apps and its come a long way since its humble beginnings. Today, we're just starting with the basics.

A cluttered mess of boxes at a grocery store

Actually update npm packages to their latest versions

Need to quickly update your npm packages to their latest versions? Try the npm-check-updates package!

Jenga block tower

My stack going into 2023

It's the new year 🎉 And that means we get a whole new cycle of JavaScript frameworks popping into (and out of) existence. In retrospect I'd say 2022 was the most eventful year for frontend web development. We got edge functions, Astro, Qwik, the death of CSS-in-JS, and the obligitory new