Implementations of sort algorithms in javascript

Implementations of bubble, selection, merge, and quick sorts. https://gist.github.com/bullgare/0da3207aa55a200ce36837ff904962a2

Cool talk on js event loop and call stack

It’s junior-middle level, but animations are great. https://youtu.be/8aGhZQkoFbQ Here’s an article about almost the same but in more details about difference between tasks’ queue (timeouts) and microtasks’ queue (promises and DOM modifications). The main idea is that there are several queues that have different priorities. And microtasks are more important than tasks. https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/

Front-end interview questions with answers

Yeap, yet another one. https://github.com/yangshun/front-end-interview-handbook That’s what it has now: Table of Contents

React. Benchmarking and optimizing performance

There is a tool called react-addons-perf that should be imported into your project.

import Perf from 'react-addons-perf';

window.Perf = Perf;

import Perf from 'react-addons-perf';

window.Perf = Perf;

After that you can use Perf object in your console. It can tell you about your react performance issues, not including redux. For instance, you can check unnecessary renders or unnecessary change calculations:

Perf.start();
// do whatever you want to measure
Perf.stop();

Perf.printOperations(); // to show DOM manipulations
Perf.printWaisted(); // to show unneeded calculations for components which remained the same afterwards

Perf.start();

// do whatever you want to measure

Perf.stop();

Perf.printOperations(); // to show DOM manipulations

Perf.printWaisted(); // to show unneeded calculations for components which remained the same afterwards

Here’s more on that — https://reactjs.org/docs/perf.html. And …

MVC vs Flux

They are all architecture patterns. M is for model. It stores generic logic for the model like fields and calculations based on the fields like validation and stuff. V is for view. It just renders stuff and passes user interactions (events) to its controller via the controller’s API. C is for controller that ties models …

Nice scheduling service

And can be used for free. Calendar where you can post a schedule when you’re available for something to share with others. https://calendly.com/

RESTful API basics

It is a way to structure your API over HTTP. REST stands for “Representational State Transfer”. It has 5 major parts: The endpoint The method The headers Request body HTTP status Endpoint paths Could be something like

/users/:username/repos
/users/:username/repos/:repo
/users/:username/repos?sort=date&order=asc

/users/:username/repos

/users/:username/repos/:repo

/users/:username/repos?sort=date&order=asc

Methods GET Read entry/list of entries POST Create an entry PUT Update all entry fields PATCH Update …

Publish subdirectory of a project to gh-pages

If your build is located at ./build, then do this:

git subtree push --prefix build origin gh-pages

1	git subtree push --prefix build origin gh-pages

More details here — https://gist.github.com/cobyism/4730490

Testing react’s dom with jest and enzyme

Install it like this:

yarn add enzyme enzyme-adapter-react-16 --registry="https://registry.npmjs.org"

1	yarn add enzyme enzyme-adapter-react-16 --registry="https://registry.npmjs.org"

Regression testing of react app with jest

Example is here — https://facebook.github.io/jest/docs/en/tutorial-react.html. The main idea is this:

// Link.react.test.js
import React from 'react';
import Link from '../Link.react';
import renderer from 'react-test-renderer';

test('Link changes the class when hovered', () => {
  const component = renderer.create(
    <Link page="http://www.facebook.com">Facebook</Link>,
  );
  let tree = component.toJSON();
  expect(tree).toMatchSnapshot();

  // manually trigger the callback
  tree.props.onMouseEnter();
  // re-rendering
  tree = component.toJSON();
  expect(tree).toMatchSnapshot();

  // manually trigger the callback
  tree.props.onMouseLeave();
  // re-rendering
  tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});

// Link.react.test.js

import React from 'react';

import Link from '../Link.react';

import renderer from 'react-test-renderer';

test('Link changes the class when hovered', () => {

const component = renderer.create(

<Link page="http://www.facebook.com">Facebook</Link>,

);

let tree = component.toJSON();

expect(tree).toMatchSnapshot();

// manually trigger the callback

tree.props.onMouseEnter();

// re-rendering

tree = component.toJSON();

expect(tree).toMatchSnapshot();

// manually trigger the callback

tree.props.onMouseLeave();

// re-rendering

tree = component.toJSON();

expect(tree).toMatchSnapshot();

});