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

55 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

22 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

81 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

3 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

317 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

40 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
Older Entries