[{"data":1,"prerenderedAt":402},["ShallowReactive",2],{"navigation":3,"\u002Fblog\u002F5-mistakes-front-end-developers-should-avoid":286,"\u002Fblog\u002F5-mistakes-front-end-developers-should-avoid-surround":395},[4],{"title":5,"path":6,"stem":7,"children":8,"page":285},"Blog","\u002Fblog","blog",[9,13,17,21,25,29,33,37,41,45,49,53,57,61,65,69,73,77,81,85,89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,193,197,201,205,209,213,217,221,225,229,233,237,241,245,249,253,257,261,265,269,273,277,281],{"title":10,"path":11,"stem":12},"2020 - The best Javascript Frameworks","\u002Fblog\u002F2020-the-best-javascript-frameworks","blog\u002F2020 - The best Javascript Frameworks",{"title":14,"path":15,"stem":16},"5 Essential Reasons for E2E Testing","\u002Fblog\u002F5-essential-reasons-for-e2e-testing","blog\u002F5 Essential Reasons for E2E Testing",{"title":18,"path":19,"stem":20},"5 Mistakes Front-end Developers should Avoid","\u002Fblog\u002F5-mistakes-front-end-developers-should-avoid","blog\u002F5 Mistakes Front-end Developers should Avoid",{"title":22,"path":23,"stem":24},"5 Things to motivate you to perform Unit Testing","\u002Fblog\u002F5-things-to-motivate-you-to-perform-unit-testing","blog\u002F5 Things to motivate you to perform Unit Testing",{"title":26,"path":27,"stem":28},"52 Articles, 7 Books and a Pandemic","\u002Fblog\u002F52-articles-7-books-and-a-pandemic","blog\u002F52 Articles, 7 Books and a Pandemic",{"title":30,"path":31,"stem":32},"6 Levels of Autonomous Vehicles","\u002Fblog\u002F6-levels-of-autonomous-vehicles","blog\u002F6 Levels of Autonomous Vehicles",{"title":34,"path":35,"stem":36},"ADAS","\u002Fblog\u002Fadas","blog\u002FADAS",{"title":38,"path":39,"stem":40},"Ambient Intelligence","\u002Fblog\u002Fambient-intelligence","blog\u002FAmbient Intelligence",{"title":42,"path":43,"stem":44},"Best 5 Hybrid Mobile App Development Frameworks","\u002Fblog\u002Fbest-5-hybrid-mobile-app-development-frameworks","blog\u002FBest 5 Hybrid Mobile App Development Frameworks",{"title":46,"path":47,"stem":48},"Best Practices for Code Testing","\u002Fblog\u002Fbest-practices-for-code-testing","blog\u002FBest Practices for Code Testing",{"title":50,"path":51,"stem":52},"Blockchains - How and Why?","\u002Fblog\u002Fblockchains-how-and-why","blog\u002FBlockchains - How and Why",{"title":54,"path":55,"stem":56},"Brain Computer Interfaces","\u002Fblog\u002Fbrain-computer-interfaces","blog\u002FBrain Computer Interfaces",{"title":58,"path":59,"stem":60},"Computational Fluid Dynamics","\u002Fblog\u002Fcomputational-fluid-dynamics","blog\u002FComputational Fluid Dynamics",{"title":62,"path":63,"stem":64},"Computer Vision","\u002Fblog\u002Fcomputer-vision","blog\u002FComputer Vision",{"title":66,"path":67,"stem":68},"Cryptography","\u002Fblog\u002Fcryptography","blog\u002FCryptography",{"title":70,"path":71,"stem":72},"Cyber-Physical Systems: Where Digital Meets Reality","\u002Fblog\u002Fcyber-physical-systems","blog\u002FCyber-Physical Systems",{"title":74,"path":75,"stem":76},"Design Patterns - Why and How?","\u002Fblog\u002Fdesign-patterns-why-and-how","blog\u002FDesign Patterns - Why and How",{"title":78,"path":79,"stem":80},"Edge AI: Revolutionizing Intelligence at the Edge","\u002Fblog\u002Fedge-ai","blog\u002FEdge AI",{"title":82,"path":83,"stem":84},"Edge Computing","\u002Fblog\u002Fedge-computing","blog\u002FEdge Computing",{"title":86,"path":87,"stem":88},"Embracing Decentralized Development","\u002Fblog\u002Fembracing-decentralized-development","blog\u002FEmbracing Decentralized Development",{"title":90,"path":91,"stem":92},"Extended Reality Simplified","\u002Fblog\u002Fextended-reality-simplified","blog\u002FExtended Reality Simplified",{"title":94,"path":95,"stem":96},"Good practices for Git","\u002Fblog\u002Fgood-practices-for-git","blog\u002FGood practices for Git",{"title":98,"path":99,"stem":100},"How do browsers work","\u002Fblog\u002Fhow-do-browsers-work","blog\u002FHow do browsers work",{"title":102,"path":103,"stem":104},"How to be a Full Stack Engineer","\u002Fblog\u002Fhow-to-be-a-full-stack-engineer","blog\u002FHow to be a Full Stack Engineer",{"title":106,"path":107,"stem":108},"How to be an effective Engineer?","\u002Fblog\u002Fhow-to-be-an-effective-engineer","blog\u002FHow to be an effective Engineer",{"title":110,"path":111,"stem":112},"How to choose components for a desktop PC on your own","\u002Fblog\u002Fhow-to-choose-components-for-a-desktop-pc-on-your-own","blog\u002FHow to choose components for a desktop PC on your own",{"title":114,"path":115,"stem":116},"Industry 4.0","\u002Fblog\u002Findustry-4","blog\u002FIndustry 4",{"title":118,"path":119,"stem":120},"Industry 4.0 & Mixed Reality","\u002Fblog\u002Findustry-4-and-mixed-reality","blog\u002FIndustry 4 & Mixed Reality",{"title":122,"path":123,"stem":124},"Internet of Behaviours","\u002Fblog\u002Finternet-of-behaviours","blog\u002FInternet of Behaviours",{"title":126,"path":127,"stem":128},"Internet of Things","\u002Fblog\u002Finternet-of-things","blog\u002FInternet of Things",{"title":130,"path":131,"stem":132},"Let's talk about SOLID Principles","\u002Fblog\u002Flets-talk-about-solid-principles","blog\u002FLets talk about SOLID Principles",{"title":134,"path":135,"stem":136},"LiDAR","\u002Fblog\u002Flidar","blog\u002FLiDAR",{"title":138,"path":139,"stem":140},"Machine Vision -Transforming Industries AI","\u002Fblog\u002Fmachine-vision-transforming-industries-ai","blog\u002FMachine Vision -Transforming Industries AI",{"title":142,"path":143,"stem":144},"Mathematics in Software Engineering","\u002Fblog\u002Fmathematics-in-software-engineering","blog\u002FMathematics in Software Engineering",{"title":146,"path":147,"stem":148},"Micro Frontends - A Modern Approach to Front-End Development","\u002Fblog\u002Fmicro-frontends-a-modern-approach-to-front-end-development","blog\u002FMicro Frontends - A Modern Approach to Front-End Development",{"title":150,"path":151,"stem":152},"Natural Language Processing","\u002Fblog\u002Fnatural-language-processing","blog\u002FNatural Language Processing",{"title":154,"path":155,"stem":156},"Optimizing for Search Engines","\u002Fblog\u002Foptimizing-for-search-engines","blog\u002FOptimizing for Search Engines",{"title":158,"path":159,"stem":160},"Physics Engine","\u002Fblog\u002Fphysics-engine","blog\u002FPhysics Engine",{"title":162,"path":163,"stem":164},"Point cloud","\u002Fblog\u002Fpoint-cloud","blog\u002FPoint cloud",{"title":166,"path":167,"stem":168},"Processes for Better Software Volume 1","\u002Fblog\u002Fprocesses-for-better-software-volume-1","blog\u002FProcesses for Better Software Volume 1",{"title":170,"path":171,"stem":172},"Processes for Better Software Volume 2","\u002Fblog\u002Fprocesses-for-better-software-volume-2","blog\u002FProcesses for Better Software Volume 2",{"title":174,"path":175,"stem":176},"Processes for Better Software Volume 3","\u002Fblog\u002Fprocesses-for-better-software-volume-3","blog\u002FProcesses for Better Software Volume 3",{"title":178,"path":179,"stem":180},"Quantum Computers","\u002Fblog\u002Fquantum-computers","blog\u002FQuantum Computers",{"title":182,"path":183,"stem":184},"Quantum Computing and its Potential Impact on Software Development","\u002Fblog\u002Fquantum-computing-and-its-potential-impact-on-software-development","blog\u002FQuantum Computing and its Potential Impact on Software Development",{"title":186,"path":187,"stem":188},"Quantum Cryptography","\u002Fblog\u002Fquantum-cryptography","blog\u002FQuantum Cryptography",{"title":190,"path":191,"stem":192},"Ray tracing - What you need to know","\u002Fblog\u002Fray-tracing-what-you-need-to-know","blog\u002FRay tracing - What you need to know",{"title":194,"path":195,"stem":196},"Reflections on how we code","\u002Fblog\u002Freflections-on-how-we-code","blog\u002FReflections on how we code",{"title":198,"path":199,"stem":200},"Robotic Process Automation","\u002Fblog\u002Frobotic-process-automation","blog\u002FRobotic Process Automation",{"title":202,"path":203,"stem":204},"Self Driving Cars - A Better Tomorrow","\u002Fblog\u002Fself-driving-cars-a-better-tomorrow","blog\u002FSelf Driving Cars - A Better Tomorrow",{"title":206,"path":207,"stem":208},"Semantic Web - A Smarter Future","\u002Fblog\u002Fsemantic-web-a-smarter-future","blog\u002FSemantic Web A Smarter Future",{"title":210,"path":211,"stem":212},"Sensor Fusion","\u002Fblog\u002Fsensor-fusion","blog\u002FSensor Fusion",{"title":214,"path":215,"stem":216},"Serverless Computing and the Future","\u002Fblog\u002Fserverless-computing-and-the-future","blog\u002FServerless Computing and the Future",{"title":218,"path":219,"stem":220},"Shaders","\u002Fblog\u002Fshaders","blog\u002FShaders",{"title":222,"path":223,"stem":224},"Smart Home Automation","\u002Fblog\u002Fsmart-home-automation","blog\u002FSmart Home Automation",{"title":226,"path":227,"stem":228},"The Horizon of Cybersecurity","\u002Fblog\u002Fthe-horizon-of-cybersecurity","blog\u002FThe Horizon of Cybersecurity",{"title":230,"path":231,"stem":232},"The Perils of Ray-Tracing","\u002Fblog\u002Fthe-perils-of-ray-tracing","blog\u002FThe Perils of Ray-Tracing",{"title":234,"path":235,"stem":236},"The Psychology of Software Bugs Understanding and Preventing Common Mistakes","\u002Fblog\u002Fthe-psychology-of-software-bugs-understanding-and-preventing-common-mistakes","blog\u002FThe Psychology of Software Bugs - Understanding and Preventing Common Mistakes",{"title":238,"path":239,"stem":240},"Top 5 Advantages of MongoDB","\u002Fblog\u002Ftop-5-advantages-of-mongodb","blog\u002FTop 5 Advantages of MongoDB",{"title":242,"path":243,"stem":244},"Top Trends in Augmented Reality","\u002Fblog\u002Ftop-trends-in-augmented-reality","blog\u002FTop Trends in Augmented Reality",{"title":246,"path":247,"stem":248},"Top features of Unreal Engine","\u002Fblog\u002Ftop-features-of-unreal-engine","blog\u002FTop features of Unreal Engine",{"title":250,"path":251,"stem":252},"Unity 3D - Why to go with it?","\u002Fblog\u002Funity-3d-why-to-go-with-it","blog\u002FUnity 3D - Why to go with it",{"title":254,"path":255,"stem":256},"Virtual Reality Advantages","\u002Fblog\u002Fvirtual-reality-advantages","blog\u002FVirtual Reality Advantages",{"title":258,"path":259,"stem":260},"Virtual Test Drive & Autonomous Driving","\u002Fblog\u002Fvirtual-test-drive-and-autonomous-driving","blog\u002FVirtual Test Drive & Autonomous Driving",{"title":262,"path":263,"stem":264},"WebAssembly and Progressive Web Apps","\u002Fblog\u002Fwebassembly-and-progressive-web-apps","blog\u002FWebAssembly and Progressive Web Apps",{"title":266,"path":267,"stem":268},"What are Best Practices?","\u002Fblog\u002Fwhat-are-best-practices","blog\u002FWhat are Best Practices",{"title":270,"path":271,"stem":272},"What are Digital Twins?","\u002Fblog\u002Fwhat-are-digital-twins","blog\u002FWhat are Digital Twins",{"title":274,"path":275,"stem":276},"What makes Mixed Reality the next big thing?","\u002Fblog\u002Fwhat-makes-mixed-reality-the-next-big-thing","blog\u002FWhat makes Mixed Reality the next big thing",{"title":278,"path":279,"stem":280},"Why Game Engines?","\u002Fblog\u002Fwhy-game-engines","blog\u002FWhy Game Engines",{"title":282,"path":283,"stem":284},"Why we need User Experience Design?","\u002Fblog\u002Fwhy-we-need-user-experience-design","blog\u002FWhy we need User Experience Design",false,{"id":287,"title":18,"author":288,"body":292,"date":386,"description":387,"extension":388,"image":389,"meta":390,"minRead":391,"navigation":392,"path":19,"seo":393,"stem":20,"__hash__":394},"blog\u002Fblog\u002F5 Mistakes Front-end Developers should Avoid.md",{"name":289,"avatar":290},"Aghil Jose",{"src":291,"alt":289},"\u002Fassets\u002Fimages\u002Fabout.jpg",{"type":293,"value":294,"toc":374},"minimark",[295,299,302,307,314,317,321,324,327,331,337,340,344,350,353,356,359,363,366,371],[296,297,298],"p",{},"Front-end Developers or front-end Engineers are the responsible bunch for the\nvisual elements that the users see and interact with. From text, colours and\nsize of buttons, images, menus etc... front-end is all about what's visible to\nthe users. It is imperative that interfaces are pleasing to the eye of the\nusers as well as engaging for the success of an application, not to mention a\ngood design.",[296,300,301],{},"Front-end developers should understand the users to ensure prime functioning\nof their application. But still, there are some mistakes often made. Here we\nare focussing on 5 of them. These should be avoided to ensure a good user\nbase.",[303,304,306],"h2",{"id":305},"_1-coding-with-older-html-standards","1. Coding with Older HTML Standards",[296,308,309],{},[310,311],"img",{"alt":312,"src":313},"html5","\u002Fassets\u002Fimages\u002Fblog\u002F200420\u002Fhtml5.png",[296,315,316],{},"Many front-end developers stopped the practice of coding with old HTML\nelements after HTML5 came into existence as the newest form of HTML. HTML5\nallowed making a lot of changes in standard page design. As a matter of fact,\nfront-end development has a heavy reliance on browser support. And, some\nbrowsers don’t get support from older HTML, which can become a burden in a\nlong run. With older HTML, the front-end of your site could also go devoid of\nmany modern and secure features that HTML5 is capable of bringing to your\nsite. Therefore, coding with older HTML could put your site at risk of\nsecurity attacks.",[303,318,320],{"id":319},"_2-using-obsolete-javascript-libraries","2. Using Obsolete JavaScript Libraries",[296,322,323],{},"JavaScript libraries that will not be supported or maintained years later\ncould inflict adverse impacts on your site. If support is no longer available\nfor a JavaScript library that you used to build the front-end of your site,\nyou will find yourself in a difficult situation. You may eventually have a\ndependency that is no longer functional.",[296,325,326],{},"So, it’s good for you to choose JavaScript libraries with active support,\ndocumentation, and consistent updates by their developers. It’s also important\nto ensure that the popular libraries you choose will be maintained for years\nto come. It's always wise to go for libraries that are supported by big brands\nas they tend to last longer than most.",[303,328,330],{"id":329},"_3-not-testing-code-with-major-browsers","3. Not Testing Code with Major Browsers",[296,332,333],{},[310,334],{"alt":335,"src":336},"browsers","\u002Fassets\u002Fimages\u002Fblog\u002F200420\u002Fbrowsers.png",[296,338,339],{},"If you miss out on testing your code for all the major browsers, your site\ncould lose users who still like to use the same older browsers. JavaScript and\nclient-side scripting are intrinsic part of front-end development. Therefore,\nit’s important to test your code in all the major browsers. Front-end\ndevelopers can put into use their sites’ browsing analytics data to identify\ncommon browsers they would like to support.",[303,341,343],{"id":342},"_4-not-creating-responsive-mobile-design","4. Not Creating Responsive Mobile Design",[296,345,346],{},[310,347],{"alt":348,"src":349},"res","\u002Fassets\u002Fimages\u002Fblog\u002F200420\u002Fres.jpg",[296,351,352],{},"We have entered an era where people like to browse the web on phones rather\nthan desktops. The rising trend of internet surfing on mobile phones makes it\nimportant to create a front-end design that is responsive and mobile-friendly.\nModern front-end coding entails responsive design as default.",[296,354,355],{},"If users are unable to access your site on their smartphones, they become\nlikely to move to your competitors whose sites are easily accessible via their\nsmartphones. Google has also stated many times earlier that responsive design\nis their preferred mobile configuration. It means responsive site and separate\nmobile sites get ranking boost in search results way higher than those sites\nthat are unresponsive or not mobile-friendly.",[296,357,358],{},"Since mobile devices have varied screen sizes, it’s worth writing code that\nsupports all possible breakpoints. Developers can use emulators for testing to\navoid the hassle of dealing with several devices.",[303,360,362],{"id":361},"_5-no-focus-on-site-speed","5. No Focus on Site Speed",[296,364,365],{},"Site speed directly affects bounce rates, conversion rates, revenue and user\nsatisfaction. Site speed depends on various factors. For example, client side\ncan become slow due to Spaghetti JavaScript code, whereas large images can\nslow down page loading speed. Slow sites frustrate users, thus it’s beneficial\nto put into use site speed testers that identify design elements responsible\nfor slowing down your site. Good site speed is also important from SEO\nperspective as it is one of the factors search engines take into account for\nrankings. Therefore, it’s a good practice to keep on testing your site and\nkeep a track over its performance.",[367,368,370],"h3",{"id":369},"a-front-end-developer-could-easily-avoid-these-common-mistakes-and-ensure-that-their-site-is-easy-to-use-and-loads-fast-moreover-good-javascript-libraries-and-supported-code-help-design-a-responsive-and-mobile-friendly-site-which-has-become-the-need-of-the-hour","A front-end developer could easily avoid these common mistakes and ensure that their site is easy to use and loads fast. Moreover, good JavaScript libraries and supported code help design a responsive and mobile friendly site, which has become the need of the hour.",[296,372,373],{},"Disclaimer : The views and opinions expressed in the article belong solely to the\nauthor, and not necessarily to the author's employer, organisation, committee\nor other group or individual.",{"title":375,"searchDepth":376,"depth":376,"links":377},"",2,[378,379,380,381,382],{"id":305,"depth":376,"text":306},{"id":319,"depth":376,"text":320},{"id":329,"depth":376,"text":330},{"id":342,"depth":376,"text":343},{"id":361,"depth":376,"text":362,"children":383},[384],{"id":369,"depth":385,"text":370},3,"2020-04-20","An article regarding usual mistakes made by most Front-end Developers\u002FEngineers.","md","\u002Fassets\u002Fimages\u002Fblog\u002F200420\u002FfrontMistake.jpg",{},5,true,{"title":18,"description":387},"dkMEck0G6-2ImkJsvtW_vQDBMKl00Wqa3kH0RZRxzZU",[396,399],{"path":239,"title":238,"description":397,"date":398},"An article regarding the advantages of MongoDB.","2020-04-27",{"path":23,"title":22,"description":400,"date":401},"An article that describes the reasons to do Unit Testing.","2020-04-13",1790439210482]