You don’t need JavaScript for that!
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 96 | |
| Author | ||
| License | CC Attribution - NonCommercial - ShareAlike 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/51868 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
NDC Oslo 201660 / 96
2
7
8
9
12
14
19
20
26
28
31
33
38
40
43
45
48
50
51
61
63
65
76
79
80
83
87
88
90
93
94
96
00:00
Ordinary differential equationFunction (mathematics)Cross-site scriptingEmailDecision tree learningComputer fontComputer iconLink (knot theory)Modul <Datentyp>ScalabilityArchitectureElement (mathematics)Block (periodic table)Randelemente-MethodeContent (media)Clique-widthJava appletComputer-generated imageryKey (cryptography)Scaling (geometry)Schmelze <Betrieb>Computer fontMultiplication signBitGraph coloringElectronic mailing listEmailComputer iconSemantics (computer science)Content (media)ResultantDifferent (Kate Ryan album)Link (knot theory)Social classMenu (computing)Functional (mathematics)WebsiteCollisionDegree (graph theory)NamespaceType theoryMedical imagingHand fanSoftware frameworkBuildingGoodness of fitWeb-DesignerWeb browserComputer architectureDebuggerSlide ruleNavigationFront and back endsForm (programming)Web 2.0Data structureDecision tree learningRevision controlEmoticon2 (number)Service (economics)Maxima and minimaPoint (geometry)Symbol tableJava appletSystem callInteractive televisionLatent heatVideo gameProcess (computing)MassSoftware bugSoftware developerScripting languageStorage area networkOrder (biology)Right angleCodeFunctional (mathematics)UMLComputer animation
09:52
Decision tree learningEmailContent (media)Graphical user interfaceAndroid (robot)Web browserComa BerenicesComputer iconMarkup languageAreaFunctional (mathematics)Computer fontFunction (mathematics)outputType theoryNumberUniform resource locatorAttribute grammarHypertextFree variables and bound variablesKeyboard shortcutSoftwareRange (statistics)outputUsabilityComputer fontAttribute grammarFree variables and bound variablesType theoryField (computer science)Web browserAdditionEmailMaxima and minimaCASE <Informatik>Connectivity (graph theory)Default (computer science)Validity (statistics)SoftwareArrow of timeTouchscreenNumber1 (number)Keyboard shortcutSystem callComputer configurationRange (statistics)Different (Kate Ryan album)BuildingSocial classCombinational logicSlide ruleRight angleFocus (optics)Data storage deviceObject (grammar)Key (cryptography)ImplementationNormal (geometry)Hydraulic jumpComputer fileComputer iconGraph coloringSoftware bugMereologyWebsiteComa BerenicesForm (programming)Touch typingSymbol tableAlgebraic number fieldMedical imagingFunctional (mathematics)DatabaseSheaf (mathematics)BitTaylor series2 (number)Ocean currentMultiplication signLatent heatError messageOffice suiteMathematicsNatural numberComputer animation
19:41
outputFunction (mathematics)Free variables and bound variablesRange (statistics)HypertextComputer configurationVirtual memoryPattern languageCross-site scriptingAttribute grammarEmailUniform resource locatorControl flowElement (mathematics)Web browserData typeSoftwareForm (programming)Electronic visual displaySocial classCuboidClique-widthSpacetimeTouchscreenBlock (periodic table)Graphical user interfaceSource codeDefault (computer science)1 (number)Range (statistics)Web pageRight angleLinearizationoutputForm (programming)BitGraph coloringOrder (biology)Field (computer science)Level (video gaming)Type theorySocial classComputer fontSet (mathematics)State of matterLine (geometry)DampingInheritance (object-oriented programming)Different (Kate Ryan album)Web browserAttribute grammarCategory of beingValidity (statistics)EmailUniform resource locatorNormal (geometry)Key (cryptography)SoftwareElement (mathematics)DigitizingStreaming mediaGame controllerSpacetimeElectronic mailing listPattern languageBlock (periodic table)NumberMaxima and minimaLengthKeyboard shortcutMatching (graph theory)Regulärer Ausdruck <Textverarbeitung>WebsiteOperating systemComplex (psychology)Cheat <Computerspiel>CuboidProcess (computing)Scripting languageSoftware testingElectronic visual displayDescriptive statisticsMultiplication signLimit (category theory)Computer configurationFreewareRule of inferenceLink (knot theory)Associative propertyFamilyCASE <Informatik>Java appletComputer animation
29:29
Electronic visual displayBlock (periodic table)SpacetimeOrder (biology)Basis <Mathematik>Content (media)Module (mathematics)CuboidWeb browserGraphical user interfaceAndroid (robot)System programmingoutputHacker (term)FluidClique-widthPhysical systemPlastikkarteDataflowGreatest elementCategory of beingSource codeSpacetimeWebsiteGreatest elementGame theoryCartesian coordinate systemOrder (biology)Direction (geometry)Connectivity (graph theory)Pattern languageContent (media)EmailTowerWeb pageFunctional (mathematics)Game controllerBasis <Mathematik>LinearizationBlock (periodic table)Resultant2 (number)Row (database)Set (mathematics)CASE <Informatik>Electronic visual displayRevision controlGraph coloringLine (geometry)Graphics tabletCuboidLevel (video gaming)Physical systemDampingLogicDimensional analysisDefault (computer science)Bootstrap aggregatingCodeWeb browserCellular automatonAutomatic differentiationTable (information)Different (Kate Ryan album)Hacker (term)Right angleType theoryIntegeroutput1 (number)Instance (computer science)Sheaf (mathematics)Military baseNumberElectronic mailing listOnline helpDigital photographyHeegaard splittingCross-correlationComputer configurationNegative numberArithmetic meanComputer animation
39:18
Local GroupTowerElectronic visual displayCantor setoutputChi-squared distributionWaveGroup actionGame theoryTowerBoss CorporationContent (media)WaveSpacetime1 (number)Sheaf (mathematics)Point (geometry)Computer animation
40:31
Clique-widthCursor (computers)Pointer (computer programming)Square numberUsabilityNormal (geometry)Greatest elementFunction (mathematics)RandomizationMobile WebGoodness of fitDrop (liquid)Frame problemSocial classCASE <Informatik>BitElectronic visual displayFunctional (mathematics)Web pageThumbnailKey (cryptography)Graph coloringGroup actionRule of inferenceMessage passingClique-width2 (number)Functional (mathematics)Transitive relationSimilarity (geometry)CodeContent (media)Basis <Mathematik>BuildingComputer animationRight angleLogicDemosceneCategory of beingSpecial unitary groupDecimalMultiplication signInteractive televisionWeb browserSmoothingDifferent (Kate Ryan album)outputPixelSound effectCalculusDefault (computer science)1 (number)Real numberRadiusMathematicsHydraulic jumpSelf-organizationDimensional analysisEmailOffice suiteSpeech synthesisNP-hardEvent horizonOrder (biology)Link (knot theory)Maß <Mathematik>Buffer overflowNormal (geometry)Information extractionState of matterLibrary (computing)Standard deviationPoint (geometry)Latent heatComputer iconControl flowUsabilityShift operatorSheaf (mathematics)Interior (topology)Arithmetic meanStorage area networkComputer fontGastropod shellLinearizationPosition operatorNumeral (linguistics)Online helpSquare numberFluxType theoryScripting languageComputer configurationMilitary baseInstance (computer science)SpacetimeOcean currentCuboidJava appletQuicksortBridging (networking)Process (computing)Execution unitPhysical systemComputing platform40 (number)MereologyFiber (mathematics)Shared memoryMoment (mathematics)Disk read-and-write headCovering spaceWebsiteComputer animationDiagram
Transcript: English(auto-generated)
00:04
All righty. Well, good afternoon, everybody. Thank you for coming to this talk entitled, You Don't Need JavaScript for That. My name is Ben Alegbedou, and let's see here.
00:20
How many of you, I guess to start off, how many people would consider themselves web developers or front end engineers? OK. And how many of you have actually used toolkits like jQuery before? Of course, everybody. So this talk is kind of geared towards those who maybe are kind of fringe web developers, maybe used to do front end
00:41
stuff before. It got too complicated, but you kind of moved to the back end doing Python or PHP and stuff like that. So you're used to jQuery, and you kind of maybe missed the boat of some of the HTML5 or CSS3 things. This talk is definitely tailored to you. If you're more hardcore front end, I don't know if
01:00
necessarily there'll be a bunch of new things for you, but there'll definitely be nuggets that you can take away, hopefully, to apply in what you're doing. And I know the title is kind of bold. It's saying you don't need JavaScript for that. And there's just the reason. It's not that I'm against JavaScript. In fact, I actually do a talk about ECMAScript 6 and all
01:23
the new features that it brings to JavaScript. I just don't think it needs to be the hammer for every nail to solve every problem. There's ways that we can use HTML5 and CSS3 to solve the problems that previously we could only use JavaScript and jQuery before.
01:40
So a little bit about myself. Like I said, my name is Ben Alegbedou. I'm a Christian, a husband, and a father. This is a picture of myself, my wife Rashida, and our two-year-old daughter Simone. We're celebrating our anniversary in New York City, the Statue of Liberty right there. And in fact, we're also expecting our second daughter.
02:01
The target release date is September 1. So I'm going to be totally outnumbered, but we're excited about that. My wife is actually here for the first time listening to me speak, but I don't want to call her out. Otherwise, she'll melt. But she's probably the only black woman who's six months pregnant, so you probably figure out who she is anyway.
02:22
And we live outside of San Francisco in a small town called Pittsburgh. Not Pittsburgh, Pennsylvania, but Pittsburgh, California. And there are a couple of things that are different between Pittsburgh and Oslo. And one of the things that I've realized, obviously, besides different continents, is that in Pittsburgh, it
02:41
actually gets dark at night. And here in Oslo, it does not, I found out. So this is a picture from my hotel at 9.45 PM, as well as 3.30 AM. And as you guessed, if I was able to take a picture at 3.30 AM, it means I was not sleeping at 3.30 AM, because I was still pretty jet lagged.
03:00
I think right now it's 4.45 California time, so my body's not quite adjusted to it yet, but that's quite all right. I don't think it ever actually gets dark here. It doesn't seem to be. And also, another thing that's different is the weather is different here. I figured if it never got dark, and it was always
03:21
sunny, that it would be warm. But apparently not. So I don't really deal in Celsius all that much, but the difference is 10 degrees Celsius, which is like, I don't know, 20 degrees Fahrenheit for us. So I didn't really pack well enough for that, but luckily we got those NDC sweaters, so that was a
03:41
lifesaver for me. Then lastly, oh, not lastly, actually. So I work for Eventbrite. I'm a senior UI engineer there. And whether or not you realize it or not, you actually all bought your tickets from Eventbrite. So I'm happy that you all are here, because that means that the site was not broken.
04:01
There were not bugs, and you're actually able to get your tickets. And if you were here for Jennifer Wong's closing keynote yesterday, she's one of my coworkers who I work with. And I'm on the front end architecture team, and currently we're transitioning our JavaScript framework from Backbone and Marionette over to React. So if you're interested in knowing about that as well,
04:22
please come see me afterwards. And then lastly, I'm a huge basketball fan. I love playing basketball. I love watching basketball. And as I get a little bit older, I end up watching more than I play, but that's just life. If you didn't come to hear me speak, at least I don't think you did.
04:40
Came to hear about HTML5 and CSS3, so let's talk about it. We're going to talk about how we can build interactivity, functionality, layout, as well as animation, all without JavaScript, or very little bit. And the rationale basically is that by using native browser
05:02
support in HTML5 and CSS3, the browser can optimize things and make it more performant, quicker, and write less code. So let's jump right in to interactivity. We'll use CSS hover. We'll kind of start really simple. Hopefully everybody's kind of familiar with this, but it'll be a nice little warm up for us.
05:22
And this image here has nothing to do with the slide. I just found it funny, so I included it in there. So here we have a header navigation example here. And I have interactive slides here, so I can actually interact with it. And what we see is when I hover over these items here, the background goes from light to dark, as we can see
05:43
here, the text goes from a dark gray to blue, and then the icons change from black to orange, as well as a kind of different form, like a plus form of them. And we're going to talk about how we can build this all without using JavaScript.
06:04
So one thing to note first is that this is not actually using images. It's using what are called icon fonts. And icon fonts are just like any other font that you have, except instead of there being a character, it's a glyph or emoticon or whatever you want to call it, emoji.
06:22
So instead of having the letter A, you would just have that house picture, or you would have the cart picture and stuff like that. The nice thing about using the icon font is that it scales to whatever size that you want, just like font scales. And you can actually color it whatever color you want, because it just works just like text.
06:41
So it has that flexibility to be able to be used in a lot of different places. But as a result of it being just like text, it can only be one color, so it's monochromatic. It can only be the color that you set it to. So here's what the HTML looks like. It's pretty straightforward. So we're using semantic header tag that's new in HTML5.
07:04
And then an unordered list with a bunch of list items, because that's what a menu is. It's a list of different items. And I'm using SMACs as well as BIM syntax for the CSS class naming, so that we can avoid having
07:21
namespace collisions. So if you're not familiar with BIM, I would suggest taking a look at the link that I have there. It's just a way to make sure that the names don't collide. So we have our list items there that have the header nav item, and then specific classes for each type of item as modifiers.
07:41
Then, of course, a class for the global header and a class for the header nav as well. And then inside, obviously, because it's a menu, the items link, so we have an a tag and a class for that. So that's kind of the structure of our HTML. And then here's the CSS for it.
08:00
So obviously, because we're using unordered lists, we have to kind of reset some things. So turn off the list style, and then float them so that they're aligned that way. But then we have the background of the item here as gray, the font size, and the width, and then the color of the links, setting it to almost black.
08:20
And the way that we accomplish the fonts is by using the before pseudo class. So if you're not familiar with before, it allows you to insert content using CSS, as opposed to having to have it in the HTML. So I'm actually setting the font of this content that
08:42
we're going to put in to be the font Font Awesome, which is a service that gives these symbols as fonts. And using the custom font face, that font would have already been defined in the CSS. And then I'm setting the font size and the color of it in this line. And then the way that we actually get the individual
09:02
icons is by setting the content. So this is the actual character of the home icon, and this is the character of the search icon inside of the font. And by setting the content, then we're able to insert it in without it actually being in the HTML. So if you were going to support hover for some reason
09:24
using JavaScript because you didn't know about the hover pseudo class, this is kind of what the syntax would look like right here. So the first callback function to hover says this is what the style should look like when you hover over it, and the second callback function is what it looks like when you come out of it.
09:40
So when we're over it, we want to change the background to dark, set the text to light, and then change the image to this kind of active version. And then similarly, we want to reset it on mouse out. But we don't actually have to use JavaScript for this. We can use CSS, and we can use the hover pseudo class.
10:00
So here now when I hover, the background of the item goes to dark using hover. Pretty straightforward, as well as the text going to blue when I hover. And the nice thing is that we can actually combine pseudo classes together. So now I have hover and before, and I'm changing the color of the icon now to orange as I hover over.
10:22
And then for the content, I'm actually going to different characters inside of the font. So this is now the building icon when I hover over. And similarly, this is the search icon with the plus over. So when I'm hovered here, as well as the before pseudo
10:43
class to change the content, that's how I'm able to do that with the icon font. And generally, the icon fonts are a lot smaller than normal GIFs or JPEGs, and it's only a single download instead of having multiple downloads of the image file.
11:02
So the browser support for font face is pretty good. It goes all the way back to IE8, so we should all be able to use this functionality. Hopefully, no one's supporting IE7. Is anybody? Are you too ashamed to raise your hand, maybe? But yeah, we should have full browser support.
11:20
So that's something that you can use right now. And if you're more interested or want to know more about how to use it, how to implement it, you can check out this website on CSS tricks of how to implement icon font. So most of you are probably already familiar with this. You're feeling like, OK, I already know how to do this. And I understand.
11:40
Just wanted to get a little warm up. Let's now jump into some new HTML5 stuff. We're going to talk all about the new input tags that come with HTML5. So what I have here is a form. And when I click on the labels here, it automatically
12:04
puts focus on the fields. So this is very useful for touch devices as well to be able to jump to specific options. And it's also great for accessibility to have this functionality.
12:20
And I can start typing in my name here. And then if I submit without filling everything out, it shows me the ones that have errors. So this one is required. So I actually need to go in and type in my email here. And now for the date, I have actually a native date
12:41
picker that I can use. Not having to use a jQuery UI picker. So I can go in and choose a date here, put in a number. I don't know whose number this is, so don't call it, please. I have a color picker here, a native color picker UI. So it's different in different browsers.
13:01
But I can come in here and pick that color, because I like it. And then lastly, I have a native auto suggest. So here are some suggestions I can put in. But I can now type in 550. OK, I want 500. But I could still go and change the number values that
13:23
way, or use the arrow keys to go down. So for this section, I'm going to talk about what it takes to actually implement this kind of form using native HTML5. So the first thing I did talk about was the label tag. So for each label, I associate the label with the input tag.
13:43
And using the for attribute here, I associate it with the ID attribute there. And that allows me now to bring in focus. And the equivalent JavaScript would look something like this in jQuery, where when the label is clicked, I would get a jQuery object of that label, look at its for
14:01
attribute, and store that as the input ID, and then do a jQuery selector with that input ID, and focus on it. But we get native support to do that. So there's no need to do that. And like I said, this is great for accessibility in that the label is now associated with the input field.
14:21
So this is just a best practice to do anyway. And it doesn't require actually any HTML5 support. We've been able to do this already. But now let's jump into HTML5. So the first thing I want to talk about is the placeholder attribute that is on the input tag. So with the placeholder, it shows that enter URL here
14:41
before I actually interact and type in anything. And then once I start typing in an URL, it goes away. So this is something that's very simple to implement now using HTML5. But it was actually pretty difficult to implement in JavaScript prior.
15:00
Did anybody actually try to implement placeholder attributes before? Yeah, it was quite difficult. And this is kind of the pseudocode to do it, but there are always kind of weird bugs and edge cases when you did it. I've seen cases where I would click in, and there had default text, and it never went away. So then I had to delete it to get rid of it
15:21
and things like that. So it was non-trivial. But now having the browser support it, it's very easy just using the placeholder attribute. So then HTML5 also introduced a whole bunch of new types that we can use, so the first one being the email type. So with the email type now, it does automatic
15:43
validation of an email. So I can come in here. It's invalid now, but now it's a valid email. Now it's invalid, and now it's valid. And I'll talk more about how validation works in a little bit, but that's what the type email gives you. But the coolest part is actually now on a software
16:02
keyboard, on your device or on your touch screen PC, you now get a software keyboard instead of just a normal keyboard, so you don't have to click on the symbol key to get to the at. You have the .com already there, depending on your device, which is great. So it's really good for touch devices and usability that
16:23
way. Similarly, there's a URL field. So I can go in and type in the URL. This is invalid URL. Now we've got a valid URL there. And similarly, there's a software keyboard for that.
16:40
That's tailored towards URL. So just use type URL, and you've got that. There's also type number, which gives an input field, the number field. So it also comes with additional attributes, like step, min, and max. So the minimum number that can be typed in, the maximum number, obviously, and then the increments is the step.
17:01
So I can go in here, I can just start pressing the up arrow, and it starts at 10 and increments up by 2, all the way until I get to 48. If I go in and try to type in 47, that's invalid. If I try to type in 5, that's also invalid. It won't even let me type in an A or a
17:21
non-number character. What's that? Can I paste the character? Let's find out. If I come in here and paste in, I can't paste in n. So it does some validation already for you. The reason I could type in e is because e is actually like
17:40
a valid number, e to the something. But all the other characters aren't supported. And now you have a number input, and then you also get these up down arrows, which are kind of difficult to style, which is why they're super tiny, and you probably can't see them on the screen. But you have these arrows, up and down arrows, and you can also use your arrow key.
18:02
And similarly, there's a special keyboard, software keyboard, for that, for numbers. What else do we have? We've got the telephone type. So the telephone type doesn't have any validation, because telephone numbers are different everywhere you go. But it does give you a nice software keyboard for it, so
18:24
that you can easily type in a number. But I can type in whatever in here, and it considers it to be a valid telephone number. So that's type tell. We also have input type range, which now gives you a native range selector, or slider.
18:43
So I've set the slider to be a minimum of 0, maximum of 10, step of 1. So now I can go in here and slide right here, and it's jumping from steps to steps. And similarly, I can use my arrow key to move it around, like that.
19:02
Some browsers will actually show you what the current selected value is. I believe Safari will do that, but other browsers don't. But if your browser doesn't support the type range, you will just get a normal text field, a normal number input. So it's good to still have a default placeholder like I
19:21
have here, just in case your browser doesn't support it, and it can fall back to a normal number field. So we also have type date, which gives you a native date picker, which is amazing, because that is like a really complicated component to have to build yourself and to get right.
19:42
And so now I can come in here, and I could type in the date. So today's the 10th of June, 2016. I could type it in, or I can actually go in here and pick a date this way. And depending on the browser, they have different user experiences for it.
20:02
But get that for free just by typing in type equals date. And there's also a native picker as well. That's pretty easy to use. And I can go in here and use the number keys. And similarly, if your browser doesn't support this native UI, then it will give you an input field that
20:20
you can just type in normally. So I'll explain what the pattern attribute does in a second. Basically, a regular expression match, which you should be able to tell from here. So if your browser doesn't support the picker, you will just get a text input, and then you can get validation for it using that pattern.
20:43
OK. Then there's a type of color. So you can have a native color picker now. And the UI for picking the colors depends on the browser and the operating system as well. So this one on Mac Chrome gives me all kinds of ways to pick colors. I really like the colored pencil one.
21:02
I'm going to pick magnesium as my color there and close it. And just like the previous ones with the native pickers, the default or fallback is just an input field of type text. And so you can use another regular expression to validate it.
21:22
But what you end up getting when you submit it over the wire or submit the form in the field is the hashtag plus the six hexadecimal digit stream. So this is kind of the value that you would see in your field from picking a color, getting that back.
21:43
And the last input type I want to talk about is the data list. And that allows us now to create a native auto-suggest. So you have your input type text just like normal here. But now you associate that input with a data list tag,
22:00
which is a new HTML5 tag. And it looks just like a select tag, and it has options, but it does not display itself. You have to associate it with something. So by giving it an idea of suggested names and the attribute list, I've now made that association. So now I can come in here, and I start typing in, and
22:23
it will auto-complete there. I can still type in whatever name I want, but it suggests it that way. And then I can pick my daughter's name, Simone. And there you have it, a native auto-suggest just by using this HTML5. This is also something that's non-trivial to build ourselves
22:42
using JavaScript or jQuery and things like that. So there are different ways that you can do validation with HTML5. So obviously the type, it has default validation. So type email URL as well has kind of built-in regular
23:00
expressions. But then you can also set the required attribute as well. And that essentially says, hey, I need to have at least one character in my field, otherwise it's invalid. There's also the min length, which you've already had. Or you've had max length before, rather, so the maximum length that your text input could have, but now there's minimum length.
23:21
So required is basically min length of 0. Then there's min, max, and step for the numeric field, so type number, type range, so that you can control where the valid range is. And then finally, if all else fails, you can just use a pattern attribute, which is just a regular expression match.
23:41
But the nice thing is that you can now associate the validity state of an input field and style it using CSS and these pseudo-classes, the pseudo-selectors. So you can have the required pseudo-selector, and you can now style your input based upon whether it's required or not, whether it has that required attribute.
24:01
And that's how, as I'll show in the next slide, I make the required input fields have a bolder outline. And the flip side of that is the optional one. And then whether it's valid or invalid, that's a state that you can style on, so the green versus the red, and then in and out of range for the range selectors.
24:24
So as you can see here, yes, the required ones have the darker outline, whereas the optional ones don't have the outline there. So I'm actually using CSS to style those states. So as you can see here, when I have the form, there's
24:41
nothing there. And then when I click Submit, then I see whether it's valid or invalid, the different fields. And I'm actually cheating and using a little bit of JavaScript in order to accomplish this. But what I'm using JavaScript for is just to set CSS state. So when I submit the form, I add a class that's called
25:04
form submitted to the parent form. And then I check validity on the form, which is now a property that all forms have. So you can check whether or not the form fields in the form are valid. And then if it's not valid, then I prevent the default,
25:20
because I don't want it to actually submit the form. But if it was, then it would go through. So really, all we're using JavaScript is to set CSS state, and then now, in the CSS, if you have the form submitted state, and then for all valid inputs, I set it to this green color, all invalid inputs, I set it to
25:41
this red color. And that allows us now to not have the red and green showing up before you've even submitted the first time, because that's kind of a bad user experience for them to come to the form and then see a whole sea of red happening. So just using JavaScript just for setting CSS state.
26:03
So the pros of this approach of using the native inputs are that you get the native UI, so the browser already does it for you, which is great. No work that you have to build. But the con of that is that you can't really style those native inputs, and they look different depending on the browser that you're using.
26:20
And some browsers don't actually support it, so there's that kind of issue going on. But another pro is that you get the software keyboards that we saw, so that's a huge win. And you kind of get form validation for free, because you have those attributes there. But another challenge, or con, is that you can't really
26:42
do validation of elements in concert with each other. So if this one has this value, then this other thing should have this kind of validation rule. That kind of complexity isn't supported. So if you want to learn more about the HTML5 forms that I just talked about, go into detail, this website goes
27:03
into crazy detail about each input, how you can style it, all of the attributes, and stuff like that. So I encourage you to check that site out as well. So let's talk about layout. And we're going to use CSS3 Flexbox for this to
27:23
accomplish this. So here we have a linear layout right here. It only coincidentally looks like Super Mario Brothers. I just picked those two colors, RGB blue, RGB green, and this is what I came out with. But one thing to note is that we have these four
27:41
elements here, and they're evenly spaced out on the page in a linear layout. That right there is already difficult to do in HTML5 and CSS before Flexbox, just accomplishing evenly spacing It seems trivial. Seems like it should be obvious. But HTML was not built for this kind of advanced layouts
28:01
that we want to do now. But then also, the first three are pinned to the bottom, not the top. And then that last one is actually stretched to have the full height of its container. And then if you look at the actual code, the source code of HTML, the source code has one, two, three,
28:21
four, but what we're actually displaying is two, four, one, three. So it's actually been reordered using CSS and using Flexbox. So let's dive into this and figure out how we're accomplishing all of these things. So the Flexbox description, or kind of a definition for
28:40
what it's trying to do, is that it's trying to give the container the ability to be flexible. So to grow or to shrink its items within it to best fill whatever available space is left. So if there's a lot of space left, then it will grow the items. If there's not enough space, then it will shrink the items, just to make it flexible.
29:03
So let's talk about the different features we have. So the first thing you want to do on your container is set display flex. So as we know, the default for most block level elements is display block. So this is what it would look like without this setting. Then you set flex, and now all of a sudden, they're
29:22
on the same line. Just by setting display flex. So you get this already. So it's kind of like doing float left, kind of. That's kind of a correlation. There's also inline flex, which is like an inline block version of flex, which will just have the container take the space of the items.
29:42
This is used a little less, or a lot less, I would say. But let's go with display flex, in this case. OK, so then one property we can set on the container is justify content. And this controls how the items are aligned in the row
30:00
that we have here. So there are many options. What we have now is space between, so that whatever space is left is evenly divided within it. We can set flex start, which is the default. So that's like float left. We can set flex end, so that they're all but up to the
30:21
other side, which is kind of like float right, but you don't have to worry about reordering your content or anything like that in order to make it look correct. It just works. Align to the right hand side. We can do center, which we couldn't really do easily now. We had some kind of inline block text align center
30:40
tricks to accomplish this. But now with CSS3, with Flexbox, you can just set center. And then you also have space around. So it's kind of like space between, except that half of the space is put on the opposite ends, so that there's evenly spaced that way.
31:00
But let's go with space between here. So that dictated how the items were aligned in the main axis, the horizontal axis. There's also align items, which helps us dictate how to control the alignment in the vertical axis now.
31:22
So it has similar properties. What we have now is flex end, so that's kind of like bottom alignment. We can have flex start, so that's top alignment. The default is actually stretch, so that they fill up the whole space here. But then we can do center, which is like align middle
31:41
if you're using table cells still for alignment. And lastly, there's baseline. And I don't know if you can tell here, but what baseline is doing is it's taking the first line of content in each item and aligning their baselines. So if you had a two column layout, for instance, and you had header tags in both that weren't the same
32:02
height, but you want them visually to be aligned, you could use baseline for that, for like articles and things like that. So that's align items. We'll go with flex end here, because we want them to all be bottom aligned. So those are some properties on the container.
32:21
Let's look at some properties on each individual item. So I want to target item three here, and I want to make that one stretch, because the other ones are now bottom aligned, so it's stretched. But I could make that flex start, flex end like the rest of them, center. And baseline doesn't mean as much in this case for it.
32:42
It doesn't really do anything, but I could set those different properties. So we're going to stick with stretch here. And then lastly, to get our layout, we're going to change the order. And we're going to make item one order three, so it's third in the list, and then so forth and so forth.
33:01
So you can actually use any integer here. You can have negative numbers. So if you put a negative, the default is actually zero for all the items. And if there are ties and numbers, then a tie goes to the source order in the HTML. So if you wanted to just make sure something was before anything else, you could just make it negative one, and
33:20
then it would be there. And what's useful for setting order, and why you would want your visual order to be different than the source order, is for SEO purposes. So if you look at a normal page, you may have the header at the top, but you actually would want that on mobile to
33:42
be at the bottom. So now you can have it at the source order at the bottom, but then move it visually to the top of the page using order if you had your flex items there. OK, so here are all the properties that you can actually set with Flexbox.
34:01
We only looked at about half of them. The flex direction one on the container allows you to determine the default axis. So we were using flex direction row, so that's why they were put in that way. But if you use flex direction column, then they would be vertically aligned.
34:22
And then flex wrap and align content kind of dictate how things can wrap yes or no. And then for the items, flex grow, flex shrink, and flex basis kind of control the sizing of the items. So instead of using width and height, you would use flex grow, flex shrink, and flex basis to kind of
34:43
control their size, their height, their width inside of a flex container. I'll show an example of using flex basis in a second. So here we have the final result. How to build this UI,
35:00
this kind of simple linear layout, takes just a few lines of CSS code now. If we were trying to use floats or use inline block solutions to try to accomplish this, I think the only way we'd be able to do it is using JavaScript, because we'd have to know the certain dimensions of containers and things to make sure things were relative to each other.
35:24
And if you look at the solutions of bootstrap and foundation and their grid system, there's a lot of logic underneath for it to work with floats. And now they're actually moving towards flex box system as well, because it's a lot simpler.
35:42
So here's the browser support for it. IE8, IE9, unfortunately, don't support it. But IE10 and higher does. So IE8 is already not supported by Microsoft. And IE9 should be out of the way pretty soon. So hopefully we can start using this more broadly and be
36:03
able to use this helpful functionality so we don't have to use any hacks anymore. So if you want to learn more about flex block, there's a great article right here. It goes through all the different properties and how you can use them. So I wanted to show this example, this website called
36:21
Solved by Flexbox here. Yes, so they have a showcase of different things you might want to use Flexbox for. So like the holy grail layout, where you have a header, an aside or a navigation on the left, the content in the middle, the aside or ads on the right and
36:41
the footer at the bottom, how to accomplish that with Flexbox, input add-ons where you have the buttons next to the inputs, grid systems, et cetera, et cetera, sticky footer, so if you have one of these kind of use cases, you can kind of look to see how that's implemented using Flexbox. There's also Flexbox patterns here, which kind of show how
37:03
to make smaller components using Flexbox. So how to create flexible tabs, for instance, a site header, like we built in the first section, sidebars, et cetera, like that. But what I wanted to show is Flexbox Froggy, a kind of
37:23
game to learn Flexbox. How many of you have seen Flexbox Froggy before? Oh, one person. OK, so let me show you this game. So basically, we have to get the frogs on the lily pad using Flexbox.
37:42
So here we have align items, or it's telling us we have to use align items to be able to get it there. So I'm going to type in align items, and since we want them at the bottom, we're going to do flex end, like that. And they're aligned with the right colors.
38:00
And we got it, OK? So now we can use, let's do another one. We have to use justify content and align items. And I wanted to get it in the dead center. So I would use justify content, anybody got any guesses? Center, OK, kind of gave that away, actually.
38:22
And then align items center. And there we go, in the dead center. Let's try, let's just do one more. OK, I actually haven't done this one in a while, so I'm putting myself on the spot.
38:40
OK, so we got justify content, I'm going to say space around, OK? And then align items flex end, and there we go. Got it there. So that's kind of a fun way. There's 24 levels that get really hard towards the end to
39:03
kind of learn how to use Flexbox. So then somebody saw this game and was like, this is pretty cool. I want to make a game based on this. And they created Flexbox Defense. So tower defense using Flexbox. So let's play this game.
39:22
OK, and this one comes with sound, too, so it's really cool. So we're doing justify content again. So we have tower group one. We want to defend this area, so I'm going to put it at justify content center. So it's there. And then these ones, let's say justify content space
39:45
between, yeah, that seems appropriate. So let's start the wave. I want to make sure that those thingies don't make it all the way to the end. We've got to shoot them all.
40:15
We did it. Yes, and we got 100 points, too.
40:20
And we learned Flexbox while playing a game. We could be doing this at work, and our boss is asking, what are you doing? I'm learning Flexbox. Ben told me to do this. Cool. So the last section I want to talk about is animation. And now we're going to be using CSS3 transition to
40:41
accomplish animations. So here we have this example here. And it's an outer shell that, when I hover over it, smoothly transitions some gray to black. And then when I hover over the square itself, after a one
41:02
second delay, it grows into this big ovular thing. And the border got thicker and changed colors. The background changed colors and stuff like that. So if you haven't guessed, I am not a visual designer by any means. I know how to implement visual designs, but I am not a
41:21
designer myself, so I just picked random RGB colors. And this is what I came up with. So the purpose is to focus on the code, not on the visuals, in this case. So if we were going to implement this with JavaScript, this is kind of the code we would use here with jQuery. So similar hover code, and we'd be using the animate
41:41
method in order to animate. And there's a whole, although the code here is pretty simple, we're importing jQuery and all of the logic and code that's written there to make it happen. So we would animate the background color here for one second, and the border color as well.
42:02
And then for the square, we would be animating the new styles to the old styles and things like that, after a one second delay. But now we don't have to use jQuery at all, JavaScript, to do this. We can do this all with CSS3 transition. So let's talk about how we're going to do that. So here's what the HTML looks like.
42:21
It's pretty simple, a couple of divs, a span there. And then this is what the CSS looks like to accomplish the hover here. So this is without any animation. This is what it feels like. Sorry for giving you epilepsy, but I just wanted to show this. OK, I want to do it one more time. All right. So there's the square, and we have the background, which
42:42
is red, and the border, and stuff like that. And on hover, then we set all these other properties. But one thing I wanted to point out here was this use of calc for the width. So when I'm over it, the width is 100% minus 20 pixels. So that gives me a border of 10 pixels on either side.
43:04
So we're used to using math with Sass and stuff like that. But calc is actually done on the browser. So I can use different, I can mix units. I'm doing 100% minus 20 pixels, and the browser does that math on the spot to figure out what that is.
43:20
So that's actually not something that's CSS3. It's actually existed before CSS3. But calc is super helpful to use when you otherwise needed to use JavaScript to calculate what the width or dimensions of something was. So you can use calc with anything that's kind of a numeric type value.
43:40
If you want to know more about calc, there's this great article on use cases for it. I suggest you take a look at that and read that if you want to brush up on the use of calc. But we're talking about CSS transitions, so let's dive into that. So the first thing, first property you want to work with is the transition property.
44:03
And it tells you what properties that you actually want to animate or tween. So the default is none. So that puts us back to that kind of jumpy hover situation. But we can transition all of them, and that gets us now with all the properties. So I'm transitioning border radius, the colors of the
44:24
border, the color of the background, font sizes, all kinds of different things. Text color. But if I want to just do border radius, for instance, this is what it would look like. So everything else jumped immediately, but then the border radius now starts animating.
44:41
And on the way back, the same way. And then I could just do width and height separated by commas for the properties. And then those animate, but then everything else jumps immediately that way. So let's go with all in this case.
45:01
The next property we can set is transition duration, and that obviously sets duration of the transition. So here we have five seconds, so it takes a whole five seconds for the animation to happen, so we can see it in all its glory. And similarly, when I mouse out, it goes back in that state for the five seconds. The default is zero seconds, so that's
45:21
like the normal hover. 200 milliseconds, so you can use milliseconds as a suffix or as a unit of measure of time. And that's 200 milliseconds. So the kind of rule of thumb is that anything under 300 milliseconds doesn't feel sluggish.
45:40
So it feels like it gets there quickly, but it still feels smooth, so it's not jumpy either. So anything under 300 milliseconds is a good rule of thumb for that. But you can also use decimals, so I can use 0.5 seconds instead of 500 milliseconds that way. And then one second is another option as well. So let's stick with five seconds here.
46:03
So as an aside, when we were using our header example earlier, I was actually using transitions for the hover effect to make it a little bit smooth. So it wasn't necessarily perceptible, but it just felt a little bit more delightful. So I was transitioning the background color on the items,
46:22
the color on the link text there, and then transitioning the actual icon from its color from black to orange that way. So that's kind of like a real world use case of it, not just this crazy example here. So we have transition delay, which we can also set.
46:42
So now if I hover over it, it doesn't actually do it immediately. I have to sit there for a second, and then it goes. So that's great for drop down menus in your header, things like that, where you want to be able to move your mouse around without actually activating it. So you have the delay.
47:01
So once again, zero seconds means it happens immediately. 200 milliseconds. I could kind of pass through it with normal motion, and nothing happens. But then it feels immediate, like right then it starts activating. Right when I move out, it starts going back. And then similarly, you can use decimals
47:20
and stuff like that. So there's the one second. So the last property you can set is something called a transition timing function. And it basically talks about how it goes from beginning to end. And the best way I've found to show it is by visually showing the function. So here we have five different transition functions,
47:43
linear, ease, ease in, ease out, and ease in and out. And they're all going to take five seconds to complete, but they take a different path to get there. So linear, obviously, is just constant across. But the other ones kind of jump in and then go, or start slow and then end fast.
48:01
So ease in, start slow, but then it catches up right at the end, and they all finish. And ease out is the opposite. It starts off really fast, like a hair, and then go slow or something. And then the last one is ease in, ease out, which is kind of the one I use the most, is that it kind of starts slow, goes, and then slows down.
48:22
So it's kind of like a smooth transition. And that's what I'm using here. Is ease in, ease out. So it kind of starts slow, animates quickly, accelerates, and then slows down that way. Transition timing function. So you can put it all together like this.
48:41
So on the canvas, I'm doing transition all in one second. So transition everything there. Then on the square, I'm doing all, five second, ease in, out, one second. So the way that it works when you use just the transition property by itself is that the first time is the duration here, five seconds, and then the second time, if
49:02
it exists, will be the delay. So that's how you can set that up. So here is an example of a mobile page here. And I'm using transitions to open and close the drawer on the left. And I'm also using Flexbox to accomplish this.
49:21
And I'm using a little bit of JavaScript once again, but it's just to toggle a class on the page. So then I can use CSS to control everything else. So my overall page is a flex container, display flex. And it has a width and a height. That's this container. So then the left nav, I start off with a flex basis,
49:43
which is kind of the width of zero. And then I'm going to transition that flex basis for 500 milliseconds. And I actually picked something over 300 milliseconds because I actually want to see that transition happening. And then when the mobile page active happens, because I put
50:02
the active class on mobile page when I click, then the flex basis gets set to 250 milliseconds. And because I have this transition, we get the smooth transition, I guess, animation, to that point. And then the content has this flex basis as well. So that's kind of why.
50:22
So it stays kind of at 100% and shifts over instead of getting squished that way. So that's how we can kind of use all these things and put them together to build something that's actually useful. So CSS transition is just a beginning to end.
50:42
And you're just going to go between those two. But there's also an animation property that lets you set more kind of break points and do key frame animations. So I wanted to show a quick example of that with this sunrise-sunset animation. So just using CSS3 animation, we're able to accomplish that
51:05
whole scene transition. So we're looking at the sun here, and we can see these key frames that we're setting here. So it starts off at bottom zero, left 340, and then moves
51:21
over 33% of the time to here, and then goes up, and then over to the left. So that's kind of the key frame animation. And then you have different properties here, which are similar to what you can do with transition. So animation delay, animation time function, et cetera, et cetera. And each one of these different pieces has their own
51:45
animation to do that. So if you want to do more advanced animations, you can use the animation property there. So the pros of using this over JavaScript is that generally it's faster, because the browser can
52:00
optimize for it using its GPU acceleration. And it also provides progressive enhancement. So if your browser doesn't support it, you'll just jump to the end, whatever that end is. So if you're using IE8, you don't know any better, because you're using IE8. So it just goes to the end that way. The cons, though, is that event handling
52:22
is hard with it. You only know when the transition ends. You don't get any break points as you're going. And if you're trying to actually add transition properties with further, more specific CSS selectors, it overwrites, as opposed to merging in those properties. So that can be a challenge.
52:41
But there are JavaScript libraries that you can use. So the actual standard web animation API is coming, so that you can do everything we did in CSS3 triggered through JavaScript. So it'll still be performant and fast. It won't be jQuery. And there's also this GreenSock animation platform, which is supposedly faster than CSS3 animations, and
53:02
allows you to do more complex things as well. So here's the browser support for CSS transition. Like I said, IE8, IE9 aren't supported. But the other IEs are, and obviously the modern browsers. And this is an article here, which you can learn about
53:21
transition. And this animation property, it's the same support. And another article here that you can read about there. So to recap, we learned about building interactivity with CSS hover. We did functionality with the HTML5 inputs. We did layout with CSS3 flexbox, and then animation
53:43
with CSS transition. So to close, I just wanted to give a couple of shout outs. So I wanted to shout out the conference for inviting me here, the organizers. This conference is amazing. Every time I go to other conferences outside of San
54:00
Francisco, I'm just amazed by what is put on. This is the biggest conference I've ever been a part of. And I can only imagine what the organizers had to go through to make it possible. So if you see any of them, give them a high five or a handshake or whatever you guys do in Norway, fist bump. Just show your appreciation to them, because a lot of hard work went into making this possible.
54:22
I want to thank Eventbrite for allowing me to come here and speak with you about it and share my knowledge about it. Eventbrite is very open to letting people come and speak at different conferences. But one of the criterias of us being allowed to do that is
54:40
to say that we're hiring. So we are hiring. If you want to work in San Francisco or in Nashville, Tennessee, if you've heard of that place, or in Mendoza, Argentina, where it is warm, we have offices in all three of those places. So we're hiring. And then lastly, I wanted to thank you guys for coming to
55:01
hear me talk as well. There are eight other talks going on at the same time that you could have chosen. You guys could have sat in the overflow room and not been here, and I would have been looking at empty chairs. So thank you for being here. I just hope that from this you've learned ways that you can avoid using JavaScript. You can use HTML5.
55:21
You can use CSS3 to accomplish the same things that you've done in the past. And with that, thank you very much, guys. I appreciate it. So I have all the Coda examples up on my website.
55:43
So if you wanted to see any of those examples, definitely take a look at that. They're on GitHub and things like that. And if you have any questions, I'll be standing around here so you can come over here and we can chat.