{"id":261,"date":"2011-01-28T00:11:35","date_gmt":"2011-01-28T06:11:35","guid":{"rendered":"http:\/\/bateru.com\/news\/?p=261"},"modified":"2011-01-28T00:39:48","modified_gmt":"2011-01-28T06:39:48","slug":"random-css-generator-with-evolution","status":"publish","type":"post","link":"https:\/\/bateru.com\/news\/2011\/01\/random-css-generator-with-evolution\/","title":{"rendered":"Random CSS generator with evolution."},"content":{"rendered":"<p>Hey Guys,<br \/>\nWhat if you could just write HTML and have the CSS generate itself?<br \/>\nWell, this question have been bugging me for while, so I decided to program it.\n<\/p>\n<p>\n<b>Method: <\/b><br \/>\nThe method in which I did so what the following. I wanted to simulate evolution by having the user selecting which <a href=\"http:\/\/www.featureblend.com\/css-json.html\">CSSJSON<\/a> object would have offspring, in an attempt to find the perfect css for the html layout.<br \/>\n<a href=\"http:\/\/bateru.com\/news\/wp-content\/uploads\/2011\/01\/random_css_with_evolution_diagram1.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/bateru.com\/news\/wp-content\/uploads\/2011\/01\/random_css_with_evolution_diagram1-250x300.png\" alt=\"\" title=\"random_css_with_evolution_diagram\" width=\"250\" height=\"300\" class=\"alignleft size-medium wp-image-273\" srcset=\"https:\/\/bateru.com\/news\/wp-content\/uploads\/2011\/01\/random_css_with_evolution_diagram1-250x300.png 250w, https:\/\/bateru.com\/news\/wp-content\/uploads\/2011\/01\/random_css_with_evolution_diagram1.png 398w\" sizes=\"auto, (max-width: 250px) 100vw, 250px\" \/><\/a><\/p>\n<p>\nI&#8217;m think if I applied statistics to see which traces are favorable over all the selected offspring, then the resulting offspring would come out to being more to want the user wants. Also, I discovered that the structure of the html and the choice of tags are fundamental to clean and simple design. CSS can only do so much.\n<\/p>\n<p>\n<b>Issues:<\/b><\/p>\n<ul>\n<li>Works with Chrome, Firefox and Opera<\/li>\n<li>Layout needs some fixing up.<\/li>\n<\/ul>\n<p>\n<b>Demo:<\/b><\/br><br \/>\n<a href=\"http:\/\/bateru.com\/projects\/random_css\/randomCSSGenerator.html\">Random CSS generator with evolution<\/a>\n<\/p>\n<p><b>Feedback:<\/b><\/br><br \/>\nSo what do you think?<br \/>\nDo you have any suggestions for improvements?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What if you could just write the HTML and have the CSS generate itself?<br \/>\nWell, this questions have been bugging me for while. So I decided to program it.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[165,20,164,21,19],"class_list":["post-261","post","type-post","status-publish","format-standard","hentry","category-frontend-tech","tag-css","tag-demo","tag-javascript","tag-javascript-experiment","tag-random-css-generator"],"_links":{"self":[{"href":"https:\/\/bateru.com\/news\/wp-json\/wp\/v2\/posts\/261","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bateru.com\/news\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bateru.com\/news\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bateru.com\/news\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bateru.com\/news\/wp-json\/wp\/v2\/comments?post=261"}],"version-history":[{"count":13,"href":"https:\/\/bateru.com\/news\/wp-json\/wp\/v2\/posts\/261\/revisions"}],"predecessor-version":[{"id":277,"href":"https:\/\/bateru.com\/news\/wp-json\/wp\/v2\/posts\/261\/revisions\/277"}],"wp:attachment":[{"href":"https:\/\/bateru.com\/news\/wp-json\/wp\/v2\/media?parent=261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bateru.com\/news\/wp-json\/wp\/v2\/categories?post=261"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bateru.com\/news\/wp-json\/wp\/v2\/tags?post=261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}