Work journal

😮 Interesting things

• Nested routes are coming to Next.js. Link

🏗 Work

• Published "Routing Patterns in Remix" to my YouTube channel. Link

🏗 Work

• Published "Building my first Remix app!" to my YouTube channel. Link
• Published "Reacting to Remix!", Ep. 140 of Frontend First. Link
• We started a new mentoring contract this week! It's been fun being hands-on with developers + teachers again. I love being in touch with actual problems day-to-day devs are facing, it's giving me tons of ideas for new video content!

💫 Learnings

• While working on my new Remix app I needed a form with dynamic inputs. It was interesting because it was the first time I reached for React state in my whole app. I started with a simple number that I used to iterate over and create _n_ nested inputs, but quickly jumped to putting the state for each input into React. This "upgrade path" to a dynamic form felt a little strange, because now half of my form used controlled inputs, and the other half didn't. The form -> submission behavior was the same – I didn't use onSubmit or massage the JSON. I just used React state in order to build the form, and Remix to handle submission. Still, not sure I'm doing this right or if there's some better heuristics I'm unaware of on how to handle dynamic forms in Remix.

😮 Interesting things

• Revert a migration without losing data. Link

🏗 Work

• Published "Let's build a feature – Cropped Image Uploads!" to my YouTube channel. Link
• Published "Client apps, server apps, and the real reason DX matters", Ep. 139 of Frontend First. Link

💫 Learnings

• I started the Remix Jokes tutorial app and am really enjoying it so far! Since using Hasura I've been allergic to the idea of writing a lot of server-side boilerplate code (think controllers in Rails), but the action->Prisma flow is pretty good so far. Excited to finish the tutorial then use it as a starting point for a new side project idea I have on tracking lifts at the gym! Link

😮 Interesting things

• Coding on your iPad. Link

🏗 Work

• Published "Auth-based route guards in Next.js and debugging in production", Ep. 138 of Frontend First. Link
• Published "iOS Scaled Background Modal Effect with Framer Motion" on my YouTube channel. Link

😮 Interesting things

• Start in the middle. Link
• JavaScript may be getting types. Link
• Interactive Remix routing demo. Link

🏗 Work

• Published "Building a custom Radio Group using Headless UI" to my YouTube channel. Link

😮 Interesting things

• While setting up Sentry I learned a lot about different kinds of errors in React. There are render-time errors, which are errors that happen while React is attempting to render the current frame; and then there are errors that happen after render. Render-time errors literally prevent React from knowing what to render, which is why Error Boundaries exist. React will delegate to them in the event of a render-time error. But errors that happen after render don't unmount the tree – React just keeps the current tree rendered and lets you handle them on your own. Interestingly there is a library called react-error-boundary from one of the React core team maintainers that lets you reuse your error boundaries for non-render-time errors. Still lots to learn here but getting closer to a setup I can reuse throughout all my apps! Link

🏗 Work

• I published "Fixing Twitter's loading screen using Synchronized Animations in React" on my YouTube channel. Link

💫 Learnings

• For this week's video I learned about document.getAnimations(). It returns all currently running CSS animations on the page, which I then used to synchronize different loading spinners via the animation.currentTime property. Super handy and let me avoid keeping a queue in React for the currently rendered Spinners as well as using a clock to synchronize them. The browser already does all this! Link

🏗 Work

• Published “How to remove loading spinners in Next.js” on my YouTube channel. Link

🏗 Work

• Published “How to safely use external state in Concurrent React” on my YouTube channel. Link

🏗 Work

• Published "Reactive State and Built-In Suspense with Valtio" on my YouTube channel. Link
• Published "How to bridge the gap from module scope to React rendering", Ep. 135 of Frontend First. Link

💫 Learnings

• Used Valtio for the first time. Great little state management library from pmndrs. I love how it has Suspense built in – if one of the properties on your state object is a Promise that is still pending, accessing it via the useSnapshot() hook from a component will automatically suspend the current tree! Very cool + makes writing custom hooks that work with Suspense super easy. Link

💫 Learnings

• Refactored some auth code in my side project to make it play better with Suspense. I created a Promise that resolves after Firebase's onAuthStateChanged observer fires for the first time. This lets me use this promise within a Provider component to suspend the app until the initial auth state is known. Pretty nice little pattern, might be the topic for my video this week! Link
• There's a small difference between a function that returns a Promise and an async function. If an async function errors in its function body before returning, the caller will get that error in a .catch() block (since the async function ensures the return value is always a promise). But if a function that returns a promise errors before returning, the caller won't get the error in a .catch() block (since the engine isn't yet aware of the promise return value). Takeaway: probably best to mark any function that returns a promise as async! Link

😮 Interesting things

• Tailwind's official class-sorting plugin. Link
• A delightful treasure trove of tech trivia. Link

🏗 Work

• Recorded and published "Transitions and Data Fetching with Suspense in React 18", Ep. 133 of Frontend First. Link
• Recorded and published "Suspense and Error Boundaries in React 18" on my YouTube channel. Link
• Had a Tweet thread pick up some traction, was fun! The thread is about how Suspense alleviates some problems with React without having to introduce any new APIs outside of rendering. Link

💫 Learnings

• Spent a good chunk of the week learning about how Error Boundaries work with Suspense. Still some learning to do here but it's very neat. I need some clarity around how Next.js does SSR with suspense. It seems to be sharing the render result on subsequent loads with the frontend, which leads to some strange behavior.

🏗 Work

• Published "Transitive Dependencies and Suspending After Initial Render", Ep. 132 of Frontend First. Link
• Published "Suspending After Initial Render in Master-Detail Apps" on my YouTube channel. Link

💫 Learnings

• Got some practice using ErrorBoundaries with Suspense today. Pretty sweet how Suspense turns async code into render-time code, meaning failed requests will trigger error boundaries just like normal sync errors that occur during render. (Without Suspense, async errors resulting from API calls happen after render so they normally wouldn't trigger error boundaries.) Nice to have one extra layer of protection + UI feedback in the event of data fetching errors, basically for free!
• My Cypress tests were failing on my GitHub action, turns out it was due to a difference in timezone. I found this action that I used to lock down the timezone to America/New_York. Good to know in the future whenever I have tests that depend on time! Link

😮 Interesting things

• Slick modern gradient generator. Link
• Dead-simple AR site for seeing whether something fits in your space. Link
• Sandpack: Lightweight embeddable CodeSandbox demos. Link
• Adam Wathan on the struggles of building a business you love. Link

🏗 Work

• Published "A Quick Intro to Suspense in React 18" on my YouTube channel. Link
• Recorded Ep. 132 of Frontend First.

😮 Interesting things

• No code reviews by default. Link
• Building a full-stack app while on a bus. Link

😮 Interesting things

• Impressive amount of detail in Increase's landing page. Link

🏗 Work

• Uploaded "Building the Active Server Indicator using Group and Transform Utilities", Lesson 9 of my Tailwind CSS course on Egghead. Link
• Recorded Ep. 129 of Frontend First on forms and Framer Motion, to be released next week.

😮 Interesting things

• Iterated on some user flows of my Fitness app in Excalidraw. Trying hard to (a) make adding new activities feel satisfying and (b) give a good overview of this week's progress. Tension between these. Getting closer but not quite happy yet with the result. Link
• Pressure sensitivity on the web for Apple Pencil. Link
• Sneak peak of Ryan Singer's product management tool. Link
• Simple useGlobalState hook, from Jotai and Valtio maintainer Daishi Link
• Dann Petty has a new course on web design. Link

💫 Learnings

• Built an iOS ActionSheet-style modal for a form in my fitness app using Tailwind UI modals as a starting point but replacing Headless UI's <Transition /> with <AnimatePresence /> from Framer Motion. Love this approach because the component isn't rendered until it's visible, which is desirable because none of its hooks run and you don't need to "clean up" anything after it gets unmounted.
• Was surprised to find both Formik and React Hook Form don't support a lazy function for initialValues/defaultValues. Seems obvious because they only use the values from the first render anyway. And because the passed-in can change you now have to add defensive code like initialValues={{ category: availableCategories?.[0].id }}. Still looking for a pattern I'm happy with but for now I'm setting some new state called availableCategoriesSnapshot in the click handler that renders the form.

😮 Interesting things

• Neat thread about using Suspense to stream SSR responses with React 18. Link

😮 Interesting things

• SWR hit 1.0. Link

😮 Interesting things

• More native-feeling Electron apps Link

😮 Interesting things

• Persistent SQL in the browser Link

🏗 Work

• Uploaded "Adding Custom Fonts to Tailwind", Ep. 5 of my Tailwind course on egghead.

🏗 Work

• Recorded Ep. 127 of Frontend First.
• Uploaded "Customizing Tailwind’s Color Palette With Your Brand", Ep. 4 of my Tailwind course on egghead.
• Added Hasura and Firebase mocking to my Fitness Challenge side project, then started adding test coverage with Cypress. Also can now dev locally/offline.

💫 Learnings

• Finally got to a place where I have Firebase + Hasura mocked out for testing in Cypress. Still tweaking some things but happy with the API. My cypress/index.js file creates a Mirage server and a local authCache which some custom commands (cy.createServer, cy.createUser, cy.login, etc) reference so from the test authoring side I can ignore the details. My favorite part about this approach is that it will work regardless of which auth provider I use (currently Firebase, but e.g. could switch to Auth0) as well as which data layer I use (could switch from Hasura to a custom Rails backend or anything else). Hoping to make a video + blog post about this soon!

😮 Interesting things

• Being polite to neural nets. Link

😮 Interesting things

• Great thread showing off the benefits of React's new startTransition() API. Link

😮 Interesting things

• Node.js, natively in the browser. Link
• Gradient generator for Tailwind. Link

😮 Interesting things

• Visual guide to DOM events. Link
• Test if you have an eye for details. Link
• Online market for 3D objects easily embeddable in React apps. Link

😮 Interesting things

• Lovely announcement post from Sketch. Link

🏗 Work

• While working on the Headless UI docs we wired up `vue-loader` in our Next.js app to be able to render Vue Single-File Components directly in our React pages. This was surprisingly straightforward!

😮 Interesting things

• Windows 95-style React components. Link

😮 Interesting things

• Relay released a Hooks-based API. Link

🏗 Work

• I published "Wireframing MVP screens for a new app on the iPad" on my YouTube channel. Link

😮 Interesting things

• Lessons from Open Source by Mike Bostock. Link

🏗 Work

• We published Ep. 118 of Frontend First. Link
• Discovered an inconsistency with pinching to zoom in my image cropper between Safari and Chrome. David Bismut tracked it down and published an alpha release with a fix, but it required a slightly different approach to calculating the scaled distance for the pinch gesture. Will link to a commit with the fix once I'm happy with it. Anything gesture-related is so complicated! Makes me grateful for libs like react-use-gesture, and also hungry for the days when we get better first-class gesture APIs properly supported by browsers.

😮 Interesting things

• The first sounds from Mars ever recorded. Link

🏗 Work

• I published "The Rubber Band Effect: Building Responsive UIs using Dampened Gestures" on YouTube. Link

😮 Interesting things

• A new rendering target for React: video. Link
• Neat-looking user management service. Link
• Dropdowns: the UI of last resort! Link
• Wonderful introduction to transitions in CSS. Link

🏗 Work

• I published "Animating Gesture Callbacks with Framer Motion" on YouTube. Link
• We published "Best Practices for Imperative APIs in React", Ep. 117 of Frontend First. Link

😮 Interesting things

• Discussing the State of JS/CSS results. Link
• SVG wave generator. Link
• GitHub's gorgeous new iOS icon. Link

🏗 Work

• I published "Origin Correction while Pinching to Zoom" on YouTube. Link
• Consulting.

💫 Learnings

• David Bismut (@dbismut) shared this great Excalidraw to help me understand some math needed for my video this week. Loved learning about the memo API in React Use Gesture – it's a super convenient way to share state across callbacks without as much ceremony as a ref. Link

😮 Interesting things

• Impressive demo from @pmndrs – even more so on mobile. Link
• AI-generated SQL. Link
• Fun post on futuristic UIs. Link

🏗 Work

• Consulting.
• Prepped my next Image Cropper video. The math/transforms involved are tricky to explain so I haven't managed to record yet.
• Published "Auth: The Momentum Killer", Ep. 116 of Frontend First. Link

💫 Learnings

• Got some more reps in with React Use Gesture. I'm updating my image cropper's pinch-to-zoom feature to zoom the image centered on the origin of the pinch gesture itself, rather than on the center of the image. The approach involves calculating the distance between the image's center and the pinch's coordinates, and adjusting the x/y position of the image accordingly as the image is being scaled up. It gets a bit tricky because you need to recalculate the distance as the scaling increases to account for the new dimensions. But it really improves the overall UX of the gesture. I'm planning on recording this week.

😮 Interesting things

• Create an SVG image from a tweet. Link
• Apercu, nice font used on the WeWork site. Link
• A course on testing Phoenix LiveView applications went into early access this week. Link
• Chrome 88 now supports the `aspect-ratio` CSS property. Link
• A color picker for Tailwind. Link

🏗 Work

• We published Ep. 115 of Frontend First on Thursday. Super excited to be back on the mics and planning on maintaining a weekly cadence going forward! Link
• I published "Snapping to Edges with Gesture Callbacks" on my YouTube channel. Link
• Consulting.

😮 Interesting things

• Absolutely gorgeous site for a course on interface design. Link
• Automatically generate TypeScript typings from a GraphQL schema. Link
• The 2020 State of JS survey was published. Time to learn TypeScript! Link

🏗 Work

• Consulting.
• Recorded Ep. 115 of Frontend First, to be published next week.

💫 Learnings

• I've been thinking about how to optimize our studio for video production now that we've been working from home. I've noticed I'm really happy with the setup/layout in some of my videos but not others, so I've been trying to understand why. Been learning about depth, shooting into a corner, and also things like color contrast. I'm planning on buying some things that will complement my skin tones and make it easier for me to stand out from the background. Really loved this video from Becki and Chris as it has a ton of good tips about how to design a space that works well for you. Link

😮 Interesting things

• React is working on a new type of component that is only ever rendered (and re-rendered) on the server. Link
• Fun, comprehensive walk-through of Framer Motion's primary APIs. Link
• Fascinating look at tradeoffs in API design from Stripe. Link
• Really enjoyed this Syntax episode on tech predictions for 2021. Link

😮 Interesting things

• Minimal JS approach to building dynamic frontends from the Rails folks at Basecamp. Link

🏗 Work

• Interactive essay explaining how cameras work. The pedagogical approach of this article is magnificent. Link
• I needed a scale to dampen some dragging behavior for my image cropper, and found this site displaying various Easings a useful reference. Link
• Consulting.

😮 Interesting things

• Vercel raised another $40M, bringing its total funding amount to $61M. Link

🏗 Work

• Got pinch-to-zoom and panning with dampening working on the Image uploader + editor for my Fitness side project.
• Consulting.

💫 Learnings

• While working on a drag-and-zoom image editor for my side project, I found the react-use-gesture library which shows some examples of using its gesture hooks alongside React Spring. But I wanted to use Framer Motion for all my animations, so I poked around to see if it was possible to use it instead – and it was! Framer Motion's higher-level motion components are built around its lower-level MotionValue primitives that it also exposes as public API. It even has a useSpring Hook that provides a mutable value that can be set/get without triggering a React re-render. Pretty amazing testament to the design of these two libraries that they work together so well, with zero knowledge of each other.

😮 Interesting things

• High-quality image editor built in JavaScript. Link
• Fun, casual chat with Adam Wathan about Tailwind CSS. Link
• Wild story about a massive rewrite of the Uber app. Link

🏗 Work

• I published "One skill every web developer needs to know." on YouTube. Link

😮 Interesting things

• Snowpack v3 will have streaming NPM imports. Link

🏗 Work

• I wrote up a post covering the tips from my video on making websites feel like native apps. Link

🏗 Work

• Published "Bundling client-server communication with packages for Next.js", Ep. 114 of Frontend First. Link
• Lindsay published "Converting an Ember Component to Native Class Syntax" on EmberMap. Link
• I published "8 Tips to Make Your Website Feel Like an iOS App" on my YouTube channel. Link

💫 Learnings

• iOS respects a "apple-mobile-web-app-status-bar-style" meta tag that can be used to make a mobile website running in standalone mode appear more like a native app. Unfortunately the values are limited, but if you make it "black-translucent" and accommodate the "notch" space in your header, you can fully customize the background color of your header.
• I also found the pwa-asset-generator package that helps generate icons and splash screens you can use to make your mobile site feel more like a native app. Just serve the assets + add some <link> tags to your site's <head>. Awesome package! Link

😮 Interesting things

• Fantastic interview about understanding the fundamentals with Gary Bernhardt. Link
• Tailwind launched an impressive new homepage for v2 that features some really nice interactions built with React. Link

🏗 Work

• Published "Is GraphQL an implementation detail?", Ep. 113 of Frontend First. Link
• Made my Fitness side project more like an iOS app via Apple's standalone meta tags, icons and splash screens.
• I published "Animated Progress Bars with Framer Motion" on my YouTube channel. Link

😮 Interesting things

• Slick reference site for JavaScript operators. Link
• DevTools-like experience for visually editing Tailwind sites. Link

🏗 Work

• Published "The convergence of frontend and backend frameworks", Ep. 112 of Frontend First. Link
• Published "Getting Lean with the Next.js Image Component" on my YouTube channel. Link
• Worked with Ryan on adding Firebase auth to my Hasura-backed Fitness app.

💫 Learnings

• Really enjoying working with Hasura on this newest side project. Adding auth was annoying – Firebase's APIs are great but there are too many moving parts when integrating the services. However, it's still worth it to me because Hasura's autogenerated API is just so pleasant to work with. I've never moved faster when adding new features to a greenfield UI project, especially when building screens that involve aggregate queries & bulk mutations.

😮 Interesting things

• Minimal generative JS dot grid. Link

🏗 Work

• Published "Building Twitter's Dropdown Menu with Headless UI and Framer Motion" on YouTube. Link
• Published "Key props vs. effects", Ep. 111 of Frontend First. Link

😮 Interesting things

• CSS course targeted at frontend developers. Link
• Remix entered public beta. Link
• The Rise and Fall of WeWork. Link
• How to build a company in 2020. Link

🏗 Work

• Darin published Ep. 6 of EmberMap's StoryBook series, "Working with the Actions addon". Link
• Shipped the V2 Mirage REPL with persistent URLs! Check out this GraphQL example – and fork it just like you're used to on CodeSandbox 🙌 Link
• Lindsay published "Converting a Model", Ep. 1 of EmberMap's Converting to Octane series. Link

💫 Learnings

• We came across some interesting behavior with URQL where you can update the variable passed into useQuery() but the res.data returned from the hook shows stale data, even if the new query is already in the cache. There are a few renders where the variables don't agree, which can cause problems if you're checking those values to do something like set state. I would have expected the cached data to line up with the variable within a single render, so it's something you have to check if a mismatch would cause problems.

🏗 Work

• Published "How to test apps built on third-party services", Ep. 110 of Frontend First. Link
• Worked more on Persistent URLs in the Mirage REPL.
• Published "React + Hasura + Mirage Hack Session" on YouTube. Link

🏗 Work

• Some more work on persistent URLs in Mirage REPL.
• Recorded Ep. 110 of Frontend First to be published next week.
• Recorded a video of Ryan and I doing some pairing. Hoping to edit this down and publish on my YouTube channel.

💫 Learnings

• React's useState can take a function that only calculate its initial values once upon first render. This helped us split out some logic that was confusing because it was executing during every render frame.

😮 Interesting things

• Fun rant about Firebase from someone who loves real time. Link
• Tailwind REPL in the browser. Link
• Interesting Twitter thread about whether setting a ref's value during render is considered side effectful. Link

🏗 Work

• Worked with Ryan on adding persistent URLs to the Mirage REPL.
• Figured out how to get Mirage to work with Axios when testing in node. Added the example to the miragejs/examples repo. Link

💫 Learnings

• Hit some tension with Hooks when working with Ryan on the REPL. With persistent URLs we now have three ways to load sandboxes – default, query parmas and network (via Hasura). We started working on three different hooks for each case, but because they are hooks they all run on each render. This led us to add some defensive code to each hook, so that they knew whether or not to execute their logic based on the type of sandbox being loaded. It felt messy so this week we're going to try using three different components in order to keep the logic isolated. It feels like we're missing something, since this is really about sharing state rather than rendering, which is kind of the whole point of hooks. The fact that we're reaching for new components even though rendering is the same feels like a code smell. I'll be interested to see what we learn after working on it some more this week.

😮 Interesting things

• Good discussion on mocking service boundaries. Mirage gets a shout out! Link

🏗 Work

• Mirage issues & maintenance.
• I published "Animating Presence with Framer Motion" on YouTube. Link
• Consolidated Mirage's React and Vue demos into a new miragejs/examples repo (inspired by nextjs/examples). Hoping this will make it easier to add more simple examples showing how to integrate Mirage with various tools and testing frameworks. Link

😮 Interesting things

• My interview with Michael Chan on React Podcast was released! Link

🏗 Work

• Made my work journal data real-time using Firebase. Link
• Consulting.
• Published Ep. 109 of Frontend First. Link
• Added Carbon Ads to miragejs.com. This was tricky and we ended up using a queueing React component to do this, so check out the PR if you're interested! Link

💫 Learnings

• When working on CarbonAds with Ryan, I ended up using useCallback for the first time. I've tried to avoid it as much as possible because I feel like it should only be used if absolutely necessary. We added some Context to our app to help coordinate ad loading, and the context was providing register/unregister functions that the consumers would call on mount/unmount. These functions set some state on the parent provider, which caused the functions to be recreated, which was causing infinite re-renders. So useCallback let us create stable functions the children could use.

🏗 Work

• I added auth using Firebase to my personal website so I could add entries to my work journal via my admin interface. It was insanely easy! Link
• Starting adding Carbon ads to miragejs.com.
• Consulting.
• Recorded Ep. 109 of Frontend First. Out next week.

💫 Learnings

• Had a tough time debugging some app code in a generator that used a try/catch/finally block. There was async code that yielded inside the try, and the code inside the finally was executing, but the line right after the block wasn’t. It was confusing because it seemed like the code right outside the block would have to run next since it was synchronous. But the generator treats the entire block as an iteration, and thus the rest of the code can be discarded without executing it.
• Adding Carbon to miragejs.com has turned out to be surprisingly tricky, because the script is async but doesn’t give you a hook to know when it’s finished. If React quickly unmounts and remounts the component it can lead to duplicates. This isn’t the first time I’ve run into a need for an async cleanup for an effect. Tricky one for sure.

😮 Interesting things

• The liberating feeling of accepting that no one knows the future. Link
• Melange and Arrakis and sandworms, oh my! Link

🏗 Work

• I published "From Gatsby to Next.js: The Power of Incremental Static Regeneration" on YouTube. Link
• Thanks to some work from Rocky, the Mirage REPL now supports GraphQL! Link
• I was interviewed by Michael Chan (@chantastic) on React Podcast about how the frontend community is hungry for full-stack solutions. The podcast will be out soon but you can watch the livestream on YouTube. Link

😮 Interesting things

• Great brief history + overview of Prisma. Found this one really helpful as I haven’t been following closely since the beginning. Link
• Fun digital sketchpad. Link
• Visualizing CSS transforms. Link
• Image components are coming to Next.js. Link

🏗 Work

• I made this work journal dynamic using Firebase.
• Published "Next.js vs. Gatsby, revisited", Ep. 108 of Frontend First. Link
• I shot and started editing a video about the rewrite of my personal site from Gatsby to Next.js. Hoping to get it published next week.

💫 Learnings

• Next.js has an incredible feature called Incremental Static Regeneration which I'm now using on this Work journal. It takes your statically built Next.js app, deploys it, and then subsequently updates data-driven pages if that data happens to change – all without needing to rebuild and redeploy. Vercel's deploy infrastructure is the magic ingredient, as they compare the runtime data out-of-band of the user's request, and push updated static pages to their CDNs if it has changed. It makes for an unbelievable developer experience without compromising on fast initial render times for the user, and showing them data that is at most 1 second stale. Truly magical combination of technology. Link

😮 Interesting things

• Most calming account on Instagram. Link
• Andy Serkis is narrating The Hobbit. Link
• Next.js Conf was announced. Link

🏗 Work

• Spent some time planning our work over the next few months. Shipping Mirage v1.0 is our top priority.
• I rebuilt this site (samselikoff.com) in Next.js. It used to be a Gatsby site but I wanted access to Next's API routes and also wanted to get some more practice in with Next. It was surprisingly easy – I love how most of my site is just React which makes it feel more portable. Next.js has great docs and examples, and the local dev environment is fast and very fun to work in.

😮 Interesting things

• Tailwind 1.7.0 has gradients. Link

🏗 Work

• Helped Lindsay publish "Testing loading states" on EmberMap. Link
• Published "Adventures with Amplify", Ep. 107 of Frontend First. Link
• Worked on Mirage issues. Also celebrated 3k GitHub stars for miragejs!
• Experimented with adding Framer Motion to the Reminders app from the Mirage tutorial. I'd like to make a video on this soon. Link

😮 Interesting things

• React 17 was announced. Mostly internal improvements with no new features. Link
• Inside look at a modern hiring process. Link
• Better buttons. Link

🏗 Work

• I published "Animating Skeleton Screens with Tailwind CSS" on YouTube. Link
• Recorded Ep. 107 of Frontend First. Will publish next week.
• Bought a light box kit + spent some time with a cinemtographer friend learning about lighting and color. Still have a lot to learn here! Link
• Helped Darin publish Ep. 5 of Building UI Components with Storybook on EmberMap. Link

💫 Learnings

• I learned more about color correction, white balance and exposure. I got some soft boxes that are all 5000K temperature lighting and want to get some blackout curtains next so I have total control over the lighting in my videos. I played around with recording at night and the difference is dramatic when you have total control of the light and the camera's white balance dialed in correctly. The goal here is to get the look and style of all my videos the same. Now that I know a bit more about this, looking at my recent videos is kinda stark! They all look very different from each other. But I suppose continuous improvement is the name of the game.
• I also learned about shooting in Log format and using a LUT (lookup table) to decompress the image. Shooting in Log prevents the camera from losing data on the brightest and darkest parts of an image. It does this by compressing the data, so that the raw image ends up looking very flat. You then use a LUT to decompress it into a standard (REC 709) format where you can then make your additional tweaks and grades. The goal here is to get my environment set up in such a way that I can record, apply a LUT, and have a similar-looking video every time.
• While working on my Twitter clone I was asking Adam a question about line height. He noticed I had added a font size of 15px and said it was going to affect many parts of the UI. I said I added it because mobile twitter.com uses 15px, and I wanted to match it. It was an interesting conversation and made me realize that if you do want to add something like a 15px font size to Tailwind's theme, you really should take the time to trace that through and think about the corresponding changes to line height and the spacing scale that it entails, because many of these values are interrelated. For example, with a 15px font size, you can't match icons without also adjusting the spacing scale. The default scale of a 16px base and a 4 unit scale is, in Adam's words, "the hardest to mess up."

😮 Interesting things

• If books were alive. Link
• The author of Babel announced Rome, his new JS linting project. Link
• Jaw-dropping story of overcoming adversity, the power of the mind, and finding the physical limits of the human body. Link

🏗 Work

• I published "Buffering new Tweets with SWR" on YouTube. Link
• Published "Does code splitting negate the benefits of building an SPA?", Ep. 106 of Frontend First. Link
• Mirage issues, EmberMap work, and consulting.

💫 Learnings

• One question that came up a few times from my video was whether JavaScript equality (===) could be used to compare two pieces of React state. In all my tests, "setBuffer(data)" made the "buffer" state an actual reference to the same object that "data" referenced, meaning, both pieces of state referred to the same JavaScript object. And therefore the equality check could be used, even across renders. Definitely a useful thing to know!

😮 Interesting things

• Next.js 9.5 was released. Link
• GitHub publicized their product roadmap. Link
• Taleb on the history and statistics of pandemics. Link

🏗 Work

• I published "Building a Twitter Clone with Tailwind CSS and Next.js" on YouTube. Link
• I also tidied the demo from the video and threw it up on Vercel. Link
• We brought on a second person to help make content for EmberMap which lead me to write up some notes on my process for making videos. Excited to get this knowledge out of my head and more formalized so it's easy to share.
• Recorded Ep. 106 of Frontend First which we'll publish next week.
• Caught up on some business admin work + did some consulting.

💫 Learnings

• My Twitter clone video ended up a bit long. I'd like to get on a consistent weekly cadence of publishing videos in the 6-9 minute range. However, these longer videos do seem to get a bit more attention. So still figuring out what works best for the kind of stuff I want to teach.
• One of the main takeaways from the video was how truncated text behaves when it's in a flex child, due to text's "intrinsic width." CSS Tricks has a nice little article on it. Link

😮 Interesting things

• Apollo Client 3.0 was released. Link
• Magenta ain't a color. Link
• Mesmerizing rendition of Moon River. Link

🏗 Work

• I prepped my next YouTube video on rendering buffered data from SWR. This is the first week I missed publishing in a while, and I felt very defeated by it. When the weekend came I knew it'd be too much to try to squeeze in, so I listened to my body and gave myself permission to rest. Ended up having a glorious beach day on Sunday. Still working on finding balance during quarantine + excited to get this video up next week. Link
• We got a GraphQL guide added to the Mirage docs! Excited by the momentum here, driven by Rocky's ongoing excellent work. Link
• We also shipped GraphQL support in the REPL. Few more quality-of-life improvements coming here but excited to start sharing more examples soon. Link
• Published "Stop Energy", Ep. 105 of Frontend First. Link
• Published Ep. 7 of Contextual Components in Octane on EmberMap. Link
• Published Ep. 4 of Building UI Components with Storybook on EmberMap. Darin's doing a great job with this series. Link
• Consulting.

💫 Learnings

• In my ongoing quest to understand useEffect, I asked a question on Twitter about when a function parameter needs to be invoked inside of an effect. I'm still not confident about any of the answers, but Chris Freeman shared this great article with me on Potentially-Pure Functions. It seems that in a language like JavaScript, the purity of a function can depend on the purity of its arguments. The reason I'm spending so much time trying to understand this is because of this 2019 tweet from Sebastian. I'm still not sure how much this stuff matters outside of a CM/Suspense world. Link

😮 Interesting things

• When leaders should lie. Link
• Framer Motion 2 is out. Link
• Dyanmo's strengths over relational DBs. Link
• Shaders for frontend devs. Link
• Using Bitcoin to verify digital property rights in video games. Link
• Delightful Apple video on working from home. Link

🏗 Work

• I published "The Rule of Least Power" on YouTube. Link
• We enabled the REPL on miragejs.com! The Share links also now save the request method, URL and body, in addition to the server config. Finally, we debounced updates so typing feels much more responsive. Link
• Rocky Neurock shipped v0.1.0 of @miragejs/graphql! I reviewed his work but it was really all him. Stoked to add GraphQL support to the REPL so we can properly show it off soon. Very excited for this. Link
• Did some consulting, as well as some Mirage maintenance work.

💫 Learnings

• Dependabot has been churning through our Netlify build resources for miragejs.com. We automerge in-range dependency updates, so the Netlify preview builds for Dependabot PRs were literally going unused. I learned that you can tell Netlify not to build a PR if the commit message has "[skip netlify]" in it, so I customized our Dependabot config to add this – and it worked! Still need to smooth this out a bit as the builds are ignored when merged to master, but for now it is helping alleviate the problem. Check out the link for our current config. Link

😮 Interesting things

• Slick embeddable terminals that run in the browser. Link
• Stripe launched a new homepage. Link
• SWR's docs site also got a refresh. Link
• Neat app that rolls up your social feeds into a daily email. Link
• Part 1 of an interview about the technology behind Remix. Link
• ...and part 2 on Michael and Ryan's plan to sustain development. Link
• Fascinating interview with Peter Thiel from 2019. Link
• The best product demo I've seen in recent memory. Link

🏗 Work

• I published "Authorizing anonymous users in Hasura using Netlify Functions" on YouTube. Link
• We deployed a Hasura backend for miragejs.com and shipped Share links to the REPL. Had a lot of fun building this. Link
• Published "Tech debt vs. platform risk", Ep. 104 of Frontend First. Link
• Published Darin's video "Working with Context", Ep. 3 of Building UI Components with Storybook on EmberMap. Link
• Did some consulting work.

💫 Learnings

• Hasura lets you configure permissions for unauthenticated users, which is perfect for making certain queries public (like the blog posts for your homepage) without needing to add support for user accounts. The docs are confusing and also incorrect in a few places, but all you need to do is set the `HASURA_GRAPHQL_UNAUTHORIZED_ROLE` environment variable and it works regardless if you happen to be using either webhooks or JWTs elsewhere. Link

😮 Interesting things

• Stripe launched a customer portal. Link
• Hasura launched a premium hosted version of their platform. Was only a matter of time. Exciting! Link
• Linear, a beautiful web-based productivity app, now has open signups. Link
• Ryan Singer and Adam Wathan chatted about how Shape Up applies to small teams. Link
• React Core Team Q&A. Link

🏗 Work

• I published "React is a programming language for UIs" on YouTube. Link
• I finally shipped the official Mirage Tutorial! Stoked to figure out my next priority. Link
• Published "Safety and idempotence", Ep. 103 of Frontend First. Link
• Published "Yielding a Divider", Ep. 6 of Contextual Components with Octane on EmberMap. Link

😮 Interesting things

• Baremetrics launched a minimal Intercom alternative. Link
• Interesting thread on challenges of auth when using a backend-as-a-service. Link
• Neat physical productivity tool. Link
• Video refresher on the story of Last of Us Part 1. Link
• Adding historical context to the current wave of protests. Link
• Taleb's fat tails applied to software projects. Link

🏗 Work

• I published "Levels of abstraction in testing" on YouTube. Link
• Worked on the Mirage tutorial some more. Need to give myself a hard deadline or this will keep filling up space.
• Interviewed + published Ep. 102 of Frontend First, which was an interview with Drew Powers about Pika. Also recorded next week's episode with Ryan. Link
• Published Ep. 2 of our Storybook series on EmberMap. Darin's doing an awesome job with these. We also planned out Ep. 3. Link

😮 Interesting things

• Jason Fried gave a video walkthrough of HEY. Link
• Ryan Singer has a new podcast. Link
• Great interview with pmarca. Lots of insights about processes and systems. Link
• CS 1.6 in the browser. Cue extreme nostalgia. Link
• Sony announced the PS5. Link

🏗 Work

• I published "React Router v6 Preview: Nested Routing". This started as a simpler idea for making a NavLink component that supported an `inactiveClassName` prop, but turned into more of a semi-livestream experimenting with several cool new features of React Router v6. Link
• We interviewed Tom Preston-Werner about Redwood JS for this week's podcast. Great conversation on how Tom & company are trying to ameliorate some of the architecture woes endemic in larger Rails apps. Link
• Published "Yielding a Menu Item" on EmberMap's series on Contextual Components. Link
• I got the four tests written + passing for the last part of the Mirage tutorial, so now I just need to finish writing them up. Was hoping to ship the tutorial but it was a short week. Next week this is my number 1 goal!

💫 Learnings

• This WIP guide from the dev branch of React Router gives a great overview of the v6 features of the library. Link
• Got more practice with React Testing Library + Jest this week. I was struck by the amount of boilerplate required to wire up a test with my app and React Router running. A lot of the testing primitives in the React ecosystem seem to be at the wrong level of abstraction to me – my app only ever runs in production with a router, for example. I wish these tools would just let you visit("/some-url") rather than render(<Provider><App /></Provider>).

😮 Interesting things

• It was fun hearing the creator of AWS Lambda talk serverless. Link

🏗 Work

• I published "CAP theorem explained for Frontend Developers" on YouTube. Fun to think about how many apps we use on a daily basis have an Optimistic UI. Link
• No podcast this week but we did record an interview with Tom Preston-Werner about Redwood JS. Coming next week.
• I finished Part 8 of Mirage's tutorial on Factories. Was hoping to get the whole thing done this week, but alas. Link
• Published two new videos in EmberMap's series on Contextual Components. Link
• I got Firebase auth working in my Hasura/Next.js app in two different ways: JWT and Session Cookies. Planning on making a YouTube video about it soon.

💫 Learnings

• This post from Coda Hale helped me understand some interesting things about CAP as I was prepping this week's video. Link
• In reading about auth I learned a bit about symmetric vs. asymmetric encryption. How asymmetric encryption works is really fascinating. I have some more learning to do here but might make for good future video content.

😮 Interesting things

• The podcast episode that inspired this week's video on CAP. Link
• Another fascinating episode from Go Time on Immediate mode GUIS. Link
• NASA and SpaceX launched a rocket. You may get emotional. Link
• MKBHD on BLM. Link
• Comprehensive breakdown of modern CMS options. Link

🏗 Work

• I published "Why frontend build tools are getting an overhaul" on YouTube. Proud of how this video turned out + how many lightbulb moments I had doing the research for it. Link
• Ep. 100 of the podcast! More about ES modules, and the desire for integrated JS tools. Link
• I completed Mirage's tutorial up to Part 7. Very excited to get this guy done + live on the site soon. The demo's hosted on Vercel. Link

💫 Learnings

• ES modules are stateful singletons, but in a different way than CJS modules are. I still need to understanding exactly how.
• I've been adding auth to my Next.js/Hasura side project. It's the first time I've worked with JWTs and boy are these flows complex. Lots of bad / poorly written articles out there, but this was one from Hasura was the most helpful so far. Link
• On the other hand, Firebase's Auth service is incredible and the docs are clear as day. If only their data store used GraphQL... Link
• On the video production side, I learned that color correction is fixing issues with raw footage (like adjusting white balance or correcting exposure) while color grading is applying effects for stylistic purposes (like adding a cyan tint for a movie-like look).

😮 Interesting things

• Guillermo Rauch wants to stop on-demand computing. Link
• Pete Hunt thinks Hooks are hard. I feel seen. Link
• Adam Wathan is building renderless UI components for Tailwind. Link
• Beautiful browser-based drawing tool that loads instantly. Link
• My favorite YouTube channel about videomaking. Link

🏗 Work

• This week's podcast was an interesting chat about the "modern web," the state of SPA development, and how React is planning on moving more work to the server. Loved Rich Harris's take. Link
• Added CRUD operations to Mirage's REPL. Had fun learning about nested (hierarchical) states in XState. State machines are powerful, I’d like to continue exploring using them in my work. Link
• Made some videos on contextual components in Octane. Still my favorite component API for sharing both rendering and state – even prefer it to Hooks for this use case.
• Prepped a YouTube video explaining why tools like Snowpack and Vite are pushing us to stop bundling our apps in development.

💫 Learnings

• Webpack supports a sideEffects: false option you can use to tell build tools if your library is tree-shakable. We added it to Mirage because even though it does have side effects, they shouldn't stop it from being tree-shaken. Link
• Excellent article on how ES modules work. The spec is a fascinating accomplishment of engineering. Asynchrony ruins everything it touches. Link

😮 Interesting things

• Jason Warner talks about leading GitHub to its $7.5 billion acquisition. The part about GitHub knowing what value it brought to the table was a highlight. Link
• The YouTuber Matt D'Avella has been inspiring me. Link
• Second-guessing the modern web. Link
• ...along with Dan Abramov's commentary. Link
• ...and Rich Harris's response. Link
• Why we added tooling to the web, and how we're going to remove it. Link