Flagg

il blog di un diversamente sano di mente

Flagg

Varie ed eventuali di Luglio 2018

Librerie e framework per JS

Sicumera Informatica

Grafica e immagini

Scala (una new entry)

 

Wikipedia Backup (it,en)

A causa delle recenti proposte di Legge Europee, Wikipedia sta scioperando in questi giorni. Qualsiasi ricerca viene rediretta a questa pagina.

Per fortuna le api funzionano normalmente…

Wikipedia Backup

 

CSS Specifity Wars

Ovvero, quale regola di stile vince? Una semplice immagine svela l’arcano.

Notare come .foo .foo #foo > .foo #foo > #foo

L’articolo originale

Aggiungo:

 

Imparare i CSS rapidamente

Tre pagine web per imparare ad utilizzare i selettori, il grid ed il flex system

 

 

Razor is fun…ny

Microsoft Asp.Net Razor is a sort of “PHP” markup language for Microsoft Web Pages(Views, Partial Views etc etc).  For sure better than Asp Classic or Aspx

BUT

As the special language char is @ does not require explicit closing of the code-block you can find very tricky situation (escaping CSS with a double @@ is the easiest one)

For example inside a loop, with a custom template when you need the correct relative url path given by the server (using the “~” operator) you have to write something like this:

@(Html.DevExtreme().SelectBox()
.DataSource(LanguageItems)
.DisplayExpr(“Description”)
.ItemTemplate(@<text>
<div class=”custom-item iconNav”>
<img class=”lang-image” src=’~/Content/icons/@(“”)<%= ImageSrc %>’) />
<div class=”lang-description”><%= Description %></div>
</div></text>)
)

Where in particular:
<img class=”lang-image” src=’~/Content/icons/@(“”)<%= ImageSrc %>’) />

The <%= ImageSrc %> is related to a property inside a given loop of items (Object.ImageSrc)

The <%= %> is the aspx syntax required also in this case.

The joined @(“”) is totally an empty dummy string that call the Razor engine in order to manage the string as a dynamic one. Otherwise the final src would become

<img class=”lang-image” src=”/Content/icons/&lt;%= ImageSrc %&gt;” )=””>

instead of the correct one:

<img class=”lang-image” src=”/Content/icons/ita.svg” )=””>

I certificati iniziano a farsi sentire (farewell old SSL, welcome TLS1.2)

“HttpRequestException” insieme ad un “User or password error” … mi ha risposto l’autenticazione del client GitHub per SourceTree (da Windows). E la cosa era imbarazzante perchè avevo appena cambiato password. Però poi mi è venuto in mente che negli ultimi mesi il protocollo SSL di vecchia generazione verrà mandato finalmente in pensione e tutti i servizi web lo dismetteranno.

Quindi per SourceTree in Windows al fine di non avere quel messaggio inutile di cui sopra occorre:

Notare che su Chrome invece i siti con certificati non più sicuri verranno bloccati dalla versione M66 (disponibili dal 15 Marzo per gli sviluppatori)

Link

https://developercommunity.visualstudio.com/content/problem/201457/unable-to-connect-to-github-due-to-tls-12-only-cha.html

https://community.atlassian.com/t5/Sourcetree-questions/How-do-I-setup-Sourcetree-to-access-Github-now-that-they/qaq-p/735377

https://github.com/Microsoft/Git-Credential-Manager-for-Windows/releases/tag/v1.14.0

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…)

Senza titolo

E’ passata una settimana, poi un mese poi Natale e l’anno nuovo ma mi è ancora difficile pensare che non potrò più rivederti o sentirti o leggere e magari commentare quello che scrivevi.
Nel giorno del tuo compleanno è stato quanto mai straziante leggere gli auguri di tante persone ignare di quello che era accaduto.
Ho perso tante persone lungo la strada, persone a cui ero più o meno legato sia nel tempo che per affinità, dalle esperienze e da altri legami. Ma non mi sarei mai aspettato che proprio tu potessi arrivare a questo ultimo gesto. Perchè sei una persona che ha sempre lottato.
Ho avuto la fortuna di vedere dove vivevi, recentemente dopo tanti anni. Mi hai mostrato una piccola parte del tuo mondo e te ne sono grato, ma al contempo non mi hai dato il tempo di ricambiare…
Non ti sono stato di aiuto in alcun modo e di questo ho il più grande rimpianto. Non ho percepito minimamente tutto quello che ti portavi dentro e soprattutto non ho capito come ti sentivi negli ultimi tempi. Non ho capito che forse avevi chiesto aiuto a tuo modo, che avevi forse manifestato silentemente in qualche maniera la tua angoscia. La gioia ha un volto, il dolore ne ha infiniti.
Il dolore col tempo passa, ma il vuoto no, non credo che tu possa averlo nemmeno immaginato questo. E’ un vuoto unico che non si può riempire con altro. Non parlo naturalmente solo di me, ma soprattutto di tutti i tuoi affetti.
L’unica consolazione che posso avere, e penso lo abbia pensato anche te negli ultimi istanti, è che non invecchierai mai. Ti ricorderò per sempre come l’ultima volta che ti ho vista. Buon riposo amica mia.

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

Page 1 of 9

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