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,860 other subscribers

Archive for the ‘HTML5’ Category

« Previous Entries
Next Entries »

How to make an iframe fit or fill 100% of its container’s remaining height – Sikwati

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>

view raw

iframe-fragment.html

hosted with ❤ by GitHub

I tried it at the [WayBack] Spring4d generated documentation and it seems to work fine:

Read the rest of this entry »

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

301 & 302 Redirect Generator Tool

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 »

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 »

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 »

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 »

Convert HTML to Markup using CSS – Render HTML as unrendered Markdown – see http://jsbin.com/huwosomawo

Posted by jpluimers on 2016/03/02

Convert HTML to Markup using CSS:

–jeroen

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

HTML Cleaner – (not only) Word to clean HTML

Posted by jpluimers on 2015/08/10

A great on-line way to cleanup html (from for instance style information) before publishing it on your blog: HTML Cleaner – Word to clean HTML.

One of the things is does is Remove inline styles.

Ideal for copy-pasting a quote from a web-site to your HTML editor.

–jeroen

via: www.html-cleaner.com

Posted in Development, HTML, HTML5, Power User, SocialMedia, Software Development, Web Development, WordPress | Leave a Comment »

Pastebin, but for HTML? – Stack Overflow

Posted by jpluimers on 2015/05/26

Nice question (thanks aplm!), as for instance Gist does not render html:

Pastebin is a useful online tool to paste snippets of text. Pastie is a similar tool. Also, Ideone is similar except that it also runs the source code, as well as being a general pastebin.

Is there a similar tool, for HTML?

And ditto links in the answer (thanks meder!):

Unbelievable that such questions get closed as “not constructive”.

Note I could not get http://www.pastekit.com to work.

–jeroen

via: javascript – Pastebin, but for HTML? – Stack Overflow.

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

« Previous Entries
Next Entries »