Web Developer Tips - INF 362 Ver 1

tips.md

Sublime Text Info:

• Download link: http://www.sublimetext.com/3
• ST Super Course
• Install Package Control: https://sublime.wbond.net/installation
  • Copy Install script from there (choose ST2 or ST3 first)
  • Open ST and press CTRL+~ to open the console
  • Paste the install script in the console and press enter
  • Restart ST
• Here is my list of personally installed plugins. Bolded ones are really useful (CTRL+Shift+P > Install)
  • AdvancedNewFile
  • CSS Completions
  • EditorConfig
  • Emmet (docs: http://emmet.io/)
  • Git Conflict Resolver
  • HTML5
  • SideBarEnhancements
  • StringEncode
  • Syntax Highlighting for Sass
  • Terminal
  • Theme – Flatland
• Personal settings for ST (Preferences > settings User)
  • https://gist.github.com/esteinborn/9360893

Prepros

• Download here: http://alphapixels.com/prepros/
• Drag a project folder into it.
• Right click a file change its output location (compiled css, js)
• Use the live preview (globe icon) to see your changes happen live.
• Can exclude folders/files by clicking the cog > Project Filters and typing a comma separated list of directories or files to ignore.

RWD Resizer Bookmarklet

• http://lab.maltewassermann.com/viewport-resizer/

GitHub help:

• Do not delete repos or branches. You don’t want to accidentally delete your repo.

• Official GitHub Guides: http://guides.github.com/

• GitHub for Cats: http://vimeo.com/ericsteinborn/github-for-cats

• This will help you better understand GitHub if you are having problems.

• Playlist of Official GitHub videos: http://www.youtube.com/playlist?list=PLg7s6cbtAD17rhrz2BJWAPJMjR71B3IDx

• Refer to your entire team the same way you refer to individuals, using "@". Using this in an issue notifies the entire team. Use this to have the whole team weigh in on issues:

  • @SUNY-Albany-CCI-INF362/whatev3r
  • @SUNY-Albany-CCI-INF362/american-football
  • @SUNY-Albany-CCI-INF362/honey-badgers
  • @SUNY-Albany-CCI-INF362/team4

• When I talked about using gh-pages as your main branch, I was mostly saying it for example. Your best workflow is:

  • Master is your sacred branch
  • Everyone branches (or forks) off master
  • Makes changes, commit, sync
  • Pull request into master from feature branch or fork (Master is now updated)
  • THEN you'll pull request from master into gh-pages to update your site. (Master and GH-Pages are now in sync)

• GH-Pages URLS are as follows for each team (you should click "edit" at the top of your repos and add the URL to the top so it will be easier to navigate to)

  • http://suny-albany-cci-inf362.github.io/american-football
  • http://suny-albany-cci-inf362.github.io/honey-badgers
  • http://suny-albany-cci-inf362.github.io/team4
  • http://suny-albany-cci-inf362.github.io/whatev3r

Foundation Grid Easy Mode

• Here is the EZ Mode grid Sass partial that you can @import “_foundation.min.scss”; into your project
• https://github.com/SUNY-Albany-CCI-INF362/F5-Grid-EZ-Mode
• From that repo you should also grab the “normalize” partial and import that at the top.

Foundation Full

• If you want to just start using Foundation Full, you can just download the package and use their CSS stuff and use a separate CSS file for your app stuff:
• http://foundation.zurb.com/cdn/releases/foundation-5.1.1.zip
• it comes with a starter index.html file with some grid stuff set up already.

Recommended Scaffolding for your Sass files (makes Prepros easy to setup)

css/
  └── app.css
scss/
  ├── app.scss (Filled with @import's)
  ├── _foundation.min.scss
  ├── _normalize.scss
  ├── _mixins.scss
  ├── _variables.scss
  └── components
    ├── _component1.scss
    ├── _component2.scss
    └── _component3.scss