The Web Developer's Checklist

Đã đăng vào - Cập Nhật Lần Cuối vào

Checklists help people make sure that they don't forget things that are important. This is why every Web developer needs a checklist. There are things that you must remember for every project that you do. Here's the rundown.

Content

First and foremost, when you start to develop a new webpage or Web application, you have to understand the page's content. This is true even if you are the developer and you do not like to get lost in business ideas and slogans. You also need to understand that your work will always represent you, which means that if somebody visits a website that you were involved with, it should matter to you—even if the content comes from the client and you had nothing to do with it. If you can, make suggestions and try to improve the content quality with new ideas or suggestions, as well as corrections if you spot any errors.

It is good to be attentive to the content, its accuracy, as well as its quality (including spelling and correct grammar). At the same time, you should also make sure that your website is structured and properly broken down into intuitive sections and articles, all of which should have a semantic meaning.

SEO (search engine optimization) best practices should also be applied to every developed website in order for it to be found by search engines easily, and for it to have a better chance of attracting more visitors. You can use meta tags and HTML5 custom elements, such as nav and footer components, to help search engines rank it and find queried content on your website.

There are times when websites feature translations, so be sure to validate your translation and prepare your code to support it. But only try to translate (or submit for translation) content that you have validated with the client and those that you also consider to be correct. If you don't do it this way, you might be faced with incorrect content that's displayed in a language that you cannot validate or confirm.

Coding

Similar to the website, your code also represents you. It does not matter what technology you're using when developing a new webpage, you should always validate your HTML code (W3C and Dr. Watson tools are very popular for this).

These days, it's rare to find websites that don't use JavaScript code, so it is a good practice to use a tool like JSHint or JSLint for validating your JavaScript code. These tools can help you spot issues that might not be obvious when you're looking at the code. They can also help you become more familiar with JavaScript best practices.

Styling is also important, so always validate your CSS code and styles. You can use a tool such as CSSLint for this.

If you have multiple projects running simultaneously and want to be sure you're on the right track, you can always analyze your work style and working habits using The Joel Test. Most IT companies and startups take this test, which can provide you with a good overview of how mature your development process is.

Performance and Mobile support

With millions of smartphones and tablets being sold each year, people are using smaller screens (some of which have very high resolutions) more and more, so make sure that the webpages you develop are mobile-ready. There are people who believe that every website development project should be started like a mobile first project, meaning that the layout and the content of the application is structured in a way that it is optimized for mobile devices (which now even include smart televisions and consoles).

On mobile devices, websites should be designed to load as quickly and with as little data as possible. On a website, the downloaded external dependencies (like JavaScript libraries) and images usually take up the most of the traffic. To reduce this traffic, its a good practice to “minify” images to make sure that they require the least amount of data as possible.There are a lot of online services for this, like PunyPNG or PNGGauntlet.

"Minifying" is a common term in Web development, and is one that developers also use to describe the need for compressing JavaScript code. This is done to help the webpage load faster, and it protects your code and your logic. If you have not seen a minified JavaScript code, check this snippet:

*! jQuery v3.0.0-pre | (c) jQuery Foundation | jquery.org/license */
!function(a,b){"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){var c=[],d=a.document,e=c.slice,f=c.concat,g=c.push,h=c.indexOf,i={},j=i.toString,k=i.hasOwnProperty,l={},m="3.0.0-pre 61e21a4eaf479406b660328f4df7e3183c32386b",n=function(a,b){return new n.fn.init(a,b)},o=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,p=/^-ms-/,q=/-([a-z])/g,r=function(a,b){return b.toUpperCase()};n.fn=n.prototype={jquery:m,constructor:n,length:0,toArray:function(){return e.call(this)},get:function(a){return null!=a?0>a?this[a+this.length]:this[a]:e.call(this)},pushStack:function(a){var b=n.merge(this.constructor(),a);return b.prevObject=this,b},each:function(a){return n.each(this,a)},map:function(a){return this.pushStack(n.map(this,function(b,c){return a.call(b,c,b)}))},slice:function(){return this.pushStack(e.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(a){var b=this.length,c=+a+(0>a?b:0);return this.pushStack(c>=0&&b>c?[this[c]]:[])},end:function(){return 

This is a section of code from jQuery 2.x version. For the browser, the format of the code is not important as long as the syntax is correct. The format is only important for the developer who needs to be able to read, understand, structure and modify it.

For testing the performance of your webpages, you can use Google's PageSpeed

Security and Monitoring

Every website owner wants to know how many people visit their webpage. To track these we can use analytics tools and analytical engines such as like Google's Analytics or Clicky. With these tools, you can see who visits your site (from where and how many times they access it) as well as know the most visited pages of your site. Based on these, you or the client can adjust your business strategy and change the content of the website to attract higher traffic to your pages.

Security is a big concern nowadays, and with good reason. Please apply best practices when coding and avoid errors such as concatenating strings for SQL queries (as this usually leaves it open to SQL Injection attacks).

In case you support comments on your website or allow users to post content, you should also make sure that you're safe from Cross Site Scripting attacks. If it's possible, it is good to have an SSL certificate installed on the site to encrypt the communication between the browser and the web-server.

If the site uses social media integration features, be mindful of the security concerns and always follow the best practices provided by the plugin provider.

I've only enumerated the points that I consider as critical when developing a new website (of course some of these will still depend on you). If you search for Web developer checklists on the Internet, you'll find dozens of these, but I hope this list can help you with your development projects.

Đã đăng 23 tháng 7, 2015

Greg Bogdan

Software Engineer, Blogger, Tech Enthusiast

I am a Software Engineer with over 7 years of experience in different domains(ERP, Financial Products and Alerting Systems). My main expertise is .NET, Java, Python and JavaScript. I like technical writing and have good experience in creating tutorials and how to technical articles. I am passionate about technology and I love what I do and I always intend to 100% fulfill the project which I am ...

Bài báo kế tiếp

Common JavaScript Mistakes