Merge branch 'release/0.9.0'
Nathan Steel
3 years ago
commit
5f0bfd6aa1
@ -0,0 +1,128 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Nathan (Aney) Steel">
|
||||
<meta name="theme-color" content="white">
|
||||
<meta name="theme-color" content="green">
|
||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
||||
<title>Release 0.9.0</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<a href="#main" class="vh">Jump directly to main content</a>
|
||||
<h1>Release 0.9.0</h1>
|
||||
<input id="burger-toggle" type="checkbox"/>
|
||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
||||
<hr/>
|
||||
<nav>
|
||||
<a href="/">home</a>
|
||||
<a href="/about.html">about</a>
|
||||
<a href="/projects.html">projects</a>
|
||||
<a href="/blog/">blog</a>
|
||||
<a href="/sitemap.html">misc</a>
|
||||
<a href="/support.html">support</a>
|
||||
</nav>
|
||||
<hr/>
|
||||
</header>
|
||||
|
||||
<main id="main">
|
||||
<h2>Accessibility and Design</h2>
|
||||
<p>Release 0.9.0 was a non-functionality release, as I focussed my lil' brain on Accessibility, the User Experience (UX), and the design of the website. Also this is my first publicised "patch note" so go easy, ok.</p>
|
||||
|
||||
<h2>Accessiblity</h2>
|
||||
<ul>
|
||||
<li>Fix burger menu's accessiblity issues
|
||||
<ul>
|
||||
<li>Add label content, but make hidden for non screen-readers.</li>
|
||||
<li>Make top of burger clickable. The burger wasn't fitting to its elements container, as a negative margin was used.</li>
|
||||
</ul></li>
|
||||
<li>Add "Skip nav" functionality
|
||||
<ul>
|
||||
<li>Added a hidden button for keyboard tab-targetting that skips over the navigation, straight to the content.</li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
|
||||
<h2>User Experience</h2>
|
||||
<ul>
|
||||
<li>Styled <code><code></code> tags
|
||||
<ul>
|
||||
<li>So they can be used in-line to aid with any development guides.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
Make mobile nav/burger fixed
|
||||
<ul>
|
||||
<li>This allows the navigation to be opened/closed and visible from anywhere on the page, not just the top.</li>
|
||||
</ul>
|
||||
</li></ul>
|
||||
|
||||
<h2>Design/User Interface</h2>
|
||||
<ul>
|
||||
<li>Font<ul>
|
||||
<li>Increase the font-size.</li>
|
||||
<li>Increase the whitespace used around the site.</li>
|
||||
</ul></li>
|
||||
<li>Colours<ul>
|
||||
<li>Altered colours to improve the visual hierarchy of the elements.</li>
|
||||
</ul></li>
|
||||
<li>Remove hr above navigation<ul>
|
||||
<li>Due to the nav now being atop the page, this wasn't needed to seperate the content.</li>
|
||||
</ul></li>
|
||||
<li>Restyle mobile nav<ul>
|
||||
<li>Instead of having the nav just pop-up atop the page, it now displays as a sidebar.</li>
|
||||
</ul></li>
|
||||
<li>Add background and border to burger<ul>
|
||||
<li>As it's not fixed it needed to be visually differentiated from content.</li>
|
||||
</ul></li>
|
||||
<li>Scrollable table<ul>
|
||||
<li>Super basic overflow-x on a parent of table so tables fit on screen, but all content can still be accessed.</li>
|
||||
</ul></li>
|
||||
<li>Add <code>&nbsp;</code> to tags<ul>
|
||||
<li>Multiple word tags were breaking, and looked pretty bad, so made them non-breakable.</li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
|
||||
<h2>Dev</h2>
|
||||
<ul>
|
||||
<li>Colour simplification<ul>
|
||||
<li>I changed the colours to all be 3 digit HEX values, saving a few bytes for the CSS.</li>
|
||||
</ul></li>
|
||||
<li>Add test.html page<ul>
|
||||
<li>For <a href="/test.html">testing elements</a> without navigating through the site, it's public too because why not.</li>
|
||||
<li>Side note: This got me thinking about writing a lil' CSS framework.</li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
|
||||
<h2>Known Issues</h2>
|
||||
<ul>
|
||||
<li>When the burger menu is active, the page is still scrollable<ul>
|
||||
<li>Easily fixed with JS (and a basic overflow), however I want to stay away from JS as much as possible. I believe the approach I took is the best-case scenario, as users at least know if they're scrolling with the sidebar styled nav.</li>
|
||||
</ul></li>
|
||||
<li>Burger nav animation<ul>
|
||||
<li>Changes to clickable area of burger icon meant the animation needed tweaking, and it looks worse. It's not really important though.</li>
|
||||
</ul></li>
|
||||
<li>h1 in nav<ul>
|
||||
<li>I was contemplating moving this into the main, but have yet to do so. Not sure if this is technically an issue, but will need to look into it.</li>
|
||||
</ul></li>
|
||||
<li>Scrollable table<ul>
|
||||
<li>I'd like a better solution than this, preferably one that doesn't require an additional element.</li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
|
||||
<h2>Final words</h2>
|
||||
<p>This release should offer better accesibility, and a nicer look and feel all around.</p>
|
||||
<p>All changes were made as semantic as possible, and the site has been kept accessible, and usable for those not running CSS/JS at all (for instance terminal browsers, and neo-luddites with everything disabled).</p>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<hr/>
|
||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 389 B |
Binary file not shown.
|
After Width: | Height: | Size: 360 B |
@ -0,0 +1,360 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="A page with all HTML elements used on Aney's website. Attempted to get all elements, even those not used so it's easier to test.">
|
||||
<meta name="author" content="Nathan (Aney) Steel">
|
||||
<meta name="theme-color" content="white">
|
||||
<meta name="theme-color" content="black">
|
||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
||||
<title>HTML element test page</title>
|
||||
</head>
|
||||
|
||||
<body id="top">
|
||||
<header>
|
||||
<a href="#main" class="vh">Jump directly to main content</a>
|
||||
<h1>HTML element test page (h1)</h1>
|
||||
<input id="burger-toggle" type="checkbox"/>
|
||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><div class="sr">Burger menu</div></label>
|
||||
<hr/>
|
||||
<nav>
|
||||
<a href="/">home</a>
|
||||
<a href="/about.html">about</a>
|
||||
<a href="/projects.html">projects</a>
|
||||
<a href="/blog/">blog</a>
|
||||
<a href="/sitemap.html">misc</a>
|
||||
<a href="/support.html">support</a>
|
||||
</nav>
|
||||
<hr/>
|
||||
</header>
|
||||
|
||||
<main id="main">
|
||||
<section>
|
||||
<h1>HTML element test page (h1)</h1>
|
||||
<p>Welcome, you've found my testing page. A page with all HTML elements I could drop in (even if not used on site), that is used for testing my CSS to ensure it's works everywhere I can get it to.</p>
|
||||
|
||||
<h2>heading 2 (h2)</h2>
|
||||
<h3>heading 3 (h3)</h3>
|
||||
<h4>heading 4 (h4)</h4>
|
||||
<h5>heading 5 (h5)</h5>
|
||||
<h6>heading 6 (h6)</h6>
|
||||
|
||||
<h2>Paragraphs</h2>
|
||||
<p>A simple little paragraph.</p>
|
||||
<p>Followed by another with a link <a href="/">home</a></p>
|
||||
|
||||
<h2>Lists</h2>
|
||||
<h3>ul</h3>
|
||||
<ul>
|
||||
<li>List item 1</li>
|
||||
<li>List item 2</li>
|
||||
<li>List item 3</li>
|
||||
</ul>
|
||||
<h3>ol</h3>
|
||||
<ol>
|
||||
<li>List item 1</li>
|
||||
<li>List item 2</li>
|
||||
<li>List item 3</li>
|
||||
</ol>
|
||||
<h3>dl</h3>
|
||||
<dl>
|
||||
<dt>Term</dt>
|
||||
<dd>Description 1</dd>
|
||||
<dd>Descripton 2</dd>
|
||||
</dl>
|
||||
<h3>menu</h3>
|
||||
<menu>
|
||||
<ul>
|
||||
<li>List item 1</li>
|
||||
<li>List item 2</li>
|
||||
<li>List item 3</li>
|
||||
</ul>
|
||||
</menu>
|
||||
|
||||
<h2>Code</h2>
|
||||
<pre><code><p>Example of code inside a pre.<p></code></pre>
|
||||
<code>Code alone.</code>
|
||||
<p>And heres some <code>code inside a tag</code>, namely a paragraph.</p>
|
||||
|
||||
<h2>Tables</h2>
|
||||
<p>Each of these are wrapped by an element with <code>.tblcon</code> class.</p>
|
||||
<div class="tblcon">
|
||||
<table>
|
||||
<thead><tr><th scope="col">Concern/VM</th><th scope="col">Services1</th></tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Production Web Server</th>
|
||||
<td>Nginx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Production Web Server</th>
|
||||
<td>Nginx</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="tblcon">
|
||||
<table>
|
||||
<thead><tr><th scope="col">Concern/VM</th><th colspan="5" scope="colgroup">Services2</th></tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Production Web Server</td>
|
||||
<td>Nginx</td>
|
||||
<td>Nginx</td>
|
||||
<td colspan="3">Nginx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Production Web Server</td>
|
||||
<td>Nginx</td>
|
||||
<td colspan="4">Nginx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Production Web Server</td>
|
||||
<td>Nginx</td>
|
||||
<td>Nginx</td>
|
||||
<td>Nginx</td>
|
||||
<td>Nginx</td>
|
||||
<td>Nginx</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="tblcon">
|
||||
<table>
|
||||
<tr><th scope="col">Concern/VM</th><th scope="col">Services3</th></tr>
|
||||
<tr>
|
||||
<td>Production Web Server</td>
|
||||
<td>Nginx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Production Web Server</td>
|
||||
<td>Nginx</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<p>Table with all elements</p>
|
||||
<div class="tblcon">
|
||||
<table>
|
||||
<caption>Here's a captioned table</caption>
|
||||
<colgroup><col><col span="2"></colgroup>
|
||||
<thead><tr><th scope="col">Name</th><th scope="col">Earned</th><th scope="col">Profit</th></tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Mr. Epic</td>
|
||||
<td>£15000</td>
|
||||
<td>£1000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sludge</td>
|
||||
<td>£35000</td>
|
||||
<td>£19000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Smart fella</td>
|
||||
<td>£69420</td>
|
||||
<td>£50000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>£119420</td>
|
||||
<td>£70000</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
|
||||
<h2>Block<wbr>quotes</h2>
|
||||
<blockquote cite="https://www.w3schools.com/tags/tag_blockquote.asp">A section that is quoted from another source</blockquote>
|
||||
<p>Using q tag <q>for inline (short) quotations</q>, as you see. Nifty.</p>
|
||||
|
||||
<h2>Form</h2>
|
||||
<p>Behold, the mega-form! If you want details check <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#forms">mozilla's form section</a></p>
|
||||
|
||||
<p>datalist, fieldset, input, legend, meter, output, select, textarea</p>
|
||||
<p>input todo: datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week</p>
|
||||
<form>
|
||||
|
||||
<label for="name">Name</label>
|
||||
<input name="name" id="name" placeholder="Name here"></input>
|
||||
|
||||
<label for="fruits" id="fruits">Fruits</label>
|
||||
<select name="fruits">
|
||||
<option value="">--Choose your fav--</option>
|
||||
<option value="apple">Apple</option>
|
||||
<option value="banana">Banana</option>
|
||||
<option value="pear">Pear</option>
|
||||
</select>
|
||||
|
||||
<label for="fruits-veg" id="fruits-veg">Fruits/Veg</label>
|
||||
<select name="fruits-veg">
|
||||
<option value="">--Choose your fav--</option>
|
||||
<optgroup label="Fruits">
|
||||
<option value="apple">Apple</option>
|
||||
<option value="banana">Banana</option>
|
||||
</optgroup>
|
||||
<optgroup label="Vegetables">
|
||||
<option value="potato">Potato</option>
|
||||
<option value="onion">Onion</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
|
||||
<fieldset>
|
||||
<legend>Answer these yes/nos</legend>
|
||||
<input type="checkbox" id="check-smart" name="check-smart" checked/>
|
||||
<label for="check-smart">Smart</label>
|
||||
<input type="checkbox" id="check-swag" name="check-swag"/>
|
||||
<label for="check-swag">Swag</label>
|
||||
<input type="checkbox" id="check-epic" name="check-epic"/>
|
||||
<label for="check-epic">Epic</label>
|
||||
</fieldset>
|
||||
|
||||
<label for="prog">Progress</label>
|
||||
<progress id="prog" max="100" value="55">55%</progress>
|
||||
|
||||
<label for="colour">Favourite Colour</label>
|
||||
<input type="color" id="colour" name="colour" value="#CCCCCC"/>
|
||||
|
||||
<label for="birth">Birthdate</label>
|
||||
<input type="date" id="birth" name="birth" min="1900-01-01" max="2020-01-01"/>
|
||||
|
||||
<label for="details">Details</label>
|
||||
<textarea name="details" id="details" rows="4" placeholder="Describe yourself"></textarea>
|
||||
|
||||
<button type="button">Submit form</button>
|
||||
</form>
|
||||
|
||||
<h2>Button</h2>
|
||||
<button type="button">Button!</button>
|
||||
<a class="button" href="#">Anchor!</a>
|
||||
|
||||
<h2>Grid System</h2>
|
||||
<p>Not using one (curently at least) as it's un-needed. Perhaps if I make my own reset/base CSS file I'll add one for you guys.</p>
|
||||
<h2>Util<wbr>ities</h2>
|
||||
|
||||
<h3>Tags</h3>
|
||||
<div class="tag">Tag</div>
|
||||
<p>As a span within <span class="tag">w</span> another element.</p>
|
||||
<p>Actual usage <span class="tag">Tag 1</span> <span class="tag">Tag 2</span></p>
|
||||
|
||||
<h3>Notecards</h3>
|
||||
|
||||
<h3>Alerts</h3>
|
||||
|
||||
<h3>Modals</h3>
|
||||
|
||||
<h3>Example utils I may want</h3>
|
||||
<a href="https://getbootstrap.com/docs/5.2/examples/">Bootstrap utilities</a>
|
||||
|
||||
<h2>Headers</h2>
|
||||
|
||||
<h2>Menus</h2>
|
||||
<p>Maybe I'll do dropdowns soonish</p>
|
||||
|
||||
<h2>Searchbars</h2>
|
||||
|
||||
<h2>Inline elements</h2>
|
||||
|
||||
<h2>Unplanned<wbr>/<wbr>Dumped for now</h2>
|
||||
<h3>Address</h3>
|
||||
<address>testing</address>
|
||||
<h3>Article</h3>
|
||||
<article>testing</article>
|
||||
<aside class="page-nav"><p>page-nav is here</p><ul><li>list 1</li><li>list 2</li></ul></aside>
|
||||
<h3>Aside</h3>
|
||||
<aside>Test aside</aside>
|
||||
<p>There's also the class <code>.page-nav</code></p>
|
||||
<h3>Images</h3>
|
||||
<p>Webp. If it doesn't load your browser doesn't support it, but the picture below will work.</p>
|
||||
<img src="/images/200px.webp" alt="Placeholder image" width="200" height="200">
|
||||
<h3>Picture</h3>
|
||||
<picture>
|
||||
<source type="image/webp" srcset="/images/200px.webp">
|
||||
<source type="image/jpeg" srcset="/images/200px.png">
|
||||
<img src="/images/200px.png" alt="Placeholder image" width="200" height="200">
|
||||
</picture>
|
||||
|
||||
<h3>Figure</h3>
|
||||
<figure>
|
||||
<picture>
|
||||
<source type="image/webp" srcset="/images/200px.webp">
|
||||
<source type="image/jpeg" srcset="/images/200px.png">
|
||||
<img src="/images/200px.png" alt="Placeholder image" width="200" height="200">
|
||||
</picture>
|
||||
</figure>
|
||||
<figure>
|
||||
<picture>
|
||||
<source type="image/webp" srcset="/images/200px.webp">
|
||||
<source type="image/jpeg" srcset="/images/200px.png">
|
||||
<img src="/images/200px.png" alt="Placeholder image" width="200" height="200">
|
||||
</picture>
|
||||
<figcaption>figcaption</figcaption>
|
||||
</figure>
|
||||
|
||||
<h3>hr</h3>
|
||||
<hr/>
|
||||
|
||||
<h3>misc</h3>
|
||||
<p>Here's some examples of inline elements I currently don't use (or didn't up to now).</p>
|
||||
<p>The list consists of <code>abbr</code> for <abbr>abbr</abbr> abbreviations, <code>bdi</code> <bdi>for bidirectional text</bdi>, <code>bdo</code> <bdo dir="rtl">(rtl) for changing text direction</bdo><br/>Oh there was a br (line break), not a new paragraph tag.</p>
|
||||
<p>If something has been removed, <del>because it's wrong</del> <ins>for any reason</ins>, the <code>del</code> and <code>ins</code> elements are here!</p>
|
||||
|
||||
<h3>todo</h3>
|
||||
<p>cite, data, dfn, em, i, kbd, mark, s, samp, small, strong, sub, sup, time, u, var, wbr</p>
|
||||
<p>rp, rt, ruby</p>
|
||||
|
||||
<h2>Multimedia</h2>
|
||||
<p>area, audio, img(done elsehwere), map, track, video</p>
|
||||
|
||||
<h2>Embedded content</h2>
|
||||
<p>embed, iframe, object, picture, portal, source</p>
|
||||
|
||||
<h2>Svg</h2>
|
||||
|
||||
<h2>canvas</h2>
|
||||
<p>This allows for scripting, animations, games, fancier graphics, etc.</p>
|
||||
<canvas width="200" height="200"></canvas>
|
||||
|
||||
<h2>Interactive elements</h2>
|
||||
<h3>details</h3>
|
||||
<details>
|
||||
<summary>Gangnam style</summary>
|
||||
OP OP OP OP, OPPA GANGNAM STYLE
|
||||
</details>
|
||||
<h3>dialog</h3>
|
||||
<p>Non-suggested way</p>
|
||||
<dialog open>
|
||||
<p>I am a dialog box! You cannot kill me!</p>
|
||||
<form method="dialog">
|
||||
<button>Kill</button>
|
||||
</form>
|
||||
</dialog>
|
||||
<p>It's recommended to use JS to toggle dialogs, but to still use <code>dialog</code> (without the open attribute) over a <code>div</code> for semantic reasoning.
|
||||
|
||||
<h2>Web components</h2>
|
||||
<p>slot, template</p>
|
||||
<p>I've never used these, so I'm not sure 100% about their application, omitting for now.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Up to date</h2>
|
||||
<p>If you're looking for a complete (and up-to-date) list of HTML elements, look over at the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element" target="_blank" rel="noopener">mdn web docs</a>.</p>
|
||||
<p>I'm recommending this, as it's where I yoinked all the elements from on <time datetime="2022-12-09">Dec 9th 2022</time>, and it's maintained regularly (unlike this page).<p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
#TODO:
|
||||
<h2>Trivia</h2>
|
||||
<p>As of today <time datetime="2022-12-09">09/12/22</time> thiss is the largest webpage on my site, with the HTML taking up ~13KB</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<hr/>
|
||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue