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

	module Main exposing (..)
	import Html exposing (..)
	import Html.Attributes exposing (..)
	import Html.Events exposing (onInput)
	-- import Debug exposing (..)
	main =
	Html.beginnerProgram
	{ model = model
	, view = view
	, update = update
	}
	-- MODEL
	type alias Model =
	{ name : String
	, password : String
	, passwordAgain : String
	}
	model : Model
	model =
	Model "" "" ""
	-- UPDATE
	type Msg
	= Name String
	| Password String
	| PasswordAgain String
	update : Msg -> Model -> Model
	update msg model =
	let
	_ = Debug.log "msg" msg
	_ = Debug.log "model before update" model
	in
	case msg of
	Name name ->
	{ model | name = name }
	Password password ->
	{ model | password = password }
	PasswordAgain password ->
	{ model | passwordAgain = password }
	-- VIEW
	view : Model -> Html Msg
	view model =
	let
	_ = Debug.log "model to view" model
	in
	div []
	[ input [ type_ "text", placeholder "Name", onInput Name ] []
	, input [ type_ "password", placeholder "Password", onInput Password ] []
	, input [ type_ "password", placeholder "Re-enter Password", onInput PasswordAgain ] []
	, viewValidation model
	]
	viewValidation : Model -> Html msg
	viewValidation model =
	let
	(color, message) =
	if model.password == model.passwordAgain then
	("green", "OK")
	else
	("red", "Passwords do not match!")
	in
	div [ style [("color", color)] ] [ text message ]

view raw main.elm hosted with ❤ by GitHub

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...

	// Simple way to embed html in javasript
	Array.prototype.joinHtml = function () {
	return this.join('');
	};
	String.prototype.supplant = function (o) {
	return this.replace(/{([^{}]*)}/g,
	function (a, b) {
	var r = o[b];
	return typeof r === 'string' || typeof r === 'number' ? r : a;
	}
	);
	};
	var html = [
	'<div class="{classes}">',
	'<p>{text}</p>',
	'</div>',
	].joinHtml().supplant({
	classes: "class1",
	text: "dummy text"
	});
	console.log(html); // output: <div class="class1"><p>dummy text</p></div>

view raw simple-way-to-embed-html-inside-javascript.js hosted with ❤ by GitHub

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:

	<?xml version="1.0" encoding="UTF-8"?>
	<recipe version="1.1">
	<line>
	<originaltext>24 jalapeno peppers</originaltext>
	<annotation>create_ing(ing0, "24 jalapeno peppers")</annotation>
	</line>
	<line>
	<originaltext>1 pound sausage</originaltext>
	<annotation>create_ing(ing1, "1 pound sausage")</annotation>
	</line>
	<line>
	<originaltext>2 cups all-purpose baking mix</originaltext>
	<annotation>create_ing(ing2, "2 cups all-purpose baking mix")</annotation>
	</line>
	<line>
	<originaltext>1 (16 ounce) package Cheddar cheese, shredded</originaltext>
	<annotation>create_ing(ing3, "1 (16 ounce) package Cheddar cheese, shredded")</annotation>
	</line>
	<line>
	<originaltext>1 tablespoon crushed red pepper flakes</originaltext>
	<annotation>create_ing(ing4, "1 tablespoon crushed red pepper flakes")</annotation>
	</line>
	<line>
	<originaltext>1 tablespoon garlic salt</originaltext>
	<annotation>create_ing(ing5, "1 tablespoon garlic salt")</annotation>
	</line>
	<line>
	<originaltext>1 (16 ounce) package Monterey Jack cheese, cubed</originaltext>
	<annotation>create_ing(ing6, "1 (16 ounce) package Monterey Jack cheese, cubed")</annotation>
	</line>
	<line>
	<originaltext>Preheat oven to 325 degrees F (165 degrees C).</originaltext>
	<annotation>create_tool(t0, "oven")</annotation>
	</line>
	<line>
	<originaltext>Preheat oven to 325 degrees F (165 degrees C).</originaltext>
	<annotation>set(t0,"Preheat to 325 degrees F (165 degrees C)")</annotation>
	</line>
	<line>
	<originaltext>Lightly grease a medium baking sheet.</originaltext>
	<annotation>create_tool(t1, "medium baking sheet")</annotation>
	</line>
	<line>
	<originaltext>Lightly grease a medium baking sheet.</originaltext>
	<annotation>set(t1,"lightly grease")</annotation>
	</line>
	<line>
	<originaltext>Cut a slit in each jalapeno pepper.</originaltext>
	<annotation>cut(ing0, , ing7, "slitted jalapenos", "cut slit in each pepper")</annotation>
	</line>
	<line>
	<originaltext>Remove and discard seeds and pulp.</originaltext>
	<annotation>do(ing7, , ing13, "seedless slitted jalapenos", "Remove and discard seeds and pulp")</annotation>
	</line>
	<line>
	<originaltext>In a medium bowl, mix sausage, baking mix, Cheddar cheese, crushed red pepper, and garlic salt.</originaltext>
	<annotation>create_tool(t2, "medium bowl")</annotation>
	</line>
	<line>
	<originaltext>In a medium bowl, mix sausage, baking mix, Cheddar cheese, crushed red pepper, and garlic salt.</originaltext>
	<annotation>combine({ing1, ing2, ing3, ing4, ing5}, ing8, "sausage stuff", "")</annotation>
	</line>
	<line>
	<originaltext>In a medium bowl, mix sausage, baking mix, Cheddar cheese, crushed red pepper, and garlic salt.</originaltext>
	<annotation>mix(ing8, t2, ing9, "mixed sausage stuff", "mix")</annotation>
	</line>
	<line>
	<originaltext>Stuff jalapenos with the Monterey Jack cheese cubes.</originaltext>
	<annotation>combine({ing6, ing13}, ing10, "cheesy jalapenos", "stuff jalapenos with cheese cubes")</annotation>
	</line>
	<line>
	<originaltext>Shape sausage mixture around the jalapenos to form balls.</originaltext>
	<annotation>combine({ing10, ing9}, ing11, "sausage jalapeno balls", "shape sausage stuff around the jalapenos to form balls")</annotation>
	</line>
	<line>
	<originaltext>Arrange jalapeno balls on the prepared baking sheet.</originaltext>
	<annotation>put(ing11, t1)</annotation>
	</line>
	<line>
	<originaltext>Bake 25 minutes in the preheated oven, until lightly browned.</originaltext>
	<annotation>cook(ing11, t0, ing12, "cooked jalapeno sausage balls", "Bake 25 minutes, until lightly browned")</annotation>
	</line>
	<line>
	<originaltext>Bake 25 minutes in the preheated oven, until lightly browned.</originaltext>
	<annotation>chefcheck(ing12,"lightly browned")</annotation>
	</line>
	</recipe>

view raw Armadillo-Eggs.rcp_tagged.xml hosted with ❤ by GitHub

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