Architecting a Squiggle – Birchbox Unboxed

Architecting a Squiggle  #react #components #css #reactjs

  • It looked like this, and was used to visually emphasize key words or numbers in a block of text.A SquiggleWith the assumption that this coral squiggle would be used only sporadically on a few key pages, we uploaded an image of the squiggle to our CDN and set it as…
  • Our new site, which was built in React, encouraged a component based approach.I created a Squiggle component (later renamed Highlight when it supported shapes other than squiggles) that wrapped any arbitrary content.
  • It accepted props for color, type, and alignment with respect to its content.Highlight type=’wave’ fill=’coral’ alignment=’right’ {title}/HighlightThe component used react-measure to listen to the height of if its children and record it in the component state.
  • ‘wave’ : ‘none’} fill=’coral’ alignment=’right’ {title}/HighlightAn example of conditional highlighting, made possible by the ‘none’ shapeRecently one of my teammates built support for Highlight in our custom Markdown component.
  • No developer time required!This tout was built by our web production team using only Markdown in the CMSWhy I Love itHighlight is one of my favorite components in the Birchbox repository because it makes highlighting text on our site as easy and therapeutically pleasing as highlighting text on a physical page.

When Birchbox rebranded in 2016, our new brand guide included a squiggle. It looked like this, and was used to visually emphasize key words or numbers in a block of text. With the assumption that…
Continue reading “Architecting a Squiggle – Birchbox Unboxed”

Use FlexBox to Scale a React Native Background Image – screencasts.tech

Use #FlexBox to Scale a #ReactNative Background Image by @codedailyio

  • CodeDaily.io is an excellent source for screencasts on React Native.
  • Here’s the first in a long series of short screencasts dedicated to helping you master React Native.
  • In this lesson, you will learn how to use Flexbox to scale a background image to fit on the screen of a React Native application.
  • This post was created with our nice and easy submission form.
  • Create your post!

CodeDaily.io is an excellent source for screencasts on React Native. Here’s the first in a long series of short screencasts dedicated to helping you master React Native.
Continue reading “Use FlexBox to Scale a React Native Background Image – screencasts.tech”

Use Flex to Scale React Native Background Image

  • Your link to unlock this lesson will be sent to this email address.
  • In the lesson we will use Flexbox to scale a background image to fit on the screen of our React Native application.
  • Member comments are a way for PRO Members to communicate, interact, and ask questions about a lesson.
  • 1:44 React lesson by Jason Brown
  • Unlock this lesson and all 635 of the free egghead.io lessons, plus get React content delivered directly to your inbox!

In this lesson we will use Flexbox to scale a background image to fit on the screen of our React Native application.
Continue reading “Use Flex to Scale React Native Background Image”