Sort/hvide billeder med CSS

Hvis du skal have lavet et billde i sort/hvid via CSS gøres det på denne måde:

img.grayscale {
   filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */    

   filter: gray; /* IE6-9 */    

   -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */

}

For at slå greyscale fra igen

img.grayscale.disabled {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");  
  -webkit-filter: grayscale(0%);
  }

Opret custom Ajax-loading-file

Opret dit eget "loading-icon" her http://ajaxload.info/

Inline vs. Embedded vs. Extended CSS

Har altid brugt fordelen ved inline CSS i udformningen af dynamiske sitet.
Her et exempel hvor farven kan ændres via ASP-variabler inline.

<span style='bgcolor:#<%=bgColor%>; color:#<%=color%>'>dynamisk farver</span>

Samme version kan også bruges som Embedded CSS, men ikke som Extended CSS

jQuery ScrollTo - animeret scroll-funktion

Hvis man vil lave en animeret scroll-funktion til sine sider og lave en smooth scroll til sit anchor kan det gøres vha. jQuery.

<script src="jquery.js" type="text/javascript"></script>
<script>
function goToByScroll(id){
   $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}
</script>

'slow' kan med fordel udskiftes med 1000 (svarer til slow i millisekunder), så der kommer til at stå:

   $('html,body').animate({scrollTop: $("#"+id).offset().top},1000);

Her er a href'en...

<a href="javascript:void(0)" onClick="goToByScroll('1')">Go to anchor 1</a>
<a href="javascript:void(0)" onClick="goToByScroll('2')">Go to anchor 2</a>

Her linkes til id="1" og id="2" som kan sættes på h1, h2, p, span, osv.

Exempel:

<h1 id="1">Overskrift</h1>

HTML5 og CSS3

Hvad understøttes af hvilke browsere. Det kan være svært at finde ud af.

Her er to gode links, der giver et hurtigt overblik:
HTML5 & CSS3 Readiness
When can I use...

HTML5 storage-objekt

Lagring af data 
HTML5 tilbyder to nye objekter til lagring af data:
- localStorage - gemmer data uden tidsbegrænsning
- sessionStorage - gemmer data for en session

Tidligere blev dette gjort med cookies. Cookies er ikke egnet til store mængder data, da de hentes ved hver eneste anmodning til serveren, hvilket gør metoden meget langsom og in-effektiv.

I HTML5, er dataene lagret og bruges kun når de bliver spurgt om. Det er muligt at gemme store mængder data uden at påvirke webstedets ydeevne.

En hjemmeside kan kun få adgang til data lagret af sig selv.

HTML5 bruger JavaScript til at lagre og få adgang til data.

localStorage Object
localStorage objekt gemmer data uden tidsbegrænsning. Disse data vil være tilgængelig den næste dag, uge ​​eller år.

<script type="text/javascript">
  localStorage.lastname="Jensen"
  document.write(localStorage.lastname)
</script>

sessionStorage Object
sessionStorage objekt gemmer data for en session. Data slettes, når brugeren lukker browser-vinduet.

<script type="text/javascript">
  sessionStorage.lastname="Jensen"
  document.write(sessionStorage.lastname)
</script>

HTML5 supercookie

Den nye standard HTML5 er kommet for at blive. 
Men det er ikke uden problemer. Vi snakker supercookies og browser security.

Det vil blive meget nemmere i fremtiden for hackere at få personlige oplysninger, da browseren nu indeholder langt flere oplysninger og ikke kun tracker de steder du har besøgt via de lagrede cookies. Dermed bliver browseren genstand for nye type angreb med fx. supercookies.

Specielt vores mobiltelefoner kommer under angreb, fordi vi bruger dem mere og mere til at betale for mange ting med. Mobilen et let offer for hackere.

Og på den måde HTML5 er skruet sammen på gør det det meget sværere for programmører at gøre websites sikre.

Men mon ikke W3.org får styr på dette?!

Læs mere i disse artikler fundet på BBC, Computerworld, m.fl.

• http://www.bbc.co.uk/news/technology-16005053
• http://www.networkworld.com/news/2010/082010-html5-raises-new-security.html
• http://www.computerworld.com/s/article/358181/European_Group_Finds_HTML5_Security_Gaps
• http://www.julianevansblog.com/2011/09/html5-privacy-and-security-could-be-a-persistent-problem.html

Hardboiled Web Design

Har gennem de sidste par nætter slugt siderne i Hardboiled Web Design af Andy Clarke.
Fantastisk bog, hvis man skal i gang med HTML5 og CSS3, specielt fordi den tager browser-problemerne seriøst.

Der er CSS-exempler til Firefox, Chrome, Safari og Explorer både for PC og Mac. Og da der er så stor forskel på hvordan fx. Firefox viser text på PC og Mac er bogen glimrende som opslagsværk efterfølgende. En god julegaveidé.

Og det er nu engang stadig rarere at læse i bog end at google :-)

Integreret CSS3 og DB Inline scripts

Har med mit seneste projekt www.skæppeskønt.dk kastet mig ud i HTML5 og CSS3.
Og det ikke uden problemer.
Problemerne opstår fordi der skal laves extra mange styles, da stort set hvert eneste browser på markedet viser siderne forskelligt.
Firefox viser ikke texten ens på PC og Mac til trods for det er samme version. Windows 7, Vista og XP viser heller ikke det samme til trods for at browser-versionen er den samme på alle systemer.

Ajax, jQuery tips and tricks

Sådan ender det jo når man sidder og surfer.

Jeg faldt lige over http://cssglobe.com/post/9801/easy-paginate-jquery-plugin-for-pagination. herudover er der mange andre fede scripts og tutorials

Og denne her http://superdit.com/category/freebies/

TOOLTIPS
http://superdit.com/2011/01/20/jquery-tooltip-plugins-and-tutorial-collection/
http://vadikom.com/demos/poshytip/

13 gode jQuery-slider-links
http://webdesignledger.com/tutorials/13-super-useful-jquery-content-slider-scripts-and-tutorials

TEMPLATES
http://www.os-templates.com/

HTML5

Surfede lidt rundt efter inspiration til HTML5 og lavede denne liste:

• Dive Into HTML5
  http://diveintohtml5.org/
• HTML5 Rocks
  http://slides.html5rocks.com/#landing-slide
• Latest in HTML5
  http://html5-demos.appspot.com/static/html5-whats-new/template/index.html
• The Expressive Web
  http://beta.theexpressiveweb.com/
• HTML5 WoW
  http://www.htmlfivewow.com
• Frontend Developer
  http://www.front-end-developer.com/ 
• HTML5 Boiler Plate
  http://html5boilerplate.com/
• HTML5 Doctor
  http://html5doctor.com/
• HTML5 Gallery
  http://html5gallery.com/

CSS3 utilities

Nogle links omhandlende CSS3 - nogle bedre end andre :-)

• CSS3 Please- http://css3please.com/
• Ultimate CSS Gradient Generator - http://www.colorzilla.com/gradient-editor/
• CSS3 Generator - http://www.css3generator.com/
• CSS Desk - http://cssdesk.com/
• CSS Prefixer - http://cssprefixer.appspot.com/
• Normalize.css - http://necolas.github.com/normalize.css/
• CSS Crush - http://the-echoplex.net/csscrush/
• CSS3 Sandbox - http://westciv.com/tools/gradients/
• Ceaser CSS Easing Tool - http://matthewlein.com/ceaser/
• CSS3 Transformer - http://westciv.com/tools/transforms/index.html
• When can I use - http://caniuse.com/
• CSS3 Playground - http://css3.mikeplate.com/
• CSS3 Button Generator - http://css3button.net/
• CSS3 Maker - http://css3maker.com/
• Layer Styles - http://layerstyles.org/

Sådan...

Efter mange år med Internettet som indtægtskilde, har jeg endelig besluttet at oprettet min egen blog. Bloggen er tænkt som inspiration, men også som en huskeliste til mig selv (og forhåbentligt andre).

Man støder tit på en lille god kode-stump, men et år efter kan man ikke finde den igen. Derfor vil jeg prøve at skrive om de ting jeg støder på - problemer og løsninger - gennem min færten på nettet.

Jacob Jensen, 26. juli 2008