Teach the Web

I just joined Teach the Web: a Mozilla Open Online Collaboration for Webmaker mentors May 2 – June 30 2013.

Important points of contact:
I'm looking forward to this.


Gradient background with SVG

This is not a discussion about CSS level 3 versus SVG. I'm just exploring the possibilities and this is just an example:
I would like to create a gradient color for a link on a website. It would be smart if it was reusable for more links with different colors.
  1. Create your link. Normally I will set the CSS display property to inline-block:
    a.mylink {
     color: white;
     background-color: orange;
     display: inline-block;
     padding: .6em;
     text-decoration: none;
  2. Create a SVG image, e.g. in svg-edit. If you open the XML editor in svg-edit you can copy the SVG markup.
    <svg xmlns="http://www.w3.org/2000/svg">
      <radialGradient id="svg_3" cx="1" cy="1" r="1.4">
       <stop offset="0" stop-opacity=".7" stop-color="#ffffff"/>
       <stop offset="1" stop-opacity="0" stop-color="#ffffff"/>
     <rect fill="url(#svg_3)" x="0" y="0" width="100%" height="100%" id="svg_1"/>
    As you can see the color of the gradient is white, so opening this document in a browser window would just display a white page. The gradient is used in a rectangel that fills the entire SVG image. The SVG document itself has no size, so it will just fill it's container.
  3. Go to The data: URI kitchen and generate a URI using the type image/svg+xml;charset=utf-8 checkmarking base64 and pasting in the SVG.
  4. Copy the resulting URI into you CSS:
    a.mylink {
     color: white;
     background-color: orange;
     display: inline-block;
     padding: .6em;
     text-decoration: none;
     background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KIDxkZWZzPg0KICA8cmFkaWFsR3JhZGllbnQgaWQ9InN2Z18zIiBjeD0iMSIgY3k9IjEiIHI9IjEuNCI%2BDQogICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3Atb3BhY2l0eT0iLjciIHN0b3AtY29sb3I9IiNmZmZmZmYiLz4NCiAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1vcGFjaXR5PSIwIiBzdG9wLWNvbG9yPSIjZmZmZmZmIi8%2BDQogIDwvcmFkaWFsR3JhZGllbnQ%2BDQogPC9kZWZzPg0KICA8cmVjdCBmaWxsPSJ1cmwoI3N2Z18zKSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgaWQ9InN2Z18xIi8%2BDQo8L3N2Zz4NCg%3D%3D');



Just a note to myself now that font-face is supported in all modern browsers.
10 Places to Get Free and Premium Webfonts


Choose Your Weapon

I'm completing a task at p2pu.org choosing my favorite HTML editor.
Normally I use Notepad++ on Windows, primarily be course:
  • it has code coloring
  • can change the format of a file
  • search and replace is easy to use – even if you have or more files
  • it has a lot of plug-ins like XML Tools and NppFTP
On Ubuntu I use Bluefish. It has some good features for editing HTML and a good file explorer panel.


Learn to write HTML by hand, literally

I'm completing a task at p2pu.org writing html by hand.
So, this is my well-form html page – even thought  have don this before, great fun.
There should be some kind of handwriting mode for html :-)


Douglas Crockford's præsentationsrække om JavaScript

Hvis man interesserer sig lidt for JavaScript er Douglas Crockford's præsentationsrække om JavaScript et must.

Om ikke andet er han til tider underholdende – på den programmeringsagtige måde.


Removing <br/> from product descriptions in Magento

With the new Magento 1.4 WYSIWYG editors were introduced for all textaera fields. The editor insert line breaks (\r\n) in the HTML code to make the code more readable (I guess). That's OK, but Magento still converts the text in the textarea to HTML like there was no markup resulting in too many line breaks in the HTML code.

To remove all the unnecessary br's in product pages:


echo $this->helper('catalog/output')->productAttribute($this->getProduct(), nl2br($_description), 'description')
change to:
echo $this->helper('catalog/output')->productAttribute($this->getProduct(), $_description, 'description')


echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description')
change to:
echo $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description')

Basically remove the nl2br() function where it is necessary.