はてなブックマーク

July 23, 2013 Introduction Developers working in agencies often tell us that they want to be able to use modern front-end tooling in their workflow. One set of options this manifests as is using Grunt for their build tasks (instead of Ant, bash or Gradle), Bower for dependency management (instead of Maven or Ivy) and Yeoman for application scaffolding. For personal projects, these tools are straig

Visualising JavaScript Processing Over Time With DevTools Flame Charts In this quick video, I walk through how to effectively use DevTools Flame Charts for visually representing your app's JavaScript processing over time. This can be useful if you're concerned it may be suffering from particularly long function executions and you want to dive into them further. Flame Charts compliment the existing

August 27, 2013 As Mat Marquis recently summarized on SmashingMag, the srcset attribute allows developers to specify a list of sources for an image that are delivered depending on the pixel density of a user's screen. An example of how srcset may be used is as follows, where we define three different image sources for the resolutions we wish to target: <img alt="My photo" src="photo.jpg" srcset="p

August 17, 2013 ECMAScript 6 is being progressively implemented by browser vendors over time and as such there is no ETA on it being available in all environments. Whilst specs and implementations continue to mature, you may find the below resources helpful in keeping track of where we are with browser and environment support: Feature comparison matrix of ECMAScript implementations (V8, JSC, JScri

July 30, 2013 Package management is an important and evolving area in front-end development. It's also a contentious one with some favoring Bower, others preferring npm and Browserify and a number remaining undecided about the true benefits of these tools. Regardless of the solution you opt for you will come to a point where you will need to decide whether or not you want to check-in the dependenc

May 16, 2013 Yesterday, I looked at the new Daft Punk web experience on Pitchfork. It was visually stunning, featuring rich-animations throughout. I noticed however that scrolling on the page felt quite janky in Chrome. It was sluggish and stuttered regularly. You could reproduce this by scrolling up and down through the page, something that I struggled with. Paint profiling it with the DevTools,

Taming The Unicorn: Easing JavaScript Memory Profiling In Chrome DevTools April 11, 2013 “The Unicorn has a special ability to help it's master when in trouble. When tamed, they will not attack humans or tamed creatures, but will attack anything else with negative karma" The DevTools Heap Profiler and Timeline Memory view can be used to diagnose memory leaks on both desktop and mobile (via remote

March 26, 2013 The past year has seen many leaps made to improve developer productivity through better tooling. We're paying increasing attention to our workflow and many of us have spent time optimising our usage of tools like Grunt, Bower, Yeoman and the terminal. Another important area worth spending time on is your debugging workflow - if you're like me, this starts with the Chrome DevTools. W

February 7, 2013 Increasingly, whether it’s on desktop or mobile, users want their web experience to be snappy and delightful. This means that even if the browser is busy rendering the page or loading in content, the user should still be able to scroll around and interact with it. Animations need to be silky, scrolling must be buttery-smooth and your page needs to contain little to no jank. This c

Improving Web App Performance With the Chrome DevTools Timeline and Profiles December 9, 2012 We all want to create high performance web applications. As our apps get more complex, we may want to support rich animations and that ideal 60 frames a second that keep our apps responsive and snappy. Being aware of how to measure and improve performance can be a useful skill and in this short post, I'll

November 22, 2012 I believe the day-to-day practice of writing JavaScript is going to change dramatically for the better when ECMAScript.next arrives. The coming year is going to be an exciting time for developers as features proposed or finalised for the next versions of the language start to become more widely available. In this post, I will review some of the features I'm personally looking for

Custom Sublime Text Build Systems For Popular Tools And Languages August 17, 2012 Sublime Text is currently the text editor of choice for a number of developers in the open-source community. It’s sophisticated, has powerful text selection and customization support and also includes a feature not used by many - its build system. In this post, I’d like to take you through the Sublime build system an

Lets Tincr: Bi-directional Editing And Saving With The Chrome DevTools August 10, 2012 Following on from my post last year on the Chrome DevTools AutoSave project, I’d like to share another useful extension Nikita Vasilyev brought to my attention called Tincr, by Ryan Ackley. We often find ourselves switching back and forth between the Chrome Developer Tools and a text editor while debugging. This

Faster JavaScript Memoization For Improved Application Performance September 19, 2011 Whilst not new by any means, memoization is a useful optimization technique for caching the results of function calls such that lengthy lookups or expensive recursive computations can be minimized where possible. The basic idea is that if you can detect an operation has already been previously completed for a spe

June 28, 2012 Did you guys enjoy Paul Irish’s talk at Google I/O? In case you missed it, yesterday we announced Yeoman - a project we’ve been working on to greatly help improve developer workflow, spanning everything from a comprehensive build process to package management. If you’d like to read more about it’s features, check out Yeoman.io. How does Yeoman build upon Grunt?: One common question w

May 30, 2012 I’ve recently spent a lot of time looking at EcmaScript 6 and thought it would be useful to put together a short page of resources to help anyone else interested in exploring the next version of JavaScript further. What ES6 features do browsers support right now? Juriy Zaytsev’s ES6 compatibility table is a useful start for establishing what ECMAScript 6 features your browser does and

May 3, 2012 Today we're going to explore JavaScript style guides, specifically: their importance, style guides worth reviewing and tools that can assist in automated code beautification or style enforcement. What exactly is a style guide? Before we begin, let us remind ourselves exactly what a code style guide is: A style guide or style manual is a set of standards for the writing and design of co

April 10, 2012 MVVM (Model View ViewModel) is an architectural pattern based on MVC and MVP, which attempts to more clearly separate the development of user-interfaces (UI) from that of the business logic and behaviour in an application. To this end, many implementations of this pattern make use of declarative data bindings to allow a separation of work on Views from other layers. This facilitates

Backbone.Paginator - New Pagination Components For Backbone.js March 30, 2012 Pagination is a ubiquitous problem we often find ourselves needing to solve on the web. Perhaps most predominantly when working with back-end APIs and JavaScript-heavy clients which consume them. On this topic, today I'd like to announcethe pre-release of a new set of pagination components for Backbone.js, which should h

Auto-saving CSS And JavaScript Changes Locally From The Chrome Developer Tools December 16, 2011 [vimeo clip_id="33765496" width="535" height="301" title="1" byline="0" portrait="1"] Today we're going to take a look at how you can greatly simplify how you locally develop for the web.We all have our own workflow when it comes to working on the front-end, but there are some common steps we almost al