
Web Starter Kit - restlessdesign
https://developers.google.com/web/starter-kit/
======
jacquesm
This somehow reminds me of Inception. We have a perfectly functional computer,
then we run a browser on it, we download a bunch of HTML, which in turn will
download a whole slew of JavaScript in order to create the illusion of an
application running natively that offers a subset of what the computer could
offer. The only difference is that this web application supposedly runs on
'all devices' except that every web application is quite brittle once you try
to actually run it on all devices. And forget about device access (though that
is slowly getting a bit better).

The only plus I see in all this is that in the end we are now free of the API
lock-in that OS vendors traditionally required, that we tend to take 'client-
server' applications more or less for granted and that because it is server
centric you don't have to bug your users to download the latest version every
time you improve things (though as was pointed out in another thread, this is
_also_ a disadvantage, as a user you lose control and if the company goes out
of business you could lose it all).

The web also roams much easier.

If we keep going like this for a little while then we're back where we
started, with the graphics terminals from the 80's, (canvas is pretty close
actually) only this time across the WAN instead of a lan and with the ability
to hyperlink between applications.

~~~
ender7
The shocking, unprecedented, world-changing difference that the web brings is
that on the web all you have to do is click a link and your computer
downloads, "installs", and runs a program. No manual installation necessary,
no upgrades, no installers or wizards. No delay. This process is safe -- the
page is sandboxed and can't interfere with the rest of your machine. And these
things can be instantly shared! All I have to do is paste a bit of text to my
friends and it turns into another clickable link that's only a touch away.

Engineers frequently undervalue this feature, especially considering the
things that the web give up in order to achieve it. So yes, it's a pain in the
ass to get that div to align correctly but in exchange you get to run
_instantly_ and _almost everywhere_ [1].

Relevant: [http://xkcd.com/1367/](http://xkcd.com/1367/)

[1] Depending on your target audience, old browsers might be a major problem
(China), but the browser landscape is rapidly improving in terms of a minimum
expected set of features.

~~~
jacquesm
That's the theory.

The practice is that

\- you give your precious data to third parties

\- that the safety problem now shifts from keeping your computer safe to
keeping data in the hands of third parties safe (and this does not always play
out in the way we would like, see codespaces for a recent example)

\- that even the client side safety is a problem, the 'distribution
advantages' have also been recognized widely by the blackhats.

\- that we end up being tracked from here to Tokio and that the web is rapidly
turning into a series of silos that try to have as little as possible to do
with each other.

\- that the final experience is almost always sub-par.

The theory is fantastic, but the practice leaves much to be desired.

~~~
baddox
But in practice it is much better than any alternative multi-platform instant
software installation ecosystem. And in practice, it has led to a thriving
ecosystem of applications, most of which can link to each other and will work
on a large portion of users' devices.

~~~
jacquesm
Yes, absolutely true. But I can't help thinking that there must be a better
way to achieve these goals than this mess we've made.

We're clearly in 'we should be amazed the pig dances at all' territory rather
than in 'look how good the pig can dance'.

~~~
gress
The better way would have been for the open source community to advance the
Linux desktop in the way that OSX has been evolved - i.e. To gradually bring
the advantages of the web back to the OS.

~~~
jp555
But if OSX has evolved that way... Why not just use OSX?

------
fidotron
The web is now hamstrung by the HTML/CSS layout model more than anything else.
The hackery required to attempt to imitate native mobile apps is horrific.

Google would be better off throwing efforts into a new layout engine
leveraging raw JS and WebGL, but with a sane API, than these continuous
attempts to push HTML into places where it doesn't work. If they don't lead it
I can see someone else doing it in such a way that their core money maker of
web scraping and indexing ceases to work.

~~~
protonfish
This is the same complaining I always hear from people who don't want to learn
how to use HTML and CSS. Yes, it is different than what you are used to. Yes,
it will take some time to learn and some of that will be uncomfortable. But
that does not mean that that HTML and CSS are bad. I know this because I
successfully build mobile sites that look and function fine and I assure you
it works.

You say "hackery is required to attempt to imitate native mobile apps" and I
agree with you. Can I ask why it is so important to copy the styling of
native? That seems like a lot of effort for no good reason. Mobile web can be
better than native if you let it, but forcing it to be something else purely
for reasons of fashion is foolish.

HTML/CSS produces a flexible layout that is usable by many different sizes and
types of devices (even audio interfaces) and that is a good thing. It takes
effort to get it working for all of the possible ways it could be used, but it
is possible. After a little practice, it can even get easy. The hard parts of
HTML/CSS would still exist in any flexible layout solution. Making a rigid
screen-painted layout solution avoids problem inherent in flexible layouts
those, but it gives up so much.

~~~
dminor
> After a little practice, it can even get easy.

Just googling for "vertical align text css" should be enough to tell you that
different layout is needed. Why shouldn't there be a layout model that makes
it easy to do the things people are trying to do?

The idea that we shouldn't even attempt to create a better one is silly.

~~~
iLoch
I think the problem comes from a lack of understand of the complexity of such
a task. Vertical align text according to what? The easiest way to vertical
align text is exactly how you'd expect it to be, and it solves the problem
perfectly.

If you want to align text vertically, you just do

    
    
      font-size: 20px;
      line-height: 40px;
      vertical-align: middle;
    

What's the problem?

~~~
bybjorn
.. and then, when the content is wrapped over two lines you get a line-height
that you set just to vertical align the text. Perfect? No :-)

------
mythz
Why does this need to depend on Ruby as well as node.js? As a starter kit
shouldn't it aim for the least dependencies to get started?

So for devs who want to use this with another web framework like Python, They
need to have node, Ruby and Python installed?

Node is extremely easy to deploy/install that's even self-hostable where you
can even check in node.exe (e.g. on Windows) into the repo so no prior
installation is necessary. Just run `node install` to pull in all the
dependencies and your away. Surely that's the kind of dev experience we should
be aiming for?

Are the benefits for SASS over a pure js solution like less that much better
to justify the extra infrastructure dependencies?

~~~
oliyoung
Ruby is a dependency for SASS, that'd be the only reason

~~~
StillBored
There is libsass and sassc
[https://github.com/sass/sassc](https://github.com/sass/sassc)

It works for a fairly large project i'm involved in.

Besides being AFAIU significantly faster then the ruby one, it allowed me to
continue to refuse to add another scripting environment to our already mile
long dependency list.

------
lvillani
I wish I had this in my tool belt a few months ago when we began working on
our web application. The core of our project can be reduced to something like
web-starter-kit but we had to get there with many, many hours of hard-earned
knowledge. I also like the leanness and cleanliness of web-starter-kit, it's
really a nice collection of best-practices and pre-configured tools.

I will definitely incorporate some pieces into our existing project and use it
as a base for our next ones.

Thanks guys!

------
gedrap
Some people hate the idea of shifting everything to Web. Other people hate how
unsuitable HTML5/CSS3 is for replicating native appearance.

But I think overall, it's a good middle ground. There will never be a perfect
solution in the real world (where resources are limited, and companies are
motivated to lock-in).

Web is not a perfect medium, it has it's disadvantages. Web apps were
definitely not in mind when developing and designing Web. But on other hand,
it works and it's proven, it's been here for a while. There are solid
technologies supporting it (nginx, apache, programming languages with their
frameworks). Some say why not native? For the reasons we shifted away from
native. Could we improve current situation with native applications? Maybe.
But it requires a major player to get involved (read: money and skill). Would
they be motivated in pursuing something philosophically right and all, while
current technologies generate a lot of money? Doubt so.

Yes, HTML and CSS were not meant to be used for mobile apps, mimicking native
appearance. As an alternative, we can stick to vendor, and learn vendor
specific stuff which doesn't share much in common, not even programming
languages. Meanwhile HTML/CSS is something much more developers are familiar.
It allows more developers to develop iOS/Android apps. Maybe we should just
make it DRYier like we were doing with so many problems? At first, grid
frameworks came for CSS layout, then Bootstrap. And in future bootstrap-which-
gives-native-iOS/Android look will come? There must be something like that
already. We could throw it all away and create some new API (some suggest JS +
WebGL). But again. It requires major effort, major resources and current
technologies are money machines. So why to stop?

Not everything can be perfect and correct in real world, with real
constraints. Some people prove that wrong from time to time. Will someone do
this time?

------
peter-row
Just a stupid question ... what is it?

edit: Answered in other people's comments - it's somewhere between
HTML5BoilerPlate and Bootstrap - a basic "hello world" bunch of HTML / SASS /
js boilerplate code. This one has an emphasis on mobile.

------
aikah
@addy nice!

so what's the goal here.Why would one use this over bootstrap/foundation/x css
framework?

Do you intend to integrate this with other frameworks you've written and other
Google products like polymer/angularjs? My point is are you developping a
coherent ecosystem or are they just independent tools?

thanks.

~~~
kinlan
I'll just reply because I know Addy is crazy busy. The goal is to give
developers the education and tooling they need to do well out of the box by
following all of our best practices straight away. In this case it can
complement bootstrap and other frameworks because we are not building out a
component library.

------
ondrae
Its interesting they are using GitHub instead of Google Code.

~~~
addyo
Google Code is great, but I personally love GitHub <3 We've been actively
pushing to do more development there across
[https://github.com/google](https://github.com/google)
[https://github.com/googlechrome](https://github.com/googlechrome) and so on.

~~~
wldcordeiro
Google Code has been languishing. You guys could really do some things with it
to make it a competitor with Github and Bitbucket.

~~~
ceejayoz
I see Google Code being in the same spot as Google Reader on Google's roadmap.

~~~
hobofan
I always begin to think the same thing, but then they open source a new
project that is hosted on Google Code.

~~~
davb
I wondered if Google's internal development infrastructure looks like or hooks
into Google Code, making it easy to release code publicly on Google Code.

~~~
willnorris
Not really... it's about the same amount of work whether it goes to Google
Code or GitHub. The teams that have an easier time of it are those that are
using Git+Gerrit internally, since a public release is as simple as `git
remote add` and `git push`. A number of teams continue to use tools like
[https://code.google.com/p/make-open-easy/](https://code.google.com/p/make-
open-easy/) with varying degrees of success.

------
JohnnyPython85
>If you are planning to do the same, spend time listing down all your UI
elements and test whether the theme supports them.

This is all too important when evaluating a prefab Bootstrap theme. In the
past when I have used Wrapbootstrap themes, I've been a few days in frustrated
that something isn't working. Then when I dig into the asset files I realize
that the theme was poorly written and I've been spinning my wheels for
nothing. It's too bad so many themes look nice but simply aren't built the
right way.

------
wuliwong
It seems the navigation disappears entirely when you shrink the window. I
would think they would implement their "hamburger" icon?

~~~
kinlan
Ah, cool I think you have hit an intended design feature. We use min-device-
width to know that you started on a smaller screen (or a wide screen). If you
are on a wide screen responsive elements are changed slightly to fit the
screen. If you start on a small screen you get the hamburger menu.

Can you file an issue on the github project so that we can work on it to see
if it is an issue.

~~~
OutThisLife
On the homepage, the 'hamburger' menu doesn't show. Every other page is fine
though.

------
webXL
Is it just me, or do the fonts on that page look terrible on Windows?

/edit: looks like it's just "Roboto Condensed"

~~~
wyck
No it's not just you, it's everyone using chrome windows, it a bug in their
rendering engine that has been unfixed for years.

There are multiple easy ways to fix this (load order, re-rendering font,
server config)..you would think a web starter kit would get the basics of
fonts right...

The layout is also broken for the icon rows...

Example: [http://i.imgur.com/8DCIsLw.jpg](http://i.imgur.com/8DCIsLw.jpg)

~~~
jahewson
It's not a bug, it's just how GDI ClearType renders text. It doesn't perform
y-axis antialiasing so almost-horizontal curves look blocky. The solution is
to use DirectWrite but Chrome hasn't made the jump yet.

------
tdicola
How does this compare to Yeoman, and is it meant to be a replacement? I
thought Yeoman was made by some Google folks.

~~~
sinaa
From the documentation:

"Web Starter Kit is inspired by Mobile HTML5 Boilerplate and Yeoman's
generator-gulp-webapp, having taken input from contributors to both projects
during development."

~~~
kinlan
It's not a replacement. My opinion on this as a stakeholder is that is meant
for different audience that Yeoman serves. Ultimately we have produced a
highly opinionated stack that developers can start with and customize as they
like (or not if they don't want to). This lets developers who are experienced
quickly start and manipulate it, and lets developers who don't know what a
good workflow looks like be set up for success straight away. Yeoman on the
other hand gives you complete control over how you want your project to be
started and assumes that you know all the answers to the questions the
generator poses.

I also like that Web Starter Kit is just a simple download that you can
extract and be good to go with.

------
jfoster
It's always interesting to see the flurry of Google releases in the month
leading up to Google IO. My understanding is that projects hold out on
releasing in the hopes of being included in the Google IO line-up, but release
just prior to (or after) Google IO if they didn't end up making the cut. I
don't mean to belittle these projects (this one looks quite good, for
example!), just pointing out that you can potentially get a read of Google's
current priorities by comparing the projects released surrounding Google IO
versus the projects released at Google IO. There are some other factors to be
mindful of, such as Google IO's focus on developers, however.

------
sidcool
I am a bit confused here. What is the difference between Dart and Angular, and
this initiative? I hope this does not sound as a dumb question. I am asking
this because people here are comparing it to Twitter Bootstrap.

~~~
spankalee
Dart is a programming language that compiles to JavaScript. The project also
encompasses APIs like collections, async and a much improved DOM API. Dart
also has a node.js-like server VM with IO.

Angular is a client-side web framework that provides templating and data-
binding. It was originally written in JavaScript, and now has a Dart port as
well.

Somewhat relatedly, Google and Mozilla have been working on the web components
standards, which bring some of the features Angular popularized, and some more
fundamental ones as well, natively into the browser. These include Custom
Elements, Shadow DOM, Mutation Observers, Object.observe(), and HTML Imports.

Polymer is a project that helps with building custom elements, it adds some
sugar including templating and data-binding, similar to Angular in some ways,
but completely focused on modern Web Components related standards, and on
elements - not apps or frameworks. You can use Polymer elements in any app
with any framework, or without a framework.

Web Starter Kit looks like a bundle tools to help you build a site with modern
best practices, like responsive layouts, a local dev server, a build system,
mobile-friendly user input, multi-device testing, etc.

Web Starter Kit looks like it's framework agnostic, so you could probably use
Angular or other frameworks to fill in the views, though these days you might
find you don't really need a framework if you're using Web Components.

~~~
sidcool
That's a comprehensive explanation, thanks!

------
moretti
I'm curios about the CSS naming conventions.

I'm assuming for example that _component--modifier-name_ denotes a class
modifier (ex. _.button--primary_ and _.button--secondary_ ) and
_component__descendant-name_ denotes a a descendent node of a component (ex
_articles-list__item_ ).

It looks similar to SuitCSS
([https://github.com/suitcss/suit/blob/master/doc/naming-
conve...](https://github.com/suitcss/suit/blob/master/doc/naming-
conventions.md)). Is there more information about them?

------
redact207
I've been working on a similar web builder with Entomic -
[https://www.entomic.com](https://www.entomic.com) \- that lets you create
sites and get live previews across different browsers and devices as you
develop. It's a little rough still, but it does make responsive development a
bit easier.

------
drcode
I like this tool in theory, but the inital web site for it sucks...

I was interested in learning about their "Live Browser Reloading" but was
unable to learn more about it, as I ended up traveling through a Kafkaesque
labyrinth of documentation pages.

Google guys/gals: Please keep working on this, but also make the website more
friendly!

------
rwhitman
I guess it makes sense that the only library left to have in Google's web
stack was an HTML/CSS framework. So now the circle is complete - you can run a
website in Chrome on a Chromebook with a Starter Kit layout (all images as
WebP of course) on top of AngularJS, running off a Go backend on App Engine.

------
ejain
I can't help but notice that the display of <ul> items is broken (current
Firefix, 14pt min font size)...

~~~
nekitamo
Same here!

------
smrtinsert
I suppose you could go this route. More realistic is to produce different
server side files for each client type and keep it simple.

There are tons of business reasons to make them physically separate as well,
special promotions, advertising requirements, conditional scripts, etc.

~~~
nlh
One reason not to use your method: Google's own guidelines. See:

[https://developers.google.com/webmasters/smartphone-
sites/de...](https://developers.google.com/webmasters/smartphone-
sites/details)

"Sites that use responsive web design, i.e. sites that serve all devices on
the same set of URLs, with each URL serving the same HTML to all devices and
using just CSS to change how the page is rendered on the device. This is
Google's recommended configuration."

Generally I've found that when Google recommends something, their search algo
prefers this too. I obviously don't have direct proof that it does, but if SEO
matters I'd follow what they suggest.

~~~
kinlan
It's an interesting one. Adaptive serving is a reasonable solution when you
are a large site and you can't wholesale merge your site in one go into a
fully responsive solution. We find that Adaptive (i.e, server side detection
of "mobile") leads to way more problems in the long term with maintenance,
keeping up with new devices and also ensuring that you have all the correct
canonical links etc in place to ensure that your "SEO" is still good.

Our guidance is responsive all the things...

------
nullgeo
Ironically the home page for it looks horrible in the latest version of Chrome
under Windows.

~~~
flipcoder
Same here, with Firefox on Linux. The grid shows gaps like the web page is
missing icons when you stretch the window width far enough.

~~~
graedus
For me (Chrome, Win7), the gaps are explained by "PageSpeed Insights
Reporting" and "SASS Support" wrapping down to the next row for all but a
small range of horizontal viewport widths.

~~~
kinlan
Thanks, I'll get the team to look at this.

------
thinkerer
I think if this can be extended to make the changes easy to apply (with real
time checking of how the output will be) and understanding the code
differences, then many of the wireframe companies out there may lose their
appeal....

------
dudus
Twitter Bootstrap competitor?

~~~
addyo
Good question. We don't consider ourselves a Bootstrap competitor, but rather
a combination of best practices and tooling when it comes to starting work on
new multi-device/mobile web projects.

Bootstrap, Zurb and similar libraries provide a great start for prototyping
your apps, but one of the biggest challenges with them is that it’s (almost
too) easy to get stuck using their styles, look and feel for the lifetime of
your application. We think this leads to a poorer experience. It's also easy
to just end up with 100KB+ of styles (unless you're opting for a modular
build) that never get removed.

In Web Starter Kit, we provide you a boilerplate set of base styles and a
visual style guide for your components, but we actively encourage you to
change these to suit your own app. This may require a little more work, but
the reality is that any serious project is going to have it’s own look and
feel and we want you to feel comfortable changing the kit to suit your own
needs.

We also include tooling for removing unused CSS. So, even if you use our
styles (or choose to use Bootstrap instead) we should hopefully help keep your
pages lean.

~~~
joshma
Is there any way to use the tooling independently of web starter kit? Wasn't
able to find a link on the site, are they just warnings you see once you start
developing? Can the tooling account for JS changes and navigation between
pages?

Sorry for the barrage of questions, just really hoping to find a decent tool
to clean up CSS...

~~~
mofle
If it's just cleaning up CSS you're after, I would use UnCSS. Checkout grunt-
uncss task or gulp-uncss to hook it up to your build process. We don't
currently document using the tooling independent of the kit, but you should be
able to pluck the package.json and gulpfile.js and edit per your needs. We'll
try to get this documented.

------
thomasfl
That's it. Google now finally owns the web. The decide what people should find
on the web, and they define the web standards, so why not use their html
templates.

------
irfan
This is how their homepage appear in my chrome:

[http://i.imgur.com/UCfMstr.png](http://i.imgur.com/UCfMstr.png)

------
bgruber
as someone only casually familiar with node and and frontend dev generally,
i'm curious about the instructions to install gulp and other things globally
instead of local to the project. could someone illuminate the reasoning behind
that? my thinking is that you're almost always better off doing things local
to the project if possible.

------
greenpizza13
Feels like a Bootstrap competitor, with many more cross platform features and
shortcuts to optimizations, device access, etc.

------
PeterUstinox
Will this become an official Yeoman generator?

------
leke
It's a good idea, but it's currently lacking the richness of bootstrap.

~~~
addyo
For sure. This is just a start and we don't intend on competing with Bootstrap
in terms of UI components. We spent a long time evaluating many of the
existing UI libraries available today and if a developer chooses to use one of
them with the kit, they can. That's cool.

------
Siecje
I wonder what browsers versions they are going to support at launch.

~~~
addyo
We cover this in our browser support section: [https://github.com/google/web-
starter-kit#browser-support](https://github.com/google/web-starter-
kit#browser-support)

~~~
cozuya
I'll be that guy: this seems nice, I'd love to use it, I'll take another look
some time around 2018 when I can start to consider pitching dropping IE9
support. IE10+ is simply ridiculously prohibitive for something like this.

------
xtx23
isn't this just mostly a copy of Prepros:
[http://alphapixels.com/prepros/](http://alphapixels.com/prepros/) :/

------
jebblue
This seems crude to me compared to my experiences with jQuery Mobile. This
also affirms my belief that custom Android and iPhone development is going to
go the way of the dinosaur. It's all about the web.

------
derengel
for newbies like me this is just to great, cross device webdev can be a
nightmare or this just to good to be true?

------
xbryanx
I was really hoping "Delete key friendly" meant that they weren't forcing
Chrome to bind delete to the back function any longer.

~~~
paulirish
Removing that has been attempted a few times and failed. I would love to see
that shortcut removed myself too. :/

~~~
nguyenhimself
I'm surprised more people don't know about this BackStop extension that does
just that:
[https://chrome.google.com/webstore/detail/backstop/pidcjgldc...](https://chrome.google.com/webstore/detail/backstop/pidcjgldchekcoolelhbjfbnccjkckfj)

