Podcast generic takeaways

Posted on by

As a long time wantrepreneur with a brutal commute I listen to a lot of podcasts about business, real estate, investing, and online marketing. Podcasts and books in these realms have common threads that I believe must be basic common traits for being “successful” at what doing what you want to do.

The best way to learn is to start doing it.

Most people never even try. Just start. Do little things. Get over the fear of failure. Trying and failing is better than not trying at all. Take “massive action.”

Basically every business related podcast mentions this fact.  BiggerPockets almost every episode. Grant Cardone for sure. Pat Flynn pretty regularly.

Learn from a mentor or coach.

On the Rich Dad Radio podcast Robert Kiyosaki of Rich Dad, Poor Dad pushes for people to get a coach constantly. Pat Flynn of Smart Passive Income frequently touts coaching as well. Yes they have some financial interest in persuading you to use their companies as your coach but you don’t have to use them. I’m starting to think it could be valuable to me. Tim Ferriss uses many coaches to be more efficient (not a shortcut!) when picking up new skills.

Network, network, network.

It doesn’t matter if you’re an introvert. Networking can be achieved online in your pajamas through forums, social media, and Facebook Groups. Face-to-face meetings are better but the point is that building honest relationships with people is fundamental to success. 

Give more than you receive.

Serving others well (especially helping out your network) will return 100x whatever time/energy/expense you put in. Karma. Don’t give with the expectation of something in return. This is basic human kindness but I think it does take some effort.

Limit number of php-cgi processes spawned by nginx

Posted on by

Here’s how to Mine was around here somewhere.

File was here

sudo nano /usr/bin/php-fastcgi

Original file looked something like this.

#!/bin/bash
/usr/bin/spawn-fcgi -a 127.0.0.1 -p 10005 -u www-data -g www-data -f /usr/bin/php-cgi

Added -C argument to enforce a limit.

#!/bin/bash
/usr/bin/spawn-fcgi -C 2 -a 127.0.0.1 -p 10005 -u www-data -g www-data -f /usr/bin/php-cgi

http://forum.slicehost.com/index.php?p=/discussion/3671/limit-number-of-php-cgi-processes-nginx/p1

I just got a notice from my VPS host that my box was using too much swap and therefore impacting other users on the machine. As such, my provider did a hard reset on my instance which summarily stopped my web app (I don’t start the app on startup. I should.)

I just upgraded my server a few versions up the Ubuntu chain because of the heartbleed SSL bug so obviously it was something related to the upgrade. I’m not super savvy with figuring out which components changed so I figured if I could just cut back on the memory usage things wouldn’t go to swap. My server is running an app and a couple of old Drupal blogs that don’t get much traffic but I like to keep around for nostalgia. So, I figured I could sacrifice substantial performance on the blogs.

Things I changed to hopefully save memory:
/etc/mysql/my.cnf
* reduce max_connections to 50 from Not specified.

/etc/php/cgi/php.ini
* reduce memory_limit from 128M to 64M

/usr/bin/php5-cgi
* add “-C” flag to constrain number of processes to 3. (default was 5)

The php5-cgi change by far had the largest affect because each php5-cgi process was using 25MB per thread (~125MB, or 50% of my 256MB VPS).

HTML Email: Image height is 1px high for Gmail in IE10

Posted on by

Lately I have had to redo some of the HTML emails. We had an outside contractor do most of the work and he did a fantastic job. However, I was noticing that under a very specific condition, the email images were not rendering properly in desktop Gmail on Internet Explorer 10. I have no idea how many people are using GMail+IE10 but since this is our first real contact with the user, I though it would be important to ensure the best user experience possible. Broken images are not a good experience.

Here is the problem:
Email image poorly rendered

Old HTML

<img class="imageScale" 
style="display: block; width: 550px; height:auto;" 
width="550" height="auto" src="{{ img_url }}" 
border="0" />

New HTML

<img class="imageScale" 
style="display: block; width: 550px;" src="{{ img_url }}" 
border="0" />

Final outcome:
email-good

Why does it fix it?

I came across a couple of quirks at play in this porblem.

First, I learned that GMail automatically converts CSS height attribute to min-height with reckless abandon.

Second, the original HTML IMG tags have height:auto. With GMail’s reckles height conversion it becomes min-height:auto which essentially means 0px or 1px.

To solve, I removed height attributes on the img tags. It turns out that all of the browsers will automatically just render the image at full size of the parent container. In this case we have a series of nested tables that set maximum width of the parent to about 550 and the minimum width is 100% of screen width.

Delete old iOS backups to reclaim disk space

Posted on by

source:apple.com

source:apple.com

Just yesterday Apple released a critical patch that fixes a major security flaw. That Mac OS update required 3GB free on my machine.  That’s trouble! I have an older MacBook Air with a 128GB hard drive so I’ve been hovering with under 2GB of available disk space for a long time.

Even after some aggressive spring cleaning of Applications and old file attachments I still did not have enough disk space for the Mac OS update. At this point it dawned on me that I had recently  used iTunes to setup a new iPad that I bought and all the apps autmatically synchronized onto the new iPad without downloading anything. All that data must be stored somewhere.

So, I had to find out where iTunes keeps its backups. A cursory Google search found Apple iOS Backups which reveals that iOS backup files are housed in ~/Application Support/MobileSync/Backup for Macs. Sure enough, my mobile backup folder had 4 subfolders hogging up 20GB(!) of disk space. Since we only have 2 iOS devices in the house it was clear that iTunes still had backups for an old iPhone 3GS that I had given to my mom.

The folders contain encrypted iOS backups so I didn’t know which folder corresponded to each of my devices. Consequently, you have to delete your unwanted iOS backups using iTunes. The instructions “Deleting a Backup in iTunes” show that you can delete backups in iTunes >Preferenes > Devices.

Clearing out the old iOS backups gave me back 10GB of hard drive space! I haven’t had this much free disk space since I bought this laptop 3 years ago.

 

Working on a real iOS app.

Posted on by

As a personal endeavor I’m trying to make an iOS app. Making a native app for iOS has been on my to-do list for at least 2-3 years but I could never figure out the Objective C language and I haven’t done a lot of object-oriented programming. With newfound determination I have been trying to learn this stuff when I have downtime at work. I’ve had a lot of downtime lately so my learning progress has been good!

Things I’ve been skimming through:

Stanford undergraduate course on iOS through iTunes U (Not Recommended)

I started off trying to learn iOS by following Stanford University courseware via iTunes U. I thought “hey, Stanford is a great school. This should inspire me.” Big mistake — I despised computer science lectures when I was in college 10 years ago and evidently I still hate them. The first few lectures were long-winded and impractical for the purposes of building a simple app.

Big Nerd Ranch Guide (2012)

Big Nerd Ranch guide proved useful for understanding some fundamentals of Objective C. It’s densely written and some of the chapters are difficult to parse in my head. This is slightly easier to deal with than a boring iTunes U lecture but it has heavy reliance on extending code in preceding chapters so you cannot jump around from chapter-to-chapter to pick what you need. I would prefer a just-in-time piecemeal approach.

Beginning iOS 6 Development (Apress, Jan 2013)

This book is written more simply than Big Nerd Ranch. I ran through the first few chapters and finally understood the workflow of using XCode to create the UI by linking buttons to actions and code. Understanding XCode was a major breakthrough for me. The first handful of chapters are useful because the examples are step-by-step and do not depend heavily on using code from previous examples.

Apple’s documentation (horrible)

Large swaths of Apple’s iOS documentation and example code is outdated. However, I slogged through some of the examples to help understand some of the components that are not discussed in the other 2 books.

Various web tutorials

As you would expect this day in age, there are tons of video tutorials on the web, YouTube and other content authors who blog about learning iOS on their own. These are often helpful. The problem with these tutorials is that many of them are for older versions of XCode and iOS. Working with iOS has apparently changed quite substantially over the years because the code samples can often look completely different from modern stuff. I’m sure the recent release of iOS 7 makes this truer than ever.

Stack Overflow

Whenever I run into  issues Stack Overflow has the answer 97% of the time. Long live SO!

Make a media player – http://www.codigator.com/tutorials/how-to-make-a-custom-ios-music-player/

Understanding the design of the Angular JS framework

Posted on by

AngularJS Logo

 

I’ve been trying to figure out Angular JS for a little while but I don’t have a deep understanding of software engineering patterns or practices. My theory is that I haven’t been able to figure out the framework because I don’t understand the theory behind Angular’s design. The documentation on the website is thorough yet written like an engineering manual. It uses a lot of CS jargon that will explode your brain into a million pieces.

Here are some resources that helped me understand the “why” of Angular.

Angular JS Directives

  • AngularJS directives and the computer science of JavaScript [Adobe]
  • a directive is a way to  provide some custom behavior HTML. Commonly at the element or attribute level
    • <mydirectivelement> <span mydirectivename="">.
  • Directives are like jQuery plugins – they are reusable UI components/widgets. Examples
    • autocomplete search box
    • dropdown menu
    • header toolbars
  • Directives can be used as building blocks to create a UI. Use directives liberally.
  • Separate your view code out using templateUrl instead of template inline if your HTML is going to be more than just a single line.
  • When creating an reusable component use an ‘isolate‘ scope so that the component will not read or modify data of the parent scope.
  • ‘isolate’ scope will isolate (verb) the component from others of the same type. Thus they will not share the same instance variables.
  • question… Do ‘isolate’ and ‘transclude’ contradict each other?
    • Answer: No. Isolate and Transclude are unrelated. Transclude allows you to have HTML within your directive that will be preserved rather than being blown away when Angular replaces the directive’s placeholder with the actual rendered template code.
    • Angular JS Transclusion Basics video tutorial [egghead.io]

The Angular  documentation for directives is incredibly hard to understand. I do have a CS degree and I don’t understand half the terminology in it. Probably because I did poorly in school but that’s a story for another day.

Angular Service vs Factory vs Provider?

  • Angular service or factory? [iffycan]
    • service and factory are convenience functions that result in a provider
  • Angular JS service vs factory vs provider [Stack Overflow]
    • service returns a function that you can use later
    • factory returns a value
    • provider is the base class of the above 2 convenience functions.
  • provider is configurable.
    • In jQuery terms it’s similar to how $.get() and $.post() are convenience functions to $.ajax(). $.ajax() can be configured to your exact specifications while the 2 subclasses are simpler to use.

Read Example Code

Angular Seed [github] is a very good starting point for your app. The Angular JS documentation website links to the source on github but the documentation does not push using the seed quite enough. I did not notice the Angular Seed for a long time while I was trying to understand how to use the framework .

Angular JS FoodMe [github] App by Igor Minar is a fully functioning Angular JS using best practices. This project is built off the Angular Seed. When you look at FoodMe and Angular Seed you will notice some commonalities. Studying FoodMe and Angular Seed together made things more salient for me.

Angular JS ToDo MVC [todomvc/github] has four variations of how Angular JS can be used to create a basic To-Do list application. I suggest looking at either the Architecture example or the Optimized example.

Interactive Fiction as Tutorial?

Posted on by

I don’t play interactive fiction but I was thinking about writing a tutorial-like website that could benefit from the

http://twinery.org/ – Nice HTML based IF builder.

http://inform7.com/ – Create Z-code IF games

https://code.google.com/p/parchment/ – Publish z-code IF games to the web

http://www.gimcrackd.com/etc/src/ – Build web-based IF

HP Photosmart C4480 incompatible print cartridge

Posted on by

Long-story short: Buy a new printer if you have this error.

My mother-in-law has an older color printer that she got with her iMac in 2009.

HP Photosmart C4480 says “incompatible print cartridge” on its screen and will not do anything at all. Nothing will resolve this problem permanently so don’t bother buying new cartridges (waste of $50) nor cleaning the printer contacts.

Here are some steps to force the printer out of that mode.

  1. Press X power at the same time
  2. Press BLUE, GREEN, GRAY
  3. Press BLUE until you see “INFORMATION MENU”
  4. Press OK
  5. Press Blue until you see “CHECKSUM FOR RELOCK DATA INPUT” (about 10 times)
  6. OK
  7. Press X until you exit all menus
  8. When prompted for aliement cancel it with X. It should bypass the error

This works for our printer for only as long as the printer is On. If you power the printer off you will have to follow the procedure again. At this point that means that this printer is worthless and we will need to buy a new one.

HP Forum

Development notes: HTML5-based mobile app

Posted on by

A few months ago the company I work for released, a search experienced tailored for tablet use. After the tablet version’s successful release I had the good fortune to be asked to create the mobile phone experience.

As a web developer accustomed to using server side templates and “traditional” web development (i.e. web MVC frameworks), this was my first foray into building a pure JavaScript single-page app. It turned out to be a long a hard-earned learning experience.

Luckily, the JavaScript web app development space has been exploding for the past few years. I think the rise of smartphones and native apps have been particularly powerful in driving the development of client-side web apps because users have come to expect more app-like experience. IMO it’s difficult to produce that feel with traditional web page-based navigation because of load times and page refreshes.

The project

It took an embarrassing amount of time to make the phone portion of the app — almost 5 months. I started work on the first prototype (first of three) in the middle of January 2013 and the app has just been released to iTunes and Google Play as of mid-June 2013. I would attribute about 6 weeks of throwaway work, 8 weeks full-time product development and another 6 weeks of part-time development for handling scope creep, bugs fixes, and native integration.

Prototype 1

The first prototype was difficult. We wanted to have a “card-like” experience where you would do a search and your results would be a series of decks of cards. Each category was a deck and each search result was a card. On your search you would see a single result (the top card of the first category). You would then swipe horizontally to change categories or vertically to see cards below.

Prototype 1

Prototype 1

The first prototype probably took almost 1 month to build and when I was done with it, it sucked. People didn’t really understand how to use it and the in-office response was luke warm. Problem was, it had no resemblance to the tablet app. The user experience wasn’t cohesive in tablet vs phone. We scrapped the whole thing. Looking back, we probably should have done more Photoshop prototyping for that one.

It sucked from a code perspective as well. I was working off a copy of existing code from the tablet version. The tablet  code itself was fine but I was trying to jerry-rig Backbone.js into the existing code because I wanted to learn Backbone. The result was a pile of puke.

Additionally, CSS animations became the bane of my existence.  I had no idea how hard it would be to coerce a web page into behaving similar to a native mobile app through CSS animations. CSS animations are a real brain drain and I still don’t fully understand how to use them. It’s still difficult and a hat-tip to the guy at forecast.io who appears to have a very good understanding of touch-handling and CSS transforms.

Prototype 2

After the luke warm response from Prototype 1 we went back to the drawing board and aimed for something that looked more like the tablet. The first iteration took maybe 2 days to slap together in a very basic way. We liked the results and moved forward.

izik_proto2

Prototype 2

Marionette re-write

After suffering through trying to jam Backbone into some existing JavaScript I came to the realization that, although the system was working it would be increasingly difficult to add new features. I was running into problems with my scattered code base and I really wanted to create nested views for my Backbone app but I couldn’t devise a reasonable way to manage subviews — Marionette stepped in to save the day.  Marionette provided the framework I needed to reasonably manage nested views without killing myself. It took a couple days of looking at Marionette tutorials until it finally clicked. Once I understood the framework I decided that the only reasonable thing for me to do would be a complete code rewrite. I threw out about 85% of the old code and started my Marionette app fresh. The few pieces I kept were a Backbone view that I knew would integrate well with Marionette and some convenience functions from the tablet code. After one full week of intense Marionette action I had full blow web app. Thankfully the time horizons for product were pretty loose while I was working on this app, it gave me a lot of time to learn some pretty important fundamentals to a client side MVC.

After the Marionette re-write everything fell in place afterwards. We did a few user testing sessions with people at Starbucks and around town. We got a lot of good honest feedback that changed the app UI considerably. We tacked on Local search, maps, news, and a bunch of other goodies.

iOS and Android Wrappers

To get a truly native feel on the tablet we had hired contractors to make us a native wrapper that would allow the app to slide in new windows and share pages via social media. They also did the phone version of the native wrapper. Let it be known that the browsers within a wrapper report all kinds of different numbers with regard to viewport size and ability to scroll smoothly. It took a while to nail the bugs but I think we got the app into a state where it looks pretty consistent across Web-iOS-Android.

Tools & Frameworks Used:

Easy build script

With the help of some of our superstar build engineers at the company I had an auto-compiling script that would roll up all of the assets into one huge file that included HTML, CSS, JS, and even images (base64-encoded).  All of the minified assets cram into about 600kB minified = 175kB gzipped. After the initial startup all network I/O is related to API calls and images. Pretty cool! The benefits of this build system can be similarly achieved with the bootstrap tools that I identified in a previous article.

jQuery Mobile: a minor mis-step

I initially used jQuery Mobile to organize my HTML into pages and use its CSS+animation routines to mimic smartphone styling. However, as the prototype grew and matured jQuery Mobile didn’t quite fit the needs of this project. jQuery Mobile didn’t fit for these reasons:

  • The goal was to support some pretty low-end Android devices I had to ditch the nice sliding animations.
  • I ended up styling 90% of the app with my own styles because we didn’t want to look too iPhone-y in the Android experience. (The app still has remnants of the iOS styling)
  • Given that I’m probably using about 10% of the library’s features it may not warrant its size of 140kB minimized + image sprites. Granted, I could use its package builder tool but then I’d have to figure out each feature that I’m using and test & test. blah.

Assuming I had more time I feel like I should have built something myself to copy the features that I’m using. The app looks and functions differently from the standard jQuery Mobile experience.

Alternatives to jQuery Mobile: I considered using jQT (formerly jQuery  Touch) for its animations but it seems like the project has gone stale and development and maintenance trailed off. Besides that, I couldn’t really figure out how to use it. Ratchet looks really sexy but it falls into the same problem as jQuery Mobile in that it looks too much like iOS.

Backbone.js + Marionette

I wrote a previous post a while ago about using Marionette & Backbone to lay the foundation for the Web App. All in all I am very satisfied with the combination and feel compelled to do another project with these libraries/frameworks.

Somebody left me a Facebook comment asking why I chose Marionette over the other popular JS frameworks like Angular or Ember.  In a nutshell, I chose Marionette because I already learned a little bit about Backbone and Marionette solved a lot of the problems I had with Backbone.

SwipeView + iScroll 4

SwipeView and iScroll 4 were essential in the app’s development. Although these libraries took some time for me to understand and wrestle with a few bugs the result is quite smooth. The code is easy-to-read so I was able to fix & tailor it to my needs readily. I donated $10 euros to thank the author of these libraries because there is no way I would have figured out any of this stuff so elegantly.

CoffeeScript

CoffeeScript made JavaScript feel more like Python which was fantastic for me. It took a while to get used to the lack of curly braces and semi-colons but once I figured out the CoffeeScript syntax everything has been smooth. It has been difficult writing vanilla JavaScript lately because of my numerous syntax errors.

Jade template language

Jade javascript templates have a kind of peculiar whitespace-dependent syntax but turns out to be pretty good. I guess it’s HAML for node? I like that I can use vanilla JS within the templates without much hassle. I find that the Jade templates are much easier to write than underscore.js templates (which are pretty difficult to write) or handlebars.js templates. Handlebars has kind of a quirky syntax and I like that when using Jade I don’t have to worry about balancing my HTML tags.

Stylus CSS

Not much to say about Stylus. It’s like LESS or SASS and gets installed through npm packages.

Get Izik for your smartphone today!

Izik for iOS (Universal app)

Izik for Android (Universal app)