Monthly Archives: March 2016

Quick Tip: The Best Way To Make Sticky Footers

By Danny Markov

flexbox-footers

While developing web layouts, at some point you’ve probably run into this issue:

This obviously broken layout happens when a footer is positioned statically at the end of the body, but the page doesn’t have much content. There is nothing to push the footer down enough and it stays in the middle of screen, leaving a huge area of whitespace below it.

In this quick tutorial we’re going to take a look at a modern technique for building footers that are guaranteed to stick to the bottom of the page at all times.

The Technique

To prevent the above from happening we will be building our page using flexbox, the most advanced tool CSS3 has to offer for building adaptive layouts. For those of you not familiar with the flexbox model and its properties, we will leave a couple of links at the end of the article.

Our simple demo page will have a header, main section, and a footer. Here is the HTML, nothing extraordinary there.

<body>
    <header>...</header>
    <section class="main-content">...</section>
    <footer>...</footer>
</body>

To enable the flex model we add display: flex to the body, and change the direction to column (the default is row, which is a horizontal layout). Also, the html and body will need 100% height to fill up the whole screen.

html{
    height: 100%;
}

body{
    display: flex;
    flex-direction: column;
    height: 100%;
}

Now we need to adjust how much space each section will take up. We’ve done this via the flex property, which bundles together three flex- specs into one:

  • flex-grow – Defines how much of the available free space in the container goes to an element.
  • flex-shrink – How much an element will shrink when there isn’t enough space for everything.
  • flex-basis – The default size for an element.

We want our header and footer to take up just as much space as they need, and everything else to be reserved for the main content section. The CSS for such layout looks like this:

header{
   /* We want the header to have a static height, 
   it will always take up just as much space as it needs.  */
   /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 0 0 auto;
}

.main-content{
   /* By setting flex-grow to 1, the main content will take up 
   all of the remaining space on the page. 
   The other elements have flex-grow: 0 and won't contest the free space. */
   /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 1 0 auto;
}

footer{
   /* Like the header, the footer will have a static height - it shouldn't grow or shrink.  */
   /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 0 0 auto;
}

To see this technique in action, check out our demo page by clicking the image below. Using the big pink button you can change the amount of content to help you observe how the layout adapts and pushes the footer to the bottom at all times.

correct_layout

Conclusion

As you can see flexbox is a powerful ally when building layouts from scratch. All mainstream browsers support it, with a few minor exceptions, so its pretty much safe to use it in all IE9+ projects – Can i use flexbox.

Here are a some awesome lessons and cheatsheats for learning more about the flexbox layout model:

  • A quick guide to flexbox by CSS-Tricks – here.
  • Solved by Flexbox, a website dedicated to cool flexbox techniques – here.
  • 5-minute interactive lesson – here.

We hope you liked our way of creating sticky footers and that you’ve picked up something new and useful from the article. Leave us a comment if you have a cool flexbox trick of your own!

Source:: Tutorialzine.com

Promise-based functions should not throw exceptions

By Axel Rauschmayer

Promise-based functions should only ever reject the Promises they return, they should never throw exceptions.

The reason is that doing so would disrupt Promise-based error handling:

    function asyncFunc() {
        return doSomethingAsync() // (A)
        .then(result => {
            ···
        })
        .catch(error => { // (B)
            ···
        });
    }

If the asynchronous function call in line A throws an exception then the error handler in line B will never be triggered.

Handling exceptions in Promise-based functions

If exceptions are thrown inside the callbacks of then() and catch() then that’s not a problem, because these two methods convert them to rejections.

However, things are different if you start your async function by doing something synchronous:

    function asyncFunc() {
        doSomethingSync(); // (A)
        return doSomethingAsync()
        .then(result => {
            ···
        });
    }

If an exception is thrown in line A then the whole function throws an exception. There are two solutions to this problem.

Solution 1: returning a rejected Promise

You can catch exceptions and return them as rejected Promises:

    function asyncFunc() {
        try {
            doSomethingSync();
            return doSomethingAsync()
            .then(result => {
                ···
            });
        } catch (err) {
            return Promise.reject(err);
        }
    }

Solution 2: executing the sync code inside a callback

You can also start a chain of then() method calls via Promise.resolve() and execute the synchronous code inside a callback:

    function asyncFunc() {
        return Promise.resolve()
        .then(() => {
            doSomethingSync();
            return doSomethingAsync();
        })
        .then(result => {
            ···
        });
    }

TC39 agrees with not mixing exceptions and rejections

Brian Terlson points out that TC39 also thinks that Promise-based functions should never throw exceptions: Originally, if an async function had a default value that threw an exception then the function would throw an exception. Now, the function rejects the Promise it returns.

Further reading

Acknowledgements: this post was inspired by a post by user Mörre Noseshine in the “Exploring ES6” Google Group. Im also thankful for the feedback to a tweet asking whether it is OK to throw exceptions from Promise-based functions.

Source:: 2ality

15 Interesting Frontend Libraries And Plugins For March 2016

By Danny Markov

15-interesting-libraries-tools-march

In this article we’ve gathered for you a collection of 15 awesome JavaScript and CSS libraries. Each one of them presents different solutions to common frontend tasks and can be of great help to both beginner and advanced developers. Check them out, you might find the perfect tool for your next project!


Hamburgers

Hamburgers is a collection of over 20 hamburger menu buttons. All of them have unique well-made animations that are done with pure CSS and are guaranteed to run as smooth as possible. A Sass version is also available for those of you who use pre-processors in your projects.


Loaders

This is a great resource containing a selection of well-designed, CSS-only loaders. Adding them to your website or app is very straightforward and probably the hardest part of doing so is choosing the loader you like most (our favorite is the pacman one).


Grd

Grd, as it’s name suggests, is all about building grid layouts. The library is made with pure CSS, utilizes the flexbox model properties, and offers only the most necessary and useful features. All these factors result in a very small framework – just 512 bytes when Gzipped.


5_superplacehodler

Superplaceholder

With Superplaceholder you can add one or more messages of your choice as placeholders to input fields. The library will then display these messages with a cool animation as if someone is typing them in. Thanks to the rich customization options, you have a great deal of control over how and when the animations will be shown.


10_slick

Slick

Slick is probably the most complex and feature-rich carousel plugin out there. It enables manipulating every imaginable setting but does it in a user friendly way, thanks to it’s well built API.


4_a_frame

A-frame

This futuristic library allows you to create virtual reality experiences using only good ol’ web technologies. After you’ve created your 3D world in HTML, A-frame will take it and split it into two screens with slightly different viewing angles. Now, you can run your demo on your mobile phone using Google Cardboard or another headset and have some serious VR fun.


3_lavalamp

Lavalamp

Infinite scrolling is getting a bad rep from both developers and users – it’s often difficult to implement and frustrating when not done properly. Lavalamp is a JS plugin that offers a great alternative to infinite scrolling. Instead of automatically loading new content, you can add buttons at the top and bottom of the page for loading previous or next items.


6_drift

Drift

Drift is an open-source JavaScript library for adding zoom-on-hover and magnifying glass effects to your website’s images. It has great browser support, no external dependencies, and is relatively easy to implement.


Progress.js

With this library you can add progress bars to any HTML element of your choice, including tricky ones such as input fields, images and video. Every aspect of the bars can be modified either by the library’s options or custom CSS styles.


9_min

Min

In just 995 bytes, Min is one of the world’s most compact CSS frameworks. In its tiny package Min contains a classic 12-column grid, a good number of components and has great browser support.


11_okaynav

OkayNav

This JavaScript and CSS library offers a fresh new take on responsive navigation menus. Instead of creating a bar that is displayed in its entirety on desktop and is collapsed on mobile, OkayNav tries to fit as many nav items as possible in the current browser size.


12_pintsize

Pintsize

A CSS library for building advanced grid layouts. With Pintsize you have the option to create both Bootstrap-like grids and flexbox grids that adapt to the size of the content. The project’s website has a good examples section including browser support and code snippets.


13_velocity

Velocity

Velocity is a JavaScript animation engine that combines the well-known API for jQuery’s animate(), with pure CSS animations to provide fast, reliable, and easy to use transitions. If you find yourself using jQuery only for animating elements, you can seamlessly switch to Velocity for better performance.


2_balloon

Balloon.css

This CSS only library allows developers to add on-hover tooltips to elements on the page without including a single line of JavaScript. By adding data attributes to the HTML you can specify the content to be shown, the direction of the pop-up and other customization options.


15_vivus

Vivus

Small JavaScript library for animating SVGs as if they are being hand drawn. It has many options for animation style and even gives developers the ability to make their own. Vivus is inspired by this awesome Codrops article, it has some breathtaking demos, go check them out!

Source:: Tutorialzine.com

The 15 Best Material Design Frameworks and Libraries

By Danny Markov

material-frameworks-libraries

Material design was developed by Google, with the basic idea to create a unified style for all of the company’s web and mobile apps. It is based on many principles including things like proper animations, responsiveness, and smart usage of colors and shadows. You can read about the guidelines in full detail here.

Although Google’s design language is seen mainly in native Android apps, it’s still a great choice for web and hybrid applications. To aid users in the creation of web projects rocking the Material look, there are many frameworks and libraries offering ready-to-use components and styles. Here is our list of the top 15!


Material Design Lite

Material Design Lite is an official Google framework, so you can always expect the components to be up to date with the latest standards of the visual language. It looks fantastic, is relatively easy to use, and has no external dependencies.


materialzie

Materialize

This is a front-end framework for building responsive web apps and sites. It’s really simple to get started with, especially to people familiar with other similar projects, such as Bootstrap. A cool feature is the SASS version, which allows users to choose which components to include.


material_ui

Materual-UI

Material-UI is a rich set of React components implementing Material Design principles. This is a very polished library featuring pixel-perfect CSS styles and animations. There are also two separate themes for users to choose from – dark and light.


5_mui

MUI CSS

This is one of the most lightweight framework on our list, without any external dependencies and only 12kb gzipped for the CSS and JS. It offers React support, customization via SASS files, and has a separate inline version for styling emails.


6_polymer

Polymer

Polymer is another Google product on our list. It’s a library for building fast, reusable web components which then you can import in your projects. Polymer offers a big selection of ready-to-use elements, organized in seven categories. One of them is called Paper and is full of Material Design components.


7_ionic_material

Ionic Material

This is an extension library for the Ionic hybrid mobile app framework. It adds new classes, methods and helpers alongside a fresh set of CSS styles to bring the Material look to Ionic, without changing the way apps are developed with the framework.


foundation

Material Foundation

The Zurb Foundation framework is another popular tool for building responsive websites and apps. This is an independent set of components that offers a quick way to add a Material twist to some of Foundation’s elements. It looks pretty good but doesn’t include many key Material Design components.


12_surface

Surface

The result of a two-week long experiment, Surface is a CSS only framework in which many of the classic Material UI components are recreated without the help of any JavaScript or other programming languages. Since it consist of just one CSS file, it’s extremely lightweight and easy to use.


13_essence

Essence

Essence is a CSS framework based on React and React Native. It allows developers to build super-fast and at the same time great looking web & mobile interfaces, implementing the Material Design specification. Using npm you can install the whole library, or just the modules you really need.


14_lumx

LumX

This Angular.js-like framework provides many, well-animated CSS and JavaScript components. For the layouts and styles LumX uses the Sass-based library Bourbon, and for the animations the popular Velocity.js. By combining these and some other plugins, LumX is able to offer a wide range of tools for building responsive web apps.


8_paper

Paper Theme for Bootstrap

The guys at Boostwatch make a lot of cool Bootstrap themes, including one imitating Material Design, called Paper. It doesn’t have all of the classic Material components, but it is still a great option for people who already work with Bootstrap, since they don’t have to change absolutely anything (except for importing the theme) to get a modern looking app.


material_for_bootstrap

Material Design for Bootstrap

Another great option for Bootstrap enthusiasts. This is an actively updated theme for the front-end framework, which adds new styles and a number of JavaScript and jQuery plugins to apply Google’s design language to Bootstrap. A big plus here is the active community on GitHub (over 14000 stars).


4_angular_material

Angular Material

AngularJS is a hugely popular open-source framework for web development. It’s primarily maintained by a team in Google, so it’s no surprise it gets is own version of a Material Design kit. For now it works only with Angular 1, but it most probably will get a port for the second version as well.


10_material

Material

You can think of Material as a UI framework that is the perfect mix between Bootstrap and MDL – it works very similarly to Bootstrap (almost the same grid and HTML), but adds on top of that many Material components such as cards and pop-out date pickers. Most of the traditional Material Design elements are present here and are made to look spot on.


15_phonon

Phonon

The Photon framework is dedicated for the development of hybrid mobile apps. Since it’s only around 60kb and does not depend on any third party libraries, it can be used to create Cordova and PhoneGap applications that are very lightweight. The look and feel of Photon’s UI components follow closely Material Design’s concepts.


icons

Bonus: Material Icons

This is the icon set that Google uses in most of their web, Android and iOS apps. There is a huge list of icons to chose from and more are being added all the time. It’s completely free and very easy to implement through Google Fonts or other methods.

Conclusion

Most of the libraries and frameworks on our list offer similar components and overall features. It’s up to every individual developer to decide which one works best for them and their current project. We hope we’ve helped you make the right choice!

Source:: Tutorialzine.com

What You Need To Know About CSS Variables

By Danny Markov

css-variables

When web projects grow bigger, their CSS usually becomes astronomically large and often times messy. To help us deal with this, new CSS variables are soon to hit mainstream browsers, giving devs the ability to reuse and easily edit repeatedly occurring CSS properties.

We’ve shown you how awesome stylesheet variables can be in our Sass and Less lessons, but these are pre-processors and require compiling before use. Now that variables are available in vanilla CSS, you can use them right away in your browser!

Defining And Using CSS Variables

Variables follow the same scope and inheritance rules like any other CSS definition. The easiest way to use them, is to make them globally available, by adding the declarations to the :root pseudo-class, so that all other selectors can inherit it.

:root{
    --awesome-blue: #2196F3;
}

To access the value inside a variable we can use the var(...) syntax. Note that names are case sensitive, so --foo != --FOO.

.some-element{
    background-color: var(--awesome-blue);
}

Support

Right now, only Firefox supports CSS variables out the box. However, versions 49 and up of Google Chrome will also ship with the feature enabled. If you are still on the older version of Chrome 48, you can enable this and some other new technologies by going to chrome://flags/ and finding Enable experimental Web Platform features. You can get more details here – Can I Use CSS Variables.

Below are a couple of examples, showcasing typical usage of CSS variables. To make sure they work properly, try viewing them on one of the browsers we’ve mentioned above.

Example 1 – Theme Colors

Variables in CSS are most useful when we need to apply the same rules over and over again for multiple elements, e.g. the repeating colors in a theme. Instead of copy-and-pasting every time we want to reuse the same color, we can place it in a variable and access it from there.

Now, if our client doesn’t like the shade of blue we’ve chosen, we can alter the styles in just one place (the definition of our variable) to change the colors of the whole theme. Without variables we would have to manually search and replace for every single occurrence.

For this demo to work properly make sure you are using one of these browsers.

(Play with our code editor on Tutorialzine.com)

Example 2 – Human Readable Names For Properties

Another great use of variables is when we want to save a more complex property value, so that we don’t have to remember it. Good examples are CSS rules with multiple parameters, such as box-shadow, transform and font.

By placing the property in a variable we can access it with a semantic, human readable name.

For this demo to work properly make sure you are using one of these browsers.

(Play with our code editor on Tutorialzine.com)

Example 3 – Dynamically Changing Variables

When a custom property is declared multiple times, the standard cascade rules help resolve the conflict and the lowermost definition in the stylesheet overwrites the ones above it.

The example below demonstrates how easy it is to dynamically manipulate properties on user action, while still keeping the code clear and concise.

For this demo to work properly make sure you are using one of these browsers.

(Play with our code editor on Tutorialzine.com)

A Few More Tips

As you can see CSS variables are pretty straightforward to use and it won’t take much time for developers to start applying them everywhere. Here are a few more things we left our of the article, but are still worth mentioning:

  • The var() function has a second parameter, which can be used to supply a fallback value if the custom property fails:
    width: var(--custom-width, 20%);
  • It is possible to nest custom properties:
    --base-color: #f93ce9;
    --background-gradient: linear-gradient(to top, var(--base-color), #444);
  • Variables can be combined with another recent addition to CSS – the calc() function. Sadly, this works only in Firefox for now.
    --container-width: 1000px;
    max-width: calc(var(--container-width) / 2);

This concludes our article! Have fun trying out this new CSS feature but remember that this is still considered an experimental technology. For now, avoid using it in serious projects and aim to always provide fallbacks.

Source:: Tutorialzine.com