teleren/devto huggingface dataset:
03.10 - State & Props - Send counter data to parent component (functional components)
Tags: react, webdev, tutorial, programming
Published: 2022-12-26 01:44:52

App preview:
![The way the app will look like](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2dpgjur60nnv3z09txb4.gif)

Project files:
![An image of project file structuren](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/py9or6dfhpporf84jwbx.png)



<hr/>
src/App.js
```react
import './App.css';
import ParentComponent from './components/ParentComponent';


function App() {
  return (
    <div className="App">
        <p><b>App.js</b> |function|</p>
        <ParentComponent/>
    </div>
  );
}

export default App;
```
<hr/>
src/App.css
```css
.App{
  background-color: lightskyblue;
  padding: 10px 10px;
}

p{
  margin-top: 6px; 
  margin-bottom: 12px 
}
```
<hr/>
<hr/>
src/components/ParentComponent.jsx
```react
import React, { useState } from "react"
import ChildComponent from "./ChildComponent"
import "./ParentComponent.css"

function ParentComponent(){
    const [count, setCounter] = useState(0);

    const updateCounterList = () => {
        setCounter(count + 1)
    }

    return(
        <div className="ParentComponent">
            <p><b>ParentComponent.jsx</b> |function|</p>
            <ChildComponent updateCounterList={()=>{updateCounterList()}}/>
            <p>Click Counter value is {count}.</p>
        </div>
    )
}

export default ParentComponent
```
<hr/>
src/components/ParentComponent.css
```css
.ParentComponent{
    background-color: lightsalmon;
    padding: 10px 10px;
    margin: 10px 10px;
}

h2{
    margin-top: 0px; 
    margin-bottom: 6px 
}
```
<hr/>
<hr/>
src/components/ChildComponent.jsx
```react
import React from "react";
import "./ChildComponent.css"

function ChildComponent (props) {

    const handleClick = () => {
        props.updateCounterList();
    }

    return (
        <div className="ChildComponent">
            <p><b>ChildComponent.jsx</b> |function|</p>
            <button onClick={()=>{handleClick()}}>Add 1</button>
        </div>
    );
}

export default ChildComponent;
```
<hr/>
src/components/ChildComponent.css
```css
.ChildComponent{
    background-color: lightgreen;
    padding: 10px 10px;
    margin: 10px 10px;
}

h3{
    margin-top: 0px; 
    margin-bottom: 6px 
}
```
How to remove old service worker?
Tags: serviceworker, webdev, javascript, nextjs
Published: 2022-12-26 05:10:22

Recently, I revamped my blogging site from [Gatsby](https://www.gatsbyjs.com/) to [NextJS](https://nextjs.org/). 

My new personal site was built from scratch where I focused more on the design and migrating the contents from the old to new one.

All set, so hosted the site on [Vercel](https://vercel.com/) and modified the DNS settings to map the domain `bharathvaj.me`.

To my surprise, I was still seeing the old one. After scratching my head a bit then figured out I completely forgot to handle the service worker. The service worker cached my old site and served it as it should be but unfortunately not for my case.

If you are someone like me, here is the solution for you that worked for me.

**Step 1**

Replace everything about your previous ServiceWorker with the following code
```js
/public/sw.js

/**
 * Self-Destroy service worker
 */

self.addEventListener('install', function(e) {
  self.skipWaiting();
});

self.addEventListener('activate', function(e) {
  self.registration.unregister()
    .then(function() {
      return self.clients.matchAll();
    })
    .then(function(clients) {
      clients.forEach(client => client.navigate(client.url))
    });
});
```

**Step 2**

Just, Deploy your project! 🎉

### How it works?

This code will listen for two major events,

* **Install Event** which is fired when `ServiceWorkerRegistration` acquires a new worker. When fired, we are forcing the current waiting service worker to become an active service worker.

* **Activate Event** which is fired when the service worker becomes the active worker for a page. When the activate event is fired, the service worker will unregister itself using the `self.registration.unregister()` method.


**Caveat** New service worker will get enabled only for the newly opened tabs and not the existing ones. If there are any existing open tabs, then they will still reflect old content.

Happy hacking!
How to make a clock Android app in Android Studio?
Tags: beginners, tutorial, android, community
Published: 2022-12-26 05:06:54

To create a clock app in Android Studio, you can follow these steps:

- Open Android Studio and create a new project with an Empty Activity.
- In the main activity layout file (activity_main.xml), add a TextView element to display the current time.
- In the MainActivity.java file, you can use the Calendar class to get the current time and display it in the TextView. You can do this in the onCreate() method, like this:

```
Calendar calendar = Calendar.getInstance();
SimpleDateFormat simpleDateFormat = new SimpleDateFormat("HH:mm:ss", Locale.getDefault());
String currentTime = simpleDateFormat.format(calendar.getTime());
TextView textView = findViewById(R.id.text_view);
textView.setText(currentTime);

```

- To update the time in the TextView every second, you can use a Handler and a Runnable to run a piece of code every second.


```
final TextView textView = findViewById(R.id.text_view);
final Handler handler = new Handler();
final Runnable runnable = new Runnable() {
    @Override
    public void run() {
        Calendar calendar = Calendar.getInstance();
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("HH:mm:ss", Locale.getDefault());
        String currentTime = simpleDateFormat.format(calendar.getTime());
        textView.setText(currentTime);
        handler.postDelayed(this, 1000);
    }
};
handler.post(runnable);

```

- To display the date in addition to the time, you can add another TextView element and update it in the same way as the time TextView.
- To test your app, click the Run button in the toolbar. Choose a device or emulator to run the app on and click "OK."

I hope this helps! Let me know if you have any other questions. [Reach me](https://quokkalabs.com/android-app-development) if you have ideas and want to develop apps.
Yet Another Newsletter LOL: Too much turkey
Tags: newsletter, rust, yearinreview
Published: 2022-12-26 05:03:39

<p>I&rsquo;m still off for the holidays, but just dropping one last newsletter for the year. It&rsquo;s a little shorter because I&rsquo;m recharging for 2023. 😎 The newsletter will resume in mid-January. With that, another week, another newsletter. Let’s get to it!</p>
<h2>Around the Web</h2>
<ul>
<li>I love this <a href="https://codepen.io/michellebarker/full/WNKbQOO">pixel art studio</a> from Michelle Barker! Go draw something fun and grab the CSS it generates and pop it on your site or blog!</li>
<li>I&rsquo;ve been learning Rust on and off as work has been keeping me pretty busy. I&rsquo;ve gotten the updated Rust book for my Kobo which is great, but I came across an awesome YouTube channel recently called <a href="https://www.youtube.com/@letsgetrusty?utm_source=nickytonline&amp;utm_medium=email&amp;utm_campaign=yet-another-newsletter-lol-too-much-turkey">Let's Get Rusty</a>.

I love the way they break things down. I recently caught the episode on ownership in Rust and it&rsquo;s 🔥! Check it out!</li>
</ul>
{% embed https://youtu.be/VFIOSWy93H0&quot;&gt;https://youtu.be/VFIOSWy93H0 %}
<h2>Fun Stuff</h2>
<p>Enjoy your downtime capybaras! I know I will!</p>
{% embed https://twitter.com/Johnny_suputama/status/1605583571233648640 %}
<h2>Shameless Plugs</h2>
<p>No shameless plugs aside from that time of year. The Year in Review blog post. It&rsquo;s been a year of change for me. I left my role as the lead frontend at Forem/dev.to and took the plunge into all things frameworks at Netlify! Grab some popcorn and buckle up!</p>

{% embed https://dev.to/nickytonline/my-2022-year-in-review-a72 %}

If you liked this newsletter, you can [subscribe](https://www.iamdeveloper.com/pages/newsletter/) or if RSS is your jam, you can also [subscribe via RSS](https://www.iamdeveloper.com/newsletter.rss).
(Best Guide) How to make a simple iOS app that shows time and date?
Published: 2022-12-26 04:54:13

To create a simple iOS app that displays the current time and date, you will need to use the Xcode development environment and the Swift programming language. Here are the steps you can follow:

- Open Xcode and create a new Single View App project.
- In the project navigator, select Main.storyboard to open the user interface designer.
- Drag a Label object from the Object library onto the view controller.
- Double-click the label and use the Attributes inspector to change the text to "Time and Date".
- Drag a second Label object onto the view controller and position it below the first label.
- Control-drag from the second label to the view controller and choose "New outlet" from the pop-up menu. Name the outlet "timeLabel".
- Open the Assistant editor by clicking the Assistant button in the Xcode toolbar.
- Control-drag from the view controller to the Assistant editor and choose "New Action" from the pop-up menu. Name the action "updateTime".
- In the updateTime() method, add the following code to get the current time and date:

```
let dateFormatter = DateFormatter()
dateFormatter.dateStyle = .medium
dateFormatter.timeStyle = .medium
let currentTime = dateFormatter.string(from: Date())
timeLabel.text = currentTime

```

- To update the time and date every second, you can use a Timer object. Add the following code to the viewDidLoad() method to create and start the timer:

```
let timer = Timer.scheduledTimer(timeInterval: 1.0, target: self, selector: #selector(updateTime), userInfo: nil, repeats: true)

```
Run the app in the simulator or on a device to see the current time and date displayed in the second label.
I hope this helps! Let me know if you have any questions. You can reach to [iOS app developers](https://quokkalabs.com/ios-app-development) for interesting projects.
Sneak Peek: Doris Summit 2022 Program Committee
Tags: opensource, database, architecture, cloud
Published: 2022-12-26 04:50:52


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

Hosted by SelectDB and co-organized by Baidu Cloud and Tencent Cloud, the first summit of the Apache Doris community - Doris Summit 2022 will be officially held online from January 6th to January 7th, 2023. Up to now, the summit has collected 35+ speech topics. In order to ensure that the topics are reviewed fairly, justly and professionally, we have invited 14 well-known experts in the open-source to form the Doris Summit 2022 Program Committee. Special thanks to the members of the program committee, who are:


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

**About Doris Summit**

Doris Summit is an annual event of Apache Doris community, which gathers community members and experts in the field of real-time analysis from all over the world. In the conference, the community will take an overlook on the past developments and a glimpse into the future trends. In addition, technical talks from software leaders push the boundaries and share their ideas as the early adopter of Apache Doris. 

Join us and spend time with global peers and become part of Apache Doris community. We are looking forward to seeing you at the conference!

Sign UP now: 
http://hdxu.cn/PpMyh

**About SelectDB**

SelectDB is an open-source technology company dedicated to providing the Apache Doris community with a team of full-time engineers, product managers and fully technical support. Meanwhile, SelectDB is willing to prosper the open-source community ecology and create an international industry standard in the field of real-time analytical data warehouses. Based on the new generation of cloud-native real-time data warehouse developed by Apache Doris, SelectDB runs on multiple clouds and provides users and customers with the feature of out-of-the-box.
What Should I know for being advance angular dev
Tags: webdev, beginners, programming, angular
Published: 2022-12-26 04:50:09

I try to ask chatGpt for this situation,
and I got the information for that questions

To be an advanced Angular developer, you should have a strong understanding of the following concepts:

1. Components: Components are the building blocks of an Angular application. They are responsible for displaying content and handling user interactions.

2. Services: Services are used to encapsulate business logic and provide a way to share data and functionality across different components.

3. Routing: Routing allows you to define the different URLs that your application supports and the corresponding component that should be displayed for each URL.

4. Forms: Angular provides a powerful framework for building forms, including support for reactive forms and validation.

5. Dependency injection: Dependency injection is a way to inject a service or other object into a component or service. It is an important design pattern in Angular and allows for better separation of concerns and testability.

6. Observables: Observables are a way to manage asynchronous data streams in Angular. They are used extensively in Angular to handle HTTP requests and other asynchronous events.

7. Pipes: Pipes are a way to transform data in templates. They can be used to format dates, currency, and other types of data.

8. Modules: Modules are a way to organize your application and manage dependencies. They are used to define the different features of your application and provide a way to reuse code across multiple components.

9. Angular CLI: The Angular CLI is a command-line interface for Angular that makes it easy to create, build, and deploy your application.

10. Testing: Testing is an important part of the development process in Angular. You should be familiar with different types of tests, such as unit tests, integration tests, and end-to-end tests, and have experience writing and running tests for your applications.
Four Ws of Serverless Computing - who, what, when, and why
Tags: webdev, javascript, jamstack, serverless
Published: 2022-12-26 04:45:00

Serverless computing offers many advantages over traditional cloud-based or server-centric infrastructure.

Who uses Serverless Computing?

Developers

For many developers, serverless architectures offer greater scalability, more flexibility, and quicker time to release, all at a reduced cost.

How’s that?

Although serverless computing does take place on servers, developers never have to deal with the servers, and the vendor manages them. Thanks to that, companies can reduce the investment, which lowers expenses, and it also frees up developers to create and expand their applications without being constrained by server capacity. 

Companies

Companies using serverless applications can speed up the development of new services. Serverless allows companies to run their applications in any cloud, hybrid, or multi, and stay in control with the help of cloud management. Companies can quickly make changes, meet customer needs, and benefit from the latest trends in innovative solutions. Nowadays, many massive companies have changed their strategy to serverless. The two most outstanding examples of companies that improve their success using serverless computing are Coca-Cola and Netflix.

What is Serverless Computing?

Serverless doesn’t mean there is no server. Let there be no confusion.

Instead, serverless computing is an event-driven application design and deployment paradigm where all the computing resources are provided as scalable cloud services.


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

Serverless computing is a model of cloud computing execution wherein the cloud providers dynamically manage the resource allocation of the servers. In simple terms, serverless computing is a process of backend services provided on an as-used basis.

The two most significant benefits of serverless computing:

- developers can focus on the business goals of the code they write rather than on infrastructural questions
- organizations only pay for the computing resources they Manage complex requests indeed used in a very granular fashion, rather than buying physical hardware or renting cloud instances month by month

Why should you choose Serverless Computing?

The server-centric and cloud-based infrastructure is the traditional way of computing, while serverless offers several benefits.

Its main advantages are:

- It scales with demand automatically
- It eliminates server maintenance
- It’s event-driven, meaning the code is invoked only when triggered by a request
- It significantly reduces server costs because you don’t pay for idle
- Less administration (if the cloud provider owns the platform, they are the one dealing with administration). (https://thebcms.com/blog/four-ws-serverless-computing-who-what-when-why)
Need Career Guidance.
Published: 2022-12-26 04:42:15

I am a Web Developer with 1 year of experience. I want to further flourish my career by either learning Blockchain, DevOps, and Data Science. I have some past experience on ML so Data Science won't be a entire different pathway for me. Please can you suggest some pros and cons regarding these fields, like demand, job security, money etc. Plus some general advice regarding building portfolio would be delightful. Thanks in advance!
Algorithm for x-mass
Tags: beginners, tutorial, rust
Published: 2022-12-26 04:40:23

When I started learning Rust (2021.11.03), the first thing I encountered was printing a square and a triangle. I was confused at first. Then, when I understood how to write simple algorithms, I decided to write an algorithm for printing a Christmas tree. And in January 2022 I got this:
![simple](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wlw252wlzbmirt8x7geb.png)
This is the algorithm
```rust
use std::thread;
use std::time::Duration;

fn main() { tannenbaum(7) }

fn tannenbaum(x: i32) {
	let mut top = 0;
	let mut i = 1;

	while top < x/2 {
		for _empty_space in 0..2     { print!(" ") }
		top += 1
	}
	
	if x%2 == 1                      { print!(" ") }
	
	println!("A");

	while i <= x {
		for _empty_space in 0..(x-i) { print!(" ") }
		for _left_side   in 0..i     { print!("L") }
		for _middle      in i..i+1   { print!("M") }
		for _right_side  in 0..i     { print!("R") }
		
		println!();
		
		thread::sleep(Duration::from_millis(120));
		i += 1
	}
	
	for _stem in 0..(x-1)            { print!(" ") }
	
	println!("ШШШ");
}
```
Try to colorize it using
```rust
[dependencies]
colored = "2"
```

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

Happy Holidays
Angular interactive and reactive
Tags: angular, webdev, programming, tutorial
Published: 2022-12-26 04:37:52

Angular uses reactive programming principles to build interactive and responsive web applications. Reactive programming is a programming paradigm that focuses on the use of streams of data that emit values over time, and the use of operations that can be performed on those streams to create new streams of data.

In Angular, reactive programming is implemented using the
``` ReactiveFormsModule and the  FormControl, FormGroup, and FormArray classes ``` , which provide an API for working with forms in a reactive way. These classes allow you to create and manipulate form controls and form groups, and to bind them to templates in a declarative way.

Reactive programming in Angular allows you to build forms that are more interactive and responsive, as you can use the FormControl and FormGroup classes to track the state of the form and the values of the form controls in real-time, and to update the template and the component class whenever the form state changes.

On the other hand, Angular also provides a template-driven approach to building forms, which is implemented using the FormsModule and the ngModel directive. This approach allows you to build forms by adding directives to the template and binding the form controls to the template using the ngModel directive. This approach is simpler and easier to use for basic forms, but it is less powerful and flexible than the reactive approach, as it does not provide the same level of control over the form state and the form controls.
Express State Management of the Frontend Framework with Plain Javascript
Tags: javascript, beginners, react, vue
Published: 2022-12-26 03:24:06

# Overview

There was a very valuable article that expressing React features with jQuery, but now it is no longer invisible, so I recapitulate it with my own interpretation.

This article focuses on State Management, which is one of the important concepts in Frontend Frameworks (React, Vue.js). Note that Plain Javascript is used not jQuery.

# Original code

```html
<span id="colored-counter">0</span>
<input id="color" placeholder='#000'></input>
<input type="button" id="count_button" value='add' />

<script>
  document.querySelector("#color").onkeyup = function() {
    document.querySelector('#colored-counter').style.color = this.value;
  }

  document.querySelector("#count_button").onclick = function() {
    const oldValue = document.querySelector('#colored-counter').innerHTML;
    const newValue = 1 + Number(oldValue);
    document.querySelector('#colored-counter').innerHTML = newValue;
  }
</script>
```

If you want it to work, copy and paste should work.
The functions are as follows.

- Pressing a button increments the count
- Entering a color code changes the color of the count

I will rewrite this using the State Management approach.

# Code with the State Management approach

```html
<span id="colored-counter">0</span>
<input id="color" placeholder='#000'></input>
<input type="button" id="count_button" value='add' />

<script>
  let state = {color: '', value: 0};

  function setState() {
    document.querySelector('#colored-counter').style.color = state.color;
    document.querySelector('#colored-counter').innerHTML = state.value;
  }

  document.querySelector('#color').onkeyup = function () {
    state.color = this.value;
    setState();
  }

  document.querySelector('#count_button').onclick = function () {
    state.value++;
    setState();
  }
</script>
```

The functionality is the same as in the code above.
What I want to express here is the follows.

- Avoid manipulating the DOM directly in various codes (gather `.innerText` and `.style`, etc in one place)
- Manage the DOM state with a Hash variable.
- The screen rendering will be updated based on the variable.

This concept should be roughly the same for both React and Vue.js.

This is an introduction to a concept that I want people who can't or don't want to use Frontend Frameworks to know about. And it is not simply "jQuery and Plain JS can do it too, so let's do it" (although it is not absolutely prohibited to incorporate it in jQuery or Plain JS).
Watch This Before Starting Career in Software Testing : State of Software Testing Report [LIVE]
Tags: webdev, programming, beginners, tutorial
Published: 2022-12-26 03:21:13

We are going to discuss about the State of Software Testing Report.  Are you starting Career in Software Testing then Must watch this report LIVE.

🔥 Download Report https://sdet.live/sot2020

{% embed https://youtu.be/wqmD0aKiDNo %}


It has Some interesting facts about the Software Testing career and What are the trends in Software Testing.

JOIN Me LIVE.

✅ Want to Switch from Manual to Automation Testing  - https://sdet.live/learn


✅ Resources for Selenium Training with Custom Framework.
🔥🔥 https://sdet.live/30dayselenium

🔥🔥 https://sdet.live/2WlO


✅ https://www.facebook.com/groups/thete...


✅ If you are new consider subscribing and follow day by day to become an Automation Testing expert in 30 days.