Code Chewing

How to remove files and directories in Terminal

Peter J Langley — Sat, 18 May 2013 20:06:25 +0000

It’s ~~too~~ easy to remove a directory or file when using linux commands inside of the terminal.

For removing files, you’d use rm:

rm index.html

To remove a directory in terminal, you need to add -r to the command:

rm -r directory

You can also create conditions to be met for the removal. For example to remove all directories that start with 2013, we’d do this:

rm -r 2013*

And if you need to delete only files with a particular extension, say PHP files, you can use:

rm *.php

How to create multiple incrementing directories in Terminal

Peter J Langley — Sat, 18 May 2013 19:23:35 +0000

Using some linux commands inside Terminal when you need to create many directories that increment by number is easy, such as a directory named after dates, e.g. 2013-01. This technique is very useful and efficient, read on!

Let’s say we need directories 2012-01 to 2013-12. Now this is going to take some time manually through the GUI, so let’s do this via some linux commands inside of the Terminal.

First I’ll cd into my Pictures directory:

cd Pictures

We’ll be using brace expressions to get this done. So we need directories 2012-01 to 2013-12. Here it is:

mkdir {2012..2013}-0{1..9} {2012..2013}-{10..12}

We split the brace expressions into two, as we’re padding out the months that are less than 10 with a leading zero. 10-12 can be left as is. Now let’s check out the result:

ls

And there they all are! This is a very powerful tool you should absolutely take advantage of when you need directory names with appended and/or prepended incremented digits. This is a great time saver with only a bit of linux command knowledge executed from within the terminal.

How to create & reuse a HTML template with Bash

Peter J Langley — Sat, 18 May 2013 18:33:40 +0000

Situation:

You’re a web developer and the pages within the project you’re working on require the same initial HTML or PHP template for every file, and you’re sick and tired of opening up an existing file and clicking the Save As option from there. Maybe you have to delete some content as well before you can even get to your starting point? Pain.

Instead, let’s be smarter and utilise a neat Bash script to do the hard work for us. All it requires is a straight forward Bash script along with some linux commands from within the terminal. Then all you’ve have to do in the future is type this into the terminal and you’ve have a new custom file with the template contents inside of it:

./html_template > new-file-with-template-.html

But before you can do the above, here’s the instructions:

1) First, open your IDE of choice – for me, it’s Sublime Text, and we’re going to create the HTML template in Bash. It’s not scary, honest! Give it a try.

2) Here’s a very basic HTML template for this example, which we’ll type into the IDE (You can go nuts from here, but it’s just a basic example):

#!/bin/bash

# Simple automated HTML template

cat << _EOF_



    HTML Template example







_EOF_

Here’s the screenshot inside of my Sublime Text IDE:

We’ve just wrote a Bash script! Some bits explained:

- #!/bin/bash – This is not a comment, this tells the shell where Bash lives so it can successfully interpret the file.
- As you may have expected, everything inside of cat << _EOF_ and _EOF_ is outputted. It acts as an echo. You can actually name the EOF anything you want, but EOF (End Of File) is the convention.

3) Save this file inside your root website directory and name it html_template.sh

4) Now it’s time for some cool linux commands inside the terminal! Open up terminal and cd into the same website directory as your new Bash script. For me, it’s here:

cd Documents/website

5) Now we’re inside, check your file is there, using the list files with -l command to provide a detailed view:

ls -l

Here you can see our Bash script – html_template.sh. The problem is, the file permissions do not allow for it to be executed; -rw-r--r--. We need -rwx-r-x-r-x for it to executable.

6) Let’s change this using the chmod command, where we pass 755 to get the permissions we require:

chmod 755 html_template.sh

7) Check your file permissions have been updated by running the ls -l command for a detailed view again:

ls -l

As you can see – our file permissions have successfully been updated! Now the script can run! Excellent.

8) It’s time to run the script. We need to trigger the script and pass it a file name that it creates, or overwrites (with the HTML template) upon execution. It’s simple – my new file will be called example.php. So here goes:

./html_template.sh > example.php

Now let’s check example.php has been created:

ls

And there it is! Example.php just got created! And if I open it up in Sublime text:

The new file has adopted our HTML template! Awesome! And that’s how you easily create HTML templates and trigger them with Bash! And if your template ever needs updating, you can just go into the bash script and update it there. Then any new files created via this method will include the updated template.

Lots of credit goes here for this article.

How to open & view a file inside terminal

Peter J Langley — Sat, 18 May 2013 16:49:17 +0000

You can open and view a text file from within the terminal with some simple linux commands to avoid changing windows, or incase you only need a quick preview without any syntax highlighting. To do this, we’ll be using a command called less.

cd into a directory where you wish to preview a file, for me, it’s a JavaScript within here:

cd gallery-image

The file I want to preview inside this directory is called jquery.silkysmooth.1.0.js

So I’ll go ahead and type the folowing:

less jquery.silkysmooth.1.0.js

After which, I’ll get the file contents outputted into the terminal window:

You can scroll through this file and preview it right inside of the terminal!

To exit this view, press q.

How to Curl a webpage in terminal

Peter J Langley — Sat, 18 May 2013 16:31:22 +0000

It’s easy to download a website page straight onto your local hardrive with some simple linux commands inside of the terminal. We’ll be using the Curl command to achieve this.

1) Open up your terminal (or equivalent), and cd into the directory you wish to save the webpage to:

cd Documents/bash

2) Now we can Curl the webpage off the internet and save it in our current directory:

curl -O http://www.codechewing.com/index.php

You’ll receive some confirmation details, telling you how long it took etc. You can now check your directory and find the webpage saved locally! It may look something like this:

Add permanent comments to Sass compressed/minified CSS files

Peter J Langley — Wed, 08 May 2013 16:40:00 +0000

Inside of the Ruby file, config.rb, you can add some compile settings. One of these settings is called output_style, which gives you the option to compress/minify your stylesheet. Now I want to minify my CSS file, so I’ll update the config.rb file to contain the following line:

output_style = :compressed

After restarting the Sass watch and forcing a re-compile, I find my CSS file has been compressed onto one line, great! That’s sorted for production.

But what if I intend to keep a comment block at the top, containing copyright notice, or author accreditation? This output style mode will strip those comments of mine.

To avoid your important comments from being removed, add a comment into your Sass file in the following way, with a leading exclamation mark:

/*! This will not be removed!! @author Codechewing */

Check for an AJAX request with PHP

Peter J Langley — Tue, 07 May 2013 20:01:31 +0000

When you have a script waiting to receive an AJAX request to process, it’s sometimes a good idea to ensure that the request is a genuine AJAX call. This may strengthen the security of your website.

Here’s a function you can use to check if the request was in fact from an AJAX call:

function is_ajax() {

  if( !empty( $_SERVER['HTTP_X_REQUESTED_WITH'] ) &&
  strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
  {
    return true;
  } else {
    return false;
  }

}

If the function returns false, your PHP script could stop execution and do something else with this knowledge in hand. If the AJAX call is recognised then your PHP can get on with it’s normal PHP-like duties with the information from the AJAX request.

Check for CSS transition support in the browser with JavaScript

Peter J Langley — Mon, 29 Apr 2013 13:04:02 +0000

Once you can determine if the browser supports CSS transitions, you can steer away from doing the animation through JavaScript, and instead use the more performance efficient CSS animations. Here’s the simple method of how to detect the CSS transitions:

if( 'WebkitTransition' in document.body.style ||
    'MozTransition' in document.body.style ||
    'OTransition' in document.body.style ||
    'transition' in document.body.style
) {
  // Do some CSS transitioning stuff
}

You can build on this feature detection technique to use CSS animation instead – where it’s supported. You can even establish what prefixes to use if you want to go the extra mile.

Automatically add CSS vendor prefixes in Sublime Text using Emmet

Peter J Langley — Fri, 29 Mar 2013 19:46:26 +0000

If you’re in need of an automatic way to add vendor prefixes to your CSS properties and values (such as -moz-, -webkit- etc.) , and you’re already using Sublime Text 2 with the Emmet plugin, you can generate the prefixes automatically so you don’t have to worry about manually typing them out every time.

All we need to do is type a hyphen before our CSS property then press tab. See below for details:

-text-shadow /* then press tab */

/* Results in this */
-webkit-text-shadow: ;
-moz-text-shadow: ;
-ms-text-shadow: ;
-o-text-shadow: ;
text-shadow: ;

The cursor will automatically be at the end of each line before the semi-colon, where you can enter your desired values.

Be vendor specific

You can also choose the vendor prefixes you wish to support manually, rather than above, which just assumes all vendor prefixes are required.

-wm-text-shadow /* then press tab */

/* Results in this */
-webkit-text-shadow: ;
-moz-text-shadow: ;
text-shadow: ;

Be smart and download Emmet, use shortcuts like this and up your development speed and enjoy less of the boring stuff, like manually adding prefixes. Have fun!

Multiple case conditions for one case inside a switch statement

Peter J Langley — Sun, 24 Mar 2013 21:07:56 +0000

Recently in JavaScript I needed the equivalent to an OR condition inside my switch statement for one of the cases. Without boring you about why I needed this OR condition, I’ll just share my recent snippet with you. It’s easy enough to do:

switch( event.target.id ) {

  case 'meet-me-prev':
  case 'meet-me-prev-arrow':
  {
    GALLERY.slide('prev');
    break;
  }

  case 'meet-me-next':
  case 'meet-me-next-arrow':
  {
    GALLERY.slide('next');
    break;
  }

  default:
    return;

}

As you can see, you just list the case conditions for the one case, and wrap the functionality inside curly braces.