NUS Dev Tools

This repo serves as a list of tools, extensions, and resources for the NUS Marketing Development team. The purpose of this is to keep the team and the codebase organized, consistent, and simpler as to leave us more time to focus on tasks at hand instead of small pesky errors one could make.

Table of Contents

• Code Editor Extensions
• Placeholders
• Image Compression
• Pagespeed

Code Editor Extensions

This section lists extensions which are available for most code editors, primarily Visual Studio Code editor.

• Auto Close Tag - As it states, auto closes your tags. Valid markup yo!
• Code Spell Checker - Keep your spelling on check so that your naming conventions and comments make sense to future devs, or yourself when debugging.
  • Add the provided dictionaries in the /code-spell-dictionaries/ directory so that you do not get distracted or start your own from scratch.
  • Refer to the settings.json file for how to set up the custom dictionaries as part of your VS Code setup.
  • Feel free to do a pull request to add more words or more dictionaries.
• ESLint - Integrates ESLint into VS Code to lint JS code in your project. Atom Ext.
• Import Cost - Displays inline the cost (size) of the package you are using in your ES6 JS. Atom Ext.
• PHP DocBlocker - Keep your code documented. No need to add a comment for every line. Use naming conventions, breathing room (space), and other methods to make your code understandable as it's read line by line. This extension is more to help do block docs for files, functions, classes, and methods and give an understanding of these, their parameters, etc. Similar Atom Ext.
• phpcs - Keep your code clean and up to WP/WPVIP/NUS team standards. This makes someone viewing your code not have to learn new (or unique) methodologies. Consistency, cleanliness! Remember, the codebase should look like one person wrote the whole thing. Atom Ext.
• SASS - Supported for indented SASS.
• VS Live Share - Real time code collaboration, so like Google docs but for code. Ever need help from a team member outside the office? Forget screenshots, use this.
• WordPress Snippet - Gives you suggestions for WP Snippets as you type, in case you forget any of them but remember partial function names.

Placeholders

• placeholder.com - Most basic of placeholder images. For such uses as wireframing or quickly mocking up a dev site.
• Lorem Picsum - As their site says, Lorem Ipsum... but for photos.
• Unsplash Source - Like the above but official to Unsplash.com.

Image Compression

• Compressor.io - Always swore by this site. Really wish it had an API or that I could purchase it.
• Squoosh - Google's public image compressor. Has more options than compressor.io.

Pagespeed

• GTmetrix - A lot of detail in the resulting report for the testing sites. Lots of options to run the tests including ad blocker, white/blacklisting resources URls, location test, waterfall. An account is required for some features but accounts are free.
• PageSpeed Insights - Google's tool to help you clean up your act but will ding your score for Google Analytics and other resources they provide. Definitely use this tool to get a higher score because this is one of the most popular tools that non-dev people will test against.
• Pingdom Website Speed Test - Pingdom's reporting tool.