Quantcast
Channel: Free Code Camp's Learn to Code Blog

Free Code Camp's New Challenges: Short, Interactive, Browser-based

$
0
0
During our first two months, we learned a lot about our community by talking with them and observing their behavior. Based on these insights, we've completely overhauled our challenges to be:

  • Short - You can finish each challenge in a single sitting.
  • Browser-based - You'll start coding immediately, without installing anything.
  • Fully interactive - You'll code 100% of the time.

A picture of a worker spreading mortar onto bricks while building a brick wall.
Our new modular challenges mean you can build your skills brick-by-brick over time.

These challenges represent your first 100 hours of coding. They help you establish a baseline understanding of coding tools and best practices. Along the way, you'll have the support of a community of busy people who have made learning to code a priority.

Then the real learning begins. You'll set up your development environment, form a team, and start building projects for nonprofits.
A picture of Free Code Camp's curriculum: 100 hours of challenges and 900 hours of building projects for nonprofits.
The first 100 hours of coding challenges give you a baseline to prepare you
for the 900 hours of project-oriented learning to follow.

We look forward to hearing your insights, answering your questions, and pair programming with you!

Hello world! Now what?

$
0
0
Almost every programmer I know started out coding by building a simple Hello, World! app. I did the same, but wasn't really sure where to go from there. Not that I didn't hear plenty of suggestions. Some people recommended that I work through coding challenges, while others suggested that I cut my teeth on a tutorial site for beginners. Some people simply told me to dive right in and build a website for a friend or family member in need.

But while I’m sure we all have a niece who would love to have a website to help her hawk cookies for Girl Scouts, it turns out there are many non-profits in the world who don't have much of a budget for I.T. who would love to give me a chance to build something for them.

A picture of the Free Code Camp chat room, with a tab with hundreds of campers' icons visible.
Enter the community for busy people learning to code. 


I found Free Code Camp in a roundabout way, via their blog post about a month ago that warned against the temptation to switch languages or frameworks frequently, as well as against learning too many tools at once. The post resonated with me, so I decided to learn more about the curriculum FCC was offering.

Free Code Camp is unique in several ways. Unlike in-person coding bootcamps such as General Assembly and Hack Reactor, Free Code Camp charges no tuition and has no admissions criteria. What they do have is a free, self-paced, JavaScript-centric curriculum with a mix of custom designed challenges and interactive tutorials from the web, plus a community of budding developers waiting to work alongside you.


A picture of two programmers, one male, one female, in their 30s, pair programming in the office of Pivotal Labs/
Pair programming, both in-person and virtual, is widely practiced at companies like Pivotal Labs. 
It is a cornerstone of the agile software development movement, and the best way to learn to code. 

This last point is what stood out to me the most. FCC emphasizes using virtual pair programming to build real things for real companies. These companies are registered non-profits who submit project ideas through their website. Students (AKA Code Campers) then go through roughly 100 hours of educational challenges before teaming up to code real applications and websites. Some Code Campers already work as full stack developers, while others are grandmothers just getting started. This gives coders just starting out a powerful technique to gain development experience that is portfolio worthy, while also giving them the satisfaction of helping a non-profit in need.

I immediately dove into the recently revised curriculum and began networking with other Campers from all over the world. It seems like no matter what time of day, there is someone signing in saying “Good morning!” at the same time that others bid adieu for the night. It is a network of intelligent, creative students who have the desire to learn to code and build real apps in the process.

It has been an inspirational month at FCC, and after a couple hours on the phone with Quincy Larson last week, I have decided to join the team as a non-profit liaison. Since I am conveniently located in Washington, D.C., surrounded by non-profits of all shapes and sizes, my goal is to spread the word about this talented group of developers looking to code for a cause.


Michael Johnson lives in Washington, D.C. You should follow him on Twitter or visit his website.

Transparency in Action: Free Code Camp is now Open Source

$
0
0
We're thrilled to announce that Free Code Camp is now fully open-source. Now you can fork our code base and use it to set up an educational community of your own. If you notice a bug or think up a way of improving Free Code Camp, you can now take action directly by submitting a pull request.

Our Code

I originally built Free Code Camp in Ruby on Rails, because I was comfortable with it. But it's been clear for a while now that JavaScript is the future. New tools like Node.js and Express.js have made it possible to move to a fully JavaScript stack, and that's precisely what lots of schools and companies are doing.

A big part of Free Code Camp is eliminating noise and helping busy people focus on learning one opinionated set of tools. Since we were learning Full Stack JavaScript, a non-JavaScript codebase sent the wrong signal. So I scrapped the Rails app, learned enough asynchronous Node.js to be 'dangerous', and started building.

Quincy's "Fortress of Solitude" - the closet where he codes. A sparse table has his laptop and second monitor, plus a note pad and a mug of tea.
The closet office where I built Free Code Camp Version 0.1.0.


I looked at Meteor.js and Mean.js (this was right before the Mean.io fork), and even considered just using Angular.js with a Google App Engine backend. But ultimately, I decided to go with the Hackathon Starter App. With its authentication suite and API integrations, it's practically a framework in itself.

I launched Free Code Camp a few days later, with nothing more than five coding challenges and a Hipchat room. Slowly people started to come by. Miraculously, many of them stayed!

The original navy and orange colored Free Code Camp landing page, with its headline of "Become a Software Engineer"/
What Free Code Camp looked like when we launched about 10 weeks ago.
Free Code Camp was my first Node.js app. I showed the code to one experienced JavaScript developer who kept shouting "What the hell were you thinking here?" as he flitted through the codebase. As hacky as it was, he conceded that since it was serving thousands of page views a day without incident, it wasn't a total embarrassment and I should go ahead and open source.

So we installed Helmet.js for added security, moved the API keys to a .env file, and purged them from Git history. And voila, the exact same code Free Code Camp uses in production is now freely available here.

Our Infrastructure

We were using just one (free) Heroku dyno, but since we occasionally exceed 20 concurrent sessions, we kicked it up to two, for $35 a month. We serve assets through S3 and have a small AWS instance for our Discourse-powered forum.

We pay a combined $240 per year for a Vimeo Pro account and a Screen Hero account, and $60 for a single Google Apps for Business team account. This brings the total cost of all our infrastructure to less than $2,000 per year.

Our Volunteer Camp Counselors

We're a community of busy people learning to code. We call ourselves "Code Campers".

Some of us Code Campers are even busier than others, because we volunteer our time to actively improve Free Code Camp. Our team of "Camp Counselors" hangs out on our chat room and our forum. We do our best to welcome newcomers and answer various coding questions. Our single goal is to maximize the number of busy people like us who are able to work their way through our challenges, build a portfolio of projects for nonprofits, then get a coding job.

A list of the 12 Free Code Camp volunteers and their respective roles taken from freecodecamp.com/learn-to-code
Some of our patient, enthusiastic Camp Counselors.
Nobody gets paid anything. If we eventually accept funding or make money through a job board, we'll figure out a fair, transparent way to distribute equity to our volunteers or start paying them.

Most of our communication takes place through our chat room and our frequent pair programming sessions. We're geographically distributed, but we meet in person when possible. Our Camp Counselors propose new features and content, discuss the priorities and details, then pair up and start building. This blog post, for example, has been edited and improved upon by several Camp Counselors.

Our Metrics

In less than 3 months, we've grown to nearly 5,000 Code Campers. But what we're really proud of is not the quantity of our Code Campers, but the caliber of their work ethic. A bunch of people with work, school, kids - and even grandkids - are investing their precious time toward learning to code.

We completely overhauled our curriculum three weeks ago, and since then, we've had hundreds of people work through our hour-long challenges. We've made all these metrics publicly available here.

As a side note, if you're interested in analyzing our (anonymized) data, or helping us better visualize it, we'd love to facilitate this.

Our Future

Don't expect any stealth initiatives or grand unveilings from us. We're more interested in evolving out in the open, like the internet did, than making an explosive debut, like the atomic bomb did.

We believe the Open Source refrain that "With enough eyeballs, all bugs are shallow", and welcome any ideas you have for making Free Code Camp a better, more efficient place for busy people to learn to code.

In closing, I'd like to compare Free Code Camp's philosophy with that of Ubuntu. Not the Ubuntu Linux distribution that powers much of the internet, but its namesake, the Ubuntu philosophy of Southern Africa. Ubuntu is a Zulu word that translates roughly to "I am what I am because of who we all are."

A picture of Leymah Gbowee
Leymah Gbowee, the Liberian peace activist and Nobel Peace Prize laureate responsible for Ubuntu's most widely accepted English-language definition.
Free Code Camp is what it is because of who our Code Campers are. Busy people helping each other learn to code. And that's who we'll be going forward.

2014 in Numbers - My Life Behind the Command Line

$
0
0

For 2014, I decided to simplify my life. Rather than pursuing a variety of human experiences, as I had previously, I wanted to focus my energy on a few key activities that gave me happiness: reading, running and coding.

Here's my 2014 resolution post from Facebook (be sure to click 'See More'):

Along the way, I spent a month capturing and transcribing 20,000 sound bytes for a movie line search engine that nobody ended up using. I also shut down an online course recommendation engine I'd built with my friends.

But good things happened, too. I built a lightning-fast academic citation engine. And more importantly, I helped kickstart a movement of busy people learning to code by building projects for nonprofits.

Could I have done this while working my old full-time corporate job? Probably not. So I'm definitely grateful I saved every penny so that I could get out of there.

But enough talk. Let's move on to what you're really interested in - my 2014 data:

The numbers

  • Hackathons rocked: 7
  • Hours on laptop: 3,221 (91% of which were somewhat productive or highly productive)
  • Nonfiction books read: 17
  • Kilometers run: 1,935
  • Average hours slept: 7:35

Hackathons

Hackathons are a great way to:
  • meet ambitious coders 
  • practice building and pitching products
  • and familiarize yourself with new tools. 
I participated in the following Hackathons in 2014:

Hours on Laptop

Free Code Camp doesn't have an office. Wherever I open my laptop is work. I read books off an iPad and don't really attempt to do anything productive on my smart phone, so the hours with my laptop open are a decent proxy for hours worked.

Not counting in-person meetings, it seems I work about 55 hours per week. I know this because I use a tool called RescueTime to track exactly which applications or websites I have in focus. 

For example, I know that I had either RubyMine (my IDE) or Terminal in focus for 1,288 hours in 2014, and that I spent about 290 hours doing entertainment-related activities like playing speed chess or watching YouTube.
A chart of Quincy's time on his computer for 2014: 40% software development, 11% communication, 9% entertainment, 8% learning, 6% business
The final RescueTime report for my laptop usage in 2014.

A chart with a daily breakdown of Quincy's computer activities by hour. A majority is software development throughout the day, with slightly more entertainment in the evenings.

My productivity seems to pick up around 10am after I've settled into my venue for the day and dealt with email and social media. I'm far less productive after 7pm.

I also know that, as a developer, I google a lot. You can see how much you google here.
A chart of Quincy's Google search volume. He averages between 50 and 100 google searches per day.
Google doesn't provide annual stats, but this visualization gives you an idea of how dependent I am on the service.  

Wellness

I know from my Sleep Cycle data that on average I went to bed at exactly midnight and woke up at 7:40, which comes out to slightly more than 5 full 90-minute sleep cycles.

So I met my sleep resolution. But what about the other key aspects of wellness, diet and exercise? I don't track calories because I haven't yet found a good passive way to do this. But I do track my running.

In August, I got distracted while crossing an intersection and landed on a curb the wrong way. I had to stop running for 6 weeks to let my foot heal. This, combined with travel, meant I only managed about 1935km for the entire year (the equivalent of 46 marathons). My goal was twice that.

Quincy's beaten up running shoes.
I buy two pairs of Merrell Mix Master Move Minimalist shoes every Cyber Monday. Somehow they make it through the whole year.

Reading

I decided to do tweet-length summaries for each of the nonfiction books I read this year:
















Resolution for 2015

I'm pretty happy with my simple new lifestyle. Running is fun and free, and it gets me from meeting to meeting in the city. Great new books come out every week, and the quality of insights will only grow as authors apply more quantitative, Data Science-style approaches. Pair programming is an awesome way to get to know people. In fact, I rang in the new year while pair programming with another Code Camper in Korea.

So my 2015 resolution is to try and maintain these raised standards for myself. That said, I'm going to do my darndest to reach to 4,000 kilometers this year.

Everyone at Free Code Camp now has a Portfolio

$
0
0
We're happy to announce that everyone at Free Code Camp now has a free public code portfolio!

You've been working hard to complete our coding challenges and build JavaScript apps. Now it's time to show the world your progress!

Your new Free Code Camp Portfolio includes:

  • Your name and where you're based
  • Your 140-character bio
  • Links to your Twitter feed, LinkedIn profile, CodePen projects, CoderByte badges and Github account
  • A list of which Free Code Camp challenges you've completed, and when
  • A portfolio of up to 3 websites you've built, with a link and a screen shot for each

Your Free Code Camp Portfolio is a free, personalized link that can serve as an all-in-one showcase of your progress as a coder.

Jen The Best's portfolio page
Jen was one of the first Code Campers to completely personalize her portfolio page. Congrats, Jen!
Your portfolio will also indexed by search engines, giving you further exposure and boosting your personal brand as a coder. You can make your portfolio show up higher in search results by linking to it with your other social media profiles.

Now you own a piece of Free Code Camp. Your profile will be located at freecodecamp.com/[your username]. You can customize it at www.freecodecamp.com/account.

You'll also notice we've added Angular.js to Free Code Camp and "angularized" all our web forms. This should make it easier for you to customize your public portfolio.

So we're finally a proper MEAN Stack app (MongoDB, Express.js, Angular.js, Node.js)! A big thanks to Camp Counselor Terakilobyte for spearheading the effort to implement Angular.js on Free Code Camp!

If you see any places where Angular.js could be used within our app, fork us on GitHub and submit a pull request. We'd love to Angularize the entire app!

100 Days of Free Code Camp

$
0
0

A birthday cake with the number 100 on it

The earth has rotated 100 times since we started work on the humble Node.js app that would become Free Code Camp.

In that time, our community of coders has exploded, thanks mostly to word of mouth. We haven't advertised or paid anyone anything. The only things that have exchanged hands are knowledge and enthusiasm.

Here's the community of Campers' current progress through our challenges:

Free Code Camp stats: days since launched: 100, Nonprofit projects: 24, Code Campers with at least 3 points: 1828, 10 points: 518, 30 points: 157, all 54 points: 30
Our key performance indicator is not how many campers we have, but how many are sticking with coding.

And our analytics comparing the past 30 days with the 30 days before that:

Free Code Camp's Google Analytics results for January VS December - all metrics are up, with a growing percentage of visits from returning users
Our analytics all seem to be heading in the right direction. The two months of data displayed here constitute more than half of Free Code Camp's life so far.

A lot has happened since Halloween. We've:
  • launched Gitter.im chatrooms that have grown to represent about 4% of all Gitter accounts
  • created a Discourse-powered forum
  • refined our curriculum of free, interactive, browser-based JavaScript courses.
  • open-sourced our codebase and received a ton of contributions from our Campers and well-meaning non-campers alike

The Next 100 Days


Here are our priorities for the next 100 days:

Helping Campers Complete NonProfit Projects

We've started our inaugural Nonprofit Project intake and will match more Campers with Nonprofit Stakeholders in a couple weeks. We're optimistic that our Nonprofit Projects will result in an engine of developer education and social good that increases the wellbeing of all involved.

Further Improving the Accessibilty of Free Code Camp

Some of our Campers are deaf or blind. They've been helpful in identifying our accessibility shortcomings. As a community, we're collaborating to make Free Code Camp a place where everyone can learn to code.

Kindling Bonfire

We're building Bonfire: our own in-browser JavaScript challenges. These challenges allow you to edit code in the browser and safely run it. This tool will grow to allow for easy creation of Codecademy-style interactive coding lessons.

Expanding our Live Code content on Twitch.tv

The audience for our weekly Live JavaScript Pair Programming sessions grown each week. We'd like to expand our Twitch.tv programming to include all kinds of coding, such as:
  • contributing to open source libraries 
  • pair programming on coding challenges
  • reviewing new libraries
  • building browser-based games

A Big Thanks to all our Campers!

Even though many of our campers have finished the first 100 hours of coursework, there is still a lot of work ahead in preparing for their first coding jobs. We're looking forward to documenting all the challenges we encounter and sharing them with our community and with other schools, right here on our blog.

In the meantime, keep making new friends, and keep coding!

A Vision of Coding, Without Opening your Eyes

$
0
0
I'm a coder. I'm also blind. Blind as a bat, you might say. And I was born this way.

When I mention this to my fellow human beings - the ones who've never suffered any form of visual impairment - they usually ask one of following questions:

  • Then, how can you even read what I'm typing?
  • Wow. How are you even able to code?
  • Or, the crowd favorite - Do you dream?

I get these questions again and again. So let me answer these three questions in this blog post. I'll try and sketch out an image for those of you who are curious about accessibility, and how blind people use computers to code, and to do the work of the 21st century.

A picture of Florian Beijers, also known as Zersiax
This is me: Florian Beijers, or Zersiax, as I'm known in coding circles. I'm told this is a good picture of me.



How do you even know what I'm typing?


I like this question, because it allows me to immediately explain how blind people actually use computers.

A lot of people are under the impression that blind people require specially adapted computers in order to get anything done. Even some of my fellow Visually Impaired Persons (VIPs) tend to think this.

Well let me debunk this myth right here and now. I am currently typing this on a normal Dell Inspiron 15r SE notebook, which can be bought in any laptop store that sells (somewhat less recent) laptops. The machine runs windows 8 (not my personal choice, but UEFI is too much of a pain to downgrade). All I did to adapt it was install an open-source screen reader called NVDA(www.nvaccess.org).

A screen reader basically, at its most basic level - wait for it - reads the screen. It tells you the textual content of the screen with a synthesized text-to-speech Siri-like voice. Screen readers also allow for the use of a braille display, a device that consists of a line of refreshable braille cells that can form letters according to what content is highlighted on the screen.

David Strathairn and Dan Aykroyd coding in the movie "Sneakers"
David Strathairn played Irwin "Whistler" Emery, a blind hacker and phone phreak, in the 1992 thriller "Sneakers". The character interfaced with computers through a braille display. 

This is really all the adaptation a blind computer user needs. Using this program, I can do many things you probably wouldn't imagine being able to do with your eyes closed, such as:

  • Browsing the web using Firefox
  • Writing up reports in Microsoft Word, then marking them up to conform to college professors' stringent layout demands.
  • Writing up snazzy blog posts like this one
  • Recording, editing, mixing and publishing audio (My hobbies include singing and making music) 
  • Using audio production apps like Reaper, Goldwave, Audacity and Sonar
  • Coding websites and applications using Eclipse, (the ironically named) Visual Studio, and good old NotePad++

The reason I'm naming all these mainstream technologies is to show you that I can use them just like people who aren't ocularly challenged.

If you're writing the next big application, with a stunning UI and a great workflow, I humbly ask you to consider accessibility as part of the equation. In this day and age, there's really no reason not to use the UI toolkits available. It's a lot easier than you may think. Yes, these include the Android Activities, iOS NsViews and HTML5 widgets you may be thinking of.

I joined Free Code Camp a few weeks back and really loved the concept. I've been pursuing a degree in Computer Science for the last few years, and had failed a semester that involved a lot of work with the MEAN stack. So I was really happy to find such an amazing community to be a part of and learn with. I'm sure I'll pass my semester with flying colors this time.

I sadly ran into accessibility issues when working through the by now famous Dash tutorials (http://dash.generalassemb.ly) by General Assembly. The tutorials are undoubtedly good, but were completely unreadable for me because they chose to embed all their text in image slides that lack any textual description or content for screen readers to work with. Recall that screen readers read out textual content of the screen. They aren't smart enough to interpret graphics.

Fortunately, some fellow campers at the Free Code Camp were sympathetic towards my plight and volunteered to transcribe all these slides for me. This offer left me 'flabbergasted', as our dear western neighbors across the sea would say. I'm very grateful for the work these people have done to further my studying. You guys know who you are. Thanks a lot!

But ...how do you code?


If left paren x equals five right paren left brace print left paren quote hello world exclaim quote right paren right brace.

This is how a typical if-block in a Java-ish programming language would be read to me. You can see that it's rather verbose. I tend to turn off the notifications for parenthesis and brackets until I find I need to match brackets while debugging, so that I don't go crazy from the rather wordy descriptions of these signs. Others have solved this problem by substituting the default 'left brace' for something like 'lace' or 'begin', just to save a few milliseconds. The rate of speech is extremely fast for people who aren't used to it.






For those of you who can't follow this, it's my computer reading out the first bit of this very blog post that I'm writing in NotePad++.

So, how I code doesn't actually differ all that much from how others code. I've learned how to touch type, and mentally conceptualize my code so that I can work with it just like you guys do. The only difference is that I barely ever use a mouse for anything. I tend to stick with hotkeys and the command line instead.

Sadly though, in this field, all is not well. Premier tools that coders use every day, like the IntelliJ editor, as well as all its offshoots (PHPStorm, WebStorm, PyCharm), are completely inaccessible, due simply to the fact that the developers of these programs have not adhered to the accessibility guidelines. They've failed to give screen readers textual labels or accessibility descriptions to work with. The same goes for applications like SourceTree, which is slowly getting better, but is still a pain to use.

I therefore have to keep looking for tutorials, programs and tools that are accessible, and cannot simply pick up any off-the-shelf IDE.

How do you dream?


I promised to answer all three questions, so I'll keep that promise. Don't expect anything too resounding, though.

I dream just like you guys do. My mind translates experiences and impulses I've received during the day into dreams I have at night. The difference being that I don't actually see anything.

Instead, I hear, smell and feel everything, just like in real life. The reason for this is simple: dreams based on visual imagery pull from your already stored visual knowledge to construct that visual imagery. Since I've been blind since birth, I have no visual frame of reference. The visual portion of my dreams run into a big fat 404 error: image not found.

Code with me


A Free Code Camp volunteer asked me to write this blog post to share my way of doing things with the world. After the welcome I've received from this community, I was all too happy to write this. I really hope you guys have learned something from it.

I could talk about this for hours, and this article has already grown far longer than I initially planned. If you have questions, come find me in the Free Code Camp chatrooms. I am Zersiax there, and I can be found by that name on Twitter as well. Thanks for reading this. I'll see you later! (Sorry. I really couldn't resist that one) :)

Closer to Code, Closer to Dad

$
0
0
I never actually thought I could understand code. To me, code was some complicated language that people learned through years of trial and error.

Even though it turns out that's largely true, I have no regrets about starting my long journey toward mastering code. Already, this journey has already begun to change my life.


Tindall in an ornate-sleeved red blouse, hugging a wall.
I'm a photography enthusiast and coder-in-progress.

It started one evening about a month ago. I was trying to push through some algebra homework. My dad texted me about this new coding community he'd discovered. At first, I thought my dad had gone crazy. He wanted his daughter - who had barely been able to pass math class since the fifth grade - to try to learn to code. It seriously did not make any sense. It wasn’t until I created my account on Free Code Camp and started working on the first few challenges that I realized how cool coding really was.

Numbers and letters petrify me. Add in some symbols and you have mass hysteria. But the scary part about starting to code was that I actually seemed to understand some of it.

It was a feeling that words really can’t describe. Free Code Camp's interface was fun and user friendly, and it looked like a program I could actually handle. I mean, my dad had already zipped through and finished his 100 hours within three weeks, so you know it has to be cool.

Not only has learning to code helped me get over my fear of numbers (math just scares us all sometimes), but it’s helped me start to learn and understand high school math better. I'm proud to say that I've pulled up my math grades since I started coding, and my thinking process has changed tremendously. This change has been so drastic that my math teacher constantly asks me if I've written answers down somewhere on my hand. That's probably the greatest feeling in the world.



Tindall's portfolio page, showing links to her Twitter account and GitHub account, along with several completed challenges and 14 points.
My Free Code Camp Portfolio page.

Coding has also gotten me so much closer to my father. In the past year, our family has gone through some tough obstacles, and it really has not been easy. Since I started to code, my relationship with my dad has gone to new heights. We send texts to each other daily with words of encouragement or just a simple, ‘I love you’. We also share the ‘lightbulb’ moments we reach together by working on code. It truly is the best thing that has happened to us in a very long time. Coding has given me my dad back, and I am so grateful for that.

Picture of Tindall with her dad, Chris Hutchinson
Me with my dad, Christopher Hutchinson.

Free Code Camp, in the eyes of a teenager, is a community where anyone and everyone can belong. At first, it shocked me to see how everyone in the forums was ready to jump in and help if I had a question or encountered a bug. You really become thankful for the people you meet and the friends  you make on your coding journey.

Thank you Free Code Camp for not only helping me to do better in school and get closer to my dad, but also for introducing me to the world of coding. Conquering these 100 hours is going to go by so fast, thanks to you. I can't wait to start working on the nonprofit projects!

Tindall lives in Florence, South Carolina. You should check out her photography and follow her on Twitter here.


An Overview of Modern Discussion Tools, and Why We Decided to Build Our Own

$
0
0
Our chat rooms are a fun place to hang out, make friends, and get fast help. But knew early on that our campers wanted a less synchronous place to discuss articles and share their projects.

We needed a modern discussion tool, with upvoting, commenting, threading and search, that could be further indexed by search engines.

Since we're Pragmatic Programmers, and we did our best to avoid Not Invented Here syndrome. We resolved to give every product on the market a fair shot. So first we tried all of the following:

Reddit Subreddits





Pros:

  • You can create a subreddit and configure it in less than an hour.
  • Subreddits are free, reliable, and managed by Reddit.
  • Subreddits serve as a discovery mechanism. Other Reddit users may stumble upon your subreddit.


Cons:

  • Reddit's pages are filled with distracting buttons and ads, constantly drawing your users' attention away from your content.
  • It requires a Reddit login and password, and active session.
  • Reddit gets the backlinks, not you.



Discourse 





Pros:

  • Discourse has Tons of features and a powerful admin panel.
  • Discourse automatically backs up images and nightly database dumps to AWS S3.
  • You can deploy Discourse to AWS and configure it in a few hours using Bitnami.


Cons:

  • You need to know Ruby on Rails in order to customize and maintain a Discourse instance.
  • Discourse wants you to do things its way. For example, you can't disable any of its hotkeys.
  • Discourse is slow. Even on a small EC2 instance (~$700/year), and the app just crawled, regardless of how few people were using it.



NodeBB




Pros:

  • NodeBB is written in NodeJS, and as a result it's fast.
  • NodeBB was designed to work with Redis, and this shows in the schema design. The MongoDB support feels 'bolted on'.
  • NodeBB It gets better every day thanks to an active development community.


Cons:

  • We couldn't get it to work on Heroku with MongoDB, and couldn't find any documentation as to how we might do this.
  • NodeBB does a lot of things, but none of them particularly well.



Telesc.pe




Pros:

  • Telesc.pe is nearly identical in functionality to Hacker News and Reddit


Cons:

  • You have to use Meteor.js to customize and maintain it.
  • Last time we tried, Telesc.pe wasn't able to run on Heroku, despite buildpacks that were supposed to allow Meteor apps to run on Heroku.



Camper News





After trying all of these solutions and finding them suboptimal for our campers, we decided to give up and build one of our own.

Pros:

  • Campers can start posting and commenting immediately without having to leave Free Code Camp or creating extra logins and passwords. 
  • Campers' posts and comments link back to their Free Code Camp portfolios, raising their profile within the community.
  • Each submission and comment becomes a searchable artifact that campers can find and use in the future.
We can observe aggregate behavior, A/B test, and use collected data to make Free Code Camp a better place to learn to code.

We stayed as close to the conventions that work on Reddit, Product Hunt, and Hacker News. Our main departure was limiting all comments to 140 characters. Short comments are faster to read and less intimidating to write. They encourage you to make one clear point, which makes it easier for others to respond to you.

Camper News will continue to evolve as we get feedback from our campers. It's already open-source, but we may go a step further and task some of our campers with factoring it out into a stand-alone app.

Check out Camper News here. We're looking forward to reading your articles and comments!

(Note that we'll do a technical writeup of Camper News after we finish transitioning it - and the rest of FreeCodeCamp.com - to a one-page React.js /Flux / Loopback app).

Kopernik Retrospective: My First Nonprofit Project at Free Code Camp

$
0
0
A few days ago, we marked our first nonprofit project at Free Code Camp as shipped. It was a big milestone (both for us and Free Code Camp as its first delivered project). I feel very happy for being able to deliver a working piece of software, but also because the experience has been great and a first for my career. Kopernik has opened my eyes to how technology, even in its simplest forms, can impact the lives of thousands of people, and how we can all be part of it.

Free Code Camp




First, I’ll recap what Free Code Camp does:

Free Code Camp is a community of aspiring web developers. It focuses on full stack JavaScript, and its curriculum has two parts. The first being different free courses found all over the web (soon to be in-house), corresponding to roughly 100 hours, and the second part is making real world projects for nonprofits, which accounts for, also roughly, 900 hours. This way, both campers and nonprofits benefit from the projects, and there’s no money involved in the process. It’s a win/win for everyone.

The Kopernik Wonder Women's Initiative



After finishing the challenges (Free Code Camp’s curriculum) I got assigned to a project (yay!) along with other fellow camper, Alex. Our project was for a nonprofit called Kopernik, with operations in many countries of Asia, but in this case it was for the Indonesian branch. What Kopernik does is to bring clean technologies to very poor and remote regions of eastern Indonesia, helping women and their families improve their lives and empower them with a business. You can find more watching this video:



The problem


"For Kopernik to measure the impact of this project and improve our project methodology, we need to record sales data from our agents as well as some data about the end users of the technologies. Later, we interview end users to determine to what extent the technology has improved their lives. 
"However, our sales agents and area coordinators work in regions where access to the internet is limited, unreliable and slow. Users generally have minimal experience with computers and devices. Sales data is gathered from our agents using paper receipts, but getting that data into a format that Kopernik can use create meaningful reports is a complicated process."

As you can see, this project posed many challenges, including inexperienced end-users and adverse conditions for a web app. Ultimately, this problem translated into a data capture app that was able to work offline with automatic uploading when a connection was available, since in the regions described it can go out for weeks. This had us researching a few days before we decided to go with a Chrome extension, so we could leverage Chrome local storage and have background services running. We also chose it because a web browser is a familiar interface and enabled us to do automatic updates using the app store. Once this was decided, we were ready to start coding.

Amber, our Nonprofit Stakeholder and MVP






Our biggest advantage while doing the project was having Amber (@amberau on Gitter) as our stakeholder. For starters, she was super excited with the project and offered us all the help we needed. She was prompt to get us all the fonts, graphics, requirements, translations and accounts needed as we were making progress. Also, she was very proactive in promoting the project to her colleagues, so we could get as much feedback as possible.

Additionally, Amber is a web/software developer with many years of experience, and she was very quick to pinpoint bugs and usability problems. This helped us move forward and ultimately deliver a better app. Furthermore, she always made us feel like a part of Kopernik itself, and we were really happy knowing that this project was going to help their cause. It made me really hope I could work for a nonprofit like this full-time in the future.

Challenges and Teachings





Of course, one of the ideas of doing a real world project is to have the opportunity of learning and put to practice all the things learned while doing the challenges. On this context, it helped me a lot improving my HTML and CSS skills, since the form itself is very custom in its format. Trying to get the layout right wasn’t so easy as we thought initially. It also helped me a lot understanding some UX concepts, as we added many visual features and and did many modifications while the project moved forward. Some evenings were spent just reading docs, but the rewards are worth it.

About the challenges we faced, I’d say that more than code-related problems that happen all the time on every project, the big challenge was getting in sync with my partner, as some tasks were interdependent and doing git merge sometimes didn’t have the expected result. I also missed pairing a bit more, to be more aligned about what we were doing. But I think that experience also helped us define in a better way the tasks that were being assigned and segment the code so it was easier to work in parallel, a real need in every project in which more than 1 developer is involved.

The Project





The project consisted of two sub-projects: a frontend app, in the form of a Chrome extension, and a Backend app, which exposes an API endpoint for receiving data sent from the form app.
On the front end side, there’s the form, using normal HTML and CSS (no pre-processors), a script for handling network status and transmission of the data, another script for handling storage functions using Chrome local storage API and another script for handling form interactivity and validation. The only dependency used was jQuery 2.1.3 for handling selectors, visual feedback and Ajax.

Also, there is a build step using Gulp that minifies HTML, CSS and JavaScript files, and optimizes images and fonts. The final size of the extension once packed was 85KB including jQuery.
On the backend side, the app uses Node.js (0.12.1) with Express.js for the API endpoint. Received data is validated with an API key (for security) and stored into a remote MongoDB database using Mongoose. A process then retrieves the stored data and converts it into a .csv file, which in turn is uploaded to a remote sFTP server. In a future, it will have a tighter integration with a CRM system.

The app itself runs on Heroku, and the deployment is handled by Wercker, which adds test capabilities (not used yet) to the build and decouples the source repo with Heroku app repo. An additional tool used was adding New Relic (free tier) for performance and downtime monitoring.
The source code will be available soon once we make sure no references to the production servers are found in the code.

Final Thoughts






It really fills me with joy being able to be this far with the project and with Free Code Camp. Working with Kopernik has been one of my best experience doing a project and I really hope it can help the foundation improve their logistics and reach. Certainly, I want to keep improving the app and adding more features as needed, though I know I’m not required to do so.

I also want to thank Michael and Quincy for giving us the opportunity of doing projects like this and making Free Code Camp better everyday. Here's a video that Amber at Kopernik created as a thank the Free Code Camp community:







Lastly, I think that doing projects like this will, undoubtedly, help anyone pursuing a career in web development improve their chances of landing a job in the future, and made me reaffirm I’m on a good path too being a part of this bootcamp. Now, on to the next project.

Cristián Berríos is a full stack JavaScript developer in the making, based in Mexico City. You should follow him on Twitter here.

Free Code Camp Now Has an Official Theme Song

$
0
0
Our Twitch.tv channel has a virtual jukebox. People gathered there to watch us code can request literally any song available on Youtube, and it will be played as background music on our stream.

And despite the millions of songs out there, one song seems to come up again and again. This English-language song was posted 6 months ago with little fanfare by a German software developer named Patrick Hund (@Wiekatz on Twitter). Give it a listen:




For those of you without headphones handy (or with the compulsion to immediately stop it), I've transcribed the full lyrics to "JavaScript Coder":

The meeting with the product owner is finally done
I spent most of it browsing Twitter for news on the latest libs and frameworks.
Now I'm back at my desk
I put my headphones on
Now the terminal input prompt heeds my command
I do a catchup merge from the Github Origin
Got a grunt watch waiting for me to do the task at hand

Chorus:
I'm a Javascript Coder
I code JavaScript
I'm in the zone right now
Feel like an alchemist

Give me gulp or grunt?
Give me backbone marionette
Should I go for Angular or Ember.js?
Knockout, react or Vue?

To make a single page web app
The planet's awesomest yet
There's a world of wonders out there on the world wide web
So much to try out and so little time
Scrum master stay off my back
I need to figure this out step by step

(Chorus)

(spoken) Require.js, Knockout.js, Backbone Marionette, ES6, Underscore.js, Gulp, React.js, Angular.js, Ember.js, Grunt, Web Components, Lo-dash, Express.js, jQuery

I'm just a middle aged guy with two daughters and a wife
I love them dearly with all of my heart
I'm a regular family man
But when I open up my Macbook Pro, it's a different life

(Chorus)

I'm a JavaScript coder 
I'm living the dream
I build worlds with my code
And I do it for my team

"JavaScript Coder" probably won't win any Grammy Awards, but it does provide insight into the life of a pretty representative JavaScript coder. The author is "just a middle aged guy with two daughters and a wife" who works in software development. Similarly, most of Free Code Camp's developers-in-training are over 30, and many of them have kids. If they don't already spend their work days in meetings and at a desk with headphones on, they soon will.

The central conflict of "JavaScript Coder" is the series of tooling dilemmas that pervade the JavaScript world. JavaScript recently became the most popular language, and is experiencing an unprecedented Cambrian explosion of "libs and frameworks". "Give me gulp or grunt?" and "Should I go for Angular or Ember.js?" are common tooling questions. Staying up to date with these tools is serious work, hence the author's Twitter research creeping into his meeting time.

"JavaScript Coder" also talks about the mainstays of the agile development workflow. The office he works with uses Scrum, the most popular agile methodology. His day is peppered with meetings with the Product Owner and Scrum Master. For more details on how Scrum works, watch this excellent 15-minute video:





Most importantly, "JavaScript Coder" conveys the passion that JavaScript coders feel toward their work. Lines like "when I open up my Macbook Pro, it's a different life", and "I build worlds with my code / and I do it for my team" reflect the constructive, collaborative ethos of today's web developer.

He even goes so far as to allude to being "in the zone". This is more than just an expression for being in a productive state. It's akin to entering a "flow state". Flow states are the brainchild of Claremont Professor Mihály Csíkszentmihályiare, and the subject of a growing body of psychology literature. To reach flow state, you need difficult creative work that demands your full attention and effort. It's a state of extreme productivity that writers, composers, and yes, coders, strive to achieve.





The exhilaration of his flow state shines through in the video's illustrations:






It gives us great joy to christen "JavaScript Coder" as Free Code Camp's official theme song. Can you write a better song about JavaScript? Tweet us a link, or better yet, come to our Twitch.tv channel chat room and request it on our infinite jukebox!

Happy coding!

Our 1,600 Hour JavaScript Coding Curriculum

$
0
0
How do you prepare someone for their first coding job while they're still working full-time or raising kids? And do it completely in a browser? For free? Well, here's how we're doing it:

Free Code Camp's full 1,600 hour JavaScript curriculum.


Waypoints

Our Waypoints are single-sitting coding lessons. We don't use tutorials or Lynda-style video series. We use fast-paced, fully interactive lessons. They "hold your hand" and help you rapidly establish a baseline proficiency that you'll expand upon in our practice projects.

Rather than create our own lessons, we've curated the best lessons from around the web, from providers like Stanford, Codecademy and Node School.

You'll learn all this, in this sequence:
  • HTML
  • CSS
  • Bootstrap
  • jQuery
  • Computer Science
  • JavaScript
  • Chrome DevTools
  • Angular.js
  • Node Package Manager
  • Node.js
  • Express.js
  • MongoDB
  • Git
Our waypoints include Codecademy's new HTML, CSS and Bootstrap primer, as well as their new Angular.js course.

Node School is an open source, command-line-based series of JavaScript lessons. Setting up a Node.js development environment on your computer is a pain, especially if you're using Windows or a ChromeBook. It's impossible to do on a tablet. So we've figured out ways to quickly get Node School lessons running in Cloud 9's browser-based code editor.


Michael Reddock is a camper and Sales Engineer at IBM in Austin, Texas. He integrated Node School with Cloud 9 and QA'd all the lessons.



Bonfires


Four months ago, we set out to build an algorithm scripting platform to replace HackerRank and CodeWars. We knew that if we focused, we could build a tool that did one thing better than anyone else did: JavaScript algorithm training.

We built Bonfires from the ground up, emphasizing speed and usability. We now have 46 algorithm scripting challenges that take anywhere from 15 to 90 minutes. These take you on a guided tour of data structures, design patterns, and even functional programming.

Our campers pass hundreds of Bonfires each day, and we're on track to have 100 different Bonfire challenges by the end of 2015!


Ashley Drake is a camper and former transcriptionist in Vermont. She coded our Bonfires' Mozilla Developer Network documentation integration.



Ziplines


Before you dive into full stack JavaScript, you'll get more practice with front end development.

Ziplines challenge you to build a series of single-page apps using front-end frameworks like Angular.js.


Suzanne Atkinson is a camper, Emergency Medicine physician, and triathlon coach in Pittsburgh, PA. She designed and coded several of our Zipline challenges.


Ziplines also present you with your first foray into interpreting ambiguous goals. Professional developers need to cope with ambiguity. They need to get help effectively by reading documentation, searching Google, and asking experts on IRC and Stack Overflow. So we give you open-ended Agile User Stories, and force you to ask questions, explore your options, and grapple directly with ambiguity.

All of our Ziplines are built in CodePen, a powerful browser-based editor for building static JavaScript apps. Like GitHub projects, CodePen projects can be shared and forked.


Alex Dixon is a camper who has a B.A. in English from UC Berkeley. He created some of our most challenging Ziplines.

CodePen doubles as front end development portfolio. It's another way to get discovered. When your app gets featured on the front page of CodePen, thousands of developers, and potential employers, will see it.


Basejumps


Basejumps give you the full stack JavaScript practice you need to eventually build solutions for nonprofits. You'll build CRUD (Create Read Update Delete) interfaces, RESTful APIs, and even Real-time Communication apps.


Geoff Storbeck is a camper and web developer based out of Columbus, Ohio. He designed and coded many of our Ziplines and Basejumps.


Our goal is to simulate the experience of sitting down in front of a blank page. Basejumps crank up the ambiguity even further, forcing you to make an array of implementation and design decisions.

Thanks to tools like Github, Heroku and Cloud 9, you can build these apps and deploy them to the internet from literally any device with a browser.

Nonprofit Projects


By this point, you will have:

  • 200 hours of core curriculum in full stack JavaScript development
  • 200 hours of algorithm scripting practice, and your own solutions to a hundred of the most common "white board" job interview questions
  • 200 hours of front end development practice, and more than a dozen single-page apps on CodePen
  • 200 hours of full-stack JavaScript development practice, and several dynamic web apps deployed to the internet


And this is just the half-way point!


See the Pen Simple Calculator by Geoff Storbeck (@GeoffStorbeck) on CodePen.

Next, you'll get paired up with another camper and work with Agile Project Managers to build full stack JavaScript solutions for nonprofits. Many of our campers have already done this.

Don't let anyone tell you learning to code is easy. Learning to code takes time and hard work. But with our rigorous curriculum - and our supportive community - you can get good enough at coding to land your first coding job in about 1,600 hours. You don't need to quit your job or pay some school a bunch of money. You just need to sit down and do the work.

Free Code Camp now has Local Groups

$
0
0
Our open source community was born online. And our campers are adept at using the internet to communicate. Most of this communication is just short text messages back and forth. But there's a lot of it.


A screenshot that reads "Over the past 24 hours, 4,502 messages have been posted by people, plus another 475 messages from integrations, and 43 files have been uploaded. There are 222 people reading and 106 people posting out of 2,801 people on your team.
We switched to Slack 3 weeks ago, and already a lot of our campers are active on here.


A screenshot showing a chart from our Slack. 122,000 messages have been shared since we started, with 52% of those messages in our channels, 2% in groups, and 46% in direct messages.
To put this number in perspective, Harvard's CS50x course, which has hundreds of thousands of enrolled students, launched a Slack in March. Our total message volume is already double theirs.


A screenshot showing Free Code Camp's twitter profile. We have 92 notifications, 1,069 tweets, are following 35 people, and have 12,800 followers.
A lot of our campers use Twitter to communicate, too.


Still, there's something about hanging out with people in-person. You get higher-bandwidth communication. You can sketch things out on a whiteboard. You can play ping pong. You can give each other hugs or high fives.

Our community is scattered across the globe. The closest most of our campers have come to "hanging out" is pair programming together on Screen Hero.

A world map of where our campers are located. In some places, like Australia and Africa, we have as few as 120 total campers, but in other places, such as North and South America, we have as many as 33,000.
More than half of our campers live outside the United States.


But that's about to change.

The Power of Meeting In-person


We've always encouraged our campers to go to hackathons and after-work coding events. Many of them live in cities with Hackerspaces or Makerspaces where they can rub shoulders with other coders.

In big cities like San Francisco, there are coding-related meetups several nights a month. (photo from Girl Develop It)
But telling our campers "go check Meetup.com" is only so helpful. From the beginning, we've wanted a tool to connect you with other campers in your city, so that you can coordinate going to big events together, and even plan events of your own.

We considered Eventbrite.com and Meetup.com. We experimented with coordinating local groups on our (now retired) forum. We even investigated a "Campers Near You" feature to our main site.

Ultimately, we decided that the best solution was a tool that you're probably already familiar with - Facebook!

A screenshot of Free Code Camp's Atlanta Groups's Facebook Group page. It shows Stephanie Jackson Brown has recently updated the description, and has the Free Code Camp banner as its wallpaper.
Camper Stephanie Jackson Brown created the Free Code Camp Atlanta Group, 

Yes. Facebook. That baby photo sharing app that your parents use. That app that swallows up nearly a quarter of Americans' time spent on the web.

Well it turns out that Facebook has a really well-designed Groups functionality. It's ideal for managing local groups.
  • It's free
  • It has easy-to-use event creation, member management, messaging and photo sharing
  • Almost everyone already has a Facebook account, so joining the group is as easy as clicking a button
See for yourself. Join the Free Code Camp group in your city (or create one if it doesn't exist yet) here.

We look forward to lots of hugs and high fives in the coming weeks!

Why I dropped out of Free Code Camp

$
0
0
I worked through Free Code Camp's curriculum, contributed to its open-source codebase, then got a coding job much faster than I expected. These days I'm busy juggling being a dad, husband, and full time software engineer. So I've decided to drop out of Free Code Camp.

I arrived at Free Code Camp six months ago with a newfound seriousness. I was done merely dabbling in self-study. I was firmly committed to my goal of becoming an employable junior developer as quickly as possible.

I'm Branden Byers. I'm a 31-year-old dad, husband, and software engineer.

My Journey


I first started tinkering with code when I was in elementary school, sitting behind my family's first computer: a Macintosh Centris 610. Hypercard was my casual intro to coding. A brief diversion into C++ scared me away from lower-level languages. Then I began making websites and fell in love with my first real text editor: BBEdit.

In middle school, I joined my school's first-ever student webmaster team. And in the late 1990's I was paid $500 to design a website for a nonprofit. I had gone pro.

In high school, I received $500 to build this site in raw HTML.

My teenage years brought distraction. When I returned to HTML, I found that CSS and JavaScript had joined the party. My days of being a simple webmaster were over. The added complexity CSS and JavaScript led to me giving up on coding. I rationalized that I didn't want to grow up to be a programmer because I didn't want to sit behind a computer all day.

After high school, life led me in what I thought was a more creative direction than coding. I studied abroad in South-East Asia. I went on to get a Bachelor's degree in Theatre Arts from the University of Iowa.

I iterated through many callings: waiter, massage therapist, playwright, mask maker, photographer, podcaster, and published cookbook author. Most of these weren't successful. Aside from the intensity of writing a book under a tight deadline, none of these paths challenged my brain like I craved. I became frustrated with my lack of purpose.

My Fermentation Handbook. I also have a fermentation podcast and website.

Through all of this, coding slowly crept back into my life. About three years ago, I started learning Ruby. But after more than six months of self-study, I felt more lost than when I began. I returned to Ruby off-and-on, but it never really stuck.

I spent way too much time considering which languages and frameworks were most important to learn. A lot of the time, I was skeptical of how much I was actually absorbing. And then I rediscovered JavaScript. I'm not sure how or when, but about a year ago, I decided JavaScript was for me.

By this point I was a stay-at-home dad with my toddler son. I would often stay up late or rise early in order to cram as much self-study into my day as possible. My biggest challenge was not my lack of sleep, but my lack of structure.

When I'm accountable to someone, I feel I can accomplish anything. But when I'm completely independent, my plans tend to become scattered.

Finding Free Code Camp


I searched for structure in books, in long-form video tutorials, and in ad-hoc curriculum suggestions from blog posts. And then, in October 2014, I saw a tweet about a new community called Free Code Camp. I immediately signed up. I loved the structure and the concept of working on real projects with nonprofits.

But I continued to jump between my different programs and styles of structure. I rarely joined in on discussions in Free Code Camp's chat rooms. I became an occasional Free Code Camp lurker.

Still, I had a strong desire to whip myself into legitimate developer shape. I knew I needed accountability. I forced myself to join discussions in Free Code Camp's chat rooms.

Soon I discovered that some of the campers were volunteering by contributing to its open source codebase and nurturing its community. This was a great opportunity for me to participate with a purpose.

The late night discussions. The pair programming. These were the transformational moments, when I journeyed out of the darkness of independent study, and into the light of shared challenges.

I soon realized that I wasn't alone in my struggles. What I'd previously thought were inadequacies in my own intelligence turned out to be common stumbling blocks that all people encounter when practicing the art and science of writing code.

Learning to code is a challenge. Everyone learns differently. What comes easy to one person may be difficult for another. But in aggregate, we all have knowledge to share. Each of us brings at least one experience or skill to the community - something that comes easy to us, and that we can then help others understand. And likewise, others will be there for us when we're stuck beyond comprehension.

I seem to learn best through teaching others. So I jumped at the opportunity to design a bit of Free Code Camp's curriculum. Specifically, I worked on some of the original Bonfires. Writing these algorithm challenges gave me a deeper understanding of the code behind them, which led me directly to the job that I have today.

Getting the job

Whenever possible, I attended local developer meetups. At one event, I ran into a friend whom I hadn't seen in over a year. I shared my Free Code Camp experience with him. I told him that, after having designed some Bonfire algorithm challenges, testing was finally starting to make sense to me.

My friend told me he had a friend who worked for a company that was looking to hire a developer who could write automated tests.

That one chance encounter lead to a series of interviews. One week later, I found myself with a job offer. I was hired.

My 2015 goal was to become a working developer by the end of the year. Instead, I got a job in the first quarter.

My official title is Associate Software Engineer in Test. I work on a small remote team in Madison, Wisconsin, for a company called Interactive Intelligence. I code primarily in Angular.js, Node.js, and Protractor. The work is challenging and rewarding, and I get paid better than ever. Thus far, a career in code is everything that I had hoped it would be.

I'm surprised with how seamless the transition was from camper to worker. Could I have gotten a job without Free Code Camp? Eventually, sure. But Free Code Camp provided a far denser experience than in my roughly 24 previous years of dabbling in tech.


A selfy of me at my new job coding while standing on my balance board.

Going Forward


I haven't quite regained my work/life equilibrium, or the time to contribute to Free Code Camp. But I am forever grateful to all my fellow campers who accelerated me in the right direction.

Oh, and that fear I had as a kid of being a programmer sitting behind a computer all days? It was completely unfounded.

For one, I love being behind a computer, and always have. Getting paid to do this is a huge perk. And second, I don't sit, I stand. And I don't just stand still, I am moving all day on a balance board while I type. But balance boards are a post for another day. Until then, happy coding!

Acknowledging the Tower of Babel

$
0
0


This article isn't about Babel, the ECMAscript 6 transpiler (we're excited about that, too).

It's about this Babel, and it's impact on global communities:

The classic painting by Marten van Valckenborch titled "Tower of Babel"
Marten van Valckenborch's Tower of Babel

When we started our open source community seven months ago, almost everyone was from English-speaking countries. That's changing:

A table showing that English is about 81% of our language use, but Portuguese, Chinese, Russian, French and Spanish are also popular.
Native Languages of visitors to Free Code Camp over the past 30 days.

Even though non-native English speakers continue to stick with our curriculum, they are underrepresented in our Slack and Twitch.tv channels. This lead us to ponder whether we should keep Free Code Camp English-only, or open the flood gates to all the world's languages.

Some arguments for staying English-only:

  • English is the international language of business. It would be difficult to succeed as a software engineer without knowing at least some English.
  • Everyone learns English in secondary school. Some countries even require English education in primary school.
  • By forcing our campers to communicate in English, we're giving them an opportunity to practice it and an incentive to improve it.

Some practical reasons why English-only isn't optimal

  • Most of our campers are 25+ years old, and English may not have been mandatory when they were in secondary school.
  • Learning to code in a foreign language is a bit like learning archery while you're also learning to ride a horse. Some things are better learned in serial than in parallel - such as English and coding.
  • The biggest reason people quit learning to code is a lack of confidence. The biggest reason people quit learning a language is a lack of confidence. When you compound the stress of these two humbling endeavors, attrition rates skyrocket.

An archer riding a Mongolian horse.
Learning to code while also learning English is a bit like learning archery while also learning to ride a horse: frustrating and unnecessarily difficult.

Our community prides itself on accessibility

  • We're self paced so that busy parents can pause when life gets in the way. 
  • We're browser based so that our Campers working on $200 Chrome Books or public library computers can still get the full experience. 
  • We strive to be accessible to our deaf campers. Even our blind campers.

It's time we tackle the biggest accessibility issue of all: language

It's easy to pay lip service to language accessibility. Any community can drop in an internationalization package and have access to Google Translate. But that's not enough. We care too
much about our campers' experience at Free Code Camp to leave them scratching their heads at computer translations.

So today, we're announcing a global effort by volunteers from our community to translate our curriculum into several major world languages.

An screenshot of a modal announcing our new language initiative in Chinese, French, Portuguese, Spanish and Russian.
Our multilingual announcement.

Our community of volunteers is hard at work translating our open-source curriculum into Chinese, Spanish, Portuguese, Russian and French. We've also created language-specific Slack channels.

A Trello board where we are coordinating the translation of Free Code Camp's curriculum into several languages
We're using Trello boards and GitHub Pull Requests to coordinate the translation effort.

Our goal is to make it easier for campers to focus on learning to code, and to connect with others in the intimacy of their own native language.

How will transnational Nonprofit Projects work?


We're happy to report that already, several of our Nonprofit Projects have had non-native English speaking participants. Even when a developer, project manager or nonprofit stakeholder learned English later in life, we've still been able to conduct meetings and pair programming sessions entirely in English.

And these projects will continue to be English-only.

A screenshot of our nonprofit project directory with the logos of some of our international nonprofit projects.
Some of our international Nonprofit Projects.

There's no denying English's importance. But it is a mistake to keep Free Code Camp as an English-only community. It's so much more effective for campers to start learning to code in their own language, and then gradually venture out into our larger English-speaking community.

If you're interested in helping us out with this massive translation undertaking, come learn to code with us.

10 Steps to Plan Better so you can Write Less Code

$
0
0
An ounce of preparation is worth a pound of cure. That's true in medicine, and that's definitely true in software development.

Here's a structured 10-step workflow that will guide you through the app planning process, with the goal of saving you from writing a lot of unnecessary code.

Together, we'll plan out a simple "To-do" single-page web app. We'll also plan for an API backend for a future mobile app.

Here are the steps we'll take in planning out this project:


1) Create our Trello board


Trellois a fun, free way to break your planning and development process into small tasks that can be tracked.



Here's what our Trello board will eventually look like. I prefer to split my tasks into 3 columns (depending on the complexity of the project):

  • To Do - what is left to do
  • In progress - tasks that people are currently working on
  • Done - tasks that are done and ready for testing


2) Write user stories

Here are some example user stories. These will guide how we think about our app's features and functionality. Note that they all follow a similar structure: as a <person> I can <do something>. 

  • as a logged-in user I can see the list of my to-do's.
  • as a logged-in user I can add a new to-do.
  • as a logged-in user I can delete a to-do (only my to-do's - not other users').
  • as a logged-in user I can complete a to-do (only my to-do's - not other users').
  • as an anonymous user, I can register for a new account, recover my password, or log in to the app with an existing account.



3) Create our use case model

Our use case model will help us visualize our user stories so we can better understand how to implement them.


A picture of our use case model showing various use cases for an anonymous user

A picture of our use case model showing various use cases for a logged-in user


4) Create our activity diagram

Our activity diagram will show the different paths our users can take through our app.


An activity diagram showing the various paths a user can take through our application to create an account.


  • A user accesses our to-do application.
  • If the user is not logged in she will see our login page.
  • If she already has an account, she can log in.
  • If she has an account, but she forgot her password, she can recover her password.
  • If she doesn't have an account, she can create one.
  • Both "create an account" and "recover my password" will require email validation. A user can log in to our application only after she has confirmed her email address.
  • If she is logged in, she will see her to-do list (this can be empty if she hasn't added any to-dos yet).
  • A logged in user:
    • is able to see her tasks list
    • is able to mark a task from her list as completed
    • is able to search within her task list
    • is able to delete a task from her list
    • can logout.
  • The user can exit the application at any time.




5) Create our mockups

Our mockups show what our app should look like. It's much faster to iterate on a mockup than it is to do so on working code.

Some low-fidelity mockups of basic functionality, such as searching through our to-do items.



6) Choose the right technologies for our project


Because this is a single page app, we'll rely heavily - or in this case exclusively - on JavaScript. Let's use one of the most popular JavaScript stacks: the MEAN stack. One big benefit of the MEAN stack is that all of its components are free and open-source. There are also tons of resources available for learning the MEAN stack, and for debugging it when you inevitably encounter errors. 

You can have a MEAN stack development environment up and running in the cloud in less than an hour, for free.

Here are the components we'll use:


  1. MongoDB for our database
  2. Node.js and Express.js for implementing our API
  3. AngularJS, along with HTML and CSS (and Bootstrap) for our client-side application
  4. Mongoose to connect our application to MongoDB


7) Design our database schema


It's worth the effort to design a database schema, even for our simple application.

We'll have two collections: our "Users" collection will house our user data, and our "ToDo" collection will house our tasks that need to be done. One user can have zero, one, or many tasks in her to-do list, so we will have a one-to-many (1:m) relationship between our two collections.


An image of our schema, including a Users table and a Todos table, and the relationship between them.


8) Define our use cases


  1. What happens to the to-dos related to a user that deletes her account? When the user deletes her account the to-dos related to that user should also be deleted.
  2. No to-do can be added without being attached to a confirmed user.
  3. A to-do can only be deleted by its owner.
  4. No user can be added with an empty username or password.
  5. No to-do can be added with an empty task.


Things to keep in mind:


  1. Use the Mongoose middleware to remove dependent documents like to-dos when a user deletes her account.
  2. Use Mongoose validation rules on models to prevent empty fields from being added to our database.



9) Design and test our API


I used a free product called Apiary to document our API. 

Here's the syntax I used to create this simple BluePrint.


I recommend you create an account and start playing with it. If you link your GitHub account with Apiary, you can ensure your documentation always stays up to date. You'll also be able to test your data visually without the need for actually hitting your API endpoints. If you prefer to test your API from the command line, here's an example of how to do this.


Later, once you've implemented your API with Node.js and Express.js, you'll just need to set your URL in Apiary. Then you can start testing your calls. Our current host url (http://fcctodoapp.apiblueprint.org/) will be replaced by your API's URL.


A screen shot of our API documentation on Apiary.




10) Start writing code!


This is the fun part, and it will take up most of your project's time. If you need help with this, join us and learn to code.

Bianca is a Full Stack Web Developer and a camper at FreeCodeCamp. You should follow her on twitter here.


25 Coders Worth Following on Twitter in 2015

$
0
0

Our community chose these 25 coders as "Coders Worth Following in 2015":


Photo of Brendan Eich


Brendan Eich (@BrendanEich)
Invented JavaScript. Co-founded Mozilla and has served as its CTO and CEO.





Photo of Sara Chipps
Sara Chipps (@SaraJChipps)
New York City-based JavaScript developer. Co-founder of Girl Develop It.




Photo of Addy Osmani
Addy Osmani (@addyosmani)
Engineer on Google's Chrome Team. Author of Developing Backbone.js Applications and Learning JavaScript Design Patterns.





Photo of Jafar Husain
Jafar Husain (@jhusain)
Specialist in building web servers and clients using Functional Reactive Programming. Architected Falkor, a RESTful data access framework that powers most Netflix clients.




Photo of Pamela Fox
Pamela Fox (@pamelafox)
Coding curriculum designer at Khan Academy.




Photo of Eric Elliot
Eric Elliot (@_ericelliott)
Veteran JavaScript architect on a mission to end homelessness with code. Wrote the popular book Programming JavaScript Applications.



Photo of Jen Meyers
Jen Myers (@antiheroine)
Chicago-based web developer at Pluralsight. Founder of Code and Cupcakes, a series of mother/daughter beginner coding events.


                                     
Photo of Brad Green
Brad Green (@bradlygreen)
Engineering director at Google. Manages AngularJS and GreenTea. Author of the book AngularJS.



photo of Christian Heilmann
Christian Heilmann (@codepo8)
United Kingdom-based Microsoft developer. Has published books on JavaScript, API design, and accessibility.



Photo of Kyle Simpson

Kyle Simpson (@getify)
Open Web Evangelist and JavaScript enthusiast from Austin, Texas.



Photo of Sara Soueidan
Sara Soueidan (@SaraSoueidan)
CSS and SVG expert. Author of the Codrops CSS Reference and Smashing Book #5.



Photo of David Walsh
David Walsh (@davidwalshblog)
Madison, Wisconsin-based web developer and evangelist for Mozilla. Runs the popular David Walsh Blog.



Photo of Marjin Haverbeke
Marijn Haverbeke (@marijnjh)
Creator of CodeMirror. Author of Eloquent JavaScript.




Photo of Henrik Joreteg
Henrik Joreteg (@HenrikJoreteg)
Creator of Human JavaScript and creator of Talky.io and Ampersand.js.




Photo of Lea Verou
Lea Verou (@LeaVerou)
Cambridge, Massachusetts based front-end developer. Author of CSS Secrets: Better Solutions to Everyday Web Design Problems




Photo of Max Ogden
Max Ogden (@maxogden)
Portland, Oregon public data enthusiast. Creator of JavaScript for Cats.





Photo of Jen Dewalt
Jen Dewalt (@JenniferDewalt)
Creator of 180 Websites in 180 Days. 



Photo of Misko Hevery
Misko Hevery (@mhevery)
Agile Coach at Google. Heavily involved in AngularJS and JsTestDriver.



Photo of Amos Haviv
Amos Haviv (@amoshaviv)
Creator of MEAN.js and contributor to Node.js, MongoDB, and AngularJS. 



Photo of Roie Cohen
Roie Cohen (@roieki)
Contributor to MEAN.js.




Photo of John Resig
John Resig (@jeresig)
Creator of jQuery and developer at Khan Academy.



Photo of Tracy Chou
Tracy Chou (@triketora)
Engineer at Pinterest and popular Quora answerer.



Photo of Valeri Karpov
Valeri Karpov (@code_barbarian)
Maintains Mongoose.js. Author of Professional AngularJS. Coined the term "MEAN stack".



Photo of Paul Irish
Paul Irish (@paul_irish)
Works on Chrome DevTools. Contributor to Modernizr, Yeoman, CSS3 Please and HTML5 Boilerplate. Curator of HTML5 Rocks.




Photo of Chris Coyier
Chris Coyier (@chriscoyier)
Designer at CodePen. Author at Real CSS Tricks. Podcaster at the Shop Talk Show.



Photo of Axle Rauschmayer
Axel Rauschmayer (@rauschma)
Munich, Germany based web developer. Author of Speaking JavaScript.



In addition to following these coders, you should also follow @freeccodecamp. We tweet about learning to code and getting a coding job.

A big thanks to @biancamihai, @rattanak, and @serhiicss for submitting these coders to our Camper News site, and all of our community for upvoting them.

25 Free Resources for New JavaScript Developers

$
0
0
We asked our campers to share their favorite free resources for new JavaScript developers on Camper News. The list includes some time-tested books as well as podcasts and videos you may not have heard of yet.

Books


Image of Eloquent Javascript second edition cover

Eloquent Javascript is modern introduction to programming and JavaScript by Marijn Haverbeke There is also an annotated version of Eloquent JavaScript byGordon Zhu.



image of JavaScript for Cats ebook cover

JavaScript for Cats by Max Ogden is an introduction for new programmers that is so easy your human companion could do it too!




Image of You Don't Know JS Logo

You Don't Know JS is a series of books by Kyle Simpson dive deep into the core mechanisms of the JavaScript language.



image of Human Javascript logo

Human JavaScript by Henrik Joreteg is a book about a specific set of tools, patterns, and approaches optimized for people.



image of Speaking JavaScript cover

Speaking JavaScript  by Axel Rauschmayer was written to help programmers learn JavaScript quickly and properly, and also to deepen your existing skills and/or look up specific topics.




image of Exploring ES6 cover

Exploring ES6 covers ECMAScript 6 in great detail, but is structured so that you can also quickly get an overview if you want to.



Image of Cracking the Coding Interview 4th edition cover

Cracking the Coding Interview is the most popular book for preparing for coding interviews at companies like Google, Facebook and Microsoft.



image of JavaScript Allonge cover

JavaScript Allonge by Reginald Braithwaite covers functional programming in JavaScript. 





image of JavaScript Spessore cover

JavaScript Spessore by Reginald Braithwaite is written for the reader who has read JavaScript Allongé. It covers functions, closures, and prototypes.





What is Code? is an interactive essay by Paul Ford on what code is and why it's important.




image of Professor Frisby's Mostly Adequate Guide to Functional Programming cover

Professor Frisby's Mostly Adequate Guide to Functional Programming covers functional programming in JavaScript.



image of Programming JavaScript Applications cover

Programming JavaScript Applications by Eric Elliot focuses on intermediate JavaScript coding. 

Podcasts




NodeUp is a node.js podcast put together by@ffloat and @dshaw.




image of JavaScript Jabber logo

JavaScript Jabber is a weekly podcast about JavaScript, including Node.js, Front-End Technologies, Careers, Teams and more. 





Five JS Podcast is a weekly five-minute podcast is released every Thursday. You can follow them on Twitter or subscribe withiTunes orRSS.





This Developer's Life delves into different aspects of the life of developers. Patterned after NPR's This American Life, it features interviews and eclectic music.





The CodeNewbie Podcast is podcast with stories from people on their coding journey. New episodes are published every Monday. You can follow them on Twitter @CodeNewbies





Videos



Image of JavaScript the good parts cover

JavaScript: The Good Parts is covered in this YouTube video from its creator, Douglas Crockford



image of level up tuts logo

Level Up Tuts born out of the need for better instructional documentation.



image of Dev Tips logo

DevTips features weekly videos on the subject of web design and development.



Other Resources



image of repl.it logo

The repl.it project is an online environment for interactively exploring programming languages. 


image of MDN logo

The MDN JavaScript Guide is a great reference and provides an overview of the language.



image of codewars logo

Codewars provides interactive user-submitted coding challenges.



image of code combat logo

Code Combat lets you practice JavaScript syntax through a live coding strategy game. 



image of jQuery Fundamentals logo

jQuery Fundamentals walks you through common problems you'll be able to solve using jQuery. 


In addition to checking out these resources, you should also checkout FreeCodeCamp and follow us on Twitter. We tweet about learning to code and getting a coding job.

A big thanks to @biancamihai, @daylightsavings, @elliescode, @_maximization, @ovivoicu, @duttakapil, @RomuloLazarde, @MatthewHarames, @ka11away, for submitting these res to our Camper News site, and all of our community for upvoting them.

So Yeah We Tried Slack... and We Deeply Regretted It

$
0
0


Back in April, all was well with our community of busy adults learning to code. We were communicating using Gitter.im, a GitHub based chatroom system. And yet every day, someone would ask me "Why aren't your campers using Slack?"

I'd considered Slack back in October before even starting Free Code Camp, so I was well aware of its limitations. But gradually, my cool kid friends persuaded me.

First we messed around with Slack's API and found an undocumented workaround for their cumbersome email invite system, so we'd be able to automatically add campers to our Slack. Then Harvard's CS50 class, one of the most popular online courses, started using it. I thought, "OK - if it's good enough for Harvard, it's probably safe for us to switch."


Though their free tier warns that you only get 10,000 messages of searchable archive, and 5 integrations, they clearly state that there is "no limit on how many people you can add to your team on Slack." So we assumed we wouldn't need to worry about outgrowing their service. But trusting Slack's marketing would prove to be a huge mistake.

Bowing to Peer Pressure

Our campers were happy. We were finally using the premier collaboration tool! Our campers lauded Slack's hotkeys and mobile experience. They were delighted by Slack's plaid patterns and warm visual design.


Our core contributors sighed in relief. Our community was happy. Our campers were among the cool kids.

The cracks start to show

Anxiety set in as I saw how quickly we reached Slack's limits. Messages like this one appeared everywhere, in full view of our campers:



Slack's cheapest plan was $5 per user, per month. That's $5 x 12 months x 8,462 campers = $507,720 per year, just for our current campers. Until we paid, Slack would aggressively archive messages, sometimes only minutes after they were sent.

Slack's support team told us that if we wanted this message to go away, we would need to create an integration that exported the messages, then deleted them. We were fine with this, and grateful that this was an option, so we started work on it.


We also quickly maxed out our integrations, and were slowly creeping toward Slack's maximum storage limits.

A few weeks later, we hit around 5,000 campers in our Slack, and Slack's desktop apps became sluggish. Then their mobile apps became literally unusable. Then one morning I did a single @everyone mention, and Slack sent out 50 duplicate notification emails to every single camper over the next 3 hours.

Nobody complains about Slack's email notifications anymore, because everyone turned them off entirely after this happened.

And still, we blithely shepherded 300 to 500 new campers into our Slack every day, hopeful that this messaging company, now worth $2.8 billion, would hire more engineers to flog their LAMP stack application into shape. We also held our breaths as we waited for Slacks' teased support for large open source communities like ours.




The last straw

I woke up this morning to a mountain of tweets and emails from new campers saying they weren't receiving our automatically sent Slack invites. Not exactly what you want to happen three days after your community is featured in Wired Magazine.

Slack's support team was enthusiastic about helping, and kept saying the email notifications had gone out.



In my desperation, I tried to manually send out the invites. That's when I was confronted with an ominous message: "You have reached the maximum number of users".

My heart sank. Our contributors had sunk so many hours into building Slack features. We'd endorsed Slack to thousands of people on our Twitch.tv streams, and even mentioned it in interviews with the media. We were heavily dependent on their service.

In a cold sweat, I started googling. There was literally nothing on web saying anything about Slack having a maximum number of users - only marketing material saying that free tier organizations could have as many users as we wanted. Apparently, we were the first community to ever hit Slack's undisclosed limit.

I opened yet another support ticket and phoned our core contributors for an emergency Saturday night meeting to discuss our options.

Shortly afterward, Slack Support sent me this email: 


Identity removed to protect the poor support lady who was just doing her job.

Well, that was that. No way were we going to spread our community across a bunch of disparate Slack instances. The entire point of a chat room app is convenient real time conversation. Trying to remember which Slack you had to go to to talk with a specific camper would be a logistical nightmare. Just sending an email would be way faster than this.

The prodigal son returns

Even though it was 1 a.m. London time, someone from Gitter's team quickly responded to my desperate tweet, reassuring me that Gitter had no hidden maximum room size. They assured me that things "should be fine".


It's worth pointing out that Gitter is a small team. Crunchbase doesn't show them as having any funding at all. And yet they are slowly winning a battle with competitors like Atlassian's Hipchat, Basecamp, and Slack, at least for housing large open source communities.

I tried Gitter's iOS app. It was much faster than before, and included new features like tab completion on @mentions. 

Another thing I noticed is that Gitter now allows you the option of hiding your email address, something Slack has yet to implement despite popular demand and the relative ease with which this could be implemented. This was a privacy issue that we'd had to explicitly warn our campers of, but will no longer have to worry about.

A moment ago, I even received this email from one of Gitter's founders:





Gitter, like us, has embraced the power of Node.js. They are hardening their infrastructure so they can support growing open-source communities like ours. They are a scrappy startup with responsive support team (their founders).  The warmth of their response made me feel embarrassed that I had bowed to peer pressure and ever left them. In retrospect we clearly should have tried to work closer with them on our issues.



It was very strange moving back to our old Gitter chatroom. It was like a scene from The Walking Dead. Half finished conversations. Thousands of accounts standing idle.

But it feels good to be back. We're going to dust this place off and get back to helping people learn to code and land coding jobs.

Watch us Code Games Live All Weekend

$
0
0
We're streaming a nonstop game development marathon this weekend on our Twitch.tv channel.

JavaScript is a powerful and versatile technology. It's popular for web development, mobile development, Internet of Things, data visualization, and of course, gaming.

With technologies like WebGL, you can code 3D games that run right in a browser.

This weekend, our campers will build a variety of games using JavaScript-based technologies.

The show will kick off Friday at 5 p.m. EST on our Twitch.tv channel, and continue through Sunday night.

The World's Biggest Pac-Man takes the classic game to it's extremes with HTML5.

JavaScript games will run on any device with a browser, and often don't require downloading, so they are ideal for indie game developers. With new technologies like WebAssembly, these browser-based games may soon rival Xbox and Playstation games in graphics and gameplay.

The 2048 puzzle game, built by one person over a single weekend, took the internet by storm in 2014.

Many developers in our community enjoy building video games. While game development jobs are harder to come by than web development jobs, everyone can agree that game development is a lot of fun.

Follow us on Twitch.tv so you'll get a reminder when we start (and if you don't already have a Twitch account, you can create one for free in 30 seconds). We'll see you there.

Powering up with GitHub

$
0
0
As we integrate more tightly with Gitter, it makes sense for us to also make better use of GitHub.





We've ditched our old Field Guide articles in favor of our new GitHub-based Wiki, which allows for much easier article creation and revision. These Wiki articles can now be retrieved from Gitter thanks to our new Camper Bot.


CamperBot is here to help, and has already started answering campers' questions and retrieving resources in some of our chat rooms. Soon we'll introduce CamperBot into all of our chat rooms.

Starting later this week, your Free Code Camp username will be tied to your GitHub username. We will also tie other optional fields, such as your name and location, to GitHub.

This will make it easier for you to learn more about whom you're chatting with. It will also make it possible for you to give other campers Brownie Points for helping you in our help chat rooms.

One other benefit is that Free Code Camp public portfolios will be simpler to manage, and give you a consistent personal brand across GitHub, Gitter and Free Code Camp.


Our new GitHub integration will be much simpler.

By popular request, we are also hiding Bonfire Solutions from your public portfolio, and will reintroduce them later in a better way once we roll out our revamped public portfolios.

Please star us on GitHub  and help raise awareness about our open source community.

Rebuilding the 747 at 35,000 Feet

$
0
0


Berkeley Martinez was wearing suspenders and a bowtie. He looked up from his paperback copy of Dune. I was sweating from my morning run across San Francisco. "Quincy!" he exclaimed, and we initiated an elaborate, slippery handshake.

Berkeley and I grabbed a conference room in the now-defunct Wix Lounge coworking space. We clinked mugs of Earl Grey, hot, and launched into a discussion about the future of pair programming on Free Code Camp.


The Wix Lounge was an awesome free coworking space in Mission Bay.
Berkeley and I worked out of here several days a week.


Pair programming was central to our open source community of campers (people learning to code - mostly mid career professionals).

The go-to pair programming tool, Screen Hero, had been acquired by Slack, and would soon cease to exist. We looked at Together.js, which seemed promising, but it had been abandoned when Mozilla Labs shut down. And we didn't need half the features in its behemoth codebase, so maintain it ourselves wasn't a good option.

"The best interface would be right in the page," Berkeley said. "Imagine voice chat, a Google Docs-style collaborative code editor, and the ability to pass links back and forth through instant messaging. That's really all you'd need."

HTML5 and web sockets made such a user experience possible. But what happened when you completed a challenge and moved on to the next one? If your website was a traditional multi-page app, you'd need to re-establish a connection once the new page loaded. This would make for a choppy experience. Together.js solved this by allowing you to "follow" your pair from page to page. But getting suddenly jerked away from your current page was a jarring experience. We wanted it to be fluid.

"Well, we're in control of Free Code Camp's architecture," Berkeley said. "What if we make it so there are no page loads? What if we make Free Code Camp an isomorphic single-page app? Then we can embed the pair programming tools right into the page, and we won't have to worry about page refreshes when campers move from challenge to challenge."

The plan called for adding Flux and React.js to our otherwise vanilla Node.js and Express.js app. "Right now, we're making all these routes in Express.js," Berkeley said, pulling his keyboard and trackpad out of a large leather briefcase. "But if we use Loopback, everything will be an easy API call away."

I grilled Berkeley on the risks and opportunities associated with implementing these new technologies. He'd built projects with Loopback and Flux/React.js before, and was confident we could make things work.

So we pounded our now lukewarm tea and got to work.


Welding New Wings


Several campers went to see the new Avengers movie the first day it was out.
Pictured left to right: Quincy Larson (me), NodeSchool contributor Harry Moreno,
CamperBot inventor David "DC" Collier and Berkeley Martinez.


Over the subsequent months, our codebases diverged into two distinct branches - the new one, powered by Loopback, and the old one, powered by Express.js and Mongoose. New improvements started piling up on both branches. Porting them back and forth proved painful. And every time we prepped for a merge and deploy, new features crept in:

  • "Let's use Nginx and load balance across multiple PM2 instances."
  • "IO.js is faster - might as well switch to it."
  • "It's embarassing that we don't have SSL - let's implement it!"

We implemented the first two. SSL broke our web workers, so we kicked it down the road.  (LetsEncrypt is coming online in September anyway, and promises to make SSL free and trivial to configure.)


Truer words have never been ignored.

Over the next few months, we tried twice to deploy our new branch to production, only to flinch at the last minute after encountering fatal errors we couldn't reproduce on our local computers.

Finally, we knuckled down. "Code freeze on master!" someone smart shouted. Other than emergency maintenance, there would be no further changes to Free Code Camp for a month. Instead, we focused on merging all our feature branches into our staging branch, then stabilizing it.


When arriving on enemy shores, the Vikings famously burned their boats.
This produced the psychological advantage of knowing there was no escaping.
They would either conquer or die trying.

We refined our migration scripts and made other tweaks that would be invisible to our campers. In the end, we changed more than 300,000 lines of code (though some of this involved swapping out libraries that were checked into version control).


The final tally - 901 files changed, with more than 300,000 insertions and deletions.
(produced with git diff --shortstat)


We ran a beta branch for a couple weeks with a load of around 20 or 30 concurrent campers, and didn't notice any performance problems.

So finally we decided it was time to release it.
"The first 90 percent of the code accounts for the first 90 percent of the development time. The remaining 10 percent of the code accounts for the other 90 percent of the development time."
—Tom Cargill

The Red Eye

Berkeley and I met again at Amazon Web Services Loft last Thursday morning. It's rare for us to get together. In fact, most of Free Code Camp's core team members have never met one another in person.

I scarfed a bowl of cereal and Berkeley gulped down a jar of Soylent. We were going to ship tonight! I settled in for a long day of QA to finalize the branch for deployment.


The AWS Loft in San Francisco's Finance District where Berkeley and I often pair.
Decent snacks, great Wifi, and completely free.


As the hours passed, our eyes got bleary. By 4 a.m., Berkeley was literally falling asleep at his laptop. We still had bugs to fix. So I caught the early train home. After a few hours sleep, I climbed back to my desk, and we kicked off another 12 hour conference call, this time with core contributor Ben McMahon in Dublin, Ireland.

There's nothing worse than breaking production servers late at night when you're too tired to think straight. As astronauts say, "There is no problem so bad you can't make it worse." Working with servers is the same way.

So we called it a night early. We would do the deploy Saturday morning, which is a historically low period for Free Code Camp. (Apparently, people like farmers' markets and Saturday morning cartoons, too.)

When we were all set, we initiated a mongodump from MongoHub. We put up a warning on our site that during server maintenance any new progress campers made would be lost until we were done.

Berkeley's DSL was glacial. He lives in student apartments and students use a lot of bandwidth. Instead of aborting and trying it from my side, we let it run. I answered some questions on Quora and ran a 10k. Then I got the call. At 94%, Berkeley's got an inexplicable duplicate key error.

So we wrote in a try-catch block and attempted to migrate the database directly. Too slow. So we lifted all the restrictions on the number of simultaneous connections our script would try to make. The script made it about half way there, and then the connection broke again. I ran the same script from my end, and was surprised at how much faster it ran. Migration complete.

By the time we switched traffic over to our new Nginx web server, it was already midnight and we were at low traffic loads. Production seemed stable. We breathed a sign of relief and agreed to go to sleep for 3 hours.

But while we were asleep, word of the improvements spread through our chat room system and social media. Campers started coming to test out the new features.

Loss of Engine Power




By the time we were back at our desks, Free Code Camp was taking several seconds to respond to requests. We hadn't done load testing, and the most concurrent campers our beta site ever had was twenty or thirty. Now three hundred campers were wading through the molasses that had become our site.

Also, we had a mountain of tweets and emails complaining about our email authentication not working. Loopback uses its own version of Passport.js, and there were some unforeseen quirks. We made a prominent warning on each page that "Free Code Camp is slooooow today" and linked it to a wiki article we'd created about the migration.

Was it Loopback? Nginx? One of the other things we'd changed? We jiggled the proverbial cables everywhere we could, using Key Metrics, Chrome DevTools, and PM2's logging to try to diagnose the problem.

Campers toiled on our horrifically slow site, but were curious enough about the curriculum improvements to press on. Despite the sluggishness, we maintained normal Sunday traffic levels.

Someone commented about us on Reddit. This was just about the worst time imaginable for another Reddit spike, but, hey - Reddit chooses you, not the other way around.


Redditors take note: someone mentioned Free Code Camp, then got 162 upvotes.


We finally isolated the problem to our new Loopback code, which was apparently at least one order of magnitude less efficient than our old Express.js and Mongoose code. Sure enough, we were hammering MongoLab - our MongoDB-as-a-Service - and it couldn't keep up.

We did an emergency database dump. Berkeley raced to spin up a DigitalOcean instance that would serve as our new dedicated MongoDB server. We seeded our new database from the dump and pointed Free Code Camp to it. Remarkably, our average HTTP request dropped to 500 milliseconds.

And that was that. Months of improvements were now live.

We were too shell-shocked to celebrate. We had accumulated literally hundreds of GitHub issues over the weekend.

I was fading fast. I told Berkeley that if he let me sleep for the next 3 hours, I'd watch the servers for the rest of the night until Ben woke up to take over.

I spent the wee hours answering confused tweets and emails. We'd expanded our curriculum so dramatically that many campers thought we'd lost some of their progress data. Others were still locked out due to authentication issues. I went into support mode and solved as many problems as I could, all while keeping an eye on our server's response time.


In the Event of a Loss of Cabin Pressure...


Cartoon by XKCD


Ben jumped back on around 9 a.m., and so did another couple hundred campers. Ben and I started noticing our response time climbing, just like the day before. 1,000 milliseconds. 2,000 milliseconds. 3,000 milliseconds.

We woke up Berkeley and the three of us started investigating. The culprit looked familiar enough - the database was overloaded. We doubled the size of our MongoDB server, and the response time fell back down to 500 milliseconds.

At this point, everyone was wide awake. I was so wired that I had to run another 10k just to wear myself out enough to be able to sleep. Berkeley and Ben kept churning through our GitHub issues.

I woke up fully recharged in time for dinner. All systems were a-OK. Ben signed off and Berkeley and I continued fixing things. It was starting to look like we were out of the woods.

Then suddenly, around 10, our chat rooms blew up. "Is Free Code Camp is down?"

Berkeley and I were incredulous.

"What happened?" I asked Berkeley.

"Nothing. We were at healthy levels. Then just nothing."

I was SSH'd in to the server, and killed all the processes, then restarted.

"It's not working, dude," Berkeley exclaimed.

"Then do a hard restart."

"It's stuck. It says it's powering down."

"What? How do we force restart it?"

"That's what I just did. It's just not restarting."

"It's got to be a hosting problem," I said, navigating to Digital Ocean's status page. There were no outage events reported. "Please don't tell I have to call someone," I bristled, before discovering that there wasn't even a number to call - just one of those black hole contact forms.

In my desperation, tweets flooding in, I rattled off a a message to support: "We can't shut down this droplet please help ASAP!"

I watched our Google analytics drop from 250 campers to 0 while we waited for our droplet to restart. I can't begin to describe the feelings of sadness and powerlessness that overwhelm you when your site goes down and you have no idea why.


Nothing's coming out! (photo by Kuroi Hikari)


I tweet bewildered apologies back at campers who were just trying to get in some Tuesday night coding after putting the kids to bed.

Over the next hour, I quickly went to work deploying Heroku instances and frantically configuring environment variables. "That's it - we have to move back to Heroku. This ops stuff is killing me." I stood up the server, then plunked down the money for MongoLab's largest shared cluster.

We were all set to retreat to our original Heroku infrastructure. We would throw high price-performance and granular control to the wind in exchange for the simplicity and reliability of having someone else manage our servers.


If usability were the only consideration, we would all be riding around on tricycles.


And just then, as abruptly and inexplicably as the outage had begun, service resumed. "We're back up dude!" Berkeley shouted over the voice feed. "What the hell was that?"

I looked at the logs. Our servers seemed to be running fine, with sub-500 millisecond response times. I was so uncertain that the server would actually remain up that I didn't bother tweeting that we were back up. I didn't want to get our campers' hopes up only to crash again a few minutes later.

I asked Berkeley to detail steps for reseting that server if it ever went down again, and told him I'd pull another all-nighter to server-sit until Ben woke up.

The next morning, before going to sleep, I noticed that Digital Ocean had replied to my support ticket:
"After closer review, our network in the NYC3 region has received some maintenance which resulted in the intermittent loss of traffic on one of our core switches. The impact of the maintenance resulted in latency and intermittent connectivity loss. The maintenance was not listed on our status site ( https://status.digitalocean.com/ ) however the reports for investigation was updated at this time and is now concluded."
So Digital Ocean had gone down, after all, and had failed to report it. After a weekend of us crashing our servers, then frantically repairing them, Digital Ocean had managed to crash our servers for us. We'd been kicking ourselves, and in fact it had nothing to do with us at all. The outage was just a tragic coincidence.

Any Landing you can Walk Away From is a Good Landing





Our community is still dutifully reporting issues and submitting pull requests, and our core team is still crushing bugs.

Now that our backend features are merged into production, we'll be able to move more quickly toward our ideal of an isomorphic single page app that enables seamless pair programming. At least now we're all branching off of the same master branch.

Beyond invisible back end stuff, we pushed the following improvements that our campers might actually notice:

  • replaced our getting-started videos with a simple 10-minute process (using GIFs instead of videos)
  • doubled our number of HTML5 and Bootstrap challenges
  • replaced Codecademy's JavaScript and jQuery challenges with our own challenges
  • added our own Object-oriented Programming and Functional Programming challenges
  • added two new Zipline front end challenges (Personal Portfolio and Simon game), and moved our Ziplines to much earlier in our curriculum
  • completely replaced our Field Guide with a searchable, and easily-editable open-source wiki
  • made it so your Bonfire code is stored in your browser, so if you leave the page, your code will be there when you come back
  • simplified our portfolio pages. You can now click a single button to mirror your Free Code Camp profile with your GitHub profile.
  • fixed some issues with Brownie Points and Streaks
  • improved our Camper News page by removing the (mostly unused) comments and adding one-click upvoting
  • added a Creative Commons license to literally all of our images and text

These improvements are the culmination of several months of hard work by our community. A huge thanks to all of you who contributed to these new features, and all of you who will contribute in the coming months.

With your help, we'll continue our effort to make Free Code Camp the best place to learn to code and get a coding job.

If you've read this far, please take 5 seconds to star our open source repository on GitHub.


5 Ways We're Improving Thanks to Your Feedback

$
0
0
Last week we sent out a short, 3-question survey to all of you who've listed Free Code Camp under your education background on LinkedIn. A big thanks to the 400 campers who've already responded with valuable feedback, including countless success stories.

The most important question we asked was, "What could we be doing better?" Here are the five most common suggestions we got:


1. "Free Code Camp should offer me hints in case I get stuck on a challenge."


For many of our challenges, such as Bonfires, we have a hint system built into CamperBot in our chat rooms.


An exchange with CamperBot about a bonfire, where we ask for a hint and it shows a series of hints related to the Bonfire in question.


Since these hints were so widely requested, we've started work on a new "Hint" button that will provide these hints right inside our challenges.


The current Bonfire view, with an added "give me a hint" button.


2. "Free Code Camp should show me their recommended solution after I complete each challenge."


There always many ways of solving a given coding challenge. We didn't want to proscribe a specific approach. However, since this is a popular request, we've started work on a feature that will allow you to compare your solution to our solution.


The challenge completion modal with an added "compare your solution with ours" button.


3."Free Code Camp should teach me how to use my local development environment."


For most new coders, configuring a local development environment takes up a lot of time that would be better spent coding. That's why we've designed all of our challenges to be solvable right in your browser.

Although cloud-based code editors are powerful, you'll eventually want to get tools like Node.js and MongoDB running on your local computer. So we're working on a variety of wiki articles that will walk you through configuring your local development environment on various operating systems.


4. "Free Code Camp should work better on my phone."


One thing that was clear from our feedback was that campers commute a lot, and want to work through our challenges on their phones and tablets.

We designed Free Code Camp to work this way, but recently a bug cropped up that prevented challenge submission. We dove in and isolated the cause of this bug, then fixed it.

You can once again complete our challenges on your phone or tablet. This said, we still recommend coding on a laptop or desktop when possible.


5. "Free Code Camp should work in China."


Many campers reported that Free Code Camp had stopped working inside China. This was due to the Chinese government's Great Firewall, which blocks not only Google, but also its CDNs and other useful resources like Google Fonts.

We've removed all of Google's CDNs and are serving Google Fonts ourselves to ensure that Free Code Camp loads properly in China.


We also had some common requests that we don't plan to address in the near future.


1. "Free Code Camp should offer mentorship."


Jimmy Wales, the founder of Wikipedia, put it best:
"I meet a lot of young people who waste a lot of time worrying about finding a magical mentor who will help them to greatness. But greatness will only come from within you. Yes, you need to learn from others, but seek wisdom from many." 
Just as it takes a village to raise a child, it takes a community of helpful friends to elevate a coder to greatness.


A picture of men and women coding at a Free Code Camp Busan event.


Instead of seeking mentorship, We encourage you to take Jimmy Wales' advice to heart and make the most of your local Campsites, hackerspaces, and coding meetups.


2. "Free Code Camp should have reviews of other resources, such as books or tools."


We choose to spend our time making Free Code Camp better for you - not writing reviews of ways other resources could be better.

We do frequently recommend resources on Facebook and Twitter, when we are confident they're worth your time.

For starters, here's a list of 25 free resources for new developers put together by our community.


Many campers also pointed out issues that we've already solved, and apparently haven't done a good job of announcing.


1. "Navigating to my next challenge using the challenge map was a pain. There must be a better way."


We recently added a "Learn" button to our navigation bar. Now you can click "Learn" and immediately go to whichever challenge you were working on last.


2. "I should be able to skip challenges that cover technologies that I'm already familiar with." 


We want to take this opportunity to point out that you can actually skip our Waypoints entirely if you want.


A picture of a sample Free Code Camp Front End Development Certificate


That's right - neither our Front End Development Certificate, nor our Full Stack Development Certificate, require completion of our Waypoints. If you know what you're doing, feel free to dive straight into our Bonfires, Ziplines and Basejumps. We think you'll agree that these projects are where a majority of the learning takes place.


If you haven't added Free Code Camp to your LinkedIn education background, it only takes 30 seconds.



A gif showing the steps below being carried out to add Free Code Camp to your LinkedIn profile.


Follow this link, then set your graduation date as next year. For "Degree", type "Full Stack Web Development". For "Field of study", type "Computer Software Engineering". Then click "Save Changes".

Jump Start Your Local Campsite with Coffee-and-Code

$
0
0
Our Facebook Campsites are a great way to meet people in your city and practice coding. Anyone can help make their campsite more active by participating in or hosting Coffee-and-Code sessions.


Free Code Camp Montreal


Coffee-and-Code sessions are informal get-togethers where you can hang out and code with other campers in your city.

We recently polled our Local Leaders to ask for tips on hosting your own Coffee-and-Code sessions. Here's what they had to say.

Free Code Camp Surigao


Keep it Casual

Choose some times that work well for you, then create a Facebook poll to see which of those times is most popular with other campers.

Announce it in Advance

Campers come from all walks of life, but most have jobs or families that keep them busy when they're not coding. The more notice you give before your Coffee-and-Code, the more people will be able to attend.



Free Code Camp New York City


Try Different Public Venues

Don't be afraid to try a few different spots to find the best venue to hang out in. Campers have had success in libraries, coffee shops, and even bars.

Don't Worry about Attendance

People are busy. Try to block out a few hours so that campers can come and go as their schedule permits. It only takes two curious campers to have a successful Coffee-and-Code session.


    Join our Local Leaders Facebook group to learn more and post your own tips.

    Commit to Yourself. Commit to a Nonprofit.

    $
    0
    0
    In case you missed it, our October Summit was jam-packed with several big announcements about our open source community.


    A screen shot from our October Summit


    My personal favorite announcement was Commit - our new program designed to give you external motivation in your quest to learn to code, as well as the opportunity to help nonprofits right away.

    Here's how it works:

    You pledge to donate monthly to a nonprofit until you've earned your Front End or Full Stack Development Certification. 


    A Union Jack flag with the slogan "Keep calm and Commit"

    The faster you achieve your goal, the less you'll donate overall. In the meantime, you'll start helping a nonprofit right away (before joining a Pro Bono Nonprofit Project) and feel external motivation to code every single day.

    It's a win-win for everyone.


    A notebook with the text "if you commit to nothing, you'll be distracted by everything"


    It's easy to get distracted when you're learning to code. There are so many languages and tools to choose from. And let's be real here - so many Netflix shows to watch.

    Commit will help you narrow your focus and reach your goal faster.

    Your Code Portfolio will reflect which nonprofit you're supporting and how much you've pledged. We'll also keep a running total of the amount pledged by our community, tracking the impact we're making on nonprofits everyday.

    We've already completed over $420,000 in pro bono web development. If just a tenth of campers pledge $10 a month, we'll also raise more than $100,000 per month for nonprofits. Now that's coding for a cause.

    Free Code Camp will always be free. But if you need some skin in the game to stay on track, choose an amount you can afford and commit today.



    Michael D. Johnson is the Nonprofit Guy at Free Code Camp. You should follow him on twitter.




    Latest Images