Web Antipatterns

F I N D I N G A N T
I - P A T T E R N S O N W E B T E C H N O L O G I E S Web Anti-patterns

Javascript ¡  Needed: Attach a function to an event on
a HTML element Example: Show an alert message when clicking a button. Anti-pattern: <button onclick="javascript:alert('Hello');"/>

Why is this an anti-pattern?

Javascript Solution: Add the code in a js file or
a script block in the page as a second option. <button id="say-hello">Click to Hello</button> <script type="text/javascript”> document.getElementById('say-hello') .addEventListener("click”, function(){ alert('Hello!') }, false); </script>

Javascript - Requirement: Add a HTML node in the tree
on run time Anti-pattern: Add the element with ... “HTML strings” & document.write var varWithContent = “paragraph content”; var parrafo = “<p>” + varWithContent + “</p>”; document.write(parrafo); This depends strongly of the context, in some cases, for several insertions to the DOM, like elements in a list, is better to create them with strings and at the final just do one insertion of all the string inserting several elements as one because every manipulation to the DOM affects the performance.

Why is this an anti-pattern?

Javascript   Solution: use the right javascript functions var parrafo
= document.createElement("p"); var contenido = document.createTextNode("Hola Mundo!”) parrafo.appendChild(contenido); document.body.appendChild(parrafo);

CSS Problem # Add styles to an element: Anti-pattern: Use
of style attribute on html elements. Example: <input type=“text” style=“width:20px; height:20px;”/>

CSS   Solution Add the styles on a linked style
sheet or in a style block as second option <head> <title>Test</title> <style> .test { width: 20px; height: 15px; } </style> </head> ….. ….. <input type=“text” class=“test”/>

Web Antipatterns

Web Antipatterns

danielzm

More Decks by danielzm

Featured

Transcript

F I N D I N G A N T

Javascript ¡  Needed: Attach a function to an event on

Why is this an anti-pattern?

Javascript Solution: Add the code in a js file or

Javascript - Requirement: Add a HTML node in the tree

Why is this an anti-pattern?

Javascript   Solution: use the right javascript functions var parrafo

CSS Problem # Add styles to an element: Anti-pattern: Use

CSS   Solution Add the styles on a linked style