DEV Community: James Thomson

Native cloning is coming to Javascript soon!

James Thomson — Thu, 16 Dec 2021 23:52:02 +0000

If you've ever wondered "why doesn't Javascript have a method to deep clone?", you wouldn't be the only one.

For years we've been using various methods or libraries to clone objects and it's never felt quite right. Thankfully, structuredClone is coming to a browser near you! Don't get scared off by the sea of red for browser support. All browsers have implemented it in their nightly releases, so it's on the way.

How do we use it you say? Simple:

const myObj = {
  title: 'Something',
  myNestedObj: {
    title: 'Something else',
    // ... and so on
  }
}
const myDeepCopy = structuredClone(myObj);

That's it. You now have a deep clone of your object. There are some limitations to be aware of though.

As always,
Happy coding! 🤓
Cover photo credit

Pro Tip: Use a screen recorder to debug DOM mutations

James Thomson — Thu, 30 Apr 2020 05:13:57 +0000

These days as web developers we have a plethora of various tools to help us debug. Everything from network to memory to performance issues can debugged from DevTools. But there is one thing that there doesn't seem to be a tool for (at least that I know of); a DOM mutations timeline.

When you're dealing with a fair number of DOM mutations (think transitioning of elements) there can be a lot going on - too much for the eye to catch on its own. Sure you could stare at inspect and repeat the action over and over again to try and catch it... or you could make a screen recording and then scrub through the video 😉

Personally I use Quicktime (perhaps someone can suggest a good app for Windows in the comments). It comes free with Mac and has everything I need to select an area of my screen to record. Just launch Quicktime and select File > New Screen Recording to get started - simple.

Above I'm using this technique to debug a z-index stacking order issue when new cards are added to the stack.

So there you go, another tool to add to your debugging toolbelt.

As always,
Happy coding! 🤓

React Devs & Orgs to Follow on Twitter?

James Thomson — Fri, 22 Nov 2019 00:34:37 +0000

Hi all, I've been in the Vue world for a few years now and so React took a bit of a sideline. Now it's time to sharpen my skills in React.

What developers or organisations do you follow on Twitter to keep up with the latest React related news, techniques, patterns, etc.?

5 Things To Do When You're Feeling The Struggle

James Thomson — Fri, 30 Aug 2019 04:03:36 +0000

Being a developer does not come without its heartache. We deal with complex requests, tight deadlines, and unforeseen variables (e.g. major change requests).

It's always good to have a few strategies in your pocket when dealing with these so you don't go full Homer and tear all your hair out.

So, let's get to the list...

1. Take a Break

This one isn't always easy to do when you're on a tight deadline, but more often than not it will help greatly. Most of the time the answer is right there in front of you, but you're just too wrapped up in the problem to see it. By taking a break it'll help you refocus and think about the problem with a different mindset.

I work from home, so some things I'll do are:

Throw the ball for the dogs
Have a shower (you'd be surprised how many good ideas are shower ideas)
Go for a walk

For those that work in an office:

Go for a cup of coffee/tea
Go for a walk around the block
Run a quick errand

Basically, just get away from the screen to clear your mind up a bit and consider new angles to the problem.

2. Work on Something Else

Similar to the above, this allows you to take a break from the problem at hand, but still get some other work done. Perhaps it's another feature or just some admin stuff that's been piling up. Stepping away from the problem should help you refocus.

3. Talk it Out

Often called "rubber ducking", this method is as simple as talking out the problem to yourself. It forces you to stop and think about the problem aloud.

4. Write it Out

Similar to talking it out, writing out your problem helps you see it in a new light. Go through the problem and write it out step by step to help you visualize it.

5. Ask for Help

And last, but not least, never be too proud to ask for help. Often the solution is right in front of you, but just requires another set of eyes or perspective to see it. Whether you seek help from your colleagues, community forums, or chat, this is a great way to work through a problem.

The above list may seem pretty straightforward and that's because it is. The main thing to remember is to just stop and think before you get overwhelmed and frustrated.

I'm sure we all have our own strategies to deal with the struggle. What are some of yours?

As always,
Happy coding! 🤓

SVG Tricks: Kickass Hotspots!

James Thomson — Thu, 01 Aug 2019 09:29:30 +0000

Precursor: This article assumes you know the basics of SVG. If you haven't already discovered SVG then there's no time like today. The power behind the features of SVG are quite amazing and oh so useful. Today we're going to be talking about just one of those features.

The Problem

As you're probably already well aware, everything on a website is a box. We can style elements to look like they're not boxes, but ultimately the element and the room it takes up is a box.

For the most part this isn't an issue. A lot of what we create fits quite nicely in a box, but what do we do when we have to create something that doesn't really fit that model?

For example, let's say we have the image below and need each character to be clickable.

At this point you may be thinking, "Well, I could just use an image map", which is true, but also limiting and tedious to work with.

Another solution could be to just absolutely position some elements overtop of the image like so:

However, you'll notice because the characters overlap each other it becomes quite difficult to reliably select the character you want.

The Solution

So, as I'm sure you've already guessed, our solution is going to be to use SVG! Using Illustrator (but you can use Inkscape, or any other preferred tool to create SVG's, of course) I imported the image and used the pen tool to create paths around each character.

Here's what that looked like:

Not very pretty, I know, but we'll clean things up a bit in the code.

Simply by changing our paths fill attribute to transparent we now have invisible hit areas that perfectly (well, as perfectly as you make them 😉) trace our characters...

Pretty cool, eh? Add a splash of javascript and some CSS and the world is your oyster. Oh, and did I mention it's all completely fluid?

Just For Fun

I wanted to see if I could achieve the same over a video and turns out with a bit of absolute positioning, it's certainly attainable, as you can see below:

So there you have it, go forth, try your own out and post what you come up with in the comments. 🙂

And as always, happy coding! 🤓

Wanted: JavaScript Book Recommendations

James Thomson — Thu, 18 Jul 2019 01:23:35 +0000

I consider myself to have a pretty decent knowledge of JavaScript, but I know there's ALWAYS more to learn. I'm looking for some paperback book recommendations to take my knowledge to the next level, really get into the intricacies of JS - and boy are there many!

So, what are your must read JavaScript book recommendations?

Edit: Thanks all for the recommendations, looks like I have some reading to do!

Prefix vs Postfix When Using Increment & Decrement Operators.

James Thomson — Mon, 01 Jul 2019 03:59:34 +0000

Cover photo: @markusspiske

Whether you've been using JavaScript for 10 days or 10 years, you've most certainly come across and have used the increment (++) and decrement (--) operators.

But were you aware that how you use these on the operand will differ when used prefixed as opposed to postfixed?

The Difference

First, let's see what happens when we use a postfixed increment operator.

Given this statement, what would you expect the console to log?

let count = 0
console.log(count++)
console.log(count)

You may have been expecting it to log 1 for both, but this isn't the case. It will log 0 and then 1.

let count = 0
console.log(count++) // 0
console.log(count) // 1

Why? Because postfixed operators will return the value of the operand before applying the operator.

Now, let's try the exact same code, but with a prefixed operator:

let count = 0
console.log(++count) // 1
console.log(count) // 1

As you can see, the operator is now first applied and then the value is returned after.

Conclusion

So what's the take away here? I think really just to be aware of the intricacies of JavaScript. There's no harm in using these operators, but you should be aware of how it will affect your code. Sometimes it can even be better to go the explicit route: count = count+1.

Either way, I hope you learned something!

As always,
Happy Coding 🤓

Are portfolios still necessary as a front end developer?

James Thomson — Wed, 19 Jun 2019 01:12:20 +0000

It's been a few years since I've had to go through the job seeking process and I'm curious, is it still the norm to have a portfolio site as a front end developer?

Some of us, myself included, work on a single web app over the course of a few years so a portfolio of recent work is going to be pretty sparse. Of course a lot of work has gone in to the site so different aspects could be featured, but is it overkill to have a portfolio for this?

None of the job postings I've seen for front end developers make any mention of sending your portfolio, which is why I wonder if it's still a necessity.

Edit: Thanks for the feedback everyone. It seems the consensus is that having a personal site is worthwhile and a great place to gather your past experience, experiments, and just general thoughts. All very useful for obtaining potential employment opportunities.

Google IO: Chrome is closing the gap between web and native

James Thomson — Thu, 09 May 2019 04:02:08 +0000

This years Google IO is full of awesome new tech, but one I am most excited about is the effort to "close the gap" between web and native.

The livestream presentation isn't up yet, but you can access the Codelab here:
https://codelabs.developers.google.com/codelabs/web-capabilities

There's also more information (under the title "Creating a more powerful web") here: https://blog.chromium.org/2019/05/google-io-2019-whats-new-with-chrome.html

By the sound of it, most of these API's are scheduled for Chrome 78+ so we've still got a way to go, but it all sounds very promising.

What are your thoughts?

Sublime 3: Goto Anything... Tip

James Thomson — Tue, 07 May 2019 05:18:36 +0000

If you use Sublime 3 you're likely used to using Goto Anything... (CMD+P Mac, CTRL+P Windows) to quickly bring up files. One downside is this will bring up vendor and compiled files as well. This really isn't ideal. So to fix this you can exclude these directories.

Open up your user settings and add this line:

"binary_file_patterns": ["node_modules/", "public/", "vendor/", "*.jpg", "*.jpeg", "*.png", "*.gif", "*.ttf", "*.tga", "*.dds", "*.ico", "*.eot", "*.pdf", "*.swf", "*.jar", "*.zip"],

If you add other folders, just be sure to suffix them with a "/".

Then save the file and you should be good to go.

As always, happy coding! 🤓

Naming things is hard. Agree or disagree?

James Thomson — Wed, 01 May 2019 03:29:59 +0000

I've been a web developer for 10+ years now, mostly on the front-end, and I still find it difficult to name CSS classes, especially as a project grows. I've been using BEM for awhile and while this helps keep things scoped, there comes a time when you've used up a lot of the common component names and have to start getting more creative. So much so that I've resorted to keeping a (growing) gist of names.

Funnily enough, I don't seem to have this problem in naming JS components (for the most part). I work a lot with Vue and am thinking of trying out CSS Modules/scoped CSS in hopes it eliminates the need for CSS component names that BEM creates.

What are some strategies you use when naming things?

Greatly Reduce PNG Weight With This One Trick

James Thomson — Fri, 26 Apr 2019 08:10:20 +0000

Preface: In this article I'm assuming you're already familiar with SVG. If not, now's a great time to familiarise yourself! The power of SVG is truly amazing.

More than likely you've found yourself in this situation... You get handed a design, it's beautiful and full of color and images.

The designer then informs you that the hero banner has text that changes and so does the background color.

Here's what that hero banner may look like (though likely far better designed, but hey, it gets the point across):

Ok, no problem, that means we can't just use a background image and be done with it, we need to break the hero up into piece so portions of it can be dynamic.

Usually you'd reach to a PNG for the ice cream cone image. But, PNGs are usually pretty big, especially once we start catering to high DPI screens. Our ice cream as a PNG would clock in at a whopping 1.9mb! So instead, we're going to use a trick with SVG masks.

Jpg (left) 292kb, 8-bit PNG (right) 17kb

First, we're going to save our ice cream as a jpg. I'll use a black background in place of the transparency.

Next, we'll save another image as an 8-bit png to use as the mask image. Any part that is black will be invisible and any part that is white will be visible.

Those 2 images we'll then use together in our SVG like this:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin" version="1.1" viewBox="0 0 938 1912">
  <defs>
    <mask id="mask">
      <image width="938" height="1912" xlink:href="/images/ice-cream-mask.png"/>
    </mask>
  </defs>
  <image mask="url(#mask)" width="938" height="1912" xlink:href="/images/ice-cream.jpg"/>
</svg>

You can reference the images as seen in the code above or you can even inline them as base64 which you can see in this Codepen.

And there you have it. We've gone from a 1.9mb transparent PNG to roughly 309kb SVG without compromising quality or transparency. Pretty sweet, hey?

As always, happy coding! 🤓

It should be noted, I haven't tested all the browsers out there, but SVG support is now very wide spread so I wouldn't expect many issues. That said, if you've encountered any, let me know in the comments.

You can also use this great Codepen to help with your tests.