teleren/devto huggingface dataset:
6 Useful Resources for Beginners in Front-End Development
Tags: webdev, beginners, learning, frontend
Published: 2024-06-30 04:30:00

Are you a beginner in front-end development? Then you are in the right place. In this post, I'll share some useful resources for aspiring front-end developers. I hope it will help you. 

Before that, if you are not focusing on the front end and are focusing on something else, regardless of the programming language, you can always rely on [Google](https://www.google.com/) and [YouTube](https://www.youtube.com/) as your primary sources of help. Also, if you are stuck with something and need to seek help from other programmers, you can always rely on [StackOverflow](https://stackoverflow.com/). It is a paradise for programmers. 
> You can read the full article from [here](https://rhythmusbyte.blogspot.com/2024/06/frontend-resources-part1.html)

---

### [W3Schools](https://www.w3schools.com)
First of all, this one is my fav in this list. It has almost everything about HTML, CSS, and JavaScript, along with other resources for you to become not just a front-end developer, but a Full-Stack Developer.

### [freeCodeCamp](https://www.freecodecamp.org/)
It is a non-profit organization that offers a comprehensive curriculum in web development. Personally, I used freeCodeCamp in my early days to learn HTML & CSS. They have an [Android](https://play.google.com/store/apps/details?id=org.freecodecamp) app as well as a [YouTube](https://youtube.com/@freecodecamp?si=D7srcxggAAj3Jrdu) channel. Check out their YouTube channel; you won’t regret it.

### [Udacity](https://udacity.com/)
Udacity has a bunch of cool free courses. And if you want something more organized, they've got paid nanodegree programs too!

---

Read the full article from [here](https://rhythmusbyte.blogspot.com/2024/06/frontend-resources-part1.html).
Live Coding Clerk, into Next.js with James Perkins
Tags: webdev, javascript, beginners, podcast
Published: 2024-06-30 04:23:24


Original: https://codingcat.dev/podcast/cwcc-0-9-clerk-with-appwrite

{% youtube https://youtu.be/4P_ax04-T4c %}

Clerk React is a React Hooks library that makes it easy to build CRUD applications. The library provides a set of high-level hooks that abstract away the details of managing state, fetching data, and handling errors.

Clerk React is designed to be easy to use, even for beginners. The hooks are well-documented and there are plenty of examples to help you get started.

In this blog post, we'll show you how to use Clerk React to build a simple todo app.

## Getting Started

The first step is to install Clerk React. You can do this with the following command:

```bash
npm install clerk-react

```

Once Clerk React is installed, you can start using the hooks in your app.

## Update _app.tsx

Include the below to wrap all components in a ClerkProvider.

```typescript
import '../styles/globals.css';
import type { AppProps } from 'next/app';
import { ClerkProvider, SignedIn, SignedOut, SignIn, UserButton } from '@clerk/nextjs';

function MyApp({ Component, pageProps }: AppProps) {
	return (
		<ClerkProvider {...pageProps}>
			<Component {...pageProps} />
		</ClerkProvider>
	);
}

export default MyApp;

```

## Full Repo Example

<section class=" aspect-video"> <iframe title="stackblitz for firebase app check" src="https://stackblitz.com/github/CodingCatDev/clerk-demo?embed=1&file=README.md" frameborder="0" height="100%" width="100%" loading="lazy" /> </section>

[CodingCatDev/clerk-demo](https://github.com/CodingCatDev/clerk-demo)
How to Learn Any New Skill with Ease?
Tags: learning, mvp, startup, skilldevelopment
Published: 2024-06-30 04:11:22

Ever felt that burning desire to create something but were stuck, unsure of where to start? I've been there too, overwhelmed by the vastness of what I didn't know. Today, I'm sharing my journey from a place of curiosity to launching a product with 10,000 users. These lessons, learned over a decade ago, still hold true today.

### The Daunting Start
Starting a new skill isn't easy. The initial hurdles are many: staying consistent, sifting through a sea of resources, and finding the right tutorials and courses. It's easy to feel lost, especially at the beginning.

### The Power of Active Learning
In my quest for knowledge, I watched countless videos, sometimes even at 4x speed, trying to grasp the core ideas. But I realized something crucial: passive learning wasn't enough. Just watching or mimicking others' work wouldn't cut it. To really understand, I had to build, apply, and yes, make mistakes.

Think about it—you can't learn to swim by watching others or reading about it. At some point, you have to dive into the water.

### The Leap of Faith
With this realization, I took a bold step. I built my product and launched it, bugs and all. Why? Because launching was the only way to truly learn and grow. It was a hands-on approach that taught me the intricacies of creation and problem-solving.

### The Path to Mastery
Mastering a skill isn't just about passive consumption but active participation. It's about launching, gathering feedback, iterating, and refining. It's about accountability, consistency, and continuous growth. Here’s my approach:

1. **Dive in Headfirst**: Start by building what you want to learn.
2. **Launch Early**: It instills discipline and a sense of responsibility.
3. **Engage with Your Audience**: Their feedback is invaluable.
4. **Stay Accountable**: Make your plans public. It keeps you motivated.
5. **Celebrate Every Milestone**: No achievement is too small. Every step forward counts.

### Reflections from a Decade Ago
My journey began 10 years ago. Today, I build, scale, and innovate. It's not just about learning; it's about applying, iterating, and scaling. If I could do it a decade ago, standing at the crossroads of uncertainty, so can you.

### Join Me on This Adventure
If my story resonates with you or if you're looking for tips on learning new skills, building from scratch, scaling applications, or strategically refactoring existing ones, join me on this exciting adventure. Let’s learn, build, and grow together. Follow my journey here.
Remove Duplicate Elements from JavaScript Array
Published: 2024-06-30 02:41:27

Removing duplicate elements from a JavaScript array is a common task that developers often need to perform. [JavaScript](https://www.school247.org/javascript/) offers several methods to achieve this, each suitable for different scenarios.

## 1. Remove Duplicates Using the `Set` Object

The `Set` object lets you store unique values of any type, whether primitive values or object references. Converting an array to a `Set` removes all duplicate elements.

**Example:**

```javascript
let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = [...new Set(numbers)];

// Output: [1, 2, 3, 4, 5]
console.log(uniqueNumbers);
```

## 2. Remove Duplicates [Using the `filter()` Method](https://www.school247.org/javascript-array-filter-method/)

The `filter()` method creates a new array with all elements that pass the test implemented by the provided function. By checking the index of each element, duplicates can be filtered out.

### Example:
```javascript
let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = numbers.filter((value, index, self) => self.indexOf(value) === index);

// Output: [1, 2, 3, 4, 5]
console.log(uniqueNumbers);
```

## 3. Remove Duplicates [Using the `reduce()` Method](https://www.school247.org/javascript-array-reduce-method/)

The `reduce()` method executes a reducer function on each element of the array, resulting in a single output value. It can be used to accumulate unique elements in an array.

### Example:
```javascript
let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = numbers.reduce((accumulator, value) => {
    if (!accumulator.includes(value)) {
        accumulator.push(value);
    }
    return accumulator;
}, []);

// Output: [1, 2, 3, 4, 5]
console.log(uniqueNumbers);
```

## 4. Remove Duplicates [Using `forEach()` Method](https://www.school247.org/javascript-array-foreach-method/)

The `forEach()` method executes a provided function once for each array element. By using an auxiliary object to track unique elements, duplicates can be removed.

### Example:
```javascript
let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = [];
let seen = {};

numbers.forEach(value => {
    if (!seen[value]) {
        uniqueNumbers.push(value);
        seen[value] = true;
    }
});

// Output: [1, 2, 3, 4, 5]
console.log(uniqueNumbers);
```
Removing duplicate elements from a JavaScript array can be achieved using various methods. Whether you prefer the simplicity of the `Set` object, the flexibility of `filter()`, the power of `reduce()`, or the combination of `map()` and `filter()`, JavaScript provides multiple ways to handle this common task effectively. Each method offers unique advantages, so you can choose the one that best suits your specific needs.
From Idea to Launch: My 30-Day MVP Journey
Tags: hasura, flutter, cto, mvp
Published: 2024-06-30 04:04:54

In the fast-paced world of tech startups, turning an idea into a working product is a wild ride, filled with hurdles and uncertainties. As the CTO of Storya, I faced the challenge of transforming a simple no-code prototype into a solid MVP in just 30 days. This journey wasn’t just about coding; it was about strategic planning, teamwork, and a relentless drive for excellence. Let me take you through this exhilarating journey and share the insights that made it all possible.

### The Challenge: 30 Days to a Robust MVP
When I joined Storya as the CTO, I was immediately hit with a big challenge. The existing MVP, built using Adalo, was more of a prototype than a product. We needed something more robust and scalable, and we needed it quickly. With a tight budget and a ticking clock, the mission was clear: build a functional MVP in just 30 days.

### Strategic Planning: Laying the Foundation
Time was short, but jumping in without a plan would have been a disaster. My team and I started by carefully mapping out user journeys. Storya is all about storytelling, so we focused on both creators and readers. This dual approach was key to ensuring our MVP met the needs of our core users. During planning, two tools stood out: Hasura GraphQL and Clean Code Architecture for Flutter. These, combined with our Flutter developers’ expertise, set a strong foundation for our MVP.

### Execution: The Power of Collaboration and Expertise
Our success hinged on the team. When you’re racing against time, every second counts. We couldn't afford long onboarding processes or steep learning curves. Thankfully, I had a team of seasoned pros. Their expertise, along with our strategic tool choices, allowed us to work efficiently. We utilized open-source tools and platforms like AWS ECS, ensuring our setup was both smooth and scalable.

### Reflections and Advice
Looking back, those 30 days were intense, but the lessons were invaluable. If you’re aiming to achieve something similar, remember: the team’s mindset is crucial. At Storya, our shared passion for storytelling kept us going and boosted our productivity. When time is tight, bring in professionals who know their stuff. And don’t underestimate the power of choosing the right tools. Spend time researching and experimenting—it pays off in the end.

### In Conclusion
Building an MVP in 30 days is no easy feat. It requires determination, strategic planning, and a clear vision. But my journey at Storya shows that with the right resources and mindset, it’s not only achievable but a testament to what focused dedication can accomplish.

Thanks for joining me on this journey. If you’re on a similar path, stay focused, plan well, and never underestimate the power of a great team and the right tools. Happy building!
VDO Ninja woes and Overlay Setup
Tags: webdev, javascript, beginners, podcast
Published: 2024-06-30 03:32:25


Original: https://codingcat.dev/podcast/vdo-ninja-woes-and-overlay-setup

{% youtube https://youtu.be/gexF47IhYLM %}

Trying to setup Video Ninja, I wouldn't watch this if I were you!
🎉 iPhone 15 Pro Max Giveaway! 🎉
Published: 2024-06-30 03:28:08


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fj4ge5act7u00vh3p0g3.jpg)[iPhone 15 Pro Max Giveaway!](https://sites.google.com/d/1KV_3eZiSN4UIJc9nupBSqe-z73LckXoG/p/1Sqk91XCiTXzoyjB-VAl2Ka6gvqGnLFdd/edit) 🎉
Hey everyone! 👋 We are thrilled to announce our latest giveaway! 📱✨
🎁 Prize: One brand new [iPhone 15 Pro Max! 📲 🗓 ](https://sites.google.com/d/1KV_3eZiSN4UIJc9nupBSqe-z73LckXoG/p/1Sqk91XCiTXzoyjB-VAl2Ka6gvqGnLFdd/edit)Duration: [30.06.2024] - [04.07.2024] 🏆 Winner Announcement: [05.07.2024]
🔹 How to Enter:
1 2️⃣ Like this post ❤️ 3️⃣ Tag 3 friends in the comments who’d love a new iPhone! 👯‍♂️👯‍♀️👯

✨ Terms & Conditions:
Open to residents of [USA, INDIA,RUSSIA] 🌍
Must be 18 years or older to enter 🎂
Giveaway is not affiliated with Instagram/Facebook/Twitter in any way
Good luck to everyone! 🍀 May the best fan win this incredible iPhone 15 Pro Max! 🌟
Open to [{Specify Eligibility}](https://sites.google.com/d/1KV_3eZiSN4UIJc9nupBSqe-z73LckXoG/p/1Sqk91XCiTXzoyjB-VAl2Ka6gvqGnLFdd/edit
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3rtj16ch149t9vzmqii9.jpg))
Feel free to customize this template with your specific details and requirements. Good luck with your giveaway! 🎁
[Win iPhone 15 pro max](https://sites.google.com/d/1KV_3eZiSN4UIJc9nupBSqe-z73LckXoG/p/1Sqk91XCiTXzoyjB-VAl2Ka6gvqGnLFdd/edit)
Data Validation is super important, don't ignore or delay it.
Tags: softwareengineering, typescript
Published: 2024-06-30 03:16:51

I often encounter backend codebases where data isn't validated before being processed or inserted directly into the database. This can cause serious bugs, as relying solely on your frontend buddy can lead to headaches, ruin the flow, result in unwanted and unexpected data in the database, and make you vulnerable to SQL injection if you are using an SQL database.

What's the solution then?
I agree that data validation is a must, but it isn't always easy to get right.

Here's what you can do:

**Don't trust anyone.**

Validating data involves four crucial steps:
1. Check the type.
2. Validate the format.
3. Refine it.
4. Transform it (optional).

We often stop at the first step and ignore the rest. Don't do that. Take a simple example of validating a phone number. You accept a "string" and check if it is a string. If so, you allow it and let it go to the database. No errors for now. But what if you have to verify that phone number with some third-party API and the format of the phone number isn't valid? Handling it later may still be possible, but it's not a good user experience to show the user that they have input the wrong data because we didn't validate the format earlier. Now they have to provide it again in the proper format.

To create a good user experience, you should always:
1. Check the data type (string, boolean, integer, object).
2. Validate the format - if it's a phone number, it must look like one.
3. Refine it - make it perfect for future use cases. For example, if you don't need the "+" at the start, remove it now.
4. Transform it - after removing the "+", you may be left with an alphanumeric string, but you need a number instead of a string, so transform it.

That's all you need to take care of to make your backend more robust.

If you are a TypeScript lover like me, you can consider using Zod to fulfill all of the above criteria. It's a comprehensive library with great TypeScript support.

Thanks for reading.
Expressjs vs Django vs FastApi vs Golang vs Rust (Actix) vs Ruby on Rails vs LAMP Stack (PHP) Hypothetical Benchmark Results
Tags: django, express, fastapi, ruby
Published: 2024-06-30 03:24:23

| Framework       | Requests per Second | Average Latency (ms) | Scalability | Ease of Use | Community Support |
|-----------------|----------------------|----------------------|-------------|-------------|-------------------|
| Go (net/http)   | 30,000               | 20                   | High        | Moderate    | Strong            |
| Rust (Actix)    | 35,000               | 15                   | High        | Low         | Growing           |
| FastAPI         | 20,000               | 25                   | High        | High        | Growing           |
| Elixir Phoenix  | 25,000               | 20                   | Very High   | Moderate    | Niche             |
| Express.js      | 15,000               | 30                   | High        | High        | Very Strong       |
| Django          | 10,000               | 40                   | Moderate    | High        | Very Strong       |
| Ruby on Rails   | 8,000                | 50                   | Moderate    | Very High   | Very Strong       |
| LAMP Stack (PHP)| 12,000               | 35                   | Moderate    | Moderate    | Very Strong       |


check more details : [Expressjs vs Django vs FastApi vs Golang vs Rust (Actix) vs Ruby on Rails vs LAMP Stack (PHP) Hypothetical Benchmark Results](https://www.aliahad.com/posts/expressjs-vs-django-vs-fastapi-vs-golang-vs-rust-actix-vs-ruby-on-rails-vs-lamp-stack-php-hypothetical-benchmark-results)
Hypertext Markup Language (HTML)
Published: 2024-06-30 03:19:12

Acceptance criteria:

It is done when I have analyzed and identified <html>, <head>, <meta>, and <title> elements in the index.html file in the prework-study-guide repository.

In this Module, I've learned about the <!DOCTYPE html> declaring to the browser to expect the following document to be HTML. Then I learned about how the language is set and the different elements of the <head>. 

Experimenting in VS Code with the index.html file by changing the <title> in the <head> - This actually shows up in the tab when the file is opened in Chrome, but the main title on the page still shows Prework Study Guide. (I went ahead and changed <h1> in the <body> to change that page title to match)
How I created reusable React Icon Component using react-icons library in an AstroJs Project.
Tags: astro, webdev, frontend, javascript
Published: 2024-06-30 02:43:37

In the past weeks lately, I have been focused on building clean landing page websites using AstroJs framework.

One of the difficulties I often face however is the limitation of the icon libraries available in the astro-icons, as compared to the react-icon library.

So here's what I decided to do:

```js
import React from 'react';
import * as FaIcons from 'react-icons/fa';
import * as MdIcons from 'react-icons/md';
import * as AiIcons from 'react-icons/ai';
import * as GiIcons from 'react-icons/gi';
import * as IoIcons from 'react-icons/io';
import * as CiIcons from "react-icons/ci";
import * as FiIcons from "react-icons/fi";
import * as LuIcons from "react-icons/lu";

const iconSets = {
  fa: FaIcons,
  md: MdIcons,
  ai: AiIcons,
  gi: GiIcons,
  io: IoIcons,
  ci: CiIcons,
  fi: FiIcons,
  lu: LuIcons,
};

const Icon = ({ name, set = 'fa', size = 24, color = 'currentColor', className = '' }) => {
  const IconComponent = iconSets[set][name];

  if (!IconComponent) {
    console.warn(`Icon ${name} from set ${set} not found`);
    return null;
  }

  return <IconComponent size={size} color={color} className={className} />;
};

export default Icon;
```

After which I imported this IconX (which I called it, that it doesn't conflict with the icon component from astro-icons) component into the components I would like to use it in.

``` js

<IconX size={24} set="ci" name={"CiSearch"} client:load />

```

Now I have access to the thousand of icons provided by react-icons right in my AstroJs Project.

Do like, share and follow for more.


Enjoy the read.
Unified Approximation Theorem for Neural Networks
Published: 2024-06-30 02:17:35

For any ( f \in \mathcal{F}(\mathbb{R}^n) ) and any ( \epsilon > 0 ), there exists a neural network ( \mathcal{N}(\mathbf{x}; \theta) ) with parameters ( \theta ) such that: [ \sup_{\mathbf{x} \in K} \left| f(\mathbf{x}) - \mathcal{N}(\mathbf{x}; \theta) \right| < \epsilon, ] where ( K \subset \mathbb{R}^n ) is compact.
A Backend's Journey: An Ordeal and a Life-Long Learning Process
Published: 2024-06-29 23:24:50

Hey there, colleague developers! I'm excited to share my recent adventure in tackling a compatibility issue while deploying a Django API from a Windows platform to a production environment. Buckle up, and let's dive into the journey!

**The Problem:**
I was tasked to integrate outlook calendar in my Django application on Windows platform, which seemed straightforward. However, when I pushed the project to production, compatibility issues arose due to the different operating system. Having only worked on Windows, this became a daunting challenge.

_Step 1: Google and Community Platforms_
As any developer would, I turned to Google and community platforms for help. With the deadline looming, I sacrificed my night's sleep and dove into research. This step was crucial, but I soon realized that sometimes, you need more personalized guidance after multiple implementation solutions failed.

_Step 2: Consult Friends and Colleagues_
I reached out to friends and colleagues, and as the saying goes, "in learning, you'll teach, and in teaching, you'll learn." Thankfully, my workplace has an amazing support system, and my colleagues were more than willing to help. Good friends are hard to come by, and I feel fortunate to have them.

_Step 3: Library Research and Implementation_
After gathering insights, I researched the library used on Windows and found its Linux counterpart. I implemented the new solution, and voilà! The library incompatibility issue was resolved.

But, as it often does, another issue arose. I collaborated with my system admin, and we created a super admin Outlook account, enabling me to integrate Outlook features into my application.

**Lessons Learned:**
- Don't be afraid to ask for help; it saves time and energy.
- Community support is crucial in the developer journey.
- Be prepared to face new challenges and learn from them.

As I reflect on this experience, I realize that problem-solving is an ongoing process. I'm excited to continue learning and growing as a developer. If you're facing similar challenges or want to learn more, you can join me on the HNG Internship program, which is going to foster us with a supportive community, and hands-on learning experiences.
Check out these resources:

- https://hng.tech/internship
- https://hng.tech/hire
- https://hng.tech/premium

Embrace your unique journey, and don't hesitate to reach out for help along the way!

Happy coding, and see you in the next blog post!