Record a screencast

[paulirish]

done?

[NV]

Not really; it barely scratched the surface. Needs to cover:

• editing CSS

  • in Styles pane
  • edit rules that WebKit does not support, like -moz- stuff. It works.
  • adding comments /**/. It also works!

  • Editing multiple properties:

    background-image: url(some_gradient.png);
    background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, color-stop(0.03, #6E9577), color-stop(0.52, #8FB39B))`

    You can edit the later one and the former will be untouched.

  • in Resources
  • add new CSS rules
• editing JavaScript
  • It updates edited function without even reloading the page. Isn't that kick ass?
• installing the extension and the server
• DevTools autosave Options
  • Add a rule for some remote server that runs Rails or something.

Paul, it would be so awesome if you recored a screencast that covers some of it! Please please please!!1

[addyosmani]

Depending on how soon Paul or someone else might get a screencast on this done, I wouldn't mind doing a 5ish minute one that covers some of the core concepts if it would help at all.

[NV]

Sure, it will help a lot!

[paulirish]

Yup i'm good with addy beating me to it. I'll put the heavy push on this when its ready

[addyosmani]

Sahweet. Will post back as soon as it's ready.

[addyosmani]

@paulirish @NV

Here you go: http://addyosmani.com/blog/autosave-changes-chrome-dev-tools/

Please do let me know if anything needs to be changed at all.

[drewcovi]

@addyosmani Awesome vid! Pretty much answered everything for me besides perhaps a little more info on the serverside implementation.

[NV]

First of all, huge thanks for the video!

The intro (0:00—0:16) is larger than the actual screencast, so the screencast has a black border.

0:45 it works not only for local files. You just have to run the server and configure the extension in its Options. Would be nice if you said at least few words that is possible.

3:15 in not fullscreen mode it's hardly visible a change. Would be better if you added something other than text-decoration such as border: 10px solid green. Not a big deal, though.

5:10 would be better if you added alert into the click handler. It would apply without even reloading the page.

[addyosmani]

@NV You are very welcome and thanks for the feedback. Most of the changes should be visible in full screen with HD turned on but I'll definitely update with more info on non-local file editing. I wanted to hold off until I'd had a chance to experiment with that first hand :)

It would also be really useful to know if you have further plans for new additions or expansions to the extension in the future :)

[drewcovi]

heck yes! this is incredible, now if only we could toggle between a "test" mode and a "dev" mode... as its been mentioned a lot of folks use this for testing. great work again folks.

[NV]

@addyosmani I don't really have plans. I wait for someone who try/adopt it for popular frameworks like Rails, Django, Wordpress.

@drewcovi I'm not following. What those modes suppose to do?

[drewcovi]

some quick button to toggle it on/off would be all it needs, since a lot of us also use the inspector to test out styles before committing them.

[NV]

@drewcovi see #9.