CSS Positioning

Every element on a page is a rectangle, or block, of pixels. They can be positioned using the attributes: top:, bottom:, left:, right: and position:

top: bottom: left: right:   {{ style }}


TEXT


The default is position: static. The others require top, bottom, left or right else behave like static.

To use position: absolute> sets the position relative to the parent of the element while position: fixed sets the position relative to the viewport.

To use position: relative positions the element relative to top, bottom, left or right.

To use position: sticky with behaves like position: static or position: relative until scrolling past it at which it behaves like position: fixed. This article has a scroll bar to show the effect.

Please see: positioning and widths.

Parallax scrolling

The background image stays fixed even as one scrolls down.
.parallax { background-image: url("img_parallax.jpg"); height: 500px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }

Block Formatting Context (BFC)

Each element on a page is a rectangle of pixels referred to as a block.

A BFC is like an isolated page layout inside a page, everything is contained inside a BFC; it stops content, such as floating elements (e.g. figures), escaping out of it's surrounding box. it stops content, such as text, wrapping around floated contents and prevents margins collapsing. If there is not enough text to wrap around floated content, then the float may overlap the surrounding box. A floated element is a BFC and contains anything inside it. 


		.text {
		overflow: auto;
		}

Overflow auto implies a BFC which implies text does not wrap.

This article has a nice summary.

From a CSS perspective, the 'div' and 'span' tags have similar semantic in that they both set a style over their contents, by default 'div' has display:block and 'span' has display:inline. One can set 'span' with display:block but it is not quite the same as 'div' However, HTML does not allow one to add block elements inside 'span'.

Allowed by HTML

Not allowed by HTML
Flash Of Unstyled Content (FOUC)

A Flash Of Unstyled Content occurs when a web page is displayed using incomplete CSS and then redraws with complete CSS. Many ways to deal with this, one way is to set visibility to hidden before loading any stylesheets and to visible after loading. For example: 


		<style>html{visibility: hidden;opacity:0;}</style>
		<link rel="stylesheet" href="../static/main.css">
		<link rel="stylesheet" href="style.css">
		...
		<style>html{visibility: visible;opacity:1;}</style>

An opacity of 0 is entirely transparent and opacity of 1 has no transparency.

Responsive design

Responsive design involves making web pages display correctly on mobile devices.

  1. Set the viewport tag, for instance: <meta name="viewport" content="width=device-width">
  2. Under Chrome Ctrl-Shift-I will bring up DevTools for debugging web pages, Ctrl-Shift-M will bring up DevTools for mobile.
  3. A Table of viewport sizes.
Resetting and normalizing CSS

The aim of CSS resets is to removes all browser default styling while the aim of Normalize.css is to make styling consistent across browsers. In the former one must add back the styling.

  • Reset
  • Normalize.css
    • Checkbox styling

    One might expect to change the background colour of an HTML checkbox as follows, one cannot.

    input[type="checkbox"] { background: #990000; }

    Menu icons (☰)

    The symbol used to represent a hamburger menu icon (☰) on apps and websites, is actually the unicode Trigram for heaven character, one of the Bagua symbols.

    One way to add it to the far right of the title header at the top of the screen:
    <header> <h1>...Title...</h1> </header>

    In CSS 'after' is refered to as a 'pseudo-element' and the following CCS sets the style for such an element that appears after the 'h1' element in a 'header'. It sets the 'content' to the unicode symbol \2630 (☰).
    header h1::after { content: "\2630"; position: absolute; top: 7rem; right: 3rem; }

    Use of dollar and underscore in Javascript

    In Javascript, the dollar and underscore characters are technically just identifiers. By convention, the underscore isued to prefix private properties and methods; and dollar is, again by convention, used as a shortcut to get an element by id:

    function $(x) { return document.getElementById(x) }

    Canvas: arcTo

    The canvas arcTo function.

    Load file into client

    Use the file API.

    WebAssembly (WASM)
    to be completed

    The text format for wasm is in the form of s-expressions and so looks a bit like LISP, this format is kept in WebAssembly Text '.wat' files that are converted to '.wasm':

    Result:

    Portable assembler on the night train to Cologne

    I was on the last night train from Gotenberg to Cologne, in a couchette with six seats and six fold down beds. There were three of us and we had one of those conversations where you feel you solved all the worlds problems in the evening and can't remember any details in the morning. One of the guys worked at a language lab and had his own personal programming language for rule based reasoning written in C. Much to my surprise he had compiled his C into Javascript. The conventional way of things is to you wrote an dynamically typed language like Javascript in C, then you compiled C in assembler language and then assembler into a machine language, using Javascript as the machine language. I believe he was using clang a C compiler that generates LLVM. Traditionally, an assembler language was a "simple" language specific to a particular typeof microprocessor hardware. Typically an assember maps one to one to a special "binary instruction" format held in memory that hardware can execute directly. LLVM looks mostly like an assembler language is not tied to any hardware, a portable assembler language. One can compile C, C++, Rust, Go and so on the LLVM but then you need another translator to convert the LLVM to the underlying hardware assembler language. However, someone wrote a translator from LLVM to Javascript. Now this is very convenient as it means one can run traditional programs in a web browser. C, C++ and Rust are very much designed to be "fast" languages, that is they are designed to map straight to the hardware assembler language without loss of efficiency. Languages like LISP, Python, Jasvscript and so on are more designed to make efficient use of a programmers time, and one can typically knock out (smallish) programs much more quickly than in C and so on. Having said that, I have the impression an awful lot of work has been put into optimizing Javascript in the browser so it can be surprisingly.

    Nonetheless, Javascript is not an ideal assembler language, it was never designed to map directly to hardware. So Web assember is a binary instruction format that runs in various browsers and has an associated assembler language. So one can write programs in C, C++, Rust and Go and run them in a web browser rather than having to write everything in Javasscript.

    It is not just a case of efficiency, the lack of strong type checking means that you don't find out about errors until run time whereas the others won't even compile, lt alone run until you have sorted out these issues. My experience with Rust is that once you do manage to get it to compile, it's pretty much correct.

    Portable assembler languages are hardly new, the JVM has been around since the 1990's and was integrated with the browser as Java Applets and Java Web Start, though there never seemed to catch on. JVM is kind of optimized for Java, whereas WASM is designed more for other langauges (C, C++, Rust and so on). Also, WebAssembly is designed for streaming compilation, so it is compiled and run as a page download.

    Assistive technology (AT)

    1. Avoid font-family: cursive
    2. Do not disable or limit viewport zoom
    3. Plain and simple language
    4. Add lang attribute to html tag to allow screens readers to pronounce correctly: $ sed -i 's///g' */*.html
    5. Text contect clearly explaining all non-text content

    Vuejs passing attribute to component

    Declare a component: Vue.component('plot', { props: { applyLog : Boolean }, ...

    The following will not work

    <plot v-bind:applyLog="true">

    The following does work:

    <plot v-bind:apply-log="true">

    Script Tag

    'async' scripts execute right away after download before the window’s load event and so may not run in the order they are written, 'defer' scripts will execute in the order writeen.

    Simplest web server python3 -m http.server 8080