var please = require('share');
console.log('thank you');

NEW !!!

Saturday, 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([]); ... more

Saturday, 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 ... more

Thursday, 26 January, 2023 UTC

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

Thursday, 26 January, 2023 UTC

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

Tuesday, 24 January, 2023 UTC

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

Tuesday, 24 January, 2023 UTC

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

Saturday, 21 January, 2023 UTC

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

Friday, 20 January, 2023 UTC

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

Thursday, 19 January, 2023 UTC

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

Wednesday, 18 January, 2023 UTC

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

Tuesday, 17 January, 2023 UTC

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

Monday, 16 January, 2023 UTC

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

Saturday, 14 January, 2023 UTC

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

Friday, 13 January, 2023 UTC

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

Thursday, 12 January, 2023 UTC

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

Wednesday, 11 January, 2023 UTC

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

Tuesday, 10 January, 2023 UTC

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

Monday, 9 January, 2023 UTC

Error “localStorage is not defined” in NextJs – how to fix it

Let's say we want to build a popup component in NextJs that does something based on a value set in the localStorage. Something like this: export default function Popup() { const status = localStorage.getItem('status') // do stuff based on the status ... more

Saturday, 7 January, 2023 UTC

Javascript includes() multiple values

The Javascript array includes() function will return true if a value is found in an array or false otherwise. But is it possible to add multiple conditions to this function? Something like this: myArray.includes("one", "two", "three") ... more

Friday, 28 October, 2022 UTC

Deploying your first NextJs app to GitHub pages

GitHub pages can be a simple and easy-to-use hosting solution for your NextJs learning projects. Let's see how we can deploy a first Hello world app to GitHub Pages. First, we will need to create a blank new GitHub repo. I will name the repo nextjs-helloworld ... more

Wednesday, 26 October, 2022 UTC

Using the pages/api in NextJs to create endpoints

We have seen how one can use the /pages folder to make basic routes and query params routes in NextJs. But, there is also another special folder called /pages/api . Using it we can create endpoints for our NextJs app. Each file from this folder will ... more

Friday, 21 October, 2022 UTC

Detecting the active Link in NextJs

One common thing we need to do is to highlight the active Link in the navigation of a NextJs app. For this example, we will begin from this basic code repository. The initial app looks like this: We have 2 basic pages /pages/index.js and pages/about.js ... more

Wednesday, 19 October, 2022 UTC

[Js-Craft #31] A new course about NextJs, optimizing custom fonts loading performance, and more

I've started a few weeks ago to read about and learn NextJs. And the more I dig into it the more I like it. I think it's a great tool for building SEO-friendly React apps, and overall it's super elegant to use. Was considering making a course about NextJs. ... more

Tuesday, 18 October, 2022 UTC

Setting the page title and metadata in NextJs

Let's take the following code: import { useRouter } from 'next/router' function BlogPostPage() { const router = useRouter() let {title} = router.query const formatedTitle = title?.replace(/-/g, ' ') return (<h1>{formatedTitle}</h1>) } export ... more

Friday, 14 October, 2022 UTC

Using the font-display CSS property to optimize custom fonts loading

The custom fonts are great! They give us have unlimited typography options, but they also make our pages slower because we need to download them. They even cause something called FOUT - flash of unstyled text. This means that while the browser downloads ... more

Wednesday, 12 October, 2022 UTC

Absolute paths imports in NextJs

Do you find yourself writing Nextjs components imports paths like the one below? import SiteNav from '../../components/common' export default ()=> { <SiteNav /> } If the answer is yes, then you can benefit from the absolute paths imports feature. ... more

Monday, 10 October, 2022 UTC

Components vs pages in NextJs

We usually have a ton of info on a real page. We need different components to present and organize this information. For example, let's say we have a contact.js page with the following content. export default () => { return(<div> <h1>Contact ... more

Friday, 7 October, 2022 UTC

[Js-Craft #30] Rebooting the newsletter, NextJs articles and more

It has been quite some while since when I've last sent a JsCraft newsletter. It has been a mix of too much work at my day job, a bit of burnout and general fatigue from working from home, and too much screen time. But, overall I've realized that I miss ... more

Thursday, 6 October, 2022 UTC

Using the _app.js file in Nextjs to add common template parts

Whenever you have a component that needs to be present on all your pages the _app.js file may be of help. Let's say we have the following project structure: /components header.js footer.js /pages about.js contact.js index.js We need the header and footer ... more

Friday, 3 December, 2021 UTC

Selecting the full text with just one click in CSS

In CSS we can use the user-select property to decide how the user can select the text. By default, a user has to drag and hold the cursor to select the wateded text. But thanks to the user-select prop we can select a full text with just one click: .select-all-text ... more