I don't like Git visual tools very much. They always seemed too slow for me and somehow abstracted. So in this episode I wan't to present to you a new visual Git client from the creators of Sublime Text. I kind of like this tool because it's very similar to working with Git in the console, and it's very, very fast.

Please note that I keep referring to the shortcut to command palette in this video as `command+shift+p` but it's actually just `command+p`

In this episode we are going to talk about Sublime Merge for about 8 minutes.

Sublime Merge

Webpack is used to bundle your .js modules into a single file, and you can think of modules as files. 

JavaScript does not natively support file includes like some other languages. So that is where Webpack comes in, it will bundle your files so that almost all browsers can read them.

It also helps us organise our JavaScript app into multiple files. Which we can then import and use them when needed. 

Webpack is also much more than just module bundler, it could also be used as task runner, and some developers are using it exactly like that. Although in this video we are not going to go into detail about Webpacks capabilities,  I will show you an example of how you can compile scss files with Webpack, so that you can get a taste of what Webpack can do.

In this episode we are going to cover basics of Webpack module bundler.

Webpack

Command line is one of the most basic tools for any kind of development, and we are going to be using it through out this series, for all kinds of cool stuff.

In this episode I’m going to cover the basics of the command line, so you are going to learn how to change directory, how to move and copy files, how to change permissions on files and even how to use the mysterious `tar` command.

### Links in this tutorial

* [Setup Bash for Windows](https://goo.gl/NXkyLy)
* [CHMOD Numeric Permissions](https://goo.gl/4mBwK2)

In this episode I will cover the most basic of the tools that is going to be used for any kind of development not just frontend. And that tool is the mighty command line.

Command line

Since I've been getting a lot of questions about Sublime Text theme I'm using or what plugins I'm using I decided to make this video so that whenever someone asks me this I can reffer them to this video. 

Hopefully you will learn about some plugins in this video that you haven't heard before and that will make your development workflow a bit easier.

In this video I'm going to show you my Sublime Text 3 setup.

My Sublime Text 3 Setup

I really like the stuff you get out of the box with Middleman, like LiveReload, JavaScript minification and Sass compilation. But I like Gulp.js more. I think its LiveReload plugin works much faster than what you get with Middleman.

In this episode I will show you how you can setup LiveReload, Sass compilation and image optimisation in Gulp.js to work with Middleman.

We are going to use existing [Olympos](http://watch-learn.com/video-tutorials/using-and-installing-new-olympos-theme/) theme's gulpfile and configure it to be used with Middleman.

In this episode we are going setup our Middleman project so that it works with Gulp.js.

Setting up Gulp.js With Middleman

Partials are snippets of code that you would be using through out the site. One example of partials would be your header and footer. These sections of the site would rarely change. So it's good to keep them in separate files, and just call them on your pages.

This is also good if you want to change your header or footer. By doing it this way you would just change it once and the changes would be visible on all your pages.

In this video you will also learn how to create new pages, and make it so that they use pretty URLs.

In this episode I'm going to show you how to use Middleman partials and how to make new pages.

Middleman Partials and Pages

The theme is optimised to load very quickly and to give you very fast development environment.

It's completely free and you can use it however you want.

It's a developers theme, so if you don't like being bogged down by all unnecessary css and js you can use this.

You can [download it here](https://github.com/ivandoric/olympos).

Olympos is a starter theme for your WordPress projects, it doesn't have any fancy CSS in it but it will get you WordPress development going very, very fast.

Tutorials tagged with: tools

Get in touch