DEV Community: Andy Chen

strategies to puzzles

Andy Chen — Wed, 28 Jul 2021 01:42:38 +0000

Palindroms

recursion
stringmanipulation

string.replace(/[^A-Za-z0-9]/g, '') gets rid of spaces string.split('').reverse().join('')

for loops for loops for (var i = 0; i < len / 2; i++) { if (characters[i] !== characters[len - 1 - i]) return false; }

Reversing strings = 1) reverse
2) decrementing for loop
3) recursion with substr and charAt

Binary Search.. linkedlist ... etc to come

useful array methods

Andy Chen — Tue, 27 Jul 2021 22:01:54 +0000

Map

Contains

Reduce

Filter

forEach -

var test = [5, 6, 2]


var maxNumDeclarative = function(array) {
  // your code here
  var maxi = array[0]


  array.forEach((item) => { 
    if (item > maxi) 
    maxi = item;
   })


  // array.forEach(function (item) {
  //   if (item > maxi) {
  //     maxi = item;
  //   }
  // })


  return maxi;
};

maxNumDeclarative(test); ```

Function Invocation vs Function Definition

Andy Chen — Mon, 19 Jul 2021 00:11:01 +0000

Function Definition is where we build our function (after the double parenthesis).

s.l advice

Andy Chen — Wed, 14 Jul 2021 22:49:30 +0000

-recommend slides on types of classes and function binding
-jquery is good portion of first few weeks
-study about react
-hone in on recursion
-did underbar in one day
-again slides on variables/closure/functional classes

ES6 notation

Andy Chen — Tue, 13 Jul 2021 21:50:38 +0000

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

const materials = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

console.log(materials.map(material => material.length));
// expected output: Array [8, 6, 7, 9]


// Traditional Function
function (a){
  return a + 100;
}

// Arrow Function Break Down

// 1. Remove the word "function" and place arrow between the argument and opening body bracket
(a) => {
  return a + 100;
}

// 2. Remove the body braces and word "return" -- the return is implied.
(a) => a + 100;

// 3. Remove the argument parentheses
a => a + 100;

RECURSION RECAP

Andy Chen — Sun, 04 Jul 2021 02:35:56 +0000

Define Recursion. - Calls itself

Identify when writing a recursive algorithm is the right approach to solving a problem.

Can replace a for loop or when we don't know when we want the function to end. (Linkedlist node). Nested data structures identical structure nested inside. Combination / permutation then use recursion. (n is the input).

Identify the base case of a recursive algorithm/strategy.
bold*-All recursive functions have at least one base case; a case where the function can produce a result without recursing.

In the factorial example above, number === 0 is an example of this solution's base case: If number is 0, we know the solution must be 1 and thus we don't need to recursive to solve the problem.

Identify the recursive case of a recursive algorithm/strategy.
-recursive case is where function invokes itself.

Understand what the Call Stack is.
-Call stack is the order in which the function is executed. It starts LIFO LAST IN FIRST OUT

Understand the relationship between the execution contexts that come to exist during a recursive process.

STEPS TO SOLVE RECURSION
1) Identify the smallest piece of the data that your function needs to handle
2) Write the function to handle this case and only this case (BASE CASE).
3) Once base case handled, Identify what will make the function need to continue (find the recursive call)
4) Make the recursive call
5) Accumulate the return to previous calls (store the value)

GIT SUBMISSIONS PRECOURSE

Andy Chen — Tue, 22 Jun 2021 06:29:09 +0000

base repository: hackreactor/seip2006-xx, base (yourusername) <- headrepository: username/seip2106, compare: master

Testbuilder comments v1

Andy Chen — Mon, 21 Jun 2021 06:42:21 +0000

wise choice of variable declarations!
general rule of thumb is: if a value or a method/function is used 3. more than once with the same arguments, setting a variable for it may be a good idea
instead of having JS constantly process a function call, we can process it once, save it in memory (a variable) and just use this data from memory for more efficiency ⚡

CONS -
Variable Naming
we should name variables very explicitly, like plain English.

do not create numbered variables; avoid naming variables like x1, x2, x3 etc, even if the number has some meaning!
consider using a name such as firstTwoDigits or firstTwoCharacters
using a mathematical range detection approach would be a more efficient process ⚡
instead of having JS process 5 separate conditions, we can speed things up by checking 2 conditions just remember to adhere to best practices and convert your string into a number
we can shorten our code a LOT if we were to use native JS methods such as .includes/.indexOf that would address the work that we're doing within this entire loop~
instead of this very "hard-coded" approach, consider using the card variables above with our detection
```
if ( ( card === '38' || card === '39' ) && cardNumber.length === 14) {

return "Diner's Club";
```

} ```

this type of approach would allow for us to address (1) network per if block which reduces the amount of repetitiveness

we can create a library of helpers for each card network
this type of work is a bit less on priority as it is our main duty to pump out a working product more than a perfect product
the idea here is to build a library of "alike" functions that all do the same thing
they all just want to confirm whether or not the card belongs to their network
inside these helpers is where we want to use our other helpers to help with the detection
JS's type coercion will always prioritize String data types
therefore, there is no need to call .toString here

Software Engineer approach process: Systematic Process

Andy Chen — Tue, 15 Jun 2021 03:09:04 +0000

Interpret the prompt - What is it really asking ?
Input Output Constraints Edgecases - IOCE
Write tests
High level strategies (make diagrams if neccessary)
Pseudocode the strategy
Implement the solution

Debugging

Andy Chen — Mon, 14 Jun 2021 20:23:02 +0000

Using primarily Google Chrome's Debugger tool

Tutorial: https://developer.chrome.com/docs/devtools/javascript/

To open - Inspect Element on webpage

Sources to see all the files associated with webpage
You can make breakpoints and filter them with using 'Event Listener Breakpoints'
Step over function call to go skip to different functions
Local -> Scope + Breakpoints can be an efficient tool to see how your variables are progressing within a function
Watch can be useful when seeing what the variable CURRENTLY is.
Use "Console" as a whiteboard test
You can edit code directly in the 'Sources' then hit save.

Git ~ Workflow

Andy Chen — Mon, 14 Jun 2021 18:40:04 +0000

-Fork and clone code repository (assignment)

git clone (url of clone taken from github repository)

-Make regular commits while conducting work

git add . 
git rm --cached to unstage
git status .
git commit .
git checkout -- <file> discards changes to working directory. reverts the specified file to last commit state.
git log - 
git history -
git remote - specify parent repo where you forked from

-Push your code (after each commit)

git commit .

-Create your final commit with the message "Assignment Complete"

git push origin master

-Submit your final code via a Pull request in GitHub
done on Github

pwd - print working directory (displays the path)
mkdir - make directory within
touch - access or "touch" a file - if DNE, file will be created
if does exist, timestamp of last access to the file will be updated

Front-End Requirements

Andy Chen — Mon, 14 Jun 2021 05:38:07 +0000

Taken from a sample size of 10 entry level job applications for front end Jr or developer roles.

HTML / CSS / JAVASCRIPT / SASS / JQuery
Ability to leverage APIs to create dynamic websites.
Familiarity with ReactJS
Experience with Git preferred
TypeScript a plus
RESTful APIs
Flexbox/CSS Grid a plus (For CSS)
Experience with Rest and GraphQL
Experience with NodeJS, Express, React, Redux and Selenium/WebdriverIO

HTML5, CSS, JavaScript, jQuery <- THE BIG ONESS