Why beginners should take coding notes

KevinConti — Wed, 01 Apr 2020 20:53:41 +0000

Why Take Coding Notes?

If you're looking to improve as a developer, you should consider taking notes to help solidify your understanding of new and challenging material. In any other field, we expect that professionals are focused on constant improvement. However in software development, it is often considered unnecessary to take notes.

There are three primary types of coding notes that you will want to be taking. Depending on your experience, you'll lean towards one in particular.

However, it's best to get in the habit of writing notes for all the note types!

1) Some code syntax that you have trouble remembering, or have learned for the first time.
2) A new concept that you learned.
3) An error message that took you more than a simple google search to solve.

While each note type is good for learning, there is a hidden power in capturing all three. When you do, you stop relying on your brain as the "Single Source of Truth" for your coding knowledge.

Imagine if I asked you for how you solved a tricky exception from a year ago. You likely wouldn't remember it. Even if you did, you probably don't remember the hours of exploring you did to come to that solution. Developers solve dozens of problems per day. The human brain isn't suited for remembering this data.

When you capture coding notes, you are able to let yourself forget.

The human brain is horrible at multi-tasking. When developing, your main goal is to keep focused on your code. By taking these notes, you follow a simple pattern of:

Get stuck
Find solution
Record it
Move on

There's no anxiety over if it's fully memorized, or even if you fully understand it. You have confidence that anything tricky is fully accessible whenever you need it. Having that promise improves the developer experience when you're working on a project.

If the ability to keep the code you're working on as the primary focus sounds good to you, check out my full post on the subject, which includes examples of notes and a detailed guide to implementing code notes into your workflow:

https://codernotes.io/blog/how-to-take-coding-notes

How to create a Sapper / Svelte Sitemap

KevinConti — Wed, 18 Mar 2020 21:13:49 +0000

Everyone said it would be 'easy'

Sometimes when I'm trying to do something simple and failing, like get a sitemap.xml file for my site, I get serious impostor syndrome.

When I was looking around, all I could find was how 'easy' this was supposed to be. Nothing will make you feel worse of a developer than trying to implement something simple for hours and failing.

Eventually, I was able to figure this out, and hopefully you don't have the same struggle I do.

TLDR: Code Snippet

If you just want the example, I've linked it here on CoderNotes

Explanation

First, an overview of how this works. Sapper allows for Server Routes, which are javascript files that can have get, post, put, or del operations on them. You can call those manually using a fetch() request, but we can use this behavior to create a sitemap.xml, since browsers make a GET request.

So, we make a sitemap.xml.js file in our routes folder, and export a get method. Check the note above to see the specifics.

Step 1: Get the list of your urls

Now, since these are server-side rendered functions, we are a bit limited in what we have access to in here. Our first job is to get access to the data we need to build the sitemap.

If you're lucky, you have a finite set of static files that you know of ahead of time, because you don't handle user-submitted content. If so, you can probably just get the urls the same way you do for the main portion of your site.

However, if you handle user-submitted content like I do, you'll need to go and fetch() your data.

A word of warning here. I originally tried to implement this sitemap by using svelte-apollo, since my database uses a GraphQL endpoint. svelte-apollo returns a store, and this totally broke. I'm not sure if there's some way to fix that, but your best bet is to make sure your data comes back to you as raw json from wherever you are querying. It'll make your life a lot easier.

Remember to call .json() on the response if you made a fetch() call!

Step 2: The render() function

Now that you have your data, we need to write a render() function. There's nothing special about this name, it's just a function that is going to take our data and turn it into a string that the browser can read as xml.

It's all very un-svelte like, so I'll walk you through the function:

First, the whole result of the function is one big string. We can tell javascript that we want a multi-line string by using these ticks `` instead of regular single quotes ''. The first two lines of our sitemap are boilerplate required by a sitemap.xml.

Next up is the interesting part. The ${} syntax is a template literal, meaning that whatever is inside becomes part of the string. The way it works is like this:

var myVariable = "Kevin";
var myString = My name is ${myVariable};

However, in this template literal we aren't just plugging in a variable, but calling a function.

The map function does the following:
1) Is called on the array of your data
2) Takes each item in the array and runs the function you pass in on it
3) Combines up everything you return back into one result

In our use case, we are going to map our array or data into a list of strings.

2b) map()

For each url we have, we want to return a block with a tag inside of it. We'll use another template literal to plug in the url.

You'll notice that I have a helper function for my example, called getPath(). I have to do this because when I fetch my data, I don't get back the raw URLs. So I need a function to build them (and since I wrote the logic of how they get built to begin with, that logic is just copied over here). You probably won't want to copy that function, and instead just use your head on plugging in your URLs.

Finally, you will get a bug and you don't call .join('') at the end! If you're noticing a bunch of commas in your sitemap, it's because you forgot this line. By default in javascript, template literals call the .toString() method, and since we are using the map() method, its toString() places a comma between the results around it. To fix this, we need to call .join(''), telling the map to join everything together without a comma before the template literal makes it call the .toString() method.

That's it for the confusing parts! Lastly, we'll head back to sapper world and return the result as xml.

3) Returning the result

The rest is pretty easy. We just have to make sure to set the header to 'Content-Type', 'application/xml'. You're probably used to returning 'application/json', but here that would be an easy mistake to make. Last but not least we simply call the res.end() function, passing in the result of our render() function, and we're all set!

Hopefully this saved you some time if you're coming across this issue. Figuring this out was a frustrating process as someone new to server-side rendering, and I'm honestly surprised that there's not an easier way to do this (or sapper doesn't take care of it for you). Please post in the comments if you have any questions, I'll be around!

If you want the full code snippet, again it can be found here:
https://www.app.codernotes.io/notes/creating-site-map-in-sapper-142

DEV Community: KevinConti