teleren/devto huggingface dataset:
Angular Architecture - Core Module
Tags: angular, architecture, frontend, webdev
Published: 2023-04-28 21:46:04

### 🎯 Introduction

**CoreModule** is a module that is used to encapsulate the core functionality of an application. The purpose of the CoreModule is to provide a central place for defining services, single instance components, configuration settings, util and helper classes and functions and any other code that is used across the entire application.

The CoreModule is typically imported only once, in the AppModule. This ensures that its services and components are available throughout the application.

This is where the core application logic is implemented, including all data manipulation and communication with external systems. If we are using a state management solution like Ngrx or Ngxs this is the place to define our state, actions, and reducers.

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

### 🎯 Core folder example

![Core Folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/flbsqzlpb3hwvcgn8aiw.png)

Core folder will contain things like:
**helpers**
Various helper classes, functions, and modules that are specific to your application's domain like auth-helper.ts, form-helper.ts, manual-subs.ts

**interceptors**
Interceptors are classes that can intercept HTTP requests and responses from the client to the server and vice versa.

**models**
Interface and Types definitions for API returned models, dtos. I prefer to prefix my interfaces with I and types with T. For example IMovie, TTime.

**services**
Singleton services with `@Injectable({providedIn: "root"})` decorator for handling API calls, error handling, logging etc.

**shell**
Shell components are standalone components used only inside of app.component.ts like layout components (header, footer, menu) or some of the placeholder components like toasters or modals (if decided to be implemented that way).

**store**
State, actions and reducer definitions for state management solution implementation

**utils**
Various helper functions, classes, and modules that can be reused across different parts of the application like date-utils.ts, string-utils.ts.

_Note: Some developers prefer to keep utility functions and helper classes in the SharedModule since they are typically shared across different parts of the app and don't have any dependencies on Angular, nor they are singletons. However, it's just a preference_


![CoreModule Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ig0hr9xw55sxc0d9ptb.png)

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

In the beginning, I tend to keep data-related code in the core folder to ensure easy accessibility and organization to avoid getting lost in thought process of what could be used somewhere in the future too early.

As I continue working on the application, I evaluate which services, models, types, and state definitions are only relevant to a specific module and will only be used within that module. In those cases, I move them to the appropriate module to keep the code organized and maintainable.
How BTC can transform our p2p marketplaces?
Published: 2023-04-28 21:34:41


Back with a fresh bunch of thoughts inspired by the recent events that have transpired.

One day I heard that some time ago, in the seventies, you could buy a pack of cigarettes for 5c. Well, pa, I just bought a motorcycle for 5c. 
it's fascinating to think about how this technology will continue to shape our world in the years to come.

_Now, imagine I bought a motorcycle for 5 cents (BTC)._

**How wild is that ?**

The punch line goes is that I have just won a Honda Shadow ’95 VT1100C motorcycle on an auction held in Orillia having paid for it using my shake pay account. The total purchase cost was 0.05 BTC. https://mempool.space/tx/686b1cbdc99167eedac4c3d683264e03c6d1b3b43f5e1e12e601fd69eabdcc72




![Torquise Honda Shadow 1995 VT1100](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a4m7g0pttkphl9b4or3z.jpg)


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


------

So what's next ? Check the cylinder compression ? Put it into neutral and walk it ? Maybe sit on its leather seat blistering on the sun ? 

Excitement builds up. As much as anxiety about it. It's like a new puppy in the house - requiring all of your attention.



------

More random thoughts (generated by GPT-3 Davinci):

It is indeed fascinating how the world is evolving, and cryptocurrency is becoming more mainstream. My story is a testament to the growing acceptance of cryptocurrencies. It's a new era where individuals can make purchases without the need for a traditional banking system. 

I am also pondering about how much trust went into the transaction itself. I had a broker who placed bids on the auction and otherwise with whom I consulted extensively - my very good friend. 

The feeling you get when you send someone a coin over the ether of a p2p network layer (be it BTC or ETH or Polygon) is that of complete surrender and exhilaration. 

The feeling of complete surrender comes from the fact that once you initiate the transaction, it's out of your control and subject to verification by the network. The verification process involves many nodes on the network verifying and validating the transaction before adding it to the blockchain ledger permanently. Once confirmed, it becomes part of an ever-growing history of trust that is immutable and transparent.

I indeed quadruple-checked the recipient address for the coin I was about to send because after the point of no return (when the network validates the transaction minutes later) there is no way to change the evergrowing history of trust put into the network with every and each transaction solidifying its worth in watts of energy invested. Almost an equivalent to oil in its thermal capacity. Haha. Nope, that can’t be right.
Use psuedocode to quickly learn React
Tags: beginners, javascript, react, studying
Published: 2023-04-28 21:28:56

when learning a new language/library, use #psuedocode to efficiently learn patterns/concepts/syntax

ex) below is a react component w an onClick handler

component {
callback arrow fxn
return (section
button with onClick{callback}
section
)}

this component will have a function that will fire when the event happens. the event is going to live on the button element. i'm using jsx syntax to inject my callback into the onClick method. 

that said, i can code this out which will look like this:

```javascript
const EventExamples = () => {
  const handleButtonClick = () => {
    alert('handle button click')
  }
  return (
    <section>
      <button onClick={handleButtonClick}>click me</button>
    </section>
  )
}
// code is from codingaddict's react course on youtube called react18. highly highly highly recommend
```

Now I know the very basics of how to apply an event handler in react. nice!

and don't even get me started on the importance of psuedocode when solving algorithm problems ha

good luck all!
Internationalization: Making Your Web App Accessible to Everyone 🌍
Tags: webdev, javascript, programming, opensource
Published: 2023-04-28 20:54:06

As the world becomes more connected, it's important to ensure that your web app can be accessed by users from different parts of the world. This is where internationalization comes into play.

Internationalization, or i18n for short, is the process of designing and developing your web app to support multiple languages and cultures. By doing this, you can reach a wider audience and provide a better user experience for non-native speakers of your app's default language.

There are several key aspects to consider when implementing i18n in your web app. Let's take a look at some of them.

**Content Localization 🌐**

The first step in i18n is to translate the content of your web app into different languages. This includes all text, images, videos, and other media that users interact with. You can either hire a professional translation service or use machine translation services like Google Translate to get started.

**Date and Time Formatting 📅**

Different countries have different date and time formats. For example, in the United States, the date is written as mm/dd/yyyy, while in Europe, it's written as dd/mm/yyyy. It's important to consider these differences and format your dates and times accordingly.

**Number Formatting 🔢**

Similarly, numbers are formatted differently in different parts of the world. For example, in the United States, a decimal point is used to separate the whole number from the decimal fraction (e.g. 1.234), while in Europe, a comma is used (e.g. 1,234). You'll need to make sure your app can handle these differences correctly.

**Right-to-Left (RTL) Language Support 🔄**

Some languages, such as Arabic and Hebrew, are written from right to left. This means that your web app needs to support RTL text formatting to display these languages correctly. This includes everything from text alignment to navigation and layout.

**Accessibility ♿**

Finally, it's important to ensure that your web app is accessible to users with disabilities. This includes providing alternative text for images, using proper heading tags, and making sure your app is keyboard accessible.

By implementing these key aspects of i18n, you can make your web app accessible to users from all over the world. This not only helps you reach a wider audience but also shows that you value inclusivity and diversity. So don't wait any longer, start making your web app accessible to everyone today! 🌎
TypeScript: A Strongly Typed Hero for Production-Grade Web Apps 🦸‍♂️
Tags: typescript, webdev, javascript, programming
Published: 2023-04-28 20:47:18

Are you tired of endless debugging sessions that lead to nowhere? Do you feel overwhelmed with maintaining large codebases? Fear not, TypeScript is here to save the day! 🚀

With TypeScript, you can add optional static typing to your JavaScript code, providing a safety net for your application. No more runtime errors to spoil your day, TypeScript will catch them before they even happen! 🔍

Let's take a look at an example of a function that calculates the area of a rectangle in JavaScript:

```javascript
function calculateArea(width, height) {
  return width * height;
}
```

Now let's add some TypeScript magic to it:

```typescript
function calculateArea(width: number, height: number): number {
  return width * height;
}
```

💥 Boom! 💥 You can now see the expected types of each argument and the return value. This will save you time and prevent errors that might arise from passing the wrong type of argument.

But wait, there's more! TypeScript also supports classes and interfaces, making it easier to write and maintain complex code. Let's take a look at an interface for a User object:

```typescript
interface User {
  name: string;
  age: number;
  email: string;
}
```

Now you can use this interface to define the shape of your User objects, and TypeScript will make sure you don't stray away from it. 🔒

Moreover, TypeScript integrates well with popular frontend frameworks such as React, Angular, and Vue.js. This means you can take advantage of features like IntelliSense and improved code completion to speed up your development process. 💨

In conclusion, TypeScript is the hero you deserve for your production-grade web apps. It adds safety, readability, and maintainability to your codebase, and it's a joy to work with. So what are you waiting for? Add some TypeScript to your project today! 🙌
Free Production Ready Next.js Template
Tags: nextjs, react, javascript, opensource
Published: 2023-04-28 20:41:32

I am excited to announce the release of my latest open-source project - a free, production-ready Next.js template repository. This template repository provides a strong foundation for building performant, scalable, and maintainable web applications using Next.js.

With this template repository, developers can focus on building features and functionality for their web applications, without worrying about setting up the boilerplate code. The repository comes pre-configured with essential tools, such as Tailwind CSS, Prettier, ESLint, Jest, and Husky, to make the development process smoother and more efficient.

The Tailwind CSS integration enables developers to build responsive and modern UIs with ease. Prettier and ESLint enforce consistent code formatting and help maintain the code quality. Jest provides a robust testing framework, while Husky ensures that code commits and pushes meet predefined standards.

The template repository is licensed under the MIT License, allowing developers to use, modify, and distribute the code as they see fit. Additionally, contributions are welcome to improve the codebase, add new features, and fix any bugs or issues.

The repository is available on GitHub, and developers can easily use it as a starting point for their web applications. They can clone the repository, customize it to meet their needs, and get started with building their application features right away.

I invite developers to try out this template repository and contribute to the project. Together, we can make web development easier and more accessible for everyone.

Check Project [Here](https://github.com/sajidrsk/production-ready-nextjs-template)
Revoluciona tu desarrollo web: Descubre las tendencias emergentes en Vue3, TypeScript y TailwindCSS
Tags: español, vue, typescript, tailwindcss
Published: 2023-04-28 20:36:56


## Tendencias y desarrollos futuros

![El futuro de front end](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/etmiausqannvc0hptwe0.png)

1. Mejoras en la experiencia del desarrollador
2. Aumento del uso de utilidades CSS
3. Web Components y Micro Frontends
4. Mejoras en la seguridad y la privacidad
5. Aumento del uso de tecnologías sin servidor
6. Rendimiento y optimización

---

## 1. Mejoras en la experiencia del desarrollador

- API Composition
- Integraciones sólidas con TypeScript
- Expansión de las capacidades de Vite

---

## 2. Aumento del uso de utilidades CSS

- Popularidad de las bibliotecas de utilidades CSS
- Nuevas herramientas y características complementarias
- Plugin JIT (Just-In-Time) de TailwindCSS

---

![Tendencias Vue 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n80r06hp69xmtckt8ire.png)

## 3. Web Components y Micro Frontends

- Componentes reutilizables y aislados
- Integraciones y compatibilidad mejoradas
- Funcionamiento en diferentes frameworks y aplicaciones

---

## 4. Mejoras en la seguridad y la privacidad

- Herramientas y prácticas relacionadas con la seguridad
- Aplicación de las mejores prácticas de seguridad en proyectos

---

## 5. Aumento del uso de tecnologías sin servidor

- Arquitecturas sin servidor y funciones como servicio (FaaS)
- Integración en proyectos con Vue3, TypeScript y TailwindCSS

---

## 6. Rendimiento y optimización


- Mejoras y actualizaciones en las herramientas de optimización de rendimiento
- Aplicación en proyectos con Vue3, TypeScript y TailwindCSS

---

## Mantenerse actualizado y adaptarse a los cambios

![El futuro de Vue 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/koquhcxwhdjtoo83o2wq.png)
- Seguir blogs, podcasts, conferencias y redes sociales relevantes
- Participar en comunidades en línea y contribuir a proyectos de código abierto
- Estar atento a las actualizaciones y noticias en el ecosistema

{% embed https://www.youtube.com/watch?v=8DazbAYauQQ %}
#DEVDiscuss: can the AT Protocol and the Fediverse coexist?
Tags: devdiscuss, fediverse, activitypub, atprotocol
Published: 2023-04-28 20:24:25

---
title: #DEVDiscuss: can the AT Protocol and the Fediverse coexist?
published: true
description: Let's discuss!
tags: devdiscuss, fediverse, activitypub, atprotocol
series: #DevDiscuss
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9m92cbsw7ntrbn61m0ej.jpg
---

Hey Devs, happy Friday 🦥💚

As always, it's been an eventful week in the tech industry. We've got a lot to talk about! And today I want to discuss a question from [my inbox](https://docs.google.com/forms/d/e/1FAIpQLSc6wgzJ1hh2OR4WsWlJN9WHUJ8jV4dFkRDF2TUP32urHSAsQg/viewform).

Today's question comes from DEV Community Member @erinposting, who also happens to be DEV's Social Media Manager.

> **Can the AT Protocol and the Fediverse coexist?**

Share your thoughts in the comments below! _And please remember to abide by our [Code of Conduct](https://dev.to/coc) while doing so._ 

---

_Want to submit a question for discussion, or even ask for advice? Visit [Sloan's Inbox](https://docs.google.com/forms/d/e/1FAIpQLSc6wgzJ1hh2OR4WsWlJN9WHUJ8jV4dFkRDF2TUP32urHSAsQg/viewform)! You can choose to remain anonymous._
Popular tag(#blockchain) last week top 5
Tags: blockchain, c4r4x35
Published: 2023-04-28 13:31:47

##Building Trust in a Trustless World with Decentralized Networks
Decentralized networks, such as blockchain, have the ability to transform how we create trust in an untrustworthy world. Trust is essential in our personal and professional lives, but it may be...
{% link https://dev.to/imsampro/building-trust-in-a-trustless-world-with-decentralized-networks-5hc1 %}
##What is Bluesky Social Network? And why are developers excited about it?
It seems like my Twitter feed is all about folks joining or asking about invites to Bluesky. I was lucky enough to get an invite this week to be able to check it out, and the user experience is a lot...
{% link https://dev.to/opensauced/what-is-bluesky-social-network-and-why-are-developers-excited-about-it-i0f %}
##How Blockchain Web3 Decentralized Networks are Creating New Opportunities
How Blockchain Web3 Decentralized Networks are Creating New Opportunities

Hey, have you heard about this Web3 blockchain? It's totally changing the game when it comes to digital systems, and it's...
{% link https://dev.to/imsampro/how-blockchain-web3-decentralized-networks-are-creating-new-opportunities-1coj %}
##Blockchain: Understanding basics
In this article let's try to demystify and understand the basics of the blockchain infrastructure and see how it contributes to the web3 ecosystem.

What is a blockchain?

Basically , blockchain is a...
{% link https://dev.to/pvishnuprasaath/blockchain-understanding-basics-5hda %}
##Moonly weekly progress update #46 - New design for a login page
Moonly weekly progress update #46 — New design for a login page

Hello Guys! How are you all? Some devs were on a small vacation (deserved vacation) this week, but we manage to finish some important...
{% link https://dev.to/moonly/moonly-weekly-progress-update-46-new-design-for-a-login-page-17fi %}
Random Number Generator
Published: 2023-04-28 20:05:10

The tool is a Random Number Generator implemented using HTML, CSS, and JavaScript. When the user clicks on the "Generate Number" button, the JavaScript function generateRandomNumber() is triggered, which generates a random number between 1 and 100 using the Math.random() function. The generated number is displayed on the web page using the innerHTML property of the <p> element with the id="result".

The HTML code includes a header with the title "Random Number Generator", a brief description of the tool, and the button to trigger the JavaScript function. The CSS code is used to style the page elements, including the font, button color, and footer.

The footer includes a copyright notice and can be used to include a link to the website that hosts the tool. This tool can be used for a variety of applications, such as generating a random number for a lottery, a game, or for selecting a winner in a contest.

```
<!DOCTYPE html>
<html>
<head>
	<title>Random Number Generator</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Random Number Generator</h1>
	<p>Click the button to generate a random number:</p>
	<button onclick="generateRandomNumber()">Generate Number</button>
	<p id="result"></p>
	<script src="script.js"></script>
</body>
</html>

```

```
body {
	font-family: Arial, sans-serif;
	text-align: center;
	margin: 0;
	padding: 0;
}

h1 {
	margin-top: 50px;
}

button {
	background-color: #4CAF50;
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

footer {
	margin-top: 50px;
	background-color: #ddd;
	padding: 10px;
	position: absolute;
	bottom: 0;
	width: 100%;
}
```

```
function generateRandomNumber() {
	var randomNumber = Math.floor(Math.random() * 100) + 1;
	document.getElementById("result").innerHTML = "Your random number is: " + randomNumber;
}

```
This tool is developed by Roxana Davis from [Poppy Playtime APK](https://poppyplaytimeapk.com/).
Custom Mime Type with Python 3 http.server
Tags: python, webserver, mimetype
Published: 2023-04-28 19:01:24

---
title: Custom Mime Type with Python 3 http.server
published: true
description: 
tags: #python #webserver #mimetype
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-04-28 18:20 +0000
---

I needed a quick web server when working with webgpu and needed a custom wgsl mime type. 

For this you can just add a mime type the python3 in-built http.server module

```python
import http.server
import socketserver
from urllib.parse import urlparse

# Define the custom MIME types
custom_mime_types = {
    ".wgsl": "text/javascript",
    # Add more custom MIME types here as needed
}

class CustomMimeTypesHTTPRequestHandler(http.server.SimpleHTTPRequestHandler):
    def guess_type(self, path):
        url = urlparse(path)
        file_ext = url.path
        pos = file_ext.rfind('.')
        if pos != -1:
            file_ext = file_ext[pos:]
        else:
            file_ext = ""

        # Check if the file extension has a custom MIME type
        if file_ext in custom_mime_types:
            return custom_mime_types[file_ext]

        # Fallback to the default MIME type guessing
        return super().guess_type(path)

# Set the handler to use the custom class
handler = CustomMimeTypesHTTPRequestHandler

# Set the server address and port
server_address = ("", 4001)

# Create the server and bind the address and handler
httpd = socketserver.TCPServer(server_address, handler)

print(f"Serving on http://{server_address[0]}:{server_address[1]}")
httpd.serve_forever()
```