react (8)

Targeting nested elements with EmotionFebruary 05, 2020

CSS in JS is all the rage, but how do you target nested components?

TL;DR Using a pattern of CSS overrides in Emotion can enable you to target nested components within a React application. Problem It is a common pattern to use CSS to target elements nested within another element, in order to only change the appearance of the element within a certain context. Using a CSS in JS solution such as Emotion makes this difficult because you end up with generated class…Keep Reading

#javascript#react#software#css#emotion#web
Generating test IDsNovember 19, 2019

Automatically generate component unique test IDs for React

TL;DR An interesting approach to generating unique identifiers that can be used to target elements, during testing, in your React component render tree. Preface Because React Native does not have any concept of class names or ids, you use to find components in your render tree while testing. When I was working more in React Native, we would heavily use the prop in our tests to accurately target…Keep Reading

#react#react-native#testing#javascript

A build time draft state solution for markdown in gatsby.

The problem After completing the rewrite of my personal website using gatsby, I started migrating all my content from my old website to this one. In the process, I remembered that Jekyll had a way of indicating that a post was a draft, and thus should not be included in the final built version of the website, but would still show up while developing locally. I went searching for a similar way to…Keep Reading

#react#javascript#frontend#gatsby

Doing what an engineer does best, rewriting.

My personal website originally started as a blog built with ghost, the blogging platform. It was simple, easy to use, and had a web-based authoring experience. But I began to feel its limitations in terms of customizing my themes as well as adding other sections, such as projects, or books I’ve read. I switched to using jekyll and did a fresh rewrite. I chose a theme and customized it to work the…Keep Reading

#react#gatsby#website
CodePush, is it worth it?November 03, 2017

What is CodePush and is it worth integrating into your React Native App

Last week at work was hack week, so I took the time to look into getting CodePush into our React Native app. It was pretty simple to get set up but after some discussion with the team, we started to question whether or not CodePush was worth the added complexity. So what is CodePush? CodePush is a service provided by Microsoft for Cordova and React Native apps, that allows you to push out new…Keep Reading

#react-native#react#codepush#git-workflow#app-release

Get a local module working with a React Native app for quick development

After building an app using React Native and using modules from NPM, you may decide that a component in your app could be used by others and you want to share it to NPM. While the typical “How to deploy a JS module to NPM” will get you most of the way there, React Native has a few caveats that need to be addressed. Let’s start by finding a component in our app that can be pulled out into it’s own…Keep Reading

#react#react-native#npm#module

How to get the dimensions of a view in React Native

A common pattern in React Native is changing the layout/sizes of views based on the size of its parent view. We can use React Native’s implementation of flexbox to get us 90% of the way there. But there are just some layouts that flexbox just has a hard time with. In the app I am building at work, there are two common instances where this is the case. When an absolutely positioned view needs to…Keep Reading

#react#react-native#module

Rendering large lists can quickly become very slow. Insert FlatList.

Coming from a primarily web front end and backend developer, I have learned to take some things for granted. On today’s modern hardware, I don’t spend a ton of time thinking about how something might result in slow render performance, since that usually isn’t an issue. But now that I’ve been doing a lot of mobile development with React Native, some patterns have come around to bite me primarily…Keep Reading

#react#react-native#scrollview#flatlist#performance#optimization

© Matthew Sessions 2020