Is jQuery Making Us Forget About JavaScript?

6 Replies

The prevalence of jQuery on websites is massive. It is strange to not see some form of jQuery or other library on a website. I do have one question for web developers out there, are we forgetting how to use vanilla JavaScript in the process of letting jQuery take its place? This is not to say that we have forgotten how to code JavaScript, but rather that when we could have used pure JavaScript, we instead used jQuery.

Recently, I took on the task of removing jQuery from my own website and replacing it with vanilla JavaScript. Can’t be that hard right? It wasn’t quite as easy as I thought. This helped me realize that maybe I have become a little too comfortable with letting jQuery do everything for me, even when I may not have needed it. For a modern site that doesn’t have to provide legacy browser support, using pure JavaScript is actually less of a task than you would think. There are plenty of native functions that are very similar to functions in jQuery. If you are looking to support legacy browsers, then using jQuery makes sense because it makes cross-browser support a breeze (AJAX requests anyone?).

Continue reading →

Image Sprites VS Web Icon Fonts

5 Replies

There are a bunch of ways to increase the performance of your website. Many today are using image sprites and/or icon fonts. They help add a visual flair to your website, but also help decrease load times. This is all great, but you shouldn’t just jump into using either of these solutions without first knowing what their advantages and disadvantages are.

Image Sprites

Google’s image sprite

Continue reading →

Speed Up Your Mobile Website

2 Replies

Performance is important on all sites, but on a mobile device, it is even more important. They have slower connections and less processing power than your computer or laptop. This already means a longer wait to see and interact with the content of a website. To further my point on web performance, check out this article on how it could affect your bottom line. Below I go through a few methods to speed up your mobile site and cut off some time from loading. Before you go ahead with any of these methods, check out your current page load time at pingdom.

Just note that these methods are not all specific to mobile, but can be used for your full website as well as the mobile version. Continue reading →

Responsive Image Slider with jQuery and CSS Part 2

4 Replies

Check out Part 1 to see how I created the slider without a jQuery plugin.

In the first part we created a responsive image slider with jQuery and CSS. Now we will take that image slider and create a jQuery plugin out of it. I will cover the basics of making the plugin, but if you want to get a deeper background, head to the Plugins/Authoring section of the jQuery.com site. The plugin will do basically the same thing as the previous tutorial, but it will allow you to have more reusable code that is easier to extend. There is also the nice feature of passing in options that are easily changeable for users.

You can view the updated version of this slider here or download the source code. One extra feature to mention of the plugin is that you can now hover over it and it will pause on the current slide. This will stop the slider from transitioning when a user may want to interact with it.

Continue reading →

Responsive Image Slider with jQuery and CSS Part 1

Leave a reply

Edit: This is now a two part series. The first covers creating a slider with jQuery and the second creates the slider with a jQuery plugin. Check out Part 2.

Creating an image slider with jQuery can be quite challenging to newcomers, but it can help develop new skills that you can use elsewhere. There are a number of reasons to create your own slider and not rely on a third party script. Some sliders come with a lot of overhead and have a lot of unneeded code that you will never use. Creating your own can also give you a sense of accomplishment that you would never get using a third party slider script. I will take you through a step by step guide on how to create your own simple responsive slider. This will be a very lightweight slider that has minimal code.

Check out the demo before heading into the code. Download the source code.

Continue reading →

Five Helpful JavaScript Resources

Leave a reply

JavaScript frameworks and libraries are becoming better and more abundant with the introduction of HTML5 and CSS3 a few years ago. There are so many to choose from that it is hard to keep track of the good ones. Below I am going to go through a few that have stuck out to me as being amazingly helpful in development. These libraries can significantly cut development time by taking repetitive tasks and making them easy. Some can be learned in a few hours, while others will take a few days to learn. But in the long run, you will thank yourself for using these.

Continue reading →

Five Ways to Secure Your PHP Application

1 Reply

With the huge growth of the internet, hacking has become a real problem. While PHP is a powerful language, it has a few security vulnerabilities that hackers like to expose. This can be avoided by using different methods to make sure every hole is covered in your application. A lot of simple things can be done to avoid being hacked, but sometimes it is hard to catch them all. Be especially aware when using third-party plugins or scripts, as they may introduce security vulnerabilities that you may not know about. A good way to avoid that is to have the latest versions of those scripts.

Let’s get right into the list of 5 ways to secure your PHP application.

1. Escaping Input

This is a given and if you aren’t knowledgeable about this, now is the time to start. Even though this is simple, I believe it is worth revisiting for any programmer. mysql_real_escape_string() should be used any time you’re using variables from the user to query a MySQL database. Hackers can easily add an apostrophe and semi-colon to input (which would leave all preceding MySQL code as a comment) on the client side, which then gets ran on the server-side. One apostrophe and then a drop table could reap havoc on your database.

Here is a quick example.

//input of "'; DROP table WHERE this ='"
$sql = "SELECT this FROM that WHERE this = '" . $_POST["input"] . "'";
//statement would look like this without cleansing
//"SELECT THIS FROM THAT WHERE THIS = ''; DROP table WHERE this =''"
//clean input before inserting
$sql = "SELECT this FROM that WHERE this = '" . mysql_real_escape_string($_POST["input"]) . "'";
//statement would look like this WITH cleansing
//"SELECT this FROM that WHERE this = '\'; DROP table WHERE this ='\'"

//this sql query will search where "this" is equal to "\'; DROP table WHERE this ='\"
//which obviously will not work too well

//input of "'; DROP table WHERE this ='"

$sql = "SELECT this FROM that WHERE this = '" . $_POST["input"] . "'";

//statement would look like this without cleansing

//"SELECT THIS FROM THAT WHERE THIS = ''; DROP table WHERE this =''"

//clean input before inserting

$sql = "SELECT this FROM that WHERE this = '" . mysql_real_escape_string($_POST["input"]) . "'";

//statement would look like this WITH cleansing

//"SELECT this FROM that WHERE this = '\'; DROP table WHERE this ='\'"

//this sql query will search where "this" is equal to "\'; DROP table WHERE this ='\"

//which obviously will not work too well

Continue reading →

Check A String For Unwanted Words With PHP

Leave a reply

Most of us have come across a time when we have to clean up user input, or at least check if isn’t appropriate. It is always nice to have a few functions that you can reuse on future projects. Recently, I have used the one below quite a bit, so I thought I would share.

This is a nice snippet of PHP code that will help you check for unwanted words contained in a string.

//check for unwanted words
function checkWords($input) {
//declare array with list of words that you want to check for
$unwanted_words = array('admin','bad','word','no','like');
//loop through the array and search through the string
foreach ($unwanted_words as $value) {
//you must use !== to check if the result from strpos() is of the right type
if(strpos($input, $value) !== false)
return false;
}
return true;
}

//check for unwanted words

function checkWords($input) {

//declare array with list of words that you want to check for

$unwanted_words = array('admin','bad','word','no','like');

//loop through the array and search through the string

foreach ($unwanted_words as $value) {

//you must use !== to check if the result from strpos() is of the right type

if(strpos($input, $value) !== false)

return false;

}

return true;

}

This function works by looping through each of the provided words and using the strpos() function to check if an unwanted word is contained within. The strpos() PHP function returns either the position of the string (if found) or a boolean value of false if not found. More information can be found on the php.net site. If a string contains any of the words that you have specified, it will return false. This can come in handy when you want to make sure people are on their best behavior. Below is a quick example of how to put it to use.

//call function and pass in string
if(checkWords("I am a bad man")) {
//string is ok
}
else {
//string contains unwanted words
}
//This string will not pass since it contains "bad"

//call function and pass in string

if(checkWords("I am a bad man")) {

//string is ok

}

else {

//string contains unwanted words

}

//This string will not pass since it contains "bad"

If you have any questions, feel free to leave them below.

Converting String URLs to Clickable Links with Javascript

Leave a reply

Recently I came across a problem, I needed to convert a plain text string, that could possibly have a URL in it, to a string with clickable URLs. This is possible with the right JavaScript code. You could always do this on the server-side with PHP or another language, but I didn’t want to throw more text into my database. So I searched and pieced together some code to take a plain text string and covert it to a clickable link with JavaScript. I created a simple function that takes a parameter of a string and searches for a valid URL (with a regular expression) within it.

script.js

function convertToLinks(text) {
var replaceText, replacePattern1;

//URLs starting with http://, https://
replacePattern1 = /(\b(https?):\/\/[-A-Z0-9+&amp;@#\/%?=~_|!:,.;]*[-A-Z0-9+&amp;@#\/%=~_|])/ig;
replacedText = text.replace(replacePattern1, '<a class="colored-link-1" title="$1" href="$1" target="_blank">$1</a>');

//URLs starting with "www."
replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
replacedText = replacedText.replace(replacePattern2, '$1<a class="colored-link-1" href="http://$2" target="_blank">$2</a>');

//returns the text result

return replacedText;
}

function convertToLinks(text) {

var replaceText, replacePattern1;

//URLs starting with http://, https://

replacePattern1 = /(\b(https?):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;

replacedText = text.replace(replacePattern1, '<a class="colored-link-1" title="$1" href="$1" target="_blank">$1</a>');

//URLs starting with "www."

replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;

replacedText = replacedText.replace(replacePattern2, '$1<a class="colored-link-1" href="http://$2" target="_blank">$2</a>');

//returns the text result

return replacedText;

}

All you have to do is call this function with a string as the parameter and it will return the new string with links. If you wanted to search for more links, it would be as easy as creating another regular expression and parsing through the text again before returning it.

Here is the code you could use to call this function:

var textWithURL = "Here is a text block with a normal URL http://www.grumbleonline.com";
textWithURL = convertToLinks(textWithURL);
alert(textWithURL);

//output would be:
//Here is a text block with a normal URL <a href="http://www.grumbleonline.com">http://www.grumbleonline.com</a>

var textWithURL = "Here is a text block with a normal URL http://www.grumbleonline.com";

textWithURL = convertToLinks(textWithURL);

alert(textWithURL);

//output would be:

//Here is a text block with a normal URL <a href="http://www.grumbleonline.com">http://www.grumbleonline.com</a>

Here is a more complex case were http:// is left out:

var textWithURL = "Here is a text block with a short URL www.grumbleonline.com";
textWithURL = convertToLinks(textWithURL);
alert(textWithURL);

//output would be:
//Here is a text block with a normal URL <a href="http://www.grumbleonline.com">www.grumbleonline.com</a>

var textWithURL = "Here is a text block with a short URL www.grumbleonline.com";

textWithURL = convertToLinks(textWithURL);

alert(textWithURL);

//output would be:

//Here is a text block with a normal URL <a href="http://www.grumbleonline.com">www.grumbleonline.com</a>

There are of course the cases where someone could put a sub domain, this would not be caught be these regular expressions.

I hope this helped, if you have any questions or comments feel free to leave them below.

Button Class For Pure ActionScript Projects

Leave a reply

When working in any language it pays to have a few classes that you can use in multiple projects. I cannot count the number of times I have searched the interwebs for a well made button class in ActionScript 3, but sometimes you just have to make it yourself. If you are looking for a button class for your next project I will be happy to share my class with you and show you how to use it.

There are quite a few advantages to have your classes built in pure ActionScript. The size of our projects is ultimately what lead my team to switch Mad Components and the pure ActionScript approach. You can take a project built-in Flash Builder and MXML from 6MB to 600KB without even breaking a sweat (maybe a mental sweat). To save you more lecturing on the merits of the pure AS approach, I will get on to my UIButton class.

It is quite simple to implement the button:

//this being the sprite you would like the button to be added to
var button:UIButtonMobile = new UIButtonMobile(this, "Button");
button.x = 20;
button.y = 20;

//this being the sprite you would like the button to be added to

var button:UIButtonMobile = new UIButtonMobile(this, "Button");

button.x = 20;

button.y = 20;

Simple button class

Continue reading →

Jon Tetzlaff's Blog

Come here to find tutorials and tips about the web, jQuery, PHP, CSS3, and much more.

Is jQuery Making Us Forget About JavaScript?

Image Sprites VS Web Icon Fonts

Image Sprites

Speed Up Your Mobile Website

Responsive Image Slider with jQuery and CSS Part 2

Responsive Image Slider with jQuery and CSS Part 1

Five Helpful JavaScript Resources

Five Ways to Secure Your PHP Application

1. Escaping Input

Check A String For Unwanted Words With PHP

Converting String URLs to Clickable Links with Javascript

Button Class For Pure ActionScript Projects

Share this:

Image Sprites

Share this:

Share this:

Share this:

Share this:

Share this:

1. Escaping Input

Share this:

Share this:

Share this:

Share this: