New Year New Goals - My 2020 Resolutions

Chris Naismith — Wed, 01 Jan 2020 05:01:41 +0000

2019 was a crazy year for myself, both professionally and personally. In the span of 2 months I got married, bought and moved into my first house, and started a new job. Talk about stress. But in the final moments of 2019, I hope to plan out and goal set for the upcoming year and decade.

Hopefully writing down my goals and sharing them, will encourage me to stick to them.

💻 Writing More

I wrote my first blog post on dev.to in 2019. In 2020 I plan to write 12 different blog posts by the end of the year. Sharing knowledge is incredibly important, either for your team or bettering the community.

I had been meaning to write much more in 2019, but every time I was close to publishing a post I always second guessed myself. But hopefully by jumping 'into the deep end' I can keep up this momentum and continue to share my insights/knowledge with others, and learn back from them.

📚 Reading More

Reading is a great way to learn from others. Wether it's books, blog posts, articles you can always learn something new. This year, similar to writing more, I'd like to read 12 new books. As a kid I loved reading, and in 2019 I started reading again after not reading for so long.

In addition to books, I plan to read more blog posts and articles. I have no specific goal in mind, but I look forward to the new content that 2020 has in store.

⌨️ A New Front End Framework

In our industry we joke about new frameworks coming out every month, day or hour. When developing on the front end, I tend to lean towards React. While I love React, I am interested in playing with some alternatives in either strengthening my love for React or finding something better.

Being comfortable for far too long in anything can cause you to plateau in your skills. Which is why I plan in 2020 to pickup Vue.JS or Svelte for a small project to see if the grass is greener on the other side.

🌐 Open Source

Hacktoberfest came and went this year and I failed to participate. Obviously it's optional but the idea of contributing to the community in which I benefit from is of huge interest to me. I'm hoping by the end of the year to have made a beneficial impact on at least 1 open source project.

My current interest is in creating a plugin for the open source CMS Strapi. If you are not familiar with it, I recommend taking a look at it.

👫 Community

I created a developer meetup in the city I grew up in as there's little to no social community. I hope to continue the success of it in 2020 by making new friendships, helping educate others, and learn from others over some pizza.

📣 Talking

I had never given a tech talk until this year. I hope to continue some talks in the new year as it has been a lot of fun (in fact my most recent talk I converted into my first ever blog post - 2 birds with one stone!).

☯️ Balance

I recently just stopped a part time job as it was severely cutting into my personal time. Early mornings and late nights was starting to cause strain on my mental health and relationships as it would take time to recover. But one thing I hope to do in this new decade is take the time to enjoy the world around me and my life with my new wife. Noone on their death bed wishes they worked more.

Conclusion

There's certainly more I could add to this list, getting promotions, or a raise. But I think that would be in most people's resolutions.

What's on your list? Got any book recommendations? Did you meet your goals? I'd love to hear your comments down below.

Cross Tab Communication with Javascript

Chris Naismith — Fri, 27 Dec 2019 02:13:32 +0000

About a month ago an interesting problem came up at work, how can I listen to a form being submitted that may be in another tab? It's something that if it was in the same tab, would be much more straight forward. But I also wanted to know can I send messages between these two, or more, tabs.

What is Cross Tab Communication?

Cross Tab Communication is the ability of multiple tabs, windows, frames of iframes (further known as an instance) to send and receive 'messages' to and from other instances.

Limitations / Gotchas

This does come with some drawbacks. This will only work with domains on the same-origin.

You will not be able to use this across HTTP and HTTPS.
You will not be able to use this across different hosts.
You will not be able to use this across different ports.

How is this useful?

Before getting into some demos, I figure I would go over why this can be useful. Sometimes your users are going to have multiple instances of your site open, and how we handle their experience can be quite important.

For example, Dan Abramov's blog https://overreacted.io/ has a toggle for a dark mode/light mode. Using this, you could switch all open instances to the preferred theme without refreshing.

Examples / Demos

Example 1 - LocalStorage

External link if you don't want the preview

How this works is by setting/modifying a value in local storage or session storage on load of the application. When this happens, an event is fired that can be listened to on any other instance. This event contains information such as the key that was modified, the previous value, the new value and much more. If you're familiar with React, this is similar to how you can compare the previous props, to the current props in class lifecycle method componentDidUpdate.

Drawbacks of Example 1

There are some draw backs to using this method. For one, you can not store objects in local storage/session storage unless they are stringified. This means you would have to parse any of these values which may not be a huge deal, but in my opinion is not ideal.

The second draw back is that the event will not be fired if a value is updated to the same value. In my example I get around that limitation to setting the key loaded to Date.now().

Example 2 - BroadcastChannel

External link if you don't want the preview

In this example, I'm using the BroadcastChannel API. To do this, you create a new BroadcastChannel using a name (Similar to an IRC channel).

After subscribing to the channel you are returned an instance of the BroadcastChannel object, which in this example we use two parts of. You can send a message using the postMessage function, or attach a function to the onmessage property.

Similar with Example 1, and messages you send in one instance will be received in other instances. Along with the ability to subscribe to the same channel multiple times.

Drawbacks/Benefits of Example 2

Unlike Example 1, you are able to post full objects, arrays and other pieces of data.

However, Example 2 is a little bit more complicated and may be overkill depending on what you're trying to do.

Support for the BroadcastChannel API is also limited. Compared to local storage (globally at 92%), BroadcastChannel is at almost 76%. Chrome and Firefox both support it, with no support from IE, Safari and Edge. (Chromium Edge does support it, but is still considered in Beta as of this post).

More Usecases

This could be used in a CMS to let the user know they already have an instance open when trying to modify something, or to keep it in sync across tabs.

Authentication/locked content could be unlocked when logging in so that other windows are not out of sync.

Changing a profile picture

Communication between iframes.

Changing themes of a website, and syncing those changes across all tabs.

Conclusion

I don't think that this is going to be ground breaking and change the way we make our applications. But I do think implementing this across some features of our applications could improve the user experience.

If you have any other use cases you think this would be useful for, I'd love to hear it!

Resources

CanIUse - Localstorage
CanIUse - BroadcastChannel
MDN - BroadcastChannel

DEV Community: Chris Naismith

New Year New Goals - My 2020 Resolutions

💻 Writing More

📚 Reading More

⌨️ A New Front End Framework

🌐 Open Source

👫 Community

📣 Talking

☯️ Balance

Conclusion

Cross Tab Communication with Javascript

What is Cross Tab Communication?

Limitations / Gotchas

How is this useful?

Examples / Demos

Example 1 - LocalStorage

Drawbacks of Example 1

Example 2 - BroadcastChannel

Drawbacks/Benefits of Example 2

More Usecases

Conclusion

Resources