January 16th, 2016
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.
December 21st, 2015
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.
December 14th, 2015
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:
jQuery Easing v1.3 plugin
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.
December 14th, 2015
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.
Not everyone (including me) likes templating systems in for example PHP. But here the situation is much different!
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.
November 19th, 2015
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
In that way we disable the possibility of selecting more than one option, but our element still remains displayed as select multiple.
November 14th, 2015
Its working now! We invite you to a new page with interesting resources.
Next to useful jQuery plugins, there appears other resources, about stuff like RWD and mobile web, HTML5 and more.
October 26th, 2015
When we work with CSS, we often create or find interesting solutions for various tasks or problems encountered.
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:
This will ensure correct display of a long text in our element.
October 18th, 2015
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.
To the point.
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>
October 12th, 2015
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 + "')";
October 2nd, 2015
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!
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:
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.