 | Lars Fosdal on Security alarm provider Woonve… |
 | Thomas Mueller on Question got closed in May 202… |
 | Thaddy de Koning on Formulier voor bewindvoerders… |
| Thaddy de Koning on Formulier voor bewindvoerders… |
| Thaddy de Koning on Formulier voor bewindvoerders… |
Posted by jpluimers on 2024/05/01
So true:
[Wayback/Archive] Victor on Twitter: “UI/UX & Coding Tip 💡 Do you need to display table data? Use tables. Yes, , and . Yes, it’s fine. No, you don’t need flex, grids, divs, and all that. Why? Because it’s a table 🤷♂️”
UI/UX & Coding Tip 💡
Do you need to display table data? Use tables.
Yes, it’s fine. No, you don’t need flex, grids, divs, and all that.
Why? Because it’s a table 🤷♂️
Posted in Development, HTML, HTML5, Software Development, Web Development | Leave a Comment »
Posted by jpluimers on 2024/04/03
A while ago I needed to validate some HTML on-line and found the W3C Markup Validation Service.
There are two versions of it that can take different parameters, so below are some permutations of the URLs.
But first why there are two versions, which is explained in W3C Markup Validation Service – Wikipedia
The Markup Validation Service is a validator by the World Wide Web Consortium (W3C) that allows Internet users to check pre-HTML5 HTML and XHTML documents for well-formed markup against a document type definition. Markup validation is an important step towards ensuring the technical quality of web pages. However, it is not a complete measure of web standards conformance. Though W3C validation is important for browser compatibility and site usability, it has not been confirmed what effect it has on search engine optimization.
As HTML5 has removed the use of DTD in favor of a “Living Standard”, the traditional Markup Validation Service is not applicable to these formats. Validation is instead performed using an open-source “Nu Validator”, an instance of which is provided by W3C.
Posted in Development, HTML, HTML5, Software Development, Web Development | Leave a Comment »
Posted by jpluimers on 2023/12/04
The basic options for logging an HTML Element using JavaScript are for instance described in [Wayback/Archive] google chrome – How can I log an HTML element as a JavaScript object? – Stack Overflow (thanks [Wayback/Archive] Ben Flynn for asking and [Wayback/Archive] Mathias Bynens for answering)):
Useconsole.dir:var element = document.documentElement; // or any other element console.log(element); // logs the expandable <html>…</html> console.dir(element); // logs the element’s properties and values
Both log all html or all properties even though often these are enough (most via [Wayback/Archive] Element – Web APIs | MDN):
Posted in Development, HTML, HTML5, JavaScript/ECMAScript, Scripting, Software Development, Web Development | Leave a Comment »
Posted by jpluimers on 2023/11/23
I wish I had known this ages ago: [Wayback/Archive] javascript – Chrome debugging – break on next click event – Stack Overflow (thanks [Wayback/Archive] D.R. for asking and [Wayback/Archive] Konrad Dzwinel for answering):
What you are looking for are [Wayback/Archive] ‘Event Listener Breakpoints‘ on the
Sourcestab. These breakpoints are triggered whenever any event listener, that listens for chosen event, is fired. You will find them in the Sources tab. In your case, expand ‘Mouse’ category and choose ‘Click’.
Posted in Chrome, Chrome, Development, Google, HTML, HTML5, JavaScript/ECMAScript, Power User, Scripting, Software Development, Web Browsers, Web Development | Leave a Comment »
Posted by jpluimers on 2023/09/27
For my link archive is the below answer that should help me a lot with unfinished bits from Some JavaScript bookmarklets for WordPress published pages centered around navigation and IDs.
Goal of that post was to have some grounding and eventually find a means to build an HTML page in a new tab using a bookmarklet that I then later could post to my blog.
Assembling to HTML and putting it on the clipboard might be a lot easier and better fitting in my workflow.
So, via [Wayback/Archive] javascript copy html to clipboard – Google Search, for my link archive: [Wayback/Archive] Javascript – Copy string to clipboard as text/html – Stack Overflow (thanks [Wayback/Archive] Loilo for answering and [Wayback/Archive] kofifus for asking):
Below is a function that will do exactly that. I tested it with your required browsers, it works in all of them. However, IE 11 will ask for confirmation on that action.
Explanation how this works can be found below, you may interactively test the function out in this jsFiddle.
Posted in Chrome, Development, Firefox, HTML, HTML5, Internet Explorer, JavaScript/ECMAScript, JSFiddle, Power User, Scripting, Software Development, Web Browsers, Web Development | Leave a Comment »
Posted by jpluimers on 2023/07/18
I forgot to post this: [Wayback/Archive] Which characters need to be escaped in HTML? – Stack Overflow
If you’re inserting text content in your document in a location where text content is expected1, you typically only need to escape the same characters as you would in XML. Inside of an element, this just includes the entity escape ampersand&and the element delimiter less-than and greater-than signs<>:& becomes & < becomes < > becomes >
I didn’t quote further, as this bit is somehow important for WordPress posts. WordPress reminded me the hard way when initially these posts were wrongly titled:
<p>, <div> and <span> in HTML&XHTML? (wrongly titled “What is the difference between , and in HTML&XHTML?“)
Another difference between the <p> and <div> element in HTML&XHTML<p> and <div> element in HTML&XHTML (wrongly titled “Another difference between the and element in HTML&XHTML“)
Another difference between the <p> and <div> element in HTML&XHTMLWarning:
It also means the “Press This” bookmarklet always gets unescaped plain text wrong. Watch this when selecting text for blogging and check if the selected text actually got into your post fine.
Thanks [Wayback/Archive] Ahmet for asking the above question and [Wayback/Archive] Jeremy for answering it.
–jeroen
Posted in Development, HTML, HTML5, SocialMedia, Software Development, Web Development, WordPress, WordPress | Leave a Comment »
Posted by jpluimers on 2023/07/05
In Another difference between the and element in HTML&XHTML, I mentioned Stephan Kämper taught be about the W3C HTML NU validator in [Archive] Stephan Kämper on Twitter: “I try to write fairly simple & #valid #HTML ➙ …gist..Validating it with …online HTML-Validator…, I get the error ‘No p element in scope but a p end tag seen.‘ What? Why? Removing the list from the HTML, gets rid of the error… Why?!? I. don’t. get it. 1/2″ / Twitter.
Upon closer inspection, there are actually two w3c.org HTML validators, each operating in three modes:
This validator checks the [Wayback/Archive] markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. If you wish to validate specific content such as [Wayback/Archive] RSS/Atom feeds or [Wayback/Archive] CSS stylesheets, [Wayback/Archive] MobileOK content (now retired), or to [Wayback/Archive] find broken links, there are [Wayback/Archive] other validators and tools available. As an alternative you can also try our [Wayback/Archive] non-DTD-based validator.
#validate_by_uri mode (without #validate_by_uri URL fragment) and
default: checks the HTML of a URL
you upload a file of which the HTML then gets checked
you enter the HTML to be checked into a text box
#address mode (without #address URL fragment) and
default: checks the HTML of a URL
#file modeyou upload a file of which the HTML then gets checked
#textarea modeyou enter the HTML to be checked into a
<textarea>element
Notes:
# hash) which the Wayback machine cannot individually save, but Archive.is can, hence the non-default URLs are not saved only in Archive.is, and not in the Wayback machine.I also took a look at the Wayback machine saved pages under the direct URLs of both checkers:
I learned that the NU validator accepts at least these arguments:
https://validator.w3.org/nu/?doc= to specify a URL, for instance [Wayback/Archive] Showing results for https://example.org – Nu Html Checkerhttps://validator.w3.org/check?uri= also to specify a URL, but HTTP 302 redirects to the non-DTD based NU checkerfor instance [Wayback/Archive] https://validator.w3.org/check?uri=https://example.org redirects to https://validator.w3.org/nu/?doc=https://example.org
https://validator.w3.org/?uri= fails, so [Wayback/Archive] https://validator.w3.org/?uri=https%3A%2F%2Fexample.org%2F does not work.Note that you cannot do this directly with HTML files saved in a gist or GitHub repository because it serves all RAW files as
[Wayback/Archive] text/plain MIME type. You can work around this by using a raw.githack.com trick I explained before at:
I also amended my above reply with more information using the ?doc= parameter with RAW gist files and archived that thread at [Wayback/Archive] Thread by @jpluimers on Thread Reader App – Thread Reader App.
–jeroen
Posted in Development, HTML, HTML5, Software Development, Web Development | Leave a Comment »
Posted by jpluimers on 2023/07/04
A few weeks after queueing What is the difference between <p>, <div> and <span> in HTML&XHTML?, Stephan Kämper posted an interesting other “TIL“.
Besides that TIL, it also taught me about an on-line HTML validator. Cool: I learned two things from Stephan that day!
The above post talked about phrasing versus non-phrasing elements, Stephan discovered another difference between the p and div elements:
p element is structural and cannot contain lists like ol and ul.div element is logical and can contain lists.Stephan’s TIL: [Archive] Stephan Kämper on Twitter: “TIL or Life (and the HTML specification) is full of wonders and surprises ➙ “List elements (in particular, ol and ul elements) cannot be children of p elements.” …” / Twitter
It was based on his quest [Archive] Stephan Kämper on Twitter: “I try to write fairly simple & #valid #HTML ➙ …gist..Validating it with …online HTML-Validator…, I get the error ‘No p element in scope but a p end tag seen.‘ What? Why? Removing the list from the HTML, gets rid of the error… Why?!? I. don’t. get it. 1/2″ / Twitter, which I archived at [Wayback/Archive] Thread by @S_2K on Thread Reader App – Thread Reader App.
I responded this: [Archive] Jeroen Wiert Pluimers on Twitter: “@S_2K I thought it would be something like explained in p/div/span differences But it is yet another html oddity where structural and logical concept are mixed in one language.” / Twitter.
Both his quest and tweet referred to this key documentation part: [Wayback/Archive] HTML Standard: grouping content; the p element; note on lists:
Posted in Development, HTML, HTML5, Software Development, Web Development | 1 Comment »
Posted by jpluimers on 2023/06/28
Via [Wayback/Archive.is] inline svg to file – Google Search, found first [Wayback/Archive] Convert Inline SVG to File – Eyedeal Graphics
- Use your browser’s “View Source” or “Page Source” command to view the page’s HTML code.
- Locate and copy all the code between the beginning <svg> and closing </svg> tags.
- Paste the copied code, including the <svg> and </svg> tags into your text editor of choice. (Atom, Brackets, Visual Studio Code, Sublime Text, etc.)
- Save the text file as an SVG file. (ex. legacy-xyz-products-logo.svg)
- Open the SVG file in your preferred vector editing tool. (Adobe, Illustrator, Affinity Designer, Sketch, Inkscape, etc.)
That wasn’t enough, as not all SVG files then render properly, so luckily the next hit was [Wayback/Archive] html – Convert an inline SVG into a SVG file – Stack Overflow (thanks [Wayback/Archive] Paul LeBeau):
Posted in Development, HTML, HTML5, Software Development, Web Development | Leave a Comment »
Posted by jpluimers on 2023/06/06
I write most of my documentation in Markdown or reStructuredText, so I don’t bump into html questions as often as in the past. But recently, I had to document in html as markdown was impossible, bumped in the choice between using div or p tags for paragraphs, and remembered there was a p problem not present with div but forgot which problem.
So I found [Wayback/Archive] What is the difference between <p>, <div> and <span> in HTML&XHTML? where the red bit explained what I forgot:
As others have answered…
divandpare “block elements” (now redefined as Flow Content) andspanis an “inline element” (Phrasing Content). Yes, you may change the default presentation of these elements, but there is a difference between “flow” versus “block”, and “phrasing” versus “inline”.An element classified as flow content can only be used where flow content is expected, and an element classified as phrasing content can be used where phrasing content is expected. Since all phrasing content is flow content, a phrasing element can also be used anywhere flow content is expected. [Wayback/Archive] The specs provide more detailed info.
All phrasing elements, such as
strongandem, can only contain other phrasing elements: you can’t put atableinside acitefor instance. Most flow content such asdivandlican contain all types of flow content (as well as phrasing content), but there are a few exceptions:p,pre, andthare examples of non-phrasing flow content (“block elements”) that can only contain phrasing content (“inline elements”). And of course there are the normal element restrictions such asdlandtableonly being allowed to contain certain elements.While both
divandpare non-phrasing flow content, thedivcan contain other flow content children (including moredivs andps). On the other hand,pmay only contain phrasing content children. That means you can’t put adivinside ap, even though both are non-phrasing flow elements.Now here’s the kicker. These semantic specifications are unrelated to how the element is displayed. Thus, if you have a
divinside aspan, you will get a validation error even if you havespan {display: block;}anddiv {display: inline;}in your CSS.
Thanks [Wayback/Archive] Dhamu for asking that question and [Wayback/Archive] chharvey for explaining these details!
The [Wayback/Archive] HTML Standard: 3.2.5.2 Kinds of content has a cool diagram too:
Posted in Development, HTML, HTML5, Software Development, Web Development | Leave a Comment »
The Wiert Corner - irregular stream of stuff 