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.

Please follow and like us:

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.

Please follow and like us:

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

Please follow and like us:

I don’t wanna be Cyber Attacked – what can I do?

A question I often get asked is should I accept all these annoying updates from Microsoft.

YES! Is the short answer, and really the only answer, but many don’t or won’t?

OK, so there are caveats. If you only connect to your own network at home, never use the World Wide Web, never do anything that requires passwords and do not use internet banking, then no, you do not need to update. If you do, however, you really should!

In a recent whitepaper, DUO* suggested that over 65% of devices running Microsoft Windows are running the outdated Windows 7 released back in 2009. The operating system was withdrawn from support in January 2015 as it was too vulnerable to attack, although, Microsoft will still release minor security fixes until 2020. That, removal of support, was over two years ago, so if you are still running Windows 7 and accessing the World Wide Web, you are extremely vulnerable to attack! Microsoft even offered a free upgrade to the more robust Windows 10 for free, yet people still did not switch. I appreciate that people still like Windows XP and Windows 7, but they are just no longer safe or relevant in today’s online world. The software is changed and updated for a reason, it is not just to make money – after all, they gave it away for free – it is to plug the data holes and keep you safe online. This is not just a problem with out of date Windows devices, it is also the same for Android and iOS on Macs. Yes, the Mac is just as vulnerable to attacks**, it is just with about 7% of the P.C. market, you tend to hear less about it***.

  • If you continue to use Windows XP now that support has ended, your computer will still work but it might become more vulnerable to security risks and viruses. Internet Explorer 8 is also no longer supported, so if your Windows XP PC is connected to the Internet and you use Internet Explorer 8 to surf the web, you might be exposing your PC to additional threats. Also, as more software and hardware manufacturers continue to optimize for more recent versions of Windows, you can expect to encounter more apps and devices that do not work with Windows XP. —Microsoft

Now, if you take your “old” device into work to connect to their network, you are now making your entire company vulnerable to attack! Once you open a port from your device to the work intranet or Wi-Fi, you are giving attackers – via your outdated software – instant access to the network. Not only that, you are allowing a would-be attacker easy access to an otherwise secure business network. At the very least, everything you can access an attacker can also access. If they are sophisticated, they can potentially gain access to all the network. All this, just because you really like older versions of Windows! At my former place of work (a secondary school) a teacher brought in their old XP laptop and opened an email, they received from a person they did not know. Unwittingly, by opening that email on the school network, they introduced ransomware onto the network. This encrypted the entire school network and all drives. For nearly a week, the school network was unusable while the technicians worked to restore previous network backups. When the system was eventually restored, all the recent files people had been working on since the backup were lost. Obviously, the school did not pay any ransom, but only because they back up the system files twice a week; had they not have done – there would have been no way to restore the files without paying the ransom and getting the unlock code.

In the light of recent cyber attacks, in May 2017 –  Microsoft has come out and said this is a “wake-up call” and reiterates the need to install their security patches as, and when, they are released.

  • Ransomware is a type of malware that prevents or limits users from accessing their system, either by locking the system’s screen or by locking the users’ files unless a ransom is paid. More modern ransomware families, collectively categorized as crypto-ransomware, encrypt certain file types on infected systems and forces users to pay the ransom through certain online payment methods to get a decrypt key.https://www.trendmicro.co.uk/vinfo/uk/security/definition/ransomware

I am certainly not trying to imply that, had the user been using an updated version of Windows 10 that that would never have happened. Instead, I am trying to add to the discussion that the often overlooked threat to network security is internal human errors****. However, “User Behavioural Analytics” are beyond the scope of this discussion.

Summary

Keeping your system up to date with the latest security patches and software add-ons remains a highly important step in combating hackers.

In short —

INSTALL and UPDATE

  • Your Operating System
  • Your browser
  • Your browser add-ons
  • Anti-Virus software
  • Anti-Malware software
  • Anti-Spyware software
  • Firewall

·        Do NOT open unknown emails and attachments EVER!

Some people tend to think that if your device is set to download and install updates alongside a disk defragmentation automatically at the default time of 03:00AM, then that is enough to keep them safe if they turn their machine off before bed. Well,…are you saying you expect the device to wake up at 03:00 and turn itself on, connect – by itself – to the internet, download and install updates/patches/drivers/code then check your hard drive for errors – before turning itself off again and going back to sleep? I’m sorry but it doesn’t!


 

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 skills that matter.

#ttrIT #ttrcareerinIT #ttrLearnToCode

Visit his Blog and Website

Read more about Dr Richard Haddlesey BSc MSc PGCE PhD

Bibliography

*https://duo.com/resources/ebooks/the-2016-duo-trusted-access-report-microsoft-edition

**https://nakedsecurity.sophos.com/2016/09/02/patch-now-recent-ios-vulnerability-affects-macs-too/

***http://www.macworld.co.uk/how-to/mac-software/do-macs-get-viruses-do-macs-need-antivirus-software-3454926/

**** The Essential Guide to Behavior Analytics – www.balabit.com

Please follow and like us:

So, what is CPD in I.T.?

I guess we should start with the definitions?

CPD generally means Continuing Professional Development but can also mean Continuing Personal Development as it often relates to the individual within their professional sphere. For the purposes of this article, we will stick to the previous definition of professional development.

I.T. relates to several strands

  • Information Technology
  • Information Communications Technology (ICT)
  • Computer Science

I.T. essentially encompasses industry professions who work with computers and other digital devices and technologies (sorry if I missed any out).

 

So then, CPD is providing evidence of “continued professional development” within your industry. Often this is done by recording and documenting that you are actively increasing your subject knowledge, understanding and ability beyond your initial training or certification. It is in by no means restricted to technical knowledge as it is arguably just as important to enhance your non-technical skills to effectively communicate your technical abilities.

As many of us are aware, the I.T. industry is constantly evolving and growing exponentially. Every year we are grieved that our high-end smartphone has just been outdated by the latest release that boasts greater speeds, larger screen, higher definition images, more RAM, more – moreness if you like? However, it is not just the hardware that evolves, it is also the software, apps and operating systems that evolve. This may be the result of the manufacturer addressing new security issues or increasing functionality based on customer feedback. Whatever the reason, it is clear that anyone who works in the I.T. industry needs to either stay up-to-date or ahead-of-the-game in order to stay employable and viable.

Within the field of Web Development, for instance, we are now enjoying the increased functionality and responsiveness of HTML5 and CSS3 alongside JavaScript to create content-rich websites that are viewable on all the various digital media devices. If you are still coding using XHTML with strict DTDs for instance, your ability to find billable work in Web Design is going to be limited. However, if you chose to update your knowledge and skills using CPD sites such as the sites below – you are clearly going to impress future clients or employers.

 

Clearly then, whether you are an amateur web developer trying to add E-commerce features to a WordPress site or the lead coder for Ubisoft – keeping up to date with advances in code, protocols and technological developments is crucial to your success.

I hope this article has gone some way in helping you understand the importance of Continuing Professional Development both within your chosen profession and your personal life too? If it has…please LIKE, SHARE or FEEDBACK the post. Thank you.

 

About the AuthorDr 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 skills that matter. Thus, catering more for the individual learner’s needs than the National Curriculum   in schools is capable of.

 

Visit his Blog and Website

 

Read more about Dr Richard Haddlesey BSc MSc PGCE PhD

Please follow and like us: