DEV Community: Kurt Bauer

CodeToday: "Word Split" Algorithm, Coderbyte

Kurt Bauer — Wed, 18 Mar 2020 19:22:03 +0000

The Gist

I had worked on a Medium level Coderbyte challenge for an interview, but was unable to make any decent headway at the time. So I did what any reasonable person would do, let it bother me to the point that I made a codepen just to solve it.

The Problem

Problem: Have the function WordSplit(strArr) read the array of strings stored in strArr, which will contain 2 elements: the first element will be a sequence of characters, and the second element will be a long string of comma-seperated words, in alphabetical order, that represents a dictionary of some arbitrary length. For example: strArr can be: ["hellocat", "apple, bat,cat,goodbye,hello,yellow,why"]. Your goal is to determine if the first element in the input can be split into two words, where both words in the dictionary that is provided in the second input. In this example, the firs element can be split into two words: hello and cat because both of those words are in the dictionary. Your program should return the two words that exist in the dictionary seperated by a comma. So for the example above, your program should return hello, cat. There will only be one correct way to split the first element of characters into two words. If there is no way to split string into two words that exist in the dictionary, return the string not possible. The first element itself will never exist in the dictionary as a real word.

My Solution

let strArr = ["baseball", "a,all,b,ball,bas,base,cat,code,d,e,quit,z"]
// let strArr = ["hellocat", "apple,bat,cat,goodbye,hello,yellow,why"]
function WordSplit(){
  // First Element, with single string   
  let wordToCompare = strArr[0]
  // Second Element, with single string   
  let stringDictionary = strArr[1]

  // Array of split strings   
  let singleStrings = stringDictionary.split(',')
  // Hold Answers   
  let answerWords = ""

  singleStrings.map((firstWord) => {

    let splitMainWordArray = wordToCompare.split(firstWord)

    if(splitMainWordArray.length > 0){

      splitMainWordArray.map((word)=>{

        let joinedWord = firstWord + word
        let reversedWord = [joinedWord].reverse().toString()

        if(joinedWord === wordToCompare || reversedWord === wordToCompare){
          // console.log(firstWord, word, 'winner')
          answerWords = "" + firstWord + ", " + word + ""
        } else {
          return 'Not Possible'
        }

      })
    }

  })

  return answerWords
}

The Process

1) First I start by grabbing the 2 elements which the problem refers to. The variable wordToCompare refers to the word that I'll be comparing. And the variable stringDictionary represents the dictionary of words string that I was provided.

2) In order to iterate over my dictionary string, I have to break it down with stringDictionary.split(',') and assign that to a variable as well to late manipulate, named singleStrings. It would look something like, ['a', 'all', 'b', ... ]'

3) I also add a variable called, singleStrings, which will be an empty string for now. Later on we can set our answer to equal this variable to return our answer out of the loops.

4) I then run a map() function on the singleStrings variable. This allows me to try and see if I can split() my wordToCompare in order to see if I can split it into two words. The problem is that I then get an array of string elements. I now have to iterate over that array to check each string and see if it can be found in the original string in any way, like baseball for example.

5) Some of the loops result in single element arrays, but I only want to look at the ones with more than one, as we're trying to split my word into two elements. For this reason I add the if(splitMainWordArray.length > 0) line.

6) I add a second map function, splitMainWordArray.map, to loop over the first arrays I got when I wrote let splitMainWordArray = wordToCompare.split(firstWord). I'm comparing the dictionary words saved in the singleStrings array and with my new arrays I'm creating each time I split a word.

7) There was a case where I was getting base from baseball, but I needed to place it inside an array to then run a .join() and .toString() in order for ballbase to equal baseball. Which is why I then write if(joinedWord === wordToCompare || reversedWord === wordToCompare).

8) If these 2 conjoined words are equal to our first string, baseball, or if reversed they're equal, we then have our answer that we concatenate and return outside of all the loops by assigning it to the emprty answerWords variable we created at the start.

Conclusion

I built this out in a CodePen if you want to play around with it. The final answer I get from our example string was base, ball. I kept trying to use regex to solve the problem but lost time researching different ways I could use match() or replace(), but at the end of they day this is how I was more quickly able to solve the problem. If anyone can complete a simpler solution with a regular expression, I'd really love to take a look!

See the Pen WordSplit by Kurt (@kurtbauer) on CodePen.

Anyone?

CodeToday: "Convert string to camel case" algorithm, CodeWars

Kurt Bauer — Mon, 16 Mar 2020 12:51:26 +0000

The Gist

I started the morning working on an algorithm and realized it wasn't going to be a quick practice for me. I wanted to go over my thinking process, and the top solution after I submitted as well. We can always learn to be better, so why not try to think through someone's solution that seems cleaner?

The Problem

Complete the method/function so that it converts dash/underscore delimited words into camel casing. The first word within the output should be capitalized only if the original word was capitalized (known as Upper Camel Case, also often referred to as Pascal case).

should handle empty values

should remove underscores and convert first letter of word to upper case

should remove hyphens and convert first letter of word to upper case

My Solution



function toCamelCase(str){
  //console.log(str, 'testing')
  if(str === ''){
    return ''
  } else {

   let containmentArea = []
   let splitString = str.replace(/[^A-Z0-9]/ig, "_").split("_")
   //[ 'the', 'stealth', 'warrior' ]
   let firstElement = containmentArea.push( splitString.splice(0,1) )

   for(let word in splitString){

     let splitWords = splitString[word].split('')
     let capitalLetter = splitWords[0].toUpperCase()

     splitWords.splice(0,1, capitalLetter)
     let joinedWord = splitWords.join('')

     containmentArea.push(joinedWord)
     let newSentence = containmentArea.join('')

   }
     return containmentArea.join('')
  }
}

The Process

1) I'll have to check if there's an empty string, so I create an if/else statement.
2) First I split my string, splitString, with a regular expression

replace() = searches a string for a specified value, or regular expression, and returns a new string where the specified values are replaced.
In this case I used a regular expression, /[^A-Z0-9]/ig, in the search value.
The carrot, (^), is the negation operator which matches anything NOT in the character class. Some great regex resources are Regular-Expressions.info, RegexPal and this post on StackOverflow. Below I pasted an example using the RegexPal tool. Only characters that are not numbers or letters are being highlighted. Now we can see why it would find dashes in the strings I'm working on.

Example of /[^A-Z0-9]/ig regex being used

I replaced any odd characters, so that I could know for certain that all my words are separated by the same character. I know that all my words are separated by the underscore _, so now it makes it easier for my to use the split() method to separate each word by commas, and place them in an array, [ 'the', 'stealth', 'warrior' ].

3) My next big hurdle will be capitalizing every first letter of every word...except the first word. To deal with this I used the splice() method to remove the first word from the original array, then push it into my containmentArea array. I created an array to temp hold my strings, as I plan to later use the join() method to smush them back into strings right before returning them. But there's still more work to be done.

4) On to the for loop which I wrote with the ES6 syntax. Remember that splitString is an array with my string split into comma separated elements. Let's start iterating through every element, using the variable word. I will use the split method on every word, splitString[word], to further break down my string into something that would look like [ 's', 't', 'e', 'a', 'l', 't', 'h' ], for example & I'll store them in an array called splitWords.

5) I can than grab the first element in my splitWords array with splitWords[0], and transform it with the the toUppercase() method. This is how I capitalize every first letter of every word, except the first word that we splice() -d off at the start of this algorithm.

6) Since our process of transforming the first character in the string hasn't modified the original array, we'll have to do that with another splice() method, only this time we'll have to supply our method with a third value, which will be what we want to replace our un-capitalized letter with. In this case, that's represented by the capitalLetter variable in splitWords.splice(0,1, capitalLetter). And we then use our join() method to squish our letters back together into one word, ['Stealth'].

7) We still need to glue our camlCased sentence back together though. I write containmentArea.push(joinedWord) to push our words with the first capitalized into our containment array that still holds the first word we spliced off. And then use another joind, let newSentence = containmentArea.join('') to create my camelCased sentence.

8) We should be done at this point, but can't simply return the containmanetArea variable that's holding our string. This is because the initial split() we ran resulted in an array of strings, that was pushed into another array. So right before returning we use another join() to condense our two arrays into one.

This was my solution, and then after turning it in I am faced with this beautiful answer that's been voted as top:



function toCamelCase(str){

      var regExp =/[-_]\w/ig;

      return str.replace(regExp,function(match){
            return match.charAt(1).toUpperCase();
       });
}

1) The variable regExp is set to equal a regular expression to find all word characters (Alphanumeric or underscore), which is the \w portion of the regex. But with just that, you can't also highlight dashes. Which is why that symbol is proceeded by [-_], making an explicit statement that we want to match dashes and underscores. And as always, i is to ignore case, and g is for a global search. It's finding matches that when console logged to the screen would look like -S match and _s match; whis a (dash || underscore) + a (word character or number).

2) The next step is calls for a replace method, which will take the item to replace in the first parameter, and in this case a call back function in the second parameter.

The replace() method returns a new string with some or all matches of a pattern replaced by a replacement. The pattern can be a string or a RegExp, and the replacement can be a string or a function to be called for each match. If pattern is a string, only the first occurrence will be replaced.

3) the charAt() method takes an index:

An integer between 0 and 1-less-than the length of the string. If the index cannot be converted to the integer or no index is provided, the default is 0...

Just like an array, we're grabbing the second character at index 1, and transforming that to uppercase to replace the dash or underscore the preceded it.

Conclusion

In just 3 steps someone was able to create a solution that was far easier to implement. Though this proves I need to brush up on my regular expressions, I'm glad I could break it down and understand every line.

Resources

CodeToday: Learning By Doing with React Hooks

Kurt Bauer — Thu, 12 Mar 2020 16:38:33 +0000

The Gist

I haven't had a chance to implement React's state hooks in a project yet, so I quickly found a tutorial on Scotch.io to dive into.
I wanted to document my journey through the project and questions I hit as I start using hooks.

The Journey

1) Question: First question I had as I built the below code, was on the syntax. Specifically, using useState([])

function App() {
  const [todos, setTodos] = useState([
    { text: "Learn about React" },
    { text: "Meet friend for lunch" },
    { text: "Build really cool todo app" }
  ]);
}

Answer: Just some regular destructuring, which "makes it possible to unpack values from arrays, or properties from objects, into distinct variables."

I was used to object destructuring:

const person = {first: 'Wes'}
const first = person.first; // 'Wes'

But with array destructuring, we don't have to worry about keys and values jumbling up our code. I quickly found a very clear post by Sarah Chima, called Destructuring Assignment in ES6- Arrays.
Two key basic things are that this array destructuring helps in grabbing our elements based on the array's index. And that commas help us skip over elements and grab the next element.

  var sentence = ["Kurt", "likes", "programming"];
  var [firstWord,, lastWord] = sentence;
  console.log(lastWord) // programming

So now, when I map over my todo array, the first element would look something like:

  console.log(todos[0]); // {text: "Learn about React"}

Now, my app is displaying a list of todos

2) Question: How to add items to my list?

const App = () => {
  //useState: 2 variables, name them anything.
  // firstVar = value || this.state
  // secondVar = function to update value || this.setState
  const [todos, setTodos] = useState([
    { text: "Learn about React" },
    { text: "Meet friend for lunch" },
    { text: "Build really cool todo app" }
  ]);

  const addTodo = text => {
    // spread operaotor = to create a copy of array
    // {text} = from TodoForm/form/input type=text
    const newTodos = [...todos, { text }]; //needs to be object
    setTodos(newTodos);
  };

  console.log(todos); // {text: "Learn about React"}

  return (
    <div className="app">
      <div className="todo-list">
        {todos.map((todo, index) => (
          <Todo key={index} index={index} todo={todo} />
        ))}
        <TodoForm addTodo={addTodo} />
      </div>
    </div>
  );
};

Answer: Where does the magic happen? Well first I had to create a TodoForm component. Still dealing with functional components and hooks, I just added the value for my variable, which will be blank at first. An onChange function was added into the input field, which then passes the value to the addTodo function that we're getting from App's state hook declaration. And finally we reset the value to be black with our setValue function call that works in the same way as setState does within Class components.

import React, { useState } from "react";

const TodoForm = ({ addTodo }) => {
  const [value, setValue] = useState("");

  const handleSubmit = e => {
    e.preventDefault();
    if (!value) return;
    addTodo(value);
    setValue("");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        className="input"
        value={value}
        onChange={e => setValue(e.target.value)}
      />
    </form>
  );
};

export default TodoForm;

Then inside of our app, after importing our TodoFormcomponent, we pass it the addToDo function as a prop. Let's take a look at that function. Here I'm pulling in the user's text, which is a property on our input field. I create a variable, and pass in a copy of my todos array with the spread operator. The second variable in my array is the text we will adding onto our array, and thus our list of tasks.

  const addTodo = text => {
    // spread operaotor = to create a copy of array
    // {text} = from TodoForm/form/input type=text
    const newTodos = [...todos, { text }]; //needs to be object
    setTodos(newTodos);
  };

3) Question: How do I update my list once I've completed a task?

Well most of the work for updating a task as complete is being done in the following callback function, inside my App.js file:

  const completedToDo = (index) => {
    // array holds copt of task list array
    const newTodos = [...todos];
    // find item by its index in array
    // access the isCompleted property

    newTodos[index].isCompleted === false
      ? (newTodos[index].isCompleted = true)
      : (newTodos[index].isCompleted = false);

    // set ToDo list to alrered array that was copied
    setTodos(newTodos);
  };

Answer: It bothered me that I could only mark a task as complete once and not undo it according to the tutorial so I added a ternary to toggle my isCompleted = false property that I added to all my task objects in their initial state. How this works is a Todo component is created with the completedToDo function. This function has access to the index attribute. My ToDo component now looks like:

const Todo = ({ todo, index, completedToDo }) => {
  // Set variabls to hold me strings here
  const complete = "Complete";
  const undo = "Undo";

  return (
    <div
      className="todo"
      style={{ textDecoration: todo.isCompleted ? "line-through" : "" }}
    >
      {todo.text}
      <div>
        <button onClick={() => completedToDo(index)}>
          {" "}
          {todo.isCompleted ? undo : complete}
        </button>
      </div>
    </div>
  );
};
export default Todo;

You can see that I have an onClick even handler that registers when I click a task button, and sends the index up to my completedToDo function. Depending on whether todo.isCompleted if flase or true I display different text. Not a huge change, but it makes it feel more like a task list. It's in my completedToDo function where I'm changing my boolean value. And then I'm using my react hook variable, setTodos, to update my react hook state.

newTodos[index].isCompleted === false
      ? (newTodos[index].isCompleted = true)
      : (newTodos[index].isCompleted = false);
setTodos(newTodos);

So that's mainly it! Now we have buttons that can be marked as completed, or if we accidentally hit it or realize there was something missing, we can always undo.

4) Question: How can I delete an item from my list?

Well it's basically a lot like the function I created to mark a task as completed.

  const removeTodo = index => {
    // create a copy of original array
    const newTodos = [...todos];
    // use splice() to remove item from array based on it's index
    // alters that copy of the array that we've made
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

Answer: We add this callback at a prop in our ToDo component, it grabs the index, I create a copy of my todos array, use the splice() method to remove an element from our array based on it's index. Then the new array copy with remove elements is set with setTodos.

And that's pretty much it! Now both you and I understand the basic of using the usState React Hook to add state to your functional components.

Conclusion

Scotch.io has some great tutorials, sometimes they can be outdated, but for the most part it's a great resource to have. Again, I didn't create this project, but wanted to talk through the parts I need to take a second to research. As you saw, hooks aren't that scary once you jump in! And a big thanks to Sarah Chima, follow her for some more cool walk-troughs and tutorials!

Oh and if you want to take a look at the coded version, I added a link to my CodeSandbox I created. I also advise using that or CodePen, since with the free version you can create an infinite amount of public projects that can be fairly compartmentalized with different files/ NPM packages.

CodeToday: "Find Intersection" Algorithm, Coderbyte

Kurt Bauer — Mon, 09 Mar 2020 18:15:03 +0000

The Gist

I am constantly dealing with code, whether it be small algorithm exercises, creating projects for fun or work, or testing out new tech. Yet, I've realized that things start falling through the cracks once my Firefox browser hits around 55 open tabs. I do my best before pulling the emergency lever and save links to research later, but I know that with all the tools available I could be doing a better job of both helping others that may encounter the same problem, and documenting my small wins for future challenges.

Not everything has to be worthy of 1k or more likes, and not everything has to be constructed to perfectly impress prospective employers or colleagues. Sometimes you just nerd out about code and you want to store that somewhere to reflect on down the road, maybe perfect, maybe not.

Either way I think I've been too worried about someone being elitist or snobby about my learning, and I don't want that holding me back anymore. Maybe I come back and refactor my problems, maybe I don't.

As always, I'm all for constructive comments or learning if you'd approach the problem differently.

And that's okay! So after all of that intro into what I hope this series of constant posts will be, here's some of today's code!

The Problem Statement

Below is the problem I found on Coderbyte

Have the function FindIntersection(strArr) read the array of strings stored in strArr which will contain 2 elements: the first element will represent a list of comma-separated numbers sorted in ascending order, the second element will represent a second list of comma-separated numbers (also sorted). Your goal is to return a comma-separated string containing the numbers that occur in elements of strArr in sorted order. If there is no intersection, return the string false.

For example: if strArr contains ["1, 3, 4, 7, 13", "1, 2, 4, 13, 15"] the output should return "1,4,13" because those numbers appear in both strings. The array given will not be empty, and each string inside the array will be of numbers sorted in ascending order and may contain negative numbers.

The Whiteboard

Below are my initial impressions and notes, the brainstorming session which is much like the knockoff rumba currently banging itself into the walls of my living room.

Your brain when solving algorithms

my strArr consists of two elements, which are each strings. So a simple map won't be so simple, so prior assembly required
'(also sorted)' appears to mean that I won't have to worry about that
return, a comma separated string, so I'll have to make sure not to keep my data in an array after working with it
if none, return false, means I need to check with an if/else somewhere

The Solution

function FindIntersection(){
//1) Grab the first and second elements to be compared
  let firstString = strArr[0]
  let secondString = strArr[1]

//2) Create empty arrays to store elements, after converted from strings to numbers
  let firstElementArray = []
  let secondElementArray = []

//3) split() a string into an array of substrings
//4) map() calls the provided function once for each element in an array,
//in order, to iterate over each string element you want to covert to a
//number data type, and push to your array
//5) wrap each string element with Number(), to transform from string 
//data type to number data type
  firstString.split(',').map((oneNumber) => {
    firstElementArray.push(Number(oneNumber))
  })
//6) build the same function for the next element in the array of strings
  secondString.split(',').map((oneNumber) => {
    secondElementArray.push(Number(oneNumber))
  })

//7) create a variable to store list of numbers, called myAnswer
//8) use filter(), which creates an array filled with all array elements that pass a test
//9) create a test inside the filter function which uses includes(),
//which determines whether an array contains a specified element.
//Basically, is my secondElementArray element(e) included in my
//firstElementArray element(e) when compared?
//10) Wrap your returned answer inside a toString() method, 
//which returns a string with all the array values, separated by commas

let myAnswer = (secondElementArray.filter(

e => firstElementArray.includes(e))

).toString()

//11) Check to find if numbers are there, if not, return false
  if(!myAnswer){
    return false
  } else  {
    return myAnswer; 
  }
}

The Retrospective

No one is invincible, and no one is just born with a talent for coding. This is about always having a growth mindset.

Here are some things that tripped me up and forced me to rethink my approach.

Tried to just force map over my initial array, didn't realized that I had 2 strings to deal with
I lost time trying to convert both strings in the first array, and then putting them into a single array. It was simpler for me to build to seperate functions. Though I believe I could just create a helper function and re-use to keep my code DRY.
I searched for my Number() method to convert my string elements
I initially had my returned array and searched for my toString() method
I actually forgot to include a check if there were no matches, and re-read the question when writing this blog post! To be fair I had past the CoderByte tests without it and didn't realize...

The Conclusion

I've written this out in a CodePen Snippet, since I personally am more of a hands on learner, so here's to hoping this helps you in some way too.

This is my first post in what I hope to be daily conversation and appreciation of coding that I find worth reflecting on.

Imposter Syndrome and Anxiety are real things that deeply affect performance. I hope this motivates someone out there to keep a growth mindset, don't be afraid to write about something even if you don't feel like you know enough about it. It doesn't matter if it's not pretty or if you feel like you're "not a real programmer" because your solution isn't the cleanest. Put positive energy out there, be vulnerable, and always try to be your own best friend! We can all do this.

React Explained

Kurt Bauer — Thu, 07 Nov 2019 19:01:23 +0000

The Gist

If you've ever taken a second to visit the React website, you've read their tagline...

A JavaScript library for building user interfaces

UI & state management are the main problems that React seeks to solve for front-end developers. This is the purpose of react.

When interviewing for a front-end role or brushing up on concepts, we often scramble and open up over 100 tabs on our browser. I wanted to coalesce the main points that you would want to cover when talking about React to your peers.

The following overview seeks to cover React's main concepts, which are important to understand in order to work efficiently.

This is admittedly a long post, BUT it's meant to be more of a reference to get the most out of your reading time. I hope you enjoy it.

Let's dive in! 🏊🏽‍♂️

When building a JavaScript application, we expect to be working with data.

Data in JS is usually built of primitive values, which include:

numbers

strings

boolean

null

undefined

bigint

symbols

As developer's we use these values at the lowest level of our app. These primitive values in JS are immutable, meaning they can't be changed. The variables holding them on the other hand can be reassigned new values.

What does this mean to us as engineers, and foremost, as curious lovers of all things web?

🤔

We need a way to manage our application's data, information that we gather and give to users, in a way that gives us the least amount of headache. As an engineer you are constantly weighing the pros and cons of solutions, do their efficiencies outweigh the readability and easy of use? You'll find that the answer to that question is constantly in flux.

For the following explanations, I'll be moving in the same order that React's own developers laid out concepts, with additional examples and break downs(🤘🏽) along the way.

Always forward, never backwards!

Main Concepts

JSX
Rendering Elements
Components & Props
State & Lifecycle methods
Handling Events
Conditional Rendering
Lists & Keys
Forms
Lifting State Up
Composition VS Inheritance

1.J-ava-S-cript-X-ml

We should always strive to understand the basics. Though I personally understand most of the JavaScript aspect of JSX, I haven't particularly had to interact with XML too much. So my interest is peaked, what is XML?

XML stands for Extensible Markup Language. And if you're thinking to yourself, "Kurt, X-M-L sounds a lot like H-T-M-L", well you're onto something. They're closely related!

The "extensible" piece is due to XML allowing you, as the developer, to define your own tags that can fit your own very specific needs.

This aspect is super empowering and the developer's at Facebook who built React realized this as well.

Okay, that was a lot of words but you're more of a visual learner. Let's look at some JSX code! 🔥⋔

What are we looking at above?

Here we have what's known as a functional component, or "dumby component" due to it being best practice not to include much logic in these components.

All we have is an anonymous arrow function assigned to our constant App, which is then exported as a module by our export default App statement.

We'll get further into the App.js file in React, but for now understand that it's responsible for being the main source of truth along with our Index.js file that' located at the top level of our application's directory.

Within our anonymous arrow function, we're returning a div element. Okay, so far so good, we've all handled div's before. But what's inside of our div?

<PostList /> 👀

Here we see a JSX element in the wild

At the top of our app file, we're importing PostList from a PostList.js file, where our component lives. Thanks to the power of ES6 JS, we're able to use module imports to bring in the functionality we defined somewhere else. P Cool!

To gain a more thorough mental image, let's look at the logic that we've abstracted away.

PostList class component

That's 44 lines of code we've abstracted away! Which makes it a lot easier to focus on the important things when working through our applications.

JSX permits us to use XML-like tags, <OurUniqueTag/>, to build the components and elements we use in React.

Wait a second, it seems we haven't gone over components or elements yet.

Let's start with elements, since components are built with elements!

2. const element = Rendering Elements

Similar to how primitive values are at the lowest level of the JavaScript language, "elements are the smallest building blocks of React apps."

DOM! DOM! DOM!
In my defense, 'Fast & The Furious' came up on GIPHY when I searched DOM

Why did I suddenly starting talking about DOM? Building blocks, it's alllll about building blocks.

DOM stands for "DocumentObjectModel", and like a graphical user interface, it's a programing interface for HTML and XML.

It isn't the web page, but instead it's a representation of it, to allow you to magically wave your developer wand 🧙🏽‍♂️ and change document structure, style, and content.

The data structs that the DOM uses to allow programming languages to connect to the page, are nodes and objects.

import ReactDOM from 'react-dom'
ReactDOM.render(
        <App/>,
    document.querySelector('#root')
)

If you've developed with react you've had to wrap your <App /> with ReactDOM's render method.

To show our users of the web cool sites that do something, we have to constantly be updating our DOM. These dynamic updates can have their own buggy behavior though.

On an update, your browser has to refresh CSS, refresh the DOM node tree and ultimately refreshes the screen that's being displayed. Before React, we'd write a lot of JavaScript code to do this heavy lifting, and if you weren't too careful, it'd start to get noticeable.

How my friend and I looked the first time we spent a week writing a bunch of JS only to see our web page lag us to death

Our JSX elements represent DOM elements, and upon being rendered by ReactDOM.render(), are parsed into those elements on a webpage.

When React is initially rendering elements, it also is building a 'tree' that represents the DOM, or current tree.

Reconciliation is actually an advanced React concept we've managed to stick in here. You can find more in React's docs, though we'll talk about it a bit here.

When diffing two trees, React first compares the two root elements. The behavior is different depending on the types of the root elements.

As updates are made that tell React to re-render, or refresh, a second workInProgress tree is created, to represent what the DOM will be. After processing the workInProgress updates for the DOM, the currentTree will reconcile any differences.

And here is the advantage to using React, performance optimization.

The performance of your app on the web is optimized by two key aspects of this process

Grouping DOM Updates
- React waits until all updates are processed before placing them in the workInProgress tree.
Selective Updates
- React has the ability to apply a diffing algorithm to rapidly select what data needs updating.

Now, let's pivot back over to components 🏃🏽‍♂️

3. Components & Props

In our above code snippet, was a component that we imported, composed of JSX elements.

We saw the 44 lines of code that were able to be abstracted away from our App file. Components like this allow us to split up the user interface in reusable building blocks.

"Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen." -React Docs

const Comment = (props) =>  {
  return (
    <div className="Comment">
      <UserInfo user={props.author} />
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

In this component, we're passing props as an argument to our array function.

Props, or properties, are data objects that traverse the React node tree, in order to provide components with the information they need to repaint the browser DOM.

But where do these props come from? To understand that, we should take a minute to look at state.

4. State and Lifecycle

In our React applications, we will often set initial state in an object.

// PREFERRED & COMMON WAY
state = {
  isClicked: true,
  initialGreeting: "hello, there!"
}

//OR BUILT WITH A CONSTRUCTOR

constructor(props){
  super(props)
  this.state = {
    isClicked: true,
    initialGreeting: "hello, there!"
  }
}

Your state should be sitting within a class component, which typically looks like the code below.

Below is an example of a class react component instance. The difference between a class component and a functional, component which is at it's core purely an arrow function, is that a React Class component comes prepackaged with lifecycle methods.

class Clock extends React.Component {
  render() {
    return (
      <div>
        // Here's some text!
      </div>
    );
  }
}

This is also the reason why developers may choose to call class components, "smart components" and functional components, "dumb components". Our class component is where we will attempt to relay all of our logic, and functional components are more so containers or used for simple building blocks.

But what are lifecycle methods?

When React starts it's work, the first thing it's going to look at is your component's state, when your component is a class component. React won't use up resources looking at dumby components.

You can give your state default values to start the app with, as we've already seen in our examples, or pass in props if you'd like. The preferred approach is to use a simple state object, over using a constructor. Though constructor's can come in handy when creating refs or method binding. But that's a different conversation.

Let's list our the lifecycle methods currently available to us with some brief descriptors.

componentDidMount()
- after initial render, method is called
- used to load/set data
- makes sure that before we send of an AJAX request, there's actually a component for it to be rendered on
shouldComponentUpdate(nextProps, nextState)
- only update a component IF the props it needs change
- issues: will not allow your component to update regularly
componentDidUpdate(prevProps, prevState, snapshot)
- this allows us to work with committed changes to the current DOM tree we reviewed earlier when looking at the DOM
componentWillUnmount
- according to React docs: "it’s very important to free up resources taken by the components when they are destroyed."
- this method is mostly used for cleaning out leftover behavior that's consuming vital app resources

Oof, that was a lot, and there are other helpful ones like getSnapshotBeforeUpdate, getDerivedStateFromError, componentDidCatch, and getDerivedStateFromProps that you should take some time to look at. But the methods mentioned in our list are the main ones you'll be needed to build a nice application.

Main take away is that these lifecycle methods allow us to update out apps data, or state.

The 3 Main Rules of State

Do not modify state directly
- this.state.comment = "nopity-nope nope"
- this.setState({words: "better!"})
State updates can be Asynchronous
- remember to use a form of setState that accepts a function, over an object.
- this.setState((state, props) => ({words: state.words}))
- can also be a regular function
State Updates are Merged
- your updated state is merged into the current node tree, and then you can setState({}) in as many locations and as many times as you'd like.

Remember: in React, data flows downwards. Think of waterfalls, made up state in parent components that is channeled downwards to their children by props.

5. Handling 🖐🏽 Events

Describing Event Handlers

The nice thing about this section is that there's not a lot of brain stretching needed. Events in react are for the most part handled similarly to regular JS events.

Mainly we should consider the syntactic sugar used to describe our React events. The main thing to remember is that they're camelCased.

Regular JS event
- <button onclick="rainDownMoney()">
React Event Handler
- <button onClick={this.raindDownMoney}>

Synthetic Events

"Your event handlers will be passed instances of SyntheticEvent, a cross-browser wrapper around the browser’s native event. It has the same interface as the browser’s native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers" - React Docs

Event Pooling

Key Note: you can't access Synthetic events in an async fashion
- due to Event Pooling
- this means that your SyntheticEvent object is reused in order to improve performance.
- the properties attached to your synthetic event become null after your callback function is triggered.
- event.persist()
- will allow you access to event props in an async way.

Binding JS's THIS in React

In JavaScript, class methods aren't bound to their THIS value. Now, whole days are spent at bootcamps reviewing and drilling down this concept. But let's take a crack at a quick overview.

From MDN on Function.prototype.bind():

The simplest use of bind() is to make a function that, no matter how it is called, is called with a particular this value. A common mistake for new JavaScript programmers is to extract a method from an object, then to later call that function and expect it to use the original object as its this (e.g. by using that method in callback-based code). Without special care, however, the original object is usually lost. Creating a bound function from the function, using the original object, neatly solves this problem:

The above example is from MDN, what we should take away from this is that the global "window" object & scope come into play here.

Our function retrieveX() is being invoked in the global scope, and this deriving it's value for module.getX from this.x = 9 that was defined at the top of the file. Instead of the x inside of our module object.

Solution: retrieveX.bind(module)

Binding this allows us to fix the THIS values to the ones we want.

This is determined by how functions are called during the runtime binding or association of our variables, functions and data. This will always default to the global object, or window in a browser. Which trust me, if you forget to bind, will clearly be seen as an error in the console.

Two ways to bind this

Public Class Fields syntax (experimental)

class LoggingButton extends React.Component {
handleClick.
  // EXPERIMENTAL 
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

Arrow Functions!

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}

Events and the binding of this can lead to most of your bugs when you're starting out with React, and even later down the line if you forget to bind. I've mixed up my arrow functions with my public class field syntax before, so best to pick one and stick to it through your app.

6. ✅ Conditional Rendering ❌

Remember how using components allowed us to have less code cluttering up our files? Conditional rendering, or displaying elements based on the state/props of your app, allows us to write less code and make it more clear.

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;

    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}

ReactDOM.render(
  <LoginControl />,
  document.getElementById('root')
);

Adding expressions to JSX

There are a couple of cool ways to add logic into your JSX

Inline IF with logical && operator
- IF condition true, element after && renders
- IF condition false, ignore

return (
    <div>
      <h1>Hello!</h1>
       // start of condition
      {unreadMessages.length > 0 

          &&

        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
      // end of condition
    </div>
  );

IF-Else ternary(takes 3 operands) operator
- condition ? return if true : return if false

return (
    <div>
    // start of condition
      {
        isLoggedIn ? 
(<LogoutButton onClick={this.handleLogoutClick} />) 
        : 
(<LoginButton onClick={this.handleLoginClick} />)
       }
   // end of condition
    </div>

null
- If you want nothing to occur if your condition is false, you can also always swap in a null primitive value.
- this won't affect lifecycle methods

7. Lists 📝 and Keys 🔑

There's two solid points you should understand about building lists.

Displaying a list of items is usually done with the help of the map() function.
Elements being mapped over need unique keys, but they don't need to be globally unique.

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <ListItem key={number.toString()}
              value={number} />
  );
  return (
    <ul>
      // if we watned to make things look messy
      // we could also directly embed 
      // our functioninside 
      // of the brackets
      {listItems}
    </ul>
  );
}

8. Forms

Controlled Components
- in regurlar HTML forms
- elements like (input, textArea, select) maintain their own state
- the react way
- mutable state kept in state prop, updated by setState()
Issue
- React should be in charge of being our singl source of truth when it comes to data. Above we see that there's two different sets battling it out. Let's combine them with the help of our controlled component.

Handler functions

It doesn't affect the function if you name it something else, but it's common practice to name it by what it does, like handleSubmit(). The component is controlled because we set initial state with our constructor, and alter it with our own onChange event handler, that triggers the function we defined to setState() based on a condition we defined. Thus, we have the control.

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

9. Lifting State Up

This was another area where the learning curve is steep and the trek up the hill is difficult. But eventually things start to add up, especially if you've spent a good amount of time reading over the docs.

Here are the basic steps to follow when dealing with lifting state up from a child component to it's immediate parent.

Define a function in your parent component
pass that to your child component as a function
pass in the changed state from your child component to the prop, which contain's the parent's function, so that data traverses your node tree all the way back up to your one source of truth

10. Composition VS Inheritance 🥊

The react team doesn't say one is better than the other, so to clarify we're not going to say that either. But what is recommended by the team that built react, is to use composition in most cases, and inheritance in rare ones. These are architectural methodologies, relevant to our parent and child components.

INHERITANCE (extending properties from parent class)
- in Object Oriented languages, this is when the child class obtains properties from it's parent class.
COMPOSITION (referencing objects in other class instances)
- describes a class that references objects of another class, as instances.
The Point?
- Code reuse

Let's take a look at some examples from Mosh Hamedani, an awesome React developer and blogger. I highly recommend you take a look at more of his stuff.

//PARENT
export default class Heading extends React.Component {
  render () {
    return (
       <div>
         <h1>{this.props.message}</h1>
       </div>
    )
  }
}
Heading.propTypes = {
  message: PropTypes.string
}
Heading.defaultProps = {
  message: 'Heading One'
}

//CHILD #1
export default class ScreenOne extends React.Component {
  render () {
    return (
     <div>
          <Heading message={'Custom Heading for Screen One'}/>
      </div>
    )
  }
}

// CHILD #2
export default class ScreenTwo extends React.Component {
  render () {
    return (
     <div>
          <Heading message={'Custom Heading for Screen Two'}/>
      </div>
    )
  }
}

What we see here is that we define a parent component, which relies on incoming props to update. This is a customizable value, that can be changed depending on the child that displays it. If the props change, so do the messages that get displayed.

Below is an example of inheritance, without getting too detailed, inheritance extends props from parent components. But things can get complicated and complex.

class CreateUserName extends UserNameForm {
   render() {
      const parent = super.render();
      return (
         <div>
            {parent}
            <button>Create</button>
         </div>
      )
   }
}

Stick with the composition methodology and you should be fine.

Back To Index

Congrats! We made it!

Grrrreat, we reached the end! There are other exciting concepts like Context, more on HigherOrderComponents, and Hooks that I'll be covering in different posts. But that doesn't make them any less important. I hope this post was able to demystify a lot of the bugs you've encountered when working with React.

Rails 6 is out, should I upgrade and start re-learning now?

Kurt Bauer — Fri, 27 Sep 2019 15:26:30 +0000

It was brought to my attention this morning that the new version of Rails was released, currently Rails 6.0: Action Mailbox, Action Text, Multiple DBs, Parallel Testing, Webpacker by default, and Zeitwerk.

I had started a project with rails 5 not so long ago. Should I lose the progress I was making and turn in a different direction?

What's the best practice when a new version of a framework or language is released? How long should I wait before putting in the work to update myself and my projects?

A friend and Rails developer mentioned that it depends, but I'm unsure as to what it depends on. Should I do it if my focus is proving that I'm competent in a technology? Or only if a work project demands it?

My concern is that I'll be focusing on something that isn't a priority or pivotal to many employers. I'm not saying I don't want to learn, but I am saying I don't want to lose time on something that isn't a priority to other developers I'd be working with or under. I'd still build a project with it to learn, just at a slower pace.

I do know that many companies delay upgrading due to dependencies. So what does everyone else think? Getting some feedback would be greatly appreciated, looking forward to any thoughts on the subject.

How long do you wait before learning a new version of a language or framework?

Thanks in advance and sorry if this has been asked here before!

Installing psql(11.5) with hombrew, setting up PgAdmin and Postgres.app

Kurt Bauer — Wed, 18 Sep 2019 19:02:10 +0000

The Gist

I've been going through and cleaning up my system, updating the tools, frameworks and languages that I have installed on my local machine.

While doing this, I realized I had never installed postgresql through the package manager, Homebrew. And since as of this moment, I don't have any critical projects using my local setup, I decided to go through the pain of setting up things right once, so that I don't have to worry about it in the future when wanting to easily update or remove any packages.

The Why

Homebrew is like NPM or Rbvm in the sense that it's a package manager, meant to help you easily update, remove, or add packages.

Homebrew is a free and open-source software package management system that simplifies the installation of software on Apple's macOS operating system and Linux. The name is intended to suggest the idea of building software on the Mac depending on the user's taste. Originally written by Max Howell, the package manager has gained popularity in the Ruby on Rails community and earned praise for its extensibility.[3] Homebrew has been recommended for its ease of use[4] as well as its integration into the command line.[5] Homebrew is a non-profit project member of the Software Freedom Conservancy, and is run entirely by unpaid volunteers.[6] - per wikipedia

The How

First I needed to figure out how to delete my original install that's not through Homebrew.

Let's back things up

NSFPW: not safe for puppy work

 🜲  pg_dump -d informo-backend_development -n public -f informee-backend.sql

Now you have your back up of a singular database.
We can worry about this later on, when we need to import it back.
But for now, we can celebrate that we did one thing right, hurrrray!

Next, uninstalling postgresql from your machine. We should check which version of psql you have installed using the command

psql -I -version

Mine was 10.10 so I then ran the command

open /Library/PostgreSQL/10.10/uninstall-postgresql.app

But I got an error that said I didn't have that installed there.
I took a short cut and used my AppCleaner app that located where all the files where after dragging and dropping my app. Also as a side note, I ended up getting the yearly subscription for CleanMyMac X after diving in to see if there was a better alternative.

Always run brew update before installing and then

brew install postgresql

after which you can run which psql to check the version that was installed.

The Issues Log

Here's areas where I ran into problems

1) Adding the Postgress App

When I downloaded the app after installing the latest psql version through homebrew, I kept getting an error stating Binaries not found.

I thought it was a million things like, I had deleted the wrong core files, installed in the wrong place due to homebrew, etc. I wondered if it was even possible to run the app alongside the homebrew installation r if I was just going got have to default to using the installer like a noob.

After much searching through stackoverflow and the like, I found this
Upgrading from pre 9.5 instructions are not clear #399

Which all grunting aside was pretty great, I realized I had to click the side tab and the create a new server. That was it! Apparently the default server it came with was pointing to the psql -v 10 and I need 11, which creating a brand new server solved.

ahhhh

2) Setting up PgAdmin

The core of the issue was this, after installing, opening a new window and entering my default password, I went ahead and tried adding my server. Thankfully, this stackoverflow post helped me pgAdmin and PostgreSQL: can't connect to server

But everytime I entered my hostname, and the server name, I got a connection refused error.

Okay let's open up the database from the Postgress App we just got working.

Click on a database and a terminal window opens. You're in the matrix.

Now we type

SHOW port;

 port 
------
 my_port_number_here
(1 row)

Cooool. How about the host name?

SHOW listen_addresses;

 listen_addresses 
------------------
 localhost
(1 row)

Oh, I was using my machine name and not the localhost...

Don't mind me, just going around in circles with myself

Once I added the correct info, the database gates opened and I had my db's showing on the page.

Below I've added two other links that would be helpful in getting setup, remove_postgres_on_mac_os.md and "how to start a postgresql server on macos"

Photo by David Clode on Unsplash

Guess That Tech!

Kurt Bauer — Wed, 11 Sep 2019 14:48:43 +0000

The Gist

Recently I've been having the good luck of accepting some code challenges, and have run into what feels like forgetting your dates name.

I've forgotten some of the tech stacks, but do not fear, we have sites other than Stack Overflow to look to for help. Although ultimately we do end up with some cool Stack Overflow graphs at the end of my list.

Basically, if you ever need help trying to understand which of your skills to polish as an interview with a company becomes more of a reality, this small list should lend you some big help.

The Where

1) Built With

Build lists of websites from our database of 35,270+ web technologies and over a quarter of a billion websites showing which sites use shopping carts, analytics, hosting and many more. Filter by location, traffic, vertical and more.

2) Similar Tech

Our proprietary technology scans more than 30 billion web pages per month. We monitor and analyze over 317 million domains to help companies get more data and make better decisions based on technology adoptions. SimilarTech was founded in 2014 as a result of a spin off of SimilarWeb, our unique data partner.

3) What CMS

WhatCMS.org looks at a variety of factors to determine which CMS a website is using. First, we fetch the webpage for the url in question then begin looking for indicators in the html markup and headers. Indicators range from the very obvious <meta name="generator" ...> tag or x-powered-by header to less obvious directory structures, asset files, JavaScript code and more.

4) Rescan

We provide lists of websites using different technologies. We also run a free website analysis tool. We update our lists at 16:00 UTC time (current UTC time: 02:00). You can compare your time zone with UTC here.
For some websites we provide emails along with the lists. We also provide Alexa rank, phones, website IP, web server type, codepage and country (if any).

5) StackOverflow Trends

See how technologies have trended over time based on use of their tags since 2008, when Stack Overflow was founded. Enter up to 15 tags to compare growth and decline.

6) StackOverflow Dev Survey

With nearly 90,000 responses fielded from over 170 countries and dependent territories, our 2019 Annual Developer Survey examines all aspects of the developer experience from career satisfaction and job search to education and opinions on open source software.

And so, we've come full circle

Rails File Structure Overview

Kurt Bauer — Thu, 05 Sep 2019 14:18:55 +0000

The Gist

This is a quick read, more so a reference guide as to what those files in your new rails app are about

If you're like me and just are getting to know RBENV after uninstalling rvm then you'd want to start with:

gem install rails

Then you get a long list of gems that installed successfully

After which you hit your keyboard with the good ol'

rails new cool-project

Once you navigate over to your code editor of choice you would see the following files, let's take a look at what each one does in general.

File Structure

APP
- contains models, views, controllers
- core functions found here
- only place where you can make changes and not have to restart your rails server
- location of Non-Ruby files such as, but not limited to
  - JS, CSS, images, fonts, more assets such as these
BIN
- built in rails tasks. You shouldn't be worrying about this folder way too much
CONFIG
- Settings that control behavior:
- Environment Settings
- modules that initialize when app starts
- app settings
- data base settings
- app routes
- secret key base
DB
- schema.rb file
- this lists:
- database tables
- columns
- column associated data types
- seeds.rb file
- enables you to create data to be used in the app
- can quickly integrate data into the app
LIB
- houses custom rake tasks
- example case: can run in the background, make calls to an external API, and sync returned data in app's db.
LOG
- application logs
- DEBUGGING!
- for a prod env, you'll probably use outside service
PUBLIC
- Custom error pages
- robots.txt
- controls how search engines index the app
SPEC/test (will mostly use RSPEC)
- test suite:
- specs, factories, test helpers, test configuration
TMP
- for temporary files, never really had to deal with this
VENDOR
- mainly used to integrate client-side MVC framworks, such as Angular
GEMFILE
- all of your gems from your project
- outside libraries used in the app
- after changing gemfile, rerun BUNDLE
- calls in code dependencies of application
- (Gems are ruby files that extend functions of app)
GEMFILE.lock
- don't edit!
- dependencies and associated versions
README.rdoc
- for your to document details of app
- instructions for other devs

Hopefully this helps you the next time your trying to remember what folder to look into to fix a bug 🐛

Photo Credit:
Helloquence

Why and How I Replaced RVM with RBENV

Kurt Bauer — Fri, 30 Aug 2019 17:14:00 +0000

The Gist

My morning started out like most people's, as I sat down at my computer while eating a bacon-egg-and-cheese on an everything bagel. And then, like everyone's morning it quickly made a hard right turn in a different direction.

On the lookout for an fun open-source project to contribute to, I found myself on the Dev.to github repo. When looking into their documentation, I find that they're using something called..."Rbenv". Huh?!

Before we shove off port and start sailing towards gem covered seas, I do want to let you, my faithful crew, know that this article is going to explain what RVM is, then Rbenv, why either matter, and the process I had to undergo to successfully transition.

I've been watching too much, The Terror. The first seasons was good! The second season, not so much.

The Why

Okay, why are either of these package managers for Ruby relevant?

Well, firstly, here's a quick snippet on package-managers.

"A package manager or package-management system is a collection of software tools that automates the process of installing, upgrading, configuring, and removing computer programs for a computer's operating system in a consistent manner."

Option #1 -> RVM (ruby version manager)

RVM was mainly authored by Wayne Eseguin, and you can still find him on twitter maintaining RVM, along with other projects. Work on RVM first began in February, 2012.

RVM had a quick installation process, and one that didn't require a lot of spelunking into your files. It's great for those starting out, simple projects and all.

This isn't about one being better than the other, like any tech it's about weighing the pros and cons, aligning those with what it is that you're trying to achieve, and choosing what you want to use. Competing technologies can often co-exist and drive each other to improve in order to gain more users. RVM is great for what it is, but once you find yourself in larger companies you may start asking questions and looking into what's most efficient for your own work process.

Much of the gripe with RVM has to do with the weight of it's installation process.

Here's an extensive explanation, clarifying misinformation and filling in some gaps in what's said about RVM's 'cd' function.

A quick summary of the issue would be that, RVM creates a new function that hacks into the cd command to easily provide you with it's feature of switching Ruby versions automatically.

Who loves Hacker News? Well, here's a wonderful thread after Rbenv's first release, where it seems the whole of the Ruby community finally felt it had a safe space to let out years of pent up frustrations in one cathartic thread.

Here's the HackerNews post, titled:"Rbenv, an unobtrusive rvm replacement"

Here are some highlights from the thread

"With all due respect, ruby is a language, and rvm is a collection of really fragile and dangerous shell script hacks."

And another

"RVM is hardly development ready, imho. Every week I run into problems/confusion with the environment it creates and expects.
I would never put it anywhere near production."

And one last one

"The complete lack of a changelog doesn't help either. I never know whether something's going to break in a new release and almost every new release has some little semantic change that borks my system."

Now, for good posture I'll include some of the comments that were in support of RVM, that also highlight the reason why I would believe that most coding boot camps have added it into their curriculum.

Uno

I'll take your word for it. For me, it mostly saves me a bunch of time. Edit: Just in case I'm coming off as snarky here, I don't mean to. My projects tend to be on the simpler end, and rvm saves me a lot of time. I'm sure it's a little cowboyish for bigger projects - I was just wondering if there was something about rvm that made it universally inappropriate for production use. Double Edit: "a bunch" is probably an overstatement. rvm was a great help transitioning to 1.9.2. I'm not sure if it will provide much utility going forward.

...Dos

This is kind of a classic "fast, correct - choose one" debate. If saving time is more important, perhaps you should use RVM in production, if correctness is more important, you probably shouldn't. It comes down to how expensive your mistakes are.

...Tres

If you only have one server and can script most of the install process it's not a problem. When you have more than one server, rvm is not going to save you time.

If you haven't seen 'Spin City', get to it!

Option #2 -> RBENV(ruby environment)

RBENV was authored by Sam Stephenson, who can be found on twitter. He's currently working at Basecamp. Work on RBENV first began in August, 2012.

A major pull of rbenv's it that it's lighter. And by that we mean that it doesn't have to throw as many hooks into your computer system.

Here's some of the highlights from their own github repo where the development team goes into comparing the two technologies and how they compare.

rbenv does…

Provide support for specifying application-specific Ruby versions.
Let you change the global Ruby version on a per-user basis.
Allow you to override the Ruby version with an environment variable.

In contrast with RVM, rbenv does not…

Need to be loaded into your shell. Instead, rbenv's shim approach works by adding a directory to your $PATH.
Override shell commands like cd or require prompt hacks. That's dangerous and error-prone.
Have a configuration file. There's nothing to configure except which version of Ruby you want to use.
Install Ruby. You can build and install Ruby yourself, or use ruby-build to automate the process.
Manage gemsets. Bundler is a better way to manage application dependencies. If you have projects that are not yet using Bundler you can install the rbenv-gemset plugin.
Require changes to Ruby libraries for compatibility. The simplicity of rbenv means as long as it's in your $PATH, nothing else needs to know about it.

thanks rbenv!

Personally, at this point of doing my research I was pretty convinced that it was time to take an hour at most out of my day to clean RVM out of my system and run through RBENV's installation process.

But for the sake of education, I'll some info on the technicality behind how RBENV works.

1) you run a command, be it Ruby or Rake
2) your computer will then run through directories, looking for that particular executable.

/usr/local/bin:/usr/bin:/bin

3) There's an environment called PATH
4) this contains a list of directories that looks like the code above
5) Every directory is separated by a color, ':'
6) this process will occur left to right, have the object on the left take priority over whatever is left over to the right

In walk the SHIMS

no,no, no, not The Sims. The SHIMS!

1) rbenv inserts "shims" at the front of your PATH

~/.rbenv/shims:/usr/local/bin:/usr/bin:/bin

2) rbenv uses rehashing to maintain your commands in that directory
3) it them matches ruby commands across your system
4) these commands can range from irb, gem, rake, rails, to of course, ruby

The Where

The first thing you should worry about before swapping out one technology for another should be the packages that you've installed so far within that manager.

If you, like me, already had RVM installed cause that's the direction your boot camp took you in and you didn't want to stir the pot on day two of a daunting 3 months ahead...

Type into your terminal (hopefully BASH):

gem list --local

Then you'd get a list of gems that were installed on your local system:

*** LOCAL GEMS ***

actioncable (5.2.1, 5.0.7)
actionmailer (5.2.1, 5.0.7)
actionpack (5.2.1, 5.0.7)
actionview (5.2.1, 5.0.7)
active_model_serializers (0.10.7)
activejob (5.2.1, 5.0.7)
activemodel (5.2.1, 5.2.0, 5.0.7)
...
ETC!

Then, you'd want to copy this and paste it somewhere for you to reference later on. I don't know if there's a simpler way to export and import your gems into a new package manage like Rbenv, but I don't know it and it's already 11am! No time!

The next step would be choosing between two of the following RVM commands to remove the manager

1) rvm implode

2) gem uninstall rvm

Additionally, if you created special script calls check these places

~/.bashrc
~/.bash_profile
~/.profile
~/.zshrc
~/.zlogin

Personally, I just open my VScode environment, from my main directory. ['. code' in the terminal]

The How

Alright! So I went ahead and used 'rvm implode' in my terminal, honestly due to just wanting it all gone in one go and reading this was the first command I should try.

I soon as I ran it though, I saw this:

my-local-machine-location.../.rvm/rubies/ruby-2.5.1/lib/ruby/gems/2.5.0/gems/compass-core-1.0.3/stylesheets: Permission denied

And so, these lines keep printing out, each ending with 'permission denied'.

After contol C-ing it I then got...

Failed to completely remove /Users/kurt/.rvm -- You will have to do so manually.

Fine. The hard way then.

Seems like when I first ran through the installation process I did it incorrectly, or at some point I moved the files.

And yes, you can also try running "rvm implode --force" flag. And before anyone start having a panic attack about forcing anything, it didn't work either.

Back to StackOverflow...

Eureka!
How Can I Remove RVM ruby version manager from my system?

And so I implemented the command that was most voted, and actually originally from RVM's own troubleshooting page.

How do I completely clean out all traces of RVM from my system, including for system wide installs?

Okay, below is the line I entered

/usr/bin/sudo rm -rf $HOME/.rvm $HOME/.rvmrc /etc/rvmrc /etc/profile.d/rvm.sh /usr/local/rvm /usr/local/bin/rvm

AND

/usr/bin/sudo /usr/sbin/groupdel rvm

AND

/bin/echo

AND

rm -rf /usr/local/rvm

When I ran my next calls, I got that no such file or directory exists.

sudo rm /etc/profile.d/rvm.h
sudo rm /etc/rvmrc
sudo rm ~/.rvmrc

I ran through some other removal commands to make sure that nothing remained, getting a response that RVM did not exist after each.

I then went into my local files, found refrences to RVM and commented them out for now.

~/.bashrc
~/.bash_profile
~/.profile
~/.zshrc
~/.zlogin

Once I start using RBENV and make sure nothing is badly broken, I'll go back and actually delete the lines. But what I've learned from experience is never get rid of something unless you've tested and made suer you don't need it anymore. Thus why I have around 50 tabs opne...

run the following command to check all of your hidden files

ls -a ~

I know I know, I'm tired too

Now time to install RBENV (:

This actually didn't take as long as expected.

Gotchas to remember:

have Homebrew installed! This post is already mad long, so you can click the link and run through that.
always restart your terminal after pasting in commands into your bash files. Even if you think you don't need it, just good to give it a clean start.

Helpful Links that also do a setup walk throughs:

1) update homebrew

brew update

2) then install rbenv through homebrew

brew install rbenv

3) This part was a bit weird cause I thought it wasn't working. Go to your .bash_profile/.bashrc files and add in

export PATH="$HOME/.rbenv/bin:$PATH"
eval "$(rbenv init -)"

If you're using ZSH, then just paste eval "$(rbenv init -)" into your .zshrc file

4) okay, here's where I borked myself. 'rbenv init' is only to print out instructions on how to integrate shell commands. Which is what we did in step 3. So when you read that, run it, and just get the same instructions, don't freak out.

5) run this to check that everything installed properly

curl -fsSL https://github.com/rbenv/rbenv-installer/raw/master/bin/rbenv-doctor | bash

And you should see something like

Checking for `rbenv' in PATH: /usr/local/bin/rbenv
Checking for rbenv shims in PATH: OK
Checking `rbenv install' support: /usr/local/bin/rbenv-install (ruby-build 20190828)
Counting installed Ruby versions: 1 versions
Checking RubyGems settings: OK
Auditing installed plugins: OK

YAY!

Okay now, let's see the ruby list

rbenv install -l

Annnnd let's install the latest. Make sure to check the latest version of Ruby on their site.

Then simply add in the default one you'd like to be available globally.

rbenv install 2.6.4

above ruby version as of August 2019

Also, you're probably going to want to install the bundler to bundle and install gems

gem install bundler

We did it!!!

Ah yes, I can feel the joy

TLDR;

I went through the what RVM and RBVENV were and looked at their pros and cons. It all boiled down to speed of getting things working versus quality. After which the second have of this post was dedicated to my own removal/installation steps. Hopefully this helps some people out there, I know it would have come in handy when I set out to do this. If it doesn't, there's always the internets and stackoverflow!

Credits:
unsplash: Charles 🇵🇭

Functional VS Object-Oriented Programming

Kurt Bauer — Mon, 26 Aug 2019 19:41:28 +0000

The Gist

Different programming languages have different features, or paradigms, that can be used to classify them.

Today we'll take a look at two of the most talked about, functional and object-oriented.

Edit #1: And as Adam pointed out, the two are not pitted against each other, they're just different! These are only two of a wide array of varying approaches that could all server(typos are the best puns) you better, so never stop doing your research!

The What

Firstly, let's take a look at some of the commonalities

Things either approach will have to deal with
- Data
  - what your program wants to KNOW and USE
- Behavior
  - what your program is looking to DO and HOW

There's a reason why most coding boot camps start you off with ruby, or python, and that's because they're both very eye-friendly languages. Let's use Ruby for our walk through!

Object-Oriented Programming(OOP)

Classes often used to generate object instances
Class defines the attributes with which we want to imbue our object.
We will give our class "instance methods", which will exist within our object.
These instance methods can be called on the object itself.
"initialize", is not an instance method, but instead tells the class what attributes it will have at the moment of it's creation.
Every new instance of our object will contain preset data and behavior
As noted above, data will be provided to our instance upon creation
We then use methods on our instance object to manipulate it's data
All of the important information our objects contain is stored safely within their classes. If you can imagine being an engineer at a fairly large company, with a lot of pre-written code, you can also see where this would come in handy.
Core Concepts
- Abstraction
- Inheritance
- Polymorphism
- Encapsulation

class Cat
  def initialize(name, mood)
    @name = name
    @mood = mood
  end

  def change_name(name)
    @name=name
  end

  def change_mood(mood)
    @mood = mood
  end
end 

kuma = Cat.new("Kuma", "mischievous")

What happened above?

We created a Cat class, or blue-print, for what we want to be able to do with our Cat instances
We initialized our Cat with a name and mood. If you've ever hung out with cats, you'll know their mood is the second thing you remember about them after their name.

Now let's change their name and mood!

kuma.change_name("Grapefruit")
kuma.name
# "Grapefruit"

kuma.change_mood("post-meal-happy")
kuma.mood
# "post-meal-happy"

What happened above?

Using the change_name() method allowed us to change the name of our Cat class instance object
Using the change_mood() method allowed us to change the mood of our Cat class instance object
Our initialize method will take the name and mood we passed to our Cat object and store that information, so that we can easily access it later on
'@' symbols are used for instance variables, these exist in an object(instance) and is used without being passed in

Functional Programming(FP)

Uses a series of small methods that each do their own specific job.
Implements composition or building of large tasks with smaller ones, which is also used in OOP languages, but it's pivotal to FP ones.
Objects are immutable, can't be changed after being created
Best fit for data science work
A function is reusable
Core Concepts
- Higher Order Functions
- Pure Functions
- Recursion
- Strict & Non-Strict Evaluation
- Type Systems
- Referential Transparency

Here we see small functions in their natural environment

def doesOneThing(number){
 return number * number
end

What happened above?

Above we have an example of a pure function
The same value will always be returned, as long as the same input is given
There is no other operation occurring within the function that could alter our result
An instant benefit is fewer lines of code!
In FP, we will be viewing every thing we do as transforming data by applying some sort of operation on it, and then returning a new data set
We also often times default to using a map method, instead of each, which creates a new copy of the data and stores it in an array. The original array is unscathed as in FP, immutability of our data is key
Immutability allows us to keep track of our data's value

Comparison Table

Topic	FP	OOP
DEFINITION	emphasizes evaluation of functions	based on concept of objects
DATA	immutable	mutable
MODEL	declarative programming	imperative programming
SUPPORT	parallel programming supported	No Support
EXECUTION	statements can be executed in any order	Need an order
ITERATION	Recursion	Loops
BASIC ELEMENTS	Functions & Variables	Objects & Methods
USES	Few things with need for more operations	Many things with few operations

Thanks to EDUCBA!

But which one?

Well, as per this sick stackoverflow post, here are some key concepts to keep in mind when considering these two very popular approaches.

OOP

Helpful when dealing with a fixed set of operations on things
As your code evolves, you add new things
- this means that you add new classes, which make use of existing methods
- existing classes are left alone

Danger Zone

Adding a new operation may require editing many class definitions to add a new method

Helpful when you have a fixed set of things
As your code evolved, you add new operations on things.
- this means you add new functions which compute with existing data types
- existing functions are left alone

Danger Zone

Add a new thing may require editing many function definitions to add a new case

TLDR;

Object-Oriented Programming uses Classes, objects and methods to achieve it's lofty goals. Functional Programming on the other hand makes use of an army of pure functions and variables to to build a larger whole. Languages dedicated to on or the other each come with their own gotchas (looking at you JavaScript 😭). Make sure to research the communities supporting whatever language or framework you're looking at, and you'll be steered in the somewhat right direction. That is, until you hit a huge bug and try to turn in the other direction...this is ill advised but not impossible. Still though, like adding Redux to your React app, why would you give yourself that extra work? Plan, plan, plannnn!

Putting Asynchronous Code in a Headlock

Kurt Bauer — Mon, 26 Aug 2019 16:07:20 +0000

If only we were all as enlightened as Homie

The Gist

In my last post, I lightly went over what asynchronous functions were and how they related to AJAX, which makes use of it in the synchronous JavaScript universe.

Here I'll take some time to go more in depth into async VS sync, and different patterns that are applied in order to achieve asynchronicity.

The Why

It's useful information when attempting to access databases or APIs

The What

Synchronous Example

// An example of an index.js file, running Node, would see this in the terminal
 
console.log('This is synchronous code, or blocking')
console.log('waiting for the first to complete before running')

Asynchronous Example

// An example of an index.js file, running Node, would see this in the terminal
 
console.log('This is synchronous code, or blocking')

setTimeOut(()=> console.log('Waiting to run, not causing a blockage'), 2000)

console.log('waiting for the first to complete before running')

The setTimeOut() function, would be an example of a function that is considered "non-blocking".

The code presented above
- in the async example, the second setTimeOut() call will only run 2 seconds after.
- The first and last calls would show up in your terminal, and after the allotted time, the middle function.

What Have we learned so far?

Synchronous Code (blocking)
- BLOCKING - finishes work only after it completes
- Needs 2 or more threads or will cause program to crash/freeze
- Would see this occur when making calls to a database/api at an external url for example
- The single thread is focused on completing the first task in the call-stack that it finds, and will put the rest of the tasks in the code on hold until it finishes getting back the requested information to you
Asynchronous Code (non-blocking)
- NON-BLOCKING: returns immediately, later on relays back finished work
- Only is dependent upon at least 1 thread, and your program will still be functioning safely
- Accessing something as large as an API can result in slow retrieval of the needed data.
- Your program is can freely run it's other tasks, and on the event loop, it will return to provide the needed info
- All in all, async stays out of your way, while a sync call will require all your program's attention.

The How

Now that we have the terminology level covered, we can start making our way towards the common patterns or approaches that engineers use when dealing with making async calls in their code.

What we have to keep in mind is that our functions will be attempting to return information as soon as you call them, but if we're reaching outwards and depending on an external source to respond...well we can never be sure of the time we'll be waiting. If we try to return information that we don't have, our program will show us one of those nasty undefined calls. So, what are some steps that we can take to resolve this?

1) Callbacks

a CALLBACK function is called, when the result of an async operation is ready.
in JS, a function is an object
also in JS, functions can take other functions as arguments, and can be returned by other functions
THIS IS WHY THEY'RE CALLED HIGHER ORDER FUNCTIONS

"Functions that operate on other functions, either by taking them as arguments or by returning them, are called higher-order functions."

Great link to Eloquent JavaScript reading on HOFs

For callbacks, we usually pass a second param to our fist function, which will reference a nested function within our first function.



console.log('This is synchronous code, or blocking');

findSong(1, (song) => {
  console.log('OUR SONG', song);
});

console.log('waiting for the first to complete before running')

function findSong(id, callback) {
   //Simulating a code delay below

    setTimeout(() => {
      console.log('Searching for your song...');
      callback({ id: id, song: 'only 4 u' });
    }, 2000);

}

The Downside?

The problem, if not seen from my brief explanation above, is that there's a slipper slope in which you all of sudden find yourself inside...CALL BACK HELL.

Callback Hell explanation...
- as you could see from my entangled explanation above, building out ever more complex callbacks can lead you into... well.. hell. It becomes ever more complicated not only to explain your code easily to other engineers, and in turn, also becomes harder for you to understand what it was that your code was doing in the first place.
- If you do happen do find yourself in this forsaken place, do remember that using helper functions, or Name Functions, is helpful when trying to read through the code. When you integrate them into your nested callback mess, remember that it won't be called but you'll simply be passing a reference to the function that is located somewhere else in your file.

So, let's keep moving on till we find a solution that's at least more manageable.

2) Promises

What are those?
- The technical definition is that a promise, "holds the eventual result of an async operation"
- when an async operation completes, it will either error out or produce the value that you were trying to work with.
- Here, you are being "promised", that you will get the result of an async operation.

A 'Promise Object' can come in 3 essential states
- Pending State
  - kicks off async operation
- Fulfilled State (resolved)
  - this means that the async operation completed successfully.
- Rejected State (failed)
  - something went wrong while we were trying to execute our operation

Below is an example of a promise instance. It takes a function with two params, resolve and reject.

//somewhere in the code will want to consume this promise object, which will eventually hold our data that is promised to us in this async operation.
const firstPromise = new Promise((resolve, reject) => {
})

Resolve and reject are both functions
- used to send result of async operation to consumer of this promise.
- when passing a message inside of the reject function, it's best practice to pass an error object
```
reject(new Error('You've been rejected!'))
```

.catch / .then methods
- .then
- good for continuing to do more work with your data that's been returned.
```
.then(result => console.log(result))
```
- .catch
- important to use to grab any errors that may occur
- when you create Error instances, they have message properties you can use to view the warning that you may have included for yourself.
```
.catch(err => console.log('You hit an error!',err.message))
```

The key take away from the above explanation, is that anywhere you find a callback, in most cases, you should modify that function to return a promise.

Consuming Prompises

Promises are the consumed by chaining .then methods and traversing nested data until we get to the core of the information we were trying to obtain. We can create promise functions that each do one task, and are more easy to alter and read.

Settled Promises

If working with unit testing, you can easily work with a promise that is resolved by using a promise method.

const completed = Promise.resolve()
completed.then(result => console.log(result))

You can also test with errors

const failed = Promise.reject(new Error('your reason'))
// it is best practice to console log only the message property, instead of the entire error object
failed.catch(error => console.log(error.message))

Running them in parallel

 const promiseOne = new Promise((resolve) => {
 
  setTimeOut(()=>{
   console.log('completed!')
   resolve(1)
}, 2000)

})

 const promiseTwo = new Promise((resolve) => {
 
  setTimeOut(()=>{
   console.log('completed!')
   resolve(1)
}, 2000)

})

//all method will return a new promise once all promises in this array are resolved
Promise.all([promiseOne, promiseTwo]).then(result => console.log(result))

Promise.all
- still only a single thread kicking off multiple operations
- result will be available as an array
- What if one of these promises fails?
- if any of our promises are rejected, our result will be failed, even if there are promises which were fulfilled
Promise.race
- used if you want don't want to wait for all promises to complete
- result will not be an array, but value of first fulfilled promise

3) Async and Await

async function doSomethingCool(){

const artist = await findArtist(1)  //await keyword released thread to do other work
const album = await findAlbums(artist.albumName)
const song = await findSong(album[0])

console.log(song)
}

doSomethingCool() 
// returns a promise that once fulfilled doesn't result in a value.

Async and Await
- built on top of promises
- syntactical sugar
- our code may look synchronous, but will look something like chained promises, using .then()

findArtist(1)
.then(artist => getAlbums(albums.artistName))
.then(album => findSong(album[0]))
.then(songs => console.log('songs', songs))
.catch(err => console.log('Error', err.message))

Try-Catch Block

In order to catch our error, would have to wrap our code

async function doSomethingCool(){

try {

const artist = await findArtist(1)  //await keyword released thread to do other work
const album = await findAlbums(artist.albumName)
const song = await findSong(album[0])

console.log(song)
} catch (err) {
  console.log('Error'), err.message
}


}

doSomethingCool()

TLDR;

Using promises, or async/await to be more abstract, allows our code to keep moving forward and frees up our single thread to take on other tasks. Then once our promise has been resolved, we can use that information with a .then() method to traverse the data or a .catch() method to take a look at how we can approach our bug with a steady head on our shoulders. And although callback/higher-order functions have their benefits, it's best to avoid plummeting into 'callback hell'. Good luck!