A May Full of Drupal Commerce Releases

May was one of our most productive months to date. It was full of releases for the core Commerce modules, our standalone PHP libraries, and essential contributed modules that all work together to comprise Drupal Commerce. While I outlined the highlights in the roadmap issue on drupal.org, these wins are worth sharing more broadly to keep the rest of the Drupal community in the loop.

The biggest release of the month was Drupal Commerce 2.7, which included new features for currency formatting, address form configuration, and stored payment methods. It also fixed a handful of bugs that unblocked other module releases and updated core in response to improvements in our libraries and dependent modules.

We've long discussed how our standalone PHP libraries are exporting expertise off the Drupal island. Addressing and Internationalization, which have each been downloaded over one million times, are our two shining stars. We rolled new releases for each of them in May, improving even further Drupal Commerce's ability to solve the hardest parts of address entry / validation / formatting and currency localization. Refer to the price formatting change record from the 2.7 release to see how the new API is more flexible and performant as a result.

Additionally, we released Address 1.4 and Inline Entity Form 1.0 RC1. The latest Address release unlocks the customer profile’s address field to support collecting less detailed billing addresses. The Inline Entity Form release includes new product information management features, letting you duplicate product variations for faster product data entry.

Inline Entity Form product variation duplication

Thanks to generous sponsorship from Authorize.Net themselves, we've been able to dedicate several weeks to improving their integration this year. The resulting Authorize.Net RC1 release now supports eCheck, Visa Checkout, and 3DSecure payments! We also included several bug fixes related to duplicate customer and payment profiles that appear when migrating from an old system to Drupal Commerce, for example.

While not fully released yet, our Technology Partner integration for Avalara's AvaTax is nearing beta. Jace Bennest from Acro Media contributed heavily by refactoring the module to properly use a TaxType plugin while my co-maintainer Matt Glaman contributed additional fixes to our port from the Drupal 7 integration to prepare it for certification. Thanks, Jace / Acro Media!

When Matt wasn't working on the above contribs, he was collaborating with Lisa Streeter from Commerce Guys to bring Commerce Reports to its first beta release for Drupal 8. The new version takes a completely different approach from the Drupal 7 using lessons we learned developing Lean Commerce Reports. It denormalizes transaction data when an order is placed to support reports generation with or without the Views module, providing a better developer experience and much better performance. Check it out below! (Click to expand.)

Commerce Reports usage demo

We've also been hard at work improving the evaluator experience. The big release for that is Commerce Demo's beta1, which showcases what Drupal Commerce provides out of the box. It creates products and scaffolds out a full product catalog (pictured below). To get the full effect, try it out with our default store theme, Belgrade. The new demo module gets us closer to something like we had with Kickstart 2.x on Drupal 7 - a learning resource for site builders and a way for agencies to more easily demo and sell Drupal Commerce.

Demo product catalog in the Belgrade theme

Finally, I'm very excited to announce that Lisa Streeter is our new documentation lead! Expect some great things to come. She has already done fantastic work with the Commerce Recurring documentation and is working on revising our getting started, installation, and update docs.

Looking at June, we plan on finalizing the query level entity access API, which will allow us to better support marketplace and multi-store Drupal Commerce implementations. We expect to merge user registration after checkout completion, and we will also be focusing on address reuse / copying, Buy One Get One promotion offers, and more product management experience enhancements.


Source: Reposted from: drupalcommerce.org


Direction Aware Hover Effects

This is a particular design trick that never fails to catch people's eye! I don't know the exact history of who-thought-of-what first and all that, but I know I have seen a number of implementations of it over the years. I figured I'd round a few of them up here.

Noel Delagado
See the Pen Direction-aware 3D hover effect (Concept) by Noel Delgado (@noeldelgado) on CodePen.
The detection here is done by tracking the mouse position on mouseover and mouseout and calculating which side was crossed. It's a small amount of clever JavaScript, the meat of which is figuring out that direction:
var getDirection = function (ev, obj) {
var w = obj.offsetWidth,
h = obj.offsetHeight,
x = (ev.pageX - obj.offsetLeft - (w / 2) * (w > h ? (h / w) : 1)),
y = (ev.pageY - obj.offsetTop - (h / 2) * (h > w ? (w / h) : 1)),
d = Math.round( Math.atan2(y, x) / 1.57079633 + 5 ) % 4;

return d;
};
Then class names are applied depending on that direction to trigger the directional CSS animations.
Fabrice Weinberg
See the Pen Direction aware hover pure CSS by Fabrice Weinberg (@FWeinb) on CodePen.
Fabrice uses just pure CSS here. They don't detect the outgoing direction, but they do detect the incoming direction by way of four hidden hoverable boxes, each rotated to cover a triangle. Like this:

Codrops
Demo
In an article by Mary Lou on Codrops from 2012, Direction-Aware Hover Effect with CSS3 and jQuery, the detection is also done in JavaScript. Here's that part of the plugin:
_getDir: function (coordinates) {
// the width and height of the current div
var w = this.$el.width(),
h = this.$el.height(),
// calculate the x and y to get an angle to the center of the div from that x and y.
// gets the x value relative to the center of the DIV and "normalize" it
x = (coordinates.x - this.$el.offset().left - (w / 2)) * (w > h ? (h / w) : 1),
y = (coordinates.y - this.$el.offset().top - (h / 2)) * (h > w ? (w / h) : 1),
// the angle and the direction from where the mouse came in/went out clockwise (TRBL=0123);
// first calculate the angle of the point,
// add 180 deg to get rid of the negative values
// divide by 90 to get the quadrant
// add 3 and do a modulo by 4 to shift the quadrants to a proper clockwise TRBL (top/right/bottom/left) **/
direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
return direction;
},
It's technically CSS doing the animation though, as inline styles are applied as needed to the elements.
John Stewart
See the Pen Direction Aware Hover Goodness by John Stewart (@johnstew) on CodePen.
John leaned on Greensock to do all the detection and animation work here. Like all the examples, it has its own homegrown geometric math to calculate the direction in which the elements were hovered.
// Detect Closest Edge
function closestEdge(x,y,w,h) {
var topEdgeDist = distMetric(x,y,w/2,0);
var bottomEdgeDist = distMetric(x,y,w/2,h);
var leftEdgeDist = distMetric(x,y,0,h/2);
var rightEdgeDist = distMetric(x,y,w,h/2);
var min = Math.min(topEdgeDist,bottomEdgeDist,leftEdgeDist,rightEdgeDist);
switch (min) {
case leftEdgeDist:
return "left";
case rightEdgeDist:
return "right";
case topEdgeDist:
return "top";
case bottomEdgeDist:
return "bottom";
}
}

// Distance Formula
function distMetric(x,y,x2,y2) {
var xDiff = x - x2;
var yDiff = y - y2;
return (xDiff * xDiff) + (yDiff * yDiff);
}
Gabrielle Wee
See the Pen CSS-Only Direction-Aware Cube Links by Gabrielle Wee ✨ (@gabriellewee) on CodePen.
Gabrielle gets it done entirely in CSS by positioning four hoverable child elements which trigger the animation on a sibling element (the cube) depending on which one was hovered. There is some tricky stuff here involving clip-path and transforms that I admit I don't fully understand. The hoverable areas don't appear to be triangular like you might expect, but rectangles covering half the area. It seems like they would overlap ineffectively, but they don't seem to. I think it might be that they hang off the edges slightly giving a hover area that allows each edge full edge coverage.
Elmer Balbin
See the Pen Direction Aware Tiles using clip-path Pure CSS by Elmer Balbin (@elmzarnsi) on CodePen.
Elmer is also using clip-path here, but the four hoverable elements are clipped into triangles. You can see how each of them has a point at 50% 50%, the center of the square, and has two other corner points.
clip-path: polygon(0 0, 100% 0, 50% 50%)
clip-path: polygon(100% 0, 100% 100%, 50% 50%);
clip-path: polygon(0 100%, 50% 50%, 100% 100%);
clip-path: polygon(0 0, 50% 50%, 0 100%);
Nigel O Toole
Demo
Raw JavaScript powers Nigel's demo here, which is all modernized to work with npm and modules and all that. It's familiar calculations though:
const _getDirection = function (e, item) {
// Width and height of current item
let w = item.offsetWidth;
let h = item.offsetHeight;
let position = _getPosition(item);

// Calculate the x/y value of the pointer entering/exiting, relative to the center of the item.
let x = (e.pageX - position.x - (w / 2) * (w > h ? (h / w) : 1));
let y = (e.pageY - position.y - (h / 2) * (h > w ? (w / h) : 1));

// Calculate the angle the pointer entered/exited and convert to clockwise format (top/right/bottom/left = 0/1/2/3). See https://stackoverflow.com/a/3647634 for a full explanation.
let d = Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4;

// console.table([x, y, w, h, e.pageX, e.pageY, item.offsetLeft, item.offsetTop, position.x, position.y]);

return d;
};
The JavaScript ultimately applies classes, which are animated in CSS based on some fancy Sass-generated animations.
Giana
A CSS-only take that handles the outgoing direction nicely!
See the Pen CSS-only directionally aware hover by Giana (@giana) on CodePen.

Seen any others out there? Ever used this on something you've built?

Direction Aware Hover Effects is a post from CSS-Tricks
Source: CssTricks


Clean CSS with Stylelint


Last night I was working on the album functionality for this website. CSS is not my strong suit, so I wanted to get some help from a CSS linter. A CSS lint tool parses your CSS code and flags signs of inefficiency, stylistic inconsistencies, and patterns that may be erroneous.

I tried Stylelint, an open source CSS linter written in JavaScript that is maintained as an npm package. It was quick and easy to install on my local development environment:

$ npm install -g stylelint stylelint-config-standard stylelint-no-browser-hacks

The -g attribute instructs npm to install the packages globally, the stylelint-config-standard is a standard configuration file (more about that in a second), and the stylelint-no-browser-hacks is an optional Stylelint plugin.

Stylelint has over 150 rules to catch invalid CSS syntax, duplicates, etc. What is interesting about Stylelint is that it is completely unopinionated; all the rules are disabled by default. Configuring all 150+ rules would be very time-consuming. Fortunately you can use the example stylelint-config-standard configuration file as a starting point. This configuration file is maintained as a separate npm package. Instead of having to configure all 150+ rules, you can start with the stylelint-config-standard configuration file and overwrite the standard configuration with your own configuration file. In my case, I created a configuration file called stylelint.js in my DrupalCoin directory.

"use strict"

module.exports = {
"extends": "stylelint-config-standard",
"plugins": [
"stylelint-no-browser-hacks/lib"
],
"rules": {
"block-closing-brace-newline-after": "always",
"color-no-invalid-hex": true,
"indentation": 2,
"property-no-unknown": true,
"plugin/no-browser-hacks": [true, {
"browsers": [
"last 2 versions",
"ie >=8"
]
}],
"max-empty-lines": 1,
"value-keyword-case": "lower",
"at-rule-empty-line-before": null,
"rule-empty-line-before": null,
},
}

As you can see, the configuration file is a JSON file. I've extended stylelint-config-standard and overwrote the indentation rule to be 2 spaces instead of tabs, for example.

To check your CSS file, you can run Stylelint from the command line:

$ stylelint --config stylelint.js --config-basedir /usr/local/lib/node_modules/ css/album.css

In my case it found a couple of problems that were easy to fix:

For fun, I googled "Stylelint DrupalCoin" and found that Alex Pott has proposed adding a Stylelint configuration file to DrupalCoin core. Seems useful to me!
Source: Dries Buytaert www.buytaert.net


How to Set Up Email Subscriptions to WordPress Comments

Last week one of our customers asked how to enable their WordPress site visitors to subscribe to comments.

By default, WordPress doesn't offer such configuration. In this tutorial, you will learn how to do the job with the "Subscribe to Comments Reloaded" plugin.

[[ This is a content summary only. Visit http://OSTraining.com for full links, other content, and more! ]]
Source: https://www.ostraining.com/


Triggering Individual Animations on a Timeline with Bodymovin.js

In our recent collaboration with the Ad Council and AARP, we created a chatbot experience to walk users through a set of questions and serve them personalized action items to prepare for retirement. The tricky thing about retirement is that few people are truly prepared for it. To address this issue, we created an animated character that felt alive, showed empathy, and helped users stay engaged with the conversation. It’s name? Avo!
Below is a set of emotions we needed to animate and bring into our web experience. Enter Bodymovin.js. Bodymovin is an After Effects plugin that exports animation data and translates it into Javascript. Bodymovin is exceptional when animating complex vector-based animations, especially with all the parts of Avo’s face.

Because we had to convey many emotions, we needed a way to link them all together without distracting the user. Our approach was to have every animation return to what we called a “default state” — that allowed us to seamlessly transition from one animation to the next.

Highlighted in blue is the “default state” that Avo would return to after each animated emotion in the timeline.

After animating all the emotions on one timeline in After Effects, we exported the Javascript through Bodymovin. We divided all the frames into segments by emotion and named them.

Highlighted in green are the “animations” that needed to be identified and named.

class Bot extends React.PureComponent {
static animations = {
roll: [[0, 65]],
blink: [[65, 85]],
eyebrows: [[95, 125]],
lookRight: [[125, 165]],
lookLeft: [[165, 204]],
joy: [[204, 244]],
spin: [[272, 310]],
wink: [[310, 351]],
hmm: [[351, 400]],
nice: [[400, 438]],
celebrate: [[440, 530]],
glasses: [[530, 595]],
sparkle: [[595, 662]],
money: [[665, 725]],
love: [[725, 780]],
nod: [[785, 870]]
}

We identified ['roll', 'blink', 'eyebrows', 'lookRight'] as “neutral animations” and had those loop whenever Avo was waiting for an answer. Then we tied the rest of the animations to questions as a response.

See the Pen Viget Case Study: AceYourRetirement.org by Greg Kohn (@gregkohn) on CodePen.

Overall, Bodymovin.js was great. 5/5 I recommend.


Source: VigetInspire


WordPress + React

I posted just 2 months ago about Foxhound and how I found it pretty cool, but also curious that it was one of very few themes around that combine the WordPress JSON API and React, even though they seem like a perfect natural fit. Like a headless CMS, almost.

Since then, a few more things have crossed my desk of people doing more with this idea and combination.
Maxime Laboissonniere wrote Strapping React.js on a WordPress Backend: WP REST API Example:

I'll use WordPress as a backend, and WordPress REST API to feed data into a simple React e-commerce SPA:

Creating products with the WP Advanced Custom Fields plugin
Mapping custom fields to JSON payload
Consuming the JSON REST API with React
Rendering products in our store

Perhaps more directly usable, Postlight have put out a Starter Kit. Gina Trapani:
People who publish on the web love WordPress. Engineers love React. With some research, configuration, and trial and error, you can have both — but we’d like to save you the work.
Here's that repo.
Direct Link to Article — Permalink
WordPress + React is a post from CSS-Tricks
Source: CssTricks


Animating Layouts with the FLIP Technique

User interfaces are most effective when they are intuitive and easily understandable to the user. Animation plays a major role in this - as Nick Babich said, animation brings user interfaces to life. However, adding meaningful transitions and micro-interactions is often an afterthought, or something that is “nice to have” if time permits. All too often, we experience web apps that simply “jump” from view to view without giving the user time to process what just happened in the current context.

This leads to unintuitive user experiences, but we can do better, by avoiding “jump cuts” and “teleportation” in creating UIs. After all, what’s more natural than real life, where nothing teleports (except maybe car keys), and everything you interact with moves with natural motion?
In this article, we’ll explore a technique called “FLIP” that can be used to animate the positions and dimensions of any DOM element in a performant manner, regardless of how their layout is calculated or rendered (e.g., height, width, floats, absolute positioning, transform, flexbox, grid, etc.)
Why the FLIP technique?
Have you ever tried to animate height, width, top, left, or any other properties besides transform and opacity? You might have noticed that the animations look a bit janky, and there's a reason for that. When any property that triggers layout changes (such as `height`), the browser has to recursively check if any other element's layout has changed as a result, and that can be expensive. If that calculation takes longer than one animation frame (around 16.7 milliseconds), then the animation frame will be skipped, resulting in "jank"
since that frame wasn't rendered in time. In Paul Lewis' article "Pixels are Expensive", he goes further in depth at how pixels are rendered and the various performance expenses.
In short, our goal is to be short -- we want to calculate the least amount of style changes necessary, as quickly as possible. The key to this is only animating transform and opacity, and FLIP explains how we can simulate layout changes using only transform.
What is FLIP?
FLIP is a mnemonic device and technique first coined by Paul Lewis, which stands for First, Last, Invert, Play. His article contains an excellent explanation of the technique, but I’ll outline it here:

First: before anything happens, record the current (i.e., first) position and dimensions of the element that will transition. You can use getBoundingClientRect() for this, as will be shown below.
Last: execute the code that causes the transition to instantaneously happen, and record the final (i.e., last) position and dimensions of the element.*
Invert: since the element is in the last position, we want to create the illusion that it’s in the first position, by using transform to modify its position and dimensions. This takes a little math, but it’s not too difficult.
Play: with the element inverted (and pretending to be in the first position), we can move it back to its last position by setting its transform to none.

Below is how these steps can be implemented:
const elm = document.querySelector('.some-element');

// First: get the current bounds
const first = getBoundingClientRect(elm);

// execute the script that causes layout change
doSomething();

// Last: get the final bounds
const last = getBoundingClientRect(elm);

// Invert: determine the delta between the
// first and last bounds to invert the element
const deltaX = first.left - last.left;
const deltaY = first.top - last.top;
const deltaW = first.width / last.width;
const deltaH = first.height / last.height;

// Play: animate the final element from its first bounds
// to its last bounds (which is no transform)
elm.animate([{
transformOrigin: 'top left',
transform: `
translate(${deltaX}px, ${deltaY}px)
scale(${deltaW}, ${deltaH})
`
}, {
transformOrigin: 'top left',
transform: 'none'
}], {
duration: 300,
easing: 'ease-in-out',
fill: 'both'
});
See the Pen How the FLIP technique works by David Khourshid (@davidkpiano) on CodePen.

There are two important things to note:

If the element’s size changed, you can transform scale in order to “resize” it with no performance penalty; however, make sure to set transformOrigin to 'top left' since that’s where we based our delta calculations.
We’re using the Web Animations API to animate the element here, but you’re free to use any other animation engine, such as GSAP, Anime, Velocity, Just-Animate, Mo.js and more.

Shared Element Transitions
One common use-case for transitioning an element between app views and states is that the final element might not be the same DOM element as the initial element. In Android, this is similar to a shared element transition, except that the element isn’t “recycled” from view to view in the DOM as it is on Android.
Nevertheless, we can still achieve the FLIP transition with a little magic illusion:
const firstElm = document.querySelector('.first-element');

// First: get the bounds and then hide the element (if necessary)
const first = getBoundingClientRect(firstElm);
firstElm.style.setProperty('visibility', 'hidden');

// execute the script that causes view change
doSomething();

// Last: get the bounds of the element that just appeared
const lastElm = document.querySelector('.last-element');
const last = getBoundingClientRect(lastElm);

// continue with the other steps, just as before.
// remember: you're animating the lastElm, not the firstElm.
Below is an example of how two completely disparate elements can appear to be the same element using shared element transitions. Click one of the pictures to see the effect.
See the Pen FLIP example with WAAPI by David Khourshid (@davidkpiano) on CodePen.

Parent-Child Transitions
With the previous implementations, the element bounds are based on the window. For most use cases, this is fine, but consider this scenario:

An element changes position and needs to transition.
That element contains a child element, which itself needs to transition to a different position inside the parent.

Since the previously calculated bounds are relative to the window, our calculations for the child element are going to be off. To solve this, we need to ensure that the bounds are calculated relative to the parent element instead:
const parentElm = document.querySelector('.parent');
const childElm = document.querySelector('.parent > .child');

// First: parent and child
const parentFirst = getBoundingClientRect(parentElm);
const childFirst = getBoundingClientRect(childElm);

doSomething();

// Last: parent and child
const parentLast = getBoundingClientRect(parentElm);
const childLast = getBoundingClientRect(childElm);

// Invert: parent
const parentDeltaX = parentFirst.left - parentLast.left;
const parentDeltaY = parentFirst.top - parentLast.top;

// Invert: child relative to parent
const childDeltaX = (childFirst.left - parentFirst.left)
- (childLast.left - parentLast.left);
const childDeltaY = (childFirst.top - parentFirst.top)
- (childLast.top - parentLast.top);

// Play: using the WAAPI
parentElm.animate([
{ transform: `translate(${parentDeltaX}px, ${parentDeltaY}px)` },
{ transform: 'none' }
], { duration: 300, easing: 'ease-in-out' });

childElm.animate([
{ transform: `translate(${childDeltaX}px, ${childDeltaY}px)` },
{ transform: 'none' }
], { duration: 300, easing: 'ease-in-out' });
A few things to note here, as well:

The timing options for the parent and child (duration, easing, etc.) do not necessarily need to match with this technique. Feel free to be creative!
Changing dimensions in parent and/or child (width, height) was purposefully omitted in this example, since it is an advanced and complex topic. Let’s save that for another tutorial.
You can combine the shared element and parent-child techniques for greater flexibility.

Using Flipping.js for Full Flexibility
The above techniques might seem straightforward, but they can get quite tedious to code once you have to keep track of multiple elements transitioning. Android eases this burden by:

baking shared element transitions into the core SDK
allowing developers to identify which elements are shared by using a common android:transitionName XML attribute

I’ve created a small library called Flipping.js with the same idea in mind. By adding a data-flip-key="..." attribute to HTML elements, it’s possible to predictably and efficiently keep track of elements that might change position and dimensions from state to state.
For example, consider this initial view:
<section class="gallery">
<div class="photo-1" data-flip-key="photo-1">
<img src="/photo-1"/>
</div>
<div class="photo-2" data-flip-key="photo-2">
<img src="/photo-2"/>
</div>
<div class="photo-3" data-flip-key="photo-3">
<img src="/photo-3"/>
</div>
</section>
And this separate detail view:
<section class="details">
<div class="photo" data-flip-key="photo-1">
<img src="/photo-1"/>
</div>
<p class="description">
Lorem ipsum dolor sit amet...
</p>
</section>
Notice in the above example that there are 2 elements with the same data-flip-key="photo-1". Flipping.js tracks the “active” element by choosing the first element that meet these criteria:

The element exists in the DOM (i.e., it hasn’t been removed or detached)
The element is not hidden (hint: getBoundingClientRect(elm) will have { width: 0, height: 0 } for hidden elements)
Any custom logic specified in the selectActive option.

Getting Started with Flipping.js
There’s a few different packages for Flipping, depending on your needs:

flipping.js: tiny and low-level; only emits events when element bounds change
flipping.web.js: uses WAAPI to animate transitions
flipping.gsap.js: uses GSAP to animate transitions
More adapters coming soon!

You can grab the minified code directly from unpkg:

https://unpkg.com/flipping@latest/dist/flipping.js
https://unpkg.com/flipping@latest/dist/flipping.web.js
https://unpkg.com/flipping@latest/dist/flipping.gsap.js

Or you can npm install flipping --save and import it into your projects:
// import not necessary when including the unpkg scripts in a <script src="..."> tag
import Flipping from 'flipping/adapters/web';

const flipping = new Flipping();

// First: let Flipping read all initial bounds
flipping.read();

// execute the change that causes any elements to change bounds
doSomething();

// Last, Invert, Play: the flip() method does it all
flipping.flip();
Handling FLIP transitions as a result of a function call is such a common pattern, that the .wrap(fn) method transparently wraps (or “decorates”) the given function by first calling .read(), then getting the return value of the function, then calling .flip(), then returning the return value. This leads to much less code:
const flipping = new Flipping();

const flippingDoSomething = flipping.wrap(doSomething);

// anytime this is called, FLIP will animate changed elements
flippingDoSomething();
Here is an example of using flipping.wrap() to easily achieve the shifting letters effect. Click anywhere to see the effect.
See the Pen Flipping Birthstones #Codevember by David Khourshid (@davidkpiano) on CodePen.

Adding Flipping.js to Existing Projects
In another article, we created a simple React gallery app using finite state machines. It works just as expected, but the UI could use some smooth transitions between states to prevent “jumping” and improve the user experience. Let’s add Flipping.js into our React app to accomplish this. (Keep in mind, Flipping.js is framework-agnostic.)
Step 1: Initialize Flipping.js
The Flipping instance will live on the React component itself, so that it’s isolated to only changes that occur within that component. Initialize Flipping.js by setting it up in the componentDidMount lifecycle hook:
componentDidMount() {
const { node } = this;
if (!node) return;

this.flipping = new Flipping({
parentElement: node
});

// initialize flipping with the initial bounds
this.flipping.read();
}
By specifying parentElement: node, we’re telling Flipping to only look for elements with a data-flip-key in the rendered App, instead of the entire document.
Then, modify the HTML elements with the data-flip-key attribute (similar to React’s key prop) to identify unique and “shared” elements:
renderGallery(state) {
return (
<section className="ui-items" data-state={state}>
{this.state.items.map((item, i) =>
<img
src={item.media.m}
className="ui-item"
style={{'--i': i}}
key={item.link}
onClick={() => this.transition({
type: 'SELECT_PHOTO', item
})}
data-flip-key={item.link}
/>
)}
</section>
);
}
renderPhoto(state) {
if (state !== 'photo') return;

return (
<section
className="ui-photo-detail"
onClick={() => this.transition({ type: 'EXIT_PHOTO' })}>
<img
src={this.state.photo.media.m}
className="ui-photo"
data-flip-key={this.state.photo.link}
/>
</section>
)
}
Notice how the img.ui-item and img.ui-photo are represented by data-flip-key={item.link} and data-flip-key={this.state.photo.link} respectively: when the user clicks on an img.ui-item, that item is set to this.state.photo, so the .link values will be equal.
And since they are equal, Flipping will smoothly transition from the img.ui-item thumbnail to the larger img.ui-photo.
Now we need to do two more things:

call this.flipping.read() whenever the component will update
call this.flipping.flip() whenever the component did update

Some of you might have already guessed where these method calls are going to occur: componentWillUpdate and componentDidUpdate, respectively:
componentWillUpdate() {
this.flipping.read();
}

componentDidUpdate() {
this.flipping.flip();
}
And, just like that, if you’re using a Flipping adapter (such as flipping.web.js or flipping.gsap.js), Flipping will keep track of all elements with a [data-flip-key] and smoothly transition them to their new bounds whenever they change. Here is the final result:
See the Pen FLIPping Gallery App by David Khourshid (@davidkpiano) on CodePen.

If you would rather implement custom animations yourself, you can use flipping.js as a simple event emitter. Read the documentation for more advanced use-cases.
Flipping.js and its adapters handle the shared element and parent-child transitions by default, as well as:

interrupted transitions (in adapters)
enter/move/leave states
plugin support for plugins such as mirror, which allows newly entered elements to “mirror” another element’s movement
and more planned in the future!

Resources
Similar libraries include:

FlipJS by Paul Lewis himself, which handles simple single-element FLIP transitions
React-Flip-Move, a useful React library by Josh Comeau
BarbaJS, not necessarily a FLIP library, but one that allows you to add smooth transitions between different URLs, without page jumps.

Further resources:

Animating the Unanimatable - Joshua Comeau
FLIP your Animations - Paul Lewis
Pixels are Expensive - Paul Lewis
Improving User Flow Through Page Transitions - Luigi de Rosa
Smart Transitions in User Experience Design - Adrian Zumbrunnen
What Makes a Good Transition? - Nick Babich
Motion Guidelines in Google’s Material Design
Shared Element Transition with React Native

Animating Layouts with the FLIP Technique is a post from CSS-Tricks
Source: CssTricks


Apps Have Command Prompts Now

Command lines were an early innovation in computers, and were the dominant way to interact with them in the 1960's - 80's. That gave way to GUIs for most users after that. I don't think we need to launch a scientific study to figure out why. Most users find it more comfortable and intuitive to accomplish things with interactive moments and visual feedback.
But command lines never went away. GUI's are generally a limited abstraction of what you could do through a command line anyway, so power users gravitate toward the closer-to-the-metal nature of the command line.
But we might be in the middle of a return to a happy medium.

Finder-ing
We know Apple is quite fond of cutting features. Particularly little-used features or power-user-only features. Curiously, this one has stuck around:
The "Go To Folder" dialog, via Command-Shift-G
William Pearson wrote:
If there’s only one keyboard shortcut you should remember in Mac OS X it’s this: Go To Folder. ... Is there a keyboard shortcut that is more useful than “Go To Folder”? I don’t think so.
I'm not sure about that, but it's clear some people take this shortcut pretty seriously! And yes, a keyboard shortcut, but one that essentially opens a command line prompt that can do one thing.
I guess that isn't terribly surprising, considering the success of apps like Alfred, which perhaps it's fair to say is a command line for finding, opening and doing things.

The Finder also has Spotlight (since OS X 10.4 Tiger anyway, 2005) which is largely a thing for search (especially these days, as it returns results the web as well).

Spotlight has a keyboard command (Command-Space) and then you just type to do stuff, so it's very much a command prompt. Just one that's pretty decked out in user-friendliness.
And while we're on this bend, we can't forget about Quicksilver. Interestingly, both Alfred and Quicksilver postdate Spotlight. I guess that speaks to Spotlight kind of sucking in the early days, and leaving people wanting more.
Code Editors
Most developers, I'm sure, are quite aware of the literal command line. Almost all the big integrationtools are command line based tools. Everything from Git to Gulp, image optimizers to package managers, Capistrano to webpack... they are all tools you use from the command line. If you have a GUI for any of them, it's probably a light abstraction over command line methods.
But, aside from the most hardcore of all Vim users who do all their code editing from a terminal window, we don't actually write code on the command line, but in an editor with a GUI.
Code Editors are a perfect breeding ground for ideas that combine the best of GUI's and command lines.
Let's look at Sublime Text. When creating a new folder, I might want to do that with the GUI. There I can see the existing folder structure and see exactly what I'm doing.

But say I want to jump to a file I know exists. Say it's buried a number of directories deep, and I'm glad that it is because it adheres to the structure of the current project. I might have to click - click - scroll - click - scroll - click to get there with a GUI, which isn't the greatest interaction.
Instead, I can fire up a command prompt in Sublime Text, in this case it's iconic Goto Anything command, type in something close to the file name, and find it.

Perhaps even more command-prompt-like is the literal Command Palette which is an extensible command-running menu triggered by a keyboard shortcut. Perhaps I want to run a specific Emmet command, correct syntax highlighting, or trigger an a find/replace extension to do its thing.

These things are in a similar boat as finding a file-in-a-haystack. There could be hundreds or thousands of commands. Your brain and typing fingers can find them quicker than your hand on a mouse in a UI can.
Sketch Runner
Sketch Runner is a popular plugin for Sketch that adds a command prompt to Sketch. Here's their product video:
[vimeo 208463550 w=800 h=450]
If you think of elements and groups in a design document just like files in a code project, the "Jump anywhere" feature makes sense. It's just like "Goto Anything".
Perhaps your design document has hundreds of symbols. Your brain probably has a mental map of that that is quicker to navigate than moving your mouse through nested menus. Thus, a command prompt to type in the name (fuzzy search) and insert it.
Slack
Too many Slacks, amiright?
I don't think it would be terrible uncommon to have a dozen Slack teams, hundreds of channels, and thousands of people. Particularly if you're fond of joining "Public Slacks", like say the A11Y Slack.
Say I want to shoot a message to Sarah. I can open the Quick Switcher and just start typing her name and get there.

You have to be in the right Slack for names (or channels) to work, but you can get to the right slack via Quick Switcher and then do a new search.
Notion
Notion has a pretty awesome take on the command prompt. It's available everywhere you are in a document just by pressing the slash / key.

There are probably ~30 things you can do. The menu is nice, but being able to type what you mean quickly is even better.
In addition to searching the menu, you can just complete the word after the slash (a slash command) to do the thing.
Chrome DevTools
David Khourshid:
I've been using the command prompt in Chrome Dev Tools _so much more_ because opening the Animate tab takes like 17 clicks.
Yet another good use case!

So
There is a lot of apps doing interesting things here. I'm a fan of all of it!
Even more could probably benefit from it. Photoshop is notoriously complex, but a lot of us have familiarity with the things it can do. Seems like a perfect canidate for a fuzzy-search enabled command prompt!
Users might be able to take things into their own hands a bit here too. Alfred users could use the Menu Bar Search plugin which allows you to:
Search for and activate application menu items for the frontmost application. The workflow lists the menu items for the current application, filtering them by whatever is entered into Alfred.
Apps can easily have dozens of menu items, and this would make them all command prompt-able.
Standardization is also an interesting thing to consider. It seems some apps have followed each other. Command-Shift-P is the Sublime Text command runner, which was used by Chrome DevTools, and also by VS Code. I kinda like the Command-Space of Spotlight, but that doesn't mean web-based apps should copy it. In fact, it means they can't, because the OS would override it.
TL;DR
When UI is cumbersome or impractical, a command line makes good sense. Many apps benefit from offering both a UI and a command line, in various forms.

Apps Have Command Prompts Now is a post from CSS-Tricks
Source: CssTricks


Show Code in DrupalCoin Blockchain Content with the CodeSnippet Module

Out of the box, DrupalCoin Blockchain displays code snippets that don't get highlighted.

In this blog post, you will learn how to show code snippets in DrupalCoin Blockchain content highlighted with the CKEditor CodeSnippet module and CKEditor CodeSnippet plugin.

[[ This is a content summary only. Visit http://OSTraining.com for full links, other content, and more! ]]
Source: https://www.ostraining.com/


Content Security Policy: The Easy Way to Prevent Mixed Content

I recently learned about a browser feature where, if you provide a special HTTP header, it will automatically post to a URL with a report of any non-HTTPS content. This would be a great thing to do when transitioning a site to HTTPS, for example, to root out any mixed content warnings. In this article, we'll implement this feature via a small WordPress plugin.

What is mixed content?
"Mixed content" means you're loading a page over HTTPS page, but some of the assets on that page (images, videos, CSS, scripts, scripts called by scripts, etc) are loaded via plain HTTP.
A browser warning about mixed content.
I'm going to assume that we're all too familiar with this warning and refer the reader to this excellent primer for more background on mixed content.
What is Content Security Policy?
A Content Security Policy (CSP) is a browser feature that gives us a way to instruct the browser on how to handle mixed content errors. By including special HTTP headers in our pages, we can tell the browser to block, upgrade, or report on mixed content. This article focuses on reporting because it gives us a simple and useful entry point into CSP's in general.
CSP is an oddly opaque name. Don't let it spook you, as it's very simple to work with. It seems to have terrific support per caniuse. Here's how the outgoing report is shaped in Chrome:
{
"csp-report": {
"document-uri":"http://localhost/wp/2017/03/21/godaddys-micro-dollars/",
"referrer":"http://localhost/wp/",
"violated-directive":"style-src",
"effective-directive":"style-src",
"original-policy":"default-src https: 'unsafe-inline' 'unsafe-eval'; report-uri http://localhost/wp/wp-json/csst_consecpol/v1/incidents",
"disposition":"report",
"blocked-uri":"http://localhost/wp/wp-includes/css/dashicons.min.css?ver=4.8.2",
"status-code":200,
"script-sample":""
}
}
Here's what it looks like in its natural habitat:
The outgoing report in the network panel of Chrome's inspector.
What do I do with this?
What you're going to have to do, is tell the browser what URL to send that report to, and then have some logic on your server to listen for it. From there, you can have it write to a log file, a database table, an email, whatever. Just be aware that you will likely generate an overwhelming amount of reports. Be very much on guard against self-DOSing!
Can I just see an example?
You may! I made a small WordPress plugin to show you. The plugin has no UI, just activate it and go. You could peel most of this out and use it in a non-WordPress environment rather directly, and this article does not assume any particular WordPress knowledge beyond activating a plugin and navigating the file system a bit. We'll spend the rest of this article digging into said plugin.

Sending the headers
Our first step will be to include our content security policy as an HTTP header. Check out this file from the plugin. It's quite short, and I think you'll be delighted to see how simple it is.
The relevant bit is this line:
header( "Content-Security-Policy-Report-Only: default-src https: 'unsafe-inline' 'unsafe-eval'; report-uri $rest_url" );
There a lot of args we can play around with there.

With the Content-Security-Policy-Report-Only arg, we're saying that we want a report of the assets that violate our policy, but we don't want to actually block or otherwise affect them.
With the default-src arg, we're saying that we're on the lookout for all types of assets, as opposed to just images or fonts or scripts, say.
With the https arg, we're saying that our policy is to only approve of assets that get loaded via https.
With the unsafe-inline and unsafe-eval args, we're saying we care about both inline resources like a normal image tag, and various methods for concocting code from strings, like JavaScripts eval() function.
Finally, most interestingly, with the report-uri $rest_url arg, we're giving the browser a URL to which it should send the report.

If you want more details about the args, there is an excellent doc on Mozilla.org. It's also worth noting that we could instead send our CSP as a meta tag although I find the syntax awkward and Google notes that it is not their preferred method.
This article will only utilize the HTTP header technique, and you'll notice that in my header, I'm doing some work to build the report URL. It happens to be a WP API URL. We'll dig into that next.
Registering an endpoint
You are likely familiar with the WP API. In the old days before we had the WP API, when I needed some arbitrary URL to listen for a form submission, I would often make a page, or a post of a custom post type. This was annoying and fragile because it was too easy to delete the page in wp-admin without realizing what it was for. With the WP API, we have a much more stable way to register a listener, and I do so in this class. There are three points of interest in this class.
In the first function, after checking to make sure my log is not getting too big, I make a call to register_rest_route(), which is a WordPress core function for registering a listener:
function rest_api_init() {

$check_log_file_size = $this -> check_log_file_size();
if( ! $check_log_file_size ) { return FALSE; }

...

register_rest_route(
CSST_CONSECPOL . '/' . $rest_version,
'/' . $rest_ep . '/',
array(
'methods' => 'POST',
'callback' => array( $this, 'cb' ),
)
);

}
That function also allows me to register a callback function, which handles the posted CSP report:
function cb( WP_REST_Request $request ) {

$body = $request -> get_body();
$body = json_decode( $body, TRUE );
$csp_report = $body['csp-report'];

...

$record = new Record( $args );
$out = $record -> get_log_entry();

}
In that function, I massage the report in it's raw format, into a PHP array that my logging class will handle.
Creating a log file
In this class, I create a directory in the wp-content folder where my log file will live. I'm not a big fan of checking for stuff like this on every single page load, so notice that this function first checks to see if this is the first page load since a plugin update, before bothering to make the directory.
function make_directory() {

$out = NULL;

$update = new Update;
if( ! $update -> get_is_update() ) { return FALSE; }

$log_dir_path = $this -> meta -> get_log_dir_path();
$file_exists = file_exists( $log_dir_path );

if( $file_exists ) { return FALSE; }

$out = mkdir( $log_dir_path, 0775, TRUE );

return $out;

}
That update logic is in a different class and is wildly useful for lots of things, but not of special interest for this article.
Logging mixed content
Now that we have CSP reports getting posted, and we have a directory to log them to, let's look at how to actually convert a report into a log entry,
In this class I have a function for adding new records to our log file. It's interesting that much of the heavy lifting is simply a matter of providing the a arg to the fopen() function:
function add_row( $array ) {

// Open for writing only; place the file pointer at the end of the file. If the file does not exist, attempt to create it.
$mode = 'a';

// Open the file.
$path = $this -> meta -> get_log_file_path();
$handle = fopen( $path, $mode );

// Add the row to the spreadsheet.
fputcsv( $handle, $array );

// Close the file.
fclose( $handle );

return TRUE;

}
Nothing particular to WordPress here, just a dude adding a row to a csv in a normal-ish PHP manner. Again, if you don't care for the idea of having a log file, you could have it send an email or write to the database, or whatever seems best.
Caveats
At this point we've covered all of the interesting highlights from my plugin, and I'd advice on offer a couple of pitfalls to watch out for.
First, be aware that CSP reports, like any browser feature, are subject to cross-browser differences. Look at this shockingly, painstakingly detailed report on such differences.
Second, be aware that if you have a server configuration that prevents mixed content from being requested, then the browser will never get a chance to report on it. In such a scenario, CSP reports are more useful as a way to prepare for a migration to https, rather than a way to monitor https compliance. An example of this configuration is Cloudflare's "Always Use HTTPS".
Finally, the self-DOS issue bears repeating. It's completely reasonable to assume that a popular site will rack up millions of reports per month. Therefore, rather than track the reports on your own server or database, consider outsourcing this to a service such as httpschecker.net.
Next steps
Some next steps specific to WordPress would be to add a UI for downloading the report file. You could also store the reports in the database instead of in a file. This would make it economical to, say, determine if a new record already exists before adding it as a duplicate.
More generally, I would encourage the curious reader to experiment with the many possible args for the CSP header. It's impressive that so much power is packed into such a terse syntax. It's possible to handle requests by asset type, domain, protocol — really almost any combination imaginable.

Content Security Policy: The Easy Way to Prevent Mixed Content is a post from CSS-Tricks
Source: CssTricks


Introducing Fusion - a Flexible WordPress Page Builder

While the default WordPress editor is easy to use, it has limitations. It can cause frustration if you want to create flexible page layouts.
An alternative that can help is the five-star rated Fusion Page Builder plugin. With this plugin, you can create complex and responsive pages. Your pages may have a variety of different content types, as well as WordPress widgets.

In this blog post, I will walk you through how to use Fusion. 

[[ This is a content summary only. Visit http://OSTraining.com for full links, other content, and more! ]]
Source: https://www.ostraining.com/


Facebook Introduces Messenger Chat Plugin for Business Websites by @MattGSouthern

Facebook has revealed details about version 2.2 of its Messenger platform, which comes with a highly requested customer chat plugin.The post Facebook Introduces Messenger Chat Plugin for Business Websites by @MattGSouthern appeared first on Search Engine Journal.
Source: https://www.searchenginejournal.com/feed/


So you need to parse an email?

Say you have a website with users who have accounts. Those users email you sometimes. What if you could parse that email for more context about that user, their account, and what they might want?

There are email parsing services out there. For example, Zapier offers Parser, which is free, with the idea being that you use Zapier itself to interconnect that data with other apps.
You teach it about your emails and then get programatic access to those data bits.
mailparser.io is another service just for this.

Same deal, you send the emails to them, and from within that app you set up parsers and do all the processing you need to do.
That might not be exactly what you need.
Perhaps your goal in parsing an email is to extend the data available to you right in your email client.
Gmail is a pretty huge email client. I just noticed that they have released and official way to make "Gmail Add-ons":
Gmail add-ons are developed using Apps Script, a scripting language based on JavaScript that serves as a connective platform between Google products like Docs, Sheets, Drive, and Gmail. Every Gmail add-on has a corresponding Apps Script project where you define your add-on's appearance and behavior.
That might be just the ticket for those of you looking to get your hands on email data, do stuff with it, and have a UI for doing stuff right within Gmail. There is a marketplace to check out with existing apps. The Trello one seemed pretty compelling to me.

Plus:
The contextual cards you create for your add-ons work for both web and mobile versions of Gmail. This means that you don't need to create separate web and mobile versions of the add-on—the same code works everywhere!
Personally, I make pretty heavy use of Front, which is like a shared team inbox superapp.
Front offers a plugin system as well, which adds your own custom panel right into the app itself and gives you all that programatic parsing stuff you need to get into emails (or tweets or whatnot).

We use it at CodePen to figure out who's emailing us (from the perspective of our own app) and show some contextual information about them, as well as provide some quick common actions that we might need.

Another thing to consider is how the emails are being generated at all. For example, do you offer customer support by just saying "email us at xxx@yyy.com", or do you have them fill out a form which generates an email? If it's a form, that's, in a sense, parsing an email before it's even sent, meaning it has structure and potentially programattic access to individual fields.
An example of that might be using a Wufoo form for your support and then using the API to access the data as needed. Maybe you can skip email parsing entirely.

So you need to parse an email? is a post from CSS-Tricks
Source: CssTricks


Code Review Etiquette

Code reviews are a big part of writing software, especially when working within a team. It is important to have an agreed-upon etiquette for reviewing code within a team. A code review is a critique and a critique can often feel more personal than the code writing itself. A sloppy, under-researched, or insensitive code critique can cause difficulties between team members, reduce overall team productivity, and diminish code quality over time. This post will briefly define code reviews, describe some common mistakes, and provide some quick tips for improving a code review process.

What are code reviews?
Code reviews are the process of sharing code so that other engineers can review it. Code reviews can happen verbally during pair programming sessions, or through reviewing code on websites like CodePen and GitHub. Mainly, code reviews happen in tools like GitHub when engineers submit pull requests.
Critiques are hugely beneficial. Convening engineers to discussions about code ensure that they're on the same page, regardless of whether it's in person or by sharing comments. Also, a review can help catch small mistakes in code or comments—like spelling and it can help newer or more junior coders learn the codebase. When done well, regular code reviews have nothing but benefits for all involved.
A common goal for code reviews is to make code changes as minimal and clear as possible so that the reviewer can easily understand what has changed and what is happening in the code. If code reviews are smaller, they're more frequent — potentially several a day — and more manageable.
Reviewing code should be a part of every developer's workflow. Senior reviewers are given the opportunity to teach/mentor, and even learn something new from time to time. Junior reviewers can grow and often help ensure code readability through the questions they ask. In fact, junior engineers are usually the best team members to ensure code readability.
For an engineer who works alone, asking for feedback from outsiders — at meet-ups, GitHub, Open Source Slack Channels, Reddit, Twitter, etc — can allow the solo coder the opportunity to participate in a code review process.
If we could all agree on an established process and language for reviewing code, then maintaining a positive environment for creative and productive engineering is easier. A code review etiquette benefits everyone — whether working alone or within a team.
Harsh code reviews can hurt feelings

Seeing bugs and issues continue to roll in and being mentally unable to address them has led to feelings of failure and depression. When looking at the moment project, I could only see the negatives. The bugs and misnomers and mistakes I had made. It led to a cycle of being too depressed to contribute, which led to being depressed because I wasn't contributing.
- Tim Wood, creator of Momentjs

There are many online comments, posts, and tweets by prolific engineers expressing that their feelings have been hurt by code reviews. This doesn't directly mean that reviewers are trying to be mean. Feeling defensive is a normal, quite human reaction to a critique or feedback. A reviewer should be aware of how the pitch, tone, or sentiment of their comments could be interpreted but the reviewee — see Occam's Razor.

It's like these commenters don't consider maintainers to be people, we make mistakes. https://t.co/tBa8kzymU4
— Henry Zhu @SF (@left_pad) September 18, 2017

Although reviewing code is very beneficial, a poor or sloppy review can have the opposite outcome. Avoid criticism without providing context. In other words, take the time to explain why something is wrong, where it went wrong, and how to avoid the mistake moving forward. Showing this level of respect for the reviewee strengthens the team, improves engineering awareness, and helps to provide agreed-upon technical definitions.
Quick tips for improving code review etiquette
Code is logical in nature. It is easy to pinpoint code that is incorrect or could be improved, just like it is easy to notice spelling misteaks. The human condition, when looking at and discussing logical things (like code), is to disregard the feelings of other people. This causes feelings to get hurt and a loss of focus on learning and collaboration.
Improving code review etiquette, because of the human condition, is difficult! Here is a quick list of things that I've done, said, seen, or received, that are easy wins in the art of Code Review Etiquette.
Remove the person
Without realizing it, engineers can neglect the difference between insightful critique and criticism because of personal relationships in communication.
The lines below dissect a code review comment of a theoretical function where it is suggested that there is an opportunity to return out of the function early.
You and I: Using you or I is probably not offensive intentionally, so don't worry. However, over time, involving the person can start to feel less positive—especially if vocal tones are ever added.
You should return out of this function early
We: Using we is inclusive and a safe way to say something more directly without making someone feel defensive. However, if the person speaking says we, and has not worked on the code at all, it may seem falsely inclusive and insensitive.
We should return out of this function early
No personal reference: Without personal reference, conversation or review will closely communicate the problem, idea, or issue.
Return out of this function early
Notice how the amount of text needed to communicate the same thing without using personal references takes fewer words and has greater clarity. This helps with human interaction, separates code discussion from personal discussion, and fewer words are needed to communicate the same idea.
Keep passionate conversations quiet
Passion is an important motivator for improving. Passion that is critical in nature can be very considerate and motivating. Feedback that is critical in nature is most useful if the person receiving the critique is engaged. This sort of communication comes up a lot during architectural conversations or when discussing new products.
Feedback that is critical in nature is most useful if the person receiving the critique is engaged. Note: the person receiving the information must be engaged with the critique.
Imagine this comment when stated with exaggerated physical movement, more excited vocal tone, and higher volume.
There are 8 web fonts used in this mock which may affect page load speed or even certain tracking metrics that could be caused by new race conditions!
Then, imagine a similar comment, even terser but stated with a calm demeanor, slower delivery, and a normal vocal volume — followed by a question.
There are 8 web fonts used in this mock. This will affect page load speed and possible tracking metrics because of potential race conditions. How can this be improved?
Notice how the comments above are almost the same. The second comment is even more direct. It states a problem as a fact and then requests feedback.
An important thing to remember when being passionate is taking on a quieter tone. This is a physical decision — not a social one. Passionate language can be the same, and perceived very differently, based on the orientation of the communicator's tone. If physical tone (body language), vocal tone, vocal pitch, and vocal volume remain gentle, it is observed that it is much more likely for an audience to remain engaged — even if the critique is critical in nature.
If the tone is aggressive in nature (exaggerated physical movement, more excited vocal tone, higher volume), the actual words used can be gentle in nature, but the audience can feel very differently. This communication can lead to embarrassment, a disengaged audience, and even loss of respect.
Aggressive communication is common with passionate communication because the human condition wants to protect ideas that we're passionate about. So, don't worry about it too much if you observe that your audience is disengaged when discussing something that you're passionate about. The key is to remember that if you can create perceived gentle communication, it will be easier for your audience to remain engaged — even if they are not initially in agreement.
Don't review the author, review the code
Following the conversation above, the act of pointing, within written conversation or actual body language, in almost any situation is not optimal for good communication. It changes the focal point of the conversation from the context of the conversation to a person or a thing.
The response below provides a comment and then a link. In the context of the code review, the second part of the comment and link takes the reader out of the context of the code review, which is confusing.
// Return out of this function earlier
// You need to learn about functional programming
The comment below provides a comment, and then a pseudo-code suggestion.
/*
return early like this:
*/
const calculateStuff = (stuff) => {
if (noStuff) return
// calculate stuff
return calculatedStuff
}
In the two examples above, the first example causes the reader to go far beyond the issue. The conversation is more abstract—even existential. The second example refers directly to the issue and then provides a pseudo code snippet that relates directly to the comment.
It is best to only comment on contextually specific items when reviewing code. Broad comments lead to a loss of context. If broader discussions must happen, they should happen outside of code reviews. This keeps the code review clear and scoped to the code that is being reviewed.
Right and wrong can change
Developers almost always want to re-write things. It is natural to break problems down into tasks in real-time to address today's situation. However, focusing on the who's and why's of a product's history is important to conceptualize because great context is gained. 'History repeats itself' is an important phrase to remember when critiquing products or when a product you've written is critiqued. There is always a great amount of knowledge to be gained from historical context.
JavaScript was made in a week, considered a hacky scripting language, and then became the most widely used programming language in the world. Scalable Vector Graphics (SVGs) were supported in 1999, pretty much forgotten about, and now, they continue to gain popularity for the new opportunities they provide. Even the World Wide Web (the Internet) was meant for document sharing with little anticipation of the current result today. All of these technologies are important to remember when considering software and engineering—as logical and predictable results are supposed to be, success is often derived from unexpected results! Be open!
Some resources and tools that can help with code review etiquette

Alexjs: a tool for catching insensitive, inconsiderate writing by Titus Wormer
Grammarly: an extension to help improve communication in browsers
Write Good: a cli and text editor plugin by Brian Ford to help improve communication in text editors and shells
Awesome Writing Tools: an Awesome List of tools for improving writing.

Conclusion
The list above includes general, high-level things that can help with positive engagement when talking about, reviewing, or reading about code—code review etiquette.
I am a hypocrite. I have made all the mistakes that I advise not to do in this article. I am human. My goal here is to help others avoid the mistakes that I have made, and to perhaps encourage some behavior standards for reviewing code so that engineers can more openly discuss code with less worry about being hurt or hurting others.

Code Review Etiquette is a post from CSS-Tricks
Source: CssTricks


On-Site Search

CSS-Tricks is a WordPress site. WordPress has a built-in search feature, but it isn't tremendously useful. I don't blame it, really. Search is a product onto itself and WordPress is a CMS company, not a search company.

You know how you can make a really powerful search engine for your site?
Here you go:
<form action="https://google.com/search" target="_blank" type="GET">

<input type="search" name="q">
<input type="submit" value="search">

</form>
Just a smidge of JavaScript trickery to enforce the site it searches:
var form = document.querySelector("form");

form.addEventListener("submit", function(e) {
e.preventDefault();
var search = form.querySelector("input[type=search]");
search.value = "site:css-tricks.com " + search.value;
form.submit();
});
I'm only 12% joking there. I think sending people over to Google search results for just your site for their search term is perfectly acceptable. Nobody will be confused by that. If anything, they'll be silently pleased.
Minor adjustments could send them to whatever search engine. Like DuckDuckGo:
https://duckduckgo.com/?q=site%3Acss-tricks.com+svg
Still:

They will leave your site
They will see ads

To prevent #1, Google has long-offered a site search product where you can create and configure a custom search engine and embed it on your own site.
There has been lots of news about Google shutting down that service. For example, "Google site search is on the way out. Now what?" Eeek! This was quite confusing to me.
Turns out, what they are really are shutting down what is known as Google Site Search (GSS), which is an enterprise product. It shuts down entirely on April 1, 2018. Google has another product called Google Custom Search Engine (CSE) that doesn't seem to be going anywhere.
CSE is the thing I was using anyway. It has a free edition which has ads, and you can pay to remove them, although the pricing for that is also very confusing. I literally can't figure it out. For a site like CSS-Tricks, it will be hundreds or possibly thousands a year, best I can tell. Or you can hook up your own AdSense and at least attempt to make money off the ads that do show.
In the wake of all that, I thought I'd try something new with search. Algolia is a search product that I'd heard of quite a few people try, and it seems pretty beloved. With a little help from the wonderfully accommodating Algolia team, we've had that going for the last few months.

If we were to set up an implementation difficulty scale where my HTML/JavaScript form up there is a 1 and spinning up your own server and feeding Solr a custom data structure and coming up with your own rating algorithms is a 10, Algolia is like a 7. It's pretty heavy duty nerdy stuff.
With Alogolia, you need to bring all your own data and stucture and get it over to Algolia, as all the search magic happens on their servers. Any new/changed/deleted data needs to be pushed there too. It's not your database, but generally any database CRUD you do will need to go to Algolia too.
On that same difficulty scale, if you're adding Algolia to a WordPress site, that goes down to a 3 or 4. WordPress already has it's own data structure and Algolia has a WordPress plugin to push it all to them and keep it all in sync. It's not zero work, but it's not too bad. The plugin also offers a UI/UX replacement over the default WordPress search form, which offers "instant results" as a dropdown. It really is amazingly fast. Submit the form anyway, and you're taken to a full-page search results screen that is also taken over by Algolia.
For disclosure, I'm a paying customer of Algolia and there is no sponsorship deal in place.
It's a pretty damn good product. As one point of comparison, I've gotten exactly zero feedback on the switch. Nobody has written in to tell me they noticed the change in search and now they can't find things as easily. And people write in to tell me stuff like that all the time, so not-a-peep feels like a win.
I'm paying $59 a month for superfast on-page search with no ads.
It's almost a no-brainer win, but there are a few downsides. One of them is the ranking of search results. It's pretty damn impressive out of the box, returning a far more relevant set of results than native WordPress search would. But, no surprise, it's no Google. Whatever internal magic is happening is trying it's best, but it just doesn't have the data Google has. All it has is a bunch of text and maybe some internal linking data.
There are ways to make it better. For example, you can hook up your Google Analytics data to Algolia, essentially feeding it popularity data, so that Algolia results start to look more like Google results. It's not a trivial to set up, but probably worth it!
Anyway!
What do y'all use for search on your sites?

On-Site Search is a post from CSS-Tricks
Source: CssTricks


Prettier + Stylelint: Writing Very Clean CSS (Or, Keeping Clean Code is a Two-Tool Game)

It sure is nice having a whole codebase that is perfectly compliant to a set of code style guidelines. All the files use the same indentation, the same quote style, the same spacing and line-break rules, heck, tiny things like the way zero's in values are handled and how keyframes are named.
It seems like a tall order, but these days, it's easier than ever. It seems to me it's become a two-tool game:

A tool to automatically fix easy-to-fix problems
A tool to warn about harder-to-fix problems

Half the battle: Prettier
Otherwise known as "fix things for me, please".
Best I can tell, Prettier is a fairly new project, only busting onto the scene in January 2017. Now in the last quarter of 2017, it seems like everybody and their sister is using it. They call it an Opinionated Code Formatter.
The big idea: upon save of a document, all kinds of code formatting happens automatically. It's a glorious thing to behold. Indentation and spacing is corrected. Quotes are consistent-ified. Semi colons are added.

Run Prettier over your codebase once and gone are the muddy commits full of code formatting cruft. (You might consider making a temporary git user so one user doesn't look like they've commited a bazillion lines of code more than another, if you care about that.) That alone is a damn nice benefit. It makes looking through commits a heck of a lot easier and saves a bunch of grunt work.
As this post suggest, Prettier is only half the battle though. You'll notice that Prettier only supports a handful of options. In fact, I'm pretty sure when it launched it didn't have any configuration at all. Opinionated indeed.
What it does support are things that are easy to fix, requiring zero human brainpower. Use double quotes accidentally (uggkch muscle memory) when your style guide is single quotes? Boom - changed on save.
There are other potential problems that aren't as easy to fix. For example, you've used an invalid #HEX code. You probably wouldn't want a computer guessing what you meant there. That's better to just be visually marked as an error for you to fix.
That's where this next part comes in.
The other half of the battle: Stylelint
Otherwise known as "let me know about problem, so I can fix them".
Stylelint is exactly that. In fact, in that GIF above show Prettier do it's thing, you saw some red dots and red outlines in my Sublime Text editor. That wasn't Prettier showing me what it was going to fix (Prettier displays no errors, it just fixes what it can). That was Stylelint running it's linting and showing me those errors.
Whereas Prettier supports 10ish rules, Stylelint supports 150ish. There is a standard configuration, but you can also get as fine-grained as you want there and configure how you please. David Clark wrote about it here on CSS-Tricks last year.

With these warnings so clearly visible, you can fix them up by hand quickly. It becomes rather second nature.
Getting it all going
These tools work in a wide variety of code editors.
These are the Prettier editor integrations. Between all these, that probably covers 96% webdevnerds.
It's very easy to think "I'll just install this into my code editor, and it will work!" That gets me every time. Getting these tools to work is again a two-part game.

Install code editor plugin.
Do the npm / yarn installation stuff. These are node-based tools. It doesn't mean your project needs to have anything to do with node in production, this is a local integrationdependency.

These are intentionally separated things. The meat of these tools is the code that parses your code and figures out the problems it's going to fix. That happens through APIs that other tools can call. That means these tools don't have to be rewritten and ported to work in a new environment, instead, that new environment calls the same APIs everyone else does and does whatever it needs to do with the results.

Above is a barebones project in Sublime Text with both Prettier and Stylelint installed. Note the `package.json` shows we have our tools installed and I'm listing my "packages" so you can see I have the Sublime Text Plugin jsPrettier installed. You can also see the dotfiles there that configure the rules for both tools.
Don't let the "js" part mislead you. You could use this setup on the CSS of your WordPress site. It really doesn't matter what your project is.
Getting more exotic
There is certainly leveling up that can happen here. For example:

You might consider configuring Stylelint to ignore problems that Prettier fixes. They are going to be fixed anyway, so why bother looking at the errors.
You might consider updating your deployment process to stop if Stylelint problems are found. Sometimes Stylelint is showing you an error that will literally cause a problem, so it really shouldn't go to production.
We mostly talked about CSS here, but JavaScript is arguably even more important to lint (and Prettier supports as well). ES Lint is probably the way to go here. There are also tools like Rubocop for Ruby, and I'm sure linters for about every language imaginable.

Related

Stylelint co-creater David Clark introducing Stylelint
Ashley Nolan on Stylelint, with some interesting history and data
Stoyan Stefanov on integrating Stylelint and TextMate
Enforcing CSS Syntax Style
Artem Sapegin on Why robots should format our code for us
The chapter from SurviveJS on Code Formatting.
Mrm: Command line tool to help you keep configuration of your open source projects in sync

Prettier + Stylelint: Writing Very Clean CSS (Or, Keeping Clean Code is a Two-Tool Game) is a post from CSS-Tricks
Source: CssTricks


CSS-Tricks Chronicle XXXII

Hey y'all! Time for a quick Chronicle post where I get to touch on and link up some of the happenings around the site that I haven't gotten to elsewhere.

Technologically around here, there have been a few small-but-interesting changes.
Site search is and has been powered by Algolia the last few months. I started up writing some thoughts about that here, and it got long enough I figured I'd crack it off into it's own blog post, so look forward to that soon.
Another service I've started making use of is Cloudinary. Cloudinary is an image CDN, so it's serving most of the image assets here now, and we're squeezing as much performance out of that as we possibly can. Similar to Algolia, it has a WordPress plugin that does a lot of the heavy lifting. We're still working out some kinks as well. If you're interested in how that all goes down, Eric Portis and I did a screencast about it not too long ago.

We hit that big 10-year milestone not too long ago. It feels both like heck yes and like just another year, in the sense that trucking right along is what we do best.
We still have plenty of nerdy shirts (free shipping) I printed up to sorta celebrate that anniversary, but still be generic and fun.

As I type, I'm sitting in New Orleans after CSS Dev Conf just wrapped up. Well, a day after that, because after such an amazing and immersive event, and a full day workshop where I talk all day long, I needed to fall into what my wife calls "an introvert hole" for an entire day of recovery.
From here, I fly to Barcelona for Smashing Conf which is October 17-18.
The last two conferences for me this year will be An Event Apart San Francisco in late October and Denver in mid-December.
Next year will be much lighter on conference travel. Between having a daughter on the way, wanting more time at home, and desiring a break, I won't be on the circuit too much next year. Definitely a few though, and I do have at least one big fun surprise to talk about soon.

CodePen has been hard at work, as ever. Sometimes our releases are new public features, like the new Dashboard. Sometimes the work is mostly internal. For example, we undertook a major rewriting of our payment system so that we could be much more flexible in how we structure plans and what payment providers we could use. For example, we now use Braintree in addition to Stripe, so that we could make PayPal a first-class checkout citizen like many users expect.
It's the same story as I write. We're working on big projects some of which users will see and directly be able to use, and some of which are infrastructural that make CodePen better from the other side.
Did you know the CSS-Tricks Job Board is powered by the CodePen Job Board? Post in one place, it goes to both. Plus, if you just wanna try it out and see if it's effective for your company, it's free.

We don't really have official "seasons" on ShopTalk, but sometimes we think of it that way. As this year approaches a close, we know we'll be taking at least a few weeks off, making somewhat of a seasonal break.
Our format somewhat slowly morphs over time, but we still often have guests and still answer questions, the heart of ShopTalk Show. Our loose plan moving forward is to be even more flexible with the format, with more experimental shows and unusual guests. After all, the show is on such a niche topic anyway (in the grand scheme of things) that we don't plan to change, we might as well have the flexibility to do interesting things that still circle around, educate, and entertain around web design and development.

I've gotten to be a guest on some podcasts recently!

Inspect: Interview with Chris Coyier
Bureau Briefing: Building Community
Daily Two Minutes of Greatness: Persistence, Stubbornness, & building CSS-Tricks

I also got to do a written interview with Steve Domino for Nanobox, The Art of Development. Plus, Sparkbox wrote up a recap of my recent workshop there, Maker Series Recap: Chris Coyier.

Personally, I've completed my move out to Bend, Oregon! I'm loving Bend so far and look forward to calling it home for many years to come. For the first time ever, I have my own office. Well, it's a shared room in a shared office, but we all went in on it together and it's ours. We're moved in and decking it out over the coming months and it's been fun and feels good.

CSS-Tricks Chronicle XXXII is a post from CSS-Tricks
Source: CssTricks


Introducing PublishPress: WordPress for Teams

PublishPress is a really useful WordPress plugin that our team have been working on as a side project.

The plugin is designed for any WordPress site with multiple team members. We developed it to help keep ourselves organized on a busy site with lots of writers creating lots of content. The slogan of the plugin is "WordPress for Teams".

The main feature is a big editorial calendar. You can create, reschedule and plan content from a single screen.

Click here to try a free demo of PublishPress.

[[ This is a content summary only. Visit http://OSTraining.com for full links, other content, and more! ]]
Source: https://www.ostraining.com/


Gutenberg

I've only just been catching up with the news about Gutenberg, the name for a revamp of the WordPress editor. You can use it right now, as it's being built as a plugin first, with the idea that eventually it goes into core. The repo has better information.
It seems to me this is the most major change to the WordPress editor in WordPress history. It also seems particularly relevant here as we were just talking about content blocks and how different CMS's handle them. That's exactly what Gutenberg is: a content block editor.
Rather than the content area being a glorified <textarea> (perhaps one of the most valid criticisms of WordPress), the content area becomes a wrapper for whatever different "blocks" you want to put there. Blocks are things like headings, text, lists, and images. They are also more elaborate things like galleries and embeds. Crucially, blocks are extensible and really could be anything. Like a [shortcode], I imagine.

Some images from Brian Jackson's Diving Into the New Gutenberg WordPress Editor help drive it home:

As with any big software change, it's controversial (even polarizing). I received an email from someone effectively warning me about it.
The consensus is this UI upgrade could either move WP into the future or alienate millions of WP site owners and kill WordPress.
I tend to think WordPress is 2-BIG-2-DIE, so probably the former.
I also think piecing together block types is a generic and smart abstraction for a CMS to make. Gutenberg seems to be handling it in a healthy way. The blocks are simply wrapped in specially formatted <!-- wp:core/text --> <!-- /wp:core/text --> to designate a block, so that the content highly compatible. A WordPress site without Gutenberg won't have any trouble with it, nor porting it elsewhere.
Plus the content is still treated in templates as one big chunk:
To ensure we keep a key component of WordPress’ strength intact, the source of truth for the content should remain in post_content, where the bulk of the post data needs to be present in a way that is accessible and portable.
So regardless of how you structure it in the editor, it's stored as a chunk in the database and barfed out in templates with one command. That makes it perhaps less flexible than you might want from a templating perspective, but scopes down this change to a paleteable level and remains very WordPress-y.
It seems a lot of the controversy stems from either who moved my cheese sentiments or what it does and doesn't support at this second. I don't put much stock in either, as people tend to find the cheese fairly quickly and this still under what seems to be heavy active development.
A big support worry is custom meta boxes. Joost de Valk:

Fact remains that, if you test Gutenberg right now, you'll see that Yoast SEO is not on the page, anywhere. Nor, for that matter, are all the other plugins you might use like Advanced Custom Fields or CMB2. All of these plugins use so-called meta boxes, the boxes below and to the side of the current editor.
The fact that the Gutenberg team is considering changing meta boxes is, in our eyes, a big mistake. This would mean that many, many plugins would not work anymore the minute Gutenberg comes out. Lots and lots of custom built integrations would stop working. Hundreds of thousands of hours of integrationtime would have to be, at least partly, redone. All of this while, for most sites, the current editor works just fine.

That does sound like a big deal. I wonder how easy baby stepping into Gutenberg will be. For example, enabling it for standard posts and pages while leaving it off for custom post types where you are more likely to need custom meta boxes (or some combination like that).
On this site, I make fairly heavy use of custom meta boxes (even just classic custom fields), as well as using my own HTML in the editor, so Gutenberg won't be something I can hop on quickly. Which makes me wonder if there will always be a "classic" editor or if the new editor will be mandatory at a certain point release.
Yet more controversy came from the React licensing stuff. That went essentially like:

Matt Mullenweg: we're gonna switch away from React (which Gutenberg uses) because licencing.
React: You're all wrong but we give up. It's MIT now.
Matt Mullenweg: That's good, but the talk now is allowing people to use whatever New JavaScript lib they want.

I've never heard of "framework-agnostic" block rendering, but apparently, it's a thing. Or maybe it's not? Omar Reiss:
With the new Gutenberg editor we’re changing the way the WordPress admin is being built. Where we now render the interface with PHP, we will start rendering more and more on the client side with JavaScript. After the editor, this is likely to become true for most of the admin. That means that if you want to integrate with the admin interface, you’ll have to integrate with the JavaScript that renders the interface. If WordPress chooses Vue, you’ll have to feed WordPress Vue components to render. If WordPress chooses React, you’ll have to feed WordPress React components to render. These things don’t go together. React doesn’t render Vue components or vice versa. There is no library that does both. If WordPress uses a particular framework, everyone will have to start using that framework in order to be able to integrate.
That's a tricky situation right there. Before the React license change, I bet a nickel they'd go Vue. After, I suspect they'll stick with React. Their own Calypso is all React in addition to what already exists for Gutenberg, so it seems like a continuity bonus.
This will be a fun tech story to follow! Sites like Post Status will likely be covering it closer than I'll be able to.

Gutenberg is a post from CSS-Tricks
Source: CssTricks


Essential Image Optimization

Addy Osmani's ebook makes the case the image optimization is too important to be left to manual processes. All images need optimization and it's the perfect job for automation.
I agree, of course. At the moment I've got a WordPress plugin + Cloudinary one-two punch helping out around here. Optimized images, served with a responsive images syntax, from a CDN that also handles sending the best format according to the browser, is quite a performance improvement.
Direct Link to Article — Permalink
Essential Image Optimization is a post from CSS-Tricks
Source: CssTricks