前端面试题

BySpy

这里是一些前端面试题,给出一种解决方案,仅供参考!

1. 请实现对象的深复制?

对象深复制,简单来说,就是重新申请一块内存来存储跟原来结构一样的对象。对深复制之后的对象进行修改,对原对象没有任何影响。

如何接入微信公众平台(nodejs)

BySpy

接入微信公众平台

1.填写服务器配置 2.验证服务器是否可用

1.填写服务器配置

在微信公众平台管理后台点击“开发者中心”,填写有效的服务器验证URLTokenEncodingAESKey(自定义或者随机生成),包括选择“消息加解密模式”。当你确定“提交”之后,微信服务器将发送GET请求到该URL链接…

Bower快速入门

BySpy

前言

Bower —— A package manager for the web

bower是一个包管理工具,或者说web资源的管理工具更为贴切。

“包”是什么

“包”是指一系列有意义的资源的集合,在bower这里,更多体现在bower.json文件,它是这些资源的配置文件,一个完整的包都应该有一个bower.json文件。

在sail.js上进行身份权限控制

BySpy

前言

先说一下业务需求:一个页面上有很多tab,每个tab都表示一个页面,现在想使用不用的身份来使用不同的tab(页面)。简单地讲,从View层上进行身份权限控制。所以这里主要讲的是在Sail.js上如何实现View层的“Polices”。

笔者的项目环境:Sails.js作为后台,前端使用jade

香港游之注意及建议

BySpy

前言

这次算做了一次“说走就走”的旅行——香港。写此文章,一是记录我的旅途&感受;二是希望提供一些信息或价值给初去香港或苦寻攻略的朋友。[2015-03-21]

从问题到解决方案之学习sailjs的polices

BySpy

1. Polices是什么,能干什么?

在sails应用中,Polices是一系列用来认证授权和访问控制的工具,能够在应用调用controlleraction之前进行拦截,做些认证授权和访问控制的逻辑处理。

Rockmongo连接远程mongodb

BySpy

这里的远程mongodb就以mongoHQ为例,就是说你想使用Rockmongo连接mongoHQ来进行管理。

mongoHQ

注明:测试环境是Ubuntu14.04 64bit / Rockmongo v1.1.3 / MongoDB v2.6.5

Ubuntu下配置splunk连接mongodb

BySpy

最近在试玩强大的分析log工具——Splunk,当然不是只能分析log,事实上还能分析关系型SQL或者非关系型NoSQL数据库里面的数据。对于关系型数据库,Splunk提供很好地支持,而对非关系型数据库,却需要一番“折腾”才能连接上。我使用的数据库是NoSQL开源代表——mongodb,下面分几步来配置Splunk连接mongodb。

给个人github主页自定义域名(最新)

BySpy

为什么想到要写此博文,这要从昨晚看到邮箱几封github bulid error的邮件说起,时值我写完一篇文章,然后push到远程的master分支,继续发现线上的博文并没有及时的更新,追查原因,发现了github发给我的邮件,截图如下:

github-error-alert-email

Ubuntu14.04安装rockmongo

BySpy

RockMongo是一个用来管理mongodb的可视化工具,是用PHP编写的一个web应用。此文章记录我在ubuntu14.04环境下安装rockmongo的过程步骤以及遇到的问题并解决,希望对你们有所帮助。

正如前面所说,安装工作大致分3个部分:

  • 安装apache和php环境;
  • 安装PHP对Mongodb的支持驱动;
  • 配置对Mongodb的支持;
  • 安装Rockmongo。

快速添加ssh

BySpy

这篇文章将讲述如何快速地添加ssh密钥到github,gitlab或者其他平台。

第一步:看机子有没有已经产生过SSH密钥

使用如下命令(Window与Linux通用),命令具体表示什么意思,这里就不解析了。

cd ~/.ssh
ls

响应式网站gilt.com之一:回顾&总结

BySpy

原文标题:Responsive Gilt.com Retrospective

原文作者:GREGMAZUREK 2014-07-01

tumblr_inline_n81n6pUEb91rjy8d3.jpg

最近,Gilt特别行动团队花了5周时间创造了一个能够响应式于移动终端竖屏和横屏的“遗产游戏”app。完成工作之后,我们聚集在一起,对前面所做的工作进行回顾总结。当然,我们也愿意把所学到的经验——将PC端友好体验转移到移动终端上来,并看起来就像Native App一样,分享给大家。这篇文章(系列5篇文章之第一篇)将分享如何进行一个成功的回顾总结会议。

响应式网站gilt.com之二:block与在选择器内的媒体查询对比

BySpy

原文标题:Responsive Gilt.com :Block vs. In-selector Media Queries

原文作者:GREGMAZUREK 2014-07-02

此系列文章主要分享我们在创造遗产应用过程中所得的经验。在第一篇文章中,分享了如何组织一个成功的回顾总结会议。那么在此文章中,主要讨论我们工作中所用到的技术以及如何组织媒体查询。

响应式网站gilt.com之三:selenium测试

BySpy

原文标题:Responsive Gilt.com: Selenium Edition

原文作者:SANCHEZJJOSE 2014-07-07

在本系列的第二篇文章中,我的同事Greg Mazurek讲了为什么在项目使用“在选择器内使用媒体查询”。采用这种模式的好处就是在未来开发中代码可维护性更强。那么,接下来我将讨论我们如何把相同的原则应用到测试实践中来。

响应式网站gilt.com之四:全屏模式

BySpy

原文标题:Responsive Gilt.com: The Full-Screen Modal

原文作者:THE-KDORMAN 2014-07-09

为了把网站Gilt.com在移动端做成响应式,我们基于特殊行动团队确定的几种响应式模式来“响应”我们网站布局。早点确定这些模式有利于帮助我们更有信心地作出响应式相关的决定。在这第四篇响应式相关博文里,我将与你分享如何发现和实现我们确定的最热衷设计模式之一:全屏模式!

[视]spotify公司文化

BySpy

原文标题:Spotify engineering culture (part 1)

原文作者:Henrik Kniberg 2014-03-27

介绍的是Spotify公司的自主管理、开发理念。

Node应用helloworld之结构解释与部署云端

BySpy

想实践Node?学习搭一下Node架构如何?还想部署云端?来吧,看看如何梦想成真。

准备工作

  • 注册云端帐号 —— 想部署到云端,又想免费的,总得要注册一个帐号吧。

响应式web设计之学习总结

BySpy

响应式设计可以概括为3个原则,

  1. 流布局

  2. 多媒体响应式

  3. 媒体查询

[译]使用html的meta标签:一些基础与最佳实践

BySpy

原文标题:Using Meta Tags in HTML: Some Basics and Best Practices

原文作者:Shaumik Daityari 2014-03-12

元数据通常被理解为‘描述数据的数据’,在web页面中的用途之一就是使用<meta>标签meta标签的内容一般都是表示关于HTML页面的信息,其作用是不可以被其它标签取代的。另外,meta标签还可以模拟一个HTTP响应头部(例如重定向到不同页面),同时,它还拥有像http-equivcharset这样的属性 ,在Mozilla开发者社区中有对元数据详细的文档说明。

[译]响应式web设计之浏览器兼容性

BySpy

原文标题:Understanding Responsive Web Design: Cross-browser Compatibility

原文作者:Annarita Tranfici 2013-03-13

这是理解响应网页设计系列6篇教程的第6篇

在上一篇文章中,我阐述了对在响应式设计中处理图像3种方案的观点,讨论了最好的解决方案来采用合适图像尺寸服务于各种尺寸的屏幕。那么,本文接下来将从另外一个角度来管理图像,那就是跨浏览器的兼容性。

为主域名添加子域名

BySpy

先说明我的主域名pigerla.com是在GoDaddy上面购买的,一年费用大概50+,当然是RMB,话说一年也快到期了-_-     。如题,就是为自己的主域名添加子域名(二级域名或者三级域名等)。以我的情况为例,需要准备的有3点:

[译]响应式web设计之浏览器兼容性

BySpy

[译]响应式web设计之响应式图像

BySpy

原文标题:Understanding Responsive Web Design: Responsive Imagery

原文作者:Annarita Tranfici 2013-02-27

这是理解响应网页设计系列6篇教程的第五篇

本文中,我将展示当一个web开发人员在创建响应式网站时都会遇到的典型问题:对图像的处理。或许你已知道,移动终端开发者面临的挑战是多不胜数的,使得图像适应多种屏幕尺寸无疑是最大的困难之一。现在有三种方案可供开发人员去选择开发响应式图像:与浏览器‘对抗’、放弃它、或者依赖服务器。接下来,我们去了解每种方案的优点与缺点。

[译]响应式web设计之定制网格布局

BySpy

原文标题:Responsive Web Design: Custom Grid Layouts

原文作者:Annarita Tranfici 2013-02-12

这是理解响应网页设计系列6篇教程的第四篇

在前面的文章中,我已介绍了“流布局”的特性和描述了如何使用响应式字体。在本文中,我将介绍一种应用广泛及非常著名的实践——网格布局。网格系统其实早已应用在印刷媒体上,只是在web和mobile上的应用才发展一段时间。

[译]响应式web设计之流布局

BySpy

原文标题:Responsive Web Design: Fluid Layouts

原文作者:Annarita Tranfici 2013-01-15

这是理解响应网页设计系列6篇教程的第三篇

前两篇文章中关注响应式web设计的清晰概念和如何响应式地使用字体之后,让我们来深人研究一下流布局。在此文中,我将演示当下是真正需要流布局的,以及当你可以选择不一定是响应式的不同解决方案。让我们接下来学习一些特定技术与应用。

[译]响应式web设计之清晰概念与实际应用

BySpy

原文标题:Understanding Responsive Web Design: Clear Concepts and Practical Applications

原文作者:Annarita Tranfici 2013-01-15

这是理解响应网页设计系列6篇教程的第二篇

一些读者或许好奇的是,人们为什么对“响应式web设计”(RWD)的关注度快速提高,开发人员都把此技术作为自己必备的技能之一,深入去学习理解这项新技术。这名称也常常作为前沿移动终端技术被提起。

[译]响应式web设计之字体响应式

BySpy

原文标题:Responsive Web Design: Using Fonts Responsively

原文作者:Annarita Tranfici 2013-01-18

这是理解响应网页设计系列6篇教程的第一篇

排版是响应式Web设计最重要的内容之一,如果你想内容能在所有尺寸屏幕上友好地显示,那就绝对必要地为移动设备优化字体。幸运的是,实现弹性字体的过程并不是那么困难。当我谈论弹性(在这种情况下,是一种指导原则),我们不能忽视指定字体来适应我们响应式网站。我们可能使用不同的单位标准来实现这个目标,包括pixel(像素),em,rem或者是百分比。那么选择一个正确的标准对设计一个可塑的,响应式的交互界面是至关重要的。

[译]初学foundation:foundation灵活的样式讲解

BySpy

原文标题:Foundation’s Sassy Styles Explained

原文作者:Matt Pilott , 2013-10-24

在本教程我们将学习包含在Foundation前端框架中的灵活的Sass样式以及能够用来做些什么。Sass比CSS版本提供更多自定义特性集合,再加上有快捷方式可以简单又快速地运用在样式项目上,例如顶部工具栏。

[译]初学foundation:使用sass和compass来搭建foundation开发环境

BySpy

原文标题:Setting up Foundation With Sass and Compass

原文作者:Matt Pilott , 2013-10-02

总的来说,使用Sass是一种很好地加速前端开发的途径,在我的每一个项目中都会使用它。Sass(跟其他预编译器一样)是允许嵌套样式、函数编程和支持混合的。Foundation到目前为止出了几个版本,之前我们都是在使用最常见的HTML/CSS版本,现在我们将讨论如何使用Sass来创建一个版本。

[译]初学foundation:粘性导航栏、灵活视频和zepto

BySpy

原文标题:Foundation for Beginners: Sticky Navigation, Flexible Video and Zepto

原文作者:Matt Pilott , 2013-08-15

在这一部分我们将学习一种样式不定的插件Magellan,这插件可以为你的网站创建出如粘性的导航栏。还会学习可见性class,从右到左的支持、按键、缩略图、灵活的视频功能和zepto的来龙去脉。我将详细解释用到的例子,并且讲解如何更好地在你的项目中实现这些特性。

[译]初学foundation:joyride、交换、表格和面板

BySpy

原文标题:Foundation for Beginners: Joyride, Interchange, Tables and Panels

原文作者:Matt Pilott , 2013-07-04

点击可下载示例源码

让我们继续为基于Foundation的项目添加更多的功能,如将学习Joyride插件,该插件帮助引导用户来使用你的站点;还会学习价格表格、标准表格和交换功能:一种新奇响应式图片工具。我们通过一些模版示例,你还可以下载源码来学习如何实现这些特性的。

[译]初学foundation:进度条、提醒、提示工具和mega下拉功能

BySpy

译者注:本文章是教程第八篇,欲学习第七篇,请点击初学Foundation之自定义表单和开关

原文标题:Foundation for Beginners: Progress, Alerts, Tooltips and the Elusive Mega Drop

原文作者:Matt Pilott , 2013-07-02

点击可下载示例源码

让我们继续学习如何使用其他Foundation技术集合,如进度条、提醒框、提示工具和mega下拉功能,也看看Zurb如何应用在网站上的。我们将添加所有这些组件到上一篇教程的“联系表单”演示代码中,并且使用一个定制的jQuery,因此你会更加理解这些元素怎样才能运行在自己的工程上的,让我们开始吧!

[译]初学foundation:按钮和下拉功能

BySpy

原文标题:Foundation for Beginners: Buttons and Dropdowns

原文作者:Matt Pilott , 2013-06-17

初学者初学Foundation程第六篇,将学习一下“按钮”、“下拉功能”和“清除”插件。

[译]初学foundation:定制foundation4顶部工具栏

BySpy

原文标题:How to Customize the Foundation 4 Top Bar

原文作者:Mark Teekman , 2013-09-06

Zurb开发的第4版本Foundation(简称为Foundation 4)使得顶部工具栏表现为非常突出,出色的顶部工具栏差不多成为一个由Foundation搭建起来网站的象征元素。今天我们将学习如何通过不同方式去实现它,把它放置在页面的其他地方,让你拥有自定义样式和响应式的水平导航菜单。

[译]初学foundation:顶部工具栏

BySpy

原文标题:Foundation for Beginners: The Top Bar

原文作者:Matt Pilott , 2013-07-13

先看一下Foundation首页的顶部工具栏,顶部工具栏包含很多内容,我们将进行内容分解来理解。

[译]初学foundation:导航栏

BySpy

原文标题:Foundation for Beginners: Navigation

原文作者:Matt Pilott , 2013-06-07

一个前端框架是否优秀,其中看该框架如何处理导航栏。初学Foundation,我们先来看几种形式用javascript工具实现效果的导航栏。我还会介绍另一种有益于你更好地成为Foundation开发者、很有用的工具。

[译]初学foundation:网格系统

BySpy

原文标题:Foundation for Beginners: The Grid System

原文作者:Matt Pilott , 2013-06-05

在学习Foundation系列文章中的上一篇:初学Foundation:入门篇,我们大概讲述了可以用这个框架来干什么,框架本身又可以做什么和如何自定义符合自己需求的框架。那么此文章就将深入地研究学习“网格系统”,过程中我将使用实例来演示。到最后,为了做出一些震撼的效果,我们还会学习对各种内容都可以实现滑动效果的插件:Orbit:Javascript插件

[译]初学foundation:入门篇

BySpy

原文标题:Foundation for Beginners: Getting Started

原文作者:Matt Pilott , 2013-06-05

对于很多传统Web开发,每次从零开始开发一个工程项目都是必经之路;当每个工程项目都是不一样的时候,去创建一个可重用的代码库却是一件非常棘手的事情。许多有经验开发者可能更愿意花时间去创建一些前端框架,然而这却又是一件巨大的任务,更不用谈维持最新的框架及最佳实践。

[译]利于网页设计师的强大工作流程小窍门、工具和技巧

BySpy

原文标题:Powerful Workflow Tips, Tools And Tricks For Web Designers

原文作者:Melanie Lang , 2013-10-02

设计和开发的工作是比较花耗时间的,尤其当该工程遇到一个新的挑战时,都把整个团队或者自由开发者陷进一个未知的领域。而且,时间是生产力的一个关键因素。有效地工作会提高我们工作竞争力,自我增值。

[译]基于设计的媒体查询

BySpy

原文标题:Design-Based Media Queries

原文作者:Rachel McCollin , 2013-10-4

在刚一开始的时候,我们已经把特定移动设备的媒体查询运用到我们的网站上,并且服务于我们(网站),因为当时我们只是需要一种应急式的响应式设计解决方案来适应iPhone和屏幕相似的智能手机。

Html5本地存储localstorage的一些基本使用

BySpy

HTML5本地存储API中的localStoragesessionStorage在使用方法上是相同的,区别就是使用sessionStorage,在关闭页面后就会被清空记录,而localStorage则会一直保存着。

记录ajax和url参数值编码的使用

BySpy

提取URL参数值

如有这么个需求,前端用js提取如下URL参数中name的值“锦城家居”,然后在应用到前端页面上去。

http://...../applyService.html?name=锦城家居

对serialize和jsonp的认识与使用

BySpy

今天,在项目中需要把表单域中大量的字段提交给后台,表单域内字段包括text,passwordradio等,也由于表单域数据量较大,因此form使用了post方法,并使用了jqueryserlalize()方法对表单值进行序列化,创建 URL 编码文本字符串,序列化按我的理解就是在每个表单域中,把各个表单元素值,其中需要包含“name”属性,按前后的顺序,通过&连接符进行链接起来,如下代码:

读书品味

BySpy

JavaScript DOM 编程艺术 第二版

  • 弱类型语言,意味着在任何阶段改变变量的数据类型。

  • 字符串、数值、布尔值。

  • JavaScript根本不要求在声明数组时必须给出元素个数。

  • 关联数组就是下标可以是字符串。

  • 全等操作符会执行严格的比较,不仅比较值,而且会比较变量的类型。

  • 在命名变量时,我用下划线来分隔各个单词;在命名函数时,驼峰命名法。

  • 节点:元素节点、文本节点和属性节点等。

聚少成多,积小致巨

BySpy

由于某些原因,导致此文章页面不能很好展示,烦请移步到【这里】。

前端分享会之讲css

BySpy

1.BFC有什么作用?

先抛出一个问题:一个简单应用 ———— 媒体对象,实现效果就是,例如是“图片 + 文字”组合,图片显示在左边,文字没有环绕图片地显示在右边。

前端分享会之正则表达式

BySpy

一个栗子:匹配URL的正则表达式

http://www.globalmarket.com:80/sayHello?name=aslan&age=20#good

[url]

微信公众平台为什么如此火

BySpy

注:此文章面向更多的是非技术人员的知识普及与分享!更多的技术问题欢迎讨论。

[译]为什么要用和如何使用字符图标

BySpy

原文为: Why And How To Use Icon Fonts

原文作者: Steven Bradley

图片是有诸多优点的,然而目前在网站设计这行业面临各种各样的挑战。图片不但增加了总文件的大小,还增加了很多额外的”http请求”,这都会大大降低网页的性能的。图片还有一个缺点就是不能很好的进行“缩放”,因此,有时候在“响应式设计”中需要使用图像的最好解决方案就是不去使用图片。

前端ps一些日常操作记录

BySpy

  1. 自动选择:打勾,表示点击可找出其图层;去勾,表示选择当前图层,可移动拖拽。
  2. 分散的图层可以合并一张图层。
  3. ctrl + delete : 取后背景色;alt + delete : 取前景色。
  4. ctrl + d : 取消选中图层。
  5. ctrl + t : 选中图层,可以进行拉伸旋转等操作。

搜索引擎优化

BySpy

搜索引擎优化的含义

搜索引擎优化的英文是Search Engine Optimization,简称SEO,是通过采用易于搜索引擎索引的合理手段,使得网站各项基本要素适合搜索引擎的检索原则并且对用户更加友好,从而更容易被搜索引擎收录及优先排序从属于SEM(Search Engine Marketing : 网络营销)。SEO的中文意思是搜索引擎优化,通俗理解是:通过总结搜索引擎的排名规律,对网站进行合理优化,使你的网站在百度和Google的排名提高,让搜索引擎给你带来客户。

Web前端性能优化31项

BySpy

“ High performance web sites lead to higher visitor engagement, retention and conversions ”

高性能网站会吸引以及留住更多的访问者!—— 引用于Google PageSpeed

用page Speed插件来提高网站性能

BySpy

说明 :阅读了“ Improving website performance with Page Speed ”之后,按照个人理解,同时也尝试翻译文章,但不会100%的照搬翻译,会有所删减。

1. Page Speed是什么?

Page Speed是Firefox浏览器和Chrome浏览器中的一个插件,作用就是评估(当前)页面的性能并且能够根据评估结果,给出如何去改进、提升页面性能的建议或方法。

编写html之创建良好标记

BySpy

我们编写HTML文档都力求文档结构良好,只要HTML文档结构良好,将很容易通过添加一层CSS作为修饰,让文档样式变得更加漂亮。那么我们如何设计来编写出正确、合理的文档结构呢?在这里主要讲“创建良好的标记”的结构、内容。

用jekyll Bootstrap搭建博客

BySpy

RT,借助Github Pages搭建个人博客。这里强调”个人”,是因为Github Pages既包括User/Organization Pages (可以理解为“个人主页”)和Project Pages(项目主页),这里围绕“个人主页”而展开。