teleren/devto huggingface dataset:
Legendary Emails in Node js with mjml 📩
Tags: node, backenddevelopment, tutorial, javascript
Published: 2024-06-30 19:55:36

Sometimes I receive emails from various companies and start-ups that look very attractive and audience-friendly. 😶‍🌫️

In their emails, they used a unique font along with images and buttons. What stood out the most was how their email format was responsive, adapting well to different devices.

After seeing the emails, I decided to send similar emails to users for the store project I was developing 😎

you can check it out if you like from the link below:
https://github.com/Silent-Watcher/express-shop

Anyway, I stumbled upon a tool called [**MJML**](https://mjml.io) that could be used to implement this feature.

As stated in its [documentation](https://documentation.mjml.io/):

> MJML is a **markup language** designed to reduce the pain of coding a **responsive** email.

As developers, we don't have to be involved in complex responsive email designs but you can spend some time learning the syntax if you’d like.

Good news for Node.js developers: MJML is coded in Node.js. However, if you use other languages such as Python, you can utilize the MJML API.

For more information, you can refer to this [post](https://medium.com/mjml-making-responsive-email-easy/integrating-mjml-in-your-app-couldnt-get-easier-discover-the-mjml-api-85a364def4b7) on the Medium website

To begin, we will need to install two packages: eta and mjml.

```bash
bun add eta@latest mjml@latest
```
After that, I created a file named mail.tpl.js where we initialize MJML and ETA to create our email template.


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

The template I used is the hello world template from the MJML documentation, which looks something like this

![mjml email preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5uzmz3jd295x00arcxy4.png)

After accessing your email template in HTML format, if you are using **Nodemailer ** for sending emails, you can create a ‘sendmail’ function that can be utilized later in the project

To achieve this, I created a file named ‘mailer.js’ and initialized the Nodemailer package:


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

Now, you can utilize this function wherever you wish to send emails. To define your template, simply use the ‘html’ option within the first parameter.


![send mail in node js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ox2opqwd605ugju2d81x.png)

that’s pretty much it. let me know what you think. 🤗
PIPO AI TOKEN
Tags: ai, cryptocurrency
Published: 2024-06-30 19:51:33

PIPO AI TOKEN: The Future of Digital Currency and Artificial Intelligence

In the ever-evolving world of digital currencies, one token stands out as a beacon of innovation and potential: PIPO AI TOKEN. As we move towards an era where artificial intelligence (AI) and blockchain technology are increasingly intertwined, PIPO AI TOKEN emerges as a groundbreaking solution that promises to revolutionize both fields.

A Visionary Token for a Revolutionary Era

PIPO AI TOKEN is not just another digital currency; it’s a visionary project that integrates the power of AI with the robustness of blockchain technology. This unique combination positions PIPO AI TOKEN as a key player in shaping the future of digital economies and AI-driven applications.

Why PIPO AI TOKEN is the Future

	1.	Innovative Integration of AI and Blockchain: PIPO AI TOKEN leverages cutting-edge AI algorithms to enhance security, efficiency, and scalability of blockchain transactions. This fusion opens up new possibilities for smart contracts, automated processes, and intelligent decision-making systems.
	2.	Transformative Potential: The impact of PIPO AI TOKEN extends beyond traditional digital currency applications. By harnessing AI, this token can facilitate advancements in various sectors, including finance, healthcare, logistics, and more. The ability to process vast amounts of data and make intelligent predictions can lead to unprecedented improvements in these fields.
	3.	Enhanced Security and Transparency: One of the primary concerns with digital currencies is security. PIPO AI TOKEN addresses this by employing advanced AI-driven security protocols, ensuring that transactions are not only faster but also more secure. Additionally, the transparency offered by blockchain technology means that all transactions are verifiable and immutable.

Why You Should Invest in PIPO AI TOKEN

Investing in PIPO AI TOKEN is not just about potential financial gains; it’s about being part of a transformative movement. Here are a few reasons why you should consider adding PIPO AI TOKEN to your investment portfolio:

	1.	Pioneering Technology: As an early adopter, you’ll be at the forefront of a technological revolution that combines AI and blockchain. This pioneering technology has the potential to create new markets and disrupt existing ones.
	2.	High Growth Potential: With the increasing adoption of AI and blockchain technologies, the demand for innovative solutions like PIPO AI TOKEN is expected to soar. Early investors stand to benefit significantly as the token’s value appreciates over time.
	3.	Support a Future-Oriented Vision: By investing in PIPO AI TOKEN, you are supporting a project that aims to make a positive impact on the world. The advancements driven by this token can lead to more efficient systems, smarter applications, and a better future for all.
React State Management: When & Where add your states?
Tags: react, state, useref
Published: 2024-06-30 19:50:55

When you start learning React, **managing state** can be challenging at first. It's crucial to understand when you really need a state for a variable and where to place that state to ensure your code is robust and efficient. Proper state management not only **optimizes performance** by minimizing unnecessary re-renders but also enhances **predictability** and **maintainability**, making your code easier to debug. It promotes component **reusability**, supports application **scalability**, and maintains a clear **separation of concerns**. Ultimately, effective state management leads to a smoother user experience and a high-quality, performant application.

There is a series of questions you can ask yourself to determine if your variables need separate states or if they can be simple constants. Additionally, these questions can help you decide where to keep the state if it is needed.

## When do I need a state variable?
**Do you need to store data?**
YES:
**Will data change at some point?**
NO: Regular "const" variable
YES: 
**Can it be computed from existing state/props?**
YES: Derive state
NO: 
**Should it re-render the component?**
NO: Ref(useRef)
YES: 
**PLACE A NEW PIECE OF STATE IN COMPONENT!**

## Where to place your new state?
_Always start with a local state in the current component. Then ask yourself if it's:_
**Only used by this component?**
YES: Leave it in the component
NO: **Also used by a child component?**
YES: pass it to the child via props
NO: **Also used by one or a few sibling components?**
YES: List state up to first common parent
NO: **Used all over the component tree by more than a few sibling components?**
YES: Then, you probably need a Global State!
Top SQL Interview Questions
Published: 2024-06-30 19:47:39

Welcome to Day 01 of our 21-day coding challenge! Today, we're diving into some of the most common SQL interview questions. Whether you're prepping for an interview or just looking to sharpen your SQL skills, these questions will give you a solid foundation.

1.What is SQL?
2.What are the different types of SQL commands?
3. What is a primary key?
4.What is a foreign key?
5. What is a JOIN? Explain different types of JOINs
6.What is normalization? Explain its types.
7.What are indexes?
8.What is a stored procedure?
9.What is a trigger?
10.Explain ACID properties.

**Practical Questions:**

1.How do you retrieve unique records from a table.
2.How do you find the second highest salary from an Employee table?
3.How do you update a record in a table?
4.How do you delete a record from a table?
5.What is a view and how do you create one?

Happy coding! Stay tuned for Day 02 where we’ll cover some exciting topics to keep your coding skills sharp.

#21DaysOfChallenge #SQL #CodingInterview  #TechInterviews
CVE-2024-27867- Eavesdropping vulnerability AirPods
Tags: cybersecurity, community, ios
Published: 2024-06-30 19:47:06

On 26th of June, Apple announced CVE-2024-27867.
If you are the (happy) owner of either:

- AirPods (2nd generation and later),      
- AirPods Pro (all models), 
- AirPods Max, 
- Powerbeats Pro,
- Beats Fit Pro

then you shall ensure your device(s)' firmware is up to date.
The good news: if your Airpods/ Beats are charging and are connected to your iPhone, iPad or Mac via Bluetooth then the update is done automatically. 
You can check the version of your AirPods/ Beats using one of the earlier specified devices. Be wary that your iPhone/ iPad/ Mac should also be at the latest version! 💡
The bad news: Your conversations were at risk of being intercepted by a ~~curious~~ malicious actor, using bluetooth sniffer.


## What is a bluetooth sniffer?

It's a tool used to intercept and read (i.e to sniff) the Bluetooth Low Energy (also known as BLE) packets, as they are transmitted.
Bluetooth sniffing is just one type of attack. You can read more about other types of Bluetooth attacks on [HTB Academy](https://academy.hackthebox.com/course/preview/brief-intro-to-hardware-attacks)


## Is the issue fixed?
Well, as mentioned earlier in the article, yes!
The issue is fixed on AirPods Firmware Update **6A326**, AirPods Firmware Update **6F8**, respectively Beats Firmware Update **6F8**.


## Instead of buh-bye

Always make sure that your devices are updated because this is a facile way to protect yourself online.
Kiran Infertility Centre
Tags: healthydebate
Published: 2024-06-30 19:44:54

[Kiran Infertility Centre](https://www.kiranfertilityservices.com), across Hyderabad, Chennai, and Bangalore, offers top-notch fertility solutions with compassionate care. Renowned for its advanced facilities and expert specialists, it provides personalized treatments including IVF, IUI, and donor services, guiding individuals and couples on their fertility path with integrity and innovation.
Access control models in cryptography
Published: 2024-06-30 19:29:56

Access control models are used to only allows access to an authentic user or resource. These allows to create protocols as to who can use a particular resource in an organization.

There are various access control models some of which are stated below:

1. Discretionary access control: In discretionary access control the access control rules are create by the resource owner. Is considered less secure due to the possibility of the access protocols by the resource owner

2. Mandatory access control: The access control is defined by a central authority based on predefined security rules. Access is based on classification of various users and resources. Used by military and goverment organization. Is more secure due to strict rules by the central authority

3. Rule based access control: In rule based access control the access is defined based on rules defined by the system administrator. Is is similar to Mandatory access control but is more versatile. Can be used with other models as well

4. Role based access control: The access control is based on roles. Can be used on corporate organizations. Is simple and straightforward. Flexible and simplifes the role as access basis

5. Attribute based access control: The access granted is based on a variety of attributes , such as user attributes , resource attributes, environmental factors. Is very flexible model

6. Context based access control: The access is based on context, such as user type, location ,timezone. Used in mobile and cloud communication

7. Identitity based access control: The access is based on user identity. Can be user alongside DAC or other access control model

8. Time based access control: The access is based on time intervals. Can be used by organizations with strict shift based policies

9. Risk adaptive access control: The access is based of risk factors. Used by banks to decide whether to grant access considering mulitple risk factors
📚 How to Use a Template Repository on GitHub
Tags: webdev, programming, git, github
Published: 2024-06-30 19:23:41

A template repository on GitHub allows you to create new repositories with the same structure and content as the template repository. It is useful for quickly starting projects with specific configurations without duplicating the commit history.

## 🎯 Objective
Create a template repository on GitHub to easily reuse configurations and code bases in new projects.

## 🛠️ Steps to Use a Template Repository

1. **Create a Template Repository**
   - On GitHub, go to the repository you want to turn into a template.
   - Go to the "Settings" tab.
   - In the "Repository template" section, check the "Template repository" box.

2. **Create a New Repository from the Template**
   - Go to the main page of the template repository.
   - Click the "Use this template" button.
   - Fill in the details for the new repository (name, description, visibility).
   - Click "Create repository from template".

## 📌 Example

Suppose you have a repository with an initial setup for a basic backend and frontend that you want to use as a template:

1. **Create a Template Repository**
   - Go to your repository: `https://github.com/your-username/backend-frontend-template`.
   - Click on "Settings".
   - Check the "Template repository" option.

2. **Create a New Repository from the Template**
   - Navigate to `https://github.com/your-username/backend-frontend-template`.
   - Click on "Use this template".
   - Fill in the new repository details:
     - Name: `new-client-project`
     - Description: `Initial setup for the client's project`
   - Click on "Create repository from template".

Using a template repository on GitHub is an efficient way to start new projects with a predefined setup, saving time and effort by avoiding code and configuration duplication. This practice allows you to keep the original code intact and provides a solid foundation to customize each project according to the specific needs of the client.

I hope this guide is helpful. Thank you for your comments and questions!
📚 Cómo Usar un Template Repository en GitHub
Tags: webdev, programming, github, git
Published: 2024-06-30 19:21:11

#### 🚀 Introducción
Un template repository en GitHub permite crear nuevos repositorios con la misma estructura y contenido que el repositorio plantilla. Es útil para iniciar proyectos con configuraciones específicas rápidamente, sin duplicar el historial de commits.

#### 🎯 Objetivo
Crear un template repository en GitHub para reutilizar configuraciones y bases de código en nuevos proyectos fácilmente.

#### 🛠️ Pasos para Usar un Template Repository

1. **Crear un Template Repository**
   - En GitHub, ve al repositorio que quieres convertir en plantilla.
   - Ve a la pestaña "Settings" (Configuración).
   - En la sección "Repository template" (Plantilla de repositorio), marca la casilla "Template repository" (Repositorio de plantilla).

2. **Crear un Nuevo Repositorio desde la Plantilla**
   - Ve a la página principal del template repository.
   - Haz clic en el botón "Use this template" (Usar esta plantilla).
   - Completa los detalles para el nuevo repositorio (nombre, descripción, visibilidad).
   - Haz clic en "Create repository from template" (Crear repositorio desde plantilla).

#### 📌 Ejemplo

Supongamos que tienes un repositorio con una configuración inicial de backend y frontend básico que quieres usar como plantilla:

1. **Crear un Template Repository**
   - Entra en tu repositorio `https://github.com/tu-usuario/backend-frontend-template`.
   - Haz clic en "Settings".
   - Marca la opción "Template repository".

2. **Crear un Nuevo Repositorio desde la Plantilla**
   - Navega a `https://github.com/tu-usuario/backend-frontend-template`.
   - Haz clic en "Use this template".
   - Completa la información del nuevo repositorio:
     - Nombre: `nuevo-proyecto-cliente`
     - Descripción: `Configuración inicial para el proyecto del cliente`
   - Haz clic en "Create repository from template".

#### 📝 Conclusión
Usar un template repository en GitHub es una manera eficiente de iniciar nuevos proyectos con una configuración predefinida, ahorrando tiempo y esfuerzo al evitar la duplicación de código y configuración. Esta práctica te permite mantener el código original intacto y proporciona una base sólida para personalizar cada proyecto según las necesidades específicas del cliente. 

Espero que esta guía te sea útil. ¡Gracias por tus comentarios y preguntas!
How can I upload images through the API?
Tags: devto, question
Published: 2024-06-30 19:14:21

I have written an [Obsidian](https://obsidian.md/) plugin that can publish notes from Obsidian as articles on DEV.to, which also deals with some Obsidian specific stuff, e.g. converting Obsidian medialinks to markdown links, separating title from content, and convert MathJax syntax to proper `{% katex %}` expressions; and it can handle subsequent updates, by storing the article id as metadata after the article is created.

But what the plugin really lacks right now is support for. [The API documentation](https://developers.forem.com/api/v1) doesn't document any option for uploading images.

Is that possible?


Btw, [the plugin can be found here](https://github.com/stroiman/obsidian-dev-publish). It's waiting approval before it's available in the community plugin list, but can be installed through [BRAT](https://github.com/TfTHacker/obsidian42-brat).
Traceability in Software Testing
Tags: webdev, softwaretesting, learning, productivity
Published: 2024-06-30 19:12:57

Have you ever played a game of connect-the-dots? That’s essentially what TRACEABILITY in software development is all about! It’s the art of ensuring every requirement is linked to its corresponding test cases, and it’s as crucial as your morning coffee ☕️.


But why is traceability such a big deal? Let’s break it down:

🔍**Why Traceability Matters:**

- **Clear Connections:** Imagine a roadmap where every destination (requirement) is directly connected to checkpoints (test cases). This clarity ensures that nothing is overlooked!


- **Accountability:** Traceability holds everyone accountable. You can easily track if all requirements are tested and verify that every feature works as intended.


- **Risk Management:** Early detection of gaps or issues becomes easier. A requirement that isn’t linked to a test case raises a red flag 🚩.


- **Streamlined Audits:** During audits, having a clear trail between requirements and test cases makes the process smooth and stress-free.


- **Enhanced Quality:** With every requirement traced to test cases, the end product’s quality is significantly improved, leading to happier users and stakeholders 🎉.


**🎯 How to Achieve Traceability:**

- **Use the Right Tools:** Leverage tools like Zephyr Scale, JIRA, or other test management tools that support traceability. They make linking requirements and test cases a breeze.


-  **Maintain Detailed Documentation:** Document every requirement and corresponding test case meticulously. This documentation acts as your traceability matrix.


- **Regular Reviews:** Schedule regular reviews to ensure all requirements have corresponding test cases. Catching issues early saves time and resources down the line.


- **Collaborative Effort:** Foster collaboration between developers, testers, and business analysts. Traceability is a team sport! 🤝


- **Automation is Your Friend:** Where possible, automate the traceability process. Automation tools can maintain links between requirements and test cases, making your job easier.


**💡 In a Nutshell:**
_Traceability isn’t just a buzzword;_ it’s the backbone of robust and reliable software development. By linking test cases to requirements, you ensure clarity, accountability, and quality every step of the way.

So, next time you embark on a project, think of it as your personal connect-the-dots adventure. Happy tracing! 🌟

If you have questions, please leave them in the comments.
My goal for the next two years.
Published: 2024-06-30 19:11:51

I have four goals I wish to achieve for the next two years, and they are:
**1. Be a better product designer and frontend developer**: Making quality user interface that guarantees users a satisfactory experience is my goal for the next two years and I plan on achieving this from the HNG internship- https://hng.tech/internship. 
**2. Be HNG finalist**: my goal is to complete this internship successfully as it will be beneficial to my career.
**3. Get a remote job**
**4. Constantly improve**: I have always loved learning and will continue to learn to advance my career.
Here is a diagram illustrating my goals- https://www.figma.com/design/B4Qi4X48RYqxRkByfrRR99/Untitled?node-id=0-1&t=FVMKwp6i4mLEJElB-0
How do the modern build tools work? (vite, webpack)
Tags: webdev, javascript, programming, beginners
Published: 2024-06-30 19:07:26

## What is a build tool?

1. In simple words, a build tool is software that automates the process of converting the code into the final product.
2. This process can include the Compilation of code, Minification, Building, Code spitting, Transpilation, Testing, Assets optimization, and Providing a development environment.

Let's understand the process one by one : 

- **Compilation of the code**: In this process, the build tool compiles the code into browser-understandable languages eg. Typescript to Javascript, SASS to CSS.

- **Minification**: This process includes minifying the files(removing the unnecessary code, comments, removing the white spaces, etc).

- **Code spitting**: Break up the code into smaller chunks and load them available on demand.

- **Transpilation**: Converting the moders ES6/ES7 module code into older version ES5 for older browsers.

- **Testing**: Running tests to check if code changes can produce bugs.

- **Assets optimization**: Compressing the images and other files to reduce the size for best use and fast load.

- **Development Server**: Build tools provide the local server with live reloading for development.

## How build tool work?

- **Configuration**: Build tools are configured using the config files.
e.g. webpack.config.js, vite.config.js. This config file defines the task to be performed on the source code.

- **File processing**: This process includes transpiling of files such as typescript to javascript and SCSS to CSS

- **Output Generation**: The final processed optimized files are generated and stored inside a defined folder e.g. build, gist.

Thank you for reading.
Talking about ReactJs and Nextjs.
Published: 2024-06-30 18:46:38

## Getting familiar with React
React is an open source and flexible Javascript library that allows developers to develop scalable, simple, and fast frontend interfaces for Single Page Application. It supports a functional programming paradigm and a reactive approach.
It was developed by Facebook.

## What is React used for

- Social Media Platforms e.g Facebook, Instagram.

- Online Video streaming e.g Netflix

- SAAS tools e.g Zapier.


## Getting familiar with NextJs
Next.Js an open-source and JavaScript framework, allowing you to develop fast and user-friendly web applications and static websites using React.

## What is Next.js used for

- E-commerce
- Landing Pages
- Marketing Website

## Which should you use for my project?
Selecting a framework or library complete depends on your project needs. React and Next.js are emerging and beneficial tools for your project, but only for performing certain tasks.

Thanks for reading this far. I hope this article helps in a way. There is a an internship program that is currently going on at the moment, [HNG11](https://hng.tech/internship).
This year is their 11th year edition and it's completely free.
However, Applicants have the opportunity to[subscribe](https://hng.tech/premium) for a year premium package.