Thoughts on the Contrast Swap Technique for Improving Performance

In her post three days ago on CSS Tricks, Una Kravets described a clever technique she discovered for significantly reducing image sizes on the web with little loss of quality. Essentially the idea is this: 

  1. Reduce the contrast of the image in Photoshop
  2. Re-apply contrast using CSS filter()

With this process, Kravets managed to get between 23% to 28% reduction in image size, which can add up to a lot of KB if you have many images on the page. I think this technique is a great discovery and a boost for image-heavy sites that don’t need to worry much about good IE support… but. But, I can’t help but think it does smell a bit hacky.

This kind of contrast trickery shouldn’t be done in CSS, it should be in the image format. And to be clear, I don’t mean to criticize Una’s discovery. If it’s possible to reduce contrast and then re-apply it on the fly with little perceptible loss in quality, surely those instructions could be passed along in the image files themselves and not have to rely on a separate stylesheet which may or may not load? I guess we’d need a new image format for that…

John Gruber on Annoying Sharing Bars

Over on Daring Fireball, John Gruber has some true words to say about those pesky floating sharing bars (or “dickbars” like he calls them) used by Medium and others.

A website should not fight the browser. Let the browser provide the chrome, and simply provide the content. Web developers know this is right — these dickbars are being rammed down their throats by SEO experts. The SEO folks are the same dopes who came up with the genius strategy of requiring 5-10 megabytes of privacy-intrusive CPU-intensive JavaScript on every page load that slows down websites. Now they come to their teams and say, “Our pages are too slow — we gotta move to AMP so our pages load fast.”

Switched to a VPS, again

During the years, my blog hosting has gone back and forth between a self-configured VPS and shared hosting. Thanks to a special WordCamp Europe 2015 offer, for the past couple of years I’ve been on Siteground shared hosting, which has worked fine. I certainly have no complaints: the site has been fast, setup was easy with free SSL, but… a nerd’s gotta be nerdy. As the subscription for my shared hosting was about to expire, I looked around for options, and decided to go for a small VPS on DigitalOcean for $5/month (yes that’s a referral link). One reason I chose them was their comprehensive set of tutorials, but I was still suprised how quickly and painlessly I got my virtual server set up with Ubuntu, Nginx, SSL and WordPress, in just a couple of hours. Simply by following instructions, so I can’t claim to be very clever.

Let’s see how long this lasts.

CSS Grid Layout and Accessibility

CSS Grid is the future. However just like with many other layout techniques, it’s very easy to go crazy with it and cause an accessibility nightmare. There’s an excellent article on MDN on potential pitfalls:

If at any time in the design process you find yourself using grid to relocate the position of an element, consider whether you should return to your document and make a change to the logical order too. 

Full article: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility

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.