Issue #206 (Disabled Fields, Frameworks, React, Mobile)
In February, Jake Archibald wrote an article on a quirky behaviour in relation to events and disabled form elements. Check it out, as it might be something to keep in mind if you're working on an app with disabled elements in a form.
In summary, here's what he found:
- Mouse events don't fire when the pointer is over disabled form elements, except in Firefox.
- According to the spec, click events are prevented on disabled elements, but most browsers seem to incorrectly apply this to all mouse events.
- This is especially inconvenient in drag-and-drop UIs, in which case the ability to track the pointer is lost.
- Touch events are not affected, but pointer events are.
- His solution uses the CSS pointer-events property
Try out his on-page demo in Firefox and Chrome to see the problem in action. This would certainly be a bit of an edge case scenario, if anything, but the more annoying part is the fact that Firefox handles it differently from the other browsers.
Now on to this week's tools!
A self-constructing web app framework powered by a self-driving DOM.
An email boilerplate and a guideline for writing HTML code that will render correctly across each of the most popular email clients.
Minimal boilerplate for Stripe used in React and Express.
A micro-app generator in less than 100 lines of code, with no dependencies.
Now UI Kit
A beautiful, free Bootstrap 4 UI kit.
A tiny CSS reset for the modern web.
A minimal, responsive, style-agnostic CSS framework.
Share a common layout across different components. Useful with something like react-router to abstract the main elements and reduce code duplication.
An open source framework for the brutalist web design trend.
Elemental components for doing animation in React.
React Easy State
Aims to make React's state management simpler without adding new syntax
Analytics integration for Redux and ngrx/store. Integrate with any analytics service and track analytics offline.
Enables developers to add beautiful and powerful React components to their data-intensive web applications with efficiency and ease.
A lightweight React share button for mobile web with web share API integration, native intent support, and fallback.
Render React components to Sketch; tailor-made for design systems.
Easily animate your data in React. This is a small wrapper around react-motion with the intention of simplifying the API for a common use case.
Experimental project that allows you to express code patterns in the form of React components.
RWD and Mobile Tools
Cross-platform browser for responsive web design/dev. See your website in multiple screen sizes at once and make it look great everywhere.
React Native Tab View
Easy to use React Native component to render a masonry-ish layout for local and remote images with support for dynamic column rendering, progressive image loading, device rotation, on-press handlers, and headers/captions.
Use this tool to check if one or more URLs are valid AMP or not. If a page is not a valid AMP, click on "?" to expand and get detailed errors.
A tool for developing responsive websites crazy-fast. Preview changes on multiple devices instantly. Also a Chrome extension.
Responsive, sortable, filterable, and draggable grid layouts.
RemoteDebug iOS WebKit Adapter
Debug Safari and WebViews on iOS from tools like VS Code, Chrome DevTools, etc.
Create React Native App
Create React Native apps with no build configuration.