javascript

• Organic grow ⇒ inconsistencies and redundant code
  

JavaScript has grown organically with the web and as such is full of inconsistencies and redundant code. That’s makes it interesting but such a pain in the ass sometimes. PHP has evolved the same way and has the same qualities. Dynamic and vibrant but oh-so-infuriating. I go play with a python or rust project when I need a sanity check.

• Need to keep backwards compatiblity with 10 years old browsers, each one with its own twists → Babel
  

Most other languages operate in a more controlled ecosystem and don’t have to worry about being compatible with 10 year old browsers on every platform.

• Lack of consistency. There are many ways to do the same thing, many folder structures, code style, …
  
  • For example
    

Treat Javascript as another platform (like x86, ARM), by using transpilers
https://www.destroyallsoftware.com/talks/the-birth-and-death-of-javascript

Compile WebAssembly to C

• https://wasmer.io/posts/py2wasm-a-python-to-wasm-compiler
  

• https://news.ycombinator.com/item?id=40115099
  

  WebGL, WebGPU, WebNN
  Which have better process isolation; containers or Chrome’s app sandbox at pwn2own how do I know what is running in a WASM browser tab?
  JupyterLite, datasette-lite, and the Pyodide plugin for vscode.dev ship with Pyodide’s WASM compilation of CPython and SciPy Stack / PyData tools.
  `%pip install -q mendeley` in a notebook opened with the Pyodide Jupyter kernel works by calling `await micropip.install([“mendeley”])` IIRC.
  picomamba installs conda packages from emscripten-forge, which is like conda-forge: https://news.ycombinator.com/item?id=33892076#33916270 :
  > FWIU Service Workers and Task Workers and Web Locks are the browser APIs available for concurrency in browsers
  sqlite-wasm, sqlite-wasm-http, duckdb-wasm, (edit) postgresql WASM / pglite ; WhatTheDuck, pretzelai ; lancedb/lance is faster than pandas with dtype_backend=“arrow” and has a vector index
  “SQLite Wasm in the browser backed by the Origin Private File System” (2023) https://news.ycombinator.com/item?id=34352935#34366429
  “WebGPU is now available on Android” (2024) https://news.ycombinator.com/item?id=39046787
  “WebNN: Web Neural Network API” https://www.w3.org/TR/webnn/ : https://news.ycombinator.com/item?id=36159049
  “The best WebAssembly runtime may be no runtime” (2024) https://news.ycombinator.com/item?id=38609105
  (Edit) emscripten-forge packages are built for the wasm32-unknown-emscripten build target, but wasm32-wasi is what is now supported by cpython (and pypi?) https://www.google.com/search?q=wasm32-wasi+conda-forge
  

• Accessing postgres database from python kernel · Issue #1083 · jupyterlite/jupyterlite
  JupyterLite (Pyodide) ↔ GraphQL ↔ PostgresQL
  
  • oscar6echo/ph-local
    
  • Si no otra que se me ocurre es utilizar una sqlite https://github.com/sql-js/sql.js/ y sincronizar con postgres https://github.com/zknill/sqledge https://github.com/powersync-ja https://www.tcl.tk/community/tcl2017/assets/talk95/Slides.pdf
    

pip install nuitka # necesita patchelf y ccache opcionalmente para que vaya más rápido
time CC=clang MAKEFLAGS="-j8" python -m nuitka --follow-imports  script.py -o script.elf
pip install py2wasm # Hay que instalar wasmer luego para hacerlo funcionar
# MAKEFLAGS no hace que wasm-ld utilize todos los núcleos
MAKEFLAGS="-j8" py2wasm script.py -o script.wasm

🚀 Fast and simple Node.js version manager, built in Rust

• Javascript for Impatient Programmers
  
• Eloquent Javascript
  

• Object.keys(objeto) ,Object.values(objeto) y Object.entries(objeto) para sacar las claves, valores y entradas (items en Python) de un objeto
  
• Array.from(objeto) para convertir lo que sea en array y poder utilizar .map
  

• Quitar clave de un diccionario
  

    delete thisIsObject['Cow'];
  

  If you are using Underscore.js or Lodash, there is a function ’omit’ that will do it.
  http://underscorejs.org/#omit
  

• Create an object within a map function
  

    const keys = ['key1', 'key2'];
  
    const result = keys.map(key => {
      let obj = {};
      obj[key] = (Math.random() * 2) - 1;
      return obj;
    });
    return result;
  

  [ { key1: 0.45488502758210236 }, { key2: 0.4172403939051943 } ]
  

• Slice
  https://www.freecodecamp.org/news/how-to-remove-an-element-from-a-javascript-array-removing-a-specific-item-in-js/
  

    const arrayOfLetters = ['a', 'b', 'c', 'd', 'e', 'f'];
    var n = 3
    console.log( arrayOfLetters.slice(0, n).concat(arrayOfLetters.slice(n+1)) )
    n = -1
    console.log( arrayOfLetters.slice(0, n) )
    console.log( arrayOfLetters.slice(1) )
  

  [ ’a’, ’b’, ’c’, ’e’, ’f’ ]
  [ ’a’, ’b’, ’c’, ’d’, ’e’ ]
  [ ’b’, ’c’, ’d’, ’e’, ’f’ ]
  undefined
  

• Object.getPrototypeOf para obtener la clase de un objeto (typeof no vale)
  

• Para comprobar si está una string en un array
  

    Object.keys(data).includes("next")
  

• Defaultdict en javascript
  

    var defaultDict = new Proxy({}, {
      get: (target, name) => name in target ? target[name] : 0
    })
  

• pivot_table
  

    conteo_resultados = resultados
      .map((x) => {
        let obj = {};
        // Convertir de {"estado": "Activo", "estado__count": 1} a {"Activo": 1}
        obj[x["estado"]] = x["estado__count"];
        return obj;
      })
      .reduce((acc, obj) => {
        // Juntar todos {"Activo": 1, "Inactivo": 2}
        Object.keys(obj).forEach((key) => ((acc[key] || 0) + obj[key]);
        return acc;
      });
  

• range() function
  […Array(5).keys()];
  
• JavaScript Date Reference
  No tiene un strftime/strptime sin librerías
  
• urlencode
  encodeURIComponent
  

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy

Con JQuery

$(document).ready(function() {
  // Replace the current window with the contents from a new URL
  function replaceWindowWithContent(url) {
    $.get(url, function(data) {
      $('body').html(data);
      window.history.replaceState(null, '', url);
    });
  }

  // Example usage: Replace the window with contents from a new URL on button click
  $('#replaceButton').on('click', function() {
    var newURL = 'https://example.com';  // Replace with your desired URL
    replaceWindowWithContent(newURL);
  });
});

• https://eloquentjavascript.net/2nd_edition/code/
  
• https://github.com/yosevu/practicing-functional-javascript
  
• https://www.w3resource.com/javascript-exercises/
  
• https://www.learn-js.org/
  
• https://github.com/micromata/awesome-javascript-learning
  

• https://js.checkio.org/
  

https://nodeschool.io/

• https://skillcrush.com/blog/projects-you-can-do-with-javascript/
  
• https://www.freecodecamp.org/news/hone-your-javascript-skills-by-building-these-15-projects/
  
• https://mikkegoes.com/javascript-projects-for-beginners/
  
• https://www.codeconquest.com/blog/25-javascript-project-ideas/
  

“7 Must-Use Developer Tools for Increased Efficiency” por Mahdhi Rezvi
https://link.medium.com/RfwZLBnh88 Bit.dev interesante para ver ejemplos de código

https://guillaumechereau.github.io/js-is-a-mess/

• angular
  
• babel
  
• backbone
  
• bootstrap
  
• bower
  
• browserify
  
• closure compiler
  
• ember
  
• grunt
  
• gulp
  
• handlebars
  
• jquery
  
• jquery ui
  
• jsx
  
• less
  
• materializecss
  
• meteor
  
• modernizr
  
• mustache
  
• nodejs
  
• npm
  
• polymer
  
• react
  
• sass
  
• stylus
  
• underscore
  
• vuejs
  
• webpack
  
• yeoman
  

• Why should only <a> and <form> be able to make HTTP requests?
  
• Why should only click & submit events trigger them?
  
• Why should only GET & POST methods be available?
  
• Why should you only be able to replace the entire screen?
  By removing these arbitrary constraints, htmx completes HTML as a hypertext
  
• </> htmx ~ When Should You Use Hypermedia?
  
  • Hypermedia: A Good Fit If…
    
    • …If your UI is mostly text & images
      
    • …If your UI is CRUD-y
      
    • …If your UI is “nested”, with updates mostly taking place within well-defined blocks
      
    • …If you need “deep links” & good first-render performance
      
  • Hypermedia: Not A Good Fit If…
    
    • #…If your UI has many, dynamic interdependencies
      
    • …If you require offline functionality
      
    • …If your UI state is updated extremely frequently
      
    • …If your team is not on board
      
• Django, HTMX and Alpine.JS: A Match Made In Heaven - DEV Community