Hemmeligheden bag succes er simpel?

Er det noget jeg altid har "praktiseret", men bare aldrig selv rigtigt lagt mærke til?

Jeg har altid siden barns ben været UFATTELIGT god til at værdsætte det jeg har og altid se positivt på tingene.
Kan huske at i idræt når det var koldt så brokkede alle sig altid, hvor jeg bare tænkte men det regner i det mindste ikke.
Negativitet hjælper ingen, og du kan oftest ikke ændre det (slet ikke med negativitet) så hvorfor ikke bare se på det positive og lyse sider i det?

Jeg tror at jeg for evig og altid vil forblive optimist på højt plan og værdsætte det du har.

Måske noget jeg har fået fra min far som er murer og dermed ikke multimillionær, men han kan da værdsætte det han har og nyde det.
Et rigtigt godt eksempel var at engang der købte min far en enormt dyr hjørnesofa for 20.000 (og dengang var pengene endnu mere værd) og han var så glad og lykkelig over at have købt den for var noget han havde arbejdet hårdt for og som han nu kunne nyde efter lang tid.
I en af de huse eller villa'er han gik og arbejdede boede en millionær som kunne se min far var så glad og spurgte hvad der lå bag og min far fortalte om den her enormt dyre men enormt lækre sofa som han var så glad for at have købt.
Det sjove var bare at millionæren kunne jo købe 10 af dem på stedet hvis han ville, men han ville aldrig få den glæde ved den som min far for han skulle ikke knokle for den, vente i spænding, spare op og have forventningens glæde for hvis han ville have den så købte han den skam bare.

Så det er enormt vigtigt man kan nyde det man har selvom man måske ikke har specielt meget, og værdsætte at man kan det for der er så meget man kan være glad for.
Helbred, ens kæreste eller kone, ikke er syg, eller ikke har det værre end man har, eller har uhelbredelig sygdom, at det ikke har ramt din familie, at du har til dagen og vejen, at du har gode venner, at du har et godt arbejde du er glad for, gode venner, og alt muligt andet.
Der er altid noget godt i ens liv som man kan nyde og værdsætte og det skal man sku ikke kimse af, for så længe du selv har det godt og kan nyde det så er du meget større end alle andre uanset hvor smarte, rige eller lækre de er for du har det sku meget godt.

http://www.inc.com/geoffrey-james/gratitude-true-secret-to-success.html

Samsung Galaxy S3 får Android 4.1 (Jelly Bean)

Nu har jeg jo selv en Samsung Galaxy S3 som jeg er uhyre glad for, så klart dette også er vigtigt for mig.
Selvom man er med på det nyeste og lækre standart for smartphones (Læs: iPhone killer) med den lækre indmad så gør det heller ikke noget at det forbliver sådan.
Derfor er jeg selvfølgelig også så mega glad fordi at min Samsung Galaxy S3 får Android 4.1 kaldet Jelly Bean.

Her er der fokuseret på responsive applikationer og hurtig respons når du rører skærmen.

Det forventes ifølge nedenstående link, at Android 4.1 (Jelly Bean) udkommer til Samsung Galaxy S3 til oktober (ca), så at have investeret i denne fantastiske og dejlige telefon viser sig nu som en endnu bedre handel ved at den vil blive opdateret til nyeste standart og dermed få meget bedre oplevelse for brugeren og ejeren af telefonen, og samtidigt vil du få bedre udnyttelse af dine ressourcer i form af batterilevetid.
Synes egentligt den holder meget godt batteri, men meget godt den så måske vil få endnu længere levetid.

http://ubuntulife.net/android-4-1-jelly-bean-for-galaxy-s3/

Intelligente løsninger (fra Samsung Galaxy S3)

Det er sjovt nu jeg har min Samsung Galaxy S3 og har haft den i noget tid og det sjove er at den er intuitiv og smart således du kan gøre rigtigt mange "simple" ting meget nemmere.
Det lidt ligesom at gå fra en bil med centrallås og til at få fjernbetjent centrallås.
Forskellen er lille ved om du skal tage nøglen frem og låse, eller bare bruge centrallåsen - en lille forskel, men man mærker hurtigt at det er bare MEGET nemmere med centrallås.
Og ja det er lidt det samme med Samsung Galaxy S3 for det er nemme ting der bliver "bare lidt" nemmere og pludselig så er alting bare meget nemmere.
Dette er specielt fordi alting foregår med gestures eller lign. som gør du nemt og hurtigt og effektivt kan få udført ting du gør meget.

Samme tanke fyldte mig med at man burde lave en gesture-genkendelse til projektorer som integrerede med Powerpoint.
Nu har man en lille pen med knap på, få hjælp af en kollega der med et nik vil klikke for dig, eller du selv gør det via mus eller tastatur.

Det fede ville bare være at du således udelukkende ville kunne fokusere på det vigtige og holde dit flow oppe uden at miste fokus. Du ville kunne fokusere på din præsentation og dit indhold og ikke blive afbrudt og miste fokus på at skulle nikke eller selv trykke på noget. Nu ville du kunne lave genkendelsesmønstre for hvordan overgangen skulle være, hvornår næste skridt skulle afvikles og meget andet.

Det er det fremtiden er om : intelligente løsninger!

Få en div til højre uden float:right

Engang i mellem kan man godt have brug for at der skal ligge rigtigt meget til højre, men ikke specielt meget til venstre.
Grunden til jeg siger dette på denne måde er at normalt så hvis du har indhold nok til venstre er det ikke et problem at bruge float:right, fordi indholdet sørger for at footer og andre elementer ikke bliver et problem med float:right.

Jeg står selv i en situation hvor det meste indhold skal stå til højre og derfor stadig skal flytte andre elementer såsom min footer etc.
Så efter lang tids arbejde på problemet fandt jeg en løsning, som gør det men kan være lidt mere omstændig en man lige tror, men desværre er det nødvendigt hvis du vil have den skal være relativ i forhold til dine andre elementer og ikke ligge som et lag "ovenpå" ligesom float:right gør.

Der er så faktisk en løsning som kan ses herunder:
<div style="text-align: right; background-color: gold;">
        <div style="display: inline-block;width: 250px; height: 60px; background-color: red; text-align:left;">LOGO TO THE RIGHT
        </div>
</div>

Fordi din <div> nummer to er display:inline-block så reagerer den på din text-align:right.
Derved kan du få en div som er aligned right uden at være float:right, og fordelen er at du derved har et element som interagerer med resten af dine andre elementer, hvorimod float:right gør at den ligesom står "udenfor" og ikke flytter tekst og andre elementer når den vokser.
Det er problematisk og derfor jeg viser denne løsning.

IKEA's digitale verden

Det er sjovt at læse denne nyhed omkring IKEA (http://newz.dk/ikea-kataloget-faar-et-digitalt-lag) når man selv har været med til noget af det.
Det skal give dig langt flere digitale muligheder og give dig en form for struktur på alt den information som IKEA giver dig, og dette skal bedre kunne lade sig gøre med dine digitale virkemidler som langt størstedelen af befolkningen i dag h

Netop fordi IKEA skal vokse og vokse og aldrig må stå stille, men samtidigt holde styr på alle produkter, vise dig muligheder for du måske vil se noget der passer sammen og få ideer selv til at købe mere og give dig alt den information du har behov for at du kan tage en beslutning om du vil købe noget eller noget andet eller købe mere end planlagt - så skal der ske rigtigt meget.

Det er klart det kan være noget af et virvar fordi der er så meget information, om så mange produkter, som skal have en form for relationer til hinanden, og hvornår er hvilke informationer nødvendige og brugbare for kunden.

Det er ikke ret nemt netop fordi der er så meget, plus at en forretning ikke er ens og der er ikke samme muligheder alle steder. Men der arbejdes meget ihærdigt på at få gjort en masse digitale tiltag også fordi det vil kunne skabe endnu mere salg fordi der ikke er specielt meget digitalt i dag. Jeg og stort set alle jeg kender benytter ikke deres side vitterligt meget, men bruger bare deres lokale store til at få kigget på det forskellige og så se deres katalog der eller hjemmefra men online eller digitale løsninger er ikke noget der associeres med IKEA fordi det ligesom ikke er deres koncept.
Men den digitale tidsalder er kommet over dem og de kan se at det er det der skal til fordi alle forventer app's og flere muligheder og interaktioner med alt via digitale og online multimedier og løsninger hvilket jo er fremtiden fordi vi som forbrugere forlanger det.
Så tror virkelig det er noget IKEA satser stort på.

Samme princip gør sig gældende ved at de laver de digitale kameraer i hårdt pap, og deres møbler med integrerede fjernsyn og afspillere i. Det er igen tiltag for at vise IKEA er med på beatet og vi laver innoverende løsninger der kan være moderne også. Tror det er for at det yngre publikum skal mærke det ikke "bare" er de gammeldags løsninger der "bare" er møbler, men kan være noget moderne og fedt og at de stadig skal komme til dem for at handle.

Bliv en savant og få verdensherredømmet

Det er rigtigt fedt at se The Matrix og tænke på man kan hurtigt og nemt kan lære ting ved at få hjælp med at få det ind i hjernen og ikke skal bruge unødigt lang tid på at lære noget. Det gør dig igen meget mere produktiv.

Nu er der åbenbart kommet et produkt der måske i fremtiden ville kunne hjælpe dig med at lære og huske ting. Ikke lige som i The Matrix, men stadig angiveligt være noget som vil kunne hjælpe dig med at lære og huske ting nemmere end du ellers vil kunne.

Læste det på newz.dk at der var lavet en tænkehat (http://newz.dk/forsker-vil-lave-taenkehat) som hjælper dig med at komme ud over din måde at tænke på problemstillinger således at du nemmere kan lære og huske.
Det er noget som kommer fra savanter som er et fascinerende begreb.
En savant er en person der er enormt god indenfor et specifikt felt ligesom en autist, bare enormt meget. Fx så jeg en udsendelse med en savant der kunne huske pi med 1400 decimaler eller mere og han sagde det var bare sådan en sky af tal der kom til ham han skulle "svæve/svømme" igennem når han regnede i og tænkte i tal. Dette område var han enormt god til, men betydningen er så også han har andre områder som de fleste kan mestre uden problemer men dette kan en savant have problemer med.
En anden kunne huske alle vejrudsigter fra 1954 på alle årets dage frem til i dag, og indenfor et specielt område (flere byer) som han havde læst og hver dag han havde oplevet og set vejret i kunne han huske så 14 december 1967 var det sådan og sådan, og da de tjekkede det for den by han boede i passede det.
Det er vildt fascinerende.

"Afhængig" af computere

Som nørd er det jo nærliggende om man kan blive det, men sådan ser jeg det ikke da det jo blot er et redskab for at jeg kan være endnu mere kreativ og produktiv. Ligesom at en murer nemmere nu kan lave mørtel end tidligere og være kreativ og produktiv.

Læste lige http://newz.dk/smartphones-er-blevet-vores-eksterne-hjerne som siger at på grund af vi bruger vores smartphones så meget så tænker vi anderledes og husker anderledes. Fordi nu skal vi ikke bruge energi på at huske ting, men på at bruge disse ting i stedet - meget lig en brug-og-smid-væk mentalitet bare med information. Dette er fordi det er så nemt tilgængeligt over alt.

Fordi vi har denne tankegang så bruger vi også vores smartphones til at putte ekstremt meget data ind i disse for at de kan huske for os og hjælpe os i vores hverdag så vi kan fokusere på andre ting end nu skal vi huske vi skal til lægen og at Brian har fødselsdag etc.
Så vi er pludselig meget mere afhængige af vores smartphones fordi de pludseligt indeholder så meget information og data, og derfor kan vi blive helt "identitetsløse" og paniske hvis vi mister vores smartphone.

Jeg kender det jo ganske udmærket fra mig selv af, det kan være katastrofalt hvis jeg mister min telefon og smartphone.
Fx så har jeg fået den nye Samsung Galaxy S3, og selvfølgelig kunne jeg ikke vente med at få den sat i gang og prøve den af. Så mit almindelige simkort fra Telmore havde et mikrosim indeni som man bare kunne klikke ud. Det klikkede jeg så ud og fik sat i telefonen og var skide lykkelig over at jeg kunne bruge min lækre smartphone Samsung Galaxy S3. Og efter 2 timer kom jeg i tanke om jeg ikke havde fået taget backup af alle mine numre og data etc. så pludselig havde jeg ikke min fars nummer, min svigermors nummer og alle mulige andre jeg havde behov for at kontakte.
Det er så løst nu, men der kan man pludseligt se hvor afhængig man bliver af en smartphone og de data man har i den for jeg ville meget nemt kunne blive Palle alene i verden hvis jeg mister mine data på telefonen og der ikke er nogen backup i skyen eller nogen andre steder.

Fremtiden er byen i skyen?

Nu læste jeg lige http://newz.dk/nu-skal-gaagaden-vaere-online som jo er en fantastisk ide! ABSOLUT!
Og den ligger jo lige til højrebenet og tror at det vil kunne hjælpe rigtigt mange mindre virksomheder.
Netop derfor er det smart at have skyløsninger og skyudvikling fordi det baner vej for nye forretningsmuligheder og forretningsveje og løsninger hvor man kan fokusere på det vigtige - nemlig forretningsmodellen og løsningen og ikke hvad med plads, hvad med servere, hvad med efterspørgsel så vi har power nok, hvad med loadbalancing etc. etc. etc.

Nu skal du blot fokusere på at din ide skal blive til virkelighed.

Så at du vil have samme muligheder som et shoppingcenter, bare online er jo genialt.
For tit når du går i et shoppingcenter kigger du på oversigten fordi du skal finde sko, og pludselig ser du hov der var også noget med gadgets det kunne være meget spændende at se på også - og ved at lave dette online vil du lave have en stor besparelse både som kunde og virksomhed - men stadig kunne lave det uhyre spændende ved det hele er placeret på nettet så du kan lave en masse spændende interaktive reklamer der gør det spændende at gå fra "butik" til butik.
Man kan også nemt lave noget samarbejde imellem butikkerne ved at sige når du har købt for x kroner i "centeret" får du en rabatkupon eller hvis du handler der så får du samtidigt mulighed for at få rabat hvis du handler der også. Eller hvis du køber for mere end xxx så opnår man også noget benefits og besparelse.

Pisse god ide, og pisse irriterende man ikke selv er kommet på den

Launchy gør din dag lettere

Det lille program launchy er gratis, hurtigt, nemt og effektivt. Oveni gør den også din dag og dig mere effektiv.
Ofte skal man lige vende sig til at benytte sådan et værktøj fordi det er anderledes og meget nemmere, men man skal lige vende sig til det og huske sig selv på at gøre det på denne måde også.

Launchy er et lille enkelt program der gør det nemt for dig altid at have de filer eller programmer du har behov for til rådighed lige ved dine fingerspidser.
Det fungerer ved at du sætter en genvej op på din maskine til at starte Launchy, (det kan være alt + space eller lign som er nemt og ikke har en allerede defineret shortcut) hvorefter den viser et lille program på skærmen som du kan søge i.
Det fungerer ligesom windows søgningen, bare meget bedre, hurtigere og meget mere tilpasset til dig og dit brugsmønster.
Du kan selv sætte op hvilke lokationer launchy skal gennemsøge for at kunne finde, så den kan finde alle dine programmer, alle dine dokumenter, dine visual studio projekter, dit music, you name it.
Men det bedste er at du kan selv sige den kun skal søge der og der fordi det er ting du har behov for der, men andre steder behøver den ikke spilde sine kræfter. Og så er den enormt hurtig både til at indeksere dine filer, men også til at levere søgeresultater for dig og gør at alt du bruger tit er lige for enden af dine fingerspidser - hurtigt, nemt og effektivt.

Prøv det i en uge og se om det ikke er noget der kan hjælpe dig i din hverdag i stedet for alle de museklik :)

CSS3 transition: [property] - avanceret

Når man først kommer i gang med transitions begynder man pludseligt at kunne se en masse fordele og henseender man kan bruge denne.
Det er lækkert og nemt, men samtidigt skal man passe på ikke at overfylde sin side.
Men fordi man ofte gerne vil udvide det man allerede har så vil jeg også vise et eksempel på dette.

Se første indledning til transition her.

Jeg vil tage udgangspunkt i ovenstående eksempel med:

• en div
• en span
• et billede

Det jeg vil udvide med er at man bruger flere transitions på samme element, i modsætning til forrige eksempel hvor det kun blev sat på et enkelt property.
 Jeg vil nu lave et eksempel på at border-på div'en skifter farve, baggrunden samtidigt med at span'en fader ind og selvfølgelig skal den reverse når man fjerner musen.

HTML:
<div class="outerDiv">
    <span class="innerSpan">Text goes here</span>
    <!-- de to parametre efter adressen angiver størrelsen -->
    <img src="http://placekitten.com/200/300" />
</div>

CSS:
.outerDiv
    {
        position: relative;
        display: inline-block;
        border: 2px solid #B8D30B;
        -webkit-transition:border-color 1s linear, background-color 1s linear;
        -moz-transition: border-color 1s linear, background-color 1s linear;
        -o-transition:border-color 1s linear, background-color 1s linear;
        transition:border-color 1s linear, background-color 1s linear;
        background-color: white;
    }
   
    .innerSpan
    {
        position: absolute;
        bottom: 20px;
        right: 0px;
        padding: 3px;
        padding-left: 10px;
        padding-right: 10px;
        color: #B8D30B;
        text-shadow: 0 0 2px lime;
        /* to ensure backward compability where rgba id not understood */
        background-color: whitesmoke;
        background-color: rgba(10, 10, 30, 0.4);
        visibility: hidden;
        opacity: 0;
        -webkit-transition:visibility 0s 1s, opacity 1s linear;
        -moz-transition: visibility 0s 1s, opacity 1s linear;
        -o-transition:visibility 0s 1s, opacity 1s linear;
        transition:visibility 0s 1s, opacity 1s linear;
       
    }
   
    .outerDiv:hover
    {
        -webkit-transition:border-color 1s linear, background-color 1s linear;
        -moz-transition: border-color 1s linear, background-color 1s linear;
        -o-transition:border-color 1s linear, background-color 1s linear;
        transition:border-color 1s linear, background-color 1s linear;
        -moz-transition: border-color 1s linear, background-color 1s linear;
        border-color: rgb(170,280,10);
        background-color: black;
    }
   
    .outerDiv:hover .innerSpan
    {
        visibility: visible;
        opacity: 1;
        -webkit-transition:opacity 1s linear;
        -moz-transition: opacity 1s linear;
        -o-transition:opacity 1s linear;
        transition:opacity 1s linear;
        -moz-transition: opacity 1s linear;
    }

Det første jeg udvider med er at lave borderen til at den også skifter farve. Derfor skal der laves en :hover-state på "outerDiv". Jeg starter med at definere de forskellige transition med browser specifikke pre-fix'es. Derefter tilføjer jeg "border-color 1s linear" i ".outerDiv:hover". Selvfølgelig tilføjer jeg også en anden border-color. Dette gør at når jeg peger på outerDiv så skifter den langsomt i en transition farve, men så snart jeg fjerner musen så skifter den med det samme farve til standart farven defineret i ".outerDiv".
Derfor tilføjer jeg det samme som før oppe til ".outerDiv" netop fordi dette gør at den får den modsatte transition tilbage til sin originale border-color.

Dette eksempel er blot en tilføjelse til en anden property og element så dette ligner meget mit første eksempel på transition: opacity, så derfor skal det udvides.
Derfor vil jeg gerne have en ekstra property tilføjet til "outerDiv". Dette valgte jeg så at det skulle være background-color for at have to properties sat på samme element.

Derfor udvider jeg med at background-color skal blive sort.
Og fordi denne også skal have en transition, så skal hver transition-property inden i ".outerDiv:hover" udvides med ", background-color [x]s linear".
Dette gør at når du hover den (peger på den) så ændres (transition) baggrunden til sort.
Men igen så så snart at du fjerner musen fra div'en så skifter den med det samme til den oprindelige background-color fordi der ikke er nogen overgang eller transition på ".outerDiv".
Så samme trick skal laves på denne klasse for at det fungerer.

Slutresultatet er en kat med en border rundt om, og når man peger på den ændres border-color og background color, og så kommer en span med en tekst til syne.

transition: opacity - begge veje

Noget som jeg selv har undret mig over er at når man bruger transition på opacity så virker det på den ene vej men ikke den anden. Det kan være utroligt irriterende, men er faktisk ret så simpelt hvis man tænker over det.
Altså at den kan fade out og fade in når du hover et element - for ofte så virker fade in eller fade out, men når du så skal gå den modsatte vej virker det ikke. Det er der en meget simpel grund til som jeg vil forsøge at forklare nedenunder.

Hvis du ikke forstår det med at få teksten til at stå ovenpå billedet så læs mit andet indlæg omkring det her: Eksempel på tekst ovenpå billede

Et lille eksempel:
HTML:
<div class="outerDiv">
    <span class="innerSpan">Text goes here</span>
    <!-- de to parametre efter adressen angiver størrelsen -->
    <img src="http://placekitten.com/200/300" />
</div>

CSS:
.outerDiv
    {
        position: relative;
        display: inline-block;
    }
   
    .innerSpan
    {
        position: absolute;
        bottom: 20px;
        right: 0px;
        padding: 3px;
        padding-left: 10px;
        padding-right: 10px;
        color: #B8D30B;
        text-shadow: 0 0 2px lime;
        /* to ensure backward compability where rgba id not understood */
        background-color: whitesmoke;
        background-color: rgba(10, 10, 30, 0.4);
        visibility: hidden;
        opacity: 0;
        -webkit-transition:visibility 0s 1s, opacity 1s linear;
        -moz-transition: visibility 0s 1s, opacity 1s linear;
        -o-transition:visibility 0s 1s, opacity 1s linear;
        transition:visibility 0s 1s, opacity 1s linear;
    }
   
    .outerDiv:hover .innerSpan
    {
        /* Ovenstående  er en CSS selector der siger at når du har :hover på outerDiv skal dette gøre sig gældende for span-elementet indeni outerDiv */

        visibility: visible;
        opacity: 1;
        -webkit-transition:opacity 1s linear;
        -moz-transition: opacity 1s linear;
        -o-transition:opacity 1s linear;
        transition:opacity 1s linear;
        -moz-transition: opacity 1s linear;
    }

Dette eksempel viser at innerSpan har en transition, fordi dette gør at når du skal tilbage til denne fra en anden state - såsom :hover - så vil denne transition gøre sig gældende.
Det de fleste (inklusiv mig selv) gør er at kun sætte transition på starten du vil have skal ske, men ikke på "original"-elementet og dermed går den fra <class>:hover til <class> ved at skifte til <class>, og da denne ikke har en transition vil dette ske med det samme.
Så det vigtige i dette eksempel er at du har transition på både innerSpan (fade out) og transition på .outerDiv:hover .innerSpan (fade in).
".outerDiv:hover .innerSpan" giver at på din class "outerDiv" i staten "hover" skal css'en skrevet gøre sig gældende for elementer med class "innerSpan" sat, indeni "outerDiv"-elementet.
Du kunne sagtens erstatte ".innerSpan" med "span", men grunden til jeg bruger ".innerSpan" er at man måske ønsker flere span's indeni "outerDiv" og ønsker måske ikke at ovenstående effekt gør sig gældende for alle span-elementer indeni "outerDiv".

Ovenstående eksempel giver et billede af en kat, og når du har musen over (:hover) så bliver span'en indeni outerDiv langsomt synlig.

Hjælp til anbefalingen

Jeg er ikke selv skide god til anbefalinger og det er altid meget godt at finde inspiration og hjælp til det man ikke kan.
Forleden ledte jeg efter hvordan man kunne få anbefalinger fra LinkedIn ind på min side således at de kom automatisk fra LinkedIn med antal og tekst og det hele således jeg ikke selv skulle sørge for at holde min side opdateret.
Her faldt jeg så over et link til hjælp til dem der ikke er så gode til det med at skrive en god anbefaling på trods af man gerne vil, så her ville jeg lige dele sådan et værktøj.

Indtil videre har jeg ikke haft behov for sådan noget, men kunne være andre kunne finde den brugbar hvis de har behov for hjælp og inspiration. Så få hjælp til at skrive din anbefaling.

Se derfor nærmere på: www.endorser.org

Tekst ovenpå billede

Dette er noget rigtigt mange gerne vil kunne lave og som er relativt simpelt bare man ved hvordan man gør.
Så derfor laver jeg et lille eksempel:

<div style="position:relative">
      <span style="background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5); position:absolute; bottom: 7px; right:0px; padding: 3px 15px 3px 8px; color:#b8d30b; font-size:9pt;">My text goes here</span>
      <img src="image.jpg" alt="Image of Laurits West" />
</div>

At du laver en div med position relative udenom gør at din position absolute indeni bliver absolut relativt til den div udenom.
Og ved at du gør den position: absolute gør at den ikke positioneres sammen med andre elementer og står derfor over eller ovenpå billedet.

Håber det hjælper og kan bruges for er noget rigtigt mange gerne vil kunne og forstå for det er noget man tit kommer til at have behov for.

Overvejelser i Partial Views?

Efter jeg i går havde lavet min systemudvikler del om stødte jeg nu på et problem.
Hver anden række skal right-alignes for at give en bedre præsentation, og den første forhindring jeg stødte på var at jeg nu ikke havde nogen alternating-row-template som man bruger i webforms.
Det er jo meget nemt i en repeater, men alligevel meget ueffektivt fordi du skal have stort set samme kode stående to steder, i stedet for at definere forskellene.

Første gang tænkte jeg at jeg måtte lave det samme som man gør i webforms. Et tjek for om det var den første eller anden række og så derefter lave et præcis samme kode, med modifikationer de steder der skulle.
Alligevel er jeg tilpas perfektionist til at jeg bare måtte se om jeg ikke kunne lave det smartere, og ganske rigtigt det kunne jeg.
Det jeg lavede var at lave en if-sætning der tjekkede modulus 2 (i % 2 == 0), som kunne sige at hvis det var den første skulle billedet indsættes.
Efter dette område indsættes texten og det område med tekst.
Efter dette lavede jeg det modsatte tjek for at se om det var alternate row, og samme kode. Derved ville billedet blive indsat i før teksten i første række, og i den næste række ville billedet komme efter teksten og se modsat ud på grund af den er right alignet.

"Desværre" er man jo perfektionistisk så dette var heller ikke løsningen for mig, fordi igen hvis noget skulle rettes skulle det rettes to steder og det er slet ikke effektiv og smuk kode og går mig på.
Så jeg begyndte at se på Partial View.

Samme princip kan man også udnytte i webforms, men har aldrig rigtigt haft behov for at bruge det.
Det smarte her er jo at du kan videresende data med din model, eller via ViewBag. Førstnævnte er jo selvfølgelig den man foretrækker og synes er mest lækker så også denne jeg vil promovere i eksempelet.

I mit View er min model med en liste af profiler, som jeg præsenterer.
Det jeg så vil er at sende denne ene profil til mit Partial View således at mit billede bliver renderet et enkelt sted, og kan kalde denne før og efter teksten, alt efter om det er den første række eller anden og så frem deles.
Så i mit view er min model en model der har en liste af profiler, og i partial view er min model kun mit profil-objekt da det er denne der har de oplysninger jeg skulle bruge.

Den udfordring jeg så stødte på var at der er forskel på
@Html.Partial
og
@Html.RenderPartial

Af en eller anden grund så virkede Html.RenderPartial ikke, men så snart jeg skiftede til Html.Partial så virkede det.
Så det der sørger for mit partial view bliver renderet er:
@Html.Partial("_ProfileImageSection", Model.ProfileList.ElementAt(i).Value);

Jeg har undersøgt lidt på forskellene og fundet følgende:

Html.Partial returns a string, Html.RenderPartial calls Write internally, and returns void.

You can store the output of Html.Partial in a variable, or return it from a function. You cannot do this with Html.RenderPartial. The result will be written to the Response stream during the execution.

Jeg skal er ikke sikker på om det er grunden, men fordi dette sker inde i et for-loop kan det være at det bliver lavet for tidligt og udenfor context fordi responset ikke er klar på eksekveringstidspunktet.
Men for mig virkede det i hvertfald at skifte og kan være nogle derude kan bruge det.

Det smarte, smukke og lækre i MVC 3 (og MVC 4)

Hvis man er helt ny i webverdenen og lige skal til at lære omkring state-handling og vænne sig til at du ikke har en model bagved der altid er tilgængelig, og du ikke blot kan smide dine objekter ind i dine kontroller og få dem overført frem og tilbage, så er webforms et meget nemt og ligetil valg for dig.

Men nu har jeg efterhånden rodet lidt i begge verdener og vil sige jeg bliver bare mere og mere glad for MVC 3. Der er (ligesom med alting andet) noget man skal lære og sætte sig ind i, men det er ikke så slemt og når du førs begynder at grave dig ind i det og forstå tankegangen bagved så er det så smukt.

Jeg er ved at udvikle min side csharpudvikler.dk, og her vil jeg have nogle flere specifikke profiler at præsentere, ikke kun udvikler, personlig og professionelt - men også applikations og webudvikler - måske software engineer eller lign.
I første omgang vil jeg gerne lave en Controller der hedder Systemudvikler (csharpudvikler.dk/Systemudvikler/), med en Index-action der skal præsentere alle de forskellige profiler jeg ønsker at præsentere.

Dette kan også sagtens lade sig gøre i webforms, men der er nogle ting der er lidt anderledes og for mig ikke så lækker. I webforms ville man lave en repeater som udskrev det samme, men jeg føler nu mere i MVC jeg har større kontrol da det hele sker i viewet.
Det sjove er at jeg (ligesom ret mange andre) sagde engang det er lidt underligt at folk får det sådan fordi det jo ligner hinanden ret meget, men dengang jeg sagde sådan var min erfaring indenfor MVC også kun at kradse overfladen og slet ikke gået i dybden som nu.
Fx noget af det jeg elsker er at jeg nu vil kunne lave et specificeret view der viser detaljerne for den enkelte profil som fx csharpudvikler.dk/Systemudvikler/Profil/Webudvikler vil vise detaljerne for denne profil-type og være linket fra min oversigt - csharpudvikler.dk/Systemudvikler/ - som tidligere nævnt.

Syntaksen gør det så nemt og behageligt at arbejde med, og nu når du skal have lister indeni lister så er alting meget nemmere.
Jeg har fx i min side Dotwest.net på min kompetence-side viser jeg nogle streger for at vise hvilket niveau jeg er på. Fordi farverne skifter efter hvor langt op den kom løste jeg det ved at lave en repeater i en repeater - og det kan lige pludseligt blive lidt langhåret hvis man ikke adskiller tingene godt og får kommenteret godt og grundigt.

På samme måde i uddannelse bruger jeg også repeater i repeater.
Jeg har en repeater der laver hver gruppe, og så en indeni der laver detaljerne.
Således man for hver kategori laver først overskriften, en ny div og indsætter en repeater indeni denne for at lave de uddannelser indenfor denne kategori.

Det jeg synes så godt om er at når man først forstår principperne i MVC så er det bare meget nemmere at du ikke skal lave kontroller indeni kontroller som du har svært ved at holde styr på, men i stedet så laver du nogle beskrivende objekter i din model som det giver mening at udsende i sit view og pludseligt så beskriver dit markup i samarbejde med dine objekter fra din model hvad du gør og hvad der sker og hvad det rent faktisk er du arbejder med og på hvilken måde.
Det er (i hverfald for mig) lang mere beskrivende end webforms og simpelt fordi du fokuserer ikke på at wrappe dine ting ind i kontroller, men har selv hundrede procent styr på hvad der sker hvor og hvorfor og hvordan fordi det er dig der beskriver det.

Fx hvis man ser på mit eksempel før.
csharpudvikler.dk/Systemudvikler
Denne url skal bruge Controlleren Systemudvikler, og action Index.
Her vil jeg kort præsentere profilerne, og så kan man læse nærmere i den detaljerede profilbeskrivelse.
I denne benytter jeg en model der har en liste af profil-objekter der hver især beskriver alt omkring den enkelte profil-type.
Så jeg laver først en liste over alle profil-objekter, smider i en liste og sætter ind i modellens objekt som jeg smider ind i viewet og denne forstår denne model således jeg direkte kan tilgå denne liste i mit view.

csharpudvikler.dk/Systemudvikler/Profil/{profileType}
Her finder jeg den enkelte profil, og sender denne videre til et detaljeret view. Dette er blot to forskellige modeller af til forskellige visninger, den ene er en liste af profil-objekter og den anden er "blot" profil-objektet og hver især sendes de enkelte "modeller" videre til viewet som kan arbejde med dem i deres respektive context.

Derfor jeg er så glad for MVC nu jeg har fået fingrene ned i det og lært at bruge det, for det er meget mere gennemskueligt hvad der sker hvor, hvornår og hvorfor fordi det er dig selv der beskriver og definerer alting når du og hvordan du har brug for det.

Dengang jeg selv startede med webforms synes jeg ikke det var et dårligt valg fordi nu kan jeg også sige jeg er stærk i det, hvilket der stadig er behov for mange steder - men hvis jeg ikke havde arbejdet med denne del af ASP.NET 4.0 også kunne jeg ikke sige direkte hvorfor jeg gerne ville have det ene frem for det andet, eller hvad fordele og ulemper er, hvad forskellene er og hvordan ting skal gøres anderledes.
Så hvis man har tiden til at kunne lære webforms synes jeg selv det er et fint valg og specielt hvis man kommer fra mere regulær applikationsudvikling hvor din tankegang er en helt anden end webudvikling, men hvis du har fin forståelse for denne verden med request/response, session og jeg-skal-gi-dig-ska-jeg så start med MVC for der er ret mange af mine kolleger der har været fortaler for det uden helt at kunne overbevise mig om hvad det smarte og smukke er i MVC og hvorfor det er bedre end webforms, men det kan jeg selv nu se. Jeg har set lyset, og jeg tror egentligt også at de fleste vil kunne se det efter at have fået fingrene ned i det og set fordelene i dit daglige udvikler arbejde.

Det er ligesom at de fleste også er ret glade for jQuery når de begynder at vænne sig til at arbejde med det og forstå hele princippet omkring javascript, hvilket heller ikke er helt nemt hvis det ikke er en verden man er vant til. Objekter uden typer og ingen syntaks tjek og alt hvad man ellers er vant til når man udvikler i C# og .NET, men igen det er godt at lære noget nyt og anderledes for det tvinger dig til at se din egen kode, udvikling og verden i et nyt lys og tage nogle ting op til revurdering og tror det er sundt. Man udvikler sig og finder måske ud af noget du kan benytte andre steder end kun lige der.

Jeg er i hvertfald glad for alt det nye jeg har lært og som jeg er ved at lære nu også, for det gør jeg ser tingene på en anden måde og så er der også det lille aspekt at jeg jo elsker at lære så det er bare fint.

Forskellige views til samme action i MVC3

Jeg har i forlængelse af mit indlæg omkring Lister og modeller i MVC3 (Razor Engine) begyndt at gå ud på dybere og dybere vand, for at lære mere og se hvor meget jeg egentligt kan, men lige så meget fordi det er spændende og der kommer nye spørgsmål konstant.

Jeg havnede i en situation hvor jeg begyndte at tænke på hvad nu hvis man vil have en action som KAN tage input-parametre, men det er optional - og du gerne vil levere et view til uden input-parametre, og et andet til når der er input-parametre.
Forstil dig følgende:
{Controller}/{action}/{input-parameter} og input-parameter er optional.

Dette kunne være
Produkter/Kamera/
og her vises aller kamera'er du har. Dette er et view der har sin helt egen struktur og visning.

Så tilføjer du input-parameter så du får:
Produkter/Kamera/CanonEosD70/
og nu vil du gerne vise detaljerne for dette kamera og her vil du vise det på en helt anden måde og dermed have et helt andet view.

Problemet er bare at du kan ikke have en Index()-action og en Index(string cameraID)-action fordi så ved Controlleren ikke hvilken den skal forvente.
Så det man gør er at lave en Index som tager input, og da input-parameteren er optional vil du automatisk få denne parset som null, hvis der ikke er skrevet noget cameraID på.

Og så kan man rent faktisk godt lave to view til en og samme action, og ud fra input vil du få det ene eller det andet.
Se på eksempel herunder:

Hvis vi tager udgangspunkt i ovenstående eksempel med
Produkter/Kamera/ og Produkter/Kamera/CanonEosD70/

Så svarer Produkter til din Controller, Kamera til din action og CanonEosD70 som dit input til din action.
I første eksempel : Produkter/Kamera/ har du intet input til din action (Kamera)
I andet eksempel: Produkter/Kamera/CanonEosD70/ har du input til din action (Action = Kamera, Input = CanonEosD70)

Problemet i dette er at du ikke kan overloade din action, så du kan ikke lave en
public ActionResult Kamera()
{
        return View();
}
og så samtidigt have:

public ActionResult Kamera(string kameraname)
{
        return View();
}

for dette kan din Controller ikke finde ud af. Så det man gør er at lave en action der kan klare begge dele, og det er dette jeg vil vise herunder:

1) Lave din action i din Controller
Skriv følgende:
public ActionResult Kamera(string kameranavn)
{
        return View();
}

2) Lave dit standart view.
Du højreklikker på View, og vælger "Add view". Dette kan kaldes "StandartView" (gør vi i dette eksempel).
Heri laver du det som skal vises ved Produkter/Kamera/

3) Lave dit detaljerede view
Du vil nu gerne levere det som skal vise detaljerne for produktet. Dette kan være et universelt view for alle produkter som altid vil vise det samme, eller have flere forskellige for kategorier (actions), men det er jo op til en selv.
Dette laves ved at du højreklikker på View og vælger "Add view" (ligesom step 2) og kalder dette "DetaljeretView" (i dette eksempel).

4) Sørge for din action kan klare med og uden parametre eller input
Da du bruger en string som input (kameranavn) er dette automatisk et nullable object, men ellers skulle du bruge ? for at være sikker på den var nullable - i tilfælde af du ikke skrive noget efter din action. Det smarte ved dette er at selv når der ikke er skrevet noget så sættes denne input-parameter blot til null.



5) Lave en route der forstår dine parametre
Åben Global.asax og udkommenter default-routen.
Indskriv derefter:

routes.MapRoute(
                "Test", // Route name
                "{controller}/{action}/{kameranavn// URL with parameters
                new { controller = "Home", action = "Index", kameranavn = UrlParameter.Optional } // Parameter defaults
            );
Hermed siger du at der skal startes i Home-controlleren, med Index-action, men alle andre request's vil blive valideret imod ovenstående. Så alt efter din action vil indsættes i kamera-navn.

6) Rette din action så den kan levere to views
Ofte vil du have en model som sikrer du får data rigtigt igennem og du kan arbejde med objekter den rigtige måde.
Jeg vil ikke gå i detaljer omkring dette fordi det findes der masser af guides derude omkring og er ikke hvad dette handler om, men vil vise princippet uden modellen, men når man har forstået dette princip vil det være meget nemt at få denne del erstattet med en model. Se blandt andet dette eksempel fra udvikleren.dk som er rigtigt godt til at lære det basale i MVC 3.
Ret din action Kamera således:
public ActionResult Kamera(string kameranavn)
{
        if (kameranavn == null)
                return View("StandartView");
        Kamera visKamera = new Kamera() { navn = kameranavn }
        return View(visKamera);
}

7) Test dit StandartView
Start din applikation og naviger til
/Produkter/Kamera
Her skulle dit standart view gerne vises.

8) Test dit DetaljeretView
Tilføj nu et kamera navn som du ved at din model kan vise eller som du har hardcodet ind i din controller ligesom det jeg har gjort i step 6. Nu skulle du gerne få vist dit detaljerede view.

Er noget som man rimeligt hurtigt kommer til at få brug for synes jeg og som er rigtigt vigtigt og fedt at kunne i forbindelse med arbejde med MVC 3.

Så ja det kan sagtens lade sig gøre, man skal bare lige vide hvordan. Derfor jeg deler med jer derude og vil hjælpe jer som mig selv til at forstå sådanne ting og blive bedre.

User experience er omkring de små detaljer

At udvikle dit indhold til altid at se ens ud i alle browsere kan være svært, men jeg er selv stødt på noget som for mig var lige så svært.
Nemlig det at dit indhold kan skifte position alt efter om du har scroll på din side eller ikke.
Hvis din side bruger procentvise bredder så vil din side tilpasse sig til brugerens skærm, men problemet er så at hvis fx din menu skal stå 80% til højre - altså næsten helt til højre men ikke helt.
Dette er et problem hvis du fx på din forside har en side med ikke specielt meget indhold, og denne laver ikke vertikal scroll og det ser fint ud med din menu, men så trykker du på det næste link og her er der masser af indhold som gør at din side får scroll på. Det i sig selv gør ikke noget, men fordi du bruger procentvise angivelser  så bliver browseren lige pludseligt mindre - fordi det viste område er nu browserens bredde minus den bredde som scrollbaren fylder.

På grund af dette så skifter din menu nu pludselig position og det vil derfor ligne den "hopper" når du skifter i mellem de to sider.

Det er ikke nemt at løse, og de fleste ville nok også være ligeglad men fordi jeg er så skide perfektionistisk så blev jeg simpelthen nød til at gøre noget ved det.
Derfor satte jeg mig for at uanset om der er scroll, eller ikke på min side skulle dens positioner være ens således at min top-menu ikke ville "hoppe".

Dette kunne så løses såre simpelt, men hvis man ikke lige ved det så er det nemlig ikke så nemt at finde ud af, men det jeg gjorde var at tænke logisk.
Det gode er at din skærm har en højde, og du har et body-element hvor alt dit html markup ligger indeni - altså dit indhold og din side.
Hvis dit indhold er større (læs: højere) end skærmens højde vil dette give dig en scrollbar ude i siden.
Egentligt ret simpelt, men de færreste tænker over det.

Dermed kan du tilpasse hvor bred din side skal være når der kommer scrollbar på således at for brugeren ser det ud som om at din menu ikke flytter sig, selvom den faktisk netop der flytter sig mere til højre for at stå på "samme position" som den gjorde inden der kom scrollbar på din side.

Jeg har nu fået det til at virke nogenlunde godt, men er ikke hundrede procent perfekt - men nu er det godt nok til jeg ikke tror de fleste vil ligge mærke til det, og jeg gider ikke spilde mit krudt på at få det pixelpræcist for der er andre sjovere ting at tage fat på.

Nedenstående kode gjorde det for mig, jeg har ikke lige haft tid til at gøre den "produktionsklar" så der er meget debug data, men den løste mit problem og kan være det kan være inspiration for andre. Det med at gøre nedenstående kode lækker må vente til jeg får bedre tid.



function FixMenuWidth() {
            //alert("Fix menu fix");

            var myval = getVerticalOverflow("ThisIsBody");
            var obj = document.getElementById("ThisIsBody");
            var contentHeight = obj.clientHeight;
            var screenHeight = $(window).height();
            //    alert("content: " + contentHeight + " - screen: " + screenHeight);

            if (contentHeight >= screenHeight) {
                $("#header").css("padding-right", "0px");
                $(".center-box").css("width", "90.7%");
            }
            //alert("done");

        }

function getVerticalOverflow(id) {
            var obj = document.getElementById(id);
            if (obj.innerHTML.length == 0) return 0;
            var overflow = obj.scrollHeight / obj.clientHeight;
            //alert(obj.scrollHeight + " " + obj.clientHeight);
            return overflow;
        }

        /**
        * Gets the horizontal overflow ratio for a div, if there is overflow.
        * If there is no overflow, this value will be 1.
        */
        function getHorizontalOverflow(id) {
            var obj = document.getElementById(id);
            if (obj.innerHTML.length == 0) return 0;
            return obj.scrollWidth / obj.clientWidth;
        }

Lister og modeller i MVC 3 (Razor engine)

Jeg mener selv jeg har rimeligt styr på MVC 3 (og lidt på MVC 4) efterhånden, og har arbejdet på flere forskellige principper og lært meget forskelligt omkring hvordan ting gøres i MVC 3 fremfor Webforms. Det er lige mig og jeg bliver så meget mere glad for den måde at arbejde på.

I dag ville jeg så lige hurtigt teste noget og udskrive en liste med div's, hvilket jeg faktisk ikke har gjort endnu fordi det virkede lige til efter at have læst flere guides omkring emnet så det gad jeg ikke gøre for det kunne ikke være specielt svært.
Men det virkede bare ikke.

Jeg har så erfaret i aften at det var på grund af lidt forvirring omkring begreber.
@[variabel-her] betyder du får noget ud her
Dette kunne for eksempelvis være:
@ViewBag.user som ville udskrive værdien fra user-property sat i din Controller. Dette kunne bruges til at sige om der skrives Hejsa Gæst eller Hejsa Laurits.

Når man vil have afviklet en stump kode og noget udført så kan man lave denne logik således:
@{ logic goes here }
Et godt eksempel herpå er
@{
    ViewBag.Title = "TheTest";
}

Dog hvis man vil have noget udført, såsom if-statement eller for-loops etc. så skal man gøre det anderledes. Nemlig:
@for (int i = 0; i < 3; i++)
{
    <div>Look at this: @i</div>
}

Hvis man bruger en model ved hjælp af dette: @model TestingList.Models.EmployeeList
Kan man benytte nedenstående:
@foreach (var employment in Model.EmploymentList)
{
    <div>@employment.Titel</div>
}              

Det som forvirrede var hvornår man brugte @{} og @[statement], for troede at et for-loop i MVC3 skulle ind i @{ something something }, men man skal udelade det og så finder MVC3 selv ud af at fjerne {} inde midt i det hele.

Tænke udenfor boksen

Der er rigtigt mange der gerne vil være sådan en der tænker anderledes, men ikke alle det falder naturligt, men gør det åbenbart for mig.
Jeg tænker anderledes og har de typiske systemudvikler kompetencer, men samtidigt også den side der gør at jeg har en god forretningssans. Det er ikke noget jeg tænker over, men har fået det og vide igennem kolleger, arbejdsgivere og nu indenfor meget kort tid og er noget som andre der ikke kender mig også kan mærke.

Jeg tror måske det er min kreative side jeg har fra min mor af som var maler og generel kunstner. Jeg ligger ikke selv mærke til det ud over når nogen fortæller mig det, men så kan jeg også godt selv se det.

Jeg kan se på mine projekter når jeg nu tænker tilbage det har hjulpet mig og kunder utroligt meget fordi jeg er kreativ og idefyldt for at levere den bedste løsning for kunden.
Fordi jeg tænker udenfor boksen så ser jeg andre muligheder og løsningsforslag end der måske ellers foreslås fordi mine metoder og tankegang er anderledes.
Det jeg fokuserer meget mere på er at levere en god intuitiv oplevelse for kunden for som Google også siger.
Det er meget mere vigtigt at lave det rigtige DET end at udvikle det rigtigt.
Man kan sagtens udvikle noget korrekt, men hvis det ikke er det som man skal ende med og som løser opgaven bedst så hjælper det ikke noget at have lavet det korrekt.
Så er meget bedre at fokusere på at lave det rigtige DET fra starten af og så kan de andre ting komme bagefter for målet er at få løst opgaven korrekt.
Det kan jeg se i de anbefalinger og udtalelser jeg får i øjeblikket, både i papirformat, men også på LinkedIn hvor jeg begynder at sætte lidt mere fokus på min professionelle profil ud af til.

Levere en god user experience på webben (med AJAX)

Jeg sad netop og tænkte på noget med hvordan man gerne vil lave sin side så den er hurtig og effektiv for brugerne, leverer en god oplevelse med at den ikke blinker eller man skal klikke en masse uden at have behov for det, og samtidigt vil man også gerne have at Google kan indeksere alt dit indhold således at der faktisk kan komme nogle brugere til din side.

Min tanke var et tænkt eksempel, men pludselig kom jeg til at stille mig selv en masse spørgsmål om hvordan man kunne løse det på en pæn brugbar måde som samtidigt var noget Google kunne indeksere og præsentere i sine søgeresultater.

For at levere en god user experience ville jeg starte med at levere en side med 10-20 produkter (eller hvad du nu end skal vise at content på din side - kan være referencer, personer, CV'er, opskrifter, you-name-it).
Når man så scroller ned af siden og når 90% ned så vil Javascript automatisk begynde at hente og indlæse de næste 10-20 resultater for at brugeren ikke skal trykke en masse eller gå til næste side, men blive på siden og få en lækker effektiv og hurtig oplevelse som de kan blive glade for.

Dette virker kun med javascript aktiveret, og problemet er at Google ikke kan afvikle dette og dermed ikke indeksere andet end det din side starter med at vise, hvilket jo ikke er ønskværdigt.

Min løsning efter nogle timers fumlen med flere forskellige løsninger og måder at løse dette på var at den bedste måde var både for brugere, Google og mig selv at lave det således:
Steps:

1. Man starter med at lave en side der kan levere de 10-20 resultater lige så snart du går ind på siden.
2. I bunden af disse resultater laver man en knap ("Load more") der sender dig til en ny url som leverer flere resultater.
3. Man bygger javascript ovenpå der via AJAX kan hente flere data når man er kommet 90% ned på siden. Denne skjuler samtidig den knap for enden af siden.
4. Javascript modtager de nye data og putter dem ind på siden og viser knappen igen og man kan således scrolle længere ned på siden.
5. Man indbygger en fail-safe således at når man har fået automatisk loadet x sider så skal man aktivt trykke på knappen for at få loadet flere data, da jeg har oplevet at nogle gange så kan man komme i en situation hvor du altid vil få vist 90% af siden på skærmen og dermed vil din browser nu begynde at blive ved med at loade og loade og loade for evigt indtil der ikke er mere at hente og brugeren kan ikke stoppe det. Dette er ikke en situation man ønsker at være i.
6. Man bygger nu ovenpå noget javascript som sætter et checkpoint i din browseres historik, og som kan ændre din URL således at når du får vist 60 resultater på din skærm skal du kunne sende dette til en ven og han får vist de samme 60 resultater på sin skærm også. Godt nok vil serveren levere dem til ham når siden vises første gang, hvor du ville ha fået dem lazy-loadet efter at have scrollet ned, men i sidste ende er resultatet det samme.

Det gode ved dette er at den knap for enden af din side vil gøre at Google vil kunne klikke på den knap og få samme resultat vist og indeksere dem selvom deres crawler ikke virker med Javascript og kan få det leveret på den smarte effektive og lækre måde, men de links som Google vil levere vil stadig give det samme for dig når du går ind på dem og have alt dit indhold som det skal.

Et lille eksempel:
Du har en side kaldet DetBedsteIVerden.dk og vil gerne have vist nogle produkter på denne side.  
Dette eksempel bygger udelukkende på ASP.NET MVC.
Step 1: Lave en Controller der kan vise produkter.
Denne skal hedde ProductController, og have et view tilknyttet sin Index() action. Her kan du levere de 20 første produkter som du ønsker at vise på siden.
Dermed kan du nu skrive DetBedstIVerden.dk/Products/
Step 2: Håndtere flere sider.
Nu skal du så udbygge din Controller (ProductController) således den kan håndtere flere sider end kun din nuværende /Products/ som leverer de 20 første produkter.
Dermed skal du lave en ny action kaldet Side og som tager en int som parameter og som er nullable. Nullable kan man gøre ting ved at putte et spørgsmålstegn bagved en type.
Den skal dermed se ud som følger:

public ActionResult Side(int? pagenumber)
        {
            int numberOfResults = 20;
            if (pagenumber.HasValue)
                numberOfResults = numberOfResults * pagenumber.Value;
            return View();
        }
Nu vil du nu kunne skrive: DetBedstIVerden.dk/Products/Side/2

Ovenstående gør at fra standart af vil der ikke stå "Products/Side/1" og pagenumber vil dermed være null, og derfor har vi en default value på 20 som sættes, og hvis der kaldes "Products/Side/1" eller "Products/Side/2" vil denne action nu give et højere antal resultater tilbage - selvfølgelig forudsagt at dit view bruger dette (eventuelt leveret igennem model eller ViewBag-objektet).

Step 3: Lave interaktion for brugeren.
Lige nu kan brugeren gå til side 2 hvis han vil ændre URL'en og tilføje "/Products/Side/" og så det nummer han vil til - det er ikke brugbart.
Så i bunden af siden laver du en knap der kalder næste side.
Step 4: Effektificere dataoverførsel og få en hurtigere side
Da vi nu har lavet knappen kan brugeren nu se alle dine forskellige produkter uden at ændre URL'en. Desværre gør dette at brugeren ret hurtigt skal klikke ret meget (for hver 20 resultat), og serveren skal arbejde ret meget for at levere de samme resultater som før, og så de næste 20 oveni (side 2 har de 20 første fra side 1 og 20 næste fra side 2), plus at brugeren får ikke en god oplevelse ud af at udføre en POST og reloader hele siden igen hver gang de trykker på knappen. Derudover bliver dette også langsommere fordi din side skal hentes med alt igen (alle billeder og andet data ud over dit skiftede indhold), og så skal browseren til at rendere dette igen hver gang du trykker på knappen.

For at effektificere dataoverførselen kan vi derfor sørge for at det eneste der skal sendes er det som der er behov for og som skal ændres - altså de nye data.
Dette kan man gøre med noget AJAX via Javascript som kan hente det nye indhold og kan indsætte dette på vores side. Dette gør at du reelt kun henter de nye data og dermed gør at din side bliver langt mere effektiv da du ikke får at der skal hentes andet end content og det er det vi gerne vil have.

Man kan sikre sig at siden vil virke både med javascript aktiveret og også uden. Ved at du når siden leveres laves til at din knap virker uden javascript kan man via JavaScript ændre dette således at når man klikker på knappen så udfører noget AJAX i stedet. Således at hvis JavaScript ikke virker vil den ikke ændre hvad der sker når man klikker på knappen, men hvis det er aktiveret vil det ændre hvordan tingene skal udføres.

Step 5: Lazy load og god user experience
Det med at brugeren skal trykke på knappen for hver 20 resultater gør at brugeren skal interagere meget med siden for at få det resultat de ønsker.
Så i stedet for at at brugeren skal klikke på en knap hele tiden for at se det indhold din side leverer, hvilket ikke giver brugeren en god brugeroplevelse og user experience.
Dermed vil vi gerne sørge for at javascript automatisk vil udføre det som knappen gør automatisk når man kommer 90% ned på siden, med en lille twist som gør at når siden har gjort dette x antal gange så skal man aktivt trykke på knappen.
Dette er ligesom Google's billedsøgning, og er fordi at der er tilfælde i skærmstørrelse der gør at du hele tiden vil få vist 90% af siden på din skærm så snart den loades og dermed ville gå i en dead-lock og blive ved med automatisk at loade de næste resultater indtil der ikke er flere uden at brugeren kan stoppe dette.
Det er ikke et scenarie man vil udsætte sine brugere for uanset hvad er det slet ikke god brugeroplevelse og user experience.

Efter disse steps har man en side der fungerer med og uden javascript, som er effektiv i datatransport og som er hurtig som Google er glad for samtidigt med dine brugere, Google kan indeksere den og sørge for at brugerne får en god fornemmelse fordi siden er effektiv og smart så de ikke skal trykke og interagere med siden hele tiden for at udføre det formål siden har.

ASP.NET MVC med mange routes

Hvis man ønsker at have forskellige routes til forskellige formål så kan det give nogle udfordringer som jeg i dag har været lidt igennem og ville notere til mig selv fremover og dele med andre der står i samme situation.

Man skal starte med laveste fællesnævner (altså den korteste URL og route), men det som er specielt er at nogle gange er det ikke denne man ønsker at starte med (hvilket MVC gør - fordi den når til den første og prøver den af og hvis den fungerer så leverer den resultatet videre.

Min situation var at jeg havde en Controller kaldet "Summerhouse", som ikke tager nogen action, men "blot" et tal for hvor mange der skulle vises.
Den bliver defineret således inde i Global.asax:
routes.MapRoute("Summerhouse",
                            "{controller}/{numberToShow}",
                            new { controller = "Summerhouse", action = "Index", numberToShow = UrlParameter.Optional }
);

Denne skal placeres over ens "default"-route som ser således ud:
routes.MapRoute(
                "Default", // Route name
                "{controller}/{action}/{id}", // URL with parameters
                new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
);

Problemet med dette er at nu vises "Summerhouse" som standart når ens side loades, og det er ikke lige sikkert man har det ønske men rent faktisk gerne vil vise "Home" fra standart.

Dette kan løses således:
routes.MapRoute(
                "Start", // Route name
                "{controller}", // URL with parameters
                new { controller = "Home", action = "Index"} // Parameter defaults
);

Denne er kortere og defineret før som gør at denne vil fange din start-side og vise den, men mere avancerede som URL's "/Home/About/" vil stadig blive fanget inde i den nedeste definerede "Default".