TensorflowJs detect multiple objects from an image with COCO-SSD – PART 1

We have seen some while ago how to use a trained TensorflowJs model to recognize the main object from an image. Today we will do something similar, but with an upgrade. While our initial example was only able to recognize just one single object, in today's ... more

Fixing the Uncaught SyntaxError: Undefined label in Javascript

The Javascript uncaught SyntaxError: Undefined label <<label name here>> might happen because one of the following reasons. 1. No other code is allowed the label declaration and its loop The label name needs to come right after its corresponding ... more

Using break, continue, and labels in Javascript

Let's take a short look at the basics of using the break and continue statements in JavaScript. Also, we will see how labels fit in. The break and continue keywords in Javascript The break keyword is used to exit an iterative for or while loop. For example: ... more

Javascript how to detect the right click

The most reliable way I found to detect the mouse right click in Javascript is by using the contextmenu event: element.addEventListener('contextmenu', (event) => { console.log("🖱 right click detected!") }) So, if we want to disable the ... more

Select text or set the cursor in a HTML input with Javascript

Tip of the day: for any HTML Input Element, we have access to a setSelectionRange() method that controls where the cursor is placed in that element, and also what text is selected. The setSelectionRange() takes a starting position parameter and the ending ... more

What is the AbortController in Javascript and 4 ways to use it

The Javascript AbortController interface provides an elegant mechanism that allows us to abort different types of requests and async operations when needed. AbortController works by adding its signal to an async operation so that later we can use it ... more

How to create an eyedropper color selector tool with vanilla Javascript

Javascript has an Eyedropper API for selecting colors. The process for creating an eyedropper color picker is pretty straightforward: const eyeDropper = new EyeDropper(); eyeDropper .open() .then((result) => alert("Selected color: " + result.sRGBHex)) ... more

How to check if a Javascript function was called with the new operator

We can use new.target to detect if a Javascript function is called as a constructor. For example, let's say we have the following situation: function Cat() {} // normal function call Cat() // call as a constructor const myCat = new Cat() We can use the ... more

[Js-Craft #39] Inverting colors and black-white images using Javascript, podcast listening notes, and one hot encoding in TensorflowJs

Hey! It's Daniel here and welcome back to the Js-Craft newsletter! I hope your past 2 weeks were great! With the launch of GPT4 and Google Bard, I feel like March has flown by and I’m still catching my breath. Let’s boogie! I was able to publish 12 new ... more

Javascript difference between the ?? (nullish coalescing) vs || (logical OR) operators

At a first glance the Javascript operators Nullish Coalescing ?? and logical OR || are very similar: // same result for || and ?? const x = null || 5 const y = null ?? 5 // x is 5, y is 5 However, there is a difference: the || OR operator uses the right ... more

Is there a drop in software engineer job openings and big-tech job-switching stats

If you don't know who Gergely Orosz is I really encourage you to take a look at his blog The Pragmatic Engineer and his newsletter. He recently posed two good articles on the big-tech job-switching stats and whether is there a drop in software engineer ... more

Listening notes #2: All-In Podcast on the AI search wars

The All-in podcast is quite a new addition to my listening list. It's a well-made podcast, enjoyable to listen, and has a lot of good high-level business overview insights. Just take a look at the background of the guys who host the podcast: Chamath ... more

Listening notes #1: Montana Low, founder of PostgresML, and Swyx on running ML models in the database

I am an avid podcast listerner. I think the biggest amount of information I consume is by listening to stuff. For me, nothing beats the feeling of a long walk in nature while listening to some interesting talks. I have always tried to find a way to blend ... more

React scroll into view last item added in a list

What if we want to scroll to view the last element added to a React list? Or actually any array style elements? See the below video for the full example: We will start with this basic setup: const App = () => { const [items, setItems] = useState([]); ... more

[Js-Craft #35] Making a NextJs responsive sidebar layout, wildcards for querySelectorAll(), using React Icons with NextJs and much more

Welcome to the first Js Craft newsletter of the year. Wish you a great 2023! From the past edition of this newsletter, I've been heads down writing content for Js Craft and managed to publish over 40 new articles. It was quite an intensive effort, but ... more

Scroll an element into view at button click in React

One of the easiest ways to scroll to a React element is by using a mix of the useRef() hook and the scrollIntoView() API. We will see how can we do this by building the below example: We will start with a simple stateless component: const App = () => ... more

CSS ellipsis (the 3 dots) on multiple lines

Some while ago I've written an article on how to use the text-overflow CSS property to add an ellipsis (the 3 dots) when truncating long lines of text. That approach worked only for one single line of content. But how can we get the same result while ... more

Add suffixes such as “st” or “nd” to number values in Javascript

Let's see how we can add ordinal suffixes to number values in Javascript. For example: 1 becomes 1st 6 becomes 6th 33 becomes 33rd 50 becomes 50th Adding ordinal suffixes to numbers using Intl.PluralRules() We have the Javascript Intl library that is ... more

Open a link in a new tab in React

We have seen in a former article how to open a NextJs link in a new tab. But, how can we do that in the plain old ReactJs? How can we open a link in a new tab in React? Opening a link in a new tab in React The first obvious step is to use the target="_blank" ... more

3 cases when you should not use Arrow Functions in Js

I love arrow functions in Javascript! For some reason, they feel much more natural to me, compared with the classic regular Js function expressions. And also they take fewer keystrokes to type: //arrow functions const square = x => x*x //function ... more

Making a responsive sidebar layout with the NextJs 13 app folder

The scope of this article is to build a NextJs sample app with a layout that contains a responsive sidebar. We can use it as a starting example for future projects. The final example is shown in the video below: Let's see how we can do this. Setting ... more

Working with Javascript proxies, private fields and the Reflect API

Let's say we have the following class declaration: class Dog { #name set name(n) { if(n ==="abc" ) { throw new Error("Provide a longer name") } this.#name = n } get name() { return this.#name } } The name property is marked as a private ... more

How to add debounce to useEffect() in React

In the case where we want to build a React search box, or autocomplete text input, a debounce functionality comes very handy as we don't want to have an API called for each keystroke of the user. So, instead of having something like this: useEffect(() ... more

CSS – prevent scroll of body but allow modal scroll

Let's say we have an HTML structure, with some main content and a modal, like the one below: <body> <div><!-- main content here --> </div> <div class="modal><!-- modal content --> </div> </body> Both ... more

Using React Icons with the NextJs 13 app folder

We have seen in a previous article how to use the Font Awesome icons in NextJs. A reader emailed me and asked how to use React Icons as an alternative to Font Awesome. Did not even know about this icon set so went and played with it a bit. It turns out ... more

Javascript – use querySelectorAll() with wildcards

The querySelectorAll() consolidated all the methods such as getElementById() , getElementsByTagName() or getElementsByClassName() into just one single universal tool. It became the ultimate selector method! While working on the React pin input component ... more

NextJs – how to set the common meta tags between pages on multiple routes

Let's say we have the following route structure for a NextJs app: / /settings /products /about We want to place some common meta tags on any page and subpage that we have under the /products and /about routes. For example, we have to set the viewport ... more

Using the Not Found page in NextJs

One of the special pages in NextJs for the app folder is not-found.js , or not-found.tsx . As the name implies it is used for cases when we want to signal that a specific item was not found. It just renders a basic React component: // app/products/not-found.js ... more

CSS Fallbacks for WebP background images with @supports

The WebP image type provides a big performance boost over the classic alternatives such as png's or jpeg's. However, there are older browsers that don't support them. Let's say we have the following CSS background-image declaration: .logo-container { ... more

How to set a CSS background-image fallback

Let's say we have the following CSS background-image declaration: div { background-image: url('my_image'); width: 200px; height: 100px; background-size: 100%; } For some reason, the url('my_image') image may not be available sometimes. We want to be ... more