I was invited to talk at Tech Days Online at the Microsoft Reactor in London today on the topic of Microservices.
Rather than a presentation format the talk was as part of a conversation moderated by Christina Warren, Senior Cloud Dev Advocate for Microsoft.
Being live on Channel 9 — Microsofts online TV channel — was somewhat nerve racking but I think it went quite well and I enjoyed the format.
Thank you to everyone involved in the production, I had a lot of fun!
Last week any Microsoft Student Partners who wanted to continue to be in the programme for the 2015-2016 academic year had to reapply, as I will be graduating in September I of course was unable to do so, bringing around the end of my time as an MSP.
I’d like to take this time to thank Phil Cross, Paul Lo, Ben Nunney and all the others who made being as MSP both great fun and really rewarding. I’ve posted about some of the cool stuff we got up to before:
- Imagine Cup
- North European MSP Summit
- MSP UK Summit
- Appy Christmas
- Campus Party
- Developing App Builder Rewards
Whilst we got a lot of cool perks like endless free Windows Phone and Windows 8 devices, this paled in comparison to the opportunities of travel and honing our skills both in presenting and dealing with people and in programming and development.
If you’re thinking about becoming an MSP — go for it. You’ll be afforded a lot of opportunities the average student just doesn’t get, which both you and future employers will love.
One of the most important things for any modern business is its internet presence. If you’re not on the internet, or not active and visible on the internet, you might as well not exist to a large group of people. Search Engine Optimisation is the process of improving ones website so that it might appear higher up the Google Search rankings, where more people are likely to find it.
At the same time, one of the most interesting elements of modern software and services is its openness. Everyone from local councils to The Association of Train Operating Companies is currently in the process of opening up their data to the world and hoping someone innovative, or with a different set of skills and resources, can make something they either couldn’t imagine themselves or didn’t have the time and money to build — for mutual benefit.
One possible enhancements to SEO and Openness for an organisation is to make their website semantic. The definition of Semantics, according to The Oxford Dictionary, is:
The branch of linguistics and logic concerned with meaning. The two main areas are logical semantics, concerned with matters such as sense and reference and presupposition and implication, and lexical semantics, concerned with the analysis of word meanings and relations between them.
The main takeaway point is that things, in this case HTML markup for websites, have meaning. We need to make sure that the meanings we are making visible to the world actually mean what we want them to mean. A nice side-effect of this is that web pages become a lot easier to parse or screen-scrape and extract information from.
Prior to HTML5 the best way to give meaning to a tag was to use an id. So if you were to markup a simple website with a header and a list of news stories you might come up with something like this:
<div id="header"> <h1>News Website</h1> <img src="logo.png" alt="logo"/> </div> <div id="newslist"> <div class="story"> <h2>News Title</h2> <p>Here is some exciting news!</p> </div> <div class="story"> <h2>Another bit of news</h2> <p>A shame, as no news is good news!</p> </div> </div>
Whilst this is relatively clean code, it does come with some issues. How is a screen-reader or search engine spider meant to know the meaning of a “story” element for example? Whilst it seems simple viewing it as a human being, we must remember that there are literally thousands of possibilities for element id names that mean “story”.
HTML5 provides some new Semantic Tags which allow us to bake meaning into elements themselves. Check out the example below which simplifies and improves the previous code using the new HTML 5 semantic tags.
<header> <h1>News Website</h1> <img src="logo.png" alt="logo"/> </header> <main> <article> <h2>News Title</h2> <p>Here is some exciting news!</p> </article> <article> <h2>Another bit of news</h2> <p>A shame, as no news is good news!</p> </article> </main>
This implementation allows a browser, spider or screen reader to accurately understand what each element is for as the tag names used have been standardized by the W3C. In case you’re wondering the `<article>` tag is what is detected by browsers like IE and Safari to show a Reading View.
Wherever possible you should aim to use the semantic tags over generatic tags such as `<div>`. It makes code easier to read in addition to being more semantically correct. A full list of the HTML5 semantic tags and their meanings can be found on DiveIntoHTML5.
The Open Graph Protocol
Whilst I had been using HTML5 semantic elements for some time, I wanted to do more as part of the CS Blogs project both in terms of SEO and improving user experience through semantics.
I started with the Open Graph Protocol. The Open Graph protocol was developed by Facebook to allow websites to integrate better with Facebook, both in app and on the web, however other Social Media services also take advantage of open graph, including Pintrest, Twitter and even Google+.
The Open Graph protocol is implemented as a series of `<meta>` tags that you place in the head of your HTML pages. Each page can describe itself as identifying a Person, Movie, Song or other graph object using code such as that shown below for a Blogger on CS Blogs.com
<meta property="og:title" content="The Computer Science Blogs profile of Daniel Brown" /> <meta property="og:site_name" content="Computer Science Blogs"/> <meta property="og:type" content="profile"/> <meta property="og:locale" content="en_GB"/> <meta property="og:image" content="https://avatars.githubusercontent.com/u/342035" /> <meta property="profile:first_name" content="Daniel"/> <meta property="profile:last_name" content="Brown"/> <meta property="profile:username" content="dannybrown"/>
As you can see most open graph properties start with an `og:` suffix, except those particular to the type of content you are making available, which are suffixed with the type name. The documentation for what tags are available can be found on the Open Graph Website.
This code will then be used by Facebook when someone links to that particular web page in their messages, or on their newsfeed. Here’s an example:
Whilst open graph is great for this purpose it does have some limitations. Each page can only be of one type, and you cannot add semantics for more than one element. This limitation is a problem for pages such as csblogs.com/bloggers which represents multiple people.
Despite its limitations its still worth implementing open graphs on pages for which it makes sense, especially if those pages are likely to be shared on social media.
Facebook, as usual, have some great development tools for open graph including the Open Graph Debugger, which allows you to see how Facebook interprets your page (but because Open Graph is a standard it’ll also help you debug any issues with Pintrest, Twitter etc.)
Schema.org is a standard developed in a weird moment of collaboration between the 3 search engine giants — Google, Microsoft and Yahoo. It allows you to specify the meaning of certain elements of content. You can technically do this using 3 different types of syntax, however in this blog post I will focus on micro data, partly because its the easiest to understand, fits inline with your pages and is an official part of the HTML5 spec, but also because its the only format currently fully supported by the Google search engine.
To begin with here is the HTML 5 structure of a blog post before it has been marked up with schema.org micro data. It should be pretty simple to understand if you’ve checked out the HTML 5 semantic elements mentioned previously.
<article> <header> <h2><a href="dannybrown.net">A Blog Post</a></h2> </header> <img src="dannybrown.net/image.png" alt="Featured Image"/> <p>This is an exert... <a class="read-more" href="dannybrown.net">Read more →</a></p> <footer> <div class="article-info"> <a class="avatar" href="/bloggers/dannybrown"> <img class="avatar" src="dannybrown.net/danny.png" alt="Avatar"/> </a> <a class="article-author" href="/bloggers/dannybrown">Daniel Brown</a> <p class="article-date">1 day ago</p> </div> </footer> </article>
In order to markup our html with Schema.org we need to do a few things:
- Determine which Schema.org schema best suits the element we are describing.
- Determine the scope of that element
- Add the microdata attributes to our HTML
For our blog post example above the most relevant schema is BlogPosting. You can see all of the different types in a hierarchy at schema.org. The scope of the BlogPosting is the entire block contained within the `<article>` tags.
The scope of an item is delimited on the opening tag of our scope using the `itemscope` attribute. Read it as “Every bit of micro data within this element is about one item”. When we define the `itemscope` we also need to give it is type — this is done with the `itemtype` attribute. The value of the `itemtype` is the url of the schema.org schema — in our case `http://schema.org/BlogPosting`.
The values of fields that make up our schema, for example the “headline” of a blogpost are either other schemas or the values of elements. Here’s a fully schema’d up blog post:
<article itemscope itemtype="http://schema.org/BlogPosting"> <header> <h2 itemprop="headline"><a href="dannybrown.net">A semantic blog post</a></h2> </header> <img itemprop="image" src="dannybrown.net/image.png" alt="Featured Image"/> <p itemprop="articleBody">This is an exert... <a itemprop="url" class="read-more" href="dannybrown.net">Read more →</a></p> <footer> <div class="article-info"> <div itemscope itemprop="author" itemtype="https://schema.org/Person"> <a class="avatar" href="/bloggers/dannybrown"> <img class="avatar" itemprop="image" src="dannybrown.net/danny.png" alt="Avatar"/> </a> <a class="article-author" itemprop="sameAs" href="/bloggers/dannybrown"><span itemprop="givenName">Daniel</span> <span itemprop="familyName">Brown</span></a> </div> <p class="article-date" itemprop="datePublished">1 day ago</p> </div> </footer> </article>
Here we can see that just by assigning an `itemprop` attribute to a tag, the textual content it contains becomes the value of the named field. We can also see that a Person schema can be nested inside our BlogPosting schema to give us a rich author ‘object’.
One other thing worth noting here is that I elected to add `<span>` elements (which don’t change the visual layout of the HTML page) around the first and last names of the author so as to be able to correctly mark them up with `givenName` and `familyName` itemprops.
Google provides a debugger for Schema.org, which came in great use whilst I was added in support for CS Blogs, its called the Structured Data Testing Tool. The output for a the home page of csblogs.com is shown below:
As you can see using Schema.org means that the Google search engine can actually understand what is on the page, and therefore its semantic meaning. csblogs.com is therefore more likely to go up in search terms that include the word blog, or search for the names of the authors mentioned for example.
Hopefully this blog post will have made you think about what you can do to make your websites more semantic — and therefore better for search engines, accessibility and in terms of openness. You can use all three of the technologies above at the same time, and I would implore you to do so. In return you’ll benefit from better Search Engine rankings, your users will benefit from better Social Media integration and screen reading for those with disabilities, and search engines can point people to web pages with a better understanding of what that page represents rather than just scanning for keywords.
I’ve been very lucky this year because I’ve had a rather busy Summer Break. Rather than sitting around being bored I was fortunate enough to be in an Imagine Cup world finalist team, and then spend a month road-tripping around the United States with my friend Rob. The only downside has been that I’ve been unable to blog about it all! So I’ll try to catch up on it now.
This years Imagine Cup World Finals were held in the wonderful city of Seattle, Washington, just a few short miles from Microsofts headquaters in Redmond, Washington.
I arrived in Seattle and met with the rest of the UK team, with whom I had only ever spoken to online. Our team was called Vanguard and we developed a product called Ripple, a Windows Phone application which allows you to contact people close to you — simply put, a location-based social network. I had developed both the consumer-facing front-end application and the back-end web services.
Microsoft had clearly already shown an interest in the product by making it the winner of the UK heat and promoting it to the World Finals, our job for the first few days of our trip in seattle was to make a splash on the world stage by presenting a complete business-and-technological pitch as well as provide live hands-on demonstrations to both the judges and the public.
The first two days of being in Seattle were manic, sub-five-hour-sleeping days, packed full of pitch writing, code changes and endless pitch practices.
On the third day we presented our application to the world finals judges for the first time, and for any team — let alone one that had only met face-to-face 48 hours prior — I felt we did pretty well. The team laid out the problem cases that the application resolved, a monitization strategy, and some figures on the potential market size. I presented an outline of how our system worked, some of the unique features and algorithms, and a live demonstration.
Later on the third day we had a showcase at the Microsoft Redmond campus for people on-site to try out our applications and provide feedback. The first thing I must say is how beautiful Microsoft’s campus is — it’s really green, with lots of trees and plants, and very inviting. Its definately somewhere I could see myself in the future.
The Imagine Cup took place on the same week as Seafair, a festival of boat racing, air shows and fireworks in seattle. Here you can see the Blue Angels (the american equvilent of the Red Arrows) practicing over MS HQ.
A particularly proud moment at this showcase was when Reddit’s General Manager — and one of TIME’s top 100 most influencial people in 2012 — Erik Martin took a selfie using the application I had built.
Day four rolled around quickly, after a night of fixes and changes based on the feedback of people at the Microsoft showcase — which was the first time the application had been used extensively in public. Day four was all about showcases, but the first one was to the judges so we pulled out all the stops. The judges were really useful and gave a lot of feedback about the application, business ideas and development practices. Later in the day we were fortunate enough to be invited to meet Steven Guggenheimer, the man in charge of developer experience at Microsoft. The one thing that stands out to me from day 4 of the event was how surprised both the judges and Steven was at how much we had managed to accomplish in just under 2 weeks of development time, with only one developer. Many of the other applicants had been writing their applications for years.
Day four signalled the end of the competition matters for us, we just had a while to relax and wait for the results. In this time we kayaked (and fell into…) Lake Washington and had a few beers with both the locals and our fellow competitors. It really was great fun to meet people from all around the world who are as passionate about development and technology. We also had time to look round the Microsoft Employee store and catch the fireworks at Seafair.
I found these T-shirts way funnier than I should have done
The results of the competition were accounced at the Washington Convention Centre in front of several thousand microsoft staff. Myself and the UK team were the first people in so we got to sit in the front row with Satya Nadella (Microsoft CEO), Alexey Pajitnov (Inventor of Tetris), Erik Martin (GM, Reddit) and Hadi Partovi (Code.org, Co-founder) which was really cool.
Unfortunately we didn’t win, but I think everyone in the team can be proud of how much we did in such a short space of time, and with the limited resources at our disposal. I’m thinking of probably entering again next year with a team of my own, and I would encourage everyone else to do the same.
I’d like to thank Microsoft for the amazing oppertunity, both to be in the competition and to visit the beautiful city of Seattle — below you can see some pictures of the UK team exploring the city in the 2 days we had before our flight back to the UK 🙂
Last week I was lucky enough to be put in contact with Guilaume and the rest of the team at Ripple. Ripple is a start-up of three students who have recently won the UK leg of the Microsoft Imagine Cup with their idea for a location based messaging app which allows you to contact people you may not know within a certain distance of your location – great for something such as freshers week where you want to meet new people.
Though Ripple have won the UK leg of the competition with their idea they are yet to have actually built the product. The three people currently involved with ripple had a great idea, but lacked the programming skills required to bring it to fruition. In order to find a student able to help them develop the application they contacted the Microsoft Student Partner program. Through the MSP program I got in touch with Ripple.
After a few Skype video conferences and telephone calls the team welcomed me on board, which means that through an odd bit of luck I am now an Imagine Cup 2014 finalist.
The Imagine Cup is a global student-only competition run by Microsoft in 190 countries which seeks to get students involved in solving social, economic and environmental problems through the use of technology. Each year winners from each country go to the world final in a different city to compete against each other – this year’s final is being hosted in Microsoft’s own back-yard, Seattle.
Winners can walk away with up to $50,000 prize money and a once-in-a-lifetime opportunity to meet former Microsoft CEO Bill Gates and current CEO Satya Nadella, so wish us luck! Regardless of how well we do I can’t wait to visit Seattle and do some of the awesome activities Microsoft has lined up for us, including going up the famous space needle.
I will, of course, keep the blog updated throughout the course of development and the competition itself.
2013 was another year that simply flew past.
It’s strange to think that it was almost 3 years ago that I first made the journey from Dunstable to Hull and started my degree in Computer Science.
Last year was an important year, and this one will be even more so — here’s a roundup of what happened, and a plan for what is to come.
What happened in 2013:
- I passed my second year with an average grade of 85%
- I had my first experience of commercial development as part of a business over the summer
- I co-developed QuickSync — a platform for syndicating stock levels between different systems
- I chose and started developing my Final Year Project, an Integrated Development Environment for PHP
- I started considering alternative choices for my masters (and hopefully future PhD) and received some offers (more on that later in the year)
- I had a lot of fun with my awesome friends at uni, and some students who spent a semester here from America.
- I started arranging and saving for a month-long holiday to America with my housemate Rob (including meeting up with aforementioned Americans!)
- I did loads of cool events with Microsoft, including going to Campus Party
- I had blue hair for most of it!
What I expect (and hope!) will happen in the new year:
- More sensible hair
- Graduating from The University of Hull with a first class Bachelors of Science Degree in Computer Science
- The release of my final year project as an open source initiative
- Lots of preparation for my masters degree, including lots of maths revision and learning Java (it seems like every other university mainly teaches using Java as opposed to C#)
- Moving from The University of Hull to another university for my Masters Degree
- An awesome road-trip around Arizona, Nevada and California from Phoenix to San Francisco
I think that will take most of my time!
I hope you all had a great time in 2013 and wish you a fantastic 2014. Thanks to everyone who made 2013 such a special year for me, of whom there are too many to list — you know who you are. 🙂
As promised I ran the Micro-talks event at the University of Hull Department of Computer Science Christmas Bash (try saying that 10 times quickly) last week. We had a surprisingly high turn out and a lot of familiar faces got involved! In fact, the room had nearly twice as many people in by the time it filled out as are in the photo above — I counted around 45 in total.
I started us off by managing to throw together a few slides, and talk for a few minutes, about entering the world of open source for the first time. If you found yourself inspired by that you should check out my blog post on the same subject here.
Once I’d finished my bit and introduced the prizes, generously provided by Microsoft, fellow MSP Merrick Sapsford, took the floor to talk about why developing for charities can be a worthwhile endeavour. Merrick develops applications to support a charity which maintains and flies the last XH558 Vulcan Bomber.
Through this work he has managed to make connections with other aviation companies that are giving him paid work, has managed to get into a list of some of the top grossing apps on the iPhone Store and has even managed to get a few free iPhones in the process. You can check out his app here.
Lecturer Rob Miles had a presentation of his own, which included some cool lights which he could change the colour of using the Bluetooth connection from his Windows Phone. You can check out Robs round-up — and considerably better quality photos — on his blog.
Dr. David Grey — who you may remember from such introductory lectures as… — had the unenviable task of following Rob. Dr. Grey spoke about FoodCloud — a multi-platform augmented reality application the university is developing as part of its research into teaching people about how their food is grown and produced. The app seemed like a really cool idea and the implementation was obviously really smooth! It’s a shame we don’t hear more about research within the department (until recently I was under the impression the department did very little)
To finish things up Simon Grey, without the use of even the 4 slides he was allowed, invited everyone to sign up for Global Game Jam 2014. GGJ is a games development competition over 48 hours, like a double length Three Thing Game, which takes place all across the world, starting at 5pm in each time zone. This year Hull will be hosting the biggest individual event in the UK, in a collaboration between The University of Hull, Hull College and the Grimsby Institute. Simons put a lot of work in so if you’re interested you should sign up here.
Overall the event was a success, a lot of people heard and learnt about a lot of cool stuff. Hopefully people were inspired to do something new, and if not at least there was pizza afterwards… 😉 I hope anyone who nabbed a prize enjoyed what they got. The Microsoft-branded lip balm seemed to be a crowd pleaser at any rate. Hopefully we will take what we learnt from this event and try something similar again next semester!