Archive for the ‘Tutorials’ Category

Pruning blog posts from syndication feeds

Wednesday, July 15th, 2009

rssbuttons

Whether you believe that micro-blogging and syndication feeds provide too much information and makes us either dumber or smarter, information overload has been here for a while. Even though, Microsoft Internet Explorer has had an RSS button for two versions, I would say that syndication feeds are still not mainstream, yet highly valuable that you can feast on such a cornucopia of information without browsing to a single web page. Think of syndication as requested email (in juxtaposition to the majority of your Inbox, right?). If you are in the anal-retentive 43 folders crowd, you’ve probably already have a syndication feed management process in place for two years. If you haven’t and the thought of having to browse through 100 new blog posts every day is overwhelming, I recommend FeedHub. (more…)

Hiding an email address from spambots and spiders

Monday, June 8th, 2009

spider-webs

There is an army of spiders out there.  Some, like GoogleBot, you want scanning your site to be listed in their search engine. Many however have a devious purpose–to collect email addresses to add to spam email lists. If your email address is already out there, then there is no pulling it back in. The only way to eliminate spam is to create a different address and inform all your contacts that you have changed email addresses.

Ways to combat email spam:

  • A non-linked image
  • HTML entity encoding
  • Client-side obfuscation/abstraction (via JavaScript)
  • Server-side redirect
  • Contact form (no email address listed)

If your email address, is spelled out with any client viewable code, it is possible to obtain. Now that search engines can read PDF documents, including your email within a PDF as text may be suspect. I have not gone into great depth on any of them below but have provided a short description of each method with advantages and disadvantages listed. (more…)

Project organization: A reasonable file framework

Friday, May 1st, 2009

file-framework

The writer, Stewart O’Nan, once said “The two hardest things about writing are starting and not stopping.” Programming at its essentials is writing. When I’m wearing my web developer hat, it seems that I spend over a quarter of my time browsing around the OS-X Finder. So what better way to start programming then having a file framework. Not only can you start more quickly, but your structure will stay consistent. Think of the last time you edited someone else’s project and that person placed all their files in one folder. Oh, the horror!

Introduction to my file framework

The guiding principle for my file framework is:

Either precisely title all files with hierarchical prefixes or create sub folders to categorize your files.

With video projects and print projects that output to one file, file organization isn’t as essential. With web design, you do not want the files you publish getting mixed up with your source files. Yes, we all have at least once uploaded a 100MB Photoshop file to the online server and wondered why it was taking so long. This file framework focuses on web production and output. (more…)

How to create a Twitter book reading list

Monday, February 16th, 2009

twitter-reading-list I enjoy reading books. Most of the time, I read non-fiction. I don’t have anything against fiction. My wife reads fiction, but it’s not my cup of tea, unless its a classic. Whatever you read, you would probably like to share it with your friends. Now it’s easy. With these steps you can tweet about your latest book by simply adding the book to an Amazon Wishlist. No figuring out how much of the title you can post within the 140 character limit. No creating a TinyURL for the Amazon product page. A few hours later your twitter account will tweet your book addition! (more…)

Gallery2 titles and keywords search engine optimization script

Tuesday, January 13th, 2009

If you are interested in the open-source image gallery web application, Gallery, you have probably read the Thirteen Ways To Add SEO To Gallery2. If you haven’t, then read that tutorial first. Within that tutorial, I mention a bulk renaming script that I have used for years with Gallery2 to change titles and keywords. This post is about that title and keyword generating bulk script. It removes some common naming conventions from the titles and removes common words from the keyword list. Do people really want to see all the photographs that contain the articles, “a,” “an” and “the.” I certainly wouldn’t.

The default title for Gallery2 item uploads is the file name of the image. It easier to name your files well from the beginning from the safety of either than edit the URL, titles, and keywords for your item after they are uploaded. My naming convention for a file name is photo_set-photo_subset-people_or_objects. For a photo of my parents, my bride and myself at my wedding, I used “wedding-party-parents-rachel-stephen.jpg” (more…)

CSSsprite: Photoshop script combines two images for CSS hover

Wednesday, November 19th, 2008

The need

Professional web developers have been aware of CSS sprites since 2004. They are the background graphics that change position based on mouse hover thus eliminating the need for JavaScript image swaps and image caching since the “mouse on” and “mouse off” are one image. I have been using sprites for years. It is a more tedious process than clicking Swap image on a DreamWeaver drop down menu, but it produces more accessible and more clean code. The most tedious part of creating CSS sprites for menu navigation is aligning the static (in-active) and hover (active) images. This script solves this problem by taking two images and merging them into one. I hope this increases your productivity and creates a more standards-compliant web.

(more…)

Secondary Browser: I’ve been using Chrome for months

Thursday, September 4th, 2008

This isn’t about Chrome, for me it’s really about using a second browser. A second browser to only use for web applications. Honestly, I admit I haven’t been using Google Chrome for months now. I’ve been using Safari. It is my understanding that Google’s Chrome browser uses WebKit as it’s rendering engine with the advantage of starting each window/tab in a separate process (which Internet Explorer 8b2 also does) to increase stability. The general idea is if your Google Docs crashes, then your Gmail doesn’t crash–just how desktop applications work. Your web applications are sand-boxed and protected from other web pages. Safari/WebKit/Chrome: What’s the difference? (more…)

Create reading list in WordPress from Amazon Wish List using Yahoo! Pipes

Wednesday, June 25th, 2008

I read many books from the library. I don’t finished reading many books though. First of all, they are free, since they are from the library, and second my attention span doesn’t last that long. I believe browsing the web daily from age 14 (circa 1996) will do that to someone (read the latest cover story in The Atlantic Monthly, is Google Making Us Stoopid). Most of the books I read come from the magazines I read (The Atlantic, Books & Culture: A Christian Review) or from the podcasts I listen to (Diane Rehm, This Week in Tech).

Either way, I want to share my latest reading endeavors across my blogs. But how? (more…)

Plain text link to HTML with a PHP function and regular expressions

Wednesday, May 7th, 2008

If you have ever wanted to turn a plain text link, http://www.smjdesign.com, into a "linked" HTML version, http://www.smjdesign.com, you can now. Pass the following function your entire text field and it will find all your links and return tagged HTML.

function replace_plain_text_link($plain_text) {
$url_html = preg_replace(
'/(?<!S)((http(s?):\/\/)|(www.))+([\w.1-9\&=#?\-~%;\/]+)/',
'<a href="http$3://$4$5">http$3://$4$5</a>', $plain_text);
return ($url_html);
}
echo replace_plain_text_link("hi this is dummy text before
http://www.smjdesign.com hi this is dummy text after")

(more...)

Graphic web design and cascading style sheets

Sunday, February 10th, 2008

On Saturday, February 9 at 11:30 am, I spoke at BarcampIndy 2008 on Graphic Web Design and Cascading Style Sheets. All presentations were broadcast on BlipTV. You can view a video of this presentation on BlipTV.

The premise of my presentation was to show an overview of the process between layout in Illustrator and PhotoShop to coding in HTML and CSS. I find that web design is often segmented between the coders and graphic designers. I propose that the best outcome can come from bridging that gap. I do this in my daily workplace and try to show tips and techniques for others to bridge that gap. The time slot was only a half hour, so I could not go into coding detail, but only point to tutorials via links. (more…)


My Sites