Blockly Developer Hiring Guide

Hiring Guide for Blockly Engineers

Ask the right questions to secure the right Blockly talent among an increasingly shrinking pool of talent.

Blockly is a visual programming language developed by Google in 2012, designed to make coding accessible and engaging for beginners. It uses graphical blocks to represent complex coding concepts, allowing users to drag-and-drop elements instead of writing code textually. Blockly is widely used in educational settings due to its user-friendly interface and ability to generate JavaScript, Python, PHP and Lua code. The software has been open-sourced by Google on GitHub since its inception for developers worldwide. Its influence can be seen in popular children's learning platforms like Scratch from the MIT Media Lab.

First 20 minutes

General Blockly knowledge and experience

The next 20 minutes of the interview should attempt to focus more specifically on the development questions used, and the level of depth and skill the engineer possesses.

What are shadow blocks in Blockly?

Shadow blocks in Blockly are blocks that are pre-filled in inputs. They can't be deleted but can be replaced. They are used to give a default value to an input.

How would you create a custom block in Blockly?

Creating a custom block in Blockly involves defining the block's structure and behavior. This is done using JavaScript. You need to specify the block's shape, color, fields, and connections. You also need to define what happens when the block is executed.

Describe the difference between Blockly and traditional text-based coding.

Traditional text-based coding involves writing lines of code in a specific programming language. Blockly, on the other hand, uses visual blocks that represent coding concepts. This makes it easier and more intuitive, especially for beginners, as it eliminates the need to remember syntax.

What are the main components of Blockly?

The main components of Blockly are Blocks, Workspace, Toolbox, and Code Generator. Blocks are the elements that are dragged and dropped to create applications. Workspace is the area where blocks are placed and manipulated. Toolbox is the container for blocks. Code Generator translates the blocks into syntactically correct code in a specified programming language.

How would you explain the concept of visual coding?

Visual coding is a method of programming where you manipulate program elements graphically rather than by specifying them textually. Blockly is a perfect example of visual coding where you drag and drop blocks to create an application.

The hiring guide has been successfully sent to your email address.
Oops! Something went wrong while submitting the form.

What youre looking for early-on

Has the candidate demonstrated a strong work ethic and reliability?

These qualities are important for meeting deadlines and delivering quality work. The candidate should be able to provide examples of their work ethic and reliability.

Does the candidate have the ability to learn and adapt?

Technology is constantly changing and evolving. A good candidate should show a willingness and ability to learn new technologies and adapt to changes.

Can the candidate work well within a team?

Software development often involves teamwork. The candidate should be able to demonstrate their ability to collaborate effectively with others.

Is the candidate able to solve problems logically and efficiently?

Problem-solving skills are important in software development. The candidate should be able to demonstrate their ability to solve complex problems using Blockly.

How well does the candidate communicate?

Good communication skills are crucial for understanding project requirements, collaborating with team members, and explaining complex concepts in a simple way.

Does the candidate exhibit a strong understanding of Blockly?

A qualified candidate should have a comprehensive understanding of Blockly, its features, functions, and how to use it effectively.

Next 20 minutes

Specific Blockly development questions

The next 20 minutes of the interview should attempt to focus more specifically on the development questions used, and the level of depth and skill the engineer possesses.

What are the steps to integrate Blockly into a web application?

To integrate Blockly into a web application, you need to include the Blockly JavaScript file in your HTML, create a div to hold the Blockly workspace, and initialize Blockly with a toolbox and workspace.

How would you translate Blockly code into another programming language?

Blockly has built-in functions to translate the blocks into JavaScript, Python, Lua, Dart, PHP, and other languages. This is done using the Blockly.Generator object.

What are mutators in Blockly and how would you use them?

Mutators are a Blockly feature that allows blocks to change their structure, typically by adding, removing, or rearranging value inputs or statement inputs. Mutators are used by creating a custom block with a mutator method.

How would you use variables in Blockly?

Variables in Blockly are created by dragging the 'create variable' block to the workspace. Once created, variables can be used in other blocks to store and manipulate data.

Describe the difference between a statement input and a value input in Blockly.

A statement input is used when a block is expected to contain a stack of blocks beneath it. A value input is used when a block is expected to attach another block that returns a value.

The hiring guide has been successfully sent to your email address.
Oops! Something went wrong while submitting the form.

The ideal back-end app developer

What you’re looking to see on the Blockly engineer at this point.

At this point, a skilled Blockly engineer should demonstrate strong problem-solving skills, proficiency with JavaScript (as Blockly is based on it), and a deep understanding of visual programming questions. Red flags include lack of familiarity with Blockly's library or difficulty in explaining complex coding solutions.

Digging deeper

Code questions

These will help you see the candidate's real-world development capabilities with Blockly.

What does the following code do?

{
  "type": "controls_if",
  "message0": "%1 then %2",
  "args0": [
    {
      "type": "input_value",
      "name": "IF0",
      "check": "Boolean"
    },
    {
      "type": "input_statement",
      "name": "DO0"
    }
  ]
}

This code defines a conditional 'if' block in Blockly. It takes a boolean input and executes a set of statements if the boolean is true.

What will be the output of this code?

{
  "type": "math_number",
  "message0": "%1",
  "args0": [
    {
      "type": "field_number",
      "name": "NUM",
      "value": 123
    }
  ]
}

This code defines a number block in Blockly with a default value of 123. The output will be the number 123.

What does this Blockly code do?

{
  "type": "lists_create_with",
  "message0": "create list with %1",
  "args0": [
    {
      "type": "input_value",
      "name": "ADD0",
      "check": "Array"
    }
  ]
}

This code defines a block that creates a list with the input values. The input should be an array.

What is the purpose of this code?

{
  "type": "controls_whileUntil",
  "message0": "repeat %1 %2",
  "args0": [
    {
      "type": "field_dropdown",
      "name": "MODE",
      "options": [
        [
          "while",
          "WHILE"
        ],
        [
          "until",
          "UNTIL"
        ]
      ]
    },
    {
      "type": "input_value",
      "name": "BOOL",
      "check": "Boolean"
    }
  ]
}

This code defines a 'while' or 'until' loop block in Blockly. It repeats a set of statements either while a condition is true or until a condition becomes true.

What does this code do?

{
  "type": "variables_get",
  "message0": "%1",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "variable"
    }
  ]
}

This code defines a block that gets the value of a variable. The name of the variable is 'variable'.

What will be the output of this code?

{
  "type": "math_arithmetic",
  "message0": "%1 %2 %3",
  "args0": [
    {
      "type": "input_value",
      "name": "A",
      "check": "Number"
    },
    {
      "type": "field_dropdown",
      "name": "OP",
      "options": [
        [
          "+",
          "ADD"
        ],
        [
          "-",
          "MINUS"
        ]
      ]
    },
    {
      "type": "input_value",
      "name": "B",
      "check": "Number"
    }
  ]
}

This code defines an arithmetic block in Blockly that performs addition or subtraction of two numbers. The output depends on the input numbers and the selected operation.

Wrap-up questions

Final candidate for Blockly role questions

The final few interview questions for a Blockly candidate should typically focus on a combination of technical skills, personal goals, growth potential, team dynamics, and company culture.

Describe a challenging Blockly project you've worked on and how you overcame the challenges.

In one project, I had to create a Blockly interface for a complex scientific simulation. The challenge was to represent complex mathematical equations using blocks. I overcame this by creating custom blocks for each equation and providing detailed tooltips and help URLs for each block.

How would you test and debug a Blockly application?

Testing and debugging a Blockly application involves running the generated code and checking for errors. The Blockly Developer Tools can also be used to inspect and modify the blocks in the workspace.

Describe how you would implement a complex algorithm using Blockly.

Implementing a complex algorithm in Blockly involves breaking down the algorithm into smaller parts, creating custom blocks for each part, and then combining these blocks in the correct order in the workspace.

What are the best practices for optimizing performance in Blockly?

Performance in Blockly can be optimized by minimizing the number of blocks in the workspace, disabling rendering during bulk operations, and using simple block shapes and colors.

How would you handle errors in Blockly?

Error handling in Blockly is done by checking the validity of the blocks. This can be done using the onchange function which is triggered whenever a change is made to the workspace.

The hiring guide has been successfully sent to your email address.
Oops! Something went wrong while submitting the form.

Blockly application related

Product Perfect's Blockly development capabilities

Beyond hiring for your Blockly engineering team, you may be in the market for additional help. Product Perfect provides seasoned expertise in Blockly projects, and can engage in multiple capacities.

Blockly Consultive assessments

Custom Blockly development projects

Hiring guides

Hiring guides at a higher level of coverage

Zooming out above a specific programming language, these other hiring guides may be helpful.

Back-end App Developer

Front-end Web Developer

Full Stack Developer (Java)

Full Stack Developer (.Net)

Full Stack Developer (MEAN)

Full Stack Developer (MERN)

DevOps Engineer

Database Engineer (AzureSQL)

Database Engineer (Oracle)

Database Engineer (General)

Solution Architect (.NET)

Solution Architect (Java)

Solution Architect (Ruby)

Solution Architect (Python)

AI Engineer (Python)

Sr. AI Engineer (Python)

AI Strategist (Python)

Business Intelligence Engineer

Systems Analyst

Mainframe Developer (COBOL)

Mainframe Developer (General)