BranchesTags

Repository files navigation

Editor de imagenes [Proyecto CDK]

La idea de este proyecto es construir un editor de imagenes usando CDK para levantar la infraestructura en AWS.

La idea es que nuestros clientes puedan llamar a un endpoint de una API, con su imagen y nosotros retornamos la imagen editada

La infraestructura (Version 1.0)

La primera versión de la infraestructura constará de solo dos recursos, un api gateway y una lambda.

El api gateway nos brindará una URL para invocar a nuestro editor de imagenes.

La lambda, será nuestra capa de computo, acá es donde editaremos la imagen y la dejaremos lista para ser devuelta a un usuario por la misma API

¿Como levanto esta infraestructura?

Primero, siempre puedes saber si tu infraestructura esta bien ejecutando cdk synth Al ejecutar ese comando, se generará un archivo en la carpeta cdk.out con los recursos de tu stack.

Si no tienes problemas con el paso anterior entonces estas listo para desplegar tu infraestructura!! Para eso ejecuta cdk deploy

La infraestructura (Version 2.0)

Como no queremos mantener todo el proceso de backend junto, vamos a dividir un poco más la infraestructura y así delegar responsabilidades. (divide and conquer) La infraestructura 2.0 queda así:

  • Un API para recibir requests
  • Una lambda que recibe aquella request y guarda la imagen en un bucket
  • Un bucket para guardar imagenes
  • Una topico SNS que es notificado si hay un archivo nuevo en un bucket
  • Una lambda que modifica la imagen
  • Una lambda que envia la imagen al cliente final

Layer

Para crear la layer deben tener Docker instalado y luego:

  • cd lib
  • sh layer.sh o layer.cmd según el sistema operativo

Deploy y síntesis

Para utilizar este repo se requiere tener node instalado y luego:

  • npm install para instalar las librerías necesarias
  • cdk diff para ver los cambios con el stack ya creado
  • cdk synth para ver el stack creado en formato cloudformation
  • cdk deploy para hacer deploy del stack

Dudas!

Cualquier duda pueden contactarme por correo a dev.dgonzalez@gmail.com

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

2 stars

Watchers

1 watching

Forks

2 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
Editor de imagenes [Proyecto CDK]
La idea de este proyecto es construir un editor de imagenes usando CDK para levantar la infraestructura en AWS.
La idea es que nuestros clientes puedan llamar a un endpoint de una API, con su imagen y nosotros retornamos la imagen editada
La infraestructura (Version 1.0)
La primera versión de la infraestructura constará de solo dos recursos, un api gateway y una lambda.
El api gateway nos brindará una URL para invocar a nuestro editor de imagenes.
La lambda, será nuestra capa de computo, acá es donde editaremos la imagen y la dejaremos lista para ser devuelta a un usuario por la misma API
¿Como levanto esta infraestructura?
Primero, siempre puedes saber si tu infraestructura esta bien ejecutando cdk synth
Al ejecutar ese comando, se generará un archivo en la carpeta cdk.out con los recursos de tu stack.
Si no tienes problemas con el paso anterior entonces estas listo para desplegar tu infraestructura!!
Para eso ejecuta cdk deploy
La infraestructura (Version 2.0)
Como no queremos mantener todo el proceso de backend junto, vamos a dividir un poco más la infraestructura y así delegar responsabilidades.
(divide and conquer)
La infraestructura 2.0 queda así:
  • Un API para recibir requests
  • Una lambda que recibe aquella request y guarda la imagen en un bucket
  • Un bucket para guardar imagenes
  • Una topico SNS que es notificado si hay un archivo nuevo en un bucket
  • Una lambda que modifica la imagen
  • Una lambda que envia la imagen al cliente final
Layer
Para crear la layer deben tener Docker instalado y luego:
  • cd lib
  • sh layer.sh o layer.cmd según el sistema operativo
Deploy y síntesis
Para utilizar este repo se requiere tener node instalado y luego:
  • npm install para instalar las librerías necesarias
  • cdk diff para ver los cambios con el stack ya creado
  • cdk synth para ver el stack creado en formato cloudformation
  • cdk deploy para hacer deploy del stack
Dudas!
Cualquier duda pueden contactarme por correo a dev.dgonzalez@gmail.com
About
No description, website, or topics provided.
Resources
Readme
Activity
Stars
2 stars
Watchers
1 watching
Forks
2 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Editor de imagenes [Proyecto CDK]
La idea de este proyecto es construir un editor de imagenes usando CDK para levantar la infraestructura en AWS.
La idea es que nuestros clientes puedan llamar a un endpoint de una API, con su imagen y nosotros retornamos la imagen editada
La infraestructura (Version 1.0)
La primera versión de la infraestructura constará de solo dos recursos, un api gateway y una lambda.
El api gateway nos brindará una URL para invocar a nuestro editor de imagenes.
La lambda, será nuestra capa de computo, acá es donde editaremos la imagen y la dejaremos lista para ser devuelta a un usuario por la misma API
¿Como levanto esta infraestructura?
Primero, siempre puedes saber si tu infraestructura esta bien ejecutando cdk synth
Al ejecutar ese comando, se generará un archivo en la carpeta cdk.out con los recursos de tu stack.
Si no tienes problemas con el paso anterior entonces estas listo para desplegar tu infraestructura!!
Para eso ejecuta cdk deploy
La infraestructura (Version 2.0)
Como no queremos mantener todo el proceso de backend junto, vamos a dividir un poco más la infraestructura y así delegar responsabilidades.
(divide and conquer)
La infraestructura 2.0 queda así:
  • Un API para recibir requests
  • Una lambda que recibe aquella request y guarda la imagen en un bucket
  • Un bucket para guardar imagenes
  • Una topico SNS que es notificado si hay un archivo nuevo en un bucket
  • Una lambda que modifica la imagen
  • Una lambda que envia la imagen al cliente final
Layer
Para crear la layer deben tener Docker instalado y luego:
  • cd lib
  • sh layer.sh o layer.cmd según el sistema operativo
Deploy y síntesis
Para utilizar este repo se requiere tener node instalado y luego:
  • npm install para instalar las librerías necesarias
  • cdk diff para ver los cambios con el stack ya creado
  • cdk synth para ver el stack creado en formato cloudformation
  • cdk deploy para hacer deploy del stack
Dudas!
Cualquier duda pueden contactarme por correo a dev.dgonzalez@gmail.com
About
No description, website, or topics provided.
Resources
Readme
Activity
Stars
2 stars
Watchers
1 watching
Forks
2 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Editor de imagenes [Proyecto CDK]
La idea de este proyecto es construir un editor de imagenes usando CDK para levantar la infraestructura en AWS.
La idea es que nuestros clientes puedan llamar a un endpoint de una API, con su imagen y nosotros retornamos la imagen editada
La infraestructura (Version 1.0)
La primera versión de la infraestructura constará de solo dos recursos, un api gateway y una lambda.
El api gateway nos brindará una URL para invocar a nuestro editor de imagenes.
La lambda, será nuestra capa de computo, acá es donde editaremos la imagen y la dejaremos lista para ser devuelta a un usuario por la misma API
¿Como levanto esta infraestructura?
Primero, siempre puedes saber si tu infraestructura esta bien ejecutando cdk synth
Al ejecutar ese comando, se generará un archivo en la carpeta cdk.out con los recursos de tu stack.
Si no tienes problemas con el paso anterior entonces estas listo para desplegar tu infraestructura!!
Para eso ejecuta cdk deploy
La infraestructura (Version 2.0)
Como no queremos mantener todo el proceso de backend junto, vamos a dividir un poco más la infraestructura y así delegar responsabilidades.
(divide and conquer)
La infraestructura 2.0 queda así:
  • Un API para recibir requests
  • Una lambda que recibe aquella request y guarda la imagen en un bucket
  • Un bucket para guardar imagenes
  • Una topico SNS que es notificado si hay un archivo nuevo en un bucket
  • Una lambda que modifica la imagen
  • Una lambda que envia la imagen al cliente final
Layer
Para crear la layer deben tener Docker instalado y luego:
  • cd lib
  • sh layer.sh o layer.cmd según el sistema operativo
Deploy y síntesis
Para utilizar este repo se requiere tener node instalado y luego:
  • npm install para instalar las librerías necesarias
  • cdk diff para ver los cambios con el stack ya creado
  • cdk synth para ver el stack creado en formato cloudformation
  • cdk deploy para hacer deploy del stack
Dudas!
Cualquier duda pueden contactarme por correo a dev.dgonzalez@gmail.com
About
No description, website, or topics provided.
Resources
Readme
Activity
Stars
2 stars
Watchers
1 watching
Forks
2 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
Editor de imagenes [Proyecto CDK]
La idea de este proyecto es construir un editor de imagenes usando CDK para levantar la infraestructura en AWS.
La idea es que nuestros clientes puedan llamar a un endpoint de una API, con su imagen y nosotros retornamos la imagen editada
La infraestructura (Version 1.0)
La primera versión de la infraestructura constará de solo dos recursos, un api gateway y una lambda.
El api gateway nos brindará una URL para invocar a nuestro editor de imagenes.
La lambda, será nuestra capa de computo, acá es donde editaremos la imagen y la dejaremos lista para ser devuelta a un usuario por la misma API
¿Como levanto esta infraestructura?
Primero, siempre puedes saber si tu infraestructura esta bien ejecutando cdk synth
Al ejecutar ese comando, se generará un archivo en la carpeta cdk.out con los recursos de tu stack.
Si no tienes problemas con el paso anterior entonces estas listo para desplegar tu infraestructura!!
Para eso ejecuta cdk deploy
La infraestructura (Version 2.0)
Como no queremos mantener todo el proceso de backend junto, vamos a dividir un poco más la infraestructura y así delegar responsabilidades.
(divide and conquer)
La infraestructura 2.0 queda así:
  • Un API para recibir requests
  • Una lambda que recibe aquella request y guarda la imagen en un bucket
  • Un bucket para guardar imagenes
  • Una topico SNS que es notificado si hay un archivo nuevo en un bucket
  • Una lambda que modifica la imagen
  • Una lambda que envia la imagen al cliente final
Layer
Para crear la layer deben tener Docker instalado y luego:
  • cd lib
  • sh layer.sh o layer.cmd según el sistema operativo
Deploy y síntesis
Para utilizar este repo se requiere tener node instalado y luego:
  • npm install para instalar las librerías necesarias
  • cdk diff para ver los cambios con el stack ya creado
  • cdk synth para ver el stack creado en formato cloudformation
  • cdk deploy para hacer deploy del stack
Dudas!
Cualquier duda pueden contactarme por correo a dev.dgonzalez@gmail.com
About
No description, website, or topics provided.
Resources
Readme
Activity
Stars
2 stars
Watchers
1 watching
Forks
2 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Editor de imagenes [Proyecto CDK]
La idea de este proyecto es construir un editor de imagenes usando CDK para levantar la infraestructura en AWS.
La idea es que nuestros clientes puedan llamar a un endpoint de una API, con su imagen y nosotros retornamos la imagen editada
La infraestructura (Version 1.0)
La primera versión de la infraestructura constará de solo dos recursos, un api gateway y una lambda.
El api gateway nos brindará una URL para invocar a nuestro editor de imagenes.
La lambda, será nuestra capa de computo, acá es donde editaremos la imagen y la dejaremos lista para ser devuelta a un usuario por la misma API
¿Como levanto esta infraestructura?
Primero, siempre puedes saber si tu infraestructura esta bien ejecutando cdk synth
Al ejecutar ese comando, se generará un archivo en la carpeta cdk.out con los recursos de tu stack.
Si no tienes problemas con el paso anterior entonces estas listo para desplegar tu infraestructura!!
Para eso ejecuta cdk deploy
La infraestructura (Version 2.0)
Como no queremos mantener todo el proceso de backend junto, vamos a dividir un poco más la infraestructura y así delegar responsabilidades.
(divide and conquer)
La infraestructura 2.0 queda así:
  • Un API para recibir requests
  • Una lambda que recibe aquella request y guarda la imagen en un bucket
  • Un bucket para guardar imagenes
  • Una topico SNS que es notificado si hay un archivo nuevo en un bucket
  • Una lambda que modifica la imagen
  • Una lambda que envia la imagen al cliente final
Layer
Para crear la layer deben tener Docker instalado y luego:
  • cd lib
  • sh layer.sh o layer.cmd según el sistema operativo
Deploy y síntesis
Para utilizar este repo se requiere tener node instalado y luego:
  • npm install para instalar las librerías necesarias
  • cdk diff para ver los cambios con el stack ya creado
  • cdk synth para ver el stack creado en formato cloudformation
  • cdk deploy para hacer deploy del stack
Dudas!
Cualquier duda pueden contactarme por correo a dev.dgonzalez@gmail.com
About
No description, website, or topics provided.
Resources
Readme
Activity
Stars
2 stars
Watchers
1 watching
Forks
2 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Editor de imagenes [Proyecto CDK]
La idea de este proyecto es construir un editor de imagenes usando CDK para levantar la infraestructura en AWS.
La idea es que nuestros clientes puedan llamar a un endpoint de una API, con su imagen y nosotros retornamos la imagen editada
La infraestructura (Version 1.0)
La primera versión de la infraestructura constará de solo dos recursos, un api gateway y una lambda.
El api gateway nos brindará una URL para invocar a nuestro editor de imagenes.
La lambda, será nuestra capa de computo, acá es donde editaremos la imagen y la dejaremos lista para ser devuelta a un usuario por la misma API
¿Como levanto esta infraestructura?
Primero, siempre puedes saber si tu infraestructura esta bien ejecutando cdk synth
Al ejecutar ese comando, se generará un archivo en la carpeta cdk.out con los recursos de tu stack.
Si no tienes problemas con el paso anterior entonces estas listo para desplegar tu infraestructura!!
Para eso ejecuta cdk deploy
La infraestructura (Version 2.0)
Como no queremos mantener todo el proceso de backend junto, vamos a dividir un poco más la infraestructura y así delegar responsabilidades.
(divide and conquer)
La infraestructura 2.0 queda así:
  • Un API para recibir requests
  • Una lambda que recibe aquella request y guarda la imagen en un bucket
  • Un bucket para guardar imagenes
  • Una topico SNS que es notificado si hay un archivo nuevo en un bucket
  • Una lambda que modifica la imagen
  • Una lambda que envia la imagen al cliente final
Layer
Para crear la layer deben tener Docker instalado y luego:
  • cd lib
  • sh layer.sh o layer.cmd según el sistema operativo
Deploy y síntesis
Para utilizar este repo se requiere tener node instalado y luego:
  • npm install para instalar las librerías necesarias
  • cdk diff para ver los cambios con el stack ya creado
  • cdk synth para ver el stack creado en formato cloudformation
  • cdk deploy para hacer deploy del stack
Dudas!
Cualquier duda pueden contactarme por correo a dev.dgonzalez@gmail.com
About
No description, website, or topics provided.
Resources
Readme
Activity
Stars
2 stars
Watchers
1 watching
Forks
2 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
Editor de imagenes [Proyecto CDK]
La idea de este proyecto es construir un editor de imagenes usando CDK para levantar la infraestructura en AWS.
La idea es que nuestros clientes puedan llamar a un endpoint de una API, con su imagen y nosotros retornamos la imagen editada
La infraestructura (Version 1.0)
La primera versión de la infraestructura constará de solo dos recursos, un api gateway y una lambda.
El api gateway nos brindará una URL para invocar a nuestro editor de imagenes.
La lambda, será nuestra capa de computo, acá es donde editaremos la imagen y la dejaremos lista para ser devuelta a un usuario por la misma API
¿Como levanto esta infraestructura?
Primero, siempre puedes saber si tu infraestructura esta bien ejecutando cdk synth
Al ejecutar ese comando, se generará un archivo en la carpeta cdk.out con los recursos de tu stack.
Si no tienes problemas con el paso anterior entonces estas listo para desplegar tu infraestructura!!
Para eso ejecuta cdk deploy
La infraestructura (Version 2.0)
Como no queremos mantener todo el proceso de backend junto, vamos a dividir un poco más la infraestructura y así delegar responsabilidades.
(divide and conquer)
La infraestructura 2.0 queda así:
  • Un API para recibir requests
  • Una lambda que recibe aquella request y guarda la imagen en un bucket
  • Un bucket para guardar imagenes
  • Una topico SNS que es notificado si hay un archivo nuevo en un bucket
  • Una lambda que modifica la imagen
  • Una lambda que envia la imagen al cliente final
Layer
Para crear la layer deben tener Docker instalado y luego:
  • cd lib
  • sh layer.sh o layer.cmd según el sistema operativo
Deploy y síntesis
Para utilizar este repo se requiere tener node instalado y luego:
  • npm install para instalar las librerías necesarias
  • cdk diff para ver los cambios con el stack ya creado
  • cdk synth para ver el stack creado en formato cloudformation
  • cdk deploy para hacer deploy del stack
Dudas!
Cualquier duda pueden contactarme por correo a dev.dgonzalez@gmail.com
About
No description, website, or topics provided.
Resources
Readme
Activity
Stars
2 stars
Watchers
1 watching
Forks
2 forks
Report repository
Releases
Packages
Contributors
Languages