Notes on some Computer Technologies

elements with no content, and no end tag

• area
• base
• br
• col
• embed
• hr
• img
• input
• keygen
• link
• meta
• param
• source
• track
• wbr

Empty elements can be "closed" in the opening tag like this: <br />

HTML5 does not require empty elements to be closed. But if you want stricter validation, or you need to make your document readable by XML parsers, you should close all HTML elements.

• time

https://html.spec.whatwg.org/multipage/text-level-semantics.html

• table
• caption
• colgroup
• col
• thead
• tbody
• tfoot
• tr
• th
• td

The tbody element is used in conjunction with the thead and tfoot elements

Browsers can use these elements to enable scrolling of the table body independently of the header and footer.

attributes of table cells

The h1–h6 elements are headings.

The first element of heading content in an element of sectioning content represents the heading for that section. Subsequent headings of equal or higher rank start new (implied) sections, headings of lower rank start implied subsections that are part of the previous one. In both cases, the element represents the heading of the implied section.

• body
• main
• div
• p
• hr
• pre
• blockquote
• ol
• ul
• li
• dl
• dt
• dd
• figure
• figcaption

new in html5:

• article
• aside
• footer
• header
• nav
• section

Using HTML section semantics

The in-memory representation is known as DOM HTML, or the DOM for short.

There are various concrete syntaxes that can be used to transmit resources that use this abstract language, two of which are defined in this specification.

The first such concrete syntax is the HTML syntax. This is the format suggested for most authors. It is compatible with most legacy Web browsers. If a document is transmitted with the text/html MIME type, then it will be processed as an HTML document by Web browsers. This specification defines the latest HTML syntax, known simply as HTML.

The second concrete syntax is the XHTML syntax, which is an application of XML. When a document is transmitted with an XML MIME type, such as application/xhtml+xml, then it is treated as an XML document by Web browsers, to be parsed by an XML processor.

Let's say you open a web browser... and load a web page in it... Now, inside the browser, there is a window object. This object represents the browser window.

This window object has dozens of properties (members), the most important of them being the document object. The document object represents the web page that is currently loaded into the browser window.

A node is an object that is "connected" to other objects from the DOM tree.

The JavaScript programs that are bound to a web page have complete access to every node of the DOM tree. They can delete nodes, add new nodes, or just manipulate the properties of a node.

...

HTML describes the structure of a document. The browser parses HTML and constructs an internal representation of the elements of the document from it

This internal representation is the DOM, the Document Object Model. This is the basis for creating the actual visual representation of the website.

The DOM for a webpage differs from the page source HTML for various reasons, e.g.:

• Scripts in the page can manipulate the DOM (add/delete/modify nodes).
• A <table> element requires (in the DOM) a <tbody> child element. If the page source HTML doesn't have one, the browser will put one into the DOM for the page.

The browser will just insert that <tbody> for you. It will be there in the DOM, so you'll be able to find it with JavaScript and style it with CSS, even though it's not in your HTML.

Legacy DOM was limited in the kinds of elements that could be accessed. Form, link and image elements could be referenced with a hierarchical name that began with the root document object. A hierarchical name could make use of either the names or the sequential index of the traversed elements. For example, a form input element could be accessed as either document.formName.inputName or document.forms[0].elements[0].

The Legacy DOM enabled client-side form validation and the popular "rollover" effect.

CSS 2.1

CSS level 2 revision 1...went back and forth between Working Draft status and Candidate Recommendation status for many years... Candidate Recommendation...2004... it was finally published as a W3C Recommendation on 7 June 2011.

CSS 3

Unlike CSS 2, which is a large single specification defining various features, CSS 3 is divided into several separate documents called "modules"... The earliest CSS 3 drafts were published in June 1999.

Due to the modularization, different modules have different stability and statuses. As of June 2012, there are over fifty CSS modules published from the CSS Working Group, and four of these have been published as formal Recommendations:

• 2012-06-19: Media Queries
• 2011-09-29: Namespaces
• 2011-09-29: Selectors Level 3
• 2011-06-07: Color

Some modules (including Backgrounds and Borders and Multi-column Layout among others) have Candidate Recommendation (CR) status and are considered moderately stable.

CSS 4

Because CSS3 split the CSS language's definition into modules, the modules have been allowed to level independently. Most modules are level 3... A few level-4 modules exist (such as Image Values, Backgrounds & Borders, or Selectors), which build on the functionality of a preceding level-3 module. Other modules defining entirely new functionality, such as Flexbox, have been designated as "level 1".

So, although no monolithic CSS4 will be worked on after CSS3 is finished completely, the level 4 modules can collectively be referred to as CSS4.

• type (element type)
• universal *
• attribute [ ]
• class .
• id #
• contextual combinators >  +~
  (child, descendant, adjacent sibling, sibling)
  e.g. div * p selects any p element descendent from a descendant of a div element.
• pseudo-element
  not all style properties apply
  • ::first-letter
  • ::first-line
  • ::before
  • ::after
  • ::selection
  
  
• pseudo-class
  these must be styled in the given order to be effective
  • a:link
  • a:visited
  • a:hover
  • a:active
  
  there are many more pseudo-elements, e.g.:
  • :valid
  • :invalid
  • :first-child
  • :nth-child
  
  

CSS will typically style a tag using the most specific DOM description that can be applied to it.

comment: /*    */ (single-line and multi-line)

inherited

not inherited

• inherited:
  • border-collapse
  • border-spacing
  • text-align
• not inherited:
  • border
  • padding
  • vertical-align

to center a block element having width set to < 100%: margin: auto

centering in CSS

how to center in CSS

relationships between 'display', 'position', and 'float'

Tip: When aligning elements with position or with float, always define margin and padding for the body element. This is to avoid visual differences in different browsers.

width's big caveat: the box model adds padding and border-width
solution: use the experimental new box-sizing: border-box;
Since small is pretty new, you should use the -webkit- and -moz- prefixes for now

Inline elements: respect left & right margins and padding, but not top & bottom; cannot have a width and height set; allow other elements to sit to their left and right.

Inline-block elements: allow other elements to sit to their left and right; respect top & bottom margins and padding; respect height and width

Block elements: respect all of those; force a line break after the block element

The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents.

The defining aspect of the flex layout is the ability to alter its items' width and/or height to best fill the available space on any display device. A flex container expands items to fill available free space, or shrinks them to prevent overflow.

The flexbox layout algorithm is direction-agnostic as opposed to the block layout, which is vertically-biased, or the inline layout, which is horizontally-biased.

Unlike many programming languages Perl does not currently implement true multiline comments. This, and the workarounds that are in common use can be problematic. This could be solved by adding a new syntax...

The alternatives available to Perl programmers however are neither easy (comment each and every line of code individually..., nor consistent (use some other language feature to simulate multiline comments, like POD [Plain Old Documentation]).

What's Wrong With POD?

• it's not intuitive
• it's not documentation
  ... most of the time comments are not intended to be included in the documentation (separate from the code). This is particularly true when using comments as a debugging tool.
• it doesn't encourage consistency

learn.perl.org
perlmonks.org
stackoverflow.com

Perl, by default, does not have any specific tokens to specify multiline comments. Nevertheless, there are several workarounds to accomplish this.

The easiest solution is to use the POD [Plain Old Documentation] system, enclosing the comments between 2 lines: the first line should begin with '=comment' and the last line should begin with '=cut'.

...

Perl has rather inflexible and limited comments. The desire to preserve compatibility with shell languages dictated the use of #, but here Perl robbed itself of [an] important symbol (that can be used, for example for casting scalars into numeric).

• scalar
• array
• hash

syntax

Perl tutorial

hello script example

Perl CGI programming

window
    properties:
    	global variables
    	global objects
    	innerWidth, innerHeight
        document, location, history, screen, navigator*
            - document.getElementById("abc")
              document.getElementsByTagName("h2")
              document.getElementsByClass("class1")
              document.getElementsByName("name1")
              document.querySelectorAll() ?
            - location.href/hostname/pathname/protocol/assign(load doc)
            - history.back()/forward()
            - screen.width/height/availWidth/availHeight/colorDepth=pixelDepth
            - navigator.appName/appCodeName/platform/cookieEnabled/product
              (engine)/appVersion/userAgent(v detail)/language/javaEnabled()
                * different browsers can use the same name
                * navigator data can be changed by browser owner
                * some browsers misidentify themselves to bypass site tests
                * browsers cannot report new operating systems (released later)
    methods:
        global functions
        open(), close(), moveTo(), resizeTo()
        alert(), confirm(), prompt()
        setInterval(), clearInterval(), setTimeout(), clearTimeout()

    (window properties and methods can be written without the window. prefix)


document.cookie
    JS can create, read, and delete cookies with this property.
    document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC;
     path=/";
    document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC"; path=;
    document.cookie will return all cookies in one string much like:
        cookie1=value; cookie2=value; cookie3=value;



There are no official standards for the Browser Object Model (BOM).

Since modern browsers have implemented (almost) the same methods and properties
 for JavaScript interactivity, it is often referred to, as methods and
 properties of the BOM.
 [- w3schools.org]


https://www.youtube.com/watch?v=dgI52y27O_I
49:00- top-down CSS selector
51:00- bottom-up - how CSS selectors are implemented in browsers (CSS selector
 engines) -- sometimes this style is faster

           

• boolean
• number
  (64-bit floating point)
• string
• object
  • Object
  • Date
  • Array
• function
• undefined
• null
  (undefined == null)   true
  (undefined === null) false

JS types are "dynamic"--the same variable can be used as different types

dynamic typing

types associated with values, not w/ variables

• use semicolon ; at the end of each simple statement
• use semicolon ; at the end of object, date object, array definitions
• no semicolon at the end of functions, conditionals, loops
• single-line comment://
• multi-line comment:/*    */

• In HTML the default global object is the HTML page itself, so the function above "belongs" to the HTML page. In a browser the page object is the browser window. The function above automatically becomes a window function. myFunction() and window.myFunction() is the same function.
• This is a common way to invoke a JavaScript function, but not a good practice in computer programming. Global variables, methods, or functions can easily create name conflicts and bugs in the global object.
• Invoking a function as a global function, causes the value of this to be the global object. Using the window object as a variable can easily crash your program.
• In JavaScript you can define functions as object methods.
• The thing called this, is the object that "owns" the JavaScript code.
• With call() or apply() you can set the value of this, and invoke a function as a new method of an existing object.
• using this
• best practices: avoid global variables, declarations on top, initialize, avoid new ( Boolean(), Number(), String(), Object(), Array(), RegExp(), function ), use parameter defaults, avoid ==, avoid eval()

object-based

runtime evaluation (eval function)

objects are prototype-based (classless; instance-based)

supports functional programming (declarative; referential transparency)

• abstract
• arguments
• boolean
• byte
• var
• new
• typeof
• null
• short
• long
• double
• float
• true
• false
• try
• throw
• catch
• finally
• debugger
• throws
• function
• return
• if
• else
• switch
• case
• break
• default
• for
• in
• do
• while
• continue
• goto

learn about:
abstract, arguments, byte, char, class*, const, delete, eval, export*, extends*, final, implements, import*, instanceof, int, interface, let, native, package, private, protected, public, static, super*, synchronized, this, transient, void, volatile, with, yield

Quick Guide