Welcome to JSFeeds
hello.js
NEW !!!
Tuesday, 11 July, 2023 UTC
CSS styling for the upload buttons of input type file
While working on the example of inverting colors in a picture with Javascript I've realized that adding CSS styling on upload buttons is not that easy. Until I discovered the ::file-selector-button pseudo-element. This pseudo element applies to the HTML ... moreMonday, 10 July, 2023 UTC
Generating black-white and grayscale images with Javascript and canvas
In today's article, we will build a simple app where we can upload an image, and using Javascript and the canvas element we will get a black-white plus a grayscale version of that image. I will not get into too many details about the initial setup of ... moreFriday, 7 July, 2023 UTC
What is the @scope rule in CSS?
The @scope rule in CSS creates a unique insolation context for a given selector. For example, having the following HTML: <div> <p>This paragraph gets its color from the general CSS.</p> </div> <div class="afla"> ... moreWednesday, 5 July, 2023 UTC
What is the learning rate parameter in TensorflowJs
Let's say we have a super simple neuronal network with just one weight. The initial weight value is 0.2 , and with this weight, it will make a prediction with some error. Hoping to minimize the prediction error, also known as the loss function, we will ... moreTuesday, 4 July, 2023 UTC
Restrict image upload size with JavaScript
After posting the article about how to invert the colors of an image with Javascript I received a question regarding whether it is possible to limit the size of the uploaded file image. So here it goes! Let's say that we have the following HTML input ... moreFriday, 30 June, 2023 UTC
Lee Robinson on if NextJs client components are bad
I really like this short video that Lee Robinson, the VP of Developer Experience at Vercel - the creators of NextJs, put out a few days ago: The main takeaway is that we can gradually adopt all the new features that are introduced in NextJs. All of the ... moreThursday, 29 June, 2023 UTC
Javascript format date no libraries
Formatting dates in vanilla Javascript can be tricky. That's the reason why often of the articles regarding date formatting in JS point to external libraries such as Moment.js or Day.js. I don't think it's worth adding a few extra kb of Javascript libraries ... moreWednesday, 28 June, 2023 UTC
Fixing the NextJs Error: Invalid src prop on `next/image`, hostname is not configured under images
Let's say we have the following NextJs page: import Image from 'next/image' export default function Home() { return ( <main className={styles.main}> <h1>The biker cat 😼!</h1> <Image src="https://www.js-craft.io/wp-content/uploads/2023/06/biker_cat.webp" ... moreTuesday, 27 June, 2023 UTC
Make an infinite scroll in NextJs 13 with useInfiniteQuery()
We previously looked at how we can add pagination to NextJs 13 data fetching. Today, let's see how to use a similar approach to build an infinite scrolling component in NextJs with useInfiniteQuery() . Something like the component below: If you want ... moreFriday, 23 June, 2023 UTC
A CSS margin-trim example
The CSS margin-trim property was recently added and it manages the trimming of the margins when a child meets the container's edges. Let's take the below example: <head> <style> .container { margin: 1rem; border: 1px solid; margin-trim: block; ... moreThursday, 22 June, 2023 UTC
Adding useState() to React Context
It is very common to have setState() variables passed to the value in a React context. Given that setState() is available only within React components I've seen cases where the value property of the main app context is initialized in the root of the ... moreWednesday, 21 June, 2023 UTC
NextJs 13 server actions fetching data with form parameter
Server actions were added in NextJs 13.4 and they allow us to run server code without having to create a dedicated API endpoint. Let's see how we can build a simple NextJs app that reads a value parameter from an HTML form and makes a call to an API. ... moreSaturday, 8 April, 2023 UTC
TensorflowJs detect multiple objects from an image with COCO-SSD – PART 2
By the end of the first part of this tutorial about how to use TensorflowJs to detect multiple objects from a given image we reached the point where we loaded the COCO-SSD model and drew the uploaded image on a canvas. Next, let's see how to use the ... moreSaturday, 8 April, 2023 UTC
Native CSS selector nesting is here
Yesterday Google Chrome announced the support for native CSS nesting: The native CSS selector nesting is very similar to what you would have before in CSS processors such as SASS or LESS: .header { .logo { background-color: orangered; } .nav-item { color: ... moreWednesday, 5 April, 2023 UTC
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 ... moreTuesday, 4 April, 2023 UTC
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 ... moreMonday, 3 April, 2023 UTC
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: ... moreSaturday, 1 April, 2023 UTC
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 ... moreFriday, 31 March, 2023 UTC
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 ... moreThursday, 30 March, 2023 UTC
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 ... moreWednesday, 29 March, 2023 UTC
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)) ... moreMonday, 27 March, 2023 UTC
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 ... moreSaturday, 25 March, 2023 UTC
[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 ... moreSaturday, 25 March, 2023 UTC
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 ... moreFriday, 24 March, 2023 UTC
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 ... moreThursday, 23 March, 2023 UTC
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 ... moreWednesday, 22 March, 2023 UTC
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 ... moreSaturday, 28 January, 2023 UTC
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([]); ... moreSaturday, 28 January, 2023 UTC
[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 ... moreThursday, 26 January, 2023 UTC