Welcome to this series.
Instead of giving you one giant blog post, I give you multiple smaller ones. You can decide if you read all of it or jump to the more advanced stuff in the later sections of the series.
This post serves as the introduction and gives you an overview of what to expect in each of the parts. It will also tell you about some of the conventions I use throughout the series and how to run the code examples.
Table of contents
And no: no ice cream involved.
If you are familiar with other programming languages such as Python or R, you might have some expectations about what a programming language delivers in terms of data manipulation tools.
Well, let me tell you a good thing and a bad thing.
Let’s go through a quick breakdown of the separate parts of this series.
Data Wrangling in JS: 01 Basics
Data Wrangling in JS: 02 Array Methods
The second part demonstrates useful methods that let you characterize a dataset.
map() are introduced with practical examples.
Data Wrangling in JS: 03 Advanced
The third part extends the basic methods that let you characterize a dataset.
sort() are introduced.
Map() has a reprise with some fundamental data wrangling applications.
A lot of Accordions. I mean these things:
I'm an Accordion!
Overview first, details on demand.
You decide how much you want to read.
Some of these contain links to further resources. Others contain some advanced examples. If you ignore all of them you will still get the main message of what each post is trying to say.
So feel free to just skim through the main texts, or go through the Bonus-Parts as well.
If you’re reading this on mobile that’s fine too, but I assume you won’t plan on running any code then.
So, there are two ways I recommend to run the code examples: the console or REPLs.
If you never opened the console of your browser before, I encourage you to try this right now (tested on Firefox and Chrome): press
Shift + Ctrl + I.
This brings up your developer tools, of which there are many.
In the top row select the
Console tab and then copy & paste the following
alert code and press
Stop, I use Mac OS!
If you’re trying to do this on a Mac for the first time, it is slightly harder. Here are the steps you need to take:
- Click on the Safari menu in the top-left corner of the screen.
- Select “Preferences” from the dropdown menu.
- In the Preferences window, click on the “Advanced” tab.
- At the bottom of the Advanced tab, check the box next to “Show Develop menu in menu bar”.
- Close the Preferences window.
- Now you should see a new menu item “Develop” in the top menu bar. Click on it.
- From the Develop menu, select “Show Web Inspector” or press the shortcut key combination
Option + Command + I.
In the top row select the
Console tab and then copy & paste the following code and press
Congrats, you’re now a hacker! If you’d rather be an accountant, feel free to use the console as a fancy calculator on any website :)
No, but seriously: you can run all the code snippets in your browser’s console like this. Just make sure you follow along and have fun.
Further resources on developer tools
If you’d rather have a more persistent scratchpad to run the code examples and maybe take some notes, then I recommend you try a Svelte REPL.
Here is what the one linked to above looks like:
In the most basic way you can think of it this way: the
App.svelte allows you to combine three things in one place:
- you write CSS declarations in a style tag
How to save your progress
If you want to preserve your precious notes, you can simply log in with your Github credentials. But you can also use it without logging in at all.
If you don’t want to log in, you can still download the current status of your REPL as a zip file.
If you want to run that zipped app locally and have no clue where to begin: This article called Svelte for new developers is still up to date and very concise.
If you want a longer version (albeit a bit older): The Mozilla Web Docs got you covered. Check out their guide Getting started with Svelte, which links to everything you need to get up to speed and adds commentary on most of the moving parts.
What is a REPL?
Glad you asked: REPL is short for Read–eval–print loop, which Wikipedia defines as “a simple interactive computer programming environment that takes single user inputs, executes them, and returns the result to the user”.
Frankly, a Svelte REPL is a little more sophisticated than that, because the user input is not very restricted.
You can define multiple components and build full apps within a Svelte REPL.
With all this out of the way: go ahead and read the first real post!