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've migrated my Hugo blog's editor to Editor.js. It's a block-based editor, unlike classic editors, offering more flexibility and a Medium-like experience. Although I faced some challenges adapting the ES5 code from the NPM distribution (compared to the ES Modules examples), building the UI was relatively straightforward. Check out Editor.js for more details.
I've just added the pinch-zoom-element web component to my photography blog. It's a tiny (~3kb), dependency-free custom element that allows for easy pinch-zooming on any HTML element. Check out the implementation on my blog (touch-enabled device/trackpad needed for testing) and see how simple it is to integrate! This element was crucial for the Squoosh app and perfectly exemplifies the power of web components for clean, reusable UI. I hope to see wider adoption of elements like these, especially for common use-cases like image zooming on e-commerce sites.
In this post, I share a simple client-side JavaScript PubSub system I built. Motivated by the Not-Invented-Here syndrome and the desire for independent UI components, I created a lightweight event manager called EventManager. It allows components to communicate without direct dependencies by publishing and subscribing to named events. While similar to tools like Redux, this approach avoids separate state management, leveraging the browser's existing state. The code is available on GitHub.
I wanted a traffic light system on iwanttouse.com to visually represent feature support. Initially, I used simple CSS classes like .good (green), .ok (amber), and .bad (red), but this required clunky conditional logic to handle the color transitions based on percentage support. Paul Lewis suggested using HSL which allows for smooth transitions between red, amber, and green by adjusting the Hue value (0-359). Now, I can dynamically set the color using element.styles.color = \"hsla(\" + ((percentage / 100) * 90) + \", 50%, 50%)\"; which maps the percentage support to a Hue value between 0 (red) and 90 (green).
I've given kinlan.co.uk a fresh coat of paint with a new Blogger Template. It's cleaner, faster, and easier on the eyes. I'm planning some more small tweaks in the near future, stay tuned!
I've been testing Internet Explorer 7 Beta 2 and noticed a significant improvement in font rendering, likely due to ClearType. The difference is subtle but noticeable, especially when comparing the BBC News website between Beta 1 and Beta 2. More info on IE7 changes can be found on the IE Blog.
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 kicks off documenting the requirements for the next version of AJAXTagger. The goal is to create a successful application (by my definition) by outlining features across functional areas, UI/UX, client/server-side business logic, data access, and dependencies. Key features include easy journal tagging, related information retrieval (tags, articles, blogs, websites), diverse search provider integration, streamlined results presentation, image inclusion, and efficient article pulling/saving. The UI should minimize user effort, provide immediate feedback, and offer information hiding. Performance is crucial, targeting IE6/7 and Firefox, with emphasis on minimal server round trips, client-side optimization, and error handling. Data storage is preferably client-side, with external access optimized for speed and resilience. External dependencies include various search engines/services, while internal constraints involve limited server access and reliance on HTML, JavaScript, and XmlHTTPrequest.
I'm still waiting for a response from Start.com regarding my UI improvement suggestion. Even though Robert Scoble mentioned their quick response to feedback, I haven't heard anything about my suggestion to improve the functionality of the close ("x") button on content panes. I've sent an email and even blogged about it, but no luck so far. Hopefully, they'll address it soon!
This is the fifth installment in my series on the AJAXTagger's failures. A major issue is its lack of intuitiveness. Users couldn't understand its purpose or how to use it without a demo. While it significantly reduced my tagging time, the next version needs improvements. I'm looking for feedback on how to make it more user-friendly, including better visual cues, a clearer UI, and improved documentation. Email me or comment with your suggestions!
In this part of my series on my first AJAX application, I discuss how my initial hopes for AJAX as a solution to bandwidth and UI problems, and for speed improvements, weren't fully realized. The first version, which incorporated Technorati stats and Yahoo's TermExtraction API, was slow due to sequential queries and Technorati's performance. I removed these features because I wanted a fully rendered page, which negated AJAX benefits. The next version will be fully asynchronous, with a request manager for trickle filling and background processing. Check out my AJAX Technorati Tagger to see what I'm aiming for.
This blog post, the third in a series about my first AJAX application, focuses on the disastrous visual design. While the functionality is there, the UI is frankly terrible. I've realized my design skills are lacking, and though I have a vision, I struggle to bring it to life visually. The problem is that the application's logic is tightly coupled to the UI. Moving forward, I need to decouple these components. The next version will have a UI-agnostic data structure that the UI can interrogate. This separation will allow me to work on the AJAX framework, business logic, and UI independently.
I'm a big fan of Channel 9, a Microsoft website showcasing developer insights. Their recent redesign is fantastic! They've moved from a traditional blog layout to a more concise "Most Recent" section, putting important content front and center. The new comment section design is also visually appealing, with a unique element that seems to break free from traditional HTML constraints. The addition of a tagging section, similar to Technorati, is a valuable feature, allowing users to easily see popular topics and gauge community interest. Overall, two thumbs up for the Channel 9 redesign – excellent work!
I've been trying out IE7 Beta 1 and have some mixed feelings. While I like the tabbed browsing and the new tab placement, I'm not sure it's the ideal UI. It makes it difficult to compare sites side-by-side and to see open pages in the taskbar like I could with separate windows. A hybrid approach, like Office's per-document window or better taskbar tooltips, might be a good compromise. Also, my ATOM feed isn't being auto-discovered, and I'd like to know how IE7 handles feed discovery in general. I'm looking forward to the improved CSS support in Beta 2, although some rendering bugs are already fixed in this build.
I've been discussing how to load styles and new UI designs into an Avalon application, specifically focusing on the challenge of connecting the UI to the code-behind class when loading XAML at runtime. While the XAML loader can parse properties, it doesn't automatically handle event delegate generation and element naming like compiled code/BAML. One idea is to have UI designers create BAML, allowing the app to load new compiled XAML and use the same code-behind class. Another approach involves designing multiple layouts sharing the same code-behind class. I'm also exploring loading a XAML file with resources at runtime and assigning them dynamically. More to come on my findings!
I'm exploring ways to dynamically change the layout and styles of my Avalon application at runtime, allowing users to switch between different UI themes. I'm considering several approaches:
Stylesheets: Can styles be stored externally and loaded dynamically? I've looked at DynamicResource but I'm unsure if it supports loading XAML from external files.
Dynamic XAML Loading: Can I reload the XAML used by a window at runtime using LoadComponent? The _contentLoaded flag suggests this might not be possible.
Restart on Style Change: A simpler but less desirable option is to require the application to restart when the user changes the UI style.
Localization Analogy: Could the localization framework be adapted for loading different XAML files? I'm unsure if there's a connection between Resource Files and XAML resources.
I've encountered a crash in XAMLPad (May CTP) when animating the width of a MenuItem. Specifically, if I remove the "From" attribute in a DoubleAnimation within a SetterTimeline, XAMLPad crashes. I expected the animation to start from the MenuItem's default width. Is this the correct way to use DoubleAnimation without specifying "From"? The crash occurs in a specific context: the Timeline is defined within a Style applied to a HeaderTemplate's DataTemplate element for a custom-drawn control. See the linked XAML for a complete example.
I had this cool idea to add some throbbing action to my GelButton menu items in XAML. I wanted them to subtly pulse when hovered over. Turns out, it's harder than I thought! I've learned some limitations in XAML (May CTP): you can't start/stop storyboards from triggers, apply a single animation to all controls of a type, and TargetID is deprecated in favor of TargetName. Points 1 & 2 are especially problematic as they blur the lines between UI and application logic. I'm going to look for workarounds and see if others have solutions. Might even post my (probably wrong) ideas on how things should work.
I've been experimenting with the Microsoft Avalon CTP (Community Technology Preview) Framework and wanted to share a simple XAML menu example. This example demonstrates how to create a custom style for menu items to make them look like GelButtons. Initially, I tried using a ControlTemplate but later realized a HeaderTemplate within the style was the correct approach. The XAML code provided creates a menu with styled menu items, showcasing how to customize the appearance and behavior of menu items in Avalon.
