Integrate Sass & React (create-react-app)

Bootstrapping your app with create-react-app? Super-charge it with Sass to make theming a cinch. Bonus — includes Foundation integration too!

Often I bootstrap my React projects with create-react-app. Just about every-time, I find myself Googling how to integrate Sass (scss). To save time, I’ve followed the advice of Sara Soueidan’s Just write. and jotted it down as reference. Bonus — includes Foundation integration as well!

  1. Install a starter app: $ npx create-react-app [app name]
  2. Eject the build scripts: $ npm run eject
  3. Install & configure Sass loaders: $ npm i -D sass-loader node-sass
  4. Optional — Install & configure Foundation: $ npm i -D foundation-sites

Continue reading “Integrate Sass & React (create-react-app)”

Parse Twitter Hashtags, Usernames & URLs with JavaScript — auto-linking is easy!

Using the Twitter API? Need to parse links in tweets? Autolinking user tweets is a cinch with JavaScript! In this post, I’ll show you the method I used when building Twitscreen to display real-time tweets.

As part of the rebuild for Twitscreen, I wanted to parse Twitter hashtags, usernames and URLs on the frontend vs. the backend. The purpose was to help simplify the Twitscreen API responses making it less error-prone when future updates to the Twitter API are made. Plus, I was using React so feeling extra… JavaScripty. My solution, JavaScript prototype objects. Continue reading “Parse Twitter Hashtags, Usernames & URLs with JavaScript — auto-linking is easy!”

Diagonal Slideshow — Download Now!

“Slideshows are overdone!” — not this slideshow from Codrops! Create a beautiful diagonal slideshow with slick UX effects and a decorative background that expands the fullscreen when clicking on a slide.

View Demo Fork on Github

There’s just about as many ways to implement a slideshow as there as developers — who think their way is best. I recently came across this slick diagonal slideshow by Mary Lou from Codrops. It’s unique in not only that’s it slides diagonally, but also has some really cool UX effects. Continue reading “Diagonal Slideshow — Download Now!”

Convert Photoshop Letter Spacing to CSS

Sketch may be the new go-to for web design, but there’s still a lot of dino-designers out there using Photoshop. This post is for those devs who need to convert letter tracking values to Photoshop letter spacing in CSS.

Convert Photoshop Letter Spacing to CSSUsing Photoshop for your web designs? You’re probably familiar with the term Letter Tracking. Letter Tracking in Photoshop is the term used for adjusting the space between letters in text. On the web, this is called letter-spacing. The problem is Photoshop’s letter tracking doesn’t convert 1:1 to letter spacing in CSS. In this post we’ll go over how to convert Photoshop letter spacing to CSS.

Never fear — there is a formula for it! I also built a Photoshop to Letter Spacing CSS Converter for the lazy below. Translating Photoshop’s letter tracking (a.k.a. letter spacing) is a cinch with these simple math equations. Continue reading “Convert Photoshop Letter Spacing to CSS”

Responsive Images — 6 Simple Ways

Bandwidth is precious on mobile networks, so it helps to serve users on smaller screens a smaller image. Learn how to serve up specific images depending on device with these techniques.

Like with most things in the development arena, there’s more than one way to skin a cat. In the case of CSS responsive images, the story is no different. In this post we’ll go over the top techniques for making responsive images. Continue reading “Responsive Images — 6 Simple Ways”