Issue #206 (Disabled Fields, Frameworks, React, Mobile)06/29/17
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!
|
Front-end Frameworks
cell
A self-constructing web app framework powered by a self-driving DOM.
bojler
An email boilerplate and a guideline for writing HTML code that will render correctly across each of the most popular email clients.
react-express-stripe
Minimal boilerplate for Stripe used in React and Express.
Protozoa
A micro-app generator in less than 100 lines of code, with no dependencies.
Now UI Kit
A beautiful, free Bootstrap 4 UI kit.
Tinyreset
A tiny CSS reset for the modern web.
mini.css
A minimal, responsive, style-agnostic CSS framework.
react-page-layout
Share a common layout across different components. Useful with something like react-router to abstract the main elements and reduce code duplication.
Brutalist Framework
An open source framework for the brutalist web design trend.
|
React Tools
Animate Components
Elemental components for doing animation in React.
React Easy State
Aims to make React's state management simpler without adding new syntax
Redux Bacon
Analytics integration for Redux and ngrx/store. Integrate with any analytics service and track analytics offline.
ExtReact
Enables developers to add beautiful and powerful React components to their data-intensive web applications with efficiency and ease.
react-share-component
A lightweight React share button for mobile web with web share API integration, native intent support, and fallback.
React Sketch.app
Render React components to Sketch; tailor-made for design systems.
data-driven-motion
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.
react-sourcerer
Experimental project that allows you to express code patterns in the form of React components.
|
RWD and Mobile Tools
Polypane
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
A cross-platform Tab View component for React Native. A customizable, JavaScript-only implementation of swipeable tab views.
react-native-masonry
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.
AMP Validator
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.
Sizzy
A tool for developing responsive websites crazy-fast. Preview changes on multiple devices instantly. Also a Chrome extension.
Muuri
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.
|
|
