Thread by @jamonholmgren

I’m considering doing a free Twitter coding workshop, teaching people how to make a command-line app using a twitter thread.

Basically, i would sign up interested people by tagging them, and then step-by-step show them how to build the app. All in public.

Anyone interested?

Okay, to sign up, reply to this tweet with a terminal or command line screenshot with the results of “node -v” so I can see it’s installed.

To install Node: nodejs.org/en/download/pa…

Windows: Windows+R, “cmd.exe”
Linux: console (ctrl+alt+A)
macOS: Spotlight, “terminal”

Just needs to be Node 8+.

I'm going to start in a couple minutes here, even though it's late notice and people haven't had time to sign up.

This is a bit of an experiment. I don't know how well it will work. We'll all learn together ... in public. :-)

My first guinea pigs will be:

@JS_Jedi
@innthomas
@blackbeardcoder
@Fallenstedt

If you want to be added into the mix, let me know and I'll tag you in future tweets.

@JS_Jedi @innthomas @blackbeardcoder @Fallenstedt We're going to build a command-line app that will let us analyze a code base and report back how many lines of JavaScript, HTML, CSS, etc there are in the source code.

@JS_Jedi @innthomas @blackbeardcoder @Fallenstedt Adding @jordne and @codefriar to the mix! Welcome aboard, folks.

@JS_Jedi @innthomas @blackbeardcoder @Fallenstedt @jordne @codefriar Let's start. I'll add new peeps as I go.

STEP 1

Navigate to a folder on your computer where you keep your experimental projects. Mine is ~/Code/Temp

A. "Like" each tweet when you've done the step.
B. If you need help, reply to the relevant tweet.

New peeps: @edelman215 👋

@JS_Jedi @innthomas @blackbeardcoder @Fallenstedt @jordne @codefriar @edelman215 STEP 2

Let's use `npx` to run Gluegun's CLI, which will create a new CLI for us to modify.

npx lets you run CLIs without installing them globally. It's part of Node/NPM.

npx gluegun new codecounter

Choose TypeScript. Yes, we'll be using TypeScript for this. 😇

@JS_Jedi @innthomas @blackbeardcoder @Fallenstedt @jordne @codefriar @edelman215 STEP 3

If all goes well, you should see something like this. CD into the folder and run `yarn test` and `yarn link`.

If you don't have yarn, run `npm test` and `npm link`. They should work the same.

Ignore the part about `yarn build`, we won't be doing that ... at least now.

@JS_Jedi @innthomas @blackbeardcoder @Fallenstedt @jordne @codefriar @edelman215 STEP 3B

I ran into a test failure. This is a Gluegun bug that I'm aware of and in the process of fixing, but let's go ahead and fix it now in our CLI.

Open the app in your favorite editor. I use VS Code, so I go:

code .

@JS_Jedi @innthomas @blackbeardcoder @Fallenstedt @jordne @codefriar @edelman215 STEP 3C

We don't really even need the command that is failing. So let's remove it from our tests.

Go to __tests__/cli-integration.test.js and remove this highlighted section. Re-run your tests and they should pass.

yarn test

@JS_Jedi @innthomas @blackbeardcoder @Fallenstedt @jordne @codefriar @edelman215 The lesson here is if tests fail, just delete them, students.

😂

Onward...

@JS_Jedi @innthomas @blackbeardcoder @Fallenstedt @jordne @codefriar @edelman215 STEP 4

Gluegun ships with 3 different folders in the src directory: commands, extensions, and templates.

We won't be using the templates folder or the `generate.ts` command, so you can safely remove those.

@JS_Jedi @innthomas @blackbeardcoder @Fallenstedt @jordne @codefriar @edelman215 STEP 5

If you've run the `yarn link` / `npm link` step, you should be able to run your CLI like this:

codecounter

@JS_Jedi @innthomas @blackbeardcoder @Fallenstedt @jordne @codefriar @edelman215 STEP 5B

Let's modify that default command to see how it works.

print.info('CodeCounter Version ' + toolbox.meta.version())

Re-running your command should show the version.

@JS_Jedi @innthomas @blackbeardcoder @Fallenstedt @jordne @codefriar @edelman215 STEP 5C

This is a good time to introduce the Gluegun "toolbox". You'll be using a lot of its tools as you build out your CLI, so check out the docs here:

github.com/infinitered/gl…

@JS_Jedi @innthomas @blackbeardcoder @Fallenstedt @jordne @codefriar @edelman215 STEP 6

Let's make a new command called "codecounter count". This will take a folder name and then recursively walk up the tree to find all files with the languages we care about.

Just make a new file in ./src/commands called "count.ts" and add the following.

@JS_Jedi @innthomas @blackbeardcoder @Fallenstedt @jordne @codefriar @edelman215 STEP 7

Now let's actually list out files in that folder.

We'll use the filesystem.find command:

github.com/infinitered/gl…

Modify the command to import the filesystem tools and use the command to find files. If you run it against our own ./src folder, you'll get the 3 TS files.

@JS_Jedi @innthomas @blackbeardcoder @Fallenstedt @jordne @codefriar @edelman215 STEP 7B

We don't just want typescript files, though. Make a few dummy HTML and CSS files in your src folder and then modify the `matching` option to be:

matching: '*(*.ts|*.html|*.css)'

I made it its own variable so it's easier to modify later.

@JS_Jedi @innthomas @blackbeardcoder @Fallenstedt @jordne @codefriar @edelman215 STEP 8

Now let's count all the lines of code in each file and get the result.

I was going to be unnecessarily clever here and use a reduce function, but -- nah, let's use a forEach.

Here I loop over the files, check the extension, and next we will need to increment each type.

@JS_Jedi @innthomas @blackbeardcoder @Fallenstedt @jordne @codefriar @edelman215 STEP 9

We use the `filesystem.read()` tool to read in the contents of each file, and then count the lines by splitting by line breaks and counting how many segments there are.

github.com/infinitered/gl…

@JS_Jedi @innthomas @blackbeardcoder @Fallenstedt @jordne @codefriar @edelman215 STEP 9B

If you run the command, you should see something like this.

Cool! We have the data. But it needs to be formatted.

@JS_Jedi @innthomas @blackbeardcoder @Fallenstedt @jordne @codefriar @edelman215 STEP 9C

@codefriar asked about how we would use the reduce function here. Let's do it!

As you can see, it's not really much cleaner here. There are some cases where it feels cleaner and shorter but this isn't one of them.

@JS_Jedi @innthomas @blackbeardcoder @Fallenstedt @jordne @codefriar @edelman215 STEP 10

Let's format the data.

Gluegun comes with a table printer, print.table.

github.com/infinitered/gl…

We're going to format the table as "lean" and also use Object.entries as a quick way to separate the key/value to arrays of 2 (tuples).

@JS_Jedi @innthomas @blackbeardcoder @Fallenstedt @jordne @codefriar @edelman215 STEP 11

We're done!! Try it out on your node_modules:

Post your screenshot!

@JS_Jedi @innthomas @blackbeardcoder @Fallenstedt @jordne @codefriar @edelman215 BONUS STEPS

1. Try sorting your data from most to least
2. Try adding JS, Markdown, and other source file extensions

@JS_Jedi @innthomas @blackbeardcoder @Fallenstedt @jordne @codefriar @edelman215 3. Eliminate any languages with 0 lines of code
4. Translate the simple file extensions to their full names in the table
5. Allow passing in file extensions, like:

codecounter count ./src --types "js|css|swift|go"

Hint: check `toolbox.parameters.options`!

Other ideas?

@JS_Jedi @innthomas @blackbeardcoder @Fallenstedt @jordne @codefriar @edelman215 Maybe comma style for the numbers (32,767 instead of 32767), abbreviating as 32k, etc?

@JS_Jedi @innthomas @blackbeardcoder @Fallenstedt @jordne @codefriar @edelman215 By the way -- notice how much TypeScript we actually used?

Not a lot.

But it was there, keeping an eye on things regardless!

@JS_Jedi @innthomas @blackbeardcoder @Fallenstedt @jordne @codefriar @edelman215 Here's the source code for what I built: github.com/jamonholmgren/…

Next #TwitterCodeClass will probably be Thursday, not sure what time yet. Probably workday for west coast USA. Keep an eye on this space.

https://twitter.com/jamonholmgren/status/1181599674240622593