Wednesday, October 9, 2013

Using the the new Chrome Web Tools


http://devcoma.blogspot.com/2013/01/how-to-enable-workspace-experiment-on.html

http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/

http://blog.chromium.org/2013/08/an-improved-devtools-editing-workflow.html


Posted by at No comments:

JS Conference video - Addy Osmani

http://2013.jsconf.eu/speakers/addy-osmani-plight-of-the-butterfly-everything-you-wanted-to-know-about-objectobserve.html
Posted by at No comments:
Labels:

Sunday, October 6, 2013

JS Essentials talk

Travis Tidwell

dynamically typed with var
everything is object including primitives
functions are first class objects treated just like any other variable
OO, procedural, functional
Patterns:


Use JSON notation in defining objects, arryays var v = ['test'];
Object - unordered collection key value pairs
decalre functions like a variable with equals - var myfunction = function () {}
Use functions to encapsulate context such as with the 'this'

Here is an example of a closure:













var colors = ['red' , 'blue', 'yellow' ] ;

console.log('number of colors ' + colors.length);

for (var i=0;i<colors.length;i++){
setTimeout ((function(i){
               return function (){
     console.log(colors);
     console.log(i) ;
     console.log(colors[i]);
  };

             }) (i), 100);
}

Function scope or Global scope
this keyword - owner of function we are executing
variable must be assigned to something for it to have 'this' meaning

prototype - is an object in which other objects inherits properties
every object has one
__proto__ in the debugger
Use it to define the blue print of the class

More...
Posted by at No comments:
Labels:

Cujo.js Notes

I recently went to a session on Cujo.js . The main people behind the project are Brian Cavalier and John Hahn. This is a project that takes many javascript specialized libraries (i.e. modules) and puts them under one umbrella.

wire.js - dependency injection
meld.js - for AOP
poly.js - collection of tiny modules that shim (aka "polyfill") old browsers to support modern javascript.
cola.js - data binding
when.js - promises
rest.js - rest template
curl.js - AMD /CSS module loader, like require, smaller footprint, but faster
cram.js - module concatenator
msgs.js - message oriented programming

ON side note, a few other js libraries to know about:
lawnchair - a lightweight, adaptive, simple and elegant persistence solution
handlebars - build templates
mustache - allows you to read in JSON formatted data and display it using templates you design with JavaScript
Posted by at No comments:
Labels:

Thursday, October 3, 2013

Git Hubbing

Brent Beer came to Talk GitHub at the TriJug but i missed it.

Linus Torvalds created git, ideas from bitkeeper , says he built it in two weeks.

Distributed means no one place has the server. offline capable. On your own branch where as CVS struggled with branching. Git  like a boss

Here is how i learned Git which walks you thru generating ssh keys :

C:\Program Files (x86)\Git\bin\ssh>ssh-keygen -t rsa -C “yagottabelieve@gmail.com”
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/xyz/.ssh/id_rsa):
Created directory ‘/c/Users/xyz/.ssh’.
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /c/Users/xyz/.ssh/id_rsa.
Your public key has been saved in /c/Users/xyz/.ssh/id_rsa.pub.
The key fingerprint is:
go to .ssh dir and get text of pub key
C:\Users\xyz\.ssh>type id_rsa.pub
paste it into github ssh (https://github.com/settings/ssh)
Test out key:
C:\Users\xyz\.ssh>ssh -T git@github.com
C:\Users\xyz\.ssh>git config –global user.name “Dave-o”
C:\Users\xyz\.ssh>git config –global user.email “yagottabelieve@gmail.com”
GitHub for Windows includes this helper, and provides a git shell so you don’t need to install and configure git manually
cd c:\wamp\www\jquery
git add file1.txt
git commit – m “add test file “
git remote add orgin git@github.com:technobuzz/jquery.git
git pull orgin master
git push  orgin master

git_basics_tutorial_example
Usually if I have been working on another machine and have already committed my changes to GitHub, so I can just pull down all the latest code, and start where I left off by using: git pull

git simple guide

your local repository consists of three "trees" maintained by git. the first one is your Working Directory which holds the actual files. the second one is the Index which acts as a staging area and finally the HEAD which points to the last commit you've made.

workflow for submitting pull requests

Forking a repository Before you can begin editing code you must first create a fork of the GitHub repository you wish to contribute to. Navigate to the GitHub page of the repository you wish to fork. Click on the fork button on the top right corner of the page.

http://chronicle.com/blogs/profhacker/forks-and-pull-requests-in-github/47753

Unlike giving a “star” to a project, which is similar to a Facebook “like” button, when you fork a GitHub project, you are making a somewhat different statement. You are not just saying, “I could use what you wrote,” since a clone is sufficient for that purpose. You are saying, “I could use your text and want to improve it.”


https://help.github.com/articles/creating-gists
Gist is a simple way to share snippets and pastes with others. All gists are Git repositories, so they are automatically versioned, forkable and usable from Git.
Few Git Hub accounts

Posted by at No comments:
Labels:

Wednesday, October 2, 2013

Responsive web design

Responsive web design tutorial (slides)

 Layout, images, content

Not just desktop world need to display on multi devices - explosion screen resolutions and ratios

High resolution displays, lower bandwidth displays - media queries to detect browser width, device with, pixel density

Layouts:

  • Proportional Sizing - percentage based layout 
  • 'adaptive' content - see additional elements as screen real estate increases


Performance and expect page to load quickly is expectation Responsive means revenue - example O'Neill clothing

Universalmind.com responsive web site - resize and layout changes
Microsoft.com is responsive - sidebar moves to top
Boston Globe one of first responsive  sites

Ethan Marcotte - article at a List Apart  on responsive design May 2010 : Not appropriate to write separate site for different devices,  Fluid grids (poportional instead of working with fixed size, scale across different devices),  Flexible images  (flex to size of view port, serving up different sized  images based on device or screen)

based on size List a Part article on responsive design , Use of media queries to accomplish this - Mobile first design (core elements) - viewport scales out , additional content added . Detect browser width, detect aspect ratio, screen or print, with print some features hidden
http://reference.sitepoint.com/css/mediaqueries#mediaqueries__tbl_media-queries_media-features

http://www.ibm.com/developerworks/library/wa-cssqueries/#resources

rule if screen is 480px :

@media screen and (min-width :480px) {}

load different style sheet based on width

Here we scale out to 980px if mobile device with view meta tag (scale is zoom factor)
<meta name="viewport" content="width-device-width, initial-scale=1.0" >

Some sites turn off the scaling feauture

Even if you CSS display of none, the items still exist in DOM but not viewable

ie does not support media queries prior to ie9

@media query Style sheet based on ie version  (known as conditional comments)

<!-- [if lt IE 9]-->

For browsers that do not support media queries, See respond.js can use min with and max width

media query from javascript using window.matchmedia. also window.innerwidth, and window.devicePixelRatio


Responsive Layouts (porportional sizing) - think in percentages of layout, adaptive content, divide grid into block (i.e twelths) frameworks bootstrap 3, Others include Zurb, 320 and Up..rock hammer

Flex box html5 for responsive layout - layout either horizontally or verticaly , verticaly centering

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Ie10 Grid kit tool set Responsive images

Codepen.io

Grid Layout

http://bradfrost.github.io/this-is-responsive/patterns.html

http://bradfrost.github.io/this-is-responsive/resources.html

http://mobile.smashingmagazine.com/2013/05/29/the-state-of-responsive-web-design/

http://www.sitepoint.com/books/responsive1/




Posted by at No comments:
Labels:

Tuesday, October 1, 2013

Client Side Reading for Oct 1

14 Online Resources to Learn iOS Development
iPhone Course (Cornell)
Mobile App Development (Syracuse)
daleisphere
 CS412 -range of different free, online materials
technobuffalo.com - The 64-bit support should allow us to see iOS apps end up on the desktop at some point, however, and that should start to kick off the blending of OS X and iOS in some fashion. For now, however, early benchmarks from several sites suggest it’s at least as powerful, if not more so, than the new Snapdragon 800 quad-core processor in the latest Android smartphones.

AppCoda

mobileorchard.com -Apple has hired Toronto Blue Jays assistant GM Jay Sartori to take over the reins of the sports section of the App Store

Tim Roadley TUTORIALS FOR IPHONE AND IPAD DEVELOPMENT
Posted by at No comments:
Subscribe to: Posts (Atom)