Function Pink 2013-07-11 Meeting Notes
I’ll be live blogging the Function Pink meetup tonight. Les has got someone who is doing it through a Google+ Hangout.
There were a number of job announcements before the show. If you are a front-end developer in the RTP area, you have a number of choices for jobs.
Les announces Nick from CodeSchool over G+Hangout. He is talking about CSS Performance.
“Can we get parallax sccrolling?”
Nick is providing links to resources that Les will post later. I’ll put the link here when I get it. Got it.
Nick is from Orlando. Front-end developer has gained traction over the past few years.
We get a code for a special deal on CodeSchool tonight. Woot!
When you have multiple developers working on CSS, you need some way to control that development.
Large projects need some sort of modularity and style guides. They have four FE devs with an unwritten expectation of picking up at least one new thing when they are working on a large project.
Chris Zacharis from YouTube. Case study: redo YouTube page in 100k. He was surprised
We already deal with: Image optimizing, responsive content images, and combining requests.
Can do -> Should do. Optimize the code.
Measuring performance. He ran the inspector on Ruby Heroes. It showed all the selectors and he noted the way he looks at the different selectors and the performance and sizes of each.
It usually is not a concern. Using relative sizes. You shouldn’t have more than 3 or 4
GitHub CSS Performance video on Vimeo.
Painting: rasterizing the page for viewing. Ex. a cursor like on the Google home page in the field.
Continuous Repaint Demo. Using Canary. 32ms is okay. He is using Chrome tools to show the performance.
Repainting: Paint Rectangles Demo:
(currently expensive) Box shadow, border radius, filters, image resizing. These things change though.
Demo: SVG Sprites. Just because you can do it well in CSS, some browsers will render it differently.
Transitions & Animations: what effects do frame rates have on engagement. 30frames per second is about the limit.
to move something around you are causing the browser to repaint. Is there a better way using composite layers?
Triggering a new layer
Animate opacity or transform
composited childrend or overlaping
Check out the Chrome tools Settings. He is selecting things to work with the performance.
Jank: (?) word that Google has given for bad CSS performance. jankfree.org
He set up a recorder through the tools to show the process using the chrome tools.
In the example he showed how to observe an image resize as a culprit in lower performance.
(using janky as a word is sort of weird.)
Revisiting SVG Sprites.
Reflow (another source for concern.
Triggering Reflow: Inline styles, class swapping changing fonts, window resizing, DOM manipulation, more.
Keeping Track: hard on a large size. Chrome has a about:tracing
In Chrome: new tab then add about:tracing to record page events. Works in Canary, maybe not older Chromes.
(I’m not sure about this, but it looks really neat.)
New To-Do: right next to accessibility and cross-browsering.
SVG is solved in some browsers but not others.
This is neat for Chrome, but what about FireFox or IE? The others aren’t there yet, but they may catch up. Do it right in Chrome and hope that it is right for the others. Mobile is another thing to think about.
Oooo, a dig at ColdFusion from the crowd. I’m not sure what that has to do with front-end development, but I may not be able to ask what they mean. It probably has to do with it not being open-source after talking with some people. Adobe is an easy target. It is surprising that ColdFusion has a poor reputation though with the younger people. I doubt they have used it and are just parroting what others are saying. It is a lesson to all of us that dissing another person’s technology never looks good to a casual observer. We all need to learn that once in a while.