• Stars
    star
    139
  • Rank 262,954 (Top 6 %)
  • Language
    HTML
  • License
    MIT License
  • Created over 9 years ago
  • Updated over 8 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

๐Ÿฑ๐Ÿ“ฒ Push notifications with cats and Polymer

caturday-post

Send ๐Ÿฑto browsers around the world using push notifications. Behind the scenes it uses a Polymer platinum-push-messaging element that registers a browser for push notifications, and a node server that collects all the registered clients and sends them cats.

Play with it

In the wild, this lives on a heroku free dyno, so it gets restarted often and drops all of the registered browsers. Not sure that's such a bad thing. You can:

  • register your browser to use push notifications, and receive cats when they are sent out
  • send cats to all the registered clients. The server will only send one cat a minute, because I don't trust all y'all internet people to not spam me.

๐ŸŽ‰๐Ÿ˜ป๐ŸŽ‰

Configure it

There are three items that need to be configured. The ID of your Google Developer Console project, the corresponding API key, and the URL of your MongoDB database.

To find the first two, enable the API through the getting started flow. Ignore that it says it is setting up an Android project, and ensure that you enable Google Cloud Messaging.

You can either set up your own MongoDB server, or add one to your heroku app with:

heroku addons:create mongolab

You can then see the URL of your instance with

heroku config.

Now you need to add a file:

  • a .env file in the root of your project, that contains your config values. This sets the config that should be used by the Heroku foreman tool. It should look something like this:
GCM_SENDER=[YOUR_PROJECT_ID]
API_KEY=[YOUR_API_KEY]
MONGOLAB_URI=[YOUR_MONGODB_URL]

If you want to publicly deploy your app to Heroku you will also need to set the config values on your live app:

heroku config:set GCM_SENDER=[YOUR_PROJECT_ID] API_KEY=[YOUR_API_KEY]

Install it

This uses npm for the node server bits, and bower for the client side Polymer bits (in particular platinum-push-messaging, without which I would have had to slave for days over service worker code. ๐Ÿ’–)

npm install
bower install

Run it

You start the server with

node server.js

This code is also heroku ready, so you can also start it with

foreman start

In your browser, open two tabs:

  • index.html, which lets the browser register for push notifications. You will have to enable push notifications for this to work.
  • meow.html which sends the notifications (let's be honest: the cats) to all the registered clients. It should also tell you how many clients are registered.

Then watch the ๐Ÿฑ roll in.

More Repositories

1

tiny-care-terminal

๐Ÿ’–๐Ÿ’ป A little dashboard that tries to take care of you when you're using your terminal.
JavaScript
5,963
star
2

emoji-translate

๐Ÿ“š Translate text to โœจemoji โœจ!
JavaScript
1,202
star
3

font-style-matcher

โšก๏ธ๐ŸŽจ Matches the x-heights and widths of two fonts
JavaScript
509
star
4

github-canned-responses

๐Ÿ’ค (inactive) Because copy pasting isn't that great.
JavaScript
369
star
5

emojillate

๐Ÿ“ท๐ŸŽจ Pixellate an image into emoji
HTML
342
star
6

frankly

๐Ÿ”ง A Polymer dashboard of issues/PRs for any number of GitHub repos
HTML
321
star
7

emoji-rain

โ˜”๏ธโœจ A Polymer element that makes it rain emoji
HTML
217
star
8

lazy-image

A custom image element that lets you load resources on demand
HTML
213
star
9

cat-dns

๐Ÿ’ป๐Ÿฑ A DNS server that resolves everything to cats.
JavaScript
203
star
10

picasso

๐ŸŽจ๐Ÿ—“ [DEPRECATED] A pretty Google Calendar theme
CSS
159
star
11

flash-cards

๐Ÿ““๐Ÿ™ŠA simple flash cards app to help you learn Japanese (and other languages!)
JavaScript
137
star
12

og-emoji-font

โœจ๐Ÿ“ Emoji font based on the original DoCoMo emoji set
130
star
13

.not-quite-dotfiles

๐Ÿ’ฐ NO JUDGING
Shell
122
star
14

dear-sir-or-madam

๐Ÿ’Œ Bookmarklet that ransomifies your internets
JavaScript
103
star
15

literally

๐ŸŽž๐ŸŽ€ Literally another slide making thingie.
HTML
82
star
16

mojibrag

๐Ÿ“ข stuff. Use โœจ๐Ÿ™Š๐Ÿ˜‚๐Ÿ”ฅ.
HTML
74
star
17

doodle

๐ŸŽจ๐Ÿ‘พ Doodle with pixels and without pressure
JavaScript
68
star
18

midi-visualizer

A midi visualizer web component
JavaScript
56
star
19

is-mu-an-asleep

Electron app to find out if @muan is asleep
JavaScript
52
star
20

twemojify

๐Ÿ’ฅ Use Twitter's emoji api to fix emoji in Chrome
JavaScript
52
star
21

emoji-selector

โœ๏ธโœจ A Polymer paper-input-addon element that adds an emoji keyboard inputs
HTML
51
star
22

knit-a-stitch

๐ŸŽ€ Draw a pattern that you want to knit, and get the knitting chart for it!
JavaScript
48
star
23

diagramophone

๐ŸŽจ code your diagrams, because drawing them really sucks
JavaScript
39
star
24

muster

โ‡๏ธ A website that lets you play with overlapping patterns.
HTML
31
star
25

notwaldorf.github.com

๐Ÿ“ข I lost a bet and now I have a blog.
HTML
31
star
26

to_emoji

๐Ÿค–โœจ Twitter bot that translates every tweet you send it to emoji
JavaScript
30
star
27

ruby-eh

๐Ÿ’Ž Ruby for Canadians: an instruction manual.
Ruby
25
star
28

sparkle

โœจPixelate and sparkle an image. Any image.
JavaScript
22
star
29

example-magenta-in-ts

A demo of using @magenta/music as a dev-dependency in a TypeScript project
TypeScript
21
star
30

polymer-color-picker

[๐Ÿ’ค Deprecated: Go to https://github.com/polymerelements/paper-swatch-picker instead!] A color picker with all the Material Design colours
HTML
18
star
31

is-ie10-dead

๐Ÿ’€ Well, is it?
HTML
17
star
32

meowto

๐Ÿ”ฎ A client-side URL shortener
JavaScript
17
star
33

tensorflow-experiments

JavaScript
13
star
34

gh-wiki-to-pages

[WIP] Automatically publish a GitHub wiki to a gh-pages Jekyll site
CSS
13
star
35

polymer-gold-elements-demo

๐Ÿ’ธ A checkout form using the Polymer gold elements
HTML
10
star
36

old-research-papers

Old Reinforcement Learning research from university
9
star
37

polymer-demo-transmogrifier

[๐Ÿ’ค Deprecated: Go to https://github.com/polymerelements/iron-demo-helpers instead!] Polymer element that renders both the source and demo of a code snippet
HTML
9
star
38

emoji-web-components-art-talk

I gave a talk about web components and art and emoji and this is it.
HTML
7
star
39

bear-or-berra

[WIP, don't look] Who said it, Yogi Bear or Yogi Berra?
JavaScript
7
star
40

shrinkwrap

๐Ÿ‘” [forever unfinished] t-shirt sizing / progress tracking app for scrum planning. because sometimes you just have to. and because i have to learn websockets somehow.
JavaScript
7
star
41

fierimas

๐ŸŽ„๐ŸŽ… It's like Guy Fieri's Grocery Games but for holiday presents
JavaScript
4
star
42

fuck-yeah-css

CSS
4
star
43

shpool-stats

๐ŸŽฑ I play pool every day at lunch and stats need to be had.
JavaScript
2
star
44

ponies

๐Ÿด Here, have a pony
1
star
45

better-form

WIP - look away
HTML
1
star
46

hacknight

Montreal all-girl hack night website!
CSS
1
star
47

input-tests

Look away. Playground to test the v1 custom elements polyfill
HTML
1
star
48

hacknight-chrome-extensions

Sample Chrome Extensions for the all-girl hacknight tutorial
JavaScript
1
star