After completing the BlogSpace mini-project in Scrimba's Frontend Developer Career Path Module 9: Working with APIs, I decided to create my own local version.

I had used JSONplaceholder in the career path and wanted to tackle another resource. A Google search led me to Mockaroo, which does have similar functions.

Here are the interesting issues I had...

I always have to Google how to do this and messed up my first few tries, so here's the solution I landed on. The problem I encounter again and again is having to write out the hex codes twice; the first (line 3) with no dimensions is generally where I go wrong.

I've seen this cool effect on sites from awesome creators, but just now finally figured out how to do it!

The effect is a header element, usually, where it blurs out content as you scroll down and it follows you (sorry for the horrid explaination!).

You can re-create the effect in two steps:

1. Make the background colour or gradient colours a bit transparent like in line 6.
2. Create the blur effect by using backdrop-filter like in line 7. The higher the px's the more blurred it will be.

I attempted to get Dummy API to work, but couldn't manage it - in comes Mockaroo!

By playing around with the types, I found I could recreate the title and body object properties I worked with the the Scrimba project.

This had the added benefit of being able to see the created data beforehand.

Then I clicked on the Mock API tab to create the api key and link to use in my app.

It was a simple 3 step process:

1. Choose the method, GET in this case.
2. Define the endpoint with a name and file type.
3. Change the Handler Script => schema to match the name.

Then I re-used the code I had from the Scrimba project, which displays the posts via the renderPosts function and fetches the previous posts from the Mockaroo API.

The only additional thing to do was add the X-API-Key in the options object: