|
Issue #494 • January 5, 2023
Debugging Sucks. 💩 Jam Makes it Better. 🚀
Here's why 10,000+ switched to Jam as their screen recorder for bugs:
⚡️ One click to capture screenshots + videos
🚀 Automatically includes console + network logs
🏆 All the debugging details right there
🎉 Works with your tools: Jira, GitHub, Slack, etc
💸 It's free, forever
Get it now!
|
|
The standard way to detect in JavaScript what key is pressed by the user is by means of the event.key property, which you can access after listening for a keyboard event. This can be used, along with specific keycodes for each key, to determine different key combinations. This helps with the use of modifier keys like SHIFT, CTRL, ALT, Caps Lock, and so forth.
These modifier keys, however, can also be detected by means of the event.getModifierState() method of the keyboard event object. This can be a quick way to do something like check to see if the user's caps lock key is pressed (e.g. for password fields).
The following code would detect the caps lock key specifically by displaying a message in an output element on the page, then the message would disappear if caps lock was released:
|
window.addEventListener('keydown', detectCapslock);
window.addEventListener('keyup', detectCapslock);
function detectCapslock (e) {
if (e.getModifierState('CapsLock')) {
output.innerHTML = 'The CapsLock Key is Enabled';
} else {
output.innerHTML = '';
}
}
|
I've set up an interactive CodePen demo that lets you test each of the modifier keys available to be detected using getModifierState(). Use the select dropdown to choose which key you want to detect before pressing the key to test.
The getModifierState() method accepts one argument that must be a string representing a valid modifier key value. It returns a Boolean to indicate whether or not the specified modifier key is currently active. I've included all the current possible values in that demo in the select element.
A few notes about the different values:
- Not all modifier keys are available on all operating systems
- Pressing something like ALT or WIN will take focus away from the page, so keep that in mind when attempting to release and press another modifier
- There's one modifier value called "OS" that is supposed to represent the Windows key on Windows machines but only seems to work on Firefox
- The "Meta" value works as the Windows key on Chromium browsers
- There are other values for modifier keys I'm not familiar with including "Symbol", "SymbolLock", and "Hyper"
In the CodePen demo I've also included the code for only detecting the caps lock key, which is commented out in the JS panel.
On a related note, if you only want to detect any key that's pressed, you can use this CodePen, and there's also this resource that lets you get detailed info on any pressed key.
Now on to this week's tools!
|
Front-end Frameworks
Debugging Sucks. 💩 Jam Makes it Better. 🚀
Jam is the fastest way to capture a bug with all the dev info. Get session replay, full network request data, console logs, browser & OS details and more in every ticket. 10,000+ happy users. Try it now! SPONSORED
PCUI
A library that enables the creation of reliable and visually pleasing user interfaces by providing fully styled components.
TW-Classed
A small Tailwind + CSS-in-JS solution that allows you to create modular, reusable, and extendable components in record time.
vue-pure-admin
An admin template based on Vue 3, Vite, Element-Plus, TypeScript, Pinia, and Tailwind CSS.
Angular Starter
An Angular 15 starter project powered by Storybook, Transloco, Jest, TestCafe, Docker, ESLint, Material, and Prettier.
Feature-Sliced Design
An architectural methodology for scaffolding front-end applications that's a compilation of rules and conventions on organizing code to make the project more understandable and structured.
Remix Page Blocks
A simple page block editor based on Remix and Tailwind CSS that includes a header, footer, hero, banner, logo clouds, embedded video, testimonials, FAQ, and lots more.
 |
Cloudflare Workers Templates
A collection of starter templates and examples for Cloudflare Workers and Cloudflare Pages, from the team at Cloudflare.
Sakai
A beautiful React admin template built with Next.js and bootstrapped with create-next-app.
dApp Starter
A template to kickstart web3 apps built with Next.js, Tailwind, ConnectKit, ethers.js, and wagmi.
React-Google-Apps-Script
A boilerplate project for developing React apps inside Google Sheets, Docs, Forms, and Slides projects.
FastAPI Soft Dashboard
An open-source FastAPI starter built on Bootstrap 5 and includes more than 70 individual elements, like buttons, inputs, navbars, nav tabs, cards, and more.
On the Release Radar:
|
| |
Git, GitHub, and CLI Tools
Reactive: Instant Live Selling for Your Shopify Site
Our app turns your website into a live selling channel. Use gamified engagement tools to increase sales and average order value. Download and go live in just 90 seconds. Bring the retail experience to your customers. SPONSORED
Wait-for-secrets
A GitHub Action that waits for the developer to enter secrets during a workflow run, to enable multi-factor authentication, more control, and less management overhead.
Finch
A Go-based open-source CLI client for container development.
Blink
A professional, desktop-grade terminal for iOS that leverages the support of Mosh and SSH.
links.dev
A free, open-source Linktree alternative with full control of your links all sourced via a GitHub repository.
GitHub Wrapped
ICYMI, you can get a visual summary of your GitHub activity in a single place via the GitHub Trends Wrapped app. Just star the repo and enter your user name.
GitHubUnwrapped 2022
And on a related note, here's a service that will automatically generate a personalized video of your GitHub activity in 2022.
 |
Hubble
A GitHub stars management tool that enables you to add custom tags and comments to your starred repos, making it easier for you to manage and find starred projects.
ChatGPT ProBot
A ChatGPT-based GitHub app that enables AI-based chat and code refactoring via issues and pull requests.
gitignore Templates
GitHub's collection of .gitignore file templates for various languages and technologies.
Sapling
A scalable, user-friendly source control system that integrates with Git, GitHub, and other Git hosting services.
|
The Uncategorizables
Reactive: Instant Live Selling for Your Shopify Site
Our app turns your website into a live selling channel. Use gamified engagement tools to increase sales and average order value. Download and go live in just 90 seconds. Bring the retail experience to your customers. SPONSORED
Infisical
An open source, end-to-end encrypted ,easy-to-use tool that lets you securely sync secrets and environment variables across your team and infrastructure.
ChatGPT for Google
Chrome and Firefox extension that adds ChatGPT responses alongside search engine results.
ntfy.sh
A simple HTTP-based pub-sub notification service that allows you to send notifications to your phone or desktop via scripts from any computer, entirely without signup, cost, or setup.
Kosko
Organize Kubernetes manifests in JavaScript/TypeScript with features that include managing multiple environments, reuse of variables and functions across components, and more.
Rector
Instant upgrades and automated refactoring of any PHP 5.3+ code.
Blockbench
A free, modern 3D model editor for low-poly and boxy models with pixel art textures.
ChiselStrike
A complete back end bundled in one piece. Your one stop-shop for all your backend needs, powered by TypeScript.
Vercel Analytics
From Vercel, a privacy-friendly and performance-enhancing, real-time alternative to Google Analytics, free while in Beta.
BetterDiscord
Native app that extends the functionality of the Discord app by enhancing it with new features.
Dropcode
A simple, local-only, and lightweight code snippet manager built with Tauri and Solid.js that enables you to use iCloud, Dropbox, Google Drive, etc. to sync your snippets across devices.
|
|
Affiliate Links and Classifieds
These are commercial apps, affiliate links, PPC ads, and paid classifieds. Submit yours!
|
Sweetjab – Combine your GitHub issues and pull requests into one page, to prioritize and delegate.
|
|
Alternatives – Create layouts in many styles at once using a drag-and-drop website builder.
|
|
Dynaboard – Platform to build a full-stack web app in one place, 10x faster.
|
|
Flowlet – Low-code APIs to build microservices, automate tasks,
and connect apps in minutes.
|
Radar – A geofencing platform for best-in-class location-based experiences.
|
| |
|
|
A Tweet for Thought
I haven't verified the accuracy of the source of this quote, but this is a great response to the no-code movement that tends to be more complicated compared to just doing it raw.
Send Me Your Tools!
Made something? Send links via Direct Message on 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...
Puter is a unique and somewhat controversial service that allows you to spin up a cloud computing environment that can be accessed from multiple devices via QR code. Currently in Beta waiting list, but no indication of pricing so far.
Thanks to everyone for subscribing and reading!
Keep tooling,
Louis
@WebToolsWeekly
PayPal.me/WebToolsWeekly
|
|
