DEV Community

Cover image for Make learning web dev easier with this trick
Juan F Gonzalez
Juan F Gonzalez

Posted on • Edited on • Originally published at blog.juanfgonzalez.me

Make learning web dev easier with this trick

Hello there friend.

In this post I want to tell you about a memory trick I've been using since my college days but haven't really put all the pieces together before.

I've been using in different situations to learn all kinds of stuff. From web dev, to psychology, neuroscience, social dynamics, body language, mindset, fitness, physical performance, health improvement and so on.

Lately, I came across a video that put words to those notions I have and helped me made the connections necessary so I can now explain that intuition to friends and others.

So let's get on with it shall we?

Let's do it

Intro

Now suppose you are on your web development journey and you want to further improve your skills in creating better looking layouts for websites.

You already know well your HTML and CSS chops and you want to take things up notch.

You can look into a CSS preprocessor like SASS or Stylus. Or you can check out a styling framework like Bootstrap or Bulma.

Or you might want to go more into the spec and strengthen your Flexbox or Grid muscles.

Regardless of what you decide to use, the process is going to be very similar.

You read the docs or watch a tutorial, see how it works, get acquainted with the basics and might even start making some things on your own to go from "passive learning" to a more "active" one.

But of course, you have a pretty limited base of knowledge to start making things with so you constantly go back to the docs or to that super-duper tutorial you learned from and re-watch what you have missed or forgot about.

And this happens even to the best of us when we want to recall something we don't use often or we did some time ago and never had to pick up again.

We may miss something or misplace the order of variables or even change the name of functions altogether.

"What was that function for separating arrays called? Slice? Splice? Split?.... Hmm..."

Or it happens when you're using Markdown syntax and can't remember how is it that a link can be embedded within the text.

"Was it brackets first and then parentheses or the other way around?"

"Hmm let's see… (this is a link)[https://twitter.com]"

"... Dammit! that didn't work… Oh well"

That can certainly be frustrating when you encounter some things that it doesn't matter how many times you've used them in the past. You can't remember how is it properly used…

(Yeah, I'm looking at you RegEx...😒)

Definitely some subjects are more involved than others, but it feels like some that are supposedly "easy" just come and go and don't really stick into the mind.

And then when you want to recall what you learned to apply it in a project or somewhere else, your brain just gives you a 404 "topic not found" error.

...

Don't you just wish you could download the subject into your brain and be able to start using it?

You know, kind of like in The Matrix.

I know kung fu

While we can't do that just yet, there's something we can do to approximate that effect.

But before we do that, let's look at why we have difficulty remembering in the first place.

The inner workings of "working memory"

Working memory is a temporary storage that we have in the brain and it allows us to store and manipulate information that we are working with in the moment.

For instance, when your doing mental math you can "see" the numbers in your mind and use them to come up with the result of the calculation.

Or you also use it when someone tells you a phone number and you remember it until you write it down.

Think about it as a temporal storage that you use to hold information relevant to the problem(s) that you are dealing with.

Said it in another way, it's a "hot" data storage. Whereas your long-term memory is the "cold" data storage.

What's interesting about this is that working memory is a "multi-compartment" system. It can hold different types of data that we may need, not just numbers.

Working memory model

Source

It has a section dedicated with the "visual side" which is what allows to see things in the "mind's eye". Another section is dedicated to the "auditory side" which some people use to remember info by repeating it to themselves (like a phone number or an important history date).

And it has a "central executive" part which is the responsible for coordinating the processes of the other sections and communicating with long-term memory (the "cold storage" remember?)

Now, this storage is usually limited to about 7 +/-2 units or digits. This is one of the reasons that we can remember cellphone numbers but not something like a credit card number.

The way you can sidestep this limitation is by grouping together digits or pieces of information into single units.

Using this "chunking" process, you no longer remember a number like 300358249 digit by digit but instead remember it like: 300, 358, 249.

This way we've only used 3 units of memory instead of nine!

Mindblown

And we can take it a step further by associating groups of numbers with an image or object and then we just hold 3 images in memory which we use to retrieve the entire number in order.

This is one of the ways that memory masters use to remember seemingly "impossible" things. (Like, you know, the first 100 digits of Pi.)

What's awesome about this is that you are basically compressing information that you can save for future use and when it's time to use it, you take it back and extract the contents.

It's like using a zip folder.

Win Zip

Now, knowing how this "memory compression" thing works, let's see how you can take advantage of it to store important concepts in your memory while on your learning process.

The memory trick explained

The trick is essentially to create your own developer cheat-sheets.

Ta-da!

Ta-da

But, bear with me on this.

You might think "why would I need to make another JavaScript cheat-sheet when there are tons out there in the internet?"

There are a couple of reasons why that you might not be aware of right now, so allow me to tell you.

You gotta make that cheat-sheet in a sheet of paper about the A4 size. Everything that you can fit in there is the most relevant stuff that you need to know or have a hard time remembering.

We can go a step further with the "compressing information" process and use all sorts of strategies like mnemonics, small drawings, key facts, rhymes and such to take concepts and reduce them to a small portion and fit them into the sheet of paper.

By doing this, you're "actively" engaging with the material and getting your brain to process it. Doing it well enough to reduce the nonessential and stick with the important pieces.

Later, creatively turn those pieces into a mental representation that you can sketch or write and fit into the paper.

You can also use location as a way to remember the concepts better.
(e.g., put the mnemonics or images in the order you learned them so you know what goes after what and even create some form of storytelling between all of them.)

And by using a smart layout, or other creative techniques, you can make the sheet memorable enough to put it in your visual memory.

So the very process of creating the cheat-sheets themselves is what will help you commit the information to memory, organize your thoughts, and greatly enhance recall in the needed moment.

A great example

To show you a little more of what I mean, check out this very nice cheat-sheet about Git from the great folks at Egghead.

Egghead GitMistakes CheatSheet

It has some of the techniques I've mentioned for representing concepts and helping remember the syntax of some of it's commands.

The thing with cheat-sheets is that what other person used probably won't make much sense to you and viceversa.

If a person prefers sketching things and you lean more towards writing things in a specific layout, then your cheat-sheet would help others who prefer actual text instead of images.

Conclusion

Using this memory trick you can take pretty much any subject and git commit it to memory ;)

It doesn't matter if the subject is something like syntax of Sass mixins,

or JS array methods…

or GraphQL fragments…

or React hooks...

or anything else.

You can get creative and use it to learn all kinds of subjects, even those who don't lend themselves too well to being restricted to a sheet of paper.

All the things!


So there you have it! The memory trick to make your web development learning process much easier. Try it out and let me know how it works for you.

You can also adapt it to your learning needs and see what you can change and improve after using it for a while.

That's it for this post. Hope it's been useful and gave you a new tool to keep going on your learning journey. Making things a little bit better each time and keep improving on what is possible.

As always, thanks a lot for your time. Take care and see you in the next one.

goodbye

Top comments (0)