Issue #6 - The Gotchas with default exports, future of web animations and a neat trick with arrow functions

Announcement

Hello to all of our precious subscribers! We have an exciting news to share with you all - Scriptified is now fully Open Source. Read more about it in our twitter thread below.

Issue

Learn how different variations of default export can result in different results, how you can improve your React app’s performance by modifying the way it mounts, improve your image’s resolution and a neat trick to add logs to your one liner arrow functions.

Tip of the day

Want to use console.log without breaking apart your one line arrow function? Use the || operator.

export default connect (
  ({planeteers}) => console.log(planeteers) || ({capPlanet: planeteers.captain})
)

Articles

export default thing is different to export { thing as default }

In this article Jake tries to explain how different named and default exports/imports can import/export by value or by reference depending on how they are being used.

by Jake Archibald

Improving slow mounts in React apps

You must have seen many articles about how you can make your React app faster by optimizing unnecessary re-renders but have you ever wondered about how you can optimize the initial render, i.e. the component mount.

by Aggelos Arvanitakis

Tools

Ojoy

Have low-resolution images? Enlarge them & improve their quality with Ojoy. All client side. Powered by ML using UpscalerJS & TensorFlow.js. Upscaling can be helpful for improving the resolution of stickers, avatars, logos - anything you don’t have access to the original high-resolution source of.

by Addy Osmani

z-context

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. This extension helps you debug these issues by informing you about why an element has a stacking context, what its parent stacking context is and the z-index value if any.

by Kerry Liu

Dev of the Week

Aman Mittal

Aman is a React Native & Expo enthusiast who has authored over 150 articles for more than 20+ publications and organizations across the internet, on mobile and web app development . He is also a Developer Advocate of Draftbit. Consider subscribing to his newsletter which is delivered to 1.2K+ developers, where he posts truly helpful content. He has also been an active open source contributor of organizations like freeCodeCamp, Node.js, and Gatsbyjs.

Twitter | GitHub | Instagram

Tech Talks

The Future of Web Animation

The Future of Web Animation - Sarah Drasner | JSHeroes 2019 - YouTube

We talk a lot about how to animate on the web, and what’s possible in browsers today, but where is animation heading? In this talk, we’ll start with some ble…

Quiz

What will be the output of the below snippet?

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(reject, 100, 'two');
});

Promise.race([promise1, promise2]).then(value => {
  console.log(value);
}).catch(err => { 
  console.log(err)
});

Promise.any([promise1, promise2]).then(value => {
  console.log(value);
}).catch(err => { 
  console.log(err)
});

This week in GIF

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