Wednesday, July 24, 2013

Twitter Bootstrap - IE8 Issues & Fixes - Slow Performance?

I am almost finished with my first Bootstrap layout.

Overall, it was very intuitive - and my first use of media queries with CSS.

Unfortunately, I had to deal with some buggy issues with IE8 - but there are tricks to get around these.... will post soon.

ISSUE 1: Slow performance with IE8 - 10 second load times

FIX:  put script tags at the very end - like in bootstrap examples.  It made a HUGE impact on speed.


ISSUE 2: Menu doesnt have mouse-over option by default.

FIX: there is a plugin available to add this feature:  http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/


NOTE: .... Just as I finished one Bootstrap client, and started another, Twitter bootstrap came out with a new release V3 which is VERY different - but based on the same concepts.  Oh well.   V2 works fine for first client.  Will be using V3 for second.


Monday, July 15, 2013

Need responsive website templates?

The latest trend now in web design is responsive web design.  In this paradigm, we have one website that easily scales from wide screens to mobile screen devices.

TIP: Don't do it from scratch.

In my search for some good templates for responsive websites, I found bootstrap - a collection of tools (js and css) and a design framework already built by the geeks at Twitter.  All you need to do is download it, learn it... and apply it.  It is free and you can download it here.

I am currently working on my first website applying it.... There is a little learning curve... but much less than doing everything from scratch.

Monday, June 17, 2013

Html5 Validation Tips - Patterns Phone, Email... etc

Here are some of my favorite HTML5 validation scripts...  They are simple quick references.  Feel free to use or expand on them.

Of course, using a blog, I will be using to wrap the html tags with a "[" instead of the LessThan and GreaterThan signs... so it shows up properly...  But you can figure it out from there...

We use the "pattern" to do validation RegEx validation.

The "title" is quite handy... it is used in any validation... showing that name in the error message.

PHONE:
[input  type="tel" name="phone" id="phone" maxlength="25"  required="required" title="Phone" pattern=".{5,15}" /]

EMAIL:
[input  type="email" name="email" maxlength="50" required="required" title="Email" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" /]

DATE:
[input  type="date" name="court_date" title="Court Date" min="2013-06-01" max="2099-12-30"  step="1" required="required" /]
Note: you don't need a pattern on the date one.  Normally input is in local format... like dd mm yyyy   However, it tends to send using yyyy-mm-dd.   Just pick it up and parse as a date object with the server and you will be fine.

DATA LISTS - Auto Suggest
 [input  type="text" name="ticketfor" maxlength="50"  required="required" list="commonviolations" title="Violation" /]
                [datalist id="commonviolations"]                
                    [option value="speeding" /]
                    [option value="running a red light" /]
                    [option value="not signaling" /]
                   [option value="crossing the median" /]
                    [option value="driving in car pool lane" /]
                [/datalist>


AUDIO / VIDEO
Good samples here:  http://www.w3schools.com/html/html5_audio.asp

Do we still need other javascript validation? Server side validation?

My answer is yes to both.  This is just one more layer of validation.  Standard JavaScript form validation is a good tool to ensure correct input - especially for older browsers which don't handle the html5 very well.  Server side validation is a good security idea - for users who turn off JavaScript and bad robots who often don't use it.

One tip... the Date is only implemented in a few browsers.  I love the one that shows up in my Android phone.  However, this is taking longer to get accepted. The standard JavaScript will help bridge this.  Normally, if you do the standard javascript on submit... it will occur after any recognized HTML5 validation has passed.

Other Misc:

Telephone Link:  [a href="tel:+18055551212"](805) 555-1212[/a]
This is useful for mobile phones...


Good HTML5 Resources

http://www.w3schools.com/html/html5_form_input_types.asp

http://www.techrepublic.com/blog/10things/10-new-html5-tags-you-need-to-know-about/3219


Godaddy - Medium Trust - MySql - Devart - System.Security.SecurityException

I have recently started encouraging my clients to use Godaddy.com - for cost reasons... and had finished with the little tweaks needed to do so.

However, a couple months after the site was up we got a real friendly email from them:

****************************
Dear [member name],

We've got great news for you! Today, we finished migrating your hosting account, [mydomainname.com], to a new server; you should start noticing improvements within 24 hours. Your visitors – they're really going to appreciate it!

The transition should've been seamless for you, unless your account hosts secondary domains or subdomains. If it does, you'll need to update their primary IP addresses (A records) with whoever controls the domain's DNS (typically the company you used to register your domain) to: ....

***************************

Unfortunately whatever changes occurred to "improve" things made my site go down.  After a bit of research into the "Security" errors I was getting from my code, I found out that they had moved us from a "full trust" environment to a "medium trust" environment.



***************************

System.Security.SecurityException: That assembly does not allow partially trusted callers.

or

Security Exception

Description: The application attempted to perform an operation not allowed by the security policy.  To grant this application the required permission please contact your system administrator or change the application's trust level in the configuration file. 

***************************


What this means:

http://support.godaddy.com/help/article/1039/what-is-medium-trust-level-and-how-does-it-affect-my-hosting-account

http://stackoverflow.com/questions/2617454/what-is-medium-trust-in-asp-net

We cannot use reflection at all....

protected dbMyDataContext db = new dbMyDataContext();

However, I could not use MySql-Linq at all anymore in my applications.  I have read different solutions on how to fix this - all involving making changes to the config file for medium trust to allow certain things....  It had something to do with named pipes... or perhaps it used reflection... whatever it was - it was not permitted.

Most larger shared hosting providers (like Godaddy) do not allow customization of medium trust settings.


What works:

  • Connecting to MySql using MySql.Data.dll
  • Object Data Source to connect with data on the page using custom C# objects
  • Dlls that are written in .Net (like C#) and dont use reflection.... and dont reference anything that the medium trust restrictions prohibit
  • I (suspect) that Linq queries of xml files will work... Medium trust normally allows access to files in the website.
  • Telerik RadControls for ASP.NET AJAX work great!  I use them all over the place.  Just use code-behind to bind the grids instead of SqlDataSource.  And some pages (those with Telerik RadGrids) will need to inherit from Telerik.Web.UI.RadAjaxPage for medium trust.  


What Doesn't work:

  • Paypal Express (went back to Paypal Standard)
  • Devart Linq  (I just reverted back to standard MySql data provider - and removed all Linq)
  • SqlDataSource in asp pages... (You can build them in code behind though...)  This apparently uses reflection to bind to the data.  Grids, dropdowns and formviews need to be bound in code-behind... or using Object Data Source tags.
  • Many COTS dlls you may buy... Make sure you ask whether it will work in a medium trust environment out of the box without configuring the mediumtrust_web.config
I have heard that SqlDataSource will work in medium trust - IFF you use Sql Server, not MySql.  So far, I haven't tested this.

What it came down to is a serious re-factoring of my whole CMS to comply with Godaddy preferences..   I had to change all my Linq queries, and a lot of my Grid and FormView bindings to use code behind.

With binding of grids... had to do that in code behind... and using events triggered to methods in code behind.

I hope this helps some of you with similar issues.  If you need someone to help, contact me.