[music] hi, i'm lisa catalano, and i'm a webdeveloper and designer. today, i want to talk about my mostimportant development tool and that's my favoritecode editor, brackets. brackets is a free, open source codeeditor led by a team from adobe. it's been around for about two years now. it started with a few great features thatwere unique and new, like the quick edit andlive preview. however, it took some time for it tobecome
the robust and powerful code editor thatit is today. in this video i am going to show you someof those unique features and the ways it can compete withany other code editor out there. one of the reasons i love bracket so muchis that it was created for front end developers and designers, it has avery attractive interface that's clean andsimple, yet powerful. it appeals to my design sensibility andbecause i spend all day in my code editor that makes mehappy. the first special thing that brackets hasis a
live preview which you can access byclicking here. it allows to see changes to your html and cssimmediately in the browser. the second special thing brackets givesyou is the quick edit feature. if i'm in an html tag i can quickly editthe css. when i go into quick edit, it will allow me to edit any existing rules that targetthat selector. it's finding a body tag in normalized css,but i want to create a new rule so i'll choosethat.
then i get to decide where i want the ruleto go, and i'll choose main.css. when i add some css properties, you cansee that the code hinting works great inside ofquick edit mode. notice, i have not saved anything yet. the circle is indicating that it needs tobe saved. but, the changes are showing in thepreview anyway. when you have multiple rules that would beapplied to your current selector, you can switchbetween them on the right or by hitting alt+arrowkeys.
to get out of quick edit, i can hit esc. if i'm on the ul tag and i hit cmd orctrl+e i see all the ul tags in css. but, if i move my cursor to the class nameinstead, i can create a new rule for the class ofy. you can see that the code hinting usesfuzzy logic, and you can skip letters when typingproperties and values. one feature of brackets that doesn't getas much attention, is something that i can't live without now,and it's the image preview. if we go into the sidebar to look at thefiles in our project, we can see
in the image folder, we get to actuallysee the image and its dimensions in the editorarea. this is one reason this code editor is agreat choice for web designers. if i add that image, the html, notice hownicely it let's me find the image in the directoryand add it. i barely had to type anything. now if i look at the html and hover overthe image tag, i can actually see a preview of the imageright there, i love that. another part of the quick edit that'sgreat
is the ability to get the color pickerwhen your on a color and a bezier curve editorwhen your editing something like a transition. i do need to go into the css file to dothat. if i go to a color and start up click at it, i can pick a newcolor with the color picker. if i add a change to the image on hover. and then add a transition.
i can create custom easing with quickedit. i just drag the handles to make thetransition that i want. if i need some help with a css property, ican use the quick docs feature. let's say i can't remember how to add aninside box shadow. i can type box shadow, then get to somehelp by either right clicking for the menu ortyping cmd or ctrl+k. i can see the word i want is inset so ican add it now. quick docs doesn't work with javascriptout of the box but there are extensions that will make thiswork with javascript and php.
when brackets first came out it had someof these wow features that made it specialbut, it didn't have all the powerful code editingfeatures that developers have come to expect in a codeeditor. but within the past year all of that haschanged and you can do most of the things you reallywant in brackets. for example, you can use multiple cursors. one way is to hold the alt key down anddrag the mouse. this works on both mac and windowsmachines.
now i can type once and it goes everywheremy cursor is. another way is to select a word with cmdor ctrl+b and then hit that again and again, to find andselect the next words. you can also move code around easily, whenyou learn the shortcuts. i'm going to open a larger project filenow. brackets uses fuzzy logic for code hintingand for quick open. i can hit cmd or ctrl+shift+o to get toquick open. it does a great job of moving to the top the files you are more likely to want toopen.
i don't have to type all the letters tofind something. it also has great find and replacefeatures to use across a large code base. i can easily exclude folders and fileshere, and it tells me how many files it will searchthrough down here. i can preview the changes it will make anddeselect places i don't want to make the change, either byfile or by line. brackets isn't just good for html and css,it does a great job with javascript, and you can useit for any language. it will lint your code automatically andtell you your errors.
this linting can be configured to yourpersonal preferences. and the quick edit feature works withjavascript as well. i'll add some quick jquery here in themain js file. notice that nothing is changing in thelive preview right now. however, as soon as i save this file, youcan see the change in the browser. i can click at it to take me to the function definition in the actualj-query source. and if you're working with a largejavascript code base, it will find your functionsanywhere.
if i want to take this further and see theshow hide function, i can click on the file name to open it in the correctspot, and then click edit again. and it will take me right to thatfunction. so i have two parts of the jquery sourceopen in one window at the same time. brackets does not have split view but thisquick edit feature means you need it a littleless often. split view is coming in a future releasehowever. the newest version of brackets lets youcustomize your workspace with themes, it only comes withtwo themes
out of the box, however there are lots of themes you can choose from in theextension manager. if i go to the extension manager, i can typetheme and it will show me lots of options. speaking of the extension manager, this is animportant part of brackets. brackets is an open source project and hasa lot of community involvement, especiallyin the area of extension. they allow you to add functionality tobrackets that isn't part of the core.
sometimes these extensions get pulled intothe core which is what happened with the themesfunctionality. there are too many great extensions tomention, but if you find brackets missing some functionality youwant, do a search in the extension manager and you might find it there, this was justa quick high level view at some of the greatfeatures of brackets. if you looked at brackets int he past andliked the quick edit concept but didn't think it was a powerfulenough editor for you yet. i would encourage you to try it again,it's come a
long way from the initial concept andworks great for your everyday editor now, thanks for watching, if youhave any questions about anything i've discussed here, you can askme on twitter at @lcatdesigns.
Tidak ada komentar:
Posting Komentar