The Problem

On the blog listing, I wanted to show a different number of posts on the first page (8) than the rest of the pages (9). Eleventy, the Static Site Generator I used to build this site, doesn't have a nice way to do this.

The solution

Future Post (aka this one)

I created a post that has a future date, of 1st January 2500.

---
title: 'Future Post that will be removed'
date: '2500-01-01'
tags: ['Future', 'Eleventy']
description: 'If you are seeing this, …
---
    

Filter out the future post

In order to do this I check if the posts date is not 1st January 2500.

{% if item.data.date != "2500-01-01" %}
  code that I want goes here
{% endif %}
    

Set a reminder to update in 2500

As I may want to post an article on 1st January 2500, I have set a calender reminder to fix this hack in the future.

Why 'Hello Mike…'

Well it was my good friend Mike that came up with the original idea for solving this:

I would approach this by having a dummy entry in whatever data you're paginating, either at the start or at the end, which has a property set to say that it should not be displayed. #hack @eleven_ty

Quote Source @PermittedSoc - Twitter

Array.some()

This method allows you to check that a value appears in an array and will return true or false.

Here I have a simple array of numbers.

let simpleArray = [1, 2, 3, 4, 5, 6]
  

I can use the .some() method to check if a value appears in the array.

simpleArray.some(2)
// returns true as 2 is in the array
simpleArray.some(7)
// returns false as 7 is not in the array
  

If a value in an array is an object

Real life is usually a little more complex so let me explain why I am using this to give more context

Use Case

I have an id which I have got from the url:

https://mysite.com/user/abc123 id = abc123

I have an array of users, my data:

const users = [
  {
    id: "abc123",
    name: "Dave",
    age: 52
  },
  {
    id: "def456",
    name: "Tom",
    age: 36
  },
  {
    id: "ghi789",
    name: "Dick",
    age: 27
  }
]
  

Now I want to check to see if the id appears in the users array

Solution

users.some(user => user.id.includes(id))
  

This uses the .some() method and inside we have an arrow function that breaks each object in the array into a user.

Then it looks in that user for an id (or object key) and then uses the .includes() string method to see if the id I got from the url is in the current user object that is being inspected.

How I am using this

So I am checking to see if the user exists in my array and if it is I am loading that into the page, if not I make an API call to get the user.

if (users.some(user => user.id.includes(id))) {
  // load the user into the page
} else {
  // call function to get the user
  getUser(id);
  // load user into the page
}
  

Further reading

• .some() array method MDN
• .includes() string method MDN
• .some() array method can I use
• .includes() string method can I use

Solution

So their Content Management System (CMS) is Wordpress, which is an Open Source CMS that powers almost 40% of all the websites in the world. Although there was no form functionality in the CMS.

There are a number of Form Plugins for Wordpress. The requirements that I had for this were:

• Free, to save on extra expense
• Full control of the code generated on the frontend
• Simple to use and embed in a page

Contact Form 7

The solution I opted for was Contact Form 7 as it met all the requirements, mostly.

It is not like many other form builders drag and drop, which can be easy for some users although you still need to know what you are dragging and dropping. It has fantastic documentation and gave me full control over the frontend HTML. this meant that I could make sure taht I was using the input elements that I wanted and make sure the from was easy to use and accessible.

The only downside to Contact Form 7 is that it does not store the form submission in the Wordpress Database. This may not be an issue if you just want the form to send emails. If however you do want to collect the data, then there is another plugin for use with Contact Form 7 that does exactly that, called Flamingo.

You can see the code I used to build the form on my github account.

• Contact Form
• Email content

Robots rock

Daft Punk, were commonly known via their Robot personas. Similarly websites also need a Robot to be discoverable.

To be more precise a robots.txt. This is a text file that lives at the root of a website that tells machines what to look for on the site and what not to look for.

In this file we tell the bots of the web what they are allowed and disallowed from seeing or indexing (storing for them to display).

By default with no settings the bots will just look at everything in your site. For areas you don't want them to go add a Disallow rule and then for other bots you can then Allow those areas back, see my example below. ^†

These bots are referred to as User-Agents and we can target all of them together with a wildcard * (asterisk), or naming them individually.

Here is the robots.txt for this site, below I shall explain what is going on.

User-agent: Twitterbot
Allow: /images/

User-agent: facebookexternalhit
Allow: /images/

User-agent: *
Sitemap: https://code-red.uk/sitemap.xml
Disallow: /images/
    

First of all I am telling the Twitter and Facebook's bot that it is OK to go ahead and look at all the files in the /images/ folder.

Secondly I m using the * (wildcard) to target every bot and tell them where my sitemap.xml is located. I then Disallow them all from indexing all files in the /images/ folder. A sitemap is just a list of all the pages, in your site, you want the bots to look at.

Humans after all

Daft Punk, were of course not robots, they were Humans after all. Just like websites are not created by robots they are created by humans.

We can add a humans.txt file to the root to show who are the real people that have worked on, contributed or helped on a site.

While there is no requirement or standard for creating a humans.txt, http://humanstxt.org/ has some guidelines on what you might include. For example:

• Team
• Technologies
• Thanks

Some companies will use it to advertise jobs too.

Below you can see the humans.txt file for this site.

# humanstxt.org
/* OWNER & DEVELOPER */

    Name:    Dave Letorey
    Email:   dave@code-red.uk
    GitHub:  https://github.com/dletorey
    Twitter: https://twitter.com/dletorey

/* SITE */

    URL:           https://code-red.uk
    Language:      en
    Doctype:       HTML5
    Fonts:         Helvetica Neue, Georgia, Lucida Console
    Compiled with: Eleventy
    IDE:           VS Code

/* LANGUAGES */

    HTML
    CSS (SCSS)
    JavaScript
    JSON
    Nunjucks
    XML
    YAML


                                
/* THANKS */
            
    CSS Skills: Chris Burnell
    URL: https://chrisburnell.com 
    Twitter: @iamchrisburnell

    Eleventy From Scratch: Andy Bell
    URL: https://piccalil.li
    Course URL: https://piccalil.li/course/learn-eleventy-from-scratch
    Twitter: @piccalilli_
    

Conclusion

Daft Punk were an amazing part of music history and their music has not gone away, they just won't be making anymore. I don't think this is that bad a thing as they'd been dormant for a while and perhaps now they will make more music on solo projects.

In order to make your site discoverable, you'll need a robots.txt file.

The bots/user-agents that I've been talking about are Search Engines (https://www.google.com/, DuckDuckGo, Yahoo, etc) or Social Networks. These are the most common, but there are more too.

In order to show appreciation for those working on your site you should include a humans.txt file.

Listen to the tracks that inspired this article

• Epilogue - Daft Punk
• Robot Rock - Daft Punk
• Human After All - Daft Punk

† Thanks

Thanks to Alistair Shepherd for helping me clarify the default behaviour.

What is HTML

HTML, or Hyper Text Markup Language, is the language of the World Wide Web.

Without HTML there would be no Social Media, there would be no online stores, there would be no Web.

In short HTML is the web.

Why HTML first?

Many of these modern platforms and sites are now built with JavaScript Libraries, so much so that Facebook built their own JavaScript Library called React. All of these Libraries, though, in the end output HTML.

Done correctly using these Libraries is not an issue. Although done wrongly a user could just be left staring at a blank screen.

This is a terrible situation, if you are building sites with content, such as a blog, recipe site, a store. You want these things to be discovered.

A search engine or spider will crawl the web, that's why it's called a spider. When it does this it will look at the HTML on your site and the content within that HTML. It will not run any JavaScript that is on your site, that's not what it's looking for. So if the HTML and content on your site is built with JavaScript the spider will not discover it. This is the worst SEO you could possibly have: no content.

This does not mean don’t use JavaScript, it means use JavaScript at the right time and for the right purpose, I shall write about this in the future.

HTML has meaning

In HTML there are things called elements, for example <p> represents a paragraph and <address> is used to display an address for a person or organisation. At the time of writing MDN says there are 142 different HTML elements.

Using the correct element tells the Browser, Search Engine, Assistive Technology (such as a screen reader), etc what the content really is and giving it meaning.

These meanings are what we call semantics of the information on web pages or web applications. Without using these elements you would then need to teach the Browser, Search Engine, Assistive Technology, what various parts of your content are for.

If you look at the code (right click and select View Source) behind many of the largest sites you’d be forgiven for not even realising that HTML has more than just <div> and <span> elements.

In this example, from twitter, we can gain absolutely no meaning at all and would need to start explaining to the tools what each bit is for.

By the way a <div> element is a block-level generic element that has no meaning. A <span> element is a inline-level generic element that has no meaning.

Developers give them meaning by applying classes or ids, such as:

<div class="header">

This is the whole reason HTML5 was developed during 2004-2008.

How HTML5 gives meaning

<header>
    <a href="..">
      <strong>Code Red Digital</strong>
      <time>
        Feb 23
      </time>
    </a>
</header>
<section>
    <p>Content of my tweet…</p>
</section>
<footer>
    Comment, Retweet, Like 
</footer>
    

Here I have simply refactored the code of a tweet to give it meaning, which means there is some basic understanding. What you can see here is:

• A <header> that contains the users name and date of the tweet
• A <section> that contains the contents of the tweet
• A <footer> that contains the comment, like and share functions

All of these sections now have a meaning.

HTML is Dumb/Smart

Why Dumb

It is often said that HTML is a dumb language, what this means is that if a tool looking at the HTML code (such as a browser) doesn't understand it, it just moves on.

Although more importantly does not break.

Why Smart

Alternatively it is also said that HTML is a smart language.

If a developer misses something out in HTML, for example a closing tag, unlike most other programming languages it does not care and just carries on.

If a user is using an old device, or browser they have no control over and that browser does not recognise a new HTML element it just moves on. Pretty smart eh?

HTML is Accessible

Semantic HTML is accessible out of the box. For example if on our web page or web app we create a button, like so:

<button>Click Me</button>

A screen-reader or other assistive technology will instantly know what it is and what it does.

If however we don't use semantics and create a button like this:

<div class="button">Click Me</div>

We then need to teach that assistive technology that this is a button and not some random HTML element.

I call this, Using the right tool for the right job. Creating a button from a <div> is like a builder using a screwdriver to cut a piece of wood.

HTML is Responsive

Again, out of the box, HTML is responsive. What this means is that the content of a web page will flow to fit the size of the device displaying it.

It is only when we start adding CSS and sizes that we break that inherent responsiveness.

Conclusion

Many thought leaders in the web industry will say, build with Mobile first philosophy and then build up.

I would take this further and build HTML First, there are still browsers out there that do not understand CSS and then build for mobile and then progressively add more features for more capable devices (this is called progressive enhancement, but I'll talk about that in a future post).

I also believe that the more that we use other new devices, such as smart speakers then HTML will again need to be front and center.

… Screen Readers

For a great many people when you talk about accessibility, they instantly think about Screen Readers. While Screen Readers are an important tool for those that have an impairment there are many other ways a user can be affected.

Hearing

You might think that reading a web page isn't going to affect hearing, but in today's modern web has rich media including video and audio. Subtitles and Captioning can help with this, I believe this should be mandatory. If Subtitles or Captions are not possible or appropriate a Text Description can help, this will also help with those on slow networks or less with data.

Visual

The majority of people think that Screen Reader users are blind. This is just not true, in fact the majority of blind people actually have some sight. The best thing that we can do for Screen Readers are:

• Use the correct HTML elements
• Write semantic HTML
• Use Aria Landmark Roles
• Use large text
• Consider contrast ratios of text and background

Colour Blindness

Colour Blindness affects about 8% of all men and 0.6% of women and comes in many different types, the 3 main ones are:

• Deuteranopia (common)
• Protanopia (Rare)
• Tritanopia (Very Rare)

I use a tool called Color Oracle for testing my web pages for colour blind users, you should consider looking at what your site looks like for user with Colour Blindness. You can also get contrast score in the browsers dev tools.

Dexterity

Not all of our users have the ability to use a mouse to navigate a web page, some of them have fat fingers. While not actually a disability it does make it difficult to hit small targets close together on touch devices.

Dexterity is about making your site easy to use for those with accuracy problems. Having small buttons makes it difficult to target with a mouse, especially if the elements are not laid out semantically.

At work I use a mouse as little as possible, opting for Keyboard Shortcuts and tabbing through forms and I’m frequently disappointed.

The best things we can do for users with dexterity problems are:

• Use :focus styles - this is not hard and you probably already have :hover styles, although these may not be appropriate
• Use the correct HTML elements
• Write semantic HTML
• Don't re-order elements with CSS
• Never mess with tabindex

Cognitive

This affects a user's ability to understand. The issue most associated with this is dyslexia. Making the content easy to read and understand, without using complex terms. Using sans serif fonts are easier to read, users who have severe dyslexia will often override your stylesheets with their own. The British Dyslexia Association has a fantastic Dyslexia Style Guide (PDF).

… Guidelines

There are guidelines that help us to check our sites for accessibility issues. These, as the name suggest, are a guide and only following a set of predefined checkpoints doesn't mean that your site is truly accessible, it means that you passed those checkpoints.

Saying that, they can still be a good guide. There is a great tool called axe, that I use regularly.

Section508 (1194.22)

While this standard covers all areas of a11y there is a section of it, 1194.22, which covers Web-based Intranet and Internet Information and Applications. The rest of the standard covers areas such as:

• Software Applications & Operating Systems (1194.21)
• Telecommunication Products (1194.23)
• Video & Multi-media Products (1194.24)
• Self-Contained, Closed Products (1194.25)
• Desktop & Portable Computers (1194.26)
• Functional Performance Criteria (1194.31)
• Information Documentation & Support (1194.41)

The bulk of 1194.22 has not been updated since 2001, a time when the web we created was a very different beast. In fact, some of the recommendations I looked at talk specifically about table-based layouts. This got me thinking about perhaps it’s about time that the US should consider using, WCAG, the same standard used by the rest of the world and recommended by W3C. Further reading/research led me to discover that the United States Access Board, 18 January 2017, published a Final Rule.

The Final Rule, outlined the changes that were to be made to section508. The main one, affect those who build websites and web-based applications, is Incorporation of the Web Content Accessibility Guidelines (WCAG). This came into effect as of 18 January 2018. This is a great leap forward for a11y in the US, many of the sites that I tested last week, using HTML CodeSniffer, for section508 would highlight the occasion error or warning. When testing the same sites against WCAG AA, they would highlight considerably more errors or warnings.

WCAG

WCAG is a more universal standard, created by the W3C's WAI (Web Accessibility Initiative). WCAG is a standard that originates from 1999 (WCAG 1.0), the WAI have just released the First Public Working Draft for WCAG 3.0.

… For the disabled people

Making sites accessible for those with accessibility issues is great UX and make our sites better for all. The argument, "we don't have blind users on our site", just does not wash. You have no idea what impairments your users have or how they're interacting with your site. Google Analytics can tell us many things about our users, but can't tell if they are using a screen reader, keyboard, mouse, braille keyboard to interact with our sites.

There are many times when a11y helps normal users:

• Due to my dyslexia I often get my computer to read long blog posts to me
• With old age comes:
  • Dexterity Issues
  • Hearing Issues
  • Visual Issues
  • Cognitive Issues
• When I have no headphones on public transport, captions help me watch videos
• Captions can also help with strong accents
• While drunk/intoxicated, an easy to read/simple site can aid understandability
• If a right-handed person breaks their arm and has it in a cast using a mouse or touch device becomes more difficult.

The Microsoft Inclusive Design site, is a fantastic resource, especially their Inclusive Toolkit Manual, for understanding Permanent, Temporary and Situational disabilities. Seren Davies, added a Cognitive section to their Inclusive Toolkit Manual.

Further Reading/Learning

I can't recommend highly enough Laura Kalbag's Accessibility for Everyone in my opinion this book is a game changer and anyone who works in the web industry should read this.

Seren Davies' talks on accessibility are fantastic:

• Death to Icon Fonts - this talk made github change their site
• Accessibility is more than just supporting screenreaders

People to follow

Want to learn more about a11y, then I recommend you follow, as a start, these people on twitter:

• Léonie Watson
• Steve Faulkner
• Adrian Roselli
• Seren Davies
• Laura Kalbag

Whoops

It is reported that the www was a mistake. It was originally meant to refer to the World Wide Web project page at CERN (Conseil européen pour la recherche nucléair) and info.cern.ch was meant to be the home page for CERN, although the DNS records were never switched. Subsequently many organisations followed suit and www became the norm.

Douglas Adams

Douglas once quipped:

The World Wide Web is the only thing I know of whose shortened form takes three times longer to say than what it’s short for

Douglas Adams www pronunciation

This is because World Wide Web has 3 syllables and double-u double-u double-u has 6.

Why?

So why do people/companies/organisations use www in the URL of their site, well simply because that's how the first site did it.

What, should you do?

Well, technically, really it doesn't matter.

The way I think of it is what do you say out loud when you tell someone the URL of your site, I say - code-red.uk (that's code dash red dot uk). I, personally, would never say double-u double-u double-u dot code dash red dot uk.

How to decide?

Well if you're a company or organisation that has created loads of printed and digital materials, with either www or non-www then choose that way, the important thing to do is create the redirect on your web server.

Logo starting point

HTML

<header>
    <svg>…</svg>
  </header> 
  

CSS

header {
    position: relative;
    top: 0px; left 0;
    height: 45px;
    width: 100%;
    background-color: #D0021B;
    padding: 5px;
    margin: 0 0 0 27px;
  }
  
  svg {
    position: absolute;
    top: 1px; left: -30px;
    z-index: 10;
  } 
   
  header svg {
    transform: rotate(90deg);
  }  

Explanation

I want the header to start half way through the circle in the logo hence the margin-left of 27px. As the header has this margin then the svg needs a left position of -30px. I want the Logo to be on top of the header so gave it a z-index of 10. I have also set the svg in the header to rotate 90º clockwise.

Logo ending point

HTML

<header class="open">
    <svg>…</svg>
  </header> 
  

CSS

header {
    position: relative;
    top: 0px; left 0;
    height: 45px;
    width: 100%;
    background-color: #D0021B;
    padding: 5px;
    margin: 0 0 0 27px;
  }
  
  svg {
    position: absolute;
    top: 1px; left: -30px;
    z-index: 10;
  } 
   
  header.open svg {
    transform-origin: 28px 28px;
    transform: rotate(0deg);
  } 

Explanation

When the menu is open, the header has a class="open" and the logo will be in a horizontal position. It needs to rotate 90º anit-clockwise hence transform: rotate(0deg) which is going from 90º to 0º. As I want the rotation to happen in the centre of the circle in the logo I need to move the place where it rotates around, aka the origin, transform-origin: 28px 28px. With out this the default is to rotate in the centre of the image/svg.

Menu open state

HTML

<header>
    <button class="hidden" name="menu">Menu☰</button>
    <nav id="menu">
      <ul>
        <li>Ethos</li>
        <li>Services</li>
        <li>Work</li>
        <li>Case Studies</li>
        <li>Blog</li>
        <li>Contact</li>
        <li><a href="#">Close X</a></li>
      </ul>
    </nav>
  </header> 

CSS

button.hidden {
    color: #D0021B;
  }
   
  nav {
    margin-top: -40px;
    margin-left: -32px;
  }
   
  nav ul {
    background-color: #D0021B;
    color: #FAF9F9;
    font-family: 'Courier New';
    Font-weight: 700;
    font-size: 2em;
    list-style: none;
    margin: 23px 0 0 -27px;
    padding: 35px 10px 10px 33px;
    border-radius: 0 0 23px 0;
  }
   
  nav ul a {
    color: #FAF9F9;
  }
   
  nav ul a:hover {
    background-color: #FAf9f9;
    color: #D0021B;
  }  

Explanation

This is all pretty simple the margin top and left are to position the menu around the header. The button is hidden while the menu is open.

Menu hidden state

HTML

<header>
    <button name="menu">Menu☰</button>
    <nav class="hidden" id="menu">
      <ul>
        <li>Ethos</li>
        <li>Services</li>
        <li>Work</li>
        <li>Case Studies</li>
        <li>Blog</li>
        <li>Contact</li>
        <li><a href="#">Close X</a></li>
      </ul>
    </nav>
  </header> 

CSS

button {
    background-color: #D0021B;
    color: #FAF9F9;
    font-family: 'Courier New';
    font-size: 2em;
    Font-weight: 700;
    text-decoration: underline;
    border: none;
    margin: 5px 0 0 30px;
    cursor: pointer;
  }
   
  nav.hidden {
    max-height: 0;
  } 
  

Explanation

In this instance the button is displayed and the nav hidden, this is done by setting the max-height: 0;. I am displaying the word "Menu" as I don't think that the 3 horizontal lines (☰), aka hamburger menu, is good enough for accessibility purposes.

Click/touch interaction and recognition

HTML

<header>
    <button id="menuButton" onclick="menuToggle()" name="menu">Menu☰</button>
    <nav class="hidden" id="menu">
      <ul>
        <li>Ethos</li>
        <li>Services</li>
        <li>Work</li>
        <li>Case Studies</li>
        <li>Blog</li>
        <li>Contact</li>
        <li><a href="#" onclick="menuToggle()">Close X</a></li>
      </ul>
    </nav>
  </header> 

JavaScript

const menuButton = document.querySelector("#menuButton");
  const nav = document.querySelector("#menu");
  const header = document.querySelector("header");
   
  function menuToggle() {
    menuButton.classList.toggle("hidden");
    nav.classList.toggle("hidden");
    header.classList.toggle("open");
  }  

Explanation

In the HTML I have added an id="menuButton" to make it easy to target incaase there are other buttons on the page, and an onclick event listener to the bnutton and close link.

In the JavaScript I am setting up 3 variables:

• menuButton
• nav
• header

I have then created a function thattargets the 3 varibales and toggles the classes on or off depending on their current state. For example if there is no class="hidden" then it adds it and if the is a class="hidden" then it removes it.

Animate logo

CSS

header svg {
    transform-origin: 28px 28px;
    transform: rotate(0deg);
    transition: transform 2s ease;
  } 

Explanation

To the svg style I have added a transition property. This tells it that any transform should take 2s (seconds) and ease (start slowly accelerate end slowly).

Animate menu

CSS

nav {
    max-height: 500px;
    transition: max-height 2s ease;
    overflow: hidden;
    margin-top: -40px;
    margin-left: -32px;
  }
   
  nav.hidden {
    max-height: 0;
    transition: max-height 2s ease;
  }  

Explanation

Here I have added a max-height: 500px; to the nav this is an arbitary value that is larger than the menu will be so that the is a value to transition upon. Then I have a transition: max-height 2s ease; which performs the transition on the max-height property for 2s (seconds) and eases.

Add delays

CSS

header.open svg {
    transform-origin: 28px 28px;
    transform: rotate(-90deg);
    transition-delay: 0s;
  }
   
  header svg {
    transform-origin: 28px 28px;
    transform: rotate(0deg);
    transition: transform 2s ease;
    transition-delay: 2s;
  } 
  
  nav {
    max-height: 500px;
    transition: max-height 2s ease;
    transition-delay: 2s;
    overflow: hidden;
    margin-top: -40px;
    margin-left: -32px;
  }
   
  nav.hidden {
    max-height: 0;
    transition: max-height 2s ease;
    transition-delay: 0s;
  } 

Explanation

So here I want the following to happen:

• On menu open:
  • Logo folds up
  • Menu opens down
• on menu close:
  • Menu closes up
  • Logo folds down

The logo folding up should happen immediately, so no delay, transition-delay: 0s; when that has complete the menu opens down transition-delay: 2s; (this is 2 seconds as that is how long the first part takes).

The menu closing up should happen immediately, so no delay, transition-delay: 0s; when that has complete the logo folds down transition-delay: 2s;.

Fallback for no JavaScript, prefers-reduced-motion or no transition support

It is really important to deal with the following situations:

• The user has set perfers-reduced-motion, there are a number of reasons this may be enabled, such as:
  • Users may suffer with a condition where too much motion can induce migraines
  • User may have disabled animations due to performance
• The browser they are using may not support animations
• The browser may have JavaScript disabled

In these, and many other, situations we should provide a fallback

HTML

<html class="no-js">
    <head>
      …
      <script>
        document.documentElement.classList.remove("no-js");
      </script>
    </head>
    <body>…</body>
  </html>  

CSS

@media (prefers-reduced-motion) {
    nav.hidden 
      max-height: 500px;
    }
    header svg {
      transform: rotate(-90deg);
    }
  }
   
  @supports not (transition) {
    nav.hidden {
      max-height: 500px;
    }
  }
   
  .no-js nav.hidden {
    max-height: 500px;
  }
   
  .no-js header svg {
    transform: rotate(-90deg);
  } 

Explanation

In the HTML there is a class="no-js" applied and removed automatically if JavaScript is enabled, if not I can target this class for .no-js nav.hidden & .no-js header svg.

The media and supports queries can also be used to see if prefers-reduced-motion is enabled or is the browser does not support transition.

Full working example

See the Pen Code Red Logo Rotate with fallback by Dave Letorey (@code-red-uk) on CodePen.

What is a favicon

A favicon is a small image that sits in the tab of your browser, usually the company logo.

What is an SVG

An SVG is a Scalable Vector Graphic, and more importantly is a text file that uses circles, rectangles, paths, text, etc. This means that the file can be:

• much smaller that a bitmap type image
• Scalable, you can enlarge it without losing definition
• Crisp at any size
• Text inside can be read by screen readers and is selectable

This is great for logos and simple images, although complex images can also be created with SVGs.

What is Dark Mode

Dark mode is a system setting that allows a user to choose whether to have dark text on light background (Light Mode) or light text on dark background (Dark Mode). This setting can be set at multiple levels:

• Operating System
  • MacOS
  • Windows
  • Android
  • iOS
• Application
  • Twitter
  • Instagram
• Website
  • Stuff & Nonsense
  • Chris Burnell

Enabling Dark Mode

This is different for each Operating System:

• Windows 10+
• Android 11+
• iOS 11+
• MacOS Mojave (10.14)

Using Dark Mode on a website

CSS has a media query that checks what color scheme a user prefers @media (prefers-color-scheme: dark) . This allows you to check what the users preference is and load different styles for light or dark.

body {
  background-color: white;
color: black; 
} 
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}

This says make the background white and text color black, but if the user perfers a dark color scheme make the background black and the text color white.

This media query has good support on all modern browsers and for those that do not support it it will just use the default white background with black text.

Using SVG as a favicon

At the time of writing not all browsers support SVG favicons, although this is still not a reason for not doing it. Again browsers are awesome with HTML and CSS, if it doesn't recognise it, it just moves on so we can add a fallback.

<link rel="icon" type="image/svg+xml" href="./images/favicon.svg">
<link rel="alternate icon" href="./images/favicon.ico">
<link rel="mask-icon" href="./images/favicon.svg">

The first line sets the icon to an SVG.

The second line sets an alternate icon as a ICO for browsers that do not recognise SVGs for favicons.

The third line is for Safari on desktop and iOS as the support SVG favicons is limited to pinned tabs only.

Safari 9+ has support for "pinned tab" SVG icons, but this requires an unofficial rel="mask-icon" to be set and only works for all-black icons on Pinned Tabs. - https://caniuse.com/link-icon-svg

Dark Mode in SVGs

Since we can embed CSS inside <style></style> inside an SVG we can also check inside the SVG if the user prefers-color-scheme: dark; .

Normal SVG

Here we have a normal SVG with the fill set inline:

<svg width="866px" height="866px">
  <title>Company Logo</title>
<desc>Red Circle with forward slash surrounded by pointy brackets</desc>
<circle fill="#D0021B" cx="433" cy="433" r="433"></circle>
<text font-family="Courier New" font-size="200" font-weight="bold" letter-spacing="13.3333333" fill="#FAF9F9">
&lt;/&gt;
</text>
</svg>

In here we are declaring the color of the circle and text inline with fill.

SVG with a style tag

Here we have an SVG with <style></style> tags to declare the fill color:

<svg width="866px" height="866px">
<style>
    circle {fill: #D0021B;}
text {fill: #FAF9F9} 
</style>
  <title>Company Logo</title>
<desc>Red Circle with forward slash surrounded by pointy brackets</desc>
<circle cx="433" cy="433" r="433"></circle>
<text font-family="Courier New" font-size="200" font-weight="bold" letter-spacing="13.3333333">
&lt;/&gt;
</text>
</svg>

In here we are declaring the color of the circle and text in the <style></style> tags.

SVG with a style tag and prefer-color-scheme media query

Here we have a media query within the <style></style> tags of the SVG  to declare the fill color for users who prefer dark color scheme:

<svg width="866px" height="866px">
<style>
    circle {fill: #D0021B;}
text {fill: #FAF9F9} 
@media (prefers-color-scheme: dark) {
      circle {fill: #FAF9F9;}
text {fill: #D0021B;} 
}
</style>
  <title>Company Logo</title>
<desc>Red Circle with forward slash surrounded by pointy brackets</desc>
<circle cx="433" cy="433" r="433"></circle>
<text font-family="Courier New" font-size="200" font-weight="bold" letter-spacing="13.3333333">
&lt;/&gt;
</text>
</svg>

In here we are declaring the color for prefers-color-scheme: dark of the circle and text in the media query.

Examples of SVG Favicons in Light and Dark mode

Light Mode

Dark Mode

= single equals

This 1 is easy to understand, it's used to set a variable. For example var age = 50; .

As we know there are 3 ways to declare a variable:

• var
• let
• const

The first 2, var & let , can be reassigned (changed), where as const can not and if you try to you'll get an error:

Uncaught TypeError: Assignment to constant variable.

var is the old way of declaring variables, before the advent of ES6. Since then we have had 2 ways to declare variables let for variables that can change and const for variable that don't.

== double equals & === triple equals

Both of these are for checking if a value is equal to something. For example is age equal to 50:

• age == 50;
• age === 50;

So why the need for both?

While it would appear that these two versions are the same they technically are not === triple equals is much stricter, so I'll start with that.

=== triple equals

As this is the stricter of the two types of equals, it checks not only the value but also the type of variable:

Variable as a number

> let age = 50;
> age === 50;
< true
> typeof age;
< "number" 

Variable as a string

> let age = '50';
> age === 50;
< false
> typeof age;
< "string" 

with == double equals

> let age = '50';
> age == 50;
< true
> typeof age;
< "string" 

It is recommended that === triple equals is used in the vast majority of cases as you'd want to make sure that not only the value is the same but also the type of variable is the same.

== double equals

There is a use for the less strictness of == double equals and this is when we want to check if a varible does not have a value, either null or undefined:

> let empty;
> empty;
< undefined; 
> empty == undefined;
< true
> empty == null;
< true 

This will return true for both undefined and null .

> let empty;
> empty;
< undefined; 
> empty === undefined;
< true
> empty === null;
< false

Where as === triple equals will return false for null.

Conclusion

• = single equals is used for setting the value of variables
• == double equals & === triple equals are used to check if a variable is set to something
• === triple equals use this, almost, always to check if a value equals something
• == double equals use this to check if a variable is either undefined OR null

Quotes in JavaScript

There are 3 different quotes that can be used in JavaScript to declare strings, settings, etc. They are:

• Single quotes - '
• Double quotes - "
• Backticks - `

Issues with quotes

It's easy to declare a variable in JavaScript:

const myVariable = "Whatever I set this to";

This is all good until you want to set a string with double quotes within it:

const myVariable = "Dave said: "Hello World"";

What happens here is the second " , just before Hello closes this string and we will get an error Uncaught SyntaxError: Unexpected identifier .

This can easily be solved by using ' (single quotes) to declare the variable string with the double quotes within them:

const myVariable = 'Dave said: "Hello World";'

This is great and works until our string contains an apostrophe:

const myVariable = 'Dave's friend said: "Hello World"';

This time the apostrophe in Dave's stops the string and we again the same error Uncaught SyntaxError: Unexpected identifier .

Again there is a way to fix this by escaping the internal quotes, escaping is done by placing a backslash before the quote:

const myVariable = 'Dave\'s friend said: "Hello World"';

With the advent of ES6 in 2015 we can now also use ` backticks. This means that there will be less need to escape as backticks are just much less used.

const myVariable = `Dave's friend said: "Hello World"`;

Other advantages of ` backticks

Multi-line strings

While multi-line strings can be created without ` backticks, by escaping the end of the line:

const multiLineString = 'This is \
a multi-line \
string'; 

When the string is output on a single line:

>  multiLineString
< "This is a multi-line string"

Using ` backticks we can just write the multi-line string:

const multiLineString = `This is 
a multi-line 
string`;

This might not seam like something that you'll want to do but sometimes we want a string that is a block of code:

const myHTML = `
<ul>
   <li>one</li>
   <li>two</li>
   <li>three</li> 
  </ul>
`;

This will return the multi-line string correctly:

> myHTML
< "
 <ul>
   <li>one</li>
   <li>two</li>
   <li>three</li>
 </ul> 
" 

Interpolation

/ɪntəːpəˈleɪʃ(ə)n/
noun

1. the insertion of something of a different nature into something else.
2. a remark interjected in a conversation.

What this means is that we can inject other variables into our strings using the syntax ${myVariable} . For example:

const myName = `Dave`;
const myAge = 50;
const myHobby = `Coding`;
const sayDetails =`My name is ${myName} I am ${myAge} years old and my hobby is ${myHobby}.`;

Previously this had to be done breaking the string and using + plus to add in the variables and restarting the string:

const myName = `Dave`;
const myAge = 50;
const myHobby = `Coding`;
const sayDetails = "My name is " + myName + "I am " + myAge + " years old and my hobby is " + myHobby + ".";

Both of these examples will output:

My name is Dave I am 50 years old and my hobby is Coding.

When injecting variables into strings using interpolation you can also perform maths on them. For example:

const myName = `Dave`;
const myAge = 50;
const sayDogYears = `My name is ${myName} I am ${myAge} years old, although in dog years I would be ${myAge * 7} years old.`

The output of sayDogYears would be:

"My name is Dave I am 50 years old, although in dog years I would be 350 years old."

ESLint

I use ESLint with VS Code to check my code is valid while I write it, as probably many other do too.

I have created a config that changes ' (single quotes) and " (double quotes) to ` backticks.

This is done by editing the .eslintrc file in VS Code, a configuration file for the setting of ESLint:

 "rules": {
"quotes": [
"error",
"backtick"
]

This adds a rule for quotes, which returns either an error or warning and then has a setting of what to make sure the quotes are set to in this case a backtick.

To disable ESLint in a file you can just add a comment at the top of the JavaScript file:

// eslint disable

Issue

Although there is an issue that at present I can't fix, so any help would be awesome.

If I have single quotes, when I save they are converted to backticks correctly. When I have double quotes, when I save they are converted to single quotes. Which means that I have to save twice to change double quotes into backticks.