Inspiration number four. Sharing some of the things that have inspired me over the past few weeks including skeleton loaders and reaching for javaScript instead of jQuery.

Pocket casts app

I got a bit fed up of my phone telling me I have limited space left no matter how many photos or apps I delete. There are two good things to come out of it though. I’ve deleted Facebook which was a massive 390 MB - I don’t look at Facebook as much as a result! And I’ve found a podcasting app that allows me to stream podcasts rather than download and keeps a record of what I’ve listened to across multiple devices. It costs a few bob though, but if an app has more features (such as streaming to chromecast) no adds and a really well designed interface then I would rather pay. You have to pay to access their website too which is a one off fee - I am seriously tempted.

Pocket Casts
Pocket Casts iOS

Modern JavaScript cheat sheet

I am pretty confident at writing complex jQuery functions but I can’t help but check how they can be translated into ES6. Manuel Beaudru has put together a great cheatsheet for writing modern day JS just incase you’re tempted to write some jQuery.

The Slow Decay of a Designer

I’m a subscriber of Tobias Van Schneider’s weekly newsletter which are always a good read when I get a spare few minutes at work. A couple of weeks ago one of his emails landed in my inbox with the title ‘The Slow Decay of a Designer’ which went into detail about the path of a designer in a corporate environment and how sometimes the only path is the managerial one where your hard skills have to take a backseat if you want to progress in the company and financially. I guess the same applies to developers too. Be sure to read it if you can track the article down. If Tobias posts it to his blog I’ll add a link here. Update 8th May 18, Link to blog post.

But then, everything changes. A couple years later (sometimes less than 10 years) our path takes a sharp turn, even well before we reach our full potential. As we climb the corporate ladder, we start designing a little less everyday. We start doing less of the things that originally got us to fall in love with design and we start to become full-time managers.

Setting up VS code

Setting up VS code was a breeze, especially coming from Atom. There are tonnes of great extensions such as github sync and path intellisense which predicts what your file path might be when typing. I am still struggling to get Emmet working how I want it to though, but the positives are outweighing the negatives at the moment.

If you’re thinking about making the switch, I recommend listening to episode 12 of the Syntax podcast where Wes Bos and Scott Tolinski talk about switching to VS Code from their favourite editor and whether they’ve decided to stick with it. I also recommend their ‘favourite productivity hacks’ and ‘Command line for web developers’ episodes.

Hanging punctuation

No, not lack of punctuation when suffering with a hangover - we’ve all been there, but now you’re able to hang a quotation (“) outside of a paragraph using CSS. Unfortunately this feature is only available in safari at the time of writing so stick with your hacks for now.

CSS grid used to build a Monopoly board

CSS grid has just been fully supported in IE Edge so we can now start thinking about using it on production environments. I’ve currently got a couple of projects that I’m working on that use CSS grid for full layouts. Online documentation is very good and often I find goodies like this Monopoly board on Codepen.

See the Pen Monopoly board by John Coppola (@johnnycopes) on CodePen.

Designing better tables

Better tables
Credit: Andrew Coyle

A good article on how you could make your tabulated data look and function better. There are some examples I disagree with such as multiple modals but overall this article presents some good ways of displaying data.

Organic SVG Shape Morph Ideas

This is something I need to look into in the next few weeks. Making SVG patterns morph and react to user interactions. Here are a few examples of what can be done.

Building Skeleton Screens with CSS Custom Properties

See the Pen Card UI Skeleton Screen by Max Böck (@mxbck) on CodePen.

There are good reasons for letting people know content is about to appear in the form of a skeleton placeholders. Especially if their network is slow and users don’t like to hang around for more than a split second. It gives users the illusion of speed and it clearly works for the likes of Facebook and the BBC. Here’s an article on how you could use CSS properties to present a skeleton grid. I am yet to try it.

The art of better comments

Commenting is really important in code as it helps you understand why something was written and what its dependencies are. They can also provide information to other developers such as ‘this snippet is a bit of a mess and needs to be refactored’ if you’re hastily writing some code that’s quick and dirty or you could even write comments in the form of todo’s and use tools such as TODO highlighting or parsing. Although I’ve never used them.

Sarah Drasna gives some insights into why you should write better comments.

Better comments
Credit: CSS Tricks

Brian Cox - Human Universe

And finally… I’ve just finished reading Brian Cox’s Human universe and it has got me Googling all sorts of crazy scientific theories none more so than the theory of gravity. A well recommended read if you are into science.

Human Universe