码农篇 - For Developer

today I identified an issue when install OneBase.org php framework( which is based on Thinkphp 5.0)

the root cause is callling of php internal function parse_url, when your password includes special character like #, the parse_url function wrongly split the string,

work around is by adding a / at the tail of $url

small issue, but may waste plenty of time investigating it because of layering and encapsulation


very simple solution :

click on max/average whatever column you want to sort, click it once or twice until the result is sorted in your expected order, then save, so next time when you open it, it will display in expected sort order,

actually what happens is the grafana json file will change to for example:

“legend”: {
“alignAsTable”: true,
“avg”: true,
“current”: true,
“max”: true,
“min”: false,
“rightSide”: true,
“show”: true,
“sideWidth”: 300,
“sort”: “max”,
“sortDesc”: true,
“total”: true,
“values”: true

ppl asking and discussing it here




ThinkPHP Framework

sourcecode: https://github.com/top-think

tutorial: https://www.kancloud.cn/special/thinkphp5_quickstart


# URL rewrite
the small trick here is the ? mark, 注意加上?号可能就解决了你的404问题,甩掉index.php

<?xml version=”1.0″ encoding=”UTF-8″?>


<system.webServer> <rewrite> <rules> <rule name=”OrgPage” stopProcessing=”true”> <match url=”^(.*)$” /> <conditions logicalGrouping=”MatchAll”> <add input=”{HTTP_HOST}” pattern=”^(.*)$” /> <add input=”{REQUEST_FILENAME}” matchType=”IsFile” negate=”true” /> <add input=”{REQUEST_FILENAME}” matchType=”IsDirectory” negate=”true” /> </conditions>

<action type=”Rewrite” url=”index.php?/{R:1}” /> </rule> </rules> </rewrite>




Options +FollowSymlinks -Multiviews
RewriteEngine on

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.php?/$1 [QSA,PT,L]



PHP >= 5.4.0
PDO PHP Extension
MBstring PHP Extension
CURL PHP Extension

PSR-2 PSR-4 Composer




Typical Use case:
  1. mobile application scan and login on webpages, when request for a qrcode, the request normally a cgi request
  2. Server Management portal or proxy, you can control server and invoke some cmd on the webpage
Web application evolve

–> server-side scripting(some kind of CGI-script) (NOW modern fastcgi)

–> server-sider include (asp, php)
–> ajax(don’t need to refresh, but have to add api call,in a ‘pull’ fasion)
–> socket(html5 push)

Web Evolution: from CGI to Websockets (and how it will help you better monitor your cloud infrastructure)

Basic Q&A:

A&Q http://www.htmlhelp.org/faq/cgifaq.1.html
1.5: Should I use CGI or SSI or … { PHP/ASP/… }

CGI and SSI (Server-Side Includes) are often interchangable, and it may
be no more than a matter of personal preference. Here are a few
1) CGI is a common standard agreed and supported by all major HTTPDs.
SSI is NOT a common standard, but an innovation of NCSA’s HTTPD
which has been widely adopted in later servers. CGI has the
greatest portability, if this is an issue.
2) If your requirement is sufficiently simple that it can be done
by SSI without invoking an exec, then SSI will probably be
more efficient. A typical application would be to include
sitewide ‘house styles’, such as toolbars, netscapeised <body>
tags or embedded CSS stylesheets.
3) For more complex applications – like processing a form –
where you need to exec (run) a program in any case, CGI
is usually the best choice.
4) If your transaction returns a response that is not an HTML page,
SSI is not an option at all.

Many more recent variants on the theme of SSI are now available.
Probably the best-known are PHP which embeds server-side scripting
in a pre-html page, and ASP which is Microsoft’s version of a
similar interface.
1.6: Should I use CGI or an API?

APIs are proprietary programming interfaces supported by particular
platforms. By using an API, you lose all portability. If you know
your application will only ever run on one platform (OS and HTTPD),
and it has a suitable API, go ahead and use it. Otherwise stick to CGI.

More Comparison:

What is Common Gateway Interface (CGI)? https://stackoverflow.com/questions/2089271/what-is-common-gateway-interface-cgi

ASP.NET–What is ISAPI ?/What is CGI?/ Advantage Of ISAPI Over CGI
ASP.NET–What is ISAPI ?/What is CGI?/ Advantage Of ISAPI Over CGI

CGI programs are the most common way for Web servers to interact dynamically with users. Many HTML pages that contain forms, for example, use a CGI program to process the form’s data once it’s submitted. Another increasingly common way to provide dynamic feedback for Web users is to include scripts or programs that run on the user’s machine rather than the Web server. These programs can be Java applets, Java scripts, or ActiveX controls. These technologies are known collectively as client-side solutions, while the use of CGI is a server-side solution because the processing occurs on the Web server.
With CGI, the system creates a unique process for every request. Each time an HTTP server receives a request, it initiates a new process. Because the operating system must maintain all these processes, CGI requires many of resources. This inherent limitation makes it difficult to develop responsive Internet applications with CGI.

With ISAPI, requests do not require a separate process. Threads are used to isolate and synchronize work items, resulting in a more efficient use of system resources.

php mode selction
default mode: php_mod


The 2018 DevOps RoadMap https://hackernoon.com/the-2018-devops-roadmap-31588d8670cb


Hardware: ups(uninterrupted power supply)

cygwin+X11 + tmux + LVM + docker supervisord(grafana influxdb postgresql mongodb)

set up

1. windows

2. windows+VM

e.g http://www.cse.scu.edu/~mwang2/projects/CDH_installConfig1_13m.pdf

3. windows+POSIX (etc. cygwin)

e.g run Hadoop in cygwin on windows

4. windows + docker (hyper-v || virtual box)

e.g https://www.cloudera.com/documentation/enterprise/5-6-x/topics/quickstart_docker_container.html

5. linux

6. linux + docker

7. linux/win/mac + docker + vagrant

basic concepts
cygwin vs git bash and others

Hipsterising Windows: cygwin vs babun vs git bash vs powershell – the Onion scale

cygwin vs vm

Cygwin is intended to give Windows a number of Unix tools;

VMs are for when you want to run multiple operating systems at the same time. It’s like having two computers without the expense of purchasing two sets of hardware.

— https://superuser.com/questions/53881/virtual-machines-vs-cygwin

Cygwin is POSIX (Portable Operating System Interface for uniX) compliant which basically means it shares a common API with all the other compliant operating systems. It does not mean applications compiled for other POSIX systems such as Linux software will automatically work within Cygwin. To add new POSIX software you still need to compile the software source code under Cygwin using its own compilers and libraries. This process is a requirement with most POSIX compliant operating systems e.g. software complied for FreeBDS (Unix) will not work under Debian/Ubuntu (Linux).


cygwin vs putty

Cygwin provides ports of GNU/Linux utilities to offer such an environment in Windows. This allows you to use common GNU/Linux tools and methodology, to an extent, to work with your Windows system just as you would on your Linux boxes.
PuTTY is an SSH client and terminal emulator. SSH is a protocol for connecting to a system and open a shell or perform remote command execution. This is a common way of interfacing with a remote *nix system.
So, for example, if you wanted to use a Bash shell in Windows, you would install Cygwin. If, however, you are only interested in administering your Linux box remotely from Windows, you could choose to use PuTTY.

— www.reddit.com/r/learnprogramming/comments/qlt8w/cygwin_vs_putty/


docker vs VMs vs vagrant

Docker vs Vagrant: What You Need to Know https://www.ctl.io/developers/blog/post/docker-vs-vagrant





Linux Host docker+vagrant vs Win/mac Host docker+vagrant



Local Develop Environment

//virtualbox + xshell + xmanager + virtualenv

virtualbox (save the state) + cygwin (x11, tmux session) + winscp + virtualenv

+ docker(docker compose+docker volume)

Gparted Resize a VirtualBox guest Linux VDI Disk under Windows Host







Aim to write your own owesome JavaScript Plugin

Powerful engine – D3


Pie and Donut Charts in D3.js

Infinite Scrolling

6 jQuery Infinite Scrolling Demos


lazy load http://www.appelsiini.net/projects/lazyload


ueditor http://www.2cto.com/weixin/201503/381666.html


Trip.js 网站导航js


Grid Plugin




BreadCrump 面包屑

Image Editor


ellipsis for multiple line content



jQuery UI Touch Punch


Spin / rotation


spin with greensock   http://www.edgehero.com/blog/84/spin-with-greensock


Multi-level Pie Chart / Multi ring donut Pie Chart



ProgressBar animation




hmtl5/js http://greensock.com/

restive.js http://restivejs.com/ https://speckyboy.com/make-any-website-responsive/


Pattern Lock – 9 dot Pattern Lock http://ignitersworld.com/lab/patternLock.html








正则表达式在线生成 http://txt2re.com/



Intel XDK
Sencha Touch


Node JS Framework:

Game Engine:
Unreal Development Kit
Papaya Social Game Engine

Corona SDK

LinkedIn 使用Node.js+html5 开发手机app

Exclusive: How LinkedIn used Node.js and HTML5 to build a better, faster app


MPA (Multi-page Application)  SPA (Single-page Application) http://www.thinksaas.cn/topics/0/380/380109.html

1. introduce git flow

the development will happen in feature branches, here we have features for future release and feature for next release, when programmer start to develop a module or a feature, he will create a new feature branch initialled from develop branch, once done the development, feature branch owner will do the merge to develop, after develop branch has some features, it will be merged to release branch, and QA will do the testing, if any issue is found, it will be fixed in release and merge back to develop, and once the release branch is fully tested, someone will create a pull request for merging to master, after reviewer reviewed the code changes, he may approve the request and do the merge, ideally master branch should be ready for product deployment at any point of time, but if any defects or urgent changes required, we will do it in hotfix branch,once done, it will be merged to master branch and merge back to develop branch as well.
2. common scenario – git merge & git rebase
Consider what happens when you start working on a new feature in a dedicated branch, then another team member updates the develop branch with new commits. This results in a forked history.
Assume now you have done the development work on feature,  you want to merge it to develop branch: how many options you have: cherry-pick or merge or rebasing+merge

because cherry-pick is not a structured way to do the merge, so I’m not going to discuss it.

this is what happens behind the scene when you git merge in command line or use GUI tool.

it will merge between  C3&C4 and their most recent common ancestor C2 and create a new commit C5

rebase works by going to the common ancestor of the two branches C2, getting the diff introduced by each commit of feature C4 , saving those diffs to temporary files, resetting feature branch to the same commit as develop (the branch you are rebasing onto), and finally applying each change in turn C4 prime.Now you switch to develop branch, and do git merge, it will do a fast-forward merge.

but what will happen if someone updated develop branch in between, I mean between you have done rebase and start to do merge on develop.

if your purpose is to keep a linear clean commit history on an active branch, rebase may not be that helpful.


3. when to use rebase
Bad practice

rebase develop onto your feature.
The problem is that this only happened in your repository. All of the other developers are still working with the original develop. Since rebasing results in brand new commits, Git will think that your develop branch’s history has diverged from everybody else’s.
Golden rule – never use it on public branch(Is anyone looking at this branch?)

Good practice (go to previous slide)
Now, let’s say that the new commits in develop are relevant to the feature that you’re working on.
One typical situation,
when someone has done a hot-fix for master,
by right, this hot-fix will be merged back to develop branch,
and you cannot continue with your development without this hot-fix in your feature branch,
then you may consider using rebase to get latest from develop
To incorporate the new commits into your feature branch,.

most of the time you may work solely on one feature branch, but if more than one developer working on same feature branch

you want to keep updated with latest changes or you want to keep a clean graph/commit history


conflict is inevitable, by adopting appropriate merging strategy, we can mitigate the risk of getting too many conflicts.
another suggestion is always examine your current status, which branch you are in,is there any other people working on this branch, and are you behind remote branches or ahead of remote branches with how many commits
hopefully you may have a better understanding of the merging strategy and understand what happens behind the scene.

1. rebase is in local
all changes apply onto parent’s latest changes
then can do the merge
question: 1.how abt someone push new changes to parent branch
2.before rebase you pushed to remote, cannot do the fast-forward merge
2. merge in remote – pull request
latest changes and common ancestor changes
A forked commit history

active ‘parent’ branch

git rebase is good for local cleanup,
local cleanup? team policy?

don’t commit so frequently, like writing 1 line code then commit, other people who commit later will suffer



git: fetch and merge, don’t pull

Although this Articles simply collects and gathers links for all front-end developer’s or designer’s reference, but it’s really important to introduce or remind us about ‘Wireframing’.

• What's Wireframes and why is it important

A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.

网站的线框 ,也被称作页面蓝图或页面原理图,是展现网站页面的结构的可视化指导。
Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually being informed by a business objective and a creative idea.

The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together.


The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content.In other words, it focuses on what a screen does, not what it looks like.

Wireframes can be pencil drawings or sketches on a whiteboard, or they can be produced by means of a broad array of free or commercial software applications. Wireframes are generally created by business analysts, user experience designers, developers, visual designers and other roles with expertise in interaction design, information architecture and user research.

线框可以是白板上的铅笔画或草图,或者可以通过广泛的免费或商业软件等应用程序制作生成。 线框通常由业务分析师,用户体验设计师,开发人员,视觉设计师和其他在交互设计,信息架构和用户研究方面具有专长的人员创建。


Wireframes focus on:

The range of functions available
The relative priorities of the information and functions
The rules for displaying certain kinds of information
The effect of different scenarios on the display
The website wireframe connects the underlying conceptual structure, or information architecture, to the surface, or visual design of the website.
Wireframes help establish functionality, and the relationships between different screen templates of a website. An iterative process, creating wireframes is an effective way to make rapid prototypes of pages, while measuring the practicality of a design concept. Wireframing typically begins between “high-level structural work—like flowcharts or site maps—and screen designs.”
Within the process of building a website, wireframing is where thinking becomes tangible


UI/UX Design

why is it important?

• The Future of Wireframes

Time to re-assess and understand how to make good use of Wireframes:

• Wireframing Is Not a Religion

Wireframing is an important design method, a digital design board, you can amend or wipe out anytime

• Five Commandments for Wireframing

Paul Boag is a fan of Wireframing, he believes that it is one necessity part of design

• 20 Steps to Better Wireframing

Possibly the biggest mistake in any development project is failure to plan.

Some Resources and Round-Ups
• Tools

Opensource: http://pencil.evolus.vn/Default.html

COTS: viso, etc.

• I Love Wireframing
• Wireframe Showcase
• Standard Screen Patterns for Web Interface Design


• 50 Free UI and Web Design Wireframing Kits and Resources

这篇文章关注一些线框工具和独立的应用程序,包括一些你可以用来制作自己线框图的一些工具:线框工具集,浏览器窗口,表单元素,网格,Mac OS X元素和手机元素,你可以在任何图形编辑器中使用他们,PS,AI,甚至纸笔工具。

• A Collection of Printable Sketch Templates and Sketch Books for Wireframing


• A Collection of Printable Web Browser Sketching and Wireframe Templates


• Useful(Offline) Utensils and Tookits for Designers


Free Wireframing Kits, UI Design Kits, PDFs and Resources – Smashing Magazine_files


0 1478
Although this Articles simply collects and gathers links for all front-end developer's or designer's reference, but it's really important to introduce or remind us...