Tuesday, October 29, 2013

Git Hub comes to train at NCSU

I am signed up for the November GitHub training at NCSU . 
will lead you carefully through the basic skills you need to be productive with Git and to collaborate with other developers on GitHub. Learn how to convert an existing project to a Git Repository, track changes to your project, protect your work from experimental changes through branching, push code to repositories on GitHub, and collaborate with colleagues through Pull Requests
This sounds great. I have been through the basics of creating at GitHub account.  Here is an extensive list of Git resources I have found on the web.

GitHug , Git Workflow , Git Tutorials on You Tube,  Git like a Boss , Skills Matter Git Hub , Merge or Rebase , Pro Git, Git From The Bottom Up , Git Immersion , Git internals  , Git Magic ,
Git Reference, Version Control by Example, Git Succinctly , Think Like (a) Git,Git In The Trenches , Conversational Git , Code School - Try Git

Thursday, October 24, 2013

More on iOS7

I am a happy camper. The biggest complaint I had with the new version of iOS was taking away the ability to search web with the spotlight search. I tried iOS7 and its back. No more removing the url out of the safari address bar.

Yesterday I took in some of the new features of iOS7 at the lunch time learning I attended. The terminology used was that Apple did a "Design Language" overhaul with the new release.  Gone are rich and colorful, replaced flat and simplified.  I need to read up on visual deference. The coalesced updates was a new thing for apple. As in past when you got a text update, it would not trigger things the way the new iOS does.

What developers should do to get ready for the next version of iOS 7 can be found  here (Apple's Transition Guide, UI Design basics , UIKit ).

As for design, the status bar becomes part of the screen real estate.

As for development, Apple’s Xcode 5 allows developers to manage multiple versions of an app, and compare the differences using Apple’s Auto Layout. Also, the button container is gone. Using the assistant editor, you can see how your changes look in iOS6.

Other items:

  • Enterprise single sign on
  • MDM
  • air drop
  • per app vpn
  • background updates


Tuesday, October 22, 2013

A Html5 Class

I stumbled across this web site and it looked like a great class.

http://aaltowebapps.com/

The class has all sorts of examples you can run such as Storage and Offline API, Templating with Handlebars, CSS Media Queries, and more. The example code is on GitHub too.

Lectures:

Mobile Web Appplications Development with HTML5 part 1
JQuery Mobile [examples]
Mobile Web Appplications Development with HTML5 part 2
Mobile Web Appplications Development with HTML5 part 3
Mobile Web Appplications Development with HTML5 part 4 [backbone] [Canvas/Device] [web sockets] [css3] [rest]

Other talks: http://aaltowebapps.com/talks.html - https://github.com/clody69

http://gitref.org/
www.html5rocks.com
www.htmlfivewow.com
chromestatus.com caniuse.com
http://mobilehtml5.org/

Try It In Real Time

http://www.sqlfiddle.com/ - learn and practice SQL queries online
JSBin  - Remy Sharp online javascript tool
JSFiddle 
CodePen
Dabblet  - CSS
Tinker

http://hugogiraudel.com/2012/11/19/css-playgrounds/

Sunday, October 20, 2013

Week 2 of MongoDB


I have not had the time to do the homework for week 1, but i finished the lectures finally.

https://education.mongodb.com/static/m101j-october-2013/handouts/hw1-1.184820ec29b6.zip
https://education.mongodb.com/static/m101j-october-2013/handouts/hw1-3.2005b1d3b047.zip
https://education.mongodb.com/static/m101j-october-2013/handouts/hw1-4.b2846101dcff.zip



Here is the link for week 2

https://education.mongodb.com/courses/10gen/M101J/2013_October/courseware/Week_2_-_CRUD/Introduction_to_Week_2/

Javascript techniques


Module pattern

function Answer(questionID, text) {
    this.questionID = questionID;
    this.text = text;
}

Working with arrays

var list1 = Array();
list1.push(currSec);


jQuery Append to element
$('#addLink').append('<B>test</B>');


Opener
http://www.webreference.com/js/tutorial1/opener.html

Thursday, October 17, 2013

Together Native and Html5

Peter Traeg of Universal Mind has written an article at Smashing Magazine about mixing together Native and Html5 .
Exposing a portion of the user experience through HTML and JavaScript means that some of the experience can be served from the Web and thus be dynamic. As we saw earlier, it’s possible for this Web-served content to invoke native code in your application via a “bridge” that you create.
Apple allows JavaScript code to be downloaded and executed as long as it runs within the context of the UIWebView control in your iOS application. This is the only situation in which code “downloading” is allowed in iOS.
The UIWebView in iOS and its associated UIWebViewDelegate provide the mechanism that allows native code and JavaScript to communicate with each other.

https://github.com/ptraeg/html5-in-mobile-apps

Tuesday, October 15, 2013

Responsive Web Bootcamp with Jonathan Stark


JSConf: Douglas Crockford


Learn It on Web

Now a days there are so many ways to learn things on the web. Over the past year or so I have found a few site to help me improve my skills. Most of these are free resources but not all. This will be a dynamic list and will be updated periodically ...

Saturday, October 12, 2013

MongoDB Week 1

I started the MongoDB for Java developer course this week.

The lead developer of the java driver Jeff Yemin along with Andrew Erlichson are the instructors.


Non relational algebra

Json store

Json documents - collection of documents


Key values



Mongoshell - tcpconnects to mongodb

Sparq java - routes to urls
Freemarker mvc









Copy files in bin dir to c:\mongodb226

Make data dir under c drive, Under data mkdir db

Go to bin dir

c:\mongodb226>mongod
mongod --help for help and startup options
Tue Oct 08 22:44:36 [initandlisten] MongoDB starting : pid=1696 port=27017 dbpath=\data\db
\ 64-bit host=CSGRALLT10
Tue Oct 08 22:44:36 [initandlisten] db version v2.2.6, pdfile version 4.5


c:\mongodb226>mongo
MongoDB shell version: 2.2.6
connecting to: test
Welcome to the MongoDB shell.
For interactive help, type "help".
For more comprehensive documentation, see
        http://docs.mongodb.org/
Questions? Try the support group
> 

Or
mongo localhost

> db
test


      
> show collections
> db.mycollections.insert({text:'hello world'})
> show collections
mycollections
system.indexes
> db.mycollections.find()
{ "_id" : ObjectId("5254c64c2488183e2c3d49f8"), "text" : "hello world" }
> 



c:\>cd data

c:\data>cd db

c:\data\db>dir
 Volume in drive C is Windows
 Volume Serial Number is 1CEC-CA9A

 Directory of c:\data\db

10/08/2013  10:58 PM    <DIR>          .
10/08/2013  10:58 PM    <DIR>          ..
10/08/2013  10:58 PM    <DIR>          journal
10/08/2013  10:50 PM                 6 mongod.lock
10/08/2013  10:58 PM        67,108,864 test.0
10/08/2013  10:58 PM       134,217,728 test.1
10/08/2013  10:58 PM        16,777,216 test.ns
10/08/2013  10:58 PM    <DIR>          _tmp
               4 File(s)    218,103,814 bytes
               4 Dir(s)  49,962,684,416 bytes free





> mvn archetype:generate

enter 308 at prompt
    308: remote -> org.apache.maven.archetypes:maven-archetype-quickstart (An archetype which
ven project.)



              308

Choose a number or apply filter (format: [groupId:]artifactId, case sensitive contains): 308:
Choose org.apache.maven.archetypes:maven-archetype-quickstart version:
1: 1.0-alpha-1
2: 1.0-alpha-2
3: 1.0-alpha-3
4: 1.0-alpha-4
5: 1.0
6: 1.1

Choose a number: 6: 6
 mvn compile exec:java -Dexec.mainClass="org.mongodb.App"



           <dependency>
              <groupId>org.mongodb</groupId>
              <artifactId>mongo-java-driver</artifactId>
               <version>2.10.1</version>
            </dependency>
import com.mongodb.DB; 
import com.mongodb.DBCollection;
import com.mongodb.DBObject;
import com.mongodb.MongoClient;
import com.mongodb.ServerAddress;

public class HelloMongoDB {

public static void main( String[] args ) throws UnknownHostException
{
MongoClient mongoStyleClient = new MongoClient(new ServerAddress("localhost", 27017));
           DB db = mongoStyleClient.getDB("test");
           System.out.println( "Hello World!" );
  DBCollection coll = db.getCollection("mycollections");
  DBObject document1 = coll.findOne();
  System.out.println(document1); }
}}
 Hello World!
{ "_id" : { "$oid" : "5254c64c2488183e2c3d49f8"} , "text" : "hello world"}

Spark Web Application Framework

http://www.sparkjava.com/

<repositories>
      <repository>
          <id>Spark repository</id>
          <url>http://www.sparkjava.com/nexus/content/repositories/spark/</url>
      </repository>
  </repositories>


<dependency>
      <groupId>spark</groupId>
      <artifactId>spark</artifactId>
      <version>0.9.9.4-SNAPSHOT</version>
     </dependency>


import spark.Request;
import spark.Response;
import spark.Route;
import spark.Spark;


public class HelloWorldSparkStyle {

public static void main( String[] args )
    {
   
      //http://localhost:4567/
        Spark.get(new Route("/") {

@Override
public Object handle(Request arg0, Response arg1) {

return "Hello Spark World!";
}
});
     
    }

}

Hello Spark World!

Template library
http://freemarker.org/

.ftl files combined with data map


      <dependency>
      <groupId>org.freemarker</groupId>
      <artifactId>freemarker</artifactId>
      <version>2.3.19</version>
     </dependency>



Spark - Http Get , Http Post


Freemarker looping




Freemarker ...

Spark.post(new Route("/favorite_fruit")

Schemaless Mongodb example (can add columns on fly)

json - arrrays, dictionaries (associated maps)




MongoPosts

16meg limit on document

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...

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

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

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/




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

Bootstrap 3

Bootstrap 3

Update: http://www.stevekeator.com/slides-examples-and-video-from-my-bootstrap-presentation/

http://getbootstrap.com/getting-started/

20 CSS components

Less variables

Light weight - 119K for framework

Better UI control

Twitter is where it originated

Ie8/9 CSS downgrades

Get bootstrap.org

https://github.com/twbs/bootstrap

Responsive grid:

grid system has12 columns , split them up however you want to, offsetting, nestable

Bootstrap 3 completely redeveloped mobile first

Wrap in container CSS class  , then. Row

<div class ="container">
<div class = "row">
<div class ="col-lg-6"></div> <div class ="col-lg-6"></div>

4 basic snap points


  • Computers lg
  • tablets landscape sm
  • tablets portraits med
  • Cell phone xs


Offet can add into your class


Examples.bootstrp.com/grid/

.visible

.hidden

.sr-only

.visible-print

.hidden.print

Bootstrap typography examples

H1, H2

.lead class for paragraphs

Blockquotes

Emphasis class helpers

-success

- warning

Ordered lists, unordered lists,

Code element

Pre element

Table class , table-striped

Condensed padding

Contextual row classes

Buttons , disabled state

Forms .form-group

form-inline


Element states

Doesn't play well with JQuery validation

Element sizes

divshot.com

http://getbootstrap.com/customize/