As a UX Designer and Engineer, I’m constantly looking for ways to make my workflows more efficient, and that includes using Chrome extensions.

Here’s a list of the top 5 Chrome extensions you need in your life if you are a UX Designer or Engineer.

CSS Peeper 🎨

CSS Peeper is probably my favorite Chrome extension! It’s beautiful and beyond practical when looking for inspiration around the web. This extension breaks down all of a website’s style details including font families, sizes, colors, object spacing, class names, and even any assets including images you might find on a website.

In October of 2019 Sass announced their new module system, which primarily addressed the switch from using @import to @use instead. Let’s dive into what this means and how you should be using this new way to structure your SCSS files.

Note: The new Sass modules and what is outlined below is only compatible with Dart Sass 1.23.0. If you are using LibSass as your Sass engine (ex. VS Code CompileSass uses LibSass) you may have to wait a while longer.

What is @use

The new @use rule is the replacement for @import which allows other stylesheets to use its variables, functions, and…

If you’re a lover of SCSS, you’ll definitely want to make sure to use it in your Angular applications. Luckily the Angular CLI does all the setup for you!

Let’s first walk through the file changes that the Angular CLI handles for us and how you can modify existing projects to switch over to SCSS for styling. I’ll then go over how I like to set up my SCSS files and folder structure when working on Angular projects.

Let’s get into it!

New Project Setup Using Angular CLI

When creating a new Angular app using the ng new app-name command, the CLI will ask you “Which…

As a lover of SCSS, structure and organization, I’m always finding myself adding the full SCSS folder structure to my front end dev projects. The lazy developer in me (aka efficient developer) wanted one command line I could enter in my terminal that would scaffold it all out for me and create all the necessary files in a matter of seconds. Enter Angular Schematics 🤲… this is a basic quick guide to help get you started on how to get an Angular Schematic up and running.

What are Angular Schematics

In very basic terms — Angular Schematics allow you to modify existing Angular projects…

Stefanie Fluin

👱‍♀️#Designer #Developer #UXE passionate about Design Systems and Angular (@thecodermomma on 📷 Insta)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store