seanwilson

So for my tool, I really need the live UI mockup without having to export first to tweak the colors until they work (e.g. often the off-white/very-light colors used for backgrounds are too vibrant otherwise), the control-point based curve editing helps to explore hue/saturation/lightness curves around a brand color without a lot of clicking, and I want the option for palettes where each color scale follows the same steps in lightness (for predictable contrast between steps from different color scales).

Barely any designers I work with know about P3 colors (feels like P3 mostly appeals to developers right now, for programmatic reasons?), so I'm not that interested in P3 if it means using OKLCH with its intimidating looking color picker. My tool uses HSLuv, which looks familiar like an HSL color picker, where unlike HSL only the lightness slider alters the WCAG contrast, so HSLuv (while limited to sRGB) is great for exploring accessible colors.

I've actually got support for APCA, but I find many struggle understanding WCAG contrast requirements already. There's Figma export too.

Anyway, there's lots of overlap between different color tools but the small details are important for different workflows and needs. I've started to realise too that most designers need a lot of introduction into building (accessible) color palettes in general so it's a tricky puzzle between adding features and trying to keep it simple, which is why I'm very open to suggestions!

> I've been relying on ChatGPT to select color schemes/palettes for me

Thanks! Any problems you've found with this approach or it's usually good enough?

For me, I couldn't find a tool that would let me customize multiple color scales at once, check they look good together on a mockup, and also be accessible. It's one of those problems where you can autogenerate something that gets you most of the way there, but then for it to be usable you need need to see how it looks on designs and fine tweak it.

A tool for creating CSS color palettes for web UIs that pass WCAG accessibility standards for color contrast, where you can fine tweak all the tints/shades quickly using a hue/saturation/lightness curve editing interface:

https://www.inclusivecolors.com/

Unlike most tools based around autogenerating colors, this is more of an editor that lets you fully customise all the tint/shades to your liking with a focus on accessibility. This is important when you've got existing brand colors to include and want to find accessible color combinations that work together.

Would love feedback in general and especially from designers/devs who have different needs in how they go about creating branded palettes!

Location: Edinburgh, UK

Remote: Yes (I’m used to time zone differences and async work)

Willing to relocate: No

Technologies: Figma, Sketch, TypeScript, JavaScript, Vue, Hugo, Jekyll, WordPress, Django, HTML/CSS, Bootstrap, Tailwind, OCaml, Java, Python, C, analytics, WCAG accessibility, website SEO/speed optimisation.

Résumé/CV: See https://seanw.org/ for portfolio, and https://checkbot.io/ and https://inclusivecolors.com/ for live example projects

Email: sw@seanw.org

---

SEEKING FREELANCE WORK | UX/UI & web design

I help startups with the UX/UI and web design of their products. This includes web apps, websites, landing pages, copywriting, and I can assist with frontend development where needed. My background of launching my own products and being a full stack developer helps me create practical designs that balance usability, aesthetics, development effort, and performance. I work to fixed price quotes for self-contained projects.

---

The best live example of my work is Checkbot (https://checkbot.io/), a browser extension that tests websites for SEO/speed/security problems. The entire project is my own work including coding the extension itself, UX/UI design, website design (the homepage is optimised to load in 0.7 seconds, 0.3MB data transferred), marketing, website copy, and website articles on web best practices.

[ Rated 4.9/5, 80K+ active users, 100s of paying subscribers ]

---

I have 10+ years of experience, including a PhD in software verification and 5+ years working for myself helping over 25 companies including Just Eat, Triumph Motorcycles and Fogbender (YC W22). See my website for testimonials, portfolio and more: https://seanw.org

Note: For large projects, my partner usually assists me in the background (I’m working on starting a design studio with her in the future)

---

Email sw@seanw.org with a short description of 1) your project 2) how you think I can help 3) the business outcome you’re looking for and 4) any deadlines. I can get back to you in one working day to arrange a call to discuss a quote and how we can work together!

There's also the significant cost to climate change because growing crops to feed to animals instead of eating crops directly loses the majority of calories, but it gets ignored because doing something about it is going to be unpopular:

https://ourworldindata.org/global-land-for-agriculture

> More than three-quarters of global agricultural land is used for livestock, despite meat and dairy making up a much smaller share of the world's protein and calories.

> Despite the vast land used for livestock animals, they contribute quite a small share of the global calorie and protein supply. Meat, dairy, and farmed fish provide just 17% of the world’s calories and 38% of its protein.

https://ourworldindata.org/land-use-diets

> Livestock are fed from two sources – lands on which the animals graze and land on which feeding crops, such as soy and cereals, are grown. How much would our agricultural land use decline if the world adopted a plant-based diet?

> Research suggests that if everyone shifted to a plant-based diet, we would reduce global land use for agriculture by 75%.

If the goal of the post is to pick terminal colors that contrast on both white/light and black/dark backgrounds, it means you're stuck with midtone colors (between light and dark). This is really limiting for color choice (there's no such thing as "dark yellow" for example), and lowers the maximum contrast you can have for text because you get the best contrast when one color is dark and the other is light.

Ideally, instead of the CLI app switching to "bright green", it would pick a "bright contrasting green". So if the terminal background was dark, it would pick bright green, and for light background it would pick a darker green. There isn't CLI app implementations for this? This is similar to how you'd implement dark mode in a web app.

I wish one of those regex libraries that replaces the regex symbols with human readable words would become standard. Or they don't work well?

Regex is one of those things where I have to look up to remind myself what the symbols are, and by the time I need this info again I've forgotten it all.

I can't think of anywhere else in general programming where we have something so terse and symbol heavy.

I know what you meant, but WCAG2 is actually flawed for dark mode. For gray body text on black, going with the minimum 4.5:1 ratio is hard to read. APCA attempts to fix this https://git.apcacontrast.com/documentation/APCA_in_a_Nutshel....

> They act as stand-ins for actual users and will flag all sorts of usability problems.

I think everyone on the team should get involved in this kind of feedback because raw first impressions on new content (which you can only experience once, and will be somewhat similar to impatient new users) is super valuable.

I remember as a dev flagging some tech marketing copy aimed at non-devs as confusing and being told by a manager not to give any more feedback like that because I wasn't in marketing... If your own team that's familiar with your product is a little confused, you can probably x10 that confusion for outside users, and multiply that again if a dev is confused by tech content aimed at non-devs.

I find it really common as well that you get non-tech people writing about tech topics for marketing and landing pages, and because they only have a surface level understanding of the the tech the text becomes really vague with little meaning.

And you'll get lots devs and other people on the team agreeing in secret the e.g. the product homepage content isn't great but are scared to say anything because they feel they have to stay inside their bubble and there isn't a culture of sharing feedback like that.

Any details about what problems you were having getting a usable Tailwind palette? There seems to be lots of different use case so I'd love to hear more.

That's awesome, I haven't kept up in what helps to get into AI recommendations. Guessing it's related to search result rankings? Not sure if the site would be in the training data. Curious if you asked about accessibility as that's my focus.

Still working on my tool for creating custom Tailwind-style accessible color palettes for web and UI design:

https://www.inclusivecolors.com/

There's millions of tools that try to autogenerate colors for you using algorithms and AI, but they usually ignore WCAG accessible contrast requirements, don't let you customise the tints/shades, don't let you create a full palette of colors, and the colors often don't look right on actual designs.

This tool is meant to make customising tints/shades intuitive and quick enough in a few clicks via a hue/saturation/lightness curve editing interface that you won't want to rely on autogeneration. There's also a live mockup showing how your palette looks on a UI design that checks pairings pass contrast requirements, to guide you as you tweak your colors and to teach you the WCAG rules.

You can then export your palette to regular CSS variables, Tailwind, Figma or Adobe for use in your designs.

Really open to any feedback on features that would be useful! I think the only way I can make it simpler to use is to make it more opinionated about how your palette should be designed so interested in any thoughts about that too.

Content should come from your database, Markdown, JSON, models etc.

Presentation is determined by the HTML and CSS together.

So your content and presentation is already separate enough to get the benefits. Breaking up the presentation layer further with premature abstractions spread over multiple files comes at a cost for little payback. I'm sure everyone has worked on sites where you're scared to make CSS file edits because the unpredictable ripple of changes might break unrelated pages.

Styling code near your semantic HTML tags doesn't get in the way, and they're highly related too so you want to iterate and review on them together.

I've never seen a complex website redesign that didn't involve almost gutting the HTML either. CSS isn't powerful enough alone and it's not worth the cost of jumping through hoops trying because it's rare sites need theme switchers. Even blog post themes for the same platform come with their own HTML instead of being CSS-only.

> If you were writing a blog post you would want to be able to change the theme without going through every blog post you ever wrote, no?

Tailwind sites often have a `prose` class specifically for styling post content in the traditional CSS way (especially if you're not in control of how the HTML was generated) and this is some of the simplest styling work. For complex UIs and branded elements though, the utility class approach scales much better.

> They make the web worse for the world by tempting the developer to take the easier, less interactive route than what would have been taken in the pre-SSG world.

If I didn't have the static site option though, I might not host a project at all because I don't want to have to deal with the maintenance burden. I haven't kept up but it would be nice if there were more options between a no-maintenance static site hosting, and a high-maintenance dynamic site.

Would be amazing if the web/browsers had standardized ways by now of easily adding common website features like authentication, search, comments, votes, and saving user data (via bring your own storage) that didn't require everyone to host and maintain a custom stack. Email is a solved problem that you don't have to host yourself for example, why is it still such an effort for the other common website features?

Sounds like we agree! There's no perfect solution and I'm not saying SSGs are always the best fit. It really depends on the project and what the people involved value.

For my own solo projects, the ease of hosting for static sites is often such a big win for me that I'm willing to forego some interactivity even though more interactive features would be nice. Knowing that I can upload several static sites and they'll run themselves without any maintenance for years and without potential security problems keeps my life nice and calm. It depends what you want to prioritize.

> it starts to look like a slightly worse solution than what we already had

You don't see how the server based solution is an order of magnitude more effort to maintain, monitor, optimize, and secure compared to hosting static files? Especially if search is a minor feature of your site, keeping the hosting simple can be a very reasonable tradeoff.

Lots of blogs/sites also do fine with only category and tag filtering (most SSGs have this built in) without text search, and users can use a search engine if they need more.

You don't pre-render the search pages. You generate some search index files on the build step (something like a map of keywords to matching post URLs), and then client side JavaScript requests the search index files it needs on demand and generates the search results on the page. For a modest blog, I think the compressed index can be a few 100K. A single large image can be bigger than that.

Nothing is perfect, but the above is really simple to host, is low maintenance, and easy to secure.

I've used https://lunrjs.com/guides/getting_started.html briefly and it has lots of options for things like different fields, complex queries, fuzzy searching and wildcards. Didn't notice anything specific about dates but you could always add date as a field then filter out a date range manually at the end. I'm sure there's better libraries now as well.

See https://gohugo.io/tools/search/. Not sure how well they scale to thousands of posts, but they work by statically generating multiple static search index files at build time that are queried via client JavaScript when hosted. The search UX is actually really good because they tend to respond instantly as you type your query and allow complex queries.

> That's especially odd as I think those links were the defaults from the Archie theme

Internal redirects are really easy to miss without checking with a tool because browsers aren't noisy about it. Lots of sites have unnecessary redirects from URLs that use http:// instead of https://, www vs no-www, and missing/extra trailing slashes, where with some redirect configs you can get a chain of 2 or 3 redirects before you get to the destination page.

I really like Hugo as well. I've found it significantly faster than Jekyll which makes iterating much more pleasant and it's a single binary to download/run vs having to deal with Ruby and its package manager.

I'm amazed there still isn't a decent free simple to host CMS solution with live page previews, a basic page builder, and simple hosting yet though. Is there one?

There's https://demo.decapcms.org/ (previously Netlify CMS) that you install and run via adding a short JavaScript snippet to a page. It connects to GitHub directly to edit content. You can running it locally or online, but you need some hosting glue to connect to GitHub. Netlify provides this but more options would be nice and I think they limit how many total users can connect on free plans. You can get something like a page builder set up via custom content blocks, but I don't think there's going to be a simple way to render live previews via Hugo (written in Go) in a browser. A JavaScript based SSG would help here, but now you have to deal with the JavaScript ecosystem.

@geerlingguy Not a huge deal but noticed (scanning with https://www.checkbot.io/) if you click a tag in a post, it has an unnecessary redirect causing a speed bump that's easy to fix e.g. the post has a link to https://www.jeffgeerling.com/tags/drupal which then redirects to https://www.jeffgeerling.com/tags/drupal/.

SEEKING FREELANCE WORK | UX/UI & web design

Location: Edinburgh, UK

Remote: Yes (I’m used to time zone differences and async work)

Willing to relocate: No

Technologies: Figma, Sketch, TypeScript, JavaScript, Vue, Hugo, Jekyll, WordPress, Django, HTML/CSS, Bootstrap, Tailwind, OCaml, Java, Python, C, analytics, WCAG accessibility, website SEO/speed optimisation.

Résumé/CV: See https://seanw.org/ for portfolio, and https://checkbot.io/ and https://inclusivecolors.com/ for live example projects

Email: sw@seanw.org

---

I help startups with the UX/UI and web design of their products. This includes web apps, websites, landing pages, copywriting, and I can assist with frontend development where needed. My background of launching my own products and being a full stack developer helps me create practical designs that balance usability, aesthetics, development effort, and performance. I work to fixed price quotes for self-contained projects.

---

The best live example of my work is Checkbot (https://checkbot.io/), a browser extension that tests websites for SEO/speed/security problems. The entire project is my own work including coding the extension itself, UX/UI design, website design (the homepage is optimised to load in 0.7 seconds, 0.3MB data transferred), marketing, website copy, and website articles on web best practices.

[ Rated 4.9/5, 80K+ active users, 100s of paying subscribers ]

---

I have 10+ years of experience, including a PhD in software verification and 5+ years working for myself helping over 25 companies including Just Eat, Triumph Motorcycles and Fogbender (YC W22). See my website for testimonials, portfolio and more: https://seanw.org

Note: For large projects, my partner usually assists me in the background (I’m working on starting a design studio with her in the future)

---

Email sw@seanw.org with a short description of 1) your project 2) how you think I can help 3) the business outcome you’re looking for and 4) any deadlines. I can get back to you in one working day to arrange a call to discuss a quote and how we can work together!

Location: Edinburgh, UK

Remote: Yes (I’m used to time zone differences and async work)

Willing to relocate: No

Technologies: Figma, Sketch, TypeScript, JavaScript, Vue, Hugo, Jekyll, WordPress, Django, HTML/CSS, Bootstrap, Tailwind, OCaml, Java, Python, C, analytics, WCAG accessibility, website SEO/speed optimisation.

Résumé/CV: See https://seanw.org/ for portfolio, and https://checkbot.io/ and https://inclusivecolors.com/ for live example projects

Email: sw@seanw.org

---

SEEKING FREELANCE WORK | UX/UI & web design

I help startups with the UX/UI and web design of their products. This includes web apps, websites, landing pages, copywriting, and I can assist with frontend development where needed. My background of launching my own products and being a full stack developer helps me create practical designs that balance usability, aesthetics, development effort, and performance. I work to fixed price quotes for self-contained projects.

---

The best live example of my work is Checkbot (https://checkbot.io/), a browser extension that tests websites for SEO/speed/security problems. The entire project is my own work including coding the extension itself, UX/UI design, website design (the homepage is optimised to load in 0.7 seconds, 0.3MB data transferred), marketing, website copy, and website articles on web best practices.

[ Rated 4.9/5, 80K+ active users, 100s of paying subscribers ]

---

I have 10+ years of experience, including a PhD in software verification and 5+ years working for myself helping over 25 companies including Just Eat, Triumph Motorcycles and Fogbender (YC W22). See my website for testimonials, portfolio and more: https://seanw.org

Note: For large projects, my partner usually assists me in the background (I’m working on starting a design studio with her in the future)

---

Email sw@seanw.org with a short description of 1) your project 2) how you think I can help 3) the business outcome you’re looking for and 4) any deadlines. I can get back to you in one working day to arrange a call to discuss a quote and how we can work together!

I'm still tweaking my tool for creating accessible Tailwind-style color palettes for web/UI design that pass WCAG 2 contrast requirements:

https://www.inclusivecolors.com/

There's 100s of color palette generation tools, where most only let you customize a single color then try to autogenerate tints/shades without much thought about accessibility or tints/shades customization. The main features of this tool are:

- Emphasis on accessibility. A live UI mockup using your palette warns you if your tints/shades are lacking contrast when used in practice for headings, paragraphs, borders, and buttons, and teaches you the WCAG rules. Fixing contrast issues and exploring accessible color options is also made much easier using an HSLuv color picker, where only the lightness slider alters the contrast checks, and not the hue/saturation sliders (most tools use HSL, where hue/saturation changes counterintuitively alter contrast checks which makes accessibility really tough!).

- You can tweak the hue/saturation/lightness of every tint/shade. This is useful because autogenerated colors are never quite right, and customization is really important for branding work when you have to include specific tints/shades. The curve-based hue/saturation/lightness editing UI also makes this a really quick process.

- Instead of just a handful of colors, this tool lets you create a full palette. For example, if your primary color is blue, you always end up needing other colors like green for success, red for danger, and gray for text, then 11 tints/shades for all of these, so you want a tool that lets you tweak, check, compare and manage them all at once.

It's mostly a demo on mobile so check it on desktop. I'm still working on making it easier to use as it probably requires some design background to understand, but really open to feedback!

Major flaws in a specification for one function are usually quickly picked up when the proof for another function relies on the missing specification properties e.g. if you only prove the list returned by a function has a certain length and nothing about the contents of the list, you're going to quickly find out when another function needs to prove anything trivial about the contents of that list.

Not that it's flawless either, but supplementing with standard e.g. unit tests helps catch specification bugs like this and you could generate unit test examples from the specification to review for correctness as well. You would notice problems when running the program too just like with regular programming, you wouldn't just write proofs about your program and not try running it.

Nothing is perfect but just like in regular programming languages where adding a few simple regular automated tests or some more accurate static type annotations (e.g. JavaScript to TypeScript) will catch a lot of problems compared to nothing at all (and with diminishing returns), a proof of some simple properties will flush out a lot of bugs and edge cases. So I feel the common reaction of "specifications can have flaws" is overplayed when it's clearly a big step up the process of eliminating bugs.

Does an alternative exist that's foolproof?

> As for the divide between HTML and CSS: to me HTML is 99% semantic. That means I describe the information as it should be described and the rest is done in CSS.

How? Check the code of this first hero header:

https://tailwindcss.com/plus/ui-blocks/marketing/sections/he...

How do you visually group and align elements in designs like this one by only using semantic elements? I agree there's a few things in there that could be ol/ul/li tags but there's a lot of divs that are just flex containers or flex items. I don't see what useful semantics they could all have when they're mostly for cosmetic reasons.

I miss the Freelancers thread as well. The kind of information you post when you're looking for a freelancer or open to freelance work is really different from typical posts for permanent positions. The freelance posts are going to get lost now within the Hiring thread.

> Jumping between the files?

I mean having to jump between the HTML and multiple CSS files (which often you have to track down by using the browser inspector) to make edits to while styling things. When HTML and styling are tightly coupled anyway and almost always edited together, it just slow everything down for no good reason vs co-locating them together via utility classes.

> The cascading part means you can always add in a file after and overwrite it. I don't see how this would get better without the cascading part.

If you mean overwriting styles set somewhere else, this is what makes CSS confusing and hard to refactor. Cascading is just best avoided whenever you can.

> I am happy to learn new languages if there are clear benefits.

I can recommend looking at Tailwind. Make sure to use it with some kind of templating language e.g. so a "button" component goes in a template file, as that's the way you reuse styling (vs copy/paste) which critics seem to miss. It makes styling much simpler and quicker (everything is co-located, no need to write selectors, no need to make up class names, very concise syntax especially for mobile), especially if you're doing complex responsive designs.