In case you haven’t noticed, my tutorials on web development do one thing differently than other coding tutorials:
They focus the entire lesson around analogies and visual representation of coding concepts.
But, I began to ask myself: what makes this so different from the YouTube videos that briefly mention an analogy in a 10 minute video? Or a Quora answer that uses an analogy and receives most of the upvotes?
The answer, I decided, is interactivity. Your ability to manipulate and interact with the analogies should make it much easier to learn, rather than a brief mention here or there.
I have recently begun adding interactive modules to new posts, but I also wanted to add a new option: code blocks that represent your code with an analogy. So that is why I created the Analogy Editor.
What the heck is an “Analogy Editor”?
The Analogy Editor allows you to type in some code, click the “Run” button, and then get an instant representation of that code through an analogy. Since I have now written 40+ analogy posts… that representation will change based on whichever CSS or JavaScript concept is in the tutorial.
I am using repl.it, an embeddable code editor that allows you to interact directly within this blog post.
My normal tutorials show how a coding principle, in general, is related to a real-world phenomenon. These live coding environments will show how your code can be represented.
Our First Example
The code block below references my tutorial on CSS positioning, called “CSS Positioning Explained by Building An Ice Cream Sundae“.
Here’s a quick summary. The tutorial covers the following position properties:
- Static
- Relative
- Fixed
- Absolute
It does NOT cover flexbox and grid. Those are separate systems covered in other tutorials.
Position static is kind of like the ice cream scoops. It is block-like, and does not have any real special rules besides the fact that it takes up space.
Position relative is kind of like a glass. It still maintains the flow of the rest of the DOM elements, but also sets the container for position absolute elements.
Position fixed is like the whipped cream. No matter what, it always sticks in place, usually at the top, left, right or borrom. It is outside of the flow of the rest of the DOM elements due to its special rules.
Position absolute is like the cherries. They are outside of the flow of the main DOM elements, and can be placed in specific spots within their container. They do not interrupt the flow of other elements. Their container is either the body of the page or the nearest parent element with position relative or absolute.
Yes, you can have position absolute elements within each other, but this is often a sign of hacky CSS. So I do not recommend it for beginners.
I still recommend that you read the whole guide, but that provides an overview.
The Goal of The Analogy Editor
One of the toughest parts of learning front-end web development is the fact that you usually need to be applying multiple concepts that you do not really understand at the same time. It’s hard to isolate one individual principle and learn it, without relying on a few other principles that you hardly understand. It happens to everyone!
So, the Analogy Editor will focus on just one concept at a time in this case. In the future, perhaps you will be able to toggle the concept that you would like to explore. But, this example will just cover CSS positioning.
Additionally, I added some example code to give you a quick demonstration. You will need to delete the example HTML and add HTML from your own project in the suggested space to make it work.
One final note: So far, this can only cover divs that are 1-2 levels deeper than the top level div called userIn. That means you can’t add layers and layers of divs. I chose to do it this way so that beginners do not make it too complicated. You should start by understanding two levels of children, then start going deeper from there.
Try Out The Analogy Editor
Here is the interactive version of CSS positioning.
Instructions On How To Use It
By default, the HTML file is shown. If you would like to switch between the HTML and CSS file, drag the file icon on the side. There is also some default CSS included that you will need to remove.
If you want to see the live version of your code, click the “Run” button in the bottom right.
If you want to toggle between the visual representations on the first or second level of divs in your code, use the toggle in the bottom right.
What Comes Next?
Right now, this is a minimum viable product, or an MVP. In the future, it would make the most sense to integrate these concepts into a normal development environment. That could mean a plugin for a text editor like Sublime Text or Atom. It could even be a Chrome or Chrome Dev Tools extension that would be used while you are testing out your front-end.
But, in the immediate future, I plan on building more individual analogy editors to allow self-taught developers to interact with one concept at a time. Upcoming topics will probably include: the DOM, objects/arrays and the display property from CSS.
