DEV Community: Jules Mendonca

[Boost]

Jules Mendonca — Mon, 23 Mar 2026 22:01:00 +0000

Mark Steadman

Dec 29 '23

The Ultimate Mobile Accessibility Resource Guide

#a11y #mobile #android #ios

Comments 3

4 min read

Interactive Keypad | Osu sayo device inspired (CSS/JS)

Jules Mendonca — Mon, 23 Mar 2026 01:24:26 +0000

I created a CodePen project inspired by the horror manga UZUMAKI

Jules Mendonca — Mon, 23 Mar 2026 01:00:17 +0000

A spiral is a curving line that revolves around an originating point,

Inspired by Junji Ito's UZUMAKI

Your guide to implementing accessible typography in iOS and Android apps

Jules Mendonca — Sat, 21 Mar 2026 09:49:48 +0000

Last year, I developed an open-source interactive visual reference project to help designers and developers understand and implement accessible typography for mobile apps on iOS and Android.

I've pushed an update with the latest accessibility and typography guidelines from iOS 18, Android 14, and the latest W3C Web Accessibility Initiative (WAI) recommendations.

You can check out the project here:

https://alansdead.github.io/typography-system-guide/

Feedback, issues, and contributions are welcome (repo link)

iOS 18 Android 14 Typography Guidelines Update | Juliana Mendonca posted on the topic | LinkedIn

Last year, I developed an open-source interactive visual reference project to help designers and developers understand and implement accessible typography for mobile apps on iOS and Android. I've pushed an update with the latest #Accessibility and typography guidelines from iOS 18, Android 14, and the latest W3C Web Accessibility Initiative (WAI) recommendations. You can check out the project here: Typography System Guide https://lnkd.in/daJ8e-eV Feedback, issues, and contributions are welcome (repo link) https://lnkd.in/dZhe5a_Z #Typography #iOS #Android #A11y #WCAG #MobileDesign

linkedin.com

[Boost]

Jules Mendonca — Fri, 20 Mar 2026 17:52:38 +0000

Mark Steadman

Mar 20

Accessibility Snapshot Testing in iOS

#ios #mobile #testing #automation

Comments

3 min read

[Boost]

Jules Mendonca — Fri, 20 Mar 2026 15:20:39 +0000

Jules Mendonca

Mar 20

false_until_you_touch_it

#codepen #javascript #css #design

Comments

1 min read

false_until_you_touch_it

Jules Mendonca — Fri, 20 Mar 2026 15:20:24 +0000

A canvas of hidden checkboxes where every cell holds a single boolean: true or false.

Nothing is random. Everything is either true or false.

[Boost]

Jules Mendonca — Mon, 09 Mar 2026 06:01:54 +0000

Jules Mendonca

Mar 8

Squircle Mathematics Explorer [EN/PT Interactive]

#codepen #programming #resources #learning

Comments

4 min read

Squircle Mathematics Explorer [EN/PT Interactive]

Jules Mendonca — Sun, 08 Mar 2026 02:09:07 +0000

You don’t need to be a developer to build with code. If you already think in design systems, you’re closer than you think.

I’m a designer who loves creative coding, and I keep noticing the same pattern:

Designers understand code faster when it’s explained like a design system.
Developers understand design faster when the intent is made explicit.

In this post, I’ll walk you through a small CodePen I built: Squircle Mathematics Explorer.

What is a squircle?

A squircle is the shape that lives between a circle and a square. You’ve seen it everywhere. One of the most famous examples is the Apple app icon.

Image from Apple Design Resources (icon templates).

The math behind it has a long history: Gabriel Lamé described the superellipse in 1818. Piet Hein later popularized it. Apple made it iconic through the app icon grid.

1) The big idea: one variable controls everything

$$
|x|^n + |y|^n = 1
$$

The only thing that changes is the value of n.

When n = 2, you get a perfect circle.
When n = 4, you get a squircle.
As you move toward n = 10, the shape becomes more square.

When one parameter changes, the entire geometry reacts.

If you’ve ever used design tokens, this will feel familiar. It’s the same mental model: change one variable, and the whole system responds.

2) Canvas: a blank artboard (that redraws itself)

In the browser, the <canvas> element is like a blank artboard. It does not “contain” shapes the way SVG or Figma does. It’s closer to saying:

“Here is a rectangle of pixels. Now draw something onto it.”

Here’s the canvas structure in HTML:

<canvas id="squircle-canvas" width="300" height="300"></canvas>

Now comes the key shift:

In Figma, the shape exists immediately, and you tweak its properties.
On Canvas, the shape only exists after your function calculates it.

That is why the drawing function clears and redraws the canvas each frame:

function drawSquircle(n) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    const radius = 120;
    // ... (calculates points and draws the path)
}

In practice, drawSquircle() calculates thousands of points along the curve and connects them into a path.

If you’ve ever edited a vector path, it’s like placing many anchor points and closing the shape. Except here, math generates the points for you.

3) The slider: a live design token

The range slider is the control that changes n.

In HTML, it looks like this:

<input type="range" id="n-slider" min="2" max="10" step="0.1" value="4">

This is delightfully “design-y”:

min and max are your constraints.
step is your granularity.
value is your default token value.

In JavaScript, every slider movement updates a single variable. Everything else in the system reads that value and reacts.

slider.addEventListener('input', (e) => {
    nValue = parseFloat(e.target.value);
});

4) The text system: a content component with variants

The pen also teaches while you explore. There’s an object that holds descriptions for key values of n:

const educationalContent = {
    en: {
        2: "n = 2: The perfect circle...",
        4: "n = 4: The SQUIRCLE! Piet Hein's superellipse, popularized by Apple's app icons...",
        8: "n = 8: Nearly square now...",
    },
};

If you’re a designer, read that as:

One component (the education panel)
Multiple variants (the copy changes per key value)
A prop (the current n)

5) The language toggle: a theme switch for words

The EN/PT buttons at the top switch the whole UI language at once.

There’s a translations object that stores strings in both languages:

const translations = {
    en: { title: "SQUIRCLE MATHEMATICS", sliderLabel: "> SQUIRCLE_EXPONENT:" },
    pt: { title: "MATEMÁTICA DO SQUIRCLE", sliderLabel: "> EXPOENTE_SQUIRCLE:" },
};

When you click a language button, a function updates each UI label:

document.getElementById('main-title').textContent = t.title;
document.getElementById('slider-label').textContent = t.sliderLabel;
// ...and so on

A quick note on the visuals

The CRT scanlines, noise overlay, and background grid are purely visual.

In CSS, the scanline effect is just a repeating gradient layered on top of everything.

The outcome: code is full of familiar design concepts

If you take one thing from this post, let it be this:

Variables are tokens.
Objects are component props.
State changes are variant switches.
Animation timing is motion design logic.

I built this project with HTML, CSS, and JS on CodePen.

Once you start seeing code through the lens of systems and design thinking, it stops feeling like a separate skill and starts feeling like another creative tool.

An interactive educational tool that explores the mathematics behind squircles

Cicada Principle Visualizer

Jules Mendonca — Thu, 05 Mar 2026 08:31:40 +0000

Watch how patterns with prime-numbered cycles (3, 5, 7, 11, 13, 17) create complex, non-repeating designs.

Interactive Keypad | Osu sayo device inspired (CSS/JS)

Jules Mendonca — Thu, 05 Mar 2026 01:48:04 +0000

PSX COLOR LAB

Jules Mendonca — Tue, 30 Sep 2025 19:02:41 +0000

Check out this Pen I made!

https://codepen.io/Alansdead/pen/ogbbGpx