teleren/devto huggingface dataset:
A Journey of Passion and Possibilities
Published: 2023-06-23 18:27:41

In a world where career paths are predetermined and societal expectations loom large, there are those who dare to challenge the norms and follow their passion against all odds. This is the inspiring story of me who defied conventional wisdom to pursue my love for technology. Despite being told that his  academic background and limited math skills would hinder his progress, as i embarked on a journey that proved the naysayers wrong.And after i learned how to use computer 

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

With unwavering resolve, i immersed myself in self-directed learning, honing my skills in programming, web development, and software engineering. In just 15 days, i earned a certificate that became the turning point in my career, symbolising my technical competence and shattering preconceived notions. This journey stands as a powerful reminder that passion, determination, and challenging societal norms can lead to remarkable achievements, inspiring others to pursue their dreams with unwavering commitment and overcome any obstacle.
Jsx Vs Plain JavaScript in React Apps
Published: 2023-06-23 16:05:05

Are you new to React and wondering what the difference is between JSX and plain JavaScript? 

Firstly, let's talk about JSX. It's an extension to JavaScript that allows you to write HTML-like code within your JavaScript code. This is great for creating complex UI components in React without having to write a lot of code. However, it can be a bit confusing if you're not used to it.

On the other hand, plain JavaScript is the primary programming language used in React. It's used for creating and manipulating components, handling user input, and managing the state of the application. It's a versatile language that can be used for a wide range of tasks, both in and outside of React.

So, what's the difference between the two? Well, the main difference is the syntax. JSX uses a syntax that's similar to HTML, while JavaScript uses a more traditional syntax. For example, to create an element in JSX, you can use HTML tags like this:
```Jsx
const element = <div>Hello, world!</div>;
```

But in plain JavaScript, you'd create the same element like this:

```js
const element = document.createElement('div');
element.innerHTML = 'Hello, world!';

```

Another difference is the way components are defined. In JSX, you create components by writing functions that return JSX. For example:

```jsx
function Greeting(props) {
  return <div>Hello, {props.name}!</div>;
}
```

And to use this component, you'd simply render it like this:

```jsx
const element = <Greeting name="John" />;
```

In plain JavaScript, you'd create the same component like this:

```js
function Greeting(props) {
  const element = document.createElement('div');
  element.innerHTML = `Hello, ${props.name}!`;
  return element;
}
```

And to use it, you'd render it like this:

```js
const element = Greeting({ name: 'John' });
document.body.appendChild(element);
```

As you can see, JSX simplifies the process of creating components in React by allowing you to write HTML-like code within JavaScript.

In summary, JSX is an extension to JavaScript that simplifies the process of building user interfaces in React, while plain JavaScript is the primary programming language used in React. Both have their uses, but JSX is recommended as it makes building UI components a lot easier. I hope this helps clear things up for you!
Patrón de diseño Singleton en JavaScript
Tags: javascript, webdev, spanish
Published: 2023-06-23 18:05:21

Los patrones de diseño son importantes, pero lo mas importante es saber en donde son adecuados implementarlos ahí es donde radica realmente su valor agregado. El día de hoy vamos a revisar cómo se implementa el patrón de diseño Singleton en JavaScript.

Singleton se utiliza para asegurarse de que una clase tenga solo una única instancia durante toda la ejecución de un programa, esto quiere decir que no importan cuantas veces se llame esa clase se va a ocupar una única instancia.

Hay diferentes formas de aplicar este patrón de diseño pero el que a continuación vamos a revisar es ocupando un objeto literal. De la siguiente manera.


![Singleton con función anonima](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/41d2slwz0we265x0uxjv.png)

Acá estamos asignando el resultado de una función anónima que tiene dentro de ella otra función que se llama createInstance(), que es la encargada de generar el objeto y regresar el nuevo objeto. El return de la función anonima genera un clousure llamado getIsntance() Recordemos que los clousure tiene acceso a las variables dentro de la primera función por lo tanto también la pueden modificar, acá se valida si instance es undefined si es así manda a traer createInstance() que ya vimos cual es su funcionamiento y lo asigna a la variable. Por último regresa la variable instancie. Ahora vemos que si ocupamos Singleton.getInstance() varias veces y hacemos una comparación los dos objetos apuntan a la misma instancia y por lo tanto dice que es true.

También se puede hacer de la siguiente manera, por medio del uso de una clases y constructor, primero se valida si ya existe una instancia en caso de que no sea así entonces con this se agrega la propiedad name y por ultimo asignamos this a la instancia pero lo congelamos para que no haya ninguna modificación de la intancia. Como vemos que si creamos una instancia de la clase Singleton dos veces y las comparamos vemos que son iguales, porque la misma naturaleza del patrón de diseño así no los permite.


![Singleton con clase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6s3i0izk4d13a1tf0sm.png)

Singleton es una buena idea implementarlo por ejemplo para clases que hacen la conexión a una base de datos y tener una única instancia que se encarga de eso.

Si este articulo te gusto o aprendiste algo nuevo te agradecería que me siguieras y compartieras mi contenido para que mas personas puedan aprender. Gracias.
Python 🐍 challenge_30⚔️
Tags: python, beginners, challenge
Published: 2023-06-23 17:51:16

## Convert string to camel case

- Complete the method/function so that it converts dash/underscore Delimited words into camel casing.
- The first word within the output should be capitalized only if the original word was capitalized (known as Upper Camel Case, also often referred to as Pascal case).


#### Examples:

```
    "the-stealth-warrior" gets converted -> "theStealthWarrior"
    "The_Stealth_Warrior" gets converted -> "TheStealthWarrior"
```

###### Task URL: [Link](https://www.codewars.com/kata/517abf86da9663f1d2000003)


## My Solution:

```
def to_camel_case(text):

    if len(text) > 1:

        if not text[0].isupper():
            case_one = ''.join(x for x in text.title() if x.isalnum())
            return case_one[0].lower() + case_one[1:]

        elif text[0].isupper():
            case_tow = ''.join(x for x in text.title() if x.isalnum())
            return case_tow

    else:
        return ''
```


### Code Snapshot:


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

### Learn Python

######  Python top free courses from Coursera🐍💯🚀

🎥 {% youtube 2VRXU2H4q0c%}


### Connect with Me 😊

#### 🔗 Links

[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/mahmoud-el-kariouny-822719149/)

[![twitter](https://img.shields.io/badge/twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/Mahmoud42275)
What I Can Learn from Luffy’s Adventures
Published: 2023-06-23 17:13:29

If you don’t know (seriously?), Luffy is the main character of Manga/Anime One Piece. It’s about his journey to search the greatest treasure in the world, One Piece. He wants to be a pirate king, and in his journey, he met some friends to go along on his journey.

Me? I am a web developer, still shaping my career here and there. So what I can learn from Luffy? Of course, it’s not the gomu-gomu thing. Or become a pirate, even though looks like fun.

For the last, maybe, 6 months I started One Piece marathon. I watched it from Fishman Island Arc until now Land of Wano Arc (shit, now I have to wait to watch the next episode). Every arc has something in common. At the critical moment, there will be someone to help him or his friends. Help from anyone, even from the enemy. Let’s take an example :

- The dugong, help Luffy and Law from Pet Pet fruit eater. Luffy met Dugong and fight him and become their master at Arabasta.

- Wadatsumi, help Thousands Sunny escape from Big Mom. Wadatsumi was a bad guy at Fishman Island Arc.

- Mr. 2 (my favorite), help Luffy escape from Impel Down. Even he sacrifices himself to let Luffy go, and remember how he encourages Luffy to get better after got poison from Magellan. T_T. Mr. 2 was a bad guy from Baroque Works.

- Vinsmokes, they help Luffy from Big Mom. Vinsmokes are Sanji’s family.

{% embed https://www.youtube.com/watch?v=HqfzgDj05zY %}

Watching One Piece makes my mind-blowing sometimes. Everything connected.

How I can relate this to my career? I am doing this web developing things from 2011 until now I have met many people and have worked with some companies. Sometimes I didn’t realize that what I did some years before will affect the present.

Let’s take an example.

Around 2013 I joined a digital agency and that company is using Foundation as their CSS framework. At that time I just knew Bootstrap, Bootstrap is everything. Inside of me insist why should I use Foundation, Bootstrap is more in here and there. But I continue using Foundation. Later I joined my next company, I am still I am using Foundation. Foundation is my number one CSS framework.

TL;DR

I got my first remote job. I worked for a Malaysian company. Someday, there is a chance to meet another team member in Malaysia. And we talked a lot. That time I discovered that I got the job because I mentioned I am using Foundation, not my skills. At least the boss, interested in me because of Foundation. There is some dude who has better skill than me.

That brings me back to 2013. Let say I give up, and still insist on using Bootstrap at that time, maybe I am now still working in Jakarta, struggling with traffic.

### See where I am going with this?

Whatever are you doing right now, even the small one, just do it with pride. We don’t know what it will bring in the future. And be nice to people, we don’t know what the purpose of that we know some dude in our life in the future. There no such things as coincidence.

If you don’t get what I am talking about, Pandji has a better explanation.

{% embed https://www.youtube.com/watch?v=5M0i6Fbe-q8 %}
SnapArtify : Create MacBook Mockup
Tags: webdev, react, developer, design
Published: 2023-06-23 17:08:05

Hey developers ,

I added new feature in my application SnapArtify for MacBook mockup creation.
Easily create stunning MacBook mockups with just a few clicks. Visit https://snapartify.com today and let me know your thoughts.


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

Visit [SnapArtify](http://snapartify.com) and feel free to provide your feedback.

**Happy Coding!**

**Keep in Touch**

On Twitter : [@ar_murade](https://twitter.com/ar_murade)

On GitHub : [Aishwarya M](https://github.com/AishwaryaMurade)
TypeScript Typing in React Component
Tags: react, typescript, webdev, javascript
Published: 2023-06-23 17:00:00


When creating a React component in TypeScript, it is important to correctly type the component and specify the type it returns, which should be a component itself. Failure to do so will result in an error. Let's take a look at an example:

```js
import React from "react";

export const Child = () => {
  return {
     name:"Edem"
  }
};

const Parent = () => {
  return (
    <>
      <Child/>
    </>
  );
};
```


In the above code snippet, there are several errors. Firstly, the component Child is returning an object instead of a valid JSX element. Additionally, the typings are missing, which can lead to potential issues.

To fix this, we can apply the type definition React.FC (representing a React Function Component) to the Child component. This enforces that the component returns a valid JSX element. Here is the corrected solution:



```js
import React from "react";

export const Child:React.FC = () => {
  return <div>Hi there</div>
};

const Parent = () => {
  return (
    <>
      <Child />
    </>
  );
};
```
Now, let's consider a scenario where we want to pass some props to the child component. In such cases, we need to inform the child component about the expected prop types. This can be achieved by using interfaces/type. Here is an updated example:



```js
import React from "react";

interface Props {
  content: string;
}
export const Child:React.FC<Props> = (props) => {
  return <div>{props.content}</div>
};

const Parent = () => {
  return (
    <>
      <Child content={"Hi there"} />
    </>
  );
};
```

By following these practices, we can ensure proper typing and make our React components more robust, reliable and maintainable when using TypeScript.
From Software Engineer to Manager with Oleksii Gyturo | #SerpApiPodcast, Episode 9
Tags: serpapipodcast
Published: 2023-06-23 16:46:21

---
canonical_url: https://serpapi.com/blog/from-engineer-to-manager-serpapipodcast-episode-9
description: "How, why, and what's next after becoming an Engineering Manager."
---

In episode we discuss the career growth in management. Oleksii, as an aspiring manager, faced a multitude of questions and challenges. Career growth depends not only on how well a manager copes with the tasks, but also on how open they are to new knowledge and experience.

[Watch this episode](https://youtu.be/U7CNEdoTWRc) &middot; [Listen this episode](https://podcasters.spotify.com/pod/show/ilyazub/episodes/From-Software-Engineer-to-Manager--SerpApiPodcast--Episode-9-e23ogmv)

## Show notes

[00:00:00] Introduction
[00:02:11] Did you grow from another position or have been hired as the head of mobile?
[00:03:29] You have started as an individual contributor but then you started working on more and more why?
[00:06:55] What was a result of involving you in a leadership strategy?
[00:10:32] Experience exchange (from respondent to interviewer)
[00:20:14] How do you deal with multiple sources of information about the business?
[00:36:04] What is Illia’s mission at SerpApi?
[00:56:02] Long term planning or being spontaneous? How did you manage that?
[01:06:38] Who is an engineering manager?
[01:10:09] Why have you decided to consult businesses?
[01:12:29] Do you treat consulting as a business?
[01:14:34] Epilogue (few words from Oleksii)

---

SerpApi Podcast is about SERP (search engine results pages) and e-commerce data scraping: parsing, circumvention of blocking, web automation, proxies, legal part of scraping, performance, data extraction and validation.

Use cases for SERP data scraping: programmatic search engine optimization (SEO) and local SEO, machine learning (ML), artificial intelligence (AI), large language models (LLMs), news monitoring, open-source intelligence (OSINT), voice assistants, e-commerce competitor research.

The podcast is brought to you by SerpApi team: https://serpapi.com
Big-Bang Model Used In Software Development
Tags: webdev, programming, softwareengineering, sre
Published: 2023-06-23 16:41:17

The Big-Bang model is the Software development life cycle model where the development team does not follow any specific process. The development of the software product just starts when finance and efforts are available the input and output of the software may be not as per customer requirements. The Big-Bang model does not follow any specific process/procedure and very little planning is required for the development process so in this model, very little planning is required.

The big bang model is best for small types of project

## Big-Bang Model Design and Application

The Big-Bang model is all focused on all possible resources in software development and coding with very little planning or with no planning. The requirement understood and implemented as they come. Any change may or may not affect the whole product. The big bang model is suitable for a small project or two developers working together on a small project. This model is useful for academic projects and practice projects. The big bang model is very best for those projects where requirements are not understood, and the project's final date is not given.

## Advantages of the Big-Bang Model

1. The big advantage of the Big-Bang model is it focuses on all possible resources in software development and coding with very. little planning or with no planning.
2. A very simple model to understand and use.
3. Very few resources are required.
4. The big-Bang model provides flexibility to developers.
5. This model is good for academic and practice projects.
6. Big Bang Model provides flexible management of the software. development process.

## Dis-Advantages of Big-Bang Model

1. Management of all activities of the software product is more complex.
2. Software development is more complex.
3. Many stages of the spiral model need more and excessive documentation.
4. Not Suitable for small and less risky projects.
Spiral Model Used In Software Development
Tags: webdev, programming, softwareengineering, sre
Published: 2023-06-23 16:32:36

The spiral model combines the idea of iterative development with the controlled and systematic aspects of the first model waterfall.

### Spiral Model Design

Spiral Model has four phases the software development process has repeatedly passed from these phases called iterations. It allows us to release the product in iteration.

### First Step: Identification

This phase includes the identification of system requirements by continuously communicating with customers and developers and Business analysts (BA). This phase begins with the gathering of business requirements of the system in the baseline of the spiral. In the subsequent spiral when the product grows up the subsystem requirement and unit requirements gather in this phase.

### Second Step: Design

The design phase begins with the conceptual design in the baseline of the spiral model and involves the architectural and logical design of the module physical design and final product in the subsequent spiral. 

### Third Step: Build 

The constructed phase refers to the production of the actual product in the baseline we just construct the conceptual design of the product from customer feedback. Then the subsequent spiral the clarity of requirement and design details a working model of software is called build with versions number.

### Fourth Step: Evaluation of Risks

Risk Analysis involves identifying and estimating and monitoring the technical feasibility and management risks. At the end of the software development, process testers test the build and give it to the customer for evaluation and the customer provides feedback.

### Applications

Spiral Model is widely used in the software development industry given below points explains the usage of the spiral model in the industry.

For medium to high-risk software projects.
Major changes are expected during the development phase
Requirements are complex and need evaluation to get more clarity
### Advantages of Iterative Model

1. Changing requirements at any stage can be accommodated
2. The spiral model allows us to extensive use of the prototype.
3. Users see the actual outcomes early due to the stage of the spiral
4. Development is divided into smaller tasks and risky parts this makes the development easy and better for risk management
5. The requirement can be gathered more accurately

### Dis-Advantages of Iterative Model

1. Management of all activities of the software product is more complex
2. Software development is more complex
3. Many stages of the spiral model need more and excessive documentation
4. Not Suitable for small and less risky projects.
Iterative Model Used In Software Development
Tags: webdev, programming, softwareengineering, sre
Published: 2023-06-23 16:29:21

The iterative model starts the process with a simple implementation of a small set of requirements and iteratively enhances the evolving versions of the system that is complete and ready to be deployed. The iterative model does not attempt to start the development after the complete specification of the system instead development starts with just part of the software product.

### Iterative Model Design

The iterative process starts with a small representation of the software product. In this model, we start working on a project with a small chunk of requirements. In this model, we repeat certain steps like design and development testing and implementation in each iteration. Iterative enhance the evolving versions of the system are complete and ready to be deployed.

The following picture illustrates the Iterative Model

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

### Applications

The iterative model is widely and extensively used in the software industry some given below point explains the usage of the iterative model.

The requirement of the complete system is clearly defined.
Major requirements must be defined however some requirements and functional may need modification and upgrading with time
There are some high-level risks, features, and goals involved that may be changed in the future.
### Advantages of Iterative Model

1. Some working functionality can be developed quickly at the early stages of the Iterative project
2. Clearly and defined stages
3. Easy to arrange tasks
4. Progress can be measured
5. Results are obtained at the early stages
6. Easy to manage due to the rigidity of the model
7. Less costly to change the requirements at any stage
8. Easier to manage high risks
9. Parallel development can be planed
###  Dis-Advantages of Iterative Model

1. More resources may be required
2. More Management attention is required
3. The cost of change is less but it is not suitable for changing requirements again and again.
4. Not suitable for smaller projects
5. Management Complexity is more
6. A highly skilled resource is required
7. Project progress is highly dependent on the risk analysis phase.
Why to write jsx syntax in a .js file
Tags: webdev, react, javascript, beginners
Published: 2023-06-23 16:23:04

You can write JSX syntax in a JavaScript file because JSX is not a separate language, but rather a syntax extension to JavaScript. This means that under the hood, JSX is actually compiled into regular JavaScript code that the browser can understand.

When you write JSX in a JavaScript file, you need to use a transpiler like Babel to convert the JSX code into JavaScript code that the browser can understand. The transpiler takes your JSX code and compiles it into regular JavaScript code by transforming the JSX syntax into function calls that create React elements.

For example, this JSX code:

```jsx
const element = <div>Hello, world!</div>;
```

would be compiled by Babel into this JavaScript code:

```js
const element = React.createElement("div", null, "Hello, world!");
```

As you can see, the JSX code has been transformed into a call to `React.createElement()`, which creates a React element.

So, while you're technically writing JSX syntax in a JavaScript file, it's important to understand that this is just a shorthand for writing regular JavaScript code that creates React elements. And with the help of a transpiler like Babel, you can use the full power of JSX syntax in your React applications, while still writing code that runs in the browser.