<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Masked But Aware</title>
    <description>The latest articles on DEV Community by Masked But Aware (@maskedbutaware).</description>
    <link>https://dev.to/maskedbutaware</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3759833%2Fddbd6004-b4a4-4311-b3bb-ceb4ebd56103.png</url>
      <title>DEV Community: Masked But Aware</title>
      <link>https://dev.to/maskedbutaware</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/maskedbutaware"/>
    <language>en</language>
    <item>
      <title>I built a Crisis Mode for moments when thinking becomes too much</title>
      <dc:creator>Masked But Aware</dc:creator>
      <pubDate>Wed, 19 Aug 2026 02:11:51 +0000</pubDate>
      <link>https://dev.to/maskedbutaware/i-built-a-crisis-mode-for-moments-when-thinking-becomes-too-much-14k7</link>
      <guid>https://dev.to/maskedbutaware/i-built-a-crisis-mode-for-moments-when-thinking-becomes-too-much-14k7</guid>
      <description>&lt;p&gt;For the past year, I have been building &lt;a href="https://www.maskedbutaware.nl/en" rel="noopener noreferrer"&gt;Masked But Aware&lt;/a&gt;. I still work on it almost every day. One problem kept bothering me: most advice about sensory overload is written for a moment when you can still read, compare options and make a sensible decision.&lt;/p&gt;

&lt;p&gt;That is often exactly what becomes difficult during overload.&lt;/p&gt;

&lt;p&gt;A page with a long introduction and twelve coping ideas may be useful beforehand. In the moment itself, it can feel like another task. Even a question such as “What would help you right now?” can demand more processing than someone has available.&lt;/p&gt;

&lt;p&gt;So I made &lt;a href="https://www.maskedbutaware.nl/en/tools/crisis-mode" rel="noopener noreferrer"&gt;Crisis Mode&lt;/a&gt;, a free browser tool that tries to remove decisions instead of adding them.&lt;/p&gt;

&lt;h2&gt;
  
  
  The basic idea
&lt;/h2&gt;

&lt;p&gt;Crisis Mode shows one small step at a time. Someone can choose what is most urgent — reducing sensory input, communicating without having to explain everything, slowing their breathing, grounding themselves or finding immediate support — and then follow a very short sequence.&lt;/p&gt;

&lt;p&gt;The wording is deliberately plain. During overload, “Move away from the busiest part of the room” is more useful than a paragraph about environmental regulation.&lt;/p&gt;

&lt;p&gt;The reduce-input route starts with the environment. It suggests getting away from activity, lowering noise, making the visual field quieter and stopping new questions for a while. These are not clever interventions. That is the point: the tool should help someone do the next manageable thing, not teach a lesson while their brain is already full.&lt;/p&gt;

&lt;h2&gt;
  
  
  Communication when speech is hard
&lt;/h2&gt;

&lt;p&gt;One part I particularly wanted to include was a set of ready-made messages. People do not always lose speech completely during overload, but forming an explanation can still become painfully slow or impossible.&lt;/p&gt;

&lt;p&gt;The screen can show a sentence such as:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I am overloaded and cannot talk right now.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;or:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Please give me space and do not ask questions yet.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;There are also messages for asking someone to lower noise and lights, leaving the environment, postponing a decision, or asking a trusted person to stay nearby without talking too much.&lt;/p&gt;

&lt;p&gt;The user can show the sentence directly to somebody else. No account is required and there is no form to complete first.&lt;/p&gt;

&lt;h2&gt;
  
  
  Designing for the state in which it will be used
&lt;/h2&gt;

&lt;p&gt;I wanted the interface to feel quieter than the average wellbeing page. It uses large controls, restrained colour, short screens and clear ways to stop or go back. The breathing guide can be paused, and the animation respects reduced-motion settings.&lt;/p&gt;

&lt;p&gt;I also avoided making one technique look universally correct. A longer exhale may help one person and feel uncomfortable to another. Counting visible objects can be grounding on one day and irritating on the next. Crisis Mode therefore offers alternatives without turning the screen into a catalogue.&lt;/p&gt;

&lt;p&gt;This also changed how I thought about accessibility. It is easy to treat accessibility as a checklist of contrast ratios, labels and other technical requirements. Those things matter, but the amount of thinking an interface demands matters too. A technically accessible page can still be unusable when somebody has very little processing capacity left.&lt;/p&gt;

&lt;h2&gt;
  
  
  What the tool is not
&lt;/h2&gt;

&lt;p&gt;Crisis Mode is self-help, not an emergency service or a replacement for professional care. That boundary is visible inside the tool. If someone is in immediate danger or may harm themselves, the support route points them towards crisis services, including 988 in the US, 9-8-8 in Canada, Samaritans in the UK and Ireland, and Findahelpline for other countries.&lt;/p&gt;

&lt;p&gt;It also does not try to diagnose why this is happening. These moments can have different causes and look different from person to person. The immediate job is simply to make the next few minutes easier to navigate.&lt;/p&gt;

&lt;h2&gt;
  
  
  I would genuinely like feedback
&lt;/h2&gt;

&lt;p&gt;The tool is live now: &lt;a href="https://www.maskedbutaware.nl/en/tools/crisis-mode" rel="noopener noreferrer"&gt;open Crisis Mode&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;I am proud of how Masked But Aware has developed, but I know a tool like this gets better through real use rather than more polishing in isolation. If you work in accessibility, build low-stimulation interfaces, support neurodivergent people, or have used tools during overload yourself, I would be interested in what feels helpful and what still creates friction.&lt;/p&gt;

&lt;p&gt;In particular, I would like to know whether the first screen is calm enough and whether any instruction still asks for too much interpretation. Feedback can be left here or sent through the site.&lt;/p&gt;

&lt;p&gt;— Prim&lt;/p&gt;

</description>
      <category>a11y</category>
      <category>webdev</category>
      <category>autism</category>
      <category>mentalhealth</category>
    </item>
    <item>
      <title>Building a Free Autism Resource Platform with Next.js 16 &amp; Firebase</title>
      <dc:creator>Masked But Aware</dc:creator>
      <pubDate>Sun, 08 Feb 2026 10:48:58 +0000</pubDate>
      <link>https://dev.to/maskedbutaware/building-a-free-autism-resource-platform-with-nextjs-16-firebase-575o</link>
      <guid>https://dev.to/maskedbutaware/building-a-free-autism-resource-platform-with-nextjs-16-firebase-575o</guid>
      <description>&lt;p&gt;Last year I started building maskedbutaware.nl (&lt;a href="https://www.maskedbutaware.nl/" rel="noopener noreferrer"&gt;https://www.maskedbutaware.nl/&lt;/a&gt;) — a completely free platform about autism masking. No ads, no paywalls. Just information that should be accessible to everyone.&lt;/p&gt;

&lt;p&gt;The Stack&lt;/p&gt;

&lt;p&gt;Next.js 16 with App Router, React 19, Firebase (Auth + Firestore), Tailwind CSS 4, TypeScript, self-hosted IBM Plex fonts. Deployed on Vercel.&lt;/p&gt;

&lt;p&gt;Bilingual Without i18n Libraries&lt;/p&gt;

&lt;p&gt;The site serves Dutch and English. Instead of translation keys and middleware, each language gets its own component tree:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/app/learn/wat-is-masking/page.tsx        ← Dutch
/app/en/learn/what-is-masking/page.tsx    ← English
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Full control per language, zero runtime overhead. A locale mapping file handles hreflang alternates for SEO.&lt;/p&gt;

&lt;p&gt;Firebase: Debounce Your Writes&lt;/p&gt;

&lt;p&gt;Interactive tools (burnout checklist, trigger mapping, body scan) sync via Firestore with onSnapshot. Firestore bills per write — a 1200ms debounce cut writes by ~80%.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const debouncedSave = useMemo(
  () =&amp;gt; debounce((data: ToolState) =&amp;gt; {
    if (user?.uid) {
      setDoc(doc(db, 'tools', user.uid), data, { merge: true });
    }
  }, 1200),
  [user?.uid]
);

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Accessibility as Default&lt;/p&gt;

&lt;p&gt;Self-hosted fonts (no Google CDN dependency), no infinite scroll, consistent layout that never moves, prefers-reduced-motion respected, high contrast by default. Lighthouse: 100 / 96 / 100 / 100.&lt;/p&gt;

&lt;p&gt;Lessons Learned&lt;/p&gt;

&lt;p&gt;Start with the sitemap. I had pages live for weeks that search engines couldn't find because they weren't in the sitemap.&lt;/p&gt;

&lt;p&gt;Plan URLs first. Renaming routes after indexing means redirect headaches.&lt;/p&gt;

&lt;p&gt;Use a CMS for content. React components work but make non-technical contributions impossible. Next time: MDX or headless CMS.&lt;/p&gt;

&lt;p&gt;255 pages, two languages, all free. If you're building a resource site for an underserved community — it's worth the effort.&lt;/p&gt;

&lt;p&gt;maskedbutaware.nl (&lt;a href="https://www.maskedbutaware.nl/" rel="noopener noreferrer"&gt;https://www.maskedbutaware.nl/&lt;/a&gt;) — Free resources about autism masking.&lt;/p&gt;

</description>
      <category>nextjs</category>
      <category>firebase</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
