Old Blog

Text

Assembling (with) Sass

By: Nick Walsh

At first, we were skeptical too–another preprocessor? And for something as simple as CSS? Using Sass on large-scale applications, though, reveals one indispensable feature after another. Once we started modifying site-wide coloring via a single variable, or handling fluid-width percentage calculations directly in our stylesheets, we became hopelessly hooked.

Assembling Sass

Sass and its popular extension Compass have long been among our most requested topics, and we’re thrilled to announce the release of Assembling Sass, Part 1. In this course, we focus on the foundations of converting your CSS over to Sass, all without sacrificing the output quality. Levels include:

  1. Foundation - an introduction to Sass, imports, comments, and nesting
  2. Variable - creation and use of recallable data
  3. Mixin - writing reusable chunks of style with optional arguments
  4. Extend - managing CSS class reuse and inheritance on the stylesheet side
  5. Directive - programmatic additions via Sass, including functions and each/for/while
  6. Math + Color - performing arithmetic and color alterations directly to values
  7. Responsive - simplify and optimize your responsive design workflow with Sass tools

Assembling Sass Interface

Once you’re through Part 1, which covers the major functionality points for getting started, keep on the lookout for Part 2 later this year. The additional levels will expand on the basics a bit and largely focus on the wonders of Compass. We hope you learn to love Sass as much as we do!

Text

Reasons behind the Redesign

By: Jason VanLue, Design Lead

It was the night before SuperConf 2011 in balmy South Beach when we first wrapped up our little side project, Code School. We were all squeezed into a rental house, working to get everything pushed before announcing the beta at the conference.

That was a year and a half ago. Our team was much smaller, and we were just happy to get something live and tangible. Over the next nine months or so, our vision for the product began to take shape. The more users would join, the more we would solidify features and tweak the platform and interface.

Moving into 2012, we pushed out a large update with several refinements to user accounts, course interfaces, and the main Code School platform. After juggling ongoing feature development, course creation, and larger platform iterations, we finally realized that in order to better serve our users and follow our vision, we needed to make a substantial overhaul to the platform.

And so, after many months of planning, sketching, user flow researching, wireframing, designing, committing, copywriting, and testing, I’m incredibly proud to announce Code School Version 3.

We’ve listed a few of the major updates below, along with the reasoning behind each modification:

1. Ease of Starting a Course

At Code School, we highly value our users and our content. Our old interface made it difficult for users to quickly start a course, and to therefore see the value in learning by doing. Because we have several free courses, and free first levels for most courses, we wanted to remove all barriers to free content.

In the redesign, users are now one click away from being immersed in a course interface. This also helps us showcase the branding and unique theme for each course. Now you’ll be able to try out our content, and dive into each experience.

2. A Simpler Sign Up

We provide our content through a subscription model—become a member of Code School and receive unlimited access to all of our past, present, and future content. But if you’re not yet a member, we still want you to experience what Code School has to offer.

In our old interface, users could sign up for a free Code School account, but it was no easy task to find the sign up page. We wanted to change that. Now, it’s incredibly easy to sign up for a free Code School account with the added bonus of social sign-in. Users also get a redesigned account dashboard, and have access to free courses and free levels.

3. Reason to Join, Reason to Stay

We value all of our users, but our members have a special place in our heart. In our old interface it was difficult to make sense of our enrollment features, why you’d want to join, and what’s involved in becoming a member. We completely redesigned our Enroll page, and built our enrollment form from the ground up. Now it’s easier than ever to find out about enrollment, and to become a member.

But wait, there’s more. Once you become a member, staying in school is a no brainer. We’ve rethought everything about user accounts so that each feature is intuitive and easy to use. You can get a snapshot of your progress, start and resume courses, and manage your entire Code School experience.

We’ve also restyled your Public Profile and renamed it so that now each user has a “Report Card." You can set your Report Card to be public, but new user Report Cards default to private. It’s up to you to determine how much you want to brag about your skills. Keep an eye on this, as we’ll be rolling out more features to the Report Card in coming months.

4. We’re Comfortable in our New Skin

There are a lot of changes under the hood that you might not notice right away. But one thing you’ll notice for sure is the new visual design of Code School. Since each course has a unique brand, theme, and style, we wanted to simplify the main Code School interface to highlight the individual courses. We wanted to create a simplified visual style that we can carry throughout the site, but to also have flexibility for future development.

The design is still uniquely Code School, but a little more subdued, and shall we say a bit more mature? It’s sort of like our upperclassman UI.

5. A Personal Touch

Code School is created, run, and developed by real people. Real developers, designers, copywriters, and project managers just like you. In addition to creating immersive experiences for each of our courses, we want to add a human element.

Our courses are developed and taught by the same people who built Code School, and who use these languages, frameworks, and skills daily. These are not just nebulous concepts taught by stuffy professors on soapboxes—these are relevant concepts and skills that are taught by folks who are in the trenches day in and day out. We think that matters.

In our new interface we’ve devoted more space to introducing you to the people behind Code School. Each course page includes pictures and bios for each of our professors, and now include teaching assistant roles for each person who’s helped out on the course. Feel free to send any of us a tweet, or chat with us at conferences—Code School really is a platform built by designers and developers FOR designers and developers.

That’s just a snapshot of the new upgrades in Code School V3. We’re excited that the new interface is built in a way that allows us to rapidly ship new features and updates in the future—so keep your eyes towards the front of the class; we’ve got some great things in the works.

I would be remiss if I didn’t talk about the amazing people behind this effort. The entire team at Envy Labs contributed, but there are a few specific people that deserve to be recognized. Hats off to Drew Barontini who carried more than his share of front-end development work with help from Nick Walsh and Dan Denney. Adam Rensel, Adam Fortuna, and Eric Allam had the unenviable task of making the new interface functional, and they did an amazing job.

And all of this wouldn’t be possible if it wasn’t for our users—we love all of you, and everything we do on Code School is motivated by the desire to make your experience easier, more enjoyable, and more fun. We hope you’re as excited about this as we are.  

Text

Designing Ruby Bits

By: Jason VanLue

If you’ve played through any of our courses, you’ve probably noticed that each course has a unique brand and theme. We spend a lot of time thinking about and designing each course—creating immersive learning experiences where users learn effectively without sacrificing design detail. When you play a Code School course, we want you to engage both sides of your brain, both your analytical side and your more creative, emotional side. We think learning is more fun when you connect with the material.

I wanted to highlight a few details from our latest course, Ruby Bits (read more about the course, here). The overall theme of the course came from the name, Ruby Bits. When that name was suggested, Justin Mezzell of our design team literally jumped out of his chair. He’d been wanting to create a theme around old-school video games (of the Mega Man mold), and this seemed like the perfect opportunity. He started with creating the course branding and “title slide.”

Now normally, when we design a course, we focus on a few main elements: the branding, slide deck, course UI, and badges. I need to highlight what an awesome designer Justin is, because he decided that wasn’t near enough for this course. He set out to create a full-on video game complete with characters, animations, villains, and levels.

We weren’t able to integrate all of the “game” elements into the final course, but so many awesome bits made it in that it’s officially become one of my favorite UIs we’ve ever built.

If you’ve ever played around with 8-bit graphics, then you know what a tedious task it is to design in this style. But we are Code School, so we obviously can’t leave all these amazing graphics as static Photoshop files—we instead figured out a way to integrate these into a living, breathing website. Hats of to Dan Denney, who spearheaded the front-end development on this course. The biggest challenge was integrating repeating pixel patterns and the myriad of borders that appear throughout the UI design. According to Dan, the border-box CSS property was a lifesaver (he’ll be posting more on that soon).

But wait, there’s more. We have an awesome design team, but our development team was not to be outdone. They decided to integrate a Konami code into the final UI, because you just can’t have an 8-bit game without some ‘pew, pew,’ right? Head over to rubybits.codeschool.com and enter the following code:

↑ ↑ ↓ ↓ ← → ← → b a b a

We hope you enjoy playing Ruby Bits as much as we enjoyed building it. Our awesome design team makes my job pretty easy, and coming up with course design themes is usually as simple as:

Text

Capturing Actionable Metrics

By: Tony Winn

This is the first of a two-part post about how we’re integrating metrics into our product development cycle at Code School. This week I’ll review how we frictionlessly capture actionable data, and next week I’ll talk about how metrics can be leveraged to create a better product.

A few months ago, Code School hired its first non-technical employee, Dan McGaw, to make sure we’re strategically marketing Code School. Once he wrapped his head around what we do and how we do it, the first thing he wanted to see was the corresponding metrics. We were tracking a few pieces of data, but few people on the team looked at it and none of the data was especially actionable.

Choosing your key indicators

Key indicators are groups of data related to your application that can help directly gauge its success. For eBay, it might be the number of won auctions in a given week. For Twitter, it might be the number of promoted tweets sold on a weekly basis. Key indicators ought to be really easy to come up with, and if you’re having a difficult time determining them for your product, it’s probably time to revisit your business plan.

At Code School, one of our most important metrics is the number of active subscribers. Everything we do is centered upon creating value for our subscribers–so much value that they want to continue to subscribe and maybe even recommend us to friends. This translates well into the rolling weekly number of active subscribers.

The Allure of Vanity Metrics

For the past nine months we’ve had a dashboard with the rolling number of weekly subscriptions, and the percentage of growth compared to the previous week. At a glance I can see how many subscriptions we got this week and how that compares to last week’s total. The problem is that this data, at least for me, has never been obviously actionable.

If we’re spending our teammates attention on metrics they can’t do anything about, then what’s the point? If a collection of metrics isn’t leading to better product decisions, then we’d be better served to not be distracted by them at all.

From Vanity to Actionable

In the case of our rolling weekly subscription metric, we’ve been capturing the effect of all of our efforts, but we’re missing any information about the cause. Maybe our newest course brought a big spike when it was released, but maybe it was our newsletter going out. Members of the team might be able to correlate a change in subscribers today to work we did the last week. Two months from now it’s unlikely that anyone will remember why that spike was there. 

The key to creating actionable metrics is context. From week to week we’re provided with a little bit of context. We know if we’re doing better than last week, but what we need to know is what we did last week that generated the spike. 

Automate

The capturing of these contexts (or events) ought to be as trivial as possible. They must work within the current work flow of the team or they aren’t going to be used. It must also allow for discretion about the creation of events. If you fix a bug, can you reasonably expect that to have an impact on subscribers to your product? In some cases maybe you can, but if it’s one of four bugs you fixed that day, they aren’t all going to be game changers.

Inspired by my love of github issues’ use of commit messages to close issues, I decided to automate creating contexts on Code School in a similar way. I created an after deploy hook to record an event for every commit message that contains the tag #track. When I create a commit with a message of “Some life changing feature everyone will love or hate. #track,” we automatically create an event by that name as soon as it’s been deployed to production.

Not all of the events you’ll want to track are going to be triggered by changes to your code. If this becomes something that the team sees value in, then I’d like to expand it further to create events following the sending of email campaigns or the publishing of blog posts. Of course, I’ll be tracking how many events the team is creating, so that I can have actionable metrics regarding my metrics :)

Text

Group Managers

By: Olivier Lacan

We’ve listened attentively to the feedback from our group customers, and we have been working for several weeks on the improvements that are most crucial for group owners and members. The first of these improvements is in the way groups are managed.

Make Manager

Starting today, all group owners can appoint managers who will be able to add and remove members to  a group. Managers can also change the number of member seats available on a subscription. 

Group Managers

These changes make it much easier for a group owner to take the hands-off approach of setting up the course payment, then turning over group management to existing group members. This is similar to our previous administrative feature, but it comes with an added benefit: group owners and managers don’t have to be playing (or paying) members of the group.

Group Manager Invitation

If you’re a project manager and you don’t need access to our courses or Code TV screencasts, but you want to keep track of how your group is progressing, now you can.

If you’re the kind of group manager who likes to show everyone how it’s done, then you’ll enjoy seeing the collective group progress. We also give you access to those stats on the Group Progress page.

Group Progress

If you’re ready to start moderating, scoot over to the Group Enrollment page to quench your team’s hunger for knowledge. This is the first of many improvements to come-we’re just getting started!

Text

Code School in Africa

By: Tim Dikun

I just got back from a two-month trip to Sierra Leone, a war-torn country in West Africa that is full of wonderful people. I’m not sure why I decided to go, but it was a transformational experience in all the ways you’d expect: being unplugged from western civilization, walking alongside a completely different culture, and seeing poverty firsthand. To be quite honest, I expected to come back with a chip on my shoulder, frustrated with the rampant materialism of our society. I thought I’d cringe every time I saw someone tweet with the hashtag #firstworldproblems. However, I now find myself with a surprisingly different attitude. I have a fresh perspective, and have come back to the US empowered after learning that something I do every day can be used to change the world.

One Boy’s Story

Tejan Marjay is 15, an orphan, and a victim of underdeveloped medical services. He fell from a mango tree when he was young, breaking his jaw and leg. Due to inadequate medical care, his jaw fused to his head and his leg never healed. This left him unable to eat properly and caused his legs to grow disproportionately, making it extremely difficult—and painful—to walk. In 2007, a generous American supporter paid to have Tejan flown to the US for surgery, which involved placing pins in his good leg to prevent it from growing any further, and replacing his jaw with one of his ribs. He’s lived an incredibly difficult life, but remains one of the sweetest kids I’ve ever met.

During his time in America, he was introduced to this thing we call the internet, and he became hooked. He returned to Sierra Leone with a strong desire to learn everything he could about computers, especially web development. However, due to Sierra Leone’s lack of computers and spotty internet access, his opportunities to learn are few and far between. So naturally, when he learned that I work for a web development company, he begged me to teach him. We started sitting down and having conversations about URLs, servers and HTML—though I quickly realized that trying to explain these concepts without any resources was impossible. I reached out to my coworkers across the globe at Code School, and they arranged for a few books to be sent to me in the middle of the jungle.

Who uses programming books these days?

Once the books arrived, the news quickly spread to the other 100 orphans that live there. A group of about 10 boys started meeting together and reading the HTML book, quizzing each other as they went along. They couldn’t get enough. I would come to visit and find them sitting on the bed reading the book together. It was then that I knew I had to get these kids in front of a computer.

I managed to borrow an old MacBook Pro from one of the American construction workers that lives in Sierra Leone full-time, then I started running classes. The boys all took turns writing basic HTML and I checked their comprehension. Crowds soon gathered, and we had kids watching their brothers learn HTML. I was stunned at how quickly they learned. Many of these boys had no idea what a web browser even was when I met them, and a few short weeks later they were writing basic HTML.

Not Just the Grind

These are the skills that we employ on a daily basis at Code School, often without thinking that they could change the trajectory of others’ lives. The West African internet industry is in its infancy, but is growing at an alarming rate with almost no skilled labor at all. This is the opportune time for these kids to learn web development.

One can imagine how easy it would be for these kids to slip into living with an intense fear of the future. They’ll soon be adults—without the option to move back in with Mom and Dad—in an awful economy that is the result of more than a decade of brutal civil war. They’ll struggle to find work, and many of them won’t. Web programming presents the opportunity to find a career that will allow them to provide for their future families, and raise their children in a safe environment with education and sustenance. This in turn works to reduce the poverty rate, eliminating corruption and ending the cycle of violence—the kind of generational change that truly transforms nations.

It’s easy for me to get bogged down in the day-to-day work of our industry. Maybe that’s why I went to Africa in the first place, I’m not sure. What I’ve learned though, is that despite the industry’s shortcomings, we really can make a difference. Code School has already changed the way that the first world learns programming, and I really believe that it’s uniquely positioned to make a profound and practical impact on the lives of students across the world.

The takeaway is that even with the resources that Code School provided this summer, in the form of my time and a few books, hope was given. However, I don’t expect you to take my word for it. The day that I was leaving, Tejan passed me a note addressed to Envy Labs, the parent company that founded Code School.

I didn’t go to Africa expecting to teach HTML. I went to speak worth—by word and deed—to those who’ve been abandoned and victimized by a fallen world. It just worked out that I was able to put my years of experience and knowledge to good use, and I’ve got to admit—it was exhilerating. I’m excited to keep in touch with Tejan through the orphanage and Children of the Nations, and hopefully, he will continue to grow in his knowledge. Who knows, maybe someday you’ll start following him on twitter or attend a conference in which he speaks on the latest web technology. The sky’s the limit.

Finally, I made Tejan an honorary member of the Code School team, giving him our T-shirt to remember us by. With that, I’d like to present the newest member of the Code School team, Tejan Marjay. We are now, more than ever, an international company.

Text

Code School Badges now on Mozilla Open Badges

- By Eric Allam

RFZ

It’s been a long time since I earned my first badge on Code School, the infamous screaming zombie badge for Rails For Zombies. Since then, it has sat peacefully on my Code School profile for the world to see. Though we have an API for grabbing badge information for a user on Code School, we’ve been watching the Open Badges project with a keen eye. Open Badges is an open (duh) place for you to aggregate all the badges you’ve earned across many different platforms. It’s a great way to showcase your skills to the world (and future employers).  

We’re excited to announce that Code School is now partnering with Open Badges! We’ve started adding the ability to send our badges to your own Open Badges Backpack, starting with Ruby Bits and Rails For Zombies.  

If you’re interested in signing up for Open Badges, it’s really easy. First, head over to the Open Badges site and click on the blue “get started” button. They will walk you through how to earn your first badge and set up your Open Badges account. NOTE: make sure the email you use on Open Badges matches that of your Code School account so that badges will easily integrate.

Next, click on the “Add to Open Badges” link that appears when you finish Rails For Zombies or another Open Badges linked course:

This will result in a pop-up Open Badges dialog box, confirming that you really do want to add this badge:

From there, just follow the instructions and before you know it, you’ll have that shiny new badge in your Open Badges Backpack:

If you have already earned Code School badges that you want sent to Open Badges, you can visit your Public Profile page and click on one of your earned badges. This will take you to your Badge Achievement page:

Click the “Add the Mozilla Open Badges” link, which will display the same dialog box seen above. We’ll consider linking these accounts to be one of the easier challenges we’ve given to our users. Enjoy showing off your Code School achievements to the Open Badges world!

Text

Kickstarter: Time to Drop the Mics!

By: Eric Allam

After a month of spreading the news about our first Kickstarter project, we are excited to finally get started on the Try iOS course that so many of you have helped us achieve! Thanks to all who contributed, you’re the reason we hit each of our goals and raised a grand total of $152,863. We wanted to post an update, whether you contributed or not, and let you know what is in store for our iOS courses and why you should care.

If you didn’t pledge:

By achieving our initial goal of $50K, it became possible for us to create a Try iOS course, intended for backers and those interested in purchasing. But the more we looked at Code School as a whole, and the many courses we’re about to roll out, we didn’t want the Code School community to miss out on this learning opportunity. We eventually decided to make the Try iOS course available to all Code School members in November. This course will explain how to build your own iPhone apps, and will have the usual screencasts, in-browser challenges, and Code School feel. We will be teaching iOS 6, the newest mobile platform from Apple that will be released in October (fingers crossed). This course will now be included with a Code School membership, so make sure you’re enrolled!

If you did pledge ($25 or more):

We are so thankful for your generosity and for those of you who came alongside us with your support (financial and otherwise!). For your pledge of $25 or more, you will receive the Try iOS course…forever. This means that this course will be yours even if you are not a Code School subscriber, similar to our other free courses. If you are a subscriber and you suspend or cancel your membership in the future, you will still have access to this course on Code School. You will be hearing from us over the next couple of weeks as we email you and collect addresses, shirt sizes, and all other necessary information for getting you the prizes you earned with your pledge. Seriously, thank you.

Hitting our goal of $150K ensured that while you’re on enjoying Try iOS, you can additionally try a free month of Code School! For non-subscribers, this will be a great chance for you to check out all Code School courses. If you are currently a subscribed member we will be giving you a free month too, so it’s business as usual, but with prize level perks! We are working to get your free month out as soon as possible, but those will hit your accounts no later than November. If you’ve never registered for Code School, you’ll want to register now (it’s free!), even if you don’t subscribe for a membership.

More for everyone:

Thanks to the continuing generosity of the coding community on Kickstarter, we went on to surpass our initial goal, and met all of our goals for making this course bigger and better. It will now also include two “making of” videos of the course building process, two additional levels of content, extra video hints for completing levels, and an iPhone development cheat sheet for helpful reference. Feel free to pause here and go hug someone if you need to.

Even with this upgraded version of Try iOS set in stone, we couldn’t stop people from lavishing more pledges upon us. So much so, that the $125K goal was reached, earning yet another course for the coding community, including non-Code School members. Now the whole world can come to Code School and take Try Objective-C, a free course that teaches the fundamentals of the language required for iPhone app development. We recommend that total beginners take this course before Try iOS, and get a foundation of the language before learning how to apply it. This course is set to release at the beginning of next year.

We hope you’re as excited as we are about these upcoming courses and that they prove valuable to you and your ongoing code education. Thanks for your support and well wishes along the way as we continue to look for more ways to help users learn by doing.

Droppin

Text

Introducing Ruby Bits

By: Mark Kendall

At Code School, we love Ruby. It’s a beautiful, expressive and flexible language. Ruby has ingrained itself into the way we think about solving problems; I’m pretty sure some of us even dream in Ruby.

But it wasn’t always like this. Most of us came to Ruby from other programming languages, and many started learning Ruby because of Rails. We learned enough Ruby to get by, maybe enough to build a few small projects, but we were far from experts. We’d stare in amazement at code written by experienced Ruby developers, trying to decipher the seemingly magical techniques that came so easily to them. We wondered how we could ever wrap our brains around Ruby’s deepest secrets.

Maybe you can relate. You’ve learned the basics of Ruby, played through our Try Ruby and Rails for Zombies courses, but you’re not sure where to go next. We get it. We’ve been there.

Ruby Bits LLogo
So today we’re releasing the first part of our Ruby Bits series, designed to help Ruby developers level up their skills. We’ll dig deeper into Ruby and show you the tricks and techniques that expert Ruby developers use. Our goal is to help you learn to write more concise, expressive, and powerful Ruby code. Code that you’ll be proud of, and that will make you smile when you come back later to read it.

We will be releasing a second part to Ruby Bits in October, for those of you who are looking for even more expert tips and are ready for more difficult challenges. We simply had too much content to fit into one course. If that sounds intimidating, fear not, you can start preparing now and be ahead of the class when part two is released. We hope you enjoy the techniques we share in Ruby Bits, and that you harness them to write beautiful code!

Text

The Quest for Captions

By: Josh Van Cleef

For almost as long as we’ve been producing videos for Code School, we’ve had requests from our users to add captions to our videos. Fortunately, we’ve finally been able to make course captions a part of our monthly process! Next week, our new course Ruby Bits will be released to the public with captions in place.

In the meantime, I’ve added captions to our entire JavaScript series- jQuery Air First Flight & Captain’s Log, A Sip of CoffeeScript, the Anatomy of Backbone.js, and Real Time Web with Node.js. I’m still improving the way the captions look and feel with help from the design team, but getting those captions in place is a step I’m excited about.

Creating captions can be a very labor-intensive process, requiring precise timestamps for each spoken line. Therefore, we reached out to the pros for help. When our course videos are finalized, usually a day or two after we live test the course here in Orlando, we ship them off to a media transcription company. In two to four days, we get back a .srt file, as seen below.

At that point, it’s time to proofread. I pull up the video in the browser and play it through, with the subtitle file open for editing. The main thing I watch for is capitalization and weird translation issues–a transcriber might write out, “If selected flights dot empty?” when adding captions to our intended message, “if selectedFlights.empty?”

Once the subtitle files are ready, it’s just a matter of adding them to the course and making sure our course apps know where to find the subtitles. This is easy for new courses rolling out, but for the older courses we’ve had to make some pretty major changes under the hood. It’s been fun diving into the guts of the courses, and I only broke one course for a few minutes!

For the curious, our next step on the caption road map is going to be our Ruby courses. We will start with the Zombies series, then move onto our HTML & CSS courses quickly thereafter.

I see the captions as being in their own sort of beta stage, so I’d love to hear feedback from anyone who relies on captions often. Take a look, and let us know how they are working for you. This is one of many ways we’re working to improve Code School and apply user feedback, so start a discussion today!