teleren/devto huggingface dataset:
Install tensorflow on M1-chip Macbook
Tags: python, tensorflow, machinelearning
Published: 2022-09-20 13:07:45

20220922 
Translate from https://zhuanlan.zhihu.com/p/474212619 
Environment set
1. delete existed environment
    cd ~
    rm -rf ~/miniforge3
    rm -rf .conda
    rm -rf .condarc
    go into-> .zshrc ，gg->delete PATH setting for miniforge3 

 2. Download Miniforge3_MacOS_ARM64 from github 
      then->
      chmod +x ~/Downloads/Miniforge3-MacOSX-arm64.sh
      sh ~/Downloads/Miniforge3-MacOSX-arm64.sh
      source ~/miniforge3/bin/activate
  
 3. create conda environment
      #(pytorch requires version==3.9)
      conda create -n tf26 python==3.9
      conda create -n tf26 python==3.8

Installing Tensorflow
 1. activate environment
   conda activate tf26

2. install tensorflow process
   1. conda install -c apple tensorflow-deps   
      # if you want to install the specific version->
      conda install -c apple tensorflow-deps==2.6.0 

   2. install tensorflow
      python -m pip install tensorflow-macos    
      # may need to execute pip install torch  ,but not for 
        me.

   3. install tensorflow-metal
      python -m pip install tensorflow-metal
Débuter avec Angular 14: #3 Réagir à un évenement (comme le clique) avec l'Event binding
Tags: angular, typescript, javascript, frontend
Published: 2022-09-20 13:06:35

---
title: Débuter avec Angular 14: #3 Réagir à un évenement (comme le clique) avec l'Event binding 
published: true
description: Dans cette partie, nous allons voir ensemble les bases d'Angular
tags: angular, typescript, javascript, frontend
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

Le data binding presenté juste avant (partie #2) est une sorte d'ordre descendant. J'ai la source de vérité, exemple:
`title = "bonjour"`
L'info redescend et le template affiche `bonjour` si on met `{{ title }}`.

C'est un outils super puissant et qui sera utilisé quasi tout le temps. 

Maintenant, disons que j'ai besoin de réagir à une action d'un utilisateur, appelons-le: Jean-Bilal.

Jean-Bilal arrive sur ma belle application et se dit tiens: "L'application est ouf! elle affiche bonjour et tuuut...."

Maintenant, Jean-Bilal à envie d'interagir avec l'application, donc en dessus du message `bonjour` on va lui mettre un petit bouton:

```html
<h1>{{ title }}</h1>
<button>Clique ici pour voir la magie 🪄</button>
```

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


Jean-Bilal, clique mais il ne se passe rien...

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

Par contre si je remplace le template de `app.component.html` par ceci: 

```html
<button (click)="handle_click()">Clique ici pour voir la magie 🪄</button>
```

Et que je declare une méthode (function) dans mon composant `app.component.ts`

```ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'Bonjour!';

  handle_click() {
    alert('Bonjour!');
  }
}
```


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


Petit teasing pour la prochaine partie qui parlera de programmation Reactive:


Je change juste un bout de ma méthode:


```ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'Bonjour!';

  handle_click() {
    this.title = 'Au revoir!';
  }
}
```



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

Donc pour récapituler, voici en une image la difference entre la Data et l'Event binding:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8v1mehh7y07fffwiiex9.jpg)
How to send data from child component to parent component through <slot> in Svelte
Tags: svelte, tutorial, javascript, webdev
Published: 2022-09-20 12:45:28

_I was using SvelteKit version 1.0.0-next.483 when I wrote this. Things might change due to Svelte being young._


## The problem

So I'm used to throwing data from a parent container to a child component in Svelte but what if I wanted to do the opposite?

Here's the problem I had in my project:

This is the child component called SectionTitle.svelte

```
<div class="section-title">
	<div class="section-icon">
		<slot />
	</div>
	<h2 class="large-text">{sectionTitle}</h2>
</div>
```

This is the parent that uses SectionTitle.svelte

```
<SectionTitle sectionTitle="Book" let:sectionIcon>
	<Books color="red" width="32" height="32" />
</SectionTitle>

```

So my SectionTitle component needs a `<slot>` so that when I import it I can throw in an icon component called `<Books>`. It works fine... until I realized every single icons I put in SectionTitle need those properties: `color="red" width="32" height="32"`

## My solution

I need to somehow let my child has its own default props value to release its parents from pain

SectionTitle.svelte

```
<script>
	export let sectionTitle = '';

	let sectionIcon = {
		color: 'var(--primary-600)',
		height: 32,
		width: 32,
	};
</script>

<div class="section-title">
	<div class="section-icon">
		<slot sectionIcon={sectionIcon} />
	</div>
	<h2 class="large-text">{sectionTitle}</h2>
</div>

```

Then I import and used SectionTitle.svelte like this:

```
<SectionTitle sectionTitle="UI + UX" let:sectionIcon>
	<FigmaLogo {...sectionIcon} />
</SectionTitle>

<SectionTitle sectionTitle="Book" let:sectionIcon>
	<Books {...sectionIcon} />
</SectionTitle>
```

So now I have some default values for my icons, before I even know what icon components to put inside the `<slot>`


I'm still learning Svelte. If you have any suggestions, please comment down below.
CSS Display Properties
Published: 2022-09-20 12:42:34

1) Block :- It occupies all the space of the container and a line above and below to it.It always start with new line
2)Inline :- It occupies the space it need and it doesn't need to start in new line but it can`t support to adjust the height and width of the content
3)Inline-Block :- It is similar to Inline property , unlike inline property it supports to adjust the height and width of the content
4)None :- It display nothing,simply it removes the content from displaying.


                             --Thank You--
Writing test automation framework - complete course
Tags: testautomation, tutorial, selenium, architecture
Published: 2022-09-20 12:41:41

Last week I published some work on test automation architecture. It seems there are not enough good materials on the subject. Most of the materials don't teach how to make a framework and concentrate on tools, such as selenium instead.

I think it is a big mistake - if you concentrate on the framework instead of selenium you will be able to create a test automation framework for any system and type of interface, including:

1. WEB UI
2. Mobile
3. API

So to address this I am creating my own course on test automation framework architecture.

I am planning to publish work in progress on LeanPub (which will be available for the smallest possible price of 5 dollars while not completed) - feel free to check it out - while the course is in progress you can comment on the course content so the course becomes what you want it to be!

When the course is finally done it will be available both on LeanPub and Udemy

LeanPub link: https://leanpub.com/c/writingtestautomationframeworkfromscratch
Clean Code Tip: Don't use too many method arguments
Tags: cleancode
Published: 2022-09-20 12:38:37


Many times, we tend to add too many parameters to a function. But that's not the best idea: on the contrary, when a function requires too many arguments, grouping them into coherent objects helps writing simpler code.

Why? How can we do it? What are the main issues with having too many params? Have a look at the following snippet:

```cs
void SendPackage(
    string name, 
    string lastname, 
    string city, 
    string country,
    string packageId
    ) { }
```

If you need to use another field about the address or the person, you will need to add a new parameter and update all the existing methods to match the new function signature.

What if we added a *State* argument? Is this part of the address (*state = "Italy"*) or something related to the package (*state = Damaged*)?

Storing this field in the correct object helps understanding its meaning.

```cs
void SendPackage(Person person, string packageId) { }

class Person { 
    public string Name { get; set; }
    public string LastName { get; set; }
    public Address Address {get; set;}
}

class Address { 
    public string City { get; set; }
    public string Country { get; set; }
}
```

Another reason to avoid using lots of parameters? **To avoid merge conflicts**.

Say that two devs, Alice and Bob, are working on some functionalities that impact the `SendPackage` method. Alice, on her branch, adds a new param, `bool withPriority`. In the meanwhile, Bob, on his branch, adds `bool applyDiscount`. Then, both Alice and Bob merge together their branches on the main one. What's the result? Of course, a conflict: the method now has two boolean parameters, and the order by which they are added to the final result may cause some troubles. Even more, because every call to the `SendPackage` method has now one (or two) new params, whose value depends on the context. So, after the merge, the value that Bob defined for the `applyDiscount` parameter might be used instead of the one added by Alice.

## Conclusion

To recap, why do we need to reduce the number of parameters?

* to give context and meaning to those parameters
* to avoid errors for positional parameters
* to avoid merge conflicts

👉 Let's discuss it [on Twitter](https://twitter.com/BelloneDavide/status/1347591898525941765 "Original post on Twitter") or on the comment section below!

🐧
The G gap;
Tags: life, generation, everyday
Published: 2022-09-20 12:34:35

"I must study politics and war so that my sons may have liberty to study mathematics and philosophy.

My sons ought to study math and philosophy, geography, natural history, naval architecture, navigation, commerce and agriculture, in order to give their children a right to study painting, poetry, music, architecture, statuary, tapestry and porcelain.
"
John Adams.
Welcome Newland Software to join the openGauss community
Published: 2022-09-20 12:34:13

Fujian Newland Software Engineering Co., Ltd. (hereinafter referred to as Newland Software) signed CLA (Contribution License Agreement, Contribution License Agreement) and officially joined the openGauss community.

Newland Software is a member of Newland Technology Group and a holding subsidiary of Newland Digital Technology Co., Ltd. It has 20 years of experience in integrated design, software R&D and technical services of large-scale IT systems. Newland Software is a national innovative enterprise, a key software enterprise within the national planning and layout, and a high-tech enterprise in Fujian Province. The company takes cloud computing, big data, the Internet of Things, and AI as the core technology, focusing on the main directions of operators' digital and intelligent construction, big data operation services, and comprehensive information solutions for government and enterprise customers, closely following the trend of industry technology development, Helping the development of the national digital economy, we are committed to becoming an industry-leading digital asset construction and operation service provider!

This time, Newland Software will join hands with the openGauss community to customize the company's own commercial database release version based on the powerful core capabilities of the openGauss database, and provide a hybrid engine, MOT engine, multi-mode capability, full-scenario AI, observability, and reliability. Extensive cooperation in other aspects to jointly empower the upgrade and transformation of relational databases.
About HTMLeer.dev API
Tags: html, puppeteer, handlebars, htmleer
Published: 2022-09-20 12:33:44

[HTMLeer](https://htmleer.dev) provides REST API for your next application, which will make it easier for you to generate pdfs and images without worrying much about architecture, cost and scaling issues.

## Features

- generating pdf/image based on html input
- saving generated file on s3
- streaming a file back to the client without saving on s3
- possibility to use options provided by puppeteer
- possibility to use handlebars syntax
- use of dynamic arguments
- management panel for your api keys, allowed origins, saved files and subscription status

## How it works?

- client creates his account on [HTMLeer management panel](https://app.htmleer.dev)
- client sets up new api key
- client uses [HTMLeer documentation](https://api.htmleer.dev) and makes his request to the api with already created api key
- api in response returns buffer of the file or object with link to saved file

## Pricing

There are free 100 API generations each month, it should be enough for small applications.

You can also buy additional API generations, which does not have any use time limitations:
**1000 generations**: 5$ + tax
**5000 generations**: 15$ + tax
**25000 generations**: 50$ + tax
**100000 generations**: 100$ + tax

Thanks for reading!
Meet updated Delphi DAC with RAD Studio 11 Alexandria Release 2 and Lazarus 2.2.2 Support
Tags: dac, delphi
Published: 2022-09-20 12:33:41

---
title: Meet updated Delphi DAC with RAD Studio 11 Alexandria Release 2 and Lazarus 2.2.2 Support 
published: true
description: Devart announces new versions of Delphi DAC with the support of RAD Studio 11 Alexandria Release 2 and Lazarus 2.2.2.
tags: dac, delphi
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---
Devart, a recognized vendor of world-class data connectivity solutions for various technologies and frameworks, presented a new release of [Delphi DAC](https://www.devart.com/dac.html?utm_source=devto&utm_medium=referral&utm_campaign=pr_dac_20.09.2022). The major update of these products is the support of **RAD Studio 11 Alexandria Release 2 and Lazarus 2.2.2**.

**The release also includes other significant improvements:**
- Data Access Components support for iOS 15 and Android 12.
- The CloneCursor method for Query and Table components allowing for sharing the data between datasets is now available for Delphi DAC.
- Improved export to XML performance.
- In SQLite, the Direct mode is based on version 3.39.2 of the SQLite engine.
- SDAC and UniDAC now support: 
*Microsoft OLE DB Driver for SQL Server 9;
*Azure AD authentication support for the Microsoft OLE DB provider;
*Always On availability group in the Direct mode;
*connection to the Azure database by using the "Redirect" connection policy in the Direct mode.
- PostgreSQL and UniDAC now support:
*PostGIS
*Improved TimeZoneOffset for TPgTimeStamp
*Improved Truncate method of the TPgLargeObject class
- Support for NexusDB 4.60.01 and setting Remote Thread Priority in UniDAC. 
- Support for VisualFoxPro CANDIDATE indexes in the DBF provider.
- The standard collations in a SQL statement in the VirtualQuery component.

To learn more about the recent release and download new products, visit: 
https://blog.devart.com/new-in-delphi-dac-support-for-rad-studio-11-alexandria-release-2-and-lazarus-2-2-2.html

**Delphi Data Access Components** allow the developers to create multi-platform applications in Embarcadero RAD Studio, Delphi, C++Builder, Lazarus, and Free Pascal on Windows, Linux, macOS, iOS, and Android, for both 32-bit and 64-bit platforms. They are terrific tools that provide direct access to popular databases such as Oracle, Microsoft SQL Server, MySQL, InterBase, Firebird, PostgreSQL, SQLite, as well as clouds - Salesforce, FreshBooks, SugarCRM, and many others. Moreover, we offer a mature ORM framework for Delphi.

**About Devart** 
 
Devart is one of the leading developers of database tools and administration software, ALM solutions, data providers for various database servers, data integration, and backup solutions. The company also implements Web and Mobile development projects. 

For additional information about Devart, visit https://www.devart.com/.
Welcome Aokan Technology to join the openGauss community
Published: 2022-09-20 12:30:50

Aokan Technology signed CLA (Contribution License Agreement, Contribution License Agreement) and officially joined the openGauss community.

Aokan Technology is an industry-leading supplier of intelligent video solutions, focusing on the two major industry markets of smart city and industrial manufacturing, driven by self-developed video + AI technology, based on the AllCam intelligent video enablement platform, and united with leading enterprises in the industry Create advanced scene-based intelligent video solutions such as "one network and unified management" video cloud for urban governance, operator industry video cloud, smart security community, smart industrial park, industrial safety production, etc. 
The value of life cycle data helps the digital and intelligent transformation of government and enterprises.

After Aokan Technology joins openGauss, it will make full use of the openGauss high-performance, high-reliability, high-security, and easy-to-operate open source relational database management system. Cooperation, focusing on refined operational scenario solutions. At the same time, continue to build openGauss enterprise-level database capabilities, jointly promote the development of the openGauss ecosystem, and promote the commercial implementation and promotion of openGauss. Driven by the dual-wheel drive of artificial intelligence + video technology, it focuses on the digital and intelligent transformation of government and enterprises, and provides high-quality intelligent video solutions. programs and services.
HackSquad 2022 - Contribute, Meet, Participate, and win SWAG 🤯
Tags: webdev, beginners, opensource, architecture
Published: 2022-09-20 12:30:50

With the fantastic atmosphere of Hacktoberfest, we have decided to create Hacksquad. Hacksquad is here to enhance your **Swag**, meet with more community members and participate in workshops from our great sponsors.

![sponsors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r339s38y82ool9atuo0c.png)

HackSquad allows contributors to contribute code **as a team** instead of a single contributor. Engage the community in a friendly competition over the month of October.

[SIGN UP TO HACKSQUAD 2022, AND JOIN A TEAM 🚀](https://hacksquad.dev)

## How does it work?
Register to the HackSquad using your GitHub, Join a team or get assigned to a **random team**. Each day we will calculate every team member approved PR and sum them all together. By the end of the event, the top 300 winners will win awesome swag! around ~60 teams.

![Swag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hlxy4bujkak9wzhmqgmm.png)

## What can you expect from the event?
- Meet new community members
- Code contribution, dah 😎
- Participate in awesome workshops such as: How to contribute code, Going over good first issues, Engineering best practices, Solving PRs together.
- Win swag

[SIGN UP TO HACKSQUAD 2022, AND JOIN A TEAM 🚀](https://hacksquad.dev)

**You can sign-up for both Hacktoberfest and HackSquad**

You can also find the full source-code of HackSquad here:
https://github.com/novuhq/hacksquad-website

Let's crash it 🚀

![Party](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/10lybwxpyas6xmiohohn.gif)


**P.S** If you want to create a workshop for the HackSquad community during October email me at: nevo@novu.co

**P.P.S** Please let me know in the comments what kind of events you are looking for, and additional activities 🚀
Database (openGauss) Statistics Introduction
Published: 2022-09-20 12:28:24

What are statistics? 

The CBO optimizer needs to select the way to query data according to the data in the table/index. Due to the large amount of data in the table, it is impossible to count the data amount and data distribution in the table in real time every time the query is executed, so regular analysis is required. Data, save the data distribution of tables and indexes to the data dictionary for the optimizer to use, this is statistical information. 

openGauss is an optimal execution plan generated based on cost estimates. The optimizer needs to estimate the number of rows and the cost based on the statistics collected by analyze, so the statistics play a crucial role in the estimate of the optimizer's row number and cost.

Collect global statistics through analyze, including: relpages and reltuples in the pg_class table; stadistinct, stanullfrac, stanumbersN, stavaluesN, histogram_bounds, etc. in the pg_statistic table.



When to collect statistics

⚫ It is recommended to routinely execute the ANALYZE statement on a table or the entire database to update statistics after performing bulk insert/delete operations. 

⚫ For intermediate tables generated in batch scripts or stored procedures, it is also necessary to explicitly call ANALYZE after data generation is complete. 

⚫ For cases where multiple columns in the table are correlated, and the query has conditions or grouping operations based on these columns at the same time, you can try to collect statistics on multiple columns so that the query optimizer can more accurately estimate the number of rows and generate more Effective execution plan.



How to collect statistics

⚫ The ANALYZE statement can collect statistical information related to the table contents in the database, and the statistical results are stored in the system table PG_STATISTIC. The query optimizer uses these statistics to generate the most efficient execution plan. 

⚫ Operation steps

Update statistics for a single table. 
     ANALYZE tablename;
Update database-wide statistics. 
     ANALYZE;
Collect multi-column statistics for the col_1 and col_2 columns of the tablename table. 
     ANALYZE tablename (col_1, col_2);
Add the multi-column statistics declaration of the col_1 and col_2 columns of the tablename table. ANALYZE tablename; ANALYZE; ANALYZE tablename (col_1, col_2); ALTER TABLE tablename ADD STATISTICS (col_1, col_2);
     ALTER TABLE tablename ADD STATISTICS (col_1, col_2);
useState() in React
Tags: beginners, react, javascript, programming
Published: 2022-09-20 12:16:51

React has hooks which allow programmers to access features of React without having to use classes. One of these hooks is called useState(). 

The first step to applying useState is by importing the hook to the file of your choosing, as seen in the example below. 

import { useState } from "react"; 

The next step is to initialize the useState hook that was just imported by calling it in our function component. useState will accept an initial state and then return two values: the current state and a function that updates the state. 

import { useState } from "react";

function Counter() {
   const [count, setCount] = useState(0);
}

The first value here is **count**, which is our current state. The second value is **setCount**, a function which will update state based on the user input. 

Finally, we set the initial state to a number value with useState(0). The parentheses can hold a string, boolean, arrays, objects, or any combination of these values. 

To make this useState functional, we can add a click event and a button to make this work. 

import { useState } from "react";

function Counter() {
   const [count, setCount] = useState(0);
}

return ( 
   <div> 
     <button onClick={() => setCount(count + 1)}> Click! 
     </button>
   </div>
  );
}

This code creates a button that holds an initial state of 0 and will count upward from that value of 0 every time the button is clicked. 

**Resources**

https://reactjs.org/docs/hooks-state.html

https://www.w3schools.com/react/react_usestate.asp