Utility Components for Web Development (Svelte)

[Matthew Pham]

Hi all,

I'm a Computer Science teacher interested about the evolution of Blockly as an educational tool that can bridge the gap between traditional programming Visual Programming/Low Code/No Code. 

I'm a big fan of Microsoft MakeCode, Code.org and EduBlocks and how they have used Blockly in their educational offerings for conversion between blocks and code (albeit EduBlocks doesn't convert code back to blocks as far as I know).

After struggling to parse raw HTML code into blocks with accuracy and reliability, I've been experimenting with using JSON as an abstraction feature to create components/widgets that can be switched between Blocks and JSON instead. This approach has been really promising so far! 

I have just published an open source npm package called svelte-web-blocks, which includes a bunch of utility classes for blockly, as well as svelte components. This enables things like navigation bars, hero sections, feature cards, markdown content, forms, footers and dynamic content to be generated with minimal button clicks and typing. 

I'm curious to know if these kinds of utility classes can easily work with other frameworks such as React or Vue, even though I designed them for Svelte.

Anyway, here are some things I have to share for you to try!

Repository: https://www.npmjs.com/package/svelte-web-blocks 

Demo: https://svelte-web-blocks.vercel.app/

POC Project and Documentation (WIP): https://codeswitch-one.vercel.app/

Matthew Pham

[Mark Friedman]

Well done, Matthew!  That's a package and an app that I could imagine using myself.

As for working with other frameworks like React or Vue, it looks like your generated code is pure HTML + Bootstrap, so it should be fairly easy to use with those (or pretty much any) framework.

-Mark

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/blockly/2986fa6e-4454-49f7-b7c2-fbadc579451an%40googlegroups.com.