It’s a snap!

Snap is a programming language that is intended to teach programming concepts without the pesky need to learn syntax.  If you’ve ever worked with Legos, K’nex, Erector or other component systems, it’s a similar concept.  Sounds easy, right?  It’s harder than it looks.

Here’s the screenshot of Snap, which can be run entirely online.The area on the left is the set of blocks you can pick from; at the top there are eight options for sets of blocks you can have displayed there.  The default is the first one, Motion.

So, when I loaded Snap for the first time, I did what any respectable programmer would do—I set about writing a “Hello, world” program in Snap.  Oh, my!  Where to begin.  Well, you need to start the program and you need to “say” the text “Hello, world!” and you need to end the program.  Well it turns out the start and end stuff is under Control.  The stuff to say things is under Looks.  And the stuff to tell it, no, you can stop saying it already (forever is an option but ewww!) is under Controls too but the condition you need to test is under Sensing.

After fiddling around with it, I discovered if you only say “Hello, world!” and end, it disappears before the user even is aware it was said.  Not good. There are options. You can set a duration or you can set until an event. I chose an event and the event I chose was a mouse-click.  Here is my version of “Hello, world!” in Snap.Next up. Pong.  Yes, you read that right.  I’m going to be a teaching assistant for a school in Hillsboro, North Dakota (remotely) and I’ll be introducing high school students to programming through Snap and then Python. So for the next while, you’ll be reading more about TEALS than FreeCodeCamp.

TEALS (Technology Education and Literacy in Schools) is the program through which I’m lucky enough to get to reach out and teach the next generation.  I have five(!) kids and of them, only one did any amount of coding (and that was a phase—he’s becoming a paralegal). This is my way of sharing my passion.

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.

:wq

(just kidding)

pomodoro: for whom the clock beeps

Guess what. I don’t care if my clock has a few millisecond drift. Not enough anyway—the scale is minutes, not tenths-of-a-second, the precision isn’t that important. The default time is twenty-five minutes, which is 1.5 million seconds. There’s a lot of room for slop in there. Why this is important is because I decided I wasn’t going to implement a drift-checking timer, as per the link I posted last week.

I said I was going to talk about flexbox on Thursday and then spent it talking about git and GitHub.  So, a little about flexbox.

This is one of the ways to be responsive.  The CSS involves letting the parent element know that it has to display flex and anything about the overall flex display that it needs. Here’s a snippet from the CSS file for the wiki-viewer. In order to allow a grid display, I have to use flexbox. I wanted 3 per row and I have ten items, so I needed to wrap them.

1
2
3
4
5
6
7
8
.gridBox {
display: flex;
flex-wrap: wrap;
position: relative;
top: 55px;
margin-bottom: 20px;
font-size: 18px;
}

Here, the children need to know that they they only get 30% of the available horizontal space and that they can’t grow but hey can shrink. The flex works a lot like the border property in that you can either specify parts of it or shortcut it into one attribute. Here I shortcut it. The three values are flex-grow, flex-shrink, and flex-basis.

1
2
3
4
5
6
7
8
9
10
.gridDisp {
flex: 0 1 30%;
height: 350px;
margin: 5px;
padding: 5px;
cursor: pointer;
overflow-y: auto;
border: solid 1px #008800;
border-radius: 0px;
}

For the clock (which is what we’re supposed to be chatting about) the important issue was I wanted responsiveness while keeping my stuff aligned in columns and rows. It’s a little more involved so I’ll skip the code examples, but feel free to hit up the style.css on the repo and look around.

Back to the basic clock. I thought it was done when it counted down, but I hadn’t thought that someone might press [Start] twice. So I fixed it to where a second press of [Start] does nothing. Next, someone explained that what they expected, was, if you tried to increment or decrement the active counter, it would stop the countdown. Good call. I implemented that.

The beep. I have a file in .MP3 format that is five beeps. You only hear one because I only play the first second of it. It was taken from freesound.org

I also futzed around with the look of it. I decided having a button that changed from [Start] to [Stop] looked cool but might be confusing to the person using it (besides, the other two items have two buttons).

Here is the new look of the Pomodoro Clock.

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 README.md 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 LICENSE.md file.  This is trickier. You can get one from choosealicense.com.  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.

pomodoro: the clock stops here

Preparing to turn in my calculator means I can turn my attention to the next project.  Build a Pomodoro Clock. This will require me to learn new things, like time-based anything and how to cause my HTML to emit sound.

But like any other HTML/web project, the first part is figuring out what it will look like. Here is a screenshot of my Pomodoro Clock.Incurably retro.  I got the idea from someone who mentioned they had a seven-segment font they were using for the calculator project and I thought how totally awesome that was for a clock.  Now this font, being truly seven segments has no plus sign or colon.  So the buttons (and the text) are in the Roboto font. which is how the real world deals with seven-segment stuff. Which is to say, they don’t use it except for the actual digital display.  What you can’t notice from the screenshot is everything is in rem not px.  This meant I had some artifacts and issues trying to make the actual clock part of the display work.  I resolved them with Flexbox. You’ll find out more Thursday.

The person who helped me with the flexbox also gave me a link to a stackoverflow discussion about javascript timers.  It’s interesting and relates well to stuff I saw on CSS Tricks.  The key to using anyone else’s code is that you have to understand it and not only how it works but why it works.  If I can’t, I’ll look other places.  The synthesis of the two sites is working for me in understanding that a function that counts time based on milliseconds will drift from the actual time and that you may want to adjust for it by checking against the real time now and then. The main issue seems to be how often do you need to do this to stay on target vs having extra overhead.  I’ll know more Thursday when we meet again.

calculator: the chain gang

Let me be blunt.  The calculator is not a difficult project once you’re aware of the eval() function that takes a string and treats it as an arithmetic expression and evaluates it. If I knew the name of the person who mentioned it, I’d share.  The trouble is, it was a toss-off comment in a reply to someone else and I happened to be paying attention.  For the record, attention is good.

I hang out in the gitter FreeCodeCamp room quite often and this sort of thing is there, going on all the time.  Someone posts a problem, whether it’s with a challenge (“how do I nest my image element in an anchor tag?”), an algorithm (“can someone check my Roman number code?”) or a project (“my Twitch viewer shows the same channel eight times instead of showing the eight channels from my array”) and others offer help. Usually, the problem is spotted and resolved (often the person posting sees the issue as soon as they shared it). Someone else’s calculator issue was solved by eval() and I was watching.  This was back when I was doing random quotes or something.

The difficult part of the calculator for me was how do I make something that looks like a calculator in HTML and CSS. The answer is by looking at someone else’s calculator.  Google Images to the rescue.  I found the OSX calculator icon. It has buttons on it for Clear and ± and memory management stuff in the top row that I don’t need. So if I delete the top row, I have a basic idea of what a calculator should have. If you look at it side-by-side with my calculator, you can see how it was inspired by this one. My phone calculator looks like someone was too lazy to bother making it look like it wasn’t an app on a phone. So using that as a guide would have given me something really ugly and not like the project was looking for.
OSX calculator icon phone calcmy calc

The colors for my calculator are courtesy of Computer Hopes HTML Color Codes & Names page.  I found the red for that button as a trinary color for the blue of the other buttons. You can find trinary colors by typing or pasting the hex code for a color in the box at the top. I got the display box color by sampling the color from the OSX calculator and averaging it. It took a bit of trial-and-error to get good button colors with my faceplate color.

But that’s only part of it, there are also fonts. For the display, I wanted a font with something in the zero.  A slash or dot or something. But not for the buttons. Zero on a button should look empty and the C should look reasonable.  So I hit up Google Fonts.  I specifically typed in the digits and the key signs (so I could see what the keys would look like) and told it to make that be the sample for all of the fonts.  Then I said I only wanted monospace fonts. And alphabetical because I was looking for specific things, not popularity. The fonts I chose were Abel for the the keys and Allerta for the display. I liked the look of the C in Abel and the fact the 4 was closed.

So, on to making it function.  I’m sure there’s a better way—there always is—but what I did was made a click event for each button and then handled it. For the digits, it was easy—check if the the entry was zero—if it was, replace it with the number, otherwise, add the digit to the string for the current number.  Decimal point was tough—you can only have one per number.  And signs meant I had to peel off the current number and make a new one.  And then the equals meant, run eval().  Okay, that all worked so I took it to gitter.

And someone said it didn’t “chain”.  Now, I could type 2+5*4  and press the equal sign and get 22 so I knew it worked.  But that wasn’t what they meant.  They meant, if I pressed equals again, it should repeat the last operation so I should get 88 (22 * 4) the next time, and so on.  While I was fixing it, we got into a side conversation about how I don’t generally use a calculator so I was unaware of that expected behavior.  Then, right when I had typed “try it now” they typed, “don’t worry about it, mine doesn’t do that, either,” and I had to laugh because, well, mine does it.

Here’s how.  I’m already keeping the current number separate from the rest of the current expression.  I have to so I can use the ± on it.  So what I need to do is grab the last operator from the string (it will be the last character) and combine them and put that in the chain:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$("#eqButton").on("click", function(){
if(curNum != ""){
// if the expression isn't empty, evaluate it
curResult = eval(curExp + curNum);
if(curResult === 3/0){
curResult = "0&amp;nbsp;Divide&amp;nbsp;Error";
}
chain = curExp.substr(curExp.length-1) + curNum;
curExp += curNum;
oldExp = curExp;
}
else{
// they pressed = again
curResult = eval(oldExp += chain);
}
curNum = "";
dispResult();
curExp = "";
dispCurExp();
});

It’s still on CodePen but will be moved to GitHub before I turn it in.  The links on the right will always be current.

weather: wrap-up

If you look at your calendar, you’ll notice I’m writing this on not-a-Monday and not-a-Thursday. This is a bonus blog, made possible by my finishing my calculator which is the first advanced JavaScript project. Because I finished it so quickly, you won’t get to read much about it.

Weather.  I slept and woke up and it still worked.  I did some tweakage, found a Google font I liked (Cabin) and rewrote the “created by” part to clearly identify my weather app as a FreeCodeCamp project. Then, I had to put it back on GitHub.  When I typed git init it said it was re-initializing. Since I din’t know if I wanted that, I did an rm -r .git and then tried again. As far as GitHub was concerned, it was a new repository so I had to do the new repo things, but as far as my end was concerned, I had a README.md and a LICENSE.md and everything so I was ready to add, commit and push.  So I did all of that.  and it’s all there, now.  Except I forgot to edit the README.md so it referred to things that were untrue, like DarkSky. When I looked at the repo, I immediately saw the problem. And fixed it, followed by an add, commit, and push.

You can look on the side and see my weather app in the links.  Or you can go here. To see the repo, go here instead.  And  notice the calculator.  It’s a CodePen but that will change before I turn it in.  Probably I’ll write about it Monday.

weather: switching to the FCC glitch.me

I had a wonderful weather app. Here’s a screenshot:
You see it was powered by DarkSky and it has a temperature and an icon for the weather-type and they’re a color. That color changes based on the Celsius temperature (as per the FCC user story:

User Story: I can see a different icon or background image (e.g. snowy mountain, hot desert) depending on the weather.

I found the colors on a site called Color Brewer 2.0 and they had several kinds of color sets to choose from and different sizes of color sets.  I found one that had ten colors, which I figure is plenty.

One teensy-tiny problem, though.  My API key was showing.  This is a unilateral no-no.  People can steal your key and then make a zillion calls to the API in your name and rack up a bill you have no way to pay.

There are two approaches to take here.  One is to set up a proxy so that my API would be kept secret. The trouble with that approach is that not everyone has the means to implement it and I don’t like being an elitist.

The other approach is to use the new(!) FCC glitch.me pass-through.  This is new since I did weather before, so I didn’t have it available.  I do now.  Trouble is, all the fields have different names, and, they want a GET request, not $.getJSON (I believe that’s what the words mean.  It’s okay, I did that for my wiki-viewer, so I know how it works.

They document the fields, but how that actually works in practice is why the ghods invented console.log().  I absolutely spent a bunch of time verifying that stuff was what I thought it was.  And it turns out humidity is already a percentage and not a decimal number (unlike DarkSky, where I needed to multiply by 100 to get a percentage).  Stuff like that.  The temperature is Celsius. I’m still uncertain of the units for wind speed because, at the current time, conditions are calm and with no wind, there is nothing to verify against another source.

The icons are tricky.  There are icons provided by the glitch.me API but I have the beautiful set-up I’ve described.  I don’t want to lose that so I need to know what the ranges of weather conditions are so I can populate one of my mondo if structures with the right icons.  This is a good stopping point for today and hopefully, by Thursday, I’ll have an answer.

“Hello, world,” is traditional …

… and why buck tradition?

Actually, this is the most difficult post I’m going to write because I have to initiate and there’s a lot to get going.

Kicking around my new digs here.  I’ve had blogs before but never anything where I shared my code.  I’ve shared poetry, fiction, recipes, menus and stuff, but never my code.  Yes, I’m repeating myself.  This is scarier than it looks because it’s one thing to show your code to the guy in the next cube and say, “Can you help me with this?” and quite another to go to the whole world wide web and let folks see how you do what you do.

As I say on my about page, I’m not especially clever, though I have my moments. Nor am I holding down the other end of the bell curve.  I’m somewhere in the middle, like most of you folks reading.

This first post is sort of a where we’re headed.  The first thing is weather.  I’m doing the FreeCodeCamp curriculum and one of the projects is a weather app. Okay, I did a Very Nice one, but it had an issue–the API key was dangling in the public view.  This is a no-no.  So I need to fix it.  The next post will be about evaluating my options and seeing how I want to deal with it.  And after that comes the actual dealing.  And anyone who wants to follow along, may.