/Uses

I use a variety of tools to get my work done on a daily basis. Being a designer and frontend developer, I have to switch between two very different but complimentary workflows.

As much as possible, I try to integrate these two workflows to reduce cognitive load and improve productivity.

I'm primarily a designer first but I learned the fundamentals of web development by hacking other people's MySpace pages back when that was a real thing.

Design.

Design tools are simple and straightforward. I keep it lean and minimal.

  • Adobe XD is my design tool of choice. Its flexibility as a wireframing, prototyping and full featured design tool make it perfect for my daily needs. The new collaboration beta is a little funky at the moment, but it's going to make for a solid solution when it's ready.
  • Overflow I sometimes utilise Overflow to create Adobe XD-derived user flows for better visual explanation of page linking and process. Usually this is used if a prototype can't convey the idea (i.e. it's too complex) or the team/client needs a visual depiction of all linkages.

Development.

Like with design, I keep my development toolset minimal but have a few more pieces of software I need.

  • Languages: HTML5, CSS3/SASS/SCSS, a little JavaScript and an even smaller amount of PHP
  • Frameworks / Libraries / Tools: Material-UI/Veutify, Git, Vue.js
  • VSCode is my editor of choice. I currently use the Seti Black theme with a custom set of background colours to create a pure black environment along with JetBrains Mono as my default code font with ligatures set to true.
                        
    {
    "files.autoSave": "onFocusChange",
    "editor.fontFamily": "JetBrains Mono",
    "editor.fontLigatures": true,
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "auto-close-tag.SublimeText3Mode": true,
    "workbench.colorCustomizations": {
        "editor.background": "#050505",
        "sideBar.background": "#111",
        "terminal.background": "#050505",
        "panel.background": "#050505",
        "activityBar.background": "#050505",
        "tab.inactiveBackground": "#1d1d1d",
    },
    "workbench.colorTheme": "Seti Black",
    "workbench.iconTheme": "material-icon-theme",
    "vsicons.dontShowNewVersionMessage": true,
    "prettier.tabWidth": 4,
    "prettier.useTabs": true,
    "editor.fontSize": 11,
    "workbench.editor.showTabs": true,
    "editor.minimap.enabled": false,
    "editor.codeLens": false,
    "workbench.activityBar.visible": false,
    "explorer.openEditors.visible": 0,
    "workbench.sideBar.location": "right",
    "workbench.fontAliasing": "antialiased",
    "editor.lineHeight": 24,
    "editor.letterSpacing": 0,
    "editor.emptySelectionClipboard": false,
    "editor.quickSuggestionsDelay": 0,
    "editor.quickSuggestions": {
        "strings": true,
    },
    "editor.formatOnType": true,
    "vetur.grammar.customBlocks": {
        "docs": "md",
        "i18n": "json",
        "preview-props": "json"
    },
    "workbench.startupEditor": "newUntitledFile",
    "[vue]" {
        "editor.defaultFormatter": "octref.vetur"
    },
    "editor.tabSize": 4,
    }
  • Hyper is my terminal of choice with JetBrains Mono set as my font of choice as well as some custom colour rules.
                            
    module.exports = {
	config: {
	updateChannel: "stable",
	fontSize: 12,
	fontFamily: "JetBrains Mono",
	fontWeight: "normal",
	fontWeightBold: "bold",
	lineHeight: 1.5,
	letterSpacing: 0,
	cursorColor: "#FFDD05",
	cursorAccentColor: "#191919",
	cursorShape: "BLOCK",
	cursorBlink: false,
	foregroundColor: "#f6f7f8",
	backgroundColor: "#191919",
	selectionColor: "rgba(248,28,229,0.3)",
	borderColor: "#333",
	css: "",
	termCSS: "",
	showHamburgerMenu: "",
	showWindowControls: "",
	padding: "12px 14px",
	colors: {
			black: "#191919",
			red: "#C51E14",
			green: "#1DC121",
			yellow: "#FFDD05",
			blue: "#1c475c",
			magenta: "#C839C5",
			cyan: "#20C5C6",
			white: "#C7C7C7",
			lightBlack: "#686868",
			lightRed: "#FD6F6B",
			lightGreen: "#67F86F",
			lightYellow: "#FFFA72",
			lightBlue: "#56bdf2",
			lightMagenta: "#FD7CFC",
			lightCyan: "#68FDFE",
			lightWhite: "#FFFFFF"
		},
		shell: "",
		shellArgs: ["--login"],
		env: {},
        bell: "SOUND",
        copyOnSelect: false,
        defaultSSHApp: true,
        quickEdit: false,
        macOptionSelectionMode: "vertical",
		webGLRenderer: true
    },
	plugins: ["hyper-fading-scrollbar"],
	localPlugins: [],
    };
  • ZSH is my default terminal shell in Hyper with a basic custom theme set.
  • Numi is an extended custom calculator that I use to perform arithmetic and conversions.
  • Firefox Developer Edition is the dev browser I tend to use. It offers an extremely powerful set of dev tools whilst maintaining the privacy I want to have online. Although colour rendering is very different when compared with Safari or Chrome, the dev tools alone make it the best fit for me.

Hardware.

I don't use a lot of hardware, and it varies if I'm travelling but here's my common EDC.

Email Twitter Music Github