An Entire Life In Pictures

Do you think anyone has had their picture taken every single day of their life? If it hasn’t happened yet I don’t think it’s that hard to imagine it will happen at some point, cameras are just so damn accessible now.

My daughter is almost four months old and I’d be shocked if either me or my wife haven’t taken at least one picture of her each day since she was born. We’ve done a decent job of archiving them on her Tumblr but I know we missed a few days of posting.

I think that at some point in time, whether it’s done intentionally or not, there will be at least one person who will have had their picture taken at on every single day of their life.

Imagine if someone did this intentionally and managed to archive all the pictures in chronological order. If they lived to 85 that would be and entire life in at least 31,025 pictures, it would be absolutely insane and so emotional to look at them all.

Does anyone know of this happening or taking place right now? I’d love to follow it.

Why No Yea Bitch?

In the final episode of Breaking Bad, when Jesse is set free and drives through the gate he screams but doesn’t let out a signature “Yea Bitch!”. Why? This would have been the perfect time to throw just a tad bit of humor into an otherwise completely grim situation. 

30 at 30

Yesterday I turned 30 and keeping with my tradition here are 30 nuggs of knowledge I’ve acquired in the past year.

1. Life is fragile, I mean flip of a coin fragile, so cherish those close to you. 

2. You won’t always get credit for the things you accomplish.

3. Cheeseburgers are still my favorite food.

4. STFU about your cool idea and start building it.

5. If you are still thinking about your cool idea rage quite your browser right now and go start building it.

6. Nothing can prepare you for sleep depravation.

7. The dream of the 90’s is alive in Portland.

8. Go slow.

9. You might be sitting next to someone really important right now and not know it so be respectful.

10. Be respectful anyway.

12. Design isn’t just a visual thing, design your life.

12 It’s ok to like your job.

13. It’s ok to hate your job.

14. Doctors are heroes, like for reals.

15. Find time to do nothing.

16. No matter how many times you photoshop someone’s boobs or junk it feels sketchy.

17. Go to NYC and explore.

18. Organizing something on a large scale is hard as shit.

19. You can give up on an idea and come back to it later on.

20. Durham is cooler than Raleigh.

21. Brussel Sprouts.

22. Just ask.

23. I would much rather hear about your life than your opinions on someone else’s life. 

24. Last year I took NC for granted.

25. I don’t know nearly as much as I thought .

26. I don’t actually like movies.

27. Seeds produce way more plants than you might think, check yo self when starting a garden. 

28. Sunshine.

29. Don’t wait too long, time flies.

30. You are doing just fine, try and enjoy it.

Getting Started With Framer JS

I’ve been working with Framer JS for a couple days now and I must say it’s freaking awesome. A few people asked for some tips on getting started with it so here goes.

I’ll break it down into three parts: PSD Setup, JavaScript, and a Demo. Don’t worry about this making too much sense as you’re reading it, just get through it and peep the demo I provide, it will help you see what’s going on.

PSD Setup

When you have a PSD open and run Framer it will export each group in your PSD as a PNG file to an images folder. Keep in mind this means EVERY group, including nested groups.

Since Framer exports every group it can get a little sketchy when you have mad amounts of nested groups. If you’ve got groups on groups on groups you’ll probably want to isolate them a bit and break them down into bigger parent groups.

I do this by identifying and naming the groups I want to export as specific elements like “NavBar” or “Button”. Then I duplicate the group, rasterize it to a single layer, regroup it and then name accordingly.

Note that Framer will not export groups you don’t have visible (the little eye icon) so I also like to turn off the visibility on the groups I don’t want to export and assign a color to the groups I do want to export.

This is what my PSD looks like right before I run Framer.

And this is what you will get in the folder that Framer creates.

The really cool part is that you can update your PSD as needed, run Framer again, and as long as you don’t change group names it will update in your HTML file.

JavaScript

So before I get into the JavaScript I want to warn you that I know pretty much nothing about JavaScript. This is literally the first time I’ve ever written my own JavaScript so I’m sure it’s completely jank. Take this all with a grain of salt lol.

When you run Framer on your PSD it will also create an app.js file. This file looks super scary when you first open it if you don’t know JavaScript but now worries, just delete all the code in that file, it’s not needed.

If you know JavaScript go H.A.M. and start animating the hell out of your prototype. If you don’t know JavaScript a good first thing to try is making an image invisible. You call up the images Framer exports by doing this in the app.js file:

"PSD.ImageName"

Where the “ImageName” part is the name of whatever image you want to animate. There is no need to include the .png extension. Then you can apply JavaScript to that image.

To make that image invisible you would do:

"PSD.ImageName.visible = false"

This is a great place to start because with prototyping a good portion of what you will be doing is showing and hiding things on click, or some type of similar interaction. I’m not going to go into the JS too much more but dig around a bit and look up how to change X, Y coordinates, that will also be super useful.

Demo

I created a prototype for this post with a made up RPG app called “Demon Slayer”. I’m a dork like that, don’t hate.

Download the Demo and open the index.html file in a browser. Click on the home screen to see the app launch, then click on the launch screen to see the main app screen animate.

Pretty cool right? This prototype looks a lot cooler than what is actually going on and that’s the beauty of Framer. If you open the app.js file for my demo you will see that the only two things I’ve really done is hide some of the images at first then display them on click events with some subtle animations. The buttons are always there, they are simply moved way to the left on the X coordinate and then brought back in when clicking on the launch screen.

My JS is probably jank as hell but who cares. Don’t worry about whether or not you are doing the JS right, it shouldn’t get used in production anyway. As long as you can figure out a way to give someone a visual representation of your idea you’ve done well. Besides, anything you create with Framer is going to be way better than a set of static JPEGs.

Thanks for checking this out. If you’ve got any tips or if I’m incorrectly explaining something let me know @brandonhoulihan.

3 Months

Today marks 3 months since my daughter Lucy was born, which is bizarre and amazing in so many ways. To see her alive and doing so well is nothing short of miraculous.

One day I’ll find the right place (or create it) to tell her entire story, but for right now I just want to reflect on how grateful I am that she is here and think about the doctor’s and nurses who made it all possible. I wish I had a proper way to tell them and Duke University just how much they mean to my family.

I’m a happy dad today =)