Web department meetings

Web department meetings

15-04-2024

Elke 2 weken hebben wij op de woensdag een web department meeting waarbij iemand verteld over waar hij mee bezig is of een nieuw interessant code onderwerp. Zo blijven ze altijd up to date met de nieuwste technieken:

Ik ben zelf ook aan de beurt geweest en vertelde over mijn project en wat ik heb geleerd. Ook heb ik verteld waarmee ik de aankomende tijd bezig zou zijn. Ik heb hier ook verteld over mijn portfolio en waaruit hij is opgebouwd en met welke technieken ik werk.

Montaga presenting annual code meeting

link to document: https://moveagency.atlassian.net/wiki/spaces/MOVE/pages/3895033860/28+02+2024

Smarter menu's: ul vs menu

While the ul is intended for a list of display items, it is not best suited to interactive elements such as buttons.

<menu role="menu">
  <li><a href="#" role="menuitem">Lorem.</a></li>
  <li><a href="#" role="menuitem">Numquam.</a></li>
  <li><a href="#" role="menuitem">Modi!</a></li>
  <li><a href="#" role="menuitem">Adipisci.</a></li>
  <li><a href="#" role="menuitem">Officiis.</a></li>
</menu>

A menu holds a set of actions, which would be triggered by elements inside of them. Other than that, the menu element acts no different to a usual list of items ul. As browser adoption improves it may help assistive technologies find these interactive elements more easily.

Screen readers, by default, don’t recognise it as a menu and only narrates it as a list of elements. To improve the accessibility further, we need to add aria roles to the menu.

More info here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu

details & summary

To specify details that the user can open and close on demand (such as accordions):

<details>

<summary>Title</summary>

<p>Paragraph</p>

</details>

This makes it clear to both users and search engines that the content within details is supplementary and can be expanded or collapsed.

datalist

Provides an autocomplete interface for input elements. Each list contains a set of option elements that have an associated value. When linked to an input using the “list” attribute, it can provide a drop-down list or even display suggestions as the user types.

<label for="ice-cream-choice">Choose a flavor:</label>

<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">

<option value="Chocolate"></option>

<option value="Coconut"></option>

<option value="Mint"></option>

<option value="Strawberry"></option>

<option value="Vanilla"></option>

</datalist>

progress: For displaying the progress of a task

<label htmlFor="file">File progress:</label>
<progress id="file" max="100" value="70"></progress>