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. 🙂

ForwardJS SF 2018 Recap

ForwardJS was the first developer conference that I ever attended, and it was a pleasure to be able to attend again this year. Forward has been releasing batches of the recorded talks on YouTube, so I thought that I would share a few of my favorite talks from this year’s conference, along with the video and slides when available.

Design Systems at Scale

Sarah Federman – Experience Designer & Developer @ Adobe

Slides

  • My favorite part of going to conferences is learning from the trials and tribulations of other developers. This year I caught a few talks which explored how larger companies enforce consistency at scale. The keynote for the event, given by Sarah Federman of Adobe, was a perfect example of this. She presented Spectrum, the company’s design system.

Migrating the Frontend Stack from Python to React @ Yelp

Mark Larah – Full Stack Software Engineer @ Yelp

Slides

  • Mark Larah from Yelp shared his team’s journey in migrating its Python Cheetah template front-end to React components. Important questions they asked themselves before migrating included:
    • Is it worthwhile? Comparing benefits vs. time & cost
    • Can they migrate without disruptions?
    • How will it impact performance?

One Progressive Step at a Time – Inside Progressive Web Apps

Anas Raza Firdousi – Software Engineering Lead @ Apple

  • When I attended ForwardJS a few years ago, it was all about React.This year “progressive web apps” or “PWAs” kept popping up in talks. Anas Raza Firdousi from Apple gave a great intro to progressive web apps, taking the audience step by step through building a basic PWA.

Pinterest ♥ Mobile Web

Zack Argyle – Tech Lead @ Pinterest

 

  • The most fascinating talk I saw was from Pinterest. Zack Argyle shared how Pinterest rewrote their entire mobile web experience to be a PWA in only three months. While this change brought major performance improvements for mobile users, there was one major caveat. Before taking on such a task, you’ll need to have the resources to be able to maintain two separate sites. In Pinterest’s case, they needed a minimum of 20 developers just to maintain their new mobile site.

Optimizing React Applications

Roy Yu – Lead Software Engineer @ Chegg

Video & slides not currently available

  • My current project at work revolves around React and Redux, so Roy Yu’s talk on React optimization was a must see. I loved the talk because Roy emphasized the importance of developers fully understanding what is important to their customers, and using data to make the case with PMs and clients for the time and space to conduct optimization. The talk was also immediately actionable, with a plethora of tools suggested for identifying potential optimizations.

Codeland – Well I guess I’m a developer now

When I was in my program, I loved reading other bootcamper’s blogs. Seeing their challenges, progress, their wins big and small… it got me through. One inevitable, disappointing and all too common phenomenon that I ran into again and again was that the student would be consistently blogging, then they’d graduate, look for a job…. and then the blog would just stop. Even worse, the posts might have stopped before graduation. I never knew what happened to the person, whether things worked out or not. I could be creepy and scour LinkedIn to see if the student became gainfully employed in web dev, but I never went that far.

Well, my last post was from December, so this blog is in dangerous territory of becoming yet another abandoned bootcamper blog.

So here’s a quick catchup. Plenty has changed since the end of 2016. The first few months of my apprenticeship were rough. Everything was so new, and I didn’t know how I was doing, so I was working double time to “catch up.” After I got some positive reinforcement and felt a little bit more comfortable with the development process, I stopped taking work home with me every night, and things improved. It was also a weird time because it was the holidays, and it was hard to get to know my new coworkers when everyone was out of town for the month.

Long story short, I survived my apprenticeship and was hired on full time as a software developer in mid April. It was a great relief, and a nice cap to the last few years of work. I changed my career! That’s nuts! One surprising aspect of my job is that I’m working 90% of the time in JavaScript, which seems like some cruel joke from the universe considering my personal feelings about JS, but it’s not too bad actually. JavaScript is less terrible when you know what you’re doing, I’ll give it that.

My progress on this journey has been capped by conferences. I went to my first programming conference (ForwardJS) while I was finishing my program in Spring 2016, and my second (RubyConf) just as I was starting my apprenticeship. Last month I attended Codeland. It was sponsored by the CodeNewbie podcast, which is a super supportive podcast for … you guessed it, programming newbies.

Quincy Larson of FreeCodeCamp on how to write a technical blog post people will actually read

This was the first year of Codeland, so I didn’t know what to expect. This was definitely a gamble, especially since I was weighing going to Codeland vs hitting up RailsConf in Phoenix the next week.

Codeland turned out to be a really strong event, despite a few logistical hiccups. Most obviously it was a super diverse crowd in every sense – age/race/gender/experience. The vibe was really great, inclusive, positive and supportive, none of that weird aloof super nerd awkwardness/ competitiveness I’d seen at other conferences, no clique-ishness. Oh, and it was woke as fuck.

Content? The talks and workshops were strong and varied. I got to make a pizza ordering Slackbot in one workshop. Talks that I had no interest in turned out to be actually interesting and there were things that I could relate to, even if I hadn’t used such and such technology (and it’s a good thing too, since the conference was single track aside from the workshops!). The high quality of the content I’ve gathered is because the speakers worked with the conference staff quite extensively to hone their talks. A+, good job guys. Also, the food was divine. One quibble – no Codeland shirts? ; o

There was a segment on coding bootcamps, pros and cons, with reps from 3 of the bootcamps that happened to be sponsoring the event. What, no Flatiron??
A very well put together program for the event, with info for each talk, supplemental resources, and space to take notes. Here is an ad from Dev Bootcamp, and I agree wholeheartedly. Apprenticeships are awesome – but incredibly rare.

It was strange to be at a conference and be more experienced than some people I met. I got to talk to a lot of people about bootcamps and it felt good to share my experience. I’m a ‘success story’ I guess, although to be honest I don’t know if I would suggest a coding bootcamp for a person just starting out on the path. But that is a whole nother blog post…..

RubyConf 2016 – Am I a developer yet?

As luck would have it, RubyConf occurred during my job search. The 3 day conference was $400, which ain’t bad at all, but at the time I couldn’t justify plunking down 400 bucks for a ticket, then 350 for a flight to Cincinnati, then another 200-400 for a hotel, not to mention however much money for food and cabs and such. Still… I didn’t have a job… maybe it was worth the investment?

In early October I applied for a diversity/adversity scholarship. Unsurprisingly I didn’t get selected (I haven’t had true adversity in my life in a long time, doing just fine all things considered), but there was a silver lining: I learned that I could volunteer for a free conference ticket. The ticket was a regular ticket including daily breakfast, lunch and snacks. Doing the math in my head, if I stayed with a friend I would really only be paying for airfare and cabs/dinner/snacks. Maybe not even food at all if I hit up the right happy hours.

They asked for 12 hours of help over 3 days, which seemed fine to me, so I signed up. It’s been a few weeks since I got back – nearly forgot to write it up! Here are some thoughts I’ve had about the conference.

Post-Election

  • RubyConf was right after the election, and it felt very strange to be in such a festive atmosphere. It felt like I shouldn’t be silly, I shouldn’t be networking or taking lots of pictures, I shouldn’t be eating fried chicken and trying to collect as much schwag as possible. Apparently other people were feeling that way as well, there was an informal group led venting about the election.
  • Somewhere in my late night social-media fueled stupor I ran into someone’s post-Trump blog post where they said they couldn’t find state by state listings of minority owned businesses. I found this database of certified businesses, but it could use some improvement. This seems like a good idea for my next toy project (maybe make it more of a Yelp clone?), but I feel like somebody must have already done this, right??? How does this not already exist?

Vs. ForwardJS?

This conference felt very different from ForwardJS, as it should have. It was basically the complete opposite of ForwardJS.

  • out of town  / hometown
  • planned a month in advance / planned a couple days before
  • 3 days of programming vs 1 day
  • No workshops / Paid workshops
  • Ruby / JS
  • Volunteering /  Attendee
img_5058
Milling about between talks

Volunteering

TBH, besides being cheap, volunteering seemed like a great option because I would be able to bond with the other volunteers over the shared work. I felt a little lonely at ForwardJS, and wanted to make sure that didn’t happen at a 3 day long event. I knew that they were recording the talks, so I wasn’t really going to miss anything.

Volunteering turned out to be pretty much all positive. One unforeseen benefit: I was working the registration and information booth, so I got to talk to Ruby celebs multiple times over the course of the conference. And in general once I’d already talked to someone, even if it was just to answer a question, I felt fine walking up to them and chatting later. It felt less weird for some reason.

img_5030
Opening keynote

Imposter Syndrome

Actually, there was one moment that felt a little awkward. I went up to talk to a company that I’d applied at a while back. I didn’t make it through their code challenge, but I wanted to tell them that I liked what they were trying to do, and the thought that they’d put into the assignment. The booth was a bit chaotic, so I didn’t find quite the right opening to talk about it. I moved over to the side. One of the booth folks came over to talk to me, then looked down at my badge, or maybe my red RubyConf staff shirt, and said “Oh, sorry I thought you were a Rubyist. You’re staff.”

0_X <- my face

Not gonna lie, had a mini-existential crisis. Do I look like a coder or not*? Sort of, because you talked to me, but not because of the badge… but I can be both… ;o

I talked about the volunteering, and how it was a great way to score a free ticket and meet people in a different way. After a bit of chatting, I ended up mentioning my new job**, and he actually knew some people there! Well what a great coincidence! Couldn’t have come at a better time as I was feeling insecure. Inside my insecure head: I AM A RUBY PERSON AND HEY SOMEBODY YOU KNOW HAS EMPLOYED ME. SO THERE! I AM FOR REAL. RILLY THO.

img_5065
Q & A w/ Matz on the future of Ruby

Content

The variety of content was great, but I gravitated more toward career talks and a few specific technical sessions. They had a content track called “Life After Bootcamps” which seemed timely.

There were also lightning talks at the end of the second day, and wow! People really wanted to share. They kept coming up to the info booth asking when we were putting out the sign up sheet, and then once we did it was a mob.

People

The first day I was a little starstruck, but quickly I realized that everyone was nice – attendees, other volunteers and staff, vendors, speakers. There were a pretty decent amount of women at the event (more at ForwardJS I think), and lots of female speakers. They did a good job making the conference inclusive – there were gender neutral bathrooms, a lactation room, and free childcare offered onsite. Free childcare!!! I will never have kids, but that makes me very excited!

Highlights

  • On the first day I got to meet Matz! I gave him back his cellphone, which he left in junior ballroom D 🙂 .
  • Meeting folks from a couple of companies I applied to (and got rejected from) was one of the things on my conference to-do list, and it wasn’t nearly as awkward as I thought it might be. TaxJar in particular were nice enough to find me first, right as I was stuffing my face. 🙂
  • The fried chicken and catfish on day 2 was really good. 😀
A "Three way "
Skyline Chili! Kind of weird!

* To be fair, for some reason I am often mistaken for a retail worker when I’m out shopping (Old Navy, Kinko’s…). I don’t think that I look particularly helpful, so who knows. Maybe I look young. Maybe my sweater folding game is good?

** Oh right, I got a job! Forgot to mention it here.

img_5071
Bye RubyConf!

The Cheap Coder

I’m pretty frugal, so it caused me a great deal of psychic distress paying for my coding bootcamp, and following that, technical interviewing course. Despite my satisfaction with the curriculum, teachers, community and outcome, the entire time I kept saying to myself “I could be learning this FOR FREE. I could have just bought a thousand Chalupa Supremes from Taco Bell!”. I’m not sure why that was my metric, but it definitely stuck in my head.

Well… as I’ve gotten older, I’ve learned that sometimes you just gotta shut up and pony up the cash. You’re paying extra for quality, accept it and move on. For everything else, there’s probably a cheaper way in. You just have to look for discounts.

SUBSCRIPTION SITES

Okay, why do you need memberships to learn-to-code subscription sites? I know that you can teach yourself how to code for free. It’s all online. But the right content can make all the difference in your understanding, and sometimes the good stuff is behind a paywall! Here are some discounts I’ve seen over the past few months:

CONFERENCES

Conferences are a great learning opportunity, but with ticket fees, airfare, food and lodging it gets pricey real fast. The financial hurdle can be a lot to justify when you’re the one covering the costs. You could just watch the conference’s livestream, but really it’s not the same at all. Luckily there’s quite a few ways to weasel your way into conferences.

  • Follow the conference’s Twitter account for discount codes. They may even post ticket giveaway contests here.
  • Do you subscribe to web dev mailing lists? You can get reduced tickets there as well. I got my $19 ForwardJS ticket the day before the event thanks to Girl Develop It’s mailing list. Something like a 90% discount! The Women Who Code mailing list offers regular ticket giveaways so often they have an evergreen Google form they use for processing applications.
  • You can also try to win a scholarship, lots of conferences seem to be offering them now. However you will probably have to write more than a few essays explaining your situation -> why you are broke as a joke. It can feel very vulnerable putting that information out into the void, and then being rejected.
  • I applied for RubyConf’s scholarship, and didn’t make the cut, however they offered free passes for volunteers. So I decided to volunteer. ~10 – 15 hours of work for a $400 3 day conference pass sounded like a good idea to me.
Scroll To Top