Resize and Optimise Image Class in C#
With the growth of mobile internet and mobile devices, users want websites to be fast and responsive when they are using them. One main downfall of normal websites is the size of the web page and its resources. For mobile we should be reducing the number of requests and how big the responses are.
One method of doing this is to scale down your image before they are sent to the client. This prevents large images been downloaded, only to be displayed in a small space. If done properly it can also eliminate the request for the image using Data URIs.
This tutorial will show you how to create a C# class that will resize an image and return it in an optimised Data URI format.
To start with, create a new C# class file and call it “Resize”. This will contain all of our method to resize our images. Next we need to make our class public and static. Your class file should look as follows:
How to target iPad mini in CSS Media Queries
With the increased use of the iPad mini, you need to be sure that your site displays well on the smaller screen. If you already have an iPad or tablet optimized website, the iPad mini will just inherit the same viewport size as the original iPad which is 768×1024 (in portrait mode) just in a smaller screen.
However, you may want to target the iPad mini specifically, due to it’s smaller screen, font’s may be slightly smaller and you may be able to utilize the space better. To do this, we can target the viewport size of the iPad coupled with the pixel density of the iPad mini.
So, in a media query we would do the following:
/* ipad Mini Portrait */ @media only screen and (width:768px) and (resolution: 163dpi) { } /* ipad Mini Landscape */ @media only screen and (width:1024px) and (resolution: 163dpi) { }
The media queries above will allow you to target iPad Mini in both the portrait and landscape orientation. The landscape media query could be coupled with the normal iPad portrait rule as the size is very similar. To couple it with the normal iPad portrait query, you can use the code below:
/* All iPads Portrait & iPad Mini Landscape */ @media only screen and ((width:768px) and (resolution:132dpi or resolution:263px) or ((width:1024px) and (resolution: 163dpi)) { } /* Only iPad 1 & 2 Portrait & iPad Mini Landscape */ @media only screen and ((width:768px) and (resolution:132dpi) or ((width:1024px) and (resolution: 163dpi)) { }
The reason for two options above, is you may want to target the retina iPad display seperatley to take care of high resolution images.
That is how to target iPad mini displays in CSS media queries.
Creating 3 Stage Pure CSS3 Gradients
With the ever growing popularity and ease of use of CSS3, it is important to use all of the benefits available from the technology. One of those benefits is being able to create gradients without the need for any images. This can be beneficial in 2 ways, one it means the gradient can be changed easily without having to make a new image, and two it eliminates the request for an image which helps in saving bandwidth.
Creating CSS3 gradient is easier than you expect and can take just one line of code, but cross browser comparability requires a few more lines to cater for vendor specific styles. This tutorial looks at how to create a 3 stage gradient. We will start by making an empty div in our html.
<div id="gradient"></div>
This div will be the based for displaying our gradient. Now we need to set our base background colour. This will be used for reference and also for comparability if any browsers don’t support CSS3 gradients. We will look at the simplest way to implement this gradient below:
background: -webkit-linear-gradient(top,#375C81 0%,#3E6992 50%,#375C81 100%);
The css style above is simply setting a background property, but instead of using an image or colour, we are defining a “-webkit-linear-gradient”. This is the property for any webkit browsers to render a linear gradient. First we tell it to start from the top with our background colour of #375C81 (at 0%). Then we tell it to use the colour #375C81 at 50% (half way) and then tell it to use the colour #375C81 again at 100%. This gives us our three stage gradient, top middle bottom. This syntax is used for a few vendors, so simply changing the vendor starting tag will allow you to support multiple browsers straight away.
background: -webkit-linear-gradient(top,#375C81 0%,#3E6992 50%,#375C81 100%); background: -moz-linear-gradient(top,#375C81 0%,#3E6992 50%,#375C81 100%); background: -o-linear-gradient(top,#375C81 0%,#3E6992 50%,#375C81 100%); background: -ms-linear-gradient(top,#375C81 0%,#3E6992 50%,#375C81 100%); background: linear-gradient(to bottom,#375C81 0%,#3E6992 50%,#375C81 100%);
There is one more style we need to include to ensure we support all webkit browsers. The syntax for this style is below and is almost the same as the previous examples.
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#375C81),color-stop(50%,#3E6992),color-stop(100%,#375C81));
The main difference with the style above is we specify our starting point and end points before our colours. We specify a liner gradient to start at left top, and end at left bottom, this creates a veritcal gradient. Then we set our colours as before but using the in-built color-stop function.
To scale the gradient, we can change the “50%” value to a higher a lower percentage and based on that value we will see more or less of the top and bottom gradient colours.
Your result should look similar to the example below:
That is how to create a 3 stage gradient in pure CSS3. Another benefit of using CSS, is you can scale your gradient using the height and width of your div with no loss of quality and with no need for another image to be made.
Web Design for Mobiles and Tablets – Viewport Sizes
The web is evolving in many ways and the biggest is the mobile web. Mobiles are now browsing the web faster than every before and websites need to be optimized for smaller screen sizes, 3G connections and HD screens in the palms of people hands. When developing a mobile website, whether it be for an iPhone, iPad, Nexus 7 or a Samsung Tab 2, nearly every device has a different resolution and screen size. This can make it difficult to design a website that works on every device out there.
So, to make a start on creating a suitable website for all mobile devices (mobiles and tablets) it is a good idea to look at what screen sizes and resolutions are out there. Then you can get a good idea of how much space you have to work with, and if you possibly have to create a few different versions of the site to adapt to all devices.
So, below we have a table of all current mobile devices, including tablets, with their name, screen size, resolution and operating system version. This will be updated regularly when new devices are released. Use the search function to search for a specific phone or sort the columns by clicking them to find minimum and maximum values.
Beginners Guide to Razor Syntax in MVC
MVC (Model View Controller) is becoming more and more in website development due to its scalable and adaptable architecture. One exciting feature in MVC is the View part. Most developers choose to have their front-end views written in Razor. Razor is a mixtuce of C# and HTML, hence the file extensions, cshtml. Razor takes a lot of fuss and hassle out of front-end development compared to Web Forms, as there were two separate files in web forms, one for HTML and one for Code behind. Web Forms also added a lot of un-needed and messy code which commonly made web pages in-accessible and large. Luckily, MVC and Razor solve all of these problems.
Lets look at what Razor can actually do and when it is used. Razor is used in the View part of MVC applications. It can parse HTML as well as simple C# like code. This enables the front end to simplify things like, looping through results, performing if statements and running functions. Lets look at the basic syntax of Razor.
Currently Running SQL Processes
Ever wanted to know exactly what queries were running on your database server. The query below ill show you exactly what is running at the time of the query been ran. There will be a lot of queries where the status is marked as sleeping, these can be ignored, you will mainly be interested in the ones that are running.
This query will also give you statistics such as how many reads the query has made so far, how long it has been running for, if it is been blocked, who has performed the query and much more.
Query to see what is running on SQL Server
SELECT SPID = er.session_id ,STATUS = ses.STATUS ,[Login] = ses.login_name ,Host = ses.host_name ,BlkBy = er.blocking_session_id ,DBName = DB_Name(er.database_id) ,CommandType = er.command ,SQLStatement = st.text ,ObjectName = OBJECT_NAME(st.objectid) ,ElapsedMS = er.total_elapsed_time ,CPUTime = er.cpu_time ,IOReads = er.logical_reads + er.reads ,IOWrites = er.writes ,LastWaitType = er.last_wait_type ,StartTime = er.start_time ,Protocol = con.net_transport ,ConnectionWrites = con.num_writes ,ConnectionReads = con.num_reads ,ClientAddress = con.client_net_address ,Authentication = con.auth_scheme FROM sys.dm_exec_requests er OUTER APPLY sys.dm_exec_sql_text(er.sql_handle) st LEFT JOIN sys.dm_exec_sessions ses ON ses.session_id = er.session_id LEFT JOIN sys.dm_exec_connections con ON con.session_id = ses.session_id
Removing Duplicates in SQL
SQL Server’s design does not lend itself very well to duplicate records in the same table. That said, you shouldn’t have any duplicates in your table, this is a waste of space and resources, you only need one. Duplicates sometimes can’t be helped as they can come from third party suppliers or coding errors in imports and updates. But we don’t want them, so lets look at how we can get rid of them.
Deleting Duplicate Rows
First of all, you need to decide on whether you want to keep both records and mark one as a duplicate or if you want to delete on of the records completely. I would suggest deleting it completely, as if it is completely the same, it doesn’t matter if you have two or one. If you want to delete the duplicate row, then that is the easiest route to take. First start by making a temporary table with all the columns of your real table you want to remove duplicates on. For example:
DECLARE @tempTable TABLE (ProductName VARCHAR(80), ProductPrice SMALLINT, Description VARCHAR(MAX));
PHP/MySQL Class
MySQL is the most commonly used database engine for PHP applications. this is mainly because PHP comes pre-bundled with all the MySQL functions you need to start accessing data easily. But, these functions can be very limited, and having a dedicated class to manage all your PHP data access is brilliant to have. So in this tutorial we will be creating a simple but powerful PHP/MySQL class which you can use in any of your applications.
First of all, lets create a folder and file structure which is easy to maintain. First create a folder called “lib” if you don’t already have one. Next, inside that folder create a file called class.mysql.php.
Now open the new file we just created. Firstly, start by putting your php tags. Then we can create a new class called “MySQL”.
< ?php class MySQL { } ?>
Next we need to set some variables in our class. These will hold some essential info such as query count, execution times, debugging information and and errors that occur in our class. We will be creating x variables. $queryCount, $queryErrors, $queriesExecuted. Added to our class, you should have the following.
Read more
Optimizing SQL Indexes
Using Indexes Properly
SQL Server can be an extremely fast and scalable database engine when it is used correctly. Using SQL Server correctly requires careful forward planning and a good understanding of the indexing system. Good indexes can increase SQL performance 10 fold. So getting index structure right is very important.
Indexes are brilliant at well, indexing large amounts of data for quick access when needed. But indexes become pretty much useless with text and large strings. Data types such as int, smallint, tinyint, char and bit are perfect types to be using in indexes, as these are well optimized and are easily searched. Where as varchars and text columns should never be included in indexes, as the text itself can be scanned by an index to get its values and row identifiers.
Re-Usable WebAPI Request Wrapper
Web API is a brilliant new technology in MVC4 which allows easy creation of web services using the MVC architecture. The simplicity of the Web APIs make them perfect for small or large scale projects. When combined with mock repositories, multiple repositories, redudant suppliers of information and good coding practice, they are very easily maintained and allow you to separate your business logic from your front end.
When you use Web APIs, the code that produces the object you require is completely separate from your front end solution. So we need to communicate using HTTP to request our information and receive a response. One way of doing this would be to make a function which calls our WebAPI and returns the object. But if you are clever with how you make your function, you can re-use it for any object and any Web API call. So here we will make a Re-Usable WebAPI Request wrapper which we can use to return any object and call any API.
Read more