Issue #384 (keypress/down, CSS/HTML, Media, Jamstack)11/26/20
Cubbit Personal Cloud
Sync, store, and share your files with Cubbit Cloud. Enjoy the highest security standards of zero-knowledge encryption and forget about monthly fees for the cloud storage space! Spoiler: there’s a big discount dedicated to Web Tools Weekly’s readers! 👇
Discover the Offer
|
|
Way back in Issue #38, I wrote about the keypress and keydown events, discussing in detail the difference between the two. Two things I'll focus on here regarding those two events, one of which wasn't true back then:
- The keypress event is now officially deprecated (this is news to me)
- The keydown event (which is the recommended choice nowadays) will return the same keyCode value for any single key, regardless of the character displayed; this is not true for keypress.
A simple way to output the key and keyCode is using something like the following:
|
window.addEventListener('keydown', function (e) {
console.log(e.key, e.keyCode);
}, false);
|
Try it in this CodePen, which prints the values on the page.
Notice the numbers that are output by the event.keyCode property. The keyCode value is always the same for a particular key, but the output may be different depending on if SHIFT is pressed (e.g. the "2" key will display "@" while pressing SHIFT).
Now try changing the event to 'keypress' and do the same thing. Notice the keyCode values will be different for each character, rather than for each key. So an uppercase "Q" will have a different keyCode than a lowercase "q" with keypress, whereas the keyCode is the same for those two when using keydown (or keyup for that matter).
You'll also notice that keys like SHIFT, CTRL, TAB, and arrow keys do not have an output when using the deprecated keypress, but they do with keydown (which is great).
Fortunately, keydown has been around for a while so it's supported across all browsers going back to IE9, so it shouldn't be a problem to use it instead of keypress.
Now on to this week's tools!
|
CSS and HTML Tools
Cubbit Personal Cloud
Sync, store, and share your files with Cubbit Cloud. Enjoy the highest security standards of zero-knowledge encryption and forget about monthly fees for the cloud storage space! Spoiler: there’s a big discount dedicated to Web Tools Weekly’s readers! sponsored
CSS to TailwindCSS
One of the newest conversion tools from transform.tools (which I've featured before).
CSS Spider
Chrome or Firefox add-on that improves on DevTools and claims to be the quickest and most convenient way to copy, visualize, edit and export CSS.
Seasonal.css
Uses CSS variables and some JavaScript to add a seasonal color scheme based on the day of the year.
imagemaps
Image maps are technically still a standard and this tool lets you build one visually after which you can copy the HTML (using map and area tags).
Email2Go
HTML email template builder and preview/testing tool. Include free image hosting which is included in the free plan.
Color Contrast Checker
Enter foreground and background colors and this tool will confirm if the color combo passes WCAG AA and AAA standards for small or large text.
CSS Background Patterns
A gallery of beautiful pure CSS gradient background patterns that you can customize by bgcolor, foreground, opacity, and pattern spacing.
Thumblink
A service that improves how your pages look when linked to from Facebook, Twitter, Pinterest, LinkedIn, etc.
generic-components
A collection of generic web components with a focus on accessibility, ease of use, and ease of styling.
xm
Extensible HTML. A tiny compiler for HTML that adds an <import> tag for inline external HTML, <slot> and <fill> tags for content slots, and a <markdown> tag for Markdown content.
|
Media Tools (SVG, Video, etc.)
Tech Productivity Newsletter
A brief weekly newsletter sent out every Monday that features productivity tools and articles on efficiency, well-being, remote work, and more. promoted
Scale
Royalty-free vector illustrations, customizable by gender and color, with new illustrations added regularly.
videoinput.js
Now this is different. It's a custom element that lets you add a video-input element to a form, sot the user can more easily add a video recording during a form submission.
Odiff
A blazing fast native image comparison tool that compares the visual difference between two images in milliseconds.
FFCreator
A lightweight and flexible video processing library based on Node, for processing short videos (e.g. as part of a TikTok-like app).
Favicon Maker
A free online tool that lets you build and customize a favicon, which you can then download in HTML or SVG.
Pexels
A free stock photos and videos site, similar to Unsplash, that also has an API with unlimited requests.
link-to-qr
Enter a URL to create a QR code in PNG format, which you can also customize graphically to match your brand.
 |
SVGBox.net
An API for web icons that makes it easy to include icons in your project with simple <img> tags and a URL param. No CSS, JS, or inline SVG.
Browser Mockups
Customizable browser and device mockup creator. Not free, but offers some nice options to customize before download.
SvgPathEditor
A free visual online SVG editor with lots of configuration options for fine-grained control over the various parts of an SVG graphic.
Basicons
A simple line-based SVG icon set that lets you customize the size and stroke before download and/or embedding.
|
Site Builders, CMS's, Jamstack, etc.
Nocode
Turn Google Docs into a website. Publish fast, secure, and easy-to-manage websites built from your Google Docs.
Uno Platform
Pixel-perfect multi-platform applications with C# and WinUI, for single-codebase applications for Windows, WebAssembly, iOS, macOS, Android and Linux.
Strattic
A next-generation hosting platform that converts WordPress websites to static and headless, making them faster, more secure and infinitely scalable, all in one click.
Spirit Fish
A futuristic environment for your browser-based JS apps. Instant deployments, framework agnostic rendering, and powerful content delivery.
VvvebJs
A library based on jQuery and Bootstrap 4 that allows you to create and implement a drag-and-drop site builder in your application.
Jekyll Without Plugins
If you use or intend to use Jekyll, this is a page that lists plugin-free solutions of add-on functionality for Jekyll.
serverless.tf
An opinionated open-source framework for developing, building, deploying, and securing serverless applications and infrastructures on AWS using Terraform.
Blades
A blazing fast dead simple static site generator that does one job: generate HTML files from the provided content using the provided templates.
Rentify
This is pretty niche, but might be useful for a client project. Lets you create your own online store for a rental shop, including card payments and inventory management.
Formcake
A form backend service built For developers. Collect submissions and trigger webhooks, emails, and other actions. Made for Jamstack, and similar API-driven websites.
eleventy-high-performance-blog
A starter repository for building a blog with the Eleventy static site generator, implementing a wide range of performance best practices.
|
|
