jahe

REST API Cheatsheet

Source: https://www.youtube.com/watch?v=5WXYw4J4QOU

• POST, GET, PUT, DELETE != CRUD
• no verbs -> just nouns for Resources: /applications or /applications/123
• Possible Responses: Collection of Resources (e.g. with Links) or One instance of a Resource
• Keep your API course grained to be scaleble to future requirements
• For Resources: Be as specific as possible: /customers vs. /newsletter-customers and /registered-customers
• PUT for Create: Can be used when the Client has the ability to create an identifier for the Resource himself. But it has to contain a full replacement of the dataset: PUT /applications/123

buren

const CrossOriginLocalStorage = function(currentWindow, iframe, allowedOrigins, onMessage) {
  this.allowedOrigins = allowedOrigins;

  let childWindow;
  // some browser (don't remember which one) throw exception when you try to access
  // contentWindow for the first time, it works when you do that second time
  try {
      childWindow = iframe.contentWindow;
  } catch(e) {
      childWindow = iframe.contentWindow;

faressoft

DOM Performance

• How the browser renders the document
  • Receives the data (bytes) from the server.
  • Parses and converts into tokens (<, TagName, Attribute, AttributeValue, >).
  • Turns tokens into nodes.
  • Turns nodes into the DOM tree.
• Builds CSSOM tree from the css rules.

luciopaiva

Full socket.io client and server example

Last updated: 2021-02-21, tested with socket.io v3.1.1

This is the simplest implementation you will find for a client/server WebSockets architecture using socket.io.

To see a full explanation, read my answer on SO here: https://stackoverflow.com/a/24232050/778272.

If you're looking for examples using frameworks, check these links:

iliran11

// Current Persons Data Structure in Client

const clientData = [{
        id: 1,
        employed: true
    },
    {
        id: 2,
        employed: false
    },

MWins

Project Ideas

Ok. I'm going to list off some ideas for projects. You will have to determine if any particular idea is good enough to include in a portfolio. These aren't creative ideas. They likely already exist. Some are way too advanced while others are simplistic.

I will recommend to post any project you make to github and make a github project page for it. Explain in as much detail as possible how you made it, how it can be improved etc. Document it.

If you pick an advanced idea, setup a development roadmap and follow it. This will show some project management skills.

Another piece of advice for those who are design challenged. Use different front end frameworks and use different themes for those frameworks to provide appealing designs without looking like yet another bootstrap site.

brauliodiez

lodash/fp - set / flow

In this gist we are going to learn about basic goodies that we get from the library lodash/fp (fp stands for functional programming, great for ensuring immutability).We'll learn just by doing (step by step guided sample + codepens).

We'll cover lodash set and flow functions

Steps

• We'll use codepen as our playground, navigate to this page:

jayphelps

{
  "scripts": {
    "build": "npm run build:es2015 && npm run build:esm && npm run build:cjs && npm run build:umd && npm run build:umd:min",
    "build:es2015": "tsc --module es2015 --target es2015 --outDir dist/es2015",
    "build:esm": "tsc --module es2015 --target es5 --outDir dist/esm",
    "build:cjs": "tsc --module commonjs --target es5 --outDir dist/cjs",
    "build:umd": "rollup dist/esm/index.js --format umd --name YourLibrary --sourceMap --output dist/umd/yourlibrary.js",
    "build:umd:min": "cd dist/umd && uglifyjs --compress --mangle --source-map --screw-ie8 --comments --o yourlibrary.min.js -- yourlibrary.js && gzip yourlibrary.min.js -c > yourlibrary.min.js.gz",
  }
}

NoamELB

@import "../../../../SASS/lib/core";
@import "../../Cards/Card/mixins";

.tabs {
  padding: 0;
  border: $constants-border;
  border-radius: 8px;

  .tabs_header {
    display: flex;

iliran11

// http://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true,