Front-End Interview Questions and Answers

I have finished answering the Front-end-Developer-Interview-Questions, please refer to the answers at my git repo.

In my opinion, not only for interview, they really contains useful information/knowledge for Front-End/Full-Stack developers.

Hope this helps.

Some answer for Front-end-developer-interview-questions

Start to reading Front-end-developer-interview-questions and make some answer, you can take it as reference.

Will add more over time.

Add SyntaxHighlighter to Blog Post in One Minute

1. Edit your blog template.

2. Find the

    </body>

tag.

3. Paste the fragment below before the tag you found above
(NOTE: this is my custom helper and will load js from my github cdn,
 you can modify it to create your own as needed)

  <script type='text/javascript'>
    syntaxHighlighterConfig = {
      config: {
  // required for blog
        bloggerMode: true
      },
      defaults: {
  // optional, collapse code block
        // collapse: true
      },
      themes: {
  // optional, use other themes
  // 'dark' can be any string
  // 'shThemeRDark.css' should be the file name
        'dark': 'shThemeRDark.css'
      }
    };
  </script>
  <script src='//cdn.rawgit.com/benbai123/HTML_CSS_Javascript_practice/2da59146af1a73f8700c33f3562e09c0b2c31ef8/libs_tools/SyntaxHighlighter/helper/shHelper.js' type='text/javascript'></script>

4. Save template

Done

(It seems there is an autoloader feature but that page not works well so
I wrote my own.)

References:

My testing files

SyntaxHighlighter-themes

SyntaxHighlighter-configuration

Use SyntaxHighlighter with Custom Helper

Simple Note

Use a helper js file to load required js/css files for you.

Samples
testHelper.html
shHelper.js

Use SyntaxHighlighter to Highlight Code

Simple Note:

Test File:
test.html

Result:

Reference:
http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html

ZK, AngularJS and Pure HTML Template

Introduction

As we already know ZK used to generate all html content within 'redraw' function of a ZK Widget, this is a little bit (?) hard to maintain and customize dom structure and style of component.

This article describe how to create ZK Component with AngularJS Directive so you can use a pure HTML template to generate dom elements of ZK Component and has some advantages:
1. Easier to maintain.
2. Easier to customize.

And also some drawbacks (part of them has workaround):
1. Need to load html template via several ajax call.
  Workaround: You can load all templates at once,
       for more information please refer to
       AngularJS: load all templates in one file or AngularJS Merge Template
2. Will blink while rerender, you can use a fake dom to avoid blinking but this may affect the client side performance.
3. Has issue of dynamically insert and compile complex dom elements so need to rerender if dynamically add children.

Note:

1. This is just a POC done in a short time, probably not well organized and has some unknown issues.
2. I am not familiar with AngularJS so this POC may contains bad practice.

Pre-request

AngularJS Create Components

ZK Component Development Tutorial: Getting Started

ZK CDT: Fire Event to Server to Create a SelectableTextNote

Result

Online demo
http://screencast.com/t/nlLsNdbV8A

Description:

The concept is simple.

In AngularJS, a directive which support pure html template is a function that returns an Object Literal, and registered with a specific name (see Creating Custom Directives).
Both of them -- the name and the function -- can be declared at any places.
e.g. inside the Javascript of ZK Widget.

So we can specify Angular Tag (ngTag) and Angular Template Url (ngTemplateUrl) to each ZK Component and do below:

In ZK Component:
* Server Side:
** Make sure that each templateUrl maps to different tag.
* Client Side:
** Output ngTag in redraw function.
** Store component to zk.ngcomponents in redraw function.
** Register Angular Directive with ngTag.

In Angular Directive
* Use ngTemplateUrl as templateUrl in directive.
* Store $scope, $compile and controller to $element in controller function of directive.
* Bind ZK Widget with Angular Objects above in link function of directive.

Then we can use AngularJS Directive with pure HTML Template then control ZK Widget from AngularJS Directive and vice versa.

See

NgComp.java#fixTemplateMapping
NgComp.js#redraw
tabs.js#registerTemplate
zacomponents.js#addComponent
zacomponents.js#storeNgObjects
zacomponents.js#directive
zacomponents.js#bindng_

for more information.

Program Introduction

Testing zul page
index.zul

Testing Composer
TestComposer.java

AngularJS Library
angular.min.js

Bootstrap3 CSS Library
bootstrap.min.css

Utils for AngularJS ZK Widget
zacomponents.js

Basic APIs of AngularJS ZK Widget
NgComp.js

The Folder Contains All Default Templates
templates

Basic Java Class for AngularJS ZK Component
NgComp.java

Others:
Please refer to the full project below

Download

Full project at github

Demo Flash (click View Raw to download)

JSP Fileupload Progress Bar

Simple Note

JSP fileupload with Apache Commons FileUpload
Display upload progress bar

Pre-request

JSP Fileupload without Redirect/Refresh

Full Project

https://github.com/benbai123/JSP_Servlet_Practice/tree/master/Practice/Tools/FileUpload

Testing files

WebContent/fileupload_progressbar.jsp
src/test/UploadProgressServlet.java

JSP Fileupload without Redirect/Refresh

Simple Note

JSP fileupload with Apache Commons FileUpload
Upload file without page redirect, page refresh or open new page.

Pre-request

JSP Apache Fileupload

Full Project

https://github.com/benbai123/JSP_Servlet_Practice/tree/master/Practice/Tools/FileUpload

Testing files

WebContent/fileupload_norefresh.jsp
src/test/UploadServlet.java

AngularJS Initialize Manually

Simple Note

This article describe how to apply (aka initiate, bootstrap) AngularJS to an area (a dom element) manually with Javascript code programmatically.

Result

View demo online
http://screencast.com/t/wuEW04a4W1d

Pre-request

AngularJS getting started

Code

https://github.com/benbai123/HTML_CSS_Javascript_practice/blob/master/Frameworks/Angularjs/Advanced/flow/001__Initialization_Manually_to_Bootstrap/test.html

JS Libs

https://github.com/benbai123/HTML_CSS_Javascript_practice/tree/master/Frameworks/Angularjs/lib

Reference

http://docs.angularjs.org/guide/bootstrap

AngularJS Merge Template

Simple Note

Describe how to merge multiple template into one .html file

Note: You will need to put testing files under a web server to run.

Pre-request

AngularJS Create Components

Testing Files

https://github.com/benbai123/HTML_CSS_Javascript_practice/tree/master/Frameworks/Angularjs/Advanced/template/management/001__merge_template

JS/CSS Libs

https://github.com/benbai123/HTML_CSS_Javascript_practice/tree/master/Frameworks/Angularjs/lib

Reference

http://angularjs.org/

https://gist.github.com/vojtajina/3354046

AngularJS Create Components

Simple Note

Modified official sample with personal comments.

Pre-request

AngularJS Controller

Testing Files

https://github.com/benbai123/HTML_CSS_Javascript_practice/tree/master/Frameworks/Angularjs/Basic/Basic_004__Create_Components

JS/CSS Libs

https://github.com/benbai123/HTML_CSS_Javascript_practice/tree/master/Frameworks/Angularjs/lib

Reference

http://angularjs.org/

AngularJS Wireup Backend

Simple Note

Official sample with personal comments.

To run this sample you will need need to setup a server since this sample rely on ajax that need to be run under http protocol.

Personally I do not like this sample, mixing too many things and not described well.

Pre-request

AngularJS Controller


Testing Files

Run test.html to test

https://github.com/benbai123/HTML_CSS_Javascript_practice/tree/master/Frameworks/Angularjs/Basic/Basic_003__Wireup_Backend

JS Libs

https://github.com/benbai123/HTML_CSS_Javascript_practice/tree/master/Frameworks/Angularjs/lib

Reference

http://angularjs.org/

AngularJS Controller

Simple Note

Official sample with personal comments.

Pre-request

AngularJS getting started

Testing Files

https://github.com/benbai123/HTML_CSS_Javascript_practice/tree/master/Frameworks/Angularjs/Basic/Basic_002__Controller

JS Libs

https://github.com/benbai123/HTML_CSS_Javascript_practice/tree/master/Frameworks/Angularjs/lib

Reference

http://angularjs.org/

AngularJS getting started

Simple Note

Official sample with personal comments.

Code

https://github.com/benbai123/HTML_CSS_Javascript_practice/blob/master/Frameworks/Angularjs/Basic/Basic_001__Getting_Started/test.html

JS Libs

https://github.com/benbai123/HTML_CSS_Javascript_practice/tree/master/Frameworks/Angularjs/lib

Reference

http://angularjs.org/

Font Awesome Getting Started

Simple Note

Result

Steps

1. Go to official site http://fontawesome.io/

2. Download and extract file to target folder

3. Follow Getting started page (http://fontawesome.io/get-started/), create html page

4. See icons page (http://fontawesome.io/icons/), write some icons and see whether it works well.

Download

Testing folder at github
https://github.com/benbai123/HTML_CSS_Javascript_practice/tree/master/bootstrap/font_awesome/getting_started

Bootstrap Getting Started

Simple Note

Steps

0. Preview official Getting started page (http://getbootstrap.com/getting-started/)

1. Go to github page of bootstrap (https://github.com/twbs/bootstrap) and download latest release (see Quick start section at that page)

NOTE: For some reason the download link at official site (http://getbootstrap.com/) not works for me.

2. Unzip downloaded file and copy dist folder into target folder.

3. Copy an official example (e.g., http://getbootstrap.com/examples/signin/) to see whether it works.

Done.

References

Bootstrap Getting Started
http://getbootstrap.com/getting-started/

Bootstrap github
https://github.com/twbs/bootstrap

Download

Testing folder at github
https://github.com/benbai123/HTML_CSS_Javascript_practice/tree/master/bootstrap/getting_started

Compile LESS with Java

Simple Note

From official site:

For production and especially if performance is important, we recommend pre-compiling using node or one of the many third party tools.

This article describe how to compile .less file to .css file in java code on server start-up.

Pre-request

LESS Getting Started
http://ben-bai.blogspot.tw/2013/10/less-getting-started.html

Do Something on Server Startup/Shutdown
http://ben-bai.blogspot.tw/2013/10/do-something-on-server-startupshutdown.html

Result

The same as the result in previous post.

Required jars

lesscss-engine-1.3.3.jar
http://mvnrepository.com/artifact/com.asual.lesscss/lesscss-engine/1.3.3

rhino-1.7R4.jar
http://mvnrepository.com/artifact/org.mozilla/rhino/1.7R4

commons-logging-1.1.1.jar
http://mvnrepository.com/artifact/commons-logging/commons-logging/1.1.1

Code

test.less

Copied from previous post, nothing changed.

https://github.com/benbai123/JSP_Servlet_Practice/blob/master/Practice/LESS/CompileLESSWithJava/WebContent/resources/less/test.less

less_test.html

Modified from previous post, load compiled css file instead of less file and do not load less.js.

https://github.com/benbai123/JSP_Servlet_Practice/blob/master/Practice/LESS/CompileLESSWithJava/WebContent/less_test.html

TestServletContextListener.java

Implements ServletContextListener, will compile less file to css file on server start-up.

package test;

import java.io.File;
import java.io.IOException;

import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;

import com.asual.lesscss.LessException;

import test.util.LESSUtils;

public class TestServletContextListener implements ServletContextListener {
    @Override
    public void contextDestroyed(ServletContextEvent sce) {
        // do nothing on server shutdown
    }
    // compile less on server startup
    @Override
    public void contextInitialized(ServletContextEvent sce) {
        try {
            String webContentPath = sce.getServletContext().getRealPath("/");
            LESSUtils.compile(new File(webContentPath + File.separator + "resources" + File.separator + "less" + File.separator + "test.less"),
                    new File(webContentPath + File.separator + "resources" + File.separator + "css" + File.separator + "test.css"));
        } catch (LessException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
}

LESSUtils.java

Contains utility function to compile less file, say Utils means (probably) will add more functions in future work.

package test.util;

import java.io.File;
import java.io.FileNotFoundException;
import java.io.IOException;

import com.asual.lesscss.LessEngine;
import com.asual.lesscss.LessException;

public class LESSUtils {
    public static void compile (File lessFile, File cssFile) throws LessException, IOException {
        if (lessFile == null 
                || !lessFile.exists()) {
            // less file should exist
            throw new FileNotFoundException("LESS file not exists !");
        }
        // create less engine
        LessEngine engine = new LessEngine();
        if (!cssFile.getParentFile().exists()) {
            // create folders for css file
            boolean cssFileCreated = cssFile.getParentFile().mkdirs();
            if (!cssFileCreated) {
                throw new IOException("Folders for CSS file are not created !");
            }
        }
        // compile less file to css file
        engine.compile(lessFile, cssFile);
    }
}

web.xml

Define listener.

https://github.com/benbai123/JSP_Servlet_Practice/blob/master/Practice/LESS/CompileLESSWithJava/WebContent/WEB-INF/web.xml

References

Java Compiler for Less CSS?
http://stackoverflow.com/questions/9739724/java-compiler-for-less-css

LESS Engine
https://github.com/asual/lesscss-engine

Download

Full project at github
https://github.com/benbai123/JSP_Servlet_Practice/tree/master/Practice/LESS/CompileLESSWithJava

LESS Recursive Mixin

Simple Note

Pre-request

LESS Getting Started
http://ben-bai.blogspot.tw/2013/10/less-getting-started.html

Code

It is funny to write stylesheet with recursive function but probably not a good practice.

index.html

Simple html page
https://github.com/benbai123/JSP_Servlet_Practice/blob/master/Practice/LESS/RecursiveMixin/WebContent/index.html

test.less

Define a mixin .box to create nested selectors recursively.

// comments to displayed in compiled css
/* compiled css */

// define variable
@base-color: #EEEEEE;
@dec-base: #111111;

// define Mixin behave like function
// parameter @idx with default value 1
.box(@idx: 1) when (@idx < 6) {
    // create selector
    .class@{idx} {
        // border with calculated border color,
        // e.g., #EEEEEE - #111111*1*2 = #CCCCCC
        border: 10px solid (@base-color - @dec-base*@idx*2);
        display: inline-block;
        // increase @idx,
        // call .box recursively to create nested selectors
        .box(@idx + 1);
    } 
}
// call .box with default @idx
.box();

Result

Click to view large image

References

Official site
http://lesscss.org/

Do a loop with LESS css
http://blog.thehippo.de/2012/04/programming/do-a-loop-with-less-css/

Download

Full project at github
https://github.com/benbai123/JSP_Servlet_Practice/tree/master/Practice/LESS/RecursiveMixin

LESS Getting Started

Simple Note

Code

Actually this is a pure html case, the only reason that I put it in a Dynamic Web Project is that I want to use the exiting run-jetty-run plugin in my Eclipse since I am lazy to config a server for it.

less_test.html

Simple html page, declare less file and load less.js. Say 'declare' since the .less file seems loaded by less.js with AJAX instead of load by link directly.

<html>
    <head>
        <!--  include .less file, need to include it before less.js -->
        <link rel="stylesheet/less" type="text/css" href="resources/test.less" />
        <!-- include less.js, will compile .less file at client side -->
        <script src="resources/less-1.4.2.min.js" type="text/javascript"></script>
    </head>
    <body>
        <!-- nested div -->
        <div class="class1">
            <div class="class2">
                <div class="class3">
                    <div class="class4">
                        <div class="class5"></div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

test.less

Stylesheet written by LESS.

// use // to comment in less file only
// use /* */ to commment in less and compiled css
/* compiled css */
// define variable
@base-color: #EEEEEE;

// define Mixin behave like function
// parameter @dec with default value #111111
.box(@dec: #111111) {
    // border with calculated border color,
    // e.g., #EEEEEE - #111111*2 = #CCCCCC
    border: 10px solid (@base-color - @dec*2);
    display: inline-block;
}

// nest selectors inside other selectors
.class1 {
    .box; // include .box with default value of parameter
    .class2 { // .class1 .class2
        .box(#222222); // include .box with @dec = #222222
        .class3 { // .class1 .class2 .class3
            .box(#333333);
            .class4 { // .class1 .class2 .class3 .class4
                .box(#444444);
                .class5 { // .class1 .class2 .class3 .class4 .class5
                    .box(#555555);
                }
            }
        }
    }
}

And less.js downloaded from official site of LESS.

Result

Click to view large image

Reference

LESS
http://lesscss.org/

Download

Full project at github
https://github.com/benbai123/JSP_Servlet_Practice/tree/master/Practice/LESS/GettingStarted

Notify ZUL from HTML

Simpole Note

This article describe how to notify zul from a html button click via ajax request, this obviously not the suggest pattern so just simple note.

Program

notify_zul_from_html.html
https://github.com/benbai123/ZK_Practice/blob/master/Components/projects/Components_Practice/WebContent/notify_zul_from_html.html

notify_zul_from_html.zul
https://github.com/benbai123/ZK_Practice/blob/master/Components/projects/Components_Practice/WebContent/notify_zul_from_html.zul

notify_zul_from_html__notify.zul
https://github.com/benbai123/ZK_Practice/blob/master/Components/projects/Components_Practice/WebContent/notify_zul_from_html__notify.zul

Online demo
http://screencast.com/t/IIg4Eg1XB