 about this transcript because I wanted to say fought and then like take a picture somebody would have to transcribe that I am Tim yeah I jeez I really like it here this is a great crowd I think we're gonna have a lot of fun today coming up to Midtown I like remembered why I never come up here in the first place so stressful the whole time I am like the first speaker which means I get to be like the technical guinea pig of the whole thing so like whatever you're downloading I like rely heavily on the internet in this so you do that to me and I'll do that to you back the benefit of being first is I get to take the first survey of everybody so raise your hands if you brushed your teeth last night well yeah that's good and raise them again if you use toothpaste that's a good showing I'm glad this is gonna be great so I'm Tim I'm generally like pretty unserious not serious how you say that about most things this is my Twitter and this is my email so like you can email and tweet any cynicism towards me I will totally reply probably and yeah CSS comfort it's great I actually like applied to CSS comfort Australia and there's just too many Australians in Australia so I had to come here for this but it was a great lineup so I'm very very very happy to be a part of it there's like a lot of different talks I think there's like a lot of educational things and this isn't really that kind of talk there's like a lot of talks that would tell you what's a dumb idea to put white on a yellow background I didn't really listen to those ones so this is really like the unlearning of talks you probably don't want to take notes or if you do take notes you could burn them afterwards and like all the ghostly spirit things will will fly out I want to talk about fun I want to talk about creativity and fun with CSS and like a little bit of JavaScript and like a little bit of kind of everything together the way the way that I kind of think about it is when we when we learn to read you also learn to write and and this is the same for all of us with the web you know we we consume it and we take everything in and we also create for it and when you write you don't just like write for a newspaper and and do your job every day in and out you also like have that creativity to do whatever you like and and for me that's like having fun with with with all our technology so this is where I got my most of my knowledge from the CSS for babies book 899 and this is pretty much what you're what you're gonna experience right now so the first thing I want to talk about is all these fantastic style wipes that have been going on I went down this treacherous path where I wanted to style wipe between two slides was like the first thing I'm like CSS com what am I gonna do I need style wipes and I like looked at all the all the different frameworks and there was none that could do style wipes so like I did somebody mentioned before like flip that board over that's like zero frameworks since today because I've created style wipe as a framework this is a little bit epileptic but I was like so happy with I just wanted to like include so many there's a lot of these oh there we go this is like that this is the CSS for for the style wipe it's using the mask mask image and passing in an SPG I couldn't get it to walk with clip path and like this was walking I and I just kind of traveled on and then the mask size is transitioning from like 0% to 100% the cool thing about this is I can I can change so I can like do hot wipes which is really really like ton of love I can do these thumbs up it's like some kind of subliminal like this guy's alright after that I actually did this one who which is a donkey which is technically an ass wipe so I was pretty thrilled by that I was pretty happy with myself like call it a day well and that's by changing there does like a little bit cut off at the top but yeah that's by changing anyway I'm gonna change back to stars because those are my favorite this was the main inspiration is this video that I found which is a style wipe tribute to style wipe tributes so this was like a tribute for bacon and a tribute in between the tributes you should put that on your notes as like a must-watch because it is hugely informative and this is what I'm talking about when I say fun like I really like playing around and doing like these quirky things I get like distracted a lot and I kind of go down these these weird paths and I kind of found that I'm happier if I just embrace that and keep going when when I'm enjoying something I was never I was never really a particularly good student at school I didn't really like enjoy much I'm not really good like book learner and that's kind of come out in this as well like I found by experimenting and like doing things one after the other and figuring things out and making my own mistakes and making my own recoveries it's it's it's like how I've I've got to to be where I am and I'm also like incredibly lazy that's that's just a fact and this kind of came from school as well I was really like a minimum required effort to pass kind of pass in if you had to get like 70 I would get 70 if you had to get like 50 points I would get like 51 points or something like that and that's walked out pretty well for me so far so I'm not I'm not necessarily going to change that so this is me in CSS before you like go crazy about this naming convention I felt it felt weird not to have my name in capitals and this is the estimated number of Tim Holman that I am there's a lot of them I actually like research my name and I thought like oh it's going to be some like cool like kingly thing or something and Holman literally is like man that comes out of a hole evolution has taken me a really long way this is my height in pixels approximately depending on your resolution and this is the width in pixels this is the padding that I put on for summer with all the drinking that I've been doing anyway so yeah really lazy this is like my my assignment technique at school basically the first thing it's it's bought a box obviously it's a piece of paper first thing I do is I can crease the padding like I have to submit three pages padding like helps decrease that the top padding and the side padding is how a pro does it then I increase the word spacing so like I can fit maybe 50 words on a page it's getting really good and then like really subtly increase the letter spacing and that was my kind of like lazy lazy assignment there's actually line spacing in there as well and that kind of got me through school I kind of wanted to I kind of wanted to build this yeah that's me I kind of wanted to build this into into style wipe once I started kind of coming along with this I'm like you know I'm gonna like put in to this as much of my personality as I can so if I press s a lot of times like oh that's probably enough I can really like slow down these style wipes and this is mostly so I make my whole presentation time I got like a clock here which is really daunting so if I just go really slow we're all gonna get there in the end could change it halfway that's a hot alright and then like I can press f f f f f f f f f and like speed it back well that's not fast enough speed it back up again there we go Boston the furious I really like those CSS jokes I found like a bunch of these online in a big thread and I was like really really excited by them like Lego display block like oh that's so clever Titanic float none like you sucker periodic display table that was kind of naughty but I was like pretty happy with that muffins ready overflow why visible unless you make them wrong like me in which case they just bone Chuck Doris his color is bad us which is really great and Australia of course is is upside down with the roti why I this was me when I found these I was like really excited because I thought like I would be a natural at making these these CSS jokes and it turns out like everything that I made was was really depressing so like here's me here's a subclass in me with my abs display now that's probably needs an important tag as well because it's never it's never gonna change here's me here's my beard here's the patchy mask that I wear around perpetually here's me this is my my regular transition speed right now this is my transition speed when seamless arrives at the door it's way faster and again this is me and this is my my transition speed when I'm preparing for this conference which is way slow these are great this is what I mean when I say I get distracted I'm just like oh I'm gonna do this I'm gonna add these things I'm gonna kind of go go all over go all over this and like yeah it got it got really crazy I'm like an obsessive saver as well I like safe safe save like if I make one change to one file like I'm gonna press save like ten times I needed to build that into style why so like every every slide I can like press control C and like copy the URL just in case like this whole thing crashes to bits which was really enjoyable so this whole like frameworks getting super legitimate by this point unlike King Joffrey for my King Joffrey so this is like my list of fears when when speaking the first one was like oh I'm not gonna fill up the whole time so I kind of fix that by like slowing down speeding up the transitions like eating up seconds seconds at a time the second thing was like everything's gonna break down you can't really see this is like comments but that's tough everything's gonna break down and the third thing was that I'm gonna forget everything that I wanted to say so obviously I needed to like build in my own version of speaking notes and I was kind of like looking around I do some like interactive demos later where I need screen mirroring so I was like oh you know if I can see the notes everyone else can see the notes so if I press H you come up my hands on a napkin oh it's a little bit off you're talking about speaking notes good one Tim thought that was really exciting most of my time I kind of like got out let me just bring that up again I kind of got like an appreciation for hand models like when you actually look at your hands they're so minor really ugly so like obviously CSS to the rescue was this was my this was my filtering to fix fix those ugly hands of mine a little bit of blur a little bit of grayscale a little bit of brightness maybe I'm born with it maybe it's maybe lean but really like this is probably the best way to fix it it's just to blow them completely up so again like I'm getting really really lazy and I built in this nice way to to get like helping notes so when I'm practicing this and walking through it I kind of found that I kept I kept relying on these speaking notes and I kept going like oh what is it why can't I stop cheating I keep cheating with these these speaking notes I keep going through and I'm not learning anything so I had to like code in this way for for it to like if I keep going it starts like messing with me and and screwing up the text why can't I stop a kid this is the way to use that just get more and more like disoriented and then in the end it's like how you screwed you've used up all your lifelines now you've used as much speaking notes as you possibly can it worked actually really really well it worked really really well I kind of like liking this I always thought like this was a good transition Bilbo coming in now I always liken this to like Bilbo from Lord of the Rings when he kind of goes crazy when he loses the ring this isn't really an uncommon thing I felt like when computers get get kind of weird and angry at you passwords are definitely like my biggest pet peeve like the the barrier for a strong password just goes up and up and up the the smarter computer gets and like the more and the more processing that they can do so I kind of see something like this a lot like the password your password is too simple and that's the same as like the the the helper thing like saying oh look no notes you're screwed and the next obvious step for me was to build was to build my own password strength algorithm so as you type in this is like the passive-aggressive password machine it's just like kind of the idea was like you're in laws I don't actually have in law so I just had to imagine based on movies what that was like like you call that a password you don't even know what a password is I'm not angry and that's a big one my mom used that on me I'm not angry I'm just disappointed try harder this is pretty pathetic really poor effort I know eventually like it gets I would almost use this and not too shabby I need to get some numbers in there it's like you're not even gonna remember this password in the end that's like game over in the password world and like that's what it feels like for me every time I try to get a hard password I just get totally like totally maimed by that system sometimes like I get really sad from this it's like stressing me out and the thing saying like I have a I have a weak password my my speaker notes are telling me like you don't have anything so I needed to build in motivational words into this framework as well so whenever I press M it's like oh you know CSS you can do it amazing Tim you're doing great I love you and I feel great you know Tom's that smile upside down but I also don't want to get too much on my high horse so like I've got some demotivational ones as well just to like balance things out in a nice healthy medium this is all important components of this of this style I framework that's most of it like I kind of went like a little bit overboard and like building some really weird things like we can see my cursor in here I can like beach ball myself just in case I need to like think of an excuse to get out of here like everything's broken what else did I add I added like an x-ray x-ray feature would like invents everything if you like if you try to get the speaking notes you get skeleton hands in the x-ray I don't really know but this is important things and that's that's the the bulk of the style wipe functionality I was pretty proud of that like I kind of went down that rabbit hole and came out in China or Mongolia or somewhere completely strange but this is again like this is what I'm talking about when I say fun I really like traveling these weird roads and and making strange things out of out of things adding x-ray mode to stuff like well website doesn't need an x-ray mode probably browsers should have that I was also like there's also like a little bit of a prankster at school I like to just play around and and have have a little bit of fun at other people's expense especially like this guy with the cheese has anyone ever found this this file in in Chrome like custom.css it's phenomenal it's like any style that you add to that will be applied to every single web page that you visit on that browser custom CSS it's like the holy grail of screwing with people I have like a little bash script that that I keep in a gist and you can just like somebody leaves that computer open just open the terminal paste the command bang it through and like you you start having weird things on the website it's actually a lot of fun and like I put a lot of thought into into the right way to ruin people's lives through Chrome so this is like a few of my tips and advice this is like this is a good one it just like slowly rotates the hue on the whole website usually like for really good effects you do it over like a hundred seconds so it's really really subtle and like you're on Google or something and later you're like oh the colors have kind of changed but you can't really tell and then like a little bit later you come back and it's actually have a we'll see if the internet's gonna be pleased oh come on image we can wait yeah so this has it going on you can kind of see this is like a 10 second loop so this is and this is like a really colorful image so it's really really obvious subtly subtlety is definitely the key to to messing with people this was another one this is kind of like taking advantage of patterns that everybody use so like dot logo and and so the class and the ID logo that's everywhere that's in Google you can add this so they start rotating and it's only logos and it's only on some pages but it's like a broad spectrum of sites so like eventually this person you know you're kind of sitting next to him like have you noticed that like all the sides have spinning logos today if you've ever tried to browse Netflix with the spinning logo it's really really really really confusing and like Google is exactly the same it's a true pleasure and this is like a nice subtlety as well because they can live with that you can go for a week with the spinning logo and you don't have to immediately solve the problem and fix it which is which is truly fantastic this is like a simple one like just putting like a grayscale on every page and like this is the same they know the laptop has color because you can see your desktop but just nothing online has color and it gets kind of confusing when they try to watch a TV show and like yeah that group that black and white episode it really got me it really got me this is the first thing that I tried to do I was just like I just want to animate fonts and really fuck someone up and it doesn't let you do it it's a travesty yeah I especially like that like the font highlight refuses to acknowledge papyrus here just like no it's not real this is another good one just like really really subtle just like every anchor is hot pink from now on for the rest of time I definitely still have people with this on that's just what the internet is to them now you know that's the power of the customs CSS so I should definitely all post like this like script it's like you can access that directory everywhere it's it's truly thrilling I really like this idea of ruining experiences and making things worse for people it's it's a really like funny way to think about things when you're thinking about how could this be more destructive as opposed to how this could be better you kind of get like a little bit of perspective that the thing that you're building isn't actually really that bad I've worked in ads so I've had like a lot of opportunity to think about this pop-ups are a really big one like everybody has seen these these like social media a kind of engineering pop-ups this one like I just have to include in every single talk because it's like Satan's spawn of pop-ups it's like you've got a sound thing right here so it's obviously got like some audio going on and your first name could droop on my sign-ups it's truly thrilling and you can't avoid this I really feel you know some people kind of like purist and they're like you you never have to do these things and like being realistic and working like in an agency or an ad world you'll come across this at some point and I kind of like to think to myself that things could definitely be really really really worse this was something that I built might take a little bit to load as well stop downloading everything guys maybe be not you can cut maybe it's just not gonna work I mean a refresh no I think it's lost we can move on yeah this is this is something where you you move the mouse around and the the tweet button is actually completely attached to it so like you you can't do anything without clicking it it's got like 40,000 tweets or something now it's just actually legitimately insane and I get some I think some people like I don't know if Twitter has a thing which automatically does tweet if you just press that button and you don't do like the confirmation the confirmation dialogue but some people like get really angry me it's really it's a really really weird one I play around with interaction a lot this is again I don't know we're gonna be in big trouble now none of these hosts want to resolve so this is sad sad problem let's let's travel on nice bad that makes no sense because you didn't see that website before this is another thing that's totally not gonna work we'll just we'll just kind of kick all these off and see if they ever ever decide to resolve nope this is not gonna make any sense this one's thinking about it no it's like stuck on it's loading animation this is a nice loading animation that's built in SVG and it's got like these little CSS raindrops I was pretty happy with that and now that's all I got so I kind of feel I feel pain this one's not gonna load I don't know why I was talking about borders I really needed that other one to carry on to it but this is a border collie that's why that gifts there thought that was good this is oh you kind of come to my rescue with with hey this one loaded this was something that I was playing around with I can't plug this in I don't have a I don't have the technology this is something that I was playing around with to try to bring animations into the dome like sometimes working with designers that kind of like oh Tim you can do like nice animation stuff I really want you to like push the borders and go really that's why borders was there that's right I really want you to like push the borders and go really really really weird and I built this this like animating monkey let's get him really big in there and they're like Tim what have you done I'm like oh yeah it's really great like here's your monkey here's your animations isn't this thrilling I don't know what this stuff class is right here I don't know what I was thinking hmm let's see if any of those others kind of go there no I'm gonna start them off again oh cool cool cool let's go back to this one oh yeah so this is like that one kind of travels on to this one this is where I was thinking like how hover animations could get really really really bad like what is the worst that they could possibly be and this was like the kind of library that I built for gift links so it's like since the dawn of the internet accurate representation of internet the world has been asking why hover interactions so boring only recently a new paradigm has arisen to solve this emotionally crippling problem designers call them gift links this is an accurate representation of me at walk on any given day in the tumblr code base it is little known fact that nine out of ten ux specialists agree the gift links provide a richer more enhanced user experience which can be tailored specifically for the enjoyment of your audience this is something I wish I could just like inject into into somebody's script like every element you hover you get he-man that would be that would truly be fantastic yeah so that's kind of like again like thinking of the bad way we looked at this one this is all this is something that will only work in safari which I totally don't have open see if I get there oh gross terrible code if this doesn't load it's like I open safari for nothing which is a very painful feeling I just keep doing this maybe well maybe we'll get there this was like a weird quark that I found in in in chrome and in safari on iOS devices and max where like in this in this area where you scroll to the bottom of the page and push a little bit further it's just not going to do it well well well this fonts because I included fonts separate no forget about it let's not go there yeah when you scroll extra you get like a little bit of numbers come kind of coming back so you get like a negative number when you scroll too far so it's kind of possible to to like inject a grumpy cat into the top and into the bottom of the screen which was which was really really fun whoops don't keep taking me there so like is there any reason for making this I don't really think so I kind of like to not think about that because it scares me a little bit so like when you're building these things like yeah don't don't be like don't be like so crazy about it again this is going to be this is going to be paying this is a website that I built the useless web a couple years ago and like there's legitimately no reason in the world that this should exist and you press this button and it takes you to random websites this one's called eelslap.com why would that exist it doesn't even matter like we have the technology to make these crazy things and you can build an eelslap.com we should be doing that every single day well this one's not gonna go anywhere oh maybe that's such a pain this one's hey.com and it redirects to ho.com which redirects to hey.com and it just like is this endless loop over and over and over again it's a shame that it doesn't have it but you kind of get that you kind of get the point I don't know if there's any point in pressing it anymore oh that's my one nope no luck yeah there's no reason for this this is like by far the most popular thing that I've ever built I think like every every month like people spend it's like a total of two years consuming it which is like ridiculously insane it's probably like put some economies in a pretty sad state of affairs this is another one that I built it's I know if the audio doesn't load it's not going to be great this is like elevator JS I know it's not CSS but it was like when I press this it's a great some projects don't deserve to be on hacking news and this is the kind of one because it like draws out the people that are way smart and just like what is this people had sound off and they're like everyone's raving about this library that scrolls to the top of the page really really really really really slow and then there was like the people that had the music up really really loud and were deafened I think like one of the first pull requests was somebody that had like downloaded and edited the audio to like lower the volume of it I didn't accept it I liked it loud it was fine so yeah I mean this is kind of like a collation of my thoughts on these things and like this kind of way of thinking that isn't like too stressed out and it's kind of like a little bit explorative and a little bit like experimental yeah that's that's kind of this is actually like a function that I found in the in the tumbler code base which I think best highlighted what I was trying to say like sometimes things just don't have to make sense I stumbled upon generate dolphins in the code and was like completely confused and baffled out of my head and like kind of secretly like really really excited and it took me like three hours to find the dolphins in tumbler in there they're in like the audio player when you're when you're not using it the equalizer has these dolphins swimming around somebody like was very quick to say that they're actually sharks based on like the docile fin but it's like you don't ruin the fun and like the tear down function for generate dolphins was when dolphins cry which was a really special thing so yeah I mean that's that's kind of all I've got to say I'm sorry like some of these some of these demos didn't really go as planned but like I'm definitely like up for a beer or hit me up with an email I'll share these slides and like open source style wipes so you can all start style wiping yourselves into the future thank you