Issue #15 - Understanding the history and reasons behind CORS, exploring Framer Motion's FLIP technique and testing your knowledge of JavaScript generators
[Read issue on web](https://scriptified.dev/issues/15)
Learn how Framer Motion uses FLIP to animate layout changes, how to win at CORS, how to use React.memo to boost performance, and test your knowledge with a quiz on JavaScript generators.
Tip of the day
The :any-link selector represents an element that acts as the source anchor of a hyperlink, independent of whether it has been visited. In other words, it matches every or element that has an href attribute.
:-any-link {
color: hotpink;
}
Articles
A great read on how Framer Motion makes layout changes look seamless. Take a deep dive into FLIP, the technique used by Framer Motion to animate changes in layout without sacrificing performance.
CORS errors have always haunted us while developing. Read about the “how” and “why” of CORS in this detailed article by Jake. not just how CORS works but also the history and reasons behind it.
Tools
A curated collection of beautiful pre-made gradients using default colors from the Tailwind palette as well as a selection of custom color gradients. Simply copy the code snippets to use within your own apps.
by Jordi Hales
A library that lets you access thousands of icons as on demand components for all major frameworks.
by Anthony Fu
Tech Talks
You should use React.memo more!
By memoizing the render of your functional components, React.memo can improve the performance of your app. React is pretty fast by default, and in general, you don’t need to do performance optimizations. There are cases in which using React.memo won’t add much complexity or mental overhead for the developer. In this video, Casio explains those scenarios where React.memo could be of great help.
by Cassio Zen
Quiz
What’s the output (Generator function)?
function getData() {
return Promise.resolve('foo');
}
function *foo() {
const a = yield getData();
console.log(a);
}
const it = foo();
it.next();
it.next('bar');
This week in GIF
The art of frontend and backend
Liked this issue? Share on Twitter or read previous issues.