Skip to content

Web department meetings

Jump to bottom
Mohamed.T edited this page May 30, 2024 · 6 revisions

Web department meetings

07-05-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:

image

Zelf ben ik ook aan de beurt geweest. Ik heb hier verteld over de typescript cursus die ik eerst heb gevolgd waarna ik de Todo lijst applicatie heb gemaakt. Hier vertelde ik dat alles voor mij nog nieuw was en ik dus erg veel heb geleerd in deze periode. Hierna vertelde ik dat ik te werk ben gegaan bij Sportcity waar ik samen met Jaer de hele website heb gerefactored van javascript naar typescript en ik daarna ook een paar design tickets heb opgepakt waar ik verder ook nog niet eerder met SCSS gewerkt had maar ik dit snel heb kunnen oppakken. Tijdens dit project heb ik ook voor school een express/nodeJS project moeten maken. Ik heb mijn portfolio laten zien en welke Headless CMS ik hiervoor gebruikt heb en hoe mijn schema er uit zag. Ook vertelde ik waarom ik voor Hygraph gekozen had en dat ik dit ook zou aanraden aan anderen. Verder heb ik verteld waarmee ik de aankomende tijd bezig mee zou zijn.

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.

image

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>
image

progress: For displaying the progress of a task

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

Montage presenting web department meeting

29-05-2024

Today Montaga wanted to show something about conditional types in typescript:

image

Hier is de code die ze heeft laten zien:

type Props = {
  userName: string;
} & (AdminProps | UserProps);

type AdminProps = {
  userRole: "admin";
  permission: "read" | "write" | "delete";
};

type UserProps = {
  userRole: "user";
  subscription: "basic" | "premium";
};

export default function Child(props: Props) {
  const { userName, userRole } = props;

  return (
    <div>
      <div>User Name: {userName}</div>
      <div>User Role: {userRole}</div>

      {props.userRole === "admin" && <div>Permission: {props.permission}</div>}

      {props.userRole === "user" && (
        <div>Subscription: {props.subscription}</div>
      )}
    </div>
  );
}

Link to Codesandbox: https://codesandbox.io/p/sandbox/advanced-typescript-v7t7gl?file=%2Fsrc%2Findex.tsx

Clone this wiki locally