💋 @ CSC
A simple hookup app designed for anonymous romantic liaisons.
Built using express, socket.io, and the latest HTML5 technologies. Responsive and mobile-first.
- Write documentation for changes
- Get Giuseppe to look at the weird socket bugs in chat. Might be caused by some weird minify edge case?
- Implement 'bubble-styled' chat UI and replace placeholder well
- Further modularize CSS for chat
- Working session management to prevent multiple users on the same client
- Add match GUI to notify user when a match is found
- Audio framework for "pop" sounds when messages arrive
- Added Webkit notifications on match
- Secure websocket implementation and strictly check inputs!!!
- Implement progressive font rendering to prevent FOIC
- On mobile devices, when the phone sleeps the websocket disconnects. Upon wakeup, when client tries to send a message the node server crashes
- Session checking is still extremely weird. Sometimes, on mobile the session is seen as duplicated, even when it's not.
In order to begin installing and developing the newest version of Hookups
installed and available on your system.
Installing dependencies via npm
Next, download all of the dependencies related to this project with npm.
additional devDependencies such as
grunt are also required.
npm install --devDependencies
grunt as an automated toolchain for combining, stripping,
order to run Hookups
As of commit
grunt build system has been refactored and
modularized to have different build options for different environments. Hookups
When running Hookups
grunt to the desired target environment. If you
plan to develop Hookups
development target will aid debugging and provide linting while
the production target is optimized for a production environment:
Of course, for switching between
development toolchains, simply
rerun the commands desired, and the files will be overwritten.
including as a part of the project repository! Therefore, in order to run the
project, these files must be built with
When that is done, start the node server by simply running:
Build Pipeline Overview
Development build pipeline: Step: [Sources] [Linting] [Minify] [Linting] [Final] Files: ├──.js ---→ jshint ---→ uglify ---→ jshint ---→ ├──.min.js └──.css ---------------→ cssmin ---------------→ └──.min.css
Production build pipeline: Step: [Sources] [Minify] [Final] Files: ├──.js --------------→ uglify ----------------→ ├──.min.js └──.css --------------→ cssmin ----------------→ └──.min.css
At this point, if there are no errors, the installation process is complete.
You may now start developing or using Hookups
Project structure documentation
As of the commit
grunt as a
toolchain component. This means the directory structure has changed. Previously,
.js files are not minified, and are stored under
files were edited directly.
Now, all source files are stored under
resources/sources, and are not publicly
accessible. These are read by
grunt, combined with other relevant files, and
Simplified example diagram
All files inside
resources/sources/css are combined to form one minified css
index.min.css) and a corresponding map file (
. ├── app.js ├── public │ ├── css │ │ ├── index.min.css │ │ ├── index.min.css.map │ └── js │ ├── index.min.js │ ├── index.min.js.map └── resources └── sources ├── css │ ├── common.css │ ├── fonts.css │ └── index.css └── js ├── chat.js └── index.js
size, in order to speed up content delivery. Unused attributes and functions are
stripped, and the finalized output is written to
Under no circumstances is it necessary to edit the output files in
public/! In fact, these files are added to the
.gitignore and should not
Running the project
By default, npm should run this app in development mode. Therefore, certain
settings such as gzip content encoding and HTML minifying are turned off. In
order to compare benchmarks, Hookups
This is generally done by exporting an environment variable to node.
Of course, before running as production, be sure to rebuild the project using grunt to optimize the delivery of static files. This can be done by running:
index.hbs loads 381 KB of content in 5 requests.
and CSS stylesheets are minified.
NODE_ENV=production is set,
index.hbs loads only 129 KB in 5 requests!