Web Work Flows

A short talk on web work flow and tools for UCF's Masters of Web student organization

Transcript

1. Web Work Flows Making your life easier.
2. Create YOUR own Workflow Everyone works differently. Do what works best for you.
3. Employers want to see your process Creative freedom is becoming more popular, take advantage of this.
4. Tools that I use What works for me.
5. Alfred Very. Very. Convenient.
6. Alfred Spotlight but way better • Calculations • Color Picker • Quick find folders • WORKFLOWS
7. Alfred Create your own Workflows (or use a coworkers)
8. Photoshop/Illustrator This is where I start designing… Scary, I know.
9. Markdown Mou a Markdown Editor
10. Sublime text
11. Packages Emmet.
12. Codekit Preprocesses, Compiles, optimizes, Grunt/Gulp with a UI
13. Github Version Control Social Coding and Version Control all in one
14. Github Version Control Make commits, Collaboratively
15. Terminal My Main Uses: SSH, Permissions and Git
16. Git Terminal Commands • git init - Initializes a git repository within the current directory you are in. • git status - Shows the current status of the project, displays what files have been changes and which files are staged and ready to be commited. • git add {index.html} - Adds the file to the staging area and git to start tracking the file and watch for changes. • git commit -m “this is a commit message” - Stores our staged changes with a message describing what was changed. • git log - Displays a log of all the commits we’ve made so far. • git remote add origin https://github.com/gituser/reponame.git - Connects the initialized repository to the remote repository located on github. ! • git push -u origin master - Tells git where in the repository to put our commits. • git pull origin master - Pulls down any new changes from the master repository to your local copy of the repository. • git clone https://github.com/gituser/reponame.git - Clones a local copy of a repository on github into a newly created directory, also initializes and begins watching the directory.
17. Education Tools • Codeschool (http://codeschool.com) ! • Team Treehouse (http://teamtreehouse.com/) ! • Meetups (Local Orlando) ! • Conferences (Front-End Design Conference)
18. Other Tools I Prefer • FTP Client (Transmit) Allows you to mount drives directly, convenient for preprocessing. ! • Local Server (MAMP) ! • Browsers (Chrome & Firefox Aurora) ! • Dev Tools (Firebug, Web Dev Toolbar) ! • Music (Spotify - Playlists)
19. Questions? Design your process before you design anything else. Remember
20. THank you! Twitter - @jpcostallos Github - github.com/jpcostallos Email - web@jpcostallos.com