Checklist to see if your website sucks

Just a couple of links with pretty useful information to check when you build a website:
http://www.webpagesthatsuck.com/does-my-web-site-suck/does-my-web-site-suck-checklist-part-one.html http://www.webpagesthatsuck.com/biggest-mistakes-in-web-design-1995-2015.html

1995-2015 :)

C# Save image from HTML page in WebBrowser control

So you have a C# windows application, a WebBrowser control inside it, and once you navigated to a webpage, you want to save the images inside the loaded HTML webpage.

The best solution I found here: http://stackoverflow.com/questions/2566898/save-images-in-webbrowser-control-without-redownloading-them-from-the-internet/8397454#8397454

The main ideas are:

- Add a reference in your project to Microsoft.mshtml (Project -> Add reference -> GAC -> Microsoft.mshtml).

- Add a 'using' statement at the top of your .cs program:

using mshtml;

- Use the following code to save all images in the HTML document

  IHTMLDocument2 doc = (IHTMLDocument2)WebBrowser1.Document.DomDocument; // gets the dom document of our object WebBrowser1
  IHTMLControlRange imgRange = (IHTMLControlRange) ((HTMLBody) doc.body).createControlRange(); // setting up the controls so we can copy/paste the HTML image objects

  foreach (IHTMLImgElement img in doc.images) // walk through all the images inside the dom document
  {
    imgRange.add((IHTMLControlElement) img); // set up which image (the current one) we are controlling
    imgRange.execCommand("Copy", false, null); // copy the current controlled image
    using (Bitmap bmp = (Bitmap) Clipboard.GetDataObject().GetData(DataFormats.Bitmap)) // create a bitmap object
    {
      bmp.Save(@"C:\downloadedimages\"+img.nameProp); // save the bitmap object to this path on our harddrive
    }
  }
 
Please note the WebBrowser1 name - you must change this to your WebBrowser control name.
Also note the path to where the image is saved - some security measures should be taken here against unwanted file names, executables, etc. as well as making sure the path points to the correct location on your hard drive.

This saves the time and network traffic of re-downloading the image again. There is an alternative to get/reconstruct the absolute image source URL, reading again and then writing the contents in a local file. This didn't work for me as i didn't want to download the image again. There are some server setting which also check for an existing session or cookie, or referrer, by which a direct access to the image is prevented, so the alternative may not work.

The current method is fastest, and it's most intuitive, just as you would do it yourself - right click and save the image from any webpage. Of course, if the 'right-click' is not disabled through Javascript or other method, which in our case is bypassed :)

MySql .NET connector example

How to connect to a MySQL database using the mysql .NET connector in C#.

Download and install the MySql.Net connector.

Add a reference to it in your project, that is - click on "Project'->'Add reference', on your '.net assembly browser' tab and choose the library, make sure you're adding the 'Assembly' (the type is shown in the window just after you select the file).

And here is sample code from a working program:

using MySql.Data.MySqlClient;

namespace my_namespace_whatever
{
    public partial class MainForm : Form
    { 
        private MySqlConnection MyConn;
        private MySqlCommand MyCom;
        private MySqlDataAdapter MyDR;
        private string ConnStr;

        public MainForm()
        {
            InitializeComponent();
            // now the interesting part
            ConnStr = "SERVER=localhost;DATABASE=my_database;UID=my_user;PWD=my_password;";
            MyConn = new MySqlConnection(ConnStr);
            if (MyConn.State == ConnectionState.Closed)
            {
               MyConn.Open();
            }
            if (MyConn.State != ConnectionState.Open)
            {
                MessageBox.Show("Could not connect");
            }

            // A.S.O

  }
}

system.data.odbc.odbcexception: error [im002] [microsoft][odbc driver manager] data source name not found and no default driver specified

Trying to use MySQL ODBC driver with a C# program to make a connection to the MySQL database.

Downloaded the latest MySQL ODBC 5.1 Driver from mysql's website, yes, the right version (32-bit for my Windows, check your version - you might need the 64-bit one)

Installed driver.

Created DSN in User DSN (control panel->administrative tools->data sources, and NO, it is NOT needed to create the ODBC Data Source in your System DSN or other, just in User DSN).

Yes, entered correct server name, username, password.

Now going to my C# program, at Connection.Open() - i get the following error: system.data.odbc.odbcexception: error [im002] [microsoft][odbc driver manager] data source name not found and no default driver specified

WHAT in God's name is the problem????

I must say that i've installed and used the mysql odbc connector in the past too, and the connection went smoothly then..

Yes, the problem is the connection string. This is what i had:


ConnStr = "DRIVER={MYSQL ODBC 3.51 Driver};SERVER=localhost;DATABASE=my_database;UID=my_username;PWD=my_password;OPTION=1";


Banged head, ripped clothes off, cut veins, and then success: copy and paste the EXACT ODBC driver name, and now i have this:


ConnStr = "DRIVER={MYSQL ODBC 5.1 Driver};SERVER=localhost;DATABASE=my_database;UID=my_username;PWD=my_password;OPTION=1";


Please notice the string at 'driver=', it must be the same as the ODBC Driver Name, in my case: MYSQL ODBC 5.1 Driver

You find the driver name under Control Panel -> Administrative Tools -> Data Sources (ODBC) , in the 'driver' column (obvious, eh?), next to my own MySQL ODBC Data Source.

Pheewww, that was a bugger.

PS: Oh, and NO, you don't need to add any references to the mysql library either in your project. This is the ODBC method, and you are not using any mysql objects/references here. You must include though your System.Data. If you want to go the mysql .net connection method, search for another post.

Responsive design

WTF is 'responsive design'?
In my search for an answer i've bumped across this page, which pretty much says it all:
http://designmodo.com/responsive-design-examples/

Javascript URL regex

Here's how i check and replace URL patterns in Javascript, with this neat URL regexp pattern:


var URL3_pat = /http:\/\/([\w\d\.\-]+)\.([a-z]{2,8})(($)|([\/\?\#]+$)|(([\/\?\#]+[\w\d\:\@\%\/\;\~\_\?\\\+\-\=\\\\\.\&\,]+)))/m;

r = t.replace(URL3_pat, '<a href="$&" target="out">$&</a>');


Huh? what do you think about this regular expression?

TinyMCE add content - add HTML

Here's the plain simple method to insert some HTML into your tinyMCE *textarea*



html = '<br><br><a href="gourl"><img src="someimageurl" border=0 alt=""></a>';
document.getElementById('#elm1').tinymce().execCommand('mceInsertContent',false,html);


Where id_blog_body is your textarea's ID attribute.


<textarea id="elm1" class="tinymce"></textarea>


Save your form before you go (onbeforeunload)

So, the onbeforeunload action.

This doesn't seem to have too many options. It acts differently in the different browsers, and no, in Firefox 4 or later you cannot change in any way the browser's security confirmation box ("Note that in Firefox 4 and later the returned string is not displayed to the user." - https://developer.mozilla.org/en/DOM/window.onbeforeunload ). In Firefox, the confirmation box invariably says: "this page is asking you to confirm that you want to leave data you have entered may not be saved".

So, once the onbeforeunload action is set, one can just show the browser's default confirmation dialog box or add another (underline - another) confirmation or other kind of dialog box. One can't remove or skip the browser's default confirmation box.

Here's my code:


global_form_changed = true;

window.onbeforeunload = function (e) {
e = e || window.event;

ret = global_form_changed?"You have not saved your contents. Are you sure you want to leave?":null;

// For IE and Firefox prior to version 4
if (e) {
e.returnValue = ret;
}

// For Safari
return ret;
};



I'm using the global global_form_changed variable so that i can either ask the user to save the content or not ask anything, depending on whether the user has actually made any changes to the form or not.
I'm modifying my global_form_changed like this:
On every input within the form, i'm setting the onchange attribute with this:
'onchange="global_frm_edit_changed = true"'

Of course there are various other ways to see if the form has actually changed or not.

Website with subdomains (addition about cookies and sessions)

Oh, and yes,
If you want the session or the cookies to be working over all of the domains, you'd have to specify this for the cookies or for the session.

This is how to do it in PHP. It works for named domain names, as well as for IP's and also for localhost or LAN server names, but not for composed TLD's (e.g. works for example.com, but not for example.co.uk):


if ( strpos($_SERVER["SERVER_NAME"], ".")!==false && preg_match("/([^0-9\.])/i", $_SERVER["SERVER_NAME"]) ) // check if there are any dots inside the server name and also letters (excludes IP's and LAN server names)
{
$p = preg_split("/\./i", $_SERVER["SERVER_NAME"], -1, PREG_SPLIT_NO_EMPTY); // split the domain name by dots (www, example, com)
while ( count($p)>2 ) array_shift($p); // push out all elements except the last two (example and com)
$COOKIE_PARAMS["dom"] = ".".join(".", $p); // this is what we need ".example.com"
}
else $COOKIE_PARAMS["dom"] = $_SERVER['SERVER_NAME']; // the full name of the server for IP's and local server names
$COOKIE_PARAMS["path"] = "/"; // the path under which the cookie is available - we'll use this also for the session

session_set_cookie_params (0, $COOKIE_PARAMS["path"], $COOKIE_PARAMS["dom"]);
// lifetime =0 (until browser is closed),
// path=$COOKIE_PARAMS["path"] (path under which the session is available),
// and the important part: domain=$COOKIE_PARAMS["dom"] (".example.com" so it works for all possible subdomains)

setcookie("mycookie", "myvalue", time()+30*60, $COOKIE_PARAMS["path"], $COOKIE_PARAMS["dom"], false); // set a cookie "mycookie" with the value "myvalue", lifetime 30 minutes, available under the path $COOKIE_PARAMS["path"]



This is it!

Questions? Comments?

Website with subdomains

Given a website - it is requested that the users are given the possibility to create subdomains of their own choice.
The domain name is configured as a vhost on a http Apache Server. The * must be configured in the server alias directive, so all subdomains are mapped to the same website (see the following lines).

<VirtualHost *:80>
DocumentRoot "/[...]/example_path/"
ServerName "www.example.com"
ServerAlias "www.example.com" "example.com" "*.example.com"

<Directory "/[...]/example_path">
Options FollowSymLinks
AllowOverride All
Order allow,deny
Allow from all
</Directory>

</VirtualHost>


Restrictions:
- the subdomain names should be at least 6 and at most 63 characters in length.
- chosen to restrict the subdomain names to only alphanumeric characters (regular expression: [a-z0-9])
- the subdomain name must begin with a letter (regex: [a-z][a-z0-9]{5,63})


Solution:
- create a table which holds the user ids (users are logged in and have a 'uid' integer unique index stored in the database) and the subdomain names. We set a unique constraint on the subdomain column. This excludes the possibility that two users choose the same domain name

CREATE TABLE `subdomains` (
`uid` int(11) unsigned DEFAULT NULL,
`subdomain` varchar(128) DEFAULT NULL,
PRIMARY KEY (`uid`, `subdomain`),
UNIQUE KEY `subdomain` (`subdomain`)
);

- create a web form in which the user is allowed to choose a subdomain name.

<form action="choose_subdomain.php" method="POST">
Choose a subdomain: <input type="text" name="subdomain" maxlength="63" value="">
<input type="submit">
</form>

- in choose_subdomain.php - we check the form data and if no errors, save the new domain name:

if ( count($_POST) )
{
$_POST["subdomain"] = trim($_POST["subdomain"]);
if ( empty($_POST["subdomain"]) )
{
die("you have to choose a subdomain");
}
elseif ( !preg_match("/([a-z])([a-z0-9\-\_]+)/i", $_POST["subdomain"]) || strlen($_POST["subdomain"])<6 || strlen($_POST["subdomain"])>63 )
{
die("the subdomain is not correctly formatted. It has to start with a letter, can be between 6 and 63 characters long. Only letters and numbers are allowed");
}
else
{
// we can additionally check for the subdomain here
// e.g. SELECT * FROM subdomains WHERE subdomain='_POST[subdomain]'
// if we find any results - then it's an error - the subdomain is already taken
// otherwise, we can just insert it
// e.g. INSERT INTO subdomains SET uid=_SESSION[uid], subdomain=_POST[subdomain]
// now we have a new subdomain registered, we can redirect to it
// header("Location: http://"._POST[subdomain].".example.com");
}
}
else
{
// just display the form
}

To get it to actually work:
- in the root directory of our website ("/[...]/example_path/" - as set in the Apache httpd.conf vhost area), we create or edit the .htaccess file.
We have to add or change the RewriteRule directive to set it to "On", like this:

RewriteEngine on

Just after this, we have to add a few lines like these:

RewriteCond %{SERVER_NAME} ^([a-z][a-z0-9]{5,62}).example.com [NC]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^(.*) http://%1.example.com/subdomain_home.php?old_req=$0 [L]

What do these lines above do?
- The first one checks if the page was accessed via a subdomain with the same format as specified above.
RewriteCond %{SERVER_NAME} ^([a-z][a-z0-9]{5,62}).example.com [NC]
For example, accessing www.example.com/somepath does not match the regular expression ([a-z][a-z0-9]{5,62}).example.com which allows only 6 to 63 alphanumeric characters before the ".example.com" string. [NC] is a flag for the regex to match No-Case sensitive strings (ABCDEF would be matched as well as abcdef).

- The second line asks that the request is not an existing file.
RewriteCond %{REQUEST_FILENAME} !-f

This is needed to exclude indefinite loops. More info here: http://httpd.apache.org/docs/2.0/mod/mod_rewrite.html
In practice, in the output HTML page, there will be references to images, CSS, JS, or other kinds of files, for example, supposing we have a file "main.css" in our example_path/ directory, we could find within our webpage:

<link rel="stylesheet" href="main.css">

When we access the webpage via a subdomain (say "http://abcdef.example.com", the browser would request the relative path file: "http://abcdef.example.com/main.css" . When Apache will try to respond to this request, the first RewriteCond condition would be met. If we skip the !-f condition, then the processor would continue downwards to the rewrite rule, and it would translate the request to: "http://%1.example.com/subdomain_home.php". So we would never get the actual CSS file, instead the HTML output from subdomain_home.php, and then again inside it a request to the CSS file, and so on. So, requests to the existing files don't need to be rewritten/redirected, we could end up with indefinite loops.

- The third line says the request isn't towards an existing directory (this is maybe less found in practice). The reason is the same as above, for the existing files.
RewriteCond %{REQUEST_FILENAME} !-d

- The fourth line says the request isn't towards an existing symlink. The reason is the same as above, for the existing files and directories.
RewriteCond %{REQUEST_FILENAME} !-l

- The fifth and last line, does the actual rewrite:
RewriteRule ^(.*) http://%1.example.com/subdomain_home.php [L]

This line redirects all requests with or without any path, to the file subdomain_home.php on the same subdomain matched at line 1 ([a-z][a-z0-9]{5,62}). Please note that %1 matches the first regex at RewriteCond (line 1), while $0 matches the first regex at RewriteRule (line 5). More info on this on apache's doc pages.
The regular expression "^(.*)" translates to: Beginning of line "^", and any character until newline any number of times - even zero - so both requests with empty path or some path match this rule: "http://abcdef.example.com" - no path specified; or any path given: "http://abcdef.example.com/example_page.html".
The [L] flag asks this is the last interpreted rewrite on this request. It stops the rule interpretation process and does the actual request.



The subdomain_home.php file, placed also in our website's root directory ("/[...]/example_path/subdomain_home.php") - will do whatever needed based on the subdomain requested. Here is an example of it:

if ( preg_match("/^([a-z][a-z0-9]{5,62})\.example\.com$/i", $_SERVER['SERVER_NAME'], $matches) )
{
$subdomain = $matches[1];
$r = mysql_query("SELECT uid FROM subdomains WHERE subdomain='".$subdomain."'");
if ( mysql_num_rows($r) ) { $row = mysql_fetch_assoc($r); $subdomain_owner = $row["uid"]; }
}

if ( $subdomain_owner )
{
echo "Yippiee! You have successfully reached the working subdomain of user ".$subdomain_owner."! <br>\n";
echo "You have originally requested the page: http://".$_SERVER['SERVER_NAME'].$_GET["old_req"]." <br>\n";
echo "And you have reached: http://".$_SERVER['SERVER_NAME'].$_SERVER["REQUEST_URI"]." <br>\n";
}
else
{
die("you have accessed this webpage from an inexisting subdomain. go away!");
}

That's it!
Opinions? Thoughts?

Regular expression for URL matching

Searching for a regular expression pattern to match URL-s. Some get really complicated, none really seems to meet all needs.
I've built my own which at a first glance, satisfies many variants met in practice.
Here's the regular expression pattern, and the results ran on some test strings (some well-formed and some not well-formed URL's).

What do you think about it, if anybody tests this, please send some feedback.

Thanks,
Lucian Costin



TESTING WITH RegEX
^http\:\/\/([\w\d\-\.]+)\.([\w\d\-\.]+)($|\/|\?|\#|(\\[\w\d\:\#\@\%\/\;$\~\_\?\\+\-\=\\\.\&\,]+))


does not match http://
does not match http://123
does not match http://www
does not match http://www.
does match http://a.com
does match http://a.com??
does match http://www.a.com/a
does match http://www.a.com/a/b
does match http://www.a.com/a/b/a.php?a
does match http://www.a.com/aa.php?a
does match http://www.a.com/aa.php?a=b
does match http://www.a.com/aa.php?a=b#abcd
does match http://127.027.0.2
does match http://127.027.0.2#be
does match http://127.027.0.2/
does match http://127.027.0.2/a
does match http://127.027.0.2/a.php
does match http://127.027.0.2/a.php?a
does match http://127.027.0.2/?a
does match http://a.com?a
does match http://a.com#me