Posts

Showing posts from February, 2017

Muuri.js demo

Image
Muuri creates responsive, sortable, filterable and draggable grid layouts. It's very useful for both PC and mobile.  Muuri uses  Velocity  for animating the grid items (positioining/showing/hiding) and  Hammer.js  for handling the dragging. Hammer.js is an optional dependency that is only required if dragging is enabled, but Velocity is a hard dependency. The author is  working on 3.0 version now and I think this plugin will be popular in the future. And the offiicial demo is    demo  here. And I just practice how to use it easily.  Getting start! 1. Link js file in the body: < script src = " https://cdnjs.cloudflare.com/ajax/libs/velocity/1.4.2/velocity.min.js " ></ script > < script src = " https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.jss " ></ script > <!-- Needs to be within in body element or have access to body element --> < script src = " https://cdnjs.cloudflare.com/ajax/libs/muu

Building a bookmark application with javascript from Traversy Media

Image
I love this tutorial of javascript from Traversy Media. To be a web developer,the essentials skill is Javascript which I am working on it day by day. I'm so thrill that I found the video on Youtube. The author's name is Traversy Media on Youtube.Here is the video url  Youtube   and the github  . Here I am gonna learn step by step and mention the problems I've met. For the format of the site,he use the bootstrap  Narrow jumbotron and did a little changes to simplify. You can copy the layout from bootstrap  using Control+U to open the code.  Link the bootstrap inside head.And script inside the end of body. Making a form with id called myForm, you should set the each id for two of inputs respectively. The other main part id name is the place where the messages can be shown.  Copy CSS code from here . Brain brush: 1.When click the submit button, the saveBookmark function works. Remember prevent form from submitting. 2.Get the value of yo

前端面试中的常见的算法问题

Image
虽说我们很多时候前端很少有机会接触到算法。大多都交互性的操作,然而从各大公司面试来看,算法依旧是考察的一方面。实际上学习数据结构与算法对于工程师去理解和分析问题都是有帮助的。如果将来当我们面对较为复杂的问题,这些基础知识的积累可以帮助我们更好的优化解决思路。下面罗列在前端面试中经常撞见的几个问题吧。 Q1 判断一个单词是否是回文? 回文是指把相同的词汇或句子,在下文中调换位置或颠倒过来,产生首尾回环的情趣,叫做回文,也叫回环。比如 mamam redivider . 很多人拿到这样的题目非常容易想到用for 将字符串颠倒字母顺序然后匹配就行了。其实重要的考察的就是对于reverse的实现。其实我们可以利用现成的函数,将字符串转换成数组,这个思路很重要,我们可以拥有更多的自由度去进行字符串的一些操作。 function checkPalindrom ( str ) { return str == str.split( '' ).reverse().join( '' ); } Q2 去掉一组整型数组重复的值 比如输入: [1,13,24,11,11,14,1,2] 输出: [1,13,24,11,14,2] 需要去掉重复的11 和 1 这两个元素。 这道问题出现在诸多的前端面试题中,主要考察个人对Object的使用,利用key来进行筛选。 /** * unique an array **/ let unique = function ( arr ) { let hashTable = {}; let data = []; for ( let i= 0 ,l=arr.length;i<l;i++) { if (!hashTable[arr[i]]) { hashTable[arr[i]] = true ; data.push(arr[i]); } } return data } module .exports = unique; Q3 统计一个字符串出现最多的字母 给出一段英文连续的英文字符窜,找出重复出现次数最多的字母 输入 : afjghdfraaaasdenas 输出 : a