Please see my new site for my portfolio, projects, resume, etc. It is more up to date and a better representation of my abilities. I am currently in the process of creating a new portfolio and blog site with Gatsby. Blog posts and project pages will be generated from markdown files. In the short term, I will be using Gatsby plugins to bring my old blogs from this site as a headless CMS, but in the future, I plan on converting the blog posts from this site to markdown as well so I can remove WordPress altogether.
This is NOT a definitive guide to arrow functions. I’m writing a few other tutorials and blogs and want to have something to point people to so they can have a quick explanation and example of arrow functions since they are in so many of the modern frameworks. Just enough to be dangerous! To be clear, there are reasons where you should not use arrow functions, but they are not going to be discussed in this blog post. I just want you to be able to know how they work when you see them “in the wild”.
Let’s get started. I’m going to take you step by step converting a regular function into an arrow function.
Here’s a regular function using the function keyword
Let’s change that to an anonymous function expression
Should be nothing new here so far. No Arrows or ES6 yet, but here it comes…
First remove the function keyword and add the arrow
The only thing going on there is removing the function keyword and adding the arrow. And that’s it! You’ve gone and made an arrow function! Hurray! But wait, there’s more!
If there is only one argument, you can get rid of the parentheses around it.
Getting pretty lean but we can take it even further. If the body of the code is only one line, we can get rid of the curly braces.
Frequently, you’ll see these used as a callback in another function so there is no const and no function name. This is the case that we see quite a bit and the real reason I wrote this all up in the first place
This doesn’t do anything on its own, but as a callback it’s useful. Here we’re using as a callback for looping over an array with the forEach array method.
As a comparison, here’s a regular old for loop. Sure, we understand this as programmers, but the arrow function just reads like a sentence in normal language. So much easier to understand!
I think that covers the basics. Again this is not meant to be the definitive guide, just an intro to figure out what they mean because we see them ‘in the wild’ in all the modern frameworks.
I made a simple React app with React router that worked while clicking the links in the nav, but not if you enter those URLs in the location bar.
Netlify – Page Not Found Looks like you’ve followed a broken link or entered a URL that doesn’t exist on this site.
TLDR – make a file in the public directory called “_redirects” with this line in it
/* /index.html 200
What’s going on here?
Single page apps have one HTML file and everything is launched via Javascript from there. Routing is handled through the client, not the server so there is no file located at mySPA.com/about (for example). In a traditional HTML site /about would work if there was an index.html file in the /about directory. In an SPA however, something in the router code tells the browser what component/page to display when that route is asked for. So this file basically says “hey, anything you don’t find ( the * character) come back and look at the main index.html file, I’ve got router info there. Much success! (200)”
This didn’t really solve my problem but it got me looking around through the forums and I found something that said you need to use “redirects” to handle those pages (the ones that look folders with no index page)
First I found something about putting config information in a netlify.toml file in the root directory of the project. For me, putting the reccommened line in that file failed on build. I came across something that said to put the “_redirects” in my root directory which also didn’t do anything. I ended up doing a lot of clicking around before I got my solution.
My problem here was how my build folder is also in my .gitignore file so it never gets uploaded to github and my site is being built from my git repo! Finally, I realized I could just put the “_redirects” file into the public directory (same place as the index.html file for the site)
I wrote this blog because it took me 20 minutes or more of searching to figure out how to implement 20 characters of code. I’m not complaining about netlify mind you, they are an amazing product. There are a million different combinations of frameworks and languages that they are trying to support so there may not be a simple answer to my particular case. I just had a hard time finding the short answer so I hope to save someone the time solving the same issue.
TL:DR – put quotes around your EJS value when it is being used as an HTML attribute
I was making a simple Express app with EJS templating and MongoDB for my REST API. I passed the response, which was a few strings and a date, to the view in the typical fashion, and I could verify that the data was being passed by outputting the object to the view like this:
It pre-filled only the first word, “hot” instead of both words “hot dog”
I finally figured out that I needed to put quotes around it. When Express renders the page it simply replaces the EJS syntax with a string of text so the resulting HTML looked more like this:
which leaves dog just hanging out there, an attribute without any value which HTML just ignores in this case. Actually, if I’m interpreting the spec correctly, it is setting the value of dog to true which is any case is not used so again it is ignored. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
On June 20, 2019, I gave a presentation at our local freeCodeCamp meetup group about the static site generator, or progressive web app generator as they like to call it, Gatsby.
When learning web development, they all tell you to find a problem in your life and create a solution using code to create a great project. Well, I drive for Uber and I wanted to know when the most flights would be coming into my local airport. The airport website has listings, but it’s a cluttered mess. I wanted something where I could just see at a glance when the most flights were coming in. I could not find a public/free API for flight information so I needed to figure out a little bit of web scraping. Code and working example is here: https://codesandbox.io/s/7zx3v5kqmq and I did a video walk-through explaining how the code works here:
I’ve been making more videos and this time I’ve been working on the freeCodeCamp selection of algorithm challenges. I’ve been doing one every day and adding them to the playlist below. I’m twelve days in and the plan is to do one every day until I’ve got them all!
They are not professionally produced. I just turn on youtube and start typing generally. You may have heard of “rubber duck decoding” and this is basically how I make these videos. They are either me talking through some code I’ve just worked on or some are videos I’ve made where I’m trying to help a friend out with some coding issue.
