S Studio Snapsize - Web Designer - Nelson BC, V1L 4J1

Lighten and Darken Hex Color Values

Ever need to lighten or darken hex values for button hover states? Found yourself having to launch Photoshop or Illustrator just to drag a color picker around? Likewise, one too many times. So, I built a web based tool to do just this, lighten or darken by a set percentage. It’s responsive too so just launch the app on whatever device and use it as you please. Visit the app at hexcolortool.com, bookmark it and share it with all your hipster designer friends.

Custom Social Sharing Links

Social sharing buttons provided by social networks are usually built to track users, even after they’ve left your site. I know, totally intrusive. Anyhow, there are ways of creating unobtrusive buttons/links to enable sharing on your site. Here’s one of them, in alphabetical order of course:

  • Delicious - http://del.icio.us/post?url=[URL]&title=[TITLE]]&notes=[DESCRIPTION]
  • Evernote - http://www.evernote.com/clip.action?url=[URL]&title=[TITLE]
  • Facebook - http://www.facebook.com/share.php?u=[URL]&title=[TITLE]
  • Friendfeed - http://www.friendfeed.com/share?url=[URL]&title=[TITLE]
  • Google+ - https://plus.google.com/share?url=[URL]
  • Google Bookmarks - http://www.google.com/bookmarks/mark?op=edit&bkmk=[URL]&title=[title]&annotation=[DESCRIPTION]
  • Linkedin - http://www.linkedin.com/shareArticle?mini=true&url=[URL]&title=[TITLE]&source=[SOURCE/DOMAIN]
  • Newsvine - http://www.newsvine.com/_tools/seed&save?u=[URL]&h=[TITLE]
  • Ping.fm - http://ping.fm/ref/?link=[URL]&title=[TITLE]&body=[DESCRIPTION]
  • Pinterest - http://pinterest.com/pin/create/bookmarklet/?media=[MEDIA]&url=[URL]&is_video=false&description=[TITLE]
  • Posterous - http://posterous.com/share?linkto=[URL]
  • Reddit - http://www.reddit.com/submit?url=[URL]&title=[TITLE]
  • Slashdot - http://slashdot.org/bookmark.pl?url=[URL]&title=[TITLE]
  • StumbleUpon - http://www.stumbleupon.com/submit?url=[URL]&title=[TITLE]
  • Tapiture - http://tapiture.com/bookmarklet/image?img_src=[IMAGE]&page_url=[URL]&page_title=[TITLE]&img_title=[TITLE]&img_width=[IMG WIDTH]img_height=[IMG HEIGHT]
  • Technorati - http://technorati.com/faves?add=[URL]&title=[TITLE]
  • Tumblr - http://www.tumblr.com/share?v=3&u=[URL]&t=[TITLE]
  • Twitter - http://twitter.com/home?status=[TITLE]+[URL]

All you need to do is create regular links and replace the contents of the square brackets with the appropriate PHP snippets from your CMS. Style as you wish of course.

Should We Still Use Web Safe Colors

It’s 2013, should we still be using web safe colors? Absolutely not! Long gone are the days where you need to be designing websites that only support web safe colors. But, that doesn’t mean you can’t use them.

I’m mainly just doing front end development these days so most of my work gets handed down to me from other designers. I noticed that a few of them still like to use a limited color palette. Every time I would open one of their Photoshop files I’d notice that the color pickers were set to ‘web safe color’. This got me wondering why they’d be doing this. As it turns out, it’s just easy. There’s not need to be micro-selecting colors from millions of options and the hex values are just easy to remember. The hex values are all set in pairs, like #0099CC. This makes it super easy for me also cause all I need to remember for CSS is #09C. I love easy.

When I searched around the web for ‘web safe colors’ all I found were ancient looking websites with ugly swatch grids. I wanted something nice that displayed all the web safe colors so I built my own. It lives here. It’s responsive so you can just launch this tool on your smartphone or tablet and you don’t always have to flip back to Photoshop. It’s also a super handy tool for filtering through color ranges. Check it out at websafecolors.info

 

Transfering Domains from Godaddy to Name.com

For years I’ve been registering my domains and client domains with Godaddy. Though sickened by their never ending up-sell tactics and constant flow of email promotions, I stuck with them because I was never able to find an alternative registrar that wasn’t as whorish as Godaddy.

I was recently listening to a podcast on Shop Talk Show and there was some talk about domain pirating, and how Name.com got involved to help out even though they weren’t even part of the pirating fiasco. They decided to get involved simply because they cared. I thought that was impressive so I checked them out. Turns out they’re as cheap as Godaddy, have a nicer interface and they don’t try to up-sell other products. So, I’ve decided to move all of my domains from Godaddy to Name.com.

So long Godaddy and fuck you!

Local WordPress Development with MAMP and Adobe Edge Inspect

I recently spent an entire day refining my local development workflow for building responsive websites. The new addition to my toolbox was Adobe Edge Inspect. While trying to get it all set up I ran into a few hurdles so I’d like to mention a little about my local development setup, Adobe Edge Inspect and the issues I got stuck on.

The Local Development Setup

I develop all my sites locally because it’s so much faster. I use MAMP PRO for my local Apache, MySQL and PHP environment, SASS for CSS pre-processing and CodeKit for compiling code, optimizing images and automatic browser refreshing. These three together make it super awesome but for responsive website development there was one missing element, a tool for synchronized browsing, Adobe Edge Inspect.

Preview, Inspect & Synchronize Browsing with Edge Inspect

If you don’t know what Edge Inspect is yet I suggest you check it out cause it’s a must have tool if you’re going to be building responsive websites. It basically allows you to preview your site, inspect your code and have all your testing devices synchronized as you navigate on the desktop. To use Edge Inspect you’ll need an Adobe Creative Cloud account. In a way this kinda sucks but I’d much rather pay $50/month to access absolutely everything Adobe makes then to dish out the $1300+ for just the Creative Suite.

I’m not going to go into detail here about setting it up cause it’s super easy. All you need to do is download the desktop app and follow the instructions. You’ll also need to install the Chrome plugin and accompanying apps on all your devices, pair them with your desktop computer and you’re ready to go. Once you’re all set up you can test it out on some random websites to see how it all works.

Setting Up a Local Website with MAMP

If you’re new to MAMP I recommend reading Smashing Magazine’s post on Developing WordPress Locally with MAMP. It’ll take you through all the steps for setting up your local sites.

MAMP Pro allows you to set a server name like  mysitename.local or whatever you decide. This makes it so that you can access the local site easily by navigating to something like mysitename.local:8888. This is a perfectly fine setup but because I am using Edge Inspect, browsing on the mobile devices is now automated. Meaning, whatever happens in Chrome on the desktop gets mirrored on the mobile devices. However, this causes a ‘server not found issue’ on the mobile devices. The reason for this is because the local site is on a private server so any external devices need to refer to an IP address instead, something more like ’198.162.1.2:8888/file_path’. To work around this issue I had to set my host to an IP address in ‘Hosts > General > IP/Port’. I also had to match the WordPress Address(URL) and Site Address(URL) to ’198.162.1.2:8888/file_path’ instead of using the server name.

This now works seamlessly, though the sad news about this setup is that the URL to access the local site is not very pretty. In my opinion, a small compromise for being able to develop locally and have synchronized browsing across all devices.

New Year Resolutions

Good ideas come and go fairly quickly and I tend to procrastinate a lot so I figure this might be a good time to blog about a few projects and goals that I’d like to accomplish this year.

Learn New Technologies

There are tons of things I can throw myself at but I think I’ll keep this list pretty simple. I’d like to learn new programming languages someday but for now I’ll just stick to what I know. This year I’d like to:

  • use GitHub on personal and client projects
  • deploy projects with Beanstalk
  • learn to use CSS3 animations
  • try out mixture.io
  • try out brackets.io

Personal Projects

This is the area I’d like to focus most on this year. A lot of these items are simply for improving my workflow with responsive web design. The list:

  • build a style board/style tile WordPress theme
  • build a wireframing WordPress theme
  • build more responsive themes for Minimal WP Themes
  • build a boilerplate for responsive.gs

Personal Life

I’ve been pretty married to my work for the past five years. Last summer I was blessed with my first child and this opened my eyes up to how precious life really is. This year I’d like to:

  • hang out with my amazing daughter and her beautiful mother as often as possible
  • spend more time with friends and family
  • get better at sailing
  • set up a pottery studio in the basement
  • take more short trips/camping

New Skin, New Vision & New Year

Greetings and welcome the newly designed snapsize.com, it’s new vision and 2013!

For the past 5 years now Snapsize has been my web design portfolio. This was the place were potential clients would come to view information about my past projects and decide if they wanted to hire me. That was the goal anyhow. I had high hopes about getting new clients through this site so I spent billions of hours(not really) optimizing it for search engines and updating my portfolio with shiny new screenshots of my latest and greatest work.

Unfortunately  that’s not how it went down. The reality is that most potential clients are finding me through referrals and almost 100% of my visitors are other web developers and designers visiting from some of my personal projects like cssfontstack.com, responsive.gs, websafecolors.info, minimalwpthemes.com and brixxletterpress.com.

I’m ok with that. In fact, I’ve decided to turn this website into a design and development blog rather then a portfolio. This website will now be used to blog about functions, code snippets, and plugins that I use throughout projects. So, welcome fellow web designers and developers and stay tuned for new posts in the new year. If you’re dying for some snippets you can check out my snipt.net profile here.

If you’re a potential client you can find out more about me at denisleblanc.com.