Clean your HTML with Bleach #

When developing for the web a time will come when you’ll need to sanitize HTML. If you need to do this in Python then you should check out Bleach.

Bleach is an HTML sanitizing library that escapes or strips markup and attributes based on a white list. Bleach can also linkify text safely, applying filters that Django’s urlize filter cannot, and optionally setting rel attributes, even on links already in the text.

Even if all you want to do is apply rel='nofollow' to the links in user generated content, Bleach has you covered. So, check it out the next time you need to clean some HTML.

Dominate HTML in Python #

Have you ever wished that you had a sweet little API to generate HTML in Python? Dominate is probably what you are looking for.

Dominate is a Python library for creating and manipulating HTML documents using an elegant DOM API.

Now, I’m a self admitted HTML purist, but look at how the dominate API works.

from dominate.tags import ul, li
list = ul()
for item in range(4):
    list += li('Item #', item)

If done correctly HTML generators can blend in with your code nicely.

Checkout Dominate the next time you’re looking for a nice native HTML generator API for python.

Learning HTML basics with Thimble from Mozilla

At some point you may have been asked to share your coding knowledge with friends, kids in your family, or just had a desire to teach others in the community. If you’re going to start with the basics of HTML, especially with younger students, it’s going to be so much easier with Thimble from Mozilla. […]

Write emails in Markdown and render them with Markdown Here! #

Adam Pritchard has released a nice Browser Plugin that allows you to write Markdown in text fields then render it. From the About page:

I created Markdown Here when I realized that I was having much more fun writing README files in Markdown than I was writing email — especially if the email contained any significant structure or code snippets.

Current Browsers that support markdown here can be seen on the Get it! page:

  • Chrome/Chromium
  • Firefox/Pale moon
  • Safari (as of May 19, 2013)
  • Thunderbird, Postbox, Icedove (email clients)

You can view the project website or view the source on GitHub.

to-markdown is an HTML to Markdown converter written in JavaScript #

From the readme:

There are a couple of known issues surrounding blockquotes in lists (and perhaps vice versa) — #2; and also how to handle HTML elements outside of the markdown subset (keep them/strip them?) — #3.

But this looks like a useful HTML to Markdown converter written in JavaScript. While this might just be a basic implementation that’s not yet fully bulletproof, creator Dom Christie says, “contributions are welcome.”

Check out the source on GitHub and the hosted demo that lets you paste in HTML and get back the Markdown output.

Nodefront – Node.js-powered rapid front-end development utility #

Nodefront from Karthik Viswanathan aims to make a front-end developer’s life easier. Built in Node.js, Nodefront bundles a local web server for serving up HTML, CSS, and JavaScript assets and supports live reloading via web sockets. Additionally it ships with a command line interface:

  • nodefront compile – Compiles Jade and Stylus files to HTML and CSS. Can compile upon modification, serve files on localhost, and even automatically refresh the browser/styles when files are changed.

  • nodefront fetch – Automatically fetches CSS/JS libraries for use in your project. Provides an interactive mode to add new libraries.

  • nodefront insert – Inserts CSS/JS libraries directly into your HTML or Jade files.

  • nodefront minify – Minifies CSS and JS files. Can also optimize JPG and PNG images.

Karthik has put together a twenty minute screencast for a full demonstration.

Check out the project web site or source on GitHub for more.

Holmes – CSS based error detection, watson. #

A unique take on HTML ‘validation’, Luke Williams has made finding erroneous markup elementary. It’s a two step process: add the stylesheet to your markup, and add the following class to the <body> tag:

<body class="holmes-debug">

It will catch common errors, like give all <image> tags without an alt attribute a 2 pixel red outline. There are actually three colors, red (error), yellow (warning, potentially bad practice) and dark grey (deprecation). Hovering over most of these gives you a description, so you know what the problem is (or might be).

Checkout the source on GitHub!

Fixie.js – Dynamically generated filler content #

Ryhan Hassan has created a neat little JavaScript library that adds filler content to your HTML mockups. Using it is very simple, just add the fixie.js library to your HTML before the closing </body> tag, and Fixie looks for anything with a class of fixie.

<h1 class="fixie"></h1>
<p class="fixie"></p>

It’s smart enough to fill an <h1> tag with a phrase, a <p> tag with a paragraph, an <img> tag with an image, and so on. If you want to add fixie it to a container, it can handle that too!

By default, all images will be pulled from placehold.it, but changing that is very simple:

fixie.setImagePlaceholder('http://flickholdr.com/${w}/${h}/canon').init();

View the sample (refresh the page a few times to see the content generated dynamically) or browse the source at GitHub.

Rainbow.js – Simple syntax highlighting library written in JavaScript #

Craig Campbell, an employee at Vimeo, has created a very easy to use, lightweight (~3k) code syntax highlighting library written in JavaScript. Out of the box, Rainbow supports syntax highlighting for the following languages:

  • JavaScript, HTML, CSS, PHP, Python, Ruby, C, Shell, Scheme, Lua, C#

Adding support for your own languages is very easy, however, and theming is done entirely with CSS. If you don’t want to sweat the details of theming, you can use one of their many built-in themes (like the very popular solarized theme).

Getting started is easy:

<pre><code data-language="ruby">def greeting(name)
  puts "Hello there #(name)"
end</code></pre>

Then include your CSS theme in the <head> and rainbow.js (as well as whichever language[s] you want) before the closing </body>.

Checkout the demo or browse the source at GitHub. While you’re at it, feel free to fork the project and add support for your favorite language!

Chosen – jQuery plugin for user friendly select boxes #

Harvest, the team behind one of the earliest rails applications designed for business (rails 0.14.1), has a neat little project out there that helps “make unwieldy select boxes more friendly.” They call it Chosen, and it stays true to the motto “do one thing and do it well.”

After including jQuery (or Prototype), the Chosen stylesheet, and the appropriate plugin:

$(".some-select").chosen();

That’s it! You can now turn your boring old select boxes into:

After

Checkout the examples to see what else Chosen is capable of doing (and how good it looks doing it). You can also browse the source at GitHub.

Nokogiri 1.5.0 has been released! #

If you’re a Rubyist, and you have to work with XML, then you know and love Nokogiri. It’s a great way to parse all kinds of XML and HTML documents.

Today, the Nokogiri team has a big announcement: 1.5.0 is out! Why’s the “Y U NO RELEASE? Edition” so important? Well, if you’re using JRuby, no longer are you dependent on any C code via FFI: it’s all Ruby, all the way down. There’s also a nice little feature that lets you take a native Java XML document and parse it with Nokogiri without having to translate to text first.

You can see the full changelog here and the source here.

sparkup: A parser for a condensed HTML format #

Sparkup is just plain cool. You can write HTML in a CSS-like syntax, and have Sparkup handle the expansion to full HTML code. In short, Sparkup lets you write HTML code superfast!

Sparkup is written in Python, and requires Python 2.5 or newer (2.5 is preinstalled in Mac OS X Leopard). Sparkup also offers integration for common text editors. Support for VIM and TextMate are currently included.

Sparkup was written by Rico Sta. Cruz and was inspired by Zen Coding of Vadim Makeev. For those who may be familiar with Zen HTML, the syntax is forward-compatible with Sparkup (anything that Zen HTML can parse, Sparkup can too).

Usage and Installation

Download Sparkup from Github – you can download the latest version here.

TextMate

Simply double-click on the Sparkup.tmbundle package in Finder to install the bundle.

In TextMate, open an HTML file and type in something like …

#header > h1

Then, press Ctrl + E. Pressing Tab after the snippet is expanded will cycle through all your newly created empty elements.

VIM

Copy the contents of vim/ftplugin/ to your ~/.vim/ftplugin directory.

// Assuming your current dir is sparkup/vim/
$ cp -R ftplugin ~/.vim/

Command-line and others

Put Sparkup in your $PATH somewhere and then invoke it by typing:

echo "(input here)" | sparkup

… or this for a list of commands.

sparkup --help

NetBeans?

Check out the ZenCodingNetBeansPlugin.

Superfast HTML prototyping

This …

ul.feature-list > li*5 > h2 + p + a.button{Learn More}

Expands to this …

<ul class="feature-list">
    <li>
        <h2></h2>
        <p></p>
        <a href="" class="button">Learn More</a>
    </li>
    <li>
        <h2></h2>
        <p></p>
        <a href="" class="button">Learn More</a>
    </li>
    <li>
        <h2></h2>
        <p></p>
        <a href="" class="button">Learn More</a>
    </li>
    <li>
        <h2></h2>
        <p></p>
        <a href="" class="button">Learn More</a>
    </li>
    <li>
        <h2></h2>
        <p></p>
        <a href="" class="button">Learn More</a>
    </li>
</ul>

Take a peek at the readme for more details.

What about Haml, Jade, Slim, or … ?

Well, as it is right now, the project is only catering to the HTML market, but hopefully one of you fine folks out there will fork it and get to work.

Check out the Codes and Video Demo

[Source on GitHub] & [Video Demo]