Profile cover photo
Profile photo
Pelle Wessman
Communities and Collections
View all

Post has shared content

Post has shared content
Loving : discover the cost of large, non-responsive images & how much you could be saving
Add a comment...

Finding it rather funny, and a bit annoying, that +Google Developers are still pointing out tweaks about +Google Maps assets when you run +Page Speed on a site that uses Google Maps.

I did so again now and when Page Speed Insights tells me to optimize images and cache things better the only unoptimized, non-cached things they point me to are Google Maps assets.

It would be rather nice if Page Speed would separate things they know I can't fix from things I might be able to fix and Google Maps seems like a thing that Google can certainly be very aware of that I can't be "fixing" (and my guess is also that there is no "fixing" to be made but that the unoptimized images and the non-cached assets are that way for some specific reason – otherwise I'm sure it would have been fixed a long time ago).
Add a comment...

Post has shared content

Investigated why a sticky top menu appears to flicker on an iOS 7 iPad when one animates a scroll from one section on the page to another, but that the menu doesn't flicker at all no matter how frenetic you scroll the page manually.

After some discussions on Twitter it was narrowed down to be something about the repaints of the menu so I set out inspecting it with the Safari Web Inspector tied to the iOS simulator.

My finding was:

1. The position: fixed menu is promoted to its own layer in iOS Safari and only repainted on the end of a manual scroll.
2. An animated scroll is made up of many window.scrollTo() calls, one per each "animation frame", that each scroll the page a small amount proportionate to the length of its animation frame.

The conclusion of those findings are pretty obvious:

If the fixed position menu is repainted on the end of a scroll and an animated scroll is made up many frames per second of which every one is a small scroll, then an animated scroll will mean a lot of repaints and thus a danger of the menu starting to flicker.

So unless there is a way to make an animated scroll be interpreted as a single scroll, I don't see a way to avoid a possible flicker of a sticky top menu.

Thanks to +Emil Björklund for his pointers on Twitter, pointing me in the right direction.
Add a comment...

Post has attachment
Found myself having some troubles testing my new WebMentions code. How do I know that it will work with mentions from all around the web and all the different kind of combinations of Microformat markup there can be?

My solution – a test pinger:

By containing copies of real world mentions that are locally altered to target the site I'm testing and pinged to a local copy of my WebMentions code I can ensure that my parsing works well for a wide variety of mentions from around the web.

Currently there's only an example from my own site included in the public repository, but I've added more locally (See that neat little .gitignored .gitignore file? A good way to selectivly and secretly keep some content out of your repositories) Hopefully more people will allow me to add their sites to the tool as well so that it can become a more extensive test for your WebMention code.

I've thanks to this little tool now been able to easily test my WebMentions service,, against many of the major sites within the #indieweb community to ensure that all mentions following the patterns of their sites are presented nicely by it.
Add a comment...

Post has attachment
Launched my IndieWebCamp UK project yesterday, – a service for receiving and embedding WebMentions on a static site such as a Jekyll blog.

It's of course open source and the hosted version is free for everyone to use (although with an account limit initially).

So a static blog or a lack of plugin for a CMS is no longer an excuse to not be part of the IndieWeb movement – now it's as easy as two button clicks and two snippets of code. Join!
Add a comment...

Post has shared content
At a time when Netflix is switching away from using web technology in their apps it's very nice to see a new company step up and create their interface on top of a web engine.

PS4 + WebKit + WebGL = exciting stuff
Thanks for the great response everyone! Sony embracing web technologies such as #webgl  was what brought me to work here, and I'm really excited to talk about the details of our application. I think our team here has done an amazing job with the user experience.

I wanted to address some comments and clarify what is actually running WebGL with some development screen grabs. Each is highlighted accordingly. PS4 store is done completely in WebGL so I didn't attach anything related to that.

WebKit or Blink? We're a WebKit shop currently as people figured out from the PS4 license. The Blink/WebKit split happened after we were deep in development. My personal preference is Blink but that's not my decision to make.

UI framework is in house tech. I handled the layer below that it uses for its rendering which is all WebGL. Will be talking more about everything at that level during my talk at +SFHTML5.
4 Photos - View album
Add a comment...

Post has attachment
I've been doing some PHP-coding again lately and therefore getting myself up to speed with the latest developments happening in the PHP-community, like Composer, and also getting my development environment up to speed again.

Not being as cool as the coolest guys out there I haven't yet made the jump to Sublime (and not to Vim either for that matter) – still using TextMate 2 and loving it (having built up some nice bundles over the years

Latest find is how to use Composer and the latest in PHP coding standards, PSR-2, within TextMate to easily ensure that your code complies to the expected styles.

Here's the steps I followed:

1. Install Composer using Homebrew:
2. Run "composer self-update" to ensure latest version
3. Install PHP CodeSniffer using Composer:
4. Configure your PATH to include "~/.composer/vendor/bin/" and do the same with your TextMate path (Preferences > Variables)
5. Clone to your TextMate bundle directory (~/Library/Application Support/Avian/Bundles)
6. In the TextMate bundle directory (~/Library/Application Support/Avian/Bundles), symlink the bundle to the correct path (ln -s php-codesniffer-tmbundle/PHP\ CodeSniffer.tmbundle)
7. Configure a TextMate "PHPCS_STANDARD" variable to be "PSR2"
8. Done. Run the bundle command and get a full coding standards report for your current file!

This works for other coding standards as well. Found eg. this Drupal guide to be helpful in figuring it all out:

To find out which coding standards you have installed, run "phpcs -i" from the command line.
Add a comment...

Post has shared content
It's easy to get lost in the social web and chase targets that's not really the ones we want to reach. Good to then be reminded about the true point of being social on the web.
I've been wondering about a few things lately. And came to an annoying conclusion: we are obsessed with numbers and it is killing our creativity. Our online life right now is running the danger of being a constant chase of bigger numbers and more reach and there is actually not much substance to it.
Add a comment...
Wait while more posts are being loaded