When it comes to developing a website that runs on the modern web: Web developers need to choose a virtual hosting platform and underlying data storage, prepare tools for writing HTML, CSS, and Java, have a design execution method, and some available Java libraries / frameworks . After the task is broken down into these steps, the next step is much simpler. You can go online to find articles, browse the forum, or come to Nanchang Huaxin Zhiyuan to participate in web front-end training are good choices.
But no matter which way you go, making mistakes is inevitable for every developer. Although some errors are related to a specific behavior, some errors are challenges that all web developers need to face. Therefore, through research, experience and observation, Nanchang Huaxin Zhiyuan Web front-end experts summarized the 10 common mistakes made by web developers-and how to avoid them.
1) Make meaningless page errors: It is useful to make web pages that are public-facing, and you must not provide any clues about search engines. No accessibility features are implemented.
Impact: If a search engine cannot discover a web page, there may be few or no visits.
How to Avoid: Use SEO (Search Engine Optimization) and HTML to support accessibility. Regarding SEO, be sure to add tags to provide meaningful webpage keywords and descriptions. About Tech is well written and can be used for reference. In order to have a better accessibility experience, please provide an alt = "your image deion" attribute for each img and area tag. For more suggestions, see About Tech. You can also test the public web page on Cynthia Says to see if it is compatible with Section 508.
2) The bloated response result is wrong: the page is full of many high-quality graphics and / or pictures, and these graphics and / or pictures are scaled down with the help of the height and width attributes of the img element. Files from page links, such as CSS and Java, are large. Source HTML tags may also be unnecessarily complex and comprehensive.
Impact: The time it takes to fully render the page is so long that some users give up or even re-request the entire page directly impatiently. In some cases, errors can occur if the page waits too long.
How to avoid: Don't have the fluke mentality that Internet access is getting faster and faster now-thus allowing bloated scenarios. Instead, consider going back and forth from your browser to your website as a cost. Images are the main criminals of bloated web pages. In order to minimize the cost of images and reduce the pressure of page loading, you can try the following three techniques: "Is it really necessary for these graphics?" Delete unnecessary pictures. Use tools such as Shrink O'Matic or RIOT to reduce the image file size. Preloaded images. This will not increase the cost of the initial download, but it will make the images on other pages of the site load faster. Another way to reduce costs is to compress CSS and Java link files. There are great tools like Minify CSS and Minify JS that can help you do it.
3) "Obviously works in my browser ..."
Wrong: Developers tend to prefer a particular browser, or hate a particular one, probably because they are biased against the test page view. It's also possible that the code examples found online don't guarantee how they will render in other browsers. In addition, some browsers have different default values for style.
Impact: A website written with one browser as the center will be of poor quality when displayed in other browsers.
How to avoid: During development, it is impractical to test web pages in all browsers and versions. However, every once in a while, it's a good idea to check how your site looks in multiple browsers. Now, no matter what platform you prefer, there are always free tools available: free virtual machines, website scanners. Tools such as Visual Studio can also call multiple browsers to display a single page you are working on.
4) Non-responsive design error: Assume that the developer / designer develops the website on the same size display.
Impact: When viewing a website on a mobile device or on a very large screen, the user experience either has difficulty seeing important aspects of the page, or even pays attention not to navigate to other pages.
How to avoid: Responsive thinking. Use responsive design in your website. Here are some practical tutorials on this, including responsive images, and a very popular library, Bootstrap.
5) Write some outdated HTML
Mistake: The early Internet had far fewer choices of tokens than we do now. However, old habits are difficult to change, and many developers now write HTML as if they were in the 20th century. For example, we use table elements for layout, or when other specific semantic tags are more suitable, use center or font tags when the current HTML standard is not supported, and space items on the page if there are a large number of characters Physical words.
Impact: Following this outdated HTML rule may lead to overly complex markup, with the result that different behaviors occur in different browsers. And there is no incentive to improve the browser, because it is not necessary to update to the latest browser, such as Microsoft Edge, even Internet Explorer versions (11, 10, 9) become unnecessary.
How to avoid: Stop using table elements for content layout and restrict the use of table elements to display table data. For how to display content, use CSS.
6) Bad formatting error: Prompt the user to provide information (especially when entering text fields) and assume that the data will be received as expected.
Impact: Many things can (or are likely to) go wrong when we trust user input. If the required data cannot be provided, or the received data is not compatible with the data pattern below, the page may fail. What is more serious is that some users may intentionally violate the database of the website, for example, through injection attacks (see OWASP: Top 10 2013-A1-Injections).
How to avoid it: The first thing you need to do is make sure the user knows what type of data you need. For example, if you only want the address, then the user does not know whether it refers to the unit, home or email address! In addition to being specific, it is necessary to make full use of the current data verification technology provided by HTML. Regardless of how the data is validated on the browser side, ensure that it is always validated on the server side as well. Don't let a concatenated T-SQL statement use data from user input, and the type of each field has not been confirmed.
7) Create the so-called "should work" code error: whether it is Java or code running on the server, developers need to test and confirm that it works, not after deploying, they think it should just Can run from end to end.
Impact: A website that is not properly error-checked is a rogue to end users. Not only will it greatly affect the user experience, but the type of error message content may give hacking clues to penetrate this site.
How to avoid it: People make mistakes, and the same philosophy applies to coding. With Java, be sure to implement good techniques to prevent and catch errors. Although this article describes coding Windows applications in Java, most of them are also applicable to web development, and many tips are good! Another way to make the code reliable and survive future changes is unit test. If we are careful enough, we can catch server-side code failures without being noticed by users. Only show the necessary information, and be sure to set up friendly error pages such as HTTP 404s.
8) Error writing fork code: In the noble idea of supporting all browsers and versions, developers are determined to create code that can respond to any possible situation. The if statements in the code are piled up, with forks in all directions.
Impact: As new browser versions are updated, code files become more awkward and difficult to manage.
How to avoid: Implement function detection and browser / version detection of the code. Not only does feature detection technology significantly reduce the amount of code, it is also easier to read and manage. Consider using libraries such as Modernizr, which not only help with feature detection, but also automatically provide feedback support for older browsers that can't keep up with HTML5 and CSS3 speeds.
9) Website too many refresh errors: The created website needs to refresh the page for every interaction.
Impact: Similar to page bloat (see # 4), the performance of page load time is affected. The user experience lacks fluency, and each interaction may result in a short (or long) reset of the web page.
How to avoid it: One way to quickly avoid this is to determine if the content posted back to the server is really needed. For example, when not relying on server-side resources, client-side scripts can be used to provide direct results. You can also apply AJAX technology or further use the single page application "SPA" method. Popular Java libraries / frameworks, such as JQuery, KnockoutJS, and AngularJS, make it much easier to adopt these methods.
10) Made too many useless mistakes: Developers took a long time to create web content. A lot of time is spent on repetitive tasks, or you write a lot of code by yourself.
Impact: The initial website launch and subsequent updates took too long. If other developers are doing the same work, but with less time and effort, then your development value is obviously low. Manual labor is prone to errors, and troubleshooting takes more time.
How to avoid: Explore your options. Consider using new tools and new process technologies at every stage of development. For example, how is your current code editor compared to Sublime Text and Visual Studio? No matter what code editor you are using, have you recently delved into its features? Maybe just invest a little time to read it carefully Document, you can discover new ways of doing things, saving time and hours for the future. For example, in this article, extending Visual Studio can increase productivity for web developers. Don't miss the help tools available online! For example, check the tools on ie to simplify testing (across multiple platforms and devices) and troubleshoot. You can also reduce time and errors by automating processes. An example of this is the use of Grunt tools, for example its automation feature can reduce files. Another example is Bower, which can help manage libraries / frameworks. As for the web server itself? With the help of Microsoft Azure Web Apps, for example, you can quickly create a website, and almost all development scenarios can be easily scaled into your business!
By identifying these common mistakes, web developers can avoid a lot of frustrations that can cause others to suffer. Not only do we need to acknowledge mistakes, we also need to be clear about the impact of mistakes and take steps to avoid them, so that we can have better development performance-and have confidence in completing the task!