During a having a team meeting the other day, a code formatting idea came up that I thought was super interesting. It had to do with formatting code in a such a way that made it easier to find what you were looking for later with any code editors “Find in Project” feature.<\/p>\n
<\/p>\n
Here’s what it was.<\/p>\n
When declaring a function in JavaScript, put a space after the function name and before the opening parenthesis, like…<\/p>\n
function doSomething () {\r\n\r\n}<\/code><\/pre>\nThat space between doSomething<\/code> and ()<\/code> is perfectly fine. Then when you call the function, don’t use a space, like this:<\/p>\ndoSomething();<\/code><\/pre>\nIt’s just a syntax convention. <\/p>\n
But now, “Find in Project” is more useful. If we want to quickly find where that function was defined, we can search for “doSomething ()”, and if we want to find instances of where it is used, we can look for “doSomething()”.<\/p>\n
You could extend the idea to classes or whatever too:<\/p>\n
class myThing {\r\n\r\n constructor () {\r\n\r\n }\r\n\r\n doThing () {\r\n\r\n } \r\n\r\n}\r\n\r\nlet example = new myThing();\r\nexample.doThing();<\/code><\/pre>\nI’d say that’s worth doing.<\/p>\n
It reminds me of when I need to where a Ruby method is definied, I can always search for “def foo” since that “def ” is required for creating the method. <\/p>\n
I can imagine a scenario where it might be useful to define base classes in CSS like .module {<\/code> but then if it’s a variation or nested or used again for any other reason… .module{<\/code>. <\/p>\nHere’s a classic:<\/p>\n
\n\/\/ TODO: 😅<\/p>\n
— Charlotte Dann (@charlotte_dann) September 10, 2017<\/a><\/p><\/blockquote>\nLeaving TODO<\/strong> comments throughout your code base turns a “Find in Project” for “TODO” an instant list of things you need to work on. Surely that could be even more nuanced, incorporating things like priority levels and assignments. Perhaps even emoji’s to help like Charlotte suggested!<\/p>\nHere’s an interesting one:<\/p>\n
\nUse long classes\/variables, mark future refactor points with comments. What are you looking for?<\/p>\n
— Chris Pauley (@ChrisPauley) September 10, 2017<\/a><\/p><\/blockquote>\nI like the idea of “long names”. I suppose the longer and more descriptively you name things, the easier they are to search for and get specific results (avoiding repetitive matches like you would with very simple names).<\/p>\n
Comments are a great place to leave things to search for. I often use a convention where I put my own name in the comment if I want people to know it was me leaving the comment, but it’s not necessarily for me.<\/p>\n
.thing {\r\n overflow: hidden; \/* [Chris]: ugkghk this fixed a layout thing but I didn't have time to figure out exactly why. *\/\r\n}<\/code><\/pre>\nA smattering of responses:<\/p>\n
\nAt top of each template I add "<!– Start [name of template] –>", at bottom, same but "End." Helps FIP and in browser-rendered code.<\/p>\n
— Dale Henry Geist (@dalehenrygeist) September 10, 2017<\/a><\/p><\/blockquote>\n\nI use consistent and natural language to name things, so when documentation goes stale, at least the code itself is still easy to stab at.<\/p>\n
— John James Jacoby (@JJJ) September 10, 2017<\/a><\/p><\/blockquote>\n\nNot in the code itself but in Sublime settings folder_exclude_patterns you can pass in an array of folders to exclude from all searches<\/p>\n
— Ian C Woodward (@IanCWoodward) September 10, 2017<\/a><\/p><\/blockquote>\n\n\/\/ TODO 😕
\/\/ FIXME 😲
\/\/ WT* 😤💣<\/p>\n
— Kamran Ahmed (@kamranahmedse) September 10, 2017<\/a><\/p><\/blockquote>\n\nctags is a lifesaver.<\/p>\n
— Harry Roberts (@csswizardry) September 10, 2017<\/a><\/p><\/blockquote>\n\nNaming conventions mate! BEM-esque those classes up `–thing` is always easier to find than `thing`<\/p>\n
— James Bosworth (@fltwhte) September 11, 2017<\/a><\/p><\/blockquote>\n