最近一直在想如何利用 COS 简化静态博客的搭建过程。搜了很多的静态博客搭建过程，发现大部分的静态博客都要通过编译才能生成静态页面。功夫不负有心人，终于让我找到了一个超简洁博客的搭建方法。
通常来说，Web页面开发的流程大致是这样的：设计师（设计师不是美工，就像程序员不是码农一样）提供设计稿，通常是图片格式。然后前端的开发人员 （在ThoughtWorks我们称之为UI Dev）来手工的将图片转换为对应的HTML+CSS，往往还需要在各个浏览器中调试等。 大多数时候，设计师会提供色卡，或者至少前景色/背景色/高亮色的值给开发人员。如果没有的话，开发人员会用到一些工具如colorpicker, ruler之类来确保最终的效果和设计稿是一致的。 如果你观察过UI Dev的工作流程的话，你会发现基本
简单介绍 gulp是基于node开发的所以可以使用npm这个nodejs的包管理工具安装gulp，使用npm首先得配置node环境
2.关于github开源，登陆了俩天愣是没打开，暂时搁置此路线。目前我会临时把代码打包后实时上传到这里，需要同步一下的可以下载看看。
前言 任何技术优化都依托于业务的发展，随着QQ会员增值业务的重心转移到手Q移动端，对H5页面不仅要求加载更快，还需承载丰富多彩的运营活动，同时由于每个页面都意味着KPI收入，任何可能导致页面功能不可用的发布行为都是不可接受的。 本文为SDCC 2016（杭州站）的分享实录，介绍QQ会员的前端开发团队在手Q的hybrid模式下对H5页面的性能优化、组件化和持续集成方面的实践。 分享实录： 首先简单介绍一下自己，作为一名80后老腊肉，呆过若干创业团队；2012年加入腾讯超级QQ团队，负责前端开发工作；2013年
项目使用微前端框架 qiankun, 主应用通过登录的用户权限控制显示子应用以及对应菜单页面，以及页面中的按钮等
本质是监控文件修改，实时刷新浏览器，需要安装livereload插件和node.js插件，全局刷新
iSlider是一个表现出众，无任何插件依赖的手机平台javascript滑动组件。它能够处理任何元素，例如图片或者DOM元素
前端开发已经成为连接用户与互联网世界的桥梁，而SafeKodo的工具箱(codeweb在线运行代码环境)（https://www.safekodo.com/codeweb）正是为所有前端爱好者和开发者们提供的一个令人惊叹的在线平台。不再为繁琐的环境配置和代码搭建烦恼，SafeKodo能够让您随心所欲地编辑、预览和运行各种前端代码，包括原生HTML、JS、CSS，以及众多热门前端框架如Vue、React、Angular、Svelte等。在此您可以在浏览器上便捷的运行、记录您的想法和创意,直观的预览您的创意，您可以轻松展现创意，体验编程的乐趣，让您的前端开发之路更加轻松畅快！
随着前端开发的兴起，QQ也逐渐演变为Web与原生终端混合的开发模式。得到Web动态运营能力的同时，QQ也在交互响应速度、后台服务压力、海量用户集的带宽冲击等方面，受到了更多的挑战。在快速的Web运营节奏下，必须保证嵌入QQ的第三方业务也始终处于一个高质量的服务状态。针对这些问题，QQ团队除了采用动态CDN、后台渲染等全栈手段优化体验，也构建了围绕速度、成功率、页面异常等维度的监控体系来保障服务质量。
经常在仿站的时候会遇到下载别人网站上的图片、css、js 等资源，如果你是一个个的手动下载是很麻烦的，也很慢的。
做这个功能都是半个月之前的事情了，没想到一直耽误却一直都没有写下总结，尴尬。。。。。来来来，说正事
看着酷炫的可视化，有人会疑惑，是否有实实在在的用处。其实在商业、生产和运营场景中有大量类似的使用，如集团展览中心——用作政府和客户参观使用；城市交通管控中心——交通警务运营监控；证券交易大厅——实时股票交易情况；老板的办公室——BOSS驾驶舱。其中使用尤为较多的是动态数据地图，以及实时的数据大屏。
Visual Studio 2017 扩展 Visual Studio 2017 15.4.4 : 目前是最新的版本号，所有的工具&插件都支持这个版本号。所以请对号入座。 ReSharper : 首先的是Resharper,这个基本是目前是我开发过程中必备的工具集，唯一的缺点就是吃内存，所以你的内存要是低于8G，就不要使用它了。它的特点可以快速重构、高亮显示错误、导航和搜索都很方便、智能提示、智能复制这个我特别喜欢等等，用着它你会感受到很多惊喜。 Extensibility Tools :必备工具，他是基
实时预览工具只是为了达到所见即所得的效果而已， 适合初学者学习 Markdown ， 我们真正在进行写作的时候，其实是不需要实时预览的， 因为 Markdown 标记语言本身已经足够清晰了。
前阵子刚好遇到几个关于 webpack 方面的需求，特意找了一下这方面的书籍，阅读了一下，收益还是有一点，特此笔记记录一下。
大家对访问统计pv/uv肯定不陌生，一般我们访问一些网站，会在网站的最下方看到某某页面已经被访问了多少次。如下图所示。
/** * Created by Administrator on 2017/5/29. */ var webpack = require("webpack"); var htmlWebpackPlugin = require("html-webpack-plugin"); var ExtractTextPlugin = require("extract-text-webpack-plugin"); //nodejs的里的一个全局变量,它指向的是我们项目的根目录,入口文件的位置 module.exp
webpack打包原理 1、把一切都视为模块：不管是 CSS、JS、Image 还是 HTML 都可以互相引用，通过定义 entry.js，对所有依赖的文件进行跟踪，将各个模块通过 loader 和 plugins 处理，然后打包在一起。 2、按需加载：打包过程中 Webpack 通过 Code Splitting 功能将文件分为多个 chunks，还可以将重复的部分单独提取出来作为 commonChunk，从而实现按需加载。把所有依赖打包成一个 bundle.js 文件，通过代码分割成单元片段并按需加载 3、webpack.config.js的配置
webpack的原生支持上述2、3点内容，再结合官方提供的开放工具DevServer也可以很方便的做到第一点。DevServer会启动一个HTTP服务器用于服务网页请求，同时会帮助启动webpack，并接收webpack发出的文件变更信号，通过websocket协议自动刷新网页做到实时预览。
今天我们以真实的TP-LINK设备面板为模型，完成设备面板的搭建，和指示灯的闪烁和图元流动。 先来目睹下最终的实现效果：http://www.hightopo.com/demo/blog_tp
本文主要介绍了如何利用HT for Web实现一个自定义的TP-LINK面板，并通过实例代码展示了如何实现一个简单的TP-LINK面板。该面板支持PC端和移动端访问，并支持IPv6和IPv4网络。同时，本文还提供了相关的示例代码和配置说明，可以帮助读者快速掌握如何实现一个自定义的TP-LINK面板。
最近有一个需求：移动端需要展示用户在PC端做的笔记，而笔记内容是富文本形式——有图片，有文字，文字可以设置颜色、加粗、倾斜等等。同时，用户点击的时候能够语音朗读所点击的当前整句的内容。
但存在几个问题，不能实时更新数据，制作的是静态的仪表盘，每次生成仪表盘都要调整代码，不能一运行就直接生成可视化仪表盘。
在现在的前端开发中，前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始逐渐渗透到“大前端”的开发中。前端开发过程越来越繁琐，当今越来越多的网站已经从网页模式进化到了 Webapp 模式。它们运行在现代的高级浏览器里，使用 HTML5、 CSS3、 ES6 等更新的技术来开发丰富的功能，网页已经不仅仅是完成浏览的基本需求，并且Webapp通常是一个单页面应用(SPA)，每一个视图通过异步的方式加载，这导致页面初始化和使用过程中会加载越来越多的 JavaScript 代码，这给前端开发的流程和资源组织带来了巨大的挑战。
Netdata 是一款 Linux 性能实时监测工具.。以web的可视化方式展示系统及应用程序的实时运行状态（包括cpu、内存、硬盘输入/输出、网络等linux性能的数据）。炫酷的界面来显示你的服务器性能。还能显示Nginx ，Java项目等性能，具体操作的参考github上
JRebel热部署插件相信很多人都知道，但是这是一款商业插件，spring-boot框架也提供了类似的功能，即：devtools，关键是免费的! 使用方法如下： 一、添加 devtools依赖 dependencies { compile('org.springframework.boot:spring-boot-starter-web') compile('org.springframework.boot:spring-boot-devtools') compileOnly('or
实现Webpack的打包最基本的就是配置好入口、出口，npm install webpack后在根目录创建webpack.config.js,代码如下：
以下是对（前端）可视化工作的并不系统的总结，新手向，主要是想说一下前端如何组成、功能如何实现、资源如何请求，进而说到数据如何显示，并在最后列举了一些十分重要的参考资料（非常重要）。
使用交互式后端可以自动在屏幕上绘图，当你想实时绘图并直接在图片上进行其他操作时适合用这种后端。 刷新plot的函数：draw() 官方具体参数：
为了让提升用户体验，微软在IE5中引入了XMLHttpRequest， 简称XHR，XMLHttpRequest的出现，可以让网页无需刷新，即可从服务器获取最新的内容，这项技术也就是所谓的Ajax
整个博客系统包括用户管理，安全设置，博客管理，评论管理，点赞管理，分类管理，标签管理和首页搜索。前端使用boostrap，thymeleaf模板引擎，jQuery等等，后端使用springboot，springMVC，spring data，spring security管理安全，数据存储使用MySQL，H2，MongoDB，MongoDB主要是存储文件等等，其他还有ElasticSearch，这次项目就尝试使用Gradle，不用maven了。
博文来源：http://www.fhadmin.org/webnewsdetail1.html
在网络迅速发展的今天，人们的交流已经不再仅限与面对面，一个视频通话就能拉近彼此之间的距离，而在工业管控上却不仅仅局限于实时视频流的监控，HTML 本身拥有强大的 web 组件可供我们去实施一些好玩的例子，甚至加上一些简单有趣的动画和实时数据的对接，效果上可不止提高了一个水平。加上现如今已经启动许久的 工业4.0 衍生出的新一代 工业互联网 和不久才面世于众的 5G 新时代，数据可视化与网络带宽发展的碰撞，激发出了一代 3D 数据可视化监管的发展。而 Hightopo（以下简称 HT ）的 HT for Web 产品上的 web 组态提供了丰富的 2D 组态和 3D 组态效果，可以根据需求快速实现一套完整的数据可视化系统。本文将通过一个 HT 的 3D 组态实现的一个可视化分布式能源站系统带你走进丰富的组态的大门。
本文主要面对前端初级新手，是我从事前端项目外包这一年多时间里积累的经验，提供一系列的工具和资料来帮助新手更高效的从事前端开发。但是由于本人水平有限，所以只能写一些初级的方法和工具。没有添加诸如 grunt 这类的更高级的工具，因为我对这块目前还没有很多实战经验。
Cloud Studio 是基于浏览器的集成式开发环境（IDE），为开发者提供了一个稳定的云端工作站。
按需安装。考虑到有些插件对于一些新手来说暂时用不上，因此我将分为 前端新手→前端程序员→前端工程师 三个阶段来推荐需要安装的插件。
前不久我结合browser-sync+gulp+gulp-nodemon实现了一款生产环境热更新（我之前理解有点偏差，应该定义为热更新，不是热重载）的项目脚手架，那么，今天我们将使用Node.js实现一个热重载页面。
背景 最近在一个 SCADA 项目中遇到了在 Web 页面中展示设备报表的需求。一个完整的报表，一般包含了筛选操作区、表格、Chart、展板等多种元素，而其中的数据表格是最常用的控件。在以往的工业项目中，所有的表格看起来千篇一律，就是通过数字和简单的背景颜色变化来展示相关信息。但是现在通过各种移动 App 和 Web 应用的熏陶，人们的审美和要求都在不断提高，尤其是在 Web 项目中，还采用老式的数字表格确实也有点落伍了。 如何选择一个合适的 HTML 前端表格控件？此处可以省略一万字。哈哈。jQuery
本文介绍了如何利用HT的表格控件实现海量数据的加载和展示，重点讲解了在HT中如何实现动态数据加载和实时刷新，并给出了具体的示例代码。此外，还介绍了如何利用HT的图表控件实现数据的可视化展示，包括饼图、柱状图等。
具体操作：监听你想点击后不会丢失 input 焦点的那个元素的 mousedown 事件，回调里面调用 event.preventDefault()，会阻止使当前焦点丢失这一默认行为。
在网络迅速发展的今天，人们的交流已经不再仅限与面对面，一个视频通话就能拉近彼此之间的距离，而在工业管控上却不仅仅局限于实时视频流的监控，HTML 本身拥有强大的 web 组件可供我们去实施一些好玩的例子，甚至加上一些简单有趣的动画和实时数据的对接，效果上可不止提高了一个水平。加上现如今已经启动许久的 工业4.0 衍生出的新一代 工业互联网 和不久才面世于众的5G新时代，数据可视化与网络带宽发展的碰撞，激发出了一代 3D 数据可视化监管的发展。而 Hightopo（以下简称 HT ）的 HT for Web 产品上的 web 组态提供了丰富的 2D 组态 和 3D 组态 效果，可以根据需求快速实现一套完整的数据可视化系统。本文将通过一个 HT 的 3D 组态 实现的一个可视化分布式能源站系统带你走进丰富的组态的大门。
在网络迅速发展的今天，人们的交流已经不再仅限于面对面，一个视频通话就能拉近彼此之间的距离，而在工业管控上却不仅仅局限于实时视频流的监控，HTML 本身拥有强大的 web 组件可供我们去实施一些好玩的例子，甚至加上一些简单有趣的动画和实时数据的对接，效果上可不止提高了一个水平。加上现如今已经启动许久的 工业4.0 衍生出的新一代 工业互联网 和不久才面世于众的 5G 新时代，数据可视化与网络带宽发展的碰撞，激发出了一代 3D 数据可视化监管的发展。
作为电商行业来说，价格始终是一个比较重要的话题，尽早地了解价格的变动，对于运营也极为关键。而对于个人来说，就像加入购物车一样，对于想购买的商品可以同时对多个商家在售的同一个品加入购物车，这样想买的时候就可以在购物车里面进行比价，但是这个只能局限在个人的范围内，如果想要更多的人关注的话，加入购物车的操作就显然力不从心了，所以希望能得到如下效果的导航界面，并能实时刷新。
编辑导语 青云cloud：资源协作服务上线，实现更灵活的权限配置与资源共享;一登沈洽金:用“刷脸”让登录变得更简单;云适配：HTML5并非真正跨平台，想做移动办公还需要统一的企业级浏览器;Samsun
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
