Mustache can be used for HTML, config files, source code - anything. It works by expanding tags in a template using values provided in a hash or object.
We call it “logic-less” because there are no if statements, else clauses, or for loops. Instead there are only tags. Some tags are replaced with a value, some nothing, and others a series of values.
Use scale transforms when animating clips. You can prevent the children from being stretched and skewed during the animation by counter-scaling them.
[…]
In this post we’re going to look over what’s involved if you want performant clip animations. If you want to see a demo, check out the Sample UI Elements GitHub repo.
This is a fascinating and thorough dive into scrolling, and should be required reading for anyone writing JavaScript today:
Today, scrolling is still the most fundamental interaction on the web, and perhaps the most misunderstood. For instance, do you know the difference between the following scenarios?
- User scrolls with two fingers on a touch pad
- User scrolls with one finger on a touch screen
- User scrolls with a mouse wheel on a physical mouse
- User clicks the sidebar and drags it up and down
- User presses up, down, PageUp, PageDown, or spacebar keys on a keyboard
If you ask the average web user (or even the average web developer!) they might tell you that these interactions are all equivalent. The truth is far more interesting.
We’ve all been there. You’ve got an element you want to be able to collapse and expand smoothly using CSS transitions, but its expanded size needs to be content-dependent. You’ve set
transition: height 0.2s ease-out. You’ve created acollapsedCSS class that appliesheight: 0. You try it out, and… the height doesn’t transition. It snaps between the two sizes as iftransitionhad never been set. After some fiddling, you figure out that this problem only happens when the height starts out or ends up asauto. Percentages, pixel values, any absolute units work as expected. But all of those require hard coding a specific height beforehand, rather than allowing it to naturally result from the size of the element content.[…]
If you were hoping I had a magical, complete solution to this problem, I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides. There are, however, multiple workarounds that each come with a different set of advantages and disadvantages, and in most use cases at least one of them will get the job done in an acceptable manner. I’ll outline the major ones, and list out their ups and downs so you can hopefully pick the best one for your situation.
[…]
Technique 1:
max-heightIf you web search this problem, the
max-heightapproach will probably be mentioned in all of the first five to ten results. It’s actually pretty unideal, but I thought it was worth including here for the sake of comparison.It works like this: CSS values can only be transitioned to and from fixed unit values. But imagine we have an element whose
heightis set toauto, but whosemax-heightis set to a fixed value; say,1000px. We can’t transitionheight, but we can transitionmax-height, since it has an explicit value. At any given moment, the actual height of the element will be the maximum of theheightand themax-height. So as long asmax-height’s value is greater than whatautocomes out to, we can just transitionmax-heightand achieve a version of the desired effect.[…]
Technique 2:
transform: scaleY()[…]
Implementation works like this: we set a
transitionfor the element’stransformproperty, then toggle betweentransform: scaleY(1)andtransform: scaleY(0). These mean, respectively, “render this element at the same scale (on the y axis) that it starts out at” and “render this element at a scale of 0 (on the y axis)”. Transitioning between these two states will neatly “squish” the element to and from its natural, content-based size.Technique 3: JavaScript
Managing a CSS transition in CSS would be ideal, but as we’re learning, sometimes it just isn’t entirely possible.
If you absolutely have to have smoothly collapsing sections, whose expanded size is completely driven by their content, and which other elements on the page will flow around as they transition, you can achieve that with some JavaScript.
The basic strategy is to manually do what the browser refuses to: calculate the full size of the element’s contents, then CSS transition the element to that explicit pixel size.
Web developers should be aware that users often have a lot of tabs open in the background and it can have a serious effect on power usage and battery life. Work in the background should be kept to a minimum unless it’s absolutely necessary to provide a particular user experience. The Page visibility API should be used to detect when page is the backgrounded and suspend all unnecessary work like visual updates.
var doVisualUpdates = true;
document.addEventListener('visibilitychange', function(){
doVisualUpdates = !document.hidden;
});
function update() {
if (!doVisualUpdates) {
return;
}
doStuff();
}
The easiest way to describe
hyperHTMLis through an example.
// this is React's first tick example
// https://facebook.github.io/react/docs/state-and-lifecycle.html
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('root')
);
}
setInterval(tick, 1000);
// this is hyperHTML
function tick(render) {
render`
<div>
<h1>Hello, world!</h1>
<h2>It is ${new Date().toLocaleTimeString()}.</h2>
</div>
`;
}
setInterval(tick, 1000,
hyperHTML.bind(document.getElementById('root'))
);
Features
- Zero dependencies and it fits in less than 2KB (minzipped)
- Uses directly native DOM instead of inventing new syntax/APIs, DOM diffing, or virtual DOM
- Designed for template literals, a templating feature built in to JS
- Compatible with vanilla DOM elements and vanilla JS data structures
*- Also compatible with Babel transpiled output, hence suitable for every browser you can think of
*actually, this is just a 100% vanilla JS utility, that’s why is most likely the fastest and also the smallest. I also feel like I’m writing Assembly these days … anyway …
Opinionated but configurable ESLint wrapper with lots of goodies included. Enforces strict and readable code. Never discuss code style on a pull request again! No decision-making. No
.eslintrcor.jshintrcto manage. It just works![…]
Highlights
- Beautiful output.
- Zero-config, but configurable when needed.
- Enforces readable code, because you read more code than you write.
- No need to specify file paths to lint as it lints all JS files except for commonly ignored paths.
- Config overrides per files/globs. (ESLint doesn’t support this)
- Includes many useful ESLint plugins, like
unicorn,import,ava, and more.- Caches results between runs for much better performance.
- Super simple to add XO to a project with
$ xo --init.- Fix many issues automagically with
$ xo --fix.- Open all files with errors at the correct line in your editor with
$ xo --open.- Specify indent and semicolon preferences easily without messing with the rule config.
- Great editor plugins.
When a browser receives the HTML response for a page from the server, there are a lot of steps to be taken before pixels are drawn on the screen. This sequence the browsers needs to run through for the initial paint of the page is called the “Critical Rendering Path”.
Knowledge of the CRP is incredibly useful for understanding how a site’s performance can be improved. There are 6 stages to the CRP -
- Constructing the DOM Tree
- Constructing the CSSOM Tree
- Running JavaScript
- Creating the Render Tree
- Generating the Layout
- Painting