HashFlare
码农篇 - 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

parse_url

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

https://community.grafana.com/t/grafana-did-not-display-the-records-in-the-expected-order-in-table/4564

and

https://groups.io/g/grafana/topic/prometheus_data_not_sorted/4314229?p=,,,20,0,0,0::recentpostdate%2Fsticky,,,20,0,0,4314229

ThinkPHP Framework

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

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

Issues:

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

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

<configuration>

<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>

</system.webServer>

</configuration>

.htaccess

Options +FollowSymlinks -Multiviews
RewriteEngine on

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

Extension:

 

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

PSR-2 PSR-4 Composer

 

适用于bootstrap的ace的ThinkPHP框架分页

http://www.ichasem.com/?p=364

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
guidelines:
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
http://shackleford.me/wiki/index.php/Apache2

Roadmap

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

Environment

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).

–https://devtidbits.com/2011/07/01/cygwin-walkthrough-and-beginners-guide-is-it-linux-for-windows-or-a-posix-compatible-alternative-to-powershell/

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

https://www.quora.com/Whats-the-difference-between-a-VM-Docker-and-Vagrant

VM

Docker

Vagrant

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

–https://blog.zenika.com/2014/10/07/setting-up-a-development-environment-using-docker-and-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

http://derekmolloy.ie/resize-a-virtualbox-disk/#prettyPhoto

 

Tips

virtualenv

 

 

Aim to write your own owesome JavaScript Plugin

Powerful engine – D3

https://d3js.org/

Pie and Donut Charts in D3.js

Infinite Scrolling

6 jQuery Infinite Scrolling Demos

瀑布加载

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

editor

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

kindeditor

Trip.js 网站导航js

http://eragonj.github.io/Trip.js/

Grid Plugin

http://www.oschina.net/p/jquery-bsgrid

http://my.oschina.net/u/918621/blog/205281

http://www.jqueryrain.com/demo/jquery-grid-plugin/

BreadCrump 面包屑

Image Editor

jcrop

ellipsis for multiple line content

dotdot

 Swiper

jQuery UI Touch Punch

http://touchpunch.furf.com/

Spin / rotation

http://greensock.com/draggable

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

 

Multi-level Pie Chart / Multi ring donut Pie Chart

http://www.fusioncharts.com/dev/chart-guide/multi-level-pie-chart.html

 

ProgressBar animation

http://kimmobrunfeldt.github.io/progressbar.js/

http://progressbarjs.readthedocs.io/en/latest/api/shape/

 

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

https://devpost.com/software/patternlock

 

reference:

JQuery高级插件

超全超实用的Javascript类库和jQuery插件大全之二:文字处理,表格和列表处理,实用的javascript开发工具

JSON

https://jqueryui.com/sortable/

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

 

c#:
Xamarin

HTML5:
Intel XDK
PhoneGap
Sencha Touch

HTML&Ruby:
rhomobile

Node JS Framework:
JXcore
expressjs
Mojito
Meteor
Derby
Mean.js

Game Engine:
Unity
MoSync
Edgelib
Emo
Unreal Development Kit
ShiVa3D
Libdx
Papaya Social Game Engine
NME
SIO2

Other:
LiveCode
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

conclusion:

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.

https://git-scm.com/book/en/v2/Git-Branching-Rebasing
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
https://www.atlassian.com/git/tutorials/merging-vs-rebasing/conceptual-overview

git rebase is good for local cleanup,
local cleanup? team policy?
https://www.atlassian.com/git/articles/git-team-workflows-merge-or-rebase/

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

 

http://flsilva.com/blog/git-branching-and-merging/

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’.

Basics:
• 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.

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

profilewireframe

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
–https://en.wikipedia.org/wiki/Website_wireframe

Course&Certificate/课程&认证:

UI/UX Design

why is it important?
http://45royale.com/blog/importance-wireframing/

• The Future of Wireframes

Time to re-assess and understand how to make good use of Wireframes:
https://madebymany.com/blog/the-future-of-wireframes

• Wireframing Is Not a Religion

Wireframing is an important design method, a digital design board, you can amend or wipe out anytime
http://52weeksofux.com/post/866406780/wireframing-is-not-a-religion

• Five Commandments for Wireframing

Paul Boag is a fan of Wireframing, he believes that it is one necessity part of design
https://boagworld.com/design/wireframing-rules/

• 20 Steps to Better Wireframing

Possibly the biggest mistake in any development project is failure to plan.
http://blog.teamtreehouse.com/20-steps-to-better-wireframing

Some Resources and Round-Ups
• Tools

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

COTS: viso, etc.

• I Love Wireframing
 http://wireframes.tumblr.com/
 一个tumblog专注于线框,原型,实物设计。
• Wireframe Showcase
 http://www.wireframeshowcase.com/
 在这个网站可以查看一些基于线框设计的网站,可分析学习设计人员是如何将实体模型转化为设计的。因为线框和设计都是由设计者自己上传的,每个线框设计都包含了一个简短的说明。大部分的网站原来是数字实物模型,有容易修改和重新设计的优势。起结果是令人愉快的线框设计。
• Standard Screen Patterns for Web Interface Design

http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns
一些互动设计的原则和模式

• 50 Free UI and Web Design Wireframing Kits and Resources

https://www.smashingmagazine.com/2010/02/50-free-ui-and-web-design-wireframing-kits-resources-and-source-files/
这篇文章关注一些线框工具和独立的应用程序,包括一些你可以用来制作自己线框图的一些工具:线框工具集,浏览器窗口,表单元素,网格,Mac OS X元素和手机元素,你可以在任何图形编辑器中使用他们,PS,AI,甚至纸笔工具。

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

http://www.geekchix.org/blog/2010/01/03/a-collection-of-printable-sketch-templates-and-sketch-books-for-wireframing/
20个资源,用于应用程序开发的草图阶段。

• A Collection of Printable Web Browser Sketching and Wireframe Templates

https://speckyboy.com/a-collection-of-printable-web-browser-sketching-and-wireframe-templates/
这些可打印的草图模板都是特意为web设计人员设计的。附加有浏览器的版本说明(Safari,Chrome甚至Firefox)

• Useful(Offline) Utensils and Tookits for Designers

http://www.hongkiat.com/blog/useful-offline-utensils-and-toolkits-for-designers/

Free Wireframing Kits, UI Design Kits, PDFs and Resources – Smashing Magazine_files
当你可以使用一个预制指南来节省时间,更好的发挥你的创造力,为什么还要从头开始设计呢?在这篇文章中,你将得到很多很棒的免费工具,一个笔记集合以及一些要购买的产品来帮助你线下设计。

RANDOM POSTS

0 1344
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...