Busy Day with Rod and Asuh

Spent the day with 2 friends teaching each other, by going over what we are each learning. Which is cool, because we each work in very different environments (from corporate to freelance) and different types of teams (individual, local central shared, and remote). we have a lot to learn from each other, and one day is just an introduction.

MAMP Pro

Mac, apache, MySQL, PHP

Sublime Text 2

sublime text 2
  • settled on Sunburst color scheme
  • command + shift + p > start typing in text field – “pa” get to package install takes you to a list of valuable packages
  • to start writing zen coding
  • control + option + enter opens the field to enter a continuous DOM based string
    EX: div>p>span>a
  • to select one section on multiple lines
    set cursor > alt > click and hold/drag
  • rename a file in a sublime project control + click for context menu
  • i open current working project in sublime and save project- and i notice that sublime adds 2 files
    • project.sublime-project
    • project.sublime-workspace

why NOT using @import for css

1. CSS3 Media Queries JS (polyfil for older browsers)

http://code.google.com/p/css3-mediaqueries-js/

css3-mediaqueries.js by Wouter van der Graaf is a JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test and apply CSS3 Media Queries. Firefox 3.5+, Opera 7+, Safari 3+ and Chrome already offer native support.

Usage: just include the script in your pages.

(And you should combine and compress with other scripts and include it just before /body for better page speed – but you already knew that).

Write your media queries like you would for browsers with native support. The script will parse your CSS and apply the styles for positive media query tests realtime (also when you resize).

Note: Doesn’t work on @import’ed stylesheets (which you shouldn’t use anyway for performance reasons). Also won’t listen to the media attribute of the link and style elements.

2. I’m also using scott jehls respond.js

https://github.com/scottjehl/Respond

Respond.js doesn’t parse CSS refrenced via @import, nor does it work with media queries within style elements, as those styles can’t be re-requested for parsing.

also notice the…

Note: HUGE thanks to @doctyper for the contributions in the cross-domain proxy!

Sublime packages with feedback

http://wbond.net/sublime_packages/community

UserFeedback

http://sublimetext.userecho.com/

Adding to starter template using Fetch with Sublime to set up a starter template fro a new site

{
"files":
{
"jquery": "http://code.jquery.com/jquery.min.js"
},
"packages":
{
"html5-boilerplate": "http://github.com/h5bp/html5-boilerplate/zipball/master",
"worpress": "http://wordpress.org/latest.zip",
"css3-mediaqueries": "http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js",
"css3-edit": "http://lea.verou.me/csss/plugins/css-edit.js",
"css3-snippets": "http://lea.verou.me/csss/plugins/css-snippets.js",
"incrementable": "https://raw.github.com/LeaVerou/Incrementable/master/incrementable.js",
"bytesize": "http://bytesizematters.com/bytesize.js",
"collapsible-content": "https://github.com/filamentgroup/jQuery-Collapsible-Content/zipball/master",ß
"twitter-bootstrap": "http://twitter.github.com/bootstrap/assets/bootstrap.zip",
"pea.rs": "https://github.com/simplebits/Pears"
}
}

that should hold me for a start

Git

nothing to repository (well that says a lot for my work)

follow Jeffrey Way on nettuts

Pinboard

http://pinboard.in/settings/

Reset to broadcast to delicious and instapaper

Security

sites

Vimeo

seems vimeo has updated its interface also, good work vimeo, much easier to navigate

time-lapse videos

http://vimeo.com/user7004691/likes

https://vimeo.com/roxstyle

http://vimeo.com/user7004691/likes

Visualizing Code

http://people.csail.mit.edu/pgbovine/python/tutor.html#mode=visualize

yes it’s python, which i know nothing about, but the step by step visualizing makes it understandable

Canvas Puzzles

umm, this says it is beginner

http://active.tutsplus.com/tutorials/games/create-an-html5-canvas-tile-swapping-puzzle/

http://www.raymondhill.net/puzzle-rhill/jigsawpuzzle-rhill.php#

http://www.canvasdemos.com/type/games/puzzle/

NEW OF INTEREST

http://www.patternify.com/
Build your pattern online, with the base64 code, or download a .png file.

http://www.w3.org/2012/02/mobile-web-app-state/
Standards for Web Applications from W3