angularjs-logo

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.

money-5

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

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.

mustache-js

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-logo-x

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-logo2

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_javascript_3

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.

tools_2

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>

power

JavaScript and jQuery mini tips

Level: intermediate

The next article about JS and jQ tips, but in fresh, concise form.

Quick JS and jQuery mini tips

1. Clickable background image on the website

It’s about the case, when we want to make a clickable background of the website, for example, as advert pointing the user to some url after click on website background.

Wrapping website content, or adding onclick handler for the background, or other solutions which would come to our head as first could be not enough.

Here we have simple and working solution. As first we set image for the background:


var img = "http://our-page.com/image.png";
var link = "http://target-website.com";

document.body.style.backgroundImage = "url('" + img + "')";

tools

JavaScript, HTML5, CSS and Data URI

Level: intermediate

What is that? The Data URI scheme is simply a way to represent the information, but in such a way the data usually kept in files (e.g. images) are available in a form of text string!

Such a string has its own format, and allows developers to easily transfer the resource, e.g. between Web applications, or use it directly in JavaScript / CSS code.

Moreover, there’s no need to execute additional HTTP requests to fetch the files, as all the data can be fetched immediately, in one request.

The Data URI string has a following form:

data:[media type][;charset=xxx][;base64],data

Generating and using the Data URI

We talked about using Data URI in the one of older posts, concerning HTML5 Canvas. operations. Today we expand this topic.