News for hackers. Stuff that matters.
Re:Labcss.net - An HTML/CSS snippet, allows direct visual ma... by teuobk on Wednesday September 14, 2011 @11:00AM (#2996495)
Seems similar to http://webputty.net , though WebPutty has CSS hosting, better integration with existing sites, and compatibility with SCSS.

That aside, what problem do you see this as solving? As in, why would somebody learning CSS by "playing around" (as you say on your About page) want to use LabCSS instead of Firebug or the Chrome debugger?

Re:Labcss.net - An HTML/CSS snippet, allows direct visual ma... by ronreiter on Wednesday September 14, 2011 @12:41PM (#2996888)
First of all, webputty will not always be free. Second thing is, webputty is a website for CSS manipulation, whereas labcss is a snippet website for creating styled HTML elemments. The process of building the website is the significat advantage of this website, and not only the CSS tweaking.
Re:Labcss.net - An HTML/CSS snippet, allows direct visual ma... by mwill on Wednesday September 14, 2011 @04:27AM (#2995360)
It supports javascript but the problem is the whole thing is refreshed for every character you type. Example, adding "alert('foo')" will give you an alert for every character you type in the edit box.

Am I doing it wrong or is this supposed to happen? It could probably do with a run button like JSFiddle.

Re:Labcss.net - An HTML/CSS snippet, allows direct visual ma... by ronreiter on Wednesday September 14, 2011 @07:04AM (#2995709)
That's what jsFiddle is for. But I'll add a "live rendering" button to stop this behavior, and give a "Run" button instead as an option.
Re:Labcss.net - An HTML/CSS snippet, allows direct visual ma... by tristanstraub on Wednesday September 14, 2011 @05:31AM (#2995497)
I would go for a check box to turn the auto update on or off. I love this feature.

Along with the selectors on the left and all the nice sliders, you can try out a lot of stuff really quickly.

Re:Labcss.net - An HTML/CSS snippet, allows direct visual ma... by phalasz on Wednesday September 14, 2011 @06:48AM (#2995665)
I think the checkbox approach would be good.

Nice tool though. Easy to try out quick changes fast.

Re:Labcss.net - An HTML/CSS snippet, allows direct visual ma... by dave1010uk on Wednesday September 14, 2011 @08:10AM (#2995893)
I thought this was just a JSFiddle/JSbin type site for CSS but then I clicked on the generated HTML and realized what it lets you do. This looks like a great tool for learning CSS but I can't imagine myself pasting in some HTML/CSS and tweaking one thing at a time by pointing and clicking.

I'd still recommend checking out http://jsfiddle.net which lets you keep JS, HTML and CSS separate and makes it easy to include specific versions of JS libraries (handy for testing/reporting bugs). There's also a nice embeddable (iframe) version and it lets you test ajax responses. There's also http://jsbin.com which has similar features.

Re:Labcss.net - An HTML/CSS snippet, allows direct visual ma... by jcfrei on Wednesday September 14, 2011 @09:39AM (#2996203)
I think the idea is really well executed so forgive my question: why would I use this instead of the built-in functionalities of chrome/firebug?
Re:Labcss.net - An HTML/CSS snippet, allows direct visual ma... by ronreiter on Wednesday September 14, 2011 @12:42PM (#2996896)
Because it allows you to feed back the changes to your snippets immediately to the stylesheet.
Re:Labcss.net - An HTML/CSS snippet, allows direct visual ma... by Meai on Wednesday September 14, 2011 @05:05AM (#2995444)
Pretty cool, although I still don't understand how margin-top: 50%; moves the thing so far down ;) Damn you CSS!
Re:Labcss.net - An HTML/CSS snippet, allows direct visual ma... by bgrins on Wednesday September 14, 2011 @08:40AM (#2995987)
http://www.w3.org/TR/CSS2/box.html#margin-properties

When margin top or bottom is a percentage, it refers to the width, not height, of the containing block. If the parent is 100% width (say, the body), the element will move down 50% of your screen width.

Usually, you don't want this, but you can use it to do some cool tricks with keeping the aspect ratio of an element, like this: http://jsfiddle.net/bgrins/999FP/

Re:Labcss.net - An HTML/CSS snippet, allows direct visual ma... by AdesR on Wednesday September 14, 2011 @12:39PM (#2996874)
I have been using the bookmarklets provided by squarefree.com (https://www.squarefree.com/bookmarklets/webdevel.html) for about 8 or 9 years now. Cross browser, works on the current page, dead easy.
Re:Labcss.net - An HTML/CSS snippet, allows direct visual ma... by morsch on Wednesday September 14, 2011 @07:08AM (#2995719)
"This Google App Engine application is temporarily over its serving quota. Please try again later."

:(

Re:Labcss.net - An HTML/CSS snippet, allows direct visual ma... by ronreiter on Wednesday September 14, 2011 @07:39AM (#2995799)
Yea, didn't see it coming. Fixed now.
Re:Labcss.net - An HTML/CSS snippet, allows direct visual ma... by ilija139 on Wednesday September 14, 2011 @12:23PM (#2996809)
I don't get it. What are the advantages of using this instead of WebKit's Developer Tools or FireBug?
Re:Labcss.net - An HTML/CSS snippet, allows direct visual ma... by ronreiter on Wednesday September 14, 2011 @12:39PM (#2996876)
Because changes are fed back to the CSS stylesheet. And it's a snippet website, apart from a design tool.
Re:Labcss.net - An HTML/CSS snippet, allows direct visual ma... by ilija139 on Wednesday September 14, 2011 @12:48PM (#2996918)
Chrome v13 can save the modified CSS file, it even has revision history.
Re:Labcss.net - An HTML/CSS snippet, allows direct visual ma... by Meai on Wednesday September 14, 2011 @12:31PM (#2996842)
Nicer UI, sliders for values etc. It's a lot faster for experimentation, I certainly appreciate it.
Re:Labcss.net - An HTML/CSS snippet, allows direct visual ma... by gildas on Sunday September 18, 2011 @09:09AM (#3010141)
Already broken ?

Uncaught SyntaxError: <unknown message reserved_word> in HTMLFiddle.js:87

Re:Labcss.net - An HTML/CSS snippet, allows direct visual ma... by aptwebapps on Wednesday September 14, 2011 @10:02AM (#2996269)
It'd be neat if it could grab an existing page. Give it a url and start messing around.
Re:Labcss.net - An HTML/CSS snippet, allows direct visual ma... by ronreiter on Wednesday September 14, 2011 @12:45PM (#2996907)
Cool feature, I'll definitely consider it but it's a bit difficult to execute properly because of image paths and remote javascript/CSS files.
Re:Labcss.net - An HTML/CSS snippet, allows direct visual ma... by bluesnowmonkey on Wednesday September 14, 2011 @01:01PM (#2996982)
The transparent blue overlays you get on hover break scrolling.
Re:Labcss.net - An HTML/CSS snippet, allows direct visual ma... by vadim27 on Thursday September 15, 2011 @02:24AM (#2999091)
Great use of open source resources!
Re:Labcss.net - An HTML/CSS snippet, allows direct visual ma... by theitgirl on Wednesday September 14, 2011 @09:34AM (#2996186)
very cool..i like that it updates in real-time unlike jsfiddle where you have to click save.