In this article, I will walk you through Record Collection and help you understand how all of the pieces of the challenge work.

How to understand the function parameters

Parameters are special types of variables that are passed into the function and act as placeholders for the real values. When the function is called, then we will use the real values which are known as arguments.

This is an example of Record Collection's function parameters.

function updateRecords(records, id, prop, value)

The records parameter represents an object literal. Here is the object literal from the challenge:

const recordCollection = {
  2548: {
    albumTitle: 'Slippery When Wet',
    artist: 'Bon Jovi',
    tracks: ['Let It Rock', 'You Give Love a Bad Name']
  },
  2468: {
    albumTitle: '1999',
    artist: 'Prince',
    tracks: ['1999', 'Little Red Corvette']
  },
  1245: {
    artist: 'Robert Palmer',
    tracks: []
  },
  5439: {
    albumTitle: 'ABBA Gold'
  }
};

The id parameter represents the objects nested inside our recordCollection object. This is an example for one of the ids.

  2548: {
    albumTitle: 'Slippery When Wet',
    artist: 'Bon Jovi',
    tracks: ['Let It Rock', 'You Give Love a Bad Name']
  },

The prop parameter represents the property name, or key, inside the objects. albumTitle, artist, and tracks are all examples of properties inside the id objects.

The value parameter represents the value in the object's property. In the example below, albumTitle would be the property name, or key, while ABBA Gold would be the value.

albumTitle: 'ABBA Gold'

records, id, prop and value are the four parameters that we are going to use inside of the function.

How to tackle the rules for the challenge

The key to passing this challenge is to break down all four of these rules and tackle them one at a time. Here are the four rules we have to include in our function:

• If prop isn't tracks and value isn't an empty string, update or set that album's prop to value.
• If prop is tracks but the album doesn't have a tracks property, create an empty array and add value to it.
• If prop is tracks and value isn't an empty string, add value to the end of the album's existing tracks array.
• If value is an empty string, delete the given prop property from the album.

How to tackle the first rule

Here is the first rule:

• If prop isn't tracks and value isn't an empty string, update or set that album's prop to value.

The first part of that rule can be seen as an if statement. In our function, we can start to write out the basic structure for an if statement.

function updateRecords(records, id, prop, value) {
  if (condition is true) {
    // do some code
  }
  return records;
}

Now we need to figure out what to write for our condition here:

if (condition is true)

The first part of the rule says if prop isn't tracks. We can rephrase that as if prop does not equal tracks.

Remember that the inequality operator !== can be used to check if two operands are not equal to each other.

But we can't use tracks like this in our code because we will get an error message.

if(prop !== tracks)

To get rid of that error message, tracks needs to be a string.

if(prop !== 'tracks')

But we are not finished with our condition because we still have to tackle this part:

• and value isn't an empty string

We can use the inequality operator !== again to say value !== "". Then we can replace the word and by using the AND && operator.

This is what the first condition looks like so far:

  if (prop !== 'tracks' && value !== "") {
    // do some code here
  }

Now that we have figured out our condition, we need to figure out what goes inside of it. Here is the second part of that rule:

• update or set that album's prop to value

We first need to reference the entire object literal which is records. Then we need to access the id which represents the albums.

Finally, we need to access that prop. We will be using bracket notation to accomplish this.

records[id][prop]

The final step is to assign value to the album's prop. We are going to use the assignment operator = to do that.

records[id][prop] = value

This is what the entire first condition looks like:

function updateRecords(records, id, prop, value) {
  if (prop !== 'tracks' && value !== "") {
    records[id][prop] = value
  }
  return records;
}

How to tackle the second rule

Here is the second rule:

• If prop is tracks but the album doesn't have a tracks property, create an empty array and add value to it.

Let's take a look at this first part here.

• If prop is tracks

We can replace the word "is" with the equality operator, because we're checking if prop is equal to tracks.

else if (prop === 'tracks')

Here is the second part of the condition.

• but the album doesn't have a tracks property

We need to check if the album has a tracks property and we can do that by using the hasOwnProperty() method.

This is the basic syntax:

object.hasOwnProperty(prop)

The object in this case would be records[id] because that represents the album and the property would be "tracks".

records[id].hasOwnProperty('tracks')

But we need to check if the album does not have the tracks property. Since the hasOwnProperty() method returns a boolean (true or false) then we can write this:

records[id].hasOwnProperty('tracks') === false

We can also rewrite that statement using the NOT operator ! like this:

!records[id].hasOwnProperty('tracks')

By using the NOT operator ! here, we are basically saying if something is not true.

This is what our if statement looks like so far:

else if (prop === 'tracks' && records[id].hasOwnProperty('tracks') === false) {
    //do some code here
  }

Here is the second part of the rule:

• create an empty array and add value to it

We know that to create an array we can use brackets []. Then we can add value inside of it like this:

[value]

The final part is to assign that array to the album's property like this:

 records[id][prop] = [value]

Here is what the entire second condition looks like:

function updateRecords(records, id, prop, value) {
  if (prop !== 'tracks' && value !== "") {
    records[id][prop] = value
  } else if (prop === 'tracks' && records[id].hasOwnProperty('tracks') === false) {
    records[id][prop] = [value]
  }
  return records;
}

How to tackle the third rule

Here is the third rule:

• If prop is tracks and value isn't an empty string, add value to the end of the album's existing tracks array.

Let's take a look at the condition here:

• If prop is tracks and value isn't an empty string

We know from out previous code that prop is tracks can be rewritten as prop === "tracks".

We can also rewrite value isn't an empty string as value !== "".

This is what our third condition looks like so far.

else if (prop === 'tracks' && value !== "") {
    // do some code 
  }

Here is the second part of the rule:

• add value to the end of the album's existing tracks array.

We can use the push array method which adds elements to the end of an array.

records[id][prop].push(value)

This is what our entire third condition looks like:

function updateRecords(records, id, prop, value) {
  if (prop !== 'tracks' && value !== "") {
    records[id][prop] = value
  } else if (prop === 'tracks' && records[id].hasOwnProperty('tracks') === false) {
    records[id][prop] = [value]
  } else if (prop === 'tracks' && value !== "") {
    records[id][prop].push(value)
  }
  return records;
}

How to tackle the fourth rule

Here is the fourth and final rule.

• If value is an empty string, delete the given prop property from the album.

Let's take a look at the first part here:

• If value is an empty string,

We know from our earlier code that we can translate value is an empty string to value === "".

Here is what the if statement looks like so far:

else if (value === ""){
    // do some code
  }

Here is the second part of the rule:

• delete the given prop property from the album.

If we need to delete a property from an object, then we can use JavaScript's delete operator.

Here is how to delete the prop from the album:

else if (value === "") {
    delete records[id][prop]
  }

This is what the entire function looks like:

function updateRecords(records, id, prop, value) {
  if (prop !== 'tracks' && value !== "") {
    records[id][prop] = value
  } else if (prop === 'tracks' && records[id].hasOwnProperty('tracks') === false) {
    records[id][prop] = [value]
  } else if (prop === 'tracks' && value !== "") {
    records[id][prop].push(value)
  } else if (value === "") {
    delete records[id][prop]
  }
  return records;
}

Conclusion

I hope this walk through of Record Collection helped you understand how to solve the challenge. We covered a lot of different methods and learned how to break down a problem into smaller pieces.

Best of luck on the rest of your JavaScript journey.

One month ago I embarked on a challenge that many people told me was insane. I set out to conquer the entire freeCodeCamp curriculum. All while live streaming everything on my YouTube channel.

29 days, 56 Live Streams and 72 hours of live streams later...

First a Disclaimer

I'm a professional software engineer. I've been coding since 2013. And I had previous experience working with all of the technologies covered in freeCodeCamp's curriculum.

So this was easier for me than it would be for people who are just starting out. Most people spend months or even years earning these certifications.

Remember: It's not about how much time it takes you to complete freeCodeCamp's curriculum – it's about what you are learning along the way.

I created this series as a guide for anyone who gets stuck during the curriculum, and wants to watch how a relatively experienced software engineer would solve challenges and build projects.

This series of 72 hours of video covers the following topics:

• HTML
• CSS
• Flexbox
• CSS Grid
• JavaScript
• Bootstrap
• React
• Redux
• NodeJS
• Express
• MongoDB
• Mongoose
• and more...

And I also build 30 projects along the way.

Below you'll find a list with all the videos nicely structured by certifications. ?

How did this crazy month of my life get started?

I've been planning to do this challenge for a while now. But it always seemed to be a HUGE one, which would take a lot of time to complete.

Apparently it didn't take months, as I initially thought. (And I'll tell you why in a moment.)

Before I started this challenge I ran the idea by freeCodeCamp's founder Quincy Larson to see whether he thought that this was something that could benefit the developer community. He was very encouraging.

freeCodeCamp has a "learn in public" culture, and a lot of people post their projects on the forum and on GitHub for feedback. And an increasing number of people live-stream themselves building these projects, too.

Quincy said not to worry about "spoiling" any of the challenges or projects. These are all the equivalent of "open notes tests." Students must write their own code, but they can look at other people's solutions for inspiration if they want.

Why Did I Choose freeCodeCamp's Certifications for This Challenge?

I have always recommended freeCodeCamp's curriculum to people who want to start learning web development.

Why? Well, the answer is very simple: it's the best free resource to get up and running with web development, in my opinion.

Now, even though it's a very good resource, people tend to quit along the way because they start to hit different roadblocks... and that's sad. ?

We want more people to finish the curriculum!

And here is where the Conquering freeCodeCamp's Curriculum challenge starts to shine. It gives everyone a follow-along playlist of videos in which I personally go through the entire curriculum, explaining what I'm thinking with each step I take. I also added my own comments and "bonus" explanations.

Every section on freeCodeCamp is covered in a single video. There are a total of 56 videos. (See below for a list of all the videos.)

My background and experience

I started learning how to code back in 2013. Since then I've worked as a freelance developer and held multiple software engineering jobs.

Last year I started to write articles on my blog. I also started creating YouTube coding tutorials. Feel free to subscribe if you like these type of videos ?.

It is safe to say that I already knew most of what you would learn on the platform, which gave me an advantage on conquering the curriculum in a month.

But, don't let this intimidate you. No matter your experience – no matter if it takes you years to finish the curriculum, just do it. I promise that you won't regret doing it.

I also worked A LOT to put out these Live Streams. Some days I recorded more than 5 hours. One day I even did 8 live streams and ended up completing an entire certification just in that day. ?

Why did I do that?

Well... most people would say that I'm either crazy or a robot.

I'm not a robot. But maybe a bit crazy? Yes. ?

The reason I pushed so hard was because I had plans to go on a vacation. And I wanted to have this all out before going. (Well... the vacation got canceled due to the Coronavirus outbreak. But I'm still happy to have gotten all this done.)

Also probably because I was excited about setting a new world record by finishing the whole curriculum in a single month.

Conquering freeCodeCamp - All the Recordings

Below you can find a list with all of the recordings – 56 in total.

Keep in mind that all of these were recorded in a series of live streams, so you might hear me answer questions received during the live stream from the chat. I also take breaks to do some deep thinking and even struggle to figure out some of the solutions (I'm not a robot after all ?).

All of this is perfectly normal for software developers. When devs get stuck, they often get up and take a break for a few hours – even a day. This can help you re-approach the problem with a fresh perspective.

I built all the projects on live streams (instead of just pre-recording) because I wanted it to be as close to real life as possible. I think this will be of greater value to you than me just walking you through my solutions.

I also created a Discord chat room server if you want to socialize with other people who are attempting this same freeCodeCamp curriculum challenge.

All right, enough talk. Here are all of the recordings. Enjoy! ?

Responsive Web Design Certification

Basic HTML and HTML5 - Live Stream #1 Basic CSS - Live Stream #2 Applied Visual Design - Live Stream #3 Accessibility and RWD Principles - Live Stream #4 Flexbox and CSS Grid - Live Stream #5

Projects

Build a Tribute Page (for Brad Traversy) - Live Stream #6 Build a Survey Form - Live Stream #7 Build a Product Landing Page - Live Stream #8 Build a Technical Documentation Page - Live Stream #9 Build a Personal Portfolio Webpage - Live Stream #10

JavaScript Algorithms and Data Structures Certification

Basic JavaScript (Part 1) - Live Stream #11 Basic JavaScript (Part 2) - Live Stream #12 JavaScript ES6 - Live Stream #13 Regular Expressions - Live Stream #14 JavaScript Debugging - Live Stream #15 JavaScript Basic Data Structures - Live Stream #16 JavaScript Basic Algorithm Scripting - Live Stream #17 JavaScript OOP - Live Stream #18 JavaScript Functional Programming - Live Stream #19 JavaScript Intermediate Algorithm Scripting (Part 1) - Live Stream #20 JavaScript Intermediate Algorithm Scripting (Part 2) - Live Stream #21 JavaScript Algorithms and Data Structures Projects - Live Stream #22

Front End Libraries Certification

CSS Bootstrap - Live Stream #23 jQuery - Live Stream #24 SASS - Live Stream #25 ReactJS - Live Stream #26 Redux - Live Stream #27 React and Redux - Live Stream #28

Projects

Build a Random Quote Machine - Live Stream #29 Build a Markdown Previewer - Live Stream #30 Build a Drum Machine - Live Stream #31 Build a Calculator - Live Stream #32 Build a Pomodoro Clock - Live Stream #33

Data Visualization Certification

Data Visualization with D3 - Live Stream #34 JSON APIs and Ajax - Live Stream #35 Visualize Data with a Bar Chart - Live Stream #36

Projects

Visualize Data with a Scatterplot Graph - Live Stream #37 Visualize Data with a Heat Map - Live Stream #38 Visualize Data with a Choropleth Map - Live Stream #39 Visualize Data with a Treemap Diagram - Live Stream #40

APIs and Microservices Certification

Managing Packages with NPM - Live Stream #41 Basic Node and Express - Live Stream #42 Mongo and Mongoose - Live Stream #43

Projects

Timestamp Microservice - Live Stream #44 Request Header Parser Microservice - Live Stream #45 URL Shortener Microservice - Live Stream #46 Exercise Tracker - Live Stream #47 File Metadata Microservice - Live Stream #48

Information Security and Quality Assurance Certification

Information Security with HelmetJS - Live Stream #49 Quality Assurance and Testing with Chai - Live Stream #50 Advanced Node and Express - Live Stream #51

Projects

Metric-Imperial Converter - Live Stream #52 Issue Tracker - Live Stream #53 Personal Library - Live Stream #54 Stock Price Checker - Live Stream #55 Anonymous Message Board - Live Stream #56

What's next for me?

I will continue to create coding tutorials on my YouTube Channel. One of my main goals for 2020 is to reach 100,000 subscribers. (A crazy goal, I know, but... I think it's possible. What do you think? ?)

I'm also waiting for freeCodeCamp to release the 4 new Python certifications. Then I will work through those as a series of live streams, too.

Along with these, you'll also find me doing other live coding series.
My latest series is called CodeWars.js. If you want to learn more about how to solve different coding challenges using JavaScript, this is for you!

Feel free to subscribe to my YouTube channel if you want to follow along with my journey. You can also follow me on Twitter. I'm pretty active there.

I hope you found this article interesting.

Happy Coding! ?

As many of you know, I landed my first developer job at the end of June and I thought it would be great to use the challenge I was given as the subject of today's article.

It is important to note that I used React to build my project, but this could have been completed with any front end framework or 'vanilla JavaScript'.

Below is a list of topics we'll go over:

• Accessing the Quip Automation API
• Creating spreadsheets/documents with the Quip API
• Installing and using the Axios library (this is optional and you can make API requests without it but I like the syntax)
• Using qs package to stringify requests (this is not a requirement but I wanted to try something new and if it didn't work I always had the fallback of knowing Axios will stringify my requests by default)
• Making POST and GET requests

For context, here is a snippet of the requirements as I received them:

"Create a front-end web app that interacts with the Quip API in the following ways:

• Create a spreadsheet (bonus points to import data into the newly created spreadsheet).
• By import data, I mean upload an Excel spreadsheet, or copy and paste data into Quip spreadsheet.
• Export a Quip spreadsheet to .xlsx
• Download (backup) a folder/multiple documents.

Create the UI for the page in whatever way you see fit (buttons, dialog boxes, etc)."

I was a little worried when I read the requirements as I wasn't exactly sure where to begin. So, I dug into the API docs and started soaking up information. Thankfully, no time limit was given to me but I wanted to be done with this as soon as possible to see where I stood in the interview process.

To start, I designed a prototype of the finished product in Figma so I'd have a road map to go off of. This is not a required step, but it does make your project building experience run much smoother.

Alright, let's dig in!

Getting Started

I built my Nav, Footer, and Content components so I'd have a solid foundation for my app.

Each of these components return some basic JSX and there isn't much to them (If you'd like to see the code for each you can check out the project's GitHub repo).

I decided the majority of the requests would be split between the App.js and CenterContent.js files.

For reference, here is my project structure:

My project structure

You'll see me reference POST and GET requests throughout this post. If you aren't familiar with those now is a good time to do some research on those. I'll be honest in that I wasn't 100% on them when starting this project and had to go through some resources myself.

In a nutshell, a POST request is when we ask the server to accept some incoming data (that we are sending) - in our case that data comes in the form of creating a new spreadsheet file.

A GET request is when we ask the server to send us data from a specified resource on the server.

I used the Insomnia REST Client to help debug issues with my requests. I'm working on a beginner's guide for it so stay tuned for that!

Using the Quip API

If you're like me, you've never heard of the Quip API and had no idea what it does. At its core, Quip is an automation tool that allows you to integrate with tools like SalesForce to make your sales team more collaborative.

For our purposes, we will be using it to create Excel spreadsheets on my Quip account (if you want to replicate this project you'll need to create a Quip account - it is free to do so).

You'll also need to create a personal developer token in order to make requests. You can do that here (requires an account). Once you have your token, keep it in a safe spot because we'll be making use of it soon.

To start, I installed Axios into my project by running npm install axios and then I import it into the files where I need to make my requests with import axios from "axios";

My import statements for required packages

Authentication

Before making any kind of requests to the server, I needed to authenticate with my credentials. I decided to put this in the App.js file inside a componentDidMount lifecycle method so it would load every time the page loads:

My authentication function

So I built my function, I called my function and for a moment thought all is well, until I ran into this dreaded error:

"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at $websiteName"

Noooooooo!!! The dreaded CORS monster rears it's mighty head! (CORS is actually a useful intermediary between me and the server but can be annoying to deal with if you've never seen this error before).

Side note - if you've never seen this error before don't worry! I still don't fully understand it but I know enough to debug it. If you get stuck, check out the link above for some helpful info or look below for a quick work around.

An easy way to get around this is to use a proxy like the CORS Anywhere free resource. Essentially, place this link https://cors-anywhere.herokuapp.com/ in front of your end point URL and it'll resolve the problem, for now.

This handy tool will allow you to make your requests while developing on localhost. If I were you, I would do some research before using this approach in production. Full disclaimer, I don't know enough about this little trick to tell you if it's safe to use in production or not.

So, after some tweaking of the authentication function I got the desired result to log to the console. Time to move on to making requests!

Making Requests

Now that my authentication is working, we're ready to make some requests. I knew I was going to make a POST request whenever I wanted to create a new document and that I also wanted to tie that action to the click of a button. So, below is my POST function:

My POST function

You'll notice this is where our qs package I mentioned at the beginning of this article comes into play. I'm not an expert but from what I gleaned after reading the docs on it, this package turns my request into a string to be sent to the server. If you prefer not to use this package that's no problem as Axios will do this by default. I know that qs offers more than just stringifying data but I'm unfamiliar with the full range of its capabilities.

Now, I want this function to fire when clicking a button. Thus, a basic button came to life!

A simple React button with an on click method

My POST function has been built, my button has been built, and the method tied to it. It's time to cross my fingers and see what my function spat out into the console:

The result of my server request - it works!

At this point I'm over the moon! I'm beyond excited that I've gotten this API call to not only work but to return something as well. Now the real test...does this show up as a new spreadsheet on my Quip account?

I have the console statement and the confirmation from my Quip account showing that I have successfully created a new spreadsheet - this is awesome! I'm ecstatic and I literally jumped out of my chair and yelled "YEEEEEEESSSSSS!!!" once I got both of these.

That feeling of getting something to work after struggling with it is like nothing else I've experienced in my professional life. I tell myself that I have to keep riding this wave of enthusiasm and elation so I push on to the next item on the list.

Import Data Into the Newly Created Spreadsheet

I had some great ideas for this section of the "assignment" but at this point it has been almost two weeks since I started this project and I'm anxious that the interviewer will have forgotten about it (i.e. me) or is getting impatient with me.

So, I scrap those grand plans and opt for something of a more simple nature so I can get this project turned in ASAP.

I built a small function to at least attach to the upload button so that I would have some type of functionality for it. At it's core, this function waits until a file has been uploaded, sets the state to the first element in the event target array, then creates headers based off of that information, with the eventual goal being it posts to my Quip account with that information.

However, you can tell by the comment at the top of this function block that I was unable to get it to work properly. However, I did not have time (at least I thought I didn't) to dig deep into this problem and get it fixed.

My import function that never quite worked properly :)

At this point, I've been working on this project after work and at night for over two weeks. I decide that it's time to turn it in without the other parts working (import, export, and downloading data).

The Final Touches

I know my project is unfinished and I'm beating myself up pretty hard about it. But, as an added bonus I decide that I'm going to design something in Figma as an added touch to help my chances of getting a call back.

Here is the finished product modeled off of their current colors/font/theme:

And That's A Wrap

With my project not finished but at a stopping point, I'm feeling not so good about my progress and my timing but I package everything up and throw it on GitHub. I throw in the above image and schedule an e-mail to go out the next morning at 9AM to the interviewer.

I waited nearly 2 days with bated breath hoping to get some type of call back - something. It finally came as I was driving into work. The interviewer had gotten my project and wanted me to come in for another meeting with his lead developer.

I was terrified and excited all at the same time because I was thinking they wanted to bring me in to make fun of my code or to ask me what the hell I was thinking when I built this monstrosity. But that wasn't the case at all. I ended up getting a job offer from this project!

If you'd like the whole story about that, it can be found in my previous blog post about landing my first developer job.

I hope you've found some value out of this post. If you have let me know on Twitter or any of the other platforms I post on :D

Also, I cross post most of my articles on great platforms like Dev.to and Medium so you can find my work there as well!

While you’re here why not sign up for my Newsletter – you can do that at the top right of the page on my blog. I promise I’ll never spam your inbox and your information will not be shared with anyone/site. I like to occasionally send out interesting resources I find, articles about web development, and a list of my newest posts.

Have an awesome day filled with love, joy, and coding!

As many of you know, I have been applying for a job in web development for a few weeks and I thought it would be a good idea to share some of the coding challenges I've encountered.

Not only that but I'll share the ways I went about solving these challenges. Granted, there are many ways to solve these challenges but these are the ways I went about it. If you have different ways that's awesome and I'd love for you to share them with me!

I will not share any identifiable information about the companies or specifics on the interview process of said company to preserve process integrity.

Alright, let's get to it then.

The Challenge

This is a challenge I was given recently that I felt good about solving:

Task: Return a basic styled list of posts from an endpoint in reverse chronological order

To protect the company and their information, I will not share the URL from which I returned the information but instead will have a generic link from JSONPlaceholder (a great, free, open source API for developers when you need to get some generic outside data) in the code below.

Here's the HTML I started with so we have something to display our results in:

Basic HTML boilerplate

The

Fetching Data From the Endpoint

Alright, let's dig into the JavaScript portion of this challenge. First, I like to set my output and display variables:

Our variables used when displaying the returned code

I use let for the output variable and set it to null because we will change it's value later in the code. The list variable is declared with const because it's value will not be changing.

Fetching data from the endpoint

In the above example, we’re declaring an arrow function named getData wrapped in a try…catch block (This is a cleaner/easier to use/read syntax that uses tries some code and catches errors if they happen — you’ll also see the catch portion below). Because we're getting data asynchronously we also need to make use of async/await to fetch data. This is the method I'm most comfortable with but I know there are many other ways to get data from an endpoint so feel free to share yours :D

Once we've declared our data variable, the next thing is to set a variable to turn the returned data to a JSON object so we can get it in a usable form. We do that with the .json() method. We're awaiting the data as well because if we were to omit the await keyword, JavaScript would try to turn the data variable into JSON but the data would not be there yet because it's coming from an asynchronous API.

Our glorious data!

As the very last line in the section, we console.log our data that we get back from the API endpoint just to make sure we're getting everything we wanted. We have an array full of objects. You'll also notice that the key _publishedat holds our dates and they are not in any type of order. Their format is also not a simple four digit number representing the year which would make it easy to filter them into reverse chronological order. We'll need to take care of that.

Manipulating Our Data

Making a copy of our data variable

Here we declare the variable dataCopy which points to the dataJSON variable mutated into an array via the _spread operator(...)_. Essentially, we are copying our returned JSON data so we aren't manipulating the original (bad practice) while making it into an array so that we can iterate over it.

After, we _sort_ the array. Sort is an extremely useful array method that will put our array indices into the order of our choosing based on the function we pass into sort.

Typically, we might want to sort the data based on value (largest to smallest) so we subtract the parameter a from parameter b. But because we need to display our results in reverse chronological order I decided to produce a new date (accomplished with the new operator and the JavaScript built in method _Date that creates a new platform independent formatted instance of a date. Now, because a and b_ represent our objects sitting inside our array indices, we can access the key/value pairs held within said objects. So, we subtract _b.publishedat from _a.publishedat and this should give us our dates in reverse chronological order.

Displaying the Fruits of Our Labor

Remember that output variable we set to null at the very top of our program? Well now is it's time to shine!

That output variable is earning it's keep now!

So, there's a few things going on here. First, we're setting our output variable to a new value by mapping over our dataCopy variable using the _map_ method. This method returns a new array with the results of calling the provided function once for each index. The item parameter represents our objects inside of our array that was returned from the endpoint and thus has access to all of their properties such as title and _publishedat.

We return two list elements with a inside each one (for styling purposes), as well as a string for the Title and Date Published headings. Inside of those, we have our variables that use template literals to set the title and the date for each post.

Then, we set our list variable's innerHTML equal to that of our output variable.

Finally, we have the closing bracket and error handling of our try...catch block as well as our function call:

This code will handle any errors and display them in the console

Final Code

Here is what our full code body looks like now:

The entirety of our code base

And here is our basic CSS styling:

Did I say basic styling? I meant basic :D

And here is the result of our work with it's very basic styling:

Isn't it beautiful?

As you can see, we accomplished what we set out to do and in fact the list is in reverse chronological order. Yay!

I hope you've enjoyed this walk through of my thought process and of how I solved this challenge. Granted, there are many ways of completing this so feel free to share yours with me! I'm excited to keep this series going and will post another after I've gone through another challenge!

Also, I cross post most of my articles on great platforms like Dev.to and Medium so you can find my work there as well. This article was originally posted on my blog on May 27, 2019.

While you’re here why not sign up for my Newsletter. I promise I’ll never spam your inbox and your information will not be shared with anyone/site. I like to occasionally send out interesting resources I find, articles about web development, and a list of my newest posts.

Have an awesome day filled with love, joy, and coding!

Daniel Borowski published a great list of coding challenges you can join for fun and/or to test your programming skills. Contests like TopCoder or Google Code Jam are well-designed and offer high rewards. The competition is usually very high as well. In this article, I’d like to list less-known online contest you can join in 2018. (Note: the vast majority of them isn’t based on algorithmic problems).

Js13kgames

Link: http://js13kgames.com

Challenge:

It’s a JavaScript coding competition for HTML5 Game Developers. The game assets should be smaller than or equal to 13 kilobytes. It must work and be playable in at least two browsers: Firefox and Chrome. The rules also define the main theme, and it’s highly advised to follow it in your game (2017 theme- “lost”).

Prizes:

Sponsor’s packages such as:

• Three copies of Evil Glitch game by Agar3s available on Steam.
• Three lifetime and ten year-long licenses for Phaser Editor from Arian Fornaris.
• Thirty paid GitHub plans — personal accounts with unlimited private repositories for twelve months.
• Ten 6-month PlayCanvas Personal accounts offering a cloud-hosted, collaborative platform for building games.
• Two Personal licenses for one year each of Construct 3 game engine created by Scirra.
• Two copies of Asset Forge Deluxe tool from Kenney.nl.

Past winners:

• Ryan ‘Rybar’ Malm — you’re a lowly space mining bot who suffers a terrible accident and is separated from your crew. Find enough fuel and body components to repair yourself and explore.
• Maxime Euziere — a big puzzle game and a long journey to find a lost kid.
• Rémi Vansteelandt — get control of the sectors back by capturing beacons and defending them against enemy units.

Yelp Dataset challenge

Link: https://www.yelp.com/dataset/challenge

Challenge:

The challenge calls students to use Yelp dataset in innovative ways. It’s a chance to conduct research or analysis on Yelp data and share your discoveries. For example, the 2017 set included information about local businesses in 12 metropolitan areas from 4 countries.

Prizes:

• ten awards for $5,000

Past winners:

• “Semantic Scan: Detecting Subtle, Spatially Localized Events in Text Streams”. Abhinav Maurya, Kenton Murray, Yandong Liu, Chris Dyer, William W. Cohen, and Daniel B. Neill.
• “Topic Regularized Matrix Factorization for Review Based Rating Prediction”. Jiachen Li, Yan Wang, Xiangyu Sun, Chengliang Lian, and Ming Yao, from the Language Technologies Institute, School of Computer Science, at Carnegie Mellon University.
• “From Group to Individual Labels Using Deep Features”. Dimitrios Kotzias (University of California, Irvine), Misha Denil (University of Oxford, UK), Nando De Freitas (University of Oxford, UK, and Canadian Institute for Advanced Research), and Padhraic Smyth (University of California, Irvine).

XD HAX Developer Challenge

Link: https://xdhax.devpost.com/

Challenge:

Developers are asked to build innovative apps utilizing cloud technologies. Such apps are to benefit small businesses worldwide. Competition is divided into categories:

• Best NEW App integration (with Xero API)
• Best enhancement of an existing App integration
• Most Innovative use of Xero’s APIs
• Best New Open Source Project with Xero’s API

Prizes:

$5000 in Amazon Web Services credits, $2500 in cash, plus featuring in Xero’s resources. Additionally, in the best integration category, the winner gets an opportunity to exhibit in Startup Alley at a Xerocon of your choice. This has an approximate $5000 value.

Past winners:

• The revolutionary new card that makes business spending as beautiful as Xero makes accounting.
• Account Management Dashboard (AMD).
• TAX which helps startups to deal with taxes.

OPEN OIT CHALLENGE 4.0

Link: https://iot.eclipse.org/open-iot-challenge/

Challenge:

You need to create a solution based on open standards and open source technology. The solutions are judged on the following criteria:

• Applicability of a solution to a specific industry, like Smart Cities, Industrie 4.0, and Remote Health.
• Completeness of solution.
• Use of open standards and open source technology.
• Amount of community discussion from the participants when they built their solution.

Prizes:

1st prize:

• $3,000 gift card to be used in an online shop for electronic supplies and open hardware.
• $1,000 scholarship to attend a future Eclipse Event in 2017.
• 1 Reactive Blocks professional license (EUR 4,800).

2nd prize:

• $1,000 gift card to be used in an online shop for electronic supplies and open hardware.
• 1 Reactive Blocks professional license (EUR 4,800).

3rd prize:

• $500 gift card to be used in an online shop for electronic supplies and open hardware.
• 1 Reactive Blocks professional license (EUR 4,800).

Past winners:

• Sebastien Lambour & team — InMoodForLife: Sleep analysis for mood disorders.
• Siva Prasad Katru & team — The solution to help farmers execute agricultural operations in smarter and efficient way.
• Tom Morocz & team — RHDS which performs a near real-time home Home Energy Audit on a minute by minute basis.

_Photo by [Unsplash](https://unsplash.com/photos/MuIvHRJbjA8?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel="noopener" target="_blank" title="">James Owen on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel="noopener" target="blank" title=")

Space App challenge

Link: https://2017.spaceappschallenge.org/

Start date: April 2018

Challenge:

Space App challenge is a NASA International hackathon that occurs over 48 hours in cities around the world. It’s about building apps judged in many different categories:

• Ideate and Create! Challenges in this category will ask you to interpret NASA Earth Science data creatively. You will be asked to design new means to experience NASA Earth Science data and technologies.
• Our ecological neighborhood. Challenges in this category will ask you to use NASA Earth Science data to study ecological systems. You will also generate solutions to understand life here on Earth better.
• Warning! Danger ahead. This category will ask you to analyze NASA data. You will assist in monitoring natural disasters and phenomena associated with health risks. You will also be asked to assess their impacts on life and property.
• Planetary blues. In this category will ask you to analyze and visualize NASA’s data on the hydrosphere and the cryosphere.
• The Earth and us. This category will ask you to combine NASA Earth Science data with sociological and economic information. The result will generate new understanding and perspectives on human-environment interactions.

_Photo by [Unsplash](https://unsplash.com/photos/z8lfwpQVXJo?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel="noopener" target="_blank" title="">Team UI8 on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel="noopener" target="blank" title=")

Prizes:

• In 2015, Global had a chance to attend the viewing opportunity for the Cygnus CRS OA-4 launch. Cygnus CRS OA-4 took cargo and experiments to the International Space Station.
• In 2016, Global winners could attend the launch of OSIRIS-Rex, visiting the asteroid Bennu.

Past winners:

• Best use of data: Scintilla mitigates the impact of poor air quality on the global community. This is done by democratizing air quality data collection.
• Best use of hardware: The Canaria system of CO2 monitor patch and earpiece acts as a lifeline to the wearer. It simultaneously monitors heart rate, blood oxygen, and atmospheric CO2 levels.
• Galactic impact: This is a web tool that provides the near real-time visualization of glacier surface velocity fields. It is obtained by processing free SENTINEL-1 Synthetic Aperture Radar images through our own algorithm. This is enhanced with the addition of environmental variables from NASA GIBS.
• Best mission concept: The solution is a data glove to be worn by astronauts as part of their space suit. The data glove is a network of wireless devices that provide communications in a variety of environments. These include subterranean environments, like caves, caverns, and lava tubes on the moon, Mars, and asteroids.
• People’s choice: MarsHopper is a plane for the investigation of Mars poles and its surroundings. It uses CO2, that in solid form covers surface to create jet thrust.
• Most inspirational: Kid On The Moon is an interactive app. It fosters curiosity to inspire the next generation of space explorers.

TADHack

Link: https://tadhack.com/2017/

Challenge:

TEDHack is the largest telecoms-focused hackathon worldwide. The competition is divided into following categories:

• Hackhathon. This category is an idea or an answer to a sponsor’s challenge. You can work on your ideas before the event, or create ideas during the event from all the great networking opportunities.
• Showcase. This category is for products that have already been released commercially. It can also include products that have had significant development.

Prizes:

$1000 — $200 in cash (dependently on category), plus packages from sponsors.

Past winners:

• Hack: snappy kamailio. By Daniel-Constantin Mierla.
• Hack: Outsider. By Ermir Suldashi.
• Hack: Avengerrs. By Mchotsa Banda, Daryl Lukas, Chobela Kakumbi, Itati Dzekedzeke, Joshua Chipile & Sibusiso Ngoma.

(More categories and winners.)

React Riot

Link: https://www.reactriot.com/

Challenge:

48h to build an app by using React JS. There is no specific topic or theme. Entries are judged on a 1–5 scale across 3 dimensions:

• Innovation — How original is the idea and execution?
• Design — How good does it look and feel to use?
• Utility / Fun — Is the site offering a service I’d use again and again?

Prizes:

Sponsors provide prizes, no cash rewards. Examples with estimated values:

• Algolia — $500 gift card of your choice
• Sencha — ExtReact Premium License year per team member ($4,780 value)
• Algolia — 2 year Startup Plan per team member ($4,704 value)
• Frontend Masters — 6 months membership to Frontend Masters per team member ($936 value)
• ag-Grid — 1 Developer license ($495 value)
• Github — 1-year Developer Plan per team member ($336 value)
• AgileBits — 1 Password license per team member ($144 value)

Past winners:

• The Definitely Ending Story — Get your thinking cap on to puzzle your way into Granny’s house. Navigate your way around town, and talk to the townsfolk to pick up items.
• Composer — Lets you choose chords and instrument types to create your very own sound composition, that you can share with your friends.
• Okay, Fine! — A chat room that uses AI to analyze and visualize tone
• DungeonLogic — You are helping to the dark mage, that has a strange hobby. He collects the coins in strange places and uses dark magic to control the environment, for example, to lift something or pull down.
• PewPew — Pew pew is a real-time multiplayer game where players can battle each other using their voice.
• Fill Me Up — FillMeUp addresses a major pain in Nepal — refueling vehicles. It is a platform for suppliers to reach out to more consumers by providing valuable petrol pump statistics and information.

Stellar Build Challenge

Link: https://www.stellar.org/lumens/build/

Challenge:

Contestants are asked to build applications which match following requirements:

• Continues usability improvements and polish to what is there now.
• Applications using multi-sig in a novel and interesting ways.
• Open federation service or other applications taking advantage of a federation.
• Sending lumens to any address.

You can also build a wallet solution which matches following dimensions:

• Continue usability improvements and polish to what is there now.
• Has multiple accounts.
• Presents good design.
• Sends lumens to any email address.
• Has other features that allow easy on-boarding and increased virality.

Other categories include tokens, issuing ICO, trading tools or remittance app.

Prizes:

2 000 000–350 000 Lumens (Lumens are the native asset of the Stellar network)

Past winners:

• Popcoin — metered billing for busy developers.
• Tonaira — allows you to send money to your family and friends for as low as 1%.
• BlackWallet — it supports lumens, assets, and tokens, and makes it easy for you to send nor receive them.
• eSACCO — similar financial needs with varied financial journeys means we each require personalized solutions. That’s exactly what eSSACO delivers.
• StellarTerm — an open source client for the Stellar network. Send, receive, and trade assets on the Stellar network easily with StellarTerm.

ANGULAR ATTACK

Link: https://www.angularattack.com/

Challenge:

All entries have to be applications created with Angular. You have 48 hours to build your solution and pass it through (entries should be web applications). Apps will be judged on a 1–5 scale across 3 dimensions:

• Innovation — How original is the idea and execution?
• Design — How good does it look and feel to use?
• Utility / Fun — Is the site offering a service I’d use again and again?

Prizes:

Packages from sponsors, for example:

• Kendo UI — $500 gift card of your choice
• NativeScript — $500 gift card of your choice
• Kendo UI — BONUS $2,000 gift card of your choice if you use Kendo UI
• NativeScript — BONUS $2,000 gift card of your choice if you use NativeScript
• Frontend Masters — 6 months membership to Frontend Masters per team member ($936 value)
• Scotch — 1-year membership to Scotch School per team member ($480 value)
• SitePoint — 1-year Premium membership per team member ($396 value)
• Github — 1-year Developer Plan per team member ($336 value)
• Rollbar — 6 months Bootstrap Plan ($300 value)
• AgileBits — 1 password license per team member ($144 value)

Past winners:

• Team winner — the game provides a 6x6 board with items and a set of clues.
• Solo winner — a drum machine and chat application. This application lets you create and listen to beats in real time with your peers. This can be accomplished irrespective of the places where your peer composer resides.
• Innovation winner — a fun immersive augmented reality game. In this game, toddlers have to spot the alphabets using the device camera.
• Design winner — a turn-based multiplayer game that players need throws a rock at the opponent with their slings.
• Utility/fun winner — it is a one-page web application that gives the download links to the videos.
• Public favorite — one of the most awesome tools to create your own story.

Node Knockout

Link: https://www.nodeknockout.com/

Challenge:

Node Knockout is an online hackathon. Teams compete over a 48 hour period to build the best app they can, using Node.js. After app submission, it is scored by one of the expert judges:

• Innovation — How original is the idea and execution?
• Design — How good does it look and feel to use?
• Utility / Fun — Is the site offering a service I’d use again and again?

Prizes:

Founded by sponsors, no cash rewards. For example, “Judges favorite” received:

• Heroku — $500 gift card of your choice
• Frontend Masters — 1year subscription per team member (up to $1,872 value)
• Blitline — $100 credit per team member (up to $400 value)
• Github — 1-year subscription per team member (up to $336 value)
• AgileBits 1Password — 1-year subscription per team member (up to $144 value)
• Papertrail — 1-year subscription (up to $84 value)
• Component IO — 6 months Standard plan ($60 value)
• Rollbar — 1-month Bootstrap plan ($49 value)

Past winners:

• The best overall score by judges was awarded to the ? Store, This is a magical place where you can design and actually order custom emoji hats, t-shirts, and mugs and get them delivered the mail just a week or two later.
• The best overall score by participants was awarded to DuckNockout. DuckNockout is a technological shooting game that brings nostalgia from Duck Hunt of the 80's.
• The highest innovation score — tech word assembling game with git commands.
• The highest design score — a fun little game made in an 8-bit-like style. You’ve found the perfect wave, with all that’s left to do is to ride it without falling.
• The highest utility/fun score — this is a game that uses your microphone as input. If you’re loud enough, the character will move right. If you’re quiet, the character will move left. Aim for the branches. If you hit the bottom, you lose.
• The most votes — multiplayer game includes knowledge, quickness, forecast.

24 Pull Requests

Link: https://24pullrequests.com/about

Start date: December 1–24

Challenge:

You’re asked to send 24 pull requests between December 1st and December 24th. The idea is basically to encourage developers to give back to open source with little gifts of code throughout December.

Prizes:

Becoming true OS developer

_Photo by [Unsplash](https://unsplash.com/photos/4p0C_OiXNiM?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel="noopener" target="_blank" title="">Mariah Ashby on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel="noopener" target="blank" title=")

ATOS IT challenge

Link: https://www.atositchallenge.net/

Challenge:

Come up with an innovative concept for an application based on Chatbots & AI. The topic for the Atos IT Challenge 2018 is as follows:

“Devise an innovative use case and build a prototype leveraging Artificial Intelligence and conversational interfaces. Show how this can provide benefit to the people and/or transform business, and how you could further develop your solution and take it to market.”

You can use devices like the Amazon Echo Dot or Google’s AIY Projects with a Raspberry Pi to provide an interface, a web service or APIs such as API.ai or wit.ai.

Prizes:

• 1st prize: €10,000.
• The two finalists (2nd, 3rd prize) get respectively €5,000 and €3,000.

Past winners:

• Quo (Lancaster University in the UK)
• Evoto (Loughborough University in the UK)
• E-tickets (ENSEIRB-MATMECA in France)

_[The 3 finalists of 2017 ATOS IT challenge](https://www.atositchallenge.net/edition-2017/" rel="noopener" target="blank" title=")

Mercedes Benz Digital Challenge

Link: http://www.mercedes-benz-challenge.com/

Challenge:

Develop new and innovative use cases (app or another idea) using Mercedes car emulator, mock APIs, and SDKs. In the Digital Challenge, you get access to 80+ mock APIs, mobile SDKs (iOS and Android), and a car emulator.

The APIs relate to car chassis, digital keys, points of interest, parking, and so much more. And, if combined with external APIs, the only limit should be contestant’s creativity.

Prizes:

• 1st place: Besides €15K, the winning team will be awarded two tickets to the 2017 Lisbon Web Summit. There they will present their solution alongside Mercedes-Benz.
• 2nd place: The runners-up will receive €6K and the chance to continue discussions with the Mercedes-Benz team. The runners-up will potentially continue development beyond the Digital Challenge.
• 3rd place: The second runners-up will receive €3K and the chance to continue discussions with the Mercedes-Benz team. The second runners-up will potentially continue development beyond the Digital Challenge.

Past winners:

1. First prize Safe drive. Safe_drive is an app that monitors driving aptitude. It can also restore driver’s attention, testing driver’s ability to answer, take safety measures, and alert emergency services.
2. Second prize KarMa KarMa is an Android application designed using Mercedes Benz APIs. It provides a centralized platform, on which, the users can rely upon for all their car needs.
3. Third prize Virtuo — Virtuo is a game changer in the car rental industry.

$100,000 Small Business App Showdown 2018

Link: https://intuit.promo.eprizes.com/showdown2018/

Challenge:

The challenge is to publish a small business app on Apps.com. To be eligible, apps must be published on the QuickBooks App Store at Apps.com between August 16, 2017, and August 15, 2018.

Prizes:

Each of ten finalists gets:

• featured space in a Finalists gallery at QuickBooks Connect exhibition hall,
• a QuickBooks Connect pass,
• opportunity to demonstrate and pitch an app to a panel of judges and compete for $100,000 Grand prize,
• one additional QuickBooks Connect pass for a business partner,
• and three nights’ accommodations at a hotel determined by Sponsor in its sole discretion.

One grand prize is a $100,000 check.

Past winners:

ShopVOX . ShopVOX is a comprehensive web-based, easy to use solution for custom manufacturer businesses. It enables such businesses to manage everything in their shop. This includes sales leads, quotes, inventory, and workflow. It can also include production, invoices, staff, customers, vendors and much more.

Coding contest

Link: https://www.codingcontest.org/en/contest/ccc/

Start date: 27 April 2018

Challenge:

Programmatic tests and puzzles to solve during international competition in many locations. These will also be available online (all of them start at the same time).

Prizes:

• Prize for the online winner is 50€ Amazon voucher.
• Prizes for winners in locations are hosted by particular sponsors — “In locations with a raffle, you have the chance to win various prizes. The better you score in the contest, the more lots you get for the raffle. During the award ceremony, we draw lots and the lucky winners can pick one of the remaining prizes.”

Past winners:

Winners are divided accordingly to their locations and challenge categories.

Community Kickstarter Contest 2018

Link: https://www.milestonesys.com/nl/campaigns/milestone-community-kickstarter-contest-2018/

Challenge:

“Contest that invites coders and developers to come up with integration ideas that push the boundaries of video management.”

Developers have to create the idea built on top of Milestone’s video management software. They must also utilize the Milestone Integration Platform and the Software Development Kit (MIP SDK). The winning solution would be a concept, new functionality to the platform, a widget or code. The winning solution must be commercially viable and technologically possible. Additionally, it must function given the current features of the Milestone platform.

Prizes:

• $10,000 Cash prizes
• $20,000 development & certification resources
• $35,000 Marketing & event activities
• 5 Honorable mentions

Past winners:

Parking Spotter — an application that helps end-users find the closest available parking spot.

Aerolab’s Coding Challenge 2017

Link: https://aerolab.co/coding-challenge?medium

Challenge:

You’re asked to build a product grid for a reward program:

• Aerolab gives you the base UI and the API, and you’re welcome to use it as it is or improve it if you consider it necessary. The final product should be effective and yet visually attractive.
• The main goal of your idea should be helping users redeem items through a points-based system.
• You are allowed to use any technology you want. Finalists will be ranked according to a set of criteria, with extra points awarded for Innovation, Efficiency, and Visuals.

Prizes:

• The 3rd prize is a gift card for Bookdepository
• The 2nd prize is a pair of JBL headphones
• The 1st prize is a Raspberry Pi 3, and a year-long Premium Subscription to Zeit.co

If you like these contests, you might also be interested in Voucherify Developer Challenge. Learn various APIs and win a hackable Chromebook!