Using the HTML5 ContentEditable Attribute

I've been trying to utilize HTML5 more recently in a few smaller projects and came across a really cool new attribute: ContentEditable. You can add this attribute to any HTML element and it automatically makes that (and any element within it) editable.

Live Example

Everything in this paragraph is editable in any modern browser that supports HTML5. You should see a grey outline when you mouseover it, indicating that it is editable. One very cool aspect of this is that it retains the CSS styling from the parent document, so the edited elements will still look correct.

• Feel free to edit this list element.
• Or add more by simply pressing enter after the last list item – no HTML needed!

Chris Coyier of CSS-Tricks.com pointed out that you can also let users edit CSS styles and have them update in real-time using the ContentEditable attribute. Try it out by editing the background color of the above list:

Adding the MouseOver Outline

To create the outline effect on mouseover, I had to add the following line to my CSS stylesheet:

1 2 3

[contenteditable]:hover { outline: 1px dotted #ccc; }

Obviously this can be styled to your liking and since it's just using standard CSS, it's possible to do some really creative things with this (I'll leave that to your imagination). As for using the ContentEditable attribute itself, it really is as simple as appending it to any tag like so:

1 2 3

<div id="make-me-editable" contenteditable> Any text in this DIV will be editable. </div>

Final Thoughts

This attribute really opens a lot of doors when paired with HTML5's LocalStorage capabilities. There's also the Aloha Editor, a pure HTML5 WYSIWYG editor that utilizes the ContentEditable attribute and generates a nifty real-time editor.

I'm really looking forward to the day that the majority of internet users have HTML5 capable browsers so that I can more freely use these cool new features! (hopefully soon, fingers crossed)

Read more ...

15 More Awesome New WordPress Plugins, January Edition

More than 800 new plugins have been added to the WordPress Plugin Directory since my November coverage, showcasing the best of these new WordPress plugins. This month, we take a look at 15 more plugins that add some pretty cool functionality to your blog!

---

oQey Gallery by oQeySites.com

oQey Gallery is a Plugin for WordPress that let users create and manage flash slideshows with a non-flash version of gallery built-in for all non-flash browsers and mobile devices like iPhone / iPad / iPod etc. The flash version supports music and skins, so users can change the way it looks with a few simple clicks. Customizable, commercial skins are also available as well as custom galleries for professionals. This plugin uses built-in WP functions and a simple batch upload system. Multiple galleries are supported.

---

Fullscreen HTML Editor by jbleuzen

This plugin adds a button to the default WordPress editor entitled "Fullscreen." Like the name suggests, clicking on this button maximizes the editing screen so you can completely focus on your writing.

---

Specific CSS/JS for Posts and Pages by techtastico

Specific CSS/JS for Posts and Pages is a plugin that allows you to add custom CSS or Javascript files or embeded code in header to individual posts or pages. This is great for blogs that want to have a custom look/feel for each post, like that of Jason Santa Maria or Dustin Curtis.

---

Comment Location Tracker by jason.grim

This plugin can be useful but is also somewhat creepy - it lets you track which city and state your commentors are from by tracing their IP address.

---

WordPress Donation Plugin with Goals and Paypal IPN by NonprofitCMS.org

The NonprofitCMS.org WordPress Donate Plugin allows you to create unlimited donation campaigns with goals, capture donor information and gives a donation progress for each campaign! The plugin integrates with PayPal IPN and updates a progress meter in real time. Donors that choose not to be anonymous can be seen in a table.

---

Simple Local Avatars by jakemgold

Adds an avatar upload field to user profiles if the current user has media permissions. Generates requested sizes on demand just like Gravatar! Simple and lightweight.

---

Comments Capcha Box by digitalzoomstudio

This plugin creates a capcha box before your submit button in the comments section to prevent all that unwanted spam. It comes with a mini-admin panel and love.

---

Search Engines by Luis Alberto Ochoa

This is YASEOP - Yet Another Search Engine Optimization Plugin! Search Engines is a smart plugin that helps you to optimize the blog for SEO purposes by eliminating issues with duplicate content and specifying meta tags and page titles for different posts types and taxonomies.

---

Facebook Fanbox (with CSS Support) by ppfeufer

Adds a likebox for your Facebook fanpage to your wordpress-sidebar. Use your own CSS to style the box to your needs (fully customisable via css). Just add the ID of your Facebook fanpage and you are ready to go.

---

Timeline Calendar by omidkorat

A plugin for make your own timeline calendar. With this plugin, you can add your own events and show them via widget or special php code in your template. This plugin displays your events in specified dates (that you already set). For instant if your birthday is February 3, in Feb 3 your birthday message will be display. In addition you can display yesterday and tomorrow events too.

---

Related Posts Slider by Compact News Previewer

Related posts slider creates a very attractive slider of the related posts or/and pages for a WordPress post or page. The slider is a lightweight jQuery implementation of the related post functionality. It has a ready shortcode and widget as well to insert the slider.

---

Max Foundry Landing Pages by maxfoundry

Quickly create great-looking landing pages using a built-in template that is highly customizable. The template gives you complete control over a number of configurable options, and is a big timesaver for creating different versions of landing pages to use for A/B testing.

---

Facebook Fan Box Cache by dilbert4life, electriceasel

A plugin to cache the Facebook Fan Box. As the author says, "this plugin was written to take care of a serious issue. We were getting horrible load times on any page that contained the Facebook Fan Box iframe code. Especially during the evenings when everyone else in the world AND their mother was on Facebook playing Farmville and asking ME to join them. I wanted nothing of it, and I didn't want my website to suffer the consequences. So after some research, I wrote up this plugin."

---

WordPress Plus Points by andrew.alba

This is an interesting plug-in that allows you to log your meals and let you know how many Plus Points you use in relationship to your targeted daily plus points. It's useful for personal (more private) blogs that are mainly for self-help purposes.

---

Graceless Degradation by drench

Graceless Degradation checks to see if the current browser is MSIE 6. If it's not, it does nothing. If it is, it injects CSS and JavaScript into the page that:

• Puts Comic Sans fonts everywhere!
• Makes emphasis tags (bold, italic, strong, and underline) blink! Even though IE doesn't support the tag!
• Turns tags into animated rainbows!
• Finds "mailto:" links and tacks on animated mailbox graphics!

Read more ...

Freebie: Modern UI Pack Photoshop PSD

I've been running across several new UI PSD kits that cover a wide range of elements, everything from buttons to media players. I wanted to take a shot at making my own with a few simple elements - feel free to use the following UI elements in any project you'd like

Download Preview

Even if you don't end up using the elements themselves, consider taking a look at the blending effects to see how they were achieved. I'll be using this kit and others like it to help create Photoshop mockups for clients more quickly, it saves time not having to remake elements over and over again (obvious I know, not sure why I didn't consider it earlier).

Read more ...

Web Development on Windows 7: Essential Applications

As I mentioned in my last post, I've been asked for specific information on how I work. Having a solid work environment can go a long way in increasing your efficiency and help you stay organized, so today we'll take a look at the setup of my desktop computer.

The majority of my web design and development work is done on a 64-bit Windows 7 desktop. For more serious programming projects (pretty much any language other than PHP, HTML or CSS), I do switch over to Ubuntu in VMware Workstation, but nearly all of my web design client work is done in Windows. From my experience so far, Windows 7 has been absolutely stellar for web development - it's easy to use, fast and just plain works.

Using the Right Software

The key to working in any OS is using the right tools to make your work process as painless and efficient as possible. Thankfully for Windows users, there are plenty of great tools available for web design and development.

Notepad++

This is probably the best text editor available on Windows and best of all, it's completely open source. Notepad++ supports custom styles, recognizes a multitude of different programming languages and supports third-party plugins. For my setup, I use a slightly modified Ruby Blue style/theme and the following plugins:

• Explorer - Adds a file browser in a pane to the left or right of your editing screen, giving you quick access to your project files
• Zen-Coding (Python-based) - If you don't know what Zen Coding is, just watch the video. It will change the way you write web pages!

There are a few more installed but these are the two I really can't live without. I'm still new to Zen Coding but so far it's been an incredible experience, I highly recommend it!

Adobe Photoshop and Illustrator CS5

These are two tools that are an absolute necessity for serious designers and web devs. I use Photoshop for rough mockups and full compositions before translating them into HTML/CSS in Notepad++. Illustrator is a vector-based drawing tool that is critical for logo design, as you typically want to create something that is scalable without a loss in quality.

For Photoshop CS5, I use the Essentials workspace setting with a few customizations, including having the info panel show by default (very useful for sizing elements). Unlike other developers, I prefer making my mockups to nearly exact scale. It takes a bit longer to do but I like having an accurate depiction of my design and element placement before coding it out. My rulers are (of course) set to pixels and my default document size is 1280px by 840px, which happens to fit perfectly in my 1680px by 1050px desktop resolution (no scrolling required even with side panels displayed).

PuTTY + Pageant

PuTTY is an open source SSH program that just works. It's dead simple to use and allows you to save profiles to easily connect to your frequently used servers. Pageant comes with the default PuTTY installation and allows you to load/use SSH public or private keys (required for using Git).

TortoiseGit

Git is a version control system made famous by Github, which provides hosting and a plethora of other goodies for your Git projects. I use Git for all of my bigger projects as it makes a) provides an additional level of data security/redundancy and b) makes deploying new code pretty painless (at least for smaller PHP projects).

WinSCP

WinSCP is an open source SFTP, FTP and SCP client for Windows. It's free, secure and easy to use - what more could you ask from an FTP client?

Firefox, Chrome, IE8, Safari and Opera

These are all of the browsers I use on nearly every client project. I use Chrome as my primary browser and debug my HTML/CSS using the WebKit Web Inspector (inspect element) it comes with. I'll also debug in Firefox using Firebug from time to time, however most layouts that work in Chrome will also work in Firefox. As the project progresses, I'll check the layout in IE8, Safari and Opera from time to time to make sure the majority of users will have a similar experience. I try to avoid IE7 and below if at all possible, though I will break them out if the client's market demands it.

Dexpot

One thing Ubuntu and OSX have that I sorely miss in Windows is the ability to have multiple desktops. Thankfully, there are third-party applications like Dexpot to help rectify this - use this free software to add multiple desktops and an Exposé-like feature to Windows.

XAMPP Lite

XAMPP Lite is a quick and easy way to get Apache and MySQL (with PHPMyAdmin) running on Windows. This is a critical tool to develop and test web applications locally, as it makes the setup and installation of the most common web environment nearly effortless.

Rainmeter, Desktop Gadgets and Sticky Notes

The last few applications are not critical but do help with organization and maintaining your system:

• Rainmeter - Provides incredible skinning options and widgets to your Windows desktop (check out the skins)
• Windows Desktop Gadgets - More widgets for your desktop (I only use two, one for weather and a CPU monitor)
• Sticky Notes - Included in Windows 7 (under Accessories), this is a great application for writing down quick notes and tasks that sits on the desktop

Conclusion

That wraps up the list of essential applications I use on a daily basis on my Windows 7 desktop. For more programming-heavy projects using RoR or Django, or based on NGINX or Lighttpd web environments, I prefer using the latest stable Ubuntu in VMware Workstation. Prior to selling my laptop, I used a 15" Macbook Pro for travel and for iOS development (and I'm planning on purchasing another one in January).

What is your ideal web development environment? Do you have any other applications you recommend?

Read more ...

J.KLIMT PORTFOLIO FREE CSS TEMPLATE

Read more ...

Catch Kathmandu

Catch Kathmandu

Catch Themes has come up with a full-fledged Corporate/Blog premium WordPress theme, Catch Kathmandu! The design is highly customizable and you can tailor the display to your taste with a few easy clicks. Based on HTML5 and CSS3, it is a responsive theme which automatically adapts to the screen's size, regardless of the devices the visitors use. It has a large screen layout which elegantly extends to 1280 pixels! If you are looking for a clean professional space which accommodates your visuals and yet provides you with ample amount of textual area, Catch Kathmandu is your perfect find. Active community at http://catchthemes.com/support-forum/

Preview  :  Download

Read more ...

Alexandria

HTML5 & CSS3 Responsive WordPress Business theme with business style home page layout with welcome section, 3 product/services blocks and a client quote/testimonial section. 2 logo section layout options. 2 premade (Blue, Red) ready to use color schemes/skins. 3 widget areas in footer, 1 widget area in sidebar. 2 page layouts including a full width page template. Social media icons in footer.

Preview  :  Download

Read more ...

25 Responsive HTML5 Magazine Website Templates

Limelight Free Responsive HTML 5 Magazine Website Template

Limelight Download gallery is inspired by Freebies xpress  Limelight gallery Template which can be used to start a design resource depot website where design resources like icons, PSD’s, Fonts and More can be provided for free download or sales. Its Responsive web template and Mobile template download the package design will support all the devices. You can use this template for different needs like corporate website, Photo Gallery, Blogs and more.
Demo|Source

Free Minima HTML 5 Magazine Website Template

Minima is for Design Agencies or Studios it’s Responsive and mobile web Template which is inspired by Freebiesxpress’s Minima – Free PSD Template. Minima is clean, simple, and multipurpose free Responsive web template and Mobile web template suitable for freelancers, design agencies and Design studios looking to showcase their work.
Demo|Source

Deadstocker – Free Fashion HTML 5 Template

Fashion blogs and e-commerce websites change their look and feel almost every year. The last HTML5 template we developed for the community was greatly appreciated. Hence, we decided that from no on, what ever template we develop for the community, is going to use the latest HTML5 technologies. This template is no exception either. It contains semantic HTML5 tags to give that SEO edge, contains HTML5 auto validations for form fields and other HTML5 goodies.
Demo|Source

Agro farm – Free Agriculture HTML 5 Magazine Website Template

The Agro farm a agriculture Mobile web template can be used to start a website for agro farms, agro product makers, agriculture related products, agro vehicles are else. we are using jquery slider for web and Mobile Templates. This template supports all browsers, Mobile phones.
Provided three different designs for different browsers if you are planning for only mobile site for smartphones like iphone, android and others use smartphone template.
Demo|Source
Here starts the premium HTML 5 Website Templates which are responsive as well.

Moose – Multipurpose Responsive HTML5 Template

Moose is a flat, responsive, HTML5 site template built with Twitter Bootstrap 3 with countless page options, great for business owners, artists, photographers, creative agencies, digital studios, personal freelancers. Since it is responsive, the layout will adapt to different screen sizes which will make your website be compatible with any device device such as smart phones, tablets or desktop computers. 3 premium scripts are included with the total value of $35, which you will get for free with this template.
Demo|Source

Official – Magazine HTML 5 Website Template

Official is a Multipurpose HTML5 Website Template with +120 html templates, Multipurpose and modern, fullwide and boxed version. Dark and Light With 12 Custom colors and you can change all colors. Well Documented. fully responsive with modern and pretty dropdown swipe tuoch menu navigation for small screen devices.
Demo|Source

Magazine – Responsive Multipurpose HTML Template

Magazine is a multipurpose (magazine, newspaper, blog) HTML template which has nice clean and fully responsive feature. You can use it as a ready to use HTML template or you can develop it for your own CMS preference.
Demo|Source

Original Magazine HTML Template

Original HTML is a magazine/news template, optimized for touch screen and small screen. You can create any CMS tempate with Original HTML template.
Demo|Source

Enterprise – Responsive Magazine, News, Blog

Enterprise is a Clean Responsive News, Magazine and Blog Theme. With a responsive design it is easily usable with any mobile device like tablet or mobile phone, without removing any content! Great for news and blog sites, with integrated video and galleries in each news post, media post and blog post.
Demo|Source

Marble – Flat Responsive HTML5 Template

Marble is a flat, responsive, HTML5 site template built with Twitter Bootstrap with unique portfolio. It includes 6 different homepage layouts and 2 blogs. Marble will be useful for artists, photographers, creative agencies, digital studios, personal freelancers, and any kind of business owners that would like to showcase their portfolio beautifully.
Demo|Source

Allegro – Multipurpose News, Magazine HTML

Unique homepage layout with magazine style template.
Demo|Source

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 it’s 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.
Demo|Source

Webpaint – 2 in 1 Responsive HTML5 Template

2 in 1 (Multipage and Onepage) Responsive HTML5 Template with boxed and fullwidth layout options. Webpaint’s clean and professional design will be a great solution for your business, portfolio, personal blog or any other purpose website. Webpaint was built to be responsive so that it will be compatible on any device such as smart phone, tablet or desktop. 5 premium scripts are included with the total value of$70, which you will get for free with this template.
Demo|Source

Newstick Responsive News & Magazine Template

Newstick is a responsive site template that has clean and elegant design for blog template. This site template completed with 6 colors variant(blue, green, lightblue, orange, purple, yellow) that you can choose your own.
Demo|Source

iMagPress – Flat Magazine HTML Theme

iMagPress is a unique magazine template with flat and metro elements. Perfect for news for all sorts of content. Contains blog posts with integrated ratings, videos and slideshow.
Demo|Source

Next Magazine – HTML Responsive Magazine Template

Next Magazine is a feature-rich and fully responsive magazine/news HTML template, suitable for almost any niche.
Demo|Source

Banda – HTML5 Music Magazine

Music html template for music artist websites.
Demo|Source

News Time Magazine / Blog HTML Template

News Time created with love using the latest HTML5, CSS3 and Bootstrap Framework techniques with a validity code, completely responsive to look perfectly in all mobile devices, easily usable with any device as well as PCs. Responsive design optimized for tablets and smartphones .
Demo|Source

Zoombi Magazine HTML5 Template

Zoombi is a especial magazine HTML5 template and built on HTML5, CSS3, Jquery. Fully responsive, it fits any screen, form the largest desktop screens, over any tablet size, down to the smallest smartphones. It looks beautiful and is very exact on any device. Besides, it has multiple single page options including standard single page, single page with sidebar page, gallery, audio, video, soundcloud post and a lot of elements.
Demo|Source

Viduze – Video Magazine HTML Template

Viduze is a premium responsive Video Magazine HTML template designed for video related sites but it can also be used to creatively showcase your portfolio. Theme is created by using Twitter Bootstrap, with a responsive design which makes it a perfect fit for all devices.
Demo|Source

PrimeTime | Clean Magazin & Blog HTML5 Template

PrimeTime is a Clean Responsive News, Magazine and Blog Theme. With a responsive design it is easily usable with any mobile device like tablet or mobile phone, without removing any content! Great for news and blog sites, with integrated video and galleries in each news post, media post and blog post. This template will perfectly suit for your news website or portal. We are confident that you will be more than pleased by your purchase!
Demo|Source

Reganto – Massive Magazine Template

A responsive magazine template for HTML based websites.
Demo|Source

Kyte – Flat Onepage Responsive HTML5 Template

Kyte is a flat, responsive, HTML5 site template built with Twitter Bootstrap with unique portfolio. It can be used both as onepage and multipage. Kyte will be useful to artists, photographers, creative agencies, digital studios, personal freelancers, and any kind of business owners that would like to showcase their portfolio beautifully.
Demo|Source

Adams Magazine – Responsive Magazine/Blog Theme

This is an HTML Responsive Magazine, News and Blog Theme, it’s built with an HTML5, RichSnippet, CSS3, FontAwesome Vector Fonts and Twitter Bootstrap v2.3.1.
Demo|Source

FastNews – HTML5 Magazine Template

FastNews is an elegant and clean magazine website template which has really great look and is perfect for newspaper/magazine websites to attrack readers visit and remember your website. FastNews has been built by using the latest HTML5/CSS3/jQuery techniques and fully responsive, it looks great on all devices, any screen size, including desktops, laptops, tablets and phones.
Demo|Source

Read more ...