Posts

4th TIP Student Congress with the Alumni – 2014

Hey guys! I'm sorry to disappoint you but I'm not going to publish some codes today. I was invited to be a guest speaker at our institute's student congress with the alumni - for the second time. It was held yesterday, January 23, 2014 in the Technological Institute of the Philippines, QC.

Read more

Home PHP

Generating JSON String with PHP

Today I'm going to share this code I used to generate a JSON string with data from MySQL database.

For those not yet familiar, JSON is a lightweight data interchange format (like XML but it is lightweight).

It has been used by companies like Google and Facebook in their APIs.

Recently, I needed a JSON string to get data from the web to the Android app I'm working on.

The PHP file gets a parameter company_id to select few data related to a company.

Please note that this is not a production ready code, but is very useful to get you started and can serve as quick reference.

Read more

Optimize Image for Web Using Photoshop and Thoughts on Faster Web Pages

This post is supposed to be a quick-tip on how you can optimize your images for web pages. But it feels like I also want to give some thoughts about website speed. There are many websites saying that your images must be optimized for the web, that should be updated and say, "your images must be optimized for web and mobile devices" in which the amazing Adobe Photoshop can help us with.
Home Lists+

12 jQuery Questions and Answers You Should Be Reading on StackOverflow

Hi guys! Below are twelve of the jQuery related questions and answers on StackOverflow that I found very useful during development. I opted to compile them here because I feel good reading those brilliant questions and answers by coders from around the world. Enjoy!

  1. How would I know if an element is hidden?
  2. Sometimes you want some elements of your page to be visible, and if it is not visible, you want to tell the user about it. For example, a user must have a selection of data first before proceeding to new operation. If he has no selection (div is hidden), you can do a prompt that he must select something.

  3. How do I get selected text in select box?
  4. Ah, a drop-down list? Link # 2 above shows you how to get the user drop down list selection.

  5. How to redirect a page?
  6. Useful if you want to your users to see a page after an AJAX request, or you just want them to be redirected. I’ve written another example here, jQuery: Redirect onClick

  7. How would I know if a checkbox is checked or unchecked?
  8. For example, you want to enable a delete button if the user selected at least one data to delete, else, the delete button is disabled. I’ve written another example here: Check or Uncheck Checkboxes with jQuery And Get Selected with PHP

  9. How to select a child element?
  10. Teaches us how to select a child element and do it with faster performance (see the comment by Paul Irish).

  11. event.preventDefault() vs. return false
  12. I use return false; when I want to prevent a page refresh after clicking a submit button and doing an AJAX request.

  13. Example of using jQuery .closest() method.
  14. I use jQuery .closest() method on selecting an element within a table with several rows. I probably have to write an example in another blog post, ha!

  15. How would I know the existence of an element?
  16. Useful if you want to perform something if an element exists in your page. The faster way is using if ($(selector).length) {}

  17. How would I know which radio button is selected?
  18. This is how you will know if a user is a male or female, using jQuery!

  19. How to select multiple classes?
  20. Sometimes you want to to something to multiple classes at once. There’s another example here.

  21. How to select an element by its name, not by class or id?
  22. If you’re more familiar with an element’s name or don’t want to add a class or id name, you can use this cool technique.

  23. What if Google hosted jQuery is blocked?
  24. In some countries, Google’s domain name is banned. So if you are using a Google hosted jQuery library, you’re site won’t work. Link # 12 above shows you the fall back.

This can be the first part of the list, you can add more in the comments section below, or on our Facebook, Twitter or Google+!
And as always, thanks for reading!

Home Facebook

Fixed: Cannot send session cache limiter – headers already sent

Okay, so many of you guys still ask me about how to fix these warning messages in our Facebook scripts. Today I'm going to give you two possible fixes that you can do. By the way, here's the warning message we want to remove:

Fix it by adding a session_start()

You can fix it by adding a session_start() on top of your PHP file, just right after your first line <?php tag. It looks like this:

Fix it by moving Facebook instance

You can fix it by moving the Facebook class and instance code on top of your PHP file. It would look like this:

If none of them worked, you can read more here.
Home Lists+

Creating Social Media Icons for Your Website using CSS

In almost every website we see today, there are links to their social media accounts. I think it is a standard now. It’s like, you’re not cool if you don’t have a Facebook and Twitter account!

Recently, I was using Google drive to host my CSS and image files. Now, I removed it. Why?

Because Google drive slows down my website! During the use of Google drive hosted CSS and images, the average load time of this wesbite is around 10-20 seconds for new visitors.

After I removed it, it is now around less than 5 seconds!

Creating Social Media Icons for Your Website using CSS

My new social media icons. :)

I decided not to use any third party CSS code. I wanted to create my own social media icons, and I did! (see the screenshot above or the lower right corner of this page for live demo)

I think the icons I made are so cute that I thought of sharing it to you guys (I appreciate a tweet, like or +1 before you use it!). It loads fast, contains few lines of CSS and HTML code, and it doesn’t use any images! Here’s how I did it, below are the CSS and HTML code I used.

HTML code:

<div id="socialMediaIcons">

    <a class="facebook" href="https://www.facebook.com/CodeOfANinja" title="Facebook" target="_blank">f</a>
    
    <a class="twitter" href="http://twitter.com/ninjazhai" title="Twitter" target="_blank">t</a>
    
    <a class="googleplus" href="https://plus.google.com/b/101266899643014043497/101266899643014043497/posts" title="Google+" target="_blank">g+</a>
    
    <a class="rss" href="https://www.codeofaninja.com/feeds/posts/default?alt=rss" title="RSS" target="_blank">r</a>
    
    <a class="email" href="http://feedburner.google.com/fb/a/mailverify?uri=TheCodeOfANinja" title="Email" target="_blank">@</a>
    
</div>

CSS code:

#socialMediaIcons{
    margin: 0 auto;
    text-align:center;
}

#socialMediaIcons a{
    border-radius: 3px;
    color:#fff;
    font-family: arial;
    font-size:1em;
    height:2.5em;
    padding:1em;
    text-align:center;
    width:2.5em;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

#socialMediaIcons a:hover{
    color:#fff;
    text-decoration:none;
}

.facebook { background:#4c66a4; padding:2px 10px; }
.twitter { background:#33bcef; padding:2px 10px; }
.googleplus { background:#D2412E; padding:2px 3px; }
.rss { background:#fa9b39; padding: 2px 6px; }
.email { background:#00D8CC; padidng: 2px 6px; }

And… that’s how I created my new social media icons using CSS!

Home Lists+

Resposive Web Design Testing Tools

Hi guys! Today we have a guest post from Marykris de Leon, you can find more about her at the end of the post, please read below!
Hello geeks! This is a quick guide on how you can test your responsive website without actual gadgets or devices. I personally recommend these tools for testing on devices such as smartphones, laptops, tablets, and TVs. We are going to have two categories: Browser Extensions and Online Tools.

Resposive Web Design Testing Tools

Browser Extensions

1. Internet Explorer – You should have Microsoft Internet Explorer Developer Toolbar which can be downloaded on this link: Internet Explorer Developer Toolbar. After installing, you have to press F12 on your keyboard to use this tool.

EI Developer Toolbar.

EI Developer Toolbar.

2. Firefox - For Firefox users, you may use Firesizer which can be downloaded on this link: Firesizer. To use this, you have to enable your addon bar:

Enable Add-on bar for Firesizer.

Enable Add-on bar for Firesizer.

Then on the add-on bar look for the Firesizer function which is located on the lower right corner of Firefox, you have to right click to customize the sizes.

Using Firesizer.

Using Firesizer.

You may also try Responsive Design View on Firefox > Web Developer > Responsive Web Design or Ctrl + Shift + M for keyboard shortcut.

Firefox Responsive Web Design View.

Firefox Responsive Web Design View.

3. Google Chrome – Chrome has Window Resizer, you can install this awesome Chrome extension from this link: Window Resizer

Google Chrome Window Resizer.

Google Chrome Window Resizer.

Online Tools

1. Screenfly – Allows you to enter your website URL and gives you many view options for testing such as Netbooks, Desktop, Kindle Fire, iPad 1-3/Mini, Nexus 7, Motorola Razr, Blackberry, LG optimus, Galaxy SIII, iPhones, and Television views (480p, 720p, 1080p). It also allows you to specify custom screen size and rotate the screen view. This is my favorite online testing tool.

Screenfly.

Screenfly.

2. Responsinator – Also allows you to enter your website URL (located on the upper left corner) and gives you the available views in one load which is kinda fast and convenient, you just have to scroll down. The available views is limited to iPhone (3,4,5), iPad, Kindle, and Samsung Galaxy. All has portrait and landscape mode.

Responsinator.

Responsinator.

3. Responsivetest- Also allows you to enter your responsive website URL (located on the upper left corner) and loads the view one at a time, depends on your device selection. Screens are limited to XGA, WXGA, iPad, Kindle Fire, iPhone and Android phones (320 x 240 and 515 x 295), also has landscape and portrait mode.

responsivetest.net

responsivetest.net

By the way, the example website we used in this post is this responsive web design live demo. The tutorial for coding a responsive website can be found here: Coding A Responsive Website Design.

Let us know in the comments what testing tools do you use? :)

About Marykris

Marykris De Leon is a professional Systems Analyst and Web Developer for the past three years. You can follow her on Facebook, Twitter and Google+

How To Get Facebook App ID and Secret Keys?

After creating a Facebook page where we will pull our data, we have to create an app to get an appId and appSecret keys. Those keys are required to use the Facebook PHP SDK and do our queries like pulling Facebook photos, events, videos, and feeds. Here’s a step by step tutorial on how to get those keys.

How To Get Facebook App ID and Secret Keys?

Facebook developer apps dashboard.

Step 1

Here’s the link where you would start: create a Facebook app. On the pop up, specify your app name (the name of your website or app) and app namespace (used for your Facebook app URL e.g., http://apps.facebook.com/yournamespace)

Creating an app.

Creating an app.

Step 2

You’ll be asked to enter a security code to verify that you’re a human and not a bot or malware that creates random Facebook apps. After entering the text in the box, click the “Continue” button.

A security check.

A security check.

Step 3

Congrats! now you can copy your Facebook appId and appSecret. See the arrows below.

Your Facebook appId and appSecret keys.

Your Facebook appId and appSecret keys.

Step 4

Prepare your App ID and App Secret keys, we’ll use it to get your access token, here’s how:

https://graph.facebook.com/oauth/access_token?client_id=YOUR_APP_ID&client_secret=YOUR_APP_SECRET&grant_type=client_credentials

Replace YOUR_APP_ID and YOUR_APP_SECRET with your own and run the link on the browser.