Bekah Sealey

Comments On Code

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.

Sept 2, 2015

Trying something new

We used Dreamweaver almost exclusively through school. I got comfortable with it, understood the file organization and found some of its helps helpful. But we've gone through a lot of changes in the last year, some personal, some technical. One resulted in swapping computers with my husband and the laptop I now use was affected by the GPU recall Apple issued a few months back. Even after being replaced it still has quirks and doesn't seem to have the power it should have. I've been experiencing a lot of Dreamweaver crashes and every use the first save causes my computer to freeze for forever, or several minutes, whichever is longer. After the initial save it seems to work fine.

That was the driving force that got me searching for something lighter. The personal changes kept me away from coding for many months, and subsequently I decided that Dreamweaver was a little too helpful ( thanks autocomplete ), resulting in lazy coding and a hazy memory of proper structure and known functions. And finally, I've started using Github and wow, additional file bloat!

My new process seems to be working much more smoothly. I landed on TextWrangler as my chosen editor and have learned to replicate the Dreamweaver helps I most appreciated -- brace balancing, multiple line indenting ( shift left using cmd+[ or right using cmd+] ), and enough color coding to hint whether I've mistyped something. And then I rely on two Terminal windows to perform my Github commands and SFTP my files to the server. If I need to upload or download more than a few files at a time, I'll open FileZilla.

It's been several weeks since I felt I *had* to open Dreamweaver and I'm a happy camper. I have more freedom in my file structure, being able to work with my local development server and send that same file to my remote web testing area and Github without having to keep multiple directories in sync so that Dreamweaver stays happy is an added plus. Also, less GUI makes you look smarter, right?

Apr 16, 2014

Building a Browser Extension

I just finished cleaning up a relative's computer...again.  It seems nearly impossible; how can a computer that is barely ever used, and has had almost no software downloaded (almost!) be so corrupted with malware that it ceases to function?  I can solve this.

So many unwanted programs or unwanted newsletter subscriptions ride along with programs that are intentionally downloaded, just because the user neglects to uncheck the boxes before hitting the download button.  I'm convinced most people don't even see them there.  What if there was a browser setting that would remove default checked off boxes?  Sure would be nice.  Unfortunately, no such thing exists.  The Chrome extension store does offer a couple extensions that can uncheck or check all boxes on a given page, but it requires an intentional action on the part of the user, i.e. remembering to click the extension button.

Never having contemplated writing an extension before, I had no idea what the process might entail.  Surprisingly, Chrome extensions are mostly written in code I understand.  Depending on the purpose of the extension, you can supply CSS, HTML and/or Javascript.  While it took a little bit of experimenting to achieve the result I desired -- an unobtrusive script that ran on any form page without user input -- with a little help from a few websites, we were in business.

The Process

The first step was perfecting the script.  My script needed to identify that the page was a form, then go about removing any "checked" attributes that might exist* .  This is about as simple of a little JavaScript piece as they come.  I wrote a form with a few checkboxes and attached my script in the usual way, and tested to be sure I could still select the check box and send without any issues.  Once that was perfected, I removed the script and reset my form for testing when I installed the extension.

On to building the extension.  Chrome offers a very brief introduction to one type of extension.  While it is not exactly what I was interested in building it does introduce the most important, and most unfamiliar to me, piece of the extension puzzle, the manifest.json document.  This is the document that tells Chrome all about what you're building, where to locate the necessary files, and on which websites to run the extension.  Understanding the areas of this document is the key to building the type of extension you want and getting it to work.  Cory Gross has an excellent resource on Github that details aspects of these manifest settings.  Once you've decided what type of extension you are interested in building, you can start creating documents.

As intimidating as that sounds, this is actually the easiest step of all.  Alex Wolkov has written a tool that will build the extension's document structure, including inserting the default fields you need in the manifest.json document.  Each setting also includes a popup window on hovering over the (?) that offers a short explanation of the selection, and links to the Chrome developer page with more detailed instruction.  Upon downloading, open the manifest in a text editor and edit the fields.

In my example, I needed to edit only two documents, the manifest and the inject.js.  The trickiest bit was ensuring that my script would run on all web pages.  This setting falls under the content scripts->matches.  The tool automatically inserts a url to match all google pages, so editing that can be overlooked.  Google lists all the possible forms of match patterns for reference.  My script uses <all_urls>.

The next hurdle was placing the right section of code in the inject.js file.  The file is explicit about where the script should go.  Just strip the function call and drop in the actual script and it is all set.

Finally, create a set of icons to drop into the icon folder.  The icons are png files, so any image editor will do.  Create the largest size and then resize and save each smaller size.

Testing

Chrome makes it extremely easy to install an extension in development.  Navigate the settings -> tools -> extensions, just as you would install any extension.  At the top of the page is a checkbox to open the developer menu.  From there you can install an unpacked extension by navigating to your folder in which the extension lives.  On installation, Chrome will alert you to anything in the manifest that isn't formed correctly.  A little debugging and Google searching can help you fix those errors.

At this point, it's time to return to our test website we created when writing the script.  Be sure that you removed the link to the JavaScript file so that you can test the extension only.  It also may be helpful to disable any other extensions within the extension manager that you might be using because Chrome does not identify the extensions by name in the developer panels.  Using the Inspect Element tool (right click, Inspect Element), click the Sources tab and then the Content Scripts tab.  Reload the page if nothing shows up.  If still nothing appears, you need to return to the manifest.json and check that the matches section is properly formed to attach to the page as intended.

You should see a filename with a bunch of random letters.  If you've turned off all the other extensions, then you know this is your extension.  Opening the disclosure arrows will display files that make more sense.  If you are using an inject script as I have been, you will be able to navigate to the inject.js file and display your code (if creating another type of extension, the filename will be different, but you will still access it here).  You can debug this code, if necessary, just as you would debug any other JavaScript code in the browser.

Congratulations, you've built an extension!

Your extension can be installed and used as an unpacked extension with the files living locally on the computer.  It continues to function with the developer window in the extension manager closed, but may alert the user that a "possibly harmful" extension is installed every time the user opens the application.

Coming Soon...How to Publish your Extension.

*The actual script is beyond the scope of this piece, but I will update when the extension is available in the Chrome store for anyone interested.