Tekniker för att Centrera saker

Varje

https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
https://css-tricks.com/almanac/properties/a/align-content/
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Centrera saker i flexbox. Du sätter display å justify å sådant. Som jag skrivit nedan i en flexboxcontainer. Då kommer Sakerna som finns i den diven att centreras.

.flexboxcontainer{
width: 400px;
height: 400px;
display: flex;
flex-direction: row; /*Du kan välja mellan row och column */
justify-content: center;
align-items: center;
}

.box-inside-flexboxcontainer {
}

Horizontell centrering

Text-align

Text-align-tekniken är klassisk. Först skapar du en div-container. Denna container behöver ha en specificerad width för att det ska funka. Annars kommer den bara vara så står som innehållet i diven, å då går det ju inte att centrera.

Sedan behöver vi en div som ska centreras. Vi ger den en längd å bredd. Det viktigaste här är att komma ihåg att en div inte är en text, å en div är ett block-element, inte ett inline-element. Därför måste vi förvandla diven till ett inline-blocks-element. Det gör vi med display: inline-block. Då får diven inline-liknande egenskaper samtidigt som den är typ som ett block.

.container {
width: 500px;
text-align: center;
}

.box {
width: 100px;
height: 100px;
display: inline-block;
}

Margin-auto-tekniken

Det går helt enkelt ut på att du sätter marginalen på auto i innerdiven. Då justerar den sig automatiskt och blir därmed centrerad.

.container {
width: 500px;
}

.box {
width: 100px;
height: 100px;
margin-left: auto;
margin-right: auto;
}

Position-absolute-tekniken

Den här tekniken fungerar genom att sätta position absolute, å sedan sätta den på 50%. Detta innebär alltså att positionen är i mitten. Men eftersom diven i det här exemplet är 100px stor så innebär det att det är den vänstra sidan som är precis 50% in i container-diven. För att den ska bli helt centrerad måste vi därför justera marginalen med -50px (alltså hälften av diven storlek). Då blir den helt centrerad.

.container {
width: 500px;
}

.box {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
margin-left: -50px;
}

Vertical centering

Position-absolute-tekniken

Denna teknik är besläktad med tekniken ovan med samma namn. Men det finns några viktiga skillnader. För att innerdiven inte ska flyga iväg åt tjotahejti så måste vi göra .container till position: relative. Annars så flyger innerdiven upp å lägger sig med en margin på -50px från body. Å det vill vi inte.

.container {
width: 500px;
position: relative;
}

.box {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -50px;
}

HTML5

I html5 har ett flertal saker förenklats.

Exempel:
attributet type behövs inte längre. Här är ett exempel på skillnader.

Här är med html5.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Page Title</title>
   <link rel="stylesheet" href="style.css">
   <script src="script.js"></script>
</head>
<body>
... <!-- The rest is content -->
</body>
</html>

Här är tidigare html.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
 <head>
    <meta http-equiv="content-type" content="text/html" charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="script.js"></script>
 </head>
<body>
...
</body>
</html>

TYPE behövs inte längre, varken när man länkar script eller css.

DOCTYPE
Doctype är bra att skriva ut eftersom en modern webbläsare har flera olika rendering-engines beroende på html-versionen, så att tydligt deklarera vilken version som används kan underlätta arbetet för webb-läsaren.

meta charset=”utf-8
Innebär en säkerhetsrisk om den inte skrivs ut. Om det inte skrivs ut kan Explorer tolka det som att sidan är skriven i utf-7, vilket gör att harmlös användar-input blir html-injektioner. charset ska deklareras inom de första 500-byten. Här kan du läsa mer om riskerna.

Här är en bra bild som beskriver de nya html5-taggarna.
position av html5-taggar

Grundläggande JavaScript

Inbyggda funktioner/methods

Manipulera stringar
.split() – Delar upp en sträng och lägger den i en array.
.splice() – Lägg till eller ta bort element, eller byt ut element i en array.
.reverse();
.substr(); //Tar två parametrar. Den första är var beskäringen ska börja. Den andra parametern specificerar hur många karaktärer som ska beskäras. Den andra parametern är valfri.
.substring(); //Detta är den äldre versionen av substr(); och gör samma sak. Skillnaden är den andra parametern. Substrings andra parameter är positionen efter den sista karaktären som du vill åt. Den andra parametern är valfri.
.sort();
.replace();
.indexOf(); //Används för att söka igenom en string.
.lastIndexOf(); //Samma som indexOf fast den börjar söka bakifrån.
.charAt(); //Har en parameter, som tar indexnumret av av en viss karaktär och returerar karaktären.

var string = "Har är min string";
string.charAt(0);//returerar H

charCodeAt(); //Samma som charAt, med skillnaden att den returerar ASCII numret på karaktären.
trim(); //Tar bort överflödigt whitespace i början och slutet av en string.

Manipulera nummer
.toFixed(1); – Antalet decimaler ett tal ska ha.
.parseInt() – Denna funktion gör om stringar till tal. Det är viktigt att komma ihåg att den tar två argument, varav det andra argumentet definerar vilket bas talet ska vara i. För att ovandla talet till base-10 så ska man alltså lägga till 10. Exempel:

parseInt("5", 10); 

typeof //För att se vad för typ av element något är. Om det är boolean, string etc.
filter(); Filtrerar bort element från en array.

Iterative Methods – loopa utan att använda loop
Dessa methods används för att loopa igenom arrays, utan att använda en loop. Dessa kallas därför för Iterative Methods. Det finns fem Iterative Methods.
every(); Går igenom en array och avgör om ett visst condition är sant eller falskt. Till exempel.

var numbers = [1,2,3,4,5];
function isLessThan3(value, index, array){
var returnValue = false;
if (value < 3){
returnValue = true;
 }
return returnValue;
}

var trueOrFalse = numbers.every(isLessThan3);
console.log(trueOrFalse); //Returns false. 

Eftersom the condition som finns i if-statementet är falskt. value är inte mindre än tre, eftersom värderna 4 och 5 finns där. Och de är inte mindre än tre. every() är alltså en method som avgör om varje del i en array är sann i förhållande till condition-statementet. Om du däremot skapar samma funktion, men använder det för some(); så kommer det att returera true, eftersom några av values är mindre än tre, vilket gör påståendet till sant.
some();

every() och some() är nyttiga, men du kan inte få ut någonting mer från dom än true och false. Det är därför som filter är så bra.

filter();
Filter gör precis som every() och some() och iterate genom en array. Men varje gång som påståendet är sant så läggs det värdet till i en ny array.

map(); är en väldigt användbar funktion. Den används för att söka igenom en array och göra någonting.

var array = [1,2,3,4,5];
//Om jag nu vill lägga till 1 på varje element inom arrayen så kan jag göra det med map, såhär:
var array = array.map(function(val){
  return val+1;
});
console.log(array); //[2,3,4,5,6]

reduce() – lägger ihop samtliga tal i en array till ett tal.

var array = [4,5,6,7,8];
var singleVal = 0;

var singleVal = array.reduce(function(previousVal, currentVal){
  return previousVal+currentVal; //returns 30
});

filter() – filter filtrerar bort alla delar i en array. Vad som ska filtereras bort defineras i funktionen. Exempel:

var array = [1,2,3,4,5,6,7,8,9,10];
array = array.filter(function(val){
  return val <= 5; //filtrerar bort alla tal som över över 5
});

concat(); används för att slå ihop två arrayer.

var array = [1,2,3];
var concatMe = [4,5,6];
array = array.concat(concatMe);

 
Matematik-methods
Det finns många methods rörande matematik.
Math.PI; Get PI
Math.Ceil(2.45); Rundar upp
Math.floor(2.45); Rundar ner
Math.round(2.45); Rundar av mot närmsta heltal

 

Object

Object i Javascript är som en dictionary i Python. Ordet Dictionary beskriver bättre vad det handlar om. Ett object består av en key och en value.
var person = {
namn: “Philip”,
age: “34”
}

 

Listor/arrays

Såhär skapar man en lista.


//Skapa en lista
var lista = ["namn", "djur", "nummer", 9, 8, 10000]

//Sortera en lista
lista.sort();

//Detta behövs för att listan skall sortera nummer som nummer och inte som strängar.
list.sort(function(a,b) {
return (+a) – (+b);
});

//Vänd listan bakochfram
lista.reverse()

//Ta ut delar av en lista och gör om den till en egen lista.
sliced = list.slice(0, 2) //Den första parametern är var slicen börjar, och den andra parametern (2) är hur många objekt ur lista du vill ta ut.

//För att ta reda på om en ett visst objekt finns i en array, gör såhär.
list.indexOf(“namn”); //Svaret blir positionen i listan, i detta fall 0

//Push och pop.
//För att lägga till i en array:
myArray.push([“detta laggs till langs bak i listan”]);

//För att ta bort det sista elementet i en array
myArray.pop();

//Shift och unshift
//För att ta bort det första elementet i en array
myArray.shift();
//För att lägga till det första elementet i en array
myArray.unshift();

 

Kopiera

Gör följande för att kopiera en lista.

var lista = ["Hej", "apa", 6, 7];

kopiaAvLista = lista.concat();

Nu är kopiaAvLista en kopia av listan. Helt separat.

Om du däremot gör såhär:

var lista = ["Hej", "apa", 6, 7];

länkTillLista = lista

Då skapar du i princip bara en länk till listan.
console.log

Används för att printa ut något, det motsvarar pythons print

console.log("Vad som ska skrivas");

var

var används för att skapa en variabel.

var = firstName = "James";
var age = 20;
console.log(firstname, age);

if


if ( "johan".length > 10 ) 
{
    console.log("Let's go down the first road!");
}
else 
{
    console.log("Du har ett kort namn");// What should we do if the condition is false? Fill in here:
    
} 

Lägga till Favicon i WordPress

Favicon är den lilla ikonen bredvid titeln på hemsidan. För att lägga till en sådan ikon i WordPress gör du bara följande.

Först skapar du en ikon. Om du vill omvandla den till .ico så kan du göra det via den här hemsidan. Sedan laddar du upp ikonen i root-mappen på din wordpressinstallation. Alltså under /wp-content/. Därefter lägger du till följande kod i din header.php.



<link rel="icon" href="<?php bloginfo('siteurl'); ?>/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="<?php bloginfo('siteurl'); ?>/favicon.ico" type="image/x-icon" />

</head> <!--Här slutar din head -->

Sådär, då var det klart.

Ta bort wordpress admin-bar

Om man är inloggad på wordpress samtidigt som man besöker antingen sin egen sida eller någon annan wordpress-sida så finns det en admin-bar längst upp på sidan. Den är ful å onödig. För att ta bort den lägg in följande kod i functions.php.


<?php
add_action('get_header', 'remove_admin_login_header');
function remove_admin_login_header() {
	remove_action('wp_head', '_admin_bar_bump_cb');
}
?>

Bootstrap-klasser att känna till

Vissa klasser för bootstrap måste man helt enkelt memorera för att skynda på arbetet. Här är några.

Bilder

<img src="bild.jpg" class="img-responsive">

Det är inte mer komplicerat än att bilden blir responsiv. För mer info om klassen se bootstraps dokumentation.

Centrera bild

Om du vill centera bilden så använd .center-block iställer för .text-center.

Text

Om du vill positionerna texten så anväd dessa klasser.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Om du vill göra en viss text med stora bokstäver eller bara små använd följande klasser.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>