{"id":9337,"date":"2024-08-23T14:24:36","date_gmt":"2024-08-23T18:24:36","guid":{"rendered":"https:\/\/blogs.swarthmore.edu\/its\/?p=9337"},"modified":"2024-08-26T09:32:17","modified_gmt":"2024-08-26T13:32:17","slug":"whats-in-a-web-developers-toolbox-in-2024","status":"publish","type":"post","link":"https:\/\/blogs.swarthmore.edu\/its\/2024\/08\/23\/whats-in-a-web-developers-toolbox-in-2024\/","title":{"rendered":"What&#8217;s in a Web Developer&#8217;s Toolbox in 2024?"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Code Editors<\/h2>\n\n\n\n<p><strong>A good code editor is the heart and foundation of a developer&#8217;s toolbox.<\/strong><\/p>\n\n\n\n<p>There are a lot of them out there. <a href=\"https:\/\/survey.stackoverflow.co\/2024\/technology#most-popular-technologies-new-collab-tools\">According to Stack Overflow&#8217;s yearly survey<\/a>, 75% of developers, including myself, use <a href=\"https:\/\/code.visualstudio.com\/\">Visual Studio Code<\/a>. There&#8217;s a reason it&#8217;s so popular. VSCode has a very large &amp; well supported plugin ecosystem via the VSCode marketplace. This allows the developer to highly tune their environment to their needs.<\/p>\n\n\n\n<p>I asked the some other web developers at Swarthmore, and they all use VSCode as well. However all of us use different extensions. <\/p>\n\n\n\n<p>As for myself, I use the following extensions (I am going to ignore language support plugins here)<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=vscodevim.vim\">Vim<\/a> &#8211; Look.. sometimes I don&#8217;t want to use the mouse ok?<\/li><li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ms-vscode-remote.remote-wsl\">WSL <\/a>&#8211; Allows me to connect to and run everything in my <a href=\"https:\/\/learn.microsoft.com\/en-us\/windows\/wsl\/install\">WSL container<\/a>.<\/li><li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=rhalaly.scope-to-this\">Scope to This<\/a> &#8211; Allows me to scope to a certain folder within large projects.<\/li><li><a href=\"https:\/\/www.continue.dev\/\">Continue<\/a> &#8211; Adds AI support to VSCode.<\/li><li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=GitHub.github-vscode-theme\">GitHub Theme<\/a> &#8211; Do people even code without cool themes?<\/li><\/ul>\n\n\n\n<p><strong>Les Leach<\/strong>, Web Developer at Swarthmore says he and his team makes great use of the <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ms-azuretools.vscode-docker\">Docker extension<\/a>.<\/p>\n\n\n\n<p><strong>Kenny Whitebloom<\/strong>, Frontend Developer at Swarthmore mentions he uses the <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=eamodio.gitlens\">GitLens<\/a> plugin, which supplements and enhances git support for VSCode.<\/p>\n\n\n\n<p><strong>Michael Kappeler,<\/strong> Web Developer at Swarthmore says that he really likes the <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=mechatroner.rainbow-csv\">rainbow csv<\/a> plugin, which is helpful for working on large csv files. He also uses the <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=dracula-theme.theme-dracula\">Dracula theme<\/a>.<\/p>\n\n\n\n<p>There are other good code editors out there, VSCode just happens to be the most popular.<\/p>\n\n\n\n<p>Some other notable IDEs are <a href=\"https:\/\/visualstudio.microsoft.com\/\">Visual Studio<\/a>, <a href=\"https:\/\/www.jetbrains.com\/\">JetBrains<\/a> (each language has a different IDE, but they are all fundamentally similar), and if you are on macOS or Linux, <a href=\"https:\/\/zed.dev\/\">zed<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Text Editors<\/h2>\n\n\n\n<p>Sometimes you don&#8217;t want to open an entire IDE to edit a few lines of text. This is where generic text editors shine.<\/p>\n\n\n\n<p>Personally, I use <a href=\"https:\/\/neovim.io\/\">neovim<\/a> for most text editing, or <a href=\"https:\/\/notepad-plus-plus.org\/\">Notepad++<\/a>, depending on if the file is in WSL or not.<\/p>\n\n\n\n<p><strong>Les Leach<\/strong> mentions that he uses <a href=\"https:\/\/www.barebones.com\/products\/bbedit\/index.html\">BBEdit<\/a> because of it&#8217;s powerful text processing capabilities, one of them being a feature called <strong>Zap Gremlins<\/strong>, which is useful for finding hidden control characters. (Anyone who has copy + pasted code to their editors know this is a big PITA!)<\/p>\n\n\n\n<p>Other editors (specifically terminal-based ones) include emacs and nano.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Browsers<\/h2>\n\n\n\n<p>It&#8217;s important to keep a few browsers installed to ensure your websites look the way they should in each. You can check out the <a href=\"https:\/\/www.w3schools.com\/browsers\/\">W3C Browser Statistics page<\/a> for a sense of what browsers the internet is using.<\/p>\n\n\n\n<p>I keep Chrome and Firefox around to test.<\/p>\n\n\n\n<p>During development, I tend to use Google Chrome. <a href=\"https:\/\/www.google.com\/chrome\/index.html\">Chrome<\/a> or <a href=\"https:\/\/www.mozilla.org\/en-US\/firefox\/new\/\">Firefox<\/a> are both good choices here, as both have robust <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/Common_questions\/Tools_and_setup\/What_are_browser_developer_tools\">developer tools<\/a> (which you will be using a lot!).<\/p>\n\n\n\n<p>Depending on your browser, you may also want to look into automated testing to measure the quality of your site. <a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/overview\/\">Lighthouse<\/a> is a great all around testing solution, and has a <a href=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/google-lighthouse\/\">Firefox Add-On<\/a>. If your testing is more accessibility-forward, <a href=\"https:\/\/www.deque.com\/axe\/browser-extensions\/\">aXe devtools<\/a> is great to have, and has both <a href=\"https:\/\/chromewebstore.google.com\/detail\/axe-devtools-web-accessib\/lhdoppojpmngadmnindnejefpokejbdd?pli=1\">chrome<\/a> and <a href=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/axe-devtools\/\">firefox<\/a> extensions.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Docker<\/h2>\n\n\n\n<p>I asked some of the other developers in ITS what they were using, and Docker seemed to be one of the must-haves. <\/p>\n\n\n\n<p><strong>Les Leach<\/strong> mentions this: <a href=\"https:\/\/www.docker.com\/\">Docker<\/a> is one of the best developer tools we use. Docker allows us to develop multiple projects at once without have to install different software packages or server platforms on our workstations to complete the job.<\/p>\n\n\n\n<p>When working in a team settings, docker is a godsend. For those not in the know, or who need a refresher, docker allows you to containerize an entire instance, allowing quick and easy sharing between developers.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Git<\/h2>\n\n\n\n<p>Git is an indispensable tool that introduces version control to your project (and so much more). If you are developing anything at all, it&#8217;s probably a good idea to make sure your project is using it. If you are looking to learn git, <a href=\"https:\/\/learngitbranching.js.org\/\">Learn Git Branching<\/a> has a fun game aimed at teaching newcomers.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">ChatGPT \/ AI<\/h2>\n\n\n\n<p>Or some other AI assistance is a very helpful thing to have while you are developing. I&#8217;ve found it useful as a replacement for scrolling through documentation and helping build out react components.<\/p>\n\n\n\n<p><strong>Andrew Ruether<\/strong>, Director of Academic Technology at Swarthmore mentions that he&#8217;s used ChatGPT for things like data visualization, SQL queries, and comparing &amp; mutating datasets.<\/p>\n\n\n\n<p>ChatGPT&#8217;s <a href=\"https:\/\/openai.com\/index\/dall-e-2\/\">DALL-E<\/a> is also very useful for generating images (though most of the time, they are pretty mid, as shown in this article&#8217;s featured image).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Requests<\/h2>\n\n\n\n<p>Most developers also have a go-to tool to test out making requests to APIs.<\/p>\n\n\n\n<p><strong>Les Leach<\/strong> says <a href=\"https:\/\/github.com\/advanced-rest-client\/arc-electron\">ARC<\/a> is a useful tool for this.<\/p>\n\n\n\n<p>I&#8217;m old-school and like using <a href=\"https:\/\/curl.se\/\">curl<\/a>, but have used <a href=\"https:\/\/www.postman.com\/\">Postman<\/a> for larger projects. I will probably check out ARC soon though, since Postman has become a bit bloated in the past years.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The End? <\/h3>\n\n\n\n<p>In summary, a code editor, git, and a decent browser (chrome or firefox.. sorry safari users) are the basics of a web developer&#8217;s toolbox. <\/p>\n\n\n\n<p>If you are collaborating with others, Docker is a great way to containerize your app so that it runs the same on everyone&#8217;s machine.<\/p>\n\n\n\n<p> Do you have any tools you&#8217;d like to share? Feel free to email me at aweed1@swarthmore.edu<\/p>\n\n\n\n<p>Cheers!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Code Editors A good code editor is the heart and foundation of a developer&#8217;s toolbox. There are a lot of them out there. According to Stack Overflow&#8217;s yearly survey, 75% of developers, including myself, use Visual Studio Code. There&#8217;s a &hellip; <a href=\"https:\/\/blogs.swarthmore.edu\/its\/2024\/08\/23\/whats-in-a-web-developers-toolbox-in-2024\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">What&#8217;s in a Web Developer&#8217;s Toolbox in 2024?<\/span><\/a><\/p>\n","protected":false},"author":70,"featured_media":9363,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[2,303,304],"tags":[306,90,308,526],"class_list":{"0":"post-9337","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-academic-technology","8":"category-development","9":"category-web-development","10":"tag-development","11":"tag-featured","12":"tag-web-development","13":"tag-webdev","15":"fallback-thumbnail"},"jetpack_featured_media_url":"https:\/\/blogs.swarthmore.edu\/its\/wp-content\/uploads\/2024\/08\/webdevtoolbox.png","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/ph2nPL-2qB","_links":{"self":[{"href":"https:\/\/blogs.swarthmore.edu\/its\/wp-json\/wp\/v2\/posts\/9337","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.swarthmore.edu\/its\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.swarthmore.edu\/its\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.swarthmore.edu\/its\/wp-json\/wp\/v2\/users\/70"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.swarthmore.edu\/its\/wp-json\/wp\/v2\/comments?post=9337"}],"version-history":[{"count":21,"href":"https:\/\/blogs.swarthmore.edu\/its\/wp-json\/wp\/v2\/posts\/9337\/revisions"}],"predecessor-version":[{"id":9366,"href":"https:\/\/blogs.swarthmore.edu\/its\/wp-json\/wp\/v2\/posts\/9337\/revisions\/9366"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.swarthmore.edu\/its\/wp-json\/wp\/v2\/media\/9363"}],"wp:attachment":[{"href":"https:\/\/blogs.swarthmore.edu\/its\/wp-json\/wp\/v2\/media?parent=9337"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.swarthmore.edu\/its\/wp-json\/wp\/v2\/categories?post=9337"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.swarthmore.edu\/its\/wp-json\/wp\/v2\/tags?post=9337"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}