Hi! I'm Ellen.

Jeremiah 29:11

For all those Front-End Devs that are like me and love to inspect element and play with the CSS/elements/DOM/what-have-you until your heart is pleased with what meets the eye and to ONLY remember that everything you just did was just in the browser inspect element and that you have YET to transfer all that wonderful markup to your stylesheet, and of course -- you've already refreshed the browser and everything went kaput. Well, FML indeed. And yes, that was a very long run-on sentence.

But let your heart be still -- there is an answer!

Drumroll please...

Ta-Da! Yes, God's gift to Front-End Devs. It autosaves the changes that you've made on Inspect Element and transfers your code to your editor. Works for JS too!

How to install DevTools Autosave:

Google "DevTools Autosave" or find it on the Chrome Web Store. It should be downloaded as a Chrome Extension and not an app.

Run Node.  - Here are some instructions to run Node depending on the machine you are using: http://howtonode.org/how-to-install-nodejs

After successfully running Node, open your Terminal and type:  npm install -g autosave If you are having issues running that command, please refer to this troubleshooting document: https://github.com/NV/chrome-devtools-autosave-server

Restart Chrome.

Open one of your local projects in a new Chrome browser and Inspect Element and play around with the attributes/elements.

Click Reload, and you will see that your changes didn't go away (Hallelujah!) and when you toggle back to your stylesheet, the new changes have magically transferred onto your stylesheet!

AHH-MAZING.

As a side note, if you don't want to keep retyping the autosave command in your Terminal each time you start your OS, you can also install it as a daemon (runs as a background process)... so you don't have to!

Here it is:

    npm run-script -g autosave autostart

Many-a-times, we use jQuery because we want to use it to tell the browser to target certain elements and perform certain things. For us to do that, we have to get nifty at targeting (or many would say "traversing") through the DOM to select the items/elements that you really want to work with.

Here are some jQuery methods we can use to traverse through the DOM:

.children() (will select the immediate children of a parent). Similarly, in CSS we would target the children of a parent by typing:

ul.exampleClass > li { insert styling }

.find() (will find all the children despite who their parents are. I call this the "children abduction" method - it will take alllll the kiddies)

.first() (will target the first immediate child - cause it's always the first child's fault)

.eq() (will select from a list of items based on their index position)

What's Index Position, Ellen? Well, I'm glad you asked...

hello,  jQuery  is   cool  [ 0 ]     [ 1 ]   [ 2 ]  [ 3 ] 

This is how indexing works. The list of items will start at zero instead of one. So if I want to choose the item "is" from that sentence, I could use the method .eq() and give it an index of 2. Like this:  .eq(2)   Yar?

.next() (will select the next item that you've currently targeted)

.prev() (will select the previous item that you've currently targeted)

.parent() (will get the parent of the item)

.parents() (will gather all the parents with the same elements [e.g. same class name] starting from the given selector [from the selector that you've called .parents from e.g $('li').parents('.className')], while traveling up the entire DOM tree returning all matched parent elements -- it's like a parent-teacher night.)

.closest() (will gather the first item that has the same element starting from the given selector and only returning the 'closest' one found. -- Closest ain't greedy, it just wants a one-on-one with ONE parent. Not the whole crowd).

These are just some of the more common jQuery DOM traversing methods, for a more inclusive list, visit the jQuery documentation here: http://api.jquery.com/category/traversing/

If you have Emmet installed on your Sublime, type this next time you have an ul/ol  and li item(s):

Then hit Tab...

...Yep. Life just got 0.28495 times easier. 

Edit:

Better yet, you can grab all the Emmet shortcuts from this cheat sheet: http://docs.emmet.io/cheat-sheet/