DEV Community: Connor Dillon

Supercharge Your Vim

Connor Dillon — Wed, 30 Sep 2020 02:03:26 +0000

Supercharge Your Vim

Basic Setup

The following changes should be made to your .vimrc file:

# Enter the current millenium (Force Vim to NOT behave like Vi)
set nocompatible

# Enable syntax and plugins (for `netrw`)
syntax enable
filetype plugin on

Finding Files

The following changes should be made to your .vimrc file:

# Search down into subfolders
# Provides tab-completion for all file-related tasks
set path+=**

# Display all mathicng files when we tab complete, navigable with Tab and Shift+Tab
set wildmenu

Sanity check: view Vim's path

:set path?

Usage:

Type :find and use Tab & Shift+Tab to search by partial match
Use * to make it a fuzzy Search

Things to consider:

:ls will print out all open Vim buffers
:b lets you autocomplete any open buffer (:b is short for buffer)

Tag Jumping

# Create the `tags` file (may need to install `ctags` first)
command! MakeTags !ctags -R .
# `!` tells Vim to run this as a shell command, i.e. pretend we type it into the console
# Alternatively, execute `ctags -R .` in your project root directory (back in the console, not Vim!), and check out the new `tags` file
set tags? # View `tags` path

ctags often comes pre-installed with most Linux distros. For OSX, ctags can be installed via brew install ctags

Usage:

Use ^] to jump to tag under cursor, (^ = Ctrl, not Caret)
Use g^] for ambiguous tags, (^ = Ctrl, not Caret)
Use ^t to jump back up the tag stack, (^ = Ctrl, not Caret)

Things to consider:

This doesn't help if you want a visual list of tags
Using this can cause you to jump around files, use :echo expand("%") within Vim to print working directory (i.e. pwd).

Autocomplete

Now we're getting to the good stuff. All of this is documented in :help ins-completion.

Autocomplete comes pre-configured with Vim. It automatically reads from your tags file (if one exists!). Even if you don't have a tags file, it will still work within the file that you're working in, as well as language-specific configurations that allows it to follow language-specific dependency chains.

For example, Vim's built-in autocomplete will recursively search through any files/modules/etc that you've set as requireed dependencies for your current file.

Highlights:

^x^n for JUST this file
^x^f for filenames only (works with our path trick!)
^x^]for tags only
^n for anything specified by the "complete" option
Please see :help ins-completion for further

Now we can:

Use ^n and ^p to go back and forth in the suggestion list.

File Browsing

Tweaks for file browsing

let g:netrw_banner=0            # disable annoying banner
let g:netrw_browse_split=4      # open in prior window
let g:netrw_altv=1              # open splits to the right
let g:netrw_liststyle=3         # tree view
let g:netrw_list_hide=netrw_gitignore#Hide()
let g:netrw_list_hide.=',\(^\|\s\s\)\zs\.\S\+'

Usage:

:edit a folder to open a file browser
- :edit . for current working directory
<CR>/v/t to open in an h-split/v-split/tab
Check out :help netrw-browse-maps for more mappings

Snippets

As with any snippet manager, effective use of snippets in Vim can save you tons of time. Snippets are natively supported in Vim, and can be easily created by remapping a relevant keyword that will read from a skeleton file and auto-complete it at your cursor.

# Read an empty HTML template and move cursor to title
nnoremap ,html :-1read $HOME/.vim/.skeleton.html<CR>3jwf>a

nnoremap remaps for normal mode (usually nremap), and nnoremap ensures that there are no collisions with default Vim commands, if any exist (i.e. overrides pre-existing commands)
- Please see :help map-modes for documentation on Vim's key mapping modes
,html is the mapping that we're assigning
: tells Vim to enter command mode
-1read invokes the read command into the current Vim buffer, with -1 tweaking cursor placement (for quality of life)
$HOME/.vim/.skeleton.html is the file that we're reading from (in this example)
<CR> sends the command automatically, so that we don't have to hit enter every time
3jwf>a Moves the cursor to a specific location (This will be unique to each snippet, and is not necessary)

Build Integration

Pro tip: Steal Mr. Bradley's formatter & add it to our spec_helper

Configure the make command to run RSpec:

set makeprg=bundle\ exec\ rspec\ -f\ QuickfixFormatter

Usage:

Run :make to run RSpec
:cl to list errors
:cc# to jump to error by number (#)
:cn and :cp to navigate forward and back through test failures

Registers

"add to delete into the a register
"by to yank into the b register
"cp to paste from the c register
:reg to display all non-empty registers
- :reg a b c to filter and display only the a, b, and c registers.
"+ to interface with the system clipboard as a register

Registers can be accessed via Ctrl + r + registerName, such as Ctrl + r + f to paste the f register into the current buffer.

Numbered Registers

Numbered registers are handled automatically by Vim, and allow us to access the last 10 deleted/yanked texts. The numbered registers will roll over, such that "0 contains the content of the most recent delete/yank, and "9 contains the content of the oldest delete/yank.

Fun Vim Toys

⌘ + / to immediately find that pesky, runaway cursor of yours.
:set showcmd to display current chain of command keystrokes in lower-right of Vim - great for those of us with short attention spans!
:help key-notation opens documentation for Vim's keyboard shortcuts - a huge life-saver!
:helpgrep SEARCH_TERM to use grep to search through all of Vim's help documentation for your search term
Look up any shortcut or command in any mode with prefixes:
- :help i_^n to look up what Ctrl+N does in insert mode
- :help c_^n to look up what Ctrl+N does in command mode
- :help v_^n to look up what Ctrl+N does in visual mode

5 Wonderful Javascript Tricks

Connor Dillon — Wed, 30 Sep 2020 01:52:45 +0000

Javascript Tricks

Query Selector

You can get elements through the DOM API with methods like getElementsByClassName or getElementById, but these can both be replaced with querySelector.

querySelector works like a CSS selector, using a period . to select classes and pounds # to select IDs. For example:

const classElement = document.querySelector('.myClass')
const idElement = document.querySelector('#myID')

querySelector is also able to target sub elements, which is not available to getElementById or getElementsByClassName. Use the space syntax to get the direct child, or the caret > syntax to get all children.

querySelectorAll gets you all of the matches and returns an array of nodes.

// sub elements
const subElement = document.querySelector('.myClass > li')
// return multiple elements
const allDivs = document.querySelectorAll('div')

Array Methods

Some array methods are overrated, and some are underrated:

`reduce`

reduce is underrated, especially by new developers - it takes a while to understand it's full power. reduce gives you an accumulator and a value in your callback function, but the accumulator doesn't have to be a number! -- It can be anything: an object, an array, a string,

const nums = [1, 2, 3]
const sum = nums.reduce((a, v) => a + v, 0) // Best practice: accumulator value defaults to first element of the object/array, so be sure to specify a default of zero to avoid typeof() errors.
const sum = nums.reduce((a, v) => [a + v], []) // object, [ '123' ]
const sum = nums.reduce((a, v) => a.concat(v), []) // array, [1, 2, 3]
const sum = nums.reduce((a, v) => a + v, '') // string, '123'

reduce allows you to very easily convert arrays to hashmaps or objects, build up strings, build up a variation of the original array

const veggies = [
    {name: 'potato', price: 1}
    {name: 'onion', price: 2}
    {name: 'cucumber', price: 1}
]
const veggiePrices = veggies.reduce(
    (a,v) => {
        a[v.name] = v.price
        return a
    },
    {}
)
console.log(veggiePrices) // { potato: 1, onion: 2, cucumber: 1 }
// Creates {name: price} object

reduce is powerful enough to do the job of map, sort, and filter if you write the right callback function.

Destructuring Tricks

Destructuring is (almost) unique to Javascript, and allows you to pull out one (or more) properties from an object, and is heavily used in frameworks such as Angular or React.

const veggie = { name: 'potato', price: 1 }
const { price } = veggie
console.log(price) // 1

Destructuring is also used anytime that you're importing libraries:

import { debounce } from 'lodash'

Destructuring can also be used as a parameter to a function:

const veggie = { name: 'potato', price: 1 }
function printPrice({ price }) {
  console.log(price)
}
printPrice(veggie) // 1

Destructuring can also be nested, going multiple layers deep into an object:

const veggiePrices = {
  potatoes: {
    red: 1,
    gold: 2,
  },
}

const veggiePrices = { potatoes: { red } }
console.log(red) // 1

Destructuring can also be used directly after writing an array method. For example, if you want to sort an array and then pull out the first item, you can easily do that with destructuring

const nums = [3, 1, 2]
const [first] = nums.sort()
console.log(first)

Promise Tips

Promises are asynchronous because they run in the background relative to the code you see on the screen.

const res = fetch('https://google.com')
const res2 = fetch('https://facebook.com')
const res3 = fetch('https://instagram.com')

Promises can be treated like any other object and store them in data structures.

const URLs = ['https://google.com', 'https://facebook.com', 'https://instagram.com']

You can use the map function to create an array of promises:

// OK Practice:
const requests = URLs.map((url) => fetch(url))

But do we want the promises to run at the same time or one after the other?

To run them at the same time, use the Promise.all() function. This ties all of the promises together, such that the array resolves after all of the promises resolve. The result is an array of the results, some of which may be failures, so this will also handle your errors.

const responses = Promise.all(requests)

If you want the promises to run one after another, you need to be careful!

You can use async await, but keep in mind your awaits need to be inside an async function.

// Better Practice - Make it an async IIFE!
(async () => {
  const requests = URLs.map((url) => fetch(url))
  const responses = Promise.all(requests)
})()

You also can't run an await inside an array method! So if you tried to map() by using an await inside of a map() or forEach(), it's not going to work.

To fix this, you can write await inside a map function, you just need to make it an async map function.

// !!! Won't work !!!
(async () => {
  const requests = URLs.map(url => await fetch(url))
})()

// !!! Works !!!
(async () => {
  const requests = async URLs.map(url => await fetch(url))
})()

In order to get this to work, you can to use a for(){} or forOf(){} loop.

(async () => {
  const responses = []
  for (let url of URLs) {
    const res = await fetch(url)
    responses.push(res)
  }
})()

Error Handling

Error handling is made super easy with a try{} catch(){} block.

try {
  // code that might throw Error
} catch (err) {
  // what do if Error is thrown
}

You can also handle errors with a .catch() on a promise. For example, when using a .then() chain, you can append a .catch() to handle errors that might have occured along the way.

fetch('https://google.com')
  .then((res) => {
    res
      .json()
      .then((json) => {
        console.log('got json', json)
      })
      .catch((err) => console.error('json failed'))
  })
  .catch((err) => console.error('request failed'))

If using async await on the above example, we can either throw an await in a try catch block, OR we can append a .catch() on the end of the await syntax. This is much cleaner than the above example, because we're combining traditional promise syntax with await.

If you have the same error handler for both await, you can just wrap both await in a try block, and handle both errors in the corresponding catch block.

(async () => {
  const res = await fetch('').catch((err) => console.error(err))
  const json = await res.json().catch((err) => console.log(err))
  console.log('got json', json)
})()

`wget` God Mode

Connor Dillon — Fri, 31 Jul 2020 07:19:41 +0000

If you're anything like me, you like to download things. And sometimes, it's too cumbersome to right click > Save As... each item on a webpage. The solution to your problem sits in your terminal: the wget utility. If we add a few options, wget becomes a beast of a website downloader, and is capable of pulling an entire site for offline viewing, include all of the linked files.

All you have to do is copy & paste your desired URL into the following terminal command:

$ wget -mkEpnp WEBPAGE-URL

The options -mkEpnp are specified below (pulled from the man page):

-m (aka --mirror): Turns on options suitable for mirroring. This option turns on recursion and time-stamping, sets infinite recursion depth and keeps FTP directory listings. It is currently equivalent to -r -N -l inf --no-remove-listing.

-k (aka --convert-links): Converts links for offline viewing.

-E (aka --adjust-extension): Adds proper filename extensions to downloaded files.

-p (aka --page-requisites): Downloads images, sounds, stylesheets, and other required files for proper offline site rendering.

-np (aka --no-parent): Prevents retrieval of the parent directory. Guarantees that only files below a certain hierarchy will be downloaded.

More fun wget options:

$ --execute robots=off #ignore robots.txt
$ --wait=30 #be gentle, wait between fetch requests
$ --random-wait #waits for a random amount of time before fetch requests
$ --user-agent=Mozilla #sends a mock user agent with each request

Happy downloading! Oh and... I can't be held responsible if you suddenly find yourself investing in a home server setup, NAS drives, or the like.

Regular Expressions in 1 Minute

Connor Dillon — Fri, 31 Jul 2020 07:02:54 +0000

Syntax

Sets the regex query for "hello":

re = /hello/

Sets the regex query to be case-insensitive:

re = /hello/i

Sets the regex query as a global search, searching for all instances, not just the first:

re = /hello/g

Special Characters

Literal Characters

Matches with any string containing exactly hello, and is case-sensitive:

re = /hello/

Matches with any string containing hello, and is case-insensitive:

re = /hello/i

Meta-character Symbols

`^` "Must start with"

Matches with "Hello World":

re = /^h/i

Matches with "Hello World":

re = /^hel/i

`$` "Must end with"

Matches with "Hello World":

re = /d$/i

Matches with "Hello World":

re = / world$/i

`^...$` "Must begin with and end with"

Not a match with "Hello World", only Matches "Hello":

re = /^hello$/i

`.` "Matches any ONE character"

Basically a wild card but for ONLY ONE character, try changing str to "Hbllo World"

Matches with "Hello" or "Hbllo" or "Hwllo" or "H7llo" or "H@llo", etc.:

re = /h.llo/i

`*` "Matches any character 0 or more times"

This is a true wild card (also works for zero characters!)"

Matches with "hello" or "heeeello" or "heebbllo" or "h52340978562llo" or "H!@#\$&^!%#*@%!%llo", etc.:

re = /h\*llo/i

`?` "Optional character"

Matches with "hello" or "hallo" or "hullo" or "hllo":

re = /ha?e?u?llo/i

`\` "Escape character"

Not a match with "Hello", only Matches "Hello?":

re = /hello\?/i

`[ ]` Brackets Character sets

Matches "hello" or "hallo", but not "hllo" or anything else:

re = /h[ae]llo/i

Matches "Hello" or "Zello":

re = /[HZ]ello/i

Not a match; [^HZ] = anything EXCEPT H or Z":

re = /[^HZ]ello/i

Matches ANY uppercase letter:

re = /[A-Z]ello/

Matches ANY lowercase letter:

re = /[a-z]ello/

Matches ANY letter with any case:

re = /[A-Za-z]ello/

Only matches a number like "1ello" or "9ello", NOTE: "1234ello" also matches because it's just looking for a single digit before "ello":

re = /[0-9]ello/

Only matches a double digit number like "69ello" or "420ello", NOTE: still only looks for 2 digits before "ello":

re = /[0-9][0-9]ello/

`{ }` Braces Quantifiers

Matches if l occurs exactly {m} amount of times:

re = /Hel{2}o/

Matches if l occurs 2-4 times:

re = /Hel{2,4}o/

Matches if l occurs at least 2 times:

re = /Hel{2,}o/

`( )` Parentheses Grouping

Matches as long as it finds Xp repeating 3 times:

re = /([0-9]p){3}/

Matches only if it finds Xp repeating exactly 3 times:

re = /^([0-9]){3}$/

Shorthand Character Classes

`\w` "Word Character"

Matches for any letter, number, or underscore _, but no other symbols or characters:

re = /\w/

`+` "One or More"

Matches for one or more letter, number, or underscore _:

re = /\w+/

`\W` "Non-Word Character"

Matches only if it finds something that's NOT a letter, number, or underscore:

re = /\W/

`\d` "Digit Character"

Matches for a single digit:

re = /\d/

Matches for one or more digits:

re = /\d+/

`\D` "Non-Digit Character"

Matches for any non-digit character:

re = /\D/

`\s` "Whitespace Character"

Matches for a space, tab, or similar whitespace characters:

re = /\s/

`\S` "Non-Whitespace Character"

Matches for anything other than a space, tab, or similar whitespace characters:

re = /\S/

`\b` "Word Boundary"

Matches for words that have a word boundary at that position, so that you avoid matching strings that contain a word inside of another word, like with Hell & Hello or Beetle & Beetlejuice:

re = /Hell\b/i

Assertions

`x(?=y)` "x followed by y"

Matches x only if followed by y:

re = /x(?=y)/i

`x(?!y)` "x not followed by y"

Matches x only if NOT followed by y:

re = /x(?!y)/i

Reference: Strings we've used to match in this article

const str = 'Hello World'
const str = '3p3p3p'
const str = 'Hello, welcome to Hell'
const str = 'asgkljhalwxqflife'

Hosting an Application on Heroku in 7 Steps

Connor Dillon — Fri, 31 Jul 2020 06:59:50 +0000

Before we start, go to Heroku.com and log in or sign up for an account (if you don't already have one).

You will also need the Heroku CLI tool, available from Heroku Dev Center

Heroku uses Git for source control, so make sure you have that installed as well. Git install documentation can be found here.

Check that everything is installed

$ heroku -v
$ git -v

Log in through the terminal within your project directory

$ heroku login
# Then enter your email and password for Heroku

Initalize a git repository

Make sure to create a .gitignore containing anything that you don't want pushed to Heroku: node_modules, reference docs, sandbox files, etc.

$ git init
$ git add .
$ git commit -m 'Initial commit'

Initialize the Heroku container

$ heroku create

Set Heroku as Remote Repository

Go to your Heroku dashboard and open up the new Heroku container.

Scroll down to "Create a new Git repository" and grab the command to add this container as our remote repository:

$ heroku git:remote -a CONTAINER-NAME-12345

And then paste that command into your project directory terminal.

Push to master branch of Heroku App

git push heroku master

View Your New Application

Go to the URL provided when pushing to master or just type heroku open into the project terminal.

A Few Notes:

In index.js, we've set const PORT = process.env.PORT || 5000 - Heroku will be using process.env.PORT and not PORT = 5000.
Make sure that you have a start script in package.json - "start": "node index". Change index to whatever entrypoint you're using if necessary.

Merging Local Git Branches

Connor Dillon — Fri, 31 Jul 2020 06:53:21 +0000

Using Merge

git checkout test
git pull
git checkout master
git pull
git merge --no-ff --no-commit test

This method will test your merge before a full commit, and will avoid a fast-forward commit by --no-ff,

If a conflict is encountered, we can run git status to check details about the conflicts and try to solve

git status

Once we solve the conflicts, or if there is no conflict, we commit and push them

git commit -m 'merge test branch'
git push

But this way will lose the changes history logged in test branch, and it would make master branch difficult for other developers to understand the history of the project.

So the best method is we have to use rebase instead of merge (suppose, when in this time, we have solved the branch conflicts)...

Using Rebase

Following is one simple sample, for advanced operations, please refer to http://git-scm.com/book/en/v2/Git-Branching-Rebasing

git checkout master
git pull
git checkout test
git pull
git rebase -i master
git checkout master
git merge test

Yep, when you have uppers done, all the Test branch's commits will be moved onto the head of Master branch. The major benefit of rebasing is that you get a linear and much cleaner project history.

❗️ CAUTION

The only thing you need to avoid is: never use rebase on public branch, like master branch.

In other words, if you're ever about to perform an operation like the following, please be absolutely sure you know what you're doing.

git checkout master
git rebase -i test

For more details, please see this article from Atlassian on The Golden Rule of Rebasing.

Error Handling With Fetch

Connor Dillon — Fri, 31 Jul 2020 06:47:38 +0000

Error handling with fetch is a bit different than with something like Axios or jQuery. If there is an http error, it will not fire off .catch automatically. You have to check the response and throw an error yourself. Here is an example:

fetch('https://jsonplaceholder.typicode.com/todo/1')
  .then(res => res.json())
  .then(res => {
    if (!res.ok) {
       throw new Error(res.error);
    }
    return res;
  })
  .catch(err => console.log(err));

I would suggest creating a separate function for error handling:

function handleErrors(res) {
  if (!res.ok) throw new Error(res.error);
  return res;
}

fetch('https://jsonplaceholder.typicode.com/todo/1')
  .then(res => res.json())
  .then(handleErrors)
  .then(res => console.log(res.data))
  .catch(err => console.log(err));

Debugging Pattern: "ControllerID"

Connor Dillon — Fri, 31 Jul 2020 06:40:36 +0000

This debugging pattern was shared with me by a close friend (who also happens to be a very skilled developer). This is an incredibly useful and time-saving debugging pattern when working with modules or controllers that need to be instantiated only once per instance.

The idea behind this pattern is to apply a controller ID to each instance of a given module/controller in order to keep track of the number of times it is being instantiated.

To do this, create a global variable that we will increment:

let controllerCount = 0

Then, assign a variable within the module that will be assigned a controller ID, and increment the controller count:

export const Controller = () => {
    const controllerID = ++controllerCount
}

Then, add the following code to your tests:

console.log({data, controllerID})

Create Custom DOM & Window Tests

To make information that would normally be buried deep within the DOM, we can create our own tests to make things more readily available.

Just add this pattern to the correct scope:

window.test = { module1, module2, ... }

Sass Setup and Basic Use

Connor Dillon — Fri, 31 Jul 2020 06:34:06 +0000

How to Set Up Sass Using NPM

In main project folder, (outside of dist folder if using one), create a folder called scss, and main.scss file within the new scss folder.
Right click up-one-level folder from dist and open in terminal (i.e. in terminal, go to your dist folder, then do '$ cd ..')
In terminal, do $ npm init to create a package.json file.
Enter package name and details.
In terminal, do $ npm i node-sass to initialize sass.
Open package.json file, change:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"},

to:

"scripts": {
    "sass": "node-sass -w scss/ -o dist/css/ --recursive"},

NOTE: File directories in the script must match your folder layout!

For example, if you don't have a dist/ folder, just use ... -o css/ --recursive instead.

NOTE: Make sure to point your stylesheet correctly in your html code!

For example, if using main.scss (and thus main.css), use: <link rel="stylesheet" href="css/main.css">

In your terminal, start the Sass script with: npm run sass.
In main.scss, start writing your sass.

NOTE: Do not edit your main.css file. The Sass compiler will overwrite any changes you might make, so be sure to write your CSS directly to main.scss.

REST APIs & HTTP Requests

Connor Dillon — Fri, 31 Jul 2020 06:27:13 +0000

REST APIs & HTTP Requests
- What is an API?
- What is REST?
- Types of Requests
- API Endpoints

What is an API?

API stands for "Application Programming Interface"
Contract provided by one piece of software to another
Structured request and response

What is REST?

REST stands for "Representational State Transfer"
Architectural style for designing networked applications
Relies on a stateless, client-server protocol, almost always HTTP
Treats server objects as resources that can be created or destroyed
Can be used by virtually any programming language
All APIs have their own rules and structure

Types of Requests

GET: Retrieve data from a specified resource
POST: Submit data to be process to a specified resource
PUT: Update a specified resource
DELETE: Delete a specified resource
HEAD: Same as get but does not return a body (only returns header)
OPTIONS: Returns the supported HTTP methods
PATCH: Update partial resources (similar to PUT)

API Endpoints

Endpoints are URLs that you can access to do certain things:

Method	URL	Function
GET	https://website.com/api/users	Get all users
GET	https://website.com/api/users/1	Get single user
POST	https://website.com/api/users	Add user
PUT	https://website.com/api/users/1	Update user
DELETE	https://website.com/api/users/1	Delete user

Intro to Ajax & XHR

Connor Dillon — Fri, 31 Jul 2020 06:24:37 +0000

Intro to Ajax & XHR
- Synchronous Code
- Asynchronous Code
- Most Async code you work with will be part of an API or Library
- A few ways to work with Async code
- Ajax "Asynchronous Javascript & XML"
- XmlHttpRequest XHR Object
- Libraries and Other Methods

Synchronous Code

posts = loadPostsSync()
// ... wait til posts are fetched
// ... do something with posts

doTheNextThing() // Has to wait until posts load

Asynchronous Code

loadPostsAsync(function () {
  // ... wait til posts are fetched
  // ... do something with posts
})

doTheNextThing() // Doesn't have to wait until posts load

Most Async code you work with will be part of an API or Library

XMLHttpRequest & Fetch
jQuery Ajax, Axios, other HTTP Libraries
Node.js fs (filesystem) module

A few ways to work with Async code

Callbacks
Promises (ES6/ES2015)
Async/Await

Ajax ("Asynchronous Javascript & XML")

Set of web technologies
Send & receive data asynchronously
Does not interfere with current page
JSON has replaced XML for the most part
- Ajax engine sits between the server and the client as a middleman
- Client sends JS calls to Ajax Engine
- Ajax Engine returns HTML response to client
- Ajax Engine sends XmlHttpRequest to Server
- Server returns XML/JSON
Makes async requests in the background
No page reload/refresh needed
Fetches data
Very interactive

XmlHttpRequest (XHR) Object

Core tech in Ajax
API in the form of an object
Provided by the browser's JS environment
Methods transfer data between client & server
Can be used with other protocols than HTTP
Can work with data other than XML (JSON, plain text)
- *Nowadays we mostly just work with JSON data

Libraries and Other Methods

Fetch API (part of vanilla JS)
Axios (external library)
Superagent (external library)
jQuery (not recommended if just using it for Ajax. jQuery is a complete DOM manipulation library, which is very bloated for just Ajax)
Node HTTP (good if using Node.js)

Github Contributing.md Markdown Template

Connor Dillon — Fri, 31 Jul 2020 06:17:19 +0000

The following content is a boilerplate/template for Contributing guidelines that you can use for your next (or current!) development projects.
If you would like to use this, please grab the raw markdown file from this gist.

Contributing

When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change.

Please note we have a code of conduct, please follow it in all your interactions with the project.

Pull Request Process

Ensure any install or build dependencies are removed before the end of the layer when doing a build.
Update the README.md with details of changes to the interface, this includes new environment variables, exposed ports, useful file locations and container parameters.
Increase the version numbers in any examples files and the README.md to the new version that this pull request would represent. The versioning scheme we use is SemVer.
You may merge the Pull Request in once you have the sign-off of two other developers, or if you do not have permission to do that, you may request the second reviewer to merge it for you.

Code of Conduct

Our Pledge

In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.

Our Standards

Examples of behavior that contributes to creating a positive environment include:

Using welcoming and inclusive language
Being respectful of differing viewpoints and experiences
Gracefully accepting constructive criticism
Focusing on what is best for the community
Showing empathy towards other community members

Examples of unacceptable behavior by participants include:

The use of sexualized language or imagery and unwelcome sexual attention or advances
Trolling, insulting/derogatory comments, and personal or political attacks
Public or private harassment
Publishing others' private information, such as a physical or electronic address, without explicit permission
Other conduct which could reasonably be considered inappropriate in a professional setting

Our Responsibilities

Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.

Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.

Scope

This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.

Enforcement

Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team here. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.

Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.

Attribution

This Code of Conduct is adapted from the Contributor Covenant, version 1.4,
available here.

DEV Community: Connor Dillon

Supercharge Your Vim

Supercharge Your Vim

Basic Setup

Finding Files

Tag Jumping

Autocomplete

File Browsing

Snippets

Build Integration

Registers

Numbered Registers

Fun Vim Toys

5 Wonderful Javascript Tricks

Javascript Tricks

Query Selector

Array Methods

reduce

Destructuring Tricks

Promise Tips

Error Handling

`wget` God Mode

Regular Expressions in 1 Minute

Syntax

Special Characters

Literal Characters

Meta-character Symbols

^ "Must start with"

$ "Must end with"

^...$ "Must begin with and end with"

. "Matches any ONE character"

* "Matches any character 0 or more times"

? "Optional character"

\ "Escape character"

[ ] Brackets Character sets

{ } Braces Quantifiers

( ) Parentheses Grouping

Shorthand Character Classes

\w "Word Character"

+ "One or More"

\W "Non-Word Character"

\d "Digit Character"

\D "Non-Digit Character"

\s "Whitespace Character"

\S "Non-Whitespace Character"

\b "Word Boundary"

Assertions

x(?=y) "x followed by y"

x(?!y) "x not followed by y"

Reference: Strings we've used to match in this article

Hosting an Application on Heroku in 7 Steps

Merging Local Git Branches

Using Merge

Using Rebase

❗️ CAUTION

Error Handling With Fetch

Debugging Pattern: "ControllerID"

Create Custom DOM & Window Tests

Sass Setup and Basic Use

How to Set Up Sass Using NPM

REST APIs & HTTP Requests

What is an API?

What is REST?

Types of Requests

API Endpoints

Intro to Ajax & XHR

Synchronous Code

Asynchronous Code

Most Async code you work with will be part of an API or Library

A few ways to work with Async code

Ajax ("Asynchronous Javascript & XML")

XmlHttpRequest (XHR) Object

Libraries and Other Methods

Github Contributing.md Markdown Template

Contributing

Pull Request Process

Code of Conduct

Our Pledge

Our Standards

Our Responsibilities

`reduce`

`^` "Must start with"

`$` "Must end with"

`^...$` "Must begin with and end with"

`.` "Matches any ONE character"

`*` "Matches any character 0 or more times"

`?` "Optional character"

`\` "Escape character"

`[ ]` Brackets Character sets

`{ }` Braces Quantifiers

`( )` Parentheses Grouping

`\w` "Word Character"

`+` "One or More"

`\W` "Non-Word Character"

`\d` "Digit Character"

`\D` "Non-Digit Character"

`\s` "Whitespace Character"

`\S` "Non-Whitespace Character"

`\b` "Word Boundary"

`x(?=y)` "x followed by y"

`x(?!y)` "x not followed by y"