100 Days Of Code - ROUND 01

Go To Home

Projects completed

  1. R1D3 - FreeCodeCamp - Tic Tac Toe Game
  2. R1D5 - FreeCodeCamp - Simon Game
  3. R1D7 - Layout italian keyboard with tilde and backtick per Windows
  4. R1D16 - Udemy - Video Info
  5. R1D25 - Udemy - Tasky (Only the course’s code)
  6. R1D27 - Udemy - Convert (Only the course’s code)
  7. R1D47 - GitHub - VueJS - Random Quote Machine
  8. GitHub - VueJS - Vue-Calc (link to Electron site)
  9. GitHub - Local Server for Construct 3 (link to Scirra site)
  10. GitHub - Bubbly Background - Construct 3 Addon (Online Demo)

Certifications

R1D0: January 1, 2018

I’ve decided to join the #100DaysOfCode Challenge. I want to:

  1. finish the FreeCodeCamp’s Front End Development Certification
  2. do Udacity ES6 - JavaScript Improved
  3. do Udacity Object-Oriented JavaScript
  4. do Udacity JavaScript Promises
  5. do Udemy The Web Developer Bootcamp

Link(s)

  1. https://www.freecodecamp.org/
  2. ES6 - JavaScript Improved
  3. Object-Oriented JavaScript
  4. JavaScript Promises
  5. The Web Developer Bootcamp
  6. The Advanced Web Developer Bootcamp
  7. Javascript30
  8. Other interesting courses

R1D1: January 4, 2018 (1h)

First day I started a FreeCodeCamep’s project (Advanced Front End Development Project): Build a Tic Tac Toe Game. I made the html and css and started the JS. I decided not to worry about the goodlooking graphic; I want to focus on JavaScript, first.

Link to my progress: codepen

R1D2: January 5, 2018 (2.5h)

Second day I continued with the Tic Tac Toe Game. I made the main functions:

Link to my progress: codepen

R1D3: January 6, 2018 (1.5h)

Third day I finished the Tic Tac Toe Game. Hurray! :smiley::smiley::smiley:

The user stories:

  1. I can play a game of Tic Tac Toe with the computer.
  2. My game will reset as soon as it’s over so I can play again.
  3. I can choose whether I want to play as X or O.

The style is very simple and essential; I think It’s my cup of tea :tea:!

Link to my project:

R1D4: January 7, 2018 (2.5h)

4th day I start to work to a new FreeCodeCamp’s challenge: Build a Simon Game.

I’ve created the user interface and a basic shape for the game.

Link to my project:

R1D5: January 8, 2018 (3h)

5th day :smiley: I finished the Simon Game and I claimed my first FreeCodeCamp certification: View My Front End Development Certification

Link to my project:

R1D6: January 9, 2018 (2h)

6th day This was a productive day! I started the Udacity ES6 - JavaScript Improved course. I’m learning a lot of things:

I also created a new folder in my GitHub repository: it’s dedicated to this course (link). I discovered Markdown syntax: I love this!

Link:

R1D7: January 10, 2018 (1h)

7th day I started the 2nd lesson: the Functions. It’s interesting; I love Arrow Functions. But I have problems with “this”. I also worked on a layout for my italian keyboard on Windows. Now I can write backtick with AltGr + ‘

Link

R1D8: January 11, 2018 (2h)

8th day I’m testing GitKraken for Windows and Linux: I really need to know more about GitHub. Maybe one of my next courses will be related with this. Also, I had uninstalled Brackets (it’s going too slow after the last update) and installed Atom.

About Javascript: I finished the 2nd lesson: The functions. I repeated the this section; then I did Default Function Parameters and JavaScript Classes.

Link

R1D9: January 12, 2018 (2h)

9th day Hard day: the computer I use for my job is dying. Maybe I have to buy another one. I studied only two sections of Lesson 3 - Built-ins:

I think this lesson it’s diffucult. I didn’t understand [Symbol.iterator], tomorrow I’m going to revise it.

Link

R1D10: January 13, 2018 (2h)

10th day I love Maps, I don’t understand Promises, I think Proxies are very interesting and Generators are powerful. I need to make practice: ES6 is great but I have no experience. I added to my To Do List the Udacity course about JavaScript Promises.

Link

R1D11: January 14, 2018 (1h)

11th day I finished the Udacity ES6 - JavaScript Improved course: Hurray!

R1D12: January 16, 2018 (4h)

12th day Yesterday I was sick so I didn’t do anything. Today I didn’t go to work and I stayed at home. I studied a lot of things:

  1. Markdown
  2. Basic of GitHub
  3. Electron’s History

I started a new Udemy Course: Electron for Desktop Apps by Stephen Grider (@ste_grider) I opened a new Git to track my progress in the first project: electron-videoinfo.

R1D13: January 17, 2018 (1h)

13th dat Today I watched the first part of the course about Electron.

Link:

R1D14: January 18, 2018 (2h)

14th day Oggi ho finito la parte in HTML e JS dell’app VideoInfo. Domani dovrò sistemare la parte grafica. Penso di aver capito abbastanza bene il concetto base per fare comunicare MainWindow ed Electron App.

R1D15: January 19, 2018 (3h)

15th dayHo finito la parte grafica dell’app VideoInfo. Il codice HTML non è elegante ma per il momento può bastare. Ho poi provato a creare un eseguibile per Window ma dopo un’ora di tentativi non sono riuscito a fare nulla.

R1D16: January 20, 2018 (4h)

16th day Finito il progetto Video Info. Ho creato un file eseguibile (portable) per Windows (64bit) e un installer per Linux (deb a 64bit). Inoltre ho aggiornato il repository GitHub completando il file README aggiungendo un’immagine dell’app in esecuzione.

R1D17: January 21, 2018 (1h)

17th day Oggi solamente un’ora di studio del corso Object-Oriented JavaScript.

R1D18: January 22, 2018 (3h)

18th day Ho finito di vedere i video del corso Object-Oriented JavaScript. Da domani dovrò cominciare a lavorare sul progetto finale: creare un clone di Frogger (deve essere simile a questo video).

Documenti e cose da leggere per domani:

R1D19: January 23, 2018 (5h)

19th day Finito il progetto Frogger. Adesso è tardissimo, domani ci sarà da sistemare il README. Per il momento, evviva!

Link:

### R1D20: January 24, 2018 (2h)

20th day Cominciato a seguire il corso JavaScript Promises di Udacity. Interessante, ma ci sono un po’ di problemi nel fare gli esercizi: bower (che non ho capito cosa è) non installa i componenti corretti e non riesco a testare il codice. Sono andato avanti con il corso Udemy Electron for Desktop Apps. Il secondo progetto è una app To Do List: è un progetto “semplice” ma serve per capire l’utilizzo dei menù in Electron. Inoltre spiega anche come gestire diverse windows (finestre) all’interno della stessa applicazione.

Link:

R1D21: January 25, 2018 (2h)

21st day Oggi ho fatto pochino: sono andato avanti con i video del corso Udemy su Electron. Ma prima ho finito l’esercizio sull’app Todos. Manca tutta la parte grafica: per il momento mi sono concentrato sul capire i concetti generali.

Link:

R1D22: January 26, 2018 (1h)

22nd day Procedo con il corso Udemy su Electron. La parte di oggi riguarda come aggiungere l’icona sulla barra delle notifiche di Windows e osX. Peccato che ci siano un po’ di problemi con Linux/Ubuntu. Per il momento ho usato un workaround tramite electron-traywindow-positione. Che poi è stata una fortuna perché è un modulo npm aggiornato solamente un paio di giorni fa.

Link:

R1D23: January 27, 2018 (1h)

23rd day Ancora avanti con il corso Udemy su Electron. Sto scoprendo che Ubuntu presenta molti problemi con la gestione dell’icona sulla traybar. Peccato.

R1D24: January 28, 2018 (1h)

24th day Ho finito il terzo esercizio del corso. Ho scoperto, con mio sommo dispiacere, che Electron ha un po’ di problemi con Ubuntu. Anzi, scorrendo le domande del corso, ci sono più problemi con Linux in generale. Ci sono dei workaround ma è un peccato. Non penso che andròa modificare ulteriormente questo progetto: è costruito con React, e non conosco nulla di React. Invece, dopo aver fatto il quarto esercizio (quello sulla parte Combining Electron with React and Redux) voglio tornare sulla app electron-todos per sistemare la parte grafica e fare un po’ di esercizio.

Link:

R1D25: January 29, 2018 (1h)

25th day Oggi solo un’ora, prima di cominciare il mio vero lavoro. Ho testato electron_tasky su Windows 10 e ho scoperto che l’app non funzionava più. Ci sono problemi con l’intercettare il right click. Ho cambiato nuovamente il codice e adesso pare funzionare sia su Ubuntu 16.04 che su Windows 10.

R1D26: January 30, 2018 (2h)

26th day Ho cominciato l’ultima parte del corso. Per essere interessante, è interessante. Peccato che:

  1. non ho idea di come funzioni react e redux
  2. devo tornare sul corso di Udacity sulle promise: inizio a perdermi nelle spiegazioni. In ogni caso, ho creato il repository del progetto electron-convert

Link:

R1D27: January 31, 2018 (1h)

27th day Ho completato electron-convert e finito il corso Electron for Desktop Apps. Sono soddisfatto: adesso ho una infarinatura generale di come funziona Electron.

Link:

R1D28: February 1, 2018 (1h)

28th day Ho Cominciato un nuovo corso Udemy: VueJS 2 - The Complete Guide. Per il momento ho guardato la section 1 (in pratica l’introduzione) e fatto il primo esercizio. Momentaneamente ho creato una cartella su GitHub dove salvare gli esercizi fatti. Poi, quando comincerò con i progetti più grandi farò un repository specifico.

R1D29: February 2, 2018 (1h)

29th day Andato avanti con il corso su VueJS 2. Pare essere uno strumento utile. Anche se devo capire bene come sia possibile utilizzare dati più complessi rispetto a un oggetto contenuto nella dichiarazione new Vue(). Fatto il primo esercizio del corso (link).

R1D30: February 3, 2018 (2h)

30th day Ancora VueJS. Imparato come intercettare eventi del mouse e della tastiera. Inoltre visto l’utilizzo degli event modifiers. Fatto il secondo esercizio del corso (link).

R1D31:February 4, 2018(2h)

31st day Ancora VueJS: mi pare di andare lentissimo. Oggi ho visto:

Ho fatto il terzo esercizio del corso (link).

R1D32: February 5, 2018 (2h)

32nd day Oggi VueJS e la gestione del CSS. Ho cominciato il quarto esercizio del corso (link).

R1D33: February 6, 2018 (2h)

33rd day Finito l’esercizio 4 del corso su VueJS. Ancora abbastanza nebuloso l’utilizzo pratico delle tecniche che sto imparando. O, meglio, capisco come sia possibile modificare il DOM in maniera tutto sommato semplice tramite VueJS. Però non vedo come usare i data per applicazioni più complesse.

R1D34: February 7, 2018 (3h)

34th day Ho finito la prima versione dell’esercizio The Monster Slayer. Devo ammettere che, effettivamente, VueJS semplifica molto il lavoro. Questa versione è abbastanza acerba, ha del codice ripetuto e una gestione abbastanza dozzinale dei dati del player e del monster. Ma, dai, è la mia prima vera app con VueJS: evviva!

Link alla mia soluzione

R1D35: February 8, 2018 (2h)

35th day Oggi ho seguito la correzione dell’esercizio The Monster Slayer. Non è molto diversa dalla mia, solo un po’ più elegante e sintetica. Sono comunque soddisfatto del lavoro fatto.

R1D36: February 9, 2018 (1h)

36th day Ho cominciato a vedere i video della lezione successiva. Non ho scritto nemmeno una riga di codice ma ho imparato (spero) un po’ di cose in più sul funzionamento di VueJS.

R1D37: February 10, 2018 (2h)

37th day Fatto la sezione 7 del corso di VueJS. Inizio a capire l’utilizzo dei components: mi piace la possibilità di ridurre tutto ai minimi termini per avere tanti pacchettini di codice da montare assieme. Non vedo l’ora di cominciare la sezione 8, communicating between components.

R1D38: February 11, 2018 (1h)

38th day Cominciata la sezione dedicata a come passare i dati da un compontente all’altro. Tutto inizia ad avere un senso, ora. Per lo meno comincio a capire come può essere strutturata un’applicazione nel mondo reale.

R1D39: February 13, 2018 (1h)

39th day Ieri ho perso il giorno: dopo una giornata infinita al lavoro non sono riusciuto ad avere le forze per continuare lo studio. E, temo, sarà lo stesso anche per domenica. Comunque, ho finito la parte teorica e adesso posso cominciare ad affrontare il prossimo esercizio. Che comincerò domani.

R1D40: February 14, 2018 (2h)

40th day Oggi ho finito l’esercizio della sezione 8: una semplice app per controllare lo stato di una serie di server. Con controllare intendo semplicemente verificare se un server funziona bene o ha dei problemi ed eventualmente resettarlo. Al di là dell’app in sé, penso di aver cominciato a capire il funzionamento complessivo. Certo, per progetti semplici quello che ho imparato fino ad adesso è sufficiente. Ma per quello che ho in testa mi servono ancora altre conoscenze. E molta, molta più esperienza.

R1D41: February 15, 2018 (1h)

41st day Finito la sezione 9, e costruita una semplice app con componenti dinamici e slot. Gli slot in VueJS sono molto interessanti: permettono di creare dei widget riutilizzabili in più parti di un’applicazione. Ho poi impostato il progetto successivo, Wonderful Quotes.

R1D42: February 16, 2018 (4h)

42nd day Oggi ho fatto molto. Ho deciso di partire sostanzialmente da zero con il progretto Wonderful Quotes, e di non utilizzare bootstrap. Un po’ perché, in onestà, non mi sento a mio agio con questo strumento. E, sopratutto, perché da quando ho scoperto css grid ho deciso di usarlo il più possibile. Comunque, ho costruito la struttura della pagina, ho creato i componenti e sistemato le funzionni necessarie per aggiungere ed eliminare le citazioni. Mancano ancora da sistemare un paio di cose:

  1. rendere un po’ più bellina l’animazione della progress barra
  2. eventualmente impostare un effetto di dissolvenza per il messaggio di errore
  3. capire se ha senso usare le props in alcuni componenti piuttosto che importarte direttamente i dati L’ultimo punto è più una domanda, e devo studiare ancora un pochetto perché evidentemnte mi sfugge qual è il metodo corretto per usare le varie opzioni di VueJS.

R1D43: February 17, 2018 (2h)

43rd day Finito l’app del progetto Wonderful Quotes: sono soddisfatto perché funziona come deve. Dei tre punti di ieri, li ho sistemati tutti e tre. Inoltre ho aggiunto un messaggio di errore se si prova a inserire una citazione vuota.

Ho notato una cosa, mentre lavoravo sull’effetto di dissolvenza: VueJS ha un suo sistema per gestire l’inserimento (e l’eliminazione) di nuovi elementi in maniera elegante. Per il momento però mi sono limitato a un po’ di CSS.

Link alla mia soluzione

R1D44: February 19, 2018 (1h)

44th day Ho modificato leggermente l’app Wonderful Quotes: adesso quando il mouse passa sopra una delle citazioni la citazione stessa diventa rossiccia. E il mouse ha la forma del puntantore e non della freccetta classica. Ho anche finito la correzione dell’esercizio, mi pare di aver fatto quasi tutto correttamente.

R1D45: February 20, 2018 (2h)

45th day Ho fatto (e finito) l’esercizio Form Sign Up. Si tratta di una pagina web per registrarsi a un servizio. Lo scopo era imparare a maneggiare i controlli delle form e creare degli custom input. E a proposito di custom input, ho perso un sacco di tempo per far funzionare il componente FullName.vue: scrivevo

props: { fullName: {type: Object} }
props: ['fullName']
props: { fullName: Object}

e in ogni tentativo ho avuto messaggi di errore. Perché? Perché quando va usato in questa forma:

props: {
    value: { type: Object }
  }
props: ['value']
props: { value: Object }

Cioè, da quello che ho capito, quando si crea un custom input si passa il valore tramite la keyword value. Link alla mia soluzione

R1D46: February 21, 2018 (2h)

46th day Seguito la correzione dell’esercizio Form Sign Up e fatto la sezione 12 sulle Directives.

R1D47: February 23, 2018 (2h)

47th day Questi giorni sono complicati, ieri non sono riuscito a fare nulla: stavo troppo male. Per fortuna le regole dei #100DaysOfCode permettono di saltare un giorno (ma non di saltare più giorni consecutivi). Oggi ho completato la sezione 13, Filters e Mixins. Non ho capito bene il perché di questi nomi ma non mi preoccupa troppo. Un filter serve per modificare come appare a schermo un dato, senza modificare il dato stesso. Un Mixin, invece, serve per scrivere del codice riutilizzabile in più compomenti diversi. Penso siano entrambi degli strumenti utili.

R1D48: February 24, 2018 (2h)

48th day Finalmente sono riuscito a lavorare un pochino senza troppi impicci. Non avevo voglia di studiare e di affrontare un altro capitolo del corso, quindi ho deciso di provare a mettere in pratica quanto imparato finora. Ho rifatto uno dei progetti di FreeCodeCamp, Random Quote Machine. È un’app molto semplice: mostra una citazione (più o meno famosa) e cliccando sul pulsante New Quote ne mostra una nuova scelta casualmente da un archivio. È la seconda volta che rifaccio questo esercizio, ma è la prima votla che sono davvero soddisfatto del risultato ottenuto. VueJS è una soluzione facile, veloce e sopratutto comoda.

Link alla Random Quote Machine

R1D49: February 26, 2018 (1h)

49th day Oggi non ho propria voglia di studiare cose complicate. Le transiction e le animazioni in VueJS sono più difficili da comprendere rispetto a quello che immaginavo. Per non perdere completamente il giorno ho deciso di guardare un video corso di Udacity: [HTML5 Canvas] (https://eu.udacity.com/course/html5-canvas–ud292). L’argomento mi interessa, sopratutto nella prospettiva di riprendere in mano Construct. Comunque, ho seguito e fatto tutti gli esercizi della prima sezione. Mi manca da fare il progetto di metà corso.

R1D50: February 27, 2018 (1h)

50th day Finito il corso Udacity su HTML5 Canvas. Beh, corso è una parola grossa: è più una infarinatura sui concetti base. Però è stato interessante. Adesso però è il momento di tornare su VueJS.

R1D51: February 28, 2018 (1h)

51st day Ho continuato il corso di VueJS. Ho deciso di ricominciare la sezione 14, e ripreso in mano le transiction e le animazioni.

R1D52: March 1, 2018 (2h)

52nd day Finalmente oggi mi sono deciso a riprendere in mano Construct 3. E, come già due volte, mi sono arenato su come configurare la developer mode per testare i miei (futuri) plugin. Anche perché, scemo io, non ho mai tenuto traccia scritta del procedimento corretto. E, come per non cambiare, ho deciso di usare nodejs invece di scaricare e installare un qualche programma apposito. Il risultato? Beh, in questo momento funziona ma non ho idea del perché :D. Comunque, mi riporto qui il procedimento per ricordarlo la prossima volta.

  1. per prima cosa mi creo una configurazione base con il comando npm init
  2. installo localmente http-server con il comando npm install http-server
  3. poi creo i certificati per abilitare l’ssl:
    • mkdir conf
    • cd conf
    • wget https://raw.githubusercontent.com/anders94/https-authorized-clients/master/keys/ca.cnf
    • openssl req -new -x509 -days 9999 -config ca.cnf -keyout ca-key.pem -out ca-cert.pem
    • openssl genrsa -out key.pem 4096
    • wget https://raw.githubusercontent.com/anders94/https-authorized-clients/master/keys/server.cnf
    • openssl req -new -config server.cnf -key key.pem -out csr.pem
    • openssl x509 -req -extfile server.cnf -days 999 -passin “pass:password” -in csr.pem -CA ca-cert.pem -CAkey ca-key.pem -CAcreateserial -out cert.pem
  4. estraggo i file cert.pem e key.pem: li metto nella stessa cartella di package.json
  5. dalla cartella di root del progetto lancio http-server con questo comando: ./node_modules/.bin/http-server -o -a localhost -p 65432 -C cert.pem -K key.pem --ssl --cors
    • il numero dopo -p è la porta da aprire, penso si possa tranquillamente usare anche 8000
    • –ssl e –cors sono fondamentali
    • i file pem penso si possano riutilizzare anche per altri progetti del generale
    • -o serve per aprire il browser subito dopo aver creato il server

Dopo aver avviato il server locale è possibile usarlo per passare il file addon.json a Construct 3. O, per lo meno adesso funziona.

Link al file package.json, cert.pem, key.pem

R1D53: March 2, 2018 (1h)

53rd day Finalmente ho finito le animaioni e le transiction in VueJS. Posso dire che ho odiato con tutto me stesso questo modulo? Non tanto perché non ne vedo l’utilità pratica, quanto perché ho fatto una gran fatica ad affrontare questo aspetto. Ma ho finito, e questo mi fa contento.

R1D54: March 3, 2018 (2h)

54th day Oggi sono andato avanti col il corso di VueJS e ho affrontato la section 15: vue-resource. Caspita, mi si è aperto un mondo davanti! Certo, non ho in progetto di usare firebase. Ma l’unione tra VueJS, vue-resource e quest’ultimo apre delle prospettive interessanti. Molto interessanti: il mio cervellino si è messo a frullare e a macinare idee su idee. Peccato non avere il tempo per esplorarle a fondo.

R1D55: March 4, 2018 (1h)

55th day Arrivato alla spiegazione di vue-router. Adesso le cose iniziano davvero a essere interessanti. Il programma che ho in testa sta Finalmente prendendo forma. O, per meglio dire, inizio ad avere gli strumenti teorici per poter cominciare a lavorarci seriamente. Mi manca ancora l’esperienza, la pratica e lo scontrarmi con i problemi minori. Però sono ottimista. Davvero.

R1D56: March 6, 2018 (3h)

56th day Iniziato a creare una calcolatrice con VueJS ed Electron.

Link

R1D57: March 8, 2018 (3h)

57th day Impostato la maschera della calcolatrice. (ps, domani devo trovare il tempo per aggiornare il log)

Link

R1D58: March 10, 2018 (3h)

58th day Oggi ho passato ore, troppe ore, a tentare di impostare la parte grafica del display della calcolatrice. Il risultato? Pessimo, davvero pessimo. Devo ricordare che prima di pensare alla grafica sarebbe meglio concentrarsi sul funzionamento base: se l’avessi fatto a quest’ora avrei probabilmente impostato il grosso delle routine.

Link

R1D59: March 12, 2018 (2h)

59th day (D5 of #VueCalc, a #Calculator build with #VueJS and #Electron) Finito di lavorare sulle ruoutine base di calcolo. Adesso funzionano le 4 operazioni di base e il simbolo uguale. Ho anche sistemato il display per mostrare sullo schermo i risultati delle operazioni precedenti.

R1D60: March 14, 2018 (3h)

60th day Ho rifatto completamente le routine di calcolo della mia VueCalc. Ho deciso di utilizzare più a fondo decimal.js per gestire le operazioni. Penso che mi semplifichi la gestione del segno (negativo e positivo), dei decimali e delle altre operazioni. Certo, è tutto da vedere se è davvero così. Per il momento, però sono riuscito a far funzionare il tasto per cambiare il segno di un numero: hurra!

Link

– END –