|
|
|
|
Issue #158 (Context Menus, Text Editors, JS Utilities, Productivity)07/28/16
| This week's primary sponsor: |
If you're building a web app, it's good to be familiar with the different techniques to disable the right-click menu, AKA context menu. Of course, many would suggest this should never be done, but now that web apps are pushing more towards native behavior, I'm sure a lot of developers will be interested in doing this sort of thing.
To disable the context menu, the best technique is as follows:
|
window.addEventListener('contextmenu', function (e) {
e.preventDefault();
}, false);
|
Here I'm listening for the contextmenu event, then I use event.preventDefault() (like the old return false) to keep the menu from appearing. This disables the context menu whether it's accessed via mouse or keyboard.
You can do something similar by only looking for a mouse-based context menu trigger. Basically you do something like this:
|
document.addEventListener('mouseup', function (e) {
if (e.button === 2) {
console.log('right click enabled');
}
}, false);
|
See demo
The problem with the latter method is that the context menu still appears. In this instance, I can't use preventDefault(), because the context menu is not the default behavior of the mouseup event; it's the default behavior of the contextmenu event. To achieve a similar effect, I would have to use an alert() message, which then would replace the context menu (you've probably seen this before. Please don't do it!).
The HTML spec includes a menu element that is supposed to make this technique easier and more semantic, but browser support is still poor. For now the safest and most cross-browser way is to use the contextmenu event. If you want a full tutorial on building a custom context menu with HTML, CSS, and JavaScript, this one by Nick Salloum is really good.
Now on to this week's tools!
Text Editors, IDEs, Web Builders
WebpackBin
"A webpack code sandbox."
PageCloud
"A professional-grade website creator that lets you easily build and edit beautiful websites with complete creative freedom."
Elementor
"Live page builder for WordPress. Reach a whole new level of design with Elementor, the most advanced drag & drop live page builder for WordPress."
CodeBlimp
"A collaborative environment to conduct interviews for any tech."
BitBlox
"Just click & drag to create beautiful websites in a matter of minutes. No designer talent or coding skills necessary."
Micro
"A terminal-based text editor that aims to be easy to use and intuitive, while also taking advantage of the full capabilities of modern terminals."
Monaco Editor
The code editor that powers Microsoft's Visual Studio Code.
Hippani
HTML animation studio. It's easy to make scalable interactive animation, complex games, videos, presentations, apps and multimedia websites.
Sourcerer
"Atom plugin for quickly finding and using StackOverflow code snippets."
GoldenLayout
A multi-window JavaScript layout manager for web apps.
JavaScript Utilities and Mini Libraries
Apple Pay JS
"The Apple Pay JavaScript API lets you accept Apple Pay payments on the web."
iterall
"Minimal zero-dependency utilities for using Iterables in all JavaScript environments."
React Modal Box
"A simple dependency free and customizable React Component to display Modals on your application."
react-enroute
"Simple React router with a small footprint for modern browsers. This package is not meant to be a drop-in replacement for react-router, just a smaller simpler alternative."
pify-proto
"Promisify methods on the prototype of an object."
React Aim
"Determine the cursor aim for triggering mouse events."
is.js
A general-purpose check library (e.g. is.array(), is.not.integer(), etc).
lodash-bound
"Enables chained lodash functions with ES bind (::) syntax."
Angular 2 Push Notifications
"Angular 2 component for native push notifications."
revalidate
"Composable form value validations for JavaScript."
AOS
"Small library to animate elements on your page as you scroll."
Multirange
"A tiny polyfill for HTML5 multi-handle sliders."
Productivity Tools
bench
"It's like being in the same room with your team even though you're worlds apart."
Quitter for Mac
"Automatically hides or quits apps after periods of inactivity."
StepShot
"Create clear IT instructions, step-by-step tutorials and technical documentation describing software-based procedures easier and faster."
Refined Twitter
"Chrome extension that enforces the mobile web version of Twitter and improves its interface."
Microsoft Flow
"Create automated workflows between your favorite apps and services to get notifications, synchronize files, collect data, and more."
Fwrdto.me
Bookmarklet or Chrome extension. Allows you to email a web page to yourself with one click.
Papier
Chrome extension. "Open a new tab and trap your best thoughts. They'll be backed up directly to Chrome: no accounts, no syncing."
Alloy
A web browser built on Tasks, of which every task has its own Tablist. Meant for the power user who has many tabs open at the same time.
Vocus
"Chrome extension that brings brilliant productivity tools to Gmail:"
Nuclino
"A simple and fast real-time wiki for better team collaboration."
Search Overflow
Chrome or Opera extension that "lets you search Stack Overflow from within the DevTools."
A Tweet for Thought
Ashley C. Ford with a thought on job expectations.
Suggestions / Corrections
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
Here's something called Search Scopes, which has other categories, but the one I've linked points to a wide range of developer-oriented subjects.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
