Scribd
Upload
93 views

Modern Web Development

The document discusses modern web development and covers several topics: - HTML5 and its core concepts including richer semantics and multimedia. JavaScript and CSS are important technologies that enable HTML5 features. - The web development community which thrives on talent and innovation from individual developers using social media. - Key aspects of modern web development like responsive design, performance, internationalization and security issues. - JavaScript tips and trends like increased use of libraries as well as CSS3 capabilities and ongoing evolution of browsers and standards.

Uploaded by

David Higgins
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
93 views

Modern Web Development

The document discusses modern web development and covers several topics: - HTML5 and its core concepts including richer semantics and multimedia. JavaScript and CSS are important technologies that enable HTML5 features. - The web development community which thrives on talent and innovation from individual developers using social media. - Key aspects of modern web development like responsive design, performance, internationalization and security issues. - JavaScript tips and trends like increased use of libraries as well as CSS3 capabilities and ongoing evolution of browsers and standards.

Uploaded by

David Higgins
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 33

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 :)

You might also like