How to Detect Failed Requests via Web Extensions / / No Comments One of the best things that ever happened to t he user experience of the web has been web extensions. Browsers are powerful but extensions bring a new level of functionality. Whether it’s crypto wallets, media players, or other popular plugins, web extensions have become essential to every day tasks. Working on MetaMask, I am thrust into a world of making everything Ethereum-centric work. One of those functionalities is ensuring that .eth domains resolve to ENS when input to the address bar. Requests to https://vitalik.ethnaturally fail, since .eth isn’t a natively supported top level domain, so we need to intercept this errant request. // Add an onErrorOccurred event via the... more → Posted in: JavaScript Tagged with: Detect, Extensions, Failed, Requests
Guess the (Marvel) Decade / / No Comments Many years ago, I first wrote up my experience working with the Marvel API. I find myself returning to it again and again, and this weekend I built a fun little game I think you may enjoy. It’s called "Guess the Decade". Marvel’s art style has changed drastically over its long history. Back in 2018, I shared a demo that demonstrates just how much variety you can get just by looking at covers. So for example, Spider-Man in 1962: Versus 1988: And then 2018: Given that there’s such a variety of styles, I thought it would be fun to build a demo. If you want, you can just right to the game, but here’s how I built it. The Backend # For the backend, I built a serverless... more → Posted in: JavaScript Tagged with: Decade, Guess, Marvel
Welcome to the New LimeWire: AI Media Generation (Sponsored) / / No Comments LimeWire was a staple of my youth. LimeWire was software that allowed users to share any type of file during the revolutionary days of file sharing. Fast forward to today and LimeWire is back, again as revolutionary software, but this time in the field of AI content publishing. From creating images to music and video, and then monetizing that media, LimeWire continues to be a hub of creativity! Quick Hits LimeWire has re-launched as an AI-focused content publishing & community platform LimeWire AI Studio is now live for AI Image Generation! Generative AI music & video coming soon! Automatically mint AI-generated content as NFTs on the Polygon and Algorand blockchains LimeWire has an... more → Posted in: JavaScript Tagged with: Generation, LimeWire, Media, Sponsored, Welcome
Testing Out the Alpine.js Intersect Plugin / / No Comments A few weeks ago, I finally got around to looking at the official plugins Alpine.js supports and built a little demo that integrated the Intl spec with the Mask plugin. (You can read the post here: Integrating Intl with Alpine.js Mask). Today I thought I’d take a look at another plugin, Intersect. What Is It? # The Intersect plugin is a wrapper for the Intersection Observer API. This is a pretty cool web platform API that lets you monitor when DOM elements come into the visible part of a web browser. I first dug into this a few months ago in an article I wrote for Cloudinary, "Automatically Loading High-Quality Images with Cloudinary and IntersectionObserver". In that article,... more → Posted in: JavaScript Tagged with: Alpine.js, Intersect, plugin, Testing
Unveiling 15+ Essential Tools & Resources for Web Designers and Agencies in 2023 (Sponsored) / / No Comments You’ve visited countless websites, and now you’re designing your own. Stop and think for a minute about what you’ve liked and didn’t like about some of those you visited. Was it the front page, the layout in general, or the functionalities that either met with your satisfaction or turned you off? The helpful tools and resources for designers presented here should help you avoid what’s bad and capture what’s good in your own design creations. They will also save you the trouble of having to devote what could be many hours searching for tools and resources for designers you believe you should have and use. One or more of these should help you deliver work in a timely manner that engages... more → Posted in: JavaScript Tagged with: 2023, Agencies, Designers, essential, resources, Sponsored, tools, Unveiling
Fun With Front Matter: Part 4 – Featured Posts / / No Comments It’s been a few days since my last post in this series. I’d like to blame something in specific but honestly, it’s just life. Today’s tip will – again – be short and sweet but hopefully helpful. The idea of a "featured" post is that there may be content that, no matter the age or view count in your stats, you want to highlight. It could be your first blog post. A post announcing a new job or life event. Or anything really. How can we use front matter to support this? Marking Featured Content # One approach to marking content as featured could be to simply add a featured value to the front matter, like so: ---layout: posttitle: Gamma Post 7tags: postsdate:... more → Posted in: JavaScript Tagged with: Featured, Front, Matter, part, posts
Integrating Intl with Alpine.js Mask / / No Comments I’ve been using Alpine.js for quite a while now (although I still make silly mistakes, see the p.s. at the end) but haven’t yet looked at the "official" plugins. Listed in the docs, those plugins include: Intersect – a simple hook to recognize when an element is visible (I plan on blogging about this later) Persist – a simple hook to add persistence to Alpine data (another plugin I plan on blogging about) Focus – a way to manipulate focus Collapse – a simple UI plugin for collapsible content Morph – another UI plugin that attempts to transform one set of HTML into another (I honestly don’t quite get this one – yet) And finally,... more → Posted in: JavaScript Tagged with: Alpine.js, Integrating, Intl, Mask
Use XHR/fetch Breakpoints! / / No Comments Web debugging tools are so incredibly excellent these days. I remember the days where they didn’t exist and debugging was a total nightmare, even for the simplest of problems. A while back I introduced many of you to Logpoints, a way to output console.log messages without needing to change the source files. Another great breakpoint type is XHR/fetch breakpoints, allowing you to pause execution when an AJAX call is made. Let’s look at XHR/fetch breakpoints! To set an XHR/fetch breakpoint, open your browser’s Developer Tools and click the Sources tab — the same tab you open for other breakpoints. Under the XHR/fetch accordion item, click the big “+” button.... more → Posted in: JavaScript Tagged with: Breakpoints, XHR/fetch