Philipp Spiess na Twitteru: "Whaaat the slides are made with Gutenberg as well 👏… "

Država	Kod	Samo za korisnike
Sjedinjene Američke Države	40404	(bilo koje)
Kanada	21212	(bilo koje)
Ujedinjeno Kraljevstvo	86444	Vodafone, Orange, 3, O2
Brazil	40404	Nextel, TIM
Haiti	40404	Digicel, Voila
Irska	51210	Vodafone, O2
Indija	53000	Bharti Airtel, Videocon, Reliance
Indonezija	89887	AXIS, 3, Telkomsel, Indosat, XL Axiata
Italija	4880804	Wind
3424486444	Vodafone
» Pogledajte SMS kratke šifre za druge zemlje

Philipp Spiess‏ @PhilippSpiess 23. svi 2019.

The pixel pipeline in the browser is often causing animations to be a lot slower than they can be. Different CSS properties cause in validations on different layers. You can use transform and opacity to avoid layout and skip some of the steps.pic.twitter.com/SMFolFwDQ9

1 reply 0 proslijeđenih tweetova 5 korisnika označava da im se sviđa

Prikaži ovu nit

Philipp Spiess‏ @PhilippSpiess 23. svi 2019.

Now @JoshWComeau shows an accordion he built where he avoids layout calculations to render fluidly on all devices. The second example is a like button with a particle effect like the one on https://twitter.com . Now he’s using http://jspaint.app to explain the math. pic.twitter.com/ogOdPKd6Nz

A painting showing how to use some to calculate some of the trigonometry.

1 reply 0 proslijeđenih tweetova 6 korisnika označava da im se sviđa

Prikaži ovu nit

Philipp Spiess‏ @PhilippSpiess 23. svi 2019.

Sprites can help make the animation even smoother. Sprites are pre-rendered images of every frame which avoid all the work since the image is already rendered!pic.twitter.com/FKJCun4oZ7

CSS animation steps to implement Sprites for a like button in 34 steps.

1 reply 0 proslijeđenih tweetova 5 korisnika označava da im se sviđa

Prikaži ovu nit

Philipp Spiess‏ @PhilippSpiess 23. svi 2019.

Philipp Spiess je proslijedio/a tweet korisnika/ce Josh

Slides are here:https://twitter.com/JoshWComeau/status/1131484918524108800?s=20 …

Philipp Spiess je dodan/na,

Josh @JoshWComeau

Code, slides, and more for my React Europe talk, "Saving the Web 16 Milliseconds at a Time", available on Github: https://github.com/joshwcomeau/talk-2019 … Thanks for watching y'all!

Prikaži ovu nit

1 reply 0 proslijeđenih tweetova 6 korisnika označava da im se sviđa

Prikaži ovu nit

Philipp Spiess‏ @PhilippSpiess 23. svi 2019.

Next up: @alecdotbiz on React Spring, a popular React animation library that explores physics based UI animation.pic.twitter.com/zeplkT6VdW

1 reply 1 proslijeđeni tweet 5 korisnika označava da im se sviđa

Prikaži ovu nit

Philipp Spiess‏ @PhilippSpiess 23. svi 2019.

In React Spring, you don’t need timing functions. Everything is based on spring physics. You can tweak the parameters to get different feels. Check out some of the presets (more in the recording):pic.twitter.com/uUOkOyUWJH

1 reply 1 proslijeđeni tweet 12 korisnika označava da im se sviđa

Prikaži ovu nit

Philipp Spiess‏ @PhilippSpiess 23. svi 2019.

Now on stage: @ellatrx on designing the rich content editor for @WordPress. The previous editor was entirely relying on contentEditable and used the DOM as the source of truth. One giant problem with this is that you always end up getting an element soup.pic.twitter.com/3p80m6mN3d

Previous editor used the Dom as the source of truth

1 reply 2 proslijeđena tweeta 19 korisnika označava da im se sviđa

Prikaži ovu nit

Philipp Spiess‏ @PhilippSpiess 23. svi 2019.

The new editor, Gutenberg, works differently. Everything (E.g. headlines, subtitles) are described as blocks. Blocks use HTML with special comments to describe the behavior. All of the HTML is parsed into an object tree.pic.twitter.com/PIc66OgwGp

1 reply 2 proslijeđena tweeta 7 korisnika označava da im se sviđa

Prikaži ovu nit

Philipp Spiess‏ @PhilippSpiess 23. svi 2019.

For backward compatibility, pages created using the old editor will be migrated into one special legacy block for the new system. Beautiful!

1 reply 0 proslijeđenih tweetova 6 korisnika označava da im se sviđa

Prikaži ovu nit

Philipp Spiess‏ @PhilippSpiess 23. svi 2019.

For rich text content block, Gutenberg ended up writing up their own <RichText> components in React using contentEditable under the hood but making it a controlled component. Key strokes and input events as well as the DOM content are used to map to the next state.pic.twitter.com/qnKF3mruEl