RoxorRescue for Disaster Search & Rescue

Graduating from the Mobile Web Specialist nanodegree program gave me the confidence to enter my first hackathon. The IBM Call for Code hackathon started at least two months before I heard about it so I’m only going to get a few evenings and weekend chunks of time in the now two weeks before the deadline but … I’m loving the project I’m working on.

Idea #1 would have required months of research and whatnot but it’s possible I could finish this (to some extent) in time to submit it.

RoxorRescue is an offline-first progressive web app using PouchDB and CouchDB. Submissions have to use IBM Cloud tools so I’ll be using Cloudant (for the CouchDB bit) among other products.

Here’s a concept for the GUI I made in Photoshop along with the current state of affairs.

Woo.png

It’s meant to be used on a mobile device and when I tested it there I was elated that the photo bit finally worked but …

notWoo.jpg

… a couple things stuck out … not the least of which was the inaccessible “Take Photo” button.

Post-hackathon, I’ll be welcoming any and all contributors during Hacktoberfest and beyond.

Advertisements

How to Make a Web Site & App Part 1

Getting a Host

Two pieces of strong advice

  • Don’t use free hosting
  • Don’t overpay

With free hosting, you’ll have ads on your page and you won’t have essential things you need. I’m showing two outstanding hosts — neither of which pays me — that are super cheap and give you tons. Do not use GoDaddy (too much money for too little product), FourSquare, Wippet, Blobbix, or whatever those things are called.

Arvixe is the place I use. I came within a single breath of switching to A2 recently but didn’t.

Things they have in common that you must demand from any host:

  • Unlimited storage
  • Multiple/unlimited websites
  • cPanel (there are other control panels but I think cPanel is, hands-down, the best)
  • Unlimited subdomains, FTP accounts, email addresses (there are actually places that charge you to have any and some who charge for more than a few). Never, ever pay for these things. Ever.
  • PHPMyAdmin

Other things these guys have or support that others don’t:

  • Python
  • Node (definitely A2 and, I think, Arvixe)
  • Ruby on Rails
  • Reasonably up-to-date PHP, etc.

You are, after all, trying to become a developer.

About Arvixe

THE GOOD

Cheap at $3.20/month (if you pay annually — a couple bucks more if you pay month-to-month) for multiple websites and … AND … a free domain for life with purchase of any hosting plan. I think that’s pretty darn cool. So you can get started with your little web business for under $6 right now.

They had PDFtk — the cornerstone of my new product — installed already. I almost switched to A2 because Arvixe’s support people said they didn’t have node and I thought that if they didn’t have a huge thing like node, there’s no way they’re going to have PDFtk.

As it turns out, they have both available for shared hosting.

Unlimited databases even with their cheapest plan.

arvixe.png

THE BAD

  • They don’t have phone support like my old host did.
  • Their documentation is far from the best and their replies to comments aren’t helpful.
  • Their chat-based support staff take forever between Q&A … like they take walks afk while chatting with you
  • They’re support appears to be based overseas. Okay, fine, they’re hard to communicate with, okay? English is obviously not their first language … geez, you gotta make me say that shizzle?

About A2

A2 is what we from Ann Arbor, Michigan call Ann Arbor, Michigan. I remember thinking, “How cool would it be if A2 stood for Ann Arbor?” and, as it turns out …

a2_03.png

Their cheapest plan is a few cents more than Arvixe’s cheapest plan but their next level up is a few cents cheaper than Arvixe’s next level up.

THE GOOD

  • Node — rare and cheap considering it’s rarity
  • Pick your version of Python and/or PHP — trust me, that’s cool
  • Support # right there at the top of the home page
  • Chat support – quick to answer and they’re in Michigan, USA
  • 24/7 support

THE BAD

  • Limiting subdomains based on price is skeezy
  • So is limiting databases but not as skeezy as limiting subdomains
  • Maybe I’m spoiled and entitled but limiting email addresses is kinda skeezy
  • They wouldn’t install PDFtk if I switched to them. Maybe I’m being petty but typing “sudo apt-get install pdftk” (less than the most concise tweet) to get someone’s business for life seems like a small thing to ask. Sales told me that if I could find three other hosts that included it, they’d consider including it. I responded that I could only find three (this was before I found out Arvixe did) but, more importantly, I found oodles of people looking for hosts that included it. Regardless, like the Wizard who gave Dorothy & Company a bait-and-switch, they responded to my three hosts with the answer, “No.”

THE IMPORTANT

  • Their support staff — I had many long conversations with them while only thinking about becoming a customer and they were always patient and helpful.
  • If you’re getting their Swift plan (cheap!) the stuff you wouldn’t get with Lite is irrelevant.

Conclusion and Summary

Whoever you choose, make sure it’s someplace with a control panel, file manager, etc. — you don’t want to use templates or some “website builder.” You can get everything you want and need for fun, learning, and profit for the price of a latte a month.

Sherwood, Ohio

wynona.png
“You’re so well-read and interesting, Jay. I wish you were my boyfriend.” – Winona Ryder

Yesterday, while watching Heathers and wishing there were legal copies of Pump Up the Volume to be found, I thought (about the fifth time Christian Slater mentioned it), “Isn’t Sherwood, Ohio a book I read in college?”

Google told me, “No, that was Winesburg, Ohio by Sherwood Anderson.”

“You should, however,” Google continued, “check out the website for Sherwood, Ohio–it’s a hoot.”

SherwoodPage.png
I can’t tell you how much I love websites like this.

Two things caught my attention. I can’t tell you how much I love the (highlighted in red!), “Free video! Watch it!” for so many reasons. So many. Here’s the page it links to:

HomeTownVideo.png
Don’t bother. The page is more amusing than the video.

Of course I had to visit Bobbybee.Com …

BobbyBee.png
I’d pay $3.95/month just for the irresistible, huge grin this gives me.

No, wait …

bobbybeedesign.png
Alumnus of the Drudge Report Web Design Bootcamp

Just because …

bobbybeemaintain.png

Part of me wonders if it’s all meant ironically but the rest of me doesn’t want to know.

Positive Feedback

—It is amazing how refreshing, invigorating, healing, and downright life-changing some kind words can be.

I get told often enough at my day job that I do great work but I think a monkey could do my day job so compliments there just make me feel bad about myself. I have a good work ethic and take pride in my work but I can’t say I’ve done much I’m proud of in the last 8 years. That’s why I’m on my current path (“escape route”).

Two nights ago, after I gave a presentation at Code for Tampa Bay, a couple people gave me compliments on the presentation and the web site and/or thanked me. I can’t even express the positive impact it had on my morale and self- … stuff. Then, this morning, this happened:

Meetup comment saying I did a great job on the web site
I know their name is publicly available but why tempt trolls?

This all made me so happy I finally decided to put up a screenshot of a page I did at work. I’ll explain why I’m so proud of it after.

newAUredacted.png
We’re focusing on the main body content—the gray boxes.

This is a page from our local pile of Taleo Learn (which has been down for two days, BTW) owned by Oracle. According to what I infer from something eLearning Guru Craig Weiss told me (again, this is my opinion, not his statement), I was correct in my first impression that it isn’t really an LMS, it’s an HCM app we’re trying to use as an LMS.

A tweet from Craig Weiss thanking everyone for naming him number one most influential in corporate elearning

What makes me proud of the above page is that despite multiple obstacles, I was able to use everything I’d recently learned about the box model and block properties to make something that is, IMHO, pretty decent looking. Learn CSS Layout is the source that finally made CSS layout make sense to me. I was afraid Jon Duckett‘s HTML and CSS: Design and Build Websites looked too “basic” for me (comparing it to his mind-bending, multiverse opening JavaScript & jQuery book) but it provided even more clarity and understanding.

One obstacle is that even those of us with relatively elevated privileges are forbidden to edit any CSS. Next thought was to embed the styles in the <head> but as with many CMS-type systems, editing a “page” doesn’t mean you have access to the <head> so I had to do all of my styling … yes, you already know what I’m going to say … inline.

I mention Taleo Learn is a steaming pile because one of the things it delights in is changing any code you type in the HTML editor for pages such as the above. It not only chews up code by changing it but, sometimes, just deletes chunks of it to prove it’s the one in charge. Also, it doesn’t support HTML5 and other rather standard web design tools, practices, etc.

Because Learn’s HTML editor is so cruel and vicious, I used Dreamweaver (so I could save my code and just copy & paste it). What looked fine in Dreamweaver and/or when tested in the browser, however, looked significantly different in Taleo Learn’s Bizarro World. After some effort and tweaking (I learned you can use negative margins!), it turned out pretty good, I thought. Certainly better than most of the pages we have which are nothing more than paragraphs, bullet points, and the occasional header image as pictured (which I did not make, BTW).

Even if you think it’s ugly, I was able to arrange, place, and space everything nicely because of what I’ve learned and I am unashamed.

The SharePoint peeps at my organization create some pretty sweet intranet pages for other departments and groups but, for whatever reason, they don’t let me play their reindeer games so I made do with what I had for this next page which is merely some hyperlinked images in a table created from still frames in the videos they link to. I haven’t mentioned how ridiculously convoluted the processes are in Taleo Learn for uploading files (images, PDFs, videos) and linking to them, have I?

GrandRoundsPageRedacted.png
Better than a list of text links like most of our pages.

Note: I used the handy-dandy, Export Frame button in Premiere.

It’s Always Your Fault

fault.png
Robin Williams teaching Computer Science.

I reminded my students of this all the time. Often, right after they–or a second pair of eyes–found their mistake. It’s never the computer. It’s not the Internet and it’s not even your code: your code is probably working just fine but here’s two truths about code:

  • It does what you tell it to
  • It doesn’t do anything else

If a buttload of your text is bold and red when you only wanted one word bold and red, you forgot to tell the page to stop making things bold and red. The code did what you told it to–start making text bold and red. The code doesn’t do anything you haven’t told it to do–stop making text bold and red.

Maybe you did write that code–change an image using getElementById, for example. So why isn’t it working? You probably misspelled something or forgot a semicolon, comma, parenthesis, or any number of things.

It’s your fault. It’s not the browser, the computer, the Internet, Verizon, or your host/server. It’s okay to blame Verizon anyway, as long as you know in your heart that it’s your fault and you need to find where you screwed up.

  • What did you tell the app/page to do?
  • What did you neglect to tell the app/page to do?

If those two factors are hunky-dory, find your spelling mistake.

It’s always your fault.

Detailing My Dreams

I love the app pictured in the image below.

In Boston, tracking data to score government progress

I often read advice advising job-seekers to list what they want in a workplace and position including deal-breakers both positive and negative.

For much of my career, I felt such lists were pipe-dreams. I would accept any offer from whoever was willing to hire me. Employers who valued their people and co-workers who cared about what they did seemed like things other people had within their reach–but not me. More often than not, even when I thought I wasn’t settling, I ended up disappointed.

This time, however, I have a confidence and vision I’ve never had before. Not only do I have talent, skills, and many years of experience & education on my side, but I’m learning a ton more every day. I am very, very protective of this bag of tricks. Like a young maiden, I’ve sworn to myself I will not give it all up to some lame-o or charmer in some job interview during which I reek of desperation and naivete.

What I Want to Create

My career started, skyrocketed, rebooted and reenergized whenever I was doing something I loved on my own and then found a place that would pay me for it–they valued my purity. Circumstances sometimes changed and other suitors didn’t value this maiden’s purity. Those pimps used my skills to make junk.

There’s nothing wrong with making web apps in a responsive site. I can make a responsive site but sites are made to be responsive because customers use a variety of devices chosen and used for the user’s convenience. I’m not saying responsive sites and mobile apps are designed for the lowest common denominator–I’m saying that I want the freedom to make uncompromising beautiful, awesome, easily used and amazingly effective apps without having to take any of that into consideration.

See the giant screen in that image at the top? That’s the environment for which I want to design. Well, not really. That’s what I’ll settle for in the time being. This is what I really want to create:

want.png

Not on that scale–that’s probably multiple, separate apps but that’s definitely what I would want to work in. I much prefer my large screen iMac to my laptop. The Boston app and what Banner is using below is, realistically, what I want to make.

avengers_ruffalo.png

My Promise Ring

I can wait. I won’t look for this job. The right organization will be looking and they’ll find me. The longer I wait, the more skills and knowledge I’ll have for the right person. The more ready I’ll be when the right person comes a-courting.

Currently …

The stuff I’m making now in my personal sandbox and on a volunteer basis are … no boundaries. I want perfect. I want awesome and excellent. I don’t mind taking my time. I want clients who want the best, not what consumers will pay them for. Something the customer–whoever that is–wants and needs.

Backwards-compatibility, legacy browsers, etc. are not something I ever want to think about.

I’m still bitter about Steve Jobs killing Flash but I loved that when he felt you shouldn’t be using floppy disks anymore, he didn’t let you use them anymore. When he felt optical drives were only holding us back, he didn’t let you have those either.

I’m not even looking for innovation like that. I just want to do the best that’s possible right now with the tools available. Most people don’t even want that and those are the people I’m leaving behind like old floppy disks.

All About Favicons & Such

Finally finishing a trio of tutorials I started months ago and just uploaded this PDF:

Give Your Site Some Yummy Favicon Goodness

Soon, I’ll write a post about the pros and cons of how various browsers handle Favorites/Bookmarks. For now, I’ll just highlight each browser’s Favorites/Bookmarks bar — a focus of discussion in the Favicon tutorial. It’s a tiny matter, really, but I believe little things count when it comes to User Experience, User Interface, etc.

I may say something akin to, “Browser X doesn’t have this feature” and some of you might quickly think, “Yes it does” but the point of my statement is twofold:

  • I shouldn’t have to look for it
  • If I look for a setting, it should be easy to find

Those are the two commandments of UX/UI as far as I am concerned. If I can’t find or use a feature/setting, it may as well not exist.

examples.png
Figure 1: Favorites Bar in Internet Explorer for Windows

A major advantage of Favicons is potential for optimized real estate on the Bar. By default, the bar includes both the site icon (favicon) and site name. Each browser has its own method for changing this.

Internet Explorer

Right-click a favorite in the Favorites Bar and choose Customize title widths > Icons only. Nice & clear, I must say.

Downside, IMHO, is it changes it for all of them. Ideally, we could change individual Favorites for a couple reasons:

  • Easily recognizable and rememberable (next year’s Word of the Year, I guarantee it) don’t need to show the site name while ugly, vague, generic favicons do.
  • Sites without favicons sharing the same generic icon provided by IE (or any given browser) need to show the name.
  • Multiple Favorites from the same site (a dozen favorites from Adobe.com, for example) need some descriptive text.

Pros

  • Tooltip shows favorite Name (which you can edit via right-click > Properties > General), page Title (which you can’t), and URL so you have even more freedom to use Icons only.
  • Icons only applies just to the bar, not to items in the menu (Figure 1)
  • IE rawks alone among all browsers by allowing you to change the icon (right-click > Properties > Web Document)! Yet another reason for Icons only. Win for IE.

Con

  • Icons only also applies to folders so how many I create is limited by my capacity to remember their names and which folder is which. The tooltip shows it, but that’s a huge inconvenience because, you know, I’m a white, male, American.

 FireFox

FireFoxMac.png
Figure 2: Firefox for Mac

Right-click a bookmark in the Bookmarks Bar, choose Properties, and delete contents of the Name field.

Pro: Above method is for each, individual favorite so I can have some with the name (Weather.com in Figure 2) and some without (Apple.com in Figure 2).

Opera

OperaMac.png
Figure 3: Opera for Mac

Rt-click > Edit and delete Name.

Pro: Super-convenient Add to bookmarks bar button. Win for Opera.

Chrome

ChromeMac.png
Figure 4: Chrome for Mac

Rt-click > Edit and delete Name.

Con: Also removes Name from menu. Lose for Chrome.

SeaMonkey

SeaMonkey.png
Figure 5: SeaMonkey for Mac

Rt-click > Properties and delete name.

Cons

  • Also deletes name in tooltip. If I have the name showing, I don’t need the tooltip but if I don’t have the name showing, I need the tooltip. Lose for SeaMonkey.
  • Ugliest generic icon.

Vivaldi

Convoluted mess I won’t dignify with a description. Lose for Vivaldi.

Tor

TorMac.jpg
Figure 6: Tor for Mac

Doesn’t seem to grab favicons or even have a generic icon so everything else is moot. Lose for Tor.