How to Inject a Global with Web Extensions in Manifest V3 / / No Comments For those of you not familiar with the world of web extension development, a storm is brewing with Chrome. Google will stop support for manifest version 2, which is what the vast majority of web extensions use. Manifest version 3 sees many changes but the largest change is moving from persistent background scripts to service workers. This…is…a…massive…change. Changes from manifest version 2 to version 3 include: Going from persistent background script to a service worker that can die after 5 minutes No use of <iframe elements or other DOM APIs from the service worker All APIs have become Promise-based Restrictions on content from a CSP perspective One function that... more → Posted in: JavaScript Tagged with: Extensions, global, Inject, Manifest
Using Google Maps with Alpine.js / / No Comments It’s been a little while since I’ve blogged about Alpine.js, and I thought an example of integratingGoogle Maps with it would be a good way to continue my path to becoming comfortable with the framework. I imagined it would be fairly simple, but in building a few demos I ran into some interesting issues that helped me learn a bit more about Alpine. Let’s take a look. Raymond Camden… more → Posted in: JavaScript Tagged with: Alpine.js, Google, maps, using
CSS :out-of-range / / No Comments One aspect of web development I’ve always loathed was working with forms. Form elements have been traditionally difficult to style due to OS and browser differences, and validation can be a nightmare. Luckily the native HTML APIs added methods for improving the form validation situation. With input[type=number] elements, you can add min and max attributes. Those attributes are great but the browser doesn’t display distinct error styles if those numbers are out of range. Luckily we have :out-of-range: /* matches when number is not within min and max */ input[type=number]:out-of-range { border-color: red; } Thanks to CSS :out-of-range, developers can style input elements based... more → Posted in: JavaScript Tagged with: outofrange
Monitor Events and Function Calls via Console / / No Comments Despite having worked on the very complex Firefox for a number of years, I’ll always love plain old console.log debugging. Logging can provide an audit trail as events happen and text you can share with others. Did you know that chrome provides monitorEvents and monitor so that you can get a log each time an event occurs or function is called? Monitor Events Pass an element and a series of events to monitorEvents to get a console log when the event happens: // Monitor any clicks within the window monitorEvents(window, 'click') // Monitor for keyup and keydown events on the body monitorEvents(document.body, ['keyup', 'keydown']) You can pass an array of events to listen for multiple... more → Posted in: JavaScript Tagged with: Calls, Console, events, Function, Monitor
Investigating IndexedDB Wrapper Libraries – Part Three / / No Comments Welcome to the third and final (for now) entry into my series looking at wrapper libraries for working with IndexedDB. I began this series earlier this month demonstrating a simple Contacts database implemented with IndexedDB. In the second entry, I demonstrated how the Dexie library made working with IndexedDB much simpler. Today I’m going to look at my last "planned" entry (I may revisit this again if I find more) in this series – using DPP, or Deep Persistent Proxy Objects for JavaScript. Raymond Camden… more → Posted in: JavaScript Tagged with: IndexedDB, investigating, libraries, part, three, Wrapper
Adding Social Share Links in Eleventy / / No Comments One common feature of content sites (including this one), is links/buttons/etc to share a piece of content on social media. Typically this is Twitter, but many sites will include ways to share links on Facebook, LinkedIn, and more. A reader asked me a few days ago about how this could be done in Eleventy and I thought I’d share a quick example. Raymond Camden… more → Posted in: JavaScript Tagged with: Adding, Eleventy, links, share, Social
git Force Push / / No Comments Rebasing is a frequent task for anyone using git. We sometimes use rebasing to branch our code from the last changes or even just to drop commits from a branch. Oftentimes when trying to push after a rebase, you’ll see something like the following: hint: Updates were rejected because the tip of your current branch is behind hint: its remote counterpart. Integrate the remote changes (e.g. hint: 'git pull ...') before pushing again. hint: See the 'Note about fast-forwards' in 'git push --help' for details. Commonly developers will use the --force or -f flags during a push to force pushing code changes: git push origin my-branch --force # or git push origin my-branch -f I was recently... more → Posted in: JavaScript Tagged with: Force, Push
Specify Node Versions with .nvmrc / / No Comments I’ve heavily promoted nvm, a Node.js version manager, over the years. Having a tool to manage multiple versions of a language interpreter has been so useful, especially due to the complexity of Node.js package management. One tip I like to give new developers is adding a .nvmrc file to their repositories. The file contents is just a simple string representing the version of Node.js the project requires: v16 A project with this .nvmrc is specifying that Node.js v16 should be used. Any developer could then run nvm use to download, install, and switch to that version. A nvm install call would then install dependencies in line with that version. The post Specify Node Versions with .nvmrc... more → Posted in: JavaScript Tagged with: .nvmrc, Node, Specify, Versions