 Olá, bom dia a todos e eu espero que todos são descansados e energizados depois da Coffee Break, mas alguém quer entrar à vantada, mas vamos já começar e vamos ter hoje cá o caneco que vai levar nós para o mergulho no mundo fascinante de desenvolvimento Vep, desculpa o meu português, então bem-vindo Então, a partida conseguem ver o ecrã, certo? Conseguem ver como deve ser? Boas! Conseguem ouvir, correto? Nunca vim mais alto, estava a pôr um bocado mais alto Isto é imocinante Não? Dá para trás? Vou voltar? Tenho que apontar pronto Boas! Então, espero que estejam prontos Bem, mais de tudo, olá, WorkCamp, obrigado por estarem aqui Pergunta rápida, quem é que já jogou ou ainda joga o World of Warcraft? Ok, então preparem se vocês vão gostar disso Então, sem mais demoras Antes mais de mais publicidades, ou seja, o YouTube não gosta de publicidade, mas não sei o que é Temos esta comunidade em Portugal, o PKP Portugal, em que vamos ter meetups Vamos ter três alinhados já, vamos ter um no porto Em maio, um em junho em Lisboa e um em junho em Lisboa E outro em junho em Fepar Portanto, procurem, juntei-se à comunidade e apareçam nos meetups, é gratuito Mais publicidade, pronto, já passo o skippet, não se preocupe Eu vou estar no próximo mês, no Laravel Live, ok? Eu sou o Moniz, sou um bocado mais da guild de Laravel Um bocado novo veniste no World Press Sei que há uma pasta web com FII, WP com FII, que faz coisas Eu depois lá vou procurar o que é que é que isso funciona Eu sou o Ganeco, sou full stack developer em bom português O pau para toda a obra, na empresa, pronto Faço parte desde o back-end até o front-end Na empresa Medicare, que imagino que já devem ter ouvido Ou alguém já vos ligou, pronto Sobre mim, muito rapidamente, comecei como designer Descobri o flash na altura, não aquele flash E comecei a desenhar, desenhei e utilizei o flash para desenhar tudo e mais alguma coisa O meu primeiro website tinha 2 megas E há uma altura da internet de 50 capas, não foi bonito E consegui o meu primeiro trabalho como web designer Comecei a fazer sites em flash Mas depois, há pelo menos um clara E há, depois descobri o Laravel Para trás, para frente Descobri o Laravel, presentei o Laravel à empresa A empresa que comecei a fazer websites em Laravel Muito fixe Tive o meu primeiro cachopo E arranjei o novo trabalho como web developer Apresentei o Laravel à empresa A empresa da autoravel Comecei a fazer aplicações web em Laravel Tive o meu segundo filho Modei o trabalho, comecei a ser uma trend Modei o trabalho, foi como full stack developer Ababa, apresentei o Laravel A empresa da autoravel 840 Tenho medo de carregá-lo, isto às vezes não muda logo Comecei a fazer logotipos Fiz o October fast, em vez de pacódigo Fiz para logotipos Naquele mês, fiz mais de 30 logotipos Fiz muitos Isto não está a dar moço Vamo a dar carregá-lo Eu também posso fazer aqui, se eu preciso Posso fazer aqui, está certo Fui pela primeira vez speaker no Malaraconte Também tive a oportunidade de conduzir Organizar e apresentar o LaraCon online Criar a branding e tudo mais Fiz muitos mais logotipos Inclusive os logotipos do próprio brand do Laravel Finalmente a empresa da autoravel E é Meu terceiro filho Fechei a fábrica Esqueço Quem tem filhos, sabe o que é que eu estou a dizer Tive a oportunidade de fazer host do LaraCon EU Aconteceu em janeiro este ano No ano passado Organizei o LaraCon EU em Lisboa este ano Criei ainda mais logotipos Estes todos pelo menos E sinceramente já perdi a conta Tive a oportunidade de ser speaker no LaraCon India Estou aqui, para vocês, no Workamp, a da speaker Mas bom, sem mais demoras, vamos realmente começar Então vamos criar a nossa carácter Isto a ideia é Eu quero ser um frontend developer O que é que eu preciso? E aqui está o nosso carácter Que é o novo gajo que vai programar o frontend Então vamos escolher um nome Não, ok, não dá Vamos experimentar outra coisa Ok, este parece bem, funciona Aqui ele entra no servidor E agora novamente, se não se importa Em um esnoar Quem é que é developer? Aqui Ok Quem é que programas só no back-end? Quem é que acha que o frontend é fácil? O vantezmos, não tem nenhum vergonho Ai, acham que é fácil, vamos ver Pronto, vamos lá começar isto Primeira quest Os princípios básicos Então, para vocês terem um frontend developer Vão precisar do quê? Num browser, simples Podem usar o Chrome, Firefox ou Edge Não podem usar aquele É muito parecido com o Alliance Esqueço, não vale a pena Então vamos usar o Chrome, porque gratuito É rápido e Tem um melhor jogo offline Lembro vocês de internet, vocês divertem É espetáculo Depois vão precisar de um IDE Algo para programar Podem usar o VSCode, Sublime O Atom, O Suboston, Door, o Vime Vamos usar o VSCode Primeiro que tudo gratuito Não dá para ganhar o gratuito É fácil de usar E o plug-ins até chega Terceira coisa que precisam de internet Óbvio, querem programar para web Ou precisar de internet Onde é que vocês podem arranjar internet? Na Amazon, se vocês procurarem para uma caixa Eu quero internet É espetáculo, vocês compram Aparecem em casa, vocês têm internet Espero que os Elders Tenham de tomar conta bem disto Que se não os Elders arranham com vocês Muito bem Crianças Já tem que dar um misto de elementos Para carregarem coisas E o nosso cara que estará a começar A chegar a algum lado Não há mais paixas Agora o que é que vocês precisam? Precisam de aprender os básicos Precisam de aprender HTML, CSS e JavaScript O que é que a HTML Pensem que seja o chassis Do carro Ou seja, este conjunto de texto Que vai definir visualmente Como é que a vossa página está construída Vão ter que aprender sobre As tagas mais básicas Vão ter que aprender sobre formários E a validação de formários Vão ter que aprender sobre a semântica do HTML Porque não podem escrever o HTML Como vocês acham Porque, depois, vão ter que ter preocupações Como o SEO, vão ter que ter solididade Isto no HTML CSS Com o HTML, a vossa chassis O CSS há de ser a pintura Há de ser como está habitualmente o vosso carro Em termos de código É sim Proprietade de valor, nada mais Mas vão ter que aprender no CSS sobre selectors Clássicos names Ideias, tag names Essa parte toda de selectors Vão ter que aprender sobre posições Relativa, absoluto, fixa de stick Boxmodel, o que é que é um margin Padding, o que é que é um border CSS, que também é muito importante Porque a ordem do vosso CSS tem impacto Vão ter que aprender sobre pseudo classes pseudo selectors flexbox, css-corites Quiserem organizar as coisas E ainda tem que aprender sobre arquitetura css Transições, animações Desainhos que consigo porque Cada browser, cada ecrã É um ecrã e agora já fazem web Para televisões Então, a seguir Já foi escrito Na analogia do carro O HTML está assim, o CSS é cor O JavaScript é quando vocês abrem a porta É a interação que fazem com o site Para o JavaScript Vocês é esta Trimologia, esta sintax Mas às vezes é escrito É uma linguagem um bocado antiga Não liguei os gás Passem em frente É o JavaScript Vão ter que aprender sobre manipulação de DOM Vão ter que aprender sobre creators Selectors, apentors Todos os strings e array methods O que é que é um event listener O que é que é um prototype O que é que é um closure, o que é que é um hoisting Vão ter que aprender sobre JSON Vão ter que aprender sobre Ajax Vão ter que aprender sobre Fetch API Maybe, porque é mais moderno E, também muito importante, Cors Mas É um negócio a doc Está fixe Mais uma quest Aprendemos os básicos Está na altura de simplificar um pouco a nossa vida Utilizando frameworks Então nós temos as frameworks De visuais De CSS Então temos os principais Do mercado, temos o Tailwind, Bootstrap e Bulma O que eu recomendo vivamente É o Tailwind Porque torna-se simples Para você até dar para aprender CSS A sintax É muito este género Tem uma classe que define uma propriedade de valor E facilita-vos porque É porque ganham um design de sistema Não se precisam para o par com naming De classes Ou seja, porque dar nomes é muito difícil A qualquer coisa Não há Números mágicos porque Se vocês definirem um texto red, vermelho É sempre red Ou seja, dizerem que é um cinza É só um cinza, não há 50 Tons de cinza 50 Shades of Grey E é bem utilizável Se vocês tiverem toda a sua sintax Em Tailwind, vocês conseguem Há uma portabilidade e usarem outros sitios Isto Depois também temos a parte Das frameworks para JavaScript Para facilitar a vida Então temos as do mercado Temos o Viewer, React, Svelte e Angular Ou o Quick Porque estão sempre aparecendo as frameworks Existe este site OK Vocês podem visitar este site É actualizado diariamente Quando é que vem a nova Framework JavaScript Mas para escolher uma Aquela que eu recomendo será view Porque é progressiva Mas um pequeno alerta Por favor Leroy Não sejam Leroy Aprendem primeiro Os barcos de JavaScript Porque também tem que aprender todos os O que é que é o importante Convém aprender esta base toda Antes de irem por uma framework Porque a framework já vai Quase nos obrigar a saber estas bases Então se vocês chegam a framework Sem saber estas bases vão ficar perdidos Então novamente Na nossa framework o View A sintax é muito identiguesta Daí a minha escolha Porque torna-se simples visualmente Saber o que é que se passa É por aí É leve É uma framework que vocês carregam E podem utilizar facilmente Mais uma vez Tem uma boa leitura Uma boa aprendizagem só de ver o markup Tem uma taxa de entrada Uma barreira de entrada pequena E pode ser progressiva A medida que vocês vão precisar E tenta um set Muito simpático Por exemplo, se vocês quiserem Ser a nossa framework A vossa aplicação pode usar A first-party packages Para vos facilitar a vida Node Por que Node? Porque vocês podem carregar Todas as vossas frameworks diretamente No HTML Ou seja, eu quero usar isto Então vocês vão ter que precisar do que? Imaginem que também querem um novo package Como é que vocês instalam este package Na vossa aplicação Para isso, existem Tramentas que vos auxiliam para fazer um load Dos packages Um bocado idêntico, se calhar Ao PHP do Composer Tem o NPM, o Yarn e o Bit Corpo command, é o NPM É o número um Que vocês facilitam Para instalar packages, resolver dependências E, principalmente Encher vossos disc rígidos Cuidado, arranjem um tera Um tera fixe Depois, com graças ao NPM Vocês conseguem organizar o vossa SS E Verificar até a LinkedIn Se o vossa SS está correto ou não Conseguem fazer autoprefixes Até plug-ins Para vos melhorar Vossa aplicação Também Neste bol inteiro do node Que vocês conseguem usar Ferramentas de Bandlers Para vocês conseguirem fazer um export Do vossa site para o web Para o vossa server Para isso, vocês têm o bit, o apppack O que eu recomendo é o bit Porque é É rápido, é fixe O que é que é um bandler? Muito rapidamente, um bandler agarra todo O seu conteúdo Ou seja, imagens, javascript, SS, whatever Passa no código do node E, de repente, dá-vos uma pastinha simpática Para vocês descargarem no vossa server E já tem tudo formatado E com o código minimalista Espectacular Vocês há um certo momento Que vão começar a trabalhar na equipa Não vão trabalhar já sozinhos Porque ali a equipa cresceu E nenhum seja idêntico ao outro Porque senão a vossa guild vai entrar em parafuso Então, para isso, há ferramentas Tipo, preacher, jaslink Para vos facultar Aquela normalização de código O preacher, a minha recomendação É um bocado Uma opinião forte Mas, existem muitas integrações Em todo o IDS Vocês conseguem gravar o vossa código E, de repente, fica todo formatado E, torna simples Testes Porque temos testado o vossa código Todo a gente testa o vossa código Uma maneira mais simples de testar É como, através do e-browder Ao menos se funciona no e-browder Existe o Chrome DevTools Para testar o vossa código O Firefox DevTools Existe o Safari DevTools O que eu recomendo Já que recomendo o Chrome Vamos ao Chrome DevTools Chrome DevTools, permitos Essa página está boa Conseguem ver se o JavaScript tem algum erro Conseguem verificar os requestes da JAX E até simular alguns devices Diretamente do browser Mas, se quiser nascer Um bocadinho Aí, Jesus, só cinco minutos Jest, para testar o vossa código Para correr coisinhas É rápido, conseguem fazer Mox snapshot coverage Mas, há mais quest Git Git É a única opção A única boa opção que vou fazer em vocês usar É o Git O Git fazem o que? Conseguem versionar o vossa código Tenem várias versões para trabalhar a equipa E usem este É o melhor Mas, se vocês usam o Git Em trata só dos comandos Vocês têm que colocar o vossa código Em algum lado Então tem que aprender sobre os repositórios de Git O dado é o de eleição Normalmente Até tem actions Para vos facilitar a parte de deploy Tem code spaces para vocês trabalhar Diretamente até no GitHub Sem eu usar um IDE Te ocupá-la para vos ajudar com o código Através das AIs da vida E te ajudar com o modo Muito importante Mas, o vossa site vai crescendo E vai aumentando E vai ficando pesado Se está tudo a correr bem O Lighthouse ajuda-vos a ver Se está tudo bem É gratuito, analisa até E até analisa o SEO do vossa site E verifica todos os check Os vitals Da vossa página Verifica até equipiais Como o First Contact Open Tem essas coisinhas todas que eu não percebo Eu sei que eu abro e vejo que está verde Se estiver verde está fixe, estiver vermelho Tem que resolver qualquer coisa Mas, querem mais? É, eu estou aqui todo dia Não, eles já disseram que não Podem aprender sobre static site generators Podem aprender sobre como As soluções de hosting Podem até usar o vos código web Para fazer aplicações nativas E até a uma docena nova Que coisa muito maluca Que vocês até podem ter O vosso WordPress Ou pegar P nativa correndo o browser É muito importante Podem ter um app nativa correndo o browser Eu não sei como é que funciona E whatever, não te quero No dia de hoje dizem que é espetacular Está-se bem Só para recapitular Para vocês se enfrentando Debalam para o que é que precisam Precisam do Chrome Do browser, de um IDE E de internet, óbvio Precisam aprender o HTML Precisam aprender o CSS Precisam aprender o JavaScript Para facilitar a vida Precisam aprender o ISE Todas as Novas propriedades JavaScript Por favor, não sejam um herói Aprendem esta parte Se senhor, podemos ir para as frameworks de JavaScript Tenho que aprender sobre NPM Para poder sacar packages Whatever Normalizar CSS Normalizar todo o vosso código Ok, dois minutos Testes, bundlers Aprender sobre a performance O site Muito importante Usar o GitHub para guardar Todo o vosso código Hosting do vosso código E depois distudo O que vocês podem fazer Mas pronto Muito obrigado, alguma questão Preguntas? Alguém quer fazer pergunta? Não Eu quero fazer pergunta Talvez um pouco Sili No início Quando tu apresentaste a tua história Há algum canaçao De lavarela e casamento Foi parecido que casaste E que começaste a trabalhar com um lavarelo Não quer perguntar? Há algum canaçao de casamento E lavarelo Ok, está bem Obrigado Devemos fazer um foto Para como a tua Prenda Tenho que segurar Tenho que segurar, está feito? Acho que está bom Muito obrigado