前端

显示标签为“前端”的博文。显示所有博文
显示标签为“前端”的博文。显示所有博文

2016年12月28日星期三

ss-panel魔改版安装过程



[v_notice]上一篇文章说到了安装配合ss-panel魔改版的SSR服务端,这里就来说说怎么安装ss-panel魔改版。
本站所提供的路径均为没有人工修改的路径。[/v_notice]

系统使用和ssr服务端的系统一致:centos6

使用lnmp搭建的环境


yum install screen git -y
screen -S lnmp
wget -c http://soft.vpser.net/lnmp/lnmp1.3-full.tar.gz && tar zxf lnmp1.3-full.tar.gz && cd lnmp1.3-full && ./install.sh lnmp

#lnmp vhost {add|list|del}
cd lnmp1.3-full && lnmp vhost add
#上传网站后建议执行:chown www:www -R /path/to/dir 对网站目录进行权限设置,/path/to/dir替换为你网站目录。

找到你新建的网站/usr/local/nginx/conf/vhost/你的域名.conf
root /home/wwwroot/your.web.site/public;

location / {
try_files $uri $uri/ /index.php$is_args$args;
}

按照如上方式修改
lnmp restart#重启lnmp

使用宝塔搭建的环境


yum -y install screen wget && echo -e “defencoding utf-8\nencoding utf-8 utf-8” >> /etc/screenrc  && screen -S bt
wget -O install.sh http://125.88.182.172:5880/src/install.sh && sh install.sh #宝塔的安装命令,来源:bt.cn,已经有更新请自己去宝塔网站查看更新

按照正常方式新建网站,然后点击修改

在配置文件中找到 root /home/wwwroot/your.web.site;


在后面加上/public,然后保存。
root /home/wwwroot/your.web.site/public;


添加伪静态


没有添加伪静态你会发现等你搭建好是ss-panel根本没法进入二级目录
找到伪静态,直接使用默认的,输入:
         location / {
try_files $uri $uri/ /index.php$is_args$args;
}

保存即可;

以上是两种环境下做出的准备,下面是正餐。


这是魔改版sspanel


[v_warn]使用lnmp环境[/v_warn]
cd /home/wwwroot/your.web.site
git clone https://github.com/esdeathlove/ss-panel-v3-mod.git tmp && mv tmp/.git . && rm -rf tmp && git reset --hard
cp config/.config.php.example config/.config.php
chown -R root:root *
chmod -R 755 *
chown -R www:www storage

php composer.phar install #必须安装,重要
cd /home/wwwroot/your.web.site/
chattr -i .user.ini
mv .user.ini ./public
cd ./public
chattr +i .user.ini
cd..
service nginx restart

[v_warn]使用宝塔环境[/v_warn]
cd /www/wwwroot/your.web.site
git clone https://github.com/esdeathlove/ss-panel-v3-mod.git tmp && mv tmp/.git . && rm -rf tmp && git reset --hard
cp config/.config.php.example config/.config.php
chown -R root:root *
chmod -R 755 *
chown -R www:www storage

php composer.phar install #必须安装,重要
cd /home/wwwroot/your.web.site/
chattr -i .user.ini
mv .user.ini ./public
cd ./public
chattr +i .user.ini

直接在宝塔控制面板中重启网页服务器nginxapache或其他。


导入 sql 目录下的 glzjin_all.sql


添加管理员


php xcat createAdmin

重置流量


php xcat resetTraffic

发送流量使用情况邮件


php xcat sendDiaryMail

下载客户端



php -n xcat initdownload

魔改版特有命令


下载IP解析库


php xcat initQQWry

安装cron并一键添加定时任务


[v_blue]这个简单.直接粘贴复制能命令运行完就可以了[/v_blue]

使用lnmp环境


yum -y install vixie-cron crontabs
rm -rf /var/spool/cron/root
echo 'SHELL=/bin/bash' >> /var/spool/cron/root
echo 'PATH=/sbin:/bin:/usr/sbin:/usr/bin' >> /var/spool/cron/root
echo '*/20 * * * * /usr/sbin/ntpdate pool.ntp.org > /dev/null 2>&1' >> /var/spool/cron/root
echo '30 22 * * * php /data/wwwroot/your.web.site/xcat sendDiaryMail' >> /var/spool/cron/root
echo '0 0 * * * php /data/wwwroot/your.web.site/xcat dailyjob' >> /var/spool/cron/root
echo '*/1 * * * * php /data/wwwroot/your.web.site/xcat checkjob' >> /var/spool/cron/root
/sbin/service crond restart

使用宝塔环境


yum -y install vixie-cron crontabs
rm -rf /var/spool/cron/root
echo 'SHELL=/bin/bash' >> /var/spool/cron/root
echo 'PATH=/sbin:/bin:/usr/sbin:/usr/bin' >> /var/spool/cron/root
echo '*/20 * * * * /usr/sbin/ntpdate pool.ntp.org > /dev/null 2>&1' >> /var/spool/cron/root
echo '30 22 * * * php /data/wwwroot/your.web.site/xcat sendDiaryMail' >> /var/spool/cron/root
echo '0 0 * * * php /data/wwwroot/your.web.site/xcat dailyjob' >> /var/spool/cron/root
echo '*/1 * * * * php /data/wwwroot/your.web.site/xcat checkjob' >> /var/spool/cron/root
/sbin/service crond restart

安装大概就是这样,接下来是配置ss-panel


在这里修改,如果是lnmp推荐使用winscp直接修改,如果是宝塔,直接使用文件管理功能修改。
所在位置如下:
/home/wwwroot/your.web.site/config/.config.php #lnmp环境
/www/wwwroot/your.web.site/config/.config.php #lnmp环境


注意


在使用中,有一些小注意,慢慢补充。
1、测试通讯?有返回pong就表明可以正常通讯了

curl your.web.site/mod_mu/func/ping?key=XXX —silent


error:14090086:SSL routines:ssl3_get_server_certificate

wget -O /etc/cacert.pem http://curl.haxx.se/ca/cacert.pem


然后去php的配置文件里设置

openssl.cafile=/etc/cacert.pem


2、添加节点时,请注意用 " - "来分割。

前面为节点名,后面为方式。

比如 “香港 1 - Shadowsocks”
3、顺序的具体参数如下
0=SS
1=VPN
2=SSH
3=PAC
4=APN 描述文件外链
5=Anyconnect
6=APN
7=PAC PLUS
8=PAC PLUS PLUS



以下为需要修改的内容:

// !!! 修改此key为随机字符串确保网站安全 !!!
$System_Config['key'] = 'RQs12d45s';
$System_Config['debug'] = 'ture'; // 正式环境请确保为false
$System_Config['appName'] = '这是一个测试站点'; //站点名称
$System_Config['baseUrl'] = 'https://your.web.site'; // 站点地址
$System_Config['timeZone'] = 'PRC'; // RPC 天朝时间 UTC 格林时间
$System_Config['pwdMethod'] = 'sha256'; // 密码加密 可选 md5,sha256
$System_Config['salt'] = ''; // 密码加密用,从旧版升级请留空
$System_Config['theme'] = 'material'; // 主题
$System_Config['authDriver'] = 'cookie'; // 登录验证存储方式,推荐使用Redis 可选: cookie,redis
$System_Config['sessionDriver'] = 'cookie';
$System_Config['cacheDriver'] = 'cookie';
$System_Config['tokenDriver'] = 'db';

//$System_Config['version'] = 'Glzjin mod-2016042210000';

// mu key 用于校验ss-go mu的请求,半角逗号分隔
$System_Config['muKey'] = '';
// 邮件
$System_Config['mailDriver'] = 'smtp'; // mailgun or smtp

// 用户签到设置
$System_Config['checkinMin'] = '1989'; // 签到最少流量 单位MB
$System_Config['checkinMax'] = '8964'; // 签到最多流量

//
$System_Config['defaultTraffic'] = '100'; // 用户初始流量 单位GB

// 注册后获得的邀请码数量
$System_Config['inviteNum'] = '0';

# database 数据库配置
$System_Config['db_driver'] = 'mysql';
$System_Config['db_host'] = 'localhost'; // mysql服务器地址(确认已经开启远程访问权限)
$System_Config['db_database'] = ''; // SSR的数据库名称
$System_Config['db_username'] = ''; // 访问数据库的用户名
$System_Config['db_password'] = ''; // 数据库的密码
$System_Config['db_charset'] = 'utf8';
$System_Config['db_collation'] = 'utf8_general_ci';
$System_Config['db_prefix'] = '';

# smtp
$System_Config['smtp_host'] = '你的邮件服务提供商smtp地址';
$System_Config['smtp_username'] = '你的电邮地址如:blog-master@digac.cc';
$System_Config['smtp_port'] = 'smtp端口号(推荐使用ssl端口号)';
$System_Config['smtp_name'] = '你的邮件名称,邮件接收者可见名称,如:膜法服务-digac.cc';
$System_Config['smtp_sender'] = '你的电邮地址,如:blog-master@digac.cc';
$System_Config['smtp_passsword'] = '你的电邮密码';
$System_Config['smtp_ssl'] = 'true'; // 推荐启用邮件的ssl加密

设置用户的链接端口,随机

#端口池
$System_Config['min_port']='10000';
$System_Config['max_port']='65535';

关于加密方式和混淆

#注册时默认加密方式
$System_Config['reg_method']='chacha20'; // 我已经修改了,或者使用你喜欢的加密方式(一定要 小写)

#注册时默认协议
$System_Config['reg_protocol']='auth_sha1_v2_compatible'; // 我已经修改了,或者使用你喜欢的协议

#注册时默认协议参数
$System_Config['reg_protocol_param']='';

#注册时默认混淆方式
$System_Config['reg_obfs']='tls1.2_ticket_auth_compatible'; // 我已经修改了,或者使用你喜欢的混淆方式

其他问题再根据情况来看。


链接:安装SSR服务端

非常重要




如果安装过程中出现了各种问题,请打开调试模式哟

2016年5月11日星期三

20款JavaScript开发框架推荐给前端开发者


下面给大家提供了一个用于 HTML5 开发的各种用途的 JavaScript 库列表。这些框架能够给前端开发人员提供更好的功能实现的解决方案。如果你有收藏优秀的框架,也可以在后面的评论中分享给我们。

1. EasyStar.js


easystar
If you build HTML5 games or other interactive content, then be sure to check outEasyStar.js for asynchronous pathfinding in JavaScript. You can set all sorts of parameters for how paths are calculated based on your own needs through the API.

2. Resumable.js


resumablejs
It’s a JavaScript library providing multiple simultaneous, stable and resumable uploads via the HTML5 File API. The library is designed to introduce fault-tolerance into the upload of large files through HTTP. This is done by splitting each files into small chunks; whenever the upload of a chunk fails, uploading is retried until the procedure completes. This allows uploads to automatically resume uploading after a network connection is losteither locally or to the server. Additionally, it allows for users to pause, resume and even recover uploads without losing state.

3. Envision.js


envision
Envision.js is a library for creating dynamic, interactive, and fast HTML5 visualizations from your data. Create time series visualizations with real-time or existing data, financial charts, and much more.

4. Zebra


zebra
Zebra is a JavaScript library that comes with a bunch of rich user interface components for creating desktop-like layouts. The UI elements are built with HTML5 canvas, colored with CSS and expected to be rendered the same on all modern browsers. There are 30+ UI components including grid, tabs, menu, form elements, menu and much more.

5. Chart.js


chartjs

Chart.js is an easy, object oriented client side graphs for designers and developers. You can visualise your data in 6 different ways. Each of them animated, fully customizable and look great, even on retina displays. Chart.js uses the HTML5 canvas element. It supports all modern browsers, and polyfills provide support for IE7/8. Chart.js is dependency free, lightweight (4.5k when minified and gzipped) and offers loads of customization options. it is licensed under MIT License.
6. CanvasQuery

Canvas Query
CanvasQuery is a JavaScript library that eases working with HTML5 canvas and adds lots of new methods to it. The library provides a jQuery-like syntax and methods added are mostly for image manipulation (like masks, blur, crop or fill mask). It also brings blend modes, new shapes, text wrapping and much more. CanvasQuery can be used with or without jQuery, has methods for color conversion and can be extended with plugins.

7. AristoChart


aristochart
Aristochart is a sophisticated but simple library for flexible line charting with canvas. It takes care of managing the data, while you can focus on the aesthetics.

8. Gauge.js


gauge
gauge.js is a highly configurable 100% native looking animated JavaScript/CoffeeScript gauge with no dependencies. No images, no external CSS – just pure canvas.

9. Heatmap.js


heatmapjs
heatmap.js is a JavaScript library that can be used to generate web heatmaps with the html5 canvas element based on your data. Heatmap instances contain a store in order to colorize the heatmap based on relative data, which means if you’re adding only a single datapoint to the store it will be displayed as the hottest(red) spot, then adding another point with a higher count, it will dynamically recalculate.

10. Audio5js


Audio5js
Audio5js is a lightweight JavaScript library that solves this compatibility issue nicely. It provides support for multiple codecs and fallback to a Flash-powered MP3 player when needed. The library auto-detects the browser, knows its capabilities and loads the right player with the right codec. An API exists for controlling the player and has the functions for “load, play, playPause, pause, volume and seek”. Also, there are methods for getting the details (playing, duration, position, load-percent, seekable or not) of the item being played.

11. KineticJs


kineticjs
KineticJS is an HTML5 Canvas JavaScript library that extends the 2d context by enabling canvas interactivity for desktop and mobile applications. You can draw your own shapes or images using the existing canvas API, add event listeners to them, move them, scale them, and rotate them independently from other shapes to support high performance animations, even if your application uses thousands of shapes. Served hot with a side of awesomeness.

12. html5sql.js


html5sql
html5sql is a light JavaScript module that makes working with the HTML5 Web Database a whole lot easier. Its primary function is to provides a structure for the SEQUENTIAL processing of SQL statements within a single transaction. This alone greatly simplifies the interaction with the database however it doesn’t stop there. Many other smaller features have been included to make things easier, more natural and more convenient for the programmer.

13. Buzz


buzz
Buzz is a small but powerful Javascript library that allows you to easily take advantage of the new HTML5 audio element. It provides tons of methods for taking advantage of the audio element and provides a way to group sounds and offers many methods to control them. It degrades gracefully on non-modern browsers.

14. Modernizer


modernizr
Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites. It lets you target specific browser functionality in your stylesheet by adding classes to your element. What?s easy is you don?t need to actually write any Javascript code to use this.

15. Easeljs


easeljs
The Easel Javascript Library provides a retained graphics mode for canvas including a full, hierarchical display list, a core interaction model, and helper classes to make working with Canvas much easier.

16. Collie


collie
Collie is a Javascript library that helps to create highly optimized animations and games using HTML 5. Collie runs on both PC and mobile using HTML 5 canvas and DOM.
Collie can stably process multiple objects using rendering pipelines and supports useful features including sprite animation and user events. Stably supports iOS and Android, and renders with an optimized method for each platform. Also easily responds to retina display.

 

17. Deck.js


deckjs
Deck.js is a lovely JavaScript library for creating HTML presentations. While advanced users can build totally custom outputs, there are templates and themes for novice users to create a standard slideshow with no effort.

18. Canvas Loader


canvasloader
CanvasLoader is a JavaScript UI library for drawing and animating circular preloaders with HTML5 canvas. Using a simple function, a canvas element (loader) is created inside a placeholder div and multiple instances can be created at the same page. There are few different loader types supported and they can be customized in many ways like color, density, speed, diameter, fading, FPS and scaling. Also, functions exist for getting the values of each parameter. Optionally, a web-based creator helps building the loader image by setting the values, previewing the output and downloading the HTML file.

 

19. D3.js


d3js
D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

20. Joint.js


JointJS
JointJS is a modern HTML 5 JavaScript library for visualization and interaction with diagrams and graphs. It can be used to create either static diagrams or, and more importantly, fully interactive diagramming tools and application builders. JointJS makes it easy to create visual languages & tools of various kinds.

2016年5月10日星期二

如果要学习web前端开发,需要学习什么?


遇到很多新手,都会问,如果要学习web前端开发,需要学习什么?难不难?多久能入门?怎么能快速建一个网站?工资能拿到多少?还有些让我推荐一些培训机构什么的要去学习。我建议是自学,实在是觉得自己没有这个能力,确实是需要一个老师的话,那你还是自己做主找个老师吧!为什么要自学呢,现在的老师水平都可以说是参差不平,运气好,你遇到个好老师,把毕生的经验和技巧都教给了你,运气不好,遇到个照本宣科的老师,那你的知识也会仅仅局限于教材!也许还有更糟糕的是,学到的书本知识两年前就已经开始有了大的变化,你并不知道关于更多的web设计这方面的知识。如果在这样的情况下,都还不如那些闭关自学的学生。

学习最好的老师就是兴趣,没有兴趣而言,这条路我相信你是走不长远的,除非你有其他比如说生活压力,工作压力等让你不得不这样坚持下去。我刚开始接触web网页设计的时候,教材都是以table来布局的,看到插入table生成了很多标签代码后,tr里面一个个td,理不清楚这个里面怎么回事。敷衍的学习了一个学期。还是没学到什么。真正学到的还是停留在怎么新建,怎么保存。

如果你还是在校学生,那你得好好上课,大学的教材普遍来讲都是知识面浅的。虽然很多知识看起来用处不大,学起来也很枯燥,让你觉得浪费时间。但这些书本上最基础的知识你都不能掌握,那你以后怎么追求更精湛的技术呢。所以不要逃课,把基础知识掌握了,别小看这个基础知识,它非常重要,基础扎实是否也会决定你在一个职业能走多远。

我是毕业了后从文员转到编辑再到技术员当然这期间工资就像是阶梯一样,虽然这差距也不是很大,都离不开那些曾经被我遗落角落的专业课本。生活上的压力迫使我这样做,我知道自己要什么,当一个文员没有追求,感觉过着30、40岁人的生活,接电话、发email、整理报表,每个月都有白领的工资...浪费的不仅仅是自己的青春,还有这大学几年昂贵的学费。后来就愈来愈想掌握一门技术,想去培训学校学习一段时间,但是现实是我没有钱,闭关一个星期,重拾课本,再看看那些讨厌的table,虽然out了,但是确实会发现很多基础再基础不过的东西,利用互联网,不明白的就百度,作为一个过来人,我觉得我自己走了不少弯路,所以,有必要提醒你们一下,一定要明确自己的目标,摆正自己的位置,最好掌握一门技术。

了解web前端

Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web1.0时代产物,那时网站的主要内容是静态的,用户使用网站的行为也以浏览为主。2005年以后,互联网进入Web2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。说得直白点就是美工photoshop,交互设计,flash,js,html+css。就小规模公司而言,一个技术员都得会这几样技能,这样很锻炼人的,慢慢的你就会成为公司的主力。大规模的公司把这些分得很细,所以,你可以精通一门,熟悉其他的,进军大公司。

网页开发工具

学习web前端开发,网页开发工具有FrontPage,会用 Word 的人很容易学会FrontPage。还有一个常用的是Dreamweaver。这两种都是使用最多的HTML网页制作工具,我使用的是Dreamweaver cs6,因为这套软件提供了一套直观的可视界面,融合了html5一些新的内容。包括网格布局什么的。

学习内容

HTML、CSS和JavaScript。html是内容,css是表现,javascript是行为。前端开发的门槛其实非常低,与服务器端语言先慢后快的学习曲线相比,前端开发的学习曲线是先快后慢。所以,对于从事IT工作的人来说,前端开发是个不错的初入点。也正因为如此,前端开发的领域有很多自学成“才”的同行。html是最基础的,现在流行的是html5设计,先学会网页布局。css是用来美化html页面的为页面提供布局和格式。最后再学javascript。如果你把每天看电影、看电视剧的时间用来学习,我想一个星期入门是没有问题的。

基础知识:

1. html + css。这部分建议在 www.w3school.com.cn上学习,边学边练,每章后还有小测试。之后可以模仿一些网站做些页面。本站提供的个人博客模板www.yangqq.com/download/都是比较简单的单页,可以下载下来模仿自己做一个。理解css每个元素的属性,样式的实现不一定只有一种写法,多想一想还有没有什么需要改进的地方。

2、JavaScript。不是所有的网页都必须有js,但是要想实现一些超酷的功能和界面的时候,就需要涉及到js。如果没有其他编程语言的基础的话,学起来可能要费些力,还是建议先在 w3school上学习。之后建议马上看《javascript语言精粹》

3、Photoshop、flash。熟悉会一点儿就行了,没必要全部都学得精通,当然如果你在学习的过程中,发现你ps或者flash比较感兴趣的话,也可以尝试做美工这一行。

4、html5和css3。可以先了解一下,然后再入手。毕竟IE的浏览器大多还不支持。

5、浏览器兼容。懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准。代码能兼容主流浏览器Firfox,Chrome、Safari、IE、Opera。虽然IE6很多都不兼容,但现在还使用的人还是有的。W3C验证地址:http://jigsaw.w3.org/css-validator/通过验证指定URI的CSS内容,可以帮我们检查一下有没有错误。

6、熟悉一门后台编程语言 asp、php、jsp等

web前端设计师前景

遇到很多想换行的朋友,第一句就问,这行赚钱吗?我相信一句话,没有付出,是没有回报的!前面已经说过了,咱们这行门槛是很低的,所以薪资阶段也不一样。2000初入这行的现在还普遍,工作经验2年以上,有很多代表性作品的时候,工资在4000左右;高手级别的估计在6000左右,大师级别这个阶段的薪资参考:10000以上(上海北京深圳为例)网页设计师课程一般包括:Photoshop、Fireworks、用户界面设计实操,xhtml、css、dreamweaver、网站架构与网站策划、flash动画制作,域名与空间、ftp、dhtml、javascript、动态交互网站(asp、php、aja)