teleren/devto huggingface dataset:
What is Reconciliation in ReactJS?
Tags: webdev, beginners, javascript, react
Published: 2023-03-09 08:09:44

By comparing the former and present states of a component's tree and identifying what has changed, the reconciliation process in React enables the framework to update the user interface quickly.

React needs to update the DOM to reflect changes in a component's state or props. To completely create the DOM from scratch each time there is an update would be ineffective. Instead, React employs a procedure called reconciliation to ascertain which parts of the DOM require updating.

React searches for changes between the old and new versions of a component's tree throughout the reconciliation process. So, rather than recreating the entire tree, it merely updates the DOM elements that have changed.

Let's say you have a component that displays a list of items, and the state of that list changes. When the state changes, React will perform a reconciliation to update the DOM with the new items.

Here's an example code snippet:

```
import React, { useState, useEffect } from "react";


function Reconciliation({ data }) {
  const [items, setItems] = useState([]);

  useEffect(() => {
    setItems(data);
  }, [data]);

  const handleDelete = (id) => {
    const filteredItems = items.filter((item) => item.id !== id);
    setItems(filteredItems);
  };

  return (
    <div>
      <h2>Reconciliation</h2>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            {item.name}{" "}
            <button onClick={() => handleDelete(item.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Reconciliation;
```
This is an example of reconciliation because the component updates its internal state to reflect changes in the data prop, and re-renders to reflect changes in the items state.
使用webpack5中的thread-loader和内置的Cache机制提高编译速度
Published: 2023-03-09 08:45:54

##开发模式状态下，影响编译速度的因素

####查看webpack打包后各个模块的大小
- npm install --save-dev webpack-bundle-analyzer
```javascript
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const webpack = require('webpack')
module.exports = {
    webpack: {
        plugins: [
            new BundleAnalyzerPlugin(),
            ],
    }
};
```


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

####当前webpack编译速度
npm install simple-progress-webpack-plugin --save -dev
```javascript
const webpack = require('webpack')
const SimpleProgressWebpackPlugin = require( 'simple-progress-webpack-plugin' )
module.exports = {
    webpack: {
        plugins: [
            new SimpleProgressWebpackPlugin()
              ]
};
```
###影响编译速度的因素
- node是单线程，项目中的每个module只能依次打包
- 对同一模块被多次引用重复打包

使用webpack5的Cache对项目进行缓存

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lum8ww0owzqjiufs3gwz.png)
使用webpack5的thread-loader进行多线程打包

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

```javascript
const path = require('path')
const CracoLessPlugin = require('craco-less')
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin')
const AntDesignTheme = require('./src/styles/antd/antd-theme.json')
const CracoEsbuildPlugin = require('craco-esbuild')
const { ProvidePlugin } = require('webpack')
const WebpackBarPlugin = require('webpackbar')
module.exports = {
  style: {
    css: {
      loaderOptions: {
        modules: {
          compileType: 'module',
          mode: 'local', 
          auto: true,
          exportGlobals: true,
          localIdentName: '[path][name]__[local]--[hash:base64:5]',
          localIdentContext: path.resolve(__dirname, 'src'),
          exportLocalsConvention: 'camelCase',
          exportOnlyLocals: false,
        },
      },
    },
    postcss: {
      plugins: [require('tailwindcss'), require('autoprefixer')],
    },
  },
  babel: {
    plugins: [
      [
        'transform-imports',
        {
          transform: 'lodash/${member}',
          preventFullImport: true,
        },
      ],
    ],
  },
  webpack: {
    plugins: [
      new AntdDayjsWebpackPlugin(),
      new ProvidePlugin({
        React: 'react',
      }),
      new WebpackBarPlugin(),
    ],
    cache: {
      type: 'filesystem',
      allowCollectingMemory: true
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve('src'),
        use: [
          {
            loader: 'thread-loader',
            options: {
                workers: 8
            }
        },
        {
            loader: 'babel-loader'
        }
          // your expensive loader (e.g babel-loader)
        ],
      },
    ],
  },
  },
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            // antd them custom
            modifyVars: AntDesignTheme,
            javascriptEnabled: true,
          },
        },
      },
    },
    {
      plugin: CracoEsbuildPlugin,
    },
  ],
}

```
How to Fix the Next.js TailwindCSS Sticky Footer
Tags: nextjs, tailwindcss, javascript, webdev
Published: 2023-03-09 08:11:45

**How to fix the Next.js TailwindCSS sticky footer that is not fixed?** A sticky footer is a web design feature where the footer stays at the bottom of the page, even if the content on the page is shorter than the screen height. The issue we are trying to solve is when using TailwindCSS with Next.js, the sticky footer doesn't work as expected.

To solve this issue, we need to create a custom document in the `_document.js` file located in the `src/pages` folder. This file allows us to modify the default HTML document rendered by Next.js.

```javascript
import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html lang="en" data-theme="winter">
      <Head />
      <body className="flex flex-col min-h-screen">
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}
```

Adding the `flex flex-col min-h-screen` classes. This will make the `body` element a flex container with a vertical layout and set its minimum height to the height of the viewport. This is necessary to make the sticky footer work properly.

After creating the custom document, we need to create a `Layout` component inside the `src/components` folder. The `Layout` component will be responsible for rendering our app's main content, including the navbar, the main content section, and the footer.

```javascript
export default function Layout({ children }) {
  return (
    <>
      <Navbar />
      <main className='flex-1'>{children}</main>
      <Footer />
    </>
  );
}
```

The `Layout` component will take in `children` as props and render them inside the `main` tag. We can also include the `Navbar` and `Footer` components inside the `Layout` component.

Finally, we need to create the `Footer` component that will render the footer content. We can use the `self-end` class to position the footer at the bottom of the page. We can also add any additional styling or content to the `Footer` component.

```jsx
function Footer() {
  return (
    <footer className="footer self-end dark:bg-white bg-zinc-900 px-4 py-2 border-t-2">
      {/* Your footer content here */}
    </footer>
  );
}
```

By following these steps, we can **fix the Next.js TailwindCSS sticky footer issue** and create a custom layout for our Next.js app.
Today's Daily Dose of Programming Humor
Tags: jokes, dailydeveloperjokes
Published: 2023-03-09 08:00:12

---
title: "Today's Daily Dose of Programming Humor"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258c4f0d26.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___Q:___ What is a computer virus?

___A:___ A terminal illness!
 -->
My Journey In The Open Source World - Contributing to other libraries #2
Tags: javascript, typescript, github, opensource
Published: 2023-03-09 08:00:00

[Follow me on Github!](https://github.com/Cadienvan)

As mentioned in my previous post about contributing to other libraries, here are some of my efforts to improve some JavaScript libraries!

---

[mcollina/async-cache-dedupe](https://github.com/mcollina/async-cache-dedupe/pull/42)
Using some TypeScript magic, I was able to provide a good type coverage to the async-cache-dedupe library, known to be used by prisma-redis-middleware, mercurius-cache and lyra-cache among others!

---
[lmammino/jwt-cracker](https://github.com/lmammino/jwt-cracker/pull/20)
I brought a single-process jwt-cracker in a multi-process world by spawning forks based on chunks, thou reducing the needed time to crack a jwt-token from 1.5h to 40m (on my machine).
What Motivates You to Pursue A Career in Coding?
Tags: discuss, beginners, codenewbie
Published: 2023-03-09 08:00:00

What motivates you to pursue a career in coding? Is it financial gain? Personal interest? Perhaps it's a passion for technology or the potential for career growth. Financial stability, versatility, and a collaborative work environment are all reasons that motivate people to pursue a career in coding.

What are your reasons for pursuing a career in coding? Share your thoughts and experiences in the comments below!
How to manage VSCode extensions?
Tags: vscode, productivity, news
Published: 2023-03-09 07:59:13

The new update from VSCode is Profiles system.

From the [doc](https://code.visualstudio.com/docs/editor/profiles), you can see that you can share your profiles by exporting it.

That means, we can quickly set up the VSCode for any dev from a gist or file.

So, every collaborator will share the same environment and you can work together with the same tools. Possibly, you can add more extensions on your behalf and keep working also.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ww2npagal0zfrzlrlq1.png)
9 movies every Data Scientist should watch.
Tags: movies, datascience
Published: 2023-03-09 07:51:01

Nowadays movies are related to sophisticated AI, Terminators, Robots, and a lot more, and the real-world are also full of modern technologies. When we watch such movies then we get an idea about what is coming for us in the future.

If you are enthusiastic about AI, Machine learning, and Data Science then I am suggesting these 9 movies for you.  

I am suggesting these 9 movies for you: 
Interstellar (2014)

- A Beautiful Mind(2001)
- The Imitation Game
- The Terminator (1984)
- Moneyball
- Minority Report
- Blade Runner
- Space Odyssey
- Her

Read complete [article...](https://neptuneworld.in/blog/9-movies-every-data-scientist-should-watch/)
(TDZ) Temporal Dead Zone in JavaScript – Simple Explained
Tags: javascript, programming, tdz
Published: 2023-03-09 07:18:44

##What is the temporal dead zone in JavaScript?

**Temporal Dead Zone(TDZ)** is the time when the variable exists but is still uninitialized and cannot be accessed [_so if we try to access it at this time, we will get an error_] It ends when the code declaration. it is behavior specific to let and const variables.

```
{
  // userName TDZ starts here (local scope block)
  // userName TDZ running...
  // userName TDZ running...

  console.log(userName);
 /* ReferenceError: can't access lexical declaration 'userName' before initialization, because userName TDZ running here.*/

  // userName TDZ running...
  // userName TDZ running...

  let userName = "muhibullah"; // userName TDZ ends

  // userName TDZ not exist here
  // userName TDZ not exist here
}
```
##How does "var" TDZ different from "let" and "const" variables?

**var** is function scoped and can be reassigned multiple times, **let** is block scoped and can be redeclared and reassigned, and **const** is block scoped and cannot be reassigned after initialization. TDZ is behavior specific to **let** and **const** variables that prevent their use before they have been properly initialized.

```
{
  // userName TDZ start and end here.

  console.log(userName); // log: "undefined" because userName TDZ not exist.

  var userName = "muhibullah"; // userName TDZ not exist
  
  console.log(userName); // log: "muhibullah" because userName TDZ not exist

  // userName TDZ not exist here
  // userName TDZ not exist here
}
```


**In summary,** TDZ (Temporal Dead Zone) is a behavior specific to let and const variables in JavaScript that prevents their use before they have been properly initialized. When a let or const variable is declared, it is in the TDZ until it is initialized, and trying to access it before initialization will result in a ReferenceError. This behavior is in place to prevent the use of variables before they have been properly defined.

>_**declaring and initialization**: declaration is the process of creating a new variable with a specific name, while initialization is the process of assigning an initial value to a variable. declaration and initialization can occur in the same statement._
Smart laziness
Tags: productivity, discuss
Published: 2023-03-09 07:16:23

Have you ever sped up your pass (or even start running) when you see that someone is passing through the door that you’ll pass? Even if the person is holding the door, you started before thinking “I don’t want to re-open the door”.

I’ve done it, many times. In most cases, this is not very smart.

I’d prefer spent energy now (maybe more energy) instead of re-open the door.

My fiancé after dinner, if she has to do dishes, prefers to lay on the couch for some minutes, then after a while get up and wash the dishes.

I think is very difficult to get up, so when is my turn I wash dishes and then I lay down.

Both behavior I think are lazy. I think mine is smart laziness. (I love you anyway, Marta)

Since I started working in companies, as a developer, I always had to track in some kind of software or excel files, how much I’ve worked on which project or client, or ticket. In Italy we call it consuntivazione, context-reverso translates it into final balance. I don’t trust always the internet, but I hope that now you understand what I’m talking about.

This operation for most of my colleagues is a nightmare. It is, but I prefer to do it every day, or even two or three times a day.

Most of them prefer to do it at the end of the month to enter all of the data they may be written on a TXT on the desktop, or reading through their commits. Maybe they are on holiday and have to do it from the beach (or mountains).

I think I don’t understand this kind of laziness. But most of the time I don’t even realize how not-smart-lazy I am, even when I’m running towards a closing door.

Is lazy to do effort now than later? I think is yes.

Is smart to do an effort now than later? Mostly yes.

I want to talk about laziness because last week my boss tell me that he wants me to do a two hours speech to my colleagues about test automation.

I’ve read many articles and books on tests. I’ve done some testing in my personal projects, but I’ve NEVER written tests in a company environment. That scares me the most, but I’ll be honest with my colleagues and I hope that the speech starts a conversation or even a debate.

Doing test automation is smart laziness, but instead, I’ve always thought that doing F5 multiple times on Visual Studio was more efficient.

Is not.

Is easy to write most of the documentation of a project during or after completing it? You know the answer, but your mind hopes that postpone the pain hoping that problems never come up. But you struggle with all the support and training your client demand on a not well-documented software.

And you end up that you have to spend more energy even if you never write documentation.

I’m not smart-lazy, but I hope that this article starts a conversation or even a debate.
I reduced loop from 100K to 1K
Tags: javascript, beginners, codenewbie, programming
Published: 2023-03-09 07:14:58

On working on a project i want to return array of names for the array of email ids i have.

```javascript
const users = [
   {name: 'John', email: 'john@example.com'},
   {name: 'Jane', email: 'jane@example.com'},
   {name: 'Bob', email: 'bob@example.com'}
];


function getNames(emailIds) {
   return emailIds.map((emailId)=>{
      const user = users.find((user)=>{
          return user.email === emailId
      });
      return user?.name || emailId
   })
}
```


As you see the above code, the time complexity is `O(n*m)`. In other words, assume the `emailIds` array is of size 100 and `users` array size is 1000 then the above code may run  `1000*100 = 100000`, so in order to reduce the iterations 

```javascript
function getNames(emailIds) {
   const emailMap= {};
   
   users.forEach((user)=>{
      emailMap[user.email]=user.name
   });

   return emailIds.map((emailId)=>{
      return emailMap[emailId] || emailId
   })
}
``` 

This function first initializes an empty object `emailMap`. It then iterates over the users array using the `forEach()` method and stores each email-to-name mapping in the `emailMap` object, where the email is the key and the name is the value.

Now the time complexity is `O(n+m)`. In other words, the above code may run `1000+100 = 1100`

This modified approach is faster than the original version because it reduces the number of iterations needed to find a matching user object for each email ID. Instead of searching the users array for each email ID, the function only needs to perform a single iteration over the users array to create the email-to-name mappings. Subsequent lookups are done using constant-time key lookups in the emailMap object.


----
Thank you for reading please leave a like and share your thoughts in the comment section.

<center>Happy Coding</center>
13 Youtube Playlists for Machine Learning Enthusiasts 🙂
Tags: machinelearning, youtube, datascience, webdev
Published: 2023-03-09 07:09:48

1. Stanford University CS25 - Transformers United
https://www.youtube.com/playlist?list=PLoROMvodv4rMiGQp3WXShtMGgzqpfVfbU

2. Making Friends with Machine Learning
https://www.youtube.com/playlist?list=PLRKtJ4IpxJpDxl0NTvNYQWKCYzHNuy2xG

3. Neural Networks: Zero to Hero
https://www.youtube.com/playlist?list=PLAqhIrjkxbuWI23v9cThsA9GvCAUhRvKZ

4. Massachusetts Institute of Technology Deep Learning for Art, Aesthetics, and Creativity
https://www.youtube.com/playlist?list=PLCpMvp7ftsnIbNwRnQJbDNRqO6qiN3EyH

5. Stanford University CS230: Deep Learning (2018)
https://www.youtube.com/playlist?list=PLoROMvodv4rOABXSygHTsbvUz4G_YQhOb

6. Applied Machine Learning (Cornell Tech CS 5787, Fall 2020)
https://www.youtube.com/playlist?list=PL2UML_KCiC0UlY7iCQDSiGDMovaupqc83

7. Practical Deep Learning for Coders 2022
https://www.youtube.com/playlist?list=PLfYUBJiXbdtSvpQjSnJJ_PmDQB_VyT5iU

8. Practical Deep Learning for Coders 2022 - Part 2
https://www.youtube.com/playlist?list=PLzrCXlf6ypbxS5OYOY3EN_0u2fDuIT6Gt

9. Machine Learning with graphs
https://www.youtube.com/playlist?list=PL05umP7R6ij1tHaOFY96m5uX3J21a6yNd

10. Probabilistic Machine Learning — Philipp Hennig 2021
https://www.youtube.com/playlist?list=PLwRJQ4m4UJjPiJP3691u-qWwPGVKzSlNP

11. Deep Unsupervised Learning -- University of California, Berkeley Spring 2020
https://www.youtube.com/playlist?list=PL9t0xVFP90GD8hox0KipBkJcLX_C3ja67

12. Foundation Models
https://www.youtube.com/playlist?list=PL9t0xVFP90GD8hox0KipBkJcLX_C3ja67

13. Stanford University CS25 - Transformers United
https://www.youtube.com/playlist?list=PLoROMvodv4rNiJRchCzutFw5ItR_Z27CM


{% youtube pA1q4jO7ICM %}
LIAPP has won an award in Cyber Security Awards 2023!
Published: 2023-03-09 06:57:20

Hello! This is the LIAPP team!

We are excited to share some great news with you. 
LIAPP has recently won awards in three different categories Mobile Application Security, Application Security, and Runtime Application Self-Protection, which are all related to app security. 
Winning these awards is a testament to LIAPP's commitment to ensuring top-notch app security.

We take pride in our app security and we believe that through LIAPP, your developed app too can be secure. 
So why not give LIAPP a try and see for yourself how we can help you with your app security needs?

LIAPP protects apps using its action-based detection system and is currently being used in various industries such as fintech, gaming, and enterprise in multiple countries.

We are confident in LIAPP's app protection system!

**_LIAPP, we provide the best service possible._**
👩‍💻💪 Women in Tech: #WeCode 🧡ly Collaboration 👩‍💼✨
Tags: womenintech
Published: 2023-03-09 06:52:10

I remember one particular instance where a group of women engineers were working together on a challenging project at a tech company I used to work for. They were passionate about their work and incredibly skilled, but they often faced biases and discrimination in the workplace simply because of their gender.

Despite these challenges, these women persisted and poured all their efforts into the project. They collaborated with each other, supporting and encouraging one another along the way. As I watched them work, I could see the determination and passion in their eyes.

When they finally completed the project, they presented it to their boss, who was known for being a tough critic. However, as he listened to their presentation, I could see his expression soften. He was impressed with the level of detail and creativity that went into the project, and he praised the women for their intelligence and hard work.

As he continued to speak, I could see the women's faces light up with pride and validation. They knew that their contributions were finally being recognized and appreciated. In that moment, I felt a deep sense of respect and admiration for these women, who had overcome so much to achieve their goals.

From that day on, I saw a change in the workplace. The women in tech felt more empowered and confident, and they continued to work together and support each other. I also noticed a shift in the attitudes of their male colleagues, who began to recognize and appreciate the unique perspectives and skills that women brought to the table.

This experience showed me the importance of validation and recognition in the workplace. When people feel valued and appreciated, they are more motivated to work hard and achieve their goals. And when we work together and support each other, we can overcome even the toughest challenges.

{% twitter 1633721235065688066 %}