Useful Tricks for Memorizing Programming Stuff

General Web Dev
1

Recently I stumbled across an interesting question on StackOverflow. Given the following:

var func = function(){
  alert('hello!');
};

What’s the difference between invoking the function using func.apply(); and func.call();

As you can read from the answers, the main difference is that apply lets you invoke the function with arguments as an array, whereas call requires the parameters to be listed explicitly.

func.apply(valueForThis, arrayOfArgs)
func.call(valueForThis, arg1, arg2, ...)

And that got me thinking. Given all of the things that designers and developers are expected to know, which other mnemonics (techniques to aid the retention of information) do we use?

For example, I remember the order in which to apply CSS margin or padding shorthand properties, as being the same as the points of a compass: N (top), E (right), S (bottom), W (left).

Meaning:

margin-top:    1px;
margin-bottom: 2px;
margin-left:   3px;
margin-right:  4px;

may be written as:

margin: 1px 4px 2px 3px;

What about you? Have you got any tips or tricks you’d like to share. Or are mnemonics a waste of time and Google is your best friend?

This editorial will appear in this week’s issue of the SitePoint JavaScript Newsletter.

1 Like
2

Or think of it as clockwise :slight_smile: . Haven’t heard the compass trick; that’s nice.

What do you do for 3 value margins? E.g. 5px 10px 20px? ANything useful for that?

3

The old favourite for margins or padding with 4 values (margin T R B L):

The trouble with margins is ‘TRBL’ (pronounced trouble) (Top, Right, Bottom Left) spells ‘T R O U B L E’

2 Likes
4

Links, love hate, Lord Vader

5

I’m being dense. I don’t get it.

6

I’ve been puzzling it for a few minutes now and neither do I.

Maybe to do with

I’d like one for the haystack needle ↔ needle haystack that sends me to the docs

1 Like
7

http://stackoverflow.com/questions/7371732/why-does-foo-alink-foo-avisited-selector-override-ahover-aactive-s

Edit

http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states/

Edit again
http://www.sitepoint.com/web-foundations/pseudo-classes/

1 Like
8

Oh ok, thanks for the links, John.

I prefer the suggestion in the first comment that:

a:link {...}
a:visited {...}
a:hover {...}
a:active {...}

Could be remembered as LoVe HAndles

1 Like
9

Yeah, or the cynic’s version: LoVe, HA!

1 Like
10

I just came across another useful mnemonic for remembering how to write links in markdown: just think of a square circle.

That is to say the link text comes in square brackets, followed by the url in round (normal) brackets.

1 Like
11

Or a square peg in a round hole—easy for me to remember. :stuck_out_tongue:

12

padding; 10px 6px 4px
First is Top
Second is Left & Right
Third is Bottom

padding: 10px 6px
First is Top & Bottom
Second is Left & Right

1 value applies to all sides

4 values applies clockwise: Top, Right, Bottom Left

13

Yes, I know that (I know a tiny bit of CSS), but there is no useful memorizing tricks in your post :wink: . That was what I was asking about.

14

I actually avoided the 3-value margins and paddings because I didn’t have any useful way to memorize them so I always wrote 4 values instead. This changed after I envisioned the values going from top to bottom being represented with corners of a diamond:


I envision the successive values go from top to bottom referencing the corner/corners of a diamond on the same (imaginary) horizontal line.

And how to remember to start from the top? I imagine I go with the direction of gravity. Actually, the first value of any margin or padding, regardless whether it consists of 1, 2, 3 or 4 values, always represents the top!

For 4 values I simply imagine a clock!

Therefore, I think the people who decided on this part of CSS specs came up with the most natural and intuitive scheme :smile:

1 Like
15

That’s a neat trick; never had any issue memorizing it but trying to teach it to people is hard to give some memorization tips to help them :frowning: .

16

There’s also background-position, which may be tricky because it accepts two values but doesn’t follow the same rule as a 2-value margin. The first one is left offset and the second one is top offset - the other way round. For some time I thought the rules were the same but they are not. Here I have to think these are values of a 2-dimentional axis, where the convention is to first write the value on the x (horizontal) axis and then on the y (vertical) axis.

1 Like
17

My most useful trick is Google. Why waste brain cells on minute implementation details that can be looked up in two seconds online. Perhaps not for CSS and HTML – all that stuff I have just memorized because it is so simply but for programming the signature of functions and what not can always be found really quickly. At least that has been my own experience. The best method is just to do things over and over in my book. Repetition breeds memorization.

1 Like
18

“I do not carry such information in my mind since it is readily available in books.” - Albert Einstein

19

I’m the same way. Some details I memorize just through repetition of using it every day. Other details I need to look up every time. And as long as the Internet continues to be a thing, I think that’s a perfectly fine way work. :slight_smile:

20

A useful way to remember Markdown script is to save the syntax in your Private Notes Profile. After usage a few times the script becomes second nature.

######my two Satang