Work journal

Doings and learnings. Updated weekly.

Week of October 19th, 2020

๐Ÿ— 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

๐Ÿ’ซ 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.

Week of October 12th, 2020

๐Ÿ— 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

Week of October 5th, 2020

๐Ÿ— 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

Week of September 28th, 2020

๐Ÿ— 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

Week of September 21st, 2020

๐Ÿ— 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

Week of September 14th, 2020

๐Ÿ— 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.

Week of September 7th, 2020

๐Ÿ— 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

Week of August 31st, 2020

๐Ÿ— 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

Week of August 24th, 2020

๐Ÿ— 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

Week of August 17th, 2020

๐Ÿ— 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

Week of August 10th, 2020

๐Ÿ— 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

Week of August 3rd, 2020

๐Ÿ— 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

Week of July 27th, 2020

๐Ÿ— 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

Week of July 20th, 2020

๐Ÿ— 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

Week of July 13th, 2020

๐Ÿ— 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

Week of July 6th, 2020

๐Ÿ— 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

Week of June 29th, 2020

๐Ÿ— 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

Week of June 22nd, 2020

๐Ÿ— 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

Week of June 15th, 2020

๐Ÿ— 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

Week of June 8th, 2020

๐Ÿ— 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

Week of June 1st, 2020

๐Ÿ— 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

Week of May 25th, 2020

๐Ÿ— 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

Week of May 18th, 2020

๐Ÿ— 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