{"action":"created","issue":{"url":"https://api.github.com/repos/SAFE-Stack/SAFE-template/issues/293","repository_url":"https://api.github.com/repos/SAFE-Stack/SAFE-template","labels_url":"https://api.github.com/repos/SAFE-Stack/SAFE-template/issues/293/labels{/name}","comments_url":"https://api.github.com/repos/SAFE-Stack/SAFE-template/issues/293/comments","events_url":"https://api.github.com/repos/SAFE-Stack/SAFE-template/issues/293/events","html_url":"https://github.com/SAFE-Stack/SAFE-template/issues/293","id":466343186,"node_id":"MDU6SXNzdWU0NjYzNDMxODY=","number":293,"title":"Code formatting","user":{"login":"juselius","id":1029631,"node_id":"MDQ6VXNlcjEwMjk2MzE=","avatar_url":"https://avatars2.githubusercontent.com/u/1029631?v=4","gravatar_id":"","url":"https://api.github.com/users/juselius","html_url":"https://github.com/juselius","followers_url":"https://api.github.com/users/juselius/followers","following_url":"https://api.github.com/users/juselius/following{/other_user}","gists_url":"https://api.github.com/users/juselius/gists{/gist_id}","starred_url":"https://api.github.com/users/juselius/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/juselius/subscriptions","organizations_url":"https://api.github.com/users/juselius/orgs","repos_url":"https://api.github.com/users/juselius/repos","events_url":"https://api.github.com/users/juselius/events{/privacy}","received_events_url":"https://api.github.com/users/juselius/received_events","type":"User","site_admin":false},"labels":[{"id":847784283,"node_id":"MDU6TGFiZWw4NDc3ODQyODM=","url":"https://api.github.com/repos/SAFE-Stack/SAFE-template/labels/Type:%20Discussion","name":"Type: Discussion","color":"cc317c","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2019-07-10T14:28:56Z","updated_at":"2019-07-12T09:24:51Z","closed_at":null,"author_association":"NONE","body":"We (*) would like to raise a discussion regarding the code formatting scheme used with the HTML-combinators in the Client code. We find that the current formatting is somewhat cumbersome, impractical and at times hard to read (the same also applies to other Fulma examples):\r\n\r\n```fsharp \r\ndiv []\r\n        [ Navbar.navbar [ Navbar.Color IsPrimary ]\r\n            [ Navbar.Item.div [ ]\r\n                [ Heading.h2 [ ]\r\n                    [ str \"SAFE Template\" ] ] ]\r\n\r\n          Container.container []\r\n              [ Content.content [ Content.Modifiers [ Modifier.TextAlignment (Screen.All, TextAlignment.Centered) ] ]\r\n                    [ Heading.h3 [] [ str (\"Press buttons to manipulate counter: \" + show model) ] ]\r\n                Columns.columns []\r\n                    [ Column.column [] [ button \"-\" (fun _ -> dispatch Decrement) ]\r\n                      Column.column [] [ button \"+\" (fun _ -> dispatch Increment) ] ] ]\r\n\r\n          Footer.footer [ ]\r\n                [ Content.content [ Content.Modifiers [ Modifier.TextAlignment (Screen.All, TextAlignment.Centered) ] ]\r\n                    [ safeComponents ] ] ]\r\n```\r\n\r\nWhile terse, the main problem with this formatting is that it is exceedingly hard to refactor and move things around. You inevitably move opening or closing brackets around, and then it's quite a lot of work trying to figure out the correct matching order again. With more lengthy examples, it can also become hard to see where things begin and end.\r\n\r\nWe propose the following formatting instead:\r\n\r\n```fsharp\r\ndiv [] [ \r\n     Navbar.navbar [ Navbar.Color IsPrimary ] [ \r\n         Navbar.Item.div [] [ \r\n              Heading.h2 [] [ str \"SAFE Template\" ] \r\n         ] \r\n     ]\r\n\r\n     Container.container [] [ \r\n         Content.content [ \r\n              Content.Modifiers [ Modifier.TextAlignment (Screen.All, TextAlignment.Centered) ] \r\n         ] [ \r\n             Heading.h3 [] [ \r\n                str (\"Press buttons to manipulate counter: \" + show model) ]\r\n            ]\r\n            Columns.columns [] [ \r\n                Column.column [] [ button \"-\" (fun _ -> dispatch Decrement) ]\r\n                Column.column [] [ button \"+\" (fun _ -> dispatch Increment) ]\r\n            ] \r\n         ]\r\n     ] \r\n\r\n     Footer.footer [] [ \r\n          Content.content  [ \r\n               Content.Modifiers [ Modifier.TextAlignment (Screen.All, TextAlignment.Centered) ] \r\n          ] [ safeComponents ] \r\n     ] \r\n]\r\n```\r\nThe main virtues of this scheme is that it's easy to block copy and paste elements around, and that it approximately mimics how  raw HTML (yuck) is often formatted (at least by vim). \r\n\r\n(*) Me and my colleagues."},"comment":{"url":"https://api.github.com/repos/SAFE-Stack/SAFE-template/issues/comments/510817974","html_url":"https://github.com/SAFE-Stack/SAFE-template/issues/293#issuecomment-510817974","issue_url":"https://api.github.com/repos/SAFE-Stack/SAFE-template/issues/293","id":510817974,"node_id":"MDEyOklzc3VlQ29tbWVudDUxMDgxNzk3NA==","user":{"login":"MangelMaxime","id":4760796,"node_id":"MDQ6VXNlcjQ3NjA3OTY=","avatar_url":"https://avatars0.githubusercontent.com/u/4760796?v=4","gravatar_id":"","url":"https://api.github.com/users/MangelMaxime","html_url":"https://github.com/MangelMaxime","followers_url":"https://api.github.com/users/MangelMaxime/followers","following_url":"https://api.github.com/users/MangelMaxime/following{/other_user}","gists_url":"https://api.github.com/users/MangelMaxime/gists{/gist_id}","starred_url":"https://api.github.com/users/MangelMaxime/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/MangelMaxime/subscriptions","organizations_url":"https://api.github.com/users/MangelMaxime/orgs","repos_url":"https://api.github.com/users/MangelMaxime/repos","events_url":"https://api.github.com/users/MangelMaxime/events{/privacy}","received_events_url":"https://api.github.com/users/MangelMaxime/received_events","type":"User","site_admin":false},"created_at":"2019-07-12T09:24:51Z","updated_at":"2019-07-12T09:24:51Z","author_association":"CONTRIBUTOR","body":"> Sorry @MangelMaxime for not providing code which compiles 😧 (I wrote the post on a machine without a compiler (sic!).)\r\n\r\nDon't worry :) I prefered to mention it if someone saw the difference or tried your code too."}}
{"actor":{"display_login":"MangelMaxime"}}