teleren/devto huggingface dataset:
Setup Nextjs Tailwind css e Typescript
Tags: react, nextjs, tailwindcss, typescript
Published: 2022-06-27 07:54:16

Olá devs no post de hoje vamos aprender a  crair um setup Nextjs Tailwind css e Typescript.

O setup que vamos aprender a criar hoje é um setup que vai ti possibilitar criar aplicações front end com mais rapidez e eficiência.

Segue os seguintes passos para criar o setup.


## Instalar o Nextjs e  o Typescript

Para instalar o Nextjs e o Typescript tens que ter o nodejs instalado na tua máquina. Como o nodejs instalado na tua máquina é só você  digitar os seguintes comandos no teu termux ou terminal.

`yarn create next-app my-app --typescript` 
ou
`npx create-next-app@latest my-app --ts`

## Instalar o Tailwind css 

Para instalar o Tailwind css digite os seguintes comandos.

`npm install -D tailwindcss postcss autoprefixer`

`npx tailwindcss init -p`
ou
`yarn add -D tailwindcss postcss autoprefixer`

`yarn tailwindcss init -p`


## Configurar o Tailwind css

Depois de instalar o Tailwind css acesse o arquivo `tailwind.config.js` que está dentro do projecto `my-app` e adicione os seguintes códigos.

```
module.exports = {
content: [
"./pages/**/*.\/{js,ts,jsx,tsx\/}",
"./components/**/*.{js,ts,jsx,tsx\}",
], 
theme: {
extend: {

},
}, plugins: [

], }
```
Depois também acesse pasta `styles` que está dentro do projecto `my-app`  apague o arquivo `Home.module.css` e apague todo que está dentro do arquivo `globals.css`  e cole os códigos a baixo.

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

## Programar um pouco

Agora é a hora de programar um pouco acesse o arquivo `index.tsx`  que está dentro do projecto `my-app ` na pasta `pages` e apague todo e adicione os seguintes códigos.

```
import React from "react";  
  function App() {
  return <h1 className="min-h-screen min-w-screen bg-blue-400 text-3xl flex justify-center items-center">Ola mundo</h1>
  }
export default App
```

Agora é só executar.

E assim o teu setup Nextjs Tailwind css e Typescript está montado agora é só você começar a criar aplicações front end mais rapidamente e com uma qualidade muito mais alta

Si este conteúdo foi relevante para você por favor si inscreve no meu Blog porque todas as semanas vai ter conteúdo novos sobre programação no celular termux vim nodejs reactjs nextjs javascript html css e muito mais até ao próximo post dev. o lema é Mão na **Massa**.

Link do meu blog [mao-na-massa](https://mao-na-massa.vercel.app/)
Envio de email com nodejs
Tags: node, javascript, html, css
Published: 2022-06-27 07:41:19

Olá devs no post de hoje vamos aprender a como enviar emails com nodejs. 

Nodejs é um ambiente de desenvolvimento javascript no lado servidor. 

Segue os passos a baixo 

## Inicializar um projecto nodejs 

Abra o termux no teu celular ou terminal no teu computador e digite os seguintes comandos. 

`mkdir sendEmail` 

`cd sendEmail` 

`npm init -y` 

# Instalar o `nodemailer` 

O `nodemailer` é um pacote nodejs que facilita o envio de emails. 

Abra o termux no teu celular ou terminal no teu computador e digite os seguintes comandos. 

`npm install nodemailer` 

# credenciais do Gmail 

Para enviar emails com nodejs no Gmail tens que ter as credenciais do Gmail para aplicativos. 

Abra o gerenciador de contas Google no teu celular ou computador activa a validação de dois passos e segue os seguintes passos. 

- No gerenciador de contas do Google clicar em segurança 
- Na caixa que está escrito iniciar sessão no Google 
- Vais ver um botão escrito Palavras-passe de aplicativos 
- Clique neste botão e introduza a sua senha do Google
- Vais ver um parte escrito selecionar aplicação 
- Clique neste botão e seleccione correios
- Também vais ver um botão escrito selecionar o dispositivo 
- Clique neste botão e seleccione computador Windows
- Clique em `Gerar`
- Copie as letras que vão aparecer no quadrado e guarda 

# Enviar o email 

Abra o termux ou terminal na pasta sendEmail e digite os seguintes comandos. 

`touch index.js` 

Si você usa o `vs code` ou outro editor de código abra este arquivo `index.js` no teu editor de código mais eu vou usar `neovim ` 
`nvim index.js` 

Depois de estares no teu editor de código digite os seguintes códigos 

`const nodemailer = require("nodemailer")` 

`const transporter =` `nodemailer.createTransport({`
`service: "gmail",`
`auth: {`
`user: "O teu emai",`
`pass: "Palavra-passe que eu mandei você guardar"`
`}`
`})` 

`const mailOptions = {`
`from: "O teu email",`
`to: "O email do destinatário",`
`subject: "Ola",`
`text: "Tudo bem fofo"`
`}` 

`transporter.sendMail(mailOptions,(err,info) => {`
`if(err) throw err`
`console.log(info)`
`})` 

Agora e só salvar e executar o arquivo 

`node index.js` 

E assim o email foi enviado para você confirmar abra o Gmail do destinatário que vais ver um novo email escrito `Tudo bem fofo` 

Muitos parabéns você conseguiu enviar emails com nodejs. 

Si este conteúdo foi relevante para você por favor si inscreve no meu Blog todas as semanas vai ter conteúdo novos sobre programação no celular termux vim nodejs reactjs nextjs javascript html css e muito mais até ao próximo post dev o lema é **Mão na Massa**

Link do meu blog [mao-na-massa](https://mao-na-massa.vercel.app/)
Macro Vs Function
Tags: c, macro, function, beginners
Published: 2022-06-27 07:38:03


|   **Macro**   | **Function**  | 
| --------- |:---------:| 
| It is a fragment of code  given a name **macro** and is defined by the preprocessor directive **#define**. In the program before compilation, the macro  is replaced by its macro value (or text).| It is a set of instructions enclosed within a flower **({})** bracket. When a **function** is called, it performs the specific task and returns to the main program.| 
| It is preprocessed.| It is compiled. | 
| **Macros** makes the code lengthy if its value is large because **macros** will be replaced with its value before compilation.| The repeated call to function does not affect the code length as it is written only once. | 
| The program execution time remains unaffected using **macro** | Here, the passing of parameters and returning of values takes some time and hence the program execution becomes slow.| 
In a program, if the **macro** is appearing at multiple places then it is always a better idea to change that **macro** into a **function** because **macros** will be replaced with its value which causes more memory consumption. |In a program, calling the same **function** repeatedly does not affect the memory consumption.|
| No type checking (like incompatible data type, operand etc.) is done during preprocessing hence more prone to error.| Type checking is done during compilation. |
 
**If you find any comparison other than these then please do suggest.**
#TestCulture 🦅 Episode 3 - Testing is everyone's business!
Tags: testing, agile, softwaretesting, devops
Published: 2022-06-27 07:31:37

In the past, testers were at the end of the chain, after a very complex V-cycle. Cycle times were increased by 𝟐𝟎%, while the acceptance phase tended to be even more shortened. 😰

Today, mentalities have not really changed, but it is more a question of mindset.😎

While Agility is used in all sorts of ways, a tester still accumulates dozens of tickets to test at the end of the sprint. 📈 The test phase is still the most compressible stage of the project. 🙁

We can quickly come to an amalgam: automating tests 🔁 = faster 🏃‍♂️ = more deliveries with more added value. 💢

Testing and quality in the broadest sense is a mindset that is adopted in the project from the design phase. 💭It can be beneficial to support the tester from the specification phase and also to involve him in workshops, to give him time to adopt the right tools to collaborate.🤝

The tester's job is not to retrieve code that he barely controls, on which he must work alone. ☝️ It is a commitment from all stakeholders to deliver a quality product with high added value. 💪

And you? What do you think about the role and the place of testers? 🧐

[Thread on Twitter.](https://twitter.com/agilitest/status/1507024473836425220?s=20&t=QExBEZIGsK73QhoDFz6lVw)

-----
Reactjs no celular
Tags: react, javascript, html, css
Published: 2022-06-27 07:30:15


Olá devs no post de hoje vamos aprender a criar um app react no celular 

O reactjs é uma biblioteca javascript que facilita a desenvolvimento de interfaces web. 

Para seguires bem este post eu recomendo que tenhas o termux e o neovim instalados no teu celular. Mais si não tiveres não si preocupa porque eu já escrevi um post que explica detalhadamente com instalar e configurar termux e o neovim. 

O nome do post é [como configurar o neovim no termux](https://mao-na-massa.vercel.app/post/como-configurar-o-neovim-no-termux). 

Segue os passos a baixo. 

## Instalar o nodejs 

Abra o termux e digite os seguintes comandos 

`pkg install nodejs` 

`node -v` 

`npm -v` 

E assim o nodejs já está instalado na tua máquina. 

## Instalar o yarn 

Abra o termux e digite os seguintes comandos 

`npm install -i yarn` 

`pkg install yarn` 

E assim o yarn já está instalado na tua máquina. 

## Criar um app react 

Abra o termux e digite os seguintes comandos 

`yarn create react-app my-app-react` 

`cd my-app-react` 

E assim está criado um app react no teu celular. 

## Primeiro `Ola mundo` em react no celular 

Abra o termux na mesma pasta que deixamos no passo anterior e digite os seguintes comandos. 

`cd src` 

`nvim App.js` 

Agora vais apagar tudo que está neste arquivo e vais adicionar os seguintes códigos. 

`import React from "react";`
`function App() {`
`return <h1>Ola mundo</h1>`
`};`
`export default App;` 

Depois e só salvar e sair do neovim e executar 

Comando para executar app react 

`yarn start`


E assim o teu app react já está executado para você ver si está a funcionar entra no teu navegador e pesquisa `http://localhost:3000/` e vais ver um tela branca escrita `Ola mundo` 

Muitos parabéns você conseguiu criar e executar um app react no celular. 


Si este conteúdo foi relevante para você por favor si inscreve no meu Blog todas as semanas vai ter conteúdo novos sobre programação no celular termux vim nodejs reactjs nextjs javascript html css e muito mais até ao próximo post dev o lema é **Mão na Massa**

Link do meu blog [mao-na-massa](https://mao-na-massa.vercel.app/)
Pure CSS Woman Wearing Face Mask
Tags: codepen, html, css, webdev
Published: 2022-06-27 07:16:50

---
title: Pure CSS Woman Wearing Face Mask
published: true
tags: codepen,html,css,webdev
---

{% codepen https://codepen.io/AsyrafHussin/pen/LYdPOoG %}

<p>Speed Code Video
<a href="https://twitter.com/asyrafhussin4/status/1541307022297030656" target="_blank">https://twitter.com/asyrafhussin4/status/1541307022297030656</a></p>
Get Started with Next.js, Typescript, Tailwind
Tags: webdev, tailwindcss, typescript, react
Published: 2022-06-27 07:04:55

This post is about a starter template I have made with **minimal** setup bootstrapped with Next.js, TypeScript and Tailwind CSS.

The versions of the tech used will be updated with latest.

You can check out the [starter page here.](https://ntt-starter.piyushpandey.tech/)

> Having a starter template is better than a step-by-step guide.

{% embed https://github.com/zephyrus21/next-ts-tailwind-starter %}

### Thanks for reading
If you like my work give it a 🌟 and connect to me with [piyushpandey.tech](https://piyushpandey.tech)
Design Patterns With TypeScript Examples: Facade
Tags: javascript, programming, tutorial, webdev
Published: 2022-06-27 06:50:30

![Facade of building](https://miro.medium.com/max/1400/1*UXE09mto-9vivgg00bV_YA.jpeg)

The Facade Pattern defines a higher-level interface to make subsystems easier to use.

{% medium https://medium.com/@mariusbongarts/design-patterns-with-typescript-examples-facade-878e59097ac %}
Editor4J: A lightweight code editor for learning
Tags: beginners, java, tooling
Published: 2022-06-27 05:50:45

Update: _Editor4J is right now in hibernation. It's a project I rarely work on but I do add new features maybe once a year. This was a learning project to learn more about Swing and has evolved into a capable beast with language support, persistence, themeing, extensibility and more, I'll work on it when I want to and the community is more than welcome to tag along :)_

Hello :)

Have you ever started learning to code, but been overwhelmed by the complexity of professional grade IDEs? Or have you tried using Notepad to edit code but wished that it had syntax highlighting, multi-tab support and more? 

I just released 2022.3 of Editor4J. A lightweight code editor that does all these things. I've been working on it for roughly 8 months now and it's starting to take shape. Check it out at https://github.com/skyloft7/Editor4J-new

Try out the 2022.3 release in the bottom-right area. Drop a comment and let me know what you think! 

Thanks!
What is Hoisting?
Tags: javascript, webdev, beginners, tutorial
Published: 2022-06-27 05:33:35

Hoisting is simply access the functions before they are declared.

Let's take up an example:

```
disp()
console.log(x);

var x=20;
function disp(){
    console.log("30DaysofJS")
}
```
Calling a function and a variable before declaring them. The output here is, surprisingly, 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/swav4bs8hctcvq9csy0z.png)

In JS, the **variables are all initialized as undefined in the first stage** of memory allocation, hence even before the execution of code, it gives **undefined** rather than an error.

For a **function, it puts a copy of the whole function** in the first stage (in global memory space).

But an **arrow function is treated as a variable** and given an undefined placeholder.

## What about let & const?

```
console.log(n); 

let n = 26;
```
The output is as follow, the `let` and `const` declarations are given memory but are not given a placeholder hence the error.

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

 
<br/><br/>

> JavaScript only hoists declarations, not initializations! This means that initialization doesn't happen until the associated line of code is executed
[🌟 Hoisting by MDN](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)
[🌟 Hoisting in JS| Akshay Saini](https://www.youtube.com/watch?v=Fnlnw8uY6jo&ab_channel=AkshaySaini)
CSS Battle: #3 - Push Button
Tags: css, webdev, beginners, tutorial
Published: 2022-06-27 04:56:26

In this article, I will solve a [Push Button](https://cssbattle.dev/play/3) CSS Challenge on [CSS Battle](https://cssbattle.dev/). Let's look at the [problem](https://cssbattle.dev/play/3) first.

## Problem 

We need to create the following container by using CSS Properties only:
![Simply Square](https://cssbattle.dev/targets/3.png)

## Solution

So now look at the Solution and how we are going to achieve this. 

### HTML


<CodeTitle title="index.html" lang="html"/>
```html
<div class="box"></div>
<div class="circle"></div>
```

It contains two `div` one for the box and the other for circle.

### CSS

Now let's style the containers. 

<CodeTitle title="styles.css" lang="css"/>
```css
body {
  margin: 0;
  background: #6592CF
}
.box {
  background: #243D83;
  width: 300;
  height: 150;
  transform: translate(50px, 50%)
}
.circle {
  position: absolute;
  transform: translate(75px, -50%);
  background: #243D83;
  width: 150;
  height: 150;
  border: 50px solid #6592CF;
  border-radius: 999px
}
.circle::before {
  position: absolute;
  content: "";
  border-radius: 10rem;
  inset: 50px;
  width: 50;
  height: 50;
  background: #EEB850
}
```
>Note: In CSS Battle you can use `100` instead of `100px`. You don't need to define `px` in CSS. However, if you are using `rem` or `%` then you need to pass them separately. That's why in the above CSS code there are no units mostly. For more info [visit here](https://cssbattle.dev/tips)

## Codepen 

{% codepen https://codepen.io/j471n/pen/abWdXJJ %}

## Alternate Solution

There could be many Alternative Solution I've used this one because of the less characters and simplicity.

### HTML

```html
<p b></p>
<p c></p>
```

Here I am using `<p>` tag and inside them `b` stands for box and `c` stands for circle.

### CSS

```css
body {
  margin: 0;
  background: #6592CF
}
p[b] {
  background: #243D83;
  width: 300;
  height: 150;
  transform: translate(50px, 50%)
}
p[c] {
  position: absolute;
  transform: translate(75px, -63%);
  background: #243D83;
  width: 150;
  height: 150;
  border: 50px solid #6592CF;
  border-radius: 999px
}
p[c]::before {
  position: absolute;
  content: "";
  border-radius: 10rem;
  inset: 50px;
  width: 50;
  height: 50;
  background: #EEB850
}
```


## Tip

>Minify the code or CSS by using any [CSS Minifier](https://www.minifier.org/). It helps you to reduce the characters in the code that will increase score.

## Wrapping up
If you like this then don't forget to ❤️ it. And I'll see you in the next article. See you soon.
Personal Setup TypeScript + Node.js Project
Published: 2022-06-27 04:46:43


## 1. install Node.js

###install nvm using homebrew
```zsh
brew install nvm
# do additional setup for nvm
```

###install Node.js using nvm
```zsh
# install specific version of Node.js
nvm install v16.15.1
nvm install v12.13.0

# show list of Node.js version
nvm ls

# use specific version of Node.js
nvm use 12.13.1
nvm use 16.15.1
```

## 2. init Node.js project
```zsh
# create folder, npm init by default setting 
mkdir sample_project && cd "$_" && npm init --y

# install required basic package for development
npm i -D typescript @types/node ts-node-dev 
```
> [typescript](https://www.typescriptlang.org/), their type definition is placed at node_modules/@types
> [@types/node](https://www.npmjs.com/package/@types/node) this packages contains type definition for Node.js (e.g. Promise)
~~[ts-node](https://www.npmjs.com/package/ts-node) TypeScript execution and REPL for Node.js~~
> [ts-node-dev](https://www.npmjs.com/package/ts-node-dev) Tweaked version of node-dev that uses ts-node under the hood.

## 3. additional setup

generate tsconfig.json file
```zsh
npx tsc --init
```

tsconfig.json
```json
{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "rootDir": "./src",
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}
```

package.json
```json
 "scripts": {
    "dev": "ts-node-dev src/index.ts",
    "build": "tsc",
    "start": "node dist/index.js"
  }
```

connect to github repository

setup for service
Mtech Projects For ECE
Tags: webdev, javascript, programming, python
Published: 2022-06-25 05:50:40

Engineering student projects for B.Tech and M.Tech final year students. Takeoff Edu Group offers a wide range of projects best for [mtech projects for ece](https://takeoffprojects.com/mtech-projects-for-ece) looking for magnificent final projects at low cost. 

We have successfully delivered mtech projects for ece to our engineering students. Our programs are specially designed by experts for best results of mtech projects for ece for engineering students. max of the B.Tech, M.Tech, PhD and Diploma scholars.
 
Takeoff Edu Group provides the most creative conceptions and ideas that can make very effective final year projects for scholars, experimenters, and engineers. So browse through our list of [mtech projects for ece](https://www.youtube.com/watch?v=f3GJE5pGOnI) and choose the smart final year projects for your requirements.

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

The term MTech stands for Master of Technology and it's a professional master’s degree in the engineering field. The duration of this degree is two years and the eligible campaigners for this degree program are the scholars who have finished their BE or BTech degree program. The admissions of this degree are grounded on the rank attained in the entrance examinations of GATE or PGECET. This master’s degree offers several specializations across India like ECE, Power Electronics, Embedded, Civil, Computer Science, Chemical, Electrical, VLSI, Mechanical, Software Engineering, etc.
 
Ever since my academy days, I've been interested in the theoretical architectures in Mathematics and Sciences, which drive the digital world. I used to watch ‘ How Stuff Works ’ on the Discovery Channel and was in awe every time I saw it. Seeing the manner in which the Electrical devices were erected and the colorful processes involved, invested a desire in me to be part of this process.
 
The amazing task of connecting the world is the monopoly of electronic devices; hence, I made Electronic & Communication engineering my choice. In addition to chancing out how a device operates, I've always been interested in design aspects and watching the nascent faults being within electronic widgets. This appetite has strengthened my capability to honor the compass for enhancement and motivated me to look beyond the conventional functionalities of any widget.
Climan is a small npm package that automates long & boring commands for you.
Tags: npm, javascript, opensource, node
Published: 2022-06-27 04:22:30

Hello everyone,

My name is Tony Quach. I am a second-year Software Engineering student. I have written my first npm package called **Climan**. I love the open source community and this is my first attempt at contributing to the open source world.

P/s: feature suggestions, issues, and PR are VERY welcome.

**What?**
[Climan](https://www.npmjs.com/package/@quachhengtony/climan) is a small npm package that automates long & boring commands for you.

**Why?**
Manually typing `kubectl rollout restart deployment my-deployment`, `docker build -t my-image .`, `docker push my-image`, etc, every time is boring, and using the arrow up key to scroll through the terminal's command history is not much better.

**How?**
Climan lets you create, store, and manage CLI commands, which will then be made available via Climan's cm shorthand for you to select. Command will be executed automatically, however, commands with required arguments will prompt you to enter the corresponding arguments before executing.

**Where?**
- [Homepage](https://github.com/quachhengtony/climan#readme)
- [Package](https://www.npmjs.com/package/@quachhengtony/climan)
- [Issue](https://github.com/quachhengtony/climan/issues)

Thank you.