Raymond Camden

Adobe Firefly in Beta

2023-03-21T18:00:00+00:00

I'm currently at Adobe Summit and this morning at the keynote we announced the beta of Adobe Firefly. Firefly is a generative AI service, which by itself isn't new, but Firefly has a strong commitment to being a more responsible AI service. You can read more about that and Adobe Sensei here if you would like. As an Adobe employee, I'm obviously biased, but the focus on having a responsible service that respects creators feels like a pretty important differentiator. While there are a lot of good uses for this, I decided to have some fun with it and see how well it would do something business-critical... with cats.

For my test, I looked up a list of Dungeons and Dragons classes and found this excellent list here. I then went to Firefly and used prompts like so:

dungeons and dragons <class> as a cat

In general, this worked well, but sometimes I added a bit to get things a bit closer to what I had expected. The "physical" classes looked pretty similar and I probably could have given a bit more context to help Firefly out, but I still found the results delightful.

Here's a Fighter:

Here's a Paladin:

The Barbarian, which is very similar, and could have been improved if I asked for a common weapon like an axe:

Now for something really fun - the Bard. The double-sided lute was crazy and I absolutely loved it:

Next up is the Cleric:

For Druid, I specifically asked to add a "leafy staff", and the result wasn't what I expected, but I loved it:

Here's the Ranger - I added "bow and arrow" and the result was much more stylish than I expected:

Next is the Monk:

The Rogue ended up being my favorite, it looks like they're carrying the severed head of someone they just assasinated:

Finally, while there are multiple magic-using classes in D&D, I went with simple and just used "wizard" as a prompt. The eyes on this one are crazy good:

This was fun, and if you want to try it yourself, head over to the site and request Beta access. I'm not sure how long it will take to get in, but if you are interested, sign up as soon as possible.

Photo by Amauri Mejía on Unsplash

Links For You

2023-03-19T18:00:00+00:00

Hello friends, tomorrow I'm heading out to Vegas for Adobe Summit, so I expect the posting to be a bit light this week.

Automating your Mastodon profile with Pipedream.com

Here's a great article that talks about using one of my favorite services, Pipedream to automate the updating of a Mastodon profile. I really like Mastodon and the flexibility of its API is pretty great. I've been focused on writing bots, but I love how Stefan uses it to update his profile instead. Check out his article and see for yourself.

WebComponent * 2

I use an Evernote note to keep track of the links I want to share, and for some reason, these two links have been in my queue for a few months now. They kept getting pushed down by new awesomeness. Today I look to fix that.

First up is Awesome Web Components, a huge list of web component articles hosted as a GitHub repository. Sometime this week I need to find time to contribute a few of my articles to it.

Next up is a set of toots tagged, WebComponentsAdvent. I'm a big fan of the "Advent of X" type format as a way of sharing daily tips about a technical topic. (I also like my beer and wine Advent collections too, neither of which we've finished.) When clicking the link, be sure to scroll down to the bottom to read in the right order.

And now for something completely unnecessary...

I know what you're thinking, "My office is missing something, Raymond, do you have any suggestions?" Why yes, I do. What about some lit-up jellyfish that dance in a tube of water? Just head over to Amazon to pick up the jellyfish lava lamp that's been in my office this past week and I absolutely love it. My wife and I saw it recently in the background of a YouTube video, searched on Amazon, and pick it up literally mid-video. It's cheap, and a lot of these kinda things don't work as well as the product page says, but this one's been a true delight.

Here is a picture of it in my office, but honestly it's not a great picture and it looks a heck of a lot cooler in motion:

Another Week, Another Mastodon Bot - Random Album Cover

2023-03-17T18:00:00+00:00

Last September, I blogged about how I used the Spotify API and Pipedream to discover new music: Discover New Music with the Spotify API and Pipedream. I used a Pipedream workflow to select a random track from Spotify and email me a track every morning. I've still got this process running and I enjoy seeing it every morning. More recently, I noticed a cool bit of album art in my Spotify client and it occurred to me that it would be kind of cool to see more. With that in mind, I present to you my latest Mastodon bot, Random Album Cover. You can see an example toot here:

Random Album Cover @randomalbumcover@botsin.space

Album: Miss You (https://open.spotify.com/album/32G4vFNwLJQjpzkOoGEUUo)
Artist(s): Oliver Tree, Robin Schulz
Released: 2022-08-05
5:16 PM • March 21, 2023 (UTC)

I have no idea what you'll see when viewing this post as it will be generated during a build, but I'm looking at a striking album cover from an artist I've never heard of, NLE Choppa. So, how was it built?

For the most part, it follows the logic of my previous post, doing the following:

Select a random letter
Randomly decide to make it the beginning of a search string ("A something") or in the middle ("something A something")
Select a random number between 0 and 1000
Hit the Spotify API. Their API doesn't have a "real" random search, but we use the random letter and offset to search.
Given our set of results, select a random record from that.

All of the above hasn't changed from the previous post, except I switched the search from track to album. Next, I download the image to a temporary directory. This is straight from the Pipedream samples:

import stream from "stream";import { promisify } from "util";import fs from "fs";import got from "got";export default defineComponent({  async run({ steps, $ }) {    const pipeline = promisify(stream.pipeline);    return await pipeline(      got.stream(steps.select_random_album.$return_value.images[0].url),      fs.createWriteStream('/tmp/cover.jpg')    );  },})

And then I post the toot. This code is pretty short as it makes use of the excellent mastodon-api package. My only real work is crafting the text to go along with the image.

import Mastodon from 'mastodon-api'import fs from 'fs'export default defineComponent({  async run({ steps, $ }) {    const M = new Mastodon({      access_token: process.env.RANDOMALBUMCOVER_MASTODON,      api_url: 'https://botsin.space/api/v1/',     });  let artists = steps.select_random_album.$return_value.artists.reduce((cur, art) => {    if(cur == '') return art.name;    return cur + ', ' + art.name  },'');  let toot = `Album:     ${steps.select_random_album.$return_value.name} (${steps.select_random_album.$return_value.external_urls.spotify})Artist(s): ${artists}Released:  ${steps.select_random_album.$return_value.release_date}  `.trim()  let resp = await M.post('media', { file: fs.createReadStream('/tmp/cover.jpg') });  await M.post('statuses', {         status: toot,        media_ids: [resp.data.id]     });  },})

I just want to go on record as saying that this is like the third or fourth time I've used reduce without checking the docs and I'm definitely a JavaScript expert now. Definitely.

I'll point out that I spent maybe thirty minutes total on this. The longest wait for was the Mastodon instance to approve my bot (maybe 1.5 hours). I also spent more than a few minutes wondering why my Python code wasn't running in a Node step, so maybe I'm not an expert. Maybe.

If you want to check out the complete workflow, you can do so here: https://pipedream.com/new?h=tch_m5ofq7

Progressively Enhancing a Table with a Web Component

2023-03-14T18:00:00+00:00

Back nearly a year ago (holy smokes time goes fast), one of my first articles about web components involved building a component to create a paginated/sorted table: Building Table Sorting and Pagination in a Web Component. In that example, the component looked like so in your HTML:

<data-table src="https://www.raymondcamden.com/.netlify/functions/get-cats" cols="name,age"></data-table>

I thought this was cool, but one big issue with it is that if JavaScript is disabled, or if something else goes wrong with the code, then absolutely nothing is rendered to the page. This got me thinking - what if I could build a web component that enhanced a regular HTML table? Here's what I came up with.

First, I set up a table of simple data:

<table>	<thead>		<tr>			<th>Name</th>			<th>Breed</th>			<th>Gender</th>			<th>Age</th>	</thead>	<tbody>		<tr>			<td>Luna</td>			<td>Domestic Shorthair</td>			<td>Female</td>			<td>11</td>		</tr>		<tr>			<td>Elise</td>			<td>Domestic Longhair</td>			<td>Female</td>			<td>12</td>		</tr>		<tr>			<td>Pig</td>			<td>Domestic Shorthair</td>			<td>Female</td>			<td>8</td>		</tr>		<tr>			<td>Crackers</td>			<td>Maine Coon</td>			<td>Male</td>			<td>5</td>		</tr>		<tr>			<td>Zuma</td>			<td>Ragdoll</td>			<td>Male</td>			<td>8</td>		</tr>		<tr>			<td>Lord Fluffybottom, the Third</td>			<td>Domestic Longhair</td>			<td>Male</td>			<td>8</td>		</tr>		<tr>			<td>Zelda</td>			<td>Domestic Shorthair</td>			<td>Female</td>			<td>7</td>		</tr>			<tr>			<td>Apollo</td>			<td>Persian</td>			<td>Male</td>			<td>3</td>		</tr>		</tbody></table>

Note that I make use of both thead and tbody. I'm going to require this for my component to work, but outside of that, there's nothing special here, just a vanilla table. Now let's look at my component. First, I'll name it table-sort:

class TableSort extends HTMLElement {		// stuff here..}if(!customElements.get('table-sort')) customElements.define('table-sort', TableSort);

In my constructor, I'm just going to set up a few values. One will hold a copy of the table data, one will remember the last column sorted, and one will be a boolean that indicates if we're sorting ascending or descending:

constructor() {	super();	this.data = [];	this.lastSort = null;	this.sortAsc = true;}

Alright, now for some real work. In my connectedCallback, I'm going to do a few things. First, I'll do a sanity check for a table, thead and tbody inside myself:

connectedCallback() {	let table = this.querySelector('table');	// no table? end!	if(!table) {		console.warn('table-sort: No table found. Exiting.');		return;	}		// require tbody and thead	let tbody = table.querySelector('tbody');	let thead = table.querySelector('thead');	if(!tbody || !thead) {		console.warn('table-sort: No tbody or thead found. Exiting.');		return;				}

Next, I look at the body of the table and get a copy of the data:

	let rows = tbody.querySelectorAll('tr');	rows.forEach(r => {		let datum = [];		let row = r.querySelectorAll('td');		row.forEach((r,i) => {			datum[i] = r.innerText;		});		this.data.push(datum);	});

For the next portion, I look at the head. For each column, I want to do two things. First, set a CSS style to make it more obvious you can click on the header. Then I add an event handler for sorting:

	// Get our headers	let headers = thead.querySelectorAll('th');	headers.forEach((h,i) => {		h.style.cursor = 'pointer';		h.addEventListener('click', e => {				this.sortCol(e,i);		});	});

Finally, I copy over a reference to the body. This will be helpful later when I render the table on sort:

	// copy body to this scope so we can use it again later	this.tbody = tbody;}

Alright. At this point, the component is set up. Now let's look at the sorting event handler:

sortCol(e,i) {	let sortToggle = 1;	if(this.lastSort === i) {		this.sortAsc = !this.sortAsc;		if(!this.sortDir) sortToggle = -1;	}	this.lastSort = i;		this.data.sort((a,b) => {		if(a[i] < b[i]) return -1 * sortToggle;		if(a[i] > b[i]) return 1 * sortToggle;		return 0;	});		this.renderTable();}

The event is passed a numeric index for a column which makes sorting our data simpler. The only really fancy part here is how I remember what I sorted last time, which lets me reverse the sort if you click two or more times on the same column. If you are noticing a potential issue here, good, you are absolutely right and I'll show the issue in a sec.

Alright, the final part of the code is rendering the table:

renderTable() {	let newHTML = '';	for(let i=0;i<this.data.length;i++) {		let row = '<tr>';		for(let c in this.data[i]) {			row += `<td>${this.data[i][c]}</td>`;		}		row += '</tr>';		newHTML += row;	}	this.tbody.innerHTML = newHTML;}

This is pretty boilerplate. It does have one issue - if the original table cells had other stuff, for example, inline styles, or data attributes, then that is lost. I could have made a copy of the DOM node itself and sorted them around, but for this simple component, I thought it was ok.

Whew! The final thing to do is to wrap my table:

<table-sort><table>	<thead>		<tr>			<th>Name</th>			<th>Breed</th>			<th>Gender</th>			<th>Age</th>	</thead>	<tbody>		<tr>			<td>Luna</td>			<td>Domestic Shorthair</td>			<td>Female</td>			<td>11</td>		</tr>		<!-- more rows --->	</tbody></table></table-sort>

Now let's test it out in the CodePen below:

See the Pen PE Table for Sorting by Raymond Camden (@cfjedimaster) on CodePen.

Hopefully, it worked fine for you. Of course, if it failed for some reason, you still saw a table right? But maybe you tried sorting on age and saw this:

Oops. The age column, which is a number, is sorted as a string. So how do we fix that? Remember that my goal was to have you not touch your original table at all. I initially thought I'd maybe have you add a data- attribute to the table, but that didn't feel right. Instead, I came up with another solution - an attribute to the web component:

<table-sort numeric="4">

In this case, I'm specifying that the fourth column is numeric. Here's how I supported this in code. In connectedCallback, I look for the attribute:

let numericColumns = [];if(this.hasAttribute('numeric')) {	numericColumns = this.getAttribute('numeric').split(',').map(x => parseInt(x-1,10));}

Since the value in the HTML is 1-based, I take your input (which can be comma-delimited), split it, convert each value to a real number and subtract one. The end result with my sample input is an array with one value, 3.

The final bit is to check for this when I create a copy of the data:

let rows = tbody.querySelectorAll('tr');rows.forEach(r => {	let datum = [];	let row = r.querySelectorAll('td');	row.forEach((r,i) => {		if(numericColumns.indexOf(i) >= 0) datum[i] = parseInt(r.innerText,10);		else datum[i] = r.innerText;	});	this.data.push(datum);});

And that's it. You can test that version below:

See the Pen PE Table for Sorting (2) by Raymond Camden (@cfjedimaster) on CodePen.

Reminder about Web Components and Attributes

2023-03-09T18:00:00+00:00

After my post yesterday about web component lifecycle events, I had an interesting conversation with Thomas Broyer on Mastodon. He brought up an issue with web components that I covered before on this blog, but as it was a very appropriate thing to discuss immediately after yesterday's post, I thought a bit of repetition would be ok. And heck, I'll take any chance to write more web component code as it gives me more practice.

So as a reminder, yesterday's post specifically dealt with what code is best used in a web component's constructor versus the connectedCallback event. Specifically, it dealt with the use case of checking attributes and handling web component elements created via JavaScript. To be clear, I don't mean the definition of the web component, but creating an instance of one, like so:

let mc = document.createElement('my-component');document.body.appendChild(mc);

While I didn't bother setting a title in that example, I could have done so like this:

let mc = document.createElement('my-component');mc.setAttribute('title','My title');document.body.appendChild(mc);

And it works as expected. But here's an interesting question. What if later on I change the title? Imagine this code:

setTimeout(() => {	console.log('timer done, lets do this');	mc.setAttribute('title','New title');	console.log(`title for the mc is ${mc.getAttribute('title')}`);}, 3 * 1000);

When run, what will it do? Check out the CodePen below to see:

See the Pen WC Tests (5) by Raymond Camden (@cfjedimaster) on CodePen.

As you can see, it does not work. Remember you can open your browser's console here if you want to see the messages. It will clearly say that the title attribute matches the update, but that's what you'll see reflected in the DOM.

The good (?) news is that this is completely expected and easily (for the most part) addressed. When defining a web component, you need to define which attributes you care about it (in terms of them changing) and write code to listen for those changes.

The first part is simple:

``jsstatic get observedAttributes() { return ['title'] };

The next part involves adding an event handler named `attributeChangedCallback`:```jsattributeChangedCallback(name, oldValue, newValue) {	console.log(`changing the value of ${name} from ${oldValue} to ${newValue}`);}

If you try this, you'll see that it's fired multiple times. I had a "hard-coded" instance of the component in the DOM and it will message that the title is changing from null to the hard-coded value, reflecting the immediate change of the web component being added to the DOM. You will also see this run with the instance of the component created in JavaScript.

Now for the fun part. The event handler needs to actually update the display to reflect the new value. In the first iteration of my example component, I skipped the Shadow DOM and just wrote it out directly to the main DOM. Since I now need to (possibly) update the DOM multiple times, I made two more changes. I switched to the Shadow DOM and built a new method, updateDisplay, that handles updating the display. Here's the entire class:

class MyComponent extends HTMLElement {	constructor() {		super();		console.log('constructor called');		const shadow = this.attachShadow({ mode: "open" });		const div = document.createElement('div');		const h2 = document.createElement('h2');		div.appendChild(h2);		shadow.appendChild(div);	}		connectedCallback() {		console.log('connected callback called');		if(!this.getAttribute('title')) this.setAttribute('title', 'No title');		this.updateDisplay();	}		updateDisplay() {		this.shadowRoot.querySelector('h2').innerText = `My Component: ${this.getAttribute('title')}`;	}		static get observedAttributes() { return ['title'] };	attributeChangedCallback(name, oldValue, newValue) {		console.log(`changing the value of ${name} from ${oldValue} to ${newValue}`);		this.updateDisplay();	}}

Notice that updateDisplay just uses querySelector to find its h2 node and update the text. Now our code that updates the title after a few seconds will work correctly:

See the Pen WC Tests (5) by Raymond Camden (@cfjedimaster) on CodePen.

If you don't see the switch, just click the "Rerun" button on the bottom right. Anyway, as I said, I've discussed this before, but it definitely tripped me up the first time I ran into it so hopefully this helps others!

Photo by Chris Lawton on Unsplash

Interesting Caveat with Web Components and the Event Lifecycle

2023-03-08T18:00:00+00:00

I've been exploring web components the last few months and as part of that exploration, I've been reading "Web Components in Action" by fellow Adobian Ben Farrell. I'm still at the beginning of the book but so far it's been great. It is a few years old now, but for the most part, the only thing I've seen out of date is that at the time of publication, Microsoft Edge didn't have complete support for web components yet. That's been corrected (good thing, I switched to Edge a while back) so it's not really a concern.

However yesterday I read something that didn't quite jive with my understanding. The fourth chapter, "The component lifecycle", deals with the various hooks you get into web components when they are used on a page. In this chapter, he spends a good amount of time comparing the constructor of a web component to the connectedCallback event. The constructor is called when the component is created, but connectedCallback is not fired until the component is added to the browser's DOM. That last bit is important. If you add an instance of a web component to a DOM element, let's say a div you created in JavaScript, but that div itself is not in the browser's DOM, the event won't fire.

Before going further, let's look at a quick example. Assume this JavaScript for a trivial component:

class MyComponent extends HTMLElement {	constructor() {		super();		console.log('constructor called');		this.innerHTML = '<h2>My Component</h2>';	}		connectedCallback() {		console.log('connected callback called');	}}if(!customElements.get('my-component')) customElements.define('my-component', MyComponent);

If we use <my-component> in the DOM, we will see both console messages for each instance of the tag. Here's a CodePen that demonstrates this. Note that you will need to "Edit on CodePen" to actually see console messages, or open your console right here on my site.

See the Pen WC Tests by Raymond Camden (@cfjedimaster) on CodePen.

All of this made sense, and really touched on something I've been noodling over - what should I put in the constructor versus connectedCallback. He made one point that didn't seem right to me - that if you check the value of an attribute in the constructor, it will be null. I've been doing this in my previous examples, and heck, even MDN shows it in one of their examples:

class PopUpInfo extends HTMLElement {  constructor() {    // Always call super first in constructor    super();    // Create a shadow root    const shadow = this.attachShadow({mode: 'open'});    // Create spans    const wrapper = document.createElement('span');    wrapper.setAttribute('class', 'wrapper');	// stuff deleted...    // Take attribute content and put it inside the info span    const text = this.getAttribute('data-text');    info.textContent = text;	//lot more stuff...

Here's an example where it clearly works just fine:

class MyComponent extends HTMLElement {	constructor() {		super();		console.log('constructor called');				if(!this.getAttribute('title')) this.setAttribute('title', 'No title');	}		connectedCallback() {		console.log('connected callback called');		this.innerHTML = `<h2>My Component: ${this.getAttribute('title')}</h2>`;	}}if(!customElements.get('my-component')) customElements.define('my-component', MyComponent);

And if called like so:

<my-component title="ray"></my-component><my-component></my-component>

I get:

My Component: rayMy Component: No title

As I said, this matched my expectations. Here's a complete CodePen for this:

See the Pen WC Tests (2) by Raymond Camden (@cfjedimaster) on CodePen.

So, Ben and I talked about this over Slack, and initially, we just figured it was a change since he released his book, but then he made a really important point. What happens if you create an instance of your component via JavaScript? Consider:

class MyComponent extends HTMLElement {	constructor() {		super();		console.log('constructor called');				if(!this.getAttribute('title')) this.setAttribute('title', 'No title');	}		connectedCallback() {		console.log('connected callback called2');		this.innerHTML = `<h2>My Component: ${this.getAttribute('title')}</h2>`;	}}if(!customElements.get('my-component')) customElements.define('my-component', MyComponent);let mc = document.createElement('my-component');document.body.appendChild(mc);

In this case, I've made a new my-component and added it to my DOM. I would have assumed this just worked, but instead, you get an error:

Uncaught DOMException: Failed to construct 'CustomElement': The result must not have attributes

If you want to see this yourself, open up this CodePen, and open your browser's console, not the CodePen one. The error doesn't get floated up right to the 'virtual' console CodePen uses.

Now it makes sense, and it's an easy enough correction to move that logic to connectedCallback:

class MyComponent extends HTMLElement {	constructor() {		super();		console.log('constructor called');			}		connectedCallback() {		console.log('connected callback called');		if(!this.getAttribute('title')) this.setAttribute('title', 'No title');		this.innerHTML = `<h2>My Component: ${this.getAttribute('title')}</h2>`;	}}if(!customElements.get('my-component')) customElements.define('my-component', MyComponent);

And in doing so, I can then create instances in JavaScript, and even set my title:

let mc = document.createElement('my-component');document.body.appendChild(mc); let mc2 = document.createElement('my-component');mc2.setAttribute('title','Custom title');document.body.appendChild(mc2);

In the CodePen below, you can see I used both a "regular" instance of the component in HTML as well as the two defined here and all three act correctly:

See the Pen WC Tests (3) by Raymond Camden (@cfjedimaster) on CodePen.

I hope this makes sense, and as always, reach out if it doesn't. Going forward, I'll be doing more of my attribute validation and setting in connectedCallback.

Adding a Chart to an Apline.js Application

2023-03-06T18:00:00+00:00

For a while now my blog queue has had an item in there suggesting I take a look at adding a basic chart to an Alpine.js application. I finally got a chance to play around with this over the weekend and I thought I'd share the result. For this post, I've used Chart.js, which is a free, open-source charting library that's relatively easy enough to use. Certainly, others could be used as well and as always, if you've got an example, I'd love to see it. With that out of the way, let's take a look at the application.

Before the Chart

I'll start by sharing what I built before I added a chart to the display. This application consists of a list of cities. For each city, we use the Pirate Weather API to get an hourly forecast and from that, I display the temperature over the next twelve hours. Here's how that looks:

I probably should have included a timestamp but for now, this gets the point across. Let's take a look at the code. I begin by defining my cities. This probably would be dynamic, loaded from a database or API, etc.

cities: [	{ label: "Lafayette, LA", latitude: 30.22, longitude: -92.02 },	{ label: "Bellingham, WA", latitude: 48.768, longitude: -122.485 },	{ label: "Chicago, IL", latitude: 41.881, longitude: -87.623 },	{ label: "Washington, DC", latitude: 38.895, longitude: -77.036 }			]

When the application starts, I want to fire off requests to get forecasts. I did this in two methods. The first top-level method fires off the requests:

async getForecasts(locs) {	console.log('get forecasts for my locations');	let requests = [];	locs.forEach(l => {		requests.push(this.getHourlyForecast(l.latitude, l.longitude));	});	let data = await Promise.all(requests);	data.forEach((d, i) => {		this.cities[i].forecast = d;	});	this.numForecasts = this.cities[0].forecast.length;},

Here I make use of promises to fire all four requests at once and then wait for them to finish. Yes, I should have error handling here. The result of Promise.all will be one array item per promise and will be in the same order I created them, so I can assign the results to my cities by just looping over them.

The actual API call is done here:

async getHourlyForecast(lat, lng) {	let req = await fetch(`https://api.pirateweather.net/forecast/${APIKEY}/${lat},${lng}?exclude=alerts,daily,currently,minutely&units=us`);	let data = await req.json();	return data.hourly.data.slice(0,12);}

I pass in my API key and the location to the API. The result contains a lot of information, but all I want is the hourly records and only the first twelve. I could probably simplify the result even more but this is good enough.

With the forecast information ready, the table can now be displayed. Here's the UI:

<div x-data="app">	<table>		<thead>			<tr>				<template x-for="city in cities">					<th x-text="city.label"></th>				</template>			</tr>		</thead>		<tbody>			<template x-for="i in numForecasts">				<tr>					<template x-for="city in cities">						<td x-text="city.forecast[i-1].temperature"></td>					</template>								</tr>			</template>		</tbody>	</table></div>

Basically one loop over the cities to build the table header, and then a loop over the number of forecasts with an inner loop over each city to build each row.

Here's a CodePen demonstrating the complete application.

See the Pen Alpine + ChartJS (Initial) by Raymond Camden (@cfjedimaster) on CodePen.

Adding the Chart

For my chart, I thought it would be nice to visualize both the highest and lowest temperatures for each of the cities. That would give us an idea of the range over our time period as well as the relative difference in warmth between the cities. (Spoiler - Louisiana is hot. Always hot.) Here's the chart I came up with:

Note that this was me doing the bare minimum in terms of "design". Chart.js seems really powerful and I could absolutely do more to make this prettier, but honestly, it works, and I was pleased with how quickly I got this working. Here's what I had to do.

First, I added the library, https://cdn.jsdelivr.net/npm/chart.js. And hey, thank you Chart.js for not forcing me to npm anything. I appreciate it.

Next, I added a canvas to my HTML. Because I'm lazy, I used the same ID as their docs, but this can be changed of course.

<canvas id="myChart"></canvas>

Next, I added a new method to my code, renderChart, to handle the process. Here's that code.

renderChart() {	const ctx = document.getElementById('myChart');	let names = this.cities.map(c => c.label);		let highestTemps = this.cities.map(c => {		return c.forecast.reduce((highest,f) => {			if(f.temperature > highest) return f.temperature;			return highest;		},0);	});	let lowestTemps = this.cities.map(c => {		return c.forecast.reduce((lowest,f) => {			if(f.temperature < lowest) return f.temperature;			return lowest;		},999);	});		new Chart(ctx, {		type: 'line',		data: {			labels: names,			datasets: [				{					label: 'Highest Temp',					data: highestTemps,					borderWidth: 1				},				{					label: 'Lowest Temp',					data: lowestTemps,					borderWidth: 1				}									]		},		options: {			scales: {				y: {					min: -20,					max: 120				}			}		}	});	}

Let's examine this. The very first line simply gets a reference to the canvas tag where Chart.js will do its work. The next few lines of code are all me "prepping" my data for the chart. First I get a list of cities. Then I get both the highest and lowest temps for each city with the crafty use of both map and reduce. I am a JavaScript master and I will absolutely pass the next arbitrary coding challenge I get for a job interview. Honest.

The net result of the above three blocks of code is three arrays. Each of these can then be passed to my chart declaration. You'll see names passed in for the labels and then my two datasets. This is all pretty much boilerplate demo code from Chart.js, the only thing I did custom was to specify a scale for my Y-axis. My range there isn't perfect, I know some places were below negative twenty recently, but it works for now.

You can demo this version here:

See the Pen Alpine + ChartJS (Chart) by Raymond Camden (@cfjedimaster) on CodePen.

Some Quick Notes

Ok, all of the following does not actually apply to the main point of this post, but I had some thoughts about what I built and wanted to share them.

First, I'm still relatively new to Alpine and still trying to figure out the "best" (for me) way to work with it. I like that Alpine is flexible in its definition and lets you specify methods and data all at once. That being said - I'm not sure I'm happy with how I organized my code. I think my feeling is that I should use the following rules:

Put the init() method on top.
Put any and all simple variable declarations next.
Put methods after.

Second, you may or may not notice I added a simple cache to the forecast function in the second CodePen. I did this to ensure I didn't kill my access to the API as CodePen tends to rerun stuff quite a bit. (I need to disable that I think. I just did. Will remember for next time. Honest.)

Links For You

2023-03-04T18:00:00+00:00

Good morning readers! I'm writing this in a hotel room in Tuscaloosa where my wife and I are visiting our son. He was presented with a significant award a few nights ago (the Algernon Sydney Sullivan award) and we stayed up a few extra days. We're about to head back to Louisiana so I thought I'd share a few quick links with folks. Have a great Sunday.

Taking Eleventy into the Spiderverse with eleventy-fetch

Here's a great post by Jeff Sikes where he describes how he made use of the Marvel API in an Eleventy site. That's mixing two of my favorite things, Marvel and Eleventy! I really wish Marvel would continue working on their API. The last update was nearly a decade ago, but on the other hand, I'm happy they just didn't shut it down.

Eleventy Collection Schemas

Yet another awesome Eleventy tip from Stephanie Eckles, this post documents an Eleventy plugin for enforcing your frontmatter setup in Eleventy collections. This is really a good idea since Eleventy gives you complete freedom over your frontmatter, being able to enforce certain rules in your site will help prevent issues in your site. Heck, I made a mistake with my frontmatter a few weeks ago and this would have really helped!

Frontend Development Projects with Vue 3 - Second Edition

About a year or so ago I was involved in the writing of a Vue 2 book for Packt, and now that book has been updated for Vue 3 by myself and Maya Shavin. I have to say - I've been kinda... not again... but not terribly excited about Vue lately. That being said, having used Vue 3 (obviously) for working on this book, I'm feeling somewhat better about it. I still don't think Vue is going to be my framework of choice going forward, I really prefer Alpine, but for any "application", I'd definitely build it in Vue 3.

You can get the book from Packt here, https://www.packtpub.com/product/frontend-development-projects-with-vuejs-3-second-edition/9781803234991, or if you buy from Amazon here I'll get an Amazon Associates kickback. Either way, check it out and let me know what you think.

Supporting PDF Embeds in an Eleventy WebC Component

2023-03-01T18:00:00+00:00

Way back in the old days, in August of 2021, I wrote up an example of adding support for Adobe's PDF Embed API as an Eleventy plugin: "An Adobe PDF Embed Plugin for Eleventy". When I find time, I need to update that to the newest URL for the library, but more recently I was curious if I could recreate support using the WebC template language. While it was a bit difficult at times (and a big thank you goes to Zach for patiently helping me), I think it's at a point now where it can be shared. I will warn folks that I'm still struggling a bit with the best way to work with WebC, and at least one feature I'm showing isn't documented yet (but I've confirmed it will 100% ship), but hopefully this example will be useful for folks.

Before we start, know that if you want to try this yourself, you will need a free credential. Credentials are host-based, which means a credential for raymondcamden.com will not work for localhost. You can definitely create a few, and if you really want to use one key for development and production, consider setting the host for your domain, minus the www, and use dev dot your domain locally. If you've never used your local hosts file for something like this, reach out and I'll help explain it. (Or heck, that may be my next post.)

Alright, so I began actually by writing a template that called my component. I kinda figured I'd write the example code in what felt like the most logical manner, and then I'd actually build the WebC component to match it. Here's how I did it:

<pdfembed width="700" height="600"  clientid="912a3ba447664592bfbffb224b74a371"   pdf="https://static.raymondcamden.com/images/2023/03/cat.pdf"></pdfembed>

I've got two attributes to define the size of my PDF, my client credential (it's host-based, so safe to share here, go ahead, steal it, I won't tell), and then the URL for my PDF. Note that when you point to a PDF, it needs to be in a CORS-accessible location. You can also use file promises in the API, but I'm keeping it simple here.

Now let's look at the actual component:

<template webc:is="noscript"><a :href="pdf"><span @text="pdf"></span></a></template><div :id="uid"></div><script webc:keep src="https://documentservices.adobe.com/view-sdk/viewer.js"></script><template webc:type="11ty" 11ty:type="liquid">{% assign pdfname = pdf | split:"/" | last %}<script webc:keep>let clientID = "{{ clientid }}";document.addEventListener("adobe_dc_view_sdk.ready", () => {  let adobeDCView = new AdobeDC.View({clientId: clientID, divId: "{{uid}}"});  adobeDCView.previewFile(   {      content:   {location: {url: "{{pdf}}"}},      metaData: {fileName: "{{pdfname}}"},      focusOnRendering: false   });});</script></template><script webc:is="style" webc:type="js" webc:keep>`div#${uid} {  width: ${width}px;  height: ${height}px;}`</script>

Let's discuss. I begin by adding a noscript tag that links to the PDF. That way a user without JavaScript enabled will still be able to get to the document. In order for this to work in WebC, I couldn't use the noscript tag directly but had to use a template instead with the webc:is directive. Zach explained why... but I honestly don't quite get it. Not yet anyway.

Next, note the div:

<div :id="uid"></div>

This is the part not yet documented. Every instance of a WebC component will automatically get provided a unique ID. This is especially useful for me as I need a way to associate a unique ID with the PDF library. This ID is safe for DOM IDs so it made sense to use it.

Now for the slightly more complex part. I switch to Liquid so I can be a bit dynamic. Our library has a weird thing where it requires a URL (or file promise) as well as a PDF file name. I've already requested we get rid of this requirement, but for now, I get it by simply popping off the last part of the URL.

The rest of the code in that Liquid block just outputs boilerplate PDF Embed code for the library and uses variables for the div ID, the PDF URL, and the filename.

The final part is probably the most confusing. I needed to apply CSS to style the size of the div where the PDF is rendered. To do so, I used a JavaScript string literal. I'm using a script tag as, technically, it's JavaScript, but it comes out as CSS, so I map it with webc:is as I did on top. Again, thanks go to Zach for this tip. Finally, I need to use webc:keep because the default behavior in WebC is to toll up and bundle all JavaScript and CSS. In this case, I need the block to stay and be used in every particular instance I call the component.

Whew. Hopefully, this made some sense. If you want to test this yourself, I made a Glitch, because Glitch is freaking cool. You can see it here: https://glitch.com/edit/#!/impossible-early-system?

Update to My Eleventy Blog Guide

2023-02-25T18:00:00+00:00

Last January, I announced the release of a guide I had written for building a simple blog in Eleventy. Now that Eleventy has hit 2.0, I took some time this morning to look at the guide and see what could be updated. The first thing I noticed was that I had a heck of a lot of typos. I fixed those. I then went through the two main versions of the blog (before and after UI was added) and updated the dependencies to the 2.0 release of Eleventy.

That being said, I didn't do anything else. This is not to say that the 2.0 release wasn't lacking in new features, but as my guide is meant to be as simple as possible, I wasn't on the lookout to add any new features if it didn't make sense for the blog. Of course, one of the big features of 2.0 is a big reduction in dependencies, so right away people will benefit from it.

Anyway, you can find the guide here: https://cfjedimaster.github.io/eleventy-blog-guide/guide.html.

And you can find the repository here: https://github.com/cfjedimaster/eleventy-blog-guide.

Feedback is always welcome!