Vas començar aquest curs escrivint console.log('Hola, Taller Nómada'); sense saber gaire bé què era una variable. Acabes amb un producte propi planificat, construït per capes, persistit amb migracions, provat en tres nivells, desplegat amb HTTPS i desplegament continu, documentat amb ADR i defensable en una entrevista. Entre aquestes dues frases hi ha onze mòduls i força hores teves. Aquesta última lliçó no ensenya una tècnica nova: fa tres coses diferents i necessàries. Primer, un balanç honest de què saps ara —competència a competència, mòdul a mòdul— i, amb la mateixa honestedat, què no cobreix aquest curs, perquè conèixer els propis buits és tan valuós com conèixer les pròpies capacitats. Segon, el mapa del que ve: TypeScript, Node.js i el backend, dominar un framework de debò, les eines i la plataforma, aprofundir en el web i triar una especialització — cada camí amb què és, per què importa, com començar i quant de temps demana, sense exageracions. I tercer, el més important i el que menys s'ensenya: com se segueix aprenent quan ja no hi ha un curs que et digui què toca, com mantenir-se al dia sense esgotar-se, i què fer amb tot això en termes de carrera, amb honestedat sobre com està el mercat. Acabaràs amb un full de ruta de sis mesos adaptat a la teva disponibilitat real. És l'última lliçó: no enllaça amb res posterior, perquè el que ve després ja ho decideixes tu.
Contingut
- El balanç: què saps ara
- El que aquest curs no cobreix
- El mapa dels camins
- TypeScript: el tipatge estàtic
- Node.js i el backend
- Un framework en profunditat
- Eines i plataforma
- Aprofundir en la plataforma web
- Les especialitzacions
- Com se segueix aprenent quan ja no hi ha curs
- Llegir codi aliè i contribuir
- Com mantenir-se al dia sense esgotar-se
- Per què les bases no caduquen
- El full de ruta de sis mesos
- Carrera: portafoli, currículum i entrevistes
- La primera feina i aprendre treballant
- Errors Habituals i Consells
- Exercicis
- Conclusió
- El balanç: què saps ara
És fàcil acabar un curs llarg amb la sensació que «no saps tant». És una impressió gairebé universal i gairebé sempre falsa: la causa és que has anat pujant el llistó del que consideres «saber» al mateix ritme que aprenies.
Aquesta taula és l'inventari real. No és de temari: és de competències, escrites com a coses que pots fer.
| Mòdul | El que pots fer ara |
|---|---|
| M1 · Introducció | Muntar un entorn de desenvolupament, entendre què fa un motor de JavaScript, declarar i fer servir variables amb criteri, triar el tipus adequat, i llegir un missatge d'error sense bloquejar-te |
| M2 · Control de flux | Expressar regles de negoci amb condicionals llegibles, recórrer dades amb el bucle adequat, i gestionar errors amb try/catch distingint l'esperat de l'excepcional |
| M3 · Funcions | Descompondre un problema en funcions amb una responsabilitat, fer servir closures per encapsular estat, escriure funcions d'ordre superior, i resoldre estructures recursives |
| M4 · Objectes i arrays | Modelar entitats, transformar col·leccions amb map, filter i reduce, desestructurar, copiar sense efectes col·laterals i serialitzar a JSON |
| M5 · Avançat | Dissenyar classes amb encapsulació real, organitzar el codi en mòduls, dominar l'asincronia amb promeses i async/await, i explicar el bucle d'esdeveniments i les microtasques |
| M6 · DOM | Construir interfícies sense framework: selecció, creació, esdeveniments, delegació, renderitzat de llistes i formularis accessibles amb validació |
| M7 · APIs del navegador | Persistir dades, parlar amb una API amb fetch robust, fer servir WebSockets, convertir un web en PWA amb service worker, i conèixer les APIs essencials |
| M8 · Proves | Depurar amb mètode, mantenir la qualitat amb ESLint i Prettier, escriure proves unitàries, d'integració i d'extrem a extrem, i fer servir dobles de prova |
| M9 · Rendiment | Mesurar abans d'optimitzar, fixar un pressupost, optimitzar codi, gestionar memòria, manipular el DOM eficientment i dividir la càrrega |
| M10 · Frameworks | Entendre per què existeixen, conèixer React, Redux, Vue i Angular a nivell funcional, i triar amb criteri en lloc de per moda |
| M11 · Projecte | Planificar un producte, construir-lo per capes, persistir i sincronitzar dades, muntar una estratègia de proves i CI, desplegar amb seguretat, i presentar-lo i defensar-lo |
I les competències transversals, que són les que més valen i les que cap temari no llista:
| Competència | On la vas adquirir |
|---|---|
| Convertir un problema en un model de dades i unes regles | 01-08, 11-01 |
| Decidir amb criteri i poder defensar la decisió | 10-06, 11-01, 11-06 |
| Mesurar abans d'opinar | Tot el M9, 11-04 |
| Depurar amb mètode en lloc de a les palpentes | 08-01, 11-02, 11-04 |
| Escriure codi que una altra persona pugui mantenir | M8, 11-02, 11-06 |
| Acabar coses | Tot el M11 |
Aquesta última fila és, sense cap exageració, la que més et diferenciarà. Moltíssima gent comença projectes; molt poca els porta des del pla fins al desplegament documentat.
Una manera de comprovar-ho tu mateix: torna a llegir el codi que vas escriure al Mòdul 1 i al 2. Si et sembla millorable —i t'ho semblarà— és la prova objectiva que has avançat. La incomoditat en mirar el propi codi antic és el senyal més fiable de progrés que existeix en aquesta professió, i no desapareix mai: d'aquí a dos anys sentiràs el mateix amb el que escrius avui.
- El que aquest curs no cobreix
Igual d'important, i força més rar de trobar escrit.
| Àrea | Què no s'ha vist | Quant importa |
|---|---|---|
| Tipatge estàtic | TypeScript: tipus, genèrics, inferència | Molt en equips i al mercat laboral |
| Backend | Node.js com a servidor, APIs REST, bases de dades, autenticació | Molt si vols full-stack o entendre el sistema complet |
| Un framework de debò | Només se'n van veure els fonaments de quatre; cap en profunditat | Molt per a la majoria d'ofertes |
| CSS modern | Grid, contenidors, sistemes de disseny, animacions | Bastant: s'ha fet servir, no ensenyat |
| Bases de dades | Modelatge relacional, SQL, índexs, transaccions | Molt en backend |
| Algorismes i estructures | Complexitat, grafs, arbres balancejats, dinàmica | Mitjà: importa en algunes entrevistes |
| Seguretat web en profunditat | OWASP, CSRF, sessions, criptografia aplicada | Molt en producció real |
| Arquitectura a escala | Micro-frontends, monorepos, sistemes de disseny | Mitjà: arriba amb la mida de l'equip |
| DevOps | Docker, Kubernetes, infraestructura com a codi, el núvol | Mitjà-alt segons el lloc de treball |
| Mòbil | React Native, Capacitor, aplicacions natives | Depèn del teu objectiu |
| Treball en equip real | Revisions creuades, metodologies, gestió de producte | Molt, i només s'aprèn treballant |
Aquesta última fila mereix una nota honesta: hi ha coses que no s'aprenen en cap curs. Treballar amb codi que va escriure una altra persona fa quatre anys, negociar un abast amb qui no és tècnic, mantenir un sistema del qual ningú no recorda res, o revisar el codi d'un company sense trencar la relació. S'aprenen treballant, i no passa res per no saber-les encara. El que sí que ajuda és saber que existeixen i no confondre «no les domino» amb «no valc».
I un advertiment sobre la llista. Veure-la completa produeix un cert vertigen. No cal aprendre-ho tot, i molt menys alhora. La secció següent ordena això en camins, i la 14 ho converteix en un pla de sis mesos amb una direcció principal.
- El mapa dels camins
flowchart TD
A["Saps JavaScript<br/>i has acabat un producte"] --> B["TypeScript<br/><i>1-2 mesos</i>"]
A --> C["Un framework<br/>en profunditat<br/><i>2-3 mesos</i>"]
A --> D["Node.js<br/>i backend<br/><i>3-4 mesos</i>"]
B --> E["Front-end<br/>de producte"]
C --> E
C --> F["Especialista<br/>front-end"]
D --> G["Full-stack"]
B --> G
A --> H["Plataforma web<br/>a fons<br/><i>continu</i>"]
H --> I["Accessibilitat<br/>Rendiment<br/>Seguretat"]
A --> J["Eines<br/>i plataforma<br/><i>transversal</i>"]
J --> G
J --> K["Tooling / DevEx"]
style A fill:#dcfce7,stroke:#16a34a
style B fill:#dbeafe,stroke:#2563eb
style C fill:#dbeafe,stroke:#2563eb
style D fill:#dbeafe,stroke:#2563eb
Els tres camins blaus són els principals, i l'ordre recomanat és aquest:
- TypeScript primer, perquè és el més barat (comences avui, sobre el teu propi projecte) i perquè multiplica el valor de tota la resta.
- Un framework en profunditat després, perquè és el que més apareix a les ofertes i perquè ja tens el criteri de 10-06 per triar-ne un.
- Node.js quan vulguis entendre el sistema complet, o si t'atreu el backend.
Els camins grisos —plataforma web i eines— no són alternatives: són continus. S'hi avança sempre, en paral·lel, una mica cada mes.
I la regla que governa tot el mapa, que convé escriure en algun lloc visible:
Tria una direcció principal per als propers sis mesos. Una. Les altres hi continuaran sent.
L'error més comú en acabar un curs és començar quatre coses alhora, tenir tres mesos de sensació d'avenç, i no dominar-ne cap. Un a la vegada, amb profunditat, és més ràpid encara que no ho sembli.
- TypeScript: el tipatge estàtic
4.1 Què és i per què importa
TypeScript és JavaScript amb tipus comprovats abans d'executar. S'escriu gairebé igual, es compila a JavaScript, i el navegador no el veu mai.
El que canvia no és la sintaxi: és quan descobreixes els errors.
// Sense tipus: aixo falla en produccio, un dimarts, al mobil d algu
function horesDe(tasca) {
return tasca.horesEstimades.toFixed(1); // 💥 si horesEstimades es undefined
}
// Amb tipus: falla en escriure-ho, al teu editor, subratllat en vermell
interface Tasca {
id: number;
titol: string;
horesEstimades: number;
responsableId: string | null;
}
function horesDe(tasca: Tasca): string {
return tasca.horesEstimades.toFixed(1); // ✅ el compilador garanteix que existeix
}Per què canvia el treball en equip, que és el seu valor principal i el menys evident:
| Sense tipus | Amb tipus |
|---|---|
| Per saber què retorna una funció, la llegeixes | La signatura ho diu, i l'editor t'ho mostra |
En canviar un camp, busques usos amb grep i confies |
El compilador t'enumera tots els llocs que cal tocar |
| La documentació es desactualitza | Els tipus no poden desactualitzar-se: no compilen |
| Refactoritzar fa por | Reanomenar és una operació segura de l'editor |
«Això pot ser null?» |
La resposta està escrita |
Aquest segon punt és el que més es nota en un projecte real. Canviar responsable: string per responsableId: string | null al teu projecte va significar revisar a mà tots els llocs afectats; amb TypeScript, el compilador et dona la llista completa i no se n'hi escapa cap.
4.2 La porta d'entrada barata: // @ts-check i JSDoc
No cal migrar res per començar. TypeScript pot comprovar el teu JavaScript actual fent servir comentaris JSDoc, que ja coneixes de 08-02.
// @ts-check
/**
* Calcula les hores obertes d una llista de tasques.
* @param {Array<{estat: string, horesEstimades: number}>} tasques
* @param {string} [responsableId] - Si s indica, filtra per responsable
* @returns {number} Hores de les tasques no acabades
*/
export function horesObertes(tasques, responsableId) {
return tasques
.filter((t) => t.estat !== 'feta')
.filter((t) => !responsableId || t.responsableId === responsableId) // ⚠️ error
.reduce((suma, t) => suma + t.horesEstimades, 0);
}Amb aquella única línia // @ts-check al principi del fitxer, el teu editor ja et subratlla que t.responsableId no existeix al tipus declarat. Zero configuració, zero compilació, zero canvis al codi que s'executa.
El pas següent és un jsconfig.json que ho activi per a tot el projecte:
{
"compilerOptions": {
"checkJs": true,
"strict": true,
"target": "ES2022",
"module": "ESNext",
"moduleResolution": "bundler",
"noEmit": true
},
"include": ["src/**/*.js"]
}Aquest és el camí que recomano, i no és l'habitual: aprendre TypeScript sobre el teu propi projecte, tipant el domini primer, amb JSDoc i sense compilació. És gradual, reversible i aplicat a un codi que coneixes.
4.3 La migració gradual
Quan vulguis fer el salt a .ts de debò:
| Pas | Què fas | Durada |
|---|---|---|
| 1 | // @ts-check + JSDoc a domini/ |
1 setmana |
| 2 | jsconfig.json amb checkJs a tot el projecte |
1 dia |
| 3 | Instal·lar TypeScript; reanomenar domini/*.js a .ts |
1 setmana |
| 4 | dades/ i aplicacio/ |
1–2 setmanes |
| 5 | vista/ (la que més any tolerarà al principi) |
1–2 setmanes |
| 6 | Activar strict complet i eliminar els any |
Continu |
Comença sempre pel domini. És on els tipus aporten més (les entitats i les regles), on el codi és més estable, i on no hi ha any inevitables del DOM.
4.4 Un exemple del teu propi model tipat
// src/domini/tipus.ts
export type Estat = 'pendent' | 'en-curs' | 'feta';
export type Prioritat = 'alta' | 'mitjana' | 'baixa';
export type Rol = 'coordinacio' | 'equip' | 'convidat';
export interface Usuari {
readonly id: string;
nom: string;
inicials: string;
rol: Rol;
actiu: boolean;
}
export interface Tasca {
readonly id: number;
titol: string;
responsableId: string | null;
revisorId: string | null;
prioritat: Prioritat;
readonly estat: Estat; // nomes canvia per canviarEstat()
etiquetes: readonly string[];
horesEstimades: number;
dataLimit: string | null;
tascaMareId: number | null;
readonly creadaEl: string;
}
// R6: la matriu de transicions, comprovada pel compilador
export const TRANSICIONS: Record<Estat, readonly Estat[]> = {
'pendent': ['en-curs'],
'en-curs': ['feta', 'pendent'],
'feta': ['en-curs']
} as const;
export interface Repositori {
llistarTasques(): Promise<Tasca[]>;
desarTasca(tasca: Tasca): Promise<Tasca>;
esborrarTasca(id: number): Promise<void>;
llistarUsuaris(): Promise<Usuari[]>;
}Fixa't en quatre coses que aquest fitxer aconsegueix de franc:
EstatiPrioritatcom a unions de literals fan impossible escriure'acabada'per error. És la R6 i les validacions de conjunt tancat, comprovades pel compilador en lloc de en execució.readonlydocumenta i fa complir quins camps no es toquen directament. És l'encapsulació de 05-03 expressada al tipus.Record<Estat, readonly Estat[]>garanteix que la matriu de transicions cobreix tots els estats. Si demà hi afegeixes'arxivada', no compila fins que en defineixis les transicions. Això és una regla de negoci verificada pel compilador.interface Repositoriés el teu contracte de 11-02, ara comprovat: si una implementació oblida un mètode o canvia una signatura, no compila. La prova de contracte continua sent necessària per al comportament, però la forma la garanteix el tipus.
4.5 Com començar i quant demana
| Com començar | // @ts-check en un fitxer del teu domini, avui. Després jsconfig.json. Després la migració gradual |
| Què estudiar | Tipus bàsics, unions, interfícies davant de type, genèrics, unknown davant d'any, guardes de tipus, utilitats (Partial, Pick, Omit, Record) |
| Quant de temps | 2–3 setmanes per ser productiu. 2–3 mesos per tenir soltesa amb genèrics i tipus avançats |
| Quan notaràs el benefici | El primer refactor gran. Allà es paga sol |
| Què NO fer | Posar any així que alguna cosa es complica. Cada any és un forat que anul·la la garantia en cadena |
- Node.js i el backend
5.1 Què és i per què importa
Node.js és JavaScript fora del navegador. El mateix llenguatge, el mateix bucle d'esdeveniments que vas estudiar a 05-07, les mateixes promeses — però amb accés al sistema de fitxers, a la xarxa i a processos.
El que canvia:
| Navegador | Node.js |
|---|---|
window, document, DOM |
No existeixen |
localStorage |
Sistema de fitxers i bases de dades |
fetch per demanar |
Servidor que respon peticions |
| L'usuari controla l'entorn | Tu controles l'entorn |
| Res no és secret | Les claus estan segures |
| Un usuari a la vegada | Molts alhora, amb estat compartit |
Les dues últimes files són les importants, i ja te les vas trobar a 11-05: la validació ha d'estar al servidor perquè el client el controla l'usuari, i els secrets només poden viure on l'usuari no arriba.
5.2 El camí, en quatre passos
Pas 1 · Un servidor HTTP bàsic. Amb Express o Fastify, entendre rutes, mètodes, capçaleres, cossos i codis d'estat:
import express from 'express';
import { Tasca } from '../src/domini/tasca.js'; // ← EL TEU domini, sense canvis
import { ErrorDeValidacio, ErrorDeRegla } from '../src/domini/errors.js';
const app = express();
app.use(express.json({ limit: '100kb' }));
app.post('/v1/tasques', async (peticio, resposta, seguent) => {
try {
const tasca = new Tasca(peticio.body); // R1-R15 al servidor
resposta.status(201).json(await repositori.desar(tasca));
} catch (error) {
seguent(error);
}
});
// Gestor d errors centralitzat: tradueix errors de domini a HTTP
app.use((error, _peticio, resposta, _seguent) => {
if (error instanceof ErrorDeValidacio) {
return resposta.status(400).json({ codi: 'VALIDACIO', camp: error.camp, missatge: error.message });
}
if (error instanceof ErrorDeRegla) {
return resposta.status(409).json({ codi: 'REGLA', missatge: error.message });
}
registrar(error);
resposta.status(500).json({ codi: 'INTERN', missatge: 'Error intern' });
});Aquest import del teu propi domini és la recompensa de tota l'arquitectura del mòdul. Les quinze regles, escrites i provades una sola vegada, executant-se als dos costats. No és un exemple idealitzat: funciona perquè domini/ no va importar mai res del navegador.
Pas 2 · Base de dades. SQLite per començar (un fitxer, zero instal·lació), PostgreSQL quan el necessitis. El que cal aprendre: modelatge relacional, claus foranes, SQL bàsic, índexs, i per què existeixen les transaccions.
Pas 3 · Autenticació i autorització. La distinció que 11-05 va deixar plantejada: autenticació és qui ets; autorització és què pots fer. Contrasenyes amb hash lent (bcrypt o argon2, mai MD5 ni SHA a seques), sessions amb cookie HttpOnly o tokens, i permisos per rol — la teva R15, ara aplicada on no es pot saltar.
Pas 4 · Producció. Variables d'entorn, registre estructurat, límits de peticions, CORS, còpies de seguretat, contenidors.
5.3 Com començar i quant demana
| Com començar | Substitueix el teu json-server per un Express propi de 100 línies que faci servir el teu domini |
| Projecte següent | El backend real del teu projecte: base de dades, autenticació i desplegament. Converteix la teva v1.0 en v2.0 |
| Quant de temps | 1 mes per a un CRUD amb base de dades. 3–4 mesos per a alguna cosa amb autenticació i desplegada amb criteri |
| Què NO fer | Començar per microserveis o GraphQL. Un monòlit ben fet primer |
Una nota d'honestedat sobre les bases de dades: és la part on més gent subestima l'esforç. Escriure un SELECT és fàcil; modelar bé, entendre què fa un índex, i saber per què una consulta triga dos segons és un món propi. Val la pena i porta temps.
- Un framework en profunditat
6.1 Per què dominar-ne un de debò
A 10-06 vas aprendre a triar. Ara toca dominar, i són coses diferents.
Conèixer quatre frameworks a nivell de tutorial té un valor sorprenentment baix:
| Nivell | Què pots fer | Valor al mercat |
|---|---|---|
| Tutorial (10 h) | Seguir un exemple, entendre el vocabulari | Baix |
| Funcional (100 h) | Construir una aplicació completa | Mitjà |
| Profund (500+ h) | Depurar problemes rars, prendre decisions d'arquitectura, optimitzar, formar altres | Alt |
La diferència entre el segon i el tercer és on hi ha el salt professional. I només s'aconsegueix amb un, no repartint el temps entre quatre.
6.2 Quin triar
Torna a la taula de ponderació de 10-06 i aplica-la a tu, no a un projecte:
| Criteri | Pes per a la teva decisió personal |
|---|---|
| Ofertes a la teva ciutat o en remot on busquis | Alt: mira ofertes reals, no enquestes globals |
| Què et va resultar més còmode al Mòdul 10 | Mitjà: la motivació importa |
| Sector al qual vols anar | Mitjà: hi ha correlacions per sector |
| Mida d'empresa objectiu | Baix-mitjà |
Un procediment concret d'una hora, i és la millor hora que pots invertir en aquesta decisió: obre un portal de feina, filtra per la teva ciutat i per «júnior», i compta les mencions de cada framework a les primeres cinquanta ofertes. Aquest número, per al teu mercat, val més que qualsevol tendència global.
6.3 Què significa «en profunditat»
No és aprendre més API. És això:
| Nivell | Què domines |
|---|---|
| Fonaments | Components, estat, props, cicle de vida, esdeveniments |
| Patrons | Composició, elevació d'estat, contenidors davant de presentació, hooks o composables propis |
| Ecosistema | Encaminament, estat global, formularis, peticions i memòria cau de servidor |
| Proves | Testing Library amb aquell framework, i què no provar |
| Rendiment | Quan es torna a renderitzar, memoïtzació, llistes virtualitzades, divisió de codi |
| Arquitectura | Estructura de carpetes, fronteres, on viu la lògica de negoci |
| Interioritats | Com funciona la reconciliació o la reactivitat per dins |
Les dues últimes files són les que separen algú que fa servir un framework d'algú en qui es confia per decidir com es fa servir en un equip. I fixa't que la majoria d'aquestes files ja les saps conceptualment: rendiment (M9), proves (M8), arquitectura (M11). El que aprens és com s'expressen en aquella eina.
6.4 Com començar i quant demana
| Com començar | Reescriu el teu propi projecte amb el framework triat. Ja coneixes el domini: només canvia la vista |
| Després | Un projecte nou amb l'ecosistema complet: encaminament, estat, formularis, peticions |
| Quant de temps | 2–3 mesos per a un nivell funcional sòlid. 6–12 mesos d'ús real per a profunditat |
| Avantatge que tens | A 10-06 va quedar demostrat que domini/regles.js era idèntic als quatre. El teu domini es reutilitza tal qual |
| Què NO fer | Saltar de framework cada dos mesos. Tria'n un i queda-t'hi el temps suficient per arribar al difícil |
- Eines i plataforma
No és un camí en si mateix: és el que acompanya qualsevol dels altres i el que separa algú que programa d'algú que lliura programari.
| Àrea | Què aprendre | Prioritat | Temps |
|---|---|---|---|
| Git avançat | rebase interactiu, bisect, cherry-pick, reflog, resolució de conflictes, fluxos de treball |
Alta | 2 setmanes |
| Terminal | Bash o Zsh, canonades, grep, find, sed, guions propis |
Alta | Continu |
| CI/CD | Ja tens la base de 11-04. Matrius, memòries cau, entorns, aprovacions | Mitjana | 2 setmanes |
| Docker | Imatges, contenidors, docker-compose, per què existeix |
Mitjana-alta | 3 setmanes |
| El núvol | Un proveïdor, serveis bàsics: còmput, emmagatzematge, base de dades, xarxa | Mitjana | 1–2 mesos |
| Observabilitat | Registre estructurat, mètriques, traces, alertes | Mitjana | 2 setmanes |
Git avançat és la de millor relació entre esforç i benefici de tota la taula, i la més infravalorada. Dues setmanes d'estudi i pràctica et donen capacitats que faràs servir cada dia durant tota la teva carrera:
| Ordre | Per a què serveix de debò |
|---|---|
git bisect |
Trobar automàticament quin commit va trencar alguna cosa. Només funciona bé si els teus commits són petits — el que ja fas des de 11-02 |
git rebase -i |
Netejar l'historial abans de fusionar: unir, reordenar, reescriure missatges |
git reflog |
Recuperar feina que creies perduda. Gairebé res no es perd de debò a Git |
git worktree |
Treballar en dues branques alhora sense stash |
git blame |
Trobar el commit —i l'ADR— que explica una línia estranya |
Aquesta última és la que tanca el cercle amb 11-06: git blame sobre una línia estranya et porta al commit, i el cos del commit et porta al perquè. Per això s'escriuen així.
Docker en una frase, perquè acostuma a explicar-se malament: és la manera d'empaquetar la teva aplicació amb tot el que necessita per executar-se —versió de Node, dependències del sistema, configuració— en alguna cosa que funciona igual al teu portàtil, a la CI i en producció. Resol el «a la meva màquina funciona» de manera definitiva.
- Aprofundir en la plataforma web
Aquest camí és diferent dels altres: no s'acaba mai i sempre dona rendiment, perquè el que hi aprens no depèn de cap eina.
| Àrea | Què aprofundir | Per què |
|---|---|---|
| Accessibilitat | WCAG 2.2, ARIA de debò, lectors de pantalla, auditories | Obligació legal creixent i especialització amb demanda i poca oferta |
| Seguretat | OWASP Top 10, XSS, CSRF, sessions, CSP avançada, cadena de subministrament | Tothom ho necessita, gairebé ningú no ho domina |
| Rendiment | Web Vitals a fons, perfilat, xarxa, renderitzat | Impacte directe i mesurable al negoci |
| Arquitectura front-end | Sistemes de disseny, monorepos, micro-frontends, contractes | Arriba amb la mida de l'equip |
| Web Components | customElements, Shadow DOM, plantilles |
L'única cosa que sobreviu a tots els frameworks |
| CSS modern | Grid, consultes de contenidor, capes, :has(), propietats personalitzades |
S'ha fet servir al curs, no ensenyat |
Sobre OWASP, perquè és la més important de la llista i la menys coneguda: és una llista dels deu riscos de seguretat més crítics en aplicacions web, actualitzada periòdicament i feta servir com a referència a tota la indústria. Ja en coneixes diversos temes —XSS (06-02, 11-03), configuració insegura (11-05), secrets exposats (11-05)—, però n'hi ha d'altres que no s'han tocat: control d'accés trencat, errades criptogràfiques, injecció, i la seguretat de la cadena de subministrament (les dependències que instal·les).
Sobre els Web Components, amb el matís de 10-06: són l'estàndard del navegador per crear elements propis reutilitzables, amb connectedCallback com a cicle de vida, attachShadow per aïllar estils i CustomEvent per comunicar — tot el que ja saps, però estandarditzat. El seu valor real no és substituir els frameworks, sinó funcionar a qualsevol lloc: un component que ha de viure en un web de React, un altre d'Angular i un altre sense res.
Com estudiar aquest camí: no en blocs de dos mesos, sinó un tema al mes, en paral·lel a la resta. Un mes d'accessibilitat seriosa aplicada al teu projecte. Un altre d'OWASP amb auditoria pròpia. Un altre de CSS modern refent la teva interfície. És acumulatiu i no caduca.
- Les especialitzacions
A mesura que avancis, apareix la pregunta d'en què et vols convertir. No cal respondre-la avui, però convé conèixer el mapa.
| Especialització | Què fas | Què necessites | Mercat |
|---|---|---|---|
| Front-end de producte | Interfícies, experiència, col·laboració amb disseny | Un framework a fons, CSS, accessibilitat, sensibilitat de producte | Ampli |
| Full-stack | Front i back, sistema complet | Framework + Node/un altre llenguatge + base de dades + desplegament | El més demandat en empreses petites i mitjanes |
| Rendiment web | Mesurar i optimitzar experiències | M9 a fons, xarxa, navegadors, eines | Nínxol, ben pagat |
| Accessibilitat | Auditar, corregir, formar | WCAG, ARIA, lectors, normativa | Nínxol creixent, poca oferta de perfils |
| Tooling / DevEx | Eines internes, CI, empaquetadors | Node, Git, CI/CD, empatia amb qui desenvolupa | Nínxol, en empreses mitjanes i grans |
| Mòbil amb web | Aplicacions amb tecnologia web | React Native o similar + plataformes | Ampli |
| Enginyeria de plataforma | Infraestructura per a equips | Núvol, contenidors, xarxes, automatització | Alt, requereix experiència |
Tres coses que convé saber sobre això:
- No cal triar ara. La majoria de la gent descobreix la seva especialització treballant, en notar cap a quins problemes gravita.
- Les especialitzacions de nínxol tenen menys ofertes però molta menys competència. Algú que de debò en sap d'accessibilitat és difícil de trobar; algú que sap React, no.
- Començar generalista és el normal i el sa. Especialitzar-se massa aviat, sense haver vist prou, acostuma a ser una decisió mal informada.
- Com se segueix aprenent quan ja no hi ha curs
Aquest apartat és, de tota la lliçó, el que més determinarà on siguis d'aquí a tres anys. Perquè a partir de demà ningú no et dirà què toca estudiar.
10.1 Les fonts fiables
No totes les fonts són iguals, i distingir-les estalvia moltíssim temps perdut:
| Font | Fiabilitat | Per a què |
|---|---|---|
| MDN Web Docs | Molt alta | La referència de la plataforma web. La teva primera parada, sempre |
| Especificacions (WHATWG, ECMA, W3C) | Màxima | Quan MDN no n'hi ha prou o hi ha un cas límit rar |
| Documentació oficial de l'eina | Alta | Començar i consultar |
Notes de versió i CHANGELOG |
Alta | Assabentar-se de canvis reals sense soroll |
| Blogs d'enginyeria d'empreses conegudes | Mitjana-alta | Experiències reals amb context |
| Llibres tècnics | Alta, encara que envelleixen | Profunditat i estructura |
| Vídeos i tutorials | Variable | Primer contacte; verifica sempre |
| Respostes en fòrums | Variable i sovint obsoleta | Pistes, mai l'última paraula |
| Contingut generat sense verificar | Baixa | Punt de partida, mai la resposta final |
Tres hàbits concrets que valen més que qualsevol llista de recursos:
- Ves a MDN abans que a un cercador. La meitat de les vegades que busques alguna cosa de JavaScript o del DOM, la resposta canònica hi és, actualitzada i amb la taula de compatibilitat.
- Llegeix les notes de versió del que fas servir. Deu minuts quan surt una versió nova de Node, del teu framework o del teu empaquetador. És la manera més eficient que existeix de mantenir-se al dia, perquè és informació filtrada per rellevància real.
- Verifica la data de tot el que llegeixis. Una resposta del 2016 sobre asincronia en JavaScript pot ser correcta o completament obsoleta, i no ho diu.
10.2 Aprendre construint
Continua sent, amb diferència, la manera més eficaç. La progressió que funciona:
| Nivell | Què construir | Què s'aprèn |
|---|---|---|
| 1 | Reescriure alguna cosa que ja vas fer amb tecnologia nova | La tecnologia, sense la càrrega de dissenyar el problema |
| 2 | Una eina per a tu mateix | Requisits reals; la fas servir i en veus les errades |
| 3 | Alguna cosa que faci servir una altra persona | Casos límit, suport, comentaris reals |
| 4 | Alguna cosa amb restriccions difícils | Escala, temps real, offline, accessibilitat seriosa |
El nivell 2 és el punt òptim i el més infravalorat. Una eina que resolgui un problema teu real —un lector d'alguna cosa, un organitzador del que sigui, un plafó de dades que consultes sovint— té tres avantatges enormes: saps exactament què ha de fer, la fas servir de debò (així que les errades apareixen), i la motivació no depèn de ningú.
I una regla de mida, ja coneguda de 11-01 però aplicada a l'aprenentatge: millor un projecte petit acabat que un de gran a mitges. Acabar ensenya coses que començar no ensenya mai: desplegament, documentació, casos límit, manteniment.
- Llegir codi aliè i contribuir
Llegir codi aliè és l'habilitat que més ràpid creix i menys es practica. A la feina real llegiràs molt més codi del que escrius.
Com llegir un projecte que no coneixes, amb mètode:
| # | Pas | Què busques |
|---|---|---|
| 1 | README i documentació | Què és i com s'executa |
| 2 | Estructura de carpetes | El mapa mental de qui el va escriure |
| 3 | Punt d'entrada (main, index) |
Per on comença tot |
| 4 | Un flux complet, seguint les crides | Com es connecta |
| 5 | Les proves | La millor documentació de comportament que existeix |
| 6 | L'historial d'un fitxer estrany | Per què està així (git log -p, git blame) |
El pas 5 és la drecera que gairebé ningú no fa servir: si vols saber què fa un mòdul, llegeix-ne les proves abans que el codi. Estan escrites per explicar comportament, no per implementar-lo.
Contribuir a projectes de codi obert ensenya coses que cap projecte propi no pot ensenyar:
- Treballar amb convencions que no vas triar.
- Passar per una revisió de codi real d'algú que no et coneix.
- Entendre un sistema gran abans de tocar-lo.
- Escriure missatges de commit i descripcions de PR per a desconeguts.
Com començar, en ordre de dificultat creixent:
- Documentació. Un error, un exemple que falta, una traducció. És una contribució real i la barrera és mínima.
- Reproduir incidències. Agafar una errada reportada, confirmar-la i afegir-hi un cas mínim. És molt útil i molt valorat.
- Bones primeres incidències. Molts projectes les etiqueten per a gent nova.
- Correcció petita amb prova. Una errada acotada, amb la seva prova de regressió.
- Funcionalitat, sempre després de proposar-la en una incidència. No obris mai una PR gran sense haver-la discutit.
I una preparació emocional honesta: la teva primera contribució probablement rebi comentaris, canvis demanats, o fins i tot el rebuig. És el normal i no és personal. Qui manté un projecte vetlla per la seva coherència a llarg termini, no per la teva tarda. Aplica el de 11-06: la crítica al codi no és crítica a tu.
- Com mantenir-se al dia sense esgotar-se
El desenvolupament web té fama de canviar massa ràpid. És veritat a mitges, i la meitat falsa és la que produeix esgotament.
El que canvia ràpid:
- Les llibreries de moda i les seves versions majors.
- Les eines de compilació.
- Els patrons concrets dins d'un framework.
- Les opinions sobre la millor manera de fer alguna cosa.
El que no canvia:
- El llenguatge (afegeix, gairebé mai no trenca).
- El DOM i els esdeveniments.
- HTTP, la memòria cau, la seguretat.
- L'accessibilitat.
- Com es prova, com es depura, com es mesura.
- Dissenyar un model de dades i unes regles.
- Saber decidir.
La proporció és la clau de tot aquest apartat: l'estable és la major part del que fas servir cada dia, i és exactament el que aquest curs t'ha donat.
Les cinc regles d'higiene informativa:
| Regla | Detall |
|---|---|
| 1 · No intentis seguir-ho tot | És impossible i és l'origen de l'esgotament. Tria tres o quatre àrees |
| 2 · Filtra per permanència | Abans d'estudiar alguna cosa, pregunta't: això continuarà sent cert d'aquí a cinc anys? |
| 3 · Aprèn sota demanda | Estudia el que necessites per al que estàs fent. El que s'aprèn sense ús s'oblida en setmanes |
| 4 · Un tema a la vegada | Profunditat en un val més que superfície en cinc |
| 5 · Descansa sense culpa | Ningú no està al dia de tot. Ningú. Ni les persones que més admires tècnicament |
Un ritme sostenible concret, que pots copiar:
| Freqüència | Activitat | Temps |
|---|---|---|
| Diària | Escriure codi (encara que siguin 30 minuts) | 30–60 min |
| Setmanal | Llegir alguna cosa tècnica amb calma | 1–2 h |
| Mensual | Un tema nou, aplicat a alguna cosa real | 4–8 h |
| Trimestral | Revisar on ets i ajustar el rumb | 1 h |
| Anual | Un salt gran (una tecnologia o especialització) | — |
La constància guanya a la intensitat, i no és un tòpic: una hora al dia durant un any són 365 hores i un hàbit; un cap de setmana de dotze hores cada dos mesos són 72 hores i cap hàbit.
Sobre la síndrome de l'impostor, que apareixerà: és pràcticament universal en aquesta professió, i té una causa estructural. Compares el teu interior —els teus dubtes, les teves cerques, el que no saps— amb l'exterior dels altres —les seves xerrades, els seus articles, les seves respostes segures—. Ningú no publica les seves tres hores buscant un punt i coma. L'antídot que funciona no és convèncer-se que es val molt, sinó portar registre del que s'ha fet: fa un any no sabies què era una promesa; avui has desplegat un producte amb cua de sincronització idempotent. Això és una dada, no una impressió.
- Per què les bases no caduquen
Val la pena tancar l'argument amb la dada del mateix curs, perquè és més convincent que qualsevol afirmació.
A 10-06 vas escriure la mateixa pantalla quatre vegades: JavaScript pur, React, Vue i Angular. I el resultat va ser que domini/regles.js era idèntic a les quatre. Les mateixes quaranta línies. Tot el que va canviar va ser la vista.
Això significa, de manera mesurada i no opinada:
| El que sobreviu a un canvi de framework | El que no |
|---|---|
| El llenguatge | La sintaxi concreta de les plantilles |
| El model de dades i les regles | El nom del hook o de la directiva |
| Saber estructurar en capes | L'estructura de carpetes de moda |
| Les proves de comportament | Les proves acoblades a la implementació |
| HTTP, memòria cau, seguretat | La llibreria de peticions de torn |
| Accessibilitat | — |
| Rendiment i com mesurar-lo | Els llindars exactes |
| El criteri per decidir | Les opinions d'aquest any |
I hi ha una segona demostració al teu propi projecte: el teu domini/ sense dependències del navegador es pot importar tal qual en un servidor Node i executar les mateixes quinze regles. No perquè el disseny sigui llest, sinó perquè vas respectar una frontera durant tot el mòdul.
La conclusió pràctica és alliberadora: cada hora invertida en fonaments s'amortitza durant tota la teva carrera; cada hora invertida en l'eina de moda s'amortitza durant el temps que duri la moda. No significa ignorar les eines —cal fer-les servir i cal dominar-ne una—, sinó saber on estàs invertint cada vegada.
- El full de ruta de sis mesos
Tres perfils segons la teva disponibilitat real. Tria el teu amb honestedat, no el que t'agradaria poder complir: un pla incomplert des de la tercera setmana s'abandona sencer.
| Perfil | Hores/setmana | Total 6 mesos | Situació típica |
|---|---|---|---|
| A · Intensiu | 20–25 h | ~550 h | Dedicació completa o gairebé |
| B · Sostingut | 10–12 h | ~280 h | Feina o estudis + tardes i caps de setmana |
| C · Lleuger | 4–6 h | ~130 h | Poc temps, però constant |
14.1 Perfil A · Intensiu (20–25 h/setmana)
| Mes | Focus principal | Lliurable |
|---|---|---|
| 1 | TypeScript: JSDoc → migració del teu projecte complet | El teu projecte en TS estricte, sense any |
| 2 | Framework triat: fonaments + reescriure el teu projecte | El teu projecte al framework, amb proves |
| 3 | Framework: ecosistema complet (encaminament, estat, formularis, peticions) | Projecte nou mitjà, desplegat |
| 4 | Node.js: servidor, base de dades, autenticació | Backend real del teu projecte |
| 5 | Full-stack: integrar, desplegar, monitorar | Producte complet en producció |
| 6 | Ocupabilitat: portafoli, currículum, entrevistes, algorismes bàsics | Portafoli i candidatures enviades |
14.2 Perfil B · Sostingut (10–12 h/setmana)
| Mes | Focus principal | Lliurable |
|---|---|---|
| 1 | TypeScript amb JSDoc sobre el teu domini | domini/ tipat i comprovat |
| 2 | TypeScript complet + Git avançat | Projecte migrat; historial net |
| 3 | Framework: fonaments, reescrivint el teu projecte | El teu projecte al framework |
| 4 | Framework: ecosistema + proves | Projecte petit nou, desplegat |
| 5 | Node.js: servidor + base de dades | API pròpia funcionant |
| 6 | Integració i portafoli | Producte full-stack + portafoli |
14.3 Perfil C · Lleuger (4–6 h/setmana)
| Mes | Focus principal | Lliurable |
|---|---|---|
| 1 | TypeScript amb // @ts-check i JSDoc |
Domini comprovat sense compilar |
| 2 | TypeScript: tipus de la capa de dades | Repositori i API tipats |
| 3 | Framework: fonaments | Una pantalla del teu projecte migrada |
| 4 | Framework: aplicació petita completa | Aplicació desplegada |
| 5 | Node.js: un servidor mínim amb el teu domini | API de 3 rutes funcionant |
| 6 | Consolidar i portafoli | Portafoli actualitzat amb 2 projectes |
gantt
title Full de ruta de 6 mesos — perfil B (sostingut, 10-12 h/setmana)
dateFormat YYYY-MM-DD
axisFormat %b
section TypeScript
JSDoc i @ts-check sobre el domini :ts1, 2026-12-01, 30d
Migracio completa + strict :ts2, after ts1, 30d
section Eines
Git avancat (rebase, bisect, reflog) :git, after ts1, 21d
section Framework
Fonaments reescrivint el projecte :fw1, after ts2, 30d
Ecosistema, proves i desplegament :fw2, after fw1, 30d
section Backend
Node, Express i base de dades :node, after fw2, 30d
section Tancament
Integracio full-stack i portafoli :fin, after node, 30d
Plataforma web (1 tema/mes, continu) :plat, 2026-12-01, 180d
Fixa't en l'última barra: «plataforma web» recorre els sis mesos sencers. És el camí continu de l'apartat 8, un tema al mes en paral·lel. No competeix amb la resta perquè és d'una altra naturalesa.
Com fer servir el pla:
- Tria el teu perfil amb honestedat. El B és el realista per a la majoria de la gent.
- Ajusta l'ordre al teu objectiu. Si busques feina aviat, avança el framework al mes 1.
- Revisa'l cada mes. Si un tema et costa el doble, ajusta el pla, no et castiguis.
- Un lliurable per mes, sense excepció. Sense res acabat, el mes no compta. És la mateixa disciplina de les fites de 11-01.
- Protegeix dues franges fixes a la setmana. La pèrdua de ritme és la causa número u d'abandonament, molt per davant de la dificultat.
- Carrera: portafoli, currículum i entrevistes
Començo per la part honesta, perquè hi ha massa material que no la diu: el mercat d'entrada és competitiu. Hi ha moltes més persones buscant una primera feina que llocs júnior, els processos són llargs, i rebràs silencis i rebutjos que no reflecteixen la teva vàlua. Això no és desànim: és informació perquè interpretis correctament el que passarà i no ho llegeixis com un veredicte sobre tu.
El que sí que pots controlar, i on la majoria de la gent no aprofita el seu marge:
15.1 El portafoli
| Regla | Detall |
|---|---|
| Dos o tres projectes, no deu | Un de gran i acabat —el teu— i un o dos de petits ben acabats |
| Acabats de debò | Desplegats, amb README, amb proves, defensables |
| Amb decisions documentades | Els ADR de 11-06 són un diferenciador enorme i gairebé ningú no els té |
| Amb demo accessible | Un enllaç que funcioni, amb dades d'exemple carregades |
| Sense clons de tutorial | Una altra llista de tasques de tutorial no diu res. La teva sí, perquè té regles, arquitectura i decisions pròpies |
15.2 El currículum tècnic
| Secció | Què posar-hi |
|---|---|
| Encapçalament | Nom, lloc objectiu, ciutat/remot, correu, GitHub, LinkedIn |
| Resum | 2–3 línies: què saps fer i què busques. Sense adjectius buits |
| Projectes | Abans que la formació si no tens experiència. Amb números i enllaços |
| Tecnologies | Agrupades i honestes: separa el que domines del que coneixes |
| Experiència | Encara que sigui d'un altre sector: hi ha competències transferibles reals |
| Formació | Al final si no és el més rellevant |
Els errors més freqüents:
- Llistar 30 tecnologies. Comunica superficialitat i t'exposa a preguntes que no pots respondre.
- Posar nivells amb barres o percentatges. «JavaScript 85 %» no significa res.
- Adjectius sense evidència: «apassionat», «proactiu», «resilient».
- No posar enllaços. El GitHub i la demo són el que de debò es mira.
- Més de dues pàgines sense experiència que ho justifiqui.
15.3 Les entrevistes
| Fase | Què avaluen | Com preparar-te |
|---|---|---|
| Filtre inicial | Encaix bàsic, comunicació, expectatives | Tingues la teva presentació de dos minuts preparada |
| Tècnica de coneixements | Fonaments: JavaScript, DOM, asincronia, HTTP | Repassa M3, M5 i M7. Sàpigues explicar el bucle d'esdeveniments |
| Exercici pràctic | Com escrius i com penses | Practica en veu alta; explicar mentre programes és una habilitat a part |
| Sobre el teu projecte | Criteri i profunditat | Ja ho tens preparat (11-06) |
| Cultural / equip | Com treballes amb altres | Exemples concrets de col·laboració i de conflicte resolt |
Els temes que més es pregunten a nivell júnior, i en els quals aquest curs t'ha preparat:
| Tema | Mòdul |
|---|---|
var, let, const, àmbit i hoisting |
03-04, 03-05 |
| Closures | 03-04 |
this i les seves regles |
04-02 |
| Prototips i herència | 05-01 |
Promeses, async/await i el bucle d'esdeveniments |
05-06, 05-07 |
| Igualtat, coerció i valors falsy | 01-07 |
map, filter, reduce |
04-04, 04-05 |
| Delegació d'esdeveniments i propagació | 06-04 |
| Peticions, errors, CORS | 07-02, 07-03 |
| Com provaries això | M8 |
Sobre els exercicis d'algorismes. Alguns processos els inclouen i d'altres no, i el seu pes varia moltíssim. Si a les ofertes que t'interessen hi apareixen, dedica un parell d'hores setmanals durant unes setmanes als fonaments: arrays, cadenes, mapes i conjunts, dos punters, i saber raonar sobre complexitat. No és el primer a què dedicar temps si no ho demanen, però tampoc no convé descobrir-ho el dia de l'entrevista.
I el consell que més canvia el resultat d'una entrevista tècnica: pensa en veu alta. Qui t'entrevista vol veure com raones, no només si hi arribes. Digues el que estàs considerant, les alternatives que descartes i per què. Un exercici a mitges amb un raonament excel·lent puntua millor que una solució correcta sortida del no-res — i si et bloqueges, dir «això no ho sé, però ho abordaria així» és una resposta perfectament vàlida.
- La primera feina i aprendre treballant
16.1 Com buscar-la
| Via | Eficàcia | Nota |
|---|---|---|
| Contactes i recomanacions | La més alta | Trobades locals, comunitats, antics companys |
| Portals de feina | Mitjana | Molt volum, molta competència |
| Candidatura directa a empreses | Mitjana-alta | Personalitzada, a empreses que t'interessin de debò |
| Reclutadors especialitzats | Mitjana | Útils si t'arriben; poc control |
| Pràctiques i beques | Alta | La porta d'entrada clàssica i perfectament vàlida |
Una recomanació concreta i contrastada: ves a trobades tècniques de la teva ciutat. No a repartir currículums —això funciona malament—, sinó a conèixer gent i parlar del que feu. Una proporció molt alta de les primeres feines arriba per algú que et coneix, no per un formulari.
I un calibratge important: les ofertes llisten un ideal, no un requisit. Si compleixes una part raonable del que demanen, presenta la candidatura. Descartar-te tu abans que et descartin és l'error més car i més comú.
16.2 Els primers mesos
| Mes | Què esperar | Què fer |
|---|---|---|
| 1 | Sensació de no entendre res | És normal i universal. Pregunta molt; pren notes |
| 2–3 | Primeres tasques petites | Acaba-les bé. La fiabilitat val més que la velocitat |
| 4–6 | Comences a moure't sol | Ofereix-te per al que ningú no vol: s'aprèn allà |
| 6–12 | Aportes de debò | Comença a proposar, no només a executar |
Cinc coses que acceleren molt l'aprenentatge a la feina:
- Pregunta aviat, amb context. «He provat A i B, esperava X, obtinc Y, per on tiro?» és una pregunta que no molesta ningú. Estar bloquejat tres dies en silenci, sí.
- Llegeix el codi del repositori encara que no et toqui. És la manera més ràpida d'entendre el sistema i les convencions.
- Demana revisions i demana-les exigents. «Em dius què faries diferent?» és la frase que més et farà créixer.
- Revisa el codi d'altres. Ensenya moltíssim, encara que al principi et sentis sense autoritat per fer-ho. Preguntar en una revisió ja és aportar.
- Escriu el que aprens. Un document propi de «coses d'aquest sistema». En sis mesos serà el teu actiu més valuós, i en dotze, el que faran servir els qui arribin després.
I un advertiment sobre les comparacions. Treballaràs amb gent que en sap molt més que tu. Això no és un senyal que no vals: és exactament la raó per la qual aquell és un bon lloc per ser-hi. Un entorn on ets la persona que més en sap és un entorn on no aprens.
Errors Habituals i Consells
Començar quatre camins alhora. TypeScript, React, Node i Docker en paral·lel produeix tres mesos de sensació d'avenç i zero profunditat en res. Un a la vegada, amb un lliurable per mes.
Saltar de framework cada dos mesos. El valor és a la profunditat, i la profunditat només arriba després del punt en què la novetat s'acaba i comencen els problemes difícils. Tria'n un i queda-t'hi.
Aprendre per acumulació en lloc de per ús. Veure vint hores de vídeo sense escriure codi produeix la sensació d'aprendre i molt poc aprenentatge real. La regla: per cada hora de consum, almenys una de construcció.
Esperar a «saber-ne prou» per buscar feina. Aquest moment no arriba mai perquè el llistó puja amb tu. Amb un projecte acabat i defensable ja tens més que molta gent que s'hi està presentant.
Confondre el soroll amb la professió. Les discussions sobre quin framework és millor són entreteniment. La feina real és entendre problemes, modelar-los, i lliurar alguna cosa que funciona i es manté.
Descartar-te abans que et descartin. Les ofertes llisten ideals. Si compleixes una part raonable, presenta't: la decisió no és teva.
Comparar-te amb perfils públics. Compares el teu interior amb l'exterior dels altres. Ningú no publica les seves tres hores buscant un punt i coma.
Abandonar per perdre el ritme dues setmanes. Perdre el ritme és normal. El que enfonsa un pla no és la pausa, sinó convertir la pausa en abandonament. Torna amb una sessió petita, sense recuperar res.
Consell · Escriu el que aprens, encara que no ho publiqui ningú. Explicar obliga a entendre de debò, i detecta els buits que la lectura amaga. Si a més ho publiques, és portafoli.
Consell · Acaba coses, encara que siguin petites. Acabar ensenya el que començar no ensenya mai: desplegament, documentació, casos límit i manteniment. I és la competència que més et diferencia.
Consell · Desa la teva corba de progrés. Un fitxer amb el que sabies fa sis mesos. És l'antídot més eficaç contra la síndrome de l'impostor, perquè és una dada i no una impressió.
Consell · Ensenya a algú. Explicar a qui comença consolida més que rellegir. I ara mateix pots: hi ha qui és on eres tu al Mòdul 1.
Consell · Tingues sempre un projecte propi en marxa. Encara que sigui petit i lent. És on proves sense conseqüències, on mantens la curiositat i on neix gairebé tot el que després fas servir a la feina.
Exercicis
Els últims exercicis del curs no són de codi: són de direcció. Dedica'ls temps real, perquè el seu resultat és el que faràs durant els propers sis mesos.
Exercici 1 — El balanç i el pla.
- Omple el teu inventari de competències: recorre la taula de l'apartat 1 i marca cada fila amb «ho domino», «ho he fet», «ho he vist». Sigues honest: la taula és per a tu.
- De la llista de l'apartat 2, tria les tres àrees no cobertes que més t'importen per al teu objectiu, i escriu per què cadascuna.
- Tria el teu perfil de dedicació (A, B o C) comptant les hores reals de què disposes aquesta setmana, no les que t'agradaria tenir.
- Escriu el teu full de ruta de sis mesos amb la plantilla de l'apartat 14, adaptada al teu objectiu: mes, focus i lliurable concret. Un lliurable per mes, sense excepció.
- Dibuixa el teu pla com a diagrama de Gantt en Mermaid, inclosa la barra contínua de plataforma web.
- Reserva les franges al teu calendari —dues fixes per setmana— i posa'ls una alarma de revisió mensual.
- Escriu el teu objectiu de sis mesos en una frase, de l'estil «d'aquí a sis mesos vull poder construir i desplegar una aplicació full-stack amb TypeScript i presentar-me a llocs júnior de front-end».
Exercici 2 — El primer pas de TypeScript, avui.
No deixis que el pla es quedi en paper: el primer pas es fa ara i costa una tarda.
- Afegeix
// @ts-checkal fitxer més important del teu domini. - Documenta amb JSDoc totes les seves funcions públiques: paràmetres, tipus de retorn, opcionals i
null. - Corregeix tot el que l'editor subratlli. Anota quants problemes reals hi va trobar — n'hi haurà algun que no esperaves.
- Crea
jsconfig.jsonambcheckJsistrictper a totsrc/, i anota quants errors apareixen. - Escriu l'equivalent del fitxer
tipus.tsde l'apartat 4.4 per al teu domini: unions de literals per als teus conjunts tancats,readonlyon correspongui, i elRecordque garanteix que la teva matriu de transicions cobreix tots els estats. - Documenta a
docs/decisions.mdquè t'ha aportat i què t'ha costat. És la informació amb la qual decidiràs si migres del tot.
Exercici 3 — La direcció i el portafoli.
- Tria el teu framework amb el procediment d'una hora de l'apartat 6.2: cinquanta ofertes reals del teu mercat, comptades. Anota els números i la conclusió.
- Tria el tema mensual de plataforma web per als propers tres mesos (accessibilitat, seguretat, CSS modern, rendiment…) i què faràs amb cadascun sobre el teu projecte.
- Actualitza el teu portafoli amb el de 11-06: repositori fixat, README del perfil, currículum amb números concrets i enllaços.
- Escriu la teva presentació de dos minuts: qui ets, què saps fer, què has construït i què busques. Assaja-la en veu alta.
- Identifica tres empreses on t'agradaria treballar i anota, per a cadascuna, què demanen que encara no tens. Això ajusta el teu full de ruta amb dades reals.
- Ensenya alguna cosa a algú: escriu una explicació d'un concepte que dominis —closures, el bucle d'esdeveniments, per què el domini no ha de conèixer el navegador— adreçada a qui és on eres tu al Mòdul 1. Publica-la o comparteix-la.
- Comença el projecte següent, encara que sigui petit. La millor manera de consolidar el que has après és fer-ho servir abans que es refredi.
Solucions
No hi ha solucions correctes per a aquests exercicis: són decisions teves. Aquests són els criteris amb què pots jutjar si el teu pla és bo.
Criteris d'un bon pla de sis mesos
| # | Criteri | Senyal que falla |
|---|---|---|
| 1 | Una direcció principal | Quatre tecnologies al mes 1 |
| 2 | Hores realistes | El perfil A amb 5 hores lliures a la setmana |
| 3 | Un lliurable concret per mes | «Aprendre TypeScript» en comptes de «projecte migrat a TS estricte» |
| 4 | Lliurables verificables | No es pot dir si està fet o no |
| 5 | Construeix sobre el que ja tens | Comença un projecte nou des de zero en comptes d'aprofitar el teu |
| 6 | Deixa marge | Sis mesos plens al 100 %, sense folgança |
| 7 | Apunta a un objectiu declarat | No saps per a què és el pla |
| 8 | Té revisió mensual | S'escriu una vegada i no es torna a mirar |
Rúbrica del pla (18 punts)
| Dimensió | 0 | 1 | 2 | 3 |
|---|---|---|---|---|
| Honestedat de l'inventari | Inflat o buit | Aproximat | Realista | Amb evidència per competència |
| Elecció de direcció | Sense decidir | Triada | Justificada | Amb dades del teu mercat |
| Realisme d'hores | Fantasia | Optimista | Realista | Mesurat amb la setmana real |
| Lliurables | Vagues | Concrets | Verificables | Cadascun utilitzable al portafoli |
| Continuïtat | Sense franges | Franges | Franges protegides | A més amb revisió mensual agendada |
| Connexió amb l'objectiu | Cap | Implícita | Explícita | Amb tres empreses i els seus buits identificats |
Llindar: 12/18. I una condició que no es compensa: l'exercici 2 ha d'estar fet, no planificat. Un pla sense un primer pas fet el mateix dia és una llista de desitjos.
L'autoavaluació final del curs:
| Pregunta | Sí / No |
|---|---|
| Tinc un producte propi acabat, desplegat i defensable? | |
| Sé explicar per què en vaig prendre les decisions principals? | |
| Sé què no cobreix aquest curs i quins d'aquests buits m'importen? | |
| Tinc una direcció principal triada per als propers sis mesos? | |
| He fet ja el primer pas, avui, no «la setmana que ve»? | |
| Tinc dues franges setmanals protegides al calendari? | |
| Sé on buscar quan no sàpiga alguna cosa, i distingir una font fiable? | |
| Entenc que el llistó puja amb mi i que això és progrés, no fracàs? |
Conclusió
Aquí s'acaba el curs, així que aquest tancament no prepara la lliçó següent: fa balanç i et torna el comandament.
Tens l'inventari real del que saps, competència a competència i mòdul a mòdul: muntar un entorn i llegir un error sense bloquejar-te; expressar regles amb condicionals i gestionar errors distingint l'esperat de l'excepcional; descompondre en funcions, fer servir closures i resoldre estructures recursives; modelar entitats i transformar col·leccions; dissenyar classes amb encapsulació real, organitzar en mòduls i dominar l'asincronia; construir interfícies sense framework amb esdeveniments, delegació i formularis accessibles; persistir, parlar amb una API, fer servir WebSockets i convertir un web en PWA; depurar amb mètode i provar en tres nivells; mesurar abans d'optimitzar i fixar un pressupost; conèixer quatre frameworks i, sobretot, triar amb criteri; i planificar, construir, sincronitzar, provar, desplegar i defensar un producte complet. Amb les competències transversals que cap temari no llista: convertir un problema en un model i unes regles, decidir i poder-ho defensar, mesurar abans d'opinar, depurar amb mètode, escriure codi mantenible i —la que més et diferencia— acabar coses.
I tens, amb la mateixa honestedat, el que aquest curs no cobreix: tipatge estàtic, backend, un framework de debò, CSS modern, bases de dades, algorismes, seguretat en profunditat, arquitectura a escala, DevOps, mòbil, i les coses que només s'aprenen treballant amb altres persones i amb codi que va escriure algú fa quatre anys. Conèixer els propis buits val tant com conèixer les pròpies capacitats, i no confondre «no ho domino encara» amb «no valc» és una habilitat professional en si mateixa.
Tens el mapa dels camins amb la regla que el governa: una direcció principal per als propers sis mesos, una de sola, perquè les altres hi continuaran sent. TypeScript com el més barat de començar —avui, amb // @ts-check i JSDoc sobre el teu propi domini, sense compilar res— i el que multiplica el valor de tota la resta, amb la migració gradual començant pel domini i amb aquelles quatre coses que s'aconsegueixen de franc: unions de literals que fan impossible escriure un estat inventat, readonly que expressa l'encapsulació al tipus, un Record que obliga a cobrir totes les transicions, i el teu contracte de repositori comprovat pel compilador. Node.js com el camí que tanca el sistema, amb la recompensa concreta d'importar el teu propi domini/ en un servidor i executar les mateixes quinze regles on l'usuari no se les pot saltar. Un framework en profunditat, amb la diferència clara entre les cent hores que donen nivell funcional i les cinc-centes que donen valor real, triat amb una hora de comptar ofertes del teu mercat en lloc de tendències globals, i començant per reescriure el teu propi projecte perquè el domini ja està fet. I els dos camins continus: eines —amb Git avançat com la millor inversió per hora de tota la taula— i la plataforma web, un tema al mes, que no caduca mai.
Saps com se segueix aprenent quan ja no hi ha curs: MDN abans que un cercador, les notes de versió com la manera més eficient d'estar al dia, la data de tot el que llegeixis, i la progressió de construir que té el seu punt òptim en una eina per a tu mateix, perquè saps què ha de fer, la fas servir de debò i la motivació no depèn de ningú. Saps llegir codi aliè començant per les proves, i contribuir començant per la documentació, amb la preparació emocional que els primers comentaris arribaran i no són personals.
Saps mantenir-te al dia sense esgotar-te, distingint el que canvia ràpid —llibreries, eines, opinions— del que no canvia —el llenguatge, el DOM, HTTP, l'accessibilitat, com es prova, com es mesura, com es decideix—, amb les cinc regles d'higiene informativa i un ritme sostenible on la constància guanya a la intensitat. I saps que la síndrome de l'impostor té una causa estructural —comparar el teu interior amb l'exterior dels altres— i un antídot que és una dada i no una frase d'ànim: portar registre del que has fet.
Tens l'argument de per què les bases no caduquen, i no com a opinió sinó com a mesura d'aquest mateix curs: domini/regles.js va ser idèntic en JavaScript pur, React, Vue i Angular. Les mateixes quaranta línies. Tot el que va canviar va ser la vista. Cada hora invertida en fonaments s'amortitza durant tota la teva carrera.
Tens un full de ruta de sis mesos en tres perfils de dedicació, amb un lliurable obligatori per mes i dues franges setmanals protegides, perquè la pèrdua de ritme enfonsa més plans que la dificultat. I tens la part de carrera amb la seva honestedat al davant: el mercat d'entrada és competitiu i els silencis no són un veredicte sobre tu; el que controles és un portafoli de dos o tres projectes acabats i defensables —amb ADR, que gairebé ningú no té—, un currículum amb números i enllaços en lloc d'adjectius i barres de percentatge, i unes entrevistes on pensar en veu alta canvia el resultat més que saber la resposta. I els primers mesos de feina, on no entendre res és universal, on preguntar amb context no molesta ningú, i on treballar amb gent que en sap més que tu no és una amenaça: és exactament la raó per la qual aquell és un bon lloc per ser-hi.
I ara el tancament de debò.
La primera línia de codi d'aquest curs va ser console.log('Hola, Taller Nómada');. Una funció, una cadena de text i un missatge en una consola. Aquell dia no sabies què era una variable, i el tauler de la Marta, l'Iván i la Lucía eren sis tasques i quaranta-vuit hores que ni tan sols cabien en un objecte perquè els objectes venien tres mòduls després. Des de llavors aquelles sis tasques han estat condicionals, bucles, funcions, arrays, classes, promeses, nodes del DOM, peticions a una API, proves, mil·lisegons mesurats i quatre versions de la mateixa pantalla. Han estat el fil que va sostenir cada concepte nou, i hi continuen sent, intactes: 48 hores, 45 obertes, una vençuda, esforç ponderat 124.
Però Nómada Tasques va deixar de ser el teu projecte fa sis lliçons. Al Mòdul 11 l'exemple guiat es va apartar i vas construir el teu: el teu producte, el teu model, les teves regles, les teves decisions, les teves errades i les teves proves de regressió. Taller Nómada es va quedar on havia de quedar-se, com a referència contra la qual comparar, i el que es desplega avui amb HTTPS porta el teu nom i no el seu.
Això és tot el que aquest curs et podia donar: un llenguatge, un mètode i un producte acabat que demostra que els saps fer servir. El que queda no ho pot escriure ningú més, perquè ja no hi ha una lliçó següent per enllaçar ni un mòdul que comenci demà. Hi ha un full de ruta que has escrit tu, un editor obert, i l'única pregunta que importa a partir d'aquí:
Què construiràs ara?
Curs de JavaScript: De Principiant a Avançat
Mòdul 1: Introducció a JavaScript
- Què és JavaScript?
- Configuració del teu Entorn de Desenvolupament
- El teu Primer Programa en JavaScript
- Sintaxi i Conceptes Bàsics de JavaScript
- Variables i Tipus de Dades
- Operadors Bàsics
- Conversió de Tipus i Comparacions
- El Projecte del Curs: Nómada Tasques
Mòdul 2: Estructures de Control
- Sentències Condicionals
- Bucles: for, while, do-while
- Sentències Switch
- Control del Flux: break, continue i Bucles Imbricats
- Gestió d'Errors amb try-catch
Mòdul 3: Funcions
- Definició i Crida de Funcions
- Expressions de Funció i Funcions Fletxa
- Paràmetres i Valors de Retorn
- Àmbit i Closures
- Hoisting i el Context d'Execució
- Funcions d'Ordre Superior
- Recursivitat
Mòdul 4: Objectes i Arrays
- Introducció als Objectes
- Mètodes d'Objecte i la Paraula Clau
this - Arrays: Conceptes Bàsics i Mètodes
- Iteració sobre Arrays
- Cercar, Ordenar i Agregar Dades: find, sort i reduce
- Desestructuració d'Arrays
- Desestructuració d'Objectes, Spread i Rest
- JSON i Còpies d'Objectes
Mòdul 5: Objectes i Funcions Avançades
- Prototips i Herència
- Classes i Programació Orientada a Objectes
- Encapsulació: Getters, Setters i Camps Privats
- Mòduls i Importació/Exportació
- JavaScript Asíncron: Callbacks
- Promeses i Async/Await
- El Bucle d'Esdeveniments i la Cua de Microtasques
- Iteradors i Generadors
Mòdul 6: El Model d'Objectes del Document (DOM)
- Introducció al DOM
- Selecció i Manipulació d'Elements del DOM
- Gestió d'Esdeveniments
- Propagació, Delegació i Esdeveniments Personalitzats
- Creació i Eliminació d'Elements del DOM
- Renderitzat de Llistes i Plantilles HTML
- Gestió i Validació de Formularis
Mòdul 7: APIs del Navegador i Temes Avançats
- Emmagatzematge Local i de Sessió
- Fetch API i AJAX
- Peticions Robustes: Errors, Timeouts i AbortController
- WebSockets
- Service Workers i Aplicacions Web Progressives (PWAs)
- APIs del Navegador Essencials
- Introducció a WebAssembly
Mòdul 8: Proves i Depuració
- Depuració de JavaScript
- Qualitat de Codi: ESLint, Prettier i Convencions
- Proves Unitàries amb Jest
- Dobles de Prova: Mocks, Stubs i Spies
- Proves d'Integració
- Proves d'Extrem a Extrem amb Cypress
Mòdul 9: Rendiment i Optimització
- Mesurar Abans d'Optimitzar: DevTools i Web Vitals
- Optimització del Rendiment de JavaScript
- Gestió de Memòria
- Manipulació Eficient del DOM
- Càrrega Diferida i Divisió de Codi
Mòdul 10: Frameworks i Llibreries de JavaScript
- Per Què Existeixen els Frameworks
- Introducció a React
- Gestió d'Estat amb Redux
- Conceptes Bàsics de Vue.js
- Conceptes Bàsics d'Angular
- Triar el Framework Adequat
