{"_id":"61f3f93d22a38747671d88a3","betaFeatures":{"newsletter":false,"embeds":false,"csvImport":false,"customCSS":false,"githubAsSource":false,"payments":false,"rssIntegration":false,"magazineLayout":false},"views":{"today":104,"thisWeek":680,"lastWeek":765,"thisMonth":2603,"allTime":27705},"stripe":{"connected":false},"numFollowers":0,"badgePageEnabled":true,"newsletterEnabled":true,"audioBlogEnabled":false,"textSelectionSharerEnabled":true,"newsletterFrequency":"asap","staticPages":[],"isFeatured":false,"dailyViewsForCurrentMonth":{"1677369600":64,"1677456000":61,"1677542400":105,"1677628800":109,"1677715200":110,"1677801600":100,"1677888000":93,"1677974400":78,"1678060800":78,"1678147200":75,"1678233600":96,"1678320000":92,"1678406400":84,"1678492800":70,"1678579200":54,"1678665600":62,"1678752000":129,"1678838400":98,"1678924800":125,"1679011200":165,"1679097600":75,"1679184000":57,"1679270400":72,"1679356800":87,"1679443200":121,"1679529600":112,"1679616000":127,"1679702400":83,"1679788800":21},"viewCountVisible":true,"readTimeHidden":false,"customCSSEnabled":true,"domainChecklistSkipped":false,"author":{"_id":"61f3f81122a38747671d886e","socialMedia":{"twitter":"https://twitter.com/jfergt","instagram":"","github":"https://github.com/jfernandogt/","stackoverflow":"","facebook":"","website":"https://jfbarrios.com","linkedin":"https://www.linkedin.com/in/jfbarrios/"},"location":"Guatemala","isBanned":false,"isDeactivated":false,"numFollowers":6,"numFollowing":0,"storiesCreated":[],"totalUpvotesReceived":0,"tagManagerOf":[],"isEvangelist":false,"isAmbassador":true,"hasGoldRing":true,"name":"Fernando Barrios","username":"jfergt","tagline":"Un blog con tutoriales sobre JavaScript, React, CSS y otros temas relacionados con el desarrollo de software.","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1643378705681/YxZu3l8yT.jpeg","dateJoined":"2022-01-28T14:05:05.194Z","bio":"

Soy desarrollador de software y apasionado por la tecnología y la enseñanza. Durante mis 12 años de carrera profesional, he trabajado en empresas NASDAQ y algunas otras con empresas de capital privado.

Actualmente, trabajo como Ingeniero de Software Senior y cuento con experiencia en diferentes áreas como desarrollo de software, implementación de sistemas y testing, diseño e implementación de sistemas en la nube, gestión de proyectos bajo metodologías ágiles como SCRUM y Kanban.

También soy cofundador de Laserants.com donde nos dedicamos a capacitar talento humano en el mundo de las TICs. Preparamos en áreas de tecnología muy especializadas como: Control y calidad de software, arquitectura de aplicaciones, cloud, DevOps y metodologías ágiles.

\n","publicationDomain":"jfbarrios.com","numPosts":10,"numSeries":1,"numReactions":34},"isActive":true,"username":"jfbarrios","domain":"jfbarrios.com","urlPattern":"simple","layout":"grid","title":"Fernando Barrios","links":{"twitter":"","instagram":"","github":"http://github.com/jfernandogt","website":"https://jfbarrios.com","hashnode":"https://hashnode.com/@jfergt","youtube":"","dailydev":"https://app.daily.dev/jfergt","linkedin":"https://www.linkedin.com/in/jfbarrios/"},"domainStatus":{"certIssued":true,"ready":true},"domainUpdatedOn":"2022-02-18T04:52:47.704Z","customRules":[],"menu":[{"priority":0,"_id":"620f22b2d589905b412918ee","type":"page","label":"Acerca de mí","page":{"_id":"620f1d1d25673f2740eecef6","isHidden":false,"priority":0,"title":"Acerca de mí","endpoint":"about"}},{"priority":0,"_id":"620f22c3d589905b412918f1","type":"page","label":"Contáctame","page":{"_id":"620f1fc3d589905b412918aa","isHidden":false,"priority":0,"title":"Contáctame","endpoint":"contacto"}}],"__v":0,"hasBadges":true,"darkModeLogo":"","headerColor":"","logo":"","darkModeEnabled":false,"description":"Un blog con tutoriales sobre JavaScript, React, CSS y otros temas relacionados con el desarrollo de software.","displayTitle":"Fernando Barrios","imprint":"","imprintMarkdown":"","meta":"Soy desarrollador de software y apasionado por la tecnología. Durante mis 11 años de carrera, he adquirido experiencia en diferentes áreas dentro del desarrollo de software.","metaHTML":"

Soy desarrollador de software y apasionado por la tecnología. Durante mis 11 años de carrera, he adquirido experiencia en diferentes áreas dentro del desarrollo de software.

\n","customCSSDraft":{"home":"/* Home */\n\n@import url(\"https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@500&family=Spartan:wght@500;600;700&display=swap\");\n\n/* Colores base */\n\n\n.dark #__next > div {\n background-color: #182029;\n}\n\n/* Header */\n.blog-header {\n font-family: \"Spartan\";\n color: rgb(20, 28, 58);\n}\n\n.dark .blog-header {\n background-color: #182029;\n color: white;\n}\n\n.blog-header .container {\n border-bottom: 4px solid #00e6cb;\n}\n\n/* Titulo del Blog */\n.blog-title a {\n font-family: \"Spartan\";\n}\n\n/* Navegación Header */\nnav .blog-nav-active {\n position: relative;\n}\n\nnav .blog-nav-active:hover {\n background-color: white;\n}\n\n.blog-nav-active::before {\n position: absolute;\n right: 3px;\n width: 6px;\n height: 6px;\n content: \"\";\n transition-timing-function: ease;\n transition-duration: 0.3s;\n transition-property: background-color, opacity;\n border-radius: 100%;\n background-color: #00e6cb;\n}\n\nnav .blog-nav {\n opacity: 1;\n}\n\nnav .blog-nav:hover {\n background-color: white;\n position: relative;\n}\n\n.dark nav .blog-nav:hover {\n background-color: transparent;\n}\n\nnav .blog-nav:hover::before {\n position: absolute;\n right: 3px;\n width: 6px;\n height: 6px;\n content: \"\";\n transition-timing-function: ease;\n transition-duration: 0.3s;\n transition-property: background-color, opacity;\n border-radius: 100%;\n background-color: rgb(20, 28, 58);\n opacity: 0.3;\n}\n\n.dark nav .blog-nav:hover::before {\n background-color: white;\n opacity: 1;\n}\n\nnav a {\n text-transform: none;\n font-size: 15px;\n}\n\n/* Texto de los post */\n.blog-post-card-wrapper .blog-post-card-brief {\n font-size: 14px;\n font-weight: 600;\n color: rgb(20, 28, 58);\n}\n.dark .blog-post-card-wrapper .blog-post-card-brief {\n color: white;\n}\n\n/* Fecha y tiempo de lectura de los posts */\n.blog-post-card-meta * {\n font-family: \"Source Code Pro\", monospace;\n font-weight: 500;\n}\n\na {\n color: #141c3a;\n}\n\n/* Titulos de los post Subrayado */\n.blog-post-card-title a,\n.blog-author-area-name a {\n padding-bottom: 0.2%;\n transition: background-size 0.6s ease-out;\n background: linear-gradient(#00e6cb, #00e6cb) no-repeat left 123%/0 40%;\n}\n.blog-post-card-title a:hover,\n.blog-author-area-name a:hover {\n background-size: 97% 40%;\n}\n\n/* Laserants */\na[href='https://laserants.com'],\n.dark a[href='https://laserants.com']\n{\n font-size: 1.2rem;\n text-decoration: none !important;\n letter-spacing: 1px;\n display: inline-block;\n position: relative;\n z-index: 2;\n}\n\na[href='https://laserants.com']::before\n{\n content: \"\";\n display: block;\n height: 6px;\n width: 100%;\n background: #48e9ee;\n position: absolute;\n bottom: 7px;\n z-index: -1;\n left: 0;\n transform: rotate(-2deg);\n}\n\n.dark a[href='https://laserants.com']::before\n{\n height: 3px;\n}","post":"/* Article */\n\n@import url(\"https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@500&family=Spartan:wght@500;600;700&display=swap\");\n\n/* Colores base */\n\n.dark #__next > div {\n background-color: #182029;\n}\n\n/* Header */\n.blog-header {\n font-family: \"Spartan\";\n color: rgb(20, 28, 58);\n}\n\n.dark .blog-header {\n background-color: #182029;\n color: white;\n}\n\n.blog-header .container {\n border-bottom: 4px solid #00e6cb;\n}\n\n/* Titulo del Blog */\n.blog-title a {\n font-family: \"Spartan\";\n}\n\n/* Navegación Header */\nnav .blog-nav-active {\n position: relative;\n}\n\nnav .blog-nav-active:hover {\n background-color: white;\n}\n\n.blog-nav-active::before {\n position: absolute;\n right: 3px;\n width: 6px;\n height: 6px;\n content: \"\";\n transition-timing-function: ease;\n transition-duration: 0.3s;\n transition-property: background-color, opacity;\n border-radius: 100%;\n background-color: #00e6cb;\n}\n\nnav .blog-nav {\n opacity: 1;\n}\n\nnav .blog-nav:hover {\n background-color: white;\n position: relative;\n}\n\n.dark nav .blog-nav:hover {\n background-color: transparent;\n}\n\nnav .blog-nav:hover::before {\n position: absolute;\n right: 3px;\n width: 6px;\n height: 6px;\n content: \"\";\n transition-timing-function: ease;\n transition-duration: 0.3s;\n transition-property: background-color, opacity;\n border-radius: 100%;\n background-color: rgb(20, 28, 58);\n opacity: 0.3;\n}\n\n.dark nav .blog-nav:hover::before {\n background-color: white;\n opacity: 1;\n}\n\nnav a {\n text-transform: none;\n font-size: 15px;\n}\n\n/* Tabla de contenido */\n#toc ul {\n font-weight: 500;\n}\n\n.blog-post-area {\n font-family: \"Source Code Pro\", monospace;\n}\n\n/* Fuentes Dark */\n\n/* Links */\na {\n color: #141c3a;\n}\n\n/* Extras */\n.blog-content-main .prose pre {\n border: 1px solid gainsboro;\n}\n\nh2,\nh3 {\n letter-spacing: 1px;\n display: inline-block;\n position: relative;\n z-index: 2;\n}\n\n/* Titulos underline */\nh2:before,\nh3:before {\n content: \"\";\n display: block;\n height: 7px;\n width: 104%;\n position: absolute;\n bottom: 1px;\n z-index: -1;\n left: -2%;\n}\nh2:before {\n background: linear-gradient(to right, #88e0bb, #88e0bb, #88e0bb, transparent);\n transform: rotate(-1deg);\n}\n\nh3:before {\n background: linear-gradient(to right, #fce66c, #fce66c, #fce66c, transparent);\n transform: rotate(-1deg);\n}\n\n.dark h2:before,\n.dark h3:before {\n content: \"\";\n display: block;\n height: 5px;\n width: 104%;\n position: absolute;\n bottom: 1px;\n z-index: -1;\n left: -2%;\n}\n.dark h2:before {\n background: #027565;\n}\n\n.dark h3:before {\n background: #fae98a;\n}\n\n/* Resaltado Bold */\nstrong {\n letter-spacing: 1px;\n display: inline-block;\n position: relative;\n z-index: 2;\n}\n\nstrong:before {\n content: \"\";\n display: block;\n height: 9px;\n width: 100%;\n background: #b9f033;\n position: absolute;\n bottom: 7px;\n z-index: -1;\n left: 0;\n}\n\n.dark strong:before {\n content: \"\";\n display: block;\n height: 2px;\n width: 100%;\n background: #ced100;\n position: absolute;\n bottom: 5px;\n z-index: -1;\n left: 0;\n transform: rotate(179deg);\n}\n\n/* Links dentro del post */\n.dark #post-content-wrapper a {\n color: #93b0ff;\n}\n\n#post-content-wrapper pre {\n color: #e5e7eb;\n font-family: \"Source Code Pro\", monospace;\n}\n\n/* Para la parte de código */\n.hljs-params,\n.hljs-class .hljs-title {\n color: #166fc1;\n}\n.dark .hljs-params,\n.hljs-class .hljs-title {\n color: #68aff0;\n}\n\n.hljs-code,\n.hljs-title,\n.hljs-section,\n.hljs-selector-class {\n color: #63bd00;\n}\n.hljs-comment {\n color: #afafaf;\n}\n.dark .hljs-comment {\n color: #5a5a5a;\n}\n.hljs,\n.hljs-tag,\n.hljs-subst {\n color: #0e0e0e;\n}\n.dark .hljs,\n.hljs-tag,\n.hljs-subst {\n color: #f8f8f2;\n}\n.dark .blog-content-main .prose pre {\n color: #e2e8f0;\n background-color: #182029;\n border-color: #45505e;\n}\n.dark .hljs-string,\n.dark .hljs-type,\n.dark .hljs-built_in,\n.dark .hljs-builtin-name,\n.dark .hljs-selector-id,\n.dark .hljs-selector-attr,\n.dark .hljs-selector-pseudo,\n.dark .hljs-addition,\n.dark .hljs-variable,\n.dark .hljs-template-variable {\n color: #9db0ff;\n}\n.dark .hljs-code,\n.dark .hljs-title,\n.dark .hljs-section,\n.dark .hljs-selector-class {\n color: #47cd92;\n}\n.dark .hljs-keyword,\n.hljs-selector-tag,\n.hljs-name,\n.hljs-attr {\n color: #ff82af;\n}\n\n.hljs-string,\n.hljs-type,\n.hljs-built_in,\n.hljs-builtin-name,\n.hljs-selector-id,\n.hljs-selector-attr,\n.hljs-selector-pseudo,\n.hljs-addition,\n.hljs-variable,\n.hljs-template-variable {\n color: #035af9;\n}\n\n.blog-post-area {\n padding-top: 20px;\n}\n.post-cover {\n border-radius: 8px;\n}\n.dark .border-brand-blue {\n border-color: #4c5869;\n}\n.border-brand-blue {\n border-color: #e0e0e0;\n}\n.button-transparent.active {\n color: #5c5c5c;\n}\n.dark .button-transparent.active {\n color: #949494;\n}\n.dark .button-primary {\n border-color: #c5c5c5;\n color: #eae7e7;\n}\n\n/* Boton de reacción de la carita abajo */\n.blog-content-sidebar button:hover {\n animation: shake 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;\n transform: translate3d(0, 0, 0);\n backface-visibility: hidden;\n perspective: 1000px;\n}\n\n@keyframes shake {\n 10%,\n 90% {\n transform: translate3d(-1px, 0, 0);\n }\n 20%,\n 80% {\n transform: translate3d(2px, 0, 0);\n }\n 30%,\n 50%,\n 70% {\n transform: translate3d(-4px, 0, 0);\n }\n 40%,\n 60% {\n transform: translate3d(4px, 0, 0);\n }\n}\n\n/* Laserants */\n\na[href='https://laserants.com'],\n.dark a[href='https://laserants.com']\n{\n font-size: 1.2rem;\n text-decoration: none !important;\n letter-spacing: 1px;\n display: inline-block;\n position: relative;\n z-index: 2;\n}\n\na[href='https://laserants.com']::before\n{\n content: \"\";\n display: block;\n height: 6px;\n width: 100%;\n background: #48e9ee;\n position: absolute;\n bottom: 7px;\n z-index: -1;\n left: 0;\n transform: rotate(-2deg);\n}\n\n.dark a[href='https://laserants.com']::before\n{\n height: 3px;\n}\n\n/* More articles */\n.blog-more-articles {\n text-align: center;\n}\n.blog-more-articles-title {\n color: black !important;\n font-size: 1.5rem;\n}\n\n.dark .blog-more-articles-title {\n color: white !important;\n}\n\n.blog-more-articles-wrapper {\n text-align: left;\n}","static":"/* Pages */\n@import url(\"https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@500&family=Spartan:wght@500;600;700&display=swap\");\n\n/* Fuentes */\nheader {\n font-family: \"Spartan\";\n color: rgb(20, 28, 58);\n}\n\n/* Header */\n.blog-header .container {\n border-bottom: 4px solid #00e6cb;\n}\n\nnav .blog-nav-active {\n position: relative;\n}\n\nnav .blog-nav-active:hover {\n background-color: white;\n}\n\n.blog-nav-active::before {\n position: absolute;\n right: 3px;\n width: 6px;\n height: 6px;\n content: \"\";\n transition-timing-function: ease;\n transition-duration: 0.3s;\n transition-property: background-color, opacity;\n border-radius: 100%;\n background-color: #00e6cb;\n}\n\n/* Navs con el punto arriba y quitar el comportamiento actual */\nnav .blog-nav {\n opacity: 1;\n}\n\nnav .blog-nav:hover {\n background-color: white;\n position: relative;\n}\n\n.dark nav .blog-nav:hover {\n background-color: transparent;\n}\n\nnav .blog-nav:hover::before {\n position: absolute;\n right: 3px;\n width: 6px;\n height: 6px;\n content: \"\";\n transition-timing-function: ease;\n transition-duration: 0.3s;\n transition-property: background-color, opacity;\n border-radius: 100%;\n background-color: rgb(20, 28, 58);\n opacity: 0.3;\n}\n\n.dark nav .blog-nav:hover::before {\n background-color: white;\n opacity: 1;\n}\n\nnav a {\n text-transform: none;\n font-size: 15px;\n}\n\n/* Blog Page Area */\n.blog-page-area {\n font-family: \"Source Code Pro\", monospace;\n}\n\n/* blockquote */\n.blog-page-area .blog-page-content blockquote,\n.dark .blog-page-area .blog-page-content blockquote {\n font-family: \"Spartan\", sans-serif;\n line-height: 1.5;\n font-size: 22px;\n position: relative;\n box-sizing: border-box;\n width: 100%;\n padding-left: 55px;\n font-weight: 500;\n font-style: normal;\n color: inherit;\n border-left-width: 0;\n border-left-color: transparent;\n quotes: none;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.dark .blog-page-area .blog-page-content blockquote::before,\n.blog-page-area .blog-page-content blockquote::before {\n font-family: \"Spartan\";\n font-size: 120px;\n font-weight: 700;\n position: absolute;\n top: -20px;\n left: -15px;\n content: '\"';\n color: rgb(0, 230, 203);\n}\n\n@media (min-width: 768px) {\n .blog-page-area .blog-page-content blockquote,\n .dark .blog-page-area .blog-page-content blockquote {\n font-size: 25px;\n }\n\n .dark .blog-page-area .blog-page-content blockquote::before,\n .blog-page-area .blog-page-content blockquote::before {\n font-size: 100px;\n top: -15px;\n }\n}\n\n@media (min-width: 1024px) {\n .blog-page-area .blog-page-content blockquote,\n .dark .blog-page-area .blog-page-content blockquote {\n font-size: 30px;\n }\n\n .dark .blog-page-area .blog-page-content blockquote::before,\n .blog-page-area .blog-page-content blockquote::before {\n left: -5px;\n }\n}\n\n.dark #__next > div {\n background-color: #182029;\n}\n\n/* Laserants */\na[href='https://laserants.com'],\n.dark a[href='https://laserants.com']\n{\n font-size: 1.2rem;\n text-decoration: none !important;\n letter-spacing: 1px;\n display: inline-block;\n position: relative;\n z-index: 2;\n}\n\na[href='https://laserants.com']::before\n{\n content: \"\";\n display: block;\n height: 6px;\n width: 100%;\n background: #48e9ee;\n position: absolute;\n bottom: 7px;\n z-index: -1;\n left: 0;\n transform: rotate(-2deg);\n}\n\n.dark a[href='https://laserants.com']::before\n{\n height: 3px;\n}","homeMin":"@import url(\"https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@500&family=Spartan:wght@500;600;700&display=swap\");.dark #__next>div{background-color:#182029}.blog-header{font-family:\"Spartan\";color:#141c3a}.dark .blog-header{background-color:#182029;color:white}.blog-header .container{border-bottom:4px solid #00e6cb}.blog-title a{font-family:\"Spartan\"}nav .blog-nav-active{position:relative}nav .blog-nav-active:hover{background-color:white}.blog-nav-active::before{position:absolute;right:3px;width:6px;height:6px;content:\"\";transition-timing-function:ease;transition-duration:.3s;transition-property:background-color,opacity;border-radius:100%;background-color:#00e6cb}nav .blog-nav{opacity:1}nav .blog-nav:hover{background-color:white;position:relative}.dark nav .blog-nav:hover{background-color:transparent}nav .blog-nav:hover::before{position:absolute;right:3px;width:6px;height:6px;content:\"\";transition-timing-function:ease;transition-duration:.3s;transition-property:background-color,opacity;border-radius:100%;background-color:#141c3a;opacity:.3}.dark nav .blog-nav:hover::before{background-color:white;opacity:1}nav a{text-transform:none;font-size:15px}.blog-post-card-wrapper .blog-post-card-brief{font-size:14px;font-weight:600;color:#141c3a}.dark .blog-post-card-wrapper .blog-post-card-brief{color:white}.blog-post-card-meta *{font-family:\"Source Code Pro\",monospace;font-weight:500}a{color:#141c3a}.blog-post-card-title a,.blog-author-area-name a{padding-bottom:.2%;transition:background-size .6s ease-out;background:linear-gradient(#00e6cb,#00e6cb) no-repeat left 123%/0 40%}.blog-post-card-title a:hover,.blog-author-area-name a:hover{background-size:97% 40%}a[href='https://laserants.com'],.dark a[href='https://laserants.com']{font-size:1.2rem;text-decoration:none !important;letter-spacing:1px;display:inline-block;position:relative;z-index:2}a[href='https://laserants.com']::before{content:\"\";display:block;height:6px;width:100%;background:#48e9ee;position:absolute;bottom:7px;z-index:-1;left:0;transform:rotate(-2deg)}.dark a[href='https://laserants.com']::before{height:3px}","postMin":"@import url(\"https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@500&family=Spartan:wght@500;600;700&display=swap\");.dark #__next>div{background-color:#182029}.blog-header{font-family:\"Spartan\";color:#141c3a}.dark .blog-header{background-color:#182029;color:white}.blog-header .container{border-bottom:4px solid #00e6cb}.blog-title a{font-family:\"Spartan\"}nav .blog-nav-active{position:relative}nav .blog-nav-active:hover{background-color:white}.blog-nav-active::before{position:absolute;right:3px;width:6px;height:6px;content:\"\";transition-timing-function:ease;transition-duration:.3s;transition-property:background-color,opacity;border-radius:100%;background-color:#00e6cb}nav .blog-nav{opacity:1}nav .blog-nav:hover{background-color:white;position:relative}.dark nav .blog-nav:hover{background-color:transparent}nav .blog-nav:hover::before{position:absolute;right:3px;width:6px;height:6px;content:\"\";transition-timing-function:ease;transition-duration:.3s;transition-property:background-color,opacity;border-radius:100%;background-color:#141c3a;opacity:.3}.dark nav .blog-nav:hover::before{background-color:white;opacity:1}nav a{text-transform:none;font-size:15px}#toc ul{font-weight:500}.blog-post-area{font-family:\"Source Code Pro\",monospace}a{color:#141c3a}.blog-content-main .prose pre{border:1px solid gainsboro}h2,h3{letter-spacing:1px;display:inline-block;position:relative;z-index:2}h2:before,h3:before{content:\"\";display:block;height:7px;width:104%;position:absolute;bottom:1px;z-index:-1;left:-2%}h2:before{background:linear-gradient(to right,#88e0bb,#88e0bb,#88e0bb,transparent);transform:rotate(-1deg)}h3:before{background:linear-gradient(to right,#fce66c,#fce66c,#fce66c,transparent);transform:rotate(-1deg)}.dark h2:before,.dark h3:before{content:\"\";display:block;height:5px;width:104%;position:absolute;bottom:1px;z-index:-1;left:-2%}.dark h2:before{background:#027565}.dark h3:before{background:#fae98a}strong{letter-spacing:1px;display:inline-block;position:relative;z-index:2}strong:before{content:\"\";display:block;height:9px;width:100%;background:#b9f033;position:absolute;bottom:7px;z-index:-1;left:0}.dark strong:before{content:\"\";display:block;height:2px;width:100%;background:#ced100;position:absolute;bottom:5px;z-index:-1;left:0;transform:rotate(179deg)}.dark #post-content-wrapper a{color:#93b0ff}#post-content-wrapper pre{color:#e5e7eb;font-family:\"Source Code Pro\",monospace}.hljs-params,.hljs-class .hljs-title{color:#166fc1}.dark .hljs-params,.hljs-class .hljs-title{color:#68aff0}.hljs-code,.hljs-title,.hljs-section,.hljs-selector-class{color:#63bd00}.hljs-comment{color:#afafaf}.dark .hljs-comment{color:#5a5a5a}.hljs,.hljs-tag,.hljs-subst{color:#0e0e0e}.dark .hljs,.hljs-tag,.hljs-subst{color:#f8f8f2}.dark .blog-content-main .prose pre{color:#e2e8f0;background-color:#182029;border-color:#45505e}.dark .hljs-string,.dark .hljs-type,.dark .hljs-built_in,.dark .hljs-builtin-name,.dark .hljs-selector-id,.dark .hljs-selector-attr,.dark .hljs-selector-pseudo,.dark .hljs-addition,.dark .hljs-variable,.dark .hljs-template-variable{color:#9db0ff}.dark .hljs-code,.dark .hljs-title,.dark .hljs-section,.dark .hljs-selector-class{color:#47cd92}.dark .hljs-keyword,.hljs-selector-tag,.hljs-name,.hljs-attr{color:#ff82af}.hljs-string,.hljs-type,.hljs-built_in,.hljs-builtin-name,.hljs-selector-id,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-addition,.hljs-variable,.hljs-template-variable{color:#035af9}.blog-post-area{padding-top:20px}.post-cover{border-radius:8px}.dark .border-brand-blue{border-color:#4c5869}.border-brand-blue{border-color:#e0e0e0}.button-transparent.active{color:#5c5c5c}.dark .button-transparent.active{color:#949494}.dark .button-primary{border-color:#c5c5c5;color:#eae7e7}.blog-content-sidebar button:hover{animation:shake .8s cubic-bezier(0.36,0.07,0.19,0.97) both;transform:translate3d(0,0,0);backface-visibility:hidden;perspective:1000px}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}a[href='https://laserants.com'],.dark a[href='https://laserants.com']{font-size:1.2rem;text-decoration:none !important;letter-spacing:1px;display:inline-block;position:relative;z-index:2}a[href='https://laserants.com']::before{content:\"\";display:block;height:6px;width:100%;background:#48e9ee;position:absolute;bottom:7px;z-index:-1;left:0;transform:rotate(-2deg)}.dark a[href='https://laserants.com']::before{height:3px}.blog-more-articles{text-align:center}.blog-more-articles-title{color:black !important;font-size:1.5rem}.dark .blog-more-articles-title{color:white !important}.blog-more-articles-wrapper{text-align:left}","staticMin":"@import url(\"https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@500&family=Spartan:wght@500;600;700&display=swap\");header{font-family:\"Spartan\";color:#141c3a}.blog-header .container{border-bottom:4px solid #00e6cb}nav .blog-nav-active{position:relative}nav .blog-nav-active:hover{background-color:white}.blog-nav-active::before{position:absolute;right:3px;width:6px;height:6px;content:\"\";transition-timing-function:ease;transition-duration:.3s;transition-property:background-color,opacity;border-radius:100%;background-color:#00e6cb}nav .blog-nav{opacity:1}nav .blog-nav:hover{background-color:white;position:relative}.dark nav .blog-nav:hover{background-color:transparent}nav .blog-nav:hover::before{position:absolute;right:3px;width:6px;height:6px;content:\"\";transition-timing-function:ease;transition-duration:.3s;transition-property:background-color,opacity;border-radius:100%;background-color:#141c3a;opacity:.3}.dark nav .blog-nav:hover::before{background-color:white;opacity:1}nav a{text-transform:none;font-size:15px}.blog-page-area{font-family:\"Source Code Pro\",monospace}.blog-page-area .blog-page-content blockquote,.dark .blog-page-area .blog-page-content blockquote{font-family:\"Spartan\",sans-serif;line-height:1.5;font-size:22px;position:relative;box-sizing:border-box;width:100%;padding-left:55px;font-weight:500;font-style:normal;color:inherit;border-left-width:0;border-left-color:transparent;quotes:none;margin-top:0;margin-bottom:0}.dark .blog-page-area .blog-page-content blockquote::before,.blog-page-area .blog-page-content blockquote::before{font-family:\"Spartan\";font-size:120px;font-weight:700;position:absolute;top:-20px;left:-15px;content:'\"';color:#00e6cb}@media(min-width:768px){.blog-page-area .blog-page-content blockquote,.dark .blog-page-area .blog-page-content blockquote{font-size:25px}.dark .blog-page-area .blog-page-content blockquote::before,.blog-page-area .blog-page-content blockquote::before{font-size:100px;top:-15px}}@media(min-width:1024px){.blog-page-area .blog-page-content blockquote,.dark .blog-page-area .blog-page-content blockquote{font-size:30px}.dark .blog-page-area .blog-page-content blockquote::before,.blog-page-area .blog-page-content blockquote::before{left:-5px}}.dark #__next>div{background-color:#182029}a[href='https://laserants.com'],.dark a[href='https://laserants.com']{font-size:1.2rem;text-decoration:none !important;letter-spacing:1px;display:inline-block;position:relative;z-index:2}a[href='https://laserants.com']::before{content:\"\";display:block;height:6px;width:100%;background:#48e9ee;position:absolute;bottom:7px;z-index:-1;left:0;transform:rotate(-2deg)}.dark a[href='https://laserants.com']::before{height:3px}"},"customCSSPublished":{"home":"/* Home */\n\n@import url(\"https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@500&family=Spartan:wght@500;600;700&display=swap\");\n\n/* Colores base */\n\n\n.dark #__next > div {\n background-color: #182029;\n}\n\n/* Header */\n.blog-header {\n font-family: \"Spartan\";\n color: rgb(20, 28, 58);\n}\n\n.dark .blog-header {\n background-color: #182029;\n color: white;\n}\n\n.blog-header .container {\n border-bottom: 4px solid #00e6cb;\n}\n\n/* Titulo del Blog */\n.blog-title a {\n font-family: \"Spartan\";\n}\n\n/* Navegación Header */\nnav .blog-nav-active {\n position: relative;\n}\n\nnav .blog-nav-active:hover {\n background-color: white;\n}\n\n.blog-nav-active::before {\n position: absolute;\n right: 3px;\n width: 6px;\n height: 6px;\n content: \"\";\n transition-timing-function: ease;\n transition-duration: 0.3s;\n transition-property: background-color, opacity;\n border-radius: 100%;\n background-color: #00e6cb;\n}\n\nnav .blog-nav {\n opacity: 1;\n}\n\nnav .blog-nav:hover {\n background-color: white;\n position: relative;\n}\n\n.dark nav .blog-nav:hover {\n background-color: transparent;\n}\n\nnav .blog-nav:hover::before {\n position: absolute;\n right: 3px;\n width: 6px;\n height: 6px;\n content: \"\";\n transition-timing-function: ease;\n transition-duration: 0.3s;\n transition-property: background-color, opacity;\n border-radius: 100%;\n background-color: rgb(20, 28, 58);\n opacity: 0.3;\n}\n\n.dark nav .blog-nav:hover::before {\n background-color: white;\n opacity: 1;\n}\n\nnav a {\n text-transform: none;\n font-size: 15px;\n}\n\n/* Texto de los post */\n.blog-post-card-wrapper .blog-post-card-brief {\n font-size: 14px;\n font-weight: 600;\n color: rgb(20, 28, 58);\n}\n.dark .blog-post-card-wrapper .blog-post-card-brief {\n color: white;\n}\n\n/* Fecha y tiempo de lectura de los posts */\n.blog-post-card-meta * {\n font-family: \"Source Code Pro\", monospace;\n font-weight: 500;\n}\n\na {\n color: #141c3a;\n}\n\n/* Titulos de los post Subrayado */\n.blog-post-card-title a,\n.blog-author-area-name a {\n padding-bottom: 0.2%;\n transition: background-size 0.6s ease-out;\n background: linear-gradient(#00e6cb, #00e6cb) no-repeat left 123%/0 40%;\n}\n.blog-post-card-title a:hover,\n.blog-author-area-name a:hover {\n background-size: 97% 40%;\n}\n\n/* Laserants */\na[href='https://laserants.com'],\n.dark a[href='https://laserants.com']\n{\n font-size: 1.2rem;\n text-decoration: none !important;\n letter-spacing: 1px;\n display: inline-block;\n position: relative;\n z-index: 2;\n}\n\na[href='https://laserants.com']::before\n{\n content: \"\";\n display: block;\n height: 6px;\n width: 100%;\n background: #48e9ee;\n position: absolute;\n bottom: 7px;\n z-index: -1;\n left: 0;\n transform: rotate(-2deg);\n}\n\n.dark a[href='https://laserants.com']::before\n{\n height: 3px;\n}","post":"/* Article */\n\n@import url(\"https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@500&family=Spartan:wght@500;600;700&display=swap\");\n\n/* Colores base */\n\n.dark #__next > div {\n background-color: #182029;\n}\n\n/* Header */\n.blog-header {\n font-family: \"Spartan\";\n color: rgb(20, 28, 58);\n}\n\n.dark .blog-header {\n background-color: #182029;\n color: white;\n}\n\n.blog-header .container {\n border-bottom: 4px solid #00e6cb;\n}\n\n/* Titulo del Blog */\n.blog-title a {\n font-family: \"Spartan\";\n}\n\n/* Navegación Header */\nnav .blog-nav-active {\n position: relative;\n}\n\nnav .blog-nav-active:hover {\n background-color: white;\n}\n\n.blog-nav-active::before {\n position: absolute;\n right: 3px;\n width: 6px;\n height: 6px;\n content: \"\";\n transition-timing-function: ease;\n transition-duration: 0.3s;\n transition-property: background-color, opacity;\n border-radius: 100%;\n background-color: #00e6cb;\n}\n\nnav .blog-nav {\n opacity: 1;\n}\n\nnav .blog-nav:hover {\n background-color: white;\n position: relative;\n}\n\n.dark nav .blog-nav:hover {\n background-color: transparent;\n}\n\nnav .blog-nav:hover::before {\n position: absolute;\n right: 3px;\n width: 6px;\n height: 6px;\n content: \"\";\n transition-timing-function: ease;\n transition-duration: 0.3s;\n transition-property: background-color, opacity;\n border-radius: 100%;\n background-color: rgb(20, 28, 58);\n opacity: 0.3;\n}\n\n.dark nav .blog-nav:hover::before {\n background-color: white;\n opacity: 1;\n}\n\nnav a {\n text-transform: none;\n font-size: 15px;\n}\n\n/* Tabla de contenido */\n#toc ul {\n font-weight: 500;\n}\n\n.blog-post-area {\n font-family: \"Source Code Pro\", monospace;\n}\n\n/* Fuentes Dark */\n\n/* Links */\na {\n color: #141c3a;\n}\n\n/* Extras */\n.blog-content-main .prose pre {\n border: 1px solid gainsboro;\n}\n\nh2,\nh3 {\n letter-spacing: 1px;\n display: inline-block;\n position: relative;\n z-index: 2;\n}\n\n/* Titulos underline */\nh2:before,\nh3:before {\n content: \"\";\n display: block;\n height: 7px;\n width: 104%;\n position: absolute;\n bottom: 1px;\n z-index: -1;\n left: -2%;\n}\nh2:before {\n background: linear-gradient(to right, #88e0bb, #88e0bb, #88e0bb, transparent);\n transform: rotate(-1deg);\n}\n\nh3:before {\n background: linear-gradient(to right, #fce66c, #fce66c, #fce66c, transparent);\n transform: rotate(-1deg);\n}\n\n.dark h2:before,\n.dark h3:before {\n content: \"\";\n display: block;\n height: 5px;\n width: 104%;\n position: absolute;\n bottom: 1px;\n z-index: -1;\n left: -2%;\n}\n.dark h2:before {\n background: #027565;\n}\n\n.dark h3:before {\n background: #fae98a;\n}\n\n/* Resaltado Bold */\nstrong {\n letter-spacing: 1px;\n display: inline-block;\n position: relative;\n z-index: 2;\n}\n\nstrong:before {\n content: \"\";\n display: block;\n height: 9px;\n width: 100%;\n background: #b9f033;\n position: absolute;\n bottom: 7px;\n z-index: -1;\n left: 0;\n}\n\n.dark strong:before {\n content: \"\";\n display: block;\n height: 2px;\n width: 100%;\n background: #ced100;\n position: absolute;\n bottom: 5px;\n z-index: -1;\n left: 0;\n transform: rotate(179deg);\n}\n\n/* Links dentro del post */\n.dark #post-content-wrapper a {\n color: #93b0ff;\n}\n\n#post-content-wrapper pre {\n color: #e5e7eb;\n font-family: \"Source Code Pro\", monospace;\n}\n\n/* Para la parte de código */\n.hljs-params,\n.hljs-class .hljs-title {\n color: #166fc1;\n}\n.dark .hljs-params,\n.hljs-class .hljs-title {\n color: #68aff0;\n}\n\n.hljs-code,\n.hljs-title,\n.hljs-section,\n.hljs-selector-class {\n color: #63bd00;\n}\n.hljs-comment {\n color: #afafaf;\n}\n.dark .hljs-comment {\n color: #5a5a5a;\n}\n.hljs,\n.hljs-tag,\n.hljs-subst {\n color: #0e0e0e;\n}\n.dark .hljs,\n.hljs-tag,\n.hljs-subst {\n color: #f8f8f2;\n}\n.dark .blog-content-main .prose pre {\n color: #e2e8f0;\n background-color: #182029;\n border-color: #45505e;\n}\n.dark .hljs-string,\n.dark .hljs-type,\n.dark .hljs-built_in,\n.dark .hljs-builtin-name,\n.dark .hljs-selector-id,\n.dark .hljs-selector-attr,\n.dark .hljs-selector-pseudo,\n.dark .hljs-addition,\n.dark .hljs-variable,\n.dark .hljs-template-variable {\n color: #9db0ff;\n}\n.dark .hljs-code,\n.dark .hljs-title,\n.dark .hljs-section,\n.dark .hljs-selector-class {\n color: #47cd92;\n}\n.dark .hljs-keyword,\n.hljs-selector-tag,\n.hljs-name,\n.hljs-attr {\n color: #ff82af;\n}\n\n.hljs-string,\n.hljs-type,\n.hljs-built_in,\n.hljs-builtin-name,\n.hljs-selector-id,\n.hljs-selector-attr,\n.hljs-selector-pseudo,\n.hljs-addition,\n.hljs-variable,\n.hljs-template-variable {\n color: #035af9;\n}\n\n.blog-post-area {\n padding-top: 20px;\n}\n.post-cover {\n border-radius: 8px;\n}\n.dark .border-brand-blue {\n border-color: #4c5869;\n}\n.border-brand-blue {\n border-color: #e0e0e0;\n}\n.button-transparent.active {\n color: #5c5c5c;\n}\n.dark .button-transparent.active {\n color: #949494;\n}\n.dark .button-primary {\n border-color: #c5c5c5;\n color: #eae7e7;\n}\n\n/* Boton de reacción de la carita abajo */\n.blog-content-sidebar button:hover {\n animation: shake 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;\n transform: translate3d(0, 0, 0);\n backface-visibility: hidden;\n perspective: 1000px;\n}\n\n@keyframes shake {\n 10%,\n 90% {\n transform: translate3d(-1px, 0, 0);\n }\n 20%,\n 80% {\n transform: translate3d(2px, 0, 0);\n }\n 30%,\n 50%,\n 70% {\n transform: translate3d(-4px, 0, 0);\n }\n 40%,\n 60% {\n transform: translate3d(4px, 0, 0);\n }\n}\n\n/* Laserants */\n\na[href='https://laserants.com'],\n.dark a[href='https://laserants.com']\n{\n font-size: 1.2rem;\n text-decoration: none !important;\n letter-spacing: 1px;\n display: inline-block;\n position: relative;\n z-index: 2;\n}\n\na[href='https://laserants.com']::before\n{\n content: \"\";\n display: block;\n height: 6px;\n width: 100%;\n background: #48e9ee;\n position: absolute;\n bottom: 7px;\n z-index: -1;\n left: 0;\n transform: rotate(-2deg);\n}\n\n.dark a[href='https://laserants.com']::before\n{\n height: 3px;\n}\n\n/* More articles */\n.blog-more-articles {\n text-align: center;\n}\n.blog-more-articles-title {\n color: black !important;\n font-size: 1.5rem;\n}\n\n.dark .blog-more-articles-title {\n color: white !important;\n}\n\n.blog-more-articles-wrapper {\n text-align: left;\n}","static":"/* Pages */\n@import url(\"https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@500&family=Spartan:wght@500;600;700&display=swap\");\n\n/* Fuentes */\nheader {\n font-family: \"Spartan\";\n color: rgb(20, 28, 58);\n}\n\n/* Header */\n.blog-header .container {\n border-bottom: 4px solid #00e6cb;\n}\n\nnav .blog-nav-active {\n position: relative;\n}\n\nnav .blog-nav-active:hover {\n background-color: white;\n}\n\n.blog-nav-active::before {\n position: absolute;\n right: 3px;\n width: 6px;\n height: 6px;\n content: \"\";\n transition-timing-function: ease;\n transition-duration: 0.3s;\n transition-property: background-color, opacity;\n border-radius: 100%;\n background-color: #00e6cb;\n}\n\n/* Navs con el punto arriba y quitar el comportamiento actual */\nnav .blog-nav {\n opacity: 1;\n}\n\nnav .blog-nav:hover {\n background-color: white;\n position: relative;\n}\n\n.dark nav .blog-nav:hover {\n background-color: transparent;\n}\n\nnav .blog-nav:hover::before {\n position: absolute;\n right: 3px;\n width: 6px;\n height: 6px;\n content: \"\";\n transition-timing-function: ease;\n transition-duration: 0.3s;\n transition-property: background-color, opacity;\n border-radius: 100%;\n background-color: rgb(20, 28, 58);\n opacity: 0.3;\n}\n\n.dark nav .blog-nav:hover::before {\n background-color: white;\n opacity: 1;\n}\n\nnav a {\n text-transform: none;\n font-size: 15px;\n}\n\n/* Blog Page Area */\n.blog-page-area {\n font-family: \"Source Code Pro\", monospace;\n}\n\n/* blockquote */\n.blog-page-area .blog-page-content blockquote,\n.dark .blog-page-area .blog-page-content blockquote {\n font-family: \"Spartan\", sans-serif;\n line-height: 1.5;\n font-size: 22px;\n position: relative;\n box-sizing: border-box;\n width: 100%;\n padding-left: 55px;\n font-weight: 500;\n font-style: normal;\n color: inherit;\n border-left-width: 0;\n border-left-color: transparent;\n quotes: none;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.dark .blog-page-area .blog-page-content blockquote::before,\n.blog-page-area .blog-page-content blockquote::before {\n font-family: \"Spartan\";\n font-size: 120px;\n font-weight: 700;\n position: absolute;\n top: -20px;\n left: -15px;\n content: '\"';\n color: rgb(0, 230, 203);\n}\n\n@media (min-width: 768px) {\n .blog-page-area .blog-page-content blockquote,\n .dark .blog-page-area .blog-page-content blockquote {\n font-size: 25px;\n }\n\n .dark .blog-page-area .blog-page-content blockquote::before,\n .blog-page-area .blog-page-content blockquote::before {\n font-size: 100px;\n top: -15px;\n }\n}\n\n@media (min-width: 1024px) {\n .blog-page-area .blog-page-content blockquote,\n .dark .blog-page-area .blog-page-content blockquote {\n font-size: 30px;\n }\n\n .dark .blog-page-area .blog-page-content blockquote::before,\n .blog-page-area .blog-page-content blockquote::before {\n left: -5px;\n }\n}\n\n.dark #__next > div {\n background-color: #182029;\n}\n\n/* Laserants */\na[href='https://laserants.com'],\n.dark a[href='https://laserants.com']\n{\n font-size: 1.2rem;\n text-decoration: none !important;\n letter-spacing: 1px;\n display: inline-block;\n position: relative;\n z-index: 2;\n}\n\na[href='https://laserants.com']::before\n{\n content: \"\";\n display: block;\n height: 6px;\n width: 100%;\n background: #48e9ee;\n position: absolute;\n bottom: 7px;\n z-index: -1;\n left: 0;\n transform: rotate(-2deg);\n}\n\n.dark a[href='https://laserants.com']::before\n{\n height: 3px;\n}","homeMin":"@import url(\"https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@500&family=Spartan:wght@500;600;700&display=swap\");.dark #__next>div{background-color:#182029}.blog-header{font-family:\"Spartan\";color:#141c3a}.dark .blog-header{background-color:#182029;color:white}.blog-header .container{border-bottom:4px solid #00e6cb}.blog-title a{font-family:\"Spartan\"}nav .blog-nav-active{position:relative}nav .blog-nav-active:hover{background-color:white}.blog-nav-active::before{position:absolute;right:3px;width:6px;height:6px;content:\"\";transition-timing-function:ease;transition-duration:.3s;transition-property:background-color,opacity;border-radius:100%;background-color:#00e6cb}nav .blog-nav{opacity:1}nav .blog-nav:hover{background-color:white;position:relative}.dark nav .blog-nav:hover{background-color:transparent}nav .blog-nav:hover::before{position:absolute;right:3px;width:6px;height:6px;content:\"\";transition-timing-function:ease;transition-duration:.3s;transition-property:background-color,opacity;border-radius:100%;background-color:#141c3a;opacity:.3}.dark nav .blog-nav:hover::before{background-color:white;opacity:1}nav a{text-transform:none;font-size:15px}.blog-post-card-wrapper .blog-post-card-brief{font-size:14px;font-weight:600;color:#141c3a}.dark .blog-post-card-wrapper .blog-post-card-brief{color:white}.blog-post-card-meta *{font-family:\"Source Code Pro\",monospace;font-weight:500}a{color:#141c3a}.blog-post-card-title a,.blog-author-area-name a{padding-bottom:.2%;transition:background-size .6s ease-out;background:linear-gradient(#00e6cb,#00e6cb) no-repeat left 123%/0 40%}.blog-post-card-title a:hover,.blog-author-area-name a:hover{background-size:97% 40%}a[href='https://laserants.com'],.dark a[href='https://laserants.com']{font-size:1.2rem;text-decoration:none !important;letter-spacing:1px;display:inline-block;position:relative;z-index:2}a[href='https://laserants.com']::before{content:\"\";display:block;height:6px;width:100%;background:#48e9ee;position:absolute;bottom:7px;z-index:-1;left:0;transform:rotate(-2deg)}.dark a[href='https://laserants.com']::before{height:3px}","postMin":"@import url(\"https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@500&family=Spartan:wght@500;600;700&display=swap\");.dark #__next>div{background-color:#182029}.blog-header{font-family:\"Spartan\";color:#141c3a}.dark .blog-header{background-color:#182029;color:white}.blog-header .container{border-bottom:4px solid #00e6cb}.blog-title a{font-family:\"Spartan\"}nav .blog-nav-active{position:relative}nav .blog-nav-active:hover{background-color:white}.blog-nav-active::before{position:absolute;right:3px;width:6px;height:6px;content:\"\";transition-timing-function:ease;transition-duration:.3s;transition-property:background-color,opacity;border-radius:100%;background-color:#00e6cb}nav .blog-nav{opacity:1}nav .blog-nav:hover{background-color:white;position:relative}.dark nav .blog-nav:hover{background-color:transparent}nav .blog-nav:hover::before{position:absolute;right:3px;width:6px;height:6px;content:\"\";transition-timing-function:ease;transition-duration:.3s;transition-property:background-color,opacity;border-radius:100%;background-color:#141c3a;opacity:.3}.dark nav .blog-nav:hover::before{background-color:white;opacity:1}nav a{text-transform:none;font-size:15px}#toc ul{font-weight:500}.blog-post-area{font-family:\"Source Code Pro\",monospace}a{color:#141c3a}.blog-content-main .prose pre{border:1px solid gainsboro}h2,h3{letter-spacing:1px;display:inline-block;position:relative;z-index:2}h2:before,h3:before{content:\"\";display:block;height:7px;width:104%;position:absolute;bottom:1px;z-index:-1;left:-2%}h2:before{background:linear-gradient(to right,#88e0bb,#88e0bb,#88e0bb,transparent);transform:rotate(-1deg)}h3:before{background:linear-gradient(to right,#fce66c,#fce66c,#fce66c,transparent);transform:rotate(-1deg)}.dark h2:before,.dark h3:before{content:\"\";display:block;height:5px;width:104%;position:absolute;bottom:1px;z-index:-1;left:-2%}.dark h2:before{background:#027565}.dark h3:before{background:#fae98a}strong{letter-spacing:1px;display:inline-block;position:relative;z-index:2}strong:before{content:\"\";display:block;height:9px;width:100%;background:#b9f033;position:absolute;bottom:7px;z-index:-1;left:0}.dark strong:before{content:\"\";display:block;height:2px;width:100%;background:#ced100;position:absolute;bottom:5px;z-index:-1;left:0;transform:rotate(179deg)}.dark #post-content-wrapper a{color:#93b0ff}#post-content-wrapper pre{color:#e5e7eb;font-family:\"Source Code Pro\",monospace}.hljs-params,.hljs-class .hljs-title{color:#166fc1}.dark .hljs-params,.hljs-class .hljs-title{color:#68aff0}.hljs-code,.hljs-title,.hljs-section,.hljs-selector-class{color:#63bd00}.hljs-comment{color:#afafaf}.dark .hljs-comment{color:#5a5a5a}.hljs,.hljs-tag,.hljs-subst{color:#0e0e0e}.dark .hljs,.hljs-tag,.hljs-subst{color:#f8f8f2}.dark .blog-content-main .prose pre{color:#e2e8f0;background-color:#182029;border-color:#45505e}.dark .hljs-string,.dark .hljs-type,.dark .hljs-built_in,.dark .hljs-builtin-name,.dark .hljs-selector-id,.dark .hljs-selector-attr,.dark .hljs-selector-pseudo,.dark .hljs-addition,.dark .hljs-variable,.dark .hljs-template-variable{color:#9db0ff}.dark .hljs-code,.dark .hljs-title,.dark .hljs-section,.dark .hljs-selector-class{color:#47cd92}.dark .hljs-keyword,.hljs-selector-tag,.hljs-name,.hljs-attr{color:#ff82af}.hljs-string,.hljs-type,.hljs-built_in,.hljs-builtin-name,.hljs-selector-id,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-addition,.hljs-variable,.hljs-template-variable{color:#035af9}.blog-post-area{padding-top:20px}.post-cover{border-radius:8px}.dark .border-brand-blue{border-color:#4c5869}.border-brand-blue{border-color:#e0e0e0}.button-transparent.active{color:#5c5c5c}.dark .button-transparent.active{color:#949494}.dark .button-primary{border-color:#c5c5c5;color:#eae7e7}.blog-content-sidebar button:hover{animation:shake .8s cubic-bezier(0.36,0.07,0.19,0.97) both;transform:translate3d(0,0,0);backface-visibility:hidden;perspective:1000px}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}a[href='https://laserants.com'],.dark a[href='https://laserants.com']{font-size:1.2rem;text-decoration:none !important;letter-spacing:1px;display:inline-block;position:relative;z-index:2}a[href='https://laserants.com']::before{content:\"\";display:block;height:6px;width:100%;background:#48e9ee;position:absolute;bottom:7px;z-index:-1;left:0;transform:rotate(-2deg)}.dark a[href='https://laserants.com']::before{height:3px}.blog-more-articles{text-align:center}.blog-more-articles-title{color:black !important;font-size:1.5rem}.dark .blog-more-articles-title{color:white !important}.blog-more-articles-wrapper{text-align:left}","staticMin":"@import url(\"https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@500&family=Spartan:wght@500;600;700&display=swap\");header{font-family:\"Spartan\";color:#141c3a}.blog-header .container{border-bottom:4px solid #00e6cb}nav .blog-nav-active{position:relative}nav .blog-nav-active:hover{background-color:white}.blog-nav-active::before{position:absolute;right:3px;width:6px;height:6px;content:\"\";transition-timing-function:ease;transition-duration:.3s;transition-property:background-color,opacity;border-radius:100%;background-color:#00e6cb}nav .blog-nav{opacity:1}nav .blog-nav:hover{background-color:white;position:relative}.dark nav .blog-nav:hover{background-color:transparent}nav .blog-nav:hover::before{position:absolute;right:3px;width:6px;height:6px;content:\"\";transition-timing-function:ease;transition-duration:.3s;transition-property:background-color,opacity;border-radius:100%;background-color:#141c3a;opacity:.3}.dark nav .blog-nav:hover::before{background-color:white;opacity:1}nav a{text-transform:none;font-size:15px}.blog-page-area{font-family:\"Source Code Pro\",monospace}.blog-page-area .blog-page-content blockquote,.dark .blog-page-area .blog-page-content blockquote{font-family:\"Spartan\",sans-serif;line-height:1.5;font-size:22px;position:relative;box-sizing:border-box;width:100%;padding-left:55px;font-weight:500;font-style:normal;color:inherit;border-left-width:0;border-left-color:transparent;quotes:none;margin-top:0;margin-bottom:0}.dark .blog-page-area .blog-page-content blockquote::before,.blog-page-area .blog-page-content blockquote::before{font-family:\"Spartan\";font-size:120px;font-weight:700;position:absolute;top:-20px;left:-15px;content:'\"';color:#00e6cb}@media(min-width:768px){.blog-page-area .blog-page-content blockquote,.dark .blog-page-area .blog-page-content blockquote{font-size:25px}.dark .blog-page-area .blog-page-content blockquote::before,.blog-page-area .blog-page-content blockquote::before{font-size:100px;top:-15px}}@media(min-width:1024px){.blog-page-area .blog-page-content blockquote,.dark .blog-page-area .blog-page-content blockquote{font-size:30px}.dark .blog-page-area .blog-page-content blockquote::before,.blog-page-area .blog-page-content blockquote::before{left:-5px}}.dark #__next>div{background-color:#182029}a[href='https://laserants.com'],.dark a[href='https://laserants.com']{font-size:1.2rem;text-decoration:none !important;letter-spacing:1px;display:inline-block;position:relative;z-index:2}a[href='https://laserants.com']::before{content:\"\";display:block;height:6px;width:100%;background:#48e9ee;position:absolute;bottom:7px;z-index:-1;left:0;transform:rotate(-2deg)}.dark a[href='https://laserants.com']::before{height:3px}"},"fathomCustomDomain":"","fathomSiteID":"","fbPixelID":"","gaTrackingID":"UA-86931925-1","hotjarSiteID":"","matomoSiteID":null,"matomoURL":"","metaTags":"\n\n","wmPaymentPointer":"","plausibleAnalyticsEnabled":false,"blockBackupAllButton":false,"metaHTMLSanitized":"Soy desarrollador de software y apasionado por la tecnología. Durante mis 11 años de carrera, he adquirido experiencia en diferentes áreas dentro del desarrollo de software.\n","numPosts":13}

Subscribe to my newsletter

Recent articles

Patrón de diseño Higher-Order Component (HOC) en React y JavaScript

Juego de Tic Tac Toe en HTML con ChatGPT en 2 minutos

Scrum vs Kanban: Mi opinión como dev después de más de 8 años de trabajo.