Friday, December 26, 2014

Visual Studio: SQL Server Database Projects Part II

Intro

Last week in Part I of this 2-part series we saw how easy it is to setup a database project in Visual Studio, allowing us to treat databases similarly to how we treat our other code. Because our creations and changes are represented as .sql files, we can source-control our database systems which makes releasing and deploying our systems just a little bit easier and more predictable. Last week we saw how to create a new database via one of these projects. This week, we'll see how to create a database project for a database that already exists, as well as how to compare your project schema to the target database's schema. Hold on to yer hats! Or if you're Dan, eat a hat.

Hook up to an Existing Database

If you created a solution file last week for the databases in Visual Studio blog, open that solution file back up. If not you can just create a new solution, however the instructions given here are using last week's solution file as the base. You may have to make slight modifications to your own steps if you create a new solution but I bet you can get there. I also have a pre-made database named BlogLinq.ZooContext. This is one we made many moons ago in a blog posting far far away. If you don't have a pre-made database you can hook up to then go create one real quick and add a small table or two to it. OK, on with the show!

Right-click your solution in the Solution Explorer and add a new project. Select "SQL Server Database Project" as the project type, name it whatever you want, and click OK. You should have a new project in your solution.





Right-click on the new database project and select Import-->Database.

On the "Import Database" screen that comes up, click the "New Connection..." button. Type in the proper information for your connection and click the "Test Connection" button. Assuming things work out OK, click the OK button.


This takes you back to the "Import Database" screen where you can click the "Start" button, which will import your database schema into the database project. If all goes well, you now should have new folder(s) and within those some new sql files that represent your tables. Cool huh?




Schema Comparison

Now that we've seen how to create a database project from an existing database, what do we do with it? As you can imagine, we're going to want to make changes to the schema and eventually deploy said changes. I'm going to open up the Shows table and add a new column for the time of the show. Here's my new table structure:

I've added a column, so obviously this definition is different from the live database schema. Let's prove it by comparing the schemas. Right-click the project in Solution Explorer and select "Schema Compare...".

This brings up the schema comparison window. On the left side is your database project. On the right-side is nothing! Open up the drop-down and choose "Select Target...".

This brings up the "Select Target Schema" window. Select your database and click the "OK" button.

Now click the "Compare" button.

You are presented with the results of the comparison. Yippee! It can tell that we've added a new column to the Shows table named showtime. This is so freakin sweet. I don't want to get too in-depth on what you can do from here, but if you take a look at those other buttons in this window you can see there is an option to deploy the changes, generate sql scripts for later deployment, view unchanged items, and more. Have fun!


What's Next?

Play around with some of the other options available to you. Make a couple databases, update them, etc. It's fun! If you have any questions or comments, leave them in the comments section below and I'll be happy to help out.

Resources

SQL Server Database Development in Visual Studio

Wednesday, December 24, 2014

Microsoft Analytics

Intro:


Do you still want analytical data for your website but are looking for an alternative that isn't made by the corporation whose motto is "Do no evil"?  Why yes there is another option: Microsoft Analytics.  If you thought putting Google Analytics was a pretty simplistic endeavor to add some statistical info to your site you'll jump for joy how easy M$ made it.

Step by Step:


Step 1:  Download and install Application Insights Tools for Visual Studio.  It's a fairly straight-forward procedure you've done the bulk of your coding career.

Step 2:  Open your website project you want to add analysis data to.  For this venture I'm going to use Peter Hyde's blog chess project used back in the summer that was checked into the online version of TFS.

Step 3: right click on the project and around 1/3 of the way down you should see something like the following:
You should see a popup like the following:
Click the blue link that says "Add Application Insights to Project".  When you do that you should see a new folder within your project called ApplicationInsights.config.

Step 4: Run your project and do things within it!  I fired mine up and clicked the 2 buttons that exist within the project a few times.

Step 5:  If you right click on your project you'll now see an option for "Open Application Insights Portal...".  If you click that option soon after you did step #4 you'll find out the feed to M$ isn't as fast as you'd assumed it'd be.  Take 5-10 minutes and then go check again, you should see information in the Raw Event Stream like the following:




Gotta love M$ for having an app that links up to your visualstudio online account.

Enjoy!

Source:


Microsoft Analytics Info
Application Insight Tools Download

Thursday, December 18, 2014

SSMS - Tips, Tricks and Tweaks

Introduction

SQL Server Management Studio commonly referred to as SSMS is the GUI management application Microsoft provides for querying, configuring, managing and monitoring Microsoft SQL Server.

Since most of us have experience using SSMS for basic object creation and modification, I'm going to start with covering the "built-in" and less commonly known features and progress in future blogs to add-on tools that utilize the extensible feature of SSMS. This is by no means a complete list and I invite you to share below in the comments tools and tips you have found that are useful and feel would be of value for others to know.


Drag and drop scripting


Did you know that you can save yourself some keystrokes when writing a query by dragging an object from the explorer over to the query window? That's right! Check this out!

Write a simple script like you see below and then right click the data base you want in the USE statement, hold it down and drag it over between the brackets.




Release the mouse button and walha! With code completion this example is a little ridiculous, but think about having to type a bunch of column names in a SELECT statement. This can be pretty handy at times and works with anything you see in the Object Explorer!




Scripting Anything

You don't have to know everything about T SQL in order to write a script for creating an object, altering an object, setting or changing a permission or any other SQL server task. SSMS can do it all for you! SSMS works disconnected since server 2005. That means anything you do is not applied until you select save or apply which results in the creation of a script and execution of that script. This feature allows you to save the script for future use instead of immediately applying it. Lets look at an example.

I am going to add to columns to my existing table in my TestDB. Column_1 and Column_2 as you can see have been added in the designer. Instead of clicking the save button and doing it now, I want to wait until tonight so I need a script. Right click in the designer window and select "Generate Change Script...". 

A window will pop up with the script in it for performing the modifications you have made. If the table requires a tear down, there will even be script to move your data to a temporary table. Click the Yes button and it will prompt you for a location and file name to save the script to.

This works for almost anything in SSMS. Modify an index and then script it out so you can apply it later when the server is slow. Make server configuration changes through the GUI and then script them. The list goes on and on.

Protecting Table Modification

I get this question a lot so thought I would throw it in. Did you ever attempt to save a change to a table and have SSMS deny the change? That's a default means of protecting you from doing something that could cause the table to become unavailable or cause data loss. To turn it off and have your way with the server, click the TOOLS menu and then OPTIONS.



Templates

Did you ever have to write a script more than once and wish you had saved it? There are several add-on tools out there we will cover in future articles but SSMS has one that is built in that you can get started with and you can even add your own custom templates as well!

Open SSMS and connect to your test database server. Press CTRL+ALT+T to open your template explorer. You can park it on your side bar so it will open when you mouse over it. I usually have it on the right side.

Open a new query and drag Database.CreateDatabase to the query window.




Press CTRL+SHFT+M and you will be prompted for values to insert into placeholders in the template. Type a database name and hit enter. Your query window will now have a script to create your database.




You can create your own templates and define placeholders for things you do regularly. I'll leave that up to you to research.

Conclusion

Hopefully you have learned some of the interesting and not often discovered features of SSMS. See what else you can discover for yourself by looking around the web or just exploring inside SSMS. If you find something, share! Next BLOG we'll cover add-in tools that will make your life working with SQL server much easier.

 

Visual Studio: SQL Server Database Projects

Intro

Did you know that you can create and modify your SQL Server databases from within Visual Studio? Further, did you know that you can then put your database modification scripts into source control? Yes that's right folks, fully source controlled SQL databases right from within your favorite code editor. This goes beyond just running SQL queries against your database (which you can also do from Visual Studio by the way) and into modifications of the structure of your database using DML.

Why would you want to do this? Well you may have noticed, but as a coder you use source control. This allows you to easily version your code, branch your code, and it simplifies releasing of your code (somewhat) since you know what changes were done when and for what version of your system. If you've never source-controlled a database, which I'm sure many of you haven't, then you know releasing database modifications in tandem with code is an error-prone process. You have to rely too much on the right people remembering what they did at release time, and it can cause issues. Well having your SQL modifications in source control does the same thing for databases that source control does for code: it simplifies versioning. The rest of this blog will be dedicated to showing you how to perform the amazing feat of database development via Visual Studio. Hang on to your hats folks, this is gonna be a fun ride!

Note: The rest of this blog assumes that you have SQL Server 2014 Express Edition installed, or you have access to another SQL Server 2014 database engine. If you do not, please install from the previous link or contact your local friendly DBA for access to a non-production SQL 2014 box.

Create a New Database Project

To start things off we'll see how to create a new database using Visual Studio. Go ahead and fire up VS 2013. Once you get in there, create yourself a new project. Select "SQL Server Database Project" as the type of project and name it whatever you want. I've named mine BlogDatabase.

 

We've got an empty database project, which would make for a pretty boring deployment scenario. That script would be as blank as Keanu Reeves's whoa face. Let's create a table to put in this database to spruce it up a bit. Right-click the solution over in the Solution Explorer, then click "Add" and "Table...".


Name your table ElTable. Yeah, I'm feeling quite creative this evening. So sue me.

You can now modify your new table with either the designer or with script. Most of you will probably feel more comfortable with the designer portion, and in truth using it is a great way to get used to DML (data manipulation language) if you're not already used to it. Make a change in the designer view, and see what script is generated below it. This script is what SQL Server uses behind the scenes to make the actual database changes, so it's quite helpful to know what it's doing and how it's doing it. In the below screenshot, you can see I've added 2 fields: Id and Name.


Id is an integer and is the primary key field, and Name is just a nullable nvarchar (string) column.

Well that's nifty huh? OK so where's the database that it made? Well, it hasn't actually created a database yet. All this has done is create a script that can setup a database. We still have to publish/deploy this lovely conceptual database before it molts and becomes a real database. First things first though: we need to make sure that our project has the correct version of SQL server selected. These projects can publish to SQL Server 2K8 and up, and it defaults to publishing to the latest which is currently SQL 2K14. Depending on your environment, you may not be working with the latest and greatest.

Right-click on your database in the solution explorer and select "Properties". Select the version of SQL Server that you will end up publishing your database to and save your project. Below you can see my screen where I've set the "Target platform" to SQL Server 2014.


Now that we've made sure we're publishing to the correct version of SQL server, on with publishing the database! In the solution explorer, right-click on your database and select "Publish". A dialog window will come up asking you what server to connect to. Click on the Edit button.


 
This will bring up another dialog where you can specify your database server connection properties. Enter whatever information you have for the connection. For me you can see it's a local SQL installation on my compie named Peeticus-PC\SQLExpress.


Don't bother hitting "Test Connection", as it will fail. Your database doesn't actually exist yet so it can't connect properly, but that's OK. We're about to create the database. Just hit the OK button when you have your information entered here.

Now back to the first dialog: you have 2 options for deploying the database. You can either click the "Publish" button to have Visual Studio automatically create the database and all of it's structure for you, or you can click the "Generate Script" button which will obviously generate the SQL scripts you need and you can then run them manually to set things up. For simplicity's sake, we'll just have Visual Studio publish the database for us, so click the "Publish" button. If all went well, your "Data Tools Operations" window should have a green success message like the following:

Go ahead and connect to your database server with SQL Server Management Studio (SSMS), you should see your new database along with the table you plopped into it:


You can query your database via SSMS or yell at it or whatever, as it's now a real database.

What's Next?

Next week we'll see how to hook up a database project to an existing database, how to compare your current set of modifications to the target database, and we'll see some advanced options you can set within a database project. 


Resources

SQL Server Database Development in Visual Studio

Google Analytics

Intro:

Got a website and wonder about traffic statistics on it?  Feel like doing a little bit of footwork and employing Google to do the data analysis?  Here's the blog for you!  (No humanoid creatures were used in this blog, methinks they'll make another appearance after next week's blog).

Code:


The coding section really isn't that terrible, it breaks down to 6 steps which are basically copy and paste.  Step 1 creates the container elements you'll use to display the data.  Step 2 loads the library Google is graciously hosting for you.  Step 3 authorizes the user to actually use the info (yeah they charge for the service but the demo should be well the 50k free limit they offer).  Notice there's a Client_ID in use.  I got the pleasure of generating that through their dev site, it's a specific id used for my particular URL hooked to my google user account (yeah, they really want their money).  Step 4 creates the view selector (fairly straight forward).  Step 5 will create the timeline chart based on the data you wish to see.  Step 6 runs the query based on the info in steps 2-5.

And the code:

<!DOCTYPE html>
<html>
<head>
    <title>Embed API Demo</title>
</head>
<body>

    <!-- Step 1: Create the containing elements. -->

    <section id="auth-button"></section>
    <section id="view-selector"></section>
    <section id="timeline"></section>

    <!-- Step 2: Load the library. -->

    <script>
        (function (w, d, s, g, js, fjs) {
            g = w.gapi || (w.gapi = {}); g.analytics = { q: [], ready: function (cb) { this.q.push(cb) } };
            js = d.createElement(s); fjs = d.getElementsByTagName(s)[0];
            js.src = 'https://apis.google.com/js/platform.js';
            fjs.parentNode.insertBefore(js, fjs); js.onload = function () { g.load('analytics') };
        }(window, document, 'script'));
    </script>

    <script>
        gapi.analytics.ready(function () {

            // Step 3: Authorize the user.

            var CLIENT_ID = '201188138677-fq93f6i42il8b06pnhchhpj2tu2urjfr.apps.googleusercontent.com';  // you need to generate your own, source link #2 below shows you how

            gapi.analytics.auth.authorize({
                container: 'auth-button',
                clientid: CLIENT_ID,
            });

            // Step 4: Create the view selector.

            var viewSelector = new gapi.analytics.ViewSelector({
                container: 'view-selector'
            });

            // Step 5: Create the timeline chart.

            var timeline = new gapi.analytics.googleCharts.DataChart({
                reportType: 'ga',
                query: {
                    'dimensions': 'ga:date',
                    'metrics': 'ga:sessions',
                    'start-date': '30daysAgo',
                    'end-date': 'yesterday',
                },
                chart: {
                    type: 'LINE',
                    container: 'timeline'
                }
            });

            // Step 6: Hook up the components to work together.

            gapi.analytics.auth.on('success', function (response) {
                viewSelector.execute();
            });

            viewSelector.on('change', function (ids) {
                var newIds = {
                    query: {
                        ids: ids
                    }
                }
                timeline.set(newIds).execute();
            });
        });
    </script>
    This means something.
</body>
</html>

Output:
























What does the last screenshot mean?  It means I generated a quick and dirty website to show off Google Analytics and as the site has no prior data to pull from it obviously won't generate a darn thing.  For those of you that have your own websites hosted in the wild, hook up some Google Analytics and bask in the glory of the traffic info!

Tune in next week when I do a write-up of Microsoft Analytics.

Source:

google developer site with coding samples

Thursday, December 11, 2014

Data.Gov: Public Government Data API's


Intro

Believe it or not, there are actually a few free things out there. Freedom may cost you $1.05, but there are tons of freely available public APIs. Some are corporate APIs for retrieving information on weather, traffic and other useful things. You can probably find plenty such APIs with a small amount of Google-fu. Some free public APIs are made available by our government. You can retrieve data on economics, oceanography, demographics,utility rates, and more.


The API I Want to Use

We have to start somewhere, and I've picked an API that gives information on alternative fuel stations. Go ahead and dig around on this site for a minute then come back. This API includes information on fueling stations that use alternative fuels such as hydrogen, natural gas, ethanol and more. I don't have such a vehicle, but hey it's an interesting topic and I want to play with this API. Feel free to start somewhere else with your own code if you like.

The method I'm most interested in right now is the one that lists all locations which match specified query parameters. I could picture this information being useful for a person who wants to find the alternative fuel stations near their home or work so they can plan their daily commute.

This method has a large number of request parameters that you can supply on the querystring. It also allows you to specify whether you wish to receive the results as xml or json. Either way, the request is a simple HTTP GET with a specific URL and chosen querystring parameters, and you parse out the response with code. For example, let's say I want to retrieve a list of the first 5 alternative fuel stations in zip code 75006 that have E85 ethanol gasoline or electric refueling. For this API I would use the url: http://developer.nrel.gov/api/alt-fuel-stations/v1.json?api_key=DEMO_KEY&fuel_type=E85,ELEC&zip=75006&limit=5. The first part, "http://developer.nrel.gov/api/alt-fuel-stations/v1", is the base url of the service. the next part, ".json" tells the service that I want my results in JSON format. other possible values are ".xml" and ".csv" for this API. Next up, "api_key=DEMO_KEY". This is how we authenticate with the API. In our case we're just going to use their demo key rather than creating an API key on the website. Now we get to the first filter of our querystring, "fuel_type=E85,ELEC". This tells the API that we want to return a list of stations that are E85 Ethanol or electric refuel/recharge capable. Next up is the zip code, and the last querystring chunk, "limit=5", tells the API we want only the first 5 results. Paste this sucker into your browser and see what you GET (ha, internet pun!). You should see something like this, except mine's formatted nicer:

{
   "station_locator_url":"http://www.afdc.energy.gov/afdc/locator/stations/",
   "total_results":2,
   "station_counts":{
      "total":8,
      "fuels":{
         "E85":{
            "total":0
         },
         "ELEC":{
            "total":8,
            "stations":{
               "total":2
            }
         },
         "HY":{
            "total":0
         },
         "LNG":{
            "total":0
         },
         "BD":{
            "total":0
         },
         "CNG":{
            "total":0
         },
         "LPG":{
            "total":0
         }
      }
   },
   "fuel_stations":[
      {
         "access_days_time":"MON: 24 hours | TUE: 24 hours | WED: 24 hours | THU: 24 hours | FRI: 24 hours | SAT: 24 hours | SUN: 24 hours",
         "cards_accepted":null,
         "date_last_confirmed":"2014-12-11",
         "expected_date":null,
         "fuel_type_code":"ELEC",
         "id":45129,
         "groups_with_access_code":"Private",
         "open_date":null,
         "owner_type_code":null,
         "status_code":"E",
         "station_name":"Carrier Enterprise HQ",
         "station_phone":"888-998-2546",
         "updated_at":"2014-12-11T08:09:02Z",
         "geocode_status":"GPS",
         "latitude":32.933474,
         "longitude":-96.92574,
         "city":"Carrollton",
         "intersection_directions":null,
         "plus4":null,
         "state":"TX",
         "street_address":"2000 Luna Rd",
         "zip":"75006",
         "bd_blends":null,
         "e85_blender_pump":null,
         "ev_connector_types":[
            "J1772"
         ],
         "ev_dc_fast_num":null,
         "ev_level1_evse_num":null,
         "ev_level2_evse_num":4,
         "ev_network":"Blink Network",
         "ev_network_web":"http://www.blinknetwork.com/",
         "ev_other_evse":null,
         "hy_status_link":null,
         "lpg_primary":null,
         "ng_fill_type_code":null,
         "ng_psi":null,
         "ng_vehicle_class":null,
         "ev_network_ids":{
            "station":[
               "51671"
            ],
            "posts":[
               "20199",
               "19577",
               "11721",
               "9055"
            ]
         }
      },
      {
         "access_days_time":null,
         "cards_accepted":null,
         "date_last_confirmed":"2014-04-04",
         "expected_date":null,
         "fuel_type_code":"ELEC",
         "id":46370,
         "groups_with_access_code":"Private",
         "open_date":"2011-08-13",
         "owner_type_code":"P",
         "status_code":"E",
         "station_name":"General Electric - Dallas Office",
         "station_phone":null,
         "updated_at":"2014-04-04T19:00:52Z",
         "geocode_status":"GPS",
         "latitude":32.9838,
         "longitude":-96.845317,
         "city":"Carrollton",
         "intersection_directions":null,
         "plus4":null,
         "state":"TX",
         "street_address":"2508 Highlander Way",
         "zip":"75006",
         "bd_blends":null,
         "e85_blender_pump":null,
         "ev_connector_types":[
            "J1772"
         ],
         "ev_dc_fast_num":null,
         "ev_level1_evse_num":null,
         "ev_level2_evse_num":4,
         "ev_network":null,
         "ev_network_web":null,
         "ev_other_evse":null,
         "hy_status_link":null,
         "lpg_primary":null,
         "ng_fill_type_code":null,
         "ng_psi":null,
         "ng_vehicle_class":null
      }
   ]
}


I'll just summarize the results rather than detailing all of it: we found 2 stations that match our criteria, both of which are electric recharging stations. We also got their address, which is kinda nifty and we'll use that in a few minutes.


Code it Like It's Hot

This wouldn't be a very good coder's blog if I didn't code something, so let's call the API. Create yourself a new web project in Visual Studio. I chose an empty WebForms project, and it will be easier for you to follow along if you do the same. Now add a default page to your site, named "Default". Drop a button on there and give it the same properties as the button you see in my code below:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="BlogPublicApi.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Public API Test</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="btnExecuteApi" runat="server" Text="Execute API" OnClick="btnExecuteApi_Click" />
    </div>
    </form>
</body>
</html>



Now go to the code behind of your page. The first thing you'll want to do is install the Microsoft Web API Client Libraries. It's a NuGet package. You can find it by searching for "Microsoft.AspNet.WebApi.Client" within the NuGet package manager. After you've added that to your solution/site, copy the code from my button click event into your own:

using System;
using System.Net.Http;


namespace BlogPublicApi
{
    public partial class Default : System.Web.UI.Page
    {
        protected void btnExecuteApi_Click(object sender, EventArgs e)
        {
            using (var client = new HttpClient())
            {
                client.BaseAddress = new Uri("http://developer.nrel.gov/");
                var response = client.GetAsync("api/alt-fuel-stations/v1.json?api_key=DEMO_KEY&fuel_type=E85,ELEC&zip=75006&limit=5").Result;
                if (response.IsSuccessStatusCode)
                {
                    dynamic stationResponseData = response.Content.ReadAsAsync<Object>().Result;
                    Response.Write("Total Results: " + stationResponseData.total_results + "<br />");
                    foreach (dynamic station in stationResponseData.fuel_stations)
                    {
                        Response.Write(String.Format("<a target='_blank' href='https://www.google.com/maps/place/{0},+{1},+{2}+{3}'>{4}</a>", 
                            station.street_address, station.city, station.state, station.zip, station.station_name));
                        Response.Write("<br />");
                    }
                    Response.Write("Raw Result Object: <div>" + stationResponseData + "</div>");
                }
            }

        }
    }
}


The magic starts with the using statement within btnExecuteApi_Click. This is where we create our http client object. The next line of code we set the base address, and then after that we get our response. Assuming the request was successful, we then pull out the json from the response as a dynamic object so that we can access its properties. We write out the total # of results, then loop through the individual fuel stations to create a link. Then for a little extra fun, we link to the station on Google maps. Try plugging in your own zip code and give the code a whirl! It's pretty neat to see the results on a map.

Here's a screenshot of the results so you can visualize what we've done:



What's Next?

There are lots of other free, public APIs out there. Look around, and see what you can make with all the free data. Maybe you'll end up with a great idea for an app for your phone.


References

APIs | Data.gov
Alternative Fuel Stations API
All Stations API | Alternative Fuel Stations
JSON Formatter & Validator 
Calling a Web API From a .Net Client

Thursday, December 4, 2014

default keyword

Introduction:

Ever write some code and wonder if it's possible to default the value to a parameterized type when you don't know if the type is be reference or value, and if it's by value is it numeric or a struct?  Yes you can, .Net back in version 2005 gave us that ability, the default keyword.

Coding:


Time to write some quick code and see how what kind of output default gives us.  I'm still a fan of the works of Tolkein, lets see how we can incorporate both concepts into a simple program:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace DefaultKeyword
{
  class Program
  {
    class Hobbit
    {
      public string Bilbo { get; set; }
    }

    struct Citizen
    {
      public int Gimli { get; set; }
      public Hobbit Frodo { get; set; }
    }

    static void Main(string[] args)
    {
      int n = default(int);
      Hobbit f = default(Hobbit);
      Citizen b = default(Citizen);

      Console.WriteLine("default value of int n is " + n);
      if (f == null) Console.WriteLine("f is null");

      Console.WriteLine("b.Gimli = {0}", b.Gimli);
      if (b.Frodo == null) Console.WriteLine("b.Frodo is null");

      Console.WriteLine("\nPress Any Key to Exit.");
      Console.ReadKey();

    }
  }
}

Output:
















Huzzah!  The int type defaults to 0, the rest defaulted to null.

Source:

Lazy Loading of Images With JavaScript and JQuery (a Plugin)

Intro

Have you noticed a growing number of websites that load images while you are scrolling down the page? Even if you haven't, just pretend that you have, or hey read on anyways! I'll try to entertain you. These pages are using a technique called lazy loading for the images. Your browser does not download the image until the image is at or near the viewport (not downloaded until you the client need to see the image), thus potentially saving on bandwidth and initial page display time for the user. Under the assumption that most visitors won't view every image in a large scrollable list, this can be quite a boon for you (the host) and for your users (the clients). If you're intrigued and want to read about one way to accomplish this feat, read on!

How to use the plug-in

There are quite a number of ways to lazy load images, but for this article I'll focus on just one. A JQuery plugin named unveil by Luis Almeida. For those of you unfamiliar with JQuery, I suggest you read up about it on their website before continuing. It will help you to have a basic understanding of what it does and how it works. If you want just the cliff-notes version, it's a lightweight (small download size) JavaScript library that handles a multitude of tedious tasks for you, and it has a very vibrant ecosystem of plugins from thousands of contributors.

Back to unveil...this plugin lets you specify a placeholder image for images as well as the final lazy-loaded ultimate image that the user will see. It's got just a couple other configuration options, but you can read about those on the unveil site linked below. We'll use it in it's most basic capacity, downloading an image lazily when the user scrolls down to that portion of the page. So, let's see how to use it.

Fire up your favorite html editor and create yourself an html page. Paste the content you see below into your html file:

<!DOCTYPE html>
<html>
 <head>
  <!-- link to jquery library hosted by google -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <!-- link to unveil library in the same directory as this html file -->
  <script src="jquery.unveil.js"></script>
 </head>
 <body>
  <div style="height: 1000px;">
   hi!
  </div>
  <div>
   <img src="http://www.clker.com/cliparts/v/W/8/R/B/w/blue-circle-th.png" 
    data-src="http://digitalis.nwp.org/sites/default/files/stuff_1.png" />
  </div>
  <div>
   <img src="http://www.clker.com/cliparts/v/W/8/R/B/w/blue-circle-th.png" 
    data-src="http://static.tumblr.com/429df189c9e81bb388196fb442db77ba/vbdvuoy/xrUmksw6n/tumblr_static_green-stuff.jpg" />
  </div>
  <div>
   <img src="http://www.clker.com/cliparts/v/W/8/R/B/w/blue-circle-th.png" 
    data-src="http://images.electricpig.co.uk/wp-content/uploads/2012/01/internet-stuff.jpg" />
  </div>
  <div>
   <img src="http://www.clker.com/cliparts/v/W/8/R/B/w/blue-circle-th.png" 
    data-src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT3WjcjnXnXG3MIZZ1rw3dQsjrx-06ogqZbcjArDwM3n1Q9ixrwCw" />
  </div>
  <div>
   <img src="http://www.clker.com/cliparts/v/W/8/R/B/w/blue-circle-th.png" 
    data-src="http://www.abc.net.au/tv/stuff/stuff_wendy.jpg" />
  </div>
  <div>
   <img src="http://www.clker.com/cliparts/v/W/8/R/B/w/blue-circle-th.png" 
    data-src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-5Ud4e36C7a9xsXgKr6ETuuecqSNorBhiWWelWj4UyfIUzzUwHg" />
  </div>
  <div>
   <img src="http://www.clker.com/cliparts/v/W/8/R/B/w/blue-circle-th.png" 
    data-src="http://tosaenglish.com/wp-content/uploads/2012/06/image.png" />
  </div>
  <div>
   <img src="http://www.clker.com/cliparts/v/W/8/R/B/w/blue-circle-th.png" 
    data-src="http://www.seren.bangor.ac.uk/wp-content/uploads/2012/10/story-of-stuff-book-adds-to-the-vision-of-decreased-consumption.jpeg" />
  </div>
  <div>
   <img src="http://www.clker.com/cliparts/v/W/8/R/B/w/blue-circle-th.png" 
    data-src="http://i.imgur.com/c6D2qCb.jpg" />
  </div>
  <div>
   <img src="http://www.clker.com/cliparts/v/W/8/R/B/w/blue-circle-th.png" 
    data-src="http://sd.keepcalm-o-matic.co.uk/i/keep-calm-and-stop-saving-stuff-on-desktop.png" />
  </div>
  <div>
   <img src="http://www.clker.com/cliparts/v/W/8/R/B/w/blue-circle-th.png" 
    data-src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvKoJ_CqT0yZQFelslk6DUralqV73_SfzuiTa30e6YC1cLzkxY" />
  </div>
  <div>
   <img src="http://www.clker.com/cliparts/v/W/8/R/B/w/blue-circle-th.png" 
    data-src="https://lh4.googleusercontent.com/-ZknF9DJA52o/AAAAAAAAAAI/AAAAAAAAAB4/JKBNFb96bM0/photo.jpg" />
  </div>
  <script>
   $(document).ready(function() {
     $("img").unveil(-400);
   });
  </script>
 </body>
</html>

Let's go over this code in sections. The first section I want to talk about is the "<head>" section of the html file. The important bits are the 2 script links. The first one links to a version of JQuery hosted by google servers. The 2nd script links to a js file that is expected to exist in the same location as your html file. Save the unveil js file to your hard drive in the same place where you have the html file.

The next part to talk about is all them thar div tags. The first one makes sure we have 1000 pixels taken up by useless stuff. I did this so that you could better play with the scrolling effect of lazy loaded images. The remaining divs are all containers for img tags. For those of you used to using img tags already, you know what the src attribute is; it's the url of the image to display. In the case of the above img tags, we're linking to a single placeholder image file which is a blue circle. Each of these img tags also contains a special data-src attribute which in the case of the unveil JQuery plugin, contains the image that will be downloaded and displayed when the user's viewport scrolls the image into view. Long story short, this is the image you'll actually see.

The last chunk of code I want to discuss is the final script tag. This contains our jquery function (the document.ready) which fires off when the document has finished loading. Our function above will apply the unveil plugin to any img tag on the page. The -400 in there tells unveil to only "unveil" the real image after it's 400 or more pixels into the viewport. If you specify no value here at all the image is unveiled precisely when it gets into the viewport, and this is normally what you'll want, but for this sample I wanted you to see the placeholder images a little better.

OK go ahead and open up the html file in your favorite browser! Depending on your monitor resolution, you might either see just the word "hi!", or maybe you'll see a blue circle or 2 at the bottom of your screen. Now scroll down slowly. You'll see the blue circles come up on screen, and if you keep scrolling they turn into other images (the final destination images as denoted by data-src). Pretty nifty huh? Feel free to play around with that -400, change it to other values to see the change in behavior. The closer you get to 0, the less time (vertical scroll-wise) you'll have to see the blue placeholder circles. The more negative the number gets, the longer you see the blue placeholders.

If you get truly excited by all this, you can bring up the developer tools of your favorite browser (mostly by hitting the F12 key) and watching the timing of image downloads to confirm you're getting what you think you're seeing.



What's Next?

There are other lazy loading JS image libraries out there, including some that are JQuery plugins. Play around with them and see if you find another you like. I like this one because it's extremely light-weight and easy to use, but maybe you'll find one you like better.

You could also create your own sample page from scratch. That's the best way to learn after all, not by copying something another person has already done.

Resources

unveil
JQuery

Friday, November 28, 2014

Custom Search for Your Own Website, Parte Deux

Intro

In Part 1 we setup a Google custom site search for your (or my) website. This lets you very quickly setup a search customized to your website, powered by Google. It's much easier than creating your own search. Take a look at the screenshot below however and you may notice a drawback:


While the search results look nice, They don't match the theme of every site out there, and possibly not our own website. The good news is that there are ways of dealing with this. I'll cover 2 of those ways:
  1. Changing your pre-canned Google custom site search theme.
  2. Modifying things yourself with CSS.

The Easy Way

Changing the theme of your custom site search within Google's interface using a pre-canned theme is pretty easy. If you created search for your own site in part 1 of this series (as opposed to creating a search function on my sample website), then you can go to the Google CSE Page, and navigate to the section shown in this screenshot:


You can pick any of the themes shown here, click save, and refresh the search page you made, and voila! You have a new search theme. Here's an example of the results when I chose the Espresso theme:


This has the obvious drawback of limiting you to only the pre-canned themes. While they do look nice, I think we can do better than that.

The Coder Way

As with many things HTML-related, the Google custom site search results (and even the entry) are controlled by CSS classes. This makes our job of customization quite easy really; all we have to do is override some CSS classes. In this first example, I've overridden the search box to use a green font:


This is a pretty simple hack, accomplished with the following css:

        .gsc-input {
            color: green !important;
        }


Our next trick is to make the background of the search results black and to change the text and titles to slightly different greens. Here's what the result looks like:


And here's the CSS to accomplish this result:

        .gsc-results-wrapper-overlay {
            background-color: black !important;
        }

        .gs-title, .gs-title > b {
            font-size: 30pt !important;
            color: limegreen !important;
        }

        .gs-snippet {
            color: forestgreen !important;
        }


Not much to it really. All we did was set the results wrapper overlay (the popup results box) to have a background color of black, we set search result titles (the hyperlinks) to 30-pt font lime green, and we set the snippets in the results to forest green. As you can imagine, there are many more possibilities than what I've covered so have at it folks!

What's Next?

If this topic has interested you, use your browser's developer tools to find other CSS classes you can override. Let me know if you need help with that. You might also experiment with other ways of changing around the look and feel of things, perhaps through JavaScript. It's not my recommended solution as generally JavaScript should be reserved for actual code not changing appearance, but I make exceptions :)

Thursday, November 27, 2014

Lazy advanced: Lazier!

Introduction


So we know a little bit about Lazy<T> now.  Time to expand our knowledge a bit:  let's write some code to pass a parameter to the constructor.  It being the holiday season, lets involve the use of food!

Coding


Let's create a class called Food that passes a string parameter.  This still uses the lazy concept to where the object doesn't exist until it really needs to.  Onto some code:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace LazierTProject
{
  class Program
  {

    internal class FoodExtended
    {
      private string foodID;
      private string aboutFood;
      internal FoodExtended() { }
      internal FoodExtended(string foodID)
      {
        this.foodID = foodID;
      }

    }

    public class Food
    {
      public string id;
      private Lazy<FoodExtended> foodExtended;

      public Food(string id)
      {
        this.id = id;
        foodExtended = new Lazy<FoodExtended>(() => new FoodExtended(this.id));
      }
    }

    static void Main(string[] args)
    {
      Food turkeyForMe = new Food("Gobble gobble!");

      Lazy<Food> turkeyForYou = new Lazy<Food>(() => new Food("Turkey for you"));
      Console.WriteLine("Turkeys declared");

      Console.WriteLine();
      Console.WriteLine("turkeyForYou's food initialized:  {0}", turkeyForYou.IsValueCreated);
      Console.WriteLine();

      Console.WriteLine("turkeyForMe.Message: {0}", turkeyForMe.id);
      Console.WriteLine("turkeyForYou.Message: {0}", turkeyForYou.Value.id);
      Console.WriteLine();
      Console.WriteLine("turkeyForYou's food initialized:  {0}", turkeyForYou.IsValueCreated);

      Console.WriteLine("\nPress Any Key to Exit.");
      Console.ReadKey();

    }
  }
}


Output
















Wahoo!  The coding sample works and wasn't too terrible to pass a parameter to a lazy object.

Source(s):


Wednesday, November 19, 2014

Lazy

Introduction


Lazy <T> is the wrapper class for lazy initialization of an object that provides lazy initialization for the class or user defined type.  Lazy initialization of an object is used when you want to defer the creation of an object until it's actually used.  This could be quite useful if you have a dependent object that isn't used until more extensive operations are required to be completed but your object has to exist.

In layman's terms: you don't have to create the object early on in your coding and potentially call it later.

Coding


Onto a sample.  Let's create a class called Dalek that only writes out the phrase we've all heard: Ex-ter-min-ate!.  But we only want to do this when the object is actually used.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace LazyTSample
{
  class Program
  {
    static void Main(string[] args)
    {
      Lazy<Dalek> lazyDalek = new Lazy<Dalek>();
      Console.WriteLine("Dalek is created : " + lazyDalek.IsValueCreated + "\n");
      Dalek drWhoEnemy = lazyDalek.Value;
      Console.WriteLine("\nDalek value has been set : " + lazyDalek.IsValueCreated);

      Console.WriteLine("\nPress Any Key to Exit.");
      Console.ReadKey();
    }
  }

  public class Dalek
  {
    public Dalek()
    {
      Console.WriteLine("EX-TER-MIN-ATE!");
    }
  }
}


Output
















Huzzah!  Coding sample works, this should be quite useful for more beefier operations to finish creation before your object needs to be used if it's ever called.

Source(s):


Thursday, November 13, 2014

Custom Search for Your Own Website

Intro

So I'm creating a website that will, among other things, contain a large number of details and lists of items. These items are of different types and will be spread out (categorized) throughout the site. Seeing as how I'm just a lone developer and this is a personal site, I have things I would like to spend my time on other than a fully customized search feature. How can I accomplish search with minimal effort? Google to the rescue! Using Google Custom Site Search, you can setup search on your website (using Google to crawl and index your site) fairly easily. Setting up custom search involves 2 things, from a high-level view: 1) Setup some sort of service that will crawl and index your website. 2) Create a search feature where users can search for and view results.

For the remainder of this blog I am assuming you have a personal google account. If not you can create one. You don't need anything special, in fact I started this off with just a plain old gmail account. If you don't have a google account of some sort, go create one before you get too far.

There is one other alternative if you don't want to create a google account or if you don't have a website you want to search: skip the "Account Setup" section below and skip right to the code. You're welcome to create a custom search for my website, at least for learning purposes.

 

Account Setup

I'm going to assume that you already have a website you'd like to create custom search for. If not, hey maybe you've got a friend who has a site that could use it. Just keep in mind you will need a way to prove ownership of the site in the end, so be sure to get your friend's permission if you're not doing this on a site of your own. Anyways, here is how to setup your Google Custom Search account.
  1. Go to this page: Custom Search - Create CSE
  2. Follow the instructions on that page
  3. You're now taken to a congratulatory page that tells you you've setup the custom search engine. 
Now you need to prove to Google that you have admin access to the domain which is hosting your site. You do this through google sitemaster tools.
  1. Go to this page: Google Webmaster Tools
  2. Click the "Add a Site" button if your site isn't already listed on the page.
  3. Enter the url of your site/domain. 
  4. Follow the remainder of the on-screen instructions from google, which will most likely have you log into your domain provider's account (quite frequently this is register.com) in order to set a server-side variable, proving you have administrative access to the domain.
Congrats! That's it for account setup.


Code

A search engine sucks if you don't have a way to search for things, and we haven't done that half yet. A quick note: we won't be doing any server-side code here. This is all client baby!

Flip back over to the congratulatory page from the end of the process of setting up your Google Custom Search. As of now (2014) there's a button labeled "Get code". Click on that. This will show you some JavaScript that you can copy and paste into a webpage. Fire up your favorite text editor. Paste this code (or if you have your own site/script, by all means place that in the editor instead).

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Search Demo</title>
</head>
<body>
    <h1>Search Demo</h1>
    <div>some content before search</div>
    <div>
        <script>
          (function() {
            var cx = '003872741270381885457:moxcvku22ym';
            var gcse = document.createElement('script');
            gcse.type = 'text/javascript';
            gcse.async = true;
            gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
                '//www.google.com/cse/cse.js?cx=' + cx;
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(gcse, s);
          })();
        </script>
        <gcse:search></gcse:search>
    </div>
</body>
</html>

Now fire up the page in your web browser of choice. You should have a screen that looks like this. Not too bad looking, considering the very small effort involves so far.

Go ahead and type something into the search box. If it's your own site, pick a word that you know is on the site. If you're doing my site, use "shadowrun" as your search term, and hit enter or click the search button. Your screen should now look similar to this:


Neat huh? That's all there is to it.

What's Next?

I'm just learning how this stuff works myself. I hear tale you can customize the look and feel of the search though and there might even be some other advanced options, so I think I'll look at those for next week. Feel free to be a teacher's pet and look ahead if you like.

Resources

Custom Search Engine


Thursday, November 6, 2014

Regular Expressions in C#: An Advanced Lesson

Intro:


Did you Like regular expressions enough from the last post to want to keep reading about some advanced techniques?  Do you like the dwarves from the works of J.R.R Tolkien enough to want to use them in a coding blog?  If you answered yes to both questions then this is your lucky day!

Some advanced techniques:


Lets try to match some arbitrary value, say the dwarf name Gloin and have it followed by any number of digits.  But lets add some trickery to our debacle: not allow the phrase existing in quotes and not allowed within curly brackets like {Gimli Gloin123}.

I'll go ahead and create a regular expression like:  "{[^}]+}|""Gloin\d+""|(Gloin\d+)

The first section within the first set of quotes, {[^}]+}, will match any content between the curly brackets.
The second section, "Gloin\d+", will match any content that exists within those double quotes.
The third seciton, (Gloin\d+) will match Gloin and any digits that succeed it and capture the match into group 1.

Onto some code!


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Text.RegularExpressions;
using System.Collections.Specialized;
using System.Threading.Tasks;

namespace CSharpConsoleAppRegularExpression
{
    class AdvancedTutorial
    {
        static string ConvertToYesNo(bool value)
        {
          if (value)
            return "Yes";
          return "No";
        }

        static void Main()
        {
            string dwarves = @"Gimli"" ""Gloin12"" Gloin11@Gloin22 {4 Gloin42}";
            //string s1 = @"Jane"" ""Tarzan12"" Tarzan11@Tarzan22 {4 Tarzan34}";
            //var myRegex = new Regex(@"{[^}]+}|""Tarzan\d+""|(Tarzan\d+)");
            var myRegex = new Regex(@"{[^}]+}|""Gloin\d+""|(Gloin\d+)");
            var group1Caps = new StringCollection();

            //Match matchResult = myRegex.Match(s1);
            Match matchResult = myRegex.Match(dwarves);
            // put Group 1 captures in a list
            while (matchResult.Success)
            {
              if (matchResult.Groups[1].Value != "")
                group1Caps.Add(matchResult.Groups[1].Value);
              matchResult = matchResult.NextMatch();
            }

            // Task 1: Is there a match?
            Console.WriteLine("*** Is there a Match? ***");
            Console.WriteLine(ConvertToYesNo(group1Caps.Count > 0));

            // Task 2: How many matches are there?
            Console.WriteLine("\n" + "*** Number of Matches ***");
            Console.WriteLine(group1Caps.Count);

            // Task 3: What is the first match?
            Console.WriteLine("\n" + "*** First Match ***");
            if (group1Caps.Count > 0) 
              Console.WriteLine(group1Caps[0]);

            // Task 4: What are all the matches?
            Console.WriteLine("\n" + "*** Matches ***");
            if (group1Caps.Count > 0)
              foreach (string match in group1Caps) 
                 Console.WriteLine(match);

            // Task 5: Replace the matches
            //string replaced = myRegex.Replace(s1, delegate(Match m)
            string replaced = myRegex.Replace(dwarves, delegate(Match m)
            {
              // m.Value is the same as m.Groups[0].Value
              if (m.Groups[1].Value == "") 
                return m.Value;
              return "Thorin";
            });
            Console.WriteLine("\n" + "*** Replacements ***");
            Console.WriteLine(replaced);

            // Task 6: Split
            // Start by replacing by something distinctive,
            // as in Step 5. Then split.
            string[] splits = Regex.Split(replaced, "Thorin");
            Console.WriteLine("\n" + "*** Splits ***");
            foreach (string split in splits) 
              Console.WriteLine(split);

            Console.WriteLine("\nPress Any Key to Exit.");
            Console.ReadKey();
        }
    }
}

Code output:



Final Conclusion


Regular expressions seem to be another slick way of data validation available to developers.  I hope you enjoyed reading this as much as I enjoyed writing this.  Cheers.


Resources:


Simple Security Tips for .Net Developers

Intro
As developers, it is our responsibility to make sure our code is secure. If you haven't coded with security in mind before, a good place to start is by learning. So, today we'll see a few small tips you can start using right away to make your code more secure. Eventually you might end up designing security into your systems from the get-go, but let's start simple and see a few practical tips.

Use HTTPS

Information transmitted over the web is generally done on port 80 (HTTP), or 443 (HTTPS). Information transmitted via HTTP is insecure; HTTPS is encrypted using keys. If you have sensitive information including personally identifiable information, authentication information such as passwords, sensitive financial information, or anything else you want to protect, get an SSL certificate for your domain. This allows HTTPS traffic, and you can then force clients to use HTTPS instead of HTTP.

Http Header: X-Frame-Options

Have you ever heard of clickjacking? It's a form of attack where the user sitting at a web browser performs actions on one site when they think they are performing actions on another. Picture this: You have a site that allows users to enter and remove widgets. You have a "delete all widgets" button on your website. Someone else, who is just a malicious chode, puts your site in an iframe on their website. They then cover the stuff on your site with their own html elements using sneaky CSS and/or JavaScript, so that the user thinks they're clicking on a button that says "give me a free ipad" on one site, when in reality they're clicking your button that says "delete all widgets". Oops! It turns out this attack is pretty easy to thwart, just set an http header named x-frame-options to a value of "deny". You can do this in IIS, or my preferred method is to do so in code in your global.asax:

void Application_BeginRequest(object sender, EventArgs e)
{
    HttpContext.Current.Response.AddHeader("x-frame-options", "DENY");
}

This simply prevents browsers from rendering your website within a frame or iframe. You may still have to worry about older browsers, but consider this an opportunity for research on your own :)


Meta Tag: Charset

Would you believe that people can attack your website by passing it information using a character set other than what you expect? For example, if you expect users to type in utf-8 information, which is fairly standard, but they enter in utf-8 character sequences, they just might be able to sneak some JavaScript into your entries. Such an attack is called a Cross Site Scripting attack, or CSS or XSS for short. The good news is that this is also quite easy to get around. My preferred method of preventing this type of attack is done within the html of each of your pages, as per the following:

<html>
  <head>
    <meta charset="UTF-8">
  </head>
</html>

This tells the browser not to accept any form of input from the client unless it is UTF-8.


Restrict Access

This is just a general security tip which is useful in many situations: Restrict access by default, and give access only as necessary for a person to get done what needs doing. Don't give more access or rights than are necessary. If someone asks if you want to do the bare minimum, proudly exclaim "yes!". It's more secure.

Sql Parameters

Many .Net developers don't realize just how easy it is to hack the database behind a website using the website to do the dirty work. This is called a SQL Injection attack. I could go into a lot more detail showing you how to make such an attack, but hey, I have a wedding to attend this weekend so my time is gold this evening. Here is some code that will do a pretty good job of preventing such issues, and bonus: your code is cleaner than if you just concatenated the whole query together.

public void DoStuff()
{
  using (var conn = new SqlConnection("some conn string"))
  {
    var command = new SqlCommand("select * from SomeTable where SomeCol = @SomeCol", conn);
    command.Parameters.Add(new SqlParameter("@SomeCol", Request.QueryString["someval"]));
    command.Connection.Open();
    command.ExecuteNonQuery();
  }
}

In this example we are running a query which is based off a value the user typed into the querystring of the request. Using a SqlParameter in the command's Parameters list, we have ensured that the data passed to the database is safe and will not allow the caller to use SQL Injection.

Validate Info Entered/Imported

This is another general bit of information: Validate all information that is input into your system, whether it's from a user, another system, a file, a database, or other. If it's going through your system, validate! You never can tell what type of data might get tossed your way, so be prepared and prevent it from taking your system down by validating it's of the type and size you expect, and possibly within a range of valid values you might expect.

Encrypt Sensitive Data

This might seem like a bit of a no-brainer but I feel it needs mentioning. If you have sensitive information such as passwords, Personally Identifiable Information, sensitive financial information, or other info you don't want unauthorized people to get hold of, encrypt the data. There are many ways to do this in both .Net and in database platforms including SQL Server, you'll have to research this part on your own. Or hey, give me a buzz and I'll help out! I just don't have the time or space on this blog to give examples at the moment, as it can get pretty complex. Good, strong encryption is not for the faint of heart, but it's necessary for many things.

1-Way Encryption for Auth Passwords

Speaking of encryption, passwords! When setting up your authentication system you can take it a step further by creating a 1-way encryption of the passwords of your users. Why do that? Even if an attacker somehow gets hold of your database, they still won't be able to decrypt the passwords in order to use the logins of others. You may be wondering how you can then authenticate your users...the concept is simple, even if the encryption code is more complex: You just make sure that any given input value encrypts to the same value. So for example, I have a user named "bob" whose password is "hi!" The encrypted version of this password is "1234asdlfkj214o2i;;". When bob logs in he types in "hi!", so I then encrypt the typed in value and check to make sure it's the same as the encrypted value stored in my database.

Strong Passwords

So that prior example with a password of "hi!" isn't exactly a great password. Why not? The longer a password is, and the more nonsensical, the less vulnerable it is to something called a brute force attack (more specifically, a dictionary attack) where the attacker has a program try to randomly guess your password. They try words from the dictionary, including 1337-speek. So, make your users use better passwords. Instead of "hi!", suggest "124ksdfAAA!!~x@". This is not going to be vulnerable to a dictionary attack specifically, and makes it less vulnerable to a brute force attack in general. Don't carry this too far though; the stronger password enforcement you have in place, the more likely the user is to rebel and write that super-secure password on a post-it note stuck to their monitor. Backfire-city!

2-Factor Auth

Lately a concept called 2-factor authentication has been gaining steam. It's a simple concept: use more than 1 form of authenticating a specific user. Popular choices include a mobile app with a pseudo-randomly generated code ala World of Warcraft, a text message with a specific code sent to the user's mobile phone, fingerprint analysis, voice recognition, and others. In the world of websites this generally means you have your standard id and password along with some special code that you acquire elsewhere. Neat huh? Simple concept, but the coding might take a bit.

Validate Email Addresses

My last tip of the day: If you make users sign up to your system using their email address, and this is the email address they'll use for password reset and other such administrative features, validate the user actually owns the email address when the account is created. This is usually as simple as sending the user a unique activation link to the email address on the account as soon as the account is created, making sure the user can't login to the account until they activate it via the link you emailed. Once they click said link, the account is usable. 

What's Next?

Clearly there are many more good security tips out there, many more vulnerabilities to discuss, and all of the above topics could use a lot more detail. Spend some time on your own researching a few things.

Do you have a simple secure coding tip to share? Say so in the comments below!

Resources

Clickjacking Defense Cheat Sheet
Html Meta Charset