Vue.js logo

100 Days of Code, Day 2: Vue, me, and PHP

Day 2: December 25, 2017, Monday

Today’s Progress

I’m part of a Discord group of developers where people talk about coding things and collaborate on one another’s projects. I messaged asking if anyone needed help with JavaScript stuff, and one of the members responded with a project in PHP that he needs to convert to JS, using the Vue framework. I admittedly have almost no experience with that framework, but I decided I’d give it a shot anyway.

In the process of trying out Vue, I decided to also give JSFiddle (rather than CodePen) a try. I’ve seen it mentioned quite a bit, but never really used it. As it turns out, I much prefer it. Simpler, better interface, more responsive. As of now, it’ll be my default web-based editor when I’m working on little ideas that don’t warrant a full repo or directory on my local machine. I thought Emmet was one of CodePen’s killer features, but JSF features it, too. For how I use it, I just think CodePen is a bit much.

The PHP to JS conversion project is not the most complex thing I’ve ever seen, but it’s a solid intermediate level of coding. I’m familiar with PHP, but not intimately so, especially when it comes to PHP authentication. In order to work on this project, I cloned a Git repo to my machine and started digging through the code. I’ve cloned my own projects before, and a few repos owned by others, but those were usually for the purpose of having my own copy rather than modifying the code to check back in via pull request.

The experience of working with Vue has, so far, been a pleasure for me. I’ve had a minimal amount of experience working with React and Angular; it seems most comparable to Angular upon initial evaluation, and I just enjoy the process of writing with it better than React. That said, the extent of what I’ve written so far has strictly been limited to their demo examples (with some modifications for experimentation purposes). I’m especially interested in the Vue v-model attribute, which allows for two-way data binding similar to Angular. For example, you could have a text input field which is echoed elsewhere on the page as you type rather than upon pressing submit. Very cool.

When thinking about potentially having multiple clients with multiple WordPress installations to periodically update, I started thinking about how to unify them all on one page. This led me to the ManageWP product, which in turn led me to the WordPress CLI (Command Line Interface) utility. I haven’t spent much time with it, but I can envision incorporating it into my workflow in the near future.


I like Vue, so far, but I’ve got a lot of reading and practice to do before I incorporate it into a legit app. One step at a time. PS: Merry Christmas, if you’re into that!

Link(s) to Work

Still none yet, but soon.


100 Days of Code Progress: Day 5

It’s been a while since I’ve posted here, but I’ve been actively working on code every day all the same. I’ve been pouring most of my thoughts into my 100 Days of Code log in lieu of  posting here (but I’m now seeing that I’ve got a handful of readers, so I wanted to check in and let you know what I’ve been up to).

When I first heard of 100 Days of Code, I thought it was a series of code problems you had to solve 100 days in a row. It’s actually much simpler: you code whatever you want, but you do it for at least an hour each day for 100 days straight. I am in the process of securing a full-time day gig, so I’ll no longer have as much free time as I have had up until now to work on my coding skills, and this sounded like a great way to keep my momentum going.

I forked the official repo on Github and got started about five days ago. Lately, I’ve been going through the coding challenges on using JavaScript to solve them. Each problem is called a “kata,” and I was making pretty steady progress until the kata I started on around the time I started the 100 Days challenge. (As a side note, you can click here to join my team on that site!)

I worked out all the syntax errors and got the program to run, but the output was totally wrong. I struggled to modify the logic to get it working, but kept hitting a brick wall. So I just decided to erase the meat of the function, work through it in plain English via pseudo code, and start again. And it worked! It’s such a great feeling to finally break through after being stuck on a persistent problem. Part of me wishes I picked everything up without getting stuck in the first place, but another part realizes that perhaps getting stuck is a valuable educational experience in its own right.

I am gearing up to create my very first game in Python using the popular Pygame library. The idea of creating video games is what piqued my interest in computer science/programming in the first place, and even though I know what I crank out will inevitably be rudimentary, I’m still excited to get my first little demo up and running. I’ll be sure to keep you posted as it develops. It won’t be anything innovative or revolutionary, but it’ll be mine, and I’ll be proud of it all the same.

I don’t know if I’ve mentioned this previously, but about a month ago I installed Ubuntu on my laptop alongside Windows 10, and I haven’t logged back into Windows since. The overall environment is so much more amenable to programming. I love it. I have to Google how to use certain features a lot more regularly than I did with Windows, but I’m excited to be learning new skills. I actually wrote my latest log for 100 Days using a very stripped-down editor called Vim; it’s anything but intuitive, but from what I’ve read, it’s very powerful. I’m looking forward to getting further acquainted with it, though I’ll probably still be heavily using Atom for the foreseeable future.

As for now, I should probably try to get some sleep. I’ve got to return to my week-long temporary day job tomorrow. Believe me, I’d much rather be coding, but I’m still not to the point of getting paid to do it.

Not yet, at least.


My first script: an update (now with jQuery)

I haven’t posted in a few days, but I’ve still been steadily reading and researching to up my web development knowledge. I took a brief detour from JavaScript to work through some of the Python exercises on Learn Python The Hard Way (which, so far, I highly recommend), I’ve read through most of the jQuery Core documentation, and wrote another basic script to use with Greasemonkey in Firefox (I may write about that separately in a future post).

However, while viewing newbie-friendly open source projects on Up For Grabs, I came across one which mentioned issues in something called Codacy. I had never heard of this, so I signed up for an account and ran it on my Github repo for the prime number script I wrote recently. It gave me a B, mentioning several issues with my usage of console.log statements. In that original project, I created a bare bones web page, but all of my output went to the JavaScript console, which is more intended for development purposes. I did not have any visible output if the console was closed. To get rid of these errors, I decided to rework the code a bit.

I started by adding the index.html file to my repo, then added an empty unordered list which I planned to add list item elements to with the results of each prime number I checked in my script. I attempted to stick with vanilla JavaScript, but after a couple hours of futile attempts, I finally resorted to using jQuery. (If you’re interested, the repo is located here.)

When I converted my newly updated JavaScript code to jQuery, I noticed that my code became much more concise (which I appreciated). Here’s my code as it stands currently (and holy hell, was it hard to get this formatted right in WordPress’s editor):

$( document ).ready(function() {

	//find and store <li> DOM element with ID "output" to list
	var list = $( "#output" );

	function isPrime(number) {
		var remainder;

		//this will store each new <li> element as "item"
		var item;

		//this will store string to be appended to new list item
		var result;

		//prime numbers must be greater than 1
		if (number <= 1) { 			//create new <li> DOM element
			item = $( "<li/>" );
			result = number + " is not greater than 1! False.";
			item.html( result ).appendTo( list );
			return false;
		else {
			for (var i = 2; i < number; i++) { 				remainder = number % i; 				if (!remainder) { 					item = $( "<li/>" );
					result = number + " is not a prime number! False.";
					item.html( result ).appendTo( list );
					return false;
			item = $( "<li/>" );
			result = number + " is a prime number! True.";
			item.html( result ).appendTo( list );
			return true;

	isPrime(0); //should return false
	isPrime(1); //should return false
	isPrime(2); //should return true
	isPrime(17); //should return true
	isPrime(7919); //should return true
	isPrime(23456789); //should return true
	isPrime(10000000000000); //should return false

From the start, this code is different because it’s wrapped in jQuery’s built-in functionality to check that the document has loaded, so I don’t go messing with the DOM before it’s ready for me to. To target the unordered list element on my index page, I find it with jQuery (targeting its ID, “output”) and save it to a variable named list.

The next addition to this script is a variable named “item,” which I’ve designated to store the new list item elements I’ll be adding to the output list. I’ve also created a variable named “result” to which I’ll save the strings describing the results of running the function.

Inside the conditional statement that checks whether the number is less than or equal to 1, I’ve replaced the invisible console.log statement with the new code that creates and appends a visible list item to the page. I did this by creating and saving a new list item element to item with jQuery. I then save a string stating that the inputted number is not greater than 1 and is thus false. Finally, to get this list item element onto the page, I again use jQuery to add the result string within the li tags and, using handy jQuery chaining, append it to the list I targeted earlier in the script. I then return false in case I wish to use the return value for something in the future (though I can’t currently imagine how I’d use it).

I didn’t have an else statement in my original script, since the number would either be return false and exit the function or otherwise continue on to execute the lines of code which followed, but I put an else statement in the revised script. It might be overkill, but I added it for the sake of thoroughness. Inside the for loop which checks for factors (returning false if they’re found, since a factor would signify the number isn’t prime), I used the exact same method described above to create a new list item element, fill it in with a string, and append it to the targeted list before returning false.

Should the for loop finish without returning false, I know that I’ve found a prime number – so I immediately use the same method I devised to add a list element stating that the number being tested is a prime, returning true. For fun, I added a fun new number I knew to be prime (23, 456, 789) to further test my program functionality. It worked!

It took me hours to get this seemingly simple program debugged and running properly, but I feel like I’ve learned a good deal in the process. I’ve been doing my absolute best to commit my changes regularly with git after making a change to the code so that it’s easy to briefly describe what I’ve done. Using git properly is probably one of the most difficult skills I’ve had to learn, but it’s essential…and I’m only scratching the surface yet. I experimented with branching for the first time, though I still don’t quite think I’ve got the hang of it. I find that I’m becoming more and more mindful of the need to commit the more I code. And I incorporated jQuery for the first time! I’m hungry to put it to further use. While I do want to master the basics of JavaScript without relying too heavily on a library, the platform cross-compatibility of jQuery makes it hard not to use. I’m sure it’ll pop up in quite a few of my scripts going forward.

Now I need to go to bed. Thanks for reading!

Photo of a worn house with random colored numbers hand-painted on the side

My first JavaScript program!

Well, that’s not entirely accurate. I’ve written scripts before, but they’ve all been fairly specific in their scope (hiding DOM elements on a particular page for my convenience, for example), and it’s been years. So I’m basically starting over.

In today’s exploration, I came across this list of questions a front-end developer might reasonably be expected to answer in an interview, so I decided to start working through them. The first problem is to develop a function which checks whether an inputted number is prime. All things considered, it’s a pretty basic problem, but it’s been a long time since I even thought about prime numbers, so it took some minor mental gymnastics to get to the solution. Here’s my code:

function isPrime(number) {
	var remainder;
	if (number <= 1) {
		console.log("Number must be greater than 1!");
		return false;
	for (var i = 2; i < number; i++) {
		remainder = number%i;
		//console.log("Dividing " + number + " by " + i)
		if (!remainder) {
			//console.log(i + " is a factor! " + number + " is not prime. Exiting!");
			return false;
		/*else {
			console.log("The remainder of " + number + " divided by " + i + " is " + remainder);
	//console.log("Looks like " + number + " is prime! Congrats!");
	return true;

console.log(isPrime(0)); //should return false
console.log(isPrime(1)); //should return false
console.log(isPrime(17)); //should return true
console.log(isPrime(10000000000000)); //should return false

As you can see, it’s primitive and anything but optimal. I doubt a prospective employer would be impressed by my ingenuity, but it’s a starting point nonetheless.

Before beginning, I had to understand pretty well what a prime number was. I now understand that it is any number, greater than 1 (a stipulation I initially overlooked), which is not divisible by any number other 1 or itself. Before jumping into coding, I wrote out some pseudocode in an attempt to guide my thinking. It went something like this:

  • Accept number as input parameter
  • Loop iterator from 1 through (number-1)
    • If remainder of number divided by iterator is 0, return false
  • Else, return true

To put this into action, I declare function isPrime with a single parameter, number. I then declare a variable, remainder, which I’ll use shortly. The next line checks whether number is less than or equal to 1, logging a warning to the console and returning false if this condition is true. If the number passes this test, I then proceed into a for loop. It is here that I realized I’d made an error in my pseudocode; rather than starting with 1, I needed to start with 2! So I set a for loop to run with iterator, i, from i=2 until i<number, incrementing by 1 at the end of each pass.

At the beginning of each pass, I divide number (the input) by i using the modulo operator, storing the modulus as the remainder (though I learned while typing up this blog post, that modulus and remainder are not the same thing…for the purposes of this example, I’ll go ahead and use them interchangeably). If remainder is zero, that means that we’ve found ourselves a factor which divides evenly into number, so number is not prime – thus the function returns false. If remainder is not zero, the loop continues, checking the remainder with each pass until the condition is met. If, during the execution of the loop, false is not returned, then the number must be prime, thus true is returned.

I called the function against four test cases mentioned in the website – 0, 1, 17, and 10000000000000 – expecting the function to return false, false, true, and false, respectively. And my program passed the test each time! It’s a minor victory, but I’m proud to have solved the problem without cheating or asking for external help (save for some cursory research into the concept of prime numbers to make sure I had a clear understanding).

If I were to improve this program, I would probably remove the console.log statements I put in initially to debug. I would also like to figure out how to write the results to the barebones HTML document I included the script in to run it. As it stands right now, the results are posted only to the JavaScript console in my browser, but not to the page itself. I intend to figure out how to make this happen soon. As for now, it’s onto the next problem.