#webawesome — Public Fediverse posts

How to use wa-combobox with Vue

Previously, we used wa-dropdown to build a state, city, and zip dropdown set, and two years ago, we looked at implementing autocomplete with Vue. Today, we are going to look at how to use Web Awesome’s Combobox component to combine the two. This demo uses the same dataset that I used for the dropdown demos. It also obviously uses the same CodePen 2.0 style that we used previously.

As before, App.vue is the core of our application. There is a ComboBox.vue file that creates the ComboBox using the wa-combobox component. Feel free to fork the pen, experiment with the code, and see how easily you can adapt it for your own Vue projects. Happy coding!

Example: https://grand-block-gar.codepen.app

Trying to figure out the CodePen 2.0 editor

Recently, CodePen introduced CodePen 2.0, and since then, I have been trying to figure out how to modify my workflow for this blog to use it. I have been using CodePen to host my code demos for over six years now, and it feels weird to change, but it seems like a positive development. Lately, I have been writing a lot of posts about how to use Vue.js with Web Awesome. Let’s start with something that we can use to demonstrate basic functionality with Vue.js, Web Awesome, and Font Awesome.

So, what’s going on here? In previous demos (like the one for More Web Awesome Dropdowns), there were three files for each pen (the markup, CSS, and JavaScript). For 2.0 pens, you can have many more (and it uses Vite). In the demo above, App.vue handles the application layout, Header.vue handles the header, and CounterButton.vue handles the button’s behavior. I have done A LOT of experimentation since the 2.0 editor dropped, and I can’t get a few things (like Vue Router) to work, but I am hoping that will come with time. Since I can add more files, I added the social meta tags and a manifest.json. It means that the result should be more shareable on its own. I also added a light-mode/dark-mode toggle, a link to view the files, and a link to the blog post.

I think that, moving forward, I will keep using the same header. I hope that you appreciate the result.

Example: https://strange-scene-malamute.codepen.app

Trying to figure out the CodePen 2.0 editor

Recently, CodePen introduced CodePen 2.0, and since then, I have been trying to figure out how to modify my workflow for this blog to use it. I have been using CodePen to host my code demos for over six years now, and it feels weird to change, but it seems like a positive development. Lately, I have been writing a lot of posts about how to use Vue.js with Web Awesome. Let’s start with something that we can use to demonstrate basic functionality with Vue.js, Web Awesome, and Font Awesome.

So, what’s going on here? In previous demos (like the one for More Web Awesome Dropdowns), there were three files for each pen (the markup, CSS, and JavaScript). For 2.0 pens, you can have many more (and it uses Vite). In the demo above, App.vue handles the application layout, Header.vue handles the header, and CounterButton.vue handles the button’s behavior. I have done A LOT of experimentation since the 2.0 editor dropped, and I can’t get a few things (like Vue Router) to work, but I am hoping that will come with time. Since I can add more files, I added the social meta tags and a manifest.json. It means that the result should be more shareable on its own. I also added a light-mode/dark-mode toggle, a link to view the files, and a link to the blog post.

I think that, moving forward, I will keep using the same header. I hope that you appreciate the result.

Example: https://strange-scene-malamute.codepen.app

Trying to figure out the CodePen 2.0 editor

Recently, CodePen introduced CodePen 2.0, and since then, I have been trying to figure out how to modify my workflow for this blog to use it. I have been using CodePen to host my code demos for over six years now, and it feels weird to change, but it seems like a positive development. Lately, I have been writing a lot of posts about how to use Vue.js with Web Awesome. Let’s start with something that we can use to demonstrate basic functionality with Vue.js, Web Awesome, and Font Awesome.

So, what’s going on here? In previous demos (like the one for More Web Awesome Dropdowns), there were three files for each pen (the markup, CSS, and JavaScript). For 2.0 pens, you can have many more (and it uses Vite). In the demo above, App.vue handles the application layout, Header.vue handles the header, and CounterButton.vue handles the button’s behavior. I have done A LOT of experimentation since the 2.0 editor dropped, and I can’t get a few things (like Vue Router) to work, but I am hoping that will come with time. Since I can add more files, I added the social meta tags and a manifest.json. It means that the result should be more shareable on its own. I also added a light-mode/dark-mode toggle, a link to view the files, and a link to the blog post.

I think that, moving forward, I will keep using the same header. I hope that you appreciate the result.

Example: https://strange-scene-malamute.codepen.app

Trying to figure out the CodePen 2.0 editor

Recently, CodePen introduced CodePen 2.0, and since then, I have been trying to figure out how to modify my workflow for this blog to use it. I have been using CodePen to host my code demos for over six years now, and it feels weird to change, but it seems like a positive development. Lately, I have been writing a lot of posts about how to use Vue.js with Web Awesome. Let’s start with something that we can use to demonstrate basic functionality with Vue.js, Web Awesome, and Font Awesome.

So, what’s going on here? In previous demos (like the one for More Web Awesome Dropdowns), there were three files for each pen (the markup, CSS, and JavaScript). For 2.0 pens, you can have many more (and it uses Vite). In the demo above, App.vue handles the application layout, Header.vue handles the header, and CounterButton.vue handles the button’s behavior. I have done A LOT of experimentation since the 2.0 editor dropped, and I can’t get a few things (like Vue Router) to work, but I am hoping that will come with time. Since I can add more files, I added the social meta tags and a manifest.json. It means that the result should be more shareable on its own. I also added a light-mode/dark-mode toggle, a link to view the files, and a link to the blog post.

I think that, moving forward, I will keep using the same header. I hope that you appreciate the result.

Example: https://strange-scene-malamute.codepen.app

Trying to figure out the CodePen 2.0 editor

Recently, CodePen introduced CodePen 2.0, and since then, I have been trying to figure out how to modify my workflow for this blog to use it. I have been using CodePen to host my code demos for over six years now, and it feels weird to change, but it seems like a positive development. Lately, I have been writing a lot of posts about how to use Vue.js with Web Awesome. Let’s start with something that we can use to demonstrate basic functionality with Vue.js, Web Awesome, and Font Awesome.

So, what’s going on here? In previous demos (like the one for More Web Awesome Dropdowns), there were three files for each pen (the markup, CSS, and JavaScript). For 2.0 pens, you can have many more (and it uses Vite). In the demo above, App.vue handles the application layout, Header.vue handles the header, and CounterButton.vue handles the button’s behavior. I have done A LOT of experimentation since the 2.0 editor dropped, and I can’t get a few things (like Vue Router) to work, but I am hoping that will come with time. Since I can add more files, I added the social meta tags and a manifest.json. It means that the result should be more shareable on its own. I also added a light-mode/dark-mode toggle, a link to view the files, and a link to the blog post.

I think that, moving forward, I will keep using the same header. I hope that you appreciate the result.

Example: https://strange-scene-malamute.codepen.app

More Web Awesome Dropdowns

Back in February, we looked at how to use Vue.js and Web Awesome to create dropdowns. I wanted to take a moment to look at other ways we can use Vue and Web Awesome to do cool things with Dropdowns. In today’s post, we will use the data files at data.jws.app to populate dropdowns in a webform. We previously used that data while looking at how to implement an autocomplete using web components. That work used Lit to create more maintainable Web Components that could be used and reused in development projects. Instead of using Lit this time, we are going to be using Web Awesome, but since Web Awesome uses Lit, we are still kind of using Lit. For today’s demos, we will look at how to create a contact form.

Our data website has a JSON file listing counties in Wisconsin. If we get that data asynchronously in onMounted(), we can populate a Ref with the listing of counties. At that point, you just need a v-for loop.

This has minimal utility because most contact forms will be used outside the great state of Wisconsin. I created a 426KB data file that has the names of the counties in every state. If we use a computed value for both the stateNames and countyNames arrays, we can make the list of county names depend on the selected state.

If the goal is to get the user’s contact information, you are more likely to want their state, city, and zip code rather than their state and county. The problem is that the data file balloons a lot at this point. A single data file containing every state, city, and zip code is 10.5 MB, which is a lot for a slower data connection to download. For the next example, we will try to use the same pattern as the last one.

As I said above, the problem is that our data file is ridiculously large. A 10.5 MB dependency on a webpage is unacceptable. My rule of thumb has always been that if a webpage can’t load over a bad cellular connection, it doesn’t function. If we want to have State, City, and Zip Code dropdowns, we can’t reduce the amount of data we are working with, but we can reduce the amount of data that is loaded into memory at the same time.

To make the final demo more performant, I split the data file into one for states and another for cities and ZIP codes in each state (e.g., AL, AK, AZ, AR). Now, the data file for the states is only 5.96 KB, and the data file for cities and zip codes in Wisconsin is 215 KB. 220.96 KB is much easier for mobile data users. Let’s see what that would look like.

We still watch the state, city, and zip values, but now we use await fetch() to retrieve the city and zip code data when the selected state changes.

What’s next? The inevitable next step would be to integrate street addresses, but if the dataset for US states, cities, and zip codes is 10.5 MB, the dataset for every street address in America would be significantly larger. The better option would be to use an API connected to a GIS server.

First Example: https://codepen.io/steinbring/pen/NPrjvNx/6f7d77a802b2fb359f3432ccf3844fe5

Second Example: https://codepen.io/steinbring/pen/wBWdVYW/fc70e2d022318800492654b73559cbe7

Third Example: https://codepen.io/steinbring/pen/xbOWqdN/ebbd160959669145be5a28f53f3f4e9e

Fourth Example: https://codepen.io/steinbring/pen/jErzBvK/cb69e49c7402268053845a0abd0f1f84

Welcome to this week’s The Programmer’s Fulcrum.

It’s your weekly review of the essential news in the Open Media Network and Fediverse development communities with a focus on devastating big tech via Techno Anarchism. We aim to provide actionable content you can use to destroy Techno Feudalism each week. It has the additional benefit of weakening authoritarianism.

IMHO, the best way to do […]

Welcome to this week’s The Programmer’s Fulcrum.

It’s your weekly review of the essential news in the Open Media Network and Fediverse development communities with a focus on devastating big tech via Techno Anarchism. We aim to provide actionable content you can use to destroy Techno Feudalism each week. It has the additional benefit of weakening authoritarianism.

IMHO, the best way to do […]

How to use wa-radio-group with Vue

Previously, we went over how to use wa-card, wa-grid, wa-dropdown, and wa-relative-time. The next post in the Web Awesome/Vue series will be about the wa-radio-group component. This could be useful for wiring up a web form or for writing the interface for a results listing (like the “Buy Now,” “Make an Offer,” or “Auction” interface on eBay). Let’s see what is possible with Web Awesome.

For our first, let’s look at the simplest possible example. There is a horizontal radio button group, a vertical radio button group, colorOptions and foodOptions arrays to control what the radio button groups consist of, and ref objects for selectedColor and selectedFood.

If you add an appearance="button" attribute to the wa-radio blocks, it changes it from looking like a group of buttons instead of radio controls.

You will notice, though, that Vue variables for defining the options and what is selected are fine, but the value for what is selected doesn’t change when you change what is selected. So, how can you do that?

The only change in this final example is the addition of an @change="selectedColor = $event.target.value" attribute. Whenever the selection changes, it fires that and changes the value.

Please feel free to drop a comment if you have a question about any of this.

First example: https://codepen.io/steinbring/pen/WbxweXR/e045e86b81364eca311b9c0982b711c5

Second example: https://codepen.io/steinbring/pen/YPWqKpM/f47bd1b7334c432dc9ad5de93a281adc

Third example: https://codepen.io/steinbring/pen/dPXMWog/9d4c39becfdd948bd43eacc80cca0428

Has anyone tried adding @fontawesome and @webawesome to a 2.0 pen on @codepen? In https://www.youtube.com/shorts/CO_9Zx9ELEc, @chriscoyier adds an import to script.js that references the NPM package for Web Awesome, and then #CodePen generates a package.json. I'm still trying to figure out how to do that with an NPM auth token.

#WebAwesome #FontAwesome #NPM

Has anyone figured this out?

Has anyone tried adding @fontawesome and @webawesome to a 2.0 pen on @codepen? In https://www.youtube.com/shorts/CO_9Zx9ELEc, @chriscoyier adds an import to script.js that references the NPM package for Web Awesome, and then #CodePen generates a package.json. I'm still trying to figure out how to do that with an NPM auth token.

#WebAwesome #FontAwesome #NPM

Has anyone figured this out?

Has anyone tried adding @fontawesome and @webawesome to a 2.0 pen on @codepen? In https://www.youtube.com/shorts/CO_9Zx9ELEc, @chriscoyier adds an import to script.js that references the NPM package for Web Awesome, and then #CodePen generates a package.json. I'm still trying to figure out how to do that with an NPM auth token.

#WebAwesome #FontAwesome #NPM

Has anyone figured this out?

Has anyone tried adding @fontawesome and @webawesome to a 2.0 pen on @codepen? In https://www.youtube.com/shorts/CO_9Zx9ELEc, @chriscoyier adds an import to script.js that references the NPM package for Web Awesome, and then #CodePen generates a package.json. I'm still trying to figure out how to do that with an NPM auth token.

#WebAwesome #FontAwesome #NPM

Has anyone figured this out?

Has anyone tried adding @fontawesome and @webawesome to a 2.0 pen on @codepen? In https://www.youtube.com/shorts/CO_9Zx9ELEc, @chriscoyier adds an import to script.js that references the NPM package for Web Awesome, and then #CodePen generates a package.json. I'm still trying to figure out how to do that with an NPM auth token.

#WebAwesome #FontAwesome #NPM

Has anyone figured this out?

How to use wa-relative-time with Vue

Back when we looked at how to use wa-grid with Vue, we ended up with something that had the dates the individual photos were taken.

That is cool, but Web Awesome offers a second option. There is a wa-relative-time component that gives you the amount of time that has passed since that date. Let’s see what that would look like.

Would I use that in a finished product? I’m not too sure. It is always nice to have options, though.

Example: https://codepen.io/steinbring/pen/GgqpmJp/b7435756762bd672ed8865168de94943

I like what I built post-2022

I wrote a few years ago about how I future-proofed my online identity by mirroring my writing in 2018 and then moved off of centralized social media in 2022. I now have my social media on JWS.Social instead of Twitter, I have my photos on Photos.JWS and JWS Pictures instead of Instagram, Flickr, and Tumblr, and I have been off of Reddit for years. This means that I don’t need to worry about the platform I am using being used to illegally generate deep-fake child porn, but it also means that I get to control what I can do with my own content. If I decide that I want GIFs.JWS to be available through an RSS feed, Mastodon, and BlueSky, I can do that. You don’t get the ability to do that with a platform like Facebook.

There are new concerns to consider after transitioning from legacy social media. On October 30, 2025, K&T Hosting announced it would cease operations and close by January 15, 2026. As a result, I had to migrate JWS.Social from K&T to Fedihost. Others host their instances on platforms like Akamai Cloud or DigitalOcean. Many users prefer services like Mastodon.Social or Hachyderm. All these options have their advantages and disadvantages. The good thing is that decentralized social media lets you do what you want and change your mind whenever you want.

Back in 2024, I moved JWS.Dev from using VuePress to using VitePress. I also created JWS.Pictures as an experiment to explore what you can do with GitHub Actions. I’m not terribly happy with either, but I do like the automations behind JWS.Pictures, and I like the look of JWS.Dev. I have been exploring Web Awesome and Vue.js here, and I am probably going to try to use both to rewrite the front-end of both websites.

How to use wa-dropdown with Vue

So far in our Web Awesome/Vue series, we have covered wa-card and wa-grid. Two years ago, I wrote about building a photography website (that admittedly had a shitty UI). The important part was the GitHub Actions that were triggered when a new photo was added. The script behind that creates versions of the photo file and appends that photo’s data to the JSON and XML files. Those data files let us fetch the years the photos were taken, the countries where the photos were taken, the years I took photos in each country, and the countries where I took photos for each year. In this post, we will look at how to create a Web Awesome dropdown menu, how to use those values to drive it, and ultimately, how to have both a “years” dropdown and a “countries” dropdown that affect each other.

Web Awesome’s wa-dropdown component is pretty easy to drive from a computed property. Let’s start by populating a dropdown with years from 2018 through the current year.

You don’t need a computed property to populate your dropdown element, though. You can also populate it from a normal array.

In this second example, we are using static values to populate a “Countries” dropdown. I want both a “Years” dropdown and a “Countries” dropdown in the finished project. Let’s see what that would look like next.

Like the first two examples, the third one also has the years as a computed property and the countries as a static array of strings.

If we are going to use this as a display filter for photos, I’m not a prolific enough traveler to have photos from every country every year, and we want to avoid a “no photos found” result, we will need to make one dropdown affect the other. If the user selects “Italy” and I was only in Italy in 2022, it wouldn’t make sense to allow the user to select 2023. In a similar vein, if the user selects 2024 and I was only in Japan, South Korea, and Taiwan in 2024, it wouldn’t make sense to allow them to select Italy.

So, what would that look like?

In this final example, once the user selects a year, the available countries are constrained; once a country is selected, the available years are constrained. There are refs for selectedYear and selectedCountry, enabling a future version where cards display the resulting photos.

First example: https://codepen.io/steinbring/pen/xbOGPBP/ac9a54f9138ab18b67f1dbe6857a0774

Second example: https://codepen.io/steinbring/pen/OPXVzLe/bc980fc7c7c361338016dced1eb78db4

Third example: https://codepen.io/steinbring/pen/emzNypR/91c65d642cd2cbce0fbe81a847ad6fc7

Fourth example: https://codepen.io/steinbring/pen/JoKdMRZ/4215aaa4233159d617233f1084e7c069

Fifth example: https://codepen.io/steinbring/pen/PwzqEpo/192ca335ef8aaff25ca960acf1ee3809

Sixth example: https://codepen.io/steinbring/pen/XJKbQBE/eb43f6c03098dc29b86ee6cfa5e4d890

Seventh example: https://codepen.io/steinbring/pen/XJKbQoY/7892f05989247885434ff3f7e74372f5

Eighth example: https://codepen.io/steinbring/pen/ByzoWWB/f935c8c6b6ad52e1d991a386b5b57a04

How to use wa-grid with Vue

Last month, we explored using wa-card with Vue.js. In the final example, we created a grid layout using CSS, but Web Awesome also enables this with a WA component. Today, we’ll extend that example by integrating the WA component. Previously, we learned how to center content using Bulma and Bootstrap. WA provides a similar approach to these frameworks.

Web Awesome wants a basic grid to look like this:

<div class="wa-grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

You can get fancier with spans or gap definitions, but this is all you really need. So, what does the result look like?

The result looks very similar to what we did in the fourth wa-card example. The big difference is that it is more fully Web-Awesome-ized. We could end here, but we could also examine what it looks like with more data in the photos array. You might have guessed that the hard-coded examples come from JWS Pictures. When I created it, I ensured that all.json and all.xml were included so you can retrieve all the photos in your Vue app. If we add an onMounted() lifecycle hook, we can load the photos defined in the JSON file once the component has been mounted. Let’s see what that would look like.

Adding all the photos doesn’t seem to affect the design. In fact, it looks pretty good. I don’t want to just dump photos onto the page, so let’s see what Array.prototype.sort() can do for us.

Now, the images are sorted from newest to oldest rather than in the order they appear in the JSON file. The next step would be to sort and group the photos simultaneously. This way, it becomes clearer which photos belong to which batches. A photosByYear computed ref would allow for that.

The computed ref has properties for a year value and the photos taken in that year. Next time, we will see how we can further evolve this project.

First example: https://codepen.io/steinbring/pen/gbPJLLK/e3b93e220312e05d6c51444c22ed12ba

Second example: https://codepen.io/steinbring/pen/xbZNReX/9b05838c6096c00e08690c24900cd9be

Third example: https://codepen.io/steinbring/pen/GgqKjwM/22f21efec564bee348b1db9eb8dd90de

Fourth example: https://codepen.io/steinbring/pen/bNebwyx/5dadf66f9b55153a63a02d713f12ccc8

How to use wa-card with Vue

Last month, I talked about wanting to spend some time exploring Web Awesome and Vue.js.  I figured that we would start with the wa-card element.  This is a great option for displaying a collection of elements that have photos, names, and descriptions.  Let’s take a look at a simple example.

[cmsmasters_html shortcode_id=”xiyvc2iir9″]PHAgY2xhc3M9ImNvZGVwZW4iIGRhdGEtaGVpZ2h0PSIzMDAiIGRhdGEtZGVmYXVsdC10YWI9Imh0bWwscmVzdWx0IiBkYXRhLXNsdWctaGFzaD0ibXlWR2ROWiIgZGF0YS1wZW4tdGl0bGU9IndhLWNhcmQgZGVtbyAxIiBkYXRhLXVzZXI9InN0ZWluYnJpbmciIGRhdGEtdG9rZW49IjE4YmM5YTM5NGMyY2Q4MWE1ZTJiNjgxZmM2YjgyYThiIiBzdHlsZT0iaGVpZ2h0OiAzMDBweDsgYm94LXNpemluZzogYm9yZGVyLWJveDsgZGlzcGxheTogZmxleDsgYWxpZ24taXRlbXM6IGNlbnRlcjsganVzdGlmeS1jb250ZW50OiBjZW50ZXI7IGJvcmRlcjogMnB4IHNvbGlkOyBtYXJnaW46IDFlbSAwOyBwYWRkaW5nOiAxZW07Ij4KICAgICAgPHNwYW4+U2VlIHRoZSBQZW4gPGEgaHJlZj0iaHR0cHM6Ly9jb2RlcGVuLmlvL3N0ZWluYnJpbmcvcGVuL215VkdkTlovMThiYzlhMzk0YzJjZDgxYTVlMmI2ODFmYzZiODJhOGIiPgogIHdhLWNhcmQgZGVtbyAxPC9hPiBieSBKb2UgU3RlaW5icmluZyAoPGEgaHJlZj0iaHR0cHM6Ly9jb2RlcGVuLmlvL3N0ZWluYnJpbmciPkBzdGVpbmJyaW5nPC9hPikKICBvbiA8YSBocmVmPSJodHRwczovL2NvZGVwZW4uaW8iPkNvZGVQZW48L2E+Ljwvc3Bhbj4KICAgICAgPC9wPgogICAgICA8c2NyaXB0IGFzeW5jIHNyYz0iaHR0cHM6Ly9wdWJsaWMuY29kZXBlbmFzc2V0cy5jb20vZW1iZWQvaW5kZXguanMiPjwvc2NyaXB0Pg==[/cmsmasters_html]

Web Awesome is an open-source library of web-standards-based and framework-agnostic UI components, so adapting them to work with Vue.js is easy. We just need variables for each of the elements of the content and a little createApp() magic.

[cmsmasters_html shortcode_id=”421v0kf01t”]PHAgY2xhc3M9ImNvZGVwZW4iIGRhdGEtaGVpZ2h0PSIzMDAiIGRhdGEtZGVmYXVsdC10YWI9Imh0bWwscmVzdWx0IiBkYXRhLXNsdWctaGFzaD0iRWFQZWFWTCIgZGF0YS1wZW4tdGl0bGU9IndhLWNhcmQgZGVtbyAyOiBEdXBsaWNhdGluZyB3aXRoIFZ1ZSIgZGF0YS11c2VyPSJzdGVpbmJyaW5nIiBkYXRhLXRva2VuPSIxYmVkYTZhYjNjYWYxNTZlZTAzNWMzYjc5MjdhYmY4NiIgc3R5bGU9ImhlaWdodDogMzAwcHg7IGJveC1zaXppbmc6IGJvcmRlci1ib3g7IGRpc3BsYXk6IGZsZXg7IGFsaWduLWl0ZW1zOiBjZW50ZXI7IGp1c3RpZnktY29udGVudDogY2VudGVyOyBib3JkZXI6IDJweCBzb2xpZDsgbWFyZ2luOiAxZW0gMDsgcGFkZGluZzogMWVtOyI+CiAgICAgIDxzcGFuPlNlZSB0aGUgUGVuIDxhIGhyZWY9Imh0dHBzOi8vY29kZXBlbi5pby9zdGVpbmJyaW5nL3Blbi9FYVBlYVZMLzFiZWRhNmFiM2NhZjE1NmVlMDM1YzNiNzkyN2FiZjg2Ij4KICB3YS1jYXJkIGRlbW8gMjogRHVwbGljYXRpbmcgd2l0aCBWdWU8L2E+IGJ5IEpvZSBTdGVpbmJyaW5nICg8YSBocmVmPSJodHRwczovL2NvZGVwZW4uaW8vc3RlaW5icmluZyI+QHN0ZWluYnJpbmc8L2E+KQogIG9uIDxhIGhyZWY9Imh0dHBzOi8vY29kZXBlbi5pbyI+Q29kZVBlbjwvYT4uPC9zcGFuPgogICAgICA8L3A+CiAgICAgIDxzY3JpcHQgYXN5bmMgc3JjPSJodHRwczovL3B1YmxpYy5jb2RlcGVuYXNzZXRzLmNvbS9lbWJlZC9pbmRleC5qcyI+PC9zY3JpcHQ+[/cmsmasters_html]

The above example gives you the same result as the first one, but instead of the values being in the markup, they are in JavaScript variables. So, how do we adapt this to work with more complex data?

[cmsmasters_html shortcode_id=”vhd59gyl”]PHAgY2xhc3M9ImNvZGVwZW4iIGRhdGEtaGVpZ2h0PSIzMDAiIGRhdGEtZGVmYXVsdC10YWI9Imh0bWwscmVzdWx0IiBkYXRhLXNsdWctaGFzaD0icUViSlltSyIgZGF0YS1wZW4tdGl0bGU9IndhLWNhcmQgZGVtbyAzOiBSZW5kZXJpbmcgYW4gYXJyYXkiIGRhdGEtdXNlcj0ic3RlaW5icmluZyIgZGF0YS10b2tlbj0iOWIyMDRlZTUxNDYwZTA4MTFkOTcyNTI2MGY5MzM4MWYiIHN0eWxlPSJoZWlnaHQ6IDMwMHB4OyBib3gtc2l6aW5nOiBib3JkZXItYm94OyBkaXNwbGF5OiBmbGV4OyBhbGlnbi1pdGVtczogY2VudGVyOyBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsgYm9yZGVyOiAycHggc29saWQ7IG1hcmdpbjogMWVtIDA7IHBhZGRpbmc6IDFlbTsiPgogICAgICA8c3Bhbj5TZWUgdGhlIFBlbiA8YSBocmVmPSJodHRwczovL2NvZGVwZW4uaW8vc3RlaW5icmluZy9wZW4vcUViSlltSy85YjIwNGVlNTE0NjBlMDgxMWQ5NzI1MjYwZjkzMzgxZiI+CiAgd2EtY2FyZCBkZW1vIDM6IFJlbmRlcmluZyBhbiBhcnJheTwvYT4gYnkgSm9lIFN0ZWluYnJpbmcgKDxhIGhyZWY9Imh0dHBzOi8vY29kZXBlbi5pby9zdGVpbmJyaW5nIj5Ac3RlaW5icmluZzwvYT4pCiAgb24gPGEgaHJlZj0iaHR0cHM6Ly9jb2RlcGVuLmlvIj5Db2RlUGVuPC9hPi48L3NwYW4+CiAgICAgIDwvcD4KICAgICAgPHNjcmlwdCBhc3luYyBzcmM9Imh0dHBzOi8vcHVibGljLmNvZGVwZW5hc3NldHMuY29tL2VtYmVkL2luZGV4LmpzIj48L3NjcmlwdD4=[/cmsmasters_html]

In the above example, we are looping over a 3-item array using v-for.  Since the only styling on the example is a width on the cards, it looks a little off.  We can fix that with a little grid magic, though.

[cmsmasters_html shortcode_id=”ielp7k42p”]PHAgY2xhc3M9ImNvZGVwZW4iIGRhdGEtaGVpZ2h0PSIzMDAiIGRhdGEtZGVmYXVsdC10YWI9Imh0bWwscmVzdWx0IiBkYXRhLXNsdWctaGFzaD0iSm9HbXZtbSIgZGF0YS1wZW4tdGl0bGU9IndhLWNhcmQgZGVtbyA0OiBSZW5kZXJpbmcgYW4gYXJyYXkgd2l0aCBleHRyYSBzdHlsaW5nIiBkYXRhLXVzZXI9InN0ZWluYnJpbmciIGRhdGEtdG9rZW49IjJiM2E3YTFjZjBlZWYxYmI0MmIyNjE0YTk2NWY2ZWUwIiBzdHlsZT0iaGVpZ2h0OiAzMDBweDsgYm94LXNpemluZzogYm9yZGVyLWJveDsgZGlzcGxheTogZmxleDsgYWxpZ24taXRlbXM6IGNlbnRlcjsganVzdGlmeS1jb250ZW50OiBjZW50ZXI7IGJvcmRlcjogMnB4IHNvbGlkOyBtYXJnaW46IDFlbSAwOyBwYWRkaW5nOiAxZW07Ij4KICAgICAgPHNwYW4+U2VlIHRoZSBQZW4gPGEgaHJlZj0iaHR0cHM6Ly9jb2RlcGVuLmlvL3N0ZWluYnJpbmcvcGVuL0pvR212bW0vMmIzYTdhMWNmMGVlZjFiYjQyYjI2MTRhOTY1ZjZlZTAiPgogIHdhLWNhcmQgZGVtbyA0OiBSZW5kZXJpbmcgYW4gYXJyYXkgd2l0aCBleHRyYSBzdHlsaW5nPC9hPiBieSBKb2UgU3RlaW5icmluZyAoPGEgaHJlZj0iaHR0cHM6Ly9jb2RlcGVuLmlvL3N0ZWluYnJpbmciPkBzdGVpbmJyaW5nPC9hPikKICBvbiA8YSBocmVmPSJodHRwczovL2NvZGVwZW4uaW8iPkNvZGVQZW48L2E+Ljwvc3Bhbj4KICAgICAgPC9wPgogICAgICA8c2NyaXB0IGFzeW5jIHNyYz0iaHR0cHM6Ly9wdWJsaWMuY29kZXBlbmFzc2V0cy5jb20vZW1iZWQvaW5kZXguanMiPjwvc2NyaXB0Pg==[/cmsmasters_html]

In the next post, let’s see if we can take this to the next level.

[cmsmasters_divider shortcode_id=”aa2s5ph03″ width=”long” height=”1″ style=”solid” position=”center” margin_top=”50″ margin_bottom=”50″ animation_delay=”0″]

First example: https://codepen.io/steinbring/pen/myVGdNZ/18bc9a394c2cd81a5e2b681fc6b82a8b

Second example: https://codepen.io/steinbring/pen/EaPeaVL/1beda6ab3caf156ee035c3b7927abf86

Third example: https://codepen.io/steinbring/pen/qEbJYmK/9b204ee51460e0811d9725260f93381f

Fourth example: https://codepen.io/steinbring/pen/JoGmvmm/2b3a7a1cf0eef1bb42b2614a965f6ee0

Updating code on various web projects (updating #Laravel, switching to #TailwindCSS or #WebAwesome, etc...), learning more about #Web3, #Docker, #Kubernetes, and more...

I still do a bunch of #3DPrinting, but...I'd really love to get a job!

Not sure what else to post that's of value...I guess this was just a brain dump of the last few weeks...

⚡ From concept to current — Web Awesome is ready to roll. ⚡ Build and design faster than ever.

20% off for life ends Nov 19 — final lifetime deal 👉 https://webawesome.com/?utm_source=mastodon&utm_medium=social&utm_campaign=launch&utm_content=post_launch_2
#WebAwesome #Frontend #OpenWeb #LifetimeDeal

Inside the lab, we’re already scheming what’s next. 🧠

Web Awesome is only the first phase of the experiment — and the results are already electric. ⚡

But there's still time to get in on 20% off for life on Web Awesome Pro before the offer closes Nov 19 → https://webawesome.com/?utm_source=mastodon&utm_medium=social&utm_campaign=launch&utm_content=post_launch_1b
#WebAwesome #OpenSource #Innovation

Christmas came early this year: #Webawesome 3.0 has been released https://webawesome.com/ #webcomponents

⚡ IT’S ALIVE! ⚡

Web Awesome has escaped the lab — and to celebrate, we’re offering 20% off for life on Web Awesome Pro.

This is the final lifetime deal before it vanishes forever.

Ends Nov 19 → https://webawesome.com/?utm_source=mastodon&utm_medium=social&utm_campaign=launch&utm_content=announcement
#WebAwesome #Frontend #OpenWeb #LaunchDay

I've just had my first play around with #webawesome and it's quite impressive. The free version doesn't include the page builder stuff but for my purposes it isn't really necessary.

I was able to rebuild the rough page template I've been putting together with #eleventy in less than an hour, not bad!

#Development #Reviews
Web Awesome is finally here · “Now we have the best CSS framework on the market.” https://ilo.im/165bqw

_____
#WebAwesome #Shoelace #OpenSource #CSS #Framework #UiComponents #WebComponents #WebAPIs #WebDev #Frontend

"Oh, but if you use #WebAwesome you need to bridge it to Laravel Livewire"

Yes, but for that I can make it open source, ask for $10 for donations, and eventually get it for $0.

#PHP #Programming #Coding #UI #UX #Frontend #WebComponents #WebDesign #GraphicDesign #JavaScript #Laravel #LaravelLivewire #Livewire

The new kid on the block is about to start and to become the new leading web framework:

https://backers.webawesome.com/docs/components/

#WebAwesome #WebComponents #WebFramework #WebDev

I tried out the #WebAwesome alpha. It's definitely an alpha 🤣🤓

#webdev #webdevelopment #framework #developer

I backed the Web Awesome (https://www.kickstarter.com/projects/fontawesome/web-awesome) Kickstarter a month or two ago and they put out v. 3.0.0-alpha.1, last week. I'm glad to see it.

Submenus: https://codepen.io/steinbring/pen/jOoKMyx
Form Inputs: https://codepen.io/steinbring/pen/abrKmWe

#WebAwesome #Shoelace #FontAwesome

I'm pretty excited about #WebAwesome 🤩 :nyanko_hearts:

#web #developer #code

There are 4 hours and $40,000 until the next Web Awesome stretch goal. It would be pretty cool if there was another date picker in the world.

https://www.kickstarter.com/projects/fontawesome/web-awesome

#WebAwesome #Shoelace

There is a day remaining for the Web Awesome / Shoelace Kickstarter campaign and I want to see the Combobox / Typeahead stretch goal happen. It is less than $4k away.

https://www.kickstarter.com/projects/fontawesome/web-awesome

#Shoelace #WebAwesome #WebComponents

Ever stumbled upon those form fields that suggest options in a drop-down as you type, like when you’re entering addresses? Turns out, making those aren’t as tough as you’d think! Today, I’m gonna walk you through three cool ways to pull it off using Vue.js. Let’s dive in!

Vuetify

If you are a Vue developer, you have likely used Vuetify.  It is an open-source UI library that offers Vue Components for all sorts of things.  One of those things just happens to be Autocompletes.

See the Pen
Autocomplete -- Vuetify by Joe Steinbring (@steinbring)
on CodePen.

Last week, I spoke about creating a repository of data for coding examples.  The first one is a list of counties in the state of Wisconsin.  In this example, the values from the API are stored in a counties array, the value that you entered into the input is stored in a selectedCounty variable, and the fetchCounties method fetches the values from the API.  Thanks to v-autocomplete component, it is super easy using Vuetify.

Shoelace

Shoelace (now known as Web Awesome) doesn’t have a built-in autocomplete element but there is a stretch-goal on their kickstarter to add one.  That means that we need to build the functionality ourselves.

See the Pen
Autocomplete -- Shoelace by Joe Steinbring (@steinbring)
on CodePen.

Our Shoelace version has a filteredCounties variable so that we can control what is shown in the suggestions and a selectCounty method to let the user click on one of the suggestions.

Plain HTML and CSS

We have already established that Shoelace doesn’t have an autocomplete but neither does Bulma or Bootstrap.  So, I figured that we would try a pure HTML and CSS autocomplete.

See the Pen
Autocomplete -- HTML by Joe Steinbring (@steinbring)
on CodePen.

This is very similar to out Shoelace example but with some extra CSS on the input.  You might be wondering about that autocomplete attribute on the input.  It is a different type of autocomplete.  The autocomplete attribute specifies if browsers should try to predict the value of an input field or not.  You still need to roll-your-own for the suggestions.

https://jws.news/2024/how-to-impliment-an-autocomplete-using-vue/

#Autocomplete #HTML #JavaScript #VueJs #Vuetify #WebAwesome

#FontAwesome is raising funds for their new project #WebAwesome, which is a set of web components. Their goal is set to $30,000, and they've received $412,000 so far. With this huge amount of fund, it doesn't make sense to me that they are also providing some "pro" components to monetize the project more.

https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=68pa3y

Ich unterstütze jetzt Web Awesome auf #Kickstarter weil ich schon mit #FontAwesome gute Erfahrungen gemacht habe.

#WebAwesome: https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=android_project_share

#HTML5 #CSS #UI