[{"data":1,"prerenderedAt":99},["ShallowReactive",2],{"i-lucide:menu":3,"i-lucide:arrow-up-right":8,"i-lucide:moon":10,"i-lucide:sun":12,"i-lucide:rss":14,"i-simple-icons:github":16,"i-simple-icons:linkedin":18,"post-\u002F2011\u002Ffnp-simple-flowchart-app":21,"surround-\u002F2011\u002Ffnp-simple-flowchart-app":86,"i-lucide:arrow-left":95,"i-lucide:arrow-right":97},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 5h16M4 12h16M4 19h16\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 7h10v10M7 17L17 7\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":13},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"4\"\u002F>\u003Cpath d=\"M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":15},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16\"\u002F>\u003Ccircle cx=\"5\" cy=\"19\" r=\"1\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":17},"\u003Cpath fill=\"currentColor\" d=\"M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":19,"hidden":20},"\u003Cpath fill=\"currentColor\" d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037c-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85c3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.06 2.06 0 0 1-2.063-2.065a2.064 2.064 0 1 1 2.063 2.065m1.782 13.019H3.555V9h3.564zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0z\"\u002F>",true,{"id":22,"title":23,"body":24,"category":67,"comments":68,"date":69,"description":30,"excerpt":68,"extension":70,"image":71,"meta":72,"navigation":20,"path":73,"readingTime":74,"seo":75,"stem":76,"subtitle":68,"tags":77,"wordCount":84,"__hash__":85},"posts\u002F2011\u002Ffnp-simple-flowchart-app.md","FNP: Simple Flowchart App",{"type":25,"value":26,"toc":63},"minimark",[27,31,34,37,53,56],[28,29,30],"p",{},"So, it's friday again, the night of partying and alcohol consuming, or in some cases, coding. Here is another one of my FNP (Friday Night Projects), in this case, a simple example on how (not?) to write a simple flowchart app.",[28,32,33],{},"At first, the idea was to do it in Ruby, for learning purposes, and in much larger scale. Users would get a quick signup and the ability to CRUD (Create, Retrieve, Update, Delete) flowcharts... but I gave up on that and chose to write only the UI part with minimal PHP backing. The code is meant to support only one flowchart and the data is hardcoded in PHP (you could ditch the JSON and put it in the HTML too if you wanted to).",[28,35,36],{},"The project includes some CSS and image files, a PHP script that outputs JSON data with flowchart questions+answers and a HTML template with minimal jQuery code to retrieve JSON from the PHP file.",[28,38,39,46,47,52],{},[40,41,45],"a",{"href":42,"rel":43},"http:\u002F\u002Fwww.maxim.com\u002Famg\u002Fhumor\u002Fstupid-fun\u002F83602\u002Fhow-men-women-argue.html",[44],"nofollow","How Men And Women Argue"," was chosen as a base to work on. Total time spent: ~2hrs. The questions and answers are in a PHP array (ideally you'd want to involve a database for that). The code (excluding used 3rd party CSS) is released under ",[40,48,51],{"href":49,"rel":50},"http:\u002F\u002Fwww.dbad-license.org",[44],"Don't be a Dick Public Licence",".",[28,54,55],{},"So, without further ado...",[28,57,58],{},[40,59,62],{"href":60,"rel":61},"https:\u002F\u002Fgithub.com\u002Fanroots\u002Fprojects-archive\u002Ftree\u002Fmaster\u002Fflowchart-app",[44],"View the project in GitHub",{"title":64,"searchDepth":65,"depth":65,"links":66},"",2,[],"Projects",null,"2011-04-02","md","\u002Fcontent\u002F2011\u002F04\u002Fflowchart.jpg",{},"\u002F2011\u002Ffnp-simple-flowchart-app","about 1 minute",{"title":23,"description":30},"2011\u002Ffnp-simple-flowchart-app",[78,79,80,81,82,83],"programming","html","php","Ruby","Flowchart","Languages",218,"16aFJ7ARi8Jsw3gfJy2yDrYbPlnJ65lkb61DODrBiEI",[87,91],{"title":88,"path":89,"stem":90,"children":-1},"Teachers and privacy","\u002F2011\u002Fteachers-and-privacy","2011\u002Fteachers-and-privacy",{"title":92,"path":93,"stem":94,"children":-1},"Hello, .NET!","\u002F2011\u002Fhello-net","2011\u002Fhello-net",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":96},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m12 19l-7-7l7-7m7 7H5\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":98},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 12h14m-7-7l7 7l-7 7\"\u002F>",1790886933756]