teleren/devto huggingface dataset:
Confused about Virtual DOM (ReactJS)
Tags: javascript, react, beginners, programming
Published: 2023-05-13 04:59:00

First of all let me talk about **DOM** (Document Object Model)is abstraction of the **HTML** of web page. We can also say that,In web technology this is programming interface that allow javaScript code to interact with html and css of web page. It represents a whole web page as tree like structure and each element of web page are called nodes.

This is image of DOM structure in Web.

![DOM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sgr9t7qqvvntxbthsuag.gif)

Example
```
<!DOCTYPE html>
<html>
  <head>
    <title>DOM</title>
  </head>
  <body>
    <h1>Welcome to my web page!</h1>
    <p>This is some example text.</p>
    <div>
      <img src="example.jpg" alt="Image">
    </div>
  </body>
</html>
```

![tree structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mrhpjkp79s8y889uq88p.png)

JavaScript code can access and manipulate the DOM tree using the document object, which represents the Document node. For example, to change the text of the h1 element in the example above, you could use the following JavaScript code:
```
document.getElementByTagName('h1')[0].innerHTML = 'I changed content';
```

I think you get something :)

Some of disadvantages of DOM.

1. Performance: manipulating the DOM can be slow and resource-intensive

2. Security: the DOM can be used to access sensitive information on a web page
3. Browser compatibility: different browsers can have different implementations of the DOM API
4. Accessibility: poorly designed web pages that rely on the DOM can be inaccessible for people with disabilities
5. Maintenance: as web pages grow in complexity, managing and maintaining the DOM can become difficult.

I will continue for Reactjs later...
Install my development environment In Prestashop
Tags: pretashop, php, modules, prestacli
Published: 2023-05-13 03:44:50

---
title: Install my development environment In Prestashop
published: true
description: How to configure your development environment in PS for a module  

tags: #pretashop, #php, #modules, #prestacli

# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-03-26 20:49 +0000
---

Hello my friend, 

The environment is very important, first to create a environment for make a module in PS, new need install Docker and to know use it. 

### Configure your environment

#### 1 Open your terminal 

#### 2 Update the package Repository 

```console
sudo apt update 
```

#### 3 Install prerequisite Packages  

```console
sudo apt install apt-transport-https ca-certificates curl software-properties-common -y
```

#### 4 Add GPG key 

```console 
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
```

#### 5 Add Docker Repository 

```console
sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" 
```

#### 6 Specify Installation Source 

```console
sudo apt-cache policy docker-ce
```

#### 7 Install Docker 

```console
sudo apt install docker-ce -y
```

#### 8 Check Docker Status 

```console
sudo systemctl status docker 
```

#### 9  [Learn how to use docker](https://www.google.com/search?q=how+to+use+docker&oq=how+to+use+docker+&aqs=chrome.0.0i512l5j69i60l3.1996j0j7&sourceid=chrome&ie=UTF-8)

#### 10 Install PrestaCLI 

```console
composer global require rhonalchirinos/prestacli
```



That's it!
Plugin come!
Published: 2023-05-13 03:44:33

Finally, the plugin enabled for my account. Godbless on OpenAI...anyway, where the browser plugin is??
#chatgpt #openai #LLM #ai #artificialintelligence

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/akjasp7j69h24b7reo8l.png)
Mermaid: A Better Way to Version Diagrams
Tags: c4, architecture, beginners
Published: 2023-05-13 03:42:45

I recently joined a software team that used draw.io to create diagrams. The team was having trouble versioning their diagrams in git because draw.io diagrams are not text-based and cannot be easily committed to a repository. I suggested Mermaid as a better alternative to draw.io.

Mermaid is a tool that allows you to create diagrams and visualizations of your code. It is a popular tool among software developers because it can be used to represent a wide variety of code structures, including:

Class diagrams
Sequence diagrams
State diagrams
Flowcharts
Mind maps

Mermaid diagrams are easy to create and can be embedded in documentation, README files, and other text-based documents. They can also be exported to a variety of formats, including PNG, SVG, and PDF.

One of the benefits of using Mermaid is that it is text-based. This makes it easy to version Mermaid diagrams in git. Mermaid diagrams can be committed to a repository just like any other text file. This makes it easy to track changes to diagrams and to collaborate with others on diagramming projects.

I presented the team with the following benefits of using Mermaid:

Increased readability: Mermaid diagrams make it easier to understand complex code structures.
Improved communication: Mermaid diagrams can be used to communicate code to non-technical stakeholders.
Reduced errors: Mermaid diagrams can help you to identify and fix errors in your code.
Increased productivity: Mermaid diagrams can help you to save time by automating the process of creating documentation.
The team was convinced of the benefits of using Mermaid and decided to switch from draw.io to Mermaid. The team has been using Mermaid for several months now and has been very happy with the results. Mermaid has made it easy for the team to version their diagrams, collaborate on diagramming projects, and communicate code to non-technical stakeholders.

If you are looking for a better way to version diagrams, I recommend Mermaid. Mermaid is a powerful tool that can help you to improve the readability, communication, and productivity of your diagrams.

Here are some additional tips for beginners who are new to Mermaid:

The Mermaid syntax can be a bit daunting at first, but there are many resources available to help you learn it.
Once you have learned the basics, you can start creating your own Mermaid diagrams.
There are many examples of Mermaid diagrams available online, which can help you get started.
Mermaid is a powerful tool, but it is important to use it wisely. Make sure that your diagrams are clear and easy to understand.

I hope this helps!
How to import svg in next js and use it in src of Image tag from next/Image
Published: 2023-05-13 03:12:49

So due to 100 of different way to import Image in Nextjs it is sometimes really confusing  how to import svg in next js and use it in src of Image tag from next/Image. So here i am with just 4 steps 

- Paste the svg file in you asset folder as icon.svg.

- Then in the file where you wan to use the svg import svg like below:

           

```
import icon from "../asset/icon.svg"
```
          

- Then to use the icon in Image tag as source do like below

<Image src={icon} alt=”icon”/>


- U dont need to define width and height.




That's it if you like dont forget to comment and cheer me up
Becoming a master programmer series
Tags: programming, coding, tech
Published: 2023-05-13 03:05:35

---
title: Becoming a master programmer series
published: true
description: 
tags: programming, coding, tech
cover_image: https://images.unsplash.com/photo-1510915228340-29c85a43dcfe?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80
# Use a ratio of 100:42 for best results.
# published_at: 2023-05-13 02:56 +0000
---

I know you are a Programmer, fine!

But, Have you read the "Becoming a Master Programmer" Series by <a href="https://medium.com/@lawalaminu" target="_blank">Lawal Aminu-Saleh</a>?

If yes, read again, If not, I've compiled the links to all the series below:

1. Becoming a Master Programmer: Consistency is the key - https://medium.com/@lawalaminu/becoming-a-master-programmer-consistency-is-the-key-711efad9f6cc
2. Becoming a master programmer: Choose one - https://medium.com/@lawalaminu/becoming-a-master-programmer-choose-one-2c5991bd6bcf
3. Becoming a master programmer: Ask for help - https://medium.com/@lawalaminu/becoming-a-master-programmer-ask-for-help-ff61fa4de0c0

Read them and build your superpowers...

#weekend
Difference between onClick and onMouseDown with real world project example
Published: 2023-05-13 03:04:23

 What exactly is the difference between. 

1. onMouseDown: A MouseEvent handler function. Fires when the pointer is pressed down.

2.onClick: A MouseEvent handler function. Fires when the primary button was clicked on the pointing device.


Now lets just move to its  practical useCase.


So basically there was a input placeholder and i had to add the ❌ icon inside placeholder  which would clear the input if there was any value typed in the input placeholder and the ❌ icon should only be shown if the input is focused (onFocus) and icon should be hidden if focus is removed from input box (onFocusOut) .  I made this functionality by adding onFocus and onFocusOut to my input and  added onClick event to my cross icon to  clear the value . 

But the problem that was occuring was when i did onFocus and  typed something the ❌ icon was appearing but when i clicked on that ❌ icon  instead of triggering functionality of on Click  onFocusOut was triggered.  So i got to know about onMouseDown and i had to do e.preventDefault which solved my problem. 


Hope you understand the useCase and if u want to see the exact implementation in code i will show u just comment in this post.
 
Happy coding.


Note: In react/next onFocus and onBlur is used as replacement of onFocus and onFocusOut
2466. Leetcode Solution in Java
Tags: java
Published: 2023-05-13 02:53:18

```java
class Solution {
    static long [] dp;
    static int mod = (int)(1e9+7);
    static int countGoodStrings(int low, int high, int zero, int one) {
        dp = new long [(int)(1e6)];
        Arrays.fill(dp, -1);
        return (int)getResult(low, high, zero, one, 0);
    }
    static long getResult(int low, int high, int x, int y, int cur){
        if(cur > high) return 0;
        if(dp[cur] != -1) return dp[cur];
        long ans = (cur >= low && cur <= high? 1:0) + getResult(low, high, x, y, cur + x) + getResult(low, high, x, y, cur + y);
        return dp[cur] = ans % mod;
    }
}
```
#leetcode
#challenge
Here is the link for the problem:
https://leetcode.com/problems/count-ways-to-build-good-strings/
Family and Criminal Solicitors Bradford - Adam Prudens Law
Published: 2023-05-13 02:31:33

Welcome to Adam Prudens Law, where we provide high-quality legal services to the people of Bradford, UK. Our teams of experienced solicitors are dedicated to achieving the best outcome for our clients. In this blog post, we will be discussing the importance of having a family and criminal solicitor in Bradford. Our team understands that legal issues can be stressful, especially when they involve family or criminal matters. With our extensive knowledge and expertise in family law and criminal law, we will help you navigate through your legal issues with ease. We aim to provide our clients with the best legal representation possible while keeping them informed and updated throughout the process. Read on to learn more about the importance of having a reliable family and criminal solicitor in Bradford.

Adam Prudens Law is a reputable law firm offering legal representation and advice to residents of Bradford. The firm has a team of highly qualified solicitors who specialise in various areas of law, including family law. Adam Prudens Law’s [family law solicitors in Bradford](https://adamprudenslaw.co.uk/bradford/) are experts in handling cases related to family disputes, divorce, child custody, adoption, and other issues. They work tirelessly to ensure that their clients receive the best possible outcome for their cases. At Adam Prudens Law, clients can expect a high level of professionalism, confidentiality, and empathy. The firm understands that family disputes can be emotionally draining and strives to provide solutions that alleviate clients' worries and fears.

Adam Prudens Law is a reputable [Law Firm in Bradford](https://adamprudenslaw.co.uk/bradford/) that specialises in family and criminal law. With years of experience, the expert solicitors at Adam Prudens Law offer professional and reliable legal services to their clients. The law firm in Bradford is dedicated to providingpersonalised solutions to each case we take on. This means that clients can feel assured that a tailored approach is being used for their individual circumstances. At Adam Prudens Law, clients can expect consistent communication, expert advice, and representation in and out of court. Thus, for those who require legal assistance for family or criminal matters in Bradford, Adam Prudens Law is a go-to firm.

In conclusion, Adam Prudens Law is a reputable and reliable law firm in Bradford that has consistently provided top-notch legal services to their clients. With their team of experienced solicitors, they offer personalised and tailored solutions to each case, ensuring that their clients' individual circumstances are taken into account. From consistent communication to expert advice, clients can trust Adam Prudens Law to provide representation in and out of court for family or criminal legal matters. If you require legal assistance in Bradford, consider reaching out to Adam Prudens Law for the professional and dependable expertise you need.

For more information about Adam Prudens Law, visit the website https://adamprudenslaw.co.uk/
Pseudo coding
Tags: webdev, beginners, programming
Published: 2023-05-13 02:23:49

Pseudo coding is the process of writing out the steps or logic of a program in plain, human-readable language before actually writing the code in a specific programming language. It is like creating an outline or a rough draft of your code. Pseudocode helps programmers plan and organize their thoughts, break down complex problems into smaller steps, and ensure that the overall logic of the program is sound. It does not involve writing actual code syntax but focuses on the logical flow and structure of the program. Pseudo coding acts as a roadmap that programmers can follow when translating their ideas into actual code.
The 10 Day Ship : Day 1 - Intro #GitHubHack23
Published: 2023-05-13 02:16:18

 Seems I am late to the party. May23 is the submission date, and got to know about the hackathon just now. I have an idea. actually, a workplace issue,i want to solve.

So, the journey will be recorded here, this is a daily journal, i will write daily to share updates. Yeah, added that as a series.

Been in corporate grind first 8 years, and last 8 years in startup. Just a wander kid to build-in-public and indie hacker grind on 2023.

The idea for the hackathon is just my long-pending issue I want to solve or solved in other ways.  Duplicate updates about my progress. 

I code. 
I build.
I merge.
I deploy.

All the above are fun. What is not fun? updating jira, slack and other stuff just to make others look at my progress. I solved it in other ways in the past. Now want to build a github action, do that not-fun part for me.

Have some questions. asked in the help thread. Lets see where it goes.
Mapping Arrays with JavaScript
Tags: webdev, javascript, beginners, programming
Published: 2023-05-13 02:04:20

When learning the basics of JavaScript, one will come across arrays quite quickly. Arrays are useful and very malleable. They can be filtered through, reduced, expanded, and mapped. When mapping an array, one is accepting a callback function and passing each element so that it returns a new array that is the same length as the original with the data modified in the result but not permanently altering the original array.

When one comes across the map() method, it is often referred to as Array.prototype.map(), as in the case of freeCodeCamp [1].


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


The map() method is great for scanning through data for specific pieces of information in each array and creating a new array with it. I have an example below:

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

Using the above data related to some of the most prominent Japanese leaders of the Meiji Restoration, I can use the map() method to pull the names of these people and create a new array with them.

I hope this helps beginning students of front end or full stack web development in understanding an essential part of JavaScript. Map() is widely applicable for numerous types of data in arrays, from retrieving names to product prices.







________________________________________________________________
Sources:

1. [https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/functional-programming/use-the-map-method-to-extract-data-from-an-array]

2. [https://www.w3schools.com/jsref/jsref_map.asp] W3 Schools is another great resource for learning about arrays. They succinctly list the 3 major points when it comes to map():

"map() creates a new array from calling a function for every array element.

map() does not execute the function for empty elements.

map() does not change the original array."

3. [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map]

4. [https://www.youtube.com/watch?v=G6J2kl1aVao]
Building a Bridge to DevOps: My Journey to Becoming a Versatile Engineer
Tags: beginners, devops, career, ti
Published: 2023-05-13 02:01:58

Hi, I'm Luis!

As a software engineer primarily focused on Quality Assurance, I've discovered a deep interest in the intersection of software development and IT operations, and now one of my main goals is to learn as much as possible in my free time. 

Over the years, I've gained expertise in several programming languages like Python, C#, Java, and JavaScript. I've also worked with various QA testing tools such as Cypress, Selenium, Appium, JMeter, and K6. In addition to testing, I've had the chance to work with Linux and cloud platforms like AWS. These experiences have sparked my interest in DevOps, and I'm now actively pursuing opportunities to learn more about this exciting field.

To achieve my goal, I'm following a learning roadmap that covers everything from foundational concepts to advanced techniques like containerization, continuous integration, and deployment. As I progress along this path, I plan to document my learnings and insights in this blog.
{% embed https://roadmap.sh/devops %}

Thanks for joining me on this journey! I'm excited to share my experiences and learnings with you, and I hope you find them helpful in your own DevOps endeavors.
Mô Hình Figure | Shop Mô Hình Chất Lượng Giá Rẻ
Tags: mohinhfigure, mohinhanime, mohinhgame, mohinhonepiece
Published: 2023-05-13 01:53:53

Shop Mô Hình Figure là đơn vị chuyên bán các loại mô hình anime, mô hình game, figure giá rẻ. Với đội ngũ nhân viên rất nhiệt tình, luôn câp nhật các mẫu figure mới. Nếu là một fan ruột của các bộ Manga hay Anime thì chắc chắn bạn không thể quên được cái tên Mô Hình Figure. Hãy để Mô Hình Figure thỏa mãn đam mê trong bạn.

#mohinhfigure #mohinhanime #mohinhnaruto #mohinhonepiece #mohinhdragonballz #mohinhgame

Thông tin Liên Hệ: Shop Bán Hàng Cửa Hàng Mô Hình Figure

Địa Chỉ : 221/7/37, Đất Thánh, P.6, Tân Bình, Thành Phố Hồ Chí Minh

Điện Thoại: 0923867916

Website: [https://mohinhfigure.com/](https://mohinhfigure.com/)

Email: mohinhfigure@gmail.com

Các sản phẩm:

[https://mohinhfigure.com/collections/mo-hinh-anime/mo-hinh-one-piece/](https://mohinhfigure.com/collections/mo-hinh-anime/mo-hinh-one-piece/)

[https://mohinhfigure.com/collections/mo-hinh-anime/mo-hinh-dragon-ball/](https://mohinhfigure.com/collections/mo-hinh-anime/mo-hinh-dragon-ball/)

[https://mohinhfigure.com/collections/mo-hinh-anime/mo-hinh-naruto/](https://mohinhfigure.com/collections/mo-hinh-anime/mo-hinh-naruto/)
Which is better orwith more standard, ID on the header or ID on the `<section>`?
Tags: html, webdev, help
Published: 2023-05-13 01:50:08

Say I had a situation like this:

```html
<section>
  <h2>Section Name</h2>
  
  <!-- ... -->
</section>
```

What would better/more standard, putting the ID on the `<section>` element, like so:

```html
<section id="section-name">
  <!-- ... -->
</section>
```

or on the header, like so:

```html
<section>
  <h2 id="section-name">Section Name</h2>
  
  <!-- ... -->
</section>
```


<center>Thanks in advance!<br/>Cheers!</center>
Transmate - Logistics management made easy with Transmate
Tags: logistics, invoices, tracking, booking
Published: 2023-05-13 01:45:20

Transmate is a comprehensive supply chain platform that provides a range of features to streamline and simplify logistics operations. With Transmate, users benefit from a powerful transport management system (TMS), warehouse picking capabilities, and a freight procurement system that includes spot rate tendering, rate management, and integrated freight invoice auditing.

One of the key benefits of Transmate is how it connects shippers with other members of their value chain. This collaboration takes place in the cloud, allowing all stakeholders to work together seamlessly and effectively. Thanks to Transmate's user-friendly interface, every user can easily create, schedule, and fulfill shipments with ease.

Transmate also includes a powerful project dashboard that makes it easy to handle more complex shipments, such as those required for events or specific projects. This feature allows users to stay on top of all the moving parts of a shipment, ensuring that everything is coordinated and nothing falls through the cracks. (Did you know that about every major sports event in the world is planned with Transmate?)

Finally, Transmate is fully integrated with a variety of web shops, such as Shopify. This integration means that all handling and shipping information is available in a single platform, making it easy to manage everything in one place.

At Transmate, our focus is on providing an all-in-one solution that enables our clients to streamline their logistics operations and stay ahead of the curve. With our cutting-edge platform, users benefit from the latest advances in logistics technology and can enjoy a greater level of efficiency, transparency, and control over their supply chain.

[https://www.transmate.eu](https://www.transmate.eu)
C# versions cheat sheets
Tags: cheatsheet, csharp, dotnet
Published: 2023-05-13 01:22:04


The C# language has been changing quickly, and most developers overlook its features. We can't blame them, there is a lot to remember.

Below you find some printable cheat sheets if, like me, you want to have a handy reference:

[![C# 11 cheat sheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ze3jrhn1wuf5on9ddk5.png)](https://github.com/tallesl/cs-cheat-sheets/raw/master/cs-11-cheat-sheet.pdf)

[![C# 10 cheat sheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6grgy1h2jdmp762vd4bf.png)](https://github.com/tallesl/cs-cheat-sheets/raw/master/cs-10-cheat-sheet.pdf)

[![C# 9 cheat sheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwcghov2t310eglucyiz.png)](https://github.com/tallesl/cs-cheat-sheets/raw/master/cs-9-cheat-sheet.pdf)

[![C# 8 cheat sheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xebj10b8xn3nb5o6tk32.png)](https://github.com/tallesl/cs-cheat-sheets/raw/master/cs-8-cheat-sheet.pdf)

[![C# 7 cheat sheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5sdm2livty4kuw1rqh2i.png)](https://github.com/tallesl/cs-cheat-sheets/raw/master/cs-7-cheat-sheet.pdf)

[![C# 6 cheat sheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nmqvykw84y8ifv1xfgks.png)](https://github.com/tallesl/cs-cheat-sheets/raw/master/cs-6-cheat-sheet.pdf)

I went down to C# 6 since its release was still before 10 years ago and, IIRC, was the C# version available when .NET Core first showed up.

Remember all the .NET Standard confusion? Thank God we no longer have to deal with that table.