tools.md

Business

• General
  • Toggl --- hour tracking
  • Bunq --- bank
  • Opt out of interest based ads on iOS (ad tracking)
  • Prevent tracking --- via host file
  • MyDataDoneRight --- remove accounts anywhere
  • How to outsmart your hotel TV --- does not work always but useful
• Bookkeeping
  • Jortt --- Dutch + connection with tax office
• UX
  • UX flows --- for inspiration

Development

• Browsers
  • Google Chrome
    • disable Google Translate
    • disable sync of passwords --- use 1password
    • Extensions
      • Figure it out
      • Unsplash Instant
    • Devtools
      • Device emulation list with some other options:
        • iPhone XS, 375x812, DPR 3, Mozilla/5.0 (iPad; CPU OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B176 Safari/7534.48.3
        • iPhone XS Max, 414x896, DPR 3, unknown
      • ARC Toolkit --- provides accessibility tips
  • Firefox
  • Safari
• Filesharing
  • Google Drive
  • Synology Drive --- use this setting on the client to enable dot files being synced!
• Bitdefender Virus Scanner --- for OSX
• Workflow
  • (Alfred --- app launcher and easy find but replaced by ScriptKit)
  • ScriptKit --- workflow platform based on JS which can use Apple Shortcuts, bash and more.
  • Things --- task management (CTRL + SPACEBAR)
  • Keeping You Awake --- enable/disable full screen (presentation)
  • Colorsnapper --- colorpicker
  • CleanMyMac --- clean up your mac and see what is on the harddrive
  • iStat Menus --- information about your CPU / memory usage and more
  • Wifi Scanner --- check your wifi coverage & noise
• Media
  • Beamer --- stream video content to your AppleTV
  • Spotify + add source to ~/Music/Spotify
  • VLC --- media player
  • Wallpaper or Plash --- programmatic wallpaper on OSX / Windows or just use the default settings in OSX
  • Handbrake --- a (more visual than ffmpeg) video encoding tool
  • AvPress --- in-browser port of ffmpeg (via WebAssembly) for gif/webm/mp4 encoding
  • Pixelmator --- OSX based alternative to Adobe Photoshop
  • Sketch --- prototyping + alternative to Adobe Fireworks (vector)
  • Figma --- prototyping
  • Cleanup --- hide elements in a picture
• Communications
  • Slack --- community messaging app
  • Zoom --- (video) conferencing tool
• News
  • Feedly --- getting less while not everything is synced
  • Twitter
• Development environment
  • Dash --- documentation
  • Paw --- REST API tester
  • Horndis --- USB tethering
  • GPGTools --- PGP on OSX
  • Keybase --- is a secure people directory
  • Sharp --- resize images into JPG, PNG, WEBP
  • Clear remotely merged git branches locally with git branch --merged | egrep -v "(^\*|master|develop|skip_branch_name)" | xargs git branch -d
  • NP --- better npm publish, following workflow before it will be published
  • Random hex number --- openssl rand -hex 16 for a 16-character random number
• Tools
  • 1Password --- password manager
  • NordVPN --- VPN service
  • Exiftool --- read, write and edit EXIF metadata
  • Sequel Pro --- Mysql database management on OSX
  • Transmit --- transfer, (S)FTP tool
    • use S3 upload headers (check which settings)
  • Fontastic --- select your own SVG icons as a single SVG
  • Git Image Diff --- explanation how to diff images with git
  • Nativefier --- create apps from URLs but is missing auto-icon-generation
  • Icon Slate --- create icon files from images
  • GifSki --- make gifs from video files
  • DeviceFrame --- add device frames around your application screenshots
  • FontFlipper --- test your font within a design / image / font combination
  • iFramely --- test your social image cards
  • Site metadata
    • Linkedin PostInspector
    • Twitter Cards
    • Open Graph and more or MetaTags
    • Structured Data = Google / JSON-LD
    • NAICS code
    • Google Safe-search status
  • What can you browser do today?
  • Nice list of open source applications on the Mac
  • Exthouse --- use Lighthouse for your chrome extension
  • See NPM package licenses with npx delice
  • Tiny-helpers --- single purpose web tools 👍
  • BlurHash --- blur images to quickly show some colors before the image is loaded
• Brew modules
  • brew doctor
  • brew install ...
    • Flow --- Facebook (& used for React) statistical analysis
    • Watchman --- watches files/folders
    • libtiff --- used to support TIFF rendering in Graphicsmagick
    • webpquicklook --- used to support webp rendering in Finder Quicklook
    • ffmpeg --- video / photo transcoding
    • Graphicsmagick --- photo transcoding & faster than Imagemagick
    • gifsicle --- making gif
    • [pipx] to install
      • aws-whoami --- discover which AWS profile you are using now

Node.js & NPM

• NVM --- Simple bash script to manage multiple active node.js versions
• Stop node_modules being indexed on macos

Modules

• browser-sync --- synchronized browser testing
• babel --- compiler for writing ES6/ES7
• babel-eslint --- ESLint using Babel as the parser
• bunyan --- simple/fast JSON logging module for Node.js
  • bunyan (cli) - node index.js | bunyan
• eslint --- a pluggable linting utility for JavaScript and JSX
• eslint-config-standard --- configuration for ESlint with Standard
• eslint-plugin-react --- configure ESlint for React
• gulp --- pipe your transforms
• jest-cli --- JS unit testing framework
• keybase-installer --- use keybase.io on your desktop
• kill-tabs --- kill all open tabs to optimize battery/memory usage
• lodash-cli --- to build custom _... libs
• psi --- PageSpeed Insights with reporting
• react-native-cli --- building apps with React
• sitespeed.io --- analyze your website speed and performance
• speed-test --- speedtest.net through your CLI
• Standard --- JavaScript Standard Style
• tape --- tap-producing test harness for node and browsers
• tmi --- how heavy (image-bandwidth) is your site?
• webpack --- js & ... bundler
• dependency-cruiser --- validate code dependencies based on your rules
• rawkit --- open devtools directly from CLI
• copy-as-markdown --- copy text as markdown

Optional modules

• apidoc --- inline documentation for REST APIs
• istanbul --- code coverage tool

Editors

• VS Code --- cross-platform open source IDE made by Microsoft based on Atom
  • install eslint-plugin-mdx to lint .mdx files
  • Screencast mode
• Webstorm --- java-based IDE for web development
  • SETTINGS
    • settings > appearance > theme --- Darcula
    • settings > Editor > General --- Change font-size (Zoom)
    • Editor > Code Style > ... --- use different schemes to use default Standard (JS) and 2 spaces but can change per project
    • plugins
      • .ignore
      • BashSupport
      • CSS Support
      • Dash
      • EditorConfig
      • Emoji Support Plugin
      • (Markdown Support)
      • NodeJS
      • Quirksmode
      • SASS Support
      • SCSS-lint
      • iTerm v2+
        • (! ssl-add ~/.ssh/id_rsa + github keys before pushing)
        • Profile > Reuse previous session's directory
      • YAML
      • Gulp
      • AceJump --- CTRL + ; to use characters for jumping to a specific line / code
    • keymap
      • USE "Mac OSX 10.5" to copy from! and add following shortcuts
      • CTRL + ALT + F = fetch
      • CTRL + ALT + P = pull
      • CTRL + ALT + S = push
      • CTRL + ALT + T = tag
      • CTRL + ALT + L = log
    • javascript
      • adjust > libraries with correct ES6/nodejs libs
      • enable eslint + 'search for .eslintrc'
    • Languages & Frameworks > Node.js and NPM > add correct Node.JS path
    • Version Control > Background > Refresh every 30 minutes for projects that ask for continious integration
    • Editor > General > Strip trailing spaces = depends per project
    • Editor > General > Appearance >
      • show whitespaces
      • show line numbers
    • Appearance & behaviour > System Settings > Save files automatically when idle (5s)
    • Editor > General > Use soft wraps in editor - to enable word wrap to minified files.
  • TIPS
    • update NodeJS version also in ESLint every time when you update NodeJS!
    • update NodeJS autocomplete