> Optimizing the critical rendering path is critical for improving performance of our pages: our goal is to prioritize and display the content that relates to the primary action the user wants to take on a page. Ilya Grigorik Critical Rendering Pathhttps://developers.google.com/web/fundamentals/performance/critical-rendering-path/index?hl=en The sad truth is that we've become obsessed with speed and how fast does a page load and, for a fast page load, we need to know what to load when. "Above the fold" is a concept inherited from printed media. In the context of web design/development: > Above the fold is also used in website design along...
CSS vendor prefixes are both a blessing and a curse. They are a blessing because, as originally designed, they allow browser vendors to implement new CSS features that were not part of any final specification in a way that could be easily changed when the specification changes or is withdrawn; and, once the specification is finalized, vendors can drop the prefix and developers can use the new properties as they would any other CSS property. They are a curse because, as good as the theory was, it never really worked that way. The web is littered with prefixed selectors long...
Unless you already work with a customizer or are familiar with SASS to know what imports to comment out in order to remove a feature from your CSS framework you are bound to have unused features bloating your CSS and making it bigger than it need to be. Or it may be that your CSS has grown too large after accommodating feature after feature... without removing them your file will bloat to unmanageable sizes. Tools like UnCSS allow you to remove unussed CSS selectors by following these steps: 1. The HTML files are loaded by PhantomJS and JavaScript is executed....
CSS can become very large and very convoluted if we're not careful. This is particularly important when using third party libraries like Bootstrap or Zurb Foundation where most users download the full framework with large chunks of the library that they will never use but still load and push over the wire bloating the application and slowing everything down. When you work with your own code it's easier to slim down but it still makes sense to build a default set of CSS stylesheets for our applications and then selectively choose which ones to use based on the page or...
The tools for making content performant have improved considerably in the last few years. As designers we can now influence the size and the type of resources that the end users will see when they view our content. In this series we'll discuss strategies and tools to minimize the size of our web content: CSS, Javascript, HTML, images, video and audio, along with best practices in serving the content. Good overview of the topic are: - Steve Souder's High Performance Web Siteshttp://shop.oreilly.com/product/9780596529307.do did the first book length treatment of web performance - Steve Souder's Even Faster Web Siteshttp://shop.oreilly.com/product/9780596522315.do updates the...
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...
