GIGO, or so they used to say. Now your users can make a minor mistake and still get the right result in browser based searching…
Let’s say you want to roll your own tiny Angular/React like library that updates the dom in response to internal data changes. Tracking the data an linking to dom elements would be a right PITA…
This could be fantastically useful for maximising header sizing in responsive displays, if UX absolutely insist on it…
Auto generate CSS for ‘above the fold’ content, in order to prevent render blocking.
If you want this, it needs no explanation.
TIL: Go with a light syntax theme if the lights aren’t right down in the auditorium…
Well, that’s day one of FullStack in the bag, the party is starting, there’s live Micro Drone racing, Dylan and Mark have just finished hosting ‘Have I Got Nodes For You’, and things are gearing up for the opening night blow out – there’s beer and pizza everywhere. I mean EVERYWHERE. Turns out ‘FullStack’ actually refers to the piles of pizza that were delivered by an army of guys on scooters…
Anyway, for anyone who may care to take a look, here are my slideshows from this morning’s presentations. It’s worth noting that these were live coding exercises, so the meat of the information isn’t really carried by the slides, and that the code is in the final state from the end of the talk – this is probably for the best!
[EDIT] Videos have now been added. A Skillsmatter account is required to view them.
Talk 1: I RLLY HATE Forms!
Slides on Slides.com:
Code on CodePen:
Simple form builder and validation script
(It’s true, naming things is the hardest problem in programming…)
Here’s the video – disclaimer: This was my first tech talk, and… I learned a lot about what not to do. In the interest of full disclosure, and as an object lesson in what NOT to do, I won’t try to hide it.
Talk 2: I RLLY LOVE Form Controls!
Slides on Slides.com:
Code on CodePen:
Very boring styled radio/checkbox inputs using the input+label ‘hack’*.
Sliding two state switch
CSS Tabs Widget
CSS Accordion Widgets
Cross Platform Tinder-like Swipe Effect With On-boarding
(This was based on a similar piece of code I borrowed from somewhere – I’m sorry, I’ll try and look up where to give due credit!)
And finally, the Piece dé Resistánce, for which I can take no credit, the masterful SIlon Logic Gates in Pure CSS by Schabse Laks
And here’s the video – lessons were learned from my first one (and I only had 15 minutes to regroup and redeploy) and this was a lot more successful. To those who braved the first, and yet still came to the second, I salute you!
This one was a lot of fun, and the real reward was talking to people afterwards who said the talk had helped them grasp subjects they hadn’t been able to get their head around before. Highly gratifying.
Hat Tip to the legendary Douglas Crockford, who as my ‘warm-up act’ wonderfully, coincidentally, set me up perfectly by talking about number bases.
Many thanks are due to the entire SkillsMatter team for letting me spoil their programme and providing food, beer and support, and to Dylan Beattie for putting me forward for the show.
* Sorry, @davidmarkclem but I still disagree – the label is a hack, but the label and input together are doing precisely what they were originally designed to do , so it’s not a hack – so there!
I’m working on a simple UI for a companion app for Elite:Dangerous with a fellow Space Trucker. I don’t often do graphics work these days and it’s fun to play with some hologram display styling, with scanlines, glows and color channel shift effects. Just for fun, here’s a taster.
Today I launch a small, but useful open source project. utilising Cucumber and Selenium-webdriver to take the pain out of uploading CVs to websites. It’s not a lot of pain, but what the hell.
This project is GNU GPLv3 and pull requests are welcome.
On a side note, how incredibly awful is that stock image? It’s so bad I love it.