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”

How to code your own procedural dungeon map generator using the Random Walk Algorithm

  • The larger the maxLength is compared to the dimensions, the more “tunnel-y” it will look.Next, let’s go through the map generation algorithm to see how it:Makes a two dimensional map of wallsChooses a random starting point on the mapWhile the number of tunnels is not zeroChooses a random length from…
  • push(num); } } return array; }To implement the Random Walk Algorithm, set the dimensions of the map (width and height), themaxTunnels variable, and themaxLength variable.createMap(){ let dimensions = 5, maxTunnels = 3, maxLength = 3;Next, make a two-dimensional array using the predefined helper function (two dimensional array of ones).
  • Because of this, the directions could be defined as subtractions from and/or additions to the column and row numbers.For example, to go to a cell around the cell [2][2], you could perform the following operations:to go up, subtract 1 from its row [1][2]to go down, add 1 to its row…
  • If within the loop the tunnel hits the edges of the map, the loop should break.while (tunnelLength randomLength) { if(((currentRow === 0) (randomDirection[0] === -1))|| ((currentColumn === 0) (randomDirection[1] === -1))|| ((currentRow === dimensions — 1) (randomDirection[0] ===1))|| ((currentColumn === dimensions — 1) (randomDirection[1] === 1))) { break; }Else set…
  • If so, set the lastDirection to the randomDirection and decrement maxTunnels and go back to make another tunnel with another randomDirection.if (tunnelLength) { lastDirection = randomDirection; maxTunnels–; }This IF statement prevents the for loop that hit the edge of the map and did not make a tunnel of at least…

As technology evolves and game contents become more algorithmically generated, it’s not difficult to imagine the creation of a life-like simulation with unique experiences for each player…
Continue reading “How to code your own procedural dungeon map generator using the Random Walk Algorithm”

Building Size-Aware React Components – LogRocket

Building Size-Aware #ReactJS Components:  by @b_edelstein #JavaScript

  • When using an HTML5 Canvas that has to be re-drawn whenever its size changesWhen building a layout where the user can adjust the sizes of different panesWhen using elements or 3rd party libraries that require a known size like react-virtualized, fixed-data-table, etc.When rendering elements with absolute positioning that need their position adjusted when the container size changes.When animating an element’s size with CSS with additional logic that depends on this animated sizeSome of these behaviors may be achievable with CSS, or by managing window size with the onResize event, but in the interest of building React components that are maximally reusable, it makes sense to encapsulate this logic into the component itself.
  • This method is called whenever the component’s size or position changes, and can be used to trigger side effects or put the dimensions into state.This solves most of the earlier examples but there’s one issue — a chicken and egg problem.
  • As such, we don’t always know the dimensions in the render function, so it’s not entirely possible for the component to have render logic based on its dimensions.react-sizemeTo solve this problem, we turn to a library called react-sizeme.
  • This library is similar to react-measure but uses a clever solution to solve the aforementioned problem.react-sizeme does an initial, invisible render of the component to measure its size.
  • Usually this feels quite fast, but in practice, I’ve noticed a slight delay in detecting changes which can lead to a component feeling slow.In general, react-measure has less of a performance impact, so it should be used if possible, but in cases where a component’s initial render depends on its size, then react-sizeme is a good option.Resources

When building React apps, it is sometimes advantageous for components to have awareness of their size and position on screen. This is useful both for rendering content initially, but also for…
Continue reading “Building Size-Aware React Components – LogRocket”

Just published a small library to make performant masonry layout lists with ReactNative

  • Allows creating masonry style list layouts in a performant way.
  • This component leverages to render performant masonry layout lists.
  • This component supports most of the props of plus a few extras one:

    Returns the height for a specific item.

Contribute to react-native-masonry-list development by creating an account on GitHub.
Continue reading “Just published a small library to make performant masonry layout lists with ReactNative”

Get the Dimensions of a React Native Phone Screen

Get the dimensions of a #ReactJS Native phone screen:

  • Your link to unlock this lesson will be sent to this email address.
  • In the lesson we’ll use Dimensions to get the width and height of the screen.
  • Member comments are a way for PRO Members to communicate, interact, and ask questions about a lesson.
  • 1:10 React lesson by Jason Brown
  • Unlock this lesson and all 704 of the free lessons, plus get React content delivered directly to your inbox!

In this lesson we’ll use Dimensions to get the width and height of the screen. Also we’ll use onLayout to detect orientation changes.
Continue reading “Get the Dimensions of a React Native Phone Screen”