🔥 Blazing fast builds
😇 CommonJS bundle
🌲 .mjs
bundle
✨ .d.ts
bundle + type-checking
🧐 Source maps
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// <DIR>/src/hooks/useLocoScroll.js | |
import gsap from "gsap"; | |
import ScrollTrigger from "gsap/ScrollTrigger"; | |
import { useEffect } from "react"; | |
import LocomotiveScroll from "locomotive-scroll"; | |
// REPLACE THIS WITH YOUR STYLES | |
import "@styles/locomotive-scroll.scss"; |
I've recently ran into a pitfall of [React.memo()
][memo] that seems generally overlooked; skimming over the top results in Google just finds it mentioned in passing in a [React issue][regit], but not in the [FAQ] or API [overview][react-api], and not in the articles that set out to explain React.memo()
(at least the ones I looked at). The issue is specifically that nesting children defeats memoization, unless the children are just plain text. To give a simplified code example:
const Memoized = React.memo(({ children }) => (<div>{children}</div>));
// Won't ever re-render
<Memoized>bar</Memoized>
// Will re-render every time; the memoization does nothing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Chapter 02. Your First Step with WebGL<br> | |
ch02/HelloCanvas: https://jsfiddle.net/8Observer8/2gky294r/<br> | |
ch02/HelloPoint1: https://jsfiddle.net/8Observer8/cc72u1u5/<br> | |
ch02/HelloPoint2: https://jsfiddle.net/8Observer8/uxw657ud/<br> | |
ch02/ClickedPoints: https://jsfiddle.net/8Observer8/xf4fnc0o/<br> | |
ch02/ColoredPoints: https://jsfiddle.net/8Observer8/gkkmnpga/<br> | |
Chapter 03. Drawing and Transforming Triangles<br> | |
ch03/MultiPoint: https://jsfiddle.net/8Observer8/cty1120m/<br> | |
ch03/HelloTriangle: https://jsfiddle.net/8Observer8/wk4sksnw/<br> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
WebGl courses + tutorials | |
--------------------------------------- | |
1. Great GLSL course | |
https://thebookofshaders.com/ | |
https://thebookofshaders.com/?lan=ru (russian language) | |
2. WebGl basics | |
https://webglfundamentals.org | |
https://webglfundamentals.org/webgl/lessons/ru (russian language) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
To use it, simply declare: | |
`const post = new PostFX(rendering);` | |
Then on update, instead of: | |
`rendering.render(scene, camera);` | |
replace with: | |
`post.render(scene, camera);` | |
*/ | |
import { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const spy = jest.fn(); // or `jasmine.createSpy()` | |
const testWidth = 420; | |
beforeAll(() => { | |
window.addEventListener('resize', spy); | |
}); | |
it('does not fire resize event by default', () => { | |
expect(spy).not.toHaveBeenCalled(); | |
expect(window.innerWidth).not.toBe(testWidth); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<article role="article" itemid="http://example.com/article-1" itemscope itemtype="http://schema.org/BlogPosting"> | |
<link itemprop="mainEntityOfPage" href="http://example.com/article-1" /> | |
<h2 itemprop="headline"> | |
<a itemprop="url" href="#" title="">Article title</a> | |
Coming this April, HBO NOW will be available exclusively in the U.S. on Apple TV and the App Store. | |
</h2> | |
<img itemprop="image" src="http://images.apple.com/live/2015-mar-event/images/573cb_xlarge_2x.jpg"> | |
<p> | |
Published by <cite itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Mystro Ken</span></cite> | |
<time itemprop="datePublished" datetime="2015-03-09T13:08:00-07:00">March 9, 2015 1:08PM</time> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
"use strict"; | |
// animation utils | |
// =============== | |
const trackTime = id => { | |
const [entry] = performance.getEntriesByName(id); | |
if (!entry) { | |
performance.mark(id); |
NewerOlder