KDC Menu

Friday, December 29, 2017

A Little Node...

Figured I'd take a break from my daily JavaScript adventures (w/ Codewars) and learn a little Node with Express and MongoDB. Although it says 30 minutes, after downloading, creating an account, and installing Postman, learning what it is and how it works, then doing all the same with mLab (MongoDB), then figuring out why MongoDB wouldn't connect (was a v2 vs. v3 thing), it took me a tad longer than I'd hoped. But it was still an excellent run-through for the basics of a CRUD app.

In my 'time it took' defense, as it took me a couple days, on and off, it was in between my reading through dozens of pages derived from my initial reading of MDN Object Prototypes and MDN Prototypal Inheritance (all of which is making more and more 'foundational' sense). Speaking of MDN, it was also fun reading through the MDN Closure page recently... another page that took me 'days' (er, or maybe it was weeks, ...or months...) to thoroughly read through, run tests on CodePen, and comprehend.

Anyways, if you're into learning a little Node, give it a shot. I've still got to go through the remaining 'RUD' :)


-Keith D Commiskey

Sunday, November 19, 2017

Front-End Development Certification Achieved!

291 Coding challenges later... Free Code Camp Front-End Development Certification achieved!

The last project assignment was to build a Simon Game: I built Simon 20 - complete with 3 speed levels, and a cheat mode! Initial functional development was completed in 8 hours. But follow-up tweaks and enhancements cost another 2 days, so it went about 3 days in total.

My Free Code Camp public profile indicates I began the course on Oct 18, taking one full calendar month.

The course was fun and helped a lot with keeping with practical everyday exercises.

Next up: Well, I was going to start into exercism.io, but looks like their site isn't as secure as one would hope (no SSL cert for HTTPS). I had to sign out and revoke my API Key :'( Strange I didn't notice when I signed up - it's one of the first things I typically check on with a site I intend to work with.

-Keith D Commiskey

Friday, November 17, 2017

A little... Tic Tac Toe?

I'm near complete with the Free Code Camp Front-End Development Certification course. 291 coding challenges and I'm on my last... Haven't read through the specs yet, but based on my last four projects, I'm guessing it'll run me another 3-4 days.

My last project was a Tic Tac Toe game, in which you can play person-to-person, or you can play against the computer.

If playing against the computer;
- The computer will try to win, where possible; and try to block where it can.
- Winning tiles highlight.
- You can switch sides (between X's and O's).
- Keeps score (scores swap when sides are swapped).
- Has a random wait time for while computer is 'thinking'.

Play Tic Tac Toe on CodePen:

I dare say it wasn't as much fun as creating Guess Right (and be happy), but games are fun to create in any case.

-Keith D Commiskey

Saturday, October 14, 2017

CS50 Final Project

Character Counts (a Chrome web extension)

My Final Project for Harvard's CS50 course.

Sunday, August 20, 2017

Career Tweaks

From time to time we need to make little tweaks to our career paths. Although learning React Native was next on my path, I've decided that learning another framework, even though it’s close to React, would continue taking me laterally; whereas at this point, I now need a much stronger foundation for my current skill-sets.

My goal for 2017 has been to gain exposure to the various front-end technologies that have become prevalent over the last five years or so: To upgrade my skills with tools I'd need to be a more productive asset in the current job market (read: so I can find a job and be good at what I do).

Having been productive this year with three different present-day frameworks (React, Vue, and Laravel), I believe it's time I now turn my focus to strengthening and expanding my knowledge of core JavaScript fundamentals.

Reasoning: Learning React Native won’t help me in passing advanced JavaScript tests, but doing a `.reduce()` a day might.

Instead, because 'dailies' and coding challenges force you to think more proactively (as opposed to being in constant 'troubleshooting' mode), my new strategy is to stick with React and Vue, and get to know JavaScript better! (...and HTML and CSS.)

Keith D Commiskey

Wednesday, August 16, 2017

My Experience with TypeScript + React

TypeScript: "A strict syntactical superset of JavaScript that adds optional static typing" (paraphrased from: https://en.wikipedia.org/wiki/TypeScript).

I just finished injecting TypeScript into my last React web app (Done (for now)), and can say that I've enjoyed learning how TypeScript works: In particular its insightful nuances with React.

Why TypeScript? ...One might ask... I’ll let their intro video tell the full story (link provided below), but for me, it is for proper code insights (IntelliSense) and `type` support that I feel helps me to become a stronger programmer.

How so? TypeScript will continue to help me focus more on a data-first design approach, as I tend to just start "creating", and find myself designing (UI and data structure) along the way. Although arguably instinctive, this is SO not a good approach!

In addition, when you’ve gone through as much foreign (read, spaghetti) code as I have, being able to see an enforced data structure skeleton would have been welcome many a time.

How does it compare with Flow? There are quite a few articles on the subject, so I'll defer to one of those.


TypeScript Intro Video:

At the time I watched it, the video could be found at the following location:

Tip! The reason I mentioned the video's actual location is, I discovered if you remove "_high" from that URL, you can get a smaller version of the video, which in my case, was ideal for downloading and watching offline (I tend to rewind and pause a LOT).

Sunday, July 23, 2017

Done (for now) | An Online Timer (with countdowns)

"Done (for now)" is a multi-'timer' web app with custom snooze and a one-at-a-time notification queue.

This is my second React web app, which I'm hoping will become my first React Native (mobile) app (once I learn React Native, which is next on my list of learnables).

The 'Done (for now)' timer provides alerts (via a modal) with Snooze/Done/Disable options (and an adjustable snooze delay).
See it in action:
View the source code:
-Keith D Commiskey

Saturday, July 22, 2017

My Programming History: As of July, 2017

Coming up on my 1-year of being ‘between jobs’ (reasons explained within), figured I’d pay a tribute to all my developmental years up to now. Beyond the technologies I’ve semi-mastered along the way, and the projects I’ve completed, I’ve always enjoyed learning and, quite simply, being productive.

  • I started programming with Atari Basic. I used cassette tapes to record my programs.
  • Did some Atari DOS manipulation.
  • Got my first PC and learned about MS-DOS 3.x.
  • Learned about advanced batch files.
  • Got pretty heavy into AutoLISP (and some DCL) for AutoCAD.
  • Moved on to learning HTML (that new thing they called the “world wide web”).
  • I never went with AOL… I went Prodigy, CompuServe, then Concentric.Net was my first web host (a place to put those HTML files).
  • Learned some basic CSS (best viewed in Mosaic).
  • Learned some basic JavaScript (and took a couple classes).
  • Tried learning Java (but was still trying to figure out what it was; the only thing that made sense were applets).
  • Learned some CGI scripting.
  • In 1998 I picked up Microsoft Access (even took a class) and ASP 2.0. I created my department’s Intranet site, complete with a ticketing system, authentication, and even provided myself and one other with super-root admin access. I then created another department’s Intranet site, and ran a ‘gift of the week giveaway’ using a pseudo lottery-type ASP program I’d written (which I later converted to PHP/MySQL).
  • In 2002 I moved up to PHP and MySQL (an indefinite thanks goes to phpMyAdmin for helping to learn MySQL).
  • Armed with PHP and MySQL, I created my own online “Crystal Figurines” gifts shopping web site (for which I made enough to cover the costs of operation; which included charitable donations). I created my own custom shopping cart catalog, created my own administrative portal, and automated the inventory process (using a combination of QuicKeys and Excel VBA). I also learned quite a bit about SEO, and a little bit about security (like, what ‘not’ to do).
  • Still armed with PHP and MySQL, I created over a dozen custom add-ons for a shopping cart catalog (OptionCart), and became a reseller.
  • Got my first full-time ‘web dev’ job in 2006 and learned JSTL and JSPs.
  • Dipped a little into Prototype and Scriptaculous, and was introduced to a little AJAX.
  • After being downsized, got another job in 2008, did more basic JavaScript, some proprietary JavaScript, and learned some SQL Server.
  • One job later in 2010, I was back in JSP-land, picked up jQuery (after figuring out what it was), learned some depth to AJAX, and became a little familiar with Oracle’s ATG (and subsequently, Endeca).
  • On the side, I learned Foundation 5 (for fun and future potential) which helped later in creating a client’s (on the job) mobile site.
  • I took that a step further, with the same client, and advanced their Homepage to Foundation 6 (fully responsive and A11y-compliant).
  • I continued learning about CSS preprocessors and front-end build toolsets.
  • Also on the side, I found and learned Laravel (also to help me understand the MVC paradigm better, by working in one variation of it hands-on for the first time). I learned what migrations were and how to work with them (including rollbacks). I also learned more in depth about Routing, Models, Controllers & API’s, and Blade, their own front-end view layer. Despite my struggle with understanding migrations (which I later came to know and appreciate), I had a lot of fun learning Laravel.

In Aug 2016, after I was downsized (for the 3rd time in my 3-job ‘web development’ career), I learned everyone outside of the company I’d spent near 6 years at, had moved on to JavaScript frameworks as the status quo. “Front-End Developer” titles were now owned by Unicorns, meaning you now, nearly always, need to have ‘design’ experience for that title (that title is also still known as UI/UX Developer, or anything with “Designer”). Despite a large appreciation for design, in having little to no actual ‘design’ experience, I took the Engineering route.

  • Fresh out of work, I finished my active Laravel web app and did one follow-up web app in late 2016 (tying them together by applying the same Auth system and ‘preferences’ panel).
  • I then moved on to learning Vue and Vuex, and learned enough in 3 months to have some fun creating my first SPA (and first SPA game). I tied this into the same Auth system as my previous Laravel sites.
  • Still having no real bites on my resume, in April 2017 I shifted gears to React and Redux, all the while continuing to try to advance my core JavaScript knowledge.

As of July 2017, I have just recently completed my 3rd React project (although the 2nd was a ‘standalone’ React component extracted from my 1st web app). My next goal is to learn React Native, and convert my latest React web app into a native Android app. :) Say hello, August.

Productive learning is fun!

- Keith D Commiskey

Saturday, June 17, 2017

Completed First React App: Track Your Cash

My first React app is now live. It's called "Track Your Cash" and is a simplified checkbook register.

The project uses React, React Router 4, and Redux, and runs on a Digital Ocean Ubuntu-based NGINX server.

This was a tedious project resulting in code I’m not overly proud of, and am still finding my own pattern for architecting Redux, local state, and props. Many days were lost to refactoring whilst determining state structure, higher-order components, and callback functions. I also delved into learning client-side web storage, and created a React component for the native ‘date’ input type (with non-native fallback support per MDN documentation).

Unfortunately I cannot place this project in my Laravel / Vue site space, as those 3 sites run on Apache, and React requires a back-end server that can handle the route switches, such as Node or NGINX. And because I'm not up for buying a domain for this (DNS), instead I just implemented a meta refresh that redirects to the Digital Ocean IP address.

It is my hope that doing another 3-5 of these should put me in good shape for a React development position sometime this year.

As a side note, I started learning React/Redux/RR4 on Apr 12. That's about even, if not a little less than, with what Vue took for me to learn and complete my first project.


Sunday, April 09, 2017

Open Source Code - Guess Right

I put the code for my 'Guess Right' game on GitHub. It includes the Vue files, Vuex state files, Laravel routes, model, controller, and migration files. It also provides a link to a flowchart diagram and a couple mockups I did for the game.

Monday, April 03, 2017

Loving My First Front-End Framework

I'm proud to announce I've fallen in love with my first framework; Vue. Well, second actually, with Laravel being my first. Both of these have helped to bring me into the world of... now?

Both have allowed me to create a mini-site showcasing Laravel, with Keep Track and Pick-a-Meal, and now Vue, with Guess Right.

"Guess Right" is my latest reincarnation, in that I took an old PHP program I wrote for Facebook, and completely rewrote it with Vue. I capitalized on Vue's reactive data, and fell in love with its templating system and state control. Combined with some Laravel and MySQL on the back-end made for quite a fun-thinking and manageable development environment.

Tada!: https://kdcinfo.com/guessright/

The primary technologies I've covered in the last 2-1/2 months, converging to help make this little web app a functional success, are as follows:
- HTML5 (tags, data attributes) / CSS3
- Laravel 5.2 / Blade
- Vue.js 2.1.10 / ES2015 (ES6) / Axios
- vuex
- vue-router
- Sass (SCSS)
- Gulp, webpack, npm, vue-loader, Babel, Laravel Elixir, Apache

- Keith D Commiskey

Wednesday, March 08, 2017

Vuex - Core Concepts (w/ Vue.js 2)

The learning is endless, but exciting.

The following 5-lesson series is an awesome primer on Vuex (Vue state management).

Monday, March 06, 2017

Code Logic for the Keep Track "Show All" Page

The link and code provided below is extracted from code I wrote for a Controller class used on my Laravel site, Keep Track.
IIRC my biggest achievement while creating Keep Track was on the item listing page. Sorting (and one level of sub-sorting) on separate/related tables, for me, was tricky. But I was able to figure out how to write a couple custom callbacks which accounted for a couple different sorting scenarios.
Laravel provides no advanced documentation for custom sorting (especially with eager loads). However, the underlying Laravel (sort) code, the PHP docs, and Google/Stack Overflow all helped a lot.
In the end, persistence prevailed over 2 or 3 challenges. Just, please don't ask me to do it again. Just kidding!... These challenges are the most rewarding.
This one section of my Controller code is provided on my GitHub 'snippets' page. The sorting particulars (shown partially below) are the code blocks at lines 167 and 183.

$itemListBase = $itemListBase->with($queryMapModelText)->get()
    ->sort(function($a, $b) use ($queryText, $orderDir, $orderCol) {

        $queryTextTitle = 'item_title';

        $queryTableName = explode(".", $queryText)[0];
        $queryFieldName = explode(".", $queryText)[1];

        if ($orderCol == "rating") { // Ratings are numeric; Don't compare as strings
            $testCase = -1;
        } else {
            $testCase = "";

        $queryItem1 = is_null($a->$queryTableName) ? $testCase : (is_null($a->$queryTableName->$queryFieldName) ? $testCase : $a->$queryTableName->$queryFieldName);
        $queryItem2 = is_null($b->$queryTableName) ? $testCase : (is_null($b->$queryTableName->$queryFieldName) ? $testCase : $b->$queryTableName->$queryFieldName);

        if ($orderCol == "rating") {
            $sortResultVal = ($queryItem1 < $queryItem2) ? -1 : (($queryItem1 > $queryItem2) ? 1 : 0);
        } else {
            $sortResultVal = strcmp($queryItem1, $queryItem2);

        if ($sortResultVal === 0) {
            $sortResultVal = strtolower($a->$queryTextTitle . "z") > strtolower($b->$queryTextTitle . "z") ? 1 : -1;
        } else {
            $sortResultVal = ($orderDir == 'asc') ? $sortResultVal : -1 * $sortResultVal;
        return $sortResultVal;