Skip to content

Instantly share code, notes, and snippets.

Jarda Snajdr jsnajdr

  • Pilsen, Czech Republic
Block or report user

Report or block jsnajdr

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile

Aligning the JavaScript Coding Standards With Prettier

Across the JavaScript community, the Prettier code formatter has become immensely popular over that last three years since it was originally released. It automatically performs high-quality formatting of your JavaScript code: when you press Save, your code is instantly formatted. This removes a distraction for contributors who write or review code, and allows them to focus on the more valuable aspects of their work without having to discuss the JavaScript WordPress Coding Standards so often. That's why we'd like to adopt it in the WordPress JavaScript code bases, too.

The official Prettier formatter is very opinionated and has very few options. The reasons are both technical and cultural. The complexity of the formatting algorithm would explode exponentially with too many options and their combinations, and a part of the project vision is to establish an unified JavaScript formattin

View Post Editor

Post Editor Redux

Post is a bag of attributes like title, content, metadata or terms. Some are primitive values, others are complex objects.

Post reducer data

The copy of the post saved on server is part of the common post state tree at state.posts.queries. In the UI code known as currentPost or savedPost.

Local edits are stored in state.posts.edits. Modified attributes only, diff from the saved post.

jsnajdr /
Last active Feb 15, 2018
Making Calypso small and fast to load

Be aware of where your code goes

  • which chunk does it live in?
  • is it loaded only when it's needed?
  • how large your libraries are?

Understand how code splitting works

Section chunks

  • loaded during routing
jsnajdr /
Last active Feb 7, 2018
Common Performance Anti-Patterns in Calypso


  • too many rerenders, mostly because of inefficient selectors
  • computing something just to throw it away
  • initializing everything during Calypso boot

Be aware how Redux update cycle works

  • action dispatch calls reducer
  • reducer produces a new state (almost always)

Prettier and Calypso

  • What is Prettier?
  • How it works?
  • Why is there a Calypso fork?
  • How do I use it?
  • Is the whole Calypso code base formatted?
  • How do we ensure that formatted files remain formatted?
View check-event-handlers.js
/* eslint-disable no-console */
export default function transformer( file, api ) {
const j = api.jscodeshift;
const ReactUtils = require( 'react-codemod/transforms/utils/ReactUtils' )( j );
const root = j( file.source );
ReactUtils.findReactES6ClassDeclaration( root ).forEach( checkEventHandlers );
function checkEventHandlers( classPath ) {
// Find JSX attributes whose value is an expression container
You can’t perform that action at this time.