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.
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.
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 +.
breakfast'// or'All' +
Template literal multi line strings are much cleaner!
It’s simple. Set your image crop dimensions and use this line in your CSS:
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.
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.
<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" />
A quick note:
Begins the string at an absolute, designated position. …