Trying to learn coding with a dyslexic brain

As it’s the end of the working week, (Friday night in the land of England) I just wanted to offer you all a bit of encouragement and offer one main tip. Something I try to tell myself every day when I’m learning on Treehouse.

Treehouse is a lot of fun. I love how most if not all courses try to make learning what can be some quite demanding concepts, fun. The videos are informative and helpful and help you when you’re quizzes and code challenges.

But sometimes what you’re learning can be quite overwhelming and it can take me a little longer than the next student to process what I’m learning.

My focus at the moment is the “Build an Interactive Website” with England’s very own Andrew Chalkley. ūüôā It’s a very enjoyable course and I’m loving seeing what can be done with jQuery and how it can e applied to a “real life” project.

Stage 3 was really hard work. I had to think really hard on the code challenges, look back on the videos from time to time and when I was really stuck, I’m afraid to say, had a cheeky look on Google for the answer.

I sometimes think to myself, how on earth am I going to remember all this later on? My brain can’t take this in. I am after all a Dyslexic thinker.

But this is where the code challenges really work.

In contrast to stage 3, I was able to work out for myself the answer to another code challenge by just using the working memory I had and applying it bit by bit.

I put

var options = {navigationControl: false, animation: “slide”};
with no help or input and suddenly I felt like a coding ninja.

The thing I want to press home is this: Learning code doesn’t happen overnight. But it won’t happen either by getting worried about memorizing code snippets bit by bit because your brain very likely doesn’t work that way.

What you need is just to continue practicing the concepts Treehouse teaches you so you can break down the tasks in your mind and work it out as you go.

Practice. Read code/plugin documentation, research what you need to go to go forward and above all, don’t worry. If you practice and are dedicated, soon enough things will fall into place.


I started my last blog intending to talk about the process of making a custom video skin alongside the completely fantastic HTML5 video element. You can do the same thing with the audio element.
But there was a slight problem.¬† A video I had uploaded using¬† a version of one browser, Google’s Chrome, worked on that browser, but not another version on another machine.
I thought this was very odd but it occurred to me I’d only uploaded the video in one converted file type.¬† Mp4 is the most popular file type and most devices record videos in Mp4. But there’s also .ogg and,¬†webm video types. When one browser tries to stream a video that isn’t compatible it blocks that and tries to screen another.
It’s a balancing act.
If you play your cards right you should be able to create a video element with multiple source files so most if not all browsers can successfully play your video.
But it’s been a while since I’ve actually checked what file formats are compatible with which browser. I’m going to do this now.

At this time Monday around 2pm I’m using Chrome 38.0.2125.111 m to view the video I uploaded.¬† My other device, had Chrome the same version. So if one device doesn’t show video I’m not sure why it wouldn’t do that.

To summarise:

Mp4 is supported in Internet Explorer, Chrome, Safari, iOS and Android.  There is partial support in Firefox but NO support in Opera or Opera Mini.

Ogg/Theora is fully supported in Firefox, Chrome and Opera.  There is NO support in any of the other major browsers.
So with Ogg and Mp4 videos, that should cover you for support for all the major browsers except Opera Mini.
Opera Mini has no support for HTML5 Video
The WebM format has support for Firefox, Chrome and Opera. There is partial support for Android Browser but no support in IE, Safari or Opera Mini.

HTML Video snippet

So currently I don’t have any alternative video formats for the browser to look for.
I can add one with the source element. An entire HTML element for adding a video format in Video.
<source src=”olympic.ogg” type=”video/ogg”>¬† ¬† ¬†
¬†¬†¬†¬†¬†¬†¬†¬†¬† mp4″ type=”video/mp4″>
¬†¬†¬†¬†¬†¬†¬†¬†¬† <source src=”olympic.ogg” type=”video/ogg”> <!– –>
¬†¬†¬†¬†¬†¬†¬†¬†¬† webm” type=”video/webm”>
¬†¬†¬†¬†¬†¬†¬†¬†¬† Sorry, your video isn’t supported in this browser.
¬†¬†¬†¬†¬†¬†¬†¬†¬† <track label=”English” kind=”subtitles” srclang=”en” src=”caption.vtt” default>
It appears there are still certain quirks to work through with regards to the way browsers react to videos, their formats and codecs. Firefox in particular is still catching up to full support if the element.
It if we use the code above, we should be able to get a video include in browsers in most if not all cases.
But the video element is by no means perfect. ¬†It will, I’m sure get better in time but I still have a lot of sympathy for people who want to use a Flash fallback or even use Flash altogether. But it should be used only as a fallback, not the full solution. ¬†Here’s how to do it. 

<video width=”320″ height=”240″ poster=”poster.jpg” controls=”controls” preload=”none”>
¬†¬†¬† <!– MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 –>
¬†¬†¬† <source type=”video/mp4″ src=”myvideo.mp4″ />
¬†¬†¬† <!– WebM/VP8 for Firefox4, Opera, and Chrome –>
¬†¬†¬† <source type=”video/webm” src=”myvideo.webm” />
¬†¬†¬† <!– Ogg/Vorbis for older Firefox and Opera versions –>
¬†¬†¬† <source type=”video/ogg” src=”myvideo.ogv” />
¬†¬†¬† <!– Optional: Add subtitles for each language –>
¬†¬†¬† <track kind=”subtitles” src=”” srclang=”en” />
¬†¬†¬† <!– Optional: Add chapters –>
¬†¬†¬† <track kind=”chapters” src=”” srclang=”en” />
¬†¬†¬† <!– Flash fallback for non-HTML5 browsers without JavaScript –>

Just edit the file paths and names, and customisable attributes to fit your project.  Coming up next, walk through the process of customising the CSS to make a custom video skin to make even more out of the video and audio elements.

Designing and customising HTML5 video element skins for your website.

What’s HTML5 video all about then?

My focus today has been on the HTML5 VIDEO element, but not just that, but customising the appearance on this element so you not only get something visually different and suited to your needs, but a solution that is cross browser compatible.

One way of doing this is using a custom solution and a possible one is with the package from

These days, adding video to web pages is very simple.

<source src="olympic.mp4" type="video/mp4">
 <track label="English" kind="subtitles" srclang="en" src="caption.vtt" default>

A video element, a whole element to define the source and file path and a text track all in just a handful of lines of code. Cool!

You don’t need excessive browser plugins and there’s a nice simple HTML element for easier for adding Audio and Video. Before, I might have used Flash to add it to a page.

And doing it in a structured and packaged way can make it easier to create your own player skins.

This not only controls how the skin appears visually but which features of a player skin will actually be
used in your custom skin.

A skin as you might have guessed is the visual appearance of a player.

But how to customise it?

It needs a few different components.

First of all you probably should include a normalise CSS file,  if desired to make sure all browsers read the CSS the same way, overriding different browser default styles.

A font is then delivered by Google’s¬†CDN (Content Delivery Network)

<link rel="stylesheet" href="css/normalize.css">
 <link href=',300'rel='stylesheet' type='text/css'>

It’s essential to add jQuery to the file. We then add the default skin¬†for mediaelementsjs. This attaches
CSS styles to the controls to give the default style for the package.

This gives the ability to look at the individual styles and apply our own styles. With a little bit of study,
we can learn to create our own skins.

<script src="mejs/jquery.js"></script>
 <link rel="stylesheet" 
href="mejs/mediaelementplayer.min.css" />

Once we’ve done this, we can create styles not only for the page that contains the video but create styles specific to our own custom skin. This means we create styles, that override the mediaelementJS styles.

<script src="mejs/jquery.js"></script>
 <script src="mejs/mediaelement-and-player.min.js"></script> 
 <link rel="stylesheet" href="mejs/mediaelementplayer.min.css " />
 <link rel="stylesheet" href="css/main.css">

So the order of the styles and files is as follows

<link rel="stylesheet" href="css/normalize.css">
 <link href=',300' rel='stylesheet' type='text/css'>
<script src="mejs/jquery.js"></script>
 <script src="mejs/mediaelement-and-player.min.js"></script> 
 <link rel="stylesheet" href="mejs/mediaelementplayer.min.css
" />
 <link rel="stylesheet" href="css/main.css">
 <link rel="stylesheet" href="mejs/mejs-skins.css">

Making my own skin.

To prepare myself to make my own¬†video player skin, I first looked for every file I’d need and put them in a folder structure like this:


inside the mejs folder I have


Which are all the main files we need to change.

To make sure that I don’t affect the original files and documentation of mediaelementjs, I put all those files in a folder of its own and keep¬†it separate and copy the files I need putting them all in the mejs folder.

So now every file needed to style my own skin is in the one folder.

I won’t go through the step by step process of changing every style. That’s already been done by the guys at Treehouse but it’s a case overriding the styles through CSS specificity.

If for example I included the mejs-skins.css file before it’s duplicate for the default style, we’d see something different to what we intended.

I’ll save it for the next blog. I think it’ll be good to check¬†the latest in browser support for the HTML5 video element. I’ve already had a headache trying to work out why my video wouldn’t play in the browser when really it’s just the browser not supporting the element. There are ways around it. and I’ll explain all that, next.

Watch this space:)