Fun with Frontend Mentor

February 22, 2020February 23, 2020 - Tracy Leave a comment

During my downtime I wanted to learn a few different techniques and frameworks. One thing that has slowed me down in the past has been setting up shell projects just so I can practice specific skills. Frontend Mentor has been awesome for this. It’s a site that offers a variety of free designs for developers to implement. With one click, you can download some starter code with all the necessary assets, so you can just get to coding.

Screenshot of the latest coding challenges available from Frontend Mentor — There are challenges for all skill levels, which is really nice

The projects are mostly free, but if you want things to be pixel perfect, you can purchase the Sketch file for the design. It’s like $5-9 per project, depending on the complexity of the design. When you’re done with the challenge, you can submit your “solution” to the site – both a live link to the working site and a link to your GitHub repo. This is where it gets super cool. After you submit your code, Frontend Mentor generates a comparison of your work with the original. It also generates an accessibility report that alerts you to any issues.

Screenshot that shows Frontend Mentor design comparison tool — Move the slider left and right to compare your work with the original design

Your solution is posted live on the site, and you can have other folks in the community give you a code review. Seeing so many different approaches to the same project has been really inspiring.

What I’ve been working on

So far I’ve completed two of the easier challenges, just to get started. I’ve been working in React Native and thus exclusively on mobile designs for the past year, so it’s been good to flex my muscles and get back to writing responsive code.

Fylo landing page

Screenshot of my solution to the Fylo challenge

Even though the design is just a simple landing page, I still learned a lot from pulling this together.

One mistake I made is that I didn’t work mobile first. Upon reflection, the mobile designs were much simpler than the desktop designs, so it would have made sense to do the styling for mobile first, and then add on from there with media queries.
Since this was a small project, it was a good chance for me to practice implementing BEM naming conventions for my CSS.
I wanted my version to match as closely as possible in the design comparison, so I paid the $5 or so for the design file. It seemed worth it to support the site. Since I don’t have a Sketch license yet, I also got to use Figma for the first time.

Huddle landing page

This quickie was good for:

practicing working mobile-first (learned my lesson from the previous project 🙂 )
installing Sass from scratch (never actually had to set up before)
doing a little CSS Grid.
I also learned a bit about accessibility. I learned that the new HTML5 semantic tags have landing anchors, and also that when you nest heading tags underneath each other they should be exactly 1 number below in order to indicate their hierarchy. Basically I learned how to add more meaning to my code.

I didn’t bother purchasing the Sketch file for this challenge. There was no design available for tablet, only mobile + desktop, so I might go back and clean up the responsiveness for that in between width. The text can look a little squashed around 600px. Probably should just increase my breakpoint.

What’s next?

I’m definitely going to go back to the two previous projects and clean up the responsiveness of the image sizing. After that I’m going to pick one of the more complicated challenges in order to try out Vue.js. Been curious about it for a while. 🙂

Rite of Passage

February 5, 2020February 13, 2020 - Tracy Leave a comment

About three years ago I wrote a post wondering to myself if I was finally a real software developer yet. I was volunteering at my first RubyConf and having a bit of imposter syndrome. Feeling like an imposter happens to all devs at some point. Well, it’s time to check another dev career rite of passage off the list – I was laid off!!

After three years and some change at my last job, the company’s biggest client took some development in-house, and cut their budget by 50%. Half our team was then let go, which I suppose was shocking, but not for me. Unfortunately I saw it coming when I got wind of the budget cuts. Something had to be done to save the business, it was inevitable, and I don’t take it personally.

Still, it was weird as it was actually happening. It all went by so fast. It went something like this: See a new meeting with the mysteriously vague title “Business/Project Update” on your calendar, go to the meeting 30 minutes later, and boom – now you’re all done here. No, don’t worry about transitioning your project or tying up any loose ends. Whoops, you can’t send a goodbye to everybody because you don’t have Slack or email access anymore. Do you have any questions? No, not at the moment because you’re blindsided and confused? You can email us later if you do. No, there’s no packet of information with 401k rollover and COBRA paperwork. No, there’s no exit interview. Here’s a check, good luck out there!

Being laid off as a remote employee was quite surreal. It felt like I was watching a TV show, especially as it was a GROUP meeting layoff. I didn’t even know those existed. Up in the Air did not prepare me for that! Once I exited the video call, I stood dazed for a bit, looking around my office. Things just looked different to me. I’ve had the same feeling a few other times in my life when I got bad news. Then I immediately FaceTimed with a coworker who also got laid off. You could say that we had some processing to do…

Friends and former colleagues have reached out asking if I’m okay. I imagine that my emotions will be all over the place as time goes on (and the brutality of interviewing for software engineering jobs takes its toll), but honestly right now I’m feeling great.

My dear friend Brittani sent me a “Sorry you were laid off 🙁 ” care package. It really cheered me up. Felt like a “Congrats you got severance 🙂 ” package. The glass is half full, you know?

I’d been asking to transition off of my last project for at least 8 months, and since the company hadn’t won any new projects lately, the only path to more interesting work was going to be getting a new job. So I was already casually looking. Now I get severance and unemployment* while I job hunt full-time??? I’m so lucky.

Even though I’m financially ok, it’s hard to let go of the intense scarcity mindset that hits you the moment you find out it’s over. But I really want to take this as an opportunity to rest and reset, learn some new technologies that have been on my to-do list, create an awesome portfolio site, finish CS50, explore Philadelphia, watch all 100 of AFI’s top 100 films of the century, actually get around to decorating the house, get back into knitting, nurse my plants back to health, run a 15k, adopt a fat ginger kitty… As you can see there’s so much TO DO out there. It makes me excited.

That said, if you know of anybody hiring remote JavaScript/Python/Ruby devs, or even contract work, let me know! Here’s my resume. My most recent projects have been in React & React Native / mobile and front-end development, but I’m open to anything. These things take time, so I might as well put it out there now.

* If I can figure out how to straighten out the mess of having worked in multiple states. I got denied because PA didn’t have CA’s wage info, appealed the decision, and now I have to go present my case in person at an appeals hearing. It will all work out, but it is super confusing. Never depend on unemployment! Have an emergency fund!

6 Months of Remote Work

January 7, 2020February 5, 2020 - Tracy Leave a comment

One reason I was interested in switching to software development as a career was because of the opportunity for remote work. I suppose the nature of the work and the stereotypical developer temperament lend itself well to remote work.

I moved to Philly in July so it’s been 6 months of working remotely full time. Time flies! I don’t think I’m “living the dream” yet. I’m still working it out, but most of the transition pains have gotten sorted.

My average day

Working remotely is pretty boring actually because I chose to establish a regular schedule which mimics in office life. I wake up around 8:30 or 9 and head downstairs to make a pot of coffee. Maybe I’ll take Bogie to the dog park, if Ryan hasn’t already. When I get back from our walk, I shower. ~9:30 or 10 I get started. Around 1 I either grab leftovers from the fridge(the usual), cook lunch (boring but practical), or if it’s a quiet day I’ll go out for lunch in my neighborhood (extravagant).

With the 3 hour time difference between here and San Francisco, my standup is super late – it happens at 2 in the afternoon. I don’t mind this, because I always have progress to report, which is a relief.

Then I keep working until around 6 (which I have established with my team as my official log off time), take the dog to the park for round two (lucky dog), then back home where I’ll cook dinner. Around 8pm I’ll watch tv and most likely keep working a bit in the background. I’m pretty sure I’m working even more than when I was in an office!

Pros

No commute. ~ Given that taking public transportation from my apartment in the Mission to the office in downtown SF took about 30 minutes and $2 each way, I’m saving about 5 hours and 20 dollars per week. Wooo, gonna invest it and retire early!

No time spent putting on makeup or picking out an outfit. Zoom has a beautifier filter, does all the work for me, LOL. ~ Saves 30 min or 2.5 hours/week

No awkward office chitchat unless I seek it out via Slack.

I feel more productive because I can control my own time and take breaks when I need them.

I can do productive house chores during breaks. It helps alleviate the pressure of having to cook and clean at night, so I have more time to do fun things after hours.

Cons

When I first started working remote, I was terrified that I was going to appear unproductive. So I overcompensated by working too much. It’s an easy mistake to make, and I still do it from time to time. Thankfully review season was last month, and I got one of my best reviews yet. So it’s all really in my head.

I feel like my participation in meetings has been fine, because I talk when I want and try to give a visual signal during video calls that I’m about to speak, but it is way easier to get steamrolled when in a meeting with a coworker who monopolizes the conversation. If they don’t look at the video screen, they don’t stop talking.

I’m pretty introverted, but it has actually been hard being alone. My boyfriend and roommate both work from home, and there is a dog in the house, but I do on occasion feel like I’m missing out on conversations and camaraderie from the office.

Thankfully, taking trips back to San Francisco every few months really scratches that itch. And as more folks at my company have gone remote, I think we’ve gotten better at moving toward documented and asynchronous communication.

Tips

I feel silly sharing “tips” when I’m still figuring this all out myself, but this is what’s working for me so far.

Setting up an attractive home office complete with a standing desk has helped me transition mentally into work mode. #1 suggestion for the WFH transition. Have a place to go for work. Or you will just end up working all the time from the couch, which sounds peaceful, but is terrible for your work life balance (and your neck).

I’ve heard that over-communication is key, but I still feel nervous about being annoying/too chatty/distracting. At any rate, the whole point is to increase your visibility! Comment on Slack threads, have lots to say during standup, jump on a Zoom call if your conversation is going to take more than a few lines of chat to resolve. And don’t turn your camera off during calls, you want your face burned into the back of your coworkers’ minds.

Could I ever go back?

For all the loneliness and unique strangeness of working remotely, I would prefer not to go back to 100% in person office life. The ability to structure my own time has been really empowering. I get more done, and I have less anxiety in general. My work days are all about the work, which I appreciate.

Now that I’m more comfortable with being 100% remote, I’d like to take advantage of the situation and work outside of the house more, maybe even visit some friends and work for a week from their homes 🙂

Making code reusable and shareable

December 16, 2019December 17, 2019 - Tracy Leave a comment

A while back on my current project we had to scrap a large portion of the code (pivot!), and I was tasked with the cleanup. It was painful yet cathartic to cut out tens of thousands of lines of code (new record for me!).

One thing that we wanted to salvage however, was a table component that I had created earlier in the year, that had a sticky column that the rows could scroll behind. It could be useful for other projects in the future, and oddly enough, there weren’t a ton of React Native sticky table libraries available to choose from.

I wasn’t totally sure how to go about making this component shareable. My first thought was to publish it as a package on NPM, but the code needed to be private, and publishing a private package required a paid NPM account.

After talking with my coworkers, it turned out that there was a simple solution to the sharing problem. I could create a private repo in our company Github, and any of my coworkers that had access to the repo would be able to use the package. Yes! This solution avoided all the privacy and access issues I was trying to figure out earlier.

So basically I created a new repo under my company’s GH organization. I moved the following files from my original project to a new src folder: a cleaned up sticky table component file, the mocks file, the types file, and image assets. I added an index.js file where I exported the table component. Then I pulled together a README which explained the background of the component.

Setting up the package.json seemed simple enough, but I got stuck on a few spots – including referencing the correct dependencies, and naming the package version correctly. I don’t remember exactly what was off, but I think I was using “v1.0”. Eventually I switched the name to “v1.0.0” and it worked!

Anyways, I was really happy that I was able to save this code (my baby!), and even happier that it was pretty simple to share code.

Web Summit 2019

November 24, 2019December 17, 2019 - Tracy Leave a comment

For the past 3 years I’ve hit up exactly 2 conferences per year, usually ForwardJS in the spring, and then RubyConf in the fall. This year RubyConf was in Nashville. I’ve always wanted to visit, but this time around I just wasn’t feeling the song and dance of a dev conference.

Ryan was set to go to Lisbon for the marketing conference Web Summit, and since it was my birthday month, I decided to tag along and make this my annual birthday trip. At the last minute I was offered a ticket to Web Summit. After seeing how expensive the tickets were, I was determined to treat this as a real conference and get the most out of it.

Web Summit claims to be the world’s largest tech conference, and with 70k attendees this year, I believe them. The conference ran from Tuesday to Thursday. I arrived Wednesday morning, but was so jet-lagged that I slept completely through that day’s session. So I really only had Thursday, and I can say honestly say that was enough.

Overall the experience was overwhelming. There was just… so much…There were 5 pavilions of exhibition, 23 stages, sponsored booths, multiple startup alleys, along with a massive arena for the big talk.

Many of the talks were short – 20 minutes or so, and there was no time scheduled in between them. Combine this with 70k wandering people all looking down at their phones, and you can imagine the stress of just getting around. The entire conference felt like Shibuya crossing, lol.

Every talk I saw was packed, except for the one talk I went to on the lack of diversity. I really hope that’s because it was nearly the final talk of the day!

This was surprising to me because the tickets were so expensive, but food was no longer served, just coffee and water. This was probably due to the very public food fiasco back in 2015. I also noticed that there was less swag from companies than normal, but maybe that was because I went the final day.

There were however, lots of companies doing playful things to get attention. There was a basketball court, claw vending machine, boxing area, escape rooms, and an area where you could ride a unicorn.

Developer Presence

Ahead of the event I received an email from the conference stating that there were ~8,500 developers attending. There was definitely a developer friendly presence from Cisco, AWS, and Google, but I didn’t meet any devs in person while milling about. I did attend an AWS machine learning workshop, which I found useful. One of the things they were demoing was translation and sentiment analysis. It was very similar to the very manual work I did long ago at Beyond and Edelman.

Anyways, I won’t bore you with the sessions, but here are some overall themes I noticed:

There were a few case studies of brands trying things that might seem unintuitive because they actually align with their greater vision.

For example, I saw a talk with the CEO of Time Out explaining how the company expanded from one cutthroat market (media) to another struggling market (food/hospitality). It didn’t seem to make sense to enter the space, but for their greater vision of being a hospitality company, it did. With the creation of Time Out Market in Lisbon, they ended up creating a kind of circular market. First they identified awesome restaurants in a city, and then they invited those chefs to create a representation of the awesomeness of the local food scene, creating the market – another interesting place to visit. I don’t doubt their success – 13,000 people visit Time Out Market in Lisbon per day.

Another example was Rent the Runway. They were already successful enough renting out fancy gowns for special occasions (weddings, etc). Why then did they enter the logistical nightmare of a clothing subscription service for casual wear? It made sense with their overall vision of being the company to get women dressed, and they were strategic about their expansion. They tested subscriptions with small groups, and expanded… then once they had proof of concept, they went all in. They went from 2.7 wears/year for their average customer to 120 wears/year for subscribers.

Web Summit was definitely a place for a brand to get ahead of their critics

For example Google hosted a talk called “Content Moderation: A Google Perspective”, H&M spoke about sustainability in fast fashion, and De Beers discussed its lab grown diamonds.

Don’t be afraid to build your own system. In the end it can be much more flexible.

Multiple brands that I wouldn’t think of as tech companies were building out their own systems. For Rent the Runway, they had to build their own inventory system because the systems that existed weren’t could not accommodate the rental model. In the end, this was worth it because when they pivoted they were able to customize and add on.

Ryan running the Rent the Runway session in the Samsung NEXT Classroom X

PVH, the brand behind Calvin Klein and Tommy Hilfiger, had a booth that discussed how they use custom software in their design and supply chain, creating “the store of the future.”

And last but not least, I was most impressed with the presence of Lush Labs. Their shipping container concept store showed off their work building an ethical POS system. Beyond just following the supply of inventory, they were even concerned with the sourcing of raw materials for the hardware, in order to make it less cruel.

Their consumer facing store app was also created in order to help limit the amount of signage/plastic within the store. Instead of having signs throughout the store, you could pick up an item and scan it in order to retrieve information.

Unfortunately they were running into snags with rolling this system out across different countries, usually due to legal issues, but now they have it active in like 6 countries including UK & Croatia. Pretty impressive what they’re going for, honestly.