https://www.sitepoint.com/best-node-js-framework-choices-modern-app-development/?utm_source=feedly
Categoría: JavaScript
Acceder a la API de OpenAI con node
https://www.sitepoint.com/ai-javascript-research-assistant/
const { OpenAI } = require("openai"); const openai = new OpenAI({ apiKey: "YOUR_OPENAI_API_KEY", dangerouslyAllowBrowser: true, }); async function queryAIModel(question) { try { const completion = await openai.chat.completions.create({ model: "gpt-4", messages: [ { role: "system", content: "You are a helpful research assistant." }, { role: "user", content: question } ], }); return completion.choices[0].message.content.trim(); } catch (error) { console.error("An error occurred while querying GPT-4:", error); return "Sorry, an error occurred. Please try again."; } } async function queryResearchAssistant() { const query = "What is the role of JavaScript in building AI Applications?"; const answer = await queryAIModel(query); console.log(`Question: ${query}\nAnswer: ${answer}`); } queryResearchAssistant();
Librería JS para hacer juegos vintage
Paginación con JS y optimizadores JS
Errores en JS
Truco para eliminar listeners de funciones flechas
Básicamente cambiar el prototype para que internamente guarde un Symbol (id única) y nos permita eliminarlas:
(function() { let target = EventTarget.prototype; let functionName = 'addEventListener'; let func = target[functionName]; let symbolHidden = Symbol('hidden'); function hidden(instance) { if(instance[symbolHidden] === undefined) { let area = {}; instance[symbolHidden] = area; return area; } return instance[symbolHidden]; } function listenersFrom(instance) { let area = hidden(instance); if(!area.listeners) { area.listeners = []; } return area.listeners; } target[functionName] = function(type, listener) { let listeners = listenersFrom(this); listeners.push({ type, listener }); func.apply(this, [type, listener]); }; target['removeEventListeners'] = function(targetType) { let self = this; let listeners = listenersFrom(this); let removed = []; listeners.forEach(item => { let type = item.type; let listener = item.listener; if(type == targetType) { self.removeEventListener(type, listener); } }); }; })(); document.addEventListener("DOMContentLoaded", event => { console.log('event 1'); }); document.addEventListener("DOMContentLoaded", event => { console.log('event 2'); }); document.addEventListener("click", event => { console.log('click event'); }); document.dispatchEvent(new Event('DOMContentLoaded')); document.removeEventListeners('DOMContentLoaded'); document.dispatchEvent(new Event('DOMContentLoaded'));
Enlaces JS
React, the beginning
Para empezar:
https://www.w3schools.com/react/default.asp
https://ibaslogic.com/react-tutorial-for-beginners/
https://leanpub.com/reactjsforthevisuallearner/read#leanpub-auto-chapter-1–what-is-this-all-about
Para seguir:
https://fullstackopen.com/es/about
Hooks:
https://css-tricks.com/react-hooks-the-deep-cuts/
https://www.freecodecamp.org/news/react-hooks-fundamentals/
Ebook:
Ejercicio typicode
Con la web https://jsonplaceholder.typicode.com/guide/ vamos a mostrar un selector de usuarios (con sus nombres) cuando seleccionemos uno nos mostrarán todos los ‘todos’ que tiene, cada uno tendrá a su lado un botón de editar y otro de borrar. También tendremos un botón de añadir un ‘todo’ a ese usuario.
Await vs then
async function showAvatar() { let img; // leer nuestro JSON fetch('https://es.javascript.info/article/promise-chaining/user.json') .then((response) => response.json()) .then(res => { fetch(`https://api.github.com/users/${res.name}`) .then((response) => response.json()) .then(result => { img=document.createElement('img'); img.src=result.avatar_url; img.className="promise-avatar-example"; document.body.append(img); }); }) // espera 3 segundos await new Promise((resolve, reject) => setTimeout(resolve, 3000)); img.remove(); //return githubUser; }
async function showAvatar() { // leer nuestro JSON let response = await fetch('/article/promise-chaining/user.json'); let user = await response.json(); // leer usuario github let githubResponse = await fetch(`https://api.github.com/users/${user.name}`); let githubUser = await githubResponse.json(); // muestra el avatar let img = document.createElement('img'); img.src = githubUser.avatar_url; img.className = "promise-avatar-example"; document.body.append(img); // espera 3 segundos await new Promise((resolve, reject) => setTimeout(resolve, 3000)); img.remove(); return githubUser; }