<commit_before>== HTML styling

Three important properties control the space that surrounds each HTML element: 
. padding, 
. margin, and 
. border.

The four values available for padding and margin: -top, -right, -left and -bottom
These four values work like a clock: top, right, bottom, left, and will produce 
the exact same result as using the side-specific padding instructions.

CSS Styling.

Browsers read CSS from top to bottom. That means that, in the event of a conflict, 
the browser will use whichever CSS declaration came last. Except an Id tag which takes precedence
over classes.

== HTML5 video and audio

any sort of open source, free or commercial video encoding software, such as Handbrake 
(free, open source) or Super (free). There are also online video encoding services, 
and you can even upload your video to YouTube, let it encode your video in several resolutions 
and codecs, and use a browser extension such as VideoDownloadHelper (for Firefox) to download the 
video in your chosen formats.

recommended formats are mp4/H264 and in webm formats, and ogg.

= Adding subtitles
Many tools - both free and commercial - are available to add subtitles to a video. 
Most are native applications you need to install on your computer. However, a free and 
very practical tool is available for doing this 100% in a Web browser: http://www.universalsubtitles.org, 
also known as http://www.amara.org.

### HTML5 api

For 60 frames/second animation, use requestAnimationFrame API, this is a good 
complement to the canvas API.

## Input key and mouse events
. https://css-tricks.com/snippets/javascript/javascript-keycodes/[Keycodes table and tester]

```code Javascript

// Best practice is to use which property of event object
var code = e.keyCode || e.which

// and to get access to events on canvas use window object.

 window.addEventListener('keydown', handleKeydown, false);
 
 
 ** The tabindex attribute of the canvas element makes it focusable. Without it, it will never get the focus!

The trick is to declare the canvas like this:

``` HTML5

<canvas id="myCanvas" width="350" tabindex="1" height="200">
</canvas>

// And we force the canvas to get the focus with:


canvas=document.getElementById('myCanvas');
...
canvas.focus();
 <commit_msg>input types<commit_after>== HTML styling

Three important properties control the space that surrounds each HTML element: 
. padding, 
. margin, and 
. border.

The four values available for padding and margin: -top, -right, -left and -bottom
These four values work like a clock: top, right, bottom, left, and will produce 
the exact same result as using the side-specific padding instructions.

CSS Styling.

Browsers read CSS from top to bottom. That means that, in the event of a conflict, 
the browser will use whichever CSS declaration came last. Except an Id tag which takes precedence
over classes.

== HTML5 video and audio

any sort of open source, free or commercial video encoding software, such as Handbrake 
(free, open source) or Super (free). There are also online video encoding services, 
and you can even upload your video to YouTube, let it encode your video in several resolutions 
and codecs, and use a browser extension such as VideoDownloadHelper (for Firefox) to download the 
video in your chosen formats.

recommended formats are mp4/H264 and in webm formats, and ogg.

= Adding subtitles
Many tools - both free and commercial - are available to add subtitles to a video. 
Most are native applications you need to install on your computer. However, a free and 
very practical tool is available for doing this 100% in a Web browser: http://www.universalsubtitles.org, 
also known as http://www.amara.org.

### HTML5 api

For 60 frames/second animation, use requestAnimationFrame API, this is a good 
complement to the canvas API.

## Input key and mouse events
. https://css-tricks.com/snippets/javascript/javascript-keycodes/[Keycodes table and tester]

```code Javascript

// Best practice is to use which property of event object
var code = e.keyCode || e.which

// and to get access to events on canvas use window object.

 window.addEventListener('keydown', handleKeydown, false);
 
 
 ** The tabindex attribute of the canvas element makes it focusable. Without it, it will never get the focus!

The trick is to declare the canvas like this:

``` HTML5

<canvas id="myCanvas" width="350" tabindex="1" height="200">
</canvas>

// And we force the canvas to get the focus with:


canvas=document.getElementById('myCanvas');
...
canvas.focus();
 
HTML5 forms
--------------

HTML5 introduced 13 new input types, covering most of the needs reported by Web 
developers who until now had relied on JavaScript frameworks.
.color
.date
.datetime
.datetime-local
.email
.month
.number
.range
.search
.tel
.time
.url
.week
{'fraction_non_alphanumeric': 0.07144340602284527, 'fraction_numerical': 0.008722741433021807, 'mean_word_length': 4.0588235294117645, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 2, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '438413', 'n_tokens_mistral': 1332, 'n_tokens_neox': 1261, 'n_words': 681}