teleren/devto huggingface dataset:
My thoughts after learning Angular
Tags: webdev, react, typescript, angular
Published: 2023-10-01 18:22:58

My go-to web framework has been always React.js (Or Next.js) since my start journey into full-stack web development. And, I didn't have the courage to learn other interesting popular frameworks such as Vue.js, and Svelte.

Not because I dislike them, I just don't see the reason to since as a full-time freelancer the most demanding and preferred framework among clients is React.js.

However, there is one specific framework that I have no interest in or hope not use in my career and learn which is Angular since people seem to hate it and it's very rare you see someone talking about it on social media.

Recently, I got a new full-stack developer role opportunity which is looking for an Angular developer. I was very happy with most of the technologies they are using but quite not happy with the framework.

A few days after learning and digging deeper into the Angular framework, and thought. Hah, maybe it is not as bad as I thought. And I was quite impressed with how they're approaching building websites. It has a quite different mindset than React.js.

## What I've learned after using Angular for 3 months?

After using Angular for a while now I can see it's a very powerful framework. Angular, forces you to have a dedicated and separated code logic for each file as the following:

- name.component.html
- name.component.css
- name.component.ts
- name.service.ts

React.js on the other hand it's quite the opposite of that in which you combine all logic into one function. Which can be very overwhelming sometimes when dealing with complex components.

We see Angular is nicely separated logic whereas React is not really. Also, in React you have so much freedom and many ways you can build and define your project architecture which is prone to a lot of bad practices, especially for beginners. 

This too much freedom can be an issue, especially with collaboration with other developers which can result in inconsistent coding patterns and architecture in the codebase.

On the other hand with Angular, it narrows that freedom with a solid and consistent architecture and coding pattern throughout the project which works very well on big projects.

The other thing with React is you have to rely on a lot of third-party solutions whereas in Angular you have all the features out of the box which works really well together.

## Conclusion

In conclusion not saying React.js is not good, I would say both have some cons and pros.

With React.js you have so many opportunities and options to choose from depending on what you want to build.

And I would also say, that Angular can be slowish sometimes if you want to build something quicker and faster which is not ideal for prototyping.

And yeah, this is my overall thoughts on these two popular frameworks and I'm thinking of making a more detailed version of this post to elaborate more on why Angular is a very underrated and very powerful framework.
Tailwind CSS is a blessing in disguise!
Tags: css, tailwindcss, webdev, codenewbie
Published: 2023-10-01 18:19:07


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ukf6y0kvq5ju6yhfy3hg.png)
Since mid last month launch till last week, my side project [FreeCodeCompiler](https://freecodecompiler.com) served more than 2,000 user events. And, to my surprise, there was a good percentage of people who had visited and tried compiling from mobile devices.

It's not that the site wasn't responsive, but the UX was not good enough. At least for me it wasn't. When I opened the code editor page, I felt sorry for the (not so tiny) percentage of mobile users.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ipr0l49s0on9uzo1ji5o.png)
So I decided to make it better, and I actually did. Honestly, without Tailwind, this wouldn't have been possible so quickly. Here are a few images of my "Brand New" mobile version. Do check it out. And yes, it supports 19 languages now!
Data Science for Beginners: 2023 - 2024 Complete Roadmap.
Published: 2023-10-01 18:18:27



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

Data science involves extracting knowledge and insights from large and complex datasets using various techniques, such as data mining, statistical analysis, machine learning, and visualization. 

A data scientists are responsible for collecting, cleaning, and analyzing large datasets to extract valuable insights and make data-driven decisions. They use various machine learning and statistical techniques to build predictive models and solve complex problems.

They often work closely with business stakeholders to identify opportunities for leveraging data to drive business growth.

From the image above, the roadmap is clearly designed for one who wants to dive into this lucrative field but most importantly practice makes perfect.
Data Validation in Clojure
Published: 2023-11-26 17:36:23

---
title: Data Validation in Clojure
published: true
date: 2023-10-01 18:03:24 UTC
tags: 
canonical_url: https://blog.tvaisanen.com/data-validation-in-clojure
---

[Malli](https://github.com/metosin/malli) is a data-driven schema Clojure library for defining types and validating data. It can be used for example to:

- type check data when received from untrusted sources i.e. validate that HTTP request bodies before writing to the database

- define domain entities as code and generate UML diagrams

- [generate clj-kondo types](https://blog.tvaisanen.com/typescript-like-intellisense-for-clojure-functions-with-malli) for static type checking in editors.

Malli uses [hiccup-inspired](https://github.com/weavejester/hiccup) vector syntax for defining types. There's also a [map syntax variant](https://cljdoc.org/d/metosin/malli/0.8.9/doc/readme#map-syntax) but the use case for that is to be used as an internal library representation. The vector syntax looks like this.

```
  (def Todo
    [:map
     [:id :int]
     [:author :string]
     [:created inst?]
     [:status [:enum :todo :doing :done]]])

```

Here we have a "Todo" schema that represents a [map](https://clojure.org/reference/data_structures#Maps) with properties: id, author, created, and status. Each child of the map vector defines a property, meaning the property `:id` is a type of `:int` and `:created` is a type of `instant` and so on. All of these properties can be validated separately.

```
(malli.core/validate :int 1)
;; => true
(malli.core/validate :int "1")
;; => false
(malli.core/validate inst? (java.time.Instant/now))
;; => true
(malli.core/validate [:enum :todo :doing :done] :done)
;; => true

```

Or as a whole.

```
(malli.core/validate Todo
                    {:id 1 
                     :author "Toni" 
                     :created #inst "2023-09-30"
                     :status :todo})
;; => true

```

In the case that the data is not valid we probably want to know the details on why so. For this, we can use `malli.core/explain` and `malli.error/humanize`.

```
(def invalid-todo
    {:id 1
     :author "Toni" 
     :created "not-an-instant"
     :status :todo})

(malli.core/validate Todo invalid-todo)
;; => false
(:errors (malli.core/explain Todo invalid-todo))
;; =>
({:path [:created],
  :in [:created],
  :schema inst?,
  :value "not-an-instant"})

(malli.error/humanize
  (malli.core/explain Todo invalid-todo))
;; => 
{:created ["should be an inst"]}

```

The error messages can be customized and internationalized to fit your needs. Malli has a lot more features to offer, so I encourage you to go through the [documentation](https://cljdoc.org/d/metosin/malli/0.13.0/doc/readme) to learn more.

Thank you for reading, I hope you found this useful. Please let me know if there's some specific Malli feature that you would like to know more about.
How to convert text to speech with AI
Tags: ai, aitools, discuss, learning
Published: 2023-10-01 17:38:14

There is alot of [text to speech AI tools ](https://xn--ainexu-1jb.com/en/category/voice-over-sound/)in the market today!

**have you ever used one of this tool?**

[Ilevenlabs](https://youtu.be/hp1kDUuh6Ig?si=Zsco6NrVBm5IGHLu)
[Nabarati](https://youtu.be/4wRnveYPCe4?si=sdS3ms-Ep1KFNIw0)
[Descript](https://xn--ainexu-1jb.com/ai_tools/descript/)
 How you evaluate them?
if you use another tool share it with us
Coding Clean Popups: The Power of the <dialog> HTML Element
Tags: css, javascript, frontend, webdev
Published: 2023-10-01 17:32:32


Developing a modal popup using the **`<dialog>`** HTML tag can offer a native and standardized way to create popups without relying heavily on JavaScript libraries. The **`<dialog>`** element represents a part of an application that the user interacts with to perform a task, such as a dialog box, inspector, or window.

## Integrating <dialog> HTML Element

The **`<dialog>`** tag is very simple to implement. Here’s a basic example of how you can integrate it into your HTML:

```HTML
<dialog class="modal" id="modal">
  <h2>An awesome modal title</h2>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  <p>Nam liber tempor cum soluta nobis eleifend</p>
  <button class="button close-button">close modal</button>
</dialog>

<button class="button open-button">open modal</button>
```

## Using JavaScript to Handle the Modal

To open and close the dialog, you need to add some JavaScript code to toggle the **`open`** attribute of the **`<dialog>`** element.

```JavaScript
document.addEventListener('DOMContentLoaded', function () {
  const modal = document.querySelector("#modal");
  const openModal = document.querySelector(".open-button");
  const closeModal = document.querySelector(".close-button");

  openModal.addEventListener("click", () => {
    modal.showModal();
  });

  closeModal.addEventListener("click", () => {
    modal.close();
  });
});

```

## Styling with CSS

To style the **`<dialog>`**, you can use CSS as you would with any other HTML element. Here’s an example of how you might style the dialog:

```CSS
.modal {
  border: 0;
  box-shadow: 0 0 1em rgb(0 0 0 / 30%);
  max-width: 60ch;
}

.modal::backdrop {
  background: rgb(0 0 0 / 40%);
}

.button {
  background-color: #333;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: .5rem 1rem;
}

.button:hover {
  background-color: #555;
}

```
## Codepen
{% codepen https://codepen.io/joxx/pen/JjwBaJJ %}

## Browser Compatibility and Fallback

The **`<dialog>`** element is [supported in most of modern browsers](https://caniuse.com/?search=dialog), but you should always check the compatibility and implement a fallback for unsupported browsers, usually by utilizing JavaScript libraries or other modal implementation methods.

## Conclusion

Integrating and using a **`<dialog>`** element is fairly simple. It's essential for developers to use the **`<dialog>`** element where suitable because it follows the standard web specifications and ensures better accessibility and cleaner code structure.

Developing a modal popup using **`<dialog>`** can greatly simplify the process of creating interactive and user-friendly web applications, reducing reliance on heavy libraries and frameworks while maintaining clean and semantic code.
Taming Async Operations in React with use-async-stateful
Tags: webdev, react, programming, opensource
Published: 2023-10-01 17:02:53

Hey there, fellow devs! 👋

If you've worked with React for any decent amount of time, you've probably had your fair share of wrestling with asynchronous operations and the accompanying state management. Loading states, error messages, and then finally rendering data—it can all get a tad repetitive. That's why I decided to create and share use-async-stateful, a React Lightweight Hook designed to alleviate some of that pain.


## What Does use-async-stateful Do?

At its core, this hook manages the states commonly associated with async operations. Think loading, error, and success without the fuss of setting and resetting states manually.


```javascript
import { useAsyncHook } from 'use-async-stateful';

const { status, error, execute } = useAsyncStateful({
  resetStatusOnSuccess: true,
  resetStatusOnError: true,
});

const fetchData = async (id: number) => {
  // Your async logic here
  return `Data for ID: ${id}`
}

// Now, just use `execute` with your async functions!

const handleFetch = async () => {
    const data = await execute(fetchData, 123)
    console.log(data)
}
```


## Features at a Glance

-     **Simplified Async State Management**: Forget separate loading, error, and data states. 
- One hook to rule them all!
-     **Configurable Reset Options**: Decide if and when you want to reset your status.
-     **TypeScript Support**: For the folks who love strong typing, use-async-stateful has got your back.


## Getting Started

To integrate use-async-stateful into your project, you can use either npm or yarn:

```bash
npm install use-async-stateful
```

```bash
yarn add use-async-stateful
```

Then, you can follow the example above to integrate it into your components.


## Feedback & Contributions

Open-source thrives on community. Whether you have feature suggestions, issues, or want to contribute directly, you're welcome to check out the GitHub repo.

If you find **[use-async-stateful](https://github.com/Everkers/use-async-stateful)** helpful, consider giving it a star ⭐ or sharing it with fellow devs.

There you have it! I hope **use-async-stateful** can make your React adventures a tad smoother. Would love to hear your experiences and feedback in the comments below. Happy coding! 🚀

[Link to the repository](https://github.com/Everkers/use-async-stateful)
E-commerce with FirstStore
Tags: beginners, performance, chatgpt, help
Published: 2023-10-01 17:01:53

[FirstStore free store](https://firststore.io/) E-commerce encompasses a wide range of products. Here are some common categories of e-commerce products:

[FirstStore sample sites](https://firststore.io/) Electronics: This includes smartphones, laptops, tablets, cameras, and other electronic gadgets.

[B2B FirstStore app](https://firststore.io/) Clothing and Fashion: E-commerce platforms offer a variety of clothing, shoes, and accessories.

Home and Furniture: You can find furniture, decor items, appliances, and home improvement products online.

Beauty and Personal Care: Makeup, skincare, haircare, and grooming products are often available online.

[Small FirstStore stores](https://firststore.io/) Books and Media: E-books, physical books, music, movies, and video games are commonly sold through e-commerce.

Health and Wellness: This category includes vitamins, supplements, fitness equipment, and health-related products.

Toys and Games: [business on FirstStore](https://firststore.io/) Online stores offer a wide selection of toys, board games, and video games.

Groceries: Many e-commerce platforms now offer grocery delivery services.

Sports and Outdoors: You can purchase sporting equipment, outdoor gear, and activewear online.

Jewelry and Accessories: Rings, necklaces, watches, and other accessories are available on e-commerce sites.

Automotive: Car parts, accessories, and even vehicles can be purchased online.

Art and Crafts: Art supplies, handmade crafts, and artworks can be found on e-commerce platforms.

Pet Supplies: Pet food, toys, and other pet-related products are commonly sold online.

Industrial and Business Products: B2B e-commerce platforms offer products and supplies for businesses.

Food and Beverages: Specialty foods, snacks, and beverages can be ordered online.

These are just a few examples, and the world of e-commerce is vast, offering products for almost every need and interest. If you have a specific product or category in mind, feel free to ask, and I can provide more information or recommendations
Introduction to Linux eBook: A Comprehensive Guide for Beginners
Tags: linux, devops, books, beginners
Published: 2023-10-01 16:58:26

### Introduction

Hello to all passionate learners, tech enthusiasts, and budding system administrators!

I'm thrilled to announce the release of my latest eBook: **"Introduction to Linux"**. After months of dedicated research, writing, and refining, I've put together a guide that aims to help beginners and provide a solid foundation for those looking to gain a deeper understanding.

#### **Why Linux?**

Linux is a powerful operating system that has become a cornerstone of modern computing. It's a versatile platform that can be used for everything from running web servers to powering mobile devices. Linux is also open-source, meaning anyone can contribute to its development and use it free of charge.

Gaining proficiency in Linux not only opens the door to understanding this powerful OS but also paves the way for numerous career opportunities.

#### **What Can You Expect from the eBook?**

-   **Foundational Concepts**: Delve into the history and philosophy of Linux, its various distributions, and its place in the modern tech ecosystem.
-   **Hands-on Learning**: Engage with practical exercises and real-world examples that guide you through navigating the Linux filesystem, working with the command line, and much more.
-   **Deep Dives**: Explore topics like process management, user permissions, networking basics, and even bash scripting. Perfect for those who wish to transition from beginners to adept users.

#### **Who is this Book For?**

Whether you're an absolute beginner curious about Linux, a developer looking to hone your system administration skills, or an IT professional aiming to broaden your knowledge base, "Introduction to Linux" is for you.

#### **A Glimpse into My Journey**

Writing this eBook was not just about compiling information; it was a journey of revisiting the foundational concepts, engaging with the vast Linux community, and reflecting on my experiences as a Linux system administrator. I've always believed in the power of shared knowledge, and this book is my humble contribution to the ever-growing repository of Linux wisdom.

#### **Ready to Get Started?**

I invite you to dive into the world of Linux with this comprehensive guide. It's designed to be both a learning tool and a reference, serving you well as you progress in your journey.

> [Introduction to Linux eBook](https://leanpub.com/introduction-to-linux)

Thank you for your continued support, and here's to many more learning adventures together!

Happy learning!
Top ways to find projects for Hacktoberfest 2023
Tags: opensource, beginners, programming
Published: 2023-10-01 16:58:07

Hacktoberfest 2023 is here, and there's always a common question regarding the contributors: How can one find projects for Hacktoberfest 2023?

In this article, we will explore some tools as well as built-in GitHub functionalities to find great projects.

1. Finder by EddieHub Community
It finds **good first issues** from all over GitHub and gives you a list of them. You can further filter down the issues by clicking on the labels.
🔗 Link - [finder.eddiehub.io](http://finder.eddiehub.io)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yt6wk54ir4iyjexy6vnt.png)

2. GitHub's advanced search. GitHub advanced search provides tons of filters to find repos and issues according to our preferences. You can filter by language, extension, issue labels, number of stars/forks, etc.
🔗 Link - [github.com/search/advanced](https://github.com/search/advanced)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kueo9k7u6yivioyu452l.png)

3. GitHub Topics
It's a very cool feature on GitHub. With the help of this, you can find a particular project with a topic. The topic can be languages, events, tech, etc.
🔗 Link - [github.com/topics/javascript](http://github.com/topics/JavaScript)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gq7iu04smvjxre1x90we.png)

4. Good First Issue label 
`good first issue` is the best way to start your Open Source journey. You can find all of these on GitHub by doing a label search.
🔗 Link - [good-first-issue](https://github.com/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hf5an0ti4xa8q1fo2z4m.png)

5. Scoutflo Atlas
A curated list of BEST open source projects for Hacktoberfest 2023!
🔗 Link - [atlas.scoutflo.com/hacktoberfest](https://atlas.scoutflo.com/hacktoberfest)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2nsg1v0f9o2vn6jczbwd.png)

6. Quine
It will find the repos with most good starter issues for you in your chosen languages and topics.
🔗 Link - [https://quine.sh/contribute](https://quine.sh/contribute)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3blnvwyahc8zwn8vqmbo.png)
I hope you have a great time contributing this year. Good luck!
Icon for FirstStore
Tags: beginners, google, writing, help
Published: 2023-10-01 16:48:29

Creating an icon for [FirstStore free store](https://firststore.io/) your business involves several steps:

Conceptualize: Think about the core values, mission, and identity of your business. What do you want the icon to represent?

[FirstStore sample sites](https://firststore.io/) Sketch Ideas: Start with rough sketches or ideas. These don't need to be perfect; they're just to get your ideas on paper.

[B2B FirstStore app](https://firststore.io/) Color Palette: Choose a color scheme that aligns with your brand. Consider the psychology of colors and how they relate to your business.

Typography: If your icon includes text, select a suitable font that complements your brand and is easily readable at small sizes.

Simplicity: Icons should be simple and easily recognizable. Avoid clutter and overly complex designs.

Balance and Proportion: Ensure that the elements in your icon are well-balanced and proportional to each other.

[Small FirstStore stores](https://firststore.io/) Versatility: Your icon should look good at various sizes, from small app icons to larger promotional materials.

Feedback: Don't hesitate to get feedback from others, especially potential customers or colleagues.

[Business on FirstStore](https://firststore.io/) Software: You can use graphic design software like Adobe Illustrator or online tools like Canva to create your icon.

Professional Help: If you're not confident in your design skills, consider hiring a professional graphic designer who can bring your vision to life.

Remember, your icon is a visual representation of your business, so take your time and make sure it accurately reflects your brand's identity.