What do you think?
Rate this book
The Modern Web: Multi-Device Web Development with HTML5, CSS3, and JavaScript
A Guide to Modern Web Development
Today's web technologies are evolving at near-light speed, bringing the promise of a seamless Internet ever closer to reality. When users can browse the Web on a three-inch phone screen as easily as on a fifty-inch HDTV, what's a developer to do? Peter Gasston's The Modern Web will guide you through the latest and most important tools of device-agnostic web development, including HTML5, CSS3, and JavaScript. His plain-English explanations and practical examples emphasize the techniques, principles, and practices that you'll need to easily transcend individual browser quirks and stay relevant as these technologies are updated. Learn how to: Turn outdated websites into flexible, user-friendly ones that take full advantage of the unique capabilities of any device or browser. With the help of The Modern Web , you'll be ready to navigate the front lines of device-independent development.
Today's web technologies are evolving at near-light speed, bringing the promise of a seamless Internet ever closer to reality. When users can browse the Web on a three-inch phone screen as easily as on a fifty-inch HDTV, what's a developer to do? Peter Gasston's The Modern Web will guide you through the latest and most important tools of device-agnostic web development, including HTML5, CSS3, and JavaScript. His plain-English explanations and practical examples emphasize the techniques, principles, and practices that you'll need to easily transcend individual browser quirks and stay relevant as these technologies are updated. Learn how to: Turn outdated websites into flexible, user-friendly ones that take full advantage of the unique capabilities of any device or browser. With the help of The Modern Web , you'll be ready to navigate the front lines of device-independent development.
266 pages, Paperback
First published April 22, 2013
86 people want to read
Ratings & Reviews
Friends & Following
Create a free account to discover what your friends think of this book!
Community Reviews
Displaying 1 - 15 of 15 reviews
February 14, 2014
The web has become a rather fragmented beast these past twenty some odd years. Once upon a time, it was simple. Well. relatively simple. Three-tiered architecture was the norm, HTML was blocking, some frames could make for structure, and a handful of CGI scripts would give you some interactivity. Add a little JavaScript for eye candy and you were good.
Now? there’s a different flavor of web framework for any given day of the week, and then some. JavaScript has grown to the point where we don’t even really talk about it, unless it’s to refer to the particular library we are using (jQuery? Backbone? Ember? Angular? All of the above?). CSS and HTML have blended, and the simple structure of old has given way to a myriad of tagging, style references, script references, and other techniques to manage the miss-mash of parts that make up what you see on your screen. Oh yeah, lest we forget “what you see on your screen� has also taken on a whole new meaning. It used to mean computer screen. Now it’s computer, tablet, embedded screen, mobile phone, and a variety of other devices with sizes and shapes we were only dreaming about two decades ago.
Imagine yourself a person wanting to create a site today. I don’t mean going to one of those all-in-one site hosting shops and turning the crank on their template library (though there’s nothing wrong with that), I mean “start from bare teal, roll your own, make a site from scratch� kind of things. With the dizzying array of options out there, what’s an aspiring web developer to do?
Peter Gasston (author of "The Book of CSS3�) has effectively asked the same questions, and his answer is “The Modern Web�. Peter starts with the premise that the days of making a site for just the desktop are long gone. Any site that doesn’t consider mobile as an alternate platform (and truth be told, for many people, their only platform) they’re going to miss out on a lot of people. therefore, the multi platform ideal (device agnostic) is set up front and explanations of options available take that mobile-inclusive model into account. Each chapter looks at a broad array of possible options and available tools, and provides a survey of what they can do. Each chapter ends with a Further Reading section that will take you to a variety of sites and reference points to help you wrap your head around all of these details.
So what does “The Modern Web� have to say for itself?
Chapter 1 describes the Web Platform, sets the stage, and talks a bit about the realities that have led us to what I described in the opening paragraphs. It’s a primer for the ideas that will be covered in the rest of the book. Gasston encourages the idea of the "web platform� and that it contains all of the building blocks to be covered, including HTML5, CSS3 and JavaScript. It also encourages the user to keep up to date in the developments of browsers, what they are doing, what they are not doing, and what they have stopped doing. Gasston also says “test, test, and then test again�, which is a message I can wholeheartedly appreciate.
Chapter 2 is about Structure and Semantics, or to put a finer point on it, the semantic differences available now to structure documents using HTML5. One of them has become a steady companion of late, and that’s Web Accessibility Initiatives Accessible Rich Internet Applications or WAI-ARIA (usually shortened to ARIA by yours truly). If you have ever wanted to understand Accessibility and the broader 508 standard, and what you an do to get a greater appreciation of what to do to enable this, ARIA tags are a must. The ability to segment the structure of documents based on content and platform means that we spend less time trying to shoehorn our sites into specific platforms, but rather make a ubiquitous platform that can be accessed depending on the device, and create the content to reside in that framework.
Chapter 3 talks about Device Responsive CSS, and at the heart of that is the ability to perform “media queries� what that means is, “tell me what device I am on, and I’ll tell you the best way to display the data.� This is a mostly theoretical chapter, showing what could happen with a variety of devices and leveraging options like Mobile first design.
Chapter 4 discusses New Approaches to CSS Layouts, including how to set up multi column layouts, taking a look at the Flexbox tool, and the way it structures content, and leveraging the Grid layout so familiar to professional print publishing (defining what’s a space, where the space is, and how to allocate content to a particular space).
Chapter 5 brings us to the current (as of the book writing) state of JavaScript, and that today’s JavaScript has exploded with available libraries (Burgess uses the term “Cambrian� to describe the proliferation and fragmentation of JavaScript libraries and capabilities). Libraries can be immensely useful, but be warned, they often come at a price, typically in the performance of your site or app. However, there is a benefit to having a lot of capabilities and features that can be referenced under one roof.
Chapter 6 covers device API’s that are now available to web developers thanks to HTML5, etc. Options such as Geolocation, utilizing Web storage, using utilities like drag and drop, accessing the devices camera and manipulating the images captured, connecting to external sites and apps, etc. Again, this is a broad survey, not a detailed breakdown. Explore the further reading if any of these items is interesting to you.
Chapter 7 looks at Images and Graphics, specifically Scalable Vector Graphics (SVG) and the canvas option in HTML5. While JPEG’s, PNG’s and GIF’s are certainly still used, these newer techniques allow for the ability to draw vector and bitmap graphics dynamically. Each has their uses, along with some sample code snippets to demonstrate them in action.
Chapter 8 is dedicated to forms, more to the point, it is dedicated to the ways that forms can take advantage of the new HTML5 options to help drive rich web applications. A variety of new input options exist to leverage phone and tablet interfaces, where the input type (search box, URL, phone number, etc.) determines in advance what input options are needed and what to display to the user. The ability to auto-display choices to a user based on a data list is shown, as are a variety of input options, such as sliders for numerical values, spin-wheels for choosing dates, and other aspects familiar to mobile users can now be called by assigning their attributes to forms and applications. One of the nicer HTML5 options related to forms is that we can now create client side form validation, whereas before we needed to rely on secondary JavaScript, now it’s just part of the form field declarations (cool!).
Chapter 9 looks at how HTML5 handles multimedia directly using the audio and video tags, and the options to allow the user to display a variety of players, controls and options, as well as to utilize a variety of audio and video formats. Options like subtitles can be added, as well as captioned displayed at key points (think of those little pop-ups in YouTube, etc. yep, those). There are several formats, and of course, not all are compatible with all browsers, to the ability to pick and choose, or use a system’s default, adds to the robustness of the options (and also adds to the complexity of providing video and audio data native via the browser).
Chapter 10 looks at the difference between a general web and mobile site, and the processes used to package a true “web app� that can be accessed and downloaded from a web marketplace like Google Store. In addition, options like Phonegap, which allows for a greater level of integration with a particular device, and AppCache, which lets a user store data on their device so they can user the app offline, get some coverage and examples.
Chapter 11 can be seen as an Epilogue to the book as a whole, in that it is a look to the future and some areas that are still baking, but may well become available in the not too distant future. Web Components, which allows for blocks to be reused and enhanced, while being in a protected space from standards CSS and JavaScript. CSS is also undergoing tome changes, with regions and exclusions allowing more customizable layout options. A lot of this is still in the works, but some of it is available now. Check the Further Reading sections to see what and how far along.
The book ends with two appendices. Appendix A covers Browser support for each of the sections in the book, while Appendix B is a gathering of chapter by chapter Further reading links and sources.
Bottom Line:
The so called Modern Web is a miss mash of technologies, standards, practices and options that overlap and cover a lot of areas. There is a lot of detail crammed into this one book, and there’s a fair amount of tinkering to be done to see what works and how. Each section has a variety of examples and ways to see just what the page/site/app is doing. For the web developer who already has a handle on these technologies, this will be a good reference style book to examine and look for further details in the Further Reading (really, there’s a lot of “Further Reading that can be done!).
The beginning Web Programmer may feel a bit lost in some of this, but with time, and practice with each option, it feels more comfortable. It’s not meant to be a HowTo book, but more of a survey course, with some specific examples spelled out here and there. I do think this book has a special niche that can benefit from it directly, and I’m lucky to be part of that group. Software Testers, if you’d like a book that covers a wide array of “futuristic� web tech, the positives and negatives, and the potential pitfalls that would be of great value to a software tester, this is a wonderful addition to your library. It’s certainly been a nice addition to mine :).
Now? there’s a different flavor of web framework for any given day of the week, and then some. JavaScript has grown to the point where we don’t even really talk about it, unless it’s to refer to the particular library we are using (jQuery? Backbone? Ember? Angular? All of the above?). CSS and HTML have blended, and the simple structure of old has given way to a myriad of tagging, style references, script references, and other techniques to manage the miss-mash of parts that make up what you see on your screen. Oh yeah, lest we forget “what you see on your screen� has also taken on a whole new meaning. It used to mean computer screen. Now it’s computer, tablet, embedded screen, mobile phone, and a variety of other devices with sizes and shapes we were only dreaming about two decades ago.
Imagine yourself a person wanting to create a site today. I don’t mean going to one of those all-in-one site hosting shops and turning the crank on their template library (though there’s nothing wrong with that), I mean “start from bare teal, roll your own, make a site from scratch� kind of things. With the dizzying array of options out there, what’s an aspiring web developer to do?
Peter Gasston (author of "The Book of CSS3�) has effectively asked the same questions, and his answer is “The Modern Web�. Peter starts with the premise that the days of making a site for just the desktop are long gone. Any site that doesn’t consider mobile as an alternate platform (and truth be told, for many people, their only platform) they’re going to miss out on a lot of people. therefore, the multi platform ideal (device agnostic) is set up front and explanations of options available take that mobile-inclusive model into account. Each chapter looks at a broad array of possible options and available tools, and provides a survey of what they can do. Each chapter ends with a Further Reading section that will take you to a variety of sites and reference points to help you wrap your head around all of these details.
So what does “The Modern Web� have to say for itself?
Chapter 1 describes the Web Platform, sets the stage, and talks a bit about the realities that have led us to what I described in the opening paragraphs. It’s a primer for the ideas that will be covered in the rest of the book. Gasston encourages the idea of the "web platform� and that it contains all of the building blocks to be covered, including HTML5, CSS3 and JavaScript. It also encourages the user to keep up to date in the developments of browsers, what they are doing, what they are not doing, and what they have stopped doing. Gasston also says “test, test, and then test again�, which is a message I can wholeheartedly appreciate.
Chapter 2 is about Structure and Semantics, or to put a finer point on it, the semantic differences available now to structure documents using HTML5. One of them has become a steady companion of late, and that’s Web Accessibility Initiatives Accessible Rich Internet Applications or WAI-ARIA (usually shortened to ARIA by yours truly). If you have ever wanted to understand Accessibility and the broader 508 standard, and what you an do to get a greater appreciation of what to do to enable this, ARIA tags are a must. The ability to segment the structure of documents based on content and platform means that we spend less time trying to shoehorn our sites into specific platforms, but rather make a ubiquitous platform that can be accessed depending on the device, and create the content to reside in that framework.
Chapter 3 talks about Device Responsive CSS, and at the heart of that is the ability to perform “media queries� what that means is, “tell me what device I am on, and I’ll tell you the best way to display the data.� This is a mostly theoretical chapter, showing what could happen with a variety of devices and leveraging options like Mobile first design.
Chapter 4 discusses New Approaches to CSS Layouts, including how to set up multi column layouts, taking a look at the Flexbox tool, and the way it structures content, and leveraging the Grid layout so familiar to professional print publishing (defining what’s a space, where the space is, and how to allocate content to a particular space).
Chapter 5 brings us to the current (as of the book writing) state of JavaScript, and that today’s JavaScript has exploded with available libraries (Burgess uses the term “Cambrian� to describe the proliferation and fragmentation of JavaScript libraries and capabilities). Libraries can be immensely useful, but be warned, they often come at a price, typically in the performance of your site or app. However, there is a benefit to having a lot of capabilities and features that can be referenced under one roof.
Chapter 6 covers device API’s that are now available to web developers thanks to HTML5, etc. Options such as Geolocation, utilizing Web storage, using utilities like drag and drop, accessing the devices camera and manipulating the images captured, connecting to external sites and apps, etc. Again, this is a broad survey, not a detailed breakdown. Explore the further reading if any of these items is interesting to you.
Chapter 7 looks at Images and Graphics, specifically Scalable Vector Graphics (SVG) and the canvas option in HTML5. While JPEG’s, PNG’s and GIF’s are certainly still used, these newer techniques allow for the ability to draw vector and bitmap graphics dynamically. Each has their uses, along with some sample code snippets to demonstrate them in action.
Chapter 8 is dedicated to forms, more to the point, it is dedicated to the ways that forms can take advantage of the new HTML5 options to help drive rich web applications. A variety of new input options exist to leverage phone and tablet interfaces, where the input type (search box, URL, phone number, etc.) determines in advance what input options are needed and what to display to the user. The ability to auto-display choices to a user based on a data list is shown, as are a variety of input options, such as sliders for numerical values, spin-wheels for choosing dates, and other aspects familiar to mobile users can now be called by assigning their attributes to forms and applications. One of the nicer HTML5 options related to forms is that we can now create client side form validation, whereas before we needed to rely on secondary JavaScript, now it’s just part of the form field declarations (cool!).
Chapter 9 looks at how HTML5 handles multimedia directly using the audio and video tags, and the options to allow the user to display a variety of players, controls and options, as well as to utilize a variety of audio and video formats. Options like subtitles can be added, as well as captioned displayed at key points (think of those little pop-ups in YouTube, etc. yep, those). There are several formats, and of course, not all are compatible with all browsers, to the ability to pick and choose, or use a system’s default, adds to the robustness of the options (and also adds to the complexity of providing video and audio data native via the browser).
Chapter 10 looks at the difference between a general web and mobile site, and the processes used to package a true “web app� that can be accessed and downloaded from a web marketplace like Google Store. In addition, options like Phonegap, which allows for a greater level of integration with a particular device, and AppCache, which lets a user store data on their device so they can user the app offline, get some coverage and examples.
Chapter 11 can be seen as an Epilogue to the book as a whole, in that it is a look to the future and some areas that are still baking, but may well become available in the not too distant future. Web Components, which allows for blocks to be reused and enhanced, while being in a protected space from standards CSS and JavaScript. CSS is also undergoing tome changes, with regions and exclusions allowing more customizable layout options. A lot of this is still in the works, but some of it is available now. Check the Further Reading sections to see what and how far along.
The book ends with two appendices. Appendix A covers Browser support for each of the sections in the book, while Appendix B is a gathering of chapter by chapter Further reading links and sources.
Bottom Line:
The so called Modern Web is a miss mash of technologies, standards, practices and options that overlap and cover a lot of areas. There is a lot of detail crammed into this one book, and there’s a fair amount of tinkering to be done to see what works and how. Each section has a variety of examples and ways to see just what the page/site/app is doing. For the web developer who already has a handle on these technologies, this will be a good reference style book to examine and look for further details in the Further Reading (really, there’s a lot of “Further Reading that can be done!).
The beginning Web Programmer may feel a bit lost in some of this, but with time, and practice with each option, it feels more comfortable. It’s not meant to be a HowTo book, but more of a survey course, with some specific examples spelled out here and there. I do think this book has a special niche that can benefit from it directly, and I’m lucky to be part of that group. Software Testers, if you’d like a book that covers a wide array of “futuristic� web tech, the positives and negatives, and the potential pitfalls that would be of great value to a software tester, this is a wonderful addition to your library. It’s certainly been a nice addition to mine :).
November 24, 2023
This was a cutting edge book on web development 10 years ago. Inevitably, much of it is out of date. I'm not sure what I expected from this book, but I assumed I was going to get either a better theoretical understanding of how the web works, or alternatively a better understanding of approaches to modern web development. I think this book was somewhat aimed at the latter, but for a short book it has a lot of filler and what is picked for discussion is pretty subjective feature set. Some modules discussed have fallen out of favour to the point that I hadn't even heard of them and others are so ubiquitous that it's crazy that these were so shiny and new back then. This is not to say this is the authors fault or that nothing can be learnt from reading it, but I would suggest picking up something published in the last 2-3 years instead with the rate that web development works. Better yet, go checkout CS50 Web Development and do some coding exercises.
September 27, 2019
As I continue to work on catching up with the world of design and user interfacing, I found this book to be useful to me. Mostly I skimmed it, and got as much from the headings as anything. While I'm not trying to be a CSS coder, I do need to understand the options and history. Just the other day I spend an hour researching z-index and that involved a lot of history. The author references the ancient days of XHTML. Welp turns out I stopped when it was just HTML. Still catching up and I'd recommend this for any other dinosaurs trying to turn themselves into birds. Probably not a super common problem though.
December 2, 2018
Kniha je z roku 2013, v IT ponímaní teda ancient. Zaoberá sa len niekoľkými prvkami, vysvetľuje ich a ukazuje ich použitie. Avšak neposkytuje ucelený pohľad na web. Pre začiatočníka je značne neúplná, pre skúseného príliš jednoduchá. Netuším, kto mal byť cieľovkou.
May 21, 2018
Review
Introductory book to shiny new features coming into HTML, CSS and JS as of 2013, at this point it feels pretty dated and some mentioned features ended up being implemented in different ways, e.g., the navigator.connection object. It's still a quick, easy and refreshing read, it took me like two days to go through it and I feel like it still provided some value.
I picked it up cause wanted a light read, had my expectations clear to prevent feeling disappointed.
This book touches on the things you probably stopped using: jQuery, PhoneGap, Appcelerator Titanium, Modernizr, Mustache; the things that became mainstream long ago: HTML input types, media queries, addEventListener(); and the ones you probably never used: HTML semantic tags like article, aside, hgroup. I mean; nav, header and footer are kinda useful but.. what's the difference between article and section anyways?
However, it touches on interesting topics like RDFa, landmark roles, SVG and canvas.
Notes
- Use aria attributes for accessibility, like aria-haspopup="true".
- Landmark roles help with backwards compatibility and accessibility for HTML5 tags like role="main".
- RDFa is an extension that provides a predefined schema for describing content, eg.: < p property=" p>
- Microdata aids with semantics (has a DOM api too), eg.: < p itemscope>I live in < span itemprop='city'>London span>< /p>
- You can set the viewport metatag through CSS and modify it for different breakpoints.
- Try combining aspect-ratio, DPPX, device-orientation for more custom media queries.
- Use the media query DOM api for listening to more custom window resizing events.
- Play with img tags object-fill and object-position.
- Never set the overall font to a fixed value like 10px, use percentage units so it doesn't override the user's browser setting.
- Properties to divide content into columns: columns, column-[count|width|span|rule|gap], break-[before|after|inside]: column.
- Flexbox is useful but don't use it for laying out an entire page, use grid layouts instead.
- The repeat() function helps defining grid columns.
- fr is a new unit that means fraction, i.e., a fraction of the remaining space.
- Download script tags without pausing the HTML parser by using:
* defer: executes script after HTML is loaded.
* async: executes scripts as soon as it's downloaded.
- A shim (or shiv) is a piece of code that intercepts a call and provides a layer of abstraction (sounds like a facade).
* A polyfill is a specific type of shim that adds support for experimental features to browsers that don't support them.
- DOMContentLoaded event triggers when DOM is ready, meaning that the in-memory representation of the HTML is built but resources may still be downloading.
- window load event fires when all resources (img, css, js, etc) have finished downloading.
- Device APIs:
* navigator.geoLocation.getCurrentPosition().
* navigator.geoLocation.watchPosition: returns an id that can be canceled with navigator.geoLocation.clearWatch.
* window.addEventListener('deviceorientation', fn) for accelerometer events.
* window.navigator.vibrate().
* window.navigator.getBattery().
* navigator.connection.
* navigator.getUserMedia() to ask for use of the mic and camera.
* element.requestFullScreen().
- SVG are made of geometrical shapes formed with a coordinate system, i.e., images are formed of a bunch of points plotted on a grid and lines drawn between those points.
* They're good for illustrations like icons and logos, but not for photographs.
- Bitmap graphics are a series of coloured pixels laid out on a grid.
* The reason they don't scale well is cause when resizing, the computer applies a resizing algorithm to increase or decrease the sizes of the pixels, adding and removing where necessary, algorithms are usually better at removing than adding.
- Linked SVGs (through an img tag src attribute) can't be accessed through CSS or JS.
* Can use the embed tag for that.
- Can use SVG for sprites by using icons with id or fragments.
- Drawing on canvas is bitmap based so not as scalable as SVG.
- autofocus attribute, when present multiple times, the first DOM element gets it.
- spellcheck and lang attr for spell checking (of course).
- You can have form fields outside of the form itself by adding form="form-id" to the fields.
- Datalist tag gives suggestions on input fields.
- There's a progress tag.
- And a meter tag, for like charts maybe.
- And an output tag for showing results of stuff like calculations.
- Form validation with: required, pattern, novalidate, formnovalidate.
- Can access validation through a DOM api: input.willValidate, input.checkValidity(), the invalid event.
- Can target validation pseudo classes with CSS (required, optional, valid, invalid, etc).
Introductory book to shiny new features coming into HTML, CSS and JS as of 2013, at this point it feels pretty dated and some mentioned features ended up being implemented in different ways, e.g., the navigator.connection object. It's still a quick, easy and refreshing read, it took me like two days to go through it and I feel like it still provided some value.
I picked it up cause wanted a light read, had my expectations clear to prevent feeling disappointed.
This book touches on the things you probably stopped using: jQuery, PhoneGap, Appcelerator Titanium, Modernizr, Mustache; the things that became mainstream long ago: HTML input types, media queries, addEventListener(); and the ones you probably never used: HTML semantic tags like article, aside, hgroup. I mean; nav, header and footer are kinda useful but.. what's the difference between article and section anyways?
However, it touches on interesting topics like RDFa, landmark roles, SVG and canvas.
Notes
- Use aria attributes for accessibility, like aria-haspopup="true".
- Landmark roles help with backwards compatibility and accessibility for HTML5 tags like role="main".
- RDFa is an extension that provides a predefined schema for describing content, eg.: < p property=" p>
- Microdata aids with semantics (has a DOM api too), eg.: < p itemscope>I live in < span itemprop='city'>London span>< /p>
- You can set the viewport metatag through CSS and modify it for different breakpoints.
- Try combining aspect-ratio, DPPX, device-orientation for more custom media queries.
- Use the media query DOM api for listening to more custom window resizing events.
- Play with img tags object-fill and object-position.
- Never set the overall font to a fixed value like 10px, use percentage units so it doesn't override the user's browser setting.
- Properties to divide content into columns: columns, column-[count|width|span|rule|gap], break-[before|after|inside]: column.
- Flexbox is useful but don't use it for laying out an entire page, use grid layouts instead.
- The repeat() function helps defining grid columns.
- fr is a new unit that means fraction, i.e., a fraction of the remaining space.
- Download script tags without pausing the HTML parser by using:
* defer: executes script after HTML is loaded.
* async: executes scripts as soon as it's downloaded.
- A shim (or shiv) is a piece of code that intercepts a call and provides a layer of abstraction (sounds like a facade).
* A polyfill is a specific type of shim that adds support for experimental features to browsers that don't support them.
- DOMContentLoaded event triggers when DOM is ready, meaning that the in-memory representation of the HTML is built but resources may still be downloading.
- window load event fires when all resources (img, css, js, etc) have finished downloading.
- Device APIs:
* navigator.geoLocation.getCurrentPosition().
* navigator.geoLocation.watchPosition: returns an id that can be canceled with navigator.geoLocation.clearWatch.
* window.addEventListener('deviceorientation', fn) for accelerometer events.
* window.navigator.vibrate().
* window.navigator.getBattery().
* navigator.connection.
* navigator.getUserMedia() to ask for use of the mic and camera.
* element.requestFullScreen().
- SVG are made of geometrical shapes formed with a coordinate system, i.e., images are formed of a bunch of points plotted on a grid and lines drawn between those points.
* They're good for illustrations like icons and logos, but not for photographs.
- Bitmap graphics are a series of coloured pixels laid out on a grid.
* The reason they don't scale well is cause when resizing, the computer applies a resizing algorithm to increase or decrease the sizes of the pixels, adding and removing where necessary, algorithms are usually better at removing than adding.
- Linked SVGs (through an img tag src attribute) can't be accessed through CSS or JS.
* Can use the embed tag for that.
- Can use SVG for sprites by using icons with id or fragments.
- Drawing on canvas is bitmap based so not as scalable as SVG.
- autofocus attribute, when present multiple times, the first DOM element gets it.
- spellcheck and lang attr for spell checking (of course).
- You can have form fields outside of the form itself by adding form="form-id" to the fields.
- Datalist tag gives suggestions on input fields.
- There's a progress tag.
- And a meter tag, for like charts maybe.
- And an output tag for showing results of stuff like calculations.
- Form validation with: required, pattern, novalidate, formnovalidate.
- Can access validation through a DOM api: input.willValidate, input.checkValidity(), the invalid event.
- Can target validation pseudo classes with CSS (required, optional, valid, invalid, etc).
July 30, 2013
The Modern Web outlines current web development trends using HTML 5, CSS3 and JavaScript. The main objective of the book is to equip the user with a range of skills to develop functionality on a variety of different browsing platforms by building on key ideas and concepts.
The author gives plenty of ‘real-word� examples along with hints and tips in order to plan content and develop modern, effective websites.
Not only will this book help create new dynamic-looking sites, but it will also be useful in revamping older websites, giving them a modern look and feel. It also gives the reader information on the latest thinking, techniques and future direction of the web.
The book is not aimed at beginners so some prior knowledge will be useful, however it is written in plain English that is easy to follow and enjoyable to read. It is not an end-to-end reference book but more of a primer to get started with various topics.
The author has also written a book on CSS3 and so has the experience and background knowledge to encourage decent web development as CSS3 and JavaScript are now almost synonymous with HTML.
The code samples within the book work well alongside a bibliography and suggested further reading sections at the end of each of the chapters.
The Modern Web should be on every web developer’s bookshelf!
Reviewed by Raj Sharma MBCS CITP, SharePoint Consultant
The author gives plenty of ‘real-word� examples along with hints and tips in order to plan content and develop modern, effective websites.
Not only will this book help create new dynamic-looking sites, but it will also be useful in revamping older websites, giving them a modern look and feel. It also gives the reader information on the latest thinking, techniques and future direction of the web.
The book is not aimed at beginners so some prior knowledge will be useful, however it is written in plain English that is easy to follow and enjoyable to read. It is not an end-to-end reference book but more of a primer to get started with various topics.
The author has also written a book on CSS3 and so has the experience and background knowledge to encourage decent web development as CSS3 and JavaScript are now almost synonymous with HTML.
The code samples within the book work well alongside a bibliography and suggested further reading sections at the end of each of the chapters.
The Modern Web should be on every web developer’s bookshelf!
Reviewed by Raj Sharma MBCS CITP, SharePoint Consultant
October 28, 2013
The Modern Web was a very enjoyable and entertaining overview of some of the most interesting changes and additions in HTML 5. It is definitely not for a beginner, as it assumes a reasonably thorough knowledge of HTML, CSS and JavaScript. Bu that keeps the book from being ginormous and boring to the rest of us.
While there are many very practical examples, the book ends up striking a good balance between an overview and a reference. What it is not is a tutorial, but then it doesn't claim to be one, either. By this, I mean that this book won't teach you how to build an HTML 5 app. It will guide you in making good decisions on the app you are already building.
The practical value for me is that I'm confident it will help me make better design choices in a few areas on my next front end project, while hopefully helping me avoid some dead ends that I may have otherwise gone down. Gasston does an admirable job of both pointing out the shiny parts of HTML 5, as well as the dull ones.
While there are many very practical examples, the book ends up striking a good balance between an overview and a reference. What it is not is a tutorial, but then it doesn't claim to be one, either. By this, I mean that this book won't teach you how to build an HTML 5 app. It will guide you in making good decisions on the app you are already building.
The practical value for me is that I'm confident it will help me make better design choices in a few areas on my next front end project, while hopefully helping me avoid some dead ends that I may have otherwise gone down. Gasston does an admirable job of both pointing out the shiny parts of HTML 5, as well as the dull ones.
August 2, 2013
Great overview of everything current on the web. Really excels in its relevancy--so in about a year it'll probably be obselete. There's a great style of scratching the surface on everything you'd need to have a handle on to do web design; but definitely not for people who don't have a working knowledge of all three languages.
May 15, 2014
Not being a full-time front-end developer myself, this book provided a useful overview of the state of the web, circa 2013. You are not supposed to know everything after reading this, but you will know where to look for more information. This also makes the book mercifully short, so this is not your typical html/css/javascript doorstop.
July 29, 2013
The Modern Web is a good book to catch somebody up on the new rules of website development with HTML5 and CSS3. It's able to build upon your existing knowledge to make the lessons easily understandable while being short and too the point.
May 1, 2015
I gave up on this book, not because it was poorly written, just because I felt like I was reading specs about tech that was already out of date. Web Technology changes so quickly that I think I'll get my information from the web or magazines instead.
Read
March 28, 2014006.76 G254 2013
May 2, 2014
It was not immediately obvious when a section was hypothetical or about upcoming features, at least on the ePub version. Otherwise, a very informative book with good examples.
October 9, 2015
Good introduction about HTML5 world, but it's a little bit obsolete. It was published in 2013.
Displaying 1 - 15 of 15 reviews
Can't find what you're looking for?
Get help and learn more about the design.