teleren/devto huggingface dataset:
Introducing Components: A Better Way To Build And Maintain Complex Web Applications
Published: 2022-10-21 09:01:47

Components let you split the page into independent and reusable parts.

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

This makes organizing the page leaps and bounds easier, but even more importantly, components allow us as the developers to separate concerns from one another.

### Functional Components

In React, there are two types of components that you can use: Functional Components and Class Components.
In this part, we will talk about functional components.

A functional component is a simple JavaScript function:

```
function Hello() {
  return <h1>Hello world.</h1>;
}
```
The code above defined a functional component called Hello, that returns a simple React element.

> Notice that the name of the functional component begins with a capital letter. This is absolutely critical. If we start the name of a component with a lowercase letter, the browser will treat our component like a regular HTML element instead of a Component.

### Rendering Components

In order to display the component, we need to create the corresponding JSX element.

For example, for our user-defined component Hello:

```
const elm = <Hello />; 
```
Now, we can use our user-defined element and render it on the page:

```
function Hello() {
  return <h1>Hello, I am here Learn new things.</h1>;
}

const elm = <Hello />; 
ReactDOM.render(
  el, 
  document.getElementById('root')
);
```

### Class Components

Class components are typically used when there are more advanced user interactions, like forms, and animations.

All class components need to extend the React.Component class.

We can rewrite our Hello functional component as a class component:

```
class Hello extends React.Component {
  render() {
    return <h1>Hello world.</h1>;
  }
} 
```
Class components need to have a render method, which is in charge of telling what the page should show.

t's made by the React team, and it's the cornerstone of their design philosophy, which is to use reusable components for all components on the page.
JavaScript Engine
Tags: javascript, webdev, programming
Published: 2022-10-21 09:00:35

No, It is not hardware it is just a software code that is present in every browser. 
In this blog, I will talk about the JavaScript (js) engine.

**JavaScript Runtime Environment(JSE)**- Every browser has JSE in it. JSE consists of a Js engine that executes the JS code and it is also the heart of JSE. JSE contains a Js engine, API, callback queue, microtask queue, and an event loop.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7t0q1kjcdgyqynieej9k.jpg)

Inside the Js engine, there are different steps for getting the output. The Js code that we write at first go for parsing. In the parsing step, our code is broken down into tokens like in the below image we can see that let, a, =, and 7 are broken down into tokens.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0jyr49lg7ugqov9bjtlp.jpg)

The code is then passed to a syntax parser the job of this is to take our code and broke it into Abstract Syntax Tree(AST).

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

Now let's understand the **interpreter** and **compiler**.

**Interpreter**-  The job of the interpreter is to take the code and execute it line by line. It is fast.

**Compiler**- In this our whole code is compiled first even before execution and a new code is formed which is the optimized version of our code and then it is executed. The optimized code runs very fast. It is efficient.

Now, coming to the main part. When JavaScript was first invented by Brendan Eich, it uses an interpreter to execute the code. But modern browser like the V8 engine uses **Just In Time(JIT) compilation**. Which uses both interpreter and a compiler for code execution. Compilation and execution go hand in hand. Our AST goes to an interpreter and it goes for execution and at the same time compiles the code which is executed line by line by the interpreter.


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

In some engines, there is also AOT(ahead of time) compilation. It takes the code and compiles it before execution.

A memory heap is used for storing variables. A garbage collector(GC) is used for collecting garbage value. O is for optimization. 
Garbage collection uses a [mark and sweep algorithm](https://www.geeksforgeeks.org/mark-and-sweep-garbage-collection-algorithm/) for freeing memory.

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

At present **V8 engine** of google is the best engine for JavaScript. 

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


I have read all this from the [Namaste JavaScript](https://www.youtube.com/playlist?list=PLlasXeu85E9cQ32gLCvAvr9vNaUccPVNP) series by [Akshay Saini](https://twitter.com/akshaymarch7). If you want to fall in love with JavaScript then you should learn from this.
Best encrypted cloud storage
Tags: encryp, cloud, secure
Published: 2022-10-21 08:55:41

Cloud technologies are firmly entrenched in our lives, and the cloud services market has become so oversaturated that you may not meet a person who would not use one of them for synchronization, backup, or remote file storage. Virtually all existing cloud storage provides both free and paid users. Let's consider one of the best applications for connecting cloud storage in the form of local disks, CloudMounter.

CloudMounter is the best [secure encrypted cloud storage ](https://cloudmounter.net/best-cloud-encryption/)you could implement in your business. Using the best encryption software will help you protect the information that you store, receive or send. Now, with private cloud storage being extremely popular nowadays, users are storing their personal information out in the open – which comes with a great risk of their financial data and personal details being stolen and things may even escalate to identity theft.
How to add Loading Effect in ReactJS
Published: 2022-10-21 08:49:21

**Installing-**
` npm i react-spinners `

> https://www.davidhu.io/react-spinners/ 

In the App.js File 

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


const Example6 = () => {
  const [load, setload] = useState(false);

  useEffect(() => {
    setload(true);
    setTimeout(() => {
      setload(false);
    }, 7000);
  }, []);
    
    const styleCSS = {
        display: "Flex",
        justifyContent :"center"
    }
    

  return (
    <>
          {load ? (
              
              <HashLoader color={"red"} loading={load} size={100} style={styleCSS} />
      ) : (
        <center>
          <h1> Try to make a loading </h1>
        </center>
      )}
    </>
  );
};

export default Example6;

```
Here's The Cool Thing About JSX: You Can Use HTML Tags In It.
Published: 2022-10-21 08:41:46

As you can see, the element is not in quotes to represent a string. It's like an HTML element, however we use it right in the JavaScript code!
This is called JSX, and it is a syntax extension to JavaScript. It allows us to build UI elements right in the JavaScript code!

```
ReactDOM.render(
  <h1>Hello, React!</h1>,
  document.getElementById('root')
);
```

### Expressions in JSX

We can use any JavaScript expression inside JSX using curly braces.

```
const name = "David";
const el = <p>Hello, {name}</p>;

ReactDOM.render(
  el,
  document.getElementById('root')
); 
```

### Attributes in JSX

We can specify attributes using quotes, just like in HTML:
<div id="name"></div>
JSX
When using a JavaScript expression as the attributes value, the quotes should not be used:
```
<div id="name"></div>
```
When using a JavaScript expression as the attributes value, the quotes should not be used:
```
<div id={user.id}></div> 
```

### How Does JSX Work?

When the JSX expressions are compiled, they are converted into JavaScript objects, representing React elements.
React then uses these elements to build the corresponding HTML DOM and display it in the browser.

Let's create a counter app, that increments a counter variable every second and displays it on the page as a paragraph:

```
let counter = 0;

function show() {
  counter++;
  const el = <p>{counter}</p>;
  ReactDOM.render(
    el, document.getElementById('root')
  );
}

setInterval(show, 1000); 
```
We use setInterval to call the show function every second and render the counter element on the page.

One of the great features of React is that it updates only the elements that need an update. You can inspect the HTML output of the example above and see that only the text in the paragraph gets updated every second.

**JSX is a great tool for React in creating views.** It has the simplicity of HTML. React's DOM manipulation works with it. The declarative nature makes it easy to understand. 

Still, you should also know that JSX can make the code redundant, which makes a lot of developers hesitant to use it. But if you apply the proper unit testing, any potential issues can be found and resolved in time.
What were your goals for this week?
Tags: discuss, goals, productivity
Published: 2022-10-21 08:36:05

Hello all,

I would like us to start some discussions around this week's work. To do that here are a couple of questions to kick of the discussion: 

* What were your goals for this week?
* Did you achieve all of them?
* If not, why is that? Did some unplanned work block you from achieving your goals?
* Does it happen often? Is it a recurrent pattern?
* How do you plan on mitigating it?
* What are your takeaways from this week?

Let's end this week with some nice discussions and help each other move forward 🎉
Can we do startup with API?
Tags: javascript, api, mobile
Published: 2022-10-21 08:28:43

I have an idea to make hotel startup company. I want to ask developer is , If I can use hotels API and make it can reservation in our app. Then , We got commission from those agency. Our service will combine agoda,booking.com,tripadvisor,klook and Grab together.

Is it possible to do it ? [from Agoda API fullfillment][1] [1]: https://i.stack.imgur.com/fZ3na.png Here is our API List?

Developer API 3.1 Duffel : ​​https://duffel.com/pricing#managed-content

3.2 Skyscanner API https://www.partners.skyscanner.net/affiliates/travel-apis

3.3 Amadeus Developers https://developers.amadeus.com/self-service/category/air

3.4 Booking.com API https://www.booking.com/affiliate-program/v2/index.html

3.5 Agoda API https://partners.agoda.com/DeveloperPortal/

3.6 TripAdvisor API https://tripadvisor-content-api.readme.io/reference/overview

3.7 Tourradar API https://www.tourradar.com/distribution-api

3.8 Flight Flex API https://developer.flightstats.com/getting-started/
Today's Daily Dose of Programming Humor
Tags: jokes, dailydeveloperjokes
Published: 2022-10-21 08:00:29

---
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/5e125988c2636.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:___ Why did the web developer always go to the wrong hotel room?

___A:___ They were in room 301.
 -->
Best essay writing services
Tags: javascript, webdev, beginners, programming
Published: 2022-10-21 07:58:33

[Best essay writing services](https://bestessaywritingservices.com.au/) cover various essay topics spanning all academic streams - Maths, Science, English, Accountancy, and more. We provide papers of any type and at all levels of complexity. From corporate papers to case studies and research papers, we have professional writers who work on the date you need. In addition, 100% of our experts undergo regular quality checks to ensure that they meet your highest demands at an affordable price.
AZURE APP SERVICE
Published: 2022-10-21 07:56:51

Azure App Service is an HTTP-based service for hosting web applications, REST APIs, and mobile back ends. You can develop in your favorite language, be it .NET, .NET Core, Java, Ruby, Node.js, PHP, or Python. Applications run and scale with ease on both Windows and Linux-based environments.

App Service not only adds the power of Microsoft Azure to your application, such as security, load balancing, autoscaling, and automated management. You can also take advantage of its DevOps capabilities, such as continuous deployment from Azure DevOps, GitHub, Docker Hub, and other sources, package management, staging environments, custom domain, and TLS/SSL certificates.
Azure App Service is a fully managed platform as a service (PaaS) offering for developers. 

TERMS DEFINITIONS

REST API-  means representational state transfer. it is architectural style  that helps to create web services that interact via an HTTP protocol and bounded by it rules 

GET - The GET method is used in computing resources from a server . It is said to be a safe method as it does not change the state of the resources in any way 
GET method is IDEMPOTENT meaning requesting this method on it multiple times will always give same result of resources .

PUT - This method is used in updating the existing resource  on the server and primarily fully replaces an entire existing resource. if the resource does not exist, the command PUT may decide to create a nee resource 
it is also idempotent 

POST - this method is used to create a new resource into the collection of resources on a server. but requesting this method on the server multiple times will not bring same result i.e it is not idempotent.

DELETE -This method from its word it means cancel or terminate, basically it is used to delete the resources from a server. 

ZIP DEPLOY- When you deploy a ZIP package, App Service unpacks its contents in the default path for your app ( D:\home\site\wwwroot for Windows, /home/site/wwwroot for Linux). This ZIP package deployment uses the same Kudu service that powers continuous integration-based deployments.

SWAP - In Azure Cloud Services, you can switch between two separate cloud service installations (extended support). The Azure Resource Manager model in Azure Cloud Services (extended support) does not employ deployment slots, in contrast to Azure Cloud Services (traditional). When deploying a new version of a cloud service in Azure Cloud Services (extended support), you can make the cloud service "swappable" with an already-installed cloud service (extended support).

ARR AFFIRNITY: By providing the user a unique cookie (known as an affinity cookie), ARR deftly recognizes the user and enables the service to identify the appropriate instance the user was using to fulfill any subsequent requests made by that user.
I built a website image scraper + AI classifier
Tags: python, showdev, programming, ai
Published: 2022-10-21 07:56:31


I have been a member of the community in the shadows for many years, and I felt like it was time to write a post :blush:.

As python is one of the vehicular languages in artificial intelligence concerns and it's incredible how AI and ML are improving day by day, I wanted to start learning about this subject.

At first I thought to start with one of the many python learning websites, but I dont feel like it's the best way to start learning a new lenguage when you already know how to code (just a personal opinion which works for myself). 
I prefer to set some goals and then look for the information.:star:

So I decided to build a tiny pet project to get contextual information about a website based on it's images so i could struggle with python and AI in a more realistic way. 

The application is able to scrap images from any website in order to classify them with tensorflow.
It's built on FastApi to expose a rest api for an easier management, and it's fully dockerized to deploy it anywhere (and not having to fight with CUDA drivers).

I think it could be useful to create image datasets or just analize websites to get contextual information about them.

Of course any suggestions are welcome! and feel free to check it out and give it a try :heartpulse:

{% embed https://github.com/jonlo/py-web-image-scraper-classifier %}
SSH Güvenliğini Arttırmak
Tags: ssh, security, linux, openssh
Published: 2022-10-21 07:56:07

## Giriş
  * Merhaba, Bu yazımda **ssh-audit** aracıyla hedef makinedeki ssh bağlantı güvenliği açıklarını bulup, açıkları kapamak için gereken değişiklikleri **Ansible** ile yapacağız.

## .sshd_config ve ssh_config Arasındaki Fark?
  * sshd nin açılımı ssh daemondur. SSH Portuna gelen bağlantıları dinler. sshd_config bulunduğumuz makineye gelen bağlantıları karşılamada kullanılan ayarlardır.
  * ssh_config de ise ssh istemcisi için yapılan ayarlar bulunur. Yani ssh_config başka makinelere bağlanırken kullanılan ayarlar içindir.

## ssh-audit ile Açıkları Bulmak

  * ssh-audit kurulur.


{% gist https://gist.github.com/BerkantErbey/f831cf512355fd37bcc2b1c3f54f518c %}
  * sshd_config ayarları yapılarak güvenliği arttırılacak makine taratılır. İster uzak bir makineden ister kendisinden taratabiliriz.

    >ssh-audit localhost

![alt text](https://berkanterbey.github.io/images/002.png "ssh-audit komutunun çıktısı")

![alt text](https://berkanterbey.github.io/images/003.png "ssh-audit komutunun çıktısı")

  * Çıkan sonuca göre anahtar değişim algoritmalarında (KexAlgorithms), HostKeyAlgoritms de, kullanılan şifreleme algoritmalarında (ciphers) ve mesaj kimlik doğrulama kodlarında yeşille belirtilen algoritmalar güvenli olduğundan kalacak, sarı ve kırmızı olanlar sshd_config den çıkartılacak.

  * Ubuntu 20.04 Focal için örnek sshd_config dosyamız.
{% gist https://gist.github.com/BerkantErbey/9668e9b36b7ca93c1fb399369f41ae60 %}


## Ansible ile Otomasyon

  * Birden fazla sunucunun olduğu bir ortamda, teker teker bu ayarları dağıtmak çok fazla zaman alacağından **Ansible** ile dağıtacağız.

  * Ansible ile dağıtırken her işletim sistemi sürümüne göre desteklenen algoritmalarda değişiklikler olabilir. Bundan dolayı playbook umuza sunucuların işletim sistemini bakıp, sadece Ubuntu 20.04 (focal) için çalışacak şekilde ayarlanacak. Dilerseniz farklı işletim sistemlerinide benzer yöntemle ekleyebilirsiniz.

  * Aşağıdaki ekran görüntüsünde host02.txt dosyasında belirtilen makinelerde işletim sistemi kod adı bilgisine ulaşıyoruz.

![alt text](https://berkanterbey.github.io/images/004.png "Ansible İşletim Sistemi tanıma")

{% gist https://gist.github.com/username/713f9e1675998fea47d7a05bdb636e2f %}


  * Yapacağımız işlemi kısaca özetlersek
    * sshd_config hedef makineye kopyalamak (var olan izin ve sahiplikleri koruyarak)
    * sshd_config de belirtilen hostkeyleri **yoksa oluşturmak**
    * ssh servisini yeniden başlatmak (**değişiklik olmuşsa**)
{% gist https://gist.github.com/BerkantErbey/3189b4eff66986f91bdf1c5e478cb421 %}


Bir sonraki yazımızda görüşmek üzere ;)
Some Customer Services Vocabulary
Tags: beginners, tutorial, english
Published: 2022-10-21 07:51:17

**Underpromise and overdeliver**: A strategy in which product or service providers aim for superior customer service by doing more than they originally said they would do.

**Over-the-phone customer service.**: What we know as Call Center.

**Back end**: Functions out of calls.

**To ask around**:  to ask many people the same question.

**To run by/past**:to discuss something with a person for his or her opinion.

**Close down**: Stop operating.

**Get on**: Continue or start doing something.


 **Know-it-all**: A person who thinks that he or she knows much more than other people.


 **Address a problem**: To give attention to or deal with a matter.


**Get in touch with**: Make contact.


**Paramount**: More important than anything else.


**Indeed**: Really or certainly, often used to emphasize something.


**Coined**: To invent a new word or expression, or to use one in a particular way for the first time.


**Strive**: To try very hard to do something or to make something happen, especially for a long time or against difficulties.


**In advance**: Before a particular time, or before doing a particular thing.


**Expertise**: A high level of knowledge or skill.


**Refund**: An amount of money that is given back to you, especially because you are not happy with a product or service that you have bought.