Umar Hansa
Umar is a front-end web developer based in London who has a focus on writing tips, tutorials and documentation for the web platform. Using tooling such as the browser DevTools for an improved development workflow but also for debugging performance issues is an area which he plans to explore further and share information about to the community.
  • Code

    Chrome Developer Tools

    1.5 hours
  • Code
    Modern Debugging Experience: Part 2Preview pt 2
    In Part 1 of this series, we looked at understanding the DevTools and using it to write JavaScript. In this part, we go a step further and take a look at advanced debugging techniques with DevTools.Read More…
  • Code
    Modern Debugging Experience: Part 1Preview pt 1?height=300&width=300
    An introduction to the Chrome Developer Tools, along with tips and techniques you can use to incorporate into your JavaScript debugging workflow.Read More…
  • Code
    An Introduction to WebDriver Using the JavaScript BindingsPreview
    While unit tests are certainly valuable for modern web applications, at some point, as your application grows, you'll find bugs crop up which weren't caught by a unit test but would have theoretically been caught by an integration/acceptance test. Should you wish to follow a testing strategy which involves browser testing, this guide will give you an initial introduction to testing with WebDriverJs so you're equipped with enough knowledge to get started. This tutorial assumes you're familiar with JavaScript and can run JavaScript code using node.js.Read More…
  • Code
    Chrome DevTools Features You May Have MissedChrome wide retina preview
    With the recent updates to Chrome DevTools, let's take a look at a few of the newer features which you can use to help debug and improve your web application workflow with. Read More…
  • Code
    Working With LESS and the Chrome DevToolsLess devtools retina preview
    This is a complete tutorial to using LESS with Chrome's DevTools. If you've used Sass with Chrome's DevTools, you'll most likely already be familiar with the concepts introduced here.Read More…
  • Code
    Developing With Sass and Chrome DevToolsSass retina preview
    In this article we'll take a look at how we can better integrate Chrome DevTools into our Sass development workflow.Read More…
  • Code
    Chrome Dev Tools: JavaScript and PerformanceChrome dev tools part 3 preview
    In this third part of our Chrome Developer Tools series, we'll review how to modify and debug JavaScript. Optimization is an important part of the development process, especially for performance-critical applications. We'll also discuss techniques for identifying potential bottlenecks in our code.Read More…
  • Code
    Chrome Dev Tools: Networking and the ConsoleChrome dev tools part 2 preview
    In Part 1 - Chrome Dev Tools: Markup and Style, we reviewed two panels: Elements and Resources. Moving on, now, we'll take a look at the next two panels: Network and Console.Read More…
  • Code
    A First Look at the HTML5 History APIPreview
    HTML5 introduces a variety of new goodies for front-end developers, such as the additions to the browser's history object. Let's take a look at its new features in this lesson.Read More…
  • Code
    Accepting Payments with GoCardlessPreview
    Online payments are increasingly becoming more and more popular. GoCardless is yet another payment service, which currently works in the UK, allowing you to accept payments online.Read More…
  • Code
    Chrome Dev Tools: Markup and StyleChrome logo
    It is necessary for web developers to understand and know how to use browser developer tools, and in this tutorial, I will introduce you to the Chrome Developer Tools. You'll learn some of the basics, starting with marking up and styling a web page.Read More…
  • Code
    An Introduction to the CSS Flexbox ModuleCss flexbox preview
    CSS, despite its relatively low perceived skill ceiling, always seems to have a killer feature up its sleeve. Remember how media queries made responsive layouts possible and revolutionized front-end development? Well, today, we're going to talk about a new layout mode, called flexbox - new in CSS3. I'm sure you're raring to go! Let's get started after the jump.Read More…