AngularZone Sept 2016 Meetup Review

I’ve got to be honest, when this meetup’s talks were announced I honestly didn’t know anything about GraphQL – in fact the only mention of it I’d seen (or taken notice of) was this one;

And with this in mind, and the fact the last AngularZone meet was so good, I was more than eager to make sure I went along… and of course it gave me a chance to sport my new MobileCaddy tee, too.

beta-tee

As well as these physical meets, Gerard has been putting on web based “JavaScript – Ask me Anything” sessions too, though I have yet to partake in those.

Now, I have some thoughts about the meetup and venue as a whole, but for now let’s jump straight into the talks.

Progressive Web Apps in the Real World – Dean Hume

PWAs are creating a lot of noise at the mo – and rightly so – and Dean “Deano” Hume was here to give us the latest lowdown on them, and talk about how their features can be used in the real world.

PWAs are built using an emerging set of web standards, and essentially offer web developers the tools to bring native-esq experiences to web sites and apps. Such capabilities include Push Notifications, Geo-location access and other hardware APIs including bluetooth and NFC.

Dean Hume presenting PWAs at AngularZone

Part of the awesome-sauce that powers PWAs are Service Workers. These are also being pumped highly in the web dev world, and they enable support for many cool enrichments to standard “web sites” as well “web apps” (and no, I don’t know what the difference really is, or even if it’s important). I’ve seen many talks on Service Workers and on the whole they’ve been very good, and normally have covered different uses, approaches, and features. But one thing they all include is a statement like “Nope, sorry, Safari doesn’t support them”.

Service Workers provide a dev with the ability to intercept network requests before they leave the browser, and this can be used to provide offline handling, low-data requests and probably plenty of other use cases that haven’t yet been thought of. Speaking of which, Dean covered a scenario using Promise.race in a Service Worker that provided an improved experience for when a third party library failed to load, and meant that the page was able to load much more quickly – very cool.

Dean showed us a few other PWA features, including;

  • Add to home-screen
  • Push Notifications
  • No-connectivity handling – being able to give the user at least some basic information offline.
  • Handling Chrome’s Data Saver.

Along with the great demos and info, Dean also supplied an incredible amount of links to online demos and resources… so check out his slides for all the details.

JavaScript Jeopardy – Tracy Lee

Now, I won’t claim to understand what happened next. But it was fun, so I’m just gonna leave this picture here and you can make of it what you will.

Angular Jeopardy - WTF

Following on from this, erm… experience… Tracy and Gerard went on to tell us about ngCruise. This is a new Angular conference with a difference. Yes, you’ve guessed it, it’ll take place on a cruiseship. The website should be launching this week but the plan is for the conference/cruise to commence by bobbing out of Florida in May 2017, and will comprise of a few days of talks, programming and fun. Tracy is hoping it’ll be a few hundred USD per day and should include talks, food and of course accommodation (with a difference). CFPs should open soon.

Angular Connect – Peter Bacon Darwin

Peter and Gerard gave us a nice little fireside-chat type thing, discussing the upcoming Angular Connect conference (27th/28th Sept). They mentioned how they were updating the format slightly, from last years conf, to try to emphasise some of the more interactive sessions. I can only imagine that the conference is going to be ace… as I’ve once again had to bail on getting a ticket.

Angular meets GraphQL – Uri Goldshtein

Closing us off was Uri Goldshtein, who had literally only just flown into London. Uri is part of the Apollo team and was hear to give is an introduction to GraphQL, and although his talk title mentioned Angular, it was mostly a generic intro. This was fine with me as I had virtually no idea about GraphQL, whatsoever.

Now I won’t try to come across as a GraphQL expert following the talk, in fact if anything I have more questions now than before… so as well as writing down what I think I grasped from the evening, I’ll also suggest that you take a look at the GraphQL website for yourself.

But anyhoo, GraphQL was born out of Facebook, late 2011, at around the time Mark Zuckerburg dissed web tech for mobile, and went all native on us. It is designed to be a “Query language over your existing data”. It can be used to provide a middleware and protect your clients from evolving backend APIs and updates. It’s also type-based, and should allow for absolute understanding between what a client asks for, and what it receives. Part of this middleware behaviour includes splitting single request out to multiple backends, and bundling the responses to each up into a single response for the calling client. This kind of architecture can mean drastically simplified client code… and that’s definitely a good thing in my book.

Uri demoed Instagraph, built by Kamil Kisiela, and showed us a very neat GraphQL editor/runner called Graphiql. During the demo Uri spoke about how the use of GraphQL allowed for “optimistic UIs”. This is an approach where UIs update as soon as an action, such as liking an Instagram photo, is invoked, and that actually these changes take place before any round-trip to the server/backend is made. This approach is one that we automatically use at MobileCaddy, though we tend to include this under the Offline First banner, but it’s nice to know this specific UI handling has it’s own name too.

Users of GraphQL, other than Facebook obviously, include Pinterest, Github and Shopify.

Despite Uri being a really passionate and captivating speaker, I’m not entirely sure I’ve “got” GraphQL yet – I don’t know whether it’s available simply through client side and server side libraries, or what transactional performance overhead, if any, comes into play. I would love the chance to see him and again and have a good chat about it all. With this in mind I think I’ll do some digging into whether or not I could sit GraphQL in front of Salesforce’s SOQL. So why not go out and start playing.

Wrap Up

In all this was another excellent meetup, and Gerard deserves high praise for organising such great talks and food (burritos) and drink. The inclusion of prize draws (FREE TICKET to ANGULAR CONNECT) is a really good touch. Thanks to go to eSynergySolutions for sponsorship and assistance.

Sadly, turn-out was relatively low. I counted less than 50 attendees, which is a shame as well over 100 had RSVP’d “Yes”. I found that there was little chat among attendees, and I also noticed this at the previous meetup. Whether or not it’s due to the size of the venue, or the fact that folk were sitting in the hall before and between talks, rather than around the breakout area, I’m not sure. At other meetups I attend, these “before and after chats” are one of the really valuable and attractive things. Maybe next time the hall can be “closed” whilst talks are not on, and hopefully they’ll be a deliberate post-talks-chat arrangement too?

Regardless of the above I definitely recommend coming along to these AngularZone meets if you’re in and around London and have interest in anything JavaScript, not just Angular.

Until next time… oh and please be in touch if you want to sponsor me to attend ngCruise 😉

AngularZone July 2016 Meetup Review

I hadn’t been to any meetups in quite some time, but this inaugural meetup of the new AngularZone community had a lot of draw… Service Workers, D3, prizes, and more.

The meetup was organised by Gerard Sans, who has a history of speaking and organising meetups. It was held in the large hall of the Skills Matter CodeNode venue, which is a perfect venue for a meetup of a decent size.

As it was the first meetup for AngularZone, Gerard gave us a brief intro to what his view was for it. His idea is that physical meetups will take place once every two months, and have topics on web tech in general, and in particular Angular. He’d like to see talks, and a community, driven by passion. As well as the meetups and obvious greatness of tech talks he would like to see a community contribution program come into affect, where folk (including himself and Todd Motto – that guy gets around, right) can give advice as seasoned speakers and bloggers. It sounds not to far removed from his previous Angular Labs idea, though to be honest I didn’t get involved in that, so this is purely guesswork.

But anyhoo… on to the talks

Service Workers – Phil Nash

Up first was Phil Nash talking us through Service Workers. Now these are not overly new, but still very much in the early days of adoption. If you are new to Service Workers though, you can start by thinking of them an intelligent way to support offline behaviour for your web sites and apps. They’re the successor to the painful-to-understand-implement-manage app cache tech and have been greatly pushed with the current rise of the PWA (Progressive Web App).

We were, of course, shown the awesomeness that is the trailer for Service Worker, and I felt sorry for AppCache, so I put one together. I could apologise for the distracting gif, but I won’t, and I still pronounce it Gif, not Jif, deal with it.

AppCache, The Trailer
AppCache, The Trailer

At the time of wrting, Service Workers are available in the latest builds of Chrome, Firefox and Opera, and are known to be being actively worked on in Edge… and in the words of Phil, “who knows about Safari”.

We were shown some demos that Phil had been playing on thath utilised the Twillio API. His demos used various features exposed through Service Workers (offline, notifications, background sync, etc). Service Worker is a very powerful browser feature, and one I hope that will soon be adopted so I can use it in the hybrid apps we’re building at MobileCaddy.

‘Service Workers, turning “online by default” to “offline first”‘
– Phil Nash, 2016

One of the key features I see available in Service Workers over AppCache is the ability to programatically blat assets from the cache, and I can not wait to use it and say good ridance to AppCache.

Phil’s talk was really interesting and very well presented. His passion and knowledge were obvious. If you’re after his slides, they can be found here.

Using D3 with Angular2 – Ændrew Rininsland

Ændrew is a journalist/data wrangler at the FT and set off to take us through using (the bloomin’ black-magical D3.js) in Angular2 projects.

His talk started off with some comments on TypeScript and how having typed languages should catch silly bugs earlier on in a project’s lifecycle (though he also mentioned a blog post that argues that there isn’t any factual proof of this). Something that is hard to argue with about TypeScript though is the benefits of it’s self-documenting characteristic, which can only be a good thing.

“Angular devs are cooler than React devs… Just sayin'”
– Ændrew Rininsland, 2016

Before we got to any real D3, Ændrew also gave a few personal observations of ng2;

  • On a blank ng2 project – Never has he had so much code, over so many files, doing so very little
  • ng2 is really fast

Even being fairly new to ng2 myself, these points certainly ring true with me.

After much config hacking and setup, we  finally got around to seeing some D3 code, which by comparison was relatively short and straight-forward – in a “my mind can’t take in any more info” kind of way. I’m not sure if I’ll ever get over how magical D3.js is and how much sorcery their implementors use to bend it into shape, but the output of beautiful data visualisations always blows my mind.

Closing

Gerard had a few prizes to be won, which is a nice touch for a new meetup, so kudos to him. I even won a year’s JetBrains license… so even better.

Talking of free-stuff now’s a good time to thank Gerard for putting on a really interesting meet and to the sponsors (skills matter, eSynergySolutions, poncho8, JetBrains, Google Developers) for covering the venue, food, drinks and prizes.

Talks were recorded and should be up on the skills matter site in the near future.

The Easy Way to Add Widgets to WordPress Content

In my experience of building and maintaining WordPress web sites it is quite a common to want to put some related blocks of information into your main post’s or page’s content, inline. For example you might want to add a tag cloud or a list of related posts. This type of information is already available via WordPress widgets and of so you could add it to your sidebar (if you theme and template supported one). But what if you want to add the tag cloud into the middle of the post… like this;

Wow, pretty cool eh?

So this is possible today using my 5* rated Widgets on Pages plugin. With the plugin installed you can create a new Widgets on Pages sidebar, add your Tag Cloud widget to it, copy the generated shortcode and then paste that into your content. But now it’s even easier…

Introducing Turbo Widgets

I’ve recently created a new plugin for WordPress, called Turbo Widgets. And with this, WordPress widgets can be added to posts and pages using the nice WYSIWYG editor… click, click, click, BOOM!

Turbo Widgets Demo

There’s a free version of the plugin available on the WordPress.org plugin repository that has this nice GUI for adding widgets and there’s also a premium version that supports the ability edit the widgets too, again using the TinyMCE WYSIWYG editor.

And Turbo Sidebars?

As well as this, the premium version also supports Turbo Sidebars. These are custom content areas that can hold standard WordPress content (text, images, etc) as well as widgets added through the Turbo Widgets features. These content areas can then also be added to posts and pages via shortcodes (soon through the WYSIWYG too) . You can also use template tags to add these Turbo Widgets to your themes templates, say for example adding related posts to the bottom of each blog page.

The documentation page for Turbo Widgets contains further info on how to use these, but I also hope to blog through their usage too in the near future.

Solution: No popup for Skype Incoming Calls

I recently updated my Ubuntu setup, which involved upgrading to 14.04 and also moving my monitors/laptop screens around. An unwanted side affect of this was that when I was receiving an incoming Skype call I wouldn’t see the usual popup alerting me. This meant that although I could hear the ringing, I could not answer the call. The issue was that the popup was appearing off screen rather than it not appearing at all. A quick search led me to this post on the Skype forum that mentioned a solution through modifying the ~/.config/Skype/Skype.conf file. This file (or mine anyway) contained lines that look like this;

[IncomingCallPopup]
position=@Point(58 400)

By modifying the values I could easily adjust where the call notification would pop up. There’s also a handy Test Event button in the Skype Options tool which means you can simulate the incoming call to see where the popup appears.

skype

Salesforce Meetup – MavensMate

As my final days at EE come around, I’m starting to make some headway in getting to understand more about the architecture and nuances of frontend development and the associated frameworks. Hand in hand with this education also comes an implicit syllabus relating to the development workflow, and in particular the tooling that’s available. I wrote about a JS tooling workshop I attended in this post and this week I attended one of the Salesforce developer meetups and there we also covered tooling, specifically David Helmer talked about MavensMate and how that can be used in Salesforce development.

Like the previous events that I’ve attended the meetup was held at the Make Positive offices and once again they were great hosts and sponsors, supplying beer and pizza, just what the doctor ordered.

Mavensmate is a plugin for several IDEs, most commonly used with sublime but there are plans to also include support for atom.io too in the near future. Essentially it gives developers an open source, apex IDE.

Primarily built and supported by Joe Ferraro it’s a cross platform tool that gives Salesforce developers a tool to match those available to developers who are using other languages such as PHP and JavaScript.

David kicked off his talk by announcing that it’ll take the form of a live demo…. there was the inevitable feeling in the room that we could be in for some good-ol squirming. What followed though was anything but, thanks it seems to the wonderful features of, not only Sublime Text, but also Mavensmate itself.

Demonstrations of many features were presented. Key ones (read those that I made a note of and can remember) were;

  • It’s open source… pull it and contribute
  • Editing and compilation of apex code (via force.com platform)
  • Resource bundle handling and uploading
  • Templating
  • Auto completion of functions and variables
  • Apex Testing – And whilst your tests are running there’s a whole host of games you can play (pacman etc), genius
  • Anonymous apex (exec) – runs ad-hoc code platform.
  • Project meta data can be pulled down viewed
  • Fetching debug logs

See the MavensMate documentation pages for more information.

I had tried previously to get MavensMate running in Sublime Text 3 on Ubuntu, but without luck… but I’ll certainly be trying again and will contact Joe if I’m still having issues.

Sadly I was unable to hang around and chat with the other Salesforcers, they’re a good bunch and it was a shame not to catch  up with them… hopefully next time.

Do-Less JS Tooling Workshop

On my journey to beefing up my Frontend development skills (primarily Javascript) I’ve also been trying to get up to speed with some of the tools that are commonly being used to improve workflows and encourage development best practices. To a relative newcomer I feel that it was all a little overwhelming… the number of package managers, development and testing frameworks and task-automation tools was (is) just quite amazing… and to be honest it left me fairly confused as which tool I should be using to do which job.

I was relieved then to see an Embracing Javascript Tooling workshop date pop up in my twitter stream… looking at the details for the event I was please by the topics covered, which included npm and bower, grunt and gulp, these were tools I’d been playing with but was still unsure as to which to use and when. The workshop was the very first one being run by Jack Franklin and Ollie Jennings under the Do-Less banner and I was pleased to give them support so thought I’d put my name down.

The one-day workshop took place in Bath at The Guild co-working space, a really beautiful building that suited our needs just fine. On arrival I was treated to a small but welcoming goody-bag which included a bottle of pop and some haribo, an ideal sugar-rush or two for whenever I need it. The workshop essentially ran through a couple of small projects and tasks, with the morning session covering them using Grunt and the afternoon re-doing them with Gulp, with both sessions making use of npm and bower. The workshop really expected at least some minimal knowledge of JS. And being comfortable with git and the command prompt was certainly useful since the pace was quite stiff, thankfully this suited me just fine. As well as this we also briefly covered Yo and Yeoman and there was ample time for questions as we went.

All-in-all I was very pleased with what I got from the workshop and wish both Jack and Ollie well with any future events they hold. And personally it certainly helped clear up a few queries I had, although I think that perhaps coming to the workshop without any experience of at least some of the tools might give attendees a very steep learning curve.

As a small take-away, it does seem that to a frontend developer, every possible issue is a nail that and be bashed with a Javascript hammer (and perhaps they’re right?).

Easy coloured tail output

As part of my job I’m often watching the output of a tail -f <filename> command run down my terminal window… and on my development and quite testing machines this is all well and good.

But what if the system is a pretty busy one? Well here it can be hard to spot the messages that might be of interest to you. And that is why I use a little trick to highlight a specific word in the output.

How to highlight words in tail output?

1) Basically add the following lines to your .bashrc  file

ctail(){
  tail -f $1 | perl -pe 's/'$2'/\e[1;31;43m$&\e[0m/g'
}

This adds a function available to you in bash that can be then be used to do exactly what you want. Say for example you want to highlight all instances of Error when tailing a file called foo.txt you can run the following.

ctail foo.txt Error

Rebar/Git Error and Solution

Just a quick one… for my benefit as well as perhaps yours.

I was trying to use rebar to pull in the dependencies on one of my Erlang projects but it kept failing with the following type of output;

fatal: could not read Username for 'https://github.com': No such device or address

I believe rebar doesn’t know how to ask for github credentials and I solved this by using the git credentials helper.

git config --global credential.helper 'cache --timeout=3600'

WordPress London – March Meetup

It had been quite a long time since I last attended a WordPress  London meet-up, so I was very excited about going along again and getting a good fix of WordPress geekery (as well as chatting to folk and drinking beer of course). The event was held at Shoreditch Works Village Hall for the first time and it provided ample space and the required tech. The venue and pizza was sponsored by the following kind orgs;

The Talks

Joel Hughes – The Business of WordPress

Joel gave a passionate and honest account of his move from permanent employee, through contractor and freelancer and onto running his own agency. He covered some of the key mistakes that folk (including him) make when starting out in alone, and some notes on avoiding them (the second time perhaps). They include;

  • Undervaluing Yourself : On a personal level right through to pricing
  • Clients from Hell : Educate the good ones, they’ve probably not bought a website before. Fire the bad ones.
  • Business is Personal : If you’re a freelancer, BE a freelance; don’t pretend to be an agency if you’re not. If you do you won’t be authentic, and this will show.

Joel also did some shameless pimping of his The Business of Web Design conference, which I have to say has a nice looking line-up of speakers. I’d probably be going if we weren’t due a baby the week before.

He also asked for freelancers of all sorts to get in touch with him. Looks like business is good.

David Coveney – Let’s Move It

I have seen one or two of Dave’s talks before at various WordPress (un)conferences and after seeing his take on Baz Luhrmann’s “Everybody’s Free To Wear Sunscreen” I wasn’t sure what to expect next. He didn’t disappoint by starting the talk with some kind of body convulsions which, I think in popular culture, could be described as dance moves.

He then proceeded to talk us through some basics behind running a WordPress migration with as few hiccups as possible. He discussed various migration types (server to server, multisite to singlesite, domain swapping) and their various pitfalls. He also talked through a few tools which can make life easier. These included MySQL Workbench and his company’s Search/Replace plugin.

In true Coveney style he then plumped for a live demo of a site migration (server to server and domain swap)… the audience, of course, new the perils of live demos and were all waiting for the inevitable.

Don’t work with computers – Dave Coveney

And of course the inevitable happened. So much so infact that Dave’s new database that he was using in the demo ended up being named fuckit. He rode out all that the live demo-gods could throw at him with it finally succeeding. His parting words of advice were “Don’t work with computers”.

Stiofan O’Conner and Tim Clark  – GeoDirectory

Stiofan and Tim talked to us about GeoTheme and the move to a new GeoDirectory plugin that will be appearing on WordPress.org very soon.

They briefed us on the history and the direction they think the plugin is headed. How they want it to become and extendible product with multiple revenue streams. The plugin looks like it’ll be very powerful and is well worth looking at if you’re interested in building up any kind of location-based directory.

Parting words

The standard post-meetup beers were had in a hipster-filled pub just around the corner, and I had some lovely chats with old friends and new from the WordPress community. I heard from a couple of the guys and gals that there was a lot of work out there for a WordPress freelance dev… this is certainly good news with my resignation notice period winding down.

I certainly can’t wait for the next one.

Adding a mobile number to Twitter

For a side project I’m currently working on (codenamed Shedwina, more details to follow later) I wanted to set up a Twitter NodeJS bot. On logging into https://dev.twitter.com as my bot account and trying to create a new app I got the error message that the account needed to have a mobile number associated with it. This in itself shouldn’t have been an issue but to set up a mobile number you need to send an SMS to a shortcode… sadly there was no option for EE in the UK and the long number option failed to work even after a few attempts.

I then come up with an idea… and it worked. Basically I installed the official Twitter client on my phone and checked the box which allowed the use of my phone number in the set-up phase. This has the desired affect and upon the next attempt at creating the app over at https://dev.twitter.com all worked like a dream.