Flagg

il blog di un diversamente sano di mente

Category: Tech (Page 1 of 4)

Here comes React (React-Sorrt)

Orbene, spinto dall’onda avanguardistica ho provato ad effettuare il porting di Sorrt in React… ed è stato tutto quanto indolore. Anzi, i pro sono molti.

Avevo il dubbio che una “build” di React potesse essere un po’ pesante, almeno in termini di spazio fisico occupato dai file ed invece il pacchetto finale occupa 600KB totali (occhio perchè a runtime React ottimizza il caricamento degli script a seconda delle necessità).

L’ambiente di debug è abbastanza pratico, il “compilatore” segnala errori in tempo reale ed il banale non dover fare shift-refresh ad ogni modifica fa risparmiare TANTO tempo.

Nel complesso al momento posso confermare che tutti questi truschini, ovvero web framework o librerie (ReactJs, Angular, Vue etc etc) applicano delle regole in moda ordinare e strutturare al meglio lo sviluppo di una webapp…

React-Sorrt

Salutame a’ sorrt

Quando avete una lista di numeri a occhio è facile ordinarli e sapere quale sia il piu’  grande oppure il piu’ piccolo nella sequenza.

Lista

  • 3
  • 43
  • 65
  • 75
  • 422

Tutto ciò è banale, 422 e 3 spiccano tra i 5 elementi. Ma se ogni singola occorrenza contenesse numeri piccoli e di lunghezza discreta?

Lista

  • 0.25984589485472
  • 0.24582681284584
  • 0.24852486248545
  • 0.26475684556884
  • 0.26486552785562

Quanto ci mettete ad ordinarli? Se fossero 100? Cosa potete utilizzare? Magari Excel ed attivare un ordinamento.

Beh io sono piu’ pigro ed Excel non lo voglio utilizzare.

 

Here comes a new idea: Sorrt (codice su Bitbucket , esempio su JsFiddle )

Il form permette:

  • l’inserimento solo di numeri
  • premendo Sort la lista viene ordinata e salvata (local storage del browser). Quindi se si riapre la pagina contenente lo script viene mostrata l’ultima lista salvata precedentemente.
  • si può ordinare a proprio piacere col drag & drop di una riga
  • cliccando su una riga l’elemento viene cancellato

Update ho fatto una piccola aggiunta, adesso si può passare in querystring direttamente una lista di valore (?values=1,2,34,56…)

Resize Image on client side (Shrink Photo)

Scenario: your (web) application has to shrink an image before sending it to the server, in order to limit bandwidth and server storage
Many suggestion and js library could be found, the best in my perspective is Image Load (it adds feature like Exif inspection, Jcrop support and scale, rotation).
Everything was working like a charm, on the paper, on my mind… but then
  • Edge was not sending the resized image
  • Safari on iPad and iPhone was sending rotated images
  • Firefox was not sending the image at all

Every point of the above list was caused by something very annoying in the front-end development word. Sort of half-compliance to standard API.

For example:

  1. Edge supports the Javascript API File, but the File object (native method) and the Blob object differ from the standard W3C implementation (problems with the name for example and in some case you have to use msSaveBlob instead of the Blob method that you can find in Chrome/Firefox). So you have to “cast” the Blob to a File, or adding for example the name of the file to the server in another way (form hidden field etc etc)
  2. IE/Edge form object (useful FormData() ) doesn’t support delete method, so you can copy all the elements of an existing form but you cannot remove them
  3. Safari saves camera rotated images (it is an exif property) but you cannot see this until you don’t send the image to the server
  4. Firefox skip preventdefault event in random case (?!?)

So, the File Management Browser implementation is “almost” safe, “almost” sound but needs a bit of customization for each vendor.

 

PS as the original idea was related to uploading selfie like or avatar photo I’m saving on server side all the images in JPG format, as there is no camera mobile or not that save in PNG format… I want to highlight this as all the example I found manage only Canvas -> Png export/save  (even the Load Image Test page saves the output to Png renamed to Jpeg)

Other sources and credits

Negative space e stampa fotografica

Illusioni ottiche, loghi e composizione fotografica sono solo alcuni esempi di spazi negativi  comuni. In particolare in graphic design i creativi sono quelli che ne fanno più uso per realizzare brand unici. Amazon, FedEx, Carrefour per citare qualche esempio.

L’idea di veicolare un messaggio dentro un altro mi ha sempre fatto pensare a concetti come il watermark, la firma d’acqua,  la steganografia, dove appunto messaggio è “nascosto”, o meglio non è percepibile immediatamente, dentro un altro usato come veicolo.

I giapponesi hanno persino un kanji ad hoc per rappresentare questo concetto: ma

una alternativa

Finito il preambolo necessario giungo a descrivere l’idea, o meglio la genialata che mi è venuta in mente mettendo insieme altri due concetti:

  • spazio negativo
  • stampa di immagini
  • risparmio (di denaro e di spazio)

Tutto è nato dalla mia volontà di stampare alcune fotografia in formato 1:1, utilizzando però una stampante che al massimo stampa fotografie a sublimazione (dalla resa per me fenomenale) in un formato ridotto rispetto a quello originale.

Alternative? Un banale collage? Si può fare ma insorgono alcuni problemi:

  • bisogna ritagliare l’immagine originale in sotto immagini dalle dimensioni corrette
  • la proporzione della stampa non è uguale a quella della foto originale, quindi si perderebbe comunque una percentuale di area non stampata
  • un collage deve essere sistemato su una superficie stabile e magari incorniciato

Here comes the negative space: mi sono chiesto, perchè non stampare solo parti dell’immagine che collocate alla giusta distanza creino nell’osservatore l’idea dell’immagine originale? Nel caso di una figura intera o un primo piano americano bastano 3 immagini orizzontali che creano una composizione verticale.

Nel caso di un panorama viceversa, tre crop verticali sono sufficienti a realizzare una idea di insieme.

Update come richiesto giustamente da Dread, aggiungo qualche contributo dei primi esperimenti…

Mancano dei quadretti di sfondo per sopperire all’ORRIBILE tappezzeria

Chambara the App (Alpha)

Chambara (ALPHA) su Google Play Store

 

In honor of a great classic anime, Manga Mitokomon (in italian “L’invincibile Shogun“)

  • Free (as free beer)
  • No Spam
  • Less than 10MB (sorry at the moment is the minimum I can afford)

Come fare un app (funzionante) per Android con Python e Kivy

Sottotitolo

Seiryoku-Zenyo:  ovvero massima resa, minor energia sprecata uno-dei-motivi-cui-so-tante-cose

Dalla semplice volontà di creare una app che mostri una immagine e faccia sentire una canzone (IDEA moooolto banale).
Ma poi vuoi realizzarla per Android (per il momento, anche perchè non saprei come testarla su un dispositivo IOS).
E poi la vuoi realizzare in Python (con Kivy).
E poi vuoi proprio una app, un apk e magari anche firmato.
E poi scopri che per creare un apk con buildozer, Windows ti è inutile e ti serve obbligatoriamente una macchina virtuale, che trovi già pronta in rete ma solo a 64bit e quindi non la puoi usare.

Allora ti crei una bella Ubuntu pulita, ci installi quello che sembra essere necessario e:
riesci a compilare il primo APK con buildozer (un mostro di Frankenstein, che compila Java a partire da Python e ti sputa come minimo 6 MB di APK, anche per un Hello World).

L’APK funziona e riesci a caricarlo sullo smartphone e parte anche. Ma poi dicevi di volere l’audio e al file di configurazione di buildozer aggiungi una solo stringa e tutto il mondo scoppia.
Perchè ffmpeg ha le sue maledizioni…
Fattostà che ad un certo punto non compila più niente, si spacca tutto. Provi a rimuovere Python da Ubuntu (NON LO FATE MAI) ed a reinstallarlo.
Dopo parecchie altre maledizioni riprende a compilare APK, ma per l’audio ancora ciccia.
Poi cerchi nei newsgroup e aggiungendo altri pacchetti riesci ad aggiungere il supporto a ffmpeg MA NON FA PARTIRE GLI MP3.
Allora converti ad OGG VORBIS ma ancora nulla…
Alla fine devi coercitivamente forzare le estensioni di tutti i file multimediali che ti servono MA SOPRATTUTTO LE STESSE CARTELLE CHE LI CONTENGONO!
E la app parte e fa la canzoncina che volevi e mostra lo sfondo che volevi.
La macchina virtuale la ho salvata e la iberno anche nel frigo.

Si ringrazia CatLog per l’aiuto…

Nikon Picture Controls showcasing

Starting from NikonPC preview (one by one), I made a little script to automate:

  • selection of a single picture control
  • downloading the modified preview image

Target is a gallery with ALL the previews in order to choose the preferred/best one for the photo.

Two methods: one to update the preview, another one to force a file download.

The Script

function updatePreview(index)
{    
    
js('imgPreview').onReady('onLoad', function() {
    curve.init();
    curve.initPreviewImage();
    var elmFileList = js('selFileList').elm;
    if (!elmFileList) {
        console.log("elmFileList " + index);
        return false
    }
    elmFileList.selectedIndex = index;
    var src = this.elm.src;
    this.elm = new Image();
    js(this.elm).addEvent('load', function() {
        npc.load();        
        forceDownload(index);
    }, false);
    this.elm.src = src;
});
    
}

function forceDownload(index)
{   
    var link = document.createElement('a');
    link.href = $("#cLutImage")[0].toDataURL("image/png");      
    link.download = 'Download' + index + '.png';    
    document.body.appendChild(link);
    link.click();
}

function main(index)
{       
    updatePreview(index);
}

How to launch:

  • Open https://nikonpc.com/
  • Press F12
  • Inside JS Console
    • Paste the above code
    • input main(X), where X is an available Picture Control in the page. i.e. main(4)
    • press Enter
  • DownloadX.png modified file will be downloaded

Rename Visual Studio Window Title

When you have a lot of different solution to work on, on the same time:

Visual Studio Extension: Customize Visual Studio Window Title

vs_rename_window_title.jpg

vs_rename_window_title.jpg

Support for VS 2010 onwards

Just open Tools –> Options  –> Rename VS Window Title and set something like [parent:2]\[solutionName] (there are other optional settings)

Json Test Helpers

Create an HTML file containing this code and open it from the web browser:

 

A Json sample:

{"employees":[ {"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]}

Hide images from WhatsApp Web interface

  • Press F12 with the https://web.whatsapp.com/ page opened
  • Go to the console command line
  • Copy and paste the below code
  • Press Enter

Code:

var thumbs = document.getElementsByClassName("image-thumb");
var l = thumbs.length;for (var i = 0; i < l; i++) { thumbs[0].parentNode.removeChild(thumbs[0]);}

All the thumbnails will be removed and your privacy will be preserved!

Page 1 of 4

Powered by WordPress & Theme by Anders Norén

Utilizzando il sito, accetti l'utilizzo dei cookie da parte nostra. maggiori informazioni

Questo sito utilizza i cookie per fornire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o cliccando su "Accetta" permetti il loro utilizzo.

Chiudi