Featured

7 Days 7 Websites

I don’t usually participate in daily challenges, but #7Days7Websites challenge by Florin Pop was one I could get behind. For one week, all I had to do was build a website using any framework with any content that I wanted and my share progress.

via GIPHY

Since graduating from Flatiron School a few weeks ago, I missed being the structure of being in class. I took a break from coding to decompress and come back refreshed. At the same time, I missed coding for the front end and want to experiment with new technologies. I have a backlog of ideas, so this challenge is a good way to jump back in.

I’ll start, Sunday, May 17th, and will be sharing my process on my blog and on Twitter. More information about the #7Days7Websites challenge can be found here.

Want to Improve Your Coding Skills? Join the #7Days7Websites Coding Challenge

#7Days7Websites Projects

  1. Oh, Hex! A random hex color generator
  2. Scoville, fun with peppers and gradients
  3. Bubble Wrap. Virtual bubble wrap to pop over and over again.
  4. Pricing Component. Frontend Mentor Challenge

Link: Auditing Your Email Design System

My second article for the Email on Acid blog went live last week.

In this blog, I talk about design systems and why doing an audit of your existing emails before you start updating your design system can benefit your project.

I’d love to know your thoughts on the audit then build approach.

Bubble Wrap

It’s day 3 of #7Day7Websites! This is another fun one (ok, maybe it’s more of an app than a website). It’s bubble wrap. That you can pop. Because that’s fun, right?

When I had this idea, I knew that using React to manage the state of each bubble—popped or unpopped—was the way to go. My Bubble component only needed this.

  state = {
    popped: false,
  }

And my render function looked like this:

render() {
  return(
        <div className="bubble"></div>
      )
    }
  }

Ok, so that’s just a div but with some CSS…

.bubble {
  background-color: #5fdde5;
  width: 50px;
  height: 50px;
  border-radius: 25px;
}

That div now looks like a bubble.

It’s a bubble, ya’ll!

So many bubbles

Now, I need more than a handful of bubbles (things are really stressful now, ok), but repeating <Bubble /> over and over within <App /> was not ideal.

If I create a <BubbleContainer /> component and loop over as many instances of <Bubble /> that I want, I could then render the one <BubbleContainer /> component to <App />.

The <BubbleContainer /> class component looks like this:

export default class BubbleContainer extends React.Component {

  render() {
    let rows = [];

    for (let i = 0; i < 96; i++) {
      rows.push(<Bubble key={i}/>)
    }

    return (
      <div className="container">{rows}</div>
    )
  }
}

With some styling on the container class, the app now looks like this:

Click to Pop

Each <Bubble /> has a state of popped which is false by default. When clicked, we want to change the value of popped to true and give a visual indication that the state has changed. And, we only want the state to be changed once, since un-poppping a bubble isn’t a thing.

We’ll update the return statement to include an onClick event which fires a handleClick function:

  handleClick = (e) => {

    if (this.state.popped == false) {
      this.setState({
        popped: true,
      })
    }

  }

Since we want a popped bubble to look different from an unpopped bubble, we can use an if statement to render a <Bubble /> with different classes, that we’ll style with CSS:

render() {

    if (this.state.popped === false) {
      return (
        <div className="bubble unpopped" onClick={(e) => this.handleClick(e)}></div>
      )
    } else {
      return (
        <div className="bubble popped" onClick={(e) => this.handleClick(e)}></div>
      )
    }

  }

Our popped and unpopped classes changes the background color.

Putting everything together, Bubble Wrap app looks like this after clicking (or tapping) a few bubbles:

Look at those bubbles!

Recap

Overall, this was a fun way to test if I remember how local state works in React. And, deploying a React app to Netlify was surprisingly easy with this app, that I feel less intimidated about doing this with my other projects.

From a user perspective, I’d like to have a button or link to get a fresh sheet of bubble wrap (reset the state of all bubbles to popped: false). Some variances in color would be nice, so would some shading/depth to give a more 3D effect. And, technically bubble wrap has a offset by row as opposed to being perfectly lined up.

Considering I spent about two hours building and deploying this, I’m really happy with how it turned out!

Scoville, fun with peppers and gradients

For day 2 of #7Days7Websites, I may have bitten off more than I could handle, but I still had fun. I wanted to build and design a mobile-first website, without any frameworks and do some experimenting with gradients.

Most likely inspired by last night’s enchiladas, I choose the Wikipedia entry for the Scoville scale as the source for my content. Since the scale goes from 0 (no heat) to 3 million (lethal, levels of heat), it lends its self to organization with bands of color.

At first, I had solid bands of color for each category, mildly pungent, moderately pungent, etc, but it seemed choppy. With solid colors as a fallback, a linear gradient from light green, to dark red, broken up by section is what I was looking for.

Cursor

Another thing I had been wanting to try, was changing the default cursor. Was it possible? Yes, but not easily implemented. It works best when linked to an image. I wanted to use the hot pepper (🌶) emoji, so I had to format it as an image, instead of using it as a text string.

body {
cursor: url("../assets/favicon_io/hot-pepper.png"), auto;
}

Recap

Overall, my plans for today’s project were too big to realistically get done in time (while also keeping up with other commitments). It made me remember how involved “building a website” can be. In the future, I’ll cut down what I want to build or try to 1-2 small things as opposed to a whole, featured filled website.

While I am happy that I was able to remember how media queries and ems work on my own, there are improvements I’d like to make.

Being able to jump from section to section would be easier than all the scrolling (especially for mobile). Anchor links are straight forward to implement, but I wanted a smooth, scrolling effect. Using the function scrollIntoView() could work, but it’ll take additional testing that I, unfortunately, ran out of time for.

Overall, if you like gradients and want to see which peppers might kill you, take a look at Scoville.

Oh Hex! Building a Random Hex Generator with Javascript

For my first #7Days7Websites project, I revisited an old idea for a random hex value generator.

Creating a Random Hex Color

I had tried to build it with Javascript, then Ruby, but for today, I wanted to try a Javascript method again. In the past, I was able to randomly full an item from an array of valid hex values, but my function ended up repeating the same, random character 6 times.

What I needed to happen was randomly get a character 6 times and then append them together. What the Hex!? A tutorial from Emily, another Flatiron School graduate, had a solution that worked.

generateRandomHexColor = () => {
  const hexadecimalIntegers = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
  let hexColor = "#"

  while (hexColor.length < 7) {
    hexColor += hexadecimalIntegers[ Math.round( Math.random() * hexadecimalIntegers.length ) ]
  }

  return hexColor
}

Calling generateRandomHexColor()3 times in a row would generate results like this:

  • “#a7cb4c”
  • “#19514f”
  • “#5929e8”

Updating the Background Color

I had a basic, HTML 5 document as a shell for this project. To test if I was able to update the background-color of the body element, I did a quick test. I could query the body element with let body = document.querySelector("body"). Then, I could change the style with body.style.backgroundColor = "pink".

Cool! Now I needed this to work dynamically.

Since the generateRandomHexColor function returns the hex value as a string, I could call the function as the value when changing the color assignment. body.style.backgroundColor = generateRandomHexColor() did exactly what I looking for.

Undefined Values

On occasion, generateRandomHexColor() would generate an invalid hex value like #67eundefined. Well, since 6, 7, and ,e were valid characters, the function its self was working, but was getting an invalid/undefined value. So, I took a closer look at the random part of the generateRandomHexColor() to see what was happening.

Math can get weird with Javascript. One thing to know is that Math.round rounds up or down to nearest integer. Math.random generates a float between 0 and 1. Multiplying it by the length of hexadecimalIntegers gives us a number between 0 and the length of the array.

Since Math.round can round up or down, the end result could be the number 16. Since counting arrays starts at 0, hexadecimalIntegers[16] would return undefined, since there is no 16th spot in the array!

Changing Math.round to Math.floor resolves this by always rounding down. This way, the largest number that can be randomly generated is 15, which is the last item in the array.

Conclusion

In the end, I’m happy with how Oh Hex! came out. I was able to generate a valid, random hex color with Javascript and dynamically update a DOM element with that color.

Oh Hex! example featuring the hex value #d65ac3 as the background color.

For future improvements, I would like to make the hex value an element that can easily be copied to the clipboard and for the body background color to be updated as a variable, instead of inline (if that’s possible)