Comments On Code

Nov 17, 2016

Teamwork, or How a Contrarian can be a Team Player

I am, and I think my parents would agree, always have been a contrarian. I am innately suspicious of anything that is popular, and will not adopt a popular idea, tool, or method, until I have thought it through on its own merits. That is not to say that I won't use those things, but I will usually have my own reasons for doing so which are often not the usual or popular reasons.

It shouldn't be surprising, then, that I prefer third parties over the popular two parties. In advance of the 2016 election, I became more fervent in supporting my third party option, in view of the inadequate choices that the popular parties presented as candidates. Having a useful skillset, a small grassroots group asked if I would be willing to give them a hand on some pressing projects.

Over the course of 72 hours, we put up two separate websites -- one that would become a landing page for a grassroots ad campaign; the other would have a more permanent life going forward. I drove the overall design and front end choices, while another member had the server resources and back end development. Other members developed the content.

It was refreshing to have the opportunity to work as a team toward a common goal. Even as a contrarian, I enjoy group dynamics. I relish listening to other people's feedback, incorporating justified edits while making a rare case for a design decision, such as accessibility. A few times, someone pointed out a problem that I had also noticed, but put on the back burner while addressing bigger issues. Even just having someone else's attention to the problem, would trigger a more workable solution than what I'd thought through on my own.

As an independent entrepreneur, my clients and I also work together as a team. But it is a different relationship when you are working with a group that has a certain level of technical acuity. While our candidate did not achieve popular success, our efforts made a demonstrable difference in driving web traffic toward our candidate. Over the entire country, our party's vote total was the highest in its history, and in my state (in which two of our tiny grassroots group reside) the vote more than doubled.

The election forms not the end of our team, but a solid beginning toward growing an active base, combining our multiple skills, creative energy and passion toward education and community involvement.

Jan 27, 2016

The Joy of Troubleshooting

Troubleshooting code is one of my favorite things. No, really! I find great pleasure in taking something broken and making it work again. I am challenged to employ my personality traits of dog-headed persistance, logical analysis and puzzle-solving ability. Of course, with any worthy endeavor, there are frustrations. But, the exhilaration of finding that missing tag, or misspelled word, or rewriting a function with fewer lines of code, is satisfying. But the main reason I enjoy troubleshooting is that it causes me to learn more.

When I begin to learn a new language, one of the first things I want to understand are the tools to troubleshoot my programming. Throughout my schooling, the most frustrating language I learned was ASP .NET. Having recently picked it back up again, I realized why I struggled. The textbook we used placed troubleshooting at least two-thirds of the way through the text. We covered the text chronologically, so for many, many weeks, if I encountered a problem with my code, I was limited in what I could do to resolve it. More than once, I simply scrapped the page (which is also not easy to do in Visual Studio) and started again. I felt that I was being robbed of the learning that results from identifying and resolving an error, no matter how insignificant that error might have been.

Recently, I have had the pleasure of encountering a variety of problems to troubleshoot. A long-time client finally had a failure of an elderly WordPress plugin that hadn't been maintained in four years. While devising a new work around to solve the problem in the quickest and least expensive way possible, I also discovered the server was still running an ancient version of PHP. Note to self: when doing website maintenance updates, also check PHP version. I'm not sure if the plugin would run with the updated PHP, but access to this particular website is critical at this time, as the organization has an impending conference. We are still working out little kinks, but we are mostly back in business.

The other issue was an HTML/CSS bug in a website I regularly follow. I was able to help interpret what was going on technically to other users, and offer some workarounds until the site owner was able to repair the problem. While I didn't implement any coding myself, the exercise in interpretting technical issues for a non-technically literate audience was worthwhile. As a freelancer, I cannot take my users level of knowledge for granted, and am always challenging myself to explain things in as simple a manner as possible without insulting people's intelligence.

I'm not going to go into the technical aspects of trouble-shooting in this post (hint, Google is your friend!), but rather offer encouragement that finding your own solutions is rewarding beyond having a functioning website, function or script again. When people ask me how to get better at coding, my basic answer is to break stuff. Making mistakes is inevitable. Being able to fix them shows you are well on the path of mastering the skill.

Oct 15, 2015

A Simple Sign Up Form

dailyui 001 sign up form

I made a goal a few months back to build something every day. Whether deep into a project or just some small little stand-alone, the more often I practice coding, the more I learn and the better I get. A couple days ago, I discovered DailyUI, which sends UI challenges to your email every day for 100 days. I'm already a couple days behind, due to signing up late in the evening and having a busy day. But, Day #001 is done.

I wanted a simple form with centered inputs. I didn't realize how resistent legend is to styling. In order to center it, I had to use a favorite little absolute positioning trick:

fieldset {

position: relative;

}

legend {

display: block;

width: 100px;

text-align: center;

position: absolute;

top: -15px;

left: 0;

right: 0;

margin: auto;

background: white;

font-size: 22px;

Another unexpected CSS hurdle popped up on setting the width on all inputs, including the submit. After digging into it, I learned that the submit input box-sizing default in Firefox is border-box, while the other inputs use content-box. Setting them all to border-box resolved that issue.

I played around a bit with the jQuery .validate() plugin to include a password regex function to extend the client side validation process a little further. After digging through the documentation, I ended up using the pattern method which works well when only needing a single regex pattern.

With apologies to my color-blind relatives, I used the common red and green signals to represent valid and invalid inputs, and the smile/frown characters aid visual accessibility. Once all inputs are valid, the submit button turns green to signal to the user that all is well and ready to go. You can play around with the result at CodePen.

See the Pen A registration form by Bekah Sealey (@bekahsealey) on CodePen.

Sept 17, 2015

Sept 11, 2015

Styling If Parent Contains More than One

See that up there ^ ? That comma separated list of tags? That list is dynamically generated, but I wanted commas to be added if there were more than one tag or category. Sometimes such simple seeming ideas need hacky ways of manipulating CSS to get them done. Inserting commas is a piece of cake (mmmm, cake. Did I mention today is my birthday?). But if I have the potential to have a single item or a list of items, and I only want the commas generated when there are two or more, that is more complicated. This process involves setting a style on all of them, and then over-riding the style with the :only-child selector. Later on, I realized that I really don't want the comma on the last item in the list, so instead I am using the :last-child selector.

The Code: Two Ways

Place the commas: using class term on the parent of our list of anchors, we can insert a comma after the link text of every anchor using the :after pseudo-element.

.term a:after {

content: ',';

color: $charcoal;

}

Clear the comma on only children:

.term li:only-child a:after {

content: ' ';

}

Clear the comma on the last child (which will also clear only children):

.term li:last-child a:after {

content: ' ';

}

Simply write a space on the pseudo-element content instead of a comma. Sending empty content, '', will not clear the comma, but a space between the quotes will.

And there you have it. No comma on single values, and comma separated multiple values.

See the Pen Generated content separators for single and many items by Bekah Sealey (@bekahsealey) on CodePen.