Submit a URL to generate a node map of all of the requests on the page. Rapidly identify what third-parties are on your site, where your transmitted bytes are coming from and how slow your domains are! Read more on my blog or see an example.
Can I use… is an invaluable resource that we all (hopefully) use on a regular basis, but what if you have an existing codebase that you want to evaluate for browser support? You could go through it manually, but that could be a lot of work. Thankfully, someone has put together an app and a Node.js module that can crawl your CSS and list what will break in what browser.
Did you know that the PNG image format can contain arbitrary data - such as a ZIP file - in its metadata? I sure didn’t. Turns out you can store a whole static site in a PNG file. 😮
This is pretty cool: you can use this to visually display the differences between two fonts - usually a fallback font and a web font - and adjust the various CSS font properties to match them as closely as possible to reduce the amount of page shifting that may occur when the web font loads. Also includes a longer paragraph at the bottom that can compare the two fonts either by overlaying them statically or by switching between them at a regular interval.
From the same person that proposed easing linear gradients comes this visual editor for generating them.
I’m passionate about image performance optimisation and making images load fast on the web. One of the most interesting areas of exploration is placeholders: what to show when the image hasn’t loaded yet.
During the last days I have come across some loading techniques that use SVG, and I would like to describe them in this post.
Your indispensable test assistant.
With each web page, device and browser, testing time grows exponentially. From live reloads to URL pushing, form replication to click mirroring, Browsersync cuts out repetitive manual tasks. It’s like an extra pair of hands. Customise an array of sync settings from the UI or command line to create a personalised test environment. Need more control? Browsersync is easily integrated with your web platform, build tools, and other Node.js projects.
