Cloud service providers such as Amazon often prevent email sending by default on their EC2 instances to stop spammers. This can be a nuisance when you want to send legit email. You can request for this restriction to be removed, but it can be a bit of a black box if and when they will accept your request.

Here's a quick guide how to configure your postfix with a relayhost to send emails through a third party email gateway such as Sendgrid, Mailgun, or Mandrill. The steps are for Ubuntu, but should be adaptable for most linux based systems.

1. Install postfix sudo apt-get install postfix
2. Copy and modify the config from the bottom of this post to /etc/postfix/main.cf
3. Replace at least relayhost and smtp_sasl_password_maps in the config with your own configuration
4. Create /etc/mailname file if it's not there yet and put in your preferred hostname
5. Restart postfix sudo systemctl restart postfix
6. Install sendemail sudo apt install sendemail
7. Test sending an email sendemail -f fromuser@fromdomain.com -t touser@todomain.com -u Subject -m "message" -o tls=no
8. Check your logs tail /var/log/syslog -f to see if any issues cropped up
9. Remember to configure the sending domain in your email service provider

smtpd_banner = $myhostname ESMTP $mail_name
biff = no
append_dot_mydomain = no
readme_directory = no

smtpd_tls_cert_file=/etc/ssl/certs/ssl-cert-snakeoil.pem
smtpd_tls_key_file=/etc/ssl/private/ssl-cert-snakeoil.key
smtpd_use_tls=yes
smtpd_tls_session_cache_database = btree:${data_directory}/smtpd_scache
smtp_tls_session_cache_database = btree:${data_directory}/smtp_scache

smtpd_relay_restrictions = permit_mynetworks permit_sasl_authenticated defer_unauth_destination
myhostname = localhost
alias_maps = hash:/etc/aliases
alias_database = hash:/etc/aliases
myorigin = /etc/mailname
mydestination = $myhostname
relayhost = smtp.mailgun.org
smtp_sasl_auth_enable = yes=
smtp_sasl_password_maps = static:postmaster@yourdomain.com:your_secret_key
smtp_sasl_security_options = noanonymous
mynetworks = 127.0.0.0/8 [::ffff:127.0.0.0]/104 [::1]/128
mailbox_size_limit = 0
recipient_delimiter = +
inet_interfaces = loopback-only
inet_protocols = all
local_recipient_maps =

This post is a note-to-self type of post on Vim tips & tricks. You will also find a bunch of useful plugins listed in this post. This is the place where I write down and explaing things to my self whenever learning a new trick in Vim.

The tips and tricks are loosely organized under larger topics to try to provide some structure for the post. I hope you find something new and useful! :)

Tips are geared towards developing projects with a web focus. I am using Neovim and with VSCode through vscode-neovim (previously Onivim 2, which unfortunately died). To find more about my setup you can read OS X Design and development setup.

Regex, sorting, filtering etc

Knowing your regexes makes you feel like a magician.

Add a new line before each capital letter

%s/\u/\r\0/g will find uppercase letters and add a newline in front. Note: this does not work in case you have scandinavian or other exotic characters in your data.

Remove empty lines from document

Quite often you end up having to clean some data for one or other purpose and it can be nice to quikcly drop all empty lines in the current buffer. Here's how you can do it fast:

:g/^$/d

Wrap lines with something

When you want to turn a column of data from an excel sheet into an array, you can do it easily by wrapping each line with the required markup. For example doing %s/.*/"&",/g will convert nicely wrap each line with " and add a comma to the end of each line.

Sort and unique all lines

For smaller files you can do it directly in Vim with :sort u. For larger files you might want to hop on to the command line and do sort bigfile.txt | uniq > bigfile_sorted.txt.

Run a shell command on range of lines

This can be useful for example to run Prettier on the whole file or just part of the file.

:0,$ ! prettier will run the whole buffer through prettier
:15-25 ! pretier will run lines 15-25 through Prettier
:0,$ ! prettier --parser glimmer will run whole buffer through prettier using the glimmer parser (gets those .hbs files sorted)
:0,$ ! sort | uniq will sort the lines and then unique the lines

Macros

Macros are an essential part of Vim. You can record a macro to run a sequence of actions by hitting q + <register>. It will record the macro to the selected copy-paste -register. When you're done recording the macro hit q again to stop recording.

To run a macro you do @ <register>.

Running macros on a set of lines

You often need to run a macro against a set of lines. This is easily achievable with the normal command in EX mode. Some examples to get started with:

1. Execute for lines 5-10 :5,10norm! @<register>
2. Execute for all lines :%norm! @<register>
3. Execute for 5-eof :5,$norm! @<register>
4. Execute for lines matching a pattern :g/pattern/norm! @<register>
5. Execute for a visual selection, select with V + jk and run :norm! @<register>

Switching / opening files

CTRLP

Switching files with keyboard only is hard, right? Not really with ctrlp. Ctrp is a full path, fuzzy, file, buffer, mru, tag, you name it, finder for Vim.

You hit ctrp + p and then start typing in the name of the file you want to get to. Vim will display a list of matching files for you which you can open fast. This is a much faster way of opening files than a filetree plugin or some other such antiquated solution. Of course, this is for projects you're familiar with - exploring new projects are better done some other way.

The commands:

• CTRL + p - activate plugin

• CTRL + f & CTRL + b - cycle modes

You can find it at: https://github.com/ctrlpvim/ctrlp.vim

Jump between last two open files

This is a huge timesaver. You should setup a quick shortcut for switching between last two open buffers. This is often the most used switch after all. I've mapped <leader><leader> for this action. The following config makes the magic work:

nnoremap <leader><leader> <c-^>

Unfortunately this does not directly work in VSCode, so I've created a VSCode plugin to enable this same behaviour. The plugin provides a keyboard shortcut to jump between the last two open files. You can find the plugin here: https://marketplace.visualstudio.com/items?itemName=wingmen.alternator

Jump between related files

Often you have files that are related and you want to hop between them quikcly. Some common examples are header and source files and model/view/controller -files.

For this to work, you need to add the plugin called Projectionist and setup some patterns that define what should be the alternate files. After that you can jump to an alternative file with :A or open the alternate in a new split for example :AV. The plugin can also create the alternate file when it's missing - powerful stuff.

Open all certain type of files in project

When you need to open all files of a certain type in the project, you can do this:

:args ./*.html

Re-open current file

Sometimes Vim might not reload the file when it detects changes or you might accidentally cancel reloading. An easy way to get the latest version of the current file is to just re-open current file with the edit command. If you don't pass a file to the command it will default to the current file and hence you can do the following:

:edit!

Snippets

Every selfrespecting 1000x coder needs their own secret repo of snippets and a fast way to drop them into the code.

Neocomplete

Neocomplete is a nice plugin to use handy snippets in Vim. The usage is pretty simple. You expand the snippet with c + k, hit tab for the next field in the snippet until finished.

CTAGS for easy jumping

You need CTAGS installed on your system for this trick. With CTAGS and a bit of hackery you can easily jump from a html DIVs class name to the CSS or SCSS definition of that class. For similar jumping around from function and function definition JavaScript you could use Tern.

1. Install Exuberant CTAGS with brew install ctags or however you install stuff on your system

2. You need to add some configs to your CTAGS configuration located at ~/.ctags.

--langdef=css --langmap=css:.css --regex-css=/^[ \t]*\.([A-Za-z0-9_-]+)/.\1/c,class,classes/ --regex-css=/^[ \t]*#([A-Za-z0-9_-]+)/#\1/i,id,ids/ --regex-css=/^[ \t]*(([A-Za-z0-9_-]+[ \t\n,]+)+)\{/\1/t,tag,tags/ --regex-css=/^[ \t]*@media\s+([A-Za-z0-9_-]+)/\1/m,media,medias/

--langdef=scss --langmap=scss:.scss --regex-scss=/^[ \t]*\.([A-Za-z0-9_-]+)/.\1/c,class,classes/ --regex-scss=/^[ \t]*#([A-Za-z0-9_-]+)/#\1/i,id,ids/ --regex-scss=/^[ \t]*(([A-Za-z0-9_-]+[ \t\n,]+)+)\{/\1/t,tag,tags/ --regex-scss=/^[ \t]*@media\s+([A-Za-z0-9_-]+)/\1/m,media,medias/ --regex-scss=/^[ \t]*\$([A-Za-z0-9_-]+)/\$\1/v,var,variables/

--recurse=yes --exclude=.git --exclude=vendor/* --exclude=node_modules/* --exclude=db/* --exclude=log/* --exclude=tmp/*

3. You might want to add "tags" to your .gitignore -file(s).

Now you can index your (S)CSS with :!ctags -R .. And after that jumping around is a matter of :tag /myClass.

Sources:

1. https://gist.github.com/dreki/da853aeb4d80c03a4448
2. http://stackoverflow.com/questions/12833189/jump-to-css-selector-in-a-css-file-from-the-html-file-in-vim-using-a-single-keys/12924218#12924218

Modifying text fast

Where Vim really shines is blazing fast modifications to existing text.

Changing between/inside

Change text quickly between quotes for example.

ci" (Change Inside ")

Replace text between characters from the paste buffer.

vi"p (Visual Inside " Paste)

This works for HTML tags or paragraphs too. For example you can select all text between tags by placing your cursor on one of the tags and then hitting.

vit (Visual Inside Tag)
vip (Visual Inside Paragrahp)

You can also insted of i use a for all of the above examples where Vim will also include the surrounding quote or tag into the selection. When the seletion is active, you can hit o to change cursor position between the start and the end of the selections.

Increment & decrement numbers

You can use ctlr+a to increment and ctrl+x to decrement numbers in normal mode when the cursor is inside the number.

The surround plugin

Change the surrounding double quotes (or any character) to single quotes.

cs"' (Change Surrounding " to ')

To surround a visual selection with parentheses press:

S( (Surround with ( )

Surround a word with quotes.

csw' ( Change Surroundings of Word to ')

Search & replace without having to escape special characters

This trick comes in hand when you want to do simple text replacement without any fancy regexp magic. Saves quite a few keystrokes.

:%sno/search_string/replace_string/g

Replace all occurrences of the word under cursor

This is super useful for quickly refactoring some bad variable names and is similar to the above but way faster to execute.

1. In normal mode press * to search for all occurences of the word under cursor
2. Hit :%s//newVarName/ to quickly replace all the matches

You might require a g in the end depending on your gdefault configuration.

Search and replace in all open files

There are two ways of doing this that I know of. Either

:argdo %s/pattern/replace/gce

or

:bufdo %s/pattern/replace/gce | update

should do the trick!

Run a normal mode command in insert mode

While in insert mode you can press ctrl + o which let's you run one normal mode command and it pops you back to insert mode. Super handy for deleting a word or jumping the cursor location quickly. Just do ctrl + o + dw and the pesky word is gone and you're still in insert mode.

Miscellaneous tips & tricks

Easy way to insert non-standard characters

If you work with nordic languages but have an american keyboard layout it can be tough to get those special characteres such as ä,ö,ü etc. Vim has a special digraph mode that makes easy to use these.

For example, in insert mode pressing ctrl + k followed by u: prints out ü. This is super handy. You can hit :dig to see all the available digrahps for easy reference.

Easy debugging with console.logs in JavaScript

Inspired by the Turbo Console Log plugin for VS Code here's a short snippet for your vimrc to enable inserting console logs with ease. It is not quite as smart as TCL but at least it adds the line number in. :)

In your Vim config add the following ugly line:

nnoremap gll oconsole.log("LINE: <C-r>=line('.')<Esc>","")<Esc>F"i

Then hit gll to produce console.log("LINE: line","").

Filename hints in insert mode

Write any path in the editor in insert mode and hit ctrl + x + f and Vim will suggest files in that folder. Makes it easy to find those file names.

Check the word count

The following command shows info on current cursor position in the currently open buffer - including the word count.

press g and then ctrl + g

Reload config without closing

In case you do not want to loose your session when modifying your init.vim. Here's how you can reload the config without closing the editor:

:so % - if you're currently editing the init.vim file
:so $MYVIMRC - if you're not editing the config file itself

Vim splits cheatsheet

Splits are handy when working with multiple source code files, so it's important to be able to quickly create, navigate, and delete splits.

:vsp or ctrl + w + v - to create vertical split
:sp or ctrl + w + s - to create horizontal split
ctrl + w + HJKL - to move between splits
ctrl + w + HJKL - to move splits around
ctrl + w + w - to jump to next split (loops around)
ctrl + w + c - close current split
ctrl + w + = - equalize splits

Change line endings

Files created on WIN/DOS machines have different line endings than files created on Unix based machines. DOS uses ("\r\n") and Unix uses just ("\n"). With Vim you can easily change between line endings.

:set ff=dos
:set ff=unix

Save as

When you want to create a new file by starting with a copy of the existing one. You can save the currently open buffer as a new file by doing this:

:sav newfile.js

Repeat or reverse movements

Some movement commands can be repeated with ; and reversed with ,. The movements you can repeat/reverse are F, f, T, and t.

Navigating serach results forward and backwards can be achieved with n and N.

Overwrite text from copy/paste register

Often times you have something on your clipboard and you want to overwrite a word or a sentence with the text. Doing this in Vim can be a hassle as when you delete the previous entry it replaces the latest register value.

Easy way around this is to use visual selection and then paste over that. E.g. you want to replace a word with another from the latest register.

vep

Understanding registers

Vim has a register system that stores things you yank or delete/change from the document. Register 0 holds always the last yank and 1 holds the last delete or change, if you don't specify a specific register where you want to save things. Special default register " always holds content of the last operation be it yank, delete or change.

To define a specific register you can do "ryy for example to yank stuff to register r. To paste from a specific register "rp.

To paste last yanked content you can do just p. But if you instead yank something and then delete something p would paste in the deleted text. So to actually paste the yanked texs you can can use "0p.

Editing multiple lines at once

If you need to edit multiple lines of text at once, you can use the block wise visual mode. To enter the mode hit CTRL + v. Now you can select block areas and perform operations on them. Supported operations are insert before (I), append (A), change (c) and various other operators.

Changing the working dir

Sometimes you might open a file deeper inside your project directly from the command line instead of opening Vim in the project root. Vim sets the directory where the opened file is as the working directory. This can limit the visibility of files you can jump to quickly using ctrl + p. For example to move the working directory two levels up you can just do: :cd ../..

Plugins

This section lists a bunch of the most useful plugins for Vim. Some of them were already mentioned in the above tips and tricks. These work well with Neovim. Onivim2 does not support most of these yet, but then again it offers some of the features out of the box or via VSCodde plugins.

Colorizer

Show CSS colors in the editor for those of us who don't yet see hex or rgb as colors.

https://github.com/lilydjwg/colorizer

Ctrlp

Hit ctrl + p to open files and buffers quickly with a powerful fuzzy finder.

https://github.com/ctrlpvim/ctrlp.vim

Editorconfig

Make Vim respect the .editorconfig file.

https://github.com/editorconfig/editorconfig-vim

Emmet

Write HTML really, really fast.

https://github.com/mattn/emmet-vim

Indent object

Adds a text object to manipulate stuff by indentation e.g. viid to delete everything in the current indent. This is very handy for example when working on Python.

https://github.com/michaeljsmith/vim-indent-object

Gitgutter

Show GIT info in the gutter and manipulate hunks directly from your editor. You can also move between changes in the file by using [c and ]c. Staging a hunk is as easy as hitting <leader>hs when your cursor is in it.

For more complex usage view the plugin docs.

https://github.com/airblade/vim-gitgutter

Lexical

Building on Vim’s spell-check and thesaurus/dictionary completion\

https://github.com/reedes/vim-lexical

Multiple cursors

More powerful way of having multiple cursors in your Vim.

https://github.com/terryma/vim-multiple-cursors

Projectionist

Define alternative files with patterns and very quickly jump between or open them in a new split. The plugin also can create the missing alternative file.

https://github.com/tpope/vim-projectionist

Repeat

Make repeating commands with . work as intended.

https://github.com/tpope/vim-repeat

Sort motion

Adds a motion to sort selections of texts.

https://github.com/christoomey/vim-sort-motion

Surround

Manipulate surroundings like a boss e.g. cs"' to change the surrounding " --> '.

https://github.com/tpope/vim-surround

Syntastic

Teaches Vim to use external syntax checkers. To have it check JS, just install JSHint globally through NPM.

npm install jshint -g

https://github.com/vim-syntastic/syntastic

Tcomment

Handle commeting in a sane way.

https://github.com/tomtom/tcomment_vim

Wildfire: text objects

Install wildfire plugin to enable quick selection of text objects in normal mode by pressing enter. Press enter a second time and it chooses one greater text object.

https://github.com/gcmt/wildfire.vim

Wordy

Uncover usage problems in your writing e.g. check text for business jargon.

https://github.com/reedes/vim-wordy

Vim configuration

In this section, you will find some interesting configurations to make life with Vim better.

Hybrid line numbers

Math is hard, so setting relative line numbers stops you from having to calculate the numbers for jumps and other operations. But it's still important to see the current line number. So using the below you will get a hybrid solution that is the best of the both worlds. The current line will show the absolute line number and the line numbers up and down show the relative numbers for easy jumps/operations.

:set number relativenumber

Make navigating splits easier

I tend to work in splits and it's important to make it easy to move around the splits. The below configurations make it slightly easier to navigate splits.

nnoremap <c-j> <c-w>j
nnoremap <c-k> <c-w>k
nnoremap <c-h> <c-w>h
nnoremap <c-l> <c-w>l

Higlight yanked area

Neovim comes with a built in function to higlight yanked area, which makes it nice and easy to see what you just yanked. You can enable it with following the following config:

vim.api.nvim_create_autocmd('TextYankPost', { group = vim.api.nvim_create_augroup('highlight_yank', {}), desc = 'Hightlight selection on yank', pattern = '*', callback = function() vim.highlight.on_yank { higroup = 'IncSearch', timeout = 200 } end, })

Are you fascinated by the idea of building mobile / web applications in a better way? Setting the focus on key business functions, preventing overspending, minimizing overhead, maximizing efficiency, and actually getting products shipped to users? If yes, then this guide is for you.

This guide is aimed at business and project owners, who are keen to develop software like a lean startup. The tips & tricks introduced are the distilled learnings from our work with 100s of digital projects ranging from multinational conglomerates to modest startups. We are confident our guides can save you time, help reduce risks and make your projects run smoother.

We we can help you make development projects great again! :)

Terminology

If you're not familiar with software development terms you might benefit from refrening this list for some of the terms used in the guide.

• DevOps = DevOps is a software engineering culture and practice that aims at unifying software development and software operation.
• POC = Proof of Concept
• MVP = Minimum Viable Product
• Test / Code Coverage = A measure used to describe the percentage of the application’s source code that is executed when an automatic test suite is run
• GDPR = General Data Protection Regulation, regulations to strengthen and unify data protection for EU citizens
• User Interface / UI = The user interface is the space where interactions between humans and machines occur.
• Wordpress = WordPress is a free, popular and open-source content management system.
• WooCommerce = WooCommerce is an open source e-commerce plugin for WordPress

1. POC, MVP, what the devil?

The Problem

We are living in the age of acceleration [1], where the rate of change is constantly accelerating and old methods of doing things fail to keep up. Software development methodologies are no exception. A large number of organizations still miss the flight when it comes to running their software application projects effectively.

This is evident in the staggeringly high number of IT projects failing in either all or some of the core measures like budget, time or shipped features. [2]

One reason for this is that software projects are typically run following the traditional waterfall model: (1) Setting the time frame and budget; (2) Proceeding to a planning stage, where designs and other legit-looking schematics are produced. Sure this model makes you feel well prepared. The thing is, these two steps take a lot of time and they all happen before any actual development work is done.

This approach could work if you are building something simple and you know exactly what you need. This is rarely the case. More often this sets up your project for failure by having a plan that is already deprecated when you start, a budget that is not tied to reality and a time frame that was pulled out of the hat. Most application projects are complex and have too many variables to be successfully run in this manner.

“No business plan survives first contact with a customer.”
-- Steve Blank

Another common reason is that the development process gets detached from business needs. This results in a waste of resources as wrong features are being developed, and heavy process overhead is killing any potential for a turnaround.

You need an efficient way to communicate between the development and the business side. Otherwise, you’re doomed to waste a lot of hours on heavy, soon-to-be useless specs and then still end up developing the wrong features.

The Solution: Enter Lean Startup Methodology

Companies - large and small - have a great opportunity to learn from startups when it comes to running application development projects. By adopting startup-minded practices, you can run software projects with less risk and a better chance for success.

The guiding principles of lean startups are:

• Experimentation over planning
• Customer feedback over intuition
• Iterative design over design upfront

You should be able to use minimum resources to learn from real user feedback and analytics to guide your process - no matter whether your users are internal stakeholders or external clients.

There is nothing quite like having the actual product at hand when discussing usability and features. We humans are not good at visualizing complex products and interactions by reading specs or looking at mockups.

“If a picture is worth 1000 words, a prototype is worth 1000 meetings. “
-- A Saying at IDEO

To follow these ideas, you can approach building software in a better, more modern way. Taking a lesson from the lean startup approach you can approach a new project with a two-step process:

1. Put together a Proof Of Concept (POC)
2. Build a Minimum Viable Product (MVP)

Proof Of Concept (POC) is a project that tests the core ideas and concept internally for technical and business feasibility. By first building a POC, you get to start with minimal risk without a risky long term commitment.

The goals of your POC could be for example to:
Learn if the technology works and is suitable to solve your business problem
Be able to take that prototype to your next meeting with stakeholders so you can have less and better meetings
Try working with a new team/vendor; test multiple teams with small POC projects and choose the best to work within the long term

Real-life example: We observed a great example illustrating how not to do things in a large-scale client application project. One of the project’s development managers was describing his team’s quarterly achievements having spent three months designing and developing a demo application. The big achievement was the 95% unit testing code coverage. Now the demo was ready by their terms, and in the next quarter, the goal would be to present the concept to stakeholders for the first time and get first test users in to gather feedback. In his own words: “...To see if this application is of any use.”.

By now you might see some issues with the approach highlighted in the example. Next time ensure you are building something of use by getting some real feedback earlier in the process. Especially before investing considerable effort on building a demo project with 95% test coverage.

After the POC, you’ll want to build the Minimum Viable Product (MVP), which allows you to validate your software with actual customers. To explain what an MVP is, Eric Ries describes it: “A minimum viable product is a product with just enough features to satisfy early customers, and to provide feedback for future product development.”

Creating an MVP to gather insights is a far less expensive approach to product development than starting to build a complete product based on idea level guesstimates regarding what the end-users may find useful. Trying to build all the features you think you need all at once will increase costs and risks for project failure due to incorrect assumptions.

The goals of an MVP are to:

• Get real users & gather insights with less risk
• Validate possible business idea and value by asking for money or measuring time saved for example
• Works as a case study and possible basis for the next stage of developments justifying further investment

Remember, success can be also learning that something does not work - without having wasted big bucks on the learning.

The last step is to understand that there is no last step. A software project is never finished. The MVP should already be usable by real users and the development continues from there, adding intelligently more layers of complexity as the project grows towards more mature stages.

Even if you introduce more processes and complexity to the project, it is critical to keep iterations fast and closely tied to business needs. The slower the iterations, the more resources end up being wasted on developing things you and your users don’t need.

In the next chapter, we will be looking into how you can take this from idea to implementation.

Sources

• [1] https://www.amazon.com/Thank-You-Being-Late-Accelerations/dp/0374273537
• [2] 67% of Large IT projects fail regarding budget, time & features. - The Standish Group, Chaos report

2. Let’s get the party started

Now that you know what you’re building, whether you decide to start with a POC or to proceed straight to building an MVP, both share similarities when it comes to the actual development work. From this point on, we will be talking about MVP in general.

Development Principles

In short, you will want to find the shortest possible path to get the product (or a predefined part of the whole product) produced with sufficient quality. The required quality depends greatly on the context. In some cases, it might be as simple as a single static screen, while in others it might mean several integrations implemented between systems.

Let’s assume the case at hand is somewhere in the middle. Based on our experience, the most common rock to stumble on and fall is created by over-analyzing and spending a few engineering years of work into creating too heavy designs before actually diving in and creating something that people can play with. The key point is that MVP reveals almost always things that were not properly thought out before. This might be new challenges, limitations or requirements that were not discovered in the design phase.

Now yes, a pedantic developer could well state that it then means bad design, but you see, people tend to get a better hold of products (or things in general) by seeing and testing them instead of reading the specification. And that’s the whole point of MVP development. Keep things light, streamline development by cutting e.g. heavy testing baselines, and don’t be afraid to cut corners where possible without compromising concept value.

Real-life example: You’re building an MVP to convince your audience how a new User Interface (UI) with a cool statistics dashboard would help them reach their business goals. Usually, the data crunching part of development requires a lot of effort to get right. But since all you’re building at this point is a UI to prove your point, you should not spend any more time on the data that is absolutely necessary. The development team can cut hundreds of hours on implementation by utilizing a temporary, simulated backend and using an out-of-the-box API-solution to access the data. For example, Google Sheets can be used as a simulated backend [1].

The team ™

What kind of team should you hire for the job? This part is perhaps the most crucial piece of the puzzle (well ok, in addition to the project making some sense in the first place). Here are some key handouts based on our experience:

Avoid giants

Considering that the point is to streamline processes and cut corners in suitable places, don’t hire a giant. We’re not saying that giants don’t have their place in the industry. Small teams specializing in MVPs tend to have the advantage of being multi-disciplined and accustomed to wearing multiple hats, which is especially important when the requirements might be loosely defined and you don’t really know what you’re building yet. Also, in small teams, there is usually more project ownership per person, compared to a big team having a very low ownership level. The level of ownership typically correlates with dedication, motivation and general knowledge of the project.

In MVP development, you rarely know all the requirements beforehand. Hiring a tiny team of MacGyvers (with perhaps an expensive-looking hourly rate tag) who can easily switch from coding to cloud environment configuration to UI design to demo video production, will usually be hugely beneficial in terms of cost-efficiency vs. a giant. A team like that can efficiently communicate with the business side and course-correct swiftly as the requirements move, giving you 10x the results with 1/5x the people.

Software Management Frameworks

Use a team that is not too rigorously requesting pedantic use of a specific software development framework (e.g. scrum). While frameworks usually sound nice on paper and provide nice buzzwords for developers’ CVs, they definitely have their downsides. Most of these are related to people starting to be more interested in completing their tasks within their todo-boards than actually reaching the actual goal.

Always ask yourself: What is the ultimate goal? At the end of the day, the MVP audience is not interested in how well your app is backed up by a perfect software process, or how well it’s covered with automatic tests - they are interested in you shipping the thing and seeing some real-world business value.

Instead of spending a lot of man hours making sure that sprint goals are met - make sure that you get your plane off the ground.

Selecting technologies and tools

Avoiding vendor trap is such cliche advice - yet, advice worth taking seriously. Even in this day and age, many organizations purchase projects with technologies locking them to one vendor. This creates an unhealthy situation where the vendor has way more leverage over you than they should.

Partner with a team that is using well-known and well-supported open-source components. This automatically means that the tech has a huge community backing it up, it’s easy to do a third-party review on project quality and you can easily find other people to continue the work if things go sour with your original vendor.

Do easy things, one step at a time

If you think you are re-inventing something, you probably are. You should not. Even if you were thinking of building the next Google, look first for ways to prove the business goals can be met using an MVP. It’s best to use simulated backend services and mocked up (i.e. fake) data instead of developing heavy solutions from the get go.

Sources

• [1] Rapid Prototyping Hacks That Might Save Your Soul, https://docs.google.com/presentation/d/1zq2NUpd2iSQGZ0Sxq18dcFU-JYuF5hKBYQsSxyLyjtk/edit#slide=id.p

3. What comes after the MVP

You might be facing quite different scenarios at this stage. Perhaps you have produced a quick POC to prove your point inside your company and real development is about to kick off. Or, you may have produced an MVP of a mobile application for your own startup or your client, and that application could already be featured in e.g. Appstore (which typically means significantly more fine-tuning than a dead-simple POC). Whatever your situation might be, usually when it comes to either POC or MVP, the base work is done quick & dirty to get things shipped, with sufficient quality as stated in the previous chapter, remember?

This is the stage where the concept should be thoroughly reviewed. Does the MVP prove its point? Does it successfully bridge the gap between expectations (= business needs) and reality? If not, it definitely doesn’t directly indicate that your case isn’t valid - it simply means that it hasn’t been validated yet.

This chapter is not about validating the idea with an MVP, so let’s assume that the validation is already done successfully. Let’s assume you’ve brought on the wow effects with your neat looking & status-quo disrupting MVP and everyone is onboard & ready to continue on to the next stage.

First, you’ll have to consider what to do with the current MVP version of the product when moving towards more mature stages. On one hand, you have invested in it and the product is working, so it would be great if you can continue building on top of the current version. On the other hand, it might be a valid option to continue development by leaving the MVP as it is and starting the implementation of the next version from scratch.

When deciding whether to start again or continue from the existing MVP, you will want to evaluate if the code written for it is something that can even work for a real product. Often MVPs are created following best practises or might be using prototyping frameworks that are not suitable for an actual customer facing product. Thus it might be actually better to take the learnings from the MVP and start with a blank slate.

Real-life example: An emerging eCommerce startup built its first MVP using an out-of-the-box solution (WooCommerce on WordPress to be precise) to quickly get the first version out in the open. This allowed them to validate the core concept with minimal upfront investment. Once the actual integration and customization work began, they decided to switch to a completely tailor-made solution to prevent possible compromises brought about by the constraints of the platform used in MVP. This is not to say that there is anything wrong with out-of-the-box solutions in general but often, modifying them beyond their original purpose gets unwieldy and hard to maintain.

It is not unusual for enterprise software projects to be in what you could call a constant MVP mode. It is a state where new features are demanded to be developed by the business side constantly. And the project is always behind schedule since new features are expected to be live immediately once they have been introduced in the first place. It is common for this to end up in chaos and a lot of bugs.

Next, let’s go over the common pitfalls of MVP projects when it comes to software quality in the traditional sense and talk about some concrete ways you can overcome them.

On the team

While we recommend a small team of experts for the MVP phase, you and they should both know their limits. Very few people can do it all. Have a realistic look into the requirements, and evaluate if you need to expand the team.

Mapping the requirements to the required team size might be difficult, and that’s perfectly ok - it’s not really supposed to be your task anyway. It often is cheaper to get an outside specialist to step in, analyze the resources needed and help compare business proposals from multiple vendors.

If your project is concentrated around specific technologies, consider hiring subject matter experts for those specific technologies in addition to the MacGyvers from the MVP. A good example of such an expert would be a test automation engineer, who has a lot of experience with setting up such systems. Hiring an expert will often save money in the long run and ensure your project follows best practices.

If you are looking for a refresher on what types of engineers are out there, this short article will help you understand the differences between different types of software engineers.

Corporate software, the good bits

From the eyes of a seasoned corporate DevOps pro, the MVP development process looks like total chaos. Things like code coverage (e.g. unit tests) and automated testing they usually take for granted seem like a faraway dream when it comes to a lean MVP development process.

Here’s some food for thought: you should review beforehand whether you are expecting to continue working with the MVP implementation, or whether you expect to start from scratch. If you are looking to trash your MVP once its proven its point, you may want to spend as little time with e.g. automated testing as possible and focus on shipping. But you still should use tools and practices that make the project testable in case you decide to stick with it after all.

A practical approach: While skipping all code coverage and other such thresholds, prepare your application to be both unit testable and end-to-end testable so you are prepared when it is time to climb that fence. Create sanity checks (e.g. check that all software components are defined) on the unit test side, but focus on manual testing for the main functionality. Set up a UI testing framework (e.g. Selenium), but again focus on a few sanity checks (e.g. checking that the UIs main elements are rendering) to make sure your application is rendered. This approach sets a healthy basis for continuing to add more extensive tests when needed.

DevOps is the utilization (or some might call it culture) of best practices in software development, unifying operations and development parts. These best practices are items like deployment pipelines, continuous integration, and versioning guidelines. There is no reason why these cannot be utilized already in MVP development.

Items that need to be addressed post MVP development include integrating enhanced testing baselines to the deployment pipelines. It is also very well possible that the culture will bring more review points when utilized after the MVP project.

Software management process and backlog prioritization

When developing your MVP, you may run into new business/feature ideas that you consider worth developing. You should write all of these down, but keep your eyes on the end goal - getting the first working version shipped.

Once you have a working product out, it’s time to do the backlog prioritization with all the introduced feature ideas. Often, the learnings from the working product allow you to make more informed decisions on the prioritization. With the learnings in hand, you can plan versions, releases and define stage goals. Of course, this prioritization can be done during the MVP project, if it’s possible time-wise.

This should also be the time to review your software management processes. We are not going to take a stand on any specific processes, given what works for one team and one project might not work for another. In many cases, the MVP stage is done wild west style, which can be ok to get things shipped. If you have already utilized a specific process framework during the MVP development, take a step back and think whether you can and should continue to use it.

Performance and scalability

Does it scale? That’s probably the most common question when it comes to applications developed by startups and companies alike (next to how are you going to monetize it?). This is most often raised by the pedantic engineer type of guy in the meeting. We would argue that it’s definitely more common to overthink than underthink scaling in an MVP project.

You definitely should not worry about supporting 10000 simultaneous users when you are looking to validate your idea and get started with your first test users. Having said that, it is also a well-established factor that you can and should be using well-known components with a large community backing it up. By doing this, you are basically getting a guarantee out of the box that someone else has already utilized the technical solution/approach on a real-world case and scale.

Security and reliability

Unfortunately, some stakeholders cannot be bothered about security or proper testing...until it is too late. If you are collecting user data or any other sensitive data in your MVP, you should be already taking security into account.

This is not a guide for security guidelines though, so we’ll simply leave you with this: Small does not mean secure - often the opposite. By that, what we mean is: it is often seen as a common excuse that a small startup should not have to take care of the security since no one would be interested in them. However, once your project is out in the open (e.g. domain, emails, registered users), security must be taken care of appropriately, along with new EU GDPR regulations. So make sure the team understands what this means.

4. What’s Next

Thank you for taking the time to read the Takeoff Guide. We hope we were able to provide you actionable ideas you can put to use in your organization. Perhaps you have realized that application development does not need to be a constant pain in the behind.

If the ideas in this guide sound intriguing to you, but you think you’d need help to put them into action in your organization - feel free to in touch.

We are constantly learning and writing about our latest learnings. So unless you’ve already unsubscribed, you’ll be hearing from us in the form of more actionable advice around application development.

About Wingmen

Wingmen is a Helsinki and Singapore based consultancy helping companies solve game-changing business problems and test new digital business ideas by leveraging premade or custom solutions.

We are a small group of digital MacGyvers who love to solve real-world problems with design and technology. We have a very particular set of skills acquired over extensive careers. Skills that make us business-minded, full-stack makers, who can wear multiple hats to excel in quickly changing environments.

We push each other and our partners to the next level. And together, we are taking small, meaningful steps towards a better digital future.

A grand list of resources and tools related to web/app development, business and startups.

Business

Business related resource for building your next startup or improving your current one.

SaaS Financial Plan - A financial plan template for SaaS.
Founder / Advisor Standard Template - Contract template for startup advisors.
Equity Compensation Guide - Stock options, RSUs, job offers, and taxes — a detailed reference
Startup Tools - Free contract templates for startups in the nordics.
Producthunt Founder Club - Lots of benefits for startup founders.
Gitlab Handbook - GitLab team handbook is a great resource on how to run a remote company.
MVP Success Guide - A great guide on running building a minimum viable product for your startup.
EnterpriseReady - SaaS feature guides created for people who build SaaS products for enterprise customers.
Startupstash - A curated directory of tools and resources to build your startup.
Resources for Freelancers - All the free resources and templates you need to get work done as a freelancer.
1 on 1 Meeting Questions - Mega list of 1 on 1 meeting questions compiled from a variety to sources
StartHouse - A big collection of startup pitch decks.
How to do B2B Sales - A great article on doing B2B sales right.
Managers Playbook - Heuristics for effective (tech) management: coaching, hiring, one-on-ones etc.
YC Startup Library - Videos, podcasts and essays as resources for startup founders.
Founder library - Curated list of articles and resources for founders
Awesome CTO - Curated list of articles for CTOs, with the emphasis on startups and hyper-growth companies.
Falsisign - There comes a time when someone wants you to go through printing and signing and scanning a paper. Use this instead. :)

AI / Machine Learning

Every business can take advantage of the great progress made in the AI/ML field recently. The uses span from generating images for your blog posts to using ChatGPT as a pair programming partner.

ChatGPT - Use ChatGPT as your personal knowledge base, assistant, programming helper and what not.
ChatGPT Prompts - A repo that includes ChatGPT promt examples to use ChatGPT better.
Dall-e 2 - Dall-e 2 is an image generation model useful for generating images for blog posts etc.
OpenAI Cookbook - Examples and guides for using the OpenAI API.

Terms and Conditions

If you're building a legit business sooner than later you will need to introduce some terms and conditions. Check these links for inspiration and advice.

Basecamp Customer Bill of Rights - The gold standard in ToS clarity and user friendliness.

Hiring

Hiring the best engineers is crucial for a tech startup because they are the ones who will build the product that will make the company successful. Without them, your startup's rocket is going to be a dud and end up in the junkyard.

Dropbox career framework - How Dropbox organizes their technical roles.
Hiring Senior Engineers - Tips to write better engineering job descriptions.
Tech Interview Handbook - Curated coding interview preparation materials for busy software engineers.

Culture

A handbook is not a culture. But these handbooks can be a great inspiration on how to set up yours.

Atlassian Team Playbook
Basecamp Handbook
Gitlab Handbook
Hashicorp Works
Valve Handbook
Zapier Remote Guide

Workspace

Workfrom - Find coffee spots to work from in any city verified by other remote workers.

Design & development

Design and development related resources.

App builders

Too lazy to learn how to code or too cheap to pay for someone to do it for you? Here are some options to try.

AppGyver
Adalo
AppMachine

APIs and documentation

Great APIs and documentation are a key to successful tech startup. It can be a good idea not to roll your own API standard and follow an existing standard and use the provided tools.

JSONAPI - A specification for building APIs in JSON.
OpenApi - The OpenAPI Specification (OAS) defines a standard, programming language-agnostic interface description for HTTP APIs.

Colors & patterns

Tools and resources on figuring out color palettes and finding patterns.

Colourlovers - A creative community where people from around the world create and share colors, palettes and patterns.
Coolors - Easy and fast color schemes generator.
Dracula Theme - Popular theme for editors/apps etc
Gradient Animator - Create CSS gradients easily.
Gradient Generator - A gradient generator that generates lush gradients avoiding the gray dead zone.
Nord Theme - Theme for editors/apps etc
Subtle Patterns - Yet another pattern library for your projects.
The Pattern Library - This project compiles patterns created by designers for use in your projects.

Data

Often you need some data to achieve your goals.

GeoLite2 Free Geolocation Data - A free IP geolocation database.

Domain / namecheck tools

These tools make it easy to check if the genious app name idea you came up with is available for general use in the internets.

Wordsafety - Check a name for unwanted meanings in foreign languages
Domainr - Instantly check if a domain is available.
Namechk - Quickly check a name across multiple services.
Entri - Service & api to manage custom domains.

Ember plugins / resources

A bunch of the best resources and plugins we are using for Emberjs.

Ember Observer - Ember addons listing
Ember Power Calendar - Powerful and customizable calendar component for Ember.
Ember Flatpickr - Implements the Flatpickr calendar for Ember.
Ember Testing Tips - A good article on how to do testing in Ember.
Ember Cli Notifications - A notifications system for Ember.
Ember Gestures - Handle gestures in Ember apps nicely.
Vertical Collection - Infinite Scroll and Occlusion at > 60FPS for Ember.
Ember In Viewport - Detect if an Ember View or Component is in the viewport @ 60FPS.
Ember Cli Clipboard - Copy text to clipboard.
Ember Cli Geo - Integrating HTML5 Geolocation API into your Ember.js web app.
Ember Cli Swiper - A nice swiper component for your apps.
Ember Concurrency - Ember Addon that makes it easy to write concise, robust, and beautiful asynchronous code.
Ember Animated - Core animation primitives for Ember
Ember CP Validations - Ember computed property based validations
Ember Cli Bundle Analyzer - Analyze and visually show the size and contents of your Ember app's bundles.

Design, UX, fonts, typography, sounds

Resources related to design, ux, fonts typography, and sounds.

Closest font - Find closest font
CSS Font Stack - A collection of web safe CSS font stacks.
Design Principles - An open source collection of Design Principles and methods.
Devfonts - Fonts for code editors.
Inspirational Typohraphy Guide - A Five-Minute Guide to Better Typography
Laws of UX - Laws of UX is a collection of the maxims and principles that designers can consider when building user interfaces.
Practicaltypography - Typography in ten minutes
Sketch App Resources - Lots of free resources for Sketch App.
Typ - Find fonts that go together
Freesound - Freesound is a collaborative database of Creative Commons Licensed sounds.

Inspiration sources

Resources for UI/design inspiration.

Dribbble - The place to find & showcase creative work.
Goodweb - The best landing pages, organized by section.
Mobilemozaic - MobileMozaic is a gallery of the very best designed iphone applications.
Pttrns - Examples of common design patterns in apps.
Littlebigdetails - Little Big Details is a curated collection of the finer details of design.

JavaScript guides

Guides for writing better JavaScript code.

AirBnb JavaScript Style Guide - AirBnbs famous JavaScript style guide.
Modern JS Cheatsheet - Cheatsheet for the JavaScript knowledge you will frequently encounter in modern projects.
Clean Code JavaScript - Software engineering principles, from Robert C. Martin's book Clean Code, adapted for JavaScript.
33 JavaScript Concepts - Repository of updated links to help developers master their concepts in JavaScript.

JavaScript libs / resources

A bunch of JavaScript libraries and resources that seem to come handy time after time.

GarlicJS - Persist form state in localStorage to prevent those oopsie moments where user loses text.
Faker.js - Generate massive amounts of realistic fake data in Node.js and the browser.
Awesome Node.js - A huge list of delightful Node.js packages and resources.
Sifter - A library for textually searching arrays and hashes of objects by property (or multiple properties). Designed specifically for autocomplete.
Svelte Community - Resources for Svelte framework.
Bottleneck - A library to throttle things.

UI components
Chardin.js - Simple overlay instructions / guide for your apps.
GridStack - Build interactive dashboards in minutes. Requires jQuery.
Leaflet - JavaScript library for mobile-friendly interactive maps.
noUiSlider - noUiSlider is a lightweight JavaScript range slider library with full multi-touch support. It fits wonderfully in responsive designs and has no dependencies.
nProgress - Slim progress bars for Ajax'y applications. Inspired by Google, YouTube, and Medium.
Timesheet.js - JavaScript library for HTML5 & CSS3 time sheets.
Slate - A completely customizable framework for building rich text editors.
Shepherd.js - Create product guides/tours of your app easily.

Date/time
Moment - Parse, validate, manipulate, and display dates in javascript.
CLNDR - a jQuery calendar plugin that uses HTML templates.
Pickadate - The mobile-friendly, responsive, and lightweight jQuery date & time input picker.
Kalendae - A javascript date picker that just works.

File
Filesize.js - JavaScript library to generate a human readable String describing the file size.
jQuery File Upload - File Upload widget with multiple file selection, drag&drop support, progress bar, validation and preview images, audio and video for jQuery.
Dropzone - Dropzone is an easy to use drag'n'drop library. It supports image previews and shows nice progress bars.

Images
lazysizes - High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.
Intense Images - A simple library to view large images up close using simple mouse interaction, and the full screen.
Photoswipe - JavaScript image gallery for mobile and desktop, modular, framework independent.
Galleria - Another JavaScript Image Gallery.

Mouse/touch/keyboard
Dragula - Drag and drop so simple it hurts.
Hammer.js - A javascript library for multi-touch gestures.
Mousetrap - Simple library for handling keyboard shortcuts in Javascript.
Cleave.js - Format input text content when you are typing.
Draggable - The JavaScript Drag & Drop library your grandparents warned you about.
ScrollMagic - A popular javascript library for magical scroll interactions.

Visualisation
D3 - Bring data to life with SVG, Canvas and HTML.
C3 - A D3-based reusable chart library.
Raphaël - Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web.
SVG.js - The lightweight library for manipulating and animating SVG.

Kubernetes / Docker

Running your own cluster is the bomb these days.

Gravity - Opinionated image-based Kubernetes packaging and management tools.
Helm - The package manager for Kubernetes
Kops - Kubernetes Operations to handle production grade K8s installation, upgrades, and management
Seldon Core - Handy tool to run your ML models on K8s.
Dive - A tool for exploring a docker image, layer contents, and discovering ways to shrink the size of your Docker/OCI image.
Dokku - Docker powered mini-Heroku. The smallest PaaS implementation you've ever seen.
Gotenberg - A Docker-powered stateless API
for PDF files.

Launch check lists

Getting ready to launch a web application or site? Go through these check lists to make sure you got your bases covered.

Box UK Checklist - Extensive website launch checklist.
Smashing Mag Checklist - Smashing magazines take on website launch checklist.
Webdesignerdepot Checklist - Webdesignerdepots take on website launch checklist.
1stwebdesigner Checklist - 1stwebdesigners take on website launch checklist.

Open source example web/mobile apps

It can be valuable to take a peek at other apps how they've done things.

Bigcapital - Bigcapital is intelligent cloud and open-source accounting software for small and medium businesses.
Bullet Train - Bullet Train is an MIT-licensed Rails-based framework that saves you months of development by starting you off with all the features that are the same in every product, so you can focus on what makes your app unique.
Calendso - The open-source Calendly alternative built using Next.js.
Capstone - An experimental, tablet-based tool for developing your ideas.
Clone Wars - Browse open-source clones or alternatives of popular sites like Airbnb, Amazon, Instagram, Netflix, Tiktok, Spotify, Trello, Whatsapp, Youtube, etc.
Dashy - A self-hostable personal dashboard built for you. Includes status-checking, widgets, themes, icon packs, and a UI editor.
Docuseal - Open source DocuSign alternative. Create, fill, and sign digital documents.
FullStack - Full-stack boilerplate for you to learn some cool things or build your next app off of.
Hasura example app - React admin with firebase auth and hasura graphql backend.
Hospitalrun - Comprehensive OS app for hospitals.
Invoice Dragon - An application that simplifies the process of generating professional Invoices and Receipts for your business needs.
Navi - Navi is a production quality analytics reporting UI
Pushpin - A collaborative corkboard app.
Pixelpusher - Real-time peer-to-peer collaboration with React.
Realworld - The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, Ember etc.
Sharedrop - Easy P2P file transfer powered by WebRTC - inspired by Apple AirDrop.
Super Productivity - Super Productivity is a ToDo List / Time Tracker / Personal Jira Task Manager for Linux, MacOS and Windows.
Talkyard - A combination of stackoverflow, wiki and slack.
Maps.me - MAPS.ME is an open source cross-platform offline maps application, built on top of crowd-sourced OpenStreetMap data.
Papercups - Papercups is an open source live customer chat web app written in Elixir.
Penbot - Penpot is the a design and prototyping platform meant for cross-domain teams.
Plane - Open Source JIRA, Linear and Height Alternative. Plane helps you track your issues, epics, and product roadmaps in the simplest way possible.
Tablane - Tablane is a workspace that adapts to your needs. It's as minimal or as powerful as you need it to be. Built in React + Tailwind.
Upptime - A open-source uptime monitor and status page, powered entirely by GitHub Actions, Issues, and Pages.
QR-Designer - QR designer web app with a novel method of designing qr codes that does not take advantage of error correction.
LangUI - LangUI is an Open Source Tailwind library with free to use components tailored for your AI and GPT projects. Focus on building the next best project and let it handle the UI.

React libs / resources

react-map-gl - React friendly API wrapper around MapboxGL JS.
react-vis - Data Visualization Components
reakit - Toolkit for building accessible rich web apps with React.
Nivo - A set of dataviz components, built on top of d3 and Reactjs libraries.

Templates / boilerplates

Here is a bunch of templates and boiler plates for hitting the ground running in your next endeavour.

Boostrapsious - Free (and non-free) Bootstrap themes.
Bootswatch - Free themes for Bootstrap.
Extensionizr - Start a chrome extension in 15 seconds.
Fastshell - Simple, quick front-end boilerplate and workflows.
Html5up - Free HTML5 site templates.
Initializr - HTML5 template generator to help you getting started with a new project fast
MVP CSS - A minimalist stylesheet for HTML elements.
Start Boostrap - More free (and non-free) Bootstrap themes.
Underscores - Wordpress theme starter kit.
30 Seconds Of Code - Short code snippets for your development needs.

Testing and user experience

Tools for testing and improving your web applications.

Browserstack - Test your projects on 2000+ real devices and browsers.
Fullstory - See how your users actually use your web application.
Fake name generator - Generate random realistic identities for testing.
Gremlins.js - Unleash the gremlins on your application or site to test it's robustness. :)
Gtmetrix - See how your site performs, reveal why it's slow and discover optimization opportunities.
Pagespeed - Googles pagespeed test can help you make your web pages fast on all devices.
Tota11y - Tota11y helps visualize how your site performs with assistive technologies.
Usetrace - Mostly codeless UI test automation in the cloud.
Taiko - A node.js library for testing modern web applications.
Testproject - TestProject is an end-to-end test automation platform for web, mobile, and API.

Escape Google / Privacy

Google removed "Don't be evil" clause from their code of conduct and got 200% more evil. Here are some alternatives to Google stuff and generally avoid tracking. Because privacy matters.

Sovereign - Run your own infrastructure for email, file sharing and what not.
Fastmail - Alternative email provider for Gmail.
PrivacyTools - PrivacyTools provides services, tools and knowledge to protect your privacy against global mass surveillance.
Prismbreak - Opt out of global data surveillance programs like PRISM, XKeyscore and Tempora.
Syncthing - Syncthing is a continuous file synchronization program aka. open source dropbox.
DeGoogle - A huge list of alternatives to Google products. Privacy tips, tricks, and links.
Ethical Ads - Ads for developers in an ethical way.

Marketing

I know we tech wizards love getting lost in code and building the next big thing, but without marketing, all that hard work will be for nothing. It's like building a castle in the middle of the desert, sure it's impressive, but if no one knows it's there, what's the point?

Email marketing

Email List Incentives - A comprehensive article on using lead magnets to get subscribers for your blog.
Gmass Inbox - Test if Gmail considers your emails as spam or do they land in the inbox.
Mail Tester - Check your email messages before sending them out to ensure they are not considered spam.
Really Good Emails - A huge collection of high quality emails for transactional/marketing email inspiration.
The Cold Outbound Handbook - In depth guide to cold outreach

Guides & inspiration

Marketing Examples - Long list of the finest real world marketing examples.
Marketing For Engineers - A curated collection of marketing articles & tools to grow your product.
SaaS Website Best Practices - Understand how to build a great SaaS Website.
Sizle directories list - Mega list of submission directories to get exposure for your new project.

Social media automation

Tools to help automate social media and make the bots take over the world.

Insomniac - Instagram bot written in python that runs it's automation on a virtual device or on a real Android device.
Tinder Client - NodeJS based Tinder client.

Search Engine Optimization (SEO)

Tools and articles on handling of search engine optimization.

Ahrefs - Excellent tools for monitoring and optimizing your site for SEO.
SaaS website best practices - Actionable advice on how to have a great web presence as a SaaS startup.

Photos/mockups/illustrations/videos

Resources for finding those juicy free photos, videos or icons for boostrapping your startup idea.

Visualhunt - Creative commons photo search engine.
The Stocks - Yet another stock search engine.
Mockupworld - Find free Mockups from the Web
Unsplash - The place to find free, high quality photos
Compfight - Locate visual inspiration
you need.
Littlevisuals - Free, high resolution images
Picjumbo - Free high-resolution images for personal and commercial use
Gratisography - Quirky, creative and free photos
Morguefile - Free images for creatives, by creatives
Freepik - Graphic resources for everyone
Pixabay - Stunning free images & royalty free stock
Jeshoots - Free to use photography by Jan Vašek, who wants to help to all of the artists.
New Old Stock - Vintage photos from the public archives. Free of known copyright restrictions.
Moveast - This is a journey of a Portuguese guy moving to the east decided that every photo should be used for free.
Life of Pix - Another site with free high resolution photography.
Kaboompics - Free stock photography and color palettes.
Designerspics - Free Hi-Res photos for your personal & commercial use. Attribution not required!
Startup Stock Photos - Startup themed free to use stock photos
Jaymantri - CC0 photos by Ajay Mantri
Stock Up - Free stock photo aggregator
Isorepublic - Free high-resolution CC0 photos and videos
Pexels - Free stock photos & videos shared by talented creators.
Coverr - Beautiful free stock video footage
Iconduck - Free icons, no email/signup required.
Iradesign - Build your own illustrations.

Offline goodies & swag

We do not yet live in a fully digital world and it can be cool to get some swag for your company.

Calepino - Calepino offers great quality brandable office goodies
Colorplan Paper - Paper of epic quality from England for those extraordinary business cards
Gooten - Build an online store and let Gooten produce the goodies and fulfill orders.
Fatcloth - The most epic pocket squares that double as screen or eyewear cleaning cloth. Also brandable to your own companys needs.
Realthread - Makes it easy to order super soft, stylish custom printed t-shirts
Stickermule - Stickers and other swag with minimal hassle

Security

We can not forget security even in a busy startup.

AWS Security tools - List of open source tools for AWS security: defensive, offensive, auditing, DFIR, etc.
Honest Security - A guide to endpoint security and device management that doesn't erode your values.

Studying / reference / tools

Site / applications / references to help you study stuff to keep your mind sharp and fingers fast.

0 Data App - A specification for apps where users own their data.
Anki - Powerful, intelligent flash cards.
Crontab Guru - The quick and simple editor for cron schedule expressions.
Ihateregex - The Regex Cheat Sheet
Keybr - Take typing speed test, practice your touch typing skills, learn to type faster and with fewer errors with this free online typing tutor.
Shortcutfoo - Practice shorcuts and become a ninja through interactive learning and repetition.
The Art of Commandline - Master the command line, in one page.
Typelit - Improve your typing for free online by practicing on classic literature.
FTP - The Ultimate Guide to First-Principles Thinking
Open Source Computer Science - Path to a free self-taught education in Computer Science!
CyberChef - A simple, intuitive web app for analysing and decoding data without having to deal with complex tools or programming languages.
Devdocs - DevDocs combines multiple API documentations in a fast, organized, and searchable interface.
Devhints - Rico's collection of cheatsheets for all things programming.
Load Balancing - Understand load balancing.

This is a mega post on outsourcing a digital Minimum Viable Product to test the viability of your idea with real customers. This would be a great read if you're looking to build an MVP for your startup or enterprise and don't have much experience from outsourcing technical projects.

This post is divided into 6 chapters:

1. Keeping it real with Minimum Viable Product
2. Scoping your MVP using User Story Mapping
3. Writing a request for proposal
4. Finding a great partner for outsourcing your MVP
5. Tips for writing an outsourcing contract
6. Managing an outsourcing project

1. Keeping it real with Minimum Viable Product

Let's take a look at how and why you should try to go minimal when building a minimum viable product (MVP) application. Yes, I know, it's in the name. But let's dig a bit deeper!

"The minimum viable product is that version of a new product which allows a team to collect the maximum amount of validated learning about customers with the least effort." — Eric Ries, Author of The Lean Startup

The purpose of an MVP is to test the market viability and learn about your customers. Your MVP should have just the bare minimum features needed to deliver that value and get your customer to part with their money.

Staying focused

When you're close to the idea it is easy to get carried away and start adding cool features. Try to avoid this at all cost. I've noticed that it is a good habit to write down the ideas for later to get them out of your head. This will help you let go and keep focused on the core value delivering features.

Keeping the scope small and manageable will maximize the chances of MVP project success. It is far easier to successfully execute a tight, well-defined MVP than a complex, monstrosity of an app. This will, as well, minimize your losses in case your MVP flops or turns out non-viable.

You should aim to get to an MVP which you can build and launch within a few weeks to a maximum of a couple of months. Generally, that should be enough time to build most MVPs. If it takes longer, you're likely building something that is too big i.e. a much riskier investment.

Exercise in minimalism

Let's assume you have a clear idea of what is the problem you are solving. Next, you will want to drill down to find the core of your product that is just enough.

Unfortunately, there is no secret shortcut or strategy that will let you come out with the correct feature set every time. Ultimately, you'll have to interact with your future customers to find out where the sweet spot is.

We've used the following process successfully to establish which features should be included in an MVP:

• Create a list of product features that will solve your client's problem.
• Step into your customers' shoes and see what is the bare minimum feature set that will deliver the value.
• Get in touch with your future users and see if they agree. If you can, try pre-selling to validate the value proposition of the minimal feature set.
• Iterate points 2 and 3 until you have validated the minimum set of features.

Essentially, you will be repeating this process after you have your first MVP out. Take in user feedback (learning) and release new versions to address that and better serve your users.

Detecting non-essential features

Even with the best intentions of whittling down your product, you easily end up having too many features. Here are a couple of ways to spot features, which you should cut:

• For each feature you intend to put in your MVP, think: “can I still deliver the value if I do not have this?”. If you can, then cut the feature.
• The feature was added as a result of "It would be nice/cool/great to have X...". These are often nice-to-have features that are not critical to your MVP.
• The customer is saying "If your product had an integration with X, then I would pay...". The integration is probably not what you need. It might be a warning sign that the core value of your product is not high enough.

This should help you keep it minimal when it comes to building your first MVP!

2. Scoping your MVP using User Story Mapping

In the previous chapter, we took a look at why you want to keep your MVP scope minimal and some ways to come up with the core features. This chapter will dive into how you can put it down on paper following loosely the User Story Mapping method coined by Jeff Patton.

A solid product scope document is a critical part of an MVP project. You need to be able to describe your idea to stakeholders, be it people inside your company or an outsourcing partner. Especially if you are starting work with a new partner, you have to assume anything you have not written down in your scope document, will not get built.

Generally speaking, the less you pay for the outsourcing, the more effort you have to put into building a very detailed definition document and managing the development process to ensure quality output. We will get back to this in a later chapter when we talk about finding a partner.

Enter user story mapping

There are several ways to approach scoping your product. In this article, I will introduce you to user story mapping. User stories help you step into your user's shoes and see the product from their eyes.

This is a good technique to enable you to describe your product in great detail. Which is exactly what we are looking for. I will be using Tinder as a fairly simple example here.

If you are right now going through the process, it's time to whip out your favorite word processor and start typing.

1. Define the primary goal/benefit of your product and write it out. For Tinder,this could be: "Users can find and connect with people, who find each other mutually romantically interesting."
2. Define the main high-level process to achieve the primary goal. Visualize how you as a user of your app would go through this process and write it down. In Tinder's case it could be:

• User signs up
• User sets their interests/settings
• User can browse through profiles matching their interests/settings
• User can indicate interest/disinterest per profile
• User will get notified when there is a "match" indicating mutual interest
• User can chat with matches

3. Focus on each step of the process at a time and write down a list of features available in that step. You should try to visualize yourself using the app. It might help to draw each step on paper.

• Identify and prioritize critical features and put them on top.
• Clean up and add more details.

You will want to be very specific about how each step works. For example, in the signup step, you have to answer questions like:

• How does the user initiate this step (e.g. opens app, tap a button)?
• What does the user see first? Are there animations?
  What info should be collected at this stage (e.g. name, email, password)?
• How will each piece of information be collected (e.g. text field, dropdown, third party integration like FB login)?
• What happens when they submit the form? Possible error messages?

This is the user story for the core flow of your application. Next, you will want to repeat this process for each feature of your MVP until you have described the whole app. In the end, you should have a document detailing all the possible use cases for your application.

3. Writing a request for proposal

In the previous chapter, we looked at how you can scope your product using user stories. This chapter's topic is writing a request for proposal (RFP). This is the document you will be sending to potential outsourcing partners.

The purpose of the RFP is to describe the services you're looking to acquire in detail. You'll want to include your scope document as an attachment as well.

Next, we will go over the key sections a killer RFP should cover. Get your word processor warmed up!

Project overview & background

This is the standard start, where you give an overview of your project and some background info. You should tell a bit about the project, your company, why this project is being considered and an overview of the goals.

Project goals and target audience

Explain what you plan to accomplish and what will be the expected outcome of the project. You should also describe your target audience as this will help the vendor to understand requirements better.

Scope of work

The Scope of work describes the services you're looking to purchase. This will be the design and development of your MVP as well as any additional services you might wish to purchase. For example, you might want to include a landing page and a hosting solution on top of the design and development work.

Scope of product & technical requirements

Here you'll want to reference your scope definition document that describes your product. In addition, you should describe the technical requirements of your project. E.g. device/browser support and testing, future scaling needs and the use of a viable technology stack for going forward.

One important MVP-specific technical requirement is tracking. The purpose of an MVP is to gather learnings about your users. You should have a way to track what your users do. This could go from a simple Google Analytics setup to a complex Mixpanel/Kissmetrics integration depending on your budget and needs.

This is a part where you should be looking for technical help to ensure things are in order. It could be a qualified friend or an outside consultant. In the full course, my RFP template includes some valid example technology stacks, with PROs and CONs listed. But still, every project is different and one size rarely fits all when it comes to building digital services.

Timeline

You should describe the timeline you'd expect to get the project done in. A smart strategy is to ask the vendor to divide the whole project into small deliverable parts and have a deadline and separate payment for each stage. This enables you to see how things are progressing and if the work is satisfactory without investing in the whole thing at once.

Point of contact

Here you will let them know who to be in touch with regarding the project and who has the final say on decisions. It is critical that your vendor has easy access to the person who can do the decisions.

Budget

Yes, you should really put in a budget - at least a rough figure. MVPs are like cars or houses. You can get a crappy one on the cheap. For a luxurious end-product, you'll be paying a lot more of course.

You should be up-front about how much you're willing to spend, this saves time on both ends. You won't spend time reading proposals that are too expensive for you. And on the other hand, vendors do not waste time writing proposal out of your budget range.

If you cannot trust your future vendors to not screw you over with pricing, maybe you are looking at the wrong vendors. Trust is a key part of a successful outsourcing project. If you don't have that from the start, then you're already going down a perilous path.

Additionally, having all offers come in with similar price-points makes it much easier to compare the offers. For example, someone might throw in a round of user testing whereas the other just offers the features.

Support/retainer

Once the MVP is launched, you will want to secure help fixing bugs, improving existing features or adding new ones. In the future, you might be looking to hire your own team to work on the product. But to support the MVP and facilitate the transition, you should have the option to continue the relationship with the partner.

Criteria for selection

You should let the vendors know what are the key criteria for selection. Depending on your specific situation this might be a combination of cost, timeline, previous experience from similar projects, demonstratable know-how in some specific area etc.

Format & proposal timeline

Here you should let the vendors know in what format and on what date you'd be looking to get the proposals in.

Now you have an understanding of what a comprehensive RFP could look like. Writing a great RFP from ground-up is no small task. It could take you anywhere from four hours to a few days of work.

4. Finding a great partner for outsourcing your MVP

In the previous chapter, we looked into what a comprehensive RFP should contain. In this chapter we will be going over how to find, vet and choose your future partner.

Finding the right partner for your MVP outsourcing is perhaps the most critical part of the process. This is going to be a long one.

The process

A thorough process could look like this:

• Come up with a list of potential candidates
• Do a preliminary round of vetting
• Send out the RFP to the vendors who passed
• Vet the received proposals and select the final candidates
• Do further vetting on those
• If you have the budget, run a proof of concept project with your favorite 2-5 candidates
• Trust your instincts above all else. If something doesn't feel right, do not proceed :)

But first, let's take a quick detour to right a common misconception people have about outsourcing development...

Cheap, good & fast

One of the major fallacies people have about outsourcing software is that all software is built equal. You cannot get something that is cheap, good quality and delivered fast - having all three qualities in one vendor is just a bit more likely than winning the lottery. You will have to be prepared to compromise on at least one of the qualities. Let's look at it through an analogy of building a house.

You can spend a little money on a cheap labor contractor to build your house. You'll have to probably describe your house in great detail to get what you want. If you do not specifically request you'd like a roof and a door - you might be missing both! And still it will have problems like leaky pipes (you forgot to specifically say they should not be leaky), toilets not flushing and lights working only half of the time. The project ran late as well as you might have guessed... In the next year when you decide to build that second floor, the new contractor says that the foundings are not strong enough and the whole house needs to be rebuilt. It was cheap to start with, but in the end, you ended up paying more.

Alternatively, you reach out to a well-known, and yes expensive as well, contractor and let them know your wishes. They understand your demands and execute your vision with speed. You will have a beautiful house, where everything works. And the project is on time. They even went beyond expectations and included a beautiful hand-carved nameplate on your door. Next year, the second-floor project will be done at ease as the foundings are rock-solid.

This is how it is with software as well. You will VERY likely be getting what you pay for. There are exceptions to this, but that is leaving things to luck and guesswork.

The takeaway from this detour is - if you are looking to outsource to the cheaper developers, you really have to put in the effort beforehand to ensure there will be a door and a roof to your house. :)

Types of vendors

Generally, there are three types of vendors to choose from when outsourcing your MVP. Any of the choices can work for your project, but I'll give you some pros and cons of each below to make it easier to pick the best for you.

Freelancers:

• [+] can be cheaper
• [+] work with one person, easy to build a relationship
• [+] fast-moving
• [-] riskier, can disappear / no support going forward
• [-] lack of resources building something larger

Small agencies (~2-15)

• [+] move fast still
• [+] work with a team, still able to build a relationship
• [+] more resources
• [-] can be more costly than a freelancer

Large agencies/companies (15+)

• [+] lots of resources
• [-] harder to have a good relationship, people change
• [-] quality changes depending on the team (previous references not indicative of future success)
• [-] more overhead, costly
• [-] move slow

Finding vendors

The best way to find great candidates is by a recommendation from somebody you know and trust. Especially if they have actually worked with the vendor before and are basing the recommendation on that experience. If it's just a word-of-mouth recommendation, then you might want to take the recommendation with a grain of salt - particularly if it's a larger company. As you might just get unlucky and have an incompetent team working on your product.

Another option is to use communities you're a part of to ask for recommendations. Think Facebook groups you're a member of, your housing association meeting or the folks at your yoga club for example.

If recommendations don't bring up anything, then you'll have to trust the internet. If you're looking to find a freelancer you'll have many, many sites available (Upwork, Elance, Craigslist, etc.). For finding agencies or companies, you can turn to google. You can find quite a few agencies focusing on building MVPs with a proven track record. Search terms could be "startup agency" or "mvp startup agency" for example.

Vetting vendors before sending RFP

The first round of vetting should be a quick check to see if they have a decent website and some previous work shown. You should find links to actual live products you can play with. It's a definite red-flag if you cannot find any projects to play with. If you have a technical friend available, you could ask them to take a look at the technology side of the reference projects.

Vetting after receiving proposals

When you start receiving proposals, you should carefully go over them and see how well they match your requirements. Then you'll pick the ones that seem to be the best fit for your project and proceed to vet them further. The further vetting would include contacting previous clients for comments and in-person meetings with the person/team you'd be working with.

Next step would depend on your budget. Nothing really beats actually trying out each candidate for a small proof of concept project to see how they fare. If you have the budget, you should hire your top 2-5 candidates and have them all complete the same, small piece of your product. Then you can assess the work and the experience of working with each vendor.

With these steps completed, you should have a good chance of having found a great partner!

5. Tips for writing an outsourcing contract

In the chapter we talked about finding and vetting your future partner. In this chapter, we'll be looking at how to seal the deal with a solid contract.

The project is starting to look good to go. Next, you must prepare for the case that despite all your efforts some problems arise during the project.

If you're working with an experienced partner, they will probably have their own contract that they will be looking to use. In fact, seeing their contract or lack of can be one more step in the vetting process. In case you're working with a freelancer, you might need to come up with your own contract.

In any case, it is wise to involve a lawyer in the process. Depending on the depth of your war chest, you might wish to engage an experienced contract lawyer from the get-go. A more economical option is to get the contract as far as possible just between you and your chosen partner. Then at the end of the process hire a lawyer to check and fix potential problems.

Let's go over some of the key points your contract should cover.

• The contract should explicitly state what you're hiring the vendor to do. This should summarize and reference the request for proposal as well as the definition document.
• Define the responsibilities of each party and what happens when there are problems (delays, disagreements, etc.).
• You will want to ensure the transfer of immaterial rights on payment. You will want to have the contract be very clear that you or your company will be owning the IP rights to all deliverables produced (code, graphics, etc.).
• Non-disclosure. You will want to ensure your confidential information is not used in a way that you don't want.
• Testing and fixing of bugs. You will want to touch on how your MVP is tested and how bugfixes are handled.
• Dispute resolution. How and under which law and where are possible the disputes resolved.

In case you have to come up with your own contract and lack the resources to hire a lawyer to do it, you can scour the internet for templates. With a lot of time and effort, you can put together a reasonable contract on your own as well. Still, it's best to involve a local lawyer to ensure it's valid in your and your vendor's countries. A very lightweight starting point could be Contract Killer by Stuff & Nonsense.

Especially if you're looking to get funded, it could be critical that your contract is well thought out and covers your bases properly. Investors could view the lack of proper contracts as a risk they don't want to take.

6. Managing an outsourcing project

There are many ways to run a successful outsourcing project. Some principles, however, hold for most projects. I've put down some key ideas here to help you tackle your project.

Build a relationship

Building good relationships with your developers and designers will make or break the project. You will want to personally know the people working on your project. You should talk with each one to ensure they are on board with your vision. Having a good and easygoing relationship will ensure they will not keep you in the dark when there are problems - which are sure to come up in any project. You want your team to be open and upfront about problems so they can be sorted quickly.

Depending on the type of partner you are starting your work with, they might have a project manager manage your resources in their end. This can be riskier than building real relationships with the actual people, who are doing the heavy lifting in the project. Adding more layers will slow things down and you risk suffering from the broken phone effect where the extra layer of communication changes the message on the way.

In some cases, you might have a team of developers who need a manager because they don't understand your business or do not speak your language. Then there's no choice. But in that case, you really should consider another option/team.

To build relationships you need to communicate well. Meeting your team and treating them to dinner can be a powerful way to start the relationship. If this is not possible, try to arrange for a personal call with each member. Remember to give your team feedback and praise when appropriate.

The larger the project is, the more critical it will be to retain the people working on your project. Developers are not cogs in a machine. Having to replace people WILL slow your project - no matter what your outsourcing partner says. Also, the quality of work suffers greatly when there is no ownership of the code. You will want to keep your team together.

Remote work & communication

When you are outsourcing your MVP development, it is likely you are working with a remote team. Below are some best practices on successful remote work:

• Get to know each person, it will make remote work much easier
• Ensure sufficient timezone overlap (min. 2-4h would be best)
• Use project management software to stay on top and monitor progress (Basecamp, Jira, Trello, Asana, Github Issues, Linear... anything that works for you)
• Have set communication channels (e.g. Slack for day-to-day communication, Skype for facet-to-face meetings)
• Communicate asynchronously, interrupting developers every time you want to ask something will cost money & frustrate your team

The work process

You should ensure an open and interactive development process. This means that you should have access to the product being built from week one. You don't want to close yourself from your product and hope that all is well. You need to be involved in testing and using your future product. Have your friends and associates try it as well.

This enables you to see progress and help your team iterate on features as they are being built. It is much more efficient to fix things the moment they start going wrong.

Also, for usability testing on the cheap, you should let your mother and father try your product. This is a surefire way to find and fix a lot of usability problems. :)

Choosing technologies

Choosing popular and opinionated technologies is especially critical for product owners with no technical background as you cannot evaluate your vendor's technology choices.

1. Popular and open source means that you should have sane technologies and no vendor-lock in.
2. This will make your MVP more approachable for your own future team. Finding developers with relevant skills will be much easier.
3. A strongly opinionated framework (e.g. Next.js, Rails/Ember/etc.) will ensure that most choices regarding architecture are dictated by the framework (safer)
4. These frameworks often let you build faster as the focus is on business logic and not on the configuration.

You can find some inspiration at TechStacks.

With these tips, you should have a better chance to outsource your startups or enterprises MVP. :)

This is a quick guide for going from zero to a working app with all the bells and whistles like livereload, app icons and splash screens setup in about 5 minutes. If all goes to plan. ;)

Thanks to Ember Cordova project by Isle of Code, it has become super easy to build hybrid mobile applications using Ember and Cordova.

This guide assumes you are on MacOS and have the following basics set up already.

• Recent version of Node.js, Npm & Git
• Xcode & Android SDK
• Apple developer account set up

Setting up the project

First, let's setup the project and proceed to install some basics. Below you can copy paste the relevant commands.

npm install ember-cli -g
ember new my-awesome-project
cd my-awesome-project
ember install ember-cordova

We have just created the basic Ember project with Cordova included. Ready to roll!

Next, we edit the ember-cordova/cordova/config.xml and set up a proper identifier for your app replacing the generated one. It should look something like com.company.appname for us it is com.wingmen.my-awesome-app.

vim ember-cordova/cordova/config.xml

Then we need to change the default Ember config a bit to support Cordova. Let's modify the rootURL and locationType in config/environment.js.

vim config/environment.js

Make it look like the following:

rootURL: '', // default was '/'
locationType: 'hash', // default was 'auto'

All set here. Let's proceed to add the icon & splash screen.

App icon and splash screen

Ok, I'll admit it, this part might take a bit more time if you don't have SVGs ready to go.

To setup the icon for the app, save you SVG logo to ember-cordova/icon.svg. The icon should be a square. Then you can run ember cdv:make-icons. And that's it for icons.

For the splash, place your SVG file at ember-cordova/splash.svg and run ember cdv:make-splashes. Splashes will be resized and added to ther project.

The splash image has to support a lot of different screen sizes. You should download the splash SVG template provided by Isle of Code at http://embercordova.com/examples/safe-splash-template.svg. The image should have a background filling the entire area, and icons/text should be kept to the ‘safe area’ box.

Setup platforms

Now we are ready to setup the platforms for deploying.

ember cdv:platform add ios
ember cdv:platform add android

Before being able to build the application, we need to open Xcode and select the development team. Xcode needs this to be able to sign the code. You can open the project in Xcode using the command below:

ember cdv:open

Then in Xcode open the project and set the team on the 'General' tab. Once the team is set and it shows the Signing Certificate below, you should save the project and get back to the terminal.

Now we have a basic functioning application, which you can build for iOS and Android with the following commands.

ember cdv:build --platform=ios && ember cdv:open
ember cdv:build --platform=android && ember cdv:open

Wohoo, done! Did it take more than 5 min? Probably the SVG part screwed you. Or then you ran into a mystical problem with something along the way. If you did, you should rage at us on Twitter.

Next, we move to the extra goodies.

On-device livereload

This feature makes developing and testing Cordova's native features a piece of cake. Change some code, save your file & app reloads automagically on your phone. Developer bliss.

First you have to add the following line <allow-navigation href="*" /> to your ember-cordova/cordova/config.xml. Remember to remove this line for production builds.

ember cdv:serve
ember cdv run --platform=ios --device

Pasting the above to your console should start your app in your phone with livereload enabled.

Nice Cordova plugins

Here's a few of our favourite Cordova plugins we find ourselves using time and time again.

Crosswalk Webview

This plugin lets you package a custom browser into you Android app, so the browser environment for your Cordova app stays the same independent of OS version. Pure gold for making testing on Android less painful. Adds quite a bit to the size of your app package though.

ember cdv:plugin add cordova-plugin-crosswalk-webview

Geolocation

This plugin provides information about device location.

ember cdv:plugin add cordova-plugin-geolocation

Network information

This plugin enables you to handle connectivity related things.

ember cdv:plugin add cordova-plugin-network-information

Statusbar

This plugin lets you configure how the status bar is displayed.

ember cdv:plugin add cordova-plugin-statusbar

Inappbrowser

This plugin lets you manage exactly how the links in your apps are opened. Many people seem to be fighting with opening links in system browser - this plugin helps with that.

ember cdv:plugin add cordova-plugin-inappbrowser

Keep plugins up-to-date

If you want to keep your plugins updated easily, you should check out cordova-check-plugins.

npm install -g cordova-check-plugins
cordova-check-plugins --update=auto

Useful ember-cli addons

Below you will find some of the most useful Ember addons for developing mobile apps.

• Ember-cli-sass adds SCSS support
• Autoprefixer takes care of CSS prefixes
• Ember-gestures makes it easy to work with gestures and adds ember-hammertime to remove the 300ms tap delay

Install with the commands below:

ember install ember-cli-sass
ember install ember-cli-autoprefixer
ember install ember-gestures

Further learning

You should consult http://embercordova.com/ if you're having trouble (maybe something changed) and if you're looking for more tips and tricks for building mobile apps with this stack.

Updated: May 15, 2025

TL;DR

• Body Prime Time or Biological Prime Time (BPT) is your daily peak performance window when energy, motivation, and focus are highest
• Track your energy levels for 2-3 weeks to identify patterns and find your BPT
• Use BPT for demanding tasks; reserve low-energy periods for routine work
• BPT is governed by circadian rhythms and ultradian cycles (90-120 minute intervals)
• Research shows aligning work with BPT can boost productivity by 20-40% and reduce errors by 50%
• Modern apps and tools make tracking easier than ever before

Ever since I read Chris Bailey's Productivity Project book, I became fascinated with measuring when people are at their most productive during the day. Know yourself and you can optimize your working days and other activities for peak performance.

You've likely noticed how your energy, motivation, and focus fluctuate throughout the day. Sometimes it's a struggle to get anything done, while other times you effortlessly slip into a state of flow. These peak performance windows are your Body Prime Time (or Biological Prime Time).

The Science Behind Body Prime Time

Body Prime Time isn't just a productivity hack—it's rooted in solid science. The biological prime time method is driven by our body's ultradian rhythms. These rhythms are cycles that repeat numerous times throughout a 24-hour period. We routinely experience peaks when we're highly-focused, as well as dips when we feel sleepy and distracted.

Every 90-120 minutes, your body has a period of significant energy and alertness followed by a period of fatigue. During that burst of energy, you can work with your body to get far more done. These cycles are governed by complex physiological processes involving brain wave activity, hormone release, and the natural ebb and flow of energy levels.

Your Chronotype Matters

Recent research has deepened our understanding of individual differences in biological rhythms. Chronotype refers to an individual's natural tendency to sleep at a specific time, influencing their alertness and productivity throughout the day. It is largely determined by genetics, with variations in chronotype possibly serving as an evolutionary survival mechanism.

Peak performance differs significantly between early and late chronotypes i.e. 'larks' and 'owls' in simple and complex measures of cognitive and physical performance. Understanding your chronotype helps explain why some people are naturally more productive in the morning while others hit their stride later in the day.

The Productivity Benefits Are Real

The benefits of aligning your work with your biological prime time are backed by substantial research:

• Research shows that working during your peak energy hours can significantly boost productivity. In some cases, participants experienced up to a 40% increase in output when performing complex tasks during their designated prime time.
• Aligning tasks with employees' peak times can boost productivity by up to 20% and reduces mistakes by half.
• During peak times, cognitive functions like memory, concentration, and problem-solving are at their best, which makes complex tasks easier to manage.

How to Find Your Body Prime Time

Finding your BPT requires systematic tracking over an extended period. Here's the updated approach:

1. Track for 2-3 Weeks Minimum

The key here is that one day alone won't reveal much about your biological prime time. Your goal is to look for common time chunks throughout a more extended span of time, so aim to track your time or your energy levels (or ideally, both) for at least two or three weeks.

2. Use a Simple Rating System

Consider your energy levels every hour, of every day – depending on how productive, alert, and focused you feel, write any number from 1-10 next to each hour. So, 1 means extremely low levels, and 10 means extremely high levels.

3. Track Multiple Dimensions

Modern approaches suggest tracking not just energy but also:

• Focus levels
• Motivation
• Mood

4. Control for Variables

For accurate results, all three substances disrupt your regular biological patterns. So, unless you give them up for at least the next three weeks, you won't get an accurate reading for your Biological Prime Time. This includes caffeine, alcohol, and nicotine.

Modern Tools for Tracking

While you originally had to build your own app, today there are numerous options available:

Dedicated BPT Apps

• Body Prime Time Finder - Still available for iOS and Android
• Biological Prime Time Tracker - Android app for tracking energy levels
• Best Time - iOS app for tracking biological prime time

Productivity Apps with BPT Features

• Hubstaff to track when you feel most and least energetic
• RescueTime - Automatic productivity tracking
• RISE - Track your energy, learn how to get more energy, and then make the most of your energy with the RISE app

Simple Tracking Methods

• Google Forms, Google Sheets, and an hourly reminder app
• Basic journaling with hourly energy ratings
• Wearable devices that track activity and stress patterns

Maximizing Your Body Prime Time

Once you've identified your BPT, the key is protecting and optimizing it:

Protect Your Prime Time

There's one golden rule you need to apply to your biological prime time: protect it. You need to make every effort to reserve that time for your demanding tasks and the work that requires your full brain power and creative energy.

Strategic Task Allocation

• During BPT: Schedule challenging tasks: Like writing, coding, giving a presentation, or making a sales call
• During Low Energy: Those other periods of your day (when your ultradian rhythm is in a dip rather than a peak) can be used for low-pressure tasks like: checking emails, organizing files, or any other more repetitive tasks

Work in 90-Minute Blocks

Work on your most important task for between 60-90 minutes. Take your cues from your body. When you find your concentration and energy beginning to falter, it's a good sign that you're beginning to hit a low point in an ultradian rhythm.

The Future of Work and Biological Rhythms

The post-pandemic workplace is defined by three pillars: flexibility, technological advancement, and locational ambidexterity. Employers should take into consideration three biological factors that affect the physical and mental health of workers: chronotype, circadian biology, and time of day.

Forward-thinking organizations are already implementing BPT principles. A 2024 report by the World Economic Forum estimated that improved productivity resulting from ultradian-aligned work practices could add up to $1.3 trillion USD to the global economy annually by 2030.

Final Thoughts

Your Body Prime Time isn't set in stone—it can shift based on life circumstances, age, and seasonal changes. Energy is fickle and, much like your life circumstances, your most-focused time could shift. Regular reassessment ensures you're always working with your body's natural rhythms rather than against them.

I just rewrote the apps to a more modern format with some enhancements:

• Apple App Store
• Google Play

With today's wealth of tracking options, there's never been a better time to discover your Body Prime Time and unlock your peak productivity potential.

Remember: Productivity isn't about working more hours—it's about working smarter by aligning your efforts with your body's natural rhythms.

Recently we have been asked to sign NDAs quite a bit. As a result, we had a long discussion about NDAs and here are our views on them.

The problem is that most NDAs are overkill. They do not acknowledge that we have had other clients in the past and will have more in the future. We do not want to get caught in the no-win situation such an NDA puts us in. We do not want to be exposed to a nonperformance or honest-services prosecution.

And to be honest, we do not have the interest or resources to take your ideas and create anything out of them. Most ideas are worthless to us alone. We need your domain experience, contacts and access to funding to execute on them.

More importantly, we would like to consider ourselves respectable and trustworthy guys. It does not take long to ruin one's reputation by blabbing or stealing other people's ideas. This is especially true in today's digital world. All information is available for anyone with a quick Google search.

We have seen nice NDAs too. It is not a problem to sign something that goes like: "We will not share any materials or ideas conveyed by you to us to third parties. We will not steal your ideas, run and execute on them to create a competing service ourselves. At least for the next year or so.”.

But more often than we would like, the NDA is wide. And we cannot sign something that in effect binds us from doing anything similar for the next two years.

For example, during our discussions together we come up with a way to list information about events on a website in a unique way. Then having signed your wide NDA, there would be a threat of getting sued, for doing something similar in another project that is not in any way competing with what you're doing.

That is the reason why we are against signing an NDA in general. Things change of course when you staple a big enough cheque to it.

Setting up your mac for design & development is painful. It takes quite a few steps to get to a happy place where you are productive again. This post is a messy, note-to-self kind of list of what needs to be done to get from a blank Mac to the happy place. It also contains some bonus tips/reminders on useful tricks and commands sprinkled in.

Also, I am pretty damn sure the world needs one more "How I setup my Mac" -post, so here goes. Hopefully, you will find something new! Enjoy.

The article is being updated to reflect the latest discoveries [LAST UPDATED: 13.02.2025].

Update, install Xcode and Homebrew

After the initial Apple setup wizard you should start by checking the app store for updates. It's likely that your "new" mac is a one or two updates behind and it's best to install all those first. Who knows what kind nasty security holes those updates are patching.

Once the updates are in, proceed by heading to the App Store and installing the latest Xcode.

REMEMBER TO RUN Xcode and agree to the license agreement to finish installing it. XCode installs some important extras on the first run, so if you forget to run it you'll be left scratching your head why things do not work.

Then install the command line tools by copy-pasting the following into your terminal:

xcode-select --install

Install Homebrew

Homebrew is the go-to Unix package manager for OS X. Needed to install lots of the stuff in this guide.

Get brew at: http://brew.sh/

Get your terminal right

Below you will find instructions on how to configure ZSH and a lot of nice terminal related goodies.

Switch to iTerm2

You won't look back at the default mac terminal.

Get it at: https://www.iterm2.com/

Oh My Zsh

Switching bash to ZSH is great. Adding Oh My Zsh on top of ZSH is super.

Get it at: http://ohmyz.sh/

And while upgrading the terminal experience, you should drop in these as well:

• https://github.com/romkatv/powerlevel10k
• https://github.com/zsh-users/zsh-syntax-highlighting
• https://github.com/scmbreeze/scm_breeze
• https://github.com/ahmetb/kubectx
• https://github.com/lukechilds/zsh-better-npm-completion

Terminal fonts

You can install some nice terminal nerd fonts using home brew like so:

brew tap homebrew/cask-fonts
brew install font-hack-nerd-font

Terminal AI magic

Install Amazon Q for some AI magic: https://aws.amazon.com/q/

Set up SUDO with TouchID / Apple Watch

Have a long and complex admin password? Worry no more, you can use your fingerprint scanner aka. TouchID instead if your Mac has one. Here's how:

1. Open /etc/pam.d/sudo and add auth sufficient pam_tid.so to the top of the file
2. Change iTerm setting under Preferences > Advanced > Allow sessions to survive after logging out and back in to no
3. Restart iTerm and profit

If you want to authenticate via your Apple Watch, you can do that too by following the instructions in the repository for this open source Apple Watch pam module: https://github.com/biscuitehh/pam-watchid

Install fzf for better command line history

This really improves your life when looking at the history of commands you've used by doing all sorts of magical fuzzy matching. Makes re-running common commands a joy.

https://github.com/junegunn/fzf

Better default tools

Nowadays there are better alternatives to many common Unix commands that we use daily. Here are some of the best ones.

Replace cat with bat, to make your cats look prettier.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Replace ping with pretty ping - again looks prettier.

brew install prettyping

A nicer way to see disk usage by usingn ncdu.

brew install ncdu

A better help by using tldr.

brew install tldr

A better grep that understands .gitignore files.

brew install ag

Broot allows handy viewing of folders in the terminal.

brew install broot

More intuitive and simpler find command https://github.com/sharkdp/fd.

brew install fd

Then add the below to your .zshrc or similar to make it all work (NOTE: You should have fzf installed).

# improve common commands by using modern versions
alias cat='bat'
alias ping='prettyping --nolegend'
alias du="ncdu --color dark -rr -x --exclude .git --exclude node_modules"
alias help='tldr'

# add a nice way to preview files
alias preview="fzf --preview 'bat --color \"always\" {}'"

# add support for ctrl+o to open selected file in VS Code
export FZF_DEFAULT_OPTS="--bind='ctrl-o:execute(code {})+abort'"

Make sure you get git

Setup git committer info

Git requires your info, so it can add your info into the commits you create. Note that the commands below set a global identity on your mac. You can also configure it by the project by omitting the global switch.

git config --global user.email "jussi(at)wingmen.fi"
git config --global user.name "Jussi Kaijalainen"

Add git aliases

Open ~/.gitconfig and add the following lines. This adds some nice colors and two commands (git lol & git lola) to view the log in a nicer way. It also makes git pull command to do a rebase by default.

[alias]
        lol = log --graph --decorate --pretty=oneline --abbrev-commit
        lola = log --graph --decorate --pretty=oneline --abbrev-commit --all
[color]
        branch = auto
        diff = auto
        interactive = auto
        status = auto
[push]
    default = simple
[pull]
    rebase = true

Setup repository specific ssh keys

Git allows you to configure a custom ssh command to be used by the git client. This allows you to easily force your projects to use project specific ssh keys for git operations. Use the below command to set the custom ssh command for git:

git config core.sshCommand "ssh -i ~/.ssh/id_rsa_projectx"

Setup languages and infrastructure

Below you will find instructions on how to install stuff like Node, Python, MongoDB, Redis, Docker etc. running on your mac the right way.

Install kubectl

Everyone has a couple of kubernets clusters running, so we need to install the tool to handle it.

brew install kubectl 

Install Node via BREW & Mise

NVM is done, these days mise is the king of managing versions. So first let's install latest node using Brew.

brew isntall node

Then install mise https://github.com/jdx/mise which supports automatically switching to the correct Node version when you enter a folder that has .nvmrc file or mise.toml file.

Install Python using PYENV

Playing around with all those machine learning frameworks is a headache without PYENV, which enables you to switch your Python version painlessly.

brew install pyenv
pyenv install 3.8.10

Then add the following to your .zshrc:

eval "$(pyenv init --path)"
eval "$(pyenv init -)"

Install Ruby using rbenv

brew install rbenv ruby-build

Install mas-cli

Mas-cli is the Mac App Store command line interface. It allows you to quickly install apps via commandline from the Mac App Store.

brew install mas

Install Android Studio & Java

If you're looking to develop hybrid apps using Cordova you will need to install both the Android Studio & Java and also get all the path variables correctly.

Get Studio at: https://developer.android.com/studio/install.html

Also, you will likely want to activate debugging mode on your Android phone to enable running the app easily.

See instructions: https://developer.android.com/studio/run/device.html

Install Java & Gradle:

brew install java
brew install gradle

Add Java to path in your .profile/.bash_rc/.zshrc:

export JAVA_HOME=$(/usr/libexec/java_home).

Install yarn

Installing yarn when you want to use NVM seems to be a bit tricky. Easiest way to do it is with Brew, but it requires some tricks.

brew edit yarn

Then comment out the depends_on "node" line since you already will have node installed via NVM and do not want to install Node from Brew.

brew install yarn

And tada, we have Yarn installed with Node from NVM.

Install Nodemon

Use Nodemon to run your Node apps. It will reload the app on code changes. Pure developer bliss.

npm install nodemon -g

To use Nodemon, you run your app like this:

nodemon myapp.js

Install Go

brew install go

Install Docker

Get it at: https://docs.docker.com/desktop/install/mac-install/

Dive

A tool for exploring a docker image, layer contents, and discovering ways to shrink the size of your Docker/OCI image.

brew install dive

Install MongoDB

Check latest instructions from https://docs.mongodb.com/manual/tutorial/install-mongodb-on-os-x/.

brew install mongodb-community

Install Nginx

We'll need nginx to setup that complex development environment.

brew install nginx

Instal Redis

Who doesn't have a project that uses Redis for cache or something?

brew install redis

Install watchman

Watchman is a supposedly smart file change watcher written by the people over at Facebook used by live reload helpers.

brew install watchman

Install phantomjs

Phantomjs is a headless WebKit scriptable with a JavaScript API. Often used for running tests.

brew install phantomjs

Various unix libs & tools

To install some of the Unix libraries and tools often needed, copy & paste the following to your terminal and hope for the best.

brew install wget libpng ffmpeg graphicsmagick imagemagick jpeg lame xz
brew install sox --with-lame

Make it look pretty

Getting consistent themes across different apps used to be tough.. but nowadays it's getting better. Let's install Dracula!

Get it at: https://draculatheme.com/

Install the apps

Below you will find a the best app to make your developer life more productive.

Alfred

One app to rule them all. Alfred is used for quickly launching shit and controlling your mac like a boss. I used to use Quicksilver, but Alfred is way better nowadays.

Get it at http://www.alfredapp.com/ and don't be afraid to put down some cash to get the power pack. Worth every penny.

ps. Remember to set up the clipboard history extension. That really is a lifechanger, when you no longer have to jump between files to copy paste and instead you can copy multiple entries and then access them from the clipboard history with handy keyboard shortcuts.

pps. You can sync Alfred settings across multiple machines by having a shared config forlder on Dropbox for example.

Great Alfred workflows

• Convert string to a hashed version: https://github.com/BigLuck/alfred2-hash
• Get current timestamp in milliseconds or seconds:
  http://www.alfredforum.com/topic/1144-get-current-timestamp/
• Url encode / decode strings quickly https://github.com/willfarrell/alfred-encode-decode-workflow
• Run JS in Alfred with node repl: https://github.com/yussdev/alfred-node-repl
• For more see Packal

Choosy

As a web dev you are using many browser. With Choosy you can open links in the correct browser. Set Choosy as the default browser and it let's you pick which browser to open. Or configure complex rules that decide which browser gets used to open a specific link.

Get Choosy at: https://www.choosyosx.com/

CleanShot X

CleanShot X is a better tool of capturing screenshots and screen captures.

Get it at: https://cleanshot.com/

Dash

Most of the documentation you'll ever need accessible with a fast keyboard shortcut.

Get it at: https://kapeli.com/dash

Fantastical

Fantastical lives in the menubar. It lets you take a quick peek at your calendar and whats next. It also boasts handy natural language processing capabilities for easy input of new calendar events. Also it looks pretty.

Get it at: https://flexibits.com/fantastical

FastDMG

Sometimes opening those .dmg files take forever. Switch to FastDMG for an improved experience with .dmg files.

Get it at: https://sveinbjorn.org/fastdmg

Flux

Makes the color of your computer's display adapt to the time of day, warm at night and like sunlight during the day. Similar to OSX Nightshift, but you need Flux when using an external monitor.

Get it at: https://justgetflux.com/

Karabiner-Elements

Customize your keyboard. E.g. make right command + hjkl act as arrows or map capslock to esc.

Get it at: https://github.com/tekezo/Karabiner-Elements

Obsidian

A simple app for writing your thougts down and finding it after wards.

Get it at: https://obsidian.md/

Todoist

I've been trough Things, OmniFocus, Wunderlist and a couple more I've already forgotten. The current favorite is Todoist. They keep improving stuff. Plus my Karma level is Enlightened.

Get it at: https://todoist.com

LittleSnitch

Every self-respecting nerd needs to be able to decide which apps can call home and which can not. It's interesting to see where all those apps are reporting your actions.

Get it at: http://www.obdev.at/products/littlesnitch

Sketch

The "Photoshop killer". For quick user interface design, you rarely need to open Photoshop these days. Sketch does the job faster.

Get it at: http://bohemiancoding.com/sketch/

Transmit

Transmit is the (s)FTP app of choice. Favorites syncing via Dropbox is quite nifty.

Get it at: http://panic.com/transmit/

ps. When you thought you lost that edit to a file, check Transmit temporary files cd ~/Library/Caches/Transmit/.

Keka

Sometimes someone ends up sending you that rare .rar or .7zip package and you really want to find out what's inside. Keka does this for you.

Get it at: https://www.keka.io/en/

Iterm2

The best terminal for OS X. And get the nightly build. Using drag and drop on your terminal to upload files to a remote ssh host is next-level stuff.

Get it at: https://www.iterm2.com/

ImageOptim

Makes your images great again. Removes bloated metadata. Saves disk space & bandwidth by compressing images without losing quality.

Get it at: https://imageoptim.com/mac

Sequel Pro

A nice GUI to peek around MySQL databases.

Get it at: http://www.sequelpro.com/

Keycastr

Keycastr is an open-source keystroke visualizer. It makes it super easy to show your keystrokes in videos.

Get it at: https://github.com/keycastr/keycastr

Rescuetime

It's great to track what you're spending your time on. Understanding how you use your time is a good step towards productivity.

Get it at our referral link: https://www.rescuetime.com/rp/wingmen

Transmission

Some times you need to download those Linux distros you know. That's where Transmission torrent client comes in!

Get it at: http://www.transmissionbt.com/

1Password

Use a safe password and don't need to remember them. They even came out with a nifty team feature, which makes it perfect for sharing passwords with your team.

Get it at: https://1password.com/

Quickres

A little tool to unlock more resolutions for your retina display. Really great when you need more screen space for your laptop.

Get it at: https://www.thnkdev.com/QuickRes/

PoEdit

Nice translations editor for PO files. Especially handy as it can remotely edit WordPress translations.

Get it at: https://poedit.net/

VLC Player

Play all those pesky video files that Quicktime doesn't want to play. You know, the ones that came with the Linux distros you torrented.

Get it at: http://www.videolan.org/vlc/index.html

IINA

The modern video player for macOS. Great experience for playing videos on device with cool features - missing casting to TV.

Get it at: https://github.com/iina/iina

System Color Picker

The macOS color picker as an app with lots of extra features.

Get it at: https://github.com/sindresorhus/System-Color-Picker

Firefox

Firefox is the current browser of choice for most of my browsing.

Get it at: https://www.mozilla.org/en-US/firefox/new/

Firefox extensions

Vim Vixen - Bring vim bindings into Firefox.

uBlock Origin - The best ad blocker for Firefox. Add also the below filters to get rid of all the StackOverflow copies in your search results.

Necessary filters for uBlock: https://github.com/quenhus/uBlock-Origin-dev-filter

uBlack List - Block specific pages from appearing in search results.

Choosy - Open links quickly in other browsers on your system.

Chromium (ungoogled)

Let's face it, if you are developing stuff for the web, you need to the most popular browser available for testing purposes at least.

Get the ungoogled version at: https://github.com/Eloston/ungoogled-chromium

To enable installing extensions from chrome web store on the ungoogled Chromium: https://github.com/NeverDecaf/chromium-web-store

Chromium tweaks

Go to chrome://flags/#allow-insecure-localhost to enable your insecure self signed development certificates.

Start Chromium with open -a "Chromium" --args --auto-open-devtools-for-tabs and you will always have the devtools open. This trick works also for for Google Chrome to open the devtools on every tab open.

Chrome extensions

No browser is perfect out of the box. Let's jazz up that browser a bit.

Ublock Origin - Goodbye adds, trackers and slow pages.

Ember Inspector - Inspect why your Ember app is grumpy.

React Devtools - See what's up with your react apps.

Mortality - Don't get distracted by tempting sites on your new page tab and be reminded you only have so much time left in this life.

Tabagotchi - If Mortality is a bit too much, this is another great and fun new page addon to keep your tabs under control.

uBlacklist - No more results from w3schools, ha!

1Password - Integrate 1Password better with your browser.

Choosy - Make it easy to open a link in another browser quickly.

Mullvad VPN

For privacy and security a VPN is a must. There are many great providers, but few take privacy as seriously as Mullvad. The accounts are totally anonymous. There is no email required that can be used to trace back to you and you can even pay in cash if you want.

Get it at: https://mullvad.net/en/

CheatSheet

CheatSheet is a simple free app that let's you see any applications shortcuts by holding down cmd for a configurable amount of time.

Get it at: https://www.mediaatelier.com/CheatSheet/

Meld

File and folder comparison made easy for Mac/OSX.

Get it at: https://yousseb.github.io/meld/

AltTab

Swanky alternative to cmd + tab that can display thumbnails of of apps. It also allows you to easily select between multiple windows of an app.

Get it at: https://alt-tab-macos.netlify.app/

MediaControl

Controls your external display brightness and volume and shows native OSD. Use menulet sliders or the keyboard, including native Apple keys!

Get it at: https://github.com/MonitorControl/MonitorControl

Finder & Spotlight & other tips

Next, let's configure the finder and spotlight to behave in a saner manner.

Navigate dialog box options using your keyboard

By default, you can't change the selected option on a dialog in, which sucks a lot. It makes no sense to reach for that mouse to just confirm or cancel some action. From the keyboard settings, you can make all controls in dialogs navigable with tab and shift + tab. Here's how:

1. Open System Preferences
2. Open Keyboard settings
3. Enable Keyboard navigation

Hide and show menu bar & dock automatically

This is a life changer for laptop work as it gives you more screen estate to work with. It also gives you superior focus, when all the distractions (red dots on app icons) aren't visible until you actually want to see them.

To hide the menu bar, go to System Preferences -> General and check "Automatically hide and show the menu bar". For added hacker points you can also tick "User dark menu bar and Dock".

To hide the Dock, head to System Preferences -> Dock and check "Automatically hide and show the Dock".

And don't forget to make the hiding and showing nice and snappy by running the following command in the terminal:
defaults write com.apple.dock autohide -bool true && defaults write com.apple.dock autohide-delay -float 0 && defaults write com.apple.dock autohide-time-modifier -float 0 && killall Dock

Reduce transparency & motion

Don't like things being that transparent & flying around? Me neither. Also, this might save your processing power for more important tasks.

Go to System Preferences -> Accessibility -> Display and check "Reduce Motion" and "Reduce Transparency".

Some further tweaks to speed up things are:

Disable application launch animation

defaults write com.apple.dock launchanim -bool false; killall Dock

Disable QuickLook animation

defaults write -g QLPanelAnimationDuration -float 0; killall Dock

Disable Launchpad animation

defaults write com.apple.dock springboard-show-duration -int 0
defaults write com.apple.dock springboard-hide-duration -int 0; killall Dock

Show path for spotlight search files

Somewhere in Lion or Mavericks they decided you don't need to know where the files you search for are residing and stopped showing file paths for search results. That sucks. Lucky you can get a peek at the path by holding down CMD while looking at the results.

Show library folder

Again they hide things from you. Steps to get your precious library folder back:

1. Open your home folder in Finder
2. Press CMD + J
3. Tick "Show Library Folder" in the popup

Show filename extensions

Again hiding stuff. And if you didn't notice, I hate when they hide things. To make filename extensions visible:

1. Open Finder
2. Press CMD + ,
3. Tick "Show all filename extensions" in the popup

Kill Smart Quotes

If you're a programmer and copy-paste snippets of code around, the smart quotes feature is bound to screw you. For example, I store code snippets in Evernote. Whenever pasting in code with quotes, OS X "fixes" them up for me - usually breaking the code.

Luckily it's easy to disable:

1. System Preferences
2. Search for "smart quotes"
3. Uncheck "use smart quotes"
4. PEACE

Cycle open windows with ALT + TAB

By default, it's hard to jump between the different windows of an app. At least on Finnish keyboard as CMD + ` is not easy to reach. Setting ALT + TAB to cycle windows is way more intuitive.

1. Open Preferences
2. Open Keyboard preferences and the Shortcuts tab inside
3. Under Keyboard section on the left change the shortcut for "Move focus to next window" into ALT + TAB

Random tips & tricks

Free port 5000

From Monterey onwards apple enables by default AirPlay receiver, which greedily hogs the port 5000 making many python projects fail with them using port 5000 by default. You'll notice this when you see OSError: [Errno 48] Address already in use. Freeing the port is easy. You can do it by going to Preferences and searching for AirPlay Receiver and unchecking it.

Move windows by clicking anywhere on it

You can move windows by holding down ctrl + cmd and dragging anywhere on the window. Much easier than having to always drag the window from the top.

Enable the feature by typing the below to your terminal and logging out and back in of your current session:

defaults write -g NSWindowShouldDragOnGesture -bool true

Disable with the following:

defaults delete -g NSWindowShouldDragOnGesture  

Open iTerm2 in current finder folder

Create a service using the guide located here and then add a keyboard shortcut like CMD + Shift + I to launch the service. That's a really fast way to get into the terminal in the current folder.

Distraction free Firefox

Keeping email in a pinned tab is handy, but gets disruptive since Firefox shows a activity indicator on the pinned tab when the window title changes. You can get rid of the green dot indicating the activity by creating your own userChrome.css under {firefoxprofile}/chrome/userChrome.css and adding the following CSS markup to the file. You can find your profile folder by going Help > More Troubleshooting Information. You will also likely have to create the chrome folder.

.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]){
  background-image: none !important;
}

You can find the folder location on MacOS under Help -> More Troubleshooting Information.

Quickly open a specific folder in finder

When in finder press CMD + Shift + g to open "Go to folder" prompt which allows you to quickly enter a path to open.

Open Finder from the terminal in the working directory

Type in open . and hit ENTER. This opens the current directory in finder - super handy. You can also open files like this.

Put Caps Lock to better use

When have you last used Caps Lock key? Yep, I know. Lets put it to use and remap it to something useful like ESC. Think about the hundreds of kilometers of pinky movement saved when using Vim.

1. Get Karabiner-Elements and install it
2. In the app Change Caps Lock keycode to 53
3. Now your Caps Lock acts as ESC

Android USB tethering for your Mac

I don't really understand how can you need a separate driver for this, but you can get it here.

Xcode Wireless Debugging — Run builds over WiFi

This is a lifesaver tip. You can run your app builds on your phone even if you forgot that pesky, expensive cable under the table in that fancy coffee you had one too many lattes at.

1. Connect your phone to your mac via the USB and fire up Xcode
2. Press Shift + Command + 2 to open devices manager and select your phone
3. Check the Connect via network checkbox and trash that USB cable you don't need no more
4. Profit

Fix AirPlay connectivity issues

Often AirPlay just stops connecting to the speakers. I've had this happen with pretty much all of my Macs - gone are the days when Apple stuff just worked. But lucky for us, as the same little trick still seems to work and get it fixed.

Open your terminal and type in the following command to reboot the coreaudio service and get things running again:

sudo kill -9 `ps ax|grep 'coreaudio[a-z]' |awk '{print $1}'`

More fine-grained volume control

You can have more fine-grained control over the volume if you hold down ALT and SHIFT when adjusting the volume up or down with the quick keys.

Quickly access program preferences

Just hitting CMD + , opens the preferences in most OSX apps.

Paste rich text as plain

Often you copy text from a web page and drop it to Evernote or Pages and the styles from the web page are preserved. Annoying! But use CMD + SHIFT + v to paste your text. Et voilà, plain text!

Take screenshots like a boss

Hit CMD + Shift + 4 to paint an area which you want for a screenshot. Paint, click and your screenshot will be saved on the desktop.

Take screenrecordings like a boss

Hit CMD + Shift + 5 to be able to select the area of the screen you want to record. To start recording click the Record button in the menu that popped up. To stop the recording hit CMD + CTRL + ESC.

Under the options from the popup menu you can choose some useful stuff like showing mouse clicks as in the video.

Accessing photos on iPhone

Scratch using any third-party apps or even the complex Photos app and use an app called Image Capture that comes with OS X.

Convert .p12 file to .key file

Mac OS X Keychain allows you only to export your private keys as .p12 or .pem files. Sometimes you want to have the .key file. You can use OpenSSL to convert between the formats. Use the command below and give it the import password when it asks.

openssl pkcs12 -in myverysecretprivatekey.p12 -nodes -out mynomoresosecretprivate.key -nocerts

Create a password protected zip

While the context menu allows you to easily zip files on the fly, it does not allow you to password protect that zip file. So when you have some dark secrets to hide and need to send em over in zip, here's how you can do it on the command line.

zip -e -r darksecrets.zip darksecretsdirectory

Terminal to clipboard

In the terminal you can use two commands pbcopy and pbpaste to interact with the system clipboard. They work as you would expect unix programs to work. For example, copying website source to the clipboard is as simple as:

curl "http://stackoverflow.com/" | pbcopy

Killer shortcuts in Finder

Some less known shortcuts that you should be using to make using the finder less painful.

• CMD + Shift + A - Open Applications folder
• CMD + Shift + H - Open Home folder
• CMD + Shift + D - Open Desktop folder
• CMD + Shift + O - Open Documents folder
• CMD + Option + L - Open Downloads folder
• CMD + Shift + L - Open Library folder
• CMD + Shift + . - Toggle Hidden Files
• CMD + [ - Back
• CMD + ] - Forward
• CMD + Up - Up

Sync a local folder with Dropbox

You can use symlinks to sync local folders to dropbox. For example add a symlink for ~/Desktop folder to ~/Dropbox/Desktop to sync your desktop to Dropbox. This is assuming that ~/Dropbox is your Dropbox folder.

ln -s ~/Desktop ~/Dropbox/Desktop

List all lisences in a JavaScript project

Sometimes you work with that annoying Large ACME Inc and they request you to provide all the lisences you are using to run that service for them. And boy are there a bunch of those to find by hand - Yarn can save your bum here.

yarn licenses list

Find open files by process name

Ever needed to figure out what files is a given process touching? This command let's you snoop around.

sudo opensnoop -n ProcessName

Solve random Iterm tab open slowdown

No idea why but clearing some logs helps make iTerm fast again.

sudo rm /private/var/log/asl/*.asl

Supercharge quicklook to preview source files

Install the Syntax Highlight plugin for quicklook from here: https://github.com/sbarex/SourceCodeSyntaxHighlight

The web has been around for a good while. Still many little things are more often wrong than right. We should do better.

Here's a list of little, easily fixable things that greatly affect the user experience.

1. When you have a signup form, don't restrict the complexity of the password. Your system should support long and complex passwords, it makes for a really crappy first experience when users get their crafty passwords rejected by your picky system. Of course within reason, you still need to prevent DDOS by creating crazy long passwords.
2. Kill paginated articles. We know how to scroll. Only reason you would need to paginate content nowadays is to squeeze out more page views. That is pretty damn evil.
3. Create proper links for phone numbers. A tap should make a call, so that there is no need to copy paste or memorize numbers. Selecting that number and then copy pasting it on a smartphone is not that easy.
4. Log in the user after they sign up for your service. Demanding users to input their login info again right after they just gave you the same damn info starts the relationship on a bad note. You just look lazy.
5. Log in the user also when they have just changed their password. No need to force a login again.
6. Don't shoot pop ups at user's face when they're engaging with your content. Ask them later. Popups might get more results, but the people on those lists often just gave their email to get rid of your pop up. They're not a quality audience.
7. And if you really must use a pop up to annoy the crap out of your users, don't make them have to click on a text that says something like "No, I suck and I don't want to be a good person". That drives people away.
8. Remember shopping cart content when people sign up to order on your ecommerce site. Not many things suck as much as having to find all that stuff again.
9. Make your forms remember the content, so when a user accidentally closes the tab or navigates back - all is not lost. Everyone knows the feeling when you go "oops" after 15 min of writing. You can be a real hero here!
10. Save the email address or user name when navigating from the login form to the forgot password form. Why would you want to make your user retype that?

Remember that trust and loyalty is built slowly, one small happy experience at a time.

We tweet about user experience in the web, you can follow us at http://twitter.com/wingmenguys for more. :)

This is our top three lessons learned from web consulting & building digital products in 2015.

TLDR:

1. Consulting: Small client projects require comparatively more effort than larger ones.

2. Products: Building digital products is almost easy - acquiring and keeping users is really, really hard.

3. Sideprojects: Building side projects for recurring income while consulting is hard. You need to seriously plan and prioritize side project work to actually get anything done.

Consulting / Client work

While our little design & coding shed was founded in January 2013, we only started running things full steam in Oct 2014. Like most web agencies, we started by doing websites for clients. We’ve been meaning to switch away from basic site building for some time (ok you got us, it’s been the plan ever since we started Wingmen in the first place), and concentrate on UI/UX work and our own products. Guess you could say that 2015 was a success: we only did four smaller website gigs during the whole year. We had the fortune to work on one big client UI project and several side ventures - not having to worry about new sales all the time.

We’re looking to continue on the same path in 2016. However, One big client issues are obvious: Most eggs are in one basket and you better not lose it. Finding the next big gig to pay the bills can be a pain in the a**! Looking back, for us it still pays off to stay away from small projects since they often require (a lot) more work relatively than bigger ones. Focusing on bigger projects enables us to deliver an epic result for our clients.

This doesn’t mean we don’t love to hear from all new projects, and we still often find it difficult to say no :) In 2016 we're also looking into more structured ways of handling small projects, where we'll be selling small projects as well defined products. Productized consulting can cut the overhead of smaller projects and produce better results for the clients too.

Products / sideprojects

While building several projects & ventures on the side (see http://wingmen.fi/#ventures for more) we learned some tough lessons about launching and marketing digital products. As you may already know it’s not like “Once you build it, they will come”. Nobody actually comes - without real, hard work. We learned our lesson and have started taking more people onboard in our side projects to take care of the marketing. After all 50% of something is more than 100% of nothing. So do not forget marketing, without it your project will be just a dead fish in the sea.

Another takeaway from balancing the work between client project(s) and our own ventures: side projects get always dumped in favour of client work. And even when there is not much real client work going on, own projects get a pass in favour of the latest episode of Something Totally Meaningless on Netflix. You have to start planning and prioritizing your own projects like actual work to make real progress. This is something we’re going to be focusing on in 2016!

Here's a categorized list of our favourite agency and product websites we've saved for inspiration.

Agency sites

Looking at agency sites is especially interesting because that's where the agencies get to do their very own thing. Your vision, your execution - no limits.

http://blacknegative.com/
http://www.doctorjekyll.com/en
http://doamaral.com/
http://focuslabllc.com/
http://www.giantstepsmedias.com/
http://houseofborel.com/
http://paravelinc.com/
http://playgroundinc.com/
http://migueltrias.com/
http://neverbland.com/
https://sfcd.com/
http://truthlabs.com/
http://twofold.com/

Web apps & products

These sites all have something that makes them stand out of the crowd. Great for finding some inspiration for your next project.

https://www.acorns.com/
http://crushpath.com/
http://www.desk.com/
https://do.com/
http://www.getballpark.com/
https://www.getflow.com/
https://evernote.com/
https://knowlium.com/
http://mailchimp.com/
http://www.squarespace.com/
https://squareup.com/
https://stripe.com/
https://stripe.com/atlas

Collections of inspiration

If our picks are not to your tastes, here's a few links to pages that serve you curated pieces inspiration. CAUTION: Some of the sites below might be morally corrupt and take money for posting submissions.

http://inspirationui.com/
http://www.awwwards.com/
http://www.cssmania.com/
http://collectui.com/

Ps. Some of the sites might have been updated since we saved them and become even more cooler. Some times updates go the other way too.

Temple is a simple web app to motivate you to build healthy habits during the working day. You can find it at https://temple.fi.

We're using Temple to keep our work days at the office productive and healthy. The app reminds you to take breaks and reach set goals for the day. Goals can be anything from doing a set amount of push-ups to drinking enough water. We've been using Temple for a few months now and suddenly we both acquired bodies of greek gods. True story.

All jokes aside, your body is your temple and you should treat it like one. Today many of us sit hours on end staring at screens. Some of us do that for very long hours. It's crucial to get up and move periodically - sitting kills you. Taking breaks helps you work more efficiently to boot.

So go ahead and give Temple a spin and see if it could improve your day! Ideas and problems you can send to guys+temple@wingmen.fi.

ps. In addition to using Temple we heartily recommend the combination of a standing desk and a balance board.

A year ago we wrote a short note on one of our side projects: Refindr.

To recap, Refindr is basically a web based map application similar to Craigslist lost and found. Users can leave heart shaped pins on the map and share their story: Who they met & where did this happen. The meeting timestamp can be anything from a specific date to a decade. With (a lot of) luck, someone who knows the event will find the pin and reply.

We launched the site and pretty much left it there. The only places we marketed it was a few sideproject boards. As you can imagine, without marketing we only got barely any traffic and few pins on the map.

Every now and then we've been giving Refindr more thought and we always tell ourselves that the idea & execution is still valid. The project however always gets dumped to the end of the work queue, after all client work. This is not a happy place to be.

One thing we decided to try next is localize Refindr, starting from Finland, with a Finnish name. We'll still be using the same backend with all the map data, but the map will simply be focused on Finland and the app itself will be in Finnish. The global view might simply be too off-putting if you're from a small town in wherever.

This will be a neat thing to try and it'll be interesting to see whether the site will find it's Finnish audience by doing this. Naturally, we'll also have to plan and execute marketing this time.

We'll update what happens later.

More often than one would like, you need to make changes to a live web site. This can be due to working on a small budget or with legacy systems, where there's no separate development environment available. It seems we run into this most often with projects built on PHP based content management systems.

To reduce the chance of things going royally south, it’s good to make the changes in a way that they are only visible if a certain condition is met. There are quite a few ways to achieve this. In this post we have put down our most often used code snippets ready for your copy pasting.

Showing content only when a "secret" url parameter exists ( e.g. site.com?secretparam=1):

<?php

if( $_GET["secretparam"] && $_GET["secretparam"] == '1' ) {
     // Add extra CSS, JS files or do something else
}

Showing content for only certain user in Wordpress:

 <?php
 
 $user = wp_get_current_user();
 if ( is_user_logged_in() && $user->user_login == 'myadminuser' ) {
   // Add extra CSS, JS files or do something else   
 }

Showing a different Wordpress theme for a certain logged in user (drop into plugin folder and activate):

<?php

/*
Plugin Name: Change theme for user
Description: Display different theme to user if logged in as YOURUSER
Author: Wingmen LTD
*/

add_filter('template', 'set_theme');
add_filter('option_template', 'set_theme');
add_filter('option_stylesheet', 'set_theme');
function set_theme($theme) {
    $current_user = wp_get_current_user();
    if ( !($current_user instanceof WP_User) )
    	return $theme;

    if ( $current_user->user_login == 'YOURUSER' ) {
        $theme = 'themev2';
    }
    return $theme;
}

Showing content for only certain user in Drupal template:

<?php

Global $user;
if( $logged_in && $user->name == 'myadminuser' {
	// Add extra CSS, JS files or do something else
}

You can find more quick and dirty tips like this under the tag note-to-self.