AsiaExpat Web Design/Development (WordPress)

After KLIF Media’s design, AsiaExpat requested a similar site rejecting a few that looks alike. This was the result. I’d say its like KLIF Media v1.5

Software: NetBeans, Photoshop
Languages/Frameworks: WordPress, PHP, MySQL, jQuery, jQuery UI, HTML5, CSS3

Investment uses Custom Post Types/Taxonomy but instead of WordPress default UI for taxonomies, I used a Meta Box to group all custom portfolio meta and taxonomies together. This way, I can use jQuery UI’s multi-value auto complete too.

Design wise, I was quite pleased with my Post Card like contact forms. The social media icons where done my me too. The services page looks great, but the 3D are work are not mine, they are gotten from GraphicRiver.

Live Site

KLIF Media Web Design & Development (WordPress)

One of my first projects at KLIF Media (klifmedia.com) was to redesign their site.

Software: Photohsop, Notepad++
Programming: WordPress, HTML5, CSS3, jQuery, jQuery UI

This was one of my first WordPress site (just learning WP for ~1 month then) that I think was more well done. It uses Custom Post Types/Taxonomies/Meta Boxes for Portfolio. For the Contact forms, its implemented using PHP/functions.php with admin pages for viewing form submissions stored in the database.

Design part, considering myself more of a developer, I was quite pleased with myself. Some highlights were the 4 artworks for the services section in the home page, the “paper-style” form and those squigly underline (in banner) & handdrawn arrows (mainnav)

MarkItUp Markdown Set

I found out about markItUp! Universal Markup Editor (jQuery Plugin) yesterday. It turned out to be a good alternative to WMD Markdown Editor, with more readable code and easy customization via callbacks

However, since its designed more as a universal markdown editor, some features are a little lacking (or not designed for a certain feature, but that can be fixed with custom callbacks) and I find it got some usability issues (eg. not everyone will know Ctrl+Shift Click will make changes to each line of selection). That said, it maybe just because I haven’t learnt all about it yet, its very customizable with callbacks, making it very powerful.

This is the modified the markdown set demo & download, based on Basic Markdown Set

Buttons/Keyboard Shortcuts

• Ctrl+B: Bold
• Ctrl+I: Italic
• Ctrl+U: Underline (non-standard markdown. Wraps selection with __, rendered as <span class="underline">...</span>)
• Ctrl+H: Highlight (non-standard markdown. Wraps selection with !, rendered as <mark>...</mark>)
• Ctrl+D: Delete/Strikethrough (non-standard markdown. Wraps selection with --. Rendered as <del>...</del>)
• Ctrl+1: H1
• Ctrl+2: H2
• Unordered List: Ctrl+Shift Click to add - to everyline of selection
• Ordered List: Same as Unordered List, except adds number bullets (eg. 1.)
• Ctrl+G: Image
• Ctrl+L: Link
• Ctrl+Q: Quote, Ctrl+Shift+Click to add > to each line of selection
• Ctrl+K: Code, Wraps selection with `, haven’t found a way to create code blocks, workaround is to use Tab instead
• Ctrl+P: Preview

Known Issues (Some just very minor)

• Usability: I would prefer users not require the use of custom modifier keys eg. Shift or Alt when marking up content. Many users will probably not learn of it at all unless they use/learn markItUp before.
• Code Blocks: Probably code blocks need to be created via callbacks, I preferring to use native options provided by markItUp first, before resorting to custom callbacks.
• Links/Images: Use footnotes instead. Inline link declarations, I find makes the content hard to read
• Lack of validation/awareness of context:
  • I can add links with empty/invalid URLs
  • Should automatically detect if selection contains newlines, instead of relying on modifiers like Shift
• I prefer the selection stays when using Tab. Solved: using Tab Override (jQuery Plugin) for tabs/indents
• Preview: I used custom callbacks for preview instead of relying on server-side scripts. It always appends the preview div to the parent .markItUpContainer without regard for the options like previewInNewWindow, previewPosition etc
• Only can Alt+Click, can’t use key combinations like Alt+K, AFAIK

Considerations

• Links/Images: should I allow users to set title, alt text, even key used in markdown? It can confuse the user tho. But things like title & alt text are important for SEO/CMS

25 Beautiful Image Styling Tutorials With CSS, jQuery

decodering:

You don’t have to always use Photoshop to style your images. Some cool effects can be achieved trough CSS, jQuery etc […]

Things With Pixels: Keep track of your character limits with WriteLimit

With Twitter being all the rage these days, you may find yourself wanting a visual indicator on text boxes so that users can keep track of how much they’re typing.

I’ve developed WriteLimit to do just that.

It’s a very simple jQuery plugin that does the following:

• Tracks character count…

20+ Demos Showing Advanced jQuery Effects

contains some very good jQuery plugins that make u really want to dump flash or just use it to greatly enhance your site!

some i really like

• QuickSand lets u easily filter/reorder items on your page
• Sliding boxes and captions - a very common effect to have captions/sliding boxes sliding into your images/content when hovered
• Bubble navigation - adds uniqueness to your navigation
• AviaSlider - think sliding banners
• interactive picture - adds interactivity to you images
• jqFancyTransitions - adds transitions to your images