Category Archives: Web Dev

Learn Web Development: Front End Certificate – Finished!!!

Dear Reader,

I finally finished the JavaScript front-end course.  That involved two last projects, which I’ll present here.  Warning these are not mobile optimized and look ugly on a phone:

Pomodoro Clock:

Pomodoro clock is count-down clock, which allows you to switch between work and break sessions.  You can adjust the work and play dials to choose how many minutes you want to work or play.  If you press the large Session button, the count down begins.  This project wasn’t that difficult to complete.  The hardest thing was figuring out how to create a circle, center it and then start a timer.

TicTacToe:

This is a tictactoe board with a very “dumb” AI.  It starts by allowing you to choose Xs or Os.  It then continues until either you win, the computer does or a draw occurs.  The AI plays a rather simple strategy:

  1.  If the AI can win that turn it.  It plays the winning move.
  2. If the AI will lose this turn, it will block the player from winning.
  3. If the AI can’t win or block a losing move, it finds the diagonal, column or row with 1 of it’s own tokens in it and no opposing token.
  4. If the previous 3 positions do not occur, it picks a random diagonal, column or row with no opposing token in it.

At first when I played this AI, I thought it was pretty smart.  I soon realized that playing the bottom 2 corners and one of the top corners results in a win for the player every time (at least for O).

Simon Game:

Simon is an old 1990s Toy that plays a sequence of colors that the player has to match.  It starts with a sequence of 1 color and increases it by one if the player matches the entire sequence without an error.  It does this up to a sequence length of 20 and then declares the player a winner.  The Simon game has a strict mode, which will reset the sequence to 1 on a player error.

This specific implementation took me around 4-5 hours.  The difficulty came from the fact that JavaScript is asynchronous.  This means code that looks sequential in the file executes at the same time.  This came as a shocker to me when I pressed the start button, was immediately declared a winner and then watched the entire circle turn lightblue 2 seconds later.  What had happened is all 20 sequences had played out at the same time including all… 20 + 19 + 18 … 1 button presses (2 seconds later).

To resolve this specific issue. I created an event on the color buttons.  If the player had pressed the correct sequence of colored buttons to match the computer’s color sequence, it would add a new color to the color sequence and repeat it back to the player.  To make sure the play timing of the color/sounds  was correct, I iterated over the index multiplying each index value i by 2000 milliseconds.  This ends up solving all those strange asynchronous bugs and makes the game playable.

After this project, I finally got the front-end certificate for free code camp.  It was a cool 6 weeks of part-time coding.  The last 2 weeks were especially exciting, because I got to do a deeper dive into JavaScript itself.

Best,

Chris

Learn Web Development: Front End Certificate

Hello Readers,

I’m finally finishing up freecodecamp.com front-end certificate after spending about 1 months on it (on and off).  Great course if you want to learn some basic Javascript and html manipulation.  Some of the cool little projects you’ll end up doing:

Weather App:

Wikipedia Search:

Twitch TV:

Calculator (note calculator is not responsive):

There is also a nice algorithms section, which has some rather complicated problems.  For example, you need to find all primes within a given number range, calculate the greatest common denominator for a given number and manipulate records.

Best,

Chris

 

Learn Web Development: Quick and Simple

Dear Reader,

A non-profit called free code camp provides lessons in JavaScript, HTML and CSS. These are core web technologies. The nice thing about this service is that it is bite size. A lesson might take about 3 minutes to complete. As you go further along, they become progressively harder and tackle more advanced topics:

https://www.freecodecamp.org

Most of the lessons explain a very simple concept: How to change the color of a specific component on a website, how to add text to your website or how to make a element shake? Once you get to around lesson 200 or so, you’ll start doing more advanced stuff, like going through arrays of arrays in JavaScript. This is nice, because you’ll get to learn the basics well and then start getting into more challenging topics.

The other nice thing about this program, other than being free, is that you get to do bigger projects. For example, you might end up doing a tribute page to a specific artist, Chester Bennington for me, or make your own web portfolio. These are hosted on codepen.io:

My examples are below:

Tribute Page:

Web Design Page:

50 lessons and you already get some tangible results. Definitely worth it if you are new to web development and want to learn. If you are more advanced, this is a good 3 day course that will let you brush up on basic web technologies and get some practice at JavaScript.

Chris

WordPress and Adsense (Google’s ad campaign)

Good Afternoon Readers,

Google has an ad-network called Adsense. Adsense uses predictive intelligence to cater ads to people that visit websites. It seems to do this via cookies and google search results. Adsense now runs on: ChristopherKottmyer.com.

The process of getting advertisements is pretty easy. You sign up for google using your gmail.com account at: adsense.com. They then provide you with a small snippet of code, which you put in the header tags of your website:

<head>
Somewhere in here!!!
</head>

They then give you this ominous message about taking 3 days to verify your website (in case you display things like explicit content). After a bit of impatience, you can check your account and if you are lucky, you become certified and can start placing advertisements on your website:

After certification, you get can log-in to Adsense website. If you want to ad advertisements, you need to first define your ads and then get a code snippet that you can put in the body tags of your website. You can find this in ( My Ads > Add units ) section:

If you click the [ New ad unit ]. You’ll get a series of options to define you advertisement. These mostly involve things like the pixel size: 300 x 400, color of the advertisement and where the advertisement would be placed. A few examples of placements include between blog posts, on top/bottom of the blog or on the side bar. A cool thing I noticed is some advertisements are responsive, which means they resize for your phone (neat trick)! After setting all the options, google generates some code for you. Place these anywhere between the body tags to start advertising in your websites (where start can take up to 2 hours). You can’t control what advertisements you get (maybe…still exploring this).

How much does a click/impression get you in terms of dollars? The first click I got generated about $1.75. Now, it’s all gone down hill and I’m seeing $.30 a click. With just 3 clicks and a whooping $3.00 total, I’m completely lost as to what the average going rate is. Sadly, I won’t be able to cash this out until my account reaches $100.00 (at this rate 100 clicks). That’s googles policy.

Best,

Chris

My Personal WordPress Website

Dear Readers,

I set up my WordPress website today.  Amazon Web Services provides two guides, one on setting up a LAMP server (Linux Apache MySQL PHP) and one on installing WordPress on LAMP.

I also bought two domains, one from namecheap: ChrisKottmyer.com

and

The other from AWS Route 53: ChristopherKottmyer.com

Both are being redirected to this site.

After setting everything up, I tried a bunch of plugins. A bunch below:

Gmail SMTP -> This allows you to forward e-mails to your gmail account.

MonsterInsight Google Analytics  -> Installs Google Analytics to your web page, which tells you what pages people are visiting.

Redirection -> Allows you to redirect pages to other websites. I created a link to my youtube account this way.

Simple Share Button Adders  -> Adds a bunch of social media buttons to your blog posts. This one was really simple to install. They offer about 2 dozen different social media platforms.

TablePress -> This plugin provides the ability to produce data tables via CSV files. They provide the ability to upload CSV files.

Visualizer: Charts and Graphs Lite -> Provides simple graphs using googles chart API. This allows you to build graphs and charts for data visualization.

WPForms Lite -> This is a GUI that creates web forms. The data generated by the forms are directly sent to your e-mail address.

bbPress – This is a cool plug-in that let’s you run forums. Places people can post topics and reply to each other.

Knowledge Base for Documents and FAQs – This plugin let’s you produce a wiki with articles and categories.

Next thing I’m trying out is multi-site, which allows you to have many WordPress sites hosted on a single computer. I’m also going to add google advertising onto the website. I’m curious how you would monetize blogs.

This specific post is a test of the social sharing feature.

Chris