Forem: Kelp

An awesome terminal.

Kelp — Fri, 26 Apr 2019 08:13:06 +0000

Today, I saw this project. It is so cool!

GitSquared / edex-ui

A cross-platform, customizable science fiction terminal emulator with advanced monitoring & touchscreen support.

(Project archived oct. 18th 2021)

eDEX-UI is a fullscreen, cross-platform terminal emulator and system monitor that looks and feels like a sci-fi computer interface.

Heavily inspired from the TRON Legacy movie effects (especially the Board Room sequence), the eDEX-UI project was originally meant to be "DEX-UI with less « art » and more « distributable software »".

While keeping a futuristic look and feel, it strives to maintain a certain level of functionality and to be usable in real-life scenarios, with the larger goal of bringing science-fiction UXs to the mainstream.

It might or might not be a joke taken too seriously.

Jump to:
Features — Screenshots — Questions & Answers — Download — Featured In — Contributor Instructions — Credits

Sponsor

Want to help support my open-source experiments and learn some cool JavaScript tricks at the same time?

Click the banner below and sign up to…

View on GitHub

Log MongoDB query plans when the query is slow.

Kelp — Tue, 23 Apr 2019 03:27:06 +0000

How to tune the performance issue about MongoDB?

We can use .explain() then MongoDB will return explain-results.
The explain-results are look like this.

"executionStats" : {
   "executionSuccess" : <boolean>,
   "nReturned" : <int>,
   "executionTimeMillis" : <int>,
   "totalKeysExamined" : <int>,
   "totalDocsExamined" : <int>,
   "executionStages" : {
      "stage" : <STAGE1>
      "nReturned" : <int>,
      "executionTimeMillisEstimate" : <int>,
      "works" : <int>,
      "advanced" : <int>,
      "needTime" : <int>,
      "needYield" : <int>,
      "saveState" : <int>,
      "restoreState" : <int>,
      "isEOF" : <boolean>,
      ...
      "inputStage" : {
         "stage" : <STAGE2>,
         "nReturned" : <int>,
         "executionTimeMillisEstimate" : <int>,
         ...
         "inputStage" : {
            ...
         }
      }
   },
   "allPlansExecution" : [
      {
         "nReturned" : <int>,
         "executionTimeMillisEstimate" : <int>,
         "totalKeysExamined" : <int>,
         "totalDocsExamined" :<int>,
         "executionStages" : {
            "stage" : <STAGEA>,
            "nReturned" : <int>,
            "executionTimeMillisEstimate" : <int>,
            ...
            "inputStage" : {
               "stage" : <STAGEB>,
               ...
               "inputStage" : {
                 ...
               }
            }
         }
      },
      ...
   ]
}

executionStats.totalDocsExamined too large means your query need scan a lot of documents.
When the stage is COLLSCAN means MongoDB scanning documents from the collection not the index. Scanning from the index is more quickly than from the collection.

When we log all explain-results on the console. There are too much information, so that we can't find we want.

A Mongoose plugin to show query plans when the query is slow.

You can set your own when to show the explain result.

kelp404 / mongoose-profiler

A performance tuning tool for Mongoose. Show explain results when the query is slow.

mongoose-profiler

This is a mongoose plugin for tuning performance.
It will show the explain results on the console when the query is slow. Such as mongodb scans all documents in the collection without index.
Don't use it on production.

Installation

$ npm install mongoose-profiler --save-dev

Quick start

const mongooseProfiler = require('mongoose-profiler');
schema.plugin(mongooseProfiler());

When you execute this query without the index then you will get some messages on the console.

ProductModel
  .where({state: 'active'})
  .where({owner: {$in: ['5c9d9428e7462d3d989cb69b', '5c9d95acea5c9b4036d97c88']}})
  .limit(100);

Mongoose:      64ms Products.find({ state: 'active', owner: { '$in': [ ObjectId("5c9d9428e7462d3d989cb69b"), ObjectId("5c9d95acea5c9b4036d97c88") ] } }, { skip: 0, limit: 100 })
[ { queryPlanner
     { plannerVersion: 1
       namespace: 'database.Products'
       indexFilterSet: false,
       parsedQuery:
        { '$and':
           [ { state:

…

View on GitHub

const mongooseProfiler = require('mongoose-profiler');
schema.plugin(mongooseProfiler({
  isAlwaysShowQuery: true,
  duration: 1000,          // Show query plans when it took more than this time (ms).
  totalDocsExamined: 1000, // Show query plans when "totalDocsExamined" more than this value.
  level: 'COLLSCAN'        // Show query plans when the stage is "COLLSCAN".
}));

Build a React SPA without Redux.

Kelp — Fri, 18 Jan 2019 04:23:26 +0000

We need two elements to render a page on the client.

Template. The React component.
Data. We fetch data from the backend.

The client-side app fetch data from the backend, then render it on the browser DOM.
It is really simple work. But what we do on projects. We use flux, redux, redux-thunk, redux-saga...

I have used redux, but I think redux takes too much time to build actions and reducers.
We just want a client-side router. We define the page of routes with the component and that how to fetch data.

I build capybara router. It is a react router without flux and redux.
It provides a simple way to build a frontend app of SPA.

kelp404 / capybara-router

Unfancy react router without flux and redux.

capybara-router

This is a react router without flux and redux.
We just want a simple way to build a Single Page Application.
Define rules that include the component and how to fetch data of the each page in a router.

Installation

npm install capybara-router --save

Live demo

https://kelp404.github.io/capybara-router/

Example

/example

const React = require('react');
const ReactDOM = require('react-dom');
const {Router, RouterView} = require('capybara-router');
const history = require('history');
const axios = require('axios');
const ErrorPage = props => {
  return <h2 className="text-center">{`${props.error}`}</h2>;
};
const Home = props => {
  console.log(props.data);
  return <h2>Home</h2>;
};

…

View on GitHub

Live demo of SPA with capybara router.

https://kelp404.github.io/capybara-router/

Simple example code of building SPA with capybara router.

const React = require('react');
const ReactDOM = require('react-dom');
const {Router, RouterView} = require('capybara-router');
const history = require('history');
const axios = require('axios');

const ErrorPage = props => {
  return <h2 className="text-center">{`${this.props.error}`}</h2>;
};
const Home = props => {
  return <h2>Home</h2>;
};

const router = new Router({
  history: history.createBrowserHistory(),
  routes: [
    {
      name: 'web',
      uri: '/',
      onEnter: props => {
        document.title = 'Home';
      },
      resolve: {
        data: params => {
          return axios({
            method: 'get',
            url: `/data/${params.id}.json`
          }).then((response) => {
            return response.data;
          });
        }
      },
      component: Home
    }
  ],
  errorComponent: ErrorPage
});
router.start();

const element = (
  <RouterView>
    <p className="text-center text-muted h3" style={padding: '20px 0'}>
      <i className="fa fa-spinner fa-pulse fa-fw"></i> Loading...
    </p>
  </RouterView>
);
ReactDOM.render(
  element,
  document.getElementById('root')
);

more details example