Facebook hosts an annual developer conference, F8, where their employees speak about Facebook’s latest product launches and hold workshops to teach developers about their technologies.

I got the opportunity to attend my first F8 this past week. Though much of the conference was focused on privacy and augmented/virtual reality (AR/VR), the most interesting and relatable takeaways for me were 1) what Facebook is doing with video, 2) their use of React in many different products, and 3) the insights I gained through conversations with developers from around the world.

Facebook × video

Video-tech is an exciting space to work in and it’s inspiring to see Facebook prioritize video and release a number of video products.

In the initial keynote this year, Mark Zuckerberg said Facebook plans to finish/improve video over the next three to five years.

Facebook released Watch Party which lets users watch real-time videos with friends. They announced photo/video reels for birthdays which hasn’t launched yet, but sounds exciting.

“Instead of all of us writing on your wall to wish you a ‘happy birthday,’ how about we pull together, over the course of the day, a photo and video reel, which you then receive as a package at the end, saying, ‘happy birthday.’”
 — Chris Cox, Chief Product Officer, Facebook

As far as camera updates go, Facebook debuted new AR Camera Effects for Instagram and Messenger. Messenger now also allows users to share 4K photos and HD videos. It’s great to see larger platforms like Facebook prioritizing high quality video.

React everywhere

I attended an excellent panel discussion that included speakers from Facebook, Skype, TaskRabbit, Vogue, and Postlight. These brands all have one thing in common: they’re using React Native. They all spoke about how React Native allowed their developer teams to move faster and share most their code between platforms. At Air, React Native has allowed us to share code between platforms, including our web app.

“For all of our apps we see around 93% code reuse between platforms. That’s not a typo.”
 — Sophie Alpert, Engineering Manager, React, Facebook [source]

Wow! As one who cares deeply about portable code, I’m inspired to hear a large company like Facebook has such a high percentage of reusable code.

What do Instagram and Oculus have in common? They both use React to build their apps. Instagram builds on top of React Native, while Oculus uses React 360 (formerly React VR), a new React library for building 360 degree VR interfaces. As the React ecosystem grows, it opens up more opportunities for developers to build on exciting new platforms.

Conversations and resources available

One of my favorite aspects of F8 was meeting with Facebook employees and getting their thoughts on our development process. I got to schedule a 1-on-1 meeting with a Facebook product designer to chat about design systems and spoke with a Facebook developer that worked on the React team about how they use React internally. I also enjoyed meeting many of the speakers after their presentations.

The workshops I attended at F8 were informative, including the Jest workshop that covered automated JavaScript testing. I also got to meet incredible entrepreneurs from around the globe and hear about their tech stacks and business strategies.

To sum up my post-F8 experience: I’m excited to work in video, build apps in the React ecosystem, and have a lively and helpful developer community around me.

Thanks for your time! Subscribe for product updates from Air.

🎈 Air

At Air, we’re building apps for capturing, storing, and managing videos. We currently offer an iOS app and a web app that share a good amount of code. This article walks through the steps we took to build a universal codebase and synced design system in a single Git repository.

Goal

My goal was to build a cross-platform codebase that synced with our design system and allowed for rapid code changes to increase our team’s output.

Universal code

I looked at our projects and found plenty of reusable code and shared folders. Our apps share utilities, constants, config settings, i18n strings, linting rules, and React Native components (thanks to react-native-web). With this information, I was able to split our code into reusable packages.

Synced design system

We use Storybook to generate our design documentation. Our docs use Air’s shared components which keeps our design system and code in perfect sync. When a change is made to our components, our apps and docs are updated.

Finding our optimal file structure

First implementation: Practice repos

Our initial code organization strategy was to keep our app repositories separate. We then built functional practice projects that contained essentially reusable code for us to copy-paste into our apps. As we moved quickly, this was an easy way to stay in sync for a small team, but was ultimately not a sustainable solution.

• ✔ Simple
• ✘ Hard to stay in sync
• ✘ Duplicated code
• ✘ Not sustainable

Second implementation: Polyrepo structure

I then built a polyrepo structure, abstracting all shared packages into their own repositories (constants, utilities, config, components, etc.).

Our apps consumed these packages as defined in their package.json file. This was clean, but led to dependency management chaos. Every time a change needed to be made to a dependency, we were forced to jump into a separate repo, update it, bump the package version (if need be), hop back into our original project, and reinstall the dependency. Another issue we ran into was, because we serve our web app and site on Netlify, we had to create workarounds for reusing our Git credentials to install our private repositories.

• ✔ Clean
• ✔ Reusable code
• ✘ Slowed down development time
• ✘ Dependency management is difficult
• ✘ Issues with Netlify builds

Third implementation: Monorepo

Finally, I used Yarn Workspaces to build a single repo that hosts all our projects and handles our dependencies in a more maintainable way.

• ✔ Clean; all dependencies are in a single packages folder
• ✔ Reusable code
• ✔ Consistent linting and project configuration files across all packages (.eslintrc, .babelrc, .gitignore, prettierrc.json, etc.)
• ✔ Cross-platform testing is easy to set up
• ✔ Simple releases with Lerna
• ✔ Allows for rapid development across dependencies
• ✔ Simple dependency management
• ✔ Contains our synced design system
• ✔ Works perfectly with Netlify builds

🏆 Goal achieved

Thanks to our new code organization, we now have:

• A universal codebase with DRY, shared code between projects
• Synced design docs that use our shared components
• Rapid, cross-project code changes and releases in our new monorepo

Though a monorepo worked for our purposes (and for others [Facebook, Google, Twitter, Babel, React Native Web, React Router, Meteor]), be sure to review the pros and cons before implementing one.

Takeaways

• Consistency is underrated. Tools like Prettier and ESLint are spectacular for working with a team across multiple projects.
• Using lerna import or git subtree carries over a repo’s Git history and combines its commits chronologically with the monorepo’s commit history. We’re still finding the best way to compose our commit messages for the monorepo as commits can span multiple packages. We may try namespacing our commits. (e.g. [web, components] Refactor gallery)
• An exciting aspect of building a business from the ground up is the speed at which we’re able to adopt or reject new technologies. I’m proud of our team for their ability to move quickly and willingness to try new things.

$ >whoami

I’m Chris, a designer-developer that has worked in advertising, in big tech, on Wall Street, and am now building a startup in a Brooklyn warehouse. I care deeply about accessibility and performance in my apps.

Mash the clap (👏) button if you found this article helpful or want to show your support for our startup. Thanks!

The purpose of this article is to share a simple technique I use that involves template literals, a useful feature of ES2015+. Template literals allow you to write multi line strings enclosed in back ticks, eliminating the need to escape each line with a backslash or having to concatenate each line with +.

`All
 day
 breakfast`

instead of:

'All\
 day\
 breakfast'

// or

'All' +
'day' +
'breakfast'

Template literal multi line strings are much cleaner!

It gets better. You can use ${} to denote a placeholder for a JavaScript expression, such as a variable or function. You can use placeholders inside your template literals like this:

const friend = 'Chris Nager'

console.log(`Hello, ${friend}.`)

// Hello, Chris Nager.

Two extremely useful UI libraries I use in many projects are React and Basscss. They play nicely together because Basscss’s single purpose classes make style declarations predictable and are especially useful when working with reusable components in React. The following technique doesn’t require React or Basscss as dependencies, but I’ll use them to illustrate my point.

Within my React components, I stack my CSS classes in a template literal. This gives me the added benefit of clearly defining my props- and logic-based styles with placeholders.

import React, {
  Component,
} from 'react'

class Box extends Component {
  render() {
    const {
      color,
      isActive,
    } = this.props

    return (
      <div className={`
        h1
        p2
        border
        italic
        ${color}
        ${isActive && 'bold'}
      `}>
        {color}
      </div>
    )
  }
}

React.render(
  <Box
    color="teal"
    isActive
  />,
  document.body
)

See this demo on CodePen.

Writing your classes in a multi line stack has a few advantages. It’s better organized and more readable than a long single line of many classes.

When working with git, the main advantage of multi line stacked classes is that you can see your changes by line and know exactly what classes have been added or removed.

$ git diff

   return (
     <div className={`
       h1
-      p2
+      p3
      border
      italic
      ${color}

If you find this technique useful, ❤ this article. If you have any thoughts on the subject, let me know in the comments or reach out to me on Twitter @chrisnager.

It’s simple. Set your image crop dimensions and use this line in your CSS:

img {
    object-fit: cover;
}

That’s it. No need for unsemantic, wrapping divs or any other nonsense.

This technique works great for cropping awkwardly-sized avatar pictures down to squares or circles. Take this wide photo of a bear below for example. Once object-fit: cover is applied to the image and a width and height are set, the photo crops and centers itself.

object-fit: cover crops the exact same way background-size: cover does, but is used for styling imgs, videos and other media tags rather than background images.

object-fit has fairly decent support in the latest browsers and there’s a polyfill for older browsers (IE8+).

Interested in the other object-fit values? Try them out.

The following commands can be used in the d attribute within a path to help you draw your own SVG shapes.

Like so:

<svg viewBox="0 0 5 5" xmlns="http://www.w3.org/2000/svg">
  <path d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z" />
</svg>

This code draws an SVG plus sign (+).

A quick note:

• Capital letter commands, like M, refer to absolutely positioned points.
• Lowercase letter commands, like m, refer to relatively positioned points.

M

moveto

X,Y

Begins the string at an absolute, designated position. If more than one pair of coordinates are provided, it’s as if the other pairs are preceded by an L.

m

moveto

x,y

Same as M, except that if more than one pair of coordinates are provided, extra pairs are processed as if preceded by an l.

L

lineto

X,Y

Draws a line from the last position to the specified position.

l

lineto

x,y

Draws a line from the last position to a relative position: x pixels to the right and y to the bottom.

H

horizontal lineto

x

Draws a horizontal line to the specified, absolute x position.

h

horizontal lineto

x

Draws a horizontal line x pixels to the right (if x is negative, the line is drawn to the left).

V

vertical lineto

y

Draws a vertical line to the specified, absolute y position.

v

vertical lineto

y

Draws a vertical line x pixels to the bottom (if y is negative, the line is drawn to the top).

A

elliptical arc

rx,ry,alpha,large,sweep,x,y

Draws an elliptical arc: rx and ry are the radius of the ellipse; alpha is the x-axis rotation of the ellipse; large is 0 if the arc should be the shorter arc (less than 180°), 1 if it should be the longer arc; sweep is 0 is the arc is to be drawn clockwise, 1 if counter-clockwise; x,y are the coordinate of the end point of the arc.

Q

quadratic Bézier curve

cX cY eX eY

Draws a Bézier quadratic curve. cX,cY are the coordinates of the control point, eX,eY that of the endpoint. More pairs can be provided (extra control points and endpoints).

q

quadratic Bézier curve

cX cY eX eY

Draws a Bézier quadratic curve, with the coordinates of the points relative to the current point.

T

smooth quadratic Bézier curveto

eX eY

Draws a Bézier quadratic curve, using the last provided control point (or failing that the current point).

t

smooth quadratic Bézier curveto

eX eY

Same as T, with the coordinates of the end point relative to the current point.

C

curveto

cX1 cY1 cX2 cY2 eX eY

Draws a Bézier cubic curve, with cX1,cY1,cX2,cY2 being the coordinates of the control points.

c

curveto

cX1 cY1 cX2 cY2 eX eY

Same as C, with the coordinates of the points relative to the current point.

S

smooth curveto

cX2 cY2 eX eY

Draws a Bézier cubic curve, using the previously provided control point (cX1,xY1) or failing that the current point, cX2,cY2 as the next control point, and eX,eY as the end point

s

smooth curveto

cX2 cY2 eX eY

Same as S, with the coordinates of the points relative to the current point.

Z, z

closepath

Close the path by joining the ending point with the beginning point.

Resources:

http://www.jeromecukier.net/wp-content/uploads/2012/10/d3-cheat-sheet.pdf

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

Examples:

http://codepen.io/chrisnager/pen/armzk