Open-Source Gone Bad

Leave a reply

I stand by (and blog on) open-source languages. They’re customizable yet robust and come with an extensive library of public documentation. More often than not, a quick Google search can help you get through that epic wall you’ve been bashing for hours. Feeling innovative? You can always see the “what if” attempts made by other programmers across the web. This open collaboration is key to pushing the envelop and finding new means of development. Sounds so lovely, right? Well, I’m feeling obligated to note the downside due to the nuances battled in a recent project.

Here’s the thing with open source — You’re making yourself wide open to dealing with inconsistencies and, even worse, blatantly incorrect code. Logic, though primarily 0/1 or TRUE/FALSE, can easily conform to a programmer’s style. There may be one right answer, but many ways of getting there. That said, you may have immediate access to great code and ideas, but you’re likely to spend some time getting that programmer’s style to conform to your own within your projects. Oh, and the whole “this isn’t even right” portion of this example.

I downloaded a new installation of CakePHP and found some great Bootstrap/ACL plugins and helpers to get the site to be super responsive and equally secure. Yet, I kept hitting walls with some of my forms; they would not validate properly despite using the same code as in other, working projects. Let the debugging begin.

Hours later, I realize the issue derives from the improperly formatted parameters in an example created by the plugin developer. ::sigh:: So much time assuming it’s a database or structural issue. Nope! Just a simple inclusion that hoses the entire functionality. Moments like that are a key reminder that open source has its fair share of nuances and disadvantages. Be sure to always weigh the pros and cons of a priced solution, as time can quickly cost more than an upfront payment.

Mid-project realization: double-check all browser validation capabilities before destroying the validation in your project. More browsers are intervening with front-end validation (HTML5) so be sure to add the “novalidate” parameter to your forms to maintain your own error message:

<form method="post" action="/foo" novalidate>

Otherwise, you will see a generic alert with browser-oriented colors and text. Still debating if I appreciate this feature or not. Front-end validation = good. Browser-controlled styling and text = not so hot. Baby steps.

Happy coding!

Breaking Development Conference in Nashville – MY PEOPLE.

Leave a reply

Day 2 of the Breaking Development conference is officially over (okay, I’m technically into day 3). My brain is mush; I can’t form a cohesive thought due to excitement; and I’ve been kicking myself to decompress my head by jotting down more notes. Yet, my note-taking process throughout the conference fails to drown out the newfound realization of how AMAZING it is to be in a room full of motivated, passionate people. All of whom like what I like! It’s almost like a twisted joke; I meet all these amazing, wonderful folks and they leave 48 hours later. Womp womp.

But it’s okay! I am more thankful to have been given the chance to be pick so many brains, ask so many questions, and witness so many moments of contagious excitement due to the shared passion for this stuff. It truly is that cliche moment when you think “this is where I belong” while feeling completely comfortable in a room full of strangers. Plus, these strangers were cool enough to leave their devices for a mind-numbing, separation-anxiety-forming 35 minutes to snap pics like this:

</mushy stuff>

The presentation lineup, though a tad overwhelming in a good way, had such a nice flow despite the rather wide variety of topics. I know the common theme was responsive design and making mobile web suck less, but I really enjoyed the dev moments brought forth by Dave Olsen and Daniel Ryan. Even getting a short glimpse of the world behind Etsy (Lacy Rhoades) was exciting for me. I know that’s mainly due to my own stance in the web production spectrum, but the placement of the presenters mimicked the usual back and forth process between front and back-end development/design.

Code aside, some presentations transcended the whole realm of web dev all together e.g. Aaron Gustafson’s “Designing with Empathy.” His presentation rightfully leaned towards the web experience, but I couldn’t help but appreciate the Golden Rule references and spiritual/Buddhist mindsets as reminders to just be a decent person to one another. Yes, we are worried about pleasing our clients, but can’t we just treat everyone with that same respect? Always? We may build a significantly better product just by giving two shits about the person for whom it is intended. CRAZY thought, I know, but it just might work. Okay okay, I’ll admit to laughing my ass off at the classic, client stereotypes wonderfully depicted by Phil Hawksworth and Matt Griffin, but it’s only necessary at a conference like this. We have to be able to vent for sanity, right? Plus, it’s the harsh but necessary reminders that perhaps we’re not doing a good enough job of communicating with our clients. We get caught up in the functionality when only we understand what’s going on in that department. I know I definitely benefitted from hearing some of the suggestions and tactics for client interactions. Gotta get outside the cave sometime.

In between those were the more hands-on presentations by Brad Frost and Stephen Hay. Brad enlightened us with his latest testing/production tools while Stephen bravely demo’d (gotta give the guy credit) the wonders of CSS Flexbox with proper warnings of its pending browser support. From there, it was back to the creation process with Ben Callahan pushing the prototyping tools and hints alongside Jason Grigsby’s “mobile first” perspective. We eventually hit that point where “hey, that website MAY need a purpose,” which is exactly when Steph Hay hit the stage. Her presentation stood out a lot for me as I think the content creation process if one of my weaker points within my own processes. Yet, if done correctly, content can (and should) be the scaffolding for the entire project. I look forward to absorbing more in her workshop tomorrow (today; ugh I should sleep) and hopefully I’ll be a good girl and write it down, too. Likewise for James Williamson’s “Working with Icon Fonts.” I felt as though I was running into a completely new wall that wasn’t even on my radar. Here I am thinking of my png trials and discoveries while making stack-dog.com and yet I never even considered the SVG renderings discussed in his presentation. Once again, my workshop choice is made due to my complete ignorance regarding the topic haha so I’ll be seeing him tomorrow, too.

The last two, Luke Wroblewski and Josh Clark, were presentations that made you sit back in awe. Luke had a rather epic tendency to keep pushing the possibility. We’d see a concept we know and love, but he’d push it to the next step right in front of us. Constantly asking the “why” to each function and design. I think this is the kind of presentation I need to print out by desk because I’m such a creature of habit. So rarely do I sit back and question my crazy user antics when a short, 30 second video of myself using wonky websites would make me facepalm. We need to keep questioning why we create things the way we do and if they’re truly targeting the end goal or needs. From there, Josh Clark shoved our brains beyond any point of return with his glimpse into the future. He highlighted the concept of using sensors and having random objects push data to us without any interaction. I never thought I’d learn about the fact that cows can now text farmers when they are in heat. Or that I can monitor a heart valve by transmitting the signals through my finger. Crazy, crazy shit that is here right now! All of it is a huge reminder that we have a lot of amazing technologies, but we are losing the imagination to play with them in whatever manner possible. Just start tinkering and testing; push the limits of what we think is possible by simply trying. By the end of his talk, I was ready to run outta the room and just DO something. He’d likely produce a great propaganda film; I’m glad he uses his powers for good.

So yes. The presentations rocked. I know this for fact because my small dinner group continued to talk about it all for hours afterwards. Definitely a wildfire tendency going on in our heads. I joked with the speakers by saying that I’ve officially peaked at this conference and that perhaps no other conference will burn my brain quite like this. I hope that’s not the case, as I’ll definitely look forward to attending more. Either way, I’m thrilled to have been a part of it all and can now take this souvenir of rejuvenation, new ideas, and a beefed up friend list home with me. Till next year!

Happy coding!

Stop it, IE, just stop…

Leave a reply

“Internet Explorer: The number one browser for downloading another browser”

I was nonchalantly scrolling my news app today when I came across this lovely tidbit: “Users report that Google fails to render correctly in IE11 on Windows 8.1”

Seriously?! Google?! I’m used to the normal IE antics; the png hatred, the different pixel renderings, the over-the-top session/cookie settings, the hundreds of CSS conflicts, etc. etc.

But GOOGLE!? Now it can’t even Google right!? I couldn’t help but laugh before wincing at the thought of the inevitable walls I’ll hit in the future. I then used a [totally fine, Chrome-based] Google search to pull up many more fun articles. Apparently IE11 is hating on the Exchange Server OWA, too! Isn’t THAT entertaining. What’s cute is how positive each article becomes by the end, as they all conclude with a work-around or some half-assed fix. Isn’t that just the nature of IE? “Now, we know this is pretty annoying, but we’ve made a walk-through on how to fix it!” Sure, I’ll just add that to the extra CSS files I have to toy with for multiple, inconsistent versions of IE. THANKS!

Before this becomes a full-on IE bash fest, I’ll make note that I do understand a lot of reasoning behind some of our favorite IE nuances. The folks at Microsoft are trying very hard to be secure and locked down. I do enjoy a company that tries hard to keep my info from others, but not when it seriously sacrifices the usability of the product itself. This post is reminding me to log all of my known IE work-arounds to date since I so often have to recall them. I guess the ultimate security is NOBODY USING IT AT ALL, but I’ll go on a limb and say that’s not the ideal case.

So the browser wars will rage on with the new IE in town, but I’m not so sure the punches will be aimed at the blue corner too soon. The good news is that IE use is still rather low, but there are many browser stat sites that can claim that IE is still king of desktop and mobile combined. (I’ll go ahead and argue that these stat sites are backed by Microsoft itself). You know you need to up your game when you feel obligated to make a site like this: The Browser You Loved to Hate

Please note the ‘d’ is grey on the actual site; this tells me they know better than to make it past tense. Oh, and I wanna remind everyone of their huge ad campaigns that were featured on TV and…MOVIES THEATERS!? ::cough DESPERATE cough::

I digress.

I honestly hope that someday Microsoft can come flying out the gate with a super successful version of IE. Gotta keep the browser wars full of competition and one-uppers. For now, I’ll keep an eye on Chrome vs. Firefox and enjoy the new jabs from Safari.

Happy coding!

Time to Network

Leave a reply

The site is live, analytics are churning, Facebook page is created, Twitter is ignored (for now; haters gonna hate), LinkedIn is updated, and my own, sweet mother is promoting me. Someone knows somebody who knows a guy who needs a website, right?!

If not, I’m slowly learning to get myself in people’s faces to help strengthen that weak tie and secure the project. I have a tendency to assume I’m being annoying the second I try to pitch anything so looks like I’ll need some salesmanship improvements. Fortunately, I’m highly motivated by visible finish lines. One in particular is Facebook’s ‘Like’ goals on Pages. Turns out I need to rack up at least 30 ‘Likes’ to get analytics/detailed info on Page activity. Thanks, Facebook, for giving me a reason to spam my friends with requests! I can do 30 and not feel like a schmooze. I think.

Time will tell, but hopefully these initial pushes will cause people to think Stack Dog when someone brings up a website project. Somewhat like how most NY-based friends think of me when they see a Steeler logo. Is it too late to change the name to Steel Dog? Meh. If not website, maybe people will know where to find pics of a cute dog :)

Oh well..I’ll stick to building the bare minimums while I stare at the latest analytics graphs. Dangerously addicting. Till next time, folks! (Oh, and sorry if I continue to push you to ‘Like’ things; this too shall pass [as soon as you comply]).

Holy Fuzzy PNGs, Batman!

Leave a reply

I launched my site today despite a few known discrepancies/annoyances in my mind. My excitement got the best of me and I am trying hard to curb my perfectionist side for fear of never debuting my work. Now, I managed to look past some of the mobile jQuery misfires and the not-exactly-perfect alignments here and there, but one thing got me for sure — fuzzy graphics.

I’m by no means a full-time designer (if even worthy of the label at all), but I can recognize a great design or a sharp look when I see it. I thought my savvy “save for web & devices” option alongside my measly meta tag smoothings would save me from an abysmal image rendering. Nope. Each image sat there in need of a nice haircut. What gives?

Anti-aliasing.

Anti-aliasing, or spelled antialiasing, is basically a software technique used to prevent “jaggies” or stair-like edges on lines that should be smooth. Rough edges usually occur due to the image being too high of a resolution for the output device/monitor. So, anti-aliasing simply combats these jaggies by filling in the voids with grey or similar colors. Sounds awesome, right? Not until it happens when your device CAN handle the image as is.

I toyed around with the settings for a bit. Tried jpgs instead and other various extensions. I considered increasing the resolution settings, but I don’t want to overload my website with heavy images for the sake of this silly fuzziness. So, I scour the internet for some answers.

This article helped a bit and I don’t care if it’s old.

I tried option 2 and doubled my images in Photoshop before shrinking them back down with the ‘width’ attribute within the <img> tag. It seemed like the simplest solution without much increase in file sizes. Reload some pages and voila! Crispy images!

Now, I did notice that IE had to ruin the day and come to the party with jaggies, but I think I can live with that for now.

I’ll treat it as proper punishment for those who use that lovely, lovely browser. I’m content for now :)

Happy coding!

Stack Dog Solutions Goes Live!

Leave a reply

Hooray! Stack Dog is live and well!

Not sure why I pushed today, but I did. Glad to have it out there for immediate critiques and bug-catching fun. I still need to tweak this blog a bit and double-check many mobile features. I know a few things are a tad buggy still, but the vast majority is the way I like it.

Anyways, feel free to write any comments or suggestions. Or simply refer your friends in need to the site! I’m up for some new projects :)

Mariusz says hi!

Mobile Videos and Button Interaction

Leave a reply

I recently worked on a project in which I was asked to bring mobile users to a webpage with a video, play the video, and then immediately display buttons/options the moment the video ends. A lot of this sound simple from a normal web perspective, but I forgot the implications of embedded video interactions from a mobile standpoint. Not to mention iOS standards as well.

To start, iOS ended its autoplay video capabilities due to “unsolicited downloads over cellular networks at the user’s expense” so we cannot simply force users to start watching our videos.

Darn ;)

So that’s fine; I’ll just skip the autoplay and move towards post-video buttons. Should be easy, right? Wellllll turns out it’s not so straight-forward. My first idea was to just use YouTube’s extensive video-editing capabilities. Hard to think I can make things work if YouTube can’t! Now, YouTube has a pretty thorough verification process (and rightfully so!). After a proper YouTube verification, you can start linking your YouTube videos to your external sites. But first, you need to add the “Associated Website” to your Google Webmaster account. Only then will that website show in the “External Annotations” portion of YouTube’s Channel Settings (under Video Manager or Settings). Hooray! Now you can add labels/speech bubbles/boxes to your YouTube videos as you wish and link them to your personal website. Everything is going as planned!

::screeeeech::

Found deep within YouTube’s support site: “Annotations do not appear on custom YouTube chromeless players, or on mobile, tablet and TV devices.”

Great. All of that and you won’t see the buttons on mobile devices. Hmmmm.

I tried Vimeo as well due to their settings that allow for you to select an action after a video ends. One of which happens to be a linking option, but once again it cannot work on mobile devices. This makes sense, too, as tapping videos most often causes a pause or play effect. A button would conflict with that listener and ruin the simply usability.

So what can you do? Oh I know. You can scrape the video and force a modal box! Thanks, HTML5 and jQuery!

Good guy HTML5 has the lovely <video> tag, which pairs nicely with jQuery for many callback options! I was barking up so many coding trees when all I needed was the following:

$("video").bind("ended", function() { //callback when video ends $('#vid_container').remove(); //remove the div containing the <video> tag to rip the native video player down from view $('#myModal').modal('show'); //show modal (I used Bootstrap here) });

Tada! Now a user initiates the video, the video ends, and immediately a modal box full of options appears. You don’t have to wait for your users to hit “Done” at the end of the video to view the options. Plus, it works on all major mobile browsers (I found friends with Droid phones; we all know Apple is more fussy here). Now, “what if they don’t watch the whole video?” you ask? That’s fine. The content will only be removed after the “ended” callback is called so they will still see the video landing page if they don’t follow the rules. I can always code some more listeners for such behavior. “Uh oh, what if they want to watch it again or they ignore the modal box options?” Great question! I decided to rig the modal box to reload the video page upon being ‘hidden’ so that the video will be back in place. Be sure to check the callback options in your chosen modal library to see if you can tell when a user has closed or hidden the modal box. I realize users can sometimes click outside the modal box or accidentally close it so it’s good to have a backup plan just in case!

So again, my initial project goals seemed easy from a desktop browser perspective, but it’s important to know the rules of mobile web. You may jump through some hoops or see some dead ends, but there are more than enough resources to come up with some creative work-arounds :)

Happy coding!

DNS Inconsistencies – Joy!

Leave a reply

Nothing pleases me like a broken website when all the code and connections are correct. That said, DNS changes are almost always my favorite tasks! ::cough:: To make it even more fun, I’m used to dealing with a stack of servers and network walls, which introduces so much caching fun. But remember, it’s most important to BE PATIENT with DNS. I’m so quick to assume I may have missed a step, but a few hours will likely prove that I’m just incapable of seeing a blank screen for more than 5 seconds.

Helpful resources —

A quick DNS tracing tool is: http://www.simpledns.com/

A more thorough and rather sensitive version is: http://dnscheck.pingdom.com/

Or, use “dig” in terminal e.g. “dig domainname.com” for NS/Server/IP details

…and chill out for a second :)

Searching for clear understanding? Blog about it!

Leave a reply

Finally! I’ve bitten the bullet and made a respectable (in my opinion) web presence for myself aside from my post-college, name-based websites in the past. Not only do I have a website to gladly hand off to potential clients, but I plan to build an issues archive for myself in the form of the site’s blog. Now, I am notoriously terrible at documentation and/or journal entries of any sorts. I rarely make lists; I don’t like diaries; and I like to move on to the next problem as fast as possible. Though, I’m starting to notice the times in which I encounter a problem that I’m quite sure I’ve tackled in the past. A little deja vu in a workday. Suddenly my “make the best of your time and push forward” side has a conflict of interests. Turns out it could be more efficient to mark down a learned lesson than to hope it looks familiar later down the road. Plus, like Oppenheimer said, the best way to learn is to teach it!

Or…at least tell about it in a blog. Perfect!

So, I hope this is the first of many posts to come. I may kick and scream the first few, but I think it’ll turn into nice, brain exercises to help me better absorb any processes I overcome.

As much as I love to say, “I have NO idea how this code works but DON’T TOUCH IT!”, I think it’s best to start understanding each step with a little added effort in writing it all down. My younger developer self is cringing at my maturity and putting money on 10 or fewer posts.

Just another reason to keep at it :)

Happy coding!