Sublime Snippets, Totally Tooling Tips (S2 Ep2)

Key Takeaways

[Music] do you use Snippets no when you say Snippets I think of like little chunks of code I get from like a gist or something like that pretty close you don't you Snippets in like Sublime Text or no like I've look I'm looking at right now and I have them I don't know what they are I'm uh I'm deducting a point from my Yelp review view how can I have a Yelp like school like I'm not a place you have people can visit you you're totally a place I feel like there's going to be one review and it's just you and it's going to be anonymous it it's just like worst person ever these are your words not not mine what what are Snippets the Snippets are basically Reus chunks of code that you use in your daily workflow stuff that you know you find yourself writing out a lot that would probably benefit from automating a tiny bit Yeah so things like es6 classes where you you've got to have the class keyword name of the thing brackets curly brackets whatever and then like that's just boiler plate that's always going to be the case so you could just have a snippet add that in and then just all you got to do is change the class name yeah and the it's it's kind of neat because you can you can create your own Snippets you can go and customize them there's whole packages of Snippets depending on like the libraries you're using oh so you can just like import someone else's Snippets it's kind of neat um there's a bunch of Snippets that I I find myself using pretty often um the first set are the uh sort of JavaScript and node Snippets from zenoa and this is kind of a really neat set because it covers everything from Little expansions for adding event listeners to your Dom nodes creating elements creating like fragments if you're working on prototypes um it'll give you a nice little expansion for that and it'll also like highlight the relevant piece of code that you're probably going to want to change like the name of the the name of the class the Prototype and the function nice yeah just kind of useful and also does like other things like uh scaffolding out your your iies or iies IES IES what are ifies they're like you immediately invoked functional Expressions you're just you're raising more questions and you're answering when you're just saying words just words check there's a there's a blog post by Ben Alman you you can go check out covers all of this stuff okay it has a great yel review that's all I'm saying from me from me what other snippet packages do you do you have so you've been using es6 a bunch lately right yeah what what do you like in es6 what are you using um it's mostly classes um I've started getting into fat Arrow functions and Promises I've been using for a little while just because of service workers and all the other stuff like that those are the main things okay so there is a really decent package called es6 toolkit that includes um Snippets for promises classes um for classes it's really neat because it'll give you again it'll highlight it'll scaffold out the whole class with the Constructor and it'll also highlight the section of code that you probably want to change first which is kind of nice um it also does fat arrows um generators weak Maps sets so those things did not play with it sounds like this might actually be a nice way of learning about the new es6 feature yeah I think so and I think they've also got um have you used the object literal Shands in es6 so the basic idea there is that like you don't have to type out as much code like we reduce the blil plate for functions and things it also supports that and modules to it's kind of neat there's es6 toolkit um another set that I find myself using pretty often is the polymer and web component snippet package by Rob Dodson yep and that's useful because it helps you when you're writing not just apps but also like uh your elements so let's say you're you're creating a demo page for your app it's got an expansion that'll write out all of like the boiler plate code for your meta tags it'll include the web component polyfills and then you can just go and start creating your own elements and when you're doing that there's a few things you always end up doing like um writing HTML Imports and he's written um Rob dodson's written like this little shorthand hii for that's like saying okay well hii do me the entire line that I require for wring an import or write me out all of the the boiler plate code I need for my element I must Adit that is the one like criticism I have of polymer like I like the notion of just being able to pull in some component just using it my page it's it's all the stuff around it like you have to add it to your Bower you have to add it to the the actual HTML of your page and you've got to add in the HTML input and it's just like those steps are at a point where I'm like I just want this thing to exist can you just make magic happen so anything that simplifies that I think is really nice if if only you had a a friend/ colleague that that WR something a polymer starter kit that can potentially help you there name um so for people using other libraries and there's a ton of other libraries out there things like uh Frameworks like Ember things like angular angular 2 and so on um react y um there's actually a really good set of packages that you can check out for those as well the react one's I think pretty popular works well with Babble so yeah check check them out so next time there's a new framework on the side that be a brand new package for Snippets and then boom yes [Music]