Web design Techniques

Program to interface OOP design principle

Program to interface means to build a framework of  classes with the super-classes that include interface and abstract class.

Program to an interface, not an implementation.

(more…)

Encapsulate what varies OO design principle

What is Encapsulating

Encapsulate what varies is the the important and popular OO design principle. Encapsulating means to hide the detail of the implementation and give a simple API. Clients can only use the API do what they want and don’t care about the complex algorithms.

Identify the aspects of your application that vary and separate them from what stays the same.

Why use encapsulating

You should represent the computer code using the correct tags when you write a post about the computer science. (more…)

Recently I have learned the HTML <base> tag that I haven’t known before. Here I will share you what I have learned. (more…)

We often use relative file paths to reference a source. Let’s assume we have the web structure like the below:

How do we add images to the travel.html file? (more…)

The responsive technology is becoming more and more important as the mobile devices are popular nowadays. How do we responsive correctly?

Imperfect solution only using CSS

We only add two simple line decorations to responsive images in the traditional way.

img { max-width: 100%; height: auto; }

The images will fit all the devices viewport with the code below. But how about the image size?…

Let’s assume that there are the same events attached to an element and its some parent elements. Which event will be executed at first? Or what is the event order?

Example

Event capturing and bubbling

Click Me

// Variables var container = document.getElementById('container'); var article = document.getElementById('article'); var paragraph =…

We can not directly create animation using JavaScript. Because there isn’t a createAnimation() function yet. Can you find a way for that? Let’s see two important related functions at first.

Functions setInterval()

The function repeatedly calls a function or executes a code snippet, with a fixed time delay between each call. It returns an interval ID which uniquely identifies the interval, so you…

Finding HTML elements using JavaScript via DOM

Finding HTML element by ID Finding HTML elements by tag name Finding HTML elements by class name Finding HTML elements by CSS selectors

What are HTML character references and how to use

What are HTML character references? Why we need them? How to use? Before introducing them, let’s see an example.

Try to display the paragraph below.

<p>We use the <p> tag to present a paragraph.</p>

You will see the result isn’t what we want if you type the second <p>.

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”mqEbgN” default_tab=”html,result” user=”webvars”]See the Pen <a href=’https:/…

How to create private properties and methods of objects in JavaScript

We can create an object easily in JavaScript. For instance:

var obj = { pro1: 'val1', pro2: 'val2', method1: function() { // Code here }, method2: function() { // Code here } };

But we can also override the properties and methods freely. because all of the properties and methods are public.

obj.pro1 = 'val3';

So it’s not safe and encapsulate in some situations. We…

How to loop an array element correctly

We often need to loop array elements when we deal with JavaScript projects. There are several ways to achieve it. Which way is perfect? (more…)

How to add dynamic properties to an object in JavaScript

Sometimes we want to add dynamic properties to an object in JavaScript. For instance, we expect to get Properties names from a user inputting. But we can’t use them directly as the object’s properties traditionally.

(more…)

JSONLint – The JSON Validator online tool

We generate and transmit data via JSON sometimes. Though it is a simple language, we must be careful. We will not get a right data if we made a wrong JSON structure. So I recommend the JSONlint – The JSON Validator online tool. You just copy and paste the JSON code on the JSONLint, then it can automatically validate the code. It gives you a feedback after validating.

Click to go to the JSONLint.

How to create objects based on a class like PHP in JavaScript

We can easily create a group of similar objects from a class in PHP. For example:

class Person { public $name; public function __construct( $name ) { $this->name = $name; } public function greeting() { echo 'Hello. My name is ' . $name . '.'; } } $person1 = new Person( 'Rose' ); $person1->greeting(); // Output 'Hello. My name is Rose.' $person1 = new Person( 'Michael' ); $person1->greeting(); //…

How to use events in JavaScript

It’s important to understand JavaScript events. Because you must use the browser events if you want your web application interacts with users. (more…)

Scope of variables when function in function in JavaScript

Variables in a function only affect the function in JavaScript, can’t be used in another functions, as we know. But how about the scope of variable when function in function. (more…)