Issue #13 - Making global states using stores, functional programming with JavaScript, and a handy CSS nowrap trick

Learn how to create global states without React Context similar to zustand, a handy CSS trick to avoid weird word breaks, collection of useful react hooks for speedy development, making your custom hooks readable, and functional programming in JavaScript

Tip of the day

Wrap important text a <span> with white-space: nowrap; to avoid awkward line breaks in responsive design. We use this in scriptified.dev tagline 😉

<!-- In HTML -->
<span class='no_wrap'>Iron Man</span>

/* In CSS */
.no_wrap {
  white-space: nowrap;
}

Articles

Stores: Making State Global Without React’s Context API

In this article, Max explores some drawbacks of context-based state in typical application architecture, then explore an alternative construct, Stores, which should ultimately help us write cleaner code and increase our in-app performance.

by Max Yinger

React Readability Analysis Of Implementing Custom Hooks

The advent of hooks in React 16.8, totally changed the way we implement logic in our React components and helped us provide a new mental model for encapsulating logic in our components. In this article, the Chak described how different kinds of abstraction with custom hooks affect the readability of our React code

by Chak Shun Yu

Tools

beautiful-react-hooks

A collection of beautiful and useful React hooks to speed-up your components and hooks development.

by Antonio Rù

Stitches

A CSS-in-JS library with near-zero runtime, SSR, multi-variant support, critical path CSS, an intuitive API, and lots more.

by Modulz

Tech Talks

Learning Functional Programming with JavaScript

Learn how you can use the functional programming paradigm with JavaScript, how it compares to other programming paradigms and what makes it special.

Quiz

What should be the output of the following snippet?

let currentDroidName = 'C3PO';

const newDroid = {
  name: 'R2D2',
  price: '1000 credits',
};

({ name: currentDroidName } = newDroid);

console.log(currentDroidName, newDroid.name);

This week in GIF

Liked this issue? Share on Twitter or read previous issues.