Programming Throwdown - HTML and CSS

Episode Date: August 5, 2011

This show covers HyperText Markup Language (HTML) and Cascading Style Sheets (CSS), two of the three languages that make up most client-side Internet programming. The episode talks about the ...Humble Indie Bundle 3, Linux Kernel reaching 3.0, and the end of manned space flight program. The tools of the biweek are Freemind, an open source brainstorming assistant, and Picasa, a free photo editing and hosting service. ★ Support this podcast on Patreon ★

Transcript
Discussion (0)
Starting point is 00:00:00 Hosting provided by Host Tornado. They offer website hosting packages, dedicated servers, and VPS solutions. HostT.net. Programming Throwdown, episode number nine, HTML and CSS. Take it away, Jason. Hey, so it's been a little bit of a delay since the last show, but we were both really busy doing some pretty awesome stuff. I went to a conference, the Gecko Conference in Ireland.
Starting point is 00:00:37 That tops my excuse of doing random chores around the house. But okay, fine, be a show-off. I think you had a house catastrophe to attend to, which is pretty interesting. catastrophe to attend to oh yeah just a little bit of water stuff on my wall get to learn how to fix it not just a nerd but uh did you use like instructables or anything like that or do you just have natural like google like how to fix water damage on your wall oh yeah this goes back to our talk a couple episodes again you've probably used youtube and saw somebody else exactly yeah so it's pretty it's actually fairly straightforward it's just hard to match the texture because have all this industrial equipment they use when they do it initially and then it's really hard to make it look like that again yeah like because when they when they paint your walls
Starting point is 00:01:18 they like spray and so blotches show up but when you use a brush it's like you get streaks instead it's like smooth or yeah yeah yeah yeah but anyways yeah boring okay ireland so see ireland was great the conference was awesome um i went the conference was gecko which stands for genetic evolutionary computation conference and uh since a bunch of guys who are interested in genetic algorithms and neuroevolution, which is my focus. And it's basically a way to sort of get computers to, you know, through trial and error to sort of adapt to their environment. So, you know, in the same way as we adapted as human beings and plants and animals continue to adapt today to their environment, you know, we want to write computer programs that, you know, might not really know the answer right away, but through adaptation, you know,
Starting point is 00:02:11 two parent programs can make a baby program that's a little bit better at solving the task. You should ask your parents about that. Yeah. So the stork brings better and better solutions. It's kind of interesting. Yeah. Yeah, that sounds pretty cool. So that sounds pretty cool so that sounds
Starting point is 00:02:25 pretty nerdy were there uh was it good conversations and cool people to hang out with yeah definitely i want to plug one thing which uh so i made an algorithm as part of my phd dissertation called hyper neat and uh like a neat freak algorithm yeah exactly it cleans your floor no it's a roomba so what it stands for a hyper cube neuroevolution of augmenting topologies but that's neither here nor there the important thing is it um someone took this algorithm and used it to generate a 3d model maker and uh he actually had a bunch of these 3d models that he created with a 3D printer. And you can actually go on this website and evolve your own 3D models.
Starting point is 00:03:16 And I thought this was really interesting and super fun. Let me see if I can find the link here. Ta-da, ta-da. I know it was on my Google Buzz. Oh, here it is. So yeah, the link is www.endlessforms.com. That's all one word. Endlessforms.com.
Starting point is 00:03:41 So we'll put a link in the blog and all that good stuff. But yeah, you can go on there and you can actually take two parent objects and make baby objects and do mutation and stuff like that and grow your own sort of crazy object. And then you can even, for a small fee, have them print it and mail it to you, which I think was really interesting. And they also found a bunch of bugs in my code and stuff, which is kind of useful.
Starting point is 00:04:04 So although I don't know how useful it is now, but at any rate, yeah, the conference was great. It was fascinating to talk to some of the people there. And it was also very interesting to go around Ireland. As many people know, Ireland's been the source of strife between, you know, Protestants and Catholics. And one of the things that, you know, my wife and I did was take a bus tour through Northern Ireland. And we saw a lot of the places where the conflicts happened. And actually, as recently as 1997, the area was a militarized zone. And there were many places like, you know, cathedrals and even whole cities that civilians weren't really meant to,
Starting point is 00:04:43 weren't, you know, outside tourists weren't really meant to visit and weren't supposed to visit. And around 1997, they opened everything up and demilitarized Northern Ireland. And so it was fascinating to see. You know, there's a lot of culture there, and it was very interesting. That sounds pretty good.
Starting point is 00:05:01 Had you been there before? No, this was the first first time for me so uh awesome yeah the bus tour really kind of kind of made it happen um because otherwise you know even though we speak the language and everything it's europe is just vastly different you know so yeah um they drive on the left side of the road and all those things so yeah i definitely wouldn't have been comfortable driving myself from southern to northern ireland well not nearly as cool as going to ireland but i saw uh the humble indie bundle number three is out yeah and uh so i i guess this is a group of independent game publishers i guess it's
Starting point is 00:05:41 a a group of people who work with independent game publishers to get some games together. And it's almost always cross-platform. So it works on OSX, Linux, and Windows. And they bundle them together and sell them in a pay-what-you-want style of sell. So you can pay, you know, I assume as little as a penny. I don't know what the exact minimum is. All the way up to, you know, some people pay thousands of dollars for the bundle. And then you can, one really cool thing about it is, well, there's lots of really cool things. But one of them is that you have little sliders and you can set how much of what you pay goes to the developers of the game, the developers of the package, like the people putting it all together and hosting the website and that stuff. And then they have two charities that they support, the Electronic Frontiers Foundation,
Starting point is 00:06:31 or Freedom, sorry, I messed that up. And then Child's Play. So I know you, you're a big Electronic Frontier Foundation supporter, right? Yeah, definitely. So the Humble Indie Bundle is great. I do it every year and I put a lot of the slider towards the EFF just because it's something that I strongly believe in. You can really, as Patrick mentioned, set the sliders
Starting point is 00:06:58 and the proportions of your donation however you want. But they're usually pretty quality games especially considering you can name your price. They're usually pretty quality games, especially considering you can name your price. They're definitely high quality games for the value. And they distribute them through Steam, which is really useful. So you don't have to deal with, you know, as long as you're a Steam member, you don't have to deal with downloading the XE and going through the install shield and making sure it's on all your computers and things like that.
Starting point is 00:07:29 And I think the last few times they've even open sourced the games. Yeah, I think some of them have been open sourced. I don't think they've open sourced all of them. Yep, so you can look at the source code, which is kind of cool. And one thing that they all have in common is they don't use any DRM. So no digital rights management. So what that means is that you actually own the thing, you actually own the thing that you bought, you know, no one can take it from you. So. Yeah. And Child's Play, um, just if, if people don't know what that is, uh, is a charity where they try to install,
Starting point is 00:07:57 you know, game consoles or video games of various sorts to hospitals for, um, people who are, you know, kind of in the hospital for extended periods of time to have something to do um and to kind of help them with that so yeah the games for this year are uh crayon physics deluxe which is an awesome awesome game is one of my favorite games i actually already own it but i think i'll you know almost definitely buy it and play the whole thing again and uh just to put it simply, you could think of it as being a child, and you draw these objects on a piece of paper with your crayon, but they come to life. So if you draw, say, a circle, that circle turns into a boulder,
Starting point is 00:08:38 and it falls down to the bottom of the page and starts rolling. And you can create all sorts of different objects and they act as you know boulders cantilevers uh you know you can make a car you can do all sorts of crazy things yeah it's kind of similar to like scribble knots meets the incredible machine yeah yeah it's got a lot of both but with drawing yeah yeah definitely um yeah cogs I've never played. Have you ever played that one? No, but it looked like it's a kind of 3D slider puzzle where you slide different tiles on various surfaces to align a set of cogs to enable a machine to run. It looked pretty interesting.
Starting point is 00:09:16 Oh, nice. Yeah, V to the 5th is a platformer game. V, V, V, V, V, V, V. Is a platformer game. It's V to the 6th, right? Oh, you're right. I miscount i miscounted oh no now we insulted them oh man this is the first time we've been wrong on the podcast yeah only time so the um v to the fifth is a platformer game that's known for being so six for being especially difficult
Starting point is 00:09:41 and challenging and so um you know the thing about platformers is you can start, like usually there's many levels, and when you die, you just go back to that level. So you don't lose a lot from dying. But they make it very difficult, so you're constantly pushing yourself to, like, you know, get that one more level. So I've heard a lot of good things about it. I don't know the other two. Do you know the other two?
Starting point is 00:10:01 No, but I know on that Vita the 6th, the guy who made Minecraft actually made one of the levels for it oh interesting yeah so um he he designed one of the levels and it looks it looks kind of hard it looks like one of those ones that kind of punishes your brain a little yeah a hammer hammer fight is some it's like a steampunk helicopter with medieval weapons you like fly around and destroy stuff oh that sounds awesome and then and yet it moves uh looking at the you know little demo video it looked like you kind of move through a world and you can kind of rotate the world around you so you're gonna always stay straight up but the world rotates around you to allow you to move
Starting point is 00:10:41 through passages and stuff yeah i've actually played this one yeah so basically you know as most platformers you know you jump and you sort of navigate through the world and in this case it's sort of a little backwards where you're making the world move through you and uh yeah it's pretty fun yeah so check that out uh especially if you're a gamer or uh you know want to support a good cause or yeah yeah definitely so i think uh you have the linux kernel 3.0 is out which is which is really awesome for uh for geeks like us who uh it's been at two leading edge two for like a long time two dot stuff yeah i mean it was i think like uh if i remember correctly the way it works is every even number is stable, and every odd number is experimental. So 2.5 and 2.3 and 2.1 were all sort of these experimental that,
Starting point is 00:11:30 as long as you were running, if you were running an operating system like Ubuntu or Gen 2 or something like that, you never got those versions. But all the even numbers, like 2.6, 2.4, were the ones that went out to production. And so to go to 3, a lot of people thought that it might even go to 2.6, 2.4 were the ones that went out to production. And so to go to 3, just, you know, a lot of people thought that it might even go to 2.10. So to go to 3 is pretty wild. Yes, I'm looking here at a little graph. It looks like 2.0 was released in 1996. Wow, that dates us, huh? We were in high school. We actually, we were using that version that makes us feel kind of old. Yeah, I wasn't in high school. We actually were using that version. That makes us feel kind of old.
Starting point is 00:12:07 Yeah, I wasn't in high school. But I'm a little bit younger than you. Now I feel old. It's okay. Anyways, but yeah, so I guess they said 3.0. I was looking a little bit into it. I don't run the bleeding edge Linux kernel by any means. But it looked like there was some updates to it,
Starting point is 00:12:24 but they were more kind of relatively going to 3.0 which seems like a big deal um there was only a few minor updates and it just wanted to get to 3.0 they just you know too many too long had they been in the two point region and so they were ready to move on to 3.0 and they decided this is as good a time as any yeah that's cool i mean as the article mentions, there's LinuxCon. There's, you know, a bunch of different conventions. And, you know, being a Linux developer is a largely social experience because you think about it, you're writing drivers.
Starting point is 00:12:58 And, you know, often, I mean, of course, there's algorithms involved and things like that. But a lot of the work, a lot of the code base is drivers for different hardware. To implement these drivers, you have to talk to a lot of people. It's kind of a social environment. As the 20th birthday approaches, bumping up to 3.0 is sort of a little cute gesture. Yeah, generate some buzz and get people excited. Yeah, definitely. yep so that's big
Starting point is 00:13:27 news doesn't happen very often yeah yeah that's some great news but i think we're we have to sadly end on a more somber note yeah another thing that's been uh you know as long as i can remember since uh i don't know if i said this before but living in florida um the space shuttle has always been something that you know you can always hear the sonic booms when it comes back in to the atmosphere. You know, I've been out to a number of launches, which is there's just really nothing to compare. It's something you can't capture in video or words or describe. And sadly, shuttle programs now at an end. Yeah.
Starting point is 00:14:02 I believe they're going to continue doing unmanned space flight is that correct but not through nasa no no so so they are so um nasa is going to continue to do you know all the other stuff it's been doing and there is plans for more manned space flight they just don't have a manned space flight replacement now for the shuttle i see so we'll be using to go to the international space station and, I see. So we'll be using, to go to the International Space Station and to do any other sort, we'll be using rockets from other countries. So mainly the Soyuz capsule from Russia
Starting point is 00:14:33 to send people into space. And then in about, the numbers constantly change, but in about four to five years, they plan to have something that we have that we can send people up. And there's a big push, though though for there to be more private involvement so private companies instead of, so NASA for those who don't live
Starting point is 00:14:53 in the United States, NASA is a government organization and so they're trying to get more private organizations that will send people to space and then NASA can basically just buy tickets on other like an airline right, NASA just wants to buy people to space and then nasa can basically just buy tickets on other on other like an airline right you know nasa just wants to buy tickets to space uh to send people hilarious i
Starting point is 00:15:11 wonder what do you know do you have any insight into what a private company would do like like would they just basically sell you know tickets to visit space and come back is that the idea so there's a number of uh companies doing this and this is a kind of a highly charged political thing so i'll try to stay non-political in this discussion but um yeah so various companies have different motives some have the idea of space tourism which is you know send people into sub-orbit or low orbit or to even you know there's the idea of having space hotels and sending people to that right and then the cheaper you can make it the more people on earth will have money to be able to do that and then then there's other people who say you know only big government sponsored contractors
Starting point is 00:15:57 and the government themselves can send satellites and so there's a lot of people who would want to send satellites if they're cheaper or it would just be better for everybody if they were cheaper. So they're trying to be able to send satellites. Well, if you can send a big enough satellite, the satellite can just be a capsule that has humans in it. And so but then you add this all much more important to keep safety in mind and that kind of stuff. So, you know, but basically the humans in a capsule become the payload instead of a satellite and so there's some people who are taking that approach so basically being cargo ships with the one day being able to put humans there too nice that sounds cool so yeah but it uh you know it's
Starting point is 00:16:37 kind of an interesting thing because we were the you know there was only a couple ways to get humans into space right now and so to see one of those methods go away, it's a little bit sad. Yeah. And I mean, you know, within, well, not within our generation, but, but, you know, there's plenty of people, you know, all the baby boomers who are around, you know, remember, you know, in their lifetimes, the Sputnik and the space fever and Carl Sagan, you know, people just really, you know, pushing the envelope on educating people about space and the universe and the cosmos. And yeah, to go from that to canceling the program is, yeah, it's a little sad. But, you know, now we have new technologies
Starting point is 00:17:18 that are sort of fueling our imagination. Yeah, and Mars rovers and, you know, seeing the footage of them driving around on a planet so far away is that is really exciting as well. Yeah. Yeah, definitely. And so I feel like I don't feel like we've lost the the fire of innovation. I just feel like it's being diverted to, you know, other things. And there's just something cool about watching all those sci-fi and imagining us being one step closer to being able to ride around on spaceships throughout our space yep but uh yeah yeah i think it's just that part of the geek and you kind of get sad yeah yeah definitely yeah i mean you know now that any aliens passing by aren't going to see our inter interstellar or interplanetary vehicles because they will just
Starting point is 00:18:03 not the manned ones so yeah all right yeah time for oh sorry yeah oh no i was gonna say it's time for the tool of the bi-week all right you're up first man all right uh my tool the bi-week is free mind and uh i've actually been using this a lot lately because i've had to sort of, I've been doing sort of, not really a lot of design, but I guess I've been trying to really educate myself on a lot of different technologies lately. And this really sort of helps to let you sort of jot down a bunch of ideas really quickly. Basically, what FreeMind is, it's a tool for creating a tree of of phrases and uh actually you can even hold you know rich text and paragraphs what have you but you know you have a root node which might
Starting point is 00:18:54 be let's say the root node is uh you know html and then just there might be different categories of html that you want to learn like you want to. Like you want to study different like divs and how to write divs. You want to study tables, like different things. So you can have sort of this tree structure with like a root node and then children. And this thing automatically draws the tree and helps to reposition the tree. Like if one of the areas of the tree gets very large, it'll move all the nodes around. But it's a way to just quickly jot down a bunch of ideas in a medium that allows you to sort of make connections and allows you to think critically. So it's like making an outline but more freeform.
Starting point is 00:19:35 Yeah, yeah, exactly. And it's totally cross-platform and open source. So I believe it's written in Java. So you can use it on any any os and you can even you know take your mind map uh from one computer to another can you like export it to like a pdf or something if you want to be able to send it to somebody else or yep yeah it actually lets you export it to a number of different formats one is html ironically which we'll talk about later um but it'll let you you know export it to a website export it to pdf But it'll let you export it to a website, export it to PDF.
Starting point is 00:20:07 It'll let you do many different image formats. And it's really slick. It'll even import. If you have like an XML file, it can import that and make a mind map out of it, which can be useful. So my tool is, I think most people kind of know about this. And I'm on a streak. You're always on the open source stuff. And I kind of haven't been doing open source stuff. I'm probably garnering a lot of glares from people in our audience, but that's okay.
Starting point is 00:20:33 Yeah, so this week I chose my tool as Picasa, which is a photo management and, you know, kind of editing software from Google. And I've been taking a lot of photos recently and is it you don't realize now how many pictures you really take between having them on mobile phones and a point and shoot and i have a nice slr camera and you go on vacation you come back with just you know literally hundreds of photos and having them like with weird names and sometimes they get off on dates or something and it just it can be really a mess to track them and sort them and then there's all this you know cleanup you need to do because inevitably you can tweak the picture some some little way and make it
Starting point is 00:21:15 better um and so picasa has been really good to be able to handle that i have tried a couple of open source photo management tools and i just never made it through the learning curve of getting used to them yeah so does Picasa use the cloud or is it all on your computer so it has support for both um I mainly use it just because that's I don't have that many photos and I don't really share them with people because I've it kind of to me ends up I'm not a great photographer so I feel like it's watching somebody's boring vacation video. And so I don't typically feel compelled to share my pictures with people. But yeah, they have, so mine is just used on my local computer, but they have the ability to store it, Picasa Online and Picasa Web Albums.
Starting point is 00:21:58 Which is integrated in the new Google+, which you were talking about last time. Which I guess now we we are both both on there and we have a couple we have about 12 people following us on programming throwdown on google plus so we should give a shout out for that um but uh picasso web albums and integrate tightly with that so you could post from picasso the computer application and be able to use that in one of your google plus posts yeah definitely we should mention that we uh we are on google plus and uh if you do add and be able to use that in one of your Google Plus posts. Yeah, definitely. We should mention that we are on Google Plus. And if you do add Programming Throwdown, make sure to add us too
Starting point is 00:22:31 because sometimes we'll post geeky stuff from our personal accounts that might be interesting. But we will use the Programming Throwdown account to post when there are new episodes and things like that. So it's definitely very useful. Yeah, I'd be interested in hearing if people want us to post kind of news stories as we see them to Programming Throwdown or whether they just like that to be podcast announcements. Yeah, definitely.
Starting point is 00:22:57 So shoot us some feedback on Plus and let us know, sort of kind of help dictate the flow of information across that. Yeah, because I could see that as being useful. You know, you'll have these people who say news and that'd be kind of cool to hear it from there. But other people might go, no, no, no, I don't really want more noise. Yeah, that's right. So yeah, let us know. About the Picasa, I mean, my concern is like, so I have a bunch of photos and I have a gallery software that I run on my computer. My concern is like if there was to be a fire in my apartment and my computer and everything and it burned to the ground, I'd lose all of my memories.
Starting point is 00:23:34 That sounds really sad and drastic. I know. It's devastating. Is there a way in Picasso where you can say, look, I want to put these on the cloud, but I don't really want to share them or anything. I just want to keep them there just in case. Yeah, yeah. I mean, you can keep them private. And for a backup purpose, that's good.
Starting point is 00:23:54 And I believe you actually, there's a, you know, they give you so much space for free. And then if you want more space, you know, there's a fee. And I don't think the fee is actually very much. But that's their arrangement. But I actually use separate separate which i guess we should talk about at some point backup strategy but that is important to make sure you're backed up and a lot of times people back up to external hard drives and that's good but if something happens to your house flood you're moving whatever and they lose the hard drive then what um yeah so that's kind of better than nothing but not still the greatest so um i actually run some other software that i use to back up more than just my pictures but kind of my
Starting point is 00:24:32 my music and other stuff to the cloud really yeah yeah we'll definitely we should definitely talk about that next episode or something yeah and there's there's a number of different ways to do that all of them work fairly well. Cool. All right, so we're talking about programming languages, HTML, and CSS on this show. And the hope is this is going to be a two-parter. We're going to start off by talking about HTML and CSS, which is mainly for making static web pages.
Starting point is 00:25:06 And then we'll go on and talk about JavaScriptavascript in the next episode for making you know dynamic web content and uh yeah the goal is at the end of these two parts for people to really have a good understanding you know when they go to a web page especially you know nowadays with modern websites like you know gmail for example where it's constantly you know checking for new emails you know what's actually happening under the scenes yeah definitely i mean some people kind of you know i was telling some people that uh you know we were going to be covering html and css and then they were like oh it's not really a programming language. But, I mean, it is really so vital to a lot of what's being done today. And it kind of serves, if not a programming languages by some definition,
Starting point is 00:25:53 I mean, it does have very close analogies and similarities to programming languages. And, I mean, I don't know if HTML, it doesn't have loops and stuff like that, like you might associate with a normal programming language, but it is something you can write. It's something that's in a way executed by the browser, which we'll talk about in a second. And I mean, all of us use the web. I mean, that's probably how you found this podcast even. So it really is important to know the technologies that underlie that. Yeah, I feel like, you know, in many cases people would argue that a programming language is one that lets you manipulate things.
Starting point is 00:26:30 And so, you know, something like PHP or something which we'll talk about later would be a programming language that lets you create HTML, and HTML is sort of the output of a programming language. But, you know, remember that, and we'll talk about this more later, but basically HTML is read by the web browser and processed. And there's many instructions there, like go grab this image or move this table over there. So in many ways, there's a lot of computation going on.
Starting point is 00:26:59 I feel like that can be underestimated. Yeah, and it is such a fundamental part of you know like you like you indicated output of PHP there's you know all sorts of we're talking about second web frameworks that output HTML and CSS so yeah you can it's almost an intermediate language it's the output of a language that gets run on a browser yep so so fuck oh go no i was just gonna say so i mean it is a markup language so what where does that come what's a markup language yeah so this is actually an old term from the printing press days where they would
Starting point is 00:27:37 actually use you know position rubber stamps so they would have they would have i think they were metal but yes go ahead oh really oh yeah i guess that makes more sense um but they would have they would have i think they were metal but yes go ahead oh really oh yeah i guess that makes more sense um but they would basically get you know they would want these sort of blue collar laborers to go and position these stamps uh every day for the printing press to run you know newspapers or magazines etc and so they created this language to say, you know, to give a very generic way of laying things down on the paper. And so when the HTTP protocol was invented very early on, you know, it was clear that they wanted to use it to disseminate information. So they decided that, you know, there's already this markup language in place for newspapers and books. So they might as well sort of leverage some of this and create a hypertext,
Starting point is 00:28:31 a markup language that can be used over the Internet. And so that is what HTML is, hypertext markup language. Nice, nice. So we talked a little bit there about the HTTP protocol and the web. So it might be good if we walk through kind of the process. This isn't specific to HTML, but it gives us the context for where HTML fits in this pipeline, as it were, of what happens when you go to your web browser and you type in a site and how does HTML get there and get rendered and all that part yeah yeah that's
Starting point is 00:29:07 that's really important so let's i guess let's start here you go to any website uh you know aol.com right and you would enter and it and the first thing it does is it you know turns aol.com into an ip address using something called dns and we will kind of leave that for another time it has this number address on the internet and it actually opens up a TCP connection TCP stands for transport control
Starting point is 00:29:38 protocol and opens a TCP session and then makes a HTTP request on that session. So the request will contain different things like a little header saying, you know, who's making the request, some information about them. It'll contain some parameters and it'll contain a cookie. So we'll talk about these. Basically, let's say you visit a website and you'll go and make a request with no parameters, like AOL.com. No parameters, I just want to see what AOL has to give me.
Starting point is 00:30:12 The server will receive your request. Now, the request is going to go through many layers. The first layer it'll hit on the server side when they've got your request is called a layer of filters. So they might have filters that say is this person logged into AOL if they're not then send them to the login page you know is this person coming from another country if they are then redirect them to AOL dot de or AOL dot CN for China then it will after it passes through all these filters, it goes to what's
Starting point is 00:30:46 called a servlet, which is a piece of code on the server dedicated to handling a specific client request. So in this case, it'd probably be a front page servlet for AOL. And you would go on there and it would serve you, you know, the servlet would return the front page contents. Maybe there's some news articles, et cetera. And it would return this as HTML. And when it returned it, it would return, it would give you a response. And the response contains the, you know, the packet, the payload, which is, in this case, you know, an HTML, you know, a block of HTML, and it will contain some header information.
Starting point is 00:31:29 So it will tell you the multi-purpose internet mail extensions or MIME type. So in this case the MIME type would be HTML because they're giving you an HTML page. They could also be giving you other things which you know i'll talk about in a second so the header information will also contain a cookie and the cookie is a way for you and the website to pass information back and forth and so we'll talk about that also a little bit later there's actually a lot that goes on much more than you would think when you hit a website so that's because the http is stateless so it doesn't maintain an inherent state about the connection every time you go to a website and say hey i want your web page without the cookie part it would just give you the default web page and would know nothing else right because it doesn't keep like oh you came back you were just here a second ago
Starting point is 00:32:21 why here's what you were doing last time um And so all that is pushed onto the client side, which is the browser versus the server, which is the part hosting the code. And so the client has to maintain any state that's necessary and change how it interacts with the server so the server knows who it is. Yeah, exactly. So like two ways to do state.
Starting point is 00:32:43 One would be, let's say you're looking at the news now on AOL News or something. You can pass in what's called a parameter to the website. So you go to AOL, and it shows you the first news article, and you want to see the second one. So you click the little arrow that says go to the second news article. What your browser can do is it can go to aol.com question mark 2. And so whenever you see a question mark at the end of a URL, at the end of an address, anything after the question mark is a set of parameters. So you could say, question mark page equals two. And when that request gets to the server, the server will see you want to go to AOL.com,
Starting point is 00:33:32 but it will also see this page variable is set to two. And the servlet might intercept that and say, oh, this person wants the second news article and return that. There's another way. There's actually two more ways to send information to the server. The second is through what's called a post. So whenever you have the question mark and the page equal to at the end of the URL, that's called a get request.
Starting point is 00:33:59 There's also a post request, which is, I guess you could say a little bit more private. What it does is it does effectively the same thing as the get request. It would send page equal to over to the server, but it does it behind the scenes, so it doesn't show up in the URL. And so this is important. Let's say you wanted to— That's like where forms, right? It's like if you fill out something on a form and you push submit.
Starting point is 00:34:24 In theory, they could use it there. Exactly. Let's say you have a form where you're supposed to put in your first, last name, and your social. And you hit submit. Well, you don't want it to change the URL to question mark Patrick social equals 555 whatever, right? What? Don't share that? How did you find that out?
Starting point is 00:34:44 Because you don't want your buddy behind you looking at out because you don't want like your buddy behind you looking at the url and knowing your social right although or even just you know you leave the computer all of the urls you visit are in your history you don't want your social in your history your social security number so um so post gives you a little bit more security there but by far the best security comes from cookies and what cookies are are is basically an object that gets passed from you to the server and then also passed back from the server to you so you know the posts and the guts are one way but the cookies are two way and so cookies are a way for you to do a bunch of really interesting encryption things between yourself, the client, and the server.
Starting point is 00:35:30 So for example, you don't want to just pass your social security number like PatrickSocial equals this across the internet. So what you might do is you might pass a cookie saying, hey, here's a key. And then the server might pass back another cookie or a third party might pass you another cookie across the internet and say, hey, here's some other key. And using these different keys, you can encrypt your password and then pass that encrypted password as another cookie.
Starting point is 00:35:57 So cookies allow you to do a little bit more fancy message passing back and forth. But yeah, basically... fancy uh uh you know message passing back and forth um but yeah basically so you ultimately get this this html description in this mime and that we talked about that it's uh that it's a markup so it shows here by whatever means you know that's gone on behind the scenes but it finally arrives at your browser and then your browser has to do something with it so it goes through and finds tags right those are the if you ever look at it those are the things in the angle brackets and and says hey this is markup this is telling me to stick this thing here or you know this thing over there and so then it goes through and parses that information, reads it, and decides what to do with it.
Starting point is 00:36:45 And then it may also contain, hey, you need to go grab this other thing. Like we'll talk about in a second, but go grab this CSS, this cascading style sheet from over here, or go grab this image at this URL and then render it and stick it here. And so once it has that,
Starting point is 00:37:02 your browser gets the HTML, but then it has to go back to the server possibly and get more information. It might have to make other requests to get images, to get other things that might be there. Exactly. Yeah, so when the server returns that response, it will have that MIME that we talked about. So you might grab the HTML, and the HTML might say, hey, you need a bunch of images. And you might go to the server and say, hey, I need to get this resource. And I'm pretty sure it's an image. So you could tell the server, hey, I want this resource in the MIME.
Starting point is 00:37:37 I think it's an image. And the server will return back and say, yes, the MIME, it's an image. It's a PNG image, or it's a JPEG. And here's the payload. In this case, it's not HTML, but it's just a chunk of data that represents a JPEG image or a cascading style sheet or many other things. Yeah, so that describes kind of where to stick the data on the page, how to locate it in ways. But you could make the HTML describe and only have an html and have a static you know web page with just text and colors and and you know that kind of stuff but as you try
Starting point is 00:38:13 to do more and more it could get really complicated very intricate and um you know kind of have all these layers you're trying to do to get something exactly where you want on the page in a certain color with a certain look and feel and texture. But then when you want to make news page two, then you've got to recreate all that HTML code. And so cascading style sheets are a way to take away the data, the text, the paragraphs, the images, as it were, that the HTML represent, and the way those get rendered, kind of maybe where they go on the page, or the background color, or if you have like
Starting point is 00:38:53 curvy edges on your tables or whatever, and put that in a separate document that separates how what the data is from how it gets presented or displayed. Yeah, exactly. I mean, let's say you had 100 web pages, 100 HTML pages that you were serving to people, and you wanted to change the font on all 100 of them. Well, that would be brutal because you'd have to change it on all of them. You'd have to make sure it looked right, and you'd have to change it on all of them, you'd have to make sure it looked right and you'd have to push it out, push 100 files out to the server so that they could be read by users.
Starting point is 00:39:31 If you have a CSS, a cascading style sheet, you can just make the change once in that style sheet and all the HTML files will just say, hey, use this style sheet over here and you know any any tat any text you know the fonts gonna be whatever this style sheet you know says it is yes they all reference the same style this Wow the same style sheet too many s's in a row the other thing so so the cascading part so the style sheet makes sense and and then the cascading comes in because you can get what what amounts to inheritance between the style sheet so like you know a master definition of some you know high level things for your site but then maybe you're in the forum section of your site so you could have a separate css that's for the forum
Starting point is 00:40:20 section of the site which gives more specifics details that are only used there that aren't used somewhere else right like as patrick mentioned there's html is made up of a bunch of tags like you might have a tag that says here's an image you might have a tag that says here's a paragraph another tag might say here's a table or here's a heading and each tag has two things it can have up to two things it can have a style and it can have an id and they're both strings so you can have a table and the style is dark and the id is uh you know news table so you can only have the id is meant to be unique so if if one table is called news table the other one has to be called something else like like footer table or something yeah news table too but you could have 10 things all with the style
Starting point is 00:41:11 you know dark right and so where the cascading comes into play is you can say i want my font like in general i want my font to be helvetica but if my style is dark i want my font to be Helvetica. But if my style is dark, I want my font to be Arial Black. And if my style is dark and my ID is news, then I want my font to be Arial Black and bolded. So that's where the cascading comes into effect. It'll try and pick the most specific style. So it'll try and find a style for your specific ID. But if one doesn't exist, it'll take a step back and try and find a style for your specific id but if one doesn't exist it'll take a step back and try and find a style for your style uh tag attribute and if it
Starting point is 00:41:53 doesn't find that it'll take another step back and say okay what's just the default font for all paragraphs and it'll use that if if it doesn't have anything there the web browser has its own default style sheet that it applies yeah and and that helps like you know like jason was indicating you know if you've got to put that file in one place then you have all these specifics laid out and you can have multiple style sheets and you only have to go change those you don't have to go change every single web page that you have which may be many, many, many web pages. Or in the case of if it's generated from a web framework, then you just have to worry about rendering the data and the CSS handles the style. And then you don't have to go and make sure your code knows how to output the formatting as much.
Starting point is 00:42:43 Yeah. to output the formatting as much right yeah yeah i mean imagine an environment where you have a couple of web pages that are static and they're just dot html files but you also have some pages that are generated um you know based on certain content i mean maybe you're scanning the weather and you're giving someone a map but the map's generated based on the weather in the area and it's different every time you know that code that does a generation and the static HTML code are usually in two different places, but you want to make sure that it all looks the same. You don't want that code, just because it's done dynamically, you don't want it to look ugly. So the style, the cascading style sheets allow you to apply the same style to everything, regardless of where it came from.
Starting point is 00:43:26 Another really useful feature is that if you've ever been to a website that allows you to choose a theme, that can be handled by choosing what CSS is loaded. So you can have a CSS that's the light blue theme or one that's the happy kitten theme. And that changes what CSS your browser uses. If you want, and this can be kind of interesting, it's like if you download an HTML page, you could change what CSS it uses and change how it looks. Or, you know, in theory, right,
Starting point is 00:43:57 you could have some part of your browser that overrides the CSS referenced by an HTML and point it to something different and change how websites you use every day look and feel by writing your own CSS for it. Yep. Yeah, there's a plug-in. Most browsers will have a plug-in where it will go through
Starting point is 00:44:17 and replace the CSS links with links to CSS files on your computer, and that's mainly for development. So you could go right now to keep files on your computer, and that's mainly for development. So you could go right now to keep using the same example to AOL.com, but have it use your CSS files that are on your computer somewhere. And people from AOL would do something like this to sort of change the look and feel and do nice Qt design, make Qt design decisions without breaking the website or without having to push something out to the users. They can just test it on their own machine.
Starting point is 00:44:53 Yeah, I've actually seen a couple of websites where they've asked for user feedback for people to change CSS or the style of the website. So use what they have for the default thing and then users can submit new look and feel for the website and this is one of the ways that they could do that oh interesting that's that's kind of cool actually yeah yeah yeah definitely if you've got a really involved community because it can be a lot of work yeah yeah for sure i noticed there's some frameworks that do that and so that's kind of nice because you get it for free if you're using those frameworks yeah those i guess CMS is content management systems right
Starting point is 00:45:27 right right um so something recently that says you might hear about is HTML has version number so most of the web nowadays uses HTML 4 but you hear about this HTML 5 what are some of the changes coming up in HTML? We talked earlier about Linux 3. HTML must be better because it's at 5. Yeah, that's right. Yeah, so we'll post a link on the blog that we'll have. It's actually called html5rocks.com,
Starting point is 00:46:00 and it has some cool slides and some nice slick interface for showing you some of the new features. But in a nutshell, HTML works hand-in-hand with JavaScript, which we'll talk about on the next show. But what HTML5 adds is a bunch of sort of dynamic tags that add very rich content. So for example, there's a canvas tag. So you can say, you know, canvas tag, and then in there you can say box, or you could say triangle, or you could say whatever. And it'll just draw these shapes, like, right onto the website. So, you know, in the past you had to do sort of really crazy stuff, or use Flash, or use Java applets,
Starting point is 00:46:43 or use, you know, all sorts of different hacks, ActiveX controls, to get rich content on the Internet. And HTML5 is an attempt by a consortium of companies to say, look, we don't need all these third-party applications that are really kind of hacked together and don't work on every browser. What we really need is to just make HTML better and to make it dynamic and to make it more interactive. Yeah, and add things like the ability to embed movies directly and even have some ability to have offline storage for your website so that you can do kind of offline use of the website. For things like if you have a mail client,
Starting point is 00:47:26 you might want to be able to browse your hotmail even when you're not connected to the Internet. You won't be able to get new stuff, but at least you could browse what you already have. Yep, that's right. So HTML has that. But with great change comes great controversy. That's right. And it's not completely settled exactly what HTML5 will end up being when it's all said and done. Yeah, one of the biggest controversies in HTML5 right now is the video encoding.
Starting point is 00:47:52 You know, right now there's sort of a patent war going on, as many of you know, in Silicon Valley between many different companies and consortia and uh basically where it stands right now with with the video encoding and html5 is you know the internet explorer and safari so apple's browser and uh and and microsoft's browser they support mpeg4 but mpeg4 is um covered under a. So they pay a license fee to, I believe, Frankhauser, which is a company, I believe, located based out of Germany. So they pay Frankhauser LLC to use the MPEG-4 codec. And patents are really hairy business. Technically, they're breaking the patent, but they have an agreement, so on and so forth. It's all kind of shady. So Firefox, being an open platform and being largely funded by the EFF, which we talked about, and the Free Software Foundation, which are vehemently against patents,
Starting point is 00:48:58 said, we're not going to do MPEG-4. This doesn't work. We're not happy with this. So they decided they're going to support AugTheora and another codec called the VP8 codec, which is a codec developed at Google, which is completely open source with no patent restrictions. Google Chrome, which is another browser, has jumped on the bandwagon and supports the same video codecs that Firefox supports. And so what you end up with is if you're on IE, your HTML5 videos won't work if the server expects you to be on Firefox and vice versa.
Starting point is 00:49:37 And so these kind of things always happen with new technology. There's always these battles. But eventually things will start to stabilize yeah yeah so that's my that's my soapbox for the day so there are some variants of html so we got x html yeah so these um these are very pedantic i mean this isn't the kind of thing that revolutionizes the web as much as people at the time would like venture capitalists to believe. XHTML is just a stricter formatting for HTML. So for example, in regular HTML, well, let's explain a little bit how tags work. Okay.
Starting point is 00:50:20 In HTML, you have an opening tag and a closing tag So you might say opening tag table And then have opening tag row And then have opening tag cell So a table is made up of rows which are made up of cells Then you might put in some cell data Then you might say closing tag cell That's the end of that one cell Then put some more cells
Starting point is 00:50:42 Open a cell, close a cell, open a cell, close a cell. Then you'll close a row. You can make some more rows. And in the end, you'll close the table. And that's the end of that table. Some of the tags in regular HTML don't have to be closed, although they really should be. So, for example, you can have a paragraph where you open the paragraph and you just don't close it. You know, you just have a paragraph, open open the paragraph and you just don't close it.
Starting point is 00:51:05 You know, you just have a paragraph, open tag, you type some text, and then you have a table open tag. And browsers had to get really smart about knowing, oh, this paragraph closed because this person started a table and the table is clearly not part of that paragraph. But this got very tricky in browsers. You know, you'd go from one browser to the other and your page wouldn't work right so they decided to make HTML more strict and most web pages made nowadays are written in X HTML which adds some extra restrictions so if you open a tag you have to close it and
Starting point is 00:51:40 there's a couple other restrictions but but that's the biggest one. Another buzzword is DHTML. And this basically just means using JavaScript and HTML at the same time. This is kind of a buzzword that was used. It generated a lot of hype, but it doesn't really mean anything. So don't confuse these two things with HTML5. HTML5 is huge and revolutionary. And these two things, really, they're not much of anything. So definitely be excited for HTML5.
Starting point is 00:52:13 Yeah, a lot of interesting things still coming up as far as adding animation support directly to HTML5 without using JavaScript or Flash and getting rid of more plugins to help support cross-browser compatibility hopefully it will be good but until we get there we don't know yep that's right if you do want to use the latest html5 features um i believe the development version of firefox and the current version of Chrome support just about everything.
Starting point is 00:52:46 There's a few things with the audio API that aren't supported with the regular version of Chrome. You have to go on the dev version. But if you use either of these two browsers, even the public versions, you'll see a lot of what HTML5 has to offer. Yeah. So besides just web pages, which is what prior to a year or two ago,
Starting point is 00:53:09 most everything when you talked about HTML was talking about a web page, or I guess a few other niche uses. But now, more and more people are using HTML to do things not just in a browser on a website in the traditional sense. We talked previously about on iOS that you could have a web page show up as like an icon on your what amounts to your desktop. And you know, when you click it, it it launches and it can even launch basically a web app, a web application with a browser that you don't see so you just see the app it just runs just like a program but it's really embedded browser rendering html content for the user so think of this again to use like hotmail you could have hotmail as essentially an html that lives on the phone and some JavaScript that when you run it displays
Starting point is 00:54:06 what's local to the phone, but then has a component which can go out and grab new mail, bring that in and display that. And if it's written well enough and supports what's needed to do that, you wouldn't even be able to tell the difference between that and a program written in Objective-C for the iPhone. Yeah, I mean, you know, just take a moment. If you're looking at a web browser right now while you're watching this podcast or you can visualize one, as long as you're not driving, we don't want you to get in an accident. Yeah, don't close your eyes.
Starting point is 00:54:34 Yeah. Just imagine the address bar not being there and the tabs not being there and you just looking at the one page you're looking at and it's taking up the whole screen. There's really not much standing in between that, differentiating that from just a regular application. The nice thing is you can make an application that works in a browser, but then also works without a browser at the same time.
Starting point is 00:55:01 This is really, for things which are largely static, this is, you know, a great way to go because you get so much for free. You know, the people who wrote the browsers kind of did the heavy lifting for you. Yeah, it's like using a really big framework or SDK or something. Yeah, yeah, exactly. Yeah, it is nice, and it really helps that if you want to run on both you know iphone and android you have a lot less work to do because now you don't have to write it in java and objectoc yeah exactly there's a web there's a application called phone gap which what
Starting point is 00:55:36 this does is it takes a website that you've created and it will deploy it on all sorts of different environments on android ios i think it even does windows mobile and it even does uh like some of the more obscure ones like palm and things like that but basically it'll just you know take the html and javascript that you've written and do some reinterpretation as necessary to get it to be compatible with the browser on the phone and just make it an app on the phone. So, you know, you can write something once, you can test it on your computer using, you know, your web browser, and then using this PhoneGap, you just, you can deploy it and be 99% sure it's going to work on you know every smartphone out there which is
Starting point is 00:56:27 which is really powerful we already kind of talked about before but uh to kind of emphasize again uh although you can write hand hand by hand write html a lot of html that you see on the web is generated from other programs written in other languages. Some of the popular ones, you know, being like PHP, Ruby on Rails, a number of Python web frameworks. Some websites actually have a C++ backend or even a C backend, which once the browser communicates with it responds with an HTML page. It's really flexibility of HTML that allows all of that to happen. And so it is used as a method of communicating what needs to be displayed. And it doesn't just have to be the traditional old school static HTML site that a person wrote by hand. Yeah, that's right.
Starting point is 00:57:18 I mean, imagine if you have, you know, you're writing some kind of inventory system and you have some database somewhere where every time someone buys one item it reduces that inventory by one and so then when it gets to zero it pops up it might show up in red or something like that so you might write something in Python which says hey, go to this database
Starting point is 00:57:43 get all the records, and for each record, convert the record into a block of HTML. So make a paragraph tag and make a little font tag for the ones that are empty and things like that. And just turn this database data into HTML code on the fly. And so if the person hits refresh on the page, after some people have gone through and bought some things they'll see the new value like the new inventory yeah yeah so i mean that's kind of a big strength and i i don't know how how much people anticipated they designed a lot of flexibility in html um but it really has survived i mean we haven't gone through any
Starting point is 00:58:27 other real ways i mean there were early on but for a long time we've been on html and that'd be the kind of the language of the web and so the basic html has very widespread support um as long as you don't do anything weird or funny um it's really well supported it's when you get into adding plugins or javascript or other things that you can run into cross-platform issues but html itself is very cross-platform compliant yeah definitely definitely uh yeah so i guess we'll we'll cover the strengths briefly um you know as pat mentioned, it's very cross-platform. So you write the website once, and 99% of it will work on everyone's computer. And typically, when you're making websites, you're making them for a lot of people.
Starting point is 00:59:17 I mean, imagine how many people visit, I don't know, AOL or visit any of these really popular websites, Yelp, right? I can't hash cheeseburger. I can't hash cheeseburger. I can't hash cheeseburger. Google+, right? I mean, there's millions of people going on these websites, and their computers come from all sorts of backgrounds. Some people are running Linux. Some people are running Linux kernel 3.0 beta with the latest Chrome on them.
Starting point is 00:59:50 Some people are running really old Windows 98 machines with IE6 or something, right? And so the web has to work for all of these people. Actually, it doesn't have to work for IE6 anymore. But the web has to work for a lot of these people. And the way HTML is designed it does it accomplishes this and so one of the hardest things in in you know software development is deployment you know is getting your application to run on everyone's machine anyone who's worked for a company or done commercial software development knows that there's a there's a percentage of people that you just know
Starting point is 01:00:23 upfront that you're going to have to refund them their money because the game you made isn't going to work or the app you wrote just crashes every time. This is just a known fact when you're writing desktop apps and things like that. There's going to be unsatisfied customers. When you're using HTML, the number of people who actually get your content correctly is amazing when you really think about it, all the different machines that are coming to your site. Yeah. Yeah. But the other thing is it's handwritable.
Starting point is 01:00:58 So we've talked about using programs to generate HTML, but especially for some of the static things, you might have an idea in your head of sort of how the webpage should flow and it's sort of a design, it's an aesthetic exercise in making a website. And so making something that's hand-writable where you can go in and tweak some values and maybe you want The heading bar to be a little bit smaller to give you some more real estate. You can go in and do that You don't have to Mess with some program or something to get at the HTML
Starting point is 01:01:35 Yeah, typically especially with cascading style sheets. You can go in and tweak all the values and make your website look just right So some of the issues, I guess, are that HTML, plain old vanilla HTML4, doesn't really allow, we keep talking about static webpages, but HTML and CSS together don't really provide a way for animations or interactivity of any significant meaning uh right by themselves yep yeah definitely i mean we'll talk more in the next episode about javascript and ajax and things like that but but yeah i mean regular html css if you want to see something different you have to hit f5 you know or control r if you're on linux you have to hit the refresh button on your browser to get new content.
Starting point is 01:02:27 Yeah. There's also, the way it's implemented now, and I know there's some movement afoot to try to fix this or change this in a number of different ways. But when you, we talked about you go request the HTML site, right? So whatever, AOL.com. And it responds with AOL.com slash index.html And you get that and your browser starts parsing it and it says oh, I need to go get this css sheet It doesn't maintain that connection. It opens a tcp connection gets to html and then closes the tcp connection So that's like a phone call picks up the phone dials says hey
Starting point is 01:03:02 I want the http thing here grabs it hangs up then it goes Oh, I need the css sheet picks up the phone dials says hey I want the HTTP thing here grabs it hangs up then it goes oh I need the CSS sheet picks up the phone dials the number you know asks hey I need the CSS sheet what server sends it across then it hangs up and while it's doing that the browser can optimize a little by making all of those requests in parallel but still each item is a separate tcp session and just like in that analogy of picking up the phone there's an overhead of picking it up and dialing a number and the same is true in tcp that to be flexible tcp has like a little bit of a you know slower startup time than you might want if you're going to be making many many many many requests to the
Starting point is 01:03:42 same server yeah exactly i mean just to put things in perspective, video games and things which have a high real-time component to them are done in UDP. Because UDP is another protocol, which we won't really get into, but because TCP has too much overhead, so they have to use UDP. So this, HTML is going over HTTP which has even more overhead than TCP which isn't good for a lot of applications so HTTP really isn't good for a lot of applications
Starting point is 01:04:17 and this is the biggest weaknesses and then you know there are, as Patrick mentioned, there's, I think it's called Speedy SPDI, which is a HTTP replacement that Google Chrome has built into it. And there's, you know, other, you know, WebSockets and things like that, which are trying to sort of alleviate this problem. But, you know, for 99% of the web developers out there, this is, you know, this is a major weakness of using HTML. Yeah. And so the way that user would see that, though, is it's going to be latency. So the time you hit enter to the time they can browse your web page, and you want that to be as short as possible, because if it's too long, and we all remember the days when the transfer speed,
Starting point is 01:04:59 you know, just the bandwidth to transfer all the images and text took a long time. Now we, I won't say we've completely gotten past that but now we're running into other bottlenecks which are becoming meaningful portions of the time to load a web page like these things yeah and i mean even just if it's not you know uh you know many seconds like it was back when we had modems uh we still have this issue where because you know each thing is a different request, you might go to a site and it might have, let's say, 30 images in it, but they all load at different times.
Starting point is 01:05:32 And so there's like a second or so where you're just getting all this weird things shifting around and your browser is just, as it gets all the images, it just sort of does something crazy. And again, there's ways around this but you know by default html and css uh this is you know a big weakness once you start adding layers to to fix some of these weaknesses like add interactivity and um you know try to add animations those kind of things you start to run into the fact that although it was a strength that html is cross-platform you also have the fact that people are running browsers that are 10 years old and you know eight years old and i saw a really
Starting point is 01:06:13 good graph about this once for each of the major uh each of the major web browsers how many people are still using old versions but uh corporations don't necessarily want to roll up the latest and greatest thing because it's an unknown you've got you know your grandmother who doesn't know how to update her internet explorer and so if windows doesn't tell her to do it she's not going to do it and so you've got people using really old browsers which may have bugs or problems and so you can get as you build up complexity you get all these weird rendering issues and you have to check compatibility across, you know, more than just four or five, you know, probably 10 or 15 different browser and browser version numbers to really, if you want to make sure you get all of your users the same experience yeah so it's not uncommon for a web developer to use virtual box which i think we talked about virtual box is one of the tools of the bi-week yeah so it's not uncommon to have virtual box with you know a windows xp machine with ie6 a windows xp machine
Starting point is 01:07:19 with ie7 windows xp machine with ie8 etc etc and to have all of these virtual computers all with different virtual browsers and to try your website on all of them and see what the happens. It's not uncommon actually it's almost guaranteed that you'll write a website
Starting point is 01:07:39 with Chrome or with Firefox or with Internet Explorer in mind, and then you'll go to one of the other browsers and it won't look right. I mean, something will look different. Maybe the text is just big enough where it causes everything to sort of collapse further down in the page, and you'll have to go in and make tweaks. You'll have to say in your CSS, you'll have to say, if this is IE8 do this or in your
Starting point is 01:08:06 HTML you'll have to write some JavaScript it says you know if this is you know Chrome you have to make this setting otherwise make that setting yeah there are some tools out there to help with those kinds of things like I know there's some services cropping up to have a bunch of basically like you said VirtualBox instances where they run your website and then send you pictures of all of the results or at least pictures pictures of the ones that they've detected to have rendered differently oh that's really cool yeah i've never heard of that but that's awesome yeah there's some people trying to do that it's very cool yeah i mean he's genius
Starting point is 01:08:39 because that way they just have the virtual boxes up all the time. And as soon as you give them a website, they go and visit it. So it's really cool. Yeah, I guess the only other weakness I can think of is just the verbosity of HTML. So when the HTTP protocol does have compression standards built in. So it will automatically compress your HTTP content before it sends it over the wire. So you don't have to worry about doing that. But even in compressed form, it's a description of what the webpage should look like. And so the tags are very verbose and you're having a lot of these opening and closing tags all over the place.
Starting point is 01:09:27 So you might want to just have a little table with some text in each of the cells and you might, if you're writing in C or something like that, you might just say, look, at this position put this text, at this position put that text. But because you're writing in HTML and it has to sort of conform to all these browsers and it has to look nice on all these different computers you have to be sort of very generic and say I want this table and I want this row and column
Starting point is 01:09:52 and it ends up becoming very verbose yeah and not only in data overhead of sending all that redundant information across but trying to fix a problem and go through all of these tags and parameters and and stuff to try to find where the problem might be can be a little overwhelming if you're trying to debug like a static html page by hand or trying to debug the output of uh you know a machine generated html page yeah i mean a lot of people say that the uh you know the modern internet was built on the back
Starting point is 01:10:26 of firebug which is um a extension or maybe it's built into firefox i think it's a i think it's a plugin oh okay still an extension yeah but uh they uh you know what it does is it will actually you can click on something while you have this firebug running and it will sort of show you what the HTML is because you might have a program as we mentioned generating HTML on the fly and let's say you had a bug in that program your output is just going to be a bunch of HTML so you might end up with garbage HTML or you might end up with lines being colored red even though they shouldn't be and this firebug lets you sort of go inside and say, what does this HTML look like at this particular spot?
Starting point is 01:11:13 So I think Chrome has something similar called Inspector, which is built into Chrome. You can just right click and say Inspect Element. And you can do this right now even if you're using Chrome. And it'll sort of show you the html that was generated for that particular element very cool very cool yeah yeah so html css i mean the technology started a long time ago but it's still very applicable to today it's still used it's the language of the web and very although it may not be directly a programming language, certainly it'll be a valuable experience for our listeners to learn some more about it. Yeah, definitely. I mean, I think that the Internet is really, you know, they always say, I think Larry Page is quoted as saying, never bet against the internet and uh you know what he's insinuating
Starting point is 01:12:05 is that the the internet is really uh because of the way it's just so distributed in nature and the way you can broadcast content out to hundreds or thousands or millions or billions of people it's really a just an amazing medium for getting information out there. And so this is HTML and CSS are your paint brushes and pencils that you use to sort of create in this medium. So this is the first of two, you know, podcasts on this topic. In the next show, we'll talk about JavaScript, which is a way to sort of add dynamic content and make your page
Starting point is 01:12:45 change on the fly um but yeah i mean this is definitely where it all started and this isn't going away so you said next episode next episode is going to be episode number 10 that's right it's a milestone the double digits pretty awesome yeah it's been enjoyable so far um you know typically wrap up the show talking about how things are going. So like I said, we've gotten some people following us on Google+. That's been really nice and encouraging and awesome. Hopefully we can get a dialogue going there. As always, make sure you can visit the blog for show notes and, you know, able to download the podcast there as well.
Starting point is 01:13:21 And that's programmingthrowdown.blogspot.com you can also email us at programmingthrowdown at gmail.com yeah i mean if you have any you know questions or uh you know uh you know feedback on the podcast or if you if you have any programming questions you know let's say you want to know about something in particular like game design or you want to know about data structures, I don't know, anything that kind of piques your curiosity and you want us to sort of elucidate more information on. That is not a problem. So yeah, we're definitely, you know, there's no shortage of programming languages, as I'm sure you guys know out there by now. But if there's a particular one that you're interested in that we haven't covered yet, definitely shoot us an email and let us know. Yeah, well, if that's it, I guess we'll wrap it up.
Starting point is 01:14:18 Thank you all for listening. Yeah, have a good week. The intro music is Axo by Binar Pilot. Programming Throwdown is distributed under a Creative Commons Attribution Sharealike 2.0 license. You're free to share, copy, distribute, transmit the work, to remix, adapt the work, but you must provide attribution to Patrick and I and sharealike in kind.

There aren't comments yet for this episode. Click on any sentence in the transcript to leave a comment.