]

WordCamp NYC 2014

August 21st, 2014

When most folks think of an ideal August weekend in NYC it usually involves going out to the Hamptons, boating on the Hudson River, hanging out at your 1%er friend’s rooftop pool, or maybe just hanging out in Central Park. Did I forget, hanging out in Brooklyn Marriott hotel conference rooms? How did that slip my mind? If you’re a WordPress developer or designer, then you were in luck, because WordCamp NYC 2014 took place at the Brooklyn Marriott August 2-3.

Not really sure why, but WordCamp NYC only takes place every two years which I find surprising. Considering there were 4 tracks running simultaneously, I have no doubt that the area could support a conference every year. Regardless, I’ve put together a collection of my notes from the conference. Hey, better late than never.

JavaScript Performance – Max Cutler

First up was Max Cutler from Microsoft speaking about JavaScript performance. The browser render path first takes your HTML, then starts to go through the DOM and CSSOM to establish the Render Tree which are the nodes required to render the page. Having a lot of JavaScript loading upfront can slow down the critical path so users will be stuck seeing a blank page waiting for content to load. With the explosion of mobile usage over the past few years and with our attention spans growing considerably shorter, initial page loading has become critical. The focus now is to get the “above-the-fold” (ugh, yup it’s back) content to load as soon as possible with less critical JavaScript and heavier “below-the-fold” content loading in after. One way to improve this process is to avoid “Layout Thrashing” which occurs when JavaScript violently writes, then reads, from the DOM , multiple times causing document reflows.

One of the best ways to analyze your site and see how it renders is to use the Chrome Developer Tools Timeline. This shows what is going during your page loads and can identify where there are hold-ups that can then be addressed.

WordPress Examples Toolkit – Richard Dinh

Richard’s presentation focused on creating a repository of WordPress examples on GitHub. Having these examples in place allows a developer to reuse code and not have to recreate the wheel each time they’re working on a new project. Here’s a list of examples from Richard’s repo:

Basics
  • JS Example
  • filter example
  • custom menu
  • custom meta boxes
  • short code example
More complex
  • batch example
  • books – custom post type
  • customize theme
  • plugin activation
  • CSV import
  • tiny mce add on
  • widget drop down demo
  • query vars
  • foscam

Large Multisite Networks – Sam Hotchkiss

Ever since I learned that it possible to run multiple sites off a single WordPress installation I’ve wanted to learn more about how to set it up and possibly use for future projects. Unfortunately, one of the first things that I learned in Sam’s presentation is that for the small-to-medium size projects that I work on, having a multi-site set-up would be overkill. Despite that, I found the presentation very interesting and came away with some great info that may be helpful down the road.

Advantages
  • easy to create new sites based on template
  • easy to update
  • only one management account
  • one db to share content
Disadvantages
  • plugin/theme restrictions
  • security
  • performance
  • SSL
  • can’t modify core for single site
Great uses
  • offering website as a part of “complete business package”
  • divisions or employees of a single company (mortgage brokers -> legal)
  • customized solution to a well defined vertical
Tips and Tricks 101
  • be mindful of performance and bloat
  • install BruteProtect
  • WPMU Dev has awesome tools – they’ve done 90% of the way there.
  • hire an awesome server admin – hard to find a good one
  • CloudFlare
Tips and Tricks 201
  • put as little functionality into your Themes as possible – plugins
  • use MU plugins strategically
  • use version control
  • use customizer – save to wp_options
  • make smart decisions for your users
Business Tips
  • not cheap
  • everything takes longer
  • if client is cost sensitive, frame your costs through the lens of per-site cost
  • don’t be afraid to suggest other suggestions

Getting Sassy with WordPress – Tracy Rotton

Ever since I first heard about Sass, I was excited about the capabilities including variables, mixins and @extend, but as is life sometimes, I couldn’t find time to start using it in real world projects. Luckily, this year I was given the opportunity to lead a site development project earlier this year and was able to implement Sass into our workflow. Like many people say, it does make CSS fun again.

  • how can you make it part of your life?
  • introduces programming into CSS
  • faster, easier, and more organized
Why Love It?
Variables
  • almost anything can be a variable
  • great for defining colors and font stacks
@extend & placeholder selectors
  • use extend for clearfix
  • can’t use in media queries
Concatination
  • Sass has partials
Functions
  • do one thing and refurn a result
  • calculate modify color
  • let CSS do the calculations
Mixins
  • Rems are a great responsive unit, need pixel fallback for IE8
Media Query Bubbling
  • media query goes right in the selector properties
  • nice and together
What sucks about Sass
  • code bloat
  • adds complexity
CLI
  • grunt.js
  • gulp.js
  • brunch.js
  • JavaScript task runners
  • requires node.js
  • sequence of steps you chain together
  • can use functions.php to target file that’s not style.css and use that for main CSS
More Sass Info

Advanced Custom Fields – Jared Novack

One of my first big breakthroughs in using WordPress was when I discovered how to use custom post types. This unlocked the ability to create so many different experiences with content and made WordPress significantly more powerful. I was vaguely familiar with the Advances Custom Fields plugins, but had always used Types as my custom post type creator.

Real-world ACF
  • Harvard Law Review – subhead, customize where it shows up.
  • no photos, but has different graphics
  • drag and drop, related topics field
Conditionals
  • checkbox on the side, custom field appears
Killer ACF5 feature
  • can store fields as JSON data.
  • acf-json
Random House
  • worlds largest book publisher
  • different sites with different content and fields
  • teaser and trailer, emails sign up
Make your own fields
  • custom field type with visual radio button
  • /acf-field-type-template on GitHub
More Links

Six Ways to Up Your Theme Game – Tracy Levesque

At the last WordCamp in 2012, I saw Tracy speak and learned a great deal about child themes and was able to incorporate the what I learned into several projects. When I saw that she was speaking again I made sure that I attended her presentation.

  1. Use a starter theme
    • they’re meant to be hacked
    • they give you a head start
    • they often come with your framework built in
    • have very little design built in

    Underscores – fan favorite

    Need to have a starter – will take work, but will get you where you want to start

    • quark
    • roots
    • wp-bootstrap
  2. Know the WordPress template hierarchy

    Make unique templates

    Category archives
    • tag
    • category
    • author
    • date

    – can make custom pages based on slug

  3. Register Nav Menus
    • put them where you want them
    • make life easier for clients
    • register the menu in functions.php
    • load menu in the front end template
  4. Register Sidebars
    • register in functions.php
    • load the sidebar into template
    • check out dynamic sidebar
  5. Register Custom Thumbnail Sizes

    Why register custom thumbnail sizes?

    • control the width, height and crop
    • use unique images in loops
    • add custom sizes to functions.php
    • x_crop_position and y
    • check codex add image size
    • load them in your template
    • does all the work for them, avoid Photoshop
  6. Write Your Own Queries
    • use fewer plugins
    • have control over field
    • gain total design freedom
    • wp_reset_postdata
  7. Pro Tip – Transients API
BONUS – use a CSS preprocessor
  • it’s fun
  • it’s powerful
  • it makes your life better
  • Use Version control like Git or subversion
  • Learn version control with Git
  • Tortoise control for windows

The next couple of talks I went to were on NONCE and advanced topics and I don’t think my notes really do the topics justice, so I’m just going to move on to Day 2.

Day 2

These Fragments I Have Shored Against My Ruins’: Modernism, Post-Modernism, and Responsive Web Design – John Eckman

OK, so looking at that talk name could make you go in one of two directions. I’ve heard the terms Modernism and Post-Modernism before, but I didn’t really know what they meant. So, even if some of the WordPress stuff was going over my head, at least I could take a stab at learn some art concepts. The presenter, John Eckman, has made quite a career shift from PhD and potential career-academic to web designer to CEO of 10up.com, a web design studio with multiple offices across the U.S. There were two main takeaways from the presentation

We keep trying to make the web into something it’s not.

Responsive Web Design is more than a set of techniques: it’s a push that forces us out of the collective hallucination of fixed web design.

These quotes, at least for me, really helped tie together the concepts of Modernism and Post-Modernism and made them more concrete. We, as humans, are always trying to control our environment and mold it into the things we know and have real experience with, but what is real? We’re still just figuring out what the web is and what it’s capable of and it’s those who can see the potential are those who will mold and shape the future, not to use it as a new tool for the same old paradigms.

Underscores, A 1000 Hour Head Start – Konstantin Obenland

So after the more abstract presentation, it was time to get back into WordPress goodness. During other presentations, several people had brought up Underscores and how it’s a great place to start to build themes. I had heard of it before the WordCamp, but knew almost nothing about it. After Konstantin’s presentation, I’ve been very motivated to learn more and start using it for my next projects.

Starter Themes
  • not a parent theme
  • not a framework
  • foundation for a new theme
Why underscores?
  • just right
  • experience from 5 default themes
  • experience from creating themes for millions of users on WordPress.com
  • maximum flexibility with minimal content.
  • lack of features
  • everything but styles
  • readable code
  • active community

Lynda.com even has a course on underscores.

Conclusions

I bounced around a few more presentations, but at that point and I already had a list of objectives and things I wanted to start preparing for and my brain was full and any attempts to add more information could only be distracting. I really like the idea of using Underscores as a starter theme, setting up a library of reusable code snippets, then building child themes on top of that custom Underscores theme.

Leave a Reply