Blog

Tonight at SacInteractive - Font Awesome 101

Tonight at SacInteractive, I'll be giving an "Intro to Font Awesome" presentation that looks about like so: Tired of having to make "delete", "edit", "new", "save", "confirm", and "purchase" icons for your clients? In 3 different sizes (desktop, tablet, mobile)? And new versions for each color scheme you use? Enter Font Awesome! Font Awesome gives you scalable vector icons, that are totally customizable, all by just including a CSS file in your project. It's totally free, compatible with current devices and browsers, easy to use and customize to your liking.

The meeting starts at 6:30pm at HackerLab (1715 I Street Sacramento). It's FREE and open to everyone. Come join us!

-nolan

Changes to SacInteractive

Hi everyone,

I'd like to tell everyone about some changes coming to SacInteractive (formerly SacCFUG)...

After running SacCFUG for a zillion years (and helping me turn it into SacInteractive), Seth has decided to step down from the co-manager role. I cannot express how much I am grateful for all the years Seth ran the group by himself, and then brought me in to be co-manager. I learned a metric ton from him over those years and am quite thankful for everything he did.

My friend Jon Nutting will be coming in to be the new co-manager, along with me. Jon and I have done several projects together in the past; he has a tremendous design / development background and I'm really looking forward to working with him on the SacInteractive as well. He's already very excited, and we've begun discussing ideas for new topics, new logo design and other improvements to the group.

We're canceling the July meeting so Jon and I can focus on some behind the scenes things, but we should be back on track in August.

Any questions, just ask. I'm looking forward to all the things we have in store for SacInteractive!

Best,
Nolan and Jon

SacInteractive: Open Design: Free Open-Source Tools for the Designer

This Tuesday night at SacInteractive, Jon Nutting will be presenting on "Open Design: Free Open-Source Tools for the Designer"

The description is like so:
----
Jon Nutting (Ai Instructor & self-proclaimed new-media extraordinaire), will walk you through the process of his self-imposed challenge to use open-source software for the creation of a professional 3D logo. Start leveraging the power of Inkscape, GIMP, Blender 3D, and Google Fonts...all for Free!
----

We meet at HackerLab, the meeting starts at 6:30, it's FREE and open to the public. Hope to see you there!

-nolan

CF Objective Recap and Highlights

It's Saturday afternoon, I'm at the airport, that must mean CF Objective is officially over. Overall I think the conference was a great success and was run more smoothly than last year (which was the first year at this location). Wifi was excellent throughout the entire conference (both the hotel wifi and the conference specific wifi). Hotel staff were incredibly friendly and helpful. Food was as good as one could hope for from conference food.

The keynote presentation sparked some good conversation over lunch about how we can improve diversity in the web development community. It got beyond just "well the door is open if someone wants to walk in" and quickly moved to "we need to help people thru the door, go out and find people and be more proactive in helping to include anyone that wants to get into programming". I was initially a little disappointed in the keynote talk, as my interpretation of the title ("Redesigning the Interface: Making Software Development Make Sense to Everyone") was that she'd be discussing new techniques for UI/UX work, or something along those lines. However after the lunchtime discussion, I no longer had any quips.

Other highlights for me included...

1) Jason Dean's talk on JavaScript – I learned a metric ton about various nuances in the language. Jason always has great slide decks and regular doses of humour thrown into his presentations. This one was no exception.

2) Sharon DiOrio's talk on Angular JS – I've seen several demos on Angular. Sharon's was very straight forward and easy to follow. Based on the session description, I was worried this talk would require more Angular experience than I've had thus far, but she started at the beginning and kept my interest the entire time.

3) Kai Koenig's talk on "The JVM Is Your Friend" – I've seen variations of this talk a few times. I've always gotten lost. Kai's talk was the magic one that made a few topics finally "click" for me. I'm no longer scared of the JVM arguments I didn't previously understand. :)

Doing the speaker evals was a bit of a challenge this year because they all HAD to be done via a mobile app. Personally I prefer to type my evals on a real laptop keyboard (as I type much faster than way). I suspect this affected both the number of evals done, and the quality of feedback included in each eval. I spoke with the conference staff a little, and I understand this was a technical "limitation" with how things were set up. Hopefully next year we can do evals both via the mobile app and website.

I've blogged notes from all the sessions I attended. I ended up skipping a few presos to spend more time warming up before my I gave my presentations. Both of my talks seemed to go well, though I haven't seen the evals yet; perhaps I just jinxed myself. :)

Thanks everyone for attending both my sessions. If anyone runs a user group and would like me to give those talks, just drop me a line.

Thanks to the CF.Objective staff for putting together yet another excellent conference. Until next year...

-nolan



CF Objective Notes - Developing Single Page Apps (SPA) with ColdFusion and Angular

Developing Single Page Apps (SPA) with ColdFusion and Angular
Mike Collins

Agenda
quick understanding of angularJS
walkthru key features and main components of an angular JS app
learn about CF RESTful svcs w/ angular
walk thru a DEMO app

Adapts and extends HTML
key features
-2 day data binding
synchronizes model data and views
filters for client side data
http / ajax call features

follows MVC
loose coupling between presentation, data, and logic components.

A complete client side java script solution
managed by a dev team at Google

it's a "complete framework"
data binding, mvc, routing, history, templates, etc.

popularity in AngularJS is going up, near top of "popular JS frameworks" lists

browser support
all the major browsers
1.3 (beta) will be dropping IE8 support

angularjs.org – download either stable or bleeding age versions from here
optionan add-on modules
angular-animage – enable animation support
angular-route – routing and deep linking services and directives
etc

works well with others – jquery, bootstrap, CF, html5, phonegap, etc.

key features--
#1 thing. As you make your 1st request, there is a compilation step, reads your scripts, looks at binding, creates event listeners, etc.

2-day data binding
filters
ngRoute – ngView
NG-repeat directives
$http service
$http interceptor feature
Form Processing
built in form CSS classes
ng-show directive

simple app

view plain print about
1<scirpt src="angularmin.js"></script>
2
3<div ng-app>
4name: <input type="text" ng-model="name" />
5Welcome to angular: {{name}}
6</div>

that's a "hello world" Angular app

controllers --
view plain print about
1playerApp.controller( 'mainController', function($scope){
2$scope.message = 'I am the home page';
3});

View page brought in under this controller – home.cfm
view plain print about
1<div class="jumbotron text-center">
2<h1>home page</h1>
3<p>{{message}}</p>
4</div>
Angular Filters
(for bringing down arrays of data from a cfquery as JSON, etc)

first define the filter for a data listing
view plain print about
1<tr ng-repeat="p in playerList | filter:search | orderBy:'playerfirstname'" ng-click="getPlayer(p.id)"
2    <td>{{p.playerfirstname | uppercase </td>
3</tr>

ngRoute Module –
write a config to tell angular when we go to a link, what we want to happen

view plain print about
1ngModel sample
2$scope.player = {};
3$scope.player['securitytoken'] = '';
4$scope.player['playerage'] = 14;
5$scope.player['playergender'] = 'Boy';

etc

when I want to pass this to the server all I need to pass is "player", angular will serialize that to JSON and pass the whole thing up to the server

angular forms--
built in css classes
-ng-valid, ng-invalid, ng-pristine, ng dirty

built in validations
-url, email, max, maxlength, min, minlength, number, pattern, required

input properties
-$valid, $invalid, $pristine, $dirty
-$error{} - contains filed data for all invalid fields

etc

Angular form code--
view plain print about
1<form name="angForm">
2...
3<input .. ng-mode='player.agreement' value={{player.agreement}}' ng-required='1==1'>
4<button ng-click="
submitForm()" ng-show="angForm.$valid" />
5</form>

$http service
can encapsulate this into factories, services, etc
$http caching
$http interceptors
$http headers
great for security
$http security
built in json vulnerability protection
built in XSRF protection

$http post to CF RESTful API
view plain print about
1$scope.updatePlayer = function()
2{
3if($scope.manageForm.$valid)
4{
5    $http.post9'/rest/playerSvc/updatePlayer?callback=JSON_CALLBACK', $scope.player).success( function(data, status)
6{ ... }
7)
8.error( function(data, status) {
9... error code ...
10});

Angular and CF working together--
what can CF do to make the client side better?
ColdFusion RESTful API
makes it easy to integrate into any client side JS frameworks
easy to create an API

seed applications with initial loading of data
provide yoru dynamic view pages
backend integration to JDBC, LDAP, web services, email. PDF, JSON, etc
improve security w/ encrypted request tokens
code generation of angularjs apps
example forms

Coldfusion restful features
RESTful CFC API
RESTful Function signatures
registering and refreshing CFCs
serializing JSON and consuming JSON in your CFCs

creating a RESTful coomponent
view plain print about
1<cfcomponent rest=true" restpath="playerService">
2<cffunction name-="
getPlayer" access="remote" httpmethod="get" restpath="getPlayer/{playerID}" returntype="any" productes="application/json">
3<cfargument name="
playerID" required="true" restargsource="Path" type="numeric" />

there's a lot built into how cffunction and cfargument work together to make building the API seamless.

REST components
it is it's ow servlet
comes in a different way than a normal CFC
application.cfc
onRequestStart will see the request
onRequest will NOT
OnError is nOT called (bug)
OnCFCRequest will NOT see the request
it has a different "request path" than a regular http request
only visible in onRequestStart

need to "register" your REST components in either CF admin or via the Admin API
or in App.cfc
this.restsettings.cfclocation="./, /rest, /foo";
this.restsettings.skipcfcwitherror = true;
...have to "refresh" the rest files if you change them (via CF admin)

RESTful CFC post Example
view plain print about
1<cffunction name="newPlayer" access="remote" httpmethod="POST" restpath="newPlayer" returnformat="json">
2<cfargulent name="playerData"> <!--- JSON --->
3.
4.
5.
6<cfset jsondata = deserializeJSON( arguments.playerData ) />
7</cffunction>
ColdFusion 11 JSON improvements
to basically deal w/ the JS frameworks like angular
data type preservation
case preservation
added "struct" as new Query Format
custom serializer
(select *) returns all uppercase keys. So keep that in mind if using select *

directives--
think of them like custom tags with stuff between the "open and close tags"
can wrap anything you like and anyone can use that "tag"

working w/ client side data
angular likes to keep data on the client
concurrency becomes an issue if people are all pushing data back and forth and if someone's client has dirty/old data
services to help
-firebase, GoInstant
Sockets
-socket.io, HTML5 web sockets

building in security
custom request tokens
angular $http interceptors

team development processing
another benefit
once you an api
front end can code to the api while back-end fills in the details
parallel development

ngMock
-simulates a back end, to mock back-end communication


More Entries

Recent Comments

CF Objective Recap and Highlights
Jason Dean said: Thanks, Nolan! [More]

CF Objective Notes - What's a Pull Request? (Contributing to Open Source)
Brad Wood said: Thanks for posting your notes! Here the full slide deck too... [More]

Things I Learned While Teaching Java (part 2)
Nolan Erck said: I'm aware that it's in the Java spc, I just don't like it. I... [More]

CF Objective Recap and Highlights
Jason Dean said: Thanks, Nolan! [More]

CF Objective Notes - What's a Pull Request? (Contributing to Open Source)
Brad Wood said: Thanks for posting your notes! Here the full slide deck too... [More]

Things I Learned While Teaching Java (part 2)
Nolan Erck said: I'm aware that it's in the Java spc, I just don't like it. I... [More]



BlogCFC was created by Raymond Camden. This blog is running version 5.9.7. Contact Blog Owner