How to make a loading spinner GIF from scratch

Despite the plethora of spinner gifs available on the net, there are still plenty of occasions when you need to make one from scratch. There are lots of ways to get that done, so I'll just show you one that's relatively quick and painless and has worked for me.

What you're going for

A gif is just a bunch of images strung together. You don't need too many, however the more you use the more fluid your spinner animation will appear. Since spinners are usually quite small you don't have to worry much about them being too heavy. For this example I used one image for every 10 degrees of rotation or 36 images total, however you can easily get away with half that.

Tools you'll need

For this project you'll need some sort of vector editing software and you'll need to have imagemagick installed on your machine. I use Affinity designer which has all the awesome features of Adobe Illustrator without the exorbitant monthly bill. There are also some great browser based tools that will get the job done.

Imagemagick is a super useful command line tool for image manipulation. I could do an entire post on how awesome it is but for now just go ahead and brew install it globally if you haven't already.

Create the images

Open up your vector editing software and create an artboard of 100x100 pixels. You can always resize the gif down in the imagemagick build step so it's better to err on the side of too large. That will also ensure you get a good resolution in your final result. Here are the detailed steps to creating your image. If you're comfortable doing that on your own just skip to the next section.

  • Create a circle of 100x100 pixels.
  • Copy that circle and resize it down to 90x90.
  • Center the smaller circle over the larger one and use the subtract feature to get your ring.
  • Copy the ring and set it to the color you'd like to use.
  • Create a couple of large rectangles that can cover the width of the rings.
  • Place one of the rectangles halfway up the copied ring and subtract.
  • Place the other rectangle vertically over the remaining part of the second ring and tilt it to 10 or 20 degrees making sure to move it over a bit before using subtract again.
  • Create two smaller 10x10 pixel circles the color of your ring segment and place them at the ends and use the add feature to give the segment rounded edges.
  • If you want a background create a 100x100 square the size of your artboard or you can export the images as png's with a transparent background as well.
  • Group the ring and the ring segment with command G.

At this point your artboard should reflect one frame of what you'd like your final spinner to look like.

  • Export the image to a folder somewhere in your workspace and name it your_project_name01.png.
  • Go back to your editing software and highlight your ring group then grab the handle at the top and move it 10 degrees clockwise.
  • Export that image to the same folder with the name your_project_name02.png
  • Do that 34 more times until you've got a frame for every 10 degree turn.

At this point you should have a folder with 36 images numbered 01 through 36.

Create the gif

Now comes the fun part!
Open a terminal session and cd into the folder with the images.
If you've successfully installed imagemagick you should be one command away from having your loading spinner gif!

Enter the following command:

your_project_folder$ convert -loop 0 -delay 4 *.png your_new_spinner.gif

The command breaks down like so:

Convert calls the imagemagick function. -loop sets the amount of times you'd like the gif to repeat. Since we want the gif to spin indefinitely we put 0 which means infinite. -delay sets the amount of time between frames in milliseconds. Since we have so many frames we want to set it pretty fast. If we had fewer frames we could get away with a higher number. *.png is a wildcard command which just tells imagemagick to grab every file in the folder that ends with .png. If we wanted to only use certain images we could name them explicitly. The final command is whatever you'd like the name of your new gif to be.

If you want to resize your gif just add the -resize flag followed by the dimensions you'd like.

your_project_folder$ convert -loop 0 -delay 4 -resize 50x50 *.png your_new_spinner.gif

To sum it up

That's it you've done it! If you go back to the folder in your finder you should see your new spinner gif! Feel free to experiment with the look and feel of your spinner, the amount of frames you want to use, and the flags and settings in the command to get it just how you'd like it.

Now that you know how easy it is to make a spinner you'll probably want to branch out and start making all sorts of custom gifs! It can become tedious making dozens of frames for larger projects so a neat trick I've learned is that it takes very few frames to create a sense of motion in many cases--if you're strategic with what you move around.

Have fun and feel free to share what you've come up with in the comments!

Why The Pride Parade Is Important

The Pride parade and the Pride movement evolved out of a not too distant past when individuals who identified as gay, or existed outside societally prescribed norms, faced hate and violence on par with that faced by many other historically persecuted minority groups.

While it is certainly more of a celebration now than it was during it’s earlier activist incarnations, the Pride parade still serves an important function: That of publicly affirming, for those who know or remember what it’s like to live in fear and face discrimination, the right to openly live their truth—safely and without consequence. It’s an opportunity for society to show that it is evolving, that it has evolved away from a bigoted and judgmental past, and that the status quo now includes support for those who were marginalized just years ago.

The problem with the “straight parade” seems to be the same as the problem with the “all lives matter” thing. It’s not that the premise is inherently false, but that it doesn’t require public communal support in the same way. People don’t live in fear of exposing themselves as straight—we have not ever, to my knowledge, been historically persecuted for being straight. In America we have not ever been historically persecuted for being straight and white either. To say “all lives matter” is to say an obvious thing. To say “Black Lives Matter” is to say “I am on the side of progress and change in this country”. To say “straight pride” is to say an (odd but acceptable) obvious thing. Ok, you’re straight in a heteronormative culture. Cool. To say “Gay Pride” is to say “I am on the side of progress and change in this country”, I can publicly show support for a historically marginalized group without fear of repercussion.

That’s the point of the Pride Parade. It’s important because collectively we need to continue affirming the rights of all different sorts of people, until the fabric of our culture really does absorb that all different sorts of people should, in a sufficiently advanced society, share the same rights and protection.

Setting Up A Local MAMP Environment

This is the first in a series of articles that go step by step through the process of setting up and streamlining a local development environment for WordPress. It deals exclusively with configuring and optimizing MAMP. If you've already got MAMP set up, read it anyway; this way is better :S

The second article deals with installation and configuration of WordPress itself. The third introduces a more advanced and wholly different paradigm that uses Vagrant and Virtualbox to create virtual machines for bringing parity to your local, staging, and production servers. But let's not get ahead of ourselves. One beer at a time as they say!

The MAMP way

MAMP stands for MacOS, Apache, MySQL, and PHP. It's a solution as old as father time that makes it easy to spin up a web server and MySQL database locally. It's convenient out of the box, but with a little bit of extra configuration up front, you can implement as many extra sites as your little heart desires--without needing to change MAMP's working directory to switch between them. Which makes it even more convenient.

Like most things in life, there are a dozen different ways to do anything in the wacky world of web development. None of them are neccassarily right or wrong. What you use depends largely on personal preference. That said, your workflow may be dictated by your employer or the stack required for a particular project, so it's a good idea to be familiar with the most popular and time tested ones. One thing is nearly certain though: If there's a trick or a shortcut to streamline the process, somebody else has probably already figured it out and posted a walkthrough for it on the internet. Which is awesome.

I used MAMP for years before experimenting with Vagrant/Virtualbox and have gotten it about as painless and hassle free as possible to set up a new project. So without further ado, here's "the right way" to setup MAMP.

Get WordPress

Before we begin, open a terminal session and make a new directory for your WordPress project.

$ cd path/to/directory && mkdir newsite && cd newsite

go to WordPress.org and grab a copy of the latest stable release (5.1.1 at the time of writing). Unzip it in your new directory for later.

If you haven't already, download and install MAMP.

Open MAMP and make sure the document root is Applications > MAMP > htdocs.

That should be the default but might as well be certain. You can CMD + Q out of MAMP for now while we get the rest set up.

Allow virtual hosts

Go to Applications > MAMP > conf > Apache > httpd.conf

and open that file with your text editor.

Hit CMD + f and search for this line:

# Virtual hosts
#Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

Uncomment the line so it looks like this:

# Virtual hosts
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

Allow Symlink override

In the same file find the snippet that looks like this:

Options Indexes FollowSymLinks
AllowOverride None

And change AllowOverride from none to all.

Options Indexes FollowSymLinks
AllowOverride All

Change the listening port

Once again in the same file look for these two lines (they won't be right next to one another):

listen 8888
ServerName localhost:8888

And change them to:

listen 80
ServerName localhost:80

Then save the file.

Add the virtual host path

Navigate to Applications > MAMP > conf > apache > extra > httpd-vhosts.conf and open the file in your text editor.

At the end of the document add this snippet:

ServerName newsite.test
DocumentRoot "/path/to/directory"

Where ServerName reflects the name you'd like to use for your new site and DocumentRoot reflects the directory that you made earlier for your new WordPress project.

Save the file.

Allow your computer to recognize the domain

Finally, we need to make it so that the computer will recognize the new domain we've created.

Open your terminal and type:

sudo pico /etc/hosts

After entering your password you'll be editing a text file with Nano that looks like this.

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting. Do not change this entry.
##
127.0.0.1 localhost
255.255.255.255 broadcasthost
::1 localhost
fe80::1%lo0 localhost

127.0.0.1 newsite.test

Press down until you get to the end of the file and add the line:

127.0.0.1 newsite.test

Then press ctrl + o to finish editing, enter to save the changes, and ctrl + x to exit back to your terminal screen.

Change MAMP ports

Open MAMP and navigate to preferences > ports. Change the ports to 80, 8888, and 3306.

Exit out of MAMP. The next time you restart the server all of your changes will take effect.

Once you setup your WordPress installation you'll be able to navigate to newsite.test in your browser and see it! If you want a little instant gratification (or if you want to make sure you did everything right) you can go to the directory you set up and create a file with some markup and name it index.php. After restarting MAMP you should be able to see the file at newsite.test!

Rinse and repeat

The beauty of this setup is that it's repeatable for as many sites as you'd like and with the initial setup done, really easy to add new ones. Just follow the last couple steps for each new site: Add a new virtual host at the bottom of the vhosts.conf file with it's own ServerName and DocumentRoot:

ServerName newsite.test
DocumentRoot "path/to/newsite"

ServerName anothernewsite.test
DocumentRoot "path/to/anothernewsite"

And allow your computer to recognize it by using the terminal command and Nano editing you used earlier:

sudo pico /etc/hosts

Now we can get down to the business of setting up WordPress!

From Unix to K8s

Disclaimer: This is a free associated brain dump of tech topics I’ve been exploring lately, listed in no particular order and with no particular agenda. It's like... a tech topic list slam poem or something. lol

Things I’ve been interested in lately: site architecture, semantic HTML, CSS Grid, tiny CSS frameworks, utility classes, the return of static sites, Gatsby, React 16, React hooks, single page applications/SPA’s, picking the right technology for the job, knowing when you need a web application and when you’re overengineering, design patterns, design systems, systems design (yep, they're different), AWS, Lamda, Kubernetes, server administration, network security, web security, web protocols, TCP/IP, DNS, TSL, SSL, FTP, SFTP, FTPS, SSH, open source, FOSS, “free as in beer vs free as in freedom”, Unix, GNU, BSD, Linux, Debian, Ubuntu 18.04 LTS, containerization, Docker, virtual machines/VM’s, Vagrant, virtual private servers/VPS’s, Digital Ocean, virtual private networks/VPN’s, Wireshark, technology news, Hacker News, the overlap of business and technology, the internet of things, the inherent risk of the industrial internet of things, redundant systems, firewalls, ports 80 and 443, server security, airgapped networks, Redhat Enterprise Linux/RHEL, sysadmin certifications, sudo, disabling root access after initial install, command line tools, command line interfaces, nnn, Git, Github, Bitbucket, artificial intelligence, Tensorflow, PyTorch, big data, Javascript, Python, NGINX being bought by F5, Ansible, WordPress, Roots, Trellis + Bedrock + Sage,  Laravel, Blade, freelance life, contract work, UI design, UX design, patience, soft skills, scope creep, tough clients, great clients, SAAS, Indiehackers, Product Hunt, recurring revenue, the incredible endless reward of maintaining a positive attitude, work/life balance, tech evangelism, tech education, digital marketing, SEO, SEM, high level decision making, software architecture decision making, design patterns, CSS, BEM, SMACSS, Invision, Sketch, Adobe, Affinity, futurology, future proofing, the rise of surveillance capitalism, password protection, 1Password, two factor authentication/2FA, measure twice cut once, cryptography, the cryptocurrency rollercoaster, smart contracts, blockchain, Mozilla, Firefox, Apple, Google, Chrome 73, Chromium owning browser-land, dev-tools, dark mode, Facebook, Amazon, FAANG, project management, business logic, enterprise grade security, hardware + software, high level programming languages, abstracted logic, Go, python, V8, Node.js, Homebrew, NPM, package managers in general, apt-get, white hat hacking, bug bounties, startups, incubators, vested options, NDA’s, digital nomads, remote work, putting my time in in San Francisco, getting out of New York, hanging around Boston, missing my cabin in the woods of Maine, feeling blessed to be where I am, with who I’m with, doing what I do, when I do it, and for who—and why. Always why.

Why I’m not mad about the Brooklyn invasion of Portland

The secret is out. Portland is amazing, and Brooklyn knows it. Not just Brooklyn but greater New York and Boston money have been flooding Portland for the last few years and its showing. Fancy modern condo buildings on every block of Munjoy Hill, skyrocketing rent prices, and homes selling for more than their already inflated asking price. Bearded hipsters and beautiful young women at all the new bars and restaurants buying 15 dollar cocktails from trained mixologists and eating spicy tuna served on.. slabs of raw tuna.

hipster-irony

But while the old guard of veteran Portlandians understandably yearn for the grittier days of the city they remember; while more and more people are displaced from the peninsula by the seemingly impossible ascent of the housing market; many of us who have ridden the gauntlet of the stagnant Maine economy for the past 10 or 20 years welcome this influx of money and youth and excitement into our fair city.

Let's face some facts. A city either grows and evolves, or stagnates and falters. While we may be mourning the loss of some of our favorite institutional dives, watching in subdued horror as they're replaced by the latest trendy beer garden, the simple fact remains that without the vitality and financial influx offered by our hipper neighbors to the south, our city and state would continue to hold records like oldest and most un-business friendly. We simply cannot have a progressive future without accepting some change.

Have you noticed how many new businesses are opening? How many breweries and coffee shops have sprung up in Bayside and near Anderson Street? How many hotels and apartment buildings have been built in the Old Port and on the east end? While the curmudgeonly 30 somethings who have been grinding it out playing cover songs for the last 15 years and living with six friends in oversized flop houses by USM bemoan the gentrification and not so secretly resent the moneyed tech friendly Brooklynites who came up to the secret city to start a family and live at a slower pace nearer to nature, they seem to be missing the simple fact that these newcomers are the economic engine that will propel this mini mecca into the future. We're all going to benefit from their presence if we learn how to tap into the vein they're running in.

portland-maine-cityscape-skyline-hdr-panorama-cropped-smaller

Look, I get it. I was at Occupy. I put in my time living paycheck to paycheck for longer than I care to admit. But when I look around Portland, I don't see a city I cannot recognize and identify with, I see opportunity. I see new jobs, new entrepreneurial ventures to start, and a base of people with real dollars to spend. For too long we've been sloughing by on just barely enough in this city and quite frankly I'm sick of it. I don't want to have to move to New York to make 80,000 dollars a year. I don't want to have to leave my home in order to have a career and build a financial base. I want to live in a Portland that is thriving and alive and growing, and if that means I have to put up with more triple latte frappacappawhateverthehells to do it then so be it. I see a city that is experiencing growing pains, but is headed in the right direction. And while it's on the radar, it hasn't fully exploded yet, and that means that there are plenty of opportunities to participate in its evolution. To guide it in a direction that works for all of us. I for one will be right here growing alongside the city I went to college in, became a man in - in the state that I was born in and intend to grow old in. And if the alternative is watching our state deteriorate while every financial opportunity goes elsewhere, then I will gladly accept the New York invasion.

I know this will piss a lot of people off. But I'm a pragmatist and at the end of the day I want whats best for the whole state. And right now what we need is a steady stream of new money, new ideas, and new people to help Maine become a serious participant in the future of our country. Let's not get left behind. Let's welcome these folks with open arms - let's not alienate our fairer friends from the land of cool. Let's work with them to make a Maine that retains it's ideals of hard work and sticktoitiveness by sharing our home with these interesting and wealthy people who obviously came here for a reason. If we work together we can move forward without leaving anyone behind.

 

 

 

Creative versus analytical thinking

Things get done in a lot of different ways. Sometimes you have to think big, think outside the box, and be wildly creative. Sometimes you have to knuckle down, focus on the details, and grind out the "boring stuff." Sometimes you're lucky, and you genuinely enjoy working on both sides of the equation. If you're not, you can probably learn to be.

intelligence

A lot of people come up with great ideas but struggle with execution. They'll invent the next app or come up with the perfect business idea only to falter when it comes to bringing the product or service to life. It makes sense. Having a great business idea is fun. Writing a business plan might not be. Thinking of an app that links people with the nearest group of partiers in their neighborhood is fun. Getting down to coding, design, scaling, and marketing might not be.

But a lot of the time it's not that those things are impossible or even that difficult; they simply require a certain amount of dedication, resolve, ingenuity, and perseverance. They also require a sense of direction. The next time you have great business idea, write it down. But then go on this incredible thing we have access to called the internet and read about how to write a business plan. Read about how to go from ideation to execution. Read about real world examples of people who have achieved these feats and try to mimic their process.

Focus on your strengths and develop your weaknesses. If you're a creative, work on Excel documents and forecasting. If you're an analyst work on logo design and innovative marketing campaign ideas. Even if you wind up outsourcing or hiring for those roles, it is invaluable to have put some time in understanding them. When the going gets tough, reach out for help. It's amazing the amount of resources we have at our disposal if we're willing to ask. Talk to local business leaders, others in your field who have made it happen, and remember to keep on doing it every single day. Nothing big happens overnight.

Whichever side of your brain you emphasize, remember that just because you're good at one thing doesn't mean that you can't be good at another. At the end of the day you've got a whole mind and you don't have to pigeonhole yourself. It's ok, even great to specialize in something, but it's important to broaden your horizons as well and work on the sides of things you normally wouldn't. Especially as an entrepreneur!

Where The Magic Happens

321223_287644471246348_100000023926508_1208317_1256433384_n

I want to help people out. But I'm just a guy going through life - I need help too! I gave it a lot of thought before making a blog - or recording myself blabbering for a podcast - maybe too much thought! Despite it seeming at times presumptuous, I decided that my little soapbox is worth it.

Putting yourself out there can be really uncomfortable. Real people are reading the things you write, and listening to the things you say, and have some valid reasons to disagree, and pick you apart. You can spend a lot of time second guessing yourself. But at the end of the day, if you don't get out there, you'll never get where you're going!

So if you're considering taking a leap of faith - If you're considering doing something that your intuition is calling you toward - If you're considering climbing out of your comfort zone - I would say do it. It might be grindy at first, it might be grindy for a while! But you're going to be better for it; and that experience will make the next time you step out on the ledge a little less terrifying.

 

 

Is this how this works?

I'm sitting here at my desk (which is a stainless steel prep table) in the back office/kitchen of the Juice Cellar in Belfast Maine. This is command outpost number one for me; command center is my desk at home. From here I am writing what I hope will be the first of many blog posts. I'll try to give them some direction but I'll be perfectly honest - I have no idea what direction quite yet. There are so many things that occupy my time and mind, so many ambitions, hopes, dreams, goals, that I can sometimes suffer from a touch of overstimulation stasis. But like many things for me, I have been analyzing and understanding this problem (a more desirable one than most) and implementing an action plan for dealing with it. Part of that action plan is articulating what it is I want to do and think about; making lists, checking things off, getting organized. So maybe a part of this blog will be about helping you (the fine reader) to analyze your own situation and implement your own solutions. Sometimes it helps to watch someone else go through the process to see what you can do better, and what shitty steps you can skip over.

trueselfSo without further ado, I welcome you to post number one of "The Everythingist" - My blog about life, time, and moving toward authentic happiness.. Let's see what happens!