ShiftEdit: A Web-Based IDE for PHP, Python, Ruby and More

If you’re a programmer or developer that juggles several projects at a time, your code can sometimes be lost between multiple workstations, or worse, lost in some sort of catastrophic system failure. If only you’d had a chance to run a backup first! With everything going to the cloud these days, wouldn’t it make sense to have your valuable projects protected in the fluffy white stuff as you work on them?

ShiftEdit is a web-based development environment for HTML, PHP, Ruby, Python and more, and they’re adding new languages all the time. Like the usual desktop-based WYSIWYG counterparts, ShiftEdit offers ‘Code’ and ‘Design’ views for creating your applications, as well as syntax highlighting for their expanding portfolio. As you code, your projects are automatically saved, safe and sound in the cloud and accessible from any computer with a browser and internet connection.

Code, design, and split views

If you require FTP access and database connectivity for your projects, ShiftEdit gives you the ability to connect to one site for free with the option to add unlimited sites by upgrading to their Premier service ($5/month). ShiftEdit also gives you access to basic version control tools in case you’ll be collaborating with other users.

FTP and database connectivity

If you’re looking for enterprise-class tools that help you whip out projects at lightning speed, ShiftEdit may not be everything you need. The IDE currently lacks auto-complete functionality and only provides real-time syntax debugging for JavaScript and PHP. Combine that with a finicky FTP tool, and you may want to steer clear with your high-impact projects. That said, ShiftEdit is on the right track to being a feature-rich IDE with new things being added all the time, like Dropbox support.

With more and more production-grade development tools becoming web-based, don’t be surprised if you’re developing straight to the cloud in the next few years. Give ShiftEdit a try and put yourself ahead of the curve.

Four HTML5 and JavaScript Frameworks To Jump-start Your App Development

Let’s just face the facts: Flash is dying, platform/browser agnostic development is in, and Windows 8 is bringing HTML5/JavaScript to desktop development. Love it or hate it, as a developer you’ll probably need to familiarize yourself with the finer points of HTML5 and JavaScript-driven application design, but where does a person start? Traditionally HTML and JavaScript are used for website markup and making pretty transition effects, so how do we get from high school level web design to making HTML5/JS a realistic front-end for enterprise class applications?

HTML5/JS frameworks are beginning to pop up as viable development environments for the entire range of web-based applications, from desktop to mobile. Here are four HTML5/JS tools that will turbocharge your apps and keep you savvy with this new trend in development.

1. Yahoo! Cocktails

Yahoo recently announced its newest mix of HTML5, CSS3, and JavaScript tools, and believe it or not, Yahoo still knows how to bring decent services to the table. Cocktails brings existing Yahoo! services like YQL and YUI together with HTML5/JavaScript tools for rapid multi-device and multi-platform development. The most impressive aspect of Cocktails is its integration with Yahoo!’s Mojito, which allows JavaScript functionality for your apps even if the device has JavaScript disabled by running scripts on the server side. Yahoo! isn’t dead yet!

2.  SproutCore

SproutCore is an open-source set of tools built using MVC (model-view-controller) architecture for creating universally accessible, scalable, and speeding applications. The team that created SproutCore offers many easy-to-follow guides for beginners, and the well-established community of developers make troubleshooting relatively pain-free. Of the frameworks I’ve encountered, SproutCore is the most polished…and it doesn’t hurt that it’s free.

3. LimeJS

If your forte is creating web-based games, LimeJS is a framework for rapid development of native-experience touchscreen apps for mobile devices or desktop browsers. This simple but flexible tool set is free to download and takes the headaches out of creating rich cross-platform user experiences with standardized code and solid community support.

4. Sencha

The only non-free framework on this list, Sencha is meant for industrial strength app development. Sencha offers an array of tools like a visual designer, rich spreadsheet support, CSS3 animator, and skinning to put a unique look and feel to your application. The Sencha API allows for rapid development for touchscreens or standard desktops, and while it isn’t free to download, Sencha provides professional support and training for its customers. User interface, app functionality, and data connectivity — Sencha does it all.

Conclusion

Will HTML5/JavaScript bring about the downfall .NET/WPF app development? Not anytime soon. But if you’re looking to bring your application to as many users and devices as possible, HTML5/JS is your ticket to fame. These frameworks will get your started, and if you have a favorite not listed here (there are many), please leave it in the comments.

Add Variables, Operations, and Functions to Your CSS with the LESS Dynamic Stylesheet Language

As a programmer, the most frustrating part about working with CSS is the redundancy. If you’re designing a layout with a strict color and font scheme, you can find yourself copy/pasting the same same snippets over and over…and what if that scheme changes? You get to track down each element, which takes forever even with search/replace.  What programmers crave for CSS is the ability to give dynamic behavior to a static sheet. LESS is coming to the rescue.

The LESS Dynamic Stylesheet Language is a brilliant little piece of Javascript (just 34 KB!) that you can add to your web pages to bring your CSS the power of a full-blow programming language. Installation is a snap: simply include a line of code after your other stylesheets, and suddenly you have the ability to use variables, operations, and functions in your CSS. LESS is compatible with IE6+, Webkit, and Firefox and will simplify the way you code.

Variables and Operations

Let’s paint an example:  what if you wanted to set a variable to convey a constant color or size throughout your stylesheet? No problem, just employ an @variable and your coding (and updating) just got a lot faster. Need to use basic operations to scale up font size? LESS supports that, too.

Functions

Maybe you want to reduce code redundancy by assigning multiple lines of code to a single word. LESS functions have you covered. Better yet, the functions support parameter variables for added flexibility — you won’t believe how groomed your code will look.

With LESS you can reduce your coding time and simplify your updating process by eliminating redundancies and employing basic concepts that programming languages have enjoyed from the very beginning. Save time and eliminate the clutter by adding LESS to your web development tool belt.

How To Add Greasemoney and Other Scripts To Opera 11

When I recently made the switch from Firefox to Opera, there were a couple of things I had to work out with my new web browser of choice.  One of my favorite add-ons for Firefox was Greasemonkey, which allows for the installation of scripts that modify and enhance web pages on-the-fly.  There is no version of Greasemonkey for Opera available since custom user scripts are supported out-of-the-box with just a little setup by the user.

In this guide I am going to show you how to enable, install, and use custom user scripts in Opera 11.

Adding User JavaScript to Opera

Step 1: Open Opera and enter about:opera into the address bar.

Step 2: If User JavaScript is enabled, a User JavaScript folder entry appears under the Paths heading.  If it does not, you need to enable User JavaScript in the next step.

Step 3: Navigate to Menu > Settings > Preferences… in Opera.

Step 4: Select the Advanced tab.

Step 5: Click Content in the left menu and press the JavaScript Options button.

Step 6: Select the folder where you wish to store your new user JavaScript files and click OK on the next two windows.  If you enter about:opera into the address bar like in Step 2 you can now see the User JavaScript folder under the Paths heading.

Next, we need to download and install some JavaScript.  Navigate to Userscripts.org and find the JavaScript enhancement you wish to install.  Once you find the script, right-click the Install button and select Save Linked Content As… and save the JavaScript file into the folder you specified in Step 6.  I would recommend giving the JavaScript a name other than the default provided so you can easily distinguish between JavaScript files.

What are your favorite user scripts for Opera or any other web browser?  Let us know by commenting below!

Friday Fun! Blow Up Your Favorite Websites with a Bookmarklet

If you’ve ever played the video game Asteroids, then you’ll be delighted to know that you can bring the destructive joy of this simple game to any website on the internet with a simple JavaScript bookmarklet (ok – the JavaScript isn’t simple, but clicking a bookmarklet is!).

18ish-year-old Swedish developer Erik Andersson has done a remarkable job of recreating the fundamentals of this classic game, giving you the ability to fly a spaceship around websites and blow up text, images, and advertisements.

Yep, just blowing up my own articles...

To use the Asteroids bookmarklet, head to Erik’s Asteroids site and drag the big green button to your bookmarks toolbar, where you then can use it on any site you like.  To use Asteroids, just visit a website and click the bookmarklet once – you can then use the arrow keys to steer (forward is thrusters), shoot missiles with the Space bar, and hold B to identify targets on the website.  Your score is kept in the bottom right corner of the browser window.

Target acquired.

Instead of telling you any more about this awesome game, how about I give you some target practice?  And remember, as the developer says, “It’s cooler if you make your own sound effects.“.

Techerator Editors (10 points):

Kittens (5 points):

???? (???? points)

Images courtesy: Mene Tekel, MidnightPics, Lone Recht, Four Doxn, Brian Krummel, Sara Vilbergs, Tombako the Jaguar

How to Perform Age Verification with jQuery and Cookies (mmm, cookies)

End of the line, kiddies.

If you’re a freelance developer, chances are good that you’ll encounter a situation where you’ll have to make some content “off limits” to the kids. In most cases, such as with alcohol-related material, this is required by law. So, how do you do it? Well, if you’re using jQuery, the answer is “easily.”

The first thing that may jump to your mind is that Javascript is not fail-safe. This is true; all a user needs to do is disable Javascript in his or her browser, and any sort of Javascript-based security measure is rendered useless. Luckily, legal requirements for online age verification recognize this and acknowledge that it is entirely (at least for now) dependent on the honor of the user. However, if your particular situation requires a verification system that is a bit more robust, consider using sessions which are supported in both ASP and PHP.

In this example, I will illustrate a scenario where the user is prompted with the question “Are you at least 18 years of age?” Of course, this tutorial can be extended to prompt the user for specific birth dates. For this tutorial, you will need:

I’m going to let you download those as I go grab a coffee. Are we ready? OK, let’s roll.

Before anything else, we’ll need to create two pages: one will be the “verification” page while the other will represent every page that has an age restriction in place. In both pages we’ll need to include a relative link to the two jQuery files that will be handling the cookies. Look at the snippet below and copy/paste it within the region of each page.





As with most jQuery solutions, you’ll need to add a

Let’s start off with the “content” pages that are presumably age restricted. The script is actually quite simple. If a cookie is set that indicates the viewer is of legal age, nothing happens. Otherwise, the viewer is redirected to a “verification” page, and the intended page is stored as a URL variable. Nothing too complicated there.


if ($.cookie('is_legal') == "yes") {
 //legal!
} else {
 document.location = "http://www.domain.com/[pathtofile]/verify.php?redirect=http://";
}

Let’s move on to the “verification” page. In this example, the user will be presented a “yes/no” question about their age. If they are of appropriate age, they click “yes” and are redirected to the page they intended to view. If they click “no”, they are redirected to a Google Images search for “puppies.” Isn’t that cute?

The trick here is that the “verification” page will need to be able to tell which page the user is intending to view. In some cases, the user may be clicking a link to a blog post, and then the age verification screen rudely interrupts his or her experience. When users verify their age, they want to be redirected back to the page they wanted to see, not just the homepage! So how do we accomplish this?


$('#accept-btn').click(function(){
 $.cookie('is_legal', 'yes', { expires: 1, path: '/', domain: 'domain.com' });

 
 document.location = "http://www.domain.com";

 
 document.location = "";
 
});

We’ve set an ID to the “yes” button, which evokes some processing logic when it is clicked. Immediately a cookie is set named “is_legal” and the value “yes” is assigned to it. The other parameters dictate that the cookie will expire in 1 day, will be stored locally in the root of the cookie folder on the user’s machine, and is valid for the entire domain. For a more thorough explanation of jQuery Cookie’s parameters, check out the documentation.

You may be thinking “Hey, what’s the deal with the PHP stuff?” Well, PHP is very good at extracting URL variables, which we set on the “content” page. If you don’t have access to PHP on your server, you can do the same thing with Javascript, it’s just a little more involved (see a snippet). Our script determines if a redirect location was set and sends the user to the appropriate page.

That’s it—follow these steps and you’ll be keeping kids out of your age-restricted pages in no time. Well, that probably isn’t true, but you WILL be abiding by the law as a website administrator. For a look at this script in action, it is the current implementation at edwinton.com.

Happy programming!

Firefox Tip: How to Prevent JavaScript Code from Resizing Your Browser Window

Have you ever been browsing the internet, opened a new link, and suddenly had your entire browser window change size?  This is a trick that web developers can easily do with JavaScript (and was heavily used in the “older” days of the internet) but has become a nuisance in modern times.  If I’ve got a pile of tabs open, I don’t like my newly-opened tab kicking my browser to 680×480 just because an antique webpage was built to that resolution.

If you’re using Firefox, there is a very simple way to prevent websites from resizing your browser window without disabling JavaScript altogether.  Sure, disabling JavaScript is the kill-all solution (and would be more secure for your browser), but there are way too many legitimate uses for JavaScript for me to suggest doing that.

Disabling JavaScript’s Ability to Resize Your Browser Window in Firefox

Note: In this guide, I’ll be using Firefox version 3.6.8.  Details in this procedure may vary according to your version.

Step 1: In Firefox, click Tools then select Options.

Step 2: Click the Content tab, then click the Advanced… button to the right of Enable JavaScript.

Step 3: Uncheck the box that says “Move or resize existing windows“.

That’s it!  Those pesky websites won’t be able to resize your browser window anymore.  Make sure to check out the rest of our articles about Firefox!

Image credit: Mixy Lorenzo (seriously, how good does that cupcake look?)