Peter Piekarczyk RSS Feed

How react-native-ease runs animations with no JavaScript loop

Peter Piekarczyk — Wed, 29 Apr 2026 06:00:00 GMT

The AppAndFlow team released an amazing animation library called react-native-ease. Here’s a deep dive into how it works under the hood.

Most React Native animation libraries work the same way under the hood: a JavaScript timer drives a value, that value crosses the bridge (or JSI) every frame, and the native view updates in response. It works, but animation fidelity is tied to the health of the JS thread. Drop a frame processing a list, and your animation stutters.

react-native-ease takes a different approach. Once you hand it a prop change, JavaScript is done. The animation runs entirely on the native side using Core Animation on iOS and ObjectAnimator and SpringAnimation on Android, with no JS involvement per frame.

Here’s how it actually works.

The JS layer does one thing: flatten props

The EaseView component is a pure render function. It takes structured props like this:

<EaseView
  animate={{ opacity: 0.5, scale: 1.2 }}
  transition={{ type: 'spring', damping: 15, stiffness: 120 }}
/>

And flattens them into individual scalar native props:

animateOpacity=0.5
animateScaleX=1.2
animateScaleY=1.2
transitions.defaultConfig = { type:"spring", damping:15, stiffness:120, ... }

There’s no useEffect, no useRef, no animation state. It’s a prop resolver. The interesting part is the bitmask.

The bitmask

React Native’s codegen doesn’t support nullable primitives cleanly. You can’t send null for a Float prop. So when opacity isn’t in your animate prop, JS still has to send something for animateOpacity. It sends the identity value: 1.0.

But now native has a problem: it can’t tell whether animateOpacity: 1.0 means “the user animated opacity to 1” or “the user didn’t animate opacity at all and this is just the default.” Both look identical.

The solution is a single extra Int32 prop called animatedProperties, where each bit flags one property:

bit 0 = opacity
bit 1 = translateX
bit 2 = translateY
bit 3 = scaleX
...

If opacity is in your animate prop, bit 0 is set. Native checks mask & kMaskOpacity before touching opacity at all. If the bit is off, native ignores the value completely and lets React Native’s normal style system handle it. This lets both systems coexist on the same view without conflict.

iOS: Core Animation key-path animations

The iOS native view (EaseView.mm) is a Fabric RCTViewComponentView. The main entry point is updateProps:oldProps:, which Fabric calls every time JS sends new props.

Model layer vs. presentation layer

Core Animation maintains two parallel copies of every layer. The model layer is what your code sets and always holds the final target value. The presentation layer is what’s actually visible on screen during an animation. They’re separate objects.

This distinction is critical for smooth interruption. If the user triggers a new animation while one is already running, the code reads the current visual position from the presentation layer:

fromValue:[self presentationValueForKeyPath:@"opacity"]

If it read from the model layer instead, the interrupted animation would snap to the final value and restart from there. Reading from the presentation layer means the new animation starts from exactly wherever the view currently appears, making interruptions seamless.

Why transforms use individual key-paths

All transform properties (scale, rotation, translation) could theoretically be combined into a single CATransform3D matrix and animated as one. The code explicitly does not do this, and for a good reason.

Core Animation interpolates matrices by decomposing them back into components. This decomposition is ambiguous in certain cases. A rotation from 0° to 360° produces the same matrix at both endpoints, so Core Animation sees no change and does nothing. A combined scale+rotation can decompose differently depending on the order of operations, producing unexpected visual results.

By animating individual key-paths like "transform.rotation.z", "transform.scale.x", and "transform.translation.x", each component is interpolated as a plain scalar. 0 to 6.28 radians is unambiguous. The animations compose correctly on the layer without any matrix decomposition.

The first mount problem

Enter animations (where initialAnimate differs from animate) can’t fire immediately when updateProps: is called on first mount. At that point, Fabric hasn’t finished laying out the view and its frame isn’t set yet. Animating before layout is settled means animating from wrong coordinates.

So the code defers. It sets a flag in updateProps: and waits for finalizeUpdates: and didMoveToWindow, both of which fire after the view is fully laid out and attached to the window, before applying the enter animation.

Reading the room: overriding invalidateLayer

Fabric has a method on RCTViewComponentView called invalidateLayer. It’s called internally whenever Fabric needs to re-sync style props back onto the CALayer, things like opacity, backgroundColor, and cornerRadius after a layout pass. It’s a reliable, consistent hook that fires exactly when you need it.

The challenge is that sync clobbers whatever the animation system put there. A background color mid-transition gets reset to the style value.

Rather than fighting the system, EaseView joins it. It overrides invalidateLayer, lets super do its job, then re-stamps the animated values:

- (void)invalidateLayer {
  [super invalidateLayer];
  // re-apply our animated values on top
}

Fabric tells you when the layer needs updating, so use that signal. It’s a clean handshake between two systems that both want to own the same properties, and it works because the override respects the contract rather than trying to prevent Fabric from running at all.

Android: ObjectAnimator, SpringAnimation, and some physics

The Android side uses ObjectAnimator for timing-based animations and androidx.dynamicanimation.SpringAnimation for physics springs. Getting them to match iOS behavior requires a few non-obvious steps.

Props are batched, not applied immediately

On Android, @ReactProp setters in EaseViewManager don’t trigger animations directly. They write to pending* fields on the view. Then onAfterUpdateTransaction flushes them all at once via applyPendingAnimateValues().

This batching is essential. A single React render might change opacity, scale, and translateX simultaneously. Without batching, each @ReactProp setter would fire a separate animation decision. With batching, all three changes are seen together, just like how updateProps:oldProps: on iOS receives the full old and new props as a pair.

Deriving the spring damping ratio

iOS’s CASpringAnimation takes raw physical parameters: damping (friction coefficient), stiffness, and mass. Android’s SpringForce takes a dampingRatio, a dimensionless 0-1 value where 1.0 means critically damped.

They’re different quantities, but they describe the same physics. The conversion is:

dampingRatio = damping / (2 * sqrt(stiffness * mass))

This is the formula from classical harmonic oscillator mechanics. It means the same damping, stiffness, and mass values produce visually identical springs on both platforms even though the underlying APIs accept different inputs.

Border radius via ViewOutlineProvider

Android has no direct equivalent of CALayer.cornerRadius. Instead, the library uses ViewOutlineProvider, a system API where you supply an outline shape, set clipToOutline = true, and the render system uses that outline for clipping and shadow rendering.

val animatedOutlineProvider = object : ViewOutlineProvider() {
    override fun getOutline(view: View, outline: Outline) {
        outline.setRoundRect(0, 0, view.width, view.height, _borderRadius)
    }
}

The outline provider reads _borderRadius dynamically and is invalidated every frame during animation. The library switches back to ViewOutlineProvider.BACKGROUND when border radius isn’t being animated, so normal style-driven border radius still works when you’re not touching it from animate.

Camera distance normalization

For 3D rotations (rotateX, rotateY), Android’s API takes a cameraDistance value that controls perspective. The conversion from the CSS perspective prop isn’t a direct pass-through:

cameraDistance = density * density * perspective * sqrt(5)

The sqrt(5) factor matches a specific normalization React Native applies internally to make CSS perspective values visually consistent across screen densities. Without it, a rotateY on this view would look different from a rotateY on a standard React Native view at the same perspective value.

The result

No JS animation loop. No worklets. No C++ runtime. When a prop change arrives at native, one of two things happens: a CAAnimation gets added to a CALayer, or an ObjectAnimator starts running. From that point, the render thread handles everything. The JS thread can be completely blocked and the animation continues uninterrupted.

The tradeoff is that the animatable property set is fixed. You can only animate what the native layer understands natively. But for the properties that matter most (opacity, transform, color, border radius), it’s about as low-level as you can get in React Native without writing a custom renderer.

What's actually happening inside Legend List

Peter Piekarczyk — Tue, 29 Apr 2025 12:00:00 GMT

I’ve been working on Legend List and kept running into the same questions. How many containers does it actually create? Why does fast scrolling sometimes show blank space? Where exactly does it stop rendering items?

The answers are all in a small set of formulas that run on every scroll event. So I built a simulator that lets you poke at them directly.

Open the Legend List Engine Simulator

The three props worth understanding

estimatedItemSize is your best guess at the average item height. It feeds directly into how many containers get allocated at startup. Get it too low and you’ll create more containers than you need. Get it way off and you’ll see blank flashes during fast scrolls.

drawDistance is how far outside the visible viewport Legend List pre-renders items. The engine doesn’t split that budget evenly though. It allocates 1.5x in the direction you’re scrolling and only 0.5x behind you. Flip the scroll direction in the simulator and you can watch the buffer zones shift sides in real time.

initialContainerPoolRatio is a multiplier on top of that. Those extra containers sit idle but they’re pre-created React components, ready to activate the moment something scrolls into range without triggering a new render. That’s what the container pool column in the simulator is showing you.

The formula

numContainers = ceil(
  ((viewportHeight - headerSize + drawDistance × 2) / avgItemSize) × numColumns
)

Drag drawDistance up and watch numContainers climb. Add columns and it multiplies. Increase estimatedItemSize and it drops. Everything in the simulator feeds into this.

There’s also a maxVisibleArea cutoff, which sits 1000px past the bottom buffer. Items beyond that aren’t positioned at all. That’s what keeps things fast on long lists.

The formulas in the simulator match the real source in doInitialAllocateContainers.ts and calculateItemsInView.ts.

It will take much longer than you think to build a company

Peter Piekarczyk — Wed, 09 Aug 2023 05:00:00 GMT

One of the most overlooked parts of building a business is time. From the time it takes to close your first customer to the time it takes to build something sustainable.

Chances are, you’re going to underestimate your timelines.

If you think you’re going to build a successful business overnight, your first year or even your third, especially if you’ve never done it before, you’re setting yourself up for failure.

I’m sure you’ve seen the Youtube videos or Twitter posts about some 16yo marketing guru making $1m after a couple of months.

That is not real.

Even if there are folks getting to the point of making $1m, it’s taken them years of trial and error to get there and plenty of failure.

The beautiful part is, like we constantly see in this community, is that folks figure it out eventually. It can take as few as 4 years or as much as 10 for a business to take off.

Some folks get a bit of headwind and manage to pull it off earlier. Others win the lottery.

When you’re in your 2nd year struggling to make any money and you see a friend in the community crushing it, it can suck the wind out of you. The temptation to give up gets real.

The most important thing you can do in that situation is to keep your eyes on the prize.

Your time will come, it just won’t come when you expect it to.

None of it matters until you try

Peter Piekarczyk — Wed, 09 Aug 2023 05:00:00 GMT

Building a business is very hard. It’s quite frankly one of the hardest paths to take when it comes to making money. That’s a fact.

For most of us here, we weren’t trained to become business people. School doesn’t typically set you up for anything like it. Neither do most things in your life.

Chances are your parents and relatives aren’t successful business owners either.

No matter where you’re from in the world or what you’ve been through, there will be challenges.

I believe there’s a mutual respect amongst business owners that went through those challenges on their own. I’ve never met anybody more successful than me who wasn’t willing to help or looked down upon me for even trying.

That’s because understanding the game and getting a piece of that pie is like reaching the final boss of your favorite video game. Success or not, it comes with respect.

You might not get it from your friends & family, but you’ll sure as hell get it from me and anybody else that has made something of themselves.

As much as your friends & family will be there to support you, they won’t understand why you’re taking such a big risk when that cushy, high paying job is available.

Guess what? That cushy job will be there for the rest of your life. Everybody wants to hire an entrepreneur.

So why not go out and try? Stop thinking about it. Go do it.

Chances are you’ll fail your first time around but you’ll learn a lot. You’ll learn even more the second time around, but you’ll probably fail too. Your 3rd, 4th, 5th time, however could play another tune.

But none of that matters unless you go out and try.

The Power of patience in software

Peter Piekarczyk — Fri, 04 Aug 2023 19:19:12 GMT

I think the secret to becoming a great software engineer is actually really easy, but often overlooked.

When your lawnmower stops working, you wouldn’t just throw it away would you?

You’d start some initial troubleshooting: is it out of gas? Is the spark plug dead? Are the blades spinning?

Throwing it all away and starting over every time would be a waste of money and not practical.

Software engineering is a bit different. Here, instead of money, it’s all about time.

Despite making bank, many software engineers often struggle to value their time.

Instead of taking a step back to understand what’s going on, you might start ripping it all apart and rewriting it.

Been there, done that? I know I have.

Maybe it’s because you think the code is too messy or hard to understand.

Or maybe you just want to feel productive and think fingers to keyboard will get you there.

So there you are, 2 days into your rewrite. The bug’s still there, even though the feels neater to you.

Sometimes, you get lucky and just happen to replace the bug. Other times, not so much 😬

Instead of understanding what was already there, you decided to replace it! Why?

Learning how to read & understand code effectively is one of the most widely overlooked skills by schools and bootcamps because it’s assumed that by writing it, you can read it too!

In the real world however, most of your time is spent reading it, so without the proper foundation, you act out of desperation until it gets figured out.

Abraham Lincoln once said, “Give me six hours to chop down a tree and I will spend the first four sharpening the axe.”

This quote is very relevant when it comes to software. Spending time understanding the problem isn’t a waste—it’s necessary. It helps us come up with better solutions.

So the question burning inside of you is, how do I do that?

Well, it’s easy and hard at the same time. Start by reading each line of code.

Don’t just skim it! The million dollar bugs are usually because of just one misplaced character.

Log everything. I can’t stress this enough.

Programs have all sorts of side effects (unfortunately) so even when the code reads linearly, you may uncover a glacier of complexity.

Lastly, run that debugger and walk through each step. For the same reason logs are important, you never know where you’ll end up.

So, if you want to be a great software engineer, start valuing the time you spend understanding problems.

Take a step back, figure out how it works first and then decide how to fix it.

It’s not just about coding, but also understanding.

In software patience isn’t just a good thing—it’s a must-have.

What it means to want it badly enough

Peter Piekarczyk — Wed, 26 Jul 2023 05:00:00 GMT

I was recently asked what it means to “want it badly enough” in a sub-comment on Reddit and I thought I’d share my response with everyone here as a post.

A little about me:

I started a consulting business when I was 12 selling logos and websites on eBay
I ran an agency that generated 40k/mo before I took the plunge into SaaS
I founded a YC-backed startup called Draftbit that made it easy for folks to build mobile apps visually
Now I’m working on a new mobile app called Backpack

I’m 33. I’m the oldest son of Polish immigrants that escaped communism in the late 70s that found their way to Chicago. My mom worked hard at home, my dad worked hard in a factory.

Like many of you, I’ve had to learn “the hard way” what it means to be an an entrepreneur and quite frankly, I still don’t know if I really know what I’m doing, but I know I want it badly enough to keep going.

My parents have been here for 40 years, barely know English yet are remarkably successful for starting with nothing. Their real estate investments will allow them to retire and gave us kids a shot at 10x the life they fought hard for.

When folks say the US is “the land of opportunity” I’ve realized that phrase speaks to the men & women with the fundamental skills that build great enterprises. They were either born with it, were lucky enough to be mentored or wanted it badly enough they got there by sheer determination.

Naval makes the point that you could drop him into any foreign country and he’d be successful again 5-10 years later. I believe this and I also believe that it is a skill you can learn. It might be the hardest skill of all, however.

My friend’s dad taught him everything he knew about building a real estate empire.

Paul Graham taught Alexis Ohanian and the Collison brothers how to build internet companies.

That leaves all the rest of us who don’t have parental connections or mentors.

Whether you come home at 5, 8 or 10pm. Whether you just put your kids to sleep or had a shitty day at work, you’re probably beat. Fatigue is a feeling we all get and all feel in some way or another.

I know folks that get home at 5pm making 400k/yr+ yet still complain about how unfair life is and spend their night playing Call of Duty.

I also know immigrants who barely know English delivering groceries to the complainers during the day, then put their kids to sleep and spend the next 2 hours working on getting their construction business off the ground.

Whether you get thirty minutes or four hours each night, what you do with the time that you have for yourself will define who you’ll become in the future.

The future you want to build could take 2 years, or realistically 10, but as long as you work at it every day, you’ll get there.

That defining moment is up to you: “Do I want to figure out how to live the life of my dreams OR do I want to watch Netflix again tonight?”

Now don’t get me wrong, the chances of an immigrant going from delivering groceries to billions is extremely small, but going from $15/hr and turning that into a 250k/yr construction company is living the dream.

Becoming an entrepreneur is really hard, but not impossible. It’s especially hard if it’s your first time, you don’t have anyone to learn from, you don’t have a lot of time, you’ve got a family to take care of, the list goes on.

The first couple of years will be painful. You will fail 100 times over but you will learn from your mistakes and keep going.

I’ve had friends who were piss broke at 35 that retired at 40. I know someone who started a new company with 3 kids and are on track to hit $1M ARR.

Some folks figure it out early. Some folks figure it out faster. Some folks get a head start. That’s life. It’s not always fair.

So what does “wanting it badly enough” mean?

Wanting it badly enough means instead of watching Netflix tonight, watch a “how to” Youtube video.

Wanting it badly enough means instead of going to the bar, going to bed early and getting a head start on your day tomorrow.

Wanting it badly enough means looking past the uphill battles and life’s inevitable unfairness.

Wanting it badly enough means not feeling sorry for yourself and being resentful at the world for the easy choices that YOU’RE choosing to make.

Wanting it badly enough means putting in the work every single day.

I still haven’t figured it out, but I’m working hard to get there making sure every day counts.

I wrote this out for myself because I too need to be reminded. This is a life long battle and not something that will happen over night. I know through hard work I will get there and I know you will too.

Some thoughts about Practical AI Tooling

Peter Piekarczyk — Thu, 06 Jul 2023 00:54:35 GMT

I think I have a couple of ideas for what some of the tooling, infrastructure or products around AI might look like in the future. This could already exist but nothing that I’ve heard of quite yet.

Model Hosting

The ability for a user to own their own model. Many of the services you see ask you to upload the same 15-20 photos over & over and they all share the same model and most likely train it the same way.

What if we could save ourselves a ton of time & space and just point to the same model? The “secret sauce” required by these products still exist: they have their own seed phrase, etc but now instead of taking 60-120 minutes training, you just go straight into generating.

Indexing Service

Langchain has made it much easier to build conversational chat bots. There are so many ways of splitting different files, texts, etc that you might spend a lot of time trying to optimize it. If there was one great way to split a markdown file, we’d all use it, but alas, we have 10 different types of text splitters with their own variables, etc.

GPU Cloud Services

You can rent a $35,000 GPU for 50 cents an hour: an incredible achievement. What folks still struggle with is how to train the data you want. There are so many different techniques for training a lora, or checkpoints, etc.

Instead of having to rent your own GPU, upload your own photos, why don’t you give us all of that and we’ll figure out the most optimal way to do it?

Pull Request Indexing

I think it’s fair to say that even Google, the indexing giant, would have a hard time indexing all of your data immediately for consumption. Also, if your knowledge or codebase is private, then nearly impossible to index it at all.

That means, you will need to create some form of a pipeline to keep your conversational bot up to date. I can imagine creating flows for indexing services to run on pull requests or commits, so the info stays relevant. I can also see a future where we set different markers in our documnetation so these indexing services have a better idea of how to chunk it, etc.

Working with an array of refs in React

Peter Piekarczyk — Sun, 11 Jun 2023 06:00:00 GMT

This is how you’d tap “next” to select the next TextInput when you have an arbitrary amount of inputs

function Container({ items }) {
  const inputRef = useRef<TextInput[]>([]);
  return (
    <View>
      {items.map((item, index) => (
        <TextInput
          key={item.id}
          ref={(node) => {
            if (node) {
              inputRef.current[index] = node;
            }
          }}
          onSubmitEditing={() => {
            const next = inputRef.current[index + 1];
            if (next) {
              next.focus();
            }
          }}
        />
      ))}
    </View>
  );
}

Say that you create a custom TextInput called MyCustomTextInput, you’ll have to forward the ref:

const CustomTextInput = forwardRef((props, ref) => {
  return <TextInput ref={ref} {...props} />;
});

function Container({ items }) {
  const inputRef = useRef<TextInput[]>([]);
  return (
    <View>
      {items.map((item, index) => (
        <CustomTextInput
          key={item.id}
          ref={(node) => {
            if (node) {
              inputRef.current[index] = node;
            }
          }}
          onSubmitEditing={() => {
            const next = inputRef.current[index + 1];
            if (next) {
              next.focus();
            }
          }}
        />
      ))}
    </View>
  );
}

That should do it!

Troubleshooting Type Error Load Failed in React Native

Peter Piekarczyk — Mon, 13 Feb 2023 06:00:00 GMT

I recently struggled with fixing an cryptic error message: TypeError: Load Failed in my React Native app.

I’m running a service worker within a WebView. On iOS, that service worker runs in Safari. Safari has various issues and this is one of them.

TypeError: Load Failed might end up being a different issue for you, but for me it was a CORS related issue.

Here’s how I figured that out:

Opened Simulator running my app
Opened Safari
Top bar: Develop Menu
Select Simulator
Select localhost

You might see some console.log’s here. I also took the request I was running and copied it directly into Safari’s console to see if I could recreate it.

Sure enough, I had a much better CORS-related error message.

Simple Script for Expo's Eas Build Notifications in Slack

Peter Piekarczyk — Thu, 09 Feb 2023 20:11:04 GMT

Expo doesn’t currently have a way to send Slack updates when a build succeeds or fails. If you’re open to using Cloudflare workers then you’re in luck!

That being said, if you’d like to use this on any other service, that’s easy too! The most important part is the handleExpoStatus code block. This is just a plain javascript object that creates the right Slack message body for the webhook.

Note: Expo recommends you check that the endpoint is correctly secured so you can’t call it outside of your organizations context. I’m not using the SECRET_WEBHOOK_KEY in this example. According to Expo’s docs, you should be checking against a SECRET_WEBHOOK_KEY variable.

If your URL isn’t public, then you should be ok. I added a dumb check to make sure the object includes my team’s metadata. That being said, if somebody discovers this URL, you’ll quickly wake up to spam and change it :)

// replace this
const SLACK_WEBHOOK_URL = "https://hooks.slack.com/services/XXX/YYY/ZZZZ"

async function sendSlackRequest({ text, blocks }) {
  const postToSlack = await fetch(SLACK_WEBHOOK_URL, {
    body: JSON.stringify({ text, blocks }),
    method: "POST",
    headers: { "Content-Type": "application/json" },
  })
}

export default {
  async fetch(request, env) {
    if (request.method === "POST") {
      const body = await request.json()

      // dumb check to make sure the endpoint is correct
      if (body.accountName !== "My Team") {
        return new Response("heh")
      }

      const slackPayload = handleExpoStatus(body)
      await sendSlackRequest(slackPayload)
      return new Response("ok")
    } else {
      return new Response("ok")
    }
  },
}

function handleExpoStatus(body) {
  if (body.platform === "ios" && body.status === "finished") {
    const url = `itms-services://?action=download-manifest;url=https://exp.host/--/api/v2/projects/${body.appId}/builds/${body.id}/manifest.plist`

    return {
      blocks: [
        {
          type: "header",
          text: {
            type: "plain_text",
            text: ":apple-logo: Build completed successfully for iOS :ship_it_parrot:",
            emoji: true,
          },
        },
        {
          type: "section",
          fields: [
            {
              type: "mrkdwn",
              text: `*Build Profile*: ${body.metadata.buildProfile}\n*Version:* ${body.metadata.appVersion}\n*Build*: ${body.metadata.appBuildVersion}`,
            },
          ],
        },
        {
          type: "actions",
          elements: [
            {
              type: "button",
              text: {
                type: "plain_text",
                text: "Download IPA",
              },
              url: body.artifacts.buildUrl,
            },
            {
              type: "button",
              text: {
                type: "plain_text",
                text: "Open Build Details Page",
              },
              url: body.buildDetailsPageUrl,
            },
          ],
        },
        {
          type: "image",
          image_url: `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(
            url
          )}&size=250x250&qzone=2`,
          alt_text: "qr",
        },
      ],
    }
  }

  if (body.platform === "android" && body.status === "finished") {
    return {
      blocks: [
        {
          type: "header",
          text: {
            type: "plain_text",
            text: ":android-logo: Build completed successfully for Android :ship_it_parrot:",
            emoji: true,
          },
        },
        {
          type: "section",
          fields: [
            {
              type: "mrkdwn",
              text: `*Build Profile*: ${body.metadata.buildProfile}\n*Version:* ${body.metadata.appVersion}\n*Build*: ${body.metadata.appBuildVersion}`,
            },
          ],
        },
        {
          type: "actions",
          elements: [
            {
              type: "button",
              text: {
                type: "plain_text",
                text: "Download APK",
              },
              url: body.artifacts.buildUrl,
            },
            {
              type: "button",
              text: {
                type: "plain_text",
                text: "Open Build Details Page",
              },
              url: body.buildDetailsPageUrl,
            },
          ],
        },
        {
          type: "image",
          image_url: `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(
            body.artifacts.buildUrl
          )}&size=250x250&qzone=2`,
          alt_text: "qr",
        },
      ],
    }
  }

  if (body.platform === "ios" && body.status === "errored") {
    return {
      blocks: [
        {
          type: "header",
          text: {
            type: "plain_text",
            text: ":apple-logo: Build failed for iOS :sob:",
            emoji: true,
          },
        },
        {
          type: "section",
          fields: [
            {
              type: "mrkdwn",
              text: `*Build Profile*: ${body.metadata.buildProfile}\n*Version:* ${body.metadata.appVersion}\n*Build*: ${body.metadata.appBuildVersion}`,
            },
          ],
        },
        {
          type: "actions",
          elements: [
            {
              type: "button",
              text: {
                type: "plain_text",
                text: "Open Build Details Page",
              },
              url: body.buildDetailsPageUrl,
            },
          ],
        },
      ],
    }
  }

  if (body.platform === "android" && body.status === "errored") {
    return {
      blocks: [
        {
          type: "header",
          text: {
            type: "plain_text",
            text: ":android-logo: Build failed for Android :sob:",
            emoji: true,
          },
        },
        {
          type: "section",
          fields: [
            {
              type: "mrkdwn",
              text: `*Build Profile*: ${body.metadata.buildProfile}\n*Version:* ${body.metadata.appVersion}\n*Build*: N/A`,
            },
          ],
        },
        {
          type: "actions",
          elements: [
            {
              type: "button",
              text: {
                type: "plain_text",
                text: "Open Build Details Page",
              },
              url: body.buildDetailsPageUrl,
            },
          ],
        },
      ],
    }
  }
}

Time is becoming more precious

Peter Piekarczyk — Mon, 30 Jan 2023 20:11:04 GMT

The older I get the more I start to understand how valuable time really is.

Years ago I heard a quote that went something like, “When you’re young, you exchange money for time. When you’re old, you exchange time for money.”

Maybe I’m just getting impatient as I age, but I think I’m starting to understand what that means now. I used to think that I had all the time in the world.

Now that family life, weddings, friendships and eventually kids are starting to show up in my daily life, I’m starting to see that I’ve got much less time than I used to!

I spent my Sunday night upgrading the framework for this blog. It took me about 3 hours to do and at the end of it, my blog looks exactly the same. You might think to yourself, “4 hours isn’t that much!” and you’re right, it’s not. But when you’ve got other things going on and features to build, you start to pay attention to that time spent.

I asked myself, “was it worth it?” Should I have just paid $9/mo for Ghost and moved on? Maybe. Probably. Why didn’t I do it then? Is it because I like to own my own data? Is it because I’m worried Ghost will go out of business and I’m stuck exporting files from within some walled garden? That is something that came up too.

I could have spent that Sunday night writing up a new article or spending some more quality time with Lauren.

Maybe I’m being overly critical of myself, maybe I worry too much about optimization at the edge. Maybe I’m just looking for a reason to write something.

The point is, I’m realizing my time is becoming precious. I should get used to that sooner rather than later.

My Thoughts on Messari's 2023 Thesis

Peter Piekarczyk — Thu, 29 Dec 2022 06:00:00 GMT

Some opening thoughts

I’ve been a fan of Messari’s Theses since 2018. Ryan can be annoying on Twitter, but I think we’d actually be friends in real life.

For starters and most importantly, I love how he ends his 160+ page thesis with a grounding point: buy a house in the burbs & start a family.

While that may not be everyone’s goal, it resonates with me. We take our jobs so seriously, nothing beats the feeling of coming home to a 4 year old excited to see you (I’m not there yet, but I’m looking forward to it).

I also appreciate his philosophy around writing. His section “why you must write” is a great reminder around how important it is. To think clearly, you must write well. To write well, you must read well. I’m not sure who said it but I believe in the idea.

I’m writing these thoughts out for myself, but hope that others may find them useful.

My Thoughts

I’m excited about the bear market. I think it filters out a lot of the noise: the scammers, ponzies and pump and dumps. It’s hard to get into crypto as a developer because you must know where to look to learn how it all works. Bear markets are a great opportunity. Bear markets are for builders.

Ethereum will face pressure with T-bill rates so high

I think this is an interesting point. A guaranteed, non-taxable federal reserve rate of 4.6% is great. ETH Staking offers 5-7% on an asset that goes up and down in price. That might be worth it if I’ve been holding eth for years. If I’m thinking about buying eth now, I think I would rather wait for the new year and see what happens.

Ethereum’s revenues are shrinking. Apple’s P/E is 23. Ethereum’s “P/E” is 195. If you’re looking at financials alone, ethereum is overvalued. I was playing around with ultrasound.money and it seems like the current price should be around $600. That being said, after checking it this morning, something was fixed on the site and pegged it’s P/E to 30 and locked in a price of 1.2K USD. /shrug

Validator decentralization

70% of hosted nodes for both ETH and SOL are on AWS, Hetzner and OVH
50% of Solana validators are located either in Germany or the US
60% of Ethereum validators are located in either Germany or the US

I’m not sure if this worries me as much as it offers an interesting fact on what’s going on. I think this might be a cause for concern long term but it also is an awesome opportunity to spin up validators in different countries.

Things I learned

Account Abstraction: streamlines user management of accounts and assets. I think I saw an example of Lens do this recently. It brings a UX experience most of us are used to in web2. Instead of having to sign every mundane transaction, you delegate permission to a smart contract that takes care of that for you. Similar to scopes in OAuth. For lens this works great for posting content.
Proposer Builder Separation: Delegates computationally intensive work to specialized block proposers. I’m still struggling to figure out what this does but it seems like it would make it easier for anybody to run their own ethereum node.
Light Clients: light clients use a new process to validate parts of the tree (I think). This opens up the opportunity to run nodes on laptops and phones rather than through third-party hosted nodes or centralized RPC providers.
Stablecoins. Terra UST took place earlier this year. I liked UST and used it myself. That being said, I was looking the other way when I should have been staring at the red flags. It was considered a decentralized stablecoin, something we need. Something that clearly didn’t work. Ethereum has its own algo stablecoin called FRAX. It’s partially algorithmic, otherwise backed by collateral. Whether it’ll work or not is TBD. I think it will be awhile before algo stablecoins become popular again, even if FRAX is great.
Rollups. There’s a new concept called soverign rollups. They’re a mix and match blockchain that shares consensus or data availability. There’s a thesis that appchains on Cosmos will be part of the next bull run as folks start building specific chains for their own applications (hence app chains). Think of having a specific a e-commerce based chain that can roll up its security to Ethereum, etc.
Shanghai upgrade is supposed to happen around March 2023. This will allow folks to finally unlock their staked ETH. This also changes the duration to 27 hours. You could argue that folks staking their eth have been chomping at the bits to sell. But since they’ll be able to unlock almost every day, the risk to unlock falls dramatically. One could argue that this will increase the amount of ETH staked and increase the price.
JP Morgan proejcted staking could be a $40B/yr industry by 2025. That would have to grow to $40B. In that case, that would be $1.6B/yr in annual revenue for Lido. A massive money maker! Wow.
I learned that Goldfinch has been growing steadily despite crypto volatility. Goldfinch’s offers off-chain loans. Their risks are the fintech sector and higher developing economies
Zerion, Zapper & Nansen make it easier to track specific wallets in real time. They also allow you to manage full, complex portfolios from a single dashboard

Final Thoughts

Although this year has been filled with a lot of uncertainty around crypto, I’m generally excited. I think everyone is looking for the opportunity to buy more. I’m not sure what that will look like long term. I’m not sure if I want to start buying crypto today or sometime in the new year. Things seem pretty stable right now. The feeling of “am I going to miss the next bull run” is always in the back of my mind. Maybe I will, maybe I won’t. Most importantly, I have to remember to keep building.

React Native SectionList Expand & Collapse Guide

Peter Piekarczyk — Fri, 16 Dec 2022 18:01:28 GMT

React Native has a component called SectionList that will render things in sections. Think favorite foods:

Deserts: ice cream, cheesecake
Drinks: water, coke, beer

The not-so-obvious part is how you can create a collapsible version of this. By collapsible I mean, being able to hide the individual items upon tapping the header:

Luckily for you, getting it working is straight forward. The key is using the extraData prop for a SectionList.

extraData just re-renders the list when you have to pass in new data somewhere (like changing the expand/collapse toggle state.

Then you can use useState and an array or a set to get it working. I use a Set here b/c it’s easy, but in its purest form, here’s all you need to know:

 <SectionList
    sections={DATA}
    extraData={expandedSections} // extraData is required to re-render the list when expandedSections changes
    keyExtractor={(item, index) => item + index}
    renderItem={({ section: { title }, item }) => {
      // check to see if the section is expanded
      const isExpanded = expandedSections.has(title);

      //return null if it is
      if (!isExpanded) return null;

      return <Item title={item} />;
    }}
    renderSectionHeader={({ section: { title } }) => (
      <Pressable onPress={() => handleToggle(title)}>
        <Text style={styles.header}>{title}</Text>
      </Pressable>
    )}
/>

To see a working version of this, check out this Snack. In the event the Snack stops working, here’s a gist you can copy/paste somewhere with the same code.

Getting Cairo, Starkware's Language Up and Running on an M1 Mac

Peter Piekarczyk — Wed, 14 Dec 2022 22:11:04 GMT

Cairo is a powerful language. Their developer docs could use some work 😅 I was going to PR this until I realized their docs aren’t public, so here we are!

There are two repos:

Cairo Lang

The original python implementation. I’ve heard it doesn’t scale well and it seems like it’s deprecated in favor of Cairo.

This hasn’t happened yet so you might still have to get it working.

Cairo

The new Rust implementation. Seems way easier to use, built in rust. The new path forward!

Despite having both of these options, you might still need to get Python up and running.

Here’s how I did it:

The first few steps are easy. You’re installing a specific version of python via brew and following their docs

brew install python@3.9
python3.9 -m venv ~/cairo_venv
source ~/cairo_venv/bin/activate

This is where it gets interesting. I had to install this arch -arm64 version of gmp first.

arch -arm64 brew install gmp
brew --prefix gmp

Once you’ve confirmed it works and you’re running this within your python3 environment, you need to set these flags.

What do these flags do? Just make sure that pip is installed with the correct version of gmp

CFLAGS=-I`brew --prefix gmp`/include LDFLAGS=-L`brew --prefix gmp`/lib pip install ecdsa fastecdsa sympy
pip3 install cairo-lang

Once you’ve done that, this should run!

cairo-compile test.cairo --output test_compiled.json

Creating Fun Selfies with Stable Diffusion

Peter Piekarczyk — Wed, 14 Dec 2022 06:00:00 GMT

It’s been fascinating to watch all the big updates coming to Stable Diffusion v1 and v2. I’ve created a Notion doc where I’ve been tracking my prompts & results.

There are also some steps in there to get yourself started too. Learn more here

Joining Backpack

Peter Piekarczyk — Mon, 05 Dec 2022 05:00:00 GMT

I’m thrilled to announce that I’ve joined Backpack to lead mobile engineering 🎉

I recently stepped down as Draftbit’s CTO and have been taking a break exploring what my journey will look like. Today, I’m excited & humbled by the opportunity I’ve been given to work with a world-class team on Backpack.

For those who may not be familiar, Backpack is a portal into web3: one-stop shop for all your DeFi apps, NFTs, games and much more.

It’s no secret that the crypto world today is ridden with landmines. DeFi projects are constantly getting hacked or fake phishing sites are put up to confuse people. It can make sleeping at night quite difficult. I’ve been watching the space since 2014. It was about time to get involved. I knew that whatever I was going to work on, I needed to make sure it made life better for the every day person, not worse.

That’s where Backpack comes in. The driving feature behind Backpack is an xNFT. So, wtf is an xNFT?

What’s an xNFT?

According to Armani, the creator, X stands for eXecutable: tokenized code representing ownership rights over its execution. In layman’s terms: instead of pointing a regular old NFT at a jpeg on S3, you can point it at some javascript and create an entirely new world.

xNFTs will create an ecosystem of decentralized apps using protocol-agnostic frameworks that work across your all favorite chains including Ethereum, Solana & many more. The interface for all this is Backpack. Today, you can think of Backpack as a wallet but tomorrow, it will be so much more than that.

Backpack is launching with an app store that includes anything from games like Flappy Bird to NFT marketplaces & even developer tooling. These apps are all verified on chain. On-chain verification means the code you ship is the code your users will see. There’s no way nefarious actors will be able to bait & switch code or create fake URLs that look like a real project. This is one of the many efforts to create a safe and fun way to interact with a web3 world.

We already have some incredible xNFTs in our ecosystem:

Double Diffusion

Double Diffusion is Stable Diffusion powered by Solana. You have the ability to generate and mint anything and pay a low fee of 0.0025 (about 3 cents) per query. This gives the power back to the creator.

2048

An engineer’s favorite, you slide numbered tiles on a grid to combine them to create the number 2048. A fun & free game.

Releap

Releap is a music NFT platform. This allows you to listen to your music NFTs anytime, anywhere

Solend

Solend is a DeFi protocol for lending and borrowing on the Solana blockchain. Think Aave or Compound on Solana. Solend allows anyone with an internet connection to earn interest by lending their crypto assets, and allows them to use their deposits as collateral for borrowing.

Building a better ecosystem for the every day person

Today, blockchain is something you need to understand to use correctly. Tomorrow, users won’t have to worry about which chain they’re using, how they need to transfer funds and whether the site they’re using is real. You don’t need to know how the internet works to use Facebook or Netflix. With Backpack, we’ll bring that same level of harmony to web3.

Backpack is built by a world-class team. I’ve quickly realized I’m working with some of the most talented & smartest people in the world. Quite frankly, I’ve had a bit of imposter syndrome. I’m excited to learn, contribute to making Backpack the best portal and ecosystem in the world.

Lastly, why am I so excited about mobile? You’re probably reading this on your phone. Expect to interact with web3, blockchains & crypto the same way. I’m bullish on a safe & secure mobile wallet experience.

I’m grateful for the opportunity to work with such a talented and smart team at Backpack. I can’t wait to learn from them and contribute to building the best portal and ecosystem for web3. And as a mobile enthusiast, I’m especially excited to help create a safe and secure mobile wallet experience for our users.

There’s a lot of work to be done, but I’m ready for the journey ahead!

WAO, Peter P.S. WAO = We Are One

Check us out:

Setting up Ikea Fyrtur Blinds in HomeAssistant without a Gateway

Peter Piekarczyk — Fri, 27 Nov 2020 16:06:23 GMT

Setting up IKEA’s Fyrtur blinds with Home Assistant is easy. No gateway required.

My blinds were previously controlled with the remote control and repeater, aka a “working state”. I was able to switch over to Home Assistant just fine, without having to reset anything.

Steps

Make sure to charge your blind battery to 100%. This helps with pairing.
Press and hold the top and bottom buttons on the blinds for a couple seconds until they start breathing/flashing.
Go over to your Zigbee setup in Home Assistant and press “Add Device”.

In about a couple seconds you should have a green box pop up that says “Pairing Successful”. You no longer need to use the repeater. The remote will not work anymore either.

That being said, you could probably find a way to connect the remote directly to Home Assistant but I haven’t done that.

I’ve noticed that cover.set_position works much better than open and close. This is running version 2020.12.7. Maybe it’ll be fixed by the time you’re reading this.

Quickly delete old git branches with fzf and zsh

Peter Piekarczyk — Sat, 01 Aug 2020 05:00:00 GMT

Do you fall victim to having a million branches when typing in git branch? It’s a pain. I wrote this quick helper that lets me select the branch I want and deletes the rest:

You need fzf for this to work: brew install fzf. Fzf is one of the sickest tools of our generation so do your own research and start incorporating it into your every day flow!

Place this in your /.zshrc file and re-open your terminal. Viola.

# fbd - delete git branch (including remote branches)
fbd() {
  local branches branch
  branches=$(git for-each-ref --count=30 --sort=-committerdate refs/heads/ --format="%(refname:short)") &&
  branch=$(echo "$branches" | fzf --multi ) &&
  git branch -D $(echo "$branch" | sed "s/.* //" | sed "s#remotes/[^/]*/##")
}

Thanks to pgrepo on reddit for pointing out that for this to work with remote branches that you need to add [fetch] prune = true into your .gitconfig

Installing Home Assistant on Ubuntu, The New Way

Peter Piekarczyk — Fri, 31 Jul 2020 03:39:01 GMT

Have you recently tried installing Home Assistant on a new Ubuntu box? The installation docs are different and the thing that you’re looking for is nowhere to be seen. Finally, you find the Docker installation and run the appropriate scripts only to realize the “Supervisor” sidebar went missing.

If you’ve been scratching your head to figure out what happened, this (slightly salty) article is for you.

What Happened?

The Home Assistant team recently decided to deprecate the installations for generic Linux machines on May 9th.

For better or for worse, the team doesn’t collect any telemetry data so a week later they undo that decision (after what must have been a stressful series of “wtfs” in the community).

I Still Love Home Assistant

As frustrating as this is, it’s hard to get upset at a group of folks who work so hard to release this amazing platform, in the open, for free. I’m sure they’ve learned a lot when it comes to managing an open source project and managing a business.

The New Problem

Supervisor is actually completely separate than Home Assistant. Who knew!? Nobody.

I’m sure, like me you spent the afternoon Googling wondering why “Supervisor” doesn’t show up (the thing with all the add-ons) when you went through the installation docs.

The funny thing about all this is that Home Assistant still offically supports Debian but who the fk uses Debian!?

Getting started

Home Assistant’s top post on their forums is Installing on Ubuntu. They no longer “officially support” Ubuntu but “support it in other ways”.

The process is pretty straight forward. The difference is that this awesome person Jason (Kanga-Who) forked the script and has been maintaining it. The reality of it is there isn’t really that much maintenance to be done. Once you have this running you’ll be able to use and upgrade Home Assistant the same way you’ve always been able to!

I won’t walk you through the process of setting up a USB stick to install Ubuntu. You can read about that here

sudo -i

apt-get install -y software-properties-common apparmor-utils apt-transport-https avahi-daemon ca-certificates curl dbus jq network-manager socat

systemctl disable ModemManager

systemctl stop ModemManager

curl -fsSL get.docker.com | sh

curl -sL "https://raw.githubusercontent.com/Kanga-Who/home-assistant/master/supervised-installer.sh" | bash -s

Config folder path

Protected more closely than Ft. Knox, the config path on the installation instructions has always been hard to find. Using this installation step, it’s located here:

/usr/share/hassio/homeassistant

Yes, its easy to lose it when all you see is YOUR_CONFIG_PATH_HERE:/config with literally 0 clues on where it should go or where it lives.

The backup/snapshot directory on the other hand is located here:

/usr/share/hassio/backup

Exposing USB Devices

In my experience all my devices started showing up properly and there was nothing else I needed to do! If you follow this same installation method, you’ll totally be in the clear.

Easily Deleting Deeply Nested Files with fd

Peter Piekarczyk — Fri, 05 Jun 2020 16:06:23 GMT

fd is a modern replacement to the unix util called find. MacOS has all of these installed by default but they’re really out of date. You can upgrade them via homebrew but then you’re forced to prefix them with g or something else. Instead of having to worry about that, I’d rather just install fd via homebrew and never have to worry about compatibility.

Deleting files in a nested repo is so tiring, especially with git, so this is what I do:

fd MyFile.js -x rm -rf

It doesn’t matter where MyFile.js lives, it can live src/my/project/here/MyFile.js and it’ll find it and instantly delete it!

Install it using brew: brew install fd

Learn more about fd here

Using async / await with reduce in Javascript

Peter Piekarczyk — Thu, 04 Jun 2020 00:54:35 GMT

I got stumped trying to figure out how to use async / await. Here’s how you do it:

async function buildObject(items) {
  
  // promise here is technically the accumulator so we await to get it
  return items.reduce(async (promise, item) => {
    const obj = await promise;
    obj[item.id] = await getItem();
    
    // return the object as usual
    return obj
    
    // resolve an empty object (the thing we want)
  }, Promise.resolve({}));
}

Pretty sick huh

Using Global Node Modules The Right Way

Peter Piekarczyk — Sat, 23 May 2020 17:43:23 GMT

When using tools like nvm, n or even homebrew you can end up installing multiple verisons of Node. This could mean that when you run npm install -g over time you’ll have the same executible installed in a bunch of different places. See for yourself:

type -a expo-cli

Do multiple versions come up?

A Global npmbin

Create a global npmbin: one place to store all of your global dependencies without having to call them with the global flag! This folder will have its own package.json and specific node version. No more node_module bloat, no more linking, it just works.

Creating your bin

Create a new directory under home and cd into it:

mkdir ~/npmbin/ && cd $_

Init with package.json. None of the fields really matter, its all local.

yarn init (or npm init)

Add ~/npmbin to your path. Open your ~/.bashrc or ~/.zshrc and on a new line:

export PATH="$HOME/npmbin:$PATH"

What this does is makes ~/npmbin available to use everywhere. Save & restart your terminal window.

Then navigate back to your ~/npmbin directory and install a module you’d typically use globally (expo-cli or gatsby-cli are two I use a lot):

Don’t use --global or -g! You don’t need to anymore :smile:

npm install `expo-cli`

Conveniently Installing Modules

You might think its annoying to have to cd into ~/npmbin every time you want to install something globally. Although it doesn’t happen alot, I still did. I created a simple alias function to make it easier:

yg expo-cli

Think yarn global but call it whatever you’d like!

yg() {
  cd $HOME/dotfiles/npmbin
  yarn add $@
  cd -
}

Cd into npmbin
add the file that was passed in as an argument
cd back to wherever you were

Place this inside your ~/.zshrc or ~/.bashrc file and restart your terminal. Give it a go.

Git Checkout Tricks You've Never Heard Of

Peter Piekarczyk — Wed, 20 May 2020 01:00:53 GMT

Want to know one of my favorite git secrets? It has to do with git checkout.

Sometimes you’ve made and committed files that shouldn’t be there. Stuff like prettier or console.logs you forgot to remove. You can mess around with git cherry-pick or git revert but that can be a hassle sometimes.

If you have a file called screens/MyScreen.js that you want to completely reset based off master, run this:

git checkout origin/master -- my/file/whatever.js

This works with other branches or folders, just replace master with any-branch-name and the file with the folder name:

git checkout origin/any-branch-name -- folderName

Running this will completely reset the file and get you back on track to merge your PR in!

Have your own tricks? Let me know.

Filing for Blog Bankruptcy

Peter Piekarczyk — Sun, 17 May 2020 18:01:28 GMT

You want to know the worst part about blogging? It’s the part where you don’t actually get to writing anything.

You spend days, weeks, maybe even months tirelessly trying to get your Gatsby theme to look like Kent C. Dodd’s and by the time you get there, you’re totally over it!

Then you wait another 3 months before that need to do great things comes over you. You’ve completely forgotten about how complicated Gatsby setup can be so you start over. Rinse & Repeat.

Don’t get me wrong, Gatsby is great (at least marketing has told me this). I’m tired of setting things up from scratch.

I generated this new starter blog with minimal effort. I added disqus. I’m adding a home page. I’m calling it a day.

Welcome to my new blog, powered by Gatsby.

Installing & Securing dd-wrt

Peter Piekarczyk — Fri, 01 May 2020 05:00:00 GMT

I recently upgraded my TP-Link Archer c9 version 1 router to use dd-wrt. It’s powerful as it is but the additional settings I can add are fantastic.

Navigate to your router default homepage http://192.168.1.1/

Change Password

Setup Tab

Assume if a field isn’t listed, you don’t have to change it!

Optional Settings

Router Name
- Change to whatever you’d like

Router IP

Local IP Address: Change this! This’ll help prevent malware from spreading:
- 192.168.7.4 or 192.168.3.6 - just don’t keep it the default 192.168.1.1

Network Settings

Make sure DNSMasq for DNS and DHCP-Authoritive are checked

Time Settings

Time zone - check the right timezone

Click Save, then Apply Settings

Open up your computer’s Network Settings (System Prefs → Network)
Ethernet / WiFi click “Advanced”
Click RENEW DHCP Lease
You can also toggle your WiFI on/off or unplug your ethernet cable back in

Go back to

Basic Wireless Settings

Wireless Security

Security

** I have WAN requests ping enabled for line quality tests on dsl reports

Adminstration Keep Alive

Commands

In startup script, I have these 3 settings. This is the “Transmit Queue Length”. I have a very small length set from the traditional 1500 to help improve ping times.

ifconfig eth0 txqueuelen 2
ifconfig eth1 txqueuelen 2
sleep 10

Pi-hole settings

Pi-hole is a network adblocker that runs on the raspberry pi:

These settings live under Services > DNSMasq.

dhcp-option=6,192.168.XXX.XXX
domain-needed
bogus-priv
no-resolv
server=192.168.XXX.XXX
expand-hosts

Resources

Protect your Home & Mobile Network with NextDNS

Peter Piekarczyk — Mon, 27 Apr 2020 05:00:00 GMT

NextDNS is the privacy-enabled tool you’ve been waiting for. It’s like Pi-hole but runs in the cloud.

Right now it’s free, but once they leave beta they plan to charge a couple bucks a month. Worth. every. penny.

NextDNS will encrypt your DNS, block ads, bypass censorship, protect your privacy and offer parental controls.

NextDNS will also protect you from everything like Cryptojacking, threat intelligence, crazy algorithms, NSA spying, wide spectrum trackers (like wtf!) and much more

Finally you can use NextDNS like a Pi-hole in the cloud and block any list of websites, including lists like Steven Black’s Host Files.

Running NextDNS via Apps

You can run NextDNS on every device individually. Download the specific app, enter your configuration id, done!

Make sure you’re running an up to date DD-WRT version. Most routers support the latest updates.

Running NextDNS directly on your Router

The nice part about this is that you don’t have to install any apps. The tricky part is, depending on the router/software you have, this can turn into a shitshow.

You can see if your router supports one-click install here. A lot of your favorite routers are supported:

OpenWRT
Merlin (Asus)
Ubiquiti EdgeOS / USG
Synology
VyOS

Since I run dd-wrt, it’s a bit more complex:

Warning - This Shit Is Complex And You Might Brick Your Router

Don’t blame me for it, every router config is different. YMMV, etc. Make sure you back it up and whatever.

Enabling JFFS if you don’t have it enabled

https://wiki.dd-wrt.com/wiki/index.php/JFFS#Enable_JFFS:Create.2Fjffs

Click Administration Tab
Scroll down to JFFS2 Support. It’s probably disabled. Click Enable
Save. Wait a few seconds. Then, click Apply Settings.
Go back to JFFS2 Support. Click “Enable” on Clean Internal Flash Storage. Don’t click Save, just Apply Settings.
Once the settings are applied, turn off Clean Internal Flash Storage and Click Save
Reboot your router!

Installing Entware on DD-WRT

https://wiki.dd-wrt.com/wiki/index.php/Installing_Entware

It sounds like a PITA but it really isn’t bad. You need a USB stick.

You need e2fsprogs to convert to e2f fiesystem that’s supported by your router:

brew install e2fsprogs

sudo $(brew --prefix e2fsprogs)/sbin/mkfs.ext2 -L opt /dev/disk2s1 Run diskutil list to see the right disk
mkfs.ext2 for USB dis, mkfs.ext3 for hard drive
If you get a “resource busy” command then run diskutil unmount disk3 (again, find disk with diskutil list)
Once that’s done, plug it into your router
Go to DD-WRT Admin, find Services USB and turn on: Core USB Support, USB Storage and Automatic Drive Mount are all enabled
Reboot your router
Download Entware
Go here and under “Installation” figure out your router type. It’s probably ARM7 but make sure !!! https://wiki.dd-wrt.com/wiki/index.php/Installing_Entware

mkdir /opt/jffs
mount -n --bind /opt/jffs /jffs

cd into /opt/jffs

Install NextDNS

Whew, we’re finally here!

sh -c "$(printf "GET /install HTTP/1.0\nHost: nextdns.io\n\n" |
    openssl s_client -quiet -connect "nextdns.io:443" 2>/dev/null |
    sed -n '/^\r/,$p' | sed 1d)"

Restart your Router

Closing Thoughts

DD-WRT support is finnicky right now, but the NextDNS team is actively working on making it a one-click installation.

FNM: The Fastest Node Version Manager Ever

Peter Piekarczyk — Sun, 22 Mar 2020 05:00:00 GMT

We’ve been using nvm, n and maybe even homebrew for years to manage our Node.js version. They have been good enough until now. fnm stands for “Fast Node Manager”.

It’s written in ReasonML and has literally instant startup times:

Features:

Single file, easy installation, instant startup
Built with speed in mind (seriously)
Works with .nvmrc and .node-version files (compatible with your current tooling)

Installation:

brew install Schniz/tap/fnm

Configuration:

After you’ve installed it, you have to add fnm to your path. I use zsh so this is what I have in my .zshrc file:

eval "$(fnm env --multi --use-on-cd)"

Breakdown

--multi - will allow you to use a different Node version per shell. This means if you open a new terminal window and change the version number, it won’t be linked to the old one (this is what you want!)

--use-on-cd - will automatically switch the node version based on your .nvmrc file. You might have had this off if you’ve used nvm in the past, but its blazing :fire: fast, it’s worth keeping it on by default

Learn more on Github

Adding Spotify to Home Assistant

Peter Piekarczyk — Mon, 02 Mar 2020 06:00:00 GMT

Home Assistant recently changed the way Spotify’s configured so I wrote up a guide. This works with most versions of HomeAssistant but I used it with 106 & up.

Steps

Login to the Spotify Developers Console with your Spotify username and password.
Click Create a Client ID in the top right corner. A popup should appear.
Enter Home Assistant (or whatever) for the app name. Description doesn’t matter. Put “Automation” in the description. A new pop up appears.
Click the Non Commercial button on the right hand side.
Checkmark Website and then press Next. Next popup.
Click all 3 checkboxes and then click Submit.
You’ll see a new page with your newly created app.
In the top right corner, click the green button that says Edit Settings. A popup appears. We need to add Redirect URI’s and nothing else.
Create two redirect URIs. One that goes to your lovelace UI and the other to the appropriate URL. **Even if you have Nabu Casa or DuckDNS set up, just use your local http:// URL.
- http://192.168.0.1:8123/lovelace/lovelace_default_view
- http://192.168.0.1:8123/auth/external/callback
Click Show Client Secret. Open up Configuration.yaml and paste the keys directly or use secrets.yaml (like I have below)
Create a spotify key in your configuration.yaml file as shown below. I use the secrets.yaml file which is why you see !secret.

spotify:
  client_id: !secret spotify_id (OR "clientidxyz")
  client_secret: !secret spotify_secret (OR "clientsecretxyz")

Restart Home Assistant by going to Configuration and clicking Server Controls, then Restart.
You’ll see a new notification in the bottom left corner for New Devices Discovered. Click Check it out, then click Configure under Spotify. Everything should happen automatically.
Once that pos up, you should see a pop up that says Success. Just click Finish.
If you have any other Spotify integrations, just click Ignore.
You’re Done!

Add Spotify to your Lovelace Dashboard

If you want to add Spotify to your LoveLace Dashboard. Click Spotify under Configured, then click it again.

You’ll now see a page with Automations, Scenes, etc. Just click Add To LoveLace at the top. **This seems to be broken in 106, but if you check your dashboard it might just show up so who knows!

GraphQL Getting Past Step 3

Peter Piekarczyk — Wed, 19 Feb 2020 06:00:00 GMT

GraphQL is becoming one of the most popular data query libraries in the world. This is a talk that I’ve converted into an article. Enjoy!

First Version of Draftbit

Node
React
Postgres
Raw SQL Queries & knex (for the most part)
GraphQL

https://media.giphy.com/media/mIvrv5Qe0kHlu/giphy.mp4

Throwing stuff at the wall and hoping it sticks (it didn’t)

We quickly realized we weren’t doing things the right way so we started rewriting new features

Draftbit 1.1

ReasonML on the client ✅

Draftbit 1.2

TypeORM ✅
TypeScript on the Server ✅
Prisma ✅

Draftbit 1.3

Dataloader ✅
Thinking about structuring our GraphQL queries more efficiently ✅✅✅
Writing Tests ✅✅✅

Good but not great

GraphQL field resolvers aren’t being used correctly. The SQL is fast but because of how we’re handling this in a nested data structure, its not necessarily taking full advantage of GraphQL.

This also meant that we were writing custom queries for every type of request we wanted, instead of being able to traverse the tree.

There are pros & cons to this (but mainly cons).

const getAppById = async (
  _,
  { uuid },
  { db, user: { uuid: userId } },
  info
) => {
  let app;
  const result = await db.raw(
    `
        SELECT a.*,
        (
          SELECT COUNT(*)
          FROM app_screens a_s
          INNER JOIN screens s
          ON a_s.screen_id = s.id
          WHERE app_id = a.id
          AND s.is_deleted IS FALSE
        ) as num_screens
        FROM apps a
        WHERE a.uuid = ? AND a.is_deleted IS FALSE
      `,
    [uuid]
  );

Much better

We’re utilizing GraphQL’s field resolver pattern correctly. Instead of having to re-write the same query, we were able to utilize Dataloader to fetch the id from cache on every tick

t.list.field("app", {
  type: AppType,
  resolve: async ({ uuid }, _, { loaders }) => {
    return loaders.appsByWorkspaceUuid.load(uuid);
  },
});

Dataloader

https://github.com/graphql/dataloader

DataLoader is a generic utility to be used as part of your application’s data fetching layer to provide a simplified and consistent API over various remote data sources such as databases or web services via batching and caching.

*Dataloader works by taking an array of ids and returning an array of promises that fulfill that data

function getComponents(arrayOfIds) {
  const components = getComponentsById(arrayofIds)
  return components
}

// ...

const componentLoader = new DataLoader(getComponents)

componentLoader.load("xyz-abc")
componentloader.loadMany([1, 2, 3])

I struggled getting this right for awhile and avoided dataloader. That was partially because we weren’t using field resolvers correctly so I wasn’t thinking about using it the right way.

GraphQL Nexus

https://github.com/prisma-labs/nexus

Declarative, code-first and strongly typed GraphQL schema construction for TypeScript & JavaScript

GraphQL Nexus helps you write your graphql schema with typescript by generating definitions alongside of your code. It’s allowed us to identify errors in the way that we return data very easily.

import { queryType, stringArg, makeSchema } from "nexus";
import { GraphQLServer } from "graphql-yoga";

const Query = queryType({
  definition(t) {
    t.string("hello", {
      args: { name: stringArg({ nullable: true }) },
      resolve: (parent, { name }) => `Hello ${name || "World"}!`,
    });
  },
});

const schema = makeSchema({
  types: [Query],
  outputs: {
    schema: __dirname + "/generated/schema.graphql",
    typegen: __dirname + "/generated/typings.ts",
  },
});

const server = new GraphQLServer({
  schema,
});

server.start(() => `Server is running on http://localhost:4000`);

GraphQL Nexus doesn’t do anything else besides constructing your graphql schema (code-first), which means that you don’t have to use their stack or servers or whatever. All it will do is generate a schema.graphql file that you can include.

TypeORM

https://github.com/typeorm/typeorm

ORM for TypeScript and JavaScript (ES7, ES6, ES5). Supports MySQL, PostgreSQL, MariaDB, SQLite, MS SQL Server, Oracle, SAP Hana, WebSQL databases. Works in NodeJS, Browser, Ionic, Cordova and Electron platforms. http://typeorm.io

TypeORM is the ORM we use with our Postgres database. Instead of writing raw sql queries we’re able to build and join entities easily that are typed.

import {Entity, PrimaryGeneratedColumn, Column, BaseEntity} from "typeorm";

@Entity()
export class User extends BaseEntity {

    @PrimaryGeneratedColumn()
    id: number;

    @Column()
    firstName: string;

    @Column()
    lastName: string;

    @Column()
    age: number;
}

You create an entity file like this. It supports any type of database schema that you’ve got. Then all you have to do is write functions like:

const allUsers = await User.find();
const firstUser = await User.findOne(1);
const peter = await User.findOne({ firstName: "Peter", lastName: "P" });

Caching

Database level
ORM level
Apollo Server level
Apollo Client level

It’s easy to forget about all the caching solutions we’ve had in the past that have been working great. At least I’ve forgotten about lower level tools that used to be a lot more popular: Nginx, HA Proxy, etc.

These days there are modern solutions for caching that let you handle it through your application rather than outside of it.

Caching in TypeORM

https://typeorm.io/#/caching

Once you set cache:true in your ormconfig, it will generate a query-results-cache table in your databae that’ll cache operations for 1 second by default.

Caching is controlled by individual queries:

const users = await connection
    .createQueryBuilder(User, "user")
    .where("user.isAdmin = :isAdmin", { isAdmin: true })
    .cache(true)
    .getMany();

If you want to change the amount of time spent caching you can also do cache(5000) or some arbitrary number to make that happen.

If you’re using a multi database setup then you can also cache using a cluster or redis.

Caching in Apollo

https://www.apollographql.com/docs/apollo-server/performance/caching/

Cache Hints

Cache hints are convenient to Apollo but apparently don’t conform to the GraphQL spec. Use at your own risk (we decided against it)

type Comment @cacheControl(maxAge: 1000) {
  post: Post!
}

Full Response Cache

It uses memory LRU cache by default so if you’re using multiple server instances (like Kubernetes or some crazier shit) it might make sense to use Redis (again)

You can utilize this to save your session headers instead of constantly trying to unravel on every request.

Redis or MemCached Response Caching

If you’d prefer to save your cache in Redis (which is what we do) Apollo also offers caching using MemCached or Redis and its really simple to setup:

const { RedisCache } = require('apollo-server-cache-redis');

const server = new ApolloServer({
  typeDefs,
  resolvers,
  cache: new RedisCache({
    host: 'redis-server',
  }),
});

Persisted Queries

https://www.apollographql.com/docs/apollo-server/performance/apq/

Persisted queries work by reducing the size of your query to a hash, saving bandwidth and improving network performance.

*You need to switch away from Apollo Boost for this to work. There is no server setup required

import { createPersistedQueryLink } from "apollo-link-persisted-queries";
import { createHttpLink } from "apollo-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";
import ApolloClient from "apollo-client";

const link = createPersistedQueryLink().concat(createHttpLink({ uri: "/graphql" }));

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: link,
});

Using GET requests for GraphQL

https://www.apollographql.com/docs/apollo-server/performance/apq/#using-get-requests-with-apq-on-a-cdn

GraphQL queries are usually too long for a GET request which is why we use POST, but if you use APQ you can change that and have the request cached at the CDN level.

*This doesn’t work with batching

Fly.io

https://fly.io/

Fly makes Heroku apps 50-80% faster. It’s like a CDN but for server processes & app data

Fly sets our servers up at the edge so they load a lot faster. I don’t necessarily understand all the specifics, but working with Kurt to make this a reality at Draftbit has been a great experience.

Fly also includes a redis for every server you deploy and that’s exciting on its own

GraphQL Cost Analysis

https://github.com/pa-bru/graphql-cost-analysis

This can be used to protect your GraphQL servers against DoS attacks, compute the data consumption per user and limit it.

It’s very easy to set up and add it into your middleware. It’s supported by everything from express-graphql to apollo-server

import costAnalysis from 'graphql-cost-analysis'

const costAnalyzer = costAnalysis({
  maximumCost: 1000,
})

You can customize different costs for different queries so you understand what the data consumption is per user or per request.

It’s easy to track down situations where somebody is hijacking your GraphQL server and trying to access information that maybe they shouldn’t be.

GraphQL Depth Limit

https://github.com/stems/graphql-depth-limit

Dead-simple defense against unbounded GraphQL queries. Limit the complexity of the queries solely by their depth.

Since GraphQL can recursively build a tree of your data, it’s really simple to write a query that breaks your server. By setting the depth limit you limit the risk of someone being able to do something like this:

query BreakTheServer {
  users {
    apps {
      users {
        apps {
          users {
            apps {
             users {
               apps {
               }
             }
           }
          }
        }
      }
    }
  }
}

GraphQL Rate Limit

https://github.com/teamplanes/graphql-rate-limit

A GraphQL Rate Limiter to add basic but granular rate limiting to your Queries or Mutations.

You can rate limit the amount of requests that are happening on the GraphQL level to prevent from random shit from hitting the fan 😅

We already use GraphQL Shield at Draftbit so this pattern is really easy to setup:

import { createRateLimitRule } from 'graphql-rate-limit';

const rateLimitRule = createRateLimitRule({ identifyContext: (ctx) => ctx.id });

const permissions = shield({
  Query: {
    // Step 2: Apply the rate limit rule instance to the field with config
    getItems: rateLimitRule({ window: "1s", max: 5 })
  }
});

The nice part about this is that everything lives inside the Javascript world and not the GraphQL world. It makes it easy for us to fine tune it (and it can be type-checked).

Other Useful Tools

toobusy-js
- https://github.com/STRML/node-toobusy
- Stay responsive under extreme load
rate-limiter
- https://github.com/microlinkhq/async-ratelimiter
- limit the number of calls that are taking place, backed by redis
- A tip is to use your user’s session variables but if that’s not available, you can limit it by the ip using the additional request-ip package
reason
- https://reasonml.github.io/
OneGraph
- https://onegraph.io
token refresh
- https://github.com/newsiberian/apollo-link-token-refresh

Thanks!

Thanks to Tracy, Ann, Pato and This Dot Labs for hosting. It’s been an honor speaking alongside of Shawn too who is a very well known figure in the community.

Questions / Answers

Reason Apollo Cache Update Patterns

Peter Piekarczyk — Sat, 15 Feb 2020 06:00:00 GMT

refetchQueries are great when you need to refetch data that’s not easy to handle with cache updates. Updating the cache using an optimistic response reduces the amount of requests and lets you handle the whole operation on the client and updating / removing from a list of resources.

optimisticResponse will immediately return back a fake object that mimics the response the server would return on success. The update function therefore is called twice. Once for the optimisticResponse (instant) and the second time when the server responds successfully.

Relevant reading:

https://www.apollographql.com/docs/react/performance/optimistic-ui/

update will allow you to access the cached update on the client and add or remove items from a list. This automatically happens with update requests but you do need to update the cache manually for creating and deleting requests.

You should model your optimistic response exactly the same, except for the uuid we should include something random and temporarily. If we had the id value we’d use -1 but since uuid is a string you can use xyz123. The value is arbitrary and is immediately replaced.

More Relevant reading:

https://www.apollographql.com/docs/react/caching/cache-interaction/

This is an example of what an optimistic response looks like:

module OptimisticRemove = {
  type t = {
    .
    "__typename": string,
    "removeAsset": string,
  };

  external cast: t => Js.Json.t = "%identity";

  let make = (~uuid) => {
    {"__typename": "Mutation", "removeAsset": uuid}->cast;
  };
};

module RemoveAsset = [%graphql
  {|
    mutation RemoveAsset($uuid: ID!) {
      removeAsset(uuid: $uuid)
    }
  |}
];

** Note: You’ll need to add `__typename: string` to your GraphQL response type!

This is how we call the creation of the optimistic response. We pass in a uuid because its what we pass into the real request. In this case its uuid but it could be asset or screen or any other resource.

`let variables = AssetQueries.RemoveAsset.makeVariables(~uuid, ());
    removeAssetMutation(
      ~variables,
/* --- */
      ~optimisticResponse=AssetQueries.OptimisticRemove.make(~uuid),
/* --- */
      (),
    )
    |> ignore;

You can now use optimisticResponse with an update which immediately removes an item from the list (same instructions for adding):

let (mutateRemoveAsset, _, _) =
    ApolloHooks.useMutation(
      AssetQueries.RemoveAsset.definition,
      ~update={AssetQueries.removeFromCache(appUuid, assetType)}
)

removeFromCache:

let removeFromCache = (appUuid, assetType, client, mutationResult) => {
	/* mutationResult gives you access to the result of the fake and real mutation*/
	switch(mutationResult##data) {
	| None => ()
  | Some(data) =>
		let assetUuid = data##removeAsset;
	  
	  /* build the query the same way you would in your request */
	  let query =
	    AssetQueries.GetAssets.make(
	      ~filter={"appUuid": appUuid, "fileType": Some(assetType)},
	      (),
	    );
	  let readQueryOptions = toReadQueryOptions(query);

	  /* read the query and get the local, cached data */
	  switch (AssetReadQuery.readQuery(client, readQueryOptions)) {
	  /* if there is no cached data, apollo throws so this just catches the throw */
	  | exception _ => ()
	  | cachedResponse =>
	    switch (cachedResponse |> Js.Nullable.toOption) {
	    /* if there is no cached data because its nullable, just move on */
	    | None => ()
	    | Some(cachedAssets) =>
	      /* BS7 feature that wraps Json and gives you record access */
	      let cachedData = cast(cachedAssets);

	      let data = {
	        "assets":
	          /* for a remove, filter out the assetUuid from the list * /
	          Belt.Array.keep(cachedData##assets, asset => {
	            asset.uuid !== assetUuid
	          }),
	      };

	      /* write the query back to cache. You're done! */
	      AssetWriteQuery.make(~client, ~variables=query##variables, ~data, ());
    }
  };
  };
};

There are three lines you need to add to the top of the file to access the cache requests.

external cast: Js.Json.t => AssetQueries.GetAssets.t = "%identity";

module AssetReadQuery = ApolloClient.ReadQuery(AssetQueries.GetAssets);
module AssetWriteQuery = ApolloClient.WriteQuery(AssetQueries.GetAssets);

External cast is bs7’s way of handling casting the raw array of objects as a record:

external cast: Js.Json.t => AssetQueries.GetAssets.t = "%identity";

Full file:

module GetAssets = [%graphql
  {|
    query GetAssets($filter: AssetFilter!) {
      assets(filter: $filter) @bsRecord {
        __typename
        uuid
        fileName
        fileType
        mimeType
        url
        slug
        snackUrl
     }
    }
  |}
];

external cast: Js.Json.t => GetAssets.t = "%identity";

module AssetReadQuery = ApolloClient.ReadQuery(GetAssets);
module AssetWriteQuery = ApolloClient.WriteQuery(GetAssets);

module OptimisticCreate = {
  type t = {
    .
    "__typename": string,
    "createAsset": {
      .
      "__typename": string,
      "uuid": string,
      "fileName": string,
      "fileType": string,
      "mimeType": string,
      "url": string,
      "slug": string,
      "snackUrl": option(string),
    },
  };

  external cast: t => Js.Json.t = "%identity";

  let make = (~asset) => {
    {
      "__typename": "Mutation",
      "createAsset": {
        "__typename": asset.__typename,
        "uuid": asset.uuid,
        "fileName": asset.fileName,
        "fileType": asset.fileType,
        "mimeType": asset.mimeType,
        "url": asset.url,
        "slug": asset.slug,
        "snackUrl": asset.snackUrl,
      },
    }
    ->cast;
  };
};

module CreateAsset = [%graphql
  {|
    mutation CreateAsset($input: CreateAssetInput!) {
      createAsset(input: $input) {
        uuid
        fileName
        fileType
        mimeType
        url
        slug
        snackUrl
      }
    }
  |}
];

module OptimisticRemove = {
  type t = {
    .
    "__typename": string,
    "removeAsset": string,
  };

  external cast: t => Js.Json.t = "%identity";

  let make = (~uuid) => {
    {"__typename": "Mutation", "removeAsset": uuid}->cast;
  };
};

module RemoveAsset = [%graphql
  {|
    mutation RemoveAsset($uuid: ID!) {
      removeAsset(uuid: $uuid)
    }
  |}
];

let removeFromCache = (appUuid, assetType, client, mutationResult) => {
  switch (mutationResult##data) {
  | None => ()
  | Some(data) =>
    let assetUuid = data##removeAsset;
    let query =
      GetAssets.make(
        ~filter={"appUuid": appUuid, "fileType": Some(assetType)},
        (),
      );
    let readQueryOptions = toReadQueryOptions(query);
    switch (AssetReadQuery.readQuery(client, readQueryOptions)) {
    | exception _ => ()
    | cachedResponse =>
      switch (cachedResponse |> Js.Nullable.toOption) {
      | None => ()
      | Some(cachedAssets) =>
        let cachedData = cast(cachedAssets);

        let data = {
          "assets":
            Belt.Array.keep(cachedData##assets, asset => {
              asset.uuid !== assetUuid
            }),
        };

        AssetWriteQuery.make(~client, ~variables=query##variables, ~data, ());
      }
    };
  };
};

Other

Interesting GH issue: https://github.com/Astrocoders/reason-apollo-hooks/issues/61

Learning Higher-Order Components in React

Peter Piekarczyk — Tue, 24 Apr 2018 12:01:01 GMT

A higher-order component in the wild by Gamze Bozkaya on Unsplash

Let me share a secret: no matter how long you’ve been doing something, you’re bound to have to relearn some part of it. I haven’t built my own higher-order component in a long time and made a lot of mistakes. Real mistakes.

Why?

The other day I was adding a simple loading indicator to screens in my new app. You’ve probably used this pattern before:

An InfoScreen that renders Hi when loading is false in React Native

This is great. It’s simple and convenient for one screen. If you’re not used to React Native, ActivityIndicator is one of the beautiful parts of app development — a component that exists.

When you find yourself repeating this same pattern often, its nice to see what we can do to rid ourselves from the tedious task of Copy & Paste.

What do I know?

I know that I’ll have a loading prop FOR SURE.

What am I apprehensive about? The strategy I will use to genuinely make my life easier (instead of harder — sometimes we need a friendly reminder).

Highly Organized Fruit by Alex Block on Unsplash

First Pass

First pass at a loading indicator higher-order component

Besides the function wrapping React.PureComponent everything should look familiar. If you want to skip ahead and use this as-is, just paste this into our InfoScreen file and wrap the export:

export default withLoadingScreen(InfoScreen);

This pattern may look familiar if you’ve used Apollo or Redux before:

export default connect(
  mapStateToProps,
  mapActionCreators
)(InfoScreen);

Compose

If you’re wondering how to use both connect and withLoadingScreen you can wrap the components individually or use a compose function. Writing a compose function by hand is cool, but importing the one from one of the libraries you’re already using is cooler. Both redux and react-apollo come bundled with their own:

various compose imports from redux / react-apollo

Does it work?

Depending on what your setup looks like, it might work perfectly or it might not work at all! 😃 🙃

I’m using react-navigation which supports a static method called navigationOptions to override header title and styles.

The loading screen works as intended, but the header styles are gone! What happened? Static methods aren’t copied over! It’s super easy to overlook but also super easy to fix.

There’s a library called hoist-non-react-statics that will automatically copy over static variables like navigationOptions , defaultPropsand propTypes.

Second Pass: Hoisting Static Variables

Second pass at LoadingScreen higher-order component

Instead of returning the class immediately, we return it only after calling hoistNonReactStatics . The header is rendering correctly again. Woo!

Third Pass: Passing in Options

Now that the loading screen itself functions correctly, I want to pass in a different loading indicator size for different screens.

Sometimes the default loading indicator is too big or the wrong color so I’d like to be able to adjust when I need to.

connect and graphql both give you options:

connect(mapStateToProps, mapActionCreators)
graphql(MyQuery, { options })

We can do the same by adding another function call:

withNavigationOptions Higher Order Component with additional options

In this case I wanted to control the size of the ActivityIndicator

withLoadingScreen("large")(InfoScreen);

// or using compose:

compose(
  withLoadingScreen("large"),
  compose(
    mapStateToProps,
    mapActionCreators
  )
)(InfoScreen);

Bonus Round: Naming Your Components

You’re bound to run into issues. Sometimes the component name doesn’t show up or doesn’t match the component in question. We can fix this easily by writing a simple function called getDisplayName :

function getDisplayName(WrappedComponent) {
  return (
    WrappedComponent.displayName || WrappedComponent.name || "LoadingScreen"
  );
}

A higher-order component with a display name

Conclusion

Higher-order components have a few weird things about them that you can fix easily. Code responsibly.

Your first ReasonML PR into an existing React Native Codebase

Peter Piekarczyk — Sat, 03 Mar 2018 19:19:08 GMT

ReasonML is becoming a popular way of building React apps. It’s based on the OCaml programming language with syntax very similar to JavaScript but with a compiler that warns you early on, instead of when your app is live!

If you’ve been sold on ReasonML and you’re ready to incorporate your first component into a personal or better yet — company project!, this article is for you!

Read This First

My goal is for you to get your first PR out the door. I’m skipping over a lot of the “why” and jumping right into “this is how”.

Learning something new is never easy. Making time for learning is already a struggle given how much bosses are piling onto our plates these days. I want to make this as stress-free and simple for you as possible.

If you find that it’s not, just let me know. Until then sit back, relax, stretch your copy-and-paste fingers and follow along. Welcome to Reason.

Installing Reason

A huge convenience of Reason is being able to install everything through npm. That makes it super easy to get started. Read more about it here.

yarn add --dev bs-platform && yarn add reason-react bs-react-native

Create a bsconfig.json

bsconfig.json is a file that supports settings for bucklescript. After looking at a bunch of these, I’ve concluded that they’re usually exactly the same.

Altos is the name of my app. You should replace that 😃

Add Scripts

"scripts": {
 "build": "bsb -make-world -clean-world",
 "watch": "bsb -make-world -clean-world -w"
}

Project Structure

Create a re folder next to package.json This is where all of your components will live. In our bsconfig.json file we have sources that already include re . Here are some other great guidelines.

All your components will need to be capitalized:

Typography.re
Label.re
Add the following to your .gitignore:

.merlin
.bsb.lock
lib

.bs.js files

If you want to sneak Reason into your codebase without forcing your teammates to install bs-platform you’re welcome to add the generated *.bs.js files. That being said, you might face merge conflicts down the road.

If your teammates are all cool with Reason, place *.bs.js inside your .gitignore and have them install bs-platform.

Every team is different so I leave this decision up to you. Chances are you can get away with including them and figure it out later.

Press Play

Open up a terminal window and run yarn watch or npm run watch
Start your React Native Project react-native run-ios or expo start

If nothing broke, you have succeeded in getting your project ready for Reason! Pat yourself on the back — you have taken an enormous step forward to your first Reason pull request!

Delicious bite-size chunks of Reason by Rose Elena on Unsplash

Your First Component

Creating your first component can be really easy or really hard. If you’re going to try and convert something with a lot of external modules, you’re going to have a bad time.

The first component I introduced into our project was a simple Label:

Label component in ReactJS

The label consumes a prop label and sets the background color to gray. The only components I’m using are View, Text, StyleSheet because the bindings are supported by bs-react-native.

Bindings let ReasonML know the type of your code from Javascript so it can save you from making silly mistakes later.

Converting to Reason

At first glance, a lot of things are the same, but a lot are different. ReasonML requires semicolons! The compiler will delightfully let you know.

The Label component converted to ReactReason.

Imports

In ReactJS and Javascript, you’d import something via import React from 'react' or const React = require('react').

Reason will import the libraries you have installed automatically. We added them in bsconfig.json.

When you see open BsReactNative you’re doing something similar to import { Component } from 'react'. You can import React from 'react' and then call React.Component, or import the Component directly and save yourself some text.

So, instead of writing BsReactNative.StyleSheet, BsReactNative.View I can open BsReactNative and write StyleSheet, View instead.

Local Opens

Style.(

A dot with nothing after it in this case is called a “local open”. Its the same as calling import Style but only for this function. This helps us avoid conflicts across the whole file.

See how within the function we’re calling borderRadius ? We could also do something like this instead:

style=(
 Style.style([
 Style.borderRadius(4.)
]);

(thanks to Sean Grove for pointing this out!)

Styling / StyleSheets

Styling is tricky at first but gets easier over time. Let me save you a lot of time and effort by linking you to all the style types supported by bs-react-native. I’d highly recommend keep this open until you get the hang of it!

Why is styling tricky? Because you’re not used to typing things a certain way. Here’s a great example:

borderRadius(4.)

paddingHorizontal(Pt(10.))

In ReactJS, borderRadius and paddingHorizontal are the same type (number). but in ReactReason, they’re different:

borderRadius is a float.
paddingHorizontal is a pt_pct. pt_pct isn’t a Reason thing. It’s a type within the bs-react-native library that means:

This can either be a float wrapped by point (pt) or a float wrapped by a percentage (pct)

Components

A stateless function component in ReactJs will be represented by a function:

const Label = ({ label }) => <Text>{label}</Text>;

In Reason React:

*/ Label.re */

[@react.component]
let make = (~label) => <Text> {React.string(label)} </Text>

[@react.component]:

You put this above every component. Think of this like a decorator in Javascript. It knows to convert the sugar to React calls.

The arguments:

Optional components look like this: ~label=? with an =? at th e end
Default arguments should look familiar: label="Network"

stringToElement

If you try to display your label the same way you would in ReactJS, you’ll be greeted with a compiler error. That’s because you have to convert the string to an React element: ReasonReact.stringToElement(label). Why do we do this? Because Reason’s type system restricts you from passing arbitrary data.

You’ll also notice a space between <Text> </Text>. That’s intentional!

There’s a good chance you’re going to display a number in your first component. That would look like this:

<Text> {ReasonReact.stringToElement(string_of_int(10)} </Text>

There’s a couple of different special element types you might need, but I would strongly suggest you focus on a simple component first.

Exporting your component to JS land

In ReactJS, you’d write export default or export const and consume your component the way you would with anything else.

In ReasonReact, there’s an extra step you have to take via wrapReasonForJs .

let default =
  ReasonReact.wrapReasonForJs(~component, jsProps =>
    make(~label=jsProps##label, [||])
  );

Basically the pattern is to take your props (in this case we only have label) and pass them in as: ~label=jsProps##label . Children will look like: [||] .

Use it!

You’ve done such a great job putting together your first component, it’s time for you to use it. Just import it with the bs extension:

import Label from "./re/Label.bs.js"

<Label label="REACT NATIVE" />

Push it up & let me know!

I challenge you to create one small, tiny Reason component and introduce it into your company’s React Native app. If you do, please let me know!!

Otherwise, until you’re ready follow me on Twitter. You’ll see a lot of Reason-related stuff.

I created a base repo of this & expo as a reference.

Thanks to thangngoc89 and sgrove for peer-reviewing this.

Taming React Native’s ScrollView with flex

Peter Piekarczyk — Mon, 05 Feb 2018 14:01:01 GMT

Time and time again I find myself fighting a ScrollView to get it to work the way I want it to. Is it flex? Is it the ScrollView? It was time I wrote an article.

My favorite scenario, the one that inspired this article, the one that I always forget about, the one I recently encountered for Orchard, (what a build-up) is one where I’d like the screen to scroll normally when things don’t fit and justify-content: space-between when there’s room.

A couple of different solutions came to mind at first:

Use either View or ScrollView depending on the device height (meh)
Decrease the text size until everything fit (meh)
Place the “Privacy Policy” outside of the ScrollView making it sticky, but it felt weird to scroll over and still see the privacy policy.

I felt like these options would either make my life miserable or even worse: the user’s life miserable. I went to the docs for ScrollView and read over contentContainerStyle:

These styles will be applied to the scroll view content container which wraps all of the child views

contentContainerStyle is a step in the right direction. It will apply styles to the content container as if there were a View wrapping your children.

It worked great on the iPhone X. There was enough room so everything was justified vertically. But what happens when you try this on a smaller device like the iPhone 5s? It sticks! Why?

React Native Flex vs. CSS Flex

It turns out that flex functions a bit differently in React Native than it does in CSS which is why setting flex: 1 didn’t work the way I thought it would.

In CSS, flex is short-hand for controlling the following properties:

flex-grow
flex-shrink
flex-basis

Writing flex: 1 in CSS is shorthand for:

flex-grow: 1
flex-shrink: 1
flex-basis: 0

In React Native, on the other hand, flex consumes a number, not an string and it works like this:

positive number — component becomes flexible and will function proportionally to its value. A value of 2 will take up twice as much space as a sibling that has a value of 1.
0 — the component isn’t flexible and is sized by width and height .
-1 — the component is sized by its width and height but if there’s not enough space, it will shrink to satisfy minWidth and minHeight .

Flex Grow

Writing flex-grow: 1 in CSS is shorthand for:

flex-grow: 1
flex-shrink: 1
flex-basis: auto (this is different!)

flex-grow distributes free space to flex items. When there is no free space, flex-grow does nothing and flex-shrink takes over to determine how much items will shrink relative to its siblings (instead of grow).

Why does this matter?

The solution has to do with the implementation differences of flex and flexGrow in React Native.

Since flexGrow functions the same way, we can easily solve this problem by updating our contentContainerStyle to flexGrow: 1 instead:

Using flexGrow vs. flex in contentContainerStyle prop

Hopefully neither of us will have to struggle with a ScrollView and flex again!

Shaving 2 Minutes Off Our Graphcool Deployment Times

Peter Piekarczyk — Sat, 06 Jan 2018 19:43:23 GMT

Photo by Erik Eastman on Unsplash

Graphcool is an awesome GraphQL-powered backend we use at Orchard. One of the features they offer is custom functions (resolvers) a la AWS Lambda.

The thing is, deploying to any environment includes both prod AND dev dependencies inside your node_modules folder. That means eslint and anything else you have in that directory.

I’m sure this will change soon enough, but for now there’s a few simple steps we can follow to minimize our bundle size & time spent deploying:

Remove any files & folders that aren’t related to Graphcool. That goes for any scripts, utilities, functions, etc that don’t need to live here.

/src only includes the functions we require. Nothing else.

├── README.md
├── graphcool.yml
├── node_modules
├── package.json
├── src
├── types.graphql
└── yarn.lock

Create npm commands in your package.json that will delete node_modules and only install packages required for production. Now you’ll know for sure that none of your eslint stuff will be bundled and deployed.

"deploy:dev": "rm -rf node_modules && yarn --prod && graphcool deploy -t dev && yarn"

Lastly, YMMV but yarn includes a —-flatflag you can use to only install one version of a package across ALL your dependencies. We didn’t run into any issues using this, but you might so give it a go on dev first:

"deploy:dev": "rm -rf node_modules && yarn --prod --flat && graphcool deploy -t dev && yarn"

We were going to go as far as removing lodash and installing only the modules we use (lodash.chunk, lodash.get) but after running — flat, we discovered some of our node modules already require lodash and saved ourselves the hassle by just forcing that version. Our yarn.lock file is like 100x smaller!

We went from 120s deployments down to 19.1s!

So it was worth writing about :)

Environment Variables in Expo using Release Channels

Peter Piekarczyk — Tue, 02 Jan 2018 17:31:06 GMT

Photo by Sergii Bozhko on Unsplash

Expo has recently released Release Channels that allow you to deploy, rollback and test your app with different users by just adding the --release-channel flag on the publish command.

One of my favorite things about Release Channels is the ability to define pseudo environment variables so I can easily switch between dev, staging & prod.

Here’s how I do it:

An example of handling environment variables in Expo using Release Channels

The reason why I use indexOf is because I’ll release new versions of my app based on the package.json version. That way I keep things sync’d up across the entire Orchard ecosystem:

exp publish --release-channel staging-1.20.1
exp publish --release-channel staging-1.21.0

exp publish --release-channel prod-2.0.0

Notes:

In the current release of Expo v24, the releaseChannel key DOES NOT show up in dev mode.
In future releases, the releaseChannel key may show up as undefined. DO NOT quote me on this, its just speculation.

Command Line Tip: Lowercase all file names in a given directory

Peter Piekarczyk — Thu, 28 Dec 2017 19:19:12 GMT

Here’s a one-liner you can use to change all the filenames that include uppercase letters to lowercase. If I didn’t write about it, I’d forget how it works, so here we go!

for f in *;
  mv $f $(echo $f | tr '[:upper:]' '[:lower:']);
done;

Break down:

for file in *:

For every file (variable). You could also do in *.pdf and that would only select PDF’s for example

do echo $f:

do is part of the for loop syntax, echo the variable f

mv $f $(echo $f | tr '[:upper:]' '[:lower:']):

Run translate characters (tr) command to translate upper case characters to lower case characters
Then move the original file name to the one outputted by the tr command
You’re done! Celebrate

Thoughts on Structuring your Apollo Queries & Mutations

Peter Piekarczyk — Fri, 20 Oct 2017 14:56:48 GMT

Photo by Patryk Grądys on Unsplash

Rezz - Synthesia on Spotify: This is what I listen to when I code. I wrote this article while listening to the entire album. Listen at your own risk 😃

After using Apollo for the last few months, I’ve picked up some great patterns we’ve adopted at Orchard, where we’ve re-implemented an experience for our beta testers just about every week

The faster we can build something, the sooner we can get feedback from our beta testers and the better chance we have of building an amazing product.

Folder Structure:

I don’t inline my queries. Maybe I’m cray cray, but I strongly believe in being able to search and reuse something as quickly as possible. ag, fzf, Alfred Workflows and Nuclide search are my best friends IRL. I try to be as descriptive as possible, even if that means a 40 character filename.

Here’s what that folder structure looks like:

/containers
/components
/utilities
/modals
/graphql
/queries
/mutations

I typically like to keep my folder structure flat. I’m ok with nesting GraphQL because I’ve realized over time that I can figure out if something is a query or a mutation without appending mutation or query to the end of the file.

Naming Conventions:

Mutations will always start with an action:

saveUserPushToken
updateOnboardingProfile
createUser

Queries just describe what I’m looking for:

userProfile
userConnections
reminders

Sometimes they’ll even look like this:

remindersWithNewFeatureOfSomeKind
userProfileWithUserSettings
userPrioritiesWithRemindersAtTheTop

I don’t prefix them with anything because I already know they live under the queries folder no matter what I do. Besides, prefixing them with something like get may make it seem like an API action. Also, I tried it and didn’t like it.

File Structure:

I don’t like to keep them in the same file either because I literally spend more time scrolling than I do typing! What does each file look like? The way you’d expect:

import gql from "graphql-tag";

const updateUsername = gql`
  mutation UpdateUsername($id: ID!, $username: String!) {
    updateUsername(id: $id, username: $username) {
      id
    }
  }
`;

export default updateUsername;

updateUserProfile will have its own file too!

This way no matter what, I can continue to move quickly, implement our new features from design and have an exact description of what each and every file is doing.

Final Thoughts

I’ve fallen in love with this setup for my queries and mutations. I’ve rewritten our mutations and queries ~50 times and haven’t like I’ve been going against the grain yet.

That being said, this folder / file structure is not for everyone. Consult with your manager and co-worker and make sure that this folder structure is right for you.

Side effects include yelling at me online so don’t yell at me!

If you have a better way, I’m always open to new ideas: Hit me up on Twitter

Ciao!

Apollo Tote, Declarative Patterns and a Sneak Peek into Apollo 2.0

Peter Piekarczyk — Tue, 10 Oct 2017 18:32:18 GMT

Photo by Lee Campbell on Unsplash

This is a guest post from Peter Piekarczyk, technical co-founder and Apollo / React Native guru at Orchard.ai.

Apollo Tote is a declarative React component. Take what you’ve been doing inside your “smart” containers and apply it with JSX! It’s meant to be a simple helper library for your Apollo queries until declarative components are released in Apollo 2.

I created this because I don’t believe separate components and containers need to be applied everywhere. There are times where I’d prefer to see everything in one, succinct file.

I came up with the idea for Apollo Tote while working on Orchard Ai. We’re utilizing Expo and Apollo to help you stay on top of your relationships & network the same way you do about diet, health and fitness.

At the very minimum, give it a query and a few render props:

<ApolloTote
 query={`user { imageUrl }`}
 renderLoading={() => <Avatar.Loading />}
 render={result => <Avatar imageUrl={result.user.imageUrl />}
/>

Note: Apollo Tote is not meant to be used everywhere. We only support queries for now. That being said, there are places where Apollo Tote shines!

Use Cases

Logged In / Logged Out (Authentication / Authorization)

Authentication & Authorization have always been a drag, for whatever reason. You’ll save a user token in localStorage, but you start to realize there’s a few cases you need to handle:

A token exists but the user no longer does (this sounds so dark IRL)
A token exists but has expired
There is no token (this one’s easy!)

Apollo Tote Authorization & Authentication Example

renderError, renderLoading, render are all Apollo-specific and map directly to { error, loading, data }.

test, handleFail, handlePass are additional helper methods you can use to test for something specific.

In this case I’m testing for user.id, but you can use it for anything where you might use branch in Recompose: anything that needs to pass or fail.

In this case, I’m dispatching LOG_IN / LOG_OUT with Redux, but feel free to use an event emitter or call a class method, etc.

Handling Loading / Error States

I like to load a different component when I’m handling error state. My favorite way of doing that is by exporting a Loading component. This way I don’t have to fk around with any of the styling to get the loading state I’d like. It just works!

Apollo Tote makes that super easy for ya by giving you the renderLoading prop:

Apollo Tote Loading State Example

Final Thoughts

Apollo Tote & render props are a great option when it comes to working with a complex application structure. While Apollo Tote is around today, a version of it will appear in Apollo 2. I’ll keep the API as similar as I can so when its ready, all you’ll have to do is replace the import!

This is an awesome opportunity for the community to help make Apollo 2’s declarative components an awesome experience.

Shout-out to my friends Kye Hohenberger and Kyle Shevlin for the feedback. It’s something I always appreciate!

Building High Performance Web Apps with Emotion and Next.js

Peter Piekarczyk — Wed, 07 Jun 2017 05:00:00 GMT

If you haven’t heard of Emotion yet, it’s one of the fastest CSS-in-JS libraries to date. Its API is similar to styled-components but delivers your stylesheets over 200x faster. If you don’t believe me, check out @tkh44’s article here or the benchmarks you can run on your own here.

Under the hood, Emotion uses a babel plugin to parse your CSS and constructs style blocks from your components. It reads those blocks with PostCSS, manipulates them and writes template literals back with babel. It’s the reason why Emotion is so fast: it takes care of all the expensive operations like parsing nested rules and prefixes ahead of time.

When you combine an awesome server-rendered experience like Next.js with Emotion, you get a high performant website right out of the box.

Installation

The easiest way to get started is by using create-next-app to generate a brand new project.

create-next-app takes the same approach create-react-app does but it generates a Next.js project instead. It’ll install all the dependencies you need ahead of time and put together the base project.

Run the following to get yourself started with Next.js and Emotion:

yarn global add create-next-app or npm install -g create-next-app
create-next-app hackernews
cd hackernews
yarn add emotion or npm install —-save emotion

Yarn

yarn is an alternative package manager to npm that strives for high performance and security. You can read more about it at yarnpkg.com or get started with it right away by running brew update && brew install yarn in your terminal.

Configuration

For Next.js and other server-rendered libraries, Emotion requires an additional step of adding an inline-mode configuration to your babelrc. If you were using create-react-app or a single page app with no server rendering, you could skip this step.

Extract vs. Inline Mode

Extract is how Emotion works out of the box. It’s the “high perf” setting if you’re not worried about IE11 or below and aren’t doing any server rendering. The reason why its faster is because it skips the prefixing step older browsers require.

Inline Mode is the “safety net” setting that is just a smidge slower but supports every browser React does and supports server rendering. If you’re developing for a wide audience of people and browsers, this is the mode you want to go with.

Getting Started

Emotion supports almost every technique and API you’ve loved when it comes to CSS-in-JS libraries including raw CSS files. It makes porting your project over from virtually anything a breeze!

const Avatar = styled(‘img’)`
 width: 100px;
 height: 100px;
`

Final Thoughts

I love Emotion because it supports a lot of the same features I was looking for when comparing different CSS-in-JSS libraries except offering incredible performance we all strive to achieve.

9 Things I Wish I Knew When I Started Writing Code

Peter Piekarczyk — Thu, 30 Mar 2017 17:49:12 GMT

Photo by Kimon Maritz on unsplash.com

I’ve been paying it forward for the last two years by teaching newer programmers how to craft their code. On an informal basis, I’ll guide a student through typical, real-world challenges: from thinking through the database structure to reading error messages.

After doing this for a bit, I’ve noticed a common pattern beginners (including myself) face when they’re first starting out. Here are a few tips and tricks to help step up your game:

1. Read every line of code

If you skim code the way you might skim articles (like this one), you might find yourself missing an important piece of the puzzle. You can’t play chess when you don’t see every piece. The same applies to reading code.

Every line, word and character counts!

Error messages become much less cryptic once you realize you may have misspelled a function or missed a parenthesis.

Fixing that pressing bug will take less time because you’ll understand exactly what is happening.

2. Focus on the abstraction after you understand the abstraction

It’s easy to get ahead of yourself by abstracting out your codebase to a few functions. I suggest you hold off on any abstractions until you absolutely understand the need to.

Don’t worry about building a system that supports every use case you can think of right off the bat!

Build for one use case first. Then another, then another. The pattern will eventually stick out like a sore thumb and you’ll naturally come to the right abstraction.

3. “Don’t Repeat Yourself” doesn’t mean you need to re-use every function

Don’t Repeat Yourself is a phrase thrown around a lot in programming, but it doesn’t mean you should be throwing it around a lot in practice!

DRY helps you isolate your changes and increase maintainability because you’re only editing a few things to make an impact.

What I’ve noticed is that the DRY principles are being orchestrated on an entire codebase rather than a feature. So, if a site has two different tightly-coupled pages and one of the page layouts change, it also changes the layout of the first page which might not be intended.

I suggest you identify the “core” (won’t change often) and “leaves” (constantly changing) and focus your DRY techniques on core.

Just like with the previously mentioned abstractions, it will take some time and a few “oopsie” experiences to strike the right balance.

4. If you don’t know, ask!

Ask as many questions as it takes for you to understand a problem or a piece of code. Don’t worry about feeling stupid or feeling like you should know the answer.

No matter where you are in your career, you will never completely grasp an entire library, framework or function from the get-go.

Take a look at open source for example. Everyone has different philosophies, coding styles and libraries they like to use. There’s an abundance of them and you’ll never always know what every single piece is doing.

At work, you might think you should understand something so you spend an hour or two researching when you could have just tapped the engineer next to you for a quick explanation.

Everyone is entitled to fully understanding the problem before coming up with a solution no matter the skill level.

5. Find a mentor or friend you can go to for help

I owe a lot of my skills to the folks that stuck with me over the years. I went through a lot of trial and error on my own growing up and that was a great experience. That being said, having someone throw you a bone and guiding you down a better path is very valuable.

Imagine trying to build something in Javascript and picking up a random set of tools. What you choose might be the right tool for the job, or it may not be. You might spend months or even years working through the kinks only to realize there was a solution that fit your exact needs!

A mentor can help you make those decisions up front.

6. Use Github Search to your advantage

My secret to writing code is spending a TON of time searching Github for the answer I’m looking for. Google and Stack Overflow are great but a lot of times the answer you’re looking for could be framework specific or out of date.

For example, 90% of the answers (I made this % up) on Stack Overflow will give you a jQuery solution when you’re looking for a pure javascript one.

Searching Github for “document.getElementsByClassName” for example, will give you a practical, up-to-date example. If you do your due diligence and make sure the code is being used or has been updated recently, you’ve just got a killer template to work from! Clone it, try it out on your own and see if what it’s doing matches what you’re looking for.

7. Boilerplates can be a trap!

Boilerplates have become popular over the years. They’re usually a set of utilities, patterns and opinions you can use to get started with your project.

It’s easy to reach for one, but you may find yourself in a position where you’re not sure what is going on or how to fix it.

Start with the basics first. Open up a scratch pad like codepen.io or jsfiddle.net and try and understand how something works. Not only will you have a better understanding of the framework, but there’s a good chance that through isolation you’ll learn fundamental parts of a language too.

8. Don’t worry about what your friends are doing

Remember:

Everyone learns at their own pace
Everyone has different interests in the programming realm

Just because your friend is working on Artificial Intelligence, Machine Learning, Data Science or Web Development doesn’t mean that they’re better than you are. Those are all popular buzzwords that sound crazy but in reality are very approachable as long you just want to give it a shot!

Sure, writing HTML is a lot easier than machine learning but I’d argue that Javascript and UI Development have equal non-trivial challenges.

Don’t focus on what other people are doing. Focus on yourself!

Even if they are better, you shouldn’t be discouraged. You’ve found yourself writing code because YOU like to write code. Keep it that way :)

9. You’re a gardener, not an engineer

I don’t remember where this idea came from but I’m a huge fan of it.

A civil engineer, for example will build a bridge and move on to his/her next project. There might be maintenance work that takes place every few years, but that’s most likely done by a different division.

A gardener however, nurtures his/her plants over time. You water it on a weekly basis, trim leaves monthly and re-pot yearly.

You can argue that growing plants outside defeats this analogy, but nurturing your plant will improve its chances of success in the wild!

I call myself a gardener because I’m constantly maintaining my code. You should too :)

Succulents by Brooke Cagle from Unsp

5 Vim Plugins I Can’t Live Without for Javascript Development

Peter Piekarczyk — Sun, 19 Mar 2017 20:11:04 GMT

I’m constantly looking for ways I can improve my workflows and development environment. Before I could even call myself a programmer, I was fascinated with making my terminal look cool, even if I didn’t exactly know how to use it yet! That’s stuck with me over the years and I’d love to share some of my recent favorites:

1. Prettier — An Opinionated Javascript Formatter

Prettier will automagically format your code so you don’t have to. Spend less time arguing styles with your peers so you can spend more time writing your app.

A random Javascript file I saved. See how it automatically formatted it for me?

Installation for NeoVim and Vim is very straight forward:

Install via npm npm install -g prettier
Or Yarn (recommended) yarn global add prettier
Add the following to your init.vim or vimrc file: autocmd FileType javascript set formatprg=prettier --stdin
If you want to format on save: autocmd BufWritePre *.js :normal gggqG
If you want to restore cursor position on save (can be buggy): autocmd BufWritePre *.js exe "normal! gggqG<C-o><C-o>"

**Why I personally like this: **I’m no longer worried about making sure I’ve got the right formatting in place. I’m getting used to letting the computer control my source code so I can optimize time spent on app-related changes instead.

See more at https://github.com/prettier/prettier

2. NrrwRgn — Narrow Region Plugin

Select a part of your code and open it in a new buffer! When you’re ready to go back to the original file, just save it and your isolated changes appear instantly!

Someone accidently made this FRIEND instead of USER. I loaded it up with NR, made the changes I wanted to make and brought them back to the original file!

Install using the Plugin Manager of your choice. I like Vim Plug.

Plug ‘chrisbra/NrrwRgn’

The commands I use most often:

:NR - open selection in a new window :NW - open current visuaul window in a new window :NRP - mark a selection so you can open multiple parts of a file :NRM - after using NRP, run this so you can open those parts! https://github.com/wesQ3/vim-windowswap

**Why I personally like this: **Sometimes I can get frustrated working with very large files. I like to focus on one part of that if I can. It’s easier on the eyes to see 5–15 lines instead of 150.

See more at https://github.com/chrisbra/NrrwRgn

3. WindowSwap — Easily Swap Window Panes

By pressing <leader>ww you can swap windows around your screen without having to redo your layout.

See how I swapped the two windows in this simple example?

Install using the Plugin Manager of your choice. I like Vim Plug.

Plug ’https://github.com/wesQ3/vim-windowswap’

**Why I personally like this: **When my ADD is in overdrive, I’ve got like 15 panes open. Sometimes I want to move stuff around without having to close it out and re-open it. This allows me to do just that.

See more at https://github.com/wesQ3/vim-windowswap

4. ALE — Asynchronous Lint Engine

A linting plugin for Neovim and Vim 8. This will automatically hook into your linter’s configuration and show you errors in the gutter!

I took a project I did before using Prettier. Saved it. Whoah! See all that red on the left hand side? That’s Ale doing its magic! You’ll also get the rule instructions at the bottom of the window so you know exactly what to change!

Install using the Plugin Manager of your choice. I like Vim Plug.

Plug ‘w0rp/ale’

**Why I personally like this: **Prettier handles your source code styling, but there’s still a lot eslint can do for you! Stuff like accessibility and removing unused modules and vars should still handled by eslint. Pair with a library like prettier-eslint by Kent C. Dodds & friends makes this an awesome part of your workflow!

See more at https://github.com/w0rp/ale

5. Deoplete — Auto Completion Framework

This will add an autocomplete dropdown for your files. It works asynchronously. You will need Neovim and Python 3 installed for this to work.

Look! Autocomplete!

Vim Plug Installation:

Plug 'Shougo/deoplete.nvim', { 'do': ':UpdateRemotePlugins' }

Before continuing with the next steps, verify that you need to. Open up Neovim and run :echo has("python3") If the return value is 1, you don’t have to do anything else! Otherwise, keep following along:

pip3 install neovim
pip3 install --upgrade neovim (0.1.8 is required)

Add the following to your Neovim init.vim file:

let g:deoplete#enable_at_startup = 1

See more at https://github.com/Shougo/deoplete.nvim

Bonus 5.5 — Flow Autocompletion with Deoplete

Love flow-type and wish you could use autocompletion? Wojtek Czekalski just created an awesome library to make it happen!

" Place deoplete first, then autocomplete-flow
Plug 'Shougo/deoplete.nvim', { 'do': ':UpdateRemotePlugins' }
Plug 'wokalski/autocomplete-flow'

" You will also need the following for function argument completion:
Plug 'Shougo/neosnippet'
Plug 'Shougo/neosnippet-snippets'

See more at https://github.com/wokalski/autocomplete-flow

Closing Thoughts

Like I said, I’m constantly looking for ways to improve my own flows. Is there something I’m missing? Would you love to learn more?

Feel free to tweet me or check out ALL my Vim plugins here.

Speeding up Git with SSH Config

Peter Piekarczyk — Fri, 11 Nov 2016 17:09:37 GMT

I’ve been snooping around Paul Irish’s dotfiles and discovered this gem. I instantly noticed the difference and absolutely needed to share this with the rest of the world!

# copy to ~/.ssh/config

Host github.com
	ControlMaster auto
	ControlPersist 120

Host *
	# Always use SSH2.
	Protocol 2

	# Use a shared channel for all sessions to the same host,
	# instead of always opening a new one. This leads to much
	# quicker connection times.
	ControlMaster auto
	ControlPath ~/.ssh/control/%r@%h:%p
	ControlPersist 1800

	# also this stuff
	Compression yes
	TCPKeepAlive yes
	ServerAliveInterval 20
	ServerAliveCountMax 10

Learn more by watching this video on SSH

Save 20px by Going Frameless and Getting Rid of Atom’s Title Bar

Peter Piekarczyk — Sat, 29 Oct 2016 21:15:42 GMT

Being a fan of keyboard shortcuts, I have never been a fan of macOS’ Title Bar.

Close
Minimize
Full Screen

You know the bar I’m talking about. Most of the time, it’s not worth the real estate.

I scoured Github Issues and PR’s until I found exactly what I was looking for: A recipe, thanks to the man by the name of deeperx on Github.

# quit Atom

npm -g install asar
asar e /Applications/Atom.app/Contents/Resources/app.asar /tmp/atomasar

# 1. Edit src/main-window/atom-window.js & add:
#   frame: false

# 2. After the line
#   title: 'Atom'

# 3. Save

asar p /tmp/atomasar /Applications/Atom.app/Contents/Resources/app.asar
rm -rf /tmp/atomasar

No Title Bar!

Keep in mind!

When you do this, moving your window around with a mouse will be virtually impossible, make sure you use some window management software!

View the issue on Github

React Router Authentication

Peter Piekarczyk — Thu, 28 Jul 2016 22:03:12 GMT

I was looking through the issues of a popular boilerplate today and there was a question about how folks would handle authentication with this new style of creating routes (PlainRoute).

Here’s what you need to know:

requireAuth is a React Router function. It takes 3 arguments: nextState, replace, callback
replace is all we’re after, but you have the ability to do more if you choose to
within requireAuth, invoke whatever technique you’re using to identify a user or a token
If a token exists, carry on
If a token does not exist, replace history with an unauthenticated route
If you decide to use a callback, the transition will be blocked until callback is called (in the docs)

function requireAuth (nextState, replace, callback) {
  const token = localStorage.getItem('@TOKEN')
  if (!token) replace('/')
  return callback()
}

// ...

export const createRoutes = (store) => ({
  path: '/',
  childRoutes: [

    // Authenticated
    {
      component: CoreLayout,
 **onEnter: requireAuth, // add this**
      indexRoute: Dashboard,
      childRoutes: [
        ProfileRoute(store),
        BillingRoute
      ]
    },

    // Not-authenticated
    {
      component: ModalLayout,
      childRoutes: [
        LoginRoute
      ]
    },

    // Other Not-authenticated routes
    HelpRoute,
    ContactRoute
  ]
})

If you have any issues, hit me up!

Quickly Preview iTerm2 Themes Without Having to Import Them First

Peter Piekarczyk — Thu, 07 Jul 2016 14:58:03 GMT

I was perusing https://github.com/mbadolato/iTerm2-Color-Schemes#previewing-color-schemes when all the way at the bottom, I noticed a simple tool that lets you preview themes without having to import them first!

From within the iTerm2-Color-Schemes directory, type one of the following:

Apply AdventureTime scheme to the current session

tools/preview.rb schemes/AdventureTime.itermcolors

Apply the schemes in turn.
Press any key to advance; hit CTRL-C or ESC to stop

Preview all the themes at the same time:

tools/preview.rb schemes/*

Theme Preview 🔥

I’ve been using this library for years never scrolling down far enough. Hopefully I’m not the only one who hasn’t done that 😂

Thoughts on Becoming a Better Developer

Peter Piekarczyk — Sun, 12 Jun 2016 05:00:00 GMT

I’ve been thinking a lot about how I can improve my productivity as a technical startup founder. “Work smart, not hard” is a constant, subconscious whisper. How often do I actually practice that idea? What does that even mean? Where do I draw the line between thinking too much or too little?

I’ve always wanted to play ball at the same level Facebook employees do. People like Dan Abramov, Andrew Clark and Lee Byron don’t just sit down and start writing code.

They identify a problem, think through it, brainstorm a few solutions and some implementation ideas for the solutions before writing any serious code. The evidence is everywhere. Every article starts with some form of “this was a problem and this is how we fixed it”.

I see them as the professional athletes of our world. Their stadium is Github. Their playing fields are Issues & Pull Requests. The bulk of the decision-making process happens right in front of you. You don’t need to wait for an announcement, just follow the pull requests. You can experience fumbles, touchdowns and the superbowl. Remember IsFiberReadyYet?

I’ve clearly drank the Facebook Koolaid, but these athletes exist outside the Facebook ecosystem as well. They play for themselves, big and small companies all over the world.

Being able to watch the people at the highest level practice & play is truly an exciting time in our lives.

So now what’s stopping me from becoming a professional athlete?

Work Smart

Civil engineers don’t show up at the job site and start digging. They research, plan and review for months before getting the stamp of approval to start digging.

Unlike civil engineers, we’ve been equally blessed and cursed with the privilege of writing code anytime, anywhere. There’s nothing stopping us from showing up at our own job site and digging to our heart’s content.

But what are we building and what are we digging up? This is where I should work smart:

Am I solving a problem?
Is this going to actually add value to my life?
I’m not actually doing this for the tweets, am I?

It’s so tempting to sit down and start writing but you may find yourself taking 3 steps back sooner than you think! How will I interact with this function?

I think the best people in our industry are the ones that can think through a problem and solution before writing any code**.

It’s tempting to sit down and open up Atom and jumping right in but how often do you go 3 steps back just because you didn’t spend 5 minutes thinking through the data flow?

Work Hard

Give it hell. Be the best person you can be, whatever that means for you.

React Native Android & Custom Fonts Checklist

Peter Piekarczyk — Fri, 10 Jun 2016 23:13:58 GMT

Here are a few things to remember:

file type needs to be ttf NOT OTF!
Create assets/fonts if it doesn’t exist (mkdir -p assets/fonts)
place the font files within ./android/app/src/main/assets/fonts/FONT_NAME.ttf
Recompile. react-native run-android
fontFamily: FONT_NAME (1:1)
Viola!

Operator Mono & Fira Code — The Best of Both Worlds

Peter Piekarczyk — Thu, 09 Jun 2016 17:50:59 GMT

If Operator Mono and Fira Code spent a lot of time together and had a baby, you’d get something that looks like this:

Ligatures & italics working in harmony. See the !== and the arrow function?

Operator Mono is cool and all, but quite frankly after seeing Fira Code’s ligatures, I had a tough time choosing between the two. So I made them work together.

If you’re not sure what I’m talking about, check out the graphic below. Yes, it’s frickin’ sweet.

All you have to do to get this working is:

Download Fira Code
Purchase & Download Operator Mono (get your co to buy it)
Delete the “fonts” package if you’re using it. AFAIK it’ll screw things up.
Open up Atom’s stylesheet and paste below. (Atom -> Stylesheet)

Implicit imports in Webpack using ProvidePlugin

Peter Piekarczyk — Tue, 19 Apr 2016 18:01:28 GMT

Do you find yourself writing this in every single one of your files?

import React from ‘react'

Remember how you used the ProvidePlugin to replace Promise globally in your app?

We can use that same approach for stuff we’re using everywhere else too.

// webpack.config.js

new webpack.ProvidePlugin({
  React : ‘react’,
  Promise : ‘bluebird’,
  cx : 'classnames',
  get : 'lodash.get'
})

Now, I understand I use a few examples here, but I wouldn’t get too crazy. Focus on the packages you’re confident you’re going to use EVERYWHERE

Working Through cannot find module unicode/category/So in Keystone

Peter Piekarczyk — Wed, 13 Apr 2016 19:56:30 GMT

Every once in awhile, you might encounter an error like this in KeystoneJS:

module.js:341
 throw err;
 ^

Error: Cannot find module ‘unicode/category/So’
 at Function.Module._resolveFilename (module.js:339:15)
 at Function.Module._load (module.js:290:25)
 at Module.require (module.js:367:17)
 at require (internal/module.js:16:19)
 at symbols (E:projectskeystoneappnode_modulesslugslug.js:6:16)
 at E:projectskeystoneappnode_modulesslugslug.js:199:5
 at Object.<anonymous> (E:projectskeystoneappnode_modulesslugslug.js:212
:2)
 at Module._compile (module.js:413:34)
 at Object.Module._extensions..js (module.js:422:10)
 at Module.load (module.js:357:32)

What the heck is unicode? Why Does it keep freakin’ out on me?

Unicode is a character encoding standard for handling text expressed in most of the world’s writing systems

You’ve probably heard of UTF-8, well UTF stands for: Unicode Transformation Format and the 8 means it uses 8-bit blocks to represent a character, but you can learn all about that on your own!

Here’s how to fix it:

Remove the npm unicode package, if it exists:

npm remove unicode

Install unicode-data on your Ubuntu (or *nix) box:

sudo apt-get install unicode-data

Reinstall the npm unicode package:

npm install unicode

Sources: