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.
Wednesday, July 24, 2013
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.
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
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
***************************
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:
What Doesn't work:
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.
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.
Friday, July 6, 2012
C# JSON serialize and deserialize?
For those who are new to JSON (JavaScript Object Notation), you may have seen all sorts of articles suggesting different serializers...
Sometimes you are working with a data table... sometimes with a serializable object.
But why? Do you need a separate serializer? What for?
You could use the Built-In .Net one for ASP.net (3.5 and above), or you can roll your own, or you can use one built by someone else like JSON.net You need to consider what is best for your personal scenario.
http://stackoverflow.com/questions/1207731/how-can-i-deserialize-json-to-a-simple-dictionarystring-string-in-asp-net
JSON can be used to take an object, or array of objects with serializable properties and put them into JavaScript dictionary objects or array of JavaScript dictionary objects.
Serialized Data - from a string... This can be stored in a file, a table column etc. It then can be pulled and assessed as serialized data. When serializing an object, this is the result you may get. Take notice of the nesting:
Or when passing data between systems... or from web service to a JavaScript query of the web service, you get something like:
Now if you want to access/use this using JavaScript:
You can either use JavaScript to pull the data from a XML Web Service - OR
you can Response.Write the serialized data to the page.
You normally don't need to build a JSON "serialized" string of an object yourself. You can use JavaScriptSerializer or one built by another vendor... to do this.
Also, JavaScript loves to use the serialized data - and can bind them into serialized objects. This can be a single object, or a list of objects. You can dynamically write the JSON data into the page... and assign to a root variable.... Or you can pull JSON data from a web service. You don't even need to Deserialize the data for this! You just need to uncomment the section at the top that says: [System.Web.Script.Services.ScriptService] and the web service will send you a serialized object - in JSON format when requested using JavaScript.
example: http://williamsportwebdeveloper.com/cgi/wp/?p=494
------------------------
Sometimes you are working with a data table... sometimes with a serializable object.
But why? Do you need a separate serializer? What for?
You could use the Built-In .Net one for ASP.net (3.5 and above), or you can roll your own, or you can use one built by someone else like JSON.net You need to consider what is best for your personal scenario.
http://stackoverflow.com/questions/1207731/how-can-i-deserialize-json-to-a-simple-dictionarystring-string-in-asp-net
JSON can be used to take an object, or array of objects with serializable properties and put them into JavaScript dictionary objects or array of JavaScript dictionary objects.
Serialized Data - from a string... This can be stored in a file, a table column etc. It then can be pulled and assessed as serialized data. When serializing an object, this is the result you may get. Take notice of the nesting:
Or when passing data between systems... or from web service to a JavaScript query of the web service, you get something like:
1 | { |
2 | "some_number": 108.541, |
3 | "date_time": "2011-04-13T15:34:09Z", |
4 | "serial_number": "SN1234" |
5 | "more_data": { |
6 | "field1": 1.0 |
7 | "field2": "hello" |
8 | } |
9 | } |
[ reference above stackoverflow.com link for more details]
Now if you want to access/use this data... using C# code behind
1 | using System.Web.Script.Serialization; |
2 |
3 | var jss = new JavaScriptSerializer(); |
4 | var dict = jss.Deserialize |
5 |
6 | Console.WriteLine(dict["some_number"]); //outputs 108.541 |
7 | Console.WriteLine(dict["more_data"]["field2"]); //outputs hello |
[ reference above stackoverflow.com link for more details]
Now if you want to access/use this using JavaScript:
You can either use JavaScript to pull the data from a XML Web Service - OR
you can Response.Write the serialized data to the page.
You normally don't need to build a JSON "serialized" string of an object yourself. You can use JavaScriptSerializer or one built by another vendor... to do this.
Also, JavaScript loves to use the serialized data - and can bind them into serialized objects. This can be a single object, or a list of objects. You can dynamically write the JSON data into the page... and assign to a root variable.... Or you can pull JSON data from a web service. You don't even need to Deserialize the data for this! You just need to uncomment the section at the top that says: [System.Web.Script.Services.ScriptService] and the web service will send you a serialized object - in JSON format when requested using JavaScript.
example: http://williamsportwebdeveloper.com/cgi/wp/?p=494
------------------------
If this works, then why ever use a commercial product like JSON.Net?
Reason: some commercial products are better at serializing some types of data, handling nulls, and may be faster. http://json.codeplex.com/ But Asp.Net 4.0 can handle many peoples needs natively.
Reason: some commercial products are better at serializing some types of data, handling nulls, and may be faster. http://json.codeplex.com/ But Asp.Net 4.0 can handle many peoples needs natively.
Subscribe to:
Posts (Atom)