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...
Jen makes a great point on her presentation. Where are the awesome layouts that we see in print reflected on the web? We are not tied into the "rectangular boxes" wisdom of the web anymore. We have technologies like shapes, clip paths, masks and many other technologies that make square boxes almost obsolete. Don't get me wrong... rectangles have their place and we shouldn't make all out content replicas of printed material but, Rather than taking the challenges and opportunities of print as a source of ideas and inspirations we became stuck in the Holy Grailhttp://alistapart.com/article/holygrail layout and we'll leave...
Compositing and Blending Level 1http://dev.w3.org/fxtf/compositing-1/ candidate recommendation provides a way to composite elements in HTML and SVG using CSS. Think of the way you can create non destructive clips and masks in Photoshop; the idea is the same but rather than use Photoshop we can use CSS in the browser. We'll look at the basics of CSS Blend Modes and some examples of their applications to text. The specification is supported in Firefox, Chrome and Opera with partial support in Safari and, as far as I can tell, without prefixes according to caniuse.comhttp://caniuse.com/feat=css-backgroundblendmode Getting started One of the first examples...
CSS Shapeshttp://dev.w3.org/csswg/css-shapes/ allow designers and content creators to match some magazines layouts where the text wraps around images and other polygonal and irregular shapes. Why do I include shapes in an essay about typography? As you can see in the examples below, shapes change the way the text relates to the surrounding images. Imagine what we can do with irregular shapes or letters thinking of Dropcap applications.It can also be used to create shapes with text inside the shape this is not part of the level 1 specification and deferred to level 2 which is currently a working draft. !Example...
Depending on the context and the type of text you're using animations can be useful. CSS Animation Level 1cssanimations provides a way to animate CSS properties over time. It uses key frames to create the animations. We will work through an example similar to the Mozilla Developer Network basic animation examplehttps://developer.mozilla.org/samples/cssref/animations/cssanim1.html. The same or similar process can be used for other types of animations. The first thing we do is work setting up the animations in the elements we want, in this case, h1. Also note that we have to set up each attribute twice and maybe 3 times: One...
One of the most intriguing things we can do with text is change its position and the way it looks on the screen with nothing but CSS in browsers that support it. The good news is that all browsers except IE8 and Opera Mini support transformationshttp://caniuse.com/feat=transforms2d so we won't have to do workarounds. !An example of what is possible with CSS shapes and transformations taken from A List Apart's article CSS Shapes 101http://alistapart.com/article/css-shapes-101 by Sara Soueidanhttp://sarasoueidan.com/.https://res.cloudinary.com/dfh6ihzvj/image/upload/cscale,w500/fauto,qauto/rhombic We'll start with rotating the header of our content 90 degrees and move it down the column. See the Pen CSS Content Rotation -...
