Evolução na profissão
- Nasser iniciou seus estudos em front-end quando, durante seu ensino médio, fez um curso técnico de informática e assim teve contato inicial com HTML e PHP. Após isso, fez faculdade de Engenharia Eletrônica (com ênfase em Software) na UnB( Universidade de Brasília) e depois de terminar, retomou seus estudos em Front-end junto a UX Design. Após isso, trabalhou em diversos projetos como desenvolvedor freelancer (ex.: designcircuit.co) e desenvolve um curso para ensinar tudo que aprendeu até hoje (Front Push).
Descrição da atividade atual
- Atualmente, como desenvolvedor Freelancer, Nasser organiza sua própria rotina entre trabalho e seu projeto pessoal(Curso FrontPush). Com isso, ele mesmo determina quais tarefas "tasks" serão realizadas com o objetivo de entregar seus projetos no prazo estipulado para com o cliente, com o objetivo de desenvolver a parte visual (Front) de uma aplicação web.
Requisitos mínimos para exercer a profissão
- De acordo com o que foi apresentado por ele, para se tornar um dev Front-End é cobrado conhecimento sobre as tecnologias envolvidas. Com isso, é de se esperar, que o profissional tenha feito alguns cursos relacionados a área e que tenha desenvolvido algum tipo de aplicação web para mostrar como portfólio (nesse caso, foram destacados pelo Nasser o desenvolvimento de um site para "E-commerce" e "Landings Pages"(páginas que expõe o conteúdo e a finalidade da empresa/pessoa).
Ferramentas usadas no dia-a-dia
• No dia-a-dia, Nasser costuma utilizar ferramentas como:
- Visual Studio Code(VSCode)
- Figma
Tecnologias envolvidas
• As principais tecnologias envolvidas no processo de desenvolvimento de um Front - End são:
- HTML(HyperText Markup Language)
- CSS (Cascading Style Sheets)
- JavaScript ou PHP (Linguagem de Programação)
- Framework Java( React.js, Vue.js, Angular)
- Framework PHP (Laravel)
- npm, yarn
- Git e GitHub
Ética profissional
- Nesse caso, não consegui nenhum exemplo vindo diretamente pelo Nasser, porém ao pesquisar, percebi que a questão de vazamento de códigos / projetos sendo desenvolvido é algo muito comum em Front-End, principalmente pelo fato de criar sites ser tipo uma "arte" e seus desenvolvedores se sentem animados em mostrar o que está sendo desenvolvido para outras pessoas.
Exemplo de resultado tangível
- Alguns dos exemplos de resultados tangíveis apresentados pelo Nasser foram esses:
https://www.nyousefali.com.br/nubank/
https://www.nyousefali.com.br/spiderman/
-Além desses, segue um site no qual os desenvolvedores podem postar seus projetos para serem premiados, nele é possível encontrar vários sites com funcionalidades incríveis que um dev front-end pode desenvolver:
https://www.awwwards.com/websites/?award=nominees&category=technology&page=1
Upload da apresentação
Pesquisa
SASS
- O SASS(Syntactically Awesome Style Sheets) é uma linguagem de script compilada / pré-processador em CSS. Ela permite ao programador um melhor aproveitamento do tempo, trazendo funcionalidades ao CSS. Entre elas estão: - Criação de variáveis; - Funções; - Loops; - Condicionais, etc.
-É importante ressaltar que o SASS possui dois tipos de sintaxe: o SCSS e o SASS . O primeiro se aproxima muito da própria sintaxe do CSS, em relação à chaves e pontos e vírgulas, enquanto o segundo se aproxima bem mais de linguagens de programação como Python, em que não são necessários o uso de ponto e vírgula a cada declaração. *O SASS não é lido diretamente pelos navegadores, com isso, há uma transformação de arquivos .sass em .css .
-Um dos pontos que mais atraem os devs a usarem essa ferramenta é a questão do aninhamento. A possibilidade de você fazer códigos idênticos com uma menor quantidade de linhas é um dos benefícios que o SASS proporciona.
-Outro ponto bastante interessante é as questão das funções. Com elas, podemos otimizar o nosso código e evitar a repetição de linhas com mesmas declarações, basta declarar elas(utilizando o @mixin , que permite tal funcionalidade) e utilizar nas declarações de estilo (utilizando um @include, que permite incluir as funções dentro das div, id, etc.).
- A titulo de curiosidade, em 2016, uma pesquisa realizada por Ashley Nolan (engenheiro sênior de UI que trabalha na JUST EAT) obteve como resultados uma adesão de mais de 60% de programadores aos SASS, em comparação, o segundo pré- processador mais utilizado tem cerca de 10% de uso (LESS).
-Se lhe interessar um pouco mais sobre o assunto, deixo a seguir alguns links que utilizei como base para entender mais sobre as funcionalidades e benefícios que o SASS proporciona:
- https://www.youtube.com/watch?v=KnsNYOPHyTc&ab_channel=N%C3%A1sserYousefAli (Um video do próprio convidado, Násser Yousef Ali)
- https://www.youtube.com/watch?v=WJSJCduJCQM (Canal YT: Código Fonte TV)
- https://www.ufsm.br/pet/sistemas-de-informacao/2021/09/22/o-que-e-sass-venha-entender-esse-novo-metodo-de-escrever-css/ (Site do PET SI da UFSM(Universidade Federal de Santa Maria) )
- https://www.youtube.com/watch?v=BaI8dHUthLA&ab_channel=Rocketseat (Canal YT: RocketSeat)
-Exemplos com imagens:
(Exemplo da questão do aninhamento em SASS)
(Exemplo do uso de "funções" usando o @mixin)
(Comparação do SASS com outra ferramente similar, o SCSS, e com o próprio CSS)
Dúvidas
- 01. [Luiz Cláudio] Já teve relação profissional com designer gráfico (artista)? Se sim, teve conflitos?
- Sim, já tive relações com alguns designer gráficos (inclusive eu sou) e em alguns pequenos detalhes já tivemos algumas discussões sobre o que seria melhor para o produto final, mas nada que abalasse a relação entre nós.
- 02. [Luiz Cláudio] O que é o SPA? O que mudou em relação à geração anterior?
- SPA(Single Page Application) são aplicações cuja funcionalidade está concentrada em uma única página. Ao invés de carregar toda página, apenas o conteúdo da página é carregado/atualizado a cada interação. Isso permitiu, em relação ao Método Tradicional, uma maior otimização, e consequentemente uma maior rapidez em carregar páginas, melhorando o conforto ao usar do usuário.
- 03. [Luiz Cláudio] O que é JSON? Como funciona? Dê um exemplo?
- JSON(JavaScript Object Notation) é um arquivo utilizado para trocar dados rapidamente entre sistemas de linguagens derivadas do JavaScript. Basicamente, o texto envia determinadas informações de um sistema para serem utilizadas em outro. Esse tipo de arquivo é bastante utilizado em protocolos HTTP, devido ao amplo uso de linguagens como o próprio JavaScript, Java e PHP.
- 04. [Luiz Cláudio] Vc presta serviço internacionalmente?
- Estou me projetando para isso, aperfeiçoando meu Inglês, estudando o escopo de sites estrangeiros, além de começar a nomear e comentar os códigos em Inglês.
- 05. [Luiz Cláudio] Qual a diferença entre página dinâmica e página estática?
- A maior diferença entre uma página estática e uma dinâmica está entre as funcionalidades que podem ser atribuídas ao utilizar uma página dinâmica. Com ela, os "menus" podem se tornar animados, dando maior conforto ao cliente, além de simplificar a criação de sites do tipo e-commerce, que ao invés de criar uma página para cada item, é feito uma única página que será carregada dinamicamente com o que é desejado pelo usuário.
- 06. [Luiz Cláudio] É importante que Devs Front-Ends dominem a técnica de Cross-browser? Por quê?
- É importante demais um Dev Front-End dominar a técnica de Cross-browser. Um dos principais fatores é como e quais atribuições são melhores e acessíveis a maior parte dos navegadores para serem utilizadas nos seletores. É importante ressaltar que, é praticamente impossível desenvolver pensando em todos os navegadores existentes, por isso, trabalhar com aqueles mais utilizados como Chrome, Edge e Safari, é o mais comum entre os devs.
- 07. [Luiz Cláudio] Em qual browser vc já notou mais facilidade na execução de suas aplicações? Em qual teve mais dificuldades?
- Atualmente uso o Google Chrome. Já pensei em utilizar navegadores próprios para desenvolvedores, como o Firefox Developer Edition, mas nada muito concreto.
- 08. [Luiz Cláudio] Que metodologia usa para interagir com o cliente?
- Atualmente utilizo tanto meu Instagram como meu Site como portfólio para as empresas, geralmente aquelas que se interessam entrar em contato comigo pelo direct do Instagram, e assim começamos a finalizar a proposta do serviço/projeto.
- 09. [Luiz Cláudio] O que motivou a criação do ECMA Script (ES6+)?
- O ECMA Script é como um "upgrade" do JavaScript, por muitos anos essa linguagem era considerada díficil de se escrever e utilizar algumas funções, e então a linguagem começou a ser padronizada pela ECMA (Associação Europeia dos Fabricantes de Computadores) para se tornar mais compreensível e portanto, um maior acesso por parte de programadores.