Kirsten Swanson

Sep 2

How to create a smooth slanted linear-gradient with CSS

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…

CSS

3 min read

How to create a smooth slanted linear-gradient with CSS

Published in Dev Genius

·May 12

Next.js with Mapbox GL JS map

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…

Nextjs

5 min read

Published in Bootcamp

·May 19, 2021

Using CSS gradients for background gradient images

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…

CSS

7 min read

Using CSS gradients for background gradient images

Mar 14, 2021

How to Set up GoDaddy Domain with Vercel

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. …

Godaddy

4 min read

Published in Level Up Coding

·Jan 12, 2021

Migrating site from Rails to Next.js App — How to add TypeScript, ESLint, CSS Modules, IE11 detection and Contentful integration

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…

Nextjs

9 min read

Published in Prototypr

·Aug 16, 2019

Front-End Developer and Designer Pairing

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…

Design

7 min read

Oct 1, 2018

CSS Grid Layout with Flexbox Fallback

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

7 min read

Apr 9, 2018

CSS3 Animations with Transitions & Transforms

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…

CSS

5 min read

CSS3 Animations with Transitions & Transforms

Jul 31, 2017

CSS Modules & Sass in Create React App

Whenever I can I’ll integrate Sass into projects, so this time I was determined to configure Sass AND CSS modules into my create-react-app project. Let’s start from the very beginning with creating a new project. npm i -g create-react-app create-react-app project-name cd project-name Now when you npm start or yarn…

React

5 min read

Jul 29, 2017

Custom Fonts in React Native for iOS & Android Builds

Don’t want to use the native fonts with React Native…well let’s add some custom fonts then! …

React Native

5 min read