When it came to development, no matter how close we were physically because every team member has his or her own day job and life outside of the project, we decided to operate like a distributed team. This meant everything from messaging to designing to testing and releasing had to be accessible by any team member from any machine. From this single requirement came our collection of tools mentioned in Setup and the following workflow suggestions.
No matter what editor you use it should have some form of a project management system in place:
- Sublime Text uses the
.sublime-project
file to handle projects with the following format learn more here:
![](/assets/Screen Shot 2017-04-28 at 2.15.27 AM.png)
- ...Add other editors here
SublimeText packages and starter config can be found here
For linting in ruby we use rubocop and a default config to use can be found here
You can also have rubocop give you hints within SublimeText via the SublimeLinter package and a config like so:
![](/assets/Screen Shot 2018-04-07 at 5.41.22 PM.png)
Start by install bundler
Then install dependencies by running bundler from the project folder:
bundle
From within the project directory tweak the Rakefile
run:
bundle rake
You can also install you current version of the gem locally and play around with it using
bundle rake build
bundle rake install # or install:local if you don't have a network connection
Also also you can just run the gem's code live in a shell using IRB via the script (usually in) bin/console
like so (from within the gem folder):
./bin/console
To release the module you need to have an account with RubyGems and be added to the email
portion of the .gemspec
file.
Releasing is as easy as:
bundle rake build
bundle rake release
Start by installing npm
Then install yarn
If you're wondering why you need both, check here and ask questions here
Install dependencies like so:
cd project_folder
yarn
For linting we use eslint, our default config can be found here
You can configure eslint to work from SublimeText using the SublimeLinter package and a config within your .sublime-project
file like so:
![](/assets/Screen Shot 2018-04-07 at 5.43.04 PM.png)
We simply define a task in the section of the package.json
:
![](/assets/Screen Shot 2017-04-28 at 2.51.40 AM.png)
Then we can run the task like so:
![](/assets/Screen Shot 2017-04-28 at 2.52.01 AM.png)
For static sites we like using pug (fomerly jade) and stylus. We picked these tools because they simply make writing HTML and CSS easier and still allow plain HTML and CSS to be used if that's your fancy.
Pug also supports the normal things that most templating langauges support like, partials and extension so you can do things like make a basic layout file:
![](/assets/Screen Shot 2017-04-28 at 3.01.47 AM.png)
And extend it to use in each page:
![](/assets/Screen Shot 2017-04-28 at 3.03.42 AM.png)
Stylus works in much the same way for CSS providing variables for css via the $
symbol
![](/assets/Screen Shot 2017-04-28 at 3.06.14 AM.png)
and copy parent selectors using the &
operator:
![](/assets/Screen Shot 2017-04-28 at 3.06.29 AM.png)