4 JavaScript Frameworks You Need To Start Using Today

The web has quickly moved from fancy websites running strictly on HTML and a server side programming language, to dynamic web applications whose front ends run on JavaScript. JavaScript is an old language (created in 10 days). It has its problems but it has major advantages including its flexibility and user interface. Browser JavaScript engines are showing massive improvement, and so is JavaScript. Here are 4 awesome JavaScript frameworks you need to be aware of if you want to be a great web developer these days.
(more…)

Getting Started With Google Analytics For Your Site

Everyone has heard about Google Analytics at some point. But what does it exactly do? It’s a web analytics tool that shows you how people find your site (for instance through a search engine, ads, etc), how they navigate through your website and how they become costumers. You’re also able to track your mobile websites, mobile apps and web enabled mobile devices, bot high end and non-JavaScript enabled phones. You can find out which browser and which operating system your visitors use, which search queries they use and what the landing pages are. You can also see how many new and returning visitors you have. And what’s also important to know is how long they stay on your website.
(more…)

5 Useful Tools For Responsive Web Design

1. FitText.js

The first one I’d like to discuss is a JavaScript plugin that makes font sizes flexible. It’s called FitText and is pretty simple to use. You can download it, for free, on github. In the zip file you’ll find 3 files: a readme file, the actual JavaScript file and an example.

Like I said, it’s fairly easy to use. If you open the example, you’ll see that the headers (h1) all got an id. It’s these parts that will be resized when you resize the window. Their are a couple of things you have to pay attention to in the css file, or script if you put in the html file. However FitText ignores the font-size you specify in the css file (body tag), you have to be sure to set one as a fallback in case JavaScript is turned off. You also have to make sure that the h1 tag has a display block with a specified width.

So in the example, they just call the function for the first id (fittext1) which has all the default values. For the second id (fittext2) they set a “compressor” value. If you set a high compressor value, the text will shrink more aggressively. If you give a lower value, for instance .fitText(0.8), the text will shrink less aggressively. For the third id (fittext3) they set a min- and maxFontSize, this allows users to specify two optional pixel values.

More information, and the link to github, can be found on their website http://fittextjs.com.

2. Adaptive Images

This tool detects your visitor’s screen size and automatically creates, caches and delivers device appropriate re-scaled versions of your web page’s embedded HTML images. It’s a bit more difficult to use because, you don’t only have to know the basics of html and css, you also have to have some basic server knowledge. You can also download this tool for free on github. When you unzip this file it’s best to first read the instructions file. Here you’ll find a very detailed list of instruction to create your adaptive images.

They say the setup is really easy and quick (just 3 steps). You first have to add the .htaccess and adaptive-images.php to your document-root folder. Than you have to add just one line of JavaScript between the head tags. And finally you have to add your css media query values into $resolutions in the php file.

You can find all the information you need on http://adaptive-images.com.

3. Responsive Testing

My prayers have been answered with this tool. I find it really dreadful to constantly have to resize my huge window so I can test a responsive website. No more I tell you! Just visit http://mattkersley.com/responsive and enter the url of the website you’d like to test. You can test only on the width or the device sizes. You have a beautiful overview for each device and their fore you can easily see where you have to tweak some more. The only downside I could find is the fact that it only covers apple’s products. So if you create for Android tablets or phones you still have to figure out their device sizes. But even for them it will be a great help!

4. Less Framework 4

“Less Framework is a CSS grid system for designing adaptive websites. It contains 4 layouts and 3 set of typography presets, all based on a single grid.” You can download Less Framework for free on github.

If you want to see what it does, you just create a new webpage with some dummy text in it from lipsum.com. you just have to copy the css you want (I choose the main-16px.css) and paste it in your css file. If you run the page now you can already see it in action. If you want something more sophisticated, you can always tweak a couple of things in the css file.

There are a couple of rules you have to keep in mind when you want to use this tool for your website. So for more information about this useful grid tool, visit their website http://lessframework.com.

5. Responsive Web Design Sketch Sheets

If you still use paper and pencil to create your mockups, you could use these sketch sheets for your responsive web sites. You can download the sheets at http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets.

The Possibilities and Restrictions of Responsive Web Design: Responsive Data Tables

As you may have read, I’m a student Interactive Multimedia Design at the college of Mechelen. I’m in my final year, and as all graduates we have to create a final project. Me and my partner have decided to create a mobile website so motorists can pay their parking fee with their phone or tablet. This will be my very first responsive web site I’ve ever made.

There are a couple of things I wish I knew before I started this project and the major one has to be that working together with a city brings a lot of extra difficulties to a project. For instance we HAVE to work together with their ICT department, which basically means we always have to ask for their approval after coding a page (which may take a couple of weeks).

(more…)

santa

What's The Best Coding Music?

What a simple question. My personal answer is: it’s whatever I feel like rocking out to at the time I start (Usually Metallica or AC/DC). So, in order to determine the most popular genre of coding music I set out onto the @pineheadtv twitter account and asked there. I’m actually somewhat amazed at the universal response that was received. If you were one of those who posted back, you’re sure to find your post below and THANK YOU for contributing.

(more…)

jquery-logo-vector

Ajax: Using $.Ajax() And .Click() jQuery Functions To Send Email With PHP

This screencast was created in response to a request from one of our Pinehead.tv viewers, and shows you how to create an extremely simple form that is driven by Ajax and PHP. We create an email and name field and pass the values of those inputs into a PHP file when a certain div tag is clicked. By using Ajax we are able to submit the form and send an email without the end user ever having to reload a webpage.

(more…)

firefox-chrome-ie

Build Cross Browser Extensions with jQuery

With the creation of web browsers such as Chrome and Firefox, we’ve seen increase in browser plugins and their usage. The Google Chrome Store and Firefox plugin directory have increased the amount of exposure and availability of plugins for discovery in the crowd. Given so much innovation, one might think that there is not any room left in the browser plugin market for new ideas. However, a small company and JavaScript framework known as Crossrider is aiming to change the landscape of the browser plugin market.

(more…)

putty

PHP + SQLite Magic

This screencast will walk you through creating a database, implementing it in your PHP script and using it in an application.
SQLite is the most widely deployed SQL database engine in the world, and used in common web and mobile applications where simple SQL functions are needed. It allows you to use those functions without having to run a resource heavy database server especially for smaller low scale applications.

(more…)