Reminder

The time unravels like Abbey Lincolns voice and the shapes of our memories is blurry and unreadable.
It is time for a small recap.

Common problems

File structure

No matter how stupid it sounds, the system traversing is causing a lot of problems to all of you still.
When you point to a file you have to ask precisely. I know the precision is not what we care about in this age and your age. But without it it won’t work no matter what heavy boots you wear or what. The path should be correct.
There are two path types. Absolute & relative path.
The absolute starts with the disk name and has the whole structure from the root to the file like. Like file:///C:/Documents%20and%20Settings/user/lovely_website/index.html
We not gonna use this one. If you see something like this anywhere there is something wrong, not just the system.
The relative on contrary is relative to what is asking. If you have structure like:
my_project/Index.html
my_project/css/style.css
my_project//img/image.jpg

and you wanna point from index.html to your style.css you point it like

<link rel="stylesheet" href="css/style.css">

Don’t just copy&paste this is something that is highly related to your own project..
The advantage of the relative path is that if you move your project anywhere else, it will be always pointing to a right place.
The right file paths are the undies of the project, If they are not done well, the rest of the suit will not fit.

Slash / ? \

Although the Windblows unlike all other mature systems uses back slash \ the web is predominantly based on Unix like systems and they all use normal slash you might see in the address bar /.
And so if you write the address in HTML or the like, the path will have only one slash type in it “the slash” /. And so the first problem is solved by it self.

Names
Avoid spaces and diacritics in names!
“my project ěš” can by safely written like “my_project_es”, “my-project-es”, “myProjectEs”.
This applies to anything, folder, file, picture names what ever.

Editor
What causes lot a problems (I figured today out) is also the Bracket editor some of you use. While you click on the “open in browser” icon it all goes nuts and opens the file based path something sick like: file:///C:/Documents%20and%20Settings/DuckyDoodle/index.html

The Brackets uses absolute file system path we now know is completely wrong and your website won’t work, in some cases.
The proper way is to edit, open project in browser and refresh, do not reopen it again, especially not by the Brackets “open in browser” function. This simple way you will save your self a lot of headache.
Ideally use Sublime which luckily has no such a feature.

Windblows again
Each file has by its nature a suffix. Images mostly jpg, png, tif, etc. files txt, doc, html, and such.
The windlows try to be clever and “conveniently ” hide those extensions for you.
The result is that you are fooled by this “clever” behavior and write path to files without suffix.
Instead of “img/image.jpg” You write “/img/image” such “image’ file naturally doesn’t exists on the system and you’ll never get it. See how to unhide suffixes.

 

CSS

Let me remind you the CSS basics:

<style>
// the name without slash can be any common html tag
body, div, a, b, i, h2{
  padding:0;    
}
// while the name starting with a dot is your own class you have defined your self or is part of the Bootstrap or what have you.
.class{
  padding:4rem 0;
}
// the so called hash is an ID identification you'll barely see and use, but it might be. 
#my_unique_object{
  border:1px solid red;
}
</style>

CSS Transformation

Say you wanna write some fancy transition–animate a object properties such its width or color etc.
Normally you would write:

transition: all 0.5sec;

The problem is that transition is one of the new CSS3 features and some older browsers need prefixes otherwise it won’t work :/
The declaration might look like this:

-webkit-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750); /* webkit liek browsers */
   -moz-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750); /* mozilla like b. */
     -o-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750); /* opera b. */
        transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750); /* "all" browsers */

While such exact declaration might be handy from time to time in general it is exceptionally explicit, tiresome and prone to errors.
Luckily there is a prefix-free javascript that save us hours of labour.

Prefix-free

Now you say “Eh.. another javascript I have to learn.. I hate that”.
Luckily this script needs no knowledge from you. You do not have to learn anything new. You just download it put it in your folder, and point to it within the head and since then everything will look like before, but this time on all browsers the same ;)

Download prefix-free.

And put the link to it in your head:

<html>
  <head>
    <script type='text/javascript' src='js/prefixfree.min.js'></script>
    .....

..and that’s it!

The CSS transformation is not suitable for all tricks as it doesn’t run that smooth as Javascript libraries done for animations but it definitely is very useful.

Here is an example how the transformation might be used:
There are two states defined. One say normal state of the item object and one initial state. The initial state squeezes the objects to a nothingness while the normal state resets the forced zero values back to normal and so the fun begins.

all dandy posts