Monthly Archives: May 2015

Freebie: 4 Sweet and Responsive Navigation Menus

By Danny Markov

4-sweet-responsive-navigation-menus

Bringing you more freebies, here are 4 navigation menu templates that you can use in your projects for free. We made these without using any frameworks and in such a way that they won’t cause conflicts with the rest of your content.

The Menus

All of the templates consist of an HTML file and a stylesheet. To integrate them with your projects just copy & paste the HTML where you want it. Then you’ll have to link to the CSS file or copy its contents over to your main stylesheet. Our CSS is self-contained and won’t interfere with the rest of your styling.

There is only so much you can do with pure CSS alone, so to make the navigation menus fully responsive we’ve used a small jQuery plugin called SlickNav, which collapses the menu entries on small screens. For two of the demos, we’ve used font-awesome to add retina-friendly icons, so you will need to include the font-awesome source files in your page (we recommend using a CDN version for better performance).

Colorful Navigation With Icons

Free for Commercial Use

These templates are free to use in you personal or commercial projects. You can check our license page for more info. We hope that you enjoy them!

Source:: Tutorialzine.com

Simplify Your Stylesheets With The Magical CSS Viewport Units

By Danny Markov

simplify-your-life-viewport-units

Viewport units have been around for a few years now but we really haven’t seen them getting used much. They’re now supported by all major browsers (caniuse) and offer unique functionality that can be very helpful in specific situations, especially ones involving responsive design.

Introducing the viewport units

The viewport is the area of your browser where actual content is displayed – in other words your web browser without its toolbars and buttons. The units are vw, vh, vmin and vmax. They all represent a percentage of the browser (viewport) dimensions and scale accordingly on window resize.

Lets say we have a viewport of 1000px (width) by 800px (height):

  • vw – Represents 1% of the viewport’s width. In our case 50vw = 500px.
  • vh – A percentage of the window’s height. 50vh = 400px.
  • vmin – A percentage of the minimum of the two. In our example 50vmin = 400px since we are in landscape mode.
  • vmax – A percentage of the bigger dimension. 50vmax = 500px.

You can use these units anywhere that you can specify a value in pixels, like in width, height, margin, font-size and more. They will be recalculated by the browser on window resize or device rotation.

1. Taking up the full height of the page

Every frontend developer has struggled with this at one point or another. Your first instinct is to do something like this:

#elem{
    height: 100%;
}

However, this won’t work unless we add a height of 100% to the body and html as well, which isn’t very elegant and might break the rest of your design. With vh that’s pretty easy. Just set its height to 100vh and it will always be as tall as your window.

#elem{
    height: 100vh;
}

This is perfect for those full screen hero images that seem to be trendy these days.

Element with full page height.

2. Child size relative to the browser, not the parent

In certain situations, you’d want to size a child element relative to the window, and not its parent. Similarly to the previous example, this won’t work:

#parent{
    width: 400px;
}
#child{ 
    /* This is equal to 100% of the parent width, not the whole page. */ 
    width: 100%; 
}

If we use vw instead our child element will simply overflow it’s parent and take up the full width of the page:

#parent{
    width: 400px;
}
#child{
    /* This is equal to 100% of page, regardless of the parent size. */
    width: 100vw;
}
Scale child with page size

Scale with page instead of parent.

3. Responsive font size

Viewport units can be used on text too! In this example we’ve set the font size be in vw creating awesome text responsiveness in one line of CSS. Goodbye Fittext!

h2.responsive-text{
    font-size: 6vw;
}
h4.responsive-text{
    font-size: 3vw;
}
Responsive text using vw.

Responsive text using vw.

4. Responsive vertical centering

By setting an element’s width, height and margins in viewport units, you can center it without using any other tricks.

Here, this rectangle has a height of 60vh and top and bottom margins of 20vh, which adds up to a 100vh (60 + 2*20) making it always centered, even on window resize.

#rectangle{
    width: 60vw;
    height: 60vh;
    margin: 20vh auto;
}
Responsive Centering

Responsive Centering

5. Equal width columns

You can use the viewport units for making responsive grids. They behave similarly to percentage-based ones, but will always be sized relative to the viewport. So for example you could place them in a parent element that is wider than the window, and still have the grid retain its proper width. This can come handy when building full screen sliders.

This technique requires the elements to have float: left; to align the elements next to each other:

.column-2{
    float: left;
    width: 50vw;
}
.column-4{
    float: left;
    width: 25vw;
}
.column-8{
    float: left;
    width: 12.5vw;
}
Responsive Columns

Responsive Columns

Conclusion

Viewport units have their uses and are worth experimenting with. They are straightforward to understand and can be extremely helpful in certain scenarios, where solutions with alternative CSS techniques will be more difficult or impossible to implement.

Source:: Tutorialzine.com

15 Awesome And Free JavaScript Books

By Danny Markov

15-awesome-free-javascript-books

JavaScript is eating the world! With it we can build web apps, desktop apps, mobile apps, games, robots, backends and more. Lots of software supports JS as an extension language for writing addons or manipulating data.

Even though it has its quirks, JavaScript is here to stay, and now is a good time to learn it! This is why we’ve collected for you our 15 favorite free books that will help you learn and sharpen your skills.

Basics

If you are novice programmer, or if you have never dealt with JavaScript before, these books are for you. You might also want to look at Codecademy’s great JavaScript course to get a bit of a hands on experience.

1. JavaScript For Cats

A great introduction to JavaScript. It shows you how to write code in the browser console and teaches you the basic language constructs. An essential book for teaching your cat (or yourself, if a cat is reading this) how to write JavaScript.

JavaScript For Cats

2. Learn JavaScript

This book is for beginners only as it covers the very basics of JavaScript. Its format is really simple with a short passage on every subject, followed by an example and an exercise. A nice quick resource for becoming acquainted with the language. After finishing this book, we recommend reading through Mozilla’s reintroduction to JavaScript tutorial.

Learn JavaScript

Learn JavaScript

3. Eloquent JavaScript

This is the second edition of the great book which teaches you how to write precise, elegant and practical code. It starts off with the basics of programming but as you go deeper you’ll get into topics like object-oriented JS and higher-order functions. After you’ve learned all that, the book will show you how to build an HTML game and some example apps with Node.js.

Eloquent JavaScript

Eloquent JavaScript

4. JavaScript Garden

A vast collection of examples for the most quirky parts of the language, which are the most likely cause of bugs. This book/guide explains bad practices, issues and other JS gotchas that don’t work as people usually expect them to.

JavaScript Garden

JavaScript Garden

5. JavaScript Allongé

JavaScript Allongé is a book about programming that covers everything from the basics, with values and expressions, to more complex concepts such as types, identity, functions, closures, scopes, and many more subjects up to working with classes and instances. This book is suitable for developers from all skill ranges, as it takes care to explain exactly how things work and what to do when you encounter a problem.

JavaScript Allongé

JavaScript Allongé

Advanced

Knowing how to code is one thing, but knowing how to design software is another. The books listed in this section will teach you how to write beautiful code.

6. Learning JavaScript Design Patterns

An in depth look at both classical and modern design patterns that help us structure our code in the most optimal way. This book is targeted mostly at professional developers as it looks at advanced JS concepts like closures and prototypal inheritance, that require a certain level of basic prior knowledge and understanding of the language.

Learning JavaScript Design Patterns

Learning JavaScript Design Patterns

7. Understanding ECMAScript 6

The JavaScript community is obsessed over the cool new features that we will see in ES6, the next version of the language. This book studies closely the differences between ECMAScript 5 and 6, the new additions and how to make the best use of them. Understanding ECMAScript 6 is aimed at intermediate-to-advanced JavaScript developers.

Understanding ECMAScript 6

Understanding ECMAScript 6

8. Human JavaScript

Code is run by machines, by written by humans. This book covers how to write simple and maintainable code. It discusses routing, views and templates, event handling, configuration, testing and more. If you wish to write modular and bug free code with your team, give this one a read.

Human JavaScript

Human JavaScript

9. Speaking JavaScript

A book targeted at people who are already familiar with other programming languages and want to learn JavaScript. If you know Java, PHP, C++, Python or any other mainstream language, consider this your quick start guide to the wonderful world of JS.

Speaking JavaScript

Speaking JavaScript

10. Programming JavaScript Applications

A book for JavaScript programmers with experience. It’s full of practical design patterns and architecture that will help you write more flexible and reusable code. If you have a large JavaScript code base, there is a good chance you’ll find valuable insight in this book.

Programming JavaScript Applications

Programming JavaScript Applications

11. JavaScript Spessore

JavaScript Spessore is a book focused on a technique for developing JavaScript apps using objects and metaobjects. Only experienced JavaScript devs should approach this book. It builds upon the techniques which were covered in this author’s other book, JavaScript Allongé.

JavaScript Spessore

JavaScript Spessore

Frameworks and libraries

Writing complex applications is difficult, which is why the community has created a growing number of robust frameworks and libraries. Here are a few books that will make developing with frameworks easier.

12. HTML 5 Shoot ‘em Up in an Afternoon

A book that guides readers through the process of making a shoot-em-up game similar to the classic video game 1942 using Phaser. Although this workshop is totally doable with the mighty copy & paste technique, we advise people going into this book to be prepared with some knowledge of JavaScript and basic trigonometry.

HTML 5 Shoot 'em Up in an Afternoon

HTML 5 Shoot ‘em Up in an Afternoon

13. Developing Backbone.js Applications

A great guide for creating JavaScript MVC applications using Backbone.js. Start with the fundamentals, work your way through the exercises, and learn how to build an application that is both cleanly organized and maintainable. This book is targeted at novice to intermediate developers wishing to learn how to better structure their client-side code.

Developing Backbone.js Applications

Developing Backbone.js Applications

14. Your First Meteor Application

A book on Meteor.js, full of practical examples, suitable for beginners. It won’t make you a full-fledged developer by the final page but you will, however, understand the core concepts that will make your future education in Meteor a lot more approachable. Readers should consider acquiring basic JavaScript and database skills before going into this book or Meteor.

Your First Meteor Application

Your First Meteor Application

15. jQuery Trickshots

This is our very own jQuery book! It is full of practical advice and techniques about jQuery. You will learn neat tricks, find out about awesome plugins, and discover how to use (and abuse) our favorite library to your advantage. It is remarkable how much jQuery has done to simplify client-side development.

jQuery Trickshots

jQuery Trickshots

It’s reading time!

We hope that you enjoy our little collection of books. Did we miss your favorite? Tell us in the comment section.

Source:: Tutorialzine.com