Posted by lee jones on Oct 10, 2016 in WebDev
A little background If you’re a web developer (or indeed any developer nowadays) then you really should know HTTP as this is the de facto protocol for client/server communication on the web. HTTP is in essence the TCP/IP protocol for the web using ports 80 and 442 by default (for non-secure and secure communication respectively). HTTP dates back to the late 1980’s and early 1990’s so it’s a mature protocol which was designed long before the modern web app of today. Thus, many conceivable performance enhancements have been proposed over the years that saw things like headers (initially missing from the 0.9 HTTP specification), VERBS (HTTP initially consisted only of GET requests), content types and much more. However, these enhancements were working within the constraints of the original HTTP specification and the HTTP/1.1 was pushed to the maximum. It greatly needed a reboot. And in 2015 HTTP/2.0 was born. HTTP/2.0 is born Through a partnership between Google (and its now deprecated SPDY protocol) and a number of other leading bodies, the HTTP/2.0 specification was drafted which focused on a number of major shortcomings in the HTTP/1.x specification. Primary targets for optimisation included: Prioritise binary content over text Header compression Inherrant security Multiplexing Server-side push Whereas earlier versions of the protocol were purely text based, HTTP/2.0 is a binary protocol consisting of a HEADERS frame and a DATA frame (analogous but not the same as the headers and body in HTTP as you know it today). Frames are grouped into streams. Because of this, only a single TCP connection is required to transmit multiple resources, as various streams can be sent to the client and easily reconstructed using the stream id to decompose frames accurately. Server push With the multiplexing described above, clients can eagerly make several requests for resources knowing the server can send them on the same connection. However, servers utilising a HTTP/2.0 connection can be a little more pro-active and actually push content to the client knowing it will be needed. The server will notify the client that it is performing a server push using a special frame called a PUSH-PROMISE which informs the client that it is sending data that it hasn’t asked for, but thinks it will need. Therefore when the client later realises it needs this resource, it already has it and knows where to get it without contacting the server. Prioritisation With all this lovely asynchronous goodness and pro-activeness on a single stream, it is conceivable that the client could be waiting longer for a resource on a TCP connection as its being intermixed with other content. This has been though of though and clients can tag a request with a priority so that it can later send the server a PRIORTY request frame and switch priority levels of resources being returned, thus allowing it to get the most important content first. Without...
Read More »
Posted by lee jones on Jul 8, 2016 in JavaScript, WebDev
If you’re writing Node and want to use some of the newer ES6 features then you may have an issue running some of the newer features that haven’t made it into the V8 engine integrated with your specific version of Node. I came across this recently when using the new default parameters feature. Using the latest stable version of node (4.4 at the time of writing), the following code was throwing an error at runtime: function doSomething(param1, param2, callback=()=>{}) { //Do stuff } 123 function doSomething(param1, param2, callback=()=>{}) { //Do stuff} Essentially I wanted the callback parameter to be optional so that I could supply it if I wanted to and it would get invoked, but not throw any errors if not. Using default parameters meant I didn’t have to clutter up my code with lots of null checking and ugly if statements. This is a pattern I use quite a lot in ES6 and feel it leads to much cleaner code. Node was complaining of the unexpected token callback=() as it didn’t understand the assignment of the anonymous function to the callback parameter (i.e. the default value). After a bit of digging it became clear that there were two ways around this problem, both of which worked for me. Initially I sidestepped the issue by using the new harmony feature flags, which turns on the experimental features in unsupported versions of v8. Thus, in my case simply adding the default-parameters flag worked around this problem: node --harmony-default-parameters index.js 1 node --harmony-default-parameters index.js However, the harmony feature flags aren’t really recommended as its putting alpha level code into the fray. The longer term solution (and the route I took) was to upgrade node to the newest version. Again, at the time of writing this is 6.3.0 which has a much, much broader level of ES6 compatibility due to its newer build and newer version of V8. Problem solved. ES6 and...
Read More »
Posted by lee jones on May 4, 2016 in Asp.net, WebDev
I was recently tasked with obtaining the tag name(s) and title of a Specflow feature within its step definition file (C# code). It turns out this is quite simple to do and exposed naturally within the step definitions through the TechTalk.SpecFlow.ScenaroContext class. ScenarioContext.Current 1 ScenarioContext.Current exposes the current scenario context, from which a ScenarioInfo property is declared. Quite conveniently, this class definition contains a string array of tags and the title, all neatly wrapped up in a single, consice class: namespace TechTalk.SpecFlow { public class ScenarioInfo { public ScenarioInfo(string title, params string[] tags); public string[] Tags { get; } public string Title { get; } } } 12345678910 namespace TechTalk.SpecFlow{ public class ScenarioInfo { public ScenarioInfo(string title, params string[] tags); public string[] Tags { get; } public string Title { get; } }} Therefore, anywhere in your current stepdefinition you should be able to get the title and the tags using: var title = ScenarioContext.Current.ScenarioInfo.Title; var tags = ScenarioContext.Current.ScenarioInfo.Tags; 123 var title = ScenarioContext.Current.ScenarioInfo.Title; var tags = ScenarioContext.Current.ScenarioInfo.Tags; Easy as...
Read More »
Posted by lee jones on Jun 22, 2015 in JavaScript, WebDev
Shadow What? I’ve seen lots of queries on SO and various programming forums regarding the Shadow DOM. It seems lots of developers know that it exists, but many of those do not understand its purpose or significance. Moving forward, Shadow DOM is going to play a significant role in web development, not least as a core part of the web components specification. So What is it? At its highest level, the Shadow DOM is an emerging standard that allows you to encapsulate content (not just HTML) from the main document. This means you can ‘embed’ styles and markup completely decoupled from the rest of the web page and not have to worry about naming collisions, JavaScript conflicts or other quirks commonly found on large pages that use multiple frameworks from sources. So what is the problem? Imagine, if you will, a fancy all-singing, all-dancing video player. This reusable component if made available on the web for inclusion on your page (or even the native HTML5 video player supplied by the browser vendor). There are few scenarios where you would want other styles on the page to affect the core elements of the player (e.g. play/pause button) and you don’t want to have to worry about elements on your page conflicting with that of the video player. This is a very real worry but this is exactly the kind of problem the Shadow DOM is intended to solve. How does it work? At a simple level, with Shadow DOM any element can have a new node called the shadow root. This is the isolation boundary assigned to that individual element. The hosting element becomes the shadow host. This isolation provides great protection but also allows you to access the parent document via JavaScript so other parts of the page remain accessible (e.g. form controls) Can I start to use it? At the time of writing, we’re some way from full browser support. There are polyfills available (e.g. platform.js (https://www.polymer-project.org/0.5/docs/start/platform.html)) but as always, check the status on CanIUse.com for up-to-date...
Read More »
I'm a gadget loving code-junkie who loves to program, create websites and try out new stuff. Married, with two young daughters I am also a keen marathon runner and fitness enthusiast.