It just seems to me that Apple rushed to get this version out. You can actually feel the different teams working on different sections of the phone. They have different styles when designing icons, use different stroke widths. Some use textures, rounded corners, and others just go super simple. If you don’t know what I’m talking about, just go to www.apple.com/ios/ios7 and peruse the various interactive images. Hopefully you can see my point and final verdict on iOS 7: INCONSISTENT.

if ( $(div.status).html() == 'OK' ) {  $(div).css('background-color','green') }
if ( $(div.status).html() == 'Error' ) {  $(div).css('background-color','red') }

And it works fine, but there is a much simpler solution: the jQuery contains. Basically it is a selector that can evaluate the HTML contents of an element. So now the code is simply:

$('div.status:contains("OK")').css('background-color','green');
$('div.status:contains("Error")').css('background-color','red');

Easier to read and write. Overall this is an oversight on my part on the powerful features of jQuery selectors. Note to self: browse the API more often… PS. Note that I added a class of status to the divs. This is important because the :contains selector is so powerful it will check for all child elements’ contents! So be very specific on what you want check and apply changes to.

Full Code:

<script type="text/javascript">
$('document').ready(function(){ 
$('div.status:contains("OK")').css('background-color','green');
$('div.status:contains("Error")').css('background-color','red');
});
</script>
<div class="status">OK</div> <div class="status">Error</div>

Result:

Art – Weekly entry is a new series of posts where I try and make a simple art illustration. The objects are completely random, mostly symbols I find interesting. Also available is the master .ai if anyone finds them useful, feel free to…

Download

crown.ai 363kb

Check out the demo

strt.antonps.com

PS. Anyone interested in turning this project into a business?

Here is the development plan:

Strt Demo v0.1 – 29 April 2012 (done)
Preview only – no customizable options

Strt Demo v0.2 – 7 May 2012 (expected)
To do:
- Feedback form
- Background changer
- Collapsing sections
- Add widget mock-up

A child theme has been a vital checkpoint in my production process. With comments, it is much easier for me to find code for future updates. Installation is also a breeze, since Twenty Eleven is the default theme in modern WordPress installations. Of course,  I have made a few adjustments that I find a common requests from clients but are lacking in Twenty Eleven. I will just list them off the top of my head:

WP4U v1.1 ‘Christa’

Main Features:

• Child theme for Twenty Eleven with all the necessary files such as: header.php, footer.php, function.php, and of course, style.css.
• Remove featured header on home page. (Uses showcase template and sticky posts for main slideshow)
• Added sidebar in post as a default setting.
• Default fonts replaced with Open Sans, Bitter & Oswald fonts from Google webfonts.

Additional Features

• Removing unwanted elements no-destructively by display: none;
• Structured and commented code for easy edits (for example, adding backgrounds)
• Dynamic copyright info and pages list on footer.
• Responsive tweaks optimized for iPhone
• Various other small visual and technical adjustments…

Download
Demo

There’s nothing inherently wrong with what I am doing. It works. HTML5 just found a way to do it better and more efficient. Here’s my take on explaining the benefits of semantic web:

1. Less Code

Let’s compare these two lines of code: <div id=”header”></div> and <header></header>. Simple math can tell us that less characters equals more efficiency. But it doesn’t stop there, which brings us to point two.

2. Code Legibility

Semantic web is about making machines understand our code. But it also helps us coders understand our structure better too. Currently the style that many adopt is to comment on closing divs. Like so: <div><!– end #header –>.  It works. But so does this: </header>. And again, it’s more concise.

3. Setting a Standard

And finally, to the final and main purpose, making code more readable to machines. Of course that means setting a standard that developers must agree upon. Instead of randomly assigning div IDs, there are preset elements that are assigned by the W3C. A good and fun way to explore them all is by looking at them as Periodic Table of Elements.

The benefits of semantic web are predictable. One standard to rule them all is efficient in a mechanical sense, but where does it put us as designers and developers? It’s not that easy to conform to a new standard, with all the different variables we face in the field. Only modern browsers support the new elements and like most of HTML5′s new features, their rendering is hit or miss.

the era of the div, like tables before it, is coming to end

Maybe as HTML5 becomes the standard in the coming years, the semantic web will be the obvious choice. But for now, it’s quite safe to just scout the advancements in technology. All we know for sure is, the era of the div, like tables before it, is coming to end.

PS. I myself have created a simple project page involving the HTML5 boilerplate and applying the semantic web to it. At the moment, I’m still experimenting and having fun with it. I will reveal it and any findings on future posts. Stay tuned and keep an eye out for HTML5!

Original Metro on Windows 8

Live demo: http://antonps.com/metro

I think Metro is a solid design language with true modernist roots and bold visuals. I grabbed resources from Microsoft, here and here as a basic foundation. They provided the HEX for the color schemes, along with other visual guidelines. But for my personal taste (and limitations) a made a few adjustments.

1. Fonts

I’m actually a fan of Segoe UI, the original Metro font. I think it is the best out the Windows 7 generation fonts. But for screen real estate, I have grown to look for condensed fonts. One of my recent crush is ‘Oswald’. Its glyphs are far from perfect, but when they come together to form a word, those impurities help to make it look natural. For the body text, I chose to use my loyal companion and long-time obsession: ‘Open Sans’.

2. Effects

Metro is very minimalist and functional in its visual. But there are slight effects that I want to duplicate, especially on the tile borders. What I did was create a class called emboss and simply added a slight drop shadow and translucent white border. Here is the code, stacking box-shadow:

.emboss { box-shadow: 0 0 10px rgba(0,0,0,0.2), inset 0 0 0 1px rgba(255,255,255,0.2);}

I tried to be very subtle with the effects but they are still quite visible. I also added a 1px drop shadow on the text and added it manually in Photoshop for the icons. What I did not add was the background gradients. The cross-browser code is just bulky, and for mock-up purposes I decided to abandon it for now.

3. Animation

The original Metro UI is very dynamic. Each tile may do it’s own slideshow of contents, the tiles flip when you press them, etc. I can’t do all that just yet. I have just started learning jQuery and all I managed to do was the sliding of pages and the AJAX call of content. For the sliding of images on the tiles, it’s just basic CSS :hover for now…

So that’s pretty much my take on Metro. I still have much to improve, if this project takes flight I might do an update. But so far, I hope it is an inspiration for you to do your own adjustments on a design language. With that, I will simply close with this quote:

“Good Artists Copy, Great Artists Steal”

- Steve Jobs, 1996

Strengths :)

1. Open Source

Sure, it’s free. And that’s great! But it’s even better than that, open-source is a potential runaway success with a large community. And WordPress is huge. They boast over 60 million users and an active community with developer forums, events like Wordcamp, international meetups, etc, etc. But most importantly, the platform itself is frequently updated and is always on the cutting edge of web technologies.

The WordPress Bible

2. Well Documented

There’s plenty of great open-source communities out there, but not all of them have the Codex. It’s one of the best manuals I’ve seen for anything. PHP is not an easy subject but most of the information in the Codex is complete, easy to understand, and explained with many useful examples. And if the Codex doesn’t have what you need, just google your WordPress problem and most likely, there is an answer nearby.

3. Plugins

Ah, the WordPress plugins. They range from simple widgets to full site-wide changes. Plugins are like modules, easy to install, somewhat easy to setup, but best of all there are plenty to choose from. Some are vital to the site such as plugins for e-Commerce and WPML for multi-language sites. Most are simple but useful for site maintenance. I’ll have to make a list someday!

4. User Friendly

This is the one I sell to clients. With WordPress, they can update their content in comfort. Login, add new post, insert content. That’s pretty much most need and WordPress makes it so easy. Advanced users get alot of extra features, and if something breaks, technical support is a breeze. Even if you have hundreds of clients, it’s one platform, one troubleshooting process.

Weaknesses :(

Just because they can.

1. Security

Unfortunately, most of WordPress’ strengths is  also its weakness. Because it is used by millions, there are a lot of exploits that are targeted specifically at WordPress installations. Also, some servers don’t work out of the box with WordPress, forcing users to alter permissions or htaccess, which can leave gaping holes such as the infamous ’777′. The good news is that you can patch any and all security holes with some work. But most of us, myself included, are not meticulous security experts and dread the day a client calls and asks why his website is displaying a Turkish flag over “The Matrix” intro.

2. Spam

This is technically the same as number 1: security. But it’s such a big problem that it deserves it’s own spotlight. If you don’t have some kind of spam protection installed on WordPress, you WILL be spammed. The numbers vary from dozens to hundreds of thousands. I’ve been hit with a few hundred, where they all queue in the pending comments section and I deleted them all with a plugin.  Although, I know some sites that have crippled their server’s bandwidth from spambots trying to access the site. Solutions? Akismet should be adequate, or try some other spam plugins and if all else fails, close comments and use Disqus or Facebook Comments!

3. Stigma

Like I said at the introduction, WordPress has the belittling reputation as a blogging platform. Maybe it’s just where I am (Indonesia) that this becomes a problem. Basically, developing with a blogging platform is comparable to creating a Blogger site at blogspot. Developing with WordPress is scoffed at by programmers as child’s play and clients alike are similarly influenced. But in all truth, it really comes down to preference and habits. I have come to understand that the truth is just that programmers are more comfortable editing their own code, and the rest just needs a bit of convincing.

4. Small Scope

Most will say that WordPress is excellent for blogs and decent for small business sites. For large databases, performance is said to slow down considerably, even to the point of breaking completely. Now, I’ve never used WordPress for anything huge so I’ve never seen it happen first hand, but I have a feeling it’s true. It might be a technical limitation, I’m not sure. But I do believe that if your making a website that is a core business vehicle, build it from scratch. Invest in a long term propriety for more control, more security. Also, for a specialized sites, try and look at other alternatives for frameworks that suit your specific purpose. For example, Magento for online shopping, phpBB for forums, etc.

Conclusion

So, the strengths and weaknesses pretty much balances out. To me, it comes down to personal preference and what you’re used to. I’m very comfortable with WordPress and I get around the platform pretty fast. But I know some programmers who would just blaze through CodeIgniter much faster. In the end, whatever you chose, what matters is what you do with it. Learn its features and limitations, get used to it, build a relationship with the platform… to the point of writing a thousand word blog post about it.

I have only been developing websites for a measly 6 months, compared to 6 years of graphic design. As a designer, I prided myself for being visual, expressive, and free. But a strange thing happened recently. As I was learning HTML and CSS, the structure and rules of code actually appealed to my sense of design. By being limited, I am more inclined to explore how to break free. By having rules, it is then more fulfilling to achieve something. Here’s an example:

A Button

Creating that button in Photoshop would be as simple as one ‘bevel and emboss’ filter. But with CSS, you would need to formulate lines of code to get the same result. So why do I bother? As a designer, why not use an image?

The answer is not of function, its of achievement. I feel pure glee when I ‘draw’ with pure CSS. Of course, there are certain qualities of CSS that is superior to using images. I would like to elaborate on that by using my homepage design as an example:

Once I had the idea, it took me around one hour to draw this mockup with Photoshop. As a designer, I would have just sliced it up and assembled a working page in the next hour. It would look exactly like my mockup. But, as a developer I know there are three features other than aesthetics that a good website needs to have:

1. Lightweight
2. Responsive
3. Interactive

Each one is not an easy feat, especially for a new developer like me. A quick rundown of how each one went:

Lightweight

One of the first thing I noticed about my design is the need for the left and right background, the matrix of codes and the rainbow, to expand all the way to the edges of the browser, however wide it may be. Creating patterns is a small hobby of mine and suits the purpose well. Repeating the pattern has made it more lightweight. Unfortunately, most of the images stayed as images (even some of the text!) but I did create the PORTFOLIO and WEBLOG button with pure CSS. Time taken for this step: ± 2 hours.

Responsive

This is where it gets frustrating. Responsive is a big issue because it has the potential to make your site accessible across all devices with different screen sizes. But pulling it off requires hard work and attention to detail. That’s why I’ve chosen to base my blog on the Aware theme, an excellent portfolio theme that responses really well. The homepage design however, needed to by built from scratch. I started by simply dividing the page into two divs with 50% width. And then I put the brain and icons in the corresponding halves and position them. At first, I tried to make them all have percentage widths. But I soon found out that 1% makes a big difference in pixels between a mobile phone (320px) and HD screen (1920px). Never use % or ems on a fine tuned design. It just broke all over the place and I ended up using media queries to remove big elements on small screens. Time taken for this step: ± 3 hours.

Interactive

I was quite pleased with the result at this point, but I knew it lacked a ‘wow’ factor. I wanted people to be impressed, so I designed a few surprises. I decided to make the brain open up and reveal the icons inside it. The first problem was stacking three divs on top of each other. After trial and error, the best solution was to use position:absolute and left/right:50%. Now, I have never done CSS3 animations before so I started small: with transitions. I started to play with widths but soon realised that I needed to alter to origin of transform. And so it was my first encounter with CSS transforms. After a long time experimenting, I ended up using a lot of new techniques. One of them is the adjacent sibling selector, to animate multiple elements on one hover. I’m not sure it’s the best solution or if I did it right, because the code looks atrocious (this is the selector: #leftbrain:hover + #leftskills + #leftinside + #codeinfo) and is buggy as hell. Time taken for this step: Lost track of time…

So to wrap it up, what started as an innocent personal website project turned into monster of a task. As designer, I would’ve finished it much faster but in the end, I learned so much more as a developer. The result is what I would call balance: some text are images, some images are text. By the end of the day, I’ve made new commitments between design and development and now, my brain is complete!