Light weight website

Time is money and on the web every millisecond of load time count.

Javascript libraries have become too heavy and css frameworks do not use the most advance capabilities of modern css.

Time to refresh your code and crack down on resource call, scripting and rendering.

One of the main reason I used bootsrap was the grid system, simple and efficient. Nowadays css includes grid-column markup:

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column

https://drafts.csswg.org/css-grid/#propdef-grid-column

The other good reason I had to use Bootstrap framework was the modals. I like their modals, so much I built a webshop with products popping up in modals. The good thing is that you don’t have to go back and forth product pages and category pages and the down side is that category pages code started to grow a tad whith the store products line up.

Avoid webfonts

Replace glyphicon and fontawesome with css sprites use Hover css selector to change color, icon or size on hover and point to another version of the icon etc.

Inline your scripts

Load essential css and js inline for faster rendering

Avoid libraries. Inline your scripts. Defer everything that can be defered.

Optimize image serving

Use fixed size images and use srcset to load properly sized mobile version.

Lazyload images.

One point I need to clarify is the following: properly displaying compressed images on high DPI screen requires to serve an image larger than the size it will be displayed to accomodate the higher density of screen pixel. The questions being: does it impact user experience positively? and Does it impact SEO positively? And John Müller would proabably answers that only the former matters and he would be right in that respect.

Display javascript as text in html (for tutorials and so on…)

To prevent your script to be interpreted, you will need to replace the opening and closing brakets with html code. They will be displayed correctly but the script within won’t get executed!

<script>//Inspect this element console.log(‘this code won’t get executed<br>nothing to see in the console! <br> Also did you notice the line did not break after the <br> elements? What is this sorcery? ‘)</script>

To check which code to use to replace a specific character, have a look at the following resource:

https://www.strictly-software.com/htmlencode

Materialized: Select value not passed in post body

If you are using the materialize framework, you might have trouble to pass a value when using the select element in a form. Indeed the value is not taken into account. To solve this give an id to the select element and and add an hidden input field with the relevant field name and id as so:

<div class="row">             
<div class="input-field col s12">
<select id="data_select">
<option value="" disabled selected>Data</option> <option value="1">data 1</option>
<option value="2">data 2</option>
<option value="3">data 3</option> <option value="4">data 4</option> </select>
<input type="hidden" name="data_name" id="data_hidden" /> </div>
</div>

and with the associated script:

// Post Materialize select value$(document).ready(function() {
$('#data_select').on('change', function() {
var data_select=document.getElementById("data_select").value;
document.getElementById("data_hidden").value=data_select;

});

[Edit: everything worked fine simply using the following code:

<div class="row">             
<div  class="input-field col s12">                 
<select name="data_name"  id="data_select">                   
<option  value="" disabled selected>Data</option>                   <option  value="1">data 1</option>                   
<option  value="2">data 2</option>                   
<option  value="3">data 3</option>                  
<option  value="4">data 4</option>                 
</select>                 
</div>                       
</div>

]

Text lisibility: color contrast

Here are some references I gathered during my search.

I got to go through them but they shall be useful for anyone paying attention to text/background contrast for legibility: 

Contrast text background lisibility tester:

http://jxnblk.com/colorable/demos/text/?background=%2348a74c&foreground=%23FFFFFF

 https://webaim.org/resources/contrastchecker/ 

https://material.io/design/color/text-legibility.html#text-backgrounds 

https://www.nngroup.com/articles/text-over-images/

Another tool: https://contrast-ratio.com/#hsla%28200%2C0%25%2C0%25%2C.7%29-on-green