Currently working with cutting edge front end technologies like: HTML5, CSS3, LESS, SASS, GulpJS, JavaScript, Polymer-Project, AngularJS, C# Razor, Web optimization, Web performance, Yeoman, Bootstrap, …. Testing new unpublished and technologies in draft version and giving feedback to W3 group. Facebook: https://www.facebook.com/boban.radeski LinkedIn: https://www.linkedin.com/pub/boban-radeski/38/952/a90 Twitter: https://twitter.com/master_boban
era of web development based on encapsulated and interoperable custom elements that extend HTML itself. Built atop these new standards, Polymer makes it easier and faster to create anything from a button to a complete application across desktop, mobile, and beyond. • Everything is an Element: The Polymer world-view
of standards which are working their way through the W3C and landing in browsers as we speak. In a nutshell, they allow us to bundle markup and styles into custom HTML elements. What's truly amazing about these new elements is that they fully encapsulate all of their HTML and CSS. That means the styles that you write always render as you intended, and your HTML is safe from the prying eyes of external JavaScript.
to serve your pages (wamp, IIS) • We’ll learn about: • Using HMLT imports • Using Polymer elements with standard HTML, CSS and JavaScript • Basic structure of index.html <!doctype html> <html> <head> <title>unquote</title> <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> <script src="../components/platform/platform.js"> </script> <link rel="import" href="../components/font-roboto/roboto.html"> ... This bare-bones file defines some styles and embeds the platform.js script, which supplies any missing platform features. The link rel="import" element is an HTML import, a new way of including resources into an HTML file.
server to serve our pages (wamp, IIS) <polymer-element name="post-card"> <template> <style> :host { display: block; position: relative; background-color: white; padding: 20px; width: 100%; font-size: 1.2rem; font-weight: 300; } .card-header { margin-bottom: 10px; } </style> <!-- CARD CONTENTS GO HERE --> </template> ... <script> Polymer({}); </script> </polymer-element> The <polymer-element> element is how you define a new custom element in Polymer. In this case, you're creating an element called "post-card". The <template> defines the element's internal DOM structure, or shadow DOM. This is where you'll add markup for your custom element. Used inside a shadow DOM tree, the :host pseudo-class matches the element that hosts the tree. In this case, it matches the <post-card> element. The Polymer call at the end of the file registers the element so it's recognized by the browser.
However, despite the label many people have already had success using Polymer in production. Although things might still change, we encourage developers to take Polymer out for a test drive. From: http://www.polymer-project.org/resources/faq.html
boban
signer
hotchpotch
ayaniwa
kzinmr
afroscript
imai448
rfujii
monochromegane
izumiyama_lab
microbaseinc
youten622
rikkabotan7
chriscoyier
philnash
watany
charlesmeaden
varn
smashingmag
portentint
danielanewman
lara
soudai
brettharned
akademiya2063
