Almost a decade ago, I wrote about Using WebP image format for browsers that support it.
Now there's a different method to implement this, but not using CSS3 - rather, this is purely based on the new <picture> HTML5 tag.
Safari which doesn't support webp will load cat.png while other browsers will load cat.webp.
If you are wondering what loading="lazy" is, check out https://web.dev/native-lazy-loading/ - currently supported only in Chrome.
A lot of people seem to get confused when trying to get the element that triggered the event in an event handler function. this or $(this) returns the parent element of the target.
Sometimes, when a user enters numbers into a HTML INPUT text field, he/she enters commas too for readability esp in the case of financial inputs.
But when we send the input data via a form to the backend script for storing into a database, say MySQL database, we don't want the commas in the SQL INSERT statement.
So here's a script to show the commas while typing and remove the commas on hitting the submit button.
Here's a dead simple solution to pass through encrypted data as a value in your URL. Say you wanted to load something like https://my-product.com/loadProduct.php?id=1234 but don't want to show the real id as it may be the primary value in your database's table.
Instead, you can load it like this : https://my-product.com/loadProduct.php?id=33797030395539366e55673d and decrypt the value in your script.
More details on security : https://stackoverflow.com/a/50373095/126833
Compress might not be the right word, as it doesn't really compress / zip the output HTML code, but combines all the HTML lines to a single line and removes trailing / leading whitespaces.
This has to be your index.php and am assuming you are routing all incoming page requests to index.php which will be handled by either rewrites in htaccess or direct query strings. For example, I would have either
There is one gotcha in this. You can't use single line comments start with // in inline Javascript code in the HTML. Either place the JavaScript code outside of the HTML page, in separate .js page or use multi-line comments /* */
Sometimes I find myself converting google doc spreadsheets (CSV) to JSON format. I would later on use the JSON string to insert it into a JavaScript file. So here is a simple script to convert a CSV file to JSON format.
The WebP image format for the web is starting to get a lot of hype for its massive file compression. Chrome supports it since ver 9 and Opera since ver 11.10. Image file sizes are reduced by more than 50% in WebPs when compared to JPGs. Looking at Google Analytics on various sites, Chrome 9+ users constitute 20% - 25%. So providing one-fifth or one-fourth of the users with a much reduced page load is worth the extra effort.
for i in *.jpg; do j=`echo "$i" | cut -d . -f 1`; convert -colorspace RGB "$i" "$i"; ~/libwebp/cwebp -q 75 "$i" -o "${j}.webp"; done
convert is used to convert the colourspace from RGB to CMYK since as of now, webp encoder doesn't support CMYK colourspace.
2. Use 2 different CSS files for background images - one for standard jpg/png and another for webp. Chrome 9+ and Opera 11.10+ would be served webp.css while all others img.css.
get_browser is pretty useful for browser detection, but requires to set browscap in php.ini which is a PHP_INI_SYSTEM directive and can't be set in using ini_set(), .htaccess or user php.ini which rules out almost all shared hosting enviroments. But interestingly, this is possible in WebFaction where I could set browscap in a user php.ini file which was parsed.
If you are getting something like ...
<b>Warning</b>: get_browser() [<a href='function.get-browser'>function.get-browser</a>]: browscap ini directive not set in <b>/path/script.php</b> on line <b>7</b>
and if there is no way to set browscap, then you need to find an alternative browser detection like phpbrowscap.
I benchmarked this on a graphically heavy wordpress site, having 11 photographs in a slider on the homepage which takes a megabyte alone.
Browser
Requests
Size
Time
FireFox 3.6
31
1.9 MB
21.48s (onload: 20.62s)
Chrome 11
32
577.90KB
6.51s (onload: 6.51s, DOMContentLoaded: 2.88s)
(I could not find the option to view total bytes downloaded in Opera dragonfly's network tab)
Side Note : When uploading webp images to google storage, S3 or any other cloud service, specify the content-type / mime-type.