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 :)

bit.ly/webcodex-slides

A codex for the web

By Alejandro Oviedo García

A codex for the web

  • 162
Loading comments...

More from Alejandro Oviedo García