nepsilon

Simple cache busting with Nginx

You update your app.js or styles.css, but have a caching of 30 days and none of the clients will get the latest version? 😟

While the best would be to use a build mechanism to generate new filenames on the server, here is how to ensure clients get your last updates:

1. Change the name of the files in the HTML, for example styles.css to styles.123.css

2. Add this cache busting snippet in your nginx conf:

nepsilon

What you should know about tabindex

tabindex is an HTML core global attribute.

With it you can control in what order the elements get the focus, when the user presses the TAB key. You can also prevent an element to gain focus through the TAB key.

Typical example:

1. We have a login form

nepsilon

Speed is a feature: 10 tips for faster browser networking

1. Minimize TCP connections

Ensure the web server uses Keep-Alive headers.

2. Reduce DNS look-ups

DNS look-ups are the first thing blocking your HTTP requests.

nepsilon

3 tips for faster webpages: The rendering phase

Fast page loading is critical for an optimal user experience and SEO. Here we focus on the UX part, we want to show the page to user as fast and correctly as possible.

1. Don’t make the browser re-start the parsing: Once the browser got the page, it needs to parse it and show it to user. But it may not know what encoding it is, as soon as it will see the meta charset tag, it will stop and re-start the parsing with the right encoding. So, keep this tag above all other tags, just below title is common.

nepsilon

3 hidden CSS tips

1. Use empty-cells to style table empty cells:

Surprisingly the browser support is quite good and extends back to IE8. Convenient to give less visual predominance to empty cells.

table {
  empty-cells: hide;
}

nepsilon

3 hidden HTML tips

1. Click label to auto-focus on input:

A big plus for a good UX that all modern browsers support. Note that the pairing happens between the label’s for attribute and the input’s id attribute, not its name.

<label for="username">Fiscal Year</label>
<input type="name" name="username" id="username" />

nepsilon

3 hidden Python tips 🐍

Hidden from beginner tutorials and seldom found in books.

1. You can multiply a string to repeated it:

>>> "HOOLI-"*2
'HOOLI-HOOLI-'

nepsilon

PostgreSQL: TABLE instead of SELECT * FROM

Or how to save 7 keystrokes 🙌.

You can type TABLE foo instead of SELECT * FROM foo. The output will be the same:

foo-db=# TABLE foo;
 id    │  name  |  email
───────┼────────┼─────────

nepsilon

DOM: How to select a range of children?

Given the following HTML code:

<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
 4

nepsilon

Make crontab send you HTML emails

Any output (to stdout and stderr) generated by a crontab task will be sent to you by email. This is great to generate system reports or be alerted when something goes wrong.

By default crontab (and the MTA it relies on) will use a text/plain MIME type. But you can make crontab tells the mail sender to use another MIME type, like text/html.

Open crontab with crontab -e, and add this line: