Insights from a Facebook engineer on the back of a horse.
Unless you’re starting from scratch, using XHP is most likely going to take some refactoring of old HTML-as-string code. The problem is that because of XHP’s auto-escaping to prevent XSS holes, you can’t include strings of HTML as children into XHP elements. Fortunately there’s something you can do to allow XHP to ignore certain strings and return them directly as HTML.…
I just added a new feature to XHP to allow you pass data automatically through the hierarchy of an XHP tree being rendered. That’s kind of a mouthful, but what it means is that you can set context (which is just a map of key/value pairs) on some parent element, and that context will be available on all rendered elements and their children. Let’s take a look at some examples to better…
My last post, Rendering NULL in XHP , surprised a bunch of people by the use of extending :x:primitive to handle children rendering before the parent’s rendering. So I thought I’d quickly discuss another useful trick you can do by extending :x:primitive , this one deals with getting just the children from elements that alter their children before rendering. There are a few cases where…
There are some at Facebook who have argued against returning null when rendering an XHP element. In fact, it’s actually against Facebook’s standards now. Personally, I prefer to structure my code to return null in XHP, but there definitely are pros and cons. I’ll cover the situations in which you might want to return null and what the alternatives could be, and then you can…
A new level of validation has been added to XHP which will allow you to type-check your array attribute keys and values. What this means is that while before this change you were only able to validate attribute types ( bool , int , string , etc.), now if the attribute is an array type you can validate its structure as well. The syntax matches the syntax to Facebook’s recently open-sourced…
I remember when we first added the children keyword to XHP. We had the problem that validating them was really cumbersome. Nearly every element was valid inside a <div> but not all (for instance <meta> ). Listing out every valid child wasn’t very elegant and certainly would cause problems for custom XHP components. Fortunately, the HTML spec categorized elements just for this purpose.…
This is the article I wanted to write ever since I started this blog. XHP is a really powerful tool, but like any tool you need to know how to use it for it to be really effective. Facebook has built a very powerful UI framework on top of XHP, but we had to change the way we think about object patterns to do it. I’ll get into that in a bit, but first I’m going to jump right into the…
Last night I added data- and aria- attribute support into XHP. I baked it into :x:composable-element directly instead of relying on previous methods which only added it to :xhp:html-element . I did this for a few reasons. First, I didn’t like the idea of getAttribute() and setAttribute() not being final within :x:primitive . Secondly, if you want to build a UI framework on top of :x:element…
Christina with my new horse, Handyman .
About every six to nine months or so, an engineer at Facebook tries to add a control structure into XHP. These usually come in up to four flavors per diff: <x:if> , <x:switch> , <x:for> , and <x:foreach> (and occasionally <x:map> , which really is just a different <x:foreach> ). A diff is submitted and invariably a long discussion ensues before the diff is eventually abandoned. I have to admit, it…
I was recently asked to clarify the differences between :x:element and :x:primitive , and when to use each one. It’s actually pretty simple; the basic rule of thumb is this: always use :x:element . If you’re only doing simple things in XHP you can stop reading now, but for the rest of you I’ll get into the rare instances where you might use :x:primitive . First, the main…
I just checked in an upgraded list of the default HTML classes in XHP that conform to the latest working draft of HTML5. This might cause some backwards compatibility issues, so I’ve also included a new public method available to all XHP elements called forceAttribute() . The method allows you to set attributes on an element and skip validation checks. I’ve also checked in a few fixes…
Jumping my horse at the Sonoma Horse Show 1.05m class.
I want to share with you a quick XHP class you can build that will greatly abstract your image spriting. Image sprites are a great way to reduce the number of resources downloaded from your server, but they can be a hassle to maintain. If you already sprite your images then you might have a class that generates the styles for your images. Your API might look something like this:…
XHP was built for Unix, and thus can run just fine on a Mac, but sometimes for whatever reason, XHP has a little trouble. Here are the steps to installation that seem to work if you’re getting unknown errors. For Snow Leopard: Install Xcode 3.2.6 (not 4.x) Install Homebrew In Terminal, run brew install git in Terminal, run brew install re2c Then follow the Terminal instructions below……
XHP Talk at the PHP Developers Conference : The slides I used for the annual PHP Developers Conference in Amsterdam.
UPDATE: I’ve added data- and aria- attribute support into XHP by default. Downloading the latest source will get you this for free. XHP runs validation checks on all attribute sets and gets, but in the emerging world of HTML5, data attributes are validation-less. With a little bit of tweaking, you can add HTML5 data attribute support to all HTML elements in XHP. In the same swing, you can…
Jumping my horse Miss M after a week off from the rain.
A good site design uses a consistent palette and reusable styles, but the unavoidable pitfall is the developer will have to remember every classname for every color and format, or redeclare the same values for multiple CSS classes. There are many frameworks and scripts that try to simulate CSS variables to help with this problem, but they actually make the situation worse. You’ll still have…
On the surface XHP is nothing more than eye candy, but used correctly it can greatly simplify development. Creating good abstractions has always been smart programming, but it’s very difficult to do that for your HTML components without mucking up your rendering code. Enter XHP to the rescue. Here I’ll show you some basic examples of how XHP can be used to abstract out your rendering…