Show HN: I built my wedding website using Polymer | Hacker News Reader

Show HN: I built my wedding website using Polymer

maggieandcaleb.com

104 pointscaleblloyd68 comments

Congratulations! We are all coming.

Perfect! I'll add more stuff to the registry

Phrasing!

Good choice in marrying the girl, but just dating Polymer. I wouldn't wed myself to Polymer, considering how fickle Google is.

Nice job on the site and best wishes to you and your bride.

Yeah I used Polymer on a production site a year ago. The amount of Google components I had to fork and edit to make them work correctly in all the browsers I had to support was maddening. I think many of the issues I ran into have been addressed but it just soured me on the whole thing (especially since I was never able to get vulcanize to work properly on our mildly complex projext; it had major issues).

Site looks great regardless. That's one of the great things about Polymer.

I might recommend you check out React Standalone if you're interested in Web Components but want to use something familiar (if you're familiar with React that is!). I'm using it right now so I can build an SDK that works both "natively" in a React environment and in vanilla JS + Angular, etc.

That looks pretty interesting. I've done web components manually which were a little awkward but for someone using React this looks compelling. I haven't dived into it much but I'll look into it when I do. Thanks!

Agreed. Also, for being around for more than a year, Polymer is still way behind Android native material components that they claim to emulate. For example, why can't I swipe between the tabs on this website just like an Android ViewPager?

Cool and thanks for sharing. Not as a criticism to you specifically, but a worry I have about technology like Polymer in general: I opened your site and was staring at an empty grey screen for a good 5 seconds.

Maybe your server is busy because of all the HN attention, but I am worried about the future of the web when these kinds of things are becoming normal and acceptable.

I encounter the same issue with every single website written using a modern frontend framework: Angular, React, whatever...

They're considered to be faster but they look so sluggish at loading, I wonder why this is considered acceptable when it's clearly not.

Is it a fundamental issue with this kind of frameworks, or is it due to a bad usage by developers?

Bad frameworks and/or bad usage. Ie, a lot of frameworks don't have good/any serverside support. React does, fwiw.

From my perspective, a good React site is rendered on the server in most scenarios. Meaning the first page you get is pure html and 100% complete. The JS will load and link everything up, but it's nothing that you'll know. If you click a link before the js loads, it should point to a real url and give you full html again. When the js does finally load, json can be used to load new pages, modifying the content with react, etc.

This is also nice because web crawlers (all of them) get simple html, and if a user has JS turned off, they still a lot of your content, perhaps missing some of your UX.

I've implemented a couple content heavy sites like this and it's a nice UX. Performs just as you expect in most scenarios. The only complaint i think that could be valid, is that there is, indeed, a fair amount of JS, which on mobile devices is definitely worse off than if it were just static content.

This is my benchmark for frontend frameworks for the future. Can i compile it, efficiently, on the server before giving it to the user?

One thing I'm disliking is the amount of sites using React.

You get a crazy amount of Flash of Content and things being resized and ordered around during page load. Quite distracting tbh.

Yes, the initial load is heavy. I think lots of it may be device rendering time after the page is loaded- chrome is the only browser that natively renders web components and every other non-blink browser has to wait for polyfills to load. The JS has got to be hard on mobile CPUs especially.

HTTP/2 with server push would help, but I'm hosting on dreamhost shared hosting and they're not HTTP/2 enabled yet. I am using the bundled build option in Polymer which concatenates most of the components, but there's still a lot of assets to serve.

Chrome service worker is working though! Load the site in chrome, then go into airplane mode and hit refresh. (not chrome for iOS though, that's WebKit underneath)

There's also a simple problem in that you're, on that page, not doing much more than showing simple HTML, however in browsers with JS off, for whatever reason, it shows absolutely nothing. Not even a message that JS is required.

On what is normally a pretty good connection this took me 14 seconds to load fully. I think the HN attention is increasing.

Thanks everyone for the congratulations! Thanks also for the 21 and counting RSVPs, some of them are pretty hilarious. I'm looking forward to seeing President Obama, Alec Baldwin, and Mike Hunt at the wedding!

Open source at: https://github.com/caleblloyd/polymer-wedding

Polymer is greatly undervalued. I takes a bit of time to get into it but once you understand all the quirks, it's smooth sailing. I really like the simplicity of it.

React is good too, but you need the right framework on top of it (or else it can be a bit tricky to setup properly).

I can recommend Polymer.dart, static typing + webcomponent encapsulation + polymer elements gives really good framework for webapps. It's still not in 1.0 but it's quite stable now.

I think you can bring the time to initial interactive experience way down by using Polymer CLI. Looking at wedding-app.html it looks like it's loading a lot of elements which aren't on screen yet.

Take a look at the app-drawer-template example and note the line that lazy loads element definitions when pages change: https://github.com/Polymer/app-drawer-template/blob/master/s...

If you use the CLI you can create a polymer.json file that lets you fragment up your site: https://github.com/Polymer/app-drawer-template/blob/master/p... This way you'll create separate vulcanized bundles and you can lazy load them right when the user clicks on the section, hopefully improving that first load experience.

Ignore the haters on HN. Congrats on the wedding!!!

Congrats on the wedding, but this site just shows me that I was right not to invest in polymer. On android chrome, 5 second pageload, which seems to be taking place after the download, followed by laggy animation? Yuck.

This, ladies and gentlemen, is why I prefer Mithril, or at least React. Or heck, even the horrific, broken, awful mess that is angular 1 is better than this, for crying out loud!

I know that Polymer may make things easier as a designer, but newsflash: the end user doesn't give a damn. They want a fast, responsive, stylish site. And Polymer just isn't there.

you spelled her last name wrong. also accommodations

Hahaha you are right, I'll have to fix that when I get home. Or maybe I'll tell Maggie to submit a pull request

Pull Request merged- thanks! Unfortunately it wasn't before Maggie's Mom caught wind of my misspelling: https://github.com/caleblloyd/polymer-wedding/pull/1

Haha. I wish HN was more frivolous at times, so we could use threads like this one for some good laughs on how your mother-in-law has already got you squared out. Congrats btw!

I did my wedding website using wix because she wanted to build it (I did the sysadmin parts of it)

My grandparents live in Wilmington. Open bar? See you at the reception!

Something about the way the borders around the photos shrink while scrolling bugs me. I guess it feels a little akin to how the paintings change in the Disney land/world Haunted Mansions. It's not horrible, but I'm not sure what your intention with the effect was supposed to be.

That said, Congratulations, on the wedding and the website.

Great work! I am not sure you should make this public though, especially the date and place. All the best.

I believe many couples still publish wedding announcements in the newspaper with these same details. Announcing on Hacker News doesn't seem any riskier than putting it in the local paper.

There are hundreds of public wedding details on theknot.com as well.

You are letting the #terrorists win

Congrats!

So what do you think?

About using Polymer I mean. :)

Would love to get some insight as to how the experience was learning and building something in Polymer. I haven't heard much of Polymer lately.

Web Components: I think that web components are absolutely the best way to program a web application. Keeping the CSS, HTML, and JavaScript within the boundaries of a component works wonders for organization. It was such a relief coming from the Angular 1 world I usually work in.

Polymer: The polymer elements that Google provides are good. The polymer-cli is fantastic, it just works and I didn't have to configure gulp/grunt/browserify/webpack at all. The project needs no node modules, all dependencies come from bower! Non-google custom elements out there lack robust browser support and I find that I don't trust them out of the box.

Ecosystem: support for web components has come a ways in the past couple years but still has a ways to go. Chrome natively supports web components but every other non-blink browser uses polyfills, which slows things down. Firefox and WebKit are implementing part of the web components spec, so hopefully it'll get better soon.

It's an exciting technology that is very pleasant to code in. Learning the ropes and building the entire site took 20 hours, most of that was dealing with nitpicky browser support issues with scrolling and animation effects. I hope it continues to gains traction and I would definitely use it again!

Looks great. Do we all get cake?

We were thinking cupcakes!

Even better!

I'm building something in Polymer. I'm a little worried though. It doesn't appear that cross browser comparability is considered a show-stopper by the Polymer team. Things work great in Chrome but they just don't have the same fit and finish in other browsers. In mobile safari things jiggle, redraw, jump around, and sometimes ignore touch input.

It's brave of you to open the comments without a password. Post some of the better ones here.

Best Attendees: "Obama", "Donald Trump (guest is Hillary Clinton)", "Ghandi", "Clint Eastwood"

Best Other Party Members: "Aunt Mimi and her 12 cats"

Best Song: "Never Gonna Give You Up", "Hot cross buns", "Team America World Police", "Happy Birthday"

Best Message: Lots of congratulations and nice words, "Please provide a jacuzzi for my table"

Is it really supposed to have everything on the front page left-aligned in very wide white boxes? Because that's what I get on Safari. http://imgur.com/AnsXVoY

Hmm, that's odd. Didn't test Safari on Desktop, thanks for pointing it out. Maybe a problem with the way I'm using the iron-grid component for grid layout.

Same issue with Mobile Safari on an iPad mini. Congrats. Wilmington in late Nov should be nice. I'm reminded of a book I read a few years back - https://www.amazon.com/Off-Season-Discovering-America-Winter...

Great job! I created my own website with Bootstrap and a couple of hours, but it does not look half as good as yours.

One idea I had was to create a template wedding website service. There are a few out there, but I think the idea can be done better.

Want to know what happens when your server goes down? 600 angry bridezillas. No thanks

Static sites hosted on s3? Low risk of an outage, could be worth the risk

Hey more risk is more profit ;) I would just be afraid of that market, hah.

Hey— the wedding is less than 2 hours away from my house! That's...interesting.

I grew up in Wilmington. Didn't expect to see something on Hacker News from there. That's...cool.

Yeah, 45min from me in Myrtle Beach, SC - small world!

You know, I didn't realize Myrtle Beach was so close to Wilmington, as someone who's never been. (I'm in Raleigh)

Nice! Is the parallax on the Our Story page part of Polymer?

Yes it is! Here's the component: https://github.com/caleblloyd/polymer-wedding/blob/master/sr...

Congrats. Love Polymer (when I get to use it). Looks good.

That's adorable, and also pretty cool. Congrats! :)

should capture RSVPs via https://www.invitespring.com

OP, your site does not show anything without JavaScript. Is there some feature that needs JS on the page or why is it so?

Yes unfortunately JavaScript is required. Instead of using <noscript> I opted for paper invitations in the mail as a fallback.

That does not answer my question. Is there a feature that absolutely needs JS on the page? If so, what is it?

I think you're missing the point. Of course there's nothing this site can't do without JS. It's a side project to learn a new framework.

I might be. I just do not understand why one should use more complex and less accessible web technologies if it does not lead to new functionality. When I learn a new framework, it usually is so I can do things that I could not do without.

It is a website for his own wedding offering a chance to learn something. I don't understand why there is a need to be pedantic about things like the JavaScript only in this context. It is a reoccurring thing on HN and it doesn't invite us to have a good discussion about the dependency to JS. There is also no need to compare it to yourself. It just comes off very self centered. I understand that in many cases you might not need a certain technology but if there is a fun opportunity to learn a certain thing and using it has little to no harm, why not?

"To learn" and "for fun" are perfectly sufficient explanations, even if you don't understand them.

But his point is that the site isn't doing anything that couldn't be achieved without js.

This would be like if a mechanic said he was going to replace your wheels with wooden ones he made himself because he wants to learn how to be a carpenter.

No, it would be like if a mechanic replaced the wheels on his own car with wooden ones to try it out. Nothing wrong with that.

He's not forcing you to drive the car.

where are all the sites that don't use javascript? It's ubiquitous

Congratulations! Kudos on getting the website up.

I RSVP'd, but can you guess under who?

Congrats on both the wedding and a rather slick announcement page. Very nice!

Thank you!

Reply on news.ycombinator.com