Things I've Posted in ‘Entries’

Page 1 of 18

#CSS, #Responsive Design

Fluid Type for Better Responsive Text

I’ve been playing around with fluid type for a while and happened upon a pen by…I don’t remember who. I forked it a while ago, but in essence we’re simply attempting to scale type based on viewport size.

In the instance highlighted here, let’s say we want a bold header in a hero space to essentially always have that bold feel no matter what screen size we’re viewing items at:

See the Pen Scaling Text with Viewport Units by mikemattner (@mikemattner) on CodePen.

Not a bad solution, but if you’re not careful that can scale infinitely and in a way that is just a bit too in your face. My suggestion is to set–at the very least–an upper bound to that scaling. I’ve done something similar on this very site.

My minimum size is set at 14px, plus a half a percent of the viewport width with a line-height set based on 1.1em plus a half a percent of the viewport width. This will scale up infinitely, but I found that that maximum font-size I wanted was closer to 20px. Through a little viewport resizing and code inspection, I found the viewport width where this formula would generate a nominal 20px size and set that as my upper bound:

html {
  font-size: calc(14px + 0.5vw);
  line-height: calc(1.1em + 0.5vw);
  @media (min-width: 1200px) {
        font-size: 20px;
  }
}

Not too bad of a result as far as I can tell. The rest of my typographic sizing builds on this initial sizing and seems to work out fairly well for my purposes.

Easy technique.


#Development, #Dotfiles

Adventures in Dotfiles

I accidentally ran into a bit of laziness during my development process that turned into a productivity boon, and should prove to be absolutely essential during the setup of any new Mac I might purchase in the future.

Let me preface this by saying I am not a native of the command line–by any stretch. I find it to be cumbersome and annoying to remember commands and all of the possible flags that might apply to them. Even something as simple as showing hidden files on the Mac can be obnoxious:

# Show hidden files
--- ~ » defaults write com.apple.finder AppleShowAllFiles -bool true && killall Finder

# Hide hidden files
--- ~ » defaults write com.apple.finder AppleShowAllFiles -bool false && killall Finder

What if I could just type show or hide and be done with it? This is where aliases come in. This was a concept I was keenly aware of already–seeing that most of the helper plugins I used in my ZSH installation provide plenty of helpful aliases–but I figured, why not create some that I could use for operations I performed frequently? Or to find a way to easily navigate to directories I regularly used?

At first I created a simple .aliases file and started to add what I needed:

# Show/hide hidden files in Finder
alias show="defaults write com.apple.finder AppleShowAllFiles -bool true && killall Finder"
alias hide="defaults write com.apple.finder AppleShowAllFiles -bool false && killall Finder"

# Hide/show all desktop icons (useful when presenting)
alias hidedesktop="defaults write com.apple.finder CreateDesktop -bool false && killall Finder"
alias showdesktop="defaults write com.apple.finder CreateDesktop -bool true && killall Finder"

# Disable Spotlight
alias spotoff="sudo mdutil -a -i off"
# Enable Spotlight
alias spoton="sudo mdutil -a -i on"

#Git commands
alias gnb="git checkout -b"
alias gmsg="git commit -m"

I sourced it in my .zshrc file and called it good.

But then I wondered what would happen if I lost everything on this system? I started doing a little research and discovered that there were plenty of people working on ways to bootstrap their development environments for situations like this.1

I found one particular repo by Mathias that I was able to gather some items from, as well as an installation process that could get me started with everything I used. Now all I need to do is navigate to my cloned repo and type:

--- ~ » source boostrap.sh

I follow a few prompts and install what I need to get up and running. I can share my dev environment between machines fairly easily this way.

If you’re interested, feel free to browse my repo for reference, or fork it if you want to build on it. Keep in mind, there are more repos available with more sophisticated setups than my own if you’re looking for something more robust, but if you’re knew to this level of customization on this level, this is a good start.2

View Project on GitHub


  1. Getting Started with Dotfiles. Accessed May 23, 2018.
  2. GitHub does dotfiles. Accessed May 23, 2018.

#Wisdom

Rules to Live By

These are from John Perry Barlow, but what a fine, fine list this is.

  1. Be patient. No matter what.
  2. Don’t badmouth: Assign responsibility, not blame. Say nothing of another you wouldn’t say to him.
  3. Never assume the motives of others are, to them, less noble than yours are to you.
  4. Expand your sense of the possible.
  5. Don’t trouble yourself with matters you truly cannot change.
  6. Expect no more of anyone than you can deliver yourself.
  7. Tolerate ambiguity.
  8. Laugh at yourself frequently.
  9. Concern yourself with what is right rather than who is right.
  10. Never forget that, no matter how certain, you might be wrong.
  11. Give up blood sports.
  12. Remember that your life belongs to others as well. Don’t risk it frivolously.
  13. Never lie to anyone for any reason. (Lies of omission are sometimes exempt.)
  14. Learn the needs of those around you and respect them.
  15. Avoid the pursuit of happiness. Seek to define your mission and pursue that.
  16. Reduce your use of the first personal pronoun.
  17. Praise at least as often as you disparage.
  18. Admit your errors freely and soon.
  19. Become less suspicious of joy.
  20. Understand humility.
  21. Remember that love forgives everything.
  22. Foster dignity.
  23. Live memorably.
  24. Love yourself.
  25. Endure.

Sourced from the article A list of 25 Principles of Adult Behavior by John Perry Barlow from the venerable Kottke.


#CSS, #Design, #Web Development

Micro Trend: Non-Rectangular Headers

I love techniques that allow designers and developers to “break” the boxed in nature of web design in a general sense. As a micro trend, non-rectangular headers have become one of my favorite techniques to accomplish this ask.

So, how do I do this?

Per CSS-Tricks, there are several methods available to accomplish this particular task:

  1. Background images, which appears to be one of the weaker methods
  2. Inline svgs, which can be modified pretty well, and reduce the load on the browser
  3. border-radius, which allows for the more convex circular look
  4. clip-path, which appears to have browser compatibility issues
  5. And my favorite, transform: skew
Stripe Home Page
The Stripe home page using transform: skew.

As mentioned above, my preference in this case is transform: skew, although it introduces extraneous elements to the page–a seemingly forgotten rule is to not do so for presentational purposes–but this can certainly be accomplished with pseudo elements.

The article referenced above uses an extra element in the document to create the effect–which is perfectly reasonable–as does the stripe website.

Stripe’s homepage design uses this method, and even more brilliantly, they include a few children spans (each is a block of color) that get skewed with the parent element, creating a more complex and colorful effect.

I don’t entirely know that I like the extra elements, but I come from a slightly different era of development that saw this technique of creating decoration-only elements as heresy, while still using it regularly.

Anyway, I enjoy looking at the sorts of things that front end devs do to accomplish what UX/UI designers come up with.


#Deployment, #Front End Development, #Git

Using a Git Workflow on This Site

I’ve been toying with a total and complete rework of this site for a little while, but to be honest I’m not sure what platform to pursue. Do I chose a new CMS? Do I go with Jekyll or some other static file variant? It’s difficult to decide–I know I’d like to learn a completely foreign and new skill set. For the time being, however, WordPress is my home. Fam.

My hope for this workflow–and it appears to bear out–is that I can rapidly design, develop, and deploy my updates and changes. I have been using Grunt for task automation for a while now–and that required a bit of command line knowledge–but I wasn’t initially using a git workflow. I mean, it’s just me, right? Well, I found that not using a git workflow made deployment much more difficult. What do I upload? What did I change? How do I undo this change?

Code Contrololol

I’ve really just begun to do personally what I do professionally–it just makes sense to introduce efficiencies into my personal workflow when I’m so used to working this way–and I’m not really sure why it took so long.

I’ve setup a Bitbucket repo and maintain a feature branch workflow while doing development work locally with a MAMP install. I’m not currently tracking my entire WP install, only my theme, but I do my best to keep the environments similar to one another. I completely skip a staging environment for this site–I feel like it’s overkill–so it’s not a duplication of what I might do in a more important (client) setting.

I don’t really have the money for a commit-to-deploy sort of environment, so I deploy using GitFTP-Deploy to deploy changes from my ‘master’ branch.

I am still using Node/Grunt for task automation…in spite of how quickly devs seem to have moved beyond it, but whatever.

Summarizing

  • This is a bit experimental on my personal work, but something I use in my day-to-day client work
  • Typically we’ll track the entire site, WP install, plugins, etc.
  • I am introducing this process into my freelance work as well…git repo and all
  • For now I’m working on a minor redesign/refresh and I’ll be doing that in real time

Exciting times.


#Design Sprints, #UX

Design Sprints

I went to Chicago Camps UX Camp last weekend and thoroughly enjoyed the experience. From the opening keynote right on through to the final session discussing content modeling, the day was packed with information that I can bring back to my freelance work and primary job. It was a full 14 hours of driving and learning that was rather tiring, enlightening, and everything in between.

One particular talk stood out in my mind as one that I need to research, learn, and discuss with my larger team to see if implementing the methods in any sense would work for us.

Sprint: How to Solve Big Problems and Test New Ideas in Just Five Days
Sprint, the book in all its glory.

The talk was, Facilitating Google Design Sprints, given by Zeke Binion:

Making products that customers love is hard. So giving yourself 1 week to do it sounds crazy.

But many companies spend months or years building products only to learn that their customers don’t want it. Google’s Design Sprint solves this problem by focusing a cross-disciplinary team on a clearly defined problem, empowering them to generate many creative ideas, and ensuring they are building the right product by putting a prototype in front of customers in just 5 days.

The 45 minute session was focused primarily on facilitation rather than process, but I am intrigued.

In his talk he discussed Google design sprints, as outlined in Sprint: How to Solve Big Problems and Test New Ideas in Just Five Days, and it is a process I am heavily interested in learning.

I have just received my copy of the book, so stay tuned for further process discussions.


To be clear, I am using an Amazon affiliate link to direct traffic through to Amazon. Shameless, I know. Just trying to earn a little bit of cash.



#Election 2016, #Michigan, #Politics

Michigan Election Results 2016

It’s that time again. This particular post comes with a heavy heart. Not because my candidate lost–I don’t generally vote major party–but because of what this election says about those who have voted this candidate into office. Giving in to xenophobia, racism, fear, and hatred is unconscionable.

Some might say I contributed to this by voting for a party other than one of the major parties, but I don’t see a principled selection that way. We are not limited to only two candidates–that isn’t how our system works, and I’m happy for it.


President (National, 270 needed)(Sigh)

Hillary Clinton (D)
47.6% / 218 Electoral Votes
Donald Trump ®
47.5% / 289 Electoral Votes

President (Michigan, 16 EV)

Hillary Clinton (D)
47.3% / 2,239,745
Donald Trump ®
47.6% / 2,255,356 Votes
Gary Johnson (L) 3.6%
 
Jill Stein (G) 1.1%
 

House District 6

Paul Clements (D)
28.4%
Fred Upton ®
67.3%
Lorence Wenke (L) 4.9%
 

79th District State Representative

Marletta Seats (D)
38.4%
Kim LaSata ®
58.7%
Carl G. Oehling (T) 2.8%
 

Reaction

PRESIDENTIAL RESULTS Hell! Brimstone! Fire! I’m not certain what stage of grief I’ve reached, but it’s certainly not acceptance. I underestimated how much people despised Hillary Clinton. I underestimated how much people would accept a man that looked and acted nothing like a presidential individual–speaks his mind was the refrain.

I do not understand.

Appealing to voters with divisiveness and bigotry, as well as a dislike of what Clinton represents, is not the same as sending a message of solidarity and revolution–which is the message I am receiving from some supporters. It means that people didn’t want the status quo. They want what they see as their way of life back and they think the establishment won’t provide it. I can appreciate that voters felt marginalized by what they see as a ruling class that doesn’t understand or represent them–that much is obvious–but I would not gloat or be happy about the fact that this particular candidate is the face of that movement. Trump winning truly does empower those who would further marginalize minority groups and exposes a deeper hatred than I ever guessed was possible. Even if as President he is nothing like that, he rode that wave into office. That in itself is deplorable and shameful.

I accept that our political system is broken and produces results that ignore a great portion of the population’s wants and desires, but that group is ignoring the realities of life and how the world operates. I am truly ashamed of this result.

Face palm
Seriously guys!?

LEGISLATIVE BODIES This is where all of the action is. This is where I’m mostly confused. People used Trump as a vehicle for change–a vote to protest the political system–but they largely kept their reps and senators. This was a mistake of the largest order. Most of the work is done in the House and Senate, while the President helps to set an agenda for the next four years. In this case, Trump’s own party disliked him. We are unlikely to see the sort of massive change those hoping for his election sought.

My districts were no different, and have been historically Republican for as long as I can remember. I really have no other reactions here. This is a national shame in a way that I don’t think Trump supporters or protest voters fully understand.


Information gathered from CNN Election Results and 2016 Michigan Election Results, accessed on November 9th, 2016.


#Branding, #Coca-Cola, #Design

Coca-Cola Variants With New Packaging Strategy

Coca-Cola is switching gears with a new packaging strategy, according to AdAge. Their focus is going to be on variants of Coca-Cola rather than on separate brands depending on consumer desire.

Earlier this year, Mr. de Quinto told Ad Age that loyal consumers “always have loved the brand Coca-Cola.” But “there are moments when this consumer wants to reduce their sugar intake.” In those cases, Coke was forcing people to buy into a completely separate identify, he explained, referring to Diet Coke and Coke Zero.

He goes on to describe how this strategy implied that the product wasn’t really for everyone–that it wasn’t all inclusive–and that’s an intriguing notion.

Proposed product lineup. Photo from Coca-Cola, used at AdAge

8oz_Glass_One_Brand_line_up

Same family but no different–they’ve changed nothing about the product.

From an aesthetic standpoint, I love this strategy. Everything feels like a product family, the approach is clean, and the rationale surrounding it seems rather intriguing. By positioning these options as variants of Coke, rather than separate products, I wonder if it will create confusion in-store or if this will seem like a natural evolution for consumers?

Overall, I’m curious to see what it looks like when it is introduced later this year.


#Life advice

Ways I Can Be Better as a Person

While I believe the post1 I got this information from is referencing only men, the advice is fairly solid and can apply to any adult. These are things that can be done better by me in my public and private life.

1. A man has public decorum. He opens doors for ladies and his elders as a sign of respect; likewise, he walks on the side of the curb and he offers his jacket. He minds his P’s and Q’s at all times, whether he is with the janitor or the CEO. A man never makes anyone wait for he is always on time. A man is never rude.

This one in particular is one that I find to be of the utmost importance (is never rude and minds manners), and any time I fail in following it, I am extremely disappointed in myself and my actions. I hope to get better every day and to be a better person tomorrow than I am today. I know as a human being I’m prone to failures, but I take each and every one of those failures personally and to heart.


  1. Top Ten Ways to be a Man. Accessed 2/15/16