chriswood

@chriswood@mastodon.design

Contract UX + UI Designer, Researcher, and Low-code Developer.

I craft apps and websites that improve people's lives, aim to meet accessibility standards, and help organisations meet their goals.

See my portfolio site for my rates, case studies and values.

(I'm also building an open-source icon manager app on the side #IconBear)

Location: Edinburgh, Scotland

Languages: English and Spanish
Pronouns: he/him
🏳️‍🌈

This profile is from a federated server and may be incomplete. Browse more on the original instance.

smach, to random
@smach@masto.machlis.com avatar

What happens when you mandate masks at a conference now that most people no longer wear them but medically vulnerable people are still at risk because ? In the case of , the conference sells out.

Why a masking policy? “Many of us and our fellow community members can’t attend without health and safety guidelines in place. We want PyCon US to be an event that everyone feels safe attending,” organizers explained.

Well done @pycon https://fosstodon.org/@pycon/112445571644276379

chriswood,

@smach @cferdinandi @pycon number 3 sums up my exact reasons for wearing a mask in indoor spaces. That’s so succinctly put.

chriswood,

@cferdinandi @smach @pycon I used to feel self-conscious about being the only person wearing a mask in shops or public transport. But I talked to friends about it, and they said whenever they see someone wearing a mask, they think “oh that’s smart, I should do that too.” Plus me and my partner have barely been sick this year, which is wonderful.

chriswood, to GNOME

More progress made!

The WIP icon manager app now renders SVG icons as vector drawings, so they don't get pixellated and appear extra crisp on HiDPi displays.

The search bar is also now visible in the header bar for quick access. It now filters the icons in the currently selected list.

#GNOME #AppDev #GTK

Video demo of clicking on different icons which are rendered in high resolution, and searching for arrow icons

chriswood,

@bragefuglseth hmm I agree about the sidebar. But I want the search bar to take up plenty of space, as searching is one of the main tasks I expect users will do. Is there a way to make the header bar span both the content panel and a full-height right sidebar?

chriswood,

@bragefuglseth I looked into dialogs, but decided against them. The GNOME HIG state that it’s best to keep tools readily available if the user needs access to them while they carry out a task.

If I’m looking for an icon for a more abstract concept, like a meeting, I’ll usually scroll through the whole set and compare 5 or so icons. It’s helpful to have the large preview open on one potential icon while I scroll through the list and look for something better.

chriswood,

For every day that I've sat down to work on this app, I've managed to solve a problem that seemed insurmountable the day before.

The app now copies icons to your clipboard, ready to paste into design software! It can paste icons both as SVG data (which Inkscape supports) and as a temporary file (which Figma and file managers support).

It also loads icon sets that are bundled with the app and has an overview of all the sets installed.

#GNOME #GTK #AppDev

Video walkthrough of browsing the icon sets, copying a single icon, and then pasting it into Inkscape and Figma

chriswood,

Having trouble with a GtkGridList. Looking for help.

I've replaced a GtkFlowBox with a GtkGridList to improve performance. However, the GridList is breaking the layout.

The height of every child of the GridList expands to beyond the edges of the window (screenshot 1), unless it’s the direct descendent of a GtkScrolledWindow (screenshot 2). In the second case, the grid renders as expected but I can't put the header in.

Does anyone know a way around this? (Code below)

#GNOME #GTK #AppDev

Grid that displays correctly but has no header

chriswood,

@vixalientoots thank you, this is what I suspected. I’ll work with this limitation then 😊

Yes that sounds great, I’d be happy to take a look at your custom widget and see if I can rebuild it in JS!

Thanks for your help!

chriswood,

@sonny Yes, absolutely. The official documentation feels impenetrable for a newcomer and assumes the user already has a lot of knowledge. I've found it much easier to understand how to build apps in GTK by seeing all the examples there, copying and pasting them into my own project, and tweaking them.

chriswood,

@sonny The concept of some widgets only accepting 1 child was mind-boggling, as someone coming from a web development background. I didn't see this clearly explained anywhere, nor any explanation of why some components have their child as a <property> or as a <child>. I sort of had to work this out by looking through the examples in Workbench. This was by far the biggest barrier; if I hadn't worked that out I would've given up early.

chriswood,

@sonny Workbench was the best resource for getting started. I love how you've got the different language bindings in there; that's really helpful.
It can be a bit tedious closing windows. It keeps asking me to save changes when all I did was click on a button in the preview panel. And I'd love it if it remembered my choice of UI templating language; at the moment, I manually change it to "XML" every time I open a new preview.
But overall, it's totally invaluable. It's a wonderful learning tool

chriswood,

@sonny I think I would've found it helpful to see a few more examples of navigation views and header bars. That was the first thing I built, and it took me a long time to work out how to put a widget in the middle of a header bar. I kept poring through the GTK documentation on GtkHeaderBar, trying <child type="center">, before realising the proper syntax was an AdwHeaderBar and the property <property type="title-widget">
Other than that, it's been really complete and fleshed out!

chriswood, to GNOME

Today I began building a native icon manager app for Linux.
On MacOS, I relied on IconJar to select icon sets that fitted different visual styles. It also gave me lightning-fast access to glyphs I would use over and over again, like arrows and chevrons.
While we have Norde Source for Linux, sadly:

chriswood,

@bragefuglseth Perfect, I'll follow suit with those conventions. Thank you very much!

chriswood,

The UI is coming along, bit by bit! Building templates is coming a bit more naturally too.

chriswood,

Today I managed to:

  • load a directory of icons into the app. Even with 2000+ icons in the grid it's not too sluggish!
  • add a right-click context menu
  • invert the icons in dark mode
  • show the details of the selected icon in the sidebar
  • get the sidebar toggle button working

Will need to pick someone's brain on why the SVGs are rendered blurry at some point. (They're in GtkImage widgets with a set pixel-size)

Demo of selecting an icon to view its details in the sidebar, and toggling between light and dark modes.

chriswood,

@ebassi Ah perfect, thank you! Will take a look at this

chriswood,

@ebassi Got it, thank you very much!
I'm writing the app in Javascript and am not familiar with C. It looks like the method gdk_paintable_snapshot is the important one, is that right? Is there any steer you could give me on how to make a snapshot from the contents of an SVG file?

chriswood, to UXDesign

— Accepting new freelance clients —
I can help with UX + UI design, research, or Webflow development. I'm available to start next week - just pop me a message saying what you're after 😊

My rates, case studies, and values are on my website:
https://www.chris-wood.design

Boosts appreciated!

fedora, to fedora

Here's an update from the Fedora Operations Architect on how development is going, including news on Fedora 40 Beta, Fedora 41 changes, and more!
https://communityblog.fedoraproject.org/fedora-ops-architect-weekly-march-8th/

Aoife gave a great intro a couple of months. Learn more about her role!
https://www.youtube.com/watch?v=ToXnmlgan4E

#Fedora #Linux #OpenSource

chriswood,

@fedora Clicking on this link opens up a JSON inspector for me. Searching for the page via Ecosia then clicking the link to this blog post results in the same thing

chriswood, to foss

@inkscape has quickly become one of my favourite design tools. The "Power stroke" live path effect allows you to turn a simple curvy stroke into a dynamic, sweeping form.

  1. Draw a curvy line using the pencil or the pen tool
  2. Open the "Path effects" panel
  3. Search for the path effect "Power stroke"
  4. Using the Node Tool (A), drag the purple handles to adjust the tapering

Video walking through the steps written to use the "Power stroke" live path effect in Inkscape. At the end of the walkthrough, I scroll through several example of swooping black lines with varying stroke thicknesses. No audio.

bragefuglseth, to firefox
@bragefuglseth@fosstodon.org avatar

Firefox with its stock look, proper rounded window corners and actual Wayland support feels like jumping 5 years ahead of how it's shipped by default currently.

#Firefox #GNOME #Fedora

Screenshot of Firefox with all the window corners rounded and its modern stock theme

chriswood,

@bragefuglseth Ooh great to hear! However my Firefox doesn't have rounded window corners in the bottom two corners. I'm on 123.0 from the Fedora Linux RPM repo. Hopefully it makes its way to my laptop soon, that would look really polished.

reiver, to fediverse
@reiver@mastodon.social avatar

A preview of #FediverseCity

It is something that myself and @sia have been working on.

#FediverseCity is a site meant to help with onboarding onto the Fediverse

This is a rough wireframe for the home-page of #FediverseCity . I.e., this in NOT the final design. But something where you can get a feel for how the home-page might function.

Feedback welcome!

.

#Fediverse #FediverseUX #SpreadFediverse

chriswood,

@reiver @sia

Exciting to see you’re working on this!

Which onboarding problem are you trying to solve? The end of the sentence above the search box seems to suggest you want to help users find which platform they should sign up for. Is that the case?

chriswood, to accessibility

ARIA patterns library —APG
https://www.w3.org/WAI/ARIA/apg/patterns/

An extensive reference on how to make web components like accordions, breadcrumbs, and tabs accessible for screen reader users. From @wai

#a11y #webdev

chriswood,

@yatil @wai This is great to know, thank you. So it sounds like it's best to use these as a way to learn more about ARIA rather than a definitive standard. I've edited the original post to reflect this. Thank you

  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • anitta
  • ethstaker
  • DreamBathrooms
  • InstantRegret
  • magazineikmin
  • ngwrru68w68
  • khanakhh
  • everett
  • thenastyranch
  • Youngstown
  • slotface
  • tacticalgear
  • kavyap
  • osvaldo12
  • JUstTest
  • modclub
  • mdbf
  • GTA5RPClips
  • tester
  • Durango
  • rosin
  • cisconetworking
  • normalnudes
  • megavids
  • provamag3
  • cubers
  • Leos
  • lostlight
  • All magazines
    •