HTML5 Boilerplate

Mike's Notes

I have been looking for a robust and proven base CSS example. I have found two open-source and freely available projects with a community behind them. Both are on GitHub and have good documentation, code and examples. I have used the best of both.

Now in production.

Resources

References

  • Reference

Repository

  • Home > Ajabbi Research > Library >
  • Home > Handbook > 

Last Updated

17/05/2025

Article

By: Mike Peters
On a Sandy Beach: 26/06/2024

Mike is the inventor and architect of Pipi and the founder of Ajabbi.

CSS Templates

  • HTML5 Boilerplate
  • Motherplate

HTML5 Boilerplate

"HTML5 Boilerplate is an HTML, CSS and JavaScript template (or boilerplate) for creating HTML5 websites with cross-browser compatibility." - Wikipedia
"The web’s most popular front-end template.

HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package." - HTML5 Boilerplate

Resources

Motherplate

"Motherplate: A Responsive SCSS Boilerplate for Web Designers.

This is a bare bones HTML/CSS framework. This is what I'll typically start off most web projects with.
It includes a CSS reset and a bunch of minimal boilerplate styles that should come in useful for any project, including a responsive grid, typography, buttons, icons and forms.
It is not as in depth as something like HTML5 Boilerplate and doesn't include styled components like Bootstrap.
It can be used for a static web project as is, or you can copy the CSS folder into an existing framework (e.g. Rails)." - Motherplate

CCS

  • base/config Put all your variables in here e.g. colors, padding, border radius - this helps with consistency across your project.
  • base/grid A basic responsive grid system with 12 columns.
  • base/ie Any styles that you need to add in order for Internet Explorer to work.
  • base/mixins Reusabled Sass mixins e.g. clearfix.
  • base/print Basic print stylesheets to make your pages look better when printed.
  • base/responsive Add any global responsive styles here e.g. hide elements, show elements, resize elements.
  • base/shame Keep this to hand for any quick and dirty CSS you need to add but plan to tidy later.
  • base/type Basic styling for your typography.
  • components/alerts Alerts to notify or give feedback to the user
  • components/buttons Styles for any text links and/or buttons.
  • components/forms Some basic form styles.
  • components/media Styles for images, video etc.
  • components/nav Inline navigation.
  • components/other Other reusable styles that come in handy.
  • components/tables Styles for tables.
  • pages/home Styles that are specific to the homepage
  • pages/layout Global layout styles e.g. header, footer, logo etc.
  • main.scss This brings all the partials together.

Example

CSS
// Reset default browser styles using Normalize
@import "../../node_modules/normalize-scss/sass/_normalize.scss";

// Install FontAwesome for useful icons
@import "../../node_modules/font-awesome/scss/font-awesome.scss";

// Import fonts from Google
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700|Lato:400,700);

// Set variables and reusable mixins
@import "base/config";
@import "base/mixins";

// Import typical layout styles
@import "base/grid";
@import "base/type";

// Import reusable modules
@import "components/media";
@import "components/buttons";
@import "components/tables";
@import "components/forms";
@import "components/alerts";
@import "components/nav";
@import "components/other";

// Specific project styles, add any section specific sass modules here
@import "pages/layout";
@import "pages/home";

// Additional styles to think about
@import "base/responsive";
@import "base/print";

// If IE support is needed
@import "base/ie";

// For anything quick and dirty that needs thrown in
@import "base/shame";

Things You Should Know About Databases

Mike's Notes

Note

Resources

References

  • Reference

Repository

  • Home > Ajabbi Research > Library > Subscriptions > Architecture Notes
  • Home > Handbook > 

Last Updated

17/05/2025

Things You Should Know About Databases

By: Mahdi Yusuf
Architecture Notes: 27/07/2022

Relational Databases Explained

How Relational Databases Work. This post talks about how indexes and transactions work on the inside of relational databases.

It is often surprising how little is known about how databases operate at a surface level, considering they store almost all of the states in our applications. Yet, it's foundational to the overall success of most systems. So today, I will explain the two most important topics when working with RDBMSs indexes and transactions.

So, without fully getting into the weeds on database-specific quirks, I will cover everything you should understand about RDBMS indexes. I will touch briefly on transactions and isolation levels and how they can impact your reasoning about specific transactions.




Relational Databases Explained Infographic

What is an RDBMS?

A relational database is a digital database based on the relational data model, as proposed by E. F. Codd in 1970. A relational database management system (RDBMS) is used to maintain relational databases. Many relational database systems have an option of using the SQL (Structured Query Language) for querying and maintaining the database. Examples include MySQL and PostgreSQL.

What is an index?

Indexes are a data structure that helps decrease the look-up time of requested data. Indexes achieve this with the additional costs of storage, memory, and keeping it up to date (slower writes), which allows us to skip the tedious task of checking every table row.

Like an index in the back of a textbook, it helps you get to the right page. I am not a great fan of the book analogy, it quickly falls apart as we dig deeper into database indexes, but it is an excellent way to introduce the topic.

Why do we need indexes?

Small amounts of data are manageable but, (think of an attendance list for a small class) when they get larger (think birth registry for a large city) less so. Everything that used to be quick gets slower, too slow.

Think about how your strategy would change if you had to find something on 1 page vs. thousand pages of names. No, seriously, take a second and think.

No matter what you come up with some database has implemented almost all the good strategies you can come up with at some point. As they grow, systems collect and store more data, eventually leading to the problem above.

We need indexes to help us get the relevant data we need as quickly as possible.

How do indexes work?



Read performance increases as you index the data, but that comes at the cost of write performance since you need to keep index up to date.

So one of the solutions question that is often posed above is to store this data logically on how you would search it. Meaning if you want to search the list by name you would sort the list by first name. There are few issues with that strategy. I will pose them mostly as questions for the reader here:

  • What if you want to search the data in multiple ways?
  • How would you deal with adding new data to the list? Is that fast?
  • How would you deal with updates?
  • Whats is the O notation on these tasks?

Something to think about. Regardless of your original strategy we definitely need a way to maintain order so we can quickly get relevant unordered data (more on that soon)

Lets take the Figure 1.1 below.

The underlying data is spread around storage with no order and allocated perceivably randomly. Nowadays, most production servers come with SSDs, but there are some cases where you would want (HDD) spinning disks, but honestly, the reasons are getting less and less as prices for SSDs come down significantly.

SSD vs. HDD

The main difference between a solid-state drive (SSD) and a hard disk drive (HDD) is how data is stored and accessed. HDDs use mechanical spinning disks and a moving read/write head to access data (latency), while SSDs use much faster memory chips, especially when reading many small files. Therefore, if the price isn’t an issue, SSDs are a better option — especially since modern SSDs are just about as reliable as HDDs.

Now reading in that small amount of data into memory is quite fast and relatively trivial to scan. Now what if the data we are searching across can't be cached entirely in memory? or the time to read all the data from disk is taking too long?

So here is where most developers go – I have seen this problem before; we need some dictionary (hash map) and a way to get to the specific row we are looking for without having to scan the slow disk, reading tons of blocks to see if the data we need is there.

These are called index leaf nodes which are given a specific column to index, they can store the location of the matching row(s).

RowIDs indexes mapping to table data.

These index leaf nodes are the mapping between the indexed column and where the corresponding row lives on the disk. This gives us a quick way to get to a specific row if you reference it by indexed column. Scanning the index can be much faster since it is a compact representation (fewer bytes) of the column you are searching by. It saves you time reading a bunch of blocks looking for the requested data and is much more convenient to cache, further speeding up the entire process.

Scale of data often works against you, and balanced trees are the first tool in your arsenal against it.

These indexes leaf nodes are of uniform size, and we are trying to store as many of these leaf nodes as a possible per block. Since this structure requires things to be sorted (logically, not physically on disk), we need to solve the problem of having to add and remove data quickly; the good ol' linked list manages this, more specifically, a doubly linked list.

Blocks

In computing, blocks are a grouping of bytes that usually contain a fixed number of records which are limited by a total length (block length). So if we were to calculate the number of bytes it would take to store a row divided by the block length, it would give us how many rows could be read from a specific block.

At a very low level you can use this to reason about how performant your systems can be. Quick Maths™ can be very powerful when you are capacity planning.

The benefits here are twofold: it allows us to read the index leaf nodes both forward and backward and quickly rebuild the index structure when we remove or add new rows since we are just modifying pointers—potent stuff.

Linked List

A linked list is a linear collection of data elements whose order is not given by their physical placement in memory. Instead, each piece points to the next. It is a data structure consisting of a collection of nodes representing a sequence together. In its most basic form, each node contains data and a reference (in other words, a link) to the next node in the series.

Since these leaf nodes aren't arranged physically on disk in order (remember pointers maintain the sorting in the doubly linked list), we need a way to get to the correct index leaf nodes.

Balanced Trees (B-Trees)


Structural difference BTrees vs. B+Trees

So you might wonder where you made a massive error to find yourself reading about B-Trees you hated from school. I get it these things are boring, but they are powerful and worth understanding.

B+Trees allows us to build a tree structure where each intermediate node points to the highest node value of its respective leaf nodes. It gives us a clear path to find the index leaf node that will point to the necessary data.

This structure is built from the bottom up so that an intermediate node covers all leaf nodes until we reach the root node at the top. This tree structure gets its name balanced because the depth is uniform across the entire tree.

B-Tree vs. B+Tree

The main difference B+ Trees show off is that intermediate nodes don't store any data on them. Instead, all the data references are linked to the leaf nodes, which allows for better caching of the tree structure.

Secondly, the leaf nodes are linked, so if you need to do an index scan, you can do a single linear pass rather than traversing the entire tree up and down and loading more index data from the disk.



How B+Trees are used in RDBMSs

Logarithmic Scalability

I want to take a brief aside here to hit home the power of this structure. Of course, most developers are aware of the exponential growth of data and, ideally, your company's valuations. But unfortunately, scale of data often works against you, and balanced trees are the first tool in your arsenal against it.

Depending on the number of items the intermediate nodes can reference (M) plus the overall tree (N) depth, we can reference M to the N objects.

Here is a table illustrating the concept with an M value of 5.

Tree Height (N) Index Leaf Nodes 3 125 4 625 5 3125 6 15625 7 78125 8 390625 9 1953125

So as the number of index leaf nodes increases exponentially, the tree height grows incredibly slowly (logarithmically) relative to the number of index leaf nodes. This coupled with balanced tree height, allows for almost instant identification of relevant index leaf nodes that point to actual data on disk.

Ain't that a beautiful sight!

What is a transaction?

A transaction is a unit of work you want to treat as a single unit. Therefore, it has to either happen in full or not at all. I would argue most systems don't need to manage transactions manually, but there are situations where the increased flexibility is instrumental in achieving the desired effect. Transactions mainly deal with the I in ACID, Isolation.

What is ACID?

In computer science, ACID (atomicity, consistency, isolation, durability) is a set of properties of database transactions intended to guarantee data validity despite errors, power failures, and other mishaps.

  • A guarantee of Atomicity prevents updates to the database from occurring only partially, which can cause more significant problems than rejecting the whole series outright.
  • Consistency guarantees that transaction can move database from one valid state to the next. This ensures these all adhere to all defined database rules. Also preventing corruption by illegal transaction. 
  • Isolation determines how a particular action is shown to other concurrent system users.
  • Durability is the property that guarantees that transactions that have been committed will survive permanently.

These concepts are generally well understood, but their definitions may not be consistent from system to system depending on the database system. So be sure to read up on each one for your production database.

These can be done automatically for you so you aren't even aware they are taking place, or you can create them manually like so:

We will focus on the time between BEGIN and COMMIT or ROLLBACK and what happens to various other transactions acting on the same data.

COMMIT/ROLLBACK

All manual transactions either end in successful COMMIT or ROLLBACK.

COMMIT durability persists the changes made by the current transaction.

ROLLBACK undoes the changes made by the current transaction.

When you aren't manually managing transactions, if all queries within a transaction are completed successfully, they are COMMITTED. If there is any failure, the changes during that transaction are ROLLED BACK to ensure the atomicity of the entire action.

Read Phenomena

Several read phenomena can occur in these isolations, and understanding them is essential in debugging your systems and honestly helping understand what kind of inconsistencies your system can tolerate.

Non-repeatable reads



Non-repeatable reads example

As in the image above, non-repeatable reads occur if you cannot get a consistent view of the data between two subsequent reads during your transaction. In specific modes, concurrent database modification is possible, and there can be scenarios where the value you just read can be modified, resulting in a non-repeatable read.

Dirty reads



Dirty read example

Similarly, a dirty read occurs when you perform a read, and another transaction updates the same row but doesn't commit the work, you perform another read, and you can access the uncommitted (dirty) value, which isn't a durable state change and is inconsistent with the state of the database.

Phantom reads



Phantom read example

Phantom reads are another committed read phenomena, which occurs when you are most commonly dealing with aggregates. For example, you ask for the number of customers in a specific transaction. Between the two subsequent reads, another customer signs up or deletes their account (committed), which results in you getting two different values if your database doesn't support range locks for these transactions.

Range Locks

Range locks are best described by illustrating all the possible lock levels.

  • Serialized Database Access — Making the database run queries one by one—terrible concurrency, the highest level of consistency, though.
  • Table Lock — lock the table for your transaction with slightly better concurrency, but concurrent table writes are still slowed.
  • Row Lock — Locks the row you are working on even better than table locks, but if multiple transactions need this row, they will need to wait.

Range locks are between the last two levels of locks; they lock the range of values captured by the transaction and don't allow inserts or updates within the range captured by the transaction.

Isolation Levels



4 Isolation levels for SQL Standard

The SQL standard defines 4 standard isolation levels these can and should be configured globally (insidious things can happen if we can't reliably reason about isolation levels).

REPEATABLE READ

Let's start with REPEATABLE READ. It is relatively straightforward to understand and sets the table for the remainder of the isolation levels. This isolation level ensures consistent reads within the transaction established by the first read. This view is maintained in several ways; some affect the overall system's performance, others don't, but outside this post's scope.

See the graphic above; once we do our first read, that view is locked for the duration of the transaction, so anything that happens outside the context of this transaction is of no consequence, committed or otherwise.

This isolation level protects us from several known isolation issues, mainly non-repeatable and dirty reads. It does have the minor data inconsistency while its locked to specific view of the database; keeping transactions short-lived as possible here is beneficial.

SERIALIZABLE

This operating mode can be the most restrictive and consistent since it allows only one query to be run at a time.

All types of reading phenomena are no longer possible since the database runs the queries one by one, transitioning from one stable state to the next. There is more nuance here, but more or less accurate.

It is essential to note in this mode to have some retry mechanism since queries can fail due to concurrency issues.

Newer distributed databases take advantage of this isolation level for consistency guarantees. CockroachDB is an example of such a database. Worth a look.

READ COMMITTED

This isolation mode is different from REPEATABLE READ in that each read creates its own consistent (committed) snapshot of time. As a result, this isolation mode is susceptible to phantom reads if we execute multiple reads within the same transaction.

READ UNCOMMITTED

Alternatively, the READ UNCOMMITTED isolation level doesn't maintain any transaction locking and can see uncommitted data as it happens, leading to dirty reads. The stuff of nightmares... in some systems.

There you have it, The Things You Should Know About Databases

If you enjoyed this, we have a ton more content like this on the way! We strive to make all these detailed and nuanced topics understandable and highlight where you would run into them!

Signing up or sharing it with someone who you think could benefit from this write up would be really appreciated.

Feedback is appreciated and can be directed at @myusuf3 on Twitter!

How To Design Complex Data Tables (+ Figma Kits)

Mike's Notes

Note

Resources

References

  • Reference

Repository

  • Home > Ajabbi Research > Library > Subscriptions > Smashing Magazine
  • Home > Handbook > 

Last Updated

17/05/2025

How To Design Complex Data Tables (+ Figma Kits)

By: Vitaly Friedman
Linkedin: 19/06/2024

Architecting a complex data table is quite an adventure. Wonderful work by Goldman Sachs team.

Complex data tables are difficult to get right. They always come along with filters, sorting, customization options, batch actions, cell states, pagination and a huge amount of data. Their purpose is usually to help people compare data points and find insights — yet navigating a table is often painfully slow and frustrating, especially on mobile.

Let’s explore practical techniques and useful Figma toolkits to help users find and compare the right data faster, without relying on endless horizontal scroll.

Architecting A Complex Data Table

When we start designing a complex data table, we need to first understand what features, states and accessories we actually need. Slava Shestopalov has put together a tree of table features — a practical overview of what goes into complex tables, along with all features, states, accessories that might need to be considered in the design process.


A comprehensive tree of features for a data table. Neatly put together by Slava Shestopalov.

In the design, we start with observing, collecting and prioritizing user needs. Based on them, we define a full set of complex functionality that we need — such as drag-n-drop, resizing, reshuffling or multi-sorting. These features will require separate accessibility considerations as all draggable controls must be keyboard-accessible due to WCAG 2.2 AA requirements.


The different types of cells, from the (incredible!) Goldman Sachs Design System.

Then, we define the different types of table cells that we need. Some of them will be accessible to everyone, others will have restrictions applied to them. So we discuss logic and permissions, such as read-only, comment-only or editable. We explore filtering, sorting and customization features. We discuss sticky headers and columns. And for each of them, we set default values, presets and templates.


For nested filters, you might consider an overlay with horizontal stacking, instead of a tree.

Eventually, we move to the fine little details of the data table design. Things like truncation, wrapping, stretching and resizing rules. We look at interaction design with validation rules and error messages. Some tables might require very long technical titles or localization, so stress test your design with very long and very short titles — this might also require compact, comfortable and condensed modes.


Data table design with a dedicated "Actions" buttons might perform better than hover actions.

And: whenever possible, try to avoid row hover actions: they often cause errors and rage clicks. Instead, use a standalone button ("Actions"), or few buttons, on each row instead.

Drawing a table tree diagram like the one pictured above is a good way to document your decisions — and understand the beast that is actually in front of you. A data table might seem like just another regular component, but its complexity is often underrated and it's effectiveness is often undermined. Especially when it comes to mobile display.

Useful resources:

Complex Data Tables on Mobile

We often assume that customers expect data tables to appear exactly the same on mobile and on desktop. That's not necessarily true. What they do expect is that features that they heavily rely on for their work exist in all environments — but these features don't have to work or look exactly the same way.


Row-column-data-tables are terribly inefficient on mobile — you might consider cards instead. Example: Goldman Sachs Design System.

In general, row-column-data-tables are terribly inefficient on mobile — that's where users often struggle, making mistakes and scrolling back and forth to make sure that they are looking at the right piece of data.

Instead, it's a good idea to think about the data alone, rather than its tabular structure. See how to aggregate data and span it across fewer columns. Show only what users really need, then show more on tap. And while doing so, try to leave out unnecessary data and details and eliminate repetition. For example, we could abbreviate dates, long labels, units of measure and currency. Replace statuses and permissions with icons and badges.


Users rarely need all columns and rows at once. We can use drop-downs to navigate and explore data cells in bulks. By Joe Winter.

As of interaction design, expand rows to show details if your data doesn't need much vertical space, and use a drawer when your data does need it — preferably instead, not in addition to, modal dialogs. However, don’t rely on tooltips or hover to show critical details.

It's worth noting that users rarely navigate through all columns in the table. So let them show and hide columns, for example with a “Columns” button. There, let them also re-arrange, lock and reset columns. You could use tabs above the table to change the view, or use tabs within the table to jump between columns.


Clever: use tabs within the data table to navigate its columns. By Netty Konovalova.

For row actions, you might be better off with a bottom sheet (edit, delete, move). A helpful way to make the content more accessible is by re-inggroup data from columns across multiple rows (pivoting). You could also combine columns within vertical accordions (stacked columns) and add a sticky filter in each column to help users navigate faster. Finally, if you do use pagination, show it above and below the data list.

Bottom line: Show only what users really need. Think “card”, not “row” to present a single record of data. Aggregate and re-group data across the table. You might not always need labels, but keep them available to screen reader users. And most importantly: re-organize, rethink and redesign data, rather than squeezing a multi-column table layout in a narrow mobile space.

Useful resources:

Data Tables Figma Kits

Designing data tables in Figma from scratch is remarkably tedious and time-consuming. You can get off the ground with a few helpful kits, kindly shared and released by the community:


Data Tables Figma Kit, by Jordan Hughes.

A huge thank you to contributors, authors and designers who spend time and effort and energy into making these resources available for everyone to use!

Naming convention for img files

Mike's Notes

Here is a naming convention for images that the Content Management System will use. This was inspired by a StackOverflow post listed below in resources.

This has not gone into production yet.

Resources

References

  • Reference

Repository

  • Home > Ajabbi Research > Library >
  • Home > Handbook > 

Last Updated

17/05/2025

Naming convention for img files

By: Mike Peters
On a Sandy Beach: 25/06/2024

Mike is the inventor and architect of Pipi and the founder of Ajabbi.

Pattern

  • {imageType}-{name}.{imageExtension}

{imageType}

  • icon (e.g., question mark icon for help content)
  • img (e.g., a header image inserted via <img /> element)
  • button (e.g., a graphical submit button)
  • bg (image is used as a background image in CSS)
  • sprite (image is used as a background image in CSS and contains multiple "versions")
{name}

  • Name to come from the design system

{imageExtension}

  • jpg
  • png
  • gig

Examples

  • icon-help.gif
  • img-logo.gif
  • sprite-main_headlines.jpg
  • bg-gradient.gif

Naming convention for assets

Mike's Notes

Here is a standardised directory structure for each Ajabbi website, which the Content Management System (CMS) will automatically render and provision.

This is now in production.

Resources

References

  • Reference

Repository

  • Home > Ajabbi Research > Library >
  • Home > Handbook > 

Last Updated

17/05/2025

Article

By: Mike Peters
On a Sandy Beach: 24/06/2024

Mike is the inventor and architect of Pipi and the founder of Ajabbi.

  • Use the 3-letter language codes from ISO 639-3, e.g. "eng".
  • Use the 2-letter country codes from ISO 3166-1 alpha-2, e.g. "nz".

  • Each localisation directory has its own assets subdirectory structure.

Directory Structure

  • eng/
  • eng-uk/
    • _assets/
      • ...
  • eng-us/
  • fra/
  • fra-ca/
  • ...
  • robots.txt
  • index.html
  • site.manifest
  • fravicon.ico
  • sitemap
  • assets/ (for static content used by the client (browser))
    • data/ (xml etc)
    • image/ (photos)
    • lib/ (unmodified libraries)
      • github/
        • [path]
          • [library/project name]
            • vX.Y.Z (version)
      • htmx/
      • jquery.com/
        • jquery/
          • jquery-migrate-3.4.1/ (version)
          • jquery-3.7.1.min/
      • react.dev/
        • ...
        • media/ (video, audio)
        • script/
          • js/
          • ts/
        • style/
          • css/
            • all/
              • component/
              • page/
            • print/
            • screen/
              • component/
              • page/
          • font/
            • adobe/
            • google/
          • img/ (icons)

      WCAG 2.2 is here

      Mike's Notes

      WCAG 2.2 is the new accessibility standard that Ajabbi must work very hard to meet.

      Resources

      References

      • Reference

      Repository

      • Home > Ajabbi Research > Library >
      • Home > Handbook > 

      Last Updated

      11/01/2026

      WCAG 2.2 is here

      By: Chris Pycroft
      Intopia: 05/10/2023

      "The World Wide Web Consortium (W3C) has finalised the next version of the Web Content Accessibility Guidelines, known as WCAG 2.2.

      After much anticipation, the latest version of the Web Content Accessibility Guidelines (WCAG) has finally arrived. Version 2.2 has officially been made a ‘Recommendation’ by the World Wide Web Consortium (also known as the W3C), which means it is stable with no further changes. For any organisation wanting to conformance to the latest version of WCAG, WCAG 2.2 will be your go-to version.

      It’s the first major update to the Web Content Accessibility Guidelines in nearly five and a half years, with the last update, WCAG 2.1, launched in June 2018.

      So what’s new in WCAG 2.2?

      As a part of the updated Guidelines, there are 9 new success criteria.

      There are 2 new Level A criteria:

      • 3.2.6 Consistent Help
      • 3.3.7 Redundant Entry

      There are 4 new Level AA criteria:

      • 2.4.11 Focus Not Obscured (Minimum)
      • 2.5.7 Dragging Movements
      • 2.5.8 Target Size (Minimum)
      • 3.3.8 Accessible Authentication (Minimum)

      There are 3 new Level AAA criteria.

      • 2.4.12 Focus Not Obscured (Enhanced)
      • 2.4.13 Focus Appearance
      • 3.3.9 Accessible Authentication (Enhanced)
      Most of the new criteria are design-driven requirements.  They also take into consideration the increased use of certain technologies, such as multi-factor authentication.

      There is also one change to an existing success criterion – 4.1.1 Parsing (Level A) has been marked as obsolete and removed. This criteria, released as part of WCAG 2.0, was necessary when assistive technologies needed to directly parse HTML, and parsing errors weren’t handled as well as they are today. As a result, issues that were previously covered by this criterion either no longer exist, or are covered by other success criteria. Notes have also been added to previous versions of WCAG (2.0 and 2.1) to reflect this update.

      Does this mean I need to start thinking about WCAG 2.2?

      The short answer is yes.

      Now that the new version is finalised, the W3C recommends that websites meet WCAG 2.2. Embracing the new requirements also means a more accessible experience for people using your product or service.

      We anticipate that policies and standards that reference WCAG 2.1 or below, such as the European Commission’s Web Accessibility Directive, or EN 301 549, will be updated to reflect WCAG 2.2 in the future. We’ll keep you updated of changes over the coming months. In the meantime, to future-proof your products and services, consider moving to WCAG 2.2 as soon as you can, especially for new content or features.

      The good news is that if you’re already meeting all the requirements of WCAG 2.1 (or are in the process doing so), you’re already most of the way there. The most common conformance level that organisations typically aim for is Level AA. This means that there are 6 new Level A and AA success criteria that you need to take into consideration. By conforming to WCAG 2.2, you’ll also conform to previous versions of the Guidelines (2.1 and 2.0).

      Where can I find more information about WCAG 2.2?

      There is already some useful information and resources that are available to you, and there’s also plenty more on the way.

      The main source of truth, the World Wide Web Consortium, has published the standard in full, along with supporting documentation to help you understand the guidelines:

      We also have an updated version of our much-loved WCAG Map! The WCAG 2.2 Map is now available and can be used to map out what success criteria you need to consider (see what we did there).

      We’ll also be hosting an Ask Us Anything free webinar on Wednesday 18 October at 1pm AEDT (GMT +11). You’ll have the opportunity to hear from our team about what they think of the updates to WCAG, and ask them any questions about WCAG 2.2.

      We’ll also have more information and helpful resources available over the coming weeks. These will help you understand exactly what the new success criteria are, and how to meet them. Follow us on LinkedIn, X (formerly Twitter), Facebook and YouTube, or subscribe to our newsletter (which you can do at the bottom of this page) to stay up to date. We’ll also be updating our Not-Checklist soon, stay tuned.

      If you’re keen to hop down the rabbit hole and begin the journey to meeting WCAG 2.2, we’re here to help. In fact, we’ve already helped some of our client organisations who have been implementing WCAG 2.2 before it was finalised. Contact us through our website, and someone from our team will get back to you.

      Happy WCAG 2.2 release day!"

      WCAG 2.2 Map



      Tool Options for the Design System

      Mike's Notes

      I need to determine what third-party design and management software to use and how to integrate it with the Ajabbi Design System.

      This is for both future customers and the Ajabbi team.

      These notes came from Vitaly Friedman, editor of Smashing Magazine, a fantastic resource.

      Resources

      • Resource

      References

      • Reference

      Repository

      • Home > Ajabbi Research > Library >
      • Home > Handbook > 

      Last Updated

      17/04/2025

      Tool Options for the Design System 

      By: Vitaly Friedman
      Smashing Magazine: 22/06/2024

      Requirements

      Needs to work with design tokens.

      Options

      • Figma
      • Token Studio
      • SuperNova

      Figma

      Notes

      "Figma is a collaborative web application for interface design, with additional offline features enabled by desktop applications for macOS and Windows. The feature set of Figma focuses on user interface and user experience design, with an emphasis on real-time collaboration, utilising a variety of vector graphics editor and prototyping tools. The Figma mobile app for Android and iOS allows viewing and interacting with Figma prototypes in real-time on mobile and tablet devices." - Wikipedia

      Pricing

      • Starter (free)
      • Professional ($15/m per seat)
      • Organisation ($45/m per seat)
      • Enterprise ($75/m per seat)

      Resources

      Token Studio

      Notes

      Tokens Studio for Figma is a Figma Plugin allowing you to integrate Tokens into your Figma designs.

      It gives you reusable tokens that can be used for a whole range of design options, from border radius or spacer units to semantic color and typography styles. It allows you to change tokens and see these changes applied to the whole document or its styles. - Token Studio

      Pricing

      • Free (free)
      • Pro (19 Euro/m per user)

      Resources

      SuperNova

      Notes

      "Supernova connects your design and engineering data in a single design system tool to accelerate and scale your product development."

      "Supernova manages the entire design system lifecycle in one place. It's designed to fit with the way your team already works — without changing tools or maintaining self-built workflows and integrations — to enable your team to build better products.

      Connect Figma files to your Supernova design system, sync design tokens via our Tokens Studio integration, and import variables from Figma via our plugin to ensure you constantly have the most-up-to-date design data in your design system.

      Create advanced documentation using this data to keep documentation in sync whenever changes are made. Finally, connect design and code by automating code delivery with code pipelines to deliver tokens, styles, icons, components and documentation to your codebases." - SuperNova

      Pricing

      • Free (free)
      • Team ($45/m per seat)
      • Company ($75/m per seat)

      Resources

      Alternatives

      Open-source

      • Penpot
      • Lunacy

      Paid

      • Adobe XD
      • UXPin
      • Zeplin
      • LucidChart
      • Miro
      • Framer
      • AxureRP