2013 San Francisco Wordcamp – Day 1

I signed up for the 2013 San Francisco Wordcamp (an annual conference on WordPresss) months ago and finally its day arrived. It arrived a bit early for me as I woke up at 3 AM, due to jet-lag. Nevertheless I am proud to say that I not just attended but also paid attention to seven sessions. For my notes and/or their summaries go here. Some personal notes first:

  • How can the organizers of the conference provide generous and delicious lunch and the quality conference at this low registration cost $40?  I chatted with one of the volunteers an his simple answer was that as WordPress is free and open source, so the conference strives to follow the same ethic. Whatever the way it sure provides a lot of bang for the buck.
  • I was impressed with the conference’s twitter, @WordCampSF, as they live-tweet all the URLs mentioned from both track. I tried to do some live-tweeting, @visionnest, but the computer was too slow for switching between twitter and the file where I was taking notes.
  • It was good to see a past and two current employees of PBHS, where I worked up to a month ago.
  • I didn’t understand the joke during the closing remarks which din’t deny or confirm whether Justin Timberlake or Jay-Z will attend our afterparty on Saturday. But the comment helped me understand why it took me half an hour to go 2 miles on the highway. People were going to their show at stadium and froze the highway.
  • After the last session I had dinner with an old friend from Santa Cruz at The Chapel. I had yummy sardine crostini.

1. Beyond the Default: Explorations and Experiments in BuddyPress

  • by Tammie Lister @karmatosed – logicalbinary.com
  • She is a designer/themer, who does communities, which in the WordPress world means BuddyPress (BP)
  • Old BP theming didn’t work
  • All BP sites had the same look
  • Kitchen-sink problem: every single component is on, as it came with BP. Now there is minimum components and developers have to make conscious decision which one to use.
  • BP 1.7 is big step ahead: it just works, behaves like a plugin.
  • BP 1.8, recent release is better for themeing; e.g. doesn’t hijack font size.
  • Bones of interface: know the basics, infrastucture of your site?
  • Why should all members directory look the same? They shouldn’t.
  • We need to dream and think of “ifs” and push BP.
  • Her experiments with BuddyPress design are at buddydesignlabs.com
  • Problem with display of threaded comments: you need to limit them or have less margins and padding as you go down.
  • Problem: user panel has useful features, but if you turn of the admin bar it is gone.
  • What if userpanel has arguments: e.g. left/right, attached to the admin bar or not, colors…)
  • BP 1.9 has template pack; see at wordpress.org and github
  • Not too late to get involved developing BP
  • QA:
    • BP group customization is possible
    • Designing with intention. BP theming with purpose
    • buddyboss.com awesome mobile theme
    • Developer’s perspective: BP should be a plugin and not a theme.
    • BP themes should exist for specific WP communities
    • BP: how to encourage members to come back; constant feedback
    • Future idea: better dashboard for moderators.
    • User engagement is important
  • My comment:
    • She was an engaging presenter.
    • She used some humor.
    • She was clear on what she could answer an what not.
    • Her slides were well designed , i.e. not boring. My favorite was one sheep, two sheeps, many sheeps: to show how all BP sites used to be the same

2. Confident Commits, Delightful Deploys

  • by Mark Jaquith markjaquith.com, one of the lead developers of WordPress
  • As he made his slides available I don’t need to share my detailed notes.
  • Here is his intro to the slides: “You’re a WordPress professional. It’s time that your WordPress coding and deployment practices moved beyond manual backups and editing files on the server. Mistakes happen. You need a workflow that is ordered towards minimizing and recovering from mistakes, rather than one that embarrasses you and makes changes stressful. This talk will examine the pitfalls of “winging it” when it comes to changing and deploying code, and will showcase multiple paths to the promised land of confident commits and delightful deploys.
  • Links to the tools mentioned in the talk:
  • My comments:
    • I understood what he was talking about, but was not familiar with most of the tools.
    • Convinced me to start using some sort of version control and finally signed up for github, during his talk.

 3. Writing Code as User Experience Design

  • by Nikolay Bachiyski (extrapolate.me & @nikolayb), who works for Automattic
  • Relationship between code and UX
  • People experience your code in many ways and use it for something they need
  • You don’t develop on a desert island
  • First commandment of UX: know your user
  • Real users of our code: sysdev and programmers: people who deploy, improve and extend our code
  • What do the users do with our product?
  • Study shows: we spend 5% of our time writing code, 20% modifying it and the rest of the time is spent with reading and understanding it.
  • Personas:
    • The coder persona
    • The design police persona
    • The new guy persona: they don’t know much about the code base: Help doc includes: Glossary, major design decision, code organization
    • The person who knows persona: cool people
  • Affordances: UX trick: feature of an object that helps us realize what it can be used for
  • A way to find affordances, better ways for users (developers) to experience of your code: user testing
  • Cool video of what users ( aka developers) did when were tasked to create a form using the API. You can see when they checked the api, when did copy paste, which part of the code they knew by heart…. we should watch people how they read code
  • QA: lots of user testing software exist – he used silverbackapp.com
  • My comments: the statistics of how we spend our time and the video was most interesting, beyond the focus on the user.

4. How To Jazz Up Your WordPress Site Without a Lick O’ Code

5. What I Wish I Had Known Before Developing a WordPress Theme

  • By Konstantin Kovshenin (kovshenin.com & @kovshenin), from Russia, works at Automattic
  • Themes developed include: Expound (wpmag.ru)
  • Slides at http://kovshenin.com/wcsf2013/ are with notes and links
  • Tips include:
    • Get organized,
    • Follow wp coding standard
    • Use subdirectories
    • Don’t use query_posts(); there is a plugin to stop it
    • Too many theme options; see Weaver with 300 options
    • Ok to say no; simple things are OK; they work out of the box
    • Decisions, not options:
    • Feature bloat and plugin territory
    • Find existing post type plugins e.g. portfolio
    • Monster Widget plugin: adding all core widgets to a sidebar for testing purposes.
    • Be a good parent (Theme)
    • Backward compatibility
    • Always listen to feedback
    • Be a good child theme
    • Provide feedback
    • Speed is everything
    • Optimize your images: smushit, optipngpngcrushjpegtran
    • Cache complex queries
    • Some things are faster without caching
    • Don’t use TimThumb
    • make.wordpress.org/themes
    • What makes a good theme:
      Great Design
      Ease of Use
      Simple Structure
      Flexibility
      Speed
      Reliability
      Security
  • QA: What tool/API did you use for autotweet? “I used my brother” 🙂
  • My comments:
    • As I didn’t develop my own them yet I shared notes from the talk that are (mostly) not code level and made more sense to me at this stage.
    • The QA answer brought the house down.

6. Sticks, Spit & Duct Tape: Advanced RWD Layout Techniques

  • by Josh Broton (joshbroton.com & @joshbroton) front-end developer for KidBlog.org
  • Slides at http://joshbroton.com/sessions/sticks-spit-ducttape-wordcamp-sanfrancisco/
  • Highlights:
  • “If I had a dollar for every time I got distracted, I would like some ice-cream”
  • He is using Webstorm for coding
  • Marquee tag‘s options are hilarious
  • His goal is to: “Make the word a better place for internet user”
  • Responsive design:
    • A flexible, grid-based layout
    • Flexible images and media
    • Media queries used to determine layout
  • 82% of us people use smartphones and tablets to access the internet
  • Making the web responsive : 5 options:
    • Floats
    • display: table-cell
    • text-align: justify
    • Flexbox
    • CSS3 Grid Template Layout
  • Another Responsive Image Strategy
    1. Create the image at 2.2x maximum width needed
    2. Save at 0% quality in Photoshop
    3. Use for all screen sizes
  • My comments:
    • He was the most dynamic presenter of the day. We were roling in laughter
    • Need to go back and play with the five options to fully grasp their pros and cons.
    • I also want to weed through the statistics that he omitted covering, but included in the slides.
    • I liked how the slides looked, so I chece and found they were made by slid.es.

7. Big in Japan: A Guide for Themes and Internationalization

Post Media Link

Gabor Por