Frontend Tips and Tools
A collection of tips and tools that I use my web applications which enhance the frontend development
Table of Contents
- Preventing browsers auto-completing a field
- Preventing browsers from trying to translate the web page to another language
- Define a blank favicon within your HTML head
- Validating HTML
- Preventing users opening developer tools
- Preventing users printing your applications content
- Joined bullet point lists with CSS
- Using custom markers within lists using CSS
- Manipulating placeholders with CSS
- Send AJAX request as a HTTP POST with an Authorization Request Header
↑Preventing browsers auto-completing a field
Sometimes it’s important to not show the user previous search values. When you need a distraction free input field, so the user can concentrate on the data they are currently entering, use the autocomplete attribute of an HTML field and set the value to off.
1<input id="q" name="q" size="12" minlength="10" maxlength="10" required autofocus autocomplete="off">
↑Preventing browsers from trying to translate the web page to another language
If you need to prevent browsers from trying to auto translate you web page into another language, and you’ve already the lang attribute then set the translate attribute to no.
1<!DOCTYPE html>
2<html lang="en" translate="no">
↑Define a blank favicon within your HTML head
If your web application doesn’t have a specific favicon and you want to prevent lots of 404 errors within your server log files, then include an in-line blank favicon like:
1<link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAF0lEQVRIx2NgGAWjYBSMglEwCkbBSAcACBAAAeaR9cIAAAAASUVORK5CYII=" rel="icon" type="image/x-icon" />
↑Validating HTML
This seems to have dropped out of fashion. I don’t hear web developers talking about it much. I still validate the HTML my web applications produce to ensure it’s valid markup. You can check that this page is valid
↑Preventing users opening developer tools
If you want to discourage users viewing your source HTML or opening the developer tools then look at using disable-devtool. While it won’t prevent the most technical savvy users who know how to request your page from curl, it will prevent the majority of non-technical users. I use a feature flag within my code to enable this within pre-production and production environments.
↑Preventing users printing your applications content
As I mainly develop web applications for the health sector, I need to try and prevent or persuade them not print the pages as they might contain patient identifiable information. To do this I use a print style sheet to hide all the content except the content within the pages footer.
The footer contains the message to persuade users not to print the information like:
1<footer>
2 <p>We <b>strongly recommend</b> not printing patient information from this application as
3 it is constantly being updated by many organisations and it will be out of date very quickly.
4 Please always consume (view) the latest information about your patient so that you are
5 delivering safe and informed care based on the most up to date information available.</p>
6 <hr />
7 <p>Please <b>DO NOT</b> take photos of the screen as this will break the terms of your employment.</p>
8</footer>
A sample print style sheet is shown below. It hides the main content and shows the footer content. The font size of the text within the footer content is bumped up so that it’s easily readable within the browsers print pre-view window.
1@media print {
2 main {
3 display: none;
4 }
5 footer {
6 display: block;
7 font-size: 22px !important;
8 margin: 2em;
9 }
10}
↑Joined bullet point lists with CSS
I like the joined bullet point lists with CSS first developed by the BBC. It’s a great way to show a vertical timeline of events. Here’s my take on it:
1li {
2 position: relative;
3 margin: 0;
4 padding-bottom: .75em;
5 padding-left: 20px;
6}
7
8li:before {
9 content: '';
10 background-color: #00669f;
11 position: absolute;
12 bottom: 0;
13 top: 0;
14 left: 6px;
15 width: 3px;
16}
17
18li:after {
19 content: '';
20 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 32 32' focusable='false'%3E%3Ccircle stroke='none' fill='%2300669f' cx='16' cy='16' r='10'%3E%3C/circle%3E%3C/svg%3E");
21 position: absolute;
22 left: 0;
23 top: 2px;
24 height: 15px;
25 width: 15px;
26}
And the HTML:
1<ol>
2 <li>22.08.2022 - Change Grow Live go-live with 50+ clinical staff</li>
3 <li>18.08.2022 - Passed 10,000 registered users</li>
4 <li>25.07.2022 - Delivered the Cyted Results uploading and publishing functionality</li>
5</ol>
↑Using custom markers within lists using CSS
Use the marker attribute to define the content to use for custom list markers.
1li::marker {
2 content: '➡️ ';
3}
↑Manipulating placeholders with CSS
Style the placeholder text and change the border if the placeholder text is visible.
1input:placeholder-shown {
2 border: 1px solid red;
3}
4
5input::placeholder {
6 color: rgb(255, 255, 255, 0.75);
7}
8
↑Send AJAX request as a HTTP POST with an Authorization Request Header
Make your AJAX API request more secure by sending as an HTTP POST with an Authorization request header that the web server needs to verify before processing your request.
1try {
2 var xmlHttp = new XMLHttpRequest();
3 xmlHttp.onreadystatechange = function() {
4 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
5 // use the API's response
6 console.log(xmlHttp.responseText);
7 }
8 if (xmlHttp.readyState == 4 && xmlHttp.status != 200) {
9 console.error(xmlHttp.status);
10 }
11 }
12
13 xmlHttp.open("POST", "/url/to/api", true);
14 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
15 xmlHttp.setRequestHeader('Authorization', 'BearerTokenValue');
16 xmlHttp.send("field=value")
17} catch(e) {
18 console.error(e.message);
19}