{"tag":"avi","articles":{"blog\/technology\/redesigning-a-website-avi":{"key":"blog\/technology\/redesigning-a-website-avi","type":"article","published":true,"meta":{"createdAt":"2020-04-10T19:33:59+02:00","publishedAt":"2020-04-10T19:33:59+02:00","group":"redesign","links":[{"icon":"globe-europe","colour":"primary","url":"https:\/\/avi.avris.it","displayUrl":null},{"icon":"brands gitlab","colour":"secondary","url":"https:\/\/gitlab.com\/Avris\/Avi","displayUrl":null}],"category":"blog","subcategory":"technology","slug":"redesigning-a-website-avi"},"content":{"en":{"slug":"redesigning-a-website-avi","title":"Redesigning a website: Avi","intro":"\u003Cfigure\u003E\n                \u003Cnoscript\u003E\n                    \u003Cimg src=\u0022https:\/\/avris.it\/image\/avi-comparison_small.png\u0022 alt=\u0022\u0022 class=\u0022border-bottom\u0022 width=\u0022480\u0022 height=\u0022403.61904761905\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAeCAYAAABE4bxTAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAF+ElEQVRYhbWXy48cVxXGf\/dVVd093Z6ezKPHYw\/jJNhjj+PEsRWwMxEKCFYIBSWLwIIFiCURfwQrlrCBDQKiyAobXlFYBITA4BBDHE8snPBMzMSKHz3TM+6Z7urqqntZVPdtT+ZhGw+f1OqS6tx7T33nO9+pEkmSOOccUkruFc45AJ59\/is0m2sYY2i1WzgHQgicc6Rpis2yu95TO+cQQnD+\/HmMMTz22HG0Vj4gSRJWV1awzoFzaKNJuylSKarVqk+qHcdYa1FKAQLnLEJIlJI460AIwIGDzFqSpLt1Qv2Lw4cPo7XGZimJTQFQSqO1Yqhc9guiKPLXWe\/JR0aqABitEVIA+eHW5sz3kxYCnANrLUmSbJmQSJLEAbTX1nHOMjRUpsf54L8HafSGxWmaehaNMcRxjDEBYRhsU5A7w5esEIbgQChJmmXE7VZPB6CUxBiD6MXCQD\/5+lx\/aZaRZXHvXn5fKYUxpsdQvnbx2lVe\/cNrzD00y\/zxTw7YEQLdD8I6XJpBIUQIEAiscxip0Nr0tt8McRuDpVKJoHf4TrGLt5a5uHqdlUXFU4+f2vCAg5K1214T9JiwvSCtNcYYrwchhP8BdLspQWBwzvVEvTWszfdbaq9x4dr7TO8Z5dBILU9ESpQUiE6n44QQxHFMlmVIIUAKPCXO4chlSq+VlVIEQXBba2dEUchO9pFllub6em\/PPmUgpcRogzYBRjFIKE3TPKk0RWntD+vDOYfW2h8oZa4r5xytuEM3SUjTlCiKKBaL27J0J\/iSOedyhqTcoIsdF\/fi1lsxURjgkmyD33g2BL5rRaB7dG+546DLlFI71n8rWGsHLFqHW+sgymF+KNBsNr0uwzDM9+8mBMF2tuAGXVav1ymVSpRKpY0hzuVGlib8+Nff44HKGF88\/aVNLCEFohgg1EBDQRAgLCBAK7XJxz4KIcTAqSuVMlJIkqRD\/6GDIMA5h3OOThrzD3eZ6+1hnnHP+24DUEoglUQMheSGkUP\/D1ryJUuShHK5sjlroNvtotB8\/uRzVMwwQggW6x+yf3Qy7zqpsFlGo9HAWkutVrvn8vvz+qJOkoRCobBlkLUWYIPgrzVuMlrOZ1i3m6KUJI5jnAgQLvFdqZTybEop83lpLVLKLZP2JTt7+S\/caq+hZS7uTjcffk8cfJSPTUxtWlirjvlZBnhLSJIWUiqkFGRZ5jXYF7eUkiiKkFKSpqlP3DPU96G1uEWapZsOHiqUCPTW46DfZb87e27g8vcJPbiQCJQ3xEqlckc\/6pfypTM\/YWm5gTEayIetdQ5Bzoi1lrjTAbfdRBzAa+i7535BfX2VRnuNzwYzvPjyGZIk4Wtf\/jrf+fZZqtUiT3\/mGG\/86QxxHBNFET986UdArqFicWv93Stk39iWKxFTDx\/i6kiBbpYx\/+STnDhxgrjt+GDBMP3AIRofKFauLPPCN16g8f4SwIbxsisJ9csyceAhupNjHDx2klqtRitNMcUi46MTfGLuNHK1Rq26n6MzR3jxWz\/g6MwRgLseM3cLr6HH\/3aTG\/UbzABjD5d4cGIBKRXDI3Oog79hWQiCqScwS2X2DGuCbSzifuFLViwVeWTuGFNTU2T2KtPTYwyVl2g2b1Aw+wnlFH+92ODKuUXmT85z5Y\/\/ATa+Oe7GzzO0d2qSTrfDRHEcI95Dhx8yNrGH1nKZhddXCSPD6U\/tZbY8y60LTWYrh\/8vDPnh+stfvcK7\/3wXgK8+\/QX+\/PPchR99rsqnv\/kmAKeO7mVhr+Wt+luMfm4U2H0N+ZK9dulnzD91ipff+D4rly5TaXbovHmJG\/\/6O8P7asweeYS3l\/7Nqwuvs2\/u47xy8Ryw+13mGaocEPz+2k+ZOB4xqjS3Llxk\/OZNhgtF3tEN6iJget9+wpkav118h8KBSWDA0G4x5Y1xuX2duNsCYFKN011aBkCNj1KX+VdmSYesr7dJbYaWionyMLC7xuhnWX\/y9r8qpZRw27s+gBSCzFqiIATwwzNNs11LSPdnV38uATu8YpK\/+9wW+9EPx\/vFfwEsBAWgUvaJSgAAAABJRU5ErkJggg==\u0022 data-src=\u0022https:\/\/avris.it\/image\/avi-comparison_small.png\u0022 alt=\u0022\u0022 class=\u0022border-bottom\u0022 width=\u0022480\u0022 height=\u0022403.61904761905\u0022\u003E\u003C\/span\u003E\n                \n            \u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EYet another one of my projects, \u003Ca href=\u0022\/projects\/avi-simple-placeholder-avatars\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-cogs\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E Avi \u2022 Simple placeholder avatars\u003C\/a\u003E,\ngrew too outdated to support it. I had to rewrite it from scratch.\u003C\/p\u003E\n\u003Cp\u003EI took the opportunity to redesign it as well.\u003C\/p\u003E\u003Csvg xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022 style=\u0022display: none;\u0022\u003E\u003C\/svg\u003E","content":"\u003Cfigure\u003E\n                \u003Cnoscript\u003E\n                    \u003Cimg src=\u0022https:\/\/avris.it\/image\/avi-comparison_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022807.2380952381\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAeCAYAAABE4bxTAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAF+ElEQVRYhbWXy48cVxXGf\/dVVd093Z6ezKPHYw\/jJNhjj+PEsRWwMxEKCFYIBSWLwIIFiCURfwQrlrCBDQKiyAobXlFYBITA4BBDHE8snPBMzMSKHz3TM+6Z7urqqntZVPdtT+ZhGw+f1OqS6tx7T33nO9+pEkmSOOccUkruFc45AJ59\/is0m2sYY2i1WzgHQgicc6Rpis2yu95TO+cQQnD+\/HmMMTz22HG0Vj4gSRJWV1awzoFzaKNJuylSKarVqk+qHcdYa1FKAQLnLEJIlJI460AIwIGDzFqSpLt1Qv2Lw4cPo7XGZimJTQFQSqO1Yqhc9guiKPLXWe\/JR0aqABitEVIA+eHW5sz3kxYCnANrLUmSbJmQSJLEAbTX1nHOMjRUpsf54L8HafSGxWmaehaNMcRxjDEBYRhsU5A7w5esEIbgQChJmmXE7VZPB6CUxBiD6MXCQD\/5+lx\/aZaRZXHvXn5fKYUxpsdQvnbx2lVe\/cNrzD00y\/zxTw7YEQLdD8I6XJpBIUQIEAiscxip0Nr0tt8McRuDpVKJoHf4TrGLt5a5uHqdlUXFU4+f2vCAg5K1214T9JiwvSCtNcYYrwchhP8BdLspQWBwzvVEvTWszfdbaq9x4dr7TO8Z5dBILU9ESpQUiE6n44QQxHFMlmVIIUAKPCXO4chlSq+VlVIEQXBba2dEUchO9pFllub6em\/PPmUgpcRogzYBRjFIKE3TPKk0RWntD+vDOYfW2h8oZa4r5xytuEM3SUjTlCiKKBaL27J0J\/iSOedyhqTcoIsdF\/fi1lsxURjgkmyD33g2BL5rRaB7dG+546DLlFI71n8rWGsHLFqHW+sgymF+KNBsNr0uwzDM9+8mBMF2tuAGXVav1ymVSpRKpY0hzuVGlib8+Nff44HKGF88\/aVNLCEFohgg1EBDQRAgLCBAK7XJxz4KIcTAqSuVMlJIkqRD\/6GDIMA5h3OOThrzD3eZ6+1hnnHP+24DUEoglUQMheSGkUP\/D1ryJUuShHK5sjlroNvtotB8\/uRzVMwwQggW6x+yf3Qy7zqpsFlGo9HAWkutVrvn8vvz+qJOkoRCobBlkLUWYIPgrzVuMlrOZ1i3m6KUJI5jnAgQLvFdqZTybEop83lpLVLKLZP2JTt7+S\/caq+hZS7uTjcffk8cfJSPTUxtWlirjvlZBnhLSJIWUiqkFGRZ5jXYF7eUkiiKkFKSpqlP3DPU96G1uEWapZsOHiqUCPTW46DfZb87e27g8vcJPbiQCJQ3xEqlckc\/6pfypTM\/YWm5gTEayIetdQ5Bzoi1lrjTAbfdRBzAa+i7535BfX2VRnuNzwYzvPjyGZIk4Wtf\/jrf+fZZqtUiT3\/mGG\/86QxxHBNFET986UdArqFicWv93Stk39iWKxFTDx\/i6kiBbpYx\/+STnDhxgrjt+GDBMP3AIRofKFauLPPCN16g8f4SwIbxsisJ9csyceAhupNjHDx2klqtRitNMcUi46MTfGLuNHK1Rq26n6MzR3jxWz\/g6MwRgLseM3cLr6HH\/3aTG\/UbzABjD5d4cGIBKRXDI3Oog79hWQiCqScwS2X2DGuCbSzifuFLViwVeWTuGFNTU2T2KtPTYwyVl2g2b1Aw+wnlFH+92ODKuUXmT85z5Y\/\/ATa+Oe7GzzO0d2qSTrfDRHEcI95Dhx8yNrGH1nKZhddXCSPD6U\/tZbY8y60LTWYrh\/8vDPnh+stfvcK7\/3wXgK8+\/QX+\/PPchR99rsqnv\/kmAKeO7mVhr+Wt+luMfm4U2H0N+ZK9dulnzD91ipff+D4rly5TaXbovHmJG\/\/6O8P7asweeYS3l\/7Nqwuvs2\/u47xy8Ryw+13mGaocEPz+2k+ZOB4xqjS3Llxk\/OZNhgtF3tEN6iJget9+wpkav118h8KBSWDA0G4x5Y1xuX2duNsCYFKN011aBkCNj1KX+VdmSYesr7dJbYaWionyMLC7xuhnWX\/y9r8qpZRw27s+gBSCzFqiIATwwzNNs11LSPdnV38uATu8YpK\/+9wW+9EPx\/vFfwEsBAWgUvaJSgAAAABJRU5ErkJggg==\u0022 data-src=\u0022https:\/\/avris.it\/image\/avi-comparison_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022807.2380952381\u0022\u003E\u003C\/span\u003E\n                \n            \u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EYet another one of my projects, \u003Ca href=\u0022\/projects\/avi-simple-placeholder-avatars\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-cogs\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E Avi \u2022 Simple placeholder avatars\u003C\/a\u003E,\ngrew too outdated to support it. I had to rewrite it from scratch.\u003C\/p\u003E\n\u003Cp\u003EI took the opportunity to redesign it as well.\u003C\/p\u003E\n\u003Cp\u003EIt\u0027s quite a simple project, so it only took me a couple of hours. Here\u0027s what I did:\u003C\/p\u003E\n\u003Cul\u003E\n\u003Cli\u003Ereplaced my abandoned framework \u003Ca href=\u0022\/projects\/micrus-v4\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-cogs\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E Micrus v4 \u2022 Beauty of simplicity\u003C\/a\u003E with \u003Ca href=\u0022https:\/\/symfony.com\/\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-link\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E Symfony 5\u003C\/a\u003E,\u003C\/li\u003E\n\u003Cli\u003Ereplaced \u003Ca href=\u0022https:\/\/gitlab.com\/Avris\/Micrus-Assetic\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-link\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E custom Assetic setup\u003C\/a\u003E\nwith \u003Ca href=\u0022https:\/\/symfony.com\/doc\/current\/frontend\/encore\/installation.html\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-link\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E Webpack Encore\u003C\/a\u003E,\u003C\/li\u003E\n\u003Cli\u003Eupdated \u003Ca href=\u0022https:\/\/getbootstrap.com\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-link\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E Bootstrap\u003C\/a\u003E from 3.0 to 4.4,\u003C\/li\u003E\n\u003Cli\u003Eadded more contrast to the design, while keeping it simple,\u003C\/li\u003E\n\u003Cli\u003Eremoved the ugly logo,\u003C\/li\u003E\n\u003Cli\u003Ereplaced the font that I used to overuse, \u003Ca href=\u0022https:\/\/design.ubuntu.com\/font\/\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-link\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E Ubuntu\u003C\/a\u003E,\nwith the beautiful \u003Ca href=\u0022https:\/\/fonts.google.com\/specimen\/Baloo+Thambi+2\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-link\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E Baloo Thambi 2\u003C\/a\u003E\nand \u003Ca href=\u0022https:\/\/www.jetbrains.com\/lp\/mono\/\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-link\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E JetBrains Mono\u003C\/a\u003E,\u003C\/li\u003E\n\u003Cli\u003Emoved the generation of links from backend to frontend \u2013\u00a0now it gives you an immediate feedback\nto changes in the form, without having to reload the website,\u003C\/li\u003E\n\u003Cli\u003Eremoved the \u201cLatest generated avatars\u201d section \u2013 I never liked it, but I needed some showcase\nof what this project does\u2026 with the immediate feedback in the \u201cTry it!\u201d section, it\u0027s not needed anymore,\u003C\/li\u003E\n\u003Cli\u003Eincluded some more \u003Ca href=\u0022\/blog\/reducing-website-size-by-a-half-by-optimising-bootstrap-and-fontawesome\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-computer-speaker\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E optimisations\u003C\/a\u003E.\u003C\/li\u003E\n\u003C\/ul\u003E\n\u003Ch3\u003EBefore:\u003C\/h3\u003E\n\u003Cfigure\u003E\n                \u003Cnoscript\u003E\n                    \u003Cimg src=\u0022https:\/\/avris.it\/image\/avi-old_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u00221695.2\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAkCAYAAACJ8xqgAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAFCklEQVRIia2W229UVRjFf3vvc84MnTkzhU5LOy3QYQqUQAKUIAoGFNFETEgw+mTiizFi4pN\/hNEXH4gxMSaGmKiJBpWgCeqDYPVBEeQqlGulF2m1tMN0hjlzLtuH6TntOAVF\/B73\/vaab+219pojHMfRAEII7qe01gAY4YIQgv7+fjb29WGnUg0HyqUSgQ7QGnzfxzAMgiBAAFYshpSyHnB4eJhSqYTnezhOBbRGCIkQAtOyKJfLuJ4HaKRUEWAIFA0WUgYIggDDMFBK3TNdz\/NqE4Z353sebrmCNk2wTNAahIBg5vekBB2AEKiY1QAY4kSUDakQUmHEYwhD4bou5XIZKSU6CBBSYlkWSkqk1typZi9Aa3TVJXDdOZuCwPeRCAwhUTPgd6toQl+A22ThaZ9gehoAZRqIGSUDoRFSoaSILHJXwMD3qVartQmEACUQ7qy\/tNZUKg5SCISU0XoymaxT2gg3pFKYpokQoR7zG11rjZQSKWuWCoKgrjdSOWysVqu1DcNAiBq9+SgGQYDWGqVUdBZAVKvVqFtrPa9Z\/6nqJowoz9C4V1PPHQTmUHYch9u3b2PbNrFYrOFQeOC2U+b6+DUMZZLPrmyYsi4cEokEpmlGh+eW7\/sAnB0+yb7Dr1EoT\/HZq0cb+iLKge\/jem5Dg2ma0TVorbFsi+Z1C8nQGokVigd\/EwW4oyDVanUmADRNTYloffTmOLdKRVZ25uoBPc9DCIFlWfMC3smXnu\/jBz5KyHrK47ducmnkGkopDGXMNNciKd1ks6FnzbyAhlIoKRvjS0mFZVoRbcHsvfwbK4U4UcCGT+m\/VJ0Pw8VCqcjQ+O8IKTGEJKYlgQYlJYlEArRJaboCwMJFSaanp6Jn2tbWRjwer6d8YnyQN3\/4nA3tOa4Vxukbs9j\/0Qek7BRrenupjq3i4IFjrF6bZfeeBzh44HXsdIqTx3\/hnf3vsnvP7voJLdvmqS1P8M2NAdoXLWeRX2HvCy9iJ5NcGRxkaiJLe3wVjz+8gaRKkom38NIrL\/P1wcPE1ezLkmGamLbNmWaDnX3bSOVytGQy3Jia5PLIEO2dWZrNTrZv3sqFfknCyJC12\/nwjfcpDhZYIGNRKkWUcxXBM0MeMMbG+AIy+TSWrKne3pbhtwUOA+evA7DywQ6M5h3c\/PMmANkVSxrf8nRhElku4zgV\/vBc\/PQlpqZ+QkqNUznNJx8vJWnHOH9uCNcPOP7Fl2zYup5vDx2lt3c1+VX5GmDoNdtOkevupimeYGJqAskw6XQfvu9R9SYwRZYdj6zn+qUjGKKFXCJHT1sParPCNuzZT5FwVNu2EWbtHhYvbgM\/y2TxEKaRxjLyLOtawf63LyJlF4tbu8j2rsO56GAXU2QWtjRSPnX2FG+9tw+Azo5Onl79ED9+6gDj9GzO0bn9Css6TgDQui7NkZEzjIyOQitsiveRZ3m9yjcKQ3T0tNC2PM33l79iemCAFs9nxZKlFI79zPnJIbZt3smWTY8yWBznuwuneWzXk1wpTjA6OdGosmkLvHSBZDyFXRRklMnkrwOIWyWyHe20LO2mlLAoOiVSiRbsXCcnRq8yZrpYqUQj5XzXCs5NtgLw7LLnWOJsIlGs\/eEn167B6VnF1eIYC+LNrMvkCXYJJooF9nY\/T35Jd2TsunC4n2oIh7lp43kerusihEAatejyfA\/LsHB9FykkgQ6ImTHkTPyHgOL\/\/iT+C3VfUNvDPRWOAAAAAElFTkSuQmCC\u0022 data-src=\u0022https:\/\/avris.it\/image\/avi-old_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u00221695.2\u0022\u003E\u003C\/span\u003E\n                \n            \u003C\/figure\u003E\u003C\/p\u003E\n\u003Ch3\u003EAfter:\u003C\/h3\u003E\n\u003Cfigure\u003E\n                \u003Cnoscript\u003E\n                    \u003Cimg src=\u0022https:\/\/avris.it\/image\/avi-new_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022632\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAXCAYAAABj7u2bAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACzElEQVRIib2Wu3IjVRCGvz6XmfHu4hvrMhkpkSNT1FJFsC9BxhtQvAAxAQHPCMHmrHGNR3NuTXBGkrXWSLLA+1epdGZa6v77fuT23XtlBt1JizGWh\/4BUEAmydz5v8OpzPLBWsvZ6SnOWUTM6r2qIsCwWJBzRkSQidqSYEzxOEJoVSUioKAoTAZiTAzDgDEGQRAjaCnVpBjevH6FKogIqmX6rrQ+3v1DKfPOzhJ6993tUZ68FKTscCPGyGKxIKXMxcX5ZyHkVswehXuJUgoPDwPGGj7e3eG9B11XSts0eO+3lvWfH\/4ipMjl6QVXl283ZCL116r65Lw3QilnTrru2Z7+8MuPfPnFOd9+c8OvP\/188P\/cLqG1FrZEbhuWni5xdXPD12+\/4s3F1cFkYE8NpZQopdA0zV5FOZfaoRM+3P9NLIWztuOye700hzEGa45MmaqScsa7nYGkqNL3A2MYgToCVMGYddS67gTF0rUeb+d1SQhxllCIAWtsTd1ngsulzAr7fmAYBkC5vr7+\/6zu2ECyGMN8ynJBhwhG6gdAp0rJkyPWAIqoVIWd389n2QBbCLmZ92vjY0S8Q175yTiEcaQf+2m\/Kd55mrahlAJjoWvbvaQAJh82zg42h9qnA06cnSK0Xq5ihNbXzrMIiOD2FP6hqCmbCdEh8+cooztStrPth8WCMI7kXDDGcH5+9iIEH8N9OmE3hNYQRTBGsNY8mcYvQmiXsKZMMNaDCPf396s0LmeTqmKMoZSC9w3WmjpQU6Lrumc7YdaGH5OoWN4DVetqiDFSSiGl9GRYigjjuCCEelPspoWsqrP6t51F91RuSom+7+sOshYRUBVEapRyzqtrbL09VnLee8zUmSEE2rZdPe+C++33P2aF63vy+vnQ7X8s5Pb797pt6wI452iaBkHJueC8I6WMMUIpSts0hBgJIZBz3kz3I+LPOf8L0k9\/atxDHsEAAAAASUVORK5CYII=\u0022 data-src=\u0022https:\/\/avris.it\/image\/avi-new_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022632\u0022\u003E\u003C\/span\u003E\n                \n            \u003C\/figure\u003E\u003C\/p\u003E\u003Csvg xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022 style=\u0022display: none;\u0022\u003E\u003C\/svg\u003E","tags":["bootstrap","colour","design","redesign","refactoring","avi","avatar","webdevelopment","website","font","symfony","javascript"],"hasMore":true,"image":"https:\/\/avris.it\/image\/avi-comparison_small.png","introLite":"\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/avi-comparison_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/avi-comparison_mini.png\u0022 alt=\u0022\u0022 width=\u0022240\u0022 height=\u0022201.80952380952\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EYet another one of my projects, \u003Ca href=\u0022\/projects\/avi-simple-placeholder-avatars.lite\u0022\u003E Avi \u2022 Simple placeholder avatars\u003C\/a\u003E,\ngrew too outdated to support it. I had to rewrite it from scratch.\u003C\/p\u003E\n\u003Cp\u003EI took the opportunity to redesign it as well.\u003C\/p\u003E","contentLite":"\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/avi-comparison_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/avi-comparison_mini.png\u0022 alt=\u0022\u0022 width=\u0022240\u0022 height=\u0022201.80952380952\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EYet another one of my projects, \u003Ca href=\u0022\/projects\/avi-simple-placeholder-avatars.lite\u0022\u003E Avi \u2022 Simple placeholder avatars\u003C\/a\u003E,\ngrew too outdated to support it. I had to rewrite it from scratch.\u003C\/p\u003E\n\u003Cp\u003EI took the opportunity to redesign it as well.\u003C\/p\u003E\n\u003Cp\u003EIt\u0027s quite a simple project, so it only took me a couple of hours. Here\u0027s what I did:\u003C\/p\u003E\n\u003Cul\u003E\n\u003Cli\u003Ereplaced my abandoned framework \u003Ca href=\u0022\/projects\/micrus-v4.lite\u0022\u003E Micrus v4 \u2022 Beauty of simplicity\u003C\/a\u003E with \u003Ca href=\u0022https:\/\/symfony.com\/\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E Symfony 5\u003C\/a\u003E,\u003C\/li\u003E\n\u003Cli\u003Ereplaced \u003Ca href=\u0022https:\/\/gitlab.com\/Avris\/Micrus-Assetic\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E custom Assetic setup\u003C\/a\u003E\nwith \u003Ca href=\u0022https:\/\/symfony.com\/doc\/current\/frontend\/encore\/installation.html\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E Webpack Encore\u003C\/a\u003E,\u003C\/li\u003E\n\u003Cli\u003Eupdated \u003Ca href=\u0022https:\/\/getbootstrap.com\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E Bootstrap\u003C\/a\u003E from 3.0 to 4.4,\u003C\/li\u003E\n\u003Cli\u003Eadded more contrast to the design, while keeping it simple,\u003C\/li\u003E\n\u003Cli\u003Eremoved the ugly logo,\u003C\/li\u003E\n\u003Cli\u003Ereplaced the font that I used to overuse, \u003Ca href=\u0022https:\/\/design.ubuntu.com\/font\/\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E Ubuntu\u003C\/a\u003E,\nwith the beautiful \u003Ca href=\u0022https:\/\/fonts.google.com\/specimen\/Baloo+Thambi+2\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E Baloo Thambi 2\u003C\/a\u003E\nand \u003Ca href=\u0022https:\/\/www.jetbrains.com\/lp\/mono\/\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E JetBrains Mono\u003C\/a\u003E,\u003C\/li\u003E\n\u003Cli\u003Emoved the generation of links from backend to frontend \u2013\u00a0now it gives you an immediate feedback\nto changes in the form, without having to reload the website,\u003C\/li\u003E\n\u003Cli\u003Eremoved the \u201cLatest generated avatars\u201d section \u2013 I never liked it, but I needed some showcase\nof what this project does\u2026 with the immediate feedback in the \u201cTry it!\u201d section, it\u0027s not needed anymore,\u003C\/li\u003E\n\u003Cli\u003Eincluded some more \u003Ca href=\u0022\/blog\/reducing-website-size-by-a-half-by-optimising-bootstrap-and-fontawesome.lite\u0022\u003E optimisations\u003C\/a\u003E.\u003C\/li\u003E\n\u003C\/ul\u003E\n\u003Ch3\u003EBefore:\u003C\/h3\u003E\n\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/avi-old_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/avi-old_mini.png\u0022 alt=\u0022\u0022 width=\u0022240\u0022 height=\u0022423.8\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003C\/figure\u003E\u003C\/p\u003E\n\u003Ch3\u003EAfter:\u003C\/h3\u003E\n\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/avi-new_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/avi-new_mini.png\u0022 alt=\u0022\u0022 width=\u0022240\u0022 height=\u0022158\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003C\/figure\u003E\u003C\/p\u003E","words":169,"readTime":null,"lang":"en"}}}}}