Learning to Code - Choosing a Language
Based on all the feedback I’ve been getting from interviewing all the Developer Mentor Program, the first problem that comes up when someone decides they want to learn to code is often “Where do I begin?” This should help all the #learntocode2012 people narrow down what you want to learn.
Backend vs Frontend
Web programming is divided up into two sides (you may have heard these terms before); front end and back end. The frontend includes everything the user sees and interacts with. The backend provides all of the functionality, storage, and business logic for the application/website. If you really want to be able to build things from scratch by yourself you’ll need to learn both sides. That may sound daunting, so my advice is to start small and break it into manageable chunks.
Choosing a language
Now that we know generally what the frontend and backend are we can start deciding what language(s) to start learning.
When I read the Backend vs Frontend paragraph I thought…
1) “Frontend! I want to be able to make things pretty and useable”
2) “Backend! I want to create awesome features to solve problems”
3) “Dammit I want to learn both now get on with it!”
If you answered (1) or (3)…
Frontend languages for modern websites and web applications:
html
you probably took an introductory course to html at some point in your life. If not, right click on this webpage and select “view source.” That’s html and it’s what gives a webpage something to look at.
css
this makes said webpages pretty. It styles all of the elements on the page and determines the look and feel (sexiness)
javascript
This is what drives those subtle interactions you probably never realized. It’s what allows you to make things feel “snappy” and “fast” and prevent lots of page loads. It can do a ton of other things, but the reason it’s cool is that it’s baked into all browsers.
*I didn’t mention html5 as a separate item because it’s still part of html. Personally, I don’t use many html5 features simply because it does not support older browsers and majority of the interactions I need to create can be done in javascript. Not everyone has the latest version of Chrome you internet hipster!
If you answered (2) or (3)…
Backend languages for modern websites and web applications:
Python
It’s no secret, I love me some Python. It was my first scripting language and I find it to legible, expressive, and relatively easy to grasp. It has an incredible community and a well developed web framework called Django.
Who uses python?
- Youtube
Ruby
Ruby has become the backend language of choice for a large amount of the web applications you see out there today. People who want to build web application fast and furious (many startups) use the Rails (you may have heard of RoR or Ruby on Rails) web framework. It does a lot of magic behind the scenes so you spend less time configuring and more time building.
Who uses Ruby on Rails?
- Every startup on the east coast ;-) (no but seriously though, there is a huge demand for ruby developers in the startup community)
PHP
PHP has been around for awhile. That’s about all I’m qualified to say about it. It’s a proven backend that has been used many times over, but recently I’ve noticed that it has fallen out of favor in the startup community (which is largely python, ruby).
Who uses PHP?
- Facebook (you may have heard of them)
Javascript
What!? I though this was a frontend language! Well that’s half true. With the arrival of NodeJS, good ol’ javascript has a new job of playing backend. That means you can write backend functionality in javascript (which many of you may already know).
Who uses Node?
- The good folks at Shelby.tv
- There’s definitely others, feel free to leave me a comment about it
Which one should I go with?
If you want my advice (and you should), go with the one that the people around you are using. If you have some buddies that know Python, go with Python. I already pointed out the languages I would recommend (notice they are all open source, scalable, community-driven, and awesome), but having access to a community of local developers is really important. Why did I learn python? Because my brother and Jordan know python. Simple as that. Just make sure you pick from the ones I recommend above.
* Please no fanboy comments about which language you think is better. That’s cool bro, go code in that.
One More Thing
Stop worrying about which language to learn and just pick one. Using my nifty guide from this post, whichever language you pick, you can’t go wrong. You can build amazing things in any language. It’s the craftsman, not the tools.
Reset CSS in a Specific Element
I’m using a charting library that was getting mangled by my global css (foundation css and jqplot). The charting library’s css had certain elements that weren’t styled, but the global css I wrote does. Rather than go into the charting libraries css and make the modification to override each specific css element that was causing it to choke I decided I wanted to reset the css just on the problem area. This way I don’t have to worry about updating the charting library and all my css getting messed up plus I have a reusable method for dealing with these kinds of issues in the future.
Note: For the most part if you have this issue you should probably just override the things that are messing up your styles into a css class. However, in my case it was easier and reusable to do it this way. I’m sure there are other use cases for doing this too!
The Code
Just take one of the fine css resets out there and make a class from it:
.reset{
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
}
Now in my problem area I can do something like this:
<div class="reset" id="chartdiv"></div>
Boom, only this div’s style get’s reset and my chart is functioning again.
Find of the week: Foundation CSS
Foundation is an awesome responsive css framework from Zurb. I usually use 960gs, but after playing with Foundation for 5 minutes I decided to use it for my current project.
Here’s an example of it: http://nudgelystaging-qu6we2kn.dotcloud.com/
Why is it cool?
It will automatically resize your layout based on the screen size or device. For example, once the browser width reaches a certain size it will switch to a single column layout. You can customize your layout based on the device that is viewing the site too. That makes it exceptionally awesome for building a website that looks great on all platforms without having to build your own mobile site by hand. Click my link above and shrink your browser window to see what I mean.
Switching from 960gs to Foundation
The switch from 960gs to Foundation was pretty easy. All that really changes is the inclusion of a script and syntax changes for specifying your layout. Instead of “grid_12” you would put “twelve columns.” Additionally you have to specify a “row” with <div class=”row”> which I thought was cumbersome at first but is actually easier. You won’t have to clear your floats with a <div class=”clear”> like you would with 960gs. Even better, Foundation makes nesting infinitely easier than 960gs because you don’t have to fumble with the alpha, omega classes for nested grids. <3
What about the other UI stuff?
I tend to write most of my own UI stuff, but there are some useful things in Foundation for prototypes such as tabs, buttons, and modal dialogs. There is a nice jquery content slider which is pretty cool, but I don’t have much use for it. I did test it out and it was easy to get up and running. They have some good defaults for making quick prototypes, but for the most part you’ll be styling your own.
Compass and Foundation
Lucky for us compass users, there is a plugin for compass that get’s you set up with Foundation. You can find it here.
