Mr Doob

-

Nice Site Design + Uber Nice PV3D Eye Candy!! Hooray!!!!

Comments

Post a Comment

Popular posts from this blog

Flickering 2D transform elements in Chrome: a simple fix

-
This quick post is to point out a fix to an issue I had to deal with a few weeks ago and was caused by a Chrome update. Components with absolute positioning and a 2D CSS transform started flickering when placed inside a scrollable component. A brief search online revealed several people with similar problems, but the suggested fixes were all very different. I tested several of them (including obvious changes to the z order) before finding the one that actually did the trick. What eventually worked for me was adding an empty 3D transform to the same elements with 2D transforms: transform:translate3d(0,0,0); I guess the reason why this works is that it forces elements to be drawn via a different rendering / compositing path than standard 2D elements.
Read more

Website Update: Atomz

-
A new section has been added to the website: 24Hour Games The 24H Games project is an experiment in gameplay design and developement. Its main objective is the creation of simple web-based games in   a single day . Each of the games presented here has been built by a single developer (that is, me ^-^) in just 24 hours. Each game is presented along with its   developement log , describing the various steps in the creation of the games, things that worked and things that didn't. The first published game is called Atomz . In this puzzle game the player links moving symbols (thr atomz) by matching shape or color, before they go out of the screen. Linked atomz switch their state, linking them in a smart way to create bigger molecules increases the score. Enter the 24Hour Games project page to play the game and read the developement log!
Read more

Organizing the React render method

-
Image
One common way to organize React render methods is to split the returned JSX into several smaller pieces, which are then assembled in the final JSX before returning. This makes the overall structure of the render function easier to understand. Note that the objective isn't to obtain JSX fragments we can reuse elsewhere, we just want our JSX to be split into bite-size, one-off sections that have a clear function in the component markup. Now, look at the two examples of a simple render method below. Which one would you use? Both approaches yield the same result and you would be tempted to use stateless components here, as the resulting all-JSX return statement looks better. But using stateless components defined inside your render method is a big no-no. Why? Because they will be re-rendered to the DOM from scratch every time the parent container renders. Keep in mind how reconciliation works. It will traverse your JSX tree, adding and removing nodes as needed. If a component in...
Read more