Simple Web Design: 75 Sites Featuring Minimalist Interfaces
Posted: July 23rd, 2009 | Author: Kurt | Filed under: Web Design | 25 Comments »
10 Social Bookmarking Sharing Buttons For Your Site
Posted: July 22nd, 2009 | Author: Kurt | Filed under: Tools | No Comments »Social bookmarking is a great way to earn new visitors and RSS subscribers. While you could always take a few hours to submit your own posts to a host of social bookmarking site, it’s better and less time consuming to encourage your visitors to do it for you. It allows readers to engage more deeply with your content and suggest it personally to friends, and it gets around the prohibition of self-promotion imposed by some bookmarking outlets. Therefore, here are 10 social bookmarking buttons you can use on your site. If you find any of these services relevant, subscribe to the Cherrysave feed by email or RSS to be the first to get designer and developer resources. Or, keep this page handy by bookmarking it on Delicious.
Add to Any
Add to Any allows you to fully customize the buttons with CSS. Further, you can reorder and add new services, and track data with Google Analytics support.
Add This
Add This features an independent analytics solution to monitor sharing. It supports over 50 social sites, all of which are customizable.
ShareThis
ShareThis allows you to pick from text, image, or rotating button options, with a customizable header and link colors. You can easily integrate this tool into WordPress, TypePad, and Blogger.
Socialmarker Bookmarking Button
This tool adds social share buttons after the text of each article, and automatically fills in the Title, Link, and Text field.
Onlywire
Onlywire is a little different in that it is an automatic bookmarking tool. It’s nice in that it saves time, but many sites will ban your accounts, and the integration with Digg and Reddit doesn’t really work. Also, Onlywire requires the button to be placed on the website to stay in the program. If you use the button, you can customize title, text, and the url of your submission. There is a Wordpress plugin also available.
Bookmark Me Plugin
This is a Wordpress plugin inserted via editing the template.
Social Bookmarks Plugin for Wordpress
This plugin creates XHTML compliant buttons after each post, with fully customized services. You can choose to exclude specific pages and posts from the plugin if you so choose.
Share it!
This is a JQuery Plugin for the Javascript-inclined. It features the ability to toggle and hide a group of social bookmarking buttons with a cool slide effect.
Sociable
A Wordpress plugin with a nice backend that allows you to customize priority and inclusion of services.
SocialMarking
Includes a Google Gadget, buttons, and text links.
I hope these buttons get you started on adding sharing features to your website. If you found it helpful, you should RSS to be the first to get designer and developer resources. Or, keep this page handy by bookmarking it on Delicious.
6 Webkit Tricks to Easily Create Stunning iPhone Web Designs
Posted: July 21st, 2009 | Author: Kurt | Filed under: Web Design | 6 Comments »
Webkit is the display engine created by Apple to render pages in Safari on OS X and the iPhone. Like Firefox, it has a series of specific CSS properties you can use to design pages for Mac or iPhone. Unfortunately, though, there isn’t much documentation on the web about Webkit. So, here’s a list of six Webkit properties you can use for your next iPhone or Mac website. Remember, these don’t work on any other browser, so I wouldn’t recommend using them for a PC-oriented website without CSS hacks or IE fallbacks.
Webkit Tricks for iPhone Sites
1. Create Simple Reflections Without Javascript
-webkit-box-reflect: direction offset mask-box-image;
For direction, you can specify what side of the box you want the reflection to show up on. Valid options are above, below, left, or right. Offset is the distance between the beginning of the reflection and the end of the box. It can be a percentage or a measurement (like 5px). The mask-box-image property refers to an image used to mask the reflection.
2. Rounded Corners Without Images
I mentioned this in my post about reducing images with CSS.
-webkit-border-radius: 10px;
3. Easily Shadow Anything
You can add drop shadows to boxes, text, and images with the following Webkit property:
-webkit-box-shadow: hoff voff blur color;
hoff and voff refer to the offset of the shadow. Change the width and opacity of the shadow with the blur setting.
4. Bring Back the <marquee>
Yes, you can bring back the class and sophistication of the scrolling marquee. Here’s the CSS property:
-webkit-marquee: direction increment repetition style speed;
directionspecifies the direction of the marquee.leftandrightare valid directions.incrementis defined in measurements, and it tells Webkit how far to move the object each iteration.repetitionrefers to how many times to repeat the marquee.styledescribes how the marquee should move. You can use commands likealternate,none,scroll, orslide.
speed is how fast the marquee should move.
5. Outline Text with Webkit
-webkit-text-stroke: width color;
6. Create Crazy Tap Colors on iPhone
You can easily change the tap color of your buttons on the iPhone to create a nice custom effect. Here’s the code:
-webkit-tap-highlight-color: color;
Be sure to subscribe to Cherrysave for free by RSS or email to keep up with the latest design tips and tutorials.
Introduction to Web Development with Emacs
Posted: July 20th, 2009 | Author: Kurt | Filed under: Programming | 10 Comments »
Lately, I’ve had a tendency to make fun of the mainstream applications people use to develop websites, asserting my nerd supremacy my touting my love for superior applications. Nothing good comes out of applications like Dreamweaver and FrontPage, I say, except for buggy and ugly websites. I would post snide little comments on Reddit, making fun of bad design and telling people to use Textmate. Then, a more elite nerd than I came along and ruined it for me by suggesting I wasn’t good enough because I didn’t use Emacs.
Emacs? Surely Emacs, the silly little console program, can’t stand up to the almighty Textmate? Actually, it can. Emacs is an absolutely wonderful text editor for programmers, and it can speed up development time with a series of helpful shortcuts, even for a Textmate diehard. Unfortunately, Emacs can have a steep learning curve, so I figured I would provide a basic introduction for using Emacs as a web development environment. Of course, there’s much, much more to Emacs than what I listed here, but hopefully this will help you get your feet wet.
What is Emacs?
Emacs is a superbly portable and extensible text editor. It can run on almost any operating system, and users can customize and add to it far beyond the wildest dreams of the original programmer. Emacs understands what language you are coding in, and can provide indentation, syntax awareness and highlighting, and validation for you right within the interface. While Emacs can run in a variety of graphical environments, I prefer to run Emacs in the console. It functions via a series of commands triggered by the keyboard. Every character from A-Z is a command to print that character, and you can build new commands with the Ctrl or the Meta key, much like standard hotkeys. The Meta key varies per system: on my Mac, it’s the Option key.
Emacs has some terminology that makes things a bit easier to understand. A buffer is the text that you are actually editing. You can have multiple buffers open, and save buffers to a file. Think of them like documents in a word processor: you edit them in memory, and save them to a file when you are done. A window is the view of a buffer. Your screen space is limited, so you can’t see all the buffers at the same time. You switch buffers by manipulating the window.
Basic Emacs Commands
The best way to understand Emacs is to try it out after you get some background. So, here’s a quick walkthrough of the basic commands you can use. To start Emacs, type emacs into your console, and you should be ready to go.
File and Cursor Commands
C-x C-f: find-file — This is how you open a file in Emacs. You can also use this to create a new file. Just type in the file of the file you would like to create, and Emacs will take care of it.C-x C-s: save-buffer — This moves the buffer to the file and saves it for you, erasing whatever was in the file previously.C-f: forward-char — Moves right one character.C-b: backward-char — Moves left one character.M-f: forward-wordM-b: backward-wordC-n: next-line — Move your cursor down one line.C-p: previous-line — Move your cursor up one line.
next-line. Moves down to the next line.
There are a lot more movement commands than this, but this will get you started for the time being. You can also move to the beginning and to the end of the buffer, to the end of the line, and move by paragraph. Another nice feature for developers is the ability to move by function (Ctrl-Meta-a and Ctrl-Meta-e) and by parenthesis (Ctrl-Meta-b and Ctrl-Meta-f).
Killing, Deleting, and Yanking
Killing and Yanking are the equivalent of the copy and paste function found in most text editors. Emacs allows you to kill, or cut, a word with the Meta-d command. This saves the word and removes it from the display. You can kill much larger pieces of text: Ctrl-k will kill the rest of the line, and M-k will kill the rest of the sentence. You can yank, or paste it back to where your cursor is with the Ctrl-Y key.
Web Developer Add-ons for Emacs
These packages make it much easier to code in Emacs by adding in code completion, text highlighting, and error checking.
Rails On Emacs
I absolutely love Rails, and I’m quite happy to find this package that makes it easy to write models and controllers in Emacs. You can quickly run Rake with the command Ctrl-c Ctrl-c r, and looking up API documentation is as easy as pressing F1. You can easily start and stop the server with Ctrl-c Ctrl-c w s, which is nice when you are working with Routes and need to restart the server. There are also a whole slew of hotkeys for jumping to the model and controller files. You can get all of the details over at the developer website.
HTML, CSS, and PHP
Nxhtml is an Emacs mode for web development that allows you to easily work with markup, stylesheets, and web langauges. It has code completion and syntax highlighting, and can automatically handle indenting code, even if it is embedded in a different language (such as PHP in an HTML file). There’s the ability to upload files, make a backup, and handle links, plus much, much more. There’s a lot to this mode, so I would start with the tutorials.
I’m definitely new to Emacs, but I hope this was a helpful introduction. Please, if you have any helpful Emacs commands for coding for the web, leave them in the comments. And, as always, be sure to subscribe to the RSS feed and vote for this post on Reddit if you find it helpful.
