This document attempts to capture some detail about large projects on GitHub. That includes looking at what tools they are using, what processes they use, and how much interaction they have.
This document is intended to provide a high level overview rather than dig into all of the details.
The projects that will be looked at are:
| // @flow | |
| const digital_root = (n: number): number => | |
| n < 10 | |
| ? n | |
| : digital_root(n.toString(10).split('').reduce((prev, curr) => prev + parseInt(curr, 10), 0)); |
This demonstrates the implementation of full text search for documents in Indexed DB.
The necessity of annotating records with the word list to populate the index is a limitation of the current Indexed DB API. A feature request to support custom
| var string = new Uint8Array([0x01, 0x02]); | |
| var data = new Uint8Array([0x03, 0x04, 0x05]); | |
| var handle_error = function (error) { | |
| cnosole.log("Error:"); | |
| console.log(err); | |
| }; | |
| window.crypto.subtle.digest({name: "SHA-256"}, string).then(function (hash) { | |
| console.log("SHA-256:"); |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>vision-test</title> | |
| <script src="libraries/p5.js" type="text/javascript"></script> | |
| <script src="libraries/p5.dom.js" type="text/javascript"></script> | |
| <script src="libraries/p5.sound.js" type="text/javascript"></script> |
After digging more into React I get a better idea on how React states work. It looks like React still have a bit of magic happening behind the scene to make states work.
// 3 Elements mapping to the same real DOM
var element1 = <MyElement awesome=true>My Awesome Content</MyElement>
var element2 = <MyElement awesome=false>My Boring Content</MyElement>
(I've reposted this on my blog, which you may find more pleasant to read: http://devlog.disco.zone/2016/06/01/webpack/)
I was asked on Twitter why I think Webpack is the right approach to build tooling in JavaScript applications. My explanation is, uh, a bit longer than fit in a single tweet.
When I say "right approach," I'm specifically talking about the way Webpack's pipeline functions. There are certainly some deficiencies in various aspects of Webpack: it has a rather unintuitive API, and often requires quite a bit of boilerplate to set up. However, even with these issues, I think the core principles of how Webpack functions are sound.
I should also mention here this argument basically applies to SystemJS as well. I'm skeptical of various aspects of SystemJS, but I've only taken a very surface-level look at it, so I'm gonna withhold judgement until I've had a chance
live example: https://jsfiddle.net/pdb7kraL/
| import React from 'react' | |
| import { render } from 'react-dom' | |
| import { Router, browserHistory, match } from 'react-router' | |
| import createStore from '../shared/lib/create-store.js' | |
| import ContextProvider from '../shared/lib/context-provider.js' | |
| import { fetchDataOnLocationMatch } from '../shared/lib/fetch-data.js' | |
| import Root from './Root.jsx' | |
| import routes from '../shared/routes.jsx' | |
| import { AppContainer } from 'react-hot-loader' | |
| import { observable, computed, autorun } from 'mobx' |
I'd got rid of action types and I'd have only actions (action creators). No strings, the function (reference) is used later for comparisons.
export const addTodo = (id, title) => ({ id, title });
export const removeTodo = id => ({ id });
actions({ addTodo, removeTodo }); // Connect it to actions.addTodo & actions.removeTodo.That's it. They define what your app can do.