teleren/devto huggingface dataset:
Copy by value or reference in JavaScript
Published: 2023-01-13 17:41:36


For beginners to JavaScript the idea of copy by reference and copy by value can be somewhat confusing, but its very important to know the difference, as it determines what you can and can not do when manipulating a variable.

First we need to talk about the two basic data types, primitives, and objects.


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

When you create a variable in JavaScript it is one of these two types of data.  When you create a object the variable references a place in memory not the object itself. When you create a new variable, and assign it to the old variable, both variables point to the same place in memory. This is called copy by reference. When you alter one variable it will change the object referenced in memory, so the old variable will reflect the same change.

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

When assigning a variable to a primitive value value in JavaScript a new space in memory is created, and a specific amount of memory is created for it, because the value referenced at a specific place in memory can not be changed. When you create a second variable and assign it to the old one initially they are pointed at the same space in memory but once you 
manipulate either of the variables, they are resigned to new places in memory, with distinct values.

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

I hope this helps you understand the difference in copy by reference and value, and gives you an idea of primitive values differ from objects in JavaScript
Como remover completamente o MySQL do Ubuntu
Published: 2023-01-13 17:37:37

Para remover completamente o MySQL do Ubuntu, siga estes passos:

Pare o serviço MySQL usando o comando:
sudo service mysql stop

Remova o pacote MySQL usando o gerenciador de pacotes apt:
sudo apt-get remove --purge mysql-server mysql-client mysql-common -y

Remova qualquer arquivo de configuração restante:
sudo rm -rf /etc/mysql

Remova quaisquer dados do banco de dados restantes:
sudo rm -rf /var/lib/mysql

Remova quaisquer arquivos de log restantes:
sudo rm -rf /var/log/mysql*

Remova qualquer usuário MySQL restante:
sudo deluser --remove-home mysql

Remova qualquer grupo MySQL restante:
sudo delgroup mysql

Esses passos devem remover completamente o MySQL do seu sistema Ubuntu. Certifique-se de fazer backup dos dados do banco de dados antes de executar esses comandos.
Upcoming Live Event Jan 31: State of DevOps | A Look Ahead at 2023
Tags: devops, eventsinyourcity, security, devrel
Published: 2023-01-13 17:32:55

🗣️ Registration now open! Join us on Jan 31 as we continue our December conversation and discuss our predictions for DevOps and Software Supply Chain Security for the year ahead with community leaders from Cloudsmith, Buildkite
and Aquia! 
Register here: https://bit.ly/3W7mXS2
An Introduction to Smart Contract
Tags: web3, blockchain, smartcontract, solidity
Published: 2023-01-13 17:22:54

A smart contract is a computer software stored on the Blockchain that automatically executes and enforces an agreement. A smart contract is a computer program written in a language that a computer or target machine can comprehend.

It also includes business logic agreements between parties. Smart contracts also run automatically when specific criteria are satisfied. They are enforceable, meaning that even in the face of opponents, all contractual provisions are implemented as stipulated.

Enforcement is a wide phrase that includes both conventional legal enforcement and the deployment of specialized methods and controls that allow for contract execution without mediation. True smart contracts should not depend on conventional enforcement mechanisms. This means there is no need for an arbitrator or a third party to control or influence the smart contract execution. Smart contracts are self-enforcing, not legally binding.

They must also be secure and unstoppable, which means they must be fault-tolerant and executable in a reasonable length of time. If external variables are adverse, these programs should be able to run and maintain a healthy state. Imagine a conventional computer program that has logic and executes the instructions it contains. If the program's environment or external circumstances differ from the predicted state, the program may respond randomly or abort. Smart contracts must be resistant to this sort of problem.

Secure and unstoppable traits may be regarded as essential or desired features, and including them in the smart contract specification from the start would bring more long-term advantages. This will enable researchers to concentrate on these elements from the outset, laying solid foundations for future study. Specific academics believe smart contracts do not need to be automatically executable, but rather automatable, owing to the requirement for manual human input in some cases.

A certified medical expert may be needed to manually verify a medical record. Automated solutions may not be the best option. While human input and control is useful in certain instances, it is not required; a smart contract must be totally automated. 

A state machine concept is used to manage smart contracts' internal state. This enables the creation of a programming framework for smart contracts, where the state of a contract is advanced depending on preset criteria.



For more content follow me on - https://linktr.ee/shlokkumar2303
Accessibility Design Guidelines — Tailored for Webflow projects
Tags: accessibilityguideli, webflow, a11y, accessibledesign
Published: 2023-01-13 17:25:56

---
title: Accessibility Design Guidelines — Tailored for Webflow projects
published: true
date: 2023-01-13 17:14:27 UTC
tags: accessibilityguideli,webflow,accessibility,accessibledesign
canonical_url: https://mirelaprifti.medium.com/accessibility-design-guidelines-tailored-for-webflow-projects-1e8cb774eaa0
---

### Accessibility Design Guidelines — Tailored for Webflow projects

![](https://cdn-images-1.medium.com/max/1024/1*Iw3xlDn0xPZJR1LghOQHIA.png)

**From design to development** , accessibility is a key part of usability and web development best practices.

The best decision you can make as a web designer or developer is to learn about web accessibility. You’ll gain **more confidence and skills** as you work on future projects.

[This resource](https://mirelaprifti.gumroad.com/l/accessibility-design-guidelines) includes **action points** with different annotations and recommendations that I have found useful in my projects. Therefore, I decided to share them in a more structured way.

👉 [**Get your copy**](https://mirelaprifti.gumroad.com/l/accessibility-design-guidelines) 👈

---
#### ‍Check out my other products:

- [**UX Heuristics (Usability) Evaluation Report Template**](https://mirelaprifti.gumroad.com/l/ux-heuristics-report)
- [**Website Project Management | On-Page SEO & Accessibility**](https://mirelaprifti.gumroad.com/l/website-seo-accessibility)

---
✅ Follow me on [Twitter](https://twitter.com/mirepri4) or [LinkedIn](https://www.linkedin.com/in/mirelaprifti/)
Getting Setup
Tags: opensource
Published: 2023-01-13 16:52:09

# First order of business

To begin the second open source course our first order of business is to set up the existing Telescope project locally. 

To do this we simply follow the instructions on the [github](https://github.com/Seneca-CDOT/telescope/blob/master/src/web/docusaurus/docs/getting-started/environment-setup.md#option-1-run-frontend-and-backend-microservices-locally). The documentation highlights how to run several local configurations of Telescope depending on which services you want to enable. I decided to run everything which composes a lot of Docker containers as you can see below.

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

This is extremely resource intensive (14gb of RAM on my machine at its peak), so much so that when I went to run the init for the database that we attach to the local instance of Telescope it would not properly seed since so much of my computers resources were already in use. Waiting a little while and running the same command worked but for a moment I was confused.

After composing the containers with the default environment set up as per the github documentation you can access Telescope on localhost:8000.

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

and Traefik Dashboard on 8080 



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

It is also possible to look at the logs for the running containers to see what is going on such as here for the parser that is going through the blogs Telescope should track.




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



# What I learned

I have learned to wait a bit for resources to free up on my machine in certain situations and to try again a few times before jumping to conclusions that things might be broken. I have also taken a brief look at the architecture of Telescope and have learned what Traefik is (it redirects requests to the service that is meant to handle them I think).
Make your Website an APP with PWA
Tags: pwa, webtoapp, webtopwa, webdev
Published: 2023-01-13 16:52:03

A progressive web application(PWA), or progressive web app, is a type of application software delivered through the web, built using common web technologies including HTML, CSS, JavaScript, and Web Assembly. It is intended to work on any platform with a standards-compliant browser, including desktop and mobile devices. 

**Benefits of PWA:**
Progressive Web Applications (PWAs) offer a number of benefits over traditional native mobile apps and websites. Some of these benefits include:

1. Offline functionality: PWAs can work offline or on low-quality networks, allowing users to access content and functionality even when they don't have an internet connection.
2. Fast performance: PWAs are designed to be fast and responsive, providing a smooth user experience.
3. Easy installation: PWAs can be installed on a user's home screen without going through an app store, making it easy for users to access the app.
4. Low storage requirements: PWAs take up less space on a user's device than native apps, which can be a significant advantage for users with limited storage.
5. Low development costs: PWAs can be developed using web technologies, which are typically less expensive to develop than native apps.
6. Easier to maintain: PWAs can be updated and maintained through a single codebase, making it easier and less expensive to keep them up to date.
7. Discoverable: PWAs are indexed by search engines, making them easily discoverable by users searching for relevant content or services.

PWA allows website owners to make you website an app that can be installable on your devices, We all know it is better to have an app than users go to URL to visit sites.

**How to convert your website to PWA:**
Converting a website to a Progressive Web Application (PWA) typically involves the following steps:
1. Create a web app manifest: This is a JSON file that contains metadata about the PWA, such as the name, icons, and start URL. The manifest is used to configure how the PWA appears on the user's home screen and in other contexts.
2. Implement a service worker: Service workers are JavaScript files that run in the background and enable offline functionality and other features of PWAs.
3. Use HTTPS: PWAs must be served over a secure connection (HTTPS) to ensure the integrity and security of the application.
4. Test the PWA: Use tools like Lighthouse to test and optimize the PWA's performance, accessibility, and other factors.
5. Deploy the PWA: Once the PWA is ready, it can be deployed to a web server and made available to users.

Note: These are general steps and the actual implementation may vary depending on the specific requirements of your website and the tools you are using.

It's also worth noting that converting a website to PWA is not a one-time process, it's an ongoing effort, you have to continuously test, optimize and improve the app.

To use the this API, businesses will need to get a developer that implements this solution to your users need.
Contact: [Portfolio Link](https://mudassirali.com)
O que é o problema de consulta N+1 e como corrigi-lo?
Published: 2023-01-13 02:38:16


Já não é nenhuma novidade que bancos de dados normalmente tendem a ser "lentos", porem algo que pode prejudicar muito neste quesito talvez seja o que iremos abordar neste artigo.

O problema de consulta N+1 ocorre quando seu código executa um número instruções de consulta adicionais para buscar os mesmos dados que poderiam ter sido recuperados ao executar a consulta primária. 

Uma analogia que pode explicar isso com muita clareza talvez seja a de fazer um bolo de chocolate.

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

Imagine que você quer assar um bolo.
Na casa que você está a despensa fica fora da cozinha.
Você vai até seu quarto, pega um livro de receitas, e volta para a cozinha.

Então você verifica o primeiro item:

- 250 gramas de gotas de chocolate

Você vai à despensa buscar o chocolate, volta para a cozinha e lê a segunda linha:

- 3 Ovos

Você vai à despensa buscar os ovos, volta para a cozinha e lê a terceira linha:

- 130 gramas de manteiga

Logicamente cansado por todas aquelas idas e vindas, você toma o caminho para a despensa, DE NOVO. Se ao menos houvesse uma maneira mais simples…

O que aconteceria com você, se cozinhasse dessa maneira, é exatamente o que acontece quando temos um problema de consulta N+1. Seu ORM é forçado pelo seu código a fazer várias consultas adicionais (como as viagens de ida e volta para buscar os ingredientes) após a primeira consulta inicial (quando você buscou sua receita).

Como prevenir?

Saber como corrigir esses problemas é ótimo. Mas saber como evitar que eles entrem na sua base de código é ainda melhor!

Caso seu banco seja em Ruby a biblioteca Doctolib pode te ajudar. Ele ajuda você a capturar N+1 consultas enquanto desenvolve seu aplicativo da web.

Caso a linguagem seja java utilioze a biblioteca spring-hibernate-query-utils, ela faz com que seus testes falhem se N+1 consultas forem detectadas.

Se o ORM for em PHP implemente um mecanismo inteligente de carregamento antecipado "The Database Machine".

Caso use Python, "nplusone", uma biblioteca python para detectar o problema de consultas n+1 em Python ORMs, incluindo SQLAlchemy, Peewee e Django ORM.

Agora que você já sabe o que é uma consulta N+1, como corrigi-la e como detectá-la, esperamos que você não volte a despensa quase de mãos vazias.
CSS tutorial series: What is CSS?
Tags: css, webdev, beginners, tutorial
Published: 2023-01-13 16:36:47

CSS stands for Cascading Style Sheets. It is a styling language that defines the appearance of a document written in a markup language. It is primarily used to style HTML documents, CSS enables developers to divide a document's display from its structure and content, allowing them to maintain and update a website's design.

CSS has a multitude of features that help developers to manage the layout of a document written in a markup language such as color, font, etc... CSS's main aspects include the following:

* Selectors allow you to apply styles to specific  HTML elements.
* Properties permit you to alter the overall look of elements like color, font, and layout.
* Values: Specifies the values of the properties.
* Box model: Designates how components on a page are organized and interact with one another.
* Pseudo-classes and pseudo-elements: Add styles to components based on their state or placement in the document.
* Media queries: Allow you to customize different styles based on the screen size as well as devices.

CSS also has several different layout and positioning techniques, like flexbox, grid, and positioning, that can be utilized to handle custom and responsive designs.
Build a Full Stack Translation Web App Using React JS, ExpressJS, TypeScript (Part 1) | Free Video
Tags: react, webdev, docker, javascript
Published: 2023-01-13 16:31:23

In this video series, you will learn how to program a full-stack application consisting of a ReactJS frontend and an ExpressJS backend, as well as how to set up Docker and Docker Compose. We will be using the DeepL API that's freely available for this.

## Part 1

This first part will be setting up the Dockerfile, Docker-Compose, and env variables, as well as getting the DeepL API Key we will be needing later on.

## For who is this Video Series?

Feel free to follow along. This is specially targeted towards developers who are new to programming or people who wish to refresh their knowledge of the used technologies. Part of the series is explaining little things along the way that may prove quite useful.

{% youtube UwK9FmHU5s0 %}

## Table of Content
The content for this part is as follows:

00:00   - Intro
00:50   - setup Dockerfile
02:16   - setup Docker-Compose
04:43   - setup ENV
05:00   - Get API Key

If you have any questions feel free to let me know here or inside the video
Luos Native
Tags: opensource, luos, news, programming
Published: 2023-01-13 16:30:00

🆕Luos Native allows you to compile and run Luos directly on your computer, eliminating the need for hardware to test the possibilities of our devtool. 

This means you can develop and test your projects in a computer environment, using simulated boards and virtual wires to mimic physical connections. 

[Read more](https://www.luos.io/blog/luos-native-compile-luos-directly-on-your-computer) about the Luos Native and Digital Twins
Avoiding Burnout: Tips for Staying Happy and Positive in a High-Stress Job
Tags: mentalhealth
Published: 2023-01-13 16:28:17

Here are some tips for avoiding burnout and staying happy and positive in a high-stress job.

**Set boundaries:** It's important to set boundaries for yourself and make sure that you're not working all the time. Make sure to take regular breaks throughout the day and disconnect from work when you're not on the clock.
**Prioritize self-care:** Taking care of your body and mind is essential for avoiding burnout. Make sure to exercise regularly, eat well, and get enough sleep. It's also important to take time to do things you enjoy and relax your mind.
**Stay organized:** Being organized can help reduce stress and make it easier to manage your workload. Try to create a schedule and stick to it, prioritize your tasks and make sure to take time to plan your day.
**Learn to say no:** It's easy to take on too much work when you're a developer, but it's important to learn to say no when you're feeling overwhelmed. It's better to deliver high-quality work on a smaller number of tasks than to spread yourself too thin and produce mediocre work.
**Stay positive:** A positive attitude can make a big difference in how you handle stress. Surround yourself with positive people, and try to focus on the things you're grateful for.
**Stay connected:** Connecting with other developers, and attending meetups or conferences can also help you stay motivated and positive, you can share your experiences and learn new things from others.

Remember, it's important to take care of yourself both physically and mentally, set limits, and take time to relax and recharge. By following these tips, you can reduce the chances of burnout and stay happy and positive in a high-stress job.
How to manipulate text strings in JavaScript
Tags: javascript, webdev
Published: 2023-01-13 16:21:00

By the end of this article, you will have the ability to understand how text manipulation works. I will use the terms string and text interchangeably without getting scientific. 

Here in this snapshot you can see the text length

- length is property to get length of any string.
![Log](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0p4m8eykhh7zy5i6h36.png)

- Find the first position of a character searching from left-to-right.
Here we are finding the sting position by using 
- indexOf() method you next to pass the which character you want to get the positions.
In this snap we are finding the "!" position.
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yoxn1ngryp5n7ozvimjl.png)

1. Here we can check of any string starting with any specific character.

- It return True or False value 

```
const text = "Hello!"
const result =  text.startsWith('H')

console.log("imsav log===>", result);
```

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/62fsggndrt6r12gcgofp.png)
7 steps to Angular Material Dialog instead of Angular Component
Published: 2023-01-13 16:14:43

Another way to create Angular UI Component is using Dialog from Angular Material. It is not recommended to replace all components with it but it is rather useful for interactive elements like pop-ups, warnings, errors, etc.
There are 7 steps on how to start using dialogs in your Angular project.

**Step 1**: Adjust Angular Material for your project and create a basic Angular component (current name example: MyCreatedDialog) and add dialog reference.

Import MatDialogRef from @angular/material and add it to the constructor.

```ts
class MyCreatedDialog implements OnInit {
    constructor (
        public dialogRef: MatDialogRef<MyCreatedDialog>,
        …
    ) {}
    ngOnInit() {
        …
    }
    …
}
```

**Step 2**: Set modules in app.module.ts.

Import MatDialogModule, MatButtonModule (and others if needed) from Angular Material to app.module.ts and imported your MyCreatedDialog.component.ts.

Add your imported component to declarations and entryComponents of NgModule.

Add needed dialog modules to import of NgModule.
Example:

```ts
@NgModule({
    declarations: [..., 
        MyCreatedDialog
    ],
    entryComponents: [...,
        MyCreatedDialog
    ],
    imports: [...,
        MatDialogModule,
        MatButtonModule
    ], 
    …
})
```

**Step 3**: Import MyCreatedDialog into its father component (current name: FatherComponent). Import MatDialog from Angular Material and add it to the constructor.
Example:

```ts
class FatherComponent {
    constructor(
        …,
       private dialog: MatDialog
    ){}
    ...
}
```

**Step 4**: Control dialogs: open and get outputs.
Example:

```ts
openMyCreatedDialog() {
    const myCreatedDialogRef = this.dialog.open(MyCreatedDialog);
    myCreatedDialogRef.afterClosed().subscribe((res) => {
        //do things according to the received response and the aim
    })
}
```

**Step 5**: Add data input to MyCreatedDialog.
Add it to the function that opens the dialog:


```ts
openMyCreatedDialog() {
    const myCreatedDialogRef = this.dialog.open(MyCreatedDialog, { data: { title: I am a dialog } }););
    myCreatedDialogRef.afterClosed().subscribe((res) => {
        //do things according to the received response and the aim
    })
}
```


**Step 6**: Use passed data in MyCreatedDialog.

Import MAT_DIALOG_DATA from @angular/material and inject it in the constructor. Import Inject from @angular/core as well.

```ts
class MyCreatedDialog implements OnInit {
    dialogTitle: string;
    constructor (
        public dialogRef: MatDialogRef<MyCreatedDialog>,
        @Inject(MAT_DIALOG_DATA) public data: any,
        …
    ){}
    ngOnInit() {
        this.dialogTitle = this.data.title;
    }
    …
}
```

**Step 7**: Add function to html file of MyCreatedDialog.
Example:

```ts
<button (click)=openMyCreatedDialog(“New meaningful title”)></button>

```

**Step 8 - Extra: continue enjoying Angular :)**