DEV Community: Brad Beggs

Interesting CSS Practices - Interesting Ideas from The Top 6 Search Results

Brad Beggs — Fri, 19 Mar 2021 00:30:39 +0000

Google CSS Best Practices and you get plenty of useful but duplicated ideas.

But, among the non-duplicated are a few ideas that might need sharing:

Organize Stylesheets Using a Header to Footer Structure

Or said differently, if certain styles exist only at certain points in the page, sort your CSS in a hierarchical manner. This lets you and your team quickly sense where the related CSS is (though yes, you can CTRL-F to find the CSS style name)

Generic classes (body, a, p, h1, etc.)
#header
#nav-menu
#main-content
#aside
#footer

Create the HTML Structure First, CSS Second

HTML is about the structure for you, the browser, search engines, and screen readers. Build the structure first using modern semantic elements (e.g. <form>, <table>, <article>, and then add styling.

Text-transform to Style Text Properties into a “Standard” across your site

If your data has inconsistent capitalization, use text-transform to push the content where you need it.

Great for titles, headlines, names, which requires capitalization of each word.

text-transform: capitalize;```





```javascript
text-transform: lowercase;

for that art house modern look.

Design Mobile One Column First

It is easier to expand the content to fit more space than to figure out how to take that same content and make it one column.

Use @media (min-width: 768px) to go mobile-first. So in this example, one the browser is 768px or larger, it switches to the (persumed) desktop version)

Use (or don’t use) The SRP - Single Responsibility Principle

Borrowing from PROTOTYP here on Dev, pay attention if your styles take on multiple chores. Breaking out responsibility allows the style to extend and combine easily with other styles.

But! There is a good case for not following SRP.

// Do This:
/* Shared styles */
.button {
  padding: 1rem 2rem;
  font-weight: bold;
  color: #fff;
}

/* Style extensions */
.button--radialBorder {
  border-radius: 0.2rem;
}

.button--large {
  font-size: 2rem;
}

.button--primary{
  background-color: #eb4934;
}

.button--secondary {
  background-color: #888;
}


// Don’t Do This
.button {
  padding: 1rem 2rem;
  font-size: 2rem;
  border-radius: 0.2rem;
  background-color: #eb4934;
  color: #fff;
  font-weight: bold;
}

.button--secondary {
  border-radius: 0;
  font-size: 1rem;
  background-color: #888;
}

Use BEM Framework

BEM = Block, Element, Modifier is a pattern for writing your styles and giving them names.

In fact, the above CSS is written following BEM.

From MDN:

In BEM a block is a stand-alone entity such as a button, menu, or logo. An element is something like a list item or a title that is tied to the block it is in. A modifier is a flag on a block or element that changes the styling or behavior. You will be able to recognize code that uses BEM due to the extensive use of dashes and underscores in the CSS classes.

Keep Outline Highlights

Some fellow humans need to use the keyboard and some just like using the keyboard. The box outline lets us keyboard users know which element we are focused on.

// Bad Don’t Do This
:focus {
    outline: none;
}

Let the outline do its job:

References

30 CSS Best Practices
HTML Semantic Elements
8 SCSS Best Practices To Keep in Mind
PROTOTYP
BEM
Organize Your CSS - MDN
10 Best Practices for Quickly Improving Your CSS

Testing Terms, Frameworks, Explained Like a 5th Grader

Brad Beggs — Fri, 12 Mar 2021 15:54:59 +0000

What are Some Popular(ish) Test Tools for Javascript Development?

Mocha - a testing framework (but doesn’t do assertion).

Chai - an assertion library (used alongside Mocha) to compare output of a unit test to an expected value. To assert: a confident statement of fact.

Sinon.js - allows simulation of real objects, functions, state, networks calls, database queries, etc in an isolated environment (so you can’t break anything and can pinpoint issues). Make spies, stubs, and mocks.

Fetch-Mock - mock up/create fake http requests via fetch

Node-Fetch - lets you fetch from node.js using similar syntax as window.fetch (aka the "normal" fetch used in a browser).

Selenium - automate browser actions/behaviors.

Types of Testing

Behavior-Driven Development (BDD) - code written in an executable style that is understood by the team, the clients, other stakeholders and focuses on ensuring the product (not the code, per se) does what is expected . BDD extends the idea of Test-Driven Development.

Test-Driven Development (TDD) - code written for developers (by developers or test-developers) to test code functionality.

Unit/Component Testing - testing one small element of the software. This is considered the base level of testing since the element in consideration can’t be functionally smaller.

Integration Testing - unlike unit, integration testing takes various elements and tests how they work together.

Regression Testing - check changes or additions to the code don’t break previously working code. If previously working code did break, it moved backward (i.e. regressed) to a less developed state.

Interesting Non-obvious Testing Terms Defined

Mocks/Mocking - making a fake version of a function, database, or some service to stand in place of the real thing. Allows you to add, delete, change, recreate without concern for ruining a real thing. In the Theater world, this is your dress rehearsal.

Stubs - related to mocking, but not quite the same. A stub stands in for a lower-level code module/component/function since the code module isn’t finished. When you call a stub it gives the same output as the code will, once finished. Stubs provide a predetermined response. In carpentry and plumbing, stubbing refers to placing most of the pipe but it isn’t ready for use.

Spies - like their real-world counterpart, a spy records information, such as arguments, the return value, exceptions thrown.

Doubles/Test Doubles - a generic term for any fake/pretend thing used in place of the real. Comes from the idea of a stunt double in movies.

References & Recommended Further Reading

Mocks Aren’t Stubs
TDD vs BDD
Differences Between Unit & Integration Testing
Different Types of Testing Explained
The Testing Intro I Wish I Had

JS Function Hoisting Concisely Explained

Brad Beggs — Sat, 06 Mar 2021 23:40:07 +0000

Terms to Know

Execution Context (which is different from scope, btw) - an abstract concept where the code runs. First by parsing the code line by line and second, storing variables and the functions into memory. Two of the three contexts are global and local execution contexts. For good reads on execution context, check out the two articles in the reference section below.

Declaration (of a variable or function) - Example of variable declaration are let a, const result, while a function declaration is function calcSquareFootage(x,y){ // code}. Declaration brings a thing into existence. Note that afunction expression` is hoisted differently and explained below.

Initializing (variables only) - a=1.567 or declare and initialize together: ‘const result = 234.53. You can initialize in JS variables without declaring them using let, const, or the ghastly var`. But doing so will cause a bug as the undeclared but initialized variable is now a globally accessed variable. Initializing is often called an assignment.

Hoisting - is a concept and not an actual process. All declarations (variable and function) are first placed into memory during the compile phase while initializing/assignment happens later.

Hoisting Functions

You can try these in your browser console. To clear the variables declarations and assignment, hard refresh this page.

Rule of thumb - declare named functions, function expressions, anonymous functions, or arrow functions before you invoke them.

addThreeNumbers(1, 10, 4564)  // successfully returns 4575 even if invoked before the function declaration 

// function declaration
function addThreeNumbers(x, y, z){
return (x + y + z)
}


multiplyThreeNumbers (1, 10, 4564) // Uncaught ReferenceError: multiplyThreeNumbers is not defined. 

// function expression is hoisted but assigned an `undefined` value rather then the function code
let multiplyThreeNumbers = function(x, y, z){
return (x * y * z)
} 


add(1, 10)  // Uncaught ReferenceError: Cannot access 'add' before initialization

//arrow function initialization is hoisted the same as a function expression, thus `add` is assigned undefined in this cause using ‘let add`  
let add = (x, y) => {return(x+y)}

Order of Precedence in Hoisting is a Thing

What happens if you declare a function and a variable with the same name?

let name = “Brad”

// notice function has same name as variable above
function name(firstName){  
return (`hi  ${firstName}`)
}

console.log(typeof name) // output is string

Variable assignments before a function declarations
But, function declarations before variable declarations

Rule of Thumb - don’t use the same name for a variable and a function

References

Understanding Execution Context and Execution Stack in Javascript
Understanding JavaScript Execution Context and How It Relates to Scope and the this Context
Hoisting Functions & Function Expressions

Writing Thunks Workflow

Brad Beggs — Sat, 27 Feb 2021 19:44:28 +0000

Pre-req:
Install thunks

Get organized - Create a thunks.js or a folder ./thunks/ and the appropriate file names to group the related thunks.
Import action-creators from the appropriate file(s) into your thunk file.
Write your thunk(s).
Create a new reducer or update other reducers as appropriate and import any needed actions.
4.1. If creating a new reducer, import it to store.js and add the reducer to your reducers object.
In the component needing the thunk, import the thunk, add it to the appropriate props, mapState, and mapProps, and place the thunk function were needed in the component.

Resources & References

Redux-Thunk Official
What Are Thunks? <-the best article on Thunks and how they work

A Useful Flow to Using Redux

Brad Beggs — Sat, 20 Feb 2021 01:36:29 +0000

Assumptions:

you've installed Redux and have the store.js file setup
you want a suggestion as to a ‘logical’ flow for when to write actions, reducers, component integration
Note: You don’t need to do any of these steps in order but you do need to do each step. Try this method and make up your own method as you go forward.*

Step 1 - Create Stateless Components and the GUI

Start with hard-coded data for the time being.

I’ve found making components this way forces me to think more about their relationships, what the state looks like, and what components could get reused.

Step 2 - Add Boilerplate

In the component(s) needing state or props, add the redux boiler plate code and don't worry if they're empty now:

// SomeCoolComponent.js file 
import {connect} from 'react-redux'   // every component using mapState or mapDispatch needs this

const SomeCoolComponent = ( { destructuredPropsHere} ) = {


    // component code…...

  }

// add the 3 boiler plate lines below at end of file 
const mapStateToProps = state => ({    } )
const mapDispatchToProps = dispatch => ( {   })

export default connect(mapStateToProps, mapDispatchToProps)(TheParentComponentNameHere);

Step 3 - Create a Redux Folder Structure

Add ./src/redux/ folder to group your store.js, reducers.js, and actions.js together. This makes it easier to find items and keep focused.
If you have a lot of actions or reducers, create a sub-folder and divide the actions and reducers into related files. For example, fetchActions.js, addToCartActions.js, or a loginReducer.js.

Step 4 - Create Your Action(s) and Actions Creator(s)

For example:

// actions
export const ISCOMPLETED_TODO = "ISCOMPLETED_TODO"  
export const ADDSINGLEITEM = "ADD_SINGLE_ITEM_TO_STATE"

// action creators
export const setSingleItem = (item) => ({
  type: ADDSINGLEITEM,
  payload: item
})

export const markToDoAsComplete = (text) => ({      
  type: ISCOMPLETED_TODO,   
  payload: {text}
})

While very optional, action creators let you easily reuse the object they create. If it seems redundant, it is, on a small scale; but in a larger code base, just type in the action creator name and you get the object.

Step 5 - Create or Update Reducer(s) with Action(s)

Import your ‘actions’ if you are using them (‘actions’ differ from ‘action creators’ )
Create your a switch statement or update a switch with a new case statement
Every case needs a return with the new state *Remember to include a default: return state for your switch

For example:

import {
  CREATE_TODO,
  REMOVE_TODO,
  ISCOMPLETED_TODO,
} from "./actions";

export const toDos = (state = [], action) => {
  const { 
    type, 
    payload, 
  } = action;

  switch (type) {
    // other cases removed for space

    case ISCOMPLETED_TODO: {
      const { text } = payload

      return state.map(toDo => {
        if (toDo.text === text) {
          return {...toDo, isCompleted: true}
        }

        return toDo
      })
    }

    default:
      return state;
  }
};

Step 5 - Back in Your Component - Import & Props

Import the appropriate action creator(s)
Add the appropriate props as destructured arguments
Add the state data into mapStateToProps in object form
Add the action creator to mapDispatchToProps in object shorthand form <-recommended method by Redux
Add the state and the callback function into the appropriate spot.

// ToDoList.js for a to do tracking app
// other imports omitted for clarity 
import { connect } from 'react-redux'
import {
  removeToDo,
  markToDoAsComplete,
} from './redux/actions' // action creators, used in mapDispatch

const ToDoList = ({
  toDos = [],   
  onRemovePressed, 
  markComplete
}) => {

  return (
    <div className="list-wrapper">
    // ...some code here 

      {toDos.map((toDo, i) => {
        return (
        <ToDoListItem 
          toDo={toDo}
          key={i}
          onRemovePressed={ onRemovePressed }   // callback function
          markComplete={ markComplete }         // callback function    
        />
        )}
      )}
    </div>
  );
}


const mapStateToProps = state => ({
  toDos: state.toDos,
})

const mapDispatchToProps = dispatch => (
  {
    onRemovePressed: text => dispatch(removeToDo(text)),
    markComplete: text => dispatch(markToDoAsComplete(text))
  }
)

export default connect(mapStateToProps, mapDispatchToProps)(ToDoList);

Now Finished

At this point, you should have everything correctly wired for your casual react app. While a few tutorials (see the to-do code above) help, my understanding improved when I used it for my own project app (outdoor adventure rentals).

Also, if you haven’t installed the React Developer Chrome extension (link below), install it. It gives a nice visual of your store.

Just The Steps

Step 1 - Create Stateless Components
Step 2 - Add Boilerplate
Step 3 - Create a Redux Folder Structure
Step 4 - Create Your Action(s) and Actions Creator(s)
Step 5 - Back in Your Component - Import & Props

References & Resources

A Deeper Redux CheatSheet - Less Flow, More How

Official React-Redux Tutorial

React Developer Chrome Extension

A Few Interesting Bits About package-lock.json. #yesReally

Brad Beggs — Fri, 12 Feb 2021 07:41:20 +0000

package-lock.json seems like a really, really dull file. And ideally, it is.

It is like the keys on your keyboard which you don't notice until they get crunchy (looking at you butterfly and silicon-based keyboards).

But do enough package installs and you'll run into issues. This article is a high-level overview of the what and the why of package.json and package-lock.json so you can debug with understanding.

The purpose of the package-lock.json is to let every developer on a repo have the same package tree, meaning each developer has the exact same packages and all dependencies versions as you, even if there are new packages available.

Why Should You Care?

Depending on how the package.json is written, an npm install command could install a more recent patch, a minor update, or the exact same package. If the packages and their dependencies are different, it might not cause an issue….or it might.

The package-lock.json is used by NPM when you npm install and the lock file is set in digital stone; whereas, package.json just indicates major package dependencies, how to handle updates and is meant to be changed by a developer.

Think of package.json as what you want to install and the lock file as what exactly and precisely was installed.

How Package.json Controls Updates via SemVer

A key part of package version control is with SemVer specs. aka Semantic Versioning. aka v.~0.0.0 or ^a.b.c

a is the major version, breaking backward compatibility.
b is new features but doesn’t change current features
c is a bug fix

So why do you care? If you run into issues on npm install, likely you have a version issue.

For now, just know this (the relationship is explained in the next section):

The characters ~, ^, or lack of, dictate how and when a repo’s direct dependencies update.

if you write ~0.13.0, you want only update patch releases: 0.13.1 is ok, but 0.14.0 is not.
if you write ^0.13.0, you want to update patch and minor releases: 0.13.1, 0.14.0 and so on.
if you write 0.13.0, that is the exact version that will be used, always
Source: nodejs.dev

Relationship Between `npm install` and the `package` Files.

When you npm install a repo without a package-lock.json, NPM “knows” to install the latest version of the packages within the minor release.

That is, if a semantic version (aka semver) is ^0.13.0 for package X, NPM won’t install version 1.0.0 (assuming a developer follows semver specs), but it might install 0.15.0 as the latest version. And while 0.15.0 should be compatible with 0.13.0 features, it might introduce a bug.

This is where the package-lock.json comes in handy.

When you npm install a repo with a package-lock.json, npm “knows” to install all the packages and versions dictated in the lock file. Since the lock file is committed to source control, everyone will have the same packages and package dependencies. #magic

Tip: If you are doing a tutorial from scratch and run into issues with packages, make sure you can at least use the same package.json and package-lock.json files from their repo.

Interesting Facts to Know about `package-lock.json`

Automatically generated when NPM changes node_modules tree or the package.json file is changed.
It should be committed into your source repo.
It is ignored if found anywhere else other than in top-level folder structure.
Didn’t exist before version NPM v5.
package.json dictates what is in package-lock.json as of PR17508.

Resources && References

NPM Official Doc on Package-lock.json
Node.js Explanation
What is SemVer?
How to Upgrade Major Version in NPM
Why You Should Code on a Mechanical Keyboard

Feedback? Suggestions? Additions?

Did I miss something? Should I add something other devs should know? Drop a comment and I'll update the article with the appropriate information (and citation).

SCSS @content Use Cases & Examples

Brad Beggs — Fri, 05 Feb 2021 21:07:12 +0000

The @content, aka content directive, is “simple” in that it provides a way to reduce repetitive code, allowing for reuse and easier changes throughout the codebase.

But knowing when to use @content in advance is a touch harder. Here are at least 5 common use cases and examples from around the web.

Uses Cases for The Content Directive, aka `@content`

Use @contentfor :

@media queries,
keyframes animation,
buttons,
nested selectors,
notifications

If you have other times you use @content, drop a comment so others can see other uses cases.

Who Is This For?

Newish to using SCSS and would like multiple examples/context for how to use the @content.

1. @media Queries

// from riptutorial

// located in _mixin.scss partial file
@mixin small-screen {
  @media screen and (min-width: 800px;) {
    @content;
  }
}

// located in /modules/_media.scss partial file
@include small-screen {
  .container {
    width: 600px;
  }
}

// above mixin and @media become:
@media screen and (min-width: 800px;) {
   .container {
      width: 600px;
    }
}

2. Keyframes/Animations

// from thoughthot

// located in _mixin.scss partial file
@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }

  @-moz-keyframes #{$name} {
    @content;
  }

  @keyframes #{$name} {
    @content;
  }
}

// located in modules/_keyframes.scss
@include keyframes(fadeIn) {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}

// The above mixin and @contents compiles into styles.css:
@-webkit-keyframes fadeIn {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}

@-moz-keyframes fadeIn {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}

3. Buttons

// from Krasimir.dev

// located in _mixin.scss partial file
@mixin button() {
    display: block;
    font-size: 20px;
    text-decoration: none;
    @content;
}

// located in _interfaces.scss partial file
.alert {
    @include button {
        color: #F00;
    }
}
.cancel {
    @include button {
        border: solid 1px #999;
    }   
}

// The above mixin and @contents compiles into styles.css:
.alert {
    display: block;
    font-size: 20px;
    text-decoration: none;
    color: #F00;
}
.cancel {
    display: block;
    font-size: 20px;
    text-decoration: none;
    border: solid 1px #999;
}

4. Nested Selectors

// from Stackoverflow/piouPiouM

// located in _mixin.scss partial file
@mixin context--alternate-template {
  margin: 0;
  font-size: 14px;
  @content
}

// located in _base.scss partial file
.content-sample {
  @include context--alternate-template {
    .important-thing {
      color: red;
    }
    &.is-italic {
      font-family: 'my-webfont-italic';
    }
  }

// outside mixin call
  background-color: black;
}

// The above mixin and @contents compiles into styles.css:
.content-sample {
  margin: 0;
  font-size: 14px;
  background-color: black;
}
.content-sample .important-thing {
  color: red;
}
.content-sample.is-italic {
  font-family: 'my-webfont-italic';
}

5. Notifications

// from devcamp.com

// located in _mixin.scss partial file
@mixin notification {
  width: 99%;
  height: 35px;
  text-align: center;
  padding-top: 10px;
  font-size: 1.2em;
  font-family: Verdana;
  border-radius: 3px;
  margin: 10px;
  @content;
}

// located in _notifications.scss partial file
.error {
  @include notification {
    background-color: DarkRed;
    color: white;
    border: 1px solid LightSlateGray;
  }
}

.success {
  @include notification {
    background-color: MediumSeaGreen;
    color: MintCream;
    border: 1px solid LightSalmon;
  }
}

References

Official SASS @content Docs
Sass’s @Content Directive - thoughtbot
SASS Content Directive Is A Wonderful Thing
Stackover Flow
Devcamp.com

Easy Way to console.log() w/o console.log()

Brad Beggs — Fri, 29 Jan 2021 01:25:19 +0000

Whether you’re hunting for a bug or writing code, you likely use Javascript’s ‘console.log()’. It works but console has 19 other methods to assist your development and debugging.

Most notably is console.table() when working with objects and arrays, which provides a prettier format for these data types.

console.table() - for arrays, objects, and mixed data types

Output an Array and Array of Arrays

‘console.table’ provides the index on the left and indexed values or just ‘value’ across the top for array or array of arrays.

A 1d array with .table() vs .log():

const namesStartingWithA = ["Alec", "Alexis", "Anastasia", "Andre", "Andrea", "Andrew", "Andrew"]

> console.table(namesStartingWithA)
> 
Index    Value 
0   "Alec"
1   "Alexis"
2   "Anastasia"
3   "Andre"
4   "Andrea"
5   "Andrew"
6   "Andrew"

> console.log(namesStartingWithA)  // same data as above looks like this
> (7) ["Alec", "Alexis", "Anastasia", "Andre", "Andrea", "Andrew", "Andrew"]

A 2d array with .table() vs .log():

const namesStartingWithA = [ ["Alec", "Alexis",], ["Anastasia", "Andre", "Andrea"], "Andrew", "Andrew"]

> console.table(namesStartingWithA)
> 
Index    0           1          2        Value
0   "Alec"       "Alexis"       
1   "Anastasia"  "Andre"    "Andrea"    
2                                       "Andrew"
3                                       "Andrew"

> console.log(namesStartingWithA)
>(4) [Array(2), Array(3), "Andrew", "Andrew"]

Output of Objects and Arrays of Objects

When outputting an array of objects, the keys become headers. If the data has many values or many keys, avoid using ‘console.table()’.

> console.table(namesStartingWithAWithId)
> 
Index   Name            ID
0   "Alec"      8
1   "Alexis"    69
2   "Anastasia" 815
3   "Andre" 68
4   "Andrea"    062
5   "Andrew"    97
6   "Andrew"    772

> console.log(namesStartingWithAWithId)
> (86) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

Show Selected Columns Only

It is possible to select just the column(s) you want to see.

For example: ‘console.table(data, [‘columnName’])’ You do need the brackets and single quote. [‘ ‘].

> console.table(namesStartingWithAWithId, [“id”]) 

> 
Index      ID
0     8
1     69
2     815
3     68
4     062
5     97
6     772

Not Recommended On Complex or Long Data

Because ‘console.table()’ is highly visual, long arrays or complex objects are likely harder to understand in this table format unless you specify the column(s).

Other Useful console.table Tidbits

In Firefox, console.table() displays only 1000 rows.
Click a header column name and the browser sorts the table based on the column data (ASC and DSC).

Reference

MDN console.table

Typescript: Array Types & Usage

Brad Beggs — Sat, 23 Jan 2021 03:10:48 +0000

Assumptions

You know what Typescript is for.
You have it installed.
You can format basic data types (number, string, boolean)

JS arrays are useful containers, holding whatever is asked. But over time one might add the wrong data type into it and get away with it until the bug presents.

Typescript arrays on the other hand are a bit rigid. But this initial rigidity is helpful over time, particularly on a team. The TS array declaration speaks of its intent, unlike the JS version.

Basic Array Type Usage

The basic declaration of an array data type is straight forward:

let arrayName: number[] = [ ]   // initialize arrayName with blank array, holding only floating point numbers 

let animals: string[] = [‘dog’, ‘cat’, ‘mouse’] // initialize animals with a string of names and only strings

If you try to put a string into the array 'arrayName', TypeScript will kindly tell you can't.

But what if you need an array with multiple types?

Multiple Data Types in Array & Nested Array

But if your array requires multiple data types, you can specify which types it should accept using ‘|’ :

let greetingCountDown: string[] | number[] = [1,2,3, ‘hello’];

let date:  (Date | string | number ) = [new Date(), ‘appt’, 1032]; // a 1 dimension array, allowing uses of dates, strings and numbers

let dateTwo:  (Date | string[] | number)[] = [new Date(), 1032, ["brad", "dog", "vote"]];  // a 2 dimensional array with nested array of strings. 'string[]' indicates a subarray in this usecase

Note: the ‘|’ is called the ‘union’ operator in TS.

Handling Unknown Array Data Types

If you’re fetching from an API or using a library, you might not know or have control of the data.

To show the intention of allowing any data type, declare your type as ‘any’:

let result: any = [] // initialize result to allow any and all datatypes

Why not just declare ‘let result = []’ and drop the use of ‘: any’? Declaring type communicates intent to other developers and your IDE.

Array of Objects in TypeScript

There are two ways to declare an array of objects: inline and via ‘interface’.

The inline method is simple but cumbersome and the object isn’t readily reusable elsewhere.

The inline format looks like this:

let arrayName: {objectDeclarationHere}[] = [ { } ]  // initialize blank array of objects

Inline example:

// declare an inline array of objects
const peopleShirtArray: {
  name: string;
  shirtSize: "small" | "medium" | "large";
}[] = [
  { name: "Brad", size: "small" },
  { name: "Kamala", size: "medium" },
  { name: "Amanda", size: "large" },
  {name: “Cacilda”, size:”medium”},
];

The interface method once set up, is mostly straightforward. There are details worth reading up on if you need to reuse your object.

The interface format:

// declare the interface
// export the interface; the interface is often placed in a separate file for reuse  
// export is optional though

export interface peopleShirts {
Name: string,
size: "small"; |  medium; |   large;
}


// declare your import 
import { peopleShirts } from '../api/responses';

// declare the array of objects with the interface 
const peopleShirtArray: peopleShirts = [
  { name: "Brad", size: "small" },
  { name: "Kamala", size: "medium" },
  { name: "Amanda", size: "large" },
  {name: “Cacilda”, size:”medium”},
];

The interface article listed in the Resources is excellent, with useful code examples and analogies for understanding.

Resources

Feedback?

Have thoughts or advice for others on array data types and interfaces in TypeScript?

If so, drop a note. I'd love to hear and see your examples, explanations, and other details to clarify how/why/when.

Quickly Move Code in VS Code w/ Mac Shortcuts

Brad Beggs — Fri, 15 Jan 2021 01:13:47 +0000

CMD X - place the full line into memory & clear it simultaneously

What It Does: This is similar to the classic CMD X cut of text but without the need to select the text. This shortcut automatically moves text into memory and deletes the line. Use CMD V to paste the same line (if needed)

Best For: removing 1 line and moving it to a new position. At the new position, CMD V and the text will bump down the current line text and insert at the location.

CMD Enter - insert a new line from the middle of the line above

What It Does: On your cursor position, CMD Enter inserts a new line break, shifting the current line 1 lower and moving your cursor to the start of the empty line.

Best For: Spacing out code blocks or need a new line for new text

CMD D - select identical items and replace

What It Does: Finds identical text and selects it for simultaneous delete, or re-write

Best For: Renaming a variable/text which is used in multiple locations in one file.

Note: Move your cursor to the word/phrase and CMD D to select all adjoining characters. No need to highlight the whole word or number. CMD D multiple times to select each instance below the cursor. ESC to remove focus.

Option Up or Down Arrows - move line(s)

What It Does: Easily move a full line of code (or lines of code) up or down as many lines as needed. Similar to cut and paste or CMD X but visually see code move

Best For: Refactoring code. Moving one function above or below another.

Note: From anywhere on a single line, Option up or down to move the line. To move multiple lines, highlight at least 1 part of each line to move them as a block.

OPTION CMD [ or OPTION CMD ] - collapse/uncollapse code blocks

What It Does Quickly collapse or uncollapse blocks of code according to scope

Best For: condensing code that you don’t need to see or deal with at the moment.

Note: This command works per scope. So you can collapse while loops, if statements, etc, and not the complete function. To collapse the function, invoke the shortcut in the functional scope.

For...of & For...in - How to Remember the Difference with ammo.

Brad Beggs — Fri, 08 Jan 2021 00:52:19 +0000

Ah, syntax. Your logic might be sound but miss those commas, brackets, or a typo turns > into '<', and bam! broken code. But, hopefully, your JSlinter catches and corrects those some of those errors.

While your linter will catch incorrect use of for...in, how does one remember the use case for for...of or for...in? Which is for iterating over objects or through arrays/strings?

Remember the difference of `for...in` & `for...of`.

If you get shot and the bullet stays in your body, the doctor looks for the foreign object.
If a {bullet: "Full Metal Jacket"} is in a javascript ammo{} object, a developer looks for...in object. The pun/trick is pronouncing for...in as “foreign.”

Do brush up on for..in usage as it doesn’t loop in an ordered fashion. This Bits of Code article explains well when to use for...in.

Other Memory Devices?

What tricks or methods do you use to remember syntax or bits of code?

References

ESLint Documentation on For..of
Bits of Code - for..in versus for..of Loops

VS Code - Vertical Rulers for Prettier Code?

Brad Beggs — Thu, 31 Dec 2020 07:37:27 +0000

What is a Vertical Ruler in VS Code?

In VS Code, the vertical ruler is a static, customizable design element to give your code an unenforced right-side boundary, meaning it won’t word-wrap your code

This vertical ruler isn’t for measurements, unlike in Word, Illustrator, or other design/editing packages.

Orange, gray, and purple rulers. Note lines 21, 22 are not impacted by the rulers.

Text is not impacted by rulers, as the example above shows.

Why?

A vertical ruler provides an easy means to make your code readable by not being too wide.

Some languages (like Python or Drupal) have style guides for max characters per line. (79 characters for Python).

While others, like Javascript, have a very loose set of guidelines but nothing suggesting a max character count per line.

How

Color and multiple vertical rulers are available in VS Code as of the February 2020 edition.

Step 1 - Open `settings.json`

Mac: Press Shift Command P
non-macOS: press Ctrl P

This opens the file search.

Type in settings.json and select the file to edit it.

Step 2 - Add the following to the last line inside the json object:



"editor.rulers": [
   {
     "column": 80,    // spacing of 1st column from left
     "color": "#ff9900"   // orange, Go Vols!
   },
     100,  // 2nd ruler with no color option
   {
    "column": 120,      // third ruler
    "color": "#9f0af5"  // purple, go Pirates! 
   },
],

The above implementation is language-agnostic and becomes the default "always-on" ruler(s). It is possible to have both the default and language-specific at the same time.

For a specific language, change the language name in the ‘[ ]’ brackets to your preferred language:



  "[ruby]": {
        "editor.rulers": [
            {
                "column": 100,
                "color": "#00ff22"
            }
        ]
    }

Add one for each language.

Step 3 - Enjoy readable code

Make sure to save your changes and enjoy.

Pretty Code. Not too wide. Just right.

Feedback?

Have thoughts or advice on the above implementation or other useful VS Code settings?

If so, drop a note. I'd love to hear and see your examples, explanations, and other details to clarify how/why/when.

Resources

February 2020 VS Code Feature.
MDN Javascript Guidelines
Python Style Guide - PEP8

DEV Community: Brad Beggs

Interesting CSS Practices - Interesting Ideas from The Top 6 Search Results

Organize Stylesheets Using a Header to Footer Structure

Create the HTML Structure First, CSS Second

Text-transform to Style Text Properties into a “Standard” across your site

Design Mobile One Column First

Use (or don’t use) The SRP - Single Responsibility Principle

Use BEM Framework

Keep Outline Highlights

References

Testing Terms, Frameworks, Explained Like a 5th Grader

What are Some Popular(ish) Test Tools for Javascript Development?

Types of Testing

Interesting Non-obvious Testing Terms Defined

References & Recommended Further Reading

JS Function Hoisting Concisely Explained

Terms to Know

Hoisting Functions

Order of Precedence in Hoisting is a Thing

References

Writing Thunks Workflow

Resources & References

A Useful Flow to Using Redux

Assumptions:

Step 1 - Create Stateless Components and the GUI

Step 2 - Add Boilerplate

Step 3 - Create a Redux Folder Structure

Step 4 - Create Your Action(s) and Actions Creator(s)

Step 5 - Create or Update Reducer(s) with Action(s)

Step 5 - Back in Your Component - Import & Props

Now Finished

Just The Steps

References & Resources

A Few Interesting Bits About package-lock.json. #yesReally

Why Should You Care?

How Package.json Controls Updates via SemVer

Relationship Between npm install and the package Files.

Interesting Facts to Know about package-lock.json

Resources && References

Feedback? Suggestions? Additions?

SCSS @content Use Cases & Examples

Uses Cases for The Content Directive, aka @content

Who Is This For?

1. @media Queries

2. Keyframes/Animations

3. Buttons

4. Nested Selectors

5. Notifications

References

Easy Way to console.log() w/o console.log()

console.table() - for arrays, objects, and mixed data types

Output an Array and Array of Arrays

Output of Objects and Arrays of Objects

Show Selected Columns Only

Not Recommended On Complex or Long Data

Other Useful console.table Tidbits

Reference

Typescript: Array Types & Usage

Assumptions

Basic Array Type Usage

Multiple Data Types in Array & Nested Array

Handling Unknown Array Data Types

Array of Objects in TypeScript

Resources

Feedback?

Quickly Move Code in VS Code w/ Mac Shortcuts

CMD X - place the full line into memory & clear it simultaneously

CMD Enter - insert a new line from the middle of the line above

CMD D - select identical items and replace

Option Up or Down Arrows - move line(s)

OPTION CMD [ or OPTION CMD ] - collapse/uncollapse code blocks

For...of & For...in - How to Remember the Difference with ammo.

Remember the difference of for...in & for...of.

Other Memory Devices?

References

VS Code - Vertical Rulers for Prettier Code?

What is a Vertical Ruler in VS Code?

Why?

How

Step 1 - Open settings.json

Relationship Between `npm install` and the `package` Files.

Interesting Facts to Know about `package-lock.json`

Uses Cases for The Content Directive, aka `@content`

Remember the difference of `for...in` & `for...of`.

Step 1 - Open `settings.json`