Skip to content

Instantly share code, notes, and snippets.

@ttarlov
Last active November 24, 2019 21:48
Show Gist options
  • Save ttarlov/a2b4c9bce9f820704490227d33b2094d to your computer and use it in GitHub Desktop.
Save ttarlov/a2b4c9bce9f820704490227d33b2094d to your computer and use it in GitHub Desktop.
Border box. Summary after reading 3 blog posts

List of the 3 Blog posts on CSS Border Box Model

My Responses to the blog post:

  • What did you learn?

These there blog posts / articles are quote different from each other and for me one build on top of the other. I learned about the history of border-box method and how it was originally created and used before responsive/fluid layout became the norm. It’s a concept that is a bit hard to understand at first but with some practice and use of metaphor it’s actually a pretty easy thing to understand.

  • How did each author approach the subject?

The first article makes a great visual and metaphoric comparison of border-box model to something in a physical world. The idea of comparing CSS border-box model to how neighbourhoods are layed out is a genius way of explaining an abstract concept. The other two articles go a bit further into technical details. For me the first article was a great starting point and the other two built on top of it very nicely giving a bit more technical and historical background to the property.

  • Did they disagree?

I did not find any disagreement per say. The first article is very light on the technical side of the property and is more focused on explaining the border-box model in a metaphorical way. The other two articles are a lot more technical and give a great explanation about the property to somebody that is already somewhat familiar with it.

  • Did any make more sense to you than the others? Why?

The first article is for sure the easiest to understand. It’s short and uses great visual examples. I am a visual person and I know for a fact that every time I have to adjust padding or margin on an element I will now always think of it as putting trees and moving a lawn around the content. The other two articles are technical but still pretty easy to follow. However I can see that it might be a bit more difficult to start with the Tree House article before reading the first one.

@whanchope
Copy link

Keybase proof

I hereby claim:

  • I am whanchope on github.
  • I am whanchope (https://keybase.io/whanchope) on keybase.
  • I have a public key ASAvmcs3DC8Bm1L2DCJc8PlVv8wU8d_QfvsSZR6_xeDOCgo

To claim this, I am signing this object:

{
  "body": {
    "key": {
      "eldest_kid": "01202f99cb370c2f019b52f60c225cf0f955bfcc14f1dfd07efb12651ebfc5e0ce0a0a",
      "host": "keybase.io",
      "kid": "01202f99cb370c2f019b52f60c225cf0f955bfcc14f1dfd07efb12651ebfc5e0ce0a0a",
      "uid": "3e58ab600dc555c2e673f3a2f9514619",
      "username": "whanchope"
    },
    "merkle_root": {
      "ctime": 1574626176,
      "hash": "8e49505e91e135c47414285a005f04e0309023228e6ec2981e617c808c539801ba74b7a5c1cf02128f91c622c1db08b3ebad6ba3ea14586dddf75aa2f0d615a6",
      "hash_meta": "fa6c86d522ce86adefb6c2807ef7a82827e664f4896537e17e1995f1c83c4643",
      "seqno": 10750808
    },
    "service": {
      "entropy": "ooaOELJ+ymk3MOJh/T+hPCfs",
      "name": "github",
      "username": "whanchope"
    },
    "type": "web_service_binding",
    "version": 2
  },
  "client": {
    "name": "keybase.io go client",
    "version": "5.0.0"
  },
  "ctime": 1574626174,
  "expire_in": 504576000,
  "prev": "32e881c55ef321728a0ca7e3a4133de4699753a39dfa7fb77d0b3a49813189cf",
  "seqno": 7,
  "tag": "signature"
}

with the key ASAvmcs3DC8Bm1L2DCJc8PlVv8wU8d_QfvsSZR6_xeDOCgo, yielding the signature:

hKRib2R5hqhkZXRhY2hlZMOpaGFzaF90eXBlCqNrZXnEIwEgL5nLNwwvAZtS9gwiXPD5Vb/MFPHf0H77EmUev8XgzgoKp3BheWxvYWTESpcCB8QgMuiBxV7zIXKKDKfjpBM95GmXU6Od+n+3fQs6SYExic/EIPNGBeb1XG7/V+L0mSLiRU+oYMYFMeLSp8Pxm8VEK9PAAgHCo3NpZ8RAOGGpF9VflsfoR9c0bA3avBGfCUOOSShgWByC5COJerDloMI2hohgzuTYkMf30TVBqFZ53X8ash86uMNgY+M+CKhzaWdfdHlwZSCkaGFzaIKkdHlwZQildmFsdWXEIFVrT4YPmuyOFj8Je0/BNwj/yJ5ezdPNMk91tHPn4Ws0o3RhZ80CAqd2ZXJzaW9uAQ==

And finally, I am proving ownership of the github account by posting this as a gist.

My publicly-auditable identity:

https://keybase.io/whanchope

From the command line:

Consider the keybase command line program.

# look me up
keybase id whanchope

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment