A while ago I applied for a post without realising it was for a senior position rather than a junior one.... It was the last day to apply when I found it so I didn't check - I just submitted my application.
In any case I was then given a test to do via GitHub - I was going to clone it but I realised perhaps adding my answers where they were find-able by others doing the same test might not be the best idea. I must have done the test correctly because I got to the interview stage which I didn't do so well in - I prepared for completely the wrong type of question. I worked pretty hard on this so I'd like for it to exist somewhere.
So! Here are my answers!
# Technical skills test
This front end development test is intended to cover a broad range of skills
required to deliver high quality government digital services. This includes:
* Accessibility
* HTML
* CSS
* jQuery and JavaScript
* Other best practices
Candidates are asked to perform this test remotely and submit their responses to the sender.
## Accessibility
1. Describe how you would implement the page available at http://calendar.parliament.uk
Focus specifically on not disadvantaging users of:
1. Assistive technology
2. Older/less featured browsers
Your answer should describe both how you would do this and describe what specific features
of HTML, ARIA, CSS and JavaScript you would use to achieve this.
---
Firstly it is important to use a logical structure for the DOM and decide on semantic elements for each section of the page.
For this page I can see a header, navigation, sub-navigation pages, breadcrumbs and then two main sections with an aside followed by a 'share' section and a footer.
While using HTML5 semantic elements such as `[aside]` is useful for those with accessibility needs this can mean that those using older browsers are unable to display the page correctly.
All pages with HTML5 elements should also be styled with `display:block` as well as include the W3C `html5shiv` javascript file to ensure compatibility across browsers.
**Navigation Elements**: Should use unordered lists and the `tab-index` attribute. As there are multiple `nav` elements on this page it may be less semantically confusing to define a number of navigation divs while also using the `aria role` attribute to make these easy to navigate.
**Calendar Elements**: Use `aria role` attributes for all `[div]` elements. Use CSS `:active` and `:focus` to identify where a user is on the page and ensure all browsers will be able to communicate that information to the user.
The date picker should be easy to tab through and use dropdowns for the month and year rather than making users pick a specific week from the last ten years.
Although HTML5 provides a `date` function this isn't supported by Firefox, Internet Explorer or Safari so a javascript datepicker should be included as a fallback.
Finally, when the date changes the information below should also change and use `aria-live` to alert the user to this change.
---
2. How would you implement a version of GOV.UK browse for a new digital service.
Your answer should:
1. identify, so far as possible, what GOV.UK have done to ensure accessibility and progressive enhancement
2. assume you're approaching this from scratch
---
_Note: I understand GOV.UK to be a web portal for a number of user questions, GOV.UK then answers those questions and directs users to another site that helps a user complete a related action (ex paying council tax or claiming a benefit)._
The current GOV.UK service uses many best-practice methods to ensure both accessibility and progressive enhancement.
Firstly, it's immediately obvious that a lot of time has been spent on the UX / UI design of the site.
The contrasting colour and reliance on text formatting and document structure rather than images are useful to all users in terms of reduced pay-load but also to users with accessibility-needs as there is less of the page to navigate through. The text is also easy to read and scalable.
The order of the navigation and the 'popular' section try to answer your query without the user scrolling down the page, and therefore without a screen-reader or keyboard-only user having to get very far down the page.
The page is structured in an ordered way and is easy to navigate through a keyboard while for screen-readers the least useful elements have `aria-hidden` attributes.
Finally, the head of the document includes a number of tags that allow older browsers to access the site.
If approaching a similar project from scratch the first step would be user research to find out what information users would want to receive and which questions they want answered.
For a service that must be accessible and bring a number of elements under one domain and search index the design is the most important element.
The design of the page must be clear, re-usable and uncluttered to ensure that questions can be best answered through this portal rather than another. The focus should be on providing a clear, plain and accessible interface rather than one with a cutting-edge design.
To that end a number of standards should be put in place after a heavy amount of research into what users want to get out of the platform.
After these standards the content and writing should also be a key focus of the project that answers questions directly rather than through jargon and technical language.
---
## JavaScript and jQuery
1. An exercise using jQuery is provided in test-jquery.html.
---
_Note: I was asked to include my answer in the document_
```
[!DOCTYPE html]
[html]
[head]
[script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"][/script]
[meta charset=utf-8 /]
[title]DOM manipulation exercise[/title]
[/head]
[body]
[h1]DOM manipulation using event delegation[/h1]
[p]Using event delegation write the jQuery or JavaScript that will hide the <li> element that is clicked on. Any subsequent clicks should have no effect.[/p]
[p]Please do not edit the HTML or CSS directly to achieve this.[/p]
[div]
[h2]First set[/h2]
[ul]
[li]HTML5[/li]
[li]CSS[/li]
[li][span class="highlight"]JavaScript[/span][/li]
[li]Ruby[/li]
[li]Django[/li]
[li][span class="highlight"]React[/span][/li]
[/ul]
[/div]
[script type="text/javascript"]
$("li").click(function () {
$(this).hide();
});
[/script]
[/body]
[/html]
```
---
2. If you saw this in a Pull Request, what would your advice be:
```
Array.prototype.split = function(i) { // Adds split to all arrays
return [this.slice(0, i), this.slice(i)];
};
```
---
* Move the comment to a new line.
* Change the name of the function to avoid confusion with `string.prototype.split`. Suggest `array.prototype.segment`
---
## CSS
1. What colour would each of the following elements be (Assume each pair of rules are targeting the same element)
```
h1 {color: red;}
body h1 {color: green;}
h2.grape {color: purple;}
h2 {color: silver;}
html ] body table tr[id="totals"] td ul ] li {color: maroon;}
// li has an id of answer
li#answer {color: navy;}
```
---
From the rules given those with greater specificity would determine the colour of the element:
```
body h1 {color: green;}
h2.grape {color: purple;}
html ] body table tr[id="totals"] td ul ] li {color: maroon;}
```
---
2.Given the HTML below, write a CSS3 rule that will give prepend the text ‘Tel:’ to the third list item.
You are not able to amend the HTML to achieve this.
```
[body]
[ul]
[li]JavaScript[/li]
[li]HTML[/li]
[li]Ruby[/li]
[li]Python[/li]
[/ul]
[/body]
```
---
My rule:
```
li:nth-child(3):before {
content:"Tel: ";
}
```
---
3.What changes would you suggest to make these CSS rules ready for a production environment?
```
[!DOCTYPE html]
[html]
[head]
[meta charset=utf-8 /]
[title]Test[/title]
[style type="text/css"]
#one { background-color: #000; }
.three { color: rgba(255,255,255,1); }
div ] span { border: 3px solid green; }
[/style]
[/head]
[body]
[div id="one"]
[div class="three"]
Hello [span]World![/span]
[/div]
[/div]
[/body]
[/html]
```
---
* Move the css into a new file
* Give the body a background colour
* Standardise the colour codes used. There doesn't seem to be a reason to use rgba colour codes.
3 digit hex could be used but if more code were to be added later 6 digit hex may be required.
```
#one { background-color: #000000; }
.three { color: #ffffff; }
div ] span { border: 3px solid #008000; }
```
---
4. How would you style all links to 'gov.uk' domains differently to other links in an application?
---
Assuming there are more gov.uk links than other links I would use:
```
a {color:green;}
a:not([href*="gov.uk"]) {color:blue;}
```
If there fewer gov.uk links than other links I would use:
```
a {color:blue;}
a[href*="gov.uk"] {color:green;}
```
---
## HTML
1. A test using HTML5 is provided in test-html.html within this repository.
Please amend the code and submit your changes as a pull request.
---
_Note: I was asked to include my answer in the document_
```
[!DOCTYPE html]
[html]
[head]
[meta charset= utf-8 /]
[title]DOM manipulation - Test 5[/title]
[style type="text/css"]
body {
font-family: sans-serif;
font-size: 1.5em;
line-height: 1.5em;
}
div {
margin-bottom: 1em;
padding: 1em;
background: #EFEFEF;
}
[/style]
[/head]
[body]
[h1][span class="first"]HTML5 test[/span][/H1]
[p]The HTML of this page contains a number of errors. Please amend the source code to remove these errors and paste an improved version into the worksheet.[/p]
[p]Please limit changes to errors that relate to HTML5 only. Do not:[/p]
[ul]
[li]Make changes that might fix an issue in XHTML, but are [strong]not relevant to HTML5[/strong][/li]
[li]Make stylistic changes that are not relevant to the [strong]specification[/strong][/Li]
[/ul]
[/Body]
[/html]
```
## Testing
1. What are the key things you need to test for on the front-end of digital services?
---
* Usability / functionality
* Accessibility
* Page Speed / Load Time (depending on audience connection speed)
* Browser compatibility (depending on audience browser)
* Mobile Compatibility
---
2. How do you approach testing the front end of applications?
---
I first make sure that everything is working as it should, tabbing through options to make sure the user path is clear and simple.
I use a different browser than I would usually do this in - Usually Internet Explorer and then Firefox with ad-blocker installed.
When possible I also ask a less-technically minded friend or colleague to test the application to make sure I'm not overlooking the obvious.
I then use Chrome Accessibility Development Tools to make sure everything that needs to have an `aria` label has one and the whole page can be navigated through the keyboard.
Once assured of basic functionality I then use Chrome Developer Tools to check for 3G connection speeds and common viewport sizes.
Using data gathered about the type of audience I will then check compatibility with any other browser or connectivity needs.
Finally I'll run the page through the W3 Markup Validator to check for missing tags or text and the Web Accessibility Checker for any final problems.
---
## Best practices
1. Is this good quality code? Provide a brief justification of your answer.
```
[button
type="button"
onclick="document.getElementById('xyz').style.color='red';"]
Click Me
[/button]
```
---
I wouldn't say this is good quality code.
As everything is being applied inline it would be difficult to reuse and re-apply this code.
The javascript and css should be moved to different files and applied to the element using either a class or id depending on how the button is used.
On the positive side, it's good that the developer has used the button element rather than a div and has used `type="button"` to show there is no form behaviour associated with the button for cross-browser compatibility.
---
2. Describe three ways to decrease page load time (answers may include perceived or actual load times)
---
1. Minify and combine external files:
Each external resource has to be requested by the browser. By combining files just before production, fewer files have to be loaded before the page can be displayed.
Minifying the files decreases the size of the file and thus the time it takes to download. Deleting superfluous code will also help reduce the filesize.
2. Optimise and scale image sizes using the `srcset` attribute:
Images are one of the biggest causes of page load delay as they can be very large files even when a file of that size is not necessary.
Here are some ways that optimising images can be done:
* Only use images when necessary - don't rely on images to make sense of a layout and use SVG elements when possible.
* Optimise images so they are of the quality and size necessary.
* `srcset` allows you to provide a number of images of different size and quality while allowing the browser to select the one most suited for the viewport.
As `srcset` is not currently supported by IE or mobile browsers other than Chrome so it's important to optimise and scale images despite this tag.
However `srcset` can be catered for by 82% of UK users as well as being part of the WHATWG living standard for HTML.
3. Optimise browser caching:
Each external file should include `cache-control` and `eTag` headers that tells the browser how long a resource can be cached for and check if the resource has changed since it was last accessed.
This will reduce page load time for users who routinely visit the site.
---
3. Why is it generally a good idea to position CSS `[link]` s between `[head][/head]` and JS `[script]` s just before `[/body]` ? Do you know any exceptions?
---
**CSS** is usually positioned between `[head][/head]` so that styles can be applied to `[body]` content as it loads.
If a stylesheet were loaded further down the page it may result in elements moving around or fonts changing as a user navigates the page.
I'm aware that HTML5 allows `[link]`s inside the body when dealing with different pages with some common elements but other large differences in order to prioritise those common elements but I've not come across an example of this being used so I'm unsure which situations to use this in.
**JS** is usually positioned just before `[/body]` as the files can sometimes be large.
Rather than waiting for the files to load placing them after the content of the page means a user will not be waiting for these files before they are able to view the page.
As these files usually augment the functionality of the page rather than define it loading content is prioritised. Where the file is central to the functionality of the page it is placed within the `[head]`.
It is also possible to place all files within the `[head]` but use `defer` and `asynch` tags to allow the main content of the page being loaded without waiting for the external files.
---
