a place to put code
Andrew Nease, Web Developer
A multi-user responsive real-time web app for sharing, arranging, and transforming images collaboratively on your laptop or phone.
Users can upload and arrange images on a page. Images can be dragged, resized, and rotated, as well as modified with draggable controls. All page visitors see image transformations simultaneously.
Tools
The app is hosted on Digital Ocean with an Express/Node.js backend, where MongoDB stores the image data after each transformation. On the frontend, interact.js and jQuery UI handle the draggable interactions. Socket.io is used to broadcast changes to all visitors. Images can be uploaded to the server or Amazon S3.
Instagram integration is possible, where images can be dragged directly from a user's library; however, this feature is currently in sandbox mode due to Instagram's API restrictions.
A minimal example of using Oauth for account management.
This page demonstrates a basic framework for account mechanics, allowing users to log in via Google or Facebook.
Tools
The backend uses Express/Node.js and the Handlbars templating engine to route requests and authorization callbacks. The Passport.js middleware assists with authentication. Account information and session details are stored in MongoDB. The page includes a client-side inactivity countdown for kicks.
A Socket.io teaching tool.
A simple chat app that demonstrates sending messages to a server, as well as broadcasting messages to other connected clients.
Tools
This chart uses redux-saga to handle async polling and a C3 module to display the data. It's late 2017, so a slightly modified Bitcoin value is shown.
Tools
A 2-player game with a dynamic, responsive board, loosely based on an improv game with same name.
Built with Rob Hitt.
A short, turn-based game in which players collect mushrooms to increase their power.
Tools
This frontend JavaScript uses ES2015 classes to construct a board and players, capture keypresses, and employ game logic. Soon, the game will be mobile-friendly with a more complicated set of rules.
A customization for jQuery UI's draggable() method.
A jQuery UI implementation in which a user can “lock in” the initial horizontal or vertical axis of a draggable element.
Tools
Presentation materials for a Socket.io demonstration.
During the presentation, participants connect to a 'client' page via their laptop or phone. The presenter uses a 'remote control' to pop open an input box on the connected devices. Each participant adds a name to a box, which then appears in the same position on the 'canvas' page on a main screen in front of the room. Participants can then drag their name and see movements recreated on the collective 'canvas' page.
Tools
As a bonus display, device orientation data is translated to its corresponding name box on the canvas as well.
