Hello World!

28 jan 2021

Warpnet has a new website! In this post we’ll give a behind-the-curtain look on the techniques we used to make our website good-looking, simple, and above all, secure. Special attention will be given to our efforts to get rid of as much JavaScript as possible, securing contact forms and the thoughts behind the new design.

Static website

We chose to create a static website because we wanted our website to be as secure and simple as possible. Since we had some prior experience with Hugo1 (for our internal Wiki) we decided to go with it.

Graceful degradation

We want our website to function correctly even when JavaScript is disabled, blocked or not working for some other reason, so we chose to use as little JavaScript as possible. Currently, the only page that uses JavaScript is the contact page. On this page, JavaScript is used for:

  • our secure contact form
  • the in-site map

Contact form

When JavaScript is disabled, backup content should be placed to inform the visitor about the lack of functionality. The easiest way to achieve this, is to include content in HTML <noscript> tags, that shows up when JavaScript is disabled in the browser. An example of how to achieve this is shown below:

<noscript>
    <style>
        .nonoscript {
            display: none;
        }
    </style>
    <!-- link redirecting to JavaScript-free form -->
</noscript>
<div class='nonoscript'>
    <!-- form that relies on JavaScript -->
</div>

However, this only works when JavaScript is blocked by the browser. If it is blocked by a firewall, this will not work and a non-functioning form is shown. Therefore, a better way is to hide the backup content and show the actual content using JavaScript:

<div class='noscript'>
    <!-- link redirecting to JavaScript-free form -->
</div>
<div class='nonoscript'>
    <script>
        document.querySelectorAll('.noscript').forEach((elem) => {
            elem.style.display = 'none'
        })

        document.querySelectorAll('.nonoscript').forEach((elem) => {
            elem.style.display = 'block'
        })
    </script>
    <!-- form that relies on JavaScript -->
</div>

So this is what we used in our website. (In case something is still not working for you, feel free to tell us about it so we can fix it.)

In-site map

Some functionality is impossible to implement without JavaScript, an example is the in-site map that makes use of LeafletJS. The map is placed in a ‘modal’ that relies on JavaScript. Since we were already using Bootstrap for its grid system (more on that later), Bootstrap’s modal was selected. However, BootstrapJS is 59KB of JavaScript and relies on jQuery which adds another 88KB of JavaScript. We did not want to ‘bloat’ our website with that much largely unused code, so chose to use Bootstrap-native’s modal-native.js2.

Checkbox “hack”

Another way to make a website work when JavaScript is disabled is to just not use it! A neat way to achieve functionality like modals and drop down menus is to make use of the so-called “checkbox hack”. The concept is simple;

  • add a checkbox with a connected label to your webpage
  • hide the checkbox input entirely using CSS
  • show content based on the checkbox’s status using a CSS sibling selector

The following (simplified) code is used to show the mobile menu:

<input id="navbarToggle" type="checkbox">
<div class="flex-column" id="navbarCollapse">
    <!-- ... -->
    <label for="navbarToggle">X</label>
    <!-- ... -->
</div>
#navbarCollapse {
    display: none;
}
#navbarToggle:checked ~ #navbarCollapse {
    display: flex !important;
}
#navbarToggle {
    display: none !important;
}

This way, our mobile menu works neatly without JavaScript. Go try it out, any feedback is appreciated!

SecureForms

Have you seen the contact page yet? To ensure good security and privacy we developed our own form mailer, SecureForms, that uses PGP to encrypt messages. Submitting a form is done in two steps. First, we validate your e-mail address to prevent both spamming of our inbox and people trying to falsify their identity. Next, is the submission of the actual form.

On arrival on the server, the form data is immediately encrypted using the public PGP key of the e-mail address we use for form processing. After this, we can safely mail the form data, because it can only be decrypted using the corresponding private key that is not available on any server. When sending the message, we sign it using a private PGP key to prove that the message originated from the form server.

SecureForms only uses JavaScript in the e-mail verification step. (We need it to implement the CSRF token.)

Design

With a new website comes a new design! We asked our friends at Concept7 to create a design that embodies Warpnet’s focus on technology. Using only HTML and CSS we converted this into a theme for Hugo. We use the Bootstrap grid to draw lines between every two columns. To prevent horizontal gridlines from making the text illegible, they are only added between section elements.

This is achieved using the following CSS:

.grid .col-2 {
    background-image: 
        repeating-linear-gradient(90deg, #ffffff40 0 1px, transparent 1px 100%);
    background-size: 16.6% 1px;
}
.grid section {
    border-bottom: 1px solid;
    border-color: #ffffff40
}

Besides the gridlines, a typical aspect of the new design is the logo in the background. Anyone that has ever visited our office has probably seen these large contours on the wall that make up our logo. If you have not, you might have an idea now, but you are of course welcome to come and have a look (when COVID-19 restrictions no longer apply).

Social trackers

One of the things that may catch your eye are the small logos in the footer underneath the Warpnet logo. Obviously, Facebook and Twitter are not something you’d expect from a privacy minded company like Warpnet. But have you tried clicking them yet?

Another thing you may have noticed is the absence of a cookie banner or pop-up. At Warpnet, we don’t like the practice of selling people’s private data. What websites you visit, how long you look at an image, which buttons you click and what blog posts you read are all private data. By not loading any external scripts that fingerprint your online behaviour, we make sure that Warpnet does not cooperate with the trend that big tech companies are tracking everyone everywhere.

Since this post is already quite long and this subject deserves a post of itself, let’s leave it at that. We thought it would be nice to know what happens behind the curtain and about the process that we went through when building our new website. We hope you enjoyed reading this, let us know what you think!


  1. Hugo is a static site generator written in the Go programming language, with a focus on speed and security. For more information about Hugo, see https://gohugo.io/ ↩︎

  2. Bootstrap-native makes use of native JavaScript in order to remove Bootstrap’s dependency on jQuery and to create faster, lighter and more secure components. For more information, see: http://thednp.github.io/bootstrap.native/ ↩︎