javascript-html5-tutorial.com

Useful tools for programmers: Yeoman

August 15th, 2016

Dominik-W

Finally, I’ve got a little bit of time for blogging, so today wanted to write a few words about one of useful tools for developers – Yeoman.

Yo man! Useful tools for programmers – Mr Yeoman

Why to do the tedious, repetitive tasks, if it can be done for us by machine, or in this case – by the program. Yeoman allows us to generate different kind projects, especially creating the structure of folders and the necessary ingredients, in order to the best practices and patterns.

It makes initial creation of necessary folders and files, as well the setup of dependencies.

For example we may create new AngularJS project, where we also want to have Bootstrap, Saas and other extensions, that our project will need.

Installation is based on npm, which for sure we have in our environment, if we have worked with node.js. There also Bower and Grunt will be necessary =>

Top 5 jQuery plugins and libraries – May 2016

May 31st, 2016

Dominik-W

The next portion of good jQuery plugins and JavaScript solutions from our library. Here we present a small ranking of top jQuery plugins from May 2016.

Top 5 jQuery plugins from May 2016

Ordered by popularity.

1. Style elements, use media queries to build a responsive menu in jQuery

In this tutorial you’ll style elements and use media queries to build a responsive menu in jQuery. A nice effect reached quickly.

Progress bar with CSS and HTML5 in a few lines of code

May 11th, 2016

Dominik-W

A progress bar in CSS for web project? Sure, and it without using images. Today short and to the point.

Create progress bar with CSS and HTML5

We can use HTML5 and Bootstrap, or define our own CSS styles.

Solution #1 – HTML5

Let’s add Twitter Bootstrap and jQuery to our web page, and a simple code as below.

...
  <div class="progress" style="width: 50%">
    <div class="progress-bar" role="progressbar" aria-valuenow="40"
      aria-valuemin="0" aria-valuemax="100" style="width: 40%">
      40% (default style)
    </div>
  </div>

Ready! We have a progress bar. The colors and progress step we define through CSS classes (e.g.: class=”progress-bar progress-bar-danger”) and properties (e.g.: role=”progressbar”, aria-valuenow=”100″). And besides, we set style width of an element.

More examples of progress bars below.

Top jQuery plugins – March 2016

April 3rd, 2016

Dominik-W

Hello! We added many new interesting positions to our scripts and plugins library. Here we present a small ranking of top jQuery plugins from March 2016.

Top jQuery plugins from March 2016

Ordered by popularity.

1. Multi-step jQuery form wizard plugin – jquery.steps

The first plugin is a nice way to implement forms in web application: multi-step jQuery form wizard solution. Turn multiple forms into a step-by-step form wizard with nice effects.

AngularJS Tutorial – a simple UI to control elements

March 12th, 2016

Dominik-W

Angular in practice! Today we have a small AngularJS tutorial, about creating small UI connected with dynamically created (refreshed) graphical object.

AngularJS Tutorial – control an element with Angular

In the basic course of Angular, we focused on information. Now it’s time to see it in a real example. Today’s simple tutorial in small steps will help us with this.

Step 1.

Let’s create HTML5 document and include AngularJS library.

Step 2.

Define an element, on which we will operate from the level of UI. In our example we will create a simple element using CSS:

.my-elem {
  background: #00c;
  border-radius: 10%;
  position: absolute;
  width: 200px;
  height: 200px;
  max-width: 500px;
  max-height: 500px;

  /* speed */
  transition: 0.8s;
  -webkit-transition: 0.8s;

  /* init pos*/
  left: 100px;
  top: 200px;
}

Learning AngularJS – a basic course part III – summary

March 5th, 2016

Dominik-W

In the 3rd part of basic Angular course, we will continue topics from the previous part, as well we will touch next related topics.

Further learning AngularJS

Let’s start with filters. It’s a yet another Angular feature, which takes off a part of tedious work from the programmer. Let’s see them in action, when formatting various kind of data.

AngularJS filters

Even in the previous part we could see how simple in use (but useful) the filters are. For example:

...
<p>{{ message.sent | date:'MMM d, y h:mm:ss a' }}</p>
...

av-top5-jquery-bootstrap-show-hide-password

Learning AngularJS from scratch part II

February 6th, 2016

Dominik-W

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

January 16th, 2016

Dominik-W

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.

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

December 21st, 2015

Dominik-W

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.