MIT Open CourseWare

I'm spreading a word about new MIT site, which features a lot of new free courses. I just checked computer science courses, and think, I might take some of them. Enjoy!

Bootstrap:how to collapse navbar earlier

I have request to collapse bootstrap's navbar earlier. I use Bootstrape template and need some solution for such humble problem. Stackoverflow.com was very helpful.  Code works very well and it was easy adjusted for my needs. Here's a piece of code I used:

@media (min-width: 768px) and (max-width: 1300px) {
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-collapse.collapse.in {
        display: block !important;
    }
    .navbar-header .collapse, .navbar-toggle {
        display:block !important;
    }
    .navbar-header {
        float:none;
    }
}

It collapse at 1300 px point. You can change for any number you want or need.

About Scrum

Finally I got a book ("Scrum The Art of doing twice the work in half the time" by Jeff Sutherland) from the library. It's fantastically easy to read and follow, it's really good for all of us, who spend hours, days and  months working with software. Moreover, it's the book for bosses, who used take wrong decisions and mismanage projects. It's a book for all people, who wants to work effectively in times, when time and creativity values the most. The book is full of real examples, who can inspire all of us to work better. It's the book for future leaders, who wants to be on a top of companies and society professionally and socially.  I really enjoy reading and can suggest to read.

Freeware for Developers

As a developer. I always search for new and improved tools. Recently I started to receive some notes from one of the best consulting companies such as Intertech. Today they released best freeware tools for developer: 16 Top freeware picks for developers. I will go one by one through all of them to learn them better.

How to test your page for responsiveness?..

My team leader just suggested a very good site to test page for responsiveness. Here it is Responsive design . Definitely, will use in a future.

CSS3 Shadows Generator (Box-Shadow)

Working on my project, I have to create a lot of shadows around boxes. So, I found a nice tool to generate different shadows very quickly. I hope to use this tool more often.

How to imitate bootstrap's tooltip without bootstrap

Working with my next project, I had to come up with an idea to imitate tooltip bootstrap style without bootstrap. So, I did some research and found excellent resource. This example gave the idea how create fully-customized tooltip for my project.  Here's an example how I used the sample:

HTML:

<div id="top-menu-bar-buttons">

                  <div class="button1 icon-location-left"><button class="btn-secondary tooltips" type="button">Cancel<span class="width60">Cancel</span></button></div>

                  <div class="button2 icon-location-left"><button class="btn-secondary tooltips" type="button">Preview<span class="width60">Preview</span></button></div>

                  <div class="button3 icon-location-left"><button class="btn-primary tooltips" type="button"><div id="top-menu-bar-button3-text">Review Job</div><i class="fa fa-chevron-right fa-lg"></i><span class="width75">Review Job</span></button></div>

</div>

CSS:

button.tooltips {

  position: relative;

  display: inline;

}

button.tooltips span {

  position: absolute;

  color: #FFFFFF;

  background: #000000;

  height: 19px;

  line-height: 18px;

  text-align: center;

  visibility: hidden;

  border-radius: 6px;

  font-size: 12px;

  font-weight: normal;

}

button.tooltips span:after {

  content: '';

  position: absolute;

  bottom: 100%;

  left: 50%;

  margin-left: -8px;

  width: 0; height: 0;

  border-bottom: 8px solid #000000;

  border-right: 8px solid transparent;

  border-left: 8px solid transparent;

}

button:hover.tooltips span {

  visibility: visible;

  opacity: 0.8;

  top: 40px;

  bottom: 30px;

  left: 100%;

  margin-left: -76px;

  z-index: 999;

}

.width60 {

    width: 60px;

}

.width75 {

    width: 75px;

}