Si te gustó el PlatziHack anterior, ahora "¡vais a flipar!" como dirían los españoles … 😃
Con este nuevo hack tendrás a mano los detalles del perfil de cada usuario con sólo mover el ratón sobre cualquiera de los enlaces a perfiles que hay en Platzi. Y lo mejor es que sirve en la mayoría de las secciones de la plataforma, hasta en el Platzi Live!
PASOS para usar el hack
Ingresa al inspector de código del navegador, en las Opciones de Desarrollador ó Presionando Ctrl + Shift + i, si usas Chrome. (recomendado)
Copia el siguiente código JavaScript y pégalo en la Consola del Inspector
let a = '',
$s = document.createElement('style')
$s.textContent = `
.i{padding:1rem;position:fixed;width:315px;height:100px;box-shadow:0 3px 40px rgba(0,0,0,.4);z-index:1000;border-radius:5px;overflow:hidden}
.av{border-radius:100%;height:100px;width:100px;background-size:cover;background-position:center center}
.avi{padding-left:15px;float:left;width:200px}
.sl{float:left;position:relative}
.r{position:absolute;width:75px;height:10px;left:28px;bottom:18px;border:1px solid #586a74;border-radius:15px;background:#fff;overflow:hidden}
.is{float:left;margin-right:.25rem;width:20px;height:20px}
.tw,.fb,.wb{background: transparent url(https://goo.gl/H7CXfU) -1px center no-repeat}
.fb{background-position:-23px center}
.wb{background-position:right center}
.is:last{margin-right:0}
.bi{height:2.5em;overflow:hidden;font-size:small;font-style:italic;margin:0.25rem 0}
.em{float:right;margin:.35rem 0 0 0}
.pa{padding:0 0.25rem 0 0.5rem;height:15px;vertical-align:middle}
.em a{font-weight:bold;margin:.35rem .5rem 0 0;color:#0791e6;text-decoration:underline}
.b{right:0;position:absolute;width:24px;height:24px;border-radius:100%;overflow:hidden}
.c{padding:.5rem .75rem;color:#777;text-decoration:none;position:absolute;right:0;top:0}
.ui{font-size:small;font-weight:bold;color:#0791e6}
.nc{height:1.25em;overflow:hidden}
.rd{margin:.25rem;margin-left:0;float:left}
.rs{vertical-align:top;z-index:1;position:absolute;height:10px;width:100%}
.g{background-color:#98ca3f;position:absolute;z-index:0;top:-1px;height:12px;left:-1px}`document.head.append($s)
document.querySelectorAll('[href*="/@"]').forEach( el => {
el.addEventListener('mouseenter', e => iU(e, true))
})
const iU = (e, sw) => {
let $if = document.querySelector('.i')
if (!sw) {
if ($if) $if.remove()
} else {
if (!$if) $if = document.createElement('div')
let id_u = e.target.getAttribute('href').match(/([\w\d\_]+)/gi);
a = id_u
$if.classList.add('i')
$if.style.left = (e.clientX + 15) + 'px'
$if.style.top = (e.clientY - 50) + 'px'
$if.innerHTML = ''
$if.style.background = "#FFF url(https://goo.gl/hTd8pC) no-repeat -110px center"document.body.append($if)
url = `https://noesishosting.com/sw/platzi/?a=perfil&u=${id_u}`let html = ''
fetch(url).then(rsp => rsp.json()).then(rs => {
if (a == rs.data['nombre_usuario']) {
$if = document.querySelector('.i')
let ar = (Math.ceil(~~((rs.data['platzi_rank']) * 100 / 20000) / 16.7) * 16.7) + '%',
pr = rs.data['platzi_rank']
let redes = ''if (rs.data['twitter'] != '') redes += `<a title="Ir a Twitter" target="_blank" href="${rs.data['twitter']}"><div class="is tw"></div></a>`if (rs.data['facebook'] != '') redes += `<a title="Ir a Facebook" target="_blank" href="${rs.data['facebook']}"><div class="is fb"></div></a>`if (rs.data['web'] != '') redes += `<a title="${rs.data['web']}" target="_blank" href="${rs.data['web']}"><div class="is wb"></div></a>`if ($if) {
$if.style.background = "#fff"
html += `<a class="c" href="javascript:iU(null,false)">ⓧ</a><div class="sl">`if (rs.data['badge'] != '') html += `<div class="b"><img width="100%" src="${rs.data['badge']}"></div>`
html += `<a target="_blank" href="https://platzi.com/@${id_u}" title="Ir al perfil"><div class="av" style="background-image:url(${rs.data['avatar']})"></div></a></div><div class="avi">`if (rs.data['nombre_completo'] != '') html += `<div class="nc"><b>${rs.data['nombre_completo']} </b></div>`
html += `<a class="ui" target="_blank" href="https://platzi.com/@${id_u}">@${rs.data['nombre_usuario']}</a>`if (rs.data['pais'] != 'without_country') html += `<img float="right" class="pa" src="https://static.platzi.com/media/flags/${rs.data['pais']}.png"><small>${rs.data['pais']}</small><br><div class="bi">${rs.data['bio']}</div><small>`if (pr != '') html += `<div class="r" title="Platzi Rank: ${pr}"><img class="rs" src="https://goo.gl/kRr6Jn"><img class="g" style="width:${ar}"></div>`
html += `<div class="em"><a target="_blank" href="https://platzi.com/direct-messages/u/${id_u}">Enviar mensaje</a></div>`
html += `<div class="rd">${redes}</div></small></div>`
$if.innerHTML = html
}
}
})
}
}
(NOTA: Este hack usa un servicio web que hace algo de scraping sobre el perfil de los usuarios de Platzi. Sólo se muestran datos públicos que están accesibles desde la web. Algunos datos pudieran no mostrarse o mostrarse con errores (still in beta).)
Aquí tienes un enlace al pen del mismo código por si tienes problemas para copiarlo desde el tutorial.
LISTO!
¡Ahora puedes ver los detalles de tus compañeros estudiantes o de los miembros del team Platzi sin tener que abrir nuevos tabs ni salir de la página en la que te encuentras!
Recuerda darle click a la manito en el título si este tutorial te ha parecido útil … bai! 🤓🤘
PS: Estoy haciendo algunas pruebas para crear una extensión para Chrome y otra para Firefox (siguiendo una sugerencia de @sergiodxa) con los PlatziHacks que vayan surgiendo! ¿qué te parece?
