Arden de Raaij aderaaij

Plain JavaScript objects are better than classes when they can be used, and many popular modern frameworks have adopted their use.

Consider that in React a component can be created as either a class or as an object.

// using a class
class Welcome extends React.Component {
  render() {
 Hello, {this.props.name}

Sass OO Mixins: OOCSS without the HTML clutter

Less HTML clutter (caused by all those fragmented class names).

<button class="btn btn-primary btn-large btn-outline">Buy!</button>

Descriptive classes (or no classes at all) in the HTML results in cleaner and easier to read HTML.

Buy!

Stuff I wish I'd known sooner about service workers

I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.

I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.

Use Canary for development instead of Chrome stable

~~Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.~~

Should be work with 0.18

Destructuring(or pattern matching) is a way used to extract data from a data structure(tuple, list, record) that mirros the construction. Compare to other languages, Elm support much less destructuring but let's see what it got !

Tuple

myTuple = ("A", "B", "C")
myNestedTuple = ("A", "B", "C", ("X", "Y", "Z"))

Web Performance

High Performance Web Sites: Essential Knowledge for Front-End Engineers
High Performance JavaScript (Build Faster Web Application Interfaces)
Even Faster Web Sites: Performance Best Practices for Web Developers
Designing for Performance: Weighing Aesthetics and Speed

Web Design

Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement (2nd Edition) (Voices That Matter)

Below is the list of modern JS frameworks and almost frameworks – React, Vue, Angular, Ember and others.

All files were downloaded from https://cdnjs.com and named accordingly. Output from ls command is stripped out (irrelevant stuff)

As-is (minified)

$ ls -lhS
566K Jan 4 22:03 angular2.min.js

How to easily generate low quality image placeholders (lqip) in WordPress

I have made this function using the WP_Image_Editor class and I have filtered through the "wp_generate_attachment_metadata" hook. You can modify the "theme" namespace into function names with your theme name or in anyway you like.

Applying the filter directly to wp_generate_attachment_metadata the image placeholders are auto added into WordPress metadata, so when your add/modify/delete an image (or regenerate it via a plugin), it accomplishes to modify also to the image placeholders.

The use of the native theme support can prevent the generation of lqip or target specific image sizes to generate.

It contains an hook filter lqip_quality to modify the quality without have to modify the function.

	<ion-toolbar>
	<ion-segment [(ngModel)]="selectedSegment" (ionChange)="onSegmentChanged($event)">
	<ion-segment-button value="first">
	First
	</ion-segment-button>
	<ion-segment-button value="second">
	Second
	</ion-segment-button>
	<ion-segment-button value="third">
	Third

	:root {
	--ease-in-quad: cubic-bezier(.55, .085, .68, .53);
	--ease-in-cubic: cubic-bezier(.550, .055, .675, .19);
	--ease-in-quart: cubic-bezier(.895, .03, .685, .22);
	--ease-in-quint: cubic-bezier(.755, .05, .855, .06);
	--ease-in-expo: cubic-bezier(.95, .05, .795, .035);
	--ease-in-circ: cubic-bezier(.6, .04, .98, .335);

	--ease-out-quad: cubic-bezier(.25, .46, .45, .94);
	--ease-out-cubic: cubic-bezier(.215, .61, .355, 1);

	new Swipe(document.getElementById("gallery"), function(event, direction) {
	event.preventDefault();

	switch (direction) {
	case "up":
	// Handle Swipe Up
	break;
	case "down":
	// Handle Swipe Down
	break;