So, what exactly is react.js?

Please, do not take the following too serious, I am just trying to make react a little bit more understandable than the traditional explanations!

After spending many months in the react.js ecosystem, I am slowly beginning to understand what it actually is and, to a lesser extent, what it does. For anyone that has dipped into react and its cousin react native I am sure you will understand what I mean – it is not an easy concept to understand.

I have worked with code for many, many years and I love coding and the logic that goes behind it. Most languages have many similarities, if I were to be academic and compare it to human languages, I could say most languages build off of Latin routes just as computer code is based off some form of C. This means the logic flow and syntax of many computer languages are somewhat recognisable to most programmers. Ergo, as react is based on JavaScript – surly knowing JavaScript means react should be a doddle right? Well, it seems not. I am sure there are plenty of folk out there who find starting off with react very easy, but there are many seasoned programmers that do struggle a little.

What can be more frustrating are employers hearing about react and knowing it’s the “next big thing” and thinking they need to jump onboard. “Quick, get hold of an agency and get me a react engineer with oodles of experience to come in here for a couple of months and build the best web experience out there!” This is because many companies will not really understand react and what to expect from a developer/programmer.

I do get asked what is react and what can it do often. Very often! So, I thought I would try and address some of its key features here. I am not about to write another – react was built by Facebook blahh blahh and is about building reusable components blahh blahh because you can read that anywhere. What I want to try and do, is break it down and contextualise it and relate it to things we already know. I think once you understand its core, you can begin to understand how and what is does. React is simply amazing! But it is far from straight forward. Anyone that has tried to follow a tutorial gets bogged down in the constant installing of dependencies and libraries and connecting this to that and passing props down but not up, changing state and……wait! What is all that? I understand I need to, because you just told me, but why all the dependencies? OK, so let us look at that first…

React and all those dependencies!

As you may know, react is a JavaScript library. You still use JavaScript, but through a new library. So, if we return to our Latin – react is like modern Italian with JavaScript being its Latin master. However, for me this over simplifies react. It is not as straightforward as being an updated version of JavaScript because it works differently. I think it is more like the modern English language that borrows words and phrases from other countries and also feeds them back. English is becoming infected with Americanisms (a subject for another time) but is still recognisable as the same umbrella language. It may seem as though I am wildly digressing but think of react as a library – or modern version – of JavaScript. Now for a browser to understand react we need to transpile react (ES6) back into JavaScript (ES5).

Think, perhaps, of a parent translating their kids Americanisms and text talk to their grandparents so when they say that was literally awesome, the grandparent does not think they are talking about an epic novella. Or if the kid texts “thts std!” the grandparent doesn’t think the poor kid needs to go to the clinic, but rather thinks that is a standard response. OK sorry, so to transpile react (modern JavaScript ES6+) into browser readable JavaScript ES5 we need to grab a transpiler to do the work for us. The most commonly used transpiler is Babel. To use Babel however, we need to install and call it. But what actually is that?OK, so we call react a JavaScript library. This confused me at first, but I think I get it now. If we think of JavaScript (ES6 upwards) as the library, then react is a big book in that library. Now to use it, we always start our script off with

import React from ‘react’;

import ReactDOM from ‘react-dom’

providing we have already installed react and node via the command line or terminal using perhaps npm or yarn install. We can think of npm or yarn as our book manager. It grabs the relevant book for us and puts it in a nice folder, so we can access it later. By installing webpack, we are grabbing a large encyclopaedia! It has plenty of sections we will use, but it also has many volumes and pages we will never use. However, webpack is a handy package of books for us to install and use without too much hassle. Alternately, we can also pick and choose what books we want to use. As the library is open source and well stocked, it is fairly easy to find a book that answers a problem for you.

I recently wrote an app that needed to pick a date range from a dropdown calendar. Yes, I could spend many hours making my own dropdown calendar, or I could think…mmm…I know Airbnb use that type of thing and they use react. So, I went over to the Airbnb section and installed it into my booklist (node_modules folder). I then imported

                               import { DateRangePicker } from ‘react-dates’;

react-dates is a large book based on the Airbnb calendars and here I just chose the part of the book relating to the date range picker. Later I also imported the section about the single date picker, so I could now choose between a date-range and a single date for my app with very little fuss. The main fuss was converting the American formatted date into a UK formatted date of day/month/year.

As I continued to build the app, I found I also needed to grab bits from other books in library too. Not only was I able to use sections (functions) from other books (components), I was also writing my own functions and components that I could also import into my app. Here lies the beauty of react – reusable components! Here is an example of the imports used in just my app.js file

Remember – if we want to import a component created by a third party, typically we need to install it first into our bookshelf (node_modules folder). That is why it seems as though we are constantly installing new things on the command line, because we need to get the whole book, so we can import the required section.

So then, a react app is made up of many components – some borrowed, some reused, and some bespoke. React depends on these other libraries to expand its core and functionality.

The virtual DOM explained

One of the main advantages of using react is its render speed. It loads from the client side rather than back and forth to the server. But what does that actually all mean? Just what is a Single Page Application (SPA). I was always told to have several pages that linked together with various details broken down – a home page, an about page, maybe a contact page and where to find us page. Maybe even a testimonials page? This is known as a Multi-Page Application (MPA). An SPA was traditionally frowned upon because the user had to scroll through loads of “stuff” to find the bit they wanted. Sure you could pop in hyper-links etc, but the idea of one extremely long page as opposed to focused multiple pages is a concern for traditional websites.

React however, is different. You tend to create the SPA, but instead of one long unwieldly page, you have several components than can be swapped out and new ones loaded in. The speed at which this happens is extremely fast because the page only needs to render the updated or changed component. But what does that mean?

Traditionally, a site is called by the user and then delivered to their screen. So, a request is sent – either as a URI or maybe a google search. The address is resolved, and all the site details are retrieved from the site’s server. This is sent to the user’s computer to be read and then rendered. So the HTML is loaded (the text) the CSS (style) is loaded and applied to the text. Any script is then loaded and added to the page and then finally rendered as a webpage to your screen. To update the screen (say the news) you need to press a button or reload the screen. So, the browser (client) sends a request back to the sites server to get the latest version of the site – this is regardless of if anything has changed or not. The whole site comes back, the text gets sorted – styled – and any JavaScript re-added. If nothing has changed, it still takes several seconds (depending on internet speed) for the data to be retrieved, compiled and rendered. The bigger and more interactive the site, the more back and forth – re-rendering, styling, reading, etc. You get the picture!

With react, this is no longer the case. All the data is still retrieved from the server initially, but then the magic happens. A copy of the data is made, that is displayed to the screen. If a change is made – (either by the client or sent direct from the server) the browser will compare the new data with the data “snapshot” already displayed. Once compared, the new data is added to the screen (the virtual DOM) and only that is re-rendered. We can think of loose-fitting Lego bricks. You get given a diagram to build a wall (our SPA). Each brick has its place and it is an exact copy of the original picture. Now maybe you want to update the twitter feed to show your latest tweets. Only the twitter brick has changed and therefore, only the twitter brick needs to be replaced. This is quick! It only replaces what is new and only when it is new – the process is called diffing by the way.  What you must remember is that the image displayed is an exact copy of the original. So, the Document Object Model (DOM) is the normal page, the standard web page built in HTML. However, react is not HTML and does not write to the DOM. Instead react makes a virtual DOM – the copy! This is rendered and stays on screen until an update is called or triggered. I could go into more detail, but I am sure you are bored already!

The ideas above are just my observations of how react works, I could be wrong. If I am – let me know! I am just trying to help break down what react is into a user friendly guide.

A React walk-through of props and components

The aim here is to try and explain components and props in a simplified way, I hope it helps.

Obviously, we must start at “Hello, World!”

So here is the code

HTML

<div id=”app”></div>

React JS

class App extends React.Component {

 render() {

   return (

       <h1>Hello, World!</h1>

   );

 }

}

React.render(<App />, document.getElementById(‘app’));

https://codepen.io/DrHWebDev/pen/OaQLXL sandbox version.

Here, the return statement returns JSX – everything inside the () – to the component named App. App then gets called in the HTML file and rendered out as heading 1 – Hello, World!

Although the code in the brackets looks like HTML, it is in fact JSX. JSX is a syntax extension for JavaScript. It was written to be used with React. JSX code looks a lot like HTML so it is easier for us to work with, but it is NOT HTML! JSX can be stored in JavaScript variables, objects, functions, arrays etc. Also, JavaScript can be used inside JSX and then stored inside JavaScript!

So then, React uses JSX, but also the JavaScript looks different. That is because React utilises JavaScript ES6 and above. You can write react without JSX and ES6+, but that kind of defeats the purpose of using it. Here is a sandbox example of ES5 and ES6 versions of the same code https://codepen.io/DrHWebDev/pen/yxLWMb

Components

Components is where react really shines. Think of several building blocks being used to make a wall but without the cement. So, each block can be changed independently of the other blocks around it. Each block/component can be a function, API, media, whatever. Think of Facebook – the news feed updates regardless of what is happening around it. You can also call that feed into another react app to display just that feed on your blog – as an example. So, all these blocks are interchangeable. Sometimes, we want to use a component from another library, like an Airbnb date picker. That is another beauty of react. Because the react library is being used by big tech companies, they will build and share their components for us to use and integrate.

At first, this seems a chore – installing via npm or yarn, several dependencies and then importing them into your app. It is when you realise that these are just parts of the building blocks to create your app, that it becomes less confusing. React itself, is just one component that can-do certain things, if you want to add another function, you must import it into your app.

It is also worth noting, that in the same way you can import third party components, you also need to build your components to enable reusability. Design your component so it can be stand alone and without props being passed down through that negate its reusability – more on props and state later. But just as you would import a third-party component, you would not expect it to rely on data being passed to it from another external component to work. In essence, you would want to set the variable name in the component, but you want to set the value in your main app component to ensure reusability.

Here is an example –

const Header = (props) => {

 return (

   <React.Fragment>

     <h1>{props.title}</h1>

     {props.subtitle && <h2>{props.subtitle}</h2>}

   </React.Fragment>

 )

}

Header.defaultProps = {

 title: ‘Default title’

}

ReactDOM.render(<Header title=”A new title” subtitle=”An actual subtitle”/>, document.getElementById(‘app’));

https://codepen.io/DrHWebDev/pen/jemqxx sandbox version.

In a “real world” application, the values of title and subtitle would be assigned in your main app.js file and imported. However, for ease of an example, the values have been assigned in the final argument. <Header title=”A new title” subtitle=”An actual subtitle”/>.

In the main Header const, we call props (the properties of the key:value pairs declared in the render call) and set them to the variables in the JSX. Props can only pass ONEWAY!

So, in this const Header, we set up the variables and set them to be the value of the prop(erty) passed in. So, the component “Header” has no values actually declared in the object. Instead, they are passed in. Therefore, the component is reusable because if we need to render a title and subtitle in any of our other apps, we import this Header and pass the props into it.

So, components are like building blocks, they are also similar to tables in a relational database. They want to be as small as their common denominator. For instance, if we wanted to create a function that would display user data we may want –  name and picture. Now, not all users may have a picture, so to avoid null data, we would split the component into three parts – 1. the main component that will render the data and assign the props, 2. the user name component and 3. the user image component will set up the variables.

Here is the main code before we split it down.

class Comment extends Component {

 render() {

   return (

   <div className=”Comment”>

       <div className=”UserInfo”>

         <img className=”Avatar”

           src={this.props.user.avatarUrl}

           alt={this.props.user.name}

           />

         <div className=”UserInfo-name”>

           {this.props.user.name}

         </div>

       </div>

       <div className=”Comment-text”>

         {this.props.text}

       </div>

       <div className=”Comment-date”>

         {formatDate(this.props.date)}

       </div>

       </div>

       );

 }

}

Here is the code as 3 reusable components instead

Component 1

class Comment extends Component {

 render() {

   return (

   <div className=”Comment”>

       <UserInfo user={this.props.user} />

       <div className=”Comment-text”>

         {this.props.text}

       </div>

       <div className=”Comment-date”>

         {formatDate(this.props.date)}

       </div>

       </div>

       );

 }

}

Component 2

function UserInfo(props) {

 return (

     <div className=”UserInfo”>

         <Avatar user={props.user} />

         <div className=”UserInfo-name”>

           {props.user.name}

         </div>

       </div>

    );

}

Component 3

function Avatar(props) {

 return (

     <img className=”Avatar”

         src={props.user.avatarUrl}

         alt={props.user.name}

      />

   );

}

https://codepen.io/DrHWebDev/pen/yRmxGe Sandbox version

Granted, the Avatar component is very small, but it means if an image is updated, only that component needs updating, and it can also be re-used elsewhere if needed. You could also use conditional rendering so that an image would only be rendered if an image was present etc. This is where the similarity to relational databases is also apparent. Instead of a primary key though, we have props!

If we look at the code above, we can see that there are two different types of functions be declared here – the function and the ES6 class components. The class-based component has additional functionality, like state, but we will explore this later.

As we have noticed in the code examples above, we can set the value of a variable by passing in a prop from inside, or outside the component. But what is props? Props are read only – they are immutable! Once set, that is that and it can only travel down a hierarchy. Props is a value that is passed into the variable from elsewhere. If we revisit the Header code snippet and convert the const to a function, we get this –

But what is going on here?

We set up the function and name it Header and call in props straight away. As this function is self-contained, we can see the props being set in the render call at the bottom. In a real app, this would be in perhaps the app.js file where we would place the Header and set the value. The value is then passed down to the child – in this case our Header function.

So, in the reactDOM line we see Header having a title of “A new title” and a subtitle of “An actual subtitled” being assigned to it as two key:value pairs. So, the values are set outside the function then passed in as props. We then call in the props as a JavaScript object inside our JSX. Basically, the prop is passed in as 2 key:value pairs and then we select the one called title and its value “A new title”. Therefore, this functional component is totally reusable because the value is always passed into the function and not set or changed within it. This would then be passed back to the main app.js to be placed and rendered in a real version of the app. Therefore, in a “real app” we would

·        call the function or component so we can set the key:value pair (assign a value to the variable) in the parent function

·        in the function – set up the variable and any siblings and call in the props set in the parent function to assign the values to the appropriate variable

·        then we place that function (with its new props) into the part of the main app that will render it to the virtualDOM.

This was one of the hardest parts of props for me to understand. I would ask myself – “Why do we use the variable in, like, 3 different places and call it, pass it, assign it etc all over the place?” Well I hope the above has gone some way to answer that. 

About the Author, – Dr Richard Haddlesey is the founder and Webmaster of English Medieval Architecture in which he gained a Ph.D. in 2010 and holds Qualified Teacher Status relating to I.C.T. and Computer Science. Richard is a professional Web Developer and Digital Archaeologist and holds several degrees relating to this. He is passionate about the dissemination of research and advancement of digital education and Continued Professional Development #CPD.

Are tags a thing of the past?

Are <meta> tags a thing of the past?

Well…yes, and no! This article will explore which <meta tags> help and which hinder and are obsolete.

Traditionally, meta tags used to be placed in the head section of a webpage, hidden away from the public, they were used to help bots find out about your website contents. An example of such is given below.

With advances in search engine optimisation technology (SEO) the importance of meta tags has been superseded by the relevance of the page contents, rather than what the developer thought were the best keywords. Often, a website could receive a higher ‘click-rate’ than it should because the developer included popular keywords in the meta tags. If you wanted to drive traffic in ‘the good old days’ you would simply include keywords popular at the time – even if they had absolutely nothing to do with the site content! Wack “Spice Girls” in as a meta tag and you would get a higher ranking. This eventually became a real issue, with genuine websites ranking lower than those with irrelevant keywords. The search engines soon developed better algorithms that searched keywords within the page and marked up with – <h1><h2><section><article><strong><em><id=> -etc. In fact, it could now be argued that keywords hinder your ranking by restricting what people are actually typing to find your site. It can also have a detrimental impact on your website if your rivals can see the keywords you are using to try to attract customers.

<meta name=”description”> however, can be a very useful tag. In using the meta description tag, you can directly control what is displayed in the listing for each page displayed in the search engine results. Without this tag, the search engine will return what it thinks is a suitable description of your site.

You don’t need to restrict this tag to just a site description either, you could include phone and contact details so they are shown without the need to access your page. This can be very useful for a GP surgery were someone just quickly needs to find the phone number to book an appointment. It is also the quickest way to impact on the searcher. It is an easy way to tell prospective clients (in less than 155 characters) what you are about before they click. If your description better fits their need than a competitors description, you are more likely to get the clickthrough. So the description tag is not mandatory, but it can help you control the description of the site and potentially drive traffic.

The robots tag is invaluable if you want to “hide” certain pages or content from public search engines by telling the bot what not to crawl and what to crawl. You may have an employee or student area that you do not wish to include in a public search for instance. In which case you would just tell the robot to ignore those pages with a <meta name=”robots” content=”no index, no follow” /> in the header of the page you want to hide.

The Open Graph (OG) meta tag enables a web site/page to “become a rich object in a social graph”. In other words, sites like Facebook will use the OG tags to better understand the site content and display images and information about it. These tags are crucial if you want to control how your site looks when shared on social media. Although this may seem regressive- having to rely on meta tags again – they are based on RDF protocols and, if used, have 4 mandatory tags. If we use IMDB as an example, the following then is a list of required tags to create an open graph object =

  1. og:title – The title of your object as it should appear within the graph, e.g., “The Rock”.
  2. og:type – The type of your object, e.g., “video.movie”. Depending on the type you specify, other properties may also be required.
  3. og:image – An image URL which should represent your object within the graph.
  4. og:url – The canonical URL of your object that will be used as its permanent ID in the graph, e.g., “http://www.imdb.com/title/tt0117500/”.

This would translate in HTML as

<html prefix="og: http://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>

So then, in conclusion, it can be said that with the exception of the description meta tag – meta tags are dead? I would reluctantly answer – “if the purpose is to aid SEO, then yes. The meta tag is dead. However, if you want to control its description in a search engine, or the way it displays on social media then you still need to use them. OK, so the OG meta tag is not a meta tag in the traditional sense, it still needs to be placed in the header. This is something WordPress will not allow without the use of Plugins and trickery – but please, do NOT get me started on WordPress! WordPress is to Web Dev what “nighthawks” are to archaeologists!

So if you want great SEO, write well-formed code utilising the power of HTML5 with a sprinkling of meaningful <meta tags> that described its content, directs bots and creates Open Graphs for social media inclusion.

#mftLearnToCode #ttrLearnToCode https://genericweb.co.uk/

Why do we need tutors for online courses?

I work as a tutor for an online training provider and we are often asked, “what is the point of a tutor if they are working online?” In this article, I aim to answer that question. Obviously, it is futile to imply that we are necessary for a student’s success in passing their exams, but I do believe we do play a valuable part in their success and satisfaction. It has certainly been my experience that the greater the interaction with the tutor, the greater the chances the student will have a better experience with the course and, therefore, more likely to pass the first time. Where an online course can often fail, is in contextualising the content and making it relevant to the student’s experience and prior knowledge. By getting to know the student, even if it is through a few emails, we can really help them relate their learning to real-world examples and contextualise the technologies they encounter, both in the course and in the real world.

It is also important to give assurances and confirmation of the students learning journey. Creating confidence in the student’s ability to learn is a crucial foundation for building trust between the student and the information they are learning from the course. The sterile environment of non-contextualised learning online can really be enhanced by human interaction and affirmation. Without, the student can feel alone and unsure they are actually learning. Uncertainty and isolation can lead to failure to finish the course and create an adverse learning journey they will put them off future learning. It doesn’t have to be an isolated negative learning journey, it can be turned around by tutor support.

I could cite hundreds of articles that posit we tend to learn in different ways and in different styles – visual, aural, verbal, physical, logical, social and solitary. Granted, online learning covers much of that, and video tutorials can also cover many of those styles that text-based learning cannot. I would like to add an eighth style – contextualised. The majority of the exams for CompTIA, CIW, and Microsoft are based on the technologies they cover and how to implement them correctly as a solution to a problem. They are not about learning the meanings of acronyms and answering verbatim what they have read. If you are unfamiliar with the technologies you are learning, it is very difficult to contextualise why and when you would employ certain technologies with other technologies to solve the problem. In learning what an acronym can do and why we would use it, the meaning will become apparent in a multiple-choice question anyway. Let’s face it, how many “professionals” remember the exact meaning of all those acronyms they use daily? But, we all know how to use them and when to use them.

To “contextualize something [is] to consider something in relation to the situation in which it happens or exists (Oxford Learners Dictionary).

I have taught all age groups and abilities during my time as lecturer, teacher and now a tutor and I can safely say the most challenging and yet rewarding part was contextualising the learning journey. For me, code is a prime example. Every student wants to dive head first into code and get things going by building the next breakthrough app. Some students can just do this, but most cannot and will falter because they do not understand the theory, structure, and context. Every program is based on an algorithm of some sort. Even if you do not take the time to build an algorithm, one can be applied to the code. I think it essential that students at least understand the principals of algorithms and structure before they code. The program needs reason and it needs context or you just start building unstructured code. If you understand the basics of an algorithm, you understand the blocks and the separate functions/components needed to construct well-formed code. A tutor can help with that. A tutor can feedback best practice, context, and industry trends. A Boolean eLearning platform cannot.

Contextualised learning is not just about placing the technologies to help the student better understand. It is also about how you relate the learning to the individual student, so they can better learn. The very nature of eLearning means we can have students from any background. A generic eLearning platform cannot, by its Boolean nature, explain all things to all people. A tutor, however, can have a blinking good try! Trying to break down the learning journey into a voyage the student can understand and follow is invaluable, and I would argue, only achievable by contextualised learning from a tutor.

—————————————–

I hope this article has gone some way in helping you understand the importance of contextualised learning. If it has…please LIKE, SHARE or FEEDBACK the post. Thank you.

About the Author, – Dr Richard Haddlesey is the founder and Webmaster of English Medieval Architecture in which he gained a Ph.D. in 2010 and holds Qualified Teacher Status relating to I.C.T. and Computer Science. Richard is a professional Web Developer and Digital Archaeologist and holds several degrees relating to this. He is passionate about the dissemination of research and advancement of digital education and Continued Professional Development #CPD. Driven by a desire to better prepare students for industry, Richard left mainstream teaching to focus on a career in tutoring I.T. professionals with real industry-ready skills that matter at The Training Room.

#ttrIT #ttrcareerinIT #ttrLearnToCode

Visit his Blog and Website

Read more about Dr Richard Haddlesey BSc MSc PGCE PhD

Teaching Python vs HTML

So, I was talking to a colleague the other day and he was asking me about my experience teaching Python at secondary schools, mainly – “is Python forgiving”? My simple answer was – No! Python is not forgiving at all in comparison to HTML.

I now primarily teach the web trifecta – HTML, CSS and JavaScript and the question came about because of the forgiving nature of HTML. Students can submit some shockingly ill-formed code that will still display in a browser.

For instance –

<p>hello world</p>

will display “hello world” in a browser. Yes, it works, but it is far from well-formed or best practice, such as –

<!DOCTYPE html>

<html>

<head>

<title>better code</title>

</head>

<body>

<h1>Hello, World!</h1>

</body>

</html>

Python, on the other hand, is far more pedantic about its syntax rules. Often a simple misplaced / or : or “ instead of ‘ will render the code useless. I would spend hours of teaching code locked in debugging to find where a student had forgotten that colon! Don’t get me wrong, I love debugging – no, I really love debugging, and I am good at it because I enjoy it. However, debugging code because a student cannot copy from a book without dropping a colon is not so much fun.

If I am to compare the two languages in a teaching environment, teaching Python is probably easier. Why, you ask? Well, because-

·        it has to be right to work!

·        It has to be indented

·        It has to be well-formed

·        It has to be structured

·        It has rules that must be followed

·        The syntax is exacting

Sure, this is harder to teach – forget “free will” and “conform” your code, can stump the more creative students, but you are industry ready if you learn it right. Good old slap happy HTML will often work no matter how badly the code is written or formed. This makes it harder to teach because they know they can get away with –

·        A lack of structure

·        No indents

·        Ill-formed code

·        Missing syntax

·        A real “DIY” mentality

Therefore, teaching HTML that works is very easy – teaching HTML that is industry ready is really not!

“Well my webpage works doesn’t it sir?”

“Well…erm…yes, but it is a mess and the code are all over the place and is very hard to follow”

“Whatever, sir…it works and that’s good enough for me, so the heck with it!”

OK, so back to the anecdote – Python.

After getting so frustrated with putting colons and the alike into student’s code, I started playing a game. We had loads of old keyboards at school so I got a load and removed the .,?;:”’ etc from them. If a student asked me why their code wasn’t working, I would look. If it was logic I would explain and work with them on it. If it was syntax, I would go to my desk and pick up the corresponding marked key and place it on their desk. Obviously, if the key they were given was a colon, they knew they had to look for the missing colon in their code. This would encourage them to look for syntax errors themselves, rather than have the embarrassment of receiving a broken keyboard key placed on their desk.

Gosh…I miss teaching Python. However, I love teaching the web trifecta here at The Training Room.

No matter what language you learn – learn to code!

#ttrLearnToCode #ttrIT

The Evolution of the Computer Science GCSE

During the 1980s, computer studies and computers were in their infancy[1]. The BBC Microcomputer was the only real choice for schools at the time. This early PC had very little in the way of end-user applications and relied on a BASIC interpreter to be loaded which meant the user needed to learn to program and build their own applications[2]. This resulted in schools focussing on teaching how to program a computer alongside how the computer works. As computers became more popular and more applications became available, the focus on teaching switched to how to use a computer and its applications and ICT was born during the 1990s[3].

During the 2000s, it was becoming clear that ICT was no longer fit for purpose and that students were leaving school with skills in digital literacy, but not in computing. ICT began to receive negative reports from industry, educators and students as it was seen as a boring and repetitive subject that only taught how to use Microsoft Office[4].

It was not until 2010 that The Royal Society, based on information from the Computing At School group (CAS), Ofsted, Microsoft and Google (among others), set up an Advisory Group Chaired by Professor Steve Furber FRS[5]. The reports first recommendation was to stop using the acronym ICT because of its “negative connotations” as quoted below.

  • “Recommendation 1 The term ICT as a brand should be reviewed and the possibility considered of disaggregating this into clearly defined areas such as digital literacy, Information Technology, and Computer Science. There is an analogy here with how English is structured at school, with reading and writing (basic literacy), English Language (how the language works) and English Literature (how it is used). The term ‘ICT’ should no longer be used as it has attracted too many negative connotations”[6].

Aside from the name ICT, it was becoming clear that the “current delivery of Computing education in many UK schools is [sic] highly unsatisfactory” and needed addressing[7]. Indeed, even the UK Education Sectary at the time, Michael Gove (May 2010 to July 2014), was quoted as saying the ICT curriculum was “demotivating and dull”[8]. This was brought into the headlines by the executive chairman of Google, Eric Schmidt, when he addressed the Edinburgh TV festival in 2011 saying,

  • “I was flabbergasted to learn that today computer science isn’t even taught as standard in UK schools. Your IT curriculum focuses on teaching how to use software but gives no insight into how it’s made. That is just throwing away your great computing heritage”[9].

As a result of growing pressure from industry, Michael Gove reported the UK Government would replace ICT with a new Computer Science curriculum from September 2012 (the start of the UKs academic year). In that speech, Gove posited,

  • “Imagine the dramatic change which could be possible in just a few years, once we remove the roadblock of the existing ICT curriculum. Instead of children bored out of their minds being taught how to use Word or Excel by bored teachers, we could have 11-year-olds able to write simple 2D computer animations”[10].

Visit my Interactive CV

Bibliography

[1] Doyle, GCSE Computer Studies for You.

[2] Brown et al., ‘Restart’.

[3] Ibid.

[4] Coquin, ‘IT & Telecoms Insights 2008: Assessment of Current Provision’.

[5] Furber and et al, ‘Shut down or Restart?’, 12.

[6] Ibid., 18.

[7] Ibid., 5.

[8] Burns, ‘School ICT to Be Replaced by Computer Science Programme’.

[9] Schmidt, ‘Edinburgh TV Festival’.

[10] Burns, ‘School ICT to Be Replaced by Computer Science Programme’.

No more ICT…….Please!

It was not until 2010 that The Royal Society, based on information from Ofsted and Microsoft (among others), set up an Advisory Group, Chaired by Professor Steve Furber FRS . The reports first recommendation was to stop using the acronym ICT, yet here we are – 7 years later – still using IT! Why? #ttrLearnToCode

There is more to providing learning for the I.T. industry than just teaching code!

As IT trainers, should we be installing and promoting “good practice” and “ethics” alongside the coding and theory?

With the absence of a professional regulatory body in I.T. and web development, it is up to us to self-regulate. In doing so, it is essential that we pass on ethics and good practice to the next generation of developers and coders. It is not enough to just teach “good code” and computational thinking, we must provide the wisdom and morals to allow our students to implement their code in an ethical way.

Hacking, espionage, directed advertisements, ransomware, cyber-terrorism, fake news, fraud, spam, SQL injections, sexting, legacy content, the right to be forgotten -etc. are the headline threats to the future of our “on-line” world. However, beyond the obvious are the underlying ethics that affect our daily interactions in the digital age. It is crucial, I believe, that we create a culture of “best practice” within the IT industry to maintain our integrity and elicit trust from our clients and the wider public.

So, if I am not talking about the headline threats to online and digital ethics, what am I talking about?

I am referring to the need for standards and collaboration across the industry. The simple things that make life easier for us all:

  • Indenting your code so others can read your code
  • Commenting on your code so others can understand it
  • Personalising your code so others can’t plagiarise it
  • Make your code efficient and elegant to inspire others
  • Share code snippets with others so we can learn from your code and you from ours
  • Develop your code to be neutral of external influences (no politics, race, borders)

 

Let us now break these points down.

Indenting code

Indenting code has its advantages and disadvantages, but I will argue the positives far outweigh the negatives. Just as we use white space and paragraph in the written language to add emphasis and separate concepts, written code also benefits from this. Placing blocks of code separate from other blocks, or indented within a larger or parent block, helps others to read your code. Not only that, it makes it much easier for the developer themselves to isolate blocks of code when it comes to debugging or showcasing the code to the client or other team members. Different coding languages will have different levels of indentation built in – Python for example – whereas HTML will not enforce indentation (unless you are using a dedicated code editor or IDE). The W3C does go some way to highlight the need for indentation in their style guide by suggesting

·        Do not add blank lines without a reason.

·        For readability, add blank lines to separate large or logical code blocks.

·        For readability, add two spaces of indentation.

·        Do not use the tab key.

·        Do not use unnecessary blank lines and indentation. It is not necessary to indent every element.

Sublime Text 3 has a really innovative way of helping with indentation, it places gridlines that connect the levels of indent so you can visualise related blocks of code. This also helps with ensuring you properly </close> your elements. As mentioned before though, these are just “best practice” at the most, and are neither enforced nor necessary. This naturally causes ambiguity in code with various editors creating different indent depths, some automatically create indents (Dreamweaver etc) whilst others do not (Notepad++, Sublime Text, Brackets). The point I make here is, someone new to the coding environment using a free editor will not necessarily be aware of indenting. Does this make their code wrong? Does it stop it from working? Will it stop them from being paid? The answer is no! However, it may not endear them to their colleagues and will place them apart as “noobs” and will hopefully imply they are not certified developers – a theme we shall return to later.

<!– Commenting your code –>

I understand that commenting your code is more associated with teachers wanting their students to show their understanding when compiling code, but its use is far more important than that. If you are being paid to write code for a company, they will often own the intellectual property rights to the code. Therefore, they have a right to understand what parts of the code are doing. That aside, if you are working as part of a team, other members of your team will need to know what parts of the code are doing. I am certainly not suggesting you comment every line or element, but you should comment a block, function, iteration, concept, external file etc – for your own understanding and sanity if not that of others. I am not referring to putting in an <alt> text for an image – although clearly, that is good practice too – I am more concerned about professional ethics and good practice rather than semantics.

Personalising your code so others can’t plagiarise it so easily.

Ok, this may seem sneaky, but using another developers code as your own is far sneakier! It may also be prudent to add comments to code to try and catch those plagiarising your code, or using it for financial gain and infringing your intellectual property rights. Beyond commenting, you could also add a few “false” lines of code. I am all for sharing code or examining others code as a starting point or inspiration, but within that, you should <!–comment–> in a #reference to the original code and thus, credit the author.

 

Share code snippets with others so we can learn from your code and you from ours.Finally – join a forum! Learn, share, create, collaborate, ask, tell, say, question, expand. There are plenty of places to get involved. Stack Overflow is simply amazing and a must join for any budding or professional developer. Join “roughly 40 million developers who visit the site every month” and ask more than 8,000 questions a day! Another great resource is GitHub where you can share and collaborate.

I hope this article has gone some way in helping you understand the importance of Industry ethics and “good practice”. If it has…or hasn’t… please LIKESHARE or FEEDBACK the post. Thank you.

About the Author, – Dr Richard Haddlesey is the founder and Webmaster of English Medieval Architecture in which he gained a Ph.D. in 2010 and holds Qualified Teacher Status relating to I.C.T. and Computer Science. Richard is a professional Web Developer and Digital Archaeologist and holds several degrees relating to this. He is passionate about the dissemination of research and advancement of digital education and Continued Professional Development #CPD. Driven by a desire to better prepare students for industry, Richard left mainstream teaching to focus on a career in tutoring I.T. professionals with real industry ready skills that matter at The Training Room.

#ttrIT #ttrcareerinIT #ttrLearnToCode

Crossing the Digital Platforms in WebDev

HTML5, CSS3 and JavaScript undoubtedly make creating cross-platform websites, but it is still essential Web Developers/Designers thoroughly test their sites before making them “live”.

Most websites will have been designed and built on a P.C., MAC or laptop, but increasingly they are being viewed on tablets and mobiles. This is often overlooked. As a teacher of computer science, we would often ask students to login to a site, or interact with a site to do some homework etc. Increasingly, students would reply – “we couldn’t get the website to work on my mum’s tablet or my phone sir”. “Don’t you have a laptop or computer at home”? “No sir, we don’t need one”.

Granted, it tends to be the youth that prefers mobile devices, but in 2016 the amount of people accessing the web via mobiles and tablets surpassed users of laptops (hallaminternet). It is also fair to assume that not everyone wants to download and install another mobile app that they will barely use. Therefore, it is crucial that as web developers/designers, that we create responsive sites that transfer the content to any platform without the need for the user to resize the site’s content. Even if CSS3 is not your strength, there does exist plenty of responsive templates on the net. Some of these – TEMPLATED – are provided free of charge and royalty free (providing you reference them). Even as a “seasoned pro” basing code on pre-existing templates saves time and can be used to show the client quickly what to expect before you commit to the lengthy process of bespoke coding. I am certainly not suggesting we plagiarise, but if we use templates and comment on our code professionally, I see no harm. As a pro, you should be able to delve into the code and personalise and change the content anyway, it is just a useful starting point.

Anyway, I digress a little. Back to the main thread. I am hoping that – using HTML5, CSS3 and JS – we can move away from mobile specific content, and more towards a responsive page that will display the same content optimised to the device, it is viewed on. This is will help greatly with “branding” and provide a consistent experience for the user. It also means the developer just needs to design each page once and apply a CSS to it, rather than make several iterations of a page designed to display on different devices.

——————————————————————————————————-

I hope this article has gone some way in helping you understand the importance of UPDATES. If it has…please LIKESHARE or FEEDBACK the post. Thank you.

About the Author, – Dr Richard Haddlesey is the founder and Webmaster of English Medieval Architecture in which he gained a Ph.D. in 2010 and holds Qualified Teacher Status relating to I.C.T. and Computer Science. Richard is a professional Web Developer and Digital Archaeologist and holds several degrees relating to this. He is passionate about the dissemination of research and advancement of digital education and Continued Professional Development #CPD. Driven by a desire to better prepare students for industry, Richard left mainstream teaching to focus on a career in tutoring I.T. professionals with real industry ready skills that matter at The Training Room.

#ttrIT #ttrcareerinIT #ttrLearnToCode

Cloud Chaos?

As a student, I was always told – no forced – to create folders on my computer to store all documents pertaining to one course or project. All files, no matter the extension or type, go in a folder so they can all be found and all the links to files will work. The same was true for your desktop, keep it clean, keep it in folders. I am a huge fan of arranging all my work into folders and logical places on my physical drives. That often means I do have to use USB sticks to transfer work over to another device, but at least you can. So, for years now, I have been meticulously placing the right file in the right folder to enable myself to locate the said file with ease and to ensure if I copy a folder over -via memory stick – to another device, that all the “stuff” is there. Makes sense I hope?

Now, we have cloud storage, cloud backups, cloud software, cloud this and cloud that. Most major companies offer cloud storage or backup;

·        Microsoft OneDrive

·        Google Drive

·        Adobe Creative Cloud

·        GitHub

·        Kindle Cloud Reader

·        Dropbox

·        Sony Memories

·        Canon/Nikon for photos

·        Samsung

·        iCloud

The list goes on. Most of the list above create a folder on your physical drive that is “synced” to the “cloud”. So, the work you do on MS Word will be in a OneDrive folder, while the image you created will be in your Adobe Creative Cloud folder. More on this later, but I think we need to look at what the cloud is first?

The “cloud” is a physical location! It is not a cloud of data that just floats in space waiting for you to grab at it. The cloud will not rain data when it gets near a hilltop or the North of England. It is located on various servers at various server farms around the globe (depending on the size of the company that stores your cloud data). Those servers are constantly connected to the World Wide Web and the internet so that you can access your data anywhere at any time. The data is across several different farms, often floating back and forth (a cloud of data) to ensure the data is always backed up and accessible should a server fail. So then, the cloud is rather fantastic! You can work on any device, at any location, on any platform, using various software at any time – within reason and with some caveats. On top of this, you can rest assured you have a copy of a file backed up somewhere. Even if you delete a file, there is a greater chance of recovering it or at least finding an older version of it.

So, all this is great! So why the title “Cloud Chaos”? Well, if we think back to the folder scenario I have already eluded to, we now need to create a folder for each cloud provider rather than for each project. My simple logic brain now struggles to think – which cloud provider has what file in which subfolder for which project? For instance, I could be planning and designing a web page. I may write all the text in MS Word first, then save the work in my OneDrive so I can access the document on my phone too. Next, I create an image in Photoshop and save the image in my Adobe Creative Cloud folder. I may start my HTML code in Dreamweaver and save it too to the Adobe Creative Cloud, but my colleague needs to work on the code too, so I place the code on GitHub so we can share the code in real time without having to give them access to my Adobe account. So now I have different files in different cloud folders. This is amazing, that colleagues can share work and be assured they are working on the latest iteration, however, my poor dyslexic mind cannot cope easily with files in various locations rather than in just one location that I control. So, on one hand, our workflow has the potential to grow and the potential of collaboration is almost limitless (bandwidth and latency aside). This is, understandably why the cloud is so popular. Especially, as most cloud services come as an add-on to your software package. Or, in the case of Dropbox, are essentially free – unless you need larger storage through a business account. It really is quite amazing!

So, why the chaos? Well, simply because your files are now spread across various cloud providers and it is not until you bring it all together can it be stored in one location. So, if we take Dreamweaver as our example, we need to place all the associated files in a root folder so the website can link to all its assets relatively. All the image files will be in the default image folder, HTML in another, CSS and JavaScript in others. So, we need to take the original files out of the cloud folder and place them on our server so the links all work etc. For most people, this probably is not an issue, but for me – with dyslexia and short-term memory loss – it is a nightmare! Did I move the file? Where is the file? Am I working with the latest version? Have I put all the files in the right folder and deposited it all on the server? I agree, the cloud makes life more collaborative and intuitive for most, but it is a new way of working that does take time to adapt to. Clearly, I am slowly getting used to disparate folders and locations.

How do you manage all your files and folders? Do you have your files across several paths and folders? How do you collate and share your workflow?

——————————————————————————————————-

I hope this article has gone some way in helping you understand the importance of UPDATES. If it has…please LIKESHARE or FEEDBACK the post. Thank you.

About the Author, – Dr Richard Haddlesey is the founder and Webmaster of English Medieval Architecture in which he gained a Ph.D. in 2010 and holds Qualified Teacher Status relating to I.C.T. and Computer Science. Richard is a professional Web Developer and Digital Archaeologist and holds several degrees relating to this. He is passionate about the dissemination of research and advancement of digital education and Continued Professional Development #CPD. Driven by a desire to better prepare students for industry, Richard left mainstream teaching to focus on a career in tutoring I.T. professionals with real industry ready skills that matter at The Training Room.

#ttrIT #ttrcareerinIT #ttrLearnToCode

Visit his Blog and Website

Read more about Dr Richard Haddlesey BSc MSc PGCE PhD

Enjoy this blog? Please spread the word :)