Archive for the ‘Development’ Category
I attended another excellent Bristol JS talk last night. Bristol JS seems to be going from strength to strength every year with great talks and speakers appearing regularly, a growing community and a huge waiting list for attendance at most talks. The venues used are also lovely and there is frequently free beer and pizza. What’s not to like 🙂
Last up was Colin Eberhardt doing his talk – Geeking out about React Native. Colin gave some fascinating insight into how React Native works from a technical perspective and why you might want to use it. He compared it to other similar native mobile development options and explained some of its good points and bad points. Ultimately he felt confident that it had become a strong technology which has some legs on it and will probably be around for a while.
The talks were all filmed so expect links to these on the Bristol JS site soon.
An interesting article on the (lack of) longevity of js frameworks can be found here.
My blog has been a bit neglected of late…. In the interest of turning this around I wanted to dust off an old entry that never saw the light of day. I wrote this piece in 2013 so things have definitely changed since then…. but a great deal of the content is relevant and useful, particularly to the e-learning scene. With this in mind, please read on 🙂
The Digital Landscape is ever-changing. Recently though, it has been changing faster than ever before. After a decade of Flash and desktop computers being the best tool and platform for delivering highly interactive e-learning content, we now live in a world where people are using tablets and phones more frequently than laptops or desktops. The once unstoppable, ever-present Flash player is in its sunset years having been mortally wounded by a certain blog article – http://www.apple.com/hotnews/thoughts-on-flash . Web-based Flash content won’t work on iPads, iPhones and other mobile devices and this is becoming a more frequent deal breaker.
The question we are facing is, “How best do we continue to make exciting e-learning that can be reached by all of our users?” It’s a fascinating question and one that I have spent considerable time thinking about. The answer is that there are many ways to do this… but they all come with their own set of pros and cons. The challenges and problems are multi-tiered, interdependent, and the direction you take will relate strongly to your own needs, parameters and requirements:
- Go Native – In some situations, building a native app is a great path, particularly in terms of performance and being able to use the devices’ built-in UI component libraries. But you’ll need to consider how to tackle deployment and security— do you have your own enterprise-level app store? Can you push your app to your users devices? How many platforms do you need to develop for?Can a cross-platform compiling solution like AIR(http://www.adobe.com/products/air.html) or Haxe(http://haxe.org/) meet your needs?How you will handle user-tracking when you are no longer in the domain of the LMS?And can your user base be covered with the platforms you are able to build the app for?
- Use an RDT – Alternatively a Rapid Development Tool like Storyline (http://www.articulate.com/products/storyline-overview.php), Captivate (http://www.adobe.com/uk/products/captivate.html), Lectora (http://lectora.com) or Zebra Zapps (https://zebrazapps.com/) can be a good option, particularly for smaller projects on a lower budget. These products are able to quickly get a course up and running. But you want to be sure you are going to be able to leverage enough customizable power and excitement out of the end product and be able to actually achieve the interactive or visual complexities you desire. It may also be that the features you need are going to only exist in the Flash version of the RDT output or that the HTML5 output isn’t performant enough or only actually plays in a native app wrapper.
- Flash – A Flash solution can still be a very effective option if you know your user base will be using desktops and not tablets, but this is a scenario that is happening less and less. In any case, you will get to use a powerful, stable platform perfect for generating highly-interactive web content.
Exploring the HTML Approach
HTML HTML HTML HTML HTML
Did you see how many times I wrote HTML just then? 5. HTML5. It’s big right now and it has been big for a while. It could be argued that there has been somewhat of a rose-tinted temporal distortion field around this word— but what does it actually mean? In essence, it’s a markup language designed to enable the presentation of multimedia content across the World Wide Web. It isn’t a final specification but currently a Candidate Recommendation of the W3C and its first public draft arrived in 2008. Some of the most exciting features include:
- Video playback
- The Canvas element
- Offline web-apps
- Web Storage
The Technical Shopping List
- Multi-platform compatibility
- LMS compatibility
- High performance content
- A seamless single-page application experience
- On-demand loading
- A structured, maintainable, modular codebase
The Nuts and Bolts
In order to achieve this I have brought together a number of technologies and libraries:
- HTML5 and CSS3 – See above
- Web Modules – Large-scale web apps can be big and take a long time to download. Require lets you load Modules on-demand at runtime. This is key for large web-apps because it allows you to only load what you need when you need it. The user no longer has to sit and wait for everything to have finished loading, instead they can load the module they want to look at and access it as soon as possible.
- Marionette.js (http://marionettejs.com/) – “Make your Backbone applications dance!” Marionette is a composite application library for Backbone.js. Essentially it is designed to add huge improvements to Backbone. Backbone is incredibly non-prescriptive. Marionette adds deliciously useful and valuable functionality to Backbone by extending the Backbone classes and adding a few of its own. It adds items such as:
- A dedicated Application object
- Module objects
- A Controller class
- Layout and Region objects
- ItemViews and CompositeViews
- The Vent object (which is a Global Event Aggregator)
- Memory management and event killing
It also drastically helps reduce boilerplate code―this can save you a great deal of development time.
- It is fast― up to 20 times faster than jQuery’s animation library and even quicker than CSS3 animations and transitions.
- Its browser compatibility is phenomenal. It will work well even with older browsers…even IE7.
- Animate anything…scale, rotate, skew, 3D transform and move DOM elements, JQuery selectors, Canvas library objects or even individual CSS properties. You can even animate objects or arrays.
- GSAP has it’s own Timeline engine which allows you to string together, append, merge or delay multiple animations into one Timeline object. This can then be paused, repeated, scrubbed or controlled in any way you like: very powerful indeed.
- Sass (http://sass-lang.com) – This stands for Syntactically awesome stylesheets. Sass takes CSS and gives it a massive kick up the backside. CSS is great but CSS compiled with Sass is AWESOME!
- Variables – Sass lets you use global variables in your CSS. No longer do you have to find and replace all instances of a color value. Instead, put it in a variable and if you need to change it, you only have to do it once.
- Selector Inheritance – Want to apply specific styling rules to only the children of a parent class? No problem! Just inline those rules into your particular class and Sass will sort out the rest.
- Mixins – Have a number of boilerplate style sections that you use everywhere? Set them up as a mixin and then just include your mixin wherever you want. Like the variable, this saves you a silly amount of time during the lifecycle of a project.
- Operations – Sass allows you to put logic into your CSS and even concatenate data types to form selectors.
- Compass – Sass can work hand–in-hand with the Compass framework to massively simplify your CSS3 style definitions. You no longer list out three or four separate lines of vendor-prefix CSS to achieve the same result cross-browser. Compass allows you to use single phrases for things like drop-shadows and rounded corners. It also lets you manipulate color values with ease by calling functions like darken or lighten and applying a percentage value.
And to sum up….
Ultimately the point of bringing about these technologies is to be able to generate exciting, powerful, dynamic and meaningful interactive experiences. The above approach tries to garner some of the best that is out there on the web and use it to generate products that work on as many platforms as possible. The high-end goal is to make interactive content as meaningful, valuable, far-reaching and memorable as possible. It’s also about doing so effectively and efficiently so that projects come in on budget and schedule.
This bug gets thrown sometimes in IE8 and under and it can be caused by many things. I just got caught out debugging an error whereby a variable stored in some json was called ‘class’. The dev who made it was storing the css class name for an object that would get appended dynamically into markup. The json looked like this:-
The issue is that “class” is a reserved keyword in IE. GIven this, the quickest and simplest fix for me was to just change the variable name to “className”.
I thought I would share this gotcha in the hope it saves the rest of the world some time. Here’s the deal……
In IE8 and below when using substr() to parse a string you cannot use -1 as the startIndex parameter: it will return NaN and error out. As an example, this will not work:-
var index = id.substr(-1, 1);
Instead you would need to do the following:-
var index = id.substr(id.length-1, 1);
Very small Yay!
I have recently been wrestling with Backbone.js to get it to correctly parse nested collections. There are numerous ways you can do this including using the plugin Backbone Relational. However, if you just want to do it yourself without the plugin then this is the approach that I found worked for me….
I have a collection of models. Some of these models might contain a nested collection of the same models. In my JSON this is set up as an array. The issue I was getting was that it was remaining as an array and not getting parsed into the collection of models I wanted it to be. This was a problem because I was navigating through the data recursively and I wanted to be able to treat each model as a Backbone model and not just a plain old object.
My model class is called ShellMenuModel and my collection class is called ShellMenuCollection. The model attribute where the nested collection would live is called subMods. Here is the model code:-
The key to solving this problem was using the initialize function to manually parse the collection. In this function we check to see if the subMods collection attribute exists, if it does exist then you instantiate a new collection and in the constructor pass in the subMods array. The collection then gets parsed into a collection and set up as the subMods attribute on the parent model.
At the start of this month I moved offices into the new Enterprise Zone of Temple Quarter, Bristol. I have been a Bristol-based freelance Interactive Developer since 2007. I have thoroughly enjoyed my time working across several of the main digital/co-working hubs in the city. My latest stint involved a couple of years at the wonderful business incubation centre of Spike Design (you can see me playing table-tennis if you flick through the pics – exciting, no? 😛 ), in the equally lovely art and design centre of Spike Island. My time here was the best I have had in a co-working space: a very talented, diverse and friendly bunch of thirty-odd freelancers and small companies under one massive roof, often working together in a bustling beautiful building surrounded by probably the nicest section of the gorgeous Bristol harbourside. The cafe isn’t bad either. If you’re looking for a desk and somewhere great to work in Bristol, you should go and check it out….. And so it was with some trepidation that I decided to move into a brand new development in the new Enterprise Zone of Bristol.
Temple Studios has been built in what was the old Post Office sorting office and bills itself as a creative and digital campus. It’s a fascinating building of brick walls, parquet flooring, with a rustic, industrial edge located right next to the entrance of Temple Meads Station. The space has been fitted out with interesting lighting solutions, comfy furniture, break out spaces, communal kitchens and a desire for the companies and tenants within it to nurture and benefit form each other’s existence in this shared space. A table tennis table may have just turned up too 🙂
My situation within the building came about due to my old friends and colleagues Hype and Slippers taking a space within Temple Studios. They are a successful and up-and-coming digital agency populating their working habitat with a mixture of their own team members and freelancers. Having shared a co-working space previously with them in another great building, the Tobacco Factory, I was really excited to join forces again. They are an incredibly talented studio: “Creating high-quality, beautiful, well considered work across identity, print and digital design disciplines, we hand pick in-house and freelance talent on a per project basis.” – check out their work on Behance.
Alongside me in the office are some other great peeps who, in the short time I have been there, I have very much enjoyed my time with, namely:-
- Studio Chirpy is the freelance identity of Bristol-based graphic designer Max Saunders, delivering quality work through identity, print and web.
- 83 Pixels is the small but perfectly formed web design and consultancy of Shane Griffiths.
- Mitch Bartlett is a multi-disciplined designer.
- Motion Imaging aka Paul Thomas, a freelance front end web developer.
- Rosa Park is our newest member. She is the editor of Cereal: a beautifully produced quarterly food and travel magazine.
Around the rest of the building are an eclectic bunch of creative, (mainly) digital companies ranging from product designers to photographers, high-end 3D production houses to digital agencies. A couple of note, due to me being friends with them, are:-
To conclude, I wanted to punctuate my new move to Temple Studios by documenting the kind of place it is and the sorts of people and companies you will find there. It’s an exciting time and the place has a really good buzz to it. It’s full of talented, creative and friendly people so if you get a chance to visit or want to join in, come and say hi. I have really high hopes for the area in general and it will be fascinating to be here and watch it as it develops. It’s one part of this fantastic city that has always felt like a bit of a let down, I don’t think this will be the case for much longer….
Common knowledge really but thought I would post this in case it helps anyone else…..
If you want to run a website fullscreen in Safari on an iPad:-
- Add this line into the <head> – <meta name=”apple-mobile-web-app-capable” content=”yes”/>
- From Safari, save the site onto the home screen as a web app
In my short time spent working with haXe, NME and Jeash I have used a few code IDEs. Initially, I upgraded my FDT to version 5 which is touted as having good haXe support…. not so. The haXe support in FDT5 is very poor at present. I am sure it will get better and come into line with what is usually an awesome product (and one I have used happily for years now).
The next IDE I tried was Sublime Text 2 (see image above). There is a Beta release you can try out for free. The haXe support is pretty good and there are lots of nice touches to the IDE. In particular I loved the scrolling panel on the right. I now miss this whenever I am using another IDE. It has some code completion and you can compile in the IDE itself if you want to.
However, in the last week or two I have settled on the new haXe plugin for IntelliJ IDEA (see image above). This was actually my Actionscript IDE of choice and so I have been excitedly waiting for the haXe plugin support to arrive. It is now on version 0.2.1 and the latest release features the following:-
- Type resolving improvements
- Documentation support
- New color settings
- Jump to declaration of local, std symbol or class
- Reference and Class completion