Giters

TimAstier / resources

A personal list of resources to keep track of what I learn

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Web App Development Resources

Description

A personal list of resources to keep track of what I learn and useful links. Mostly about JavaScript, React, Redux.

Docs

General

CSS & styles

React

Redux

Testing

Frontend libraries

Backend / Data

Sound

Type checking

GraphQL

Gatsby

Deployment

Common libraries in Open source projects

Built-in node modules

  • rl - an interface for reading data from a Readable stream one line at a time
  • fs - an API for interacting with the file system

Open source libraries

  • benchmark - a benchmarking library
  • bluebird - a full featured promise library with unmatched performance
  • chalk - terminal string styling done right
  • chodikar - a neat wrapper around node.js fs.watch / fs.watchFile / fsevents
  • common-tags - useful template literal tags for dealing with strings in ES2015+
  • lerna - a tool for managing JavaScript projects with multiple packages
  • fs - an API for interacting with the file system
  • lodash - a modern JavaScript utility library delivering modularity, performance, & extras
  • mitt - tiny 200 byte functional event emitter / pubsub
  • three.js - an easy to use, lightweight, 3D library

awesome-react-render-props - List of Useful React Components library

Tools

  • 0to255 - a color tool for finding lighter and darker colors based on any color.
  • carbon - create and share beautiful images of your source code.
  • CodeSandebox - the online code editor

Media files conversion

Reference projects

Articles & Tutorials

Research

Custom components in embedded in Markdown

JavaScript

NPM

React

Redux

TypeScript

Flow

GraphQL

React-motion

Heroku

Postgresql

Webpack

Prisma

Devops

Functional programming

  • Awesome FP JS - A curated list of awesome functional programming stuff in JS

Libraries:

// map's composition law
compose(
  map(f),
  map(g)
) ===
  map(
    compose(
      f,
      g
    )
  );

Blogs

Useful Node / JS tricks

const a = ["test", null, 0, 1, undefined, false, true];
const b = a.filter(Boolean);

// b => [ 'test', 1, true ]
// NOTE: equivalent to _.compact()
const a = [1, 2, 3, 4, 5];
const [head, ...rest] = a;

// head => 1
// rest => [2, 3, 4, 5]
const add2 = x => x + 2;
const multiplyBy2 = x => x * 2;

const compose = (...fns) => arg =>
  fns.reduce((composed, f) => f(composed), arg);

const add2ThenMultiplyBy2 = compose(
  add2,
  multiplyBy2
);

console.log(add2ThenMultiplyBy2(1));
// ->  6
process.cwd(); // returns the current working directory
__dirname; // returns the directory name of the directory containing the JavaScript source code file

Useful lodash methods

_.assign();
_.times();
_.debounce();
_.find();
_.cloneDeep();
_.flatten();
_.flattenDeep();
_.random();
_.omit();
_.sample();
_.sampleSize();

Editor Shortcuts

How to replicate this custom setting on Vs Code:

  • Install 'Atom Keymap' extension
  • Have this keybindings.json file:
[
  {
    "key": "cmd+=",
    "command": "editor.action.fontZoomIn"
  },
  {
    "key": "cmd+-",
    "command": "editor.action.fontZoomOut"
  },
  {
    "key": "ctrl+[Backquote]",
    "command": "workbench.view.explorer"
  },
  {
    "key": "a",
    "command": "explorer.newFile",
    "when": "explorerViewletVisible && filesExplorerFocus && !inputFocus"
  },
  {
    "key": "shift+a",
    "command": "explorer.newFolder",
    "when": "explorerViewletVisible && filesExplorerFocus && !inputFocus"
  },
  {
    "key": "ctrl+alt+m",
    "command": "markdown.showPreview",
    "when": "editorLangId == 'markdown'"
  },
  {
    "key": "r",
    "command": "renameFile",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
  },
  {
    "key": "enter",
    "command": "-renameFile",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
  }
]

General

Action Atom Code
Close tab ⌘-w ⌘-w
Open settings ⌘-, ⌘-,
Undo ⌘-z ⌘-z
Switch File tree <> Editor ⌘-< ctrl-<

Files management

Action Atom Code
Move to previous file ↑ ↑
Move to next file ↓ ↓
Open file ↵ ↵
Delete file backs. backs.
Move down file path → →
Move up file path ← ←
Create new file a a
Create new folder ⇧-a ⇧-a
Rename file fn-f2 r
Open project ⇧-⌘-o ⇧-⌘-o

Code editing

Action Atom Code
Save file ⌘-s ⌘-s
Save all files ⌥-⌘-s ⌥-⌘-s
Find in panel ⌘-f ⌘-f
Find in project ⇧-⌘-f ⇧-⌘-f
Select All ⌘-a ⌘-a
Select next occurrence ⌘-d ⌘-d
Select characters / lines ⇧-move ⇧-move
Move to start of line ⌘-← ⌘-←
Move to end of line ⌘-→ ⌘-→
Move to top of file ⌘-↑ ⌘-↑
Move to bottom of file ⌘-↓ ⌘-↓
Move line up ⌃-⌘-↑ ⌃-⌘-↑
Move line down ⌃-⌘-↓ ⌃-⌘-↓
Duplicate line ⇧-⌘-d ⇧-⌘-d
Insert line below ⌘-↵ ⌘-↵
Insert line above ⇧-⌘-↵ ⇧-⌘-↵
Delete selected lines ⇧-^-k ⇧-^-k
Delete rest of the line ^-k ^-k
Zoom in ⌘-+ ⌘-+
Zoom out ⌘-- ⌘--
Open Markdown prev. ^-⌥-m ^-⌥-m
Open Markdown prev. on side ⇧-^-m
Find matching bracket ^-m ^-m
Next tab ⌥-⌘-→ ⌥-⌘-→
Previous tab ⌥-⌘-← ⌥-⌘-←
Comment out selected lines ⇧-⌘-l ⇧-⌘-l

About

A personal list of resources to keep track of what I learn