loading...
Cover image for My 2019 Year in Review

My 2019 Year in Review

nickytonline profile image Nick Taylor (he/him) Updated on ・7 min read

Photo by NordWood Themes on Unsplash

The Intro

2019 was great. Lot’s of interesting stuff happened. Let’s dig in. But first, I say to you 2019... good day.

NSYNC "Bye, bye bye!"

Open-Source

I enjoyed another great year in open source and also contributed to some new projects. I'll go through the most notable ones, not because the others are not important, it's just that these were the ones that sprung to mind while writing my review of 2019.

Project: @raee/gatsby-remark-oembed

My site which is pretty much just a blog at the moment uses Gatsby. One interesting plugin I came across was from @raee called gatsby-remark-oembed. It allows you to embed resources as widgets that support oembed, e.g. Twitter.

GitHub logo raae / gatsby-remark-oembed

A GatsbyJS Plugin that transforms oembed links into its corresponding embed code.

Gatsby Remark Oembed Plugin

This GatsbyJS Remark Sub-Plugin transforms oembed links (Twitter, Instagram, YouTube, Vimeo, SoundCloud, CodePen etc.) into its corresponding embed code.

This is an early version of the plugin. Let me know if you have problems or questions by submitting an issue.

Install

npm install @raae/gatsby-remark-oembed

or

yarn add @raae/gatsby-remark-oembed

Requirements

  • Node version 8 and up.
  • Gatsby version >=2.0.88
  • Gatsby Transformer Remark Plugin >=2.0.0

Oembed support

Under the hood the oembed provider list from oembed.com is used.

So far these providers are confirmed to be working: CodePen, Flickr, Instagram, Reddit, Twitch, Twitter, Vimeo, YouTube, SoundCloud.

Twitter, Flickr, Instagram and Reddit requires external javascript to be added to every page. So make sure to exclude the ones you do not need.

Example site

Check out gatsby-remark-oembed.netlify.com/. Its source code can be found in gatsby-remark-oembed-example-site.

How to use

Configuration

// In your gatsby-config.js
plugins: [
  {
    resolve: 

I got it all installed but ran into issues. In the end, the documentation for setting up the plugin needed to be updated. I put up a PR to update the documentation, so others wouldn't stumble on the issue I ran into. And of course I wrote about it.

Project: Gatsby

This was a big contribution LOL. I added my site to the list of showcased sites. As a thank you for my first PR, I got myself some Gatsby socks. I also wrote a short post about this.

Project: Refined GitHub

For this project, I helped migrate the Refined GitHub extension to TypeScript. This was a huge endeavour that spanned several months. I am currently not using TypeScript at work, so this was one of my outlets to flex some TypeScript muscle. I comment about this as a big win for me in April on DEV.

This week, I got a PR merged that I've been working on for quite a while for the Refined GitHub browser extension. Feels pretty good.

Enable strict-mode for TypeScript #1783

Basically going with the non-null assertion operator in almost all places, because as mentioned in github.com/sindresorhus/refined-gi..., the assumption with the extension is that the DOM nodes referenced in most cases are expected to be there. If they aren't, the extension breaks, a bug is filed and it's fixed.

One thing to note @bfred-it, is currently dom-chef types need to handle JSX (Element and IntrinsicElements) or we import @types/react.

In the process of working on that PR, I discovered a bug in the TypeScript types that ship with TypeScript.

Missing string indexer on NamedNodeMap interface in lib.dom.d.ts? #30928

For context, see github.com/sindresorhus/refined-gi..., specifically this commit, github.com/sindresorhus/refined-gi....

Also, just posting my tweet about this so that people can find discussions about the issue. See twitter.com/nickytonline/status/11...

I'll restate what I tweeted as I probably should have posted my question here originally.

The NamedNodeMap interface in lib.dom.ts does not allow for a string indexer, even though vanilla JS supports this in browsers, e.g. someDomElement.attribute['aria-label'].value.

We have code like this in the Refined GitHub extension, so for the time being, I've gone ahead via a declaration merge for NamedNodeMap

interface NamedNodeMap {
      [key: string]: Attr;
}

I can't tell from the MDN docs for NamedNodeMap if it's standard or not. All they seem to mention is "Attr nodes' indexes may differ among browsers" which wouldn't apply to access by the attribute name.

Just wondering if this was omitted by mistake or is it because this is not considered WHATWG DOM standard? I went to dom.spec.whatwg.org/#interface-nam... and unless I'm reading it incorrectly, I believe it states that using a string indexer is valid.

Thoughts? Happy to PR this up if it's valid.

And finally, I've made a few PRs to dev.to to get back in the swing of things of contributing there as well.

Fixed some frontend linting issues #2495

What type of PR is this? (check all applicable)

  • [x] Refactor
  • [ ] Feature
  • [ ] Bug Fix
  • [ ] Documentation Update

Description

Fixed some linting issues being reported in the frontend.

Related Tickets & Documents

#1828

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

Added to documentation?

  • [ ] docs.dev.to
  • [ ] readme
  • [x] no documentation needed

[optional] What gif best describes this PR or how it makes you feel?

Richie Rich robot

Boom!






Project: TypeScript

This was a contribution to the TypeScript repository but in the form of filing an issue. While working on the Refined GitHub extension refactor to TypeScript, I discovered an issue with the NamedNodeMap interface in the core types that ships with TypeScript. The issue got labelled as a bug so it is in their backlog now.

Missing string indexer on NamedNodeMap interface in lib.dom.d.ts? #30928

For context, see https://github.com/sindresorhus/refined-github/pull/1783, specifically this commit, https://github.com/sindresorhus/refined-github/pull/1783/commits/48baae0a1952e05b35c3a93d25c854bec2f99b6f.

Also, just posting my tweet about this so that people can find discussions about the issue. See https://twitter.com/nickytonline/status/1117524648982392833

I'll restate what I tweeted as I probably should have posted my question here originally.

The NamedNodeMap interface in lib.dom.ts does not allow for a string indexer, even though vanilla JS supports this in browsers, e.g. someDomElement.attribute['aria-label'].value.

We have code like this in the Refined GitHub extension, so for the time being, I've gone ahead via a declaration merge for NamedNodeMap

interface NamedNodeMap {
      [key: string]: Attr;
}

I can't tell from the MDN docs for NamedNodeMap if it's standard or not. All they seem to mention is "Attr nodes' indexes may differ among browsers" which wouldn't apply to access by the attribute name.

Just wondering if this was omitted by mistake or is it because this is not considered WHATWG DOM standard? I went to https://dom.spec.whatwg.org/#interface-namednodemap and unless I'm reading it incorrectly, I believe it states that using a string indexer is valid.

Thoughts? Happy to PR this up if it's valid.

Project: dev.to codebase

I continued to contribute to my favourite open source project, DEV.

GitHub logo forem / forem

For empowering community 🌱


Forem 🌱

For Empowering Community

ruby version rails version Travis Status for thepracticaldev/dev.to Code Climate maintainability Code Climate test coverage Code Climate technical debt CodeTriage badge Dependabot Badge GitPod badge Netlify badge GitHub code size in bytes GitHub commit activity GitHub issues ready for dev Honeybadger badge Knapsack Pro Parallel CI builds for dev.to

Welcome to the Forem codebase, the platform that powers dev.to. We are so excited to have you. With your help, we can build out Forem’s usability, scalability, and stability to better serve our communities.

What is Forem?

Forem is open source software for building communities. Communities for your peers, customers, fanbases, families, friends, and any other time and space where people need to come together to be part of a collective See our announcement post for a higher level overview of what Forem is.

dev.to (or just DEV) is hosted by Forem. It is a community of software developers who write articles, take part in discussions, and build their professional profiles. We value supportive and constructive dialogue in the pursuit of great code and career growth for all members. The ecosystem spans from beginner to advanced developers, and all are welcome to find their…

Hacktoberfest

This year was my first year participating in Hacktoberfest. It was a fun endeavour which included contributions to DEV as well as adding some automation for properly formatting markdown files for the learnstorybook.com project.

Open Source in 2020

I will definitely continue to contribute to open source in 2020. What about you?

Getting Back in Shape

I’ve been athletic pretty much since elementary school, but in recent years, I’ve had a few setbacks with injuries. Last fall, I joined the corporate soccer team and a few practices in, I ended up tearing one of my calves. While I was recovering from my injury, I ended up putting on quite a few pounds, so end of April this year, I hit the tipping point and began my journey to getting back in shape.

Initially, it was quite tough, because even though I had completed my physiotherapy for my torn calf, I was nowhere near being in any kind of running shape. I ended up joining an Orange Theory and the rest was history. I busted my butt and got back into pretty awesome shape, dropping literally 35-40lbs of fat.

I put a couple back on as it’s the Christmas holidays, but will be getting back into the swing of things post-holidays.

Automating Deployments for My Site

I don’t know about you, but updating dependencies for your site is a pain because if you need to build with the new dependencies and make sure everything still works fine. Or even code changes for new stuff. For my blog, it is not a mission-critical site, but I took my Cypress knowledge, a dash of Dependabot and Netlify to put it all together. Let the robots do the heavy lifting.

I have probably already saved a good 50 hours this year not updating and testing dependency updates and will probably save myself hundreds of hours, maybe the low thousands of hours next year.

And yes, I wrote a post about it.

Page Load Time Improvements for Shotgun

I improved the page load times of the product I work on, Shotgun, with some webpack and frontend build changes I made. One of our high profile clients, Lucasfilm Ltd. was very happy about the improvements. It felt really good when our support team posted in Slack that Lucasfilm noticed a 20% speed improvement based on their own internal testing. 🔥

My win this week was hearing back from one of our clients, Lucasfilm Ltd.

Their technical team let us know that they were very happy with the improved frontend performance of Shotgun, the product I work on.

These improvements are related to a tonne of work I did to our webpack configuration/frontend build a couple of months ago (they just upgraded to the version with my improvements). 🥳

Maybe they’ll send me the Millennium Falcon I couldn’t afford as a kid.

Millenium Falcon

Or maybe a Wookie. I’d be happy with a Wookie. Chewie!

Chewbacca

Interviewing at Facebook

One day, I received a message on LinkedIn and noticed that it was a message from a recruiter from Facebook. Even though I was quite happy with my current job, it seemed silly not to entertain the thought of potentially working at Facebook and the fact that they contacted me made me feel pretty good.

I passed the initial phone screen and then prepped for my first interview that would be with a frontend engineer from one of the teams at Facebook. I spent a lot of time preparing, and ended up doing really well. To be honest, I didn’t think I would make it past the first interview. I just always assumed the big companies were never achievable. A side effect of having imposter syndrome even after years of experience. 🙃

I moved on to the second interview, and once again did well. I got the phone call from Facebook that they wanted to move to the final step, an interview in Menlo Park. They flew me down for the weekend and then I was to interview on Monday. I had never been to California, so I was very excited to go.

Facebook badge

One of my cousins lives in California, so I also took the opportunity to visit some family. Aside from that, I contacted Brian Vaughn, one of the core React team members just to see if he wanted to grab a bite to eat/coffee with a random Canadian. I’ll be honest, I generally do not ask strangers to meet up, but he seemed like such a nice person on Twitter and GitHub, that I just went for it. We grabbed some sushi and a coffee on Sunday and just chit-chatted. It was really nice of him to do that while I was there.

Thanks Brian and I am definitely hooked on Philz coffee now! Philz Coffee… please come to Canada, specifically Montreal. 😆

On Monday, I had an intense day of interviewing at Facebook, but there was a lunch break. At lunchtime, none other than Andrew Clark from the React core team joined me for lunch. It was awesome. We spent an hour together at lunch talking about all kinds of things including React. Thanks for lunch Andrew! Andrew is super nice BTW.

It gets better. After lunch, Andrew took me to grab a coffee on the Facebook campus. He mentioned that Sebastian Markbage, another React core team member, instituted a mandatory coffee break a couple of times during the day based on a Swedish tradition called Fika. So we grabbed our coffees and I got to sit with the React team that is based in California. It was only about 15 minutes, but it was just another amazing unexpected thing to come out of interviewing with Facebook. Honestly, the entire team was super nice. I don't know if this is the norm when a frontend interviews at Facebook, but I am definitely not complaining.

I finished my day at Facebook exhausted and headed back on a redeye to Montreal. Regardless of what the final outcome was of the interview process with Facebook, it was an amazing experience for me. In the end, things did not work out, but had I never accepted that initial phone call with the recruiter from Facebook, I never would have met any of the React team or visited my cousin. Remember folks, take chances!

And yes, I have a post about that.

Building a Course

This is a work in progress, but I started work on a TypeScript course. It's not finished yet and I have never written a course or any type of education material, but I am very excited to get it completed. Special shoutout to @aspittel for providing me with some great coaching for writing this course.

I will definitely let you all know when it's available.

VS Code Tips

I created the @vscodetips Twitter account back in September 2017 and it looks like this year, it’s gained a lot of traction. It gained ~2000 users in 2019. By no means a huge amount of followers in the Twittersphere at almost 3500 users, but I’m still pretty happy about that. People seemed to enjoy the tips I post or things I retweet related to VS Code. If you’re one of VS Code Tips followers, thanks!

VS Code tips is also on DEV, but I have not done much there yet. You can check out the profile here

vscodetips image

New Beginnings Starting in 2020

As the year came to a close, I decided to accept an unbelievably amazing opportunity. I am very excited about it! It is a fully remote position working with a dope team. I cannot wait to get started. I will share more about this in early 2020.

Thanks for reading and Happy New Year!

Posted on by:

nickytonline profile

Nick Taylor (he/him)

@nickytonline

Senior software engineer at DEV/Forem. Caught the live coding bug on Twitch at livecoding.ca

Discussion

pic
Editor guide
 

I'm so proud of all the work you do Nick. Glad to have met you last year through your VSCode account. Keep up the good work. Holler if you need help with the course you are working on — not many helpful hands available in the teaching side of things on the internet. So, I know what you must be going through.

Peace! ✌️

 

Thanks for the kind words Ahmad and thanks for the offer. 👏

Maybe we will meet up IRL at some point. I have yet to attend a conference aside from one sponsored by my old job, so I am looking to start attending conferences this year.

Happy New Year!

 

Wow! What a story! Keep hustling Nick, your story is a straight-up inspiration to many. Have a great 2020 💪

 

Thanks Vaibhav!

 

Woah I'm super happy for you Nick! Good luck with your new position and a very happy new year🌻

 

Thanks Saurabh!