Posts

Showing posts from 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 Code…

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
https://kdcinfo.com

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:

https://codepen.io/KeithDC/full/MOoLNP/
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

CS50 Final Project

Image
Character Counts (a Chrome web extension) My Final Project for Harvard's CS50 course.


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…

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 w…

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:
https://kdcinfo.com/app/done-for-now/ View the source code:
https://github.com/KDCinfo/done-for-now -Keith D Commiskey
https://kdcinfo.com/resume

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).

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.


"Track Your Cash" Demo: https://kdcinfo.com/app/register/
(this will redirect to Digital Ocean's IP address)View the code on GitHub: https://github.com/KDCinfo/track-your-cash
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 serve…

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.

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
-…

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

Image
The learning is endless, but exciting.



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





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. https://github.com/KDCinfo/snippets/commi…