Blog

Read posts about our work, web components, and web development in general. To get our latest posts, follow us on Twitter or subscribe to our RSS feed.
October 17, 2016
Our experience upgrading web components from Shadow DOM/Custom Elements v0 to v1
With Google now shipping both Shadow DOM v1 and Custom Elements v1 in Chrome, and Apple shipping Shadow DOM v1 in Safari, we’ve been upgrading the Basic Web Components library from the original v0 specs to v1. Here’s what we learned, in case you’re facing a similar upgrade of your own components, or just want to understand some ramifications of the v1 changes.
June 13, 2016
Can Service Workers service background applications?
I had a thought experiment on how I might port an application I once developed for native Android to a web app, even if it were to run solely on Android devices. The application behaves like a mantle clock: every fifteen or thirty minutes, it wakes up and plays a custom chime. My son used to call it "Big Ben in Your Pocket."
May 2, 2016
We made our static site work offline in a day using the Service Worker API
We believe in progressive web applications as a strong alternative to native mobile applications. Along with small experimental projects we conduct on the side, we intend to improve our web site over time with new techniques and patterns, both to educate ourselves as well as to demonstrate the worth of these browser improvements. Our latest improvement makes use of Service Workers. You can now view most of the Component Kitchen website offline, courtesy of the power of Service Workers.
April 5, 2016
Replacing your server-side template language with plain JavaScript functions
We’ve rewritten the component.kitchen backend server to rip out a popular templating language and replace it with plain JavaScript functions. Recent language improvements in ES2015 have, in our opinion, made it a sufficiently capable general-purpose language that we’ve dropped use of a special-purpose template language. As we began a rewrite of our site, we were inspired by our recent work using plain JavaScript functions to create web components and decided to apply the same philosophy to our backend as well.
March 14, 2016
Using React app techniques at the web component level with Redux, virtual-dom, and JSX
The rising interest in React inspired us to try implementing web components that use a reactive approach to rendering. As an experiment, we’ve redone a React tutorial in web components, using Redux for predictive state management, JSX for rendering state, and virtual-dom for comparative DOM updating. Essentially, we treat each web component as if it were a reactive application in its own right. Our goal isn't to push an agenda, but to learn what the reactive web component patterns might look like.
February 29, 2016
Writing a web component that wraps a standard HTML element might alleviate the need for is="" syntax
What if you want to create a web component that extends the behavior of a standard HTML element like a link? An early draft of the Custom Elements specification allowed you to do this with a special syntax, but the fate of that syntax is in doubt. We've been trying to create custom variations of standard elements without that support, and wanted to share our progress. Our results are mixed: more positive than we expected, but with some downsides.
February 15, 2016
Web components let you preserve the backward compatibility of your own old code
An interesting point of backward compatibility came up as we were recently porting our own Component Kitchen site to plain JavaScript web components. The main goal of the port was to be able to write our own site in plain ES6, with less abstraction between us and the platform. We've also reaped some other benefits: our site is now simpler to build, and much faster to load on older polyfilled browsers like Apple Safari and Internet Explorer.
February 8, 2016
Basic Web Components is a monorepo
Basic Web Components (BWC) is a project containing multiple, often-related Web Components along with support code implemented as mixins. As we have migrated the implementation of BWC from Polymer components to a plain JavaScript approach, we’ve also revisited the way we organize the project to support the following goals:
February 1, 2016
A new release of Basic Web Components based on plain JavaScript component mixins
As discussed in this blog over the past few months, we've been plotting a strategy for creating web components using a library of plain JavaScript mixins instead of a monolithic component framework. We've just published a new 0.7 release of the basic-web-components project that represents a transition to this mixin strategy. So far, this approach appears to be working well, and meeting our expectations.
January 5, 2016
Implementing web component mixins as functions
In response to our last post on building components from a loose collection of mixins, a helpful commenter referred us to another mixin library he had released called mixwith.js. That library treats mixins more as a pattern than a thing. In that pattern, a mixin is simply a function that takes a base class and returns a subclass of that base class with the desired new features.
December 7, 2015
Building web components from a loose framework of mixins
We think it’s generally necessary to use some sort of framework to develop web components, but that framework may not have to be monolithic in nature. Instead, the framework might be built entirely as mixins on top of a kernel that enables mixin composition. Rather than invoking a framework’s class constructor, one would simply compose the desired mixins together to create an instantiable web component.
November 30, 2015
Composing mixins to make a solid foundation for web components
We've been searching for a way to quickly create web components by composing together pre-defined user interface behaviors, and we have some progress to share on that front.
November 2, 2015
An evaluation of polymer-micro as a minimal web component framework
Our Basic Web Components project currently creates its components using Google's Polymer framework, but we've been evaluating the use of the smaller polymer-micro core as a replacement for full Polymer. The polymer-micro core appears to be a useful web component framework in its own right, and may provide nearly everything a component library like ours needs.
October 26, 2015
Nobody writes production web components in vanilla JS — so using a framework makes total sense
You may hear someone say they avoid using React, Polymer, Angular, or some other framework du jour, and that they prefer to write their front end code in vanilla JavaScript instead. But when it comes to writing web components, it seems everybody ends up writing atop a framework — even if it's a tiny framework of their own devising. Production web components written in vanilla JS appear to be very rare.
October 19, 2015
We’re shutting down our web component catalog
We launched this Component Kitchen site in April 2014 with a web component catalog as its centerpiece. Today we're shutting down that catalog so we can focus on web component consulting and our open web components projects, including the Gold Standard Checklist for Web Components and the general-purpose Basic Web Components library.
May 27, 2015
The Gold Standard checklist for web components
For the last few months, we've been excited to help a new open project get off the ground: the Gold Standard checklist for web components. The checklist’s goal is to define a consistent, high quality bar for web components.
January 12, 2015
Try our interactive web components tutorial
We've just posted an interactive web components tutorial that teaches the basic concepts with editable live demos. We hope you'll find that this tutorial:
December 21, 2014
Print a handy 2015 wall calendar built with web components
If you hold or participate in project management discussions, consider printing out this handy Printable Wall Calendar that was quickly built with web components.
December 10, 2014
basic-list-box — keyboard-navigable list box, now with ARIA support for better accessibility
This review focuses not on a component, but an aspect of a component called basic-list-box. Component Kitchen released that component under the aegis of the Basic Web Components project. In our reviews, we want to avoid focusing too much on our own work, but in this case we can happily feature a small but important contribution to the project from developer Marcy Sutton, a passionate advocate for building an accessible web that can be used by everyone.
December 1, 2014
ordered-columns — Pinterest-style packed column layout
ordered-columns implements a packed column layout in the style of Pinterest. Home pages with cards or modules that vary in height often use this layout to pack the cards into columns: cards are assigned in order to whichever column is currently the shortest. Such a layout is quick to compute, produces visually engaging results, maximizes content that appears above the fold. It's a useful responsive design pattern that scales well from small displays to very large ones. Many JavaScript libraries exist to implement this pattern, but this is a great example of a pattern that can be delivered as a web component.
November 6, 2014
akyral-modal – Modal overlay with beautiful demos and documentation
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.
November 3, 2014
x-rating — Simple star rating element that works
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.
October 30, 2014
voice-elements — Easy access to the Web Speech API (on Chrome)
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.
October 30, 2014
A new series of web component reviews with live demos
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.
October 27, 2014
slide-page — Create basic browser-based presentations in HTML
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.
October 20, 2014
google-map — A simple wrapper for maps and driving directions
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.
June 16, 2014
General-purpose web components
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.
May 26, 2014
Live demos let people see what a component is all about
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.
April 30, 2014
Component Kitchen preview launched
Today we’re excited to publicly announce the launch of a preview edition of our site at https://component.kitchen.