#100DaysOfCode Week 1

Days 1-2: freeCodeCamp JavaScript Algorithms & Data Structures: Basic Javascript completed. 2.5 hours.

Day 3-4: freeCodeCamp JavaScript Algorithms & Data Structures: ES6 completed. 1.25 hours. Learned:

  • Object.freeze to make objects immutable, since objects are still mutable even if they are defined with const
  • Default function parameters were not supported in ES5
  • reduce() takes two elements (a, b), does whatever you want with them, then uses the result in the next iteration.
  • You can destructure multiple nested objects in a single line
  • ES6 is, in general, much more powerful and much less intuitive than ES5. ES5 seems to “make sense” just by reading the code. ES6 on the other hand requires reading the documentation or some sort of other instruction.

Day 4: freeCodeCamp JavaScript Algorithms & Data Structures: Regular Expressions completed. 0.75 hours. Mostly review for me!

Day 5: freeCodeCamp JavaScript Algorithms & Data Structures: Debugging completed. 0.15 hours. freeCodeCamp JavaScript Algorithms & Data Structures: Basic Data Structures completed. 0.85 hours.

Day 6-8: freeCodeCamp JavaScript Algorithms & Data Structures: Basic Algorithm Scripting completed. 3.0 hours. These are actually really fun, especially as I try to solve them with more advanced methods. After completion, I look at the solutions to see how my answer could have been improved. Sometimes I already used the advanced method (or something similar), other times I have a lot of room for improvement. Really fun to learn!

Review

I’m loving this challenge. It can be tough to find the extra hour every day to code, but I’ve done it most days so far. I missed one day when family came into town, so I made it up the next day. I think that still counts, right? 😉

#100DaysOfCode Plan for Javascript & React

I’ve known about the #100DaysOfCode challenge for quite a long time. Whenever I spend time on Twitter, which admittedly isn’t often, I see people posting about it. I never decided to “commit” to it because I used to spend hours each week practicing coding anyway.

However, the last two years involved having a baby (who is now incredibly 19 months old!) and just trying to find a schedule that works for all of us. We only have childcare part-time, but I work full-time. This is intentional so that I can spend as much time as possible with Kacey, but it makes it tough to do anything outside of work and parenting.

In addition, my job has over time become much more a practice in managing all the gears that turn (and most often, doing the turning myself) such that coding has kind of taken a back seat. The coding that I do have the opportunity to do is more routine and less learning.

SO. I’m jumping back in with the #100DaysOfCode challenge. My goal is to learn Javascript deeply, then get more comfortable with React and learn about managing modern NoSQL databases with MongoDB to build modern web applications. I’m really excited.

I’ve heard wonderful things about freeCodeCamp, so that’s where I’ll be starting. They say each certification (and I’m going for three of them) has 300 hours of content. 😬However, since I’m starting with a pretty solid base understanding of Javascript and React (among other technologies that the certifications cover), I think I’ll be able to knock them out a bit more quickly. I am, however, going through each lesson so that I can make sure there are no gaps in my knowledge.

After completing those certifications, I’ll move on to creating a web app of my own.

  • Days 1-15: Complete the freeCodeCamp Javascript Data Structures & Algorithms Certification
  • Days 16-30: Complete the freeCodeCamp Front-End Libraries Certification
  • Days 31-45: Complete the freeCodeCamp APIs and Microservices Certification
  • Days 46-60: Create a web app
  • Days 60+: ??

I’m really excited about this challenge and will update the plan based on how long things actually take me.

How to add class names to nested blocks in Gutenberg

Nested blocks are some of the most versatile functionality I’ve seen come out of the Gutenberg project for WordPress. 

Instead of building all blocks components from scratch, you can use existing blocks and add them as nested blocks to your custom block. Read my tutorial for creating nested blocks in Gutenberg. 

One problem that arises is styling. Sure, you can get all specific with your CSS classes, but what if you have 4 different nested paragraph blocks, each with a different purpose? And what if each one needs to be styled differently?

Enter: class names!

How to Create Nested Blocks for Gutenberg

The power of Gutenberg lies in its blocks. Everything is a block. 

But the coolest thing I’ve seen that you can accomplish with said blocks is nested blocks

Nested blocks are blocks within blocks. You can have a single level of nesting, or you can even allow multiple levels of nesting – blocks within blocks within blocks.

With nested blocks, you can even set a template, so that when the block is added to the page, all the inner blocks are already there. Further, if you don’t want the blocks inside the main block (the parent) to ever change, you can lock the block. Pretty nifty!

Populous Map is Live!

Populous Map launched a few weeks ago, and I’m really excited and proud to see this project come to life. You can check it out here: https://populousmap.com/

Some cool features this project uses:

  • Simple Mapbox Data plugin
  • Custom Mapbox map style
  • Filtering of the map points by category select
  • Filtering of the map points by tag search
  • Filtering of the map points by year range
  • A combination of any of the above!
  • Map popups to show point title, excerpt, categories, segment, and year

This was such a fun project to work on and it’s so great to see it come to life!