Work journal

🏗 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