jump to navigation

Famo.us Easter Egg April 2, 2014

Posted by willhlaw in API, Javascript, Mobile.
Tags: ,
1 comment so far

In Steve Newcomb’s FAQ: Tough Questions on Famo.us, he puts an Easter Egg for those patient enough to read to the end. I thought those that wanted to google for a quick translation might find this helpful.  Famo.us is a free and open source JavaScript development framework back by a host of cloud services.

Si vos vere postulo impetro in BETA mox steve@famo.us ad minim veniam. Sciam si vestrae res et faciam te in BETA possim.

April 9 Si ad res, in prima acie, simul te BETA.

— Using Google Translate from Latin to English (link) –>

If you really need to get the Beta as soon as steve@famo.us more information, I come. I am able to rest assured that if your situation and I will make of thee in beta.

April 9 On the real thing, in the front line, at the same time you beet.

Advertisements

Best way to speed up Javascript (specifically jQuery) load times November 12, 2012

Posted by willhlaw in Javascript, jQuery, Web 2.0.
Tags: , , ,
1 comment so far

Image

The obvious way is to use a popular CDN, short for Content Delivery Network, such as Google’s. Dave Ward explains the reasons very well in his article, “3 reasons why you should let Google host jQuery for you” and his three main points are:

  1. Decreased Latency – CDN allows the download to occur from the closest server to the user.
  2. Increased Parallelism – The local web server can be serving up content while the other connection is pulling from Google.
  3. Better Caching – Since so many other sites are using Google’s CDN, the user may already have the jQuery or javascript file in their cache.

However, there is a caveat. What if the connection to Google goes down? Can your site survive without jQuery? It should, if you developed the site with a responsive design and progressive enhancement.

The answer is to fall back to a local copy (code sample below).

  1. Write a script tag that refers to Google’s CDN.
  2. Then in the next script fragment, check to see if the jQuery or some public variable from the javascript file exists.
  3. If the object does not exist, then dynamically write another script to the page that refers to the local file.
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.5.1.min.js">\x3C/script>')</script>

I learned this concise technique while watching a Twitter Bootstrap 101 tutorial (kudos to David Cochran for the great videos) that referred to this best practice that appears to have come from the HTML5 Boiler Plate project.

By the way, the numbers (from Pingdom) support Google as being most likely the best CDN to use.

CDN performance numbers


Trailing commas problem in IE prototypes October 27, 2009

Posted by willhlaw in Debugging.
Tags: , , , ,
add a comment

If I knew about this when I first got started with jQuery and the jPoint Project last year, it would have saved me some hours off my life. When writing prototypes in Javascript, do not include a comma after the last function.

Screenshot is from this post by fritz-onion.

Working with the new Client Object Model: From SPC09 Las Vegas October 20, 2009

Posted by willhlaw in jQuery, SharePoint, Sharepoint Designer, SPC09.
Tags: , , , ,
9 comments

Live from Las Vegas at Mandalay Bay. I am at the SharePoint Conference 2009 and listening to a presentation on the new SharePoint 2010 Client Object Model. Presenter was Paul Stubbs from Microsoft.

Client Object Model

  • Simple API to Add, Retrieve, Update and Manage Date in Shareponit.
  • 1st goal – consistency
    • Between client and server API
    • As well as between the three different clients, Client side (.NET), Silverlight, and Javascript.
  • 2nd goal – efficiency
    • In use of server resources
    • In use of network resources
    • Uses a SQL model. Batch up client calls, call server, server processes query, server turns results as a result set
    • Only return data the exact data that I need. i.e. When calling a list, only retrieve data for the specific columns that are needed.
  • Code example
    • Today:
      • SPWeb site = SPContext.Current.Web;
      • String title = site.Title;
      • Site.Title = title + ” and Client OM”;
      • Site.AllowUnssafeUpdates = true;
      • Site.Update();
    • Now with Client Object Model:
      • ClientContext = clientContext = new ClientContext(http://intranet.contoso.com);
      • Web site = clientContext.Web;
      • clientContext.Loadsite);
      • clientContext.ExecuteQuery(); //synchronous call
      • site.Title += ” and Client OM”;
      • site.Update((); //second call because as a rule, can’t use a property to set the value of another property.
      • clientContext.ExecuteQuery();
    • Another example:
      • Web site;
      • ClientContext ctx;
      • Void MainPage_Loaded(object sender, RoutedEventArgs e)
      • { contexzt = new ClientContext(http://mysite);
      • Site = context.Web;
      • Context.Load(site);
      • //Call the Sharepoint Server
      • Context.ExecuteQueryAsync(succeededCB, failedCB);}
    • Javascript example:
      • _spBodyOnLoadfunctionNames.push(“Initialize”);
      • Var site;
      • Var Context;
      • Function Initialize()
      • { contexst = SP{.Clientcontext.get_current();
      • Site = Context.get_web();
      • Context.load(site, “Title”);
      • //Call the Sharepoint Server
      • Context.executeQueryAsync(Suceeded, Failed);}
  • Retrieve Data
    • Context.Load(object, params LinqExpre3ssion)
      • Fills out the objects in the context; in-place
      • ‘method syntax’ linq only
  • Context.Loadquery(iQueryable)
    • Use linq query to return custom objects
    • Not filled into the client context
    • Both ‘query syntax’ and ‘method syntax’ linq
  • Query Syntax
    • More natural Linq query that is familiar
    • Var query = from list in clientContext.Web.Lists where list.Title != null select list;
  • Method Syntax
    • More technical
    • clientContext.Load(oList, list => list.Fields.Where( field => field.hidden === false && field.Filterable == true));
    • Harder, but more powerful.
  • How does this all work? How to access data with Client OM?
    • A new service called Client.svc is a proxy to WCF service.
    • When .ExecuteQuery occurs, block of XML gets sent to server, it unwinds it, and returns JSON object to client.
    • Use fiddler to see the payload to understand how it works, but once you do, can ignore the traffic details.
  • Demo 1, change site title “Hello World”:
    • Shows an example of client.svc runtime being used in a windows application to change the title of a site.
  • Client Object Model using .NET is synchronous, but Silverlight and Javascript are asynchronous.
  • Demo 2, a WPF example:
    • Purpose is to fill a list box with a List of Lists.
    • There are some namespace collisions when building the WPF app.
    • So, you must write: Using SP = Microsoft.Sharepoint.Client again to prevent namespace conflict.
    • Object model will turn query syntax into method syntax before sending it to the server. Remember, query syntax is easier to write.
  • Demo 3, showing .NET CLR in Word
    • Drop .NET controls on the canvas onto the design surface within Visual Studio.
    • Purpose is to fill a task pane (Action Pane, uses ElementHost control because it needs to be Winforms based) on the right-hand side of customer data.
    • Also showing grabbing fields from a list.
  • Demo 4, javascript and jQuery
    • In visual studio, starting a new OMJavascriptApplication
    • <SharePoint:scriptLink> name=”sp.js”. -> Name of javascript client object model
    • <script src = js/jquery-ui-1.7.1.custom.min.js and other jquery files. Presenter mentions that trontastic is a great css to use. I have to check it out.
    • Bui8lding a dynamic jQuery Accoridion on the page by setting a div id=”accordion”
    • Has a separate MyJScode.js file
      • Inside the file, uses _spBodyOnLoadfunction to push Initialize function with familiar code that gets context, etc.
      • LoadListBox is pure jQuery code to populate listbox with a change event.
      • Var listEnumerator = lists.getenumerator();
      • While listEnumerator.moveNext()) {
      • }
      • Then listbox1.append using standard jquery.
      • BuildTable(ListName) is pure jQuery code.
    • Purpose of example is to show List of Lists inside the accordion! Really cool. This caused the audience to clap for the first time in the entire demo!
  • Javascript Client OM
    • Javascript files are in the 14 bin folder on the server.
    • There is a debug version (SP.debug.js)
    • SP.Core.js and SP.Core.debug.js
    • SP.Runtime.js (SP.Runtime.debug.js)
    • Debug versions are only slighter larger.
  • Next demo, Silverlight example
    • In visual studio, starting a new OMSilverlightApplication in Visual Studio
    • Starts with a simple grid with listbox
    • Using SP = Microsoft.Sharepoint.Client again to prevent namespace conflict.
    • Can build using standard Silverlight code to run in browser or inline, which I think means stand alone on the client machine.
    • It is easy to go from WPF code to Silverlight using this.Dispatcher.BeginInvoke and using a lambda expression.
      • i.e. this.Dispatcher.BeginInvoke ( ()=> {messageBox.Show(string.Forma(“failed – msg”); })
    • There are lot of steps to publish the Silverlightproject. Seems like several options for outputting the project. Grant it, I am not familiar with Silverlight at all.
    • (uh-oh, big clapping from next session over!) Yeah Microsoft.
    • When deploying Silverlight app to Sharepoint, a Silverlight.xap file is published to a Silverlight folder located at
    • The project does not exist on the SharePoint server, it is deployed as a sandbox solution.
    • In site settings -> solutions -> OMSilverlightApplicatinoDeploy exists for a site collection administrator to deploy.
    • Since deployment option was checked to allow Silverlight webapp to be installed on client, you can right-click the Silverlight listbox app, and can install the app on the client!
    • (This got the second clap of the session from the audience!)
  • No reason to deploy in WPF (if you are not doing full trust or 3D). To have updates, click once, security, and to have offline capability, build apps in Silverlight!    
  • #SPC09Buzzword for this session, “Super Powerful. Super Powerful”
  • Silverlight CLR Client OM
    • Located in 14 bin on server.
    • Microsoft.SharePoiht.Client.Silverlight (262KB)
    • Microsoft.SharePoint.Client.Silverlight.Runtime (138KB)
  • Q & A
    • I asked what recommended methods does Microsoft have for deloying jQuery and script libraries to Sharepoint Pages. There was no real recommendation other than including it in masterpage globablly or referencing it in a single .aspx file, but Scott was the second time I heard to talk with Mike Amerland.

My first YouTube video is an intro to jPoint October 18, 2009

Posted by willhlaw in jPoint, jQuery, sharejPoint, SharePoint.
Tags: , , , , , , , , , ,
2 comments

The sharejPoint blog, managed by The jPoint Project, has a post over at http://bit.ly/blog_jPoint_YouTube and the video is at http://bit.ly/3C3bab. The video has me introducing jPoint and going through a quick demonstration.


(Video Screenshot is an image hyperlinked to YouTube video)

This video says it is 9:33 long, but the intro and demo really only lasts until 5:59. The rest of the video is a silent intro that I added in order to re-upload the video with enough of a checksum difference for YouYube not to reject it as a duplicate. The first video that was created did not have the correct zoom points at places. The silent part which is a couple of minutes at the end is not necessarily a waste of time. It shows the jPInspector example which shows the power of jPoint.Form. This acts as a preview of the next video. So, how did I do for my first video screencast? What can I do to improve the next one?

Kung-fu jQuery Solution to Bill Simser’s Post on Changing the Home tab in Multipage Meeting Workspaces October 14, 2009

Posted by willhlaw in jPoint, jQuery.
Tags: , , , , ,
4 comments

Bill Simser posted a blog article two days ago that I wanted to reply to. The title was “Changing the Home tab in Multipage Meeting Workspaces with jQuery”. However, when I posted my comment, it did not show up. I know that sometimes, it takes a while. I waited, reposted my comments in Chrome rather than in IE7 and waited some more. But after an entire day and Bill tweeeting he did not see any comments, I am resorting to responding with a blog post.

Thus, here is a re-hash of the problem Bill was trying to solve. On a Multipage meeting workspace, you can change the name of each meeting tab except for the “Home” one. Bill came up with a jQuery solution for changing the “Home” to “Zombieland”, or whatever you wish. However, he needed two separate script solutions on the “Home” page and the other pages because the structure of the tab changed whenever it was the current selected page (no link is necessary to click on the tab that you are already on).

Here were Bill’s two solutions.

To change the Home Page tab name we’ll need two Content Editor Web Parts (CEWP). One when the Home tab is active and one when it’s not. Using jQuery we simply find the tab and change the text. Seriously it’s this easy:

<script type=”text/javascript”>

$(document).ready(function(){

$(‘.ms-tabselected:contains(“Home”)’).text(“Zombieland”);

});

</script>

And here’s the code when the tab is inactive (it has a different classname):

<script type=”text/javascript”>

$(document).ready(function(){

$(‘.ms-tabinactive:contains(“Home”) a’).text(“Zombieland”);

});

</script>

And here is Bill’s problem:

I thought I would be smart and use the className^=”ms-tab” wildcard so it would work on any page but the content changes if the page is active. Even with the class selector when the page is active, there’s no hyperlink to the page (which makes sense) so no ‘a’ selector to find. When the tab isn’t active it’s there. My JavaScript kung-fu prevents me from figuring out something that works for both situations but feel free to post a snippet in the comments and I’ll update the post.

This is my answer to Bill and it would have been a comment on his blog but for some reason, my 4 attempts to comment did not work. (Don’t worry, I tried everything, including just writing about the first part of the solution and leaving out the whole configurable script part.)

[metadata would have looked something like this] Monday, October 12, 2009 3:55 PM by willhlaw

Okay, I am not sure if you need your code on one line, but the following ninja code should work.

<script type=”text/javascript”>

$(document).ready(function(){

var homeTab = $(“span .ms-tabinactive, .ms-tabselected”).find(“:contains(‘Home’)”);

homeTab.html(homeTab.html().replace(“Home”,”ZombieLand”));

});

</script>

Basically, I use find to search the children. And so as not to affect the structure, I do a string replace.

I created a quick configurable script using jPoint so a user with edit page permissions can change the new tab name from “Zombieland” to something else. It uses the jPoint configuration model, so if you are familiar with it, it should be simple. If you are not, just drop the script onto a content editor webpart and you will see a yellow config screen with an edit button.  Click that edit button to change the NewTabName from “Zombieland” to anything else. After the page refreshes, you’ll see your changes. No need for power users to mess with code.

Here is the configurable script with the script tags replaced with [script] to make sure it will appear:

<script type=”text/javascript”>

var myjLocalOptions={NewTabName:’ZombieLand’};

</script>

<script type=”text/javascript” src=”//sharejpoint.googlecode.com/files/jPart-0.4-template-expanded.js“></script>

<script src=”/src/jPoint_dev/webparts/jPart.replaceMeetingHomeTab.js”></script>

Here are the pictures to help explain the configurable script for Changing the Home Tab of a Multipage Meeting Workspace.

A close up.

When you click the Edit button, you will see the following configuration screen for the script webpart.

A close-up.

So now, without having to be a developer, a power user or site admin could change the name of the “Home” tab to ZombieFire.

Click Update and you will see the changes.

.