Block editor - is it possible to draw frames to separate blocks?

Hi everybody,
I'm on my first app which started light as a programming test and now has become complex adding features, layouts as pages and beyond. All these leads to many blocks and limited experience on how to manage those in the block space.

My idea but I couldn't find the way, is to draw frames in the block editor and leave specific blocks inside. In small words, I'm thinking of frames for each major layout and move inside the frame related blocks including procedures, variables and so on.

It the above is not possible or recommended, can someone give some hints on personal way of arranging block around the editor?

Is there any reading about it?

I understand it is really a personal way of doing it and I appreciate others way of working

thanks

usually i collapse all the blocks except the one i am working on, and sort them by category.

Your request would be a great feature, and has been given some consideration by MIT, but so far they do not have a working solution. It might be forthcoming with the work currently being done on the blocky update.

Many developers layout their blocks in a single long column, others in several columns, one for each activity.

some extra features on how to arrange the block space would be a great plus.

Changing slightly subject, do you know if making a "search" in the block space there is a way to jump between occurrencies rather then just highlight these and keep looking amist the hundreds of blocks. Something similar to "highlight procedure"

Possibly mine are just shortcuts for not professional developers but I'm sure could be good features

thanks for feedback

See the browser extension section.

When you have too many blocks spread out over too large a surface area,
the Blocks Editor hits a complexity limit when it tries to generate a blocks.png file for the screen.

There are two main approaches to deal with this:

  • Start a Google Doc with a Table of Contents explaining your app, with sections for Design, Data, Code, including Downloaded Png images of all Events, Procedures, Globals, and with html cross-links for easy navigation. Such a doc becomes easier to read than a complete blocks image, because you have FIND, Next, PREV, back functionality, and you can add paragraphs of commentary around your code. This is my preferred life saver when doing a very large complex app. If you go this route, try to arrange your blocks geographically in a column matching the order of your Table of Contents, then do periodic Clean Up Blocks to pull them inline. This sometimes lowers the load on the Blocks Editor.
  • Reduce your block count:
    • Use parametrized procedures for common code
    • Use Media text files instead of big clumps of text blocks
    • Use generic blocks instead of repeating component event blocks
    • Encode repeating decision patterns into lookup tables loaded from Media csv text files (does your blocks image look like a box of combs?)
    • You don't need a component for every data instance. Reuse those components.
    • If you can't fit data into a ListView or List Picker, show a small subset of the data in an Arrangement and slide it across the larger list of data.
1 Like

@ABG Thanks for the FAQ.

Great help.

I did check the official tutorial not the FAQ.

Installed ai2helper form @Kevinkun and so far it is a great extention to move over the block space.

Well done to both

1 Like

@Kevinkun
Hi Kevin, lately every time I start a search, the extantion allign all blocks vertically. I tried once the "update outline" button and since the searches change my block space.

How are we suppose to reset this feature? Am'I doing something wrong? when I tested your app I remember only "jumping" from block to block

Cheers

collapse means?

Collapse the block. double click each block or right click the block and the pop up will show collapse option

1 Like

Will it prevent the hanging problem that is happening because of too much blocks?

By collapsing, you reduce the amount of blocks shown. The principle is to leave on only the one relevant to the part of the code we are working on. The block space will be almost empy and easier to navigate between blocks actually in use regardless where those are spreaded

1 Like

Can I prevent hanging of the mit ai2 block editor page if I use emulator?

if you read the original post of this extension, you will find:

2 Likes

Thanks @Kevinkun .

I need few minutes to understand where and how to ammend your code. I'm not familiar with Tampermonkey and extentions but manage at the end.