BenjaminSpak.com

#301DaysOfCode & Productivity Journal - Round 2

Template


# Day xxx | xx.xx.xxxx

*How did I do well?* <br>

+ 

*How can I improve* <br>

+

Day 52 | 10.31.2018

How did I do well?

How can I improve

To Learn List

Day 51 | 10.30.2018

How did I do well?

How can I improve

To Learn List

Day 50 | 10.29.2018

How did I do well?

How can I improve

Day 49 | 10.28.2018

How did I do well?

How can I improve

Brain Dump

Day 48 | 10.27.2018

How did I do well?

How can I improve

Brain Dump

Day 47 | 10.25.2018

How did I do well?

How can I improve

Brain Dump

Day 46 | 10.24.2018

How did I do well?

How can I improve

Brain Dump

TIL Another Way to Comment a Code Block in VSCode


Ctrl + K + C

Day 45 | 10.23.2018

How did I do well?

How can I improve

Brain Dump

Day 44 | 10.14.2018

How did I do well?

How can I improve

Brain Dump

Day 43 | 10.13.2018

How did I do well?

How can I improve

Brain Dump

Day 42 | 10.12.2018

How did I do well?

How can I improve

Brain Dump

Day 41 | 10.11.2018

How did I do well?

How can I improve

Brain Dump

Day 40 | 10.10.2018

How did I do well?

How can I improve

Brain Dump

Day 39 | 10.9.2018

How did I do well?

How can I improve

Brain Dump

Affirmation

I am healthy. I am wealthy. I am wise. I am bold.

Vision

Save New Developers Time & Stress.

Day 38 | 10.8.2018

How did I do well?

How can I improve

Day 37 | 10.7.2018

How did I do well?

How can I improve

Brain Dump

Day 36 | 10.6.2018

How did I do well?

How can I improve

Brain Dump

Day 35 | 10.5.2018

How did I do well?

How can I improve

Brain Dump

Day 34 | 10.4.2018

How did I do well?

How can I improve

Brain Dump

Day 33 | 10.3.2018

Code

How did I do well?

How can I improve

Brain Dump (Performed At 7PM)

I didn’t feel productive today. Yet: I started a new project at work & hit over 80% of the habits I set.

Health

  1. Went for a jog
  2. Got more sun
  3. Did guided meditation
  4. Did micro-yoga
  5. Ate between 1600 - 2000 calories
  6. Updated morning & evening routine – shifted back 1 hour

Learned

  1. Set up GitHub Pages (Git Hub Hosted).
  2. Listened to a podcast (Tim Ferris).
  3. Read a book (Chakra for Beginners).
  4. Set Jeykell & pushed a first post for all publications on the Spak Media Github Org

Side Projects

  1. Converted 301DaysOfCode.com to a static site hosted on GitHub.
  2. Contacted registrar about why domain redirects were not working.
  3. Edited my Calendly links for programming mentorship in the evenings after work on the weekend.

Day 32 | 10.2.2018

Code

How did I do well?

How can I improve

Brain Dump (Performed the following morning)

Day 31 | 10.1.2018

Remove Entries in a Repo But Keep Files Locally

src

git rm -r --cached [dir/file name]

Day 30

Created a wireframe, planned database tables & front-end div mockup for a habit tracking app.

Day 29

Day 28

Watched The What, Why & How of Wireframing

Day 27

Day 26

Day 25

How to build a secure web applications with Ruby on Rails

Day 24

Day 22 & 23

Day 21

Finally the weekend!

Symbols are a one off version of a string and are more memory efficient.

"Ruby".object_id

:ruby.object_id

Hashes are a collection or set of key value pairs.

who_am_i = {
  :first_name => "Benjamin",
  :last_name => "Spak"
}

who_am_i[:first_name]
=> "Benjamin"

Method is a block of reusable code.

def good_morning
puts "Good Morning"
end

Unless is the opposite if an if statement. It only runs if false.

age = 22
unless age > 65
puts "You're a yougin"
end

.each method. A method can accept one or more parms within pipe | chartacters.

list = [1, 2, 3, 4, 5]
list.each do |number|
puts number * 8
end

Common Commands

Common Column Attributes

Common Commands Cont …

Controller Action Example:

class PostsController < ApplicationController
  def index
  end
end

Common Commands Cont …

CRUD Action HTTP Verb
Create POST
Read GET
Update PATCH
Destroy DELETE

Day 17 - 20

Still mostly touching code at work.

Day 15 - 17

Worked on Spak.co & learning the ropes at my new contract with Wells Fargo.

Day 14 | Part 1 | 9.14.2018

Woo! Learning CS is fun again! Very excite! For more Data Structures and Algorithms in JavaScript - Full Course for Beginners

Cheers to Scott Diemer for mentioning on Twitter that I can just use an -a flag in place of git add . when stringing Git CLI commands.Re: Day 13s Tweet.

Want to expand my programming awareness a little bit today. Watching Robert C Martin - Functional Programming; What? Why? When?

Side Note: CS50 wasn’t a total waste of time – still won’t continue it – but, now I’m familiar with C syntax – which Uncle Bob likes writing his examples in.

State

1; // a value
in x=1 // x is an id that has a value.
x=x+1; // now x has changed state.

The final above line is stateful – ideally, to build more fault tolerant code we want stateless code – no variable is altered.

Thought: Ah! So this is why I’m seeing const for variable assignment more often in JS than let or var. I thought I knew, but this adds an extra level of WHY it is done; huzzah!

Stateful code is liable to cause memory leaks – garbage collection is a merly a hack to deal with the side effects of stateful code.

Why Functional Programming?

Problem:

</ Functional Programming Video>

👀 “scala vs haskell” 👀 “scala vs go” 👀 Making The Move From Scala To Go, And Why We’re Not Going Back

Ah!!! Recalled from D 12 “All React components must act like pure functions with respect to their props.”

Now we’re cooking with gas! Love it when to seemingly unrelated topics – Reace Function Porgraming matach up and reenforce learning to two areas!

</ Functional Programming Queries>

👀 GopherCon 2015: Russ Cox - Keynote

</ GopherCon Video>

Okay – now - back to CS.

Queue - Data Structure

Main methods of a queue in JS:

Tree – Data Scructure

From personaly experience – working with the DOM – I’m familiar with grand parent & grand children nodes being used to label things as well.

Biary Search Tree – Data Scructure

On average - operations are able to skip about half of the tree.

Day 13 | Part 1 | 9.13.2018

Common Datatypes CS50 - Week 7 – part 2

Array

Linked List

… Okay, I’m looking for another CS recourse; CS50 is horrible at providing concise lessons …

Data Structures and Algorithms in JavaScript - Full Course for Beginners

Stack - Data Structure

JavaScript already has all of the array functions necessary to use it as a stack.

Sets - Data Structure

Day 12 | Part 1 | 9.12.2018

CS50 Week 5 - part 1

Finally decided to complete CS50 so I have a basic grasp of how low level languages work. Only 7 more weeks worth of videos. At my current pace I’ll be done in 1 - 2 weeks.

CS50 Week 5 - part 2

Lecture 63 + Jr -> Sr. Dev Course

Day 12 | Part 2 | 9.12.2018

Going through the React tutorial; show provide better solid rules, methodologies & principles to follow for React.

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;

JSX Represents Objects
Babel compiles JSX down to React.createElement() calls.
These two examples are identical:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

Note: Always start component names with a capital letter.

All React components must act like pure functions with respect to their props.

Spak.co Community Development

CS50 Week 7 – part 1

CS50 Week 7 – part 2

Day 11 | Part 1 | 9.11.2018

CS50 Week 4 – Part 2

More C syntax and swapping numbers in an array. 💤

Day 11 | Part 2 | 9.11.2018

Jr to Sr Dev Course – Lecture 60 - 63

import React from 'react';

const Card = (props) => {
  const { name, email, id } = props;
  return (
    <div className='tc bg-light-green dib br3 pa3 ma2 grow bw2 shadow-5'>
      <img src={`https://robohash.org/${id}?200x200`} alt='robots' />
      <div>
      <h2>{name}</h2>
      <p>{email}</p>
      </div>
    </div>

  );
}

export default Card;

Re-watch lecture 63 before work tomorrow

Day 10 | 9.10.2018

CS50 Week 4 – Part 1

Merge Sort Algo

On input of n elements:
  If n < 2
    Return.
  Else
    Sort left half of elements.
    Sort right half of elements.
    Merge sorted halves.

Cut the arrary in half
  Sort the left 1/2 of the original array
    Sort the left 1/2 of the left 1/4 of the split array
    Sort the right 1/2 of the left 1/4 of the split array
  Merge / group - the split 1/4 arrays into ordered 1/2 arrays
  Merge / group - the split 1/2 arrays into a reordered whole array

Efficacy T(n) = 0, if n <2

T(n) = T(n/2) + T(n/2) + n, if n > 1
T(16) = 2xT(8) + 16
T(8) = 2xT(4) + 8
T(4) = 2xT(4) + 4
T(2) = 2xT(1) + 2
T(1) = 0 <-- Base Case

Cool! Plateaued on Big O notation. Will need to stop and review tomorrow.

Jr to Sr Dev Course – Part 4 – React, Redux + Bundling

Haven’t been sleeping well, crashed out for a couple of hours after my first day with Well Fargo. So far so good, chill company & team.
Starting with React in the course. Should be an informative refresher.

Robo Friends App

Install:
npm install -g create-react-app

Create App:
create-react-app NAME

Package.json scripts:
npm start

Package-lock.json:

.gitignore:

public/manifest.json:

src/index.js:

RF APP Component 1
src/index.js

Tachyons – A more light weight bootsrap-esk package
npm install tachyons

Getting too tired - re-watch lecture 60 before work tomorrow

Day 9 | 9.9.2018

Starting The Complete Junior to Senior Web Developer Roadmap (2018) – On Udemy

Now using ^^ to denote something to look up tomorrow.
Now using ==> to denote a topic / task has been pushed from the previous day.

Made it though the SSH section of the course. It’s 2am. Going to try to sleep again.

Pick up here

Day 9 | Part 2 | 9.9.2018

Now including search queries. Denoting with eyes emoji 👀.
Using ... alternatively for searching or to denote time has passed.

GitHub Command Efficiency

CS50 Week 2 – Part 1

The Complete Junior to Senior Web Developer Roadmap – Section 3 - Performance

Why we need performant websites

Network Optimizations

  1. Minimize / uglifiy text files – HTML, CSS, JS.
  2. Minimize images.
    • SVG, JPG, PNG, GIF, WebP
    • File format use cases
    • jpeg-optimizer.com
    • tinypng.com
    • Always lower JPG image quality to 30% - 60%
    • Resize image based on size it will be displayed.
    • Use media queries to display different size images based on browser window size / client.
    • Use CDNs like imigx to serve images.
    • Use a tool such as verexif to remove image meta data.
  3. Use light wight frameworks that contain smaller, less files.

Critical Render Path

DOM --> CSSOM --> Render Tree --> Layout --> Paint |

HTML

CSS

JS

Prefetching, preloading, prebrowsing

After going though a solid portion of this content I realized I researched many of these concepts while working @EBG in order to get Adobe Target experiences to be more performant – also had to use setTimeout() often haha.

However, I never wrote them down. It’ll be nice to now have written cheat sheet / check list to come back to.

“Premature Optimization is the root of all evil” 🔥🔥

CS50 Week 2 – Part 2

The first part of this video is just C syntax and C caveats … 💤
Stanford algos may be up next 🤔
Skipped ahead about 20 min. Just talking about square bracket selection of indices & arrays.
hmm 🤔 they are talking about crypto in week 3. Okay, I’ll check it out.

CS50 Week 3 – Part 1 & 2 Thank god to 2x speed – 2x video speed is BAE ❤️ j/k Youtube Playback Speed Control and 3X is BAE ❤️️ It really is the simple things in life … 🔥🔥
hahah man, if I were paying for this course from Harvard I would be pissed; it’s super redundant – they are calling back to the algo in week 0.

Woo! Okay, sorting algo @ 16 min in. Time to slow it down :)

Bubble Sort Algo

Check number to right of current number
if number to right is smaller
  move that number to the left
if no sorting took place
  sorting is complete

Efficacy == n squared -- in theory

Selection Sort Algo

search and store smallest number
then check the rest of the data for a smaller number
if a smaller number is found, store that number and let go of the previously stored number
then after checking the entire set of numbers, move the ultimate smallest number to the start of the set.
as an optimization, ignore the known smallest number
if a larger number is in the the index of the next smallest number you would like to store, swap the place of the larger and smaller number to place the smaller number in the correct location
  repeat the above pattern for the next smallest number until the sequence is complete

Efficacy == n squared -- in theory

Insertion Sort Algo

take the first index and mark it as sorted
check the next unsorted index and compair it to the previous sorted index.
move the smaller of the indices to the left; within the sorted indices.
then sort the stored set similarly to the selection sort algo ...

Efficacy == n squared -- in theory

Day 8 | 9.8.2018

Continuing CS50 – Week 1

Week 1 – Part 1 – Notes Now using | to denote simple Googleable/familiar concepts for brevity.

Week 1 – Part 2 – Notes

Downing energy drinks because I wanted to be productive. On to the second video …

New concepts:

hmm … may dip in and out of a few videos so I can skip to things I may be unfamiliar with. Or, I think stanford has quality algorithm videos online; may switch to those. TBD.

Day 7 | 9.7.2018

Watching the first video of Harvard CS50. Had gone through the course before, but I wasn’t experienced enough to grasp most of the applicability. Now, I’m excited to marry CS theory with my coding experience!

Linear

Logarithmic

algorithms

What’s an algorithm?

Ted Ed Explainer Video

What is Pseudocode?

Example:

let N = 0
for each person in room
  set N = N +1

In other words:
For each person in the room we will increase our count N by 1.

Optimization of the above algorithm

let N = 0
for each pair (2) of people in the room
  set N = N + 1

let N = 0
for each pair of people in room
  set N = N + 2
if 1 person remains then
  set N = N + 1

To-to-date CS50 Resources cs50.net

Day 6 | 9.6.2018

Tonight

Tomorrow

Day 4 & 5 | 9.4.2018 - 9.5.2018

Haven’t been tinkering with code as much as I’d like to the past couple of days. However! I put to two websites from Wordpress templates to help our community.

Day 4 | 9-3-2018

Was working on the Spak.co startup, building out the squad, hosting a few meetings & figuring out new social media marketing strategies for the podcast, twitter, Instagram & YouTube. Finally back to Node :)

MVC

Middleware

(req, res, next)

exports.myMiddleware = (req, res, next) => {
  req.name = 'Wes';
  next();
};

router.get('/', storeController.myMiddleware, storeController.homePage);

Schema

Example schema:

const storeSchema = new mongoose.Schema({
  name: {
    type: String,
    trim: true,
    required: 'Please enter a store name!'
  },
  slug: String,
  description: {
    type: String,
    trim: true
  },
  tags: [String]
});

If you want to use these this keyword you need to use the function keyword instead of ES6 arrow frunctions.

storeSchema.pre('save', function(next) {
  if (!this.isModified('name')) {
    next(); // Skip it
    return; // stop this function from running
  }
  this.slug = slug(this.name);
  next();
  // TODO make more resiliant so slugs are unique.
});

Day 3 | 8-30-2018:

Note: Signed employment contracts & did several interviews last calendar day 8-29-2018. Still on track for coding 301 days out of 365 😃

Day 2 | 8-28-2018:

Going through Wes Bos’s Node.js course for a quick refreasher. Killer course; I’m sure I’ll pick up some things I missed last time.

Setup

  1. Installed latest version of node form the node.js website.
  2. Created a database in Mlab.
  3. Checked Node version Node -v.
  4. Created and move to working directory \301DaysOfCode\Day-1-Node-JS-Practice\starter-files.
  5. Ran Node install on package.json dependencies.
  6. Replaced DB connection string & renamed sample environment file.
  7. Downloaded, installed and verified database connection (via connection string) with Mongo DB Compass.
  8. Ran npm start to kick start our server locally on localhost:7777.

Routes

  1. Installed JSON formatter to view JSON syntax in Chrome in a user friendly way.
  2. Echo a data string onto the page from the address bar. res.json(req.query); example.com?name=sam&cool=true

Routes - Req/Res

  1. Use the req callback function to search the route’s code block for statements and logic to run.
  2. Use the res callback function to output / display info for the client/browser.

Pug(Jade) Template Engine

div.wrapper
    p.hello Hello!
    span#yo YO!

img(src="dog.jpg" alt="Dog")

h2 Hello <br>
  em How are you?

res.render('hello', {
    name: 'was',
    dog: 'snickers'
  });

p.hello Hello my dog's name us #{dog}

img.dog(src="dog.jpg" alt=`Dog ${dog}`)

block header

EOD Note Got tired / spacey on the template helpers video #6. Rewatch tomorrow.

Day 1 | 8-27-2018:

Checking out Wes’s Mastering MarkDown Course. It’s 100% free and helped me fill out this journal entry.

x = 100;
- x = 200;
+ x = 300;

```diff
x = 100;
- x = 200;
+ x = 300; ```

* [ ] Unchecked
* [x] Checked

Lookup

Notes

BNS-shorthand-and-dev-env-explained
Tools-to-read-and-articles-to-try”# org-roadmap”