SXSW 2009: Ultimate Showdown of Content Management System Destiny

Monday, March 16th, 2009 11:30 AM
Colieen Caroll, Drupal and Palantir
George DeMet
Matt Mullenweg, WordPress and Automattic
Steve Fisher, Joomla and Idea Market

Just like Iron Chef, three teams of three different CMS were given a project with the same specs to see which one could produce it in the same time limit. They wanted to find something that would use a wide variety of web 2.0 tools.

  • The project is to build a website for a leadership program.
  • Site should utilize a variety of Web-based social networking and collaboration tools.
  • Site should be generalized as possible and be able to be downloaded for use by a wide variety of organizations and communities.

Restrictions:

  • No more than 100 hours
  • Only freely-available software can be used, and all sites must be freely.
  • Site must function on the provided shared hosting space (Linux/Apache/MySQL).
  • Each team had about 2-3 weeks to work on it.

The Sites:

  • Drupal: http://www.drupalshowdown.com
    79.25 hours, 220 lines of custom code, 180K page weight, 8 HTML validation errors, client liked this 2nd best
  • WordPress: http://www.wpshowdown.com
    90.5 hours, 1808 lines of custom code, 154K page weight, 8 HTML validation errors, client liked this 3rd best
  • Joomla: http://www.joomlashowdown.com
    57.25 hours, 20 lines of custom code, 140K page weight, 0 HTML validation errors, client liked this 1st best

You can download all of these sites, screen casts, and usability reports here: http://www.cmsshowdown.com

SXSW 2009: Scaling Synchronous Web Apps

Monday, March 16th, 2009 10:00 AM
Kincaid
Vogt
Jen, Meebo
Piantino, Facebook

“How we messed up so you don’t have to.”

What works for someone else does not necessarily work for you. You should be trying out all kinds of technologies.

A browser is not that great for live dynamic content. That is why you need to use synchronous web apps. On facebook there are two examples of this: chat and the news feed.

Take caution when releasing large changes in your project. Facebook had some issues with the synchronous push for version 2.

With these kinds of projects you shouldn’t think too far ahead of yourself, otherwise you’ll be wasting a lot of time and never get the full scope of the project completed. This will cause you to be discouraged.

Everybody does the exact same thing. When you’re broadcasting and an issue occurs then everyone who’s logged on trys to refresh their browser at the same time. On meebo the login/logout function is very server intensive. So on holidays they have many more login/logout requests. To get around this they queue up logout requests, show a messege to the user that they’ve been logged out (which makes them happy), and then eventually logs them out.

Front-end vs. back-end.

On facebook they use MetaChache which speeds up a lot. On the news feed/homepage they store multiple things in a cluster/cache and then pass them all at once to the client. This makes it less intensive over time.

At meebo they use a lot of C++ in the back-end. In the front end its all just in javascript. The problem is they need to have a happy medium on what is controlled by the client, and what is controlled by the back-end. Meebo actually posted a blog post and asked for people to find an error that they couldn’t reproduce. Once they got responses from someone in the Bay area they went to their house and asked them to reproduce it.

Can we rollback?

Meebo has 5-6 componenets that get rolled out in order. Incremental release is good too, so you can release something to 10-20% of people, and if something occurs its less bothersome to roll it back. Symlinks also is used by meebo. What Simlinks do, if something goes wrong they have roll back pointers that will do it instantly.

On facebook they feel that the response of an alert can be worse than the actual need for the alert. They had an issue where one of the servers were overheating, so one of the engineers decided to reboot all of the server which should have only taken 10 minutes. However, this restart caused the news feed to be down for 4-5 hours one day.

What do you monitor?

Meebo monitors server health, user experience, how long it takes to load the front page, and the health of the IM networks. Before when AIM/MSN would have issues users thought it was Meebo that was down. In result, it wasn’t MSN, but meebo actually had a login bug. Measuring features that are used more often, and trends of how many Meebo acounts are created every day. So if they release a new release they can see if these trends are effected and if they now get less participation.

Facebook has tools that produce latencey.

Can I throw more money at it? Changes between hardware/software.

Meebo tries to keep the server load at 50-60% of the server’s load. They find if more than that are on the server, then it takes a huge load.

Good enough vs. Perfect. When do you decide when something is good enough to ship?

You need to estimate how much of a load a certain feature will cause on your server. A lot of times when you test something it runs just fine, and then you push it live it ends up causing chaotic issues. Sometimes just asking the user if it is good enough, and to ask for user feedback then they feel like they’re actively involved in the project.

Gatekeeper is software that Facebook uses to slowly release new features to only some users. Meebo has features where they can turn things off and on to load balance test new pushes.

It is good to know what you can cache and what you cannot. You should not just cache anything. Do never be afraid to ask the user what is wrong with your product. You’re never going to know about the product as much as a whole as the user. You need to be aware about what the user is thinking, and not what new features your engineers want to implement that day.

Questions and Answers

Do you use Javascript toolkits/frameworks?
When Meebo first launched the JavaScript frameworks were not good enough so they wrote their own. It is also recommended that you strip out things you’re not using in those frameworks to help on load time and bandwidth. Facebook built a packaging engine to make sure it sends back the same amount of data with every page.

What about automated testing?
It is very hard to load test because you cannot anticipate what all users will do. The best way to load test, sometimes, is just to put it live and see what happens. You can always roll it out to 10%/20%…60% and when it reaches 60% with no issues it should be fine to push out to everyone. Putting timers on

What happens when you make infastructure changes?
Facebook noticed that their CPU was running slower and slower, and they looked into it and found it was Memory Fragmentation. More and more features will cause this to happen as your infastructure gets bigger. One of the metrics Facebook looks at is how much CPU usage they can actualy use until the server starts messing up.

What are some stories when human error caused issues?
When facebook released the new homepage everyone decided to take a vacation at the same time afterwards. They had monitoring scripts running, but they broke, so when everyone got back they noticed the monitor was shut off. Meebo accidently deleted all of their user accounts, and had to restore them. Vogt bumped a router and killed half of their user’s connections.

Facebook has 10,000 servers. Each server has 32GB of ram. Wow!

SXSW 2009: Game Design Competition

Sunday, March 15th, 2009 5:00 PM
Shin
Colantonio
Hong-Porretta
Charia

Game #1

Education game for Higher Education (College/University) targeted audience; specifically freshmen. Since this will be used at/with college students this game cannot have sex, drugs, or alcohol. For this reason the game’s model will be for consperiecy. The game’s genre is will be of type RPG.

Game Description:
Players view the game in a 3rd person perspective like Fable. Each chapter is viewed as a new level. This will allow for future incorporation of game add ons. Players will move around the environment and access virtual computers and media to solve the puzzles required in completing the conspiracy. This game seems like it would be similar to an older-age-targeted Carmen Sandiego.

Game #2: ManorMeta

A Choose your own adventure where players can create their own currency, language, etc. This has a coined term called “Trans Media Story Telling.” Avitars will be used to hide your identity, and allow you to have fantency. They would like this to be in a full 3d environment. Community Colaboration will be included. A beginer level will have math and such. And then as you get further into the game it will become real challenges with large problem solving techniques.

Game #3

Zeus is stored on life when life begins to die. The theory is that Zeus needs to re-habitat life in millions of years to reproduce life. Players will gather resources, plant life forms, start an ecosystem, and animals will be created. Once all of that is up and running then humans are slowly re-entered into life and man kind will start copying Zeus. So if man kind if using cheaper reusable/natural resources so will your humans because they learn from him. If Zeus would to restore a river in one area, then natural water will flow throughout. If you polute that same river, then the environmental surroundings will be altered and adjusted. As you explore the environment you will over time find out why Zeus was created and what his purpose is. The avitar of Zeus will resembel what path he is taking. If he is more industrial then he will drip with oil and smoke of polution. If he is more long-term oriented then he will be green and healthy. If you evolve Zeus to be more weapon oriented instead of durable then so will the humans around him. This game sounds very similar to Black and White.

Game #4: Ring Master

Combination of RPG and skill action game in a Circus genre. This taps into the fantasy of running away to join the Circus. Players create characters that represent themselves within the game. They can be one of the animals or the actual Carnies. Players see their physical actions mirrored on the screen and learn skills as they travel through the game. Players will feel as though they are actually perofming live at the Circus with the crown chanting. Players would not need any prior knowlede or skills to play the game. The Circus is a MMORG where they perform in front of all other players. The overall look is theatrical, dark, and over dramatic.

SXSW 2009: The Web in Higher Ed, What’s Different?

Sunday, March 15th, 2009 3:30 PM
Presenter names unknown

Every year he comes to conferences, and every year there is this little packet of Higher Web and there isn’t enough people who are in a larger group. We’re here to talk about issues we have and ways we teach. Schools are being cut 20-30% and although student enrollment is getting higher it doesn’t mean all of that money will be net. In 2012 your budget in lower-ed will be based on how many students you have.

Two of three faculty members say that their lesson plans shouldn’t be on line (or they do not want to maintain it). And two of three students wish their faculty members put their lessons online. This is interesting because we can see that technology is in the youth, and not in the teachers.

Women are underrepresented in all web jobs except for that in Higher Ed. It would be interesting to know why that is, but there is nothing specific.

Brown University just redesigned their home page, which decreased their bounce rate.

Everyone hated the admissions website, but everyone loved the student senate website. The question becomes, who was the person who created this website? It was the person who had the most amount of phraise as working with students. The admissions website person posted a 2000 word phrase information on how to apply to the program. Small teams can do great things, but you find large groups can do much more. Getting something simple like a twitter account, or a facebook acount and look at these things takes very little effort. Most universities, however, dont think what happens with man-power if we do get into social media. It may become overwhelming and require a lot of work long-term.

Always be present. If you are willing to put yourself out there in the shoes of students, be willing to be there and say you can help. And that same policy should probably be true for any kind of organization.

Questions and Answers

The University of Texas had a website, but there was nothing interesting on the homepage. A redesign was put into place, and if you can understand your roles and have the right people with the right skills set them you can acomplish things. It can be fun, as long as you have those people.

In the UK higher education was free. But as times has changed you now have to pay. In other parts of the world we’re not alone with budgets, and they’re suffering the same types of financial situations. Perhaps we should have a conference just for technology educator institutions?

Sometimes the Web Team sits in IT, and sometimes it sits in Marketing. When people rose their hands to these questions, it seemed pretty 50/50.

Sometimes the Web Team is split into two where one part is the front end, and the other part is the back end. Fewer people said they did this than those who are all in one.

University of Florida has been looking into facebook. They wanted to know if people have had any success with facebook. Someone said they’ve used it just as an open form, gather potential information, and hold a poll to see what students are interested in. It allowed them to have an open connection and allow them to have great feedback.

Walden University is an internet based university. They use facebook to recruit students and do their online lecture series. Facebook is how they communicate with their students. This reduces their snail mail and pulls everything to be online.

DePaul University in Chicago had alumni constnatly requesting email, but through facebook requests it showed them that they truly wanted it. This user feedback allowed their alumns to communicate and respond to them.

“Facebook Gate” was mentioned, but it was never explained what it was. But when using this increased applications to the university because it allowed students to talk to each other.

In facebook there are pages and there are groups. Pages are better because they’re more broad and allow you to drill down and target the audience administrators can contact: alumni, age, location, etc.

University of Washington has a long debate because they’re running out of funding. It has been a long debate for years now if they should move over to gmail/ymail to see if they should keep holding onto an internal server.

ASU did a big piolit with google aps.

Boston College turned all their services off and forward everything through google.

In turns of web standards and web usability how many have organizations that feel these are important? About 33% of people raised their hand to the question. Someone mentioned that “Accessibility is the law.” In Texas they have a clause where multimedia online does not need to follow the same standards as federal 503 compliance. If you have Accessability commities you should be using them.

Someone asked how many schools have tools that validate across their entire website which will allow them to check for missing alt tags, form validation, etc. Only three people (less than 1%) raised their hand. IBM Rational Policy Tester and World Space were recommended.

One university said they are showcasing projects. A “Social Media Working Group” is what they called it. This is a way so they can all get together and share projects/ideas. This will then let people know what is going on, what is new, and not to reinvent the wheel.

Creating a blog, having a twitter account, having half-day conferences, and becoming community driven has helped one university promote new tools and ideas they are working on. This allows different departments to be fully involved with the surrounding community. If the webteam constantly tells clients “no” for whatever reason you need to instead sit down with the clients, talk to them about why they cannot have it. These means can also be done by using the blog, twitter, etc. ideas. If you’re discouriging the departments from coming to you, then you can do more harm than anything. Universities love commities, doing things at a one-on-one basis seems a little more personal. Otherwise if you do something in a committy then you’re going to have those “alpha-males” that constantly take the attention. One-on-one is the best way to get what everyone wants to know: “Individual State Hold Meetings.”

The question was asked, “Are there things about your job that you feel good about? Do you wish you had a better job? Do you love the university?” Someone responded, “Our problems are more technological, and not personal.”

University Web Developers: http://cuwebd.ning.com

SXSW 2009: CSS3: What’s Now, What’s New and What’s Not?

Sunday, March 15th, 2009 2:00 PM
David Baron, Mozilla
Sylvain Galineau, Program Manager for Microsoft
Hakon Wium Lie, Opera Software
Molly Holzschlag, President of Opera Software

1. Mozilla

CSS Modules (Just a few):

  • Selectors
  • Color
  • Media Queries
  • Backgrounds and Borders
  • Fonts
  • etc.

Selectors:

  • tr:nth-child(odd) {background: #FFA;} or tr:nth-child(even)
  • opacity: 0.5 can be represented as rgba(0,255,0,0.5)
  • border-image allows for stretching of border images no matter height/width.
  • text-shadow: 0 0 0.25em #000;
  • -moz-border-radius: 0.67em;
  • word-wrap: break;
  • font-size-adjust: 0.45; lets you change the way you’re specifying font sizes by the x-height of the characters. this attribute acts as a multiplier.
  • downloadable fonts can be achieved by @font-face { src: url(“GenBasR.ttf”); font-family: “Gentium Basic”; font-weight: normal; font-style: normal; }
  • width: calc(50% – 8px);
  • h1 { content: url(company-name.png); }

As a side note, Baron was using the browser “Minefield.” I’ve never heard of this browser, but I want to check it out sometime.
As a side note, the Galineau from Microsoft has a Firefox 3 sticker on his laptop. 🙂

2. Internet Explorer

Internet Explorer 8 is working on getting up to date with CSS 2.1, but has no plans to release a stable support for CSS 3.0 as Opera/Firefox is already supporting.

3. Opera

Selectors:

  • text-shadow
  • border-radius: 60px 0px / 0px 60px;
  • box-shadow: 0 0 20px 10px #000 inset;
  • box-shadow: 0 0 20px 10px #000 inset, 0 0 20px 10px #FFA; would do two shadows.
  • border-image
  • media-queries lets you change the CSS display based on the width/height of the content view area.

As a side note, the Galineau from Microsoft was grabbing his fast in nervousness while Wium Lie was going over Opera’s amazing new features. 🙂

4. Questions and Answers

Typically designers will float elements on a page to mimic page layouts. Although it works, it just doesn’t seem like a good solution. Johnathan Snook is a CSS layout issue author who touches on implimations for this issue.

Opera wrote a few custom selectors into their browser that lets them print as a book. They actually used this technology to print and publish an entire book two years ago. They worked with Yes Software who was doing something very similar to what they wanted.

Baron posted his examples online. You can access these from his website.