A codex for the web
@a0viedo
JSConf Colombia
this.me.toString()
> {
"name": "Alejandro Oviedo",
"job": "Platform Engineer at Beamery",
"social media": "@a0viedo",
"country": "Argentina",
"other": "Google Developer Expert on web technologies"
}
JSConf CO @a0viedo
JSConf CO @a0viedo
Initial categories
HTML
CSS
JS
Performance
HTML tags: jsconf.co
JSConf CO @a0viedo
color detection graph
Color detection: jsconf.co
JSConf CO @a0viedo
JSConf CO @a0viedo
Stylesheet colors: twitch.tv
desktop
mobile
JSConf CO @a0viedo
/*! * Vue.js v2.6.10 * (c) 2014-2019 Evan You * Released under the MIT License. */ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).Vue=t()}(this,function(){"use strict";var e=Object.freeze({});function t(e){return null={}.watch,Q=!1;if(z)try{var ee={};Object.defineProperty(ee,"passive",{get:function(){Q=!0}}),window.__VUE_DEVTOOLS_GLOBAL_HOOK__;window.addEventListener("test-passive",null,ee)}catch(e){}var te=function(){return void 0===B&&(B=!z&&!V&&"undefined"!=typeof global&&(global.process&&"server"===global.process.env.VUE_ENV)),B},ne=z&&function re(e){return"function"==typeof e&&/native code/.test(e.toString())}var ie,oe="undefined"!=typeof Symbol&&re(Symbol)&&"undefined"!=
/*! * Vue.js v2.6.10 * (c) 2014-2019 Evan You * Released under the MIT License. */ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).Vue=t()}(this,function(){"use strict";var e=Object.freeze({});function t(e){return null={}.watch,Q=!1;if(z)try{var ee={};Object.defineProperty(ee,"passive",{get:function(){Q=!0}}),window.__VUE_DEVTOOLS_GLOBAL_HOOK__;window.addEventListener("test-passive",null,ee)}catch(e){}var te=function(){return void 0===B&&(B=!z&&!V&&"undefined"!=typeof global&&(global.process&&"server"===global.process.env.VUE_ENV)),B},ne=z&&function re(e){return"function"==typeof e&&/native code/.test(e.toString())}var ie,oe="undefined"!=typeof Symbol&&re(Symbol)&&"undefined"!=
JSConf CO @a0viedo
Performance
cutt.ly/webcodex
JSConf CO @a0viedo
+ Node.js (v8 y v10)
+ Puppeteer + Lighthouse + imagemagick
+ tons of others
JSConf CO @a0viedo
+
JSConf CO @a0viedo
A few things learned along the way...
#1
not everything interacts well with "stateless"
JSConf CO @a0viedo
#2
when you have a hammer everything sounds like a serverless app
JSConf CO @a0viedo
#3
when asking for HTML, CSS or JS not everyone is super friendly
JSConf CO @a0viedo
Next steps
improve graphs for CSS colors (color bar is not taking frequency into account)
investigate if there are metrics (other than Lighthouse) on web accessibility that can be automated
analyze what tips can be automated the HTML results
JSConf CO @a0viedo
Next steps
add gallery section
compare two websites mode
add CSS framework detection
JSConf CO @a0viedo
¡Gracias Colombia!
Come and find me after the talk, I'm more than happy to chat about the project :)