Yayoi's Blog

Pixel-Perfect graphics in Illustrator

yayoiakitabrunet — Mon, 03 May 2010 00:23:08 +0000

I was creating some icons in Illustrator yesterday. But when I exported the icons as the png files, the resulting graphics were very blurry. I was very disappointed! Doesn’t vector graphics supposed to export crisp without losing the quality?

Then I found the answer today. The fact is that Illustrator’s object does not always align with the pixel boundary. If the object outline falls between the pixel boundary, it makes anti-aliasing artifacts, making the outline blurry.

Good answer but it did not really solve my problem. Luckily, Illustrator CS5 will come with the features - “pixel grid” & “align to pixel grid” to solve my problem. For sure I will be using these options as soon as I get CS5. See the Adobe’s post here.

For today’s problem without CS5, I found an excellent post on how to align the Illustrator object to pixel grid here.

In summary here’s what you need to do:

1) Edit > Preferences > Guides & Grid

2) Set grid every 128px with 128 subdivisions to create a pixel grid.

3) View > Snap to grid

4) For object’s stroke, choose “Align stroke to outside” or “Align stroke to inside” from the Stroke options window. (By default, the stroke is created from the center which makes the stroke to straddle between pixels.)

That’s it.

http://addicted2webdesign.com/2010/04/creating-pixel-perfect-web-graphics-in-illustrator-cs5-new-features-from-lynda-com/

jQuery assisted javascript form validation: Make post validation action to disappear in a split second.

yayoiakitabrunet — Tue, 30 Mar 2010 18:04:39 +0000

I came across this accidentally while writing a jQuery assisted javascript form validation but found it interesting so I decided to take a note of it. BTW, this has no real life use, so if you are reading this because you want to know more about the javascript form validation, you may leave now.

I put a form validation code and the error case actions in jQuery assisted javascript code.
But my post validation action (highlight error field, print the error message), appeared only for a second and then it disappeared.

Why?

Look at below code.

When you click on “Signup”, submit validation function will run.
It finds you didn’t fill any of the input fields and add “error” class and set the error message to p#formstatus element. So far so good.

When the end of submit function is reached, if the function does not return any value or return true, then form action will be carried on next. Be default, if action=” (empty action), the html page will be reloaded, meaning fresh new page will be loaded, erasing “error” class and error message added by the submit validation function.

You will find the red border around input text and red error message appear on a split second then they disappear. Neet but not the result you are looking for.

So the bottom line is, if you are testing the form validation javascript function, remember to return FALSE, which will stop subsequent form action.



 
 
 Get Our Newsletter.
 
 Weekly newsletters.
 
 
 
 First Name
 
 
 
 Email  Address
 
 
 
 
 
 
 Your Message  Here.

CSS code completion for eclipse

yayoiakitabrunet — Thu, 04 Feb 2010 04:26:59 +0000

Today, I installed Aptana plugin for eclipse. This adds CSS code completion which eclipse PDT does not supply.

Here’s the installation procedure I used from the Aptana’s documentation site.

https://aptanastudio.tenderapp.com/faqs/installing-aptana-studio/eclipse-plugin

http://docs.aptana.com/docs/index.php/Main_Page

Aptana Studio 1.5 on Eclipse 3.5 Instructions (Recommend)

1. Go to Help -> Install New Software…
2. In the “Work with:” text box, enter: http://update.aptana.com/install/studio
3. Click Add…
4. Specify the Name of the Update site (i.e. Aptana Studio Plugin)
5. Click OK
6. Select the “Aptana Studio” checkbox
7. Click the Next Button
8. Confirm the items you are installing
9. Click the Next Button once more
10. Accept the terms and conditions
11. Click the Finish Button

After the plugin in installed, then file association for CSS and HTML files must be set.

1) Window>Preferences>General>Editors>File Associations
select *.css
On the bottom pane, select Aptana CSS Editor and click Default button to make it a default editor.

Repeat for the *.htm and *.html file
select *.html
On the bottom pane, select Aptana HTML Editor and click Default button to make it a default editor.

2) If there are open CSS or HTML files in eclipse, close them and reopen.

That’s it. CSS completion is working great!

Dreamweaver CS4 does not start…

yayoiakitabrunet — Sat, 23 Jan 2010 06:22:46 +0000

When I launched the Dreamweaver CS4 today, it went blank (showing a very comforting message “Not Responding” across the top bar). OMG. The last thing I remembered doing was moving some files around from outside of Dreamweaver. That must’ve made inconsistency between the site cache files and actual state of the files in the file system. Dreamweaver (by default) tries to open up the last used site upon startup, if those files are not in the right place, it hangs.

Here’s what I did to fix things up.

1) Rename SiteCache directory to “SiteCacheTmp”

In Vista, it is located in

C:\Users\\AppData\Roaming\Adobe\Dreamweaver CS4\en_US\Configuration\SiteCache

2) Rename the Cache file “WinFileCache-.dat” to “WinFileCache-.dat.tmp”

In Vista, it is located in

C:\Users\\AppData\Roaming\Adobe\Dreamweaver CS4\en_US\Configuration

3) Finally, rename the last used site directory to another name.

4) Upon starting up Dreamweaver, it asks where the location of the directory for the last used site, and it opens the siteManager. Delete the site definition of the site that caused the trouble.

Dreamweaver will then start.

Eclipse: install subversion plugin

yayoiakitabrunet — Wed, 20 Jan 2010 22:44:05 +0000

Installation procedure for the subversion for the Eclipse – Galileo.

Help->Install New Software
Select “Work with: Galileo – http://download.eclipse.org/releases/galileo”
Expand Collaboration
Select Subversive SVN Team Provider (Incubation). Click Next and Finish to install.
Next, install SVN Connector.
Help->Install New Software
Add a site http://community.polarion.com/projects/subversive/download/eclipse/2.0/galileo-site/
Expand Subversive SVN Connectors
Select SVNKit (1.3.0), and JavaHL (1.6.0) implementation. Hit Next and Finish to install.
Restart Eclipse
Verify SVN Connector configuration in Window->Preferences->Team->SVN->SVN Connector.

Flex – creating a new project

yayoiakitabrunet — Tue, 19 Jan 2010 18:31:43 +0000

File>New>Flex Project
In New Flex Project dialog box,
Fill in
Keep Default Location (a new directory with name will be created in workspace.)
AppType=Web Application | Desktop Application
Server Technology: None (for now)
Hit Next
output folder: bin-debug
Hit Finish
Project directory and the file .mxml will be created.

To compile/build the project:

Project>Clean — for a clean compile

Keep Project>BuildAutomatically option on for incremental build.

Flex & Eclipse: Install FlexBuilder Plugin for eclipse with Eclipse 3.5 Galileo

yayoiakitabrunet — Mon, 18 Jan 2010 16:16:10 +0000

Download flex plug-in from http://www.adobe.com/support/documentation/en/flex/3/releasenotes_flex3_fb.html#install_plugin_win
Run the installer.
When the install dialog asks to install Debug Flash Player 9, uncheck them. (Already has Debug Flash Player 10 in the system).
Ignore the warnings for “not correct version of eclipse”.
Ignore the warnings to suggest “manual installation of plugin”.
Once the install is finished, cd /links
open the following file in wordpad. “com.adobe.flexbuilder.feature.core.link”
Change the content from “C:\” to “path=C:\”
Save the file and start eclipse.