A bookmarklet to create a front-end performance heatmap of resources loaded in the browser using the Resource Timing API. Wait for a page to fully load and then click the bookmarklet to overlay a performance heatmap. A browser with support for the Resource Timing API is required. PerfMap: front-end performance heatmap →
Tag Archives: web
How to Use SVG Patterns
<svg> <defs> <pattern id="basicPattern" x="10" y="10" width="40" height="40" patternUnits="userSpaceOnUse"> <circle cx="20" cy="20" r="20” fill= "#64bee3" /> </pattern> </defs> <rect x="10" y="10" width="200" height="200" stroke= "#333333" stroke-width="2" fill="url(#basicPattern)" /> </svg> SVG patterns provide for very unique design opportunities. We are essentially defining a canvas within a target shape or text, which is then repeated (or tiled) …
Making the Web Sweeter with Food Network and Cupcakes
Adobe’s Web Platform group teamed up with Food Network to experiment with bringing their popular Cupcakes! tablet application to the web. See how we turned beautiful content from Food Network, hardware from Leap Motion, speech recognition, responsive tooling, and new layout and graphics standards into a next-generation web experience. Canvas Blend Modes, CSS Masks, CSS …
Continue reading “Making the Web Sweeter with Food Network and Cupcakes”
The Physical Web
The Physical Web is an approach to unleash the core super power of the web: interaction on demand. People should be able to walk up to any smart device: e.g. a vending machine, a poster, a toy, a bus stop, a rental car, and not have to download an app first in order to use …
Modern.ie Vagrant Boxes
The Modern.ie Virtual Machine Images – VMs used for testing several versions of IE – are now also available as vagrant boxes. Here’s the list: XP with IE6: http://aka.ms/vagrant-xp-ie6 XP with IE8: http://aka.ms/vagrant-xp-ie8 Vista with IE7: http://aka.ms/vagrant-vista-ie7 Windows 7 with IE8: http://aka.ms/vagrant-win7-ie8 Windows 7 with IE9: http://aka.ms/vagrant-win7-ie9 Windows 7 with IE10: http://aka.ms/vagrant-win7-ie10 Windows 7 with …
Cards
A definition of a card (on the web) by Khoi Vinh: A card is a single unit of content or functionality, presented in a concise visual package. More advanced cards use that form to surface content or functionality from other apps, and allow users to interact with that content or functionality directly in the context …
Map Glyphs – The Ultimate CSS Map Font
TETHR
Why Google is Hurrying the Web to Kill SHA-1
Something like 90% of websites that use SSL encryption use an algorithm called SHA-1 to protect themselves from being impersonated. This guarantees that when you go to green lock for facebook.com, you’re visiting the real Facebook and not giving your password to an attacker. Unfortunately, SHA-1 is dangerously weak, and has been for a long …
Continue reading “Why Google is Hurrying the Web to Kill SHA-1”
CriticalCSS
Critical CSS opens a page in a browser from the command line, sets the window width to a specified width and height (default is 1200 x 900), and analyzes which styles are applied to elements that fall within the visible portion of that viewport. It then writes those styles to a file that you can …