Mar 2 2016

The Setup

Here is a short list of the tools, applications, and services I use most often.

  • MacBook Pro 15″ 2014
    • OS X Yosemite
    • Terminal
    • Photos
  • Chrome
    • JSONView
    • Postman 3.0
  • Parallels Desktop 10
    • Ubuntu Desktop 14.04
      • Inkscape 0.48
      • Gimp 2.8
      • MonoDevelop 4.0
    • Windows 7
  • Google Docs
  • Amazon Web Services
  • Atlassian
    • Jira
    • Confluence
    • HipChat
  • Brackets 1.4
  • Atom 1.0
  • TextWrangler 5.0
  • Komodo Edit 9.2.1
  • Eclipse Luna 4.4
  • SourceTree 2.0
  • GitHub Desktop
  • SQL Developer 4.0
  • MySQL Workbench 6.3

Jul 4 2012

Rounded Corners with CSS border-radius Property

Modern browsers have come a lone way since 2006. Back in 2006, Web 2.0 and AJAX was the hottest technologies for web developers (just like HTML5 and CSS3 is now) and rounded corners was one the coolest things you could do to a web page. Unfortunately, in 2006 the easiest way to have rounded corners in a HTML tag such as a div was to use JavaScript and images and all other sorts of hacks. Thankfully, most modern browsers (all but IE) support the CSS border-radius style which can be used to curve and round a corner.

Using border-radius
For the following examples, I’ll using the following CSS classes, which I hope are self explanatory.

.box {
    width: 100px;
    height: 100px;
    float:left;
}

.red {
    background: red;
}

.orange {
    background: orange;
}

.green {
    background: green;
}

.purple{
    background: purple;
}

The easiest use of border-radius is where all four corners have the same border curve radius. If all corners have the same curve radius all you need to supply is one px radius value.

<div class='box orange' style='border-radius: 20px;'></div>

In the examples provided in this tutorial, we fixed the width and height of the box div to be 100px. If we increase the border radius to 50px we can have a perfect circle.

<div class='box orange' style='border-radius: 50px;'></div>

What makes the border-radius property powerful is that you can set a different radius for each corner. Just enter four values, the first one will set the radius for the top-left corner, the second sets the top-right, then the bottom-right, and the bottom-left corner. If the value 0px is used, that corner will not have any curvature. The following HTML examples sets different border radius values for each corner generating a leaf looking shape.

<div class='box green' style='border-radius: 0px 60px 40px 60px;'></div>

Placing four similar div tags in place, you can create a four leaf clover shape or a circle.

<!-- four leaf clover -->
<div class='box red' style='border-radius: 50px 75px 0px 75px;'></div>
<div class='box orange' style='border-radius: 75px 50px 75px 0px;'></div>
<br style='clear:both' />
<div class='box green' style='border-radius: 75px 0px 75px 50px;'></div>
<div class='box purple' style='border-radius: 0px 75px 50px 75px;'></div>

<br style='clear:both' />

<!-- circle -->
<div class='box red' style='border-radius: 100px 0px 0px 0px;'></div>
<div class='box orange' style='border-radius: 0px 100px 0px 0px;'></div>
<br style='clear:both' />
<div class='box green' style='border-radius: 0px 0px 0px 100px;'></div>
<div class='box purple' style='border-radius: 0px 0px 100px 0px;'></div>

You can even nested rounded div tags to create a bullseye image.

Fun with CSS border-radius

Fun with CSS border-radius

As of this time, Chrome, Safari, and Firefox support border-radius.


Jun 8 2012

JavaScript StackTrace With The console Object

Error handling and debugging had been made difficult in JavaScript because the lack of tools and the language itself. Unlike Java, that has a strong type and hierarchy of exception classes, JavaScript didn’t even have a direct approach to print the execution stack trace. For years I used a workaround to navigate around stack trace of a method call in JavaScript by using the Function arguments property. In JavaScript, all functions have an arguments property defined. The arguments property is available even if the function is defined with no explicit function parameters. The function arguments property behaves like an array and you can iterate through the argument parameters used to call the function but it also has a reference to the caller via the arguments.callee property. The arguments.callee property references the currently executing function itself, which has a caller property to that of the previous function call in the execution stack.

function basicFunction() {
   var isTrue = arguments.callee == basicFunction; // true
   var callingFunction = arguments.callee.caller; 
}

In the above code, the callingFunction variable holds a reference to the Function object that called the basicFunction.

The caller property returns a Function object or null, so you can chain these until you get to the root of the call stack. You can iterate through a call stack in JavaScript with code similar to the following.

function basicFuction() {
   var caller = arguments.callee.caller;
   while(caller != null) {
      console.log(caller);
      caller = caller.caller;
   }
}

Unfortunately, there is no clean way to get the function name out of the Function object returned by the caller property. This is made slightly more difficult because somethings functions don’t have names if they are created anonymously. If you print or log a Function object, it displays the function definition in its entirety.

Fortunately, the JavaScript console object provides a trace function that will log to the web console the JavaScript stack trace.

function basicFunction() {
   console.trace();
}

If the above function is invoked from an on click event, the whole JavaScript track trace from the on click to the basicFunction function is logged out in the web console. In addition to the function names, the web console in Safari, Chrome, and Firefox have a link to navigate to the exact location your web application where the functions were called.


Jan 7 2011

Retweet December 2010

From time to time I just blast tweets about software development, project planning, team dynamics, or whatever else comes to mind. Here is a synopsis of recent tweets and rants. If you want to follow the conversation follow me at techknow and/or juixe and I’ll be sure to follow back.

Software Development

  • I wish I could Ctrl+Alt+Delete out of everything.
  • The recommendation engine is the new search engine.
  • Loop. Break. Null. Exception.
  • How do you explain a feature is often as important as how you implement it.
  • The implications of a code change are often much larger than the code change itself.
  • There Will Be Bugs
  • Don’t trust the cloud.
  • This is my debugger. There are many like it, but this one is mine. My debugger is my best friend. It is my life. I must master it as I …
  • Code fist and test later is like shooting first and asking questions later.
  • I program with pen and paper.
  • The debugger is my best friend.

Team Leadership

  • Whining is not trying.
  • Doing nothing is doing something.
  • Don’t compound your problems by manifesting new problem.
  • A great team chooses a great leader and great leaders builds a great team.
  • Making good choices leads to better choices.
  • The most narrow minded perspective is that “We Versus Them” attitude. There is no them, only we.
  • If you have it, bring it, and if you brought it, don’t hide it!
  • You are not who you used to be or who you will become.
  • I am an idea artist, making you think is my master piece.
  • Productize your expertise.
  • Cheat off your own hard work.
  • Instead of making the effort, sometimes people make excuses.
  • If you can’t find reception don’t CALL ME.
  • In search of a triple rainbow.

Product Placement

  • Steve Jobs is one third innovator, one third imitator, and one third black shirt and jeans.
  • If Yahoo were to close down Flickr, there would be blood in the streets.
  • I got my hands on a Google CR-48 yesterday. It’s just a laptop with one single app, a browser. It’s a thin client for cloud computing.
  • I CAN HAZ CR-48!
  • I wouldn’t mind testing a Google CAR-48, their self driving car, for free.
  • Atlassian should buy corporate twitter clone Yammer.
  • I would like the hotel check-in process to be as easy as Foursquare check-in.
  • Taco Bell is Moctezuma’s Revenge.
  • I just had the yuckiest drink, Gatorade Recover Strawberry Kiwi. Claims to be a post game protein recovery beverage. Tastes like recovered gym shorts.
  • This day will go down in history as the Great Skype Fail Whale of 2010, when people had to remember how to use a phone to call someone…

Quote

  • It’s easier to invent the future than to predict it. – Alan Kay
  • I aspire to inspire before I expire – Alina Morelli
  • It is fun to do things others call impossible. – Emile Baudot
  • I’m a hope fiend. – Frankie/Celebrity Rehab
  • We now know that Visa, Mastercard and Paypal are instruments of US foreign policy. It’s not something we knew before. – Julian Assange
  • Guantanamo is used for laundering people to an offshore haven that does not follow the rule of law. – Julian Assagne
  • Assange had a lot of help making Sweden look like the last place on Earth that you would want to take your penis. – Scott Adams

Holiday

  • Happy Shopmas Season!!!
  • Jingle bells, cashiers ring, websites clicked.
  • Let it snow, let it snow, let it snow… cash.
  • Finishing up with xmas shopping.
  • Santa is welcomed in my house any time.
  • I think I developed carpal tunnel from opening all those gifts. Thank you santa.
  • My new year’s resolution is to double surface area of my comfort zone.
  • I’m gonna party like it’s 3999!
  • We are going to one up 2010 in 2011.
  • Getting ready for 2010++!
  • 2011 > 2010!

Jan 4 2011

The Google Chrome Notebook

Google publicly announced Chrome OS in back in July 2007. They’ve been busy building a lightweight browser-powered and cloud computing-enabled Operating System. Recently in, December 2010 Google announced a test pilot program for a Chrome OS notebook dubbed Google CR-48. On the day of the announcement, some insiders already had the CR-48 in hand but Google also opened up the test pilot program to the general public via a signup form. The signup was targeted to developers, educators, and individuals alike. By way of a Christmas miracle, I was able to land a Google CR-48 and have been using it for days now.

As soon as the details of the Google Chrome Notebook were made available I was immediately in love with the Google CR-48. It’s basically an ultra light weight cloud computing client running a slimmed down web enabled Operating System. The CR-48 is as portable as an iPad but with a full keyboard. The CR-48 has a smart track pad that supports iPad-like touch gestures. The CR-48 is always on, just like an iPad or Mac Air, so there is no boot up time when all you want is just check your email or post a tweet. That said, the CR-48 is not a official product and that is evident by the simple black frame, it’s even without a trace of corporate logo or Intel inside sticker. Because the CR-48 is not a official product, I won’t say much about the industrial design and finish of the hardware other than to say that unlike the iPad, it has a USB port and a SD slot.

Google Chrome CR-48 Notebook

Google Chrome CR-48 Notebook

As soon as you open the CR-48 it turned on magically and prompted me to sign in. Unlike the iPhone or iPad, the CR-48 doesn’t require you to connect to a computer before you can use it. After some setup steps, you can sign in and take it for a run. As soon as you log into the device, you will see a Chrome browser taking up the whole screen with a single tab. It does take some time to realize that the CR-48 is a laptop with just one application, a browser. That is all it is, a browser. There is nothing to see, move along, it’s only a browser. Your desktop is your default page as shown in a Chrome browser. It merits repeating, the Chrome CR-48 only has one installed application, a Chrome browser.

As soon as you log into the CR-48 you find a browser in full window mode and if configured correctly with your home’s WiFi, you can start surfing the net. I’ve been using the CR-48 for reading blogs, checking email, liking status updates on Facebook, and accessing the web applications I use on a daily basis. Google does have a Chrome specific Web Store where you can install free and paid applications but I’ve not found anything of interest.

Aside from the technical specification of the Google Chrome CR-48 notebook, what is more interesting for me is that this is the first cloud computing client, a sort of Web 2.0 Thin Client. I am a avid user of Google Docs, GMail, WordPress, and other online services that have a large amount of my data in their respective ‘cloud.’

Realizing that this is a cloud client, privacy issues and data mining concerns immediately become apparent. It is already known that Google saves user searches and that with this and other identifying data they modify search results. It is already known that Google Adsense ads are targeted to the sites you visit. Can you imagine how valuable your browser history and usage statistics is to a company like Google? Google has a large amount of identifying information with from all angles of your browsing experience, from Google Search, Google Adsense, Google Analytics, and now Chrome and it’s Chrome notebook. I can see a future where Google would be giving away Chrome and Android-based devises for free because they can collect so much valuable information and up sell users with highly targeted ads.

The CR-48 is a great little notebook but a machine like that would never replace my laptop. At this time and with it’s current specifications, it can’t handle the hundreds of pictures I am known to take over a weekend, it can’t handle the gigabytes of video I take on a trip, and as great as Google Docs is it’s still not Microsoft Office. I see the CR-48 as a great web surfing machine while TV surfing.


Dec 29 2010

Captcha This, Byatch!

Google announced the development of an autonomous self driving vehicle that has the potential of revolutionizing and maximizing the use of roads, fuels, and other resources. I wondered out loud, via Twitter, what other struggling industries might need some of Google algorithmic-minded engineering.

  • @techknow: In addition to moving into the automotive industry, Google should get into the airline business and revolutionize it from the ground up.
  • @SchemaCzar: Google did get into the airline biz a few months ago by buying ITA Software.
  • @techknow: You are right, I totally forgot about that acquisition. Okay, the business they still haven’t entered into: home loans! They could fix the mortgage industry

Spam and spambots are a big problem for website operators, but their solutions to get around spambots is hurting the web just as much as the spam. Personally, I despise captchas. Captchas are those cryptic and distorted letters or words that look you have to type to prove that you are a real person when signing up for a web application or service. I recently had to do an eye test and I have 20/20 vision and I have trouble entering captchas, imagine the accessibility issues that people with disabilities have to deal with because of these.

  • @techknow: I get personally insulted when I am prompted to prove my humaness with a captcha. It makes me wanna bust a cap-tcha on some webdeveloper!!!
  • @AaronBoynton: I so agree! There are better ways #downwithcaptcha
  • @techknow: The worst part is that I start thinking that maybe I am a robot because I can’t read the damn captcha. A robot with poor vision.

I’ve written about missing features in Foursquare and other location based web services before. There is little or no utility in checking into a location though Foursquare. In check into hotels more than I check into Foursquare. In check into a restaurant more than I check into Facebook Places. I want to be able to check into a restaurant and make an order. I want to check into a hotel and check in without talking to the front desk. I want to check into a parking structure and pay for parking. The following conversation started with that idea.

  • @techknow: I would like the hotel check-in process to be as easy as Foursquare check-in.
  • @ButtercupD: cool would be something similar Fastrak for bridge tolls–what about frequent guest card and walk in and autochecks you.
  • @techknow: We should patent that. ;)

I was fortunate enough to get a free CR-48 Crome notebook from Google. People outside of Google had the opportunity to sign up for one and this was the first raffle/lottery that I have ever won. This is the first time I have ever heard of a company making available a test pilot product to people outside of the company in this fashion. I think it was marketing genius and Google engineers will mine a lot of real life usage data from pilot users.

  • @techknow: My Google wish came true, and it came in a UPS box!
  • @aaronhalford: aw, everyone is getting a CR-48 but me. Enjoy it!
  • @techknow: Thanks! I hope you get one too! I also wish that Apple had a similar program. I also wish for world peace.