Bekah Sealey

Comments On Code

Posts on Web Design

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.

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.

Apr 10, 2014

Using Images in Blog Posts

In the short attention span world of the internet, images are a way to grab a readers attention and invite them to read the post.  The oft quoted, "A picture is worth a thousand words," describes how well an image can introduce or sum up meaning.  Images break up text and allow the eye to flow through the post.  But there is also a caution with using images on the internet.  It is all too easy to borrow images that aren't actually free to use.  Especially if you are business blogging, you need to know how to ensure that if you do not already own the images you are using, you are using images that are intended for royalty-free usage.  These days, it is getting easier and easier to find and use Creative Commons licensed images.  Not every image licensed under Creative Commons will be acceptable for commercial use, but it is usually only a second checkbox away to filter for business.  Also, remember to cite proper attribution for the images.

Google Images

Everyone is familiar with Google Image search.  Recently, Google has added another Search Tool to filter for Usage Rights.  The options are listed from most open to most restrictive.googleimages

Creative Commons Search

Creative Commons Search is a portal to search for Creative Commons images from your choice of several locations.  Unfortunately, you can only search one location at a time, but it also provides a convenient filter checkbox for Commercial Use right under the main search bar.

Flickr

Searching the Flickr library for Creative Commons images is slightly more complicated.  Enter your search terms in the search bar, then you can filter the results according to the options you need.  Click Advanced Search on the far right top corner, just above the results.  At the bottom of this page you will be able to filter for only Creative Commons content.flickr

Getty Images

The Getty is the source of some of the world's finest images, used in mainstream media magazines, newspapers and television.  The Getty has just announced an Open Content Program to allow their images to be used without restrictions or conditions, but an attribution is expected.  Blogging tools like Wordpress.com even have a simple embed process to enable Getty Image use.

And More

Still haven't found the perfect image?  There are many other websites devoted to user submitted images that allow for free usage.  Read the terms of use at each site to become familiar with their process and expectations for use.  A few options: