A new recipe for the mighty munchmun.ch. I really ought to start taking photographs of some of the things I cook.
Feb 13
jQuery UK 2012
These are the notes that I took during the day and I may well have gotten things down wrong, particularly in some of the presentations where we whipped through slides at a frantic pace. Slide decks and alternative coverage should congregate on Lanyrd sooner or later.
hijacks links and pulls content back with ajax, adds transitions by default
uses hash change and push state to keep history and urls working nicely
data-prefetch=”true” can preload pages in the background to reduce load times
revamped transitions in the next version, only fade transition on Android 2.x, feature-tested for 3D transforms
using a JS fix to make CSS position:fixed work as expected, let’s you keep native browser scrolling
It’s been a while since I’ve looked at jQuery Mobile and this talk from Todd makes it look like a very exciting project. I’m interested to see how theming it actually works so that we don’t end up with thousands of look-a-likey sites, but will definitely consider giving it a test run next time I want to build something aimed at a mobile platform.
Dion Almaer and Ben Galbraith — Web vs. Apps
apps are worth $3,000,000,000 now, generally have higher viewer levels than TV in the US
many native apps are starting to look better than the main website (e.g. Ebay)
Delta Airlines native app is “so much better” than their mobile web app
apps are starting to overtake desktop for page views
the ease of getting software now is a major factor for widespread of apps
both web and native apps have advantages
native apps are awful for continuous integration (e.g. Etsy deploy ~25 times a day)
open web APIs make mash-ups/integrating different systems super easy
native GUI toolkits are hard to match with web apps (jQuery Mobile/Twitter Bootstrap?)
consistent main functionality is important, with app-specific shell around it (e.g. Facebook, Linkedin)
remember that mobile apps and native apps have different audiences
not necessary to mimic native functionality in the web app with hacks and tricks
“what are the mission critical parts of the business that we want to be able to a/b test or hot upgrade?”
Walmart apps are all event-based, browser can manage events, native apps can manage events
revisit your approach frequently, move with technical developments
Android seems to be the sticking point at the moment due to the very poor web experience, web apps just don’t work well enough
“I don’t see us walking away from native SDKs any time soon” — Ben Galbraith
Good discussion on how to approach the ways in which both web apps and native mobile apps are used to give a user access to core functionality, including some cool implementations using Backbone.js.
Jörn Zaefferer — Pitfalls and Opportunities of Single-page Applications
made jquery.validate plugin
HTML5 history API is an important part of building single-page apps to support proper urls (history.js library includes fallbacks)
.pushState( ), .replaceState( ), .on(‘pop state’, function( ) { }) are the important bits
server-side template rendering in node.js using handlebars
use ‘exports’ global object to make JS modules work for both node.js and client-side, good way to share functionality
catch errors on client, aggregate, and send back to the server
errors encountered are most likely to be SyntaxError, TypeError, or Ajax errors
bind a logEvent callback to the $(window).bind(‘error’) === window.onerror function( ) { }
$(document).ajaxError(function( ) { }) is supplied by jQuery
logError could log to the console and/or send an Ajax call back to the server to log the error
track errors back to your analytics tools as well
Airbrake and BugSense are third-party apps for aggregating errors
better UX from single-page apps as long as URLs are respected
Very interesting talk, particularly the thinking around solid error logging. It’s given me some good ideas around trying out server-side rendering in my projects. Maintaining correct URLs using new HTML5 APIs is very important; hash-bangs are rubbish.
cater to the lowest common denominator? no. block out old browsers? no. abstract browser differences into a library? yes.
jQuery created an API to work around browser differences, introduced chaining, replaced the DOM based on CSS selectors
“the new flash intro is semantic HTML”
dependencies on and between jQuery plugins are not a good thing, plugins shouldn’t replace doing a proper job
time to move on and “change the native web technology”
native is good, but shifting the use case is better
separation between JS/CSS has become blurred with style properties being set with jQuery
$ === document.querySelector
remember to set tabIndex of -1 on inserted elements to make it keyboard targettable
element.classList === $.attr(‘class’)
“the love we give IE6 is bordering on necrophilia at times”
use what browsers natively give you, e.g. use CSS transitions instead of jQuery animations
structure code in cached elements and reusable functions
don’t write plugins or add methods to cater for edge cases, “that’s getting into PHP land”
This seemed to be an amusing polemic against the proliferation of using jQuery plugins to mask knowledge and coding ability. I agreed with a lot of what was said regarding the idea that browsers are catching up and it may be less necessary to rely on abstractions like jQuery to pave over differing levels of browser support and implementation of features. Chris didn’t really cover using polyfills to cover gaps where feature support is spotty, which seems to me like a logical sister act to this talk—maybe that was what the other half an hour he mentioned consisted of?
aims to make web editing as “simple” as using MS Word, make edited text look exactly like the final output
contentEditable property introduced by MS in IE5.5 and now it’s more widely implemented
cross-browser implementations vary widely and, as such, aren’t reliable for use yet
Aloha has realtime interactions, immediately visible results no apply/confirm step, undo, as few interactions as possible
migrating from ExtJS to jQuery UI at the moment
WordPress plugin, python packages and Ruby gem available
some issues when using jQuery UI sortable
Aloha Wikidocs in alpha, collaborative online editing of HTML5
Probably more of a sales-pitch-cum-tech-demo, Haymo was enthusiastically showing off Aloha Editor without getting into the (arguably more interesting) details of how they’d built it. WYSIWYG technology is certainly advancing, but still doesn’t feel quite right to me: I still think that web content should ideally be written using semantic markup, or at least Markdown. WYSIWYGs will always mark content up for how it looks instead of necessarily using the correct semantics.
lots of time focused on common tasks rather than building unique experiences
Firebug was the first widely-used tool
lifecycle:
boilerplate
authoring abstractions
iteration workflow
performance tuning
build & optimisation
deploy
authoring:
sass
compass
less
stylus
haml
markdown
jade
handlebars
coffeescript
Dart
TodoMVC; experiment into building the same simple app with different libraries to allow comparison
workflow:
CodeKit
autosave
JSHint
browser developer tools
get to know the shortcuts for your editor
Very amusing and energetic presentation from Paul covering the range of tools available to web developers these days, from source code abstractions (e.g. SASS/LESS & CoffeeScript) to one-page websites such as Sassy Text Shadows. Time seemed to run out far too soon so I’ll have to make a note to check out the slides and see what else we might’ve missed out on, but it’s definitely convinced me to have a go at using SASS and CoffeeScript for an upcoming side project.
Addy Osmani — Large-scale applications using JavaScript and jQuery
“building JS apps that have to scale from the get-go”
decoupling:
separates units of code that don’t depend on each other
promotes reusability
reduces the risk of breakage when other modules fail
publish/subscribe model (observer pattern), event-driven
“if one part of the application breaks, can the app fix this break itself?”
it should be possible to test modules individually
how much is easily reusable? how secure is the app from itself?
facade pattern; simplifies the workings of a function via an API, hides implement ion level details
mediator pattern; centralised controller which passes messages between subscribers, mediator can perform validation on pass-through
large application is “a non-trivial app requiring significant dev effort to maintain, where most of the heavy lifting of data manipulation and display fall to the browser”
app core:
manage the module lifestyle (start/stop/restart)
mediator pattern
reacts to actions passed from a sandbox
handle error detection and management
sandbox:
interface for interacting with libraries
permissions manager, securing what modules can/can’t access
modules:
initialise/destroy methods
This talk covered some solid software architecture principles in a very similar vein to Nick Zakas’ talk from Full Frontal last year, but with better code examples and prettier slides. That said, old thinking isn’t necessarily out-dated, and this gave me and my Guardian colleague, James, food for thought with regards to ways that we could better make use of patterns in future developments.
declarative code bad, dynamic code better, contextual code best
minimal use of IDs, leverages selectors and traversing, very little repeated code, HTML follow conventions, virtually no selectors running on DOM ready
flexible and more responsive code, less code overall, easier to maintain and reuse
minimize setup, delegated events, traversal and selectors, HTML conventions
use CSS classes to control state, remove JS to control visual display
“just in time initialisation” because users don’t generally use every part of a page all the time
setup areas of the page only when needed, leverage probable user actions to load parts of the page
user actions: click, mouseenter/mouseleave, scrolling, focusin/focusout, metrics
consider balance of optimisation, be smart
“write code like you spend money — opt to pay a little more later so you don’t risk losing it all on something that never happens”
make sure that delegated events have as few false positives as possible, bind as close to the elements you’re actually targeting
social sharing buttons are a great candidate for lazy loading
By far my favourite of the day, and sadly rushed since it fell at the end of the schedule. Fantastic talk and very thought-provoking, in particular making me think when it comes to balancing between fast selectors and reusable selectors. I’d like to l look much more closely at lazy-loading functionality and content based on when it’s actually likely to be used. I’d love to get this guy to come and give a talk to the Guardian tech team.
I’m really keen to try and increase my knowledge of classic French gastronomy, starting with amazing sauces. Last night I pan-fried some trout fillets and served them with beurre blanc, based on a recipe by Valentine Warner. I don’t recall ever having beurre blanc before now, but it was rich and glossy, sweet and tangy, and utterly delicious.
I finally managed to get to this delightful little coffee house that’s opposite Forest Hill station. Friendly staff, a very nice flat white (using Square Mile coffee) and a ridiculously delicious passion fruit custard tart. Definitely worth a visit if you’re in the area.
I wrote up a hearty Beef en daube recipe for my friends at munchmun.ch. It’s a delicious stew that serves as a great reward for the patience you need to let it slowly cook down.
Mar 25
Mexican Food Made Simple
Last weekend I picked up a new cookery book that I had been looking forward to for some time, ‘Mexican Food Made Simple’ by Thomasina Miers, the Masterchef winner and co-owner of Wahaca. Her ethos, both on television and in her restaurants, is to try and bring simple Mexican street food to a grateful public. From personal experience at Wahaca I would definitely say that her goal has been reached.
I’ve made quite a few Mexican dishes before, but was excited to get home and try some from the book. I set off for the supermarket, extensive list in hand, and returned home relatively successful. That said, anywhere without a solid supply of coriander these days is seriously doing it wrong.
I tried to follow the recipes as much as possible, but due to missing ingredients and giving myself way to much to do, I veered off course frequently. Inspite of that, I and my fellow diners were pretty pleased with the outcome, and it’s a good first step down the path of delicious Mexican gastronomy. These recipes, therefore, are not perfect but should hopefully give you some good ideas to play with.
Roast tomato salsa
I’m sure that everyone has made plenty of salsa before, but I’ve never roasted the constituent parts before. It gave the salsa a really pleasant deep smoky tang and the added heat seemed to help the flavours meld together. This version has no chilli in it at all, purely because the supermarket was all out of them. You could add as much or as little as you want, but make sure to toast the chillies whole in the same way as the tomatoes and garlic for that smoky depth of flavour.
Ingredients
6 plum tomatoes
2 garlic cloves
handful of chopped coriander
half a red onion, finely chopped
juice of 1 lime
Instructions
Heat up a dry cast iron skillet and add the whole tomatoes and peeled garlic cloves
Dry roast until all sides are nicely blacked and the flesh is softening slightly (the garlic will take much less time so take it out earlier)
Move the tomatoes and garlic to a pestle and mortar, season with flaked salt, add the lime juice, and smash to your desired consistency
Mix in the coriander and red onion, move to a bowl and then chill in the fridge until you’re ready
Guacamole
Not the most complicated recipe, that’s for sure, but it never hurts to have it down. This, again, is a chilli-free zone, but that’s personally how I prefer my guac: smooth and soothing, slathered on anything and everything!
Ingredients
4 ripe avocados
2 garlic cloves, finely chopped
handful of chopped coriander
half a red onion, finely chopped
juice of 2 limes
Instructions
Scoop the flesh out of the avocados and smash up in a pestle and mortar with some flaked salt
Add the chopped garlic, lime juice, red onion and coriander, mix and chill
Press cling film right down onto the top of the guacamole to stop it from browning.
Coconut ceviche
Ceviche is a delicious dish whereby the fish is cooked using an acid, lime juice in this case, instead of applying any kind of heat. It leaves the fish very soft and juicy. I served it up on tostadas, which are small tortillas deep-fried until crispy and golden.
Ingredients
small bowl of home-made roast tomato salsa
400g firm white fish (I used coley)
1 tbsp coconut milk
juice of 4-5 limes
1 avocado
2 tomatoes
handful of chopped coriander
2 slightly stale tortillas
vegetable oil for frying
Instructions
Put the diced fish into a bowl and cover with the coconut milk and lime juice, then cling film and refrigerate for 45 minutes
Leave the tomatoes in boiling water for a minute, then remove and peel off the skins, deseed and dice
Get the flesh from the avocado and dice
Use a small ramekin or pastry cutter to cut circles out of your tortillas about 5cm across
Heat about 2 inches of oil in a saucepan until it shimmers, then deep fry the tortilla rounds until golden, drain on paper towel and keep warm
Drain the fish in a colander, then toss with the tomatoes, avocado and coriander with a little lime juice and some salt to season
Plate up by spooning a small amount of salsa onto a friend tortilla round, then top with the fish, tomato and avocado
Mushroom quesadillas
Quesadilla means “small cheesy thing”, which in itself is ace. You can fill them with pretty much anything you like, but thick juicy mushrooms work rather nicely and were personally requested by my better half, so who am I to argue?
Ingredients
1 flour or corn tortilla
3 large portobello mushrooms
1 garlic clove, finely chopped
handful of white crumbly cheese (Cheshire works brilliantly)
small handful of chopped coriander
squeeze of lime juice
Instructions
Preheat the oven to 190°C
Slice the mushrooms thick and fry in a little olive oil, making sure that they get nice and brown to bring out the nutty flavour, season well with salt (under-season if using an overly salty cheese like feta)
Once the mushrooms are cooked, add the garlic and coriander, cook for a further minute, squeeze in the lime juice and take off the heat
Heat up a dry cast iron skillet and brush one side of the tortilla with a little olive oil
Put the tortilla oiled side down in the skillet, cover one half with the mushrooms, and top with the cheese
When the cheese begins to melt, fold the tortilla in half, turn it over, and put in the oven to finish
Once the quesadilla is brown, crunchy and full of melted cheese, cut in two and enjoy!
Potato and chorizo
This was the dish that suffered slightly whilst cooking, partly due to a cast iron skillet that hadn’t been seasoned well enough, and partly because I was doing about twenty other things at the same time whilst trying not to burn myself! It tasted okay in the end, albeit a little ‘caramelised’ in places, but got good reviews from the less-critical folks present.
Ingredients
3 waxy potatoes
100g chorizo
2 red onions
generous pinch of thyme
Instructions
Dice the potato into 1cm cubes and fry in a good slug of olive oil, making sure to season well with salt
Slice the red onions and add to the potatoes once they are beginning to brown
When the onions are mostly cooked, dice they chorizo and add to the potatoes and onions
Once everything is browned and cooked through, mix in the thyme and cook for another minute or two
Serve up in a bowl ready to be spooned into tacos
Mar 10
Tallest Man
An amazingly talented and distinctive muscian, The Tallest Man on Earth fills me with joy whenever I listen. I played his debut album, ‘Shallow Grave’ ad infinitum and am currently on my very first listen through the follow-up, ‘The Wild Hunt’. So far it’s as good, if not better.
At the moment it’s a battle between Tallest Man and Yeasayer for my favourite album of 2010, although based on the breath-taking ‘Spanish Sahara’ I wouldn’t be at all surprised if the new Foals album is a contender.
Here’s a little treat for those that haven’t seen it:
