https://github.com/nichoth/notes-js
JS notes
https://github.com/nichoth/notes-js
Last synced: 5 months ago
JSON representation
JS notes
- Host: GitHub
- URL: https://github.com/nichoth/notes-js
- Owner: nichoth
- Created: 2015-07-07T20:07:10.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2016-02-01T22:20:09.000Z (over 10 years ago)
- Last Synced: 2025-10-27T21:34:55.437Z (9 months ago)
- Homepage:
- Size: 2.93 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# notes
## performance
[Paul Lewis, SmashingConf Oxford 2015](https://vimeo.com/125121010)
In depth about animation frames, optimizing JS.
[Paul Lewis, You should use [insert library/framework]](https://www.youtube.com/watch?v=_yCz1TA0EL4)
Manual DOM manipulation is fastest, followed by backbone.
[Event loop explanation](https://www.youtube.com/watch?v=8aGhZQkoFbQ)
Phillip Roberts of &yet.
## dom stuff
### removeEventListener
```js
elmt.addEventListener('click', function handler(ev) {
// do some stuff
this.removeEventListener(ev.type, handler);
});
```
### vertical scroll amount
```js
window.pageYOffset
```
[cross-browser](https://github.com/yields/scrolltop): `npm install scrolltop`
```js
var st = require('scrolltop');
console.log(st());
```
### scroll events with requestAnimationFrame
```js
var scrolltop = require('scrolltop');
var rafScroll = require('raf-scroll');
var offset = myElmt.offsetTop;
// parallax -- scroll at 1/3 normal speed
function update() {
var scr = scrolltop();
myElmt.style.top = (offset - (scr*0.3)) + 'px';
}
rafScroll.init();
rafScroll.add(update);
```
### accessible for clients without JS
index.html
```html
document.querySelector('html').className = '';
my content
```
style.css
```css
.hidden {
opactiy: 0;
}
.no-js .hidden {
opactiy: 1 !important;
}
```