March 10th, 2018
What I Learned About Sass
In the client side code for my MEAN stack prototype I used Sass for stylesheets instead of CSS. I experimented with Sass before, but this was my first time using it in a full project. Until native CSS adds the features that Sass provides, I will continue using Sass for stylesheets in the future.
Sass is a CSS preprocessor with Ruby style syntax. Its a superset of CSS, so any CSS document is valid Sass1. Sass adds lots of new features including variable definitions, mixins, and other syntax to help create reusable components in stylesheets. The biggest problem I had with CSS is that it ends up looking like a jumbled mess with many repeated styles. With Sass, I can create reusable styles!
August 2nd, 2021
Writing Less Stylesheets
When it comes to CSS preprocessors (stylesheet languages that add features on top of CSS and transpile to CSS), in the past I've often used Sass. When I first started learning about CSS preprocessors, the two main choices were Sass and Less. The reason I decided to learn Sass instead of Less was due to its greater popularity and me trying to follow industry trends. At the time, Bootstrap had just released version 4, which switched its stylesheet language from Less to Sass1. In my mind, it didn't make sense for me to learn a preprocessor language that was being left in the dust.
Over time, I increasingly wished to learn the difference between Sass and Less. It was hard for me to tell if there were differences in the functionality of Sass or Less, or if Sass was picked as the favorite due to syntactical preferences and third-party library support. Last year I wrote two front-end application prototypes, graphql-react-prototype and apollo-client-server-prototype. Instead of using a stylesheet technology I already knew such as Sass or JSS, I decided to learn Less and use it as the stylesheet language for these prototypes.
June 30th, 2021
Styling React Components With JSS
March 17th, 2018
Creating a MEAN Stack Prototype
Much of my work lately has been in preparation for a personal website that I'm going to build (and where this blog post will call home!). The website is going to contain my resume, blog posts, and more. I am really excited to get started building it!
June 4th, 2018
React & Webpack Seed Project Part II: Bundling With Webpack
Nonetheless, Webpack is important to know in the current state of web programming. I used Webpack for the first time to bundle my React prototype application (and went on to use it on the website you are currently viewing!). My previous discovery post went over the React portion of my prototype application. This post looks at the Webpack portion and some of the interesting configuration pieces. I'm not giving a tutorial on how to build a Webpack config - instead focusing on things I've learned about the bundler and my initial observations.
August 24th, 2019
Last summer, I wrote an article about CSS Grid. CSS Grid is a new web page layout module introduced in 2017. Today I'm writing about Flexbox, another new web page layout module released to new browsers in 20171. While CSS Grid is a two-dimensional system used to create rigid layouts, Flexbox is a one-dimensional system used to create flexible layouts with dynamic resizing of elements. Let's go over the basics!
June 29th, 2021
JSS: The New Standard for Stylesheets
In my relatively short time as a software engineer, I've used many different approaches to writing stylesheets for web applications. My initial naive approach was writing a single CSS stylesheet per application, such as the styles.css file for my SaintsXCTF application that I wrote in college. Although this was a common practice in the early days of web development, lumping an entire website's styles into a single file has many downsides. First, a single stylesheet is difficult to read and gets very long. Second, it doesn't follow programming principles like DRY (Don't Repeat Yourself), abstraction, and encapsulation. Third, CSS lacks many programming language features which enable scalable and reusable code, such as functions, conditional statements, and variables.
June 29th, 2021
While writing this article I learned that CSS recently added variables into its specification1. Variable support is a great new addition (although, unsurprisingly, it is not supported by Internet Explorer). If CSS continues to improve, I may consider its use in certain future applications.
January 24th, 2019
CSS Grid Backwards Compatibility
I took three components from my website and simplified them to show how they work on older browsers. All modern browsers (Chrome, Edge, Firefox, Opera, Safari) implement feature queries, which check if certain stylesheet features are available in the browser environment1,2. Feature queries are created with the
@supports CSS rule.