Welcome to Component Kitchen, a place to learn about the new web components features in HTML that will transform how you create web apps and sites!

The following Staff Reviews look at web components we think are notable: they're good examples to follow, or they solve a common problem, or they're particularly well-designed. We also write posts about other aspects of web components, including things going on here at Component Kitchen. If you're looking for a particular kind of component, have a look in our extensive compontent catalog of all publicly registered web components.

akyral-modal – Modal overlay with beautiful demos and documentation

Thu Nov 06 2014 08:00:00 GMT+0000 (UTC)

We love the elegant demos and documentation filaraujo is creating for his collection of web components. His akyral-modal component, for example, addresses the common need to have a modal dialog or other UI appear in front of other elements on the page. Several other modal components exist, but none so nicely documented.

Likes: The author's taken care to give akyral-modal a bare-bones appearance. We find often it easier to add our own visual style to a plain component than to try to override a complex visual styling baked into a component's default appearance. We're also a big fan of interactive demos that can be configured on the fly. A demo is worth 10,000 words.

See our full details on akyral-modal

x-rating — Simple star rating element that works

Mon Nov 03 2014 08:00:00 GMT+0000 (UTC)

Sometimes the simplest approach works best. A number of registered web components aim to handle the simple task of showing or soliciting a star rating from a user using the now-convential set of 5 stars. On its own, a 5-star rating system can present serious issues, as users tend to offer responses only at the extremes, but when managed well (adding users to add comments to explain their response, etc.), such rating systems can be useful.

We tried three star rating components:

  • rating-element. We set aside this one aside when we found that it relies on an image sprite; in this age of responsive design, using an image sprite feels a bit antiquated.
  • polymer-star-rating. This is the most full-featured of the three components we looked at: in particular, it's the only one that lets you can use different symbols for each rating, instead of always using a star. We had some difficulties getting the component to work in a demo of our own. (We filed a bug.) There were some other confusing points as well: the package name (polymer- star-rating) doesn't match the element name (star-rating), and the component made assumptions about the location of dependencies like polymer.html that didn't match up with how we'd set up things. Still, we have high hopes for this component.
  • x-rating. This is the simplest component of the lot, but it worked immediately and did what we wanted. It uses Unicode code glyphs for the stars, which has the advantage of picking up the current text color. The glyph unfortunately isn't a parameter you can change, but that's nevertheless fine for the many cases in which you might want to just use a standard star.

Obviously, with any head-to-head comparison like this, it's hard to say which component is really "best" for everyone. But for our quick experiment, we found x-rating did the job simply and well, so that's the component we're showing in the accompanying demo. Nice work, hershmire!

See our full details on x-rating

voice-elements — Easy access to the Web Speech API (on Chrome)

Thu Oct 30 2014 08:01:00 GMT+0000 (UTC)

The voice-elements component gives you easy access to the Web Speech API natively supported (as of this writing) only in Chrome. This lets you both read text aloud to the user, and perform basic voice recognition. Users can quickly tire of repetitive spoken prompts, but voice playback might useful for short alerts that incorporate dynamic content such as data coming from your app.

Likes: This supports multiple accents!

Dislikes: None of the other browsers — Firefox, Safari, and IE — currently support the Web Speech API. We still think components like this are an important indication of the sort of power that components can put in anyone's hand.

See our full details on voice-elements

A new series of web component reviews with live demos

Thu Oct 30 2014 08:00:00 GMT+0000 (UTC)

We've been eagerly tracking the state of the web components community since we started Component Kitchen earlier this year. Over that time, it's been exciting to watch the number of web components registered with Bower grow from about 40 to nearly 500 today.

The growth in our component catalog, however, has meant that it's becoming harder and harder for someone like you to find interesting components just by browsing around. We want to help you find the interesting stuff. To do that, we're making three changes to our site:

  1. We've begun dedicating a portion of our own time to sifting through the catalog of web components for components that are notable in some way. We want to highlight components that: solve a common user interface design problem in a way that can be readily adopted in your own apps, demonstrate how to write good web components, or show off what's possible with web components.

    When we find a notable component, we'll write a small capsule review for it. Along with the review, we’ll craft our own little demo of that component being used in some common way. This demo will let us confirm to ourselves that the component works as advertised, and will also give us a feel for the component’s strengths and weaknesses. We hope these little demos will make it easier for you to see on a small scale what a component might do for you.

  2. We've redesigned our home page to feature these component reviews and other news (like this post). The home page previously featured a complete list of all registered components; that list is now available in the Component Catalog section of our site.

  3. We've moved our temporary Component Kitchen blog feed in house. To get off the ground, we'd hosted our blog on a separate site, but you'll now find it here. If you'd like to keep track of what's happening in the world of web components, subscribe to our blog feed at this new location.

We'll be scouring the catalog of components for interesting work, but if you've seen something you think is worth highlighting, please give us a shout at @ComponentK!

slide-page — Create basic browser-based presentations in HTML

Mon Oct 27 2014 08:00:00 GMT+0000 (UTC)

There are already a number of web components that wrap existing slide-based presentation libraries; slide-page is notable for being written from the ground up with web components. The source code for the core component is little more than a wiring together of existing parts in a novel combination. That approach is, in fact, exactly right, and component writing at its best! This component mostly adds sequential arrow button navigation around Polymer's core-animated-pages component. For the buttons, it takes advantage of Google's Material Design theme, specifically the Paper floating action button.

Likes: Great use of existing Polymer and Paper components; some keyboard navigation.

Dislikes: The stock appearance shows a "Powered by Polymer" banner that few people are going to want. It's possible to turn it off through styling, but we like components whose default appearance is the most practical starting point.

See our full details on slide-page

google-map — A simple wrapper for maps and driving directions

Mon Oct 20 2014 08:00:00 GMT+0000 (UTC)

Many companies embed a hard-coded Google Map on their site to show, for example, the location of their office. This component allows you to easily create more dynamic maps. You could, for example, combine this with geo-location to show your user's current location.

Likes: You can combine the basic google-map component with the companion google-map-directions to provide driving directions from the user to your store, office, etc. This points toward a momentous promise: a domain- specific markup language for creating interactive maps.

Dislikes: In its current state, this component mostly wraps the Google Maps API, which is powerful but rather complex if you're not already familiar with it. In many cases (e.g., a driving route with more than one stop), you'll be forced to use the more complex underlying API. Given Google's preemince in mapping, we'd love to see them push much further with this library of components.

See our full details on google-map

General-purpose web components

Mon Jun 16 2014 08:15:00 GMT+0000 (UTC)

Component Kitchen founder Jan Miksovsky shares some of his recent experience creating some general-purpose components over on his user interface design/development blog at flow|state.

Creating really good general-purpose components entails more work than creating components for a single organization or product. You can find a good list of principles for great general-purpose components on the site for the open source basic-web-components project, which is sponsored by Component Kitchen.

Live demos let people see what a component is all about

Mon May 26 2014 08:00:00 GMT+0000 (UTC)

We recently added live demos to the Component Kitchen site for all components that define a demo. Components with demos are marked on the home page with a "DEMO" indicator, so you can check out all the demos.

We always want to make it as easy as possible to find interesting components, and demos are obviously the quickest way for someone to really understand what a component can do for them. From the beginning of our work on the service, we've wanted to host demos in situ on the pages we build for components. We want to let a user looking for a component to see the demos front and center (without having to link off to another site just to see a demo) so they can quickly find what they're looking for.

As described in our evolving developer documentation, for the time being, you'll need to host the demo at a site you maintain (e.g., a GitHub Pages site for your component repository). You can then include a @demo line in the comments at the top of your component's main source file to indicate where the component is. We've also seen some conventions emerge whereby a component can imply the location of a demo, and we try to detect when one of those conventions is in use as well, but use of the @demo indicator is the clearest way to point to a demo.

We host demos within an iframe, but traditional iframes make it hard to seamlessly incorporate content from another site, and in particular, the page hosting the iframe can't know how tall the framed page is. While it's fine for us to define a default height for a framed demo, we really want demo authors to be able to control how tall the demo is. Some components, for example, are really small, and so it'd be nicer to have the iframe showing the demo be exactly the height it needs to be.

The standard way to securely communicate across a frame boundary is a facility called window.postMessage(). That approach is somewhat cumbersome to use, however. What we really wanted was a way to package that communication up. A web component was, of course, a great way to do that! We've published our solution through our companion of open source project, basic-web-components. There you'll find two components that work together, basic-seamless-iframe, which goes on the framing page, and basic-framed-content, which goes on the framed page. These components cooperatively communicate across the frame boundary so that, among other things, the outer page can correctly adjust the height of the frame.

So, if you'd like to have your demo auto-size when shown on our site, just add the basic-framed-content component to your project, and wrap the contents of your demo in an instance of <basic-framed-content>. The latter won't interfere with anything when someone views the demo on your site, but when someone views your component on Component Kitchen, the demo will communicate its height to the framing page so that the demo looks just right.

Component Kitchen preview launched

Wed Apr 30 2014 22:08:00 GMT+0000 (UTC)

Today we’re excited to publicly announce the launch of a preview edition of our site at http://component.kitchen.

At Component Kitchen, we think web components are fundamentally a great way to create apps and sites that run across an enormous range of desktop and mobile devices. We’re eager to help a mainstream audience learn about this technology, and discover for themselves how this technology is going to amplify their own creative capabilities as designers, developers, writers, students, business people, and more.

Earlier this year, we observed that most of the material and tools related to web components was intended for a fairly experienced technical audience. We feel that, since web components extend what’s possible with plain HTML and CSS, web components is actually fundamentally interesting to a much broader audience: anyone who is comfortable editing HTML. That’s a lot of people!

Additionally, we believe that people creating web components are going to need a range of services to help promote and distribute their components to a broad audience that includes both hardcore developers and people who work at the HTML level.

We’re starting with a few basics:

  • A catalog of components which have publicly registered for use. The preview release is quite basic, but includes some interesting features such as image previews for many components, and an ability to search the catalog.
  • New Web Components RSS feed. Subscribe to learn about new components as soon as they’re registered.
  • A discussion board for talking about web components. There are some other public forums for web components, but they focus on a highly technical audience. Lots of people will want to use components who have never heard of developer hangouts like GitHub or StackOverflow.

We have a number of interesting features ahead:

  • Live, interactive, configurable component demos. You can see an example on the page for the basic-autosize-textarea component. This lets you play with the component and see how its customization options will affect its appearance and behavior.
  • Web component hosting. Many people create HTML in environments like blogging platforms or mainstream web hosting platforms that don’t allow complete control over the site. If that’s you, we want to allow you to still take advantage of web components by hosting the components on Component Kitchen. Again, visit the basic-autosize-textarea component for an example of component hosting. Click the Copy to Clipboard button, then paste the result in any HTML editor or environment. This will paste in the <script> and <link> tags that let you use that component from its hosted location on Component Kitchen.

Our core mission is to help people create great products using web components. While we have many ideas for how we can do that, we’re most interested in hearing from you. If you have questions or suggestions for our site, let us know at @ComponentK on Twitter, or on our discussion board.

This is going to be such an exciting time to work on the web!

« Newer Older »