Merge pull request #187 from raphaelfabeni/master
Updates the portuguese translation
This commit is contained in:
Bo-Yi Wu
commit
cefdfd682e
|
|
@ -1,39 +1,40 @@
|
|||
#Questões para entrevista de profissionais Front-end
|
||||
|
||||
@versão 2.0.0
|
||||
|
||||
Este repositório contém uma série de perguntas para entrevista de profissionais de front-end que podem ser usadas para avaliar os candidatos. Não é recomendado de maneira alguma usar todas as perguntas aqui no mesmo candidato (que levaria horas). A escolha de alguns itens dessa lista deverá ajudar a identificar as habilidades requeridas do candidato.
|
||||
|
||||
O artigo [Baseline For Front-End Developers](http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/) de [Rebecca Murphey](http://rmurphey.com/) é também uma ótima fonte para ler antes de entrevistar um candidato.
|
||||
|
||||
**Note:** Tenha em mente que muitas destas questões estão em aberto e poderia levar à discussões interessantes que dizem mais sobre as capacidades do candidato do que a resposta em si.
|
||||
|
||||
####Colaboradores originais
|
||||
## <a name='toc'>Tabela de Conteúdos</a>
|
||||
|
||||
A maioria das perguntas foi retirada de uma _thread_ da [oksoclap](http://oksoclap.com/), criada originalmente por [Paul Irish](http://paulirish.com) ([@paul_irish](http://twitter.com/paul_irish)) e com a contribuição individual das seguintes pessoas:
|
||||
1. [Original Contributors](#contributors)
|
||||
1. [General Questions](#general)
|
||||
1. [HTML Questions](#html)
|
||||
1. [CSS Questions](#css)
|
||||
1. [JS Questions](#js)
|
||||
1. [jQuery Questions](#jquery)
|
||||
1. [Coding Questions](#jscode)
|
||||
1. [Fun Questions](#fun)
|
||||
1. [Other Great References](#references)
|
||||
1. [License](#license)
|
||||
|
||||
* [@bentruyman](http://twitter.com/bentruyman) - http://bentruyman.com
|
||||
* [@cowboy](http://twitter.com/cowboy) - http://benalman.com
|
||||
* [@ajpiano](http://ajpiano) - http://ajpiano.com
|
||||
* [@SlexAxton](http://twitter.com/slexaxton) - http://alexsexton.com
|
||||
* [@boazsender](http://twitter.com/boazsender) - http://boazsender.com
|
||||
* [@miketaylr](http://twitter.com/miketaylr) - http://miketaylr.com
|
||||
* [@vladikoff](http://twitter.com/vladikoff) - http://vladfilippov.com
|
||||
* [@gf3](http://twitter.com/gf3) - http://gf3.ca
|
||||
* [@jon_neal](http://twitter.com/jon_neal) - http://twitter.com/jon_neal
|
||||
* [@wookiehangover](http://twitter.com/wookiehangover) - http://wookiehangover.com
|
||||
* [@darcy](http://twitter.com/darcy) - http://darcyclarke.me
|
||||
* [@iansym](http://twitter.com)
|
||||
####[[⬆]](#toc) <a name='contributors'>Contribuintes originais:</a>
|
||||
|
||||
### Questões gerais:
|
||||
A maiorida das questões foram retiradas de um _thread_da [oksoclap](http://oksoclap.com/) originalmente criada por [Paul Irish](http://paulirish.com) ([@paul_irish](http://twitter.com/paul_irish)) e com a contribuição das seguintes pessoas: [@bentruyman](http://twitter.com/bentruyman) [@cowboy](http://twitter.com/cowboy) [@ajpiano](http://ajpiano) [@SlexAxton](http://twitter.com/slexaxton) [@boazsender](http://twitter.com/boazsender) [@miketaylr](http://twitter.com/miketaylr) [@vladikoff](http://twitter.com/vladikoff) [@gf3](http://twitter.com/gf3) [@jon_neal](http://twitter.com/jon_neal) [@sambreed](http://twitter.com/sambreed) [@iansym](http://twitter.com/iansym)
|
||||
|
||||
####[[⬆]](#toc) <a name='general'>Questões Gerais:</a>
|
||||
|
||||
* O que você aprendeu ontem ou esta semana?
|
||||
* O que te excita ou te interessa em programação/codificação?
|
||||
* Quais as suas considerações sobre UI, Segurança, Perfomance, Aplicação, Manutenibilidade ou Tecnologia quando você desenvolve uma aplicação web ou site?
|
||||
* Fale sobre seu ambiente de desenvolvimento preferido. (SO, Editor, Browser, Ferramentas, etc)
|
||||
* Com quais sistemas de controle de versão você é familiar?
|
||||
* Descreva seu trabalho quando cria uma página web.
|
||||
* Se você tivesse 5 diferentes arquivos de folhas de estilo, qual seria a melhor forma de integrá-los no site?
|
||||
* Concatenação de arquivos
|
||||
* Descreva a diferença entre _progressive enhancement_ and _graceful degradation_.
|
||||
* Bônus se descrever ou mencionar detecção de recursos.
|
||||
* Explique o que significa "HTML Semântico".
|
||||
* Como você pode otimizar os recursos de um site?
|
||||
* À procura de uma série de soluções que possam incluir:
|
||||
* Concatenação de arquivo
|
||||
|
|
@ -42,7 +43,10 @@ A maioria das perguntas foi retirada de uma _thread_ da [oksoclap](http://oksocl
|
|||
* Caching
|
||||
* etc.
|
||||
* Por que é melhor servir recursos de um site de múltiplos domínios?
|
||||
* Quantos recursos um navegador pode baixar, simultaneamente, a partir de um determinado domínio?
|
||||
* Quantos recursos um navegador pode baixar, simultaneamente, a partir de um determinado domínio?
|
||||
* O que são *exceptions*?
|
||||
* Bônus para identificação mobile como uma possível desvantagem (http://www.mobify.com/blog/domain-sharding-bad-news-mobile-performance/)
|
||||
* Bônus para identicação de HTTP2 / SPDY como uma *exception*
|
||||
* Fale 3 formas de diminuir o _page load_ (tempo de carregamento real e percebido)
|
||||
* Se você caísse em um projeto que as pessoas usam _tabs_ para identação e você usa espaços, o que você faria?
|
||||
* Sugerir que o projeto utilize algo como EditorConfig (http://editorconfig.org)
|
||||
|
|
@ -53,10 +57,12 @@ A maioria das perguntas foi retirada de uma _thread_ da [oksoclap](http://oksocl
|
|||
* Quais ferramentas você usa para testar a performance do seu código?
|
||||
* Profiler, JSPerf, Dromaeo
|
||||
* Se você pudesse dominar uma tecnologia deste ano, qual seria?
|
||||
* Quais as diferenças entre *Long-Polling*, *Websockets* and *SSE*?
|
||||
* Explique a importância de normas e órgãos normativos.
|
||||
* O que é FOUC? Como você evita FOUC?
|
||||
* Dê a sua melhor descrição do processo do momento que você digita a URL de um website até o final do carregamento da página na sua tela.
|
||||
|
||||
### Questões específicas de HTML:
|
||||
####[[⬆]](#toc) <a name='html'>Questões de HTML:</a>
|
||||
|
||||
* O que um `doctype` faz?
|
||||
* Qual a diferença entre _standards mode_ e _quirks mode_?
|
||||
|
|
@ -67,140 +73,15 @@ A maioria das perguntas foi retirada de uma _thread_ da [oksoclap](http://oksocl
|
|||
* Quais são os benefícios em utilizar o atributo `data-`?
|
||||
* Considere o HTML5 como uma plataforma web aberta. Quais são os blocos de construção de HTML5?
|
||||
* Descreva a diferença entre cookies, sessionStorage e localStorage.
|
||||
* Você pode explicar a diferença entre `GET` e `POST`?
|
||||
|
||||
### Questões específicas de JS:
|
||||
####[[⬆]](#toc) <a name='css'>Questões de CSS:</a>
|
||||
|
||||
* Explique o evento _delegation_.
|
||||
* Explique como `this` funciona em JavaScript.
|
||||
* Explique como funciona herança prototipada.
|
||||
* Como você testa seu JavaScript?
|
||||
* AMD vs. CommonJS?
|
||||
* O que é um _hashtable_?
|
||||
* O que são as variáveis `undefined` e `undeclared`?
|
||||
* O que é uma _closure_, e como/por que você usaria uma?
|
||||
* Seu padrão favorito é utilizado por ele? Argyle (Apenas aplicáveis para IIFEs)
|
||||
* Qual o caso de uso típico para funções anônimas?
|
||||
* Explique o padrão "JavaScript module pattern" e quando você o usaria.
|
||||
* Bônus por mencionar _namespaces_ limpos.
|
||||
* E se seus módulos são namespace-less?
|
||||
* Como você organiza seu código? (module pattern, herança clássica?)
|
||||
* Qual a diferença entre objetos herdados e objetos nativos?
|
||||
* Qual a diferença entre:
|
||||
|
||||
```javascript
|
||||
function Person(){}
|
||||
var person = Person()
|
||||
var person = new Person()
|
||||
```
|
||||
|
||||
* Qual a diferença entre `.call` e `.apply`?
|
||||
* Explique `Function.prototype.bind`.
|
||||
* Quando você otimiza seu código?
|
||||
* Você pode explicar como funciona a herença no Javascript?
|
||||
* Quando você deve usar o `document.write()`?
|
||||
* A maioria dos anúncios de publicidade ainda utilizam `document.write()` embora seu uso não seja recomendado.
|
||||
* Qual a diferença entre feature detection, feature inference, e o uso de UA string?
|
||||
* Explique o que é AJAX mais detalhadamente possível.
|
||||
* Explique como o JSONP funciona (e como ele realmente não é AJAX).
|
||||
* Você já utilizou templates com Javascript?
|
||||
* Se sim, quais bibliotecas foram utilizadas? (Mustache.js, Handlebars etc.)
|
||||
* Explique o que é "hoisting".
|
||||
* Descreva o que é event bubbling.
|
||||
* Qual a diferença entre atributo e propriedade?
|
||||
* Porque a extensão de objetos nativos não são uma boa ideia?
|
||||
* Porque a extensão de elementos nativos não são uma boa ideia?
|
||||
* Qual a diferença entre o evento document load e o evento document ready?
|
||||
* Qual a diferença entre `==` e `===`?
|
||||
* Explique como você pega um parâmetro na URL do browser.
|
||||
* Explique a política de _same-origin_ em relação a Javascript.
|
||||
* Descreva os padrões de herança em JavaScript.
|
||||
* Faça isso funcionar:
|
||||
|
||||
```javascript
|
||||
[1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5]
|
||||
```
|
||||
|
||||
* Descreva a estratégia para memoization (evitar a repetição de cálculo) no JavaScript.
|
||||
* O que é um operador ternário, o que a palavra "ternário" indica/significa?
|
||||
* O que a aridade de uma função?
|
||||
O que é o `"use strict";`? Quais a vantagens e desvantagens de sua utilização?
|
||||
|
||||
### Exemplos de códigos JavaScript:
|
||||
|
||||
```javascript
|
||||
~~3.14
|
||||
```
|
||||
|
||||
Questão: Qual é o valor a ser retornado?
|
||||
|
||||
**Resposta: 3**
|
||||
|
||||
```javascript
|
||||
"sou uma lasanha".split("").reverse().join("");
|
||||
```
|
||||
|
||||
Questão: Qual é o valor a ser retornado?
|
||||
|
||||
**Resposta: "ahnasal amu uos"**
|
||||
|
||||
```javascript
|
||||
( window.foo || ( window.foo = "bar" ) );
|
||||
```
|
||||
Questão: Qual é o valor de `window.foo`?
|
||||
|
||||
**Resposta: "bar"**
|
||||
|
||||
Apenas se window.foo for falso, se não ele vai retornar o seu valor próprio.
|
||||
|
||||
```javascript
|
||||
var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);
|
||||
```
|
||||
Questão: Qual o retorno destes dois alerts?
|
||||
|
||||
**Resposta: "Olá Mundo" & ReferenceError: bar is not defined**
|
||||
|
||||
```javascript
|
||||
var foo = [];
|
||||
foo.push(1);
|
||||
foo.push(2);
|
||||
```
|
||||
|
||||
Questão: Qual o valor de `foo.length`?
|
||||
|
||||
**Resposta: `2`**
|
||||
|
||||
```javascript
|
||||
var foo = {};
|
||||
foo.bar = 'hello';
|
||||
```
|
||||
|
||||
Questão: Qual o valor de `foo.length`?
|
||||
|
||||
**Resposta: `undefined`**
|
||||
|
||||
### Questões específicas de jQuery:
|
||||
|
||||
* Explique o que é "chaining".
|
||||
* Explique o que é "deferreds".
|
||||
* Quais são algumas especificações de optimização do jQuery que você pode implementar?
|
||||
* O que o `.end()` faz?
|
||||
* Como, e porque, faria namespacing de vários agregadores de eventos?
|
||||
* Cite 4 valores diferentes que você pode passar pelo método jQuery
|
||||
* Seletores (string), HTML (string), Callback (function), HTMLElement, object, array, element array, jQuery Object etc.
|
||||
* Quais são os efeitos do queue?
|
||||
* Qual a diferença entre `.get()`, `[]`, e `.eq()`?
|
||||
* Qual a diferença entre `.bind()`, `.live()`, e `.delegate()`?
|
||||
* Qual a diferença entre `$` e `$.fn`? Ou, apenas, o que é `$.fn`.
|
||||
* Optimize esse seletor:
|
||||
```javascript
|
||||
$(".foo div#bar:eq(0)")
|
||||
```
|
||||
* Qual a diferença entre 'delegate()' e 'live()'?
|
||||
|
||||
|
||||
### Questões específicas de CSS
|
||||
* Qual é a diferença entre classes e IDs no CSS?
|
||||
* Descreva o que é o arquivo "reset" do css e o que ele faz e como ele é útil.
|
||||
* Descreva o que são floats e como eles funcionam.
|
||||
* Bônus para identicação das desvantagens de um *reset* e/ou mencionar *normalize* como uma melhor alternativa.
|
||||
* Descreva o que são Floats e como eles funcionam.
|
||||
* Descreva z-index e como o empilhamento do contexto é formado.
|
||||
* Quais são as várias técnicas para "clearing" e quais delas são apropriadas para qual contexto?
|
||||
* Explique o que são CSS Sprites, e como você implementaria eles em um website.
|
||||
* Quais são suas técnicas favoritas para troca de imagens e quais dela você usa.
|
||||
|
|
@ -208,7 +89,7 @@ $(".foo div#bar:eq(0)")
|
|||
* Como você desenvolve sua página para browsers com recursos limitados?
|
||||
* Quais técnicas/processos você usa?
|
||||
* Quais são as diferentes formas de visualizar conteúdo escondido (e como fazer para deixar eles disponíveis apenas para leitores de tela?)
|
||||
* VoCê já utilizou algum sistema de grid, se sim, qual você prefere?
|
||||
* Você já utilizou algum sistema de grid, se sim, qual você prefere?
|
||||
* Você já utilizou ou implementou media queries ou css's específicos para mobile?
|
||||
* Qual sua familiaridade com SVG?
|
||||
* Como você optimiza suas páginas para impressão?
|
||||
|
|
@ -218,11 +99,131 @@ $(".foo div#bar:eq(0)")
|
|||
* Como você implementaria um website que não utilizaria fontes padrões nos computadores?
|
||||
* Webfonts (Serviços como: Google Webfonts, Typekit etc.)
|
||||
* Explique como um browser determina quais os elementos que correspondem a um seletor CSS.
|
||||
* Explique o que você entende sobre *box model* e como você poderia dizer para o navegador en CSS para renderizar seu layout em diferentes *box models*.
|
||||
* O que ```* { box-sizing: border-box; }``` faz? Quais são as vantagens?
|
||||
* Liste quantas propriedades *display* você puder lembrar.
|
||||
* Qual a diferença entre inline e inline-block?
|
||||
* Qual a diferença entre elementos posicionados de forma relativa, fixa, absoluta e estática?
|
||||
* Quais frameworks CSS você tem usado localmente ou em produção? (Bootstrap, PureCSS, Foundation etc.)
|
||||
* Se sim, quais deles? Se você puder, como você mudaria/melhoraria ele(s)?
|
||||
* Você já brincou com as novas especificações de CSS Flexbox e CSS Grid?
|
||||
* Como o design responsivo é diferente do design adaptavel?
|
||||
* Você já trabalhou com gráficos retina? Se sim, quando e quais técnicas você usou?
|
||||
|
||||
### Questões divertidas opcionais:
|
||||
####[[⬆]](#toc) <a name='js'>Questões de JS:</a>
|
||||
|
||||
* Qual a coisa mais legal que você desenvolveu, qual você ficou mais orgulhoso?
|
||||
* Explique o evento _delegation_.
|
||||
* Explique como `this` funciona em JavaScript.
|
||||
* Explique como funciona herança prototipada.
|
||||
* Como você testa seu JavaScript?
|
||||
* AMD vs. CommonJS?
|
||||
* Explique por que a seguinte função não funciona como uma IIFE: `function foo(){ }();`.
|
||||
* O que precisa ser alterado para se tornar uma IIFE?
|
||||
* Qual a diferença entre uma variável que `null`, `undefined` ou `undeclared`?
|
||||
* Como você verificaria esses estados?
|
||||
* O que é uma _closure_, e como/por que você usaria uma?
|
||||
* Qual o caso de uso típico para funções anônimas?
|
||||
* Como você organiza seu código? (module pattern, herança clássica?)
|
||||
* Qual a diferença entre objetos herdados e objetos nativos?
|
||||
Qual a diferença entre: `function Person(){}`, `var person = Person()`, e `var person = new Person()`?
|
||||
* Qual a diferença entre `.call` e `.apply`?
|
||||
* Explique `Function.prototype.bind`.
|
||||
* Quando você otimiza seu código?
|
||||
* Você pode explicar como funciona a herença no Javascript?
|
||||
* Quando você deve usar o `document.write()`?
|
||||
* A maioria dos anúncios de publicidade ainda utilizam `document.write()` embora seu uso não seja recomendado.
|
||||
* Qual a diferença entre feature detection, feature inference, e o uso de UA string?
|
||||
* Explique o que é AJAX o mais detalhadamente possível.
|
||||
* Explique como o JSONP funciona (e como ele realmente não é AJAX).
|
||||
* Você já utilizou templates com Javascript?
|
||||
* Se sim, quais bibliotecas foram utilizadas? (Mustache.js, Handlebars etc.)
|
||||
* Explique o que é "hoisting".
|
||||
* Descreva o que é event bubbling.
|
||||
* Qual a diferença entre "atributo" e "propriedade"?
|
||||
* Porque a extensão de objetos nativos não é uma boa ideia?
|
||||
* Qual a diferença entre o evento document load e o evento document ready?
|
||||
* Qual a diferença entre `==` e `===`?
|
||||
* Explique como você pega um parâmetro na URL do browser.
|
||||
* Explique a política de _same-origin_ em relação a Javascript.
|
||||
* Faça isso funcionar:
|
||||
```javascript
|
||||
[1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5]
|
||||
```
|
||||
* O que é um operador ternário, o que a palavra "ternário" indica/significa?
|
||||
* O que é o `"use strict";`? Quais a vantagens e desvantagens de sua utilização?
|
||||
* Crie um loop for que itere até `100` enquanto retorn **fizz** em múltiplos de `3`, **buzz** em múltiplos de `5` e **fizzbuzz** em múltiplos de `3` e `5`.
|
||||
|
||||
####[[⬆]](#toc) <a name='jquery'>Questões de jQuery:</a>
|
||||
|
||||
* Eplique "chaining".
|
||||
* Eplique "deferreds".
|
||||
* Quais são algumas otimizações de jQuery que você pode implementar?
|
||||
* O que `.end()` faz?
|
||||
* Nomeie 4 valores diferentes que você pode passar para um método jQuery.
|
||||
* Seletor (string), HTML (string), Callback (function), HTMLElement, objeti, array, elemento de array, jQuery Object etc.
|
||||
* Qual a diferença entre `.get()`, `[]`, e `.eq()`?
|
||||
|
||||
####[[⬆]](#toc) <a name='jscode'>Questões de código:</a>
|
||||
|
||||
*Questão: Como você faria isso funcionar?*
|
||||
```javascript
|
||||
add(2, 5); // 7
|
||||
add(2)(5); // 7
|
||||
```
|
||||
|
||||
|
||||
*Question: Qual valor é retornado da seguinte declaração?*
|
||||
```javascript
|
||||
"sou uma lasanha".split("").reverse().join("");
|
||||
```
|
||||
**Answer: "ahnasal amu uos"**
|
||||
|
||||
|
||||
*Questão: Qual é o valor de `window.foo`?*
|
||||
```javascript
|
||||
( window.foo || ( window.foo = "bar" ) );
|
||||
```
|
||||
**Resposta: "bar"** *(apenas se window.foo for falso, se não ele vai retornar o seu valor próprio).*
|
||||
|
||||
|
||||
*Questão: Qual o retorno dos dois alerts abaixo?*
|
||||
```javascript
|
||||
var foo = "Hello";
|
||||
(function() {
|
||||
var bar = " World";
|
||||
alert(foo + bar);
|
||||
})();
|
||||
alert(foo + bar);
|
||||
```
|
||||
**Resposta: "Hello World" & ReferenceError: bar is not defined**
|
||||
|
||||
|
||||
*Questão: Qual o valor de `foo.length`?*
|
||||
```javascript
|
||||
var foo = [];
|
||||
foo.push(1);
|
||||
foo.push(2);
|
||||
```
|
||||
**Resposta: `2`**
|
||||
|
||||
####[[⬆]](#toc) <a name='fun'>Questões Divertidas:</a>
|
||||
|
||||
* Qual a coisa mais legal que você desenvolveu recentement? Qual você ficou mais orgulhoso?
|
||||
* Quais suas partes favoritas sobre as ferramentas de desenvolvimento que você usa?
|
||||
* Você teve algum projeto para animais de estimação? Qual tipo?
|
||||
* Qual sua feature favorita do Internet Explorer?
|
||||
* Qual é a melhor linguagem de programação para aprender em 2014?
|
||||
|
||||
####[[⬆]](#toc) <a name='references'>Outras Grandes Referências:</a>
|
||||
|
||||
* http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before
|
||||
* http://www.nczonline.net/blog/2010/01/05/interviewing-the-front-end-engineer/
|
||||
* http://css-tricks.com/interview-questions-css/
|
||||
* http://davidshariff.com/quiz/
|
||||
* http://blog.sourcing.io/interview-questions
|
||||
* http://www.toptal.com/javascript/interview-questions
|
||||
* http://www.sitepoint.com/5-typical-javascript-interview-exercises/
|
||||
* http://www.sitepoint.com/5-javascript-interview-exercises/
|
||||
|
||||
####[[⬆]](#toc) <a name='license'>Licença:</a>
|
||||
|
||||
Lançado sobre a [Licença MIT](http://opensource.org/licenses/MIT). Veja o arquivo LICENSE para detalhes.
|
||||
|
|
|
|||
Loading…
Reference in New Issue