DEV Community: Alison Silva 🔥💯⛏️

Javascript text-to-sppech

Alison Silva 🔥💯⛏️ — Thu, 07 Oct 2021 18:22:46 +0000

Did you know javascript have native text-to-sppech?
Try it in your console.

const speak = (msg, lg = 'en') => {
  const sp = new SpeechSynthesisUtterance(msg);
  [sp.voice] = speechSynthesis.getVoices();
  sp.lang = lg;
  speechSynthesis.speak(sp);
};

speak('Hello, my name is Alison Silva, and I\'m a software developer. Did you know javascript have native text-to-sppech?');

You include can change the language as you see in the code above.

Use spread operator in Javascript to merge two objects

Alison Silva 🔥💯⛏️ — Fri, 26 Mar 2021 16:04:04 +0000

If you need merge two objects in javascript, you only need to use spread operator. It's very simple to use.

Pay attention if both objects have the sam property name. The second will override the first property.

Do you know the Fluent Interface Pattern?

Alison Silva 🔥💯⛏️ — Fri, 19 Mar 2021 21:25:44 +0000

Like a chain

Use this type of pattern, allows the user call methods one by one in chain. Its very helpfull when you have a lot of methods inside the class.

Continuous Deploy in CircleCI to shared host 🚀

Alison Silva 🔥💯⛏️ — Wed, 22 Jan 2020 20:59:40 +0000

CircleCI is a powerfull tool for continuous integration and continuous Deploy. Using docker to run builds in a clean and totaly customable container.
CircleCI integrates with GitHub and Bitbucket. Every time you commit code, CircleCI create a build.

If you interest in know more, please visit circleci.com.

So, in this post I show you how you can deploy to FTP using CircleCI.

After you create your account and link that with your Github or/and BitBucket, the steps is very simple, and I'm not abord this theme here.

CircleCI use yml file to configure how you integration is work's.
The file must be in the .circleci in your root project.

In this case, I'm use a php docker image with node. Then in command Im install git-ftp.
In the very first commit, you need pass git ftp init instad git ftp push, after that, you can change to git ftp push otherwise you receive an error.

Very first commit:

git ftp init --user "YOUR_FTP_USE" --passwd "YOUR_FTP_PASS" "ftp://youdomain.com/public_html/"

Others commit:

git ftp push --user "YOUR_FTP_USE" --passwd "YOUR_FTP_PASS" "ftp://youdomain.com/public_html/"

In deploy field you can set how branches you want deploy:

- deploy:
    filters:
      branches:
        only: master

Complete yml file:

version: 2
jobs:
  deploy:
    docker:
      - image: circleci/php:7.1-node-browsers

    steps:
      - checkout

      - run: 
          name: Deploy Master Branch
          command: |
            sudo apt-get update
            sudo apt-get -qq install git-ftp
            echo "Deploying project ..."
            echo $(git status)
            echo "Deploying to my ftp"
            git ftp push --user "YOUR_FTP_USER" --passwd "YOUR_FTP_PASS" "ftp://youdomain.com/public_html/"

workflows:
  version: 2
  just-deploy:
    jobs:
      - deploy:
          filters:
            branches:
              only: master

If you like this post, or need more information please comment bellow and I'm try to help you.

Diferenças entre let e var. Javascript

Alison Silva 🔥💯⛏️ — Thu, 02 Jan 2020 17:05:23 +0000

O ES2015 introduziu o conceito de Block scope que permite termos variáveis dentro de blocos { } que existem apenas dentro deste scope e não podem ser acedidas fora dele.
Simplificando:
Quando declaramos uma variável utilizando var dentro de um bloco, a mesma ficará disponível globalmente, enquanto let e const não. Isso permite um maior controlo sobre cada uma de nossas variáveis, evitando assim alterações de valores de maneira errada.

var a = 1;
let b = 2;

{
  console.log(a);
  console.log(b);
}
{
  var c = 3;
  let d = 4;
}

console.log(c);
console.log(d);

No exemplo abaixo, onde temos uma função, o valor de car que foi declarado utilizando let, irá ser alterado de Audi para VW apenas dentro da função. O valor de truck que foi declarado como var será alterado de Volvo para Scania.
Em ambos os casos, este valor foi alterado apenas dentro da função, ou seja: ficou restrito ao seu scopo.
Então temos 2 variáveis de cada, cada uma a "viver" no seu escopo. Uma no global e outra no scopo da função.

let car = 'Audi';
var truck = 'Volvo';

let WhatsTheValue = () => {
  let car = 'VW';
  var truck = 'Scania';
  console.log('The "let car" inside is:', car);  
  console.log('The "var truck" inside is:', truck);   
}

WhatsTheValue();

console.log('The "let car" outside is:', car);
console.log('The "var truck" outside is:', truck);

No próximo exemplo, o valor de car é alterado de Audi para VW, como acontecia anteriormente, e o valor de truck também irá alterar de Volvo para Scania, mas repare que agora temos o mesmo valor no log inside e outside para a variável truck.
Diferente de quando utilizamos uma função, utilizando apenas { } o let manteve o seu comportamento, enquanto var passou a subscrever a variável do scopo global.
Neste caso deixamos de ter 2 variáveis de cada e passamos a ter 2x car e apenas uma truck.

let car = 'Audi';
var truck = 'Volvo';

{
  let car = 'VW';
  var truck = 'Scania';
  console.log('The "let car" inside is:', car);  
  console.log('The "var truck" inside is:', truck);   
}

console.log('The "let car" outside is:', car);
console.log('The "var truck" outside is:', truck);

Utilizar var não é errado, de todo, mas como o let nos permite um maior controlo sobre onde realmente estão nossas variáveis, em muitos casos é recomendado na sua utilização, de maneira a evitar bugs porque alteramos o valor de uma variável que não era suposto ser alterada.

Destructuring assignment e Spread operator

Alison Silva 🔥💯⛏️ — Sat, 28 Dec 2019 12:13:42 +0000

Combinar desestruturação com spread operator pode facilitar muito o desenvolvimento.
Como podemos ver no exemplo a seguir, os valores do array serão atribuídos as variáveis a e b, e o restante dos valores passarão para a variável rest. Entretanto isso só é possível porque utilizamos o spread operator, caso contrario, o valor da variável rest seria 2. Ao utilizarmos ... dizemos que todos os valores restante do array, devem ser atribuídos a nossa variável rest.

let a, b, rest;
[a, b, ...rest] = [0, 1, 2, 3, 4, 5, 6];
// a = 0
// b = 1
// rest = [2, 3, 4, 5, 6]

O mesmo pode ser aplicado ao retorno de uma função.

let func = () => [0, 1, 2, 3, 4];
[a, b, ...rest] = func();
// a = 0
// b = 1
// rest = [2, 3, 4]

Podemos utilizar também para objectos.

({a, b, ...rest} = {a:1, b:2, c:3, d:4}); 
// a = 1
// b = 2
// rest = {c:3,d:4}