Simple web app developed while using Browsersync
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
extras
js
README.md
index.html

README.md

Starting point for Browsersync driven development

Browsersync example app

About

This little web app was developed by Sergey Lukin (@sergey_lukin) using Browsersync with a single purpose - provide a basic starting point for anyone interested in Browsersync to test it's capabilities. Think of it as a DIY kit which is assembled in a very minimal setup and which you could change/enhance while using Browsersync to get the feeling of developing against multiple devices/browsers simultaneously + bringing your skills to test along the way.

This project was created to serve as an practical example for a blog post released on Code4Startup.com

Try it now!

Here is just a short snapshot of how Browsersync allows navigating this app across multiple devices/browsers:

Browsersync example app demo usage

Here is a short video demo of me fixing some bugs and adding some features using Browsersync:

Working on web app using Browsersync

How to start

  • Install browsersync using

    npm install -g browsersync
    
  • Change directory to this project and run

    browser-sync start --server --files="**/*"
    
  • Connect as many devices as possible and give this small alarm clock a try :)

What you can do with it

I'd highly recommend cloning this repo and start hacking with it. Here is what I'd suggest adding/changing in this app (for best experience don't forget to use Browsersync ;) ):

  • Every time I'm trying out this web app, I find it cumbersome starting to search for the time I want to set alarm to in huge select dropdown that starts with 00:00. It would be helpful to be able to simply increase and/or decrease hours/minutes separately one by one.

  • There is currently no sound produced when the alarm is activated. I would highly recommend fixing this situation. Let all your devices beep all at once in their full glory when synced with Browsersync and alarm is activated :)

  • Currently alarm is activated when view is rendered at exactly same minute and second as alarm was set to. While this is OK it isn't perfect. What if browser will "freeze" for at least a second just when the alarm was supposed to be activated? It will miss it. Alarm clock should be more reliable than that, shouldn't it? See if you can find a better solution.

Credits

I'd like to thank following resources as this project wouldn't exist or wouldn't be that awesome without them: