Oncemade

Hey yo,

Here is a freebie PSD file for you. Download it here

It's been a year since I've moved to the Silicon Valley to work at Gogobot. It's been quite a journey, I've completely changed the focus of my career, from web to mobile design and development. I've also fell in love with photography, thanks to a persistent push from my friend, Everaldo. The Valley really feels like home, opposed to LA where I felt trapped in a big city.

I've met some pretty cool people and I've done far more networking here than in my 9 years living in LA. To all my new friends in the Valley, I want to say thank you for welcoming my wife and I with open arms. To all my friends in LA, I want to say get your ass up here =)

What a nice ride it's been so far, I hope it will keep getting better.

Cheers!

How many times have you taken a screenshot with your iPhone and emailed it to yourself? I do it all the time and I must say that it’s a pain in the butt to later delete all the unnecessary images from the phone’s gallery.

My co-worker, Oren, has shown me a pretty cool trick to take an iPhone screenshot and directly save it to the computer without saving it to the phone’s gallery.

First of all, you need to have Xcode installed on your machine. Also, make sure your iPhone is selected to be a development device. Now with the iPhone plugged in, go to Xcode –> Window –> Organizer. Under the Device section, select your phone on the left navbar and click on Screenshots.

Now navigate to the screen that you want to screenshot on you phone and press the New Screenshot Button at the lower right corner. Voila! The screenshot is now saved in your computer.

Slender is a fantastic app. It scans your Xcode project and prompts you with images that are no longer used in the project. It’s definitely worth the price tag. More info here.

I haven’t post in here for awhile. For the past year or so things have changed quite significantly in my life. I’ve moved from Los Angeles to the Sillicon Valley to join the gogobot.com team, I barely write any front-end code and for the past 10 months the only thing I’ve been working on is mobile design and development. With the mentality of “new life” in mind, I’ve decided to move my blog to a new home, posterous.com, and I’ll focusing mostly in mobile design and development.

Why posterous?

Well, I wanted to get way from self hosted blog platforms and I wanted something simple where I don’t have to worry about upgrades or maintenance. I’ve also looked into Tumblr but the biggest flaw, that I found, is importing content from Wordpress. Without much resitation, I’ve chose posterous just for that feature alone.

Not everything is smooth as I wished for, I’ve encountered two issues: one is how to display formated code samples and the other is how to show the demos. For formated code, posterous has a cool feature where if you drop a link of a Github’s Gist, it automagically shows the gist code. For the demos, I still haven’t decided on what to do them, I’m debating between serving the files from Amazon S3 or Dropbox’s public folder. If anyone has any idea, please comment bellow.

Where else can I be found?

• Portfolio – http://rodrigosoares.me

• Dribbble – http://dribbble.com/rodi01

• Github – https://github.com/rodi01

• Twitter – http://twitter.com/rodi01

• LinkedIn – http://www.linkedin.com/in/rodi01

• Flickr – http://www.flickr.com/photos/rodi01

You've probably noticed by now that webkit browsers have a handler to resize textareas. That said, you can control it with one line of CSS.

Disable resize

Vertical resize only

Horizontal resize only

Nowadays it's very common to find websites "hiding" form labels in favor of input's default text. Even tough it's a cleaver idea, there is a better way to accomplish the same result without compromising accessibility.

First step is to create the form. I usually have all my forms inside a list:

UPDATE: It's necessary to turn off the "autocomplete" so the inputs don't get messed up.

Markup

Don't forget the "for" attribute, the script will rely on it. Go ahead and add the following CSS:

CSS

Read more …

Here is how to create a very basic tooltip using only CSS. I've been using this technique all over my latest project.

Let's start by creating the following markup:

Markup

CSS

As I mentioned in a previous article, IE doesn't support RGBa. Adding the following styles, wrapped in a conditional comment, will make it work.

IE CSS

For more info about creating speech bubble using only CSS, go to DeSandro's tutorial on creating speech bubble.

I got tired of my colleague, *cough Buz, asking me for links and tools that I find and use while working, so I've decided to create posts where I list these things for future reference. Enough talk lets get to it.

Bookmarklet is a very important piece of my development. Lately, I've been using the following:

1. ReCSS

   Super B tool, used to reload your css without refreshing the whole page. It's very useful if you want to change a website in production that you can't run locally.

2. Firebug Lite

   

   If you develop websites in different browsers like I do (webkit nightly build), and can't live without Firebug; Firebug Lite is the way to go. It isn't as powerful as the Firebug add-on but it does a good job if you need to use the console or check for applied styles. Unfortunately, there is no way to change the css on the fly.

3. Design

   

   A very cool set of design tools. It includes grid, rule, unit and crosshair. A must have if you are designing in the browser.

4. jQuerify

   As expected, it includes jQuery to the page. Very useful if you want to use firebug's console and jQuery selectors.

5. Favelet Suite

   If you are a fan of the web developer toolbar add-on for Firefox, you will love this tool.

6. xRay

   It displays CSS information of a selected object.

7. Microformats

   

   Every time I markup a page, I try to use microformats as much as possible. This bookmarklet gives you a list of vCard on the page. Unfortunately, it doesn't display any other micro data.

If I missed any other bookmarklet, feel free to leave a comment with the link to it.

While at An Event Apart Boston, Jeremy Keith delivered the best lecture of the conference, about progressive enhancement. One slide caught my attention the most. It was about adding a class to the body if JavaScript was available. Here is his code example using jQuery:

Keith's Example using jQuery:

CSS

Why add a class if JavaScript is enabled?

Although the majority of desktop users have JavaScript enabled, mobile is one of the most used platforms to surf the web. Some mobile browsers don't support JavaScript. Keep in mind that search engines don't run JavaScript, so NEVER add important content using JavaScript.

Read more …