Browse by Tags

thebeebs

Also known as Martin Beeby, I am a web developer and work for Microsoft as a developer evangelist

Tagged Content List
  • Blog Post: How do you stop element breaking inside a CSS3 multi column layout

    I came across a rather annoying feature today when I was trying to create a layout with CSS3 multi column . I wanted to stack some divs on top of each other in columns. My first attempt lead to this, which was not what I wanted: I wanted the tile’s to break to the next column  if they didn’t fit...
  • Blog Post: Error.stack

    In the statically typed code world I used to inhabit Call stacks were often used to diagnose the root cause of events. I wasn’t aware that JavaScript had a similar (albeit non ECMA5) way of performing error stack interrogation. It’s called Error.stack It makes bugs -particularly those ones that are deep...
  • Blog Post: Reading Minified JavaScript

    If you have viewed source on any website in the last few years then you will have certainly seen Minified JavaScript. This is JavaScript where all of the whitespace and unnecessary characters have been removed. Developers do this because it reduces the size of JavaScript files and makes sites load faster...
  • Blog Post: Request Animation Frame is your friend

    If you are writing anything in JavaScript that animate then you are probably more than familiar with setInterval and setTimeout . These are both useful tools to create timing loops. However, when it comes to creating animations they are both pretty inefficient. I you use a timer period of less than 16...
  • Blog Post: Fonts Numerals

    The IE test drive website has some new demos that show the use of OpenType font features . Over the next few weeks I thought I’d take a look at each of the different features in turn. OpenType is a technology that is supported by IE10 and Firefox 4+ allows you to use some of the features that are stored...
  • Blog Post: CSS3 vendor Prefixes and a nice box sizing tool

    Chris Coyier tweeted last night about a CSS3 tool called box-shadow.info. If you're gonna make a CSS3 helper app thingy, do like box-shadow.info and help people understand prefixes/compatibility. — Chris Coyier (@chriscoyier) March 5, 2012 It’s a great tool but what I love about it isn’t the the tool...
  • Blog Post: Fonts and Small Caps

    The IE test drive website has some new demos that show the use of OpenType font features . Over the next few weeks I thought I’d take a look at each of the different features in turn. OpenType is a technology that is supported by IE10 and Firefox 4+ allows you to use some of the features that are stored...
  • Blog Post: Fonts and Ligatures

    I just noticed that the IE test drive website has some new demos that show the use of OpenType font features . Over the next few weeks I thought I’d take a look at each of the different features in turn. OpenType is a technology that is supported by IE10 and Firefox 4+ allows you to use some of the features...
  • Blog Post: Media Queries and Bandwidth

    I just read a blog post that stated that media Queries were not a good idea because: your entire stylesheet , with resources, images, the works – for all viewports - is loaded, before the @media stuff is parsed by the browser. This isn’t entirely true. Although all of the CSS will be downloaded, background...
  • Blog Post: Overlaying data on a video

    I got asked by Gordon Rae on twitter today: @ thebeebs Martin, can you recommend a good tutorial for overlaying data on video in HTML5 ? — Gordon Rae (@socialtechno) February 21, 2012 Firstly beware that just because a browser supports HTML5 video it might not be capable of overlays… this is true particularly...
  • Blog Post: Gradients in Internet Explorer

    Last week at the digital barn I gave a talk called “The Way the web should be” in it I talked about the importance of Web Standards in the development of IE. In a follow up blog post Ian Parr made an interesting point: One point that I think MS people sometimes miss is that it’s one thing having comparable...
  • Blog Post: Using App Cache

    There are many new features in HTML5 but in think that App Cache is potentially one of the most important. App Cache allows you to create a manifest file that details all of the files your application uses offline. When you visit your website with no internet connection the files that you list will be...
  • Blog Post: A look at the new CSS3 units of measure

    So if you have been developing for any length of time then you are probably familiar with ‘em’, ‘%’and ‘px’ as units of measurements in CSS. As part of the CSS3 specification there are a few new  units of measurement that I think are worth casting an eye over. ‘ ex ’ This represents the height of...
  • Blog Post: Why Don't you need to close tags in HTML5?

    HTML5 is a much more forgiving when it comes to Mark-up than XHTML. With XHTML you needed to make sure that each opening HTML tag had it’s own closing tag. So you would always close an image tag like this: <img alt="A pretty car" src="image.jpg" /> If you forgot to close the tag, like this...
  • Blog Post: I want to use Canvas but need to support IE8

    Ok so you have a great idea for how you’re going to use Canvas in your next application… problem is you still have tons of visitors that use IE8 (which doesn't support the Canvas element). Not to worry, all is not lost. In many instances you can use something like FlashCanvas . This is what us HTML5...
  • Blog Post: How to build Mobile websites

    With the explosion of devices that access websites , it's becoming more important that your website works well on mobile devices. I found the process of learning how to create websites that worked on mobile devices confusing so I created the list below to help anyone that is new to this field of web...
  • Blog Post: How to write a feature detection script in JavaScript

    When I use a HTML5 feature in my website I will often test the browser that is visiting to see if it is capable of using the feature. If it is not capable I will Fall-back to something that the browser is a capable of supporting. In practice, I use modernizr for this purpose, however, there maybe instances...
  • Blog Post: Using HTML5 to Jump to the search box using autofocus

    Autofocus is a HTML5 attribute that you add to input elements, which cause the browser to automatically focus on the input element when the page loads. Google and every other search engine have been doing this since the dawn of time (slight exaggeration) with JavaScript but now you can do it with some...
  • Blog Post: Do I need to use WIA-ARIA with HTML5?

    Accessibility for Rich Intranet Applications ( WIA-ARIA ) is a specification that makes it easier for people using screen readers to navigate and use web applications. Many of the new HTML5 elements like section and article have been added to the specification along with more controls so the obvious...
  • Blog Post: Making forms easier to fill out using placeholder text

    Placeholder is a HTML5 attribute that you add to input elements, it makes it easier for users to fill out your forms. Demo view here Source on GitHub It works for on regular input fields but also works on on password types. Of course the placeholder tag is not supported by every browser, but a great...
  • Blog Post: Using CSS3 to make your web pages better when they are printed.

    I recently walked past someone in the office who was reading a web article that they’d printed off. Now putting to one-side the environmental impact of printing the internet there is also another disadvantage to reading printed webpages… the hyperlinks don’t work. Wouldn’t it be nice if you could somehow...
  • Blog Post: How you can allow a user to edit pages with HTML5

    When a user wants to change some information on a webpage it's often very jarring to ask them to go to another form to edit the content. Users find it difficult to understand how the changes they make on a form will effect the resultant page. Therefore it's become common practice to allow users to edit...
  • Blog Post: Saving user preferences with HTML5

    If you have played with the HTML5 version of the cut the rope, you will notice that it remembers your scores for each game when you return to the site. To achieve this in your own applications you can use localStorage which is part of the Web Storage Specification . Local Storage gives developers a way...
  • Blog Post: Vendor Prefixes and JavaScript

    I got asked a question recently on twitter from Seb Lee-Delisle about vendor Prefixes and JavaScript. He asked: is the JS equivalent of -ms-transform MSTransform? or msTransform? The answer to the question is msTransform. However, the question opens up an important note about the way that different browser...
  • Blog Post: Why is Canvas so slow for Text?

    During the launch of IE9 I was asked to produce a HTML5 application that animated stitching tweets on to a canvas. During testing the application I had some really complex animations and they performed just fine, but when I added test using Text API the canvas performance was awful. I tested all the...
Page 1 of 2 (42 items) 12