KEA CHEAT SHEET

Education

JOB

(Just click the url to get the latest student positions in Copenhagen)

STUDENT DISCOUNTS

OTHER

  • Data Recovery
    We've all been there - the external Hard Drive or USB behaves stranges or all files are lost. Fear not because there are some tools to recover deleted / lost files!
    I've written a little guide Here how to recover data from Hard Drives or USBs. If you know me, you can also ask me for help! 🙂

RECOMMENDED HTML STRUCTURE

<html>
  <!--Only the head and body elements are supposed to be direct descendants of the 
  html element. All others should be descendants of either the head or body-->

<head>
    <!--The head element must be a direct descendant of the html element-->
    <!--The head element is a very busy place for most websites, so we've created
    a tutorial to walk you through the different elements and tasks accomplished
    in the head element. You can find it at the following address:
    http://html.com/document/metadata/ -->
    <title>Your Webpage Title Goes Here</title>
</head>

<body>
    <!--The body element contains the full visible content of the web page-->
    <header>
        <!--The header typically includes your logo, tagline, and may contain a nav 
      element-->
        <nav>
            <!--The nav element isn't used for every single link but for navigational 
        menus-->
        </nav>
    </header>
    <main>
        <!--The main element cannot be used inside of anything other than the body 
      element. It is intended to hold the main content of the page.-->
        <nav>
            <!--You can use a nav element just about anywhere-->
        </nav>
        <article>
            <!--If your web page contains a blog post or news article it makes sense 
        to wrap the whole article in article tags-->
            <aside>
                <!--The aside tag can be used within an article or outside of it. It 
          is used to mark content that is related but not central to the main 
          content of the page-->
            </aside>
            <section>
                <!--Sections are used to seperate major parts of an element, such as 
          chapters of an HTML ebook, or to cordone off the comments section 
          from the rest of the main element-->
            </section>
            <address>
          <!--An address element inside of an article element is used to provide 
          contact info for the author of the article-->
        </address>
        </article>
        <aside>
            <!--The aside element would also be used to mark a sidebar if used 
        outside of the main element-->
            <section>
                <!--Within a sidebar you could use section elements to identify the 
          different parts of the sidebar. For example, you could put adds in 
          one section, related posts in a second section, and a newsletter 
          signup form in a third section element.-->
            </section>
        </aside>
    </main>
    <footer>
        <!--The footer typically contains links to things like About Us, Privacy 
      Policy, Contact Us and so forth. It may also contain a nav, address, 
      section, or aside element.-->
        <address>
        <!--Put an address element in the footer and you're indicating that 
        the contact info within the element is for the owner of the website 
        rather than the author of the article.-->
      </address>
    </footer>
</body>
</html>

Source: http://html.com/document/

BOOTSTRAP MEDIA QUERIES BREAKPOINTS

Bootstrap is one of the most used design layout for Websites - so it wouldn't be wrong to use their breakpoints as a standard.

/* Extra small devices (portrait phones, less than 576px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { ... }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

Source: https://v4-alpha.getbootstrap.com/layout/overview/#responsive-breakpoints

CORRECT CSS STRUCTURE

As for CSS, there is no "correct" existing structure, which tells you to start with body and end with footer. However, remember about the "cascading" (CSS works from top to bottom). Moreover, try to use an external stylesheet over embedded and inline styling.

Source: http://www.htmlhelp.com/reference/css/structure.html

JAVASCRIPT BOOLEANS VALUES (if statements)

The following values result in false with a Boolean() function or if() statement.

toBoolean conversions table

JavaScript FETCH EXAMPLE

fetch("www.myWebsite.com/fetchURL").then(result => result.json()).then(data => displayItem(data));

displayItem(data){
	const template = document.querySelector("#template").content;
        const container = document.querySelector("#container");
	
	data.forEach(elem =>{
		let clone = template.cloneNode(true);
                clone.firstElementChild.dataset.id = elem.id;
                clone.querySelector(".title").textContent = elem.title;
		clone.querySelector(".price").textContent = elem.price;
		...
		...		
		container.appendChild(clone);
	});
}

JavaScript axios

If, however, you have to support multiple browser (> IE11), want more security and don't want to be bothered with the headers, axios is a good alternative.

Cheat sheet: https://kapeli.com/cheat_sheets/Axios.docset/Contents/Resources/Documents/index

Docs: https://github.com/axios/axios

 //Fetch
    axios.get(url + id).then(res => {
      this.setState({
        post: res.data
      });
      console.log(res);
    });




CSS GRID EXAMPLE

#container{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 1fr; /* keeps all grid boxes same height, else remove */
    grid-gap: 50px;
}

#container > .first-box{
	grid-column: span 3;
}

#container > .second-box{
	grid-column: 3 / 6;
}

JavaScript POSITIONS AND SIZES

You can use one of these properties in order to get the position or size value of a mouse, the window or elements.

Note: for size values consider what is included and what not.

Warning: document.querySelector("div").style.height; only returns a value if it has been previously set with Javascript! (not CSS) use .getBoundingClientRect() instead.

Javascript size position border margin padding scroll bar

Full document: https://www.advena.me/advena/wp-content/uploads/2018/09/Javascript-position-and-sizes.pdf

 

JavaScript everyday commands

Everyday commands used for Frontend Development JavaScript

Full Document: https://www.advena.me/advena/wp-content/uploads/2018/09/JavaScript-everyday-commands.pdf

Math random range round up

Generate a random number within a specific range and return whole, non-decimal numbers.

Math.floor(Math.random() * (max - min + 1)) + min;

CSS COMMENT STYLEGUIDE

https://github.com/necolas/idiomatic-css#comments

 

GIT MOST WANTED COMMANDS

Revert to the latest commit ignoring any changes made since then:

git reset --hard HEAD

Make .gitignore ignore again

git rm -r --cached .

git add .

git commit -m "fixed untracked files"