Category Archives: Tips and Tricks

This little script lets your iOS users know your site can be added as an app

If you have navigated to some sites on your iPhone or iPad recently, you may have noticed the “Add to Home Screen” balloon. This lets users add the current mobile friendly website installed as a web app on their iOS Screens.

Add To Home Screen Floating Ballon

Add To Home Screen Floating Balloon

I thought this could be a useful addition to a responsive site I’m working on so I searched how to get this working. To my surprise and delight I ran into Matteo Spinelli’s website. He’s published a nifty little script and some CSS to quickly add this to your web apps.

The full article can be found here. I haven’t had issues with it on iPhones although on iPads it looks a little rough around the edges. I still recommend you give it a try, I promise it will be time well spent :-).

Advertisements
Tagged , , , ,

How to fix your 3.0 Bootswatch theme for MVC’s Bootstrap 2.3 Responsive templates on Visual Studio 2013

If you are like me, you already downloaded Visual Studio 2013 and probably migrated some solutions to the latest MVC version. It  comes with some great responsive design features out of the box starting with the stock template. On the other end, if are using Bootswatch themes you will see that the latest 3.0 Bootswatch themes for Bootstrap break the responsive design. The top navigation reverts to the small screen size and the Hero-Unit also looks funky. Well don’t despair, thanks to Ghislain Proulx and his article, I was able to update my 2.3 references to 3.0, switch my Hero-Unit for a Jumbotron among  other CSS fixes.

Nuget Packages:

Update-Package Bootstrap
Update-Package jQuery.Validation
Install-Package Respond
Install-Package html5shiv

Update your BundleConfig files, grab your Bootswatch theme, and replace your “~/Content/bootstrap-theme.css” file and voila’.

If you need inspiration try the Amelia theme it is my favorite:

Amelia Bootswatch Theme

Amelia Bootswatch Theme

Any additional CSS edits will be application specific; for example, I had to change hero-unit for jumbotron and my spans for col-md-4.

Hope this helps 🙂

Tagged , , , ,

This is one way to never miss a sale – AT&T Developer Program Blogs

Happy Thanksgiving

Happy Thanksgiving

In the spirit of the holidays, and the shopping opportunities that go along with it; we have a nifty way to never miss an online sale. How about a little shopping helper that texts you when the article you have been looking for goes on sale? This should help you accumulate some brownie points with your wife at least. Using our SMS API and Topshelf we’ll build a little service to help you hunt those deals.

Continue on http://developer.att.com

Tagged ,

Counting Steps Towards Better Apps – AT&T Developer Program Blogs

With the introduction of the latest hardware and software, we are seeing more health and fitness technologies making it to our phones. There are many possibilities and integration opportunities for developers who want to expand their current portfolio of apps. Let’s look at some of the shifts in these trends and how we got here.

Continue on http://developer.att.com

Designing mobile apps for offline mode – AT&T Developer Program Blogs

For many of us, being disconnected from the web seems like an alien concept. We keep our phones in our pockets all the time and get frustrated when our flight has no Wi-Fi onboard. But for app developers, being disconnected presents additional challenges.

I recently attended DevLink and heard Aaron Powell speak about “airplane mode” and some of the ways to achieve this within mobile web apps. His talk sparked my curiosity and made me wonder how many developers are creating apps with offline mode capabilities as a feature, or “offline first” design principles as some call it.

Continue on http://developer.att.com

“Mobilize” your existing SQL Azure tables (from WASD to ZUMO)

I have been playing around with Windows Azure Mobile Services (ZUMO) and found a great article on Using an existing Azure SQL table with Windows Azure Mobile Services by Jeff Sanders. I have been trying to do the same but found some challenges along the way.

If you are using EF Data Migrations on you project you will need to ensure the schema is set to the name of the Mobile Service name instead of dbo (this might be tricky for some); or use the EF DB First Model approach. In addition to that you will need to make sure the column types being used by your app are compatible with the types for ZUMO. Lastly remember to set the id (Not ID as it is case sensitive) column to be an identity column.

With those small changes you will be able to access your previously created tables via ZUMO while minimizing impact to any legacy webapp you may have developed earlier.

Hope this helps 🙂

Additional References:

Moving an Access DB to Windows Azure Mobile Services by Scott Klein

Creating a EF DB First Model with SQL Azure by Julie Lerman

Using existing database with Azure Mobile Services by Filip Woj

Do you or do you not know about the VERB… Cause everybody’s heard that the VERB is the word

Like Peter Griffin said the bird is the word, I say the VERB is the word. What I’m I talking about? HTTP Verbs.

I have been recently playing with Windows Azure Mobile Services commonly called ZUMO. In doing so I ran into a bit of a snag. I was trying to do CRUD operations from an MVC 4 app when i kept getting an error on updates. As many people know the typical mapping for REST APIs is something like this:

Read: HTTP GET
Insert: HTTP POST
Update: HTTP PUT
Delete: HTTP DELETE

While I had no issues inserting or reading the update action was failing with the following error “{“MethodNotAllowed“}. After some digging I was able to spot the issue. The ZUMO REST API is expecting the PATCH Verb instead of PUT.

I replaced the following:

var request = new HttpRequestMessage(HttpMethod.Post, BaseAddress);

with

HttpClient client = new HttpClient();
client.DefaultRequestHeaders.Add("X-ZUMO-APPLICATION", ApplicationKey);
client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
var request = new HttpRequestMessage(new HttpMethod("PATCH"), BaseAddress + contact.id);

That little tweak did the trick!

Hope this helps others playing with Windows Azure Mobile Services too. If you haven’t go ahead and give it a try 🙂

Global Windows Azure Bootcamp

Today I was able to demo some of the features of Windows Azure Mobile Services for the Global Windows Azure Bootcamp. We certainly had a great time.

Here is a video to recap some of the areas we covered:
Mobile Services Getting Started With Data

Windows Azure: New Hadoop service + HTML5/JS (CORS), PhoneGap, Mercurial and Dropbox support

Danny Acuna

Last week the Windows Azure team  released a number of great enhancements to Windows Azure.

View article…

View original post

iPhone/iPad Simulator for Visual Studio at NashDotNet

If you have been looking for a quick way to see how your MVC pages would render on an iPhone or iPad… I have some good news for you. This week while attending aspConf i saw Scott Hanselman run an MVC app directly from Visual Studio in what looked like an iPhone Simulator (link). Indeed it was, I googled and found a blog post that detailed how to do this. I will try to explain in detail for those interested.

Step 1: Download Microsoft WebMatrix 2.0 RC

You will need to download WebMatrix 2.0 RC in order to get the browser extensions to support this.

Step 2: After install, Open a site in WebMatrix

Step 3: Select a site and click Ok

Step 4: Select Add New from the Options in the Run Menu

Select Add New From the Run Menu

Select Add New

Step 5: Select the iPhone simulator from the Browser extensions gallery. Either option (iPhone/iPad) will work as it is the same simulator.

Select iPhone Simulator from the Browser extension gallery

Install iPhone (or iPad) Simulator

Step 6: Open Visual Studio with you Web Project. From the Debug control select Browse with

Select Browse with in Visual Studio

Select Browse with in Visual Studio

Step 7: Add a new Browser to the list

Select Add

Select Add (new browser)

Step 8: in Program, look for Electric Plum’s Simulator

Browse for the simulator

Browse for Electic Plum’s executable

Step 9: Navigate to this Directory:

C:\Users\USER\AppData\Local\Microsoft\WebMatrix
\Extensions\20RC\iPhoneSimulator\
ElectricMobileSim\ElectricMobileSim.exe
C:\Users\USER\AppData\Local\Microsoft\WebMatrix\Extensions\20RC\iPhoneSimulator\ElectricMobileSim\ElectricMobileSim.exe

Browse for: ElectricMobileSim.exe

Step 10: Add arguments and Rename the Browser.

Argument “1”: iPhone Simulator

Argument “2”: iPad Simulator

Arguments and Rename

Arguments: 1 – iPhone Simulator, 2 – iPad Simulator

Step 11:

Run the project with this new browser

Run the project with this new browser

Step 12: Enjoy!

You can now test out your web app on this iPhone or iPad simulator. While nothing compares to actual testing on a device this is a great option for .NET Developers who need a quick way to test directly from Visual Studio their work. This is great for testing the new MVC 4 Mobile templates too.

For non .NET Developers you may want to try out Adobe’s Shadow also; it is a Chorme extension that connects to physical devices too.

Update: David Neal from NashDotNet also mentioned that this is a great way to develop quick mockups when you need it as you can take screenshots from the simulator.

Update: ElectricPlum Studio is no longer free but the lite version comes bundled with WebMatrix now and still does all you need!

Tagged
Advertisements
%d bloggers like this: