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
- set up local server
- http://css-tricks.com/video-screencasts/86-mamp/
- http://css-tricks.com/video-screencasts/87-moving-up-with-mamp/
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
- http://net.tutsplus.com/tutorials/javascript-ajax/create-a-makeshift-javascript-templating-solution/
- http://paulirish.com/2012/box-sizing-border-box-ftw/
Pinboard
Reset to broadcast to delicious and instapaper
Security
- 1Password https://agilebits.com/onepassword fort knox for passwords
- LastPass https://lastpass.com/
- NoScript http://noscript.net/ allows JavaScript, Java, Flash and other plugins to be executed only by trusted web
sites
Vimeo
seems vimeo has updated its interface also, good work vimeo, much easier to navigate
time-lapse videos
http://vimeo.com/user7004691/likes
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