4 ms·

I feel Firebug is one of those developer tools that would have been highly monetized in the current start era. I owe a lot of my own career path as a Web softwa

I feel Firebug is one of those developer tools that would have been highly monetized in the current start era. I owe a lot of my own career path as a Web software engineer to Firebug.

homero 6y ago
I learned CSS with firebug, before that I had no clue what CSS was when it first came out in daily use
- derefr 6y ago
  I learnt CSS long before Firebug. Which means that still to this day, I’m vaguely paranoid that I’m underutilizing Firebug (or its successor dev tools) when I write CSS. The interactive model Firebug exposes just never clicked for me. I feel like said model is maybe more easily-absorbed when you’re starting from scratch, and don’t have the “iterate by editing the CSS file and refreshing the page” model burned into your muscle memory. Are there any video tutorials someone could recommend, where a proficient user of the dev tools uses them to interactively develop and tweak the design of a web-app?
  - JohnBooty 6y ago
    I don't think there's too much to learn there; it's not really a different model at all. You're still writing your CSS in your text editor like normal. 1. Via the debugger you can tweak styles and see feedback in real time. It's just a much faster feedback loop than refreshing the page every time. Then you cut and paste (or save as...) to get the changes back into your source code. 2. You can debug styles. If you are wondering why a particular bit of text is green and bold, it will show you what line of CSS it's inheriting each property from. (And which styles have been overridden)
  - leptons 6y ago
    I started writing CSS the same week it was first available in Internet Explorer 3, so "doing it the way you've always done it" isn't really a good excuse. Being able to click on a value for most things (left, top, width, height, etc) and use the up and down arrow to dynamically move an element around the page, or otherwise tweak anything about it - that's game-changing. If you aren't using the dev tools to tweak your CSS and instead are updating a file and hitting reload, you are way behind in productivity. I'm not even being hyperbolic about this. You want to know how to do it in 2020? Right-click any element, hopefully it has either a class property or a inline CSS style property, dev tools should open and next to the DOM tree view there should be a CSS panel as well as other panels. Just click around in there, you can edit anything to change the layout instantly, add styles, tweak values. Once you're done tweaking values you can copy and paste the CSS just by selecting it in the dev tools, hit CTRL-C, then paste it into your editor, and then hit reload.
    - derefr 6y ago
      I mean, what you're describing doesn't work for me, because the way I write CSS involves heavy reuse of classes and using CSS-Zen-Garden-esque element selectors. I try to "move around an element" in the panel? The whole layout breaks. The approach that makes the CSS inspector functional as a tool for modifying layout, is a completely different paradigm from the one I'm used to. To be clear, I'm a backend engineer; in recent times I only write CSS about once per year, mostly just to update my portfolio site, or to do some interesting little hack. I've never worked with SCSS/SASS, React, web components, etc. But in the past, I have worked full-stack, writing both a backend and the frontend that it works with. And, in those cases, the CSS I've written works, and is responsive and accessible, while also being readable and reusable, in the same sense that a well-factored library of functions is readable and reusable.
      - fiddlerwoaroof 6y ago
        So, my CSS is similar, when I use dev tools to tweak CSS, I generally adjust the “element” section rather than my classes, to make the element I’ve selected look right. Once I’ve gotten that down, I think about the best way to integrate the new styles into the existing ones.
      - leptons 6y ago
        >I try to "move around an element" in the panel? The whole layout breaks. Just more evidence you are doing it really wrong. But, whatever makes you happy, I guess.
        dang 6y ago
        Please don't post like this. We're trying for something a bit better here (which is in the interest of everyone participating here). https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html
        leptons 6y ago
        Sorry but when someone describes what they are doing is wrong, maybe they need to hear that. I don't really care about being nice at all costs, because the truth sometimes hurts. If they change one little thing and the entire layout breaks, that says quite a lot about the situation, and that together with their insistence to do everything like they did 20 years ago just adds up to someone needing to hear the truth. They are doing things very wrong. And this also isn't the place to delve deeply into the root of their problems, as they obviously are not really interested in learning or changing - so if you're offended by the truth, well that's not really my problem.

I feel Firebug is one of those developer tools that would have been highly monetized in the current start era. I owe a lot of my own career path as a Web software engineer to Firebug.

homero 6y ago

I learned CSS with firebug, before that I had no clue what CSS was when it first came out in daily use

derefr 6y ago
I learnt CSS long before Firebug. Which means that still to this day, I’m vaguely paranoid that I’m underutilizing Firebug (or its successor dev tools) when I write CSS. The interactive model Firebug exposes just never clicked for me. I feel like said model is maybe more easily-absorbed when you’re starting from scratch, and don’t have the “iterate by editing the CSS file and refreshing the page” model burned into your muscle memory. Are there any video tutorials someone could recommend, where a proficient user of the dev tools uses them to interactively develop and tweak the design of a web-app?
- JohnBooty 6y ago
  I don't think there's too much to learn there; it's not really a different model at all. You're still writing your CSS in your text editor like normal. 1. Via the debugger you can tweak styles and see feedback in real time. It's just a much faster feedback loop than refreshing the page every time. Then you cut and paste (or save as...) to get the changes back into your source code. 2. You can debug styles. If you are wondering why a particular bit of text is green and bold, it will show you what line of CSS it's inheriting each property from. (And which styles have been overridden)
- leptons 6y ago
  I started writing CSS the same week it was first available in Internet Explorer 3, so "doing it the way you've always done it" isn't really a good excuse. Being able to click on a value for most things (left, top, width, height, etc) and use the up and down arrow to dynamically move an element around the page, or otherwise tweak anything about it - that's game-changing. If you aren't using the dev tools to tweak your CSS and instead are updating a file and hitting reload, you are way behind in productivity. I'm not even being hyperbolic about this. You want to know how to do it in 2020? Right-click any element, hopefully it has either a class property or a inline CSS style property, dev tools should open and next to the DOM tree view there should be a CSS panel as well as other panels. Just click around in there, you can edit anything to change the layout instantly, add styles, tweak values. Once you're done tweaking values you can copy and paste the CSS just by selecting it in the dev tools, hit CTRL-C, then paste it into your editor, and then hit reload.
  - derefr 6y ago
    I mean, what you're describing doesn't work for me, because the way I write CSS involves heavy reuse of classes and using CSS-Zen-Garden-esque element selectors. I try to "move around an element" in the panel? The whole layout breaks. The approach that makes the CSS inspector functional as a tool for modifying layout, is a completely different paradigm from the one I'm used to. To be clear, I'm a backend engineer; in recent times I only write CSS about once per year, mostly just to update my portfolio site, or to do some interesting little hack. I've never worked with SCSS/SASS, React, web components, etc. But in the past, I have worked full-stack, writing both a backend and the frontend that it works with. And, in those cases, the CSS I've written works, and is responsive and accessible, while also being readable and reusable, in the same sense that a well-factored library of functions is readable and reusable.
    - fiddlerwoaroof 6y ago
      So, my CSS is similar, when I use dev tools to tweak CSS, I generally adjust the “element” section rather than my classes, to make the element I’ve selected look right. Once I’ve gotten that down, I think about the best way to integrate the new styles into the existing ones.
    - leptons 6y ago
      >I try to "move around an element" in the panel? The whole layout breaks. Just more evidence you are doing it really wrong. But, whatever makes you happy, I guess.
      - dang 6y ago
        Please don't post like this. We're trying for something a bit better here (which is in the interest of everyone participating here). https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html
        leptons 6y ago
        Sorry but when someone describes what they are doing is wrong, maybe they need to hear that. I don't really care about being nice at all costs, because the truth sometimes hurts. If they change one little thing and the entire layout breaks, that says quite a lot about the situation, and that together with their insistence to do everything like they did 20 years ago just adds up to someone needing to hear the truth. They are doing things very wrong. And this also isn't the place to delve deeply into the root of their problems, as they obviously are not really interested in learning or changing - so if you're offended by the truth, well that's not really my problem.