Top 5 jQuery plugins and articles – February 2016

Level: intermediate

Hello! We were to busy to publish next AngularJS articles, but at least here we have some cool stuff. It’s a small ranking of Top 5 resources from our website with web development stuff.

Top 5 jQuery plugins – Feb 2016

Here we go – from most popular.

1. jQuery and Bootstrap show hide password plugin

It’s a jQuery plugin, that allows the user to toggle the password input field text visibility by clicking the toggle icon (checkbox). Styling with Bootstrap.

Top 5 jQuery plugins & posts from Feb 2016

Top 5 jQuery plugins & posts from Feb 2016

2. jQuery and CSS3 image direction-aware hover effect

This is a nice jQuery and CSS3 image direction-aware hover effect. The main idea is to slide in an overlay from the direction we are moving with the mouse.

Learning AngularJS from scratch part II

Level: intermediate

Today we will continue learning the Angular JS framework, by getting to know better the most important parts of AngularJS application, as well by analyzing small practical examples.

Learning AngularJS – further steps

The previous part describes basic aspects of this great framework.

We already know that AngularJS is a JavaScript language framework, and it extends HTML through ng-directives. The previous part of this course shows also a simple example with data-binding. We are also aware of many useful directives, for example ng-init:

<div ng-app="" ng-init="firstName='Joe'">
  <p>The name is <span ng-bind="firstName"></span></p>
</div>

Let’s add AngularJS expressions to this. They exist in double brackets, e.g. {{ expression }} and on them AngularJS can execute its magic. The expressions can also be stored in the ng-bind=”expression” directive.

Learning AngularJS framework from scratch – Part I

Level: intermediate

AngularJS is an open-source JavaScript library, developed by Google. It greatly assist in Single Page Application / SPA development. Angular extends HTML by own, special tags. The library implements Model-View-Controller (MVC) and Model-View-ViewModel (MVVM) patterns, to help in the development and testing of Web applications.

Learning AngularJS – intro. How it works?

Angular loads HTML containing additional, specific tags, and by handling them, it assigns input and output page elements to the model that is stored as a set of JS variables.

Values can be set manually, as well gathered from a JSON source.

AngularJS_logo

Framework adapts and extends the capabilities of plain HTML, to better serve dynamic content and allowing for automatic synchronization between the model and the view. In short a programmer can save really a lot of hard work.

A brilliant and very strong feature of Angular is data binding, and two-way binding.

No skill – no deal! Full-stack and Front-end Developer required skills

Level: intermediate

As they say: no skill – no deal! Without proper skills we won’t do too much. Also continuous development of our skills is also important.

It’s not like the old days, when a knowledge of DHTML and PHP was sufficient. Nowadays the developer must know not only various programming languages, but also o lot of tools and frameworks.

Front-end Developer required skills vs the market

Today we will try to look at what is necessary to be a good front-end or full-stack developer. What are the trends, and above all what the market requires (clients, employers).

What are Front-end Developer required skills today? Or full-stack? Industry is growing rapidly in this direction, and many people want to start working as the Front-end Developer, as currently it’s a very hot profession.

Mustache JS tutorial by jQuery and Express application example. Part 2/2.

Level: advanced

Welcome to the 2nd part of Mustache JS and Express tutorial. Today we will finish the work begun in part 1.

Mustache JS and jQuery in action

So far we’ve discussed the basics of work with Mustache JS library, prepared test data and the server in node.js. Now it’s time to code the front-end layer!

In our case we will use:

Bootstrap v3.3.5

jQuery v1.11.3

jQuery Easing v1.3 plugin

Ionicons

mustache JS

So the next step will be the html5 page, developed on the basis of Bootstrap.

Especially please note two things – the navigation and Mustache templates.

Using Mustache JS by jQuery and Express application example. Part 1/2.

Level: advanced

In this tutorial we will create a web application using great tools – html5, Bootstrap, jQuery, Mustache JS and Express. Step by step. We will also use the ionicons.

Mustache JS

Not everyone (including me) likes templating systems in for example PHP. But here the situation is much different!

Mustache JS is a JavaScript implementation of the Mustache templates mini-engine (logic-less), which was created for many different programming languages: http://mustache.github.io.

Why the Mustache JS (and similar libraries) are cool?

First of all, having the data obtained e.g. from JSON objects, we don’t have to process the data manually. This can be tedious. Instead, we define a small template with placeholders, in which the Mustache engine will interpolate the values. In this way we will get the data integrated with our front-end layer at once.

Having mastered Mustache JS, we can save a lot of valuable time and effort. We will see it in practice.

jQuery mini tips III – forms

Welcome to the next article of the jQuery mini tips series. Today we will play around selected aspects of working with the form elements.

1. Prevent to select more than one item in select multiple input

Once I created a project, where I had to show UI in a little bit old-school way (similar to older desktop apps). Some of inputs had to be displayed as select multiple lists, but selecting more than one option was forbidden.

Fortunately no need to code any handlers in JS. With jQuery it’s a trivial thing:

// allow only one item to select
$('#my-options').removeAttr('multiple');

In that way we disable the possibility of selecting more than one option, but our element still remains displayed as select multiple.

jQuery plugins, JavaScript libraries, tutorials and codes – new website

Its working now! We invite you to a new page with interesting resources.

We find there jQuery plugins, variety of useful JavaScript libraries, tutorials and more. We publish materials in our opinion worthy of attention, so both Web Developers and Web Designers can find in one place solutions for own projects. And maybe even new ideas.

Next to useful jQuery plugins, there appears other resources, about stuff like RWD and mobile web, HTML5 and more.

jsnet

CSS tips and tricks

Level: intermediate

When we work with CSS, we often create or find interesting solutions for various tasks or problems encountered.

CSS Tips

1. Cross-browser CSS word break for too long text

For example, when we are creating front-end for the on-line chat, and there we have div-s for particular messages. The user writes very long text or URL address – any string of consecutive characters. Such a text won’t wrap and come out in a straight line outside our area (div).

We can process strings in our programming language, but we can make a painless deal with CSS. Our div needs to get CSS styles, which will take care:

.word-break {
    word-break: break-all;
    word-wrap: break-word;
    -ms-word-break: break-all;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
} 

This will ensure correct display of a long text in our element.

JavaScript and jQuery mini tips II

Level: intermediate

OK, it’s time for the next JS and jQuery mini tips. Today something about Fancybox plugin, check-boxes and parsing URLs in raw text.

JavaScript and jQuery tips

To the point.

1. Conditional form submit using JavaScript / jQuery

It’s about sending the form only if the user checked a check-box (e.g. accept the Terms of Service). Of course it’s simple validation in JS, without using language such as PHP.

There is our check-box:

<div class="error">Please accept the TOS!</div>

<input type="checkbox" name="terms" id="terms" value="1" />
<label style="display: inline;" for="terms">I agree ... </label>