
Vue.js
A deep-dive on Vite
Amal and Nick load up on coffee for a not-so-vite (lame joke!) conversation with Evan You all about Vite – a batteries included next-generation frontend tooling library. Vite continues to push the ecosystem forward with even stronger defaults, super speedy local development workflows, and a highly extensible universal plugin API. Need we say more?!
Wordle built with Vue, aka VVordle
Rebuilding Wordle is a fun way to show off what your frontend framework is capable of (and how). Evan You has been doing just that for Vue. It’s not a 100% reproduction of the original, but it does have one cool feature the official game does NOT:
You can make your own Wordle and send it to friends by base64-encoding a word and include it as the URL query
Here’s a custom one using an acronym that many devs think about often…
PrimeVue – the ultimate Vue UI component library
Thanks to Lars-Erik Roald for submitting this. Here’s Lars:
It is the most comprehensive suite I have ever seen. Especially the datatable component is really impressive. Personally, I have absolutely no relations with Primetek. I just think it is a pity that PrimeVue goes off the radar.
He also provided this getting started video for you to check out.
An open source AirTable alternative
NocoDB will turn any MySQL, PostgreSQL, SQL Server, SQLite, or MariaDB into a smart-spreadsheet. Built with Node and Vue.js. Deploy directly to Heroku or with Docker.
Podrain – a web-based podcast app with offline capabilities
Joe Sweeney built Podrain to scratch his own podcast-listening itch. Here’s what he had to say about it in our community chat:
Hi there! Huge fan of Changelog. I actually built a podcast client for the web as a Vue PWA, as a proof-of-concept towards building a web-first future away from app stores. Works fully offline with downloaded audio, as in, works in Airplane mode (but on Android only). Interface is rough but it’s pretty stable and improving over time!
Try Podrain yourself by pointing your favorite web browser right here.
Completely unstyled, fully accessible UI components to use with Tailwind CSS
If you plan on using Tailwind and building with React or Vue (or Alpine coming soon), it’s a no-brainer to start with these free UI components by the Tailwind team.
An interview with Evan You
Rick Nolan:
Evan You is an independent software developer and the creator of the open source JavaScript framework Vue.js. We had a chance to speak to Evan about the release of Vue 3, his opinion on no-backend & fullstack approaches, Vue.js use cases and the work-life balance of the creator of the technology.
Where the Prolog version of Vue died
An amalgam of interest on this week’s episode starting with a peek at what’s finally coming in Vue 3. We talk about the process of change in the Vue ecosystem and what interesting features are coming either very soon or not for a while depending on how you view time right now. Then, the panelists share what they’ve learned recently, and finish off with shout outs to the projects, ideas, and people we’re appreciative of.
Creating tiny desktop apps with Tauri and Vue.js
This Smashing article is a nice introduction to Tauri, which was news to me as well. It tells you why you might want to use Tauri instead of Electron, how to get set up for Tauri development, and how to build a Vue-based desktop app with the framework.
Making Vue 3
Evan You writes up lessons learned from rewriting the next major version of Vue.js.
Two key considerations led us to the new major version (and rewrite) of Vue: First, the general availability of new JavaScript language features in mainstream browsers. Second, design and architectural issues in the current codebase that had been exposed over time.
I found the section on overcoming the bottleneck of the Virtual DOM (and decreasing CPU time by up to 90%) fascinating. ASTs FTW once again!
What I’m gonna share here is really mediocre
Node 14, Vue’s Vite, and is-promise
are in the news. We’ve got some working from home tips and unpopular opinions to share. And… shout outs! 👏
Generate 8-bit avatars using Conway's Game of Life
Lj Miranda:
I made a website that generates cute 8-bit avatars using Conway’s Game of Life. Simply type in your name, and it will create a unique sprite just for you! Try out
the changelog
,jerod santo
, oradam stacoviak
!Conway’s Game of Life is something that we consider as a Cellular Automaton. It was a mathematical model created by the mathematician John Conway, who, unfortunately, passed away a few weeks ago due to the coronavirus. I highly encourage you to know more about Conway, he’s such an interesting and unique individual!
Built with Vue and Python. Source code here.
Rapidly create interactive UIs in pure Ruby
I like the why behind Matestack:
Implementing two separate systems (backend-api, frontend-app) is a pain: Two different code bases, two repositories to maintain, two different deployment schedules, two test environments, two everything… Being a small dev team, we decided not to adopt this modern web development complexity and decided to create… Matestack!
If you have 30 minutes and want an easy button to learn all about it, Jonas Jabari gave a talk on it at Ruby Unconf 2019.
A complete invoicing solution for freelancers & small businesses
Crater is free for life with all of the below features catered towards the freelance and small business community.
This looks really polished. It even has a React Native-based mobile app. That’s a lot!
This is a fantastic credit card form 💳
Built with Vue. Play with the live demo right here.
A comprehensive intro to Vue.js
From Yaser Adel Mehraban on getting started with Vue.js.
Vue.js is an approachable, versatile, performant, and progressive framework to build user interfaces with. This core library is focused on building the view layer only. It uses the goodies of Angular (such as template syntax) and React (such as Virtual DOM) and adds a few more enhancements on top.
… Another bonus point of it is that migrating to it is really easy. You just need to add a script tag to your page and you’re good to go.
And... the website is down 😱
Jerod, Divya, & Suz get together to discuss top-level await
, the JS13kGames winner, Liran Tal’s is-website-vulnerable
, Vue 3’s source code, and Facebook’s take on AR/VR/XR. Plus 3 awesome pro tips you don’t want to miss!
An "open source" alternative to Zapier
n8n (a numeronym for “nodemation”) is a node-based workflow automation tool. The reason for the square quotes around “open source” is because it has a Commons Clause attached to its Apache 2.0 license, which means you can do anything you want with the source code except make money with it. Since n8n itself is built on open source tech such as TypeScript and Vue.js, this is a nice touch by the author in the FAQ:
As n8n itself depends on and uses a lot of other Open Source projects it is only fair and in our interest to also help them. So it is planed to contribute a certain percentage of revenue/profit every month to these projects. How much exactly is not decided yet.
Vue 3's source code is now available
Vue-next is in “pre-alpha” condition, but the team has achieved most of the architectural goals and new features planned, so the source is now public on GitHub. No word yet on when they expect Vue 3 to be officially released, but you can at least dig in to what they’ve got so far!
Here, try some JSON.pizza (yes you read that correctly) 🍕
{
"How to use": "Paste your JSON here and press Ctrl+Enter to format!",
"Help": "Check the console for errors if it fails to parse.",
"Themes": "Toggle dark/light theme with Ctrl+B",
"Share": "Print a shareable URL to the console with Ctrl+L",
"Source": "View the source on GitHub at https://github.com/kritzware/json",
"Info": "Press Ctrl+I at anytime for a reminder of these instructions"
}
Built with Nuxt.js.
XSM – an "extraordinarily simple" state management solution
[XSM] consists of a global store and the machinary to re-render the component when the state is updated. The store is just a JavaScript object with key and value pairs. By binding the instance reference, this, to the store, each component can react to the changes of the store whether it is re-render or unmount. It is really this simple, no need to use HOC, provider, reducer, decorator, observer, action, dispatcher, etc. Hence, all the three most popular framewokrs work the same way in XSM and that’s why we can keep the code size very small and support the three frameworks without framework specific modules.
Works out of the box with Angular, React, and Vue.
Really typing Vue
This is not another “setting up” a new project with Vue and TypeScript tutorial. Let’s do some deep dive into more complex topics that are usually not covered but are totally required in real-life projects.
Vue.js and SEO: how to optimize reactive websites for search engines and bots
Real life data on how Google indexes javascript-rendered websites today. This has been a controversial subject, and this article by no means settles it entirely, but provides some strong data for what types of dynamic content are well indexable and which are not.
Though to be honest, I think the most important conclusion the author makes might be this one:
If you need your site to perform on search engines other than Google, you will definitely need pre-rendering of some sort.
From voice devices to mobile, you just can't escape JS
KBall and Nick catch up with Nara Kaspergen and Jen Looper for a pair of conversations covering Voice UI Devices, using NativeScript for mobile development, and Jen’s work with Vue Vixens helping make the Vue.js community welcoming to women and non-binary people.