Accessible page title in a single-page React application

Over the summer, we, at N26, got the company Temesis to audit the accessibility of our web application. As part of their comprehensive and exhaustive report, we learnt that we were not handling page titles properly.

Traditionally, following a link causes the page to reload with the content of the new page. This makes it possible for screen-readers to pick up on the new page title and announce it.

With single-page applications using a JavaScript-powered routing system, only the content of the page tends to be reloaded in order to improve the perceived performance of the page.

In this article, I will share what I learnt from Temesis and how to make sure the title of your React SPAs is accessible to assistive technologies.

Overview

We will build a teeny-tiny React application with react-router and react-helmet. Our application will consist of:

  • A top-level component rendering a navigation and the router.
  • Three different pages served under different paths.
  • A “page title announcer”, the core topic of our article.

The main idea is that every page will define its own title. The page title announcer listens for page changes, stores the page title and renders it in a visually hidden paragraph which gets focused. This enables screen-readers to announce the new page title.

You can already look at the code on CodeSandbox.

Boilerplate code

To begin with, let’s create our page components. Each page is a simply React component rendering a

element, and a element with react-helmet.

import React from 'react'
import { Helmet } from 'react-helmet'

const Home = () => (
>
h1>Homeh1>
Helmet>
title>Hometitle>
Helmet>
>
)

const About = () => (
>
h1>Abouth1>
Helmet>
title>Abouttitle>
Helmet>
>
)

const Dashboard = () => (
>
h1>Dashboardh1>
Helmet>
title>Dashboardtitle>
Helmet>
>
)

Now, let’s create a top-level component which will handle the routing to these different pages. To keep it simple, let’s take it (almost) as is from the basic example of react-router. It is our component (described in the next section), a navigation, and a router.

const Root = () => (
Router>
>
TitleAnnouncer />

nav role='navigation'>
Link to='/'>HomeLink>
Link to='/about'>AboutLink>
Link to='/dashboard'>DashboardLink>
nav>

hr />

Switch>
Route exact path='/'>
Home />
Route>
Route path='/about'>
About />
Route>
Route path='/dashboard'>
Dashboard />
Route>
Switch>
>
Router>
)

Title announcer

The last missing piece of the puzzle is the actual title announcer. It does a few things:

  • It holds the page title in a local state.
  • It renders said title in a visually hidden paragraph (here with the .sr-only class).
  • It listens to Helmet data change to update the local state.
  • It listens for page change to focus the hidden paragraph (hence the tabIndex={-1}).
import React from 'react'
import { useLocation } from 'react-helmet'
import { Helmet } from 'react-helmet'

const TitleAnnouncer = props => {
const [title, setTitle] = React.useState('')
const titleRef = React.createRef()
const { pathname } = useLocation()
const onHelmetChange = ({ title }) => setTitle(title)

React.useEffect(() => {
if (titleRef.current) titleRef.current.focus()
}, [pathname])

return (
>
p tabIndex={-1} ref={titleRef} className='sr-only'>
{title}
p>

Helmet onChangeClientState={onHelmetChange} />
>
)
}

Wrapping up

That is all that is needed to handle page titles in an accessible way in a single-page React application. The react-router and react-helmet libraries are not necessary either, and the same pattern should be applicable regardless of the library (or lack thereof) in use.

Note that if you have a simple application and can guarantee there is always a relevant

element (independently of loading states, query errors and such), another, possibly simpler solution arises. It should be possible to skip that hidden element altogether, and focus the

element instead (still with tabIndex={-1}). This solution could not scale for us as we have hundreds of sometimes complex and dynamic pages, some with a visible

element, some with a hidden one, and so on.

Feel free to play with the code on CodeSandbox.


This content originally appeared on Hugo “Kitty” Giraudel and was authored by Hugo “Kitty” Giraudel

Over the summer, we, at N26, got the company Temesis to audit the accessibility of our web application. As part of their comprehensive and exhaustive report, we learnt that we were not handling page titles properly.

Traditionally, following a link causes the page to reload with the content of the new page. This makes it possible for screen-readers to pick up on the new page title and announce it.

With single-page applications using a JavaScript-powered routing system, only the content of the page tends to be reloaded in order to improve the perceived performance of the page.

In this article, I will share what I learnt from Temesis and how to make sure the title of your React SPAs is accessible to assistive technologies.

Overview

We will build a teeny-tiny React application with react-router and react-helmet. Our application will consist of:

  • A top-level component rendering a navigation and the router.
  • Three different pages served under different paths.
  • A “page title announcer”, the core topic of our article.

The main idea is that every page will define its own title. The page title announcer listens for page changes, stores the page title and renders it in a visually hidden paragraph which gets focused. This enables screen-readers to announce the new page title.

You can already look at the code on CodeSandbox.

Boilerplate code

To begin with, let’s create our page components. Each page is a simply React component rendering a

element, and a </code> element with <code>react-helmet</code>.</p> <pre class="language-jsx"><code class="language-jsx"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><br><span class="token keyword">import</span> <span class="token punctuation">{</span> Helmet <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-helmet'</span><br><br><span class="token keyword">const</span> <span class="token function-variable function">Home</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">Home</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Helmet</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span><span class="token plain-text">Home</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Helmet</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span><br><span class="token punctuation">)</span><br><br><span class="token keyword">const</span> <span class="token function-variable function">About</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">About</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Helmet</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span><span class="token plain-text">About</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Helmet</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span><br><span class="token punctuation">)</span><br><br><span class="token keyword">const</span> <span class="token function-variable function">Dashboard</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">Dashboard</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Helmet</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span><span class="token plain-text">Dashboard</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Helmet</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span><br><span class="token punctuation">)</span></code></pre> <p>Now, let’s create a top-level component which will handle the routing to these different pages. To keep it simple, let’s take it (almost) as is from <a href="https://reacttraining.com/react-router/web/example/basic">the basic example of <code>react-router</code></a>. It is our <a href="https://hugogiraudel.com/2020/01/15/accessible-title-in-a-single-page-react-application/#title-announcer"><code><TitleAnnouncer></code> component</a> (described in the next section), a navigation, and a router.</p> <pre class="language-jsx"><code class="language-jsx"><span class="token keyword">const</span> <span class="token function-variable function">Root</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Router</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">TitleAnnouncer</span></span> <span class="token punctuation">/></span></span><span class="token plain-text"><br><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>navigation<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Link</span></span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>/<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token plain-text">Home</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Link</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Link</span></span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>/about<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token plain-text">About</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Link</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Link</span></span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>/dashboard<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token plain-text">Dashboard</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Link</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span><span class="token plain-text"><br><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span> <span class="token punctuation">/></span></span><span class="token plain-text"><br><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Switch</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Route</span></span> <span class="token attr-name">exact</span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>/<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Home</span></span> <span class="token punctuation">/></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Route</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>/about<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">About</span></span> <span class="token punctuation">/></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Route</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>/dashboard<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Dashboard</span></span> <span class="token punctuation">/></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Route</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Switch</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Router</span></span><span class="token punctuation">></span></span><br><span class="token punctuation">)</span></code></pre> <h2 id="title-announcer">Title announcer</h2> <p>The last missing piece of the puzzle is the actual title announcer. It does a few things:</p> <ul> <li>It holds the page title in a local state.</li> <li>It renders said title in a visually hidden paragraph (here with the <a href="https://hugogiraudel.com/2016/10/13/css-hide-and-seek/#wrapping-things-up"><code>.sr-only</code> class</a>).</li> <li>It listens to Helmet data change to update the local state.</li> <li>It listens for page change to focus the hidden paragraph (hence the <code>tabIndex={-1}</code>).</li> </ul> <pre class="language-jsx"><code class="language-jsx"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><br><span class="token keyword">import</span> <span class="token punctuation">{</span> useLocation <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-helmet'</span><br><span class="token keyword">import</span> <span class="token punctuation">{</span> Helmet <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-helmet'</span><br><br><span class="token keyword">const</span> <span class="token function-variable function">TitleAnnouncer</span> <span class="token operator">=</span> <span class="token parameter">props</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token keyword">const</span> <span class="token punctuation">[</span>title<span class="token punctuation">,</span> setTitle<span class="token punctuation">]</span> <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><br> <span class="token keyword">const</span> titleRef <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createRef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><br> <span class="token keyword">const</span> <span class="token punctuation">{</span> pathname <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useLocation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><br> <span class="token keyword">const</span> <span class="token function-variable function">onHelmetChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> title <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">setTitle</span><span class="token punctuation">(</span>title<span class="token punctuation">)</span><br><br> React<span class="token punctuation">.</span><span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><br> <span class="token keyword">if</span> <span class="token punctuation">(</span>titleRef<span class="token punctuation">.</span>current<span class="token punctuation">)</span> titleRef<span class="token punctuation">.</span>current<span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><br> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>pathname<span class="token punctuation">]</span><span class="token punctuation">)</span><br><br> <span class="token keyword">return</span> <span class="token punctuation">(</span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">tabIndex</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">}</span></span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>titleRef<span class="token punctuation">}</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>sr-only<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token plain-text"><br> </span><span class="token punctuation">{</span>title<span class="token punctuation">}</span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token plain-text"><br><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Helmet</span></span> <span class="token attr-name">onChangeClientState</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onHelmetChange<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text"><br> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span><br> <span class="token punctuation">)</span><br><span class="token punctuation">}</span></code></pre> <h2 id="wrapping-up">Wrapping up</h2> <p>That is all that is needed to handle page titles in an accessible way in a single-page React application. The <code>react-router</code> and <code>react-helmet</code> libraries are not necessary either, and the same pattern should be applicable regardless of the library (or lack thereof) in use.</p> <p>Note that if you have a simple application and can guarantee there is always a relevant <code><h1></code> element (independently of loading states, query errors and such), another, possibly simpler solution arises. It should be possible to skip that hidden element altogether, and focus the <code><h1></code> element instead (still with <code>tabIndex={-1}</code>). This solution could not scale for us as we have hundreds of sometimes complex and dynamic pages, some with a visible <code><h1></code> element, some with a hidden one, and so on.</p> <p>Feel free to <a href="https://codesandbox.io/s/accessible-page-title-in-single-page-react-applications-u9e52">play with the code</a> on CodeSandbox.</p> <p class="syndicated-attribution"><br>This content originally appeared on <a href="https://hugogiraudel.com/2020/01/15/accessible-title-in-a-single-page-react-application/" target="_blank">Hugo “Kitty” Giraudel</a> and was authored by Hugo “Kitty” Giraudel<br></p> <br> <style> .ap-print-btn-comment { display:none; } .single .ap-print-btn-comment { display:block; } #respond { visibility:hidden; } .entry-content .ap-print-btn { display:none!important; } .entry-content .singleshow .ap-print-btn { display:block!important; } /* #respond { display:none; } */ </style> <script> function showhidecommentbox() { var x = document.getElementById("respond"); if (x.style.visibility === "visible") { x.style.visibility = "hidden"; } else { x.style.visibility = "visible"; } /* if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } */ } </script> <div class="singleshow"> <a href="?printer_app=1" class="ap-print-btn" style=" padding: 15px; margin-top: 10px; width: 140px; text-align: center; border-radius: 3px; font-size: 14px; box-shadow: none !important; background-color: #e2f1f8; color: #3a7d8c;float:left; margin-right:10px;text-decoration: none;">Print</a> <a onclick="pop()" class="ap-print-btn ap-print-btn-comment" style="cursor:pointer; padding: 15px; margin-top: 10px; width: 140px; text-align: center; border-radius: 3px; font-size: 14px; box-shadow: none !important; background-color: #e2f1f8; color: #3a7d8c;float:left; margin-right:10px;text-decoration: none;">Share</a> <a onclick="popcomment()" class="ap-print-btn ap-print-btn-comment" style="cursor:pointer; padding: 15px; margin-top: 10px; width: 140px; text-align: center; border-radius: 3px; font-size: 14px; box-shadow: none !important; background-color: #e2f1f8; color: #3a7d8c;float:left; margin-right:10px;text-decoration: none;">Comment</a> <a onclick="popcite()" class="ap-print-btn ap-print-btn-comment" style="cursor:pointer; padding: 15px; margin-top: 10px; width: 140px; text-align: center; border-radius: 3px; font-size: 14px; box-shadow: none !important; background-color: #e2f1f8; color: #3a7d8c;float:left; margin-right:10px;text-decoration: none;">Cite</a> <a onclick="popupload()" class="ap-print-btn ap-print-btn-comment" style="cursor:pointer; padding: 15px; margin-top: 10px; width: 140px; text-align: center; border-radius: 3px; font-size: 14px; box-shadow: none !important; background-color: #e2f1f8; color: #3a7d8c;float:left; margin-right:10px;text-decoration: none;">Upload</a> <a onclick="poptranslate()" class="ap-print-btn ap-print-btn-comment" style="cursor:pointer; padding: 15px; margin-top: 10px; width: 140px; text-align: center; border-radius: 3px; font-size: 14px; box-shadow: none !important; background-color: #e2f1f8; color: #3a7d8c;float:left; margin-right:10px;text-decoration: none;">Translate</a> <a onclick="popupdates()" class="ap-print-btn ap-print-btn-comment" style="cursor:pointer; padding: 15px; margin-top: 10px; width: 140px; text-align: center; border-radius: 3px; font-size: 14px; box-shadow: none !important; background-color: #e2f1f8; color: #3a7d8c;float:left; margin-right:10px;text-decoration: none;">Updates</a> <script> function pop() { var popup = document.getElementById('sharepopup'); popup.classList.toggle('show'); } function popcite() { var popup = document.getElementById('citationarea'); popup.classList.toggle('show'); } function popupload() { var popup = document.getElementById('uploadarea'); popup.classList.toggle('show'); } function popupdates() { var popup = document.getElementById('updatesarea'); popup.classList.toggle('show'); } function poptranslate() { var popup = document.getElementById('translatearea'); popup.classList.toggle('show'); } function popupdates() { var popup = document.getElementById('updatesarea'); popup.classList.toggle('show'); } function popcomment() { var popup = document.getElementById('commentarea'); popup.classList.toggle('show'); var x = document.getElementById("respond"); if (x.style.visibility === "visible") { x.style.visibility = "hidden"; } else { x.style.visibility = "visible"; } } </script> <style> .show{ display: grid !important; grid-template-columns: 70px auto; width: 100%; height: 100%; } #respond { margin-left: -40px; } .popup { display: inline-block; } .popup .popuptext { visibility: hidden; background-color: #e2f1f8; color: #fff; border-radius: 3px; padding:10px; position:relative; margin:10px 0; } .popuptext { background-color: #e2f1f8; color: #fff; border-radius: 3px; padding:10px; position:relative; margin:10px 0; } .popup { width: 100%; } .popup .show { visibility: visible; } #commentarea{ display: none; } #citationarea { display: none; } #commentarea .show{ display: inline !important; visibility: visible !important; background-color: #ffdb14; } #citationarea { display: none; } #citationarea .show { display: inline !important; visibility: visible !important; background-color: #ffdb14; } #uploadarea { display: none; } #uploadarea .show { display: inline !important; visibility: visible !important; background-color: #ffdb14; } #updatesarea { display: none; } #updatesarea .show { display: inline !important; visibility: visible !important; background-color: #ffdb14; } #translatearea { display: none; } #translatearea .show { display: inline !important; visibility: visible !important; background-color: #ffdb14; } .sharedashicons { color: white; text-decoration: none; padding: 5px 0; } #translatearea textarea { max-width: 580px; min-width: 100% !important; } .mediashareentry a { color: white; } .mediashareentry{ min-width: 400px; } #uploadarea { min-width: 400px !important; font-size: 1.4rem; } #file-form { min-width: 400px; } .singleshow { max-width: 600px; } .citationblock::selection { background: #ffdb14; /* WebKit/Blink Browsers */ color: #e2f1f8; } .citationblock::-moz-selection { background: #ffdb14; /* Gecko Browsers */ color: #000000; } b .citationblock::selection { background: #ffdb14; /* WebKit/Blink Browsers */ color: #000000; } b .citationblock::-moz-selection { background: #ffdb14; /* Gecko Browsers */ color: #000000; } #wp-content-wrap, #post_tags, #title, #post_image select, #post_image { margin-top: 33px; margin-bottom: 33px; } #async-upload { border: none !important; } #async-upload-wrap input { color: #3a7d8c; z-index: 999 !important; display: inherit; margin-top: 22px; border-color: ##3a7d8c; border: 1px solid; } #submit { color: #3a7d8c !important; } </style> <div class="popup"> <span class="popuptext" id="sharepopup"> <div class="sharelogo" id="emailsharelogo"><a href="mailto:info@example.com?&subject=Accessible page title in a single-page React application&body=https://www.scien.cx/2020/01/15/accessible-page-title-in-a-single-page-react-application/"><span class="sharedashicons dashicons dashicons-email"></span></a></div> <div class="sharelogo" id="facebooksharelogo"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://www.scien.cx/2020/01/15/accessible-page-title-in-a-single-page-react-application/"><span class="sharedashicons dashicons dashicons-facebook"></span></a></div> <div class="sharelogo" id="twittersharelogo"><a target="_blank" href="https://twitter.com/intent/tweet?url=https://www.scien.cx/2020/01/15/accessible-page-title-in-a-single-page-react-application/&text=Accessible page title in a single-page React application"><span class="sharedashicons dashicons dashicons-twitter"></span></a></div> <div class="js-emailcopybtn sharelogo" id="urlsharelogo"><span class="sharedashicons dashicons dashicons-admin-links" onclick="setClipboard('https://www.scien.cx/2020/01/15/accessible-page-title-in-a-single-page-react-application/')"></span></div> <style> #sharepopup { display: flex; justify-content: center; /* Aligns icons in the center */ gap: 10px; /* Adjust the space between icons */ flex-wrap: nowrap; /* Prevents icons from wrapping to the next line */ } .sharing-icons a:hover { background-color: #ddd; } </style> <script> function setClipboard(value) { navigator.clipboard.writeText(value).then(function() { // You can replace this alert with a more subtle notification if preferred alert('Link copied to clipboard!'); }, function(err) { // Fallback for browsers where clipboard API is not available // Creating a temporary textarea element to use the older execCommand const textarea = document.createElement('textarea'); textarea.value = value; document.body.appendChild(textarea); textarea.select(); document.execCommand('copy'); document.body.removeChild(textarea); alert('Link copied to clipboard!'); }); } </script> </span> </div> <div class="commentpopup" style"width: 100%;"> <span class="" id="commentarea"> <img src="https://www.radiofree.org/wp-content/plugins/print-app/icon.jpg" width="100%"> <div class="comments-wrapper"> </div><!-- .comments-wrapper --> </span> </div> <div class="citationpopup" style"width: 100%;"> <span class="popuptext" id="citationarea"> <span class=“citestyle”>APA</span> <div class="citationblock" id="content-1"><p> Hugo “Kitty” Giraudel | Sciencx (2020-01-15T00:00:00+00:00) <i>Accessible page title in a single-page React application</i>. Retrieved from <a href="https://www.scien.cx/2020/01/15/accessible-page-title-in-a-single-page-react-application/">https://www.scien.cx/2020/01/15/accessible-page-title-in-a-single-page-react-application/</a></div> <span class=“citestyle”>MLA</span><div class="citationblock" id="content-2">" » Accessible page title in a single-page React application." Hugo “Kitty” Giraudel | Sciencx - Wednesday January 15, 2020, https://www.scien.cx/2020/01/15/accessible-page-title-in-a-single-page-react-application/</div> <span class=“citestyle”>HARVARD</span><div class="citationblock" id="content-3">Hugo “Kitty” Giraudel | Sciencx Wednesday January 15, 2020 » Accessible page title in a single-page React application., viewed ,<https://www.scien.cx/2020/01/15/accessible-page-title-in-a-single-page-react-application/></div> <span class=“citestyle”>VANCOUVER</span><div class="citationblock" id="content-4">Hugo “Kitty” Giraudel | Sciencx - » Accessible page title in a single-page React application. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2020/01/15/accessible-page-title-in-a-single-page-react-application/</div> <span class=“citestyle”>CHICAGO</span><div class="citationblock" id="content-5">" » Accessible page title in a single-page React application." Hugo “Kitty” Giraudel | Sciencx - Accessed . https://www.scien.cx/2020/01/15/accessible-page-title-in-a-single-page-react-application/</div> <span class=“citestyle”>IEEE</span><div class="citationblock" id="content-6">" » Accessible page title in a single-page React application." Hugo “Kitty” Giraudel | Sciencx [Online]. Available: https://www.scien.cx/2020/01/15/accessible-page-title-in-a-single-page-react-application/. [Accessed: ]</div> <span class=“citestyle”>rf:citation</span><div class="citationblock" id="content-7"> » Accessible page title in a single-page React application | Hugo “Kitty” Giraudel | Sciencx | https://www.scien.cx/2020/01/15/accessible-page-title-in-a-single-page-react-application/ | </div> </span> </div> <div class="citationpopup" style="width: 100%;"> <span class="popuptext" id="uploadarea" style="width: 100%;"> <p>Please <a href="https://www.scien.cx/wp-login.php?redirect_to=https%3A%2F%2Fwww.scien.cx%2F2020%2F01%2F15%2Faccessible-page-title-in-a-single-page-react-application%2F">log in</a> to upload a file.</p> </span> </div> <div class="updatespopup" style="width: 100%;"> <span class="popuptext" id="updatesarea" style="width: 100%;"> <br><br><br> <span style="min-width:200px;font-size:17px; padding:30px;">There are no updates yet. <br>Click the Upload button above to add an update.</span> </span> </div> <style>#translationcontainer {padding: 22px;}</style><div class="translatepopup" style"width: 100%;padding:22px;"> <span class="popuptext" id="translatearea"> <container id="translationcontainer" class="translationcontainer"> <p>You must be logged in to translate posts. Please <a href="https://www.scien.cx/wp-login.php?redirect_to=https%3A%2F%2Fwww.scien.cx%2F2020%2F01%2F15%2Faccessible-page-title-in-a-single-page-react-application%2F">log in</a> or <a href="https://www.scien.cx/wp-login.php?action=register">register</a>.</p> </container> </span> </div> </div><!-- .entry-content --> <nav class="pagination-single border-color-border"> <a class="previous-post" href="https://www.scien.cx/2020/01/14/kirby-3-3-3-rc-1/"> <span class="arrow">←</span> <span class="title"><span class="title-inner">Kirby 3.3.3-rc.1</span></span> </a> <a class="next-post" href="https://www.scien.cx/2020/01/15/implementing-an-oauth-server-with-node-js-and-express/"> <span class="arrow">→</span> <span class="title"><span class="title-inner">Implementing an OAuth Server With Node.js and Express</span></span> </a> </nav><!-- .single-pagination --> </div><!-- .post-inner --> </article><!-- .post --> <div class="related-posts section-inner"> <h2 class="related-posts-title heading-size-3">Related Posts</h2> <div class="posts"> <div class="posts-grid related-posts-grid grid mcols-1 tcols-2 tlcols-3 dcols-4"> <div class="grid-item"> <article class="preview preview-post post-695514 post type-post status-publish format-standard hentry category-javascript category-programming category-react category-webdev" id="post-695514"> <figure class="preview-media"> </figure> <figure class="preview-media"> </figure> <header class="preview-header"> <h2 class="preview-title heading-size-3"><a href="https://www.scien.cx/2024/07/01/architect-level-setting-up-the-react-environment/">Architect level: Setting Up the React Environment</a></h2> <div class="post-meta-wrapper post-meta-archive"> <ul class="post-meta color-accent"> <li class="post-date"> <a class="meta-wrapper" href="https://www.scien.cx/2024/07/01/architect-level-setting-up-the-react-environment/"> <span class="meta-icon"> <span class="screen-reader-text">Post date</span> <svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19"><path fill="" d="M4.60069444,4.09375 L3.25,4.09375 C2.47334957,4.09375 1.84375,4.72334957 1.84375,5.5 L1.84375,7.26736111 L16.15625,7.26736111 L16.15625,5.5 C16.15625,4.72334957 15.5266504,4.09375 14.75,4.09375 L13.3993056,4.09375 L13.3993056,4.55555556 C13.3993056,5.02154581 13.0215458,5.39930556 12.5555556,5.39930556 C12.0895653,5.39930556 11.7118056,5.02154581 11.7118056,4.55555556 L11.7118056,4.09375 L6.28819444,4.09375 L6.28819444,4.55555556 C6.28819444,5.02154581 5.9104347,5.39930556 5.44444444,5.39930556 C4.97845419,5.39930556 4.60069444,5.02154581 4.60069444,4.55555556 L4.60069444,4.09375 Z M6.28819444,2.40625 L11.7118056,2.40625 L11.7118056,1 C11.7118056,0.534009742 12.0895653,0.15625 12.5555556,0.15625 C13.0215458,0.15625 13.3993056,0.534009742 13.3993056,1 L13.3993056,2.40625 L14.75,2.40625 C16.4586309,2.40625 17.84375,3.79136906 17.84375,5.5 L17.84375,15.875 C17.84375,17.5836309 16.4586309,18.96875 14.75,18.96875 L3.25,18.96875 C1.54136906,18.96875 0.15625,17.5836309 0.15625,15.875 L0.15625,5.5 C0.15625,3.79136906 1.54136906,2.40625 3.25,2.40625 L4.60069444,2.40625 L4.60069444,1 C4.60069444,0.534009742 4.97845419,0.15625 5.44444444,0.15625 C5.9104347,0.15625 6.28819444,0.534009742 6.28819444,1 L6.28819444,2.40625 Z M1.84375,8.95486111 L1.84375,15.875 C1.84375,16.6516504 2.47334957,17.28125 3.25,17.28125 L14.75,17.28125 C15.5266504,17.28125 16.15625,16.6516504 16.15625,15.875 L16.15625,8.95486111 L1.84375,8.95486111 Z" /></svg> </span> <span class="meta-text"> July 1, 2024 </span> </a> </li> <li class="post-author meta-wrapper"> <span class="meta-icon"> <span class="screen-reader-text">Post author</span> <svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="0 0 18 20"><path fill="" d="M18,19 C18,19.5522847 17.5522847,20 17,20 C16.4477153,20 16,19.5522847 16,19 L16,17 C16,15.3431458 14.6568542,14 13,14 L5,14 C3.34314575,14 2,15.3431458 2,17 L2,19 C2,19.5522847 1.55228475,20 1,20 C0.44771525,20 0,19.5522847 0,19 L0,17 C0,14.2385763 2.23857625,12 5,12 L13,12 C15.7614237,12 18,14.2385763 18,17 L18,19 Z M9,10 C6.23857625,10 4,7.76142375 4,5 C4,2.23857625 6.23857625,0 9,0 C11.7614237,0 14,2.23857625 14,5 C14,7.76142375 11.7614237,10 9,10 Z M9,8 C10.6568542,8 12,6.65685425 12,5 C12,3.34314575 10.6568542,2 9,2 C7.34314575,2 6,3.34314575 6,5 C6,6.65685425 7.34314575,8 9,8 Z" /></svg> </span> <span class="meta-text"> By <a href="https://www.scien.cx/author/david-zamora-ballesteros/">David Zamora Ballesteros</a> </span> </li> <li class="post-categories meta-wrapper"> <span class="meta-icon"> <span class="screen-reader-text">Post categories</span> <svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="19" viewBox="0 0 20 19"><path fill="" d="M2.8,1.85 C2.275329,1.85 1.85,2.27532949 1.85,2.8 L1.85,15.4 C1.85,15.9246705 2.275329,16.35 2.8,16.35 L17.2,16.35 C17.724671,16.35 18.15,15.9246705 18.15,15.4 L18.15,5.5 C18.15,4.97532949 17.724671,4.55 17.2,4.55 L9.1,4.55 C8.8158,4.55 8.550403,4.40796403 8.392757,4.17149517 L6.845094,1.85 L2.8,1.85 Z M17.2,2.85 C18.663555,2.85 19.85,4.03644541 19.85,5.5 L19.85,15.4 C19.85,16.8635546 18.663555,18.05 17.2,18.05 L2.8,18.05 C1.336445,18.05 0.15,16.8635546 0.15,15.4 L0.15,2.8 C0.15,1.33644541 1.336445,0.15 2.8,0.15 L7.3,0.15 C7.5842,0.15 7.849597,0.292035965 8.007243,0.528504833 L9.554906,2.85 L17.2,2.85 Z" /></svg> </span> <span class="meta-text"> In <a href="https://www.scien.cx/category/javascript/" rel="category tag">JavaScript</a>, <a href="https://www.scien.cx/category/programming/" rel="category tag">programming</a>, <a href="https://www.scien.cx/category/react/" rel="category tag">react</a>, <a href="https://www.scien.cx/category/webdev/" rel="category tag">webdev</a> </span> </li> </ul> </div> </header><!-- .preview-header --> </article><!-- .preview --> </div><!-- .grid-item --> <div class="grid-item"> <article class="preview preview-post post-13746 post type-post status-publish format-standard hentry category-javascript category-react" id="post-13746"> <figure class="preview-media"> <div class="owl-carousel owl-theme gal-item" id="owl-13746"> <div class="item" style="background-image: url('https://images.squarespace-cdn.com/content/v1/5a20387690bccee5e702f9c7/1579321135515-B1QRW5WQK3ZTDGT34ODX/ke17ZwdGBToddI8pDm48kNL9wMwFkLVMS1Fq9Osak2tZw-zPPgdn4jUwVcJE1ZvWhcwhEtWJXoshNdA9f1qD7RTL-rG-vgU-7ovTp6rrVy3eFY0C2OOpWuqfAc5T9PiBPSskoMtk7upRjzO9mUQUrQ/giphy.gif?format=1000w')"><a href="https://www.scien.cx/2020/01/18/memoization-generators-virtualization-oh-my-building-a-high-performance-directory-component-in-react/"></a></div> </div> <script> $('#owl-13746').owlCarousel({ loop:true, margin:10, nav:true, items: 1, }); </script> </figure> <figure class="preview-media"> </figure> <header class="preview-header"> <h2 class="preview-title heading-size-3"><a href="https://www.scien.cx/2020/01/18/memoization-generators-virtualization-oh-my-building-a-high-performance-directory-component-in-react/">Memoization, Generators, Virtualization, Oh my! Building a High Performance Directory Component in React</a></h2> <div class="post-meta-wrapper post-meta-archive"> <ul class="post-meta color-accent"> <li class="post-date"> <a class="meta-wrapper" href="https://www.scien.cx/2020/01/18/memoization-generators-virtualization-oh-my-building-a-high-performance-directory-component-in-react/"> <span class="meta-icon"> <span class="screen-reader-text">Post date</span> <svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19"><path fill="" d="M4.60069444,4.09375 L3.25,4.09375 C2.47334957,4.09375 1.84375,4.72334957 1.84375,5.5 L1.84375,7.26736111 L16.15625,7.26736111 L16.15625,5.5 C16.15625,4.72334957 15.5266504,4.09375 14.75,4.09375 L13.3993056,4.09375 L13.3993056,4.55555556 C13.3993056,5.02154581 13.0215458,5.39930556 12.5555556,5.39930556 C12.0895653,5.39930556 11.7118056,5.02154581 11.7118056,4.55555556 L11.7118056,4.09375 L6.28819444,4.09375 L6.28819444,4.55555556 C6.28819444,5.02154581 5.9104347,5.39930556 5.44444444,5.39930556 C4.97845419,5.39930556 4.60069444,5.02154581 4.60069444,4.55555556 L4.60069444,4.09375 Z M6.28819444,2.40625 L11.7118056,2.40625 L11.7118056,1 C11.7118056,0.534009742 12.0895653,0.15625 12.5555556,0.15625 C13.0215458,0.15625 13.3993056,0.534009742 13.3993056,1 L13.3993056,2.40625 L14.75,2.40625 C16.4586309,2.40625 17.84375,3.79136906 17.84375,5.5 L17.84375,15.875 C17.84375,17.5836309 16.4586309,18.96875 14.75,18.96875 L3.25,18.96875 C1.54136906,18.96875 0.15625,17.5836309 0.15625,15.875 L0.15625,5.5 C0.15625,3.79136906 1.54136906,2.40625 3.25,2.40625 L4.60069444,2.40625 L4.60069444,1 C4.60069444,0.534009742 4.97845419,0.15625 5.44444444,0.15625 C5.9104347,0.15625 6.28819444,0.534009742 6.28819444,1 L6.28819444,2.40625 Z M1.84375,8.95486111 L1.84375,15.875 C1.84375,16.6516504 2.47334957,17.28125 3.25,17.28125 L14.75,17.28125 C15.5266504,17.28125 16.15625,16.6516504 16.15625,15.875 L16.15625,8.95486111 L1.84375,8.95486111 Z" /></svg> </span> <span class="meta-text"> January 18, 2020 </span> </a> </li> <li class="post-author meta-wrapper"> <span class="meta-icon"> <span class="screen-reader-text">Post author</span> <svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="0 0 18 20"><path fill="" d="M18,19 C18,19.5522847 17.5522847,20 17,20 C16.4477153,20 16,19.5522847 16,19 L16,17 C16,15.3431458 14.6568542,14 13,14 L5,14 C3.34314575,14 2,15.3431458 2,17 L2,19 C2,19.5522847 1.55228475,20 1,20 C0.44771525,20 0,19.5522847 0,19 L0,17 C0,14.2385763 2.23857625,12 5,12 L13,12 C15.7614237,12 18,14.2385763 18,17 L18,19 Z M9,10 C6.23857625,10 4,7.76142375 4,5 C4,2.23857625 6.23857625,0 9,0 C11.7614237,0 14,2.23857625 14,5 C14,7.76142375 11.7614237,10 9,10 Z M9,8 C10.6568542,8 12,6.65685425 12,5 C12,3.34314575 10.6568542,2 9,2 C7.34314575,2 6,3.34314575 6,5 C6,6.65685425 7.34314575,8 9,8 Z" /></svg> </span> <span class="meta-text"> By <a href="https://www.scien.cx/author/emily-freeman/">Emily Freeman</a> </span> </li> <li class="post-categories meta-wrapper"> <span class="meta-icon"> <span class="screen-reader-text">Post categories</span> <svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="19" viewBox="0 0 20 19"><path fill="" d="M2.8,1.85 C2.275329,1.85 1.85,2.27532949 1.85,2.8 L1.85,15.4 C1.85,15.9246705 2.275329,16.35 2.8,16.35 L17.2,16.35 C17.724671,16.35 18.15,15.9246705 18.15,15.4 L18.15,5.5 C18.15,4.97532949 17.724671,4.55 17.2,4.55 L9.1,4.55 C8.8158,4.55 8.550403,4.40796403 8.392757,4.17149517 L6.845094,1.85 L2.8,1.85 Z M17.2,2.85 C18.663555,2.85 19.85,4.03644541 19.85,5.5 L19.85,15.4 C19.85,16.8635546 18.663555,18.05 17.2,18.05 L2.8,18.05 C1.336445,18.05 0.15,16.8635546 0.15,15.4 L0.15,2.8 C0.15,1.33644541 1.336445,0.15 2.8,0.15 L7.3,0.15 C7.5842,0.15 7.849597,0.292035965 8.007243,0.528504833 L9.554906,2.85 L17.2,2.85 Z" /></svg> </span> <span class="meta-text"> In <a href="https://www.scien.cx/category/javascript/" rel="category tag">JavaScript</a>, <a href="https://www.scien.cx/category/react/" rel="category tag">react</a> </span> </li> </ul> </div> </header><!-- .preview-header --> </article><!-- .preview --> </div><!-- .grid-item --> <div class="grid-item"> <article class="preview preview-post post-310393 post type-post status-publish format-standard hentry category-javascript category-react category-remix category-webdev" id="post-310393"> <figure class="preview-media"> <div class="owl-carousel owl-theme gal-item" id="owl-310393"> <div class="item" style="background-image: url('https://res.cloudinary.com/practicaldev/image/fetch/s---8RdhMP1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/lES2wax.png')"><a href="https://www.scien.cx/2021/12/01/remix-styling-using-vanilla-css/"></a></div> <div class="item" style="background-image: url('https://res.cloudinary.com/practicaldev/image/fetch/s--5QbvDpiM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/TXb6jSn.png')"><a href="https://www.scien.cx/2021/12/01/remix-styling-using-vanilla-css/"></a></div> <div class="item" style="background-image: url('https://res.cloudinary.com/practicaldev/image/fetch/s--AqczEVjT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://media2.giphy.com/media/wyhurq5jLbhOYge40I/giphy.gif')"><a href="https://www.scien.cx/2021/12/01/remix-styling-using-vanilla-css/"></a></div> <div class="item" style="background-image: url('https://res.cloudinary.com/practicaldev/image/fetch/s--Zl2GOHEZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://media2.giphy.com/media/xLnnCCXJXEyvzjqGrV/giphy.gif')"><a href="https://www.scien.cx/2021/12/01/remix-styling-using-vanilla-css/"></a></div> <div class="item" style="background-image: url('https://res.cloudinary.com/practicaldev/image/fetch/s--QAuaydiN--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/DAWKmVg.png')"><a href="https://www.scien.cx/2021/12/01/remix-styling-using-vanilla-css/"></a></div> <div class="item" style="background-image: url('https://res.cloudinary.com/practicaldev/image/fetch/s--bJ2QiAE---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://media2.giphy.com/media/HPrsNSdsodJmux5ola/giphy.gif')"><a href="https://www.scien.cx/2021/12/01/remix-styling-using-vanilla-css/"></a></div> <div class="item" style="background-image: url('https://res.cloudinary.com/practicaldev/image/fetch/s--cKlKwfoE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://media2.giphy.com/media/JRaCZXkbchvIdNgnwV/giphy.gif')"><a href="https://www.scien.cx/2021/12/01/remix-styling-using-vanilla-css/"></a></div> <div class="item" style="background-image: url('https://res.cloudinary.com/practicaldev/image/fetch/s--z-rvQ14c--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/oAlYoQ7.png')"><a href="https://www.scien.cx/2021/12/01/remix-styling-using-vanilla-css/"></a></div> <div class="item" style="background-image: url('https://res.cloudinary.com/practicaldev/image/fetch/s--aau8sfhy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/nIVB8vo.png')"><a href="https://www.scien.cx/2021/12/01/remix-styling-using-vanilla-css/"></a></div> <div class="item" style="background-image: url('https://res.cloudinary.com/practicaldev/image/fetch/s--I--LLdH8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/Eb8SSnE.png')"><a href="https://www.scien.cx/2021/12/01/remix-styling-using-vanilla-css/"></a></div> <div class="item" style="background-image: url('https://res.cloudinary.com/practicaldev/image/fetch/s--4Tyocxe1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://media2.giphy.com/media/2UiODQD1eXy4Hv1N3n/giphy.gif')"><a href="https://www.scien.cx/2021/12/01/remix-styling-using-vanilla-css/"></a></div> <div class="item" style="background-image: url('https://res.cloudinary.com/practicaldev/image/fetch/s--LJc1NP1Q--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://media2.giphy.com/media/jm5PbsI2yLMHrREtMP/giphy.gif')"><a href="https://www.scien.cx/2021/12/01/remix-styling-using-vanilla-css/"></a></div> <div class="item" style="background-image: url('https://res.cloudinary.com/practicaldev/image/fetch/s--zQj764Ae--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.buymeacoffee.com/buttons/default-orange.png')"><a href="https://www.scien.cx/2021/12/01/remix-styling-using-vanilla-css/"></a></div> </div> <script> $('#owl-310393').owlCarousel({ loop:true, margin:10, nav:true, items: 1, }); </script> </figure> <figure class="preview-media"> </figure> <header class="preview-header"> <h2 class="preview-title heading-size-3"><a href="https://www.scien.cx/2021/12/01/remix-styling-using-vanilla-css/">Remix Styling using Vanilla CSS</a></h2> <div class="post-meta-wrapper post-meta-archive"> <ul class="post-meta color-accent"> <li class="post-date"> <a class="meta-wrapper" href="https://www.scien.cx/2021/12/01/remix-styling-using-vanilla-css/"> <span class="meta-icon"> <span class="screen-reader-text">Post date</span> <svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19"><path fill="" d="M4.60069444,4.09375 L3.25,4.09375 C2.47334957,4.09375 1.84375,4.72334957 1.84375,5.5 L1.84375,7.26736111 L16.15625,7.26736111 L16.15625,5.5 C16.15625,4.72334957 15.5266504,4.09375 14.75,4.09375 L13.3993056,4.09375 L13.3993056,4.55555556 C13.3993056,5.02154581 13.0215458,5.39930556 12.5555556,5.39930556 C12.0895653,5.39930556 11.7118056,5.02154581 11.7118056,4.55555556 L11.7118056,4.09375 L6.28819444,4.09375 L6.28819444,4.55555556 C6.28819444,5.02154581 5.9104347,5.39930556 5.44444444,5.39930556 C4.97845419,5.39930556 4.60069444,5.02154581 4.60069444,4.55555556 L4.60069444,4.09375 Z M6.28819444,2.40625 L11.7118056,2.40625 L11.7118056,1 C11.7118056,0.534009742 12.0895653,0.15625 12.5555556,0.15625 C13.0215458,0.15625 13.3993056,0.534009742 13.3993056,1 L13.3993056,2.40625 L14.75,2.40625 C16.4586309,2.40625 17.84375,3.79136906 17.84375,5.5 L17.84375,15.875 C17.84375,17.5836309 16.4586309,18.96875 14.75,18.96875 L3.25,18.96875 C1.54136906,18.96875 0.15625,17.5836309 0.15625,15.875 L0.15625,5.5 C0.15625,3.79136906 1.54136906,2.40625 3.25,2.40625 L4.60069444,2.40625 L4.60069444,1 C4.60069444,0.534009742 4.97845419,0.15625 5.44444444,0.15625 C5.9104347,0.15625 6.28819444,0.534009742 6.28819444,1 L6.28819444,2.40625 Z M1.84375,8.95486111 L1.84375,15.875 C1.84375,16.6516504 2.47334957,17.28125 3.25,17.28125 L14.75,17.28125 C15.5266504,17.28125 16.15625,16.6516504 16.15625,15.875 L16.15625,8.95486111 L1.84375,8.95486111 Z" /></svg> </span> <span class="meta-text"> December 1, 2021 </span> </a> </li> <li class="post-author meta-wrapper"> <span class="meta-icon"> <span class="screen-reader-text">Post author</span> <svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="0 0 18 20"><path fill="" d="M18,19 C18,19.5522847 17.5522847,20 17,20 C16.4477153,20 16,19.5522847 16,19 L16,17 C16,15.3431458 14.6568542,14 13,14 L5,14 C3.34314575,14 2,15.3431458 2,17 L2,19 C2,19.5522847 1.55228475,20 1,20 C0.44771525,20 0,19.5522847 0,19 L0,17 C0,14.2385763 2.23857625,12 5,12 L13,12 C15.7614237,12 18,14.2385763 18,17 L18,19 Z M9,10 C6.23857625,10 4,7.76142375 4,5 C4,2.23857625 6.23857625,0 9,0 C11.7614237,0 14,2.23857625 14,5 C14,7.76142375 11.7614237,10 9,10 Z M9,8 C10.6568542,8 12,6.65685425 12,5 C12,3.34314575 10.6568542,2 9,2 C7.34314575,2 6,3.34314575 6,5 C6,6.65685425 7.34314575,8 9,8 Z" /></svg> </span> <span class="meta-text"> By <a href="https://www.scien.cx/author/carlo-gino-catapang/">Carlo Gino Catapang</a> </span> </li> <li class="post-categories meta-wrapper"> <span class="meta-icon"> <span class="screen-reader-text">Post categories</span> <svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="19" viewBox="0 0 20 19"><path fill="" d="M2.8,1.85 C2.275329,1.85 1.85,2.27532949 1.85,2.8 L1.85,15.4 C1.85,15.9246705 2.275329,16.35 2.8,16.35 L17.2,16.35 C17.724671,16.35 18.15,15.9246705 18.15,15.4 L18.15,5.5 C18.15,4.97532949 17.724671,4.55 17.2,4.55 L9.1,4.55 C8.8158,4.55 8.550403,4.40796403 8.392757,4.17149517 L6.845094,1.85 L2.8,1.85 Z M17.2,2.85 C18.663555,2.85 19.85,4.03644541 19.85,5.5 L19.85,15.4 C19.85,16.8635546 18.663555,18.05 17.2,18.05 L2.8,18.05 C1.336445,18.05 0.15,16.8635546 0.15,15.4 L0.15,2.8 C0.15,1.33644541 1.336445,0.15 2.8,0.15 L7.3,0.15 C7.5842,0.15 7.849597,0.292035965 8.007243,0.528504833 L9.554906,2.85 L17.2,2.85 Z" /></svg> </span> <span class="meta-text"> In <a href="https://www.scien.cx/category/javascript/" rel="category tag">JavaScript</a>, <a href="https://www.scien.cx/category/react/" rel="category tag">react</a>, <a href="https://www.scien.cx/category/remix/" rel="category tag">remix</a>, <a href="https://www.scien.cx/category/webdev/" rel="category tag">webdev</a> </span> </li> </ul> </div> </header><!-- .preview-header --> </article><!-- .preview --> </div><!-- .grid-item --> <div class="grid-item"> <article class="preview preview-post post-160961 post type-post status-publish format-standard hentry category-flutter category-react category-reactnative category-webdev" id="post-160961"> <figure class="preview-media"> </figure> <figure class="preview-media"> </figure> <header class="preview-header"> <h2 class="preview-title heading-size-3"><a href="https://www.scien.cx/2021/06/22/flutter-is-better-than-react-native-thoughts/">“Flutter is better than React Native”. Thoughts?</a></h2> <div class="post-meta-wrapper post-meta-archive"> <ul class="post-meta color-accent"> <li class="post-date"> <a class="meta-wrapper" href="https://www.scien.cx/2021/06/22/flutter-is-better-than-react-native-thoughts/"> <span class="meta-icon"> <span class="screen-reader-text">Post date</span> <svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19"><path fill="" d="M4.60069444,4.09375 L3.25,4.09375 C2.47334957,4.09375 1.84375,4.72334957 1.84375,5.5 L1.84375,7.26736111 L16.15625,7.26736111 L16.15625,5.5 C16.15625,4.72334957 15.5266504,4.09375 14.75,4.09375 L13.3993056,4.09375 L13.3993056,4.55555556 C13.3993056,5.02154581 13.0215458,5.39930556 12.5555556,5.39930556 C12.0895653,5.39930556 11.7118056,5.02154581 11.7118056,4.55555556 L11.7118056,4.09375 L6.28819444,4.09375 L6.28819444,4.55555556 C6.28819444,5.02154581 5.9104347,5.39930556 5.44444444,5.39930556 C4.97845419,5.39930556 4.60069444,5.02154581 4.60069444,4.55555556 L4.60069444,4.09375 Z M6.28819444,2.40625 L11.7118056,2.40625 L11.7118056,1 C11.7118056,0.534009742 12.0895653,0.15625 12.5555556,0.15625 C13.0215458,0.15625 13.3993056,0.534009742 13.3993056,1 L13.3993056,2.40625 L14.75,2.40625 C16.4586309,2.40625 17.84375,3.79136906 17.84375,5.5 L17.84375,15.875 C17.84375,17.5836309 16.4586309,18.96875 14.75,18.96875 L3.25,18.96875 C1.54136906,18.96875 0.15625,17.5836309 0.15625,15.875 L0.15625,5.5 C0.15625,3.79136906 1.54136906,2.40625 3.25,2.40625 L4.60069444,2.40625 L4.60069444,1 C4.60069444,0.534009742 4.97845419,0.15625 5.44444444,0.15625 C5.9104347,0.15625 6.28819444,0.534009742 6.28819444,1 L6.28819444,2.40625 Z M1.84375,8.95486111 L1.84375,15.875 C1.84375,16.6516504 2.47334957,17.28125 3.25,17.28125 L14.75,17.28125 C15.5266504,17.28125 16.15625,16.6516504 16.15625,15.875 L16.15625,8.95486111 L1.84375,8.95486111 Z" /></svg> </span> <span class="meta-text"> June 22, 2021 </span> </a> </li> <li class="post-author meta-wrapper"> <span class="meta-icon"> <span class="screen-reader-text">Post author</span> <svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="0 0 18 20"><path fill="" d="M18,19 C18,19.5522847 17.5522847,20 17,20 C16.4477153,20 16,19.5522847 16,19 L16,17 C16,15.3431458 14.6568542,14 13,14 L5,14 C3.34314575,14 2,15.3431458 2,17 L2,19 C2,19.5522847 1.55228475,20 1,20 C0.44771525,20 0,19.5522847 0,19 L0,17 C0,14.2385763 2.23857625,12 5,12 L13,12 C15.7614237,12 18,14.2385763 18,17 L18,19 Z M9,10 C6.23857625,10 4,7.76142375 4,5 C4,2.23857625 6.23857625,0 9,0 C11.7614237,0 14,2.23857625 14,5 C14,7.76142375 11.7614237,10 9,10 Z M9,8 C10.6568542,8 12,6.65685425 12,5 C12,3.34314575 10.6568542,2 9,2 C7.34314575,2 6,3.34314575 6,5 C6,6.65685425 7.34314575,8 9,8 Z" /></svg> </span> <span class="meta-text"> By <a href="https://www.scien.cx/author/mirhsquadri/">mirhsquadri</a> </span> </li> <li class="post-categories meta-wrapper"> <span class="meta-icon"> <span class="screen-reader-text">Post categories</span> <svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="19" viewBox="0 0 20 19"><path fill="" d="M2.8,1.85 C2.275329,1.85 1.85,2.27532949 1.85,2.8 L1.85,15.4 C1.85,15.9246705 2.275329,16.35 2.8,16.35 L17.2,16.35 C17.724671,16.35 18.15,15.9246705 18.15,15.4 L18.15,5.5 C18.15,4.97532949 17.724671,4.55 17.2,4.55 L9.1,4.55 C8.8158,4.55 8.550403,4.40796403 8.392757,4.17149517 L6.845094,1.85 L2.8,1.85 Z M17.2,2.85 C18.663555,2.85 19.85,4.03644541 19.85,5.5 L19.85,15.4 C19.85,16.8635546 18.663555,18.05 17.2,18.05 L2.8,18.05 C1.336445,18.05 0.15,16.8635546 0.15,15.4 L0.15,2.8 C0.15,1.33644541 1.336445,0.15 2.8,0.15 L7.3,0.15 C7.5842,0.15 7.849597,0.292035965 8.007243,0.528504833 L9.554906,2.85 L17.2,2.85 Z" /></svg> </span> <span class="meta-text"> In <a href="https://www.scien.cx/category/flutter/" rel="category tag">flutter</a>, <a href="https://www.scien.cx/category/react/" rel="category tag">react</a>, <a href="https://www.scien.cx/category/reactnative/" rel="category tag">reactnative</a>, <a href="https://www.scien.cx/category/webdev/" rel="category tag">webdev</a> </span> </li> </ul> </div> </header><!-- .preview-header --> </article><!-- .preview --> </div><!-- .grid-item --> </div><!-- .posts-grid --> </div><!-- .posts --> </div><!-- .related-posts --> </main><!-- #site-content --> <script type="text/javascript"> jQuery(document).ready(function($){ // using jQuery if( $(document).find('.wp-block-video video').length ) { $(document).find('.wp-block-video video').mediaelementplayer(/* Options */); } if( $(document).find('.wp-block-audio audio').length ) { $(document).find('.wp-block-audio audio').mediaelementplayer(/* Options */); } //$(window).load(function(){ $('.wp-block-audio figcaption').each(function(){ var htm = $(this).html(); $(this).html('<div>' +htm+ '</div>'); }); //}); }); </script> <div class="wdg-bottom"></div> <footer id="site-footer" role="contentinfo"> <div class="footer-inner section-inner"> <!-- .footer-credits --> </div><!-- .footer-bottom --> </footer><!-- #site-footer --> <script type="text/javascript" defer src="https://www.scien.cx/wp-content/plugins/koko-analytics/assets/dist/js/script.js?ver=1.3.10" id="koko-analytics-js"></script> <script> var p_id = null; var p_link = null; var click = 1; jQuery(function(){ jQuery('li.menu-item-has-children > a:first-child').on('click',function(event){ event.preventDefault() var link = jQuery(this).attr('href'); var id = jQuery(this).parent().attr('id'); if(p_id == null){ p_id = id; p_link = link; jQuery(this).next('ul').toggle(300); if(click == 1){ click = 2 } } else if(p_id != id){ p_id = id; p_link = link; jQuery(this).next('ul').toggle(300); if(click == 1){ click = 2 } } else if(p_id == id){ if(click == 2){ console.log('go') window.location.href = link } } //Hide menu when clicked outside jQuery(this).next('ul').onclick(function(){ var thisUI = jQuery(this); jQuery('html').click(function(){ thisUI.hide(); jQuery('html').unbind('click'); }); }); }); }); </script> <script> jQuery('.myLinkToTop').click(function () { jQuery('html, body').animate({scrollTop:jQuery(document).height()}, 'slow'); return true; }); jQuery('.myMenuLink').click(function () { jQuery('html, body').animate({scrollTop:0}, 'slow'); return true; }); </script> <script> jQuery(".left-footer-menu .header-toggles").on("click",function(){ jQuery(".left-footer-menu .menu-modal.cover-modal").toggleClass("t_menu") }) jQuery(".left-footer-menu .menu-modal-toggles").on("click",function(){ jQuery(".left-footer-menu .menu-modal.cover-modal").removeClass("t_menu") }) // jQuery(".left-footer-menu .menu-item .sub-menu-toggle").on("click",function(){ // jQuery(this).toggleClass("active"); // jQuery(this).parent().parent().parent().find("ul.sub-menu").toggle() // }) /////////////////////////// //this hides images that do not load properly on the homepage $("img").error(function (){ $(this).hide(); // or $(this).css({'display','none'}); }); </script> </body> </html>