I keep putting my notes in order. This list of recommended posts is quite heterogeneous. But I think it’s worth keeping track of the most interesting things, and maybe sharing them with those looking for something interesting to read. But no more chatter and off with the five of the week.
An Easy Introduction to IndexedDB in the Browser
link by Louis Petrik
The tutorial is a good introduction to this API. However, I also recommend reading the Mozilla page dedicated to the topic:
Mozilla also recommends some alternatives that are worth keeping an eye on:
- 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.
- Dexie.js: A wrapper for IndexedDB that allows much faster code development via nice, simple syntax.
- ZangoDB: A MongoDB-like interface for IndexedDB that supports most of the familiar filtering, projection, sorting, updating and aggregation features of MongoDB.
- JsStore: An IndexedDB wrapper with SQL like syntax.
- MiniMongo: A client-side in-memory mongodb backed by localstorage with server sync over http. MiniMongo is used by MeteorJS.
- PouchDB: A client-side implementation of CouchDB in the browser using IndexedDB
- idb: A tiny (~1.15k) library that mostly mirrors the IndexedDB API, but with small improvements that make a big difference to usability.
- idb-keyval: A super-simple-small (~600B) promise-based keyval store implemented with IndexedDB
- 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.
- $mol_db: Tiny (~1.3kB) TypeScript facade with promise-based api and automatic migrations.
In this quick tutorial Arnold explains how to use functional programming principles to create a wrapper around
console.log. If the example itself is rather trivial, the guide is well done.
I admit I’m not familiar with this programming paradigm, but I’m fascinated by it. This article, as well as the ones he recommends at the end of the piece, are a good introduction to the subject.
5 Modern Ways to Deploy Your Web App to the Internet
link by Can Durmus
This post is a good summary of how to upload a project online. It serves as a reminder for the future me. I am currently using GitHub Pages to upload my projects. But I want to experiment, especially when I will be able to put my hand to the code of my blog. Can Durmus recommends:
- GitHub Pages
Grid vs. Flexbox Battle
link by Fatima Amzil
I would like to say about Fatima’s posts: go to her profile and read them all.
However, this particular story is useful for reviewing the principles of flexbox and grid CSS. She puts in order the various main points for both techniques. Fatima writes about Flexbox:
- Flexbox is the perfect choice for aligning items.
- Not really good at overlapping. It requires negative margins or absolute positioning to break out the flex behavior, which is not clean in CSS.
- Flex has its wrapping system. We can tell Flex to wrap down onto another row when the flex items fill a row.
Instead about Grid CSS:
- Grid is the perfect choice for layouts.
- Grid gives you a more clean and complete style with interesting features such as fractional units.
- Good at overlapping. We can apply items on overlapping grid lines.
- We can allow Grid to wrap items with its auto-filling option.
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
As for me, I’m pretty bad with style sheets. For this I also find this list of articles useful:
Revolutionise the Way You Write Docs with Marked.js
This August 2021 article was helpful to me this summer when I tried to work on a new version of the site with my Construct 3 demo projects. Seb Hulse’s technique integrates MarkedJS withhighlight.js. Even if I then followed another path, it was still an interesting read.