Optimizing images for the web is crucial for Core Web Vitals, but the process is overly complex. While tools like Squoosh and web.dev guides offer help, developers still struggle with image optimization. This difficulty stems from needing to consider file size, resolution, codec support, lazy loading, and more. CDNs offer a solution but introduce centralization. To simplify this, I created a prototype tool (https://just-gimme-an-img.vercel.app/) that generates optimized HTML for images, handles AVIF conversion, creates multiple image sizes, and does it all client-side using Squoosh's CLI. The tool aims to make image optimization easier and more accessible, especially for common use cases like hero images. I'm hoping this sparks further discussion and improvements in image optimization tooling to simplify the process for all developers.
I built a Material Design-style Floating Action Button (FAB) without using any JavaScript. This was achieved using only HTML and CSS, leveraging anchor links and the ":target" selector to control visibility and create the open/close functionality. Clicking the FAB opens a menu with links to different actions, and clicking a close button hides the menu. This approach does have the trade-off of adding entries to the browser history, but it's a pure HTML/CSS solution for a common UI element.
I love Posterous, but it's time for my blog to move on. I'm looking to hire someone to migrate my blog to a new platform. Must-haves include: static site generation, git integration, markdown/text/HTML support, preserving my current URLs and all imported posts, and full template control. Ideally, it won't be Ruby-based. I'm not concerned about hosted solutions, a fancy CMS, or comments.
I have mixed feelings about SVG. I find it complex and requiring specific tools, and its integration with the web is clunky. It feels like a context switch between HTML and SVG DOM. However, SVG is scalable, vector-based, and has powerful graphical capabilities like filters and paths, enabling things not possible with regular web technologies. I wish path could be a CSS property, simplifying its usage and allowing text or even block elements to be rendered along a path. This would be more efficient than embedding SVG within HTML elements.
Tired of recursive DOM traversal headaches? Check out the DOM TreeWalker API! This powerful tool lets you efficiently navigate the DOM, filtering nodes as you go. It's perfect for tasks like finding specific text nodes or elements, highlighting content, or even building Chrome extensions. I've included a simple example of how to use TreeWalker to find and linkify Twitter usernames on a page. Give it a try and see how much easier DOM manipulation can be!
I'm excited to announce I'll be speaking at the Berlin GTUG on July 15th, 2010, about building HTML-based applications. The talk will explore the differences between web pages and true applications, with plenty of examples. This will be my first time in Berlin, and although my visit is short, I'm looking forward to it! Slides and photos to follow.
I've released a new, open-source Microformat parser for .NET, available on Codeplex! This stream-based parser uses a flexible XML configuration to define how microformats like hCard and rel-tag are extracted from HTML/XML, allowing for easy adaptation to spec changes. The provided C# code example demonstrates the simplicity of using the framework to read and process microformat data. Feedback and contributions are welcome!
I've been busy with side projects lately, so the blog has been quiet. One project should be released this week. Another is a .Net 2.0/ASP.Net 2.0 hosted site for examples from this blog (and to help me learn .Net). It's behind schedule, but will eventually host controls, tutorials, etc. More info soon on the first project. And, btw, the FIELDSET tag is awesome!
I'm exploring the idea of a "Questions and Answers" microformat to add semantic meaning to questions and their corresponding answers within text. I propose using <span class=qa><span class=question>Where does paul kinlan live?</span><span class=answer>liverpool</span></span> as a potential structure. This could be beneficial for search functionality, allowing search engines to index question-answer pairs instead of entire pages. I'm looking for feedback on whether this is a valuable concept, worth pursuing, or if it has already been discussed elsewhere.
I've been working on AJAX Tagger version 2 and it's ready for everyday use! It leverages APIs from Yahoo, Amazon, Flickr, and Technorati, along with Wikipedia and even your own site's content to find related articles. It's all AJAX-based, uses a unique request queue, and outputs in both OPML and HTML. Plus, it even suggests related Amazon products. Currently, it's IE-only, so check it out at www.kinlan.co.uk/AjaxExperiments/AjaxTag2 and let me know your thoughts! The UI/UX needs some polish, but that's next on my list.
This post explores how to create JavaScript expando objects within C#. I discuss how to achieve this effect using both client-side JavaScript manipulation from C# and by adding attributes to HTML elements server-side, similar to how tooltips extend WinForms classes. I also touch upon the potential for C# 3.0 to offer this functionality natively and the possible use of Reflection and ExtenderProviders for dynamic property addition.
I have a new program idea: an automatic tag creator for Del.icio.us, similar to my Ajax Tagging Application. It would analyze a webpage's content to suggest relevant topical tags, which you could then select and use to upload the URL and tags to Del.icio.us. I believe this would be a useful tool. What are your thoughts?
I reported two issues with the Yahoo API over the weekend: one regarding the result number restriction not working as expected and another about the contextual term extraction API failing to process text after encountering HTML tags. Yahoo responded promptly on Monday, confirming that one issue is a bug being addressed and the other has already been fixed. I'm very impressed with their responsiveness and quick turnaround.
I'm excited to announce the release of the IE Developer Toolbar, a free tool for exploring HTML documents in both IE6 and IE7. It offers features like DOM exploration, disabling IE settings, viewing element information, outlining, image control, resizing, a ruler for pixel-perfect measurements, and standards validation with links to W3C specs. Download it now and share your feedback and bug reports!
As a user of the Windows Blogger Tool, I've identified some desired features for future releases. These include HTML editing before posting, image and table insertion, custom style application, accurate list creation (ordered and unordered), and proper handling of element shading. While the tool is currently not comprehensive, it serves as a decent starting point. Personally, I value control over post content, so I'll likely use it for drafting and later refinement, enabling quicker text entry without immediate tagging or styling concerns.
My first post using the new Blogger Word Blogging tool! It's easy to use and publishes really fast. I'm curious about HTML control since my AJAX tool outputs HTML. A few quirks: smiley icons show as "(", apostrophes look odd, and images/tables aren't supported. Planning a follow-up post with my feature requests.
I noticed a lack of referrals from Technorati and discovered my blogs weren't showing up in tag searches. The problem stemmed from my Technorati AJAX application, which was using single quotes instead of double quotes around the href attribute in the tag links. I've corrected the issue by changing the single quotes to double quotes in my application, and hopefully, this will resolve the problem with Technorati. While my application is now fixed, it raises the question of whether Technorati should be able to handle both single and double quotes.
In a previous post, I failed to test the alpha transparency feature. This post rectifies that. I've included an image with a green fade to white against a black background to demonstrate the effect. It may be garish, but it effectively showcases the alpha transparency.
