10up’s NodeifyWP Marries WordPress and Node.js

Looks like 10up just released something I was waiting for but didn’t know it: NodeifyWP.

With NodeifyWP, we can serve a true isomorphic application from within PHP: we get the benefits of WordPress and the benefits of isomorphic Node.js technologies. No separate Node.js/Express server is necessary.

Sounds crazy. Can’t wait to try it out! Read more from Taylor Lovett’s blogpost.

Introducing Twenty Sixteen React and NodeifyWP

Jeremy Keith nails it again, on progressive web apps

There seems to be an inherent assumption that native is intrinsically “better” than the web, and that the only way that the web can “win” is to match native apps note for note. But that misses out on all the things that only the web can do—instant distribution, low-friction sharing, and the ability to link to any other resource on the web (and be linked to in turn). Turning our beautifully-networked nodes into standalone silos just because that’s the way that native apps have to work feels like the cure that kills the patient.

Full post: https://adactio.com/journal/11130

My Takeaways from WordCamp Europe 2016 (so far)

The fourth WordCamp Europe was organized this year in Vienna, Austria. It’s the biggest WordCamp in the world to date, with over 2200 attendees. Along with most of my colleagues, I’ve been to all of them. One of the biggest things that has kept me using and building with WordPress for over 11 years is the amazing community, which is welcoming and friendly to both beginners and experts, users and developers. 

There were many excellent talks, but these are some of the things/themes that stuck with me so far (the event is not over yet!):

Accessibility

Both John Blackbourne (lead developer) and Rian Rietveld (accessibility consultant) highlighted in their talks the fact that all new code included in WordPress core must conform to WCAG 2.0 level AA. This is a big thing. The EU recently passed a directive that all public sector sites should have at least level AA accessibility. In her “State of the Accessibility” talk however, Rian pointed out that there are still many improvements in core to be made, such as the Media library.

Code is Poetry – a musician’s tale (Helen Hou-Sandi)

Perhaps the most memorable talk of the event was Helen Hou-Sandi’s talk “A musician’s tale”. Helen is one of the five lead developers of WordPress, but she is also a classical pianist. At the beginning of her talk, she treated us to an amazing recital on a grand piano, something you do not usually see at a tech conference. Her talk after that focused on the similarities between reading and performing music and writing code to build websites or applications, and also touched on the still prevalent issue of narrow stereotypes of both what a musician and a developer are supposed to be or look like.

Dealing with your insecurities

Another talk that touched me deeply was Sonja Leix’s talk on managing “impostor syndrome”, i.e. that little nagging voice in your head that tells you you’re not good enough for this job, this project, this team etc. When Sonja asked who has felt like this sometimes, almost everyone in the room raised their hands. I certainly feel like I struggle with this every day at work, that I don’t know JavaScript well enough, or accessibility, or PHP, or whatever the topic of the day happens to be. Sonja’s three tips to help combat impostor syndrome were (paraphrased):

  1. Find a friendly community where you can help and get help from other people and share knowledge. For Sonja this was the WordPress community.
  2. Speaking at events helps build self-confidence.
  3. Start contributing to Open Source projects, e.g. WordPress. Be selfish when selecting an area to contribute to: what would you like to learn?

The trouble with communicating online

Siobhan McKeown gave an excellent talk on the pitfalls of communicating with pure text. Two points: 

  1. Face to face communication is important!
  2. Liking on Facebook is not a political act, because your opinions will just bounce around in an echo chamber of like-minded people.

Next year

WordCamp Europe 2017 will be in Paris, France!

Jeremy Keith on “Regressive Web Apps”

My favourite champion of the “One Web” Jeremy Keith wrote a really good post last week, triggered by the recent Google I/O conference and the (unfortunate, in my opinion) trend toward trying to make web apps behave like native apps and considering that “best practice”.

I recommend reading the whole article (and following his blog), but I love this quote:

I’ve seen people use a meta viewport declaration to disable pinch-zooming on their sites. As justification they point to the fact that you can’t pinch-zoom in most native apps, therefore this web-based app should also prohibit that action. The inability to pinch-zoom in native apps is a bug. By also removing that functionality from web products, people are reproducing unnecessary bugs.

Source: Adactio: Journal—Regressive Web Apps

Experimenting with the WP REST API

As a quick weekend project, I added some ajax-y goodness to my site with the help of the WP REST API plugin (set to be included soon in WordPress core) and History.pushState. There are some bugs, namely I still need to get the appropriate Jetpack gallery, related posts and share button features to load when accessed via javascript, if possible.

EDIT: I’m no longer experimenting with the REST API on this blog. Because I’m lazy, and it didn’t really bring any value to the site.

A European WordCamp

Last night I got home at 3:00 from the first ever multi-nation WordCamp, WordCamp Europe 2013 in Leiden, The Netherlands. The weekend was packed with many inspiring talks, but above all it was a unique chance to meet other developers and designers from around Europe and the world. Based on discussions I had during the past two days, advanced use cases of WordPress as an app platform are becoming more and more common. I also had the opportunity to talk to many WordPress “superstars” like Andrew Nacin, Nikolay Bachyisky and The Matt.

Putting together a conference of over 700 people can not be an easy task, but everything went pretty much without a hiccup (there were occasional wifi problems but that’s almost to be expected). A big thanks to the international team of organisers!

An Introduction for WordCamp Europe

Tea break on the balcony

Hello WordCamp Europe attendees! My name’s Daniel and I live in Tampere, Finland. After seeing similar posts by Rhys, Nuno and Jeremy, I thought I’d steal the idea and introduce myself to the WordCamp Europe croud in blog form. Hope you don’t mind. 🙂

So here goes: I’m the main translator for the Finnish version of WordPress and get paid by my employer H1 to work on interesting WordPress projects all day long. My first experiences with WordPress date back to 2005, professionally since 2008. I’m traveling to Leiden with all my beautiful colleagues (Aki, Jaana, Marco and Markus) so it’s going to be a grand weekend!

In addition to learning lots of new things from the conference sessions, I’m looking forward to meeting fellow WordPress professionals and discussing the following topics:

  • Using WordPress as an application platform
  • Scaling issues in deeply hierarchical and/or multilingual sites
  • Development/staging/production environments and workflows for teams

We’re arriving in Leiden on Friday evening. See you there folks! Meanwhile you may connect with me on Twitter.

Accessibility Tips for Front End Developers

I gave a short talk last Saturday on accessibility at Treweb, consisting of a few easy tips you can do to improve the accessibility of your web site or app, as a developer. This blog post is a summary of my main points.

Don’t prevent keyboard-only navigation

There are various reasons why some might be unable to use a mouse, but good keyboard support for web navigation also benefits power users. Unfortunately, some of the most popular CSS frameworks and resets include the following rule:


a:focus {
  outline: none
}

While this makes a lot of graphic designers happy, in practise it makes tabbing through links on a site practically impossible. Often the frameworks expect that you will redefine your own focus styles, but this rarely happens. The best option then is just to not disable them in the first place. A good second is to make hover and focus styles the same:


a:hover,
a:focus {
  background: #990099;
}

In forms, it can help to have a similar distinction for the active element, especially if the form is long. Placing form elements on top of each other (instead of side-by-side) will also make keeping track of the focused element easier.

Make pop-ups easy to close

The new tweet modal on twitter.com

Pop-up windows should be easy to get rid of, whether they’re “virtual” modal layers or actual windows (increasingly rare). It doesn’t matter if the pop-up was created via a user action or not, closing it should be simple both with a mouse and a keyboard. Make the click target big enough (see below) and support the ESC key:


$(document).keydown(function(e) {
  // ESC pressed
  if (e.keyCode == 27) {

    // ...insert code to hide popup here...

  }
}

Big click targets

In today’s touch-device-filled world you should be doing this anyway, but large click zones will also help anyone with difficulties using a mouse, such as people with Parkinson’s, the elderly, or you after a wild night out. For touch, a generally recommended size is 44 pt. Read this post by Luke Wroblewski on Touch Target Size.

Dropdowns

A long-time favourite annoyance of mine are large dropdown menus that just won’t stay open. Setting a delay (500-1000 ms) before a menu closes (after the mouse cursor leaves) will help all users. Also, test tabbing through your menus with a keyboard, can you tab through to the dropdowns?

Superfish and hoverIntent.js will help with both of the above issues. Superfish also supports touch.

Support custom stylesheets

According to the European Dyslexia Association, dyslexia affects about 8% of the population. Often dyslexics find that using a different font (such as Comic Sans) can help reading, so it’s a good idea to keep basic typographic styles fairly simple, thus making them easy to override with a custom style sheet.

Other good tips on catering to dyslexic users can be found in this blog post by UX Movement.

Use WAI-ARIA landmarks and roles

This is the definition of WAI-ARIA from the World Wide Web Consortium website.

WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.

In brief, ARIA includes a large set of attributes that add more semantics to HTML, and are especially useful in making complex dynamic UIs accessible to assistive devices, such as screen readers. However, the accessibility of any web page can be improved by ARIA landmarks, such as role="article", main, navigation, search and complementary. All popular screen readers support dividing the page into according to these roles, thus making skipping to a specific area of the page quicker. I won’t go into more detail here, instead I suggest reading this introduction to landmarks on the Opera website.

Screenshot of my blog, showing ARIA-marked areas
A view of my blog generated by the ARIA Landmark Inspector Booklet

The default theme for WordPress has included ARIA landmarks for at least the last 4 years.

Use enough contrast and support zooming text

For users with low vision and/or color blindness, a sufficient contrast between foreground and background is important. Total black-on-white is not necessarily the best option though, instead a slightly off-black (#222) on off-white (#eee or #ffe) might be better for a lot of users. For a long list of different contrast checking tools, go to 456 Berea Street.

Also check that your site supports zooming without breaking the page and hiding content. Using Ems and percentage units will help there.

Books

There are many books on accessibility, but I can recommend these:

Sublpress: Manage WordPress Sites in Your Text Editor

A screenshot of Sublpress

Sublpress is a new extension for Sublime Text by Nic Dienstbier that makes it possible to manage your WordPress site (or multiple sites) in the editor. Currently you can edit settings, create and edit posts and manage taxonomy terms. All features can be easily accessed via the Command Palette.

Creating a new post with Sublpress
Creating a new post with Sublpress

I tested Sublpress in both Sublime Text 2 and beta of Sublime Text 3, and my initial impressions are it seems to be a bit more stable (ironically) in the latter. This could be just something relating to my setup however.

Sublpress options
Sublpress options

I’m still not entirely sure whether I want to manage my WordPress sites in my text editor, but if it sounds like fun to you, go get Sublpress on GitHub. 🙂

Debugging SASS in Chrome

In Firefox, viewing the original SASS line number directly has been possible using Firebug and FireSass. Similar, or even better functionality has very recently arrived in the stable release of Chrome. I just tried this out and it works wonderfully. See here for instructions:

How to make Chrome understand the SASS/SCSS in your rails app

Don’t worry about the Rails stuff, these instructions work just as well for stand-alone SASS. If you’re using Compass like me, you need to set sass_options = {:debug_info => true} in the config.rb file of your project.

If you look at your css files after doing the above, you’ll see they are quite a mess. From a comment by Paul Irish in the above post I learnt better stuff is on its way thanks to the upcoming SASS 3.3, and Source Map support in Chrome:

Debugging SASS with Source Maps

Exciting times!