teleren/devto huggingface dataset:
5 Key Tips to Boost Your ReactJS Performance 🚀
Tags: react, performance, webdev
Published: 2023-04-30 11:47:35

I'd like to share some valuable tips on how to boost the performance of your ReactJS applications. Implementing these best practices can make a significant difference in your app's responsiveness and user experience. Let's dive in! 🌊

**1. PureComponent and React.memo 🧩** Utilize PureComponent for class components and React.memo for functional components to prevent unnecessary re-renders. These optimizations ensure that components only update when their props have changed.

```
import React, { PureComponent } from 'react';

class MyComponent extends PureComponent {
  // Your component logic
}

// OR

import React, { memo } from 'react';

const MyComponent = memo(function MyComponent(props) {
  // Your component logic
});
```

**2. Debounce and Throttle User Input 🎛️** Debounce or throttle user input events like scrolling, typing, or resizing to reduce the number of updates and improve performance.

```
import { debounce } from 'lodash';

const handleInputChange = debounce((value) => {
  // Your input change logic
}, 300);
```

**3. Lazy Loading and Code Splitting 📦** Leverage React.lazy and React.Suspense to split your code into smaller chunks and load components only when they're needed.

```
import React, { lazy, Suspense } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </div>
  );
}
```

**4. Use the Profiler API and Chrome DevTools 🔍** Identify performance bottlenecks using React DevTools and the Profiler API. This will help you pinpoint areas that need optimization.

```
import React, { Profiler } from 'react';

function onRenderCallback(
  id,
  phase,
  actualDuration,
  baseDuration,
  startTime,
  commitTime,
  interactions
) {
  // Log or analyze the profiling data
}

function App() {
  return (
    <Profiler id="MyComponent" onRender={onRenderCallback}>
      <MyComponent />
    </Profiler>
  );
}

```

**5. Optimize State and Props Management 📚** Use selectors with libraries like Reselect or Recoil to efficiently manage and derive state, minimizing unnecessary re-renders.

```
import { createSelector } from 'reselect';

const getItems = (state) => state.items;
const getFilter = (state) => state.filter;

const getFilteredItems = createSelector(
  [getItems, getFilter],
  (items, filter) => items.filter(item => item.includes(filter))
);

```
Implementing these tips can greatly enhance your ReactJS app's performance. Give them a try and let me know how they work for you! Happy coding! 🎉

#ReactJS #Performance #Optimization #WebDevelopment #BestPractices
Create headless forms using a schema
Tags: forms, react, frontend, ux
Published: 2023-04-30 11:19:40

Building forms in web-apps is hard.

At first, it might seem like just a matter of adding a few input fields, but in reality, it's just the beginning. 
Forms requirements can become more sophisticated with things like conditional branching, version control, save draft, and more. 
PMs and designers often have endless requests for inputs updates or improved localization.

It's a lot to manage!

[I've created an open-source form infra for web-apps](https://github.com/tutim-io/tutim) that gives you your own in-house form builder fully integrated with your component library and design system.

Here's an example:
```
import { TutimWizard, defaultFields } from "@tutim/fields";
import { FormProvider } from "@tutim/headless";
import { InputType, Field } from "@tutim/types";

// a simple form schema
const config = {
  fields: [
    { key: 'company_name', label: 'Company name', type: 'text' },
    { key: 'num_of_employees', label: 'Number of employees', type: 'select', tooltip: 'Choose your best estimation', options: [{value:'1_50', label:'1 - 50'}, {value:'51_250', label:'51 - 250'}, {value:'above_251', label:'251 +'}] },
    { key: 'stakeholders', label: 'Stakeholders', type: 'array', children: { fields: [{key: 'name', label: 'Full Name', type: 'text'},{key: 'age', label: 'Age', type: 'number',},],},},
  ],
};

// a custom component for a text field
const CustomText: Field = ({ inputProps, fieldConfig }) => {
  const { value = '', onChange } = inputProps;
  // isDisabled,isRequired, options, defaultValue, validations
  const { key, label } = fieldConfig;
  return (
    <div key={key}>
      <label style={{ color: 'green', marginRight: '10px' }}>{label}</label>
      <input value={value} onChange={onChange} style={{ color: 'purple' }} />
    </div>
  );
};

// map the custom components over the default components
const fieldComponents: FieldComponents = {
  ...defaultFields,
  [InputType.Text]: CustomText,
};

// use Tutim library to render the form
const App = () => {
  return (
    <FormProvider fieldComponents={fieldComponents}>
      <TutimWizard onSubmit={console.log} config={config} />
    </FormProvider>
  );
};

export default App;
```

I see adoption for (older) libraries like [rjsf](https://github.com/rjsf-team/react-jsonschema-form), but it's very limited in terms of the UI. 

Do you think there's a need for such a library?
extracting RGBA values of an Image
Tags: javascript, webdev, tutorial, node
Published: 2023-04-30 11:13:30

Here we will be using jimp which is a image processing library 
and fs module in Node to extract and write the values to a text file

requiring the modules needed to extract and for storing the values
`const fs = require("fs");
const { Buffer } = require("buffer");
const jimp = require("jimp");`

you can install jimp as follows 

```
npm install jimp
```
after you will need to read the image which you want to extract the rgba values

here my image is named with kick.jpeg "Kick Buttowski a good cartoon right lets continue"



```
jimp.read("kick.jpeg").then((image) => {
  myarray = [];
  for (let i = 0; i < image.bitmap.height; i++) {
    for (let j = 0; j < image.bitmap.width; j++) {
      myarray.push([jimp.intToRGBA(image.getPixelColour(i, j))]);
    }
  }
```

lets dive into the code 
jimp.read returns a promise after you can apply many methods 

here we will be iterating through each and every pixel and calculate rgba using intToRGBA the we will be pushing it to the array

 

```
fs.createWriteStream("rgbavalues.txt").write(JSON.stringify(myarray));

```
after we will be writing the values into file called rgbvalues.txt
here is the whole code for you here we will be using streams because the file content may be large

```
const fs = require("fs");
const { Buffer } = require("buffer");
const jimp = require("jimp");
jimp.read("kick.jpeg").then((image) => {
  myarray = [];
  for (let i = 0; i < image.bitmap.height; i++) {
    for (let j = 0; j < image.bitmap.width; j++) {
      myarray.push([jimp.intToRGBA(image.getPixelColour(i, j))]);
    }
  }

  fs.createWriteStream("rgbavalues.txt").write(JSON.stringify(myarray));
});
```
Thanks that all for today
Here is the pup for you

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dpsmka0668h7wdkhl94m.png)
Signals in Angular 16: Unlocking Faster Application Performance
Tags: angular, typescript, observable, tutorial
Published: 2023-04-30 10:56:38

In this post, we will dive deep into the world of Signals in Angular 16, exploring their purpose, how they work within the framework, and providing step-by-step instructions on implementing them effectively in your projects.

### What are Signals?

Signals were introduced in Angular 16 and enable developers to easily manage complex asynchronous operations and event-driven logic within their apps.

The primary purpose of Signals is to facilitate communication between different parts of an Angular application without relying on direct coupling between components or services. This promotes a more modular and maintainable codebase while also allowing for greater flexibility when it comes to handling complex scenarios.

### Using Signals
Signals can be created in components, directives & services and you can read them directly from the template.

**Creating a Signal**
```typescript
import { signal } from '@angular/core'

users = signal<{id: string, name: string}[]>([]);
```
The above syntax creates and initialises a signal using the signal constructor function.

Optionally, provide a generic type parameter to define the signal's data type. In many cases, the data type can be inferred and the generic type parameter is unnecessary.

**Reading a Signal**

```typescript
users();
```
One way to read a signal is by using its name enclosed in parentheses, which invokes the getter function for that signal. In Angular, it is typical to retrieve signals in the template.

```html
<p>{{ users().name; }}</p>
``` 

**Changing the value of a Signal**

To update the value of a signal, you can use the signal set method, which replaces the current value with a new one.

```typescript
this.contacts.set(newContactArray);
```

Apart from the set() method, there are two other ways to modify a signal: update() and mutate().

When using the update() method, the signal is updated based on its current value. To do this, you can pass an arrow function to the update() method. This function takes the current signal value as its argument, allowing you to modify it as required. For instance, the code below doubles the value of the price signal:

```typescript
price = signal<number>(10);
this.price.update(p => p * 2);
```

The mutate() method allows you to modify the content of a signal value rather than the signal value itself. This method is particularly useful for changing specific elements of an array or properties of an object.

To modify an array element or an object property, pass an arrow function to the mutate() method. The arrow function should modify the specific element or property as needed. For example, the code below adds a # symbol at the start of the users id:

```typescript
this.users.mutate(c => c.id = `#${c.id}`);
```
Query Processing Subsystems in Postgres
Tags: query, postgres, database, processing
Published: 2023-04-30 10:49:35

In postgres, backend processes perform some operations to carry out a query provided by the client. This includes :


Parser
Analyzer
Rewriter
Planner
Executor


**Parser**:
This portion prepares the query to be processed by other operations that are subsequent in fashion. It creates a parse tree that is possible to be read by other operations. 

**Analyzer**:
The semantic analysis of the query is performed by the analyzer and this generates a query tree from the parse tree. Attached below is the image of the query tree generated.

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


**Rewriter**:
The rewriter is the system that checks the rules stored and transforms the query tree according to the rules


**Planner**:
The planner receives the query tree from the rewriter and generates a plan tree. It is based on cost-based optimization. 
Cost is just a number with no units to check the complexity of a process. It is a metric to analyse subsequent processes. In Postgres, it comprises of:

_Startup Cost_ required to start a query. It is allocated before accessing the first tuple

_Run Cost_ It is the cost to process all the tuples

_Total Cost_ It is the sum of both startup cost and run cost.




Plan tree comprises of plan nodes that stores the information necessary for the subsequent operation to carry the actual implementation of the query.

**Executor**:

Executor takes up the plan nodes and carryout functions stored on each node. This is the step where the query is actually processed and functions are performed. It first carries out the sequential scan and then sorts the results


These are the brief descriptions about subsystems of postgres query. For a detailed explanation, you can visit this article: https://www.interdb.jp/pg/pgsql03.html
How I Created an Award-Winning Portfolio Site with Zero Experience
Tags: javascript, webdev, tutorial, beginners
Published: 2023-04-30 10:44:47

As someone with no prior experience in web development, the thought of creating a portfolio site from scratch was daunting. However, with the help of a single tutorial video, I was able to create an Awwward-winning portfolio site that showcased my work effectively.

The tutorial I stumbled upon on YouTube
{% embed https://www.youtube.com/watch?v=djEQfvuJ_RA %}

broke down the process of creating a portfolio site step-by-step, teaching me about the principles of good web design and how to use HTML, CSS, and JavaScript to create a site that would not only look professional but also be user-friendly.

As I followed along with the tutorial, I was amazed at how quickly I was able to create a visually stunning and intuitive site. It was exciting to see how even with zero experience, I was able to develop my skills and create something that I was proud to showcase to potential clients and employers.

After completing the site, I submitted it to Awwwards, a renowned web design competition, and was thrilled when my site received an Honorable Mention. This recognition was not just an achievement, but a testament to the power of tutorials and online resources.

The tutorial I used taught me not only how to code, but also how to approach web design strategically, making sure to create a site that would meet the needs of its users while still being visually appealing. It gave me the confidence to take on new web development projects and explore my creativity.

If you're someone with no experience in web development and want to create a portfolio site, I highly recommend seeking out tutorials like the one I used. They can be a great way to learn and develop your skills, especially when starting from scratch.

Creating an award-winning portfolio site has been a significant milestone for me, and I hope my experience encourages others to take a chance on learning something new. With the abundance of resources available online, anything is possible, and you may even surprise yourself with what you can accomplish.
How to create animated buttons for your website in 5 minutes
Tags: animatedbuttons, webdesign, designtutorial, creativewebdesign
Published: 2023-04-30 10:33:08

If you're a web designer, you know the importance of creating engaging buttons for your website. Animated buttons are a great way to add life to your design and increase user engagement. In this video, I'll show you how to create animated buttons for your website in just 5 minutes using HTML & CSS. Watch me design from scratch and follow along with 5 easy steps. Don't miss out on this opportunity to make your website stand out with unique and engaging animated buttons.

{% embed https://youtu.be/QUzk2owUclQ %}
#GitHubHack23: Coded Clique
Tags: githubhack23, githubactions
Published: 2023-04-30 10:22:49

## What I built

I built a GitHub action called "Coded Clique" that allows maintainers to _(kinda)_ hide their issue and comment content from casual visitors who happen to poke around in their repositories.

### Category Submission: 
This app is submitted under "Wacky Wildcards".

### App Link
As this is a GitHub action, it can be accessed directly from the GitHub Marketplace: https://github.com/marketplace/actions/coded-clique 

### Screenshots
![Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/905i7hrr3kj6ut5m0jh3.png)

Try it out by [commenting](https://github.com/tlylt/coded-clique/issues/4) 🤡

### Description
To reduce the visibility of their discussions from random strangers on GitHub, maintainers can use Coded Clique, a GitHub action. The action allows maintainers to hide issue and comment content with ease, making it harder for unintended individuals to access their discussions. Whenever a new issue or comment is created or edited, Coded Clique can be configured to run automatically.

Coded Clique works by using the <details> HTML element, which creates a disclosure widget that only shows information when toggled into an "open" state. The original content is only visible when the disclosure widget is open, and the action adds an encoded version of the content or a random question to create the appearance of a discussion.

### Link to Source Code
The source code for Coded Clique can be found on GitHub: https://github.com/tlylt/coded-clique

### Permissive License
MIT

## Background 
Coded Clique was developed as a fun project to address the issue of random individuals peeking at discussions in GitHub issues. By making it slightly harder for unintended individuals to access discussions while still allowing the maintainers & active developers to view the content easily, Coded Clique helps maintainers form a "committed community" in which they can communicate freely. 

In a more practical context, the action can be extended to transform content into a more digestible "TLDR" via OpenAI's API while still keeping the original content accessible.

## How I built it 
To build Coded Clique, I utilized GitHub Actions and the GitHub API to automatically read and edit issues and comments.

## Additional Resources/Info
Users can find more information and detailed instructions on how to use Coded Clique in the README file on the GitHub repository.
Projectizing the Work
Tags: devjournal, unity3d
Published: 2023-04-24 14:25:49

A common pitfall in solo development projects, particularly with indie games, is a lack of planning. It can be difficult to define "done" and prioritize tasks without defining clear milestones and the steps needed to meet them. I felt myself losing some momentum on this project because when I would sit down to work on it, I either wasn't sure what I should do, or it felt like what I wanted to do wasn't what I should be doing. Over the past week, I committed some time to projectizing the work, and the impact it has had on my motivation and focus has been immediate and powerful.

I am utilizing GitHub Projects to allow for easy linking between tasks, branches, and pull requests. My first step was to create three milestones--initial gameplay prototype, CI and testing setup, and a look-and-feel first pass. I have not applied due dates to these milestones, allowing me to work on the project as I am able to. However, just by categorizing the work based on high level objectives, I now have a better idea of task priority, I have the end-state in mind, and my velocity has improved.

![Project milestones](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jtf07yc1dyo8tv4k47ny.png)

For each milestone, I created issues to track the high-level steps necessary to achieve the milestone goal. In the case of the "Gameplay Prototype" milestone, these issues have direct correlation with the features I identified as necessary to begin gathering real world testing feedback from friends and family.

![Issues for protoype milestone](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o7zyemf5555h7uds3v79.png)

Most issues are then broken down into the sub-tasks necessary to close the issue. I have elected not to create individual issues for each of these sub-tasks, but that may be an option for more complex issues in the future.

![Issue sub-tasks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bqkqeozy94v7yj63qwl9.png)

Taking the time to plan and projectize the work has greatly improved my motivation and velocity. Just in the past three days I've completed roughly half of the work necessary to create my first playable prototype, where before I was swirling trying to decide what to work on next. I'm very excited to continue working towards delivering a complete game in a controlled and planned way!

If you are interested in seeing my progress, the project can be found [here](https://github.com/users/cboveda/projects/3).
AWS AZ vs Region Scoped Services
Tags: aws, cloudskills, architecture, devops
Published: 2023-04-30 10:19:23

A common perception in cloud development is that there isn't much to do when we work with AWS managed services. However depending on the AWS service you use, your resources are either deployed at the AZ, Region, or Global level. Each service is different, so you must understand how the scope of a service might affect your application architecture.

When you operate a Region-scoped service, you only need to select the Region you want to use. If you are not asked to specify an individual AZ to deploy the service in, this is an indicator that the service operates on a Region-scope level. For Region-scoped services, AWS automatically performs actions to increase data durability and availability. On the other hand, some services ask you to specify an AZ. With these services, you are often responsible for increasing the data durability and high availability of these resources.

A **well-known best practice** for cloud architecture is to use Region-scoped, managed services. These services come with availability and resiliency built in. When that is not possible, make sure your workload is replicated across multiple AZs. At a minimum, you should use two AZs. That way, if an AZ fails, your application will have infrastructure up and running in a second AZ to take over the traffic.

A **key concept** about whether you are using managed services or managing the infra yourself, is that AWS's customers maintain complete control of their data and are responsible for managing the security related to their content.
Top 5 Javascript ES6 Interview Questions and Answers
Tags: javascript, es6, react, typescript
Published: 2023-04-30 10:15:15

[JavaScript](https://www.weeklywoo.com/top-javascript-interview-questions-and-answers-mostly-asked/) is one of the most popular programming languages today, and its latest version, ES6 (also known as ECMAScript 2015), has introduced many new features that have greatly improved the language. As a result, many companies now require candidates to have a good understanding of ES6 in order to qualify for JavaScript developer positions. In this blog post, we will cover some of the most [common ES6 interview questions and answers](https://www.weeklywoo.com/javascript-es6-interview-questions-and-answers/) that you should know.

## What are some of the new features introduced in ES6?
ES6 introduced many new features, including:

1. Arrow functions
2. Template literals
3. Classes
4. Let and const
5. Destructuring
6. Default parameters
7. Rest and spread operators

## What is an arrow function, and how is it different from a regular function?
An arrow function is a shorthand way of writing a function in JavaScript. It is different from a regular function in that it does not have its own this value, which means it always refers to the this value of its surrounding context. It also has a shorter syntax and automatically returns the result of its expression.

## What are template literals, and how do you use them?
Template literals are a new way of writing strings in JavaScript. They allow you to include expressions within a string by enclosing them in ${}. For example:

```
const name = "John";
console.log(`Hello, ${name}!`);
```
This will output Hello, John! to the console.

## What are classes, and how do you use them?
Classes are a new way of defining objects in JavaScript. They provide a cleaner syntax for creating object blueprints and allow for easy inheritance. To define a class, you use the class keyword, followed by the name of the class, and the constructor method, which is called when an object is created. For example:

```
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

const john = new Person("John", 30);
john.sayHello(); // Outputs "Hello, my name is John and I'm 30 years old."

```

## What is the difference between let and const?
let and const are new ways of declaring variables in JavaScript. let declares a variable that can be reassigned, while const declares a variable that cannot be reassigned. For example:

```
let x = 1;
x = 2; // This is allowed

const y = 1;
y = 2; // This will result in an error

```