pcanterini

Next.js Starters

A list of CLI generators, starter kits / boilerplates and toolkits to kick start your Next.js apps.

• What is included in this list:
  • Has ~1K+ Github stars
  • Actively maintained / up to date
  • Includes a style / css solution or UI Framework
  • Includes a database
• Includes authentication / authorization

pcanterini

Keybase proof

I hereby claim:

• I am pcanterini on github.
• I am pedrobr (https://keybase.io/pedrobr) on keybase.
• I have a public key ASBq_MMkkZTFgkbWrj2VKieWUSg5oXZuWap53VouW49OKAo

To claim this, I am signing this object:

pcanterini

Effective Engineer - Notes

• By Edmond Lau
• Highly Recommended 👍
• http://www.theeffectiveengineer.com/

What's an Effective Engineer?

• They are the people who get things done. Effective Engineers produce results.

Adopt the Right Mindsets

pcanterini

Android

Facebook

Mozilla/5.0 (Linux; Android 4.4.4; One Build/KTU84L.H4) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/33.0.0.0 Mobile Safari/537.36 [FB_IAB/FB4A;FBAV/28.0.0.20.16;]

Twitter

Mozilla/5.0 (Linux; Android 4.4.4; One Build/KTU84L.H4) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/33.0.0.0 Mobile Safari/537.36

pcanterini

#!/bin/bash
# Delete all containers
docker rm $(docker ps -a -q)
# Delete all images
docker rmi -f $(docker images -q)

pcanterini

{
    "updated_at": "2016-10-19T20:16:55Z",
    "type": "ts",
    "tracks": [{
        "url_hash": "fc88ab7623ceb58a7ee77a7ea2f077462ab39d725645881e02a4308566d52719",
        "url": "http://bleacherreport.com/articles/2670568-2016-17-nba-season-preview-predicting-who-will-be-this-years-breakout-star",
        "updated_at": "2016-10-19T15:42:01Z",
        "tag": {
            "unique_name": "nba",
            "tag_id": 19,

pcanterini

##Setup your server (this would ideally be done with automated provisioning)

• add a deploy user with password-less ssh see this gist
• install forever npm install -g forever

##Install flightplan

• npm install -g flightplan
• in your project folder npm install flightplan --save-dev
• create a flightplan.js file

pcanterini

// Prototypal OO with ES6

// Eric Elliott's example
let animal = {
  animalType: 'animal',
  
  describe () {
    return `An ${this.animalType}, with ${this.furColor} fur, 
      ${this.legs} legs, and a ${this.tail} tail.`;
  }

pcanterini

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
• elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
• elem.getClientRects(), elem.getBoundingClientRect()

pcanterini

import test from 'tape';

// For each unit test you write,
// answer these questions:
test('What component aspect are you testing?', assert => {
  const actual = 'What is the actual output?';
  const expected = 'What is the expected output?';

  assert.equal(actual, expected,
    'What should the feature do?');