Blockly is a library for online and mobile apps that provides a visual code editor. Variables, logical expressions, loops, and other code ideas are represented in the Blockly editor by interlocking graphical blocks. It is a visual and intuitive form of coding, so naturally, it becomes more fun! As this approach is visual, there is less scope for making errors because everything is right in front of your eyes. However, Blockly being a fairly new hero of the clan, there are some common issues you can face while using Blockly. We will be discussing a lot about this aspect of Blockly in today’s article but let’s look at what working with Blockly looks like first.
Some Key features
Blockly is a ready-made UI for constructing a visual language that generates syntactically correct user-generated code from the developer’s perspective. Blockly can export blocks to several popular programming languages, like PHP, Lua, Python, etc.
The Blockly editor consists of a toolbox for storing block types and a workspace for organizing blocks at their most basic level. In the “Get Started” docs, you can learn more about integrating Blockly.
After you’ve integrated Blockly into your app, you’ll need to make blocks for your users to code with and upload them to your Blockly toolbox. “Create Custom Blocks Overview” explains how to do that. Blockly is nothing more than a code generator. Choosing what to do with that code is at the heart of your program. You can get a “Built on Blockly” badge from the Attribution page if you want to let others know you used Blockly to make your app.
Also Read: Python vs JavaScript- The Competition Of The Giants!
Advantages of using Blockly
Blockly is one of a slew of visual programming environments on the market. Choosing which one to utilize in your app is a significant decision, so here are some of Blockly’s best features to help you decide:
Exportable Code
Users can easily convert their block-based applications to text-based programming by exporting them to standard programming languages.
Open Source
Blockly is a completely open-source programming code; you may fork it, alter it, and use it in your websites and Android apps.
Extensible
You can also add new blocks for your API or remove superfluous blocks and functionality to tailor Blockly to your needs.
Highly Capable
Blockly isn’t a toy at all. Complex programming tasks, such as computing standard deviation, can be done in a single block with the help of Blockly.
International
Blockly has been converted into over 40 languages, including Arabic and Hebrew right-to-left versions. So, you can use it in the language you are familiar with.
Common Blockly Issues
The following is a list of blunders that people usually make while programming on Blockly.
These are broad principles that people have learned while working with Blockly’s visual style, and they may or may not apply to all use cases or designs. Other options may be available. So here are some issues that users might face and how to avoid them. Every condition is different and may have its own set of trade-offs.
1. Border Style
The ‘Aqua’ design was popular in the 2000s, and every onscreen object was adorned with highlighting and shadows. The ‘Material Design’ design was popular in the 2010s, and every onscreen thing is reduced to a clean, flat, borderless shape.
When today’s graphic designers observe highlighting and shadows around each block in most block programming environments, they immediately remove these out-of-date embellishments. These ‘outdated decorations,’ are critical for differentiating connected blocks of the same color.
2. Nesting sub-stacks
‘C’-shaped blocks perpetually have a connector on the inside-top, although certain environments (e.g., Wonder Workshop) also have a connector on the inside-bottom (e.g., Blockly and Scratch). Because most statement blocks include both a top and bottom connector, some users are surprised to learn that statements can fit inside a ‘C’ without a bottom connector.
Once users have determined that one statement block fits inside a ‘C,’ they must then decide whether or not more than one statement will work. Some environments (e.g., Wonder Workshop and Scratch) nest the lower connection of the first statement into the bottom of the ‘C,’ whereas others leave a little gap (e.g., Blockly). There’s no indication that more blocks can be piled because of the tight nesting.
These two concerns have a negative interaction. The original statement’s connection is made clearer if an inside bottom connector is present (Wonder Workshop). However, this comes at the cost of finding a stack. The initial contact is not obvious if no inside bottom connector exists (Blockly), but stacking is discoverable.
When evaluated using Blockly, having no inner bottom connector and nesting the statement’s bottom connector (Scratch) had the worst discoverability. The original statement’s link is a less difficult barrier for people than discovering stacking. And the former is never forgotten once discovered, while the latter requires prodding.
Blockly experimented with both the Wonder Workshop and Scratch techniques until a rendering problem caused a little gap. Due to this defect, we are witnessing a significant improvement in user studies with Blockly.
3. Symmetric Connections
Blocky has two different kinds of connection, i.e., the horizontal puzzle shapes and the vertical stacking notches. The number of design elements in a good user interface should be kept to a minimum. As a result, many designers attempt to make both types of connections look the same.
As a result, new users are perplexed as they try to figure out how to twist blocks so that they can fit into inconsistent connections. Because Blockly makes programming parts visible and physical, it’s important to avoid accidentally recommending user activities that aren’t supported. Blockly uses a tight-fitting puzzle form for valuable connections and a visually noticeable alignment notch for statement stacking as a result.
4. Variable and function names
Location_X and location_x are not expected to be separate variables by inexperienced programmers. As a result, Blockly follows BASIC and HTML’s lead and makes variables and functions case-insensitive. Whereas Scratch takes a more delicate method, treating variable names as case-sensitive but not equality tests.
5. Global Variables
Inexperienced programmers have a hard time comprehending scope. As a result, Blockly takes Scratch’s lead and makes all variables global. The main disadvantage of global variables is that recursion is more difficult (one must push and pop variables onto a list). Still, it’s a programming technique that Blockly’s target users aren’t familiar with.
6. Instructions
Blockly is designed to be self-teaching, so there’s no requirement for a teacher or a lesson plan. The first version of Blockly contained instructions on each level to help with this. The majority of students do not read them. Thus, it is condensed into a single sentence, enlarged font, and highlighted with a yellow bubble.
With the instructions developed with modal popups, most people reflexively close the pop-ups without reading them, and then they become disoriented.
Finally, the option of generating pop-ups that are not resizable. They’re programmed to watch the student’s actions and only close when the student has completed the required task. These context-aware popups are difficult to program but extremely effective.
7. Code Ownership
Exercises designed to teach a specific subject frequently include incomplete solutions that the student must adjust to achieve the desired result. To enable this, Blockly built a class of non-editable, non-movable, and non-deletable blocks. These fill-in-the-blank tasks, on the other hand, were despised by students. They don’t feel like they’re in charge of the answer.
It’s more difficult to create free-form tasks that teach the same topics. Using the student’s solution for one exercise as the starting point for the following exercise has proven effective.
8. Workspace Layout
From left to right, there are two viable options for screen arrangement. The toolbar is on the left, the workspace is in the middle, and the output visualization is on the right in one way.
Moreover, the output visualization is on the left, the toolbar is in the middle, and the workspace is on the right in the other direction.
The workspace should stretch to fill the available screen space; users require as much programming space as possible because the user’s code and the output visualization are separated. On the other hand, the second layout provides more room for longer programs while maintaining all three sections near together.
It’s also sensible for users to think about the problem they’re trying to address first, then look at the tools available, and then begin programming.
Of course, for Arabic and Hebrew translations, the entire order must be flipped.
Sometimes, it may make sense for the toolbox to be above or below the workspace, such as utilizing a small number of simple blocks. In these circumstances, Blockly’s Toolbox enables horizontal scrolling, although it should be used with caution.
To Conclude
When it comes to programming, block-based programming is frequently used as a starting point. It is a gateway drug in teaching computer programming, as it gets students addicted before moving them on to more difficult tasks. It’s debatable how long this block-based programming time should last for people, although it should be brief if your purpose is to teach programming. In all, Blockly is a very fun approach to coding and we definitely think that if you are a programmer you should give it a shot!
Also Read: Top Emerging Programming Languages Which You Should Know!
