DEV Community: Nicholas Fazzolari

Using Maps and the @each Rule in SASS to Create Ranged Classes

Nicholas Fazzolari — Mon, 25 Jan 2021 02:31:53 +0000

Introduction

This article is intended for front-end developers who understand the fundamentals of SASS CSS preprocessing syntax and concepts, and are interested in using code generating SASS features to build ranged CSS classes using available data structures and looping mechanisms within the SASS preprocessor standard library.

As the scope and complexity of front-end, web development increases us front-end web developers constantly have to find tools that help us become more efficient in our development. SASS provides us with multiple core features to help us keep our code DRY (Do not Repeat Yourself). The features we're going to be exploring with two basic examples in this article are:

SASS Map (See official documentation)
SASS @each rule (See official documentation)

Maps in a Nutshell

Maps are a data structure provided by SASS that follow the (<expression>: <expression>, <expression>: <expression>) key:value mapping rule.

@each in a Nutshell

@each is one of a few looping mechanisms provided by SASS which allows for iteration over lists and maps.

Context

Let's say you're building out a front-end for a project and you have CSS classes which are ranged in nature. For example, you need a five levels of opacity that need to be represented as discrete CSS classes.

0%, 25%, 50%, 75%, 100% (default)

The classes can be implemented as pure CSS:

.opac-0 {
  opacity: 0%;
}

.opac-25 {
  opacity: 25%;
}

.opac-50 {
  opacity: 50%;
}

.opac-75 {
  opacity: 75%;
}

.opac-100 {
  opacity: 100%;
}

Sure, you can write these by hand and move on with life. However, if you want to have a more defined step that includes 8 levels of opacity you'll be stuck re-writing the classes by hand. It's error prone and not maintainable. Let's use the mechanisms which SASS provides us to make the code more terse and maintainable using maps and @each.

SASS-ified Ranged Opacity Example

Defining the Map

// opacity map
$opacityMap: ("0": 0%, "25": 25%, "50": 50%, "75": 75%, "100": 100%);

Now we have a SASS variable which stores the map. We can now write the code which iterates over the contents of the map and generates resulting CSS:

Using @each to Generate the Opacity Classes

// generates ranged opacity classes based on the values in the opacity map
@each $key, $value in $opacityMap {
    .opac-#{$key} {
        opacity: $value;
    }
}

Let's break the code down.
We told the SASS preprocessor to take each $key, and $value in the map $opacityMap and make a CSS classed named .opac-0 ... n, with opacity: $value 0 ... k as their rules. The SASS preprocessor will continue the loop @each until the end of the map is reached giving us the following CSS output:

.opac-0 {
  opacity: 0%;
}

.opac-25 {
  opacity: 25%;
}

.opac-50 {
  opacity: 50%;
}

.opac-75 {
  opacity: 75%;
}

.opac-100 {
  opacity: 100%;
}

Conclusion

When learning CSS preprocessing it can be easy to stop learning after the features at mixins and variables functionality, with the occasional @use or @extend. Becoming a master at your craft means to always forge ahead and learn more. Remember, if you find yourself writing ranged CSS classes stop and take a few minutes to consider if you can use iteration and data containers to build a faster, safer and more maintainable solution. I hope this article helped some of you learning SASS to come up with creative ways to write better CSS.

Reaching Out - Worries About my Journey as a Developer so Far

Nicholas Fazzolari — Mon, 15 Apr 2019 17:08:53 +0000

Hi fellow Devs. I'm nearing the completion of my Computer-Science degree and am feeling rather lost, worried, and lonely in the world of development. I started college at 29 to change my career path from food service and live music to becoming a web/application developer. When I was younger I decided to delay my college education until later in life. Some reasons included family finance, having a secure job and a successful band which was allowing me to live my youthful dream of touring in a band and bringing my creative output to people. I went and toured the world with my punk band and made great connections there and found a lot of fulfillment and still preform from time to time. However, the music scene operates too late at night with too much partying so I'm off boarding from it quite a lot. This is leaving a huge scary void in my life.

My decision to attend college for CS was not an arbitrary choice. I began writing web sites in 1999, made Quake2 maps and stayed active with graphic design work in my adventures as a musician. We made all our art and products ourselves, 100% DIY. I love creating things in the digital domain and have had some success in doing so. I've been actively working on translating all the skills I've gained throughout my life to software development, which has shown some positive results from what I can measure.

Throughout my education I have managed to transition into a part-time IT job and am getting occasional freelance work as a web developer/digital designer. It seems like I've learned a lot of really valuable software development skills and theories, and have become a far better developer and problem solver due to my education. However, something feels like it's missing.

After doing some thinking I figured out what it is that is missing. I'm in need of a mentor. I am eager to be part of a community. I want to get involved! I have more time as my classes are mainly electives. I'm finding it difficult to navigate it all. I'm a social person and love being part of communities.

Any advice would be greatly appreciated.

Help! I am Overwhelmed With React and It's Preventing Me From Finding A Workflow

Nicholas Fazzolari — Sat, 05 Jan 2019 00:48:04 +0000

A Short Background Story

I've been making websites since the late 1990's. I took a break between 2007 and 2014 and the web development ecosystem has changed a lot to say the least. I've always used a workflow that to me has been rather clear and has served my purposes.

What I'm Used to:

HTML
JavaScript (for effects and interaction)
CSS
- I added SASS to this in 2014/2015
A php driven CMS (Craft/Perch lately) and PhPMyAdmin to manage my SQL
A shared hosting solution (1and1) that I can point domains to and store data on

With those technologies I would make templates that rendered the content from the CMS. My clients have been happy with this approach and I can deliver solutions using that workflow. However, I started paying attention to the React/GraphQL movement in the last year. As of late I've been zeroing in on Gatsby.

What I've Done To Understand and Learn

I've gone through the React tutorial on their site, same with the GraphQL tutorial, have read and understood the granular topics of what these technologies are. I've familiarized myself with package managers.

Through my formal CS education I have written a text editor in Assembly, written and IPC in C, but I'm more confused and frustrated building a portfolio site with react (focusing on Gatsby as my stack) and have nothing to show dozens of hours into the process. I constantly feel lost in dozens of topics that are partially explained without connection to the other related topics. I feel like I'm drowning in sales pitches of competing framework developers who all want me to try their awesome new technology that all do the same thing - the same thing? WHAT IS IT? I want to make awesome web sites. I want to go from design to a public facing website that I created with this technology.

I don't like being this cynical. I prefer to be productive and optimistic. I feel drained, frustrated and used.

Looking Within Myself

I'm rational enough to understand that if industry leaders are using these new web development technologies to their benefit, I must be approaching this wrong. I'm not thinking about it right. I've exhausted my own resources as an independent learner. Halp!

Breaking Down And Asking For Help

At this point I'm breaking down and asking for help. I've tried finding a block diagram of flow chart of a high-level overview how to use react and various technologies that are dependent on it (whatever those are at any given moment in time) and haven't found anything.

Core Questions I have

Hosting (public facing)? I can't install packages onto my shared hosting plan on the fly. I can't ssh into it. No root access. What do I use instead? Do I run a server here at my house?
Is the core React library alone not powerful enough? Do I need to install a CMS or other packages for react to be useful, much how php on it's own doesn't provide all the abstractions needed for task x, y and z?
The most important: What (preferably free) tutorials/learning resources do you recommend? Maybe my searches haven't returned the best results.

Thanks for listening to my vent post. I'm reaching out for mentorship and help. Anything help/guidance would be appreciated.

If you enjoyed this content and want to support a poor freelancing student so I can eat and produce more content in the future, I accept donations via PayPal

Generate and Set Pseudorandom Hexadecimal Background Color Using JavaScript

Nicholas Fazzolari — Sat, 22 Dec 2018 08:18:35 +0000

I'm working on a project that deals with pseudo random event-driven color changes and needed a solution to generate hexadecimal codes for web use.

Program Design and Thinking:

I know that hexadecimal color codes represent red green and blue values in base 16. Which are defined by the following pattern:

I started thinking about what type and data structure to use in the implementation. I cam up with a general idea using a sets to define the base set and a general rule to build a six value hexadecimal color code.

Where H is the set of hex values - These will be defined as strings.
The set 'Hexadecimal Color Code' - uses +=, the operator from JavaScript to concatenate a range of values from H

At this point I was able to start writing some code. I will let the code speak for itself in the embed below.

Discussion and Insight:

As a Computer Science student and total nerd I have a question about this code.

Can these values be generated totally numerically, then parsed as strings after generation? I know in C/C++ (my coding comfort zone) you can do this. With my current knowledge of JavaScript I have yet to discover a method.

Any other insights or comments would be appreciated.

The Code

Taking it Further:

After I implemented this I started thinking about doing more complex and potentially useful things with hex colors. For example, one could build on this idea and implement the code in such a way that only the R, G, or B get generated or a certain combination of the three.

Anyways, I hope some discussion arises from this, and this post was interesting.

If you enjoyed this content and want to support a poor freelancing student so I can eat and produce more content in the future, I accept donations via PayPal

Using 'null' in SASS/SCSS Mixins to Mute Arguments

Nicholas Fazzolari — Tue, 18 Dec 2018 03:58:08 +0000

The Discovery

I'm working on styling some boxes, something front-end web developers are (should) be familiar with. I use SASS to write my CSS. I needed some rounded corners so I wrote a mixin that looks like this:

The Issue & Dirty Solution

I included the mixin in a CSS class to see my result.

In the browser the result was what I expected. Eight pixel rounded borders on my box. However, for one of the boxes I was working on I only needed the top-left and top-right corners rounded so I set the bottom-left and bottom-right arguments to 0px and again, the result was correct in the browser; sharp bottom corners and nice eight pixel rounded top borders. Oh yeah, the CSS compiled without errors too.

The Optimization

I do my best to work in a mobile first mindset, I value optimization and performance. With my rudimentary understanding of the compilation process from SASS to CSS I suspected that setting the arguments of the mixin to a 0px value would keep the two unneeded CSS rules in the compiled CSS.

I was right.

This could add up quickly and generated many extra line of CSS that are not needed. I decided to test something, something I have picked up during my CS education: Try null and see what happens in a situation like this. null appears in many programming and scripting languages and can be powerful in the right situations.

I changed my include to this:

and compiled the code. No error! Being somewhat proud of myself and excited I looked into the compiled .css file and found the following (and desired) result:

Conclusion

For this example we ended up with two less lines of CSS. However, at scale this could save thousands of lines of unneeded CSS. This also makes minifying more rewarding.

I hope this was useful for some people who like squeezing more optimization out of their front-end code.

If you enjoyed this content and want to support a poor freelancing student so I can eat and produce more content in the future, I accept donations via PayPal

What are Some Common Use Cases for DLL's in Windows Applications

Nicholas Fazzolari — Thu, 26 Jul 2018 16:16:29 +0000

I understand the core principle of what a DLL (Dynamic Linking Library) is, and can even implement a very basic one to use with my program. However, I'm curious to understand the rationale of them being implemented from a software engineering perspective. Are there common use cases that could help me understand their purpose better?

I notice many programs use them, yet in tutorials and even my coursework so far, DLL's never come up.