4 ms·

Designing the Flexbox Inspector

142 points by lainon 8y ago

saagarjha 8y ago
> Mobile-inspired navigation & structure This is an interesting choice for a desktop developer tool. Was this purely a design choice, or did the new structure end up being more accessible?
- luhn 8y ago
  Since the flexbox inspector is is a sidebar in the DevTools, they're working with similar size constraints as a mobile device. I think taking design inspiration from mobile makes sense.
uallo 8y ago
I stumbled upon this today while using Firefox Developer Edition and I have to say it is very useful. Thanks for the write-up.
projproj 8y ago
I created this site to help me better understand flexbox: flexbox.help. Also did grids.help for CSS grids.
- skeoh 8y ago
  Great tool. Very simple and straightforward. Well done!
- wiradikusuma 8y ago
  great tool! suggestions: 1. ability to set flex properties for the children (e.g. grow) 2. "templates" (if you go to Bootstrap, they have a few, e.g. with header, with header+footer, etc)
nvahalik 8y ago
Man. Flexbox is one of those things that makes me excited to do front end stuff again. And I love that Mozilla is making better and better tools.
- the_duke 8y ago
  Flexbox is awesome. Flexbox will also have you scratching your head and randomly changing css values because your layout is completely messed up and you have no idea why.
- unicornporn 8y ago
  Have a look at CSS grids and get prepared to drop your jaw. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La...
  - chrismorgan 8y ago
    In practice, almost everything that you ever want to achieve with Grid can be achieved with Flexbox. Time and time again, I’ve encountered examples of “what Grid enables”, and been able to replicate it precisely with Flexbox. Not always—there are definitely practical things you can achieve with Grid that you can’t with previous layout options, I’ve made a couple myself—but almost always.
    - exogen 8y ago
      Interesting, having used them both a lot I feel exactly the opposite way – I think grid's capabilities apply to more situations and suspect it will be the go-to layout/alignment tool once it catches on more. Grid is the more powerful tool, I think the only feature it can't do that flexbox does is making wrapped items not line up (since grid, of course, wants to make them line up into a grid). Wanting items not to line up seems less common, doesn't it?
      - chrismorgan 8y ago
peyao 8y ago
Installed Firefox Developer Edition after using only Chrome for awhile. Pleasantly surprised how well everything works, especially the dev tools pane -- feels more smooth than Chrome's dev tools.
- est31 8y ago
  This is weird. Some people claim that Firefox's dev tools are better, others claim that the Chrome dev tools are better and that Firefox doesn't even compare. I wonder who is right. Is this like comparing different car brands where you can never reach a good conclusion? I personally have always been using Firefox, so its dev tools are most familiar to me, but there have been times where I've run into unimplemented features that were implemented in Chrome.
  - sbr464 8y ago
    7 billion people, probably room for at least 2 choices, especially given most other categories of services/products have 10x as many. I’d say the car or luxury brand reference is fitting, since it probably comes down to trade-offs/personal opinions.
  - chrismorgan 8y ago
    In matters of layout, Firefox has tended to have a substantial lead. In matters of script debugging, Chrome has tended to have a substantial lead. In other places, it’s not so consistent. Take debugging as an area where I think it is fair to say that Chrome is miles ahead at present: Chrome’s debugger is fast; pausing normally takes under a second to finish updating the UI, and stepping mostly takes a slight fraction of a second. It is also particularly helpful, showing the values of variables at the end of each line when stepping through. Firefox’s debugger is slow; pausing typically takes several seconds for the UI to catch up, and stepping tends to take a second or two, with some UI thrashing. It is unreliable in the presence of source maps (you put a breakpoint on line 1234 of the source? Well that translated to line 1 in what’s actually being executed, and breakpoints are no more precise than linewise, so… yeah). Firefox Nightly’s debugger is also currently completely broken for me at FastMail due to https://bugzilla.mozilla.org/show_bug.cgi?id=1516941 https://bugzilla.mozilla.org/show_bug.cgi?id=1516941, so I’m having to spin up Chrome when I need to do any debugging, which I don’t like having to do. In the normal run of things, I stick with Firefox even through its slow debugger, because I do find that it does a better job in some areas of debugging (I think it was examining values and operating at varying layers of the stack). For personal context: I’ve been a Firefox user since about 0.93, and have had Nightly as my daily driver most of the time for several years. I don’t much like Chrome. That doesn’t stop it from being better in certain areas, though.
exodust 8y ago
Been smashin Flexbox lately, it's a significant win for frontend, and now widely supported. I usually have this cheat sheet open: http://yoksel.github.io/flex-cheatsheet/#display http://yoksel.github.io/flex-cheatsheet/#display I like because it has the "applies to: container/items" clearly shown for each property, which I always forget... The next thing I want to try is using css transitions to "animate" flexbox containers so that dynamic content inside smoothly expands the height of the container down the page, instead of the abrupt jump we're used to. I haven't managed to crack this yet, but heard a rumour that it's possible. So if anyone has tips.... (edit: found this which details the issue, and describes said flexbox trick: https://css-tricks.com/using-css-transitions-auto-dimensions/ https://css-tricks.com/using-css-transitions-auto-dimensions... )
nick2021 8y ago
So considering that Chrome has what like over 50% market share you have to ask yourself what major problem is Firefox solving that Chrome isn't? I feel like Firefox has all of the people on payroll that just spend their days reinventing a wheel that rolls really good.

142 points by lainon 8y ago

> Mobile-inspired navigation & structure This is an interesting choice for a desktop developer tool. Was this purely a design choice, or did the new structure end up being more accessible?

luhn 8y ago
Since the flexbox inspector is is a sidebar in the DevTools, they're working with similar size constraints as a mobile device. I think taking design inspiration from mobile makes sense.

uallo 8y ago

I stumbled upon this today while using Firefox Developer Edition and I have to say it is very useful. Thanks for the write-up.

projproj 8y ago

I created this site to help me better understand flexbox: flexbox.help. Also did grids.help for CSS grids.

skeoh 8y ago
Great tool. Very simple and straightforward. Well done!
wiradikusuma 8y ago
great tool! suggestions: 1. ability to set flex properties for the children (e.g. grow) 2. "templates" (if you go to Bootstrap, they have a few, e.g. with header, with header+footer, etc)

nvahalik 8y ago

Man. Flexbox is one of those things that makes me excited to do front end stuff again. And I love that Mozilla is making better and better tools.

the_duke 8y ago
Flexbox is awesome. Flexbox will also have you scratching your head and randomly changing css values because your layout is completely messed up and you have no idea why.
unicornporn 8y ago
Have a look at CSS grids and get prepared to drop your jaw. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La...
- chrismorgan 8y ago
  In practice, almost everything that you ever want to achieve with Grid can be achieved with Flexbox. Time and time again, I’ve encountered examples of “what Grid enables”, and been able to replicate it precisely with Flexbox. Not always—there are definitely practical things you can achieve with Grid that you can’t with previous layout options, I’ve made a couple myself—but almost always.
  - exogen 8y ago
    Interesting, having used them both a lot I feel exactly the opposite way – I think grid's capabilities apply to more situations and suspect it will be the go-to layout/alignment tool once it catches on more. Grid is the more powerful tool, I think the only feature it can't do that flexbox does is making wrapped items not line up (since grid, of course, wants to make them line up into a grid). Wanting items not to line up seems less common, doesn't it?
    - chrismorgan 8y ago

peyao 8y ago

Installed Firefox Developer Edition after using only Chrome for awhile. Pleasantly surprised how well everything works, especially the dev tools pane -- feels more smooth than Chrome's dev tools.

est31 8y ago
This is weird. Some people claim that Firefox's dev tools are better, others claim that the Chrome dev tools are better and that Firefox doesn't even compare. I wonder who is right. Is this like comparing different car brands where you can never reach a good conclusion? I personally have always been using Firefox, so its dev tools are most familiar to me, but there have been times where I've run into unimplemented features that were implemented in Chrome.
- sbr464 8y ago
  7 billion people, probably room for at least 2 choices, especially given most other categories of services/products have 10x as many. I’d say the car or luxury brand reference is fitting, since it probably comes down to trade-offs/personal opinions.
- chrismorgan 8y ago
  In matters of layout, Firefox has tended to have a substantial lead. In matters of script debugging, Chrome has tended to have a substantial lead. In other places, it’s not so consistent. Take debugging as an area where I think it is fair to say that Chrome is miles ahead at present: Chrome’s debugger is fast; pausing normally takes under a second to finish updating the UI, and stepping mostly takes a slight fraction of a second. It is also particularly helpful, showing the values of variables at the end of each line when stepping through. Firefox’s debugger is slow; pausing typically takes several seconds for the UI to catch up, and stepping tends to take a second or two, with some UI thrashing. It is unreliable in the presence of source maps (you put a breakpoint on line 1234 of the source? Well that translated to line 1 in what’s actually being executed, and breakpoints are no more precise than linewise, so… yeah). Firefox Nightly’s debugger is also currently completely broken for me at FastMail due to https://bugzilla.mozilla.org/show_bug.cgi?id=1516941 https://bugzilla.mozilla.org/show_bug.cgi?id=1516941, so I’m having to spin up Chrome when I need to do any debugging, which I don’t like having to do. In the normal run of things, I stick with Firefox even through its slow debugger, because I do find that it does a better job in some areas of debugging (I think it was examining values and operating at varying layers of the stack). For personal context: I’ve been a Firefox user since about 0.93, and have had Nightly as my daily driver most of the time for several years. I don’t much like Chrome. That doesn’t stop it from being better in certain areas, though.

exodust 8y ago

Been smashin Flexbox lately, it's a significant win for frontend, and now widely supported. I usually have this cheat sheet open: http://yoksel.github.io/flex-cheatsheet/#display http://yoksel.github.io/flex-cheatsheet/#display I like because it has the "applies to: container/items" clearly shown for each property, which I always forget... The next thing I want to try is using css transitions to "animate" flexbox containers so that dynamic content inside smoothly expands the height of the container down the page, instead of the abrupt jump we're used to. I haven't managed to crack this yet, but heard a rumour that it's possible. So if anyone has tips.... (edit: found this which details the issue, and describes said flexbox trick: https://css-tricks.com/using-css-transitions-auto-dimensions/ https://css-tricks.com/using-css-transitions-auto-dimensions... )

nick2021 8y ago

So considering that Chrome has what like over 50% market share you have to ask yourself what major problem is Firefox solving that Chrome isn't? I feel like Firefox has all of the people on payroll that just spend their days reinventing a wheel that rolls really good.