DEV Community: Strahinja Babić

Dev.To new UI appreciation post :D

Strahinja Babić — Fri, 19 Jun 2020 06:57:26 +0000

The new Ui Design of the website is awesome :D keep up the good work guys

200+ Design & UI Resources For Developers

Strahinja Babić — Thu, 07 May 2020 18:05:28 +0000

Hey guys, just came across this video of TraversyMedia posting a video about
200+ Design & UI Resources For Developers
I've checked some of the stuff and its really helpful to have in one place.
So I hope that you will take the time to check out His video and the repository

Link to the Video
Link to the repository

Have fun !!!

Create a Screenshot app with Screenshot API and React js

Strahinja Babić — Wed, 29 Apr 2020 20:09:02 +0000

With the current situation going on in the world, the perfect situation came up to start learning React Js.
I've been learning React now for more than a month and as most of the newbies to a new language, I've entered the so-called Tutorial Hell.
To get out of the Tutorial Hell had to push myself and keep trying. In the end, I've done a few projects with Redux, Context API and the Project that I will share with you hoping to give you a kick to try experimenting with API's and learn more😄

About the project that we are making

We will be using the Screenshot Api to create screenshots of websites with the help of the URL that we will paste to the Input field.
Under the input field when we press a button to get a screenshot we will have an image file that will output the result.

Starter files

After setting up our folder with create-react-app, we can delete the icon.svg and the app.css file. In the src folder, we will create a components folder with a file that we will name InputForm.js, in the end, everything should look like this.

Code

Starting out with our components folder and the Input.Js file we will create a simple form with a button and an input file with a name="link" that we will use to target the value of the input and implement it in the API code later this is the following code

Importing The Input and Axios to App.js

Now next step is to import The InputForm and Axios to the App.js file, with that the following code will look like this :

Axios and fetching Screenshot API

Opening the Screenshot Api website and clicking on the Documentation we will get the following list

Next stop is to import the input with the name="link" where we will target the value and import it to the URL from the API, and with that included Axios and the code

Now with console logging the Data that we get when we enter an Url we should target the screenshot as shown in the following picture

Setting up the State and getting the screenshot

Before entering any value, we have to target the screenshot value in data
and to put the state which we will set in the beginning to null
and instead of console log, we will set the state of the screenshot in the following code:

Props and Displaying the screenshot

Next step is to add props to our InputForm which will be equal to our function

And in our Input form, next stop is to add props and the onSubmit event

Now going under the InputForm next stop is to display the Img with an If Else statement where we call if this.state is not an empty value to display the image
which looks like this

The end

With that we finish our project, I've used my profile link on this website,
and it looks like this

I hope you had fun reading this, and if you have remarks or suggestions please let me know as I am eager to learn :D

To check the full styling, you can go to my CodeSandbox page and see the full design of the page and code.

regards

Using FullClip(jquery plug-in) to switch between backgrounds

Strahinja Babić — Sat, 03 Aug 2019 21:04:19 +0000

Recently I've started working more with Jquery and Plug-ins that Jquery has to offer like SuperSlides, EasyPieChart, CountUp.
Trying some of them made me come across one that is pretty handy, and easy to set up, and its call FullClip.

About Full Clip

This simple plugin does only one thing and it does it well - it creates a responsive full-screen body background image by specifying the desired image whether it is a local or remote one. Also, it can create a beautiful background image slideshow by specifying an array of images.
via GitHub

Set up

The set-up for the plugin is quite simple, the first thing we have to do is to download it from the GitHub Repo.
After downloading the files from repo, we will get the following files

The files we need are in the src folder

Copy both files to your root folder and link the fullclip.js to your index file and you're ready to go

<script src="fullclip.js"></script>

Coding with the PlugIn

I will use some simple examples on how to use the PlugIn.
First, we will create in the Html a simple container and a class with the name .fullBackground

<section class="container">
  <div class="fullBackground"></div>
  <h2 class="caption">The future is now</h2>
</section>

Styling

After setting up the Html, we will need some styling in the CSS, you can set up your section or header as you wish, I will use this only as an example.

.fullBackground {
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Jquery Code

In the code, we have set up an array of images that will be used as a slideshow.
We can set up the transition time and the delay of transition between images.
In the end, it is up to you to customize it for your needs 🙂

$('.fullBackground').fullClip({
  images: ['images/house.jpg', 'images/road.jpg', 'images/winter.jpg'],
  transitionTime: 1000,
  wait: 7000
});

To see the full effect of the plugin and how it works, you can download the official Repo from GitHub.
Also, I have a template that I've made with FullClip that you can also download from my GitHub Account😊

Hope that you enjoyed reading this, and if you have more recommendations for a plugIn that you think It's useful, make sure to let me know 😊

Smartphone template placeholder

Strahinja Babić — Sat, 18 May 2019 19:43:09 +0000

Drawing of a smartphone, free template placeholder that you can use for your projects to display how your app would look on a phone.

Building a Rating app with HTML CSS and JS

Strahinja Babić — Tue, 29 Jan 2019 15:24:03 +0000

Lately, I have been working on a Rating app, and in the beginning, I have struggled a bit, luckily the dev community is big so I have gathered some solutions and finished my project. I have decided to build a similar and simple example and share my approach on how to build it.
For my model, I have used some apps that are linked to Google Play and you can check them out anytime.

To start things we need to import the font awesome from cdnjs Cloudflare that we will later use for the Star icons

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

For designing the nav-bar, and the content within it including the list of apps withing the container the following HTML code and CSS code should look like this

<nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Apps</a></li>
            <li><a href="#">Downloads</a></li>
        </ul>
    </nav>
</div>
<!--App list rating design-->
<div class="app-list">
<ul>
        <li>
            <img src="https://i.ibb.co/q1Lcz6b/badlandbrowl.png" alt="appIcon" height="60" width="60">
            <a href="https://play.google.com/store/apps/details?id=com.frogmind.badlandbrawl&hl=en">Badland Browl</a>
            <figcaption><i>Sling your Clones onto the battlefield! Master your timing and...</i></figcaption>
          <div class="rating">
            <span style=" color: #FDE16D;"  class="fa fa-star"></span>
            <span style=" color: #FDE16D;" class="fa fa-star "></span>
            <span style=" color: #FDE16D;" class="fa fa-star "></span>
            <span style=" color: #FDE16D;" class="fa fa-star"></span>
            <span style=" color: #FDE16D;" class="fa fa-star"></span>
        </div>

/*Container of apps and menus*/
.container{
    background: rgb(87, 87, 87);
    width: 80em;
    height: 40em;
    border: 1px solid black;
    margin: 5em auto;
}
 /*Navigation bar and search bar*/
.navbar{
    height: 3.5em;
    background: rgb(59, 59, 59);
}

input[placeholder="search app"]{
    float: right;
    outline: none;
    margin: 1em 1.5em;
    height: 1.5em;
}

a img[alt=menuIcon]{
    margin:0.4em 1em;
}

nav a{
    text-decoration: none;
    font-size: 25px;
    font-family: 'Lato', sans-serif;
    color: rgb(2, 218, 218);
}

And adding the other games on the list, the following code should look something like this:

To customize the animation, and to get the rating effect from one star moving from the left to the right without skipping the color from one star to another we will add the "content: '\2605'" in the code of the star rating in the following CSS code :

  .rating > .fa:hover,
  .rating > .fa:hover  ~ .fa{
    text-shadow: 0 0 9px rgba(238, 255, 0, 0.788);
    color: #FDE16D;
    content: '\2605'; /* Full star in UTF-8 */
    position: relative;
    left: 0;
    }

    .fa.rated::before{
        /* the :hover should come first */
        content: '\2605';
        color: #FDE16D;
        font-size: 40px;
      }

With the following code, we will get the effect

With the implemented effects, one thing left to do is to put a code that will leave the rating and not make it disappear after the mouse is out of the star range. We will use A code with the "for loop" to make the limit of the stars and "if else" statement that when we hover over one or more stars that the color that we click on remains and change it to yellow and when we downgrade it that it comes back to the original color white.
The code will be implemented on the last game which you will be able to rate on the pen that i will put on the bottom.

var count;

function starmark(item){
count=item.id[0];
sessionStorage.starRating = count;
var subid= item.id.substring(1);
for(var i=0;i<5;i++)
{
if(i<count){
document.getElementById((i+1)+subid).style.color="#FDE16D";
}
else{
document.getElementById((i+1)+subid).style.color="white";
  }
 } 
}

With everything done, the final product should look something like this

Thank you for taking the time to check out my article, I truly hope that you were able to learn something, and to enjoy reading it. 🙂

If you wanna learn more about star rating apps and how to make them here are some similar articles and projects that you can check out.

WebSchools Simple Star Rating
Simple Javascript tehnique for Star Ratings
Creating a star based rating app with Vanila JS

Basic HTML DOM explained using a Cassette player as an example

Strahinja Babić — Tue, 12 Jun 2018 21:16:22 +0000

For mid-aged generations and mine included, it is always nice to see the carriers of the music of the previous time. There is always that nostalgia of back in the days when you turned from page A to page B to hear the rest of the music on the tape.
So I have decided to devote this project to those times.

Short HTML DOM definition

With the HTML DOM(Document Object Model) we are making it possible for JavaScript to make changes to CSS, HTML, to add or remove objects, to move objects etc.
And today I will show you what I think is the basic HTML DOM example, and I hope that it will be helpful in any way.

The design and code

For this project, I decided to use a music system with a cassette player, in the HTML code I have put the left speaker right speaker and the main body, and most of it is explained with the comments in the HTML code. The play and pause button are working while the rest of the buttons are for decoration. I have used basic keyboard shapes for the buttons, and yes I could have drawn them with CSS, but because it is a personal project have decided to use shapes from keyboard buttons. And the following HTML code looks like this :

<div class="player-container" style="width:1050px ">
 <!--Left speaker of the music system-->
 <section class="left-speaker">
 <img src="https://preview.ibb.co/bY9thd/0018207_fpr_series_fpr12_02_12_inch_400w_rms_2_shallow_mount_car_audio_subwoofer.png" alt="left-woofer" height="130" width="130">
<img src="https://preview.ibb.co/n6mENd/GTO429_sq_001_1_3000x3000_300dpi_dv_HAMaster.png" alt="left-speaker" height="240" width="240">
     </section>
 <!--The main edit of the music system and its design-->
   <section class="main">
   <div class="left-border"></div>
   <img src="https://orig00.deviantart.net/2c76/f/2013/103/8/f/equalizer_gif_by_harlequinamidst-d61k0al.gif" alt="radio-menu" height="100" width="160" style="margin: 70px -80px; display: none; border: 1px solid black;">
        <img src="https://image.ibb.co/d7YVA8/equalizer_gif_by_harlequinamidst_d61k0al.jpg" alt="beginner-Phase"height="100" width="160" style="margin: 70px -80px; border: 1px solid black;" >
 <div class="outerCircle"><div class="inner-circle"></div></div>   
<div class="volume"><div class="volume-circle"></div></div>
<div class="right-border"></div>
<!--Decoration buttons-->
<div class="buttons">
       <button></button>
       <button></button>
       <button></button>
       <button></button>
             </div>
<!--Positioning the cassete player-->
    <div class="Casette-and-Buttons">
 <img src="https://preview.ibb.co/ghdUxd/compact_cassette_157537_960_720.png" height="85" width="130" alt="tape" style="margin:128px -62px">
 <img src="https://image.ibb.co/nwmv3J/roll_1.png" id="roll" height="15" width="15" style="margin:166px 11px;">
  <img src="https://image.ibb.co/nwmv3J/roll_1.png" id="scndroll" height="15" width="15" style="margin:166px -83px;">
  <img src="https://image.ibb.co/mSYCHd/boombox_wallpaper_HD3.png" alt="boombox_wallpaper_HD3" border="0" height="100" width="160" style="margin:120px 17px; box-shadow: 0px 1px 4px 0px black">
    <div class="tape-buttons">
    <button id="play"onmousedown="music.play()">></button>
     <button> << </button>
     <button> >> </button>
    <button  style="color: red;"> • </button>
    <button onmousedown="music.pause();" id="pause"> ||</button>
     <button style="height: 30px; font-size: 10px;">  ⬛ </button>
     </div>
     </div>

    </section>
   <!--Right speaker of the music system-->
 <section class="right-speaker">
  <img src="https://preview.ibb.co/bY9thd/0018207_fpr_series_fpr12_02_12_inch_400w_rms_2_shallow_mount_car_audio_subwoofer.png" alt="right-woofer" height="130" width="130">
  <img src="https://preview.ibb.co/n6mENd/GTO429_sq_001_1_3000x3000_300dpi_dv_HAMaster.png" alt="right-speaker"  height="240" width="240">
        </section>

            <!--Legs of the system-->
  <div class="legs" style="margin: 0px 10px;"></div>
  <div class="legs"  style="margin: -20px 230px;"></div>
  <div class="legs"  style="margin: 0px 320px;"></div>
  <div class="legs"  style="margin: -20px 680px;"></div>
  <div class="legs"  style="margin: 0px 770px;"></div>
  <div class="legs"  style="margin: -20px 990px;"></div>
    </div>

The styling

With the CSS design of the cassette player, I have included some photo edit for the tape holder and made a hole within the tape so I could include some animation effect when buttons are active that I will show you in the JavaScript code, I won't show you a bigger detail of the CSS, as the main topic is the HTML DOM, you can find more details on the Codepen page whose link I will put as at the end of the page. But first to show you some of the CSS code :

.left-speaker{
    float: left;
    background:rgb(48, 48, 48);
    height: 610px;
    width:300px;
    text-align: center;
    box-shadow: inset 1px 1px 10px 0px rgba(0, 0, 0, 0.548);
}

.main{
    width:440px;
    height: 610px;
    background:rgb(48, 48, 48);
    margin: 0 auto;
    box-shadow: inset 4px 1px 8px 0px rgba(0, 0, 0, 0.555);
   }

.right-speaker{
    float: right;
    background:rgb(48, 48, 48);
    height: 610px;
    width:300px;
    margin:-610px 0;
    text-align: center;
    box-shadow: inset 4px 2px 10px 0px rgba(0, 0, 0, 0.548);
}

After positioning and designing the sides and the middle of the player, it was time to put a further detail into the mainboard, and that is the deco buttons, volume and radio search wheel, and positioning of the equalizer animation. Here a short view on the CSS


.outerCircle{
    background: linear-gradient(rgb(117, 117, 117),rgb(117, 117, 117),white,rgb(117, 117, 117),rgb(117, 117, 117));
    height: 50px;
    width: 50px;
    border-radius: 80px;
    margin: -60px 198px;
    text-align: center;
    box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, 0.658);
    border:1px solid black;
}

.inner-circle{
height:35px;
width: 35px;
border-radius:90px;
border:1px solid black;
margin:5px auto;
box-shadow: 1px 3px 5px 1px black;
background: linear-gradient(rgb(117, 117, 117),rgb(117, 117, 117),white,rgb(117, 117, 117),rgb(117, 117, 117));
}


.volume-circle{
height:50px;
width: 50px;
border-radius:90px;
border:1px solid black;
margin:5.5px auto;
box-shadow: 1px 3px 5px 1px black;
background: linear-gradient(rgb(117, 117, 117),rgb(117, 117, 117),white,rgb(117, 117, 117),rgb(117, 117, 117));
}



button{
    height:8px;
    padding:2px 3px;
    border-radius: 80px;
    box-shadow: 1px 1px 4px 0px black;
    background:linear-gradient(rgb(117, 117, 117),white);
    border:1px solid rgb(117, 117, 117);
    margin: 0px 2px;
     }

After the further design of colors and backgrounds the Music system should look like this :

So finally it is time to use the HTML DOM, with the DOM we will be able to use the animation and import a song.
For importing a song I have used soundjay.com that has lots of free music effects and songs, feel free to check it out, in the code I have shown the main example of importing a sound in JavaScript.
To come back to the topic, I have used the const declaration and selected the elements and ID's that I have put in HTML.
With importing the sound, I have set a playBtn click event and its function that I named playClick. So basically when I click on the play button following event will happen and the CSS changes will occur.

//Setting up the animation to react on the play button
const animation = document.querySelector("#roll");
const scndAnimation = document.querySelector("#scndroll")
const noEqualizer = document.querySelector('img[alt="beginner-Phase"]');
const equalizer = document.querySelector('img[alt="radio-menu"]');
const playBtn = document.querySelector("#play");

//Importing music
//Basic way of importing a song or a music tone
const music = new Audio();
music.src = "https://www.soundjay.com/free-music/sounds/iron-man-01.mp3";

//Triggering the click event 

playBtn.addEventListener("mousedown", playClick);

function playClick(){
    animation.style.animationName = "spin";
    scndAnimation.style.animationName = "spin";
    equalizer.style.display = "inline";
    noEqualizer.style.display = "none";

}


//Setting up the pause button

const pauseBtn = document.querySelector("#pause");

pauseBtn.addEventListener("mousedown", pauseClick);

function pauseClick(){
    animation.style.animationName = "none";
    scndAnimation.style.animationName = "none"
    equalizer.style.display = "none";
    noEqualizer.style.display = "inline";
}

By pressing the pause button pauseClick function will be activated and events and CSS changes will pause when the button is activated, with that we have made the play and the pause button active.
In the end, the finished project looks like this:

NOTE the pen is optimized for desktop and laptop, the screen here is small you can either scroll to the buttons or you can check the full project on CodePen which I highly recommend 🙂

Thank you for taking the time to read this article, I hope sincerely that you enjoyed it, and if you had any troubles understanding DOM, hopefully, this article was able to help you in any way. 🙂

Code habits

Strahinja Babić — Tue, 22 May 2018 13:01:21 +0000

My habits

One of the main silly habits that I have is always putting the name of the font family that I import in CSS under a comment.

@import url('https://fonts.googleapis.com/css?family=Tajawal');
/*font-family: 'Tajawal', sans-serif;*/

Besides CSS, I like to put comments a lot on Javascript code and HTML.

I know that lots of Developers have some habits, so I am curious, what are your Coding Habits?

Creating a 3D Object using an NES cartridge as an example

Strahinja Babić — Tue, 01 May 2018 14:46:24 +0000

For a long time, I have been planning to write an article about something, I was clueless about what to write. Lately, I have seen a couple of posts regarding 3D objects done by Web Developers, so I decided to do a project myself and share my approach on creating a 3D object using an NES Cartridge as an example.
The game cover I have used is Megaman 2, game produced by Capcom in 1988 and is one of the most famous in the franchise.

The HTML set up

In the following HTML, I have set the wrapper id within a div tag and the front class within the section tag which is the part that stands out of the cartridge, with li tags to represent the multiple rectangles within the cartridge as seen in the code.
One main thing I have to work on is giving more creative names for Id'S and classes so bear with me.

  <div id="wrapper">
      <div class="catridge">
    <section class="front">
    <img src="http://www.mobygames.com/images/covers/l/43085-mega-man-2-nes-front-cover.jpg" 
alt="nes cover"
      id="cover-pic" >
<span class="triangle-down"></span>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li id="lastLine"></li>
<!-- small rectangles left to the picture-->
      </ul>
  </section>
</div>
  <!-- front side of the catridge-->
    <div class=leftSide></div>
    <div class="rightSide"></div>
<!-- sides-->
<div class="top"></div>
<div class="bottom"></div>
  <!--Top and bottom-->
<div class="catridgeHoleLeft"></div>
    <div class="catridgeHoleRight"></div>
    <div class="catridgeHoleBackSide"></div>
</div>
</div>
</div>

Additionally, I have put the sides of the Z axis for the left side and right side, also I have added the top and bottom of the cartridge.
With the addition of CSS we will be shaping, adding size and colour to the object in the following code :


#wrapper{
  background:rgb(156, 156, 156);
  width: 30.95em;
  height: 35.7em;
  margin:8% auto 10%auto;
  border-bottom-right-radius:6px;
  border-bottom-left-radius: 6px;
  transform-style:preserve-3d;
  border: solid 1px black;
  }


.front{
  background: rgb(156, 156, 156);
  height: 40em;
  width:26.3em;
  margin:0px 2.15em auto;
  box-shadow: 0px 4px 0px 0px  rgba(0, 0, 0, 0.6);
}


ul{
  width:14%;
  margin:-415px 15px;
  border-right: 1px solid black;
  border-left: 1px solid black;
  text-align: center;
   box-shadow:inset 0 0 3px rgba(0, 0, 0, 0.66);
}

li{
    background:rgb(180, 176, 176);
    height: 1em;
    list-style: none;
    margin:10px 0px 10px -31px;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.76);
    width:5em;
    border-radius: 1.5px;
  }

The shape and set-up at the end turns out like this:

When the shaping of the front page is done, one thing left to do is shaping the sides of the cartridge on the z-Axis.
If you want a more detailed explanation on 3D objecting I highly recommend to check Animating a 3D creeper's head in CSS and JS! by Yann Prono, his article heavily inspired me to try out 3D object creation.

To come back to the topic 🙂

In the following code am sharing my approach to shaping the sides for the Z-Axis

.catridge .leftSide{
  position:absolute;
  height: 35.7em;
  width:3em;
  background-color: rgb(156,156,156);
  margin: -40.05em  -10em;
 border:1px solid;
 transform: rotateY(100deg) translateZ(132px);
}

.catridge .rightSide{
  position:fixed;
  height: 35.6em;
  width:3em;
  background-color: rgb(156,156,156);
  margin: -40.05em  34em;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.44);
  border:1px solid;
transform: rotateY(255deg) translateZ(70px);
  box-shadow: 0px 1px 5px 0px  rgba(0, 0, 0, 0.6);
}

.catridge .top{
  width: 30.9em;
  height: 1em;
  border-top: 200px ;
  border-bottom: 40px solid rgb(156,156,156);
  border-left: 9px solid transparent;
  border-right: 14px solid transparent;
  margin: -40.25em -0.55em;
  position: fixed;
  transform: rotatex(270deg) translateZ(-25px) translateY(13px);
  }

.catridge .bottom{
  width: 31em;
  height: 1em;
  border-top: 200px ;
  border-bottom: 40px solid rgb(156,156,156);
  border-left: 9px solid transparent;
  border-right: 13px solid transparent;
  transform: rotatex(270deg) translateZ(-100px) translateY(20px);
  margin:0 -0.6em;
}

.catridgeHoleRight{
  transform: rotateY(265deg) translateZ(100px) translateY(-5px) translateX(-10px);
  height: 4.2em;
  width: 3em;
  background:rgb(156,156,156);
  margin:3.9em 33.2em;
  border:1px solid;
  box-shadow: 0px 2px 9px 0px  rgba(0, 0, 0, 0.6);
}

.catridgeHoleLeft{
  transform: rotateY(95deg) translateZ(150px);
  height: 4.2em;
  width: 3em;
  background:rgb(156,156,156);
  border:1px solid;
  margin:-7.9em -8.9em;
}

.catridgeHoleBackSide{
  height: 1.1em;
  width:26.58em;
  background-color: rgb(156,156,156);
  transform: translateZ(-40px) rotateY(180deg) translateX(0px);
  margin:-5.5em 2em;
  border:1px solid;
  box-shadow: 0px 2px 8px 2px  rgba(0, 0, 0, 0.6);
}

With following Yann Pronos approach in JavaScript to set the cursor tracking method, I have used the same style with a small edit. And it did work perfectly, just with bigger max angle for the x and y-axis.

const followCursor = (element, options = {}) => {
options = Object.assign({}, {
  maxAngleX: 30,
  maxAngleY: 18,
},

I have decided to use the "em" measure in the first 3D project. The finishing product is set up for the laptops and desktop computers, in some future projects I will put media queries for smaller screens.
This is how the finishing products look like, better check it out full on CodePen🙂

This is the first article that I wrote, I hope you enjoyed it.
By doing more projects am improving every day and am ready to learn new things, write cleaner and better codes, and I hope better Articles 😃.

Again want to give a huge shout-out to Yann for his awesome Article it was a huge inspiration.
A small reminder again to check his awesome Article about 3D object animation
Animating a 3D creeper's head in CSS and JS!