Build good habits

Talking to myself:

Don’t rush!

Take your time and consistently build your products, improve your health, improve your fitness, increase your wealth and improve your relationships.

Toil daily!

Even in the days when you think you can do more it’s better to stop and pace yourself. Life is a marathon, not a sprint.

Enjoy the journey! Don’t live for the end. Live for the moment.

Build a habit.

A habit is more powerful than motivation.

Remember what Daddy always says:

The race is not for the swiftest, but for those who can endure till the end.

Swinging Price Tag

Swinging Price Tag is a homework assignment that came out of discussions Denzil Doyle and I were having about HTML5, Sass and building reusable widgets. We wanted to see how each of us would approach building such a thing. My results are in the pen below.

image

See the Pen Swinging Price Tag by Dwayne R. Crooks (@dwayne) on CodePen.

Join in the fun and show us how you would do it. Tweet your results to me or Denzil on Twitter.

Happy hacking!

Written by .

Photo ASCII in Ruby - Improved quality

It turned out that reducing the ASCII space from 95 characters (32 - space to 126 - tilde) to a carefully selected 12 character set resulted in huge wins. The quality of the conversion drastically improved.

The other change I tried was converting to grayscale before performing the mapping. However, the resulting differences aren’t that dramatic and I’m thinking of leaving that as a config option.

Here’s the updated code and you can see the results below.

Real Ruby

image

ASCII Ruby

image

Real Me

image

ASCII Me

image

Reference

If you’re wondering where I found the set of 12 characters, then check out this text document.

Happy hacking!

Written by .

Photo ASCII in Ruby - The spike

As I indicated in my previous post, I’m working on a fun side project suggested to me by Chenoa.

Here’s the short of it.

A few weeks ago at the office we had a selfie promotion that Lerielle was pumping on for Pizza Hut. Practically everyone contributed selfies to the promotion (except me, shame). Chinaka being Chinaka took an ASCII selfie. I thought this was ingenious and felt a little disappointed I didn’t think of it first :(. I mean this is something I’d do. Anyway I sent an email indicating as such and Chenoa responded

Why don’t you create an app that does it?

Well as you can guess the challenge was accepted and I’m happy to say that Photo ASCII is my attempt at creating a tool to convert photographs to ASCII.

The first version of Photo ASCII is just a spike I did to see if my thoughts on how it could be done made sense.

My thoughts

If I could somehow convert the pixels to integer values. Then map those integers to the printable ASCII character range then that should work. So if I get that to work I may get acceptable results and I can iterate to improve the quality of the output from that point.

How it works

Well RMagick allows me to open any image format and convert pixels to intensity values (essentially integers). Let’s say that the minimum intensity is i_min and the maximum intensity is i_max. Now the printable ASCII character range is from 32 (space) to 126 (tilde). We simply map i_min to 32, i_max to 126 and every value in-between i_min and i_max to a value in-between 32 and 126.

Let i represent any intensity within i_min and i_max and let a represent the corresponding ASCII character. Then, using some simple CXC Mathematics to find the equation of a line given two points on the line we get

a(94 * i + 32 * i_max - 126 * i_min) / (i_max - i_min).

One thing to note is the possibility of division by zero when i_min is equal to i_max. This occurs when the image is all one color. The code I wrote handles this case by just using spaces.

And, that’s it.

I got okay results.

Real Ruby

image

ASCII Ruby

image

Real Me

image

ASCII Me

image

I have some ideas for improvement.

  • Convert the image to a grayscale one before going to ASCII.
  • Tune the mapping so that for example, the character that looks the darkest, I think #, maps to black. The character that looks the second darkest maps to another appropriate character. And so on.
  • If greyscale doesn’t work then maybe edge detection might be the way to go.

Conclusion

I’m fully aware of other solutions out there that already does what I’m trying to do much better than I have done here. But what’s the fun in reusing those solutions. I rather build something on my own to learn first hand the challenges involved in doing such a thing.

For those of you needing a quality solution right now, I’d recommend picascii.

And finally, if you’re interested, you can view the full source code.

Happy hacking!

Written by .

Installing RMagick on Ubuntu 14.04 LTS

I’m working on a fun project suggested to me by a colleague. To spike it I decided to implement a quick test script to figure out what will be needed to implement its core feature. I’d talk more about it in the future but suffice it to say that one of the requirements is image manipulation.

The best game in town where image manipulation is concerned seems to be ImageMagick. And based on my limited research the best Ruby binding is RMagick.

I had a little trouble while installing the RMagick gem so I thought I’d just document the process for future me (and whoever else).

  1. sudo apt-get install imagemagick
  2. sudo apt-get install libmagickwand-dev
  3. gem install rmagick

The problem occurred in Step 2 for me and it took me a while to find that solution.

thoughtbot’s Phil LaPier on Design for Developers

As a developer, I want to have a sense of design so that the products I create can be visually pleasing and intuitive to use.

However, it’s usually the case that I’d have an idea and as soon as I figure out how to solve the problem functionally, I’d jump right in and code up a solution. The end result is usually something that works but is not aesthetically pleasing. Sometimes I really don’t care but other times I feel as though a better visual design or UX would improve the work. I’ve never learned or practiced how to solve a problem in 2D/3D space, I’m all about the algorithms.

Shout out: If you’re a developer with little to no design chops and you’re feeling the same pain I’m talking about then let me know. Maybe we can share resources on how we’re trying to improve our skills in this area.

Speaking of sharing resources. Yesterday I was listening to Episode #2 of the Giant Robots Smashing into other Giant Robots podcast and in it I found that Phil LaPier had some really solid advice for us developers as we try to add a bit of design chops to our skill set. The episode is about 36 mins long and I’d suggest you listen to it in its entirety but just in case you don’t have the time, let me give you the TL;DR.

Relevant Notes from the Episode

Phil LaPier is a designer at thoughtbot (a company I truly admire). He does front-end development and works with clients to build web apps.

The usual workflow:

  • Ideation with the client
  • Sketching and wireframing
  • Prototyping with HTML and CSS
  • jQuery programming but usually stops when it requires intense JavaScript programming
  • Hand-off to or should I say begins collaborating with the developers

Phil says that what makes him skilled at design are the following:

  • Having a good understanding of the fundamentals of design, i.e. knowing its basic principles
  • Knowing his medium well and in the case of the web that is HTML and CSS
  • Having a personal interest in design and being able to study it on his own. His interest goes beyond just work. He’s constantly studying and constantly learning

He thinks “The best designers are people who are always asking questions and always wanting to learn.

What does he recommend to do to learn?

Given the following scenario “A developer with basically no design chops (me, lol) had to design his own app and he needed help. In 2 minutes, what instruction would you give him to help him build his app out in the next 3 months?

He says:

  • Look into existing frameworks that are out there: BootstrapFoundation
  • Don’t try to go overly complicated with the design, KISS
  • Definitely think about whitespace. It’s a huge principle of design. Positive space is the actual content, negative space is the whitespace. Have enough negative space for the content to breathe. The fundamental rule of whitespace is “Have enough of it
  • Try having good typography. Work with 2 (possibly 3) typefaces. One is a headline font (sans-serif) and the other being a serif font.

In terms of going a bit deeper into the design process (at least at thoughtbot) he gave a run through of what the first few days are like on a brand new app and how they talk to the client to figure out how things are going to look.

  1. Requirements gathering. They have a kickoff meeting with the client for an entire day
  2. Do wireframes while sitting with the client. They do whiteboarding and rough sketches. At this stage they are trying to build a mental model of the system they would eventually be building
  3. No standard questions they ask since it usually depends on the project. Every application has a different set of data and a different set of requirements for a user on any particular page. A lot of it is figuring out the data. What is going to be where and building the mental model of the system which ultimately drives the questions
  4. Looking over the requirements and doing some more high fidelity sketches. These are shown to the client to give them a rough idea of what they’re thinking about
  5. He’s a Fireworks user (I won’t go into it here but he does mention why he chooses Fireworks over Photoshop for this part in the process, listen to the episode to find out, it’s around 14:35) so he usually takes it into that app at this point to build a visual prototype of what it would look like. No fancy typography or color. It’s usually just grayscale stuff just using Helvetica. This is not the time for the client or them to worry about those details. It’s about the big pieces at first
  6. Doing some HTML and CSS prototypes. Again not worrying about color or typography. Just laying it out. Clients can now click through some pages to get a good feel for the app

Process is absolutely fundamental to delivering good work.

Phil LaPier

Shout out: I’m actually really interested to find out the kickoff process for other designers and agencies (especially in Trinidad) when building websites, web apps and mobile applications. Just reach out to me on Twitter.

In the rest of the episode he talks about

  • Bourbon - A library of Sass mixins he created
  • What makes a developer colleague easy to work with?
  • Managing the design feedback process
  • His thoughts on HAML vs HTML (what do you think he likes?)

To end I’d just provide you with some of the resources I’ve personally been using:

Hope you’ve gained something from this post. As my secondary school basketball coach used to say,

Practice makes perfect permanent.

Happy hacking!

Written by .

Hello, world!

Hi there, my name is Dwayne Crooks.

It’s customary in introductory programming courses that the first program you write is a hello world app. So it’s only fitting that my first post is a hello world post. :)

According to Google, a trini is “a Trinidadian”. And, according to WordNet, a coder is “a person who designs and writes and tests computer programs”. Hence the name I’ve chosen for this blog.

I currently (Apr 8, 2014) work for a company called Caribbean Ideas and my official title is Senior Web Developer. Trust me when I say that I still have a lot to learn, so please don’t let the impressive title fool you. I don’t.

Disclaimer: The thoughts and opinions expressed in this blog do not represent those of my employer.

One of my personal goals is to become a full stack web developer specializing in HTML5, CSS3 and Sass, JavaScript and CoffeeScript, AngularJS, Ruby and Ruby on Rails.

Other than mastering my tools, like any craftsman should do, I want to make valuable contributions back to the open source community (the community that is molding me into the developer I am and will become), learn how to build amazing products, create sustainable bootstrapped businesses and educate my fellow developers who have the same passion and drive for this industry.

Stay tuned for more. This is just the beginning.

Happy hacking!