Posts Categorised: Web Stuff

Development Workflow Changes – Brackets, WPPusher, Gulp

In November I attended Front End North, a conference about web development at MMU. While the whole day was generally interesting and insightful, the thing that has stuck with me most from all the talks was this:

Improve your workflow with every new project. Don’t try everything at once, just push yourself to learn something new, or improve on what you did before each time.

So when I went back to work, I kept that in mind, and luckily I got some new projects up and running, which meant a lot of new changes. In fact my development workflow has changed so considerably in the past 3 months that I thought now was a decent time to go over those changes.

Gulp

I’d been using Gulp before FEN, but it seems worth mentioning here. I tried Grunt, but couldn’t quite get along with it. Then I tried Gulp and it just seemed to fit with me, the same thing happened when I tried learning LESS, which didn’t sit right, but I found SASS just worked.

Anyway, once I got automating things, I couldn’t stop. I haven’t quite got a Gulpfile into all my old but ongoing projects yet, but as I revisit them my first action is usually to jump into the Command Line and run “npm install gulp –save-dev”.

WPPusher/Git

Because I’m terrible, I hadn’t really been that big on Git in the past. I didn’t get on with the Windows GitHub app, couldn’t find my way in BitBucket at all and while I was happy dipping my toes in the Command Line, I found using Git with it was a bit of chore.

This had to change though when I found WPPusher and my life was changed forever. Before WPPusher, I was quite guilty of cowboy coding over FTP. Very bad. But now everything is version controlled and sites get updated with Commit → Push → Update via WPPusher. This will hopefully be simplified even more when I convince work that I need the Pro version and can Push to Deploy.

WPPusher makes me feel like a better web developer. I can’t imagine working without it.

Brackets

For a long time, I used Notepad++ for my text editing. It was basic, but it did everything I needed it to do. I had tried some other programs but they didn’t fit. Then there was Brackets, and again everything changed. Transferring from Notepad++ was seamless, but at the same time a massive improvement.

I’m running quite light on extensions, just Brackets-Git to integrate with WPPusher, Brackets-Gulp for obvious reasons, although it can be a bit janky at times and doesn’t play well with other extensions and the Document Toolbar to switch between files more easily. I’ve also got some minor presentation extensions, and linting.

The new setup is not perfect, but it’s definitely the best I’ve worked since starting doing this full time. Revisiting old projects is now exciting, because I know the things that were a chore before are going to automated into oblivion now.

Made a creepy 8-bit Pikachu

8-bit Pikachu

As the title suggests, I made a creepy 8-bit Pikachu on make8bitart.

That website is well good. And I’m looking forward to that lovely SEO juice from “Creepy 8-bit Pikachu”.

Design By Google – Finding something that isn’t shit

As a web designer, I mainly spend my time looking for other people’s well implemented design ideas and then re-purposing them for my own sites.

The process for this is generally quite simple, first I hit up A List Apart and see what they’re saying about a certain topic (Search forms, knowledge hubs, widgets, etc). Even if the article there is a few years old, the quality of the writing and the theory behind the implementation is still strong. Then it’s on to Smashing Magazine, which usually has something either a bit more technical, or a nice listicle for ideas to steal.

If by this point, much like Bono, I still haven’t found what I’m looking for, it’s straight onto Google, where the searches become increasingly desperate, where X = Whatever needs ‘designing’, eg Search forms

  • Well designed X’s
  • Good X’s
  • Nice X’s
  • X’s that aren’t shit.

Spartan Browser / Cortana Desperation

According to Twitter and a few reliable news sources, Microsoft’s successor to IE in Windows 10 will be called Spartan, and will be fully integrated with the Cortana voice assistant. These are both references to the popular video game franchise Halo, which, I don’t think it’d be controversial to say, is one of the few things people still like about Gates and Co.

Now I’m just an idiot shouting into the void, but this just seems like such a transparent and desperate marketing ploy. It might well be my fault for not really liking/getting Halo in the first place. But even if I did, I don’t think I’d want the voice assistant in my phone to be a sexy blue woman or have my web browser named after a solider.

It just seems a little sad and narrow minded, after years of attempting to cater to everyone and making by far the worst internet browser, Microsoft suddenly shifts gears to target a market that may already be over?

The internet should go beyond branding, not be caught up in. Do I use Chrome because I like the name or the company behind it? No, I use it because it’s the most functional at doing what I want it to do, both professionally and personally.

All this said, “Spartan Browser” might just to be a codename so perhaps I’m over thinking it, and regardless of what its called I’ll give the new browser a decent run out. But it’s little marketing mis-steps like this that just seem to put Microsoft further and further behind on everything.

 

Old Doge Eyes is Back – A post about Widgets

In the post about the new site design I mentioned that I wasn’t entirely happy with how the new theme handled widgets, IE not at all. I had a bit of time (to think it over…), and now I’m a little happier with how the site displays widgets and which widgets to display.

I knew that I wanted each widget to act as small post beneath the main posts, probably with three or four widgets in the space of the main post, four widgets left very little room for content though, so I settled on each widget being a third the width of a regular post. In the future, I’m looking at implementing some kind of Masonry tile design based on Post Formats for the main index page of the site, but that requires time and effort and actual skills, so it’s unlikely to ever happen.

One of the first issues I noticed was that even with the widgets being the same width, the elements were not the same height, which made everything look a bit shit and untidy. Google and jQuery to the rescue. Everyone’s favourite search engine found this code snippet for me, which I dropped into my main JS file, and then Gulped it into a minified, concatenated oblivion.

var bigbrother = -1;

$('.widget').each(function() {
  bigbrother = bigbrother > $('.widget').height() ? bigbrother : $('.widget').height();
});

$('.widget').each(function() {
  $('.widget').height(bigbrother);
});

This, quite unusually for the internet/Stack Overflow, worked first time, which I think speaks volumes about how good I am as a developer.

I also finally implemented the double lines on the widget titles that I said I was going to steal way back in my review of the Old Paper theme.

Once I’d got the widgets looking right, it was a case of getting the right content in each of the three boxes. For ages I’ve had newsletter signup form in the sidebar. However, in all the time this site has been live, only one person ever filled that in, and even then they never got round to accepting the double opt-in that MailChimp guilt trips you into doing. So I decided that was a waste of time. So much for professionalism, and conversions.

So I brought back the Doge, grabbing the tags from each post and displaying them in a way that was amusing in 2013. I still find it funny. I’m still sad about accidentally killing the Murray function on the site, but perhaps a GIF of a talking demonic skull has no place in web design in 2015.

Another leftover from 2013 is the Google+ authorship link, which every site had to have, otherwise you wouldn’t get your Gravatar G+ picture in the search results. Then Google realised that the pictures (and authorship) had no effect on click throughs. So they dumped it, without quite going the whole hog and dumping G+ in its entirety. Because I can’t think of anything better to put there at the minute, the social links are staying.

And then there’s Last.FM. My dream is that I’d have a Last.FM widget which showed the latest track(s) that I’d listened to, just in case anyone wanted to know exactly what the last thing I heard before leaving the house/going to bed was. It would also show the album art for that song, with a fallback just in case the artwork doesn’t exist. It should also fit the style of the rest of the site without me having to do too much CSS to trick it.

This doesn’t exist. So I’ve gone for the best of a bad bunch with Last.FM plugins while I try and get my head around the Last.FM API and write my own…

That’s about all I’ve got on Widgets. The next part of the theme development is handling archives and taxonomies in a way that isn’t shit. Which might be fun.