const compose = (...fns) =>
fns.reduceRight((prevFn, nextFn) =>
(...args) => nextFn(prevFn(...args)),
value => value
);
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:
- SUIT CSS naming conventions + SUIT CSS design principles;
- PostCSS + CSSNext. Future CSS syntax like variables, nesting, and autoprefixer are good enough;
- Flexbox is awesome. No need for grid framework;
- Normalize.css, base styles and variables are solid foundation for all components;
It's now here, in The Programmer's Compendium. The content is the same as before, but being part of the compendium means that it's actively maintained.
@kangax created a new interesting quiz, this time devoted to ES6 (aka ES2015). I found this quiz very interesting and quite hard (made myself 3 mistakes on first pass).
Here we go with the explanations:
(function(x, f = () => x) {
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
Why would you want to do this? Because you often don't need more. It's nice to not have to think about your "router" as this big special thing.
Instead, with this approch, your app's current pathname
is just another piece of state, just like anything else.
This also means that when doing server-side rendering of a redux app, you can just do:
var app = require('your/redux/app')
var React = require('react')
var acorn = require('acorn'); // parser | |
var esrecurse = require('esrecurse'); // walker | |
var t = require('ast-types').builders; // ast types | |
var escodegen = require('escodegen'); // generator | |
/* parse -> walk -> types -> generate */ | |
var ast = acorn.parse('var x = 23 * 576;'); // code -> ast | |
// traverse ast |
// Run this in the F12 javascript console in chrome | |
// if a redirect happens, the page will pause | |
// this helps because chrome's network tab's | |
// "preserve log" seems to technically preserve the log | |
// but you can't actually LOOK at it... | |
// also the "replay xhr" feature does not work after reload | |
// even if you "preserve log". | |
window.addEventListener("beforeunload", function() { debugger; }, false) |
* { | |
font-size: 12pt; | |
font-family: monospace; | |
font-weight: normal; | |
font-style: normal; | |
text-decoration: none; | |
color: black; | |
cursor: default; | |
} |