Simple ecommerce and shopping cart written in Elm

Repository

https://github.com/lucamug/elm-ecommerce-cart-test

Installation

Clone the repo, run `npm install` and `npm run dev` and accept elm-package's prompt in the cli. Changes to your styles and elm modules under the `src` directory will auto-transpile to css and js respectively.

Based on https://github.com/xavierelopez/elm-cart-example

Elm flow in the console

Try this code if you want to see how elm behave in the console:

https://ellie-app.com/Mw5GTWMbjxa1/0

Resources about elm, the programming language

• http://elm-lang.org/assets/blog/0.18/todomvc.html#/active todos with debugger
• http://elm-lang.org/blog Official elm blog
• http://elm-lang.org/blog/blazing-fast-html-round-two elm performances
• http://elm-lang.org/blog/farewell-to-frp Making signals unnecessary with The Elm Architecture
• http://elmprogramming.com/ Beginners elm guide
• http://elmrepl.cuberoot.in/ An online repl (Read–Eval–Print Loop) for elm
• http://faq.elm-community.org/ FAQ elm
• http://krisajenkins.github.io/elm-rays/ A raycasting hack in elm based on http://ncase.me/sight-and-light/
• http://ohanhi.com/base-for-game-elm-017.html Revisiting the "hard way": Base for a game in Elm 0.17
• http://vincent.jousse.org/en/tech/interacting-with-dom-element-using-elm-audio-video/
• https://auth0.com/blog/creating-your-first-elm-app-part-1/
• https://ellie-app.com/new Ellie is the Elm platform in your browser.
• https://gist.github.com/staltz/868e7e9bc2a7b8c1f754 The introduction to Reactive Programming you've been missing
• https://github.com/Bogdanp/elm-route/tree/4.0.0 elm-route
• https://github.com/evancz/elm-html-and-js This project illustrates how to embed an Elm program in an HTML page and how to communicate with JavaScript.
• https://github.com/sporto/elm-tutorial-app An example SPA in Elm
• https://guide.elm-lang.org/interop/javascript.html#customs-and-border-protection JavaScript Interop
• https://learnxinyminutes.com/docs/elm/
• https://mbylstra.github.io/html-to-elm/ Convert html to elm
• https://medium.com/@rgoomar/why-i-think-elm-is-the-future-of-front-end-development-21e9b091fa05#.nc4hzrmhn
• https://medium.com/the-ahead-story/move-fast-and-dont-break-things-running-a-startup-on-elm-b5491082fe8b#.yx8hr7utl
• https://www.elm-tutorial.org/en/ elm tutorial
• https://www.youtube.com/channel/UCOpGiN9AkczVjlpGDaBwQrQ elm-conf channel
• https://www.youtube.com/watch?v=EDp6UmaA9CM Toward a Better Front End Architecture: Elm - Codemash 2017

Search Testing with React and Redux

I have been working on a Vanilla JS filter that you can find at http://www.rakuten.co.uk/?filter

I am considering about moving to React/Redux so I have made a quick test for the same functionality. I like the idea of one centralised status store. If interested you can find the test at https://github.com/lucamug/search-testing-react-redux

To install the test just clone the repo then run

$ git clone https://github.com/lucamug/search-testing-react-redux.git
$ cd search-testing-react-redux/
$ npm install
$ npm start

Then point the browser to http://localhost:3000/

The test is based on http://jpsierens.com/tutorial-react-redux-webpack/

Functional Programming - Couple of Videos

Among several videos that I have been watching about functional programming, I found these two quite interesting and entertaining:

DEC64 - Douglas Crockford's Decimal Notation

Today, watching an old Douglas Crockford's video I was interested in his proposal of a new way of defining a new number type called DEC64.

Even though I have not enough understand of low level of storing numbers (I guess I studied this stuff at school) I tend to agree to Douglas's idea that application languages should have one numeric type and the type should not behave like:

0.1 + 0.2 === 0.3 // return false

Someone believe that Douglas proposal is not good enough. I believe that one on the goal of the proposal was also to start a discussion about this topic.

I wonder if after two years anybody has implemented this system somewhere.

Bilingual or multilingual blog on Google Blogger

Script to add a language button to set up a bilingual or multilingual blog on Google Blogger.

This way of adding other languages to google bolgger is inspired by http://www.broculos.net/2013/05/how-to-create-multilingual-blog-in.html

You can find a real blog example at http://www.girelloni.com/

Here the script: https://github.com/lucamug/bilingual-google-blogger

Berlin vs. Tokyo

One of the most interisting difference is the street density. I end up walking long distances in Berlin because on the map the distance seemed shorter compared to Tokyo.

Streets Density

Stairs

Playing with Ricoh Theta

Post from RICOH THETA. - Spherical Image - RICOH THETA

Food pairing

There is a popular article about food pairing: http://www.nature.com/articles/srep00196

The article says that Western cuisines show a tendency to use ingredient pairs that share many flavour compounds, supporting the so-called food pairing hypothesis. By contrast, East Asian cuisines tend to avoid compound sharing ingredients.

But the "food pairing hypothesis" was actually confuted in this sensory test: https://jcunieuws.files.wordpress.com/2008/06/food-pairing.pdf

I am wondering if any progress has been done lately in this field.

In Tuscany, the region I am originally from, we combine these foods:

• Prosciutto e Melone (Italian Ham and Melon)
• Salame e Fichi (Tuscany Salami and Figs)
• Pane e Uva (Bread and Grapes)
• Cacio e Pere (Pecorino Toscano cheese and Pears)

Radio stations from any corner of the globe

Radio Garden, a nicely crafted website from Studio Puckey in Amsterdam.

Listen to radio stations from any corner of the globe: http://radio.garden/

Chat Bots in Javascripts

Playing with Chat Bots with Node.js. Here there is a good tutorial: 

https://www.smashingmagazine.com/2016/10/how-to-develop-a-chat-bot-with-node-js/

Tools

• https://www.motion.ai/
• https://recast.ai/
• http://morph.ai/
• http://conversable.com/

Lists

• https://botlist.co/

Examples

• eBay ShopBot https://www.messenger.com/t/ebayshopbot
• PokeBotai https://www.messenger.com/t/pokebotai
• Swell http://www.swell.wtf/
• Food Network https://www.messenger.com/t/FoodNetwork/

 

How many scripts?

How many pieces of script are running on a page?

I counted them in the HTML Source and in the DOM running the script below in the console for each website.

The number of external Javascript files is from the Console > Network > JS

The Shape is the Food

During the last trip in Sicily I have been eating often delicious Arancini. The filling can be various, such as Ragu, Cheese and Ham, Egg plants, etc. To guess the content of Arancini they just give them different shape. I wonder if this system could be used also for onigiri. I have always been struggling to guess their content.

Two arancini (foreground and background)

Onigiri at Konbini

And, out of curiosity curiosity, let's see how Google is doing in recognising Arancini shapes:

Google doesn't know yet that Arancini come in multiple shapes.

No luck also with Microsoft's CaptionBot:

This is the full Google's answer:

Simple way to embed html in javasript

If you are not working with React and JSX, this could be a quick way to embed html inside Javascript...

Food Recipes: Semantic representation, Formal Language and Visualization

I always enjoyed the precision that programming languages commands give instructions to computers and I have been wondering if that precision could be applied to food recipes.
If computers could understand semantically a recipe, they would be able to perform many interesting tasks.
For example a computer could

• Scale the recipe: Not only multiplying ingredients but also adjusting the time and the difficulty
• Merge recipes fitting one into another taking advantage of the idle moments. It would be possible to plan several recipes with a certain deadline. Something like "I want to prepare Risotto alle Fragole and Arista for 3 people and everything should be ready by 7 pm". This is as example of simplified merging process:
  
• Combine recipes to come out with new variation. There is the "Computer Cooking Contest" that is trying to achieve this result. The event is organised every year, see in the resources section for links.
• Using a version control system, such as Git, where could have people to add variations of the recipe creating branch, merging, committing, etc.
• Computers could, with the help of a machine or robot, cook for you

This is an example of annotated recipe from the CURD database. This recipe is annotated using the MILK language:

Visualization

If the recipe is semantically represented inside the computer, it could be automatically visualised using some algorithm. A viable format could be similar to:

Other formats:

Video could also be used. Animation could fit better because could be generated in CG. I personally like this point of view in recipe video:

And as a final note, this is a video of my mother that I took several years ago. Not a good example of clarity but... a good recipe:

Resources

1. A method for extracting major workflow composed of ingredients, tools, and actions from cooking procedural text

   By Yoko Yamakata, Shinji Imahori, Hirokuni Maeta, Shinsuke Mori (2016)
   A method for extracting a major workflow of cooking procedure from a Japanese recipe on the Web. It is utilized for various applications including recipe search, summarization, and visualization.
   http://www.ar.media.kyoto-u.ac.jp/publications/yamakata-CEA16.pdf

2. Training the PR2 in Culinary Arts. A Natural Language Model for Parsing Recipes

   By Jessica Zhao, Alejandro Bordallo, Subramanian Ramamoorthy (2016)
   a culinary language model for the kitchen by abstracting cooking instructions into a generalized tripartite form of ACTION, TARGET, TOOL.
   http://stanford.edu/~jesszhao/files/PR2cooking.pdf

3. Predicting the Structure of Cooking Recipes

   By Jermsak Jermsurawong and Nizar Habash (2015)
   An ingredient-instruction dependency tree data structure to represent recipes. The proposed representation allows for more refined comparison of recipes and recipe - parts, and is a step towards semantic representation of recipes
   http://www.aclweb.org/anthology/D/D15/D15-1090.pdf

4. Flow Graph Corpus from Recipe Texts

   By Shinsuke Mori, Hirokuni Maeta, Yoko Yamakata, Tetsuro Sasada4 (2015)
   An attempt at annotating procedural texts with a flow graph as a representation of understanding.The domain we focus on is cooking recipe.
   https://pdfs.semanticscholar.org/7f88/398e8928d32366ebf725eb457cb2fa3a94bf.pdf

10 Criterias to Judge a Good Milk Container

#1 Openability	BAD This container is difficult to open. It require, at first to remove the blue cap. Then there is a small handle that need to be pulled. Sometime it breakes and the pulling action, due to the strenght required, may make you spill some milk	GOOD This container is Easy to open knowing the method. Can be opened with two single steps using one hand while the other hold the bottle. The moviment are slow and would not cause any spill
#2 Closability	BAD The cup net to be screwed to close so it requires some work. It is a separate object that can get lost. It doesn't seal the container ermetically but it gives the false impression that it does so someone may try to store it horizzontally causing milk to spill	GOOD To close the container it is enough to fold it back. It doesn't seal ermetically but it is close enough

GPS nmea GPX (or KLM) converter for Google Maps

This script take large amount of GPS data in nmea format and convert into gpx format to import into Google maps.

I had large amount of data coming from a trip to Iceland and I wanted quicly import it on Google My Maps.

Google has a limit of 5 MB but my data was 90 MB.

To reduce the data the script

• only export latitude and longitude
• approximae the latitude and longitude values reducing the number of decimal digit
• skeep points

There are two variables that you can adjust to get an putput file smaller than 5 MB. In my case the best compromise was

• savePointsEvery = 4
• precision = 6

This generate an ouput file of 4,5 MB

Using instead

• savePointsEvery = 4
• precision = 6

The output file was 6 MB

The output files are in the folder data.

Source

Find the source at https://github.com/lucamug/gps-converter

Example

This is the result after imported in Google Maps:

Minimal List of Recipes

This is a minimal list of recipes that we all should learn

Italian

• Frittata di patate
• Frittata di zucchine
• Rostinciana
• Pollo con funghi secchi
• Pollo con uovo e limone (fricassea)
• Baccala con patate in umido
• Fagiolini in umido
• Arista
• Braciole con limone
• Crostini di fegatini
• Insalata russa
• Panzanella
• Carciofi con pomodor e farina
• Uova ripiene con tonno
• Ribollita
• Fagioli uccelletto (e salsiccia)
• Crostini salsiccia e crostini
• Minestra
• Minestra di fermaggio e uova (stracciatella)
• Palline di ricotta e spinaci
• Sugo di Cinghiale
• Trippa
• Carciofi crudi con limone e parmigiano
• Porcini pasta
• Aspara pasta

Japanese

• Shikoku Nabe
• Ramen
• Yakiniku salada
• Oden
• Kuri spaghetti
• Yaki sakana
• Yasai tame
• Ika daikon
• Shogayaki
• Nikujaga
• Shabu shabu
• Tempura
• Demiglas souce meet
• Pilaf
• Chahan
• Shitakegohan
• Tonjiro
• Kozuyu
• Osekihan
• Daikon Sote
• Corn Broccoli Becon

Downloading Google Spreadsheets with Javascript to Json

A small script to download a Google Spreadsheet with multiple worksheet in Javascript.

This is the script and the output in Json format



This is the test Spreadsheet