teleren/devto huggingface dataset:
The New Manuscript 
Tags: html, beginners, programming, tutorial
Published: 2021-12-22 08:58:48

Hi guys, long time no see! 👋  

I'm here again with another post about html, today we'll go into the evolution of the website! 
To understand today's post I suggest you to read the previous one! 
(So  🏃 to it and come back later ) OK? Well, let's going to start with the post: 😉

## The evolution of websites:

As you may remember, in the past, tables were the first way to organise websites, and it was freaking horrible 😱 to layout them! because the content never fit well at all and over and above, almost all browsers followed their own rules, making web development a real challenge 💪🏁 . 

It's obvious the worth problem which they caused on web developers life, because they were very complicated and difficult to learn due to the lack of documentation. ( the god of Stack Overflow didn't exist, yet 🤣) . For all this, the W3Consortium was created, whose aim was to guarantee the correct growth of all the websites.

When the software came to seem wiser, the way to structure website came to a most easy structure, the *div tag* became more powerful than ever. Everything began to be build under this tag, which was the **flagship** of the HTML4 standard, nevertheless in HTML5, the so-called **semantic** tags emerged, which are nothing more than the HTML4 tags building a new tag with more sense .

It's an interesting story isn't it? 
Well, let's give it some color! So, it was such old websites looked likes 😃. 

![HTML old.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638925675877/BhpTfcMHO.png)

and this is a modern one:

![HTML new.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638925693616/PyHDNkAjh.png)

A great change right? 🤪

Ok, as I said you, the *semantic* tags allowed a better understanding between developer-website-search engine, and how this is possible? 
Let's trying to see on an example 😉

- **Sensible structures for developers:**
By not having to use the same DIV tag all the time and differentiate only by classes the development time of your website is greatly reduced, and then, why?
The reason is that errors are easier and easier to find, you just have to do a quick search without getting lost among so many "divs".

- ** An improvement in the speed of loading the page:**
If tags are considerately reduced we can see that website will load faster, also its SEO will improve a lot, taking more advantage about how your website will look like.
                                                                                                      
Well, that's a lot for today, isn't it? I think we call it a day 🤩🤩🤩! 
Thanks for following the blog and remember to always be the best version of you!
React
Published: 2021-12-22 08:53:07

 
1. State-props
Ans: State Allow us to create and manage data of the component. Props is short for properties and they are used to pass data between React components. React’s data flow between components is uni-directional that means we can only pass data to parent to child component we can’t send back data from childcomponent.In state we can give a default value and change it with setState. State allow us to save and change components data when we want. But if we want to use state in functional component it’s different than class component state declaration.We can pass data to components. we need to define/get some data from the parent component and assign it to a child component’s “prop” attribute.we use dot notation to access the prop data and render it. We can't change props data
 
2. JSX
Ans: JSX stands for javascript syntax extension.JSX allow us to write html code inside react .It makes easier to add html in react.JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement()  and/or appendChild() methods.It converts html tags to react elements.With jsx we can write expressions inside curly braces{}.JSX will throw an error if the HTML is not correct, or if the HTML misses a parent element.Alternatively, we can use a "fragment" to wrap multiple lines. This will prevent unnecessarily adding extra nodes to the DOM.JSX follows XML rules, and therefore HTML elements must be properly closed.A fragment looks like an empty HTML tag: <></>.
The class attribute is a much-used attribute in HTML, but since JSX is rendered as JavaScript, and the class keyword is a reserved word in JavaScript, we cannot use it in JSX. We can't use if-else inside jsx.But we can use optional chaining (? :)  it works like if-else statement 
 
3. Hooks & custom hooks
Ans: React hooks allow us to access to state and other React features in funcion components. Because of this, class components are generally no longer needed.Hooks allow us to "hook" into React features such as state and lifecycle methods.There are 3 hook rules . Hook can only be called inside react function component.Hooks can only be called at the top level of a component.Hooks cannot be conditional. And this Hooks will not work in React class components. We can aslo make our custom hooks if we want to add speacial functionalites in our application.To use react hook we have to import it from react . We have useState,useEffect ,useContext , useRef,useReducer , useCallback hooks . If we want make custom hook we have to start it’s name  with use.
Listen Santa, They're Talking About PHP 😮
Tags: php, webdev
Published: 2021-12-22 08:42:11

>**Just the Gist**  
>As this article series is coming to a close it's time to look at what else is out there. So today we'll see a small selection of podcasts, blogs and YouTube-channels that are talking about PHP. If you know of someone that is talking about PHP, please chime in.

## Podcasts
* [PHPUgly](https://phpugly.com/) - A group of PHP developers passionate about the language (despite what the title may lead you to believe).
* [PHP Town Hall](https://phptownhall.com/) - Less frequent than PHPUgly but always interesting subjects. 
* [PHP Internal News](https://phpinternals.news/) - A podcast that often brings up RFCs and the details of them, as well as other considerations that go into the development of the language.

## Blogs
* [PHP Annotated](https://blog.jetbrains.com/phpstorm/category/php-annotated-monthly/) - A monthly blog about core developments, standards and some of the major frameworks.
* [stitcher.io](https://stitcher.io/) - A blog that covers most things PHP, such as the latest versions to opinion pieces.
* [osteel's blog](https://tech.osteel.me/) - A garden of articles on PHP, Laravel and one of the best introductions to Docker I've ever seen.

## YouTube Channels
* [Gary Clarke](https://www.youtube.com/c/GaryClarkeTech/playlists) - Gary covers the basics of PHP, design patterns and there's also a course for building a eCommerce project. But watch out! If you like Gary's style of teaching you may be learning Python next! 😉
* [Program With Gio](https://www.youtube.com/c/ProgramWithGio/featured) - A channel that covers a mix of news and in-depth explanations. 
* [freeCodeCamp.org](https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ) - freeCodeCamp covers most of anything. PHP is no exception. You can find a 5 hour course here getting you from the basics to some of the OOP concepts. While you're at it, why not start that fullstack 7-hour course too?! 

## What about you?
Have you checked out any of these content creators? How did you like their entries? Are there any creators that I missed highlighting here that you feel should get a mention? Comment below and let us know what you think ✍
Rails 7.0 released… a non-event at Doctolib
Tags: rails, database, javascript, opensource
Published: 2021-12-22 08:33:23

Last Wednesday came the [release announcement of Rails 7.0](https://medium.com/r/?url=https%3A%2F%2Frubyonrails.org%2F2021%2F12%2F15%2FRails-7-fulfilling-a-vision).

You may [have already heard](https://medium.com/r/?url=https%3A%2F%2Fworld.hey.com%2Fdhh%2Frails-7-will-have-three-great-answers-to-javascript-in-2021-8d68191b) that Rails 7 eliminates the need for NodeJs and Webpack today. Just to save the time spent, during development, waiting for the transpilation of JavaScript codes, this is a huge gift.

Security obsessives will retain [native encryption of ActiveRecord attributes](https://medium.com/r/?url=https%3A%2F%2Fgithub.com%2Frails%2Frails%2Fpull%2F41659). This is one more way to bring security to the confidentiality of the data which is so dear to us.

For many, one would have said that Santa Claus was passing by 10 days in advance.
**But not at Doctolib.**

**What ?! Wouldn't Santa Claus come to Docto?** But yes, don't worry… it had in fact already happened since November 4th.

Because, what is less highlighted in the general public announcements, it is that Rails 7 brings the support of requests on associations through multiple databases ("cross cluster") thanks in particular to [a Github's contribution](https://medium.com/r/?url=https%3A%2F%2Fgithub.blog%2F2021-07-12-adding-support-cross-cluster-associations-rails-7%2F).

So don't repeat it to the children, but sometimes you have to help this Santa Claus a little, and with us he received the help of the Engineering team which is precisely interested in the split of our database.

Yes, yes, you read that correctly: We had been serving your favorite application in production for over a month on an alpha version of Rails 7… just like Shopify or Github did.
And at the rate of 3 rollouts per day,  I will even tell you that Rails 7 is an old history for us… An history on which more than 4000 commits have already been stacked.
As a matter of history, I must even admit that, as a newcomer to the house, I was surprised at the non-event that it was! A quick announcement on Slack one morning, and at noon, quietly, we were running on Rails 7.

But was it really useful to take the risk of running on an alpha version?

It's FUN and BOLD and it's no small feat. And it's also an opportunity to make our contribution to the open source world by enabling mine clearance that benefits the entire Rails community.
But it is also a pragmatic choice that allowed us to follow our plan for structuring our database architecture. Because the multi-database split is a hot topic on which we are working a lot.

Thus ends our last Advent ticket, all we have to do is join our families to await the arrival of Santa Claus. Merry Christmas to everyone.

 
Header photo credits : [TrainDoubs-25](https://pixabay.com/users/trainsdoubs-25-5214986/)
Go Template Playground
Tags: go, webassembly, javascript
Published: 2021-12-22 08:02:15

If you need to test go template with sprig functionality and HTML, Text template switch settings. https://repeatit.io meet these needs.
I made it with very little code and it is working on browser with go's webassembly output.

First start, use promise in go code. So we can return error and see it in browser. When creating promise in javascript, you are adding a function which is take _resolve_ and _reject_ parameters.
In golang is same so our promise implementation like this.
Directly use main function arguments in promise function!

```go
func Render(this js.Value, args []js.Value) interface{} {
	mainArgs := args

	handler := js.FuncOf(func(this js.Value, args []js.Value) interface{} {
		resolve := args[0]
		reject := args[1]

		go func() {
			data, err := renderWithError(mainArgs)
			if err != nil {
				errorConstructor := js.Global().Get("Error")
				errorObject := errorConstructor.New(err.Error())
				reject.Invoke(errorObject)
			} else {
				resolve.Invoke(js.ValueOf(data))
			}
		}()

		return nil
	})

	promiseConstructor := js.Global().Get("Promise")

	return promiseConstructor.New(handler)
}
```

After that set this function and use it with js.

```go
renderjs := js.FuncOf(Render)
js.Global().Set("render", renderjs)
```

```ts
try {
  output = await render(values.input, values.template, config.template);
} catch (error) {
  // inform to somewhere
}
```

Whole website is opensource on https://github.com/rytsh/repeatit

_If you want to see a feature about that write me I will handle it._

```
          _---~~\\~~----_
  _ / _ *^____      _____``*h*\"*/
 / __/ /'     ^   /      \ ^@q   F
[  @L | @))    |  | @))   l  0 _/
 \ /   \~____ / __ \_____/    \
  |           _l__l_           I
  }          [______]           I
  ]            | | |            |
  ]             ~ ~             |
```

https://javascript.info/promise-basics
https://gist.github.com/belbomemo/b5e7dad10fa567a5fe8a
'Stronger' Strong Customer Authentication Boosts Fraud Prevention
Tags: security, fido2
Published: 2021-12-22 07:56:20

A high cart abandonment rate across Europe related to eCommerce has been happening, and it is due to the ongoing requirements and PSD2 or Payment Service Provider Directive surrounding the SCA or strong customer authentication. The said concern is that issuers and merchants find it difficult to implement due to factors like high costs, long implementation cycles, and its vulnerability to fraud.

As a result, merchants look for and implement the right kind of SCA and fraud prevention actions for their online activities.

PSD2 Requirement for Strong Customer Authentication
There are two categories that PSD2 fall under articles 6, 7, and 8 that requires at least two from these multi-factor authentications (MFA) elements:
something known – PIN or a password
something owned – laptop, security key, or mobile phone
something you are – fingerprint biometric or face ID
The second category is under article 9.3.a stating the authentication devices must maintain the non-interaction between chosen authentication methods.

## **SCA Vulnerabilities**
The surrounding principle of PSD2, like fido2 key, is designed for fraud prevention, but it is also true that other methods of SCA implementation are not made of equal strength.
Today's tech-savvy fraudsters use social engineering tricks to get around a solid multi-factor authentication. For this reason, online retailers and issuers alike need to pay special attention to the vulnerabilities of their authentication methods to avoid fraudulent activities. For this reason, robust [identity verification](https://loginid.io/solutions#id-verification) has become a need by almost all people who have access to eCommerce.

Online fraudsters gain access to several bank accounts of a single user through Social Engineering. Some forms of this come in phishing or man in the middle (MITM) attacks that trick users to provide sensitive information like username and passwords. They may send emails with a link to click that automatically gives access to a user's bank account or online wallets.

So, to avoid fraud, learn more about solid customer authentication for a more secure, private authentication for the future—LoginID.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/phs9dwscr7b6w46pig3l.PNG)
Create Different Charts In React Using Chart.js Library
Tags: react, chartjs
Published: 2021-12-22 07:56:04

> _"A little progress each day adds up to big results." - Satya Nani_

In this article, I discussed how to create different charts like Line chart, Bar chart, Pie chart using Chart.js NPM library with examples. Also, discussed overview of Chart.js library.

Read [here](https://www.c-sharpcorner.com/article/create-different-charts-in-react-using-chart-js-library/)

I hope you like this article.
How is AMORE integrated with the blockchain?
Tags: blockchain, dating, crypto, javascript
Published: 2021-12-22 07:55:42


AMORE is a premier [dating app](https://amoredating.co) that offers complete integration with the blockchain! If you always wanted a decentralized, immersive and empowering dating app, then you are in the right place. We know how challenging it can be to find a great date, and how hard it can be to use most dating platforms. That’s why we created AMORE, which is designed from the ground up to make dating interesting, fun and immersive.

**How is AMORE integrated with the blockchain?**
AMORE has its own tokens that you can acquire and then use on a variety of actions. If you want to send messages, share gifts or perform all kinds of actions inside AMORE, you just have to acquire tokens and use them the way you want. It’s a very engaging way for you to connect with whomever you want and enjoy the dating process, while also having fun along the way.

**Connect with thousands of potential dates**
The AMORE userbase is constantly growing, so you will have no problem finding someone near you that you like. Plus, new users are coming every day, so the chances of identifying your ideal date or even finding your soulmate can be pretty high. Combine that with the fact that you can easily customize your profile, share gifts and perform any actions you want in a decentralized environment, then you can see why AMORE is the ideal option for a great, fun dating experience.

**Engaging, very easy to use**
Our focus with [AMORE](https://amoredating.co) is to ensure that you can always find the best possible date quickly. We created a top of the line algorithms that makes it easy to match you with the right person that suits your style and requirements. It’s a wonderful, innovative approach that guides you towards like-minded people which you will surely enjoy.

**Why choose us?**
Here at AMORE we believe that the blockchain is offering incredible benefits and it puts the power in hands of all its users. We think this is the future, and we want to empower users to start enjoying the content they want, the way they want, while using tokens.

If you enjoy the idea of a stress free dating environment where everything is under your control, all while having blockchain support, give AMORE a try today. This is the best way to enjoy some of the most interesting, exciting dating experiences, all powered by state of the art technology.

**Features:**
- 1. Blockchain based platform
- 2. Use tokens for any actions you want
- 3. Great interface, easy to use
- 4. Access thousands of potential dates
Modular Homes - Steps  For Building Them
Tags: homesdesign
Published: 2021-12-22 07:34:11

Do you plan to build a modular home, but you don’t know the specific steps to follow? Worry no more! This article will cover all the steps you need to follow to [build modular homes](https://s3da-design.com/modular-homes-steps-for-building-them/).
Iya Elepo App Part 4 (Extending Aspnet Users Table without using Migrations)
Tags: blazor, radzen, csharp
Published: 2021-12-22 07:33:47

In this video, I show you how to extend aspnet users table without using migrations.

{% youtube xDEsVcaN4Xs %}

Source code and database files can be pulled from {% github benjaminsqlserver/IyaElepoAppLessonFour %}
A11y tips: placeholder can't replace label
Tags: a11y, tips, html
Published: 2021-12-22 07:22:39

What do the [specifications](https://html.spec.whatwg.org/#the-placeholder-attribute) say about the placeholder?

> The `placeholder` attribute represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.

For example:

```
<label for="email-address">Email</label>
<input
  type="email"
  id="email-address"
  name="email-address"
  placeholder="john.doe@example.com"
/>
```

The function of the `placeholder` attribute is very different from that of `<label>`: a label is a title of the form control and it must always be present, the placeholder is just a help hint in certain fields and it may or may not exist. Different elements to fulfill different functions.

So when you are doing the HTML of the forms, remember that: **there is no case where placeholder can replace label**.
javaScript useful method
Published: 2021-12-22 07:19:21

## Javascript string and array function
**toLowerCase**: toLowerCase() method is convert any string to lower case.
**toUpperCase:** toUpperCase() method is convert any sting to upper case
Searching method:
indexOf: 
includes: 
startWith:
endWith: 
Array methods
split: 
slice:
subStr: 
subString: 
concat: 
 join:  
Array searching method
isArray:
indexOf:
includes:
concat:
Discuss about React
Tags: react
Published: 2021-12-22 05:57:10

**1. JSX in React**
Answer: JSX stands for JavaScript XML. It is a syntactic sugar for React.createElement() function. JSX is an inline markup that looks like HTML and gets transformed to JavaScript. It is possible to create HTML elements with JavaScript and place them in specific places of DOM in an organized way with JSX.
 
**2. purpose of useState**
Answer: useState is a hook, The purpose of useState is to declare the state inside the functional component.
In the functional component, we use useState. UseState is used to store data into components.
useState returns 2 values inside an array, one is the initial state and the other one is a function That helps the initial state to assign new values.
 
**3. prop drilling**
Answer: when we want to pass data from one component to another component as a prop But if there is more component between the source and the destination, the props reach the destination through all the components this process is called props drilling.
 
**4. React lifecycle Component**
Answer: React lifecycle method is a sequence of events that happen from birth to death of react component. 
Every component of React goes through a life cycle event.
The lifecycle component is derived into three phases Mounting, Updating, Unmounting which means birth, growth, death
 
**5. Purpose of a custom hook**
Answer: When you have component logic that needs to be used by multiple elements, Then custom hooks need to be created Which is the purpose of a custom hook.
This is like a normal JavaScript function just "use" the function name at the beginning, it's a convention.
ex:
const useWindowsWidth = () => {
  const [isScreenSmall, setIsScreenSmall] = useState(false);

  let checkScreenSize = () => {
    setIsScreenSmall(window.innerWidth < 600);
  };
  useEffect(() => {
    checkScreenSize();
    window.addEventListener("resize", checkScreenSize);

    return () => window.removeEventListener("resize", checkScreenSize);
  }, []);

  return isScreenSmall;
};

 
**6. Virtual dom**
Answer: DOM stands for Document Object Model. The DOM represents the HTML document in the tree structure.
A virtual DOM is a copy of the original DOM which is a lightweight JavaScript object. When the state of an object changes, the virtual DOM only updates that object inside the original DOM. The rest of the object does not change.
 
**14. Higher-order component**
Answer: A higher-order function(HOC) is a function that takes a function as a prop and returns a new function.
ex:
const withCounter = fn => {
  let counter = 0
  return (...args) => {
    console.log(`Counter is ${++counter}`)
    return fn(...args)
  }
}

const add = (x, y) => x + y
const countedSum = withCounter(add)
console.log(countedSum(2,3))