 Seguim aquí al track 3, ara es presentarà l'Adriacobo. És desenvolupador grep, va fundar Grafíric fa 10 anys i encara segueixen, el costaran fer bastant bé. També li agrada Mang als còmics i al retrogaming, i, com si fos poques coses, també té un podcast amb el Fernando García Rebolledo, es diu El Arroyo, i cito textualment, segons l'Aya de Vinc, si t'agrada el desenvolupament web, l'humor i la vida rural, tu passaràs bé escoltant aquest podcast. Aquesta presentació presenta, té bona pinta. Moltes gràcies. Això no en fa falta, no? Bona nit, bon dia a tothom. Moltes gràcies a l'organització, a la lleis que m'ha presentat superbé. També vull agrair el Madmulenberg i els patrocinadors, perquè solten la guita per muntar aquest xalau, que estan tan bé. Molt d'aquí hauré vingut perquè el títol és una mica clickbait, que parlarem de cuina. Però si de veritat voleu veure alguna cosa així, alguna cosa de cuina i WordPress, ha de ser tal José Ramón Bernabéu, que té un tuit que cuina superbé i, tant en quant, parla de WordPress. Si apunteu José Ramón Bernabéu, que mola molt. I va, comencem. Quanta gent d'aquí s'ha de fer un au farrat, un huevo frito. Tot el món, tot el món. I qui ho diria que ho fa bé. Però quan dic bé, allò, el rubell, rossadet, la puntilla i el redor, la part blanca que no tingui moc, però que estigui jugosa. I després agafes un tros de pa, allò, mulles, i surtot, un pas... Hi ha gana, tot se n'ha tot xequat i anem tirant. Doncs ara penseu que heu anat a un restaurant i us han servit un au farrat. Però un au farrat és tot del Mcdonalds, del rubell tot collat, que no val un dur allò. I, en canvi, el xef es pensa que fa els millors ous del planeta. Però això és una persona que està sobrevalorant la seva capacitat. I no li portis la contrària. O com diria el Peper Rodríguez, el de Masterchef, el del Boi o... Li diria, eres com el professor Cirvela, que no sabes ni leer i muntes una escuela. Doncs per veure aquest petaquet de que no saps talgo, però et creus que ho fas superbé, tinc uns amics, el Justinian David, uns amics icòlegs americans, que van fer aquesta gràfica, que molt potser hi haurà nom, i us sona una mica, però no el coneixeu. A la gent que no s'ha fet un oferat o que potser és un inconscient de la vida, i que en realitat es creu que el fa com va estar la línia blava. I, en canvi, si anem pujant, a mi de caca, vas coneixent, vas aprenent, tenim la gent del Sayer de Can Roca, qui dubta que el Sayer de Can Roca faran un superou. I, en canvi, pensen que ho fan pitjor. O sigui que la gent que té molt coneixement infravalora els seus resultats, i, en canvi, que no té ni puta idea, es venen amunt. Llavors, l'ignorància, normalment, genera molta més confiança que el coneixement. O podríem dir que la gent li costa reconèixer la seva incompetència. A mi sempre m'ha fet molta gràfica, però no és el que més es coneix. Tenim uns marqueteros, van agafar la gràfica, i van fer una altra, que segur que us sona més. Que és aquesta, que vol dir, tu no saps res, comences a aprendre i el creu que ets al amo. I llavors, seguis aprenent, baixes. Els que sou programadores, els programadors que esteu aquí, no digueu que no ho sentiu identificats amb això. Quan comences una nova tecnologia, dius, això jo ho domino, fas 4 o 5 coses i dius, guà! I abans és superràpid, ho sé. I a sort comencen a sortir bugs, comencen a sortir errors, i te'n vas aquí a la merda. I dius, això no ho superaré mai de la vida. Llavors, em mira, que vas estudiant, vas estudiant, vas estudiant, i et vas trobant coses, ara hi has vins a dalt. La veritat és que la línia surt massa recta, perquè sabem que hauria de ser una cosa més de, oi, lo sé todo, oi, estoy abajo del todo, oi, va, oi, me lo como. Llavors, jo, en aquesta charla, us puc ajudar als castells, aquí, per al palmit, amb quines eines puc arribar a dalt de tot, perquè, al final, entrant d'unes eines, per poder treballar bé. Com anem de temps, Fernando? Sí, o sigui, sigo con la mía, no? Vale, doncs, vamos a por la cocina. Siempre que vuelves a casa, me pillas en la cocina, he invadurnado de ahí, con las manos en la masa, que quina cuina, quina cuina us agrada més, en quina cuina podeu treballar. Es veu clarament quina ens agrada més. I segurament, veient això relacionat amb codi, us estava anant al cap, ja, un codi d'aquest tipus i un altre codi d'aquest tipus. I quina és la diferència? Doncs que el codi brut et trobes fitxers de milions de línies. A vegades et trobes dos classes declarades al mateix fitxer. Llavors també et trobes comentaris, de comentaris podríem fer-ne una ponència a part només, però de no sé per què, però això funciona. Molt bé, genial. També ens podem trobar una cosa que és maldita, perquè per mig matí hi ha això, la intentació. Et trobes allò de sota una cosa amb dos espais, una cosa amb quatre taules, de sota l'altre, està al principi de la línia. Et trobes dos espais, dius això, o sigui, visualment és que et sanguen els ulls, i no perquè sigui un codi difícil, sinó que són ifs i guais. És perquè el codi està molt malament fet i costa molt de llegir. Llavors a mi em fa molta gràcia aquell codi, que us haureu trobat algun cop, que surt un if, una condició, buit, ells, i tota la lògica. Dius això no, això no té cap vídeo, o com diria l'Alberto Chicote, alucino pepillillos. Continuem, perquè el codi bo, a veure on estem, perquè el codi bo, què t'hi faré? Doncs podem veure que el codi bo té una documentació que no és excessiva, però que està inline i que és suficient. També veureu que les funcions i les variables tenen bons noms, noms descriptius, noms que en el mateix nom de la funció, tu veus una funció que diu, està frito, i tothom sap què farà aquella funció. Dic-hi sí o si no està frito. En canvi, si li posem un nombre de frase de frito, a secas, d'entrada jo aquella funció no sé què fa. I, a més, els fitxers estan ben estructurats. Un PHP que crida un HTML, que crida un CSS, que crida un JavaScript, no hi ha el fitxer de 3.000 línies, que té scripts inline, CSS inline, té allà un template posat al mig. Veig que la gent no em fa gaire mal cap, o sigui que no em sento sols. Però ja veuràs... Tornarà a la cuina, ¿vale? Papas con arroz bonito, con tomate, cochinillo caldereta, migas con chocolate. Vull dir, tu t'acabes de gastar, mes de sent pavos en un xuletón de hueig allego. El xuletón, perdoneu els vagants i tal, però un xuletón de què és gran. Comences a fer casa, comences a fer-lo i després te'ls serveixes al plat que està al xuletón gris i sec. Vinga, la pasta, prenda pel sac. Per això, en realitat, és com el codi. Nosaltres ens han contractat per fer un bon codi. No podem entregar el pargates. Hem d'entregar, pues, fernando el xuletón, ese que está doradito por encima, por abajo, que lo habres por en medio tal. O sea, lo tienes que sacar 30 minutos antes de la... Bueno, seguimos. La gràcia d'això està i que no... A ver si lo cortan ni no lo graven. No compreis cosas de fin foris, que hay mucha mierda de ésta. Bueno, que se viene lo bueno. Anem a veure el codi, fins aquí, ara ens posem tècnics, les hem de fer conyes. Les bones pràctiques ja els estan d'acodi. En realitat, fer servir un estàndard de codi està inclòs a les bones pràctiques. Però com que Word presteu el seu codi, m'agrada treure-ho per dedicar-hi una secció només. Però en realitat, seria tot bones pràctiques. Tenim aquests principis, el quiz, que diu que he pitxinpla estúpid. M'entingueu senzill. Què vol dir? Funcions que només fan una cosa. Amb un únic propòsit. Així sabem, si hi ha un buc o si passa alguna cosa, a l'error on t'està? En aquella funció que fa una cosa. Les classes que siguin encarregades d'aportar una cosa només. Perquè si no, és un jaleó. Penseu que Word pres, encara que la gent no s'ho cregui, és un framework. Ja tenim connexions a base dades. Ja tenim com cridar un trànsit. Tenim una API, tenim moltes coses. Tenim la servir, i el nostre codi ha de ser fàcil, entendible. Que sí, que si estàs inventant una cosa superxunga, tindràs una funció que fa una cosa superxunga. Però tu ja ho tindràs declarat dintre. No serà un fitxer de mil línies. Llavors, principi de menors sorpresa. Vol dir que el codi s'ha de comportar com esperes que es comporti, que no passin coses estranyes. Un exemple molt clar és treballant amb JavaScript. JavaScript ha de fer una suma, una cosa tan sencilla com una suma. Però de sobte li entra una variable, que és un string i una altra que és un integer. Allò com es comportarà? Ningú sap, perquè a vegades, 3 més 4, tothom diria amb 7, JavaScript diu que és 34, perquè és un string més un integer. Però si ho poses al revés, et donarà set. Per això, la última versió de la 7.4, la vull ja ho porta, tu pots declarar a les entrades el tipus que és. Llavors, si jo ha de ser un integer, que t'entri un integer sempre, i si no, la primera línia de la funció és un. If esto no es un integer, lo convierto un integer. Jo crec que és el més senzill. I també, per evitar comportaments indesitjats, limitar l'anidament de ifs. El típico archivo que té if, if, if, if, if, if, if, que has de fer a scroll lateral per arribar a veure què fa. Això no té cap sentit. I, a més, això tampoc sabem com es comportarà, perquè si, if, però esta no, és un else, i ell és un testar. A veure, scroll, ja trobes allà claudators, que dius, a veure, on estàs? I comença allò si no està ben indentat, si que ja és un jaleó. Noms clars, el que ha deia abans. Noms clars. A mi m'agrada molt fer servir, fer servir, si una cosa opté, doncs, get, barra, baja, el que vaja a obtener. Si és un set, set, i el que vaja a obtener. O sigui, imprimiré algo, print, i el que vaja a imprimir. És tan senzill com això. També, si haig de tornar un tru o un fold, la funció a mi m'agrada que sigui una pregunta. L'exemple que deia, està frito, ja està, tornaré tru o fold, no hi ha res més. Fixeu-vos com és això de noms clars, que és un set, que té una funció, que diu, potser una mica exagerat. Vinga, va, pel que no sabem anglès, diria, haig de deshabilitar els esdeveniments al final de pantalla completa quan entro al moda picture-in-pictures des de la pantalla completa? Això és el nom de la funció, per els que n'hablen a català. Tengo que deshabilitar el evento al final de pantalla completa quan entro al moda picture-in-pictures des de la pantalla completa. És clar que farà això, que deshabilitarà l'event al final de pantalla completa quan entro al moda picture-in-pictures. Noms clars, noms clars. Les coses més difícils de programació es posa noms clars i fa un reinici de caches. T'ho dames o nifs iguals. No repateixis. Si una cosa l'has programada un cop i després trobes que estàs fent-lo mateix a qualsevol altra banda és top. Et xaparàs una mica i dius, esto pueden conseguir que siga una funció i la crido a dos bandes perquè no s'ha passat a vosaltres, a Wordpress, que dius que haig de tocar una cosa en la home que se muestra i haig de tocar una cosa a la pàgina de categoria que se muestra, i és el mateix. Com? Això és susceptible a fer-ne una funció i crido les dues coses des de la mateixa. Si esteu fent dues coses a dos bandes error. Continuem. Coses de bones pràctiques. Comentaris que falles en context. Ja veurem que re de comentaris d'això funciona. Hola, passo por aquí. Hola, cómo vamos. Qué guai que soy. La funció i el fitxès ja veurem que tenen la pròpia cabecera i les funcions també tenen la pròpia capçalera on s'explica en una línia que fa, però això ja pel codi standards. Els elements que entren i també els elements que retornarà aquella funció. Em refereixo més als comentaris aquests en línia. Recordeu-vos aquest elif estenirado. Infinito. I el infinito. Que té a sobre de cada if al comentari de no, esto es la variable por si se coincide esta razón. Perquè trobas si ta igual a 1 fes això pero si ta igual a 1 pero tepe igual a 3 fas allò. A que no me enterré. Type de alimentación. Type de alimentación. Igual. Función. I ja la funció és vegano tindrem declarat que una constante 1 significa que és vegano i a la desopta declararem que l'altra variable a un nom clar és una altra cosa. Com canvia simplement. Canvien dos noms de variables i dos funcions. De sobte el codi és... Oye, pues los estoy entendiendo sin... Sense fer gaire... Peripècies. Fixa's petits. Jo he posat 400 línies però si és un fitxer de 600 tampoc passa res. Però clar, fitxers de més de mil línies és que en recordeu-vos que quan programeu passats 10 dies aquell codi no us en recordareu de res. Si després ha passat un mes heu de tornar a tocar el codi és com si l'hagués fet una altra persona. Llavors ja ho faré vos. Un favor al vostre jo futur i treballar-ho veu. Una exempla molt clara de fitxer... de Asako el funtion és pèixer per al tema. Eh, eh... Qui no ha trobat un snippet moló a l'esta coverflow copió enganxo aquí, venga tiro facturo després entro a l'ajuda wp també mira aquest codi... al xaggpt li dius, escolta xaggpt fes-me un joc per no sé què el funtions comença a creure mira que fàcil és tant més el tema, fas una carpeta Includes i el funtions fas Includes Includes i aquest fitxer ja està, d'asopta has baixat un montón de línies a una altra fitxer i aquell fitxer, per exemple, si són coses, si són hooks o axions que fan servir coses al checkout li posem checkout pxp quin problema ja d'asopta tenim un fitxer amb quatre inclusions i que els quatre inclusions van a quatre fitxers que són de menys de 400 línies i que sobretot dius t'estic tenint un problema en el checkout voy al fitxero que se llama checkout pxp que és fàcil, no vaig a buscar mig de totes les funcions continuem, no espera, perdona si, organització fitxers i carpetes el que deia, a mi m'agrada posar una carpeta que se llama Includes perquè és molt fàcil que hauran l'error de no, voy a hacer una carpeta que se llama SRC vaig a crear una altra carpeta que es diu Bean una altra carpeta que es diu Library una altra que es diu Inc i dius quin us, o sigui, quina diferència hi ha entre un SRC un Inc, un Bean i un Lip no estem parlant d'un projecte de gana ja estem parlant de quatre modificacions quins entit tenen cap no us en recordareu per què li heu posat Bean i per què unes coses estan en Bean i altres estan en Includes perquè ningú sap llavors això és molt més fàcil a mi m'agrada molt la estructura que ho faré al WordPress Plagging Boiler Plate www.pv.me que ja et dona unes classes et dona un públic un admin i et dona una estructura per poder créixer saps, per dir, quan passen coses no puc anar creixent per per temes tenim tots que coneixem l'Andere Score l'únic que potser està una mica anticuat tenim l'Andere Strap si anem al Full Site Edit i tenia un que es diu Frost que això són starter films que pots fer servir la seva estructura perquè, clar, començar tu a fer un tema i vinga, va, vamos a crear Indexpatch EP ara haig de crear el Single és feina que ja està feta agafem una base i treballem sobre la base i, si no, us agafeu un genetit pres, un astre o aquest i feu golfeig i tireu milles us preocupeu de programar el que heu de programar i per últim, i no menys important, la inventació la inventació és molt, molt, molt, molt important per allò que deia el cifre que tenen que no veus, jo tinc una estenció al Visual Studio Code que et pintar les claus de colors però és que ni amb aquestes saps, perquè torna a rapatir quan portes vuitifs concret-catanats torna una altra copa al vermell i dius, però aquest vermell és aquell d'aquí ja 10 minuts, ja sóc el que donen 10 minuts doncs parlarem de les pinxes de cocina papas con arroz bonito con tomate que en torno a tapar la de cuina jo aquest els dius a les pinxes de cocina que són els que ens ajudaran a fer-ho tot tenim el... espera, si no, a puntu allí els còdins estàndards toquen aquests temes PHP, HP, ML, JS i CSS PHP és potser el més conegut el code és diferent en aquesta URL està tot, però si us fixeu si ho teniu configurat quan esteu editant això és Visual Studio Code, però si feu servir Sublime o feu servir qualsevol altra també us puc sortir així si us fixeu allà ja em dius escolta, has de fer la condició en joda que això que vol dir que tu no preguntes, esta variable es uno si no, uno es igual a esta variable perquè avites que potser et deixes un igual i l'has liado o si fas servir la llibreria CURL ja també et dius ojo, que estàs fent CURL i que això pot haver-hi fallos de seguretat nosaltres tenim creada WebPremotePost que ahir hi ha filtres i que ja ho tenim també això ho diré sempre escapar tots els ecos i fer sanitització de tots els inputs la clave perquè no hi hagi forat de seguretat si feu això, esteu i inclús el dels nomfes quan fas una crida de paràgex fas un formulari hauria generat un nomfes o no això no és una ponència d'explicar-vos com es fa això sinó que hi ha una eina d'explicar-vos com es fa s'ha de configurar-te per consola el PHPCS després quan tens el PHPCS li dius que utilitzi les llibreries de WordPress li declares que utilitzi el WordPress Core i el WordPress V està tot explicat aquí que no us aneu que este ha dit quatre coses i ja està i després instal·lar el complement de PHPCS al vostre aire perquè així us surti, així bonic perquè si no ho podreu que s'acuti per consola però qui em va consola a consultar-los errores i després el codi va a arreglar-los millor ho fem tot en un També com a punafegit m'agrada que el codi Sniffer el que es pot fer aquí, el que es pot fer és dir-li, per exemple que la variable de traducció el text domain és Workup barra baja BCN i llavors us fixeu quan generem qualsevol string que li posem això doncs ens diuen, escolta que aquí t'has equivocat i has posat BC Barcelona ja ens diuen posem el Workup en Barcelona i així tindràs totes les traduccions ben posades el tema de CSS i JavaScript el que dic el codi estándar et deixarà posar les indentacions et donarà unes pautes però no et dirà que has concatenado ocho if seguidos això ja entra en vostra cabeza o que he declarat una variable t'hi ha igual a no sé què allò és bones pràctiques cada feina bones pràctiques es fan practicant de de Js i CSS si us fixeu tots aquests són els fitxers que jo tinc a l'arrel d'un plugin són una barbaritat però clar, cadascun fa una cosa tenim el estil de lint i el lint que el que fan és dir-li utilitza les línies de WordPress per fer-me aquest projecte o el PHPCS que utilitza les línies de WordPress per pqp i així es compleix jo a veure mira la pantalla i li dono el but si us fixeu el que has dit el estil només té l'estil plugins WordPress & Lint plugins recommenten with formatting i amb això que aconseguim que el Java escript el que hem vist que ha passat al pqp també en sortir la flatxeta d'ojo pot ser una cosa o que al estil dels styles et digui el que a més a l'arrel també tinc un altre fitxer que és el editor config perquè quan treballen més gent algú farà servir sublime una altra farà servir visual studio i d'aquesta manera li estàs dient treballes amb algú que treballis els PHP, Js, CSS porten tu has de fer la secció de 4 fetes amb tabuladors i ja està, i és així de fàcil no trobaràs fitxers el que diem directament tu estàs programant i la indentació està fent sola em... sé que aquest moment us he donat molta... molta caña però clar això era una ponència de que us invito us convido Tinc un català justet, doncs us convido a que, per Déu, un matí han configurat tot això i, simplement, per treballar amb aquestes eines haureu millorat el vostre nivell de programació. Per un matí han configurat tot això. Si això fos un taller, m'hagués volat aportar el ordinador, però jo deixo la porta oberta de que, si algú vol fer-se un taller, o potser, si no es fa algun cop jo ho faré, si no buscàveu el prestívi que hi ha gent explicant com es fa això. I, a més, si us heu quedat amb ganes de més, com diria la meva àvia, o segur m'ho heu frit. Beneficis de fer servidàcia... Ah, sí, aquí, el Jijapaket, les presentacions us les compartirà a l'organització. Però aquí he deixat... He tirat els fitxers. No són reda d'altre món, són els que he trobat, els he deixat allà perquè l'agafeu com a base, del peixer PCS, amb aquella línia que heu vist, tal. Us convido a que hi hagi una documentació de cada uno de los casos per acabar allò està. Segurament hi ha milions de casos durs. Jo ho faig servir superplano i que em digui 4 avisos. Però es pot fer molt millor. Amb això, què beneficis tenim? El codi té un informat, o sigui, tot el codi, totes les fitxes que hem tocat de la nostra plàgina, tenen una mateixa estructura, tenen una mateixa consistència, tindrem menys errors perquè, simplement per escriure bé, ho tindrem més clar, programarem més ràpid, clar, ja. Pensa que la primera vegada estarà solucionant molts errors que et diuen. A la qual ho soluciones? 5, 6, 10 cops, ja no els tornes a fer. Llavors, el codi aquest és de fàcil manteniment, és més segur, dius més tranquil i el que més importa. Pots cobrar més, saps? Perquè el teu nivell de programació, sense servir aquestes eines, haurà millorat molt. Sempre m'agrada recordar una frase que es va dir en un fil de Google al 1991, que és... programa sempre com si la persona que anés a mantenir el teu codi fos un psicòtic violent que sabies on vol. O sigui, heu de programar bé pel vostre futur i, si no, com diria Carlos Arguignano, hay que programar rico y rico y con fundamento. Moltes gràcies. Com ho vam de temps, Fernando? Un minuto? No me lo creo. Tan difícil era que no hi hagi preguntes. Ah, vale, sí. Sí. Està mal fet, però alguna alternativa? O si necessites fer ívs sanidats? Que no sigui a mi? Pots fer servir els ívs, però potser a la que aportes. Dos o tres ívs et fas una funció que encapsuli la resta de ívs. Tens d'allò, és més localitzable, perquè només tens tres ívs si es comples aquella funció. Qui diu tres és un criteri personal, però si tens tres ívs és molt més fàcil. No hi ha d'estar ni d'atx. Per exemple, ívs error 1, ívs error 2, ívs error 3, ívs error 4, me muestras esto, pero ívs error... llavors tens ívs error 3, el else, amostras una otra cosa, i això s'ha de fer com? ívs error 1, muestrame esto. ívs error 2, muestrame esto otro, ívs error 3. O sigui, salió una manera d'aquells quatre ívs que estan a ni d'atx i que fa un codi súper lleig. Dius, mira, 4 ívs que han tengat sin ple vista, és que això va d'entendre les coses sin ple vista. No pides permís o para los errores, estoy perdón. Mira, allà hi ha una pregunta. Espera't al micro, que si no no queda bien en el vídeo. ¿Qué es posible la integración de Wordpress a Angular? A Angular. Sí, al final, Angular és una llibraria que tu cridaries a la llibreria Angular. ¿Saps?, faries en queuescript la llibreria Angular Lator, faries una deep idea de lo que tengo que hacer con Angular i després en un fichet.js diries, en la deep Angular, lo que tengo que hacer em carregas tota la aplicació Angular. I ara és clar, si quieres ir más allá, el Angular ja s'ha de picar contra els endpoints per agafar els continguts de Wordpress, però crec que això es... Escapa un poco de esto, però sí que es podria. D'acord, gràcies. Ah, tu. No sigueu tímids, eh. Amb tots els projectes, depenent de la vida del projecte, cal tenir aquestes bones pràctiques, és un projecte així... Quita aquesta pregunta. Un pajarito. Si us fixàveu el fichet, que estan tots los slints, jo ho tinc així també, perquè treballo amb altres tecnologies, treballo també amb PrestaShop, treballo amb... un poco lo que me cae, llavors, no puc configurar-me la variable global, del pal tots els projectes que et tocaré són Wordpress. Sí que et podries configurar del pal que la variable global sea. Comporta't sempre com Wordpress i aquests fillets els tindries i els projectes que no són Wordpress. Però, en principi, sí que és aconsellable perquè aquests codis faràs comit el GIT i si jo, per exemple, treballo amb tu, doncs et donaré tota aquesta informació, i llavors tu, quan obres el projecte, si tens ben configurat el codi Snifer, directament et funcionarà com en funcionarà a mi. Però sí. Otra cosa és que quan agafis el nodeStart, et crea la carpeta, aquesta nodeModules, tan mona, talli los 25 gigas, tallibrarias. Sí? Sí, sí, ha quedat clar. Qualsevol cosa estaré a la... en una sala que m'han dit que vull estar i per si us fa broda. Bargonya, preguntant-ho aquí, venim i xerrem una estona i veiem i si no ens coneixem i ja està. Doncs res, que moltes gràcies per m'heu escoltat. Gràcies.