teleren/devto huggingface dataset:
Work Management
Tags: work, workmanagement, teams, projectmanagement
Published: 2023-03-08 13:45:49

**Work Management Software**

_Introduction_

Work management is different from project management. This is associated with a set of procedures that the employees need to follow to complete their regular tasks. Work management is combined with the usage of workflows that are later distributed to the teams and individuals.

The work management consists of managing the following:

_Project:_

In this type of management level, the project manager will be responsible to assign tasks or works to the employees by providing the deadlines and later delivering the same to the business owner or client.

_Resources:_

In this level of management, company resources are to be involved to work on the project, thus enabling the project leader to manage them which includes meetings, taking work updates, providing the resource needs etc.

_Time:_

The assigned tasks should be given a time or a deadline to accomplish and to be delivered. Making this, each team member should be able to manage their time.

_Process:_

Process management involves the smart and considered use of resources

Nowadays, most of the companies either small, medium or large tech giants are following work management to better make their employees understand their goals and priorities.

To get this all done, work management software's are used. A work management software enables us to manage the following things:

_Plan tasks_

Every employee can easily plan their regular tasks using this software.

_Organize the work items_

Organizing the tasks make employee comfortable and reduce risk while execution.

_Tracking progress_

As employee may work on multiple work items, each item can be tracked easily and progress and performance of the individual can also be identified.

_Setting goals_

Business owner can set goals and inform the team members.

_Reporting_

Everyone can report anything easily by using boards, channels, or even using comments.

_Execution_

Execution of tasks by team are directly seen by manager anytime enabling him for planning the next work items or goals.

_Follow ups_

Each and everyone can follow up tasks which are linked to each other, this enables better communication and collaboration.

_Analysis_

Team can analyze and discuss regarding progress of work.

For more information [https://fsh.org.in/blog-details/Tools/Work+Management+Software/30](https://fsh.org.in/blog-details/Tools/Work+Management+Software/30)
Code Smell 200 - Poltergeist
Tags: webdev, beginners, programming, tutorial
Published: 2023-03-08 13:22:46

*An object that appears and disappears mysteriously*

> TL;DR: Add the necessary indirection layers, but no more.

# Problems

- [Accidental](https://dev.to/mcsee/coupling-the-one-and-only-software-design-problem-2pd7) complexity

- Readability

- YAGNI violation

# Solutions

1. Remove the intermediate object

# Context

A poltergeist (or gypsy wagon) is a short-lived object used to perform initialization or to invoke methods in another, more permanent class. 

An object is responsible for many small tasks, resulting in excessive coupling and a lack of cohesion in the code.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/e51b8f319d33c800895b14e463b3b380)
```csharp
public class Driver
{
    private Car car;

    public Driver(Car car)
    {
        this.car = car;
    }

    public void DriveCar()
    {
        car.driveCar();
    }
}


Car porsche = new Car();
Driver homer = new Driver(porsche);
homer.DriveCar();
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/0c13213cc8d76d0f1d5041deb94a7946)
```csharp
Car porsche = new Car();

porsche.driveCar();
// We don't need the driver
```

# Detection

[X] Manual

This is a design smell.

# Tags

- Complexity 

# Conclusion

Don't add accidental complexity to the essential complexity we already have. 

Remove [middleman](https://dev.to/mcsee/code-smell-67-middle-man-cn3) objects if they are not needed. 

# Relations

{% post https://dev.to/mcsee/code-smell-54-anchor-boats-5g25 %}

{% post https://dev.to/mcsee/code-smell-67-middle-man-cn3 %}

# More Info

- [Wikipedia](https://en.wikipedia.org/wiki/Poltergeist_(computer_programming))

# Disclaimer

Code Smells are my [opinion](https://dev.to/mcsee/i-wrote-more-than-90-articles-on-2021-here-is-what-i-learned-1n3a).

# Credits

Photo by [Lan Gao](https://unsplash.com/@langao) on [Unsplash](https://unsplash.com/images/things/ghost)
    
* * *

> The art of programming is the art of organizing complexity, of mastering multitude and avoiding its bastard chaos as effectively as possible.

_E. W. Dijkstra_
 
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}
Ecmascript 6: Uma introdução
Tags: ecmascript6, javascript, es6, webdev
Published: 2023-03-08 13:00:00

## Introdução
Hoje, iniciaremos um pequeno mergulho dentro do Ecmascript 6. A ideia de criar essa série, veio depois de iniciar a leitura do e-book ECMAScript 6 Succinctly - By Matthew Duffield. Entendi que seria uma boa compartilhar minhas anotações e o que tenho aprendido sobre.

Este artigo é o primeiro de uma série de 3, que irá percorrer os recursos do Ecmascript 6.

## Desenvolvimento

O ES6 possui uma série de features interessantes (falaremos nos próximos posts). Porém, nesse primeiro, iremos focar em algumas perguntas e conceitos introdutórios.

### O que é ES6?

Ecmascript 6 (ES6) ou ECMAScript 2015 é a 6º edição do padrão de especificação da linguagem ECMAScript. Ela define quais são os padrões para a implementação de JavaScript (se você já utilizou o ecossistema Java, deve estar familiarizado com os conceitos de especificação e implementação).

### Qual a diferença entre JavaScript e ES6?

Provavelmente, já deve ter ficado claro no parágrafo anterior. Mas para destacar, em poucas palavras, podemos dizer que ECMAScript é uma especificação de linguagem, ou seja, ela define os padrões para uma linguagem de programação, e o JavaScript é a implementação desses padrões.

###Transpilação e ES6

Nem todos os navegadores suportam todas as features do ES6. Portanto, é necessário que o seu código ES6 seja transpilado para uma versão compatível com todos os navegadores. Transpilar significa simplesmente converter seu código ES6 para ES5, dessa forma ele poderá ser lido por todos os navegadores. O transpilador mais popular para ES6 é o [Babel](https://babeljs.io/).

## Conclusão

Neste artigo, nós aprendemos sobre o ECMAScript 2015 ou ES6, que é responsável por definir os padrões para implementação JavaScript. Nós também percebemos a diferença entre JavasScript e ES6. Por fim, aprendemos sobre o funcionamento do transpilador e sua utilidade para o ES6.

Espero que tenham gostado. Qualquer dúvida, sugestão ou correção, estou a disposição. Nos vemos no próximo post!

## Fontes
- [ECMAScript 6 Succinctly - Matthew Duffield](https://www.syncfusion.com/succinctly-free-ebooks/ecmascript-6-succinctly)
AWS S3 VPC Endpoint (Доступ до S3 з приватної мережі)
Tags: aws, s3, vpc
Published: 2023-03-08 12:54:12

Як ми знаємо, щоб отримати доступ до **S3** бакета, наприклад з **EC2** інстансу нам потрібне інтернет з'єднання.

Приклад:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ygj5vs86ej3yl42rgy11.png)


Тобто, прибравши **Internet Gateway** з цієї схеми і лишивши **EC2** інстанс з'єднання з інтернетом, ми не зможемо отримати доступ до нашого **S3** бакета.



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

**S3 VPC Endpoint** може вирішити цю проблему.

**VPC Endpoint** - це віртуальний масштабований мережевий компонент, який ви створюєте у VPC і використовуєте як приватну точку входу до підтримуваних служб AWS і сторонніх додатків.
В контексті AWS, **VPC Gateway Endpoint** - забезпечує надійне підключення до **AWS S3**, не вимагаючи доступу до Інтернету.

_За використання **VPC Endpoint** додаткова плата не стягується._


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

Hands On:)

Перейдіть до VPC сервісу в AWS консолі, перейдіть до розділу “Endpoints” та виберіть “Create endpoint”.


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

- Service category - виберіть “_AWS services_”.

- Services - додайте фільтр:
**Type:** _Gateway_ 
Виберіть _com.amazonaws.region.s3_

- VPC - оберіть потрібну VPC в якій ви хочете створити ендпоінт.


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


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

- **Route tables** - виберіть таблицю маршрутизації яка буде використана для Ендпоінта.
- **Policy** - оберіть **Full access** , щоб дозволити всі операції для будь-якого користувача чи сервісу для всіх ресурсів через VPC Endpoint, або згенеруйте свою **Policy**.


Тепер якщо ви зайдете на свій EC2 інстанс який знаходиться в приватній мережі, ви зможете підключатись до своїх s3 бакетів.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rluzs45hb9zu58hyfnd4.png)
10 tricks to improve your website
Published: 2023-06-12 17:15:24

---
title: 10 tricks to improve your website
published: true
date: 2023-03-08 12:51:39 UTC
tags: 
canonical_url: 
---

Welcome to the wild and wonderful world of website improvement. Whether you're a seasoned website owner or a newbie, there's always something you can do to make your website better. So let's get ready to learn some cool tricks to improve your website's experience.

1. 
### Make it mobile-friendly

Do you know what's **not** cool? A website that looks terrible on mobile devices. With more and more people using their phones to browse the web, it's important to make sure your website is optimized for mobile. If your website isn't mobile-friendly, you're missing out on a huge chunk of potential visitors.

1. 
### Keep it simple

There's nothing more annoying than a website that's cluttered with unnecessary elements. Keep your design simple and clean, and make it easy for visitors to find what they're looking for.

1. 
### Speed it up

What's even more annoying than a cluttered website? A slow website. Nobody has time to wait for your website to load, so make sure it's as fast as possible. Compress images, optimize code, and use a content delivery network (CDN) to speed up your website.

1. 
### Use high-quality images

Speaking of images, make sure they're high-quality. Blurry or pixelated images are a surefire way to turn off visitors. Use high-resolution images that look good on all devices.

1. 
### Use engaging headlines

Your headlines should be interesting and engaging. Nobody wants to read a boring headline, so make sure yours are attention-grabbing.

1. 
### Use clear calls-to-action

Your website should have clear calls-to-action (CTAs). Whether you want visitors to sign up for a newsletter, make a purchase, or contact you, make sure it's easy for them to do so.

1. 
### Add social proof

People are more likely to trust your website if they see social proof. This can be in the form of customer reviews, testimonials, or social media shares.

1. 
### Make it accessible

Your website should be accessible to everyone, including people with disabilities. Use alt text for images, make sure your website is keyboard-friendly, and follow web accessibility guidelines.

1. 
### Use videos

Videos are a great way to engage visitors and keep them on your website longer. Use videos to showcase products, share information, or tell a story.

1. 
### Test and iterate

Finally, test and iterate. Use website analytics to see what's working and what's not, and make changes accordingly. A website is never truly finished, so keep tweaking and improving as you go.

* * *

So there you have it, 10 cool tricks to improve your website's experience. Remember, a good website is one that's easy to use, engaging, and accessible to all. Happy website building!
Interactive Microservices as an Alternative to Micro Front-Ends
Tags: webdev, frontend, microservices, architecture
Published: 2023-03-08 12:48:16

**[TRENDING ON INFOQ]**

[❝Interactive Microservices as an Alternative to Micro Front-Ends for Modularizing the UI Layer❞](https://www.infoq.com/articles/qworum-modular-ui-architecture/)

As you may know, the rate of adoption for micro front-ends have been tepid so far, and as a result monolithic frontends remain a significant impediment for microservices architectures. Qworum is a solution to this issue which plagues large-scale software systems.

Qworum is a frontend PaaS that brings all the benefits of microservices to the UI layer, and makes web UIs fully compatible with microservices architectures. 

Qworum is pioneering several industry-firsts:

- a new type of microservice (the interactive microservice), 
- a new type of web API (the multi-phase web API), 
- a platform for distributed web applications,
- a new type of web (Qworum’s Service Web is about interlinked microservices, whereas the World Wide Web and the Semantic Web are about interlinked content).

![Qworum’s “everything is a microservice, including applications” UI paradigm and the “micro frontends plus container applications” UI paradigm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t4co5gyivu7jwbcwx8u5.png)

_Qworum’s “everything is a microservice, including applications” UI paradigm and the “micro frontends plus container applications” UI paradigm_
How to Extract Every Nth Line from a Text File
Tags: linux
Published: 2023-03-08 12:44:33

To output every fifth line starting from the first line, sixth line, eleventh line, and so on,

```bash
$ sed -ne 1~5p < data.txt
$ awk NR%5==1 < data.txt
$ perl -nle '$.%5==1 && print' < data.txt
$ ruby -nle '$.%5==1 && print' < data.txt
```

To output every fifth line starting from the fifth line, tenth line, fifteenth line, and so on, 

```bash
$ sed -ne 0~5p < data.txt
$ awk NR%5==0 < data.txt
$ perl -nle '$.%5==0 && print' < data.txt
$ ruby -nle '$.%5==0 && print' < data.txt
```

At first glance, Perl and Ruby may appear to be the same.
How to setup Tailwind CSS in your React App.
Published: 2023-03-08 12:39:10

### Introduction

Tailwind CSS is a popular utility-first CSS framework that helps to quickly build modern websites and applications. In this tutorial, we'll go through the steps to set up Tailwind CSS in a React app.

### Prerequisite
 
Make sure you have the following installed on your computer; 
* Nodejs 
* Npm  

If you don't have them, you can download and install them from the official Node.js website. 

### Create React App

Set up your react application using the create-react-app command. Open your terminal or command prompt and enter this command:

```curl
npx create-react-app my-app
```
This command will create a react app with all necessary structure that comes along with it. The time it takes for the process to complete depends on how fast your internet connection is. 

### Install TailwindCSS

We need to install Tailwind CSS and all its dependencies in our React app. To do so, let’s navigate to your our new react app in the terminal and install all TailwindCSS dependencies using the following command:

```curl
npm install -D tailwindcss
npx tailwindcss init
```
If you intend to work with tools like webpack, Rollup, Vite and Parcel, it is recommend to install Tailwind as a PostCSS plugin, you can do that using the following command: 

```curl
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
```
If you used the PostCSS command, make sure to confirm if Tailwind was added to the PostCSS configuration in your postcss.config.js file.

```css
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}
```

Both CLI and PostCSS requires templates paths configuration in order for Tailwind to work in your react app. Inspect your tailwind.config.js file and make sure you have the following configuration: 

```css
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
```
Next, we need to add the @tailwind directives for each of Tailwind’s layers to your main CSS file. Let’s navigate to `src` folder and create `index.css` and add the following lines.

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

### Using Tailwind Classes in React 

We can use Tailwind CSS classes in our React app. Go to the src/App.js file and replace its contents with the following code:

```javascript
import React from 'react';
Import ‘./index.css’
function App() {
  return (
    <div className="bg-gray-200">
      <h1 className="text-4xl font-bold text-center pt-20">Welcome to my Tailwind CSS app</h1>
      <p className="text-gray-800 text-center mt-10">Let's build something amazing!</p>
    </div>
  );
}
export default App;
```
If you review the above code, you can see that we used Tailwind CSS classes to set the background color, font size, font weight and text alignment of our `App` component.
Como utilizar transactions de forma simples no framework Nest.js
Tags: transaction, nestjs, typeorm, transacoes
Published: 2023-03-08 12:25:24

O Nest.js fornece suporte para transações usando a biblioteca TypeORM, que é uma biblioteca ORM popular para Node.js. 

Para utilizar transações em Nest.js, você pode seguir os seguintes passos:

1 - Importe a classe Connection da biblioteca TypeORM:

```
import { Connection } from 'typeorm';
```

2 - Injete a conexão do TypeORM no seu serviço ou controlador:

```
import { Injectable } from '@nestjs/common';
import { InjectConnection } from '@nestjs/typeorm';
import { Connection } from 'typeorm';

@Injectable()
export class MyService {
  constructor(
    @InjectConnection() private connection: Connection,
  ) {}
}
```

3 - Utilize o método transaction do objeto connection para executar uma transação:

```
await this.connection.transaction(async (manager) => {
  // Execute as operações de banco de dados aqui
});
```
Dentro da função passada para transaction, você pode executar as operações de banco de dados que desejar, como inserções, atualizações ou exclusões. Se uma exceção for lançada dentro da função, a transação será revertida automaticamente.

Por exemplo, se você quiser criar um novo usuário e um novo post ao mesmo tempo em uma transação, pode fazer algo assim:

```
await this.connection.transaction(async (manager) => {
  const user = await manager.create(User, { name: 'John' });
  const post = await manager.create(Post, { title: 'Hello, World!', content: 'This is my first post.' });
  await manager.save(user);
  await manager.save(post);
});
```

Observe que estamos usando o método create do gerenciador de entidades do TypeORM para criar novos objetos do usuário e do post, e depois estamos salvando esses objetos usando o método save. Essas operações são executadas dentro da transação. Se algo der errado, a transação será revertida e nenhum usuário ou post será salvo no banco de dados.

Isso deve ajudá-lo a entender como utilizar transações de forma simples no framework Nest.js com o TypeORM.

Bons estudos!
Gatsby & Netlify, Next js 13.2, Turborepo 1.8 and New Releases - Frontend News #32
Published: 2023-03-08 12:16:15

{% youtube DnxVaUKBv-w %}

What’s in the newest Frontend News 32? Watch the video about the newest features and updates here:

🟣 NextJS 13.2
🟣 Gatsby & Netlify
🟣 Turborepo 1.8
🟣 What's New In DevTools (Chrome 110)
🟣 Lighthouse 10

Enjoy, you can also read the article at [Frontend House](https://frontendhouse.com/frontend-news/gatsby-and-netlify-next-js-132-turborepo-18-and-new-releases-frontend-news-32).
Svelte or React: Which Framework is Best for Your Next Project?
Tags: react, svelte, javascript, beginners
Published: 2023-03-08 12:13:28

Are you torn between Svelte and React for your next web development project? 🤔 Don't worry, we've got you covered! Check out our latest article on the pros and cons of each framework and choose the one that fits your project like a glove 👨‍💻👩‍💻 Read now and let us know which one you prefer in the comments!

Read the article on [Liki Blog](https://likims.com/blog/svelte-or-react-which-framework-is-best-for-your-next-project).
How to make your email template have nice beautiful background and image shown and be editable...?
Tags: html, bootsrap, jquery
Published: 2023-03-08 12:11:41

Hi Team

I am trying to create email template locally, but need help with regarding background beautiful light brown similar background image attached on this topic. But currently its not showing to be beautiful and does not appear good. Because later i want it to be used amongst the team as our email-template to be editable for other stuff to use for different titles etc.

// code for email template

````<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">


<div style="font-family: Arial; font-size: 12px;">
  <p>
    <body>
	<img src="C:/Users/Zux/Documents/company-reg" alt="" width="100"
         height="80"><br>
    Software Engineer<br>
    Agile Limitless Development<br>
    Phone: 087822 1286<br>
    Email: gcobani.mkontwana@agilelimitless.org.za<br>
    Website: <a href="http://www.acifinance.co.za">www.acifinance.co.za</a>
	<body>
  </p>
</div>`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ydatxkgf0330hu4itfo3.png)
```
Introdução ao Terraform Import
Tags: terraform, cloud, devops, braziliandevs
Published: 2023-03-08 12:05:29

É improvável que você lidará apenas com projetos novos em infraestrutura de nuvem, então como você pode continuar a usar a IAC (Infraestrutura como Código) com os componentes que já estão em produção?

Você pode importar recursos de infraestrutura existentes para o Terraform usando o comando terraform import.

Na documentação de recursos do provedor, há sempre um exemplo de como importar esse recurso para o Terraform.

Por exemplo:

Na documentação do recurso aws_instance (**[https://registry.terraform.io/providers/hashicorp/aws/latest/docs/resources/instance](https://registry.terraform.io/providers/hashicorp/aws/latest/docs/resources/instance)**), há um exemplo de como importar instâncias:

```terraform
$ terraform import aws_instance.web i-12345678
```

A implementação atual (terraform_1.3.4) do import do Terraform só pode importar recursos para o estado atual. Ele não gera configuração. Uma versão futura do Terraform também gerará configuração.

Portanto, antes de executar o terraform import, é necessário escrever manualmente um bloco de configuração de recurso no qual o objeto importado será mapeado.

Embora possa parecer tedioso, ainda oferece aos usuários do Terraform um caminho para importar recursos existentes.

O seguinte link é um tutorial prático sobre como importar recursos para o Terraform:
**[https://developer.hashicorp.com/terraform/tutorials/state/state-import?utm_source=WEBSITE&utm_medium=WEB_IO&utm_offer=ARTICLE_PAGE&utm_content=DOCS](https://developer.hashicorp.com/terraform/tutorials/state/state-import?utm_source=WEBSITE&utm_medium=WEB_IO&utm_offer=ARTICLE_PAGE&utm_content=DOCS)**