Abe Diaz

Seattle Public Library – Tu Negocio

Abe Diaz — Sun, 23 Oct 2016 19:39:42 +0000

I have had the pleasure of working with the Seattle Public Library in previous events like Startup Weekend EDU to promote entrepreneurship in the community, but this was the first time I was speaking in spanish to the community. It was very interesting to see how the community has adopted social media with great success to their advantage but lacked an actual presence online since building a website was considered to be “technically challenging”. We talked about ways to prove a market need before spending too much time or capital and some quick tools to make their life simpler. I very much enjoyed this event and hope to participate in future ones.

Seattle Codecamp 2016

Abe Diaz — Mon, 12 Sep 2016 22:27:43 +0000

It’s that time of the year again; I can’t believe time goes by so quickly. This year I had the chance to talk about Amazon’s Alexa Service and building skills for your Echo. This is probably my latest obsession if you ask my wife.

We had a good mix of attendees, some had already created skills before and some had devices but not ventured into skill building. We covered the mapping of utterances to handlers, building Voice User Interfaces (VUI) and the benefits of using AWS’ Lambda service before doing a demo of a skill that recommended a session to attend during the conference. The presentation is available in SlideShare for those interested.

My experience at Seattle CodeCamp 2015

Abe Diaz — Mon, 21 Sep 2015 06:21:24 +0000

Last week I had the chance to speak at the Seattle CodeCamp 2015. It truly gets better each year; the quality of speakers and the support from the community. For those interested, I gave two talks, one I had done previously and a new one.

Talk 1: Introduction to Jenkins

Honestly, the first talk had a rocky start, my fault for not noticing that my demo laptop had HDMI instead of VGA. After that we were able to dig into Continuous Integration and how Jenkins plays a key role on distributed development teams. The key takeaway for the group was to use nodes (slaves) to distribute workloads and also to be able to test in different operating systems/browsers, etc.

Talk 2: Slack for mere mortals

This was the first time I talked about Slack and my personal experience within small and large groups. Being in the DevOps track the bulk of the questions and examples were geared towards ChatOps and the concept of bringing work to the conversations you are already having.

I am very impressed by the organizing team and the large number of volunteers, they totally made this event seamless for speakers and attendees. Thanks.

Introduction to jenkins for the .net developer at @netda

Abe Diaz — Tue, 07 Jul 2015 06:45:25 +0000

Today I had a chance to share with a group of .NET developers some of the features of Jenkins and how continuous integration fits in today’s software development world. We talked about some of the options on source control, plugins, workflow, jobs and master/slave node architecture. Here are the slides for those interested.

Hope those who attended @netda enjoyed it. Feel free to share with me your experiences with Jenkins.

Add some pride to any picture

Abe Diaz — Tue, 30 Jun 2015 16:05:16 +0000

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.

	public static Bitmap ChangeOpacity(Image img, float opacityvalue)
	{
	Bitmap bmp = new Bitmap(img.Width, img.Height);
	Graphics graphics = Graphics.FromImage(bmp);
	ColorMatrix colormatrix = new ColorMatrix();
	colormatrix.Matrix33 = opacityvalue;
	ImageAttributes imgAttribute = new ImageAttributes();
	imgAttribute.SetColorMatrix(colormatrix, ColorMatrixFlag.Default, ColorAdjustType.Bitmap);
	graphics.DrawImage(img, new Rectangle(0, 0, bmp.Width, bmp.Height), 0, 0, img.Width, img.Height, GraphicsUnit.Pixel, imgAttribute);
	graphics.Dispose();
	return bmp;
	}

view raw

ChangeOpacity

hosted with ❤ by GitHub

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%

" data-medium-file="https://abediaz.com/wp-content/uploads/2015/06/output1.png?w=300" data-large-file="https://abediaz.com/wp-content/uploads/2015/06/output1.png?w=580" class="wp-image-1060 size-medium" src="https://abediaz.com/wp-content/uploads/2015/06/output1.png?w=300&h=300" alt="Background Image with Overlay at 50% " width="300" height="300" srcset="https://abediaz.com/wp-content/uploads/2015/06/output1.png?w=300 300w, https://abediaz.com/wp-content/uploads/2015/06/output1.png?w=600 600w, https://abediaz.com/wp-content/uploads/2015/06/output1.png?w=150 150w" sizes="(max-width: 300px) 100vw, 300px">

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:

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.

	public static Image ScaleImage(Image image, int maxWidth, int maxHeight)
	{
	var ratioX = (double)maxWidth / image.Width;
	var ratioY = (double)maxHeight / image.Height;
	var ratio = Math.Min(ratioX, ratioY);

	var newWidth = (int)(image.Width * ratio);

	var newImage = new Bitmap(newWidth, maxHeight);//
	Graphics.FromImage(newImage).DrawImage(image, 0, 0, newWidth, maxHeight);//
	return newImage;
	}

view raw

ScaleImage

hosted with ❤ by GitHub

Check the results now:

Final Result

" data-medium-file="https://abediaz.com/wp-content/uploads/2015/06/output.png?w=300" data-large-file="https://abediaz.com/wp-content/uploads/2015/06/output.png?w=400" class="size-medium wp-image-1067" src="https://abediaz.com/wp-content/uploads/2015/06/output.png?w=300&h=300" alt="Final Result" width="300" height="300" srcset="https://abediaz.com/wp-content/uploads/2015/06/output.png?w=300 300w, https://abediaz.com/wp-content/uploads/2015/06/output.png?w=150 150w, https://abediaz.com/wp-content/uploads/2015/06/output.png 400w" sizes="(max-width: 300px) 100vw, 300px">

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.

	private static Image CreateBlendedImage(string backgroundimageurl)
	{
	Image imageBackground;
	Image imageOverlay;

	var request = WebRequest.Create(backgroundimageurl);
	using (var response = request.GetResponse())
	using (var stream = response.GetResponseStream())
	{
	imageBackground = Bitmap.FromStream(stream);
	}

	var request2 = WebRequest.Create("http://c1.staticflickr.com/1/286/19041020628_2657a057cc_k.jpg"); //Rainbow Flag
	using (var response2 = request2.GetResponse())
	using (var stream2 = response2.GetResponseStream())
	{
	imageOverlay = Bitmap.FromStream(stream2);
	}

	imageOverlay = ChangeOpacity(imageOverlay, 0.5F);
	imageOverlay = ScaleImage(imageOverlay, imageBackground.Width, imageBackground.Height);
	imageOverlay = imageOverlay.GetThumbnailImage(imageBackground.Width, imageBackground.Height, null, IntPtr.Zero);

	Image img = new Bitmap(imageBackground.Width, imageBackground.Height);
	using (Graphics gr = Graphics.FromImage(img))
	{
	gr.DrawImage(imageBackground, new Point(0, 0));
	gr.DrawImage(imageOverlay, new Point(0, 0));
	}
	return img;
	}

view raw

CreateBlendedImage

hosted with ❤ by GitHub

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.

	//Reminder this class needs to inherit from TwilioController –> public class MMSController : TwilioController

	public ActionResult Index(string from, string mediaurl0)
	{
	Image blended = CreateBlendedImage(mediaurl0);
	//We are using Azure Storage, and loading our credentials from our config file
	CloudStorageAccount storageAccount = CloudStorageAccount.Parse(ConfigurationManager.AppSettings[""].ToString());
	// Create the blob client
	CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();
	// Retrieve a reference to a container.
	CloudBlobContainer container = blobClient.GetContainerReference("");
	//Allow public access to the blob (but not to the container)
	container.SetPermissions(new BlobContainerPermissions {PublicAccess = BlobContainerPublicAccessType.Blob });
	// Create the container if it doesn't already exist.
	container.CreateIfNotExists();
	// Retrieve reference to a blob names using the from phone number.
	//We add the png file extension so its easier for us when looking at a list of blobs
	CloudBlockBlob blockBlob = container.GetBlockBlobReference(from + ".png");
	// Create or overwrite the phone mumber blob with contents from a local file.
	//We re using temp file space for file creation
	var filepath = System.IO.Path.GetTempFileName();
	blended.Save(filepath, ImageFormat.Png);
	//remmeber to set the Content Type, else Azure will return appliction/octet and Twilio won't be able to read the image
	blockBlob.Properties.ContentType = "image/png";
	//Upload the file to Azure storage
	blockBlob.UploadFromFile(filepath, FileMode.Open);
	//Create th Twilio TwiML markup response
	var response = new TwilioResponse();
	string[] mediaurls = new string[1];
	//For some reason only http worked for me
	mediaurls[0] = blockBlob.Uri.AbsoluteUri.Replace("https://","http://");

	//Add the Blended Image URL from Azure to the response
	response.Message(mediaurls);
	//Note how we return a TwiML respone and not a View
	return TwiML(response);
	}

view raw

MMSController

hosted with ❤ by GitHub

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

I so want one! #octocopter #wishlist #drone

Abe Diaz — Sat, 20 Jun 2015 20:11:41 +0000

via Instagram http://bit.ly/1LasSOg

Technology meet the birds. Birds meet technology!

Abe Diaz — Sat, 30 May 2015 23:00:20 +0000

via Instagram http://bit.ly/1HD0Wx2

My birthday gift and new toy from @smanicka

Abe Diaz — Sat, 23 May 2015 08:41:48 +0000

via Instagram http://bit.ly/1HAQxXQ

Neat tool to visualize your site’s attention hot-spots and visual clarity

Abe Diaz — Sat, 03 May 2014 02:36:11 +0000

I recently ran into EyeQuant a neat tool to visualize how cluttered a website is. Here is an example of the attention map with my own blog:

Attention Map

" data-image-caption="

Attention Map

Attention Map

In addition to attention maps you can visualize how you scale in terms of clarity.

Visual Clarity

" data-image-caption="

Visual Clarity

Visual Clarity

I had previously seen a post (somewhere) that detailed how the same analysis could be applied to resumes and other important documents. It is a little sad to see how even after this concept has been drilled into most of our minds, cluttered design and ad-ridden websites are so prevalent.

A blank canvas for your browser… and another nifty hack

Abe Diaz — Thu, 13 Feb 2014 22:47:33 +0000

Sometimes it’s the little things that make us productive (i.e. new browser tabs). I use many browsers and get teased regularly for having a hundred tabs open and hogging the memory of my pc, but amid all those tabs, and God forbid plugins you installed in your browser, there is a disconnect between the new tab page for each. You could call it visual clutter and disuniformity… or you could call it boring, whatever floats your boat.

If you use Chrome you will probably see something like this (FYI I had a theme installed at the time of the screenshot so yours might look “cloudy”) :

Chrome New Tab

" data-image-caption="

Chrome New Tab

" data-medium-file="https://abediaz.com/wp-content/uploads/2014/02/gtab.png?w=300" data-large-file="https://abediaz.com/wp-content/uploads/2014/02/gtab.png?w=580" class="size-large wp-image-532" alt="Chrome New Tab" src="https://abediaz.com/wp-content/uploads/2014/02/gtab.png?w=580&h=416" width="580" height="416" srcset="https://abediaz.com/wp-content/uploads/2014/02/gtab.png?w=580 580w, https://abediaz.com/wp-content/uploads/2014/02/gtab.png?w=150 150w, https://abediaz.com/wp-content/uploads/2014/02/gtab.png?w=300 300w, https://abediaz.com/wp-content/uploads/2014/02/gtab.png 756w" sizes="(max-width: 580px) 100vw, 580px" />

Chrome New Tab

It has the small icons for recently visited pages and another search bar.

If you use Firefox you might get something like this:

Firefox New Tab

" data-image-caption="

Firefox New Tab

Firefox New Tab

It just has the recently visited pages but those icons are huge.

If you want something more productive and simple I recommend this little hack; paste this into your address bar and press enter:

data:text/html,

Peaceful isn’t it?

Did you notice it? Or were you just angrily looking at a white screen? Well if you clicked on the screen and started typing you would see that this white space is now editable! What this means is that this whole screen is now a fully equipped HTML notepad for you to write on.

This means you can copy and paste text and it will retain it’s hyperlinks and formatting; so maybe we can call this the poorman’s HTML editor too as all you have to do is then save the page and you have an actual HTML page you can host.

Advanced Tip:
If you want to take it to the next level, you can make this hack your default “New Tab” behavior. Follow this article to add an extension to Chrome or Firefox (sorry IE Users) and make this your new setting.

Have Fun