Farewell shot at Facebook’s F8 2018

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.


Code + design + file structure

🎈 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.


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. …


Using object-fit: cover

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.

See it in action.

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.


Learn to draw your own SVG shapes in the browser

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. …

Chris Nager

Senior software developer @airhq / formerly @iex and @salesforce

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store