Grunt-contrib-sass and grunt-sass hang on watch – What is the alternative?

Configuring grunt to compile sass, scss file is quite simple and straightforward. However, as I use the recent version 1.01, the task just hangs without doing any compiling. I’ve tried using grunt-contrib-sass and grunt-sass without any luck.

What’s the solution

I’ve spent hours searching for solution on Google but couldn’t find one. So, I came up with an idea: why do I have to rely on grunt? Using sass directly in the command line is very simple and the task completes quite quickly.

How do I set up?

The setup is very simple, you can write the following code in the command line to compile a sass/scss file to css file.

sass --watch source-file1:destination-file1 source-file2:destination-file2

As you can see, you can pass multiple source:destination pairs

Now, as your source files change, sass will compile to the destination file automatically.

What if I want to compress the destination files?

If you want to minify the destination files, simply put –style compressed option into the command

sass --watch --style compressed source-file1:destination-file1 source-file2:destination-file2

Now, your destination files will be minified.

I want to watch a folder with many files, what should I do?

Honestly, if you watch changes from a folder contains many files, sass may take a long time to compile to .css file. This is why I only watch changes on a few .scss files which import other partials. When I want to compile to .css file, I simply go to that file and add a space.

This strategy will save your computer from compiling sass all the time. On old computer, you may hear the fans’ noise constantly.

[Picture Guide] How To Add MailChimp Optin-Box To Your WordPress Sidebar

With the new version of WordPress, adding HTML to a sidebar widget is easy. In this post, I will show you step by step instructions to put MailChimp form into your sidebar. You can do this with other email marketing services too. The key is to get the HTML code of your form.

The step by step guide

Step 1: Login to your account

First of all, please login to your MailChimp account

Here, I’m in my account dashboard. Now, look at the top menu, you will see a menu item called Lists. Click on that.

Step 2: Select your list

A list is a collection of your subscribers. For example, you are a sleep instructor. Your audience are interested in sleep training. However, instead of putting all the people in one big list, you can split them into multiple lists to make it easier to manage. Here, as you can see I have two lists: Time Management Tips and Software. I select the Time Management Tips list.

Now, notice that at the right side of each list, you will see a dropdown, click on that and select Signup forms.

Step 3: Get the HTML code of your form

Here, you will see the form editor. You can add or subtract the fields if you need to. Then, copy the part under the title Copy/Paste onto your site

Step 4: Go to your Widget area

You may go to this area before. It’s under Appearance->Widgets

Step 5: Add a custom HTML widget to your sidebar

Your theme could have one or more places for you to put the widgets. Those areas called sidebars (though sometimes you will see they appear at the footer). As you can see in my site here, I have one sidebar at the left and 4 areas in the footer.

I’m going to drag and drop a Custom HTML into the sidebar.

Step 6: Put the HTML code of your form into the widget

Now simply paste the HTML code into the Content box. You can give it a title (it will display as a h3 above your form). I don’t put anything this time.

Now click on Save and then Done.

Step 7: See your form

As you can see, the form is now on the left sidebar.