Archive for the ‘HTML’ Category
Posted by jpluimers on 2021/01/20
I always get confused when I see this kind of HTML:
<td style="border: 1px black; border-style: none solid solid;">
This raises questions like:
- When less than 4 borders are mentioned, which borders are solid, and which borders are none?
- What is the order of 0…4 borders?
Luckily these links helped me:
- [WayBack] w3schools: CSS border-style property
- [WayBack] w3schools: CSS Borders
- [WayBack] border-style – CSS: Cascading Style Sheets | MDNThe border-style CSS property is a shorthand property that sets the line style for all four sides of an element’s border.
The first two made me find the last one, which is best as it has a CSS demo button (that also works on the WayBack link), a list of examples, and even better, answers the above questions with the “border-style” list below.
I rephrased their list into a table emphasising the clock-wise order:
The number of values determine the sides affected; thinking clock-wise is easiest to get it:
| # values |
affected sides |
example |
top |
right |
bottom |
left |
| 1 |
all: top, right, bottom, left |
solid |
solid |
solid |
solid |
solid |
| 2 |
top & bottom, right & left |
none solid |
none |
solid |
none |
solid |
| 3 |
top, right & left, bttom |
dotted none solid |
dotted |
none |
solid |
none |
| 4 |
top, right, bottom, left |
double dotted solid none |
double |
dotted |
solid |
none |
Their list:
The border-style property may be specified using one, two, three, or four values.
- When one value is specified, it applies the same style to all four sides.
- When two values are specified, the first style applies to the top and bottom, the second to the left and right.
- When three values are specified, the first style applies to the top, the second to the left and right, the third to the bottom.
- When four values are specified, the styles apply to the top, right, bottom, and left in that order (clockwise).
Each value is a keyword chosen from the list below.
then it continues with a table showing the outcome of the various line style values you can put in:
<line-style>- Describes the style of the border. It can have the following values:
none |
|
Like the hidden keyword, displays no border. Unless a background-image is set, the calculated value of border-top-width will be 0, even if the specified value is something else. In the case of table cell and border collapsing, the none value has the lowest priority: if any other conflicting border is set, it will be displayed. |
hidden |
|
Like the none keyword, displays no border. Unless a background-image is set, the calculated value of border-top-width will be 0, even if the specified value is something else. In the case of table cell and border collapsing, the hidden value has the highestpriority: if any other conflicting border is set, it won’t be displayed. |
dotted |
|
Displays a series of rounded dots. The spacing of the dots is not defined by the specification and is implementation-specific. The radius of the dots is half the calculated border-top-width. |
dashed |
|
Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific. |
solid |
|
Displays a single, straight, solid line. |
double |
|
Displays two straight lines that add up to the pixel size defined by border-width or border-top-width. |
groove |
|
Displays a border with a carved appearance. It is the opposite of ridge. |
ridge |
|
Displays a border with an extruded appearance. It is the opposite of groove. |
inset |
|
Displays a border that makes the element appear embedded. It is the opposite of outset. When applied to a table cell with border-collapse set to collapsed, this value behaves like groove. |
outset |
|
Displays a border that makes the element appear embossed. It is the opposite of inset. When applied to a table cell with border-collapse set to collapsed, this value behaves like ridge. |
–jeroen
Posted in CSS, Development, HTML, HTML5, Software Development, Web Development | Leave a Comment »
Posted by jpluimers on 2020/12/08
Since I always forget that you can have any cell marked as th to make it a header: [WayBack] Tables with two headers • Tables • WAI Web Accessibility Tutorials.
This is not just limited to top rows, you can use it any where:
- in the left column
- in any other row
- in any other column
- in individual cells
In addition, a table can also have a caption, which is not just useful for screen-readers: it benefits general readability.
Quoting the page:
For such tables, use the <th> element to identify the header cells and the scope attribute to declare the direction of each header. The scopeattribute can be set to row or col to denote that a header applies to the entire row or column, respectively.
Additionally, you can use the <caption> element to identify the table in a document. This is particularly useful for screen-reader users browsing the web page in “table mode” where they can navigate from table to table.
Examples on that page:
–jeroen
Posted in Development, HTML, HTML5, Software Development, Web Development | Leave a Comment »
Posted by jpluimers on 2020/11/03
Since I keep forgetting this has been possible since the introduction of html 5: [WayBack] html – Is it possible to specify a starting number for an ordered list? – Stack Overflow:
If you need the functionality to start an ordered list (OL) at a specific point, you’ll have to specify your doctype as HTML 5; which is:
<!doctype html>
With that doctype, it is valid to set a start attribute on an ordered list. Such as:
<ol start="6">
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ol>
–jeroen
Posted in Development, HTML, HTML5, Software Development, Web Development | Leave a Comment »
Posted by jpluimers on 2020/10/13
[WayBack/Archive.is] Dimensions – Chrome Web Store: A tool for designers to measure screen dimensions
This extension measures the dimensions from your mouse pointer up/down and left/right until it hits a border. So if you want to measure distances between elements on a website this is perfect. It doesn’t really work with images because there the colors change a lot pixel to pixel.
# Images & HTML Elements
Measure between the following elements: images, input-fields, buttons, videos, gifs, text, icons. You can measure everything you see in the browser.
# Mockups
Your designer handed you mockups as PNGs or JPEGs? Just drop them into Chrome, activate Dimensions and start measuring.
# Keyboard Shortcut
You can start and stop dimensions with the ALT + D shortcut.
# Area Boundaries
Wanna get the radius of a circle? Is text standing in your way? Press Alt to measure the dimensions of a connected area.
–jeroen
Via:
Posted in Chrome, Chrome, Development, Google, HTML, Power User, Software Development, Web Browsers, Web Development | Leave a Comment »
Posted by jpluimers on 2020/06/25
From a while back, but still relevant as the speed of the GMail web-UI still has not improved.
[WayBack/Archive.is] Peeking under the hood of redesigned Gmail – Boris – Medium
Via:
–jeroen
Read the rest of this entry »
Posted in CSS, Development, GMail, Google, HTML, JavaScript/ECMAScript, Power User, Scripting, Software Development, Web Development | Leave a Comment »
Posted by jpluimers on 2019/09/02
Being a back-end and library person by heart, I am always late in the web-UI game, so this is on my list of things to try: CSS flex-box layout – Wikipedia.
I saw it being used by [WayBack] markdownlint demo: Demo for markdownlint, a Node.js style checker and lint tool for Markdown/CommonMark files.
Some links that should me help further:
–jeroen
Read the rest of this entry »
Posted in CSS, Development, HTML, HTML5, Software Development, Web Development | Leave a Comment »
Posted by jpluimers on 2019/06/07
`ls` colour codes
I got confused as I thought red text would mean an error.
But they’re not: greenish yellow on a read background means error (a symbolic link to a place that’s no longer there).
It’s the output of https://github.com/gkotian/gautam_linux/blob/master/scripts/colours.sh as the one at
Actually the script is here https://raw.githubusercontent.com/gkotian/gautam_linux/master/scripts/colours.sh as the one at [WayBack] command line – What do the different colors mean in the terminal? – Ask Ubuntu failed with errors like this one:
-bash: *.xbm: bad substitution
The full script output is below.
Since various terminals have a different mapping from colours in the ANSI escape code colour table, I used the standard HTML colours using (which slightly differs from the Terminal.app screenshot on the right):
References:
Note that the shell on Mac OS X uses a different way of configuring colours CLICOLOR as described in [WayBack] settings – CLICOLOR and LS_COLORS in bash – Unix & Linux Stack Exchange. I might cover that another day.
Script output:
Read the rest of this entry »
Posted in *nix, *nix-tools, ANSI escape code, bash, CSS, Development, Encoding, HTML, HTML5, Linux, openSuSE, Power User, Software Development, SuSE Linux, Tumbleweed, Web Development | Leave a Comment »
Posted by jpluimers on 2019/01/23
As a back-end person, sometimes I wondered about CDATA in front-end HTML code was for, especially in JavaScript and CSS style elements.
[WayBack] HTML vs. XHTML – WHATWG Wiki explains how to be compatible with XHTML, HTML, XML based tools and older browsers:
The following code with escaping can ensure script and style elements will work in both XHTML and HTML, including older browsers.
In both cases, XML ignores the first comment and then uses the CDATA section to avoid the need for escaping special characters < and & within the rest of the contents (with subsequent JavaScript comments added within to ensure the HTML-oriented code is ignored by JavaScript).
In HTML, older browsers might display the content without the content being within a comment, so comments are used to hide this from them (while modern HTML browsers will run code inside the comments). The subsequent JavaScript comment is added to negate the text added for the sake of XHTML.
The <style> requires the /**/ comments since CSS does not support the single line ones.
<!---->
...
//-->
<style type="text/css"><!--/*--><![CDATA[/*><!--*/
...
/*]]>*/--></style>
If not concerned about much older browsers (from which one is hiding the HTML) one can use the simpler:
//
<style>/*<![CDATA[*/
/*]]>*/</style>
Also note that the sequence “]]>” is not allowed within a CDATA section, so it cannot be used in true XHTML-embedded JavaScript without escaping.
–jeroen
via:
Posted in CSS, Development, HTML, HTML5, JavaScript/ECMAScript, Scripting, Software Development, Web Development | Leave a Comment »
Posted by jpluimers on 2019/01/16
I need to document this properly later, but here are some links I used when fiddling with iframe elements:
A few things I learned:
- You can either put the iframe elements in different divs then arrange the divs, or put a different ID on each iframe and arrange the iframe. In either case you will need a
float: left; in your style and a width: 100vw in the div around all your frames.
- Be aware that
100% isn’t 100% out of the box: default browser styles have a margin around your page and a border around an iframe.
So you will need to fiddle with margin and border-width inside your styles for body and iframe. Easiest is to set them to none or 0.
- Viewport width/height works easier for me than raw %.
- For one-off situations, I like the good old meta refresh over fiddling with JavaScript.
–jeroen
Posted in CSS, Development, HTML, Web Development | Leave a Comment »
Posted by jpluimers on 2018/11/08
Based on:
- Download the most recent x64 Apache binaries for Windows from [WayBack] Apache VC15 binaries and modules download (at the time of writing: https://www.apachelounge.com/download/VC15/binaries/httpd-2.4.34-win64-VC15.zip )
- Extract recursively to
D:\bin
- Run the UltrawareController locally
- Run
D:\bin\httpd-2.4.34-win64-VC15\Apache24\bin\ab.exe -n 1000 -c 10 http://localhost:8000/foo
This will run the ab Apache benchmark tool with 1000 connections using 10 threads all doing the same http GET request at http://localhost:8000/foo
If you want to test TLS (https) connections, then you need to use the abs tool in the same directory as the ab tool supports http-only (when you still try, you get the message SSL not compiled in; no https support as explained in [WayBack] Add https support to Apache Bench on Windows – Stack Overflow).
Download location via [WayBack] windows – Is there any link to download ab Apache benchmark – Stack Overflow:
There are many more command-line parameters documented at [WayBack] ab – Apache HTTP server benchmarking tool – Apache HTTP Server Version 2.4, this is the summary:
Synopsis
ab [ -A auth-username:password ] [ -b windowsize ] [ -B local-address ] [ -c concurrency ] [ -Ccookie-name=value ] [ -d ] [ -e csv-file ] [ -f protocol ] [ -g gnuplot-file ] [ -h ] [ -Hcustom-header ] [ -i ] [ -k ] [ -l ] [ -m HTTP-method ] [ -n requests ] [ -p POST-file ] [ -Pproxy-auth-username:password ] [ -q ] [ -r ] [ -s timeout ] [ -S ] [ -t timelimit ] [ -Tcontent-type ] [ -u PUT-file ] [ -v verbosity] [ -V ] [ -w ] [ -x <table>-attributes ] [ -Xproxy[:port] ] [ -y <tr>-attributes ] [ -z <td>-attributes ] [ -Z ciphersuite ] [http[s]://]hostname[:port]/path
Via: [WayBack] apache – ab load testing – Stack Overflow
––jeroen
Posted in Communications Development, Development, HTML, HTTP, Internet protocol suite, Software Development, Web Development | Leave a Comment »
The Wiert Corner - irregular stream of stuff 