"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:
I backed Web Awesome on Kickstarter in April. In 2017, I supported their campaign for Font Awesome Five and have maintained a Font Awesome license since then. I like what FA offers and contribute $49/yr to support it. In 2022, Font Awesome acquired Shoelace, and when I saw that Font Awesome was doing a Kickstarter for it, I was excited to back it, too.
The project released Web Awesome Free alpha this summer and plans to release Web Awesome Pro alpha this December. In April 2025, they will officially release Web Awesome Free + Pro 3.0. So far, there isn’t much substantive to poke at since the things I am most interested in are part of Web Awesome Pro. The pro version will include a theme builder and a pattern library. I’m hoping that will prove to be an improvement over Bulma, Bootstrap, and Vuetify. I have used all three in projects and like them, but I can spot a Bulma, Bootstrap, or Vuetify site when I see it. I’m hoping that there will be enough variety so that it might be 20% less evident that a Web Awesome site is using Web Awesome.
What does the alpha version of the free product look like so far? Let’s examine two examples.
See the Pen
Web Awesome Submenus (using the Alpha 1 release) by Joe Steinbring (@steinbring)
on CodePen.
See the Pen
Web Awesome Inputs (using the Alpha 1 release) by Joe Steinbring (@steinbring)
on CodePen.
The Shoelace team has long used Lit, so everything is a web component. I’m definitely into it. I can’t wait to see what they have cooking.
Have any questions, comments, etc? Please feel free to drop a comment below.
@konnorrogers yall are using a good amount of Element Internals at #WebAwesome at this point? Do you test it with `axe-core` (including: directly, through Playwright, through unit tests, through Lighthouse, etc.) or use a different approach?
I tried out the #WebAwesome alpha. It's definitely an alpha 🤣🤓
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:
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
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
Have you ever stumbled upon those form fields that suggest options in a drop-down as you type, like when you’re entering a street address? It turns out, that making those are not as difficult as you would 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 at some point. 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 the 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 our 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/
#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
We briefly played with web components once before on here but it has been a few years and I wanted to go a little deeper. Web components are a suite of different technologies that allow developers to create custom, reusable, encapsulated HTML tags for use in web pages and web apps. Essentially, they let you create your own HTML elements with their own functionality, independent of the rest of your codebase.
Let’s start by taking a look at a very basic example.
See the Pen
Web Components -- Simple 1 by Joe Steinbring (@steinbring)
on CodePen.
In this example, the MyGreeting class extends HTMLElement to create a custom element. The constructor then creates a shadow DOM for encapsulation and adds a <span>element with a greeting message (which uses the name attribute for customization). The customElements.define method then registers the custom element with the browser, associating it with the tag <my-greeting>.
So, what can we do with this? You might have heard of Shoelace / Web Awesome. That is just a collection of cool web components. Let’s take a look at a quick example.
See the Pen
Web Components -- Shoelace 2 by Joe Steinbring (@steinbring)
on CodePen.
As you can see above, you just include the activates Shoelace’s autoloader and then registers components on the fly as you use them. Let’s look at a slightly more complicated example.
See the Pen
Web Components -- Shoelace 1 by Joe Steinbring (@steinbring)
on CodePen.
If you flip open the JavaScript panel, you will see that it still neeeds event listeners for the open and close buttons but it is not as complex as if you were writing this frome scratch.
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
