This article walks through setting up the Contentful Content Delivery API integration with your Next.js app. We have already created many content models that we are using on our pages. If you have not done so, you will need to create a content model and content in Contentful. In order…

Sometimes we don’t want that blur transition between the two colors in a linear-gradient. Instead we want a hard line (color stop) between the colors. We can achieve this by using the same color stop value as either a percentage or length. background: linear-gradient(to right, #A66CFF 50%, #9C9EFE 50%); background…

I have always been a huge fan of maps and enjoy interacting with them on webpages. Mapbox GL JS is the library I’m using in my demo today. First you will need to obtain a Mapbox access token. I’m currently on their free tier, but as there’s more API requests…

You can do A LOT with CSS gradients! Even replace background gradient images with CSS. In fact, that’s how I came down this exploration on background gradients with CSS. I was building a page and given this background image below, which was initially 25MB. An image this size would take…

Vercel deployments for your apps are a breeze and easy to set up. Vercel has great documentation about how to configure custom domains, but if you’re not so familiar with GoDaddy’s platform it can be difficult navigating to the DNS area. …

The day has come that we want to isolate our marketing site away from our Rails app. We knew that we wanted to use a React framework and it came down to Next.js or Gatsby. Ultimately, Next.js won because it has a hybrid static and server rendering capability. Currently, most…

Are you a designer constantly telling your front-end developer to add padding or pixels and are baffled as to why the design doesn’t match the comp? 🤔 Or are you a front-end developer who’s frustrated with all the pixel pushing? 😳 Collaboration between designers and front-end developers is key for…

Are you seeking to build a responsive grid without calculating breakpoints and having to write multiple lines of code? Well you’ve found the right blog! This is a tutorial on how to properly apply CSS Grid Layout across all browsers. …

CSS transitions and transforms are a powerful way to enhance and delight user experiences. No added library like GSAP or Velocity.js are necessary. Neither is JavaScript required. CSS3 animations include properties that are already built into CSS and are widely supported across all browsers. Animations are a great way to…