What if we build a knowledge map?

What is a core unit of knowledge?

Can you map out a graph of competence based on individual nodes of ability?

What does it take to implement a merge sort?

Unit: Have a computer

Unit: install a programming language

Unit: download a text editor

Unit: know how to type

… etc, etc,

This can possibly be infinite…

 

But what if you added a goal?

Goal: Implement binary search in javascript with arrays

I need to learn

  • how to iterate over a smaller and smaller range of indices of an array and terminate when done
  • how to return from a function
  • how to change the value of variables
  • how to perform a conditional check given an element
  • how to access elements by index
  • how to get the index of the last element in an array
  • how to access an element based on the midpoint of x and y
  • how to create multiple variables,
    • one pointing to x (type number)
    • one pointing to y (type number)
    • one to indicate success or failure (type boolean)
  • how to create functions in js
  • how to create variables in js
  • how to find the midpoint of the range (x, y)
  • how to create an array

This is likely what you will need to be “competent” in before you can achieve your goal, at least for a certain implementation.

You might know how to do none, one or many of these bullet points.

But knowing where you are is the important part.

And maybe if you knew where you stood, and you shared it, the people trying to help you know where to start.

 

Question: are these units reusable? 

Yes, you’ll likely reuse a lot of these

Question: who decides what goes in this list?

Anyone with a clear goal. The units of competence can be the “first principles” of ability that can be directed towards a goal. And everyone has different goals. In fact everyone may have different implementations for a goal. So maybe the goals are personal, but the units are universal.

Question: What is competence?

The ability to do something.

Ask yourself. Do you know how to do something, do you know how to do anything?

How do you know?

 


Deeper Questions:

So could you then take on the task of mapping ALL of your knowledge?

And would knowledge equal competence?

did.txt file

Goal: create an insanely simple “did” file accessible by terminal

Time flies by when you’re learning how to code. Its super important to take a second every once in a while to simple write down what you did during the past mental sprint. Writing down what you learned solidifies the knowledge.

Cue the did.txt file

This file is simply an ongoing timestamped list of what you’ve done. There are many other options, “Notes” on Mac, OneNote but since we do not want to lose the flow of coding, we need this in the terminal

Version 1. A simple txt file

Type in command into your terminal and simply type out what you did.

$ vim ~/did.txt

example did.txt file

Version 2. A simple txt file with time stamps

vim on your command line allows options and this includes running “ex commands”. Here we run the r read command and read the date command into the file as a timestamp at the top of the file.

$ vim +'r!date' ~/did.txt

Version 3. A simple txt file with natural time stamps

Its likely more natural for you to type at the bottom of the file so with normal Go we move the cursor to the bottom before reading from the date command.

$ vim +'normal Go' +'r!date' ~/did2.txt

example did.txt file

Final Version. An alias to open did.txt

Final Step: Create your alias and add this to your .bash_profile.

alias did="vim +'normal Go' +'r!date' ~/did.txt"

Congrats!

Now running $ did in your terminal will bring you to your very own did file!

example did.txt file

 

For more about vim

Set up your programming environment

*wip

Must have for your Mac

Get homebrew – no longer drag an icon to install

Homebrew – “the missing package manager for macOS” will make it so much easier to download, upgrade and maintain your packages. It will install packages super transparently in /usr/local/Cellar/* and symlink commands to /bin.

Must have for node.js

nvm

a version manager for node. You will likely use many different node versions if you are pulling down different production repos, nvm will help you install and switch the the correct versions.

node.js

use nvm to install the latest version of node.js

$ nvm install node

 

TODO rust, iOS, python, scala, screen sharing

Weather reports from your terminal with curl

What is curl?

curl is a program that is included in your Mac OSX distribution used for transferring data from or to a server. It uses many supported protocols (HTTP, HTTPS, FTP, SMTP and more).

Do you have curl?

Find the location of the curl program (executable) with $ which curl. This will return /usr/bin/curl if you’re on Mac.

How do I use curl?

A simple http GET request can be made like this:

$ curl google.com

How to deal with 301 redirect 

Notice that you get a 301 message that is address has been “moved”. You can add the flag -L, --location (choose either) to “follow” redirects

$ curl -L google.com

$ curl --location google.com

How do I use curl to get the weather?

There is a service called wttr that is set up to return weather reports when you curl their service. This time we will use http for added security.

For a full local weather report:

$ curl https://wttr.in

Should I use http?

For todays weather report:

$ curl https://wttr.in?0

You can also specify a city or ski resort.

For todays weather report for New York:

curl https://wttr.in/~NewYork?0

Check if its snowy in your favorite ski resort – Charlotte Pass, Snowy Monaro, NSW, Australia

* Notice that wttr is returning special terminal characters to change the color. You can save these to examine this in your text editor.

Congrats! You got the weather!

Note that you can curl any web service, even ones you build yourself.

Want to build your own weather service? We’ll do that next in the Part II of this series.

Bonus Section:

Can I curl my own websites?

Yes! If you followed our github pages tutorial you’ll find you can curl your own website AND YOUR STATIC FILES

$ curl -L theptrk.github.io  <- website

$ curl -L theptrk.github.io/api/message.txt <- static txt file

 

*Update – this post got onto the hackernews front page and since then the API for wttr.in has been down. **Update, the API is back up!

Github Pages tutorial and exploration!

What is Github Pages

Github allows free and easy hosting for users to create an html page to represent users, organization and projects. All you have to do is upload your files through version control (git) and Github will serve your html, css and js – all static assets*.

How do you create a github page?

Step 1: Create a repo

Simply create a github repo called <username>.github.io.

My username is theptrk so I created the repo theptrk.github.io.

* Here are the command line instructions on your Mac:

curl -u <user_name> \
https://api.github.com/user/repos \
-d "{\"name\": \"<repo_name>\"}"

Step 2: Upload your index.html

Github will serve your index.html page by default so create this and git push

This is the most simple way to create  an html page

$ echo "Hello world!" > index.html

Step 3: Push your files to github

$ git add index.html

$ git commit -m "My first commit"

$ git push origin master

Visit your new Github webpage!

url: <username>.github.io

Mine is located at https://theptrk.github.io

What next?

Note that all your files are completely accessible at this path.

So if you create a javascript file called kale.js, you can access it with

https://your_username.github.io/kale.js and your index.html.

 

Exploration

Github will serve your static assets.

Will github serve text files?

Yes! I’m serving an entire copy of the Autobiography of Benjamin Franklin here

Will github serve css and javascript?

Yes! Add css files to your repo and reference them in index.html.

On most major browsers, you may even have module support like this:

|- index.html
|  <!DOCTYPE html>
|    Hello World
|    < script type="module" src="kale/index.mjs"></script>
|  </html>
|- mjs/
  |
  |- index.mjs
  |    import { hello } from './hello.mjs'
  |    hello()
  |
  |- hello.mjs
  |    function hello() {
  |      console.log('hello modules!');
  |    }
  |    export { hello }

When should you build your own ecommerce site vs using shopify?

Never.

Really not ever if you need to ask this question.

If you are building a new shopping experience, you likely aren’t really asking this question.

If you simply want to sell stuff online, do not go build a front end, payment system, taxation system, inventory management, temporary sales management, email collection, analytics, reviews, tags, discount codes, shopping cart, in-store blog with an authoring system, SEO optimization for images and links, and more just so you can sell your hand made soaps.

 

Put the keyboard down, use this Shopify referral link, sell your wares.

vim settings: tabs, spaces, indents

Basics

tabstop – amount to indent when using <Tab>

shiftwidth – amount to indent when using ‘>’ or ‘<‘

expandtab – always insert spaces at the amount of tabstop

set tabstop=4 set shiftwidth=4 set expandtab

 

How to change tab size based on filetype

setting it inline

make sure there are no spaces between the languages

autocmd FileType javascript,haskell set tabstop=2 shiftwidth=2

setting it with a function

autocmd FileType javascript, haskell call s:set_indents_at_2()

function! s:set_indents_at_2()
  set tabstop=2
  set shiftwidth=2
endfunction

 

How to detect if a user is online

Many browsers have implemented events “online” and “offline”; in addition to this, browsers also expose the navigator.onLine property that will return “online” or “offline”

How many browsers is many?

caniuse says every major browser (Chrome, Firefox, Safair, IE11…) except Opera mini has this functionality (as of July 4th 2018).

How can I check the online status?

> navigator.onLine

How can I listen to events?

BE LOUD

Be loud if core functionality depends on staying online

If your app depends on autosaving,

BE LOUD ABOUT NOT BEING ABLE TO SAVE.

Be like workflowy*. Tell the users, make them listen.

Caveats

You will likely need more error handling than this. For example: what if your server is offline? what if the request body has malformed? what if the server is up but your database is down? what if the api hits a 404 and do you let your devs know about this?

* referral link

How to protect your files from deletion

I wrote about this before, but its important enough to write twice

How to revoke write permissions to a directory

How to revoke your own user permissions 

$ chmod u-w dirname

How to delete all permissions from anyone on your system 

$ chmod a-w dirname

removing write access on a file does not stop it from being removed,

you must remove write access to the directory to protect the file from deletion – Ice Bear

How to test this

To test this, simple change the permissions and try to $ rm any_file_name. You can even rmdir dirnameand it will protect the directory from deletion

why vim?

vim is vi(improved)

vim is a powerful way that allows you to transform your thoughts into action in as little keystrokes as possible. In fact, the subtitle of the book Practical Vim is this:

“Edit Text at the Speed of Thought”

With that said, vim has a steep learning curve that often does not feel worth it if you are used to Command+c to copy, Command+v to paste and you like thinking while moving your mouse.

Its mostly mindful awareness

If vim has done one thing, its made me very cognizant of what I am trying to achieve. The emphasis on achieving as much in as little time, and the freeing of mental overhead from reaching all over the place, allows me to approach programming much more mindfully.

But as of today, “How to exit the Vim editor?” has 2644 votes on Stack Overflow!!!

 

Heres a tiny walkthrough.

vim intro walkthrough

Step 1: change var to const

To change var to const you simply need to type: ceconst<Esc>

where: c means change, e means until end of word, <Esc> takes you out of insert mode

 

Step 2: delete the word function

To get to the word “function” type: ff

where: f means find, the second f is the letter to find

To delete a word: de

 

Step 3: add an arrow behind the opening curly brace

To get to the char “{” type: f{

To insert “=>” type: i=><Esc>

where: i means insert, => is your input

 

Notice that we never touch the mouse! We never reach for the arrow keys.

In fact with the right shortcuts, you never take your fingers off the home keys. It’s really hard to state how much this frees your mind.

Until Elon Musk’s Neurolink allows as to change modes AND input text by brain implants, vim will be how to change text.