VictorHugoBatista

mkdir generated_docs
apidoc -i . -o generated_docs
mv generated_docs/api_data.json .
mv generated_docs/api_project.json .
rm -rf generated_docs
apidoc-markdown -p . -o doc-markdown.md
rm api_data.json
rm api_project.json
code doc-markdown.md

VictorHugoBatista

$(document).ready(function () {
  // "Subi" o código chamado na inicialização.
  // Separei o ajax da lista em outro método para remover a duplicação.
  obtemLista();
  
  $('.button-links').click(function () {
    // Atribuí o link à uma variável para o caso de utilizar novamente, além de facilitar a leitura do código.
    var link = $('this').attr('link');
    // Adicionei a mesma classe para todos os links alterados por esse evento.
    $('.link-list').text(link);

VictorHugoBatista

$(document).ready(function () {
  $('.button-links').click(function () {
    // Mesmo código sendo executado mais de uma vez para popular mais de um link.
    $('.link1').text($('this').attr('link'));
    $('.link2').text($('this').attr('link'));
    $('.link3').text($('this').attr('link'));
  });

  // Seletor baseado no tipo dos elementos, e não em suas classes.
  // O ideal é criar uma classe para cada comportamento / evento.

VictorHugoBatista

import componentB from './z-component-b';

export default {
  state: {},
  elements: {},
  initialize() {
    ...
  },
  initializeElements() {
    ...

VictorHugoBatista

/**
 * Como usar:
 * Importe este objeto e chame o método initialize:
 * import seuObjeto as './<CAMINHO-APARA-O-ARQUIVO>/<ARQUIVO>.js';
 * seuObjeto.initialize();
 *
 * /!\ Sempre inicialize um componente depois que sua página tenha sido carregada,
 * dentro de um $(document).ready(() => {}), por exemplo.
 * De forma encurtada: $(() => {}). /!\
 */

VictorHugoBatista

import myComponent from './components/my-component';

(($) => {
  $(() => {
    myComponent.initialize();
  });
})(jQuery);

VictorHugoBatista

<select class="my-select">
  <option selected disabled value="">Placeholder (não é gerado como botão)</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

VictorHugoBatista

Trilha de estudos Node

Framework fullstack: https://github.com/sahat/hackathon-starter

Microframework: https://github.com/developit/express-es6-rest-api

---

VictorHugoBatista

Trilha de estudos Angular

Overview de typescript: https://www.youtube.com/playlist?list=PLzvRQMJ9HDiQyjtcrtvDkeQMJIrv5ABbm

Podcast sobre a typescript: https://www.lambda3.com.br/2017/07/lambda3-podcast-52-typescript/

Esse vídeo em questão mostra como usar os pacotes @types/ e o seu benefício na adição de autocompletes e a validação de tipos em tempo de transpilação: https://www.youtube.com/watch?v=cqv5nhARjr8&t=0s&index=10&list=PLzvRQMJ9HDiQyjtcrtvDkeQMJIrv5ABbm

VictorHugoBatista

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

---

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

---