This is a little project I am setting up for Chris to teach him github and to clean up his code! - Jeffrey
Shit I am gonna try and remove
- http://ia.net/blog/responsive-typography-the-basics/
- http://try.github.io/levels/1/challenges/1 (a little github tutorial)
- https://www.codeschool.com
- http://maxvoltar.com/archive/-webkit-font-smoothing
- http://aestheticallyloyal.com/public/optimize-legibility/
- https://github.com/eikes/jquery.swipe-events.js
- http://modernizr.com/
- http://stackoverflow.com/questions/7018919/how-to-bind-touchstart-and-click-events-but-not-respond-to-both
- http://stackoverflow.com/questions/15610682/swipe-swipeleft-swiperight-events-do-not-trigger-on-image
- Download github mac app
- Setup your github credentials on the app
- Go to https://github.com/okayjeffrey/Daytripper
- click the Clone to desktop link
- Pick/make a folder where you want to host this code from your computer
MAMP Local PHP Server
- Download http://www.mamp.info/en/index.html
- Open preferences
- On the apache tab select & point it to the folder where your project is hosted
- save prefs & start server
- Go to http://localhost:8888 to see your code
##WORK LIST
WORK LIST 01/08//2014
LOADING TIME -consider S3 loading (hosted from amazon) -test jeff’s JS code: data-src
LOADING SCREEN -could this be the TOC? -preview of next article? -showing you where you are and where you’re going?
NAV // REWRITE -clean up code -use display:inline; consider setting up as php?
NAV // CURRENT STATE -current state to the orange -little triangle arrow pointing down underneath it? -consider white/grey something that goes with all the different background color textures
ARROWS -add slight dropshadow/border (gets lost on bw photos) -are they prominent enough?
HOBOCODE -change hover opacity to hover color (sprite images) —hover to gif animation? -consider how hidden/visible design and placement are -consider using the ‘pulse’ more as seen on /trackings homepage playlist icon
KEYBOARD SHORTCUTS -should there be an icon for keyboard shortcuts? -current keyboard shortcuts (most likely unknown to the user) article overview: “o” or “esc” full screen mode: “f” arrow keys: <- ->
ARTICLES
ARTICLE // OPENING PAGE // CREDIT -get to hover simultaneously or just get rid of hover.. -why does top text get larger on responsive? (has to do with reveal.js framework specs i think) -clean up with antialias code or something like that?
ARTICLE // END PAGE -rethink table of contents, extra step of user -but still have the space of reflection/know it’s the end of the article -include details about the author —photo, paragraph, links IG/site ect -share buttons? -comments? -load in next article from ajax so it just slides over?
ARTICLE // ARROWS -get rid of hover on article credit showing arrow -maybe just use that arrow as the lead in to the story (getting rid of the vertically centered right arrow) -maybe this arrow should be more prominent, orange? pulsing?
HOME
HOME // SUBSCRIBE OVERLAY- follow button button (works on chris’ not on jeff’s)
HOME // ISSUES -consider revising horizontal slide for next issues into a vertical (arrow or next issue button bottom) -right horizontal arrow could link to first article of issue (possibly load through ajax?)
HOME // IMAGE HOVER -consider hover fade or color for the circle image not the man+image
HOME // TOC -fix simultaneous hover on pairs -consider larger text -making it seem more like a TOC -consider hover on pair = change out circle background of mast head image
HOME // HOBOCODE -fix 1 big png, should be separate little ones -users all tried to click on the hobo code preview -maybe add a hover that says what the symbol is or means
TRACKINGS
TRACKINGS // JOURNALS -users always want to scroll up to see crops -consider placing off to the side? -on click journal slides up to the center of page to see whole journal -fade out gradient?
TRACKINGS // HOBOCODE -get rid of open up animation -make it feel more tactile -have map or image slide down —over the image or maybe image gets pushed down? —idea of large table camera panning across it
TRACKINGS // HOBOCODE // RECEPE -replace with live type instead of png -get print/sendto iphone/share to Facebook links working
PASSAGES
PASSAGES // VERTICAL SCROLL -can’t get reveal.js framework to work with my vertical text animation -doesn’t work with mouse wheel or swipe -explanation and stripped down example here hakimel/reveal.js#717 (comment)
-take out little arrows (up/down) -gradient transparency? -add a little dot to the left and right of the last line, animate it up as the page scrolls indicating where to start reading
PASSAGES PULLQUOTES -add white drop shadow for image overlay clarity
WAYFINDING
WAYFINDING // JOURNAL -don’t allow journal to be draggable -make it cut in half better -consider light gradient on end of page
WAYFINDING // EXPAND PANORAMA -make panorama close into itself -rethink shadow box (although this is nice because it loads image externally) -work on hover + scroll —ramp up as you move into it (start movement near center of the screen —-users would default to drag scrolling and not make way to end of image to see scroll -integrate new arrow as instruction -start image at more interesting area (maybe center, scroll left or right?)
PARTINGS
PARTINGS // VIDEO -why does does the page loader take so long, waiting on 1 vimeo video?
PARTINGS // ENDPAGE -should go to about this project?
NAME CONSIDERATIONS -daytripper is used in may places online -other name considerations daytripperjournal.com daytripperlog.com daytripperzine.com daytrippermag.com daytrippernotes.com