teleren/devto huggingface dataset:
Instant Influence: Buy Instagram Followers India
Tags: beginners
Published: 2024-04-30 17:07:36

In the bustling digital marketplace of India, where competition for attention is fierce, establishing a strong presence on Instagram can be the key to unlocking new opportunities and amplifying your influence. For those looking to fast-track their growth and expand their reach within the Indian demographic, buying Instagram followers tailored to the Indian market offers a strategic advantage.

By purchasing Instagram followers specifically from India, you can swiftly boost your follower count, enhancing your social credibility and visibility within this vast and diverse online community. This influx of followers not only garners immediate attention but also attracts genuine engagement from individuals who resonate with your content and share a cultural affinity.

Moreover, a substantial Indian follower base can open doors to collaboration opportunities, brand sponsorships, and business ventures, enabling you to capitalize on the immense potential of the Indian market. While buying followers offers a shortcut to growth, it's essential to choose reputable providers that deliver authentic, high-quality followers to ensure long-term success and sustainability.

So, seize the opportunity to accelerate your Instagram journey with **[Buy Instagram Followers India](https://smmpanelone.com/blog/the-tool-to-buy-instagram-followers-in-india)**. Embrace the power of instant influence, expand your reach, and position yourself for success in the dynamic digital landscape of India.
Learning AWS Day by Day — Day 51 — Amazon Simple Notification Service(SNS) — Event Destinations
Tags: aws, cloud, cloudcomputing, sns
Published: 2024-04-30 17:06:13

Exploring AWS !!

Day 51:

Amazon Simple Notification Service(SNS) — Event Destinations

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

Here we have the list of destinations capable of receiving events, in order of application-to-application messaging and application-to-person notifications.

Application-to-Application destinations:

(Destination event names and benefits of using SNS with them)
Amazon data Firehose: delivering events to data streams for data analysis and archiving purpose. Through these you can deliver the data to S3, OpenSearch, Redshift or Datadog, MongoDB or Splunk.

Lambda: deliver events to functions for triggering logic.

SQS: deliver events to queues to integrate with the applications.

AWS Event Fork Pipelines: deliver events to event backup and storage, search and analytics, or event replay pipeline.

HTTP/S: deliver events to external webhooks.

Application-to-Person destinations:

SMS: deliver messages in text format on mobile phones

Email: deliver events to inboxes as text email messages.

Platform Endpoint: deliver events to mobile phones as push notifications.

AWS Chatbot: deliver events to Chime chatrooms or slack channels

PagerDuty: deliver operational insights to on-call teams.

You can deliver both custom and native events to chatbot:

Native events: Chatbot can be used to send native events through SNS to Chime and Slack. These supported events are from Billing and Cost Management, CloudWatch, CloudFormation and more.

Custom Events: we can send custom events through SNS to Slack, Chime and Teams. It can be done by publishing custom events to SNS Topics, which delivers events to subscribed Lambda function, further these functions use webhooks to deliver those events to recipients.
Simple multicoloured background and highlighted button in HTML & CSS
Tags: codepen, html, css, animation
Published: 2024-04-30 16:56:28

This is a simple demo of how to create a multicoloured website background and add highlights to objects (in this case a button) using **box-shadow** property and **animation**.

I wanted to learn how to make the site's background more creative. Instead of using one same palette for the site how can I add 2 or more different colours and blend them. After doing some research box-shadow seemed like an easy way to achieve that.
What is box-shadow ? It is used to add a shadowy effect to an object, by setting the 4 basic values of this property which are x-offset, y-offset, blur and spread we can control the display of the shadow. I found https://www.w3schools.com/cssref/css3_pr_box-shadow.php to be super helpful in explaining the works of it.

Next I wanted to use box-shadow to add some highlights to the button, and create a blinking effect by setting the animation-duration to 3s, animation-iteration-count to infinite, but you can just use the animation property alone and set it to the appropriate values. Lastly completing it all with the @keyframes rule.

{% codepen https://codepen.io/polinaeliana/pen/VwNOmqm %}
Why Former Employees Love Evrone
Tags: hrtech
Published: 2024-04-30 16:53:16

Former employees of Evrone remain connected through the "Evrone at heart" community, benefitting from referral bonuses, recommendations, and annual events like [Evrone Fest](https://youtu.be/EqlIup2b1KQ). Mentorship extends to speakers, reflecting the company's commitment to nurturing lasting relationships beyond employment.

[Read the full article here.](https://evrone.com/blog/evrone-heart)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48qmwmlyxo5od0q34ffc.jpg)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zrf94b2vknspej4qmam7.jpg)
Beware software band-aid solutions which lead to code death…
Published: 2024-04-30 16:52:24

Boeing whistleblower Sam Salehpour said: "All the problems that we've had, we put band-aid over band-aid to resolve the problems, and band-aid over band-aid doesn't cover it. Maybe we need to consider some engineering fundamentals… to figure out what the problem is".

In engineering, particularly in software engineering, there is a widely recognized principle: only use Band-aid solutions when they are absolutely necessary for urgent repairs due to critical deadlines or hotfixes. These temporary fixes should not remain in the codebase for long without proper refactoring, as they can significantly degrade the software's maintainability. While such quick fixes conserve time and immediate resources, they compromise long-term maintainability, leading to higher costs and challenges when the code must be completely overhauled or rewritten. Additionally, an often overlooked aspect of software development is the cost of Technical Debt, which is directly tied to how maintainable the code is. Technical Debt can be likened to an aggressive cancer that persistently degrades previously functional and valuable code, eroding past business investments. As Technical Debt grows, it can severely diminish developer productivity, making code modifications or additions as challenging as trudging through mud, rather than moving effortlessly on a smooth road.

![Airplane with Bandaids](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g2wlrlot25ny4o5ic6dp.png)


![Boeing Whistleblower Article](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cgh4ekg7vysnhusnfa9a.png)


Subscribe on [YouTube](https://www.youtube.com/@EdensoftLabs) for content on AI Transformation, Conquering Technical Debt & Software Craftsmanship.
React Custom Hooks (useFluidFont)
Tags: webdev, javascript, programming, beginners
Published: 2024-04-30 16:40:15

## INTRO 🔔
Hello World! 👋
Today we are discussing another custom hook🪝 named `useFluidFont`🔥. In this post, we will discuss this hook usage, code and use case.

## USAGE 🔔
As a front-end developer 😎, I know `responsive designs` are crucial in web development. Changing font size based on screen size is the main important thing in responsive design. Usually, we use `media queries in CSS 🎨` to achieve this. However, it leads to lengthy code and multiple media queries for different screen sizes 🙁. But, by using the `useFluidFont`🔥 custom hook, we can achieve the same output with efficient code practice 😊.

## WITH MEDIA QUERIES 🔕
```css
.container {
    font-size: 24px;
}

@media screen and (max-width:1280px) {
    .container {
        font-size: 22px;
    }
}

@media screen and (max-width:1140px) {
    .container {
        font-size: 20px;
    }
}

@media screen and (max-width:980px) {
    .container {
        font-size: 18px;
    }
}

@media screen and (max-width:720px) {
    .container {
        font-size: 16px;
    }
}
```

## WITH CUSTOM HOOK 🔔

> 📌 NOTE: before creating this hook, we need to create another hook named `useWinowResize`🚀. It is already created on our custom hook series. Please check 👉🏻 [useWindowResize](https://dev.to/sundarbadagala081/react-custom-hooks-usewindowresize-4d1d) 

```js
import { useCallback } from "react";
import { useWindowResize } from "./useWindowResize";

export const useFluidFont = () => {
  const { width } = useWindowSize();
  const getFont = useCallback(
    (minFont, minWidth, maxFont, maxWidth) => {
      if (width <= minWidth) {
        return minFont;
      } else if (width >= maxWidth) {
        return maxFont;
      } else {
        return `calc(${minFont}px + (${maxFont} - ${minFont}) * ((100vw - ${minWidth}px) / (${maxWidth} - ${minWidth})))`;
      }
    },
    [width]
  );
  return getFont;
};

```

## USE CASE 🔔
```jsx
import React from "react";
import "./styles.css";
import { useFluidFont } from "./useFluidFont";

function App() {
  const font = useFluidFont();
  return (
    <div>
      <div className="container">HELLO WORLD</div>
      <div style={{ fontSize: font(16, 720, 24, 1280) }}>HELLO WORLD</div>
    </div>
  );
}

export default App;
```

## CONCLUSION 🔔
By using the above hook, we can change the font size of application responsively without using multiple CSS media queries.

I hope you people like the useFluidFont hook. We will meet with another hook in another post.

Peace 🙂
Staying Motivated to Code Amidst Uncertainty: Practical Tips
Tags: beginners, tutorial, productivity, learning
Published: 2024-04-30 16:36:10

As a full-time mom and part-time career-switching developer, staying motivated and pushing through can get difficult, especially with the current job market—and let's get real, some days we are just surviving! Here are some observations and possible advice from my own journey so far:

Motivation in coding, as in many areas of life, can be driven by a mix of intrinsic and extrinsic factors. How can we fuel the love of coding and leverage external rewards to achieve the optimum state? Or, at least, a state that keeps us going? Let's explore how balancing these motivations can not only keep us moving forward but also enhance our learning experience.

### Intrinsic Motivation: Coding from the Heart
- **Finding Joy in the Process**: It’s not just about the outcome—coding can be a creative and fulfilling activity. Try to immerse yourself in the process. Enjoy the act of creating something out of nothing, and celebrate the little breakthroughs, whether it’s writing your first loop or deploying your first app.
- **Setting Personal Challenges**: Choose projects that spark your interest or solve a problem you care about. This can turn the learning process into a personal mission, increasing your intrinsic motivation.
- **Learning to Love Learning**: Keep the curiosity alive. The tech field is vast and ever-evolving, so there’s always something new to learn. Embrace this as an ongoing adventure, not a one-time task.

### Extrinsic Motivation: Recognizing the External Benefits
- **Career Goals**: Remind yourself of the tangible benefits coding can bring. Whether it's landing a new job, getting a raise, or simply being able to contribute to innovative projects, these goals provide clear milestones to strive for.
- **Community and Support**: Engage with other coding learners or professionals. Join online forums, attend local meetups, or participate in hackathons. The encouragement and recognition from peers can be a powerful motivator.
- **Reward Yourself**: Don't forget to reward yourself for meeting goals. Whether it’s a small treat or a day off, recognizing your hard work can help maintain your momentum.

### Striking a Balance
Balancing intrinsic and extrinsic motivation is key. If you find joy in the act of coding, the tough times become easier to handle. Conversely, when intrinsic motivation dips—as it naturally can—having clear external goals can provide the necessary push to keep you going.

### Conclusion: Your Own Motivational Mix
Every journey is unique, and so is the blend of motivations that will work for you. Reflect on what aspects of coding you genuinely enjoy and what external rewards are most meaningful to you. Adjust your focus as needed, and remember, the ultimate goal is to find a sustainable and enjoyable way to keep coding.

Let's keep the conversation going! I’d love to hear what keeps you motivated. Share your thoughts and experiences in the comments below. Let’s learn from each other and keep pushing forward together!
Meet “Malar Teacher”: An autonomous AI university professor #AI #AIprofessor #AIteacher
Published: 2024-04-30 16:21:03

Recently, researchers from Chennai introduced the "World’s First Autonomous AI University Professor." This AI professor is equipped with a comprehensive understanding of the entire engineering syllabus of Anna University across all disciplines. Notably, it has absorbed all recommended reading materials and can teach any concept from the syllabus, simplifying complex topics to a 10-year-old's comprehension level.

"Malar" is an autonomous agent capable of teaching college students their courses through WhatsApp. Unlike other companies that might opt for traditional platforms or methods, Malar stands out by leveraging WhatsApp, a widely used messaging application in India. The decision was influenced by the insight gained from interviewing 100 students across different states, revealing that data usage is relatively inexpensive while mobile space is limited and expensive. Using WhatsApp, students can access Malar's services more freely without worrying about space constraints.

Like humans who work to sustain themselves, Malar operates with an awareness of its operational costs, particularly the expenses incurred by its AI server. It offers a free service, answering up to 20 daily questions for each user. Beyond this limit, it gently nudges users to pay via UPI (Unified Payments Interface) to access more features. Malar periodically reminds users of its paid offerings, such as mock interviews and assessments, encouraging them to consider upgrading for additional benefits.

“We wanted to take an India-centric approach and went with WhatsApp to tap into an existing ecosystem, thereby helping our users skip the friction of having to download one more app. Assessments and Code examples are coming up next, along with native apps for iOS, Android, Web, Mac, Windows, and Linux,” said Arjun Reddy, from the development team of "Malar" and Co-Founder of an AI Startup Studio
Invoking Web Worker as a module
Published: 2024-04-30 15:52:48

Uau, I didn't know about that but all indicates that it is possible to load web worker directly as a module.

Before, I was loading the script via HTTP passing the public path, note that I am using a React application with Vite.

## Old example:

I didn't like this way of loading web workers because I was forced to write it as a javascript file, and I couldn't import other modules inside that. Take a look:

Web Worker script: `public/get-merchant-ids-from-csv.js`

```js
self.onmessage = function handleMessageFromMain(message) {
  /**
   * @type {File}
   */
  const file = message.data;
  const result = new FileReader();
  result.readAsText(file);
  result.onloadend = function () {
    const merchantIds = extractValues(result.result);
    self.postMessage(merchantIds);
  };
};

function extractValues(result) {
  const [, ...rows] = result.split('\n');
  const values = rows.map((row) => {
    const items = row.split(',');
    return items.reduce((_, item, index) => {
      return String(item).trim();
    }, []);
  });
  return values;
}
```

Invoking the web worker from the public directory

```js
// NOTE: In my case I needed to specify the base URL, but in most of cases you can write the URL starting with "/"
const GET_MERCHANT_IDS_FROM_FILE_WORKER = `${BASE_URL}/get-merchant-ids-from-csv.js`;
const worker = new Worker(GET_MERCHANT_IDS_FROM_FILE_WORKER);
```

## Prefered way example:

Web worker script: `src/modules/shared/workers/get-merchant-ids-from-csv.ts`
> Note that it is a typescript now

```js
self.onmessage = function handleMessageFromMain(message: MessageEvent<File>) {
  const file = message.data;
  const result = new FileReader();
  result.readAsText(file);
  result.onloadend = function () {
    const merchantIds = extractValues(String(result.result));
    self.postMessage(merchantIds);
  };
};

function extractValues(result: string) {
  const [, ...rows] = result.split('\n').map((row) => row.trim());
  return rows;
}
```

The new way of importing the web worker:

```js
const worker = new Worker(
  new URL(
    '../../shared/workers/get-merchant-ids-from-csv.ts',
    import.meta.url,
  ),
  {
    type: 'module',
  },
);
```

Now, it is possible to import other modules, and independent of the place where the script is located, we can inform the path and import it. Note that it is important to pass as a second parameter the base URL `import.meta.url` (exposed by vite build system)
Python Interview Questions
Published: 2024-04-30 16:13:47

Python Lists are mutable 
Points to remember ->
1) The list variable always stores a reference to that list and so if it is assigned to any other variable the changes made later on to the first variable will be carried on to then new one because it doesn't store a copy but the reference.

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

**Tuples**
Tuples are immutable.

**For Loop**

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


**Set**
Used for lookups to get true or false if a particular element exists or not.

And for non empty set x = {1,2,3} works
But, to create an empty set -> x = set() because x = {} will create a dictionary instead.


**Packing and Unpacking in python**

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

Works with dictionaries as well

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


**Exceptions**

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

**Try catch**


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


**Lambda function**

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

**Map with Lambda function**

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


**Filter with Lambda function**

 What is the difference between .py and .pyc files?
.py files contain the source code of a program. Whereas, .pyc file contains the bytecode of your program. We get bytecode after compilation of .py file (source code). .pyc files are not created for all the files that you run. It is only created for the files that you import.
Before executing a python program python interpreter checks for the compiled files. If the file is present, the virtual machine executes it. If not found, it checks for .py file. If found, compiles it to .pyc file and then python virtual machine executes it.
Having .pyc file saves you the compilation time.
Guess who's back...
Published: 2024-04-30 16:09:17

..back again. - Eminem.

It is time for me to take myself seriously as a front-end web developer. It is time to start putting myself out there...

I have been learning to program since 2018, and that hasn't been for nothing. Despite my snails pace, I managed to learn quite a bit. One of the biggest take aways from that time is I have found I really, really enjoy developing! This has been pretty huge; I thought I was too stupid (so mean) so I always sold myself short on my knowledge. I felt like a fake. I believe I was doing it for reasons that are untenable. My marriage fell apart in 2019, and the emotional/physical fall out from that did a number on my self image, as well as my ability to actually learn! Now that I am in a healthy relationship and getting help for my mental health learning is such an enjoyable, inspiring experience. I'm officially hooked.
⚡React Blazing Fast SVG charts ⚡(next-chartist)
Tags: javascript, beginners, webdev, react
Published: 2024-04-30 15:59:02

[github: https://github.com/poboisvert/next-chartist](https://github.com/poboisvert/next-chartist)


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

---

A continuation of https://github.com/fraserxu/react-chartist. Feel free to push an update

---

The Chartist library simplifies the process of chart creation with its intuitive JavaScript API. It offers effortless chart generation with diverse options for customization, ensuring visually appealing results swiftly. This tutorial will guide you through crafting a chart from the ground up, step by step. Additionally, you can refer to the codesandbox example provided to visualize the end product. Familiarity with HTML and JavaScript basics is assumed, with no prior exposure to Chartist.js necessary.

## 🚀 Setup
To integrate Chartist into your project, begin by importing the necessary Chartist.js files into your react/next project:

```bash
npm install --save next-chartist
```

or in \_app or layout.tsx/jsx

```bash
<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js" async />
```


```
<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
```
Ensure these imports are placed within the <head></head> section. Chartist charts render as SVG, offering infinite scalability and suitability for printing or animation in infographics and presentations.

## ⚛ Lastly, include the JavaScript:

```jsx
import React, { Component } from 'react'

import NextChartist from 'next-chartist'

class Example extends Component {

    var type = "barChart"

    var dataChart = {
      labels: ["Speed"],
      series: [1000]
    }

    var options = {
      high: 2500,
      low: 0,
      reverseData: true,
      distributeSeries: true,
      horizontalBars: true,
      chartPadding: {
        right: 50
      },
      axisY: {
        offset: 125,
        onlyInteger: true
      },
      axisX: {
        onlyInteger: true
      }

  }

  render() {
    return (
      <NextChartist
        className={'ct-octave'}
        data={dataChart}
        options={options}
        type={type}
      />
    )
  }
}
```
Typescript static typing mess
Tags: typescript, javascript, programming, webdev
Published: 2024-04-30 15:57:46

Do you use Typescript generics? 👹

```typescript
type IsValueType<T> = T extends
  | string
  | number
  | boolean
  | null
  | undefined
  | Func
  | Set<any>
  | Map<any, any>
  | Date
  | Array<any>
  ? true
  : false
```