Things I've Posted in ‘Entries’

Page 1 of 17

The Gutenberg Experiment

I resisted the move to Gutenberg for quite some time — and this was largely because it failed to work when I installed the test plugin. It took me quite a bit of digging into my theme’s functions file to figure out the issue, but it was related to the removal of the wp-embed.js file that I never really understood the purpose of for my own theme.

Well, here we are, and I’m writing this today using Gutenberg, and I cannot wait until I can move some of the more powerful features into production on my personal site. At the moment I am not injecting my site’s styles into the backend as Gutenberg’s defaults seem to suffice. The biggest issue for me will be how I handle post formats moving forward — particularly with my older content — and how to handle what will become a custom post type for portfolio content.

The future is incredibly interesting with WordPress and Gutenberg in terms of advancing the publishing capabilities we’re seeing, but what I’m most curious to see is is how well this will translate to the CMS it is commonly used as. Even now I have a few pages that are more hand developed and not utilizing the included content editors.

Let’s see what the future holds.


Current Mood

This is an old one, but it sure described my day about 5 years ago.

[raw]


[/raw]

And of course, the code I wasted some time writing to get this ridiculous result.

function howIFeelToday() {
    var d = new Date(),
      h  = d.getHours(),
      hh = (h > 12 ? h - 12 : h),
      m = (d.getMinutes()<10?'0':'') + d.getMinutes(),
      a = h < 12 ? ' AM' : ' PM',
      time = hh + ':' + m + a,
      feeling = "";

    switch(h) {
        case 8:
        case 9:
        case 10:
        case 11:
            feeling = "Damn, it's only " + time + "!";
            break;
        case 12:
            feeling = time + ", yeah, lunch time!";
            break;
        case 13:
        case 14:
        case 15:
        case 16:
            feeling = time + "...this is the longest day of my entire ever-loving life...";
            break;
        case 17:
            feeling = time + "! Finally. :)";
            break;
        default:
            feeling = "Probably not at work.";
    }   
    return feeling;
}

var currentmood = howIFeelToday();

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.


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.

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.


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.


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

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.



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 (R)
47.5% / 289 Electoral Votes

President (Michigan, 16 EV)

Hillary Clinton (D)
47.3% / 2,239,745
Donald Trump (R)
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 (R)
67.3%
Lorence Wenke (L) 4.9%
 

79th District State Representative

Marletta Seats (D)
38.4%
Kim LaSata (R)
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.