{"id":7999,"date":"2014-05-27T10:01:03","date_gmt":"2014-05-27T15:01:03","guid":{"rendered":"http:\/\/www.mrc-productivity.com\/blog\/?p=7999"},"modified":"2022-11-22T13:32:33","modified_gmt":"2022-11-22T19:32:33","slug":"7-dos-and-donts-of-modern-web-development","status":"publish","type":"post","link":"https:\/\/www.mrc-productivity.com\/blog\/2014\/05\/7-dos-and-donts-of-modern-web-development\/","title":{"rendered":"7 do\u2019s and don\u2019ts of modern web development"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.mrc-productivity.com\/blog\/wp-content\/uploads\/2010\/11\/Education.jpg\" alt=\"Education\" width=\"76\" height=\"100\" class=\"alignleft size-full wp-image-725\" \/><span style=\"font-size: 14px;\"><em>Summary: As web application development plays an increasingly important role in the business world, many companies aren&#8217;t keeping up. They&#8217;re stuck using old development standards and haven&#8217;t yet adapted to modern principles. In this article, you&#8217;ll learn which rules developers should follow, and which mistakes they must avoid. <\/em><\/span><br \/>\n<a name=\"20140526\"><\/a><!--more--><br \/>\nIn a growing trend, we\u2019re seeing software development play an increasingly important role in a company\u2019s sustainability. According to a Forrester <a onclick=\"_gaq.push(['_trackEvent', 'Blog', 'Inside Link', 'Forester']); \" href=\"http:\/\/info.thoughtworks.com\/rs\/thoughtworks2\/images\/Continuous%20Delivery%20_%20A%20Maturity%20Assessment%20ModelFINAL.pdf\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red;font-weight: bold\">study<\/span><\/a>, \u201cThe software you deploy, and especially the custom software you create, will increasingly be part of your competitive edge.\u201d<\/p>\n<p><figure id=\"attachment_6621\" aria-describedby=\"caption-attachment-6621\" style=\"width: 240px\" class=\"wp-caption alignright\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.mrc-productivity.com\/blog\/wp-content\/uploads\/2013\/08\/small_2378867408.jpg\" alt=\"photo credit: Dmitry Baranovskiy via photopin cc\" width=\"240\" height=\"180\" class=\"size-full wp-image-6621\" \/><figcaption id=\"caption-attachment-6621\" class=\"wp-caption-text\">photo credit: <a href=\"https:\/\/www.flickr.com\/photos\/dmitry-baranovskiy\/2378867408\/\">Dmitry Baranovskiy<\/a> via photopin <a href=\"https:\/\/creativecommons.org\/licenses\/by\/2.0\/\">cc<\/a><\/figcaption><\/figure><span style=\"font-size: 14px; line-height: 1.7em;\">The problem is, the web development landscape has changed significantly over the past 5 &#8211; 10 years, yet I see many companies developing applications based on outdated standards. They haven\u2019t yet adopted modern development principles, and their applications (and business) suffer as a result.<\/span><\/p>\n<p>So, what rules must web application developers follow when building modern web applications? What mistakes should they avoid? We\u2019ve compiled a list of 7 \u201cdo\u2019s and don\u2019ts\u201d of modern web development, and explained each point below:<\/p>\n<h3>1. Don\u2019t: Build applications from your point of view<\/h3>\n<p>The longer you work with any piece of software, the more intuitive it becomes. This effect gets multiplied for developers, as they understand their code inside and out. This creates a dangerous trap, as applications they view as intuitive may actually confuse users. Of course it\u2019s intuitive to them&#8211;they built it! As a result, it\u2019s often impossible to step back and view their application through the user\u2019s eyes.<\/p>\n<blockquote style=\"line-height: 1.7em; background-image: none; margin-left: 0; padding-left: 18px; height: auto;\"><p>\n\u201cThe biggest mistake that most developers make is that they do not adopt a User-Centered Design approach,\u201d says Bennett Lauber, Chief Experience Officer at <a onclick=\"_gaq.push(['_trackEvent', 'Blog', 'Source', 'The Usability People']); \" href=\"https:\/\/www.theusabilitypeople.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red;font-weight: bold\">The Usability People<\/span><\/a>. \u201cThey design a system that seems to work well from their (engineering centric) design philosophy. Remember the first HP Calculators? They were great for mathematicians, but everyone else thought they were horrible. Software Engineers end up creating something that might work well for experienced users, but is very hard for most others to understand.\u201d\n<\/p><\/blockquote>\n<h3>Do: Create user stories<\/h3>\n<blockquote style=\"line-height: 1.7em; background-image: none; margin-left: 0; padding-left: 18px; height: auto;\"><p>\n\u201cWe work from user stories all the time,\u201d says John Locke, Principal at <a onclick=\"_gaq.push(['_trackEvent', 'Blog', 'Source', 'Freelock']); \" href=\"https:\/\/www.freelock.com\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red;font-weight: bold\">Freelock<\/span><\/a>. \u201cWhen we create them, we start with defining who the user is, and what their goal is. Then we write out the steps that user needs to take to get the desired result. That&#8217;s half of this equation. With a good user story, you can test that the application does what it&#8217;s supposed to do.\u201d\n<\/p><\/blockquote>\n<p>Now, why is this so important to modern web development? After all, building for the user isn\u2019t new development advice. I mention it because it is critically important in this day and age. With the rise of available software options, users have choices. They won\u2019t waste their time trying to figure out your confusing application when they have dozens of available alternatives. <\/p>\n<h3>2. Don\u2019t: Build only for PC users<\/h3>\n<p>Despite the fact that <a onclick=\"_gaq.push(['_trackEvent', 'Blog', 'Inside Link', 'Computerworld']); \" href=\"https:\/\/www.computerworld.com\/s\/article\/9244639\/Mobile_browser_usage_share_hits_20_for_the_first_time\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red;font-weight: bold\">20% of all web traffic now originates from mobile devices<\/span><\/a>, the vast majority of web applications in the business world are still built solely for PCs. While building responsive (or adaptive) web applications adds another layer of complexity to the project, it\u2019s quickly becoming a necessity in modern web development. <\/p>\n<h3>Do: Build for a multi-screened world<\/h3>\n<blockquote style=\"line-height: 1.7em; background-image: none; margin-left: 0; padding-left: 18px; height: auto;\"><p>\n<figure id=\"attachment_6243\" aria-describedby=\"caption-attachment-6243\" style=\"width: 240px\" class=\"wp-caption alignright\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.mrc-productivity.com\/blog\/wp-content\/uploads\/2013\/06\/small_7348035690.jpg\" alt=\"photo credit: mikecogh via photopin cc\" width=\"240\" height=\"170\" class=\"size-full wp-image-6243\" \/><figcaption id=\"caption-attachment-6243\" class=\"wp-caption-text\">photo credit: <a href=\"https:\/\/www.flickr.com\/photos\/mikecogh\/7348035690\/\">mikecogh<\/a> via photopin <a href=\"https:\/\/creativecommons.org\/licenses\/by-sa\/2.0\/\">cc<\/a><\/figcaption><\/figure><span style=\"font-size: 14px; line-height: 1.7em;\">\u201cArguably the biggest and most important change is the introduction of thousands of new devices with varying screen sizes,\u201d says Nick Comito, UX Designer at <a onclick=\"_gaq.push(['_trackEvent', 'Blog', 'Source', 'Astonish Design']); \" href=\"https:\/\/www.astonishdesign.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red;font-weight: bold\">Astonish Design<\/span><\/a>. \u201cThe web application development landscape has shifted dramatically because there are a plethora of new devices hitting the market every day. Many countries around the world rely solely on mobile devices for their primary source of internet access. Developers must accommodate this change into their workflows. \u201d<\/span>\n<\/p><\/blockquote>\n<h3>3. Don\u2019t: Use the \u201clatest and greatest\u201d<\/h3>\n<blockquote style=\"line-height: 1.7em; background-image: none; margin-left: 0; padding-left: 18px; height: auto;\"><p>\n\u201cStay away from using the \u2018latest and greatest,\u2019\u201d says Almino Malaza, Sr. Software developer for <a onclick=\"_gaq.push(['_trackEvent', 'Blog', 'Source', 'Eliassen Group']); \" href=\"https:\/\/www.eliassen.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red;font-weight: bold\">Eliassen Group<\/span><\/a>. \u201cSometimes latest is not the greatest when it is buggy and unstable. Before trying out the latest operating system, visual studio, javascript framework or .Net framework, examine and test it to see if it\u2019s stable. Make sure you have good control over its operation before you use it in your project.\u201d\n<\/p><\/blockquote>\n<h3>Do: start with a reliable technology stack<\/h3>\n<p>Now, I\u2019m not saying that developers should never try anything new. In fact, experimentation with new technologies is necessary for advancement&#8211;and developers have plenty of new options to play with. <\/p>\n<p>However, don\u2019t opt for unproven, new technology when building business applications. Not only might you experience the problems listed above, you run the risk of choosing a technology that might never catch on. Opting for proven technology in your development projects promotes stability, security, and maintainability&#8211;and the overall success of your applications.<\/p>\n<h3>4. Don&#8217;t: Access a database directly with user supplied information<\/h3>\n<p>One of the most common mistakes found in web applications, accessing a database directly with user-supplied information opens you up to security breaches. If unprotected, users can use input fields to inject malicious scripts into your application or access proprietary data from your database. Of course, most users will never attempt anything malicious, but you must approach user input with a defensive mindset.<\/p>\n<p>Now, this has been an issue for years. However, I include it in this article for two reasons: First, it\u2019s still a problem. Despite calls to sanitize user input, many developers still ignore this critical step. Secondly, web application attacks are on the rise. As more attackers attempt to compromise your applications, <a onclick=\"_gaq.push(['_trackEvent', 'Blog', 'Inside Link', 'Security']); \" href=\"https:\/\/www.mrc-productivity.com\/blog\/2013\/12\/10-security-mistakes-web-application-developers-should-never-make\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red;font-weight: bold\">basic security principles<\/span><\/a> can make all of the difference.<\/p>\n<figure style=\"width: 525px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/imgs.xkcd.com\/comics\/exploits_of_a_mom.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/imgs.xkcd.com\/comics\/exploits_of_a_mom.png\" width=\"525\" height=\"162\" class \/><\/a><figcaption class=\"wp-caption-text\">photo credit: <a href=\"https:\/\/xkcd.com\/869\/\">xkcd<\/a> <a href=\"https:\/\/creativecommons.org\/licenses\/by-nc\/2.5\/\">cc<\/a><\/figcaption><\/figure>\n<h3>Do: Sanitize user inputs<\/h3>\n<blockquote style=\"line-height: 1.7em; background-image: none; margin-left: 0; padding-left: 18px; height: auto;\"><p>\n\u201cIf you&#8217;re writing modular code, you need to make sure that whatever your inputs are, that you&#8217;re getting what you expect,\u201d says Locke. \u201cThat means verifying that stuff coming into your code can&#8217;t do something wrong and cause more damage. Typically, this means using database abstraction layers to sanitize any user input before passing it into the database, to prevent SQL injection attacks. For web applications, this often means running all fields through an HTML encoding function, so that scripts get converted to harmless text instead of executing.\u201d\n<\/p><\/blockquote>\n<h3>5. Don\u2019t: Make your users wait<\/h3>\n<p><figure id=\"attachment_7442\" aria-describedby=\"caption-attachment-7442\" style=\"width: 240px\" class=\"wp-caption alignright\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.mrc-productivity.com\/blog\/wp-content\/uploads\/2014\/01\/small_2300190277.jpg\" alt=\"photo credit: Nathan E Photography via photopin cc\" width=\"240\" height=\"180\" class=\"size-full wp-image-7442\" \/><figcaption id=\"caption-attachment-7442\" class=\"wp-caption-text\">photo credit: Nathan E Photography via photopin <a href=\"https:\/\/creativecommons.org\/licenses\/by\/2.0\/\">cc<\/a><\/figcaption><\/figure><span style=\"font-size: 14px; line-height: 1.7em;\">Do you ever get the feeling that attention spans are declining? Well, here\u2019s some facts to back up your feelings. According to these <a onclick=\"_gaq.push(['_trackEvent', 'Blog', 'Inside Link', 'attention span']); \" href=\"https:\/\/www.statisticbrain.com\/attention-span-statistics\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red;font-weight: bold\">statistics<\/span><\/a>, attention spans have decreased by 4 seconds over the past 13 years. <\/span><\/p>\n<p>What does this mean for developers? Users are increasingly intolerant of slow applications. Why does matter? This <span style=\"color: red;font-weight: bold\">infographic<\/span> shares some startling statistics relating to how page speed affects user retention, and the bottom line.<\/p>\n<h3>Do: Optimize for best performance<\/h3>\n<blockquote style=\"line-height: 1.7em; background-image: none; margin-left: 0; padding-left: 18px; height: auto;\"><p>\n\u201cCut the fat wherever you can so that whatever you build will be as fast as possible,\u201d says Kevin O&#8217;Keefe, Creative Director at <a onclick=\"_gaq.push(['_trackEvent', 'Blog', 'Source', 'Smartfile']); \" href=\"https:\/\/www.smartfile.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red;font-weight: bold\">SmartFile<\/span><\/a>. \u201cMinify all your code, asynchronous loading, delayed content rendering, or whatever it takes to trim milliseconds off your render. People love fast.\u201d\n<\/p><\/blockquote>\n<h3>6. Don\u2019t: Build applications from scratch<\/h3>\n<p>With the available open source code, frameworks, and development tools, there\u2019s very little reason to code any web application from the ground up. Not only does coding from scratch waste time, it generally results in inferior solutions. <\/p>\n<h3>Do: Use frameworks and tools<\/h3>\n<blockquote style=\"line-height: 1.7em; background-image: none; margin-left: 0; padding-left: 18px; height: auto;\"><p>\n\u201cThe goal of any development project is delivering a quality solution in an efficient manner,\u201d says Tyler Wassell, Software Development Manager at <a onclick=\"_gaq.push(['_trackEvent', 'Blog', 'Source', 'mrc']); \" href=\"https:\/\/www.mrc-productivity.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red;font-weight: bold\">mrc<\/span><\/a>. \u201cCoding everything from start to finish is often unnecessary, and will just slow down your project. The best web developers understand that the right frameworks and tools will not only eliminate repetitive coding tasks, they will also fill gaps in their skillset&#8211;letting them accomplish more than they could coding from scratch.\u201d\n<\/p><\/blockquote>\n<h3>7. Don\u2019t: Store sensitive data in plain text<\/h3>\n<p>One of the most common developer mistakes: failing to secure user authentication credentials. Rather, many developers still store user data in plain text inside the database. Why is that bad? Well, if\/when an attacker breaks into the database, all of that sensitive data is immediately compromised&#8211;which not only harms your customers, it can cause irreparable damage to a company\u2019s reputation.<\/p>\n<h3>Do: Encrypt sensitive user data in the database<\/h3>\n<p>Here\u2019s a good security rule of thumb for the modern developer: Assume you will get hacked. It\u2019s not a matter of \u201cif\u201d a hacker will gain access to your database. It\u2019s a matter of \u201cwhen\u201d. When a hacker accesses your database, how easily can they steal your data? Encryption will help protect your sensitive user data from intruders when your database is compromised.<\/p>\n<p>So, what do you think? Is there anything you would add to this list? If so, please share your thoughts in the comments.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Summary: As web application development plays an increasingly important role in the business world, many companies aren&#8217;t keeping up. They&#8217;re stuck using old development standards and haven&#8217;t yet adapted to modern principles. In this article, you&#8217;ll learn which rules developers should follow, and which mistakes they must avoid.<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","slim_seo":{"title":"7 do\u2019s and don\u2019ts of modern web development - mrc&#039;s Cup of Joe Blog","description":"Summary: As web application development plays an increasingly important role in the business world, many companies aren't keeping up. They're stuck using old de"},"footnotes":""},"categories":[8],"tags":[15],"class_list":["post-7999","post","type-post","status-publish","format-standard","hentry","category-education","tag-web-development"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/posts\/7999","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/comments?post=7999"}],"version-history":[{"count":11,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/posts\/7999\/revisions"}],"predecessor-version":[{"id":14083,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/posts\/7999\/revisions\/14083"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/media?parent=7999"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/categories?post=7999"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/tags?post=7999"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}