Javascript

add news feed

post a story

Have you ever meet a brash punk kid that annoys you to no end but he's so damn talented that you can't help but want to work with him? That's how I felt when I first met David Walsh several years ago. Since then, I've see...
Have you ever meet a brash punk kid that annoys you to no end but he's so damn talented that you can't help but want to work with him? That's how I felt when I first met David Walsh several years ago. Since then, I've seen him mature into a respected and often quoted software developer and most recently, a new dad. He hasn't lost his snark and feistiness and he continues to hone his skills daily, often sharing his best tips on his awesome namesake blog.It's time to get a little more info on what makes David tick and I had the opportunity to hit him with some tough questions.Q Silly question, but why did you go with a ".name" domain for your blog?My blog's domain was originally "bludice.com", but I decided to brand the blog after myself since BluDice doesn't mean anything and it certainly wouldn't help me in my career path. All of the relevant .com's were taken and since I wanted to brand my blog after myself, .name just seemed to fit. In hindsight, I should have tried harder to find a .com. I bought "david-walsh.com" a few years ago, so maybe I'll migrate to that some day.Q When we first met, you were a big proponent of MooTools. Are you still involved with the project?I'm not involved in the project anywhere near as much as I used to be and not as much as I would like to be. Job circumstances (working at SitePen for two years, which is a Dojo shop) took my attention away from MooTools. I'm still in the MooTools development IRC channel each day and still keep up with where the next version of MooTools is at, so I'm involved enough to know what's going on at all times. I also hope to make it to the next MooTools Hackathon in London.Q It's safe to say that jQuery won the hearts of most web developers. How did that affect the roadmap for MooTools?MooTools was created to provide a modular, compact, Class-based JavaScript utility, which was different than jQuery's goal at the time. jQuery's popularity didn't affect the MooTools roadmap at all. MooTools' goals and mission never changed beyond what we set for ourselves. Developers believe there is a competition or hatred between the JavaScript frameworks, and it simply doesn't exist, nor did it ever.Q There was always this "thing" between the jQuery & MooTools teams (I like to call it hyper-competitiveness). It seemed like both should've been able to co-exist but it didn't quite always work out that way. From the MooTools perspective, what were the underlying issues you saw?Creating crap code is possible with any framework…I can't answer this for the MooTools team, so my answer strictly represents my own thoughts. The tension between jQuery and MooTools was built up by members of the community, not necessarily the team members themselves. Maybe there was more on the jQuery side, but I know that we didn't give jQuery much thought.The main issue that jQuery has fought, from the perspective of other JavaScript framework users (not just MooTools), is that the low barrier of entry enables "n00b" developers to create a lot of unoptimized, crap code. Creating crap code is possible with any framework, but the other frameworks required more JavaScript knowledge and thus were more able to avoid this problem, to a degree.I also get the feeling that other framework users get hung up on jQuery's popularity and seeing it as an inferior toolkit; i.e. the "McDonald's" analogy that they're super popular but that doesn't make them good. Unfortunately in my experience in having worked within a whole bunch of different JS toolkit communities, jQuery seems to get the brunt of negative comments.I've been long accused of being a "jQuery hater", and while I'll admit that jQuery isn't my cup of tea and I don't choose to use it on my personal projects, I far from hate jQuery. It's a tool, like any other, it has been hugely helpful to millions of developers around the wo
about 1 hour ago
Our client TescaraHats (name changed for commercial reasons), a European market leader in manufacturing customized hats, decided to expand its market reach with an e-commerce site where its potential customers could choose, customize and...
Our client TescaraHats (name changed for commercial reasons), a European market leader in manufacturing customized hats, decided to expand its market reach with an e-commerce site where its potential customers could choose, customize and order hats online. TescaraHats used an APM tool to fix a number of e-commerce application performance and usability issues we presented in this mini-series. But there was still a missing link that would ensure TescaraHats increased sales. I guess you thought we forgot about the conversion rate? Nope, here is how an application performance management (APM) tool can tell you why it is so low.read more
about 3 hours ago
Pinterest has exploded in recent years from obscure project to global phenomenon. Why? And how can Pinterest’s user experience inform developers and designers of all sorts? Let’s learn from some of Pinterest’s bleeding ...
Pinterest has exploded in recent years from obscure project to global phenomenon. Why? And how can Pinterest’s user experience inform developers and designers of all sorts? Let’s learn from some of Pinterest’s bleeding edge design decisions. Search vs. Browsing: How Do You Help Your Users Discover Content? Pinterest is about discovery. It makes it so easy to find beautiful items and ideas. But how does a user experience balance user-led behavior (search) or an application-led behavior (browsing)? It is a design challenge to balance accommodating both behaviors while still establishing some information hierarchy, so that users don’t get confused. In Jakob Nielsen’s heuristics, this is the balance between “Flexibility and Efficiency of Use” and “Aesthetic and Minimalist Design”. You could prominently slap the search bar across the top of the navigation above the main feed for browsing the way Facebook is testing here. Or you could make a search-only experience the way Google has, with browsing reserved for the results section only. There is no default browsable content in Google Search because it is an intent-driven product in which you often know what you are looking for ahead of time. But neither of these are ideal for Pinterest. Facebook likely weights search more heavily than Pinterest, given the rollout of graph search and the relatively larger and more complex data that Facebook users would be searching. Moreover, as mentioned above, there is user intent to harvest: with Facebook and Google, it’s much more likely that you want to search for a person, topic, or other very specific object. On the other hand, Pinterest heavily demotes search across platforms. For starters, it’s easy to click on pretty pictures than figuring out what to search for and typing it in — character by character — into a search field you would have to first find, click into, and hit enter for…once your query was typed. But on mobile especially, Pinterest recognizes the user context. Search is painful when you’re on the bus, walking down the street glued to your phone, or in a crowded elevator. Your input accuracy, and consequently user experience, correlates positively with an input’s ease of use. In other words, tapping on pictures is a lot easier than tapping 5-20 characters that each occupy less than a square centimeter on a just barely usable keyboard when you’re in motion. Pinterest on Desktop Web Here you can barely find search in the top left. It doesn’t stand out because there is no color contrast. The images that are front and center capture attention. But it’s there if you need it. But on a mobile website, Pinterest product designers have even less screen real estate. Consider a 4.87″ x 2.31″ screen (iPhone 5) vs. 12.78″ x 8.94″ (13″ Macbook Pro). That’s approximately a 10x difference in surface area (11 sq. inches on mobile phones vs. 114 sq. inches on laptops). Pinterest on Mobile Web (iPhone) That’s when you really see what their priorities are. Search is now hidden behind an icon, unlike Google.com on mobile (which is rarely used anyway, given that it’s often built into the browser). But for Google, Search is the primary use case, so even with the limited real estate, exposing the search field by default is an immutable priority. Google.com on an iPhone 5 Pinterest applies this same browse before search approach to its native mobile app. Native Pinterest Mobile App (iPhone) Search admittedly is just one click away. But the interface definitely demotes search through shadows, gradients, overlay objects (i.e. notifications), and deliberate ordering. Notably, even when you do choose to search for something, Pinterest really helps you avoid typing in favor for just tapping a category. Aligned with Hick’s Law, Pinterest wants to reduce user’s time-to
about 18 hours ago
You can send in your Node projects for review through our contact form. Node 0.10.12 Node 0.10.12 was released yesterday. This version updates v8 and npm, and has a fix for the net module. One minor change that I liked was readl...
You can send in your Node projects for review through our contact form. Node 0.10.12 Node 0.10.12 was released yesterday. This version updates v8 and npm, and has a fix for the net module. One minor change that I liked was readline now supports CTRL-L for clearing the screen – that means Node’s command-line interface will do this as well. Before hitting CTRL-L did nothing, which wasn’t very intuitive if you’re used to using readline tools. grunt-micro If size is important to you, then you’ll like grunt-micro (GitHub: markdalgleish / grunt-micro, License: MIT, npm: grunt-micro) by Mark Dalgleish. This Grunt plugin ensures a script is smaller than a given size. Mark suggests this is useful for client-side authors that have size claims in their project documentation, but it could be useful for other things, like warning about asset sizes in mobile projects. connect-prerenderer connect-prerenderer (GitHub: dai-shi / connect-prerenderer, License: BSD, npm: connect-prerenderer) by Daishi Kato is middleware for pre-rendering content to support systems that don’t interact well with Ajax-heavy interfaces. This is ideal for improving the SEO of a site. The author has paid special attention to AngularJS – the documentation includes some Angular client-side code that adds support for the module.
about 21 hours ago
The aim of this tutorial is to show off Python’s data structures and the best way to use them. Depending on what you need from a data structure, whether it’s fast lookup, immutability, indexing, etc, you can choose the best d...
The aim of this tutorial is to show off Python’s data structures and the best way to use them. Depending on what you need from a data structure, whether it’s fast lookup, immutability, indexing, etc, you can choose the best data structure for the job and most of the time, you will be combining data structures together to obtain a logical and easy to understand data model.IntroductionPython data structures are very intuitive from a syntax point of view and they offer a large choice of operations. This tutorial tries to put together the most common and useful information about each data structure and offer a guide on when it is best to use one structure or another. You can choose different kinds of data structures depending on what the data involves, if it needs to be modified, or if it’s fixed data, and even what access type you would like, such as at the beginning/end/random etc.ListsA List represents the most versatile type of data structure in Python. It can contain items of different types and it has no rule against unicity. List indices start from zero, the elements can be sliced, concatenated, and so on. Lists also have a lot of similarities with strings, supporting the same kind of operations but unlike strings, lists are mutable.How to Construct a ListA list can be built using the keyword list or using square brackets: [], both of which accept comma separated values. Here’s an example: >>> l = ['a', 'b', 123] >>> l ['a', 'b', 123] How to Retrieve an Element From a List >>> l[0] 'a' >>> l[10] Traceback (most recent call last): File "", line 1, in IndexError: list index out of range As seen above, in order to access the data within your list, you must know what index position the element is at, otherwise you get an “index out of range” error.How to Slice a ListAll slicing operations return a shallow copy of the list. The slicing indexes are optional and they work in the same way as slicing indexes for strings.Here’s an example of how to slice a list: >>> l = ['a', 'b', 123] >>> l[:] ['a', 'b', 123] >>> new_l = l[1:] >>> new_l ['b', 123] >>> l ['a', 'b', 123] Let’s take a look at some other common list operations.Inserting and Removing Elements >>> l = ['a', 'b', 123] >>> l.append(234) #inserts an element at the end of the list >>> l ['a', 'b', 123, 234] >>> l.insert(2, 'c') #inserts an element into the third position >>> l ['a', 'b', 'c', 123, 234] >>> l.insert(-1, 111) #inserts an element into the second from last position of the list (negative indices start from the end of the list) >>> l ['a', 'b', 'c', 123, 111, 234] >>> l.remove(111) #removes an element based on value >>> l ['a', 'b', 'c', 123, 234] >>> l.remove('does not exist in the list') Traceback (most recent call last): File "", line 1, in ValueError: list.remove(x): x not in list Retrieving and Looking Up Elements Lists can also be used as stacks or queues because of how easy it is to add and remove elements from the beginning or end of the list. >>> last_element = l.pop() #returns the last element, modifying the list >>> last_element 234 >>> l ['a', 'b', 'c', 123] >>> third_element = l.pop(2) #returns the third element, modifying the list >>> third_element 'c' >>> l ['a', 'b', 123] >>> l.index('a') 0 >>> l.index('does not exist in the list') Traceback (most recent call last): File "", line 1, in ValueError: 'does not exist in the list' is not in list >>> l.count('a') #returns the number of occurrences of an element 1 Whole List Operations >>> l.extend ([1, 2]) # concatenates a list on to the existing list >>> l ['a', 'b', 123, 1, 2] >>> l.sort() >>> l [1, 2, 123, 'a', 'b'] >>> l.reverse() >>> l ['b', 'a', 123, 2, 1] As you can see, it’s very easy to extend, sort, and reverse lists using the above methods.List ComprehensionsA list comprehension means, constructing a list in a way that is very natural from a mathematical point of vi
2 days ago
Note: You can send your plugins and articles in for review through our contact form. Magnific Popup Magnific Popup (GitHub: dimsemenov / Magnific-Popup, License: MIT, jQuery: magnific-popup) by Dmitry Semenov is a responsive li...
Note: You can send your plugins and articles in for review through our contact form. Magnific Popup Magnific Popup (GitHub: dimsemenov / Magnific-Popup, License: MIT, jQuery: magnific-popup) by Dmitry Semenov is a responsive lightbox plugin that should work with mobile devices and also Zepto.js. It’s modular and has a build tool so you can generate a build that only includes the features you need. Sass is used for CSS, so you could easily customise the styles to suit your project. Keyboard shortcuts are supported, the arrow keys and escape allow images to be navigated – see the gallery demo for an example of this. A lot of the work is done by CSS, which means high DPI displays are supported: Default controls are made with pure CSS, without external graphics. For the main image there is a built in way to provide appropriate source for different pixel density displays. Content other than images is supported as well. The documentation has examples of using Magnific Popup with Google Maps and videos. For more information, see the Magnific documentation. blend.js blend.js (GitHub: qur2 / blend.js, License: MIT) by Aurélien Scoubeau applies effects to images using Canvas. The effects themselves are functions that receive pixels. Processing is applied to sections of the image in a two-dimensional grid. Custom parameters can be passed to blending functions: // Create some effects that will use additional arguments var colorfx = blend.cfx(function(color, context) { return context; }); var anglefx = blend.pfx(function(angle, radius, pixels) { return pixels; }); blender.fx(colorfx, 'rgb(255, 123, 123)').fx(anglefx, [Math.PI, .25]); blender.fx(colorfx, '#FFF', '#AAA', '#666', '#111'); // Null is used to skip zones blender.fx(colorfx, '#FFF', null, null, '#111'); // Update the image blender.update(); There are some bundled effects as well: desaturate, neutralize, vignette, and contrast. These can be found under blend.fx. The author has included Mocha tests which can be ran in a browser here: blend.js/test.html.
2 days ago
The Nodestack series has been picking up steam and we're exited to be returning for tomorrow's edition. The focus is 'Production Stack', and our goal is to take a detailed look at how key players in the technology community have implemen...
The Nodestack series has been picking up steam and we're exited to be returning for tomorrow's edition. The focus is 'Production Stack', and our goal is to take a detailed look at how key players in the technology community have implemented and maintained real world deployments of Node.js, MongoDB, and SmartOS. Sign up to join us tomorrow where Paul Serby of Clock will talk about the marriage of frontend and backend technology for optimal UX, MongoLab CEO Will Schuman will discuss running MongoDB in the cloud, and Anton Whalley of NearForm will deep dive on their use of Dtrace. Finally, Charlie Robbins and Isaac Schlueter will return for a conversation on npm. NodeStack is tomorrow, June 18th, from 10am - 11:30am PT. Go ahead and RSVP!
2 days ago
Backbone Fetch Cache Backbone Fetch Cache (GitHub: mrappleton / backbone-fetch-cache) by Andy Appleton caches Backbone’s collection and model fetch requests. Data is stored in localStorage to speed up rendering. This is useful f...
Backbone Fetch Cache Backbone Fetch Cache (GitHub: mrappleton / backbone-fetch-cache) by Andy Appleton caches Backbone’s collection and model fetch requests. Data is stored in localStorage to speed up rendering. This is useful for caching Ajax requests with APIs that don’t allow control over response cache headers. The plugin supports preloading data with the prefill option which can be passed to fetch, and the author has included some Jasmine tests. Backbone.VirtualCollection Backbone.VirtualCollection (GitHub: p3drosola / Backbone.VirtualCollection, License: MIT, npm: backbone-virtual-collection) by Pedro Solá allows Backbone.Marionette’s CollectionViews and CompositeViews to be used with instances of Backbone.Collection. This allows collections to be projected and sorted. This example is from the project’s documentation: var virtual_collection = new Backbone.VirtualCollection(tasks_collection, function (task) { return task.get('user_id') == 13; }); var view = new TaskListView({ collection: virtual_collection }); The project has Mocha tests and some details on its philosophy in the readme. WTCSS WTCSS (GitHub: benfoxall / wtcss, License: MIT) by Ben Foxall uses PhantomJS to analyse the CSS on a page, then attempts to visually indicate where each rule applies to using a Canvas overlay. It looks impressive – there are demos on the project’s homepage, and I suspect it could form the basis for a more advanced CSS analysis and debugging tool.
3 days ago
Free iOS 7 UI Kit for Design Apps EasierHere are free iOS 7 UI Kit for designing iOS 7 iPhone apps. These UI Kit is 100% vector and completely editable, Enjoy, and Start designing iOS 7 apps today. PSD iOS7 UI Kit Free iOS 7 UI Kit iOS...
Free iOS 7 UI Kit for Design Apps EasierHere are free iOS 7 UI Kit for designing iOS 7 iPhone apps. These UI Kit is 100% vector and completely editable, Enjoy, and Start designing iOS 7 apps today. PSD iOS7 UI Kit Free iOS 7 UI Kit iOS 7 UI Kit for Sketch Blogupstairs - Web Developer Resources & Tools
4 days ago
This is a continuation of the Twitter clone series with building Ribbit from scratch, this time using Meteor.For this tutorial, please do not expect an in depth explanation of the Meteor framework. You should already have some Meteor exp...
This is a continuation of the Twitter clone series with building Ribbit from scratch, this time using Meteor.For this tutorial, please do not expect an in depth explanation of the Meteor framework. You should already have some Meteor experience so that you’ll understand some of the important concepts that will be presented. In order to get a basic understanding of Meteor I recommend Andrew Burgesses course on Tutsplus Premium.So, let’s get started.Step 0: Creating and Configuring the Meteor ApplicationWe begin by generating a new Meteor application. Open a command line prompt and navigate to the folder where you want the application to be stored. Then run:meteor create ribbitMeteor will create a folder named ribbit containing some files and will ask you to change directory into ribbit and run meteor commands in that folder.If you step into the ribbit folder and issue a ls -la command in order to see what was generated by Meteor, you will find a hidden folder named .meteor and three files named ribbit.html, ribbit.css and ribbit.js. The .meteor folder contains only one file named packages. The content of the .meteor/packages file informs Meteor about what smart packages are used by the application.Since we will start developing Ribbit from scratch we will keep only the .meteor folder and delete all the rest.Let’s see what packages Meteor uses by default: at the command prompt entercat .meteor/packages The output of this command should list the autopublish, insecure, and preserve-inputs packages.We will discuss the concept of publishing data from the server later, for the moment let’s note that the autopublish package is used on the server side to automatically make data available to the client. Usually this packet is not used in a production environment, so we can remove it by issuing the following command:meteor remove autopublish Next, the insecure package allows database writes by default, which can be dangerous, since this allows any user to do any database operations, including deleting data. We will remove this package before deploying the app and add all the necessary code to protect writing to the database.And lastly, the preserve-inputs package keeps data from all of the form fields with a unique id.After all of that, we should now have a folder containing just a .meteor sub-folder and this should be the base of our app.Step 1: Creating the Necessary Folder StructureThere are several rules Meteor uses to serve files and data which we will not being covering in detail here (see Andrew’s course for details). What is important to note, is that Meteor considers all files present in a server folder as being server code. All files in the client and public folders as being client code, which should be served to the client. And lastly, the files outside of these folders are served to both the client and the server. So let’s create the following folders:client – to store all the client side code.server – to store all the server side code.public – containing all the assets such as graphic files, robots.txt files, favicons etc.Also, it’s important to know that Meteor considers JavaScript and CSS files as part of the client/server code and not as assets, which should be served from the public folder.So, we end up with the following folder structure: Step 2: The Static Version of the Login PageNow it’s time to download the static version of the Ribbit app.After unpacking the files, copy the gfx folder into the public folder of our Ribbit app.Also, copy the home.html and style.less files into the client folder of our app. Now if you would try to start the server by issuing meteor from the command line, in the root of our application, you will see the server crashing and complaining about setting the DOCTYPE in our file.Meteor expects our HTML files to be composed from only three base elements: the head, the body and the template tags.So in order to fix the error,
5 days ago