KDC Menu

Monday, August 27, 2018

Memory Recall: An Interview Thought

At least a few hundred JavaScript algorithm challenges after taking Harvard's CS50 course, I realized that I use (my brain uses) a "trie" type of knowledge retrieval approach, as compared to someone who can do more of a "dictionary" type of memory lookup. That is, my recall works better when I'm creating and analyzing code (e.g., surrounded by context).

For instance, if I come across a need for the "spread operator", I may need to look up a quick example for syntax reference, but I know I can use it and I will put it to use. Or I may devise another method that may work out better long term, considering the potential future expansion of that particular code. Or I may just prefer another approach (e.g., I prefer `slice()` and `concat()` for copying arrays (but would always go with whatever coding guide I'm working with, if any)).

Anecdotal disclaimer: Using unfamiliar functionality can take me a half dozen trial and error attempts, but I always figure it out for the better of the project.

In short, I recall and know code better when I'm working directly with code (and Dev Tools!); not when answering academia explaining what a spread operator is. I have used it; I have it in my code; let's go take a look! :D
https://codepen.io/KeithDC/pen/weXdEe?editors=0010 
#693: <SettingsForm setTimer={this.setTimer} {...configSettings} /></SettingsForm> 
#904: this.state = { ...this.initialState()
#920: const newObj = Object.assign({}, {...this.state}, {...this.initialState()}) 
#990: <input type="text" name="entryTitle"
   {...timeProps}
   value={this.state.entryTitle}
   placeholder={this.props.titleTemp}
   maxLength={this.props.titleCount}
   size={this.props.titleCount}
   autoFocus={(document.referrer !== 'https://codepen.io/KeithDC/' && document.referrer !== 'https://codepen.io/KeithDC')}
   ref={(input) => { this.textInput = input; }}
  />
I would like to devise an approach for delivering a similar level of knowledge sharing (for an interview) that can reveal my level of experience (and my particular code recall approach) is just as valuable (or perhaps revealing just as many pros and cons) as someone who has (or can feign) immediate (hashmap) recall.

For now, the only approach I can think of, is that I believe I could convey such an experience level by writing out my "From Scratch" GistBox project, while also explaining the `what's` and `why's` of my coding approach (although unfortunately, I do not use the spread operator in this particular project). https://codepen.io/KeithDC/pen/dVrwrg?editors=0010 (challenge #4: GistBox)

Tuesday, August 14, 2018

Front-End Development Certifications x2

Two more freeCodeCamp certifications completed, with one more at 70%.
And although I'm only at 37% with Harvard's CS50W: Web Programming with Python and JavaScript, and 23% with Google's 'Master web development' courses (via Udemy), I'm considering running through another Vue series (via Laracasts), being the last one I went through was in Jan-Mar 2017.

UPDATE: On the other hand, perhaps not... the training video shows they're using 2.1.3, and although I could look around for something in the 2.5.x range, I believe it would be prudent to instead find more professional and in-depth courses for the latest React.

All current and previous training progress (such as my 11 completed courses) can be found on my Training Progress SPA (now a PWA! (...works offline: can't get updates (due to there being no network), but it works offline! :D )).

https://keithdc.com

Sunday, June 03, 2018

Pros and Cons of Visual Studio Code vs. Sublime Text 3


Pros and Cons of Visual Studio Code vs. Sublime Text 3

Below are personal observations with the VS Code editor as compared to the Sublime Text editor.
VS Code: A lightweight IDE
Sublime Text: A customizable code editor

VS Code: Pro and Cons

  • Pro: TypeScript insights are excellent (ST3 insights don't work well at all).
  • Pro: Referential integrity.
  • Con: Bracket-matching cursor sucks, no matter which option I choose. The small thick underscore gave me the least headache, but eventually had to turn them off completely.
  • Con: Pg-Up and Pg-Down scroll the cursor, not the page (inconsistent with most other apps).
  • Con: Insert (overwrite) doesn't work.
  • Con: Can never remember the recent files I actually need; even when just closed.
  • Con: File menu isn't native (no keyboard left/right menu switching).

Results

Use VS Code for my React + TypeScript projects; for its TypeScript insights. Use ST3 for everything else due to its lightweightedness and more consistent keyboard input.

History

Reference: Personal notes [ shared as Gist ]
2018-02-12 - Monday @7:40 PM
 Was staring/analyzing my memory consumption, and it hit me...
 Why am I using VS Code to write a Chrome extension...?
 Dropped it and went back to Sublime Text 3.

System / RAM

MSI: Windows 10 x64 i7; 16 GB RAM
  • VS Code: Running idle at 265 MB (1 file open; 730 loc; was running up to between 580 MB and 600+).
  • ST3: Running at 135 MB (10 files open).
  • MWB hovers around 140 MB.

Saturday, May 19, 2018

Does your butter expire next week?

Expired To Be (free; open source) is a quick and convenient way to set and be reminded of expiration dates.

New Features available in version 2:

  • Sort your list by expiration item name, expiration date, or 'days left' (until expiration notification).
  • Set a 'backup item date'.
    • Easily swap out expired items with a replacement date using the convenient blue checkmark icon on your item's date field.
  • More informative messaging.

Additionally, you can easily export and import your expiration lists for backup and portability.

Expired To Be is free and can be run as:


Expired To Be is open source on GitHub: https://github.com/KDCinfo/expired-to-be

Saturday, April 28, 2018

TypeError: Undefined: Redux 4

Redux 4 > createStore > compose

The Error

            TypeError: Cannot read property 'apply' of undefined
            [node_modules/redux/es/redux.js:523]
        

The Problem and Solution

If you've gone through a tutorial in which they suggest adding the Redux Dev Tools in your store.js like this:

            window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
        
But they're using it inside of a compose(), you could receive a Type Error for an undefined when the extension is not enabled (or present). The correct way to implement the Redux Dev Tools within a compose is as follows:

            window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
        
I learned this the hard way, and was eventually brought rescue from GitHub user [zalmoxisus].
zalmoxisus also references the docs for this: [1.2 Advanced store setup (middleware and enhancers)]

Code Extract from [store.js]

      compose(
        applyMiddleware(...middleware),
        window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
      )
    

A Little Error Verbosity

Friday, April 20, 2018

Tech Schools: Full-Stack JavaScript

Would anyone know of any good 6-12 month tech schools in the US that offer job placement? Looking to specialize in Full-Stack JavaScript.

Sunday, April 01, 2018

Expired To Be: Now Available Most Anywhere

As a gift to the month of April, Expired To Be is now accessible from any browser! :)

What is...
'Expired To Be' is an app where you can set reminders for 'things that expire'. Initially only available from the Chrome web store as a Chrome browser extension, it can now be accessed from any browser.
The new SPA version of the app is hosted on GitHub Pages (and built via Travis CI).

Both apps share the same source code, which is all open source on GitHub.

A Special Treat
The one and only; SPA Integration Diagram: This diagram details the layout and integration between my custom React 'Alarms API' and the Chrome extension core files.

SPA Alarm Notifications
The Expired To Be 'SPA version' provides a few options for 'expiration notifications' (although unfortunately some platforms still don't support web-based notifications; in which case it'll fall back to using the default, which is `alert()`). Modals are the other option, but are more passive.

Important Notes




  1. The SPA and Chrome extension do not share alarms. The extension uses Chrome's own internal storage and alarm system, which is not accessible from a normal web page.
  2. The SPA web page (tab) must stay open to allow the alarms to run. The Chrome extension runs in the browser's background.
Alarms API
For my React-based Alarms API, I borrowed the `TimerBox` component from my previous 'Done (for now)' SPA. (Done (for now) is a multi-timer; it was my 3rd React app, and my 1st TypeScript project.)

Data Storage
Because the 'Expired To Be' and 'Done (for now)' web apps both share the same `localStorage` (one for alarms, the other for timers), I made the Done (for now) timers viewable from within the 'Expired To Be' web app. I then went back and made the 'Expired To Be' alarms viewable from inside the 'Done (for now)' web app as well. Neither app can modify each other's alarms or timers, but there's room for some cross-app adaptability.

Always open to feedback. PRs welcome. ::tiphat::

Keith D Commiskey

Tuesday, February 27, 2018

Expired To Be 1.4 Released

'Expired To Be' is a Chrome extension available on the Chrome Web Store.

This Chrome browser extension allows you to enter expiration dates with 'alarms' (measured primarily in days) for any items you'd like to be reminded of.

New features added in X2B 1.4:

  - You can export your existing expiration items.

  - You can import over 500 expiration items (the app will automatically walk through saving each item from the list you provide).

  - I've also completed refactoring to enable a SPA version of the app that will work in any browser (no extension required). However, it will take a little time to implement a local 'alarm' interface, and to implement an optional (and opt-in) Web/Desktop Notifications system. Stay tuned for X2B 2.0!

How it Works: The Expired To Be Chrome extension will provide notification reminders at a time of your choosing (which is the actual expiration date, minus your 'lead time'). The primary notification for when an item expires is a number count that will show in the extension's icon (in the Chrome toolbar).

Expired To Be is also open source on GitHub. Issue submissions and PR's are welcome.

Wednesday, February 21, 2018

Expired To Be: A Chrome Browser Extension

Expired To Be

A Chrome Browser Extension

Set and be reminded of expiration dates.

'Expired To Be' is a Chrome extension available on the Chrome Web Store.

Get notified of expiring items for things you don't think about too often; like butter, medicine, or the supplies under your sink.

As a developer, I spend most of my life in Chrome, which is why I decided to create this app as a browser extension. This was my 2nd Chrome Extension (the first being "Character Counts", which I wrote as my Final Project in Harvard's CS50 course).

Although I built the extension primarily for personal use, I also wrote it for continued JavaScript practice: It is open source on GitHub, and I'm completely open to feedback as well as PRs. And I'm especially open to looking into any bugs.

Development time took just over 2 weeks. This was one of my more tedious projects I've worked on in awhile (migrations with Laravel, Nov 2016, actually), but then I was a tad sick through part of it as well (I know, excuses, excuses!). I also delved into about a half dozen development areas I'd not touched much, or at all, prior. Complete development history details provided on GitHub.

I might make a SPA version, if I find myself needing one, or perhaps if there were outside interest. Creating a FireFox extension would make for a good fork and school or side project for someone.

Expired To Be: Chrome Web Store: https://chrome.google.com/webstore/detail/expired-to-be/kamjiblbgmiobifooelpmlkojmadmcan

GitHub: Expired To Be: https://github.com/KDCinfo/expired-to-be

GitHub: Character Counts: https://github.com/KDCinfo/character-counts

Monday, February 05, 2018

Character Counts V2

The Chrome Web Extension "Character Counts" has been updated.

Current Features:

1. Count the number of selected characters on a page.
2. Convert an ASCII(char) string* between normal ASCII, ASCII (Int), and Binary.

* A string is represented by characters, words, and/or entire sentences.

New Feature:

1. Choose if your conversion input (source) string is ASCII(char) (default), ASCII(int), or Binary. The 'Convert' link will then cycle through the 3 conversions (although really 2; one converted output will always be the same as one source input).

  For Example:
  - ASCII(char) = ABC
  - ASCII(int) = 65 66 67
  - Binary = 01000001 01000010 01000011

Character Counts is available for free in the Chrome Web Store.

Character Counts is also Open Source on GitHub.

Wednesday, January 31, 2018

I··C··D··O··T··S (––and––lines––)


I··C··D··O··T··S··: A Web App Game

tl;dr - take me to the game already!

ICDots is a board game for 2-7 players who will take turns selecting lines to form boxes. Scoring is 1 point per box pinned. Line colors have no distinction other than one is horizontal and one is vertical, and the alternating colors felt visually appealing.

Game Reference


The Game:
  1. Board is between 2 and 7 (represented as 1 row of boxes).
  2. Number of players is between 2 and [Board] size.
  3. Players take turns.
  4. If a player pins a box, they go again.

Application URLs

Technology History

  • Inspired by a Codewars kata, the original kata solution was written with just JavaScript.
  • In making the game interactive, the first version of ICDots was written with JavaScript Prototypal Inheritance (e.g., let myGame = new Game() and Game.prototype.createBoard = function() { }). This was my first prototype-based coding project.
  • I then converted that version of the game to React with TypeScript. With this project, I added TypeScript alongside/during the conversion to React (as it should be done).

Tech Stack

Working on this project provided me a more in-depth look into
  • - JavaScript (ES5, ES2015 (ES6)) (+ downgrading ES7 .includes())
  • - React (16.2.0)
  • - TypeScript (2.13.0)
  • - Local component state and props

Tags

[JavaScript] [react] [reactjs] [typescript] [coding practice] [coding fun]

Tuesday, January 30, 2018

Dances with Vars

Dances with Vars:

Spans... Spans... Your name is Spans? Spans Div... Spans with Divs... Your name is "Spans with Divs"!?!

>Testing Dark Humor:


```describe(‘psychotic’, () => { 
    it(‘puts’, () => { 
        basket: “lotion” 
    } 
    expect(null).toEqual(“Precious”)) 
}```

I had originally posted this on Google+, but thought it fitting for my blog as well. I would also share on Twitter, but you can't format Twitter messages, so it'd lose it's coded `unit testing` humor hook.

Tuesday, January 09, 2018

Foundation 6 Install - 2018-01

[2018-01-07 / 08 - Sun / Mon]

Setting up a new VirtualBox VM with Ubuntu 16.04.3 (guest) on a Windows 10 MSI laptop (host/parent).

I was recently reintroduced with Foundation 6, and I decided it would be a good opportunity for a little redesign of my portfolio. This guide became a byproduct of my setup process.

Note: In this guide, 'ubuntuuser' will be the local Ubuntu username you choose when creating your VirtualBox Ubuntu VM (bullet item #2). Also, I tried to put all the important commands to run in bold - hopefully this translates when I publish from Evernote to Blogger. :)

VM with Foundation 6 from Scratch:

     - Downloaded Ubuntu Server Latest (16.04.3) ISO

     - Created a new VirtualBox VM (named "F18").
          Apply the ISO, run through the Ubuntu installation (I accept near, if not all, defaults).
          LAMP server | Mail server | Samba file server | OpenSSH server | Basic Ubuntu server
               (names and passes are just suggestions; please don't use them verbatim.)
               Server Name: [myubuntu]
               Ubuntu Admin User & Pass: [ubuntuuser][aweSumPas^sW8rk]
               MySQL Root User: [giv#AGoodPawswd]
                    (^^^ watch this; it kind of looks like it wants a pass for
                    your Ubuntu root user, but it's for the MySQL root user.)
          sudo apt-get update
          sudo apt-get upgrade (new install; could take a little while)
          sudo apt-get update

     - We need Git
          sudo apt-get install git
          git config --global user.email "your@gitemail.com"
          git config --global user.name "Your GitHub or BitBucket or XyZ Name"

     - Created GitHub Public Repo
          No license (implied self-copyright)
          Updated Readme.md to reflect WIP

     - We need the framework
               - Didn't install Foundation CLI (just did the clone thing...)
          git clone https://github.com/zurb/foundation-zurb-template kdcF6
          Edited package.json to be my own name, Git location, etc.

     - Setup WinSCP connection
          [connect to SFTP:22 myubuntu|ubuntuuser]
          [chmod] (d-755/f-644) to all files/folders* inside kdcF6 (wherever you put your F6 files)
               *I left the .git folder alone.
               (Selective multi-file and folder selection inside GUI is easier than via cmd line.)

     - Ran through setting up 'nvm' and node

               nvm - creationix
               wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

               libssl-dev build-essential / build-essential
               sudo apt-get -y install libssl-dev build-essential
               sudo mkdir /tmp/node-install
               cd /tmp/node-install
               sudo wget {paste}

               node-install - Beware pipe ( | ) command separators | Inserted only for brevity.
               sudo tar -zxf {tab} | cd {tab} | sudo chmod -R 770 /tmp/node-install/{tab} |  
               sudo ./configure | sudo make (takes awhile) | sudo make install |  
               node -v | cd / | sudo rm -r /tmp/node-install/

          Current Node at time of downloading from "Source Code"

     - Ran: sudo npm install
          The moment we've all been waiting for...
          Failed! Permissions issue.

          First I found and tried:
               sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

          That condensed cmd did not behave well, so ended up doing them separately:
               sudo chown -R $(whoami) /usr/local/lib/node_modules/
               sudo chown -R $(whoami) /usr/local/bin/
               sudo chown -R $(whoami) /usr/local/share/

          Then I found and ran:
               sudo npm cache clear
               sudo npm cache verify
               sudo npm cache clear --force
               sudo chgrp -R root /home/ubuntuuser/.npm/
               sudo chown -R ubuntuuser /home/ubuntuuser/.npm/
               ll /home/ubuntuuser/.npm/

          Last thing, should go ahead and do before npm install...
               When [npm install] is run first, it will end with a message suggesting:
               sudo chown -R $USER:$(id -gn $USER) /home/ubuntuuser/.config

     npm start
          ^--- Look ma, no sudo!!!

We've got take-off!
     http://myubuntu/foundation/f6/dist/

Note: Because I did not install the Foundation-CLI, you may notice I'm not running "foundation watch", but "npm start". These are the same thing ('foundation watch' is an alias).

Note: In the 2+ years I've been running these Ubuntu setups, this is the first time in an Ubuntu environment I've been able to, (had to, in fact,) run 'npm' without 'sudo'.

Running in a server-only terminal.
     - Looking into turning off BrowserSync (or see if I can enable it to run outside of my headless server).
     - Or I can install Ubuntu Desktop as I did on my (old?) primary VM.
     Suggestion was to set: open = false

     Found it! (added open: false)
          [gulpfile.babel.js]
function server(done) {
browser.init({
server: PATHS.dist, port: PORT,
open: false
});
done();
}

And we've got an even Better Take-Off !!!
     http://192.168.43.95:8000 (ran this from my Win 10 host - BrowserSync connected!!!)

And we've got control over our take-offs !!!

Setup Samba Sharing:
     sudo vi /etc/samba/smb.conf
[VMCode]
path = /var/www/html/
available = yes
valid users = ubuntuuser
read only = no
browsable = yes
public = no
writable = yes
     sudo smbpasswd -a ubuntuuser
     sudo service smbd restart

Initial Issues: I had major issues with my first VirtualBox VM (named "Foundation") whereby I set up the hard drive to be dynamic, but it set itself to 10GB. Even after updating it to 20GB via the VM Media Manager, Ubuntu would not see the changes.
     - Spent Sunday going over documentation, watched 6 videos, and got initial VM with Foundation 6 setup.
          Problem came when trying to setup a 2nd Foundation project.
     - Ran out of space on 2nd install of Foundation (tried 5+ times).
     - Spent most of Monday trying to get drive expanded in initial "Foundation" VM.
          Used often: sudo npm cache clear

Editors Note: You will see that I used multiple tenses, and I apologize for that, but I primarily just wanted to get the overall (but primary) gist of it all documented.

A little further: In addition to using Foundation 6, because React requires its own server, I may be introducing a little Vue into these otherwise static LAMP pages. Maybe... Hopefully...

Some References:

Warning: Please do not blindly copy and paste any of this code. Always know what you're entering, even if it means looking up every other word until you grasp it. Or, ask. Although I'm only a mid-level Front-End Engineer, comments and questions are still welcome.