Modern Web Development
By David Higgins
Part one HTML5
The W3C co-opted the term 'HTML5' to mean the following:
HTML5 = HTML + JS + CSS? Most of that technology mentioned in the previous slide is made possible with JavaScript, and modern browser feature implementations. Apart from semantics and multimedia, all the other technologies mentioned in that illustration should be distinguished from HTML5 The core concepts introduced in HTML5 are: - Richer semantics - Multimedia - Forgiving markup HTML5 has nothing to do with CSS3
Currently:
We are still figuring out modern Browser capabilities. There are many experiments and demos happening daily with HTML + JS + CSS. We have returned to the early days of DHTML
Community confusion You can use HTML5 today. Not a complete standard yet, but still a wonderful step forward.
Never before has it been so pertinent to lay the foundations for future web developers to build upon. HTML5 is infrastructure building. A utopian web has never felt so near.
Part Two The Community
The Web-Dev community:
It has always thrived, and always will. Brimming with talent. Very fun to be involved in. No one developer is the same as another. Social media has changed the landscape Web designers are web developers too!
Part Three Reading material
Modern web development concerns all these subjects. They depend on each other.
Progressive enhancement. Responsive Design. High Performance. MIME types. Below the fold design. Internationalisation. UI patterns. Colour psychology. Anti patterns. Discoverability. Feature creep. Design principles. User experience. Navigation. Link rot. Form vs function Browser exploits Input validation Server logs
Part Four: Security
The state of security on the web now:
html5sec.org discloses a range of browser exploits. The latest anti-virus programs now detect obfuscated JS as potentially abusive. The Java Plugin was blocked by Mozilla on Feb 2011. Browser "sandboxing" has huge potential With tools like FireBug, and browser dev tools getting better, we have a sort of X-Ray vision into a site's code and its intentions like never before.
Part Five Developing with JavaScript + CSS
JavaScript tips
If you can dream it up, it's been done already, by someone, in JavaScript. Our job as developers is to pick the projects which deserve the most attention, and improve on them JavaScript has many pitfalls, even for advanced coders. WTFJS.com documents the more quirky aspects of the language. Before doing anything in pure JS (library agnostic JS), ask could it be easier to use a library? If solely using a library, ask can I do this more efficiently without a library? Maybe you need to use a micro-library? microjs.com has all you need.
Javascript's popularity: It is a well known fact that JavaScript is the most popular language at the moment
The freedom and ease by which users can view a site's source-code has propelled JavaScript to center stage Some developers love the language so much, they have suggested jQuery, and other game-changing libraries to be 'baked' into the browser. Javascript doesn't care that you use x = new Array() instead of x = [] but syntax police will berate you for it.
CSS3. What you need to know:
Much more behaviour oriented than before Now we have features like calc(), 3D transformations, transitions, and a generous array of new selection methods to play with Offloads animation to the CPU (Hardware acceleration). Responsible for numerous trends like Lobster font, Ribbons, and "pure CSS" demos. Many tools exist online now to combat vendor-prefix issues. css3please, prefixfree, and cssprefixer, to name a few Coercing vendor prefixed CSS into a 'standard' version ignores the efforts of the W3C
CSS3. The future
In webkit, you can style scrollbars with CSS There is an ongoing debate over how much control a designer should have over native controls MozillaLabs' Chromeless project allows the site visitor to forget they're using a browser One day, the actual browser window may be freely styled with CSS, who knows? JavaScript emulations of the SELECT element styled with CSS are testament to how much control designers want in a web page.
Part six Browsers
"Anyone who slaps a this page is best viewed with Browser X label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network." - Tim Berners Lee
Modern browsers
Modern browsers are designed by the web, for the web End users have a say in how browsers should be designed With extensions / addons, feature creep is not an issue More focus is put on standards than ever before Open source has allowed modern browsers to flourish Closed source / propietary browsers still remain an issue...
Getting involved
Promote open source browsers by telling friends, family, and colleagues about them Go out of your way to install firefox/chrome on people's computer, and explain why you did it Use your online influence and web presence to explain why closed source browsers conflict with the open web's ethos
Part seven Can I haz more?
The behemoths of web development:
The MDC (Mozilla Doc Center) The Chromium Projects Yahoo Developer Network The Smashing Network The JavaScript Garden Micro JS. Micro libraries A List Apart
That's all folks. And remember:
The more you learn, the better you get, and the faster you become The 'Zone' is the only mindset necessary to develop anything Changing people is not a challenge, it's a waste of time. Find your fellows, don't try to make them. Get gold trough mining not alchemy. If it's not fun, it's not worth doing. Coding web apps and websites should not be like coding assembly. The best developers are the ones who freely admit they know nothing about anything, but everything about nothing :)
