Showing posts with label Web UI. Show all posts
Showing posts with label Web UI. Show all posts

Sass CSS with Compass using Grunt Not Working on Windows

My team is using AngularJS, Node.js, Grunt, Sass CSS via Compass, Yoeman, and a few other web toolsets.  The other day when running the serve process to generate the css output from Sass CSS, the css wasn’t able to generate.  It turned out that Compass was setting the permissions on the .tmp folder where it puts the CSS to a state that didn’t all the process to write the file, hence a Permission Denied error.  To fix this issue I followed the StackOverflow thread http://stackoverflow.com/questions/22596760/yeoman-error-errnoeacces-on-line-897-of-c-permission-denied which did these steps.

Open a command prompt and run the following.

  1. gem uninstall sass (if you have multiple version, select all)
  2. gem uninstall compass
  3. gem install compass --pre
  4. gem install sass --pre

Setting Up PhoneGap/Cordova for Visual Studio

It’s always a struggle to find time to invest in side projects when you work and play an active role in your kids lives.  I appreciate when installing tools is just simple and you don’t have to google “why doesn’t …. do …” or “where is…” because the instructions aren’t straight forward or are missing steps/pieces.  I found this the case with the latest phonegap instructions as of 2014-3-9.

  1. Install Windows SDK.  I’m using Windows 7.1 because I have a Win7 machine, I found SDK here.  This installed Visual Studio 2010 Express for Windows Phone (VS2010).
  2. Download PhoneGap SDK and unzip in C:\Tools.  PhoneGap SDK is on github here.
  3. In the C:\Tools\phonegap-master (you might have to drill down a bit) there will be a lib folder, and in it there are folders for the different target frameworks one of which is “windows-phone”.  As of recent the Visual Studio template .zip is not there.  I had to run a batch filed called “createTemplates.bat” which created templates for WP8 and WP7.
  4. Once you have the Visual Studio .zip file template(s), copy those to your \Documents\Visual Studio 2010\Templates\ProjectTemplates\Visual C#.
  5. Open VS2010 and create a new project.  You will now see a project template as shown below.  The template name may change at some point.

image

 

The project structure will look like the following.

  • cordova – build tools
  • cordovalib – code for browser engine interaction
  • www – folder for html/js/css of your app
  • plugins – plugins for interfaces on your phone (i.e. camera, contacts)

image

Installing Node.js and Other Packages

Keeping up with technology can be a job in itself.  Learning is fun, but is quickly forgotten so writing things down can always save you time later.  This thread goes over various was of installing Node.js and other packages.

Installing Node.js

There are 2 ways in which you can install Node.js.  Node.js comes with node package manager now so it will not need to be installed independently.

Installer (recommended): Go to node.js.org and use the installer for your OS.  Run the installer.

Homebrew (Mac only): Run the command “brew install node”.  You will have to have homebrew installed.

 

Other Node packages t

Installation will use node package manager.  You can list the node modules for your node application by listing the directory of “node_modules”.

Express – web application framework for node

npm install -g express --save

NOTE: once you create a application with express (i.e. express AppName) you will have to navigate to AppName folder and run the command “npm install” to install the components defined in node’s package.json.

Yeoman – front end tool focused on scaffolding (yo), building/testing (grunt), and dependency management (bower)

npm install -g yo --save

npm install -g generator-webapp --save

coffee-script – scripting language that builds down to javascript.

npm install coffe-script --save

node-dev – a tool for node that will monitory files and auto restart the node app when a file has changed.

npm install node-dev –save

NOTE: When using this you will want to separate development dependencies from production ones.  In the package.json, you can create a “devDependencies” like so:

{
"name": "application-name",
...,
"dependencies": {
"express": "2.5.8",...
},
"devDependencies": {
"node-dev": "~0.2.2"
}
}

mocha – javascript test framework for node

npm install mocha –save

NOTE: put this in your dev dependencies

REQUIRES: request

request – modeule that simplifies the process of making http calls

npm install requets --save

Redis – open source advanced key-value store

npm install redis hiredis connect-redis --save

REQUIRES: Installation of Redis backend.  On a Mac use homebew “brew install redis”, Windows see redis.io.

connect-assets – transparent file compilation and dependency management for Node’s connect framework

npm install connect-assets --save

socket-io – simplifies the use of IO on all browsers.  See WebSockets for information on this topic.

npm install socket-io --save

AngularJS – front end web application framework dealing with models, views, collections, and events

npm install angular --save

Backbone – front end structured for web applications dealing with models, views, collections, and events

npm install backbone --save

RELATED: Marionettejs (npm install backbone.marionette --save)

Cropping Images In .NET The Easy Way

I’ve been working on a pet project of mine Site Travelers, and I needed a easy way to crop images that were uploaded to the server (ASP.NET).  Obviously I knew how to do this the manual way, but this is one of those all too common cases of functionality that many people require.  So, using my trusty search engine, I went shopping.  There are quite a few good examples out there on how to do it, including writing helper functions, but I wanted something already packaged.  I hit the jackpot when I came across a library from Code Carvings. They have a really slick image manipulation library called piczard.  Their documentation is fantastic and easy to read with plenty of examples to get you down the road.  Using this library reduced everything I needed to do, crop and get bytes of data, down to the following 2 lines!

FixedResizeConstraint constraint = new FixedResizeConstraint(180, 120);
byte[] bytes = constraint.SaveProcessedImageToByteArray(
    file.InputStream, 
    new JpegFormatEncoderParams(60));

Inkscape, A Cool Vector Graphics Tool!

I won’t be the first to admit that I stink when it comes to my graphic design skills, but I do know how to solve problems when presented with one.  I had a major problem that was racking my nerves, icons for a web site and phone app I was developing.  Knowing the result I wanted, I soon employed the help of Google.  Low and behold I can across Inkscape, an awesome scalable vector graphics program and it was free!  Armed with this new tool I still had one issue, how the heck am I going to use this thing (that would be my lack of design knowledge bubbling up).  No worries, I wasn’t out yet.  After searching a little bit for some of the results I was looking for, I came across this blog, screencasters.heathenx.org (my hats off to you).  In no time, i was able to accomplish buttons, special affects, paper folds, etc.

Install on Windows

1.  Install GIMP.

2.  Download Inkscape and install for windows.

Printing HTML Landscape Using Print CSS File

I think one of the hidden gems of web applications is that you can mold your page for printing using a specific CSS file or printing.  I wrote post a while back Printable Web Page which covered using the CSS media attribute for your <link> reference.  The other day I was working on some reports that had some table cut off issues.  I discovered there are a couple approaches that you can take, including using fixed width (though you’d need to know your printer widths) or using landscape and percents for tables.  I chose to do the later. 

If you add the following to your CSS file used from printing, it will default the users printing to Landscape and remove the margins.  I set by tables to use a width of 100% or less to fit on the screen.

@page {
size:landscape;
margin:0;
}

ASP.NET CollapsiblePanelExtender Printing Content

The other day I was working with the ASP.NET Ajax toolkit’s CollapsiblePanelExtender and have the toughest time getting the content within the panel to print.  I found that there were 2 issues going on: 1)  you have to expand you panel before you print, and 2)  there is some CSS magic that you need to do to get all the content to show.  For the first issue, you have to expand all the panels before you print, which you can do using some JavaScript, unfortunately you can’t fire this when the user select File^Print.  The second issue I resolved using the CSS print media type, which I have an example of the principle here Printable Web Page. 

Expanding Collapsible Panels

This can be achieved by a little JavaScript.  In my situation the user’s wanted a toggle in the UI, I used a check box but a button can do the same thing.

1.  Create the UI toggle item that will fire JavaScript onclick event.

<input type=”checkbox” onclick=”toggleCollapsibleSections();” />

2.  Create the JavaScript that will expand/collapse the panels.  Note I’m using jQuery here to find the elements and that the ID of the collapsible panel is the client ID for the CollapsiblePanelExtender.  If you’re using .NET 4.0 you can set the extender’s ClientIDMode to Static otherwise you will have to either use CSS class to find extenders you want or spit our the X.ClientID where X is the extender control.

function toggleCollapsibleSections() {
    var isChecked = $("#toggleCheckbox").attr("checked");
    if (isChecked) 
        expandSections(true);
    else 
        expandSections(false);
}

function expandSections(doExpand) {
    if (doExpand) {
        $find("MyCollapsiblePanelExtenderClientID")._doOpen();
        // + all other section i want to open
    }
    else {
        $find("MyCollapsiblePanelExtenderClientID")._doClose();
        // + all other section i want to close
    }
}

Printing Collapsible Panel Content

This was a tough fix.  In a nut shell the CollapsiblePanelExtender applies a inline style “overflow” to the div that wraps you content.  This causes the printing to cut off the content within you section if the content is high enough.  The way to solve this is to define a overflow style for all div’s in you print media CSS file.  See Printable Web Page on details about defining and using print media CSS.  The CSS is listed below.  Notice the usage of the “!important” this will override any inline styles that the ajax toolkit has applied.

div { overflow: visible !important; }

Printable Web Page

Ever wonder how to make your unnecessary page elements disappear only to leave a perfectly printable web page?  Using the stylesheet link’s media attribute can do the trick.  Below describes how to utilize this media stylesheet to hide specific elements within your page.  One of the keys to remember is that when your presenting mostly readable text, you want to stick to black and white with possibly red or blue links to let the user know certain text represented hyperlinks.

1.  First thing to do is to define a css file to hold or media printing specific css.  Let’s call it pring.css.

2.  Add the following reference to the head section of your html document.

<link href="/Styles/Print.css" type="text/css" media="print" rel="stylesheet" />

3.  Define the core css classed that drive most of you page.  Below shows the core css classes we will use.  The class “nonprintable” will be applied to any element that should not be shown on the printed page.  Sometimes you will need to force certain css styles so you can use a “printable” class for this purpose.  Applying black and white to the body of the html document is the cleanest way to obtain a slick page.  Notice that “a” links get a red color and a transparent background; this helps the user realize the text was a hyperlink and prevent any a link’s background images from showing up.

/* GENERAL */
.nonprintable
{
display:none;
}

/* apply to specific items that must be forced */
.printable
{
background:white !important;
color:Black !important;
}

body
{
background:white;
color:Black;
}

/* A links */
a:link, a:visited
{
color:Red;
background: transparent;
font-weight: bold;
text-decoration: underline;
}

/* END GENERAL */
 
4.  Add any non-generic css classes.  For example, if you were using the ASP.NET ajax tab controls you’d want to define the following classes to hide tabs.
 
/* 
asp.net ajax tab control
*/
.ajax__tab_header, .ajax__tab_outer, .ajax__tab_inner
{
display:none;
visibility:hidden;
}
.ajax__tab_body
{
border-color:White;
visibility:hidden;
}

5.  Now apply css to elements within your document.  Menu’s, images, ads, and other content that you don’t want to print should get the “nonprintable” class.  This class will be assigned to the element but will not take affect until the user goes to print the page.  Try it by applying some css and doing a print preview.  This is a clever way of verify that the page looks correct without actually printing.

ASP.NET MVC Razor View Engine and Resources

The Razor view engine shipped with ASP.NET MVC 3 is very clean and has some nice coding enhancements, see a introduction on Scott Gu’s blog.  As I was converting a application over to use the new view engine, I was stumped to find that the global/local resource method was not directly accessible as it was with the default view engine.  In order to access a resource you would have to type the following expression ViewContext.HttpContext.GetGlobalResourceObject(classKey, resourceKey) which is quite length.  To mitigate this, I create some common extensions to clean up the code.  Below shows a clean way of doing this.

public static class CommonHtmlExtensions
{
public static object GetGlobalResource(this HtmlHelper htmlHelper, string classKey, string resourceKey)
{
return htmlHelper.ViewContext.HttpContext.GetGlobalResourceObject(classKey, resourceKey);
}

public static object GetGlobalResource(this HtmlHelper htmlHelper, string classKey, string resourceKey, CultureInfo culture)
{
return htmlHelper.ViewContext.HttpContext.GetGlobalResourceObject(classKey, resourceKey, culture);
}

public static object GetLocalResource(this HtmlHelper htmlHelper, string classKey, string resourceKey)
{
return htmlHelper.ViewContext.HttpContext.GetLocalResourceObject(classKey, resourceKey);
}

public static object GetLocalResource(this HtmlHelper htmlHelper, string classKey, string resourceKey, CultureInfo culture)
{
return htmlHelper.ViewContext.HttpContext.GetLocalResourceObject(classKey, resourceKey, culture);
}

}
 
In the view you will have consolidate resource calls.  Hopefully they will add something like this in the future of ASP.NET MVC.
 
@Html.GetGlobalResource("CommonText", "Some_ResourceKey")

Find jQuery Autocomplete Input ID

The other day I was working with jQuery autocomplete where the autocomplete was being applied to a collection of input elements.  One of the issues I was running into was that I needed a reference to the input that the automplete was extending during the execution of the select event.  The way to do this is to store a reference to the input inside the function executing the select event, in essence create a closer.  Below shows how this done, the call to $(this) resolves to the input that is being autocompleted.

$(".all-my-autos")
.autocomplete({
source: "auto-me.php",
minLength: 2,
delay: 500,
select: function (event, ui) {
var input = $(this); // reference to input
// do what you need with input...
alert(input.attr('id'));
}
});

reCAPTCHA Custom Styling

CAPTCHA is one of those neat little items that help prevent automated attacks on sites that have form submissions such as registration or blog posts.  I was searching for a way to use CAPTCHA in a ASP.NET MVC site, but what I found can be applied to any coding tool like PHP, Java, Ruby, etc.  I followed this excellent blog Using ReCaptcha with Asp.Net MVC for most of the backend code.  Once I got it working I realized that the default generated CAPTCHA widget didn’t go well with the site’s color palette.  Fortunately you can change the widget’s appearance.

Solution:

1.  Place this snippet before the form element that contains the CAPTCHA widget.  Note that I went with the “clean” theme.  Other themes are possible, see full reference here.

<script type="text/javascript">
var RecaptchaOptions = {
theme : 'clean'
};
</script>

2.  Somewhere in your form element place the following HTML and script reference, this is a barebones approach.  In the script reference don’t forget to replace “your_public_key” with the public key you got from signing up for API key.

<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=your_public_key"></script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=your_public_key"
height="300" width="500" frameborder="0"></iframe><br>
<textarea name="recaptcha_challenge_field" rows="3" cols="40">
</textarea>
<input type="hidden" name="recaptcha_response_field"
value="manual_challenge">
</noscript>

3.  If you want to internationalize your CAPTHCA widget, you can include the additional div elements shown here and add the following to the RecaptchaOptions shown in step 1.  You’ll have to insert the translated text of your choice dynamically.
 
<script type="text/javascript">
var RecaptchaOptions = {
custom_translations : {
instructions_visual : "Scrivi le due parole:",
instructions_audio : "Trascrivi ci\u00f2 che senti:",
play_again : "Riascolta la traccia audio",
cant_hear_this : "Scarica la traccia in formato MP3",
visual_challenge : "Modalit\u00e0 visiva",
audio_challenge : "Modalit\u00e0 auditiva",
refresh_btn : "Chiedi due nuove parole",
help_btn : "Aiuto",
incorrect_try_again : "Scorretto. Riprova.",
},
theme : 'clean',
};
</script>

That’s it.  My widget looked something like the image below.  I left out the some of the customization div elements and went with they’re “clean” look.

Capture

Autocomplete jQuery and JSON Is Now Here

Autocompletion text boxes are one of those nifty little tools that when used in the right setting really add a great user experience.  Just recently I was trying to figure out how to return JSON from a autocomplete call and use jQuery.  Older versions of jQuery only support line break text return values limiting you on what you could return.  So hoping to find something better, I Googled it and low and behold, jQuery UI now incorporates the autocomplete feature using JSON results by default!   As of v1.7, I believe, this is supported.  There is a good blog by Jörn Zaefferer, talking about the work involved in migrating from the old jQuery autocomplete plug-in to the new method.

You can get either download jQuery UI versions or use Google CDN.

Implicit Operator in C#

It’s fun learning something new that gives you the feeling of “wow, that’s pretty cool”.  The other day I was searching for some code to use Google Translator API.  I found some .NET project someone had written, but it didn’t work at all and the documentation, ironically, had malformed sentences making it hard to understand.  The one think I did see was a line like this “Language lang = “en-GB”.  At first glance, I thought, that’s odd how do the do that?  Then I looked at the meta data about the assembly class and noticed that class was using something called the implicit operator.  It’s a user-defined type.  There’s a really nice article on it’s usage on Code Project, Understanding Implicit Operator Overloading in C#.  Using this cool user-defined type, I wrote my own version of the Google translator API for .NET which can be found on SorceForge, DotNetGoogleTranslator.

Web Site Menus, What To Use?

I have to say that I appreciate all the many people out there that aid all of us non Web UI layout experts with tips, tricks, and how-to posts.  One of the items I have difficulty with when laying out a menu structure for a site that has more than just a main menu, is what type of menu should I use.  Some of the options maybe vertical or horizontal menu,  tree with +/- nodes or drop down menu, etc.  I had this project where, for some reason, they just wanted a list of hyperlinks on the page for the sub menu, but they had to shorten all the names to ~5-10 characters because there were so many, it was hideous.  My friend Aaron Schnieder recommended using a mega menu.  First thing that came out of my mouth was “what the heck is a MEGA menu?”.  It sounds like some combo move in the 90s video game Killer Instinct.  He gave me this link to demo on the mega menu.  I was amazed, it’s so clean and flexible.  Now, the question is should I always use the MEGA MENU?  I think it depends.  In the case of MSDN library which has that side navigator with a gazillion possibilities the mega menu wouldn’t fit, but if you have a decent sub menu that you want your users to see when hovering over the main menu, the mega menu fits like a glove.  The tutorial on Soh Tanaka’s blog is amazing, basically there’s 4 steps:

  1. Html layout  for main menu and sub menu - ul/li structures
  2. Sprinkle of CSS
  3. Dash of jQuery – uses Hover Intent jQuery (very slick), but can optionally be excluded
  4. Very minimal on page load initialization.