DEV Community: Julia 👩🏻‍💻 GDE

Red Team vs Blue Team — I Choose You!

Julia 👩🏻‍💻 GDE — Fri, 20 Mar 2026 20:35:10 +0000

It’s 1999. You slide a Pokémon Red Version cartridge into your Game Boy. Four AA batteries, a notebook full of scribbles, and a dream: beat the Elite Four.

But this isn’t just a Pokémon journey—it’s a cybersecurity adventure, complete with Red Team, Blue Team, and now the mythical Purple Team, bridging both worlds.

1. 🎮 Pallet Town: Your SOC Dashboard

In Pallet Town, doors are open and wild Pokémon roam. That’s your first lesson: no defenses are perfect.

Professor Oak hands you a Poké Ball and a USB stick (probably USB 1.0). He says:

“In cybersecurity, every trainer chooses their path. Some attack, some defend… but the best combine both.”

2. 🟥 Red Team: The Offensive Trainers

Red Team is all about thinking like an attacker. They’re authorized hackers running penetration tests:

Reconnaissance → scanning the Gym (network) for weak points
Exploitation → using a misconfigured API or weak password (think: critical hit)
Privilege escalation → going from a junior dev account to admin (like leveling up Glurak)
Persistence → maintaining access without detection (using clever tactics)
Exfiltration → safely grabbing “badges” (sensitive data) to prove the vulnerability exists

Pokémon Move	Cybersecurity Skill	What It Means in Practice
🔥 Flamethrower	Exploitation	Actively exploiting vulnerabilities (e.g. SQL injection, XSS)
👀 Leer / Scary Face	Reconnaissance	Scanning systems, gathering intel, mapping attack surface
⚡ Slash (Critical)	Privilege Escalation	Gaining higher access (user → admin)
🕵️ Smokescreen	Evasion / Stealth	Avoiding detection (log evasion, obfuscation)
🎯 Fire Blast	Data Exfiltration	Extracting sensitive data as proof

Real-world tools: Nmap, Metasploit, Burp Suite
Mindset: “How can this be broken?”

Glurak leads the Red Team with a Flamethrower of exploits, lighting up logs like fireworks. Each attack tests the limits of your defenses.

3. 🟦 Blue Team: The Defenders, Gym Leaders IRL

Blue Team runs the SOC (Security Operations Center). They monitor, detect, and respond:

Hardening → patching, configurations, least privilege
Monitoring → SIEM alerts, log aggregation, and anomaly detection
Detection engineering → creating rules to catch attacks in real time
Incident response → contain, eradicate, recover (Turtok’s Hydro Pump!)
Disaster recovery → backups, restores, and resilient architectures

Pokémon Move	Cybersecurity Skill	What It Means in Practice
🛡️ Protect	System Hardening	Secure configs, patching, least privilege
💧 Hydro Pump	Incident Response	Contain and stop active attacks
🧠 Withdraw	Attack Surface Reduction	Limiting exposure, reducing risk
🔍 Water Pulse	Monitoring & Detection	Logs, alerts, anomaly detection
❤️ Recover	Backup & Recovery	Restore systems after incidents

Real-world tools: SIEM (Splunk), EDR (CrowdStrike), monitoring systems
Mindset: “How do we detect and survive this?”

Turtok doesn’t roar—he analyzes. Calmly, he uses Protect and Hydro Pump, blocking attacks and countering them with precise defense.

4. A Wild Vulnerability Appears!

Red Team finds a web app endpoint with no rate limiting. Glurak roars: “This is an open invite!”

Blue Team’s Turtok responds: SIEM triggers, logs alerts, and the incident response plan kicks in. They detect, isolate, patch, and monitor.

This is Purple Team magic: Red Team attacks → Blue Team observes → both teams collaborate → defenses improve.

5. 🟪 The Purple Team: Training Together

Purple Team is when offense and defense combine forces:

Red Team shows Blue Team how exploits work (education, testing, simulations).
Blue Team tunes SIEM rules, EDR endpoints, and alerting based on attacks.
Together, they run tabletop exercises—simulated attacks that improve real-world resilience.

Pokémon Combo Move	Cybersecurity Skill	What It Means in Practice
🔄 Combo Attack	Adversary Simulation	Red Team attacks while Blue Team observes
📘 Shared XP	Knowledge Sharing	Teaching detection + attack techniques
⚙️ Move Relearning	Detection Engineering	Improving alerts based on real attacks
🧩 Double Battle	Tabletop Exercises	Simulated attack scenarios
🚀 Evolution Boost	Continuous Improvement	Iterative security improvements

Real-world concept: Purple Teaming
Mindset: “How do we improve together?”

It’s like battling a Gym together: Glurak attacks while Turtok blocks and learns. They communicate, adapt, and level up the entire network.

6. 🏆 Elite Four: Real-World Threats

You reach the Elite Four of cybersecurity:

Phishing → social engineering
Ransomware → screen goes black, music stops
Zero-day exploits → unexpected attacks
Supply chain compromises → “trusted” Pokémon TMs that backfire

Elite Four “Battle”	Real Threat	Who Handles It
🧠 Psychic	Phishing	Blue detects, Red simulates
☠️ Ghost	Ransomware	Blue responds, Purple trains
⚡ Electric	Credential Attacks	Both improve auth defenses
🐉 Dragon	Zero-Day Exploits	Red discovers, Blue adapts

Red Team simulates the attack. Blue Team detects and responds. Purple Team iterates.

Each attack teaches the team something new. Each defense strengthens the next.

7. Lesson Learned: I Choose You, Both

If you can’t decide between Red or Blue, pick both:

Want to master penetration testing? Train Red Team skills.
Want to defend networks like a Gym Leader? Train Blue Team skills.
Want to maximize impact? Form a Purple Team.

Because in the real world, attacks never stop, and defenses evolve every day.

   🔴 RED TEAM           🟣 PURPLE TEAM           🔵 BLUE TEAM
   (Attackers)           (Collaboration)          (Defenders)  
   Break systems    →     Learn together   →     Defend systems
  Find weaknesses   →   Improve detection  →   Monitor & respond
  Simulate threats  →    Share knowledge   →    Build resilience

Glurak and Turtok walk side by side through tall grass.
Wild vulnerabilities? Bring them on.

Level up. Repeat. Never stop.

Want to get into CyberSecurity? Check out the Google Cybersecurity Professional Certificate on Coursera.

Coursera’s Google UX Design Certificate: What It Covers, How It’s Structured, and Why It Can Actually Work

Julia 👩🏻‍💻 GDE — Fri, 13 Feb 2026 10:21:43 +0000

If you’ve been thinking about switching careers into UX design (or adding UX skills to your toolbox), you’ve probably seen the Google UX Design Professional Certificate on Coursera. It’s one of the most well-known beginner UX programs online — and honestly, I get why people consider it. I earned the certificate back then myself.

In this post, I’ll break down:

what the certificate is about
how the learning is structured
and my opinion on whether it’s “enough” to make it in UX

TL;DR: if you take it seriously and do everything thoroughly, you can learn a lot and build a portfolio that truly helps you.

What is the Google UX Design Certificate?

The Google UX Design Certificate is an online program hosted on Coursera that teaches the fundamentals of UX (User Experience) design from the ground up.

It’s aimed at beginners — meaning you don’t need prior UX knowledge (which is true). The whole idea is:

✅ learn the UX process
✅ practice real UX methods
✅ create portfolio-ready case studies
✅ understand how UX work looks in a real product team

It’s not just theory. It’s very hands-on and focuses heavily on learning by doing: sketches, wireframes, prototypes, testing, iteration, and presentation.

Note: A really cool new feature on Coursera learning platform is the information on how much you can earn in specific roles and how many jobs are currently available in your country.

What topics does it cover?

The course walks you through the full UX workflow, with a very “industry style” approach. Here’s the big picture:

1) UX foundations and thinking like a designer

You learn what UX actually is, what UX designers do, and how products are shaped by user goals and business goals.

2) UX Design process: empathize, define, ideate

You’ll work with typical UX research steps like:

understanding user needs
identifying pain points
writing problem statements
building personas
creating user journey maps
generating solution ideas

Here is where it becomes more structured and strategy-focused.

3) Wireframes → Prototypes

You go from quick sketches to:

low-fidelity wireframes
higher fidelity mockups
clickable prototypes

You learn how to move step-by-step instead of jumping straight into “pretty UI”.

4) Testing and iterating (UX Research)

One of the best parts: it teaches a design mindset that’s very realistic:
your first version won’t be perfect — so you test, learn, and improve.

5) High-Fidelity Designs

You build mockups and high-fidelity products using Figma, the go-to tool for UX Designers. You will become very confident with this tool throughout the program.

This is where it becomes really cool and hands-on.

6) Dynamic User Interfaces (UI)

Everything from UX design thinking framework to creating a dynamic website.

7) Building your portfolio and presenting case studies

The portfolio isn’t just “add some screenshots”.
They push you to explain your thinking:

what the problem was
how you made decisions
what you learned
how you improved the design

This is what hiring teams actually want.

8) Job Search with AI

They added something new to the program. The last part will help you find you job, stay organised with your job applications and more, using AI.

AI is everywhere, so good for you that you are skilled on this topic by doing this certificate as well. You are sooo job-ready.

How is the program structured?

The certificate is divided into multiple courses (basically a series). Each part builds on the last one.

The learning format is very Coursera-style:

short video lessons
everything in written as well
quizzes for theory and vocabulary
practical exercises (real UX tasks)
peer-reviewed assignments (sound scarier than it actually is)
design projects that become portfolio pieces

You don’t just pass by watching videos — you have to produce work.

And the best thing is: by the end, you don’t finish with just “a certificate” — you finish with actual design projects you can show.

The whole program is self paced, so no worries if you have not that much time. The average user takes about 6 months by spending 10 hours per week. If that is not possible for you, it doesn't matter. The only thing that matters is reaching the finish line.

If you are faster, even better. Especially for your purse. Start with a 7-days trial and see if the program is the right fit for you. The faster you go through the program the cheaper it is.

What I liked (and what matters)

The strongest part of this certificate is that it encourages you to create complete case studies, not just “random screens”.

If you put the work in, you’ll end up with:

clear UX process practice
structured thinking
project documentation
portfolio content you can polish later❗

Also: it teaches you a UX workflow that can be applied anywhere — even if later you move from mobile UX into web UX, accessibility, product design, or service design.

My honest opinion:

it works if you do it thoroughly

Here’s my take:

If you rush it, this becomes “just another online course”.

But if you spend time, do every assignment properly, and treat every project like a real client project, you will:

✅ learn a lot
✅ build strong UX habits
✅ create a portfolio you can be proud of
✅ get confident enough to apply for UX roles

And yes — I genuinely believe that with enough effort and consistency, you can make it as a UX designer with this certificate as your foundation.

The certificate won’t magically hand you a job.
But it can absolutely give you the skills, structure, and portfolio that make a UX career realistic.

Tips to get the most out of it

If you’re considering doing the Google UX Design Certificate, here’s what I recommend:

1) Don’t aim for “finished fast”, aim for “done well”

Your portfolio benefits more from one strong case study than three rushed ones.

2) Document everything

Save:

screenshots of drafts
iterations
notes from research
test feedback

Those details turn your project into a compelling story.

3) Treat feedback seriously

Peer reviews aren’t always perfect, but they train you to:

explain your decisions
accept critique
improve your design logically

4) Upgrade your final case studies later

What you produce during the course can become the “base version”.
After the certificate, you can refine visuals, rewrite the case study, improve prototypes, and make it look much more professional.

Final thoughts

The Google UX Design Certificate on Coursera is a structured, beginner-friendly way to enter UX design — but it rewards effort.

If you invest the time, take each step seriously, and build your projects thoroughly, you’ll come out with:

real UX skills
a clear process
a portfolio you can show
and a path into the UX field

In my opinion:

it’s worth it — if you commit.

Image credits: Original Images and Screenshots from Coursera Website

"Khoor Zruog!", Caesar says.

Julia 👩🏻‍💻 GDE — Wed, 04 Feb 2026 10:23:00 +0000

In the hush of a Roman camp, a messenger waits — and the alphabet learns a secret little step. Follow Julius Caesar’s famous cipher from ancient battlefield whispers to a clean Python function that shifts letters, wraps around, and turns “Hello World!” into something only the right reader can understand.

📖

The candles were low in the Roman camp, and the night sounded like leather straps settling, armor being set down, and a thousand quiet thoughts trying to become tomorrow’s plan.

A messenger waited at the edge of the lamplight, holding a small tablet. Not every message was meant for every eye. Some orders needed to cross distance without being understood by the wrong hands.

And that’s where the Alphabet entered the story.

📖

The Alphabet, as it turns out, is easy to teach and hard to gossip with. You simply tell it to walk a certain number of steps.

Julius Caesar did exactly that. The reason we call it Caesar Cipher is not because he invented the idea of shifting letters, but because he’s the earliest famous person recorded using it to protect private and military communication.

A Roman historian, Suetonius, describes Caesar writing confidential notes by shifting the letters so “not a word could be made out,” and he even explains the rule: substitute D for A, and keep going from there.

📖

That “D for A” detail is the whole secret in one breath: it’s a shift of 3.

A → D
B → E
C → F

…and when you reach the end, you wrap around to the start again.

Caesar reportedly used this to send battlefield instructions to his generals and private letters to trusted friends — messages that would be annoying to intercept and much harder to casually read.

📖

Back then, the cipher worked better than it sounds to modern ears for two very practical reasons: literacy was limited, and systematic codebreaking wasn’t yet a standard craft.

The big “aha” that breaks many simple ciphers — frequency analysis, where you look at which letters appear most often — shows up much later in the historical record, in the 9th century with Al-Kindi, who wrote an early known description of this kind of cryptanalysis.

And the Alphabet, being a creature of habit, kept the trick in the family.

Suetonius also tells us that Caesar’s successor Augustus used a similar shift, but gentler: a shift of 1 (B for A, C for B…). In some accounts, he didn’t “wrap around” at the end; instead of turning Z into A, he reportedly wrote “AA” for Z.

📖

Now — two thousand years later — the campfires are different. They glow from laptop screens. The messengers are function calls. And the Alphabet still walks, perfectly obedient, whenever we ask it to.

But instead of writing by hand and counting letters one by one, Caesar would slip off his crown, pull up his hacker hoodie, and fire up Python to encrypt his messages — like this:

Hello World!

📖

How would he do it? By writing simple Python functions that encrypt every message leaving and decrypt every message appearing on his screen.

def caesar_cipher(text, shift, encrypt=True):
    if not isinstance(shift, int):
        return 'Must be an integer.'
    if shift < 1 or shift > 26:
        return 'Must be between 1 and 26.'
    if not encrypt:
        shift = - shift

    abc = 'abcdefghijklmnopqrstuvwxyz'
    abc_shift = abc[shift:] + abc[:shift]
    t = str.maketrans(abc + abc.upper(), abc_shift + abc_shift.upper())
    return text.translate(t)

def encrypt(text, shift):
    return caesar_cipher(text, shift)

def decrypt(text, shift):
    return caesar_cipher(text, shift, encrypt=False)

print(encrypt('Hello World!', 3)) # Output: Khoor Zruog!
print(decrypt('Khoor Zruog!', 3)) # Output: Hello World!

This caesar_cipher() function is the commander of the whole operation. It takes a piece of text, a shift amount, and a little flag that says whether we’re encrypting (walking forward) or decrypting (walking back).

First, it checks the rules — because a cipher that accepts anything becomes a cipher that surprises you later:

shift must be an integer, because the Alphabet only moves in whole steps.
shift must be between 1 and 26, because English has 26 letters and you want the key to be meaningful.

Then comes the cleanest trick in the whole spell:

if not encrypt:
    shift = - shift

To decrypt, you don’t need a separate algorithm. You just reverse the direction of the walk. Same machinery, opposite steps.

📖

Next, your Alphabet is introduced:

abc = 'abcdefghijklmnopqrstuvwxyz'

And then you build a shifted version:

abc_shift = abc[shift:] + abc[:shift]

This is the “circle” part. If the shift pushes letters past Z, they wrap around to the beginning. With a shift of 3, the shifted alphabet becomes:

defghijklmnopqrstuvwxyzabc

Now you create a translation table that covers both lowercase and uppercase:

t = str.maketrans(abc + abc.upper(), abc_shift + abc_shift.upper())

So A doesn’t get left behind just because it’s wearing a capital letter.

📖

Finally, the letters take their walk through the message:

return text.translate(t)

That’s the moment the messenger returns, tablet in hand, with the same message — only dressed differently.

Your helper functions are the friendly guards at the tent flap:

encrypt(text, shift) calls caesar_cipher() with the default settings.
decrypt(text, shift) calls caesar_cipher() but flips encrypt=False, which flips the shift direction.

And your test prints show the Alphabet behaving exactly as promised:

encrypt('Hello World!', 3) becomes "Khoor Zruog!"
decrypt('Khoor Zruog!', 3) becomes "Hello World!"

📖

Somewhere in the quiet, Caesar would probably approve of that: simple, repeatable, and easy to explain to someone who just needs to send the order and move on.

Resources

https://lexundria.com/suet_jul/56.6/
https://en.wikipedia.org/wiki/Caesar_cipher

Brain.A turns 40 🥳 - A Bedtime Story

Julia 👩🏻‍💻 GDE — Mon, 19 Jan 2026 17:00:00 +0000

In January 1986, the Brain virus spread via floppy disks and became the first widely known IBM PC virus. Forty years later, its story still feels strangely familiar.

Settle in.

📖

It’s January 19th, 1986. A beige box of a computer sits on a desk, quietly warming the room the way old machines do. The screen glows. The keyboard waits. There’s no internet humming in the walls, no cloud floating overhead, no phone buzzing with notifications. Just a person doing something completely normal: reaching for a floppy disk.

📖

The floppy is thin and square and ordinary-looking, the kind you’d trade with a friend or carry to the office in a jacket pocket. It holds a program, maybe a game, maybe something useful, maybe something copied from someone else because—well—software was easy to copy, and people did. The disk slides into the drive with a soft push. The latch clicks. And deep inside that disk, right at the very beginning where the computer looks first when it tries to start, something is waiting.

📖

Not a file you can see in a directory. Not a name you can point at and delete. This is the boot sector—the tiny first chapter the computer reads before anything else. When the machine boots from that floppy, the code wakes up and does what it was written to do: it copies itself into that trusted beginning. It doesn’t announce itself with fireworks. It doesn’t shout. It simply settles in, like a bookmark that shouldn’t be there.

📖

From that moment, the room doesn’t feel any different. The person doesn’t feel any different. The computer mostly behaves like a computer. But the next time another floppy is inserted—another perfectly normal disk used for perfectly normal work—the virus is ready. It slips from memory onto the newcomer’s boot sector, quietly rewriting the first lines the machine would read. Then it waits again. And when that disk travels—passed to a colleague, swapped between friends, carried across town—it carries the same hidden bookmark along with it.

📖

This is how Brain moved through the world: not at internet speed, but at human speed. Hand to hand. Desk to desk. One floppy at a time.

📖

Sometimes it left hints, not to scare you, but because early viruses often came with signatures like graffiti in a place most people never visited. If someone inspected the right spot with the right tools, they might find a message tucked into the boot code. One line that became famous in retellings went, “Welcome to the Dungeon.” Not exactly a lullaby, but not a scream either—more like a mischievous note pinned behind the wallpaper.

📖

And if you kept looking, you might find something even stranger: contact information. Names. A location. Phone numbers. An address in Lahore, Pakistan. Because Brain wasn’t just anonymous sabotage drifting out of nowhere; most accounts trace it back to two brothers, Basit and Amjad Farooq Alvi, who ran a computer business there. The story goes that they were frustrated about people copying their medical software without permission, and they wrote Brain as a kind of anti-piracy marker—something that would tag disks and nudge users to contact them for “vaccination.” In their minds, it would stay close to the problem. In reality, software doesn’t stay put, and disks don’t stay loyal. They move. They get shared. They get reused. And a program that copies itself doesn’t politely stop at the border of your intentions.

📖

So Brain wandered.

📖

In practical terms, it didn’t always ruin people’s lives. It wasn’t a modern ransomware crew locking hospitals. It was often more of a creeping inconvenience: disks behaving oddly, the drive running slower, weird “bad sectors” appearing where you didn’t expect them, memory in DOS feeling a little tighter than it should. Brain even tried to protect the original boot information by moving it and marking the new hiding place as “bad” so normal tools wouldn’t overwrite it—clever in a very 1980s, low-level way. But clever doesn’t mean harmless, and “mostly works” is not comfort when your only copy of something important lives on a piece of plastic you can drop on the floor.

📖

Back then, the effect on people was less about dramatic catastrophe and more about a new kind of doubt. The floppy disk had been a simple object: you put it in, you ran your program, you got on with your day. Now it had a second identity, a hidden passenger. And because there was no internet needed for any of it, the idea landed differently: your computer could catch something from ordinary sharing, even in a world of disconnected machines.

📖

If you fast-forward to today, the same idea plays out with different props. The floppy disk has been replaced by email attachments, links, cracked installers, compromised updates, poisoned dependencies, and stolen credentials. The quiet “boot sector” hiding place has been replaced by an entire universe of persistence tricks—some so polished they look like legitimate software until they’re not. The speed has changed too: Brain walked; modern malware teleports. Brain spread as fast as people could pass disks around; modern malware spreads as fast as people can click.

📖

And yet, in the soft glow of that 1986 monitor, the story remains simple. A person does a normal thing. A computer trusts what it reads first. A little piece of code takes advantage of that trust. And somewhere far away—across oceans, across offices, across time—a virus named Brain keeps turning pages, moving its bookmark from one disk to the next, traveling not through wires, but through everyday life.

📖

The latch clicks again.

The drive light flickers.

And the room stays quiet.

Resources

Brain: Searching for the first PC virus in Pakistan https://www.youtube.com/watch?v=lnedOWfPKT0
The History and the Evolution of Computer Viruses https://archive.org/details/DEFCON_19_The_History_and_the_Evolution_of_Computer_Viruses
Brain (computer virus) https://en.wikipedia.org/wiki/Brain_%28computer_virus%29

Styling by Language: Using the lang Attribute for Multilingual Design

Julia 👩🏻‍💻 GDE — Sun, 21 Dec 2025 17:15:42 +0000

When East Meets West (on the Same Page)

If you’ve ever built a bilingual English – Japanese website, you know the struggle. English uses letters with ascenders, descenders, and varying widths. Japanese, on the other hand, mixes three scripts: kanji, hiragana, and katakana, each forming balanced, square-like characters.

Already last year, I told you about a special HTML element that you can use to style this scripts. Read my post HTML and CSS I didn't even know about before I started creating content.

This is not usually a big problem if the entire page is in one language. But when Latin letters are mixed with Japanese characters, as is increasingly the case, the font becomes more difficult to handle.

That means:

Japanese text usually needs more line height to breathe.
Kanji often appear denser and more detailed than Latin letters.
Western fonts can feel too “light” next to Japanese text.

This is where the lang attribute becomes your best friend. And he brings a plus one: CSS.

Let the Language Drive the Design

<p lang="en">Welcome to Starbucks.</p>
<p lang="ja">スターバックスへようこそ。</p>
:lang(en) {
  font-family: "Nunito Sans", sans-serif;
}

:lang(ja) {
  font-family: "Noto Sans JP" sans-serif;
}

Here, the English text uses Nunito, which has friendly, rounded shapes. The Japanese version pairs quite good with Noto Sans JP (Google Fonts), which was designed specifically as a typeface for all writing systems around the world. Since the content is separate, both fonts appear suitable and visually balanced.
Read more about the Noto: A typeface for the world project.

Font Weight and Visual Balance

However, when both writing systems are mixed together, which is common in the Japanese language today, typographical mismatches become noticeable. Meaning, When mixing languages, a font weight of 400 for Japanese might look visually heavier than 400 in Latin text because kana systems are more complex in shape.

<p lang="ja"><span lang="en">Starbucks</span>へようこそ。</p>

You can correct this by slightly adjusting weights between languages:

:lang(en) {
  font-weight: 400;
}

:lang(ja) {
  font-weight: 300;
}

This subtle change keeps both scripts visually balanced without the Japanese text looking darker. But if you look more closely and highlight the text, you will notice that the default line height of the whole text is slightly different, due to the different fonts used. And the whole thing becomes even more challenging when kanji characters are mixed in with the text.

Kanji: Density and Design

Kanji are logographic characters—each one carries meaning, not just sound. Because they’re compact but information-dense, large blocks of kanji can look heavier.

<h2 lang="en">Apple unveils the new iPhone 17 Pro.</h2>
<h2 lang="ja">
  <span lang="en">Apple</span>が新型<span lang="en">iPhone 17 Pro</span>を発表。
</h2>

You can help readability with

generous line-height (1.7–1.9)
slightly looser letter spacing (letter-spacing: 0.05em)
a not too heavy font-weight
avoiding all-caps Latin text near kanji — caps feel bulky by comparison

:lang(ja) {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  letter-spacing: 0.05em;
}

:lang(en) {
  font-family: "Noto Sans", sans-serif;
  font-size: 1.06em; /* +5% larger than Japanese */
  letter-spacing: 0;
  vertical-align: -0.03em; /* align baseline slightly */
}

When styled this way, the English and Japanese text sit naturally on the same line — adjusting the English spans with a slightly larger font size and a small vertical-align nudge raises their baseline just enough to match the Japanese characters. The result feels balanced in both weight and rhythm — one cohesive headline, not two scripts stitched together.

Bonus Tip: Variable Fonts! Google’s Variable Fonts make it even easier to fine-tune weight and width dynamically between scripts. If you use font-variation-settings, you can ensure text looks balanced across both languages at every viewport size.

Takeaway

Multilingual design isn’t just about translation — it’s about typographic empathy. English and Japanese each have their own rhythm, density, and shape language. Using the lang attribute with the right fonts helps you respect both, creating an experience that feels natural to all readers.

Next time you use different scripts on your page, don’t just think about switching words. Think about switching style, and let your typography speak both languages fluently.

Resources

Noto: A typeface for the world
Variable Fonts

This article was originally posted on Htmhell Adventcalender 2025. https://www.htmhell.dev/adventcalendar/2025/21/

This is what I learned organizing an a11y webinar series for a year, now I'm hosting my biggest hybrid event yet

Julia 👩🏻‍💻 GDE — Thu, 02 Oct 2025 19:32:48 +0000

When I started organizing accessibility (a11y) events a year ago, it was just a small webinar series (a11y webinar series). I wanted to bring people together, share knowledge, and show that inclusive design is not a niche topic—it’s the foundation of better digital experiences.

Almost a year later, I’ve hosted monthly sessions, invited experts from different backgrounds, and learned a lot about what it takes to make accessibility events engaging, inclusive, and impactful. Now, I’m taking the next step: hosting my biggest hybrid event yet—World Usability Day Vienna 2025.

What I learned in under one year of organizing a11y events

1. Consistency matters.
People show up when you keep showing up. A regular cadence builds trust and community. In the first few events, there will always be some dropouts. But the 20 people who stick around? They’ll stay until the very end. And that loyal core makes it worth continuing, because consistency builds community.

2. Accessibility is in the details.
At the beginning of every webinar, I always did a bit of housekeeping: showing participants how to turn on captions, where to find the recordings, slides, and uploaded transcripts. I reminded participants that they could ask anything related to accessibility—not just about that day’s topic—and even submit questions anonymously through the Q&A section, in English, German, or Japanese. These practices may seem small, but together they created a more inclusive and welcoming experience where everyone could fully participate.

3. Collaboration makes events better.
Reaching out to people in design, development, assistive tech, and academia created richer discussions than I could have planned alone.

4. Technology is an enabler—but only when chosen thoughtfully.
Accessibility-first tools (like live captioning, screen-reader-friendly platforms, and reliable streaming) make or break the experience for attendees.

From a webinar series to a world movement

This November, I’m joining the global celebration of World Usability Day with a hybrid event in Vienna. The theme this year is “Emerging Technology and Human Experience”—a perfect fit for the tools and ideas I’ve been exploring.

Here’s how I am making it work:

Hybrid setup with Logitech 360° cameras → so online participants feel in the room.
Streaming live on YouTube → open to everyone, no matter where they are.
Microsoft live translation → making English talks accessible to German-speaking audiences (and beyond).
In-person evening program → featuring voices from augmented reality, hardware innovation, and software design, showing the full spectrum of usability in practice.

It’s both exciting and a little intimidating, but it feels like the right next step: taking accessibility events beyond a niche circle and into a global conversation about usability, inclusion, and tech for humans.

Why this matters

Accessibility isn’t just about compliance checklists—it’s about people, dignity, and creating experiences that everyone can be part of. Organizing these events has shown me that when we connect across borders and disciplines, we create momentum for change.

By joining World Usability Day, I hope to not only amplify that message but also show that Vienna can be part of a worldwide accessibility and usability movement.

👉 If you’re curious, you can join us online via the live stream here: wud.accessibilityfirst.at

Let’s keep building technology that works for everyone.

Stay up2date with a11y events by subscribing to the A11y News Newsletter.

10xA11y Dev with Algolia Search

Julia 👩🏻‍💻 GDE — Sat, 26 Jul 2025 07:32:33 +0000

This is a submission for the Algolia MCP Server Challenge

Jump right to 👇🏽

What I Build
Demo
How I Utilized the Algolia MCP Server
Key Takeaways

What I Built

Welcome to searchA11y – your new sidekick in the world of inclusive web development! This is not just any search engine. It’s a superpowered, high-speed, accessibility-focused search tool that brings together blog posts and articles from top-tier accessibility experts like Adrian Roselli, Sara Soueidan, Léonie Watson, Manuel Matuzović, and more.

Why? Let’s be real — the web is full of accessibility advice that’s... well, hot garbage. But for devs who are just starting out, the good stuff and the nonsense often look exactly the same. It’s like trying to find a semantic needle in a div-styled haystack.
And many brilliant blog posts are scattered across the web, with little or no built-in search. So I thought, “Hey, what if I made one place to rule them all?”

For many of these valuable resources, this application provides a much-needed search functionality that was previously unavailable, empowering developers, designers, and accessibility advocates to find specific information quickly and efficiently.

The project consists of two main components:

1. A Node.js Backend Script: This data-collection service runs on a schedule. It systematically fetches the latest content from multiple RSS feeds, cleans and structures the data, and securely pushes it to an Algolia index.
2. A Vanilla JavaScript Frontend: A lightweight and performant user interface built with plain HTML, CSS, and JavaScript. It communicates directly with the Algolia API to provide a rich, interactive search experience without the overhead of a large framework. Thanks to Algolia’s API, it feels faster than a screen reader reading alt text on fast-forward.

The final application delivers an experience far beyond a simple text search, incorporating advanced features like full-text content search, author filtering, and responsive pagination.

Demo

YuriDevAT / search-a11y

Search application to fetch accessibility articles from resources you can rely on.

searchA11y

A high-performance, unified search engine for discovering content from leading web accessibility specialists.

This application aggregates articles and blog posts from a curated list of world-renowned accessibility experts, providing a single, powerful interface to search through their collective knowledge. For many of these valuable resources, this tool provides a much-needed search functionality that was previously unavailable.

The search experience is powered by Algolia, delivering instant, typo-tolerant results and an intelligent, user-friendly interface.

Important

The application is still in progress and not Screen Reader accessible at its current state.

Features

Unified Search: Instantly search across articles from multiple authors in one place.
Full-Text Content Search: Queries are matched against the full content of articles, not just titles.
Intelligent Snippets: Search results display relevant excerpts from the article content with matching keywords highlighted.
Author Filtering: Easily refine search results by selecting one or more authors from a filter bar.
Typo-Tolerant:…

View on GitHub

The live demonstration of searchA11y showcases the following user journey:

- Clean Landing Page: Say "Hello 👋🏽" to a clean, single-column interface featuring a prominent search bar and a horizontal filter bar of author names. A list of the most recent articles is displayed by default.
- Instant Search (possibility): As you begin typing a query like "aria lab", the search results could update in real-time with every keystroke, immediately displaying articles with "ARIA label" in the title or content. Yes, Algolia can make this possible. But to keep the user experience for Screen Reader users as high as possible, we should choose the old fashion way by hitting the enter key to submit the search key word(s), and provide a toggle for users who prefer the real-time version.
- Intelligent Snippets: Below each result's title, a relevant snippet from the article's content is displayed. If you searched for a term, that term is highlighted within the snippet, providing immediate context. Super helpful, right?
- Author Filtering: Click on Sara or Léonie’s names and instantly filter the results. The result set instantly refines to show only articles written by those two authors. The selected author buttons are underlined, providing clear visual feedback.
- Responsive Pagination: As you scroll to the bottom, you see a full pagination bar. When viewing the site on a mobile device, this bar automatically condenses to a shorter, mobile-friendly version to preserve screen space.

How I Utilized the Algolia MCP Server

Indexing Like a Pro

The backend script connects securely to the Algolia server using the Admin API Key to perform indexing operations. I used Algolia's saveObjects method with the autoGenerateObjectIDIfNotExist option to ensure robust and resilient data ingestion. The clearObjects command is used before each run to guarantee the index remains fresh and free of stale content.

Smart Search Features

The frontend communicates directly with the Algolia platform using the Search-Only API Key. It delivers lightning-fast results — and with hardly any code on my end! Here’s what’s happening under the hood:

Faceting: By configuring author as an Attribute for Faceting in the dashboard, I enabled the Algolia server to pre-calculate the list of all authors for the filter panel. This is a server-side operation that makes the frontend filter widget incredibly fast.

Snippeting: I configured content as a searchable attribute for snippeting. This allows the frontend to request an intelligent excerpt of the main article text, with the search query highlighted, without having to download the entire article content to the browser.

Typo Tolerance: All search queries benefit from Algolia's built-in typo tolerance and its sophisticated relevance ranking algorithm. This logic runs entirely on Algolia's servers, ensuring that even a simple frontend can deliver highly relevant results for complex or misspelled queries. Even if you type “axessibility,” Algolia’s got your back.

It's like having a librarian, auto-correct engine, and mind reader all rolled into one.

Key Takeaways

1. Start with the Hard Stuff (a.k.a. Backend First, Regret Never)
As a frontend enthusiast, I have a tendency to jump straight into the part I love most — designing, tweaking, and endlessly “just fixing one more thing” on the UI. But if there’s one universal truth in frontend development, it’s this: the frontend is never truly done. What looked perfect yesterday somehow feels off today.

This time, I broke the habit. I forced myself to start with the backend — reading through the developer docs, studying example implementations, and setting up the data ingestion process first. By focusing early on the backend logic, indexing flow, and how Algolia would fit into it all, I laid a solid foundation. The frontend followed naturally, evolving feature by feature: search box first, then filters, pagination, and so on.

2. Garbage In, Garbage Out: Data Quality Is Everything
One of the biggest (and earliest) lessons learned was that your output is only as reliable as your input. Parsing RSS feeds sounds easy — until you encounter broken feeds, inconsistent data fields, and sources that limit access (Adrian Roselli’s feed only shows the 10 most recent posts — a tragedy, honestly).

Defensive coding became a necessity: validating dates, checking for missing values, and gracefully skipping bad records. Some blogs I had hoped to include had no RSS feeds at all, which meant they had to be left out (for now).

Lesson learned: reliable data sources are just as important as clever code.

3. Frontend, Finally — and Lightweight by Design
Once the backend was humming along and the index was behaving, I turned to the frontend. I opted for plain HTML, CSS, and JavaScript to keep things lightweight and accessible — no frameworks, no bloat. The result? A responsive, fast-loading interface that works well across devices and remains easy to maintain.

Sometimes the best developer experience comes from simplicity. And with the provided styles from Algolia, I didn't have to change much.

4. Accessibility-First Dev Workflows Are Not Plug-and-Play
While Algolia offers a great developer experience overall, some of the default examples don’t quite hit the mark when it comes to semantic HTML or accessibility best practices. For someone like me who deeply values clean, accessible code, that would have meant to override quite a few default components.

The good news? Algolia makes that possible (Customize your Widgets). You can override almost everything, and that flexibility made all the difference. It allows me to build a frontend that aligns with my standards — both as a developer and as an advocate for inclusive design.

‼️ Dear Algolia Team, do you want to make your tools more accessible by default? Just ping me 😇

5. Don't Reinvent the Wheel — Use the Good Ones Already Out There
This project was a great reminder that I don’t have to build everything from scratch. Tools like Algolia exist for a reason — and using them can save time, reduce complexity, and allow you to focus on building what makes your project unique.

In short: good tools don’t just accelerate development, they enable it.

Throughout the process, I kept asking myself: “If I were a developer new to accessibility, what kind of search experience would actually help me?”

searchA11y is more than a search engine — it’s a resource hub, a learning portal, and a love letter to the accessibility community.

Built with care. Backed by Algolia. Searchable by everyone.

Now go ahead and give it a whirl. Your next favorite blog post is just a keystroke away.

LeetCode 2667. Create Hello World Function (Easy)

Julia 👩🏻‍💻 GDE — Sun, 18 Feb 2024 06:38:40 +0000

Could you solve the last LeetCode problem? 🤓 Here's another one, the simplest of the simplest. But hey, we all have to start somewhere.

Starting point

Write a function createHelloWorld. It should return a new function that always returns "Hello World".

My Submission

Let's take a look at my code. Yours maybe looks different, and that's okay. Everyone has their own approach.

var createHelloWorld = function() {
     return function() {
        return "Hello World"
     }
 }

What happens here?

var createHelloWorld = function() {

 }

What was given by LeetCode was the outer declaration, the initialization of var createHelloWorld, which was assigned a function.

👻 Note: I personally never use var when declaring a variable, I always opt for let or const, but since this was the default, I'll keep it that way (there's nothing really wrong with using var).

Return a function

In the description it is said that we should return a function, which I did by writing

return function() {

}

Always return "Hello World"

By adding

return "Hello World"

inside the function, the string "Hello World" will be returned, no matter which argument the function may get.

In general, I am bad at explaining technical stuff. So any advice is welcome to improve my explanation skills 🙏🏽.

LeetCode 2620. Counter (Easy)

Julia 👩🏻‍💻 GDE — Sun, 11 Feb 2024 19:23:39 +0000

Another day, another LeetCode problem 🤓. I hope, you could solve the last problem on your own and fully understand what was happening.

Starting point

Given an integer n, return a counter function.

This counter function initially returns n and then returns 1 more than the previous value every subsequent time it is called (n, n + 1, n + 2, etc).

My Submission

Let's take a look at my code. Yours maybe looks different, and that's okay. Everyone has their own approach.

var createCounter = function(n) {

    return function() {
        let m = n;
        n++
        return m;
    };
};

What happens here?

var createCounter = function(n) {

};

What was given by LeetCode was the outer declaration, the initialization of var createCounter, which was assigned a function that takes one argument, a number n.

Return a function

In the description it is said that we should return a function, which I did by writing

    return function() {

    };

Initial return and increment

The first return should be the number n itself. The next return should be one more then the number before and so on.

let m = n;
n++;
return m;

By declaring m and giving it the value of n, the first time we call the function the value of return m is what is was declared in the beginning, the value of n.

n++, which stand for increment the number n by 1, only happens after m is return. So, the second time we call the function, m will then be m + 1.

In general, I am bad at explaining technical stuff. So any advice is welcome to improve my explanation skills 🙏🏽.

How to create a good README.md file

Julia 👩🏻‍💻 GDE — Fri, 09 Feb 2024 06:56:58 +0000

What is a README file?

The readme file is the first thing a user will see when viewing your repository. It gives the user an idea of what the project is about, what language was used, what the terms and conditions are, what your project can do, shows screenshots of your running application, etc.

Why is it important?

This user could be a recruiter, your future boss or client. Therefore, it is important to note that the README of your project should answer the what, why and how of the project.

Therefore, it is important to include the most important information, give a clear description of the project and the technology stack used, and provide links and further instructions that may not fit into the README file to avoid unnecessary searching through all the other files, which could cause the user to simply lose interest and move on to the next potential employee.

I cannot stress enough how important it is to write good documentation about the project. Not only is the user looking for information about the project itself, but they also see your documentation skills, your attention to detail, which could bring you that much closer to getting a job.

If you've read other articles of mine, you've probably noticed how important it was for my career to have learned other skills besides programming that ultimately helped me get a job. And good documentation was one of them.

What to put into a readme?

Here are some guiding questions that will help you:

What is the project about?
Why did you develop it, what was your motivation?
What problem does it solve?
What have you learned?
What makes your project stand out?

I will show you how to convert these questions into text.

Possible structure

Description
Purpose and description of the project so that the person reading your portfolio can understand the project in the first few seconds of reading the project information.

Tech stack
Tech stack including the programming languages, libraries and frameworks your project uses (e.g.: Python, React, ...). If you have a front-end application that uses an external public API, please mention this.

Design
Examples of user interfaces associated with the project. If the project has a user interface, you can insert a GIF, video or image of the user interface.

If it is an application that runs on the terminal, you can create a GIF that shows how to work with it. This is good for giving an idea of how to interact with the application and what someone would see when they run the project.

Features
If your project has a lot of features, you should add a Features section and list them here.

How to run the project
Instructions on how to set up, run and use the project. This is good if someone wants to start the project from scratch, they should find everything they need to know in the project's README without needing any help from you.

If it's simple, you can include it in the readme file. You can also refer to another file in your project if the instructions are longer.

You should also host your project e.g. using Netlify, so users can open the deployed app and use it right away to see how it works. (Keep in mind that not every recruiter looking at your GitHub profile has a solid understanding on how to set up a project locally.)

How to style a readme?

The .md extension in README.md stands for Markdown, a lightweight markup language with a simple syntax for text formatting. It is a very simple language for creating beautiful and presentable readme files for GitHub.

Therefore, you can use typical markdown language, like



# Heading 1
## Heading 2
### Heading 3

Emphasis, aka italics, with *asterisks* or _underscores_.

Strong emphasis, aka bold, with **asterisks** or __underscores__.

Combined emphasis with **asterisks and _underscores_**.
1. First ordered list item
2. Another item
⋅⋅* Unordered sub-list. 
1. Actual numbers don't matter, just that it's a number
⋅⋅1. Ordered sub-list
4. And another item.

[I'm an inline-style link](https://www.google.com)

[I'm an inline-style link with title](https://www.google.com "Google's Homepage")

![descriptive alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1")

and much more. Make sure to get the most out of it.

Here are two examples of my beginner projects I applied for jobs three years ago. I would now make them even more detailed as described above.

YuriDevAT / sos-animals

This app will help abandoned animals get help from Animal welfare organizations all over the world when people reporting them via this app.

Description

This app will help abandoned animals get help from Animal welfare organizations all over the world when people reporting them via this app This project was initally created to participate in my first hackathon - Clerk x Hashnode Hackathon July 2021. Check out my article about the project and my experience in the hackathon.

🏆 This project was one of the Runner Up Winners. 🥳

Blog article: SOS Animals app - a project for the Clerk x Hashnode Hackathon

The idea is that when reporting an animal, the user will start filling out a form about the animal's situation and location If people want to leave their contact information in the last stage, this should give them the possibility to stay connected with the NGOs and get information about the condition of the animal. When submitting the form, the form should be sent to the nearest NGO station.

To…

View on GitHub

YuriDevAT / nikki-my-diary

Nikki is an online journal, which helps the user improve their Japanese Skills by writing down their thoughts and feelings. Created with ReactJS, Auth0, and TailwindCSS.

Description

Nikki - My Diary is an online journal where users can pen down their thoughts and feelings to improve their Japanese Skills. Nikki (jap. 日記 (Kanji)、にっき (Hiragana) means diary, and it is still common on Japan to use a diary to write down their daily lifes. Besides studying Japanese Grammar or vocabulary with books, it is highly recommended to write a diary in Japanese language to improve their Japanese skills.

Therefore, Nikki - My Diary is being created. It makes it easy for students to write down their feelings from everywhere, setting reminders to keep progress and motivates the user by sending quotes.

Blog article: Nikki - Online Journal App. A project for the Auth0 x Hashnode Hackathon

Project Setup

The app contains 3 views:

Home view - with description about the app and motivation quotes
Profile view - where the user can add their diary entries
Calendar…

View on GitHub

LeetCode 2634. Filter Elements from Array (Easy)

Julia 👩🏻‍💻 GDE — Sun, 04 Feb 2024 08:58:53 +0000

A few weeks ago, I started solving problems at LeetCode. Even though I've been in tech for three years, I hardly ever code in JavaScript because my position as an accessibility specialist doesn't really involve that programming language.

But my brain likes to challenge itself, so I practise JavaScript in my spare time. So if you're currently doing the same, let's share our approaches and learn together. 🤓

Starting point

Given an integer array arr and a filtering function fn, return a filtered array filteredArr.

The fn function takes one or two arguments:

arr[i] - number from the arr
i - index of arr[i]

filteredArr should only contain the elements from the arr for which the expression fn(arr[i], i) evaluates to a truthy value. A truthy value is a value where Boolean(value) returns true.

‼️ Please solve it without the built-in Array.filter method.

My Submission

Let's take a look at my code. Yours maybe looks different, and that's okay. Everyone has their own approach.

var filter = function(arr, fn) {
    const filteredArr = [];

    for(let i = 0; i < arr.length; i++) {
        if (fn(arr[i], i)) {
            filteredArr.push(arr[i])
        } 
    }
    return filteredArr;
};

What happens here?

var filter = function(arr, fn) {
    ...
}

What was given by LeetCode was the outer declaration*, the initialization of var filter, which was assigned a function that takes two arguments, an array of numbers arr and a filter function fn.

👻 Note: I personally never use var when declaring a variable, I always opt for let or const, but since this was the default, I'll keep it that way (there's nothing really wrong with using var).

const filteredArr = [];

I declare an empty array filteredArr which will store the filtered elements.

for(let i = 0; i < arr.length; i++) {
    ...
}

Since we are not allowed to use the Array.filter method, I am using a for loop to go over the given array arr. We start the for loop by setting kind of a counter by initializing a variable let i and set it to 0.
The second part of the loop is to compare the value of i against the length of the array arr.length. The loop should only run as long as i is smaller array (so, as long it is true).
After checking, if i is still smaller, i will be increased by 1 through i++ and the function inside the loop will be called as long as this is the case.

if (fn(arr[i], i)) {
   filteredArr.push(arr[i])
}

Inside the loop is an if statement. The if statement contains the given function fn which can take two arguments, the number in the array arr[i] and the index of the number i.
The function iterates over the arr (as long as the for loop is true) and compares the number with the value given by the function against its expression.

So in case the expression says: is the number inside the array greater then ten arr[i] > 10; and the number is 20, then it would return true. And when it is true, we push the number to the new created array filteredArr using the push() method.

return filteredArr;

Last thing for us to do is to return the filteredArr. That's it 😎.

What was it like for you to solve this problem? Was everything clear from the start or did you have difficulty understanding something?

I can imagine it always takes a bit of getting used to thinking back to the origin when you are used to using array methods.

*I'm not happy with what I'm calling it. Do you have any ideas on how I could describe it better?
In general, I am bad at explaining technical stuff. So any advice is welcome to improve my explanation skills 🙏🏽.

How to create cool color contrast widgets design

Julia 👩🏻‍💻 GDE — Wed, 31 Jan 2024 08:11:32 +0000

For my first Google Developer Expert presentation with the topic, Getting Started with Designing for Web Accessibility, I created a presentation talking about color contrast, how to test it and trying to make it as easy to understand as possible with the help of visuals.

Tools and Widgets
How to use the Widgets
Widget Settings
Final design that I use for my presentations

1. Tools and Widgets

For this particular case, I created the design using the Figma design tool.

I used two widget to create the color contrast cards:

One widget is called Color Contrast Checker by Nate Mandreza. It creates the card.
The other one is called Contrast Checker by Zach Inglis and createts the small chip.

2. How to use the Widgets

Select two colors that you want to compare. Create a new frame in which you want to compare the foreground color with the background color to have them handy.

2.1. Color Contrast Checker Card Widget

To use the card widget, enter the HEX color code of your two colors in the input field for the foreground and background. The widget then immediately calculates the contrast and displays the contrast ratio at the top right.

The widget is in light mode. The background is a light greyish color. The first component at the beginning, which displays the WCAG AA criterion and the contrast ratio, has the background color that you set in the input field below.

2.2. Contrast Checker Chip Widget

For the chip widget to work, you must use it within the frame that you created at the beginning. Set the background color of the frame to the color you will use as the background color and add for example a rectangle (for testing purpose) in the color of the foreground color.

Activate the widget. It immediately shows you whether the contrast ratio is good or bad. It adds text inside the widget showing pass or failed as well as an icon, green and checked for pass or red and x for failed. Looks pretty cool, right?

3. Widget Settings

The widgets have a variety of settings that you can adjust. You can have them appear in different versions so that you can customize them as you wish.

3.1. Color Contrast Checker Card Widget

The widget has three different types of settings. When they are activated, the background color of the button changes from black to blue.

Show the widget in dark mode

If you click on the icon in the left-hand corner of the widget, the background color changes to the dark version.

Show labels

It is common to use labels for the colors you have set, especially for larger projects. You can add them by activating the Show labels button.

Input fields appear under foreground and background input fields and the user can enter the desired value.

Switch layout

In the settings, you can switch between a horizontal and a vertical layout. The three different settings can be activated partially, all together or not at all.

Version 1 - Horizontal Layout

Version 2 - Dark mode, Show Labels, and Horizontal Layout

3.2. Contrast Checker Chip Widget

The widget has five different types of settings.

Switch size of widget

You can change the format of the widgets with the third selection element by switching between Tiny Width, Small Width and Large Width.

Version 1 - Small Width
Showing text if the test has passed or failed and its corresponding icons.

Version 2 - Tiny Width
Tiny width shows the same as small width but appears in a even smaller format.

Version 3 - Large Width
You get the most out of the information when using Large Width. Color Contrast ratio is shown in parentheses after the icon.

Switch Text Size

The second select element of the widget let's you change the text size. Color contrast can pass tests when the text size is large enough. You can switch between Normal Text and Large Text.

Meeting WCAG AA or AAA

The first select element of the widget let's you change the WCAG criteria you want to meet. Meeting WCAG AA is the norm.

Change HEX Color Code

The forth button lets you change the HEX Color Code you are going to use as foreground color. It changes the color snippet to the one set on the left corner.

Update color changes

To update the new set color, you have to click on the last button of the widget. The new values will be calculated and the output set to pass or fail.

4. Final design that I use for my presentations

Here is the final product. With this, I can visually show how color is dependent on each other, how it fails or meets the WCAG guidelines and make it easier for my audience to understand.

Additional Resources

Learn more about the different criteria you have to meet to pass color contrast: WebAIM Color Contrast Checker
My a11y website: Accessibility First

DEV Community: Julia 👩🏻‍💻 GDE

Red Team vs Blue Team — I Choose You!

1. 🎮 Pallet Town: Your SOC Dashboard

2. 🟥 Red Team: The Offensive Trainers

3. 🟦 Blue Team: The Defenders, Gym Leaders IRL

4. A Wild Vulnerability Appears!

5. 🟪 The Purple Team: Training Together

6. 🏆 Elite Four: Real-World Threats

7. Lesson Learned: I Choose You, Both

Coursera’s Google UX Design Certificate: What It Covers, How It’s Structured, and Why It Can Actually Work

What is the Google UX Design Certificate?

What topics does it cover?

How is the program structured?

What I liked (and what matters)

Here’s my take:

Tips to get the most out of it

Final thoughts

"Khoor Zruog!", Caesar says.

Resources

Brain.A turns 40 🥳 - A Bedtime Story

Resources

Styling by Language: Using the lang Attribute for Multilingual Design

When East Meets West (on the Same Page)

Let the Language Drive the Design

Font Weight and Visual Balance

Kanji: Density and Design

Takeaway

Resources

This is what I learned organizing an a11y webinar series for a year, now I'm hosting my biggest hybrid event yet

What I learned in under one year of organizing a11y events

From a webinar series to a world movement

Here’s how I am making it work:

Why this matters

10xA11y Dev with Algolia Search

What I Built

Demo

YuriDevAT / search-a11y

Search application to fetch accessibility articles from resources you can rely on.

searchA11y

Features

How I Utilized the Algolia MCP Server

Indexing Like a Pro

Smart Search Features

Key Takeaways

LeetCode 2667. Create Hello World Function (Easy)

Starting point

My Submission

Return a function

Always return "Hello World"

LeetCode 2620. Counter (Easy)

Starting point

My Submission

Return a function

Initial return and increment

How to create a good README.md file

What is a README file?

Why is it important?

What to put into a readme?

Possible structure

How to style a readme?

YuriDevAT / sos-animals

This app will help abandoned animals get help from Animal welfare organizations all over the world when people reporting them via this app.

Description

YuriDevAT / nikki-my-diary

Nikki is an online journal, which helps the user improve their Japanese Skills by writing down their thoughts and feelings. Created with ReactJS, Auth0, and TailwindCSS.

Description

Project Setup

LeetCode 2634. Filter Elements from Array (Easy)

Starting point

My Submission

How to create cool color contrast widgets design

Table of Contents

1. Tools and Widgets

2. How to use the Widgets

2.1. Color Contrast Checker Card Widget

2.2. Contrast Checker Chip Widget

3. Widget Settings

3.1. Color Contrast Checker Card Widget

Show the widget in dark mode

Show labels