Live website:
https://gifchat-el.glitch.me/
https://el3015.itp.io:8083/index.html

Code: https://github.com/emilylin-itp/live-web/tree/gh-pages/wk4/20191006_gif_chat

Note: still a WIP, need to work out the css/responsiveness bit. Also have to figure out why the camera + username input doesn’t work once I run it on forever in the terminal. In general, I need to learn how to properly add the SSL certificate to my express server. I went back to using the http request server so I could add the certificates, but it doesn’t always work?

Credit: Biggest thank you to super helpful resident Dan for helping me getting set up on glitch as a solution for the security issues I’ve been stumbling across! Will figure out security stuff, but am really digging glitch so far!

—

For this week’s assignment, Tushar and I decided to develop our gibberish chat project from week 2. Instead of chat messaging between 2 people, we wanted to allow the pair to send gifs to one another. Not only gifs, but gibberish gifs. Initially we had sought to mess with the base image text to create glitchy gifs. However, we didn’t get to it in time. Making a javascript gif turned out to be complicated enough.

I focused on integrating the socket room partnering code with our new gif code, html+ css, and trying to get the images to be displayed as frames. So every time I clicked the image would be stored in the array. Then the images would be displayed as animation frames using “appendChild” function. Tushar worked on the code for making it into a gif and sharing the gif via socket.io.

This time around, I wanted to use bootstrap (just a personal goal to try to make more responsive designs). But I think this messed things up a bit – it became a mess when really it shouldn’t have been. Need to spend more time make it look like the current version but without the bootstrap. Overall, coding this was a good time!

Questions: 

• The moment I run “forever start server.js” the communication between the sockets are gone! The username doesn’t show up for the other persons and the gif also doesn’t appear. Why does this happen when I run it forever, works fine when I run node server.js?
• How can I add the SSL certificate to my express server and still use socket.io.  Followed this: https://hackernoon.com/set-up-ssl-in-nodejs-and-express-using-openssl-f2529eab5bb, but it still didn’t work. I had to change my express to be https server.

—

Helpful Resources:

• https://stackoverflow.com/questions/42327498/output-an-array-of-images-in-javascript
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now
• https://stackoverflow.com/questions/56659157/how-to-play-each-video-from-array-when-an-image-is-clicked-using-javascript
• https://www.sitepoint.com/frame-by-frame-animation-css-javascript/
• https://www.cssscript.com/frame-by-frame-sprit-animation-roger/
• https://dev.to/martyhimmel/animating-sprite-sheets-with-javascript-ag3
• https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
• https://gist.github.com/companje/b95e735650f1cd2e2a41
• https://hackernoon.com/set-up-ssl-in-nodejs-and-express-using-openssl-f2529eab5bb (Setting up ssl in express)