Cryogenic Dreams

-

Cryogenic Dreams

Today I am knackered. I've been doing a lot of hosting at work and I have a lot of other stuff going on (big news) and I have set myself one coding goal: watch a video with Codecademy about the Box Model in the Dev Tools.

WOW! I learned the most amazing thing in the Dev tools...

I can't BELIEVE that I didn't know this before...

So if you...:
  • Go to the dev tools
  • Select the HTML element
  • Use the + button in Styles to add a new style 
  • Edit the HTML selector to be a universal selector *
  • Enter in this following block of code:
* {
    border: 1px solid red !important;
}

This will add boxes around every single element on the website! Super helpful. I should also add if you are as neurodivergent as me (and as pedantic) it can be whatever you want - 10px double aquamarine etc. - but it might get harder to read. Also, you might not need the !important. But it is good to know it just in case...

Calculating Width

To calculate the width of an HTML element's box we add together: the content width, the padding (left + right), and the border (left + right).

Calculating Height

To calculate the height of an HTML box we calculate the sum of the content height, padding (top and bottom), and border (top and bottom).

Where Is The Margin?

Margin generates space only around the outside of an HTML element's box, and not on the inside of it. 

box-sizing: content-box; vs box-sizing: border-box;

content-box

"In this mode, the browser calculates the size of the element's boxes by figuring out the width and height of the content first. If we need to add padding or border, however wide or high those properties are THEY THEN GET ADDED TO THE WITH AND HEIGHT OF THE CONTENT. 

So this means that sometimes the box and appearance of an HTML element is wider or higher than we intend or expect it to be because the width and height here only mean the width and height of the stuff inside an HTML element which is just one part of the box and not the total sum of all the parts of the box."

border-box

"This changes the way the browser calculates the size of the box to account for any PADDING OR BORDER THICKNESS. Instead of applying width and height only to the content of an element with this new rule width and height of an element's box is calculated to include padding and border.

So if we make padding and border thicker then the browser will make the content grow or shrink to accommodate the padding and border." 

Thus: "Our HTML element will now act more predictably".

Cryogenic Dreams

Cryogenic Dreams is a song on an album that I love - "Kinetik" by Phutureprimitive. 

I first got into this artist and his music when I was living in Liverpool and when I got very very obsessed with dance. To be honest, I had been a dancer on and off for years, but at the age of 24 I got very into improvised and freestyle dance. God, I LOVED it. I miss it every day. 




Comments

Post a Comment

Popular posts from this blog

Hello World

-
Image
 Hello from Susanna Codes! Hi everyone,  My name is Susanna and I'm a 28-year-old aspiring software engineer from Brighton! As I type this, listening to music from "Le Fabuleux Destin d'Amelie Poulain" (it reminds me of home, in Luxembourg, where I am from - I'm missing home quite a lot lately!) and look forward to some Irish Cream tea in my afternoon break, I am thinking: How lucky I am that my amazing colleague Rosana helped me out with a plan for my software engineer journey (she directed me to the front-end first). How HTML and CSS would not have been my first languages of choice had I not been guided in this direction, as in my head they were seen as 'less-serious' langages. How done I am with what other people think of me and if other people see the 'front-end' as softer then so be it! Everyone has to start somewhere. I am so grateful to be on this journey, with Codecademy's Front-End Engineer Career Path.  Thank you to Async Brighton as ...
Read more

Yosemite

-
Image
Yosemite I'll never forget the first time I head the song Yosemite by Lana del Rey. I very nearly clicked away.  It was quite near the start of my Software Engineering journey, right near when I start learning the Front-End/Web Development. I was listening to Arcadia by LDR before, maybe twice, and then Blue Banisters came on. I nearly clicked away in the first 30 seconds but I forced myself to keep listening anyway.  I'll never forget how that song has made me feel. It became my song of 2022 even though I only discovered it in November. I can still listen to it every day and get that complete sense of wonder and of awe that I felt the first time that I heard it. That ending of the song is completely amazing, and it just completely just blows me away every time. "Withstanding all the time, changes, and seasons..." - LDR Concise Body Arrow Functions Why am I so bad at arrow functions? Whyyyyyyyyyyy?  Just kidding, I am beginning to get them. But why are they so hard? ...
Read more

Where To Hide A Star

-
Image
Where To Hide A Star I haven’t read this book but I just saw this title of a forthcoming children’s book on the train and so I wanted to write a blog post based off of this as well. The last six months have been… rewarding and fulfilling. I have managed to make all of my dreams come true and to defy expectations,  Sometimes the best place to hide is in plain sight and if you reread all of my blogs over the last six months (all 200 of them) you would know exactly what I’m struggling at work and what was going on. And why. But I’ve managed to overcome most of my challenges. Neurodiversity. Being very new in the field relative to the expectations of the job. Being in a new workplace environment. All stuff which I can handle and I am doing just fine. Because I am amazing and fabulous and I can do anything. I am loving the job. I am thriving. I am loving just getting on with it. I love my work. I am having massive breakthroughs. On Thursday I had what felt like the biggest breakthrough ...
Read more