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

  • 2,216 views
Uploaded 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 !

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 !

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • HAML solves this problem as well. Did you guys evaluate it as well?
    Also there is python port PyHAML
    Are you sure you want to
    Your message goes here
    Be the first to like this
No Downloads

Views

Total Views
2,216
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
8
Comments
1
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. Less Is More
  • 3. Less Typing Is More Thinking (and faster prototyping)
  • 4. As designers we need to turn an idea into a prototype FAST !
  • 5. Plain HTML Too Many Typos with Big documents
  • 6. Plain HTML Too Much Typing with Modern HTML
  • 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. 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. 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. Pamela : simply syntax sugar for html (not a templating language)
  • 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. 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. 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. 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. 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. 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. 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. 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. Pamela in Practice
  • 20. Pamela in Practice
  • 21. Pamela in Practice
  • 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. The end Thank you ! www.github.com/sebastien/pamela www.datalicious.ca sebastien@datalicious.ca