Fun with Frontend Mentor

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.

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

Screenshot of my solution to the Huddle landing page challenge
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

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!

Scroll To Top