teleren/devto huggingface dataset:
Weekly web development resources #144
Tags: webdev, javascript, tooling, css
Published: 2023-04-12 05:20:01



______


##[Nano JSX](https://nanojsx.io/)
[![Nano JSX](https://wweb.dev/weekly/content/144/nanojsx.jpg)](https://nanojsx.io/)
A SSR first, lightweight 1kB JSX library written in TypeScript.

______


##[CodeReview BOT](https://github.com/anc95/ChatGPT-CodeReview)
[![CodeReview BOT](https://wweb.dev/weekly/content/144/codereview.jpg)](https://github.com/anc95/ChatGPT-CodeReview)
A code review bot powered by ChatGPT.

______


##[Fighting inter-component HTML bloat](https://elisehe.in/2023/03/27/minimal-html-in-design-systems)
[![Fighting inter-component HTML bloat](https://wweb.dev/weekly/content/144/html-bloat.jpg)](https://elisehe.in/2023/03/27/minimal-html-in-design-systems)
A nice article on how to prevent bloated HTML in the space between components.

______


##[Tabby](https://github.com/TabbyML/tabby)
[![Tabby](https://wweb.dev/weekly/content/144/tabby.jpg)](https://github.com/TabbyML/tabby)
Self-hosted AI coding assistant. An opensource / on-prem alternative to GitHub Copilot.

______


##[Dynamic GitHub Profile](https://www.bengreenberg.dev/posts/2023-04-09-github-profile-dynamic-content/)
[![Dynamic GitHub Profile](https://wweb.dev/weekly/content/144/dynamic-github.jpg)](https://www.bengreenberg.dev/posts/2023-04-09-github-profile-dynamic-content/)
An article on how to use GitHub Actions to make your GitHub profile dynamic.

______


##[Plotteus](https://www.plotteus.dev/)
[![Plotteus](https://wweb.dev/weekly/content/144/plotteus.jpg)](https://www.plotteus.dev/)
An open-source JavaScript data visualization library designed to help you tell better stories.

______


##[CSS Masking](https://ishadeed.com/article/css-masking/)
[![CSS Masking](https://wweb.dev/weekly/content/144/css-masking.jpg)](https://ishadeed.com/article/css-masking/)
An article that explains what CSS masking is, how it works, and a few use cases and examples for it.

______


##[Supabase Logs](https://supabase.com/blog/supabase-logs-self-hosted)
[![Supabase Logs](https://wweb.dev/weekly/content/144/logs.jpg)](https://supabase.com/blog/supabase-logs-self-hosted)
A blog post about the new open source logging server by Supabase.

______


##[A small JavaScript pattern](https://kilianvalkhof.com/2023/javascript/a-small-javascript-pattern-i-enjoy-using/)
[![A small JavaScript pattern](https://wweb.dev/weekly/content/144/js-pattern.jpg)](https://kilianvalkhof.com/2023/javascript/a-small-javascript-pattern-i-enjoy-using/)
A short article were Kilian Valkhof shares a JavaScript pattern that he enjoy using.

______


##[Tech Icons](https://techicons.dev/)
[![Tech Icons](https://wweb.dev/weekly/content/144/techicons.jpg)](https://techicons.dev/)
A list to easily download and copy-paste tech icons in SVG and PNG format for your projects. 

______

_Enjoyed this newsletter? You can support me by:_

💸 booking a [sponsored post](https://wweb.dev/sponsorship)

🥷 donating via [Sponsor Ninja](https://app.sponsor.ninja/projects/63d7dd38d907a8ed61dca67f)

🚀 helping me grow by sharing it with your friends and colleagues


Cheers,
Vincent from [wweb.dev](https://wweb.dev)
Launch of The Most Requested Youtube Channel Related To Web Development
Tags: javascript, react, node, mongodb
Published: 2023-04-12 05:19:14

Recently, I launched a [Youtube channel](https://www.youtube.com/@codingmastery_dev) that mainly focuses on JavaScript, React, and Node.js with MERN stack.

It was the most requested thing as you can see from some of the below screenshots.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681275242658/b2649476-e30e-4b14-9ed9-5dac670f2e13.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681275392368/b904b0b5-7f89-4601-891b-8e6f40c2eeb0.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681275409182/8d2acb91-bb56-4ebc-a110-23ed5a2f59a5.png)

Until now, I have uploaded video content as a part for three playlists, [Webpack for Production](https://www.youtube.com/watch?v=ILcb7BD9R90&list=PLSJnlFr3D-mEBWnL0XGa_hpGyiXoI_BIN), [Redux Toolkit Crash Course](https://www.youtube.com/watch?v=ha2Fh4Vi7xo&list=PLSJnlFr3D-mEmCOE1mjlnsr1A8t5Zrmub) and [Express JS Crash Course](https://www.youtube.com/watch?v=GDe8DFZcgoI&list=PLSJnlFr3D-mEn4JLpA4F7UCAX_e5Nmx3q).

In these playlists, I have explained everything from scratch and these are beginner-friendly videos.

I'm regularly uploading content that is actually useful for developers rather than uploading any type of content.

You can check out some of the reviews for the created content below:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681276581241/5b6718c4-1376-4d03-ad47-abcc6ce4f425.png)

So If you're interested in learning JavaScript, React, Node.js and MERN(MongoDB, Express, React and Node.js) Stack to improve your knowledge, then do subscribe to [my youtube channel](https://www.youtube.com/@codingmastery_dev/) and enable notifications so you will never miss any content.

**Want to stay up to date with regular content regarding JavaScript, React, Node.js?** [**Follow me on LinkedIn**](https://www.linkedin.com/in/yogesh-chavan97/)**.**
Enhance User Experience with Mobile App Design Services
Tags: mobileappdesignservices, mobileappuidesign, figmamobileappdesign, webdev
Published: 2023-04-12 05:09:31

Mobile app design services provide benefits to businesses and individuals who want to create user-friendly, aesthetically pleasing, and functional mobile applications.

###Here are some of the benefits of using mobile app design services:

- **Customized Design:**

Mobile app design services provide customized designs that are tailored to meet the specific needs of your business. This ensures that the app is unique and that it stands out from the competition.

- **User-Centered Design:**

Mobile app design services put the user at the center of the design process. It means that the app is designed keeping in mind the needs and preferences of the user, resulting in a more user-friendly app that is easier to navigate and use.

- **Professional Look and Feel:**
 
Mobile app design services use professional designers who have the knowledge and expertise to create eye-catching designs that look polished and professional.

- **Consistent Branding:** 

[Mobile app design services](https://webkul.design/mobile-app-design-services/) ensure that the app's design is in line with the overall look and feel of your brand. It enhances brand identity and creates a cohesive image across all platforms.

- **Increased User Engagement:** 

A well-designed app can increase user engagement, which can lead to more downloads, more frequent usage, and increased customer loyalty.

- **Improved Functionality:** 

It can optimize the functionality of the app, making it more efficient and effective in achieving its intended purpose.

- **Competitive Advantage:** 

By investing in mobile app design services, businesses can gain a competitive advantage over competitors who do not have a mobile app or have an inferior app.

- **Reduced Development Time:** 

Mobile app design services can streamline the app development process, resulting in a faster time to market.

### Conclusion:
There are many benefits to using mobile app design services, from creating a customized design that meets the specific needs of your business to increasing user engagement and enhancing your competitive advantage. By investing in mobile app design services, businesses can create a professional, functional, and visually appealing app that users will love.
Javascript scope and closure
Tags: javascript
Published: 2023-04-12 05:06:27

To understand closure, let's take a look at the term **Lexical scope**.

Lexical scope of a function comprises of **inner scope** of function and **ability to access its nearest surrounding environment**
- The access ability is a hidden feature that cannot be access normally as object in JS (some says it's optimization engine from V8)
```javascript
function outerFunc() {
	let counter = 0;
	return function inc() {
		counter++;
	}
}

// - the inc()'s lexical scope is its inner scope 
// (within the {...}) and the ability to 
// bound out and search for the counter;
```
- Once the `inc()` is returned to an instance, it encapsulates the `counter` value and bring it along - to a permanant memory, which means any of it instance from the same invocation can access to `counter`
```javascript
const newFunction = outerFunc();

newFunction(); // counter = 1
newFunction(); // counter = 2
```

- Different invocations can not share the same reference to `counter`
```javascript
const newFunction = outerFunc();

newFunction(); // counter = 1
newFunction(); // counter = 2

const anotherFunc = outerFunc();

anotherFunc(); // counter = 1, not 3
anotherFunc(); // counter = 2
```
`anotherFunc` creates new Execution context, and the `counter` is set to `0` in that new EC.

<br/>


> When a function is invoked, it firstly search for its inner local memory (inner scope), then if not found it will populate to its encapsulated memory, then if not found, it gradually bounce back to the broader nearest scope.


![Function lexical ability](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e0exi3citbeqd995kk1z.png)
_Source: [Closure - Javascript.info](https://javascript.info/closure)_


### In short:
- Lexical scope: the inner scope and **ability to access surrounding scopes (this is called Closure)** ;




### References
- [Variable scope, closure](https://javascript.info/closure)
- JS the hard parts - Frontend master course
Javascript Object #7
Tags: javascript, webdev, beginners, programming
Published: 2023-04-12 04:30:45

Welcome All,in the last post we've seen what is Prototype in Object.In Javascript every Object contains a Prototype property and it itself is an another Object and it contains many useful methods.
Now we are going to see about the Prototypal Linkage in Object,as from the last post we have seen that Javascript doesn't conatains classical inheritance instead it has **Prototypal Inheritance** in the Post we are Going to see about the How this Proto Inheritance is  happening.

## PROTOTYPAL INHERITANCE 
Most of the People Don't know that Javascript has an inbuild Function called **Object()** most of the Novice developers think that it is Just an Object,but it is not an Object.while you console log this,

```
`typeof(Object)

output
'function'

`
```
Pretty Confusing right, yeah may be at the beginning it will, as you been new to Javascript Prototype.

Javascipt also has an _anonymous object_ and that can be referenced via **Object.prototype**.as you can see,

```
`console.log(Object.prototype);`
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h69hjswctkfayoozeyfk.png)

the Object.prototype has some usefull properties like _toString_,_ valueOf_ and it also has some important property called _constructor_ and it reference to and  _Object()_ function.this is how Javascript Object linking together for example,

```
`console.log(Object.prototype.constructor === Object); // true`
```

as you can see both are same,

Let's visaulize this in more better way,assume circle as a Object() function and Square as an Object.let illustrate the relationship between them,

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7fete3gg6dpek3wpnlma.png)

thus,this how they linked together.

Let's first define a Constructor Function,

```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6wjhwm9g3sf3ugj0ib05.png)
`function Person(name) {
    this.name = name;
}`
```
In this Fuction,it accepts an argument called name and assign it to the name Property of **this** Object.

But do you know what's happening behind the scenes,the Javascirpt engine will create an Function Person and an anonymous Object.Like the Object() Function.Person function has a Prototype Property and it reference the anonymous Object and the Object has a constructor Property that holds the Person() function.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bco2hkqalmt1jgesrzg6.png)

In addition,Javascript links the Person.prototype and Object.Prototype Object via the **[Prototype]**,which is know as the **Prototypal Linkage**.This is called The Prototypal linkage in the Javascript


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oyp63r2fxrsafuwkd2b4.png) 

So for,we have seen how Prototypal Linkage is Happening in Javascirpt Object.In future Post we'll see how to methods are linking using the real time examples.

Please Support me by giving a reaction to this post,
If you've learned something.

Many Thanks for You Patience and Time,
Sam
Components that Support DBMind-Prometheus Exporter-Overview
Tags: opengauss
Published: 2023-04-12 04:19:06

**Overview**
Prometheus is a popular open-source monitoring system in the industry. It is also a time series database. The collector of Prometheus is called exporter, which is used to collect metrics of monitored modules. To interconnect with the Prometheus platform, the AI tool provides two types of exporters: openGauss-exporter for collecting database metrics and reprocessing-exporter for reprocessing the collected metrics.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cj2zg4l5iqzgym124bfx.png)
DBMind Mode-set
Tags: opengauss
Published: 2023-04-12 03:59:13

This command is used to change the parameter values in the **dbmind.conf** configuration file. You can also manually modify the **dbmind.conf** configuration file. The two methods have no difference. For example, to change the value of **host** in the **TSDB** configuration item of the **dbmind.conf** file in the **confpath** directory to **127.0.0.1**, run the following command:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tr99st2urvgvizd02ydc.png)

You can choose either of the methods to modify common parameters. The DBMind configuration file does not store plaintext passwords. If a user uses a plaintext password, the DBMind displays a message and exits. Therefore, the user can change the password in either of the following ways: 1. Modify the **dbmind.conf** file first and run the following command to reinitialize the configuration file:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w23ze6c7z4p1ll7ztwh3.png)

2. Run the set subcommand to set the parameters. For example:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/buws4qxd6810ap3s3eus.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/92ycc0ybbbhi8nwvw8nq.png)

**Command Reference**
You can use the **–help** option to obtain the help information about this mode. For example:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/239gcv8qi440tgcf8kiw.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jy33obuvwo1uqw7vdgz5.png)

Table 1 Parameters of the set subcommand: python dbmind/ set xxx

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/umj3qdwogmli2zy5ci99.png)
Lazy Initialization in React
Tags: react
Published: 2023-04-12 03:45:47

I read about lazy init lately when enrolled in FrontendMaster course from Brian Holt. It is said that lazy init is used when you want to perform some **heavy calculation actions rather than primitive values** in the `useState` hook. For example calculating some complex formula, creating some DOM elements,...
```javascript
const [currentDOM, setCurrentDOM] 
  = useState(React.createElement('div'))
```

Keep in mind that `useState`'s value is init-ed only once when the component is loaded up, after that it will behave naturally with its inner state. So, with the heavy actions or results of complex calculation, we would like to calculate - or init them once until further next changes to save some performance by not re-calculating these costly actions. This can be improve by using **Lazy Initialization**: passing the return value in a callback function
```javascript
const [currentDOM, setCurrentDOM] 
  = useState(() => React.createElement('div'))
```
Setting up Next.js 13 with TypeScript-ESLint
Tags: typescript, nextjs
Published: 2023-04-12 03:10:20

## Step 1: Create a new Next.js project with TypeScript

To create a new Next.js project with TypeScript, run the following command:

```
npx create-next-app@latest --ts my-app
```

Note that `my-app` is the name of the project folder, and you can replace it with any name you prefer.

During the creation process, you will be asked several questions. Here are the recommended answers:

```
Would you like to use ESLint with this project? -> Yes
Which ESLint configuration would you like to use? -> Next.js (uses eslint-config-next)
Would you like to use Tailwind CSS? -> No
Would you like to use the src directory? -> No
Would you like to use the experimental app directory? -> Yes
What would you like to name the import alias? -> @/*
```

This command will create a new Next.js project with TypeScript and the recommended configuration.

## Step 2: Install TypeScript-ESLint as a dev dependency

TypeScript-ESLint is a tool that integrates ESLint with TypeScript. To install it as a dev dependency, run the following command:

```
npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin
```

This will install two packages: `@typescript-eslint/parser`, which allows ESLint to understand TypeScript syntax, and `@typescript-eslint/eslint-plugin`, which provides additional TypeScript-specific ESLint rules.

## Step 3: Configure ESLint for TypeScript

ESLint uses a configuration file `(.eslintrc.json)` to define the rules and plugins that should be used. Open this file and add the following configuration:

```
{
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "root": true
}
```

## Step 4: Test the integration

To test the integration, open `pages/index.tsx` and add the following code:

```
type Test = {};
```

This code defines a new type called Test. If you save the file, you should see an error message in your editor, indicating that the code is not valid:

```
Don't use `{}` as a type. `{}` actually means "any non-nullish value".
- If you want a type meaning "any object", you probably want `object` instead.
- If you want a type meaning "any value", you probably want `unknown` instead.
- If you want a type meaning "empty object", you probably want `Record<string, never>` instead.
```

This error message confirms that TypeScript-ESLint is working correctly and is providing helpful feedback on your code.

Congratulations! You have successfully integrated TypeScript-ESLint in Next.js. From now on, ESLint will check your TypeScript code and provide suggestions to improve its quality
Currying in Javascript
Tags: javascript
Published: 2023-04-12 03:44:23

Currying in Javascript It can be understood as function caching. Consider the snippet below:

```javascript
// utils.js

const submitForm = (formName: string) => (submittedFormData) => {
	const currentForm = getForm(formName);
	return submit = () => {
		validateForm(currentForm, submittedData)
		callSubmitFormAPI(submittedFormData)
	}
}
```

Firstly, we gonna get the form object from `formName`; Let's say if we have multiple formData waiting for submission (with diffrerent `submittedFormData`), we can use this function and not having to re-call the `getForm` function to get the same form:

```javascript
import { submitForm } from 'utils';

const registerForm1Data = { ...someFormData1 };
const registerForm2Data = { ...someFormData2 };

// return the function `submit` function
const formSubmission = submitForm('REGISTER_FORM'); 

if (user === isSomeFlag) {
    // can be seen as submitForm('REGISTER_FORM')(registerFormData1)
	formSubmission(registerFormData1) 
} else {
	formSubmission(registerFormData2)
}
```

### References:

[Understand Currying - blogrocket](https://blog.logrocket.com/understanding-javascript-currying);
[Javascript Currying - javascript.info](https://javascript.info/currying-partials)
My quick note on Redux
Tags: react
Published: 2023-04-12 03:43:09

Redux is a state management library that helps us to solve the problem of state usage from many places in app and passing props to a deep nesting component.

Redux ensures 3 pillars in its pattern: 1-way binding data & single source of truth & immutability;

Everything in Redux is communication with actions. Action is an object that describe what to do and return the new state from reducer

Actions Creator is a function returning a specific action object => prevents wrong typing when typing action objects again and again.

Reducer: A pure function takes in the current state object and a callback function which defines logic and returns new states; the idea of reducer comes from Array.reduce method.

Redux toolkit: compact action creators, reducer, and selectors into a slice - opinionated architecture.

We can create multiple stores in redux but it will violate the single source of truth.

thunk: a middleware that listens to dispatched events and sees if the arguments passed is a function or not. If it's a function then it will be executed (asynchronously)

```
> Redux with normal action:
UI dispatch ---> Actions ---> Reducer receive action and return new state;

> Redux with thunk (passing a function to dispatch instead of object):
UI dispatch ---> thunk ---> middleware executes thunk ---> dispatch action to reducer ---> reducer returns new state.

> Redux with thunk (passing a function to dispatch instead of object):
UI dispatch ---> thunk ---> middleware executes thunk ---> dispatch action to reducer ---> reducer returns new state.
```

### Ref:

* [What the heck is a thunk?](https://daveceddia.com/what-is-a-thunk/)
    
* ["why do we use middleware for async?"](https://redux.js.org/faq/actions#how-can-i-represent-side-effects-such-as-ajax-calls-why-do-we-need-things-like-action-creators-thunks-and-middleware-to-do-async-behavior)
    
* [Redux with async logic](https://redux.js.org/tutorials/essentials/part-5-async-logic#thunks-and-async-logic)
    
* [React-redux immutability & side effects](https://daveceddia.com/react-redux-immutability-guide/#what-is-immutability)