Saturday, September 27, 2014

Enable Windows Authentication in Firefox

TL;DR: for Firefox users, here’s how to integrate Windows Authentication to enable logging like IE (without entering credentials).

I use Firefox as my primary browser. At work, we've just started a big consolidation of all the companies sites and cloud services (that we use) to rely on Windows Authentication. Instead of just Windows and Outlook requiring your Windows credentials, now everything needs them including CRM, messaging service, partner sites, etc. So, I found that I’m entering my credentials over and over all the time.

IE, of course, integrates Windows Authentication. Firefox, for the longest time I thought, doesn't.

But I wanted to avoid this (laziness is the mother of all inventions). So, I did a bit of research and found that Firefox actually does support integrating Windows Authentication. However, it’s done via a white-list of sites that are pre-approved. Once this is configured, signing in is done automatically without having to enter credentials anymore.

To configure Firefox to skip the Windows credentials dialog, do the following:

  • In the address bar, type about:config and press Enter.
  • Click “I’ll be careful, I promise!”.
  • Search for “network.automatic-ntlm-auth.trusted-uris”.
  • Double-click on the entry to modify its value.
  • Enter a comma-separated list of sites you want to enable Windows Authentication for.
  • The URLs to be added should be the base URL without ‘http://’ in front. This makes it easy to avoid entering the wrong value.

If you use Firefox, apply these steps to quickly log into sites that uses Windows authentication.

If you don’t use Firefox, you really should. Check out Tab Groups.

It’s better than this :D

Sunday, February 9, 2014

Chocolatey: Install Software like a Pro

I use a lot of software, and always there's a nagging voice in head saying "you're not using the latest version. Update. Update. Update". Of course, sometimes that nagging voice is up on the screen asking me to update. However, as fun as using the latest version can be, the process of updating is not as fun. Downloading and installing takes a lot of time. Sometimes you have to uninstall the previous version. Sometimes, you even have to check if there's a new version yourself. You have to be careful to avoid installing adware. While some software is getting better at this, others (I'm looking at you, Adobe Flash. You really suck) are going backward and ask you to download the software yourself.

One the best thing about Linux that all this is taking care of. On Ubuntu, for example, you use apt-get to download and install software and keep it update with a single command.
Now, Chocolatey brings this smooth install and update process to Windows. Chocolatey is an open source free software built on top of NuGet; a package management technology offered as part of Visual Studio.

Chocolatey offers a gallery of software, much like an App Store where you can browse for the application you like, find the command for it, then from your command line, install it.

First you need to setup Chocolatey on your system, using a PowerShell command:

@powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString(''))" && SET PATH=%PATH%;%systemdrive%\chocolatey\bin

This one line command will download a PowerShell script from Chocolatey and run it, after allowing for unrestricted execution policy (which you disable later).

After you run this command, you can now install applications. Here's how to install 7-zip:

cinst 7zip.install

This command will install 7-zip under the "Program Files" folder (or "Program Files (x86)" if you use a x64 system). It will also register 7-zip with Chocolatey so that it can be updated later. If 7-zip is already installed, it will be updated (if an update is available), and registered with Chocolatey.

When you're picking a package from the Chocolatey gallery, make sure you're choosing the correct one. Sometimes there are packages with different options. For example: there's a portable package for 7-zip, and there's the install package that I used above. You can read more about Chocolatey's install vs. portable packages.

While you're installing your applications, make sure to keep track of all the commands you used. This will be helpful later when you're installing a new system. In one text file, you can keep track of almost all the applications you're using.

Later on, you'll need to update. Super easy, just type in the command line:

cup all

If you need help remember those commands: cinst is short of Chocolatey Install. cuninst is short for Chocolatey UnInstall. And cup all is short for Chocolatey Update All.
You can read the Chocolatey command reference for more details.

If you like the ease of Chocolatey but hate the command line, you can use Chocolatey GUI to do the same thing. It's a little bit slow so far, but it's very promising.

Sunday, November 10, 2013

Share To Social Networks Using Browser Bookmarks

I've tried many ways to easily share items from my browser to any of the social networks I'm using. Addons came close to working fine but I always worry (maybe unreasonably) about their load on the browser.

Then, I came across bookmarks (or bookmarklets) via a Scott Hanselman's post and I found a winner.

Here are the code snippets for how to share to some of the popular social networks. Simply create a bookmark and provide its location to be the code snippet:






To send items to Kindle, use

Wednesday, November 6, 2013

Outlook Out-of-Office Auto-Reply Only to Emails Directed to Me

Out-of-Office Replies are very helpful and, I must admit, very annoying. I’d love to maximize the first part and minimize the last. I only want to know that someone is out-of-office if I address them directly, not if I CC them.
Here’s how I set up my Outlook out-of-office automatic replies so that they only go out if the email is directed to me. No auto-reply will be sent if I’m only CC’d on the email.

These screenshots use Office 2010, but the steps are very similar in other versions.
  1. In the File/Office menu, open the “Automatic Replies” button.
  2. Select the date range you want replies to go out.
  3. Make sure to leave the area below blank. If you fill this area, an email will go out with the message you leave in there.
  4. Click the “Rules” button.
  5. In “Automatic Reply Rules” dialog, click “Add Rule…”.
  6. Check “Sent directly to me” so that emails that are only directly sent to you will be replied to.
  7. Check “Reply with” and click “Template..”.
  8. In the email compose window, enter the email message you want to go out.
  9. You can add more conditions, more rules, and more actions. Explore the different options and build rules that match your need.
  10. Click “Ok”. You’re done.

Enjoy your time out of the office, and less-flooded inboxes.
Hat tip to Phil Haack and Ali Ezzet.

Sunday, November 3, 2013

Open YouTube Videos in PopUp Window with a Bookmark

TL;DR Follow these steps to add a bookmark to your browser that opens YouTube videos in a popup window.

Aside from my laptop, I use two monitors. This allows my to "multitask" which is fancy talk for having something running/playing in the background while I'm actually working.
Sometimes the thing that is running in the background is a YouTube video. This is great with music videos and long videos that don't need my full attention. However, I find it annoying to have the YouTube page or video fill the entire screen. What I need is a small window with just the video. I don't really need the comments, suggestions, header, etc.

The embed HTML is the key here. You can right-click on the video and directly copy the embed code. It looks like this:

Embed code has a lot of options that you can view in the help section.
This embed code is of an iFrame that opens a YouTube page at a certain URL. YouTube would actually take care of removing all of the extra stuff that I don't need.
Browser bookmarks can run a JavaScript function which would open a popup window of a YouTube page with just this video.

The JavaScript function looks at the active browser tab and picks up the unique ID of the video before constructing the embed URL and opening a new browser window with that URL.
To avoid a predictable problem, the function will make sure that you're on a YouTube page before it opens the popup window. If not, it will display an error message.

How to Add This to My Browser

  1. Copy this code:
  2. Open your browser's Bookmark window.
  3. Create a new bookmark, and give it a name. Say: Popup YouTube Video.
  4. In the location, paste the code listed above.
  5. You're all done.

Thursday, August 29, 2013

How to Turn XML Schema (XSD) to Documentation

Visual Studio 2012 XML Schema Editor
Visual Studio 2012 XML Schema Editor

Today, a colleague at work was trying to modify a configuration file in XML format. He wasn't sure what were the available options for a certain attribute, so we started looking for an answer.
The XML configuration file came with a software product and had an XSD file. For me as a developer, I opened the XSD file in Visual Studio and used the XML Schema Editor (shown on the right) to browse its content.
However, for him installing Visual Studio wasn't the best option especially if he wanted to forward more information to a client and let them modify configurations themselves. So, we did a little more digging.
Xs3p is a schema documentation generator. It's simply an XSLT stylesheet, which generates HTML documentation from an XSD schema file.
You can download Xs3p here or direct link to version 1.1.5
 Extract the content of the downloaded ZIP file and place it a folder. We'll use the file xs3p.xsl
On Windows, you can use MSXML (Download) and the MSXSL command utility (Download).
To use MSXSL, place the downloaded EXE in the same folder as the extracted ZIP file. In the command line browse to that folder, then type a command like this:

Where: myXsd.xsd is the name of the XSD file. myXsdDocumentation.html is the name of the HTML file that will be generated by the tool.
I assume that all three files (XSD, XSL, and output HTML) along with MSXSL.exe are placed in the same folder.
Here's what the output looks like:
You can download this sample output:

To make things easier, I wrote a PowerShell script that find all the XSD files in the folder where it's placed and convert them all to HTML. It assumes that both MSXSL.exe and xs3p.xsl are in the same folder.
To use the script, from the command line run this command:

Here's the script:

This ZIP file include all three files: PowerShell script, MSXSL.exe and style sheet xs3p.xsl.


Thursday, August 8, 2013

Upgrade Windows Font for Better Arabic Readability

I was testing Windows 8.1 when I saw something that I liked very much; better Arabic font. I wasn't going to wait to upgrade all my machines to Windows 8.1 (if I ever do) to get that font. So, I went searching for the reason. I found that Microsoft upgraded the SegoeUI font. Spot the difference in Windows Explorer:

Font Comparison in Windows Explorer

.. and in Firefox tab headers:

Font Comparison in Firefox

To install this font, backup the old font first by going to the Fonts section in the Control Panel and copying all the Segoe fonts.

Download the new font.

Extract the ZIP file and install it. Just right click all the extracted files and choose Install.
You'll be asked to replace the old font, click Yes.


Saturday, May 4, 2013

Add RTL Support and Web Fonts to Tumblr Posts

ArabicTumblrThis is my technical blog. My personal blog where I write mostly in my native Arabic is hosted on Tumblr which is a nice platform but is really bad in supporting Arabic and other RTL languages. At least that’s my experience.

So finally I got sick of it and decided that I’m gonna fix this with some HTML and CSS magic. Maybe with some help. I did find that Tumblr has some nice features that helps fixing the problem. Let’s see how.

Tumblr lets you modify the HTML and insert additional CSS to your page. You gotta be careful when you’re doing this. At least make a backup of your page before you try new changes.

One nice feature is that you can add {TagsAsClasses} as a CSS class. This will allow Tumblr to read the tags you attach to your post and apply them as a CSS class. I’ll use this as a way of marking the Arabic posts that I’d like to display from Right-to-Left. For every one of these posts, I’ll add the tag “arabic” and then Tumblr will apply the CSS class to that post.

I’ve used a simple theme named Quite Big as my base theme. You’ll find a DIV with the classes “content” and “x-post”. x-post is not the name of a class but rather text-post, photo-post, quote-post, and link-post. One class for each type of post.

Types of Tumblr Posts

You’ll need to find each one of these DIVs and add “{TagsAsClasses}” to its CSS classes.

Wait, where can I get the HTML?

In the Settings section, click on the item at the bottom of the list on the left where you should see your avatar. Next to “Theme”, click “Customize”.
On the left, you’ll find “Edit HTML”.

After you save the modified HTML. While in the “Customize” mode, scroll down to the bottom in the pane on the left. You’ll find a “Add Custom CSS” section. This is where we’ll add a definition of how we want to display the Arabic posts.

{TagsAsClasses} allows us to add a tag to any post and apply it as a CSS class. The name of the CSS class must match the name of the tag. In my case, I chose “arabic”. Here’s the CSS I used.

This will apply the RTL direction, it will align the text to the right, and make the font size a little bit bigger.

How to Use Web Fonts?

Now that I went through the posts and added the “arabic” tag and everything is right to left. I need a good font to really make the blog look beautiful. Nothing pleases me when I’m writing Arabic like the Amiri font. Since it’s available on Google Web Fonts, this makes my task much easier.

First, I import Amiri.css. I go back to the HTML of my pages. Before the very end of the <style> element in the <head> (search for </style> and place the next line right before it):

Then I got back to the additional CSS, and slightly modify the CSS to look like this:

What about the Headers?

I notice the headers need a little bit of a change. They don’t have the right font. So, I go back to the HTML, and find the H3 element for the titles, and change it to look like this:

Then modify the CSS to look like this:

Now, the headers and the body are using Amiri and the header has the right size.

I’ve published the modified HTML file on a GitHub gist if you want to use the same theme. Here is the additional CSS.

Monday, April 29, 2013

How to Ruin Your Technical Session in 10 Easy Steps

This is Gold.

Recently, I’ve attended a developers’ conference and some of the sessions were a model for how to deliver a passionless boring lecture done so nicely that the only thing interrupting was the noise of my snoring. I wanted to sum up few of the great lessons I’ve learnt from these great sessions:

1. Start with the Obligatory Pointless Show of Hands:

Nothing engages the audience more than feeling small when asked “Have you heard of JavaScript?” except feeling inadequate when asked “Did anyone try scaling AngularJS with MongoDB using Chrome Canary on Linux Mint?”. But this feeling of engagement quickly builds up when you completely ignore the results of the quick poll and carry on with your session without the slightest modification. Show-of-hands shows that you are down with the latest tricks in the art of presenting.

2. Speak in Soft Emotionless Monotone:

Developers’ emotions have devolved over the years because of the constant contact with machines. Showing any emotion might be dangerous, and it’s completely unnecessary. Use a soft monotone that makes all the words sound alike.

3. Sit down and Hide behind your Laptop:

You’re a busy person who’s been working all day on your hippy standing desk. Feel comfortable sitting behind your monitor and let your soft voice guide your audience through the slides that need no character.

4. List Facts, not Experiences:

Your audience traveled hundreds, if not thousands, of miles to learn the facts that they could’ve read in a blog post. They just need it in the form of unsorted incoherent list that is difficult to remember and makes no sense. Make sure to deliver it fast enough so that they can break for launch. If you list 20 facts is better than if they can remember 10.

5. Avoid Story lines or Building up to Something Meaningful:

Stories means emotions. Stories have highs and lows. Stories are interesting. Stories are not facts. Stories are coherent. These are all things we’re trying to avoid.

6. Jokes are for Suckers:

It’s very important to put a distance between you and your audience, not just physical distance but emotional as well. You are a delivery vessel for facts, you’re not there to entertain or be memorable.

7. Slides are for Words, the More the Better:

Lifting whole paragraphs and sections from your PhD thesis is an excellent idea especially if it’s a screenshot not text, so later if the audience gets a hold of your slides they can’t copy the text. The goal here is to test the audience’s ability to focus on listening to you and reading the content of the slide at the same time, especially if they don’t match. Make sure to include couple of URLs that has at least two hyphens and one tilde. No URLs shorteners. Don’t forget to refer to the URLs as “important”.

8. The Crowd Loves Your Messy Desktop:

Make sure to minimize all your applications to show your desktop with a stretched picture of your kid riding a dog on a snowmobile which you took last August. Let them try to guess what is this picture by making it difficult to see behind all the icons you have on your desktop including “Yahoo Messenger” and the folder titled “My uncle’s second weddings photos”. Also, remember to leave your Skype on during the session because you don’t want to miss any important messages.

9. Technical Sessions are a Test of the Crowds’ Endurance:

So, the longer the session, the better. A continuous hour that goes on and on and on is good enough, but if you can sneak in few minutes at the end to finish the last 15 slides, that’s okay too.

10. Answering Questions is a Private Discussion:

When a person asks a question, try to answer it in the most private manner possible. Ignore that the person’s voice was too low that no one other than you heard it. Get geeky and make references to acronyms that no one understands. Just make sure that the person who asked the question barely understands the answer, and no one else even understood the question.

These are few tips on how to make your technical session the worst ever. I excel at only few of these, but working on some of the others. I wish you all the luck and look forward to your crappy presentation soon.

Image Credit: TheManBehindTheCart

Thursday, March 28, 2013

Real-Time GIS Using SignalR and Esri's JavaScript API

Everybody loves command centers. We all would love to be Capitan Kirk, setting there seeing information coming in from all over the place, and we can act on it without having to do much work.

The problem with building command centers is that they represent a big unnecessary load on the servers. Command centers now are not like the Star Trek command centers. No, they're hundreds of users connected to your service, each trying to command their own one decision which in aggregate with hundreds of other users form the output of the system.

These hundreds of computers calling the server every few seconds checking if there's an update or not represent a big unnecessary load on the server. What I prefer is to call the server when I know that there's an update, or better, have the server call me, the client, when there's an update.

That's where SignalR comes in.

SignalR is an open source library that let's you build front-end real-time applications using JavaScript (or .NET). On the back-end you'll use .NET.

SignalR was a side project started by two guys; David Fowler and Damian Edwards. The source code is hosted on GitHub. The project got so much support that Microsoft is now supporting it as part of its ASP.NET family even while maintaining it's status as an open source project developed in the open.

Listen to Damian Edwards interviewed by Scott Hanselman about SignalR.
Watch Damian Edwards and Scott Hanselman demo how to use SignalR.

SignalR makes it incredibly simple to add real-time functionality to your application.

It’s simple because it provides you with a way to just call a function on the client-side. Just RPC a function on the client-side.

It’s simple because it your code will work – without you having to change it – with a number of different technologies under the hood.

It starts with WebSockets, and falls back to other technologies if it’s not available.

There are two examples for SignalR you can check out right now: Jabbr which is a chat room service. And ShootR; a space craft shooter game built with HTML5.

SignalR is split into a .NET component on the server side, and a JavaScript component on the client side. Basically, you create a class that inherits from a Hub class and whatever public method you create is now callable from the client side.

The important thing is that you can define client side functions that are also callable from the server side.

We can use this to add real-time capability to an ArcGIS JavaScript API application. Using a sample from the documentation, I've added the real-time capability using a C# class and few modifications to the client side JavaScript.

Here's a video for how the final proof-of-concept looks like:

The code is all up on GitHub.

I was invited to speak at Esri DevSummit 2013 on March 28, 2013. Here are the slides for my talk. They provide few more details.

There's a few book on SignalR out now, you can get here.

If you have any questions, please add a comment below.