Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

April 02 2013

22:47

Best of Tuts+ in March 2013

Each month, we bring together a selection of the best tutorials and articles from across the whole Tuts+ network. Whether you’d like to read the top posts from your favourite site, or would like to start learning something completely new, this is the best place to start!


Psdtuts+ — Photoshop Tutorials

  • Create a Heroic Firefighter Painting in Photoshop

    Firefighters do so much to help keep us safe. In this tutorial, we will honor our firefighters by creating a digital painting that depicts a firefighter coming to the rescue. Let’s get started!

    Visit Article

  • Why You’re Not as Popular as You Should Be

    With so many artists competing for the same work, getting noticed can be a challenging task. As the editor of Psdtuts+, I have had the opportunity to interact with some exceptionally talented artists and designers from all over the world. This proximity to so many artists has given me a unique perspective, and over the years, I have been able to make a lot of observations about what it takes for artists to increase their visibility and to raise their online profiles. In this article, I wanted to share several reasons why you might not be getting as much attention as you should.

    Visit Article

  • Create an Adorable Children’s Illustration

    What child wouldn’t love a real-life teddy bear to have as a friend? In this tutorial, we will show you how to create an adorable children’s illustration using digital painting techniques in Photoshop. Let’s get started!

    Visit Article


Nettuts+ — Web Development

  • Round Table #1: Should Exceptions Ever be Used for Flow Control?

    I’m pleased to release our first ever round table, where we place a group of developers in a locked room (not really), and ask them to debate one another on a single topic. In this first entry, we discuss exceptions and flow control.

    Visit Article

  • Pro Workflow in Laravel and Sublime Text

    Not too long ago, I built a handful of generators for Laravel, which ease the process of various tasks. Today, thanks to help from Gaurav Narula, we’re turning things up a notch with the release of a new Sublime Text plugin that leverages the power of Artisan and the generators from directly within your editor.

    Visit Article

  • The Command Line is Your Best Friend

    The command line can either be your best friend, or your worst enemy. It simply depends on how you use it, and what you use it for. If you’re one of the many people who cringe at the mere thought of using the command line, then you’ve come to the right place!

    Visit Article


Vectortuts+ — Illustrator Tutorials


Webdesigntuts+ — Web Design Tutorials

  • Your Logo, as a Web Font Ligature

    Let’s look at an alternative approach for displaying logos on a web page. Normally, you’ll approach the challenge by using an img tag. Perhaps you’ll use image replacement through CSS, perhaps you’ll even venture into SVG files, but have you considered what’s possible by designing your own web font ligature?

    Visit Article

  • How They Did It: The Accessibility Project

    Perhaps you, or someone you know, has experienced the difficulties of computer interaction for the impaired. In general, operating systems and software suites have made provisions for accessibility for hearing-impaired audience, vision-impaired audience, and internationalization; however, the open web hasn’t caught up as quickly. Many sites ignore accessibility completely.

    Visit Article

  • Fireworks in the Real World

    There’s a very good chance you know what Adobe Fireworks is, especially if you regularly use Photoshop or any of the other Adobe products. There’s an equally good chance you’ve never really taken the opportunity to see how it can help your web design workflow, even if you’ve always meant to. This session is here to put that right. Follow Leigh Howells as he demonstrates exactly what Fireworks can do for you in the real world.

    Visit Article


Phototuts+ — Photography Tutorials

  • How to Shoot Video on Your Canon Rebel

    The explosion of filmmaking since its democratization in 2008 has meant increasingly cheap ways of exploring the possibilities of motion pictures. One of the most popular cameras in recent times for beginners to start shooting on is the Canon Rebel series. Today, I’m going to take a look at the basics of getting your Rebel rolling, and provide some ideas on how to improve and develop those first attempts.

    Visit Article

  • How to Turn a Photograph into a Dynamic Panograph

    Panography was created to depict the way we naturally see. The way our eyes pick up on the details of a place or subject, then arrange them into a single image. The scale of detail you choose to create depends on the final image you see. Today, we’re going to take the style and techniques of panography and apply it to images we’ve already taken.

    Visit Article

  • Understanding & Using Ansel Adam’s Zone System

    The Zone System is an approach to a standardized way of working that guarantees a correct exposure in every situation, even in the trickiest lighting conditions such as back lighting, extreme difference between light and shadow areas of a scene, and many similar conditions that are most likely going to throw off your camera’s metering giving you a completely incorrect exposure.

    Visit Article


Cgtuts+ — Computer Graphics Tutorials


Aetuts+ — After Effects Tutorials

  • Make a Magnificent Magnifying Glass That Really Works

    In this tutorial we are going to create a beautiful Magnifying Glass in After Effects. Using just one null object as a Controller we will be able to change all the parameters: Size, Distance, Rotation, Blur, Shadow, and Background. Everything is going to be automatic, and this will save you a bunch of time when animating!

    Visit Article

  • Download A Free Tool for Making Animated Alphabet Blocks

    Do you want to create a fun video for kids in just a few minutes? Check out this free After Effects® project file that will help you create words in any language and animate them in a colorful way. The project template is set up with a visual interface that makes it easy for beginner After Effects® users to customize. Take a look at the video tutorial for an overview of the template options, and get ready to spark your viewer’s imagination!

    Visit Article

  • How to Animate Retro Pixel Art in After Effects

    Pixel drawings are really small compared to an HD video canvas. This tutorial explores the common failure points when bringing your pixel artwork into a 1080p comp in After Effects. Scaling and looping are covered as well as a workflow for preparing your frames for animation in the free sprite editor ASEprite and Adobe Photoshop.

    Visit Article


Audiotuts+ — Audio & Production Tutorials

  • Mixing With Headphones

    For some people it is not practical to use loudspeakers to mix their music tracks. It might be that their neighbours are easily disturbed, or their acoustic environment is not up to scratch. Despite the fact it is not usually recommended, many people make decent mixdowns using only headphones.

    Visit Article

  • Extracting MIDI from Audio in Ableton Live 9

    Ableton Live 9 has arrived, and among its new features is the ability to convert melody and drums into MIDI. In this tutorial we show you how to use these features, as well as some of their limitations.

    Visit Article

  • Setting Up Your MIDI Controller Inside Studio One

    Studio One 2.5 is quickly becoming my go to DAW in my studio. If you are new to Studio One or are using the free version PreSonus has made available, I want to show you how you can quickly set up you MIDI controller inside of Studio One, if it is not in the list of preset devices.

    Visit Article


Wptuts+ — WordPress Tutorials

  • Check Out the New Recommended Resources on Wptuts+

    We’ve added a new page to the site, which will help WordPress pros grab top quality software, tools and services. It’s filled with our favorite WordPress resources. You can jump straight over to our Recommended Resources page here on Wptuts+ or read on for further information.

    Visit Article

  • A Beginner’s Guide to Enqueuing jQuery

    In this post, we’re going to review a few concepts around jQuery and WordPress to make sure that we, as developers, are not only working to build our products correctly, but that we also know how to properly diagnose problems as they arise in our customer’s sites.

    Visit Article

  • Cross-Site Scripting in WordPress: What Is XSS?

    In this two part series, we’re going to take a look at what cross-site scripting really is, its dangers, how it impacts WordPress development, and then practical steps that we can take for testing our themes and plugins.

    Visit Article


Mobiletuts+ — Mobile Development Tutorials

  • Geofencing with Core Location

    With the release of iOS 4, the Core Location framework received a significant update by providing support for geofencing. Not only can an application be notified when the device enters or exits a geofence, the operating system also notifies when the application is in the background. This addition to the Core Location framework fits neatly in Apple’s endeavor to support multitasking on iOS. This opens up a number of possibilities, such as performing tasks in the background through geofencing and that is exactly what this tutorial is about.

    Visit Article

  • Create an Unblock Puzzle Game – Interface Creation

    In this tutorial series, you’ll learn how to create an unblock puzzle game. The objective of the game is to clear the path for the square to get out. Read on!

    Visit Article

  • Decoding the iOS 6 SDK Available Now!

    Rockable Press is proud to present our latest release: Decoding the iOS 6 SDK. Written by five seasoned iOS experts and packed with almost 500 pages of essential iOS 6 development fundamentals, this great new eBook will quickly get you up to speed with the iOS 6 SDK and all the fundamental changes that occurred to Xcode and the iOS device landscape in 2012. Get your copy now!

    Visit Article


Gamedevtuts+ — Game Development

  • 3D Primer for Game Developers: An Overview of 3D Modeling in Games

    Almost every major game released these days is made in 3D or uses a heavy amount of 3D assets. While there are still many games made in 2D, even platforms like Flash are now integrating 3D. In this bumper-length article I am going to explore what separates games from other mediums that use 3D art, and cover some of the important topics to consider when making 3D art for games.

    Visit Article

  • How to Learn Flixel

    Flixel is a free and open source 2D game development framework written by Adam “Atomic” Saltsman (Canabalt, Hundreds) in AS3 for making Flash games. It is a very mature, flexible and robust library. In this article, we’ll introduce you to the platform and its capabilities, and share tutorials, plugins, and suggestions to get you started developing games with it.

    Visit Article

  • From Zero to Pitch: A Walkthrough for Game Designers

    Would you believe me if I told you that after you finish reading and participating in the activities established in this article, you will have a game designed and ready to be developed? Yes, I know it sounds inconceivable, but trust me – this series of unconventional exercises will explain the workflow of designing a brand new game from zero to pitch.

    Visit Article


Mactuts+ — Mac & OS X

  • Quick Tip: Combine PDF Files in Preview

    Have you wondered if it was possible to merge similar PDF files together into one file without downloading third-party software? Well, turns out you can–and it’s really simple, too! In this screencast we show you how to easily merge your PDFs into one document using Preview.

    Visit Article

  • Go Paperless With Doxie

    If you’re wanting to reduce your paper clutter and digitise your old bank statements and receipts, a Doxie scanner is definitely the way to go. In this guide we’ll show you how to get the most from your Mac and Doxie.

    Visit Article

  • 9 Hazel Rules to Increase Your Productivity

    Hazel, a folder monitoring application, has long been a favorite among many a Mac enthusiast. Hazel will automatically take action on your files, using the rules you create, keeping your folders in order. If you’ve wished that all of your downloaded music or any other sort of files would just do what you wanted them to, using only the power of your mind, well, this is the next best thing. We’ll look step-by-step at how to create a rule from scratch and then set up nine rules you can customize for your needs.

    Visit Article


Crafttuts+ — Craft & Handmade

  • Make Your Own Mini Macrame Succulent Egg Decorations for Easter

    I’ve been thinking about a simple and contemporary way to add a little Easter decoration to my home as I don’t really want bunnies and eggs everywhere! These mini succulent egg decorations fit the bill nicely for me with a bit of macrame, some dip-dying, cute succulents, and of course eggs.

    Visit Article

  • Transform an Old Sweater Into an Adorable Bunny Softie for Easter

    Do you have a favourite sweater that you can’t wear anymore because it (a) shrunk in the dryer; (b) got a stain or (c) developed a hole? If you can answer ‘yes’ to one (or more) of the above, don’t despair. With this tutorial you will learn how to transform and re-purpose an old sweater (or a charity shop find) into a very sweet Easter bunny plush. Let’s get started.

    Visit Article

  • The Prettiest Egg Decorations to Make This Easter

    Easter is just around the corner and this pretty project will inject some colour into your decor. In this tutorial you’ll learn how to dye brightly-coloured eggs and embellish them with sweet silhouettes. You can download our free silhouette pattern to make the project super-easy. Read on for the full instructions after the jump.

    Visit Article


FreelanceSwitch — Freelance Jobs & Information

  • 40 Attention-Getting Post Topic Ideas for Your Freelancer’s Blog

    Blogging is not a hard-sell environment. Readers expect to get useful information in posts, not pitches to hire you. So what can you write about? Quick tip: Provide useful or interesting information your prospects can use, and your readers will keep coming back — and some may end up becoming your clients. Here are 40 specific ideas for quick-and-easy blog topics that will attract quality prospects and then keep them interested.

    Visit Article

  • Google+ Networking: Circles and Communities

    Social networking is all about staying in touch with friends and making new contacts. On Google Plus, you add friends by putting them into your circles. You meet new people by hanging out in Google Plus communities.
    In this article, I give you a freelancer’s guide to who you should add to your circles, how to meet new people in communities, and how to use communities and circles as a marketing tool.

    Visit Article

  • The Incentives that Will Convince Subscribers to Sign Up for Your Email Newsletter

    There are a lot of options on what incentives you can offer to potential readers. Before leaping in to creating any type of incentive piece, make sure you know exactly what will attract your audience. If necessary, survey a few of the people you’d most like to sign up for your list about what they really need.

    Visit Article


Tuts+ Premium — Creative & Technical Skills

  • WordPress Widgets: Front To Back

    In this course, we’ll review the process of building custom WordPress widgets using the WordPress API and advanced development techniques. This course begins at ground zero, and assumes that you have no experience with WordPress widget development. Stick with me for a few hours, and you’ll learn a lot! Let’s get to it.

    Visit Article

  • Django Unchained

    In this course, join me, Christopher Roach, as I walk you through the creation of a simple Hacker News clone. Along the way, you’ll learn all the basics, including working with views, templates, the ORM, and even some of the more powerful features of the framework, like setting up the admin app and handling AJAX calls.

    Visit Article

  • Digital Drawing Fundamentals

    Whether you’re an ambitious illustrator or an experienced designer, almost everyone wants to improve their traditional drawing skills. Kirk Nelson is here to do just that! As an experienced digital painter and designer, Kirk walks you through the building blocks of digital drawing, shapes and shading, composing and perspective, and much more. Grab your tablet or stylus and let’s get started.

    Visit Article

September 03 2012

20:46

Best of Tuts+ in August 2012

Each month, we bring together a selection of the best tutorials and articles from across the whole Tuts+ network. Whether you’d like to read the top posts from your favourite site, or would like to start learning something completely new, this is the best place to start!


Psdtuts+ — Photoshop Tutorials


Nettuts+ — Web Development Tutorials


Vectortuts+ — Illustrator Tutorials


Webdesigntuts+ — Web Design Tutorials

  • Emulating Microsoft’s Metro Design Language

    Emulating Microsoft’s Metro Design Language

    Over the past few years, Microsoft has adopted its incumbent design language to a significant extent. Metro is the aesthetic basis of Windows 8; Microsoft’s next operating system shipping this October. Let’s take a look at what Metro is, how we can emulate some of its desirable principles and take a look at where it’s being used already.

    Visit Article

  • Quick and Easy Documentation Using Markdown

    Quick and Easy Documentation Using Markdown

    So youve created an awesome theme, template or web application. Now for the tedious part; the documentation. Writing the content won’t necessarily be that problematic, it’s more likely creating the help files which will take up precious time. Markdown, a lightweight and *really* simple formatting syntax can solve all that for you.

    Visit Article

  • Skeleton to WordPress: Getting up and Running

    Skeleton to WordPress: Getting up and Running

    During previous parts of this series we’ve covered a lot. We took a Photoshop layout, built it into an adaptive web page using the Skeleton framework, explored aspects of CSS3, implemented various jQuery plugins and considered our options


    Phototuts+ — Photography Tutorials

    • Phototuts+ & Lomography Present the Portraits of Summer Competition

      Phototuts+ & Lomography Present the Portraits of Summer Competition

      Lomography and Phototuts+ have joined forces to bring you a photo competition that will bring out your true photography skills. We would like to present the Portraits of Summer competition! Just follow one of the two tutorials and submit your photos. Check out more information after the jump!

      Visit Article

    • An Introduction to Holga Photography

      An Introduction to Holga Photography

      The Holga is a camera, first manufactured in China in 1981, made almost entirely of plastic, some even have plastic lenses. It was an invention intended for the Chinese consumer as a low-budget, everyday kind of camera for capturing family photos and portraits, but has since gathered a cult following.

      Visit Article

    • Making Your Vacation Portraits Pop!

      Making Your Vacation Portraits Pop!

      Its holiday season, and what better time to take your camera out and about to capture not only those scenic holiday destinations, but the people that youre sharing them with. Here are a few top tips on how to take eye catching and engaging vacation portraits.

      Visit Article

    • The Principles and Strategies of Brand Photography

      The Principles and Strategies of Brand Photography

      For many photographers, it can be difficult to earn a living from taking the photos that inspire and excite them and therefore have to find other means to support themselves. However, sometimes the answer is closer to home than you think. Working as a commercial product photographer can not only provide financially, but also has it’s own specific creative challenges and difficulties to face.

      Visit Article


    Cgtuts+ — Computer Graphics Tutorials

    • Correctly Setting Up a Linear Workflow in Maya

      Correctly Setting Up a Linear Workflow in Maya

      So you might often find yourself wondering “what the hell is a linear workflow?” It’s the kind of thing that gives cg artists nightmares, waking in a cold sweat, afraid, left stumbling to your computer looking for answers…well you’re not alone. Working linearly is one of the most misunderstood, confusing aspects of computer graphics for all artists, new or experienced. But fear not friends, James Whiffin is here to help turn that frown upside down by giving you a crash course on working linearly.

      Visit Article

    • Creating The iPhone 4S In 3D Studio Max, Part 1

      Creating The iPhone 4S In 3D Studio Max, Part 1

      In this new multi-part project, we’ll be creating the iPhone 4S in 3d Studio Max using tried and true poly modeling techniques. You’ll learn how to setup and model from six view blueprints, create precision cuts and holes, terminate edge loops and how to add proper supporting geometry to retain surface shape when adding subdivision.

      Visit Article


    Aetuts+ — After Effects Tutorials

    • Summer 2012 DSLR Camera Line-up

      Summer 2012 DSLR Camera Line-up

      This article features a list of cameras released since the publishing of Knowing The Basics Of The Video Mode On Your DSLR Camera, and is designed to be an appendage to that article, along with an updated sensor chart for reference. *see below
      Note: Cameras are first listed by maker and then by price. All ISO specifications are the expanded limits of the cameras.

      Visit Article

    • Iron Man Interface Battle Widget – Parts 1 and 2

      Iron Man Interface Battle Widget – Parts 1 and 2

      In this tutorial series we are going to go beyond basics using the true power of shape layers inside After Effects. As you can see we are going to dive into the magic of creating this Iron Man battle widget inspired from The Avengers movie. We are going to recreate the element from start to finish using various different techniques and learning some pretty cool workflow tips as well.

      Visit Article

    • Linear Workflow For The After Effects User

      Linear Workflow For The After Effects User

      In this tutorial we’ll look at some of the problems caused when working in sRGB color space and how we can fix these problems using a linear workflow. Let’s jump in!

      Visit Article


    Audiotuts+ — Audio & Production Tutorials

    • Dynamic Reverb Returns

      Dynamic Reverb Returns

      In this tutorial Mo Volans teaches you a great technique for taming your reverb: Dynamic Reverb Returns. Here we demonstrate with Logic Pro, but the technique works in most other DAWs.

      Visit Article

    • How the Hell do I Use Reverb Again?!?

      How the Hell do I Use Reverb Again?!?

      Welcome to the unannounced bastard child of my old and golden tutorial, How the Hell do I Use Reverb Anyway?!? If you need a primer on the basics of reverb, I highly recommend you read that one before you jump into this one. It goes over everything you need to know about reverb: all the knobs and buttons you need to familiarize yourself with.

      Instead of continuing on with the theory that you can read in the previous tutorial, I’m going to jump into some easy to use reverb tricks that can really help you in your mixes. We’ll be looking at some simple, but invaluable tips to using reverb effectively without cluttering up your instruments.

      Visit Article

    • EQ -

      EQ – The Most Important Part of Mastering

      I was mastering an EP recently and I really thought I’d done a decent job on the mix. I set up the tracks in order and found the correct levels for all of them, making sure they all sound equally loud and such. Then I got to work and set up my mastering processors, which are basically just EQ and compression. After a few EQ tweaks here and there, a little bit in the lows, a small boost in the highs, a subtle dip in the mids, you know the drill. Well, after a while I started A/B’ing the before and after.

      Visit Article


    Wptuts+ — WordPress Tutorials

    • Functionality: Plugins vs Themes

      Functionality: Plugins vs Themes

      There are a lot of factors that influence performance on your WordPress site, and one of the tricks that “experts” will often tell you to do is avoid plugins. They will tell you it is better to place functionality inside of your theme, instead of activating a plugin. Is this true?

      Visit Article

    • Conquering the wp-config.php File – 11 Good Practices

      Conquering the wp-config.php File – 11 Good Practices

      There are 981 files and 95 folders which come with the WordPress (v3.4.1) package. None of these files need manual modification, except the wp-config.php file. Of course, we don’t have to edit the file if we’re fine with the default WordPress configuration but it’s essential that we learn how to conquer the file in order to apply security precautions, speed tricks and other stuff which we will be studying in this article.

      Visit Article

    • How to Include and Require Files and Templates in WordPress

      How to Include and Require Files and Templates in WordPress

      When it comes to PHP, a lot of developers love the language, a lot of the developers hate the language, and a lot of developers generally just use it to get their work done.

      Visit Article


    Mobiletuts+ — Mobile Development Tutorials


    Mactuts+ — Mac & OS X Tutorials

    • 11 Things You Didn’t Know About Mountain Lion

      Things You Didn’t Know About Mountain Lion

      OS X Mountain Lion includes over 200 new features for your Mac, but some of the major ones arent mentioned on the official webpage. If you go looking around in nooks and crannies, you might just find some valuable minor features that youd never even thought of. Ive been using the operating system since its first developer preview was released and there are a few nifty features that lie tucked away and out of plain sight. Read on to see what they are!

      Visit Article

    • Navigating the Terminal: A Gentle Introduction

      Navigating the Terminal: A Gentle Introduction

      It may seem like the kind of geeky realm that only hackers are fit to inhabit, but the OS X Terminal is a powerful and versatile method of interacting with your computer that offers advantages to users of all skill levels. It’s quite a departure from what you might be used to though, so we’re here to help you take your first steps.

      Visit Article


    Gamedevtuts+ — Game Development

    • Make a Splash With Dynamic 2D Water Effects

      Make a Splash With Dynamic 2D Water Effects

      Sploosh! In this tutorial, I’ll show you how you can use simple math, physics, and particle effects to simulate great looking 2D water waves and droplets.

      Visit Article

    • Growing From (and Surviving) Mod Teams

      Growing From (and Surviving) Mod Teams

      Breaking into the game industry can be a long and rocky road — where does one even begin? There are many avenues to take on the journey to making games, and the best path is different for each person. For those looking to jump right in and start making games, I propose to you this: join a mod team! But what exactly is a mod team and how do you find one that’s right for you? Let’s figure that out…

      Visit Article

    • Collision Detection Using the Separating Axis Theorem

      Collision Detection Using the Separating Axis Theorem

      The Separating Axis Theorem is often used to check for collisions between two simple polygons, or between a polygon and a circle. As with all algorithms, it has its strengths and its weaknesses. In this tutorial, we’ll go over the math behind the theorem, and show how it can be used in game development with some sample code and demos.

      Visit Article



Tags: Web Roundups

August 02 2012

19:52

Best of Tuts+ in July 2012

Each month, we bring together a selection of the best tutorials and articles from across the whole Tuts+ network. Whether you’d like to read the top posts from your favorite site, or would like to start learning something completely new, this is the best place to start!


Psdtuts+ — Photoshop Tutorials


Nettuts+ — Web Development Tutorials


Vectortuts+ — Illustrator Tutorials

  • How to Create Hand-Painted Sign in Adobe Illustrator

    How to Create Hand-Painted Sign in Adobe Illustrator

    In this tutorial we will learn how to create an inscription in a retro style based on the free font- the Agency FB. In the process of the font-change we will learn something about letter anatomy. The techniques described here will be useful not only for the work with typography but also for the work with any vector objects.

    Visit Article

  • Creating the Sole of a Sports Shoe with the Appearance Panel

    Creating the Sole of a Sports Shoe with the Appearance Panel

    In today’s tutorial I’m going to show you how I used the Appearance panel to create a stylized version of the bottom of a sneaker. It’s a great exercise for those who are just getting to grips with the Appearance panel.

    Visit Article

  • Quick Tip: How to Create Glowing Progress Bars

    Quick Tip: How to Create Glowing Progress Bars

    Follow this quick tip and learn how to create a glowing progress bar. We will take advantage of the Appearance Panel and use multiple attributes plus plenty of effects: Outer Glow, Inner Glow, Feather, Drop Shadow, Gaussian Blur and Radial Blur. Let’s begin!.

    Visit Article


Webdesigntuts+ — Web Design Tutorials

  • Web Font Services: the Good, the Bad, and the Ugly

    Web Font Services: the Good, the Bad, and the Ugly

    In this article we’ll be taking a look at a few of the most popular web font services, comparing features between them and talking about some of the red flags involved with working with real fonts on the web.

    Visit Article

  • Writing a Flexible Grid Script for Photoshop

    Writing a Flexible Grid Script for Photoshop

    Being a capable web designer means having a solid grasp on grids, especially if you want to pursue responsive web design. In this tutorial we’ll take a look at a Photoshop script for generating your own custom grids, plus we’ll open the hood and look at how the script is actually made.

    Visit Article

  • The Psychology of Content Design

    The Psychology of Content Design

    As web designers, we face a difficult task every time we sit down to produce content for the web. There’s no doubt that we understand Content is King; this term was most famously coined by Bill Gates in 1996, and (love or hate Microsoft) he was right about the future of computing.

    Visit Article


Phototuts+ — Photography Tutorials

  • An In-Depth Guide to Infrared Photography: Setup and Capture

    An In-Depth Guide to Infrared Photography: Setup and Capture

    Infrared photographs are a stunning way to make unique landscape photos, and will add variety to your portfolio. Understanding how to take and process them properly can be very difficult and time consuming due to the steep learning curve involved, but I hope to help.

    Visit Article

  • 20 Fast Tips for Portrait Photography

    Fast Tips for Portrait Photography

    I love portrait photography. I’m sure many of you do, too. However, doing a great portrait is one of the most challenging kinds of photography out there. So, here are 20 tips that will help you take better portraits and improve your workflow.

    Visit Article

  • Faces of Music: Interview with Andy Fallon

    Faces of Music: Interview with Andy Fallon

    I recently had the pleasure of meeting one of the UK’s top portrait photographers. Andy Fallon is at the top of his game. Over the past decade, he has been the go-to photographer for the top music magazines to capture their cover stars. Andy’s now moving on from the world of music and branching into new realms of portraiture. We met up with him to find out more.

    Visit Article


Cgtuts+ — Computer Graphics Tutorials

  • The Making Of “Brooklyn City”

    The Making Of “Brooklyn City”

    This tutorial is intend for anyone who wants a better understanding of what and why they’re doing what they’re doing. A higher level view of my personal workflow towards creating large scale environments. This is not a ’How to snap boxes onto a grid” type of tutorial, there’s nothing wrong with those types of tutorials, but I want to really provide a different perspective on a ‘making of tutorial.

    Visit Article

  • Creating A Low Poly Ninja Game Character Using Blender – Modeling

    Creating A Low Poly Ninja Game Character Using Blender – Modeling

    In this tutorial you’ll learn how to create a low poly ninja character model for games using Blender. The final model will be around 1,200 polys, which is a good amount for iphone or ipad games. Although this tutorial covers building the character in Blender, the workflow is universal and can easily be followed using any other 3D modeling/software package.

    Visit Article

  • An Introduction To Backburner And Render Farms

    An Introduction To Backburner And Render Farms

    This tutorial will teach you how to setup and utilize Autodesk’s Backburner software over multiple computers to speed up your render times. You’ll also learn about making smart decisions and choosing the most cost effective hardware when purchasing components for a personal or small studio sized render farm. If you’re a freelancer on a deadline, or just a hobbyist who wants to get more done – faster, this is a must watch!

    Visit Article


Aetuts+ — After Effects Tutorials


Audiotuts+ — Audio & Production Tutorials

  • Multi Track vs. Multi Channel Drum Setups In Your DAW

    Multi Track vs. Multi Channel Drum Setups In Your DAW

    I’ve been producing Electronic Dance Music for what seems like forever. I remember in the late nineties when I was just getting interested in computer based music sitting at my computer looking at the Sound Blaster General MIDI instrument wishing I knew how the heck to use it. Fast forward ten plus years past Fruity Loops 4, Sonic Foundry Acid Pro, Cool Edit and Reason 2.0, and I’ve learned a thing or two about making EDM.

    Visit Article

  • 20 Vibrant and Helpful Audio Forums Where You Can Find Support

    Vibrant and Helpful Audio Forums Where You Can Find Support

    Sometimes you’ll encounter a question or problem so specific, it’s unlikely you’ll find a tutorial that will help. Or you’re contemplating buying a new piece of gear, and you’d really like to hear from others who have experience with it before parting with your cash. You need a forum. A good one!

    Visit Article

  • Maximize Your Workflow in Logic with Folders

    Maximize Your Workflow in Logic with Folders

    I use Logic Pro quite extensively to compose and produce music. But one feature I never fully explored until recently was folders. I was aware they existed, but I just never seemed to have a practical use for them.

    Visit Article


Wptuts+ — WordPress Tutorials

  • Making the WordPress Editor Look Pretty Using CodeMirror

    Making the WordPress Editor Look Pretty Using CodeMirror

    WordPress contains two built-in editors that allow you to edit theme files directly from within the browser, they the Theme Editor and Plugin Editor. By default, the editor looks very simple, and hard to edit because the colors are totally black and grey. In this tutorial, I will show you how to integrate CodeMirror.js into the editors to make the look prettier. Our code snippets will be highlighted with more color, the editors will even have line numbers, and more.

    Visit Article

  • The Journey to WordPress 3.5 Begins

    The Journey to WordPress 3.5 Begins

    Hopefully by now, all your WordPress installations are successfully upgraded to version 3.4. One of the most exciting things about a version release is that work can then begin on the next version! Here’s a sneaky preview of what was discussed in the latest dev chat scoping session for WordPress 3.5.

    Visit Article

  • Integrating Google Rich Snippets Into a WordPress Theme

    Integrating Google Rich Snippets Into a WordPress Theme

    We’re all familiar with the way Google presents search results – with a page title and a little snippet of text for each result. With Google Rich Snippets we can add useful information to the web search result snippet to make it stand out from other results and ultimately attract more visitors. While there are already plugins that provide this kind of functionality in WordPress, there are situations when relaying on a third party plugin is not advisable. In this tutorial, we are going to integrate the microdata format into WordPress theme markup to display a culinary recipe, and make it compatible with Google Rich Snippets’ requirements.

    Visit Article


Mobiletuts+ — Mobile Development Tutorials

  • iOS 5 and the Twitter Framework: First Steps

    iOS 5 and the Twitter Framework: First Steps

    With the release of iOS 5, a small yet powerful framework is available for developers to quickly to integrate Twitter within an application. This tutorial will teach you how to make life much easier by using the Twitter framework!

    Visit Article

  • Capture and Crop an Image with the Device Camera

    Capture and Crop an Image with the Device Camera

    Many Android devices are equipped with built-in cameras. In this tutorial, we will work through the basic technique for capturing an image using the Android camera and then cropping it using apps the user already has installed on their device. Along the way, I’ll also show how to account for users whose devices do not support either the image capture or cropping actions.

    Visit Article

  • Build a Cross-Platform Puzzle Game with ShiVa3D Suite

    Build a Cross-Platform Puzzle Game with ShiVa3D Suite

    In this tutorial series, we will focus on cross-platform game development for the iPad and Android tablets using the ShiVa3D Suite game development framework. Although mainly for 3D games, ShiVa3D Suite can be used to develop 2D games as well. “Puzzle”, the game described in this series, is an example of a relatively simple 2D game that can be quickly created with ShiVa3D.

    Visit Article


Mactuts+ — Mac & OS X Tutorials

  • Create a Foolproof Backup System for Your Mac

    Create a Foolproof Backup System for Your Mac

    Over the course of this tutorial, Ill walk you through setting up a backup plan that works for you, Ill tell you about the surprising number of options available (and why you shouldnt pick just one!) and Ill also point out some of the subtler benefits to backing up that you may not have considered.

    Visit Article

  • 10 Tips for a Better Finder Experience

    Tips for a Better Finder Experience

    The Finder app is arguably the most central element of the OS X user experience. It lies at the very heart of nearly everything you do. In light of this, you should learn to make the most of it! Follow along as we go over ten awesome tips for improving your Finder use. We’ll cover everything from adding tabs to hidden shortcuts.

    Visit Article

  • Quick Tip: Get to Know Safari 6

    Quick Tip: Get to Know Safari 6

    Mountain Lion is officially here and along with that launch comes Safari 6, a major update to my favorite browser. In this QuickTip we’re going to take a brief look at how to use some of the great new features.

    Visit Article


Gamedevtuts+ — Game Development

  • Build a Canabalt-Style Infinite Runner From Scratch

    Build a Canabalt-Style Infinite Runner From Scratch

    With this screencast tutorial, you’ll create an infinitely scrolling, Canabalt-style platformer, from start to finish. The final game has randomly generated levels, player movement, death conditions and basic scoring. No previous programming or game development experience is required and graphics are provided for you, so all you need is a copy of Multimedia Fusion 2 (which has a free demo).

    Visit Article

  • Coding Destructible Pixel Terrain: How to Make Everything Explode

    Coding Destructible Pixel Terrain: How to Make Everything Explode

    In this tutorial, we’ll implement fully destructible pixel terrain, in the style of games like Cortex Command and Worms. You’ll learn how to make the world explode wherever you shoot it – and how to make the “dust” settle on the ground to create new land.

    Visit Article

  • When Designing a World, Player Mobility Must Come First

    When Designing a World, Player Mobility Must Come First

    Ever played a game that was packed with great set pieces, concepts, characters, and mechanics, but nevertheless felt boring? Perhaps the problem lay in how your character moved through and interacted with the game world. In this article we’ll take a look at player/world interaction through the lens of player mobility for a few key games, and see how this helps us understand the way level design and character design should work together.

    Visit Article


March 02 2012

17:30

Best of Tuts+ in February 2012

Each month, we bring together a selection of the best tutorials and articles from across the whole Tuts+ network. Whether you’d like to read the top posts from your favourite site, or would like to start learning something completely new, this is the best place to start!


Psdtuts+ — Photoshop Tutorials

  • Create a Baseball-Inspired Text Effect in Photoshop

    Create a Baseball-Inspired Text Effect in Photoshop

    Applying texture to a text effect can be a lot of fun. In this tutorial we will explain how to create a baseball-inspired text effect using layer styles, patterns, and brushes. Let’s get started!

    Visit Article

  • Create a Mini Planet Using Photoshop’s 3D Capabilities

    Create a Mini Planet Using Photoshop’s 3D Capabilities

    When most people think about Photoshop, they probably don’t think about 3D. What most people don’t realize, however, is that Photoshop CS5 Extended includes some powerful tools to help you render your artwork in 3D. In this tutorial we will demonstrate how to create a mini planet using Photoshop’s 3D capabilities. Let’s get started!

    Visit Article

  • Create a Coffee Cake Photo Manipulation – Tuts+ Premium Tutorial

    Create a Coffee Cake Photo Manipulation – Tuts+ Premium Tutorial

    In this Tuts+ Premium tutorial, author Stephen Petrany will demonstrate how to take pieces from multiple photos and seamlessly blend them into a "coffee cake" photo manipulation. This tutorial will also explore unique ways to work with paths and smart objects. If you are looking to take your photo manipulation skills to the next level then Log in or Join Now to get started!

    Visit Article


  • Nettuts+ — Web Development Tutorials

  • The Largest jQuery Class in the World

    The Largest jQuery Class in the World

    A couple weeks ago, Tuts+ Premium launched a free new real-time course, called “30 Days to Learn jQuery.” After signing up, each member receives an email, linking to a new video lesson for an entire month.

    Visit Article

  • How to Customize Your Command Prompt

    How to Customize Your Command Prompt

    Lately, I’ve been getting this question a lot: “how did you get your terminal to look the way it does?” If you’ve noticed my terminal and are curious about how I set it up, this is the tutorial for you! Of course, what you learn here will be enough to get you started on creating your own custom command prompt, as well!

    Visit Article

  • Attention Developers: NewRelic is your Secret Weapon

    Attention Developers: NewRelic is your Secret Weapon

    While the title of this article may sound like a cliche, hatched in the bowels of PR hell, I’m serious when I say that NewRelic is your secret weapon.

    Visit Article


  • Vectortuts+ — Illustrator Tutorials

  • How to Create a Vintage Type Postcard

    How to Create a Vintage Type Postcard

    Follow this in-depth look at the process of designing type for a vintage style postcard in Adobe Illustrator CS5. Harken back to an era when postcards were all the rage with this friendly type style. The tutorial will delve into clipping masks, using bitmap images, working with layers and type effects.

    Visit Article

  • Create a Block Game Interface in Illustrator

    Create a Block Game Interface in Illustrator

    In the following tutorial you will learn how to create a block game interface in Adobe Illustrator CS5. Vector game graphics allow for versatile artwork. The workflow presented in this tutorial will teach you how to create game graphics in Illustrator. These techniques can be applied to multiple interface design and game design projects. It’s time to jump in, learn to create these shapes, and give them colorful graphic depth.

    Visit Article

  • 25+ Illustrator Tutorials for Creating Vintage Graphics and Retro Illustration

    Illustrator Tutorials for Creating Vintage Graphics and Retro Illustration

    If youre looking to improve your vector design skills, learn how to use Illustrator on a deeper level, and discover how to create vintage vector graphics, then you’ve landed on the right article. We’ve assembled a collection of tutorials that show you how to create vintage illustrations, and retro graphics using Illustrator effects and a variety of professional workflows.

    Visit Article


  • Webdesigntuts+ — Web Design Tutorials

  • Principles for Successful Button Design

    Principles for Successful Button Design

    There are a thousand ways to design and create buttons today and you only need to spend a small amount of time looking through work on dribbble to get a sense of them. A great deal of these examples are exactly the same, but occasionally there are the odd few that feel like they’ve had a little more care and attention in their making.

    Visit Article

  • Orman Clark’s Vertical Navigation Menu: The CSS3 Version

    Orman Clark’s Vertical Navigation Menu: The CSS3 Version

    Next in the Orman Clark’s coded PSD series is his awesome looking Vertical Navigation Menu. We’ll recreate it with CSS3 and jQuery while using the minimal amount of images possible.

    Visit Article

  • Coding the SimpleAdmin Theme: Login Page

    Coding the SimpleAdmin Theme: Login Page

    It’s time to translate our admin layout into a working template. We’ll begin by setting out the markup for our Login page, then we’ll hit the stylesheets..

    Visit Article


  • Phototuts+ — Photography Tutorials

  • The Stock Market: Exploring Stock Photography

    The Stock Market: Exploring Stock Photography

    Creative professionals all over the world frequently require high quality images, but often don’t have the budget to hire a photographer for small projects. Enter stock photography: an industry where awesome photographs are out there and ripe for the using. Today, we’ll be taking a look at the wild world of the stock market – stock photography, that is.

    Visit Article

  • Lightroom 4 Beta: Packed with New Features

    Lightroom 4 Beta: Packed with New Features

    In six short years, Adoble Lightroom has changed the way many photographers manage their images. With powerful cataloging and developing features, Lightroom offers photographers the ability to customize their photo management workflow and manage the thousands of images more efficiently than ever before. Adobe’s innovation continues with Lightroom 4, which is currently in Beta. Today, we’ll be taking a look at some of the new features of the latest iteration of Lightroom.

    Visit Article

  • A Primer to Digital Medium Format Camera

    A Primer to Digital Medium Format Camera

    Over the last few months, I’ve observed a trend among several well known photographers. No longer satisfied with crop factor cameras or even 35mm equivalent full frame digital cameras, more and more photographers are jumping to digital medium format. What are the advantages offered by digital medium formats, and will you be using one anytime soon? Read on to find out.

    Visit Article


  • Cgtuts+ — Computer Graphics Tutorials

  • Achieving 3D Realism: Reception Area Render With 3D Studio Max & V-Ray, Part 1

    Achieving 3D Realism: Reception Area Render With 3D Studio Max & V-Ray, Part 1

    The following tutorial is based on a real project. This unique tutorial will take users through the real process of creating shaders with bespoke physical properties and applying textures based on real photo references.

    Visit Article

  • Create And Render A Still Life Scene In Blender, Using Cycles

    Create And Render A Still Life Scene In Blender, Using Cycles

    Today, we’ll have a brief introduction to Blender’s new rendering engine – Cycles. This tutorial will cover modeling a small and easy still life scene, setting up different types of materials used in cycles and then finally lighting and rendering the scene.

    Visit Article

  • An Introduction To UVMapping In 3d Studio Max Using The Unwrap UVW Modifier

    An Introduction To UVMapping In 3d Studio Max Using The Unwrap UVW Modifier

    So UVMapping… you hate it, I hate it. But unfortunately it’s a necessary step in the process of completing most cg projects. In this tutorial we’ll look at creating uvs using the ‘Unwrap UVW’ modifier in 3D Studio Max, and discuss what uv mapping is, why it’s necessary and some ways to approach it.

    Visit Article


  • Aetuts+ — After Effects Tutorials

  • Create The Amazing Spider-Man Title Sequence Entirely In After Effects

    Create The Amazing Spider-Man Title Sequence Entirely In After Effects

    Nancy will show us how to create the title sequence for the Amazing Spider-Man entirely in After Effects using ShapeShifter AE. She shows us how to combine Shape Layers + Layer Masks to model and animate Spideys symbol. Download the free project file and follow along. You’ll be amazed at how easy it is to create!

    Visit Article

  • 3D Transforming Text With ShapeShifter AE

    D Transforming Text With ShapeShifter AE

    In this tutorial, we will be taking a look at how to build this 3D transforming text animation using Mettle’s ShapeShifter AE plug-in. We will also be enhancing some of the elements using 3rd party plug-ins such as Trapcode Shine (CC Light Burst alternative), Frischluft’s Out of Focus (Lens Blur alternative), and RE:Vision RSMB (CC Force Motion Blur alternative).

    Visit Article

  • Create An Awesome Array Of Shattering Strings

    Create An Awesome Array Of Shattering Strings

    We’ll be starting in Cinema 4d to create text fragments and use XPresso to export the Mograph positional data to After Effects. From there, we’ll jump over into After Effects and use expressions to connect 3d nulls to 2d data points… We’ll also be using a macro in Microsoft Word to edit multiple lines of expressions. It doesn’t matter if you’re a Cinema 4d user or strictly an After Effects user, today’s tutorial should be something helpful for everyone!

    Visit Article


  • Audiotuts+ — Audio & Production Tutorials

  • The 15 Minute Mix

    The 15 Minute Mix

    Consider this your challenge for today. Take a song that you just recorded, or have been working on and mix it in 15 minutes. Shut off everything, pull the faders up and follow the following tutorial. Use a stopwatch to keep track of time and when you should be switching tasks.

    If you don’t have any sessions to try, you can use any of these 50 different multi-tracks.

    Visit Article

  • 35 Audio Tutorial Sites That Will Keep You Learning

    Audio Tutorial Sites That Will Keep You Learning

    The reason you’re here on our site is because you’re interested in audio tutorials. I think we do a great job: we have a huge number of excellent tuts – both free and premium. But we know we haven’t cornered the market. There are an amazing number of audio tut sites out there, and the number seems to grow every year. Here are 35 of the best.

    Visit Article

  • Quick Tip: Creating Skrillex Style Tech Basslines in NI Massive

    Quick Tip: Creating Skrillex Style Tech Basslines in NI Massive

    This series of quick tips will outline how you can use the ever powerful NI Massive synth to create techy basslines used by artists such as Skrillex. In this example I have used Cubase but the same principles will translate to pretty much any other DAW. Here is an example of the kind of sound you can expect to end up with at the end of this series:

    Visit Article


  • Activetuts+ — Flash, Flex & ActionScript Tutorials

  • Review: Construct 2, a Drag and Drop HTML5 Game Maker

    Review: Construct 2, a Drag and Drop HTML5 Game Maker

    Construct 2 is an HTML5 game making tool that doesn’t require any programming knowledge. You just drag and drop items around, add behaviors to them, and make them come alive with “events”.

    Visit Article

  • Number Systems: An Introduction to Binary, Hexadecimal, and More

    Number Systems: An Introduction to Binary, Hexadecimal, and More

    Ever see crazy binary numbers and wonder what they meant? Ever see numbers with letters mixed in and wonder what is going on? You’ll find out all of this and more in this article. Hexadecimal doesn’t have to be scary.

    Visit Article

  • Understanding Affine Transformations With Matrix Mathematics

    Understanding Affine Transformations With Matrix Mathematics

    Inspired by Prof. Wildberger in his lecture series on linear algebra, I intend to implement his mathematical ideas with Flash. We shall not delve into the mathematical manipulation of matrices through linear algebra: just through vectors. This understanding, although diluting the elegance of linear algebra, is enough to launch us into some interesting possibilities of 2×2 matrix manipulation. In particular, we’ll use it to apply various shearing, skewing, flipping, and scaling effects to images at runtime.

    Visit Article


  • Wptuts+ — WordPress Tutorials

  • Creating a Filterable Portfolio with WordPress and jQuery

    Creating a Filterable Portfolio with WordPress and jQuery

    Learn in this tutorial how to make a filterable Portfolio with jQuery integrated with WordPress, remember that this portfolio kind can make a big difference on your themes!

    Visit Article

  • How to Include JavaScript and CSS in Your WordPress Themes and Plugins

    How to Include JavaScript and CSS in Your WordPress Themes and Plugins

    Knowing the proper way to include JavaScript and CSS files in your WordPress themes and plugins is very important for designers and developers. If you don’t adhere to best practices, you run the risk of conflicting with other themes and plugins, and potentially creating problems that could have been easily avoided. This article is intended as a reference for playing nicely with others.

    Visit Article

  • How to Create a Simple Post Rating System With WordPress and jQuery

    How to Create a Simple Post Rating System With WordPress and jQuery

    There already are many post rating system plugins out there. Surprisingly, no one fits my needs, they either are too complicated or with too many built-in options. So, in this tutorial, you’ll learn how to build your own simple post rating functionality, directly within your theme files. There’s no need for plugin!

    Visit Article


  • Mobiletuts+ — Mobile Development Tutorials

  • Getting Started With RenderScript on Android

    Getting Started With RenderScript on Android

    RenderScript is a scripting language on Android that allows you to write high performance graphic rendering and raw computational code. Learn more about RenderScript and write your first graphics app that leverages RenderScript in this tutorial.

    Visit Article

  • PhoneGap From Scratch: Twitter & Maps

    PhoneGap From Scratch: Twitter & Maps

    Want to learn how to use PhoneGap, but don’t know where to get started? Join us as we put together ’Sculder”, not only a tribute to an excellent science fiction TV series, but a fully-fledged native mobile application for the believer in you!

    Visit Article

  • Supplementing iAd Placement with AdMob

    Supplementing iAd Placement with AdMob

    Click-based advertising within a mobile application is a great way to make some money off of your free or inexpensive applications. While there are many choices out there, many iOS developers tend to go with the iAds platform for a variety of reasons including simplicity, aesthetics, and a high CPM.

    Visit Article


February 24 2012

00:58

The Top 15 Mobile Apps and Tools from CodeCanyon

With the proliferation and popularity of mobile sites, it’s no wonder that CodeCanyon’s Mobile Apps section has been growing in a big way. From iPhone to Android, developers have put together some amazing tools to help you with your mobile site development. Here’s a quick run down of some of the top selling mobile apps and tools from the marketplace. Check them out and get inspired for your next mobile site project!


1. Create Your Own App (No Programming Skills Needed)

Create your own iPhone/iPod Touch application with no code at all! Let customer find you in the Apple AppStore and improve your communication potential.


2. DOLPHIN – XML iPad/iPhone Slideshow&EBook Template

Dolphin, XML Driven App Template, compatible with iPad and iPhone, with many exciting features, give you flexible for colorful Ebook/Slideshow creation.


3. Appnx – Create an iPhone App using a web CMS

Appsnx is an engine that allows you to create fully native iPhone app using a web CMS and without a single line of code. You can create a simple app with text and images or make something more elaborated by using some of the awesome features that Appsnx includes.


4. iRadio iPhone App

Just copy / past your streaming link and it works! Play directly when you open the application. Tested on Wifi and 3G.


5. BizApp for Titanium

BizApp, an iOS template built on Appcelerator’s Titanium, is a perfect ‘brochure’ app.


6. QR Code Scanner App Template ( Scanner / Reader )

The QR Code Scanner App Template makes it easy and simple to integrate QR Code reading technologies into your app.


7. BlogNews – iPhone blog app – WordPress editions

BlogNews is a full native App for iPhone and has been built in response to the demand from the owners of WordPress Blog / Magazine who want to offer to their users a professional iPhone App.


8. Mobile Store Locator

This mobile store locator is using a built-in API to fetch and display all the stores information. that makes it a very powerful and flexible mobile application. It enables users to views your stores list and details informations, view the stores on a Google Map, view a Google Street view, search by address, search the closest stores to their current location and more.


9. One Website For All Devices

One Website For All Devices allows you to build a single website, web application or native mobile application that works on multiple devices, screen sizes and orientations, all from the same code.


10. HTML / PDF Viewer – iOS Xcode Project

HTML / PDF Viewer (also known as Document / Website Viewer) is a plug-and-play iOS application.


11. Multi iRadio – Unlimited Radio – iAd Make Money

Unlimited streaming radio. Plus, make money with the iAd system that has already been instaled!


12. AJAX Mobile Contact Form

A contact form with very easy integration into your mobile website.


13. PhotoGallery – iOS Xcode Project

A Photo Gallery is a plug-and-play iOS application that is perfect for photographers and agencies.


14. Native Contact / Feedback Form – iOS Xcode Project

Native Contact / Feedback Form is a plug-and-play iOS application.


15. BandApp

The App comes with a number of features such as Cover flow, Playable Tracks (Local sound files), Gigs with location maps as well as a twitter and RSS feed integration.


Tags: Web Roundups

January 26 2012

21:38

24 Extremely Useful Ruby Gems for Web Development

One of the nicer things about developing on the Ruby platform is the sheer amount of meticulously categorized, highly reusable code wrapped up in the form of aptly named ‘gems’.

I’m sure you’ve heard of popular frameworks like Sinatra or the super popular Rails that ship as gems but you’re missing an entire spectrum of others that handle issues at a much lower level. Start using these and watch your productivity shoot through the roof!


A Quick Note

I’m well aware that some of the gems listed here have Rails, or parts of Rails, as a dependency. That doesn’t mean that they are any less useful or need to be sneered at.


CarrierWave

Upload files in your Ruby applications, map them to a range of ORMs, store them on different backends. It works well with Rack based web applications, such as Ruby on Rails.

Related reading


Kaminari

Kaminari is a Scope & Engine based, clean, powerful, customizable and sophisticated paginator. Kaminari supports multiple ORMs (ActiveRecord, Mongoid, MongoMapper) multiple web frameworks (Rails, Sinatra), and multiple template engines (ERB, Haml).

Related reading


HAML

Haml (HTML Abstraction Markup Language) is a layer on top of XHTML or XML that’s designed to express the structure of XHTML or XML documents in a non-repetitive, elegant, easy way, using indentation rather than closing tags and allowing Ruby to be embedded with ease. It was originally envisioned as a plugin for Ruby on Rails, but it can function as a stand-alone templating engine.

Related reading


Authlogic

A simple, unobtrusive model based Ruby authentication solution. Authlogic is very flexible, it has a strong public API and a plethora of hooks to allow you to modify behavior and extend it.

Related reading


Shoulda

Shoulda is a gem that allows you to create more understandable tests for your Ruby application. Shoulda allows you to provide context to your tests enabling you to categorize tests according to a specific feature or scenario you’re testing.

Related reading


factory_girl

factory_girl provides a framework and DSL for defining and using factories – less error-prone, more explicit, and all-around easier to work with than fixtures. It has straightforward definition syntax, support for multiple build strategies (saved instances, unsaved instances, attribute hashes, and stubbed objects), and support for multiple factories for the same class (user, admin_user, and so on), including factory inheritance.

Related reading


RMagick

RMagick is an interface between the Ruby programming language and the ImageMagick and GraphicsMagick image processing libraries.

Related reading


Cancan

CanCan is an authorization library for Ruby on Rails which restricts what resources a given user is allowed to access and is decoupled from user roles. All permissions are stored in a single location and not duplicated across controllers, views, and database queries.

Related reading


Nokogiri

Nokogiri is an HTML, XML, SAX, and Reader parser. Among Nokogiri’s many features is the ability to search documents via XPath or CSS3 selectors. Nokogiri parses and searches XML/HTML very quickly, and also has correctly implemented CSS3 selector support as well as XPath support.

Related reading


SASS

Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

Related reading


Formtastic

Formtastic is a Rails FormBuilder DSL (with some other goodies) to make it far easier to create beautiful, semantically rich, syntactically awesome, readily stylable and wonderfully accessible HTML forms in your Rails applications.

Related reading


Capistrano

Capistrano is a utility and framework for executing commands in parallel on multiple remote machines, via SSH. It uses a simple DSL (borrowed in part from Rake) that allows you to define tasks, which may be applied to machines in certain roles. It also supports tunneling connections via some gateway machine to allow operations to be performed behind VPN’s and firewalls.

Related reading


Omniauth

OmniAuth is a Ruby authentication framework that provides a standardized interface to many different authentication providers such as Facebook, OpenID, and even traditional username and password.

Related reading


Bundler

Bundler is a tool that manages gem dependencies for your ruby application. It takes a gem manifest file and is able to fetch, download, and install the gems and all child dependencies specified in this manifest. It can manage any update to the gem manifest file and update the bundle’s gems accordingly. It also lets you run any ruby code in context of the bundle’s gem environment.

Related reading


resque

Resque (pronounced like “rescue”) is a Redis-backed library for creating background jobs, placing those jobs on multiple queues, and processing them later. Resque is heavily inspired by DelayedJob.

Related reading


Jammit

Jammit is an industrial strength asset packaging library for Rails, providing both the CSS and JavaScript concatenation and compression that you’d expect, as well as YUI Compressor and Closure Compiler compatibility, ahead-of-time gzipping, built-in JavaScript template support, and optional Data-URI / MHTML image embedding.

Related reading


capybara

Capybara helps you test Rails and Rack applications by simulating how a real user would interact with your app. It is agnostic about the driver running your tests and comes with Rack::Test and Selenium support built in.

Related reading


Active Merchant

Active Merchant is an extraction from the e-commerce system Shopify. Shopify’s requirements for a simple and unified API to access dozens of different payment gateways with very different internal APIs was the chief principle in designing the library. It was developed for usage in Ruby on Rails web applications and integrates seamlessly as a plugin but it also works excellently as a stand alone library.

Related reading


eventmachine

EventMachine implements a fast, single-threaded engine for arbitrary networkcommunications. It’s extremely easy to use in Ruby. EventMachine wraps all interactions with IP sockets, allowing programs to concentrate on the implementation of network protocols. It can be used to create both network servers and clients.

Related reading


mustache

Inspired by ctemplate, Mustache is a framework-agnostic way to renderlogic-free views.As ctemplates says, “It emphasizes separating logic from presentation:it is impossible to embed application logic in this templatelanguage.

Related reading


Passenger

Phusion Passenger™ — a.k.a. mod_rails or mod_rack — makes deployment of Ruby web applications, such as those built on the revolutionary Ruby on Rails web framework, a breeze.

Related reading


Chef

Chef is a system integration framework designed to bring the benefits of configuration management to your entire infrastructure. With Chef, you can manage your servers by writing code, not by running commands.

Related reading


Thinking Sphinx

A concise and easy-to-use Ruby library that connects ActiveRecord to the Sphinx search daemon, managing configuration, indexing and searching.

Related reading


Wrapping Up

So those were some of the awesome gems I’ve found extremely useful when I’m whipping up a web app in Ruby. I’m a 100% sure I’m missing a metric butt load of others though. Let me know about your favorite gems in the comments below and thank you so much for reading!


January 02 2012

15:32

Best of Tuts+ in December 2011

Each month, we bring together a selection of the best tutorials and articles from across the whole Tuts+ network. Whether you’d like to read the top posts from your favourite site, or would like to start learning something completely new, this is the best place to start!


Psdtuts+ — Photoshop Tutorials

  • Create a Festive Cocktail Using Photoshop’s 3D Capabilities

    Create a Festive Cocktail Using Photoshop’s 3D Capabilities

    For many of our readers, this time of year is filled with family, friends, and celebration. In this tutorial, we will explain how to create a festive cocktail using Photoshop’s 3D capabilities just in time for your New Year’s celebrations. Let’s get started!

    Visit Article

  • Create a Dark, Conceptual Photo Manipulation With Stock Photography

    Create a Dark, Conceptual Photo Manipulation With Stock Photography

    In this tutorial we will be teaching how to integrate elements from different sources to create a realistic photo manipulation with dark and conceptual elements. You will learn some lighting and blending techniques as well as some interesting post-production tips. Let’s get started!

    Visit Article

  • Create High-End Action Figure Packaging – Tuts +  Premium Tutorial

    Create High-End Action Figure Packaging – Tuts + Premium Tutorial

    With collectables, the packaging of the product is often as important as the craftsmanship of the product itself. In this two-part Tuts+ Premium tutorial, author Tim Kyde will explain how to create packaging for a high-end 1/6 scale action figure. Part 1 of this tutorial will explain how to shoot your own photography and create a print-ready outer sleeve and inner packaging for our action figure. This tutorial is available exclusively to Tuts+ Premium Members — Join Now to get started!

    Visit Article


  • Nettuts+ — Web Development Tutorials

  • Wrangling with the Facebook Graph API

    Wrangling with the Facebook Graph API

    Have you ever wanted to learn how to make your applications more social with Facebook? It’s much easier than you think!

    Visit Article

  • From Idea to Market: How We Built Gradient

    From Idea to Market: How We Built Gradient

    Retracing the steps you’ve taken is a helpful way to understand how well you’ve executed your vision – whatever that might be. What could you have done better? What should have been avoided? Today, I’ll share what we’ve learned (and are still learning) while crafting Gradient. It’s an experience that has changed everything for us.

    Visit Article

  • Should You Learn CoffeeScript?

    Should You Learn CoffeeScript?

    I’d imagine that I represent a large portion of the web development community. I’m very intrigued by CoffeeScript; I’ve even learned the syntax and used it in a few demos. However, I haven’t yet taken the plunge and used it in a real project. It comes down to this one question for me: is CoffeeScript something that is truly worth investing time and effort into learning?

    Visit Article


  • Vectortuts+ — Illustrator Tutorials

  • 75 Outstanding Tutorials, Quick Tips, Articles and Interviews from Vectortuts+ in 2011

    Outstanding Tutorials, Quick Tips, Articles and Interviews from Vectortuts+ in 2011

    As the year comes to an end and we pack up our vector tools for some well deserved rest and relaxation, let’s take a look back at some of the best and most inspiring Vectortuts+ articles and tutorials for 2011.

    Visit Article

  • Community Project: 2012 Calendar Design Project

    Community Project: 2012 Calendar Design Project

    Vectortuts+ loves Illustration and discovering new talent, so today we are proud to be launching a new community project that combines both, the Vectortuts+ 2012 Calendar Design Project. The best thing is, you can be a part of it! Find out how to get involved, at the jump.

    Visit Article

  • Quick Tip: How to Create a Watercolor Background Using Adobe Illustrator

    Quick Tip: How to Create a Watercolor Background Using Adobe Illustrator

    In this tutorial we will learn how to create Watercolor Background using a Gradient Mesh, tools of deformation and Blending Modes. The techniques which are described here allow the creation of complex textural backgrounds in a simple and effective way.

    Visit Article


  • Webdesigntuts+ — Web Design Tutorials

  • A Year in Web Design: How the Experts Saw 2011

    A Year in Web Design: How the Experts Saw 2011

    “What did you find most memorable about the world of web design in 2011?” That’s the question I posed to some of our industry’s shining stars last week. One word cropped up more than any other (can you guess?) and everyone had plenty to say. See for yourself after the jump, and let us know what rocked your boat in 2011!

    Visit Article

  • Get Into LESS: the Programmable Stylesheet Language

    Get Into LESS: the Programmable Stylesheet Language

    I don’t like CSS. Plain and simple. It makes the World go round on the web, yet the language is restrictive and hard to manage. It’s time to spruce up the language and make it more helpful by using dynamic CSS with the help of LESS.

    Visit Article

  • Say Hello to the HTML Email Boilerplate

    Say Hello to the HTML Email Boilerplate

    Figuring out html email will test the patience of any human being. A seemingly small formatting issue will inevitably arise and you think to yourself, “self, I’m a world class web developer type person schooled in the latest and greatest html5/css3/whatever, I can tackle this with plenty o’ keystrokes to spare.”

    Visit Article


  • Phototuts+ — Photography Tutorials

  • 10 Tips to Get Started with Still Life Photography

    Tips to Get Started with Still Life Photography

    There arent many photographic practices that date back further than still life photography. When photography originated, it was necessary for exposures to be quite long, so photographing static objects was the ideal subject matter. However, as the technology developed, the fascination for capturing still life has remained and is still one of the most viable photographic professions today.

    Visit Article

  • Is It Worth It? Some Gear Buying Advice

    Is It Worth It? Some Gear Buying Advice

    A lot people believe their photography will improve “if only…” With the holidays approaching, a lot of avid wanna-be photographers, amateurs, and professionals will be making wish lists for gear that they erroneously believe will make them better photographers. There are many forums, YouTube videos, and articles pandering how camera/lens/light/brand/voodoo doll will make your photos better. Today, we’ll examine that idea.

    Visit Article

  • 50 Superb Photos of Paths and Stairways

    Superb Photos of Paths and Stairways

    “Follow the Yellow Brick Road,” an infamous movie quote inspired by a pathway to a land of dreams. Wherever your paths take you and whatever amount of stairs you have to climb, its always worth it to see whats at the end, but more importantly to enjoy the journey. Today’s collection gathers dozens of images of paths and stairways, images that symbolize something different to every person.

    Visit Article


  • Cgtuts+ — Computer Graphics Tutorials

  • Freebie: Epic 3D Character Model Of Pyro From Team Fortress 2

    Freebie: Epic 3D Character Model Of Pyro From Team Fortress 2

    Today we’re super excited to bring you this amazingly detailed character model from Cgtuts+ regular Shaun Keenan. Shaun has re-created “Pyro” from Valve’s hit game Team Fortress 2 in glorious detail, and is making the model available to the Cgtuts+ community for free!

    Visit Article

  • Digital Matte Painting And Projection Basics: From Photoshop To Maya To Nuke, Part 1 – Tuts+ Premium

    Digital Matte Painting And Projection Basics: From Photoshop To Maya To Nuke, Part 1 – Tuts+ Premium

    This Tuts+ Premium tutorial series covers a variety of basic techniques for both creating and projecting matte paintings using Photoshop, Maya and Nuke. The first part of the tutorial will cover how to approach the creation of a matte painting, the research and background knowledge you need, the concept, and finally starting to create your matte painting in Photoshop. Log in or Join Now to get started!

    Visit Article

  • Create A Flying Paper Animation In 3D Studio Max With Thinking Particles

    Create A Flying Paper Animation In 3D Studio Max With Thinking Particles

    In this tutorial by Cristian Pop, you’ll learn how to create a nice flying papers effect in 3d Studio Max using the power of Thinking Particles. We’ll start by creating the paper shapes and materials, then move into Thinking Particles to set up the rules and look at how we can combine them to create the flying paper effect.

    Visit Article


  • Aetuts+ — After Effects Tutorials

  • How To Track Footage That Is Out Of Focus

    How To Track Footage That Is Out Of Focus

    In this tutorial we are going to take a look at a simple, but interesting idea. The main point will be to show you how to work with footage that is out of focus making if difficult to track. After we track it we are going to attach the camera interface elements and fake some depth of field to create the illusion that they are floating in space and shift in and out of focus like the rest of the scene.

    Visit Article

  • DIY – Create A Camera Dolly Completely From Scratch

    DIY – Create A Camera Dolly Completely From Scratch

    Ever wonder how to get smooth footage from your video camera? Today you will learn how to build a Camera Dolly that will help you acquire this type of footage. Get out those dusty power tools, buy some cheap supplies at your local hardware store, and you’ll be on your way to capturing some amazing footage in no time!.

    Visit Article

  • How To Create A Dr. Who Time And Space Vortex – Tutsplus Premium

    How To Create A Dr. Who Time And Space Vortex – Tutsplus Premium

    In this tutorial well be creating a Time & Space Vortex (like that used in Doctor Who) completely inside of After Effects. We will be using Trapcode Particular and Trapcode Shine to create the vortex. I will then teach a vital Expression that drives the camera and completes the Effect. Once you have mastered the effect, you can personalize it to create whatever Time-Tunnel you desire! All of Time and Space awaits you…

    Visit Article


  • Audiotuts+ — Audio & Production Tutorials

  • Drum Compression: Get Your Attack and Release Times Correct

    Drum Compression: Get Your Attack and Release Times Correct

    Compression can be a tricky one to get your head around, and even if you’ve got your head around the threshold and ratio settings without the attack and release times being set correctly it will always be difficult to get the desired effect. This quick tip will outline a really handy trick I learned from a friend a few years ago which allows you to get your attack and release times just right. It’s primarily designed to work on drums but the same principles will apply to any percussive sound.

    Visit Article

  • Quick Tip: Punchier Drums with the New York Compression Trick

    Quick Tip: Punchier Drums with the New York Compression Trick

    Ever have a mix where you wish the drums were bigger, more energetic, more in-your-face? I first heard about this technique in Bobby Owinksis, The Mixing Engineers Handbook, and it has since become a staple in my bag of tricks. The technique is a more aggressive take on parallel compression that can really add punch to your mix.

    Visit Article

  • 3D Mixing Part 6: Depth

    D Mixing Part 6: Depth

    In this segment of our mix down tutorial, we are going to begin to look in depth into depth. Depth within any mix and listening situation is paramount to proper sonic understanding. Much like we see in 3D, we hear in 3D and taking out any one of these dimensions only serves to create a flat and unnatural sound. As such, the most common tools which give the illusion of depth (reverb and delay) become an important and necessary part of mixing.

    Visit Article


  • Activetuts+ — Flash, Flex & ActionScript Tutorials

  • Getting Started With EaselJS: A Flash-Like Interface for the HTML5 Canvas

    Getting Started With EaselJS: A Flash-Like Interface for the HTML5 Canvas

    There’s been some resistance from Flash developers to our new HTML5 content. In this article – aimed at experienced AS3 coders – we’ll look at EaselJS, a JavaScript library that makes working with the HTML5 canvas very similar to working with the Flash display list.

    Visit Article

  • AS3 Quick Tip: Hacking the Event Flow

    AS3 Quick Tip: Hacking the Event Flow

    Sometimes you may find yourself needing to modify the behavior of a component for a user input event. This article will explain how to do so by modifying the event object in-flight, before it’s processed by the component. That’s right, you can lie and cheat. In code.

    Visit Article

  • 2011 in Flash and Web Apps: A Retrospective

    in Flash and Web Apps: A Retrospective

    With the year 2011 at a close, it is time to reflect upon some of the major industry events of the year. A lot happened… we’ll pick out some of the bits and pieces that will be most interesting to browser app and game developers from the world of industry, web, runtimes, operating systems, mobile, and more!

    Visit Article


  • Wptuts+ — WordPress Tutorials

  • WordPress 3.3 “Sonny” Is Finally Here! What’s New?

    WordPress 3.3 “Sonny” Is Finally Here! What’s New?

    The latest and greatest version of the WordPress software — 3.3, named ’Sonny” in honor of the great jazz saxophonist Sonny Stitt — is immediately available for download or update inside your WordPress dashboard. We’ll be covering lots of the new features of 3.3 this week, but for now, go and great the latest version! As we’ve mentioned before, it’s the best way to keep your WordPress site safe and stable.

    Visit Article

  • Getting Loopy – Ajax Powered Loops with jQuery and WordPress

    Getting Loopy – Ajax Powered Loops with jQuery and WordPress

    In this tutorial, we give you a starting point for creating AJAX interaction in your blog. We follow a step by step process, showing you how to load posts based on the viewers page scroll. The tutorial covers enqueueing scripts, setting up an AJAX handler, how to get a file outside of WordPress to use WordPress functions and access the database, and logic for loading posts on user page scroll.

    Visit Article

  • 5 “Saintly” Practices that All WordPress Developers Should Strive For

    Saintly” Practices that All WordPress Developers Should Strive For

    Here on Wptuts+, we talk a lot about the ‘how’ and less about the ‘why.’ Of course, we are a tutorial site, so that’s the goal, right? Well, as a followup to last month’s article on the “Cardinal Sins of WordPress Plugin Development“, today we’re going to look at a few practices that, if every developer followed, would make the world a better place (well, at least our world!).

    Visit Article


  • Mobiletuts+ — Mobile Development Tutorials

  • Getting Started With Kindle Fire Development

    Getting Started With Kindle Fire Development

    The Kindle Fire is the new touchscreen and e-book reader from Amazon. This device has generated a lot of buzz, and for good reason! It is currently the best selling Android tablet, with millions of units already sold. This tutorial will teach you how to begin making apps with the Android SDK specifically targeted for the Kindle Fire.

    Visit Article

  • iOS 5 SDK: Storyboards

    iOS 5 SDK: Storyboards

    Storyboarding is one of the most exciting new features about the iOS 5 SDK. Take a look at the wealth of functionality offered by Storyboards in today’s iOS 5 SDK tutorial!

    Visit Article

  • Titanium Mobile: Build an Image Uploader

    Titanium Mobile: Build an Image Uploader

    This tutorial will demonstrate how to build a custom progress bar by creating an image uploader with Titanium Mobile. Specifically, the demo project will allow you to select an image from the device photo gallery and upload it to a remote server for storage. Both the Titanium Mobile code and the server-side code will be explained. Now, let’s get started!

    Visit Article


Happy New Year!

We’d like to wish all our readers a very Happy New Year! Why not take a look at our Holiday Wishes post to see a video message from the Envato HQ team, and find out more about what you might have missed over the Christmas period.

We hope you’ve enjoyed everything that we’ve had to share this year, and look forward to publishing thousands more top-quality tutorials, articles, freebies, and resources in 2012.

Thanks for being part of the Tuts+ community!


November 25 2011

18:20

50 Practical, Problem Solving Items

In the real world, we have to adhere to tight deadlines — so tight that it’s often not feasible to create everything from scratch. In these situations, a well-built and tested template can be of enormous help. I’ll show you some of my favorites today, including everything from landing pages, to resumes, to under construction templates!


Admin Templates


Adminica | The Professional Admin Template

Adminica is a cleanly coded, beautifully styled, easily customisable, cross-browser compatible Admin Template and Web Application Interface.


TERMINATOR – 13 different Admin Backend pages

Admin backend template that has a hell of a lot of features. It’s designed with cool “Storm Black / Aluminium” colors to make your backend even better than it is


White Label – a full featured Admin Skin

A full featured skinable and responsive CMS /Admin Panel with custom plugins, widgets, forms, validations, charts, galleries and much more


Grape – Professional & Flexible Admin Template

Grape is a professional and very flexible admin template for huge and small backend solutions. It includes custom plugins, forms, validations, charts, tables, notifications and much more.


Chameleon Circuit – Full Featured Admin Theme

Chameleon Circuit is a beautifully coded full featured admin panel theme ready to be implemented in the back end of your application, or as an intranet theme! The theme, like its namesake, can change colors into anything you want, so instead of a specific number of skins, you have an unlimited variation!


Admin Control Panel v2

Features a very slick design, rich typography ans is tablet ready (iPad + Android)


Streamlined – Content Management/CRM Template

Streamlined is an admin template for Contact Management and CRM applications. It includes element styles for buttons, tabs, tooltips, progress bar, and others.


vPanel – Application Framework

vPanel is an application framework with all the necessary features and tools you would need to build an admin panel or a software-as-a-service app. It comes with an html template version, so you can use it with other frameworks, and a zend framework ready version.


Constellation Complete Admin Skin

Constellation is a powerfull admin skin for building advanced backends, both for desktop and mobile users. It provides a wide range of styles from data visualization to lists and calendars, all fluid and nestable. This skin is build on HTML5 and CSS3 , and is powered by jQuery for maximum user experience.


Email Templates


FeastMail 2 – Christmas Email Template

Feast Mail 2 is a Christmas email template with twelve exclusively designed Christmas collages. It is a great possibility to make warm relations with your clients by sending them this beautiful Christmas greetings email! This email has all you need to promote your products this Christmas and make awesome discount propositions.


Market – Newsletter and Template Builder

Market features 8 Prebuild Layouts, 24 Color Variations, 26 different Elements and 768 HTML Files.


High Definition E-mail Template

Aren’t you making any money from your Apps? Do you think more people should see your awesome designed software? Boost up your views with this extremely clean designed E-mail Template.


Christmas Season Email Template

Christmas Season Email Template is a premium HTML email template designed and built especially for the Holiday Season to showcase anything from your mobile or desktop application, portfolio, product(s), services or simply to share news with customers, friends and clients.


Versatile Newsletter 3 – automated layout creator!

The combination between the 11 unique newsletter templates, an easy to use automated layout creator that allows the creation of new newsletter templates instantly, modular layouts that simplify extending/ adapting newsletter templates and robust, properly tested and commented source code makes Versatile Newsletter 3 one of the most complete newsletter packages you can buy at themeforest.


COPRO – 14 E-mail Templates

14 modern corporate newsletter templates made in 7 different color schemes (orange, red, purple, blue, turquoise, green, gray) with inline CSS and flexible table structure for quick and easy layout manipulation (delete/copy/replace table rows inside and between layouts).


Express Mail Newsletter Template

Express Mail is a template design that caters for all businesses. The template comes with all the essential generic information and elements to get you started.


Virtual Business Cards


Stylish Vcard – 11 Modern Skins


Squares – HTML5 vCard/Portfolio Template

Squares is a vCard/Portfolio template built with the latest web standards and best practices. Introduce yourself and your work to future clients and employers through a clean and simple web page.


vCard – a personal profile template

vCard is a simple template designed to showcase your online persona in a list of your social network profiles. There’s also space fo an about page and a fully functional AJAX contact form is included.


vCard – a personal profile template

DotMe is a premium HTML /CSS business card template perfect for any creatives – designers, developers or even photographers.


Strokes! Personal Website Template

Strokes! is a vibrant personal website template, which can be used as a virtual business card on the web.


Grey & Black – Stylish Online vCard Html Template

Grey & Black is a professional online vCard template that is minimal and clean in design. It will help you to create your very own virtual business card, with the ability to showcase your featured projects in style.


Introducto – Personal Website / V Card Template

Introducto is a virtual business card (vcard) template intended for people who want to set up a professional looking web presence in minutes.


My VCard – Premium Template

This is a clean and professional flash like template, perfect for personal website. It’s a simple and minimal looking site with a rare shuffle effect.


Elegant Vcard

Features 6 backgrounds, 4 Pages, fully labeled layered, grid based, easily sliceable PSD files and valid CSS /XHTML


Under Construction Templates


Landerous – Under Construction Page

Landerous is just another Under Construction/Coming Soon/Landing template – specially created to tell your visitor that your site is in progress. Clean and professional look with unique design will satisfy all your needs.


Under Construction page with twitter & pie graph!

Make sure your visitors know whats going on with this Under construction site template that features a feed of your latest tweets (which can be easily removed if you dont use twitter) and a pie chart that is easy to change to reflect your progress!


NEOTERIC—The Ultimate Under Construction Page!

NEOTERIC is a clean single page “Under Construction/Coming Soon” template in 10 SKINS designed to keep your users up to date on your site’s progress.


Easy Coming Soon with Pie Chart, 10 colors + Bonus

Easy Coming Soon is an easy and flexible under construction page that will easily let you define your upcoming website and represent it’s current status, supported by a nice looking easily editable pie chart, and ajaxed mailing-list form to keep your visitors up to date.


Chronos Under Construction Template + WP Theme

Easily customize all settings in PHP configuration file or simply install Chronos as a WordPress theme and manage everything from one single page, with a click of a mouse.


Launch Pad – Full Screen Image Under Construction

Launch Pad is a stylish full screen background under construction template with animated progress bar and countdown timer, perfect for showing off your visual work while your website is being developed. Background switcher controls allow you to cycle through background images, which are preloaded to cut loading time. A Fancybox gallery is included so you can show your work.


Marketing and Landing Pages


Promo – Landing Page for Digital Product Sales

Sporting a clean minimal style, with lots of breathing space, ensuring nothing get in the way of your product’s showcase. Easy to set up, maintain and easy to replicate for new products, this sophisticated little template is a steal.


TheLanding Landing Page

TheLanding is a simple landing page with half or full header video options! Easily customize the landing page with the included instructions.


Oceanic Landing Page

Oceanic Landing Page is a premium landing page design for any kind of app or download product – even just a service – your choice! With multiple sections available, plus a tabbed area for a huge amount of information if required, this template takes good use of the Z Reading pattern to guide the eye around the design and ultimately convert your visitors in to buyers.


Unveiled – Ultimate Product Focused Landing Page

Unveiled is the ultimate product-centered landing page. With an eye-catching design, the call-to-action high-up the page and an impactful splash intro – this theme is sure to convert your visitors into customers.


BookPage – Sell your books with Style!

BookPage is the landing page template for all those internet marketeers who are releasing their own (E) Book. It has everything you need to show of your hard work.


Autopilot Landing Page (3 Themes)

Autopilot is a landing page design best suited for all businesses and industries. The template comes with one HTML and one PHP file (contact form). It comes with three themes – realistic, festive and generic.


Resumes and CVs


Clean CV / Resume Html Template + 4 Bonuses!

Clean Cv / Resume is a html template that will help you set up a professional online CV in minutes and broaden the chance of finding a suitable job as many recruiters resort more and more to browsing online for prospective applicants instead of advertising their position and calling for applicants.


Awesome Online Resume/CV

This is a clean, modern and colorful (optional) Resume/CV theme suited for everyone! It is very easy to edit and includes 10 minutes of video documentation showing you exactly what to do!


Bold – CV / Resume Template – Minimal & Smart

Bold is a minimal and clean one-page CV / resume HTML + PHP template featuring print-ready and mobile-ready versions, downloadable PDF version generated on-the-fly, working Ajax contact form, jQuery lightbox gallery and social media section. It is also very easily editable and configurable.


Professional & Clean HTML CV RESUME

This template is a complete HTML CV Resume. Useful to present your skills and your personal portfolio.


Pinstripe – Premium Resume / CV Template

This is a professional pinstriped CV / Resume with a plethora of slick jQuery effects. A great way to present yourself to any potential employers / clients.


Typographic CV – impressive resume template

Typographic CV is online resume / CV template. It was created to impress your future employers or clients. And it definitely will: strong typographic design, good visual hierarchy, unique layout, cool gallery section and much more.


JumpBox – Animated Resume/Portfolio

Jump Box is a premium Ajax based CV(Resume)/Portfolio animated website template. This template is perfect to use for small websites. It can be used as a CV/Portfolio Template, Landing Page, or any website with a little number of pages.


404 and Error Pages


Lost in Space – Error 404

Simple and aesthetically pleasing template with animated background. Valid HTML and CSS. Ready for all common HTTP errors, like 401, 403, 404, 500 and 503 or for many other purposes.


Modern Custom 404 Error Page

You can use this Modern Custom 404 Error Page pack for any type of errors on your site. It is designed with usability in mind – to help the user get what he wants . It’s fully customizable and browser compatible and you can choose between 16 color schemes.


Save me – 404 Error Page

“Save me” is an unique new error page, that focuses on helping the user through the frustration of getting a website error, in an user friendly and intuitive way.


Cosmo Error Page

Cosmo Error page. It has all you need – links to your other pages, links to your social profiles, working contact form.


Custom 404 Error Page – Missing Jigsaw Piece

Missing jigsaw piece custom 404 error page, in two styles; grey and dark gloss. The layout has subtle embossed text effects and textures, giving you an original look to the design.


Lost in the Clouds – Error 404

Valid HTML and CSS. Ready for all common HTTP errors, like 401, 403, 404, 500 and 503 or for many other purposes.


Tags: Web Roundups

September 24 2011

06:39

20 JavaScript Frameworks Worth Checking Out

The number of web applications being created and used has grown rapidly since the new millenium. And importantly, so has the sheer complexity of them — specially on the front end. No more static pages, no sir!

You have a ton of sections each interacting with each other and the server and yes, it’s as complicated as it sounds and just as hard to pull off. Today, I’d like to talk about a few, choice JavaScript frameworks that aim to simplify front end application development.


Why We Need Frameworks Like These

If you think jQuery is the answer, you lose a cookie and get an F grade!

Creating responsive, fluid, and maintainable interfaces for web apps isn’t as easy as one would imagine — there is data to be sent back to the server and the results parsed, data stores to be updated, views to be re-rendered and so much else that needs to be done in the background. Desktop developers have it much easier with robust tools and well defined workflows. Us, poor web devs? We’ve been twiddling DOM elements, creating models by hand and pulling our hair out trying to keep everything synched.

The monstrous rise in the number of web apps being built recently has really made it apparent that we need better tools and frameworks and the devs have responded with a staggering amount of solutions. Today, we’re going to go over just a few of these. A couple of these are quite old but I’m certain you can learn a lot from perusing their code base.

Sure, a few of these may be a little old but their code bases have lots of lessons to teach.


Sproutcore

Nettuts+ -- JavaScript Frameworks

Sproutcore powers a lot of high profile apps including MobileMe amongst others. Sproutcore has a steeper learning curve compared to the other options but makes up for it with developer productivity once he/she has learned the ropes.

This framework boasts a UI framework, the market standard MVC architecture and well written documentation.

Related links:


Cappuccino

Nettuts+ -- JavaScript Frameworks

Cappuccino was created by the 280North team, now owned by Motorola. This framework gained significant coverage with the release of the 280Slides — built completely with Cappuccino.

This framework varies dramatically from the others in that a developers doesn’t need to understand or work with any of the front end trifecta — HTML, CSS or the DOM. All you need to master is the framework!

Related links:


JavaScriptMVC

Nettuts+ -- JavaScript Frameworks

Built on jQuery, JavaScriptMVC is a veteran in the front end frameworks battlefield, dating back to 2008. Featuring a familiar, and obvious, MVC architecture, this framework is quite full featured with support for code generators, testing and dependency management.

Related links:


Asana Luna

Nettuts+ -- JavaScript Frameworks

Luna is one of those hush-hush private frameworks that people have been talking about. And for good reason, I must admit.

The framework features a lot of niceties including an evolved MVC architecture, pubsub, caching, routing and authentication.

Related links:


Backbone.js

Nettuts+ -- JavaScript Frameworks

Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.

Related links:


qooxdoo

Nettuts+ -- JavaScript Frameworks

qooxdoo is a universal JavaScript framework that enables you to create applications for a wide range of platforms. With its object-oriented programming model you build rich, interactive applications (RIAs), native-like apps for mobile devices, light-weight traditional web applications or even applications to run outside the browser.

Related links:


Spine

Nettuts+ -- JavaScript Frameworks

Spine is a lightweight framework for building JavaScript web applications. Spine gives you a MVC structure and then gets out of your way, allowing you to concentrate on the fun stuff, building awesome web applications.

Related links:


ActiveJS

Nettuts+ -- JavaScript Frameworks

ActiveJS is a JavaScript application framework that provides local and REST based data modeling and pure DOM view construction with back button and history support along with framework agnosticm and lack of external dependencies.

Related links:


Eyeballs

Nettuts+ -- JavaScript Frameworks

eyeballs.js is a slim javascript library designed to sit on top of a javascript framework, such as jQuery or Prototype. eyeballs.js can sit on top of an already implemented web app with a well thought out object model. It can also be used to build standalone javascript apps, backed by HTML5 local storage or something like CouchDB.

Related links:


Sammy

Nettuts+ -- JavaScript Frameworks

Sammy.js is a tiny JavaScript framework developed to ease the pain and provide a basic structure for developing JavaScript applications.

Sammy tries to achieve this by providing a small ‘core’ framework and an ever-growing list of plugins for specific functionality.

Related links:


Choco

Nettuts+ -- JavaScript Frameworks

Choco brings the MVC to the client side! A Choco app consists of only one HTML page, all the interactions are managed by Javascript. Your UI only uses HTML and CSS!

Related links:


Agility

Nettuts+ -- JavaScript Frameworks

Agility.js is an MVC library for Javascript that lets you write maintainable and reusable browser code without the verbose or infrastructural overhead found in other MVC libraries. The goal is to enable developers to write web apps at least as quickly as with jQuery, while simplifying long-term maintainability through MVC objects.

Related links:


Angular

Nettuts+ -- JavaScript Frameworks

Angular supports the entire development process, provides structure for your web apps, and works with the best JS libraries. With angular, the view and data model are always in sync — there is no need for manual DOM manipulation.

Angular is small, weighing in at 60kb, is compatible with all modern browsers and works great with jQuery.

Related links:


ExtJS

Nettuts+ -- JavaScript Frameworks

Ext JS 4 brings a whole new way to build client applications, by introducing the popular model-view-controller pattern to Ext JS. By allowing the separation of data management, logic and interface elements, Ext JS 4 makes it easier for even large development teams to work independently without worrying about stepping on each other’s toes. Ext JS 4 ships with a helpful MVC guide to get started.

Related links:


Knockout

Nettuts+ -- JavaScript Frameworks

Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably.

Related links:


Jamal

Nettuts+ -- JavaScript Frameworks

Jamal is a set of conventions and small javascript libraries to archieve a complete separation of html, css and javascript in your web application. Jamal is built on jQuery and inspired by MVC frameworks like Ruby on Rails, CakePHP and its derivatives.

Related links:


PureMVC

Nettuts+ -- JavaScript Frameworks

PureMVC is a lightweight framework for creating applications based upon the classic Model, View and Controller concept.

Based upon proven design patterns, this free, open source framework which was originally implemented in the ActionScript 3 language for use with Adobe Flex, Flash and AIR, is now being ported to all major development platforms.

Related links:


TrimJunction

Nettuts+ -- JavaScript Frameworks

The open source Junction framework is a conventions-over-configuration, synchronizing web MVC framework for JavaScript. TrimPath Junction is a clone or port of the terrific Ruby on Rails web MVC framework into JavaScript.

Related links:


CorMVC

Nettuts+ -- JavaScript Frameworks

CorMVC is a jQuery-powered Model-View-Controller (MVC) framework that can aide in the development of single-page, web-based applications. CorMVC stands for client-only-required model-view-controller and is designed to be lowest possible entry point to learning about single-page application architecture.

Related links:


batman

Nettuts+ -- JavaScript Frameworks

batman.js is a full-stack microframework extracted from real use and designed to maximize developer and designer happiness. It favors convention over configuration, template-less views, and high performance by simply not doing very much. It all adds up to blazingly fast web apps with a great development process; it’s batman.js.

Related links:


That’s a Wrap!

And we’re done here. The number of options here might border on overdoing things at first glance but each of these are a little different in how they tackle this problem and given a problem, different solutions and choices are always a welcome addition.

As I mentioned earlier, if you think a framework should be here but isn’t, just drop us a line below and we’ll update this roundup accordingly. Thank you so much for reading!


September 10 2011

22:23

The Top 50 Stock Web Development Items

The Envato marketplaces are on the verge of reaching a massive milestone: a million users. One of the biggest reasons for our success is the steady stream of spectacular files that our talented authors craft.

Today, we’ll review only a handful of the top selling and most popular templates and plugins on sale at CodeCanyon and ThemeForest.


The Top Selling CodeCanyon Items


1. CSS3 Mega Drop Down Menu

This Mega Drop Down Menu is a flexible and easy to integrate solution to build your custom menus. The drop down relies only on CSS /XHTML and comes with a fully working contact form.


2. jQuery Banner Rotator / Slideshow

This is a jQuery banner rotator plugin featuring multiple transitions. The thumbnails and buttons allow for easy navigation of your banners/ads. The banner rotator is also re-sizable and configurable through the plugin’s parameters.


3. AJAX Contact Form

This AJAX jQuery website component allows you to easily place a self-contained Contact Form on any HTML or PHP page of your existing website.

It uses just 1 file to Validate, Process and Send the completed contact form to your e-mail address and best of all, does not reload the page to validate or send the form!


4. Events Calendar Pro – WordPress Premium Plugin

Events Calendar Pro for WordPress enables you to rapidly create and manage events using the post editor. Features include Google Maps integration as well as default templates such as a calendar grid and event list for streamlined one click installation


5. jQuery Lightbox Evolution

Lightbox Evolution is a tool for displaying images, html content, maps, and videos in a “lightbox” style that floats overtop of web page. Using Lightbox Evolution, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page.


6. Simple PHP Contact Form

This website component allows you to easily place a self-contained Contact Page on any PHP page of your website. Very easy to integrate into any existing PHP page on your website.


7. UberMenu – WordPress Mega Menu Plugin

UberMenu is a user-friendly, highly customizable mega menu ( or mega drop down menu ) WordPress plugin. It works out of the box with the WordPress 3 Menu Management System, making it simple to get started but powerful enough to create highly customized and creative mega menu configurations.


8. Newsletter System

Design a template, send emails, people can subscribe through your website, double opt in option, track who opens the emails, setup automatic email campaigns, import members via csv, users can unsubscribe themselves.


9. Sexy Slider

SexySlider is a JQuery plugin that lets you easily create powerful javascript Sliders with very nice transition effects. Enhance your website by adding a unique and attractive slider!


10. AviaSlider – jQuery Slideshow

AviaSlider is a very flexible and easy to use Image slideshow plugin for jQuery with a set of really unique transitions that were nver available before, as well as some basic transitions, so the slider will fit into every project.


11. Drop Menu

With this script you can make nice and interactive drop down menus. The advantage of this script is that it not only gives you the ability to make list drop down menu. You can also use a div as drop down element. This way you can create big drop down menus like under the buttons products and tutorials in the live preview. Or you can create a login panel in your drop down like I did in the live preview.


12. PHP Login & User Management

PHP Login & User Management is the MySQL powered website PHP login script, another high quality script designed and created by Jigowatt exclusively for ThemeForest.


13. iPhorm – Simple yet Powerful Ajax contact form

iPhorm is a simple yet powerful ajax contact form that you can easily embed into any web page in a matter of minutes. If you need a simple contact form to put on your website iPhorm is sure to suit your requirements. It does everything without reloading the page which makes for a sleek user experience that is sure to make a positive impression when your visitors contact you.


14. Ultimate Client Manager

This feature packed system lets you easily keep all your customer and project details in one place. You can keep website information (ftp details, renewal dates), project information (due dates, requirements), support requests (help! my email is broken!) and a PayPal payment history all in one place.


15. DDSlider – 10 Transitions – Inline Content Support

DDSlider introduces a new easy-to-go slider with 9 different unique transitions (+fading & random—11 total) that support Inline Content. You can also have multiple sliders in the same page


16. Sliding Tabs – jQuery Plugin

Sliding Tabs is a jQuery plugin for creating horizontal and/or vertical animated tabs for your website. You can have multiple instances of the tabs and customize them in any way with CSS . The script comes with many customization options, making it very flexible and easy to customize to your needs.


17. Advanced Slider – jQuery XML slider

Advanced Slider is a jQuery plugin that allows you to easily create powerfull sliders using either XML , thus making the slider much easier to setup and maintain, or using HTML markup. The plugin also provides an easy to use API which will allow to further enhance the functionality of the slider and make it possible to integrate it into your own application. Please take a look at the list of features below.


18. uBillboard – Premium Slider for WordPress

uBillboard is a Premium Slider for WordPress. It is a jQuery based slider with a multitude of transitions and options for you to be able to customize it to your needs while not overwhelming you with options you never wanted or needed. Version 3 is a revolutionary release with most of the codebase rewritten from scratch. This has enabled us to integrate many features that you have been requesting during the first year.


19. Estro – jQuery Ken Burns & swipe effect slider

This jQuery plugin uses unobstrusive javascript to transform a block of simple HTML markup into a georgous elegant slider, which can be completely customized using HTML5 data attributes.


20. Styles with Shortcodes for WordPress

This plugin lets you customize content faster and easier than ever before by using Shortcodes. Choose from 100 built in Shortcodes like; jQuery Accordion, Tabs and Toogle, Tooltips, Column Shortcodes, Gallery and Image Shortcodes, Button Styles, Alert Box Styles, Pullquotes, Blockquotes, Twitter buttons, Retweet button, Facebook Like, Follow me on Twitter buttons, Linkedin, Google +1, Flattr and many more!


21. PHP Event Calendar

PHP Event Calendar is a MySQL Database driven script that displays events on your website quickly and easily through a traditional calendar UI. It can be integrated into any existing PHP page within minutes using a simple file include.


22. li JQuery Slider/Image Rotator

li jQuery Image Slider / Banner Image Rotator is carefully crafted slider/image rotator, full of features, very easy to install and customize. Whenever you need a full featured slider image rotator or you need a simple ad banner, li jQuery Image slider will do the job with ease!


23. ThumbsUp

ThumbsUp is a flexible PHP voting script. It allows visitors to vote for anything you want on your website. An admin area< and six different templates are included.


24. Pure CSS3 Sticky Footer

This CSS3 Sticky Footer will help you to create unique footer with CSS /XHTML only, there is absolutely NO javascript.


25. Mobile Site

With this script there is no need for you to create a subdomain for your mobile website. This script detects if the visitor is using a mobile device and then shows the right versions.


The Top Selling ThemeForest Items


1. inFocus – Powerful Professional WordPress Theme

A New Breed of WordPress Themes Has Arrived!

With our innovative separation of design from content, we’ve put everything you could every wish to customize into one easy to navigate option panel.


2. Striking Premium Corporate & Portfolio WP Theme

Striking is an extremely powerful and flexible wordpress theme – actually a “Super Premium” theme as it has extraordinary features and coding that are not found in the normal premium WP theme. It is the theme you buy when you want to create a website in every way you imagined possible.


3. Karma – Clean and Modern WordPress Theme

Karma is a Premium WordPress Theme built on a highly intelligent framework. It’s the only theme on Themeforest to feature the amazing new CU3ER v1 3D slider. Whether your a wordpress pro or just a beginner, you’ll have absolutely no problems at all working with this theme.


4. Display 3 in 1 – Business & Portfolio WordPress

DISPLAY is a WordPress Theme, best suited for Business and Portfolio sites. It comes with a fantastic 3D Image slideshow that can be controlled from your backend with a custom tool. The Theme has a huge wordpress custom backend (8 additional Admin Pages) that make customization of the Theme easy for those who dont know much about coding or wordpress.


5. Dandelion – Powerful Elegant WordPress Theme

Dandelion is a Powerful Premium WordPress Theme. This theme provides all the main functionality you will need to present your products, work and yourself in an elegant and professional style. The Dandelion theme is highly flexible, so changing the color scheme is super simple and for the most parts you won’t need an image editor.


6. U-Design WordPress Theme

U-Design is a very powerful theme which suits both, users with no programming background as well as advanced developers. It will help you build your site in no time to your liking with minimal effort. It empowers you to set any color to elements such as backgrounds, links, text, menu links, etc.


7. BigFeature – WordPress Theme

Clean and flexible wordpress theme, with big article images and nice typography. Very many settings. Many page templates. 5 custom widgets. Easy to add article and preview images. Check the “Introduction to the theme” article in the live preview for more information. All the documentation is also on the live preview. Also be sure to check out the example websites listed below.


8. Unite – WordPress Business, Magazine Theme

Unite is a merger of crisp design and powerful communication. It takes a clean, organized approach to presenting content so its easier to find what you want.


9. London Creative + (Portfolio & Blog WP Theme)

London Creative + comes with fully working contact form, awesome slider for your featured images, nasty spinning slider buttons (never saw them anywhere else, so you can call it unique), 2 message buttons under the slider and PrettyPhoto plugin (better clone of Lightbox).


10. DynamiX – Premium WordPress Theme

Dynamix features Dual Skin Mode, BuddyPress Theme, 5 Types of Galleries, Piecemaker 2 and more.


11. Awake – Powerful Professional WordPress Theme

With Awake, you’re getting more than just a theme, you’re getting a new way of approaching them.

With our innovative separation of design from content, we’ve put everything you could every wish to customize into one easy to navigate option panel.


12. Simpla Admin – Flexible & User Friendly Admin skin

Simpla Admin is a professional template with a beautiful and user friendly interface. With various smart and intuitive jQuery functions, navigating the interface is a breeze.


13. Openhouse Real Estate & Automotiv car dealership

Openhouse (currently the highest rated WordPress Real Estate theme (realestate) with 5 stars average and over 250 ratings) is a very powerful and flexible Real Estate theme. It includes a very powerful and flexible Search, where you can search by location, number of baths, beds, max price, min price, and property type.


14. King Size – fullscreen background WordPress theme

Including a variety of options, King Size can be suitable to fit any particular use. Offering you five very different gallery styles (including 4 additional layout styles for ColorBox, FancyBox and prettyPhoto), with ability to blog about your photos (attach featured images) and etc.


15. Photo Nexus WordPress gallery 2 in 1

Photo Nexus wordpress gallery is a 2 color variation ( Bright and Dark) theme.

This theme is great for those who need a convenient way to publish and showcase a self managed Gallery of Photos, Artworks or Designs.


16. Newscast 4 in 1 – WordPress Magazine and Blog

Newscast is a WordPress Theme, best suited for Magazines and Blogs. It comes with 3 fantastic Image and News slideshows has multiple Page templates and of course gives you the option to choose from 4 Fantastic skins:


17. Classica: Minimalistic WordPress Portfolio Theme

Classica is perfect for artists from any discipline, web, graphic, motion, print, art… anyone that needs a showcase. If you’re looking for a gorgeous looking portfolio theme then you’ve just found it. Not fond of minimalism? Then Classica is the perfect blank canvas just waiting to be customised.


18. Twicet Business & Portfolio – WordPress – 5 in 1

Twicet is a WordPress Template, best suited for Business and Portfolio sites. It comes with 5 sleek skins, if the WordPress Live Preview is not enough for you, please check out the html templates that are already available, the look stays the same in the WordPress version:


19. Constellation complete admin skin

Constellation is a powerfull admin skin for building advanced backends, both for desktop and mobile users. It provides a wide range of styles from data visualization to lists and calendars, all fluid and nestable. This skin is build on HTML5 and CSS3 , and is powered by jQuery for maximum user experience.


20. WP FlexiShop – A Versatile WP E-Commerce Theme

This theme utilises the powerful WP E -Commerce plugin to create a versatile and feature packed WordPress powered shop, with 3 different layout options and unlimited color possibilities. Make this theme your own.


21. Unite – HTML Business, Magazine, Community Site

Unite is a merger of crisp design and powerful communication. It takes a clean, organized approach to presenting content so its easier to find what you want. The theme includes page layouts for: full page, 2 column, 3 column, blog pages, portfolio, HTML contact form and 2 administrative login styles.


22. Prestige -” Ultimate WordPress Theme

Prestige is an unique and advanced WordPress theme. It comes with a big pack of various skins, shortcodes, widgets and fonts. Thanks to massive CMS options panel you can fully customize this theme to your needs. Prestige is the ultimate package with functional and powerful features.


23. The Jewelry Shop – WordPress eCommerce

A Flexible, Plugin Free and Localized (Translation-Ready) eCommerce theme!


24. Vulcan – Minimalist Business WordPress Theme 4

Vulcan template is designed Modern and minimalist template, suit any kind of website. Vulcan available in five color option, it comes with three variations slider. With New Features of WordPress 3.0 Vulcan has been coded to improve capability of the WordPresss 3.0 features.


25. PureVISION WordPress Theme

PureVISION is a very powerful theme which suits both, users with no programming background as well as advanced developers. It will help you build your site in no time to your liking with minimal effort.


Tags: Web Roundups

June 29 2011

14:56

Showcase of Inspiring “About Me” Pages

Advertise here

A creative about me page will attract a reader’s attention, and, more importantly, provide them with a quick sampling of what you or your company represents. Are you playful, stylish, corporate? All of this should be conveyed to your web site’s visitors.

I have collected some of the best creative and unique “about me” pages available.


The Guide to the App Galaxy by Google

BuzzChips | Discover new music | Hear something you love.

Vector Mill

Unfold

Bongo Comics

Jasper Aarts

Amazee Labs

StruckAxiom

Grandpeople

Wing Cheng

Kiluka

Marie Catribs

xhtmlCafe

Drexler

Hugs For Monsters

Lega-Lega

Grip Limited

HAUS

Sisu, Inc.

Design Swap

rokkan

Jacob Lee

Team Excellence

Dribbble

Rich Brown

Hello Group

Rain Creative Lab

Constantin Potorac

Sushimonstr

TRÜF

Fi

Neutron Creations

Larkef

Fuel Brand Inc

Jonah Levine

A Better Place

DesignWise

Kanella

sreski

Nick La and the Studio

These are some of my favorites. What are yours?

June 15 2011

12:49

50+ Killer Apps for your new Chromebook

Advertise here

In celebration of the first wave of Chromebooks being released today, now is a great time to start looking for replacements for the tools you can’t live without on a day to day basis. Code editors, image editors, games? All of these can be replaced! I’ll show you the best choices today.

Required Chromebook Apps

Cream Boas, you say?

Nope, it’s called Chrome OS. If you’ve been living under a rock all this while, which is quite literally a possibility considering your silly question, Chrome OS is a cutting edge operating system from Google that intends to change how we think about using a computer — a paradigm shift as it were.

Google is betting that the future of computing lies in the cloud and Chrome OS is a bold step towards that idea.

Chrome OS, to oversimplify, is simply Chrome running on a stripped out custom Linux distro. Every task you’ll need to do will have to happen through a web app since you don’t really get your typical access to the file system and so can’t install traditional apps without tinkering in the kernel.

If that last sentence made you weep, wipe those tears away, little padawan. There are plenty of apps out there that can handle your typical workload. We, as developers, have gotten used to our cozy, customized setups but that doesn’t mean that we can’t change, when needed.

With that out of the way, let’s take a look at the apps you’ll need to become productive again – filtered into different categories. The majority are apps from the Chrome Web Store while the rest are normal web apps that provide a desktop like experience.


Categories


IDEs/Text Editors

Developers live inside IDEs and text editors. While it’s hard to replicate the entire Visual Studio suite inside a browser, there are plenty of options that should make development a pleasure on the cloud.

Nettuts image

Cloud9

Cloud9 is an online platform for development that makes developing applications more convenient than ever. Edit, Run, Debug your code and collaborate with others on your projects. Cloud9 has full NodeJS debugging and live JavaScript syntax checking. Syntax Highlighters are available for all popular languages and there’s TextMate theming support.

Install/Visit site

Nettuts image

Kodingen

Kodingen is an Online Development Environment including Code Editor, Cloud Hosting, Database Administration, and Collaboration with access to a Web-based file system and FTP & SVN integration.

Features include:

  • Free developer accounts
  • Connect to your own FTP Servers
  • Shell access to your files

Install/Visit site

Nettuts image

Akshell

Create web apps in JavaScript right from your browser! There’s nothing to download or install. You can create your first app by a single click and manage your code with Git and collaborate on GitHub. Just write code and Akshell will take care of the rest.

Install/Visit site

Nettuts image

CloudIDE

Cloud IDE is a hosted development environment where teams can collaboratively build gadgets, mashups, REST APIs, and HTML5 / JavaScript applications. Because you can deploy directly within a PaaS environment, migrating from development to staging and deployment takes just a few clicks. A multi-window, extensible editor supports several file types, while familiar file system tools make it easy to move files from local sources.

Install/Visit site


Image Editing

The use of image editors can’t be underestimated. I have PhotoShop open in my workstation almost all the time. Whether it comes to retouching a photo to fix a red eye or creating a quick mockup for your client, an image editor is unarguably one of the most important tools for a front end developer. To that end, feel free to look through the bevy of options linked below: they vary from bitmap to vector. One of the editors below even has pressure sensitivity!

Nettuts image

Pixlr Editor

Pixlr presents a full featured photo editor direct in your browser — no download, no wait and 100% free.

If you are used to working with Gimp, Paint shop pro or even Photoshop you will feel right at home with this online image editor. It contains lots of the features that you normally see in desktop applications but just one click away.

Install/Visit site

Nettuts image

deviantART muro

DeviantART’s muro is one a kind. It focuses more on the artistic side of drawing applications and when it comes to it, it’s the most powerful and easiest to use Web-based drawing application available. It’s compatible with more devices than any other application of its kind. With the ability to save drawings and load them again later, deviantART muro allows for hours of endless drawing fun anytime you want.

Install/Visit site

Nettuts image

Advanced Image Editor by Aviary

An incredibly useful and fun web-based image editor that can be utilized by anyone looking to retouch and manipulate a photo. From basic image editing to manipulating complex effects, Aviary’s Advanced Image Editor delivers essential key features available in powerful desktop clients right through your browser. Aviary provides its users with an easy-to-use and accessible application that will spawn creativity and sharing with every use!

Install/Visit site

Nettuts image

Sketchpad

MugTug Sketchpad brings your favorite digital painting tools to the browser with a tool set including paintbrush, texture stamp, and spiral brush.

Each tool has a broad range of settings, including: flow, opacity, diameter jitter and more. When combined with texture, color and gradient swatches, the possibilities are endless.

All tools in Sketchpad can be used in two different blending modes, paint and light, doubling your color and texture combinations and giving you limitless possibilities for self-expression.

Install/Visit site

Nettuts image

Image Markup by Aviary

Aviary’s Image Markup is the perfect tool for editing images on-the-go. Resizing, cropping, rotating, and other simple editing tools are at your fingertips. Aviary’s Image Markup runs lightning fast even on the slowest connections, which makes for great results and sharing in no time at all!

Install/Visit site

Nettuts image

Picnik

Picnik is photo editing awesomeness! There’s a complete set of tools from basic fixes to professional quality effects and cosmetic touch ups. Get creative with our selection of fonts, shapes and stickers. Plus: Picnik connects right to all your favorite photo sharing sites like Facebook, Picasa Web, Flickr, Photobucket, and more so it’s never been easier to connect and share with your photos!

Install/Visit site

Nettuts image

Sumo Paint

sumopaint.com is a thriving online art community of over a 16 million unique users and over 350 000 registered members from over 220 countries. The primary purpose of the community is to create, share, remix, explore, comment, rate and fave the artwork of its members. Sumopaint.com hosts the internet’s most versatile painting / photo manipulation application called the Sumo Paint.

Install/Visit site

Nettuts image

Vector Editor by Aviary

Aviary’s Vector Editor allows users to create fully scalable vector art appropriate for logos, tee shirt designs, and more. You won’t find a similar tool on the web! Working with paths, lines, curves, and objects, our Vector Editor is a powerful tool for beautiful layer-based vector creations that can be shared with friends and business partners alike!

Install/Visit site


Utilities

Considering the stripped out nature of the Chrome OS, you’ll be left out with a number of nifty utilities that you’d need to get your work done. Thankfully, a lot of them have online versions and equivalents.

Nettuts image

Pixlr Grabber

Create screen capture of visible part, selected area or whole page then you can edit them in pixlr editor or share them to public imm.io.

You also get a context menu for pulling down images to pixlr editor. Very handy tool!

Install/Visit site

Nettuts image

Calculator

Powerful calculator and converter for Chrome. It sports a simple but poweful interface. Large input/results box is what you need perfoming calculations. It comes standard with common math functions like sin(x), cos(x), sqrt(x), etc and poweful function shortcuts like a^b, a!, #a, a%b.

Install/Visit site

Nettuts image

Jolicloud

Jolicloud is the cloud desktop that makes it easy to manage everything you care about in the cloud. You can get started in seconds with Facebook Connect or signup for free and organize your entire collection of apps in a beautiful cloud desktop. You can launch and connect to your favorite Web services in just one click. More than 1,000+ apps are available from the Jolicloud App Center.

Install/Visit site

Nettuts image

Lovely Charts

Most diagramming softwares require you to worry about things like choosing colors, drawing arrows, picking up the correct symbols, etc… All sort of things that get between your ideas and their representation.

With Lovely Charts’s extremely simple and intuitive drag’n drop drawing mechanism, you’re able to focus on what really matters. You won’t have to draw boxes or arrows, and you won’t have to worry about what symbol to use.

Install/Visit site

Nettuts image

Fiabee

Fiabee for Chrome is an app that lets you intuitively manage all your files distributed across your many devices, directly from the web. You can specifically select which files you want to synchronize from your devices and store onto the others. By storing only what you choose rather than replicating all content everywhere, you’ll minimize on the use of space and memory.

Install/Visit site

Nettuts image

Timer Tab

This is basically a timer + alarm clock + stopwatch. Supports a countdown in the tab title and tab icon. You can choose any youtube clip to use as the audio alarm. It also works offline!

Install/Visit site


Office

Ahh, office software. While I don’t get to them, I’m sure that’s not the case with the vast majority of you. A lot of big strides have been made in the recent years to the point that you can comfortably go with online services instead of being tied down to a single computer.

Nettuts image

Google Docs

Google Docs is a free, Web-based word processor, spreadsheet, slide show, form, and data storage service offered by Google. It allows users to create and edit documents online while collaborating in real-time with other users.

Install/Visit site

Nettuts image

Zoho Writer

Zoho Writer is an online word processor that lets you to access/edit/share your documents online.

Built using AJAX technology, it’s fast and revolutionizes the way you work with documents. Having all your documents online, you have access to them from any computer, at home or at work. And no more emailing them back-and-forth to your colleagues, clients or friends for review, thanks to its instant collaboration, inline commenting and chat facilities.

Install/Visit site

Nettuts image

280 Slides

Create beautiful presentations, access them from anywhere, and share them with the world. With 280 Slides, there’s no software to download and nothing to pay for – and when you’re done building your presentation you can share it any way you like.

Install/Visit site

Nettuts image

SlideRocket

SlideRocket lets you create great presentations that wow your audience. You can access and share your presentations anywhere since the app includes a HTML5 viewer for iPad and iPhone. Presentation analytics let you measure message impact and audience engagement. Easily record audio on your slides enabling on demand presentations.

Install/Visit site

Nettuts image

Zoho Sheet

Zoho Sheet is an online spreadsheet application that lets you create, edit, and share spreadsheets on the web. It comes in handy for business people, accountants, scientists, scholars, students and anyone who deal with tabular data and need to use spreadsheets. It can be used to work with large amount of data, formulas, and charts. You can also collaborate on a spreadsheet with multiple users in real time.

Install/Visit site


Audio and Video Editing

Heavy audio and video editing is one place where the cloud just can’t compete with the desktop. However, if you’re willing to make a few sacrifices there are a number of options that let you handle all the smaller projects comfortably.

Nettuts image

Stupeflix Video Maker

Stupeflix is a web app to create amazing videos easily.

Whether you want to make a beautiful slideshow with your pictures, or create a professional video ad to promote your business, Stupeflix makes it incredibly easy so you can focus on telling your story.

It’s easy and free to try: you don’t need to create an account, and videos are free up to 60 seconds.

Install/Visit site

Nettuts image

Audio Editor by Aviary

Aviary’s Audio Editor is a powerful audio editing tool used to remix your favorite songs or record your own. From trimming and looping your audio to reversing it altogether, Aviary’s Audio Editor allows for powerful clip editing. Creating a custom fade-out and adding pitch bends and reverb to your tunes couldn’t be easier. For even more possibilities, create beats in Aviary’s Music Creator and send them over to our Audio Editor to perfect them.

Install/Visit site

Nettuts image

Audiotool

Audiotool is a great online music production studio right in your browser.

You can create melodies using the amazing Pulverisateur synthesizer or go completely crazy with the Rasselbock. Audiotool lets you create your own sounds by wiring more than fourteen different effects together with one of our three drum machines or synthesizers. There are endless possibilities.

Install/Visit site


Social Networking

Managing all your social networking accounts can truly be a chore if you need to have a ton of tabs open at the same time. Hand over that duty to one of the apps below and ease up the process dramatically.

Nettuts image

HootSuite

Use HootSuite’s social media dashboard to update Twitter, Facebook & more networks, plus monitor real-time search and track results.

With HootSuite’s unique social media dashboard, you can schedule and publish to Twitter, Facebook, Linkedin, Foursquare, WordPress and more. Plus you can easily track trending topics and view campaign results without switching sites or apps. Also, you can get to your know your audience with information about their social presences, level of influence and publishing habits.

Install/Visit site

Nettuts image

TweetDeck

TweetDeck is your personal browser connecting you with your contacts across Twitter, Facebook, Foursquare and Google Buzz.

It brings together the power and flexibility of our award-winning desktop application, with a new cool and clear design, into an exciting new web app. Whether you are a social networking novice, or a technology powerhouse, TweetDeck will allow you to easily become master of your life online.

Install/Visit site

Nettuts image

Seesmic

Seesmic Web is the easiest way to use all your social networks directly from a web browser. Seesmic Web supports multiple accounts, and feeds from Google Buzz, Foursquare, Facebook and LinkedIn.

Install/Visit site


News

Romping around on the internet seeking news is one of the main reasons that my productivity is so pathetically low. I imagine this is the case with a lot of you as well. Why would you need to get rid of this habit just because you’re using a new OS? Grab any of these apps below and procastinate away!

Nettuts image

NYTimes

Experience the award-winning journalism of The New York Times through the Google Chrome OS. The NYTimes app for the Chrome Web Store is a sophisticated HTML5 application that leverages advanced browser features to deliver a unique and compelling reading experience that can be read online or offline.

Install/Visit site

Nettuts image

USA TODAY

The latest news, scores, weather, stocks and photos you’ve come to expect from USA TODAY and now available in a beautiful new way, in HTML5. Staying informed has never been this quick, easy or enjoyable.

Install/Visit site

Nettuts image

Sports Illustrated Snapshot

Snapshot from Sports Illustrated delivers the world in sports photos every day to your desktop. The free app offers Sports Illustrated’s exclusive photos from our award-winning photographers, photo essays from the biggest global sporting events, rare images from our archives and up-to-the-minute sports information.

Install/Visit site

Nettuts image

Onion News Network

The Onion News Network delivers hard-hitting, up-to-the-minute reporting to more than 100 million households nationwide. Globally, the Onion’s network of branded channels and services reaches 811 countries in 152 languages.

Install/Visit site

Nettuts image

NPR for Chrome

NPR for Chrome: Experience NPR in magazine style with a focus on News, Arts & Life, and Music content that’s broad, deep, and timely. Popular features include playlist, hourly newscasts, station finder, and sharing.

Install/Visit site


Productivity

Apps focused on project and task management have really taken off to the point that while desktop clients are present and fine, all the data lives in the cloud anyway. Using a web app is just a logical progression. Most of the apps here present a desktop like GUI with desktop-esque snappiness.

Nettuts image

Springpad

Springpad is a free application that makes it quick and easy to take notes and save anything you want to remember in one place – from tasks and lists to products, places, movies, recipes and more. It automatically organizes and enhances what you save with useful links and relevant offers to save you time and money. Everything you save is automatically synchronized and instantly accessible on the web and your phone.

Springpad for Chrome adds the additional capability of saving and accessing information even when you’re offline.

Install/Visit site

Nettuts image

Evernote

Evernote is an award-winning service that turns every computer and phone you use into an extension of your brain. Use Evernote to save your ideas, experiences and inspirations, then easily access them all at any time from anywhere. Capture your memories. Save all of your notes, research and projects into one place. Create task lists and to-dos so you’ll never forget a thing. Clip interesting webpages using Evernote browser extensions and plugins.

Install/Visit site

Nettuts image

Zootool

Zootool is a visual bookmark application for images, videos, documents and links. Organize your bookmarks in packs andadd tags to keep your Zoo tidy. Share your bookmarks with your friends via Email, on Facebook, Twitter or Tumblr.

Install/Visit site

Nettuts image

Instapaper

A simple tool to save web pages for reading later. It gives you a Read Later bookmark. When you find something you want to read, but you don’t have time, click Read Later. Come back when you have time, or read your articles on the go. I use it a ton when I know I’m going to be on the road.

Install/Visit site

Nettuts image

Todo.ly

Todo.ly helps you to organize your tasks into projects and sub projects. Select icons for your projects to highlight them even more.

Managing Tasks and Projects can’t be easier! With the intuitive drag and drop you can simply move your task from one project to another.

Assign due date to your tasks not to forget them. Tasks will pop into your Today list as due dates approach. Sort the tasks within the project by Due Date to see what you need to focus on.

Install/Visit site


Instant Messaging

In this day and age of constant communication, IM clients are an absolute necessity. They’re pretty much one of the first things that I install. On the cloud, there are plenty of options offering all of the niceties of their desktop brethren — video chat included.

Nettuts image

IMO Instant Messenger

imo is a web application that allows users to hold text, voice and video chats. The service is free and requires no user-registration or sign-up. You can take your chat history with you wherever you go. Sending and receiving files is a cinch as is video and voice chat.. Star your favorite buddies for quick access

Install/Visit site

Nettuts image

Meebo Messenger

Meebo is an instant messenger that works with all of the popular networks.Provides a fairly sleek interface and is easy to use.

Install/Visit site

Nettuts image

eBuddy Web Messenger

eBuddy Web Messenger is a full-featured multi-network instant messenger.
Use it to chat on Yahoo!, AIM, Facebook Chat, Google Talk, MSN and MySpace Chat.

Install/Visit site


Games

As a self-diagnosed game-aholic who needs his fix daily, gaming on the cloud, on a semi-powered notebook can be hard. That being said there are number of casual games with excellent production qualities that deserve a lot. Hey, casual gaming is still gaming, right?

Nettuts image

Angry Birds

What more needs to be said? The all pervasive Angry Birds game is now playable on your Chromebook as well! Lay waste to those dastardly pigs with your truly angry birds. I loved it on my iPhone and I love it in the browser.

Install/Visit site

Nettuts image

Mahjongg

Mahjongg solitaire (also called Mahjong solitaire) is free and fun to play. This puzzle board game involves tile matching strategy, and is good for all ages.

Over half a dozen beautiful tile layouts available.

Install/Visit site

Nettuts image

FarmVille by Zynga

FarmVille is a farming social network game developed by Zynga. It is available as an Adobe Flash application and thus should have no issues with Chrome OS. The game is a freemium game, meaning there is no cost to play but players have the option of purchasing premium content.

Install/Visit site

Nettuts image

RuneScape

RuneScape is a massively-multiplayer online game developed and published by Jagex Games Studio. The game is set in a fantasy world of warring races, ravaged landscapes and sinister powers. RuneScape is free-to-play and can be accessed on almost any PC with access to the internet.

RuneScape currently holds the world record as the most popular free MMO and has been played by over 180 million people worldwide.

Install/Visit site

Nettuts image

Sinuous

Sinuous is a very straight forward (read: sinusoidal) and addictive game where your objective is to avoid colliding with red dots by moving your mouse pointer. As you progress through the levels you will notice the speed and number of dots on screen increasing.

Install/Visit site

Nettuts image

SparkChess

The premier free online chess game. It features great graphics, three difficulty levels optimized for short and casual matches, autosave, 6 savegame slots and unlimited undo. Works offline – no internet connection is needed!

SparkChess is not aimed at professional chess players; it’s a chess game for the rest of us – challenging but fun! It implements all chess rules and has an extensive opening database.

Install/Visit site


Music

A music playing app is always on my desktop — I simply can’t work without music. With Chrome OS, this can be a slight issue. The workaround would be to access one of the many streaming sites. Many of them provide a desktop like experience, with Grooveshark deserving a special mention.

Nettuts image

Grooveshark

Grooveshark is an internationally available online music search engine, music streaming service and music recommendation web software application, allowing users to search for, stream, and upload music free of charge that can be played immediately or added to a playlist.

Install/Visit site

Nettuts image

mflow

Mflow is legal social music service funded by digital music sales rather than advertising; this allows us to provide an uninterrupted and fun listening experience.Discover, share and listen to music online legally, for free and without ads.

Create and contribute to mflow’s revolutionary new massively collaborative playlists by including hashtags like #lazysunday and #upliftingtrance in your recommendations.

Listen to any of our 5 million tracks for free and then share the music to your friends and followers on facebook, twitter and mflow.

Install/Visit site

Nettuts image

Soundtracker

Soundtracker makes it easy to discover and play the music your friends and your neighbors are listening to. Use Soundtracker to comment on your friends’ stations, check their latest music, and more. Discover your city’s favorite artists. Access any artist, any genre from the largest music catalog on Internet radio with more than 10 million songs for FREE. Create your own radio stations and share them with your friends via Facebook.

Install/Visit site

Nettuts image

Pandora

Pandora is personalized internet radio that is designed to help you discover new music you’ll love mixed in with music you already know.

Pandora is powered by the most comprehensive analysis of music ever undertaken, the Music Genome Project: a crazy project started over ten years ago to capture the complex musical DNA of songs using a large team of highly-trained musicians.

Pandora is always free, with the option to pay for additional features.

Install/Visit site


That’s a Wrap

Phew. That was a long list, wasn’t it? I hope it contained at least a couple of apps that you hadn’t heard of before. As I am absolutely sure, there are a ton of apps that I’m missing. Chime in at the comments and I’ll update this list accordingly. Thank you so much for reading!

May 24 2011

15:50

May 18 2011

21:44

The Best of Paul Irish in 2011

Advertise here

Paul Irish, who works for the Chrome Developer Relations team, is one of the most outspoken and respected front-end developers in our industry. Even better, he has the heart of a teacher, and frequently speaks at conferences, and records screencasts on various web development techniques. Here’s the best of his offerings so far in 2011.


1 – Paul Irish on HTML5 Boilerplate

HTML5 Boilerplate is a “rock-solid default for HTML5 awesome.” In this video, Paul Irish, the man behind the project will show you how you can use HTML5 Boilerplate to get your projects up and running quickly while keeping best practices covered.”


2 – HTML5, CSS3, and Dom Performance

“Paul Irish, from the Chrome Developer Relations team, walks through smart techniques to improve the performance of your app. He describes CSS reflows and how to avoid them, hardware accelerated CSS, animation optimization, web workers, benchmarking and build scripts.”


3 – Chrome Dev Tools Reloaded

“You’re an experienced web developer but new to Chrome Dev Tools’ nuances? Get up to speed on all the newest features of a web app developer’s best friend. Update CSS styles on the fly, get a diff or save changes to disk. Set breakpoints on everything imaginable and dig into the networking stack to uncover performance gains.”


4 – Chrome Developer Tools: 12 Tricks to Develop Quicker

“In this video, Paul Irish, a Chrome developer advocate, presents 12 tips and tricks on how to use Chrome’s developer tools. Learn more…


5 – Quick Color Manipulation

“You can edit the color representation of any CSS color on the fly (from hex to RGB(a) to HSL(a)) and also always view colors in HSL, for example. This lets you manipulate colors easily for finding hover colors or other tweaks live.”


6 – The Build Script of HTML5 Boilerplate: An Introduction

In this video, Paul works his way through the process of using HTML5 Boilerplate’s build script to automatically compress, optimize, and concatenate your files.


7 – 11 More Things I Learned from the jQuery Source

7

As a follow-up to his popular presentation from the jQuery conference, Paul continues with eleven more interesting notes and facts on jQuery.


Vote on What’s Next!

You decide what he records next.

Paul has generously agreed to record a custom screencast exclusively for Nettuts+. Even better, you guys get to decide what the subject will be! JavaScript? jQuery? HTML5? Chrome? Let us know in the comments. Then, in the next several days, Paul will look over the comments and choose which screencast to record!

So get going! Leave a comment, and let us know what you want Paul to teach you next.

April 25 2011

14:23

Essential Ruby & Rails 3 Reading

Advertise here

Nearly two years ago, we published a round-up of the greatest Ruby and Rails learning resources available. Since then, big things have happended in the glorious world of Ruby. Rails 3 brought many fundamental improvements to the framework. So, naturally, our “essential resources” list needed to be updated!

Read on for a round-up of the greatest articles, books, and screencasts to come out of the Ruby community!


1 - Beginning Ruby

  • Ruby Programming Language

    Ruby is… A dynamic, open source programming language with a focus on simplicity and productivity. It has an elegant syntax that is natural to read and easy to write.

  • TryRuby

    Try out Ruby in an interactive console directly in your browser! Enter help to start a 15-minute interactive tutorial.

  • Ruby Koans

    The Koans walk you along the path to enlightenment in order to learn Ruby. The goal is to learn the Ruby language, syntax, structure, and some common functions and libraries. We also teach you culture. Testing is not just something we pay lip service to, but something we live. It is essential in your quest to learn and do great things in the language.

    The koans are broken out into areas by file, hashes are covered in about_hashes.rb, modules are introduced in about_modules.rb, etc. They are presented in order in the path_to_enlightenment.rb file.

  • Ruby for Newbies

    This ongoing video session will introduce you to Ruby, as well as the great frameworks and tools that go along with Ruby development. If you’re hoping to make the switch, now is the perfect time to get started!

  • Hackety Hack

    Hackety Hack will teach you the absolute basics of programming from the ground up. No previous programming experience is needed!

    With Hackety Hack, you’ll learn the Ruby programming language Ruby is used for all kinds of programs, including desktop applications and websites.

  • PeepCode – Ruby 1.9 series

    PeepCode has teamed up with Gregg Pollack and David A. Black of Envycasts to provide you with their current library of screencasts!

    Jump into the future of Ruby with this two part series on the distinguishing new features of Ruby 1.9. Topics covered in this 41-minute screencast include: hashes, arrays, symbols, enumerators, enuerable and RubyGems.


2 - Beginning Rails

  • Ruby on Rails Tutorial: Learn Rails by Example

    The Ruby on Rails 3 Tutorial book and screencast series teach you how to develop and deploy real, industrial-strength web applications with Ruby on Rails, the open-source web framework that powers many top websites, including Hulu, GitHub, and the Yellow Pages. The companion screencast series includes 12 individual lessons totaling more than 15 hours. The best deal is the PDF/screencast bundle, which includes more than 500 pages of total content and more than 15 hours of video.

  • Dive into Rails 3

    Gregg Pollack from EnvyLabs presents five short video tutorials to help you learn about all the new components found in Rails 3 like Bundler, Active Model and Active Relation, as well as the new syntax of the router and Action Mailer. It’s everything you need to get started.

  • CodeSchool – Rails for Zombies

    In this free course Gregg Pollack from Envy Labs will walk you the basics of learning Ruby on Rails in five levels, each of which is followed by a series of code challenges where you get to start coding Rails immediately in the browser.

  • Rails Guides – Getting Started with Rails

    Install Rails, create an application, using databases, the principles of MVC and RESTful design – this is an essential resource for getting started with Rails and learning the best practices.

  • PeepCode – Meet Rails 3 series

    This 75 minute screencast introduces Rails 3, the result of two years of low-level improvements, API refinements, and performance optimizations. If you are just learning Rails or if you have limited knowledge and want to learn more, this is the video for you!

    This highly-polished screencast will give you a gentle introduction to the ideas that have transformed modern web development.

  • SitePoint – Getting Started with Rails 3

    Today, I’m going to show you a quick example of building a simple Rails 3 application to give you an idea of what working with Rails is like. For this tutorial in two parts, we’ll be building a database-backed application: a URL shortener named “Shorty.”

  • Create a Simple Music Streaming App with Ruby on Rails

    Amazon S3 is a great way to store files, but learning how to integrate it into your website can be a challenge. In this article, you will learn how to integrate Amazon S3 and Ruby on Rails through the construction of a simple music streaming application.

  • Ruby and Rails for Attractive .NET Developers

    The thoughts of a .NET developer as they learn the world of Ruby and Rails.

  • ThinkVitamin Membership

    High quality video training to keep you on the cutting edge.

  • Build a Dropbox-like File Sharing Site with Ruby on Rails

    In this massive and advanced Premium Nettuts+ tutorial, we’ll learn how to build a file-sharing web application, like Dropbox, using Ruby on Rails.

  • Rails for PHP Developers: Reference Guide

    If you’re proficient with PHP, you already have the essential skills needed to build web applications. This site will present an ongoing discussion of techniques for learning Rails and Ruby from a PHP perspective.


3 - Advanced Resources

  • CodeSchool – Rails Best Practicies

    The Ruby on Rails framework uses a great deal of convention over configuration, which means that if you follow the golden path and develop in a certain way you can do away with lots of the configuration involved. Unfortunately as your system starts to become complex, so can your code, and without proper design patterns and techniques your codebase can quickly devolve. In this course we’ve put together some of the most useful patterns, so you can keep your code clean and maintainable.

  • Railscasts

    Every week Ryan Bates will host a new Railscasts episode featuring tips and tricks with Ruby on Rails. These screencasts are short and focus on one technique so you can quickly move on to applying it to your own project. The topics target the intermediate Rails developer, but beginners and experts will get something out of it as well.

    Prefer text tutorials? Check out the next item.

  • ASCIIcasts

    Railscasts (above) is the #1 resource for quickly learning new Rails tricks. If you prefer text tutorials over video, ASCIIcasts is for you!

    ASCIIcasts are detailed, illustrated text versions of each Railscast, each with a link to the original video.

  • Live Coding Rails 3 Upgrade

    For several months people have wondered, “Where can I download a video that features a developer stumbling through an upgrade of a Rails 2 app to Rails 3?” I’m proud to say that an answer is now available!

    In only 25 minutes, I convert my news screenshot site from Rails 2.x to Rails 3 (prerelease, from source). It features the newest bundler (0.9.0.pre), Jeremy McAnally’s rails-upgrade script, new routes, Arel-based ActiveRecord queries, and more.

    Stay tuned for the explosions at the end!

  • RubySource – 10 RoR Best Practicies

    If you’re new to Ruby on Rails, one of the most daunting aspects is knowing what’s the preferred way of accomplishing a given task. While a lot of techniques and libraries have come and gone as the community’s preferred way of doing something, there are some best practices that remain, and can lead to writing the cleanest, most secure and maintainable Rails code possible.

    Listed here today are ten of the most popular and useful best practices you can use as a Ruby developer.

  • Ruby Quicktips

    Random Ruby and Rails tips. This blog is dedicated to deliver short, interesting and practical tidbits of the Ruby language and Ruby on Rails framework.

  • RubySource – Introducing Test-Driven Development with Rails 3

    An introduction to following a TDD approach when developing your Ruby on Rails applications.

  • 5 Awesome New Rails 3 Features

    Finally found the time to upgrade from Rails 2, to 3? Keep reading to learn five of the most awesome new features in Ruby Rails 3.

  • Rails Forum – Tutorials

    A collection of community-produced short tutorials covering a huge range of Rails techniques, from beginners advice and installation to debugging and tests.

  • Singing with Sinatra

    In this Session, we’ll be taking a look at Sinatra; a small, yet incredibly powerful DSL for quickly creating Ruby web applications. You’ll learn everything from installing the framework, all the way up to building an app.


4 - Ruby Books

  • Programming Ruby 1.9

    Affectionately known simply as the ‘PickAxe’ in the Ruby community (due to the PickAxe on the cover), this is almost Ruby’s de-facto official book. A must-have for any serious Rubyist!

    The First Edition of the PickAxe is available for free at Ruby Central.

  • The Ruby Programming Language

    Bestselling author David Flanagan teams up with Ruby creator Yukihiro “Matz” Matsumoto and writer/cartoonist/programmer why the lucky stiff to bring you the authoritative guide to Ruby. Covering versions 1.9 and 1.8, this book helps you learn Ruby’s lexical structure, primary expressions, conditionals, syntax, classes, the data it manipulates, and more. For experienced programmers who want to look at this language in depth, this guide is invaluable.

  • Why’s (Poignant) Guide to Ruby

    Written by Ruby’s very own crazy-genius, why the lucky stiff (or _why), this is a free and very unusual guide to the language. Take a read through the first few pages, and you’ll see why this book is a massive success.

  • The Ruby Way

    The Ruby Way takes a “how-to” approach to Ruby programming with the bulk of the material consisting of more than 400 examples arranged by topic. Each example answers the question “How do I do this in Ruby?” Working along with the author, you are presented with the task description and a discussion of the technical constraints. This is followed by a step-by-step presentation of one good solution. Along the way, the author provides detailed commentary and explanations to aid your understanding.

    This book is not recommended for beginners to Ruby, however.

  • The RSpec Book

    Behaviour-Driven Development (BDD) gives you the best of Test Driven Development, Domain Driven Design, and Acceptance Test Driven Planning techniques, so you can create better software with self-documenting, executable tests that bring users and developers together with a common language.

    Get the most out of BDD in Ruby with The RSpec Book, written by the lead developer of RSpec, David Chelimsky.

  • Everyday Scripting with Ruby

    Everyday Scripting with Ruby is divided into four parts. In the first, you’ll learn the basics of the Ruby scripting language. In the second, you’ll see how to create scripts in a steady, controlled way using test-driven design. The third part is about finding, understanding, and using the work of others – and about preparing your scripts for others to use. The fourth part, more advanced, is about saving even more time by using application frameworks.

  • Eloquent Ruby

    It’s easy to write correct Ruby code, but to gain the fluency needed to write great Ruby code, you must go beyond syntax and absorb the “Ruby way” of thinking and problem solving. In Eloquent Ruby, Russ Olsen helps you write Ruby like true Rubyists do–so you can leverage its immense, surprising power.

    Olsen draws on years of experience internalizing the Ruby culture and teaching Ruby to other programmers. He guides you to the “Ah Ha!” moments when it suddenly becomes clear why Ruby works the way it does, and how you can take advantage of this language’s elegance and expressiveness.

  • The Well-Groomed Rubyist

    The Well-Grounded Rubyist takes you from interested novice to proficient practitioner. It’s a beautifully written tutorial that begins with the basic steps to get your first Ruby program up and running and goes on to explore sophisticated topics like callable objects, reflection, and threading The book concentrates on the language, preparing you for any way you may choose to use Ruby. Whether the topic is simple or tough, the book’s easy-to-follow examples and explanations give you immediate confidence as you build your Ruby programming skills.


5 - Rails Books

  • Agile Web Development with Rails

    This book is essentially the de-facto official Rails book.

    Rails just keeps on changing. Rails 3 and Ruby 1.9 bring hundreds of improvements, including new APIs and substantial performance enhancements. The fourth edition of this award-winning classic has been reorganized and refocused so it’s more useful than ever before for developers new to Ruby and Rails.

  • The Rails 3 Way

    Ruby on Rails strips complexity from the development process, enabling professional developers to focus on what matters most: delivering business value via clean and maintainable code. The Rails™ 3 Way is the only comprehensive, authoritative guide to delivering production-quality code with Rails 3. Pioneering Rails expert Obie Fernandez and a team of leading experts illuminate the entire Rails 3 API, along with the idioms, design approaches, and libraries that make developing applications with Rails so powerful. Drawing on their unsurpassed experience and track record, they address the real challenges development teams face, showing how to use Rails 3 to maximize your productivity.

  • Beginning Rails 3

    Rails 3 is a massive shake-up to the Rails community because it includes the surprise merger of the powerful Merb framework. This means a lot of people will be interested in knowing what’s new in Rails if they’ve used it before, and getting started with it from scratch if they haven’t.


6 - Misc Resources

  • The Changelog

    The Changelog is a weekly podcast and blog that covers what’s fresh and new in Open Source.

  • Ruby5 Podcast

    A regular podcast covering the latest news in the Ruby and Rails community.

  • The Ruby Show

    “The Ruby Show is the best Ruby-related podcast of all time, featuring news and discussion about the latest topics in the Ruby and Rails communities.”

  • Rails Searchable API Doc

    A JavaScript-enhanced, fast and searchable implementation of the Rails API Docs.

Nearly two years ago, we published a round-up of the greatest Ruby and Rails learning resources available. Since then, big things have happended in the glorious world of Ruby. Rails 3 brought many fundamental improvements to the framework. So, naturally, our “essential resources” list needed to be updated!

Read on for a round-up of the greatest articles, books, and screencasts to come out of the Ruby community!


1 - Beginning Ruby

  • Ruby Programming Language

    Ruby is… A dynamic, open source programming language with a focus on simplicity and productivity. It has an elegant syntax that is natural to read and easy to write.

  • TryRuby

    Try out Ruby in an interactive console directly in your browser! Enter help to start a 15-minute interactive tutorial.

  • Ruby Koans

    The Koans walk you along the path to enlightenment in order to learn Ruby. The goal is to learn the Ruby language, syntax, structure, and some common functions and libraries. We also teach you culture. Testing is not just something we pay lip service to, but something we live. It is essential in your quest to learn and do great things in the language.

    The koans are broken out into areas by file, hashes are covered in about_hashes.rb, modules are introduced in about_modules.rb, etc. They are presented in order in the path_to_enlightenment.rb file.

  • Ruby for Newbies

    This ongoing video session will introduce you to Ruby, as well as the great frameworks and tools that go along with Ruby development. If you’re hoping to make the switch, now is the perfect time to get started!

  • Hackety Hack

    Hackety Hack will teach you the absolute basics of programming from the ground up. No previous programming experience is needed!

    With Hackety Hack, you’ll learn the Ruby programming language Ruby is used for all kinds of programs, including desktop applications and websites.

  • PeepCode – Ruby 1.9 series

    PeepCode has teamed up with Gregg Pollack and David A. Black of Envycasts to provide you with their current library of screencasts!

    Jump into the future of Ruby with this two part series on the distinguishing new features of Ruby 1.9. Topics covered in this 41-minute screencast include: hashes, arrays, symbols, enumerators, enuerable and RubyGems.


2 - Beginning Rails

  • Ruby on Rails Tutorial: Learn Rails by Example

    The Ruby on Rails 3 Tutorial book and screencast series teach you how to develop and deploy real, industrial-strength web applications with Ruby on Rails, the open-source web framework that powers many top websites, including Hulu, GitHub, and the Yellow Pages. The companion screencast series includes 12 individual lessons totaling more than 15 hours. The best deal is the PDF/screencast bundle, which includes more than 500 pages of total content and more than 15 hours of video.

  • Dive into Rails 3

    Gregg Pollack from EnvyLabs presents five short video tutorials to help you learn about all the new components found in Rails 3 like Bundler, Active Model and Active Relation, as well as the new syntax of the router and Action Mailer. It’s everything you need to get started.

  • CodeSchool – Rails for Zombies

    In this free course Gregg Pollack from Envy Labs will walk you the basics of learning Ruby on Rails in five levels, each of which is followed by a series of code challenges where you get to start coding Rails immediately in the browser.

  • Rails Guides – Getting Started with Rails

    Install Rails, create an application, using databases, the principles of MVC and RESTful design – this is an essential resource for getting started with Rails and learning the best practices.

  • PeepCode – Meet Rails 3 series

    This 75 minute screencast introduces Rails 3, the result of two years of low-level improvements, API refinements, and performance optimizations. If you are just learning Rails or if you have limited knowledge and want to learn more, this is the video for you!

    This highly-polished screencast will give you a gentle introduction to the ideas that have transformed modern web development.

  • SitePoint – Getting Started with Rails 3

    Today, I’m going to show you a quick example of building a simple Rails 3 application to give you an idea of what working with Rails is like. For this tutorial in two parts, we’ll be building a database-backed application: a URL shortener named “Shorty.”

  • Create a Simple Music Streaming App with Ruby on Rails

    Amazon S3 is a great way to store files, but learning how to integrate it into your website can be a challenge. In this article, you will learn how to integrate Amazon S3 and Ruby on Rails through the construction of a simple music streaming application.

  • Ruby and Rails for Attractive .NET Developers

    The thoughts of a .NET developer as they learn the world of Ruby and Rails.

  • ThinkVitamin Membership

    High quality video training to keep you on the cutting edge.

  • Build a Dropbox-like File Sharing Site with Ruby on Rails

    In this massive and advanced Premium Nettuts+ tutorial, we’ll learn how to build a file-sharing web application, like Dropbox, using Ruby on Rails.

  • Rails for PHP Developers: Reference Guide

    If you’re proficient with PHP, you already have the essential skills needed to build web applications. This site will present an ongoing discussion of techniques for learning Rails and Ruby from a PHP perspective.


3 - Advanced Resources

  • CodeSchool – Rails Best Practicies

    The Ruby on Rails framework uses a great deal of convention over configuration, which means that if you follow the golden path and develop in a certain way you can do away with lots of the configuration involved. Unfortunately as your system starts to become complex, so can your code, and without proper design patterns and techniques your codebase can quickly devolve. In this course we’ve put together some of the most useful patterns, so you can keep your code clean and maintainable.

  • Railscasts

    Every week Ryan Bates will host a new Railscasts episode featuring tips and tricks with Ruby on Rails. These screencasts are short and focus on one technique so you can quickly move on to applying it to your own project. The topics target the intermediate Rails developer, but beginners and experts will get something out of it as well.

    Prefer text tutorials? Check out the next item.

  • ASCIIcasts

    Railscasts (above) is the #1 resource for quickly learning new Rails tricks. If you prefer text tutorials over video, ASCIIcasts is for you!

    ASCIIcasts are detailed, illustrated text versions of each Railscast, each with a link to the original video.

  • Live Coding Rails 3 Upgrade

    For several months people have wondered, “Where can I download a video that features a developer stumbling through an upgrade of a Rails 2 app to Rails 3?” I’m proud to say that an answer is now available!

    In only 25 minutes, I convert my news screenshot site from Rails 2.x to Rails 3 (prerelease, from source). It features the newest bundler (0.9.0.pre), Jeremy McAnally’s rails-upgrade script, new routes, Arel-based ActiveRecord queries, and more.

    Stay tuned for the explosions at the end!

  • RubySource – 10 RoR Best Practicies

    If you’re new to Ruby on Rails, one of the most daunting aspects is knowing what’s the preferred way of accomplishing a given task. While a lot of techniques and libraries have come and gone as the community’s preferred way of doing something, there are some best practices that remain, and can lead to writing the cleanest, most secure and maintainable Rails code possible.

    Listed here today are ten of the most popular and useful best practices you can use as a Ruby developer.

  • Ruby Quicktips

    Random Ruby and Rails tips. This blog is dedicated to deliver short, interesting and practical tidbits of the Ruby language and Ruby on Rails framework.

  • RubySource – Introducing Test-Driven Development with Rails 3

    An introduction to following a TDD approach when developing your Ruby on Rails applications.

  • 5 Awesome New Rails 3 Features

    Finally found the time to upgrade from Rails 2, to 3? Keep reading to learn five of the most awesome new features in Ruby Rails 3.

  • Rails Forum – Tutorials

    A collection of community-produced short tutorials covering a huge range of Rails techniques, from beginners advice and installation to debugging and tests.

  • Singing with Sinatra

    In this Session, we’ll be taking a look at Sinatra; a small, yet incredibly powerful DSL for quickly creating Ruby web applications. You’ll learn everything from installing the framework, all the way up to building an app.


4 - Ruby Books

  • Programming Ruby 1.9

    Affectionately known simply as the ‘PickAxe’ in the Ruby community (due to the PickAxe on the cover), this is almost Ruby’s de-facto official book. A must-have for any serious Rubyist!

    The First Edition of the PickAxe is available for free at Ruby Central.

  • The Ruby Programming Language

    Bestselling author David Flanagan teams up with Ruby creator Yukihiro “Matz” Matsumoto and writer/cartoonist/programmer why the lucky stiff to bring you the authoritative guide to Ruby. Covering versions 1.9 and 1.8, this book helps you learn Ruby’s lexical structure, primary expressions, conditionals, syntax, classes, the data it manipulates, and more. For experienced programmers who want to look at this language in depth, this guide is invaluable.

  • Why’s (Poignant) Guide to Ruby

    Written by Ruby’s very own crazy-genius, why the lucky stiff (or _why), this is a free and very unusual guide to the language. Take a read through the first few pages, and you’ll see why this book is a massive success.

  • The Ruby Way

    The Ruby Way takes a “how-to” approach to Ruby programming with the bulk of the material consisting of more than 400 examples arranged by topic. Each example answers the question “How do I do this in Ruby?” Working along with the author, you are presented with the task description and a discussion of the technical constraints. This is followed by a step-by-step presentation of one good solution. Along the way, the author provides detailed commentary and explanations to aid your understanding.

    This book is not recommended for beginners to Ruby, however.

  • The RSpec Book

    Behaviour-Driven Development (BDD) gives you the best of Test Driven Development, Domain Driven Design, and Acceptance Test Driven Planning techniques, so you can create better software with self-documenting, executable tests that bring users and developers together with a common language.

    Get the most out of BDD in Ruby with The RSpec Book, written by the lead developer of RSpec, David Chelimsky.

  • Everyday Scripting with Ruby

    Everyday Scripting with Ruby is divided into four parts. In the first, you’ll learn the basics of the Ruby scripting language. In the second, you’ll see how to create scripts in a steady, controlled way using test-driven design. The third part is about finding, understanding, and using the work of others – and about preparing your scripts for others to use. The fourth part, more advanced, is about saving even more time by using application frameworks.

  • Eloquent Ruby

    It’s easy to write correct Ruby code, but to gain the fluency needed to write great Ruby code, you must go beyond syntax and absorb the “Ruby way” of thinking and problem solving. In Eloquent Ruby, Russ Olsen helps you write Ruby like true Rubyists do–so you can leverage its immense, surprising power.

    Olsen draws on years of experience internalizing the Ruby culture and teaching Ruby to other programmers. He guides you to the “Ah Ha!” moments when it suddenly becomes clear why Ruby works the way it does, and how you can take advantage of this language’s elegance and expressiveness.

  • The Well-Groomed Rubyist

    The Well-Grounded Rubyist takes you from interested novice to proficient practitioner. It’s a beautifully written tutorial that begins with the basic steps to get your first Ruby program up and running and goes on to explore sophisticated topics like callable objects, reflection, and threading The book concentrates on the language, preparing you for any way you may choose to use Ruby. Whether the topic is simple or tough, the book’s easy-to-follow examples and explanations give you immediate confidence as you build your Ruby programming skills.


5 - Rails Books

  • Agile Web Development with Rails

    This book is essentially the de-facto official Rails book.

    Rails just keeps on changing. Rails 3 and Ruby 1.9 bring hundreds of improvements, including new APIs and substantial performance enhancements. The fourth edition of this award-winning classic has been reorganized and refocused so it’s more useful than ever before for developers new to Ruby and Rails.

  • The Rails 3 Way

    Ruby on Rails strips complexity from the development process, enabling professional developers to focus on what matters most: delivering business value via clean and maintainable code. The Rails™ 3 Way is the only comprehensive, authoritative guide to delivering production-quality code with Rails 3. Pioneering Rails expert Obie Fernandez and a team of leading experts illuminate the entire Rails 3 API, along with the idioms, design approaches, and libraries that make developing applications with Rails so powerful. Drawing on their unsurpassed experience and track record, they address the real challenges development teams face, showing how to use Rails 3 to maximize your productivity.

  • Beginning Rails 3

    Rails 3 is a massive shake-up to the Rails community because it includes the surprise merger of the powerful Merb framework. This means a lot of people will be interested in knowing what’s new in Rails if they’ve used it before, and getting started with it from scratch if they haven’t.


6 - Misc Resources

  • The Changelog

    The Changelog is a weekly podcast and blog that covers what’s fresh and new in Open Source.

  • Ruby5 Podcast

    A regular podcast covering the latest news in the Ruby and Rails community.

  • The Ruby Show

    “The Ruby Show is the best Ruby-related podcast of all time, featuring news and discussion about the latest topics in the Ruby and Rails communities.”

  • Rails Searchable API Doc

    A JavaScript-enhanced, fast and searchable implementation of the Rails API Docs.

April 15 2011

21:40

For Your Script Loading Needs


As JavaScript usage has skyrocketed over the last few years, so has the sheer number of scripts that are being loaded in an average web page. With these script tags comes a lot of baggage, such as blocking and lack of dependency management.

Today, I’d like to bring your attention to a number of JavaScript loaders, which are mini toolkits that significantly simplify how you add and load scripts.


The Problem with Simple Script Tags

They Block the Page

The page stops ‘happening’ while the script is downloaded.

JavaScript files loaded using the script tag are blocking by nature. Everything that’s happening or loading on the page is halted while the script is downloaded and executed. And remember that this applies to each script tag. Some modern browsers may let you download these in parallel, but the rest of the page is still blocked from doing anything meaningful.

No Easy Way to Manage Dependencies

Lack of dependency management is a big drawback.

Next up comes the issue of handling dependencies. For your average web page, you probably don’t need one. Check if your library is loaded and move on. For a non-trivial web application though, this isn’t a great solution. You’ll need to load scripts conditionally based on dependencies. Even then, you’ll still have to figure out the order in which they’re loaded. You can probably do it manually for 3-4 files, but when things begin piling up, you’re probably better off with an automated solution.


Available Choices

The initial idea for this round up was sparked by a post over at Hacker News about making a list of JavaScript script loaders, roughly a month ago. I watched the list balloon up from 3 to a grand total of 10 before I lost interest and moved on.

Now that sufficient time has passed, I think that list is going to be quite massive. Unfortunately, my Google-fu is pretty weak and I can’t seem to find it. If an eagle eyed user manages to find this thread, post in the comments below so I can link to it and hopefully expand my list here as well.

This list is drawn from recommendations by high level web developers who use these tools in their applications.

And as to my choices here, this list represents a superset of recommendations which flowed in after I asked some of the front end community to pitch in with the solutions they’re using. Some of the solutions below may handle dependency managements too, though most stick to simple asynchronous loading. Regardless of the extra niceties, each of the scripts below do one thing with aplomb — load up JavaScripts with minimal fuss.

So without further ado, and in no particular order:


HeadJS

Head JS loads scripts in parallel no matter how many of them and what the browser is. Load scripts like images. Use HTML5 and CSS3 safely. Target CSS for different screens, paths, states and browsers. Make it the only script in your HEAD.

Author: Tero Piirainen

Project URL: Here

Size: 6.3 KB

Related links:


LabJS

LABjs (Loading And Blocking JavaScript) is an all-purpose, on-demand JavaScript loader, capable of loading any JavaScript resource, from any location, into any page, at any time. You can easily specify which scripts have execution order dependencies and LABjs will ensure proper execution order. This makes LABjs safe to use for virtually any JavaScript resource, whether you control/host it or not, and whether it is standalone or part of a larger dependency tree of resources.

Author: Kyle Simpson

Project URL: Here

Size: 4.7 KB

Related links:


RequireJS

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.

Author: James Burke

Project URL: Here

Size: 13 KB

Related links:


ControlJS

ControlJS is a JavaScript module that handles both inline scripts and external scripts, delays script execution until after the page has rendered, allows for scripts to be downloaded, not executed and integrates with simple changes to HTML and no code changes

Author: Steve Souders

Project URL: Here

Size: 3.6 KB

Related links:


StealJS

The StealJS project is a collection of command and client based JavaScript utilities that make building, packaging, sharing and consuming JavaScript applications easy. Includes modules for dependency management, JS compression, cleaning and logging.

Author: Brian Moschel

Project URL: Here

Size: 11.4 KB

Related links:


yepnope

yepnope is an asynchronous conditional resource loader that’s super-fast, and allows you to load only the scripts that your users need. It works with both JavaScript and CSS and has a full test suite in QUnit that you can run in your set of supported browsers to make sure it works.

Author: Alex Sexton and Ralph Holzmann

Project URL: Here

Size: 3.4 KB

Related links:


PINF JS Loader

The loader allows for bootstrapping a consistent and state-of-the-art CommonJS environment for any supported platform (on server & in browser) and thus is ideally suited to be used as the target for the commonjs command and the development of cross-platform JavaScript applications and libraries.

Author: Christoph Dorn

Project URL: Here

Size: 22 KB

Related links:


JSLoad

JSLoad is a Javascript file loader that we wrote for Instructables. You give it a set of dependencies and groupings, and it loads the files you need, when your executing code needs them. The real usefulness of JSLoad comes with its ability to group dependencies using tags.

Author: Eric Nguyen

Project URL: Here

Size: 9.8 KB

Related links:


JsDefer

JsDefer features parallel/serial loading based on definitions, dependency, and wrapped versus unwrapped, and whether dependencies are defined in separate def file or in script itself and integration with Deferred (as in jQuery 1.5) enables or simplifies many use-case scenarios among many others.

Author: Boris Moore

Project URL: Here

Size: 4.7 KB

Related links:


JSL (JavaScript Loader)

JSL features on-demand loading, is browser cacheable, dynamic asynchronous JavaScript loading, lazy loading and duplicate source prevention among a ton of other features.

Author: Andres Vidal

Project URL: Here

Size: 2.1 KB

Related links:


YUI 3 Get

The Get Utility provides a mechanism for attaching script and css resources — including cross-domain resources — to the DOM after the page has loaded.

Author: Adam Moore

Project URL: Here

Size: 17.9 KB

Related links:


DominateJS

DominateJS allows you to asynchronously load all your JavaScript, and defer sequential execution until the page loads. DominateJS aims to be a cross-browser and 100% document.write-safe library! This is a heavily modified (and powerful!) evolution of ControlJS.

Author: Chris Joel & Jason Benterou

Project URL: Here

Size: 48 KB


Load.js

load.js is a micro JS lazy-loader. Built on top of chain.js, it allows you to lazy load your JS scripts sequentially or in parallel and handle complex dependency chains.

Author: Chris O’Hara

Project URL: Here

Size: 2 KB

Related links:


BravoJS

BravoJS is an implementation of a proposed draft for CommonJS Modules/2.0

Author: Wes Garland

Project URL: Here

Size: 10.7 KB


Bootstrap

Bootstrap is a small library for dynamically loading JavaScript files.
It’s primary use case is for using in your JS code to load JS files only when they are used.

Author: Scott Koon

Project URL: Here

Size: 1.3 KB


LazyLoad

LazyLoad is a tiny (only 904 bytes minified and gzipped), dependency-free JavaScript utility that makes it super easy to load external JavaScript and CSS files on demand.

Whenever possible, LazyLoad will automatically load resources in parallel while ensuring execution order when you specify an array of URLs to load. In browsers that don’t preserve the execution order of asynchronously-loaded scripts, LazyLoad will safely load the scripts sequentially.

Author: Ryan Grove

Project URL: Here

Size: 1.6 KB


curl.js

curl.js is a small, but very fast AMD-compliant asynchronous loader. Current size: 4.5KB (2.1KB gzipped) using Google’s Closure Compiler.

If you’d like to use curl.js for non-AMD modules (ordinary javascript files), you’ll want to use the version with the js! plugin built in. You may also want to build-in the domReady module. The combined curl+js+domReady loader is still only 6.1KB (2.7KB gzipped).

Author: John Hann

Project URL: Here

Size: 5 KB


$script.js

$script.js is an asynchronous JavaScript loader and dependency manager with an astonishingly impressive lightweight footprint. Like many other script loaders, $script.js allows you to load script resources on-demand from any URL and not block other resources from loading, like CSS and images.

Author: Dustin Diaz

Project URL: Here

Size: 1.4 KB


NBL.js

NBL.js is a tiny script that will make your HTML pages load faster by loading all your JavaScript files asynchronously (in parallel) with the rest of your page. Normally if you include two or three scripts in your page, the browser will wait for them to be executed before your page is shown.

Author: Berklee

Project URL: Here

Size: 971 B

Related links:


That’s a Wrap!

While each of the tools listed above handle script loading in slightly unique ways, be sure to perform your tests when deciding which is the right one for you.

As I mentioned earlier, if you think a loader should be here but isn’t, drop us a line below and we’ll update the roundup accordingly.

April 11 2011

17:55

The Top 8 Placeholder Services for Web Designers


In the last year, there’s been a wave of helpful placeholder services. What’s a placeholder? Well, when you’re working on a new website, isn’t it a waste of time to use stock images, cropped to the right dimensions? A placeholder service allows you to automatically use a random image at the desired dimensions with minimal effort.

In the last week, I’ve compiled a list – in no particular order – of what I consider to be the most useful and flexible placeholder services on the web. Certainly, for most of you, you’ll end up picking one or two of the following to use in your own projects.


1 – PlaceKitten

PlaceKitten

A quick and simple service for getting pictures of kittens for use as placeholders in your designs or code. Just put your image size (width & height) after our URL and you’ll get a placeholder.

Usage

<img src="http://placekitten.com/200/300" />

<!-- Black and White -->
<img src="http://placekitten.com/g/200/300" />

Follow the placekitten.com url with your desired dimensions. For example, if I needed a 450 x 300 placeholder image, I’d set the source attribute of an image tag to: http://placekitten.com/450/300.


2 – Placehold.it

Placehold

A quick and simple image placeholder service.

Usage

<img src="http://placehold.it/350x150">

<!-- Set Colors -->
<img src="http://placehold.it/350x150/292929/e3e3e3">

<!-- Add Text -->
<img src="http://placehold.it/350x150&text=Hello World">

<!-- Set Image Type -->
<img src="http://placehold.it/350x150.png&text=Hello World">
<img src="http://placehold.it/350x150.gif&text=Hello World">
<img src="http://placehold.it/350x150.jpg&text=Hello World">

Note that, with this service, you set your dimensions more traditionally, rather than separating the widths and heights into segments.

Placehold.it is a bit different in that, rather than using photos for placeholders, it instead uses more traditional solid color images, which might be more appealing to some designers.


3 – SheenHolders

SheenHolders

Add some Sheen to your designs and prototypes with Charlie Sheen placeholder pictures. Simply change the width and height in the URL to get your custom placeholder.

Usage


http://sheenholders.com/421x550

<img src="http://sheenholders.com/421x550" />

If you want your web designs to be winning, then you need the Sheen!


4 – FlickHoldr

FlickrHolder

Get placeholders related to the site you are developing, by pulling images from flickr based on tags.

Usage

FlickrHolder is helpful in that, in addition to using Flickr photos as the placeholders, it also allows you to choose a desired tag as the third segment. You can even choose to display photos in black and white.

<img src="http://flickholdr.com/200/300" />


<img src="http://flickholdr.com/200/300/sea,sun" alt="" />


<img src="http://flickholdr.com/200/300/sea,sun/bw" alt="" />

5 – LoremPixum

Placeholder Images for every case. Webdesign or Print. It’s simple and absolutely free!

Usage

<!-- Default -->
<img src="http://www.lorempixum.com/400/100" alt="" />

<!-- Black and White -->
<img src="http://www.lorempixum.com/g/400/100" alt="" />

<!-- Tagged -->
<img src="http://www.lorempixum.com/g/400/100/sports" alt="" />

6 – PlaceDog

PlaceDog

Dogs are so superior to felines. Just choose your dimensions in the pathname and share the doggie love on your projects.

Usage

<img src="http://placedog.com/400/300" alt="" />

<!-- Black and White -->
<img src="http://placedog.com/g/400/300" alt="" />

7 – DummyImage

DummyImage

Usage

DummyImage is particularly nice, when compared to some of its competitors, in that it offers a great deal of flexibility. Let’s take a look at some of the available options.

<!-- If you only pass a width, a square will be generated -->
<img src="http://dummyimage.com/600" alt="" />

<!-- Width and Height -->
<img src="http://dummyimage.com/600x400" alt="" />

<!-- Apply background and text colors -->
<img src="http://dummyimage.com/600x400/292929/e3e3e3" alt="" />


<img src="http://dummyimage.com/600x400.png/292929/e3e3e3" alt="" />
<img src="http://dummyimage.com/600x400.gif/292929/e3e3e3" alt="" />
<img src="http://dummyimage.com/600x400.jpg/292929/e3e3e3" alt="" />


<img src="http://dummyimage.com/800x600&text=Your Mom Goes to College" alt="" />

or with background and text colors...

<img src="http://dummyimage.com/800x600/292929/e3e3e3&text=Your Mom Goes to College" alt="" />

8 – Griddle.it

Griddle.it

A clean and simple way to help align your layouts. No complex grid frameworks necessary.

Certainly, Griddle.it is unique compared to its peers because its focus is on creating grid images, which can then be applied to the background of your web design during production. View a live demo here.

Usage

Applying a background grid requires the following format: http://griddle.it/[total width]-[number of columns]-[gutter size].

/* Generate a 960px grid, with 12 columns and 30px gutter */

body {
  background: url(http://griddle.it/960-12-30) repeat-y center top;
}

Conclusion

So yeah – they’re all rather similar to one another. At this point, you only need to choose one or two that you find to be the easiest to remember. But one thing is for sure: these definitely save a lot of time!

March 05 2011

18:26

Essential Plugins for Every WordPress Installation


One of the reasons why people gravitate toward WordPress is the seemingly unlimited numbers of open source plugins available. Today, I’d like to go over a few plugins that I think absolutely warrant your attention. I’m sure I’ve missed some, though, so make sure to chime in within the comments! Hopefully, this article will morph into an absolute monster of a list that can act as a reference for fellow WordPress developers.


Jump to a Category


Comments


Akismet

Tutorial Image

Akismet is quite possibly the perfect spam management solution. It’s unobstrusive, manages to catch 99% of spam and is quite easy to get started. An absolute must have!.


Disqus Comments

Tutorial Image

Disqus makes commenting easier and more interactive, while connecting websites and commenters across a thriving discussion community. It features the niceties you’d expect like Gravatars, feeds, rating and threading.


SEO


All in One SEO Pack

Tutorial Image

An exceedingly powerful solution to optimize your website for search engines. It automatically generates meta tags, lets you override a page’s title and description among a slew of other features. More importantly, you can pretty much make it work out of the box with minimal tweaking.


SEO Smart Links

Tutorial Image

Interlinking within your site is one of the most basic tenets of SEO. SEO Smart Links can automatically link keywords and phrases in your posts and comments with corresponding posts, pages, categories and tags on your blog. Further SEO Smart links allows you to set up your own keywords and set of matching URLs.


HeadSpace2 SEO

Tutorial Image

HeadSpace2 is an all-in-one meta-data manager that allows you to fine-tune the SEO potential of your site. It lets you control almost every aspect of your site’s meta-data, including advanced tagging and analytics.


Google XML Sitemaps

Tutorial Image

This plugin will generate a special XML sitemap which will help search engines like Google, Bing, Yahoo and Ask.com to better index your blog. With such a sitemap, it’s much easier for the crawlers to see the complete structure of your site and retrieve it more efficiently. The plugin supports all kinds of WordPress generated pages as well as custom URLs. Additionally it notifies all major search engines every time you create a post about the new content.


Performance


WP Super Cache

Tutorial Image

Once you get beyond a certain size, WordPress can act really slow. Caching your content, as always, is a great solution. This plugin does exactly that. It create static versions of your content which is served instead. Works wonders specially when you’re heavily trafficked.


CDN Sync Tool

Tutorial Image

Uploads/syncs your static files to a Content Deilvery Network (CDN) with push CDNs such as Amazon S3 / CloudFront and CloudFiles aswell as Origin Pull CDNs such as MaxCDN / NetDNA. You can choose files from your media library, theme directory, WordPress’s wp-include directory and plugin directories aswell as new media library uploads.


WP Smush.it

Tutorial Image

An excellent plugin that automatically processes any image in the blog through the smush.it service, without requiring any user intervention reducing file sizes and improving performance.


WP Minify

Tutorial Image

WP Minify grabs JS/CSS files in your generated WordPress page and passes that list to the Minify engine. The Minify engine then returns a consolidated, minified, and compressed script or style for WP Minify to reference in the WordPress header.


WP-Optimize

Tutorial Image

This simple but effective plugin allows you to clean up your WordPress database and optimize it without phpMyAdmin. Also renames any username.


Social


Socialize

Tutorial Image

This provides an easy way to selectively add actionable social bookmarks to your posts content or below the post in a ‘Call To Action’ box. You can add bookmarks either inside the content or in a box below the content.


AddToAny

Tutorial Image

This WordPress plugin to help people share, bookmark, and email your posts and pages using any service, such as Facebook, Twitter, Google Buzz, Digg, Delicious, and well over 100 more sharing and social bookmarking sites.


Media


Scissors Continued

Tutorial Image

Scissors Continued adds cropping, resizing, and rotating functionality to WordPress’ image upload and management dialogs. Scissors also allows automatic resizing of images when they are uploaded and supports automatic and manual watermarking of images.


NextGEN Gallery

Tutorial Image

NextGEN Gallery is a full integrated Image Gallery plugin for WordPress with a slideshow option. It is a full integrated Image Gallery plugin for WordPress with dozens of options and features which provides a simple administration system at the back end which can also handle multiple galleries.


Monetization


Advertising Manager

Tutorial Image

This plugin will manage and rotate your Google Adsense and other ads on your WordPress blog. It automatically recognises many ad networks including Google Adsense, AdBrite, Adify, AdGridWork, Adpinion, Adroll, Chitika, Commission Junction, CrispAds, OpenX, ShoppingAds, Yahoo!PN, and WidgetBucks. Other ad networks can be used as well.


Ad Injection

Tutorial Image

Ad Injection injects any kind of advert (e.g. Google AdSense, Amazon Associates, ClickBank, TradeDoubler, etc) into the existing content of your WordPress posts and pages. You can control the number of adverts based on the post length, and it can restrict who sees adverts by post age, visitor referrer and IP address.


Backup


WP-DB-Backup

Tutorial Image

WP-DB-Backup allows you easily to backup your core WordPress database tables. You may also backup other tables in the same database.


EZPZ One Click Backup

Tutorial Image

EZPZ One Click Backup is a very easy way to do a complete backup of your entire WordPress site. In fact it’s so easy to use there are no required user settings, everything is automatic. Just one click and presto, you’ll have a complete backup stored on your server. One more click and you can download the entire backup to your own computer.


Analytics


Google Analyticator

Tutorial Image

Google Analyticator adds the necessary JavaScript code to enable Google Analytics logging on any WordPress blog. This eliminates the need to edit your template code to begin logging. Google Analyticator also includes several widgets for displaying Analytics data in the admin and on your blog.


WP-Stats-Dashboard

Tutorial Image

Display your blog’s stats graph plus your blog traffic, social engagement and social influence directly in your dashboard. See how you’re ranking on Alexa, check out your Technorati authority, monitor your ranking across multiple sites and much more.


Utilities


Yet Another Related Posts Plugin

Tutorial Image

Yet Another Related Posts Plugin (YARPP) gives you a list of posts and/or pages related to the current entry, introducing the reader to other relevant content on your site. Using a customizable algorithm considering post titles, content, tags, and categories, YARPP calculates a “match score” for each pair of posts on your blog. You choose the threshold limit for relevance and you get more related posts if there are more related posts and less if there are less.


Organize Series

Tutorial Image

The Organize Series WordPress Plugin helps with the organization and presentation of articles/posts you write as part of a series. It helps make it easier for readers of your blog to discover all the series you’ve written and also to easily find post that are part of the same series.


Simple URL Shortener

Tutorial Image

Simple URL Shortener is the simplest, yet most powerful URL shortening plugin available, with over 100 shortening services available.


Wrapping Up

As you may have noticed, I’ve chosen to stick to free plugins. There are, however, plenty of killer paid options to consider — CodeCanyon, for instance, is the web’s largest marketplace for premium WordPress plugins, amongst other sorts of scripts and components.

We’ve, of course, only merely scratched the surface here. Chime in below with the plugins you use and love on a daily basis, and I’ll make sure to keep this list updated weekly. Thank you so much for reading!

February 10 2011

00:25

30 Developers you MUST Subscribe to as a JavaScript Junkie


As JavaScript developers, we have quite crazy requirements. The playing field is in a state of constant flux and one of the best ways to keep up is interacting with other developers and reading their code. Blogs, such as the one you’re reading, are a perfect amalgamation of these two activities.

Today, I’d like to bring your attention to a number of blogs written by pretty well versed developers, focusing on JavaScript development, that you owe yourselves to bookmark.


A Quick Word on my Choices

Even though these blogs aren’t updated often, in fact a lot of them get updated maybe thrice a year, the content they do have are worth their weight in, well, smartly written JavaScript. The developers below vary from wildly popular to almost obscure but they have one thing in common — their passion for JavaScript.

I’ve limited myself to a cliff notes version of each dev to keep it short. Don’t loiter around — click on those links and get reading!


John Resig

Developer Image

Douglas Crockford

Developer Image

Dean Edwards

Developer Image

Nicholas C. Zakas

Developer Image

Dustin Diaz

Developer Image

Brendan Eich

Developer Image
  • Inventor of the JavaScript language.
  • Works at Mozilla.
  • Remember to check out his podcast, as well.
  • Tweets at @BrendanEich

David Flanagan

Developer Image

Thomas Fuchs

Developer Image

Paul Irish

Developer Image

Yehuda Katz

Developer Image

Juriy Zaytsev

Developer Image

Peter van der Zee

Developer Image
  • Creator of the JS1K competition
  • Tweets at @kuvos

Stoyan Stefanov

Developer Image

Dmitry Baranovskiy

Developer Image

Lucas Smith

Developer Image

Ben Alman

Developer Image
  • Contributor to the jQuery and Modernizr projects.
  • Creator of so many jQuery plugins that we’re ethically obligated to use the word buttload.
  • Tweets at @cowboy

Rey Bango

Developer Image

Remy Sharp

Developer Image

Cody Lindley

Developer Image

James Padolsey

Developer Image

Oliver Steele

Developer Image

Ben Cherry

Developer Image

Michael Bolin

Developer Image

James Coglan

Developer Image

Angus Croll

Developer Image

John-David Dalton

Developer Image

Andrea Giammarchi

Developer Image

Peter Michaux

Developer Image
  • Dude is a darn enigma, wrapped in a riddle, shrouded in mystery. The articles are pretty much one of the best you’ll get to read so don’t miss out.

Christian Heilmann

Developer Image

Dion Almaer

Developer Image

That’s a Wrap!

I’m sure a lot of you are frothing at the mouth by this list not including someone. Fret not! Chime in below and I’ll make sure to keep this list periodically updated.

January 01 2011

00:01
Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl