022 I did it! An update that only took 8 years!

Wow. My first post in 8 years! I’m not counting the one in 2022. Lots has changed and lots has not. I have and I haven’t. The joy of building things is intact and transferring my thoughts into writing continues to get easier. Articulating them is still a work in progress. If you have been at the end of one of my ramblings you are probably nodding right now.

What triggered this post? I heard the phrase You cannot step into the same river twice the other day and I thought: I should write this down. Which reminded me that I want to write more, that I want to go back to my CSS, and SVG, and Color, and layout experiments. Have some fun with this site. So I’m restarting with this list of what I’ve been up to. Might add some images later.

Got a new job! (2019)
Jumped straight into an industry I was very unfamiliar with. It’s been a really fun challenge and I’m lucky to have been given great agency to lead and create UI/UX solutions in a high-stakes environment. It does happen to come with a big NDA stamp but luckily some of my work has received some very public shoutouts and awards recently. I happen to have a fantastic team so here goes a thank you to Freddy, Venu, Anitha and Soniya.

Had a second Baby! (2020)
She’s now 5. She’s a joy, and she’s smart. So smart. Super smart. Annoying-parent-bragging-about-how-smart-my-kid-is smart. So now, because I have two kids and humans can’t help themselves with questions like: Who’s your favorite? Which one is more like X? I now find myself pressured to tell you that my 8 year old is also smart. She also happens to have a fire within her. A super power. The kind that will change the world. She is also pretty great at making friends, and friends come with playdates, and playdates come with meeting their friends’ parents, and meeting their friend’s parents has led to some new awesome friendships. I tend to gravitate to other folks that are also just trying to figure it out. And Bluey, they must appreciate Bluey.

Moved! (2022)
From Washington Heights to.. Washington Heights! Not a very exciting update but moving is hard. Moving is expensive and we really like our new place so, landlord, if you are reading this, go easy on the rent raise, that Trader Joe’s bill keeps getting heftier. On the affordability note, it does seem like the whole country has a stake in everything our shiny new mayor and our neighbor rep from the 14th district (and future presidential candidate) are up to. In Jon Lovitz voice: Jealous?!

Random Design Things!
Have been doing some mentoring. I owe a lot to my mentors. The Pauls, Urshulas, Irvs, Courtneys.. I try to pass down some of those lessons about design, about being a good human. I’ve also been doing some fundraising, mostly for my kids’ school because the richest country in the world makes an elementary school choose between Art or Music. The answer is always both.

I helped my High School buddy with a logo and a website for his Football Academy. That brings my total of soccer lion badges to two!

I’m currently rewiring my brain muscles moving to Affinity because Adobe pricing is out of control and Figma is on a bloatware mission. I’m talking about you, Figma Make. I may be cooked, and my favorite tool might also be cooked, and there’s a new release around the corner that will cook whatever is currently doing the cooking, The cookee and the cooker are coming for us. Still, I refuse to offload the things that make me human, the things that give me joy, the things I’m pretty darn good at, to a machine.

I’ll end it here but more to come soon! Definitely maybe not another 8 years! If you’ve stumbled upon this post: Hi! I hope the internet is being kind to you. Probably stay off twitter. If I know you, or if you know me: Hey, you! I hope I am being kind to you. If not, let me know. Though I am totally giving you the side eye if you are still using twitter.

JP

NaN Begin Again

2026 note from JP: I quoted this snipped about 4 years ago as I was going through some post-Covid challenges, fuck Covid. The excerpt below is beautiful and still resonates but then there’s Sam Harris. Who one can compare to J. K. Rowling in that they built a safe space for folks only to then reveal they have some violent views towards others. Yes to meditation, yes to encouraging kids to read. No to hateful rhetoric.


Needed a pick-me-up, and this snippet from the Waking Up app hit the spot. Here’s my flawed attempt at transcribing it.

The whole point of life is not to arrive, but to begin again.

Because everything you’ve done, or not done, is now just a memory.

And everything you are telling yourself about the future, is a half-truth at best.

Because however good or bad things seem: nothing lasts.

Because there’s so much more to life than talking to yourself, about yourself.

Because this moment, is wide open. The world itself, is wide open.

And no one knows how good life can be.

Because in this moment, there’s always an opportunity, to stop looking over your own shoulder.

In this, living instance, and only here, this is where you can lose the mask that you’ve mistaken for your own face.

This next moment it’s truly new and totally unexplored,

And that’s always the case.

So, wherever you’ve come from, however hard things have seem, whoever is in your life, and no longer in it.

Whatever has been done, or left undone,

Just begin again…

2018 NYCFC Featured Collages

For this years’ Matchday newsletters we featured a different player for every game, 34 total. I got inspired by the black and white collages on this article by Goal.com (great read btw!) and recruited Patricio Cuvi to help me with a lot of the Photoshop magic. They looked pretty awesome on the newsletters but since they were so small thought it would be fun to make some posters out of them.

A big shout out to Project Director Janine Padilla!

It’s my first time doing this download thing. Please shoot me a message on Twitter at @jupago if any of the links doesn’t work.

021 The Year of the Grid

2017 was a pretty awesome year.


Personally, Betty and I worked on a couple of cool projects; the one below by far our (90% her) finest.

She’s taken our sleep breath away.


Professionally, started speaking, mentoring, teaching, and got to work on a ton of fun projects as a freelancer. Will probably write more about that in another post, but for now I want to focus on the one that I enjoyed the most: CSS Grid.

It all started in 2015 at An Event Apart in SF.

Jen Simmons gave a fascinating talk on layouts that spoke to the designer-forced-to-learn-how-to-code in me, the one that had succumbed to floats and taken a sabbatical when Flash died. The next day at that same conference, Rachel Andrew took that spark to the next level by introducing me to CSS Grid.

I was hooked!!

Two years later, with help from one awesome meetup hosted by Jen and THE course on CSS by Rachel and I’ve become confident enough to speak at a couple of conferences about Grid and share my enthusiasm with others.

WordCamp NYC 2017

WordCamp Boston 2017
WordCamp Boston 2017

WordCamp Mexico City
WordCamp Mexico City ’17
Photo: https://goo.gl/othjVi

One of the things that I’ve been wanting to do is put together all of my demos in one place. Anything from actual sites I’m working on, to book covers, to random snippets. If it sounds similar to what Jen Simmons did with labs.jensimmons.com …it is! Her work is my main inspiration and I can’t credit her enough.

I’ll aim to upload one a week so I can get on a schedule (I know.. I know.. me and schedules).

First one is live here!

(Eventually adding the page to the top menu. I’m designing my portfolio on the browser so I have to go back and rethink what I initially *assumed would be a very small menu).


*assumed: last word an UX Mentor should use.

020 Mexico Lindo y Querido

Mom and Dad just had their 40 year anniversary.

Forty…

Forty

Forty!!!

My brother (also known as Ficha Azul) and family flew here from California for a surprise party. Here are a couple of photos of them back-in-the-day that we printed for the event:

Wedding
Mom and Dad
Wedding
Dad Kid
Mom Kid
Family

Family
Don’t mind the kid wearing a green hat and looking a bit upset.


It was also my 8-year-old nephew’s trip back to NYC after many years, so decided to make it an adventure.

Designed a few quick badges he had to earn for points, the last one being the coolest badge of all: A sleepover under the big blue whale at the American Museum of Natural History. There are times when you do things you don’t enjoy for others. This was not one of those times. 122 fricken’ feet fricken’ Titanosaur!

My nephew documenting an empty Dinosaur Hall

Built him a quick website to have as a souvenir, keep track of badges, and perhaps add or redo at a later time!

Badges, badges everywhere!


And last!

Spoke at my first conference in Spanish, in Mexico City.

The title of the talk was “Llegó CSS Grid” (CSS Grid has arrived). I got super inspired by the work of Jen Simmons and Rachel Andrew that I decided to speak about everything I’ve learned,

Will probably do a full post on the whole experience and content, but overall, it was pretty awesome. Got people excited about CSS Grid, and made a lot of new friends.

If you are reading this and design for the web go go go go learn about CSS Grid

*Just Google anything Jen or Rachel above have done and you’re on a good track.

A couple of Screenshots from the Live Stream

A couple of Screenshots from the Live Stream


And Bonus!

Started working as a Mentor at Bloc, will probably follow up on another post once I get some more experience. So far it has been pretty cool. The curriculum is great and they have built an awesome community around it.


My June has also being pretty hectic, though it started with me googling:
Fix flashing question mark folder when I try to start my mac“…

(╯°□°)╯︵ ┻━┻

I’m back in good shape, so…

┬─┬ ノ( ゜-゜ノ)

But still, come on Apple, these new MacBook Pros are super buggy…

┻━┻ ︵ヽ(`□´)ノ︵ ┻━┻

But then again, me whining about an expensive laptop is definitely a first world problem.

┬─┬ ︵ /(.□. \)

019 Oh Hai!

The following is a conversation between JP and Jupago. It happened on a chilly Spring morning as the snow from the three previous storms was finally starting to melt.

[JP] So..what’s up, It’s been a while. When are you writing your next post.

[Jupago – JPG] Almost, almost, gotta have something awesome.
I’m working on a few things. My Projects page is almost done. I have two case studies I started writing..

[JP] Cool, so.. when?

[JPG] Soon.

[JP] When?

[JPG] Soon.

[JP] When?

[JPG] Soon!!!

[JP] When?

[JPG] Tomorrow.

[JP] Are you sure?

[JPG] I’ll try.

[JP] Not good enough..

[JPG] I’m busy man..

[JP] I’m just going by what you promised, that you’d write more often.

[JPG] I did, but what if I miss a few, it is not like I have a million readers.

[JP] But you said you are doing this for yourself.

[JPG] Fine… So I’ll write something quick tomorrow then try to go back on a schedule. Fair?

[JP] ಠ_ಠ

[JPG] What?

[JP] Can you create a schedule?

[JPG] Like a publishing schedule? I don’t even know what I’m going to write about tomorrow.

[JP] Yeah. But not just for your posts. For the other things; the case studies, the projects page. etc.

[JPG] I could I guess.

[JP] Could? Guess?

[JPG] I suck at estimating. I think It will take me 20 minutes, it takes me three hours. I think it will take me a day and it takes me one hour. What can I do?

[JP] I suck at estimating too. We all do.
A couple of things I can think of:

  1. The “set big goals” thing is awesome, you’ve managed to learn a lot in the past few months, but I think you need to modify the structure, it feels a little.. vague?
  2. You are too wired man. No need to watch Oz while you work, no need to have pushbullet sending you text messages. Focus!
  3. That daily list thing you started making is working. Get it started the day before if possible
  4. Be honest with your clients. They all love to have their stuff as soon as possible. But, you can’t always do it fast and well.
  5. Going to sleep at 3am..

If you give me 20 minutes I can come up with another 30..

[JPG] Let’s just start with those 5.

[JP] Works for me. So, we have another chat in a week?

[JPG] OK…

[JP] Not convinced? Want more time? Let’s make it 2. Just make sure you follow through.

[JPG] Ok, two is good. Two is great. Thanks for this. Let’s do this!

[JP] Thank YOU

[JPG] No, Thank YOU!

[JP] No, Thank YOU!

*if { another Thank YOU: end loop }

Overview NYCFC 2016 Season


Client: New York City Football Club
Project Manager: Janine Padilla


New York City Football Club (NYCFC) just wrapped up their much improved-tough ending included-second season. I’m one of thousands of New Yorkers that come from places where soccer is king, so, when we found out the new team in town would be playing in a baseball stadium, we threw a privilege tantrum, then remembered the reason we love this soccer thing is because we get to play it anywhere from dirt to cement, using whatever object we can use a soccer ball.

This was my second season as a fan in the supporters section. It has been a blast watching the team grow and create its own identity. There are the ongoing struggles, like the very confused stadium staff by the energy of a 90-min game compared to a 4-hr pass time; The weird season schedule; and the efforts to get the mix of classic Latin American, European, AND new chants going, but hey! if there’s one thing this city is about–besides letting Mike Pence know what we think of him–is that we are the coolest melting pot in the world.

Me hitting those high notes.Me in circle, hitting those high notes for El Guaje, Lamps, and L’ Architetto

This was also my second season working with the club on a few things throughout the season:

SEASON EMAILS

Under the direction of Janine Padilla, designed and built a set of responsive emails for the different campaigns. The goal was to make the code a lot leaner from the previous season (gmail would often clip them because of their size), make them uniform, easy to edit, and targeted to NYCFC’s local and international supporters.

jupago_161106_homenonattendee_totonto
jupago_161102_newsletter2
jupago_161030_tickets
jupago_161030_away_torontofc
jupago_161028_copaamerica
jupago_161022_homenonattendee_columbus-copy
jupago_161022_homeattendee_columbus2
jupago_161019_newsletter
jupago_161016_away_dcunited
jupago_161016_away_dcunited_intrmob
jupago_161013fifatournament2
jupago_161012_newslette
jupago_161007_away_necaxa
jupago_template_cityzenswelcome
jupago_161004_seats
jupago_160928_newsletter
jupago_160925playoffs
jupago_160923_homenonattendee_chicago
jupago_160921_newsletter
jupago_160917_homenonattendee_dallas
jupago_160910_away_ne
jupago_160909_newbenefits
jupago_160831_newsletter
jupago_160828_away_orlando_intr
jupago_160824_cityzensnewsletter2
jupago_160919_globalcityzen
jupago_160819_homenonattendee_galaxy3
jupago_template_cityzensredeemreward_preview
jupago_template_cityzensportalupdate
jupago_160818_newsletter2
jupago_160813_away_columbus2
jupago_160810_newsletter
jupago_160808_seasonrenewal
jupago_160818_cityzensnewsletter
jupago_160805_away_sanjose_intrmob
jupago_160803_newsletter
jupago_160730_homenonattendee_colorado
jupago_160727_cityzensnewsletter
jupago_160724_away_redbulls
jupago_160717_away_montreal
jupago_160709_away_kansascity_intr
jupago_160705_away_nengland_intr
jupago_160702_homenonattendee_redbulls
jupago_160702_homeattendee_redbulls
jupago_160930_away_houston
jupago_160624_away_seattle_intrmob
jupago_160616_newsletter
jupago_160622_cityzensnewsletter
jupago_160607_ticketalert
jupago_160602_ticketalert3
jupago_160602_homeinternational_realsaltlake
jupago_2016home_template_attendee3
jupago_160601_newsletter
jupago_160528_homeattendee_orlando2
jupago_160526_newslettercityzens
jupago_160520_homenonattendee_redbulls
jupago_160518_away_toronto_intr
jupago_160517_cityzensnewsletter2
jupago_160409_homenonattendee_chicago
jupago_160516_welcometotheclub2016
jupago_160515_away_portland
jupago_160507_away_dcunited
jupago_160502_newsletter
jupago_160429_homenonattendee_vancouver
jupago_160423_away_philadelphia
jupago_160415_away_columbus
jupago_160317_homeinternational_orlando_v2


What I learned:

Litmus is a lifesaver, there are 50+ email clients out there and Litmus has, by far, the fastest and easiest way to test/preview them.

Screenshot of Litmus Email Clients settings
Screenshot of Litmus Email Clients settings

Dan Denney gave me a bunch of great tips at Squares. One of them is to use this handy Bulletproof email buttons generator. Reliable & and huge time saver!

– Gmail joining the responsive game means it is a good time to stop sending 700px+ wide emails!

If you know some CSS then you can quickly learn @media queries. Here’s is a quick (a bit dirty) simplified version of a responsive email.

See the Pen Simple Responsive Email by Juan Pablo (@jupago) on CodePen.

NYCFC GRAPHICS

Worked on a mix of different graphics for emails/website/sponsors/social media campaigns. These are fun to do. Mostly because of the size restrictions ad and email vendors provide.

A thing about size… I’m leaving a lot of images out because the page is already a bit heavy. The website is set to serve you a smaller, responsive image if you are on a mobile device. Also imageoptim!! It will reduce the size of your images significantly. Can’t recommend it enough!

*Huge thanks again to Janine for creative direction and Milo Kowalski (NYCFC’s designer) for the styleguides and those time consuming silos!

018 I’m on a (mini) art gallery!

I live in a classic prewar New York building with a long history. Sadly, the building was a bit neglected for a few decades up until a few years back—just before we moved in—when a new co-op decided to take more control and do a major overhaul.

Fast–forward to today and we have a new roof, new boilers, new elevators, gardens, energy-saving lights, and soon new lobbies! I’ve helped out a bit with the web/graphics part and last year they asked if I’d be interested in taking some photos for the new lobby.

Can’t remember if I said yes or hell yeah!

This brought me to a topic I’ve been thinking about lately: Side Projects.

On one side I’ve listened to a side of the design community where everything is: Charge for everything! Only do work that pays! Don’t work for family! Don’t work for friends! Hustle all the things! Then hustle more! You are not hustling enough! Be like Gary Vee! Become a millionaire! Don’t do work that will bring more of the same work! Why are we yelling??

On the other side, there are people like Aaron Draplin, and Chris Coyier, and James White, whose message is more in the lines of: Do work, rinse, and repeat. That’s it. Of course, be smart and learn how to run a business but just do what you love, who cares.

The reason I’m going on about this is that I’m not a professional photographer. I did take some photography classes in college and have been taking photos as a hobby and, like millions of people, share a passion to capture moments the way I want to remember them. But I don’t intend to sell my next photo at Christie’s.

If I would’ve had thought like the first group I could have invested those hours doing something else, something that gets me closer to retiring at 40. But I said yes to the project because it sounded exciting because I want the place where I live to be better. Because I still learned a lot just by going all over the city capturing places. Because it made me a better photographer and made me understand a bit more about a fascinating world.

Anyhow, the message is: YES take on side projects. Even if they are for your friend or if you don’t expect to get money in return.

This has to be the longest intro for a set of photos. So without further ado here they are:

*Huge thanks to Melissa Strada for putting so much of her own time into this project!

WGH_LobbyB&W_032_Final_preview
WGH_LobbyB&W_216_Final_preview
WGH_LobbyB&W_256_Final_preview
WGH_LobbyB&W_169_Final_preview
WGH_LobbyB&W_009_Final_preview
WGH_LobbyB&W_046_Final_preview
WGH_LobbyB&W_156_Final_preview
WGH_LobbyB&W_081_Final_preview
WGH_LobbyB&W_178_Final_preview
WGH_LobbyB&W_225_Final_preview
WGH_LobbyB&W_275_Final_preview
WGH_LobbyB&W_298_Final_preview
WGH_LobbyB&W_060_Final_preview
WGH_LobbyB&W_086_Final_preview

017 Those who can, do teach

Once upon a few-weeks-back time I attended a Codepen NYC Meetup
Among the talks there was one by @aidanfeldman on what he’s learned teaching JavaScript, and invited the group to the Hacker Hours meetup, which I joined.

A few days later I got an email from them looking for volunteer teachers to join ScriptEd_, and so I applied. And so will be teaching how to build for the web to a group of high schoolers this fall.

This is scary awesome!

Mainly for three reasons:

1. I never had this when in High School.
Although I did have a keyboarding class where we would mostly debate if the PS2 would beat the Dreamcast while playing a Windows 95 speed-typing-spaceship-shooting-letters game. My real intro to making websites really started in my second semester of college. Somewhere in my archives there’s a cool-lookin’ Photoshop-to-table layout website I built on BBEdit.

2. If you can’t explain it simply, you don’t understand it well enough..
I’m glued to my computer everyday and every time I learn something new it is rarely from the same source. It can be while listening to The Web Ahead, or reading CSS Tricks, or good ol’ Stack Overflow. I don’t mean to go full Tim Berners-Lee, but having a curriculum, a structure, will help me get some of those fundamentals down and be able to explain them faster than the attention span of a teenager

3. My students will look at this blog someday and say “He is also not funny in writing“.

And last, if you live in or around New York City and would like to join the team here’s an awesome video to get you started!

016 I stopped blogging

It’s been 2 months since I wrote my last post

Have a couple of posts in my queue but either felt they were not ready or too personal, so I decided to write more about the web and the work I’ve been doing but I missed my first self-imposed Tuesday deadline, then another.. then another.. then another.. then.. oh hai.

This weekend, as I went through my very old notepad, found notes from An Event Apart conference last year in San Francisco. These were my notes from Jeffrey Zeldman’s talk The Fault, Dear Brutus (or: Career Advice From a Cranky Old Man):

Aesthetics are important, but everyone has their own…Attitude trumps work at most companies…Zeldman giving a Shot out to introverts…First impressions are forever…I am what stands between me and my success…If you can’t communicate you can’t sell…Blog like no one is reading

They took me back to one amazing conference, and that last note, the one where I should blog like no one is reading, got me thinking that I overthought my thinking (Who’d a thunk it?). So here I go again, trying to write a bit more and care a little less about getting to it.

Some notes on what I’m currently working on:

1. Got asked to take some B&W photos for my building’s lobby. The prints and the frames are ready and they look awesome! Will post some-color photos of the black and whites-photos when they are up.

2. FC Harlem grows faster every day. And the London Eye keeps on rolling.

3. Arts Everywhere and The Nature of Cities sites keep growing and creating amazing posts like this one in AE and this one in TNOC.

4. NYCFC projects are a lot more fun now that the team is winning. Next week we beat LA. Always a pleasure.

5. Added a contact page and form to my site and it is working great!
*Stole the slider idea from Zeldman’s site. Yes, the same Zeldman above, who I’ll also happen to see at this weeks’ Abstractions conference in Pittsburgh!