Weitere ähnliche Inhalte Ähnlich wie WebDeveloper - Yesterday, Today, Tomorrow (20) WebDeveloper - Yesterday, Today, Tomorrow1. Web Developer Yesterday Today Tomorrow Marcin Dembowski .NET Developer @ Goyello 4 HTML5 Day @ Uniwersytet Gdański 30 V 2011 15. NIE: Rozpoznawanie poprzez User Agenta if (x.isIE) { … } <!--[if IE 7]> TAK: Featuredetection try { varcanvas = document.createElement("canvas"); if(canvas && canvas.getContext && canvas.getContext("2d")) { // SUPPORTED } else { // NO SUPPORT } } catch (Exception e) { // NO SUPPORT } TIP: Featuredetection 16. TAK: <html> <head> <title>PageTitle</title> <link rel="stylesheet" type="text/css" href="mypage.css" /> </head> <body> ... </body> </html> NIE: <html> <head> <title>PageTitle</title> <style> .myclass { color: #FF00AA; } </style> </head> <body> ... </body> </html> TIP: Linkuj style w nagłówku 17. NIE: pozostawiaj komentarzy w kodzie strony /* Kobieta i facet - KiF*/ //checkboxy z gustawem i geotargetingiem //wyszarzenie wszystkiego na około //div i tak musi zniknac //gdy myszka jest na divie z miastami ma sie on caly czas wyswietlac <!-- glonews--> <!-- pole przechowuje adres, na który przekieruje po poprawnym zalogowaniu --> <input id="login_redirect" type="hidden" name="redirect" value="/" /> TIP: Usuwaj komentarze w kodzie 23. <?xml version="1.0" encoding="UTF-8" standalone="no"?><!-- Created with Inkscape (http://www.inkscape.org/) --><svgxmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" … <dc:title></dc:title> </cc:Work> </rdf:RDF> </metadata> <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1"> <path style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 286.88332,664.46361 c -0.52155,-3.65088 -0.432,-13.672 -4.04061,-18.18275 -1.78484,-2.23105 -4.40023,-3.73596 -6.06091,-6.06092 -1.75051,-2.45071 -2.54639,-5.46633 -4.04061,-8.08122 -4.432,-7.75599 -6.07654,-7.5263 -12.12183,-16.16244 -4.50371,-6.43386 -7.76548,-13.66851 -12.12183,-20.20305 -1.86778,-2.80166 -4.27632,-5.22586 -6.06092,-8.08122 -6.09137,-9.74619 -2.31156,-5.39363 -6.06091,-14.14213 -2.34522,-5.47216 -6.29711,-13.42723 -10.10153,-18.18275 -1.1899,-1.48737 -2.89775,-2.5168 -4.04061,-4.04061 -0.90351,-1.20468 -1.1168,-2.83593 -2.02031,-4.04061 -1.14285,-1.52381 -2.69374,-2.69374 -4.04061,-4.04061 -2.0203,-2.02031 -3.7752,-4.34663 -6.06091,-6.06092 -1.94248,-1.45686 -3.97883,-2.79136 -6.06092,-4.04061 -1.29125,-0.77475 -2.97581,-0.95551 -4.04061,-2.0203 -1.71693,-1.71693 -2.32368,-4.34399 -4.04061,-6.06092 -1.06479,-1.06479 -2.74935,-1.24555 -4.04061,-2.0203 -2.08208,-1.24925 -3.97883,-2.79136 -6.06091,-4.04061 -1.29125,-0.77475 -2.97582,-0.95551 -4.04061,-2.02031 -1.71693,-1.71693 -2.32368,-4.34398 -4.04061,-6.06091 -1.0648,-1.0648 -2.78767,-1.18501 -4.04061,-2.02031 -2.19281,-1.46187 -5.42954,-7.02893 -6.06092,-8.08122 -0.77475,-1.29125 -1.11679,-2.83593 -2.0203,-4.04061 -1.14286,-1.52381 -3.06062,-2.40729 -4.04061,-4.04061 -1.09567,-1.8261 -0.92464,-4.23481 -2.02031,-6.06091 -0.97999,-1.63332 -2.69374,-2.69374 -4.04061,-4.04061 -0.67343,-0.67344 -1.59439,- … TIP: Uważaj co otrzymujesz z programów 27. ctx.shadowColor= "rgba(0,0,0,1)"; ctx.shadowOffsetX= 5; ctx.shadowOffsetY= 5; ctx.shadowBlur= 2; ctx.strokeRect(70,70,160,160); ctx.strokeRect(90,90,120,120); ctx.strokeRect(50,50,200,200); Globalnie ctx.save(); ctx.shadowColor= "rgba(0,0,0,1)"; ctx.shadowOffsetX= 5; ctx.shadowOffsetY= 5; ctx.shadowBlur= 2; ctx.strokeRect(70,70,160,160); ctx.restore(); ctx.strokeRect(90,90,120,120); ctx.strokeRect(50,50,200,200); Zapamiętanie na „stos” Cofnięcie ze „stosu” TIP: Atrybuty w Canvas są globalne 37. NIE: <html> <head> <title>PageTitle</title> <scriptsrc="functions.js" ... ></script> </head> <body> ... </body> </html> TAK: <html> <head> <title>PageTitle</title> </head> <body> ... <scriptsrc="functions.js" ... ></script> </body> </html> TIP: NIE Linkuj JS w nagłówku* 38. TAK: <html> <head> <title>PageTitle</title> <scriptsrc="functions.js" defer=”defer” ... ></script> </head> <body> ... </body> </html> TIP: NIE Linkuj JS w nagłówku* 39. TAK: Używaj TAB zamiast spacji Kompresuj Twoje pliki Usuwaj komentarze TIP: Zmniejsz rozmiar JS 41. NIE: … <ul> {{each(index, language) languages}} <li>${ language.name }</li> {{/each}} </ul> … <div data-bind="template: 'langTemplate'"></div> TAK: … <scripttype="text/html" id="langTemplate"> <li>${ $data.name }</li> </ul> … <div data-bind="template: {name:'langTemplate', foreach:languages}"></div> TIP: Uważaj jak tworzysz DOM 52. Dziękuję za uwagę Goyello Marcin Dembowski marcin.dembowski@gmail.com marcin.dembowski@goyello.com marcindembowski.wordpress.com twitter.com/D3M80L blog.goyello.com twitter.com/goyello facebook.com/goyello Web Developer Tomorrow Yesterday Today