Playful Programming

Let's Write React Hooks From Scratch Ever wondered how React's hooks function under-the-hood? Let's write our own implementation and find out together.

To visit our latest, click the link below.

playfulprogramming.com/posts/react-...

We will also be discussing it in our Book Club, tomorrow, at 4:30 PST! Come join us!

The History of React Through Code Learn React's history using pragmatic code samples and deep dives. This journey reveals the consistent design in React's APIs stemming from the very beginning.

Let's Write React Hooks from Scratch, as the name implies, goes over the details of hooks' implementation. This is meant to be a companion piece to our larger blog post about the history of React, which you can find here! playfulprogramming.com/posts/react-...

✍️ Our newest article is out!

Hooks are great tools that provide better code reusability and performance improvements to your codebase. In our new article, we teach you hooks work, from a functional standpoint, and also how to build them!

You should be using unitless values for line-height I've seen every value in the book used to set line-height values in CSS. This is why you should just use unitless.

To learn why unitless values are better, and why using REM can have adverse effects, visit out newest article below!

playfulprogramming.com/posts/you-sh...

📝 New article: You should be using unitless values for line-height!

In our new blog post we lay out why unitless line height values are good for maintainability, and accessibility.

Unitless values inherit from the parent, ensuring it works on all value types.

The History of React Through Code Learn React's history using pragmatic code samples and deep dives. This journey reveals the consistent design in React's APIs stemming from the very beginning.

This doesn’t cover even half of what our new article has in store; we packed it full of diagrams, graphics, and tons of code samples.

If you wanna know how we got here, and where React is going, click the link below!

playfulprogramming.com/posts/react-...

Server Components and the use hook extended React to the server: with unified data fetching, reactive server‑action forms and seamless server‑side rendering, it created a truly full‑stack UI model.

Fiber, the rewrite before it, brought concurrency, prioritization, pausing and incremental rendering. It laid the groundwork for many other features and allowed for error boundaries!

Hooks, for example, were introduced in React 16.8 and introduced useState and useEffect making reusable stateful logic easy. This was a massive improvement over the previous iteration.

In our new article we go through the many updates React has received over the years to showcase how its incremental updates have been consistent with the original vision for the framework.

A banner with a timeline graph and the headline "The History of React Through Code"

🌐 The History of React Through Code

We have a new article for you, and this is a big one. 👀

There were many criticisms of React's design throughout the years, but how valid are they? Our new article explores that and much more!

Styling Styling your web application comes in many flavors. Let's explore the different approaches you can take in your projects.

In our blog post, we do deep dive into the world of CSS, with scoping, functions, utility classes, SaSS, Tailwind, and much more.

Click the link below to read it in full.

See you then!

playfulprogramming.com/posts/ffg-ec...

📚 Join our book club this Thursday! 📚

In our book club we hang out and talk about an article — this week, we're discussing own our article, Framework Field Guide's "Styling" article!

Join our Discord and meet us on today, July 10th, at 4:30 PST!

Next.js Promise Racing Learn how you can use Next.js' and React's primitives to achieve a neat party trick: Conditionally show a loading spinner based on a given wait time.

This not only comes with performance benefits, but also shows the advantages of React's client and server APIs!

Read the article in full here — it's a quick read!

playfulprogramming.com/posts/nextjs...

📝 New article: Next.js Promise Racing!

In this quick article, we show how you can use React Server Components to display a loading spinner in case a Promise takes longer than a specified amount of time.

Read Ryan's in-depth article down below.

rmarcus.info/blog/2016/12...

📚 No, really, what's a monad? 📚

That's what we're gonna answer in today's book club!

Every Thursday we hang out and discuss an article; this week, it's Ryan Marcus' article about monads — whatever they are.

Join us today on Discord at 4:30 PM PST!

How Discord Scaled Elixir to 5,000,000 Concurrent Users From the beginning, Discord has been an early adopter of Elixir. The Erlang VM was the perfect candidate for the highly concurrent, real-time system we were aiming to build. We developed the original…

Read the article in full below!

discord.com/blog/how-dis...

📚 Join our book club this Thursday! 📚
In our book club we hang out and talk about an article — this week, we're discussing Stanislav Vishnevskiy’s "How Discord Scaled Elixir to 5,000,000 Concurrent Users"!

Join our Discord and meet us on today, June 26th, at 4:30 PST!

The Framework Field Guide - Ecosystem Learn the surrounding tools around Angular, React, and Vue all at once and for free. Allow your apps to flourish using common tools.

The Framework Field Guide: Ecosystem is available to read entirely for free.

Read all you want and let us know what you think!

playfulprogramming.com/collections/...

An example of a button being styled in Tailwind CSS, using classes as styling options.

The third chapter is about styling, where we discuss different ways to style your apps, either by organizing your code using specific patterns or using existing libraries for customization, like Tailwind.

Venn diagram showing the function of Prettier, TypeScript and ESLint.

The second chapter is about linting, formatting, and type-checking; all of which provide insights into your code, allowing you to optimize and fix errors. This includes Prettier, ESLint, TypeScript, and more.

A diagram of bundling and their output, where it shows TypeScript getting converted to CSS and JavaScript.

The first chapter is about bundling, which unlocks many features such as transpiling, automatic linting, merging and optimizing of code and many more features.

Banner of Ecosystem, the second book of Framework Field Guide. It has a forest backdrop with the title "Ecosystem" on top.

Today we’re proud to release the first 3 chapters of Framework Field Guide’s second book: Ecosystem.

This book discusses the tools surrounding frameworks — we're going to talk about all the capabilities that are unlocked when using them and their usefulness!

Brandon Dail Building modern web apps is a complex process with a lot of moving parts. Sometimes these moving parts come to a halt and things start breaking.

We've consistently hosted our weekly book clubs on Thursday, and today is no different. You can check this week's article in the link below and join us today at 4:30 PST!

www.brandondail.com/posts/fault-...

Join the Playful Programming Discord Server! Check out the Playful Programming community on Discord - hang out with 2501 other members and enjoy free voice and text chat.

Last but not least, we've also announced a partnership with Hacker Relay, which allows our users to view job listings directly from our Discord server!

This gives us a fast and easy way to access job opportunities.

Join our Discord to make use of it! discord.gg/FMcvc6T

The Art of Accessibility Learn accessibility for modern web applications.

The second is "The Art of Accessibility", a comprehensive collection designed to be an ever-present handbook in your framework and development journey. It details the benefits of accessibility, user affordances and teaches you how to implement them!

a11y.art

Return to <form> Learn how different frameworks handle forms, what features they contain and how to implement them in your applications.

We also added two companion collections — the first being "Return to <form>", which discusses the different form alternatives you can have in React, Angular, and Vue and how to implement them efficiently within your products.

playfulprogramming.com/collections/...

The Framework Field Guide A practical and free way to teach Angular, React, and Vue all at once, so you can choose the right tool for the job and learn the underlying concepts in depth.

We then released the biggest update to the Framework Field Guide; V2 has innumerous revisions and now features Angular signals!

And it's entirely free! Fundamentals is out but you can sign up for early access to the second chapter, Ecosystem.

framework.guide

Announcing Playful Programming's Non-Profit Status Playful Programming is becoming a formal non-profit! Let's talk about the who, the what, and the why behind the decision.

First of all, we kicked off the year announcing our non-profit status! Here's our article on it, detailing what's been happening and what our plans are.

playfulprogramming.com/posts/playfu...