Home > Meeting Notes > Function Pink 2013-07-11 Meeting Notes

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

3D/perspective transform

Animate opacity  or transform

CSS filters

composited childrend or overlaping

Intentionally Layering

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.

http:kippt.co/nickawalsh/css-performance

@nickawalsh

nick@codeschool.com

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.

Advertisements
Categories: Meeting Notes
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: