A commentary on learning web design and development for neuro-diverse people

This is a blog I posted on the Treehouse members forum regarding the difficulties of learning web design and¬†development if you suffer from a learning difficulty… like me.

Hi there everyone. I thought it was time to bring a discussion on something that’s close to my heart and that is learning on Treehouse for people who are neuro-diverse.

What I mean by that is people who have a specific learning difficulty such as Dyslexia, Dyspraxia or Dyscalcula and people on the Autism spectrum.

I myself have been very different in the way that I learn, present myself and think about things my whole life. I didn’t really know why this was; why I should be pointed out for being so different. That was until I was nearly finished secondary school and was diagnosed with Dyspraxia.

Dyspraxia is a specific learning difficulty that affects physical coordination, memory, speech, language perception and thought.

The Dyspraxia Foundation in the UK says that…

“Current research suggests that it is due to an immaturity of neurone development in the brain rather than to brain damage. People with Dyspraxia have no clinical neurological abnormality to explain their condition.”

Dyspraxia and the causes

So over the years this has had a profound effect on how I learn anything as well as my time on Treehouse.

I’ve taken many courses on Treehouse. I’ve loved them all and would consider my time on each of them to be very useful and worthwhile for me to take. But every so often I find myself looking back and reflecting on what I’ve actually taken in. I’m sure everybody does the same but I find myself feeling that I haven’t quite learned remembered what the course was trying to teach and I lack the confidence to go out and apply these things to real life projects.

It’s not me saying that I haven’t paid attention or taken in the information at all. The videos are absolutely fantastic. The code challenges and quizzes are excellently designed to ensure that deep down the information is locked in the brain; that’s what Treehouse does so well. But something happens sometimes when I take it to a real life project that blocks out the “new” information that I’ve been given. It can happen at any time, at any place in any situation, sometimes even the most trivial things.

So… I have thousands of Treehouse points for a wide range of subjects but sometimes I feel a little held back by my learning difficulty. This has in the past few days manifested in my forum posts, having to apologise for some advice direction that isn’t quite right because I haven’t factored A B or C.

The points reflect how much time and effort I’ve put into learning a particular subject but unfortunately not my current skill level.

I don’t want to sound negative here or put myself down. I’m just trying to explain thing from my own point of view. I want to foster a “can do” attitude to my Treehouse education.

Sometimes my disability gets me down. Sometimes I get overwhelmed and it gets too much. At such times it would be easy for me to take a step back or give up altogether. But when I get those thoughts I toss them aside as best as I can.

It’s my firm belief that one day something is going to “click” in my brain and I’m going to get it right. It’ll take hard work and dedication; the same as any Treehouse student but I believe I can do it.

In spite of everything that I said Treehouse has taught me a great deal and I’m confident this is the place to help me reach my goals.

I’m very interested to see how many other students out there would consider themselves Neuro-diverse and how they overcome their difficulties on a daily basis. Everyone is capable on Treehouse, even me with my Dyspraxia. ūüôā

Advertisements

Turning my attention towards Sass

I’ve been taking some time away from schooling myself in JavaScript programming to spend some time on CSS ¬†language Sass. Sass is a really exciting language in web design.

It’s a language¬†that lets you spread the boundaries beyond what normal CSS can achieve. “Vanilla CSS” as it’s known, the main language with no input from is wonderfully easy to pick up with practice. But it can be repetitive and it’s very easy to repeat certain styles and selectors especially in larger projects.

Sass (Syntactically Awesome Stylesheets as it’s called) really helps with this. It’s easy to create DRY code and pre-compile this into output “vanilla” CSS.

Concepts like Mixins, Directives, Variables and Functions turn what is a simple language into someting more like a standard programming language like PhP or JavaScript. This is something I never thought I’d see in CSS design but it is a great thing. Working with Sass really does reduce the repetitive nature of writing CSS code.
I’ve been taking ¬†lot of ¬†recent weeks to try to learn the very best Sass has to offer and I’ve een totally immersed in it.

Here’s an example.

@function MakeColor ($color) {
 @return $color + #017;
}
@mixin textFormat($size, $family, $color) {
 font: {
 size: $size;
 family: $family;
 };
 
 color: MakeColor($color);
}
.site-header {
@include textFormat(12px, verdana, red);
}

This probably overdoes it but it shows us what Sass can do.

Calculations made in blocks of code called functions. Functions that take arguments and hold data.

Mixins which like functions are a way of using data

And data being passed into functions… all concepts more commonly known in programming languages across many platforms now used in Sass today.

And this is what all that Sass code outputs to.

.site-header {
 font-size: 12px;
 font-family: verdana;
 color: #ff1100;
}
}

So it’s a relatively simple example. But if you really spend time with Sass, you will get to see how Sass can really be used to remove repetition in your code, create code that is more organised and modular, ¬†and truly get ahead in writing quality and syntactically awesome CSS code.

Is your site mobile ready? Beat the new Google Ranking algorithm before it beats you!

I received an email today that made me sit back and think.

As we all know, tablets and mobile devices are increasing in number. I suspect they overwhelm desktop computers in terms of a means to browse the web.

Well, from April the 21st mobile ready websites will become a Google ranking factor. This means Google will penalise your ranking if your website hasn’t been designed to be mobile responsive.

Thankfully for me in my latest redesign I’ve taken steps to make sure my own site is adapted for mobile but there are still websites out there who haven’t made sure they are responsive.

I offer a cost effective package for looking at a website and refactoring so it becomes Google mobile friendly. For ONLY £150 I can get your Website mobile friendly before the new Google search algorithm comes in! So to beat the deadline contact me now.

In the meantime if you want to check your website is mobile friendly you can visit Google’s developer tool https://www.google.co.uk/webmasters/tools/mobile-friendly/

If it doesn’t pass the test why not give me a call? www.jonniegrieve.co.uk mail@jonniegrieve.co.uk.

Making Websites Quicker

Introduction – What’s web performance all about?

In a change from a blog about code and writing a how-to guide for doing something great with writing code I thought I’d write a piece about optimising websites so they run quicker and don’t waste bandwidth.

Everything you see on the web when you go to a web page requires information to be sent to a server and the sent a response. It can be overloaded and take more time than necessary to finish downloading or “rendering” the information.

And let me tell you when you live in a rural area as I do, it can be pretty tough waiting even those extra few seconds to wait for a site to finish loading. Every second counts.  If a user has to wait more than 3 seconds before the page completely loads you could lose them.

Luckily there are some basics (and not so basic( this I’ve learned that you can do to help browsers render your websites quickly. Thanks again to Treehouse for this great course.

1. Set a performance budget. A target time for the website to load.
2. Look for and deal with website 404 errors. These are wasted HTTP requests.
3. Clean up/unused website assets
4. Create an SVG Sprite map where appropriate.
5. Replace any simple images with SVG’s to save on file size. #
6. Resize and compress photos: Reduce natural sizes for images. Do not use unneeded pixels. Use twice resolution of image size for retina screens
7. Link all CSS in document head.
8. Avoid any use of the CSS @import rule.
9. Use hosted services and CDN’s for CSS fonts
10. Move JavaScript’s to the bottom of the page to aid perceived performance.
11. Use hosted JavaScript libraries.
12. Use minified versions of CSS and JS. Use copies for development.

Getting into it further

Set something called a “performance budget”

Not a financial budget, but like in financial budgeting it’s important to plan ahead. ¬†Set a target time, (I would recommend less than 3 seconds for your website to load all it’s data and assets. Use this as you basis for faster performance. Then once you’ve reached your target, make every effort to decrease your performance speed even further.
Get rid of 404 Errors

Everyone’s been there; either you mistype a web address or you follow a broken link and “woaah what’s this, 404?”. If you get a 404 message it should ideally only be because you made a typo error in your browser address bar. Any 404 error that;s down to a broken list counts as a HTTP Request and is a waste on your resources.

A HTTP request is any request to a server your page makes ¬†for CSS files, images, links or any web “asset” your page requires.

Clean up/unused website assets

As I said above your web page is made up of various web assets and each important asset requires a separate HTTP request to download and render it. ¬†If you’re taking charge of a web project yourself, do an inventory of your web assets, how many and what you are using them for.

Ask yourself:

  • Are there any unused or defunct assets your page is linking to?
  • Could clear some space by optimising your images
  • Are there any scripts or CSS files you don’t need?

If so, remove them. There’s no point asking the server to download resources it doesn’t need.

Create an SVG Sprite map where appropriate.

Where appropriate, it’s often better to use¬†images in vector format rather than using traditional raster formats like gifs, jpegs or pngs. But you can reduce requests even further by putting all vector images in one file. Vectors are wonderfully flexible and stored in code rather than a collection of dots. So they can be accessed individually by giving them unique. ¬†I won’t go into that too much here but it’s a great way of storing multiple images in one file with images that are in themselves easier for Browsers to deal with in file size.

Take steps to optimise your images for the web

Modern day web design has gone way beyond simply designing for the desktop. It’s very easy these days to just put an image on desktop screens and hope that it’ll work the same on other devices like tablets and smartphones. Unfortunately this is not the case and you have to think about how performance on your smaller devices will be affected.

To that end following advice for deal with images on the web is recommended

  • Reduce natural sizes for images.
  • Do not use unneeded pixels.
  • Use twice resolution of image size for retina screens

Link all CSS in document head.

Very simple really. The <head> element of a HTML document is the place to link all your CSS files¬†so they can be cached and not re downloaded every time you visit a page on the same domain (server). ¬†This will aid something called “perceived performance”. Where performance seems like it is better than it possibly is, not by something you’ve done specifically but perhaps a peak in optimal web traffic or cached files that the browser is using!
Don’t use the¬†CSS @import rule.

CSS Import is almost like linking a single CSS file in the <head> element only this is inside a stylesheet which is in itself a request from the server. Unless they’re absolutely necessary I would follow this advice and avoid them.
Use hosted services and CDN’s for CSS fonts and script libraries/

Using hosted services as a couple of major advantages.  The first being that they#re not services stored on your own server. You can use script libraries like jQuery, Google Fonts and specialist CSS files to power your websites. Not only do they reduce your HTTP Request count but their own web performance tends to be well optimised for increased speed so your website can benefit from this depending on your connection speed and web traffic.
Move JavaScript’s to the bottom of the page to aid perceived performance.

Perceived performance plays its part here too.  If you move the script to the bottom of the page .i.e. before the closing body tag, the server has less to manage. When a server reads a web page it does it line by line from top to bottom, so if it needs to a script it needs to see it before it can do so. So a carefully placed script on your page makes all the difference.

Use minified code on your web server.  

A “minified” version is a fully functional script that has all comments, white space removed and is typically used when deployed to the web. ¬†It’s recommenced as this saves a few more kilobytes particularly on a large script when placed on your server.

Use minified versions of CSS and JS. Use copies for development.

It’s good practice to use these minified versions on our projects but to keep development copies with all comments and indented code so it is clearer for developers

Conclusion

There are more tips out there, and there’s always room for more improvement in your download times. But following these steps will get you a long wat in speeding up web performance and could not only increase your visitors, but keep them coming!