Better Headers

April 21, 2021 at 2:02 pm

I upgrad­ed site secu­ri­ty and pri­va­cy today. The scan­ner at securityheaders.com was super help­ful and resource­ful. A few mali­cious edge cases are now closed up. Browsers and servers know to con­nect secure­ly instead of just try­ing to. Other sites won’t know you’re com­ing from this site when you click out­bound links. I have pre­emp­tive­ly opted out of Google’s Federated Learning of Cohorts (FLoC). I still need to man­age my Content Security Policy, but that takes some test­ing to make sure all exter­nal resources are account­ed for and noth­ing breaks. Go give your site a lit­tle check-up and make sure you’re mak­ing the web better.

Still Here for at Least Another Year

April 19, 2021 at 12:42 pm

I recent­ly re-upped my site host­ing for anoth­er year. *plug* Bluehost for the win. *end plug* That of course had me think­ing about impact and lega­cy. These ram­blings only con­tin­ue to exist because I put in vary­ing degrees of effort and money each year. Blogs (like life) are not a set-and-done thing but a con­stant, con­tin­u­ous, tending-to that must be fed to stay sur­vive. Having dead blogs lit­ter my RSS library, I know the ten­den­cy to entropy is always lurk­ing. URLs and site struc­tures some­times change; a tech­nol­o­gy stack might be upgrad­ed and feed func­tions don’t make the cut. Link rot is real and sur­pris­ing­ly fast.

My first post — in all its infan­tile ick — is still here. The feed has con­tin­ued to work for ten years even through hia­tus. Those are some minor accom­plish­ments that I’m going to be proud of today. It’s not much and it does­n’t have to be. We should be cel­e­brat­ing the zero vic­to­ries when all we do is stave off the heat death of decay. That’s more sus­tain­able than over­pro­duc­ing for the sim­ple sake of con­sump­tion. Now, time to tend some weeds both in my dig­i­tal and phys­i­cal garden.

The Redesign: Part Three

August 22, 2014 at 12:00 pm

The third and final post in the series about my recent redesign of Spare­Type is the fun one chock full of bits of code. With visu­als and process out of the way, it’s time to dig into the pieces that actu­al­ly make the site run. This isn’t going to be a com­pre­hen­sive break­down of every line of code but a look at my favorite pieces that do the most heavy lifting.

Typography

Font sizes and line-height are the per­fect can­di­dates for vari­ables in a CSS pre­proces­sor. I’m run­ning Sass because that’s the one I heard of first and it was easy enough to pick up the basics of imports and variables.

// =Variables for typography expressed in pixels
$title-text: 58;
$headline-text: 36;
$subhead-text: 28;
$primary-text: 22;
$secondary-text: 17;
$title-leading: 60;
$headline-leading: 44;
$primary-leading: 36;
$secondary-leading: 27;

So where did these num­bers come from? The Golden Ratio Typography Calculator, of course. This pro­vides a reli­able scale and hier­ar­chy while also address­ing read­abil­i­ty with an appro­pri­ate char­ac­ter per line count (CPL). While being respon­sive will cause that num­ber to fluc­tu­ate, I’ve designed for 65 CPL on desk­top sized screens which make up the bulk of my traf­fic. So what do we do with these num­bers? Say hello to the only mixin in my Sass so far.

// =Font size and line height mixin for pixels and rems
@mixin font-size($fontsize: $primary-text, $lineheight: $primary-leading) {
font-size: $fontsize + px;
font-size: ($fontsize / 16) + rem;
line-height: $lineheight + px ;
line-height: ($lineheight /16) + rem ;
}

This beau­ty allows you to pass it one of the vari­ables above then spit it out in pix­els for older browsers and rem units for newer browsers. The ‘16’ comes from the default type size in pix­els. This piece is awe­some because it does all the math in con­vert­ing pix­els to rem units. Hooray, for com­put­ers doing math. Now, the mixin in action.

body {
    @include font-size($primary-text,$primary-leading);
    color: $brand-color1;
    font-family: 'Source Sans Pro', sans-serif;
}
h1 {
    @include font-size($title-text,$title-leading);
}
h2 {
    @include font-size($headline-text,$headline-leading);
}

@include calls the mixin named font-size. The vari­ables for text size and line-height are includ­ed for that par­tic­u­lar ele­ment. Then we have some other CSS rules to start the over­all styling of the text with color and font-family. The color prop­er­ty also shows off anoth­er per­fect use of vari­ables for defin­ing color palettes to be reused through­out the code. Once com­piled from Sass to nor­mal CSS it looks like the following.

body {
font-size:22px;
font-size:1.375rem;
line-height:36px;
line-height:2.25rem;
color:#3c4d56;
font-family:'Source Sans Pro', sans-serif
}
h1 {
font-size:58px;
font-size:3.625rem;
line-height:60px;
line-height:3.75rem;
}
h2 {
font-size:36px;
font-size:2.25rem;
line-height:44px;
line-height:2.75rem;
}

Layout

My favorite piece of struc­ture for the site is the blog page with its tiles for each blog post. Amazingly, it’s a CSS only solu­tion. The secret is inline-block and column-count, which has plen­ty of brows­er sup­port when pre­fixed. Set the column-count and column-gap on a div that wraps the arti­cles. Then set the arti­cles to inline-block and 100% width.

.loop-content {
    margin: 184px 72px 18px;
    -moz-column-count: 1;
    -moz-column-gap: 72px;
    -webkit-column-count: 1;
    -webkit-column-gap: 72px;
    column-count: 1;
    column-gap: 72px;
}

.loop-content article {
    display: inline-block;
    margin-bottom: 72px;
    width: 100%;
    background-color: $brand-color4;
    border: 2px solid $brand-color1;
}

@media screen and (min-width: 850px) {
    .loop-content {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
        max-width:800px;
    }
}

This tech­nique works great in a respon­sive design because you can update the column-count on wider dis­plays to spread out infor­ma­tion. You can adjust the width of the wrap­ping div and the col­umn widths inside will adjust accord­ing­ly. Again, hooray for leav­ing the math to the com­put­er and let­ting the brows­er cal­cu­late widths. I’ve also used this tech­nique in the foot­er for lay­ing out wid­gets there.

Multiple Thumbnails

The last piece of code I’d like to high­light is WordPress spe­cif­ic and actu­al­ly involves installing a plu­g­in. The Multiple Post Thumbnails plu­g­in allows you to reg­is­ter extra fea­tured images for your posts. It does take some cod­ing to get work­ing, but that flex­i­bil­i­ty allows for lots of tweak­ing to fit your design goals. All the code and instruc­tions for imple­ment­ing the plu­g­in can be found on this Github page. It dove­tails per­fect­ly into WordPress’s built-in media man­ag­er and cus­tom image sizes reg­is­tered through functions.php. Plus, there is no limit to how many fea­tured images you can add.

SpareType Multiple Thumbnails (Featured Images) for WordPress, plugin, screenshot

Those three pieces of code real­ly do 80% of the work around the site. They are pow­er­ful, under­stand­able, and adjustable which makes them amaz­ing tools for work­ing with the site’s design. As I makes tweaks and intro­duce new code, I’ll be high­light­ing the stand out pieces here on the blog so keep an eye out for those.

For now, that wraps up the redesign series about the site. If you real­ly want to fol­low along, I am doing all of this out in the open on Github. Plus, there’s always the RSS feed so you can catch all of my blog posts. Now, go code something.

The Redesign: Part Two

August 18, 2014 at 2:30 pm

Welcome to the sec­ond post about my recent redesign of SpareType. Part one cov­ered the visu­als, while this post will dive into how I changed my think­ing and process. I’ll share a few key code snip­pets pow­er­ing the new design in part three com­ing soon. For now, let’s talk about process.

Holy shit. I’ve been doing this all wrong.

Have you ever had that thought? It’s a tough real­iza­tion. I had that moment a few months ago. I was feel­ing like an old dog in my web design game. I knew of these things called Github, Grunt, and Sass but wasn’t tak­ing advan­tage of them. I hadn’t updat­ed my skills or my process. My mind­set also need­ed a reboot.

My first break­through moment was for­get­ting about a fin­ished prod­uct. Coming from the print side of graph­ic design, I was still hold­ing on to that idea of get­ting every­thing right before hit­ting the print but­ton. I kept par­a­lyz­ing myself with the list of things to do before I could release the redesign. But that’s not true for a web­site. If I don’t like the way com­ments show up today, I can update a file and they can look bet­ter tomor­row. A web­site can — and should be — in a con­stant state of improvement.

Make it more better.

The idea of con­stant improve­ment notched per­fect­ly with the idea of ver­sion con­trol. If I want to always be try­ing new things, I need a safe­ty net to CMD‑Z the things that don’t work out. I threw all my cod­ing pride out the win­dow and start­ed with the Git basics. “I’m smart enough to fig­ure it out,” had to take a seat while I dust­ed off the instruc­tion man­u­al and read the baby steps. I’m still not com­plete­ly using Git cor­rect­ly for branch­ing and merg­ing, but I have the con­fi­dence to break things in my code and undo them.

Github Screenshot of SpareType 2014 Project, version control, redesign

At the same time I was start­ing to crawl with Git, I was lucky to stum­ble across Codio. Before, I bounced around edit­ing code in Dreamweaver or the built-in theme edi­tor in Word­Press. Some­times I just used the file brows­er pro­vided by what­ever host­ing com­pany the project was on. I did­n’t have an inte­grat­ed devel­op­ment envi­ron­ment (IDE) and set­tling on one place to code and work has been a huge orga­niz­ing force in my process.

Codio is web based and fully inte­grat­ed with Git and Github. It’s lib­er­at­ing to no longer be shack­led to a local pro­gram or files. I’m just mov­ing stuff from one spot on the Internet to anoth­er. This also has the ben­e­fit of forc­ing me to learn the dark arts of com­mit, push, pull, and branch. Codio’s other inte­gra­tions with the soft­ware I was inter­est­ed in learn­ing — Sass and Grunt — made it eas­i­er to start learn­ing about them. Of course I screwed up at first — four­teen com­mits before Grunt was pro­duc­ing the right out­put. And it could still get better.

Codio Screenshot - Homepage, World's Most Powerful IDE, integrated development environment

The Biggest Game Changer

As cliché as it sounds, if you feel like you need to do some­thing, just do it. If you need to use [insert tool, pro­gram­ming lan­guage, new-fangled boon­dog­gle here], start using it. Screw it up, read more doc­u­men­ta­tion, copy some code, screw up again, get one tiny thing to work, screw up again, rinse, repeat. Along the way those tiny things that work start to stick and that’s called learning.

I’ve learned a lot the last few months both tech­ni­cal­ly in my code and in my approach to think­ing about what I do. It’s also made me appre­ci­ate oth­ers shar­ing their learn­ing on the Internet. Hopefully, I can con­tribute a small piece and inspire oth­ers to make things more bet­ter. I leave you with a few of the key arti­cles that helped teach me the last few months and bring about my process changes.

233 Days

July 16, 2014 at 6:12 pm

For shame. I’m glad I’ve never called myself a blog­ger. I’m pret­ty sure seven months and twen­ty days is too long of a break between posts. Luckily, I’ve been work­ing on stuff.

A redesign of the site has been in the works. It’s been a slow process as I’ve also been retool­ing my work­flow. I’m writ­ing a post about that process and learn­ing new things which will go up with the new design. I’ll also have a post break­ing down the design as it includes a re-branding with new logo and focus. A few more final touch­es and it will be ready to go.

Preview of SpareType redesign in progress, home page, new logo, new color scheme

A redesigned SpareType

My atten­tion was also divert­ed from the web­site as I focused on open­ing a Society6 shop for some art­work. It was a great out­let for mak­ing stuff and putting it out into the world, which seems to be a con­stant nag­ging feel­ing I have lately.

SpareType on Society6 - Artwork, posters, t-shirts, phone cases

SpareType on Society6

And then there’s the fire­house of my RSS read­er, that I still need to learn to con­trol. The con­stant inflow of free­bies, tech­niques, arti­cles, show­cas­es, and more is enter­tain­ing and infor­ma­tive. But it does­n’t get work done.

So I’m putting myself on notice. Get more work done. Now, back to work.

It’s About Time

June 21, 2012 at 9:50 pm

Seems like things have been pret­ty hush around these parts late­ly, but I would like you to know that work has con­tin­ued on in the back­ground. I final­ly got so deject­ed and repulsed with the design of the blog that I start­ed work­ing on a new one. Then, I slow­ly spi­raled down the WordPress theme devel­op­ment hole along with respon­sive design and over­all aesthetics.

I’d like to think its bet­ter because it puts more focus on the con­tent. Let me know what you think or if you find some­thing bro­ken. I tried as much test­ing as I could. I know I have some work to do on my small screen media queries and lay­out, but I had reached a good frame­work and want­ed to go live instead of con­tin­u­ing to toil in obscu­ri­ty with this new theme. I would love some feed­back now that its in the wild.

A Spare Update — No. 1

May 26, 2011 at 3:21 am

I read this great arti­cle the other day over on Smashing Magazine and it’s pushed me to work hard­er on some projects I’ve had in the pipes. Here’s a lit­tle update on what I’m making.

I’ve been pick­ing at FontLab — learn­ing the basics and start­ing on some advanced OpenType pro­gram­ming. I’m begin­ning with my very own hand­writ­ing, as I’m pret­ty famil­iar with it.

Handwriting Typeface in Progress in FontLab - Glyph Palette View

The idea is to end up with six to eight glyphs for each let­ter, three or four vari­a­tion glyphs for numer­als, and maybe two or three vari­a­tion glyphs for punc­tu­a­tion marks. Along with some cus­tom lig­a­tures and nifty OpenType pro­gram­ming, the con­cept will be a very nat­ur­al hand­writ­ten font with a lot of fluc­tu­a­tions and ran­dom­ness to best mimic real hand­writ­ing. As you can see from the screen­shot above, I’ve got a lot of work to do and holes to fill in.

The Other Thing I’m Making

Blackletter, Pixel, Type Slugs, and TypographyMy other awe­some project that I’ve put into action is some fun but­tons that I think are pret­ty cool and witty. I’ve put togeth­er a quick online shop­ping cart if you think they’re neat enough that you want to give me some of your hard earned money and get a set. *hint hint wink wink* There’s four reg­u­lar pin-back but­tons and four mag­nets to a set.

Right now, I’ve got the typog­ra­phy relat­ed set and a set with some skull designs. I think I’m going to work out a plan where I release new sets on a reg­u­lar basis and build a big­ger cat­a­log. And of course, some more styling tweaks to the shop­ping cart for more cohe­sive branding.

But as the arti­cle says…

I’m a true believ­er in per­fect is the enemy of good. I could per­fect the design until every pixel is exact­ly how I want it, until every fea­ture and fil­ter is live on the site, but for what? My own per­son­al sat­is­fac­tion? That’s just silly. Launch now, pro­vide value now, and sweat the details later.”

- Michael Aleo

I would like to add to that — “Everything is a work in progress, just like life.”