The revolution in Front-end Development is here

Hi everyone,
I’m Bruce and I’m a DevRel at blox. Me and my team are excited to bring you the alpha release of blox

What is blox?

blox is a VS code extension that lets you drop code snippets with a single click. It’s aimed at fast tracking the developer workflow through the ease of adding pre-built UI components without ever having to leave VS Code.

The blox story

I started using Tailwind CSS a couple years ago, I fell in love with the ease and seamlessness of the experience that comes with it. As someone who was managing a team of quite a few devs at that time, I started noticing the need to fast track our workflow as our clientele grew. We gave more than a couple of UI kits/libraries (for Tailwind CSS) a shot and we were over the moon with the difference they made, in the form of quicker dev hand-offs.
As time passed, I started pondering over the fact that we were spending too much time switching over windows, setting up frameworks, and applying configs for the UI components of the excellent resources we were using.
Then one day in the midst of a caffeine rush, I had a crazy yet simple idea that what if I could skip the copy-pasting and just do everything where I spend most of my time. I ran some ideas over with my team in the next Monday's meeting. And after spending a week or so on coming up with a product development strategy we went right into it.
I’ll dive deep into our product development journey and the ups and downs of building blox some other time. For now, I just wanted to share a glimpse of our journey and how we got here.

Integrations and supported frameworks

Currently, blox supports Tailwind CSS with Angular, Vue, and React at the moment. In the future, we have plans of gradually releasing support for MaterialUI, Bootstrap, Svelte, Alpine.js, and Laravel. Blox comes with an extensive code snippets library of more than 1500 codeblocks for a wide collection of categories. There are three component categories of Web Application UI, Ecommerce UI, and Marketing UI for fully functional and responsive web applications, landing pages, and web stores. There are a bunch of component categories that are built by expert designers after an extensive UX research. We’ve arranged the code block in an intuitive way
The code blocks require no configuration, and they’re also completely functional and responsive. So, once you’ve installed blox, you’re all set and good to go.

Try blox

Currently we’re doing a soft launch and you can install the alpha version of blox from its VSIX file. It’s available on blox's official website. Once you install it in your VS code, the “b” (blox) icon appears on the left side, along with your other installed extensions. Just open it up and start dropping the code blocks in your projects!

Comments

[GrahamTheDev]

The concept is great ❤.

However...(sorry, criticism incoming)

WCAG Acessible
Every block follows WCAG guidelines and provides an accessible experience for every user

In your short 24 second video showcasing a component you have the following issues:

1. tabindex="0" on everything - making keyboard navigation next to impossible as every item will be keyboard focusable, which is not how you make a page accessible.
2. headings right next to each other - within that one block You have a <h1> followed immediately by a <h2> then a <h3> followed immediately by a <h4>. This is completely wrong I am afraid, stacked headings are bad, having all elements in a component be headings is even worse and not something I have seen before!
3. role="image"...on an <img> - you have fallen into the aria trap and over used it. Only use WAI-ARIA as a last resort. (technically not a fail, just a bad practice!)

I would imagine a lot of the other templates will have similar or worse issues if that is the pattern that has been followed.

I would suggest removing the claim of "WCAG accessible" entirely as that is dangerous and completely false, so it may open you up to litigation (lawsuits).

Also bear in mind that (new) developers will think they have done the right thing and picked an accessible library and it is sadly the exact opposite.

I hope the project takes off as I like the idea a lot and I hope it generates a nice income for you, but perhaps reinvest the first income you receive into getting an accessibility expert to rewrite your templates (and if they are templates taken from elsewhere then write your own!) and then you can indeed make the claim that they are WCAG accessible (to the extent that they can be, certain components require JavaScript to be accessible as you need to change WAI-ARIA attributes on them)!

Good luck with the project!

[vsblox]

Our main goal is to improve the developer experience so we do appreciate the feedback and look forward to hear more!

[Bernd Wechner]

I find it a bit hard to reconcile a VS code extension with a "revolution in front-end development". Maybe I'll grant it's a "revolution in using VS Code for front-end development".

[A Q Khan]

out of curiosity, have you even tried the extension? what was your experience?

[Bernd Wechner]

Nope. Don't use VS Code. ;-). Not am I likely to really.

[Marco Ledesma]

This looks great from a marketing perspective. However if you’re goal is to build web applications, it doesn’t look like a good fit. Still, cool feature for VSCode. I think the word “revolution” is a big leap; but it’s neat nonetheless.

[vsblox]

Appreciate the feedback. For webapps, these are the building blocks to fast track the workflow. We'll soon be publishing tutorials on building web apps through blox for a better demonstration.

[Adam Crockett 🌀]

Although this is cool, you can as of very recently use VSCode in a browser officially vscode.dev/ so this becomes a mute point?

[vsblox]

I think you missed the drop-in ready code blocks part.

[Adam Crockett 🌀]

Probably 😋 I'm dyslexic

[Lucian I. Last]

Looks like a whole load of marketing around an bad excuse not to use a template language, GoLang template/html | PHP smarty, blade | NodeJS ejs, mustashe