It depends on your target platforms. The only desktop browser to fully implement web components is Chrome and by extension Opera so the webcomponent.js polyfill must be used for any kind of meaningful support. It's also important to note that the polyfills don't work particularly well on mobile devices and I haven't tested them in any e-book reader where I assume they will not work. It depends on the the scope of your planned components. If your planning to progressively upgrade elements on your page then it makes sense to take the plunge and use them now. However, if you're...
I'm mostly familiar with using Web Components specifically Polymer as the front end for either JSON or Firebase backends. My research has turned to how do we make web components play nice with other frameworks, MVC and otherwise. Sole Penadés talks about Web Components and also what to expect when using web components with other frameworks : We can take two approaches to Web Components: Whole cloth or progressive enhancement. Whole cloth is building a custom element hierarchy with the associated elements needed to achieve your application goals. It may require multiple elements like the ones below where each element...
When I first started working with Web Components I looked at the biggest way to use them. In creating my own components I own all of the component, the scripts, the encapsulated CSS and the responsibility of making sure that they worked and worked well with other components and other elements in the page. In learning how to use Web Components we'll look at both the big and the small picture: Creating full custom components and createying type extension custom elements. Custom Components The ability to create fully customized and reusable elements is what attracted me to Polymer and the...
To illustrate how to create web components we'll use the same element for all three methods. The end result will look like the example below: markup We'll look at the differences between a script based approach used in x-tags and a declarative take using Polymer. Using vanilla Javascript javascript var MyAvatarPrototype = Object.createHTMLElement.prototype; MyAvatarPrototype.createdCallback = function { var username = this.getAttribute'username'; var service = this.getAttribute'service'; var url = 'http://avatars.io/' + service + '/' + username; var img = document.createElement 'img' ; img.setAttribute'src', url; this.appendChildimg; }; document.registerElement'my-avatar', { prototype: MyAvatarPrototype }; or with tags and scripts: markup function addAvatarservice, username {...
Wilson Pagehttp://wilsonpage.co.uk/ wrote a lengthy article in Mozilla Hacks about the state of web componentshttps://hacks.mozilla.org/2015/06/the-state-of-web-components/. What I found most interesting about the piece are the reasons why web components have not reached recommendation status in the W3C. Quoting the article: > By now, 4 years on, Web Components should be everywhere, but in reality Chrome is the only browser with ‘some version’ of Web Components. Even with polyfills it’s clear Web Components won’t be fully embraced by the community until the majority of browsers are on-board. > > Why has this taken so long? > > To cut a long...
I can think of a few reasons why we should build and use web components. Clean and DRY Code If you look at the source code of any large web application you'll see that it's a mess of divs and enough tags to make it really hard to follow. Gmail looks bad in the sense that the source is almost impossible to follow and understand, the class names only make sense to the people developing the application and, most likely, no one else. !Screenshot of browser showing source code for Gmailhttps://res.cloudinary.com/dfh6ihzvj/image/upload/cscale,w500/fauto,qauto/gmail-source So does Facebook !Screenshot of browser view source showing...
Web Components are a set of technologies that allow developers to create custom tags for their web projects. The technologies that make up web components are: - Custom Elementshttp://w3c.github.io/webcomponents/spec/custom/ allows you to create custom tags for your project-specific needs. These can be brand new tags like book-index or extensions of existing elements with added UI or functionality super-button or footnote-link - HTML Templateshttp://www.w3.org/TR/html5/scripting-1.htmlthe-template-element defines a template for your new element. These templates are inert until you instantiate your elements in your page - Shadow DOMhttp://www.w3.org/TR/shadow-dom/ encapsulates CSS to your custom element. This makes the styles in your components independent of...
Now that Polymer has reached 1.0 and that browser vendors are talking about web components, it is time to revisit web components with a more critical eye and ask the following questions: - What are web components? - Why use web components? Why not? - How to use web components? - Where to use web components? - How to build web components? - Should we use web components now? We will discuss 3 web component implementations: - Vanilla web components built by hand using only HTML, CSS and Javascript - Mozilla's x-tagshttps://developer.mozilla.org/en-US/Apps/Toolsandframeworks/Webcomponents - Google's Polymer projecthttps://www.polymer-project.org/1.0/ In order to make...
One final thing For those of us who have been playing in/with 'the web' for 10 years or longer remember pages like the ones in the figures below. There was no Javascript and, I believe, the original CSS specification was released in 1996 so there was no CSS to play with. Netscape Navigator 0.9https://res.cloudinary.com/dfh6ihzvj/image/upload/cscale,w500/fauto,qauto/MosaicNetscape0 !Wikipedia in Netscape 1.22https://res.cloudinary.com/dfh6ihzvj/image/upload/cscale,w500/fauto,qauto/Navigator1-22 !Hyperreal.org circa 1996 via Internet Archivehttps://res.cloudinary.com/dfh6ihzvj/image/upload/cscale,w500/fauto,qauto/hyperreal-org-1996-archive Why do I bring this up? Because we've gotten spoiled by riches. We talk about critical rendering path, page load and web typography and that's good. But we forget that what may be an acceptable page...
Testing on web applications is usually a pain and testing for our typographical work is no exception. We'll discuss how to build a cross-platform arsenal with a single laptop, Open box and 2 virtual machines and how to use that arsenal to test our content, do screen shots and even start adding ebook apps on all of them. Here we go: What do we need to test with? I'm a Mac user so that's my primary platform for testing and development. In my Mac I have the following browsers and applications: Desktop - Chrome releasehttp://www.google.com/chrome/browser/desktop/index.html and Canaryhttps://www.google.com/chrome/browser/canary.html The Canary channel...
