Joel M Turner

Animated CSS Timer Icon

joelmturner — Sat, 11 Nov 2017 20:21:49 +0000

I recently had a need for a timer/revert icon that can animate forward and backward.

Features

Pure CSS

I wanted it to be a purely CSS and HTML versus an animated SVG or GIF so it can be manipulated more easily in the browser.

Adjustable Size

The size of the icon is relative to the wrapper so setting a different font-size will scale the icon proportionally.

Animation in Multiple Directions

The icon needs to animate forward and backward as well as have a rest state. The animation uses CSS keyframes based on the classes, ‘forward’ and ‘backward’.

CSS Timer Icon

See the Pen CSS Timer Icon Animation by Joel Turner (@joelmturner) on CodePen.dark

CSS Timer Icon as React Component

See the Pen React and CSS Animated Timer Icon by Joel Turner (@joelmturner) on CodePen.dark

The post Animated CSS Timer Icon appeared first on Joel M Turner.

My Best Hand Lettering and Sketches of 2016

joelmturner — Mon, 16 Jan 2017 20:33:25 +0000

After my year of lettering I continued going with my hand lettering and sketches on a daily basis. Much of my practice was inspired by other hand lettering and sketch artists that I found through Instagram. Looking back on 2016 I can see that I enjoy geometric shapes and ancient ideas/concepts.

Here is a collection of my best from 2016.

Interactive

This is how to get stuck in an analog social loop.

You Won’t Believe the Ending!

Static

The post My Best Hand Lettering and Sketches of 2016 appeared first on Joel M Turner.

Playing with Type

joelmturner — Fri, 26 Jun 2015 23:20:44 +0000

For the past month and a half I have playing with hand lettering to help me practice more hands-on design. I have chosen to spend about half and hour each day on each (longer on weekends) and not to edit them digitally.

Each day, I post a new lettering sketch on Instagram and log the medium used on Google+.

Here are the creations so far:

Follow on Instagram

The post Playing with Type appeared first on Joel M Turner.

Post Modern Jukebox Art

joelmturner — Fri, 12 Dec 2014 08:15:17 +0000

After seeing Scott Bradlee and Post Modern Jukebox live in Portland on their Eviction Tour, I was inspired to create some promo images.

Post Modern Jukebox Artwork

This first graphic is based on the design of the Post Modern Jukebox website.

Scott Bradlee Art

This one is for the Scott Bradlee who put the group together, writes the arrangements, and plays the piano. The poster is based on the jazz style event posters.

Robyn Adele Anderson Art

The next one is a promotion of one of the main singers, Robyn Adele-Anderson.

The post Post Modern Jukebox Art appeared first on Joel M Turner.

Getting Sassy With Sass: Nesting

joelmturner — Fri, 03 Oct 2014 20:56:59 +0000

As I’m learning to use Sass I decided to jot down some of the basics for reference. Most of this is coming from Hampton Catlin‘s Sass Basics course on Treehouse (referral).

Nesting Selectors

The selectors can be nested for ease of writing and reading. This can help organize code in a way that like selectors are together. It also keeps us from having to repeat strings of selectors.

A quick example would be:

Sass:

.selector1 {
	.selector2 {
		color: red;
	}
}

CSS Output:

.selector1 .selector2 {
  color: red; }

You can even go deeper if you would like. Let’s take a look at 4 levels deep (the suggested maximum depth for Sass).

Sass:

.selector1 {
	.selector2 {
		color: red;
		.box {
			background: blue;
			h1 {
				color: green;
			}
		}
	}
}

CSS Output:

.selector1 .selector2 {
  color: red; }
  .selector1 .selector2 .box {
    background: blue; }
    .selector1 .selector2 .box h1 {
      color: green; }

Using the & Symbol

There is a helper character that makes referencing parent selectors much easier. This character is the ampersand (&) symbol.

Sass:

.blog {
	> h1 {
		color: red;
		border: 1px solid red;
	}
	.entry {
		 h1 {
			font-size: 20px;
			color: blue;
		}
		p {
			font-size: 12px;
			margin: 20px;
			html.csscolumns & {
				column-count: 2;
				column-gap: 10px;
				margin: 10px;
			}
		}
		a {
			color: red;
			&:hover {
				color: blue;
			}
		}
	}
}

CSS Output:

.blog > h1 {
  color: red;
  border: 1px solid red; }
.blog .entry h1 {
  font-size: 20px;
  color: blue; }
.blog .entry p {
  font-size: 12px;
  margin: 20px; }
  html.csscolumns .blog .entry p {
    column-count: 2;
    column-gap: 10px;
    margin: 10px; }
.blog .entry a {
  color: red; }
  .blog .entry a:hover {
    color: blue; }

The post Getting Sassy With Sass: Nesting appeared first on Joel M Turner.

Choosing the Decisions We Make

joelmturner — Wed, 22 Jan 2014 02:07:29 +0000

You know that feeling of being run down by the overwhelming weight of the decisions that you have to make on a regular basis? I definitely have, and I’ve been practicing a solution that is working for me.

Decisions Use Energy

All decisions take up energy as we try process them. I’m starting to see this as neither good nor bad. What is important is where we prefer to extend our energy. This doesn’t mean that I want to automate everything and then sleep on the beach all day. There is a therapeutic beauty in daily practice of things we enjoy, like a Japanese Tea Ceremony.

I’ll share an example from my experience. Making a decision of which trail or path to run on is a decision that I enjoy making. Trying to figure out which bills I need to pay at what time is not a decision process I enjoy.

From The Simple Dollar:

If we can find ways to take some of those decisions out of our hands, we reduce the number of active decisions we have to make in a given day. Thus, our decision fatigue is reduced and we’re less likely to make poor decisions due to such fatigue.

Our solution is to automate little decisions. We do this by spending time up front thinking of ways to eliminate some of our little regular decisions. Even eliminating tiny decisions really helps.

Automating Tasks That Aren’t Important

There are so many tools available that can help us with those decisions that we don’t enjoy as much. It might take a little work up front but the ease of mind later on is totally worth it.

Using the bill paying example above, I have set up my bills to be paid automatically based on the days that I get paid. This helps free my mind from trying to hold it all in my mental calendar. It is so simple and it is very easy to forget that it is simple.

Choosing the Decisions We Make

Automating some of these tasks allows me to enjoy the tasks/decisions that I enjoy to have as part of my daily routine. By doing this, I feel more fulfilled and have more energy to give to my favorite tasks.

I can reassess these automated tasks and the tasks that I enjoy every few months to see if they are still working to my benefit. This is much less upkeep than having to deal with them all daily.

What decisions do you enjoy making? Which would you prefer not to make as often? Are you able to automate some of those tasks?

The post Choosing the Decisions We Make appeared first on Joel M Turner.

Creating a Daily Routine for Freedom

joelmturner — Sat, 18 Jan 2014 01:24:18 +0000

The more I explore myself, the more I realize that my “freedom” is not from not having anything to do but by doing things that give me purpose.

Watching the Clock with Nothing to Do

image source picjumbo.com

I spent many years without a daily routine. Not having a routine made me watch the clock, not getting anything done and I found it hard to feel fulfilled at the end of the day.

Not having a routine made me check the time often and gave me a feeling like I was wasting time in some way. I wasn’t sure how to get things done or which item I should start next. There were no priorities and therefore, no way to know what was important.

Creating a Daily Routine

It seemed counter intuitive to me but setting a full daily routine has helped me feel more free. I think part of the freedom feeling is feeling fulfilled. Doing what is important to me helps me feel like I have taken care of my list, even if some office work doesn’t get finished.

Creating a daily routine for me is about simplicity. If I do the things that are most important for my welfare, I feel fulfilled. For me, if I do my daily meditation and mantra practice, I feel good, even if more work came in than I was able to finish.

I have noticed that doing something daily, even if it is only for a few minutes a day, makes me much better at it. Aly Dunne (@thewayofmantra) explains how a daily practice is like a river wearing down rock over time.

Here is a quick view of my daily routine:

Wake up, meditate, chant
Drink elixir (modified from Apple Cider Vinegar Elixir), walk dogs, start hot water for tea, sing to my kombucha scoby
Work on graphic/web projects
Eat lunch
Work on graphic/web projects
Go for run, walk dogs, walk by myself
Meet with friends, network
Wind down, sleep

Resources for Optimizing the Daily Routine

Here are some of the tools and resources that help me develop and stick with my routine.

Aly Dunne, my Sanskrit Mantra teacher
Insightly, meditation timer
Amazing routines of 7 successful entrepreneurs, Buffer blog
Benjamin Franklin, Parade
Leo Babauta, founder of Zen Habits
StayFocused, Chrome tab blocking app
Buffer, social media sharing tool

Your Routine

Do you have a daily routine? If so, what have you noticed by following it/not following it?

The post Creating a Daily Routine for Freedom appeared first on Joel M Turner.

The Doctor’s Companions

joelmturner — Mon, 25 Nov 2013 18:36:05 +0000

In honor of the 50th Anniversary of Doctor Who, my wife and I decided to do a little tribute to the Doctor’s companions in the series. This post covers some of the companions from the new series.

Curating assistance on this post by Suzanne Turner (DelysiaStyle).

Rose Tyler (Billie Piper)

Image Credit

Jack Harkness (John Barrowman)

Image Credit

Mickey Smith (Noel Clarke)

Image Credit

Donna Noble (Catherine Tate)

Image Credit

Martha Jones (Freema Agyeman)

Image Credit

Wilfred Mott (Bernard Cribbins)

Image Credit

Amy Pond (Karen Gillan)

Image Credit

Rory Williams (Arthur Darvill)

Image Credit

River Song (Alex Kingston)

Image Credit

Craig Owens (James Corden)

Image Credit

Clara Oswald (Jenna-Louise Coleman)

Image Credit

The post The Doctor’s Companions appeared first on Joel M Turner.

Our Favorite Heroes, Then and Now

joelmturner — Tue, 27 Aug 2013 06:15:57 +0000

Most of us grew up watching or reading about our favorite heroes fighting crime and saving the innocent. Sometimes it’s fun to take a look back and see how the roles have progressed during our fandom.

Here is a quick look into some of my favorite heroes from my younger years and versions I enjoy now.

Tron

Captain Kirk

Superman

Batman

Doctor Who

Incredible Hulk

Obi-wan Kenobi

The post Our Favorite Heroes, Then and Now appeared first on Joel M Turner.

Running with Mantras

joelmturner — Wed, 24 Apr 2013 16:55:08 +0000

I wanted to share an awesome experience I had while running recently. First, a little back story. Suzanne and I have been attending a mantra group every Friday evening for the past month. This is something that we thought would be great to learn about and practice. The leader of the group is Aly Good and she has been a great teacher of the practices. You can learn more about Aly and mantras on her site, thewayofmantra.com.

We usually go through three or four different mantras each Friday, repeating them 108 times. These are very satisfying mantras and they definitely come up in your mind while you’re doing other things. This has been happening on my runs recently, especially since my headphones stopped working and I am back in my head while I’m running.

I went out for a long run a couple of days ago. Since my headphones are kaput, I decided to focus on the sounds of my steps and make sure that my form was nice and clean. It’s a good thing I can hear my feet again because they were slapping all around the place before.

About a year ago, I talked about how I use my runs as a meditation. This run was one step beyond that even. After a few steps a mantra started going through my mind. This mantra was repeated throughout my entire run. It helped me stay focused and in tune with my run. The mantra that I was reciting was this:

om gate gate, paragate, parasamgate, bodhi svaha

This is known as the Gate Mantra and translates to OM gone, gone, gone beyond, gone beyond even the beyond, hail the goer. This is one of my favorites that we do because it makes some great vibrations when spoken. I’m not sure why it was this one that came to my mind but it was perfect for my run.

I was able to keep a steady pace without trying hard. It helped me keep my rhythm and my strength throughout the entire run. I will definitely be exploring more mantras while running to see what other kinds of things happen.

Image Source

The post Running with Mantras appeared first on Joel M Turner.