So if you follow me on Twitter or Dribbble, you’ve probably heard that I just got married! While the day was absolutely perfect, I will admit that I’m glad there’s no more planning to be done. And now that the wedding is finished, I have a lot more time to dedicate to some side projects, writing here more, and contributing to Rattle Media.
A few weeks ago, I was asked to take a look at an upcoming eBook about using Adobe Edge Inspect called Adobe Edge Inspect Starter. I had never been approached to do this before, so I was excited to do so! I’ve also been working with Adobe Edge Inspect a lot at Qgiv so the timing was perfect.
Overall, the book does a great job of getting you up and running with Edge Inspect. The first couple of chapters focus on getting the application installed on your computer, and then getting it set up on your mobile devices. Though the installation is fairly straightforward, the instructions they provide are detailed with plenty of screenshots, so you should have no issues getting set up.
Today, I was using an SVG as a background image with a CSS filter applied to it to create a drop shadow effect, but ran into a bit of a snag. Looking at the site on a retina display the image looked blurry, the exact problem I was trying to avoid by using SVG. This seems to be a bug in Webkit (not only for SVG but background images in general), but thankfully there is a quick fix!
If you add -webkit-transform: translateZ(0); to the element with the background image, it should clear it up.
Hopefully someone else finds this helpful!
I sometimes get asked by people that want to get into web design and development about the tools I use. I figured it’s about time I write them down somewhere, and I’m going to use this post as a running list of the apps and tools that I use daily for design, development, and productivity. I plan on occasionally doing reviews of the apps/tools that I use, so hopefully you find it useful. If you have any questions, feel free to leave a comment.
Note: I work in a Mac environment, sorry (not sorry).
I’m a huge fan of Espresso from MacRabbit. While it’s not perfect, it’s my code editor of choice at the moment. One of my favorite features of Espresso is that it’s functionality can be extended using Sugars. After downloading Themes and Sugars to assist with development and creating a few code snippets, I realized one small problem: there was no way for me to share them between all the computers I was using Espresso on. Thanks to some help from the MacRabbits/Espresso team and Dropbox, I’ve been using a solution that’s been working great so far!
Several times a day, I check my Twitter stream to see what’s going on in the world of web design. There’s usually a handful of really great articles, some funny gifs (thanks Ethan), and a lot of links to new resources and tools. I see things like “check out this awesome CSS framework”, “new responsive design calculator”, or “mind-blowing CSS3 button maker.” I hate to say it, but these tools become crutches that we rely on.
So I ask, “Do we have too many tools available to us?”
January 2013 Update: I updated the article to include some sample code to illustrate my point after receiving a couple requests.
With each project I do, I find ways to write better CSS. This is especially valid for responsive web projects. Today I’m going to share a few tips and things I’ve learned on my journey to becoming a better responsive web designer.
I’m a frequent user of keyboard shortcuts, especially in Photoshop. I’ve often found myself in this situation: I create a text box in Photoshop, type some text, try to switch back to the Move Tool (V), type the letter “v” in my text box. Annoying right?
By pressing Command + Enter (or Control + Enter for you Windows folks) you can exit the text box you’re currently editing. After that, you can type a keyboard shortcut to switch tools.
Happy Photoshopping!
CSS commenting sucks. Or so I thought.
Last week, as I was debugging some CSS and getting incredibly frustrated at the fact I couldn’t easily comment out lines, I tweeted this:
“//” needs to be added to CSS for commenting. #csswishlist
— Chris Morata (@chrismorata) April 18, 2012
Here’s a quick CSS snippet to add to your stylesheets to give your users better indicators on form labels. When I declare my form CSS, I used to just add label{ cursor: pointer; } for basic form accessibility, since you would usually have a label associated with a specific field.