Development

3 Core Building Blocks of Any Development Tool or Framework

Over the course of my career, I have learned a variety of tools. I started out learning Adobe Premiere and Final Cut Studio. I then got into web development and learned Flash, after that, I picked up eLearning tools like Storyline, Captivate and others. I then go into more advanced HTML, CSS, and JavaScript and even picked iOS development with Xcode.

I love learning tools, I love learning what they can do and what I can build with each tool. Even more so I love teaching how to use tools (My main reason for this website). Not trying to brag here, but mostly make a point that I have learned a lot of tools and I have tried to look for commonalities across all these various tools and even think about my process of learning a new tool.

I have come across 3 core building blocks for learning any new tool or even coding framework. Now there may be some that argue that I am not using the terms correctly depending on the languages or tool or that I am being too general which I fully understand, but this is how I understand it and how I have explained it many times at various conferences that have seemed to help other people.

I see 3 core areas for any tool or framework. Those 3 core areas are elements, style, and behavior. Let me quickly explain each core areas and if you want more details, check out the video below.

Elements

Elements or objects are things like shapes, images, buttons, switches, text labels and things that are given to you from the tool or framework that you are using. If you are using Bootstrap, for example, Bootstrap comes with default buttons, accordions and other things that help you build out your websites.

If you are using HTML, it has default tags like paragraph tags, hyperlinks, images and other things that help you build out your webpage. Each element (depending on the tool or framework) has certain attributes and styling out of the box. So when learning a new tool, the first thing I look for is what elements that tool, framework or anything else gives me and how I can use those elements to piece together the final product.

Style

Once you have an element on stage, each element allows you to change the styling of that element. For example in PowerPoint, you can create a simple shape. That shape has a default color, it also has a default width and height if you don't drag it out yourself.

These are called properties, color, width, height, position. Each property has a value. For example color could be red, height could be 60 and the width could be 100. Now we can leave those properties how they are default or we could go in and change them.

So once I learn what elements I can work with, I start to learn what style properties and values I can change for that element. I give a great example in the video about casting an actor for a movie and then adding costumes and makeup to get the element to match the story or the app that I am creating. (Yes I said story, watch the video to get more details about that.)

Behavior

Working with the elements to compose your webpage or app is one part, styling the elements to match your brand is another but there is one more missing link and that is behavior. We make the story come to life when we tell our elements what to do and when to do them. This to me is like scripting a movie. We tell the actors (elements) how to behave in certain situations, we give them commands of when to move and how to react.

We do the same thing in development when we are developing we tell the element how to behave and when to react and how to react. This could really be the most complex part of developing but it is also the most fun when things start to come to life. (Yes, I am a nerd and I get giddy about development, there I said it).

Conclusion

The art of development in any tool that you use comes down to these 3 things, figured out which elements you have to work with, style those elements to match your story or your brand and then tell those elements what to do with behavior commands and even telling them how to react in certain situations.

This is why I wanted to start out my "Learn to Speak Code" series with this foundation. Once you understand this, it helps in whatever tool you use or whatever coding languages you learn.

I also created this video sharing more of my thoughts about this subject. Check it out here: