0
Pamela
bringing back the pleasure
  of hand-written HTML

         Sébastien Pierre, Datalicious
         @Montréal Python...
Less
 Is
More
Less Typing
      Is
More Thinking
 (and faster prototyping)
As designers
we need to turn an idea
    into a prototype
         FAST !
Plain HTML



Too Many Typos
     with
Big documents
Plain HTML



Too Much Typing
     with
 Modern HTML
Modern HTML
                               <html>
                                <body>
                                 ...
Modern HTML               We add a lot more
                                              <div>s and <span>s
             ...
Modern HTML
                                              <html>
                                               <body>
   ...
Pamela :
simply syntax sugar for html
       (not a templating language)
Feature 1: Indentation-based

  Python does it well
  No more oops, I forget to close my <div>


<html
| <body
| | <h1:Pam...
Feature 1: Indentation-based

  Python does it well
  No more oops, I forget to close my <div>

    Here the Python-style ...
Feature 1: Indentation-based

  Python does it well
  No more oops, I forget to close my <div>

                          ...
Feature 1: Indentation-based

  Python does it well
  No more oops, I forget to close my <div>


<html
| <body
| | <h1:Pam...
Feature 2 : ID and CSS shorthands

  Classes and IDs used a lot by JS libs (jQuery, Prototype,          )

  We use them a...
Feature 2 : ID and CSS shorthands

  Classes and IDs used a lot by JS libs (jQuery, Prototype,          )

  We use them a...
Feature 2 : ID and CSS shorthands

  Classes and IDs used a lot by JS libs (jQuery, Prototype,          )

  We use them a...
Feature 2 : ID and CSS shorthands

  Classes and IDs used a lot by JS libs (jQuery, Prototype,          )

  We use them a...
Pamela in Practice
Pamela in Practice
Pamela in Practice
Pamela in a Nutshell

Faithful to HTML/CSS
  Syntax is a variant of HTML, using CSS selector conventions

Less errors, mor...
The end



     Thank you !
www.github.com/sebastien/pamela
         www.datalicious.ca
       sebastien@datalicious.ca
Upcoming SlideShare
Loading in...5
×

Pamela - Brining back the pleasure of hand-written HTML - Montréal Python 8

2,259

Published on

Pamela allows you to write HTML faster by provider a CSS-savvy Python-inspired syntax that will reduce the risk of errors and make you more productive !

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
2,259
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Pamela - Brining back the pleasure of hand-written HTML - Montréal Python 8"

  1. 1. Pamela bringing back the pleasure of hand-written HTML Sébastien Pierre, Datalicious @Montréal Python 8, Jul. 2009 www.datalicious.ca | github.com/sebastien/pamela
  2. 2. Less Is More
  3. 3. Less Typing Is More Thinking (and faster prototyping)
  4. 4. As designers we need to turn an idea into a prototype FAST !
  5. 5. Plain HTML Too Many Typos with Big documents
  6. 6. Plain HTML Too Much Typing with Modern HTML
  7. 7. Modern HTML <html> <body> <div class="section"> <html> <div class="header"> <body> <h1 class="title">My First <h1>My First HTML Page<h1> HTML Page</h1> Hello, World ! </div> </body> <div class="content"> </html> Hello, World ! </div> </div> </body> </html>
  8. 8. Modern HTML We add a lot more <div>s and <span>s to hook CSS rules <html> <body> <div class="section"> <html> <div class="header"> <body> <h1 class="title">My First <h1>My First HTML Page<h1> HTML Page</h1> Hello, World ! </div> </body> <div class="content"> </html> Hello, World ! </div> </div> </body> </html>
  9. 9. Modern HTML <html> <body> <div class="section"> <html> <div class="header"> <body> <h1 class="title">My First <h1>My First HTML Page<h1> HTML Page</h1> Hello, World ! </div> </body> Which means <div class="content"> </html> more chances of Hello, World ! forgetting to close </div> a <div> or <span> </div> </body> </html>
  10. 10. Pamela : simply syntax sugar for html (not a templating language)
  11. 11. Feature 1: Indentation-based Python does it well No more oops, I forget to close my <div> <html | <body | | <h1:Pamela : Bringing back the pleasure of hand-written HTML ! | | Check out Pamela <a(href=http://github.com/sebastien/pamela):here>
  12. 12. Feature 1: Indentation-based Python does it well No more oops, I forget to close my <div> Here the Python-style indentation <html | <body | | <h1:Pamela : Bringing back the pleasure of hand-written HTML ! | | Check out Pamela <a(href=http://github.com/sebastien/pamela):here>
  13. 13. Feature 1: Indentation-based Python does it well No more oops, I forget to close my <div> We use a small variant <html of the HTML element syntax | <body | | <h1:Pamela : Bringing back the pleasure of hand-written HTML ! | | Check out Pamela <a(href=http://github.com/sebastien/pamela):here> <a href=http://github.com/sebastien/pamela>here</a>
  14. 14. Feature 1: Indentation-based Python does it well No more oops, I forget to close my <div> <html | <body | | <h1:Pamela : Bringing back the pleasure of hand-written HTML ! | | Check out Pamela <a(href=http://github.com/sebastien/pamela):here> <a href=http://github.com/sebastien/pamela>here</a> # EOF No explicit closing needed !
  15. 15. Feature 2 : ID and CSS shorthands Classes and IDs used a lot by JS libs (jQuery, Prototype, ) We use them a lot with CSS frameworks (Blueprint, 960,...) <div#content | <div.section | | <h1.title:Pamela : Bringing back the pleasure of hand-written HTML ! | | Check out Pamela | | <a#pid.pamela.link(href=http://github.com/sebastien/pamela):here>
  16. 16. Feature 2 : ID and CSS shorthands Classes and IDs used a lot by JS libs (jQuery, Prototype, ) We use them a lot with CSS frameworks (Blueprint, 960,...) IDs are denoted as in CSS selectors #<ID_NAME> <div#content | <div.section | | <h1.title:Pamela : Bringing back the pleasure of hand-written HTML ! | | Check out Pamela | | <a#pid.pamela.link(href=http://github.com/sebastien/pamela):here>
  17. 17. Feature 2 : ID and CSS shorthands Classes and IDs used a lot by JS libs (jQuery, Prototype, ) We use them a lot with CSS frameworks (Blueprint, 960,...) Same for classes <div#content .<CLASS_NAME> | <div.section | | <h1.title:Pamela : Bringing back the pleasure of hand-written HTML ! | | Check out Pamela | | <a#pid.pamela.link(href=http://github.com/sebastien/pamela):here>
  18. 18. Feature 2 : ID and CSS shorthands Classes and IDs used a lot by JS libs (jQuery, Prototype, ) We use them a lot with CSS frameworks (Blueprint, 960,...) <div#content | <div.section | | <h1.title:Pamela : Bringing back the pleasure of hand-written HTML ! | | Check out Pamela | | <a#pid.pamela.link(href=http://github.com/sebastien/pamela):here> You can mix classes and ID, ID always comes first
  19. 19. Pamela in Practice
  20. 20. Pamela in Practice
  21. 21. Pamela in Practice
  22. 22. Pamela in a Nutshell Faithful to HTML/CSS Syntax is a variant of HTML, using CSS selector conventions Less errors, more time Python-style indentation and shorthands make you safer and faster Flexible Can be used as a command-line processor or as a Python module Powerful Manage whitespace, include files, add variables and more !
  23. 23. The end Thank you ! www.github.com/sebastien/pamela www.datalicious.ca sebastien@datalicious.ca
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×