teleren/devto huggingface dataset:
🚀Unveiling the ChatGPT Advantage: How I Absorbed Core ReactJS Concepts at Lightning Speed in 1 Week
Tags: react, chatgpt, webdev, ai
Published: 2023-06-19 06:46:56

ChatGPT has been the talk of the town lately. It took the world by storm raising many questions, will AI take over? Will people lose their jobs? Well, I don't know the answer to all these questions because I cannot predict the future. However, what I can predict is that with the help of AI tools like ChatGPT people can boost their productivity exponentially. Read on to see why I am so sure about this.

---

### 🚀 Getting Back to Development After Almost a Year

I used to be pretty confident about my web development skills. But now after almost a year of break from coding, I found myself struggling. 

I decided that I need some <u>practice</u> that too <u>in a way which helps me learn as much as possible in as little time as possible</u>. That's when I had the idea of using ChatGPT as my helper in this journey.

---

### 🔍 I decided that I will use ChatGPT to learn and revise ReactJS

With this in mind, I decided to learn and revise the core concepts in ReactJS . I wanted a well-guided study plan that would be as per my requirements.

1. Learn all the important concepts together.
2. I wanted to take an assignment-based approach to learning.
3. I wanted to learn new concepts as well.
4. I wanted to create a mini-project using the concepts I learned.

---

### 📚 Unlocking the Power of ChatGPT:  Crafting the Perfect Study Plan

With a few prompts, I was able to craft a perfectly well-guided study plan that fit my requirements.

Below you will find the prompts that helped me craft the study plan.

Prompt 1:
> I am learning and revising ReactJS, I want you to tell me those **20% things that will teach me 80% of ReactJS**



Prompt 2:

> Can you prepare me **assignment based tasks** to learn these things. Also please create these tasks such that it takes one week to do all of them. Make sure the difficulty and complexity increases gradually. Please add things as per your choice but make sure it helps me learn in the best possible way



Prompt 3:

> Ok great, now can you map these tasks to a project so that I can make it while learning these concepts


---

### The real juice lies in the responses

Let me tell you the real juice lies in the responses I got. They were concise and to the point. The steps and their sub-steps were thorough and gave me clear directions and goals. 

I recommend that you try and use ChatGPT like this and take advantage of this revolutionary tech to grow exponentially. 

If you want all the prompts along with the responses you can go through this [GitHub Gist](https://gist.github.com/Aloneduckling/6361ed767975f28001fe5da73473b8a7).

PS: The [repo for the mini-project](https://github.com/Aloneduckling/task-manager-react) that I created

#### I hope you liked the post and I sincerely await your feedback in the comment section below :)
How to Prevent Save Password Prompt of Browser
Tags: javascript, react, css, webdev
Published: 2023-06-19 06:39:17

Nowadays, almost every browser has functionality to save password whenever user input password form. It used to enhance user experience so that user doesn't need to remember their password.

However, in some cases such as company that has secured information, it leaks security vulnerability for them. So in this post, I'm going to show you how to prevent that dialog to pop-up.

Let's say you have password input that looks like this, `App.tsx`.

```
<input
  type="password"
  name="password"
  value={password}
  onChange={(e) => setPassword(e.target.value)}
/>
```

In order to prevent password save prompt to pop-up, you just need to change input type into free-text, then put a line of CSS to change text into bullets. It is going to look like this.

```
<input
  type="text"
  name="password"
  autoComplete="off"
  value={password}
  onChange={(e) => setPassword(e.target.value)}
  className="txtPassword"
/>
```

```
.txtPassword {
  -webkit-text-security: disc;
}
```

Here, I add auto-complete to off in order to prevent browser to remember field that we fill in.

That's all, thank you for reading this post. Hope this post helps your problem.
100 Days Coding Challenge - Day 30: FreeCodeCamp Front End Development Libraries
Tags: webdev, programming, frontend, 100daysofcode
Published: 2023-06-19 06:26:11

## Day 30

I'm doing the bootstrap section, I like it, it's simpler than CSS pure


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q90lpdmb9mptlcnd42tw.png)
Detailed guide to HTML
Tags: webdev, html
Published: 2023-06-19 06:16:17

Here is the basic HTML code structure.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
```
How to clean up branches in Git
Tags: git, terminal
Published: 2023-06-19 06:09:33



To delete branches already merged:

```
git branch --merged | grep -v '^[ *]*main$' | xargs git branch -d
```

Where `main` is trunk commonly `master` or `main`.

If you are looking to do a deep clean where branches are not merged then you can use the `D` switch instead of `d`. 

[Reference @ Stack Overflow](https://stackoverflow.com/questions/13064613/how-to-prune-local-tracking-branches-that-do-not-exist-on-remote-anymore)

Have you made a mistake? Recover your branch by getting it's SHA and checking it out.

```
git reflog --no-abbrev
git checkout -b <your-branch> <sha>
```

[Reference @ Stack Overflow](https://stackoverflow.com/questions/3640764/can-i-recover-a-branch-after-its-deletion-in-git)
🚀 Mastering Modularization: Embracing Simplicity: Simplifying your codebase with Deletion Thinking 🧠
Tags: modularization, softwareengineering, architecture, softwaredesign
Published: 2023-06-19 05:42:26

Improving software design can greatly increase team productivity by allowing developers to refactor easily, propose improvements, and take initiative.

**Well-defined interfaces**  between software modules, such as public classes, methods, endpoints, or events, are crucial for effective communication.

One way to judge if a software module is well-defined is to  **use deletion thinking** , which involves evaluating the number of changes required to remove the module and questioning whether all public interfaces are necessary.

![](https://artofsoftwaredesign.net/wp-content/uploads/2023/05/image-1024x614.png)

![](https://artofsoftwaredesign.net/wp-content/uploads/2023/05/image-1-1024x595.png)

![](https://artofsoftwaredesign.net/wp-content/uploads/2023/05/image-2-1024x518.png)

During the design phase, ask yourself: **how many changes will be needed to remove this software piece? ** Then, analyze each change to see if any publicly exposed implementation details can be rearranged to hide the mechanism’s implementation

> Good architecture is not just about building a structure that stands upright. It’s about creating a design that allows you to easily change or remove parts of it as needed.

To streamline the process of disabling a module, I like to use feature flags during the module dependencies registration (implementation details registrations). 

By doing so, I can quickly disable a business process or capability.  **Determine the number of feature flags required to disable a module, much like using deletion thinking.**

It’s essential to double-check software design and implementation to ensure it’s robust and efficient. By considering these critical questions during software development, you can create better-designed software.

The post [Mastering Modularization: Deletion Thinking](https://artofsoftwaredesign.net/blog/mastering-modularization-deletion-thinking/) appeared first on [ArtOfSoftwareDesign](https://artofsoftwaredesign.net).
Docker Cheatsheet
Tags: docker, video, cheatsheet
Published: 2023-06-19 05:44:44

---
title: Docker Cheatsheet
published: true
date: 2023-06-19 05:30:48 UTC
tags: docker, video, Cheatsheet
canonical_url: https://itsvinayak.hashnode.dev/docker-cheat-sheet
---

Enhance your #docker skills this handy reference #guide covers all the essential #commands, from common operations to advanced #techniques. #Follow along and stay up-to-date with the latest tech #news and best #practices, ensuring you have the knowledge to leverage Docker effectively in your #projects.

{% youtube 6fAi6v-MfTA %}
Please Help me with this weird issue.
Tags: help, wordpress, html
Published: 2023-06-19 05:27:19


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

I am facing this issue where inline svg is not rendering in wordpress admin panel.
It is only happening in the admin panel.

Tried solutions:
every svg have the height and width set, tried setting is manually but no difference.

Notes:
Wordpress is deployed to ec2 in docker and is being routed through apache2 server.
What is ChatGPT Merge Sort Works?
Tags: chatgpt
Published: 2023-06-19 05:09:52

ChatGPT is a language model developed by OpenAI, and it doesn't have direct knowledge of specific implementation details. However, I can provide an explanation of how the merge sort algorithm works in general.

Merge sort is a popular sorting algorithm that follows the divide-and-conquer approach. It works by recursively dividing the input array into smaller subarrays, sorting them individually, and then merging them back together to produce a sorted output.

**Here's a step-by-step explanation of how merge sort works:**

**1. Divide:** The input array is divided into two halves repeatedly until each subarray contains only one element or is empty.

**2. Sort:** Once the subarrays are small enough, the sorting process begins. Each subarray is individually sorted using merge sort. This is done by recursively dividing the subarray and merging the sorted subarrays.

**3. Merge:** After sorting the individual subarrays, the merge step begins. The sorted subarrays are merged back together to form larger sorted subarrays. This process continues until the entire array is merged back into a single sorted array.

**4. Combine:** Finally, the sorted subarrays are combined to form the fully sorted output array.

The key operation in merge sort is the merging step. It involves comparing elements from the two sorted subarrays and merging them into a new array in the correct order. This process repeats until all elements are merged into a single sorted array.

Merge sort has a time complexity of O(n log n), where n represents the number of elements in the input array. It is considered an efficient sorting algorithm and is widely used in various applications. By obtaining [ChatGPT Certification](https://www.edureka.co/openai-chatgpt-training-course), you can advance your career in ChatGPT. With this course, you can demonstrate your expertise in GPT models, pre-processing, fine-tuning, and working with OpenAI and the ChatGPT API, many more fundamental concepts, and many more critical concepts among others.

It's important to note that ChatGPT itself does not perform sorting algorithms or any specific programming tasks. It can only provide an understanding of how the algorithm works and guide you in implementing it in a programming language of your choice.
Unleashing Cost Efficiency in AWS Lambda: Top Strategies for Success
Tags: awslambda, aws, serverless, cost
Published: 2023-06-19 05:01:45

******Unleashing Cost Efficiency in AWS Lambda: Top Strategies for Success**

📢 Are you looking to optimize your costs in AWS Lambda? 💡 Discover these powerful strategies for achieving cost efficiency and maximizing the value of your serverless applications! 🚀

🔹 Rightsize Your Function Memory: Adjusting the memory allocated to your Lambda functions can significantly impact cost. Analyze your function's resource requirements and set the optimal memory size to avoid over-provisioning.

🔹 Utilize Provisioned Concurrency: Provisioned Concurrency reduces cold starts and improves performance for frequently accessed functions. By optimizing function startup times, you can maximize cost efficiency and enhance user experience.

🔹 Optimize Function Timeout: Carefully evaluate the timeout value for each Lambda function. Setting an appropriate timeout ensures that you pay only for the necessary execution time, avoiding unnecessary costs.

🔹 Implement Function Triggers Effectively: Use event-driven triggers judiciously and consider the frequency and volume of events. Fine-tuning your triggers helps eliminate unnecessary function invocations and reduces costs.

🔹 Leverage Lambda Layers: Utilize Lambda Layers to share code, libraries, and dependencies across multiple functions. This reduces duplicated code and storage requirements, resulting in cost savings.

🔹 Monitor and Analyze Function Usage: Regularly monitor your Lambda function usage using AWS CloudWatch or third-party tools. Identify idle or underutilized functions and optimize their resource allocation or consider decommissioning them.

🔹 Implement Function Versioning and Aliases: Utilize Lambda function versioning and aliases to manage deployment updates. This allows you to easily roll back changes, optimize testing, and avoid unnecessary function duplication.

🔹 Enable Concurrency Controls: Implement concurrency controls to limit the number of simultaneous function executions. This helps manage costs during periods of high traffic or unexpected spikes in demand.

By implementing these strategies, you can unleash cost efficiency and maximize the value of AWS Lambda! 💰💡 Start optimizing today and make the most of your serverless applications. 🌟
celebrating over 1000 followers on dev
Tags: devjournal, motivation, writing, discuss
Published: 2023-06-19 05:00:17

## Surprising !
Reaching 1000 followers on Dev.to is an incredible milestone that deserves a moment of celebration. As a writer and developer, I've been fortunate enough to witness the growth of my profile and engage with an amazing community of like-minded individuals. This blog post is dedicated to sharing my appreciation for this journey, highlighting some of the memorable aspects of my experience, and expressing my gratitude to all those who have supported me along the way.

![Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/edyrauisrt5qsv8f2743.png)
- I have `~1200 views` on my `11 Blogs` with `~30 reactions` and still Have `1000 followers` it's very surprising to me 🤔, any how I'd be writing more blogs as a learn and grow 😊
- This is what I like about dev.to you don't have to be a pro and still you can grow !!! ❤️
- I am a `trusted member too`, which basically means I can moderate stuff on dev.to 

![moderartor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/73uilfu7ijzt11tjssse.png)

## How I write my blogs ?

- I don't think much before writing a blog, whenever I learn something new or discover some amazing tool, website, library I just write a blog on it !
- Cover pages are must as they increase the chances of your blogs to me more noticeable, personally I use Figma to create my Cover pages (I'd be sharing my experience with Figma soon in an upcoming blog !)(below is an example of my first Figma Cover page )
![figmacoverpageexample](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2hekf3sxw4bad4eptq8k.png)
- Think as a reader 🧠, Imagine what all things you should add in you're blog that would help your reader 
- I would say consistency also play a vital role in growth of your blogging journey, I have noticed on posting consistent blogs I'd receive regular followers at least ~35 per day
I built a tool that creates and posts AI content to social media automatically 🧌
Tags: ai, llm, chatgpt, python
Published: 2023-06-19 04:55:34

I have always been intrigued by the idea of automating a social media handle. With the advent of LLMs, generating content has never been easier.

I wanted to experiment a little in this space and thus created LLM Influencer, A bot powered by OpenAI's GPT-3 and DALL-E 2 generative AIs.

---

## 💡 How does it work?
LLM Influencer utilizes the power of AI to create thought-provoking daily content accompanied by visually appealing images and posts it to twitter on a daily basis. The type of content that gets generated are available as separate plug-and-play modules.

---

## :rocket: Features:
✅ Generates daily motivational content for Twitter and other social media platforms.
✅ Offers easy plug-and-play modules for different types of content generation.
✅ Leverages ChatGPT and DALL-E 2 to provide creative and unique outputs.
✅ Includes built-in scheduling for automatic posting at your desired time every day.
✅ Provides email notifications to keep you informed in case of any job failures.

### 🧩 Currently Available Modules:
1️⃣ **Quoter**: Delivers motivational quotes paired with captivating images, designed to inspire and uplift you each day.
2️⃣ **Tweet Storm**: Explores various aspects of life through engaging tweet storms, offering valuable insights and perspectives.

---

I have been posting the generated content to my own twitter handle for while now, I have added some of the posts here.

I'll add the links for the repository and the twitter handle where I post the generated content.

---

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Life is a journey between the bright marble of our dreams and the muddy realities of our days, but both are equally important. ✨🧱💭 <a href="https://t.co/yjPHfahtAr">pic.twitter.com/yjPHfahtAr</a></p>&mdash; Adheeban Manoharan (@iamadhee_) <a href="https://twitter.com/iamadhee_/status/1669522732248334336?ref_src=twsrc%5Etfw">June 16, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

{% embed https://github.com/iamadhee/llm-influencer %}

Kindly have a look and share your valuable thoughts.
Contradiction in TS Types
Tags: typescript, learning, programming, javascript
Published: 2023-06-19 04:54:38

I was curious to know what happens if you do an intersection of two types that have the same property but with different types. For e.g. 

```javascript
type A = { age: number };
type B = { age: string };

type C = A & B;

const c: C = { age: 10 };
```

This doesn't work. The age in type C is assigned a type of `never`. This is because there is no value that can satisfy the condition of a number and a string at the same time. Hence it can `never` have a value.

If you still want to have a type that can take either a number or a string you can go ahead with a union type like so -

```javascript
type C = A | B;

const c: C = { age: 10 };
```

Peace ✌️
The Future of Digital Healthcare
Published: 2023-06-19 04:41:59

We at Sollers Infotech, have been developing software that caters to the needs of digital healthcare and have proved to be quite beneficial in this regard. Contact Us to provide healthcare solutions to your needs!

#healthcaresoftware #HealthCareAutomation #heathcare #healrhcaresolutions

https://www.sollersinfotech.com/the-future-of-digital-healthcare/
What is a Set in JavaScript? 🤔
Tags: webdev, javascript, beginners, tutorial
Published: 2023-06-19 04:36:07

A `Set` is a **collection of unique values** in JavaScript. It allows you to store and manipulate a group of values, and offers several useful methods for working with those values.

## Why use Sets? 😎

One of the main advantages of using a Set is that it only allows unique values. This means that you don't have to worry about duplicate values in your collection, which can make your code more efficient and easier to read.

Additionally, Sets offer a number of useful methods for working with the values in the collection. For example, you can use the `.has()` method to check if a specific value is in the Set, the `.add()` method to add a new value to the Set, and the `.delete()` method to remove a value from the Set.

## How to create a Set in JavaScript? 💪

To create a Set in JavaScript, you can use the `new Set()` constructor. For example:

```javascript
const mySet = new Set();
```

Alternatively, you can pass an array of values to the `Set()` constructor to create a Set with those values already added. For example:

```javascript
const mySet = new Set([1, 2, 3, 4]);
```


## Some common Set methods in JavaScript 🧐

Here are some of the most common Set methods in JavaScript, along with a brief description of what they do:

- `.has()`: Returns `true` if the given value is in the Set, and `false` otherwise.
- `.add()`: Adds the given value to the Set.
- `.delete()`: Removes the given value from the Set.
- `.size`: Returns the number of values in the Set.

For more information about Sets and their methods in JavaScript, you can check out the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set).

## Conclusion 🎉

Sets are a powerful and useful data structure in JavaScript, offering a convenient way to store and manipulate unique values. With their useful methods and efficient handling of duplicate values, Sets can be a valuable addition to your JavaScript toolkit.
Paradigm shift: Immutability in Elixir
Tags: machinelearning, elixir
Published: 2023-06-19 04:31:47

I spent this weekend by writing an [Elixir script to solve the Linear Regression problem](https://github.com/kalarani/mlbook-elixir/blob/main/linear-regression/LinearRegression.exs). And then when I went on to implement Gradient descent to train the model, I hit a road block.

I came up with this code, which looked perfect to me, just that it didn't work. It didn't do what I expected this to do.

```
  def train_from(filename) do
    raw_dataset = read_dataset(filename)
    x = raw_dataset |> Enum.map(fn d -> elem(Integer.parse(Enum.at(d, 0)),0) end)
    y = raw_dataset |> Enum.map(fn d -> elem(Float.parse(Enum.at(d, 1)),0) end)
    training_dataset = %{x: x, y: y}
    w = 100
    b = 100

    for n <- 1..5 do
      IO.inspect("Iteration #{n}: #{w}, #{b}")
      [w, b] = gradient_descent_step(x, y, w, b)
      IO.inspect("End of Iteration #{n}: #{w}, #{b}")
    end

    IO.inspect("End values for w: #{w}, b: #{b}");
  end
```

It spit out this output. 
> "Iteration 1: 100, 100"
902964882.6662791
4514335.333331471
"Iteration 2: 100, 100"
902964882.6662791
4514335.333331471
"Iteration 3: 100, 100"
902964882.6662791
4514335.333331471
"Iteration 4: 100, 100"
902964882.6662791
4514335.333331471
"Iteration 5: 100, 100"
902964882.6662791
4514335.333331471
"End values for w: 100, b: 100"

I was expecting the value of w and b to be updated and passed on in each iteration. Even though, the gradient descent returned back new values for w and b, it wasn't carried forward to the next iteration.

Turned out, I missed an important aspect of Elixir, rather functional programming. It is

> `Immutability`.

All variables are immutable. Ideally, they are constants. You can't change it once they are initialised. 

If that is the case, how am I supposed to do multiple iterations and feed the outputs from the previous iteration to the next one?

> _This is where the **paradigm shift** from object oriented programming is required._

By forcing ourselves to deal with immutable variables and methods that ~~doesn't~~ shouldn't have any side effects, we can come up an alternative way to solve the problem. i.e., to use [recursion for looping](https://elixir-lang.org/getting-started/recursion.html#loops-through-recursion).

## Epilogue:

My relationship with Elixir has always been on and off. Having spent a couple of years building websites in RoR, I've explored [basics of elixir](https://elixirschool.com/ta/lessons/basics/basics) few years back. Recently I came across [this blog](https://dockyard.com/blog/2022/07/12/elixir-versus-python-for-data-science) from [Sean Moriarity](https://seanmoriarity.com/) and that triggered my interest to try out elixir in the ML space.

For curious minds, [Charles Scalfani](https://twitter.com/cscalfani) wrote a [series of blogposts](https://cscalfani.medium.com/so-you-want-to-be-a-functional-programmer-part-1-1f15e387e536) that helps with the fundamentals of functional programming.