Finally some JavaScript projects!
Reflections from my latest two challenges of Free Code Camp’s Front End Certificate
Random Quote Machine
- I experimented more with media queries and definitely see how they can be used.
- I tried to use an external API for the quotes but didn’t find any reliable solution so I ended up collecting quotes in an array and simply pick a random one by it’s index.
- When adding the Tweet-button, some versions of Firefox threw security errors due to bad CORS (Cross Origin Resource Sharing), a mechanism limiting the permissions of resources loaded from other domains. The issue was that Twitter wanted me to execute scripts loaded over plain HTTP. Since this was forbidden by the current CORS-policy, I had to force a HTTPS-connection when loading Twitter’s scripts.
Local Weather
Required Features
- Show weather for the user’s current location.
- Toggle temperature unit by clicking the unit-symbol.
Bonus Features
- Cache API-responses for some time to decrease both data usage as well as load on the API-servers.
- Generate a background color corresponding to the current temperature (using Chroma.js).
- Verify API-responses before updating the cache. If a fetch fails, try to fall back to cache.
- Store all settings in a config-object for easy configuration.
- Regularly update UI with new information.
My initial thought was to use navigator.geolocation to get the user’s location. However, that API only works on web pages that use HTTPS-connections in Chrome-versions 50 and newer so it turned out to be a bit harder than that. I like that Google takes this approach to try to make more developers invest in security and I don’t have any problem with the lack of this API other than it would require too much extra work to setup a solution with HTTPS for this small project.
After testing a few alternatives, I came across a simple HTTP-API that approximates the location based on the user’s IP-adress and this worked well enough for this small weather widget. Then, when I had the geo-coordinates I could fetch weather data for the current position and display it in the UI.
Something worth noting is that I used newer features of JavaScript fully aware that it would break support for older mobile browsers. But since mobile support wasn’t a requirement I limited the scope of the project and put my focus on other features.
To display icons matching the weather, I used OWfont. Since the font wasn’t available through any CDN and CodePen doesn’t let you upload assets unless you pay for it I had to import the font some other way. I happened to stumble upon RawGit, a fantastic service that hosts content from GitHub repositories through a CDN which in this case allowed me to use the latest version of the font simply by including a link.
This project was created without jQuery. I knew from previous experience that DOM-manipulation have gotten much better in the last few years. The main reason I would have used jQuery was that the XmlHttpRequest-API seemed clumsy to work with. But when I looked at the details, it actually turned out to be pretty clean.
Before finishing up, I spent some time refactoring my code to improve readability. For example, I split some bigger functions into several smaller, more specific ones and also made sure that each function had a good name as well as a proper doc-comment to explain parameters and return values.
I had a good project workflow and prioritized features. Even though these two projects aren’t that special it feels like I’ve learned a lot. Can’t wait to see what problems the more advanced challenges might bring!
