web

web, html, css, flash, fonts e news su internet

Javascript: Gli Observable Notebooks

Observable notebooks
L'idea introdotta dai jupyter notebooks si è rivelata troppo utile perché non venisse implementata anche per javascript.

Ecco quindi Observable, un sito dove si possono creare i propri notebook e provare online, live, il funzionamento di vari tipi di codice js, anche se il riferimento è il libro online: Eloquent Javascript.

Poi c'è la galleria di esempi, che ne svelano le potenzialità.

Si comincia da qui.
Differenze con i Jupyter notebooks


categorie: 

Come commercializzare un prodotto - il caso di un videogame

Chris Zukowski è un esperto di videogame marketing dall'età di 10 anni (ha ricevuto anche un premio dalla sua scuola) e su Steam il suo entusiasmo viene premiato. E' quindi la persona giusta per spiegare le basi del copywriting nel suo video: Selling Your Game Without Feeling Sleazy, ovvero come commercializzare il proprio gioco senza sentirsi squallidi.

tool online: copywriting in italiano
keywordtool.io
seozoom.it
semrush.com

[via]

Creare GIFS con gifs.com

gifs.com
GIF maker di gifs.com permette di creare immagini in formato GIF prese direttamente da qualsiasi video online, selezionando inizio e file del clip. Un algoritmo è anche in grado di capire quali siano le parti più dinamiche e selezionarle automaticamente.

Un tool molto utile sia per una comunicazione più accattivante che per catturare le parti più utili di un video e trasformarle in reference più facilmente manipolabili.

[via]

Curl

curl
Curl è un comando/libreria (libcurl) disponibile sulla maggior parte dei sistemi basati su Unix. È usato come abbreviazione di "Client URL". Viene utilizzato per diversi scopi quali: navigazione, inserimento dati via web, download, trasferimento dati e molti altri. Supporta diversi protocolli.

Con Curl si può: compilare un modulo del sito web tramite la riga di comando, caricare/scaricare dei file, riprendere uno scaricamento, rinominare il file salvato, limitare la banda del download, controllare gli header HTTP, autenticarsi.

manpage
http scripting
12 tips for you to use commando curl as a ninja

[via]

categorie: 

Fast.Ai, Kaggle: Combattere i commenti tossici

Fast.Ai, Kaggle
Nell'articolo di Michael Li (twitter) "How to Build a Multi-label NLP Classifier from Scratch" si spiega come usare fast.ai e kaggle per costruire un automa che individua i commenti tossici.

Tecnologie di questo genere sono i nuovi antivirus e antispam della comunicazione online, inquinata da bot, troll, agenti provocatori, disinformazione, bieche menzogne ecc. Questi metodi non devono affatto far pensare ad una forma di censura, o al contrario che il "libero pensiero" debba essere espresso senza condizioni online.

Poco più di un decennio fa c'era una netta distinzione tra chi informava (giornali, TV, siti istituzionali) essendo sottoposto a regole e leggi, e chi "cazzeggiava" online sui social network. Ma ora non è più così. Anche la persona più preparata può cadere nel tranello di credere a questa o quella "fonte" e contribuire a diffondere notizie false. Ed innescare "flame", caterve di commenti litigiosi che contribuiscono ancora di più al propagarsi della disinformazione.

Non è affatto facile predisporre delle contromisure, ma è questa, senz'altro, la direzione da prendere .

[via]

Flexbox

flexbox
Flexbox, una alternativa a Bootstrap, permette di affrontare sia il problema della "responsiveness" che quello di creare layout basati su grid layout.
Flexbox ha alcuni concetti fondamentali che, se applicati dall'alto verso il basso (top-down), aiutano a creare layout anche complessi con una certa facilità.

Si inizia pensando al proprio layout complessivo come a un contenitore flexbox, per poi approfondire i singoli componenti. La barra di navigazione si impostate con flexbox. L'area principale e disegnata con flexbox, e così anche le schede informative.

Alcune delle risorse più efficaci:

DevEd - Youtube
Traversy Media - Youtube
Guida completa a Flexbox - css-tricks.com
Le considerazioni dietro un layout Flexbox - css-tricks.com

[via]

UX e UI

UX e UI
Il design dell'UX va oltre il design dell'interfaccia utente, infatti il design dell'esperienza utente è un concetto molto più ampio di qualsiasi altro aspetto. Di conseguenza la progettazione dell'interfaccia utente è il sottoinsieme della progettazione dell'esperienza utente.

Sia l'UX che l'interfaccia utente sono fondamentali per costruire un prodotto software di alto livello e poi interagire. Ma i ruoli sono sostanzialmente diversi. UX Design si occupa maggiormente degli aspetti analitici e tecnici che affondano le radici nelle funzionalità del prodotto software, mentre UI Design si occupa maggiormente dell'aspetto dell'applicazione.

Volendo fare una analogia, la progettazione dell'UX è come progettare un edificio. Il design dell'interfaccia utente è come la decorazione di interni.

Why UX Design Must Be the Foundation of Your Software Product
wikipedia UX
wikipedia UI
Beautiful and functional interfaces


categorie: 

Headless Chrome

headless chrome

A cosa può servire un browser senza la parte grafica (GUI) ? Ci permette di avere un tool in più nel nostro arsenale, per aumentare il livello di automazione e integrarsi nei propri workflow. Un browser che viene governato via CLI (command line interface) permette di cancellare i task tediosi e ripetitivi, come il testing, e ci mette a disposizione tutte le capacità di un software così complesso e potente, concatenarle per inventarsi modi di fare totalmente nuovi, che sarebbero immediatamente scartati se dovessero essere compiuti manualmente.

Headless Chrome: DevOps Love It, So Do Hackers, Here’s Why

Examples

headless chrome VS phantomJS
headless chromium
puppeteer - Headless Chrome Node API
introduction to headless browsers

Crafting the perfect container to play with a Headless Chrome


The power of Headless Chrome and browser automation (Google I/O '18)

categorie: 

Lo stato delle community artistiche su internet

artsy art communities
Loish ha parlato con Kelsey Ables di Artsy della parabola delle community artistiche su internet.

Dal 1992, anno del caricamento della prima foto sul web, c'è stata una esplosione di immagini, opere e capolavori accessibili istantaneamente da ogni parte del mondo, la scoperta di artisti altrimenti nascosti e forse impossibili da scovare, ma ora le cose si stanno ingarbugliando e stiamo assistendo ad una netta involuzione.

La commercializzazione e gli inevitabili meccanismi economici dietro ai "big player" hanno fatto sì che l'apprezzamento e le interazioni (engagement) spesso si riducano a meri "like" e vuoti cuoricini, e le opere vengano esposte in mezzo a piatti di pasta e foto delle vacanze. Lo spazio per una critica costruttiva e commenti sensati si è ridotto e viene oscurato dal rumore assordante di internet.

[via]

categorie: 

Muuri

Muuri


Muuri (significa "muro" in finlandese, github, demo online) è una libreria JS che implementa responsive, sortable, filterable and draggable grid layouts. Tutte le feature necessarie per il funzionamento di una buon catalogo web interattivo. Con Muuri è facile, per chi smanetta un po' in javascript, costruirsi liste interattive dei propri oggetti, di cui può aver perso quasi irrimediabilmente traccia nella frenesia consumistica del XXI secolo.

E' basata su packery, masonry, isotope e sortable.

E' dotata anche di una sua API.

tutorial

[via]

categorie: 

Video Tutorial con Des Herbert

Des Herbert
Des Herbert è il Salvatore Aranzulla del video making.

Sul suo canale youtube Des spiega in modo diretto, sintetico, chiaro ed efficace quali sono i migliori tool per realizzare video per il web. E molto altro !

Per quanto il testo scritto, meglio ancora se su carta, rimanga assolutamente uno dei modi migliori di comunicare, nel terzo millennio ognuno ha una TV in tasca ed è molto interessante imparare la grammatica del mezzo. Anche se non si aspira a diventare "influenzatori".

Ma per farlo occorre anche saper "impugnare la penna", ed è qui che conoscere i tool giusti può davvero fare la differenza.


Patricia Lockwood - La mente comune

Qualche anno fa, improvvisamente ci siamo accorti che internet era un luogo che non potevamo più lasciare. Patricia Lockwood ha iniziato a tenere un diario di come ci si sentiva ad essere lì, nei giorni della sua disintegrazione, che corrispondeva anche alla disintegrazione della sua mente. Il suo interesse non era accademico. Non le interessava la Singolarità, o l'aumento delle macchine, o altro.

Le interessava la sensazione che i suoi pensieri fossero dettati da qualcuno o qualcosa. Le importava della "mente collettiva", che sembrava avere la febbre. Se riuscissimo a fuggire, a uscire dal grande cranio e a respirare l'aria fresca, se Twitter fosse chiuso per crimini contro l'umanità, cosa staremmo perdendo?

Il flusso sanguigno delle notizie, il consenso entusiasta, la danza al ritmo del tempo. Il portale che ci ha detto, ogni volta che l'abbiamo aperto, esattamente quello che stava succedendo ora. Le è sembrato opportuno scriverlo in terza persona perché non si sentiva più come se stessa. Ecco come è cominciato.

[via]

Jen Simmons: il web che ci aspetta

Jen Simmons è una esperta di web design per Mozilla. In questo video di 50 minuti racconta gli ultimi 25 anni di storia dei siti e dei browser partendo dal "flow" layout degli anni '90, poi i siti realizzati con tabelle rigide e immagini fatte a pezzi, l'era di flash e così via.

E tutto sta per cambiare ancora una volta.

podcast: the web ahead
github
codepen
mozilla hacks
youtube
twitter


categorie: 

masayume Boardgame Collector (isotope)

masayume Boardgame Collector (isotope)


Il progettino di questa settimana si chiama Boardgame Collector.

E' una semplicissima front-end webapp per la gestione della propria collezione di giochi da tavolo. E' basata su isotope, che le permette filtraggio e ordinamento dei giochi, al momento in base a nome, anno, complessità e durata. Ma sono possibili funzioni più complesse.

Per inserire i giochi occorre destreggiarsi un po' con JSON, in particolare con il file boardgames.json, e poi occorre popolare manualmente la directory img per poter visualizzare anche le immagini dei giochi.

Con una serie di personalizzazioni è possibile usarlo per visualizzare qualsiasi tipo di collezione o insieme di dati in generale.


categorie: