Tag Archives: CSS

Quick experiment: Animated ‘text-decoration’ in pure CSS

There’s a whole bunch more that can be done with this technique.
Using the pseudo element innards instead of the border would allow for gradient borders, or images (Images? Why not? Perhaps curlicues for baroque fanciness! SVG of course…)

See the Pen Animated text decoration in pure CSS by David Benson (@disasterman) on CodePen.0

I must admit to having been inspired by the following CodePen, which is rather clever…
https://codepen.io/heyvian/pen/NapWzB

FullStack Conference 2017 – My talks and slideshows

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:
http://slides.com/davidbenson/deck
Code on CodePen:
Simple form builder and validation script
https://codepen.io/disasterman/project/editor/XGpWyj/

(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.
https://skillsmatter.com/skillscasts/10500-i-rly-hate-forms

Talk 2: I RLLY LOVE Form Controls!

Slides on Slides.com:
http://slides.com/davidbenson/deck-1
Code on CodePen:
Very boring styled radio/checkbox inputs using the input+label ‘hack’*.
https://codepen.io/disasterman/pen/VWqmRx
Sliding two state switch
https://codepen.io/disasterman/pen/qbbJbo
CSS Tabs Widget
https://codepen.io/disasterman/pen/YwavdQ
CSS Accordion Widgets
https://codepen.io/disasterman/pen/KVXMaZ
Cross Platform Tinder-like Swipe Effect With On-boarding
https://codepen.io/disasterman/pen/XRdNgr
(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
http://silon.slaks.net/

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!
https://skillsmatter.com/skillscasts/10501-i-rly-love-form-controls

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.

Thanks!

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!

Debugging CSS during drag and drop [Chrome]

Note: You can probably do similar in other browser Dev Tools – I just haven’t checked yet, and despite it’s memory hogging, Chrome is still my dev browser of choice.

+1 to my colleague Dadu for showing me this neat interface hack.

Debugging CSS during drag and drop is a horrible pain – how in hell do you inspect something when the moment you let go of the mouse to get to the dev tools the state changes?

By mildly abusing an unrelated feature, we can freeze the application state, leaving our dragged element floating in space and burrow around the DOM to inspect the CSS classes and work out why everything doesn’t look quite as perfect as we would like (aka ‘horrible’).

Open Dev Tools, jump to the sources tab, and check out the Event Listener Breakpoints.

OH LOOK! There’s a Drag / drop event!
NO. Bad kitty. Stop there. If we use this, we’ll get a breakpoint on the very moment a drag/drop event is called. We don’t really want that.

I want to pause the UI state at a moment of my choosing, perhaps while dragging over a particular element. So… Instead of drag/drop, check the Keyboard event box.

Screen Shot 2016-09-15 at 11.23.58

Now, drag whatever you like, and at the appropriate moment hit any key.

anykey

Voila – one paused state. You can’t right click to inspect elements, but you can use the element selector tool -hit the button top left of the Dev Tools pane,  or [Cmd/Ctrl] + [Shift] + [C] and point at the element you want to inspect.

Screen Shot 2016-09-15 at 11.48.17

Or, if you are a masochist, drill down through the DOM in the Elements panel. It’s up to you I suppose.

Don’t forget to uncheck the Event Listener Breakpoint when you are done…