The Wiert Corner – irregular stream of stuff

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

  • My badges

    Mastodon

  • Twitter Updates

  • My Flickr Stream

    20140508-Delphi-2007--Project-Options--Cannot-Edit-Application-Title-HelpFile-Icon-Theming20140430-Fiddler-Filter-Actions-Button-Run-Filterset-now20140424-VMware-Fusion-6.0.3.-no-reclaimable
    More Photos

  • Pages

  • All categories

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

    Join 1,861 other subscribers

Archive for the ‘Web Development’ Category

« Previous Entries
Next Entries »

Some Atom.io packages I have installed for html editing

Posted by jpluimers on 2017/12/19

These packages come in for HTML editing in Atom.io:

A few more ideas:

–jeroen

 

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

Yay! The WordPress.com Press-This bookmarklet now works again!

Posted by jpluimers on 2017/11/29

Good news the Press-This bookmarklet on WordPress.com has been reinstated.

See https://github.com/WordPress/press-this/pull/29 and the discussions in these below threads and sources.

Solves issues:

  • #12 – Add text domains
  • #15 – Restore Bookmarklet Functionality
  • #17 – Needs better documentation
  • #32 – The Press This bookmarklet itself on the tools page does not have the code

Some relevant sources:

Read the rest of this entry »

Posted in Bookmarklet, Development, Power User, SocialMedia, Software Development, Web Browsers, Web Development, WordPress, WordPress | Leave a Comment »

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 [WayBack] Jefferson 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: [WayBack] Google 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: [WayBack] HTML5 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: [WayBack] Effect 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 [WayBack] Hutch Moore and [WayBack] Deviljho for answering at [WayBack] How 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 [WayBack] sam6ber:

In CSS:

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

–jeroen

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

Twitter image size suffixes – via: Making silly #latex jokes is much more fun than doing final tweaks in my thesis on #coeffects…

Posted by jpluimers on 2017/08/18

Twitter stores images on twimg.com in various sizes.

You specify the size by adding a colon plus suffix to the URL. No colon plus suffix means a default size.

Suffixes you can use see to come from the media entity in Entities in Objects | Twitter Developers:

  • thumb
  • small
  • medium
  • large

There is one undocumented size: orig

The default size seems to be medium.

Examples (full images below):

media entity observed size URL
thumb 150×150 https://pbs.twimg.com/media/CiMNh9rWEAAdM6Q.png:thumb
small 340×325 https://pbs.twimg.com/media/CiMNh9rWEAAdM6Q.png:small
medium 600×573 https://pbs.twimg.com/media/CiMNh9rWEAAdM6Q.png:medium
(none) 600×573 https://pbs.twimg.com/media/CiMNh9rWEAAdM6Q.png
large 1024×979 https://pbs.twimg.com/media/CiMNh9rWEAAdM6Q.png:large
orig 1600×1529 https://pbs.twimg.com/media/CiMNh9rWEAAdM6Q.png:orig

Thanks to Thomas Petricek [WayBack] who poked fun last year on Twitter [WayBack] at both LaTeX and O RLY (the image meme [WayBack], not the text meme)

--jeroen

Read the rest of this entry »

Posted in Development, SocialMedia, Software Development, Twitter, Web Development | Tagged: , | 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:

The install is “per user” as it is a user-local application; it installs in %LocalAppData%\Programs\Fiddler\Fiddler.exe.

Docs

Note that Fiddler acts as a HTTP proxy. When Fiddler starts, it hooks itself into the default WinINET proxy (which is used by any tool using the WinINET API, including Edge, Internet Explorer, Chrome, but not FireFox).

If you kill your Windows machine before stopping Fiddler, it cannot restore the WinINET proxy, so you have to do that by hand (otherwise you cannot browse web pages any more).

Manual restore:

  1. Run "C:\Windows\System32\rundll32.exe" shell32.dll,Control_RunDLL inetcpl.cpl,,4
  2. Press “LAN settings” (Dutch: “LAN-Instellingen”)
  3. Uncheck the proxy server checkbox “Use a proxy server for your LAN” (Dutch “Een proxy-server voor uw LAN gebruiken”)
  4. Confirm
  5. Close the control panel wizard

–jeroen

Read the rest of this entry »

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


<!DOCTYPE html>
<!–
Resurrect
Based on 20160531-Google-Plus–403.-That’s-an-error.–Your-client-does-not-have-permission-to-get-URL–sorry–IndexRedirect–workaround.html
at https://gist.github.com/jpluimers/4f07a2f3f9b9890a3a44e184c1abadf2
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
url=http://www.barryodonovan.com/2012/06/29/migrating-svn-with-branches-and-tags-to-git
The Great Suspender Google Extension:
https://chrome.google.com/webstore/detail/the-great-suspender/klbibkeccnjlkjkiokjodocebajanakg
Test at http://jsbin.com/yukidaferu/1/edit?html,console,output
–>
<html>
<title>Decode URLs from The Great Suspender after a browser restart fails to reload them</title>
<body>
<h1>Decode URLs from The Great Suspender after a browser restart fails to reload them</h1>
<p>Please URL encoded by <a href="https://github.com/deanoemcke/thegreatsuspender&quot; target="_blank">The Great Suspender</a>:</p>
<input id="suspenderUrl" size="200">
<button type="button" onclick="decodeSuspenderUrlMethod()">Submit</button>
<div id="decodedUrlsCaptionDiv">
<p id="decodedUrlsCaption">Here you will see the decoded URLs so you can follow them:</p>
</div>
<ul id="decodedUrlsUl">
</ul>
<script>
// based on http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_validate
function decodeSuspenderUrlMethod() {
var decodedUrl = "";
var errorText = "";
// Get the value of the input field with id="numb"
var suspenderUrl = document.getElementById("suspenderUrl").value;
var stripPrefix = "chrome-extension://klbibkeccnjlkjkiokjodocebajanakg/suspended.html#url=";
var prefix = stripPrefix + "http";
// Am I a SO developer now? At least I'm quickly learning some JavaScript basics…
// http://stackoverflow.com/questions/1767246/check-if-string-begins-with-something/9430330#9430330
// https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/substring
if (suspenderUrl.indexOf(prefix) == 0) {
// now strip the bits we don't need, then decode what is left.
// I always wondered why they call it substring instead of subString
var googlePlusEncodedUrl = suspenderUrl.substring(stripPrefix.length);
// decoding got a new new a while ago: http://stackoverflow.com/questions/4292914/javascript-url-decode-function/4292961#4292961
decodedUrl = decodeURIComponent(googlePlusEncodedUrl);
} else {
errorText = "URL is missing this prefix: <<" + prefix + ">>";
};
// for now, just add the output; in the future, only add unique output.
// Based on http://stackoverflow.com/questions/5519747/how-to-add-anchor-tags-dynamically-to-a-div-in-javascript/5519795#5519795
var decodedUrlsUl = document.getElementById("decodedUrlsUl");
var decodedUrlLi = document.createElement('li');
if (errorText == ""){
var aTag = document.createElement('a');
aTag.setAttribute('href', decodedUrl);
aTag.innerHTML = decodedUrl;
decodedUrlLi.appendChild(aTag);
} else {
var aDiv = document.createElement('div');
aDiv.innerHTML = errorText + " " + suspenderUrl;
decodedUrlLi.appendChild(aDiv);
}
decodedUrlsUl.appendChild(decodedUrlLi);
}
</script>
</body>
</html>

view raw

20160826-Resurrect-Great-Suspender-URL.html

hosted with ❤ by GitHub

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 …:

Joe C. Hecht originally shared:
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 »

« Previous Entries
Next Entries »