Today’s issue: Expo never sleeps, Practical-ish Elegance, and life lessons from Daniel Tiger.
Welcome to #165
Me trying to figure out these hydration errors
Last October, Next.js 13 introduced its new app
Router which featured a brand new, revolutionary approach to routing and layouts… for everyone who had never used Remix before 😉.
The router came with support for React Server Components, Layouts, Streaming, and Suspense for Data Fetching — which prompted React Core Team member (and recent Vercel hire), Andrew Clark, to christen Next 13 as “the real React 18 release.”
Fast forward to today, and the app
Router is still in beta (while the Remix team still doesn’t like being copied). But last week’s Next 13.2 release introduced a bunch of new improvements aimed at getting app
ready for prime time.
Here are the highlights:
New Metadata API gives the app
router better SEO support by letting you set static and dynamic meta
tags with an explicit metadata configuration.
Route Handlers let you create custom request handlers for a given route, via the Web’s Request
and Response
APIs. This is an updated, modernized version of the API routes that are deeply integrated into app
.
Next.js Cache (beta) is an evolution of Incremental Static Regeneration which unlocks progressive ISR at the component level. This builds on React Server Components and the colocated data fetching in the app
router.
Statically Typed links (beta) improves type safety when navigating between pages in the app
directory.
Bottom Line: Last we tried, Next’s app directory still had some rough edges, but we’re happy to see some progress.
When you try to do security and compliance yourself.
Everybody procrastinates. Why else do you think I’m furiously typing this at 3:00 am with enough caffeine in my blood to knock out a horse?
But if there’s one thing you shouldn’t put off any longer, it’s setting up all the security and compliance stuff for your site — for obvious reasons. Thankfully, Secureframe can help.
They figured out how to automate the entire compliance process for tons of security frameworks — like SOC 2, HIPAA, ISO 27001, PCI, and GDPR. Their platform has helped thousands of companies save months of time up front, and easily maintain compliance as they scale.
Best of all, they give you guided support from real, in-house experts every step of the way. So you don’t have to have stress dreams about being thrown in jail for screwing something up.
Set up a free, personalized demo to get a quick compliance check-up.
Senior or Staff Front-end Engineer | |||
| |||
Close.com is looking for an experienced React developer to help design and implement major user-facing features. Close is a 100% globally distributed team of 70 happy people, dedicated to building a product our customers love. |
FusionAuth adds login, registration, SSO, MFA, and a bazillion other features to your app in days - not months.
Why does this code work?
const friends = ['Alex', 'Ben', 'Lynn']
friends.hasOwnProperty('push') // false
Specifically, why does friends.hasOwnProperty('push')
work even though friends
doesn’t have a hasOwnProperty
property and neither does Array.prototype
?
DevTwitter has been a little aggressive lately, so as a reminder, here are our two favorite (first, second) videos for keeping perspective.
CarbonQA provides QA services for dev teams, so you’ll never have to do it yourself again. They work in your tools, talk with your team on Slack, and let your devs be devs — so you never have to waste engineering time on testing again 🙏. [sponsored]
CS classes teach you all about advanced topics within CS, from operating systems to machine learning, but there’s one critical subject that’s rarely covered: proficiency with tools. The Missing Semester of Your CS Education is a free resource that aims to fix that.
Alex MacArthur wrote about More Elegant Destructuring with JavaScript Generators, which he describes as “practical-ish.” What a coincidence, Practical-ish Elegance is the working title of my memoir.
ReacTree is a VS Code extension that lets you easily view your React components in a hierarchical tree.
Expo 48 just launched with some cool new features like Expo Image and Expo Router. And just to prove that sleep is overrated, Evan Bacon also made this video about what it might look like for Expo to add React Server Components to iOS and Android.
TanStack Bling is a set of framework-agnostic transpilation utilities for client/server RPCs, env isolation, funcsharding, islands, module splitting, and more. OK one of those words I made up.
const friends = ['Alex', 'Ben', 'Lynn']
friends.hasOwnProperty('push') // false
As mentioned earlier, if you look at Array.prototype
, it doesn’t have a hasOwnProperty
method. How then, does the friends
array have access to hasOwnProperty
?
The reason is because the Array
class extends the Object
class. So when the JavaScript interpreter sees that friends
doesn’t have a hasOwnProperty
property, it checks if Array.prototype
does. When Array.prototype
doesn’t, it checks if Object.prototype
does, it does, then it invokes it.
const friends = ['Alex', 'Ben', 'Lynn']
console.log(Object.prototype)
/*
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
*/
friends instanceof Array // true
friends instanceof Object // true
friends.hasOwnProperty('push') // false