teleren/devto huggingface dataset:
PandaScope, an extension
Tags: javascript, opensource, performance
Published: 2023-03-15 13:27:57

Hi everyone, for my first post here, I would like to talk about the extension developed by Green IT Panda.

## Green IT What ?

First things first, what is Green IT Panda ? It's a French Software firm specialised in... Green IT ! Wow, what a twist :)
It's been created at the end of 2021, to help businesses switch to a more environmentally and socially friendly digital.

## PandaScope

For this project, we developed a Chrome extension, which allows you to check the number of HTTP Requests your tab emits, and to list your hall of shame, the five requests that are taking the longest time. You can find it here https://chrome.google.com/webstore/detail/pandascope/elhofgiimikkgnikimhlbcmofdndgeao?hl=fr

We thought this extension for the dev community, to help them see some metrics when they create their application, for a specific page, or for a complete functionality.

For the time being, it is all written in French but meh ! For the quantity of information displayed, it shouldn't be a problem, and we will move it to English soon enough.

It will continue to evolve, we will add some new metrics soon, like TTFB, TTI, or the time for your page to be completely loaded.

We would be really glad to discuss this with you, if you have any question, or if you would like to see some metrics added to this tool. So, don't hesitate to leave a comment, send me a message or anything !

So stay tuned and *may the fur be with you !*
Today I learned(3/15/23)
Tags: ai, writing, beginners, devjournal
Published: 2023-03-15 16:38:09

Recently the tech industry has been experiencing huge of lays off, Microsoft is no stranger to this. What's most interesting to me though, is the timing for a certain decision. To paraphrase an article I read;

"According to Platformer, Microsoft's recent layoffs included its entire ethics and society team within the artificial intelligence organization. The tech gient is now left without a team that ensure AI product design aligns with the value of responsible AI."

Microsoft is going all in on it's own AI like chat-bot, recently releasing Bing AI to it own web browser, Microsoft Edge. Microsoft recently sign a deal with GMC back in 2021 to bring ChatGPT like AI voice-asisstant to the car marker. Microsoft will also use this time to gather data to bring about it's own self-driving car. I would say this is a cause for concern with Microsoft laying off a part of their AI team, especially moving forward with everything they have in place. Only time will tell...
AtOnce - The best AI content generator & CRM
Tags: crm, writing, ai, saas
Published: 2023-03-15 16:11:40

AtOnce is the best AI writer, AI content generator, and CRM. Create blog posts, emails, Ads, images, and more in minutes and save up to 90% of your time with AtOnce's AI. 

Our powerful language model is trained on 1.7 billion SEO and marketing articles from the world's leading experts to help you write anything 10x faster.

[https://atonce.com](https://atonce.com)
Flatiron Phase-3
Tags: python
Published: 2023-03-15 15:55:28

This _instance_ of a blog has to do with the transition my cohort and myself are facing. 
-The challenges of moving from JS to Python. 

Object Orientation (OO) is something that is not unique to Python, it gives the programmer more functionality and the ability to cut down on repeated code. A simple way to explain OO is to think of the world as full of Instances like "Lights, Cups, Food" a LED light is an instance of something that belongs in "Lights" and has special attributes. LED light instances are LED light objects, meaning an Object that is a key: value pair in JS is now referring to a single entree of a more global term. This global term is referred to as a Class. To keep with the example a LED light is an object with the class "light".

Speculating on OO and that it can be applied to JS I find myself questioning the meaning of these objects in OO how to relate them to Objects of JS. With our LED light in our hand.. can this be thought of as a key of our LED light and a value that points to the class which it belongs to?
```
list = ["LED", "incandescent", "black_light"]
```
The instance LED has a class "str" is it wrong to think that this LED can be represented as LED: "str?
I probably have this complete wrong here and desperately need to rethink the concepts.

Anyway, with OO we are able to define the class "light" and its methods... this is extremely valuable when we have a vast list or dictionary of many instances of the same or even different classes. Something that is not unique to our LED light is that it can turn off and on... we want to be able to turn off/on all the lights that we are working with regardless if they are the LED in our hand. We can define the "light' class so that there is a turn off/on method for every instance we have of a "light". 
This is all fine and dandy but when we are dealing with many, many classes and we are in different files days after initially writing the class is there a way to list the methods defined for the class?  I was just found told the best practice is to search through the files manually to avoid inheritance issues.
User Profile React Component
Tags: codepen, react, javascript, profile
Published: 2023-03-15 15:38:13

---
title: User Profile React Component
Published: True
description: 
tags: codepen, react, javascript, profile
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-03-15 15:37 +0000
---
{% codepen https://codepen.io/irwingb1979/pen/RwYMvMG %}
Agile new way of working
Published: 2023-03-15 15:36:50

Agile methodology has become increasingly popular in recent years, with many organizations embracing it as a way to improve their software development processes. Agile methodology emphasizes collaboration, flexibility, and iterative development, and has been proven to offer several benefits over traditional development methods. In this blog post, we will discuss some of the benefits of working on agile methodology.

Increased Flexibility: Agile methodology offers a more flexible approach to software development, allowing teams to adapt to changes in requirements and business needs quickly. This flexibility means that teams can adjust their development processes and priorities to ensure they are delivering the most value to their customers.

Improved Communication: Communication is a crucial aspect of software development, and agile methodology places a strong emphasis on collaboration and communication between team members. This approach helps to ensure that everyone is working towards the same goals and has a shared understanding of project requirements.

Faster Time-to-Market: Agile methodology enables teams to deliver working software quickly and regularly, allowing them to get feedback from stakeholders and customers early in the development process. This approach helps to ensure that the software being developed meets the needs of the users and can be delivered to the market faster.

Better Quality: Agile methodology emphasizes continuous testing and integration, ensuring that issues are identified and resolved early in the development process. This approach helps to improve the quality of the software being developed, reducing the likelihood of defects and errors.

Increased Productivity: Agile methodology encourages team members to work collaboratively, ensuring that everyone is working towards the same goals and contributing to the success of the project. This approach helps to increase productivity and ensure that the project is completed on time and within budget.

Improved Customer Satisfaction: Agile methodology places a strong emphasis on delivering value to the customer, ensuring that the software being developed meets their needs and expectations. This approach helps to improve customer satisfaction, leading to increased loyalty and repeat business.

In conclusion, agile methodology offers several benefits over traditional development methods, including increased flexibility, improved communication, faster time-to-market, better quality, increased productivity, and improved customer satisfaction. By embracing agile methodology, organizations can improve their software development processes, deliver better software, and achieve greater success
Welcome Thread - v216
Tags: welcome
Published: 2023-03-15 15:34:25

---
title: Welcome Thread - v216
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

![A kid on a skateboard rolls across the screen and waves, with the word "Hi!" on the side of the image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1mnfjbbihffhzo83n40v.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
Mainframe Modernization
Published: 2023-03-15 15:28:46

Mainframes have been around since the mid-20th century and have served as the backbone of many large organizations' computing systems. However, as technology has evolved, there has been a shift towards more modern and agile systems. Many organizations are now looking towards mainframe modernization to keep up with the demands of modern business.

Mainframe modernization involves updating and optimizing legacy mainframe systems to improve efficiency, reduce costs, and increase agility. There are several reasons why organizations are turning towards mainframe modernization:

Cost Reduction: Mainframes can be expensive to maintain and operate. Modernization can help reduce costs by optimizing hardware and software, reducing maintenance costs, and improving efficiency.

Agility: Mainframes are known for their reliability and stability, but they can also be slow to adapt to new technologies and business requirements. Modernization can help improve agility by making it easier to integrate with newer systems, develop new applications, and respond to changing business needs.

Talent Shortage: As mainframe experts retire or move on, organizations are finding it challenging to find new talent to manage these systems. Modernization can help reduce the skills gap by making it easier to manage and maintain the mainframe environment.

Security: Mainframes are known for their robust security features, but they can still be vulnerable to cyber-attacks. Modernization can help improve security by implementing the latest security protocols and tools.

There are several approaches to mainframe modernization, depending on the organization's needs and budget. Some of the most common approaches include:

Re-hosting: Re-hosting involves moving mainframe applications and data to a newer platform, such as a cloud environment. This approach can help reduce costs and improve agility.

Re-factoring: Re-factoring involves updating mainframe applications to use newer programming languages or architectures. This approach can help improve efficiency and reduce costs.

Re-platforming: Re-platforming involves moving mainframe applications to a modernized mainframe platform. This approach can help improve performance and reduce costs.

Re-architecting: Re-architecting involves re-designing mainframe applications to use a microservices architecture. This approach can help improve agility and reduce costs.

Overall, mainframe modernization is essential for organizations that want to remain competitive in today's fast-paced business environment. By updating and optimizing legacy systems, organizations can improve efficiency, reduce costs, and increase agility. Whether it's re-hosting, re-factoring, re-platforming, or re-architecting, there are several approaches to modernization, and organizations must choose the approach that best fits their needs and budget.
Stats about developer Focus Time
Published: 2023-03-15 15:25:15

Do you know what most developers complain about?

Lack of Focus Time. This is time ringfenced for doing deep work.

At Adadot we analysed data in 35,000 developer datasets from GitLab, GitHub, Slack and Google Calendar. Here are some datapoints:

📌80% of developers have focus time at some point during the week.
📌20% of them deliberately set up focus time in their calendar
📌10% use specialised apps for it

Here is what surprised us:

😱Up to 60% of developers experience some sort of distraction during focus time daily
😲The more senior the developer, the more likely to set up focus time in their calendar. Also the more likely to get distracted
😵Slack messaging, not meetings, was the main culprit in those distractions

Does this tally up?
Removing clunky node_modules folder with Terminal
Tags: npm, tutorial
Published: 2023-03-15 15:15:08

**TLDR** - node_modules takes a good chunk of your disk space ( up to the tunes of 10s of GBs ) and given a set of commands I believe I'm able to turn the situation around. 

## Motivation for removing clunky node_modules 

So, a little bit of backstory...I tried contributing to FreeCodeCamp's codebase, but the current macOS version I'm in doesn't allow me to upgrade node to the version I'd wanted. Therefore, to make the backup process as swiftly as possible, I decided to take the tedious work of removing storage space. 

It took days of tedium to make sense why the disk space always seem to miscalculate system storage size. At one point it bloated to over 77 GB, and I scoured my computer drive for bulky folders. 


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


Even after deleting a bunch of junk folders out, the figure still hovers at around 50 something GBs.

## How I realized it's time to remove those clunky folders 

Among all of those burdensome clusters of data, I just found just how cluttered npm storage has become. Turns out there are node_modules all over my projects folder. All of this contributed a whopping 3.38 GBs. 

So I concentrated all archived projects into one folder called `web projs & stuff`, and then I did two things: 
 
- Remove package-lock.json, because those files are being contained inside node_modules 
- Then proceed with node_modules

`find ./Desktop/"web projs & stuff" -type d -name "node_modules"`

`find ./Desktop/"web projs & stuff" -type f -name "package-lock.json"` 

`!! -exec rm -rf '{}' +` 

After that it drops down to 1.52 GB.
Animation -5 : Bird Loader
Tags: animation, css, design, webdev
Published: 2023-03-15 15:05:00

Are you looking for animations to enhance your website? We've got you covered with our wide selection of creative and engaging #animations. Say goodbye to endless searching and hello to seamless integration on your website!

#### We're excited to introduce our latest YouTube series, which features diverse creative and inspiring website animations.

---

In our short videos, you'll find a variety of #animations that can be easily implemented on your website to enhance user experience.


---

### Bird Loader 

---

{% youtube PFKEdR9cjhU %}

 ---
### [Source code](https://codepen.io/bertdida/pen/BqEazv)


---
## For more information

1. Check my GitHub profile
[https://github.com/amitSharma7741](https://github.com/amitSharma7741)

2. Check out my Fiver profile if you need any freelancing work
[https://www.fiverr.com/amit_sharma77](https://www.fiverr.com/amit_sharma77)

3. Check out my Instagram
[https://www.instagram.com/fromgoodthings/](https://www.instagram.com/fromgoodthings/)

4. Linktree
[https://linktr.ee/jonSnow77](https://linktr.ee/jonSnow77)

5. Check my project

- EVSTART: Electric Vehicle is the Future
[https://evstart.netlify.app/](https://evstart.netlify.app/)
-  News Website in react
 [https://newsmon.netlify.app/](https://newsmon.netlify.app/)
-  Hindi jokes API
 [https://hindi-jokes-api.onrender.com/](https://hindi-jokes-api.onrender.com/)
- Sudoku Game And API
[https://sudoku-game-and-api.netlify.app/](https://sudoku-game-and-api.netlify.app/)

---
---
String manipulation with StringExtension in C#
Tags: csharp, beginners, productivity, codenewbie
Published: 2023-03-15 14:50:38

[StringExtension](https://github.com/Antyss77/StringExtension) is a string processing library for the C# programming language. It provides features to manipulate and transform strings in a simple and efficient way. The library is open-source and comes with unit tests and performance tests. It is designed to be easily integrated into your existing projects. Feel free to contribute to the project with ideas or development expertise. 


![Preview of the StringExtension project on Github](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l9dfbxmy2un94jra29z9.png)

If you don't have any ideas to contribute to the project you can follow me and give a star to the project that will make it known and move the project forward, thanks!
Drag and drop toolkit for React Material UI {custom made}, JSON based react forms Generator.
Tags: react, javascript, materialui, tutorial
Published: 2023-03-15 14:41:18

## Introduction

We are going to discuss about a interesting toolkit that is available for react drag and drop utility. 

> 🚨 Note: This project is just for demo purpose, cannot be used for production

Any kind of feedback is welcome, thanks and I hope you enjoy the article.🤗

👉 Packages used.
▶️ React JS (v.18)
▶️ React DND
▶️ Material UI

👉 Clone the Project.
   https://github.com/amith-moorkoth/bombie

👉 Open Visual Studio Code
  `npm install`

👉 For starting the project
  ` npm start`

👉 Once the project start running please go to the URL http://localhost:8080/generate-component to test the project

> Now from here the article is going to be the complete workflow of the react DND bundle, which we have just created now.

Assuming that the reader already have prerequisite knowledge about the react, material UI and react DND.

## 👉 Begins **(src\Controller\ComponentGenerator\index.js)**

This is the Controller component where the actual process begins, here we are setting up the context provider for the entire application.

![Image description="context provider explanation"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/adlkz6okyvg3tw0r8qqo.png)

## 👉 **Bombie Invokes our actual component for processing (src\Lib\ComponentGenerator\index.js)**

This component is responsible for drawing the entire screen, which consist of two frames 

- Drawer

- DND Provider


![Image description="drawing layout consist of drawer and dnd provider"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxs6qmkb82o23vqg7oen.png)



## 👉 **Drawer 
This is responsible for the showing the JSON data that got generated through the process of drag and drop



## 👉 **DND Provider
This component responsibility includes 

- Showing the Element/custom Element that are available for dragging and can be dragged to the drawer for designing a component (src\Lib\ComponentGenerator\DragBox\index.js)

![Image description="all draggable element"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xbexchu313x30i734bg5.png)


- Draggable Container (src\Lib\ComponentGenerator\Container\element-recursion.js)

![Image description="draggable container"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/59wzgop0ywt2q5f78gpi.png)

This is a recursive container which will recursively loop and attach the respective DOM, as per the current requirement.


> 🟠 **Why we require JSON based React Material Toolkit? (why the project got started?)**
 
- Our Industry from the beginning is very  thirsty about the drag and drop design with functionality includes over it. eg: WordPress, shopify etc...

- **We can store react component as JSON in **mongo db** and access anywhere by using a single library in react as well as in JavaScript**, this will reduce the big overhead for performance and page loading since we will get the most optimized data which will travel between server and client.

- Designers can have the control over the 70% development lifecycle.


...continue
Set or Update Edge Properties in Apache AGE
Tags: apacheage, graphdatabase, database
Published: 2023-03-15 14:32:00

In this blog, I will tell you how you can set or update properties of an edge.
Firstly, in edge we have edge `id`, name (formally we call it `label`), `end_id`, `start_id`. These attributes of an edge got set when an edge is created. These properties cannot be changed.
Secondly, we can also have `properties` attribute that stores data related to the edge. The data is stored in key value pair, in `properties` attribute.

**General Form:**
`SELECT * FROM cypher('graph_name', $$
MATCH (a:label_name)-[edge:edgeLabel_name]->(b:label_name)
SET edge.propertyName = any_Value
$$) as (edge agtype);`

**Explanation:**
We get the desired edge by `MATCH (a:label_name)-[edge:edgeLabel_name]->(b:label_name)`. We set the value in edge properties by using `SET edge.propertyName = any_Value`. If the `propertyName` already exists in the edge `properties`, it will get updated with the new value (`any_Value`). If the `propertyName` do not exists in the edge `properties`, it will create a new attribute `propertyName` in the `properties` of the edge with the value (`any_Value`).

For more details visit: https://age.apache.org/overview/

**AGE Github Link:** https://github.com/apache/age

**AGE Viewer Github Link:** https://github.com/apache/age-viewer
5 key takeaways from React Hooks
Published: 2023-03-15 14:28:51

If you follow the great tech youtuber [Dave Gray](https://www.youtube.com/@DaveGrayTeachesCode/videos) He has a series where he breaks down react hooks.

In this article, I will mention five key takeaways that will help you understand react hooks better.

**1** <u>Referential Equality</u>:
This means when react goes to reference that function in memory, it is the same one and not a new one.

**2** <u>useCallback</u>: 
This preserves a function, so that everytime the component re-renders, the function will not get re-created by react. i.e. We are giving the function *referential equality*

**3** <u>useMemo</u>:
This preserves the result of a function that is called, so that it does not have to be re-calculated everytime the component re-renders.

**4** <u>useRef</u>: 
Its' value stays the same even after a change in state causes the component to re-render.

**5** <u>useLayoutEffect</u>: 
It is kind of the same as useEffect, but its' side effect must finish running before it will paint to the DOM.

**Note**: *side effect is the code inside useLayoutEffect*

##Thank you, please follow me

<a href="https://www.buymeacoffee.com/ifeanyichima" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>

[![HTML](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://linkedin.com/ifeanyi-thankgod-chima)&nbsp;[![GitHub](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/masterifeanyi)
Well, I guess the willow project is still happening…
Tags: willowproject
Published: 2023-03-15 14:26:32

The willow project is an oil drilling project that will drill in alaska. It will generate 600 Million oil barrels. So, with approximate oil barrel conversion rates, i made a basic converter in JS. When I did so, i found it will generate almost 300 million tons of greenhouse gas! It is a shockingly high amount. I know this is a coding platform, but this is too big to ignore. So, I thought i’d bring it up. I made a small petition, so let’s see what happens. I want earth to be safe for the generation that comes next. [ So, sign it here so that we can make a change](https://change.org/end-the-willow-project)