teleren/devto huggingface dataset:
Multi-User Document Editing App [Part II]
Tags: refinehackathon, webdev, nextjs, typescript
Published: 2023-07-19 02:53:33

## App Showcase 


![Dev Collab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z5jv45nuk018ijept2r5.png)
### Category Submission: 

- Most Visually Pleasing
- Most Technical Impressive
- Stack: Nextjs Material UI Supabase and websockets

### App Link
Try it Live [here](https://collab.kemboi.app)
Common room(_Nebula_) [here](https://collab.kemboi.app/document/edit)
[![Website URL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lnx675rweba36wfglft8.png)](https://collab.kemboi.app/document/4kQaCrt6PcRUK_QcAzT3TIMtfLeAUiLC/edit)

### Added features

- Rooms
- Avatar

> To test for multi user simply create a document , copy URL and open a new tab (_You must be in same room to see other users)_.


![Multi User](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3lhke8phzz7gxfhm7xha.png)

### Link to Source Code 
 You can access the source code for the collaborative editing platform on [GitHub](https://github.com/alankemboi/dev-collab).

### Permissive License 
                                 Apache License
                           Version 2.0, January 2004
                        http://www.apache.org/licenses/

### Additional Resources/Info
- **Common Room**: The [Common Room](https://collab.kemboi.app/document/edit) is a virtual space where all users can collaborate and edit documents in real-time. Unlike other rooms that may require individual logins, the **Nebula** Room offers a hassle-free collaboration experience 
- **Link to Live Demo**: Experience the collaborative editing platform in action by trying out the [live demo](https://collab.kemboi.app/document/4kQaCrt6PcRUK_QcAzT3TIMtfLeAUiLC/edit).

- **GitHub Repository**: Access the project's GitHub repository to explore the [source code](https://github.com/alankemboi/dev-collab), contribute, or star the project.

- **README**: Check out the [detailed documentation](https://github.com/alankemboi/dev-collab#devcollab) for the collaborative editing platform to understand its features and how to use them effectively.
TIL Day 1
Published: 2023-07-19 02:07:20

Today, I started the journey in learning how to code. While I am entirely new to this, I am excited to make incremental wins towards becoming a software developer. Today was interesting, I started off with the Hello, World! assignment and I found it fascinating to utilize the repository on GitHub and had fun using CodeSpace to deploy my first app. Woot woot! After taking a much needed break, I began the work of becoming familiar with HTML. The language seems intuitive and relatively straightforward. It was really energizing to see my work build in the terminal and develop the HTML page overtime. I really hope to carry my momentum into tomorrow learnings on CSS and I am praying tomorrow is as productive.
AntDB Application Scenarios
Tags: database
Published: 2023-07-19 02:00:57

AntDB is a cloud-native distributed database, highly compatible with Oracle. It is suitable for high throughput, low latency OLTP applications and caching services with high performance requirements. Based on cloud-native distributed architecture, it achieves online elastic scaling, distributed strong consistency transactions, and extreme performance. A brief description of what is introduced in the following sections.

**Core system of telecom industry**
Applicable scenarios: CRM orders, billing, channel management, OSS. Scenario capabilities:

- Support for millions of connections

- High throughput, million-level tpmC

- 8.5 times higher billing efficiency

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5jbj2e7i9r23tcorexrt.png)
New win today 😁
Tags: programming, learning, webdev, beginners
Published: 2023-07-19 01:36:43

# Hey guys, 
I just got a W today and I wanna share with y'all.

Today I learned how to build a **responsive header**!
It also turns into a hamburger menu for small devices

It's exciting for me because i don't really like front-end development that much. With these little steps I can build my knowledge more efficiently and even faster.

## Here is a demo:
![Demo gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/op97fpw8alwu9ymkm1mf.gif)

I'm building a little blog app, hope it's done till august's end...
I will be sharing my progress here

Hope you guys like it, I'm happy with the result

### That's it for today, exploring new worlds!
My Shift from Vanilla JS to React
Tags: beginners, react, javascript, programming
Published: 2023-07-19 00:42:50

Hello everyone! I've started learning React, a JavaScript library, after working with Vanilla JavaScript at the Codeup(coding bootcamp in Dallas), I want to share why I think this switch is a big step forward for me.

With Vanilla JavaScript, I often had to write the same code for similar functions. React's reusable components have changed this. I can now write a component once and use it multiple times. This reduces errors and makes the code easier to handle.

React's virtual DOM is very attractive feature. In normal JavaScript, each UI change updates the entire DOM, which can slow down larger applications. React uses a virtual DOM to speed this up. It updates changes in the virtual DOM first, then only updates those parts in the real DOM. This makes apps run faster.

Lastly, React's large community has been a great help. It offers many resources and tutorials, making it easier to learn than Vanilla JS.

In short, learning React is my next step. It offers tools that make coding more efficient than with Vanilla JS. If you're considering it, I recommend trying React to see these benefits yourself. Keep learning and adapting to grow in this field.
Assembly essentials
Tags: assembly, lowcode, programming, devops
Published: 2023-07-19 00:36:29

Salve salve gurizada; venho mostrar aqui para você que deseja começar a entender um pouco sobre o assembly **(péssima escolha amigo)** mas de qualquer forma vamos nessa 


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



-----



Imagine o Assembly como uma festa na qual você é o DJ e os bits são as batidas da música. Aqui, cada linha de código tem um propósito específico e você é responsável por conduzir a dança dos processadores. É uma experiência íntima e intensa, mas prometo que será uma montanha-russa de emoções!

No Assembly, esqueça as abstrações e os luxos das linguagens de alto nível. Aqui, você trabalha diretamente com a arquitetura do seu computador, dizendo a ele exatamente o que fazer. É como falar uma língua secreta que apenas as máquinas entendem. Mas não se preocupe, você não precisa ser um poliglota para aprender!

Os comandos do Assembly são como pequenas coreografias que você cria para os processadores executarem. Você vai lidar com registradores, memória e operações aritméticas em um ambiente intimista e cheio de adrenalina. Não se esqueça de trazer seu capacete, porque aqui você estará lidando com os bits mais selvagens do planeta!

E lembre-se: a arte do Assembly é o equilíbrio perfeito entre a eficiência e a simplicidade. Você precisa pensar como um malabarista, encontrando a melhor maneira de realizar tarefas complexas com o menor número de instruções possível. É um verdadeiro show de habilidades!

No final das contas, o Assembly é uma experiência enriquecedora. Você vai aprender sobre a estrutura interna dos computadores, ganhará um novo nível de apreciação pelas linguagens de alto nível e, quem sabe, até descobrirá uma paixão oculta por sequências de bits. Afinal, não é todo dia que se pode dizer "Eu falo a língua das máquinas!".

Então, prepare-se para entrar na pista de dança do Assembly e deixe seus processadores se contorcerem ao som dos seus comandos. Divirta-se, experimente e crie suas próprias melodias de código. Lembre-se sempre: no mundo do Assembly, não há limites para a criatividade!

Agora, pegue seu chapéu de festa e vamos começar essa aventura! Estamos ansiosos para ver você sacudir o palco do Assembly com seu estilo único e divertido. É hora de colocar seus óculos de sol, ligar o som e dançar ao ritmo dos zeros e uns!

Divirta-se e seja um verdadeiro rockstar do Assembly! 🎉🎧💻
TIL Blog Day 5
Tags: webdev, beginners, programming, ruby
Published: 2023-07-19 00:16:22

Today I worked on the 2nd half of the Codecademy Ruby module. I finished Hashes/Symbols, Refactoring & Blocks/Procs/Lambdas.

I was taking notes as I went through the different sections but it was definitely a lot of information. I plan to go over my notes and quickly scan through the sections again for some spaced repetition. I can't wait to start working on some coding challenges so I can put this new knowledge to the test. 

I'm going to finish the day by reading a few more chapters of my Ruby book.
Form Example and Explanation
Published: 2023-07-18 19:57:38

The best language for creating forms depends on the platform you are working on. However, a widely used language for web development and form creation is HTML along with CSS and JavaScript. I will show you an example of how to create a basic form using these languages.

Here is the HTML code to create a simple contact form:

html
Copy code
<!DOCTYPE html>
<html>
<head>
  <title>Contact Form</title>
  <style>
    /* CSS styles for the form */
    form {
      width: 300px;
      margin: 0 auto;
    }

    label {
      display: block;
      margin-bottom: 5px;
    }

    input[type="text"],
    textarea {
      width: 100%;
      padding: 5px;
      margin-bottom: 10px;
    }

    input[type="submit"] {
      background-color: #4CAF50;
      color: white;
      padding: 10px 15px;
      border: none;
      cursor: pointer;
    }

    input[type="submit"]:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
  <h2>Contact Form</h2>
  <form action="send.php" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email:</label>
    <input type="text" id="email" name="email" required>

    <label for="message">Message:</label>
    <textarea id="message" name="message" required></textarea>

    <input type="submit" value="Send">
  </form>
</body>
</html>
This code creates a form with three fields: Name, Email, and Message. When the user submits the form, the data will be sent to a PHP file called "send.php". You can adjust the action attribute on the form element to point to the appropriate file.

The CSS styles are used to give the form a visual appearance. In this example, a simple layout is used with text input fields and a text area for the message, along with a submit button.

Remember that you will need to have a web server with PHP support for the form to work correctly. In the "send.php" file, you could process the submitted data and perform additional actions such as sending an email or saving the information to a database.

This is just a basic example of how to create a form using HTML, CSS, and JavaScript. You can customize it according to your needs and add additional validations as required. To integrate it with your [website design ](https://www.vegvisir.marketing/) feel free to contact us
AI is making our jobs harder, not easier
Tags: ai, productivity, machinelearning
Published: 2023-07-18 23:38:59

Or it will be, when we learn more about the implications, both ethical and societal.

Already, we find ourselves getting suspicious all the time, of content we see. We question whether content was generated by man or machine.

How will this affect the way that we, those who were around for this paradigm-shifting moment in human history, think and see the world, compared to generations before and after us? Only time will tell.

However, upon reading [this article](https://code.visualstudio.com/blogs/2023/03/30/vscode-copilot#_responsible-ai), I began to think. Chris Diaz is great for calling out the issue of responsibility directly, and it's good to see industry leaders like Microsoft show a strong example of values.

While we can, and will debate the issues of ethical responsibility on the side of Microsoft, and other organizations providing similar products and services, we must also accept responsibility ourselves.

We are now the adults. As Diaz says, this technology is still new. This child is growing, and learning. We are now parents!

We are still very far away from creating an AGI, or anything close, and I have personal doubts that we will ever even get there. However, this technology is already starting to shape the way we act. 

We can use the tools to be more productive, but we still have to make sure we research and understand the code we generate.

The tool learns based on other code on GitHub. So, if there is a common coding error present in a lot of code on GitHub, and the LLM trains on it, the same error will be duplicated, mutated and suggested to authors of other code.

This is where work gets hard. When we come up with a solution to a problem, as engineers we break it up, and understand each piece. We must continue to remember to do so with code generated by a machine.

Confidently wrong. This is after all the same technology as ChatGPT. The suggestions have a certain compelling quality to them. As humans we will tend to build repetition bias. The more often that we get good results out of AI generated code, the more we will tend to trust it, and that's dangerous. It is not logical to conclude that a result it right simply because the source has been reliable recently. 

At least for the foreseeable future, we are the ones responsible for our code, not the AI, and not the vendor. Even as it speeds up certain tasks, we must remember to slow down and maintain our engineering rigor to make sure that the results are correct.
Proyecto tienda Con Django + SQLite
Published: 2023-07-18 23:37:09

Para realizar todo proyecto es bueno tener una perspectiva global de la infraestructura y de como va a funcionar el proyecto.

En nuestro caso vamos a manejar el patrón de Diseño **MVC**: Modelo vista controlador, en Django es Similar con **MVT**: Modelo vista témplate.
Unit Test #1: doing a simple unit test with typescript + jest
Tags: unittest, jest, typescript, tutorial
Published: 2023-07-18 23:34:45

Hello everyone 🙋‍♂️, in this post I'm going to explain how to do a simple unit test with typescript and jest.

---

First of all, I'll make a function that solves the problem known as **fizzbuzz** and then I'll unit test the solution.

_**Fizzbuzz problem**: Write a code that prints numbers from 1 to 100 to the console. If the number is a multiple of 3, print the word “fizz”. If the number is a multiple of 5, print the word "buzz". If the number is a multiple of 3 and 5, print the word "fizzbuzz"._

To solve the problem, let's create a main class and add a function called fizzbuzz that takes a parameter and evaluates it based on the given conditions.

```typescript
// 01-basic.ts
export class Main {

  fizzbuzz(num: number): string {

    if ( num % 3 === 0 && num % 5 === 0 ) {
      return 'fizz buzz';
    }

    if ( num % 3 === 0 ) {
      return 'fizz';
    }

    if ( num % 5 === 0 ) {
      return 'buzz';
    }

    return `${num}`;
  }

}
```

Now, let's create a **spec file** and write the following code:

```typescript
// 01-basic.spec.ts
import { Main } from "./01-basic";

describe('@MainTest', () => {
  let component: Main;

  beforeEach(() => {
    component = new Main();
  })
})

```
👨‍🏫 **Explanation:** We just create the container for unit tests. **Describe function** takes two parameters, the first ('@MainTest') is its name and you can name it whatever you want. The second is a **jest function** and inside it we create a variable of the type of our class and then initialize it in a structure called beforeEach. As its name says, inside it we put all the variables or functions that need to be initialized or executing before executing the unit test.

---

Before writing our first use case for testing, **we need to read about a well-known pattern for writing tests**: [PATTERN ARRANGE-ACT-ASSERT](https://automationpanda.com/2020/07/07/arrange-act-assert-a-pattern-for-writing-good-tests/)

---

Following the pattern, let's write ✍️ the solution to our first use case:
_**Test #1:** call function with a number multiple of 3 and 5 and return 'fizzbuzz'_

- Arrange => create a constant with the number to evaluate.
- Act => evaluate the number in the fizzbuzz function.
- Assert => compare the output of the fizzbuzz function and the expected result.

```typescript
// Pattern Arrange-Act-Assert
it('should return fizz buzz if number es mod 3 and 5', () => {
  // arrange
  const numberToEvaluate = 30;
  // act
  const result = component.fizzbuzz(numberToEvaluate);
  // assert
  expect(result).toEqual('fizz buzz');
})
```

After running jest test command, we get the following output 👍:
![Result of run first test case](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/afy42et8fii6f7purj4g.png)

Now, you need to create all the tests necessary to cover 💯 percent of the class.

---

**I hope this post has helped you 👍. I'll make other posts with other examples that I know might be helpful 🤝.**

**Solution repository:** https://github.com/JuanSW18/unit-test-examples/blob/master/01-basic.spec.ts
how to configure the template generator in Intellij?
Tags: intellij, java, programming, tutorial
Published: 2023-07-18 23:28:50

In IntelliJ IDEA, you can create a template to generate code using Live Templates. Live Templates are pre-built code templates that can be inserted into your code with just a few hotkeys.

Here's a step-by-step guide to creating a template in IntelliJ IDEA:

1. Select "Settings" or "Preferences" (depending on your operating system) (Cntrl + Shift + S).


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

2. In the settings window, navigate to "Editor" and expand the "Live Templates" option.
3. Select the programming language in which you want to create the template (eg Java, Python, etc.).

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



4. Click the "+" button on the right side of the window to add a new Live Template.



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




5. In the "Abbreviation" field, enter an abbreviation that you will use to trigger the template while typing.

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


6. In the "Template text" field, enter the code you want to generate. You can use variables to automatically fill in specific information, such as a class or method name.

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




7. Set the context options for the template. This will determine in which situations the template will be suggested. For example, you can set the context so that the template is only applicable in Java files or inside a class.

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

8. Click "OK" to save the template.

9. Now, whenever you type the abbreviation you defined for the template while typing in a relevant file, IntelliJ IDEA will suggest expanding the template. You can press the Tab key to accept the suggestion and expand the code.


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


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



This is an efficient way to save time when generating pattern code in IntelliJ IDEA.
The 38th Day of the 100 Days of Code Challenge
Published: 2023-07-18 23:28:06

Hey everyone!

Today, I came across a bug in the real-time transcription app. I already have an idea of how to fix it after debugging, and I also worked a bit on a project for a client that involves using AI tools and Whisper, interesting project overall. And then on another project that involves the Spotify API.

I didn't have much time to work other than that as I'm on vacation, but I'm planning on fixing the bug tomorrow and then I'd have a great working version. Then will work on finding ways to make the transcription process faster!
TypeScript's type inference. A readonly array of specific string values.
Tags: typescript, webdev, programming, beginners
Published: 2023-07-18 22:57:32

## Introduction

**A real practical problem I had to face and solve in my React/TypeScript project.**

Imagine having a list of specific string values, such as `"first", "second", "third", "fourth", and "fifth"`. Your goal is to somehow use these values while ensuring strict type checking. This way, TypeScript will provide autocompletion information, making it easier to work with them and improving code reliability.

## Solution

**First, let's put the data in a readonly array:**

```
const numberNames = ['first', 'second', 'third', 'fourth', 'fifth'] as const
```

- We've declared the `numberNames` constant and assigned it an array of string literals: `['first', 'second', 'third', 'fourth', 'fifth']`;
- The `as const` assertion is used to make the array a readonly tuple where the specific string literals are preserved as literal types.

**Now, let's make a type off of the array:**

```
type NumberName = typeof numberNames[number]
```

- Here we've introduced the `NumberName` type alias  and assigned it the union type `typeof numberNames[number]`;
- `typeof numberNames[number]` refers to the type of the numberNames array, which is the union of the string literal types present in the array;
- The number indexer `[number]` extracts the union type of the array's individual elements. As a result, `typeof numberNames[number]` represents the combined type of the array's elements.

**The Role of Type Inference:**
When defined as a constant with `as const`, TypeScript infers the exact string literals assigned to `numberNames` as the type of each array element. This means that the type of NumberName is `'first' | 'second' | 'third' | 'fourth' | 'fifth'`

## Conclusion
- I picked Type Inference since I wanted to implement the solution as flexible as possible and with the least amount of code;
- TypeScript's type inference improves code correctness and tooling support by preserving types based on assigned values. We demonstrated how `as const` creates readonly tuples of string literals, and inferred types to create unions. This knowledge will help us write robust and type-safe code.

_P.S. I am taking my first steps into the realm of web article writing, and this one is my first ever. So, I wanted to start with a small case to share some useful information with all of you. Your thoughts, comments, and suggestions are most welcome. Thank you!_