DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for The revolution in Front-end Development is here
vsblox
vsblox

Posted on

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.

blox vscode demo

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!

blox vscode demo 2

Top comments (11)

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited on

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!

Collapse
 
bruceblox profile image
vsblox Author

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

Collapse
 
thumbone profile image
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".

Collapse
 
aqkhan profile image
A Q Khan

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

Collapse
 
thumbone profile image
Bernd Wechner

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

Collapse
 
m4rcoperuano profile image
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.

Collapse
 
bruceblox profile image
vsblox Author

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.

Collapse
 
adam_cyclones profile image
Adam Crockett • Edited on

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

Collapse
 
bruceblox profile image
vsblox Author

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

Collapse
 
adam_cyclones profile image
Adam Crockett

Probably πŸ˜‹ I'm dyslexic

Collapse
 
lil5 profile image
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

🌚 Friends don't let friends browse without dark mode.

Just kidding, it's a personal preference. But you can change your theme, font, etc. in your settings.

The more you know. 🌈