codePen, notepad, and vim — oh, my!

CodePen is pretty amazing if you understand how to use it.  Most campers don’t.  This may be in part because FreeCodeCamp doesn’t require anyone to watch a video on how to set up CodePen and some people won’t do stuff unless you make them.

When creating a pen, there are options.  The best option is to create from a template but to do that, you need a template first.  This is one of those techniques that is helpful for people who will use CodePen more than once. That should be you.  So, without further ado, let’s build a simple FreeCodeCamp template.

Create a new pen.  It will come up blank, with three editing panels and a white area. If you don’t like where the editing panels are, you can click on the [Change View] button at the top and choose from left-side, top, or right-side display.  If you don’t like the colors, you can change that, too, but we’ll get to that in a moment.

Click the [Settings] button.  This will pop up an screen with settings for this particular pen.  It will look like thisNotice on the left it has Pen Settings and some tabs.  We’ll go through them one by one.

The first one is HTML. This is where you put your stuff for your <head> element.  Things like Google fonts go here.  Also if you’re suing Pug or another preprocessor or if you link to other resources. Do not link CSS or JavaScript resources here. These each have their own tab. If you don’t know what any  of what I wrote means, leave these fields blank because that means it doesn’t apply to you. However, since we’re building a template, I’m going to tell you to take something on faith. Click the black button at the bottom of that side. This will aid in making any of your sites responsive. It says [↑ Insert the most common viewport meta tag].

Next comes the CSS tab. This screen allows you use LESS or Sass or other CSS preprocessors or link to external CSS files.  You can load Bootstrap here using the button at the bottom that says [Quick-add].  If you want to use the version of Bootstrap that has been covered in FCC lessons, use Version 3.  Do that now, actually, as that’s something useful for the template.

The next tab is JavaScript.This is similar to the CSS tab in that you have a list of preprocessors you can choose as well as places to add external JavaScript resources.  Click the [Quick-add] button and add Bootstrap.

The next tab is about CodePen itself, not about your project code.You can choose the way your code displays.  I use spaces, set to two.  Uncheck Save automatically.  Since you’re doing this over the internet, it’s a bandwidth hog to save after every keystroke or few.  AutoUpdate is also a bad idea. Make sure neither is checked.

Now let’s turn our attention to the part on the right. Give the pen a good title Template or myTemplate or something similar. Describe it in the box for that.  And, most importantly, toggle ti to Template status.   Now click the green [Save & Close] button and voila! you have a template.

I promised we’d get back to changing the color of our editor. Now is the time. Click on your avatar picture on the top right corner and choose Settings from the drop-down menu.  You’ll get a screen similar to this one.Colors are on the top left, either individual settings or themes.  There are other settings too.  Once you have it how you like it, the save button is on the top right.

This is my current setup. You will notice the vim key bindings. Since I tend to run Linux Mint (that’s all my laptop has at the moment and my desktop dual-boots to Win10), I tend to use vim quite often to edit files. When I develop anything locally, it tends to be in vim (unless it’s Python, in which case I use idle).

This is not a public-service announcement for vim.  I’m not recruiting anyone. Use what works for you, but here’s why I use vim.

  • Most Linux or unix-flavored boxes have it.  I can also get it for Windows.
  • It works when I install it, without a lengthy setup procedure.
  • I can add features as I need them, optionally saving to a local config file.
  • I’m accustomed to it.  My fingers remember how to do common tasks.

If I’m on an unfamiliar Windows machine, I’ll use NotePad. Because I know how. Same with TextEdit on a Mac. It’s not that I’m averse to other editors.  People joke about not knowing how to exit vim, but honestly, any program without a menu has that issue.  It’s not a vim issue, per se.

It’s all about the learning curve.  CodePen has one and so does vim.  CodePen has a shallower one.  By all means, learn it.  It makes it much easier to share your code.  If you are going to do serious work in Linux, you should probably learn enough vim to edit basic files.  But don’t use it for your everyday editor unless or until it becomes familiar enough that you catch yourself using vim commands in non-vim spaces.


(just kidding)

git Your Project on GitHub (calculator)

If it’s not one thing, it’s another.  This is life; this is coding.

So, my calculator didn’t trim rightmost zeros.  It does now.

It wasn’t accepting a decimal point on zero.  It does now.

It also was allowing miscreants to press the ± button on operators and causing all manner of havoc.  You can still break it by doing things that aren’t natural, but most natural things are covered.

And the repeated application of = still works.  I’m about ready to turn it in. So, that meant converting it to 3 files and putting it on my local drive and then gitifying it. This was an interesting process. I found out that my buttons were too big (fixed) and too close together (fixed) and a few other nitpicky stuff.

Here are the steps to gitifying  a project from the command line (I iterate, I am totally lost with GUIs):

  1. Do the project. This should be a no-brainer, but you look rather silly with empty stuff on the repo.
  2. Make sure you have a git. Installing a git is beyond the scope of this document.  FreeCodeCamp uses GitHub. This is for Win/Mac users.  I have a dual boot capacity so I run the GitHub software on my Win partitions.  I won’t tell you what options to use because I operate command-line style.  I reiterate, I am totally lost with GUIs.
  3. Put your project in your special place. My special place has a long name and a short name.  The short name is a symbolic link (I run Linux and a symbolic link is a fancy name for a shortcut) of gitstuff in my home directory.  I make a directory for the new project in gitstuff and I can always find it. So, in this case, it’s ~/gitstuff/calculator/ I have three files there at this point
    • index.html
    • style.css
    • script.js
  4. Make a file.  Directions on markdown can be found on the Markdown Cheatsheet.  I shouldn’t need to tell you how to do this (after all, you made those other three files).
  5. Make a file.  This is trickier. You can get one from  Mark it down.  Make it your own.  You will now have five files in your directory.
  6. Initialize your git. Type git init at the command prompt in your project directory.
  7. Go to GitHub and start your project. If you’re not logged in, log in and click the [Start a project] button.  Fill out the fields. When you are finished, click the green [Create Repository] button. The page asks for the following:
    • Repository Name: this should be short.  Mine is calculator
    • Description: this should be a little longer but not much, explaining what it is
    • Public/Private: unless you pay, it’s public.
    • Initialize with a README: do NOT check this, as you made your own in step 4.
  8. Go back to your project folder and do a remote add.  You need the URL from GitHub.  It’s in the box at the top of the screen.  Type the command git remote add origin followed by that URL from the box.
  9. Add your project files to your local git. Type git add . at the command prompt in your project directory.  Don’t omit that period.
  10. Commit your work.  Type the command git commit -m “initial commit” at the command prompt. The stuff in quotes is your commit message.  Since this is the first one, that’s what you say.
  11. Push it to GitHub.  The command for this is git push -u origin master and it will ask for your account name and then your password. The account name will display, the password will not.

After all that, your project is now on GitHub.  If your project is a Website type thing (like the calculator) people won’t be able to view it as a page unless you do another step.  Go to the Settings tab and scroll down to GitHub Pages. Under Source choose Master Branch and click Save.  

This sounds like work, but it is worth it.