KM Tech Terms

DOM (Document Object Model)

The Document Object Model (DOM) is the underlying concept that enables us to create fun, interactive, and dynamic websites. To understand what that means, let's go back to the days before Web 2.0, before JavaScript, before websites were dynamic. When Tim Berners-Lee first invented the web as we know it, web pages were relatively plain looking and more importantly, they were static HTML—meaning no rollovers, no photo slideshows, no AJAX, no auto-complete, none of the fun stuff we love about the web today. Fortunately, no one was satisfied with this state of affairs, so a group of web thinkers got together and came up with the Document Object Model (DOM) as a way to allow developers to manipulate web pages and make them dynamic. What the DOM does is it defines a bunch of things about web pages. To start, it says that a website is a document, and within that document are a series of objects. Any HTML element (<p>, <h1>, <div>, <article>, <span>) is an object within the document. Second, it says that objects are nested inside of one another in a way that can be charted in a tree-like structure, where each object represents a node on the tree. Once you have that tree plotted out, you can access any individual element by locating it's place on the tree. Lastly, the DOM defines the relationship between different elements in your document. Each element can have one parent and many children, and in turn, you can use your understanding of those relationships to make changes to individual, or many, elements. If this seems relatively straightforward that's because it is. If you have ever written an HTML document, it makes intuitive sense that you've got a document, with a bunch of objects (HTML elements) inside, and those elements are nested inside of one another. What's important about the DOM is that it creates a foundation that allows for the creation of events, properties, and methods. Events are anything that can happen on a website—a user action such as a click (the event, click), or a change in website state like when the site is finished loading (the event, load). Properties are the properties of each individual object in the DOM. A <div> might have a set width, while a <p> has a certain class name, and an <h1> has a background-color. Methods are things you can do to manipulate objects in the DOM. What most methods do is change the property of an element and do it when an event happens. For example, let's say that you want to transform your site in honor of Halloween. You might decide that when the event load happens to the website document you will change the background color property of the document to black, set all of the text to font-family Nosifer, and add an <h1> headline to the top of the document that says "Happy Halloween!" 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 function halloween() { // Set the background to black, and the text to red Nosifer document.body.style.background="black"; document.getElementById('container').style.fontFamily="nosifer"; document.getElementById('container').style.color="red"; // Create a new H1 DOM object and some new text var newGreeting = document.createElement("h1"); var greetingText = document.createTextNode("Happy Halloween!"); //Stick Happy Halloween text inside of the new H1 DOM object newGreeting.appendChild(greetingText); //Find the old headline and its parent element var oldGreeting = document.getElementById('headline'); var parentDiv = oldGreeting.parentNode; //Replace the old headline child with the new headline child parentDiv.replaceChild(newGreeting, oldGreeting); } // Do all of this when the web page loads document.onLoad = halloween(); A terrifying, ghoulish Halloween surprise made possible by the DOM! To take a better look at this code, download the HTML file here. Or check out the live example (if you dare!). Cocktail Party Fact When HTML5 created a bunch of new elements like <video> and <audio> and <article>, there were also a handful of new events added to the DOM. After all, you can't have a <video> or <audio> object that doesn't have a pause, play, or volumechange event. And what's the use of HTML5's offline storage if you don't have an online or offline event?

Domain

A domain name is a shortcut to a computer that's hooked up to the Internet. It's been a long time since we've had to memorize phone numbers! These days you keep all of your friends and family plugged into your phone book, so you just scroll down to "Jane," hit call, and there you go. It's the same sort of things with computers. Back before domain names, every computer could only be found by its address on the Internet, which looks something like 192.168.0.1. These are called IP addresses. Domain names are easily-remembered versions of those numbers - instead of typing 216.172.190.36 into Firefox, you can just type in skillcrush.com and your computer knows where to go! Every domain name has a few different pieces. The most common part is called the TLD - the top level domain. That's the .com or .org or .net. When the web first started, there weren't too many; .gov, .edu, .com, .mil, .org, .net and .int. They were each originally supposed to have a purpose - .org was for nonprofits, .mil was military, .com was commercial, .net was computer network companies, .int was international businesses, and so on. These days only .mil, .edu and .gov guidelines are enforced. Big business can buy a .org, no problem! Instead of being related to a business type, top level domains can also be based on countries. .co.uk is the UK, .jp is Japan, .nu is the tiny country of Niue. Among new internet companies, .ly - which is for Libya - is super popular. You can see a big long list of all the countries on Wikipedia. The next level up is the "example" in example.com, or "skillcrush" in skillcrush.com. That's called a second-level domain, and is what we usually think of when we talk about "domain names." When the Internet was first made public these domains were only sold by Network Solutions, but these days there are many many more companies out there that sell them. So how do we manage all of these layers and enforce all of these rules? ICANN - the Internet Corporation for Assigned Names and Numbers - is a nonprofit created by the US government that controls the ins and outs of naming on the Internet. If someone steals a domain from you or there are copyright troubles, ICANN is the organization that is called in to arbitrate. They're also responsible for licensing everyone who sells domains, from Network Solutions to Google to GoDaddy. As of late, ICANN has been producing a lot of new TLD's. Instead of sticking with .com and .net, they've come up with ones like .aero, .biz, .coop, .pro, .museum and many more. There are a lot more on the drawing board, too - from .africa for African sites to .nyc and .wien for New York City and Vienna. ICANN has also been taking steps recently to allow anything to be a top-level domain - from .pepsi to .ipad - just like second-level domains are currently. Don't go rushing out to buy your name, though! It's going to cost you a $185,000 application fee, and $25,000 a year after that. You can read more here. Cocktail Party Fact "Domain hacks" aren't about that kind of hacking, instead they're some clever tricks you can use when picking a domain name. For example, the domain .us is the country-based TLD for the United States, and could be used for normal domains like example.us or nike.us. If you wanted to be clever, though, you register a domain like delicio.us and suddenly you've got a great-named site! delicio.us beats out delicious.com any day in the fun-sounding department.

Blog Laws

Data Journalism is the practice of using data to tell a news story. While news outlets have used always used data to support their stories, in data journalism the data is actually the backbone of the story. Large data sets are analyzed and turned into something the reader can understand - anything from a short article to an interactive visualization. For example, when The Texas Tribune wanted to tell a story about the impact of Food Stamps in the state of Texas, they used Texas State Government data to create a map showing the number of food stamps recipients by county. Data Journalism often includes interactive elements that allow you to personalize the news story. In 2009, the Chicago Tribune published a story exposing elder abuse in retirement homes all over the state. Worried that your grandma could be suffering? The Chicago Tribune let you find out if there was cause for concern; the news story allowed readers to look up safety reports for every retirement home in the state of Illinois. Sometimes the data in Data Journalism isn't data in the strict numbers sense of the word, but news stories themselves. The Data Journalism project EveryBlock aggregates news stories, tweets, flickr photos and other social media posts, as well as crime reports, by area code, auto-generating a news feed for almost every block in America. As governments and organizations release more and more data and the tools to analyze it become more and more user-friendly, data journalism will only grow in volume and importance. From American political watch-dogging to crowd-sourcing stories in Africa, everyone from large teams to individuals can have an impact. There are jobs to be had in Data Journalism, and you should go out and get them! The technologies used to find and tell a story range widely - HTML, JavaScript, R, Python, SQL, Rails, and a million other options. Every team has their own set of technology, and different people who are good at different roles. If you'd like a peek into the world of Data Journalism, you should have a look at The Bastards Book of Ruby - an "an introduction to programming and its practical uses for journalists, researchers, scientists, analysts, and anyone else whose job is to seek out, make sense from, and show the hard-to-find data." It's plenty easy to read and understand and will have you on your way in no time! Cocktail Party Fact A developer named Adrian Holovaty is credited for writing the Data Journalism manifesto. In this 2006 blog post, he argued that newspapers needed to think about news stories not as stories in and of themselves, but as an aggregation of a set of data points - the who, why, what, where, and when - that could be pulled apart and re-constituted to tell new and different stories. Sounds great to us, but even five short years ago it was quite controversial!

Regular Expressions

Regular Expressions (regex or regexp) make it possible to find specific words or letters in large bits of text. When you use HTML to put together a website, your computer understands what types of content each block of text is (It's an <h1> headline! It's a <p> paragraph!), but it doesn't understand what content is inside that block of text. Regular expressions are a way to parse those blocks of text and look for specific letters or patterns, such as punctuation, letter combinations, or even whole words. What's neat about regular expressions is that when they search your text, they can be very particular and very flexible, at the same time. Unfortunately, regular expressions happen to be a wee bit confusing to read, especially the first time you come across one, which makes them seem super scary to beginning programmers. But like anything programming-wise, regular expressions are constructed using their own alphabet of regular expression characters, and there is nothing wrong with just printing the list out and keeping it by your side as a reference. There are infinite uses for regular expressions, but one of the most common is to validate user emails. Now, validating an email seems pretty straightforward, right? It needs to have some letters, then an at (@) symbol, then some more letters, a period (.), and then a Top Level Domain (com). /\S+@\S+\.\S+/ This regex says "For this to be a valid email, I want to see a string of letters and/or numbers (/\S), then at least one @ symbol (+@), then there should be more letters and/or numbers (\S), followed by a period (+\.), and them some more letters or numbers (\S+/)." So we put in [email protected], the regex says "Yep, that looks like an email." and we are good to go! But what if I wanted to be tricky and put in a fake email address like [email protected]? What would the regex say? Turns out that because all this regex knows to look for is some letters, followed by an @ symbol, followed by more letters, followed by a period, followed by some more letters, it would still say "Yep, looks like an email." even though you and I both know that .skillcrush is not a real Top Level Domain (TDL). In order to make sure that your users aren't making up new TDLs (or using other punctuation where they shouldn't be), you need to use a slightly more complicated regex: /^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi)|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i Alright, I know that looks like a beast, and we don't quite have time to decode it all, but I want to point you towards one particular bit: \.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi) In regexp speak a | symbol means OR, so the above says "In order for this to be a valid email, you need a period (\.) and then I want to see aero or arpa or biz or com..." No making up a TDL here, this regex means business. Cocktail Party Fact Regular expressions are actually a whole special computer language onto themselves, but because they are so useful, they have been baked into most of the major web programming languages such as PHP, Ruby, and JavaScript.

Version Control

Version control keeps track of the changes you make to a file. Have you ever accidentally deleted something in a Word document, saved and closed it, only to discover your error hours later when it's too late to fix? Version control solves this problem! Version control keeps track of your files and remembers all of the changes you've made and when you make them. If you screw something up, no problem, you just roll back to an earlier, less-screwy version and work from there. Problem solved! Instead of tracking each and every time you hit a key like Word does, though, you bundle up all of your changes into something called a commit. This set of changes could be anything from changing a typo or fixing a bug to adding a whole new page to a web site. Developers use version control to keep track of changes in their code, but you can use it for anything. Poets use it to track their poems, businesspeople use it to track their reports - you name it, you can use version control on it! Each commit could be a new stanza, a change to a header, or a whole new feature. While version control is definitely useful for keeping track of your own files, it becomes more and more important when you are working on the same files with collaborators. Instead of sending a file back and forth to work on it, we can all work on the same files at the same time thanks to something called merging. Merging takes commits by two or more people and combines them into a new, complete document. You can fix the first paragraph while I work on the last paragraph and we won't overwrite one another because we use version control! Imagine this: you are working on a web app, made up of hundreds of files of code that all work together in a very specific way. Now imagine that there are ten members of your team and each one of them is fixing an issue in a different file. Without version control, team members could overwrite one another's changes or otherwise accidentally delete all of another team member's hard work. Version control helps manage that workflow so no one steps on anyone else's toes, and if something does go wrong you can always just go back to an earlier version. While there are many different version control systems out there, two popular ones for developers are Subversion (a.k.a. SVN) and Git. They each have their own strengths and weaknesses, but both work great at keeping your changes in line. Cocktail Party Fact There are web apps built in Ruby, PHP, Python, ASP, and all manner of other computer languages (even one called Groovy!), but all of those web apps use version control to keep track of their work. If you're planning to work professionally as a web developer, you'd better learn version control! Now try this! Github is a social coding website that allows developer to share their code and keep track of their changes using Git. Take a look at this link, which links to a specific change made by one developer on the Timeline Project. Notice that github tells you when the change was made (2 days ago), who made it (jfkeefe), what he called the change ('fixed tweet button info') and then shows you what file he changed (index.html), what he deleted (in red) and what he added (in green) to the code. That's version control!

C, C++, C# and Objective C

C, C++, C# and Objective C are a set of similarly-named programming languages, some of which are related and some of which are not. Back in 1969, the programming language C was created at Bell Labs by a computer scientist named Dennis Ritchie. Ritchie based C off of an earlier language called B. C spread to wide use quickly and is arguably the most popular programming language ever made; one big reason is that programs written in C can run on all sorts of different operating systems (Macs vs. Windows, for example) with only small tweaks. These days, C is used when you need something that runs quickly without using much memory. This usually means behind-the-scenes code, like the code that lets your keyboard or monitor talk to the rest of your computer (a.k.a. device drivers). Since it's so common, though, you're going to be finding C all over the place! C++ was a programming language developed in 1979 by a Danish programmer with the amazing name Bjarne Stroustrup. It was originally called "C with Classes," and was renamed C++ in 1983. ++ is shorthand for adding 1 to a number in programming, so C++ roughly means "one better than C." We might just plain call that D, but because it was so closely related to C he went with C++ instead. C++ added a ton of new features to C, designed to make programming more efficient and give the developer more options on how they'd like to code. The biggest addition is something called object oriented programming. The basic idea of object oriented programming is that all of your code is arranged in little bundles of data and actions, instead of a spread-out jumble. For example, if I'm writing a program about a bike and a person, I'd have an object called bike and an object called person, and write things like bike->color, bike->brand, and person->name to get information about them. Why's this important? Just like you might keep all of your bills in one drawer and your love letters in another drawer, a lot of programmers find this sort of organization helpful. We'll write a whole email on object oriented programming soon, we promise! Thanks to object oriented programming and other additions, it's easier to write complex programs in C++ than plain C. This makes C++ popular for complex software packages - most of Windows is written in C++. With all of the additions, though, C++ has a little more overhead in terms of things like memory usage and file size. C++ is the third most popular programming language, behind C and Java. Objective C was created by two guys, Brad Cox and Tom Love, at their company Stepstone in 1983, but has recently become very popular as the driving force behind OS X and iPhone apps. It's a "superset" of the C language - it can do everything C can, but also has a few extra features. These features were pulled from a language called Smalltalk, and like C++, were mainly focused on making the language more object-oriented. C# came out of Microsoft in 2001, intended as a new object-oriented language. It isn't actually based on C - it was intended to be "C-like," but the two languages didn't end up having much in common. C# was originally code-named "Cool," but Microsoft was on a roll with adding # to letters (A#, F#) so they went ahead and named it C#. C#, like C++, can be used for pretty much anything. Since it was produced by Microsoft it ends up powering a lot of Windows programs also, but it's also an option for doing web development on a Windows-based web server. All in all, C spawned a lot of new languages. You can imagine C++ and Objective C as C's sophisticated offspring, while C# is the neighbor kid who's always hanging around the house. Cocktail Party Fact We can cover most of the alphabet with programming languages: A, B, D, E, F, G, J, K, L, M, Q, R, S, and T are your basics, and then you can throw in P#, J#, F# .NET, X++, C-, A++ and a plenty more!

The Cloud

"The cloud" is, simply put, just the Internet. You can pretty much just replace "the cloud" with "the Internet" in any sentence and have a good idea of what is going on. When you're backing up your music to the cloud or accessing your email in the cloud, the important files are on a computer on the Internet, and not your computer. In other words, your personal computer is on the ground. Any other computer or web server in the world is in "the cloud." Outlook and Apple Mail store your email on your computer. GMail and other web-based email services store your email on their servers and therefore, are in the cloud. Why do we call it the cloud? Because saying your files are "in the cloud" is slightly more marketable than saying that your files are "on the Internet" and a lot more marketable than saying that your files are being saved on a bunch of Google servers sitting in a closet out in California. We have been keeping our email in the cloud since the mid-90s, but in the past few years, a new crop of companies has been making the cloud way more powerful. Since broadband gave us all faster upload and download speeds, it's easier to upload bigger files like photos or music or video to online services. Dropbox and Apple iCloud are good examples; they allow you to buy space in their cloud, put almost anything you want in it, and then access those files from almost anywhere and any device - your desktop, laptop, phone or tablet computer. Now that files live in the cloud, you might as well edit them there, too. Some new companies like Aviary and MovieMasher are even letting users do complex and processor heavy things like photo and video editing in the cloud. Cocktail Party Fact One big concept of the cloud is that "the cloud" acts as a whole, even when it's made up of a thousand different parts. Your email might be stored on hundreds of different web servers, scattered across the world, but when you load up GMail it's all sitting right in one place.

Angel Investor

An angel investor is a wealthy individual who invests their own money (usually between $5,000-$250,000) in early stage companies. So why would anyone want to risk that sort of money on an unproven business idea? In addition to the hope and dream of a return, angels have many different motivations for making investments. Some invest because they know the founder or are interested in supporting a great idea. Some, particularly those dubbed super-angels, have worked in the tech industry for a long time and invest in new ventures in order to give back to the community. And others are driven by ego or the desire to be associated with the new new thing. In other words, angel investors are not motivated by any one goal. Unlike institutional venture capitalists, angels can set their own targets or expected return on investment. Some angels will want a 10x return like venture capitalists; but others will be perfectly satisfied with a 2x return or simply the pleasure of supporting a business or entrepreneur they love. All angel investors are supposed to be accredited investors; which means that they qualify to make investments according to rules set forth by the U.S. Securities and Exchange Commission (SEC). Currently, in order to qualify as an angel investor you must have at least $1 million in assets (not including the value of your home) or income exceeding $200,000 in each of the two most recent years or joint income with a spouse exceeding $300,000 for those years and a reasonable expectation of the same income level in the current year. That said, there are plenty of people who invest in early stage companies who are not accredited. Although you can raise money from non-accredited investors, it does come with some risks and is generally not advised. Unlike venture capital, which is institutionalized and highly-organized, you can't just search "angel investors" and find ones in your area. Therefore, it is often easiest to find angels via your friends, friends of friends, or professional network. Don't have friends with money? Fret not! More and more angel investors are banding together to form angel networks which have standardized processes for finding and selecting potential investments. Robin Hood Ventures in Philadelphia, New York Angels, and Golden Seeds are all examples of angel networks which have been created to make it easy for angels to find entrepreneurs and vice versa! A new startup called Angel List is an online social network where early stage companies can meet investors. And, JumpThru, a New York City-based accelerator, released a database of women investors, which has a section dedicated to female angels. Cocktail Party Fact Change is a comin'! The JOBS Act that goes into effect on January 1, 2013 includes a provision that legalizes crowdfunding for start-ups. Under the new Act, any individual making under $100,000 will be allowed to invest up to 5% of their yearly income (up to $2,000) and any individual whose income is $100,000 or more will be able to invest 10% of their annual income (up to $10,000) in companies. So if you've got a great idea, cozy up to your friend who just got that promotion...she may just be able to invest in YOU by next year!

Brute Force Attack

A Brute Force Attack is an attempt to crack a password by trying all possible password variations. If someone were trying to get into your computer and they knew the password was comprised of six letters, what's to stop them from trying every possible six-letter combination? aaaaaa aaaaab aaaaac aaaaad... ...ZZZZZW ZZZZZX ZZZZZY ZZZZZZ Somewhere along the way they will hit 'daisyB' and voilà! This method of cracking a password is called a Brute Force Attack, and it's the simplest, but most time-consuming attack that can be used against secure data. The longer your password, the more protected you are from Brute Force Attacks. A five letter password using upper- and lowercase letters has 380 million possibilities. That might sound like a lot, but a fast computer could crack that in a few seconds! A nine character password, on the other hand, has 2.7 quadrillion possibilities and that would take even the fastest computer days to crack. As computers get faster and faster, the length of time it takes to execute a Brute Force Attack gets smaller and smaller. In 1975 a password with 72 quadrillion possibilities seemed secure, since it took a $20 million supercomputer to guess it. By 1998, though, a machine that could crack it only cost $250,000! Luckily, most services only give you ten or so tries before locking you out. Brute force attacks are generally only useful when you have total control over the system; hackers who steal databases or entire computers have plenty of time to sit around waiting until one clicks! Cocktail Party Fact There's a new idea that it's more secure to have a phrase as your password. It's easier to remember "correct horse battery staple" than it is to remember "Tr0ub4dor&3″ - and the longer phrase takes about 67,000 times longer to guess!

Frameworks

A framework is a collection of code libraries that are used to accomplish common tasks when building web applications. Think about it as if you were building a house. Your house may be incredibly unique, but it's still going to share some things in common with your neighbors house: you probably want a bathroom, a foundation, a roof, and maybe even some support beams. A house building framework might provide you with those house building essentials, plus a handful of useful tools, and maybe even some structure that would make it easy to build that awesome, totally unique house that you have planned. Similarly, no matter how unique your web application is, chances are it will share some commonalities with other websites. For example, most web apps require web servers, databases, the application code itself, and some kind of user interface. If a developer set out to build an application without a framework, she would need to write every single features from scratch. This approach would be tedious and figuratively require re-making the wheel. Frameworks provide you with the ready set group of components that you need in order to quickly build fast, secure, web applications, so you can focus on the important stuff: that special thing that makes YOUR web app so spectacular. Most web application frameworks are programming-language-specific, meaning they are compatible with one language only. Stay tuned to Skillcrush.com to learn about some of the most popular web application frameworks out there.

Databases

Databases are like fancy spreadsheets where information lives. When you save your blog post it goes into a database, same goes for your bank account balance. A database can have anywhere from hundreds to billions of entries in it! Because a database isn't actually a spreadsheet, though, you need a programming language to get data in and out. A popular one is a language called SQL. You might have heard of MySQL - it's one of the many databases that use SQL. SQL stands for "Structured Query Language," which sounds complicated but is pretty easy! Let's say you wanted to get the name of every user over the age of 25. You might be able to do something like this: SELECT name FROM users WHERE age > 25; Doesn't seem so hard, does it? You're going to be writing SQL queries in no time! Cocktail Party Fact Database developer talk these days is dominated by the 'NoSQL' crowd. They don't really like how SQL works, and are making new kinds of databases instead. Kind of a standoffish name, no?

JavaScript

JavaScript is a programming language that helps make a web page interactive. When you view a slideshow or get annoying popup ads - that's JavaScript. If you see your Facebook Timeline update or Google autocomplete a search term - that's JavaScript. When most anything changes on a page without you clicking a link - that's JavaScript! JavaScript is one of the few programming languages that can work in your browser. Because of its ubiquity and how easy it was to learn, for many years it was dismissed by professionals as being a toy for amateurs. This all changed around ten years ago with the advent of "AJAX" and "Web 2.0." These were sets of technology that used JavaScript in a whole new way, allowing the Web to be way more interactive than it had been before. So next time you use a Google Spreadsheet or watch a Tweet update on a web page, you can know what's going on - that's JavaScript! Cocktail Party Fact You might have heard of 'Java,' but that's actually a completely different language. It came out around the same time as JavaScript, and they only share a name thanks to a marketing scheme! The joke goes "Java is to Javascript what Car is to Carpet." JavaScript's fancy real name is ECMAScript, but you should only call it that when you're angry that it hasn't done its dishes.

Semantic Web

Semantic Web is a movement to store data such that computers can actually understand the meaning of it. If I tell you my name is Sammy and that I like to write about technology, you'll understand. But when a computer stumbles onto "My name is Sammy, and I like to write about technology" it doesn't know what to think. Most of the Web, according to computers, is a bunch of indistinguishable gibberish. All they can do is present us with some files and text and leave us to make sense of it. In order to change this, some technologists have devised ways to help computers better understand the content they are transmitting. One example is Semantic HTML. HTML, as we have learned, is comprised of a series of HTML tags (<div> tags, <section> tags, <author> tags), each with its own specific function and meaning. The dirty secret of HTML is that you can get away with using tags in ways that you are not supposed to (like using <p> tags when you are writing a list and should be using an <ol> tag). Your website will look just fine, but the computer won't know that you have written a list because all you told it was that you wrote some paragraphs. Once computers do understand the meaning of content on the web, a whole new world of possibilities opens up. You know when your friend writes you an email inviting you to lunch and your iPhone can recognize the date and makes it easy for you to add it to your calendar? That's the Semantic Web in action! Apple has programmed your phone to recognize a date and know that you want to add it to your calendar. Cocktail Party Fact Another method for the Semantic Web is the Friend of a Friend (FOAF) protocol, which creates a standardized way to explain to a computer relationships between different people. When someone is describing their relationship to someone else using the Friend of a Friend specification, they have ten options to choose from. These include: "spouse of" and "acquaintance of" as well as "antagonist of" and "enemy of"! Unfortunately, "gets brunch with" and "pet sits for" or "is hooking up with" are not yet included.

Wireframes

Wireframes are sketches, drawn by hand or using a computer program, that show the features, content, and functionality of a website or software application. Wireframes are sketches, drawn by hand or using a computer program, that show the features, content, and functionality of a website or software application. Wireframes are the blueprints of the tech world, they give you a rough sense of what a website will look like, illustrate what features you are to build and define how all the different parts of a website are meant to work together, without actually creating final designs. A handdrawn wireframe Wireframes can take a myriad of forms. Wireframes can be sketches drawn by hand, static annotated wireframes created with a wireframing program, or clickable wireframes that can serve as a rough prototype for the finished product. A wireframe made with a wireframing app Making wireframes of your site can be a great step at many stages in the lifecycle of a web development process. It's often a good idea to start your brainstorming by sketching out a wireframe or two. Then, once you begin to develop a list of product features, wireframing out your site can help you make sure that you aren't forgetting anything. And finally, clickable wireframes are an excellent way to test the usability of your product and gauge user interest before you invest your time and money in developing the final product. A Deeper Dive There are three main reasons why you should wireframe thoroughly and often: At first blush, you will always underestimate the complexity of the task at hand. In our experience working with individuals, small businesses, and Fortune 500 companies, one thing is constant: everyone believes that their project is small and straightforward, and it rarely is. The good news is that creating a complete wireframe of your website, with every single page wireframed out, can go a long way in making sure that you have everything accounted for. Even if you think you are all on the same page, everyone is imaging something different. We promise! For better or for worse, language is an incomplete communication medium. When it comes to software design, nothing-no amount of emails, feature documents, or hand-wringing-beats having a rough prototype that everyone can look at, and better yet, click through. Usability! Usability problems are inevitable! Best to diagnose them early and often. And a little known secret in the tech world is that you can test usability of your website using only wireframes. Even paper ones. Seriously, give it a try! Now Try This Before you get started, remember that wireframes can take many forms, as long as they illustrate your site content, features, and functionality. You don't need anything more complex than a sheet of paper and a pen to make your first wireframe. That said, there are a number of excellent wireframing softwares out there, some free, most paid, that come with preset website elements-stuff like buttons, drop down menus, and whatnot-to make wireframing easier. Some programs even let you make your wireframes clickable and interactive. Our favorite wireframe apps: Mockingbird: Mockingbird is a web based wireframing application that allows you to create your wireframe online and share it with collaborators. Personal plans start as low as $9/month. Omnigraffle: Omnigraffle is one of the most popular wireframing tools. The desktop application, only for Macs, allows you to create reusable styles for your site, generate page outlines, and take advantage of the extensive library of Omnigraffle stencils. Licenses start at $99. Axure: Axure is super expensive (~$300!) but there is nothing like it. Axure allows you to create clickable and dynamic wireframes that you can output to HTML and JavaScript files to put online. If you are working in client services, the investment is definitely worth it. Axure also has a big library of presets to make wireframing for iPads, Android phones, and iPhones quick and easy. One Last Tip: As you go through wireframing your site, make sure that the connections between pages are clear. When you click the search button, where do you go? How do you get from Home to Tech Terms, and back? If someone lands on a single tech term page, how easy is it for them to access the article archive? Asking yourself these questions as you go through your site will help you get a much clearer sense for all of the features that you will need to build.

Unit Test

Unit testing is the process of testing the behavior of independent "units" of your code. Your tests check if a "unit" is given a controlled input it returns the expected output. A "unit" is the smallest piece of code in your project that can be tested by itself. Often, this will be a single function, method, or class. In this example, we are examining a JavaScript variable named multiplyKittens that contains a function. This function takes two parameters, "kittens" (that represents the number of kittens you begin with) and "multiplier" (the value you want to multiply your kittens by). This function will be the "unit" we test our assumptions on. var multiplyKittens = function(kittens, multiplier) { var kittenNumber = kittens * multiplier; return kittenNumber; } Our assumption about this unit is that if you supply it with two numbers as parameters you will get back the result of those numbers multiplied together. In order to test this unit, I write a "suite" of unit tests using a JavaScript framework called Jasmine.js, which makes it easy for me to write suites of tests. A suite is a collection of related unit tests, and they will live in a file (or files) that are separate from the code you are testing. Often developers design theses suites to run automatically before the code is pushed to your web server (and live to the public!). describe("Kitten Testing Suite", function() { it("correctly multiplies the number of kittens", function() { expect(multiplyKittens(5, 10)).toBe(50); expect(multiplyKittens(7, 7)).toBe(49); }); }); The "describe" function takes two arguments, the name of the suite (our suite name is "Kitten Testing Suite") and a function that will include all of our unit tests. The "it" function is called a spec, it contains the expectations we have for this unit. It takes two arguments, the name of the spec and a function that contains the expectations (sometimes known as "assertions") we want to run on this unit. The "expect" functions are our assertions or expectations. This just means we are asserting that if we supply the function multiplyKittens() with 5 and 10 the function should return the number 50. The same goes for 7 and 7, if we supply the multiplyKittens() function with 7 and 7, it should return the number 49. When we run this suite it will tell us if our assertions passed or failed (and, luckily both of our assumptions passed!). Why Should I Unit Test? Unit testing is the best way to ensure that your code is working properly, and more importantly, it's the best way to ensure that you're only writing the code you really need for your web application. Unit testing while you are writing your code allows you to write and test your code incrementally, so you will find bugs sooner and identify unnecessary code as you write it, rather than months down the line when that code snippet is wreaking havoc on other parts of the website. What Should I Unit Test? It's recommended that, at least, you test your public functions, methods and classes (Here, the school of thought is that you assume your private, or internal, methods are working correctly). Your should test one specific assumption at a time. Each unit must be independent and not depend on the output of another unit (this means your tests should be able to run in any order). Some General Thoughts to Unit Tests The prevailing thought on Unit Testing is, "test behavior, not implementation." This means you shouldn't worry about the "implementation details" of each unit, just the end result. In our example an "implementation detail" would be the multiplication operator (the asterisk * symbol). We didn't test that it worked correctly, just that the final number returned from the function was what we expected. You generally don't unit test private methods directly. Many developers consider them to be an implementation detail. However, other developers consider unit tests to be a "code contract" and use them as documentation of all the methods, functions, and classes in a software project. It's up to you and your team if you wish to test every unit (private or public) as a source of internal documentation, or just test the public API. One Last Note Unit tests are not designed to find bugs in your code (I wish it were that easy!). Unit tests only test each piece of functionality separately, and it does not test that the entire system as a whole is working correctly. If you are looking for an automatic way to find bugs in your project Integration testing might be what you are looking for. This is a very brief outline, and many details were omitted. If you want to learn more, start by reading the Jasmine.js documentation. And if you're really ready to level up, go check out Sinon.js. Martha Gridler is a Software Engineer at Etsy and an alumni of NYC's Hacker School. Martha is pink and fluffy on the outside, hard and code crunchy on the inside. And sometimes, she speak at conferences about programming. Follow her on Twitter @marthakelly or read more of her writing.

Amazon Web Services (AWS)

Amazon Web Services, or as it is commonly referred to, AWS, is a suite of web hosting and data storage services offered by Amazon.com. Turns out, Amazon isn't just a big online book-seller, they are also in the web hosting business! One of the biggest questions facing young tech startups is how much to invest in their web hosting infrastructure. Take us as an example, today Skillcrush only has a few thousand regular visitors, but what if Techcrunch writes about us and a few thousand people try to access our site all at once? Will our web hosting service be able to handle the extra traffic? If not, what can we do? And since we don't know when Techcrunch will decide to write about us, how do we make sure we are ready? Back in the day, the only way to make your site ready for a few thousand simultaneous visitors was to plan way ahead and buy enough web servers to handle the onslaught. And that cost a lot of money! Money often not well spent. Fortunately for us, a few years back a smart engineer at Amazon realized that there might be a business opportunity in renting some of Amazon's excess web server capacity to other companies. And thus, AWS was born. The two most popular AWSes are EC2 and S3. EC2 stands for Elastic Compute Cloud (that's E C-squared) and it is exactly that: elastic web hosting that can grow or contract as your business needs change. Only have a few hundred hits on your site? No problem, with EC2 you can use and pay for only what you need. But when that big article comes down the pike, you will be able to instantly add server power and be ready for the crowds. S3 is Amazon's Simple Storage Service (S to the third power). S3 is commonly used to store multimedia files such as images. Like EC2, S3 allows you to store as little or as much data as you need and only pay for the space you use. So who uses AWS? Well, many of the tech companies that you know and love. You might remember a few weeks back that a storm in Virginia knocked out an Amazon server farm and Netflix, Instagram AND Pinterest all went offline. Other companies like 37Signals and AppSumo use Amazon's S3 service (you can tell because of that telltale S3 at the beginning of their image URLs). Cocktail Party Fact Tor is a Knight Foundation backed internet privacy project that enables users to protect themselves and their internet habits from surveillance. One of it's central goals is to promote freedom on the Internet and make sure that journalists can do their research and reporting away from government scrutiny. One of Tor's projects is called the Tor Cloud, and what it does is allow users, like you and I, to buy server space on Amazon's EC2 servers and donate that space to Tor. Tor, in turn, sets up their special software on the server and are thus able to give journalists and political activists who live in countries like China access to the uncensored web.

CPM, CPC, and CPA

CPM, CPC, and CPA are the three main ways that digital media companies charge advertisers for online advertising. CPM stands for cost-per-mille, mille being Latin for one thousand. In the land of online media, media companies charge advertisers for impressions, which are counted in 1000s. Let's say you want to charge $10 per 1000 impressions on your blog, that means that you will charge $10 for every 1000 people who see an advertisement. The way that online advertisers count impressions is by page views, so 1000 pageviews equals 1000 impressions for each ad on the page. If you have 10 ads on the page—voila! You've got 10,000 impressions. At $10 per 1000 impressions, that's $100! How do advertisers determine how much they will pay for each impression? Black magic! Seriously, there are standard ranges, but as any good sales person knows, it's all about how you pitch it. CPM rates can vary from $0.25 to $200, or more. Media companies tend to be able to charge higher rates if a) the advertiser is selling a higher cost good (like fancy watches or electronics) and b) the advertiser believes that the audience is a particularly good fit for their product and particularly prone to open their wallets. CPC stands for cost-per-click. This is the rate that websites charge advertisers every time someone clicks on an ad. If the CPC for a site is $50, and an ad gets clicked 1000 times over the course of the month, the advertiser pays the publisher $50,000. Google is famous for their cost-per-click ad selling strategy—all of those Google Ads you see on your search results or next to your email? Google only charges those advertisers if you actually click on the ad. If no one clicks, Google makes no money. Looking to only pay for ads that drive action? Then you want to check out CPA or cost-per-action (also known as pay-per-performance (PPM) or cost-per-acquisition (CPA)). When a media company charges an advertiser using a CPA model, the advertiser only pays out if a user clicks AND does a specific ACTION. What does that action have to be? Depends on the advertiser! If Skillcrush ran ads we might pay only for users who signed up for our newsletter. Amazon, on the other hand, might pay only for users who actually bought a book. One of the best and worst things about online advertising is that it's really easy to track. Want to know how many people saw your ad? Look at the page views! Want to know how many people clicked? Look at the click rate. On the surface this looks like a good thing, but that depends on who you ask! Advertisers like it, but media companies don't because it has dramatically brought down the amount that advertisers are willing to pay for ads because now they know exactly what they are getting. Cocktail Party Fact Cost-per-impression is actually how television and magazine advertising has always been priced. Back in the day, magazines used to do all kinds of funny math to bump up their number of impressions. One major American magazine used to count 8 impressions per copy of the magazine! How could eight people look at EVERY copy of the magazine, you ask? Well you have to account for all the people who picked it up in the grocery store aisle or flipped through it at the doctor's office or shared it with their friends.

The Internet vs. the web

Did you know that the Internet is not the same thing as the World Wide Web? Although these terms are often used interchangeably, they are actually different things. The Internet is a system of interconnected computer networks that all use the same rules, known as protocols, to talk to one another. The Internet has been around since the 1960s when it was first developed by the US government, in collaboration with some private companies, in order to communicate massive amounts of information via computers. The internet was initially used by government agencies and universities to exchange news, email, and files or to remotely log into computers. The Internet is the all-encompassing 'network of networks' that includes all private and public computer networks—everything from your home Internet hook-up, to your company's internal network—that lets you do everything that you need to do. The Internet network makes all of your communication and data sharing activities possible: you move files around on FTP, send missives over email, chat with friends over instant messaging, talk to grandma using VoIP, and backup your data in the cloud. It wasn't until big, 'ol business got involved, through the launch of commercial Internet Service Providers in the 1980s, that we began to see the emergence of the World Wide Web. The Web is only one of many applications that have been built on top of the Internet. The Web is what most people think of as the Internet. It is an information-sharing application that sits on top of the Internet and allows you to read and interact with web pages through a web browser. Webpages that we see in our web browsers make up the Web; the network of interconnected computers around the world that enable us to see those web pages make up the Internet. Cocktail Party Fact So what do you get when you have a hand in creating the World Wide Web? Worldwide recognition at the Olympics! Tim Berners-Lee, the British computer scientist who is widely considered the creator of the web, was honored during the opening ceremony of the 2012 London Olympics during a segment called "Frankie and June say 'Thanks Tim.'" During the dance number the teenage lovers thanked Tim for having created the technology that allowed them to connect, and Tim, in turn, professed to the entire audience that the technology he created "is for everyone."

FTP & SFTP

FTP & SFTP are two common ways to put your website files on a web server so that they can be accessed via the internet. FTP stands for File Transfer Protocol and SFTP stands for Secure File Transfer Protocol. The only difference is that the secure one encrypts your files, username and password for greater security. If possible, we recommend that you use SFTP. You can use FTP & SFTP for lots of different reasons—to share big folders of images with work colleagues or video files with a client. FTP is super useful because you can use it to share files that are many gigabytes in size. But the way we want you to use FTP is to put your website files onto your web server. Let's say you bought www.mywebsite.com and you want to create a little PHP app that greets every visitor with the message: "Hello! Welcome to my awesome website of awesomeness!" After you buy the URL and a web hosting package, you need to obtain your FTP information. What you are looking for is: Whether you should use FTP or SFTP A URL for your web server (it often looks like ftp.yourwebsite.com OR ftp.hostgator.com) Your username, often something generated like yourwebsite240532 Your FTP password Then, what you do is download a free FTP application such as Fetch, FileZilla or Fugu, fill in the appropriate information in the appropriate spots, save the following code snippet into a file called index.php: <?php echo "Hello! Welcome to my awesome website of awesomeness!" ?> And drag and drop that file into the root folder of your FTP web server. We're in business baby! Your awesome website of awesomeness can now found by anyone at www.yourwebsite.com.

HTML

HTML (HyperText Markup Language) is what web pages are made out of. HTML describes what each part of a web page is to your browser. You know when you visit a website and see a headline and a bunch of paragraphs? A computer can tell the difference between a paragraph and a headline because each has its own HTML tag. You write HTML just like normal text and save it in a file with .html at the end. HTML is the only thing that you have to have in order to make a website. So what can I put on a website? HTML supports many types of content and media: paragraph audio video lists <p> <audio> <video> <li> ARTICLES IMAGE EMPHASIS BUTTON <article> <img> <em> <button> In order to place any one type of media in your website, you have to use its particular HTML tag. For example, images get <img> tags, videos get <video> tags, and so on.

JSON

JSON stands for JavaScript Object Notation and it's one common way to pass information from a database to a website. JSON originated as a replacement for XML (eXtensible Markup Language) when web browsers need to talk to servers. It is based on JavaScript so web browsers can read it very quickly, but can be used by any programming language. JSON doesn't dictate what data you share, but how you organize it. Whenever you want to describe something in JSON you start by creating an object. You do this by opening a curly bracket { and closing it }. Any of the information you put in between those two brackets is information about that object. You then give the object a series of properties. Each property has a name and a value, like so: { name: value, name2: value2 } The names and values can be anything. JSON doesn't dictate what you say, just how you say it. Imagine if you asked me for information about the object Skillcrush and you asked that I format my response in JSON. I would tell you my name, email, address, phone number, and whether the company is publicly traded like so: { "name": "Skillcrush", "email": "[email protected]", "address": { "number": 34, "street": "West 27th Street", "city": "New York", "state": "New York", "zip_code": "10001" } "phone_number": "212 889 9199", "publicly_traded": false, "ticker_symbol": null } When you put data into JSON you have four different data types that you can use. You can include a string (some text which you place in between quotes like "Skillcrush"), you can provide a number (like 34), you can provide a boolean value (true or false), an array (a collection of other JSON data types, for instance my address has a few different values), or you can just say null (like "ticker_symbol") meaning nothing. Many social media APIs use JSON as their way to provide you with access to their data. You will remember from our post about API's that Facebook's API sends you data back in JSON (take a peek), as does Twitter. Now Try This Take a look at Skillcrush's last two tweets on Twitter on Twitter's API Check out our stats: We are not verified ("verified":false) We have tweeted 945 times ("statuses_count":945) We have 1139 followers ("followers_count":1139) And have been listed 40 times ("listed_count":40) Now follow us! Cocktail Party Fact CouchDB is an entire database that allows you to store all your data in JSON documents instead of using database tables like MySQL. When the developers of the app Instinct, a web app that helps you learn to play guitar, they chose to use CouchDB because it gave them much more flexibility than traditional relational databases with their columns and rows. Turns out it's much easier to change the values of your JSON object than it is to reorganize a whole database.

Frontend vs. Backend

The frontend is the part of a web site that you can see and interact with, while the backend is all the rest. You know how the tip of an iceberg pokes out above the water, but they're really hundreds of feet deep? That's a lot like a web site. The parts you see and interact with on a web site - the buttons, the dropdown menus and big bold fonts - make up the frontend. The frontend of a web site has specific technologies attached to it. HTML makes up the text on the page, CSS makes it pretty, and JavaScript makes it interactive. All of these things happen in the browser. The backend is everything that happens before it gets to your browser. If you're booking a flight, that's where prices are checked, itineraries are booked, and credit cards are charged. A backend can be very simple or very complicated. A typical setup for a backend is a web server, an application and a database. The web server delivers a note to the application that you'd like to see all of the flights to Chicago. The application looks up the flights in the database, puts together a web page that lists them, and sends that web page back to your computer through the web server. That's all the backend. Once your computer gets a hold of it, it's the frontend. For technologies used in the backend, anything goes. If a database stores your name or flight info, it might be MySQL, MongoDB, PostgreSQL, or many others. Web pages could be put together with Python, Ruby on Rails, or PHP. The web server that sends those pages over to your computer might be Apache, Nginx, or IIS. The list goes on and on! Cocktail Party Fact Because you don't see the backend, programmers can swap out pieces of it without you ever knowing. For a while Twitter was powered by Ruby on Rails, but in 2011 switched over to Java. I'll bet you didn't notice!

VoIP

VoIP stands for Voice over Internet Protocol, the technology that lets your mom call you over the internet! While old fashioned phones and mobile phones use telephone lines to connect you to the person on the other end of the line, VoIP uses broadband. The term VoIP refers to anything that would normally be done using a traditional telephone line that can now be done over the Internet. This includes calling someone, or sending a fax or text message. When you Skype with your friends you are using VoIP. When your mom calls you on Google Voice, she is using VoIP. When you send a text message from your iPad, that's VoIP! VoIP is increasingly replacing traditional phone lines as the preferred way to communicate by phone. Many major cable service companies now sell 'digital phone service' - which is fancy marketing speak for VoIP - as do a whole crop of new companies like Vonage. The main advantage of VoIP is that because it uses broadband, it's much cheaper. This means that one set of infrastructure can be used for internet, cable, and telephones, instead of needing three different sets of wires. This doesn't save consumers that much money, but can make a big difference to businesses, especially to those that make lots of international phone calls! VoIP also allows you to have one phone number that travels with you, no matter where you are. New York, Paris, Shanghai? Just ring me up on my Skype or Google phone number! But there are disadvantages, and most of these have to do with how VoIP technology performs in emergency situations. First, VoIP technology relies on electricity to work. If your power goes out, your modem won't be able to connect to the Internet and you won't be able to make phone calls. During a normal power outage that's probably ok, but what if there's a hurricane? The other problem is that VoIP makes it harder to figure out where the caller is located. Traditional phone lines are extremely location based. One phone number, one discrete location. This means that 911 call centers can always trace the phone call even if the caller does not tell them their location. VoIP makes this a lot more complicated. Because your VoIP number can travel with you, it's not so easy to figure out where you are. Usually they can make pretty reasonable guesses based on IP Addresses, but they are nowhere near as accurate as traditional phones. Cocktail Party Fact A new crop of tech startups have been creating news ways that we can use phones and VoIP. Twilio, a tech company based in San Francisco, has made an API that allows you to create web apps that can you can dial up or text your with your phone. John Keefe, a developer at WNYC (New York's biggest public radio station), used Twilio's API to make an app that allowed bus riders in Brooklyn call a number to find out how many stops away their bus was. Pretty convenient, no?

Web Analytics

Web analytics allow you to track how many people visited your site, how long they stayed, and what all they did there. If you work in an industry that is even remotely integrated with the web, then you've inevitably heard people talking about web analytics. Want to know how people get to your site? Use analytics. Want to figure out where, in the process of exploring your site, they lose interest and leave? Analytics can help you figure it out. Want to know where you people get stuck in your sales funnel? Once again, analytics can help shine light on that. In other words, the way you should use web analytics is not to count site visitors (101, wowser!) but to gather actionable data to help you make informed marketing, design, and content decisions for your site. A Deeper Dive As you might imagine, there are dozens, if not hundreds, of web analytics options out there. Some popular ones are Google Analytics, Omniture, Chartbeat, and Kissmetrics. To learn how they all work from a technical viewpoint, check out our tech term about tracking pixels. Since Google Analytics is free, it's a great place to start. Even though we also use Chartbeat, Google Analytics is our primary tool here at Skillcrush for determining whether we are meeting our goals and best serving our users. (Although nothing beats an customer email, send us one!) Below is a breakdown of the basic features of Google Analytics to get you started. We promise to cover more complex stuff like goal setting and funnels in a future post. Visits: Visits are exactly what you think they are, visits to your website. When a person comes to your website they are assigned a particular code that is used to track them. Tracking visits over time is a good way to gauge whether your marketing strategy is working. Do you have more visits this week than last week? How many pages does your average user look at when they visit your site? Are there certain devices that are used to access your site more frequently than others? Behavior: Want to know if your latest advertising campaign is achieving your goal of getting new users to your site? The Behavior feature makes it easy to figure out whether you are attracting new visitors or if most everyone is a repeat-visitor. You can look at what the percentage of new vs. existing users is over time and see how it changes. You can also track how often users visit your site, and how much time they tend to spend on it. Visitor Flow: This feature allows you to track how people maneuver through your site. Are they coming in through the home page or via a particular article? What are they doing once they get to the site? Is there a particular section of your site where they all tend to end up? Traffic Sources: Google Analytics tracks traffic from a range of sources, including search engines, social media, display advertising, and email marketing. Want to know if that content partnership that you struck with Forbes is performing? Are people tweeting about you? Use Traffic Sources to find out. Content: The content section provides detailed information on how users are viewing and interacting with content on your site. This is where you can see things like total page views; bounce rates (the percentage of visitors coming to your site who only visit a single page); site speed (how long it takes a page to load on various browsers), and also track what pages are doing the best. You can also generate a report that shows how users interact with the links on a single page, which can help you better understand the visitor flow patterns you are seeing.

AJAX

AJAX is a set of technologies that makes the web highly interactive and responsive. It stands for Asynchronous Javascript and XML. The web used to be synchronous - this means that one thing happened after another. If you wanted to search, you'd type in your term and hit "Search" and wait around for results. You'd hit "refresh" on Twitter (which wasn't around back then) waiting to see if your friends posted any updates. These days, though, web pages can change asynchronously - without waiting for you to do anything. New tweets will load, new Google results will show up, all without refreshing or going to a whole new page. When Google suggests searches as you type, that's AJAX. Your browser takes what you've started typing - maybe "ski" - and sends it over to the server. The server runs through a database to see what people searched for that starts with "ski." The server sends a list of terms back and voilà! Your browser pops them into an list right under where you're typing. And you didn't have to do anything, so it's asynchronous. OK, so that's how the A in AJAX works, but what about the rest? The J is JavaScript. JavaScript is a programming language for your browser. Whenever things change around on a web site - slideshows, things popping up in the corner - that's JavaScript. In the case of Google's search suggestions, your browser is using JavaScript to ask Google for that list of terms. It's also JavaScript that displays the list it gets back! The last letter - X - stands for XML. Think of XML as an envelope that you can put data in. The first forms of AJAX sent XML back and forth to the server to talk. Whether it was finding tweets or search results, everything was wrapped in tiny XML packages. Some XML containing tweets might look something like this: <tweets> <tweet> <username>skillcrush</username> <text>Hey everyone, we're learning about XML!</text> <postedOn>2012-04-18</postedOn> </tweet> <tweet> <username>skillcrush</username> <text>Hey everyone, we're learning about APIs!</text> <postedOn>2012-04-17</postedOn> </tweet> </tweets> Although it has a lot of really different pieces, AJAX boils down to allowing your browser to get information from a web server (or Google or Twitter or Facebook or whomever) without you needing to click links or refresh the page. It just makes the web a more useable place. Cocktail Party Fact A new way of wrapping up data called JSON is now replacing the 'XML' part of AJAX. If we renamed it we'd be stuck with Asynchronous JavaScript And JSON - AJAJ - though, so I'm thinking we should stick with AJAX.

IP Address

An IP address is your computer's address on the internet. It looks something like this: 192.168.0.1. Every time you visit a site on the internet, your computer is asking another computer for the web page. How does that other computer get the web page back to you? It sends it right to your IP address. We've all seen those WARNING YOU ARE BROADCASTING YOUR IP popups. They're pretty goofy scams; of course you're giving out your IP address, you need those web pages to get sent back to your computer! Each one of the four numbers in an IP - 192.168.0.1 - can go from 0 to 255 (that's 2^8, if you're into binary math). That means we can get about 4 billion things connected to the Internet before we start to run out of addresses. It sounds like a lot, but as we all get more iPhones and Twitter-enabled refrigerators we're bound to use the rest up really quickly. As a result, a new version of IP addresses needed to be developed! It's called IPv6 (the one we're using now is IPv4). IPv6 addresses are super long and look something like this: 2001:cdba:0000:0000:0000:0000:3257:9652 Which, as you can expect, offers you a lot more addresses. How many more? Something like this: IPv4: 4,294,967,296 IPv6: 340,282,366,920,938,463,463,374,607,431,768,211,456 Yep, that's a lot of tweeting fridges. Cocktail Party Fact Now when you run into someone wearing a "There's no place like 127.0.0.1" t-shirt, you'll know that its not gibberish, its a Wizard of Oz joke! Most IP addresses are used to talk to far away computers, but 127.0.0.1 is the standard IP address for your computer to talk to itself, which some of us might just call home.

Bugs

Bugs are problems or errors in software or computer hardware. When a computer program fails to do what it's designed to do, we call that a bug. When you encounter a bug in a program, it is important to create a detailed report and send it to the developer. When a developer responsible for fixing a bug gets an email that looks like this: My email is broken! It is really hard for the developer to figure out where the problem is. A useful bug report covers all of the following: What you were doing and where you were on the site. The last thing you did before the problem occurred. What you had expected to happen. What happened instead. When you tried again to do the same thing did it happen again? (Is the problem reproducible?) So for the example above, instead of saying "My email is broken!" you might say: I was reading an email from my Aunt Betty, and I clicked the 'Reply' button. I thought it would open up a new window to reply, but it forwarded the email to everyone in my address book! I tried it again, and it did the same thing. Developers and IT professionals rely on being able to walk through your steps to find out exactly where the bug is and what's causing it, so the more information the better! If you include all that information in the bug report, tech folks will probably buy you a cake in gratitude. Many bugs can be chalked up to error on the part of the user, for instance clicking the "Forward" button instead of the "Reply" button. The frequency of user mistakes has inspired tech folks to coin colorful and generally derisive terminology for simple user errors. Two examples are PEBKAC (Problem Exists Between Keyboard And Chair) and ID-10T error (idiot error). User error, though, can usually be attributed to poor design on the part of the program or website! User experience (UX) and human-computer interaction (HCI) are two fields that attempt to make software intuitive and easy to use. Cocktail Party Fact While referring to problems as 'bugs' dates back to Thomas Edison in the 1870′s, the term was popularized in the 40′s. Legend has it that one of the early computers, the Mark II, was acting up, and the cause was a moth that had worked its way into a relay!

CRUD

CRUD stands for create, read, update, and delete and those are the four most basic things you can do to data. In order to be considered complete, a web app must allow users to accomplish these four tasks. Let's for a second forget about CRUD and think instead about human life. If we were to distill the lives of all 7 billion people on earth down to their most basic, universal parts, they all have the following in common: everyone is born, everyone lives, everyone grows (develops, or changes) and lastly, everyone dies. Humans, we might say, have BLGD (pronounced blogged). Beyond these four BLGD commonalities there are infinite variations and complexities. But we can all agree that those four things are the fundamental truths of human life. CRUD are those four basic commonalities for all data and web apps. Every web app in the world does a variation of those four actions to data—it creates data, it reads data (meaning it shows the data), it updates the data, and it deletes the data. When you log into Facebook and post a status update you create an update. You can then read the update, edit (ahem, update) the update, or delete the update. Facebook status updates make full use of CRUD. Likewise, when you write a blog post on WordPress you can create the blog post, you can read the blog post, you can update the blog post, and you can delete it. Thus, WordPress also allows you to perform all four functions of CRUD. What other examples of CRUD can you think of? Cocktail Party Fact Find CRUD too, you know, cruddy? Well if you prefer you can swap it out for the more pleasant, if slightly more verbose, BREAD - "Browse, Read, Edit, Add, Delete." Same actions, different acronym.

Pareto principle, or the 80:20 rule

The Pareto principle states that 80% of your work will be accomplished in 20% of the time, and 20% of your work will eat up the remaining 80% of your time. One of the most frustrating truths of software development is that the complicated stuff, the making of the guts of a web app, are never what takes the longest. You can build a reasonably robust and functioning web app within a matter of days or a few short weeks. What takes time is everything that comes after that, all of the refining, finessing, and testing that makes a functioning web app a professional, ready-for-the-public, web app. Among themselves developers call this the 80:20 rule. 80% of the functionality of a web app will take 20% of the time to build, and the other 80% of the time will be spent on the remaining 20% of the functionality. It will be the small stuff-incremental refinements and last-minute optimizations-that will chew through your schedule and budget. Turns out, this isn't just a facet of software development, but a basic tenet of the human experience. This phenomenon is commonly referred to as the Pareto principle after the Italian economist, Vilfredo Pareto, who observed that in 1906 80% of the land in Italy was owned by 20% of the people. At it's most simple, the Pareto principle says that in many different aspects of life you will find that "80% of the effects come from 20% of the causes." Sound bogus? Turns out there is a mathematical explanation. The Pareto principle was made famous by Joseph M. Juran, a business and management consultant who was an early advocate for lean manufacturing and approaching business management with an eye for the nuances of human relationships. In what aspect of your life, business or work do you see the Pareto principle play out? Tell us in the comments. Cocktail Party Fact Another common way that the Pareto principle plays out in business is the old adage that "80% of your revenue will come from 20% of your customers." It has also been observed that in gardens 80% of your peas will come from 20% of the pods. On construction sites 80% of injuries will be caused by 20% of the safety hazards. And unsurprisingly, in health care, 20% of patients will need 80% of the health care resources.

WYSIWYG

WYSIWYG ("What You See Is What You Get") editors allow you to create content without knowing how to code. When you're looking at a blog post or a comment on a web site, you're actually looking at HTML. A sentence with a few bold words and a link in HTML might look something like this: <p>This is a sentence with a <strong>few bold words</strong> or <a href="http://www.google.com">a link</a></p> The thing is, we don't all know HTML, yet! [Skillcrush is going to change that!] Fortunately, that's where WYSIWYG editors come in (pronounced wizzy-wig). Instead of typing the code and then seeing how it looks, you just design how it looks and the editor makes the code for you. If you've ever clicked a button in a text editor to make a word bold, or clicked another one to make a link, you were using a WYSIWYG editor. Tumblr and WordPress use WYSIWYG editors for you to make blog posts, and Gmail uses one for when you're writing emails. WYSIWYG editors save time and trouble when you aren't trying to make anything too complicated or specific. What you see is what you get! WYSIWYG editors aren't just for the Web, either. iPhone developers lay out screens in a program called Interface Builder, where they can click and drag text and buttons, changing colors and adding features without writing a single line of code. Personal website builders that let you insert pictures and add content without learning to code are all based on WYSIWYG editors. WYSIWYG editors speed up your workflow, but you can run into tradeoffs with flexibility. What if the WYSIWYG editor doesn't support the feature you're looking for? Maybe you'd like to use Comic Sans, but your email client only lets you use Arial! Even if you knew how to write the code yourself, some editors won't let you. You may get lucky, though - ever seen an 'HTML' button when you're using a text editor on the Web? That's your shortcut to the raw code the editor is making! Click it and you can edit the HTML to your heart's content. Another downside to WYSIWYG editors is that the code they create is usually pretty messy and difficult to understand. Turns out, there's a lot of thinking, planning, and design that goes into coding larger web projects and it's hard to teach all that logic to a WYSIWIG editor. WYSIWYG web page builders like Dreamweaver are great for creating a simple website, but if a professional needs to improve or expand the page they'll want to start from scratch. All in all, WYSIWYG editors are an invaluable tool for taking charge of the web. Next time you click the 'link' button in Gmail you'll know just what to say - it's a wizzy-wig!

jQuery

jQuery is a library of preset JavaScript tasks that makes it easy and fast to make your site interactive and fun. JavaScript is a web programming language that allows you to make your website interactive. Do you want to put a photo slideshow on your website? How about a pop-up that invites users to sign up for your newsletter? What about putting an ad on your blog? Yep, you are gonna have to use JavaScript to do any of those things. JavaScript, however, can be a little verbose. Let's say that when a user—we will call her Liz Lemon—signs up for your newsletter, you want to say "Thanks for signing up, Liz Lemon!" Using JavaScript you would need to write: window.onload = initAll; function initAll() { document.getElementById("submit").onclick = submitMessage; } function submitMessage() { var greeting = document.getElementById("name").getAttribute("value"); document.getElementById("headline").innerHTML = "Thanks for signing up, " + greeting; return false; } Not terrible, but since you are a lazy programmer, you will vastly prefer to write this script using jQuery: $("#submit").click(function () { var greeting = $("#name").val(); $("#headline").html("Thanks for signing up, " + greeting); return false; }); Notice that $ sign? It's the surefire sign that someone is using jQuery. In order to use jQuery you will have to link to jQuery. That way, when your script calls a jQuery command like click, your browser will know what you are saying. You can either downlaod jQuery and host it on your own website, or you can take advantage of Google's awesome server power and link to jQuery from there: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script> Just copy and paste that link tag and stick it in your HTML doc (either in between the <head></head> tags or in the footer) and you will be jQuery ready-to-go. So what all can jQuery do? Well let's see, you can do some awesome fade outs, or make a super slick date picker, or what about making yourself a mobile app?

CMS

A CMS (Content Management System) is a piece of software that lets you easily write, edit and publish content on the web. Back in the olden days, every time you wanted to update a web site - say, your blog - it wasn't too easy. You'd need to download the HTML files of your web site, edit them (don't make a mistake!), upload them to the server, and cross your fingers that you did it all right. Lots of steps, lots of anguish! Although this method worked, it was complicated and time consuming. Now, thanks to CMSes, you can write all your content in a simple form, hit a "publish" button and voila! Website updated! No coding necessary. Blogging platforms like Tumblr and Blogger are Content Management Systems. If you work for a company with a big web site, it probably has a CMS it uses to manage its web content. Creating and editing new pages or image galleries is a lot easier with a CMS than doing it by hand! CMSes have been around since the beginning of the Internet, but really started picking up steam around 1999 with the spread of blogging. The founding of services like Livejournal and Blogger helped introduce Content Management Systems into the lives of many, even if their users didn't know what a CMS was! Cocktail Party Fact WordPress, a free CMS for blogs, powers 15% of the top 1 million web sites!

MOOC

A MOOC is a massive open online course. Today we are celebrating two exciting things: Ada Lovelace's 197th Birthday (check out the awesome Google doodle) and the beginning of CSEd Week. CSEd Week is an effort by Computing in the Core, an advocacy organization that works to promote Computer Science education all over the country. This week we will be running a series of pieces all related to the topic of Computer Science education, because we here at Skillcrush believe that access to Computer Science education is something that every person, child, and dog should have! Do you also support Computer Science education? If so, sign the pledge. A MOOC is a massive open online course. By definition MOOC's are massive, they are open to an unlimited number of students, they are open, meaning that they are free, and they are primarily taught online over the Internet, even though sometimes students do meet in person for study groups. The idea behind MOOC's is actually quite old. In many ways, MOOCs are trying to solve the same problem that distance learning courses, and online education courses before them, are attempting to solve: democratize access to education. The term MOOC was first coined by Dave Cormier of the University of Prince Edward Island (yes, that Prince Edward Island for you Anne of Green Gables fans) who used the term when referring to a 2008 class called "Connectivism and Connective Knowledge" that was taught primarily via RSS feeds. MOOCs have risen to prominence this past year, however, due to a few notable, extremely popular MOOCs being launched by education institutions like MIT and Stanford. In the Fall of 2011 160,000 people signed up to take Sebastian Thrun's Standford class on Artificial Intelligence. Harvard, MIT, Yale, and many other educational institutions have also made courses available via web platforms such as edX and iTunes. As you might expect, a new crop of startups have sprung up hoping to capitalize on the new-found popularity of online education (among them, you might argue, Skillcrush). So if you are one of those lifelong learners, you have tons of options! May we suggest that you check out Coursera, Udacity, edX or Khan Academy? Cocktail Party Fact The first recorded instance of a distance education program dates back to 1728 when a ingenious teacher cum entrepreneur named Caleb Phillips, posted an advertisement in the Boston Gazette claiming that he had developed a new form of shorthand, and was looking for students to teach. Lessons, it seems, would be "sent weekly."

SaaS

SaaS stands for software as a service and it is a way to deliver software to users via a subscription over the Internet. Back in the golden olden days of the late 90's we all had to install our software to our home computers. As more and more software development has moved to the web, and more and more computing power has moved into the cloud, software has migrated off our computers and onto the Internet. Instead of buying a CD-ROM or downloading the software and installing it to your computer, you can now sign up for a software subscription and access the application through your browser. Common examples are Dropbox, Google Apps, Quickbooks Online, Postling, Chartbeat, and Salesforce Sales Cloud. Although most SaaSes are paid via monthly or yearly subscription plans, some SaaSes like Mint.com are free for consumers. There are lots of benefits to the SaaS approach for software developers and consumers alike. Developers who choose to distribute their software as a service pay a much lower cost for distribution and find it much easier to update their products - instead of having to issue a new version and ask all users to update the application, they can update the application on their own servers and all users will automatically see the changes. From the consumer point of view software as a service is a great option because the initial investment is usually much lower and you can access the application from any computer or device. You also get the added benefit of having all your data backed up by someone else. Cocktail Party Fact Now you know what SaaS is, but have you ever heard of its crazy cousin SASS? SASS has nothing to do with software as a service but is all about Syntactically Awesome Stylesheets aka a new way to write CSS in a manner similar to how you write programs in Ruby or PHP. SaaS, SASS, SASS, SaaS. Similar looking and sounding, completely unrelated things. Some SaaSes use SASS, but many a sassy SaaS don't take no sass from SASS. You follow me? We techies don't mean to confuse you, we just like to confuse you. Is it working?

Command Line

A command line interface (or the command line) is a text-only way of browsing and interacting with your computer. The command line is the opposite of using something like OS X or Windows; no mouse, no icons, nothing but text. You might remember the DOS prompt. You'd boot up your computer and find yourself looking at a black screen with C:> staring back at you. That's an example of the command line! You might have been able to type "win" to start up Windows, but there's plenty else you could do just from the command line, too. C:> dir 'Dir' could list all of the files in a directory, while 'fdisk' would check your hard drives to make sure they didn't have any errors on them. If you'd like to relive the olden days, you can find a a list of commands over on Wikipedia. Macs have a command line, too, called Terminal. You might also hear it called the shell or bash. You'll see how to fire it up in the Now Try This section! Why would anyone ever use the command line? Many programs can only run from the command line, and don't have a graphical version. For example, if I wanted to create a new Ruby on Rails site, I'd have to hop down to the command line and type 'rails new project.' It also has powerful ways for different programs to work together and send data back and forth. Most web servers don't have graphical interfaces, and developers can only interact with them using the command line. Copying files over, running programs, troubleshooting - all of it needs to be done by typing in commands. This is one reason why so many developers use Macs. Underneath the pretty graphics in OS X is a powerful command line that's very similar to the one that runs on web servers. This makes it a little easier to move a site between a Mac and a web server than if you're starting from a Windows machine. Cocktail Party Fact rm is a powerful command that deletes (or removes) files. A popular prank on Macs and Linux-based machines is to convince people to type rm -rf * - rm usually doesn't delete much, or asks before it does, but adding on the -rf makes it delete every file willy nilly. Tricking someone into deleting everything on their computer isn't really the funniest thing in the world, so don't try that at home! It does make for some good stories, though - check out how this happened to Pixar when they were working on Toy Story 2.

Cron Job

A cron job is a script that runs on a web server to perform maintenance tasks on regularly scheduled intervals. Sound fancy? It's not. In fact, it's totally mundane, not unlike brushing your teeth... Do you brush your teeth everyday? Usually around 7 am and 11 pm? Do you do it to keep those pearlies white and tartar free? Well, like you, web servers need to do weekly, daily, or even hourly, maintenance tasks. This helps them stay tartar free. Cron jobs can do all sort of things. They can backup files or databases, they can clean up data, they can send emails, they can transfer data from one place to another, they can update information from external sources. One of the most common cron jobs is a script that regularly logs onto the Internet and downloads all your email. Did you think computers are just born knowing how to do that? The only thing that all cron jobs share is that they are scripts that are run automatically on a set schedule. Want to try your hand at creating a cron job? Read DIY's guide on how to get started. Cocktail Party Job Cron jobs may sound raunchy, but the origin of their name is actually quite refined. The word cron is derived from the Greek word for time, chronos.

Text Editor

A text editor is a text editing program, similar to Microsoft Word, but for code. When you are writing code you want to make sure that the only data in your document is the code you wrote. What you need is to write your code in a plain text editor that makes sure your text has no styles applied to it. Why are styles such a problem? Who says I can't write my code in hot pink Comic Sans?! Well, it turns out that the code that powers programs like Microsoft Word and Google Docs, and enables you to do things in the program like style your text hot pink and Comic Sans, can interfere with whatever code you write and muck up your program. And even if you are on the more conservative end, and only use the default setting—size 12, black, Times New Roman font—remember that that's still a style imposed by the program. Think that because you aren't a developer this isn't an issue for you? Think again! If you write any copy for any website, you need to watch out. For example, let's say that I am writing a newsletter blog post. We have a Skillcrush CMS, but I prefer to write my newsletter copy in Google Docs. So I write a sentence and then I copy/pasted my text into my Skillcrush CMS. What I want: My h1 headline is hot pink and Comic Sans. What I get: <strong id="internal-source-marker_0.49519535480067134">My h1 headline is hot pink and Comic Sans.</strong> See that extra stuff, the '<strong>' tag and that 'id="internal-source-marker_0.49519535480067134″'? That's some extra junk that Google Docs added to my HTML text! So what's a developer (or blog writer) to do? Use a text editor specifically made for writing code, of course. If you are willing to spend some money we recommend TextMate. Otherwise, Notepad++ (Windows), TextWrangler (Mac), and Aptana are great, free options. Cocktail Party Fact Of course, writing in plain text editors with black fonts and white backgrounds can be a little boring. Not just that, but it can make your code really hard to read because you won't be able to easily distinguish between tags, text, methods, classes, or functions. Fortunately, most code text editors ship with something called syntax highlighting. What syntax highlighting does is highlight in different colors various parts of your code. For example, in JavaScript, your reserved words might be one color, function names another color, and methods a third. This way it's easy for you to scan the code to figure out what misspelling is causing all those darn errors...

Web Server

A web server is a computer that can be accessed through the Internet. When you visit Amazon.com or do a Google search, 3 things happen: Your browser sends out a request for a web page A web server receives your request and puts together the right parts The web server sends you back a web page It's a lot like ordering a pizza. You call in, they make it, and then deliver it right back to you. Most any computer can be a web server - even your own computer. As long as you have software on it that knows how to listen for Step 2 (take the order), your computer could send out web pages all day long. The software that responds to these requests is also called a web server. A little confusing, we know! Internet Information Services (IIS) is the name of the web server software that comes with Windows, while Apple computers come with web server software called Apache. Apache is also popular on Linux computers, which is the type of computer most web servers out on the Internet are. You might remember from our PHP newsletter that we explained how most web apps are comprised of PHP with a MySQL database running on an Apache web server on a Linux computer. A typical web server is different than your computer, though, because it likely doesn't have a monitor or a keyboard. It's probably a box the size of a laptop that's squeezed into a closet with a bunch of other web servers. How do you work with it if it doesn't have a monitor? Through the Internet, of course! Big operations like Google have server farms - rows upon rows of shelves upon shelves of servers. Since computers act up when they get too hot, a big issue with server farms is having enough air conditioning to cool the whole place down. Cocktail Party Fact A new style of server farm (popularized by Google) uses big metal shipping containers to hold the servers instead of normal rooms. This modular design allows you to move each container around, swap containers in and out, and add more servers to each location easily. Each container can hold up to 1,200 servers!

API

API stands for Application Programming Interface, and it's how computers and web applications share information with each other. When you visit a friend's Facebook profile, it's designed for a person to look at. Nice fonts, pretty images, plenty of links, lots of eye candy. Computers are pretty bad at clicking around on websites and looking at images, though. As a result, they get a special way to interact with the site: an API. An API lets computers and web sites talk to each other without all those links and styles and pretty images getting in the way. Think of it as a version of the site stripped of everything but the most important pieces of information. If you wanted to invite all of your Facebook friends to play Farmville with you, it'd be a pain to email them each individually. Instead, you can just ask Farmville to do it for you. How's it get all their info? Farmville just uses Facebook's API! Every time you take a picture on Instagram or make a new post on Tumblr, you can automatically post it to your Twitter feed. How's that magic happen? Instagram and Tumblr just use Twitter's API! So next time you log into Instagram or Farmville or some other new web app using Twitter or Facebook, you'll know that APIs are hard at working behind the scenes helping sites communicate.

Agile

Agile software development is a software development methodology that forgoes a hard set of must-have application features, in favor of responding in real-time to user needs. In practice, this means that an agile software development team treats a web application not as a fixed thing, but as a living piece of software, constantly evolving in response to new information. Non-agile teams follow a waterfall method of software development. This means that first they decide what features they want to build, then they design the user experience of the site, and then move into development. Each step is distinct and follows the previous step, in one continuous, linear march towards product launch. Waterfall methods of product development are common in physical product manufacturing. As you might imagine, when building a car it's really important that you have locked your design direction before you move into sourcing the parts, and assembling the car. On the other hand, software is extremely malleable and you don't face those same physical constraints. So it's much easier to make updates to the design or development at every stage in the product development. Agile software development uses a process of many, much smaller, iterative design and development loops. Agile teams start with the smallest possible feature sets for their web application, quickly step through the design and development processes, release the first version of the web app, immediately move into testing it with users, gathering feedback and bug reports, and then cycle back through the design and development process to fix mistakes and add new features, as needed. This process is sometimes called continuous deployment, since the team will continuously deploy new bug fixes and feature improvements. Agile software development, in combination with a heavy focus on customer development, is a foundational tenet of the Lean Startup movement. Cocktail Party Fact Agile software development practices have been employed by software developers of all stripes for decades. That said, the term agile was coined in 2001 by a group of disgruntled software developers in the 'Manifesto for Agile Software Development'. You can read the full text of the manifesto (it's not long!) in French, Polish, or Yoruba if you prefer, and you can even become a signatory.

Easter Egg

An Easter egg is a secret message, game, or silly joke hidden in a piece of software. Common examples of Easter eggs include secret menus in DVD's, games found in word processing software, or in-jokes hidden in computer programs. They get their name from being hidden like the eggs in an Easter egg hunt! Easter eggs are a long-standing tradition in the tech community. Way back in 1967, early computer scientists programmed their mainframe computer to respond to the command "make love" with the question "not war?". Early video game programmers commonly inserted their names into their software; the term Easter egg was coined after video game designer Warren Robinett wrote his name in a secret room in the 1979 game Adventure. As computers got more powerful and software became more complex, so did the Easter eggs. In Microsoft Word for Office 97, typing the word blue and styling it a certain way reveals an entire pinball game! Ever asked Google Maps for directions between New York and Japan? Looks like you're kayaking across the Pacific Ocean! Until 2002, Microsoft Office had amazing Easter eggs, from funny tips to a flight simulator. As part Microsoft's "Trustworthy Computing" initiative, though, it decided that Easter eggs would no longer be allowed - even hiding something fun counted as untrustworthy!

IP Address

An IP address is your computer's address on the internet. It looks something like this: 192.168.0.1. Every time you visit a site on the internet, your computer is asking another computer for the web page. How does that other computer get the web page back to you? It sends it right to your IP address. We've all seen those WARNING YOU ARE BROADCASTING YOUR IP popups. They're pretty goofy scams; of course you're giving out your IP address, you need those web pages to get sent back to your computer! Each one of the four numbers in an IP - 192.168.0.1 - can go from 0 to 255 (that's 2^8, if you're into binary math). That means we can get about 4 billion things connected to the Internet before we start to run out of addresses. It sounds like a lot, but as we all get more iPhones and Twitter-enabled refrigerators we're bound to use the rest up really quickly. As a result, a new version of IP addresses needed to be developed! It's called IPv6 (the one we're using now is IPv4). IPv6 addresses are super long and look something like this: 2001:cdba:0000:0000:0000:0000:3257:9652 Which, as you can expect, offers you a lot more addresses. How many more? Something like this: IPv4: 4,294,967,296 IPv6: 340,282,366,920,938,463,463,374,607,431,768,211,456 Yep, that's a lot of tweeting fridges. Now when you run into someone wearing a "There's no place like 127.0.0.1" t-shirt, you'll know that its not gibberish, its a Wizard of Oz joke! Most IP addresses are used to talk to far away computers, but 127.0.0.1 is the standard IP address for your computer to talk to itself, which some of us might just call home.

Backend Programming from Ruby to Node.js

Backend programming includes everything that happens behind-the-scenes in a web application, meaning all the action that takes place on the server. That includes all the work of the programming languages, all the data storage, and all that web serving. (Click here to bone up on the difference between frontend and backend.) Let's say you want to look for factory to produce your new awesome watch design. You hop on over to your favorite website, Makers Row, and type "watches" into the search box. Since the website is built in PHP, PHP takes your search term, heads on over to the web server that stores the site code, pokes through the MySQL database for all the American factories that manufacture watches, and then sends a list back to the frontend of the site using JSON for you to see. Now, because of the way the web is structured you don't ever see the backend. But it's still a great idea to familiarize yourself with all the different parts that make up the backend, because it plays a crucial role. With that in mind, we put together a tech-term package that covers the major components of the backend-the common web programming languages, the data storage, and the web serving. Happy Friday! Backend Programming Languages PHP: PHP is one of the most popular programming languages for the web. Ruby: Ruby is a programming language designed for productivity and fun. Python: Python is a programming language that is fun to read, flexible and easy to use with other languages. Backend Programming Frameworks Rails: Rails, a.k.a. Ruby on Rails, is a framework for building web applications. Django: Django is a framework that makes it easy to build big, robust web applications in the programming language Python. Data Storage Databases: Databases are like fancy spreadsheets where information lives. MySQL: MySQL is one of the most popular databases in the world, and no one agrees on how to pronounce it. JSON: JSON stands for JavaScript Object Notation and it's one common way to pass information from a database to a website. Web Serving Web Servers: A web server is a computer that can be accessed through the Internet. Node.js: Node.js is a JavaScript framework that makes it possible to use JavaScript for backend development.

Types of Typefaces

Fonts belong in a few different categories, and each has its own role on the web. Ever since the ancient Sumerians scratched their first symbols into clay tablets way back in 3000 BCE, typeface designers have been hard at work perfecting the letterform. Over the subsequent 5,000 years, the design community has rallied around roughly five main typeface classifications. Those five categories of fonts are serif, sans serif, display, script and symbol. Each category has its own strengths and weaknesses; some are better for headlines, some are a little more fun, others are better for 800 pages of text. SERIF Serif typefaces are defined by their "feet," which are yes, technically called feet. They're the little lines that poke out at the edges of letters. term-typefacecategories-serifSerifs are super easy to read because those little feet create a subtle visual connection between the letters. This readability makes them great for paragraphs of text - you'll see them on everything from blogs to newspapers to ebooks. Slab serif typefaces, which have thick blocky serifs, are super popular right now. SANS SERIF Sans Serif typefaces are like Serif typefaces minus the feet (sans means without). term-typefacecategories-sansserifSans Serifs are usually clean and geometric, which makes them easiest to read when they are either really LARGE or really small. You will see sans serifs often used for headlines, captions, and short descriptive texts. DISPLAY Display typefaces have A LOT of personality. term-typefacecategories-displayWe are talking about the kind of typeface that is always dressed up in western gear or techy robot suits. Display typefaces are best used when you need a little bit of flair in your design. You wouldn't want to read a paragraph set in a Wild West typeface, but they're great as attention-getter headlines. SCRIPT When you are looking for a fancy font with a lot of style a Script typeface is your lady. term-typefacecategories-scriptThese typefaces have lots of swoops and curls and sometimes even look handwritten. Script typefaces look awesome for logos, large headlines, and for little details to give something a nice handmade touch. SYMBOLS & DINGBATS Sometimes a picture can say a thousand words. That's when you cue up a Symbol or Dingbat typeface. term-typefacecategories-symbolsWho wants to write out love when a ♥ says it all?

BitTorrent

BitTorrent is an efficient way for many people to download the same file. BitTorrent is mainly known as how people download pirated movies, or leaked album releases, or HBO shows they just can't stream. Behind these stories, though, lies an impressive piece of technology. Before BitTorrent, every file-sharing service worked the same way, from Napster to Download.com. Someone out there had a file you wanted, and you'd download it right from them. Simple. What if the file is super popular, though? The more people downloading a file, the slower it goes. It's just like how your Internet connection slows down when you're sharing it at a coffee shop or with roommates. Traditionally, everyone downloading a file is competing for the server's bandwidth. With BitTorrent, though, they all work together. When you start to download a file using BitTorrent, your computer also gets information on everyone else who is downloading it at the same time. I might have parts of the file you don't have, and maybe you have parts that I'm missing. So we swap! Instead of just downloading from the server, you're also automatically downloading from everyone else who is downloading, too. This ends up being much faster for downloading, because you can download from many places at once, instead of just relying on one source. This makes it easier for the server, too, since it can rely on different users sharing the file instead of the server being the only source. BitTorrent is one of the only file-sharing technologies that gets faster as more people are using it! More users, more sources, more speed. Cocktail Party Fact Thanks to the distributed nature of the Internet and the everyone-is-sharing nature of BitTorrent, it's become a thorny legal issue in relation to piracy. Popular torrent site The Pirate Bay was raided by police back in 2006, and has recently been blocked across much of Europe!

Web Browsers

Browsers are desktop software applications that allow you to browse the web and enjoy all of its infinite beauty. Let's take a few steps back, and think about what the web is really made of. We can all agree that the web is comprised of websites and social networks and video sharing sites and blogs and ecommerce destinations and some other miscellany, right? But what do all of those have in common? What are they all made of? If you boil it down to its essence, the web is just a bunch of text, plus some photos, and a few videos, saved on different computers around the world, that you are able to access from your computer thanks to the Internet. So let's say that you want to look at a website that lives at www.skillcrush.com. Without a web browser, how do you get to it? You could fire up your command line and type into the prompt: wget www.skillcrush.com Which will download the index.html file to your home computer. You can then open that file and see all the website code, but you won't be able to see what that website is supposed to look like. What web browsers do is take code and represent that code as the aesthetically pleasing, navigable, animated, multimedia, interactive wonderland that good websites can be. Web browsers come in all shapes and sizes: open source, proprietary, standard compliant, forward-thinking, and super-duper old and dysfunctional. About 85% of web browsing people use Internet Explorer, Firefox, Safari, and Chrome, but there are literally hundreds more out there if you want to go out digging. Although the World Wide Web Consortium (W3C) sets forth new browser guidelines, they aren't actually able to enforce them. And since web browsers are made by different companies, or distributed open source teams, who all have different priorities, pet projects, or revenue goals, web browsers vary greatly and browsing the web can be quite different depending on what browser you pick. So pick wisely! Cocktail Party Fact One of the biggest problems that web developers face is backwards browser compliance. Otherwise known as problems getting their super spiffy websites to work on old browsers. It's great that techies are always inventing cool new technologies but what do you do when someone is looking at your site using a browser so old it doesn't know about cool new things like HTML5 video and CSS3 pseudo-selectors? You write a big, fancy JavaScript library that translates all your new fangled HTML into something your antique browser can understand, of course! Modernizr.js is just that library, and it's literally a life saver for any developer who has to worry about how their site looks in Internet Explorer 7 or (GASP!) Internet Explorer 6.

CSS

CSS (Cascading Style Sheets) is the language that makes the web look nice. While HTML tells the browser what different parts of the page are, CSS says what those pieces should look like. For example, p means paragraph in HTML. If we wanted to make all of our paragraphs pink and bold, we'd do something like: p { color:pink; font-weight:bold; } CSS is written in a plain text editor and saved with a .css at the end of the filename. CSS lets you add color, fancy fonts, drop shadows, padding and everything else hip and stylish to a web page.

CSS3

CSS is the language that you use to design your website. CSS3 is the latest version of CSS, that has some very cool new effects. For example, say you want to create a button with a gradient. With CSS, your only option is to open up Photoshop, create a button with the gradient that you want to use and reference the background image in your CSS stylesheet. background: url('img/gradient-button-background.png') no-repeat; Problem is, if you want to change the color or anything else, you have to go back into Photoshop, change the color, and then update the background PNG—a bit time consuming. Plus, adding images to your stylesheet can significantly impact your website's load time. With CSS3, you can use the gradient function to create the same effect. Heavy, image-laden files be damned! So, what else can you do with a little CSS3? Why not try some of these fancy new tricks: Box Shadows Want to make your site look richer or make certain sections of the page pop out? Nothing says pop like a box shadow: box-shadow: 1px 2px 3px 1px #000000; RGB vs. RGBA Previously, you were restricted to RGB or hexadecimal values when using color on your site. CSS3 allows you to use RGBA as well, which allows you to set the opacity of the colors that you're using. background: rgba(0,0,0, 0.4); Rounded Corners, aka Border Radius In order to produce rounded corners in CSS, you had to create image files that were the exact size of the box that you wanted to add curves to. Fun times. border-radius: 3px 3px 3px 3px; CSS3 supports rounded corners and even allows you to adjust the radius of these curves without ever having to touch a graphics program. 3D Transform Ever used Illustrator to make your text look like the credits on the Star Wars movie? Or, make a 2D house pop out of the page by making it 3D? Guess what? You can do this now too with CSS3 Transform function. transform: rotateY(90deg) translateZ(200px); You can see all sorts of fancy examples of transformation here. Web Fonts The most popular new feature of CSS3 is definitely web fonts. You may not remember this, but only a few years ago we were all limited to a shortlist of web fonts which included Arial, Georgia, Impact, and Comic Sans. No more! With CSS3's @font-face feature you can literally add any font that your heart desires: @font-face { font-family: Wisdom; src: url("fonts/WisdomScript.otf") format("opentype"); } Of course, there is a little bit of a downside. Since CSS3 is still a working specification, meaning it hasn't be finalized or established as the web standard, its not supported by all browsers. Cocktail Party Fact Ever since CSS3 came on the market, developers all over the world have been trying to outdo one another with their CSS3 fancy-ness. The current winner? Jay Salvat who re-created the Mona Lisa using mostly CSS3 box-shadows.

Client-side vs. Server-side

Client-side means that the action takes place on the user's (the client's) computer. Server-side means that the action takes place on a web server. So what do we mean by action? And why does some action take place on your computer and some on a server? When we say action we mean all that work that programming languages do. You will remember from our term about programming languages that they are the doers of the web. Programming languages like Ruby, Python, and JavaScript do things like: send an email, ask the bank how much money you have in your account, or tell a photo slideshow to advance to the next image. In order for a programming language to do its job, the computer has to understand the language its speaking. Almost every computer in the world understands one programming language: JavaScript. For this reason, most things that can be accomplished using JavaScript can be done without needing access to a web server. Thus, though you are usually connected to the Internet when you run JavaScript scripts, you could just as easily disconnect from the Internet and run those same scripts on your computer (the client-side). On the other hand, if you want to use a programming language (Ruby, PHP, and Python, etc) you need access to a server that understands the language. Tasks that need to be accomplished with those languages happen on that server, meaning they are done server-side. But can't I just install a programming language on my computer? Yes, you can install programming languages on your computer but that still won't let you find out your bank account balance without being connect to your bank's servers. The reason for this is databases. Data storage is the other thing that is usually handled server-side. If data was stored client-side, your bank would have to keep track of thousands if not millions of user databases all over the world. Instead, they keep all their user data in one centralized database where they have easy access to it, and you do too via the Internet. Cocktail Party Fact Alright, so I understand client-side vs. server-side, what I don't understand is how that is any different than frontend vs. backend development! Very good call! It's really not that different. The difference between client-side vs. server-side, and frontend vs. backend programming is really a difference in semantics. Client-side vs. server-side describes where the action takes place (literally on your computer vs. a server). Frontend vs. backend refers to what kind of action is taking place (the kind the user sees vs. the kind a user does not). At the end of the day, everyone is really talking about the same set of technologies.

Compiling

Compiling is the process of converting source code into something that can run on a computer. Computers really only know how to talk in 1′s and 0′s (a.k.a. binary). When you get down to it, each and every instruction it gets looks something like this: 001110100101100010100010110 Everything from visiting a web page to drawing a picture in Photoshop is just a bunch of 1′s and 0′s to a computer. When you write a program, though, you write it in a programming language. If I wanted to check if I had enough in my bank account to buy an apple, it might look something like if (bankAccountBalance < applePrice) { cout << "You don't have enough money!" } This is called the source code, and contains your original, human-readable instructions. Compiling is the process of converting your code into the 1′s and 0′s a computer can understand. The developer writes all of the code, compiles it into a nice little program, and ships it out into the world. Most every program on your computer, from Solitaire to Firefox, is compiled. It's a lot like translating books; the original The Girl with the Dragon Tattoo was in Swedish (the source code) and needed to be translated (compiled) into English (binary) before you (the computer) could read it. Writing a compiler - the piece of software that actually does the compiling - is one of the tougher aspects of computer science. It has to be sure it understands the source code you wrote, catch any errors you've made in programming, and then spit something out that will work just right on your machine. But lucky us, we don't have to write the compiler, we just have to use it! Compilers are programs just like any other on your computer, and all it takes is typing a command or two to package up your code into a nice, machine-readable format. Cocktail Party Fact Many compilers are written in the language that they compile! GCC can compile C and C++ and is written in C and C++. You usually start off compiling it with a different compiler, but once it's finished it should be able to take care of itself.

DNS

DNS is the phonebook of the Internet. When you call your friends on the phone, you pick their name from your contact list and the phone does the rest. The Internet works the same way! Every website out there, from Amazon to Skillcrush, lives on a web server. This web server has an address out there - an IP address, to be specific - something like 216.172.190.36. By knowing its IP address you can send information to the web server, and say things like "I want that web page!" The thing is, no one is going to remember 216.172.190.36! They're just going to remember skillcrush.com. That's where DNS comes in. DNS stands for Domain Name System. DNS servers are a whole bunch of computers out on the Internet that keep a record of the domain names and IP addresses of all of the other computers on the internet. So when you want to visit Skillcrush, the first thing your computer does is ask a DNS server for skillcrush.com's IP address. Once it gets the IP address, it talks directly to the computer at 216.172.190.36 to ask for a web page. Numbers get into the DNS phonebook when you register a domain name, and it's your job to keep it updated if you change web servers or IP addresses. Updating your DNS record is like emailing all your friends "I got a new phone, here's my number." Except, you are telling a bunch of web servers and it's not your phone number...on second thought, let's not push that analogy too hard. Cocktail Party Fact When you change a domain name or web server, all the DNS servers on the Internet need some time to update their phonebooks. This is called "propagation delay," and it can take between 2 - 24 hours. It's the same as what your friends would have to do if you got a new number!

Django

Django is a framework that makes it easy to build big, robust web applications in the programming language Python. Programming language frameworks are super popular on the web. You might remember our past tech terms about Ruby on Rails (a framework for the Ruby), or Twitter Bootstrap (a frontend framework), or Node.js (a JavaScript framework that makes it possible to use JavaScript as a backend programming language). The way frameworks work, is that they come out of the box with a certain set of standardized features already in place. Backend frameworks often ship with functionality like CRUD (create-read-update-delete) and organization principles like MVC (model-view-controller), so that you can focus on the features and functionality that are unique to your website. Django was originally created, way back in 2005, by a group of software developers who were in charge of building news focused websites for The World Company, owner of The Lawrence World, a newspaper in Lawrence, Kansas. Since it's origins were in content based businesses, Django is especially well suited for content heavy sites. Django, like Rails, is an MVC framework, but unlike Rails, it ships with a built in admin interface that makes it easy for non-developers to accomplish the CRUD tasks that are required for any content based website. Famous web apps that are built using Django include Disqus, Instagram, and Pinterest. On the content side, PBS.org, The Onion, and The New York Times, are also all Django websites. Cocktail Party Fact Can you guess who Django is named after? If you guessed the jazz guitarist Django Reinhardt, you are absolutely right. Who said software developers aren't soulful? If you are a Ruby developer, never fear! There is a melodic framework for you too. Chuck that silly Rails thing, and opt instead for the crooning Sinatra framework.

FizzBuzz

FizzBuzz is a software test that is sometimes used to torture developers during job interviews. The goal of a FizzBuzz test is to gauge a job candidate's basic programming skills. The instructions are: Using any language of your choosing write a program that does the following: Prints all of the numbers between 1 and 100. If the number is divisible by 3 print "Fizz" instead of the number. If the number is divisible by 5 print "Buzz" instead of the number. If the number is divisible by 3 and 5 print "FizzBuzz" instead of the number. Writing a FizzBuzz program can usually be accomplished within a few minutes and since it uses programming standards like division, modulus (meaning remainder), comparisons, and counter loops, it can be a good way to make sure that a developer knows her programming fundamentals. Let's take a look at one way to program FizzBuzz using JavaScript: for (var i = 1; i if (i % 15 == 0) { document.write("FizzBuzz"); } else if (i % 3 == 0) { document.write("Fizz"); } else if (i % 5 == 0) { document.write("Buzz"); } else { document.write(i); } } UNIX for i in {1..100};do ((($i%15==0)) && echo FizzBuzz)||((($i%5==0))&& echo Buzz;)||((($i%3==0))&& echo Fizz;)||echo $i;done You can see examples of FizzBuzz in every computer language imaginable over at Rosetta Code. Now Try This Want to give FizzBuzz a go? Check out Codecademy's lesson on the topic and never be blindsided at an interview again!

Flash

Flash is a multimedia software that allows you to bring together animation, video, audio, and computer programming in one file. In order to work in Flash you must download and use Adobe's Flash program; when you are done animating, video editing, and programming in ActionScript, Flash compresses the content into an interactive .swf file, which can be embedded on any website. Back in the day, Flash used to power some of the more robust, interactive experiences on the web. The problem with Flash was that it's heavy and slow— Flash sites famously eat up computer memory (let's not even talk about phone memory!), are prone to crashing, and take so long to load that it was common practice to design a cute pre-loader for users to watch while the site loaded. In the past few years, advances in the development of HTML, CSS, and JavaScript have made it possible to accomplish the same level of interactivity while using a fraction of your computer's memory. This has led many to forecast the downfall of Flash, but the truth is that Flash is alive and well in the digital media industry. The reason? Everyone's favorite...online display ads! When it comes to online advertising, advertisers want it all: animation, audio, video, and complex interactivity (How else will I get the user's attention?!), as well as ultimate control (The ad must work on all browsers, no matter how old!). And despite all of the advances in frontend technology, the most reliable way to combine video, audio, and interactivity and make sure it works in older versions of Internet Explorere is still: Flash! Cocktail Party Fact Take a trip to a museum of obsolete(ish) technology, without leaving your desk! Check out Big Spaceship's online museum Pretty Loaded, a fantastically playful and never ending homage to the Flash pre-loader.

GIFs

GIF stands for Graphic Interchange Format and it's a file format that allows for the creation of awesome, simple animations on the web. GIFs have been around for basically as long as the web (since 1987), and wreaking havoc the whole time. Many thought that GIFs, with their bright colors, posterization, and popularity among teenage boys, would go the way of the <blink> tag as the web matured. Instead, GIFs have grown up as the web has. In recent years, GIFs have actually gone high brow. They are now being used by Gwyneth Paltrow to illustrate her recipe how-tos, by The Atlantic Wire to cover the olympics, and this year, the verb 'to GIF' (as in, The Guardian is live-giffing the presidential elections) was added to the Oxford English dictionary. @hummeline My favorite gif site - though they really take it to a new level: http://iwdrm.tumblr.com/ @soniagawel These are the most gorgeous gifs I've seen! http://annstreetstudio.com/category/cinemagraphs/ There are lots of benefits to using GIFs instead of other animation formats: first, they are easier to make and use less computer memory than Flash animations. Second, you can send GIFs in emails and your readers can actually see the animations, and lastly, you will have WAY more cred on Tumblr. Cocktail Party Fact Do you say GIF with a soft g, as in gin, or GIF with a hard g, as in graphic? Both are right according to the OED. That said, Compuserve, the original creator of the GIF, called it GIF like JIFF peanut butter because "Choosy developers choose GIF."

Git

Git is a great version control tool because it's lightweight and straightforward to use, and it provides incredible compression and speed. Git is one of the most popular version control systems and is quickly gaining prominence. It is used on multiple cloud hosting services, including Amazon's EC2 and Heroku, and has vibrant usage among top open source communities. Which means that if you want to make use of Amazon or Heroku's awesome server power or contribute your code to an open source project, you have to know how to participate by using git. How Git works Git is an open-source version control system (meaning, it's free!) that allows developers to track changes made on their code files throughout the lifetime of a project. Git is designed such that it views your code files like a "tree" and allows you to do cool things like create a "branch" where you work on some of the files without affecting the "trunk" code base until you are sufficiently convinced that the changes you are making are good and won't break the rest of the tree. If you are alone working on a project git is a great way to track the changes you make and also safeguard yourself from making a silly mistake that breaks your web app or, worse yet, accidentally delete months of work. Where Git really excels, however, is for projects where more than one developer is working on the code. The tree-like architecture we described above allows many developers (up to hundreds!) to work on a project at the same time without the code devolving into one big hairy mess. Git was initially created by Linus Torvalds to be used on Linux kernel development with a large, distributed team of developers. Since the Linux kernel project is very large and the development was distributed among developers all over the world, Torvalds designed Git so that it would be fast and good at distributed version control. The beauty of Git is that it allows developers to easily merging changes into the master code base and encourages developers to be experimental, because Git allows you to make changes locally and not have to push to a centralized repository until you are ready. How is Git different from other version control systems? Git is a great version control tool because it's lightweight and straightforward to use, and it provides incredible compression and speed. Since Git is so popular, and the Git community is so robust, thanks in large part to the popularity of Github, learning Git is one of the best things you can do in your process of learning development. Excited to start using Git? Look out for our newsletter on Wednesday that will help you git up and running.

Grid Systems

Grid systems are the design structure for building a web page. Grid systems are the visual structure for building a web page. To a designer, a web page might be made up of 12 or 16 equally-sized, invisible columns. These invisible columns are grouped together in order to create the actual columns you see on a web page. Without a grid system, you'd have to decide on how wide to make every column on the page without any sort of guide. With a grid system, you just have to pick how many columns each piece of information takes up. Let's say you're designing from a 12-column grid. A blog post might take up seven columns, and the links to the right of it might take up the remaining five. Three images down below might be spread out evenly, each taking up four columns apiece. And a big, attention-getting image? It can reach over all 12! In order to be visually consistent, information on a web page needs to have the same spacing between it and its neighbors. These spaces are called gutters, and are built into the grid system between each column. When a designer is picky about the space between a blog post and a set of links, or how much space an ad takes up, it might be because of the grid system. Grid systems usually have a standard width they're aiming for, such as 960 or 1024 pixels. These numbers are great because it's easy to evenly divide them into any number of columns. 960 divided by 2 makes two 480-pixel columns, 960 / 3 = 320-pixel columns, 960 / 8 = 120, and so on. You don't have to design using a grid system, but it speeds up the process and helps make the page more visually appealing. Resources 960.gs A classic, popular grid. It's 960 pixels wide, which makes it evenly divisible into a large number of columns. 1140 Grid The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and uses media queries to serve up a mobile version. A Responsive Grid PSD A Photoshop document that shows mobile, tablet, and website grid systems side by side. Gridbooks Are you a fan of pen and paper? A grid notebook will have you covered!

HTML5

HTML5 is the fifth and most recent version of HTML. HTML5 has some great new additions that make it much more powerful and specific than HTML 4.0. Since the goal of HTML is to tell your computer what content is on your website, HTML5 has a whole new set of tags that are much more exact than the <div> and <p> tags that we're used to using (download our HTML Tag Cheatsheet for more common tags). With HTML5 you can use <article> tags for articles or blog posts, <section> tags for sections, <headers> tags for headers, <audio> for audio, and a whole bunch of other ones! HTML5 also makes it possible to do things that previously required programming languages to do. Want to store some data? Use the HTML5 local storage feature and you don't need a hosted database! Need to know where your user is located? No problem, HTML5's geolocation API can help you out. Why is it called HTML5 when every other version has just been called HTML? No reason, other than smart marketing! HTML5 is catchier than "the newest version of HTML" don't ya think? The tags and functionality included in HTML are defined by the World Wide Web Consortium (W3C). HTML, like software, comes out in releases — in 1995 the W3C updated the original version of HTML to create HTML 2.0 and has released a new version of HTML every few years since. We encourage you to start using HTML5 right away because it can do so many neat things. But, beware! Some older browsers still don't understand HTML5, so you'll need to use a JavaScript library like Modernizr to help them out. Cocktail Party Fact You may have heard people talking about 'HTML5 compatibility' for mobile phones. What they are really talking about is that in 2011 Apple decided to discontinue support of Flash video on all new iPhones. Now, the only way to show iPhone users video is to use one of HTML5's new video formats. So, if you've got Flash video on your site, remember that no iPhone users will be able to see it no matter what other fancy HTML5 tags you use. If your site doesn't have Flash video on it, then don't worry about HTML5 compatibility, you're all good! If you enjoy reading about tech industry in-fighting, we recommend that you read Steve Job's open letter "Thoughts on Flash," where he detailed all of his complaints about Adobe Flash.

Kludge

Web developer's duct tape to the rescue! A kludge is a quick-fix; a less-than-ideal solution to a coding problem. Web developer's duct tape to the rescue! A kludge is a quick-fix; a less-than-ideal solution to a problem. Just like duct tape, a kludge gets the job done, but it's not easy on the eyes. A kludge is usually a small block of code or a script that fixes a single bug, or presents a workaround. This code is inelegant, hard to maintain, and difficult to extend with your existing code base, because it wasn't written with the code base in mind. A kludge can also refer to an entire system or website that is heavily reliant on lots of poorly written blocks of code. All these blocks may fit together to make a website, but the blocks are brittle. Kludges may sound relatively benign, but there can be serious risks. Kludges can open security holes, or they can break and create bugs when newer code is added to other areas of your website. This can create a snowball effect of needing more and more kludges just to keep your system running. While kludges are sometimes unavoidable, there are steps you can take to minimize the likelihood that you'll have to use one: Plan ahead Having a detailed plan when building a website means you can anticipate issues and bugs, and architect your code to be cleaner and more maintainable. When bugs do appear, as they always do, this will make it easier to roll out fixes that aren't kludgy. Write unit tests If you have a suite of units tests for your application, you can run them after every code change you make to sure that you haven't broken other areas of your site. So even if you do have to rely on a kludgy fix for a bug, you can run your units tests and verify that your fix didn't create issues elsewhere. Refactor Code refactoring is a great way to clean up your code to make it easier to read and maintain, and to identify issues you may have missed in previous code-writing. While this won't prevent your website from ever having bugs, it will make it easier for you to fix bugs in an elegant, non-kludgy way when they do appear.

HTTPS

HTTP is the standard used for shuttling information around the Web. HTTPS is the secure version (S is for secure). HTTPS (Hypertext Transfer Protocol Secure) is mostly used for payment transactions, but is increasingly being used for standard browsing as well. When you're browsing the internet over regular HTTP, it's easy for people to peek in and see what's going on. Between your browser and, for example, Amazon, there are dozens of connections, starting at your wireless router and ending at Amazon's web server. At any one of these stopover points a malicious user could intercept the information you are sending to Amazon and read it before passing it along. If all you did was search for a book, no big deal, but what if you put in your credit card information? No good at all! HTTPS uses a security protocol called SSL to avoid this. Every time you're connecting to Amazon via HTTPS, two things happen: 1) The web server verifies its identity using an SSL certificate, which is sort of like an ID card for a web server. Your web browser compares the SSL certificate to a list of SSL certificates it trusts, and only shares your information if it checks out. 2) Next, your browser and the web server agree on a secret code that they will use to encrypt all of your HTTPS transmissions. This protects you from eavesdroppers listening in. Because of the way HTTPS works, even if a malicious user listens in on web browser and the web server agreeing on the secret code, they still won't be able to understand your HTTPS communications! So HTTPS lets your computer confirm that the server it's talking to is the right one (be it Amazon, Google, or Facebook), and then makes sure that neither hackers nor nosey folks can read the information being passed back and forth. So next time you see an https:// up in your URL bar, you'll know you are in good hands! Cocktail Party Fact There's a movement to encourage sites to use HTTPS for all communication. You might think that encrypting credit card information is enough, but why not make your Facebook updates and news-reading habits secure, too? The Electronic Frontier Foundation has developed a plugin called HTTPS Everywhere to help protect your privacy on the Web. It only works for Firefox and Chrome at the moment, but it's a start!

Hackers

Hackers are people who like to take things apart, figure out how they work, and share the knowledge that they've gained. While popular media might think of a "hacker" as someone who breaks into computer systems, defaces web sites and steals personal information, it turns out there's a lot more to the term. Hackers were - and still are - people who like to take things apart, figure out how they work, and share the knowledge that they've gained. The term originated in the 1960′s, with MIT's Tech Model Railroad Club and Artificial Intelligence Laboratory. The "hackers" who created the circuits for the trains eventually migrated over to computers where their tinkering skills were put to use programming. These first hackers spawned many ideologies regarding openness and freedom that are still popular today. The idea that "information wants to be free" as well as the free software movement both came out of their work. In the late 70′s, the idea of a hacker moved out of the academic world and into the hands of hobbyists. The Homebrew Computer Club was a group of computer and electronics hackers in Silicon Valley that played a major role in the creation of the personal computer. Members included Steve Jobs and Steve Wozniak, the founders of Apple. This propensity to share and tinker ended up creating devices that made free phone calls, and encouraging the sharing of computer software. The 80′s saw this aspect diverge into the media's portrayal of hackers as criminals, while the hacker community encouraged the use of the word "cracker" to describe their malicious cousins. Cocktail Party Fact Crackers are often referred to as "script kiddies" by more knowledgable hackers, because their "hacking skills" most often involve nothing but running a script (or program) to gain access to a hacked computer.

Hexadecimal

Hexadecimal colors (or hex, for short) are how web browsers describe colors. While you and I might talk about "light red" or "greyish blue," web browsers have a more specific way of talking about colors. Every tiny little point on your screen - a pixel - is made up of 3 tiny lights, a red, a blue and a green one. As a result, hexadecimal colors describe how much red, blue and green go into a given color (it's like mixing paint). Each hex color code is made up of six digits. For example, black is #000000. The # tells you it's a hexadecimal color, while the next 6 digits describe how much of each color to use - the first two are for red, the second two for green, the last two for blue. Black has zeroes for everything because it doesn't have any colors in it! If you'd like to visualize it, hex colors break down like this: #000000 The larger the numbers, the brighter the colors! #660000 is a little red all alone, #006600 is just a little green, #000066 is a little blue. #800066 is more red (80 - the first two spots) mixed with some blue (66 - the last two spots), while #336600 is less red (33) mixed with more green (66) and no blue (00). The interesting thing about hex codes are that instead of counting from 0-99, like you'd expect, they go from 00-FF! They add on A through F after the number 9, so they count like this: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F Basically, this means something like C3 is a bigger number than 83, and FF is the biggest number of them all. If you'd like to dive deeper, it's a base 16 number system! Since FF is as high as we go, #FFFFFF means as much red, green and blue as is possible. That's white (if you highlight it you can see its hex value)! #FF0000 is as red as is possible, while #FFA320 is a ton of red, a lot of green, and only a little blue (it's an orange color). It goes on and on; there are 16.7 million combinations! Cocktail Party Fact Even though you're supposed to always use hex codes to specify colors on the Web, browsers have also memorized a few names, too! You have ones like #FF0000 as Red and #000080 is Navy, but it gets more fun, too: #6495ED is Cornflower Blue, #FF6347 is Tomato and #FF69B4 is Hot Pink!

All hail JavaScript

If you are in the market to bet on an Internet programming language stock, I have a hot tip for you: put your money in JavaScript. JavaScript has improved dramatically in the past few years—with the release of HTML5, the rise of JavaScript frameworks such as Backbone.js, Ember.js, and Node.js, and the widespread adoption of JSON, JavaScript has never been so popular or so widely used. So Skillcrushers, hear ye, if you are going to learn programming, we recommend that you start with JavaScript. Get started by learning about JavaScript and its many variations: All About JavaScript JavaScript JavaScript is a programming language that helps make a web page interactive. jQuery jQuery is a library of preset JavaScript tasks that makes it easy and fast to make your site interactive and fun. JSON JSON stands for JavaScript Object Notation and it's one common way to pass information from a database to a website. Node.js Node.js is a JavaScript framework that makes it possible to use JavaScript for backend development.

Bitcoin

If you are on the Internet regularly, you have no doubt heard about this hot new currency called Bitcoin. But you might not understand what makes Bitcoin so interesting and why everyone from Paul Krugman to Alan Greenspan to Fred Wilson are getting involved. Bitcoins are a form of currency created by a group of software developers (who use the pseudonym Satoshi Nakamoto) that allow people to purchase and sell goods using Bitcoins instead of other forms of currency. Unlike standard currency (the dollar, the euro, the yen), Bitcoins are not issued or backed by any nation state, but instead, are created by the Bitcoin network-an international network of Bitcoiners that are connected only by the Internet and a shared interest in this new form of currency. That means that there is no central regulatory authority, no Federal Reserve printing Bitcoins on a specific schedule, and, since Bitcoin transactions are peer-to-peer, you don't have to go through a financial institution (like a bank, Visa or Mastercard) to process the transaction. Instead, Bitcoins are transferred from one Bitcoiner to another via the Bitcoin transfer protocol. The benefits of this for consumers are many: lower fees, ease of transaction, Bitcoins can be used anywhere in the world, and more. That said, Bitcoins have a little bit of a bad rep because the lack of regulatory oversight and relative anonymity of the Bitcoin transfer protocol makes it easier to launder money through Bitcoins and purchase illicit or illegal material (mostly drugs). Should you invest in Bitcoins? Recent press coverage and surge of interest in Bitcoins has pushed the price up substantially; Bitcoins were trading in the $20 range in January and are now trading at $129, meaning that in the past few months, at least, people who invested in Bitcoins have seen outrageous returns. The problem with Bitcoins is that since they aren't backed by a nation state and unlike commodities like gold or coffee, they don't have any intrinsic value outside of their ability to purchase goods. Thus, their value is only in what you can buy with them, but right now, you can't buy much. Of course, this issue may only be a matter of time. Companies like Coinbase are hard at work trying to make it easy for online and offline retailers of all types to accept Bitcoins. And hey, if all else fails, you can buy yourself a boatload of cupcakes at this Bitcoin accepting cupcake shop in San Francisco.

The Stack

In tech, the stack, or the solution stack, is the set of software and hardware resources that are necessary for a web product to function. For example, in order to publish a daily blog about cooking you need a stack that includes: HTML, CSS, JavaScript, PHP, a computer with web serving capabilities and a database, usually MySQL. Take away any component of that stack and your blog won't work. You will often hear developers or techies ask questions like, "What's your stack?" which is another way of asking: what programming languages and infrastructure do you use for your web app? LAMP is a common stack configuration, which includes a Linux computer that uses the Apache web serving software in order to function as a web server, a MySQL database, and PHP as your programming language. Since JavaScript, HTML & CSS are required for every web app they are usually left out of descriptions of a web app's stack. Other common configurations are LAMR (Linux, Apache, MySQL, and Ruby) or LYME (Linux, Yaws, Mnesia, Erlang) or LYCE (Linux, Yaws, CouchDB, Erlang) or WISA (Windows Server, IIS, SQL, ASP .NET) or our favorite, LEAP (Linux, Eucalyptus, AppScale, Python). As we have previously discussed, techies love them an acronym. Another funny thing you might hear people talking about is "moving up" or "moving down" the stack. In those stances, the top of the stack is front end technologies (HTML, CSS, JavaScript), the bottom of the stack is the web server machine and software (Linux, Apache, Nginx, Node.js), and the middle of the stack is the database (MySQL, MongoDB, Access) and programming language (Ruby, Python, .NET). If you were to say, move down the stack, you would go from knowing only frontend technologies to knowing programming languages and then learning how to set up your own web server.

Leading or Line-height

In the print world, leading is the space between lines of text. On the web, that space is called line-height. The word leading literally comes from pieces of lead. Back in the golden olden days of big printing presses, typesetters used pieces of lead to increase space between lines of text. Since you don't need any lead to typeset on the Internet, online we call leading line-height. To set the line-height of all the paragraphs on your website you might write something like this in your CSS document: p { font-size: 16px; line-height: 19px; } The line-height attribute in CSS takes a few different parameters. Most of the time, you will see developers express line-height in pixels, like the example above. You can also set your line-height using EM's, points (pts), percentages, or just straight numbers. What all those different measuring units mean can be a bit confusing, which is why many developers stick to the known, pixel height. That said, what EMs, percentages, and straight numbers have going for them is that they are all relative measurements, which can be super useful when your site needs to look great across a variety of browsers and devices. When choosing line-height, legibility is key. As a general rule of thumb, we recommend that your line-height be about 20% larger than your text size. One way to do this is to write the following: p { font-size:16px; line-height: 1.2; } In this instance, the line-height is measured relative to the font-size. Thus, if the font-size is 16px, the line-height is 1.2 times 16px, or around 19 or 20 px, which is just right. Learn more about these units here. Cocktail Party Fact We know typesetters used lead to increase line-height, hence the name leading, but where does the word kerning come from? Kerning, in print production, is the space between individual letters. The word kerning, it turns out, is derived from the word corner because letters that needed kerning (your T's and A's and V's) would have their corners notched out so that they could overlap one another on the printing press.

HTML5 Canvas

In the real world, artists paint with paint brushes on rectangular pieces of canvas cloth, which they call their canvas. Fittingly, the new HTML5 Canvas element (<canvas>) is also a rectangle where a developer paints, this time using JavaScript. Unlike a real life canvas, where you only get to see the final product, with <canvas> elements you get to see the painting in many different stages. And the painting can even be interactive. In other words, <canvas> element are a great place for animations and user interaction, and for that reason, many web developers believe that the combination of <canvas> and JavaScript will eventually replace Flash altogether. Since we are dealing with computers and they only understand computer languages and math, painting with JavaScript involves writing a whole series of functions that plot the path of your "paint stroke" on the <canvas> element's x and y-axis. What you have to do, in essence, is write your computer extremely clear mathematical instructions for how to paint on it's <canvas>. For example you might find yourself writing something like this: THREE.Vector3 = function (f, g, e) { this.x = f || 0; this.y = g || 0; this.z = e || 0 }; or this: this.minSelf = function (a) { n = Math.max(n, a.getX1()); l = Math.max(l, a.getY1()); q = Math.min(q, a.getX2()); m = Math.min(m, a.getY2()); j() }; The process of writing all of that may not be seem as creative as painting with oil, but the result is no less magnificent. The two code snippets above both come from a <canvas> element collaboration between Google's Chrome team and the band Arcade Fire. Check out their interactive film experience The Wilderness Downtown, for some mind blowing <canvas> fun. You can learn more about the piece here. Cocktail Party Fact What is a new HTML element without a little bit of controversy? The <canvas> element was first introduced by Apple back in 2004, when they used it to power the Apple Dashboard widgets and some cool functionality in the Safari browser. When Apple introduced the <canvas> element, many in the web community were annoyed that they went ahead and created their own Apple thing instead of using SVGs, which had been the standard previously used for drawing dynamic graphics on the web.

MVC

MVC stands for Model-View-Controller and it's the most popular way to organize and separate the different functions of a web application. In MVC you have three parts of your app, each of which serves a different function. First, you have to define what each part of the web app is and how the different parts will work together. The Model defines what data you will have in your app, the relationships between that data, and how you will use it. For example, if your web app is a blog, the Model says that there are blog posts and users, and defines the relationship between the two (users write blog posts). Second, the View defines what the app looks like. In the View you define what is on each page and style it up fancy so that people love to visit your website! Third, you have to connect the Model and the View together. It's all well and good to let your Model define your data, and your View to determine how that data looks, but without the Controller never shall the twain meet. The Controller tells the View about all the parts defined in the Model (blog posts and users), it connects the View and the Model to the database, and ferries information between all three. And every time the user does something (like writing a new blog post) the controller lets everyone know. The goal of MVC is to separate the app logic, from the app database, and the app look so your app code is nice and tidy and easy to edit. MVC is the organizing principle used by most PHP frameworks, Ruby on Rails, DJango, and many many others. Cocktail Party Fact Traditionally, Models, Controllers, and their good friends the databases, made up the backend of a web application. The Views, on the other hand, made up the frontend. New JavaScript frameworks like Backbone.js are changing all that. What Backbone.js does is let you define a Model-View-Controller for your web app in JavaScript meaning the whole sha-bang can run on the client-side, no server necessary. You can read all about JavaScript MVC frameworks here.

Facebook's Open Graph

Open Graph is Facebook's extremely extensive application programming interface (API). Open Graph makes it easy to integrate your website with Facebook and make sure your stuff is shared by all, or at least some, of Facebook's 955 million users. The goal of Open Graph is to make it easy for your site to play nice with Facebook. Open Graph powers those great Facebook 'Like' buttons, makes it possible to login to other web applications with your Facebook credentials, and even allows you to comment using Facebook comments. A great way to get started with Open Graph is to implement a special set of tags on your website. What these tags do is allow you to control the headline, photo, and description that show up when users share your content on their status updates. If you have ever seen your articles shared with some weirdo picture or gibberish in the description field, then it's time for you to take charge! Lucky for you, Facebook went as far as to create a new set of meta HTML tags for this exact purpose. In order to control what headline, description, link, and images users share on Facebook you just need to add the following code between the <head></head> tags in your site (and of course, edit the content to fit your site): <meta property="og:title" content="Skillcrush Daily Newsletter: Open Graph" /> <meta property="og:url" content="http://www.skillcrush.com/article" /> <meta property="og:image" content="http://www.skillcrush.com/images" /> <meta property="og:site_name" content="Skillcrush" /> <meta property="og:description" content="A tech term that explains Facebook's Open Graph" /> So go get those tags into your site header, and for Pete's sake, like us on Facebook. Cocktail Party Fact In a 2010 New Yorker article, Mark Zuckerberg told reporter Jose Antonio Vargas about his vision for the future of Facebook and the (then) newly launched Open Graph: "Zuckerberg imagines Facebook as, eventually, a layer underneath almost every electronic device. You'll turn on your TV, and you'll see that fourteen of your Facebook friends are watching "Entourage," and that your parents taped "60 Minutes" for you." Two short years ago he said this, and now...here.we.are.

Machine Learning

Machine learning trains computers to learn from experience. Computers are great at following very specific directions. If an email has the words "Nigerian oil minister" and offers you "$3,000,000″ it's probably spam. But what about a Kuwaiti oil minister, or ten million dollars? Machine learning is the process that allows computers to recognize patterns and improve from experience. Google can recognize spam thanks to a machine learning process called supervised learning. First, it's fed millions and millions of emails that it knows are spam. Each time you mark something as spam, you aren't just getting it out of your inbox - you're also alerting Google to take a hard look at that email and compare it to the rest of the spam they know about. This training data allows Google's algorithms to learn words and phrases associated with spammy emails. Even if spammers change their tactics or email you new scams, it doesn't take long for Google to recognize them as something you don't want to read. Machine learning is useful for systems that change over time or processes need to adapt to new situations. Driverless cars, chess-playing computers, and automatically tagging friends in photos are all examples of machine learning at work. Cocktail Party Fact In 2006, Netflix held a $1,000,000 competition to improve its recommendation system. An algorithm would examine your past movie ratings and try to predict your ratings for movies you haven't seen yet. It'd recommend the ones it thought you'd rank the highest. Eventually a team improved Netflix's algorithm by 10% and walked away with the prize. Netflix never ended up using the new algorithm, though! The new one was too complex and not cost-effective for their system, so they stuck with the old one. Machine learning is a tough field that takes a lot of data and computing power, and when it comes down to it sometimes just enough is more.

MySQL

MySQL is one of the most popular databases in the world, and no one agrees on how to pronounce it. Either "My Sequel" or "My S-Q-L" are okay, so don't let anyone tell you otherwise. A database is just a fancy spreadsheet that can hold tons of information and interact with programs. MySQL is one of the most popular because it's found pretty much anywhere you can write a program, and it's free. In something like Excel or Microsoft Access you can poke and prod and drag values around, but databases like MySQL don't really have a way to see them without using another program. You get to type something like this: SELECT name FROM cocktails WHERE color = 'red' Which, as you can probably tell, gets us all the cocktails that are red. This incredibly droll method of talking to a database is called the Structured Query Language, and it's the SQL part of MySQL. Databases are a powerful part of any dynamic web site, and MySQL is a widely-used and widely-known option. There are a ton of database solutions out there, and everyone is always arguing about what is best. One particularly vocal group at the moment is the NoSQL movement, which is against RDBMS's (Relational database management systems - say that five times fast). Other people might push PostgreSQL or Microsoft's SQL Server. Many large tech companies use multiple databases for different things. Facebook and Twitter use both MySQL and a NoSQL database called Cassandra, among I'm sure many others. A big benefit of MySQL and many other RDBMSes is something called ACID compliance. You can read more about it here, but the basic idea is that it's a very reliable system in terms of data integrity. If you accidentally lose a couple tweets, no big deal, but if your database forgets to deposit $50,000 into your bank account someone's in trouble. Cocktail Party Fact It isn't called "MySQL" because it's yours - it's actually named after the daughter of the main developer, My, which is a common Finnish nickname!

Node.js

Node.js is a JavaScript framework that makes it possible to use JavaScript for backend development. Once upon a time we told you that there are frontend and backend languages and that JavaScript was a frontend programming language that does all of its work in the browser, right? Well today we have a new thing to tell you: in the world of the web, things are always cha-cha-changing. Everything we taught you before is still true, it's just that now, thanks to Node.js it's also possible to use JavaScript for backend development. So why would you want to use JavaScript on the frontend and the backend? A few reasons. First, simplicity. Why program in two languages when one will do? Second, and more importantly, Node.js is specially designed to make it easy to build data-heavy web applications that will scale well and can work in real-time. What this means is that web applications built in Node.js are easy to build, can use lots of data (like Facebook), can update in real-time (like Twitter), and can handle lots of users at once. So, when you are featured in a Techcrunch write-up, your Node.js web app won't crash because it has a special way to handle server requests that make huge traffic spikes no big deal! So, if you want your web application to do all that, and if you want to use JavaScript for your front and backend code, Node.js is your solution. Cocktail Party Fact Thought we were done telling you about all the cool things Node.js can do? Wrong! Turns out that Node.js is also really great for building web servers, which means making a computer ready to serve as a web server. Why is it so good? Because unlike other web servers, Node.js uses an event-driven model for handling server requests (also called asynchronous input output process or asynchronous I/O), instead of a thread-driven model (also called synchronous I/O or blocking I/O). The way that Node.js-ers explain what an event-driven model is, is by using the metaphor of a fast food restaurant. If a fast food restaurant used a thread-driven model you would walk up to the counter, place your order with the server, and then wait at the cash register until your food is ready and no one else would be able to order until you had the hamburger in-hand. Not so efficient, right? Fortunately, most fast food restaurants use an event-driven model where you go to the register, place your order, pay, and then step aside while you wait for your food so that the next person can order. As does Node.js!

Object-oriented programming

Object-orientation allows you to create objects within the world of your computer program that have specific and unique attributes and abilities. When you think about programming languages the key thing to remember is that they are languages, just like human languages, and their purpose is to provide us, humans, with a way to communicate with them, the machines. But since computers are extremely simple, programming languages also must be simple, and much of what we take for granted when speaking in our human languages must be made excruciatingly explicit. Consider this situation: I have a computer program called pets in which I wish to have my dog Lola do doggy things like bark and fetch a stick. Now, remember, the computer understands almost nothing until I explain it. So, before I can tell the computer about my dog Lola and her fancy handshaking abilities, I have to explain to the computer what a dog is. I would do this by creating the object Dog, and giving it certain attributes (name, breed, etc.) and certain abilities that are unique to Dogs (barking, fetching, etc). In Ruby, one object-orientated programming language, the code might look like this: class Dog attr_accessor :name, :breed def bark puts "woof" end end Now, with this code, I am able to create my dog, give her the name Lola, the breed Malti-Poo and make her bark: mydog = Dog.new mydog.name = "Lola" mydog.breed = "Malti-Poo" mydog.bark When programming languages are not object-oriented then there are just objects and abilities, and no connection between the two. Meaning a dog can bark, but so could a blog post. The program has no way of knowing the difference between a dog and blog post. If object-orientation makes perfect sense to you, that's because we too are object-orientated; we understand that there are objects (dog, computer, boyfriend, tree) each with their own set of specific and unique attributes (breed, version, marriageability, deciduous or evergreen) and abilities (bark, program, kiss, defoliate). And this is why Alan Kay's creation of the first explicitly object-oriented programming language Smalltalk was so revolutionary: it brought computer programming one extremely important step closer to the human language. Cocktail Party Fact Ruby and Python, two very popular web programming languages are definitely object-oriented. And as of PHP v.5, PHP is also object oriented. So the question remains: is JavaScript an object oriented programming language? Apparently, that depends on how you define object orientation. Many people argue that because JavaScript does not support classes of object (as seen in the Ruby example above) it is not a truly object-oriented programming language. Douglas Crockford, the programmer who created JSON, disagrees. He argues that JavaScript is one of the most grossly misunderstood programming languages and despite all the naysayers, is quite object-oriented!

Open Source

Open source is the practice of sharing how a computer program was made and allowing anyone to customize the program as they see fit. Computer programs are made up of code, which could look something like: 3.times do puts "Hi there" end We call this the source code, or source. When a user runs the program above, they would see: Hi there Hi there Hi there For most programs that exist, we only have access to the output, not the code. Open source changes that. When you have a program on your computer like Adobe Photoshop, it's been converted from the source into a form that only the computer can understand. This means if there's a misspelling or a feature missing, not even a programmer could fix it. For an open source program, though, you have both the version the computer can understand AND the source code. This lets you look at how the program is put together and edit it as you see fit. If Adobe released the source to Photoshop, we would be able to make our own version. Our new version might have extra menus, or a button that automatically puts kittens in a picture. Once we had the source, though, we wouldn't need to pay Adobe for Photoshop, and they would lose control over their products. This is why most private software companies don't open source their code. Some open source organizations are not-for-profits that give away the software program for free and don't look to make money off it. These organizations rely on a community of people who work on the software out of the good of their hearts and the desire to contribute to a meaningful product. The Mozilla Foundation, which creates the open source Firefox browser, is a prominent example of this type of open source, non-profit community. On the other hand, the blogging platform WordPress is free and open source, but Automattic, the parent company, makes money by selling users services associated with the platform such as blog hosting and custom blog templates. Automattic benefits from WordPress being open source because users often create useful updates to the WordPress platform and Automattic gets to reap the rewards without having to spend time or money on a new feature! This sort of community-built or community-added product is becoming more and more popular. Cocktail Party Fact Social coding is a new phenomenon powered by sites like GitHub. It combines features of the worlds of open source and social networking. Developers put their source code up on GitHub, and allow anyone to copy it, make changes, and attempt to persuade the original developer to use those changes. Users have Facebook-like profiles that just happen to be centered on coding. You can also work together on the same code with different people and watch the activity of other members or projects.

Open Source Software

Open source software (sometimes called Free and Open Source Software or FOSS) is the practice of sharing how a computer program was made and allowing anyone to customize the program as they see fit. Computer programs are made up of code, which could look something like: In Ruby we say... 3.times do puts "Hi there" end We call this the source code, or source. When a user runs the program above, they would see: Hi there Hi there Hi there For most programs that exist, we only have access to the output, not the code. Open source changes that. When you have a program on your computer like Adobe Photoshop, it's been converted from the source into a form that only the computer can understand. This means if there's a misspelling or a feature missing, not even a programmer could fix it. For an open source program, though, you have both the version the computer can understand AND the source code. This lets you look at how the program is put together and edit it as you see fit. If Adobe released the source to Photoshop, we would be able to make our own version. Our new version might have extra menus, or a button that automatically puts kittens in a picture. Once we had the source, though, we wouldn't need to pay Adobe for Photoshop, and they would lose control over their products. This is why most private software companies don't open source their code. Some open source organizations are not-for-profits that give away the software program for free and don't look to make money off it. These organizations rely on a community of people who work on the software out of the good of their hearts and the desire to contribute to a meaningful product. The Mozilla Foundation, which creates the open source Firefox browser, is a prominent example of this type of open source, non-profit community. On the other hand, the blogging platform WordPress is free and open source, but Automattic, the parent company, makes money by selling users services associated with the platform such as blog hosting and custom blog templates. Automattic benefits from WordPress being open source because users often create useful updates to the WordPress platform and Automattic gets to reap the rewards without having to spend time or money on a new feature! This sort of community-built or community-added product is becoming more and more popular. Cocktail Party Fact Social coding is a new phenomenon powered by sites like GitHub. It combines features of the worlds of open source and social networking. Developers put their source code up on GitHub, and allow anyone to copy it, make changes, and attempt to persuade the original developer to use those changes. Users have Facebook-like profiles that just happen to be centered on coding. You can also work together on the same code with different people and watch the activity of other members or projects.

PHP

PHP is one of the most popular programming languages for the web. When you ask a web server for a page, it's PHP's job to create it. When you browse a WordPress blog or make a post on Facebook, PHP is putting it all together. If you wanted a very simple PHP page to greet you every time you looked at it, it might look something like this: <?php echo "Hi there stranger!"; ?> That would make a web page that looked like this: Hi there stranger! One of the reasons many people learn PHP instead of Ruby or Python is that it comes installed on pretty much every web server out there. If you happen to have a bit of web space to your name, chances are you're able to run PHP. A pretty typical way you'll see people working with PHP is along with Linux (an operating system), Apache (a web server), MySQL (a database), and PHP. This kind of setup is called LAMP. Cocktail Party Fact PHP supposedly stands for "PHP: Hypertext Preprocessor." If you said "Hey, but that doesn't say what PHP means!" then you get the point ;).

POP and IMAP

POP and IMAP are two ways an email client can fetch your email. When I send you an email, I'm not sending it right to your computer. I'm sending it to gmail.com, or yahoo.com, or hotmail.com or some other mail server out on the Internet. POP and IMAP are two ways your computer can fetch your mail from that mail server. POP stands for Post Office Protocol, and you can think of it as working like a post office. When you go to the post office to pick up your mail, the post office doesn't save a copy. Same with POP. When you fire up Outlook and it fetches all of your mail from the server, it deletes it from the server and stores it on your computer. IMAP, on the other hand, stands for Internet Messaging Access Protocol and is like if the post office kept a copy of your mail. It marks the ones you've read and replied to, but doesn't delete them from the server unless you tell them to. IMAP is great if you need to access your mail from multiple computers. Even if you've read your messages from home, they'll still be there if you check your mail from work. If you were using POP, it'd be a mess - you'd have some emails stored on your computer at home, and others stored on your computer at work. When you hear about storing your email "in the cloud," that's IMAP. Sometimes there's an option with POP to leave your mail on the server. There's a catch, though - since you can't mark messages as read on the server with POP, every time you check your mail on a new computer it thinks all of your mail is new. That'd be like stopping by a post office and having them hand you copies of all the mail you've ever gotten, all at once! POP used to be the most common protocol for accessing email, but IMAP has become more and more popular. This is thanks to both consumer demands and advances in technology - we're likely to check our mail from many devices, making POP impractical. So next time Outlook or Mail.app asks you if you want IMAP or POP, you'll have all your ducks in a row. Cocktail Party Fact While the first telephone call will live on forever - Alexander Graham Bell's "Mr. Watson, come here I want you." - email's birth is not nearly so memorable. The first email was a test sent by Ray Tomlinson, who says it was something like "QWERTYUIOP". Not one for the history books!

QA

QA stands for Quality Assurance, and it's the process a site or product goes through to make sure everything's working right. When a developer makes a program or web site, they tend to miss a few things. A link might go to the wrong page, or a button might not work right, or maybe the site looks a little crazy in Internet Explorer 6. If your users stumbled across those problems, they might be really confused! The QA process is supposed to catch any issues before they make it out into the real world. QA is done in all parts of the tech industry, and in each part of the industry it's done a little differently. Usually a test version of the product is delivered to whoever is doing QA, and once they give it a thumbs-up it moves on to the customer. If there are problems, though, the program or website are sent back to the developer along with a ticket explaining what needs to be fixed. Quality Assurance for software projects like Excel or iCal means double-checking that programs work as expected, and that different programs can run at the same time without breaking your computer. When a computer program crashes and you are asked to "submit a crash report" that's QA in action! QA is an especially difficult part of web development. Different web browsers display the same web pages differently, so looking at a page in each major browser - like Internet Explorer, Firefox and Safari - is necessary to make sure all your users get the same experience. That's why when you report a bug on a web site they always ask what browser (and version) you're using! In the big corporate world, you often find a whole group of people dedicated to "doing QA." On smaller teams, though, you might be responsible for QA-ing your own software. That's kind of like asking a writer to edit their own work; everyone has blind spots, so you usually end up with a lot more mistakes! Cocktail Party Fact Automated testing has been a boon to the software development industry. Instead of spending time and money on actual people to test your software, you write a program that tests your software! Sounds pretty Matrix-y, right?

Password Hashing

Password hashing is a way a web site can store your password to keep it safe. Sooner or later a web site you've used is going to get hacked, their user data stolen, and your information exposed to the world. If your password is sitting there in plain sight - "password1234" - the hackers can combine it with your email address to try to log into bank accounts, Facebook, or anything else out there. This is where password hashing comes in. The web site takes a password like password1234 and run it through a complex set of rules, which mixes it and mashes it into something like e6b6afbd6d76bb5d2041542d7d2e3fac5bb05593. This is called a hash. You can think of a hash as your password's fingerprint. Even if you change it a little bit, say to password1235, the hash ends up being super super different - 62f923cde8109b61a324f0677d7c0cafdb9e6480. Sites store this information instead of your actual password. Checking password hashes is a lot like checking a criminal record. When the police bring you in for questioning, they don't run you through a head-to-toe scanner and keep a copy of your body hanging around. They just take your fingerprints! If you show up again and they find your fingerprints in their system, they can be pretty sure that they know who you are. It's the same thing with password hashing. When a site asks you for your password - password123 - they store the hash in their database as e6b6afbd6d76bb5d2041542d7d2e3fac5bb05593. Then, next time you give them your password - password1234 - they hash it, get e6b6afbd6d76bb5d2041542d7d2e3fac5bb05593, and look it up in their database. If it matches, you're in! If you gave them password1235 instead, the hash turns out to be 62f923cde8109b61a324f0677d7c0cafdb9e6480, and it's a no go. The best part about hashes is that they can't be run backwards. In the same way that you can't recreate an entire person from a fingerprint, you can't recreate a password from a hash. That way when someone steals that database full of user information, you'll be safe and sound! Cocktail Party Fact One weakness of hashing is that the same passwords are always the same hashes. Anytime a hacker comes across e6b6afbd6d76bb5d2041542d7d2e3fac5bb05593 they might know it's password1234 if they've seen it before. Hackers have big big lists of common passwords and their hashes called rainbow tables. Something called salting can keep you safe, though. When I first store your password, I plop a few random letters and numbers onto the end - password1234JNFD - and hash that. Every time I check your password in the future I add those little extra letters before I hash it, so even if you picked a common password, salting turns it into a new, uncommon word that hashes to a different value. You have password1234JNFD and I have passwordKJRF and we're all safe. The recent theft of LinkedIn's user database is a good example of when salting comes in handy!

Programming Languages

Programming languages are what we use to tell computers what to do. Computers talk to one another in binary, which looks like this: 0011101010101111000111 It doesn't make sense to me or you, but it sure does to your computer! Since we can't write in binary, we need to write our instructions in a programming language. They usually looks like weird English with a lot of semicolons and extra parentheses. Then a program called a compiler or interpreter converts our instructions into binary that the computer can understand. There are hundreds of different programming languages, and they all make you type different things to get the same result. No programming language is really better than another - they all have different strengths and weaknesses. Some might be faster, or better in robots, or really good at making web pages. PHP, Ruby, and Python are three popular programming languages for the Web. Up until the mid-1980's, computer programs were written on cards with holes punched in them (punch cards). If we still used them today, a single iPhone picture would take up over 9,000 punch cards!

Progressive Enhancement

Progressive enhancement is the practice of making websites fancier if your computer or phone can handle it, and making 'em less fancy if it can't! We techies take for granted that we update our browsers, computers, and phones almost as frequently as we change our underwear. But for many people in the world, a computer they bought three years ago and a web browser they updated two years ago feel pretty new. The idea behind progressive enhancement is that instead of fighting the fact that different browsers and different devices have varying degrees of ability, we accept it and work with our limitations. In practice, this means that when building your website you start at the base layer—usually your content—and then add all the fancy CSS and JavaScript interaction on top, but only make those features available to browsers and devices that can handle it. Thus, instead of having to either go for the lowest common denominator or give certain users the short end of the stick, you deliver a simpler, but still nice looking, version of your site to those users that are browser and device challenged, and a more complicated version to those users that have the latest of everything. When you visit Slate on your smartphone, you can you read the articles, but you don't see all the ads, slideshows, blog links or what's trending on the Washington Post. The reason for this is twofold: one, Slate has thought long and hard about what it is you want to do on your phone; do you really want to see what is trending on the Washington Post? Probably not. The other reason is that your phone is not yet as powerful as your computer, meaning that it can't process as much information as quickly so Slate doesn't ask it to. Instead, Slate sends your phone a version of its website that still gives you all the important stuff (articles) without it taking forever. Cocktail Party Fact Before we had progressive enhancement, there was a popular idea called 'graceful degradation.' The graceful degradation ethos says that you design your website for the fanciest browsers and devices and then make sure it looks ok for everyone else. The distinction between graceful degradation and progressive enhancement is a subtle one, but it's the kind of thing that developers and technologists love to fight about! In one camp you have the graceful degraders who think that older browsers should be an afterthought (we build for the future!) and in the other camp you have the progressive enhancers who think that your content should be optimized for all platforms (we build for everyone!). Consternation abounds!

Pseudocode

Pseudocode is similar to code, but much easier to understand. Writing in pseudocode is like sketching for programmers. Before an artist starts a painting, they first sketch their idea in pencil. When programmers want to sketch their ideas, they do it in pseudocode. Pseudocode isn't code because a computer would not be able to understand it, instead it's shorthand for what you are planning to code. When you write a computer program, it might look something like this: #include <iostream> #include <string> using namespace std; int main () { string name; cout << "What's your name? "; getline (cin, name); cout << "Happy Birthday" << name << "!n"; return 0; } That program says: ask for a person's name, then say "Happy Birthday, [insert name here]". But you wouldn't necessarily know that, because it's written for a computer to read, not for a person. Beyond not being very attractive, for that code to run successfully it needs a lot of little nitpicky elements - you need the semicolons at the end of lines, you need to make sure to put your brackets in all the right places (and make sure you use the right kinds!). Any one small punctuation error will break the entire program. If you're just making a quick sketch of a program or are still in the planning stage, you don't want to spend so much time perfecting your semicolon usage. You'd rather just think about getting things done! That's where pseudocode comes in. If we wanted to write the program above in pseudocode, it might look like this: ask name say "Happy Birthday, name" We stripped out all of the 'extra' bits and focused on the part that matters - asking someone's name and saying "Happy Birthday." There is no one way to write pseudocode - different programmers write pseudocode differently, and it can also depend on which programming language they're writing pseudocode for. Each language is a little bit different, so you might want to write your pseudocode more or less in the fashion of the language it's destined to be in. But remember, pseudocode can't be understood by a computer! It's only readable by people, and is more of a thought exercise than anything else. So no matter how easy it is to read, at some point it's going to have to be decked out in semicolons and assorted brackets.

Python

Python is a programming language that is fun to read, flexible and easy to use with other languages. To create a "Hello, World!" app using Python, all you need to write is: Quite a bit more straightforward than some of these other examples, we think! Web applications like YouTube, Reddit, Dropbox, and Yelp are all powered by Python. Pythoners, like Rubyists, believe in writing code that is simple, direct, and easy to understand, meaning that even people new to programming should be able to read Python and have a sense for what it's saying. The Python language is also designed to make nice with other programming languages (it's a social language!) and rather than force programmers to use one specific programming method, it allows them to use whichever technique they prefer (it's a flexible language!). Python is also known for its rich library of tools that make certain tasks easy and fast to accomplish. The language is a favorite among data journalists and natural language scientists for its mapping and text processing abilities. Python is a great language for beginning programmers and the Python community is especially welcoming of women - Pyladies is an organization of women developers who mentor new Python lady-programmers. Cocktail Party Fact Think Python is named for the snake? Think again! Python is actually named after the slightly less scale-y, Monty Python. As a tribute to the language's British namesake, Python programmers often use 'spam' and 'eggs' when they need generic placeholders.

REST

REST is a set of simple rules for how to organize and transmit information on the internet. REST, which stands for Representational State Transfer, is a set of guidelines for how to transmit information on the web in a way that can handle all of the trillions of variations in a clean, organized way. By clearly defining what each piece of information on the web is, establishing a limited set of actions that can be taken, and dictating what technology can be used, REST creates a straightforward and universally adaptable way to handle what would otherwise be a big mess. REST says that in the world of computers there are resources. Anything can be a resource: a photo of Ryan Gosling, an angry comment, a Dora the Explorer video, and a quote by President Obama are all resources. You can think of resources as individual pieces of content on the web. The web is made up of a whole bunch of representations of resources. You can think of representations as content holders, commonly known as websites. These representations come in two main formats: a web page that people can look at (usually an HTML file) or a file of data that machines can understand (often XML). Every representation of a resource (every webpage) has a discrete location where you can always find it, its URL. Now that we have defined what is on the internet, we are then allowed to take only one of four actions: You can GET the information. When you load www.skillcrush.com you will get a list of tech terms. You can POST the information, meaning you can create new information. When you send someone an email you literally post them the email. You can PUT the information, which is internet speak for updating it. When you update your Facebook profile you are putting new information there. You can DELETE the information. When you delete a Tweet, it's gone. And that's it! The whole internet, governed by a small handful of rules. The beauty of REST is in its limitations, the beauty of the internet is that within those limitations there are endless possibilities. Cocktail Party Fact REST was originally proposed by Roy Fielding when he was a graduate student in Computer Science at the University of California, Irvine. Despite the fact that the aim of REST is to create a simple, standardized way to handle things on the web, it's one of the most often confused technological concepts. Fortunately, this confusion has inspired lots of different people to come up with creative ways of explaining it. We encourage you to read some of the fun REST explanations, such as Ryan Tomayko's How I Explained REST to My Wife, as well as some of the more complicated ones, such as this one, which is ironically titled A Brief Introduction to REST. And if you are feeling particularly adventurous, you can go to the original source itself—Fielding's entire dissertation on the subject can be found here.

Refactor

Refactoring is the process of editing or rewriting your code so that the code is more elegant, faster, and generally, easier to maintain, without changing how the code functions. When you sit down to write some code, your first goal is to make it work. Your second goal is to make it elegant. Refactoring is the process of editing or rewriting your code so that the code is more elegant, faster, and generally, easier to maintain, without changing how the code functions. Refactoring can take many forms and what you do entirely depends on what needs improving. Here is a short list of ways to you could improve your code: Make the code more dynamic When you are writing a program for the first time, the easiest thing to do is to hard-code everything. What this means is that much of the data will be explicitly programmed into the code, rather than allowing the program to dynamically generate its own data. Hard coding data values is great when you need to do something quick and dirty, but can be be deleterious to your program in the long term. When your code isn't dynamic, every time you want to add a new feature or functionality to the site, even if an identical feature already exists, you have to write a whole new set of code. Time to refactor! Make the code reusable Making your code reusable often goes hand in hand with making it dynamic. The goal here is to make the wheel once. So let's say that your site has slideshows on every page. You could write a new slideshow function for each one, but you should only write one slideshow function and use it to power all of the slideshows. Go refactor! Make the code faster Coding is all about logic. The question you have to ask yourself is whether your logic is slow and circuitous, or fast and furious? Are you accomplishing your goal with the fewest steps possible? If not, it's time to refactor! Make the code shorter Making your code faster usually results in less code. And less code usually makes your code faster. That said, there are instances where more code isn't slowing your computer down, but it is slowing you down. It's time to refactor! Make the code easier to read All coding languages serve as translators: they translate human instructions into a language that computers can understand. That said, they should be optimized for humans! If a non-coder can't read your code and get some idea of what it's doing (maybe you are using obscure variables and nonsensical method or function names), it's time to refactor!

Ruby

Ruby is a programming language designed for productivity and fun. Ruby was created in 1995 in Japan by Yukihiro Matsumoto (who is known as Matz). He felt that programming languages had been too focused on being for machines and needed to align more with human needs. Let's say you wanted to print "ha" 3 times on the screen, so you'd get "hahaha." In many programming languages you might have to do something like this: for ($i = 0; $i < 3; $i++) { echo "ha"; } Not so fun looking, right? Matz wanted to create a computer languager that people could feel comfortable reading and interacting with, without all of that intimidating-looking punctuation. Printing "hahaha" in Ruby could look something like this: 3.times do print "ha" end Ruby's popularity grew with the release of Ruby on Rails in 2005. Rails was a framework that made it easier for Ruby to be used to create web pages, and was many developers' first introduction to Ruby. Since then Ruby's popularity has exploded, and Ruby developers are now very much in demand. Twitter and Hulu are two famous web applications created using the Ruby programming language. Cocktail Party Fact A Ruby developer that went by the handle Why the Lucky Stiff (a.k.a. _why) built many of the tools people use to learn Ruby today. They are best known for their whimsy and accessibility, two things that most introductions to programming lack. A great example is "why's (Poignant) Guide to Ruby" which is impossible to do justice to when describing. What other programming manual has cartoon foxes? It's a major inspiration for us here at Skillcrush. In 2009 _why vanished from the Internet, erasing both his persona and his projects. The Ruby community scrambled to save what they could, attempting to reconstruct his now-famous legacy. You can read the story over on Slate - Ruby, Ruby on Rails, and _why - The disappearance of one of the world's most beloved computer programmers.

SEO

SEO (Search Engine Optimization) is the process of making your site more visible on search engines like Google. When a search engine finds a web page on the Internet, it reads through the page and decides what it's about. That way when you search for "bumblebees" it can bring up all of the bumblebee-related sites, with the most important ones on the first page. The thing is, there are going to be a lot of sites that talk about bumblebees! Some might just mention bumblebees once or twice, while others might be 100% about bumblebees. Search Engine Optimization is the process of convincing a search engine that your site is a great site about a given topic (like bumblebees), and should therefore show up first in search results. Google has a few ways of figuring out about whether you have the best bumblebee site. For example, if "bumblebees" appears in big headline text a lot, it's probably an important bee site that's actually talking about bumblebees. On the other hand, if bee talk is in tiny type down by the bottom of the page, maybe you're just blogging about how you got stung, and Google will put your page off to the ninth or tenth page of "bumblebee" search results. Since everyone wants to be high up in Google results, there's a large industry based on helping you customize your site to be more visible to Google. The search engine optimization industry can be split into two major camps - white hat and black hat SEO. White hat SEO uses processes that search engines approve of to improve your ranking. You might need to put more relevant terms on your web site so Google knows what your page is actually about, or get linked to from similar sites to show that you're a good, reputable site. Black hat SEO attempts to improve your ranking by deceiving the search engines. I might show a different page to Google than I do to an actual user, or pay other less scrupulous sites around the Internet to link to me. Search engines are constantly fighting against black hat SEO, and sites that use deceptive techniques are often banned from the search results! Cocktail Party Fact The biggest rule of thumb for white hat SEO is "content is king" - by writing frequent, quality content about a given topic, you'll build up a reputation with the search engines for that topic. You'll also hopefully be linked to by other sites around the Internet, lending you credibility!

Grok

To grok something is to understand it at a deep, deep level. Does tech speak sounds like gibberish to you? Well that may be because sometimes it truly is gibberish, or at least, words that have only entered the English lexicon in the last 50 or so years. Wait, is that all of tech speak? Hmm.... But don't worry, these new idioms are just as easy to understand as the rest of it and fun, to boot! Among techies, and sci-fi enthusiasts, to grok something is to understand it at a deep, deep level. To the point where you have become one with the knowledge, it has seeped into your being, and is now an integral part of who you are. The term was first used by Robert A. Heinlein in his 1961 sci-fi bestseller, Stranger in a Strange Land. In the novel, he wrote: "Grok means to understand so thoroughly that the observer becomes a part of the observed—to merge, blend, intermarry, lose identity in group experience. It means almost everything that we mean by religion, philosophy, and science—and it means as little to us (because of our Earthling assumptions) as color means to a blind man." So how does one use grok in casual conversation? Well, you might hear a Ruby developer say something like: "I totally grok Ruby. Sometimes, I even dream in it." Though, grok is frequently used to mean merely "to know" or "to understand," [EX: "Hacking on something is a great way to grok it."] most sources agree that the word is intended to represent a much more comprehensive grasp of a topic. Cocktail Party Fact Want more funny sounding tech-y slang? Allow me to introduce you to grok's cousin, glark. Glark means to be able to figure out the meaning of something, particularly based on it's context. Glark, you might say, is techie for discern. For example, you might find yourself saying something like: "I was able to glark the meaning of grok, given the way that Skillcrush was using it." Learn more from The Jargon File.

Tracking Pixel

Tracking pixels are little 1×1 pixel images that allow you to keep track of how many users visit your website or see your advertisement. Look, here is a tracking pixel for you to see: Ooooh! Isn't she just the cutest little tracking pixel you have ever seen?! When you open this email and read about tracking pixels, one of the ways that we will know that you did so is that you will ask our server to download our little tracking pixel. So, when an advertiser wants to know how many users see their ad they use a tracking pixel. What they do is embed a small, transparent PNG in their advertisement that the user can't see but the advertiser can keep track of. Each time a new person visits the website where the ad is, that user has to download the advertisement, including the 1×1 pixel transparent PNG. Everytime a user downloads the image, their computer sends a message to the advertiser's server saying: "Hey, send that pixel over to this computer at IP Address 50.74.75.135." The server says, "Yes, ma'am," sends the tracking pixel over to that IP Address, and makes a note of the event in its server logs. At the end of the day (or week, or month), the advertiser looks at their server logs and counts up all the different IP Addresses who requested that tracking pixel; if 10,000 different IP Addresses requested the tracking pixel be sent to them, that means 10,000 people saw the ad. [Pop Quiz: If the advertiser was paying $10 CPM how much money would they owe to the publisher?] This is the same technology that allows web analytic services like Google Analytics and Chartbeat to tell how many people visited your site. Cocktail Party Fact Now that you know about tracking pixels, you should put them to work! If there is ever a web service that you use that doesn't provide you with all the analytics you desire, you can employ tracking pixels to get the information you need. Since a certain crowd-funding platform doesn't provide users with information about how many people visit their project page (they only tell you how many people give you money!) a certain clever developer we know stuck a small transparent image onto his page and looked at his server logs to determine his project's conversion rate (the number of people who visited the project page and gave money).

Twitter Bootstrap

Twitter Bootstrap is a collection of CSS, JavaScript, and image files that help you to quickly build great looking web applications. You might remember from our HTML Week that a boilerplate is a collection of code files that take care of all the pesky required stuff and allow you to focus on the features and functionality that make your project unique. Twitter Bootstrap goes one step further by making it easy to get some of the standard web application functionality in place. Want great looking forms, modals, and dropdown menus? Yeah, Twitter Bootstrap's got that. Looking to make your site responsive so that it looks great on mobile phones? With Twitter Bootstrap's fluid grid and responsive CSS that's a synch. Want a clean looking site with beautiful blue buttons and heavy use of Helvetica? Twitter Bootstrap is for you! Now, granted, in the long run you will probably want to create some custom CSS styles for your site that don't fit in the with blue button, Helvetica aesthetic of Twitter Bootstrap. We for one, love us some white script fonts and reddish, orange backgrounds. But that doesn't mean you can't still put Twitter Bootstrap to use! In our experience, it's not actually the user-facing side of the web app that most developers need help styling, it's the CMS or admin interface. And that is where Twitter Bootstrap really shines. As long as you put together a reasonably decent admin architecture (meaning that that users are able to easily navigate between sections), Twitter Bootstrap will make all those tabs and text inputs and buttons look amazing.

User Experience, User Interaction, and User Interface Design

User Experience (UX), User Interaction (UI), and User Interface (UI) Design, are all terms that describe the role of a web designer in determining a user's experience when using a web application. When we go to search major search engines such as Google, Bing, or DuckDuckGo, we take for that we type our query into the search box, hit submit, and get a list of results. As obvious as it seems, that user experience was designed by a specialist whose job was to figure out what exactly would happen at each step of your searching process. User Experience, sometimes referred to as User Interaction Design or User Interface Design, is the process of designing what happens as a user moves through a web application. Sometimes, a UXdesigner makes major product feature decisions, other times, their role can be to translate product features into a seamless user flow. For example, imagine that you are a UX designer hired by a startup who is designing a new search engine, we will call them Giggle. As the UX designer, you might come in and decide that in order to focus the user on the act of searching, Giggle should have search be the only thing a user can do on their homepage. No links to top searches, no ads, no nothing except a big search box and a submit button. You will then also design what happens once a user hits that submit button, and what happens if they decide to search again. Now, as User Experience designer, you might not literally know how to code, but you do need to have a thorough and up-to-date understanding of latest trends in web technologies, especially frontend technologies. If we go back to our example above, as UX designer you might also suggest to Giggle that they use AJAX to help narrow down the user's search queries and give them immediate results. When all is said and done, UX designers often deliver heavily annotated wireframes, interactive wireframes, or design comps to their clients. Sometimes, UX designers will actually produce HTML and JavaScript files, but this is less common. What User Experience design is not, is the design of the look and feel of the website. Oftentimes, UX designers do not design logos, select colors or fonts, or set web page layouts. Many web designers who do design the visual aesthetics of a website, can also do User Experience Design, but many UX designers do not also design the visual interface. Cocktail Party Fact User Experience design is not actually limited to web applications. Any type of interactive machine, system, or product requires user experience design. Your teapot? Yep, that needed a user experience designer. In 1988, Donald Norman, a cognitive scientist and usability engineer, published a book called The Design of Everyday Things. In the book, Norman discusses how everyday objects are designed and the powerful effects that their design can have on our emotions and daily lived experience.

Websites vs. Web Applications

Websites are static, meaning they are not updated, at least not all that often. When someone says "website" you should think simple, single page sites or marketing websites. Websites are built using HTML, CSS, and maybe a little bit of JavaScript. No programming language is required, and neither is a database. Websites are a huge part of the web and play super important functions like telling you today's special at your local Italian meatball shop, or letting you know about a hot new startup that is about to launch. Web applications are a whole different beast. Like desktop applications (Word, Photoshop, Skype), web applications are dynamic and ever-changing. Web applications rely on you to interact with them, whether by contributing content (YouTube, Twitter, Facebook) or by gathering data from other sources and presenting it to you (Mint, Google Analytics, Klout) or a little bit of both! When most people are talking about tech companies, they are usually talking about companies that create fancy custom web applications. Like everything on the web, Web applications are built with HTML, CSS & JavaScript, but they also use programming languages like PHP, Ruby, or Python, and frameworks like Rails, Django, and CakePHP. Web applications almost always use databases, and because of that they are called dynamic. So here's what you need to ask yourself if you have a web project you are working on: how often does this site need to be updated? Monthly? Weekly? Hourly? Do users provide some of the content? Can you pull data automatically and auto-update your site? Your answers to those questions will go a long way towards helping you determine if it's a website or a web application that you've got on your hands!

Lorem Ipsum

When creating wireframes, print or web designs, designers often use Lorem Ipsum, a specific type of modified Latin text, as a placeholder for where text will go. Lorem Ipsum has been used by designers and printers since the 1500s. Although the text resembles Latin and is based on a work of Cicero, it is intentionally modified and remixed to be nonsensical. The idea here is that by using a nonsense text, none of the focus will go to the meaning of the content, and instead, all attention is focused on the visual design. Many web designers borrow their Lorem Ipsum text from Lipsum, a website dedicated to the history of Lorem Ipsum text. If you have a Mac, we recommend that you download Little Ipsum. This speedy app lets you pick up a few words, sentences, or paragraphs of Lorem Ipsum text, using their handy drop-down menu in your Apple top menu toolbar. In recent years, clever designers have created a whole host of Lorem Ipsum variations. We are partial to Hipster Ipsum, so much mcsweeney's polaroid cray authentic locavore brunch fanny pack 8-bit swag! Skillcrushers Fanny Krebs and Amanda Dean had these yummy and exotic Lorem Ipsum suggestions: Fanny Krebs ‏ I like http://cupcakeipsum.com/ but it makes me hungry Amanda Dean My favourite is Melbourne Ipsum http://www.melbourneipsum.com.au/ - all about my wonderful city! But beware! Make sure that whatever flavor of Lorem Ipsum you prefer is truly nonsensical. There is nothing that will deflate your sails faster than an client hung up on why your design for their news website is filled with descriptions of cupcakes.

Understanding CSS classes vs. IDs

When writing CSS, you will find yourself needing to single out HTML elements or groups of HTML elements to apply styles to. In order to do this, you will need to give those HTML elements a CSS class or ID. CSS Classes In CSS, a class is a group of elements that are the same or similar. You can have as many elements as you want in a class. And each element can be the member of multiple classes. Every class has CSS attributes (like color and font-size) that are specific to that class. CSS classes are similar to a real-life class. A class is a group of students, who often share certain similarities: similar ages, area codes, interests, or life goals. How to add a class to your HTML element: <div class="class"> How to use a class in your CSS: .class { width:100px; height:300px; background:purple; } Each HTML element can have multiple CSS classes. <div class="class another-class"> CSS IDS An ID is a singular identifier of one HTML tag. You can only have one HTML tag per ID and each HTML tag can only have one ID. Each ID has a specific set of CSS attributes that only apply to that one element. To go back to our real-life class example, even if a group of students shares many attributes, each student has their own Social Security number that identifies them and only them. How to add an ID to your HTML element: <div id="id"> How to use them in your CSS: #id { width:200px; height:200px; background:blue; } Cocktail Party Fact In CSS, HTML tags, classes, and IDs each have their own numerical value. IDs have the highest numerical value, followed by classes, and then HTML elements themselves. If an HTML element has two styles applied to it that conflict, CSS defaults to the higher value. Check out this CSS specificity calculator.

XUL (XML User Interface Language)

XUL is a web programming language that you can use to build Firefox plugins. XUL was created by the Mozilla project, an open source collaboration that also created, and maintains, the Firefox browser. XUL is to Firefox what HTML is to webpages, meaning that you use XUL to build interface elements for the Firefox browser. Want a window to popup that asks the user to pick between three answers: Yes, No, Maybe? In HTML you might write: <div id="popup"> <form> <input type="radio" name="answer" value="Yes" /> <label>Yes</label> <input type="radio" name="answer" value="No" /> <label>No</label> <input type="radio" name="answer" value="Maybe" /> <label>Maybe</label> <input type="submit" name="submit" value="Submit" /> </form> </div> In XUL you would write: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="vbox example" title="Example 3...." xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <vbox> <button id="yes" label="Yes"/> <button id="no" label="No"/> <button id="maybe" label="Maybe"/> </vbox> </window> XUL, like HTML, relies on a combination of markup, CSS, and JavaScript to do its magic, and is relatively easy to pick up for anyone familiar with frontend web development. XUL powers all the wonderful Firefox plugins that we love. Add-ons like Firebug, Adblock, or Amazon Wishlist. Have an idea for a cool Firefox plugin for your site? Something neat like a dictionary that allows you to look up tech terms on Skillcrush from any website in the world? Check out Mozilla's XUL School (that's zool school) or Gina Trapani's great blog post on how to get started. Cocktail Party Fact The name Mozilla was originally the codename for the Netscape Navigator project way back in the mid 1990s (remember that awesome web browser that most of us used to first access the web?). The name is a variation of Godzilla, which is also the inspiration for the reptilian monster that is now used as the Mozilla Foundation's logo. In 1998, Netscape released all of its browser source code under an open source license and called it Mozilla, after the browser's original codename. That codebase has been used to develop two popular browsers: Firefox and Thunderbird.