[{"data":1,"prerenderedAt":259},["ShallowReactive",2],{"project-17662068":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":15,"tier":18,"category":19,"subcategory":20,"format":21,"keywords":22,"reception":28,"sentiment":29,"stance_mix":30,"scored_comments":35,"aspects":36,"strip":42,"post_text":44,"what":45,"said":78,"maker_in_thread":173,"shape":176,"grid":179,"attempts":221,"same_week":222,"maker_shows":40,"maker_hidden":251,"reader_version":252,"card":253},"17662068","StyleURL","Edit CSS via Chrome Devtools and turn the diff into a gist","title","Show HN: StyleURL – Edit CSS via Chrome Devtools and turn the diff into a gist","https:\u002F\u002Fwww.styleurl.app","styleurl.app","firloop",1533128575,2018,94,22,465,2155,"notable","dev_tools","css editing extension","browser_extension",[23,24,25,26,27],"css editor","chrome devtools","css diff","stylesheet","gist","mixed",0.303,{"positive":31,"neutral":32,"mixed":33,"critical":34},7,5,0,2,14,{"idea":37,"execution":39,"docs":41},{"positive":38,"critical":33},4,{"positive":40,"critical":33},1,{"positive":33,"critical":34},[33,32,43,32,32,32,33,32,32,33,33,33,33,32,43,43,40,33,33,43,40,43],3,null,{"problem":46,"audience":58,"pricing":44,"motivation":65,"time_to_build":44,"stack":69,"openness":75,"stage":76,"team_size":77},{"value":47,"source":48,"evidence":49},"Making and sharing CSS changes made in browser devtools is tedious and loses track of edits","commenter",[50,54],{"id":51,"by":52,"text":53},"17666603","nikkwong","Oh my god, I've been waiting and looking for something like this for forever. It's a total pain in the arse to change dozens or hundreds of styles on a page in devtools and have…",{"id":55,"by":56,"text":57},"17666858","flaviocopes","This is amazing. I just tried editing a minified CSS, while the Chrome Dev Tools have a way to show the changes (https:\u002F\u002Fumaar.com\u002Fdev-tips\u002F137-changes-panel\u002F) the result I get…",{"value":59,"source":60,"evidence":61},"Designers and front-end developers","maker",[62],{"id":63,"by":11,"text":64},"17662069","Worked on StyleURL over the past couple of weeks with my friends Jarred (most of the code) and Lucy Guo (design). The goal is to make it super simple for designers & front-end…",{"value":66,"source":60,"evidence":67},"Built for the makers' own need and as a reaction to Stylish's scummy behavior",[68],{"id":63,"by":11,"text":64},[70],{"value":71,"source":72,"evidence":73},"JavaScript (Chrome extension)","inferred",[74],{"id":63,"by":11,"text":64},"open_source","unknown","team",{"praise":79,"objections":96,"requests":117,"questions":145,"alternatives":150},[80,88],{"value":81,"source":48,"evidence":82},"Fills a long-wanted gap in the devtools workflow",[83,87],{"id":84,"by":85,"text":86},"17671358","hellojason","I have to fanboy in here as well...this tool is exactly what I've been wanting for a long time. You've absolutely nailed the workflow for my use case. Thank you so much for…",{"id":51,"by":52,"text":53},{"value":89,"source":48,"evidence":90},"Diffs ignore whitespace and show only valid CSS changes",[91,95],{"id":92,"by":93,"text":94},"17668838","Jarred","Thanks for the kind words about StyleURL. I didn't know about the Changes panel until recently, that's going to help a lot of developers. Behind the scenes, StyleURL parses the…",{"id":55,"by":56,"text":57},[97,107],{"value":98,"source":48,"evidence":99},"Unclear how to use it; no visible place to enter CSS edits",[100,104],{"id":101,"by":102,"text":103},"17667923","wuliwong","I feel really stupid but I don't know how to use it. I clicked the button to open the toolbar in the footer but after that, I don't see where I am supposed to actually input my…",{"id":105,"by":102,"text":106},"17702167","I think just a single line somewhere easy to see that tells the user that they edit in the console and can see the changes in your toolbar would suffice.",{"value":108,"source":48,"evidence":109},"Requires installing a Chrome extension and copy-paste editing",[110,114],{"id":111,"by":112,"text":113},"17666992","101km","I know you can have a workspace and edit local files via Chrome, but is there really no simple way to \"close the loop\" and sync the devtools changes to a local file? This…",{"id":115,"by":93,"text":116},"17667009","I bet it's possible to write a webpack plugin that takes CSS changes from StyleURL and saves them to disk It currently outputs CSS based on the filenames from the sourcemaps,…",[118,129,134,141],{"value":119,"source":48,"evidence":120},"Port to Firefox",[121,125],{"id":122,"by":123,"text":124},"17667650","maturz","You could look into porting it to Firefox, since they use a similar API now it would hopefully not require much work. There was something called Firediff before but it hasn't…",{"id":126,"by":127,"text":128},"17670527","saintPirelli","Yes please.",{"value":130,"source":48,"evidence":131},"Sync changes directly to local files",[132,133],{"id":111,"by":112,"text":113},{"id":115,"by":93,"text":116},{"value":135,"source":48,"evidence":136},"Source map support for SCSS\u002FSass",[137],{"id":138,"by":139,"text":140},"17666657","otibsa","Suggestions: - add .map support for scss\u002Fsass?! - make this usable in gitlab?!",{"value":142,"source":48,"evidence":143},"GitLab support",[144],{"id":138,"by":139,"text":140},[146],{"value":147,"source":48,"evidence":148},"How to use the extension",[149],{"id":101,"by":102,"text":103},[151,158,169],{"value":152,"source":48,"evidence":153},"Chrome DevTools Changes panel",[154],{"id":155,"by":156,"text":157},"17668174","paulirish","> since devtools doesn't keep a log of all your changes It does now, although you'll have to find it. :) Flavio mentioned this below, but peek at the new Changes panel:…",{"value":159,"source":48,"evidence":160},"Chrome Workspaces for local file editing",[161,165],{"id":162,"by":163,"text":164},"17667659","buremba","Actually, you can apply the changes to local files using Chrome's in place editor when you map your local workspace in Devtools. (See the sidebar in Sources tab)",{"id":166,"by":167,"text":168},"17670346","Theodores","The novelty of the Chrome Workspaces wore off for me even though it promises so much, particularly with source maps enabled. The problem for me was in the details, triggering the…",{"value":170,"source":48,"evidence":171},"Firediff",[172],{"id":122,"by":123,"text":124},{"comments":40,"answered":33,"key":174},[175],{"id":63,"text":64},{"commenters":177,"max_depth":43,"maker_replies":40,"first_comment_mins":33,"lifespan_hours":178},16,129,[180,182,185,186,188,189,190,192,193,195,197,198,201,205,206,207,208,210,214,216,219,220],[63,33,33,181,11,40],"project\u002Fneutral\u002Fidea",[183,33,32,184,102,33],"17666294","project\u002Fpositive\u002Fnone",[122,33,43,181,123,33],[126,33,32,187,127,33],"project\u002Fpositive\u002Fidea",[84,33,32,187,85,33],[51,40,32,187,52,33],[162,40,33,191,163,33],"commenter\u002Fneutral\u002Fnone",[155,40,32,184,156,33],[92,40,32,194,93,33],"project\u002Fpositive\u002Fexecution",[196,40,33,191,52,33],"17668924",[166,40,33,191,167,33],[199,40,33,191,200,33],"17670438","have_faith",[202,40,33,203,204,33],"17670455","other\u002Fneutral\u002Fnone","megaman22",[55,34,32,187,56,33],[111,43,43,181,112,33],[115,43,43,181,93,33],[101,38,40,209,102,33],"project\u002Fcritical\u002Fdocs",[211,38,33,212,213,33],"17667935","commenter\u002Fneutral\u002Fdocs","daveidol",[215,38,33,191,102,33],"17668032",[217,38,43,218,93,33],"17668252","maker\u002Fneutral\u002Fdocs",[105,38,40,209,102,33],[138,32,43,181,139,33],[],[223,227,232,237,242,246],{"id":224,"name":225,"points":226,"category":19},"17618059","Layoutit",437,{"id":228,"name":229,"points":230,"category":231},"17652593","canvas-sketch",295,"productivity",{"id":233,"name":234,"points":235,"category":236},"17616839","Percy",234,"languages",{"id":238,"name":239,"points":240,"category":241},"17661451","Toy",180,"games",{"id":243,"name":244,"points":245,"category":236},"17644115","Owl",156,{"id":247,"name":248,"points":249,"category":250},"17625308","Kontext",138,"learning_science",false,"v2",{"id":254,"name":5,"line":6,"ai":251,"cat":19,"year":13,"points":14,"comments":15,"rec":28,"s":255,"top":15,"kw":256,"maker":11,"domain":10,"tier":18,"attempts":33,"strip":257,"url":9,"mix":258,"praise":81,"objection":98,"sub":20},17662068,0.3,[23,24,25,26,27],"0535550550000533100313",[31,32,33,34],1794036568255]