Hvordan fjerne cookiesene dine

OLYMPUS DIGITAL CAMERA

Cookies kan være noe utrolig herk! De har blitt noe mer kontrollerbare etter GDPR-loven kom, som gjør at man må godta cookies på hver side man er inne på med den kjente linjen “Vi benytter informasjonskapsler, godtar du dette?” gjerne nederst på alle nettbutikker og sider. Ofte er de så irriterende at du bare godtar dem for å få dem vekk.

Cookies (eller informasjonskaspler) er grunnen til at den kjolen du klikket deg inn på dukker opp i hver eneste annonse du ser. De spesialtilpasser annonser etter akkurat det du har vært interessert i. Litt tørr fakta om cookies: De er en tekstfil som lastes ned til PCen og inneholder informasjon om innloggingsdetaljer, hva du har puttet i handlekurven og sider du har klikket på. Etter jeg skrev innlegget om overdreven reklame for skjønnhetspiller var hver eneste annonse på alle sider jeg klikket meg inn på proppet med reklamer for akkurat de produktene jeg hadde trykket på.

Heldigvis er det veldig lett å bli kvitt disse cookiesene, og det kan gjøres i alle nettlesere. Her er guider for hvordan du gjør det i Chrome, Opera, Safari og Firefox. (Obs! Cookiesene lagrer som sagt ofte også innlogginger på nettsider, så du må være klar for å logge inn på nytt på alt).

 

Chrome

1. Trykk på ikonet øverst i høyre hjørne og deretter på “Innstillinger”. 

2. Søk etter “nettlesingsdata”.

3. Scroll helt ned og velg “Slett nettlesingsdata”.

4. Huk av for “Informasjonskapsler og andre nettstedsdata”. 

5. Trykk på “Slett data”.

 

Opera

1. Åpne ny fane.

2. Trykk på “Logg”-ikonet i menyen til venstre (den som ser ut som en klokke). 

3. Trykk på “Slett nettleserlogg” øverst til høyre. 

4. Huk av for “Infokapsler og andre nettstedsdata” og velg tid du skal slette cookies fra (jeg anbefaler fra tidenes morgen). 

5. Trykk på “Slett surfedata”.

 

Safari

1. Trykk på “Safari” øverst i venstre hjørne.

2. Trykk på “Tøm logg…”.

3. På safari er det ikke mulig å kun velge informasjonskapsler, så du sletter all nettleserlogg, lagrede passord, nedlastingshistorikk og annet. Ikke skyld på meg om kjæresten tror du prøver å skjule noe, fordi du har slettet loggen din. Velg å tømme “hele loggen”.

4. Trykk på “Slett logg”.

 

Firefox

1. Trykk på ikonet øverst i høyre hjørne.

2. Velg “Innstillinger”.

3. Trykk på “Personvern og sikkerhet” i menyen til venstre.

4. I Firefox kan du velge forskjellige innstillinger for informasjonskapsler. Du kan velge å blokkere dem helt, hvor lenge de skal beholdes og om tredjeparts infokapsler og nettstedsdata skal tillates. 
Trykk på “Tøm data” til høyre.

5. Huk av for “Infokapsler og nettstedsdata”. Du kan også ha med “Hurtiglagret nettinnhold”, hvis du vil. 

6. Trykk på “Fjern”.

 

Og så enkelt er det å bli kvitt cookiesene dine om du har trykket på litt feil innhold og vil ha dem vekk! Håper denne guiden var nyttig. Lagre den gjerne som bokmerke til en gang du kan trenge den ♥

Fredagshumor #15

Akkurat nå er jeg på Opptur-festivalen i Bodø! Jeg syns det har vært lite med programmering på bloggen min i det siste, og det trengs virkelig en god, gammeldags fredagshumor igjen. 

 

Programming Humor | Google+ #funny #geek_humor

Meg på jobb hver dag, det der. Neida. Joda. 

Ha en utrolig fin og morsom helg! Hæla i taket og tenna i tapeten.

Fredagshumor #14

Tenk at det nå var fredag igjen. Denne uka har gått helt sinnsykt fort, og jeg vet nesten ikke hvor den har blitt av. Det har vært så mye spennende å gjøre denne uka, og hver dag har vært superproduktiv. Jeg gleder meg til å ha en hel kveld der jeg ikke får panikk for å legge meg med det samme vi er ferdig med alt som skal gjøres for dagen. Det blir ordentlig deilig å sove ut i morgen, for det har blitt mange sene kvelder denne uka. 

Nå syns jeg det er på tide å poste et innlegg som ikke har med interiør og flytting å gjøre. Jeg syns faktisk det passer seg veldig bra med et innlegg som faktisk har bitte litt å gjøre med bloggnavnet mitt, nemlig denne ukas #programmeringshumor. Jeg beklager til alle som syns det er dødskjedelig, men jeg elsker dem. 

Denne uka er det en som alle kan forstå, for lenker har vi jo alle sett. Ha en superduper helg, alle sammen!

Fredagshumor #13

Det er fredag! God helg, alle sammen! 

I dette øyeblikk er vi og overtar den nye leiligheten vår, så framover noen dager kommer jeg nok til å være veldig opptatt! Men en liten fredagshumor må vi da så absolutt få plass til, og denne fikk meg til å humre.

Jeg syns det er fint med litt innslag av programmeringshumor, for bloggnavnet mitt bygger jo på at jeg er webutvikler. Dersom du vil lese mine leksjoner på hvordan du lager hjemmeside og bloggdesign, så kan du trykke her

Ha en super helg!

Fredagshumor #12

Nå er det endelig helg! Solen skinner, og vi er enda en arbeidsuke nærmere sommerferien. Jeg ser veldig fram til denne helga, for det skal skje så mye gøy. Og det er bare én uke igjen til vi overtar leiligheten. Så ting ser altså veldig bra ut framover!

I går var vi på møbeltitting, og fant sofa, terrassestoler, vitrineskap, hyller, grill og barstoler som vi planlegger å kjøpe. Og vi fant alt på én dag! Vi må fortsatt dra tilbake for å kjøpe tingene, men det var greit å få unna prosessen med å gå i alle butikkene og se.

Nå er det lenge siden forrige programmeringsvits, så her er ukas fredagshumor:

Ha en super helg, alle sammen!

 

Fredagshumor #11

Goood fredag! 

Det er så deilig at det er helg igjen. Uka har gått utrolig fort, men det er likevel deilig at det plutselig er fri noen dager igjen nå. Jeg ser veldig fram til helga, for det skal være sommerfest med jobben! Sommerfest betyr garanti for god mat og stemning en hel kveld.

Det er lenge siden jeg har hatt ukens programmeringsvits nå, så her er den:

Ha en strålende helg, alle sammen! 

#programming #programmering #programmeringshumor #programmeringsvits #code #kode

Lær å lage hjemmeside – Leksjon 12

Nå er vi straks ferdige med bloggdesignet vårt! Det eneste som gjenstår er footeren som er bunnen av siden. Det som typisk ligger i en footer varierer litt. Noen ganger er det kun en tekstlinje der det står hvem som har laget nettsiden, mens andre ganger står det i tillegg litt kontaktinformasjon, logo og lignende. 

Så denne leksjonen blir veldig kort og enkel. Og jeg beklager at det blir en så kjedelig leksjon som siste leksjon. 

Footer

Vi begynner rett på og legger inn dette i <footer>-seksjonen:

<footer>
    <p>© 2018 FrkFrontend all rights reserved</p>
    <p>Kontaktinformasjon: <a href="mailto:[email protected]">[email protected]</a>.</p>
</footer>

Dette er bare et enkelt eksempel på hva en footer kan inneholde. Først har jeg laget en copyright-setning, som sier at jeg har laget designet og at det man ikke kan kopiere hele uten tillatelse. En slik setning burde inneholde:

1. Et copyright-symbol (du finner det ved å google “copyright icon”)

2. Året designet/hjemmesiden ble laget

3. Hvem som har utviklet designet/hjemmesiden

4. En rettighetserklæring

Enkelte nettsider har evigvarende scrolling, og velger derfor alternative plasser å ha footeren sin. Facebook har for eksempel gjort det slik: 

I tillegg til copyright-setningen har jeg en linje for kontaktinformasjon, der jeg legger til link til epostadressen min.

Styling

Jeg har jo hittil hatt et veldig enkelt og stilrent design, og det planlegger jeg å fortsette med. Det er viktig at alle elementene på nettsiden henger sammen og matcher hverandre. Derfor valgte jeg å beholde den hvite bakgrunnsfargen, og la bare til dette:

footer {
    padding: 14px;
    font-size: 12px;
    text-align: center;
}

Paddingen er den samme som er brukt i headeren. Jeg har valgt å gjøre skriften litt mindre og sentrere den. Resultatet av bloggdesignet blir slik: 

Jeg har lagt til en til artikkel for å illustrere hvordan det vil se ut med to. 

Nå kan det hende det blir litt opphold i webleksjonene, til jeg får planlagt litt videre. Men da kommer jeg sterkere tilbake neste gang! 

De andre leksjonene finnes her: 

Lær å lage hjemmeside – Leksjon 11

Nå begynner vi å nærme oss et ferdig resultat med stormskritt, og nå skal vi bli ferdig med innleggsdelen. Det meste har vi gått gjennom før, så jeg kommer bare til å lime inn mye av koden, slik at du kan kopiere og lime inn. Jeg prøver mest å vise fram hvordan vi kan bruke alt vi har lært til å bygge opp en blogg.

Article

Forrige leksjon gikk vi gjennom sideseksjonen, og nå skal vi lage innleggene. Da bruker vi elementet “article”.

Over <aside>-klassen limer du inn dette i HTML-koden:

<section>
    <article>
        <div class="article-top">
            <span class="article-time">
                16:00
            </span>
            <span class="article-date">
                16.05.17
            </span>
            <span class="article-category">
                Webleksjon
            </span>
        </div>
        <div class="article-main">
            <h1>Innleggstittel</h1>
            <p>
                Dette er et blogginnlegg
            </p>
        </div>
        <div class="article-bottom">
            <span class="article-comments">
                2 kommentarer
            </span>
        </div>
    </article>
</section>

Denne koden skal altså ligge inne i main-tagen, men over aside-tagen. Dersom du hadde section-tagene liggende der fra før fra forrige leksjon, limer du kun inn article-tagene. Altså alt fra og med <article> og til og med </article>.

Dette skjer i koden:

  • Vi lager en article-tag inne i seksjonen. Dette er fordi det skal kunne ligge flere article-tager inne i samme leksjon.
  • Vi deler opp innlegget med en topp som heter “article-top”, en midtdel som heter “article-main” og en bunn som heter “article-bottom”. 
  • I toppen lager vi span-elementer for klokkeslett, dato og bloggkategori. 
  • I midtdelen lager vi en overskrift og en kort paragraf for innholdet i innlegget. 
  • I bunnen lager vi et span-element for kommentarer. 

Uten styling blir resultatet slik:

Her har vi altså en stylingjobb å gjøre. Men først bytter vi ut blogginnlegg-paragrafen med litt mer innhold, slik at mengden innhold blir litt mer realistisk. Da kan man bruke en Lorum Ipsum-generator! Da velger man bare hvor mange paragrafer med svadatekst man ønsker, så får man det ut. Jeg bruker denne

Erstatt dette:

<p>
     Dette er et blogginnlegg
</p>

med dette:

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porta molestie tortor, quis ultricies lacus auctor at. Duis convallis rutrum nisl, non auctor dolor sollicitudin scelerisque. Nam vehicula dui vel dolor gravida, sed interdum massa scelerisque. Curabitur porta diam sit amet ligula mattis, et vulputate nisl sollicitudin. Sed eget arcu eget neque bibendum finibus eget sed est. Nam ultrices pretium tellus, in mollis libero placerat quis. Curabitur nunc est, cursus posuere odio vitae, tincidunt posuere eros. Phasellus turpis mauris, venenatis ut diam ut, ornare porta mi. Mauris non justo id eros aliquet tempor nec eget orci. Suspendisse imperdiet vehicula arcu ac pharetra. Ut viverra sapien eu nisi imperdiet cursus. Integer imperdiet, nisi vitae tempor vulputate, metus diam semper nisi, non rutrum diam turpis at ante. Aenean tincidunt ligula elit, nec cursus tellus condimentum a. In eu ex eu enim finibus interdum.
</p>
<p>
    Vivamus a sapien sollicitudin, aliquam enim et, luctus mi. Morbi at tincidunt turpis. Aliquam posuere iaculis est, sed rhoncus leo pulvinar at. Sed ultrices, turpis dapibus lacinia pulvinar, elit libero aliquam ante, sed hendrerit eros metus non augue. Curabitur eleifend diam vel eros euismod vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris tempor faucibus aliquam. Nulla bibendum dapibus massa varius dapibus. Cras condimentum ante quam, eget suscipit elit interdum non. Aliquam eget turpis maximus, consequat quam vitae, faucibus metus. Nulla eu faucibus turpis, et pretium nulla. Sed elementum sagittis risus, quis luctus enim dictum a. Sed congue id quam sit amet mattis. Nulla facilisi. Phasellus ut suscipit nisi, posuere euismod massa. In hac habitasse platea dictumst.
</p>

 

Styling

Nå skal vi begynne med CSS, og vi skal importere ikoner! Font Awesome har et hav av ikoner du kan bruke gratis. Blogg.no har integrert Font Awesome, så dette steget trenger du ikke å gjøre inne på blogg.no, men lokalt på egen PC må du importere disse ikonene. Det gjør du bare på samme måte som vi ellers legger til stylingark og skrifter. 

Legg dette inn i <head> i HTML-koden:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

 

Da kan vi begynne i CSS-arket. 

Vi begynner å style topp og bunn av article:

article {
    background-color: #f8f8f8;
    margin-right: 10px;
}

article div.article-top, article div.article-bottom {
    text-align: center;
    padding: 10px;
    color: #777777;
}

article div.article-top .article-time, article div.article-top .article-date, article div.article-top .article-category {
    padding: 0px 10px;
}

Legg merke til her at jeg legger samme styling med text-align, padding og tekstfarge på både topp og bunn ved å legge dem etter hverandre med komma mellom. Det samme gjør jeg med time, date og category. De får alle sammen 10px padding på siden av seg. 

Nå skal vi legge til ikonene. Det gjøres slik: 

article div.article-top .article-time:before {
    content: 'f017';
    font-family: Font Awesome 5 Free;
}

article div.article-top .article-date:before {
    content: 'f073';
    font-family: Font Awesome 5 Free;
}

article div.article-top .article-category:before {
    content: 'f07c';
    font-family: Font Awesome 5 Free;
}

article div.article-bottom .article-comments:before {
    content: 'f075';
    font-family: Font Awesome 5 Free;
}

Vi legger ikonet foran elementet ved å bruke et pseudo-element som heter “before”. Man bruker det ved å skrive ::before eller :before. Deretter setter vi hva som skal være innholdet foran elementet, og koden man legger inn her finner man inne på Font Awesome sin side. Til slutt forteller man datamaskinen at man ønsker å bruke Font Awesome sitt ikonbibliotek.

Nå gjenstår bare stylingen på innholdet i innlegget, og der har jeg valgt å gjøre det enkelt med denne koden: 

article div.article-main {
    padding: 20px;
    margin: 0px 10px;
    background-color: #ffffff;
    box-shadow: 0px 0px 10px #e8e8e8;
}

article div.article-main h1 {
    font-size: 30px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 1.2px;
    margin: 10px 0px;
}

Her er det gjenbruk av mye av koden vi har lært før.

Resultatet blir slik:

 

Så da er det bare å endre på farger og størrelser som man selv vil, og tilpasse sitt eget behov. Ha det gøy med det!

 

Andre leksjoner: 

 

Lær å lage hjemmeside – Leksjon 10

Da var det på tide med denne ukas webleksjon igjen! Nå skal vi begynne på den midtre delen av siden vi bygger opp. 

 

Komme i gang

Først vil jeg bare bytte ut bredden på wrapperen vi har laget. Øverst i css’en skal dette:

.wrapper
{
    width: 80%;
    margin: auto;
}

byttes ut med dette:

.wrapper
{
    max-width: 980px;
    margin: auto;
}

Dette gjør jeg for at nettsiden skal ta full bredde når den går under 980 piksler, men før dette skal den ha margin på sidene. 

 

Vi starter med å legge inn <main> med både en <section> og en <aside>, slik: 

<main>
       <section>
                
       </section>
       <aside>
                
       </aside>
</main>

I forrige leksjon gikk vi gjennom flex-attributten. Skriv derfor dette inn nederst i CSS-arket:

/* Main */

main {
    display: flex;
    flex-direction: row;
}

section {
    width: 100%;
}

aside {
    width: 300px;
}

Her har jeg nå laget to kolonner, én for å ha en sideseksjon der jeg tenker å legge profilinformasjon og lignende i, og én til å ha artikler og innlegg. Jeg setter dem ved siden av hverandre med flex-direction: column.

Nå som vi nesten har fått opp hele siden kan vi godt fjerne de røde strekene og paddingen vi la på i første leksjon på alle elementene for å synliggjøre dem. Fjern disse linjene øverst i css-arket: 

header, nav, main, footer, section, aside, article
{
    border: 1px solid red;
    padding: 10px;
}

 

Aside

I denne leksjonen vil jeg fokusere på å få opp høyrefeltet på siden. Her kan du bestemme akkurat hva du vil legge inn, men jeg skal ta utgangspunkt i et standard høyrefelt du for eksempel kan finne på en blogg, med bilde, kontaktinformasjon og litt tekst. 

Vi begynner nå med å bygge opp selve html-koden inne i aside, før vi tar oss av stylingen etterpå. 

Skriv inn denne koden:

<aside>
    <div class=”profilepicture”>
        <img src=”profilbilde.jpg” alt=”placeholder+image”>
    </div>
    <div class=”profiletext”>
        <h3 class=”name”>
            Elise Kristiansen
        </h3>
        <p class=”info”>
            23, Skien
        </p>
        <p>
            Håper dere trives med denne webleksjonen! Dersom dere sliter, kan dere kontakte meg på <a href=”mailto:[email protected]”>[email protected]</a>
        </p>
    </div>
</aside>

Her lager jeg først en egen div som profilbildet kan ligge inne i. Deretter lager jeg en bildetag som referer til et bilde jeg har liggende i samme mappe som fila. Dersom du skal bruke et bilde fra nett må du lime inn bildenettadressen i src-attributten. 

Under har jeg laget en til div for profiltekst. Inne i denne lager jeg de forskjellige tekstfeltene jeg ønsker. For navnet bruker jeg h3, siden det er en slags tittel i aside-boksen. Merk at jeg lager en <a>-tag inne i teksten min, som har href=”mailto:” og så eposten min. Det er slik du forteller nettleseren din at du vil linke til en mailadresse, og ikke til en url.

Vi starter med å style hele aside-klassen. Vi har jo allerede satt en bredde på den, men vi legger til disse to linjene: 

aside {
    width: 300px;
    background-color: #f8f8f8;
    padding: 10px;

}

Dette er for å få litt bakgrunnsfarge og luft i boksen. Her kan du selvsagt velge akkurat den fargen du vil. Om du vil ha et mer rosa design, kan du jo velge en rosa farge her. Minner igjen om at du finner veldig mange fine hex-farger her

Nå må vi få gjort noe med profilbildet vi la inn, for akkurat nå tar den sin fulle størrelse, og det ser som regel ikke helt bra ut. Vi legger denne koden inn i css-arket:

.profilepicture img {
    width: 100%;
}

Det denne koden sier er at alle bilder som ligger inne i en klasse som heter “profilepicture” skal være 100% bredde. Det gjør at bildet kun strekker seg ut på den plassen den er tiltenkt, og aside-klassen har jo allerede fått begrenset plassen sin til bare 300px.

Nå ser resultatet slik ut:

Det er fortsatt litt traust og kjedelig! Så vi legger derfor på litt mer styling, selv om siden fungerer som den skal. 

Vi legger derfor på denne stylingen og:

.profilepicture {
    padding: 10px;
    box-shadow: 0px 0px 10px #e8e8e8;
    background-color: #ffffff;
}

.profiletext h3 {
    font-weight: 400;
}

.profiletext a {
    color: #000000;
}

.profiletext a:hover {
    color: #777777;
}

Først lager vi en ramme rundt bildet. Deretter smalner vi navnet som ligger i en h3-tag. Vi setter svart farge på lenken (epostadressen) og setter en ny hoverfarge på den (fargen som kommer når man holder pusepekeren over linken). 

Nå er resultatet slik: 

Nå er det bare å endre rundt på farger, luft og andre designelementer! Det viktigste er å være kreativ og ha det gøy med det. Enjoy!

 

Andre leksjoner:

Fredagshumor #10

Hurra for helg!
 

Jeg har forelsket meg heelt i disse vitsene. Jeg elsker sånne ordspillvitser. Men så er jeg veldig lett å glede og da. 

Nå får jeg snart besøk, og jeg gleder meg så veldig! Min beste venninne Silje skal være her hele helgen og vi skal finne på masse gøy. Både kino, grilling og vinkveld står på agendaen, så dette lover til å bli en bra helg.

Hva skal du i helga?

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top