Full stack web developer, interested in all the things, but especially the web, code, design, Linux, OS X, PHP, WordPress, JavaScript & robots.

How You Can Use HTML5 Custom Data Attributes and Why image/svg+xml

In this article, I am going to show you how you can use HTML5 custom data attributes. I’m also going to present you with some use cases that you can find helpful in your work as a developer.

I can’t remember when I started using custom data attributes, it has to be five years ago at least, it’s certainly been long enough to wonder what I ever did without them. Anyhow, if you’ve yet to learn about custom data attributes, this article seems as good as any.

Full stack log: 20170324

First thing this morning, I edited a bunch of contributor posts in WordPress. Being an Editor is a role I seem to have picked up. TBH, I enjoy doing it — it’s good to not be coding all the time. Also, I know the WordPress editor pretty well and I know what to look for when editing posts, e.g. posts have been correctly categorised and tagged, featured images have been uploaded etc. Does being an Editor fit under the role of a full stack developer? Most definitely not, but I suspect it does for many, especially those working in small teams.

For the remainder of the day, I mostly worked on a WordPress theme that I have been developing to replace an ageing website. The deadline for the launch of the new website is the end of this month. I have 5 working days to complete the project. Today’s work involved creating some template files to show content for a custom post type. The post type is for case studies and it features a lot of custom fields and multiple featured images. Nothing ground breaking, but the template turned out well and the case studies look good.

Full stack log: 20170323

This morning, I spent some time fixing a flexbox layout that was exhibiting some rendering issues in Internet Explorer 11. Turns out that IE has a few flexbox bugs, no surprises there, grrr.

This afternoon, I mostly created a promotional video for Red Nose Day. Most of the footage for the video was shot on my iPhone 6s. I cut the video together using Final Cut Pro X. I’m not sure if video editing is considered to be a task that fits under the “Full Stack” mantle, but I enjoy playing around with Final Cut, so I was happy to be able to help. The video turned out good and hopefully it’ll encourage some people to donate.

Tonight, I created some new template files for a WordPress theme. The new theme files were needed to incorporate a new category of posts. This task only took minutes to complete, but thought it was worth mentioning.

Practical CSS Grid: Adding Grid to an Existing Design image/svg+xml

Understanding and using Grid is easier than you might expect. The day Grid support shipped in Firefox 52, I decided on the spur of the moment to convert the basic layout of my personal site to use Grid. And it was a fairly simple process—five minutes to write the grid styles, then 15-20 spent troubleshooting.

It’s good to read a practical guide where CSS Grid has been applied to a real-world site. I hope we get to read more of these in the future.

Ouibounce image/svg+xml

A small library enabling you to display a modal before a user leaves your website.

I used this javascript library today for a client. Personally, I don’t like these exit intent scripts, but I can see why others might think they hold some value. It’ll be interesting to track the conversion rates and find out if it actually works. I’m thinking not, in which case it’ll be easy enough to remove.

Stack Motion Hover Effects image/svg+xml

The concept stems from the hover effect seen on Merci-Michel which has a really nice feel to it because of its fluidity. The idea is to show a stack behind the hovered thumbnail that has the same main color as the image and then animate the elements in a swift motion. We are using the JavaScript library anime.js for the animations.

I really like these effects, I think they look proper classy.

No Share Buttons on Mobile Sites (Except This One Weird Case) image/svg+xml

Only 2 out of every 1000 mobile web users ever tap a custom share button. Don’t even bother including them in mobile sites except when users are coming from a social network.

I can’t think that I’ve ever clicked on a website’s social media share button, mobile or not, but I normally include them for my client’s sites as standard. To be honest, I’ll probably continue to do so as it’s something that client’s expect and I’ve got better things to do than debate their effectiveness. That said, it’s always good to have some statistics to refer back to.