Posted by jpluimers on 2018/07/19
As I need both responsive resizing and zooming iframes one day:
–jeroen
Posted in CSS, Development, HTML, JavaScript/ECMAScript, JSFiddle, Scripting, Software Development, Web Development | Leave a Comment »
Posted by jpluimers on 2018/07/13
Need to check out which weather widgets I can get working for a really long period of time with a refresh every minute. [WayBack] Jeroen Pluimers on Twitter: “@Weerplaza ik heb via de widgets op https://t.co/DvF9tucAi9 een pagina voor mijn verstandelijk beperkte broer gemaakt op https://t.co/se9wAjJhaU Na maanden OK, gaan helaas de widgets van WeerPlaza daar niet meer goed. Komt het omdat de page-refresh (1x per minuut) te hoog is?… https://t.co/NX9XTj04Gq”
These will help me fix that:
–jeroen
Posted in Development, HTML, Software Development, Web Development | Leave a Comment »
Posted by jpluimers on 2018/04/27
HEAD – A list of everything that could go in the of your document
Wow. head is like a page by itself.
Source [WayBack] joshbuchea/HEAD: A list of everything that could go in the of your document
Via: [WayBack] HEAD – A list of everything that could go in the of your document https://github.com/joshbuchea/HEAD – This is why I Code – Google+
–jeroen
Posted in .NET, Development, HTML, Software Development, Web Development | Leave a Comment »
Posted by jpluimers on 2017/12/20
There are a lot of suggested solutions out there: mostly not working when I tried them, and some required several lines of code which seems unnecessary for such a simple issue.
[WayBack] How to make an iframe fit or fill 100% of its container’s remaining height – Sikwati
He made a lot of effort to get to this simple construct:
| <iframe src="/sample.pdf" width="100%" style="height: 100vh;"></iframe> |
I tried it at the [WayBack] Spring4d generated documentation and it seems to work fine:
Posted in Development, HTML, HTML5, Software Development, Web Development | Leave a Comment »
Posted by jpluimers on 2017/12/19
[WayBack] 301 & 302 Redirect Generator Tool is a simple and cool tool:
Generate code to permanently or temporarily redirect your old URL to a new URL using htaccess, PHP, HTML, JavaScript, ASP or ASP.Net
Although using .htaccess files requires Apache to allow AllowOverride All which you might not want to, so here are a few other options and links you might want to check out:
–jeroen
Posted in *nix, Apache2, Development, HTML, HTML5, Power User, Software Development, Web Development | Leave a Comment »
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 »
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.
–jeroen
Posted in Development, HTML, Software Development, Web Development | Leave a Comment »
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" 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> |
Posted in Chrome, Development, Google, HTML, HTML5, JavaScript/ECMAScript, Power User, Scripting, Software Development, Web Development | Leave a Comment »
Posted by jpluimers on 2017/01/18
Found as a byproduct of following +Jeroen Wiert Pluimers …:
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 »
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
Low-contrast font color and unreadable texts? To hell with them!
Posted in CSS, Development, HTML, HTML5, Software Development, Web Development | Leave a Comment »
The Wiert Corner - irregular stream of stuff 