Get Started for FREE
Sign up with Facebook Sign up with X
I don't have a Facebook or a X account
 Your new post is loading...
Your new post is loading...
Scoop.it!
Today, we’ll be building a realtime collaborative to-do application, where task status is synced in realtime across all connected devices as their state is changed. We’ll use Polymer to build our application, and PubNub to send and receive updates between connected devices, and to sync state. 
No comment yet.
Sign up to comment
Scoop.it!
Creating my own component I wanted to design something simple, so I created a container to hold three radial buttons; one button for each language selection. Users now have the ability to select a radial button associated with a language (en-EN, en-GB, and es-ES), which would in turn be tied into the audio web component and change
Scoop.it!
Polymer Designer is a fantastic browser-based tool made by Google, which allows your to design a paper element inside of the browser with their drag-and-drop GUI. Even better — it spits out the code for you! This proved to be invaluable, when I was learning how polymer worked. I wanted to design something simple, so I created a container to hold three radial buttons; one button for each language selection. Users now have the ability to select a radial button associated with a language (en-EN, en-GB, and es-ES), which would in turn be tied into the audio web component and change the accent.
Scoop.it!
We’re going to build a Q&A system from scratch starting off with setting up your project using Yeoman and outlining the structure. Along the way we’ll talk about custom elements, material design, routing, authentication, security rules, and record priority. Users will be able to write questions, answers, and comments. Both questions and answers can be upvoted. Using security rules, we’ll make sure that users can only manage their own content within Firebase. This is an ambitious blog post with a lot of code. If you find an error or aren’t sure how to continue, leave a comment in the post and I’ll make improvements. Walking through this entire series (in progress) could take an hour or two, but by the end you’ll have a thorough understanding of how to build a basic Polymer app.
Scoop.it!
An important part of compontent-based development is that components can be composed out of other components. The rich text editor is a great example of this since it will be composed out of buttons, drop downs, some sort of rich view and so on. Another good example is the HTML5 video element which again contains buttons and also an element which renders content from a video data stream.
Scoop.it!
Let's face it. Web Components is the next big thing. To make Web Components work in all major browsers, we need polyfills to close the gaps. Luckily, the folks over at Polymer have developed such a set of polyfills to make Web Components work in the browsers today. Whereas Polymer makes use of all four Web Components technologies, X-Tag only depends on the Custom Elements technology and gives the developer the right to opt in for Shadow DOM. And that's okay because that just underlines the different philosophies behind these two projects.
Scoop.it!
One of the biggest things that come with web components, is the fact that you can extend existing elements. And since your own custom elements are also just HTML elements, you can extend them as well as native elements. From a surface point of view there's no differents between native elements and custom elements. Let's take a look at how we can extend existing elements with Polymer. To extend an existing element, Polymer again comes with a nice declarative way via HTML.
Scoop.it!
This post shows you how to connect Angular-controlled components to Polymer-controlled elements via data binding. And we do it all in Dart. Polymer excels at creating encapsulated custom elements. You can use those custom elements in any web app or web page, regardless if that app is built with Angular, Ember, etc. Angular excels at application engineering, with dependency injection, end-to-end testability, routing, and services.
Scoop.it!
Learn how to auto-generate documentation and setup GitHub distribution using Bower, in this second part on sharing Polymer components. In the following tutorial, I'll dig deeper into what untitled-element includes, like its auto-generating documentation feature and how to setup your component to be distributed via Bower. We'll continue using the Reddit component code that I created in my first Polymer tutorial as well.
Scoop.it!
Bosonic is a set of tools that enable you to build and use reusable Web Components now ! By leveraging the power of DOM to build high-level elements, you'll simplify your application code and benefit from 3rd-party elements. What we wanted was a way to build components as this spec describes, shielding ourselves against potential spec changes, and supporting not-so-modern browsers like IE9. And so Bosonic was born !
Scoop.it!
From
github
The angular-bind-polymer library is an Angular directive that enables Angular to bind scope variables to custom element attributes. So if my Angular code has an answered variable in the current scope, I can bind it to a Polymer custom element by injecting the angular-bind-polymer library and assigning the bind-polymer attribute to the custom element: <x-double bind-polymer in="2" out="{{answer}}"></x-double>
Scoop.it!
Web Components are a suite of connected technologies aimed at making elements reusable across the Web. The lion’s share of the conversation has been around Shadow DOM, but probably the most transformative technology of the suite is Custom Elements, a method of defining your own elements, with their own behavior and properties. That’s quite an ambiguous description, so the point of this article is to explain what Custom Elements are for, why they’re so transformative and how to use them. Please note, first, that I’ll talk about custom elements (common noun) when discussing the concept and Custom Elements(proper name) when discussing the technology, and secondly, that my humor tends to wear very thin very quickly. Let’s push forward.
Scoop.it!
a.k.a. Web Components outside of Google * Templates * Custom Elements * Shadow DOM * HTML Imports * (and more…)
|
Scoop.it!
Getting started with Polymer, a library to create web components, reusable packages of HTML, CSS and JavaScript. As you can see web components still has a long way to go before it’ll be supported natively by browsers and reach maturity, but luckily nothing is stopping us from already taking a look at it today. And if nothing of that rang any bells, don’t worry, it’ll become clear once we look at some examples!
Scoop.it!
Strand is a growing library of common UI widgets built as web components. Strand components are cohesive in look and feel and designed to be interoperable. We've built Strand atop Google's Polymer framework.
Scoop.it!
I first developed the idea of making Polymer components play along with Marionette.js for a talk on architecture and components I gave at the inauguralNodevember conference in Nashville, TN.* If you would like to watch my talk, you can view it onYouTube. Toward the end of my talk, I demoed creating a custom name tag element. Furthermore, I showcased the ability to wrap that custom element with a custom Marionette view type and keep model data synced with a regular Marionette ItemView. I would like to go into more detail the steps I took to create this custom Marionette view type and how I was able to keep model data synced.
Scoop.it!
The Polymer library uses Web Components technology supported by all modern browsers, including mobile browsers on iOS and Android. Add custom web elements that encapsulate a complete user interface — including UI interaction handling, transition animation, and flexible CSS styling — to your web applications or hybrid mobile apps.
Scoop.it!
There's so much new ground to cover with Web Components and Polymer that oftentimes some of the smaller conveniences are overlooked. Here are some of the cool things Polymer can do (or does for you) that you might not have noticed. * Built-In Element Methods * Layout Attributes * Auto-Binding Templates * Attribute Reflection
Scoop.it!
In doing our trainings and in writing my book, Human JavaScript and within our team itself we’ve come to realize there is a huge gap between picking a tool, framework, or library andactually building a complete application. Not to mention, there are huge problems surrounding how to actually build an app as a team without stomping on each other. There are sooooo many options and patterns on how to structure, build, and deploy applications beyond just picking a framework. Few people seem to be talking about how to do all of that, which is just as big of a rabbit hole as picking a framework!
Scoop.it!
A year after pulling back the curtains on the Polymer Project, Google’s taken part of I/O 2014 to demo what the code can do. Right on cue, the web is abuzz with discussion comparing Polymer to other popular web frameworks, and it’s no surprise since it bears some resemblance to Google’s very own AngularJS. Join me after the break as I introduce Polymer and explore just how it relates to Angular.
Scoop.it!
Web Components aim to solve some of these complexities by providing a unified way to create new elements that encompass rich functionality without the need for all the extra libraries. Web components are comprised of four different specifications (Custom Elements, Templates, Shadow DOM and HTML imports) which are being fleshed out in the W3C. To bridge the gap and give developers access to this rich functionality now, Google has created the Polymer library which serves as a set of polyfills to bring the promise of Web Components to you today. Let's dive a little deeper into. What this library can do, is allow us to create reusable components that work as true DOM elements while helping to minimize our reliance on JavaScript to do complex DOM manipulation to render rich UI results.
Scoop.it!
Polymer brings an implementation of material design to the web. The paper elements range from controls to effects and user interaction. Recap everything Polymer at Google I/O 2014. Watch sessions videos and DevByte shorts.
Scoop.it!
Scoop.it!
I have a reliable Karma / Jasmine test for my AngularJS that plays with Polymer. The only problem is that I don't understand it.
Scoop.it!
Reusable web components in glorious isolation Polymer lets you create your own <HTML>tags in complete isolation from what the rest of the web page is doing. The result is rock-solid, reusable code that just works™. Learn how to get the most out of this exciting new platform. As web application complexity spirals out of control, next generation browser features that cut through the craziness remain out of reach.
aelena's comment,
March 4, 2014 5:10 AM
thanks for commeting... just one more question, Was it something you think can be practical and feasible in a real live environment or is it more of an academic exercise?
|
