Monthly Archives: January 2016

The final feature set of ECMAScript 2016 (ES7)

By Axel Rauschmayer

We always knew that ECMAScript 2016 (ES2016) would be a small release. It turns out that it will be very small. Read on for a list of its features and an explanation why that is not a problem.

The features of ES2016

Any proposals that were at stage 4 on Thursday, 28 January 2016, will be in ES2016 (source: Brian Terlson). That means that ES2016 will contain just two new features (in addition to bug fixes and smaller improvements):

On March 1, a snapshot of the draft of the ECMA-262 specification will be made, to start an editing process that finishes with the ratification of ES2016, probably in June 2016.

The new release process works

ES2016 being so small demonstrates that the new release process works:

  • New features are only included after they are completely ready and after there were at least two implementations that were sufficiently field-tested.
  • Releases happen much more frequently (once a year) and can be more incremental.

If you are disappointed that your favorite stage 3 feature did not make it into ES2016 – don’t worry: With the new release process, it’s more about the stage a proposal is in than what release it is a part of. As soon as a proposal reaches stage 4, it is done and safe to use. You’ll still have to check whether the JavaScript engines that are relevant to you support the feature, but you have to do that with ES6 features, too.

Source:: 2ality

Learn SQL In 20 Minutes

By Danny Markov

learn-sql-20-minutes

Every web developer should know SQL. Although it has been around since the 70s, it is still widely used, and you can’t build a serious application without it. Most full-stack frameworks have libraries for dealing with the SQL complexity – ActiveRecord, Doctrine, Hibernate and more. But often times you need to get your hands dirty and write low-level SQL.

This is why we’ve prepared a short and to-the-point introduction to the basics of SQL. Within the article, you will find our interactive editors for writing and executing your code. Don’t be afraid to experiment with them and try to complete the bonus tasks.

Let’s begin!

1. Create Table

When creating new tables in SQL the CREATE TABLE statement is called. It expects as it’s arguments all the columns we want in the table, as well as the their data types.

Here we are creating a simple table called months. It consists of 3 columns:

  • id – The number of the month in the calendar year (integer).
  • name – Name of the month (string, maximum of 10 characters).
  • days – The number of days in that month (integer).

And this is how the respective SQL looks like:

CREATE TABLE months (id int, name varchar(10), days int);

Also when creating tables, it’s advisable to add a primary key to one of the columns. It will help keep entries unique and will speed up select queries. We won’t be covering them in this lesson but you can read about them here.

2. Insert Rows

Now let’s populate months with a few rows of information. Adding entries to a table is done via the INSERT statement. There are two different ways to use it:

The first way does not specify the column names where the data will be inserted, it only expects the values and leaves it up to the developer to provide all the data in the correct order.

INSERT INTO months VALUES (1,'January',31);

The above is shorter, but there is a major issue – if we add additional columns in the future, the query will break. The preferred way to write this is to include the columns:

INSERT INTO months (id,name,days) VALUES (2,'February',29);

You can try running these commands in the editor below.

Bonus: Write an INSERT statement to add more months to the table.

3. Select

Select queries are our best friend when we want to fetch data from the database. They are used all the time so this lesson is going to spend a lot of time covering them.

The most simple SELECT example would be this query, which will return all the columns and rows from the characters table:

SELECT * FROM "characters"

The asterisk (*) means that we want to grab all of the columns, without excluding anything. Since SQL databases usually consist of more then one table, the FROM keyword is required to specify which table we want to look in.

Sometimes we don’t want all of the columns in a table. SQL allows us to choose and get only the ones we need: instead of putting the asterisk (*), we write the names of the desired columns.

SELECT name, weapon FROM "characters"

Also, in many cases we want the results be sorted in a certain way. In SQL we do this with ORDER BY. It can take an optional modifier – ASC (default) or DESC for sorting direction:

SELECT name, weapon FROM "characters" ORDER BY name DESC

Bonus: Write a query that will SELECT the name, race and hobby columns.

4. Where

You learned how to select only specific columns, but what if only certain rows need to be acquired. To the rescue here comes the WHERE clause, allowing us to filter data depending on a condition.

In this query we select only those entries from the characters table, who use a pistol to fight baddies.

Bonus: Create a SELECT query that fetches the name, race and hobby for those characters who are “Wookiees”.

5. AND / OR

WHERE conditions can be made as specific as you like, with the help of the logical operators (AND,OR) and math-like comparisons (=,,=,).

Here we have a table containing the top 4 most sold albums of all time. Let’s select those of them that are classified as rock and have sold under 50 million copies. This can easily be done by placing the AND operator between the two statements.

Bonus: Try and write an SQL query that returns the albums released after 1975 with sales less than 60 million.

6. In/Between/Like

WHERE statements also support a few special commands, allowing a quick way to check commonly used queries. They are:

  • IN – compares the column to multiple possible values, resolves true if it matches at least one
  • BETWEEN – checks if a value is within a range
  • LIKE – searches for a specific pattern

For example if we want to do a query selecting the pop and soul albums from our table, we can use IN("value1","value2").

SELECT * FROM albums WHERE genre IN ('pop','soul');

If we want to get all the albums released between 1975 and 1985 we would write:

SELECT * FROM albums WHERE released BETWEEN 1975 AND 1985;

Bonus: All of the above operations can be reversed by placing NOT in front of them. Try using NOT BETWEEN to get the albums released before 1975 and after 1985.

7. Functions

SQL is packed with functions that do all sorts of helpful stuff. Here are some of the most regularly used ones:

  • COUNT() – returns the number of rows
  • SUM() – returns the total sum of a numeric column
  • AVG() – returns the average of a set of values
  • MIN() / MAX() – gets the minimum/maximum value from a column

To get the most recent year in our table we can run:

Bonus: Try combining SUM with a WHERE clause and fetch the combined sales of all rock albums.

8. Nested Select

In the previous point we learned how to do simple calculations with data. If we want to actually use the result from these calculations, often times a nested query (also known as sub select) is necessary. Let’s say we want to get the artist, album and release year for the oldest album in the table.

We know how to get these specific columns:

SELECT artist, album, released FROM albums;

We also know how to get the earliest year:

SELECT MIN(released) FROM album;

All that is needed now is to combine the two with the help of WHERE:

Bonus: Modify the above statement to return the album, genre and year for the newest album.

9. Joining Tables

In more complex databases, most of the time there are several tables connected to each other in some way. For example, below in the editor are two tables about video games and video game developers.

In the video_games table there is a developer column, but it holds an integer instead of the name of the developer. This number represents the id of the respective developer from the game_developers table, linking logically the two sheets, allowing us to use the information stored in both of them at the same time.

If we want to create a query that returns everything we need to know about the games, we can use INNER JOIN to acquire the columns from both tables.

This is the simplest and most common type of JOIN. There are a couple of other options, but they are applicable to less frequent scenarios. Chart of SQL Joins

10. Aliases

If you look at the previous example you’ll notice that there are two columns called name. That’s confusing, so let’s change it by setting an alias to one of the repeating columns: name from game_developers will appear as developer.

We can also shorten the query drastically by setting aliases to the table names: video_games becomes games and game_developers becomes devs.

11. Update

Often times we have to change the data in some of the rows. In SQL this is done via the UPDATE statement.

The usage of UPDATE consists of

  • Choosing the table where the record we want to change is located.
  • Setting new value(s) for the wanted column(s).
  • Selecting with WHERE which of the rows we want to update. If this is omitted all rows in the table will change.

Here is a table of some of the highest rated TV series of all time. There is one tiny problem about it though, the show Game of Thrones is described as comedy, which it clearly isn’t. Let’s fix that!

Bonus: Let’s say that Breaking Bad is renewed for a new season. Write an SQL statement changing the still_running column to yes.

12. Delete Rows

Deleting a table row through SQL is a really simple process. All that is needed is to select the right table and row we want to remove.

Important: Always be cautions when writing a DELETE statement and make sure there is a WHERE clause attached. Without it all table rows will be deleted!

13. Deleting Tables

If we want to delete all the column and all the rows, but leave the table itself, the proper command is TRUNCATE:

TRUNCATE TABLE table_name;

In the case when we actually want to remove every trace of the table whatsoever, the DROP command comes into play:

DROP TABLE table_name;

Conclusion

This wraps up our tutorial on SQL! There is a lot more to cover, but the above should be enough to give you a few practical skills in your web dev career.

For more information on SQL check out these great resources:

  • Codeacademy SQL course – here
  • SQL Fiddle: online tool for testing and sharing SQL – here

Source:: Tutorialzine.com

ES.next News: a weekly email newsletter

By Axel Rauschmayer

Today, Johannes Weber and I are launching a new weekly email newsletter: ES.next News.

The concept is simple: you get 5 links related to ECMAScript 6/2015+ per week, via email. Subscribe now, it’s free:

We see ES.next News as complementary to JavaScript Weekly (which we recommend, but are not affiliated with). The former is more focused, the latter is more comprehensive.

Happy reading!

Source:: 2ality

Learn Sass In 15 Minutes

By Danny Markov

learn-sass-in-15-minutes

If you write copious amounts of CSS, a pre-processor can greatly decrease your stress levels and save you a lot of precious time. Using tools such as Sass, Less, Stylus or PostCSS makes large and complicated stylesheets clearer to understand and easier to maintain. Thanks to features like variables, functions and mixins the code becomes more organized, allowing developers to work quicker and make less mistakes.

We’ve worked with pre-processors before as you may remember from our article about Less. This time we are going to explain Sass and show you some of it’s main features.

1. Getting Started

Sass files cannot be interpreted by the browser, so they need compiling to standard CSS before they are ready to hit the web. That’s why you need some sort of tool to help you translate .scss files into .css. Here you have a couple of options:

  • The simplest solution is a browser tool for writing and compiling Sass right on the spot – SassMeister.
  • Use a 3rd party desktop app. Both free and paid versions are available. You can go here to find out more.
  • If you are a CLI person like we are, you can install Sass on your computer and compile files manually.

If you decide to go with the command line, you can install Sass in it’s original form (written in ruby) or you can try the Node.js port (our choice). There are many other wrappers as well, but since we love Node.js we are going to go with that.

Here is how you can compile .scss files using the node CLI:

node-sass input.scss output.css

Also, here is the time to mention that Sass offers two distinct syntaxes – Sass and SCSS. They both do the same things, just are written in different ways. SCSS is the newer one and is generally considered better, so we are going to go with that. If you want more information on the difference between the two, check out this great article.

2. Variables

Variables in Sass work in a similar fashion to the those in any programming language, including principals such as data types and scope. When defining a variable we store inside it a certain value, which usually is something that will often reoccur in the CSS like a palette color, a font stack or the whole specs for a cool box-shadow.

Below you can see a simple example. Switch between the tabs to see the SCSS code and it’s CSS translation.

$title-font: normal 24px/1.5 'Open Sans', sans-serif;
$cool-red: #F44336;
$box-shadow-bottom-only: 0 2px 1px 0 rgba(0, 0, 0, 0.2);

h1.title {
  font: $title-font;
  color: $cool-red;
}

div.container {
  color: $cool-red;
  background: #fff;
  width: 100%;
  box-shadow: $box-shadow-bottom-only;
}
h1.title {
  font: normal 24px/1.5 "Open Sans", sans-serif;
  color: #F44336; 
}

div.container {
  color: #F44336;
  background: #fff;
  width: 100%;
  box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
}

The idea behind all this is that we can later on reuse the same values more quickly, or if a change is needed, we can provide the new value in just one place (the definition of the variable), instead of applying it manually everywhere we’re using that property.

3. Mixins

You can think of mixins as a simplified version of constructor classes in programming languages – you can grab a whole group of CSS declarations and re-use it wherever you want to give and element a specific set of styles.

Mixins can even accept arguments with the option to set default values. In the below example we define a square mixin, and then use it to create squares of varying sizes and colors.

@mixin square($size, $color) {
  width: $size;
  height: $size;
  background-color: $color;
}

.small-blue-square {
  @include square(20px, rgb(0,0,255));
}

.big-red-square {
  @include square(300px, rgb(255,0,0));
}
.small-blue-square {
  width: 20px;
  height: 20px;
  background-color: blue; 
}

.big-red-square {
  width: 300px;
  height: 300px;
  background-color: red;
}

Another efficient way to use mixins is when a property requires prefixes to work in all browsers.

@mixin transform-tilt() {
  $tilt: rotate(15deg);

  -webkit-transform: $tilt; /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
      -ms-transform: $tilt; /* IE 9 */
          transform: $tilt; /* IE 10, Fx 16+, Op 12.1+ */
}

.frame:hover { 
  @include transform-tilt; 
}
.frame:hover {
  -webkit-transform: rotate(15deg);  /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
  -ms-transform: rotate(15deg);  /* IE 9 */
  transform: rotate(15deg);  /* IE 10, Fx 16+, Op 12.1+ */ 
}

4. Extend

The next feature we will look at is @extend, which allows you to inherit the CSS properties of one selector to another. This works similarly to the mixins system, but is preferred when we want to create a logical connection between the elements on a page.

Extending should be used when we need similarly styled elements, which still differ in some detail. For example, let’s make two dialog buttons – one for agreeing and one for canceling the dialog.

.dialog-button {
  box-sizing: border-box;
  color: #ffffff;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  padding: 12px 40px;
  cursor: pointer;
}

.confirm {
  @extend .dialog-button;
  background-color: #87bae1;
  float: left;
}

.cancel {
  @extend .dialog-button;
  background-color: #e4749e;
  float: right;
}
.dialog-button, .confirm, .cancel {
  box-sizing: border-box;
  color: #ffffff;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  padding: 12px 40px;
  cursor: pointer; 
}

.confirm {
  background-color: #87bae1;
  float: left; 
}

.cancel {
  background-color: #e4749e;
  float: right; 
}

If you check out the CSS version of the code, you will see that Sass combined the selectors instead of repeating the same declarations over and over, saving us precious memory.

5. Nesting

HTML follows a strict nesting structure whereas in CSS it’s usually total chaos. With Sass nesting you can organize your stylesheet in a way that resembles the HTML more closely, thus reducing the chance of CSS conflicts.

For a quick example, lets style a list containing a number of links:

ul {
  list-style: none;

  li {
    padding: 15px;
    display: inline-block;

    a {
      text-decoration: none;
      font-size: 16px;
      color: #444;
    }

  }

}
ul {
  list-style: none; 
}

ul li {
  padding: 15px;
  display: inline-block; 
}

ul li a {
  text-decoration: none;
  font-size: 16px;
  color: #444; 
}

Very neat and conflict proof.

6.Operations

With Sass you can do basic mathematical operation right in the stylesheet and it is as simple as applying the appropriate arithmetic symbol.

$width: 800px;

.container { 
  width: $width;
}

.column-half {
  width: $width / 2;
}

.column-fifth {
  width: $width / 5;
}
.container {
  width: 800px; 
}

.column-half {
  width: 400px; 
}

.column-fifth {
  width: 160px; 
}

Although vanilla CSS now also offers this feature in the form of calc(), the Sass alternative is quicker to write, has the modulo % operation, and can be applied to a wider range of data-types (e.g. colors and strings).

7. Functions

Sass offers a long list of built-in functions. They serve all kinds of purposes including string manipulation, color related operations, and some handy math methods such as random() and round().

To exhibit one of the more simple Sass functions, we will create a quick snippet that utilizes darken($color, $amount) to make an on-hover effect.

$awesome-blue: #2196F3;

a {
  padding: 10 15px;
  background-color: $awesome-blue;
}

a:hover {
  background-color: darken($awesome-blue,10%);
}
a {
  padding: 10 15px;
  background-color: #2196F3; 
}

a:hover {
  background-color: #0c7cd5; 
}

Except the huge list of available functions, there is also the options to define your own. Sass supports flow control as well, so if you want to, you can create quite complex behaviors.

Conclusion

Some of the above features are coming to standard CSS in the future, but they are not quite here yet. In the meantime, pre-processors are a great way improve the CSS writing experience and Sass is a solid option when choosing one.

We only covered the surface here, but there is a lot more to Sass than this. If you want to get more familiar with everything it has to offer, follow these links:

Source:: Tutorialzine.com

Enumify: better enums for JavaScript

By Axel Rauschmayer

In this blog post, I present enumify, a library for implementing enums in JavaScript. The approach it takes is inspired by Java’s enums.

Enum patterns

The following is a naive enum pattern for JavaScript:

    const Color = {
        RED: 0,
        GREEN: 1,
        BLUE: 2,
    }

This implementation has several problems:

  1. Logging: If you log an enum value such as Color.RED, you don’t see its name.
  2. Type safety: Enum values are not unique, they can be mixed up with other values.
  3. Membership check: You can’t easily check whether a given value is an element of Color.

We can fix problem #1 by using strings instead of numbers as enum values:

    const Color = {
        RED: 'RED',
        GREEN: 'GREEN',
        BLUE: 'BLUE',
    }

We additionally get type safety if we use symbols as enum values:

    const Color = {
        RED: Symbol('RED'),
        GREEN: Symbol('GREEN'),
        BLUE: Symbol('BLUE'),
    }
    console.log(String(Color.RED));
        // Symbol(RED)

One problem with symbols is that you need to convert them to strings explicitly, you can’t coerce them (e.g. via + or inside template literals):

    console.log('Color: '+Color.RED)
        // TypeError: Cannot convert a Symbol value to a string

We still don’t have a simple membership test. Using a custom class for enums gives us that. Additionally, everything becomes more customizable:

    class Color {
        constructor(name) {
            this.name = name;
        }
        toString() {
            return `Color.${this.name}`;
        }
    }
    Color.RED = new Color('RED');
    Color.GREEN = new Color('GREEN');
    Color.BLUE = new Color('BLUE');
    
    console.log(Color.RED); // Color.RED
    
    // Membership test:
    console.log(Color.GREEN instanceof Color); // true

However, this solution is slightly verbose. Let’s use a library to fix that.

The library enumify

The library enumify lets you turn classes into enums. It is available on GitHub and npm. This is how you would implement the running example via it:

    class Color extends Enum {}
    Color.initEnum(['RED', 'GREEN', 'BLUE']);
    
    console.log(Color.RED); // Color.RED
    console.log(Color.GREEN instanceof Color); // true

The enum is set up via initEnum(), a static method that Color inherits from Enum.

The library “closes” the class Color: After Color.initEnum(), you can’t create any new instances:

    > new Color()
    Error: Enum classes can't be instantiated

Properties of enum classes

enumValues

Enums get a static property enumValues, which contains an Array with all enum values:

    for (const c of Color.enumValues) {
        console.log(c);
    }
    // Output:
    // Color.RED
    // Color.GREEN
    // Color.BLUE

The values are listed in the order in which they were added to the enum class. As explained later, you can also call initEnum() with an object (vs. an Array). Even then, enumValues has the expected structure, because objects record the order in which properties are added to them.

enumValueOf()

The inherited tool method enumValueOf() maps names to values:

    > Color.enumValueOf('RED') === Color.RED
    true

This method is useful for parsing enum values (e.g. if you want to retrieve them from JSON data).

Properties of enum values

Enumify adds two properties to every enum value:

  • name: the name of the enum value.

        > Color.BLUE.name
        'BLUE'
    
  • ordinal: the position of the enum value within the Array enumValues.

        > Color.BLUE.ordinal
        2
    

Advanced features

Custom properties for enum values

initEnum() also accepts an object as its parameter. That enables you to add properties to enum values.

    class TicTacToeColor extends Enum {}
    
    // Alas, data properties don't work, because the enum
    // values (TicTacToeColor.X etc.) don't exist when
    // the object literals are evaluated.
    TicTacToeColor.initEnum({
        O: {
            get inverse() { return TicTacToeColor.X },
        },
        X: {
            get inverse() { return TicTacToeColor.O },
        },
    });
    
    console.log(TicTacToeColor.O.inverse); // TicTacToeColor.X

Another use case for this feature is defining commands for a user interface:

    class Command extends Enum {}
    Command.initEnum({
        CLEAR: {
            description: 'Clear all entries',
            run() { /* ··· */ },
        },
        ADD_NEW: {
            description: 'Add new',
            run() { /* ··· */ },
        },
    });
    console.log('Available commands:');
    for (let cmd of Command.enumValues) {
        console.log(cmd.description);
    }
    // Output:
    // Available commands:
    // Clear all entries
    // Add new

The instance-specific method run() executes the command. enumValues enables us to list all available commands.

Custom prototype methods

If you want all enum values to have the same method, you simply add it to the enum class:

    class Weekday extends Enum {
        isBusinessDay() {
            switch (this) {
                case Weekday.SATURDAY:
                case Weekday.SUNDAY:
                    return false;
                default:
                    return true;
            }
        }
    }
    Weekday.initEnum([
        'MONDAY', 'TUESDAY', 'WEDNESDAY',
        'THURSDAY', 'FRIDAY', 'SATURDAY', 'SUNDAY']);
    
    console.log(Weekday.SATURDAY.isBusinessDay()); // false
    console.log(Weekday.MONDAY.isBusinessDay()); // true

State machines via enums

Enums help with implementing state machines. This is an example:

    class Result extends Enum {}
    Result.initEnum(['ACCEPTED', 'REJECTED']);
    
    class State extends Enum {}
    State.initEnum({
        START: {
            enter(iter) {
                const {value,done} = iter.next();
                if (done) {
                    return Result.REJECTED;
                }
                switch (value) {
                    case 'A':
                        return State.A_SEQUENCE;
                    default:
                        return Result.REJECTED;
                }
            }
        },
        A_SEQUENCE: ···,
        B_SEQUENCE: ···,
        ACCEPT: {
            enter(iter) {
                return Result.ACCEPTED;
            }
        },
    });
    function runStateMachine(str) {
        let iter = str[Symbol.iterator]();
        let state = State.START;
        while (true) {
            state = state.enter(iter);
            switch (state) {
                case Result.ACCEPTED:
                    return true;
                case Result.REJECTED:
                    return false;
            }
        }
    }
    
    runStateMachine('AABBB'); // true
    runStateMachine('AA'); // false
    runStateMachine('AABBC'); // false

Enums in TypeScript

TypeScript has built-in support for enums:

    enum Color {
        RED, GREEN, BLUE
    }

This is how the enum is implemented:

    var Color;
    (function (Color) {
        Color[Color["RED"] = 0] = "RED";
        Color[Color["GREEN"] = 1] = "GREEN";
        Color[Color["BLUE"] = 2] = "BLUE";
    })(Color || (Color = {}));

This code makes the following assignments:

    Color["RED"] = 0;
    Color["GREEN"] = 1;
    Color["BLUE"] = 2;
    
    Color[0] = "RED";
    Color[1] = "GREEN";
    Color[2] = "BLUE";

TypeScript’s enums have all the disadvantages mentioned for the first enum example earlier: No names for logging, no type safety and no membership tests. You can’t customize these enums, either.

Source:: 2ality

Comparing The Top Frameworks For Building Hybrid Mobile Apps

By Danny Markov

comparing-the-top-frameworks

Only a few years ago, developing mobile apps via JavaScript was nothing more then a quirky experiment. The idea that you could build iOS and Android apps, without having to operate with Java and Objective C, seemed appealing to many web devs. Now we have a plethora of frameworks bringing us closer than ever to creating a native mobile experience using only web technologies.

What are Hybrid Mobile Apps?

A hybrid app is just a regular mobile optimized website, written in CSS, HTML and JavaScript, that is displayed in a webview (this is a basically a stripped down web browser). The advantage is that you only need to write a single application, which in most cases runs unmodified on Android, iOS and Windows Phone. Most of the frameworks listed in this article do this using Cordova or PhoneGap, which give you a bridge to the device APIs in JavaScript.

In this article we’re going to compare the most popular JavaScript frameworks for building hybrid and native mobile apps. Scroll to the bottom of the article to see the scores.

1. Ionic

Ionic

Ionic is the most popular framework on our list and probably the first choice of many developers. You can use the CSS portion of the framework to create native looking designs, but to harness the full potential of Ionic, it’s best to pair it with AngularJS. A big bonus you get with Ionic is the command-line interface which is full of awesome features including integrated emulators and a Cordova based app packager.

Pros:

  • Works with predefined components
  • Great community
  • Command Line Interface with lots of useful features

Cons:

  • You need to know AngularJS to do anything complex

2. Onsen UI

Onsen UI

Onsen UI

This is an open source framework that allows developers to build apps by combining native-looking components. It’s fairly simple to use, can work with or without AngularJS, and has great documentation that includes lots of examples and layouts for the most common app structures. A disadvantage of Onsen UI is that it currently offers only an iOS theme, although the next version promises Material Design support.

Pros:

  • Works with predefined components
  • Excellent documentation with examples

Cons:

  • PhoneGap/Cordova builder not included, but supported
  • No support for Material Design (yet)

3. Framework 7

Framework 7

Framework 7

The cool thing about Framework 7 is that it is completely framework agnostic (doesn’t have external dependencies like Angular or React) and still manages to make apps look and feel native, with properly styled components and animations. Anyone who understands HTML, CSS and JavaScript can create an app without making the code convoluted. Framework 7 doesn’t include any tools for emulation or app packaging so you will need to combine it with Cordova or PhoneGap.

Pros:

  • Simple to use, relies only on HTML, CSS and JavaScript
  • Good performance
  • Can be combined with any JavaScript framework of choice

Cons:

  • PhoneGap/Cordova builder not included, but supported

4. React Native

React Native

React Native

As the name implies, React Native’s purpose is to build proper native apps, instead of creating hybrid ones that run in a Webview. Development, however, is still done completely via JavaScript and React. This frameworks isn’t tailored towards beginners in web development, but on the plus side, there is a huge community behind it that will help you in every part of the way. Recently the framework rolled support for Android, so you can have real cross-platform apps.

Pros:

  • Native-like performance
  • Huge community

Cons:

  • Steep learning curve
  • The development tools only work on OS X at the moment

5. jQuery Mobile

jQuery Mobile

jQuery Mobile

The grandpa of all mobile frameworks, jQuery Mobile doesn’t try to make apps that look like Android or iOS. Instead, it’s purpose is to help develop web apps that will work equally well on all mobile browsers (including oldies such as Windows Phone, Blackberry, and Symbian). As such, it is very lightweight, depends only on jQuery and is quite easy to learn, while still offering good touch recognition and PhoneGap/Cordova support.

Pros:

  • Support for wide range of mobile browsers
  • Simple to use

Cons:

  • Dated styles that don’t resemble either iOS or Android
  • PhoneGap/Cordova builder not included, but supported

6. Native Script

NativeScript

NativeScript

Native script’s biggest feature is that it allows you to write the functionality of your app in JavaScript once, which then will be transformed accordingly to Android, iOS and Windows Phone. Packaged, the compiled applications start in a native fashion, without opening and running in a browser. This frameworks does require some coding skills, but compensates for it with an extensive, in-depth documentation.

Pros:

  • Write once, use everywhere approach.
  • Great documentation

Cons:

  • Steep learning curve
  • Small community

7. Famous

Famous

Famous

Famous has a unique approach to web and mobile development. It combines the DOM tree (your HTML) with WebGL, displaying everything in a canvas, similar to what HTML game engines do. This novel technique allows the framework to run your apps in 60 fps, which is as smooth as most native apps. Sadly, this project is no longer being actively developed and doesn’t have good docs for reference.

Pros:

  • Native-like performance

Cons:

  • No longer actively developed
  • Documentation not full
  • Small community

The Rundown

Conclusion

There is no best framework – all of them have their pros and cons and it’s up to you to decide depending on what you plan on using them for.

We hope this quick comparison has been of great use to you! If you have experience with any of the listed frameworks or similar ones, please leave a comment and share your opinion on hybrid app development!

Source:: Tutorialzine.com

Learn the Bootstrap Grid in 15 Minutes

By Danny Markov

learn-bootstrap-grid

Bootstrap is the most widely used frontend framework right now. When it comes to building responsive websites and apps, it’s the first choice of both professionals and hobbyists because of how simple it is to work with. Anybody who knows HTML, CSS and a bit of JavaScript can learn Bootstrap in no time.

In this quick lesson we’re going to cover the grid system, one of the fundamental concepts every Bootstrap developer needs to master. It allows us to create responsive page layouts which can change and adapt depending on the screen size of the device the user is on.

1. Rows and Columns

The grid consists of rows and columns. This allows us to freely position elements vertically and horizontally.

Rows are block level. This means, that when we create a row, it takes up the entire width of the element it is in. You can think of rows as new lines in your layout.

The horizontal alignment in the grid is done via columns. Only columns can be the direct children of a row and all content should go inside them. Placing content directly within a row will break the layout.

<!-- Wrong -->
<div class="row">
    Some content
</div>

<!-- Correct -->
<div class="row">
    <div class="col-md-12">Content Goes Here</div>
</div>
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Learn the bootstrap grid in 15 minutes</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style>

        body{ padding-top:50px;}

        .row div{
            background-color: #2196F3;
            border: 1px solid #fff;
            height: 125px;
            padding: 15px;
            color: #fff;
        }

    </style>

</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-md-6">First row, first column</div>
            <div class="col-md-6">First row, second column</div>
        </div>

        <div class="row">
            <div class="col-md-4">Second row, first column</div>
            <div class="col-md-4">Second row, second column</div>
            <div class="col-md-4">Second row, third column</div>
        </div>
    </div>

</body>
</html>

Note: Rows and columns have a special relationship. Columns have 15px left and right padding so that their content is properly spaced out. However, this pushes the first and last column’s content 15px away from the parent. To compensate, the row has negative left and right 15px margins. This is why you should always place columns within rows.

2. Rows are Divided in 12

Rows are divided horizontally into 12 equal parts. When we place a column inside a row, we have to specify the number of parts it is going to take up.

This is done by applying a specific class .col-md-NUMBER, where NUMBER can be an integer from 1 to 12. Depending on the number, a column will occupy a percentage of the full row width: 6 will be 50% (12/6), 3 will be 25% (12/3) and so on. The following example should make things clearer:

<div class="row">
    <div class="col-md-12">Full width</div>
</div>
<div class="row">
    <div class="col-md-3">25%</div>
    <div class="col-md-3">25%</div>
    <div class="col-md-6">50%</div>
</div>
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Learn the bootstrap grid in 15 minutes</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style>

        body{ padding-top:50px;}

        .row div{
            background-color: #2196F3;
            border: 1px solid #fff;
            height: 125px;
            padding: 15px;
            color: #fff;
        }

    </style>

</head>

<body>

        <div class="container">
	    <div class="row">
	        <div class="col-md-12">Full width</div>
	    </div>
	    <div class="row">
	        <div class="col-md-3">25%</div>
	        <div class="col-md-3">25%</div>
	        <div class="col-md-6">50%</div>
	    </div>
	</div>

</body>
</html>

3. Column Wrapping

We always have to take into consideration, that there are only 12 available spaces in a line. If we sum up the space required by a couple of adjacent columns, and the result exceeds 12, the last columns in that group will have to move to the next line. Let’s take a look at a practical example:

The first two columns have sizes of respectively 8 and 4 (8+4=12), which makes the first line full. There isn’t enough space for the third cell there, so it will have to wrap to the next line.

<div class="row">
    <div class="col-xs-8"></div>
    <div class="col-xs-4"></div>
    <div class="col-xs-9">This column will move to the next line.</div>
</div>
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Learn the bootstrap grid in 15 minutes</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style>

        body{ padding-top:50px;}


        .row div{
            background-color: #2196F3;
            border: 1px solid #fff;
            height: 125px;
            padding: 15px;
            color: #fff;
        }

    </style>

</head>

<body>

        <div class="container">
	    <div class="row">
	        <div class="col-xs-8"> 8 </div>
	        <div class="col-xs-4"> 4 </div>
	        <div class="col-xs-9"> 9 </div>
	    </div>
	</div>

</body>
</html>

4. Screen Size Classes

Remember when we wrote .col-md-NUMBER in step 2? That -md- stands for medium. Bootstrap has a number of these classes for different screen sizes:

  • xs – Extra small screens like smartphones. Use it as .col-xs-NUMBER
  • sm – Small screen devices like tablets. .col-sm-NUMBER
  • md – Medium sized screens such as low dpi desktops and laptops. .col-md-NUMBER
  • lg – Large, high resolution screens. .col-lg-NUMBER

Bootstrap takes the screen resolution and dpi into account when deciding which classes are active (learn more here). This is a powerful way how to control how layouts render on different devices.

When we define a rule for any device size, this rule will be inherited and applied to all bigger sizes, unless we overwrite it by supplying a new one. Hit the Run button on the following example and try resizing your browser to see the layout adapt.

<div class="row">
    <div class="col-xs-12 col-md-6"><p>Try resizing the browser to see this text and the image rearrange for optimal viewing. </p></div>
    <div class="col-xs-12 col-md-6"><img src="city.jpg" class="img-responsive"></div>
</div>
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Learn the bootstrap grid in 15 minutes</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style>

        body{ padding-top:50px;}

    </style>

</head>

<body>

        <div class="container">
	    <div class="row">
	        <div class="col-xs-12 col-md-6">
	            <p>Try resizing the browser to see this text and the image rearrange for optimal viewing.</p>
	            <p> On extra small screens both the text and the image take up the whole width of the row. </p>
	            <p> When the browser size gets into the medium category, they can move in together and share a single row. They only need half of the row, since there is more space horizontally on the screen.</p>
	        </div>
	        <div class="col-xs-12 col-md-6"><img src="http://cdn.tutorialzine.com/wp-content/uploads/2015/10/city.jpg" class="img-responsive"></div>
	    </div>
	</div>

</body>
</html>

5. Clearfix

In some scenarios, when a column has much more content and a bigger height then the ones after it, the layout will break. The columns will all pile up under each other, instead of moving to the next line as they should.

To prevent this, we add a helper div with the clearfix class. It will force all columns after it move to a new line, solving the issue.

<div class="row">
    <div class="col-xs-6 tall-column">A column much taller than the rest.</div>
    <div class="col-xs-6"></div>
    <div class="clearfix"></div>
    <div class="col-xs-6"></div>
</div>
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Learn the bootstrap grid in 15 minutes</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style>

        body{ padding-top:50px;}

        .row{
            margin-bottom: 50px;
        }

        .row .col-xs-6{
            background-color: #2196F3;
            border: 1px solid #fff;
            height: 125px;
            padding: 15px;
            color: #fff;
        }

        .row .tall-column{
            height: 300px;
        }

    </style>

</head>

<body>

         <div class="container">

	    <div class="row">
	        <div class="col-xs-6 tall-column">All columns are 6 units wide, but this one is too tall!</div>
	        <div class="col-xs-6"></div>
	        <div class="col-xs-6">This column shoudln't be here.</div>
	        <div class="col-xs-6">This column shoudln't be here.</div>
	    </div>

	    <div class="row">
	        <div class="col-xs-6 tall-column">By adding a clearfix between the second and third columns, everything will go where it should.</div>
	        <div class="col-xs-6"></div>
	        <div class="clearfix"></div>
	        <div class="col-xs-6">All better now.</div>
	        <div class="col-xs-6"></div>
	    </div>

	</div>

</body>
</html>

You can use Bootstrap’s responsive utility classes to control when clearfix is active.

6. Offsets Are Your Friend

By default, columns stick to each other without leaving any space, floating to the left. Any excess space remaining in that row stays empty on the right.

To create margins on the left of columns we can use the offset classes. Applying a .col-md-offset-2 class to any column will move it to the right, as if there is an invisible .col-md-2 cell there. You can have different offsets for the different screen sizes thanks to the xs, sm, md and lg prefixes.

You can use offsets to easily center columns:

<div class="row">
    <div class="col-md-6 col-md-offset-3"></div>
    <div class="col-md-10 col-md-offset-1"></div>
</div>
<div class="container">

    <div class="row">
        <div class="col-xs-5 col-xs-offset-4">col-xs-5 col-xs-offset-4</div>
        <div class="col-xs-9 col-xs-offset-2">col-xs-9 col-xs-offset-2</div>
        <div class="col-xs-6 col-xs-offset-1">col-xs-6 col-xs-offset-1</div>
        <div class="col-xs-4 col-xs-offset-1">col-xs-4 col-xs-offset-1</div>
        <div class="col-xs-11 col-xs-offset-1">col-xs-11 col-xs-offset-1</div>
        <div class="col-xs-10">col-xs-10</div>
        <div class="col-xs-7">col-xs-7</div>
    </div>
    <div class="row">
        <div class="col-xs-5">col-xs-5</div>
    </div>
    <div class="row">
        <div class="col-xs-7">col-xs-7</div>
        <div class="col-xs-10">col-xs-10</div>
        <div class="col-xs-11 col-xs-offset-1">col-xs-11 col-xs-offset-1</div>
        <div class="col-xs-11 col-xs-offset-1">col-xs-11 col-xs-offset-1</div>
        <div class="col-xs-9 col-xs-offset-2">col-xs-9 col-xs-offset-2</div>
        <div class="col-xs-5 col-xs-offset-4">col-xs-5 col-xs-offset-4</div>
    </div>

</div>
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Learn the bootstrap grid in 15 minutes</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style>

        body{ padding-top:50px;}

        .row{
            padding: 0 250px;
        }

        .row div{
            background-color: #2196F3;
            height: 50px;
            padding: 15px;
            color: #fff;
        }

        @media(max-width: 992px){

            .row{
                padding: 0 100px;
            }

            .row div{
                height: 25px;
            }
        }

    </style>

</head>

<body>

        <div class="container">

	    <div class="row">
	        <div class="col-xs-5 col-xs-offset-4">col-xs-5 col-xs-offset-4</div>
	        <div class="col-xs-9 col-xs-offset-2">col-xs-9 col-xs-offset-2</div>
	        <div class="col-xs-6 col-xs-offset-1">col-xs-6 col-xs-offset-1</div>
	        <div class="col-xs-4 col-xs-offset-1">col-xs-4 col-xs-offset-1</div>
	        <div class="col-xs-11 col-xs-offset-1">col-xs-11 col-xs-offset-1</div>
	        <div class="col-xs-10">col-xs-10</div>
	        <div class="col-xs-7">col-xs-7</div>
	    </div>
	    <div class="row">
	        <div class="col-xs-5">col-xs-5</div>
	    </div>
	    <div class="row">
	        <div class="col-xs-7">col-xs-7</div>
	        <div class="col-xs-10">col-xs-10</div>
	        <div class="col-xs-11 col-xs-offset-1">col-xs-11 col-xs-offset-1</div>
	        <div class="col-xs-11 col-xs-offset-1">col-xs-11 col-xs-offset-1</div>
	        <div class="col-xs-9 col-xs-offset-2">col-xs-9 col-xs-offset-2</div>
	        <div class="col-xs-5 col-xs-offset-4">col-xs-5 col-xs-offset-4</div>
	    </div>

	</div>

</body>
</html>

7. Push and Pull

The push and pull classes allow us to reorder columns depending on screen size. Push moves a column to the right, and pull to the left. This is different from offset as push and pull use position: relative and don’t shift other columns.

Push and pull classes have the following format: .col-SIZE-push-NUMBER, and .col-SIZE-pull-NUMBER. Possible SIZE values are sm, xs, md and lg. This represents in which of the 4 screen size scenarios we want the swap to occur. NUMBER tells Bootstrap how many positions we want to move.

Hit Run on the code below and resize the pop-out to see how the two cells change places when the window becomes small.

<div class="row">
    <div class="col-xs-4 col-md-push-8">On laptop and desktop screens this text will go to the right and the image will go to the left, changing places.</div>
    <div class="col-xs-8 col-md-pull-4"><img src="city.jpg" class="img-responsive"></div>
</div>
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Learn the bootstrap grid in 15 minutes</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style>

        body{ padding-top:50px;}

    </style>

</head>

<body>

       <div class="container">
	    <div class="row">
	        <div class="col-xs-4 col-md-push-8">On laptop and desktop screens this text will go to the right and the image will go to the left, changing places.</div>
	        <div class="col-xs-8 col-md-pull-4"><img src="http://cdn.tutorialzine.com/wp-content/uploads/2015/10/city.jpg" class="img-responsive"></div>
	    </div>
	</div>

</body>
</html>

Conclusion

Great job! You now know the most important part of the Bootstrap framework, and you’re ready to build your next stellar responsive design. But there is a bit more left to learn to achieve true mastery. Check out Bootstrap’s extensive documentation for more.

Source:: Tutorialzine.com

Freebie: 4 Wonderful JavaScript Option Menus

By Danny Markov

4-wonderful-javascript-option-menus

In this iteration of your freebie giveaway, we’ve prepared for you 4 awesome option menus! They are made entirely our of vanilla HTML, CSS and JavaScript, and don’t require any libraries or frameworks (except for some jQuery).

The Menus

These menus are designed in such a way, that they can quickly show all the needed options for your app. They are hidden offscreen and only appear when a user requests them with the push of a button. Once open, the menus can easily be hidden away again via a close button.

All you have to do, to include any of these menus in your project, is to copy the HTML from the demo examples and place the code anywhere on your page. There are also a few lines of JavaScript, and a specific CSS file for each menu. Both the JavaScript and CSS are self contained and shouldn’t cause any side effects to your existing content.

We’ve also added event handlers that call alerts when a option in the menus is selected. You can use this to effortlessly add your own functionality to all the links and buttons.

Side Option Menu

Free for Commercial Use

The menus can be downloaded from the button on the top of the page. You have all rights to customize them and use them however you want, in both personal and commercial projects (our license page). Enjoy!

Source:: Tutorialzine.com

Using Flexbox to Create a Responsive Comment Section

By Danny Markov

flexbox-responsive-comment-section

Flexbox is a powerful new way for building layouts that makes some of the most challenging aspects of web development trivial. Nearly all browsers that are used today support it, so it is a good time to see how it can fit in your typical day-to-day frontend work.

This is why in this quick tutorial we’re going to build a comment section using flexbox. We’ll take a look at some of the more interesting properties that the flexbox layout mode has to offer and show you how to take full advantage of it.

What We’re Going to Use

Flexbox consists of a number of CSS properties, some of which we are going to use today:

  • display: flex – This activates the flex layout mode and makes the element’s children follow flexbox rules.
  • justify-content – This property defines where the children of a flexbox element will align to (this is similar to text-align, read more here).
  • order – Flexbox gives us control on the exact position elements are displayed at. We use this powerful tool in our comment section to switch the text and photo around (find out more here).
  • flex-wrap – Controls the wrapping of the elements within the flex element. We use this to force the avatars to show beneath the comment text on small screens (flex-wrap on MDN).

The Layout

We want our comment section to meet the following requirements:

  • Each comment should have an avatar, name, time and comment body.
  • There should be two comment types – those written by the author (colored in blue and having the avatar on the right) and those written by everyone else.
  • The HTML markup for both types of comments has to be as similar as possible, so it is easy to generate comments through code.
  • The whole thing has to be fully responsive.

Comment Section Layout

All of this can be made with a few lines of CSS with flexbox. Let’s move on the the code!

The HTML

Our HTML is pretty straightforward. We’ll have a list of comments with a basic form for writing new comments at the end.

<ul class="comment-section">

    <li class="comment user-comment">
        <div class="info">
            <a href="#">Anie Silverston</a>
            <span>4 hours ago</span>
        </div>
        <a class="avatar" href="#">
            <img src="images/avatar_user_1.jpg" width="35" alt="Profile Avatar" title="Anie Silverston" />
        </a>
        <p>Suspendisse gravida sem?</p>
    </li>

    <li class="comment author-comment">
        <div class="info">
            <a href="#">Jack Smith</a>
            <span>3 hours ago</span>
        </div>
        <a class="avatar" href="#">
            <img src="images/avatar_author.jpg" width="35" alt="Profile Avatar" title="Jack Smith" />
        </a>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse gravida sem sit amet molestie portitor.</p>

    </li>

    <!-- More comments -->

    <li class="write-new">

        <form action="#" method="post">
            <textarea placeholder="Write your comment here" name="comment"></textarea>
            <div>
                <img src="images/avatar_user_2.jpg" width="35" alt="Profile of Bradley Jones" title="Bradley Jones" />
                <button type="submit">Submit</button>
            </div>
        </form>

    </li>

</ul>

If you look closely at the above code, you’ll notice that apart from having different classes, the HTML for the user comments and the author comments are practically the same. All of the stylistic and layout differences between the two, will be handled solely by CSS applied to the .user-comment and .author-comment classes.

The CSS

Here we’re going to look at flexbox-related techniques we’ve used when building the layout. If you want to examine the stylesheet in full detail, download the whole CSS file from the button near the top of the article.

First off, we are going to give all comments display: flex, which will enable us to use the flexbox properties on the comments and their child elements.

.comment{
    display: flex;
}

These flex containers span the full width of our comment section and hold the user info, avatar and message. Since we want the comments written by the author to be aligned to the right, we can use the following flex property and align everything towards the end of our container.

.comment.author-comment{
    justify-content: flex-end;
}

This will leave the comments looking like this:

justify-content: flex-end

justify-content: flex-end

Now we have the author comment aligned on the right, but we also want to have the elements inside the container in reverse order, so that the message comes first, then the avatar and the info on the far right. To do this we will take advantage of the order property.

.comment.author-comment .info{
    order: 3;
}

.comment.author-comment .avatar{
    order: 2;
}

.comment.author-comment p{
    order: 1;
}

As you can see, with the help of flexbox, the whole thing couldn’t be any easier.

Reordering Elements

Reordering Elements

Our comment section looks just like we wanted it to. The only thing left to do is make sure that it looks good on smaller devices as well. Since there won’t be as much available space on a narrower screen, we’ll have to do some rearrangements to the layout and make our content more easily readable.

We set up a media query that makes the comment paragraphs expand, taking up the whole width of the container. This will lead to the avatar and user info moving to the next line, since the comments have their flex-wrap property set to wrap.

@media (max-width: 800px){
    /* Reverse the order of elements in the user comments,
    so that the avatar and info appear after the text. */
    .comment.user-comment .info{
        order: 3;
    }

    .comment.user-comment .avatar{
        order: 2;
    }

    .comment.user-comment p{
        order: 1;
    }


    /* Make the paragraph in the comments take up the whole width,
    forcing the avatar and user info to wrap to the next line*/
    .comment p{
        width: 100%;
    }


    /* Align toward the beginning of the container (to the left)
    all the elements inside the author comments. */
    .comment.author-comment{
        justify-content: flex-start;
    }
}

The difference can be spotted right away by comparing this screen capture with the one above. You can also try opening the demo and resizing your browser to watch the comment section adapt accordingly to the size of the window.

Our comment section on smaller screens

Our comment section on smaller screens

Conclusion

This sums up our tutorial. We hope that this gave you a practical example on how to use flexbox when building real layouts. If you’re curious what else is possible, here are a few great resources that you’ll like:

  • CSS-Tricks’ guide to flexbox – here.
  • An in-depth MDN article – here.
  • A website with easy flexbox solutions for classic CSS problems – here.

Source:: Tutorialzine.com

Think You Know ES6? Prove it!

By Danny Markov

ES6-quiz

Your favorite web scripting language just got even better! The 2015 edition of ECMAScript comes with a ton of cool new techniques and programming concepts, much anticipated by the JavaScript community. Most of the new features are already available out of the box with modern browsers and Node.js, and are expected to receive wide support soon.

We’ve prepared a fun quiz which you can take to see how much you know about ES6 (aka ES2015), and maybe learn a few new things as well!

(See this quiz on Tutorialzine.com)

Source:: Tutorialzine.com