Category Archives: Software Development

Add some pride to any picture

Pridefy.com – Inspired by Love and created with Love

Inspired by the decision of the Supreme Court of the United States to declare same sex marriage a constitutional right and the celebratepride tool that Facebook launched on that same day, I decided to create an MMS ( Twilio powered) version of the same for those who (and I’m not sure why) do not have a Facebook account yet. Here are the steps I followed to make this happen; if you want to see the demo go to Pridefy.com

Step 1 – Change Opacity:

First I needed to find a way to change the opacity of the rainbow flag; a 50% seemed like the right choice here but I made this option part of the input for the method, just in case you want to play with this in the future. Check this article for some more details into this.

I tried this method and got some results, but not quite what I wanted. See what I mean here:

Background Image with Overlay at 50%

Background Image with Overlay at 50%

Step 2 – Scale Image:

I wanted like the rainbow flag to cover the whole image, So I tried making both images the same size and this is what I got:

output2

Stretched with Uniform Ratios

This didn’t turn out like I wanted it. I needed to scale the image using ratios horizontally but needed to retain the same vertical height.

Check the results now:

Final Result

Final Result

Step 3 – Putting it all together for Image Manipulation

When I receive an MMS message what I get is not the actual file (binary) but a link to the media file in Twilio’s servers. Therefore I needed to do a webrequest to get the media file (this is the MediaUrl0 parameter). I grabbed the flag image from a public Flicker url.

I then do the scaling, overlay and return the (in memory) image to the main controller.

Step 4 – The MMS Controller

I created an MVC controller to handle the incoming images and return back TwiML markup (Note: This controller must inherit from TwilioController in order to be able to send that TwiML markup back). You can do the same with a WebAPI controller, Node, etc. I just went for simple here

The same way that Twilio sends images via MMS, I needed to send them back; this means I had to save the image somewhere and then send the URL to that media file back. To do this I used Azure Blob Storage; again nothing fancy here, check this tutorial for a quick how to. I created a container for my images,created a blob and uploaded the image to that blob.

Warning: don’t forget to set the Content-Type for the blob, failure to do this will serve the blob as “application/octet” which Twilio won’t be able to handle. 

Hopefully you enjoyed this little project, I surely did. Feel free to reach out if you have any questions with this demo.

Have fun and celebrate love

Advertisements

Recap from #Braindump at the HUB

Yesterday I attended #braindump at the Hub, to discuss Windows Azure, Win8, WinPhone and Xamarin development. With a focus on app development and getting local developers to publish (on any Appstore). The event had very good speakers and a diverse set of characters in the audience. I wish more people has attended but for me it was a great kickoff to a new project.
A nice surprise was meeting Chris Risner (@chrisrisner) who’s content I have been following for quite sometime. We had a chance to talk about mobile services and some of the challenges in marketing and exposing WAMS to other developers.
I also had the chance to chat with Jeremy Foster (@codefoster) on the pros/cons of XAML vs. WinJS for Win8 Development. He shared a very nice gallery of examples called CodeShow. I think this was the turning point for the current project and the move to WinJS. I’m glad I was able to attend his session 🙂
I was happy to see the guys from Xamarin show off some of the new embedded solutions and (repeatedly) answer the questions from the crowd on how to “develop iOS and android apps from inside Visual Studio”. I gotta give it to (@bryancostanich) for his patience with the crowd and hope to see some more awesome tools in the future.
Lastly I met Matt Harris Co-Founder of SendWithUS one of the few partners of the SendGrid team. His session was very personal, he evangelized on what had started as a personal quest for better email management and ended up being a company. It is hard to believe this is the outcome from 11 months of work from a 7 person team. I liked his product but more so his passion, it is hard to find people with that determination.
Abe’s Insight: I’m still in awe with some of the gaps in knowledge from the technical audiences I interact with. The fragmentation in platforms has been there from the beginning (this is not news). We have been developing iOS apps, Android apps and lately Win8 and WinPhone separately; the search for that “one IDE to rule them all” should be over by now…seriously. It is all a business driven decision, going the HTML5 route vs the Native one is not a matter of user base and numbers but one of product development and how an app should be an extension of your company/product/business.
Tagged , , , , , , , , , , ,

A Lap Around VS2013 ALM by Anthony Borton

via Instagram http://instagram.com/p/hcbSFCIia8/

Today I had the chance to meet @AnthonyBorton at the .Net Developers Association. He shared some of the cool features from VS2013 and TFS Online (or maybe i should call it “Visual Studio Online”?). I enjoyed some of the new linking inside Team Rooms and quick charting features. I hope people don’t over do it with the charts though 🙂 I do see a winner with some of the new Load Performance features powered by Azure.

Tagged , , ,

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

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 ,

“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

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
%d bloggers like this: