Twitter accounts every web developer should follow

Twitter is not just for following celebrities and sharing what’s on your mind. There are some very good use cases for Twitter and one of that is for following awesome people on the field of your interest. In this post I’m going to share a list of the people and entities that you should follow on twitter as a web developer.

 

Jeffrey Way

The editor of the popular web development blog Nettuts+. I wouldn’t give links to where you can find this awesome guy because everything is already in his site. That includes his youtube account, twitter, google plus, interviews, books, and tutorials.

 

Kevin Liew

Curator of queness web design and development blog.

 

Chris Coyier

Curator of css-tricks and host on Shoptalkshow a podcast on front end web design, development and UX.

 

Peter Cooper

The awesome guy behind JavaScript Weekly, HTML5 Weekly, Ruby Weekly, and Dart Weekly. Very very useful I hope he continues what he’s doing for free.

 

Rebecca Murphey

She has written a book on the fundamentals of jQuery. You can also follow her on GitHub or read her blog. And yes, yayQuery.

 

David Walsh

MooTools & jQuery Consultant, MooTools Core Developer, Javascript Fanatic, CSS Tinkerer, PHP Hacker, and web lover. He usually post about HTML5, CSS3, and JavaScript. You can also read his blog.

 

Paul Andrew

The curator of Speckyboy Web Design blog. Most of his post are link to articles from the blog but he also post links to useful articles on web design.

 

Elijah Manor

Well-known on twitter for his awesome link sharing abilities. He posts very useful links on JavaScript, HTML5, CoffeeScript, ASP.Net and jQuery.

 

Echo JS

A social news site dedicated to JavaScript and related topics. You will mostly see JavaScript projects hosted on Github, Node.js, WebGL, HTML5, and links to some useful articles on JavaScript. Very useful if you’re into front-end web development.

 

Paul Irish

Not really very active on twitter but he usually post some useful updates or some talks on twitter. I suggest that you follow him on Github if you want to see some of the projects that he’s involved with.

 

JS Daily

JavaScript awesomeness delivered straight to your twitter feed daily.

 

Christian Heilmann

A perfect example of an account which doesn’t concentrate on only one stuff. His twitter can be compared to his diary. He occasionally post some awesome stuff on HTML5, JavaScript Performance. So if you only want useful stuff just go to his blog or visit hacks.mozilla.org.

 

Kendo UI

Kendo UI is a HTML5, jQuery-based framework for building modern HTML apps. But they also have a blog and a twitter account which makes it very interesting since they’re not only blogging about their product but also some useful JavaScript stuff. And while you’re at it why not try their framework, I assure that you would say that it’s awesome.

 

.Net Magazine

No this isn’t actually about Microsoft .Net magazine is the world’s best-selling magazine for web designers and developers not the framework from Microsoft.

 

Badass JavaScript

Occasional JavaScript goodness. You can also check out their blog.

 

Smashing Magazine

If I had to choose just one twitter account this is the one that I would follow. It’s almost like they have access to every awesome web development stuff on the internet and they post it on their twitter. In case you don’t know Smashing Magazine is actually a web development and design blog founded on 2006 they also have written a ton of books. I can’t imagine how much they’ve done for the web development community, just their blog alone contains an enormous amount of useful stuff.

 

Alessandro Maruccia

Regularly posts links on jQuery, JavaScript, responsive design. I also found some PHP, HTML5, and css stuff on his feed. Very useful.

 

John Resig

The creator of jQuery. He’s not really very active on twitter but you can follow him on GitHub if you want to see some action.

 

Remy Sharp

He’s claiming that he invented sleep patterns, I believe him because he’s awesome.  Yes you can follow him on twitter but you can find useful stuff on his personal blog and a collaboration blog that he created with Rich Clark, Bruce Lawson, Jack Osborne, Mike Robinson and Tom Leadbetter.

 

Conclusion

Knowing what the leaders in the web development industry are up to is very important. It will give you an idea on what you will be doing 2 or 5 years from now and some of the resources that they shared. If you know of any other people that web developers should follow don’t hesitate to share them on the comments.

Rendering files from MySQL Database into the browser

Howdy! I haven’t posted anything on this blog for more than 3 weeks now. I’m really sorry especially to those who are subscribed to this blog via email. I was just too busy with my projects and school that’s why I wasn’t able to post anything new.

Okay enough with my life story. Let’s proceed to the main topic. In this tutorial I’m going to show you how you can read files that are saved on the database and then render it into the browser.

I’m going to make this quick because I’m really super sleepy now.

 

Rendering Images

Rendering images is really simple, you just have to use the traditional image tags in html:

<img src="renderer.php?id=2"/>

But wait, why are we linking to a php file? Good question. Images, audio files, video files, documents are actually stored in the database in a gibberish form. Don’t believe me? Here’s a screenshot taken from Heidi Sql when opening a file that is saved on the database.

image

That is binary data, you cannot really make sense out of it unless you have a brain of a computer.

Okay so what does this renderer.php contain?

As you have seen a few seconds ago we supplied an id on the url and that’ what were going to use as a basis for what were going to fetch from the database. This is actually an approach for the naïve and lazy, I don’t recommend using $_GET and strings from the url as a basis for your database queries. It’s dangerous because people are getting smarter and smarter everyday there’s almost always a security hole on almost every application.

First include the database configuration, then assign the query to a variable called $id then perform the query for fetching the file in the database.

require_once('zenoir_config.php'); //database config $id = $_GET['id']; //don’t do this in real life, for example only $file = $db->get_row("SELECT * FROM tbl_files

WHERE file_id='$id'"); //fetch data

Now we got all the values that we need:

$filename = $file->filename;
$data = $file->file_data; //binary gibberish
$mime = get_mime_type($filename); //mime type of the file

The first two variables are self-explanatory we need the data and the filename. But what is this mime type thingy? If I am to describe it on my own, mime types are like instructions to the browser on what type of data it’s going to render. If the browser can’t render that specific data then the default action taken by the browser is to store it on the local machine or the computer of the user that is accessing the website. Here’s an extensive explanation from Wikipedia about mime types:

MIME

Here’s the code for getting the mime type of a specific file. I actually got this piece of code from someone at php.net in the comments section. Yep! comments section is really a gold mine.

function get_mime_type($filename, $mimePath = 'yeah'){ 
   $fileext = substr(strrchr($filename, '.'), 1); 
   if (empty($fileext)) return (false); 
   $regex = "/^([\w\+\-\.\/]+)\s+(\w+\s)*($fileext\s)/i"; 
   $lines = file("$mimePath/mime.types"); 
   foreach($lines as $line) { 
      if (substr($line, 0, 1) == '#') continue; // skip comments 
      $line = rtrim($line) . " "; 
      if (!preg_match($regex, $line, $matches)) continue; // no match to the extension 
      return ($matches[1]); 
   } 
   return (false); // no match at all 
} 

The function above uses a file called mime.types, which can be found on the following location if you’re on Wamp:

D:\wamp\bin\apache\Apache2.2.17\conf

But if you’re on Xampp it’s in:

C:\xampp\apache\conf

Never mind the Drive letters, its dependent on where you installed the Xampp or Wamp.

In the example I placed the mime.types file on the yeah folder:

image

Oh yes, I still haven’t told the story of this get_mime_types function. What it does is just to get the file extension of the file which is determined from the filename. This isn’t actually an accurate method of determining the true mime type of a file. What if someone naughty changed the extension of a php script to .jpg. The function will actually label the php script as an image and not a script which can do nasty stuff on the server. A good practice for this is when you plan to upload files on the file system of the server be sure to upload the files on a non-web accessible folder so that the naughty guys will not be able to execute it. 

After determining the mime type all you have to do now is to include the header information and then output the actual data.

header('Content-Type: ' . $mime); 
header('Content-Disposition: attachment; filename='.$filename);

echo $data;

In the case of an image this data will be rendered as an ordinary image in the browser such as this one:

image

 

Rendering Other Files

Rendering other file types is still a problem at the time of writing of this article. How I wish the following tags were already existing:

<document src="msword.doc"/> <!—doc files—>
<spreadsheet src="worksheet.xlsx"/> <!—spreadsheets—>
<presentation src="awesome.ppt"/> <!—powerpoint—>
<code src="php.js"/> <!—for rendering source code with highlighting etc.—>

Don’t copy and past those code, those are just my dream. I hope it would be possible to render just about any type of file that makes sense in the browser.

Good news is you can actually store mp3, ogg, mp4, and webm files on the database and render them using either the html5 video or audio tags. But remember that not every browser supports this awesomeness (IE I’m looking at you).

 

Conclusion

That’s it for this tutorial. Rendering image files that are stored in the database is actually easy, but other file types are not.

ChatRo–Instant Messaging Application

I always create tutorials for this blog. This time I want to break the ice and share something else, and I guess I’m going to continue writing these types of post whenever I have a personal project or maybe a formal project if the product owner allows me to write something about it.

In this post I’m going to share about ChatRo, a web application that allows for team collaboration through instant messaging, file sharing, and file management.

 

Login

Everybody knows about this one. No need to trouble you from reading.

image

 

Registration

This is where users invited via email can register. After registering the user will automatically be added into the group as long as the link on the email is the one that is used to get into the application.

image

 

Instant Messaging

This is where users that belong to the same group can interact with each other through a chat box. Documents, pictures, audio and video files can also be shared to the users currently on the session through this form. Any user who are on the current session can end the session, not just the user who created the session. Every user can only participate in one session at a time.

image

Creating a new session is done by clicking on create session link and specifying the group and session name. The group name is an auto-suggest field which fetches all of the groups to which the current user belongs.

image

 

Group Management

This is where users can create new groups or manage existing groups.

image

 

Group Invite

Anyone can be invited into a group via email.

image

Existing members of other groups can also be invited. This is an auto-suggest text field that fetches all the users of the chatRo.

image

The invited user isn’t automatically added to the group. He has to accept or decline the request. Either way, the notification will stay on the home tab until the user decides to decline or accept the invite.

image

New groups can also be created.

image

 

 File Sharing

This can be used to share files to the other members of a session. In the screenshot below I’m uploading an Ebook from Makeuseof.

image

After the file has finished uploading, a message will automatically be created pointing out to the file that has been uploaded.

image

Clicking on the magnifying glass icon will preview the file. As of the time of writing of this article there’s still no preview for the front page of a pdf file, its just a link that the user can click to view the pdf file on the browsers built-in reader. But if there’s no built-in reader, it will just download the file into the local disk.

image

If the uploaded file is images it will be previewed with a download link on top of the image preview.

image

There’s also a preview for excel files.

image

Audio files can also be played as well, brought to you by html5 <audio> tag.

image

Lastly, video files can also be viewed brought to you by html5 <video> tag.

image

Yes it’s good that were able to play mp3, mp4 and other html5 compatible files but this magic still doesn’t work on some browsers. As of the time of writing of this article, I only managed to make it work for Chrome.

 

Archive

Once a session is ended it goes into the archives. This is simply a box where you can view the conversations in previous sessions. It’s only used for viewing previous sessions so there isn’t actually a link for the files that are mentioned in the conversation. These files can be viewed in the files tab.

image

 

Files

There’s also a separate tab for viewing all of the files that were uploaded. This disregards the session to which the file was uploaded. It is simply a box wherein you can search for previously uploaded files of the people that are in your group.

image

 

Conclusion

I guess that’s it, if you want to test, contribute, fork this software then you could visit its GitHub page. All the files that you need are already in there, you could also go through the README file if you want to learn more about this application.

ChatRo

There’s still a lot of bugs and a lot of room for improvement and additional features, I’d really appreciate it if someone could contribute to this project. If you have some questions regarding this project feel free to ask them on the comments section. Thanks for reading!

How to read excel files in php

In this tutorial I’m going to show you how you can use the php library called PHP Excel Reader to read excel files using php. Yes, things like excel readers for php has already been written by smart people in the past so I’m not going to show you how to build an excel reader from scratch. It’s not quite my level yet, I still consider myself a beginner. Anyway, let’s get to the main topic.

 

Requirements

 

Sample Spreadsheet

First you need to have a sample spreadsheet that you could  work on. Just make it simple, preferably a 2-column sheet with a  few data on it.

 

Setup Working Directory

If you haven’t already downloaded the php excel reader library go ahead and download it and then setup your working directory. Also put your sample excel file on that directory for easy access.

 

Modifying the Library

The php excel reader is a pretty old library. You need to open up the excel_reader2.php file and modify line 916. From this:

$this->_ole =& new OLERead();

To this:

$this->_ole = new OLERead();

You’ll get an error that assigning the return value of new by reference is deprecated especially if you’re using PHP Version 5.3 and above.

 

Main Story

Okay so let’s get to the main story. The documentation for this library is actually pretty useful so if you want to do some tinkering then you might as well read the official documentation. Almost all of the methods that I’ll be talking about is based on the documentation and the example that comes with the library. I recommend that you check out the example first before continue reading. If you can’t figure something out or if you want to do something that isn’t mentioned in the documentation then come back here. I cannot promise that I have the answers but I can assure you that I will cover the basic stuff that you may want to know on reading excel files.

php excel reader documentation

The example.php file is a good place to start, go ahead and make a backup of it so that you can safely modify your copy.

First, this line tells us that this file is going to use the php excel reader library:

require_once 'excel_reader2.php';

It then creates a new object of the php excel reader class:

$data = new Spreadsheet_Excel_Reader("Book1.xls");

You need to specify the file name as the argument. If the php file is in the same directory with the excel file that you’re trying to read then the example above is going to work fine.

Lastly, you need to turn off error reporting for notices. Try to remove this line and you’ll see some orange stuff in your page.

error_reporting(E_ALL ^ E_NOTICE);

Now that you’re done importing the needed files in your php file. It’s now time to show you some of the methods that you can use.

  • val() – This method requires 2 arguments and 1 optional argument. The first argument is the row number. The row number starts with the number 1. Row number 1 in most cases is the custom header name(Eg. student name, course, school, etc.) so the starting index for the row number is 2. The second argument is the column name. It is standard in excel (Eg. A, B, C, etc.), this is really useful because we can just put the column names in the php code. The third is the optional argument sheet index.  Sheet is zero-indexed. First sheet is 0, second index is 1 and so on.
$data->val(row_number, column_name, sheet_index);
  • dump() – This method is a beast. What it does is just to dump the whole content of the first sheet if you don’t specify the third argument. The first argument requires a boolean data type, true if you want to output the row numbers(1, 2, 3, etc.) and false if you don’t want it. The second argument is whether to display the column letters, just set it to true if you want it to be displayed. The third argument is the sheet index, by default it’s 0 and you don’t even need to specify it explicitly.
$data->dump(row_numbers, column_letters, sheet_index);
  • rowcount() – This method returns the total number of rows of the sheet.
$data->rowcount();
  • colcount() – This method returns the total number of columns of the sheet.
$data->colcount();

 

Now that you know the methods that you can use, you might as well try to experiment a bit.
Dumping the whole excel sheet is pretty useful but what if you want to do something with the data that’s in it? For that we could use a while loop to loop though all of the data in the current sheet.

First you need to know the total row count. I added 1 because the row is not zero-indexed, if I do not add 1, the loop that we will be creating later is just going to read up to the second to the last record:

$num_row = $data->rowcount() + 1;

Specify the index that were going to start with, as I have said earlier the row count starts with 2.

$index = 2;

Then the table heading, since the first row in our spreadsheet is the header we will just have to use it as the header for our table:

<table>
<tr>    <th><?php echo $data->val(1, 'A'); ?></th>    <th><?php echo $data->val(1, 'B'); ?></th>
</tr>

After that, use a while loop to repeat the table row as long as the index is not equal to the total row count.

<?php while($index != $num_row){ ?>
   //table rows
<?php } ?>

And for the table rows the only thing that’s changing is the index. If you want to do something with the data later on, this is the perfect time to be storing them in an array which you could loop through later on. If you’re going to save them into the database, you can also execute the query here.

<tr>
   <td><?php echo $data->val($index, 'A'); ?></td>
   <td><?php echo $data->val($index, 'B'); ?></td>
</tr>

Finally, increment the index after creating the table row:

$index++;

 

Output

Here’s the sample output. The one on the top is the output for the dump, and the one below is the output for the while loop that we created:

image

 

Conclusion

I guess that’s it for this tutorial. In this tutorial you’ve learned how to use the php excel reader library to read excel files in php. Making use of this library will make life easier for you if you need to do some operations to the data in the excel file like saving them into the database our outputting them in a customized fashion. If you have questions, suggestions for this tutorial, or if there are other details that you think I have missed please feel free to use the comments section below thanks for reading!

Podcasts every Web Developer should listen to

As web developers we need to constantly update ourselves with the latest in our field, and one way to catch up with the latest news in web development and to know what our fellow developers have to share is by listening to their podcasts. In this post I’m going to share to you some of the podcasts that you should be listening to. But before you continue reading, here are some of the similar articles that might also interest you.

 

I can see that you’re still here so let’s get going. Note that this list isn’t ordered by level of podcasts awesomeness, they’re ordered randomly.

 

Herding Code

Herding Code is a podcast hosted by K. Scott Allen, Kevin Dete, Scott Koon, and Jon Galloway. They mostly talk about JavaScript technologies, and some Microsoft web technologies like ASP.Net and Silverlight. They also have a guest developer talk about a specific technology or a book that they have written. This isn’t a weekly podcast though, I’ll call it irregular weekly basing on their archives. Sometimes they do 5 shows in a month, sometimes there’s 3, and sometimes there’s only 2.

image

 

JavaScript Show

A JavaScript news and discussion podcast hosted by Jason Seifer and Peter Cooper. They mainly talk about some of the cool links on JavaScript Frameworks, jQuery plugins, articles, tutorials, and the latest news on JavaScript.

image

 

YayQuery

A JavaScript and jQuery podcast hosted by Paul Irish, Rebecca Murphey, Adam Sontag, and Alex Sexton. Definitely listen to this podcast if you like to laugh while learning. This is one of the podcast that has been discontinued at the time of writing of this article but they still have the site for everyone to visit. Definitely download their shows because it might disappear soon.

image

 

ShopTalkShow

A podcast hosted by Chris Coyier and Dave Rupert. They talk about web design and development,  they also talk with a special guest for every show.

image

 

JavaScript Jabber

This podcast might be only of interest for seasoned JavaScript Developers since most of the topics that they discussed are really intermediate JavaScript stuff, I can tell because I don’t really understand most of the things that they’re talking about since I’m only a beginner in JavaScript. So if you think you’re already a seasoned JavaScript developer then definitely listen to this podcast.

image

 

jQuery Podcast

I consider this one of the best podcasts on JavaScript and jQuery. They had a total of 46 episodes before they decided to stop doing the podcast. In every episode they have an awesome guest JavaScript developer who talks about a particular JavaScript technology, a JavaScript event that they’ are organizing, or the things that they do in their company such as development practices, the tools that they’re using, etc. Definitely listen to this I’ll assure that you’ll learn a lot.

image

 

FaceOff Show

Faceoff is your face-to-face web technology podcast. In this podcast Jade Robbins and Mark Sanborn talk about various aspects of web technology such as web development, social media, and web entrepreneurship. Yes! I just pulled it from their site, but what can I say? All I can say is that this podcast is awesome, check it out if you don’t believe me.

image

 

WebDev Radio

As the name of this podcast suggests, this podcast is all about general web development. If you’re looking for some news, views and issues in the field of web development then this is the podcast that you should be listening to. 

image

 

Deepfriedbytes

image

 

A Minute with Brendan

image

 

Minute with Node.js

image

 

Minute with Mobile

image

 

Minute with CouchDB

image

 

Minute with Riak

image

 

 Expression Engine

image

 

the Changelog

image

 

Conclusion

Podcasts are great to listen to if you’re not in front of your computer but still want to keep yourself updated with what’s latest and what your fellow developers have to share in the field of web development.

Using HTML5 local storage to retain data after closing the browser

In this tutorial I’m going to show you how to use HTML5 local storage.
HTML5 local storage is used to store data on the clients machine and is pretty much the same with jQuery cookies which I previously wrote about.

Remember inputted data using jQuery cookies

If you want to learn more about HTML5 local storage you can read the awesome book by Mark Pilgrim on HTML5.

Local Storage for Web Applications

Now you don’t have to use a jQuery plugin in order to persist data even after closing the browser as long as the browser supports local storage. You can check if your browser supports local storage on the link below.

Local Storage Support

Here are a few blog post about localStorage performance that you might want to read before you try to implement it in your projects. As a summary, localStorage performs better than cookies, localStorage doesn’t have the same storage space for different browsers and lastly, localStorage isn’t fast. If you want to know more of the details then read the blog posts below.

 

Mini Project

So that I won’t end up repeating what has already been written about local storage I decided to hit two birds with one stone by showing you how to build a simple application that uses local storage. In this tutorial were going to build a component of a point of sale system which is the adding of stocks.
We are going to use local storage to retain whatever it is that the user has inputted.
This is useful in cases when there is a power interruption while there is a transaction that is currently in progress. Not having to input the data over again will save the user some time in repeating the transaction all over again.

 

Fetching

Let’s start by fetching all the items from our database. We also need a button for reloading the inputted data into the text fields for adding stocks, clicking this button will fetch the data in the local storage and load it into the text fields. We also need a clear button which will be used to clear the local storage, clicking this button deletes every data that is on the local storage. Finally we need to have a button for committing the changes in the quantity of the products into the database.

<p>
<h3>ADD STOCKS</h3>
</p>
<?php 
$products = $db->get_results("SELECT * FROM products"); 
if(!empty($products)){
?>
<p>
<input type="button" id="btn_refill" value="Local Storage"/>
<input type="button" id="btn_clear" value="Clear"/>
</p>
	<table border="1">
	<tr>
		<th>product</th>
		<th>quantity</th>
		<th>add qty</th>
	</tr>
	<?php foreach($products as $k=>$v){ ?>
	<tr>
		<td><?php echo $v->product_name; ?></td>
		<td data-id="<?php echo $v->product_id; ?>"><?php echo $v->quantity; ?></td>
		<td><input type="text" name="add_qty[]" data-qty="<?php echo $v->quantity; ?>" id="<?php echo $v->product_id; ?>"/></td>
	</tr>
	<?php } ?>
	</table>
	<input type="button" id="btn_addstocks" value="Commit Changes"/>
<?php } ?>

 

Set Item

Next we need to set the items that we are going to save in the local storage every time the text field for entering the additional stocks loses its focus. This means that every time the user makes changes to the additional stocks the local storage also changes.

$('input[type=text]').blur(function(){ var product_id_r = []; //array for storing product id var product_qty_r = []; //array for storing product qty var old_qty_r = []; //array for storing addl qty var index = 0;

 

//loop through each additional qty $('input[type=text]').each(function(){ if($.trim($(this).val()) != ''){ var qty = $(this).attr('data-qty'); var add_qty = $.trim($(this).val()); var new_qty = parseInt(qty) + parseInt(add_qty); product_id_r[index] = $.trim($(this).attr('id')); old_qty_r[index] = add_qty; product_qty_r[index] = new_qty; index++; } }); //save the products ids, additional qty, and

//updated qty into the local storage localStorage['product_id'] = product_id_r; localStorage['old_qty'] = old_qty_r; localStorage['product_qty'] = product_qty_r; });

As you can see from the code above, we are actually storing the product id, additional quantities and updated quantities(quantity before the update + additional quantity) in a separate array and then assign that array into a local storage item. This is done by looping through all the text fields for additional quantity that is not empty.

 

Refill

Next we write the code for refilling the text fields for additional quantity. First we check if the product_id item on the local storage exists. The double exclamation point forces the result to boolean data type so if the product_id item exist then the has_local variable will have a value of true if not then it will have false stored in it. Remember that local storage can only store key-value pairs which means that it can only store data of type string, but that’s not a reason not to use it since we can use the split() function in JavaScript to do the dirty work for us. Earlier we assigned an array to a local storage item, which means that our local storage item has stored a string similar to the one below.

"2,1,4,24,2,6,4,5,5"

We just need to use the split() function and supply comma(,) as the separator and voila! instant array that we could loop through. If you have read the code for fetching the items you might have noticed that I used the product id as the id attribute for each of the items we will just have to use that id to pinpoint where we are going to place the additional quantity. For that we will need to loop through all the product ids, note that the product ids that was stored in our local storage are the product ids of items that has additional quantities, the rest that are untouched is not included. To further elaborate what I just said here’s a screenshot. What I have been talking about is that only the product id for guava and apple will be stored in the local storage since they are the only ones that has additional quantities.

image

Here’s the code.

$('#btn_refill').click(function(){
	var has_local = !!localStorage['product_id'];
	if(has_local == true){
		var product_id_r = localStorage['product_id'].split(',');
		var product_qty_r = localStorage['old_qty'].split(',');
			
		for(var x in product_id_r){
			var qty = product_qty_r[x];
			$('#'+product_id_r[x]).val(qty);
		}
	}else{
		alert('No Data present on local Storage');
	}
});

 

Clearing

If you want to clear the local storage you can do so by calling the clear() method for local storage. Note that this will delete all the data on the local storage. I don’t know of a way to clear individual items so if you know then please share it in the comments.

$('#btn_clear').click(function(){
	$('input[type=text]').val('');
	localStorage.clear();
});

 

Add Stocks – Front-End

Next is the code for adding stocks. This is similar to what we did when filling the text fields with data that is on the local storage. But since jQuery is awesome we don’t have to loop through all the product ids and call the add_stocks.php a million times. All we have to do is to pass in an array to add_stocks.php and add_stocks.php will take care of the looping for us.
We supplied an array so why do I still see a for loop in the code below? Good question!, the for loop is actually used for updating the quantity that is being shown to the user and we did all that without refreshing the page.

$('#btn_addstocks').click(function(){ var product_id_r = localStorage['product_id'].split(','); var product_qty_r = localStorage['product_qty'].split(','); $.post('add_stocks.php',

{'id_r' : product_id_r, 'qty_r' : product_qty_r}, function(){

//update the quantity on the table

//without page refresh for(var x in product_id_r){ var product_id = product_id_r[x]; var product_qty = product_qty_r[x]; $("td[data-id="+ product_id +"]").text(product_qty); } } ); $('input[type=text]').val(''); localStorage.clear(); });

 

Add Stocks – Back-End

Here’s the code for updating the stocks in the database.

$product_id_r = $_POST['id_r']; //product id array $product_qty_r = $_POST['qty_r'];//new product qty array //loop through all the update product ids foreach($product_id_r as $k=>$v){ $product_id = clean($v); $product_qty = clean($product_qty_r[$k]); $db->query("UPDATE products SET quantity='$product_qty'

WHERE product_id='$product_id'"); } //escape quotes and other malicious characters function clean($str){ return mysql_real_escape_string($str); }

 

Conclusion

That’s it! HTML5 Local Storage is actually pretty useful for transactional systems, as I have said earlier, repeating a particular transaction if there is a sudden power interruption is not that efficient especially if the user is catering to hundreds of people in a day. Being able to restore everything that has been inputted will save some time in the part of the user.

Email Newsletters every web developer should subscribe to

Web developers all need to keep up with what’s latest in their field. And email newsletters is one way to keep up with the latest news and technologies in the field of web design and development. Here are some of the email newsletters that you should subscribe to.

 

JavaScript Weekly

First on the list is JavaScript Weekly. A free, once-weekly email round-up of JavaScript news and articles. Most of the stuff that they’re linking to are cool and awesome. You can checkout their archive and see for yourself.

image

 

HTML5 Weekly

This weekly newsletter is also from the same guy that brought us JavaScript Weekly, Peter Cooper. As the name suggests HTML5 Weekly is a newsletter linking to the latest news, articles, and other cool and new stuff on html5.

image

 

Ruby Weekly

Yep, if you still haven’t notice stuff from Cooper Press is dominating this post. For all the Rubyist out there this is one newsletter you shouldn’t miss. Keeping up with the latest awesome stuff in Ruby has never been much easier.

image

 

Dart Weekly

If you want to keep up with Google’s new Dart Programming Language, essentially designed to replace JavaScript? Then subscribing to this newsletter is the perfect way to do so.

image

 

Coder Weekly

This newsletter is not specifically intended for Web Developers and Designers. As the name suggests, this newsletter is for programmers. The stuff that they link to are not necessarily the latest and greatest stuff in programming, they mostly link to programming articles.

image

 

JS Mag Blog

Yup I just said in the title that this article is supposed to be newsletters only. But what is a blog doing here? Well its awesome JavaScript stuff so I decided to include it. Plus its also a weekly round-up, its like a newsletter without the email.

image

 

StatusCode

Status Code is a language agnostic roundup of the latest ideas, releases, trends, events and must-read articles from the field of software development.

image

 

Web Design Weekly

Web Design Weekly is essentially a mix of HTML5 Weekly and JavaScript Weekly. It mostly links to CSS3, HTML5, and JavaScript stuff. And yes, they also have an archive where you can check out some of the cool stuff that were posted before you subscribed.

image

 

Laura Carlson Web Development Newsletter

This newsletter has been running for a while now, I know because it has also been linked to on a 3-year old Smashing Magazine article. Its old but it never fails to link to some of the latest news and articles in Web Development.

 

SitePoint Newsletter

This is actually a collection of newsletters from the SitePoint websites. They mostly link to CSS3, HTML5, and PHP stuff.

image

 

Daily JS

If you’re the kind of guy who wants to keep up with some JavaScript news daily then you should subscribe to the Daily JS Newsletter. They mostly link to awesome JavaScript projects on GitHub.

image

 

JavaScript Monkey

A new kid on the block at the time of writing of this article. Only a few weeks old basing from their available archives of JavaScript awesomeness.

image

 

Conclusion

That’s it! Subscribing to newsletters is one of the good ways you can keep up with the latest in the Web Development and Web Design Industry.
If you know of some cool newsletters that wasn’t mentioned on this article then please share them on the comments.