What follows is a pretty shameless abuse of one of my favorite ES6 features, default parameters. They're a simple idea that other languages have enjoyed for decades, and I am all too happy to see JavaScript join the party.
const logValue = (object = {}) => {
console.log(object);
};
logValue(); // logs: {}
| diff --git a/package.json b/package.json | |
| index 8a5e292..c85b9ea 100644 | |
| --- a/package.json | |
| +++ b/package.json | |
| @@ -4,4 +4,5 @@ | |
| "scripts": { | |
| "build": "webpack --config webpack.config.js --mode production", | |
| + "build:analyze": "webpack --config webpack.config.js --mode production --profile --json > /tmp/webpack-stats.json; webpack-bundle-analyzer /tmp/webpack-stats.json", | |
| "lint": "eslint --ext .js --ext .jsx . && echo \"No lint errors!\"", | |
| "prettier": "prettier --single-quote --trailing-comma es5 '{src,test}/**/*.js' --write", |
This is a design document for a minimalist React application architecture. Anecdotally, this design is proving to work well for smaller-to-medium scale projects, but it has not been proven to work for large-scale projects because it has not been tested against those yet.
This design is modeled around the official Intro To React guide put out by the React team. In fact, it does not diverge in any significant way from that guide; it simply adds a few explicit constraints to promote simpler implementations.
Examples of this architecture in use:
This is not meant to be a comprehensive guide to testing, but rather a high-level introduction. It is meant to help you become conversant in unit testing, not a master. That will come later!
Case Study: rekapi-timeline's computeHighlightedKeyframe and computeDescaledPixelPosition functions:
computeHighlightedKeyframe:
computeDescaledPixelPosition
| <?php | |
| header('Content-type: text/json'); | |
| header('Access-Control-Allow-Origin: *'); | |
| $url = 'https://newsapi.org/v2/top-headlines?' | |
| . $_SERVER['QUERY_STRING'] | |
| . '&apiKey=[YOUR API KEY GOES HERE]'; | |
| $curl = curl_init(); |
CompSci degrees cost a lot of money, take a lot of time, and aren't a viable option for a lot of folks. Luckily, much of what you'll learn in a proper Computer Science program can be self-taught online for free. This gist is a roundup of some of the most helpful resources I've found.
I'm not pursuing a deep, academic comprehension of CS concepts — my goal is to become respectably conversant about the most prevalent and relevant subjects in the field.
| const fetchJson = (function () { | |
| localStorage.cachedFetchResponses = localStorage.cachedFetchResponses || '{}'; | |
| let cache = localStorage.cachedFetchResponses; | |
| const setCachedData = (key, data) => { | |
| const parsedCache = JSON.parse(cache); | |
| parsedCache[key] = data; | |
| try { |
| <div id="app"> | |
| { | |
| "a": 1, | |
| "b": 2, | |
| "c": { | |
| "d": 3, | |
| "e": { | |
| "f": 4, | |
| "g": [ | |
| 5, |
| # Your init script | |
| # | |
| # Atom will evaluate this file each time a new window is opened. It is run | |
| # after packages are loaded/activated and after the previous editor state | |
| # has been restored. | |
| # | |
| # An example hack to log to the console when each text editor is saved. | |
| # | |
| # atom.workspace.observeTextEditors (editor) -> | |
| # editor.onDidSave -> |