{"tag":"bootstrap","articles":{"blog\/technology\/redesigning-a-website-naked-adventure":{"key":"blog\/technology\/redesigning-a-website-naked-adventure","type":"article","published":true,"meta":{"createdAt":"2020-05-23T22:45:46+02:00","publishedAt":"2020-05-23T22:45:46+02:00","group":"redesign","links":[{"icon":"globe-europe","colour":"primary","url":"https:\/\/naked-adventure.eu","displayUrl":null}],"category":"blog","subcategory":"technology","slug":"redesigning-a-website-naked-adventure"},"content":{"en":{"slug":"redesigning-a-website-naked-adventure","title":"Redesigning a website: Naked Adventure","intro":"\u003Cfigure\u003E\n                \u003Cnoscript\u003E\n                    \u003Cimg src=\u0022https:\/\/avris.it\/image\/naked-revamp_small.png\u0022 alt=\u0022\u0022 class=\u0022border-bottom\u0022 width=\u0022480\u0022 height=\u0022323.41488807913\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAYCAYAAACSuF9OAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAHx0lEQVRIiaWWy48cVxnFf\/dRr65+THfPjD0zHj\/iJI5IFAnHJBHEioJAiCAkImUHiC0LFglISKxZwJ+AEiGxgA0SAgmxCAvEBhZBCQ85ColfsROPZzzueXV3dT3uvR+L9kxiQjbkbKpUdUvn3O+c77ulnvre7yUxiuVehtYah8EYTTuP0FqDUhSVwzshBEGUIo00mTRMVMysFuqm5trlEf1ejgTHeFzwQPdPRHrKv29qVpd63L57gFKKOI5JEnhoeAenh+RmG60bnAp02zn2hfWGTEM3DmSxJWl3aecxJ9f6LK\/1McYQghBCYFY0RGlMUQtRrHFBcVB4alfzzZ9ucTCpsKoheIfWnuVOwWihw82NEdpoEGGx3+LFL18Ev81b\/3qNPAZvLAZHXY2xiYZWZGillsgo2rail0bgS+5sbaAjTfAeazRLx1aIs4yWKKomUNZCP7aUpRBZTZxoZqVClGah1XBr3zJzFqUcwXlEhGJaMZ3cQIdAJ824vG1Z6lSs5AmJK7HPPnkGAgQfGB8UaF+jfAWNZlrOyAdtRAnGRKR5glcG8UISG6wVahfwQROphtnU0W1pGkru7jVcvgF1s4PWljhNcFXN8UGLWzc3ePv9PTA91lq7dIPgSkuoNXby3l\/oL51gcXWV9OQQBFCgECYzodaC7fbJshwdR2gJWB2Q4BEViJXHuBkqlCy0EopZgW9K9sISSbRNEkVEcYr3jrzT4sK6ZWD3OPeYZTytmLkeeewZFYrltePYevsm195\/j+23Y9bWThBFhlZnAZN1GAwHxMMhujtABPzuNlUjNEFRV55JUVFUnp29A8QVBO0wUlOWE37245fp9hZ4b3NKEOHJR\/pEBowxfBKUUtjW8mk6CJGG0sMsCAfS0DWgixLTqRBREAJeBKUEowJWO1qxYEQwHUtV7INL0MqDmwKBwSBGZQLATl0D9wxQIAJxZI\/EZMbQSyLs09\/6LlVVsbm5yfr6+rzVPwGm1fufz6uqQurf4aWiqEqapgQJJAi5r8mzjCRN+cUfb\/C3d3fwrqBtJhw\/cZrNvZpqb4Ozi56Xvv08FkBrTavVYjweA9DpdJh5zdZ+gUIxDjEdtpk0W+yFFbQfYXTFQpLwwOJZACazBt0o2mZGCCUi866K4xhjLd57lswGZ5vXWe8I7WOr\/Py1PzDZuc1J\/S7m\/JPA81ilQJmIie6jyymdyANQOMWbey1SDqiC4BtNphWTsqITrpC0YqYzODM8AyjGdy6D0qSLXaqiQEIghMBkPKGpa7rdLmsLUC136VrIO22+9NmEY9lpHlh9GpcM5xkSAQXksUbbBGsC3ntAIwLVdJM33tljtR+wMuWJczOKKiFKDJE1KKUQwNdjlNJUBYhvUAijSeDGSKNNQG7v8tDpR1hZPUOn1yXLMh5+fBejNL2FeRREZG6ZiOBcg7UxThqKsgYbgVL47AwPr7zBqeGEK9cnSK1pRwlJlDKMM6zSNAR8PUEpDT5iNp0ymYy5M9vizSt3CQEiHAfnVtmcBJSu6aYGWxZs71WU02ucOtbi4hNrWKUUu7PA9397wDDX1E4oauGFJww6i2nKESoIt\/aHdAddtkZjuoMVboc1VLjLksy7aPXzP0CZmGP9iOmkIO2uYPxfCfUrCOCA6p1naa5ewhpF1V3mN3++wgcf3CSKIr7w7HN85eJPsCJClo754jOvkpkcEGa+4NHlr7OefobgcqL4PE7FGAJN3RCbeQMrtYI1Md5V82kKFKVHmM+bB9e\/yHLvUbIkJUkTXn\/tV2SxIwRoRY5zJ4+zNIhZWBhiIosxZm5ZIi2+ln+Hfr9PnufIvV0rpRDpsLGxQZ7ndHo9iO7l5iNr5rY7CBqrYeYaQEjjnGFvlSzLUEox7C\/yfujTHyRESZ9HL5wh67SoixnLaycB5pYZY8jzHGMMInJEckio4pzSQVQ7Yq3QWn1s4gZXo3QgNAZXzxAJxHFMHMdHa85e+AanHv8q\/cEQrTWTyQSjIMvbR1xWRAgCe9OGSelYHiiiKLpPVKwcdV2zvzNDHVVOiKKI4XA4F9QUKG1pKoOSCpCjKh5iey9QNpqbox12Nt7iqc+dJ05beO9pmoYsy+aWKQV5q4XWCo8lvifmkHi\/STDeEqeBNI7QzHefpimHultqRukNo50KcRXB+\/uqLCJcvT3m+t2CNLUcXLnGr3\/5KosLbbwIKycf5KWXfzi37N5X+CD44FHq0I65fScX06M5cX\/15CjMYTYikOLrCvE1BP8x60c3\/sHW1esUtePO+29x8cFF9rc3cM5xqvvwh5YZrVnII6y19wX2kNRay0fx3+8B6mqG6BpflQRfHx0dH8Vzz5znwmOnSbMWcfQiabuLNZq83TniPWISZWkCOC9oBVqDD2DvXfX8DxQFBEADRivMvbNY3D6VA1fXiG+Q8HHL+oMhvYU+aTqvuHMOrfV9HWsvXbrEp0Vd17jpPsZGVGWBiONHr\/yT5eMjklhRlnORVVnQ1AWprimLA6rigLMnemxtbrKzcxfxDXZ3d\/dTC2qahtBMqGqFb+b5ufrBPptFG60E39SEpkLCjGKyTyQzivEOrtynHa\/z90vvMrq7jfgafViqQ\/y\/92VVIL4iuA8zFLxHiQfxKOWJjNBKFHVdg3hEPJev32Jvb8xhFv8DbBYDPiGD0eUAAAAASUVORK5CYII=\u0022 data-src=\u0022https:\/\/avris.it\/image\/naked-revamp_small.png\u0022 alt=\u0022\u0022 class=\u0022border-bottom\u0022 width=\u0022480\u0022 height=\u0022323.41488807913\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\/naked-adventure-de\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-cogs\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E Naked Adventure\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. (screenshots before \u0026amp; after at the bottom)\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\/naked-revamp_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022646.82977615825\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAYCAYAAACSuF9OAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAHx0lEQVRIiaWWy48cVxnFf\/dRr65+THfPjD0zHj\/iJI5IFAnHJBHEioJAiCAkImUHiC0LFglISKxZwJ+AEiGxgA0SAgmxCAvEBhZBCQ85ColfsROPZzzueXV3dT3uvR+L9kxiQjbkbKpUdUvn3O+c77ulnvre7yUxiuVehtYah8EYTTuP0FqDUhSVwzshBEGUIo00mTRMVMysFuqm5trlEf1ejgTHeFzwQPdPRHrKv29qVpd63L57gFKKOI5JEnhoeAenh+RmG60bnAp02zn2hfWGTEM3DmSxJWl3aecxJ9f6LK\/1McYQghBCYFY0RGlMUQtRrHFBcVB4alfzzZ9ucTCpsKoheIfWnuVOwWihw82NEdpoEGGx3+LFL18Ev81b\/3qNPAZvLAZHXY2xiYZWZGillsgo2rail0bgS+5sbaAjTfAeazRLx1aIs4yWKKomUNZCP7aUpRBZTZxoZqVClGah1XBr3zJzFqUcwXlEhGJaMZ3cQIdAJ824vG1Z6lSs5AmJK7HPPnkGAgQfGB8UaF+jfAWNZlrOyAdtRAnGRKR5glcG8UISG6wVahfwQROphtnU0W1pGkru7jVcvgF1s4PWljhNcFXN8UGLWzc3ePv9PTA91lq7dIPgSkuoNXby3l\/oL51gcXWV9OQQBFCgECYzodaC7fbJshwdR2gJWB2Q4BEViJXHuBkqlCy0EopZgW9K9sISSbRNEkVEcYr3jrzT4sK6ZWD3OPeYZTytmLkeeewZFYrltePYevsm195\/j+23Y9bWThBFhlZnAZN1GAwHxMMhujtABPzuNlUjNEFRV55JUVFUnp29A8QVBO0wUlOWE37245fp9hZ4b3NKEOHJR\/pEBowxfBKUUtjW8mk6CJGG0sMsCAfS0DWgixLTqRBREAJeBKUEowJWO1qxYEQwHUtV7INL0MqDmwKBwSBGZQLATl0D9wxQIAJxZI\/EZMbQSyLs09\/6LlVVsbm5yfr6+rzVPwGm1fufz6uqQurf4aWiqEqapgQJJAi5r8mzjCRN+cUfb\/C3d3fwrqBtJhw\/cZrNvZpqb4Ozi56Xvv08FkBrTavVYjweA9DpdJh5zdZ+gUIxDjEdtpk0W+yFFbQfYXTFQpLwwOJZACazBt0o2mZGCCUi866K4xhjLd57lswGZ5vXWe8I7WOr\/Py1PzDZuc1J\/S7m\/JPA81ilQJmIie6jyymdyANQOMWbey1SDqiC4BtNphWTsqITrpC0YqYzODM8AyjGdy6D0qSLXaqiQEIghMBkPKGpa7rdLmsLUC136VrIO22+9NmEY9lpHlh9GpcM5xkSAQXksUbbBGsC3ntAIwLVdJM33tljtR+wMuWJczOKKiFKDJE1KKUQwNdjlNJUBYhvUAijSeDGSKNNQG7v8tDpR1hZPUOn1yXLMh5+fBejNL2FeRREZG6ZiOBcg7UxThqKsgYbgVL47AwPr7zBqeGEK9cnSK1pRwlJlDKMM6zSNAR8PUEpDT5iNp0ymYy5M9vizSt3CQEiHAfnVtmcBJSu6aYGWxZs71WU02ucOtbi4hNrWKUUu7PA9397wDDX1E4oauGFJww6i2nKESoIt\/aHdAddtkZjuoMVboc1VLjLksy7aPXzP0CZmGP9iOmkIO2uYPxfCfUrCOCA6p1naa5ewhpF1V3mN3++wgcf3CSKIr7w7HN85eJPsCJClo754jOvkpkcEGa+4NHlr7OefobgcqL4PE7FGAJN3RCbeQMrtYI1Md5V82kKFKVHmM+bB9e\/yHLvUbIkJUkTXn\/tV2SxIwRoRY5zJ4+zNIhZWBhiIosxZm5ZIi2+ln+Hfr9PnufIvV0rpRDpsLGxQZ7ndHo9iO7l5iNr5rY7CBqrYeYaQEjjnGFvlSzLUEox7C\/yfujTHyRESZ9HL5wh67SoixnLaycB5pYZY8jzHGMMInJEckio4pzSQVQ7Yq3QWn1s4gZXo3QgNAZXzxAJxHFMHMdHa85e+AanHv8q\/cEQrTWTyQSjIMvbR1xWRAgCe9OGSelYHiiiKLpPVKwcdV2zvzNDHVVOiKKI4XA4F9QUKG1pKoOSCpCjKh5iey9QNpqbox12Nt7iqc+dJ05beO9pmoYsy+aWKQV5q4XWCo8lvifmkHi\/STDeEqeBNI7QzHefpimHultqRukNo50KcRXB+\/uqLCJcvT3m+t2CNLUcXLnGr3\/5KosLbbwIKycf5KWXfzi37N5X+CD44FHq0I65fScX06M5cX\/15CjMYTYikOLrCvE1BP8x60c3\/sHW1esUtePO+29x8cFF9rc3cM5xqvvwh5YZrVnII6y19wX2kNRay0fx3+8B6mqG6BpflQRfHx0dH8Vzz5znwmOnSbMWcfQiabuLNZq83TniPWISZWkCOC9oBVqDD2DvXfX8DxQFBEADRivMvbNY3D6VA1fXiG+Q8HHL+oMhvYU+aTqvuHMOrfV9HWsvXbrEp0Vd17jpPsZGVGWBiONHr\/yT5eMjklhRlnORVVnQ1AWprimLA6rigLMnemxtbrKzcxfxDXZ3d\/dTC2qahtBMqGqFb+b5ufrBPptFG60E39SEpkLCjGKyTyQzivEOrtynHa\/z90vvMrq7jfgafViqQ\/y\/92VVIL4iuA8zFLxHiQfxKOWJjNBKFHVdg3hEPJev32Jvb8xhFv8DbBYDPiGD0eUAAAAASUVORK5CYII=\u0022 data-src=\u0022https:\/\/avris.it\/image\/naked-revamp_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022646.82977615825\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\/naked-adventure-de\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-cogs\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E Naked Adventure\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. (screenshots before \u0026amp; after at the bottom)\u003C\/p\u003E\n\u003Cp\u003EHere\u0027s an overview of 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\u003Ebased the project on \u003Ca href=\u0022\/projects\/avris-booster-quick-start-of-new-projects\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-cogs\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E Avris Booster: Quick start of new projects\u003C\/a\u003E, to take advantage of built-in features:\nuser management (including a passwordless approach to authentication \u2013 \u003Ca href=\u0022\/blog\/passwords-are-pass%C3%A9\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-computer-speaker\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E Passwords are pass\u00e9\u003C\/a\u003E), push notifications, etc.\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, filled the excess of white spaces with content, making filters and maps more prominent,\u003C\/li\u003E\n\u003Cli\u003Ereplaced Google Maps with Apple Maps, because of privacy concerns (see: \u003Ca href=\u0022\/blog\/ungoogling\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-computer-speaker\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E Ungoogling\u003C\/a\u003E, \u003Ca href=\u0022\/blog\/log-out-for-privacy\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-computer-speaker\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E Log out for privacy\u003C\/a\u003E) \u2013 the website is now officially Google-free,\u003C\/li\u003E\n\u003Cli\u003Eremoved a couple of unnecessary and unused features:\n\u003Cul\u003E\n\u003Cli\u003Ethe homepage (now the user is shown the map right away \u2013 after all, the map is the whole point of the project),\u003C\/li\u003E\n\u003Cli\u003Ethe \u201dgeographic\u201d links (there\u0027s no separate map of e.g. German nude beaches anymore, it got integrated into the main map),\u003C\/li\u003E\n\u003Cli\u003Eseparate events section (now they show up together with places on the same map),\u003C\/li\u003E\n\u003Cli\u003Eforum (it wasn\u0027t used at all),\u003C\/li\u003E\n\u003Cli\u003Eadmin panel (now the buttons for admins are just integrated across the website),\u003C\/li\u003E\n\u003C\/ul\u003E\u003C\/li\u003E\n\u003Cli\u003Eimproved filters (for instance added filtering by name and location),\u003C\/li\u003E\n\u003Cli\u003Ethe process of submission of new steps isn\u0027t split into steps anymore: place info, review and description are finally just one single form,\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\/naked-before-home_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u00221147.3333333333\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAkCAYAAACe0YppAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAHV0lEQVRYhc2XS48dVxWFv30e9bhV97offsUPHJLYMpFQeCTioUiIARIC8Q9QxvwAxvyijBig8AMACSkSgQFECbZjE8duu93dt\/s+quqcvRlcu7svcRIYEFjDe+4+66y99llVJaO33jGe4tr5BlQBmPcZL8L+fGBSB6aLxJlRYNZl2jKwNxvokvJZEOBbX6nYvfuYT8KEunDsz9PxevjljSMcUAoUYUFdlBQxEooCQkGMYzYnkbObNXVTYghlFXDOkfpEVmXoMvN5QoJHRMgIQzYyjhheQg2cd8w7YzFAXTpCHR1RhNIZUYTK9ZRO8SKE4CkjxKyEFDk3aambipSUsozo0+44JxxN5yQVmrbicJ4YFGJ0eC+YCcmMo4WBgHMQNCXMe0wcMQZidIAS6aljoCodo5GnKozoFeeUGAQfBDGH5Yw4aNqI4YlVpBqXmK36rQqH88x8kYnFitQ7CG0ViSLUwVEXEINDEGJwBAacCYGI08TdO\/eQwmFOQQTnhGG+wATOn7\/I+YuXwDnEOfpB6QYjqeG8Y9IKApgZ3WCEN75+FTEFNQQYktL1inYLggePYqlHkzCuW3Zne5RtBCekviMGY9SM2dyY4KOQbNVaNaGMwsgLqsaQjT4pGXBBCOOREIoWyxnvQFXoFksWc8NpxovhJCPWYcNALYnaFdSbEwgR74Sh7wltg68qyEZWoxRBBLIaiBH8ahbMwDDCw7+\/y9a5S9R1RdOOGZ1pkLMtpg3Oe8Q5ADQNdMsF3d4MrOfwcErRjjEXERfJGGaKE0PciswwnBjmDGy1bqqYGaF99Ece38087iqIFW+8dp1z117FO4\/zHmTlmQuB5kxke\/sqyUcO+wFXNEy2zhG8QE6Qe7IqlpWcVwSalKxKSpmUMzkrqkbYyRcgwAvjEi\/Cw7u7HDz4A2V0mCnjjS2qUYvFiqKuaTY38KOW7XELVYE4sOUUm89Iy4F+gCyOrELKRt9nll3PvOvpE3TLnsNlTxhXBajiyThTvBna9XQDmDjSkz047Gm3ztKIEKf7jJxCXUBKoAnSQF7MyUNGTPDicQCaUVUKG5hs1PSDktqASUM4\/43vIRgOwTtwrIZiFXqQcYgviUWBRM8QPV1dEXyDxBFQQLUFocWp4syOffSqFKrkIdMte4wBCSsrRFWPs\/rLRJCVPADefvttbt68yfXr1ynL8lN\/7jOcHPNpNAE6zBHAR49SgHZoVnz0wCoJRYTCF8d7rSm+ffs2dV0jIgzDAEDbtmxsbABw50mHLQ9XbRfHnUXF+VoZ2RP6dMTt6S325fs09meyFSABZ\/s0Qfjqxktc2b56ovi0oo0L11ADzYlJvUREGI\/Hx+sfLUp25iXMYOQWdCbcXxa0aZ+MUriGIQl\/u1dy44UnhCIjElgk5db+h2vE7jTx7kyZLpXpbMHuYccwDMxms+d6FPNDdHGfnJR7R5dx6nl0UBBD4JXxfbz1CIZ0iWBGGYq1+jWPt5vVOaweYwZeF6SUGIaBolgVikAxPODegwfcvn+EazMXNpVFPOCv7z\/mR9\/5C\/WlMft7M6oYkRK8c5TBcZprrdVPZkpSw1uHt4EmQhnXmrI6WKzZvnyDOzt\/osqf0C4esHso\/PT1CVsjZaCkn2SqGDEyRSjYCqPTO5wmNrYat3pbkBFJofCrKV4sjo4VYzBwhpQXbG5O+OaVGU29wXsfHPHBrUNeeTFjAUo8osJ43FBJyUROa5TTxMKv330EcbTWkhUcL59bQlk9u0GEWLPZjrn1jx0uTHo+uJu5erGmCRX7yxnjdsK8uMbjTrk62sMV59Y9NjvJj99+6HgwnfG1C5Gdo0xwwnIwDpbKj1+t+e7NiFPl\/Y8e8YOXdykvZX7zu4ILL77Om9\/eQXzLO+99yJs3PHv5LI9mm4Dj4HDJa9sLxpMTLrFTzL\/4\/U94tPyEcdzA4UBglg5JOvDDiz\/j5y\/+ij4r89khk1IpYmDGGMQjopSy4PHU2K4zmKx8AcQ5vBPa5uRq\/s8ic21kP\/74Y7quY7lc\/lvFBwcHHB0d0XXdf0y8do+HYWBnZ4e6rqnr+guLp9Mp3ntUlStXrjxnKJ\/hJNePiU8PV1VViAgigqp+zkYrLKyin\/d4J9zf3WVjvIUnYZoJIRDC6Su07uh6gMyNIWWcDCy7h1y+dPFziTdroQ+CqZEWC\/aW9wEQEcwMM8M5h6oyGo3Y2to6IV6pWrXi8nZDCP64uO97gOc+IgE6qVEfMWcIhi8AdQTJ5LSKWe89ZVlSVdXzFK9a2kvFfIDgQJzHJ2Gr8Z+h12gKIQ1GcI6UFdWBUVkBDovhWECM8bjmGdeaxz4dUYZAzhlLRtO2mH06q59hUFgmqMUwgxDcsULv1w98wvP0bp8OkHuPjhBxGEJwSigqthuH+4Ih+2J8eqrXAmS5XGJmx978N\/H\/kVxfJsK\/\/vBkrtRRGDKoGe7px9coCtOl4p1QxdVTy8yoC0c3GKNS2JspmyPHwUKZ1I7pQinC6n29juse\/xPzaJzjyI4XIAAAAABJRU5ErkJggg==\u0022 data-src=\u0022https:\/\/avris.it\/image\/naked-before-home_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u00221147.3333333333\u0022\u003E\u003C\/span\u003E\n                \n            \u003C\/figure\u003E\n\u003Cfigure\u003E\n                \u003Cnoscript\u003E\n                    \u003Cimg src=\u0022https:\/\/avris.it\/image\/naked-before-map_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022911.20234604106\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAiCAYAAAA3WXuFAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAKPElEQVRYhcWYSYwk2VnHf++9eLFkZORamZWV1bX1NnTPdGMPHgwDshjbhznYt\/FyQliIAyfEhSPiAAIhS3O1sBC++MAiGYQBGazB7WHG46Vtpj0zraarl6qacm1dWVlZWZEZ6+OQldGT08NIRkh8Uii2F+998f\/+3\/\/7IgQv\/a0Bw5ULbZw8IUoyhBDkxrB9OGJ5rsR\/7ZzQbXiEUUZuDFpJjsOElVaJQZhwdJowijLAAIKJffDxfM1hoWZj0ojSuzv8QDV5rh3xw32HLAPxlX9dN\/x\/mTEgxOM9IIwxBmA4HOL7PkKID53jw+c3xfP\/22M5PXn55Ze5ceMGN2\/enFng5zn+vzCR57nJsow3dr5HmqcfOGipvEwq19jZvMfqyipHR0cIKdgTdc7pEVprtNaQDrl753t0a13ssuZOVGKQ12hmrzEOU3K3hZQ5ILFMD0FO2Qk4FyzRrrYJ3ABr+pZ\/9tYfE+cxLbdFmIZIIUnzlH58xJcu\/g7X5lYR1QV2x4JUV5BCMBjB3dRFjMBgUFlC4Odsm0OssQVpzJjn6ZnzGFfi8TNMHqGJSI0EkzKKQx4ND2hVW5OwGWNMkiREUfQ\/wygEr\/dcHg7PzpnkjStSmnKXvaxNho00EaV8i0w6+OYeg2yRYb7Mj974N168muDWNRN8IBMuIg8RgFKSFy59Gt\/2JxwC2NjYYGdn58Pji0Fg4GwfG4Gb3scyIWmSEaWKhz2Na0mS1JDKOSr2kJeeFWhlMCafzDE2OFGMpTSOtmm6ZdRZLskpKR3HodlsEkURxhiiKCJJEvI8Lxwy082AIiPr3+L12xbf+s4PUJZgNBpRcSTZ6SP+6K92cU2fitpD2eBVHFxbo5VElxWlqoWjBLYlEdLFmIlHBUL1ep3BYEC\/38cYQ7\/f5\/j4GCEESqlZjwAr6TOvdjl\/ZYWdg33+5l\/e4Ctf+2vc01scHW\/zhV82LIv7tPM9atUyyTgnH+W4UuM5GqUknmvhWhpfKaRglkPD4ZDxeIwQAtu2CcOQRqOB53lEUcSrB5qN4XvDN8nIYX+Tk\/4jRonHx1sP2AsNJ72IjzxVxVEujZrHOIkZpGMkEqkhyzKUkATao6JrBOmIoP0Mti5NsmxK3CzLsCyrEKs8z98nlO\/RHyao7R0LWp7kWvNndNo1alHMK4cZcZhya3\/A+UYPO9DM1SqkYUoaCeo1HyuXeMrBNxkCiRLvC1mWZURRhOM4jEYj6vU6juPMsto8ua0tLXN\/O6TmCsJwzHd\/sk8y2OOffnzI85crLDWaqFzQ2xkgKVOpdRmk58hEAIBWkhE1onyCjcjz3KRpysHBwaSo5jmWZeH7\/uPwTNP+ZFahk3iE45Qop\/d45Y23+eQVh+MQYuGydeRyuXnIvKeplgV1v8Sd7CqJsTAI6vltOu6IxaCN5V1EapuqDdY0JH\/62pjVquTWXoLnOmgrA2AhUPzer5YRWY6XDEhlidSyGQ5POd78Dl98tkGcG15PEgb+b2DVJX7cZ7l2yK74GO88\/D5X5zOSxGJUrmCiI6Tlssd1dt7+ZwbthGqrwkp3ESHkY1J\/8819qrZhP8yRUpLnBstSNMouH19yGKSKcRSTIzFCEA+PMeNjmvUySkl6eY3+yKBFSmoUmghLwv5RyHxNU3ZsBichUkqyPAch0MJgpCJNM66sdbEt9ZjUr26MWQoEt3Zjrnc0n7vqUCq52LYNwPHOQ3q9XhGuKbL9Xg\/Lsrh1HPHNH+9jhCDJEvLoBOHXEHnM+NEGX\/rMr\/GNnzzC0RIJ5MZQVQlbWxscPPhP\/u7Lv8\/KuQWsqTB+YtWlahu6FYuWL3EcZ1Iw38vps7F7e3vEcczi4iJSTvKi4oxYqR5ja9i9\/X0qRw\/o2x7x0R6+yUj6Fxndf4vTLEXkCV60xfqdVxkNDoiiiDz9XYwxjxG6cX\/EUkXw5m7CRxZsfrHrPYHG1Hq9HmmaMjc3h+dNxtXSIy6YbdoqYd0N+ewXPsMIg9EOqRG8ud3j4fpbeK6DFQ+oRBt0Sy5edZGNvR7irKMsSP0rKx7zZYv5akonUBhjJgI2VemzbAO4dOkSxhi01sU1bcaINKR\/Injwztts1EvsnPSwGw1c10boJbz0Xdr4LLUdnj73NCtzDq5tEeY5jWoZIcRjhH60GbJYEdw+SLk2b3OxrKjVaoUztVrtiRBOTUpJHJTQIkIITbVkUav5NJ0rZLYiSVMuttZwP\/8p5so27WpApewjBQyjhDDKEGoyd8Gh55Y8WmWL+WpOJ1B4nij4AVAulwvE4jim3W4XwmmMIQxDglqTLMu4ePU6aZrieR7NZrO43+0u4LouxhhardYMHaZFvEDoh++OWPAN7xxkXJvXXCjbBT9gouTTRdrt9hMo5XlOkiS4rkur1SpCPH1hYwxpmhLHMfPz80VZen87XHDo2aUyLV\/SmZN0A0WjYc8sqJTC8zy01gyHQ9I0LUJqjEEpheu6SCkZDodkWUYQBAXK0+cBTk9PybIM3\/exrAIThBCPhfEP\/\/EBnZLhkCqC4quEli\/5rY\/6hGHIaDT6QA4JIdhJA27tnGKEnEws5NkmQMDHqiHrm7sYk2NMjq01JU6YC1xsrVi99AyeV3rMoafP1egEiodHCVKIIraBPalvh4eHM8I4dWT69jfHHf7+p4dIZSGUQkoLpSyEmjg2ctb5+j+8QtOOef7pJa4v19CBz96jEcKSLK09Ncuh25sH9APJ+mGKpRRpmgAwH2heWJmfQeTu3btEUcTly5cLYqe9bSr5GE8KcuEglY2yNEIKtF3iUkPx4gU4322zutql5JfZf7BFLAzKUU9y6MryHJ3AwgsSrPdoT8URuK4745DWeiYDARrhOvNv36BWdjkYhJzoKn1jc5rZ7MceL33+Os\/9wjK+X0IoTZIktJfbJKfHnIwzzBnJC4TubPc5dFK2RzaVSsCFhsVnn5p1ZGpra2tPXOu2GlxcW8SSku6CwrY1CIlSkjg1CG3x0\/sndM9liHc3uXxhif7RAbpUI8oUytKzITu\/UKMbWLj9yU+Dsp6k8hSJTqdDo9EouFN8+kqJZVmMR8ucWz5PlmWUPBel7cknjpTkxuCVSgSrV0kqFc6Pe2RpzLKtSTKDcnzss9AXpL5mbREfxzyDodPpABCGPuVyGZg4NxgM8DyvaN7yPKdUKmHbNlJKBidDyn5AEARUq9UZBE9PT+noISoe4gX1gjP+mVRIqWY59Ac323x0weLfH8RIAc8v2fzJp2e7xiRJqNfrSClJkoRGo1F0mVk2+Y0z5Ve\/36dSqRS1cCqMWmuUmizu+35RjqZCWejQ5uYmxpiz5mzSxsZxjOu6NJvNGdV+v31QR\/DzjhFnUlOE7De\/ZfFLC5pv34+QwuLXl22+\/OJc8cBXv\/rnfPc\/buBosC2P2qVPcO76JxGlOr4n6ZRavHYvha0bqEqHNFjBCA+T5QgSfvuFEre3HvDtb3ydrfV7jEchUTjGKwckccTX\/uIvac81+W9xS9XYCGf+5QAAAABJRU5ErkJggg==\u0022 data-src=\u0022https:\/\/avris.it\/image\/naked-before-map_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022911.20234604106\u0022\u003E\u003C\/span\u003E\n                \n            \u003C\/figure\u003E\n\u003Cfigure\u003E\n                \u003Cnoscript\u003E\n                    \u003Cimg src=\u0022https:\/\/avris.it\/image\/naked-before-place_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022892.66666666667\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAhCAYAAACxzQkrAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAGuklEQVRYhcWXzW8kRxnGf1XVXf1p99je9Ud2vcN6DVlyixBhySESUoT4CBJCyoED\/wo3rvwDHEGIC0TLJUIILkEkaCOtILkgJ2SD7azxLuuZnfH09EdVcZiZ9jjucRaB4D1VV1XX+9TzPu\/7dovdH7zpaLEk1axEHtY5nHMUpaWsLUoJitISh4q8MCwnPr1BSVHZtmMmZ4WKG1d8Tg6fMNY+pdOMyla3iNqY9pX\/olljGY1GVFVJUTmi0CPLsta9npKydeHjBx+xt7dHkiQURYH2NcudDkrA8198AYQABwgQwNPBAFOXaM9DCEFtDNY6lJIIAcI5JJY08oiiiInf6QHQjL35h3nbe\/8+P\/7RDxkWOVIofOWRRjFOSEqh+e7r3+eVV19j47nnCLXkT+\/eZyVboixzYl\/ymzd+SlFbfKWQwmFqg\/A0X33lVbq7L7Bz6\/Of8jkZe87NInY+cuOiREu4spxhgaUwZDQuKKucyuT8+mc\/4fd3f8Gdr32br3\/rO\/z8l3f53R\/eJohDvvnSLrc3M\/LeECUdRWVJN9cYHPe5+8aveO17ATd3dttD1joLZEshuzvXkELhjGVYOE5sQGd1iTs765wOTxn0h\/z5j78lFAXWGKhrqrLi4aM+z69nDCufK8seSegQIsQGI059i7fQ6yWAkjihsDWJtJgqZyWKSdZ3SLRio6Ppax9fB4SRJE1KcGBqi6hqnvRH5EXJSf8xV9MrBErhjU8Zjka8\/JUX2dq6vhBQu6IBgcUXCs8T5E6TO82gd4xWlqN\/jjh8eMTYWPxklRfvfAPPd1hjMWXFRwdPeOeDQ97+8CF\/fzKgso7KwGhccv+vn1CP68UMCSFaF\/KixJiCcCnmS7du44TEBhm3dm\/R6XTwg4CydtTG4emYauxwtaVyDmMK3vnLAb7WlKWll9dspQFxGPDll15meXWFRX6Fc861ZdnB3nscfvAea+tbJNkatTFo7VNVNUJIrIOyqhkXJWGc8ta773P4yUNGozEIiZAChKDTieleXSZbSgBBECXs3PoC2zc+R5vfKaCL9vjxY5xzKKXwPA9rLVEUIaWc1Jm65ujoqJl3zhHHMWma4s2p9q2jN7EYpFFcL28DsLq6urgwnn88Q5ymKXU9ifXMqVKKoiio6xrf9wnDEKUUWmuqqsL3ffI8RwhBmqYAXI22AJBOkerJnNa6lR0AYa1tZchaS7\/fxxiDlJIkSZBS8qR4RGgm4ziOUUoBcHp6inMOL0gwduJOSXAOYt2ulzZbmGXNBimx1jIYDAAYuJNmrqoqZhE3xgAQ+oIkEKSBIPLFvwUGLskyACEEQgjkfL+bMu15Ht60bwkBWbY8WWjpT89ubnFhBHDOYa3FOYcQAmstsxajtcb3\/eagBw8+JooijDHEcUyn02nAWGu5d+9ec8lut8vGxkYbBZ+tIa01URQ1bB33\/kEgQqSUaK0JggCAp8cnJOMR1fpas9c516znp0OsF5MEsrlgm13KkBACYwz9fp8syxBCEKmYsiwJgoC6rhuHhYLBwQG1qxswzjnW1tammnOIasSwosnAVkAToLPYn1EHMB6PEULgeV5Tf4IgmKbtJGyzmwa+wux0UVN2tdasrKw0WSjEJONmYCfvXdSYdzZxkcIwDBtNjEYjlFKUZdmwNwMGE70ZYxqAVVVxfHzcaG0+RGmaTp8v+vQWFGqcc5RlSV3XaK3RWiOlbKryvE4ATkePuOoC5MZW876UsmGo1ztBxxmxlk0422yhhpxz5HlOp9PBGENRFE0Lmd8ThiG+7zP2LId7H0JVN2zMhJ+mKVoHmOKUSoRz2XnRLs2yXq83Qe15TV+DibaiKCJJkmZ\/nufU9RmYWUJIKRs2hBBNC1pkCxmaAVJKUdc1Ukq63S482Ce8ce1cA53tn\/W+5rZTULPQzreahYAW1QMpJWtra01hXF1dRQjB39bHXG+pI0EQNM7m68xsPM\/wDOyCLLucoZWVFZxz9Ho94jimexxib1w8bH9\/nziOEUKQZRlhGM6d5tjfP+Dw8BDnHDdv3mRzc5O2FjP3G8Q5B1JKOp1Ow1CWZSilGoY+fbNy9JT0yg1qCxWS8NyqYHt7m+3tRd\/Sc37PJi6Gbpa61lqGwyEA3Yd6ju4zu7bd5eqSYnNZkQaLGmq7nzmPi+vQTAOzNJ\/VH5ScguUcqHS5M33v7DKXW\/v6Z34PwSR8RVE8y9b\/2BbWof+XPRND\/0u79PMjryY\/eIEnOC0tnhRIAZEvGBQWKQShLyhrh3WT+XHl0B4UNWgPajNRS+gJhoUliyTyEl3\/C8C8KrFX1sBMAAAAAElFTkSuQmCC\u0022 data-src=\u0022https:\/\/avris.it\/image\/naked-before-place_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022892.66666666667\u0022\u003E\u003C\/span\u003E\n                \n            \u003C\/figure\u003E\n\u003Cfigure\u003E\n                \u003Cnoscript\u003E\n                    \u003Cimg src=\u0022https:\/\/avris.it\/image\/naked-before-submit_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022811.96261682243\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAeCAYAAABE4bxTAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAEl0lEQVRYhcWX328bRRDHP7M\/7nx3dpxcQvqLEl6QSiMEVXkAiWfUf4A\/EvVv4AkhJFSJhyIkhITatClJXSexfbbPd7e3PASntnFcpyrqV1p5bzw7Ozvfnbk54buH3lrFnY9SfFFQOo8SOO7l7LRCXg0KtAKjFN2s4MZmg9NhwXYroKhqTrOSUeGYhwdk5hcaVmG14sF+ix9+7bDtctgwdKqYs3F9sVIe\/nzgeR+Y7irzYqnr2jvnOD4+Znd3FxFBRFBKISKUZYkxBhHB+3Mrq+YA3vsL+axsHR3x3vt+v8\/jx48JggCtNVEUMR6PMcaQZRmtVov9\/f3\/JVDTAMxFyHvP4eEhVVURRRFlWRLHMcPhkCRJGI1GaK1pt9vv3CFrLdbaeYdmw77ovfeePM8ZDAZ47\/HeX1A7qzOdwzug7E2ncG4xi9aH9x5jzFL5okMAZg1\/KMuSsixJkuTKDi1Gfxkbs8\/mMqVZ+WKWXQXT9aucmqXMzN6Fy05YFAX9fp80TZeGfxXeZH9RV+q6XusOVVV1EamrQil1qQOLUb+41KsoexuqpvDeo7VeO8su4r+KslfZhIPjE7bSlDAIAMjzHmQnNBoBYRIwqps4L4S+R1kUTJQiDmJiq0njzbUpWyvLJhLQsjW2HOKKjMlkQl8cTZkwqmvq0iOq5slZQlIXDL3leNzl\/o7DO8tWtLqgzmXZYuFa9Nh7T+WFH0fXaeZjsjrEo9B1Rlr+yUhtEelD+u4GIzZo5keEdGhEjt9f1uylH3M7vbWUstl9pjI1K1wcs8oAafUHsXRxVU3uIvrRfVS4g\/I9arPNhj0hsROsTNDiESVQzNtfBRFBTS\/tqiFAgy5no4ry4De0UVirUcUAycf0zTcYFdCoTkhcDxtqtAhaBDHLbS5SNh1qMQqLHgP4umJ7\/Igiuc3eJ5pE9zDDF7R5zlb0lNNnv\/Dh5CeuhR3Cdkg5dIRiCbShEdn5t\/mSSM3K1iqMohSv4q8wUjKaJARVlw15QkhB3in47FZCGiXYQJMVOVUaE2jDtjY0g9ZK+4t7rZVlHsXYt7FMCM0uH8gzbKwpS0vrZszZUUZnXFBUjrAdsBlH9E9yTDMkEPPGOnbld9kUzgc0VI4ucora8fywwzAbEkURn+7toYAXgxMaI02zfQMTJTiSS1uU2X2mMjVL2aosU97hvSerUhqJxaCJWze5e\/ceJv2S7qjPcDwhDZsk7TaPizsQ3qSWZM7+KqxNGa7i1vgR14Ix1gYcv3Q8j77GJY7h4JQNNaBnvsBMfmd8NuKk3MaGBd2zLhvt6\/jm+pSt1TFmwyFHR0e0Wglawbi2OAxWHKVXqDpnp91+\/eEjCiXn9pTWBDZ4tx3j4mlEhIPsKQ\/\/+h7va2rvEYHP03t8e\/vBpd3gMjtv1TEug1WWzWAT4fVda9rmym5w1SGnWIuyq8ynG7xtk79WYVzm4Ox\/6xa9dXTEOfd+PqUvgZnWB+89z3oVkRE2I30x1+o8cwItJFbRGTqUAi2wHWs6Q4f3oBXsJJq\/B46df+WRFWIrnI5rNhvna3cSTTap0UrYSfR\/KPsHj\/b+fF+Z7QQAAAAASUVORK5CYII=\u0022 data-src=\u0022https:\/\/avris.it\/image\/naked-before-submit_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022811.96261682243\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\/naked-after-home_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022784.8\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAdCAYAAADCdc79AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAJQElEQVRYha2Wy49l11XGf2vvfc499123ul7u6lbb3XI3dkIejgMTgnhaiaIQQbCiCGWUDBghZkiREEiI\/4ARAgYMQEIMkFAiGGBkWRkgO2AIsR0nbne7u+3uqlv3UfdxHvuxGNzqcrdRhBSxdAZ7n3O0z3e+9a1vLWn\/9t8pqoCCAiRQBY2QEmhk397iqa332GtX\/MedNtF7fufzn+Erv\/prfPNP\/ozxdI51GVtdYdBpc++kJgSPiFAUlk\/uTMAI9yvDblHhWi0yo6AJ5xzedti9eIX56QQnKAg8eTiiTaRuAs4K3nsW65rj2YphZ8214YJX7wzRGIi+4R9ffp2qVsbT+eYHUmIyT0xOPc7luFYLEbg8LBHTcNy0SepY+xyThH4WSOJZRk8mJfdujRERbPbMi3887GREH1hVntpHah+pmoBBiTGS6Zhr28cUboHQZr6KrMuGH9y8i6pirCVpAiDLC1JKXBx6yuhwLiOII0bhuU\/8Am3\/HmIrcmtQEYwRYowYqxiTcKDYas1xNDgDAvgQ+NSe560TR+MjzghlA9084\/KoZrLOWSwqNCWMsagqKUbEGGLwtAvDi1\/6MkV7lw\/GE0adivsnU+7813eASNFzGHUk8WTiiE5pq9JIwqDKSbQAhKj4mADh9QeWyicSgjEBZx0xKiGW9Npxw0RMRO8J3qO6Wfu6whjDm7fucbi\/x9XhKVcPD2lOvk+rSNhcyFWx0lAYQ4dEF8GqYhCMAnlmORh16HdaIBbrHPvbA3ZGfbAtILGqT5nVgbcmu7QLg8tzsrxFigmNCRFBUyKGwHy24u77U6bjN\/n+f79EUWxxYWtISpFQJaZVi7XmOIRZpRhVMpORNw7Xy5VRzxBCQ9cp\/YEwXVQ8ODo9q7RIliuFgdurAbGpuDWJ2Ayacg0iiDUgBjEGDYHnnn0G\/APqxlCap3n5tVcY9D\/G1tZ9fnRvyY+P2uz2a65fqLi72Od6f0lAqE2Ja2fCfFlR1QE9E\/HhdhvtGtDIeLpENXL7aIej44ayqkAVMQZUADDGYI0hpoSqsjUc8OvP\/wyv3Zzw7e++SbsNl\/ZGtLOczMFn9sfU6shKpVqvGc8ajE2oBmTrt\/5KU1IEQBOQGLQd3geMJDQE+rzLevwOMQRENlUuAiIGm2eIMaQQid5jncMYw8\/d6LFjS3ot5T\/vW945AWMEa2C3Ay9cKqmSUpJRWEg+sPaKG3Uc2\/0Ws2VFWXvWVaST57giI4XA8XTNaRUxMYAoqgZQVIWiPwBjaVYLNEUg8Zuff4HV9DaHzdvknRaaAi88mbh5wTGyJe+vLJmxWISOE07WijhlZ9CniAZXVRUzDRS5RSMEo7Ss4owiRsiMnmlEIJ05OputXy8JIbKJhDGGV777Er\/xNAwKyyoGrAjWWA6yipZEyBsehC4zU+DXS5rQ5v2Z5yi0ODwY4aJvsIXQySy+DmhoGE88aCSEQIqeJ7fbPPvsx\/ngeEIV5FxDm1SFDR4BYy0fP2zT7dVkuWXfghHwCYq+YjUwSMpll\/PGvMUzFxtIysky8tZyxFHdwrUzxWggeDBEMpPo5BYUFo2H5Pnln3+eb33jC3w0jBE6rY0x\/n+EiOCqssRqxla7w8lqjW8aeoMegkGiYblKzBYVv\/cXrwMw7OaEmFhVgSt7Xf7wxRs03m8oQum02z81IAWck0AKidUKRD1WA6enC1KKrNcVKQaGHcOf\/u6nN9\/8SMyTgnXn+7LxPzWgljG40FR4VUZdy3KxxIhSdLtoAlMYUjCoJm5O5\/gQEBFiilhrP5xYHkmZiJyn8OHaGIOqoijDbvcnAtrKM1xhFWcNViP9QmiaAKnBCczXK5qmQVLgswc7\/+cfNj79xGdiBGsEHxJyxvSj0hMBZwTXVGskd5RlwtclwQeMbowxxRojkRga5qenlOs11lqquuZgf588z89ZePXNI\/7gz39AAhQlycbIRQQRuHGpxwvP7\/E3r9yhyCwPlhFBsShOI5My8MVP7eJSqOh0e3RzocmFWVVzukikFCkywfuEFaVotdCUQITMGVLaNNSHkbUMB9d6iLEElPjev5MOblCvZizff4vyXqDzua8zGGbkzjEYJIyALj7gzg9fg7tvs86exNUR7i88ad6AKskHdgYtVMGIoi4jes\/p6QIfPP1+H+My2h+ppkxLLsXb7AwLbCz58d2XeKJ4hxAhf6LF\/sETnNy5yxsv\/yuSArEp2Qs3WYzfpmxKyqpmdW0H52mxNdglRsUYmN5fIxrQGDg6mZFSBI0Mh4PHAFRV9dg+J7LLKd35McuTu1w\/PODLX\/gVfnjrFq7doTPY5o0HM6bjm\/SKHCPKMsBTl6+y2\/ZUIfHU4QFOZ+8ynb3Lw0HfoJTFkBQjvbYjJcFZOROhfqjARyrJOYclUKQJmC7Tkzk6G\/PqP\/0z826HLM\/Z3a\/IucCuO+Fip8fVnYIbh1c4GOVYa2mScnD9WZzE5qw76dmltJyQdwqOxxPquiF4z3K1YjabgYLERDRQtApGoy1arRaaPC5NyFNFO4s8qNa4VkZLoaxr5qcz9i4dcGV\/RWFKyLfYGh7QarfxCW7fm3CruoXT9NDIzk0FTYGm8gy6LY7WS1IKeO9RVfb39lCEQb\/3WMouX7nGV77++8SUzntdjJFBv0+\/3yfGiKrys5\/4NHmWoygXtrdx7kNTjTHiSP6MfT0Htjidb9JnhCJ3ZNawv7fH3u7ueZk\/2r8erjudDnVdk7kMKWvsVp9Op\/NYNfZ7PVJSkhqq2Sn5oLdh+OwMRwrnQOQsZVv9NqqK957JckntA3\/9L+88xog+BKJgRfjaL11hOp1RliU7uzt0RwOKouCjMR6foKrs7Fygs7W1cfxH4hFAGzCbLyVC2Ogmc4Z11fD33ztCkE0\/eyhq3dBsUb76i5fZ29t97PBHK\/FhCzk8vHh+r2max94XEZxqfNzDgePxCTFFjAgxJpwVruzmHAwsV0cZP5p42haGLYOTRGGFO9OGv\/y3B9TKZuA\/G\/pFDCLCpYHjs9vCd177gLqJlHWkqRp81RB8QEPgc588wKH\/u\/9cGA0Q4PhkCii5hS9ezzBmM2IcHDoysxm8Fqs13\/6Hv+X603\/E9+4uMMYg1iHGYq3FiEWsIybhuUHEhzV1UlYxsPaesvb4OpBqz3xd8z8wvSjf7jlH7gAAAABJRU5ErkJggg==\u0022 data-src=\u0022https:\/\/avris.it\/image\/naked-after-home_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022784.8\u0022\u003E\u003C\/span\u003E\n                \n            \u003C\/figure\u003E\n\u003Cfigure\u003E\n                \u003Cnoscript\u003E\n                    \u003Cimg src=\u0022https:\/\/avris.it\/image\/naked-after-place_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022647.34864300626\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAYCAYAAACSuF9OAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAHIklEQVRIibWVS6slVxXHf\/tRj3Oq6jzu+9Hv0OkkEgQHcSLJwDgWjAMRR4ofQZwKfgU\/giMdiBMRHCQoSETQxkQx706nO7dvbvc9fZ51qmrvvRzUubfP7VbBgYsqqgr247f\/\/7VWqeyNX4jWgUhrRAIKIXiPdw3BN1w6\/iXF9APyvIcKnk5\/k29994fcvPUCj47usnf5CtdvvkCUpGiliCMwRvGDH\/2YD+58xMsDTe0atjeG5HmXuiyJjebeaMpB0cFYzZ2jE3pbhxSRwoLQTVN2+gkqOIwWvPPMyiUnpw2DtEOfnNFsjNLQPGr4+c9+ShwnmChiXjvy3oDvfO\/7vPLq62zv7GANhCBEcYpkXTpNydbGJgbPZDRC5z2aZck0tgzijMP9fe4fHzM82MHEL377J10aRouayaLi8bSirhuWVUPjHN3xOwz8iGEvx3lF0Y3Z7PUIwVPXFbVrCN7x\/u0\/8dZvfsXDk4fsHVzhzbffZr6sGFVQGcP9k4ccFinLquKL0YSmqrlxuEPlBI8i0bCzv4uFwKQRggRY3U0dkOAgeHaGBVt6A\/GO\/d0dHo0mNKLwcUYUZzy\/NWD8eISRVpU\/v\/lbbv\/+dzyI+tTGkhYFC2cIIaKfdZnMpmgFl3c36eYF09MxD05G9LsWaRqsUcKXrgyoGk9sQSOUVYN3DZPpnH6Vcn2wQXCB4Dwqs3QGO3wyaVDAlY0u2y89x7JqmC8qptMpWRy4e69CaUM5m5FkGcZGPJ4tyPOctL9DXE84GU+ZLxY8OD6md+0AgmC997zz8UMEIbEKhVBXNcE3qODwiecvH91lK0vxixIksLu9xV6\/y8H2JptJjdLCu+9\/TF3XPHz4iBuXcrzvUTmwkcXNF+giZyGaUVnz4ecf8fXnD8iTgn98eJe8mxAnKSeLJZbg6FNS2i4EjyJgcMRWqCpHbBX7O5t0Y808SWmIuD+aU+mKqkj5+4Mx20WCtYqr125yeOkSr772Gp\/9+i2q08cgEIJHe89fT2rGszmxaGzc4XQ6pmlqOpHm+q1bzMZzbJEotM25HC35dCTUroEQcOJQwXE6mdJP5yTGcuv5F6nKOdN5DdmAW7dusre7Q5bnRFFK5QM+CD6Adw0iggJiG1EvK1xTowR0mrKsK7I0YjDo0ywXOOdxErBagbWG+zNLExwoizIBjSZ4jenso7eucu16H5sUPHewh0I4On3MYH+fxkZ8djxiUh6RCgwPrvDJxx\/gfEBCwDtHU5XYJEUrCwowKbenUDdLbuzt4RdT3GxKPryMHdeGIskYbPWRWcOy9mSpZauXcOd4xvZVw+begEfjd9lMFfc+f4B3jjyJee+9f\/LJ3SNevrHL7e41Xpp\/xod\/vEOnN+Tq4QFJZ9xWrxJAE6cJadYl6XSpmoqujTjVMZv729xvBLvwWHzDYlFisXQ0JIlgVMODhyU4xzdf\/ypvfOMrANR1TRRFKKX4f4VFPHGkUUoxmteICIMsIo00ywqUAmMMSik+PzqiLEu00gw3hmxubNA4x3QyJU0TtNakaYpIO+9\/CaUUIoJVk09ZTmApAhJQEhiLbysuOJCb55OybpfIRtjIopUG4HE1YTQfsRH65HkOgABNveR4dMLOxiFpbBCRCxsDlGWJ9\/58XquQW6KgHbQCkhUQ4truvQpjLGnagnS73XYBaymKgsSm1HWrcJp2cMryt7Hjy+4IozUiIAi9ogAUgqCVxlr7lGVu2b6JAE9+H4iH4NrnU9IqpZjPF8RxTBBBRNBKkff7iAgikBrN1\/Y2UbTeaa0IIawUFLqdzjMwLZBfImtAsgKS4FHiLyg0mU6IrCXtdIiidrGmrjk+\/gIzVIQgFEXeQobA6ekpaZIQgqB0iya0lT+ZTDBas729fQHMiqtWAgqIrCwLLUwIF4BaudtoGkdVVfRsxtR0sJEFBO89WhtEa\/q9Pskq2VnlzdnZtW5z6emKtfglSOtqa1ULxfq9iulsRpZlbAyH54m5XC7Z399HJGCMwRizqjJFr1esQTy7+VkKXABSrnqCfQaFrFQKK5HbKIoC1zSMRiOyLCOKIhJV4l1JMAXeX8w37wNRHKH\/Qw9wzq0U1WuW+ercW0RQhPOKewLYxmQywXtPr+ixWJTAgiTpUAlEa2OKokfpHH+4c49Xdjex1qDgPMfOVBGR80Rfs6xe+5Q1pQQhXPBeKYVC4b3DmLZk47IC50mHw\/MeIwKxUjyXWhbz+QWA2XxGka+glCLPsqeAgluzRVb7rynEkxNkWYZ3Dq01\/X4fgJGd0NSK9Ck7lFKktu3wZz1HRCjynM6q5Neb5BpQs5YlsrpWXZWLg402YCFaK1OR8MyiZ3EGISKIDmitmc8XTKdTjLVk3S7GGDqdzhrQqvGdLalk\/UsuWDadTgEhiFAul3TSlN54yXxZQm\/rfFwQwRjDwcH+vwX9b\/EvDlDrxomykUsAAAAASUVORK5CYII=\u0022 data-src=\u0022https:\/\/avris.it\/image\/naked-after-place_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022647.34864300626\u0022\u003E\u003C\/span\u003E\n                \n            \u003C\/figure\u003E\n\u003Cfigure\u003E\n                \u003Cnoscript\u003E\n                    \u003Cimg src=\u0022https:\/\/avris.it\/image\/naked-after-submit_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u00221381.6666666667\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAkCAYAAAB8DZEQAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAGMklEQVRIiZWXu49cSRXGf6eq7qMf0z0z3Z6xkb32yAgk2AC0EhEkCBGw\/wABCcEGkBOQEbMBfwQiQUggLQsRiIAACRAIFrRazzK2sfFjPJ5H337ce6vqENx+zcyOMSepUt17zrnnq\/N9p1s+861f6UYnIbNKCIHJZMbebsIvfvgNyqqiKAo0KoPBNiKCiKCqrNviTEQA5ntQBRFwViB6z6RWhIAzisYIgDGGfq+PtWbpfDHB4vz4+ARjhH6\/T1EUdLvdeXJwiXjKWhAUiTVWK4QmqAAxRpyzlwJfMgHvAzFGQojLqgCcSywmRkBRIHoQVpWohv+dAGi3WlhrMcaQt\/LzSYpJTTt3TGYRK2DFEeeVTEPk4en4nMNFmID5c8UYQ+qS5mE14Va3hRVwvhxzVipooI4BjTVxuwvAg8dnvPf7fW7fuMbL0wlv3k7YaJv5ZTpSB6mrELHMakdiA8YqQYXEWujcRIzDqZ80X6QBjR6NFbFu7uD54WMOPvo1b7\/1TX7w3s\/46ckRuVMePpuSZhlfuDlCsjHEFCFhO59QmJq2zem2+nzvO+\/S29jExfUkwaOhIvp8Dkfkb\/uH\/OT93\/DhwSOsdRgR8laLYbfCaMHpKGW7HXH2jDOvRKNM4xSrngZlxYRqTKzGhHJMqMaEaoL6GQCJE06KKT\/\/3R8B8L4mKux0J8xCyle\/9m3yGGhnNc4anDGk4omxZBqUoAoILpbFGlyBGGuC7wCQOc9g0\/H8cEYdakARhCSDT7ee848\/\/5hrmzNMsKSpgEYSSRipYEOFzCnlfFUAETSiMaChRn0PgHFpGY0FjQ2DEWE2meBnQm09D54KW1nk3umQuzsFRje4lo\/p+AoFrGmUwMVqBKqoxlU1dQNXXdWcHR8jxpHmGaH2ILDbU6azHg9OHZndYG9zwo4oxz4gXogTyxtv3GLR+C5W43m\/xyZRDGgoAdgdbvH1L38JbIr3FaGu6bQzvnKnJksto1IoS0+Ihp1O4OUMNnLD2Fe0sj7GOkQEF+tJw3XVBjINaKgA+Nzd2\/zo+9+l1WqtCBgj\/zq4T97KGQ4GZFkGwLNnzwDo9Xrn31fFRT9dsVcjqBKjBxpZsdadE8Woig8eYwxFMSbPm3ZvVsE5d0kh3Bc\/v9dUwUK94LN3by2TpKk5J+HGGIaDIS5xpGm6lPiiGtHL+1R1TVVVdDqdpeRIjPGydl+wJocspf7Rw306GwNarRZJkpIkjuLFEbbTJkkSRARr7fID3PrAWQ0e5fzYaM4W1tvcxVpDlmUY04jpSTmD2QxjDVma0ev1liNCVNcrOY\/lvZP7\/PLBbxvoxBA18tbwTW5OuvS2dhAxdLod8ixlNGrUOkkT0iRZQgWs4HrVWL1oDw4f0U+65K0WeZYhIhzs\/5PBzs0lTKrQ7Tb34haOV43VT7Jtn2C72bJuVWWwewuNSpZlWHt+krpVuy0CfvKAWliMkSfFIV0NdLvN3MnznNOjJ+zcuINz7pLPa3XXRTs5ekl\/e+scH46LUxIsnU7nMk8W7fl61mD9+OlTRtMJ\/X6fVp6TpgnxbER27fqy2xpkmrgGVtg36\/r+\/L0stu12m1ae4+Y\/HECYpUJZlRRFQVVVLHgF4BaOq6C8MhHAcDhARBqJ8R5rLZvkuKRp3\/WuVFXMspeX6\/p+ta7jfG\/\/Yw5fvMCYhpAiwlFxRF3VhBAu+ZqLBwt2rydd2OLs+u4u21tbhBCo6xqArcGnCDFgjLn8kf8vGa86+\/f9j9i5cYc0TS69t2iF1ybjVWfZ1jZlWVLX\/tJ7ay28arl159dlkStK0mEf69zSx8j8jl9Fxo\/\/M+b9Pzy5MnDqDJWPVz5\/5+09WplFdFnXqpIPDk55590\/kTqhkxtCCIzGJVYCiXhORwXqZyTGkxnPyckxdVnQyZTMRE5OXjKbFkRfoRobgVz9aWm6ygfl5agidXA2aeZ6DJ6qLHHimU1n1PUUG0sIU6bFGcGPub43pN+xOKn56+PHRF+CRtx5Eq6xXiOqQuoMMQhRBPWQpRYnjnJmKacRa+b3qYqzhjRx\/P3Dg1VA9KrJCGgkeBhPAmigqio0VFRljdGKuq6pqppYT5tfOBr4ywf7RD8jxsD6JP0v8DmijnnKJUoAAAAASUVORK5CYII=\u0022 data-src=\u0022https:\/\/avris.it\/image\/naked-after-submit_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u00221381.6666666667\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","naked","naked adventure","naturism","webdevelopment","website","font","symfony","javascript","booster"],"hasMore":true,"image":"https:\/\/avris.it\/image\/naked-revamp_small.png","introLite":"\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/naked-revamp_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/naked-revamp_mini.png\u0022 alt=\u0022\u0022 width=\u0022240\u0022 height=\u0022161.70744403956\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\/naked-adventure-de.lite\u0022\u003E Naked Adventure\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. (screenshots before \u0026amp; after at the bottom)\u003C\/p\u003E","contentLite":"\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/naked-revamp_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/naked-revamp_mini.png\u0022 alt=\u0022\u0022 width=\u0022240\u0022 height=\u0022161.70744403956\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\/naked-adventure-de.lite\u0022\u003E Naked Adventure\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. (screenshots before \u0026amp; after at the bottom)\u003C\/p\u003E\n\u003Cp\u003EHere\u0027s an overview of 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\u003Ebased the project on \u003Ca href=\u0022\/projects\/avris-booster-quick-start-of-new-projects.lite\u0022\u003E Avris Booster: Quick start of new projects\u003C\/a\u003E, to take advantage of built-in features:\nuser management (including a passwordless approach to authentication \u2013 \u003Ca href=\u0022\/blog\/passwords-are-pass%C3%A9.lite\u0022\u003E Passwords are pass\u00e9\u003C\/a\u003E), push notifications, etc.\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, filled the excess of white spaces with content, making filters and maps more prominent,\u003C\/li\u003E\n\u003Cli\u003Ereplaced Google Maps with Apple Maps, because of privacy concerns (see: \u003Ca href=\u0022\/blog\/ungoogling.lite\u0022\u003E Ungoogling\u003C\/a\u003E, \u003Ca href=\u0022\/blog\/log-out-for-privacy.lite\u0022\u003E Log out for privacy\u003C\/a\u003E) \u2013 the website is now officially Google-free,\u003C\/li\u003E\n\u003Cli\u003Eremoved a couple of unnecessary and unused features:\n\u003Cul\u003E\n\u003Cli\u003Ethe homepage (now the user is shown the map right away \u2013 after all, the map is the whole point of the project),\u003C\/li\u003E\n\u003Cli\u003Ethe \u201dgeographic\u201d links (there\u0027s no separate map of e.g. German nude beaches anymore, it got integrated into the main map),\u003C\/li\u003E\n\u003Cli\u003Eseparate events section (now they show up together with places on the same map),\u003C\/li\u003E\n\u003Cli\u003Eforum (it wasn\u0027t used at all),\u003C\/li\u003E\n\u003Cli\u003Eadmin panel (now the buttons for admins are just integrated across the website),\u003C\/li\u003E\n\u003C\/ul\u003E\u003C\/li\u003E\n\u003Cli\u003Eimproved filters (for instance added filtering by name and location),\u003C\/li\u003E\n\u003Cli\u003Ethe process of submission of new steps isn\u0027t split into steps anymore: place info, review and description are finally just one single form,\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\/naked-before-home_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/naked-before-home_mini.png\u0022 alt=\u0022\u0022 width=\u0022240\u0022 height=\u0022286.83333333333\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003C\/figure\u003E\n\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/naked-before-map_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/naked-before-map_mini.png\u0022 alt=\u0022\u0022 width=\u0022240\u0022 height=\u0022227.80058651026\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003C\/figure\u003E\n\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/naked-before-place_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/naked-before-place_mini.png\u0022 alt=\u0022\u0022 width=\u0022240\u0022 height=\u0022223.16666666667\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003C\/figure\u003E\n\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/naked-before-submit_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/naked-before-submit_mini.png\u0022 alt=\u0022\u0022 width=\u0022240\u0022 height=\u0022202.99065420561\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\/naked-after-home_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/naked-after-home_mini.png\u0022 alt=\u0022\u0022 width=\u0022240\u0022 height=\u0022196.2\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003C\/figure\u003E\n\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/naked-after-place_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/naked-after-place_mini.png\u0022 alt=\u0022\u0022 width=\u0022240\u0022 height=\u0022161.83716075157\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003C\/figure\u003E\n\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/naked-after-submit_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/naked-after-submit_mini.png\u0022 alt=\u0022\u0022 width=\u0022240\u0022 height=\u0022345.41666666667\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003C\/figure\u003E\u003C\/p\u003E","words":262,"readTime":2,"lang":"en"}}},"projects\/avris-booster-quick-start-of-new-projects":{"key":"projects\/avris-booster-quick-start-of-new-projects","type":"article","published":true,"meta":{"createdAt":"2020-04-13T11:56:14+02:00","publishedAt":"2020-04-13T11:56:14+02:00","group":null,"links":[{"icon":"brands gitlab","colour":"primary","url":"https:\/\/gitlab.com\/Avris\/Booster","displayUrl":null}],"category":"projects","subcategory":null,"slug":"avris-booster-quick-start-of-new-projects"},"content":{"en":{"slug":"avris-booster-quick-start-of-new-projects","title":"Avris Booster: Quick start of new projects","intro":"\u003Cfigure\u003E\n                \u003Cnoscript\u003E\n                    \u003Cimg src=\u0022https:\/\/avris.it\/image\/booster_small.png\u0022 alt=\u0022\u0022 class=\u0022border-bottom\u0022 width=\u0022480\u0022 height=\u0022329.18322295806\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAYCAYAAACSuF9OAAAACXBIWXMAAA7EAAAOxAGVKw4bAAADQUlEQVRIib2WS3IjVRBFT75PValUalltdxA0joABMzbQO2MXLIGFsA5mDBgYogMCW2pZn\/pmMijZVskf2jbqO3tV73Pz3nyZT84+\/GjscDYbM52MABCBi49z8lFKVTUoRlU1mAmvgQicpo7SR9LoWa5Kmlbv\/v\/08y\/2xPpX4f1XM9IkPjmnrGo+\/r24I6Sqt4QuLi6o6hrvPJvtFucEJ47z828Yj8fPJlTVLWkS+PW3j\/zw\/dd0qvz+xyXfvn\/Ln38t+O78lHo35wZhf4M8z4lJQvCe0ShDzXh39o4Yw73DPgcicLlYcTIZcblYY2ZkaaBuWoJ3\/HO1YjrJhmvM7Fah9WpF23VMp9MXETiEasenT0tEBBFH13WIgHMOU6OYTHoXnLtdMwg9zTKsalksN2AK9FydGKqKSUQwTBtEBCSCtYiAqhJjpKkbvPcYRpam1G3H7GT2gHwQgkdVh5\/3c6jrOjbbhs56Am+nY8x66W9wOO6\/WU\/wAOuypaxaVA3DwNjNM5pOSHzHmyIj2UuJgWVlWXK1LNmWNUn0JF5Isgwzw4lgXcVs9kC0j0BV2Yv3vkK+V2hg2R4fAJLgaWNABNq2YnttZGmkGCVk+RsO5z8FEcH7x+vWjbL7ew5yyHtPEhpUHeI8qp7MC1WjbKs+b\/JR8tmEXoJ7ls3nc5qmoSgK\/E5Skf4mqGpv305iMzBTnI90JjgUrLuLNgSKongWoYFlznmyLCeElqrzBBzgOTt5flG8wXMshgPLzBQ1o25aRnkkTZIHb88xEfYPNDNMW9qm5HpRIidTkpggcty82ce9OtS2HWZ9sUrT9MsrtD9YLq9Zr1eI8wgwnU7J8\/yoBA7jHViWJJG6yTBTzOB6tcKHgHPHU8mJGzTvwS0zoOtafAhkSSTEBCfutt\/ckD9sFcIrCAuPF0ZVpW1a6rphs17vlBImxRhxDhGH7DZQVUKIjEYZzvmXEzpAOExaw26T2oknphFxDuc8zjnG49ED27zm0SkDtQeWCeyqshBCwtnZ6X07\/u8H71OWhRDJ8xwRoSgmRzn\/vzDoZavVirZt6bq+f81mJ1+GxGOWmRlX8zkC5OMx680GVDHxOOeP1un3OfwL1QqaGbIjT+wAAAAASUVORK5CYII=\u0022 data-src=\u0022https:\/\/avris.it\/image\/booster_small.png\u0022 alt=\u0022\u0022 class=\u0022border-bottom\u0022 width=\u0022480\u0022 height=\u0022329.18322295806\u0022\u003E\u003C\/span\u003E\n                \n            \u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EI got super annoyed having to set up all the dependencies for each project every time I started one,\nand especially implementing user management... Log in, register, confirm email, forgot password,\nMFA, change email, impersonate, manage avatars, over and over again, booooooring!\u003C\/p\u003E\n\u003Cp\u003ESo here it is: a template for quickstarting new projects,\nwith all of the above (and more!) included out of the box!\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\/booster_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022658.36644591611\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAYCAYAAACSuF9OAAAACXBIWXMAAA7EAAAOxAGVKw4bAAADQUlEQVRIib2WS3IjVRBFT75PValUalltdxA0joABMzbQO2MXLIGFsA5mDBgYogMCW2pZn\/pmMijZVskf2jbqO3tV73Pz3nyZT84+\/GjscDYbM52MABCBi49z8lFKVTUoRlU1mAmvgQicpo7SR9LoWa5Kmlbv\/v\/08y\/2xPpX4f1XM9IkPjmnrGo+\/r24I6Sqt4QuLi6o6hrvPJvtFucEJ47z828Yj8fPJlTVLWkS+PW3j\/zw\/dd0qvz+xyXfvn\/Ln38t+O78lHo35wZhf4M8z4lJQvCe0ShDzXh39o4Yw73DPgcicLlYcTIZcblYY2ZkaaBuWoJ3\/HO1YjrJhmvM7Fah9WpF23VMp9MXETiEasenT0tEBBFH13WIgHMOU6OYTHoXnLtdMwg9zTKsalksN2AK9FydGKqKSUQwTBtEBCSCtYiAqhJjpKkbvPcYRpam1G3H7GT2gHwQgkdVh5\/3c6jrOjbbhs56Am+nY8x66W9wOO6\/WU\/wAOuypaxaVA3DwNjNM5pOSHzHmyIj2UuJgWVlWXK1LNmWNUn0JF5Isgwzw4lgXcVs9kC0j0BV2Yv3vkK+V2hg2R4fAJLgaWNABNq2YnttZGmkGCVk+RsO5z8FEcH7x+vWjbL7ew5yyHtPEhpUHeI8qp7MC1WjbKs+b\/JR8tmEXoJ7ls3nc5qmoSgK\/E5Skf4mqGpv305iMzBTnI90JjgUrLuLNgSKongWoYFlznmyLCeElqrzBBzgOTt5flG8wXMshgPLzBQ1o25aRnkkTZIHb88xEfYPNDNMW9qm5HpRIidTkpggcty82ce9OtS2HWZ9sUrT9MsrtD9YLq9Zr1eI8wgwnU7J8\/yoBA7jHViWJJG6yTBTzOB6tcKHgHPHU8mJGzTvwS0zoOtafAhkSSTEBCfutt\/ckD9sFcIrCAuPF0ZVpW1a6rphs17vlBImxRhxDhGH7DZQVUKIjEYZzvmXEzpAOExaw26T2oknphFxDuc8zjnG49ED27zm0SkDtQeWCeyqshBCwtnZ6X07\/u8H71OWhRDJ8xwRoSgmRzn\/vzDoZavVirZt6bq+f81mJ1+GxGOWmRlX8zkC5OMx680GVDHxOOeP1un3OfwL1QqaGbIjT+wAAAAASUVORK5CYII=\u0022 data-src=\u0022https:\/\/avris.it\/image\/booster_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022658.36644591611\u0022\u003E\u003C\/span\u003E\n                \n            \u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EI got super annoyed having to set up all the dependencies for each project every time I started one,\nand especially implementing user management... Log in, register, confirm email, forgot password,\nMFA, change email, impersonate, manage avatars, over and over again, booooooring!\u003C\/p\u003E\n\u003Cp\u003ESo here it is: a template for quickstarting new projects,\nwith all of the above (and more!) included out of the box!\u003C\/p\u003E\u003Csvg xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022 style=\u0022display: none;\u0022\u003E\u003C\/svg\u003E","tags":["booster","quickstart","symfony","php","webpack","bootstrap","javascript","css","user management","template"],"hasMore":false,"image":"https:\/\/avris.it\/image\/booster_small.png","introLite":"\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/booster_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/booster_mini.png\u0022 alt=\u0022\u0022 width=\u0022240\u0022 height=\u0022164.59161147903\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EI got super annoyed having to set up all the dependencies for each project every time I started one,\nand especially implementing user management... Log in, register, confirm email, forgot password,\nMFA, change email, impersonate, manage avatars, over and over again, booooooring!\u003C\/p\u003E\n\u003Cp\u003ESo here it is: a template for quickstarting new projects,\nwith all of the above (and more!) included out of the box!\u003C\/p\u003E","contentLite":"\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/booster_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/booster_mini.png\u0022 alt=\u0022\u0022 width=\u0022240\u0022 height=\u0022164.59161147903\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EI got super annoyed having to set up all the dependencies for each project every time I started one,\nand especially implementing user management... Log in, register, confirm email, forgot password,\nMFA, change email, impersonate, manage avatars, over and over again, booooooring!\u003C\/p\u003E\n\u003Cp\u003ESo here it is: a template for quickstarting new projects,\nwith all of the above (and more!) included out of the box!\u003C\/p\u003E","words":64,"readTime":null,"lang":"en"}}},"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"}}},"blog\/technology\/reducing-website-size-by-a-half-by-optimising-bootstrap-and-fontawesome":{"key":"blog\/technology\/reducing-website-size-by-a-half-by-optimising-bootstrap-and-fontawesome","type":"article","published":true,"meta":{"createdAt":"2020-01-10T11:53:15+01:00","publishedAt":"2020-01-10T11:53:15+01:00","group":null,"links":[{"icon":"box-alt","colour":"primary","url":"https:\/\/packagist.org\/packages\/avris\/fontawesome-optimiser","displayUrl":"avris\/fontawesome-optimiser"}],"category":"blog","subcategory":"technology","slug":"reducing-website-size-by-a-half-by-optimising-bootstrap-and-fontawesome"},"content":{"en":{"slug":"reducing-website-size-by-a-half-by-optimising-bootstrap-and-fontawesome","title":"Reducing website size by a half by optimising Bootstrap and FontAwesome","intro":"\u003Cp\u003EMy new blog, despite being simple and freshly rewritten, loads way too much crap...\nSo I took a few moments to optimise it a bit \u2013 and I ended up with almost 50% reduction in resources size\nin just two steps!\u003C\/p\u003E\u003Csvg xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022 style=\u0022display: none;\u0022\u003E\u003C\/svg\u003E","content":"\u003Cp\u003EMy new blog, despite being simple and freshly rewritten, loads way too much crap...\nSo I took a few moments to optimise it a bit \u2013 and I ended up with almost 50% reduction in resources size\nin just two steps!\u003C\/p\u003E\n\u003Ch3\u003EBootstrap\u003C\/h3\u003E\n\u003Cp\u003E\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 is awesome. But it\u2019s also a lot.\nModals? Popovers? Tooltips? Badges? Toasts? I don\u2019t use any of that!\u003C\/p\u003E\n\u003Cp\u003EI already don\u2019t include any of Bootstrap\u2019s JavaScripts, but I should definitely clean up its CSS.\u003C\/p\u003E\n\u003Cp\u003ESo instead of including\u003C\/p\u003E\n\u003Cpre\u003E\u003Ccode class=\u0022hljs scss border\u0022\u003E\u003Cspan class=\u0022hljs-keyword\u0022\u003E@import\u003C\/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022~bootstrap\u0022\u003C\/span\u003E\n\u003C\/code\u003E\u003C\/pre\u003E\n\u003Cp\u003EI went to its source and copy-pasted the modules that it was loading over there,\ncommenting out the ones I don\u2019t need:\u003C\/p\u003E\n\u003Cpre\u003E\u003Ccode class=\u0022hljs scss border\u0022\u003E\u003Cspan class=\u0022hljs-keyword\u0022\u003E@import\u003C\/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022~bootstrap\/scss\/functions\u0022\u003C\/span\u003E;\n\u003Cspan class=\u0022hljs-keyword\u0022\u003E@import\u003C\/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022~bootstrap\/scss\/variables\u0022\u003C\/span\u003E;\n\u003Cspan class=\u0022hljs-keyword\u0022\u003E@import\u003C\/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022~bootstrap\/scss\/mixins\u0022\u003C\/span\u003E;\n\u003Cspan class=\u0022hljs-keyword\u0022\u003E@import\u003C\/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022~bootstrap\/scss\/root\u0022\u003C\/span\u003E;\n\u003Cspan class=\u0022hljs-keyword\u0022\u003E@import\u003C\/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022~bootstrap\/scss\/reboot\u0022\u003C\/span\u003E;\n\u003Cspan class=\u0022hljs-keyword\u0022\u003E@import\u003C\/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022~bootstrap\/scss\/type\u0022\u003C\/span\u003E;\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/images\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-keyword\u0022\u003E@import\u003C\/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022~bootstrap\/scss\/code\u0022\u003C\/span\u003E;\n\u003Cspan class=\u0022hljs-keyword\u0022\u003E@import\u003C\/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022~bootstrap\/scss\/grid\u0022\u003C\/span\u003E;\n\u003Cspan class=\u0022hljs-keyword\u0022\u003E@import\u003C\/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022~bootstrap\/scss\/tables\u0022\u003C\/span\u003E;\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/forms\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-keyword\u0022\u003E@import\u003C\/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022~bootstrap\/scss\/buttons\u0022\u003C\/span\u003E;\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/transitions\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/dropdown\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-keyword\u0022\u003E@import\u003C\/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022~bootstrap\/scss\/button-group\u0022\u003C\/span\u003E;\n\u003Cspan class=\u0022hljs-keyword\u0022\u003E@import\u003C\/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022~bootstrap\/scss\/input-group\u0022\u003C\/span\u003E;\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/custom-forms\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/nav\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/navbar\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-keyword\u0022\u003E@import\u003C\/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022~bootstrap\/scss\/card\u0022\u003C\/span\u003E;\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/breadcrumb\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/pagination\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/badge\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/jumbotron\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-keyword\u0022\u003E@import\u003C\/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022~bootstrap\/scss\/alert\u0022\u003C\/span\u003E;\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/progress\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/media\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/list-group\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/close\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/toasts\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/modal\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/tooltip\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/popover\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/carousel\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/spinners\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-keyword\u0022\u003E@import\u003C\/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022~bootstrap\/scss\/utilities\u0022\u003C\/span\u003E;\n\u003Cspan class=\u0022hljs-keyword\u0022\u003E@import\u003C\/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022~bootstrap\/scss\/print\u0022\u003C\/span\u003E;\n\u003C\/code\u003E\u003C\/pre\u003E\n\u003Cp\u003EThe only issue is that I do use \u003Ccode\u003Eforms.scss\u003C\/code\u003E \u003Cem\u003Ea bit\u003C\/em\u003E.\nThere is a search form in the header that has its \u003Ccode\u003E\u0026lt;input\u0026gt;\u003C\/code\u003E field styled.\u003C\/p\u003E\n\u003Cp\u003ESo I just inspected that element in Opera and pretty much just copy-pasted the three relevant selectors.\u003C\/p\u003E\n\u003Cp\u003EBum! Starting off with a minified CSS file of \u003Cstrong\u003E244 KB\u003C\/strong\u003E, now it\u2019s down to \u003Cstrong\u003E184 KB\u003C\/strong\u003E.\nA third of its weight is now gone.\u003C\/p\u003E\n\u003Cp\u003EBut that\u2019s just the first step.\u003C\/p\u003E\n\u003Ch3\u003EFontAwesome\u003C\/h3\u003E\n\u003Cp\u003EThe real big deal in terms of the website weight were the \u003Ca href=\u0022https:\/\/fontawesome.com\/icons\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 FontAwesome icons\u003C\/a\u003E.\nThere\u2019s thousands of icons included, but I only use a dozen \u2013 so why do I make visitors download them all?\u003C\/p\u003E\n\u003Cp\u003EYou can load FontAwesome in a number of different ways. One of them are \u003Ca href=\u0022https:\/\/fontawesome.com\/how-to-use\/on-the-web\/advanced\/svg-sprites\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 SVG sprites\u003C\/a\u003E.\nYou can include the definitions of the icons in a form of SVG \u003Ccode\u003E\u0026lt;symbols\u0026gt;\u003C\/code\u003Es, and whenever they\u2019re used,\njust use a \u003Ccode\u003E\u0026lt;use\u0026gt;\u003C\/code\u003E tag to reference it.\u003C\/p\u003E\n\u003Cp\u003ESo a wrote a simple service (plus a Twig extension) that would do exactly that:\u003C\/p\u003E\n\u003Cul\u003E\n\u003Cli\u003Eput \u003Ccode\u003E\u0026lt;use\u0026gt;\u003C\/code\u003E tags wherever an icon should be displayed,\u003C\/li\u003E\n\u003Cli\u003Ekeep track of the icons used,\u003C\/li\u003E\n\u003Cli\u003Edump the definions of the used icons at the bottom of the page.\u003C\/li\u003E\n\u003C\/ul\u003E\n\u003Cp\u003EI just had to add some CSS to display the SVG icons the same way as webfonts\nin terms of size, position and using the color of the surrounding text:\u003C\/p\u003E\n\u003Cpre\u003E\u003Ccode class=\u0022hljs css border\u0022\u003E\u003Cspan class=\u0022hljs-selector-class\u0022\u003E.icon\u003C\/span\u003E {\n    \u003Cspan class=\u0022hljs-attribute\u0022\u003Ewidth\u003C\/span\u003E: \u003Cspan class=\u0022hljs-number\u0022\u003E1.1em\u003C\/span\u003E;\n    \u003Cspan class=\u0022hljs-attribute\u0022\u003Eheight\u003C\/span\u003E: \u003Cspan class=\u0022hljs-number\u0022\u003E1.1em\u003C\/span\u003E;\n    \u003Cspan class=\u0022hljs-attribute\u0022\u003Evertical-align\u003C\/span\u003E: -.\u003Cspan class=\u0022hljs-number\u0022\u003E125em\u003C\/span\u003E;\n    \u003Cspan class=\u0022hljs-attribute\u0022\u003Efill\u003C\/span\u003E: currentColor;\n}\n\u003C\/code\u003E\u003C\/pre\u003E\n\u003Cp\u003EEt voil\u00e0!\nThe homepage of my blog went down from \u003Cstrong\u003E765 KB\u003C\/strong\u003E at the beginning,\nto \u003Cstrong\u003E704 KB\u003C\/strong\u003E after the first step, to \u003Cstrong\u003E393 KB\u003C\/strong\u003E now!\u003C\/p\u003E\n\u003Cfigure\u003E\n                \u003Cnoscript\u003E\n                    \u003Cimg src=\u0022https:\/\/avris.it\/image\/avris-optimised_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022800\u0022 height=\u0022200\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAJCAYAAABaMo5wAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAB3UlEQVQ4ja2U227bMBBEz\/IiUqLapu7\/f2HdGEV0gcXL9kG24rQIkKKdF2KXFDU7M6CoqnKDqiIix3rvAeTrFR\/Cm\/3HFXh372\/OiKrq+XzGe0+tFRFBRGitATAMAwClFEophBDYtg2AruvIOWOMwTkHQG1KLYXWKiEGtuuGAjEEDqiCCKUqzgqX9SfBRr5++rwTmueZeZ4ppWCtJcbIuq6oKqqKMYZxTMzzjDZFb5OmYWBeFgRwzuG7jvPSMCI0bYgItTaitwA8BWG7PCPOA0o8nQ6OtTbGcURaa3qfvpQCgDHmUCWldFh3vV6JMZJzptZKjJFSCiKCtfbh8sq2bfR9T86Z1hrhQaHSFGfkqHPemKl8i+Ou0OVyYV3Xg1BKuxp368QYhr5nXVceMY4jLy8vdF1HrZUuDvyYC8YoqoIR0JtDQ2dJZMpN5fD0BdN1h4XWOVJKrwrdQ\/yvEHYSH+0fuJFyANM04b0\/rLqjtfZHb\/\/2NVsfoagoclQ7NQWaghHINeN9R+8cTkTw3jNPE7XtgYx9z7IsiEBrijWGISWmaXqjZEqJZVn2H4nQ9z3f54rIqyKlNoKziMApGrbnZzAGjDlC7a2n5oJE2TP0OPl779D\/eGMezxz6\/Vb\/AmBJWhxIiYZ2AAAAAElFTkSuQmCC\u0022 data-src=\u0022https:\/\/avris.it\/image\/avris-optimised_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022800\u0022 height=\u0022200\u0022\u003E\u003C\/span\u003E\n                \n            \u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EBtw, I\u2019ve put my little helper into \u003Ca href=\u0022https:\/\/packagist.org\/packages\/avris\/fontawesome-optimiser\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 a library\u003C\/a\u003E,\nif you want to check it out.\u003C\/p\u003E\n\u003Cp\u003EThere\u2019s caveats though...\nSVG is heavy. The two \u003Ccode\u003E.woff2\u003C\/code\u003E files I was using are \u003Cstrong\u003E261 KB\u003C\/strong\u003E overall,\nwhile the corresponding two sprites are \u003Cstrong\u003E2.1 MB\u003C\/strong\u003E.\nBut if I filter their content to just the icons I actually use (which is way simpler to do in SVG than in webfonts),\nit goes down to just \u003Cstrong\u003E44 KB\u003C\/strong\u003E!\nSo if your website is using a looot of fonts, you\u2019ll probably be better of generating a custom webfont.\u003C\/p\u003E\n\u003Cp\u003EThere can also be issues related to warm caches possibly circumventing the Optimiser,\nwith data that includes new icons being loaded dynamically in JS (which I don\u2019t do),\nwith the increased execution time (which doesn\u2019t bother me since I use an HTTP cache),\netc. Still, in many cases this trick can be very useful. Like mine.\u003C\/p\u003E\n\u003Cp\u003ESwitching from webfonts to dynamically filtered SVG sprites\nnot only removed the need for two requests \u003Ccode\u003E.woff2\u003C\/code\u003E files,\nbut also the need for the CSS that maps class names to font glyphs.\nMy CSS file went down again, from \u003Cstrong\u003E184 KB\u003C\/strong\u003E to just \u003Cstrong\u003E96 KB\u003C\/strong\u003E.\u003C\/p\u003E\n\u003Ch3\u003ESumming up\u003C\/h3\u003E\n\u003Cp\u003ESo here I am: having spent not even a full evening on it, doing optimisations as simple as they can get,\nand ending up with the website trimmed of \u003Cstrong\u003Ehalf\u003C\/strong\u003E of its fat.\u003C\/p\u003E\n\u003Cp\u003ENice \ud83d\ude0e\u003C\/p\u003E\u003Csvg xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022 style=\u0022display: none;\u0022\u003E\u003C\/svg\u003E","tags":["website","web development","javascript","scss","css","bootstrap","fontawesome","svg","optimisation"],"hasMore":true,"image":null,"introLite":"\u003Cp\u003EMy new blog, despite being simple and freshly rewritten, loads way too much crap...\nSo I took a few moments to optimise it a bit \u2013 and I ended up with almost 50% reduction in resources size\nin just two steps!\u003C\/p\u003E","contentLite":"\u003Cp\u003EMy new blog, despite being simple and freshly rewritten, loads way too much crap...\nSo I took a few moments to optimise it a bit \u2013 and I ended up with almost 50% reduction in resources size\nin just two steps!\u003C\/p\u003E\n\u003Ch3\u003EBootstrap\u003C\/h3\u003E\n\u003Cp\u003E\u003Ca href=\u0022https:\/\/getbootstrap.com\/\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E Bootstrap\u003C\/a\u003E is awesome. But it\u2019s also a lot.\nModals? Popovers? Tooltips? Badges? Toasts? I don\u2019t use any of that!\u003C\/p\u003E\n\u003Cp\u003EI already don\u2019t include any of Bootstrap\u2019s JavaScripts, but I should definitely clean up its CSS.\u003C\/p\u003E\n\u003Cp\u003ESo instead of including\u003C\/p\u003E\n\u003Cpre\u003E\u003Ccode class=\u0022language-scss\u0022\u003E@import \u0022~bootstrap\u0022\u003C\/code\u003E\u003C\/pre\u003E\n\u003Cp\u003EI went to its source and copy-pasted the modules that it was loading over there,\ncommenting out the ones I don\u2019t need:\u003C\/p\u003E\n\u003Cpre\u003E\u003Ccode class=\u0022language-scss\u0022\u003E@import \u0022~bootstrap\/scss\/functions\u0022;\n@import \u0022~bootstrap\/scss\/variables\u0022;\n@import \u0022~bootstrap\/scss\/mixins\u0022;\n@import \u0022~bootstrap\/scss\/root\u0022;\n@import \u0022~bootstrap\/scss\/reboot\u0022;\n@import \u0022~bootstrap\/scss\/type\u0022;\n\/\/@import \u0022~bootstrap\/scss\/images\u0022;\n@import \u0022~bootstrap\/scss\/code\u0022;\n@import \u0022~bootstrap\/scss\/grid\u0022;\n@import \u0022~bootstrap\/scss\/tables\u0022;\n\/\/@import \u0022~bootstrap\/scss\/forms\u0022;\n@import \u0022~bootstrap\/scss\/buttons\u0022;\n\/\/@import \u0022~bootstrap\/scss\/transitions\u0022;\n\/\/@import \u0022~bootstrap\/scss\/dropdown\u0022;\n@import \u0022~bootstrap\/scss\/button-group\u0022;\n@import \u0022~bootstrap\/scss\/input-group\u0022;\n\/\/@import \u0022~bootstrap\/scss\/custom-forms\u0022;\n\/\/@import \u0022~bootstrap\/scss\/nav\u0022;\n\/\/@import \u0022~bootstrap\/scss\/navbar\u0022;\n@import \u0022~bootstrap\/scss\/card\u0022;\n\/\/@import \u0022~bootstrap\/scss\/breadcrumb\u0022;\n\/\/@import \u0022~bootstrap\/scss\/pagination\u0022;\n\/\/@import \u0022~bootstrap\/scss\/badge\u0022;\n\/\/@import \u0022~bootstrap\/scss\/jumbotron\u0022;\n@import \u0022~bootstrap\/scss\/alert\u0022;\n\/\/@import \u0022~bootstrap\/scss\/progress\u0022;\n\/\/@import \u0022~bootstrap\/scss\/media\u0022;\n\/\/@import \u0022~bootstrap\/scss\/list-group\u0022;\n\/\/@import \u0022~bootstrap\/scss\/close\u0022;\n\/\/@import \u0022~bootstrap\/scss\/toasts\u0022;\n\/\/@import \u0022~bootstrap\/scss\/modal\u0022;\n\/\/@import \u0022~bootstrap\/scss\/tooltip\u0022;\n\/\/@import \u0022~bootstrap\/scss\/popover\u0022;\n\/\/@import \u0022~bootstrap\/scss\/carousel\u0022;\n\/\/@import \u0022~bootstrap\/scss\/spinners\u0022;\n@import \u0022~bootstrap\/scss\/utilities\u0022;\n@import \u0022~bootstrap\/scss\/print\u0022;\u003C\/code\u003E\u003C\/pre\u003E\n\u003Cp\u003EThe only issue is that I do use \u003Ccode\u003Eforms.scss\u003C\/code\u003E \u003Cem\u003Ea bit\u003C\/em\u003E.\nThere is a search form in the header that has its \u003Ccode\u003E\u0026lt;input\u0026gt;\u003C\/code\u003E field styled.\u003C\/p\u003E\n\u003Cp\u003ESo I just inspected that element in Opera and pretty much just copy-pasted the three relevant selectors.\u003C\/p\u003E\n\u003Cp\u003EBum! Starting off with a minified CSS file of \u003Cstrong\u003E244 KB\u003C\/strong\u003E, now it\u2019s down to \u003Cstrong\u003E184 KB\u003C\/strong\u003E.\nA third of its weight is now gone.\u003C\/p\u003E\n\u003Cp\u003EBut that\u2019s just the first step.\u003C\/p\u003E\n\u003Ch3\u003EFontAwesome\u003C\/h3\u003E\n\u003Cp\u003EThe real big deal in terms of the website weight were the \u003Ca href=\u0022https:\/\/fontawesome.com\/icons\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E FontAwesome icons\u003C\/a\u003E.\nThere\u2019s thousands of icons included, but I only use a dozen \u2013 so why do I make visitors download them all?\u003C\/p\u003E\n\u003Cp\u003EYou can load FontAwesome in a number of different ways. One of them are \u003Ca href=\u0022https:\/\/fontawesome.com\/how-to-use\/on-the-web\/advanced\/svg-sprites\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E SVG sprites\u003C\/a\u003E.\nYou can include the definitions of the icons in a form of SVG \u003Ccode\u003E\u0026lt;symbols\u0026gt;\u003C\/code\u003Es, and whenever they\u2019re used,\njust use a \u003Ccode\u003E\u0026lt;use\u0026gt;\u003C\/code\u003E tag to reference it.\u003C\/p\u003E\n\u003Cp\u003ESo a wrote a simple service (plus a Twig extension) that would do exactly that:\u003C\/p\u003E\n\u003Cul\u003E\n\u003Cli\u003Eput \u003Ccode\u003E\u0026lt;use\u0026gt;\u003C\/code\u003E tags wherever an icon should be displayed,\u003C\/li\u003E\n\u003Cli\u003Ekeep track of the icons used,\u003C\/li\u003E\n\u003Cli\u003Edump the definions of the used icons at the bottom of the page.\u003C\/li\u003E\n\u003C\/ul\u003E\n\u003Cp\u003EI just had to add some CSS to display the SVG icons the same way as webfonts\nin terms of size, position and using the color of the surrounding text:\u003C\/p\u003E\n\u003Cpre\u003E\u003Ccode class=\u0022language-css\u0022\u003E.icon {\n    width: 1.1em;\n    height: 1.1em;\n    vertical-align: -.125em;\n    fill: currentColor;\n}\u003C\/code\u003E\u003C\/pre\u003E\n\u003Cp\u003EEt voil\u00e0!\nThe homepage of my blog went down from \u003Cstrong\u003E765 KB\u003C\/strong\u003E at the beginning,\nto \u003Cstrong\u003E704 KB\u003C\/strong\u003E after the first step, to \u003Cstrong\u003E393 KB\u003C\/strong\u003E now!\u003C\/p\u003E\n\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/avris-optimised_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/avris-optimised_mini.png\u0022 alt=\u0022\u0022 width=\u0022240\u0022 height=\u002260\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EBtw, I\u2019ve put my little helper into \u003Ca href=\u0022https:\/\/packagist.org\/packages\/avris\/fontawesome-optimiser\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E a library\u003C\/a\u003E,\nif you want to check it out.\u003C\/p\u003E\n\u003Cp\u003EThere\u2019s caveats though...\nSVG is heavy. The two \u003Ccode\u003E.woff2\u003C\/code\u003E files I was using are \u003Cstrong\u003E261 KB\u003C\/strong\u003E overall,\nwhile the corresponding two sprites are \u003Cstrong\u003E2.1 MB\u003C\/strong\u003E.\nBut if I filter their content to just the icons I actually use (which is way simpler to do in SVG than in webfonts),\nit goes down to just \u003Cstrong\u003E44 KB\u003C\/strong\u003E!\nSo if your website is using a looot of fonts, you\u2019ll probably be better of generating a custom webfont.\u003C\/p\u003E\n\u003Cp\u003EThere can also be issues related to warm caches possibly circumventing the Optimiser,\nwith data that includes new icons being loaded dynamically in JS (which I don\u2019t do),\nwith the increased execution time (which doesn\u2019t bother me since I use an HTTP cache),\netc. Still, in many cases this trick can be very useful. Like mine.\u003C\/p\u003E\n\u003Cp\u003ESwitching from webfonts to dynamically filtered SVG sprites\nnot only removed the need for two requests \u003Ccode\u003E.woff2\u003C\/code\u003E files,\nbut also the need for the CSS that maps class names to font glyphs.\nMy CSS file went down again, from \u003Cstrong\u003E184 KB\u003C\/strong\u003E to just \u003Cstrong\u003E96 KB\u003C\/strong\u003E.\u003C\/p\u003E\n\u003Ch3\u003ESumming up\u003C\/h3\u003E\n\u003Cp\u003ESo here I am: having spent not even a full evening on it, doing optimisations as simple as they can get,\nand ending up with the website trimmed of \u003Cstrong\u003Ehalf\u003C\/strong\u003E of its fat.\u003C\/p\u003E\n\u003Cp\u003ENice \ud83d\ude0e\u003C\/p\u003E","words":752,"readTime":4,"lang":"en"}}},"blog\/technology\/redesigning-a-website-stos\u0142owia":{"key":"blog\/technology\/redesigning-a-website-stos\u0142owia","type":"article","published":true,"meta":{"createdAt":"2018-08-24T15:23:40+02:00","publishedAt":"2018-08-24T15:22:00+02:00","group":"redesign","category":"blog","subcategory":"technology","slug":"redesigning-a-website-stos\u0142owia"},"content":{"en":{"slug":"redesigning-a-website-stos\u0142owia","title":"Redesigning  a website: Stos\u0142owia","intro":"\u003Cfigure\u003E\n                \u003Cnoscript\u003E\n                    \u003Cimg src=\u0022https:\/\/avris.it\/image\/stoslowia-redesign_small.png\u0022 alt=\u0022\u0022 class=\u0022border-bottom\u0022 width=\u0022480\u0022 height=\u0022299.375\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAWCAYAAACosj4+AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAFPElEQVRIiX2Wy28cxxHGf1Xd89ql+RTNWJYjSrIs2TBiGHAeOgQ555\/KNfApyF+US2zlZOQSCApgPSgnlB0RJJfk7s6ju3KY2eGMKLqAvUx11X791VdVLTFGo7PnL5\/x3XffEhaQe8\/N2\/vs3b1DM1\/w34MDZifHzMOcqql59Ovfs3\/7DgBN01BVFd57zPp0qCp1XXN2cUFV1WRJgqrinOPvjx\/zzbePyYqCIi+Yz8+5u7+PF5E+wZOn\/+Lrv37NJC3YTTe4tX+P\/U8fUs2XvHj5bw6PnnHRnHP4wwl\/\/tNfuLN\/FwAR6X8AZsarV6\/Y2dnh6dOniAgbG5tcOAcGm5vrfP7ZZ7x4+ZLlcs4nH9\/l0e8ekaUpfnijvV\/s8dVXv8F5xWfCrc0Pufn+B5T1ET81KfduPiDWxsP7gb3dvREbQ2uahtlsxtbWFr+8fRsQpANa1RXHx6c4ifz2y19x\/8GnZFlGjJGyLJFhyaoQWdaRECOpgmp762iQKoQQCCgiQuodTltGQgijkq1+IQRCCCRJMgIcY6Cqao6Oj1lfew91StLF+uFBiQFtShSwCDiHqEIIlGZ453ASwQATwPWxQ7ZW5VNVkiQZ+VZAi6LgVlHQNA0xGs4pIGMNmSg1nsILdTQaA4lGFXV1gBANMUMd+EFsmqY9E2ZGHYzEXfpHF\/cZP1Xn\/GP2gj\/uPmDDZ5c+G8CvqpL5fHGlU1qa4+jbZDLpATRNg5mNAL348ZAb023yNMFhNM4IZmgIeC80qmSaYmYMSRkBKptI3QSK1BMGeq0jTDw0BjGCCHgF7RK9C9A8BFKEaIKzgBMDFdCRSvoSr2zUZRIbQrngvGwPmRnOOWKMnDHWyWQyQfw4ee834+L1a9KtLVLvMaD6\/jkne9uEGNje3gbgoD7kA7\/Lmk4uAY001AluCMbMrgy8lWCHscObGlACP56crDy89+FNXFVRLSveHL5BVdnJ1lnbmlxlaAVAfIKfbuClY7dr6zoKmXbtLIoBKFfqP2RpUkxQ105lDLI8Q1rUiEjP\/CpmhWHMeWgI8wvCW7cWEaoY+0QArijAuVH4Ckw0gzxBnMPakcjfTv\/DH9JdinyC0zbOXs8wXyJrWR87FnVZUlVV\/werDptOp\/ycvUvUBwcH7Ny40RWsHQvHxycg4Dvt5VlOUeTXixrnCV4ofDudzdqOmi1rcgfRIEQQMVLv+0n9NkNtKs\/pySlI+31jY4M8z6jqGosG0o6ZoshHcVdKZss588GnFUsXgzkkIvjJBKfjlTC06WSKOu0KBlmasgwleZ73eZ8vXuGiZ00vKzACpKp470fUiwghBGKnoRXd7i39DC1ahBTEda8A4J+LJ3w0fx\/nPd55ROBOdotCi1HsqO0DQoVDDZq2NqgYlSkeQwzqYEQznDfcNW2vKGdHMxBhe2sLEeGL\/CHzuKCqKqrY6lRUKYpirKERQxbRpqQO3QEzojo81tVZiKHpfNeXC0CdQ1WZnZ1hZkynU9I0Jc9zRFqGq6q+MjrG2x5G29l737\/wVoHeXx3977I8yxEV0q78SZIwOz1HRNlYX8cCzP4X0BuBYk0vAY2eBuqoJSHRiDqH0ZZxWdbte8ggli3dRZbir51DkWSakKYphiEIT8pnfOT3WCwWlEdLwCjWC\/Lp2rjLRqsjNFDNqYfUd122fKvLLPFXdtlQQ0evj9jc3Ox9n6\/d56K6IE0TMEjTpGf72tXhvSfPc1xX\/5U1TdPvr1UCVf3Z1ZFlGYvFEhEQUSZFwBJHmraL1DnHs7M33CtSpi7tMfwfMXi5tPgkQxcAAAAASUVORK5CYII=\u0022 data-src=\u0022https:\/\/avris.it\/image\/stoslowia-redesign_small.png\u0022 alt=\u0022\u0022 class=\u0022border-bottom\u0022 width=\u0022480\u0022 height=\u0022299.375\u0022\u003E\u003C\/span\u003E\n                \n            \u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EThere is a website I\u2019ve created many years ago, \u003Ca href=\u0022https:\/\/stoslowia.avris.it\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 Stos\u0142owia\u003C\/a\u003E (Polish only), which collects stories of up to a hundred words. It never got any users, but I didn\u2019t really care to promote it in any way either.\u003C\/p\u003E\n\u003Cp\u003ELast week I\u2019ve decided to rewrite it from scratch, because so many things were wrong about it \u2013 from an ancient backend in plain PHP with hardcoded credentials and no separation of concerns, to login with Facebook (and only Facebook) that stopped working... Now it\u2019s a fresh \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 4.1\u003C\/a\u003E with \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 Encore\u003C\/a\u003E with some new features (like automatic screenshot generation, seen for instance on \u003Ca href=\u0022https:\/\/twitter.com\/Stoslowia\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 Twitter\u003C\/a\u003E).\u003C\/p\u003E\n\u003Cp\u003EBut what I\u2019d like to show you, is how a couple of pretty small design changes have made the whole website way nicer visually (IMHO).\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\/stoslowia-redesign_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022598.75\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAWCAYAAACosj4+AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAFPElEQVRIiX2Wy28cxxHGf1Xd89ql+RTNWJYjSrIs2TBiGHAeOgQ555\/KNfApyF+US2zlZOQSCApgPSgnlB0RJJfk7s6ju3KY2eGMKLqAvUx11X791VdVLTFGo7PnL5\/x3XffEhaQe8\/N2\/vs3b1DM1\/w34MDZifHzMOcqql59Ovfs3\/7DgBN01BVFd57zPp0qCp1XXN2cUFV1WRJgqrinOPvjx\/zzbePyYqCIi+Yz8+5u7+PF5E+wZOn\/+Lrv37NJC3YTTe4tX+P\/U8fUs2XvHj5bw6PnnHRnHP4wwl\/\/tNfuLN\/FwAR6X8AZsarV6\/Y2dnh6dOniAgbG5tcOAcGm5vrfP7ZZ7x4+ZLlcs4nH9\/l0e8ekaUpfnijvV\/s8dVXv8F5xWfCrc0Pufn+B5T1ET81KfduPiDWxsP7gb3dvREbQ2uahtlsxtbWFr+8fRsQpANa1RXHx6c4ifz2y19x\/8GnZFlGjJGyLJFhyaoQWdaRECOpgmp762iQKoQQCCgiQuodTltGQgijkq1+IQRCCCRJMgIcY6Cqao6Oj1lfew91StLF+uFBiQFtShSwCDiHqEIIlGZ453ASwQATwPWxQ7ZW5VNVkiQZ+VZAi6LgVlHQNA0xGs4pIGMNmSg1nsILdTQaA4lGFXV1gBANMUMd+EFsmqY9E2ZGHYzEXfpHF\/cZP1Xn\/GP2gj\/uPmDDZ5c+G8CvqpL5fHGlU1qa4+jbZDLpATRNg5mNAL348ZAb023yNMFhNM4IZmgIeC80qmSaYmYMSRkBKptI3QSK1BMGeq0jTDw0BjGCCHgF7RK9C9A8BFKEaIKzgBMDFdCRSvoSr2zUZRIbQrngvGwPmRnOOWKMnDHWyWQyQfw4ee834+L1a9KtLVLvMaD6\/jkne9uEGNje3gbgoD7kA7\/Lmk4uAY001AluCMbMrgy8lWCHscObGlACP56crDy89+FNXFVRLSveHL5BVdnJ1lnbmlxlaAVAfIKfbuClY7dr6zoKmXbtLIoBKFfqP2RpUkxQ105lDLI8Q1rUiEjP\/CpmhWHMeWgI8wvCW7cWEaoY+0QArijAuVH4Ckw0gzxBnMPakcjfTv\/DH9JdinyC0zbOXs8wXyJrWR87FnVZUlVV\/werDptOp\/ycvUvUBwcH7Ny40RWsHQvHxycg4Dvt5VlOUeTXixrnCV4ofDudzdqOmi1rcgfRIEQQMVLv+0n9NkNtKs\/pySlI+31jY4M8z6jqGosG0o6ZoshHcVdKZss588GnFUsXgzkkIvjJBKfjlTC06WSKOu0KBlmasgwleZ73eZ8vXuGiZ00vKzACpKp470fUiwghBGKnoRXd7i39DC1ahBTEda8A4J+LJ3w0fx\/nPd55ROBOdotCi1HsqO0DQoVDDZq2NqgYlSkeQwzqYEQznDfcNW2vKGdHMxBhe2sLEeGL\/CHzuKCqKqrY6lRUKYpirKERQxbRpqQO3QEzojo81tVZiKHpfNeXC0CdQ1WZnZ1hZkynU9I0Jc9zRFqGq6q+MjrG2x5G29l737\/wVoHeXx3977I8yxEV0q78SZIwOz1HRNlYX8cCzP4X0BuBYk0vAY2eBuqoJSHRiDqH0ZZxWdbte8ggli3dRZbir51DkWSakKYphiEIT8pnfOT3WCwWlEdLwCjWC\/Lp2rjLRqsjNFDNqYfUd122fKvLLPFXdtlQQ0evj9jc3Ox9n6\/d56K6IE0TMEjTpGf72tXhvSfPc1xX\/5U1TdPvr1UCVf3Z1ZFlGYvFEhEQUSZFwBJHmraL1DnHs7M33CtSpi7tMfwfMXi5tPgkQxcAAAAASUVORK5CYII=\u0022 data-src=\u0022https:\/\/avris.it\/image\/stoslowia-redesign_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022598.75\u0022\u003E\u003C\/span\u003E\n                \n            \u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EThere is a website I\u2019ve created many years ago, \u003Ca href=\u0022https:\/\/stoslowia.avris.it\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 Stos\u0142owia\u003C\/a\u003E (Polish only), which collects stories of up to a hundred words. It never got any users, but I didn\u2019t really care to promote it in any way either.\u003C\/p\u003E\n\u003Cp\u003ELast week I\u2019ve decided to rewrite it from scratch, because so many things were wrong about it \u2013 from an ancient backend in plain PHP with hardcoded credentials and no separation of concerns, to login with Facebook (and only Facebook) that stopped working... Now it\u2019s a fresh \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 4.1\u003C\/a\u003E with \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 Encore\u003C\/a\u003E with some new features (like automatic screenshot generation, seen for instance on \u003Ca href=\u0022https:\/\/twitter.com\/Stoslowia\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 Twitter\u003C\/a\u003E).\u003C\/p\u003E\n\u003Cp\u003EBut what I\u2019d like to show you, is how a couple of pretty small design changes have made the whole website way nicer visually (IMHO).\u003C\/p\u003E\n\u003Ch1\u003ELogo\u003C\/h1\u003E\n\u003Cp\u003ELet\u2019s start with the logo. The old one was the laziest option possible: just an icon of a pencil from \u003Ca href=\u0022https:\/\/fontawesome.com\/v4.7.0\/icons\/\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 Font Awesome v4\u003C\/a\u003E.\u003C\/p\u003E\n\u003Cfigure\u003E\n                \u003Cnoscript\u003E\n                    \u003Cimg src=\u0022https:\/\/avris.it\/image\/stoslowia-old-logo_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022128\u0022 height=\u0022128\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABz0lEQVRYhe3WzWpTQQCG4afqQkS6FJEiIYSsRMSFEt24EHfeh5siIsWr8Aq0igvvQUqoGvwB8aeK1I24kOIF+EcopbqYOfQ0nJycTE5ThbybGSbnkJdvvpmEGTP+bRq4vN8SGW08xSdcw4EqLx3cI5kW7uI45nAem3izH0LtnEzGHC6gjzX8mZZQE8sDMnk6+I130xBq4V6JDDtJ\/cIHBUnVJdSsIJOX6uAH3hd9OCkt3MGJMd\/bwlV8yS9WOoolNBNloIuNwcVJhLICp8g8wi3hKthF6pZNIrOCm0UypCXUkL5NK1gaJsP4CWWdWUiQ6eJGmcy4QidxfwKZJeFSLKWqUEPozJ4lM47QAh4kyqwKBR6ZTMaoUjekb9OqkExlGcoTOoaHQndSZMZKJqMsoSvTlhkl1InjZxULiScStqmK0BGcjvNl4ZrvV5QZ9Vwph4ast4QObeI1vsb5bRwueL6H65PKMDyhc3HcwLc47wrdGPzSnhqSyRiW0MU4vsK28Lt1RuhV305KPSzWJUPxsT+Kx5jHW6FPDbu3ahvPhGR+1iVDcUKnogycza1\/xzpe4kWcb9UpM0yoHce+8PfyeRT4GKWmzjwuCadsxoz\/jr\/bT2F\/bPwgOgAAAABJRU5ErkJggg==\u0022 data-src=\u0022https:\/\/avris.it\/image\/stoslowia-old-logo_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022128\u0022 height=\u0022128\u0022\u003E\u003C\/span\u003E\n                \n            \u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EThe new one is a modification of free vector icons \u003Ca href=\u0022https:\/\/thenounproject.com\/iconka\/collection\/sketchy-icons\/\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 created by Denis Sazhin from the Noun Project\u003C\/a\u003E (CC-BY), that looks way more individual. Its elements form a \u201c100\u201d, which relates to the name and the purpose of the website.\u003C\/p\u003E\n\u003Cfigure\u003E\n                \u003Cnoscript\u003E\n                    \u003Cimg src=\u0022https:\/\/avris.it\/image\/stoslowia-new-logo_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022128\u0022 height=\u0022128\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAI1UlEQVRYhb2Yf2wT5xnHv2f7\/ONydmwnRI7TJIYlGCIISQ2ENjQYd8WDjM2AmGBDQpP4ZxJC+2NC+6MFoSmVEG2llXXtJk2dtElFaqNurSqBSEKBKI5p6jo\/+JE4AeIljnyJHcf23Tn2nd\/90dmLk8DWEfZIpzvd8\/74vN\/3eR69d0r892YG0AqABRD5Dv2+k1H\/wa8GsFOhULxYWlrqtlgsDdFoNGO1WnuDweDdTCajqqys\/H0oFEo9L8Dl9sMdO3Z8MzAwMDk1NSWeO3eODA0Nkb6+PvLBBx+QCxcukPr6+s6+vj7F\/wvodEdHx3AkEiEffvgh2b17N8lkMoQQQnK5HLlz5w7xeDyy3W7\/DYA1gXrqIDRNNzc0NNhSqRR8Ph\/27t0LmqYBABRFYXBwEM3NzYq2trZfa7Vaz\/MGYquqqnY1NTWxDMMgEAjA4\/GAEFK4wuEweJ7Ha6+9pqqurv6Tw+F44XkC7XK73eWiKMLv90MQBDQ1NQH4Vh1JktDT04P169dDFEUcO3ZMGhgYeObgVj3F96rT6dSazWb09\/fD7XaDor5NSkIIIpEIOI5DS0sLPv\/8c1y9evVBOp2OPyvQkxRSsCzb6HQ6tclkEv39\/fB4PAUgiqLQ39+PLVu24PHjx\/D5fJicnPRfunTpWXmeCGR2uVw2lUql1mq1mJ6exrZt2wowANDd3Y09e\/aAYRgsLCwgmUzOPjPNU4Aa3W63QqFQgOd5aDQaMAwDAIWA\/vrrr1FVVYVoNIpQKASKorqeG5BSqXzR7XarZFnG\/fv34XQ6i7ZrenoaLMuivLwcyWQS2Wx2TBCE\/ucGVFdXV6nX662JRALXrl2Dy+UqSne\/34+XXnoJJpMJ09PTyGQyfWsBA6yeZYb9+\/fbMpkMk8vlMDMzg4aGhoJCAODz+XDo0CEsLi5iZGQENE3\/fa2AVlNo5759+5h0Oo1oNIr6+npQFFWkUCwWA03TYFkWyWRSKCsru7NWQCsUoijK1tDQsJFhGPh8PuzevTv\/HgDA8zwAIBKJQBAE3Lt3LxQOh7m1AlqukMrhcGzW6XQv0DSN0dFRtLa2FqkzNjaGXbt2obq6GiUlJUin01cBSM8LyHLgwIEamqbV6XQauVwOZWVlRRkWCARQW1uL2dlZDA4OgmXZ7rWCWQ3o5UOHDrGCICAej8NqtRbBAADHcaioqADLspiZmZH0en3vWgIVxRDLstYNGzZs1Ol06OrqglarLfgIIUilUqAoChRFQZZlzMzMDIVCobTRaGzQarW7UqmUhef5ACHkSwDCswIxW7durY7H47ZwOIxoNAqDwVBwUhSFgYEBOByOAuj8\/Lz59ddfD1osFkt7e7uKoijcunUr19XVNXX79u2Lw8PDfySE5OOrHIARQPhpsEuBmo4ePVrDsqxCrVbjq6++wqZNmwpOjuNw\/vx5XLx4EbFYDPfv38fhw4dtHo8HZrMZhBAolUp4PB5Fe3t7jdfrvXz69OnWysrK8aqqKte+fftsiUSi3Ov1zg0NDf0tGAz+NplMjj8NqI0Q0pRIJKBWq1FVVQWTyQRRFEHTNC5dugS9Xg+KoiCKIubn57F9+3asW7du5SpVKnAcpzhz5sxPXS4XTCYTlEolDAYDTp069cLU1NTpK1eunHjrrbd+MTs7e2VpX+WS55\/p9XrX0aNHFd3d3Th58iQaGxvx2Wef4ebNm3C5XNDr9WhsbATDMLhx4wY8Hk9RnOW3tre3F4QQOJ1OWK1W6HQ6aDSagt9oNGLLli1aq9Xq6evrmxQEYXC17Xu5tbV1fmJigiwuLhYO8nnLZrOko6ODeL1eEgqFyNmzZ4v8efP7\/eTjjz8m6XR6VX\/eEokECQaD5M033xQBfD8PsTTtR8bGxnLl5eWgaRqEEAD\/Pm4olUrY7XZ0dnYinU7DbDYX+QkhkCQJPp8Pe\/bsgVqtXuFfesmyDKVSiYMHD2rb2touUBSlWA6UmJube9Db21uQNn+nKAo8z6OlpQVmsxlvvPEGtm3btqLN3bt3wfM8WJZdUb\/ybfKQHMdBkiQYDAYcOXJkJ4CNy4EAoKenp6doEEmSEAwGMTIygkAgALvdjpqaGjgcjqIJAWB8fBzNzc3Q6XQrYJbGWCwWA8MwEEURALB3716VTqc7DCwrjISQ66Ojo79aWFjQZrNZaLVaLCwsQKFQwGAwIBaL4YsvvsDbb7+N0tLSwmrzE2azWajV6sK75fd8+5KSEnAcB5vNhpKSknx4fG8FEICB8fFx7sSJEzX5Fdvtdhw\/fhyCIOQ6Ojoet7e3lxuNxkLFXDqRJEkQBGHV7VqyaAiCALVajVwuB4qiMDo6isXFRQDFaQ8AWVEUWywWS4PdbqdEUYRCoUA4HMa1a9fuDg8Pn3r06BG1c+fO7SaTqRC42WwWHMdBlmV4vV688sorBWWWgicSCczOzoLneZSWlhYK6nvvvQev1\/s7AN+sOKDxPN8NIDM7++1HRDwex6effvrQ5\/OdBNCbSqXOnzt37sHU1BSi0Sji8TgikQhKS0uxefNmPHz4EI8ePUI6nS4K5GQyiWQyCVmWYTQaQdM0KIrKL3YMwF9XUwgAEiaT6RRN05q6ujqEw+HAxMTEjwDc\/Zca\/MzMzHVZll8tKytbV1JSAoPBgIWFBZjNZtTX1+Pdd99FY2MjVCoVZFlGNBqFJEmQJAlarRZGoxEMw2BxcRGXL1+WOjs7fwkg8CSgOM\/zP5EkycJx3Jd+v\/\/HhJB\/LG0gy3L0wYMHV3t7e2uDwWCNIAh0MpnE8PAwAoEAbt++Hcpms5ra2lqVLMuFKm2xWKDRaEDTNFKpFN55553M+++\/\/xee5y8CyAFP+GHFsuzZ9evX75iYmPi5IAhP+15XaDSaCrvdvjESiRjVajU2bdr0cGJiYsxgMPygrq7uD\/v377c4nc5CzRFFEZOTk\/joo49GPvnkk8uxWOzPADL5AZ\/0B43B\/3ieWWoqlcpmNpsP2Gw2R0VFRYUoipibm3sYjUavV1RUdPn9\/vTyPv8EVEBqalCJz50AAAAASUVORK5CYII=\u0022 data-src=\u0022https:\/\/avris.it\/image\/stoslowia-new-logo_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022128\u0022 height=\u0022128\u0022\u003E\u003C\/span\u003E\n                \n            \u003C\/figure\u003E\u003C\/p\u003E\n\u003Ch1\u003EOld design\u003C\/h1\u003E\n\u003Cfigure\u003E\n                \u003Cnoscript\u003E\n                    \u003Cimg src=\u0022https:\/\/avris.it\/image\/stoslowia-old-home_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u00221197.5\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAkCAYAAACaJFpUAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAFCElEQVRIiaWWzY4kRxHHfxGZWdXTPbNe42UFyLKQWVnmERBHy+LIkQsvgMQFiTvPwI0LDwAvgLiCQOKCOHNDNrINi7We6Z3q+sgIDllVru6qgUHkYaqnKjMjM\/4fEZJzdi5G27YcXx+pUsLNEVVSDMRUISKIapnXNJg7ApRNyl9zZ3+1J4RwuTVRRFYv\/\/in3\/HTn\/2Yt5+8wacf3ZNb48Xzp3z7O9\/la8+\/wrvf\/wH+8h\/8\/le\/JlSR288+4w9\/+TPP3r7mNh\/55G+v+MXPf8mHH3xvHXD1ZjyhdcLLo3H4+jVvVE\/Zkfji9khU5+63vyG\/esW9GdGP\/IuXPH1RY3FAvwiIK2HMwn+8obsjIsQqkG4CXdswnBSvW+5RYnPN9ZNrnqlgu8hf\/SP+\/vHHdNajAs1tpjmduH4roVICisi8L0B0P4fQ3Xnxzff40Q9\/ggYh1YGhy2glkJV3nr\/Dm289o3n9OV99\/xv0bUYV8uDESlER7v7Z8q13X8z7LZ\/ilxGBZnDuB0eBwaEOcJPOsb7tnH0Skgpt2+ISMFFUIDvUQYi65oeY2SrgMPQ0zWk+Wdd1ECsGc4JAiJGEYWbnm4lgZqgqV1d7UopzSmcMt4B1L4FUBRBSVaEiXF\/VqAgiwjAMMzYpJS7ZriNpLhO4Ig0AIdFVkeskXEXhvreiMAHz8jxpJDskhaBCHhM1pxQhsCbNJoZ915WUSjnpZepUFXfHzOaNphvlnAFhv78ipbTK3llKp5OYO0Mezt6bGTFGzIwQAkLR6\/K803p3w323+P+\/yGKyr2rEZrrlnBYRBMjjzZebujt1Xa8w3JTFtKjLTjM4hyQFEwMr0M2jzU5Q4SoUXAcv3ydfDQq6heGWLPp+4Ng0ZQFgCCKjNbsTQphxVZzJ\/s0cFUCVw25HSmsRbJo3OFG+\/K3uiAMiIBCkHGCMT9Siv5QCPuIagq6kAg+Ztxlt25YULBZNv5cEKkEdQcg5z5g\/NDZTamazsOcNRaiqavPU\/8tYkQagzXDXFzwqhSCFNBOmCDRDIcZBjZwzHhLZyxyAGIQoG9XiLPrEpNzC8ZbszmkhhWloCKgIQx74PBfvvPTMm5sbpK5Xa1c6nCbsdrvFrZ3Z9UIAhKpKZwEmT12Orb0fJE3XddR1PS4SVGWRHjZt6zFj00uLZRUV6IWLzEwdm6fpdstvyxs+SvhNn7k79Zg5b+6UUwZwzEplEBFacxTnEIXBoLNyAMUxhMOuIoW1PDaFH2wgdK8JwOtjcRh3R0Xo3EkpEUdDv2tsrh4+pkVF8KRIrNcBN\/OsOhdV5zytk+iBWejAbO6qio8VZWs8yNKJ6lVVnWFRvittezoLVNf1GYYhhIdZOk2cJmSJdOlAHQQN0GfHoBTk8dmlAwDX0pe1ITEshD84m8LfZGnXdTRNMzdElxYXQkBE6Pt+0+pEhP1+v13xt67t7sWuxnTlnGezXmJZTs+icvhZmh8tfFUlxQjjogmPEMJcCUpNzIDiXogUY\/yyY3jA5Ddb\/TEvKzFPdqcji5dr\/i\/hd1Y6axV4UsmiGBdNCvCqc55UMpOkGQqx4qLzDhuXfLhNPJ3IOWNmGIov2vgQ9KLzHjuZBaCHw4GqqtYpXZ+h+OQk6hACYgZiCKWdUPGxO5\/uPOlTwB1H2OBLCfiQ8EtvWUrOdNJprqrS9\/3ctyyxmhos1W2Wipn5JYUfA\/4wDJiVZmli8WPW\/Rv9jECHOmzNXwAAAABJRU5ErkJggg==\u0022 data-src=\u0022https:\/\/avris.it\/image\/stoslowia-old-home_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u00221197.5\u0022\u003E\u003C\/span\u003E\n                \n            \u003C\/figure\u003E\u003C\/p\u003E\n\u003Cfigure\u003E\n                \u003Cnoscript\u003E\n                    \u003Cimg src=\u0022https:\/\/avris.it\/image\/stoslowia-old-add_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022442.5\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAQCAYAAAB+690jAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABF0lEQVRIie2TwU7DMBBE39oOSnug\/3\/jGzjyA3wNB6RIBNvr5dDaFNomaRCIQ+c0kWazs7tjKaUYgIgAYGaND8OAquK9p+s6VBXnXPv+rs85E1NCoOlijIQQMDPMjBA6QvAntWYGgKjqnp1BjLEV1AbXYEhGMXD7X1AOne7v5GJNcM6dOK18HMc2mfeB7XaD9x4ROauv3MzIObNxLNIf8zA14W63u1g8B1VFRHDONZNL4BapVsDMeHl\/xbnPFunhEX16nqwT22PxSn\/CrRSYOd\/kyapwLT+Z\/pDXKcye7DiQ1\/I1mN1QSgkDaosa0hrUt3EkeE\/OGRGh7\/tmSFW\/bKSGfAp\/mqEl\/Nde2VrcDM3hZmgO\/87QB+2b5hKTe+QzAAAAAElFTkSuQmCC\u0022 data-src=\u0022https:\/\/avris.it\/image\/stoslowia-old-add_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022442.5\u0022\u003E\u003C\/span\u003E\n                \n            \u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EMaybe I shouldn\u2019t judge the design, if it\u2019s me who created the website, but since it\u2019s mostly a \u003Ca href=\u0022https:\/\/bootswatch.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 Bootswatch\u003C\/a\u003E theme anyway, I\u2019ll dare to say: it\u2019s not bad. I like it. It\u2019s clean and minimalist.\u003C\/p\u003E\n\u003Cp\u003EWhat I don\u2019t like is my own choices: like the jumbotron with random background images, which made the text not-so-readable, even with the addition of a text shadow, or the lack of a footer, which makes the website look somehow... \u003Cem\u003Eincomplete\u003C\/em\u003E...\u003C\/p\u003E\n\u003Cp\u003ESo what I did to polish it up:\u003C\/p\u003E\n\u003Cul\u003E\n\u003Cli\u003EI rebuilt it in \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 4\u003C\/a\u003E using a different \u003Ca href=\u0022https:\/\/bootswatch.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 Bootswatch\u003C\/a\u003E theme (slightly modified).\u003C\/li\u003E\n\u003Cli\u003EI switched the \u003Ca href=\u0022https:\/\/fontawesome.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 Font Awesome\u003C\/a\u003E icons to version 5, the light version.\u003C\/li\u003E\n\u003Cli\u003EI switched the font to something more distinctive.\u003C\/li\u003E\n\u003Cli\u003EMade the jumbotron bigger, with a non-random background image that matches the subject matter and is subdued, so that the text is better visible.\u003C\/li\u003E\n\u003Cli\u003EEven though the random jumbotrons in the old website were meant to add some colour to an otherwise dull website, it still looked pretty monotonous. That\u2019s why I decided to assign colours to the categories and display them as small bars on top of the story-card.\u003C\/li\u003E\n\u003Cli\u003EAlso to break the monotony, I decided to align the cards in a \u003Ca href=\u0022https:\/\/masonry.desandro.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 Masonry\u003C\/a\u003E manner, instead of just rows.\u003C\/li\u003E\n\u003Cli\u003EWithin the card, I separated the important info (title, author, category) on the top, from the less important (number of words, date of submission, comments, votes and social buttons) on the bottom.\u003C\/li\u003E\n\u003Cli\u003ECategories are pretty important, yet in the old design they weren\u2019t emphasised at all. With the addition of colours they are way more visible, yet to make them even more distinctive and useful, I added icons and a list of all categories on the top.\u003C\/li\u003E\n\u003Cli\u003EI added a footer.\u003C\/li\u003E\n\u003Cli\u003EI reorganised the submission form so that it has a simple up-to-down flow, instead of the previous two columns that made it easy to overlook some fields.\u003C\/li\u003E\n\u003C\/ul\u003E\n\u003Cp\u003ECheck out the end effect below. What do you think? \ud83d\ude09\u003C\/p\u003E\n\u003Ch1\u003ENew design\u003C\/h1\u003E\n\u003Cfigure\u003E\n                \u003Cnoscript\u003E\n                    \u003Cimg src=\u0022https:\/\/avris.it\/image\/stoslowia-new-home_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u00221605.5\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAkCAYAAABmMXGeAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAEvUlEQVRIiZ2WT28byRHFf1XdPTOkJFIyLdKxAiyyh00+wO4hgD9DgBzyOfMVFsbuYYPkkkRADhsgudiWRNqkKJOcf105DDniaOQ9pHngYKb7VVe9eq9b8jw3M8PMOB6qSllV3K\/XlGVFlqbUVUWSBESEn\/76N75\/+xYzOD09I8sy5vNbfv36V3gAEQHAzCjLku12i6pyfX2Ncw6A2esr6qrifDwmCYHfffMNf\/\/nNScnJ9x8eMfrVy\/50x\/\/wMXFBZLnuR0AARaLBavViqurK3a7HQYIQow1ZVVzO18QLXL1asaPP7zFEN68ecPobERd15Rl1QU1M+7u7jAzkiRhl+ekaYqqtplgEJLAYn6HU+HF5BIR3WdkFEXRBz2Mw\/PTWgOUZU6MwmL5kSzJcM7hvcc7xcyQ3S5vwrdg7VMPzAxirKjrmhCSNmhV1cQYCcE3oNYMRAQzIxrUERL\/SN7hm4gQzdgWxn2948\/zf\/Dt6Irvxlct2UAfdLPdsvj0idnLKSF4wBCgbiYj+26JAsoR0FHgHmhpkVVZclJ5TMBZJFjFLtSoOYIo4oRSIZWkB\/rsTus8x2JERTADAWy1Ig5TimGCOm2BNnFHbTVTP+mAPs7YjyJGPq7XkCS4QYYOMiRLAWU9v2fz8TMDyRhIRiYpTlyP0H5NNxs+LZfNR4RokRACLycT3r1\/37wVwTnFe8\/kxQtUtbPTjkxFmgXee0QElSYRdYoBaZp2WFZVjtu4xYkxdhqyLEvyPH8EVqUsS7w64rZoZCuCc45isyWII5mOO+n741YwMz4XOZsyZzzM2kl\/2S75yg8Z7DbMZq9akwnBY8ttZ5fP1nS73bJcrghJ2AdTnFNGZ2e8\/3CDyGP7eB+YTS97oP6pxlUV592j9mMEp4jA2ekpIo1cD+BVXeOd63iEHpMEUNf1nvf9b1\/XKtZUviImQCbo0POBOf\/a\/fv59J8SVVVVO+lAlHOO29s7prNpsxAwDB88Xn2HqF5NP62XrDdrAC6nUwT4ufgvF4xwy0btts8\/y1LGo1Hbip0+PR6DkFG5GgEeFg34K5lwPh4zZ0FIEgTBnrHGlqjOtvfRiqJoiWjfRzgZnLUseecoipJ8V5INkk5de+w75zgZDhBVQggI4H1jgQ8PK4YnJ4zORg2ppbB4n3P1ddJhv1fTh91nSqtQERBQdfy8+Q+XyYTkwSE075t\/4cXFeav9Z9MH0Cjk99vmqN2n\/dvsa7xz3BZ3zeJGq50SdWr6NH0RQVRZrlaYgVNlMBzgQ8rp6Wnrs2mWHh9onfR72geoqhpV2R90EV+WlGlCqeD26irEuF69A+f4\/eSrvvMfb32321HvnT\/G2CpKVbm5uWE0GpFlWdtQwfvWYL5IVLH5DLFRlACiSrW8QV3gtgqdK5KIMJte4pz75eYvDeooZFlGPOxm9ptm8nyOihLt8EWelUDf+VVZr1bcrx9aR\/Lec\/lygnceBJy4Vq6NizmOcfyTkqIipGlKrGOb0mA4QFU5Px93FptZ9571JfZVlSQECAfba\/5jjHtl9cdh\/ReJ+n9HB\/TpwbcrKvIiMhgkxGg4bZTjezeEXwjQu6HUNbUdzG0f3eKR2eneoSOIw4l1WsrM+B+FtOglJDiiGQAAAABJRU5ErkJggg==\u0022 data-src=\u0022https:\/\/avris.it\/image\/stoslowia-new-home_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u00221605.5\u0022\u003E\u003C\/span\u003E\n                \n            \u003C\/figure\u003E\u003C\/p\u003E\n\u003Cfigure\u003E\n                \u003Cnoscript\u003E\n                    \u003Cimg src=\u0022https:\/\/avris.it\/image\/stoslowia-new-login_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022733\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAbCAYAAAAULC3gAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAEjUlEQVRIic2WWW8cRRDHf9Xdc+3h9YHXCfHBJYXE4sXiOQgeonwAkADxQeCr8B14QjwhcclvHCJSwEQIWUkcXwmJZ+09Zne6m4ex12uzXu8iJKiH6eqZ7qp\/V\/2rayTLMu+9B+BkPC8igogAYK2lcdik2W4RhyFJHJN1uwB0sy5RFBKGAd57vIfNBw\/46tvvSNMD2u0OzjmCICROEkqlhCiKaLXaPNj8gziJMCcOvff98SJwIoLWmulalWqlRNo45PHeHnEYMjNdw2iNc448zzEmQMSz+OJVBE+n0yGOIkqVKuVyCWMMaZqy8es96vMv8NGHH3Dj+utIlmV9z8PAPH\/+nFKpRBRF7OzscP\/+farVKmmaUqvVyLKM6zdu8nh3j9Bori4s4L0nCAxaKfI85+69X\/j+x5+oVqtEUcTW1iN2t7d46aUV7ty+w8ryMlprnPPDAQ3qGxsbtNtt1tbWSNOU7Z0dvPdopRARer0ey8srWGc5PGqy++QpWinq83MkcUwpjmkcHvLl19+QHhzw6OEmb6ze5Natt1mo1xFReO+w1uG9L1I2mJITICJCq9XCOcfMzAzNZpMkSVhcXDyTRiUK5xxKhOmpKuVSQrPVZmt7F+cs9blZlq5dZSYW5hav8P5771Kbmupz0nmPd57c5vjLItRut1lfX2d1dZU4jtHGHIP0KCX90xXGBecc4LHWUa\/P02y1eLq\/R97LqJQrzM1fQQSUUmht0Lo4jPceay3dbu9yDp1syLKMIAjodDp4D9Vq5UykzhdF8c4hokjTBkdHDUrlCsYYojDEOY8HjNYoJcfFYE8BDePPeYej5oPvRATnLNZarHVY59h7sk8QhExPTdHpZCitKCel\/j6ljqPdarUKQMUX+oOczi8C4s8++mLzHs2jFBXEJHGCUqr\/rdPJyG2OUYZ21iEIAuI4wlqLAJLn+fDb8D8S8YX0WX9eb3WLG7ccK+QSY4N7D1oWD\/QsfJH+zOf7vyECn7zyFm\/WFof6EpEC0Ljom80mHnDWobQqUipSZEwAP3h1eOT4rkri+MIDn9fNUM8jw0BR8pwyR+SEWwWYSqU8NGrF2tG6mSBAbGwdsf30AOccURiBFM1Wa8Py4rXThY1uXy1HipVZPbaPiSL0e6PMfjcpJnkxTMWCy+HxZkbuIDtXI\/WKYmW2zLhyKakHL7s\/nz3jIG0QGMPy0tkWcpCmNNJGQScRlpcWx+bNoN7\/\/egjHKKfjEmSMDc7O\/RkcRxjtB5olhatx0\/ViUyUsjAILjakNXEUTQzgb3YmIbUbsfYyOxe1pvP6RBH67G6X\/cM2WgmlUDjKHN7Da\/MB77wqGGPOpPyfiJnEwNpSyFHmCY2gT9sT04kijtVQMCeNc1wZq8rGkU\/XD\/nhYUaghNAIPevpWs\/Lc4aPb9fGrrKJWsckMkmpnwHknPtfdfuRHOrmjk6v4Eyn54mD09E60Aqch1I4Pkcuk5ERarfbNDs5zVbOwlyCVwEOhXJdUKZo9q572mQBrwLwxc+WFwOuCyoABHFdwihCjyD5v0bqUXvH1fM85y\/9B+hVIrL\/rAAAAABJRU5ErkJggg==\u0022 data-src=\u0022https:\/\/avris.it\/image\/stoslowia-new-login_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022733\u0022\u003E\u003C\/span\u003E\n                \n            \u003C\/figure\u003E\u003C\/p\u003E\n\u003Cfigure\u003E\n                \u003Cnoscript\u003E\n                    \u003Cimg src=\u0022https:\/\/avris.it\/image\/stoslowia-new-add_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022713.5\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAaCAYAAADfcP5FAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAEQklEQVRIicWXXW9bRRCGn9k9Xz5OnDRtSFNahNSqohJQFFGJC6BXqD8CxB0X\/BB+EhJCtBR6hQRXKBSBaJWoSvOB2yS2j8\/X7nDh2HXa2E0CFSNZOzpnduY9M+\/MrqUoClVVAIbr8yIiiAgAzjn2uz16WUYcRaRJQlGWAJRFSRxHRFGIqqIKD9fXuHP3R\/b2dun3c9R7gjCi0WjQSBvEcUyWZaw9fEAjTQiGAVV1tE4CJyJYa5lvzTLbTNnvdNnY2iYKAxbOzBNYi\/eeunYEQYCIcnF5GREo8pwkSWjOzNBMU6wN2N19yoO\/\/mR5aYnPP\/uUt65eRYqiGEU+Cky73abZbJIkCZubm6yurtJqtdjd3WVubo6iKHj7nXd59HiTwBqWl5YACIMAaw11XfPr6m\/89PMvtFotoihkfX2N7a3HXLl8mVuf3OLSxYsYY\/BeDwM6CtT9+\/fp9\/usrKywt7fP9s423nsCGyBGqMqKC69fwDlHL+uzubMDCufOnWEmbZImCZ1ul29v3+HpkzYbG49YuX6dDz+6ydmFBYwxOO\/xzqHKZEAA3W6XtbU10jRlcXGRMIwoy2Jgd2Az+DKPeo8YQ13VZHnOxtYWRVGyuDDPm29c5O533xDEKe\/f+IBmsznipFfFO0dZVnj1R5dsqBdFwb1797h27RpxHBNFEVnWH2wUQcSgQx3BeQ8oznmWXluknxe029tknQ6tVouzi+cRARGDtZYgGHBOVfHeU5Tlyzk01IuiwFpLnucoMDszc2RWD2fbI2LodnvstLeZn1vAWkMcxQddqARBgDEyaoYRoKNATAs47ZmI4F1NVdc4Pwi8t7+P85652RZlUSJGaDQSjBhUFWMOOr3Xy3TIiOMAgQPrIwEN3jpXkXU7BHGDJE5GfAEoy4qqqgiMJa9KrLU0khjn\/OBjnHNHR\/2XogpOQYBCK7pu0AwLYUogZuK+wJjJL1WVrFQUaMYGmWj5zH6YjdopeaUEFr5u\/8EPTx4iwBeXbvBea\/kF+6Eu3vsTZUhV2d75m36\/TxxH1LVjdnaW+bnWSdxMlGD82JiEelyvPHz1PYS2QRhYuoXny48T4lSp3YBfItAIBSs8I+sx\/YtOYu6UDHWynDiOR8+MAM8VVABrDp+TxwJ00pK9ajHDq8Vxf6pKp9PFOTfV8fhMGq7H0k+ToaIoDpXsv5RTARqv\/UsDnJBDwXEdj4OZNrvG7U4jpyZ17mucepo2OlXgSXLsOTQU55Xbv\/dY7+9Riedqeg57MGs8jC5KxsDNK8mJ59DoTj2USfq47BfCnMwD8DTzJKEgAv2DY2awlzH95f5HnfZ\/zKFTk7qsPXmlxKGhXw4ykVdKEgrODyaxV0ijF0k+rTRTwU47OrIso5fXdLOa82cbYEIcButL1ASDS7kf\/CdTQBDUBKBuoIsFXyImRBHEl0RxTGDtdEAnId2r1Ou65h8cjuXlSrdDwgAAAABJRU5ErkJggg==\u0022 data-src=\u0022https:\/\/avris.it\/image\/stoslowia-new-add_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022713.5\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","stos\u0142owia","webdevelopment","website"],"hasMore":true,"image":"https:\/\/avris.it\/image\/stoslowia-redesign_small.png","introLite":"\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/stoslowia-redesign_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/stoslowia-redesign_mini.png\u0022 alt=\u0022\u0022 width=\u0022240\u0022 height=\u0022149.6875\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EThere is a website I\u2019ve created many years ago, \u003Ca href=\u0022https:\/\/stoslowia.avris.it\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E Stos\u0142owia\u003C\/a\u003E (Polish only), which collects stories of up to a hundred words. It never got any users, but I didn\u2019t really care to promote it in any way either.\u003C\/p\u003E\n\u003Cp\u003ELast week I\u2019ve decided to rewrite it from scratch, because so many things were wrong about it \u2013 from an ancient backend in plain PHP with hardcoded credentials and no separation of concerns, to login with Facebook (and only Facebook) that stopped working... Now it\u2019s a fresh \u003Ca href=\u0022https:\/\/symfony.com\/\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E Symfony 4.1\u003C\/a\u003E with \u003Ca href=\u0022https:\/\/symfony.com\/doc\/current\/frontend\/encore\/installation.html\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E Encore\u003C\/a\u003E with some new features (like automatic screenshot generation, seen for instance on \u003Ca href=\u0022https:\/\/twitter.com\/Stoslowia\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E Twitter\u003C\/a\u003E).\u003C\/p\u003E\n\u003Cp\u003EBut what I\u2019d like to show you, is how a couple of pretty small design changes have made the whole website way nicer visually (IMHO).\u003C\/p\u003E","contentLite":"\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/stoslowia-redesign_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/stoslowia-redesign_mini.png\u0022 alt=\u0022\u0022 width=\u0022240\u0022 height=\u0022149.6875\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EThere is a website I\u2019ve created many years ago, \u003Ca href=\u0022https:\/\/stoslowia.avris.it\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E Stos\u0142owia\u003C\/a\u003E (Polish only), which collects stories of up to a hundred words. It never got any users, but I didn\u2019t really care to promote it in any way either.\u003C\/p\u003E\n\u003Cp\u003ELast week I\u2019ve decided to rewrite it from scratch, because so many things were wrong about it \u2013 from an ancient backend in plain PHP with hardcoded credentials and no separation of concerns, to login with Facebook (and only Facebook) that stopped working... Now it\u2019s a fresh \u003Ca href=\u0022https:\/\/symfony.com\/\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E Symfony 4.1\u003C\/a\u003E with \u003Ca href=\u0022https:\/\/symfony.com\/doc\/current\/frontend\/encore\/installation.html\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E Encore\u003C\/a\u003E with some new features (like automatic screenshot generation, seen for instance on \u003Ca href=\u0022https:\/\/twitter.com\/Stoslowia\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E Twitter\u003C\/a\u003E).\u003C\/p\u003E\n\u003Cp\u003EBut what I\u2019d like to show you, is how a couple of pretty small design changes have made the whole website way nicer visually (IMHO).\u003C\/p\u003E\n\u003Ch1\u003ELogo\u003C\/h1\u003E\n\u003Cp\u003ELet\u2019s start with the logo. The old one was the laziest option possible: just an icon of a pencil from \u003Ca href=\u0022https:\/\/fontawesome.com\/v4.7.0\/icons\/\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E Font Awesome v4\u003C\/a\u003E.\u003C\/p\u003E\n\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/stoslowia-old-logo_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/stoslowia-old-logo_mini.png\u0022 alt=\u0022\u0022 width=\u0022128\u0022 height=\u0022128\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EThe new one is a modification of free vector icons \u003Ca href=\u0022https:\/\/thenounproject.com\/iconka\/collection\/sketchy-icons\/\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E created by Denis Sazhin from the Noun Project\u003C\/a\u003E (CC-BY), that looks way more individual. Its elements form a \u201c100\u201d, which relates to the name and the purpose of the website.\u003C\/p\u003E\n\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/stoslowia-new-logo_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/stoslowia-new-logo_mini.png\u0022 alt=\u0022\u0022 width=\u0022128\u0022 height=\u0022128\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003C\/figure\u003E\u003C\/p\u003E\n\u003Ch1\u003EOld design\u003C\/h1\u003E\n\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/stoslowia-old-home_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/stoslowia-old-home_mini.png\u0022 alt=\u0022\u0022 width=\u0022240\u0022 height=\u0022299.375\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003C\/figure\u003E\u003C\/p\u003E\n\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/stoslowia-old-add_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/stoslowia-old-add_mini.png\u0022 alt=\u0022\u0022 width=\u0022240\u0022 height=\u0022110.625\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EMaybe I shouldn\u2019t judge the design, if it\u2019s me who created the website, but since it\u2019s mostly a \u003Ca href=\u0022https:\/\/bootswatch.com\/\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E Bootswatch\u003C\/a\u003E theme anyway, I\u2019ll dare to say: it\u2019s not bad. I like it. It\u2019s clean and minimalist.\u003C\/p\u003E\n\u003Cp\u003EWhat I don\u2019t like is my own choices: like the jumbotron with random background images, which made the text not-so-readable, even with the addition of a text shadow, or the lack of a footer, which makes the website look somehow... \u003Cem\u003Eincomplete\u003C\/em\u003E...\u003C\/p\u003E\n\u003Cp\u003ESo what I did to polish it up:\u003C\/p\u003E\n\u003Cul\u003E\n\u003Cli\u003EI rebuilt it in \u003Ca href=\u0022https:\/\/getbootstrap.com\/\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E Bootstrap 4\u003C\/a\u003E using a different \u003Ca href=\u0022https:\/\/bootswatch.com\/\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E Bootswatch\u003C\/a\u003E theme (slightly modified).\u003C\/li\u003E\n\u003Cli\u003EI switched the \u003Ca href=\u0022https:\/\/fontawesome.com\/\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E Font Awesome\u003C\/a\u003E icons to version 5, the light version.\u003C\/li\u003E\n\u003Cli\u003EI switched the font to something more distinctive.\u003C\/li\u003E\n\u003Cli\u003EMade the jumbotron bigger, with a non-random background image that matches the subject matter and is subdued, so that the text is better visible.\u003C\/li\u003E\n\u003Cli\u003EEven though the random jumbotrons in the old website were meant to add some colour to an otherwise dull website, it still looked pretty monotonous. That\u2019s why I decided to assign colours to the categories and display them as small bars on top of the story-card.\u003C\/li\u003E\n\u003Cli\u003EAlso to break the monotony, I decided to align the cards in a \u003Ca href=\u0022https:\/\/masonry.desandro.com\/\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E Masonry\u003C\/a\u003E manner, instead of just rows.\u003C\/li\u003E\n\u003Cli\u003EWithin the card, I separated the important info (title, author, category) on the top, from the less important (number of words, date of submission, comments, votes and social buttons) on the bottom.\u003C\/li\u003E\n\u003Cli\u003ECategories are pretty important, yet in the old design they weren\u2019t emphasised at all. With the addition of colours they are way more visible, yet to make them even more distinctive and useful, I added icons and a list of all categories on the top.\u003C\/li\u003E\n\u003Cli\u003EI added a footer.\u003C\/li\u003E\n\u003Cli\u003EI reorganised the submission form so that it has a simple up-to-down flow, instead of the previous two columns that made it easy to overlook some fields.\u003C\/li\u003E\n\u003C\/ul\u003E\n\u003Cp\u003ECheck out the end effect below. What do you think? \ud83d\ude09\u003C\/p\u003E\n\u003Ch1\u003ENew design\u003C\/h1\u003E\n\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/stoslowia-new-home_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/stoslowia-new-home_mini.png\u0022 alt=\u0022\u0022 width=\u0022240\u0022 height=\u0022401.375\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003C\/figure\u003E\u003C\/p\u003E\n\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/stoslowia-new-login_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/stoslowia-new-login_mini.png\u0022 alt=\u0022\u0022 width=\u0022240\u0022 height=\u0022183.25\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003C\/figure\u003E\u003C\/p\u003E\n\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/stoslowia-new-add_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/stoslowia-new-add_mini.png\u0022 alt=\u0022\u0022 width=\u0022240\u0022 height=\u0022178.375\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003C\/figure\u003E\u003C\/p\u003E","words":530,"readTime":3,"lang":"en"}}}}}