Matt Matt-Deacalion

Recently when refactoring a Vue 1.0 application, I utilized ES6 arrow functions to clean up the code and make things a bit more consistent before updating to Vue 2.0. Along the way I made a few mistakes and wanted to share the lessons I learned as well as offer a few conventions that I will be using in my Vue applications moving forward.

The best way to explain this is with an example so lets start there. I'm going to throw a rather large block of code at you here, but stick with me and we will move through it a piece at a time.

<script>

// require vue-resource...

new Vue({

FWIW: I (@rondy) am not the creator of the content shared here, which is an excerpt from Edmond Lau's book. I simply copied and pasted it from another location and saved it as a personal note, before it gained popularity on news.ycombinator.com. Unfortunately, I cannot recall the exact origin of the original source, nor was I able to find the author's name, so I am can't provide the appropriate credits.

Effective Engineer - Notes

By Edmond Lau
Highly Recommended 👍
http://www.theeffectiveengineer.com/

What's an Effective Engineer?

Once you are ready to hire a developer, what should you do to mitigate execution / build risk?

Writing a good functional specification is key to getting the build phase of this project right. It's not easy to do but it's mostly just about thinking hard and writing out all the boring details of your desired outcome. The best guide for this is Joel Spolsky (recently sold Trello for $425M). He wrote a 4 part series on this, starting here, and also has an example (real) spec on his website here (the PDF link is broken, this is the real one)
Before you start on a spec, trim down your functionality to the absolute bare minimum - and be brutal with it! Imagine you had to complete it in one day, or imagine it was only a single feature... take away everything that isn't fundamental

Docker-based Web Application Setup (example)

This is an example of hosting standalone web front-end (web) and data API (api) applications under the same domain via Nginx (acting as a reverse proxy) and Docker, where HTTP requests starting with example.com/graphql and example.com/login/* are being redirected to http://api:3000 and everything else under the same domain is going to be passed to http://web:3000.

Folder Structure

.
├── /nginx.sites/               # Server configuration for each of web apps
├── /nginx.snippets/            # Nginx code snippets

The right way to override any highlighting if you don't want to edit the colorscheme file directly

Generalities first

Suppose you have weird taste and you absolutely want:

your visual selection to always have a green background and black foreground,
your active statusline to always have a white background and red foreground,
your very own deep blue background.

My Vim-related gists

Long-form

Dealing with autocommands

Anatomy of a minimal autocommand

autocmd BufNewFile,BufRead *.foo set filetype=html

BufNewFile,BufRead is the list of events that trigger this autocommand.
*.foo is the pattern we want to match against the data returned by the event.
set filetype=html is the command we want to execute when the pattern matches the data returned by the event.

Linting your code, the vanilla way

You may want a linter plugin to lint your code in Vim but you probably don't need it. At least try the built-in way before jumping on the plugin bandwagon.

Defining `makeprg`

autocmd FileType <filetype> setlocal makeprg=<external command>

This autocommand tells Vim to use <external command> when invoking :make % in a <filetype> buffer. You can add as many similar lines as needed for other languages.

	" Background here: https://gist.github.com/romainl/047aca21e338df7ccf771f96858edb86
	" with help from https://github.com/teoljungberg

	function! CCR()
	let cmdline = getcmdline()
	let filter_stub = '\v\C^((filt\|filte\|filter) .+ )*'
	command! -bar Z silent set more\|delcommand Z
	if getcmdtype() !~ ':'
	return "\<CR>"
	endif

	deploy:live:
	image: 1drop/docker:git
	stage: deploy
	when: manual
	environment:
	name: production
	url: https://www.somecustomer.de
	before_script:
	- eval $(ssh-agent -s)
	- ssh-add <(echo "$SSH_PRIVATE_KEY")