A list of CLI generators, starter kits / boilerplates and toolkits to kick start your Next.js apps.
| /*eslint-disable no-alert */ | |
| import React from "react" | |
| import ReactDOM from "react-dom" | |
| import PropTypes from "prop-types" | |
| class Form extends React.Component { | |
| static childContextTypes = { | |
| form: PropTypes.shape({ | |
| submit: PropTypes.func.isRequired, | |
| inputChange: PropTypes.func.isRequired, |
Disclaimer: This piece is written anonymously. The names of a few particular companies are mentioned, but as common examples only.
This is a short write-up on things that I wish I'd known and considered before joining a private company (aka startup, aka unicorn in some cases). I'm not trying to make the case that you should never join a private company, but the power imbalance between founder and employee is extreme, and that potential candidates would
| // First download node, create new folder | |
| // Cd into new folder, npm and git init | |
| // Create heroku app | |
| heroku create | |
| // install babel cli (to do compiling), babel presets (to compile the right features), express (web server) | |
| npm install babel-cli babel-presets-es2015 express | |
| // Create file .babelrs and add json |
FWIW: I (@rondy) am not the creator of the content shared here, which is an excerpt from Edmond Lau's book. I simply copied and pasted it from another location and saved it as a personal note, before it gained popularity on news.ycombinator.com. Unfortunately, I cannot recall the exact origin of the original source, nor was I able to find the author's name, so I am can't provide the appropriate credits.
Recently CSS has got a lot of negativity. But I would like to defend it and show, that with good naming convention CSS works pretty well.
My 3 developers team has just developed React.js application with 7668 lines of CSS (and just 2 !important).
During one year of development we had 0 issues with CSS. No refactoring typos, no style leaks, no performance problems, possibly, it is the most stable part of our application.
Here are main principles we use to write CSS for modern (IE11+) browsers:
| // connect() is a function that injects Redux-related props into your component. | |
| // You can inject data and callbacks that change that data by dispatching actions. | |
| function connect(mapStateToProps, mapDispatchToProps) { | |
| // It lets us inject component as the last step so people can use it as a decorator. | |
| // Generally you don't need to worry about it. | |
| return function (WrappedComponent) { | |
| // It returns a component | |
| return class extends React.Component { | |
| render() { | |
| return ( |
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent| /* bling.js */ | |
| window.$ = document.querySelectorAll.bind(document); | |
| Node.prototype.on = window.on = function (name, fn) { | |
| this.addEventListener(name, fn); | |
| }; | |
| NodeList.prototype.__proto__ = Array.prototype; |
##Setup your server (this would ideally be done with automated provisioning)
npm install -g forever##Install flightplan
npm install -g flightplannpm install flightplan --save-dev