Linux - Android Studio Update Fix

If you are using Android on Linux and at some point need to update you may come up across an error message of "not enough space on device". 
This is because by default on Linux Mint (and Ubuntu) JVM stores all temporary files in /tmp/ which usually does not have a lot of space allocated (in my case has capacity of 2.5GB). 
To fix this simply follow this guide (all credit Carlos Santos) or read on. 

Keep in mind HOWEVER that if you are updating the SDKs this WILL NOT WORK as SDK Manager simply ignores VM options.

To fix Android Studio update.

1. First of all try restarting your PC as the TMP folder is cleared on every reboot, if that does not help continue.

2. Open Android Studio click "Window" > "Help" > "Edit Custom VM Options"

3. You will probably be asked to create ".vmoptions" document - click yes.

4. Enter this line in the document:

• -Djava.io.tmpdir=/PATH_TO_YOUR_CUSTOM_TMP_FOLDER

5. Close Android Studio

6. Open Android Studio and update normally

There are two ways to fix Android SDK Manager tmp/ location.

1. Create symlink like user3150128 suggests.

2. Add TEMP environment variable pointing to folder of your choice.

Both methods aren't nice - first because it creates symlink which could backfire in the future - e.g. if other software creates fodler with same name and not work at all if SDK Manager creates folder with different name. The second one is bad because it alters the way whole system works - adding environment variable for TEMP folder will make all programs start dumping their temp files in that location. Personally I like the second method as it is easier and quicker to revert.

To create symlink:

1. Create folder in location of choice e.g. "/home/YOUR_NAME/YOUR_TEMP"
2. Open terminal and invoke "cd /tmp/"
3. Create symlink by invoking "ln -s $HOME/tmp/PackageOperation04" - the "PackageOperation04" is the folder SDK Manager created on my system at the time but it may be different for you so check in your TMP folder.


To remove symlink

As described in this answer invoke "unlink $HOME/tmp/PackageOperation04"

To create environment variable for temporary folder

1. Open terminal and invoke "sudo gedit /etc/environment" this will open your environmental variables file.

2. Add line "TEMP=/YOUR_PATH_TO_TMP"

3. It may be necessary to restart Android Studio or your OS for the change to take effect.

To remove temp variable

Open environment file again, remove the line you previously entered, save and restart your PC.

Customize your boot menu with Grub Customizer

Once upon a time I came up aganist really nice tool - Grub Customizer which lets you make various changes to your Grub Boot Menu (add background image, change colours etc.).

To install it simply add PPA:

"sudo add-apt-repository ppa:danielrichter2007/grub-customizer"

Then perform standard update:

"sudo apt-get update"

Finally install:

"sudo apt-get install grub-customizer"

Here is how my boot menu looks:

  

Tested on Mint 18.1 and 17.3, most likely also works on Ubuntu.

Create rotating 3D rectangular prism/box using pure CSS

Want to create cool 3D Box effect? Follow this guide and you will be able to, alternatively you can check this tutorial by David DeSandro out from which I have learned how to create this effect.

Examples

Front - 360 X axis rotation

Left - 360 X axis rotation

Right - 360 X axis rotation

Back - 360 X axis rotation

Top - 360 X axis rotation

Bottom - 360 X axis rotation

Front - 360 Y axis rotation

Left - 360 Y axis rotation

Right - 360 Y axis rotation

Back - 360 Y axis rotation

Top - 360 Y axis rotation

Bottom - 360 Y axis rotation

Front - 360 X and Y axis rotation

Left -360 X and Y axis rotation

Right - 360 X and Y axis rotation

Back - 360 X and Y axis rotation

Top - 360 X and Y axis rotation

Bottom - X and Y axis rotation

jQuery! Front - 360 X axis rotation

jQuery! Left -360 X axis rotation

jQuery! Right - 360 X axis rotation

jQuery! Back - 360 X axis rotation

jQuery! Top - 360 X axis rotation

jQuery! Bottom - X axis rotation

Step 1: HTML structure

The "boxWrapper" is a container which sets up the 3D perspective as you will later see in CSS. 
The "box" is the actual box that will be rotated along with all of its sides. 
You will notice that "left" and "right" sides differ slightly - they have "shortSide" class assigned,  because in this particular example we are actually making rectangular prism and not a box. 
If we were creating the box, all of the sides would make use of the same class.

• <div class="boxWrapper">
•   <div class="box">
•     <div class="front side"></div>
•     <div class="left shortSide"></div>
•     <div class="right shortSide"></div>
•     <div class="back side"></div>
•     <div class="top side"></div>
•     <div class="bottom side"></div>
•   </div>
• </div>

Step 2: CSS

The "boxWrapper" is the container in which we store our box and its sides - it defines the transform perspective for the 3D effect and also the width and height of our box.

• .boxWrapper
• {
•   cursor: pointer;
•   width: 400px;
•   height: 140px;
•   position: relative;
•   perspective: 1000px;
• }

The "box" defines the initial transform (rotation), transform transition and transform style that will give the 3D effect. The "box:active" specifies what happens when box is activated (clicked on) - in this example it is rotated 360 degrees on X axis but you may specify as many degrees as you want and any of the three axes (X,Y,Z).

• .box
• {
•   transition: transform 1s;
•   transform: rotateX(0deg);
•   width: 100%;
•   height: 100%;
•   position: absolute;
•   transform-style: preserve-3d;
• }
• .box:active
• {
•   transform: rotateY(360deg);
• }

All of the sides inside of the box need to be transformed to form a 3D structure - in order to do that transform rotation and translation are used. As you can see sides are rotated according to the place they are in - back is flipped, right and left sides are rotated to the right and left by 90 degrees respectively and top and bottom sides are rotated up and down by 90 degrees respectively. 
Also all of the sides are translated "out" on a Z axis by appropriate values so that they all meet (plus 2px because of the border). It may sometimes be confusing (e.g. because of the content flow) to work out what translation values should be, I find it easiest to simply fiddle with them for a bit until they match.

• .box .front { transform: rotateY(0deg) translateZ(72px); }
• .box .back { transform: rotateX(180deg) translateZ(72px); }
• .box .right { transform: rotateY(90deg) translateZ(332px); }
• .box .left { transform: rotateY(-90deg) translateZ(72px); }
• .box .top { transform: rotateX(90deg) translateZ(72px); }
• .box .bottom { transform: rotateX(-90deg) translateZ(72px); }

In this example there are 4 "front" ones and 2 "side" ones. They only differ in dimensions and you could use single style if you were creating box. 
Rest of the attributes are there for styling purposes such as horizontal and vertical centering of text, background and text colour and removal of margin.
 

• .side
• {
•   width: 400px;
•   height: 140px; 
•   margin: 0;
•   position: absolute;
•   border: 2px solid black;
•   background-color: rgba(30,30,30,0.50);
•   color: white;
•   text-align: center;
•   vertical-align: middle;
• }
• .shortSide
• {
•   width: 140px;
•   height: 140px;
•   position: absolute;
•   border: 2px solid black;
•   background-color: rgba(30,30,30,0.50);
•   color: white;
•   text-align: center;
•   vertical-align: middle;
• }

Step 3: Little bit of jQuery

If you don't mind, you can also add little bit of a jQuery (or vanilla JavaScript if that is your thing) to make your already cool effect absolutely awesome. This implementation also works much better on mobile devices where long press (required by ":active") on a screen often causes text highlighting or browser options to appear.

• function animateAll()
• {
•   //rotate anything with this class
•   $(".jRotatable").click(function()
•   {
•     //we only want to rotate currently clicked box
•     rotateBox(this);
•   }); //click
•   function rotateBox(boxID)
•   {
•     var boxObject = $(pBoxID);
•     var currentRotationX = boxObject.data("rotationX");
•     //lets reset value for good practice
•     if(currentRotation == 360)
•     {
•       boxObject.data("rotationx", 0);
•     }
•     var newRotation = currentRotation + 90;
•     boxObject.data("rotationx", newRotation);
•     boxObject.css({"transform": "rotateX("+newRotation+"deg)"});
•   }
• }