teleren/devto huggingface dataset:
How to Host your personal portfolio Website on Netlify?
Tags: webdev, netlify, beginners, tutorial
Published: 2022-12-18 08:43:34

To host a website on Netlify, you will need to follow these steps:

Sign up for a Netlify account. You can do this by visiting the Netlify website and clicking on the "Sign Up" button.

Connect your Git repository. Netlify can deploy sites from a variety of Git providers, including GitHub, GitLab, and Bitbucket. You will need to authorize Netlify to access your repository and select the repository that contains your site's code.

Configure your build settings. Netlify will automatically detect the build command and output directory for your site, but you can override these settings if needed.

Deploy your site. Once you have configured your build settings, click the "Deploy site" button to deploy your site to Netlify. The deployment process may take a few minutes, depending on the size of your site.

Set up a custom domain (optional). If you want to use a custom domain for your site, you can do so by adding a custom domain to your Netlify account and updating your DNS settings to point to the Netlify servers.

Here's My portfolio Website which I created using React and added animation using Framer motion. Have a look - [https://avinash-kumar.netlify.com/](https://avinash-kumar.netlify.com/)

That's it! Your site should now be live on the web, hosted by Netlify. If you have any questions or run into any issues along the way, don't hesitate to reach out to the Netlify support team for assistance.
Kotlin Smell 13 - Companion Object Functions
Tags: kotlin, codesmells, cleancode, programming
Published: 2022-12-18 12:54:51

---
title: Kotlin Smell 13 - Companion Object Functions
published: true
date: 2022-12-18 08:30:44 UTC
tags: kotlin,codesmells,cleancode,programming
canonical_url: https://yonatankarp.com/kotlin-smell-13-companion-object-functions
---

> **TL;DR:** Companion object functions are globally available and cannot be replaced for testing.

## Problems

* Coupling
    
* Testability
    
* Protocol Overloading
    
* Cohesion
    

## Solutions

* Honor the Single Responsibility Principle by creating an instance for a class whenever possible.
    
* Delegate the method to the instance, if feasible.
    
* Create stateless objects instead of referring to them as "helpers."
    

## Examples

* Static class initializers
    
* Static class methods
    
* Static attributes
    

## Sample Code

### Wrong

```kotlin
class DateStringHelper {
    companion object {
        private val formatter = 
            DateTimeFormatter.ofPattern("yyyy-MM-dd")

        fun format(date: OffsetDateTime): String  =
            formatter.format(date)
    }
}

fun main() {
    print(DateStringHelper.format(OffsetDateTime.now()))
}
```

### Right

```kotlin
class DateToStringFormatter(private val date: OffsetDateTime) {

    fun englishFormat(): String {
        val formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd")
        return formatter.format(date)
    }
}

fun main() {
    print(DateToStringFormatter(OffsetDateTime.now()).englishFormat())
}
```

## Conclusion

Using companion object methods pollutes the class protocol with "library methods," which breaks cohesion and generates coupling. It is advisable to extract them through refactorings.

We cannot manipulate companion classes and use them polymorphically, so we can't mock or test them effectively.

As a result, we end up with a globally accessible reference that is challenging to decouple.

---

Stay updated with my latest thoughts and ideas by registering for my [**newsletter**](https://yonatankarp.com/newsletter). Connect with me on [**LinkedIn**](https://www.linkedin.com/in/yonatankarp/) or [**Twitter**](https://twitter.com/yonatan_karp). Let's stay connected and keep the conversation going!

---

## More info

* [Single Responsibility Principle](https://en.wikipedia.org/wiki/Single-responsibility_principle)
    
* [Mocking in tests with mockk](https://mockk.io/)
    

## Credits

* [Code Smell 18 - Static Functions](https://maximilianocontieri.com/code-smell-18-static-functions) by @[Maxi Contieri⭐⭐⭐](@mcsee)
First surprising Contact with ChatGP: Can it solve simple AWS SDK tasks?
Tags: aws, go, chatg
Published: 2022-12-18 08:21:41

I heard so many things, so I wanted to give **https://chat.openai.com/chat** a GO.

Can it help me in programming or even replace me?

My question:

"show me the code to list all CloudFormation stack names in an AWS account in GO with SDK v2 in clean code"


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

## Does the code work out of the box?

Short answer: No.
But it would save me google search time.

## What did I have to change?

A surprisingly small amount of code:

```
diff --git a/main.go b/main.go
index 01d6286..2b02055 100644
--- a/main.go
+++ b/main.go
@@ -4,34 +4,33 @@ import (
        "context"
        "fmt"

-       "github.com/aws/aws-sdk-go-v2/config"
+       "github.com/aws/aws-sdk-go-v2/aws"
        "github.com/aws/aws-sdk-go-v2/service/cloudformation"
-       "github.com/aws/aws-sdk-go-v2/service/cloudformation/types"
 )

 func main() {
        // Initialize the AWS configuration
-       cfg, err :=  config.LoadDefaultConfig(context.Background())
+       cfg, err := aws.NewConfig()
        if err != nil {
                panic("Unable to create AWS configuration: " + err.Error())
        }

        // Create a new CloudFormation client
-       cfnSvc := cloudformation.NewFromConfig(cfg)
+       cfnSvc := cloudformation.New(cfg)

        // Set up the input parameters for the ListStacks API call
        input := &cloudformation.ListStacksInput{
-               StackStatusFilter: []types.StackStatus{
-                       types.StackStatusCreateComplete,
... some more states
-                       types.StackStatusRollbackFailed,
-                       types.StackStatusUpdateComplete,
-                       types.StackStatusUpdateRollbackComplete,
-                       types.StackStatusUpdateRollbackFailed,
+               StackStatusFilter: []cloudformation.StackStatus{
+                       cloudformation.StackStatusCreateComplete,
+                       cloudformation.StackStatusUpdateRollbackFailed,
                },
        }
```

So with a few commands and some patches:

```
go mod init test1
vi main.go
go mod tidy
go run main.go
```

It worked!


## Conclusion

Indeed something to watch in the future!
Try https://chat.openai.com/

## Thanks

Photo by <a href="https://unsplash.com/@thomascpark?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Thomas Park</a> on <a href="https://unsplash.com/s/photos/surprise?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  

And ChatGP.
A Fun Programming Joke To Start Your Day
Tags: jokes, dailydeveloperjokes
Published: 2022-12-18 08:00:01

---
title: "A Fun Programming Joke To Start Your Day"
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/5e1259033bf63.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:___ How many developers does it take to change a light bulb?

___A:___ None. It's a hardware issue
 -->
Less than 25 views 👁️ What to do about it?
Tags: discuss, watercooler, community, motivation
Published: 2022-12-18 07:50:00

---
title: Less than 25 views 👁️ What to do about it?
published: true
description: It is frustrating to have less than 25 view per article, but there are ways to overcome that problem.
tags: discuss, watercooler, community, motivation
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
published_at: 2022-12-18 07:50 +0000
---

When I started to post here on DEV it was so discouraging to see that none of my posts had more than 25 view. It still happens once in a while and I still feel bad. I also had many posts with **hundreds of views**.

How did I manage to do that?

What can **you** do to have more readers?

A few things that I think can help

## Stop worrying about it

* The first thing is to stop worrying about it and stop looking at it. Remember **A watched pot never boils**
* Understand that the 25 limit is just an arbitrary number. If you click on the `stats` link of an article you'll see the exact number
* That number is updated every few hours. So it might take a few hours to see that there were more readers.

## Actually do something

Sure not worrying about it makes you feel better, but that does not increase the number of viewers. So here are a few things:

* Look at the [tags](/tags) and write about topics that interest you and have many followers.
* Tag your articles properly.
* Write content that is valuable to the potential readers.
* 📜 Write more than a few words.
* ⏰ Write regularly (once a week is good, once a day is much better)
* Create a series. (Click on the `Jekyll front matter` link at the top right when you are editing your post to see how) People who find the one part of a series interesting will often read the other parts.

* ✨ Promote your articles outside of DEV. I found a number of Facebook and LinkedIn groups where I could post my `python`, `ruby`, `docker` etc. related articles. Sometimes those got liked ❤️ there and brought a few hundred readers. Sometimes this did not have any impact.

* 🕰️ Be patient.

## Tell us what worked for you!

Some of the above might work for you. Some don't. You might have other ideas. So share your experience with us!
Add S.N(Serial Number)/Extra Column in React-Tables V7.
Tags: react, javascript
Published: 2022-12-18 07:42:35

[](url)Q. Who is this article for?

- For those have used React-Tables and are stuck
 while adding **S.N** or extra column in React-Tables. 

Here, 
```javascript
const fields = ['s.n', 'title', 'url', 'state'];
```
`If columns are fetched from backend/api` and you want to add the "S.N" column then

```javascript
const columnFields = ['s.n'];
columnFields.push(...fields);
```
View More and detail at this link [Blazecodes.com](https://blazecodes.pradhansaroj.com.np/posts/add-snserial-numberextra-column-in-react-tables-v7)
Getting Ready for a New Tech Position
Published: 2022-12-18 06:29:13

The year is about to come to an end and with it comes the urge or zeal to verge into a new field or new career opportunities. Preparing to leave a current work position or to enter into the work force is no small feat. I myself am about to enter the workforce as a junior developer and i find myself at a crossroad where i have to evaluate my skill set, performance and ability as a software developer and hope i am not banking on the pseudo-algorithm of imposter syndrome telling me i am any good despite the many challenges i face as a software developer.
Preparing for interviews is a period of sober reflection and a reality check on things. What i know, what i need to know and what i have to know.
Also soft skills and agile development is a must have when trying to up scale in the software development industry.
Security on the cloud vs security in the cloud AWS
Tags: security, cloud, aws, beginners
Published: 2022-12-18 06:28:10

Security on the cloud refers to the measures taken to secure data and systems that are stored or hosted on a cloud computing platform, such as Amazon Web Services (AWS). These measures may include techniques like encryption, access controls, and network security to protect data and systems from unauthorized access or tampering.

Security in the cloud, on the other hand, refers to the use of cloud computing services to enhance the security of an organization's data and systems. This can involve using cloud-based security tools and services, such as cloud-based firewall, intrusion detection and prevention, and security information and event management (SIEM). It can also involve storing data and running applications in the cloud to take advantage of the security measures implemented by the cloud provider.

In both cases, the goal is to ensure the confidentiality, integrity, and availability of data and systems. However, the focus is different: security on the cloud is about protecting data and systems that are hosted on the cloud, while security in the cloud is about using the cloud to enhance the security of an organization's data and systems.

AWS offers a range of security features and services to help organizations secure their data and systems on the cloud. These include data encryption, access controls, network security, and compliance with various security standards and regulations. AWS also offers a number of security tools and services that can be used to enhance the security of an organization's data and systems in the cloud.
How to use map() to iterate over array in ReactJS
Tags: javascript, react, webdev, programming
Published: 2022-12-18 06:12:13

map() is used in ReactJS to iterate over an array and display the content on front end. It is a standard JavaScript function that can be called on any array. In the current example, we are working on the Functional component.

First, we need to have an array that we need to render. Like this:


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


Now we are going to loop through data array, that gives access of each item in the array and can return a JSX element.






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

Here we created a component called MapExample, and passed props it to it. props will contain data that would be used in this component, which will talk about later.

Here we are using map() on data the array.
The key prop is used to uniquely identify each item. It is used to give each element a unique identifier. We should always include a 'key' prop for each item in the list.

And Bingo! We are done. Now you can display data from any array using map() in react functional component.

Hope that helps!
Share iphone Screen to macbook Pro
Published: 2022-12-18 06:01:10

1. Open -> QuickTime Player
2. Go to file and select "New Movie Recording"
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xsjdvdwg9ywjcx4eawbd.png)
4. Then Select Your device and boom your iphone Screen will be connected with your macBook

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l7fzuq9fujvqtlczg6at.png)
Timer using React.
Tags: react, javascript, beginners, webdev
Published: 2022-12-18 05:34:15

If you want to make a simple timer which has pause, reset and delete functionality and you have already seen some articles but not sure why they are wrote this , why they used useRef Hook and all. Well this article will surely help you.
As we all know what we need to achieve let's write some code.

First created a Timer.js file and with the help of useState we have count ( initially "0") ,isPause ( initially "true") and isDelete ( initially "false") variables.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oo6ozo6m5ozp0r1140x7.png)

Now let's add onClick event to each button.

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

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

everything is working fine but you must be wondering that Pause button is working like there is a Stop button and start button working like resume button , So here is task for you 

- Start button should be disabled when someone click on it.

- Pause button toggle between (Resume and Pause) if someone click 
  on it and also should work in right way.

send your code in comment and if have any doubt feel free to ask.
PS - Please do not mind my grammatical mistakes.
react useRef() hook (web dev simplified)
Tags: webdev, javascript, beginners, react
Published: 2022-12-18 05:32:31

## useRef Hook() :- 

**ref does not cause your component to re update when it gets changed.**

1. part1 Source Code:- 
``` react
import { useState, useEffect, useRef } from 'react'


export default function App() {

  const [name, setName] = useState("");
  // const [renderCount, setRenderCount] = useState(-2);
  // useEffect(() => {
  //   console.log("inside useEffect");
  //   setRenderCount(prevRenderCount => prevRenderCount + 1);
  // }, [name])

  const renderCount = useRef(0);

  useEffect(() => {
    console.log("inside useeffect");
    renderCount.current += 1
  })

  const inputRef = useRef();
  return (
    <>
      <input  type="text" value={name} onChange={(e) => setName(e.target.value)} />
      <div> My name is {name}. </div>
      {/* <div> {renderCount.current} </div> */}
      <button> {renderCount.current} </button>
    </>
  )
}
```
**Output Image :-**

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


2.Part2 Source Code:- 

``` react
import { useState, useEffect, useRef } from 'react'

export default function App() {

  const [name, setName] = useState("");
  // const [renderCount, setRenderCount] = useState(-2);
  // useEffect(() => {
  //   console.log("inside useEffect");
  //   setRenderCount(prevRenderCount => prevRenderCount + 1);
  // }, [name])

  const renderCount = useRef(0);

  useEffect(() => {
    console.log("inside useeffect");
    renderCount.current += 1
  })

  const inputRef = useRef();
  return (
    <>
      <input ref={inputRef} onClick={() => console.log("clicked")} type="text" value={name} onChange={(e) => setName(e.target.value)} />
      <div> My name is {name}. </div>
      {/* <div> {renderCount.current} </div> */}
      <button onClick={() => {
        inputRef.current.click()
      }}> {renderCount.current} </button>
    </>
  )
}
```
**Output Image:-**

![Output Photo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l00njvaszempk3anm8hl.png)

3.Part3 Source Code:- 
``` react
import {useEffect, useRef, useState} from 'react'

export default function App() {

  const [name, setName] = useState("");
  const PrevName = useRef("")

  useEffect(() => {
    console.log('name', name);
    console.log('PrevName.current1', PrevName.current);
    PrevName.current = name
    console.log('PrevName.current2', PrevName.current);
  })

  return (
    <>
      <input type="text" onChange={(e) => setName(e.target.value)} />
      <div>{name} - {PrevName.current}</div>
    </>
  )
}
```
**Source Code :-**
![Output IMage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cyfx70tvu2mntlj4zw5u.png)

Thank You.
You can follow us on:
[Youtube ](https://www.youtube.com/c/ULTIMATEPROGRAMMING)
[Instagram](https://www.instagram.com/full_stack_web_developer1/)
Scaling UI Development challenges
Tags: webdev, mobile, productivity, flutter
Published: 2022-12-18 05:23:38

Scaling UI development can be a challenging task, especially as the size and complexity of a project grow. Here are some common challenges that teams may face when scaling UI development:

Maintaining a consistent design language: As the number of designers and developers working on a project increases, it can be difficult to maintain a consistent design language across all UI elements. This can lead to a fragmented user experience and make it harder for users to navigate the application.

Managing code complexity: As the number of UI components and features grows, the codebase can become increasingly complex. This can make it difficult for developers to understand and work with the code, leading to slower development times and increased maintenance costs.

Ensuring cross-functional collaboration: UI development often involves close collaboration between designers and developers. As the team grows, it can be challenging to ensure that all team members are aligned and working towards the same goals.

Adapting to changing project requirements: As a project evolves, the UI may also need to change to meet new requirements. This can be challenging, especially if the UI has become complex and difficult to modify.

Testing and debugging: With a larger and more complex UI, it can be time-consuming to thoroughly test and debug all UI elements. This can lead to longer development cycles and a slower release schedule.

To address these challenges, it is important for teams to adopt best practices and tools that can help them scale UI development effectively. 

UI code generators that use Machine Learning, such as [Codis](https://codis.io), can help with scaling UI development by automatically generating code from design specifications. This can save time and reduce the risk of errors by eliminating the need for manual coding of UI elements. By using a code generator, teams can focus on more high-level tasks, such as designing and testing the UI, rather than spending time on low-level coding tasks. Code generators can also help to ensure consistency in the codebase by generating code that adheres to predefined standards and patterns. This can make it easier for developers to understand and work with the code, improving the efficiency and scalability of the development process.

In addition, using design systems to maintain a consistent design language, adopting agile development methodologies to facilitate cross-functional collaboration, and using automated testing tools to speed up the testing and debugging process. By addressing these challenges early on, teams can build a scalable and maintainable UI that can adapt to changing project requirements and support future growth.
Difference between IAM role and IAM user in AWS
Tags: aws, security, cloud, beginners
Published: 2022-12-18 05:13:08

In Amazon Web Services (AWS), an IAM role is an AWS identity with permissions that you can use to access AWS resources. An IAM user is an AWS identity that represents a person or service that interacts with AWS resources.

Here are some key differences between IAM roles and IAM users:

Permissions: IAM roles are intended to be assumed by AWS services, applications, or users. They do not have permanent credentials (such as a password or access keys) associated with them. Instead, they are intended to be used to grant permissions to other AWS resources. In contrast, IAM users have permanent credentials and can be granted permissions directly.

Use cases: IAM roles are typically used when you want to grant permissions to an AWS service or application to access other resources in your account. For example, you might create an IAM role for an Amazon EC2 instance to allow it to access an Amazon S3 bucket. IAM users are typically used when you want to grant permissions to a person or service that needs to interact with AWS resources.

Management: IAM roles are managed through the AWS Management Console or using the AWS API. IAM users are managed through the AWS Management Console, the AWS API, or the AWS Command Line Interface (CLI).

In summary, IAM roles are primarily intended for use by AWS services and applications, while IAM users are intended for use by people or services that need to interact with AWS resources.