DEV Community: Nancy

Refactoring code from a year ago helped me with my imposter syndrome

Nancy — Fri, 23 Oct 2020 20:59:11 +0000

As a self-taught front-end developer while also freelancing in technology research, learning to code has been a sloooow burn. Looking back on some code from a year ago, when I first started learning modern JavaScript, I can confidently say that a year ago my code was a cluster-f***. The process of refactoring the code a year later really highlighted how much I learned and help me deal with imposter syndrome

TL;DR

I had three key wins that helped me feel more confident:

I know more than I thought I did, like applying the MVC pattern to code and how to structure code clearly
I can figure out my own solution by using tools I'm not familiar with like pug and Node by reading documentation and doing research
I overcame my fear of Webpack

The project I'm refactoring is called Remixoji. Remixoji was a vanilla JavaScript webapp I was building to learn about modern JavaScript. With Remixoji, I ended up in a rabbit hole of learning how to manipulate Canvas and SVG elements and the DOM in general. Remixoji takes different aspects of emojis to create a new emoji

Remixoji enables users to takes different aspects of emojis from Twitter's open source emojis to create new emojis

I knew then that the code was pretty poorly written, but I had not yet learn how to make it better, so it never went into production.

Old code where basically everything ran from a single file: [Github Gist]

New code with everything neatly structured: [Github Repo]

Remixoji [Live site]

What I learned by refactoring Remixoji

1. Using Class syntax with MVC pattern

When refactoring the code I put relevant functions (including event handlers) and variables into logical classes using the ES6+ Class syntax with a simple MVC setup. This gave me the opportunity to better understand the MVC pattern and also to write Classes from scratch

Old index.html file

<html>
    <!-- DOM elements -->
    <script>
        /* a whole bunch of functions not in any particular order */
    </script>
</html>

New script.js file structure, split out from index.html

class EmojiPart {
    // This class ensures consistency of an EmojiPart object
  constructor(type, id) {
      this.type = type;
      this.id = id;
  }
}

class Remix {
    // Remix is the model which takes care of the data for the app
    constructor() {...}
    addPart(part) {...}
    removePart(partType) {...}
    removeAllParts() {...}
}

class View {
    // The view takes care of displaying the app based on the data from the model
    constructor() {...}
    displayRemix(remix) {...}
    updateSVGDownloadURL() {...}
    // more methods...
}

class App {
    // App is the controller which tells the model to update in response to user input
    // App also providers a handler for Remix that tells View to update based on Remix data
    constructor() {...}
    handleAddPart = (partID, partType) => {...}
    handleUpdateVivew = () => {...}
    // more methods...
}

Win #1

My original code had no real structure or pattern, but a year later I can apply MVC using Classes! 🙋🏻‍♀️

2. Using build scripts and Pug to generate HTML

My Remixoji scripts from one year ago inserted SVGs into the DOM on the client side. It would fetch a JSON file that listed all the SVGs that needed to be inserted and then get each SVG and insert it into the DOM. This approach was unnecessary since the SVGs I'm using do not change—they can be part of the static HTML

Previously my code dynamically inserted SVGs on the client-side using JavaScript; there was no build process

Using Pug I was able to build an html page with all the SVGs inserted. With the pug package and a short script I got node to dynamically pass in the SVGs inline to the pug template via the list of SVG files listed in the original JSON file I had used before refactoring

For each of the SVG files listed in the JSON, the script pulled in the file data, and pushed it to the pug template so it can be inserted as inline SVGs. By building the HTML page with all the SVGs already in it I also cut out a lot of the client-side JavaScript that I was using for fetching and DOM manipulation

When refactoring I dynamically inserted SVGs inline during the build process

Win #2

I didn't know much about Pug and I didn't know how to use it in Node, nor would I consider myself a Node expert, but was able to read the documentation and do some googling to create a unique solution for this project. Win! 🙋🏻‍♀️

3. Rolling my own webpack config

I had read up a bit about webpack through React tutorials, but never wrote my own. Refactoring Remixoji is a great opportunity to write a basic webpack.config.js file because:

I needed to transpile my script.js file to ES5 using Babel so it would work for most users; not just people running the latest and greatest browser versions
I wanted to minify my script.js and style.css files to improve performance for the user

I got the basics setup to compile my ES6 JavaScript to ES5 and to minify, but there's still more to learn in terms of fine tuning webpack.config.js such as working with different types of sourcemaps

Win #3

6 months ago I was so intimidated by Webpack that I metaphorically hid under the sheets. I went so far as to use Gulp instead, but during my refactoring of Remixoji I decided it was time to start reading their Getting Started and Documentation. While I can improve my Webpack setup, getting started is such a win! 🙋🏻‍♀️

Conclusion

Refactoring Remixoji was a great learning experience, and it also meant I finally got to put some old code in production in an efficient, structured, and performant way. What was once an html file with a HUGE script section that did everything client-side became a project that builds a performant webapp without any frameworks that most users can use on their desktop and mobile devices

Five things I learned by building my own shopping cart and checkout with Gatsby and Stripe

Nancy — Tue, 13 Oct 2020 19:48:20 +0000

TL;DR

Don't build your own shopping cart and checkout experience unless it's a learning exercise or your client has a big budget

If you don't need a fully customized shopping cart and checkout experience then consider Snipcart to save on dev time
If you're using Gatsby or React and need a customized shopping cart consider using use-shopping-cart rather than building a React shopping cart from scratch
If you need a fully customized checkout experience then you'll need to use Stripe's PaymentIntent API instead of Stripe's pre-built Checkout page. Budget more time for this

Check out my Muffin Plant Shop demo online store repo

1. Gatsby makes it easy to get something up fast

For the small demo store I was working on, pulling product information from Markdown files was easy to setup by adapting Gatsby's step-by-step tutorial. Gatsby is built on React so there's lots of third-party components like use-shopping-cart instead of building things from scratch. Gatsby sites also shield you from CMS vulnerabilities (ahem Wordpress)

2. No easy inventory solution with Stripe

At some point I think Stripe offered inventory management, but that doesn't seem to be the case anymore since the Orders API has been deprecated

3. A custom checkout experience requires using Stripe's PaymentIntent API

If you want to design your own checkout experience, then you'll have to use the PaymentIntent API and Stripe Elements. Stripe's annotated code tutorial covers this pretty well, you'll just have to adapt the server side code if you're using a serverless functions. For more details check out my notes and code for my Netlify Function

4. Stripe's pre-built Checkout page is easy—but you still need a little bit of server code

If you're ok with using Stripe's Checkout page (or convince your client to) then its super easy to offer card payments and digital wallets like Apple Pay. Stripe's documentation for Checkout is nicely laid out, and Netlify also has a tutorial on setting up a Netlify Function for Stripe Checkout. Just remember that customers will get redirected to Stripe to checkout

5. Freelancers and side-hustlers should seriously consider Snipcart

If you're building an online shop for your side hustle or a small business client Snipcart could be a better solution. Based on my research here are some pros:

Snipcart offers inventory management if you don't already have a solution
Snipcart already has a shopping cart if you don't need a fully customized cart
Snipcart checkout does not redirect customers to another site
If you just need a shopping cart and checkout then no server code or serverless functions are needed

I will definitely be considering Snipcart for my own online stores in the future

References

3 tips for working with dates using vanilla JS

Nancy — Fri, 28 Aug 2020 20:08:19 +0000

Ok, first off, I know that moment.js exists and I do use it. This article outlines a few tricks I learned by creating a calendar using the Date object (MDN web docs) in (vanilla) Javascript. These tips might be handy if you need to do one-off things with dates

Vanilla JS Calendar

First day of the month

Create a new date object with the current date, then set the day to 1 with setDate()

const startDate = new Date();
startDate.setDate(1);
console.log(startDate); // Date object representing first day of current month

Last day of the month

Since the last day of the month can be different (28, 29, 30, 31 — ugh February!) this one isn't as straightforward. We first have to set the month to the next month and then call setDate() with 0

const endDate = new Date();
endDate.setMonth(endDate.getMonth() + 1);
endDate.setDate(0);
console.log(endDate); // Date object representing last day of current month

Formatting dates

With the Intl.DateTimeFormat (MDN web docs) object it is really easy to format dates—and you can also format them for different languages too

const today = new Date();
const monthYearOpts = {
    month: 'long', 
    year: 'numeric'
}

const monthYearString = (new Intl.DateTimeFormat('en-US', monthYearOpts)).format(today);
const monthYearStringFrench = (new Intl.DateTimeFormat('fr-FR', monthYearOpts)).format(startDate);

const dayDateMonthOpts = {
    weekday: 'short', 
    day: 'numeric', 
    month: 'long', 
    year: 'numeric'
}
const dayDateMonth = (new Intl.DateTimeFormat('en-US', dayDateMonthOpts)).format(startDate);

console.log(monthYearString); // August 2020, for example
console.log(monthYearStringFrench); // août 2020, for example
console.log(dayDateMonth); // Sat, August 1, 2020, for example

It's worth noting that the level of customizing is not as granular as something like moment.js. For example Intl.DateTimeFormat automatically places in punctuation automatically based on the language and region.

Conclusion: Built-in Javascript objects work in a pinch for date manipulation and formatting

It's not as handy for more complex date manipulations but it works in a pinch of you need to do something simple. Even creating the Vanilla JS calendar was fairly straightforward

References

Overlaying elements with CSS Grid is so much cleaner than with position! 😲

Nancy — Fri, 21 Aug 2020 18:11:22 +0000

When I searched for ways to overlay content I usually come across the absolute position method, which by the looks of it has been around for a while. And then I learned about CSS Grid and how we can put multiple elements in the same grid area—and they will just lay on top of each other!

CSS Grid overlaying content

This method requires some knowledge of how CSS Grid works and the CSS Grid course by Wes Bos is a great place to start. Wes briefly discusses this method in one of his course videos.

With CSS Grid you can place one or more elements in the same grid area. Elements set to the same grid area will just overlay on top of each other. The following is a step-by-step on how to set this up

Add your html elements. Create a container, this will be your 'grid container', and in it add the content element and the overlay element. In this example the container aptly has the class grid-container and we will have the overlay element with class item-grid-overlay and a content element with class item-grid-content. I've put a placeholder image in the content element
```
<div class="grid-container">
  <div class="item item-grid-content">
    <img src="https://via.placeholder.com/250?text=Image">
  </div>
  <div class="item item-grid-overlay">❤️</div>
</div>
```
Make the grid-container a 'grid container' by giving it the property display: grid. Doing this will automatically make the child elements 'grid items'. This means you do not have to do anything to item-grid-content and item-grid-overlay to make them 'grid items'.
```
.grid-container {
  display: grid;
}
```
Define a 'grid area' in the grid-container using grid-template-areas. In this example, I create just one grid area called overlaydemo, but the grid-template-areas property enables you to define as many areas as you want. See the documentation for grid-template-areas on MDN web docs
```
.grid-container {
    width: 250px;
    display: grid;
    grid-template-areas: "overlaydemo";
    /* create one grid area called overlaydemo */
    /* you can give your area a different name */
}
```
Place both of the content and overlay elements in the 'grid area' you defined by setting the grid-area property for each of item-grid-content and item-grid-overlay to grid-area: overlaydemo. Use the same name you defined in .grid-container, but without the quotes. Since item-grid-overlay is after item-grid-content in the HTML it will be on top by default
```
.item-grid-content {
    grid-area: overlaydemo;
    /* use the same name you defined in the .grid-container */
    /* notice that we don't use quotes */
    }

.item-grid-overlay {
    grid-area: overlaydemo;
    /* place the overlay element in the same grid area as the content element */
    }
```

That's it! For a bare bones basic implementation that's all you need

Example

References

CSS Grid: auto is greedy until it's with fr

Nancy — Fri, 12 Jun 2020 18:54:07 +0000

Disclaimer: this article assumes you have some understanding of CSS Grid. If not, the CSS Grid course by Wes Bos (free) and the CSS Grid Guide by CSS-Tricks are both great resources.

TL; DR: when setting a grid template, such as using grid-template-columns, auto is "greedy" for left over space except when it's used with fr units. When auto is used with fr, the auto row(s)/column(s) takes up just enough space to fit its content and any remaining space is given to the row(s)/columns(s) defined with fr units.

Note: All the examples in this post are available on Codepen

What is the `fr` unit?

The fr unit represents a fraction of the available space in the grid container. For example setting grid-template-columns: 1fr 1fr 1fr; would create three equally sized columns that grow and shrink with the container. Also, fr can be greater than 1, like grid-template-columns: 2fr 1fr; which sets the first column to be twice as wide as the second column

What does `auto` mean in CSS grid?

The auto keyword means to take up the available space to fit the content. If there's space left over then auto is "greedy"; it will take up space to fit the content plus the maximum left over space it can take (EXAMPLE 1). The exception is if auto is used with fr. If min-width/min-height is set on the grid item then the column would be at the smallest the size set by min-width/min-height (EXAMPLE 2)

When `auto` and `1fr` have the same effect

If the grid item's contents takes up the same amount of space then auto and 1fr has the same effect, which is to evenly take up the available space (EXAMPLE 3)

Using `auto` and `fr` together

If auto and fr are used together to define the grid template then auto will take up the space it needs for the content. And the remaining space is divided up to the column(s)/row(s) defined by fr units. The auto defined column(s)/row(s) won't get any more of the leftover space. (EXAMPLE 4)

References

Cover image: by Sharon McCutcheon on Unsplash

Highlighter effect: Adding box decorations—like padding—to inline elements that wrap onto multiple lines

Nancy — Fri, 08 May 2020 14:23:14 +0000

As a CSS learning exercise I took the design of blogTO's homepage and coded a clone using HTML and CSS. The titles for each article have a "highlight" effect in white, which seemed easy enough until they took up multiple lines

Highlighting text is easy with `<span>`

Highlighting is easily added by wrapping the text you want highlighted with span and setting a background colour for the span in CSS. Note: span is an inline element, meaning it does not start on a new line and only takes up as much width as needed



<p>The spectacle before us was indeed sublime. 
Then <span class="highlight">came the night of the first falling star.</span> 
Waves flung themselves at the blue evening.</p>



.highlight {
  background-color: yellow;
}

Trouble comes when we start adding box decorations

When adding padding, border, margin, box-shadow, and other box decorations to inline elements (i.e. <span>) these properties are not by default applied to the element where the the text wraps onto another line

CSS for highlighting with padding and border-radius



.highlight {
  background-color: yellow;
  border-radius: 20px;
  padding: 10px;
}

The `box-decoration-break` property solves this nicely

The box-decoration-break property specifies how an element's box-decorations (i.e. padding, border) should be rendered when broken across multiple lines, columns, or pages. Options for box-decoration-break are slice and clone. slice is the default, which does not add the box-decoration when the element goes onto multiple lines. With clone, the box-decoration is applied where the element breaks into multiple lines

CSS for highlighting with box-decoration-break



.highlight {
  background-color: yellow;
  border-radius: 20px;
  padding: 10px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone; /* most browsers need -webkit */
}

Most browsers support box-decoration-break with the -webkit- prefix

Demo

Browser support

There are some limitations when it comes to browser support. Some browsers do not support column or page breaks, but most support line breaks for inline elements. Not surprisingly IE does not support it, and Edge support starts from Edge 79. Check Can I Use for details

If you need to support older browsers, a possible solution is styling three nested elements. The trick is adding an extra thick left-border on the outermost element. The innermost element contains the text, and is shifted over to the left. The middle-nested element adds top and bottom padding. See CSS Tricks for details

DEV Community: Nancy

Refactoring code from a year ago helped me with my imposter syndrome

TL;DR

What I learned by refactoring Remixoji

1. Using Class syntax with MVC pattern

Win #1

2. Using build scripts and Pug to generate HTML

Win #2

3. Rolling my own webpack config

Win #3

Conclusion

Five things I learned by building my own shopping cart and checkout with Gatsby and Stripe

TL;DR

1. Gatsby makes it easy to get something up fast

2. No easy inventory solution with Stripe

3. A custom checkout experience requires using Stripe's PaymentIntent API

4. Stripe's pre-built Checkout page is easy—but you still need a little bit of server code

5. Freelancers and side-hustlers should seriously consider Snipcart

3 tips for working with dates using vanilla JS

Vanilla JS Calendar

First day of the month

Last day of the month

Formatting dates

Conclusion: Built-in Javascript objects work in a pinch for date manipulation and formatting

Overlaying elements with CSS Grid is so much cleaner than with position! 😲

CSS Grid overlaying content

Example

References

CSS Grid: auto is greedy until it's with fr

What is the fr unit?

What does auto mean in CSS grid?

When auto and 1fr have the same effect

Using auto and fr together

Highlighter effect: Adding box decorations—like padding—to inline elements that wrap onto multiple lines

Highlighting text is easy with <span>

Trouble comes when we start adding box decorations

The box-decoration-break property solves this nicely

Demo

Browser support

References

What is the `fr` unit?

What does `auto` mean in CSS grid?

When `auto` and `1fr` have the same effect

Using `auto` and `fr` together

Highlighting text is easy with `<span>`

The `box-decoration-break` property solves this nicely