FacebookTwitter

Javascript Array Push

By on Nov 2, 2014 in Interesting, JavaScript

Pushing elements into an array in Javascript Javascript Array Push push() method appends a new item to the last of an array. This is very useful, it allows you to add elements to an array fast an easy, something that you will find yourself doing a lot in javascript web programming. Javascript arrays are indexed at 0, with the last element on the array having an index one less than the length of the array. So if you had three elements on one array and wanted to access the second element you will have to reference it by its index, equal to its position minus one, [2-1]=1. ?View Code JAVASCRIPT1 2 3 4 var arr = ['item one', 'item two', 'item three']; console.log(arr[0]); // prints 'item one' console.log(arr[1]); // prints 'item two' console.log(arr[arr.length - 1]); // prints 'item three' In essence, array push() as mentioned above appends an element to the end of the array, so you can picture it like this: ?View Code JAVASCRIPT1 this[this.length] = element; Javascript Array Push VS Reference by Index However, it appears to actually be less efficient that what is represented above. According to ¬†Javascript Style Guide, you should always use index when possible as they will outperform array push. In an experiment performed by Steven Hall, Steven proved google’s guidelines to be accurate, as his results showed that using index was after all was faster than using javascript array push method. However, this experiment was performed about 4 years ago, when browsers...

Redirect Page Using PHP

By on Oct 31, 2014 in Interesting, PHP

PHP Page Redirect Using The Header Function As a webmaster you have most likely come across a few redirects. Sometimes you need to simply redirect to another page, rather than changing links, which could be painful if you have too many. Fortunately redirects a fairly simple. And using PHP you can redirect to anywhere very easy. There are many ways to achieve a redirect. I will discuss the one that I always use in PHP, the header function. This method is considered to be the fastest and most reliable way to achieve a page redirect. To use this PHP page redirect method is very easy, all you will need to do is point to the new location (the redirect) inside the header function. Take a look a the code sample bellow: ?View Code PHP1 2 3 /* Redirect browser */ header("Location: http://www.webtricksandtreats.com"); exit(); It is always good practice to include exit() after to prevent any code that follows from being executed. Also, it is very important that the is nothing above the PHP header function that will be doing the redirect. There should not be any output abve it whatsoever, else it is very likely to fail. This is a common mistake to have empty spaces or lines above the header function. This will give you endless headaches, as you will try to figure out why a simple PHP page redirect is not working as it should, not taking into consideration an empty line above it. In addition, this...

CSS Button Style

By on Oct 5, 2014 in Beginners, CSS

Styling Buttons with CSS Everyone needs buttons on their site. Buttons to submit a form, buttons to redirect to another page, buttons to open up widgets. Anyways you get the point. The challenge is that by default HTML buttons look very dull. That is why you must style your buttons using CSS to make them more appealing to your visitors. CSS button styling is not that complicated, but it could be challenging if your CSS knowledge is limited. Therefore, I’ve decided put together this simple tutorial to help you understand CSS Button Style. I will attempt to style a button steps by steps and then I will give you a bounce of different buttons styles from which you can pick. CSS Button Style Breakdown There are many ways you can get a button: <button>Click me!</button> <input type="submit">Click me!</button> <a href="#">Click me!</a> For this example I will be sticking with the button tag. This is good because you can use it to submit a form without having to rely on javascript, or you can also use it with javascript an do as you which by preventing default. Nevertheless, I will make classes for CSS Button Styles instead of directly affecting the button tag. The reason for this is that if you which to use something else than button, like a tag or input tag you can, all you have to do is assign the class to them, like this: <a href="#" class="custom-button-style">Click Me!</a> So with no further delay let’s get...

Style HTML Table with CSS

By on Oct 4, 2014 in CSS, HTML

Table Style CSS Tables are an important component of every website. By default they provide an excellent way of representing tabular data, but lack the looks. If you want to make your tables come alive with user friendly designs you are going to need some CSS. Cascade Style Sheet or CSS can improve the looks of any table by a lot. Without any styles, tables are very dull. Add a little bit of CSS an you have an attractive display of tabular data that would make it easier to read and understand for your visitors. Plain HTML table without CSS vs. Table with CSS without styles with styles Take a look at the first table on the left. As you can see it does not look very appealing. Sure you can see all the content perfectly and it might even make sense, but I think we can agree that the looks could be improved to make it more appealing and capture visitors attention. In contrast, look at the table right under, it has some simple styling and it looks much more appealing to the eye. No doubt that a little CSS can make a big different when it comes to tables. Styling a table with css is a must. Too much styling does not help either Unfortunately, many people are confused when it comes to styling their tables. As a result, the styles applied are not very effective and instead of being appealing sometimes can be repealing. That is...

WordPress Image Hover Effect Plugin

By on Sep 13, 2014 in CSS, HTML, WordPress

Free WordPress Image Hover Effect Plugin Rollover Images are a very nice gadget for your site and that is because they are a great way to capture visitors’s attention by interacting with them. You have probably come across them while visiting some website due to their increased popularity. If you don’t know what a rollover image is let me show you right bellow: What are Rollover Images Basically it is an image that when you put your mouse over it (rollover) it changes. The change could be in color, size, opacity or a whole new different image. See image bellow Now you can see why this is such an important and cool feature for your site. It allows you to capture your visitors attention by interacting with them (hovering over the image) in a way that is not intrusive or annoying. Rollover Images are cool and all, but by default they don’t offer much content. So if you really want to put then to use you are going to have to take it to the next level by adding some text content perhaps. This will allow you to display promotions, new deals, special event etc. in a way that will catch your visitor attention and won’t go unnoticed. The good news is that if you use WordPress for your website you are in luck. There happens to be a plugin out there that will help you create rollover images and much more very easily, without have to write a...

Disable Specific days jQuery UI Date Picker

By on Sep 5, 2014 in Intermediate, JavaScript, jQuery

Disable Specific days jQuery UI Date Picker So I am currently working on a Calendar Plugin, and I have decided to us the very popular jQuery UI date picker for inputing anointments. jQuery UI date picker is a great tool that comes packed with tons of features. If you ever need a date picker this is definably a really good choice. The Challenge As I was working on this side project of mine, I encountered a challenge: I needed to disable specific days in jQuery UI date picker. Ideally, jQuery UI date picker will be use on my project for inputing appointments as I mentioned, and therefore it makes sense for it to only have the available days enabled. So I needed a way to disable just some specific dates in the date picker. I envisioned as passing an array with specific dates to be disabled as well as specific days (8/25/2014, 9/02/2014, etc…). This way you could disable specific dates such as national holidays and also specific days such as weekends. I was able to find some guidance on the web at StackOverflow which I used to work around this problem and create a solution. The Solution Disable Specific days jQuery UI Date Picker ?View Code JAVASCRIPT1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 /** Days to be disabled as an array */ var disabledSpecificDays = ["9-21-2014", "9-24-2014", "9-25-2014", "10-01-2014"];  ...

Export Array to CSV – PHP

By on Aug 29, 2014 in PHP

Export to CSV – PHP CSV (comma-separated values) is the most widely supported format for transferring tabular data. Exporting data in CSV format is very common in web applications. This simple example will help you get started with CSV and PHP. The main goal is to create a simple way to export data from your website or web application into a CSV that can be downloaded by the user. The Code ?View Code PHP1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 <?php function convert_to_csv($input_array, $output_file_name, $delimiter) { /** open raw memory as file, no need for temp files, be careful not to run out of memory thought */ $f = fopen('php://memory', 'w'); /** loop through array */ foreach ($input_array as $line) { /** default php csv handler **/ fputcsv($f, $line, $delimiter); } /** rewrind the "file" with the csv lines **/ fseek($f, 0); /** modify header to be downloadable csv file **/ header('Content-Type: application/csv'); header('Content-Disposition: attachement; filename="' . $output_file_name . '";'); /** Send file to browser for download */ fpassthru($f); } /** Array to convert to csv */ $array_to_csv = Array( Array(12566, 'Enmanuel', 'Corvo' ), Array(56544, 'John', 'Doe' ), Array(78550, 'Mark', 'Smith' ) ); convert_to_csv($array_to_csv, 'report.csv', ','); The Explanation [show_resp_ad] The function convert_to_csv($input_array, $output_file_name, $delimiter) export to csv by taking in a PHP Array ($input_array) as its first parameters and converts it into...

How to Make a Phone Call from your Computer – Getting started with Twilio Voice

By on Aug 14, 2014 in Intermediate, PHP

As you might have noticed from many of my previous posts, I am a big fan of Twilio. The reason is because it is really easy to use, its very reliable, and it is also cheap. There are a ton of cool things you can do with Twilio, from Sending SMS to Receiving and Dialing calls. This simple tutorial will show you how easy it is to use Twilio to place outbound calls. Placing outbound calls using Twilio There are two ways you can dial calls with Twilio. One way is using their Rest API. The other way is using TwiML. With TwiML you don’t have to rely on the Rest API at all. You don’t need to include SDKs, you can do this in a few lines of code in a single file. The only catch to this is that you can only use this method (TwiML) with calls that are already in progress, you cannot initiate a new call leg with TwiML. As opposed to the Rest API, which allow you to initiate call legs. TwiML are meant to control the flow of a call that has already been initiated without having to make requests to the Rest API which could take long sometimes, affecting the overall efficiency of your application. Start dialing out Lets go ahead and create a directory where we will be placing the code to dial outbound calls “/twilio-voice-demo”. The next step is to include the Twilio SDK in this directory so we...