Record a screencast #1

Closed
NV opened this Issue Oct 5, 2011 · 14 comments

Projects

None yet

4 participants

@NV
Owner
NV commented Oct 5, 2011

No description provided.

@NV NV was assigned Oct 5, 2011
@NV
Owner
NV commented Dec 14, 2011

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
Owner
NV commented Dec 14, 2011

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
Owner
NV commented Dec 16, 2011

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
Owner
NV commented Dec 16, 2011

@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
Owner
NV commented Dec 16, 2011

@drewcovi see #9.

@NV NV closed this Apr 7, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment