The Wiert Corner – irregular stream of stuff

Jeroen W. Pluimers on .NET, C#, Delphi, databases, and personal interests

  • My work

  • My badges

  • Twitter Updates

  • My Flickr Stream

  • Pages

  • All categories

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 1,843 other followers

Archive for the ‘HTML’ Category

HTML indentation: 2 spaces

Posted by jpluimers on 2017/10/12

Using too many editors in too many environments, tabbed files usually kills my productivity.

Not just because the structure of the indented code, also because most editors are stupid enough to also use tabs beyond the indentation, for instance for carefully aligned initialisation statements.

Changing the tab-size effectively waves good bye to those.

It’s weird (Wiert loves that word) that HTML peeps even argue about tabs versus spaces:

Most people still use HTML for pixel perfect rendering and spaces help getting character perfect rendering of the source code.

I was glad to bump into [WayBackJefferson Lima answering this on Stack Overflow:

The Google HTML/CSS Style Guide and the W3School HTML(5) Style Guide recommend 2 spaces.

This article also brings an analysis of the effect of tabs vs spaces in the resulting file size.

Source: [WayBack] html5 – html indenting standard, tab or two spaces? – Stack Overflow

So: use 2 spacec for HTML indent.

It doesn’t really matter in transmitted size (minified compressed transfer difference is ~0% and the usual image bloat is way larger than the HTML anyway – just try www.webbloatscore.com and watch).

References:

  • Indent by 2 spaces at a time.
  • Don’t use tabs or mix tabs and spaces for indentation.

Source: [WayBackGoogle HTML/CSS Style Guide

  • Do not add blank lines without a reason.
  • For readability, add blank lines to separate large or logical code blocks.
  • For readability, add two spaces of indentation. Do not use the tab key.
  • Do not use unnecessary blank lines and indentation. It is not necessary to indent every element.

Source: [WayBackHTML5 Style Guide

Tabs Spaces Saving
Raw file size 1403 bytes 1703 bytes 300 bytes/18%
Raw file GZipped   327 bytes   332 bytes      5 bytes/1.5%
Raw file minified 1199 bytes 1199 bytes      0 bytes/0%
Minified & GZipped   312 bytes   312 bytes      0 bytes/0%

When minified, it doesn’t matter if tabs or spaces are used, since they are all stripped away.

Source: [WayBackEffect of tabs vs. spaces in HTML files

–jeroen

Posted in Development, HTML, Software Development, Web Development | Leave a Comment »

Decode URLs from The Great Suspender after a browser restart fails to reload them

Posted by jpluimers on 2017/03/16

Hosted at: Decode URLs from The Great Suspender after a browser restart fails to reload them

Converts URLs like these:
chrome-extension://klbibkeccnjlkjkiokjodocebajanakg/suspended.html#url=http%3A%2F%2Fwww.barryodonovan.com%2F2012%2F06%2F29%2Fmigrating-svn-with-branches-and-tags-to-git
back into
http://www.barryodonovan.com/2012/06/29/migrating-svn-with-branches-and-tags-to-git

Source below.

It decodes a URL encoded by The Great Suspender which is a cool Google Chrome plugin that suspends pages after some idle time.

The uncool thing is that when Google Crome restarts after a crash (it’s software, it does that, especially as it consumes truckloads of memory and is full of memory leaks) it often fails to restore some (but not many) of the suspended pages into a usable state: it shows only the encoded URLs.

–jeroen

Posted in Chrome, Development, Google, HTML, HTML5, JavaScript/ECMAScript, Power User, Scripting, Software Development, Web Development | Leave a Comment »

Found as a byproduct of following +Jeroen Wiert Pluimers …

Posted by jpluimers on 2017/01/18

Found as a byproduct of following +Jeroen Wiert Pluimers …:

Found as a byproduct of following +Jeroen Wiert Pluimers
http://youmightnotneedjs.com/

Which is a cool site:

Examples of common UI elements and interactions with HTML and CSS alone.

Source: You Might Not Need JavaScript

–jeroen

Posted in CSS, Development, HTML, HTML5, JavaScript/ECMAScript, Scripting, Software Development, Web Development | Leave a Comment »

Contrast Rebellion – to hell with unreadable, low-contrast texts!

Posted by jpluimers on 2017/01/11

Contrast:

When making the contrast of the text lower and lower…designers need to think of

  • elderly
  • users with bad vision
  • low quality monitors
  • bad lighting and glare
  • reading on tiny screens

Source: Contrast Rebellion – to hell with unreadable, low-contrast texts!

–jeroen

Contrast Rebellion - to hell with unreadable, low-contrast texts!Low-contrast font color and unreadable texts? To hell with them!

Posted in CSS, Development, HTML, HTML5, Software Development, Web Development | Leave a Comment »

A great way to interactively browse xml/xhtml/html on the console: xmllint –shell

Posted by jpluimers on 2016/10/12

A while ago, I heard about xmllint, a program that can parse and query xml from the command-line.

Later, I discovered it can also parse html, can recover from xml/html errors and has an interactive shell that has a lot of commands (see table below) to navigate through the loaded command.

The relevant command-line options:

--recover
--html
--shell

Note that --recover will output failing input to stderr. You can ignore that using 2> /dev/null

Some good examples of usage are here:

The table of shell commands:

Shell

xmllint offers an interactive shell mode invoked with the –shell command. Available commands in shell mode include:
Command Parameter Description
base display XML base of the node
bye leave shell
cat node Display node if given or current node.
cd path Change the current node to path (if given and unique) or root if no argument given.
dir path Dumps information about the node (namespace, attributes, content).
du path Show the structure of the subtree under path or the current node.
exit Leave the shell.
help Show this help.
free Display memory usage.
load name Load a new document with the given name.
ls path List contents of path (if given) or the current directory.
pwd Display the path to the current node.
quit Leave the shell.
save name Saves the current document to name if given or to the original name.
validate Check the document for error.
write name Write the current node to the given filename.

–jeroen

via xmllint.

Posted in Development, HTML, HTML5, Software Development, Web Development, XML, XML/XSD, XPath | Leave a Comment »

 
%d bloggers like this: