New Toy for Bric Developers

[Norm]

As many of you already know, all custom Brics execute their functions and code in a dedicated sandbox which is then synced to the Blocs design environment. Previously, Blocs only offered the developer console to debug, which was pretty basic and not that great when working on the functionality of Brics.

Introducing The Developer Sandbox Tool

Todays beta of Blocs V5.0.5 (b1) will introduce a new dedicated tool designed to aid developers in building and debugging custom Brics.

For the first time, the Blocs API sandbox environment is visualised

This new tool brings the following new features for Bric developers.

Visual Output
You can now see exactly what is going on in your Brics sandbox.

Sandbox Inspector
Inspect the web environment your Brics javascript functions are running in and access full debugging.

Javascript Sandbox Injection
You can now inject javascript directly into your Brics sandbox environment. This is ideal for quickly testing your JS functions and API calls.

Quick Sync
Trigger the API sync call (used to pass html back to the Blocs design environment) with a click.

I think these new developer features are going to be a huge help for those talented developers creating custom Brics for Blocs.

[Jannis]

@Norm

full debugging

Oh that’s great

[RME]

Perfect. I love it already

[Norm]

Another overdue improvement.

You can now select the elements in the Bric builder on the left side and not just the UI tree.

[PeteSharp]

@Norm

overdue improvement.

Late Christmas present . Sweet

[webdeersign]

Looking forward to the documentation update on the Bric Builder. Would love to see a video showing The Developer Sandbox Tool in action.

[Ricardo]

That’s a great addition

[Norm]

Another new feature for Bric developers coming in 5.0.5 (beta 2)

The Bric init function can now access the current document breakpoint, so you can make changes based on breakpoint for a particular function.

Just use the variable activeBreakpoint in your javascript. The activeBreakpoint variable is an integer with the following values.

1 = LG breakpoint
2 = MD breakpoint
3 = SM breakpoint
4 = XS breakpoint

I will also back-port this functionality to Blocs V4 so your Brics can take advantage of it on both Blocs V4 and V5

[PeteSharp]

Oh man that’s going to be great

[PeteSharp]

@Norm

So will the the Ui remember states per breakpoint like it does now or will we have to manage all that like we had to before??

Eg a tick box unticked on MD.

[Norm]

You need to handle it manually, it’s way more flexible that way.

[PeteSharp]

The potential workload went up for breakpoint features . Brics are now $100

[Norm]

Well, these features are optional

[PeteSharp]

Yes. I have been thinking about how I can use this since I saw the post. It will be handy for sure.

[Norm]

Ok I’ve made the new breakpoint variable even easier to use.

By default the javascript variable activeBreakpoint will be declared in all custom Bric sandbox environments. So all a developer needs to do is simply use the variable activeBreakpoint.

like so:

I’m going to add a bunch of preset variables available in the sandbox environment and maybe some functions too.

What else do you guys want added? What project information or app information is useful on the JS side?

[PeteSharp]

Nice work Norm. we appreciate the advances in the API.

Should the number go the other way, considering bootstrap is mobile first, especially if one day you want to add XL, since it’s a bootstrap breakpoint and we have a lot more widescreens now?

Thinking about extras……

[Norm]

With 5.0.5 beta 2 I’ll also be introducing a new set of built in Javascript Bric utilities that any Bric can access within the sandbox. To begin with the list is pretty small but, we can obviously build this out with your feedback.

The general plan here is to lower the amount of code developers need to write in order to get a Bric to function.

New JS Utilities

applyAlignmentClass(target,position,sync) = This function will apply the relevant bootstrap alignment class (text-start | text-center | text-end) for the provided target element, it supports breakpoints and removes any current class for that breakpoint that may already be applied. It also automatically handles Bootstrap 4 (text-left | text-center | text-right).

Here is an example, this function is connected to the alignment segmented control. I just assign a target element, feed the alignment right in and set the sync bool to true.

getAlignmentState(target) = This function will get the current bootstrap alignment class used on an element (text-start | text-center | text-end) based on breakpoint and bootstrap version and return an integer 0, 1, 2 which can be used to populate the alignment segmented control element from Bric Builder.

Like So.

New Shorthand API Calls
I’ve also included a few shorthand API calls, they can be used as well as the traditional longer calls.

bricDebug("Hello World"); = window.webkit.messageHandlers.debug.postMessage("Hello World");

bricSync("changes"); = window.webkit.messageHandlers.sync.postMessage("changes");

All of this will require Blocs 5.0.5 or 4.5.5.

[Norm]

Sorry I have more…

It makes sense to be able to check the version of Blocs in the Bric sandbox, just use blocsAppVersion in your JS to do that.

[PeteSharp]

Nice. I’m liking this. Have to learn the new utilities, but moving forward really good. Shorthand for the win.

[Norm]

I’ll be updating all of the our Brics and examples, so there will be plenty to use as reference.