Talk to me about anything. If you’d like to work with me, or
even if you just need a hug, I’ll get back to you shortly.

Please enter your name

Please enter a valid e-mail

It's cold!

Say something!

Web Developement, Web Design, Graphic Design, & Interactive Media Blog of Joren Rapini

Transify – a jQuery plugin to easily apply transparency / opacity to an element’s background

In my search for a solution to make a background / border of an element transparent, I found that there really isn’t a perfect one that fit a particular need. IE6, IE7, and IE8 do not support CSS3′s alpha background color value nor do older versions of other browsers, 8-bit PNG’s do not look great in Internet Explorer, and other javascript PNG fixes are not great for performance nor will they work on elements with repeating backgrounds. So, I’ve written a great and easy to use solution in the form of a jQuery plugin. Read the rest of this entry

74 Comments. Add one!
Oct
24

Display Random Dynamic Content With PHP and XML

Every developer, at one point in time, will run into a situation where they need to display a small amount of dynamic data. Why create a whole database? Enter the magical world of XML. XML is easily manageable by anyone who has ever even dabbled a bit in HTML, so understanding should come easily just by looking at an XML file. PHP has classes already set up to parse XML. Here you’ll learn how to use PHP and XML to randomly generate HTML content.

Read the rest of this entry

25 Comments. Add one!
Nov
8

The Simple, Quick, and Small jQuery HTML Form Validation Solution

This is a tutorial on how to write a live validation script for HTML form inputs using jQuery. There are plenty of these out there already, but in most cases I found that they could not be applied quickly. 9 out of 10 websites that I develop need nothing more than a simple validation to tell the user when an input was left empty or filled in improperly. Once you’ve gotten the hang of this script, it will only take you a couple of minutes to reapply it to each new website that you’d like it on.

All you’ll have to do is type in a list of what fields are required, and then change the CSS style of a class to suite that particular website, and that’s it!

Read the rest of this entry

110 Comments. Add one!
Oct
5

The Right Way To Kick Off A Web Design Strategy Client Call

That first call you have with your client on constructing your web design vision is probably one of the most important calls you’ll make during a project from start to finish. If you do not ask enough questions, or the right ones, then you are going to end up handing over a design that the client is not interested in. This can cause a little loss in client faith in your abilities, as well as slow down the progress of the project and create more work for you. The more information you gather right from the start, the less changes you’ll have to make to your design concept. You have to make sure you are well prepared for this call.

Read the rest of this entry

14 Comments. Add one!
Sep
7

Design Quick and Easy Colorful Photoshop Swirls

This is a tutorial on how to create the swirls that I’ve used throughout my website. It’s very quick and easy to accomplish them with some transparency and a few layer styles as long as you are a little practiced with the Pen Tool within photoshop.

photoshop swirl tutorial
 

Read the rest of this entry

7 Comments. Add one!
Aug
23

CSS | Tutorials, Techniques, Hacks, & Resources – MLC#4

Back to the Massive Link Collection Series. This article focuses purely on CSS, and includes a list of my collection of articles and links that I’ve discovered over the past year that I’ve found to be very useful and helpful. These links, in combination with playing around with the Firebug extension for Firefox, will help you master CSS (assuming you’ve already gotten some initial experience with the language).

Once again, a description of these posts: I provide a list of links that I have collected over the past year, as well as all of the Firefox tags that I use to keep them indexed. This gives you a ton of easy and quick resources. If you are unfamiliar with Firefox’s bookmarking system and want to know how to truly take advantage of this post, click here.

Read the rest of this entry

5 Comments. Add one!
Jun
26

jQuery AJAX Validation Contact Form with Modal + Slide-in Transition

Due to popular demand, here is a tutorial on how I created one of the more complicated pieces of machinery on my new site: the contact form. A lot of different techniques went into this, and I have a few people/places to thank for some of the original code that inspired my final product: primarily Design Shack for their tutorial on creating a slide-in contact form with ajax, Zachstronaut for his code on scrollable same page links (used all over my site, but most effectively on the contact link in my footer), and Yens Design for a quick how-to on creating the modal pop-up background darkening effect (surprisingly extremely easy to do with jQuery).

All you need is jQuery. No plugins are necessary for this to work, and it is only 2kb of extra code in addition to the jQuery library. This also works on all browsers, IE6 and up.

Read the rest of this entry

367 Comments. Add one!
Jun
11

Redesign of Joren Rapini.com is here!

BIG SIGH OF RELIEF. After about a month of being a free-time vampire, and my neglect of friends and loved ones, this thing is live and ready to rock. I’ve learned a lot since the last version of the site was created over a year ago, so it is quite a drastic design change. I hope you all enjoy it and I look forward to working with it for all of my new blog articles. There are still some minor things that I plan on updating, but right now I’m going to go out and enjoy the holiday over here for a little while.

Give me feedback! I appreciate anything and everything. While the portfolio is for the clients, the blog is for the readers so I value your opinions. Also, if anyone has any requests as to how I did anything on this website, please let me know in the comments, and I’ll be sure to make a tutorial for it! I experimented with a lot of new things. Also, I updated the comment system, so it now uses WordPress 2.7′s threaded comments.

5 Comments. Add one!
May
25

Web Design Inspiration | Galleries, Websites, And More – MLC#3

So here we are, Part 3 of my Massive Link Collection articles. This one is focused around inspirational pieces, and included are links to collections and websites that showcase great web sites, logos, graphics, javascript techniques, CSS, etc. Looking at other quality work is always a great way to get started on a project of your own. If you are stuck on something and need some new ideas, you need not look any further than this post.

Once again, a description of these posts: I provide a list of links that I have collected over the past year, as well as all of the Firefox tags that I use to keep them indexed. This gives you a ton of easy and quick resources. If you are unfamiliar with Firefox’s bookmarking system and want to know how to truly take advantage of this post, click here. Also, be sure to check out the other posts from the series if you haven’t yet: Useful Javascript, jQuery, and AJAX Tutorials and Resources – Massive Link Collection Part #1 and Design Tutorials, How-tos, and Resources for Photoshop and Illustrator – Massive Link Collection Part #2.

Read the rest of this entry

42 Comments. Add one!
Apr
24

Design Tutorials, How-tos, and Resources for Photoshop and Illustrator – MLC#2

Welcome to the second part of a series of articles that focuses on providing readers with a colossal list of links to bookmark and tag for easy future reference. I provide a list of links that I have collected over the past year, as well as all of the Firefox tags that I use to keep them indexed. This gives you a ton of easy and quick resources. If you are unfamiliar with Firefox’s bookmarking system and want to know how to truly take advantage of this post, click here. Also, if you missed my first post, be sure to check out Useful Javascript, jQuery, and AJAX Tutorials and Resources – Massive Link Collection Part #1.

Read the rest of this entry

29 Comments. Add one!
Apr
15

Useful Javascript, jQuery, and AJAX Tutorials and Resources – MLC#1

Welcome to the first post of a series of articles I will be doing that will bestow on you an enormous collection of bookmarks that I’ve horded like a squirrel and his nuts. These blog posts are not going to be your typical lists. These are posts that I have collected over the past year, and they’ve all been bookmarked and tagged for later use. Any good web designer and developer should have a nice bookmark collection; it’s appropriately compared to batman’s utility belt. With Firefox’s bookmarking system that it introduced in Firefox 3, this has become very easy thanks to its tagging system. For example, need to find a quick tutorial on that cool jQuery accordion effect that you found a couple of months ago? Hit CTRL+B, type in jquery accordion and whammo, there is the bookmark you need. This is only my recommendation, so do what you will with these links.

Many of these links are bookmarks to articles that were list themselves, so they included many items. What’s special about this list on Joren Rapini’s blog, you ask? Well, I have graciously copied and pasted the Firefox tags that I use to identify each one of these pages in my bookmarks, so you can copy and paste them right into yours! This should save you a lot of time, and give you an enormous wealth of resources to boot.

Read the rest of this entry

30 Comments. Add one!
Apr
5

Font Face Replacement Embedding Techniques and Resources

Thanks to current lack of support for and other licensing issues regarding @font-face, we have to turn to other methods of using special fonts on our web pages. But what to choose? There are several great proven methods out there for font face replacements on a website, so today we’re going to take a look at 4 of the bigger ones that I have taken for a spin. I’m going to list for you the pros and cons that I discovered for each method.

Read the rest of this entry

12 Comments. Add one!
Mar
28

Comment To Win One Thousand Free Business Cards – Winner Announced

Hey everyone! Got some goodies this week. U-printing has offered up one thousand business cards to the lucky winner. In order to enter, all you have to do is leave a comment at the end of the blog post, describing what you would use the free business cards and/or canvas print for.

Read the rest of this entry

18 Comments. Add one!
Mar
7

Design a Space Cloud Starry Fantasy Scene with Photoshop

Sorry for the long delay in posts! It’s been a busy month. This article is a tutorial for how to create the following fantasy scene in Photoshop. You can use these techniques in a bunch of different ways from within a web interface design, to my example which is a wallpaper that I created as a Valentine’s Day gift to my fiance Candy.



Read the rest of this entry

7 Comments. Add one!
Mar
1

Amazing Web Designer Resource Collection and Color Tools

I was originally going to write a quick post on some color tool resources, being inspired by Well Styled’s brand new revision of their awesome color tool, found here. The Color Scheme Designer has a lot of neat new functions, including generating a preview of a website with the colors that you have picked along with new customization features. I realized that most of the tools I had to write about were already included in this very nice website that Tom Dufour brought to my attention, called Web Designer Heaven.

Read the rest of this entry

4 Comments. Add one!
Feb
8

Easy Client Control Over Page Elements with CushyCMS

Every client you deal with should have a unique solution to fit their needs. CushyCMS is definitely no end-all-be-all CMS solution, but it is absolutely perfect for a certain niche of websites. If you are developing a website that, for example, will often need a couple paragraphs on the front page changed often, or they’re a restaurant that just wants to update specials and prices every once and a while, then CushyCMS is a pretty optimal solution. You can let your client take control without damaging anything else on the website and, best of all, they get off your case on making updates! It’s extremely quick and easy to set up, and very easy to explain to your clients on how to use it as well.

Read the rest of this entry

7 Comments. Add one!
Jan
25

Enhance Your Love For Music With These Applications

There is one thing in my life that I will always cherish above even web designing and developing (gasp), and that is music. I was a musician for several years, and that even included being a high school band geek. I totally rocked that saxophone. In the last few years, I have expanded my horizon when it comes to music to encompass just about everything and I have a bit of an addiction to amassing as much of a collection as I can. If you share my love for music, then you will appreciate this post. I’m going to go over some of the applications and services that I use on my computer that helps with all kinds of aspects of dealing with a music collection from managing your library, finding new music, and just getting the most of out the experience.

Read the rest of this entry

2 Comments. Add one!
Jan
20

Are CSS Frameworks Really Worth Using?

I’ve witnessed the beauty of frameworks for languages like PHP such as CakePHP, and for Ruby such as Ruby on Rails, not to mention the myriad of great javascript libraries that are out there. I see the potential for making life a lot easier by using these frameworks. They prevent you from having to reinvent the wheel, and can really speed up your production. The difference between these and CSS frameworks such as Blueprint is that they impact how the site functions, and not really how it appears to the user (I’m not including js libraries in this statement). So to me, the idea of a CSS framework seems like you’d be producing some stale designs.

Read the rest of this entry

26 Comments. Add one!
Jan
15

Useful Free Applications For Any Web Dev / Designer

This is somewhat of a continuation of Great Firefox Plugins For Any Web Designer or Developer where I talked about some handy Firefox plugins, and now I’d like to speak at you about some applications that I’ve found useful throughout my career, whether it be something that can help make a task a little easier or something that just helps me get through a day of work by making it more enjoyable.

Read the rest of this entry

14 Comments. Add one!
Jan
5

Double Body Background CSS Trick

So, you just created this awesome fancy background for a website. The top part of the background is large and in charge, while everything below it is going to be a repeating background that goes all the way down to the bottom of the page and helps define your website’s borders. The goal is to make sure the top background sits on top of the repeating background so that you cannot see the repeating background until the top one is done, but how do you utilize 2 centered background images without the browser creating a horizontal scrollbar?

Read the rest of this entry

66 Comments. Add one!
Dec
30

Great Firefox Plugins For Any Web Designer or Developer

The greatest thing about technology advancing is that it allows us to be more efficient and lazy than we ever have been before. I wanted to talk about some of the applications, services, and resources that I use that make my life as a web designer/developer easier, quicker, and more enjoyable. And more tasty. I realized that I bloated this article enough with just Firefox plugins, so I’m going to make another post after this one that involves useful non-Firefox applications. You may have already heard of a lot of these, but read on anyways because you never know what you might have missed. Or, possibly you are just enthralled by my incredible writing. Or you salivate over any mention of Firefox plugins.

If you still aren’t convinced, just shut up and read on anyways, I promise you’ll get a Hershey kiss at the end. Maybe.

Read the rest of this entry

10 Comments. Add one!
Dec
21

CSS Navigation Rollovers With Drop-downs

This post is a continuation of Super Fantastic CSS Navigation Image Rollovers where we created CSS rollovers with a single image, so it would probably be a good idea for you to take a look at that post in order to follow along with this one if you haven’t done so yet. We’re going to take the code from that post, and adapt it to Stu Nicholls’ CSS drop-downs. He has done a great job in creating a multi-level drop-down menu that is verified to work in most browsers, and without any slow loading javascript.

Read the rest of this entry

35 Comments. Add one!
Dec
14

Super Fantastic CSS Navigation Image Rollovers

The fun part of CSS (if you’re a weirdo like me and get a kick out of this sort of thing) is coming up with the most optimized, cleanest, accessible, and compliant code that you possibly can. This tutorial will show you one of my favorite ways of doing a navigation menu with image rollovers done in CSS that uses only one image and very minimal HTML / CSS code. This is by no means the only way of going about it, nor is it the “right” way if there is such a thing, but I’ve found this to be a very quick and efficient way of accomplishing our task.

This article is the first of a 2 part series, and the second half will apply this tutorial into creating a CSS only dropdown menu navigation with the image rollovers that is compliant with IE6 and up.

Read the rest of this entry

100 Comments. Add one!
Dec
3

Beginning of a new era. Or. . . maybe just a new website

Hello everyone!

I’ve been hard at work at this new website. Well, really going back and forth between “hard” work and “I’ll get to that later. . .” work. The website is finally complete, and now that it is I plan on working a lot more with it.
Read the rest of this entry

3 Comments. Add one!
Nov
23
This site is protected by Comment SPAM Wiper.