Issue #4 - Learn how z-index works, add rich animations to your design and simplify your global state with React Query

Understand how z-index works with stacking contexts, when you should choose Svelte over React, how React Query can help you manage asynchronous data and optimize your global state and check if you understand hoisting with this week’s quiz.

Tip of the day

If you want to test some DOM element from the browser console and you need document.querySelectorAll for it, you can use the handy $$ shorthand specifically available only on DevTools.

// In Dev tools
$$('a')

//... is equivalent to:
Array.from(document.querySelectorAll('a'))

Articles

What the heck, z-index??

Have you ever been in a situation where you applied a ridiculously high z-index to an element but it still doesn’t appear where you want it to be, well you’re not alone. In this article Josh explores stacking contexts and explains with examples how it affects the z-index of your elements.

by Josh W. Comeau

Comparing Svelte and React

Explore with Jack how he migrated his pomodone app from React to Svelte, and explains the similarities and differences between both libraries with real-world examples from his app.

by Jack Franklin

Tools

Jitter

Create rich animations for your design from your browser, with a UI as simple as creating a presentation in PowerPoint or Keynote

by SÉBASTIEN ROBASZKIEWICZ

SVG Repo

A huge repository of free SVG icons (over 300.000 icons), with a good search and filters.

by SVG Repo

Dev of the Week

Santosh Yadav

Santosh is a GDE for Angular, GitHub Star, and an Auth0 Ambassador, he loves contributing to Angular and NgRx. He works as a software consultant and writes for indepth.dev. He is also the author of the Ngx-Builders package and part of NestJsAddOns core Team. He is also running Tech Talks with Santosh talk show, where he invites the industry experts to discuss different technologies.

Website | GitHub | Twitter | YouTube

Tech Talks

React Query: It’s Time to Break up with your “Global State”!

An increasing amount of data in our React applications is coming from remote and asynchronous sources and, even worse, continues to masquerade as “global state”. In this talk, you’ll get the lowdown on why most of your “global state” isn’t really state at all and how React Query can help you fetch, cache and manage your asynchronous data with a fraction of the effort and code that you’re used to

Quiz

What will be the output of the below snippet?

helloScriptified();

function helloScriptified() {
  console.log(message);
  var message = 'Welcome to issue #4 of Scriptified';
}

This week in GIF

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