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,842 other followers

Archive for the ‘Web Development’ 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 »

How do I make the first letter of a string uppercase in JavaScript? – Stack Overflow

Posted by jpluimers on 2017/10/11

I’m a JavaScript n00b, so I like solutions like these:

Another solution:

function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

You could also add it to the String.prototype so you could chain it with other methods:

String.prototype.capitalizeFirstLetter = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}

and use it like this:

'string'.capitalizeFirstLetter() // String

Thanks [WayBackHutch Moore and [WayBackDeviljho for answering at [WayBackHow do I make the first letter of a string uppercase in JavaScript? – Stack Overflow!

Note you can do it in CSS too as explained by [WayBacksam6ber:

In CSS:

p:first-letter {
    text-transform:capitalize;
}

–jeroen

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

HTTP Prompt is an interactive command-line HTTP client featuring autocomplete…

Posted by jpluimers on 2017/07/26

HTTP Prompt is an interactive command-line HTTP client featuring autocomplete and syntax highlighting. Download url -> https://github.com/eliangcs/http-prompt – Joe C. Hecht – Google+

Source: HTTP Prompt is an interactive command-line HTTP client featuring autocomplete… [WayBack]

To me it looks remarkably similar to https://github.com/jkbrzt/httpie [WayBack] which too is a visual cURL replacement.

–jeroen

Posted in *nix, Communications Development, cURL, Development, HTTP, Internet protocol suite, Power User, Software Development, TCP, Web Development | Leave a Comment »

Fiddler2 direct download

Posted by jpluimers on 2017/06/06

For automated installs that cannot have UI interaction: https://www.telerik.com/docs/default-source/fiddler/fiddlersetup.exe

–jeroen

Posted in Development, Fiddler, 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 »

 
%d bloggers like this: