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.
> 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
Great point! In a sense, it's testing by immediate use at compile time. I always imagine this to be the greatest productivity booster, even greater than AI. You'll notice things are wrong as you type.
> 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
Great point!
> supplementing with standard e.g. unit tests helps catch specification bugs like this
I don't think it does -- any specific input+output pair that a unit test tests for will satisfy all the constraints of a complete spec, so it will necessarily also satisfy an incomplete spec (i.e., a subset of those constraints). You could detect overly strong spec constraints this way, but not insufficiently strong ones.
I think you’re picturing the unit test case the opposite way around to me, but what I see relies on having something generated for you. While a unit test case will also pass the weak specs, there exist spec meeting implementations that don’t pass the test.
So either that requires “generate valid code and let’s test it” or that you can write a proof statement like:
If : there is at least one implementation which is valid for the following properties, and does not meet this single property (fixed input output pair) - specifications are under defined.
> there exist spec meeting implementations that don’t pass the test.
Ah, I see what you mean. Yes, in practice you would have an actual implementation, and if it failed the test but passed the spec you would know the spec was underspecified. I stand corrected.
> If : there is at least one implementation which is valid for the following properties, and does not meet this single property (fixed input output pair) - specifications are under defined.
Clever! But I guess we're probably some way from being able to existentially quantify over all possible implementations... It might be that the only satisfying implementation is one for which we cannot even prove termination. More optimistically, maybe it turns out that whenever there is a satisfying implementation, there must be one in some simple class (like straight-line programs) that can be checked exhaustively.
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.
> It's funny that it skips the entire cascading part of Cascading Style Sheets though. Are there major downsides besides that?
I think cascading is a bad default. It's useful, but only sometimes, and often causes headaches like unintended coupling and confusion about why rules are being overridden. The utility class approach (like Tailwind) makes a lot of issues like this go away. I don't see a good reason why the traditional approach is worth the extra pain or discipline.
CSS can be laser-like specific if you want it to. Want to only affect that thing? Use ids, inline styles or learn how to write proper selectors.
I am by no means a CSS expert, but 90% of CSS issues I heard complaints about boiled down to the complainers not having spent the time necessary to learn the basics. And the other 10% were solved by :has()
That being said, most other styling solutions I had used (e.g. in GUI libraries) will quickly make you wish you had CSS.
> CSS can be laser-like specific if you want it to. Want to only affect that thing? Use ids, inline styles or learn how to write proper selectors.
You've still go all the normal CSS problems like having to debug complex selectors, jumping between files to debug styling, having to name lots of things you're only going to use once, verbose media queries, verbose styling attributes, and not knowing when it's safe to delete styling because you don't know where it's shared.
And for what benefits? To say we're writing CSS "the right way", when it was designed for styling traditional documents and not for complex UIs?
This also strikes me as a "if everyone learned to do it properly, there wouldn't be a problem" statement. It's ignoring the reality that nobody can agree on the proper way to write CSS, and writing discipled CSS is fatiguing and time consuming. And even if you could get everyone to adopt the same approach, the above issues are still a big deal.
It's a real failing when a language or methodology requires you to invent your own complex discipline to tame it (e.g. C and C++), and get everyone on the team to follow this. At some stage, it's better to scrap everything and try again with what was learned to avoid the mess.
> 90% of CSS issues I heard complaints about boiled down to the complainers not having spent the time necessary to learn the basics. And the other 10% were solved by :has()
I really don't agree, I understand traditional CSS and how to use complex selectors and it's just not a good approach except mostly for styling traditional Markdown-like documents and adding your own utility classes. If laser-like specific selectors is something I want more of the time, I want this as the default and for it to be easy.
Tailwind is a very thin layer above CSS and you can't use it properly without knowing CSS. Coupled with the way you reuse styles in Tailwind by using templates (instead of sharing via classes), it solves most of the problems with CSS in a simple way that people find simple to follow.
Tailwind's major downside is it isn't the "traditional" way (which nobody can agree on anyway for complex UI styling), so Tailwind gets attacked for being the wrong way without its benefits and tradeoffs being examined properly.
Jumping between the files? 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.
My point isn't that CSS is perfect. My point is that someone has yet to show me a better styling language that isn't purely hypothetical. I am happy to learn new languages if there are clear benefits.
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.
I am editing my CSS files predominantly in the browsers inspector this has the benefit showing you what it looks like directly, potentially even with mobile preview.
I also don't need to hunt down CSS files because I rarely ever got more than 5 css files in projects I authored myself usually more like three: style.css for general stuff, fonts.css for fonts and multiple foo.css for page/section-specific stuff that isn't needed elsewhere thus only one of those is ever loaded.
For most "theming"-like stuff I make extensive use of css variables I want all my things to look like the button? Well just add the same styling with the variables in place.
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. Nowadays I rarely ever feel the need to create useless divs or go back and edit the HTML to fix styling issues thanks to grid layouts.
It wasn't always that way, but thst was to a degree the point of the linked article as well.
> 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 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.
Location: Edinburgh, UK and remote (I’m used to time zone differences and async work)
---
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 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!
Once you run the JavaScript of the npm library you just installed, if it's Node, what's to stop it accessing environment variables and any file it wants, and sending data to any domain it wants?
Regardless, it’s worth using `--ignore-scripts=true` because that’s the common vector these supply chain attacks target. Consider that when automating the attack, adding it to the application code is more difficult than injecting it into life-cycle scripts, which have well-known config lines.
For sourdough and breadmaking, I always find it funny how recipes and tips make out like yeast is almost delicate and hard to keep happy when we know yeast is super tough. It can survive drying, cold/freezing, high pressure, having no food for a long time, up to 50C heat, and more.
It's also easy and cheap to run experiments too like mixing salt directly with the yeast and seeing it doesn't make a noticeable difference to breadmaking, yet the myths persist.
The problem in general is consistency. Bread is very forgiving on flavour profiles so what you're saying works fine within a good threshold. For breweries it's usually not worth it as there are lots of nuances on the mutations of the harvested yeast and their effects into the flavour profile of the final product. There are some exceptions like natural fermented beers or anything related to kveik yeast, but in general people don't reuse yeast past 1-2 brews.
Location: Edinburgh, UK and remote (I’m used to time zone differences and async work)
---
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!
The interface is optimized to let you quickly explore and tweak multiple tints/shades at once so you can customize all colors exactly how you want e.g. try dragging vertically through the saturation curve in one motion to edit all the tints/shades at once, or shift whole curves horizontally by dragging between the dots on a curve.
It uses the HSLuv color space, where (unlike say HSL) the WCAG contrast stays the same when you change the hue and saturation sliders. This makes it much easier to explore accessible colors choices as you know only changes to the lightness slider will impact the contrast. You can also switch from the WCAG2 contrast checker to using APCA, which is meant to correct for inaccuracies in WCAG2, such as it being too forgiving for dark mode color combos.
Note the mobile version is more of a preview and the desktop version has more features.
I probably need to add something like a tutorial as there's a lot going on, but I've added more hints and tooltips recently. Open to feedback on what's initially confusing and what changes might help!
I'd also keen to hear from people who are interested in accessibility but don't know much about it too. I've tried to explain the WCAG contrast rules in the simplest way I can (interactively, via the live mockup example on the right and contrast indicator icons that appear on the left) but there's quite a lot to cover.
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!
reply