• Git for the Lazy — Guide on using git… simply.
• jQuery Fundamentals — Free book on jQuery. Actually got caught up reading it while creating this post.
• Dragdealer JS — A Javascript Dragging Component. Does sliding too.
• List of freely available programming books — Stackoverflow has some of the best answers around.
• Why Intelligent People Fail — Written in 1994, but still so actual.

I was baffled by this article which claimed warping drop shadows weren’t possible in CSS3. I felt like I had to disprove that claim. Hence this post.

I present to you…

Warping Drop Shadows with CSS3

To be honest, it wasn’t much of a challenge. Anyone with basic knowledge of CSS3, its new box-shadow and transform properties, shouldn’t have trouble arriving at the same conclusion.

#warped
                position: relative
                z-index: 0
                padding: 0
                margin: 50px auto
                font-weight: normal
                line-height: 1.2
                text-align: center
                background: #fff
                width: 500px
                &:before, &:after
                  position: absolute
                  z-index: -1
                &:before
                  content: ""
                  text-align: left
                  background: transparent
                  bottom: 9px
                  right: 10px
                  width: 50%
                  height: 40%
                  +rotate(4deg)
                  +box-shadow(rgba(0,0,0,0.7), 0px, 0px, 50px)
                &:after
                  content: ""
                  text-align: right
                  background: transparent
                  left: 10px
                  bottom: 9px
                  width: 50%
                  height: 40%
                  +rotate(-4deg)
                  +box-shadow(rgba(0,0,0,0.7), 0px, 0px, 50px)
              
                .content
                  background: #fff
                  padding: 30px 0
              

… I used StaticMatic, here’s the source

As you may know, I love to use StaticMatic to whip up quick prototypes. I used the same for this prototype, if you’d like to take a look at the source, it’s on github.

Update: I optimized the code for less markup.

Live from Panama City!

• Sencha Touch UI — Sweet HTML5 and JS library making use of the iPhone and iPad touch capabilities!
• Vector Icons with SVG and Canvas — No images!!
• How to Name your Product, Service or Startup — Use these tips.
• Rake Tasks 101 — Short tutorial on rake tasks… I always wondered…
• Hourly Work vs. Linchpin Work — Makes sense :)
• World’s Healthiest Food — Good to know.
• CSS2 Multiple Backgrounds — Awesome idea to emulate the multiple backgrounds wonders of CSS3.
• PubNub — Javascript Push API for Real-time Applications. Is that clear?
• MongoMapper 0.8 Goodies Galore — MongoDB with this gem rocks. I use them all the time.

I don’t understand how I didn’t think about open-sourcing my extension before. It’s just so much better, even to actually distribute the file!

You can now download it from the “Downloads” section in my repo jeromegn / beautifier and feel free to pull that thing, mess with it, make pull requests, etc.

Have fun.

I created an extension that smooths every websites' fonts.

Download: beautifier.safariextz. (if you see gibberish, right-click and save on that link)

I’ve been liking the different little extensions coming out in the last few days since the launch of Safari 5. By the way, your best source for those is this tumblr blog.

Making your own is quite easy. Check the docs!

How does it improve fonts exactly?

Before:

After:

Source: Max Voltar

How did you do it?

html { -webkit-font-smoothing: antialiased; }
              

Update: This thing is now open-source

On github: jeromegn / beautifier

• How to name your product, service, or startup — Been struggling with this lately.
• Unix Toolbox — “[…] commands and tasks which are useful for IT work or for advanced users.”
• Modern Element Trends in Minimal Webdesign — Very inspiring top list. Some sites aren’t so minimal in there though.
• Sexy.js — Sequential Ajax Library for jQuery. That fits my mental model much better!

Someone on Forrst asked about how to charge customers, in terms of hourly rates, billable hours and profit margins.

I hadn’t thought about that in a while, but I now realize how silly and unusual my rates are. Let me illustrate:

What!?

Yep. Money is far from my primary driver. Here are some:

• I’m willing to work for free if it’s the most exciting thing ever. If it’s challenging, which in turn enables me to learn from the experience, which in turn makes me happy;
• If you’re the kind of client who understands hiring a designer means you aren’t one yourself and so you should let him do its job, then I’m willing to go significantly lower on my rates to accomodate your budget. Those projects are so much better;
• If you’re project is both interesting and relies on solid UX to work, then you can compensate me with something else than cash (equity?). I will come through, it’s my expertise.

I don’t recommend following this line of thought if you’re in financial troubles and have mouths to feed. I’m young and have almost nothing to lose…

Here’s another round of my delicious best-of. I just dropped the HackerNews feed, it was killing me, now I just browse the site from time to time and rely on other people like me to find my links!

• Simplify Your Existence in 3 Easy Steps — I love this guy’s real life experience. Insights into how he manages.
• Looking Back at Lean: 6 lessons for winning — Simple lessons for people interested in lean startups (that actually succeeded).
• Signs of a poorly written jQuery plugin — Ah! Good to know!
• How We Improved Our Conversion Rate by 72% — They at least succeeded in making me click the link with a title like that! 3 straightforward tips for increasing conversions.
• Saplo API — A text semantics API. Looks cool, no use for it yet.
• Lightbox_me — Yet another jQuery lightbox, though this one is very light and has good features. Going to give it a spin soon enough.