Simplified Source - A Web Development Blog by Code Clarity

This Week's in Web Development (Week #7)

Sat, 18 Feb 2012 16:26:29 -0700

With our current project load it is insanely hard to keep up with the Simplified Source Blog. As of right now I will be trying to post either resources/code snippets that are helpful or a weekly summary of articles and resources in regards to Web Development and Design. I hope that these articles are helpful. Each week I can say that I have a different interest than the week before. Therefor this article takes a turn each week from SEO to Wordpress to CodeIgniter to Social Marketing to Android and so on. Enjoy.

Google Releases “Dartium” Browser for Developers

Google is trying to get developers interested in Dart with a technology preview of the Dart VM in Chromium, better known as Dartium. The plan is ultimately to include the Dart VM in Chrome itself, but no timeline has been given yet for that.

Google has been pushing pretty hard to move Dart forward. The company released a Rosetta Stone for JavaScript programmers called Dart Synonym at the beginning of February. However, developers have had to compile Dartium from source or find unofficial builds to test the code.

Now it’s much easier to get ahold of a browser with the Dart VM. If you’re using Linux or Mac OS X, you can download Dartium today. Windows builds are not available yet, but should be available “soon.” [Continued]

Read Article

(Author: Joe Brockmeier)

21 Examples of Excellent Navigation Menus in Web Design

Navigation is certainly a very important element in web design, especially if we keep in mind that the navigation of a page is there to orient and guide the user. I believe we know that it’s extremely important that users understand navigation options to better explore a website and that is why today we are showcasing examples of navigation menus, to show how websites are presenting menus to their users. From the traditional header menu to side bar menus, footer menus and much more, you will see that there are a variety of ways to present your navigation options. So check it out and let us know which one you like most. [Continued]

Read Article

(Author: Gisele Muller)

The Impending CSS Vendor Prefix Catastrophe

Developers have a love-hate relationship with CSS vendor prefixes. They allow us to use bleeding-edge technologies at the expense of long-winded declarations:

background-image: -webkit-linear-gradient(#fff, #000);
background-image: -moz-linear-gradient(#fff, #000);
background-image: -ms-linear-gradient(#fff, #000);
background-image: -o-linear-gradient(#fff, #000);
background-image: linear-gradient(#fff, #000);

It works well in theory but consider what happens in the wild:

Experimental properties are often implemented in the webkit engine first and there’s no guarantee they’ll be replicated in other browsers.
It’s often difficult to determine whether a vendor-prefixed property is part of the CSS specification. Some vendors don’t submit properties for standardization.
Even if the standard property changes, the incorrect vendor-prefixed version continues to be supported. Your old code still works; you won’t revisit it to correct the implementation.

You’ll often find sites using the -webkit prefixes alone — even if other browsers support the property or it has widespread availability without a prefix (such as border-radius). Chrome and Safari therefore look better than competing browsers — and the other vendors aren’t happy. [Continued]

Read Article

(Author: Craig Buckler)

Flexible Notifications With jQuery – noty

noty is a jQuery plugin for creating user-friendly, “JavaScript-alert alternative”notifications very easily It has built-in support for alert, success, error and confirmation messages and they can either be displayed as HTML elements that fade in/out or as modal boxes. [Continued]

Read Article

(Author: WebResourcesDepot)

12 Things I Have Learned After 7 Years of Freelancing

At the age of 15 I started with this web design stuff. Here I am, almost 7 years later and I wish I knew a lot more about this field rather than learning just by my own mistakes. But you don’t have to pass through all of this, dear Padawan.

There are a few particularities in our field that unless you have a geek dad you would never think about… So if you are aware about what you need to do you can have a much simpler, more productive, and happier freelance life.

The crazy thing is that success is not (just) about coding skills alone. You have to build a whole environment to compensate the instability that you probably won’t face in a regular job.

Finally, here we’ll see a few tips for novice and experienced freelancers, ranging from controlling your finances to networking. And I really want to hear your advice and tips after reading this, because we always have something to share, right? So, let’s rock! [Continued]

Read Article

(Author: Rochester Oliveira)

18 Android Apps for Designers & Web Developers

Although Apple devices have been getting a lot of attention there is plenty of great stuff to focus on with Google’s Android project. Their open source mobile operating system features a similar app store where developers can publish their ideas quickly and effortlessly. There are sincerely dozens upon dozens of fantastic apps to guide web developers & designers in completing project work.

This small gallery below contains 18 such examples of my favorite apps. Android users will love to try these out and see what kind of functionality can benefit designers, developers, and freelancers of all types. If you have similar apps of your own be sure to let us know in the post comments area. [Continued]

Read Article

(Author: Jake Rocheleau)

Showcase of Annual Report Design

Annual reports are important for presenting information to a company’s investors, so having an annual report that looks professional and presents a good image can certainly help the cause. The design of the report is, of course, secondary to the content, but still important.

In this post we’ll showcase some examples of annual report design for your own inspiration. These samples come from the Behance Network, and in most cases you can see more images from each annual report by clicking on the image and following the link to Behance. [Continued]

Read Article

(Author: Vandelay Design)

Seo Tools And Why They Play A Big Part In The Seo Industry

It’s no secret that there are thousands of tools available for search engine optimisation beginners and experts alike. They were all built with two things in mind; Making life easier and automation. Without them the work of an SEO would be slow and incomplete. It’s too easy to miss out steps in a procedure that has been put together, but tools that have been built to this prevent that happening.

Some tools are very simple and serve only a single purpose, such as extracting meta tags, checking for H1 and H2 tags or simply checking the page for its analytics code. But imagine extracting all of this information manually. The time it would take for each site is significantly longer than just entering a URL into a box and hitting go. However there are some tools which have been built to provide a multitude of information in one shot. These are the real time savers.

One good public example of this is the David Naylor Playground. This is a JavaScript pop-out which works with any website. It provides a range of information from hosting location to the number of links and keywords on the page. Another great site is Open Site Explorerprovided by SEOmoz. This tool provides you lots of off-page information that you can use as part of your off-page campaign, from links on the page to links pointed at the domain. Some information requires a subscription but the free version still provides plenty of useful data. [Continued]

Read Article

(Author: Andrew via SEO Consult)

Musings on Preprocessing

I’ve been using SASS for pretty much everything I do recently. Here’s some musings on the journey. From hold-ups, to trip-ups, to turn-offs. From apps and teams to workflows and syntax. [Continued]

Read Article

(Author: Chris Coyier)

Weekly Web Developer Resources (Week #4)

Sun, 29 Jan 2012 16:04:00 -0700

Try to get back on track here. As we are currently developing Simplified Source and the new Blog— we will continue to publish Web Design & Development related articles. You are always welcome to join us on our other Social Network and RSS Feeds for information.

Visit us on Twitter Visit our RSS Feed

And with our further adieu, this Weeks Shared Articles for Web Developers and Designers.

When’s the Best Time to Blog & Share?

Anyone who spends their day on the Internet inevitably wonders this question. Should I start publishing later in the day, to hit the after-work traffic? Should I publish earlier in the morning, to catch commuters while they’re on the way to work? Or is everything completely random, driven by the off-chance that a post will end up on StumbleUpon and enjoy a slightly longer tail? Social sharing widget Shareaholic looked at its 2011 data, breaking it down to the top 100 days and times for sharing. See the results in Eastern Standard Time.

Shareaholic looked at two metrics: social shares and traffic. For some, getting the highest number of shares is the goal; for others, increased traffic is where it’s at. Please remember that this data all comes from Shareaholic, so it’s specific to those users, though it’s possible to infer more from the results.

Read Article

(Author: Alicia Eler @ ReadWriteWeb)

Better Bookmarks With Grazely

Bookmarking apps are not exactly the rare breed they used to be. A lot has changed over a couple of years. In fact, there is too much supply than demand in the marketplace. On the other hand, the volume of bookmarks are going up exponentially and in nine out of ten cases users are locked into the service they first sign up with.

That probably explains the torrent of new wave bookmarking apps. Grazely is a next generation social bookmarking tool that helps you discover, save, organize and share exciting content on the web, privately or publicly. Is this web app as exceptional as it clams to be? Let us go find out!

Overview

Grazely strives to not be the garden variety bookmarking apps that we know already. The web app works by letting you create a single user account to manage all your bookmarks. Sign in from any Internet connected device and you can instantly access all your bookmarks and find the content you need, without hassles.

(Author: Justin Stravarius @ AppStorm)

What You Should Know About ACTA and Your Rights

The most controversial measures of concern to Internet users in the final version of the international Anti-Counterfeiting Trade Agreement (ACTA) for most Internet users are 1) that signing governments pledge to allow copyright holders a way to request, under court warrant, personal information about a suspected infringer from that person’s ISP; 2) that means will be provided for a rights holder to legally pursue someone suspected of circumventing rights management technologies; 3) that goods crossing countries’ borders may be made subject to search and seizure if they’re suspected to contain infringing material, with exceptions provided for things like personal luggage.

President Obama signed this treaty on October 1, 2011, effectively ratifying it on behalf of the United States.

(Author: Scott M. Fulton, III @ ReadWriteWeb)

Pancake: A new project from Mozilla Labs

What is Pancake?

Pancake is a new Mozilla Labs project focused on exploring, evolving and expanding how we search, browse, navigate, organize and discover amazing things on the Web. To do this, we’re creating an app — a usable prototype that we’ll share and iterate on rapidly through an ongoing series of experiments. We want to better understand what people do on the Web, why and how they do those things, and how we can make those things easier and more efficient.

We’re playing with some huge concepts, monumental problems and occasionally crazy ideas. We’ll be looking at what tools and systems we can create to put more of the Web at users’ fingertips. We hope to devise new metaphors and new systems that give users greater power and control within the modern Web.

We want to address questions that go to the core of how users experience the Web. Some examples of the questions we are asking include: How can we make it easier for people to find what they’re really looking for on the Web? Do URLs still need to be something users care about? Can we make it easier for people to discover new and interesting things on the Web? What impact does social play in discovery on the Web?

The prototype app we are building is really only the surface of Pancake. We’re also pushing the envelope — using the latest and greatest Web technologies — to build an amazing, portable experience for users. The back-end of Pancake will live in the cloud, where we’re creating an extensive Web service that will allow you to carry your data and experience across many devices. Our initial focus is on iOS and Android tablets and phones, but our long-term goal is to help people live their online lives on their own terms, across all devices and platforms.

The project will operate as a typical open-source project — allowing open collaboration so everyone can test our ideas, give us feedback, conduct usability testing, and with us to discover new avenues of experimentation and exploration. We are working hard to release our first prototype in the next few months.

(Author: Stuart Parmenter @ Mozilla Labs)

Use Join.Me to Train Staff and Collaborate with Customers

Do you manage a website or a blog? Do you build websites for customers? If so, then you know all that’s involved in getting your staff up to speed with tasks that need to be accomplished for the website. You know what’s involved in showing customers how their project is coming along. It’s a lot of work… especially when most of the time your staff is working remotely and your clients are miles away. In this article we are going to show you an online tool that can help make your life much easier. We will go over what it is and what it does, its benefits, how you can use it to make your life easier, and show you how to use it!

What is Join.Me?

Join.me is a screen sharing tool. Join.me easily allows users to share what’s being done on their screen with others. Screen sharing tactics help your listeners understand what you’re talking about by providing visual support to back up what’s being discussed. It’s a great tool for collaborating with staff or freelancers. Need to train a client on a new piece of software or show them progress on the website you’re developing for them? Done. Join.me is a quick and dirty tool that allows you to share your screen with anyone at any time. It’s definitely worthwhile to know about, especially for those situations where you didn’t take time to set up some of the more complex screen sharing software programs and you just need to quickly share your screen with someone. Hop on join.me within seconds.

(Author: Ryan Taft @ 1stWebDesigner)

Colour Combination Makes a Better Impact in Logo Designing

It’s undeniable. Branding is the life blood of any business. Even for small businesses, you’ve gotta build brand identity, or be ready for your company to go belly up.

A big part of many company’s brand identity is the logo. It’s like the face of your company. You need one that’s good looking and instantly recognizable. To that end, colour can make a big impact on not just how your logo looks, but as a result how your company’s perceived.

In the following article, we discuss the impact that colour combinations can make in the design of your company’s logo and the power that logo’s going to have for your brand.

How Colour Combination Makes a Better Impact in Logo Designing

Any person who owns a small business or is otherwise involved with logo designing should have a crystal clear concept of how colour combination makes a better impact in logo designing. The logo of a company is a big part of what attracts customers to its products. Thus, since a simple logo can decide the fate of a business or its popularity, every aspect of the design should be carefully explored. Especially, how the colour combination makes a better impact on the logo.

(Author: WizKraft @ SpeckyBoy Design Magazine)

slabText – A jQuery plugin for creating big, bold & responsive headlines

slabText is a jQuery plugin that splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the CSS font-size – the script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text.

(Author: CodeVisually)

Semantic CSS Buttons Powered With @font-face Icons – Zocial

Zocial is a semantic set of CSS buttons (no images used) that are beautified with @font-face icons. There are buttons for 40+ services including Facebook, Twitter, Google+, PayPal, LinkedIn and much more. Each button can be displayed with or without text (only icons) and the HTML element wrapping them can be anything (which is nice for flexibility). Demo is available at http://zocial.smcllns.com/sample.html#.

(Author: WebResourcesDepot)

Questions to Ask Yourself Before Becoming a Blogger

For the most part, being a professional blogger is a freelance position. It doesn’t matter how many different blog sites you are loyal to, even if it is your own, a blogger still has the option to have work published anywhere they feel. Unless you’re a corporate blogger who signed a contract with your company of employment stating you would not do so, but then again that technically might make you more of a copywriter. Moving on, being a full-time or part-time blogger means you’re freelancing on some level. As the typical freelancer asked themselves many questions before taking the big leap, you would think the same would go for bloggers.

In the same fashion as any other occupation, there are certain skill requirements that must be met. Almost every industry blog site has published an article about how blogging can improve your career, and then proceeds to convince the majority of readers that being a blogger is the way to go for them. However these articles, for the most part, are all missing one key aspect to them. Somewhere before, or after, informing the readers about the benefits of being a blogger, there needs to be time to reflect on why one shouldn’t be one.

(Author: Jamal @ 1stWebDesigner)

Outsmarting Your Competition in High-Stakes PPC Markets

Are you competing in a high-stakes PPC market with bids in the $25 to $40 range? If you are, don’t simply fight your competition head on; if you do, you’ll end up paying premium prices for clicks you might capture for far less. There are several shrewd approaches you can employ to side-step your less-vigilant competitors. We’ve learned a few valuable tricks that can earn you valuable clicks for less-than-premium prices. The techniques begin with carefully monitoring PPC activity throughout the day to discover low-competition time slots in the PPC bidding and striking while your competition snoozes.

Getting Started

The types of campaigns for which these techniques will work will be high bid environments with smaller but determined competitors. You want to look for competitors bidding for terms in the $20-and-up range, but whose campaigns are not fully budgeted to run at the maximum number of available clicks. Specifically, we want to look for competitors’ ads that don’t appear consistently or whose ads disappear later in the day. Smaller competitors tend to fit this model fairly often. An illustrative keyword example we see in our local market of Austin Texas is “Personal Injury Lawyer”. We know the bids in that space are $24 to $30 depending on the time of the day—but we see some advertisers drop out at various times of the day. For illustration, we’ll examine Google’s Adwords system, but these principles will apply to any PPC program.

(Author: TastyPlacement @ SEOMoz)

As always we appreciate you reading Simplified Source’s Weekly Web Developer Resources and please do visit us on Twitter or Subscribe to our RSS Feed for your viewing pleasure.

Creating Custom Wordpress Plugin and Widget

Fri, 27 Jan 2012 19:31:00 -0700

(This blog post originated from a post that I made earlier on Forrst.)

Wordpress 3.x has a lot to offer us Developers. We should take advantage of it. I’ve been developing a lot of custom plugins and custom widgets for my Clients who use Wordpress as their CMS. Now there are a ton of tutorials and code snippets of how to create a custom Plugin or a custom Widget for your Wordpress Installation but I kept running into issues with my Widgets not being able to be reused. So, I created a basic template for a Custom Plugin that creates a Widget Class that can be reused and is more than customizable.

View on PasteBin View on Forrst

Every Wordpress Developer has their own methods and own opinions on how to create Widgets and Plugins and I just wanted to share my method. This is my basic template which creates a Plugin for a Client, and wrapped in this Plugin is a custom Widget that shoots back some text. Of course you can get nice and complex and do what ever you want here. (My code is a compilation of research and publicly available information).

Constructive criticism and feedback is welcome, as always.

php
/*
Plugin Name: ClientName Custom Widget
Description: Displays a custom feature for your Client in the form of a Widget.
*/

class customClientWidget extends WP_Widget {

    function custom_clientWidget() {
       // Declare your Widget name, the class name and a Description for the Dashboard
        $widget_ops = array('classname' => 'customClientWidget', 'description' => 'Displays something that you specify in the code below.' );
        $this->WP_Widget('customClientWidget', 'Your Custom Widget', $widget_ops);
    }

    function widget( $args, $instance ) {
        // Very basic code that takes the Title from the form function and then displays your code
        extract($args, EXTR_SKIP);

        echo $before_widget;
        $title = empty($instance['title']) ? ' ' : apply_filters('widget_title', $instance['title']);

        if (!empty($title))
          echo $before_title . $title . $after_title;

        // Content to be displayed on page goes here
        echo 'Displaying some data here.';
        runThisFunctionNow();

        echo $after_widget;

    }

    function update( $new_instance, $old_instance ) {
        // Allows for the Widget to be reused
        $instance = $old_instance;
        $instance['title'] = $new_instance['title'];
        return $instance;
    }

    function form( $instance ) {
        // Creates a very simple form so that you can Title your Widget.
        $instance = wp_parse_args( (array) $instance, array( 'title' => '' ) );
            $title = $instance['title'];
        ?>
          php echo $this->get_field_id('title'); ?>">Title: php echo $this->get_field_id('title'); ?>" name="php echo $this->get_field_name('title'); ?>" type="text" value="php echo attribute_escape($title); ?>" />
        php
    }

    } // End of Widget Class

    function customClient_widgets() {
    // Register the Widget
    register_widget( 'notable_pressWidget' );
    }
    // Quick WP Action to register the Widget
    add_action( 'widgets_init', 'customClient_widgets' );

// From here you can upload the file and directory to your /wp-content/plugins/ directory, then goto Admin Dashboard and Plugins and Activate the Plugin. Afterwords you can goto your Widgets and add the Widget to a Sidebar. Simple stuff.


?>

When it comes down to it, that’s a pretty easy setup.

Wget - Examples For Developers

Thu, 26 Jan 2012 16:03:00 -0700

You know, it’s amazing to me that as Developers some of us do not realize all of that power that we have under-the-hoods of our computers. It is already built-in and ready to roll we just need to use it. GNU Wget is among many common *nix/Linux Applications that comes installed with the common Linux Disto and easy to install elsewhere. Plus, it’s GNU Open Source which you cannot beat. Well, at this point, you are probably asking why the heck I am writing an article on GNU Wget, right? I had to pull some images from a clients website but only from certain folders with certain extensions. I thought about it quickly and it made more sense for me to do so with GNU Wget instead of going through their very crazy FTP site and downloading each image. GNU Wget is powerful, open-source and a standard. Please note, that I use CURL as-well and I believe they each have their Pro’s and their Con’s. I’m going to give a few simple and then powerful usages of GNU Wget. These examples are a combination of either basic documentation examples to examples that I worked on and examples I discovered during my brief research of ways to use GNU Wget.

Basic Syntax

This is your very basic usage for Wget.

 wget [option]... [URL]...

Download File

Simple and basic way to download a file.

wget http://www.somewebsite.com/thefile.png

Download File with Quotes

Download a file whose URL contains a “&” (note quotes).

wget "http://www.somewebsite.com/index.php?page=demo&user=janetreno"

Download File and All Related

Download a file and all related files for optimum viewing.

wget -p http://www.somewebsite.com/index.html

Download an Entire Website

Download an entire website using the recursive option.

wget -r http://www.somewebsite.com/

Mirror an Entire Website

Download or Mirror an Entire Website and Follow all symbolic links.

wget --mirror -p --convert-links -P ./nameofsite http://www.somewebsite.com/

Ignore File Type Specifics

Reject a specific file type during download of an entire website or folder.

wget --reject=gif http://www.somewebsite.com/

Resume a Download

Resume your downloaded file. (The server should support this method).

wget -c http://www.somewebsite.com/largefile.ogg

Specify the Name of a file after Download

Specify or Rename your downloaded file after it’s complete.

wget -O downloaded-filename.zip http://www.somewebsite.com/downloads/archived?id_232221

Mask User-Agent to Download

Mask your User Agent while downloading a file or folder

wget --user-agent="Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.3) Gecko/2008092416 Firefox/3.0.3"  http://www.somewebsite.com/index.html

Limit Download Speed

Limit your download speed

wget –limit-rate=30k http://www.somewebsite.com/demo.jpg

Stop Download After Certain Size

This command will stop your download at a specific file size, ie. 5MB. (This quota will not get effect when you do a download a single URL. That is irrespective of the quota size everything will get downloaded when you specify a single file. This quota is applicable only for recursive downloads).

wget -Q5m -i http://www.somewebsite.com/

Use a file containing download addresses

This can come in handy, use a file that contains a list of addresses to download

wget -i download-list.txt

Download MP3s or Specified File Types from Download List

Another handy snippet which allows you to specify a file type to download from your download list.

wget -r-l1-H-t1-nd-N-np-a.mp3 erobots=download-list.txt

Test Your Download

Test your download with the Spider option.

wget --spider http://www.somewebsite.com/demo.jpg

Increase Download Retries

Up the amount of retries Wget does when downloading.

wget --tries=75 http://www.somewebsite.com/demo.zip

Make Links automatically convert to support pages

Links automatically convert to a local consultation pages.

wget -k http://www.somewebsite.com/

Use FTP Authentication to Download

Download via ftp (With authentication).

wget -r l4 ftp://username:password@somewebsite.com/

Backup Your Delicious Bookmarks

Create a Backup of your Delicious Bookmarks. (Downloads Public Links only!)

wget http://delicious.com/username/

Download in Background

Download a file or directory in the background with a log output.

wget -b http://www.somewebsite.com/index.html

Log Wget to a Specific File

Log messages to a log file instead of stderr Using wget -o.

wget -o download.log http://www.somewebsite.com/

Create a Simple Bash Script to Download an Entire Website

Create a simple bash script, such as downloadsite.sh, make the script executable and then either use a symbolic link or copy/move to your /usr/local/sbin folder.

#!/bin/bash

echo "Downloading $1 ..."
wget --mirror -p --convert-links -P ./$2 $1

echo "Downloading Complete."

USAGE- /usr/local/sbin/downloadsite.sh http://www.downloadthissite.com/ /download/to/this/directory

Well, that’s that. These commands will help Developers a-like. Wget and CURL are very helpful commands and if you know how to use them— that is one way to improve productivity. Simple way to increase your productivity.

Introduction to GNU Wget

GNU Wget is a free software package for retrieving files using HTTP, HTTPS and FTP, the most widely-used Internet protocols. It is a non-interactive commandline tool, so it may easily be called from scripts, cron jobs, terminals without X-Windows support, etc.

GNU Wget has many features to make retrieving large files or mirroring entire web or FTP sites easy, including:

Can resume aborted downloads, using REST and RANGE

Can use filename wild cards and recursively mirror directories

NLS-based message files for many different languages

Optionally converts absolute links in downloaded documents to relative, so that downloaded documents may link to each other locally

Runs on most UNIX-like operating systems as well as Microsoft Windows

Supports HTTP proxies

Supports HTTP cookies

Supports persistent HTTP connections

Unattended / background operation

Uses local file timestamps to determine whether documents need to be re-downloaded when mirroring

GNU Wget is distributed under the GNU General Public License.

Downloading GNU Wget

The source code for GNU Wget can be found on http://ftp.gnu.org/gnu/wget/ [via http] and ftp://ftp.gnu.org/gnu/wget/ [via FTP]. It can also be found on one of our FTP mirrors. For more download options, see the download information on the Wget Wgiki.

Documentation

GNU Wget documentation can be found at http://www.gnu.org/software/wget/manual/. For manuals of other GNU packages, please see http://www.gnu.org/manual/

Additional Information

Additional information is at the Wget Wgiki, including frequently asked questions, and how you can help us to improve Wget!

Maintainer

GNU Wget is currently being maintained by Giuseppe Scrivano. The original author of GNU Wget is Hrvoje Nikšić. Please do not directly contact either of these individuals with bug reports, or requests for help with Wget: that is what the mailing list is for; please use it instead. Micah also tries to make himself available on IRC during Pacific daytime hours; asking for help there is welcome.

Detect TOR Connection with PHP

Tue, 24 Jan 2012 08:04:05 -0700

Update (January 14, 2012)

After some brief research I stumbled upon a PDF Article related TOR Connections and preventing them and reasoning behind it. Don’t get me wrong, I actually think the TOR concept is a good one as I am one for anonymous online activity but there are people who mis-use the network which can effect us Developers. (Just my opinion, don’t crusify me for that). Here is the PDF Link, dsgnit.tk/….

Summary

Now, this is a code snippet that I ran across by Johan Adriaans (@snipt.net/johan_adriaans/detect-tor-requests/). I have been thinking about this kind of code— something that detects a proxy or TOR network. It’s really hard to get accurate Google Analytics stats when your dealing with users over a TOR Network (their IP address obviously are not accurate, making their city, country and other stats in accurate).

Visit Original Code

I’m playing around with this code to fit some of my current work. Feedback and constructive critisism is always welcome. I’m sure we could all debate the Google Analaytics example I brought up but I’m sure there are 100s of ways this code could be used.

Just sharing with the @Forrst Community.

Credits

Author- Johan Adriaans
URI- snipt.net/johan_adriaans/detect-tor-requests/

Code

php

print isTorRequest() ? "Yep" : "Nope";

function isTorRequest() {
  $reverse_client_ip = implode('.', array_reverse(explode('.', $_SERVER['REMOTE_ADDR'])));
  $reverse_server_ip = implode('.', array_reverse(explode('.', $_SERVER['SERVER_ADDR'])));
  $hostname = $reverse_client_ip . "." . $_SERVER['SERVER_PORT'] . "." . $reverse_server_ip . ".ip-port.exitlist.torproject.org";
  return gethostbyname($hostname) == "127.0.0.2";
} 

?>

HTML5 Pattern/Expressions Attribute

Mon, 23 Jan 2012 16:02:05 -0700

Over the years I perfected my XHTML. To the point to where I am being stubborn now when it comes to utilizing HTML5 for my standard sites. I see the advantages of HTML5 and have done non-stop extensive research and have lived in the W3C Specification. There are some many features from previous drafts of HTML (and CSS) that I have not implemented because of browser support.

I was wondering if anybody has been using Expressions with their form fields? If so, I was hoping that the @Forrst Community would be willing to share what they have been using them for and how.

I have created a simple jsFiddle to play around with the basic HTML5 Form elements-
Visit jsFiddle

Feel free to comment and give your opinion on using Expressions with HTML5 Forms. Feedback and Constructive Criticism is more than welcome.

 action="" method="post">  
   for="username">Create a Username:   
      name="username"  
    id="username"  
    placeholder="4 <> 10"  
    pattern="[A-Za-z]{4,10}"  
    autofocus  
    required>  
   type="submit">Go

Cross-Domain.xml Policy Specifications

Mon, 23 Jan 2012 08:00:05 -0700

Last year I was working with a client who was using Adobe PDFs like no other and Adobe Flash Videos that were on multiple domains and finally found a good use for cross-domain.xml. It was not until then that I realized the importance of that file. Well, I’m working with that file again right now and I wanted to share this PDF regarding the policy to help anybody who has questions about it.

This post was based off of a post that I made on Forrst at, http://forr.st/~6RP.

Download

A good snippet of what the cross-domain.xml file is used for comes from the HTML5BP:

A cross-domain policy file is an XML document that grants a web client—such as Adobe Flash Player, Adobe Reader, etc.—permission to handle data across multiple domains. When a client hosts content from a particular source domain and that content makes requests directed towards a domain other than its own, the remote domain would need to host a cross-domain policy file that grants access to the source domain, allowing the client to continue with the transaction. Policy files grant read access to data, permit a client to include custom headers in cross-domain requests, and are also used with sockets to grant permissions for socket-based connections. For full details, check out Adobe’s article about Cross-domain policy file specification (adobe.com/devnet/articles/…).

Foundation: Rapid Prototyping (JavaScript Library)

Mon, 23 Jan 2012 00:16:05 -0700

Description

I love my jQuery. I love my jQuery Plugins that I have worked so hard on the last many years, I love it’s extensibility, it’s accessibility, and about 100 other things about jQuery. MooTools also sparked my interest for awhile. I remember first learning Javascript, a long time ago, and when jQuery stumbled into the scene I realized that it was smart to include it in my projects just for the reason of making some of that crazy long Javascript nothing more than a few lines. Foundation gives you a starting point with a CSS Grid along with ease-of-use using jQuery. (Includes Orbit and Reveal jQuery Plugins). I have given Twitter Bootstrap a try and when it comes down to it, Foundation has more to offer and feels more clean and well-rounded. (Note: That last statement comes from a user comment on this post in which I did not mention the Twitter Bootstrap and gave the misconception of this replacing jQuery which in fact it does not).

Well, I read my daily Web Development & Programming News (along with Graphic Design, Linux & General Technology) every single day. I stumbled up Foundation a little while ago— to my knowledge when ZURBwent public with it on GitHub in October 2011. This Framework was developed with the _developers in mind and jQuery included, it’s well documented, very beautiful and easy to work with. I have been impressed and even started to play around with it on some personal projects of mine. (I believe @artur has been doing the same thing, with his post on @Forrst at forrst.com/posts/…).

Great Framework, worth a look for you UI Devs.

Download Latest

A Little From ZURB on Foundation

What’s in Foundation? So much good stuff, girl. We’ve built Foundation to help you quickly get a site off the ground and to a state where you can easily adapt and modify it into a release. […Continue]

Global- Foundation’s global styles include Eric Meyer’s rock-solid reset, tested styles for typography, links, lists, tables and more.

The Grid- You’re gonna like this. Within global.css you’ll find The Grid (not the one from Tron), a layout framework that works on mobile devices, small screens and full-on modern desktops. It’s a twelve column, semi-liquid, mobile-scaling grid of awesomeness that you’re gonna love. It even supports arbitrary nesting.

Buttons- We love buttons at ZURB. Foundation includes two base styles, three sizes, and several colors that are preconfigured and super easy to modify.

Forms- Hate forms? So do we. They’re a pain. Well, we’re simplifying that by creating two base styles for forms that are tested, include validation styles, have proper spacing…all the good stuff. We even included custom radio buttons, checkboxes and select lists so you can style up every form element. They’re easy to modify, like everything else.

Orbit- That’s right - Orbit, the awesome way to put image or content sliders on your page, is packaged in with Foundation. It even works on mobile.

Reveal- Finally, we’ve created a whole new plugin for modal dialogs in Foundation. Reveal is easy to call, supports several intro animations right out of the box, and is completely stylable. It also works on mobile.

GIT Cheatsheet

Sun, 22 Jan 2012 23:39:10 -0700

I find this interesting. Through-out my business day I talk to a good amount of Developers. The Developers that I work with all know and love GIT. That’s a good thing. But I have came to realize that there are a good amount of Developers who have been making the switch to GIT from SVN, Mercurial, CVS (Seriously!) and a few others. I just wanted to post the GIT Cheatsheet via GitHub. More than helpful as a refresher for devs who may not use GIT a lot or are new to GIT.

This post is based off of my post on Forrst at http://forr.st/~65n.

Download

Git (/ɡɪt/) is a distributed revision control system with an emphasis on speed. Git was initially designed and developed by Linus Torvalds for Linux kernel development. Every Git working directory is a full-fledged repository with complete history and full revision tracking capabilities, not dependent on network access or a central server. Git’s current software maintenance is overseen by Junio Hamano. Git is free software distributed under the terms of the GNU General Public License version 2. (Via Wikipedia).

More on SOPA and PROTECT-IP (via Fight for the Future)

Fri, 20 Jan 2012 11:35:03 -0700

As the argument continues I just wanted to share a little update that was received from the folks at Fight for the Future.

A big hurrah to you!!!!! We’ve won for now — SOPA and PIPA were dropped by Congress today — the votes we’ve been scrambling to mobilize against have been cancelled.

The largest online protest in history has fundamentally changed the game. You were heard.

On January 18th, 13 million of us took the time to tell Congress to protect free speech rights on the internet. Hundreds of millions, maybe a billion, people all around the world saw what we did on Wednesday. See the amazing numbers here and tell everyone what you did.

This was unprecedented. Your activism may have changed the way people fight for the public interest and basic rights forever.

The MPAA (the lobby for big movie studios which created these terrible bills) was shocked and seemingly humbled. “‘This was a whole new different game all of a sudden,’ MPAA Chairman and former Senator Chris Dodd told the New York Times. ‘[PIPA and SOPA were] considered by many to be a slam dunk.’”

“’This is altogether a new effect,’ Mr. Dodd said, comparing the online movement to the Arab Spring. He could not remember seeing ‘an effort that was moving with this degree of support change this dramatically’ in the last four decades, he added.”

Tweet with us, shout on the internet with us, let’s celebrate: Round of applause to the 13 million people who stood up - #PIPA and #SOPA are tabled 4 now. #13millionapplause

We’re indebted to everyone who helped in the beginning of this movement — you, and all the sites that went out on a limb to protest in November — Boing Boing and Mozilla Foundation (and thank you Tumblr, 4chan)! And the grassroots groups — Public Knowledge, Electronic Frontier Foundation, Demand Progress, CDT, and many more.

#SOPA and #PIPA will likely return in some form. But when they do, we’ll be ready. Can you make a donation to Fight for the Future, to help us keep this fire going?

We changed the game this fall, and we’re not gonna stop. $8, $20, every little bit helps.

13 million strong,

Tiffiniy, Holmes, Joshua, Phil, CJ, Donny, Douglas, Nicholas, Dean, David S. and Moore… Fight for the Future!

P.S. China’s internet censorship system reminds us why the fight for democratic principles is so important:

In the New Yorker: ”Fittingly, perhaps, the discussion has unfolded on Weibo, the Twitter-like micro-blogging site that has a team of censors on staff to trim posts with sensitive political content. That is the arrangement that opponents of the bill have suggested would be required of American sites if they are compelled to police their users’ content for copyright violations. On Weibo, joking about SOPA’s similarities to Chinese censorship was sensitive enough that some posts on the subject were almost certainly deleted (though it can be hard to know).
…
After Chinese Web users got over the strangeness of hearing Americans debate the merits of screening the Web for objectionable content, they marvelled at the American response. Commentator Liu Qingyan wrote:

‘We should learn something from the way these American Internet companies protested against SOPA and PIPA. A free and democratic society depends on every one of us caring about politics and fighting for our rights. We will not achieve it by avoiding talk about politics.’”

(Press Release is here: https://fightfortheftr.wordpress.com/press-releases/)

Today's Blackout (Fight For The Future!)

Thu, 19 Jan 2012 01:07:05 -0700

I wanted to post an email that was received via Newsletter from the folks over at Fight for the Future. Today felt like it was a succesful day in raising awareness to both the SOPA and PROTECT-IP Bills. I’ll let them (Holmes, Tiffiniy, and the whole Fight for the Future team) take it from here;

Today was nuts, right?

Google launched a petition. Wikipedia voted to shut itself off. Senators’ websites went down just from the sheer surge of voters trying to write them. NYC and SF geeks had protests that packed city blocks.

You made history today: nothing like this has ever happened before. Tech companies and users teamed up. Tens of millions of people who make the internet what it is joined together to defend their freedoms. The free network defended itself. Whatever you call it, the bottom line is clear: from today forward, it will be much harder to mess up the internet.

The really crazy part? We might even win.

Approaching Monday’s crucial Senate vote there are now 35 Senators publicly opposing PIPA. Last week there were 5. And it just takes just 41 solid “no” votes to permanently stall PIPA (and SOPA) in the Senate. What seemed like miles away a few weeks ago is now within reach.

But don’t trust predictions. The forces behind SOPA & PIPA (mostly movie companies) can make small changes to these bills until they know they have the votes to pass. Members of Congress know SOPA & PIPA are unpopular, but they don’t understand why—so they’re easily duped by superficial changes. The Senate returns next week, and the next few days are critical. Here are two things to think about:

1. Plan on calling your Senator every day next week. Pick up the phone each morning and call your Senators’ offices, until they vote “no” on cloture. If your site participated today, consider running a “Call the Senate” link all next week.

2. Tomorrow, drop in at your Senators’ district offices. We don’t have a cool map widget to show you the offices nearest you (we’re too exhausted! any takers?). So do it the old fashioned way: use Google, or the phonebook to find the address, and just walk in, say you oppose PIPA, and urge the Senator to vote “no” on cloture. These drop-in visits make our spectacular online protests more tangible and credible.

That’s it for now. Be proud and stay on it!

—Holmes, Tiffiniy, and the whole Fight for the Future team.

___

P.S. Huge credit goes to participants in the 11/16 American Censorship Day protest: Mozilla, 4chan, BoingBoing, Tumblr, TGWTG, and thousands of others. That’s what got this ball rolling! Reddit, both the community and the team behind it, you’re amazing. And of course, thanks to the Wikimedians whose patient and inexorable pursuit of the right answer brought them to take world-changing action. Thanks to David S, David K, Cory D, and E Stark for bold action at critical times.

P.P.S. If you haven’t already, show this video to as many people as you can. It works! http://fightforthefuture.org/pipa/

SOPA & PIPA (PROTECT-IP) Bills

Tue, 17 Jan 2012 23:16:46 -0700

Code Clarity has officially jumped on the bandwagon to support a good cause. Stopping the two (of three) Bills that could cripple the Internet. Initially, I thought it was just hype. Well on a break I took a few days ago, I decided to read a small portion of the giant (and very dry) text called the SOPA Bill. I wanted to post this for my clients and instead of just saying that I am boycotting and against these bills I wanted to post a few resources that I urge all of my clients to take a peak at. These bills, if passed, will take away our Freedom of Speak, many rights we have as Americans and worse of all Break the Internet. I know that sounds silly, but please educate yourself of this situation and what we are up against. I believe that there is a better way for our Government to approach stopping Online Copyright Infringement. Two really important words in that last sentence, Our Government.

For quick information, please visit:

House Bill 3261, The Stop Online Piracy Act (SOPA), or #SOPA on Twitter ,and its cousin in the Senate, S.968, the “Preventing Real Online Threats to Economic Creativity and Theft of Intellectual Property Act,” or the PROTECT IP Act, commonly known as “#PIPA” or #ProtectIP on Twitter targets websites that distribute infringing materials by having the Department of Justice block those websites. The bill has already passed out of committee and is primed for consideration by the full Senate. What does this mean? PIPA is much farther along in the process than its House cousin the “Stop Online Piracy Act,” or SOPA.

There are a number of serious issues with the way PIPA and SOPA try to tackle the legitimate concern of websites that infringe copyrights and trademarks:

PIPA is overbroad. By including “information location tools,” it makes nearly every actor on the Internet a potential violator.

PIPA is bad international precedent. By sanctioning government interference with DNS, it would be used as justification for other countries to hinder freedom of expression of online.

PIPA is ripe for abuse. By creating a “private right of action,” rights holders could directly go after payment processors and ad networks.

PIPA speeds fragmentation of the Internet. By targeting DNS, it could lead to a fragmentation of the Internet, running contrary to the U.S. government’s commitment to advancing a single, global Internet.

via http://publicknowledge.org/e-parasite-stop-online-piracy-act#pipa

For more information, please read:

For an in-depth analysis of PIPA, read this blog post by PK Deputy Legal Director Sherwin Siy.
Read about why prominent Internet engineers are against PIPA.
Read this letter from 13 public interest organizations in opposition to PIPA.
Read about why the New York Times and LA Times came out against PIPA as written.
Read this letter from 100+ law professors opposing PIPA.
Read this letter from 50 venture capitalists expressing concern with PIPA.
Read the letter from NetCoalition concerning the Private Right of Action in PIPA.
Read the text of PIPA yourself.

Collection of Web Design and SEO Bookmarklets

Tue, 17 Jan 2012 23:08:18 -0700

Design Bookmarklets can be a very valuable tool if you utilize them correctly. There are so many websites at this point that offer free services such as Keywork Generators, SEO PageRanks, Onscreen CSS and HTML Overviews and tons more. Here is my giant list of Web Development and SEO Bookmarklets.

Now, to have the same accessibility and quick access that I have to the Design Bookmarklets, you should setup your Bookmark Toolbar in the following manner:

Create a Folder in your Bookmark Toolbar called ‘Design-marklets’ (or similar).
Create the following folders in the parent folder: ‘Web Design’, ‘SEO & Social Media’, ‘Browser Screenshots’, ‘Other Bookmarklets’.
Starting with the folder ‘Web Design’ in the parent folder ‘Design-marklets’, drag and drop the Bookmark from the sections below into that folder.
Do the same for each category.

That will create the simple setup of very helpful Web Development and SEO Bookmarklets that I have collected and created.

Web Design

Aardvark

Quick website overview including element selection, css and javascript tools. Provides a HUD for interaction. Press the ‘h’ key for Help.

Aardvark

Built With

Bookmark will show you the current technologies used on the website that you are viewing.

Built With

Computed Styles

By selecting elements, you are able to retreive detailed information regarding that element include CSS and DOM.

Computed Styles

CSS Validator

Validate your CSS

Validate CSS

Design

Very helpful tool for Front-end website development. Offers four tools which includes a ruler, grid, crosshairs and unit-difference. Very valuable tool all packed into a very nice looking HUD on the bottom-right of your screen.

Design

Slayeroffice Favelet Suite

Another great tool. Providing a HUD that gives the front-end developer/designer access to color lists, DOM tree chart, ruler, javascript tools and about 10 other very helpful tools.

Favelet Suite

HTML Validator

Quick access to the W3C HTML/XHTML Validator.

Validate HTML

Layout Grid Overlay

Displays a Grid and Ruler that overlays your current website.

Layout Grid Overlay

MRI

This bookmarklet has a great HUD Overlay. MRI will highlight and element that matches the selector or will show all selectors and id/classes when selecting an element.

MRI

Mouseover DOM Inspector (DOMI)

Another HUD Overlay that inspects every element and displays on-screen information related to that element. In my top 10 list of Bookmarklets.

Mouseover DOM Inspector

Named Anchors & Many Other Bookmarklets

Now I have chosen to to include many of these bookmarklets into my bookmark folder. There is an amazing amount of bookmarklets here and a few valuable ones too.

Named Anchors and More

SEO and Social Marketing

WooRank

View Website in WooRank. Here you will get a ranking for your website, key points of interest such as page performance, basic SEO knowledge, backlinks, and an evaluation of your website that will help it’s future and SERP.

WooRank

OpenSite Explorer

View your website in OSE. OpenSite Explorer is a great SEO tool to find out what links you have submitted to the search engines and who is linking to you. There are Premium Services available too from SEOMoz.

OpenSite Explorer

GTMetrix

Test your website on GTMetrix. If you worry about Page Performance, as you should, this website will test and rank your site or page. I have found that it can be more detailed than YSlow and Google Page Speed.

Test in GTMetrix

Google Trends

Google Trends is a great way for anybody working on SEO to view current and previous trends for websites and keywords.

View in Google Trends

Extract Terms

Using SEOMoz, you are able to extract 1 word, 2 word and 3 word phrases from your website that show up in the text, title tag and meta tags. Very handy little tool.

Extract Terms

Keyword Eye Tool

KeywordEye is another term extraction tool. They have more options available to you and the keywords that are choosen for the particular page or site you pull up are actually organized by views as per SERP. Another very handy tool.

Extract Terms with KeywordEye

Site Indexation Queries

View your website in each individual search engine.

Google Indexed Pages
Yahoo! Indexed Pages
Bing Indexed Pages

Code Clarity's Charity of the Month - The Cancer League of Denver, Colorado

Wed, 30 Nov 2011 19:01:16 -0700

This month’s charity is ‘The Cancer League of Denver, Colorado’. They have been providing Cancer Research since 1985 and have raised over $10 Million dollars in donations for research. Below is a little more about The Cancer League of Denver, Colorado. You can find them at http://www.cancerleague.org/ and on Twitter at http://twitter.com/CancerLeagueCO.

All Donations can be made, here.

About The Cancer League of Colorado

Cancer League of Colorado, Inc. was founded by five women whose families were affected by cancer. These women personally experienced the heartache that comes with the disease. From their individual struggles grew a joint commitment to raise money for research and patient care. Their dream in founding Cancer League is to help find a cure for cancer.

From the beginning, Cancer League has been committed to supporting cancer research and has raised and dispensed approximately $10 million to support Colorado research, patient care and family programs. Cancer League grants have been made to projects across Colorado and have helped thousands of individuals and families fight cancer.

Cancer League of Colorado, Inc is a 501(c)(3) non-profit organization composed entirely of volunteers. Unique to non-profits, Cancer League has no paid staff and no offices. All operating expenses are covered by membership dues. Cancer League now has more than 400 volunteer members who share the commitment to fight cancer. (Cancer League of Colorado Bylaws as PDF file)

Cancer League of Colorado has a compassionate approach to raising dollars for cancer research and patient services within the State of Colorado. We are a 501 (c) 3, founded in 1969, with the mission of finding a cure for, or the means to control, cancer. We are unique in that our organization has no paid staff and no offices. Membership dues pay for all operating expenses.

Cancer League’s philosophy states that, “We are a cohesive, caring group with close relations among our members to work toward our goal of fundraising to find a cure for cancer.”

Our compassion is in our caring members, dollars raised, and volunteers’ time. We reach out with our advisory boards and the time and effort they put in to directing our grant programs. We are companions together as a group of more than 400 members who give personally of their time to make our mission a reality.

Services

Based on recommendations from our Scientific Advisory Board, each year the Funds Allocation Committee distributes monies for research and service grants. The Scientific Advisory Board is a group of Colorado medical doctors and research specialists who volunteer their time to insure the funds are sent to worthy organizations throughout the state of Colorado. Research for such grants is conducted at several facilities, which include the University of Colorado Health Sciences Center, Colorado State University, Children’s Hospital and the National Jewish Center for Immunology and Respiratory Care. Generally 90% of Cancer League’s funds are awarded for research grants; the remaining 10% are awarded to service grants.

Service grants are awarded to organizations for such things as hospice care, educational materials, care to indigent patients and recreational activities for children fighting cancer. Past recipients include Boulder Hospice, Doctors Care, AMC Native American Cancer Research Program, Qualife Wellness, and the Visiting Nurses Association. All organizations benefit patients only in the state of Colorado.

Cancer League of Colorado, Inc. was a founding institution for the Cancer Center at the University of Colorado Health Science Center, the only comprehensive cancer center in the Rocky Mountain Region. (website, Contact: Libby Printz).

The League was also instrumental in funding the Colorado Ronald McDonald House and Qualife, an organization dedicated to improving the quality of life for cancer patients.

Cancer League funded research has been successful in leading to groundbreaking discoveries, particularly in the field of genetic research. Our funding played a major role in the following discoveries:

Establishment of a link between DDT and testicular, prostate and breast cancer.
Discovery of a protein that controls silencing DNA cell processes, which, if mutate, can lead to cancer.
Identification of cancer-specific gene expression markers.
Discovery of a region of cell cycle protein, which is essential for its function in regulating normal cell division.

Discovery of the gene targets involved in acute leukemia in humans.

Developer Resource- jQuip by Demis Bellot

Mon, 28 Nov 2011 16:30:05 -0700

Every week I am able to take just a tiny bit of time during a lunch break or an afternoon break to read up my web developer news. I ran across this project, as did many other Web Design Blogs. I’ve been using jQuery since 2007 as my primary Javascript Framework and Library. Javascript has turned into such a powerful tool. It’s amazing to me how fast it’s came along. There are many debates to the effectiveness of jQuery for newer users and the size of jQuery has grown over the years. NetTuts recently published an article related to the Pros and Cons of jQuery even. (Published here). When I found this project and saw that the author Demis Bellot was looking to modularize jQuery— I just loved the concept.

Take a look at the GitHub page and of course let us know what you think. I can see this concept and idea being popular with Mobile Developers. I know when I approach a simple HTML5 Mobile Website that I need to use just a little jQuery that I don’t want the whole library. I just need a few aspects of it to accomplish my mission.

jQuery getting too big?

The primary goal of this project would be for the feedback/demand to kickstart jquery.com into re-organizing its code-base so it’s more modular since we believe we’ve proved the most useful parts of jQuery is a fraction of its code-base.

To this end, follow this project if you want jquery.com to measure the demand for this. Another project with similar goals is http://ender.no.de/ - for node.js.JSLim is another project that takes a novel approach to reducing code size with advanced minification techniques.

Zepto.js is another great alternative to jQuery, it’s fast, light and optimized for mobile/webkit browsers. It’s a popular option for PhoneGap developers with full support for the Backbone.js, Underscore.js and Spine.js frameworks. It has very recently added support for the latest Safari, Chrome, Firefox and Opera browsers - it makes use of latest EcmaScript 5 APIs without shims so if this is your targetted market, we encourage you to try it.

Based on recent posts it does looks like jQuery wants to build a slimmer jQuery. Although we don’t thing giving a trim is going far enough, we hope they perform larger re-structural changes allowing us to use most of the useful parts at a fraction of their cost. Their recent conversations into future file size reduction do sound promising.

Introducing jquip - aka jQuery-in-parts.

Smaller, Lighter, Faster, more modular jQuery - include only the parts you want! Don’t use it, Don’t include it.

Minified & gzipped code sizes (v.02):

jquip.js (5.7k)

jquip.events.js (1k)

jquip.docready.js (.5k)

jquip.css.js (1.6k)

jquip.ajax.js (.9k)

Query Engine options (not required for modern browsers)

jquip.q-min.js (.6k) - An extremely fast but limited query engine (see below)

jquip.q-qwery.js (2.6k) - A New fast replacement for Sizzle.js

jquip.q-sizzle.js (5.29k) - Sizzle.js

The core jquip.js is only 5.7KB (minified and gzipped) - a fraction of the size of jQuery.

Has 90% of the good parts of jQuery (rest to be added plugins as needed), small enough to drop-in as source saving an external js reference.

Automatically downloads parts needed for older browsers

Sizzle.js is only added on demand from cdnjs.com for browers that need it (i.e. <=IE7) which we believe this is the optimal way to download shims for browsers that need it. We still have some testing to do, but that is at least our goal.

Most code has been ported from jQuery or Zepto.js and optimized where possible, e.g. internals use underscore’s native _.each over jquery’s slower$.each etc.

Licence: http://www.opensource.org/licenses/mit-license.php (Same as jQuery and Zepto.js)

Build customizable jquip packages with the jQuip Library Builder service

The jquip Simple Demo is also available to try online, whilst a version compiled with Google’s Closure Library (Advanced mode) is in the repo.

Disclaimer

This is NOT an official jQuery.com project.

Code-base will now be more stable as we’ve reached our goal of jquip.js (with the events + docready plugins) working in Backbone.js, there are likely a few fixes still to be added but the core is close to feature complete and wont require the major refactoring done recently.

We would still like to hear feedback on issues/non-implemented core functionality so we can measure the API popularity of missing pieces.

News

v.02

We now are able to compile in Closure Compiler’s advanced compilation mode! The minified output passes Backbone.js test suite and reports only 1 not implemented feature in Spine.js tests. We still have Closure Compiler warnings as a result of un-annotated methods which we’ll look at adding in the near future.

The source code was modified (somewhat unnaturally) so it would work with the Closure Compiler, i.e. have all the API methods exported correctly.

The total code-size (min+gzip) for jquip and non-query plugins (i.e. docready,events,css,ajax,custom) is 9.67k in advanced mode and 9.86k in Simple mode.

v.01

Abstracted Events, pluggable query engines and new $().find and Events system courtesy of the much leaner implementation in Zepto.js, refactored to support multiple browsers.

We are now passing Backbone.js latest test-suite in all the latest browsers!
(we’ll get to older IE browsers as soon as we find a PC with them installed :)

pre-alpha, first release

Customizable Library builder service at

Node js build scripts added to minify jquip with UglifyJS.

Roadmap

Getting jquip to work in Google Closure Compiler’s advanced compilation mode without warnings so it can be used to programatically strip out dead code your application doesn’t use for an even smaller footprint!

Add caching to improve performance

Changes

v.01

New Spine.js tests added as well, now passing all but 1 test (in latest browsers)

New tests added and bug fixes. Backbone.js latest test suite now passes in all the latest browsers - now included in the /test folder.

New Event system added as a plugin, now with abstracted events.
We expect most devs would want to include events, but can now be stripped if you dont.

Query engines are now pluggable and none are included by default but will auto detect window.Sizzle or window.qwery if available and automatically download Sizzle.js from cdnjs.com if a browser doesn’t support document.querySelectorAll (i.e. <=IE7). Note: because there’s no Sizzle.js it’s important to be aware of limitations when relying on browsers native querySelector implementations, i.e. there are restrictions in IE8 where the HTML page must be in standards mode and Safari in quirks mode can’t handle uppercase or unicode characters.

pre-alpha

$.addConstructor is now $.hook

$.addPlugin is now $.plug

scrollLeft and scrollTop is now in the css plugin

Due to a request by the jQuery team we’re no longer assigning the jQuery variable, you will now need to manually change this yourself on the first line of jquip.js:
window.jquip = window.$ = (function()..

What’s in the box? - i.e. the 90% good parts

Methods marked with * are only partially implemented.

$(selector)
$(selector, context), $(element), $(array)

$(callback) requires docready plugin.

Methods operating on a $(selctor)

add

each

attr

removeAttr

get

toArray

data

append

appendTo

prepend

prependTo

before

insertBefore

after

insertAfter

toggle*

hide, show, fadeIn and fadeOut - does so without animation, consider using jquery.animate-enhanced plugin*

eq

first

last

slice

find

not

filter

indexOf

is

remove

val - does not do checkbox, select, etc.

html

text

empty

addClass

removeClass

hasClass

parent

parents

parentsUntil

next

prev

nextAll

nextUntil

prevUntil

siblings

children

contents

serializeArray

static methods off $

$$ - querySelectorAll or query engine shim

$.each

$._each - Underscore’s native each

$._indexOf - Underscore’s indexOf

$._defaults - Underscore’s defaults

$._filter - Underscore’s filter

$.filter

$.dir

$.nth

$.sibling

$.grep

$.map

$.data

$.attrs

$.trim

$.isFunction

$.isArray

$.isWindow

$.isNaN

$.merge

$.extend

$.makeArray

$.hasClass

$.typeOf - safe type of an variable

$.loadScript - (url, callback [, async]) load an external script dynamically

$.htmlFrag - creates a document fragment from a html string (name changed)

$.walk - traveres all childElems including self (predicateFn, [[, context], results])

$.query - query Engine i.r. doc.querySelector || queryEngine Shim

$.attrs - an elements attributes

$.unique - return a unique list of elements in document order

$.contains - parent element contains sibling

Plugins

Pick and choose the parts of jQuery when and add you use them.

Other parts of jQuery can be Added via Plugins which is simply a matter of copying or including the script after the core jquip.js.

events

Methods on $(selector)

bind

unbind

one

delegate

undelegate

live

die

trigger

$.bind

$.unbind

Helpers on $(selector)

blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error

documentReady

yep, it’s a plugin!

$(function())

$.ready

css

$.css

width

height

innerHeight

innerWidth

outerHeight

outerWidth

scrollLeft

scrollTop

$.camelCase

ajax

based on David Flanagan HttpUtils modfied to work like jQuery’s ajax.

$.xhr (cross-browser XHR Native Object)

$.ajax

$.getJSON

$.get

$.post

$.formData - convert object hash into a url Encoded string component

custom

$._template - Underscore’s template

$.queryString - cached map of queryString variables

$.is[Tab|Enter|Shift|…] - static functions to detect named keys pressed, e.g. if ($.isEnter(e)) console.log("pressed enter")

$.cancelEvent - cross-browser fn to preventDefault() and stopPropogation(), returns false.

Plugin Authors (adding your own plugins)

Extending jquip:

plug(name, fn($)) - Register your own plugin, mutate $ to extend jquip.

bool $.hook (function(selector, contxt)) - Intercept the constructor request.

$.setQuery (function(selector, context)) - plugin your own query engine

You can also include Sizzle.js or qwery.js above jquip.js (using IE’s conditional comments is a good approach), it will automatically be registered. The q-{queryEngine}.js plugins are also self-registering.

Intercept the $(){ .. } constructor and inject your own implementation. Return true to short-circuit. e.g: from the docready plugin:

$.plug(“docready”, function ($) { $.hook(function (selector, ctx) { if (typeof selector == “function”) { this.ready(selector); return true; } }); … });

Limitations

Many corner cases we feel that are not likely to be hit in normal development have been intentionally stripped out, it’s therefore possible for older browsers to experience some issues if you code hits these edge cases.

In addition to its fluent API, jQuery does a lot of cross-browser normalization as well as sanitization and quarantine for edge cases in older browsers which no doubt makes it a safer but slower option.

Non supported examples:

Script tags in inserted HTML are not automatically evaluated

Attributes and event handlers of cloned html fragments are not copied across

No expression support beyond the browsers native querySelector APIs or Sizzle.js shim

We prefer not to take the perf and code-bloat hit of this quarantine - if your app does hit one of these edge cases you will either need to code a specific workaround for your apps usage (which will in all likely be more optimized than jQuery’s general purpose solution) or simply move back to using jQuery.

Best Practices

Contrary to the strong-held opinions of many “javascipt experts” DOMContentReady is rarely the fastest solution to run your app’s logic. It is a safer optionbut in most cases your app will run faster if you execute your javascript somewhere below the HTML elements they reference even if it’s at the bottom of your page it will fire before DOMContentReady which is no longer required. This is the guidance from the Google Apps and YUI developer teams (amongst others). If you can’t control where user scripts are placed, DOMContentReady is still a suitable option. This answer on StackOverflow provides a good overview over when to use it.

We thought we’d clarify as we’ve received a lot of feedback (aka strong opinions) on this subject - this is why jQuery’s popular docready is a plugin that’s not included by default - simply include it as a plugin if you wish.

Simarily related, for best page load times you should move scripts to the bottom of your page, e.g. before the closing tag.

If you’re not referencing jquip near the bottom of your page and don’t have either the events or docready plugins included, you should call $.onload() in your own post DOMReady event. It performs post processsing tasks like downloading Sizzle.js (for <=IE7), calculates browser feature support, etc.

Mini Query Engine (jquip.q-min.js)

Weighing at just 0.6k query-min is an ultra fast selector engine for browsers that don’t provide native support for the querySelectorAll APIs (e.g. <=IE7). It works by offloading as much work as possible to the browsers primitive document.getElementById(), document.getElementsByTagName() anddocument.getElementsByClassName() apis.

On our last JavaScript heavy project, performance was improved by 7-8x in older browsers. If you’re having performance issues with older browsers it’s worth evaluating.

All selectors require an Id (i.e. #) Tag (e.g. INPUT) or class name in each child selector.

Valid Examples:

TBODY TD.c1 INPUT

TH.c1 STRONG

#btnSubmit SPAN

FORM INPUT[name=’chkProcess’]

FORM INPUT[type=’text’]

FORM INPUT[type]

FORM#id.a.b

FORM#id .a.b

.a.b.c

.a

For optimal performance in <= IE7, the first child selector should be a tag or an #id as it cuts down the amount of DOM traversing needed to be done in JavaScript since there is no document.getElementsByClassName() available.

jquip Library Builder Service

The project now includes the node.js /server/jquip.builder.js so you can host your own jquip Library builder service internally.

Contributing

I’d love help with this so Contributors and pull requests are very welcome!

The main task that needs doing is to get all the missing jQuery parts in as plugins and a comprehensive test suite so we can properly identify the parts of jQuery supported.

Feedback is welcome, drop me a line on @demisbellot.

Contributors

@mythz (Demis Bellot)

@jeyb (Jey Balachandran)

The Future of Simplified Source

Mon, 28 Nov 2011 15:07:38 -0700

Since March of 2011, Code Clarity has been working on getting Simplified Source up and running with a new format along with a new system. Yes, we are planning on breaking away from Tumblr. At this point we will be using http://blog.icodeclarity.com/ to hold our new design with tons of new features and http://tumblr.icodeclarity.com/ will contain our Tumblr blog that will be based off of the new design but only receive posts from the Official Simplified Source blog. Is everyone following along with this?

It’s been months since we have been able to focus our energy on Simplified Source, but in due time we will be publishing our new design. Features include a more organized format, a beautiful HTML5 blog design, multiple sections to include Web Design/Development Resources, Articles, Tutorials, Links, References and more. We have hired two professional writers along with guest posts by specific authors who have already agreed to working with us. I will be publishing a good portion of the content from the start.

We appreciate everyone’s support from our fans to our clients to our friends and family! Happy Holidays and if anyone has any questions or interest in writing for Simplified Source, please email us at support@icodeclarity.com.

Github web hook (Post-Receive)

Mon, 31 Oct 2011 14:31:50 -0600

Github web hook (Post-Receive):

badsyntax:

One of the problems using a 3rd-party repository hosting service is you don’t have access to the remote repository and thus it’s not straightforward to setup and use the remote hooks, like Post-Receive. (For a detailed explanation of the different git hooks, you can read this page from the git…

Web Developer Resources (Week 41)

Sun, 16 Oct 2011 19:40:03 -0600

This week was a week of discussions of what HTML5/CSS3 can do for the future web developer, responsive design and life after Steve Jobs. During my weekly reading I found many articles that should be helpful to you developers. Enjoy!

Multi-Channel Funnels: Your top questions from the Webinar by Google Analytics Blog
PhpStorm & WebStorm 3.0 EAP 110.122 by WebStorm & PHPStorm Blog
SnapTags: Will they kill QR codes? by Webdesigner Depot
Kendo UI – The Art of Web Development by WebAppers
Questions to Ask When Reviewing a Design by Smiley Cat: Christian Watson’s Web Design Blog
How to Bulletproof @font-face Web Fonts by Six Revisions
7 Myths that Bloggers Should Stop Worrying About by 1stWebDesigner
A Short Introduction into Typography by InstantShift
Design and Code an Integrated Facebook App by NETTUTS
How to Build a Sliding One Page Portfolio with jQuery by SpeckyBoy Magazine

Thanks for reading. If you are interested in seeing all of these articles in one place you can:

Take the Tour at http://dsgnit.tk/simplifiedsource-resources-week41-flipbook
Visit the Weekly Bundle at http://dsgnit.tk/simplfiied-source-resources-week41

A Tribute To Steve Jobs (by YouTheDesigner)

Fri, 14 Oct 2011 14:20:00 -0600

Steve Jobs was not just the face behind Apple. Mr. Jobs was one of the small group of innovators that designed and guided us into the realm of technology that we work with on a daily basis. As a small business owner and the owner of a small Web Development Firm I not only admire his continued push for exactly what he envisioned but his management style. There are so many things that we can say about Mr. Steve Jobs. I know that there are 100,000s of Tributes and Articles honoring Steve Jobs but Simplified Source and Code Clarity had to have their article. This article is brought to you by YouTheDesigner.

A Tribute To Steve Jobs

Steve Jobs is probably one of the best innovators of our time and the news of his death has saddened the world. He may be gone but he has left us such a great legacy. He has revolutionized personal computing into both an art and a science. He has discovered ways to make computing much easier and efficient. His imagination and perseverance have inspired countless lives and his designs have definitely created a bond between peoples.

Graphic designers are no exception to his influence. Many of us own a Mac or iPad, not just because our friends do, but because they are simple to use and dependable. As he once said, “Design is not just what it looks like and feels like. Design is how it works.” True to his word, he has led Apple to create gadgets that are both good to look at and pleasurable to use.

Words will never suffice, but along with the rest of the world, we are grateful for everything he accomplished. As a tribute, here are some art pieces inspired by Steve Jobs.

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Full Article

Article written by Leah Oripaypay courtesy of YouTheDesigner.

Code Clarity's Charity Of The Month

Sun, 09 Oct 2011 16:40:00 -0600

One thing that I have learned is that no matter what background we all come from and what “life” experiences we have been through that everything happens to everybody. It’s a truth and we all have to live with that reality. Another lesson I learned many years ago is to keep politics, religion and family out of my private business. About three months ago I started to think of ways to promote great causes while staying neutral on specific topics. Code Clarity is in the midst of starting a Non-Profit Organization for multi causes and during the development of that Organization and Website we are going to be promoting a new Charity that is either local to Code Clarity or has a very real meaning to us. This is our way of giving back and our way of doing right. As Web Developers and Designers, we understand what is going on around us and I feel there should be a moment where we all take a time out and take note of serious issues. My contributions to these charities is my way of personally giving back to the community for a good cause. Yes we are programmers and graphic designers but we are also human. These causes are important to me and my family and appreciate any support that you will provide.

Code Clarity is still a small business. We want to encourage you to donate as little or as much as you want to these charities. So what we are going to do is match $0.25 to your $1.00 per donation. Read up on the Charity listed below and if it hits the right spot, then please donate what is appropriate. When donating through NetworkForGood you will get to the part where you have a private receipt. Either screenshot the receipt or Print a PDF of the receipt and email the information to charity@icodeclarity.com. We will match that donate and send you a thank you email in reply. We keep all information private on secure servers and all “matching information” is removed with-in 30 days.

Rehabilitation Institute at Santa Barbara

Also Known As: RISB2415 De la Vina Street
Santa Barbara, CA 93105
http://www.risb.org

Mission and Programs

Mission

The Rehabilitation Institute was founded in 1967 to provide comprehensive medical rehabilitation for people with disabilities, empowering them to achieve optimal quality of life. We maintain a regional, state and national presence, basing treatment on ethical principles, scientific evidence and clinical expertise. We take a political role in ensuring that people with disabilities have rights equal to the rest of the population, and work with other institutions and individuals to achieve shared goals.

Programs

The Rehabilitation Institute’s inpatient and outpatient programs and services include comprehensive, transdisciplinary team treatment for stroke, spinal cord injury, brain injury, chronic pain, amputation, and most other orthopedic and neurological disorders. An auxiliary program provides advice and referral services for families/caregivers of adults with brain disorders. Several support groups assist persons with disabilities and family members and caregivers. We take an active educational role in the community.

Who We Are

This organization is a 501(c)(3) Public Charity.
This organization is required to file an IRS Form 990-N.
Financial information in this report is derived from the organization’s June 30, 2008 Form 990.
Additional narrative information in this report was last supplied by the organization on May 14, 2007.
It makes its audited financial statements available to the public upon request.
Contributions are deductible, as provided by law.

Executive

Ms. Melinda Staveley

Contact

Ms. Robin Eschler, Director of Development and PR

Phone

(805) 687-7444

Fax

(805) 569-8936

Email

eschler@risb.org

Board of Directors

Aaron Spechler, Secretary/Treasurer
Michael Focht, Chairman
Margaret Baker, Vice Chairman

Donate Now!

Simplified Source - A Web Development Blog by Code Clarity

This Week's in Web Development (Week #7)

Google Releases “Dartium” Browser for Developers

21 Examples of Excellent Navigation Menus in Web Design

The Impending CSS Vendor Prefix Catastrophe

Flexible Notifications With jQuery – noty

12 Things I Have Learned After 7 Years of Freelancing

18 Android Apps for Designers & Web Developers

Showcase of Annual Report Design

Seo Tools And Why They Play A Big Part In The Seo Industry

Musings on Preprocessing

Weekly Web Developer Resources (Week #4)

When’s the Best Time to Blog & Share?

Better Bookmarks With Grazely

What You Should Know About ACTA and Your Rights

Pancake: A new project from Mozilla Labs

Use Join.Me to Train Staff and Collaborate with Customers

Colour Combination Makes a Better Impact in Logo Designing

slabText – A jQuery plugin for creating big, bold & responsive headlines

Semantic CSS Buttons Powered With @font-face Icons – Zocial

Questions to Ask Yourself Before Becoming a Blogger

Outsmarting Your Competition in High-Stakes PPC Markets

Creating Custom Wordpress Plugin and Widget

Wget - Examples For Developers

Introduction to GNU Wget

Downloading GNU Wget

Documentation

Additional Information

Maintainer

Detect TOR Connection with PHP

Summary

Credits

Code

HTML5 Pattern/Expressions Attribute

Cross-Domain.xml Policy Specifications

Foundation: Rapid Prototyping (JavaScript Library)

Description

A Little From ZURB on Foundation

GIT Cheatsheet

More on SOPA and PROTECT-IP (via Fight for the Future)

Today's Blackout (Fight For The Future!)

SOPA & PIPA (PROTECT-IP) Bills

Collection of Web Design and SEO Bookmarklets

Web Design

SEO and Social Marketing

Code Clarity's Charity of the Month - The Cancer League of Denver, Colorado

About The Cancer League of Colorado

Services

Developer Resource- jQuip by Demis Bellot

Introducing jquip - aka jQuery-in-parts.

Query Engine options (not required for modern browsers)

Automatically downloads parts needed for older browsers

Build customizable jquip packages with the jQuip Library Builder service

Disclaimer

News

v.02

v.01

pre-alpha, first release

Roadmap

Changes

v.01

pre-alpha

What’s in the box? - i.e. the 90% good parts

Methods operating on a $(selctor)

static methods off $

Plugins

events

Methods on $(selector)

Helpers on $(selector)

documentReady

css

ajax

custom

Plugin Authors (adding your own plugins)

Limitations

Best Practices

Mini Query Engine (jquip.q-min.js)

jquip Library Builder Service

Contributing

Contributors

Methods operating on a `$(selctor)`

Methods on `$(selector)`

Helpers on `$(selector)`