Braille Business Cards

March 4, 2016 By Christopher Schmitt

Coding `mod_rewrite` and WordPress Permalinks

March 3, 2016 By Christopher Schmitt

URL rewriting is what mod_rewrite does.

It’s an engine that helps redirect a visitor that comes for one URL to another page on the same site or another server. If you are using WordPress with some friendly-looking URLs, you are using mod_rewrite.

Thankfully, WordPress does most of the heavy lifting with pre-built rewrite rules because the syntax is a little unfriendly to the beginner: It combines all you hate about regular expressions with all you hate about having your brain stabbed by rusted forks.

My Problem and Need for mod_rewrite
I’ve been moving from my old domain, ChristopherSchmitt.com, to this one, Christopher.org.

I still have ChristopherSchmitt.com “live” on a server as I work on finishing some migration tasks.

Visitors might stumble onto pages on the old site and stay there. Instead of that happening, I’d like visitors that do come through the old site go to the new site and read the content there.

That means working with `mod_rewrite`!¹

First mod_rewrite Workaround

If my new domain’s URL structure was an exact mirror of my original site, I could set up a simple redirect from the old domain to the new domain.

For example, if I had a URL for my old site:

http://christopherschmitt.com/2015/07/21/i-cant-complain/

And new URL for the new domain is:

http://<strong style="background: yellow;">christopher.org</strong>/2015/07/21/i-cant-complain/

The mod_rewrite is relatively straightforward to code up.

To do that, I add the mod_rewrite rule in the .htaccess file which is in your site’s root directory — and is two lines of code:


RewriteEngine On
RewriteRule ^(.*)$ https://christopher.org/$1 [R=301,L]

The first line tells the server to turn on rewriting engine.

The second line does the heavy lifting: it gives the server information on how to process a request from the browser, i.e. the incoming URL, and what do with it, i.e. form a new URL.

When that is added, the links will redirect — however, my problem is a bit different than that.

Little More Complex `mod_rewrite` Examples

While moving content to Christopher.org, I want URLs without the date. I changed WordPress Permalinks settings to remove the date in the URL:

https://christopher.org/i-cant-complain/

Selecting permalink format in WordPress

That result of this decision means my URL structure for my new domain does not match up perfectly with the old domain.

OLD URL: http://christopherschmitt.com/2015/07/21/i-cant-complain/ NEW URL: https://christopher.org/i-cant-complain/

So, the rewrite needs to be updated to reflect that.

To do that, I would have to use mod_rewrite to grab only the bit of the old URL I need. Thanks to Adam Norword for helping me out with the rewrite rule and sparing me from the regular expression hell I was in:


RewriteEngine On
RewriteRule ([^\/]+)\/$ https://christopher.org/$1/ [R=301,L]

Let’s look at the lines to see what is going on:

The first line only has RewriteEngine On and it turns on the rewriting engine in the server.
The second line starts off with RewriteRule and says we are going to have a rule on how the server should handle incoming links.
([^\/]+)\/$ tells the server to grab just the slug title of the page or post by grabbing the end portion of the URL.
https://christopher.org/$1/ — this tells the server to grab that title of the page or post and append it to the new domain to create the new URL
[R=301,L] this section tells the browser to signify the code is a 301 direct. Using 301 redirects is a method recommended by Google to let them update their listings.

Non Breaking Space Show № 69: Allison Wagner — Career Path to UX Developer

March 2, 2016 By Christopher Schmitt

Allison Wagner on Non Breaking Space Show

Today’s Non Breaking Space Show guest is Allison Wagner. She has worked at Happy Cog as a UX developer for over 6 years, building sites for high-profile clients such as Nintendo, MTV, Harvard, Ben & Jerry’s, and Shopify.

She specializes in architecting custom front-end frameworks designed to scale and integrate. She lives in Philadelphia and enjoys traveling, outdoor running, and #konmarie in her spare time.

Her formal training is in design and advertising. She attended Temple University in Philadelphia, graduating with a BA from the School of Communications.

She started coding her own web designs, and found her true passion to be in development. As she honed her skills, she garnered a sincere appreciation for standards-based development practices, believing whole-heartedly in the importance of an accessible web.

Topics discussed with Allison Wagner:

3:30 Allison’s career path to development
15:30 Expressive CSS
22:00 Using Patternlab and Atomic Design
28:50 Allison travelling and working adventures.
35:00 Picking a good AirBnB location
42:00 Working at the same place for a long time vs moving on quickly
50:22 The magic of tidying up.
53:27 Is your workspace actually working?
54:45 Running and getting active.
1:03:28 Career path for developers

Non Breaking Space Show is still free of charge to high school teachers along with show notes and resources: Episode № 69: Allison Wagner — Career Path to UX Developer

Super Vote Primary 2016 Edition

March 1, 2016 By Christopher Schmitt

As the story goes when the average lifespan was 35 years, an 81-year-old Ben Franklin was approached by a woman. The Constitution had been ratified that September in 1787:

“What kind of government shall we have?” she asked.

He answered, “A republic. If you can keep it.”

And he rather hoped it would stick.

As this republic was Ben Franklin’s second chance at starting up a country.

The first government, under the laws formed in the Articles of Confederation, stilted and sputtered in its actual use.

The Congress under this Confederation sent of some great minds to a team meeting in Philadelphia. They weren’t there to make what we have now.

In was in this convention, they were tasked to make only edits and revisions.

Instead, they reinvented.

A version 2.0, if you will, and people didn’t like this upgrade, this Constitution. Well, not immediately.

Congress initially wanted to censure the delegates for overstepping their bounds. Others thought it formed too central of a government. There was the issue of it being formed by well-off gentlemen much like the royalty they had fought against.

83 years after the Constitution ratification in 1870, the fifteenth amendment passed Congress to the constitution allowed men of “race, color, or previous condition of servitude” to vote.

133 years after the Constitution ratification in 1920, the nineteenth amendment passed Congress allowing women, like the one who asked Franklin about her new country, could finally cast a vote to help steer the course.

The year is 2016. It’s been 229 years since the Constitution ratification. The current average life expectancy is now 79 years — longer if you eat more of the boring stuff — and we still have a signs of life in this republic.

Some responsibility in continuing a republic, though, is voting. Voting is rather a blunt tool to steer the country.

For one, we get to do it infrequently. And second a vote is a step or two removed from the work of government.

Second, the we-the-people pick out of the few-of-the-concerned that stand up to do the government work so we can do our own jobs, attend our own families, and pursue other interests than that of government. Most people simply do not want or cannot be bothered with it’s day-to-day operations.

Yet, the vote is vital to the process. Voting is doing our part to keep this great experiment of a republic living a little bit longer.

If you are of the legal voting age and in good standing with the law, you can vote, yet so many Americans do not.

In years when there is a presidential race to decide, the voting percentage is 54.9% of all able voters. That number has not been in the 60% area since the 1960s. Those modern numbers are painfully low when deciding the a president.

Today is Super Tuesday. Americans are not voting for a president today — it’s more important. Today a large number of states hold primary elections to pick the candidates that get to run for their party’s candidate.

If you have not already, vote in the primary. (If you have already voted in your state’s primary, thank you.)

If you are not registered to vote. Don’t worry. Register to vote so you can vote in November.

Super Tuesday Primaries

Alabama
Alaska (GOP Only/Caucus)
American Samoa (Dem Only/Caucus)
Arkansas
Colorado (Dem Only/Caucus)
Georgia
Massachusetts
Minnesota (Caucus)
Oklahoma
Tennessee
Texas
Vermont
Virginia

Building Everlasting Sand Castles

February 29, 2016 By Christopher Schmitt

When we built pages out of HTML tables, we measured our designs to that of print. Books, magazines, posters, and so on.

With the arrival of multi-device web, it was obvious that the separation of print and interactive is very real. We can achieve e‑commerce, make connections, on a scale that a book simply cannot.

Yet, there is nothing like a book.

It’s a time capsule without need for a power supply — needing only our mind, the time to engage it, and the light on a sunny day.

I’m able to buy out-of-date design books off of web seller like an Amazon or eBay, just as easily I could loan a book from a designer friend.

Yet, we seem to be constantly looking for the next alternative.

I can’t go back in time and look at the content on Geocities, Apple’s iWeb pages, Gowalla social history, or the code from Yahoo! Pipes.

Even a small number of years removed from their deletion, we can never know whether how big the collection was. All we know is its absence like the great Library of Alexandria.

Winter seems like an appropriate time to have these discussions. And with the death of the prolific Bowie, even more so.

Soon Spring arrives. I would prefer to think about ways in which we are preserving our digital work — the good stuff and the mistakes—for the next generation of web designers

It is not about passing on monuments of ourselves, but it is an honest hope that they learn from our mistakes rather than repeat them.

What the answers to these questions: How are we preserving our digital work? What happens to this online work when we pass away? Can this Internet archive survive the same amount of time as a simple book?

I Can’t Complain

July 21, 2015 By Christopher

“I can’t complain,” were the words you always heard from my grandmother when you asked how she was doing.

She always said it with a crisp and positive delivery, you knew she believed those words and lived them.

Inez had the love of family and friends, a roof over her head, a passport full of stamps, and—for most of her life—a clean bill of health.

She couldn’t complain.

She was raised in Cincinnati, but was a world traveler. You name the country, Inez probably visited the place before its civil war—if it grew old enough to have one.

For the last several years, though, our focused and headstrong matriarch fell ill to dementia. At first, it was small lapses in memory. Eventually she would forget conversations that happened in minutes and start them up again.

It was frustrating, but still, she couldn’t complain.

Inez seemed to bounce back from a recent hip surgery. But after a week, her body began to falter and finally give way.

Last Saturday, her family and friends came together to say goodbye, to be thankful she’s been released from pain and frustration, and dwell in the gratitude for her presence in our lives.

I like to believe my grandmother understood what I did for a living, she just didn’t take to it.

We tried over the years to think of simple ways for her to get an email address to write to family and friends, she would refuse—politely—all attempts at IT support. She wanted to talk to you, to hear your voice, to know that you were well.

When WebTV was a thing (before it become another thing), Inez would refuse to even try it. Even the fabled easy-to-use iPad never made the cut.

She was happy that I had a job in a new land, a new medium—but she wanted no part in it.

In an era of social media, people cut down each other for sport—jockeying for virtual wins. There is a lot of hatred out there.

Ease of communication to hundreds, or even thousands of followers, means the most witty of complaints gets the most likes, the most attention.

I spent the weekend with family and friends and almost no devices, other than the occasional shared text or photo. We talked, laughed, and cried together and then went our separate ways, each of knowing the other was well.

Inez would have loved it.

Girl Develop It: Intro to Photoshop Web Design

November 17, 2014 By Christopher

In her Intro to Photoshop for the Web course at Girl Develop It Austin in November 2014, Sophie Shepherd shared her thoughts on creating digital mockups geared for multi-device delivery. Here are my notes from the course:

Basic Thoughts on Photoshop Web Design

There are a lot of ways to do the same thing in Photoshop
Developing your personal way of finding out how to do it is okay.
Become familiar with Photoshop through projects
Learn what the software can do and then slowly apply them to your workflow

Setting up Grids

Modern Photoshop version
- Select View > new Guide Layout… to bring up New Guide Layout dialog box.
- In dialog box, enter your settings for your grid
Older versions of Photoshop
- Use GuideGuide Plugin for Photoshop

Clipping or Shape Masking

Bring up Ellipse tool (U) in Photoshop
Hold down shift while dragging with mouse to create a perfect circle shape
Place photograph in a separate layer above circle shape.
Select Layer > Create Clipping Mask or press Command + Option + G to place image into the shape of the circle.
Image should be framed by circle shape.
To mask multiple images can be masked into one shape, select multiple layers above the target layer with the shape.

Typography

Create a typography box
- Press T to bring up the Type tool
- Click and drag to create a type box
- Start entering text
- The dimensions of the box can be adjusted for improved editing.
Setup a baseline for typography for vertical rhythm
- Turn grid on by selecting View > Show > Grid
- Select Preferences > Guides, Grid, & Slices to bring up Preferences dialog box
- In Grid fieldset, set color to light grey
- Select Dashed Lines for Style
- Set Gridline Every 16 pixels

Photoshop File Organization

Duplicate existing Photoshop
- Select a Photoshop layer
- Press ⌘ + J
- Name layers with meaningful labels
Group layers in layer folders
- Select multple layers
- Then press ⌘ + G
- Name folders with meaningful labels
Read Photoshop Etiquette

Resources

[Refresh Austin] Website Performance and RWD Bloat

November 13, 2014 By Christopher

Dave Rupert talks about RWD Bloat — Photo by @flipstewart

In his RWD Bloat talk at Refresh Austin in November 2014, Dave Rupert shares his thoughts on website performance in responsive web design and his approach for reducing the problem. Here are my notes from his talk:

Attack of the Web Site
- Web page file sizes are going to go beyond 200MB
  - 16% of page is made up of images
  - We are putting too many images onto our page
- This isn’t a RWD problem, but a “web building” problem
  - “Blame the implementation, not the technique.” — Tim Kadlec
- Example: DaveRupert.com, personal site
  - I’m experienced with RWD
    - Care about performance
    - I have third party ads
    - I have third party comments
    - I have multiple web fonts
    - Including an icon font
    - and I use jQuery
  - Total weight: 174kb
    - JavaScript and fonts make up most of the page weight
    - HTML makes the smallest
  - CSS:
    - 24kb file size
    - Media queries: 2.4kb
    - Vendor prefixes: 1.4kb
  - JS:
    - 41.2kb file size
    - jQuery: 33.1kb
  - Images
    - Total: 31k
  - Fonts
    - Total: 42.6kb
    - Open sans: 31kb
    - Symnbolset: 26kb
  - Total cost of web site: 4.4kb
    - The problem of bloat is not RWD
- Speed Index is a statistic to quantify how fast page “feels” on:
  - PageSpeed (Mobile)
  - PageSpeed (Desktop)
  - Start Render (3G)
  - DOMContentLoaded
  - Speed Index (3G)
- How fast is fast enough?
  - “Your site should be .5 to 1 second faster than your competitor” — Tim Kadlec
  - It’s fast enough to be a “perceived” change
  - “Speed Index under 1,000 — page loads about 1 second on a phone” — Paul Irish
- Problems in DaveRupert.com
  - No text until 2.5 seconds
  - Webfonts blocking type rendering
  - Sub-optimal image spriting (172 icon font characters?)
  - Time to first-byte is 500ms in 3G connection speed, has no CSS in it.
- Baseline
  - Home page: 1446 Speed Index
  - Article page:1749 Speed Index
  - At this point, your job becomes a video game with a goal to get Speed Index values under 1000
- The steps Dave took:
  - Removing Reset.css for Normalize.css resulted in:
    - Home page: 1376 Speed Index
    - Article page: 1412 Speed Index
  - Unblock fonts with loadCSS()
    - Home page: 1327 Speed Index
    - Article page: 1284 Speed Index
  - Could not swap out jQuery for vanilla JavaScript:
    - Guys, I did not get into this.
    - I rely on a lot of jQuery.
  - SVG Sprites
    - Remove icon fonts for SVG sprites
    - Home page: 1264 Speed Index
    - Article page: 1222 Speed Index
  - CSS Clean up
    - Home page: 908 Speed Index
    - Article page: 1126 Speed Index
  - The need for perceived speed
    - Critical CSS
      - Calcuate the style rules that appear “above the fold”
      - Print them in an inline style block in the head
      - Lazyload your stylesheet at the bottom of the page
    - Paint in the first packet
      - The first packet is 14kb
      - How much of a web page can you put into that 14kb?
      - Just do your best
      - Took two Sass partials that styled the header and top portions of the page and put them in a separate CSS file and put them into the style element in the HTML head element.
    - The results from that effort:
      - Home page: 728 Speed Index
      - Article page: 1065 Speed Index
  - Resources and thoughts in conclusion:
    - PNGQuant is a color profile stripper
    - Designers, you’re job is not done till it ships.
    - Go the distance by stripping out frames of a GIF animation to reduce file size
    - Put your site through a WebPageTest
    - Performance is everyone’s job, not just developers.

Refresh Austin: Getting Paid What You’re Worth in Business Development

November 12, 2014 By Christopher

CSS Dev Conf 2014 Parade — @sugarfreejones

In a Getting Paid What You’re Worth panel at Refresh Austin in November 2014, Adam McCombs, Tim Hamilton, and Anthony Armendariz shared how to discuss negotiating, choosing the right rate, and crafting retainer agreements. Here are my notes from their panel:

How would you define “business development”?
- Business development is growing existing business.
- Internal business development that your products you can create to sell, giveaway
- External business development is work from new clients.
- Business developments is about meaning mindful of client relationships
- Business development is attracting new clients.
  - Most of business development comes from the work and personalities of your designers and developers
What’s your current strategy?
- Take a look at your known network, i.e. the number of people have you emailed in the last 5 years, and turn those connections into seedlings and see if they grow into opportunities.
- If we’re going to be successful on Google, you have to be focused, niched.
  - We focused on “Drupal” because our target customer
    knows that term.
  - It’s limiting if you want to work on other projects,
    technologies beyond a “Drupal”, for example.
- Referrals are the biggest ways to find new work.
  - Finding, meeting other agency owners to find new or
    overflow work.
- We depend on others to refer new clients to us.
  - If their clients don’t fit them–too big, too small–they
    refer.
  - We spend a lot of money on coffee, beers–we don’t spend
    money on marketing.
- Work well with the clients and employees that you have
  because they help bring in new business.
  - Follow through on referrals you are given.
Should you separate client manager, client executive from the
person in charge of getting new business?
- What we do is trial by error
  - It’s hard for me to give up that role to someone else
    since I’ve done it for so long.
- Yes, and you should find a partner outside of my industry that’s not rooted
  in the tech industry.
  - Establishing a connection outside of the tech is hard.
- Project managers, product developers are more like
  farmers, introverts.
  - Sales lead developers are more like hunters.
How do you weed out inquiries?
- Grammar and punctuation is important in client communication.
  - Are they not emailing from a gmail.com account?
  - Mostly it’s finding people, clients that you can relate with and be honest with
  - They don’t have to laugh at your jokes, but know it’s a long term relationship. They have to find you funny at some level.
- You have a limited time to generate new revenue, so make that time most effective
  - I’ve passed on work that’s been great for another agency.
  - And I’ve worked hard to get work that didn’t pan out.
- We use core values:
  - We do a project together with a client
    - If client is not willing to go into tradeoff discussions when discussing scope creep, it’s probably best to end relationship.
    - Core purpose:
      1. Find work that pushes us beyond our current skillset.
      2. Potential to provide the client wonderment
    - If we don’t get to one of those two things from a potential project, then we won’t take the client.
  - When people work with us charge a fixed monthly fee and work agile
    - We work on a retainer
    - We work on projects that do good for human beings
How do you get paid what your worth?
- If a client’s decision to work with us comes down to money then I have failed.
  - We are don’t judged against offshore team
  - We are judged on our full solution capabilities
    - We charge a flat rate
- Continue to raise your rate till no one will pay you anymore.
- Look at pricing calculator
  - Your value is whatever it’s worth to pay it.
  - Price your rates to the market you are going after.
- We started from 2 people to 10 in a year, so we had to figure out what company to be early on.
  - We wanted to be a lifestyle company
  - In order to do that, we have to be flexible with our pricing structure
  - We shoot for 50% profit margin
  - We keep that cash on hand so that we can be picky about clients.
  - With money comes stress.
  - Never appear as a dollar sign to a client.
  - We don’t want to be thought of in terms as an hourly rate.
  - We aim for engagements that our 6–12 months and longer
How do you convince a client to work with you?
- Usually within 30 minutes of showing our work and apps, that usually helps lead to a deeper discussion.
- A lot of it dependability.
  - Who will they call when there are problems?
  - Support part of business is often overlooked
- We are going to meet our customers’ expectations
  - Then you are going to meet their desires
  - Then meet their unrecognized needs
  - Ask your clients able visualize the success of their project?
- We position ourselves as a partner rather than an agency
  - Agencies are still doing waterfall process
  - Once we think we can fit with the client, we do a three month trial to see if it will work.
What would happen if we published our rates on our web site?
- Probably nothing.
  - Put a lot of work into that thing, but clients don’t look at your web site.
  - Rates would collectively go down.
- One of the approach as an agency or as a freelancer is to show little as possible.
  - Get clients to have a conversation with you, get the facetime.
  - If you do show everything on your site, you get based on a client’s gut reaction to your site and not you or your team.
  - They will then hold what you say against what is written on your site rather than listening to what you have to say about their project.
What are the top issues your agency struggles with?
- Business development
- Finding the right talent
- How are we get our revenue to grow
- Creating a rainy day fund
- Finding office space, keeping overhead low

iTunes’ New User Interface

October 24, 2014 By Christopher

It almost begs the question: Without new features, is it really necessary to alter the look and navigation of iTunes every couple of years? iTunes 12 feels like essentially the same app as iTunes 11, only less intuitive.

That’s an easy question to answer: “Yes.”

Previous generation of iTunes’ user interface felt bloated. It’s not what one would expect from a company that made its current dominance run out of streamlining the MP3 device experience.