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

Coding Everyday Is Fun—Until It Isn’t.

Last month, I participated in #7Days7Websites. Created by Florin Pop, #7Days7Websites is a challenge to build a new website or app each day, for 7 days in a row. These are my reflections on what I learned about myself during that week.

Spare Time is a Privilege

Finding an hour or so to code when you work full time, have a life, plus the stress of a pandemic is tough. This is why I’ve avoided daily code challenges in the past. Previously, I’ve been wiped after a workday at a relatively chill 9-5 job. Sometimes I needed the time away from the computer to recharge and do something other than coding and critical thinking.

During the #7Days7Websites challenge, I also realized I was bad at estimating how long something would take. In the future, I’ll benefit from more pre-planning, perhaps on one larger project that I add to each day, as opposed to starting from scratch each time.

Overall, coding for fun every day is a habit that I would like to maintain, but I am not sure how to make that work for me at this moment.

I have to do what feels best for me, even if it’s not coding.

I can go on about this topic, but it is 100% ok to not be coding in every spare moment of every day.

Planning Makes Coding Easier

Knowing that “code something” was on my to-do list for the day, knowing what I wanted to do was where I struggled. What was I going to code that day?

Should I try to execute an original project or try a prompt? For either option, it would take some planning to figure out what I wanted to work on, take a guess at the scope and see if I had the bandwidth to complete it during the day.

On the days where I did have an original idea, the planning I had already done helped me to keep momentum. I was able to stay focused on coding as opposed to planning out what I needed.

Prompts are Cool

Related to my above point, prompts are great if you are itching to code but have run out of ideas. I saw other participants of #7Days7Websites do challenges from Frontend Mentor, so I decided to check them out and ended up doing a lot of them in the last half of the week.

It inspired me to find more, like Learn JavaScript by Building 7 Games and Daily UI. I took liberties with some of the requirements by experimenting with Flexbox and CSS Variables to make them

Coding Everyday is Hard

Technically, coding something every day is doable. But having a nice, complete, “this-works-as-as commit” amount of code was difficult for me. I do not like to leave features unfinished or broken. At the same time, finding those doable nuggets of code was easier said than done.

Would I do it Again?

Maybe.

Like I’ve said earlier, I love the idea of coding every day.

Small steps toward a bigger one is a great approach. But, as much as I love it, I do not always have the energy to code after work every day. I hate that I feel this way, but there are other priorities and—wow—also a literal pandemic going on right now.

There are other aspects to being a developer that do not involve coding. And for me, it’s finding that balances of keeping my skills fresh, continuing to learn, and taking time away for other things. I’d rediscovered the joy of tech podcasts, coding streams, and Twitter chats. They help me to stay connected and engaged with the tech community even if I’m not actively coding.

All in all, #7Days7Websites was a lot of fun. I built some fun things, tried some technologies, and re-established my love for front-end web development.

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)