CGI Room.nu

People who devote themselves into Computer Programming are often called: WEB DEVELOPERS

As common as it seems, there are many successful stories which proves that web developing is a decent profession that is both challenging yet fulfilling. Some are self-taught and others are learned through hard education.

In this article I would like to focus on the self-taught web developers and the things they should know before even starting to learn the career.

1. The Basics
Nothing will ever replace the basics.  Get good at JavaScript, and then get good at JQuery, CoffeScript, and other frameworks.  Get good at PHP, and then learn how WordPress leverages it.  Get good at Rails, and then learn how the gems make things easy.

If you wish to start learning the basics, I recommend Bento.

2. Programming websites is not an intuitive skill
Programming is also a skill, but it’s not at all intuitive or tangible. Without guided learning, it’s impossible to even get started. The language tokens in code are symbols you’ve seen on your keyboard, but without guidance, a first time programmer probably won’t guess their meaning. You have to make the effort to actually learn. It will be difficult but rewarding.

3. Nobody has it all figured out.
The best web professionals continue their education constantly because there’s no end to the knowledge that can be gleaned. If you stop learning, you’ll start to feel miserable after a year or so because you’re once cutting-edge skills will now be the status quo. Worse, you’ll fall behind. The trick is to just learn a little something every day. Write a little code, read a blog post, wireframe an idea you’ve had… anything to keep your mind engaged and moving forward.

4. Learn to Code

• Read other people’s code.
  It is important to not limit yourself on your personal understanding but rather see the work of other programmers and learn from it.
• Do it hands-on
  If you read a book about doing something, stop reading it when it shows you something.  Immediately execute.  You’ll find that you often don’t understand things as well as you initially thought when you do this.
• Focus
  Focus on one language and learn it thoroughly.  Then, branch out into another one.  Learning too many languages as a beginner will just confuse you. Don’t worry about what’s hot.  I spent so much time studying every “new” thing that came out I lost a lot of time that would have been better spent on the fundamentals.

5. There are always better programmers than you.  That doesn’t make you a bad programmer.
Even if you had mastered everything, keep in mind that there will always be a better programmer than you. Healthy competition is necessary to develop and level up your skills.

6. There are parts of programming you won’t like. 
Not everything you will encounter in web developing is pleasant. It is like mathematics the harder it gets, the most complicated it can be. I encourage you to not turn away from those parts, rather take time in learning it.

7. Start with an easy language and a recommended framework.
Starting with a decent language and a well-used web framework will save you a lot of time and effort. Common languages such as PHP, Ruby, Python etc. are used by a lot of people and the frameworks for these languages have been battle tested by a lot of people during a long time.

As someone who teached myself coding from scratch I can highly recommend Ruby and Ruby on Rails as a starting language/web framework combination. Ruby is a great language and Ruby on Rails will save you a lot of time when dealing with everything from databases to deployment.

Sebastian Johnsson – creator of the Ruby on Rails app Smartlend.se.

Developing Web applications and/or websites is sort of time consuming and tedious job for every developer. In our fast and busy life we really need something that will save our time, developing web applications.

1. HTML5 boilerplate

HTML5 Boilerplate helps you create fast, adaptable and robust websites or web apps. Save Time and Create websites or web apps with Confidence using HTML5 boilerplate.

2. JqueryUI

jQuery UI is a organized set of user interface interactions, themes effects, widgets built on top of the jQuery JavaScript Library and that’s why I love jQuery. Whether you are building highly interactive web applications or just need to add a date picker to a form control, jQuery UI is the perfect choice for you.

3. AngularJS

AngularJS is powered by Google. AngularJS lets you extend HTML vocabulary for your app. The ensuing environment is extraordinarily readable, expressive and quick to develop.

4. Backbonejs

Backbone.js gives structure to web applications by providing models with custom events, key-value binding, views with declarative event handling, collections with a rich API of enumerable functions and connects it all to your existing API over a RESTful JSON interface.

5. EmberJS

Ember.js is a framework for creating ambitious web applications that is built for productivity. Designed with keeping developer ergonomics in mind. Its friendly APIs can help you getting your job done fast.

6. CanJS

CanJS is a flexible, powerful and fast Javascript library.

7. YUI library

YUI is an open source and free JavaScript-CSS library for building richly interactive web applications.

8. Twitter Bootstrap

Twitter Bootstrap is the Front-end Framework that is Intuitive, Sleek and Powerful. It can be used for faster and easier web development.

9. Gumby framework

Gumby Framework has a latest version called Gumby 2 which is built with the power of Sass. If you you don’t know what actually Sass means then let me tell you that it is a powerful CSS pre-processor which allows us to develop Gumby itself with much more speed and gives you new tools to quickly customize and build on top of the Gumby Framework.

10. Drupal

11. WordPress Framework

WordPress is web software you can use to create a beautiful website or blog. I would like to say that WordPress is both free and priceless at the same time.

12. Yii Framework

13. Express Framework

Express is a flexible and minimal, Node.js web application framework that provides a robust set of features for building single, multi-page and hybrid kinda web applications.

14. Socket.io

Socket.IO aims to make realtime apps possible in every browser and mobile device alongwith blurring the differences between the various transport mechanisms. It’s care-free realtime 100% in JavaScript.

15. Meteor

Meteor is an open-source platform that is intended for building top-quality web apps in afraction of the time, whether you’re an expert developer or just getting started.

16. Derby

MVC framework makes it easy to write and create realtime, collaborative applications that can run in both browsers and Node.js.

17.TowerJS

Small components for manipulating data, building apps and automating a distributed infrastructure.

It’s no secret that technology trends move fast — and the tools and means for building those technologies constantly evolve. But if you don’t lift your head up every once in a while to look past the next year’s projects, you could end up coding yourself down an inescapable rabbit hole.

To help you prepare for — or at least start contemplating — a future that’s screaming across the sky faster than we can see, we’ve compiled some of the languages that would be part of the future of web development.

1. Ceylon
Gavin King denies that Ceylon, the language he’s developing at Red Hat, is meant to be a “Java killer.” King is best known as the creator of the Hibernate object-relational mapping framework for Java. He likes Java, but he thinks it leaves lots of room for improvement.

Among King’s gripes are Java’s verbose syntax, its lack of first-class and higher-order functions, and its poor support for meta-programming. In particular, he’s frustrated with the absence of a declarative syntax for structured data definition, which he says leaves Java “joined at the hip to XML.” Ceylon aims to solve all these problems.

2. Dart
Like JavaScript, Dart uses C-like syntax and keywords. One significant difference, however, is that while JavaScript is a prototype-based language, objects in Dart are defined using classes and interfaces, as in C++ or Java. Dart also allows programmers to optionally declare variables with static types. The idea is that Dart should be as familiar, dynamic, and fluid as JavaScript, yet allow developers to write code that is faster, easier to maintain, and less susceptible to subtle bugs.

3. Opa
Web development is too complicated. Even the simplest Web app requires countless lines of code in multiple languages: HTML and JavaScript on the client, Java or PHP on the server, SQL in the database, and so on.

Opa doesn’t replace any of these languages individually. Rather, it seeks to eliminate them all at once, by proposing an entirely new paradigm for Web programming. In an Opa application, the client-side UI, server-side logic, and database I/O are all implemented in a single language, Opa.

Opa accomplishes this through a combination of client- and server-side frameworks.

4. Go
Go is a general-purpose programming language suitable for everything from application development to systems programming. In that sense, it’s more like C or C++ than Java or C#. But like the latter languages, Go includes modern features such as garbage collection, runtime reflection, and support for concurrency.

5. X10
X10 handles concurrency using the partitioned global address space (PGAS) programming model. Code and data are separated into units and distributed across one or more “places,” making it easy to scale a program from a single-threaded prototype (a single place) to multiple threads running on one or more multicore processors (multiple places) in a high-performance cluster.

6. Chapel
Chapel is part of Cray’s Cascade Program, an ambitious high-performance computing initiative funded in part by the U.S. Defense Advanced Research Project Agency (DARPA). Among its goals are abstracting parallel algorithms from the underlying hardware, improving their performance on architectures, and making parallel programs more portable.

Hundreds of blog posts and articles are published every day, but there is no way you can read all of them. We think you should have a strategy to keep up to date, follow these simple steps:

1. Follow Cool People
Front-end leaders help you to stay on top of relevant news and trends. They are in-the-know and they work on a specific topic.

Twitter can be a great place to find people who are in-the-know.

2. Find the Best Sources
Around the web there is lots of useful information about front-end news and trends, but sometimes it’s too hard to find and read all of them. It’s a mess and you will go crazy!

Therefore, we have put together some of the best sources you might use:

• Skilled Up
  SkilledUp was built to help you find online courses, gain and increase your skills and prove your worth to employers. Call it a public service, call it amazing – we call it transforming education. Online courses empower you to build foundations of knowledge that help propel you further professionally and personally. That’s transformative.
• Treehouse Blog
  
  The Treehouse blog provides valuable content on web development, web design, and startup tips.
• CSS Wizardry
  
  A specialised blog in writing and scaling CSS for large apps and websites.
• Open Web Platform Daily Digest
  
  Provides daily content about W3C, HTML, CSS, JavaScript, the Web APIs, web browsers.
• Mozilla Hacks Weekly Articles
  
  An agnostic web browser resource, focused on the Open Web and sharing knowledge.

For more list visit: How to keep up to date on Front-end technologies

3. Attend Conferences
Thousands of developers attend conferences to promote the latest technologies, share ideas, thoughts or experiences and learn from others. They discuss the best practices, standards and trends. You should participate in order to meet awesome people and organizations who do what you do.

• Fronteers conference
  Conference of the Dutch non-profit trade organisation for front-end developers.
• Front Trend
  A gathering where front-end lovers and tech entrepreneurs discover the latest trends.
• HTML5DevConf
  
  Has become the largest JavaScript and HTML5 developers conference in the world.
• Fluent Conf JavaScript & Beyond
  Featuring the best in JavaScript and progressive Web development.
• Front End Ops Conf
  
  A 2-day conference in San Francisco dedicated to the emerging discipline of front end operations.

For more list visit: How to keep up to date on Front-end technologies

4. Attend Meetup Groups
The process of learning is vast and one way to do it is to learn from others as well. Meetup Groups are common yet effective. It is important to share and hear what others think, or how others develop their websites.

Below are some of the lists of the largest meetup groups:

• The SF JavaScript Meetup
  San Francisco, CA
  
• Boston Front End Developers
  Boston, MA
• Tech In Motion: Orange County
  Newport Beach, CA
• Hack Reactor
  San Francisco, CA
• Refresh Denver
  Denver, CO
• AngularJS Toronto (#AngularJSTO)
  Toronto, ON
• Front-End.IL
  Tel Aviv-Yafo, Israel
• Design&Startups
  San Francisco, CA
• East Bay JavaScript Meetup Group
  Oakland, CA
• HTML5mtl
  Montréal, QC

Becoming a web developer is a choice. It’s a personal decision that must be decided by each individual.

I cannot make assumptions of what makes you, them or me a web developer because each of us have our own reasons. However, what I can share for you is important if you want to become a front-end web developer:

1. Learn basic HTML and CSS

Things to Know: HTML

• General HTML structure of a webpage (html, head, body).
• The Document Object Model (DOM) – What it is.
• Tags – How to make links, lists, etc. It doesn’t need to be memorized, but you should be able to use different tags when you need them from a reference.
• How to structure the content of a website with divs (div-based markup)
• Semantic markup – when to use different headers (h1s, h2s, h3s) and tags (article, section, span, etc.)
• How to embed a .css file into a page
• (Advanced) How to structure markup that supports accessibility compliance, like for users with screen readers

Things to Know: CSS

• How to target different elements on a page, at different depths (i.e. a span within a div).
• Displaying elements – block, inline-block and inline
• Style attributes that can be set for colors, fonts, borders, etc.
• Positioning (relative, absolute, fixed) and floating elements
• The box model, margin/padding, and what box-sizing: border-box does (note: it will save your life)
• ids (#id) vs classes (.class) and CSS selectors.
• CSS specificity, or when styles override other styles.
• (Advanced) Responsive design — What is it? What are media queries and how do you use them?
• (Advanced) SASS, LESS — CSS compilers. This will make your life much easier, and any modern web shop will be using a compiler nowadays. I will say to only start using SASS/LESS after you write CSS by hand, to both remove the “magic” and to internalize the lesson of how much writing CSS by hand sucks.
• (Advanced) CSS3: border-radius, box-shadow, text-shadow, etc.

2. Learn vanilla JavaScript

Things to Know

• What do you mean “everything is an object?”
• What is a callback and why is it important?
• Global scope, function scopes, what is the global namespace and why can it be bad?
• Namespacing your code and why
• (Advanced) Closures
• (Building on closures) Object-oriented JavaScript — the biggest game changer for me personally. I found the “Object Oriented JavaScript” chapter in John Resig’s “Pro JavaScript Techniques” to be very enlightening.
• (OO JS) Prototypal inheritance

3. Understand the basic concepts of programming

Things to Know

• Data types: string, int, double, char, etc.
• Variables
• Functions/methods and passing arguments
• For loops
• If-else statements
• Arrays and how to loop over their contents
• Key-value pairs and how to loop over their contents
• Operations: addition, subtraction, modular arithmetic, concatenating strings, substrings, etc.

4.

Learn jQuery

Things to Know

• (document).ready(function() { });
• What (this) represents (wrapping a DOM element as a jQuery object, which can then be manipulated using jQuery commands)
• How to select classes and ids
• Familiarity with api.jquery.com and how to look up different functions
• How to use the various effects (fade, slide, hide, show, etc.)
• Traversing the DOM tree (children(), parents(), find(), etc.)
• Chaining commands
• How to respond to and trigger events
• What does it mean for something to be asynchronous?
• How do people debug jQuery bugs? What is console.log() and the `debugger` command? How can you set breakpoints in JavaScript files and step in/over them?
• (General) What JSON is, and what a JSON response looks like
• (Advanced) What is AJAX?
• (Advanced) How to receive data from an API via AJAX and parse the data into the DOM