So I have been going through some code tutorials to learn front end web development. I was familiar with HTML back in middle/high school, but I have not kept on on modern web development at all! Nonetheless, I feel like all the great coding that I have done for computations, etc is cool and all – but having the skills to create a nice front end user-facing tool is really needed to bring that great work to broader audience. I had experience doing wxPython applications back in grad school, and recently I have learned R-Shiny which is quite powerful. Now I’d really like to get to the basics with some JavaScript!
As such, I’ve been using FreeCodeCamp‘s online courses to begin to develop my skills (so far I have done the Responsive Web Design Certificate and Javascript Algorithms and Data Structures Certificate in my limited free time after work. Honestly, the website says that it takes 300 hours, but I completed both in much much less than that.
I recently completed Front End Development Libraries certification, and I’d like to use this WordPress Page to link to the JavaScript projects that I’ve been working on as well as to document some of the things that had to be done to get these projects stood up on my own machine (and eventually on coolsciencey.com).
Front End Libraries
- Quote Generator (React – GitHub)
- Markdown Preview (Svelte – GitHub)
- Drum Machine (Svelte – GitHub)
- JavaScript Calculator (Svelte – GitHub)
- 25+5 Clock (Svelte – GitHub)
Data Visualization
- Bar Chart (D3 – GitHub)
- Scatter Chart (D3 – GitHub)
- Heat Map (D3 – GitHub)
- Chloropleth Map (D3 – GitHub)
- Tree Map (D3 – Github)
Getting Set Up
Coding on My Own Computer using WSL/Ubuntu
For these projects, i desired to manage my own environment rather than use codepen.io. I used Windows Subsystem for Linux (WSL) which comes pre-installed with Windows 10+ (really a game changer for coding on Windows, in my opinion). After installing WSL; install Ubuntu from the windows store and you’re good to go.
Setting up ubuntu, node package manager (npm), create-react-app, and/or svelte-kit
I was able to get everything set up on my linux environment, and I wrote up these instructions on how to do it. Which were a combination of the sources found in the “References” section.
Consider using pnpm rather than npm, which does not re-install dependencies every time resulting in smaller development disk space usage! I had to manually install some d3 dependencies to get it to work with svelte-kit, but otherwise didn’t have any issues.
Project Comments
Front End Libraries – Project 1 – React
At first, for project 1, I used React/Redux as was taught in the Free Code Camp course. The React front end framework, backed by Facebook is a very popular front end library and it seems like a natural choice for folks who are just getting started. Unfortunately, state management through Redux, I felt, made this approach more complex than was necessary (especially for simple apps like this one).
Front End Libraries – Project 2-5 – Svelte
For projects 2-5 I decided to use Svelte which was recommended to me by a colleague. Relative to React, this new front end framework(not actually a framework, more of a compiler), is supposed to be more lightweight than React and faster to load. It is growing fast, but is not nearly as widely used as React. As I was learning Svelte, I found the Svelte web tutorial very informative and was more than enough for me to get started with the language to complete these projects. I found the syntax of Svelte to be quite appealing and easy to understand and interact with; it also created very lightweight apps and worked will without a huge learning curve.
Data Visualization – Svelte/D3 combo
“Data Driven Documents” or D3 – has always intrigued me as a way of displaying charts and graphs within a web browser. Previously I had used a d3.js product, Plotly, in projects that I had built in Python and R. While the interactivity of Plotly charts is very good out of the box, I felt like learning D3 would be a worthwhile use of my time since it’s the gold standard for data visualization in web browsers. The Free Code Camp Data Visualization Certification is a decent introduction to API calls and using D3. I found the examples themselves not particularly useful – but the projects were a good way to build a decent skillset in setting up simple (and some more complex) d3 charts. I had done this one in Svelte as well, but honestly not many Svelte components were actually used in my projects; however I think that Svelte and using Sveltekit is easy enough that it made sense to start a new project with this every time!
Conclusions
Anyways, this was a nice experience, and I think that my next step will be to redo my Covid dashboard using JavaScript!
References
- create-react-app instructions
- svelte-kit instructions
- svelte adapter-static build instructions (needed for coolsciencey.com since I do not have root access to run sever side rendering)
- ‘smui’ Svelte Material UI bundle – used for ‘icon-button’ in project 5