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!”