Continuo con il mettere in ordine i miei appunti. Come ho già fatto settimana scorsa, questa collezione di post da leggere è abbastanza eterogenea. Penso però che valga la pena tenere traccia delle cose più interessanti, e magari condividerle con chi fosse alla ricerca di qualcosa da leggere. Ma bando alle ciance e via con la cinquina della settimana.

An Easy Introduction to IndexedDB in the Browser

link by Louis Petrik

Una veloce introduzione su come usare IndexedDB con JavaScript. Ma cos’è? Beh, è un modo per conservare dati complessi nella memoria di un browser.

Louis spiega come inizializzare, usare, modificare ed eliminare dati usando IndexedDB.

Il tutorial è ben fatto e serve come introduzione a questa API. Consiglio però di leggere anche la pagina Mozilla dedicato all’argomento:

Sempre Mozilla consiglia alcune alternative che vale la pena di tenere d’occhio:

  1. localForage: A Polyfill providing a simple name:value syntax for client-side data storage, which uses IndexedDB in the background, but falls back to WebSQL and then localStorage in browsers that don’t support IndexedDB.
  2. Dexie.js: A wrapper for IndexedDB that allows much faster code development via nice, simple syntax.
  3. ZangoDB: A MongoDB-like interface for IndexedDB that supports most of the familiar filtering, projection, sorting, updating and aggregation features of MongoDB.
  4. JsStore: An IndexedDB wrapper with SQL like syntax.
  5. MiniMongo: A client-side in-memory mongodb backed by localstorage with server sync over http. MiniMongo is used by MeteorJS.
  6. PouchDB: A client-side implementation of CouchDB in the browser using IndexedDB
  7. idb: A tiny (~1.15k) library that mostly mirrors the IndexedDB API, but with small improvements that make a big difference to usability.
  8. idb-keyval: A super-simple-small (~600B) promise-based keyval store implemented with IndexedDB
  9. sifrr-storage: A small (~2kB) promise based library for client side key-value storage. Works with IndexedDB, localStorage, WebSQL, Cookies. Can automatically use supported storage available based on priority.
  10. lovefield: Lovefield is a relational database for web apps. Written in JavaScript, works cross-browser. Provides SQL-like APIs that are fast, safe, and easy to use.
  11. $mol_db: Tiny (~1.3kB) TypeScript facade with promise-based api and automatic migrations.

How To Write Flexible JavaScript Code With Pure Functional Wrappers

link by Arnold Abraham

In questo rapido tutorial Arnold spiega come usare i principi della programmazione funzionale per creare un wrapper attorno a console.log. Se l’esempio in sé è piuttosto banale, la guida è ben fatta.

Ammetto di non conoscere bene questo paradigma di programmazione, ma ne sono affascinato. Questo articolo, come anche quelli che lui consiglia alla fine del pezzo, sono una buona introduzione all’argomento.

5 Modern Ways to Deploy Your Web App to the Internet

link by Can Durmus

Questo post è una buona sintesi di come caricare online un progetto. Vale come promemoria per il me futuro. Al momento sto sempre e solo usando GitHub Pages per caricare i miei progetti. Ma voglio provare a sperimentare, sopratutto quando riuscirò a mettere mano al codice del mio blog. Can Durmus consiglia:

  1. Vercel
  2. Heroku
  3. Netlify
  4. GitHub Pages
  5. Firebase

Grid vs. Flexbox Battle

link by Fatima Amzil

Dei post di Fatima mi verrebbe da dire: andate sul suo profilo e leggeteli tutti. Così faccio prima, e non ci penso più.

Comunque, questa storia in particolare è utile per ripassare i principi di flexbox e grid CSS. Lei mette in ordine i vari punti principali per entrambe le tecniche. Riguardo a Flexbox scrive:

  1. Flexbox is the perfect choice for aligning items.
  2. Not really good at overlapping. It requires negative margins or absolute positioning to break out the flex behavior, which is not clean in CSS.
  3. Flex has its wrapping system. We can tell Flex to wrap down onto another row when the flex items fill a row.

Invece su Grid CSS:

  1. Grid is the perfect choice for layouts.
  2. Grid gives you a more clean and complete style with interesting features such as fractional units.
  3. Good at overlapping. We can apply items on overlapping grid lines.
  4. We can allow Grid to wrap items with its auto-filling option.

Le sue conclusioni? Da tenere su un post it attaccato al monitor del PC:

The Flexbox system is perfect for aligning items vertically or horizontally.
Grid is a perfect choice for positioning items as a grid or array of 2 dimentions

Per quanto riguarda me, invece, sono abbastanza scarso con i fogli di stile. Per questo trovo utile anche questa lista di articoli:

Revolutionise the Way You Write Docs with Marked.js

link by Seb Hulse

Questo articolo di Agosto 2021 mi è stato molto utile questa estate, quando ho provato a lavorare a una nuova versione del sito con i miei progetti demo di Construct 3. La tecnica che Seb Hulse propone integra MarkedJS con highlight.js. Anche se poi ho seguito un’altra strada è stata comunque una lettura interessante.