Posts

Understanding HTTP Basics

One thing that always surprises me when teaching a security class to developers is how little they understand about HTTP. Sure, everyone knows that a HTTP 500 error is a problem on the server, and 404 means the file is missing, but few actually understand how HTTP works at a lower level. This is critical to understanding most web application vulnerabilities and will help you be a much better web developer, so lets dive in!

Skip this if you have a decent understanding of HTTP. Otherwise, it will be a great refresher. First, let’s start with the super-basic before we quickly move into more advanced topics — HTTP. HTTP is the protocol that is used by web servers and browsers to communicate. HTTP is based on a request and a response.

When the you type in a webpage URL in the browser and hit Enter, the browser makes an HTTP GET request. Here is an example of what that looks like:

There are a few things worth noting in the screenshot above. Let’s take a look at the first line. First, the HTTP “verb” is GET, which is generally used to retrieve a document, image, or other internet resource. We will look at the other verbs in a minute. Next, the webpage being requested is “/home”. Anything after the “?” are parameters, which come in key/value pairs. Finally, the HTTP version is provided, which in this case is 1.1.

The rest of the lines are HTTP headers, which do things like: tell the webserver what website to retrieve, based on the domain (Host:); report the user-agent and acceptable encoding and language; and other browser-specific options.

From a security perspective, we need to be aware that parameters in the querystring get logged all over the place, so we want to make sure nothing sensitive or important goes there (think passwords, email addresses, or API keys).

Another HTTP request is the POST, which works almost exactly like the GET request except the parameters are sent in the body of the request instead of on the first line. This is good for security since these values are generally not logged by default on webservers, proxies, or other software as the request is transmitted over the internet.

Other request types are OPTIONS, HEAD, PUT, DELETE, and a few other more obscure values, however GET and POST are the most common. Let’s take a look at the HTTP response:

HTTP responses are similar to HTTP requests in that they are text based and contain HTTP headers. On the first line above, the HTTP response returns the HTTP status code. When everything is going right, this will be 200 OK. Below are the list of status codes which can be returned:

After the status code, some server headers are sent, including information about the type of server and software it’s running. Next, the body of the response contains the data we requested, which is generally HTML, CSS, Javascript, or binary data like an image or PDF.

Since HTTP is a text-based protocol, it’s easy to make HTTP requests. You can try this by running telnet and connecting to an HTTP server and then manually making a HTTP GET request. Try it yourself by typing “telnet google.com 80”.

Then, when telnet connects to the webserver, you can manually make an HTTP request by typing:

“GET / HTTP/1.0 (return, return)”

This should return the HTTP response for the homepage.

That’s it, now you know the basics of HTTP. Here are the important parts:

  • HTTP is a text based protocol
  • HTTP is made up of requests and responses
  • HTTP responses have a status code

Now that you have that covered, check out some hacking tools in the blog post Web Hacking Tools: Proxies.

jQuery vs. JavaScript

Here is a question that floats around a lot when people are thinking about learning languages or methods to bring interactive content into their web sites: What’s the difference between JavaScript and jQuery? So to understand the difference you need to look at a little bit of code.

Now, don’t worry if you don’t understand code. The main point of this is to see how jQuery and JavaScript do the same thing in different ways and what makes jQuery so much easier for some of the things you’ll want to do. Trust us. You’ll be fine.

Coding Interactivity

So let’s say we’ve made a simple web site — it just says “Hello” and “Goodbye” (not a terribly inviting web site, but it’s just here to make a point) — and we want there to be a little bit of interactivity in it. So our web site is built of three basic frontend languages. You’re going to have a little HTML, a little CSS, and a little JavaScript.

If you’ve seen our earlier video on what JavaScript is, you know it’s there to add interactive elements to the site. It can be complex interactive elements, like a clickable “button” or simpler things like changing the text color when you click on it. Those are all doable because of languages like jQuery and JavaScript.

A Condensed Way to Code

To see the difference between them, let’s look at a simple example of one application of these: making a line of text change color. If we want to do that using JavaScript, this is what the code would look like:

If you don’t code much you’d be forgiven for getting lost in all that! It’s a lot of code for one action and if you’re new to coding, it kind of looks like five lines of nonsense.

The same action in jQuery looks like this:

You can see it’s one line that says “grab this class and add this extra class from CSS to it.” Essentially, it takes all those steps you saw in the JavaScript and makes them into one command.

You can kind of think of it like this. When you have to ask someone to do a task with a lot of steps — like making a pot of coffee — you don’t tell them to do the steps again and again, you just say, “Hey, could you make some coffee?”

That’s jQuery. A group of developers said, “Look. There’s these things we have to do all the time in JavaScript an it takes us five complicated lines every time we have to do that.” And they didn’t want to write five lines every time, so they came up with a way to do that in just a line or two.

Hey could you animate this, please?

This is what we see when we look at jQuery. We see a list of familiar titles — Animate, Delay, Fade-In — all these things that would have taken lots of lines of code in JavaScript, and now you can just click on them and write them out as maybe five or six lines total. That is jQuery in a nutshell. It’s all the functionality of JavaScript, but it simplifies the process immensely.

To get started with jQuery, you just have to type this one bit of code into the header of your project:

It’s kind of like in The Matrix when Neo (aka Keanu Reeves) gets an injection of knowledge uploaded into his brain and he wakes up and is all like “I know kung fu.”

By typing this jQuery line into the top of your code, your code is all of a sudden like, “I know what animate means” and “I know what animate AddClass means” with one line of code.

Takeaways

  • jQuery is a framework that lets you write JavaScript quicker and easier.
  • The developers of jQuery created it to condense common JavaScript tasks into fewer lines of code.
  • You can code most common JavaScript actions using jQuery (and you can actually check out their API page for a complete list of what you can do)
  • It’s easy to install and get the code to understand jQuery.

Ruby vs. Python

Ruby vs. Python

Which is better, Ruby on Rails or Python and Django?

This is a question we get asked repeatedly. It’s an important question too. You’ll hear Ruby vs. Python compared all the time. If you’re unfamiliar with them, it’s an impossible question to answer. I’ve used them both quite a bit and can tell you that while they’re similar, they’re also different in some important ways.

To set the stage, I first learned web development through Python and Django. After spending four years building Django apps, I got a job doing Ruby on Rails and expected the transition to be really simple. That’s when it became clear to me that the two languages and frameworks are different.

So… How are they different?

The Language:

The Ruby on Rails web framework is built using the Ruby programming language while the Django web framework is built using the Python programming language.

This is where much of difference lies. The two languages are visually similar but are worlds apart in their approaches to solving problems.

Ruby is designed to be infinitely flexible and empowering for programmers. It allows Ruby on Rails to do lots of little tricks to make an elegant web framework. This can feel even magical at times but this flexibility can be good and bad at times. Sometimes code works when you didn’t expect it to and l5eaves you feeling really impressed. Other times the Ruby magic can make it very hard to track down bugs for hours.

Python takes a more direct approach to programming. It’s main goal is to make everything obvious to the programmer. This sacrifices some of the elegance that Ruby has but gives Python a big advantage when it comes to learning to code and debugging problems.

One great example showing the difference here is working with time in your application. Imagine you want to get the time one month from this very second. Here is how you would do that in both languages

Ruby

require8 'active_support/all'
new_time = 1.month.from_now

Python

from datetime import datetime
from dateutil.relativedelta import relativedelta
new_time = datetime.now() + relativedelta(months=1)

The Python version has you importing specific functionality from datetime and dateutil libraries. It’s a lot more explicit, but you can easily tell where everything comes from.

The Ruby version is a lot more magical. We import some active_support library and now all of a sudden all integers in Ruby now have these “.days” and “.from_now” methods. It reads well but it’s definitely not clear where this functionality came from inside of active_support. Plus, the idea of patching all integers in the language with new functionality is cool but it can also be abused and cause problems.

Neither approach is right or wrong, they just emphasize different things. Ruby showcases flexibility of the language while Python showcases directness and readability.

Web Frameworks

Django and Rails are both frameworks that help you to build web applications. They have similar performance because both Ruby and Python are scripting languages. Each framework provides you all the concepts from traditional MVC frameworks like models, views, controllers, and database migrations.

Each framework has differences in how you implement these features but at the core they are very similar. Python and Ruby also have lots of libraries you can use to add features to your web applications as well. Ruby has a repository called Rubygems that you can use and Python has a repository called the Package Index.

Community

Python and Ruby both have very large communities behind them. The community influences the direction of the language, updates, and the way software is built using them.

Python has a much more diverse community than Ruby does. There are a ton of academic use cases in both Math and Science that Python has thrived in. This gives it a lot of support in those areas and it continues to grow because of that momentum. Python is also installed on almost every Linux computer making it the perfect language for use on servers.

Ruby’s popularity really started when Rails came out in 2005. The community grew quickly around Rails and has since been incredibly focused on web development. As time goes on it the community around it has gotten much more diverse but2 it hasn’t seen the same diversity that Python has.

Usage

Who is using these languages? Quite a lot of companies. Both languages and web frameworks are pretty widespread in the tech world.

Python has been by companies including Google, Pinterest, Instagram, National Geographic, Mozilla Firefox, and the Washington Post.

Ruby has been used by companies like Apple, Twitter, Airbnb, Shopify, Github, and Groupon.

Conclusion

Anything you can do in Ruby on Rails you could also do in Python and Django. Which framework is better isn’t really a question of capability, it’s actually a question of what the support is like for you and your team.

My general rule of thumb is this:

If you plan on sticking with building web applications, then check out Ruby on Rails. There’s a very strong community built upon it and they are always on the bleeding edge.

If you are interested in building web applications but would like to learn a language that’s used more generally, check out Python and Django. You’ll get a diverse community and lots of influence and support from the various industries that it is used in.

Either way, you can’t go wrong. Almost everything you learn in Python can be translated to Ruby and vice versa. The same goes for Django and Rails. They both have supportive communities behind them. If you have friends doing one or the other, join them because you can always ask them for help along the way.


Ready to start learning? Check out these courses:
One Month Ruby | One Month Python

How Much Does a Website Cost These Days?

Launching a new business involves many details, and at some point, you will start to think about your online presence. You need a website, and not just any website, but a fully functional site that includes some form of email capture, and enough branding to tell your story. Accomplishing these goals, however, comes with a price tag, and you may start wondering how much does a website cost these days.

The majority of customers — 61 percent — are researching products online. In fact, 12 billion searches are taking place each month in the United States, making a high-quality website very important. But once you start asking for quotes, you’ll likely discover that they vary greatly. You may receive one quote for $2,000 and another for $20,000.

So what is the difference, and what’s involved in the actual process of building a website?

Breaking Down the Costs

Many web designers will explain that pinpointing the exact cost of a website project is difficult. This is mostly because there are so many different variables involved, with no two projects being identical. For example, what kind of functionality and features do you need? Is it an e-commerce site? Do you need a blog? Do you already have content created, or will you need to have it written during the design process?

You may be figuring out these answers as you go along, which is totally normal, but it’s also helpful to have a nice little starting point to build off of. Getting a general sense of what’s involved in the process, and a ballpark cost for each task, will help you estimate your overall budget and solidify your project requirements. Here’s an average cost breakdown.

Domain name. One of the first tasks on your website development list is purchasing the domain name. Costs vary, but you can expect to spend around $10 annually.

Website hosting. Your website will need to be hosted, which basically involves a company selling you space on its server to store your website data and files. Costs vary, but you are looking at about $10 to $100 annually.

Premium theme. If your developer is building your website in WordPress, you may need to invest in a premium theme. Costs differ based on the specific theme that you select, but you will likely be paying a $50 to $200 one-time fee for a beautiful looking theme that you can change up to fit your specific needs.

Website planning, design and development time. This category is a large chunk of your overall budget, and also where you’ll get the most variation in quotes. A site can take anywhere from 1 to 1,000 hours to complete; and expect to pay anywhere from $25 an hour (professional in developing company) to $150 an hour (or more). Keep in mind that you pay for what you get, but price alone won’t indicate quality. It’s a tricky dance.

Images and graphics. Your website will need graphics to liven up all that white space on the page. Basic stock images cost around $10 each, while higher-end images may cost you hundreds of dollars. While many stock image options have improved, sometimes its best to invest in custom images that fit your unique brand.

Content creation. Will you be writing content for your website, or will you need outside expertise to develop the pages? If so, budget at least $150 per page of new content.

Other Factors That Affect Costs

Sometimes, you just need a basic website to get your business off the ground. Other times, the functionality you need is more advanced, such as e-commerce capabilities or special programming. Here are a few additional costs to factor into your budget.

E-commerce shopping carts, catalogs and payment processing. If you need this functionality, plan to pay anywhere from $1,500 to $5,000.

Maintenance costs. It’s also important to think about the future of your website. Will you maintain the website in-house or seek outside assistance for maintaining the site?

What happens if the site 404s at 2am, who’s your developer 911? Put aside some budget each month for mainenance — factor it into your costs (maybe anywhere from $250 to infinity).

It’s also important to consider the benefits of a responsive design, which automatically resizes for mobile devices and tablets — an increasingly important feature as more and more people access websites in this way. Also, factor in your needs for multimedia elements. For example, do you plan to feature video on your site? If so, include this requirement when requesting a bid.

Total Cost Ranges

At this point, you may have a general sense of what’s involved in building your website and what pieces need to come together, but what should you budget for total cost? Here are the general price ranges. They are complete estimates that you might just use as a rule of thumb:

Basic website — This level will allow you to brand and market your company, showcase your products and services, and use the site as a lead-generation tool. However, it may not have two-way functionality and features such as a blog or social media tools.

Price range: $2,000-$10,000+

Advanced website — You have all the components of a basic website, but you maybe also have something extra like a super-duper fancy design layout, e-commerce (so that you can sell products), or some optimized conversion considerations (like A/B testing, and deeper analytics for your email capture).

Price range: $7,500-$30,000

Custom website — This is suited for a large business with complex Web development needs, including social networking, blogging, e-commerce and other Web applications.

Price range: $15,000-$100,000

Taking the First Steps

The best way to get started with building a website is to work to define the project scope. List what your website “must have.” What items do you need that are nonnegotiable? Then, list your “nice to have” items. Present these items to developers to get bids on the project, and based on their estimates, you can add in — or take out — some of the nice-to-haves in order to make the project work with your vision and your budget.

By defining specific requirements upfront, and ensuring that you select a developer that is equipped to deliver to those specifications, you’ll ensure that your vision and desired outcome are achieved and there are no surprises along the way.

5 Fool Proof Tips for Building a Strong Web Developer Portfolio

The demand for web developers is growing quickly. But even with this rapidly expanding demand, if you’re looking for a permanent or freelance assignment, landing the right work can feel daunting. The competition can be intense, and trying to stand out can be exhausting.

Many employers will look at your education and work history, but what they’re interested in most is your web developer portfolio. What have you done in the past, and more importantly, does your work fit their needs? Fortunately, there are steps you can take that will differentiate you from other web developers, and make landing your next position or assignment more effortless.

You likely have an online portfolio, but what do prospects think when they view it? After spending time on your site, do they feel like you’re a natural fit for their projects? Or are they left with unanswered questions? Here are some tips for refreshing your web designer portfolio when it’s not getting the job done.

Develop a specialty. It may be tempting to highlight a broad range of experiences so you will “fit” whatever the visitor is looking for, but this can be a mistake. Instead, focus on highlighting expertise for the projects that you most want to pursue. Or even better, focus on specific niches and industries. When you get specific about project expertise, the right employers will be attracted to your work, and will perceive you as a “better fit” than the majority of competitors.

Develop points of differentiation. Many designers are available for work, which can make these professionals seem like a commodity, especially in the freelance market. So what makes you different? Maybe it’s your expertise in a specific niche, or perhaps it’s the way you approach projects. Don’t be afraid to weave your points of differentiation into every aspect of your site.

Don’t showcase everything, only your “greatest hits.” Think about your web design portfolio like a greatest hits album. Many projects could be included in your body of work, but there are some projects that are stellar. Cherry-pick the projects, and displaying only a select few, rather than everything.

Highlight your skills and abilities through testimonials. Prospective employers and clients want to know “If I hire you, what will working together look like?” Will you improve their overall work dynamic and deliver excellent outcomes, or will they have regrets?

Ask previous co-workers, clients and others who can speak to the quality of your work to write testimonials. Request testimonials on LinkedIn if possible, and then leverage that content onto your portfolio site, doubling the impact.

Develop a clear call to action on every page. Oftentimes, a developer will create a fantastic portfolio, but there is no clear call to action. What should your visitor do next? Maybe it’s a “Hire Me” button for freelance projects or “Request a Quote.” Or perhaps it’s a softer call to action, such as “View My Recent Work.” Whatever it is, don’t leave your potential customer at the end of the page without a clear next step or a good idea of how they can contact you.

Portfolio Building Blocks: Finding the Missing Pieces

You’ve figured out how to make your portfolio stronger, differentiate your positioning and showcase your best work, but what are the basic elements that your portfolio should have? More importantly, are you missing anything? Here are some basics that every great portfolio should include.

Name and picture. Your site and work might be compelling, but nothing adds a personal connection like a photo of you. If you prefer not to include a photo, and it fits with your personal brand, consider including a logo that reflects your individual brand infuse additional personality into your site.

Who you are. This can be a basic “About Me” page that details your background, relevant education and anything else that demonstrates your expertise as a web developer.

Contact details. This information should be on every single page. Once you sell a potential employer or prospect, it shouldn’t be hard for them to get in touch with you. Make the experience fast and easy.

Recent work. A carefully selected sampling of your greatest work.

Social icons and networks. Encourage visitors to connect with you on social networks, whether it’s LinkedIn, Twitter, Facebook or other media.

Building a Portfolio With Limited Samples

Developing a great portfolio may appear simple for the seasoned pro with many samples to choose from. But what if you’re a relatively new developer, and you don’t have many work samples? Even if you don’t have a large body of work, you can still create an excellent portfolio.

First of all, if you don’t have a few samples to showcase, get some quickly. This isn’t as difficult as many people think. The easiest way is to handpick a few companies in the niches where you’d like to work, and offer to do a pro bono assignment for them. In return, ask the client for a strong testimonial, assuming they are happy with the work. If all goes well, hopefully they’ll hire you in the future, or at least provide a solid referral to another prospect.

Potential clients and employers won’t know the sample was completed at no cost. And more importantly, once you’ve completed a few work samples, you can upload them to your portfolio and have a starting point. A few strong projects are enough to start. Once you’re established and have more samples, you can swap out older samples and focus on displaying the most impressive work.

The Next Steps

Depending on the current state of your portfolio, there may be lots of work to do. Don’t feel overwhelmed. Select a small task to complete each day. By taking a single step daily, you will build the required momentum to create an excellent portfolio.

A web developer’s portfolio will always be a “work in progress,” but by continually tweaking it and making it better, you will become an established developer in your niches, and land your next assignments with greater ease.

Calculating Freelance Web Developer Rates

You need a freelance web developer or are thinking about freelancing yourself, but you have no idea where to start when it comes to rates. Should you pay or charge by the hour? How much does this stuff cost? You ask around, and you can’t get a straight answer.

That’s because freelance web developer rates vary based on experienced, location, and expertise. Some developers charge $20,000 per website, while others scrape by at $30 per hour. It all depends on the developer.

The trick to figuring out a web developer hourly rate is figuring out the services you need, and venturing out into the field to determine how much it will cost you. Whether you’re a freelance yourself or you want to hire one, you’ve got to ask yourself what you need done, and what you can realistically afford.

What Type of Development?

Do you need ongoing maintenance? Do you need someone to build a website from scratch? Ecommerce websites that sell online might have more needs than brick-and-mortar shops, and rates will adjust accordingly.

  • Website from scratch — Building a website from scratch is likely to be more expensive in the short term than adding on to a website that already exists. Note that it could cost more to add a content management system, have someone code in HTML5, or to be responsive on mobile devices.
  • Ongoing maintenance — All websites need ongoing maintenance, and you should be prepared to have a freelance web developer on hand to help with the creation of new pages, any issues with hosting, URL changes, and integration with marketing tools.
  • Design needs — Sometimes freelance web developers also offer design services, such as image creation for blog posts and other website pages.

Typical Freelance Web Developer Rates

There’s a wide array of rates. A new website can cost anywhere from $2000 to $20,000. An experienced freelance web developer might charge upwards $150 per hour, while a newbie might charge $30 per hour. But what do you need?

The trick is to determine your needs and set your budget first. Determine what work you need done, and decide on how much you’d be willing to pay for it. For example, you might decide that you need a 5 page WordPress website, and that you’d be willing to pay $800 for it. This will give you a basis to work with, and even if it the designers and developers you want appear out of your reach, you’ll be able to have some sort of starting point, and can adjust accordingly.

It’s also a good idea to ask any friends and colleagues for insight. How much did they pay for their website? Try to collect as much information as possible from real experiences.

You Get What You Pay For

People want to get a good deal, but everyone knows the best goods come with a substantial price tag. If you want high quality, or can provide high quality to your clients, your rates should reflect that.

When a company hires a freelance web developer, it’s typically a lot cheaper than hiring an employee. Freelancers and those who hire them should keep this in mind when it comes to rates, and not shy away when rates seem high.

For example, a freelancer might charge $10,000 to build a website from scratch, delivering it within three or four months. If an employer hires someone to do this in-house at a salary of $80,000 per year, plus benefits, this employee might take three months to build the same website, which winds up costing you $20,000, which is twice as expensive. That doesn’t include the benefits you have to provide that employee, either.

Finding Developers

Finding high quality, trustworthy developers is half the battle. If you’re searching for a freelance developer, here are some sources to turn to:

  • Your connections — Hands down, your connections are the best places to look for a freelance web developer. Who built their websites? Who do they use for ongoing maintenance? Who do they recommend?
  • Stack Exchange — Stack Exchange is a community for developers of all kinds, and tons of freelance developers hang out and exchange tips in this community. It’s a great place to tap if you have a new project and want to get the word out.
  • Guru — Guru is a freelance website that specializes in freelance developers. It allows you to post your project and your budget. It’s a good option for those on a tight budget as many freelance developers on Guru are inexpensive.
  • Toptal — Toptal is a newer freelance platform that connects the best developers with clients in need. Unlike Guru or other freelancing sites, Toptal focuses on the best of the best, only accepting 3% of all developers who apply.

Testing the Waters

Many want to understand freelance web developer rates before they hire a developer, but you may need to test the waters to understand how your rates work out in the field.

  • If you’re looking for a freelance web developer, find a few developers and get some quotes. Find a few different developers, explain your project, and ask them for a quote. How much would they charge to get it done? What would their process be? This is the best way to figure out the going rate.
  • If you are a freelance developer, test out some rates and see how clients respond. Setting rates is tough, and sometimes the best way to learn is through experience. It’s also a good idea to ask other freelance developers what they charge, and join up with some freelance communities to learn more.

Understanding Freelance Web Developer Rates

Asking about typical freelance web developer hourly rate is much like asking how much it costs to pay rent. Rent depends a lot on budget, location, and size and quality of the home. Web developer rates depend a lot on project, expertise, and quality of the freelance web developer.

Front-end vs. Back-end Developers

Do you have an interest in programming, website development, and application development? If so, then becoming a developer is a career move you may want to research. When it comes to developers, there are typically two groups to choose from: front-end developers and back-end developers. In this post, we’re going to look at the differences of each in terms of description, skills, programming languages, and earnings to help you in your decision.

Front-end vs. Back-end Developers

If you are either wondering what the difference is between a front-end developer and a back-end developer, or looking for an explanation that you can easily give your friends when they ask you what you do, here are a few ways of describing the two.

  • Think of your head. Your face would be the front-end that interacts with others using input from the eyes, ears, and nose and producing output through the mouth. Your brain would be the back-end where information from your eyes, ears, and nose is stored and where information to the mouth is sent from.
  • Think of your house. Things like the interior design, furniture, shingles, siding, windows, doors, etc. would be the front-end. The framing, insulation, beams, and foundation would be the back-end.
  • Think of your car. The engine, computer system, oil, gas, lights, etc. are a part of the back-end. Everything else is the front-end.

A front-end developer is someone who creates the front-end of a website or other application, or the part that users engage with to get to the information in the back-end. A back-end developer is someone who creates the storage and output capabilities of said information.

Let’s say that a client wanted a custom WordPress website developed for their business. The front-end developer would work on the website that is shown to visitors on the web, plus anything that the client would see and use in their day-to-day business. This includes the WordPress theme itself and any customizations needed to the WordPress admin panel / dashboard.

The back-end developer, on the other hand, would work on optimizing the database, customizing the WordPress software itself, and creating the plugins needed to create the overall functionality of the client website, whether it is a simple blog or an ecommerce store.

Skills

So what kind of skills does a front-end developer need versus a back-end developer? Both are required to do some heavy lifting in the programming department. But front-end developers need a better eye for user interface design and visual appeal than back-end developers.

While front-end developers are not always the actual designers for the user interface of a website or application, they do have to know how to make the user interface aesthetically pleasing as well as functional. They will likely work closely with a designer if they are not designing the website or application themselves.

Additional skills that front-end website developers will need beyond programming include the ability to wireframe a website layout and design, create website designs in PSD or take PSD designs and turn them into functional websites, and deploy the website to the customer or employer’s hosting company.

Back-end developers, on the other hand, have little to do with the design of a website or application. Their job is to focus on what makes everything work behind the scenes. Hence, if you are not interested in design, then back-end development should be your focus.

Additional back-end developers skills needed beyond programming include the ability to integrate the user interface created by front-end developers with the server side logic, creating reusable code and libraries for future use, application optimization for speed and scalability, design of data storage solutions, and implementation of data security.

If you know what type of developer you want to be, the best way to determine the skills you will need is to look at profiles of other freelancer developers or job listings for specific types of developers.

Browse several different freelancer profiles or job listings (preferably ones that are at the income rate you desire to make) so you can see the full range of skills you should be developing or highlighting when you approach customers or employers for work.

Programming Languages

Want to base your decision on whether you should be a front-end developer or back-end developer based on the programming languages you will need to be proficient in? Here’s what you need to know.

Front-end: There are only three front-end languages HTML, CSS, jQuery and Javascript.

Back-end developers need to be proficient in programming languages that render on the server side of a website or application. The most popular back-end programming languages are PHP, Ruby, Python, Ruby on Rails and Java. Others include .NET, C, and Perl. Back-end developers also need to proficient in working with databases like MySQL, Oracle, and SQL Server.

If you don’t have experience in any of these just yet, you may want to start by taking some beginner courses in a few different programming languages to see which ones you are most comfortable working with. Alternatively, you may want to determine what types of projects you would ultimately want to work on, then find out what would be necessary to know to work on them.

Education

Fortunately, there are lots of different ways to learn both front-end and back-end skills and programming languages. The route you take in education may depend on the type of employment you seek. If you want to work for a company full-time, you may want to browse job listings to see the requirements they have as some will require specific degrees from universities to apply.

If you want to be a freelancer or start your own company, you may be able to forgo the format university route and self-educate through online courses. So long as you can deliver proven, you do not need to show a degree to make a living. If you are starting completely from scratch, you may need to develop a few projects on your own for your portfolio to demonstrate your experience to your first couple of clients. A strong portfolio is especially important for front-end developers.

Earnings

What you will make as a developer will depend on a lot of factors. These include the following:

  • Whether you are a freelance developer, contractor, part time, or full time employee.
  • Your specialties as a developer — the programming languages you are most proficient in, the tools you are most familiar with, etc.
  • Whether you are able to interact directly with the customer, have project management skills, and are able to manage a team.
  • If you are a freelance developer or contractor, the network you use to offer your services through.
  • Where you live and where you work from (telecommute or in-house).
  • How much education you have in your specialty.
  • How much experience you have working in your field.
  • How long you have worked at a particular company as a part time or full time employee.

While there are averages you can expect in terms of salary, all of the above will factor in on whether your earnings are closer to the lower end or upper end of the echelon. Indeed.com, for example, shows the following as average earnings for specific types of full time back-end developers. Note that some of the related job titles cross over into front-end development for comparison.

You can compare these to averages for full time front-end developers. Note that some of the related job titles cross over into back-end development for comparison purposes.

As you can see, the salaries can vary dramatically based on your experience (noted by junior, lead, and senior titles) and based on your specialties. Specialties also have an effect on salary, as noted by the difference in salary between a senior Javascript web developer who outearns the senior front-end developer.

For freelancers and contractors, what you will earn will be affected by the network you market yourself through, your reviews and ratings on that network, and your competition. Here’s a quick look at what the top back-end developers are charging on networks like UpWork (formerly oDesk).

These networks appeal to customers who are looking for developers who meet their budgets, and they allow customers to find developers who charge anywhere from $10 per hour and to over $100 per hour. If you market yourself on these networks, you will have to compete with people across the gamut in terms of rates. Increasing what you charge on these networks will require you to demonstrate your skills through testing on the networks themselves, having a complete portfolio, and having great ratings and reviews.

Full Stack Developers

People who have skill in both front-end and back-end development are often referred to as full stack developers. In other words, they have a full range of skills that can be applied to the user interface and everything that makes it work in the background.

Some people consider a full stack developer not as good as a front-end or back-end developer, and often refer to the saying, “Jack of all trades, master of none.” But it’s also worth noting that the full phrase is “Jack of all trades, master of none, though oftentimes better than a master of one.”

As a developer, having both front-end and back-end proficiency means more opportunities. You will be able to apply to more contract, part time, or full time employment positions. Or, as a freelancer, you will be able to take on more projects without being limited to front-end only or back-end only.

From the customer or employer perspective, you will be able to understand projects as a whole — both how it needs to work for the user and how it needs to work in the background. You will give them one point of contact for all of their needs. And you will be able to support them when things go wrong on either side, making you even more valuable over the long term.

Demand for both front-end developers and back-end developers is continuously growing. Therefore, choosing either can help you create the career or business you have always wanted. Be sure to explore both worlds of development to determine which one is the best fit for you!

Sass vs. Less

If you’ve been in the world of web development for at least a few weeks, you’ve probably heard about Sass and/or Less.

That’s because Sass and Less are two of the most common CSS preprocessors in the industry, and are used by many web designers and developers alike.

In this article we’re going to talk about the differences between Sass vs. Less, and more importantly which you should learn as a beginner.

I’m a newb, what’s a preprocessor?

Formally speaking, a preprocessor is a program that takes in one “type of data and converts it to another type of data,” according to Shay Howe.

CSS preprocessers, like Sass and Less, convert into CSS so that web browsers can read the styles.

Some say Sass and Less are like supercharged CSS, because they are extensions of the CSS we know and love. They extend the CSS language by adding features like variables, mixins, functions, and more.

Don’t worry if you don’t understand what these words (mixin, etc.) mean yet.

What is important to understand is that using a CSS preprocessor like Sass or Less makes writing CSS easier, allows you to organize your stylesheets better, and is more maintainable.

The main takeaway: using a CSS preprocessor makes your workflow faster and more efficient. Overall, it makes your life as a designer or developer easier.

Learning a CSS Preprocessor

There are several options when it comes to CSS preprocessors, but the two most common are Sass and Less.

The good news is that once you learn one CSS preprocessor, it is not difficult to switch to another if needed.

Below I’m going to talk about reasons why you should consider each.

Reasons why you should learn Sass

Note: There is Sass (Syntactically Awesome Stylesheets) and then there is Scss (Sassy CSS). In this article, I will be saying Sass, but will be referring to both Sass and Scss.

1. Sass has better language ability.

When comparing Less vs. Sass it’s clear that Sass is more like programming. It has if/the/else statements, for loops, while loops, and each loops.

If you are familiar with writing programming languages, like JavaScript or Ruby, this will be nothing new. Except now you’re able to use them in your stylesheets, thanks to preprocessors.

Less has most of these capabilities, too. They are just not as complex.

Moreover, Sass allows you to do a more variety of math equations. And it has better selector nesting, which can help you keep your stylesheets more in line with DRY principles.

Overall, Sass has more advanced language features and capabilities.

2. Sass has Compass.

Compass is a beloved open-source CSS authoring framework.

Translation: Compass is a framework that goes along with Sass.

And people who use Compass, love Compass.

Even more, lots of big name websites rely on Compass, such as:

The problem? Getting started with Compass is not so easy. (However, there are a lot of awesome tutorials to help you out!)

Aside from Compass, there are other Sass libraries/frameworks. And, yes, there are libraries/frameworks for Less, too. (Check out a list of them all here.)

But none of the Less extensions compare in popularity to Compass.

Learn to Code Websites and Apps →

Reasons why you should learn Less

Less came to the scene after Sass in 2009. Less stands for “Leaner CSS”.

1. Setup (may) be easier

Less uses JavaScript. And you can get going with Less just by downloading less.js, where it will compile the stylesheets in the browser. However, this is not a good approach to take. (Because it will perform AJAX requests to grab the Less files, convert into CSS, and then inject the result back into head of document.)

Obviously, this is inefficient. However, if you’re just playing around and testing out the Less waters — this method will do.

Now, with both Sass and Less most designers/devs will use the command line to compile their files into CSS.

But if the command line terrifies you, fear not. There are a variety of GUI compilers available.

One last thing to keep in mind when setting up either on your machine:

While Less uses JS, Sass uses Ruby. Windows machines do not have Ruby pre-installed. Meaning setting up Sass on a Windows computer may be more difficult. (Again, this is where one of the GUI compilers could be helpful.)

2. Less is like training wheels

Many people say that Less is easier to learn than Sass. Some even say it’s like training wheels.

Moreover, Less’s syntax is more comparable to CSS. Which may be nice for people just starting out, wanting to move from CSS to a preprocessor.

The main differences between Sass and Less

Differences between the two are not massive. Here are a few key ones.

1. Less runs on JS, Sass on Ruby.

As we talked about previously, this could make a difference when setting up your environment.

Again, there are several GUI compilers available where you don’t need to venture into the command line at all.

Meaning this shouldn’t be a factor when determining which to use.

2. Less doesn’t have as many awesome frameworks, like Compass.

As mentioned previously, Less does have some extensions. But nothing like Compass — which people rally behind. In fact, some people use Sass because of Compass.

3. The way you write variables differs.

This is not a huge issue. Both store values in the same way, they just use different symbols.

Sass uses $, whereas Less uses @.

One issue that could arise for some would be confusion while using Less’s @ symbol because in CSS the @ symbol has other meanings—like @media queries and @keyframes. In CSS, the dollar sign has no other value.

In the end, this mostly it comes down to personal preference.

4. In Less, loops only allowed for numeric values.

Again — back to the more complex capabilities with Sass. In Sass you can iterate through any kind of data.

But in Less, you can only loop through numeric values with recursive functions. Being able to loop through any kind of data, like you can with Sass, is much more helpful.

5. Better nesting in Sass

Both Sass and Less allow nesting, but Sass takes it a step further by allowing you to nest individual properties.

Still unsure? Go with Sass.

Unless you are working with something that relies on Less (like a certain frontend framework), go with Sass.

Yes, the learning curve may be steeper at first. However, most agree that Sass is better in the long haul bauce:

  • Sass has a better language syntax
  • Sass has more features
  • Sass has Compass (and other frameworks to choose from)

Basically, Sass is next level.

At the end of the day, using a CSS preprocessor (any preprocessor) is better than using none. It’ll speed up your workflow and make your styles more efficient regardless.

Plus, you can always switch later on. Just start using one.

Which team are you on? #teamsass or #teamless?

Why You Should Learn jQuery Before JavaScript

I’ve put in over 200+ hours teaching HTML, CSS and JavaScript in the classroom. With each new class of incoming students inevitably someone will ask, “Which should I learn first: jQuery or JavaScript?” Great questions! I’ve experimented teaching jQuery vs. JavaScript both ways and have come to the conclusion that learning jQuery first is the way to go. Here’s why.

What’s the difference between jQuery and JavaScript?

jQuery is a JavaScript library. If that means nothing to you, then let me put it another way:

  • jQuery is a set of tools, written in JavaScript.
  • jQuery is a way of writing JavaScript quicker (…for doing certain types of things).
  • jQuery allows you to do more, with less JavaScript

Learn jQuery First

For beginners, jQuery is likely the right tool for the job. It solves most problems that a beginner developer (and even more expert developers) have. Here’s a few examples of student requests that come into One Month:

  • I want to build an interactive gallery
  • I want to build a Todo list
  • I want to add a fading out effects to my project
  • I want to add some animation to my project

And for all those: jQuery is the right tool!

Learn JavaScript First

With that said, there may be some reasons why you’d want to learn JavaScript first:

  • If you already understand all of the above.
  • If you’re already super motivated to learn and motivated for the long-run (ie. willing to commit 50+ hours). JavaScript will give you a much more solid foundation than learning jQuery.
  • If you have a desired problem that you already know jQuery won’t work for

Decide to go with JavaScript first, and you may get a stronger foundation in the language. But my concern here (from my teaching experience) is that students who start with JavaScript quickly get demotivated. Because the learning curve to build something is higher.

Learning JavaScript before jQuery is like learning Latin before English.

Is one better than the other?

Nope. They’re just two different ways to solving problems.

Think of it like this:

jQuery is like learning how to cook first using a microwave. Sure, you can reheat and prepare quite a few meals using the microwave, but it’s not really “cooking”. You wouldn’t cook Thanksgiving dinner in the microwave, right? Having an education in JavaScript will allow you to understand the fundamentals, as well as when it’s best to use jQuery, and when it’s best to use JavaScript.

So if you’re looking to build something quickly, and it’s not too complicated, you can get started right away using jQuery. If you want to do a deeper dive, take what you’ve learned in jQuery and expand your knowledge by digging into Javascript.

Javascript can be harder to learn and seem more challenging up front. That’s why, as a teacher, I often recommend starting with jQuery — because you’ll also be learning Javascript fundamentals along the way!