A primeira regra dos itens de teste é nunca fazer itens de teste!
Já houve muitas disputas sobre isso no Habré, e aí tive a oportunidade de aprender essa lição na minha própria pele. Enviei a solução, mas não recebi resposta. Mesmo negativo. Nada. Claro, tudo pode ser atribuído à crise, que a vaga foi congelada de repente (ouço isso muitas vezes ultimamente, mas as mesmas vagas continuam penduradas). Ainda assim, a polidez banal teria sido mais do que suficiente. A conclusão é inequívoca: você precisa verificar cuidadosamente a confiabilidade do interlocutor antes de morder o TZ.
No entanto, dei esse passo deliberadamente para me testar, para ganhar alguma experiência, mesmo em caso de fracasso com o empregador. O artigo não será sobre isso. As dificuldades de solução surgem já na fase de leitura da ficha técnica. Às vezes, você nem sabe como iniciar uma tarefa, e a escolha que você fizer no início afetará todos os estágios de desenvolvimento.
Existem muitos tutoriais sobre como criar arte corporal online, então em que o meu será diferente? Em primeiro lugar, normalmente não são feitos de acordo com o trabalho técnico, o que significa que os autores “acertam em cheio” e, em geral, não se limitam a nada. Em segundo lugar, é raro ver uma explicação de por que um ou outro caminho foi escolhido para resolver o problema. Em terceiro lugar, minha aplicação é uma ordem de magnitude mais complicada do que a lista de tarefas padrão, mais sobre isso posteriormente.
Para me familiarizar com a tarefa que recebi, pergunto sob o spoiler:
Tarefa técnica:
Use o Vue.js para implementar um pequeno aplicativo de anotações do SPA.
Cada nota tem um título e uma lista de tarefas e, em seguida, Tarefas. Cada item de Todo consiste em uma caixa de seleção e a assinatura de texto associada.
O aplicativo consiste em apenas 2 páginas.
. Todo, , . :
( )
, Todo, . :
( )
( )
Todo:
:
.
( ) .
usability.
.
/ (Ctrl+Z, Command+Z, etc.).
:
"alert", "prompt" "confirm".
JavaScript TypeScript.
, , Webpack.
UI ( Vuetify).
, .
Vue-.
:
, , , , .
.
— . ( ). .
:
(GitHub, BitBucket, GitLab) .
. Dockerfile docker-compose.yaml, docker-compose up .
.
, . . , , , , ( ) , , .. , .
:
Vue.js SPA . : Vue CLI .
todo list, ( - Todo). Todo . - , : , .
2 . - Vue Router? . , , - . , , . , , ? - .
, :
. : , , . "" , Vue .
. SPA, Vue CLI.
( ) .
"alert", "prompt" "confirm".
Promise, . , . , , , . vue-modal-dialogs - , . Vue 3.
usability. , . , .
. - , , Cookie localStorage. , . localStorage. Vuex, , . , , .
JavaScript TypeScript. - ? , , Vue. TypeScript Vue 2 , . , Vue 3.
, ! Vue 2, , , .
, , Webpack. Vue CLI Webpack, SPA Vue.js
UI ( Vuetify) - . "" , Material Icons , . , , .
, . - flexbox .
Vue-. - : 2 , , , , - .
.
:
v-click-outside. . , . , . , - . , .
: , ? : , ? . Vue-Router . beforeRouteLeave . . , . , :
async beforeRouteLeave (to, from, next) {
if (await confirm('Do you realy want to leave this page?',
'All unsaved changes will be lost.')) {
this.clearNote()
next()
} else{
next(from)
}
}. Vue.js. , . .
, .