DEV Community: Caity Opelka

Testing Library: More than a Great Name

Caity Opelka — Mon, 22 Mar 2021 14:01:51 +0000

For much of my coding bootcamp experience, I've done a lot of test-driven development, but those tests have mostly, if not always, targeted the algorithms and individual parts of the components rather than the behaviors triggered by someone who is interacting with the app. There's a tool available with perhaps the most genius name, making it easily searchable even if you can't remember it: Testing Library (That's probably what you entered into the search bar, right?).

Kent C. Dodds created React Testing Library in 2018. He had been using and teaching Airbnb's Enzyme, a library with a lot of different capabilities. With so many options available in Enzyme, he found that he spent a lot of time trying to teach which parts of Enzyme were considered the current best practice before he could begin to teach functionality. Instead of continuing to waste time, he shifted his focus. He wanted to build a smaller library that encouraged better testing practices, and so React Testing Library was born. Realizing that most of the APIs were not React-specific, he eventually released its core as DOM Testing Library as well.

Note that it is a utility library, not a framework, so it doesn't replace suites like Mocha and Jest but rather works alongside them. Its purpose is to test the UI, or how the user interacts with the app. In the example below that is included in Testing Library's documentation, this test is specifically targeting a route built with React Router.

test('full app rendering/navigating', () => {
  renderWithRouter(<App />)
  expect(screen.getByText(/you are home/i)).toBeInTheDocument()

  const leftClick = { button: 0 }
  userEvent.click(screen.getByText(/about/i), leftClick)

  expect(screen.getByText(/you are on the about page/i)).toBeInTheDocument()
})

test('landing on a bad page', () => {
  renderWithRouter(<App />, { route: '/something-that-does-not-match' })

  expect(screen.getByText(/no match/i)).toBeInTheDocument()
})

test('rendering a component that uses useLocation', () => {
  const route = '/some-route'
  renderWithRouter(<LocationDisplay />, { route })

  expect(screen.getByTestId('location-display')).toHaveTextContent(route)
})

How is this different from Enzyme? Testing Library is checking the DOM nodes, so it's testing the behavior of your application from a user's perspective. Enzyme, on the other hand, checks the actual components for things like props and state. A typical user isn't concerned with props or state but rather that their expectations are met when they navigate to a page, open a modal, or click a button. With Testing Library, though the code may change within the components, the functionality should remain intact, which means you won't have to refactor the tests every time you refactor the components.

Testing the UI can be done by manually navigating and clicking around the site to test its functionality, but as an app increases in size, so does the time it takes to check all of the necessary behavioral aspects. Testing Library is a great tool to automate these checks by mimicking the interactions a user may have while using an app. I look forward to implementing it in future projects.

The React Testing Library can be installed with
npm install --save-dev @testing-library/react

and the DOM Testing Library can be installed with
npm install --save-dev @testing-library/dom

Building a Simple Footer with SVG Icons

Caity Opelka — Tue, 16 Mar 2021 03:53:09 +0000

If you're looking for icons to build any app, there are plenty of libraries and resources available with great premade options, but sometimes you just need something that's custom.

Let's talk about SVGs. An SVG is a scalable vector graphic. That means that no matter its size, it maintains clean lines. A vector graphic can be resized because its shape is defined by mathematical precision. On the other hand, a raster graphic loses its integrity when it is shown larger than its original size. See below for a visual representation with the vector on the left and the raster on the right.

You're probably wondering why even bother creating an SVG if the icon is going to be small anyway? Imagine that you have created all of these icons as PNGs, which is a file type that can be created with a transparent background. If you want to change the background in the app behind the PNG, it's as easy as changing the CSS, but if you want to change the color of the icon itself, it can't be done without changing the original icon file and then replacing the image in the app.

Because an SVG is just built with math, it's not only scalable but it's also just code. This means that it is possible to style it with your regular CSS, so if you want to change its fill color, it can be targeted without having to change the image outside of the code.

Also note that because SVGs are just code, another benefit over using PNGs or other image file types is that no requests have to be made to find the images to retrieve them from wherever they are located, resulting in a lighter app.

Sounds pretty neat, right? Let's start building that footer.

For the sake of brevity, because SVGs tend to have a fair amount of code, I'll only show three icons, but you can use as many as you would like. It's tempting to plug in the icons like below, and this will absolutely render them to the page, but those paths are pretty long. Imagine adding links and having to sift through this big chunk of code if you needed to make a change.

<footer>
  <div id='footer-wrap'>
    <svg xmlns='http://www.w3.org/2000/svg' className='footer-icon'>
      <path d='M21.63,29A11,11,0,0,1,19,28.66l-2.46,6.53a18.16,18.16,0,0,0,5.08.81,17.78,17.78,0,0,0,8-1.93l-3.59-6A10.83,10.83,0,0,1,21.63,29Z'/>
      <path d='M39.57,19.11h-7a10.86,10.86,0,0,1-3.88,7.28l3.64,6.08A18,18,0,0,0,39.57,19.11Z'/>
      <path d='M10.61,18a11,11,0,0,1,3.33-7.8L9.65,4.61a17.93,17.93,0,0,0,4,29.49l2.5-6.6A11,11,0,0,1,10.61,18Z'/>
      <path d='M21.63,7a11,11,0,0,1,10.76,9h7.12A18.06,18.06,0,0,0,21.63,0a17.1,17.1,0,0,0-1.88.19L21.08,7C21.26,7,21.45,7,21.63,7Z'/>
      <path d='M18.05,7.68,16.7.73a17.66,17.66,0,0,0-4.58,2l4.31,5.61A12.07,12.07,0,0,1,18.05,7.68Z'/>
    </svg>

    <svg xmlns='http://www.w3.org/2000/svg' className='footer-icon'>
      <path d='M38.07,32.51H7.51l4.22-15.86.19.7a1.51,1.51,0,0,0,.86,1,1.44,1.44,0,0,0,.62.13,1.49,1.49,0,0,0,.69-.16l2.12-1.07,1.28,5.38a1.58,1.58,0,0,0,.89,1.06L23.83,26l7.6,4.65a1.51,1.51,0,0,0,.8.22h5.84a1.72,1.72,0,0,0,1.53-1.74,1.54,1.54,0,0,0-1.53-1.54l-5.25.07-7.49-4.57L20.48,21l-1.59-6.67a1.5,1.5,0,0,0-.85-1,1.47,1.47,0,0,0-.65-.15,1.59,1.59,0,0,0-.69.17l-2.17,1.09L13.19,9.5a1.53,1.53,0,0,0-3,0L7.09,21.29V1.53A1.53,1.53,0,0,0,5.56,0H5.13A1.54,1.54,0,0,0,3.6,1.53V34.47A1.54,1.54,0,0,0,5.13,36H38.07a1.54,1.54,0,0,0,1.53-1.53V34A1.53,1.53,0,0,0,38.07,32.51Z'/>
    </svg>

    <svg xmlns='http://www.w3.org/2000/svg' className='footer-icon'>
      <path d="M14.29,12.43a3.37,3.37,0,0,0,.35.89l.95,1.48c1.08,1.7,2.2,3.45,3.45,5.08A3.56,3.56,0,0,0,21.59,21l.35,0A3,3,0,0,0,24,18.84,3.44,3.44,0,0,0,22.82,16c-1.61-1.21-3.35-2.28-5-3.32l-1.44-.9a4.5,4.5,0,0,0-1-.41l-1.69-.65.33.93C14.15,12,14.22,12.22,14.29,12.43Z"/>
      <path d="M39.46,15.25C38.62,7.65,31.16.54,23.51,0h-.4A3.45,3.45,0,0,0,19.4,3.61c0,.9,0,1.8,0,2.7V7.65a2.91,2.91,0,0,0,.68,2.15,2.19,2.19,0,0,0,1.65.57h0c2.22-.06,2.2-2.15,2.19-2.84V4.91l.55.08a7.8,7.8,0,0,1,1.59.34A12.9,12.9,0,0,1,34.9,16.16c.77,5.28-1.29,9.71-6,12.8a13.17,13.17,0,0,1-7.35,2.21A12.78,12.78,0,0,1,12.1,27.1C7.27,21.81,7,15.25,11.29,9.55c.4-.53.77-1.09,1.13-1.61l.6-.89-.12-.24c-.47-.93-1.24-2.17-2.42-2.17A3,3,0,0,0,8.4,5.86,17.84,17.84,0,0,0,3.72,20,18,18,0,0,0,11.47,32.6,17.52,17.52,0,0,0,21.55,36,17.78,17.78,0,0,0,31.09,33C37.41,29.05,40.3,22.9,39.46,15.25Z"/>
    </svg>
  </div>
</footer>

Let's make it easier to maintain. Ideally, it would be nice to find some separation from those long paths. Luckily, there's an element for that. According to MDN, "the <use> element takes nodes from within the SVG document, and duplicates them somewhere else." Let's push the paths down, placing each one in a <symbol> tag and giving them each an individual #id. Then, we'll use the <use> tag at the top and refer back to the id to reference the symbol.

<footer>
  <div className='footer-wrap'>

    <svg className='footer-icon'>
      <use href='#chart'></use>
    </svg>

    <svg className='footer-icon'>
      <use href='#graph'></use>
    </svg>

    <svg className='footer-icon'>
      <use href='#timer'></use>
    </svg>
  </div>

  <svg xmlns='http://www.w3.org/2000/svg' id='hide-bottom'>
    <symbol id='chart' viewBox='0 0 43.2 36'>
      <path d='M21.63,29A11,11,0,0,1,19,28.66l-2.46,6.53a18.16,18.16,0,0,0,5.08.81,17.78,17.78,0,0,0,8-1.93l-3.59-6A10.83,10.83,0,0,1,21.63,29Z'/>
      <path d='M39.57,19.11h-7a10.86,10.86,0,0,1-3.88,7.28l3.64,6.08A18,18,0,0,0,39.57,19.11Z'/>
      <path d='M10.61,18a11,11,0,0,1,3.33-7.8L9.65,4.61a17.93,17.93,0,0,0,4,29.49l2.5-6.6A11,11,0,0,1,10.61,18Z'/>
      <path d='M21.63,7a11,11,0,0,1,10.76,9h7.12A18.06,18.06,0,0,0,21.63,0a17.1,17.1,0,0,0-1.88.19L21.08,7C21.26,7,21.45,7,21.63,7Z'/>
      <path d='M18.05,7.68,16.7.73a17.66,17.66,0,0,0-4.58,2l4.31,5.61A12.07,12.07,0,0,1,18.05,7.68Z'/>
    </symbol>

    <symbol id='graph' viewBox='0 0 43.2 36'>
      <path d='M38.07,32.51H7.51l4.22-15.86.19.7a1.51,1.51,0,0,0,.86,1,1.44,1.44,0,0,0,.62.13,1.49,1.49,0,0,0,.69-.16l2.12-1.07,1.28,5.38a1.58,1.58,0,0,0,.89,1.06L23.83,26l7.6,4.65a1.51,1.51,0,0,0,.8.22h5.84a1.72,1.72,0,0,0,1.53-1.74,1.54,1.54,0,0,0-1.53-1.54l-5.25.07-7.49-4.57L20.48,21l-1.59-6.67a1.5,1.5,0,0,0-.85-1,1.47,1.47,0,0,0-.65-.15,1.59,1.59,0,0,0-.69.17l-2.17,1.09L13.19,9.5a1.53,1.53,0,0,0-3,0L7.09,21.29V1.53A1.53,1.53,0,0,0,5.56,0H5.13A1.54,1.54,0,0,0,3.6,1.53V34.47A1.54,1.54,0,0,0,5.13,36H38.07a1.54,1.54,0,0,0,1.53-1.53V34A1.53,1.53,0,0,0,38.07,32.51Z'/>
    </symbol>

    <symbol id='timer' viewBox='0 0 43.2 36'>
      <path d="M14.29,12.43a3.37,3.37,0,0,0,.35.89l.95,1.48c1.08,1.7,2.2,3.45,3.45,5.08A3.56,3.56,0,0,0,21.59,21l.35,0A3,3,0,0,0,24,18.84,3.44,3.44,0,0,0,22.82,16c-1.61-1.21-3.35-2.28-5-3.32l-1.44-.9a4.5,4.5,0,0,0-1-.41l-1.69-.65.33.93C14.15,12,14.22,12.22,14.29,12.43Z"/>
      <path d="M39.46,15.25C38.62,7.65,31.16.54,23.51,0h-.4A3.45,3.45,0,0,0,19.4,3.61c0,.9,0,1.8,0,2.7V7.65a2.91,2.91,0,0,0,.68,2.15,2.19,2.19,0,0,0,1.65.57h0c2.22-.06,2.2-2.15,2.19-2.84V4.91l.55.08a7.8,7.8,0,0,1,1.59.34A12.9,12.9,0,0,1,34.9,16.16c.77,5.28-1.29,9.71-6,12.8a13.17,13.17,0,0,1-7.35,2.21A12.78,12.78,0,0,1,12.1,27.1C7.27,21.81,7,15.25,11.29,9.55c.4-.53.77-1.09,1.13-1.61l.6-.89-.12-.24c-.47-.93-1.24-2.17-2.42-2.17A3,3,0,0,0,8.4,5.86,17.84,17.84,0,0,0,3.72,20,18,18,0,0,0,11.47,32.6,17.52,17.52,0,0,0,21.55,36,17.78,17.78,0,0,0,31.09,33C37.41,29.05,40.3,22.9,39.46,15.25Z"/>
    </symbol>
  </svg>
</footer>

Notice also that the className has now moved to the <svg> tags that wrap the <use> elements. From there, all you have to do is add your links and style the footer however you like.

A few extra tidbits about these SVGs. If you notice, each one is made up of paths. Just like with other html elements, you can give the paths a class or an id and style them individually as well. To illustrate this, let's go a little crazy with the path colors.

<symbol id='chart' viewBox='0 0 43.2 36'>
  <path className='path-pink' d='M21.63,29A11,11,0,0,1,19,28.66l-2.46,6.53a18.16,18.16,0,0,0,5.08.81,17.78,17.78,0,0,0,8-1.93l-3.59-6A10.83,10.83,0,0,1,21.63,29Z'/>
  <path d='M39.57,19.11h-7a10.86,10.86,0,0,1-3.88,7.28l3.64,6.08A18,18,0,0,0,39.57,19.11Z'/>
  <path className='path-orange' d='M10.61,18a11,11,0,0,1,3.33-7.8L9.65,4.61a17.93,17.93,0,0,0,4,29.49l2.5-6.6A11,11,0,0,1,10.61,18Z'/>
  <path className='path-purple' d='M21.63,7a11,11,0,0,1,10.76,9h7.12A18.06,18.06,0,0,0,21.63,0a17.1,17.1,0,0,0-1.88.19L21.08,7C21.26,7,21.45,7,21.63,7Z'/>
  <path d='M18.05,7.68,16.7.73a17.66,17.66,0,0,0-4.58,2l4.31,5.61A12.07,12.07,0,0,1,18.05,7.68Z'/>
</symbol>

After styling the code above to correspond with the colors matching their classes, the output will look like the image below. The changes will only affect the individual paths on the specified icon.

And there you have it - all you need to create a footer of scaleable and easily editable and maintainable (and probably many other -ables) icons!

CSS :is() fun

Caity Opelka — Mon, 08 Mar 2021 22:16:10 +0000

After skimming over some lines of CSS recently, I realized that I had read over a line and understood it without ever having seen it before. I had just come across the :is() pseudo-class function for the first time, and it looked something like this:

header :is(h1, a) {
    color: green;
    font-family: sans-serif;
}

It's easy to understand that the above code targets the color and font of any h1 or a tags inside of the header element. Another way to write the above rule is as follows:

header h1,
header a {
    color: green;
    font-family: sans-serif;
}

It may not seem like it's that much less to write, but imagine if you were targeting more than two or three elements. The code could get very long and repetitive without the use of :is(). Writing less code typically leads to having less bugs but that's not the only advantage to using this pseudo-class.

If you have a long chain of selectors and one of them is invalid, that one error invalidates the entire CSS rule. The browser just throws it out completely.

header h1,
header :a {
    color: green;
    font-family: sans-serif;
}

Using the example above, let's say that you accidentally put a colon in front of the anchor tag. Now the entire rule is invalid. Neither the h1s or the links will be able to access this rule. On the other hand, if this were written using the :is() pseudo-class, any other selectors that are not invalid will still be affected by the rule.

header :is(h1, :a) {
    color: green;
    font-family: sans-serif;
}

In the example above, although the anchor tag is invalid, the browser will still use the rule on the h1 tag. Only the invalid selector is ignored by the browser with the use of the :is() pseudo-class.

You can also reverse the logic. In the previous examples, we targeted h1s and anchors within the header element. Another way to use :is() is to target the functionality of a specific selector in many elements. Below, we are giving all links within the main, .title, and p tag a color of purple on hover.

:is(main, .title, p) a:hover {
    color: purple;
}

One thing to note is that it does follow a level of specificity. Let's target anything with a class of .title or a paragraph tag in the main element and give them a color of orange.

main :is(.title, p) {
    color: orange;
}

Now imagine further down in the CSS file, you try to reassign the color of the paragraph text to red.

main p {
    color: red;
}

You might be surprised to find out that the color remains orange. This is because the color was originally tied to whatever selector had the highest rank of specificity when it was passed to the :is() pseudo-class. In this case, .title had the highest specificity, which then ties the color of p to the color of .title, resulting in the paragraph text remaining red. If the .title class had not been called in the previous :is() pseudo-class, the color of the paragraph text would indeed have updated to the color of the most recent rule because the paragraph tag became the selector with the highest specificity.

This mini-dive into the :is() was the result of coming across a snippet of code that sparked my curiosity. Stay curious! There's always more to learn.

Sources: MDN

Coding for Colorblindness

Caity Opelka — Mon, 01 Mar 2021 17:54:59 +0000

With so many apps in competition with each other, designers and developers aim to create a distinct identity, and one of the most prominent features of an app's identity is its color scheme. With all of the colors we have available, it's easy to get carried away with the aesthetic and overlook accessibility.

About 8% of men (1 in 12) and .5% of women (1 in 200) of people are colorblind, and 99% of those with colorblindness have reduced red-green sensitivity.

The image below includes five examples of pairs that cause confusion. To someone who isn't colorblind, these colors are very different, but to someone who is colorblind, these pairs are indistinguishable.

A person with red-green colorblindness may see something similar to this:

You can understand immediately how this can cause issues with readability. If you are using color to call attention to something, perhaps a chart that uses color to differentiate areas, you have to account for how the colors will be viewed by someone with a red-green deficiency. Is the contrast different enough? Is there another way you can represent the data - can you use different patterns?

Another example is when you attempt to log in to a website but you attempted with the wrong password. Typically, you'll receive a red error. How can you make this more apparent using more than just color? The addition of a caption or an icon can get the point across more clearly.

If you're still in the planning phase, there is an easy way to check what users see if they have reduced red-green sensitivity in Adobe products like Illustrator and Photoshop. In the View tab of the main navigation dropdown, you'll see a Proof Setup option where you can select a Color blindness type. This will simulate how a user will interpret your current color palette. Currently, it does not show a view for tritanomaly (reduced sensitivity to blue light), but that type of colorblindness is extremely rare.

If you're in the coding phase, you can check the colorblind compatibility in the Chrome dev tools. Expand the menu to see More tools, and find the Rendering option.

From there, find the Emulate vision deficiencies section, and you can toggle the dropdown to view the current app in the browser using types of colorblindness.

Colors create a story by conveying certain emotions, but as designers and developers, we have to go beyond just the use of color to ensure that we captivate our entire audience. Iconography can also be a helpful tool to work in tandem with color when appropriate, because the visual representation does not rely on color alone. Accounting for colorblindness is just one of the ways we can make our apps more accessible. It doesn't take a lot of additional time, and we owe it to our community to make accessibility a priority.

Sources:

https://iristech.co/statistics/
https://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/

React vs. Svelte: What's the Big Difference?

Caity Opelka — Mon, 22 Feb 2021 14:31:44 +0000

As graduation day from coding bootcamp draws nearer and nearer, I have begun to look around for additional frameworks and other tech to add to my knowledge base. Most of my experience during bootcamp has relied on utilizing React, and now that I have had a fair amount of practice with it, I'm eager to see how it compares with other frameworks. One name that seems to be abuzz is Svelte. Although it is relatively new (born November 2016), Svelte appears to have a great reputation and high developer satisfaction rates.

Upon first look, both React and Svelte are component-based, so React developers should be very familiar with how things are grouped and the concept of importing files where needed. One thing to note is that the syntax may take a little bit of adjustment time for a new coder, but overall seems pretty easily understandable. Because the styling is also done in the components, the risk of side effects is low as style changes made to one component do not affect its parent or children.

In the example below, you can see the familiarity of the syntax. The content between the <script> tags can be compared to React's constructor method, and the content between the <main> tags can be compared to React's render method. The <style> has its own separate tag in Svelte. The click handlers also closely resemble the onClick in React, but you'll notice the formulation of the concatenated string is denoted by $: rather than declared another const.

<script>
    const firstName = ‘Bugs’;
    const lastName = ‘Bunny’;
    let snack = ‘carrot’;

    $: fullName = `${firstName} ${lastName}`;

    const handleClick = () => snack = ‘cookie’;
</script>

<main>
    <h1>Hello {fullName}!</h1>
    <p on:click={handleClick}>Would you like a {snack}?</p>
</main>

<style>
    h1 {
        color:#ff3e00;
        text-transform: uppercase;
        font-size: 3em;
        font-weight: 200;
    }
</style>

What's the difference?

React is fast, but Svelte is faster. One main difference between Svelte and React is that Svelte is a compiler, while React uses the Virtual DOM to compile the code.

Svelte turns the application into vanilla JavaScript during build time before updating the DOM (the real DOM). On the other hand, React updates the DOM by use of diffing. Diffing is the process of comparing the previous version of the render (the real DOM) with the latest updates to the Virtual DOM. Once the browser has compared the real DOM and the Virtual DOM, it updates the user interface with the differences it found. Because Svelte does not use the Virtual DOM, that is one less step that has to run before a change is reflected in the browser. For a visual representation, see the image below.

A deterrent for young coders may be that because Svelte is still relatively new, the community is much smaller than React's. This means that if you get stuck and you are looking for scenarios that may be similar to what you are experiencing, there are a lot less resources out there currently to serve as guidance.

But that shouldn't stop you from giving Svelte a try.

There's no harm in toying around with new tech. Svelte may be young but it is becoming increasingly popular, so go ahead and get your hands qwerty.

Sources:

https://www.simform.com/react-vs-svelte/
https://svelte.dev/
https://reactjs.org/

OAuth: Oh... so I AUTHorized What?

Caity Opelka — Tue, 12 Jan 2021 19:09:46 +0000

We've all seen the authorization box pop up, but most people tend to click through quickly to get the result that they want. Here's an example of what a user sees on screen with a simple verification through OAuth which will allow Codewars access to a given scope of data from a user's Github account.

Let's explore an example of two services interacting without OAuth. A user - we'll call him Jack - wants to print a photo through a printing service app but the photo is stored in another app like Google Drive. Before authorization between services was available, the only way for the printing app to get access to Jack's photo would be to ask him to log in to Google with his Google credentials on the printing service's app.

This is clearly problematic. Not only does the printing service have access to everything in Jack's Google account, but Jack has to trust that the printing service will surely, definitely, immediately log out of his account when the service is complete. He'll also have to trust that the printing service will throw away his credentials and absolutely never do anything malicious.

Let's run through the flow again. Jack tells the printing service that he wants to use a photo from his Google account. The printing service says "Okay, let me grab the photo for you from your Google account."

The printing service then goes to Google and asks, "Hey Google, can you give me this photo from Jack's account?" Google says, "No, I don't know you, so I can't trust you with Jack's information, but let me ask Jack what he would like me to do".

This is where OAuth comes into play. To Jack, it appears that Google is asking for his consent, but Google is actually going to use OAuth to verify that client (the photo printing service) is authorized to access the user's data. Google tells OAuth that it needs consent from Jack to be able to give the client app access to his account.

OAuth then goes to Jack for confirmation. "Hey, this printing company is asking for access to your account. Take a look at this list of things that they would like to access, and respond with your consent or rejection".

Jack gives his consent with the click of a button, and OAuth sends the printing service an authorization token.

The printing service takes this token to Google and says, "Hey Google, can you give me this photo from Jack's account? Here is the token that says I have access to this scope of things". Google says, "Sure, let me grab that for you".

What's important here is that Jack didn't have to enter his Google credentials into the printing service. Because of that, but the printing service only received access to Jack's photos rather than Jack's entire Google account. The original purpose of OAuth was to authorize the use of one service to another without the user giving more information than is necessary. Because it is an authorization tool between services, it can also be used to verify authorization between microservices within the same app. This provides more security by compartmentalizing permissions of the data rather than storing everything in one central location.

Sass: CSS That Sparks Joy

Caity Opelka — Tue, 05 Jan 2021 05:22:48 +0000

SassScript, or Sass, is changing the way we style. As developers, we're always trying to find ways to increase efficiency. Rather than combing through long CSS files with seemingly no structure, Sass introduced a way of streamlining code with some very familiar syntax. It's so familiar, in fact, that you could write all CSS code in an SCSS file, and it would be completely compatible. Of course, there's no point in doing that, but the idea is that you don't have to learn an entirely new language to be able to use Sass. You can make small changes as you get more comfortable, and create more efficient code as you learn all of the tricks Sass brings with its syntactically awesome style sheets.

Sass is a preprocessor. In other words, it's an extension of CSS, but it's a format that cannot be read by the browser. Because of this, you'll need a compiler, which will take the SCSS you have written and turn it into a CSS file. If you're using VS Code, there is an extension that you can install called Live Sass Compiler. If you don't have VS Code, there are several other ways to get started at sass-lang.com.

So what's so great about Sass? For starters, let's say you have a CSS file containing all of your brilliant code, and your client wants to change the color of the text. Think about all of the different selectors where you have used this color and must now hunt down and change them all. Clearly, this is a violation of the D.R.Y. (don't repeat yourself) method. Wouldn't it be more efficient to only have to change the color in one place? With Sass, you can create variables to replace your repetitive code. Variables start with a '$' prefix like below and can then be used as the property value.

$color-primary: #8429FF

p {
    color: $color-primary;
}

You can also group things by nesting, which has a visual similarity to the nested elements you see in HTML. If you style an anchor selector in CSS, the style will affect all anchors on the page. If you want to style the anchors of the navigation bar in a different way, you can easily target the nav by nesting with Sass. Only the anchor tags in the nav will be affected by this styling. Of course, this is just one example, and you can nest other areas besides the navigation as well.

nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    li {
        display: inline-block;
    }
    a {
        color: $color-secondary;
        text-decoration: none;
    }
}

This is a really easy way to create separation both functionally and visually. Another way to form groups using Sass is the module system. Introduced in 2019, this isn't dissimilar from CSS in that it is possible to use multiple CSS files in one app, however, when using more than one file, CSS will have to make multiple HTTP requests as it renders your page. On the other hand, Sass modules are compiled into one big CSS file.

To denote a module, the file name must begin with an underscore. This lets the compiler know that the file is only a partial. Let's say you want to have a separate file to store the branding colors. Create a new SCSS file using the underscore prefix.

_branding.scss

In this file, you may have some variables relating to the color scheme. If you want to use any of the colors from that module in another module, load them with @use and the file name. Then reference the namespace, based on the file name when referring to the variable.

@use 'branding';

body {
    background: branding.$color-primary;
}

If the file name is particularly long, you can also shorten it using 'as'. Though the above 'branding' is not a particularly long name, we'll use it again below as an example.

@use 'branding' as brand;

body {
    background: brand.$color-primary;
}

Note that as of October 2020, Sass announced that the @import method of accessing modules is deprecated and will be soon phased out. When using @import, the modules are available globally which causes unexpected side-effects if, for example, different modules contain the same name. To utilize modules, access them with the @use method above.

Another way to create reusable styles is a mixin. Think about how many times you use code to center something. With Sass, you can write the code once and implement it in multiple areas. To use the mixin, simply add an @include and the name of the mixin where you would normally write the property.

@mixin center() {
    display: flex;
    justify-content: center;
    align-items: center;
}

header {
    @include center();
}

Mixins can also take in parameters to make them more dynamic. Adding to the example from above, you can add a parameter and make a decision later about how to appropriately center the selector depending on its use. Notice that the parameter starts with a '$' prefix.

@mixin center($direction) {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: $direction;
}

header {
    @include center(column);
}

Mixins bear a resemblance to functions which are also a feature of Sass, but they differ in that functions have to return something, and they don't use @include. Let's look at a very handy trick I learned from Kevin Powell. Maybe you have been tinkering with colors and you can't decide whether you like a dark or light background but every time you change it, you have to change the color of the text for visibility. You can create a function that will handle the change for you. With Sass, you can even use conditional statements. The below example evaluates the lightness of the background color passed in and returns the appropriate value.

@function text-color($bg-color) {
    @if (lightness($bg-color) > 60) {
        @return #555;
    } @else {
        @return #fff;
    }
}

One more key feature of Sass to note is the ability to use inheritance. You can pass properties of a selector to other selectors by using @extend. Just like CSS, the file is read top to bottom, so if code is followed by a property of the same name, the bottommost code will be run.

h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    text-align: center;
    padding: 10px;
}

h4 {
    @extend h1;
    font-weight: 400;
}

Above are just a few of the basic (or not-so-basic) features of Sass to make your code cleaner and more efficient. You can find plenty of other tips and tricks to explore at sass-lang.com.

Getting to Know ESLint

Caity Opelka — Wed, 23 Dec 2020 19:10:26 +0000

When I started learning Javascript, I was encouraged to use ESLint, but I had no idea what it was... and I had no idea that it wasn't working until my instructor pointed out that my linter wasn't catching any of my errors. I reinstalled the extension in VS Code and suddenly I was amazed. It is a node-npm based tool so you will need to install node in order to run ESLint. Then you can install ESLint globally by finding the extension in VSCode or entering the command in the terminal

npm install -g eslint

What is a linter? The name is very telling. A linter is a helpful debugging tool that sifts through your code looking for patterns of behavior. If it catches an irregularity, it will alert you with the type of error and its location in the document. Not all errors will break your code, but ESLint is there to tell you when any appear and help you to follow best practices.

Before ESLint came around, a common way to check code for these kinds of errors was by copying the code and pasting it into a website like JSLint, but now we can do it seamlessly inside of the text editor.

Nothing comes loaded by default, but they do have a package of recommended rules that can be easily added to get you started. You can create a new eslintrc.js file, and add the recommended rules inside or build your own set. If you take a look at the documentation of ESLint's rules, the checkmark denotes all of the rules included in that package.

module.exports = {
  "extends": "eslint:recommended"
}

Each rule in the documentation has tips for usage and reasons why you may or may not want to use it. You can add more rules or override recommended rules, using a value of 0 to turn the rule off, 1 to show a warning, and 2 to show an error.

module.exports = {
  "extends": "eslint:recommended",
  env: {
    "es6": true
  },
  "rules": {
    "no-var": 1
  }
}

Above, you can see an example of adding an ES6 environment for the use of arrow functions and other exciting ES6 features. There's also an added no-var rule that is set to show a warning. Now if you were to try to declare a variable with the keyword var, you can trust that ESLint will catch it with a not-so-subtle hint just like those squiggly lines under misspelled words on all of the papers you stayed up late to write over the years.

In VSCode, The error will appear in the problems panel, showing its location in the file. You can click the error in the panel and it will bring you to the actual line of code where you can inspect it and make any changes. It's simple and straightforward but who wants to sift through errors like trailing white space or missing semi-colons? To increase efficiency, you can add auto-fix in your global settings to take care of small errors and cut down on time spent searching for each individual error. To do this, navigate to your settings.json at Code > Preferences > Settings (Command + ,) and type eslint into the search bar. This is where you can add an auto-fix.

"editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
    }

If it catches a larger error like a declared variable that is never used, ESLint doesn't know what you would like to do with that variable so it will remain until you fix it. If it finds an error that can't be auto-fixed, you can check the "problems" tab in VS Code and it will give you a short explanation of the error found as well as where to look for it in your file. Double-clicking on the error in the problems tab will bring you directly to the line where the error exists.

In the beginning, we installed the linter globally but in the short example above, we created a file in the root folder of the project. Because different environments have different rules, this makes it easy to pinpoint errors based on that specific environment. It also makes it easier to transition files when working with a team. So you've made your ideal configurations, and you're feeling pretty great about it. Your files are wonderfully clean. Then one of your teammates makes some changes, and when you pull the new file, your linter finds some errors to clean up. The beauty of using ESLint in your project vs. globally is that you can share rules with your teammates so you all have the same workspace. If you don't create a new set of rules in the project's root folder, it will just fall back to the global settings.

As a new developer, ESLint has been very helpful as a guide to learning best practices. Because the errors are so apparent, it's easy to see how to properly form your code and make less errors as you get more practice.

Javascript Spread Operator... Putting it Together

Caity Opelka — Mon, 14 Dec 2020 14:56:03 +0000

The spread operator, which is denoted by three dots (...) is defined on MDN as syntax that "allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected."

Let's break down what that means, starting with function calls.
In the example below, there is a function that accepts three arguments, and there is an array of elements. If you were to pass the array to the function as an argument, it would take the entire array as the first argument and evaluate to undefined for the other unused arguments. Instead, you can use the spread operator before the array, which essentially removes the brackets and passes the array elements as arguments to the function. Note: The array in this example contains more elements than there are function parameters. In this case, because we have three parameters, the function will take the first three elements from the array as arguments.

Next, let's look at how the spread operator works with arrays. One very handy use is to make a copy of an array. In the example below, notice that largeDogsReference is pointing directly to largeDogs. This is not a copy, but rather a reference to the same array. Any changes made to either of them will affect both. You can see that if we compare largeDogsReference to largeDogs, we can expect an output of true because they are the same array. To make a copy rather than a new reference, simply use the spread operator in front of the array name that you would like to copy, and enclose it in square brackets. Now if we compare largeDogsCopy to largeDogs, we can expect an output of false because they are now two different arrays, even though they currently have the same elements.

Be careful. When using the spread operator to make a copy of an array, it only goes one level deep. If the array that you copy contains other arrays or objects, those elements will still be pointing to their current reference.
Order matters. The order in which you add the arrays is the order in which they will combine. In the example below, you can see that if we switch the order of the two dog arrays, the order of the elements will also switch.

Now, you might be wondering, "Why not just use the concat() method to merge the arrays?" In the example below, you can see that since this is just a regular array, the advantage to using the spread operator is that you can add in any other elements as well.

Lastly, we can use the spread operator with objects. Just as we did with the elements of an array, we can use spread to copy the keys of an object. This is demonstrated in the example below.

Once again, order matters. The spread operator will overwrite the values depending on its placement.

The spread operator is very useful whether it's passing arrays to a function, adding information together in arrays or objects, or just for making copies of arrays and objects so we don't make unwanted changes to the original reference.

Well-Baked Pseudocode

Caity Opelka — Thu, 19 Nov 2020 14:58:30 +0000

If you want to bake a loaf of bread, and you pull out the recipe card, the directions won't begin with "make bread". Of course, we're going to make bread but the point of a recipe card is to provide guidance as to how to make bread. It's broken down into simple parts, and as you complete each step, the dough starts to take form. The same can be said about pseudocoding.

What is pseudocode?
Pseudocode is a list of steps that illustrates how to achieve the desired result. The steps are written in plain natural language so they can be read and understood easily and can be translated into any programming language. You should pseudocode as if you're walking yourself through the objectives of the problem. It may seem tedious to pseudocode for simple logic, but it provides good habit-forming practice and will certainly help when constructing more complex problems.

Let's write some pseudocode to find the sum of a range when given an array of two numbers, and we want the range to include the starting and ending numbers.

First, it's helpful to identify the input(s) and expected output(s), including the expected datatypes, as well as any constraints or edge cases that may require special handling.

Next, you can start writing the logic for how you want to achieve the desired output, with each step serving as a stand-in for a line of code. If a line of pseudocode becomes lengthy, you may want to take a second look to see if it should be broken down into smaller steps.

Once you have a solid list of instructions, then you're finally ready to write the code, and you're on your way to a fully baked solution. Now for the fun part! Let's go ahead and fill in the spaces we left below each line of pseudocode with actual code.

Now you might be thinking that sure looks like a lot of pseudocoding for a short amount of code, and you're right, but maybe you've written some code but didn't account for a specific edge case. With the pseudocode steps included as comments, anyone is able to follow your thought process and can easily make suggestions. It's tempting to want to start to code immediately but we'll save a lot of time in the end by setting ourselves up for success from the start.