A dica de hoje é bem interessante. Quando desenvolvemos a ideia é que nosso código seja sempre o mais clean e direto possível correto ? Isto implica diretamente no tamanho de nossas builds.
Foi com isto que a equipe de engenheiros do Wix desenvolveram o Import Cost . Esta extensão para o VSCode nos auxilia nesta função
Continuar lendo
A ideia deste post não é simplesmente dizer que você deve esquecer da sua família, amigos, grupos de esporte etc. Eu resolvi compartilhar com vocês um estudo que eu fiz ao longo do ano de 2019 utilizando técnicas de hiper foco e como implementei isto na rotina do dia-a-dia.
O primeiro grande vilão da produtividade no meu caso era os instant messangers, WhatsApp, Telegram, Skype, Messanger, Hangout, Slack, Discord …
Acredite que eu tinha todos estes apps em meu celular, cada um para atender um determinado time ou cliente. Deletei todos e deixei apenas o Skype que é o qual eu tinha um pessoal de uma equipe mais próxima e comecei a utilizar o Facetime com a família para conversas urgentes. Com isto de acordo com o levantamento do app do iOS eu ganhei 2 horas diárias de produtividade.
O segundo grande vilão são as redes sociais. Imaginando que você chega do trabalho, vai ao banheiro, toma um café, fuma um cigarro ( não aconselho ), volta abre e dá aquela conferida de 5 minutos no Instagram, Facebook, Twitter e Pinterest pronto já consumiu mais 30 minutos do seu dia. Tirando isto você ganha mais 30 minutos diários.
Bom enconomizamos até agora 2 horas e 30 minutos no dia.
Hiper Foco
Quando você entra em estado de hiper foco, você acaba tendo uma potencial maior de entender, aprender e compreender as coisas. Imaginando que você está no Stack Overlhow pesquisando aquele problema maroto e você escuta uma conversa paralela no qual te tira a atenção e evidentemente você irá querer colocar o seu ponto de vista para os outros.
Nisto você ao longo do seu dia de trabalho você perde de 20 a 30 minutos no decorrer do período diminuindo ainda mais seus objetivos.
Uma forma de entrar em hiper foco e através do Mindfulness. Uma boa playlist no próprio Youtube pode te ajudar a alcançar o hiper foco.
Eu farei um resumo deste post no Youtube que eu acredito ser uma formato mais interessante para um assunto tão abrangente
Aproveito este post para convidar a assinar o canal no Youtube para ter acesso a todo o conteúdo exclusivo.
https://www.youtube.com/channel/UCLI_395Gs87LU0cdWWrfvVg
E qual a sua opinião a respeito deste assunto, utilize os comentários para dizer o que pensa deste assunto.
Olá galera tudo tranquilo, eu vou iniciar aqui a primeira publicação do ano dando algumas dicas de como configurar o VSCode para tirar 100% de aproveitamento para desenvolver em Javascript.
Iremos dividir o post em duas partes, a primeira vamos instalar todos os plugins interessantes para trabalhar e no segundo momento iremos configurar o VSCode da maneira que possamos ter mais produtividade para desenvolver em JS.
Estas configurações são as que eu utilizo no dia-a-dia para desenvolvimento e espero que te ajude. Tem alguma extensão bacana para adicionarmos aqui na lista para ajudar os outros amigos ? publique aqui nos comentários
Plugins:
1) Color Highlight
Permite que você tenha um preview do hexa decimal da cor direto na tela do VSCode
2) Docker
Adiciona highlights no hover com dicas e linting para arquivos Dockerfile e docker-compose.yml
3) EditorConfig for VS Code
Permite que você compartilhe com seu time as configurações do VSCode. Isto permite que você tenha um ambiente padronizado entre o time.
4) ESLint
Integra o lint do Javascript no VS Code. Permite que você tenha um padrão de código mais inteligente.
5) Hasher
Permite que você gere hashs MD5, Bas64, URI encode e decode, html entitites encode e decode.
6) Identical Sublime Monokai C# theme and colorizer
Um tema identifico do Sublime Monokai para VSCode.
7) Live Server
Carrega um servidor web para testes direto em seu navegador
8) Material Icon Theme
Continuando a customização visual do VSCode tai um bom tema de icones ao estilo Material Design
9) Prettier
Padroniza o código fonte ajudando a identar e padronizar a estrutura de seus arquivos
10) Snippets da RocketSeat
O que é bom temos que compartilhar certo ? Os snippets da RocketSeat permite que você crie components, funções e classes de forma muito rápido baseado em padrões com atalhos.
11) Shortcuts
Sem dúvida uma extensão que eu não deixo faltar. Ele adiciona atalhos no rodapé do VSCode que te dá acesso rápido a uma quantidade interessante de recursos.
12) SSH FS
Com esta extensão eu literalmente mudei minha vida. Caso você tenha uma quantidade x de conexões a serem configuradas para acesso remoto via SSH esta extensão irá te ajudar e muito.
Configurações do VSCode
Você encontra aqui um exemplo de configuração do JSON de configuração do VSCode. Dentro deste arquivo você encontra configurações com comentários para que serve cada uma das configurações.
Caso tenha alguma dúvida só chamar nos comentários. Não esqueça também de assinar o canal para receber estas dicas em vídeo para ajudar o processo de aprendizado.
{
"workbench.colorTheme": "Sublime Monokai",
"sshfs.configs": [
{
"root": "/srv/apps/",
"host": "localhost",
"port": 2222,
"username": "root",
"password": "root",
"name": "DefaultServer"
},
],
"workbench.iconTheme": "vscode-icons",
"explorer.confirmDelete": false,
"emmet.syntaxProfiles": {
"javascript" : "jsx",
},
"emmet.includeLanguages": {
"javascript" : "javascriptreact",
},
"emmet.optimizeStylesheetParsing": false,
"emmet.triggerExpansionOnTab": true,
"editor.minimap.enabled": false,
"workbench.startupEditor": "newUntitledFile",
"editor.formatOnSave": false,
"editor.rulers": [80, 120],
"editor.tabSize": 2,
"terminal.integrated.fontSize": 12,
// Auto move files
"javascript.updateImportsOnFileMove.enabled": "never",
// Enable source code tree breadcrumbs
"breadcrumbs.enabled": true,
// Editor functions suggest
"editor.parameterHints.enabled": false,
}Aproveito este post para convidar a assinar o canal no Youtube para ter acesso a todo o conteúdo exclusivo.
https://www.youtube.com/channel/UCLI_395Gs87LU0cdWWrfvVg
E qual a sua opinião a respeito deste assunto, utilize os comentários para dizer o que pensa deste assunto.
O NextCloud é uma solução alternativa aos ambiente de armazenamento de arquivos Dropbox, Google Drive, Microsoft OneDrive e por ai vai.
Com o crescimento da procura por armazenamento na nuvem as big techs que antigamente ofereciam armazenamento quase que infinito começaram a restringir a 5GB nas contas free coisa que no começo ofereciam armazenamento quase que infinito como o caso do Microsoft One Drive.
Se você ler os termos de utilização do serviço você poderá ver que a capacidade de armazenamento e a integridade dos arquivos não possuem garantias nos planos free.
Foi por este motivo que eu resolvi criar uma solução própria utilizando uma alternativa fantástica Open Source e armazenando os dados em um ambiente seguro dentro do Docker. Isto me permite mover meus arquivos e a solução completa fica dentro de um container Docker.
Como eu fiz ?
Contratei um armazenamento em cloud com a Mobsale de 100GB onde eu estou armazenando alguns sites e também o meu Drive Next Cloud.
Depois preparei um docker-compose.yml com a estrutura necessária para subir a solução através do Docker Compose.
Você pode baixar isto gratuítamente através do meu Github em:
https://github.com/jaccon/NextCloudDocker
Tendo baixado o repositório, você deve criar no mesmo nível de diretório as pastas src e database onde serão armazenados os arquivos do nextcloud application
Feito isto basta você acessar o host ( IP ou domínio ) com o endereço do NextCloud e configurar com as informações que você utilizou no docker-compose.yml
Caso tenha dúvidas deixe um comentário que irei te ajudar.
Caso tenha gostado de um like no projeto lá no Github e assine meu canal no Youtube em https://www.youtube.com/channel/UCLI_395Gs87LU0cdWWrfvVg
e não esqueça de ativar as notificações para receber todos os novos conteúdos
Há diversas maneiras de resolver este problema. Eu resolvi criar este tutorial com a técnica que eu utilizo para disponibilizar o acesso remoto dentro de um ambiente dockerizado via SSH.
Para uma manutenção rápida ou até mesma para liberar o acesso para um cliente dentro do seu ambiente o OpenSSH é a melhor opção.
Estou considerando que você já tenha o Docker instalado e configurado em seu ambiente. Vou exemplificar o cenário que eu tive que resolver por aqui e acredito que isto irá ajudar outros devs com a mesma dúvida.
Cenário
– Vamos imaginar que temos um ambiente WordPress e o cliente precisa do acesso shell na máquina para fazer as devidas manutenções e até mesmo configurar um cronjob na máquina.
Instalação
Primeiramente você deve baixar a imagem do Docker com o OpenSSH. Eu deixei uma imagem pronta para você utilizar é só fazer o pull
docker pull jaccon/openssh:latestCom o comando acima você irá baixar a imagem Docker do OpenSSH para seu ambiente, vamos partir para configurar o nosso Docker Compose.
Perceba que no exemplo abaixo nós já temos um ambiente com um WordPress/PHP, MySQL, phpMyAdmin e agora vamos iniciar o OpenSSH dentro do container.
version: '2'
services:
app_db:
image: mysql:5.7
container_name: app_db
ports:
- "8010:3306"
volumes:
- ./database/data:/var/lib/mysql
- ./database/initdb.d:/docker-entrypoint-initdb.d
- ./etc/mysql/mysqld.cnf:/etc/mysql/mysql.conf.d/mysqld.cnf
restart: always
environment:
MYSQL_ROOT_PASSWORD: [email protected]@12345678 # any random string will do
MYSQL_DATABASE: wordpress # the name of your mysql database
MYSQL_USER: wordpress # the name of the database user
MYSQL_PASSWORD: tvFJHsQ2yhQDyrTp # the password of the mysql user
app_website:
depends_on:
- app_db
image: wordpress:latest # we're using the image with php7.1
container_name: app_website
ports:
- "8011:80"
restart: always
links:
- app_db:mysql
volumes:
- ./src:/var/www/html
- ./logs:/var/log/apache2/
- ./scripts/:/scripts/
- ./etc/php/php.ini:/usr/local/etc/php/php.ini
app_ssh:
image: jaccon/openssh
container_name: app_ssh
ports:
- "8012:22"
restart: always
links:
- app_db:mysql
volumes:
- ./src:/var/www/html
- ./logs:/var/log/apache2/
- ./scripts/:/scripts/
- ./etc/php/php.ini:/usr/local/etc/php/php.ini
- ./etc/passwd:/etc/passwd
- ./etc/ssh:/etc/ssh
phpmyadmin:
image: phpmyadmin/phpmyadmin:latest
container_name: app_phpmyadmin
volumes:
- ./phpmyadmin/config.user.inc.php:/etc/phpmyadmin/config.user.inc.php
links:
- app_db
ports:
- "8013:80"
environment:
- PMA_ARBITRARY=1
- PMA_HOST=app_dbVeja que nós temos uma entrada app_ssh. É ai que iremos configurar dentro do ambiente op OpenSSH que dará acesso ao conteúdo Dockerizado do servidor Apache onde está rodando o WordPress.
Em resumo nós teremos a entrada no nosso docker-compose.yml que seria:
app_ssh:
image: jaccon/openssh
container_name: app_ssh
ports:
- "8012:22"
restart: always
volumes:
- ./src:/var/www/html
- ./logs:/var/log/apache2/
- ./scripts/:/scripts/
- ./etc/php/php.ini:/usr/local/etc/php/php.ini
- ./etc/passwd:/etc/passwd
- ./etc/ssh:/etc/sshDepois de iniciar o container pode ser que você tenha que iniciar o openssh e setar a senha do seu usuário. Isto é simples basta executar os comandos abaixo
docker exec -it app_ssh /bin/bash
echo root:[email protected] |chpasswd
/etc/init.d/ssh startFeito isto o seu servidor SSH já estará configurado. Para acessar basta digitar o endereço ip do seu ambiente e depois adicionar a porta 8012 que foi a porta que foi mapeada para o OpenSSH
ssh [email protected] -p 8012O comando acima é um exemplo de conexão no qual no exemplo o endereço do ambiente é 192.168.0.1
Se você tiver alguma dúvida utilize os comentários para entrar em contato
Obrigado!
Eu resolvi escrever este micro artigo para ajudar ai quem tiver passando pelo mesmo problema. Eu tenho em meu ambiente diversos containers rodando em paralelo e utilizamos o Docker Compose para manipular estes containers. Porém eu particularmente não havia setado o nome do projeto dentro das stacks do docker e isto acabou gerando um problema na hora de subir e baixar os containers pelo docker-compose.
A ideia aqui é simples, precisamos informar o nome dos projetos na hora de subir a stack com docker-compose up para não haver este tipo de incidente.
Então é simples, crie um arquivo .env na raiz do projeto onde você possui o docker-compose.yml com o seguinte conteúdo:
COMPOSE_PROJECT_NAME={project name}
Uma outra maneira de fazer isto é colocando a flag de comando:
docker-compose -p “project_name” up -d
Simples não ? pois é mas muitas vezes só aprendemos colocando em prática. Valeu galera abs,
#fix WARNING: Found orphan containers
Caso você já tenha passado por este problema ao desenvolver uma aplicação React Native fique sabendo que o erro é comum e pode ser resolvido com uma certa facilidade.
Este erro pode estar relacionado com a sua versão do Expo como foi no meu caso. A solução mais simples para isto é seguir os comandos abaixo:
rm -rf node_modules
e depois:
npm i -s react-native-gesture-handler
expo install react-native-gesture-handler
A funcionalidade de autocomplete chamada de Emmet não é ativada por padrão principalmente se estiver trabalhando com HTML dentro do Javascript comum por exemplo em bibliotecas como React.
O processo para habilitar é muito simples. Dentro do VSCode você deve ir em suas configurações e editar o JSON de configuração do VSCode adicionando as seguintes linhas abaixo:
"emmet.syntaxProfiles": {
"javascript" : "jsx",
},
"emmet.includeLanguages": {
"javascript" : "javascriptreact",
},
"emmet.optimizeStylesheetParsing": false,
"emmet.triggerExpansionOnTab": true,
PySnake é um jogo feito com a biblioteca PyGame onde eu integro um controle de PlayStation 4 em modo USB para controlar a cobrinha do game.
É um ótimo exemplo de como você integra e captura os eventos de um controle USB no Python através da lib PyGame. Eu implemento também o Py Mixer para colocar uma música de background no game.
O código fonte do game é Open Source e a instalação basta você baixar o código fonte através do Github e instalar a dependências necessárias através do PIP para que o game rode 100%.
Download do código:
https://github.com/jaccon/PySnakeGame
Hardware Necessário:
– Um controle USB ( testado com DualShock 4);
– Cabo Mini USB
Vídeo de demonstração
Assine o canal no Youtube para ser notificado de quando irei implementar o game ao vivo ! Saiba mais em:
Recentemente eu comprei uma camera ip daquelas bem simples mas interessante pelo custo/benefício.
Além de ter vários recursos interessantes como transmissão e envio de áudio com viva voz, visão 360º, streaming de vídeo a 720p que pra mim é mais que suficiente ela possibilita através do protocolo RTSP o streaming via web.
O que ficou ainda mais interessante foi quando descobri que a camera ip utiliza protocolo rtsp. Através de um sniffer identifiquei o usuário e senha e a url de transmissão utilizada pelo aplicativo nativo da camera. A partir dai resolvi criar uma aplicação web onde eu consigo transmitir via node-rtsp via protocolo websocket. Você pode adicionar quantas cameras quizer basta adicionar as informações no config.js.
Para quem quizer saber mais como tudo isto funciona baixe o código no meu Github:
Download do código
https://github.com/jaccon/NodeStreamCamServer
Screenshot
