DISCOVERY

March 10th, 2018

What I Learned About Sass

Sass

CSS

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!

DISCOVERY

August 2nd, 2021

Writing Less Stylesheets

Less

CSS

Sass

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.

DISCOVERY

June 30th, 2021

Styling React Components With JSS

JSS

React

+3 More

In my previous article on JSS, I discussed the improvements JSS makes over traditional CSS stylesheets and CSS preprocessors such as Sass. JSS utilizes the highly expressive JavaScript language, enables style reusability, dynamic styling, and provides name conflict resolution. Although JSS works with any front-end framework or library, it really shines when paired with React. In this article, I begin by discussing the basics of JSS in React applications. Then, I show sample code from my SaintsXCTF application, which is running in production and utilizes JSS for its stylesheets.

BLOG

March 17th, 2018

Creating a MEAN Stack Prototype

MongoDB

Express

+17 More

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!

However, the first order of business is to decide which technology stack I want to use for the website. I've narrowed it down to a full JavaScript stack, from the front-end through the database. There are two remaining tech stacks in competition: the MEAN stack (MongoDB, Express, Angular, & Node.js) and the MERN stack (MongoDB, Express, React.js & Node.js). I started my research for building the website by reading JavaScript books and writing plenty of discovery posts about them. I also explored Node.js and MongoDB in depth. I even made a blog post and prototype on both technologies! Now its time to pick between the two front end JavaScript frameworks: Angular by Google and React.js by Facebook.

DISCOVERY

June 4th, 2018

React & Webpack Seed Project Part II: Bundling With Webpack

Webpack

React

+5 More

I think Webpack is intimidating. There is so much configuration needed to bundle a web application that includes JavaScript, style sheets, images, fonts, non-JavaScript files, etc. Maintenance work on my Webpack config is never a task I look forward to. I have only used Webpack for a few months now, so hopefully some of the frustration eases over time.

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.

DISCOVERY

August 24th, 2019

Introducing Flexbox

Sass

CSS

Flexbox

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!

What is Flexbox?

DISCOVERY

June 29th, 2021

JSS: The New Standard for Stylesheets

JSS

JavaScript

+2 More

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.

DISCOVERY

January 24th, 2019

CSS Grid Backwards Compatibility

CSS

CSS Grid

HTML

When I created my personal website, I wanted to use all the latest technologies. I created a modern front-end with React.js, Webpack, Sass, and the latest JavaScript. When it came to stylesheets, I used the latest features that ease website layout creation. One of these features is CSS Grid. I wrote an article about CSS Grid over the summer, explaining how it simplifies complex CSS layouts. As with all new web technologies, an issue with CSS Grid is that older browsers don't support it. This article looks at some of the workarounds to make CSS Grid backwards compatible to older browsers.

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.