DEV Community: Oscar Jeremias jc

Os primeiros passos em javascript

Oscar Jeremias jc — Sat, 02 Jul 2022 15:05:10 +0000

Olá devs no post de hoje vamos listar os melhores lugares para você aprender javascript.

O javascript é um linguagem de programação dinâmica criada primordial para desenvolviment fron end mais com o passar do tempo e a evolução da linguage começou a migrar para outras áreas da programação tais com back end e mobile.

Os lugares para aprendejavascrip são os seguintes.

curso em vídeo

O curso em vídeo é uma canal do YouTube criado por Gustavo Guanabara que tem como objetivo princípal ensinar os primeiros passos das linguagens de programação para os iniciantes.

Em 2019 o Google patrocínio um curso de javascript para iniciantes no canal curso em vídeo.

O curso de javascript é muito bom ensina os conceitos básicos que todo dev javascript deve saber. Além disso o professor Gustavo Guanabara é um professor incrível e ensina muito bem.

Link do curso

Rocketseat

A Rocketseat é uma plataforma, um canal do YouTube e uma comunidade que tem como objetivo te transformar em um dev completo.

Na plataforma da Rocketseat tem um curso grátis chamado discover que te ensina o básico de front end e back end com foco em javascript.

Link do curso

w3schools

A w3schools é uma plataforma de cursos online com sede nos Estados Unidos que tem como objectivo ensinar programação para todos.

A w3schools tem um cursos de javascript muito completo que te tira do zero ao avançado em javascript.

Mais os curso da w3schools não são em vídeos eles são em artigos.

Link do curso

MDN Mozilla

O MDN Mozilla é a organização que gere o javascript e também é a organização que criou o navegador Firefox.

Na plataforma da MDN Mozilla tem toda a documentação do javascript.

Se você é uma pessoa que gosta estudar na fonte tem o MDN Mozilla é para você.

Link do MDN Mozilla

Com esses quarto lugares para vocaprender javascript é garantido que você daqui algum tempo você vai ser um dev javascript muito bom.

Link do meu blog

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.

Setup Nextjs Tailwind css e Typescript

Oscar Jeremias jc — Mon, 27 Jun 2022 07:54:16 +0000

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

Link do meu blog mao-na-massa

As 10 skills que todo front end deve saber

Oscar Jeremias jc — Mon, 27 Jun 2022 07:44:08 +0000

Olá devs no post de hoje vamos listar as 10 skills que todo front end deve saber.

Essas skills que estão listadas neste post vão ti transformar em um desenvolvedor front end mais capacitado para enfrentar os desafios do mercado de trabalho.

As skills são as seguintes.

1- Reactjs

Reactjs é uma biblioteca javascript criada pelo Facebook que facilita o desenvolvimento de interfaces web, mobile, desktop e TV.

O Reactjs é uma das skills mais procuradas pelos recrutadores das empresas.

Algumas empresas que usam o Reactjs para criar as suas interfaces Facebook, NETFLIX, Uber,Walmart, Instagram,Tesla, playpal e muito.

Alguns lugares para aprender react.

2- Nextjs

Nextjs é um Framework React criado pela vercerl que facilita a geração de páginas estáticas e geração de páginas no lado servidor assim melhorando o desempenho das páginas na web.

Alguns lugares para aprender Nextjs

Site do nextjs

3- Typescript

Typescript é um superset do javascript ou um linguagem de programação baseada no javascript que adiciona tipagem na syntax do javascript.

Alguns lugares para aprender Typescript

4- Tailwind CSS

Tawind css é uma biblioteca css tipo Materializar e bootstrap que não escrevemos css só adicionamos classes no html e o html fica estilizado.

Existe uma diferença entre Tailwind css e outras bibliotecas css que só adicionam classes no html.

As outras bibliotecas css já vêm com layouts prontos. Para você usar já o Tailwind css você é quem cria o seu próprio layout.

Alguns lugares para aprender Tailwind css.

Tailwind css

5- Axios

Axios é uma biblioteca javascript que facilita requisição de apis.

Alguns lugares para aprender Axios.

Axios

6- Graphcms

Graphcms é cms Headless que facilita o gerenciamento de dados para aplicações e fornece esses dados através de uma api graphQL.

Alguns lugares para aprender Graphqlcms

Graphcms

7- GraphQL

GraphQL é uma query language criada pelo Facebook que vêm com a proposta de acabar com os problemas de dados a menos ou dados a mais que apis restfull enfrentam.

GraphQL só retorna os dados que aplicação necessita nada a menos nem nada a mais.

Alguns lugares para aprender GraphQL

Full cycle

8- Apollo-client

Apolo-client é uma biblioteca que facilita a requisição de apis GraphQL.

Alguns lugares para aprender Apollo-client

apollo-client

9- ODM / ORM

ODM e ORM são ferramentas que facilita o trabalho na hora de trabalhar com bancos de dados.

Alguns ODM

Mongoose

Alguns ORM

10- Google analytcs

Google analytcs é uma ferramenta para analisar as métricas dos teu sites.

Quantas views teve uma página, quando tempo um usuário demorou no teu site, qunado de dinheiro faturou esse mês esses é muitos outros dados você encontra no Google analytcs

Alguns lugares para aprender Google analytcs

Google analytcs

Com todas essas skills no teu currículo com certeza a tua carreira vai sair do zero para o 100%.

Link do meu blog mao-na-massa

Envio de email com nodejs

Oscar Jeremias jc — Mon, 27 Jun 2022 07:41:19 +0000

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

Reactjs no celular

Oscar Jeremias jc — Mon, 27 Jun 2022 07:30:15 +0000

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.

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.

Link do meu blog mao-na-massa

how to configure neovim from scratch in termux

Oscar Jeremias jc — Sat, 02 Apr 2022 12:47:09 +0000

Hello devs in today's post we will learn how to configure neovim from scratch in termux.

Let's learn how to install Plus that will make your life easier as a front-end developer.

Follow the steps.

1.install termux

Click on this link termux and download the termux and then run these commands below

pkg update

pkg upgrade

2.Install neovim

Open termux and run this command

pkg install neovim -y

3.Install Plug-vim

Open termux and run these commands

Plug-vim

sh -c 'curl -fLo "${XDG_DATA_HOME:-$HOME/.local/share}"/nvim/site/autoload/plug.vim --create-dirs \ https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim'

configuration file

cd .config

mkdir nvim

touch init.vim

4.Install Plugs

Open termux and run these commands

nvim init.vim

After executing this command, you will enter neovim and then you will copy and paste this code below in your neovim that will install one dark theme plug in your neovim

call plug#begin()

Plug 'one-dark/onedark.nvim'

call plug#end()

colorscheme onedark

Open termux and run this command to open neovim

nvim

After entering noevim run these commands

:PlugInstall

Click ESC on your keyboard

Then run this command in neovim to exit neovim

:q

Then open neovim again and you will see that your theme will change to one dark

nvim

5.Install NERDtree

Plug for file management

You will add this code below in the same code where the one dark code is to install nerdtree

Plug 'preservim/nerdtree'

Add this code below in the same code where the one dark code is below the one dark code this code is the nerdtree configuration for when you click CTRL + n to open a toolbar file browsing

nnoremap <C-n> :NERDTree<CR>

6.Install vim-polyglot

Sytanx highlighter plug from various programming languages like javascript python c c++ c# and more

You will add this code below in the same code where the one dark code is to install vim-polyglot

Plug 'sheerun/vim-polyglot'

7.Install vim-rainbow

Parent braces and square brackets highlight plug

You will add this code below in the same code where the one dark code is to install vim-rainbow

Plug 'frazrepo/vim-rainbow'

8.Install Plug lightline.vim

Neovim mode bar color plug

You will add this code below in the same code where the one dark code is to install lightline.vim

Plug 'itchyny/lightline.vim'

9.Install coc.nvim

Front end technologies autocomplete plugin

You will add this code below in the same code where the one dark code is to install coc-nvim

Plug 'neoclide/coc.nvim', {'branch': 'release'}

Now let's install the plugs added in the previous lines of the `init.vim` file

Open termux and run these commands

open neovim

nvim

Install the Plugs

:PlugInstall

Click ESC on your keyboard

Then run this command in neovim to exit neovim

:q

Open neovim again and you will see the results of the installed plugs and you will see how to change your neovim from 0 to 100.

nvim

additional settings

call plug#begin()

   Plug 'one-dark/onedark.nvim'
   Plug 'sheerun/vim-polyglot'
   Plug 'preservim/nerdtree'
   Plug 'neoclide/coc.nvim', {'branch': 'release'}
   Plug 'frazrepo/vim-rainbow'
   Plug 'itchyny/lightline.vim'

  call plug#end()

  set number
  set nocompatible
  colorscheme onedark
  nnoremap <C-n> :NERDTree<CR>

DEV Community: Oscar Jeremias jc

Os primeiros passos em javascript

curso em vídeo

Rocketseat

w3schools

MDN Mozilla

Setup Nextjs Tailwind css e Typescript

Instalar o Nextjs e o Typescript

Instalar o Tailwind css

Configurar o Tailwind css

Programar um pouco

As 10 skills que todo front end deve saber

1- Reactjs

2- Nextjs

3- Typescript

4- Tailwind CSS

5- Axios

6- Graphcms

7- GraphQL

8- Apollo-client

9- ODM / ORM

10- Google analytcs

Envio de email com nodejs

Inicializar um projecto nodejs

Instalar o nodemailer

credenciais do Gmail

Enviar o email

Reactjs no celular

Instalar o nodejs

Instalar o yarn

Criar um app react

Primeiro Ola mundo em react no celular

how to configure neovim from scratch in termux

1.install termux

2.Install neovim

3.Install Plug-vim

4.Install Plugs

5.Install NERDtree

6.Install vim-polyglot

7.Install vim-rainbow

8.Install Plug lightline.vim

9.Install coc.nvim

Now let's install the plugs added in the previous lines of the init.vim file

Open neovim again and you will see the results of the installed plugs and you will see how to change your neovim from 0 to 100.

Instalar o `nodemailer`

Primeiro `Ola mundo` em react no celular

Now let's install the plugs added in the previous lines of the `init.vim` file