I've always struggled with how to bring languages like Go and Rust into my web development work. Tooling is the easiest way to go. There is a reason why most new web development tooling is written in Rust. But I've been determined to work with Go instead. For these exercises, I will create an API server using Go's built-in HTTP router module, something similar to what you can do with Expresshttps://expressjs.com/ in Node.js. I chose to work with the net/httphttps://pkg.go.dev/net/http module, part of Go's standard library, rather than a third-party module like Gorilla Muxhttps://pkg.go.dev/github.com/gorilla/mux. We may also look at the...
Headings can show orphan issues that can cause readability issues. In this context, an orphan is a single word or syllable that sits at the bottom of a paragraph of text. As a developer, you don't know the final size, font size, or even the language of a headline or paragraph. All the variables needed for an effective and aesthetic treatment of text wrapping, are in the browser. Using text-wrap: balancehttps://developer.chrome.com/docs/css-ui/css-text-wrap-balance we can provide better control over these orphan headings. Before we had text-wrap: balance we had few tools to keep the heading lines balanced. The best and probably only...
Chris Coyuer wrote about the hanging punctuationhttps://chriscoyier.net/2023/11/27/the-hanging-punctuation-property-in-css/ CSS property, how it works and why it may be useful. This property controls the pulling of characters, usually quotation marks, from the body of the text. See the Pen Hanging Punctuation in CSS with @supports and Custom Properties by Carlos Araya @caraya on CodePen. Officially, only Safari supports the feature so we need feature querieshttps://developer.mozilla.org/en-US/docs/Web/CSS/CSSconditionalrules/Usingfeaturequeries to make sure this works as the intended enhancement it is. We check if the browser supports the feature and then provide code using the feature along with any other relevant code. css @supports hanging-punctuation: first {...
This post is an extension to the previous one What are Triadic and Tetradic Color Palettes and How to Use Themhttps://publishing-project.rivendellweb.net/what-are-triadic-and-tetradic-color-palettes/. It will explore further types of palettes, also known as harmonies in color theory, and how to generate them. Complementary colors These are two colors that are positioned on opposite ends of the color wheel, 180 degrees from each other. Complementary Colors Split-complementary colors This is more complicated. Split complementary colors are one primary hue and two hues adjacent to the primary color’s complement. For this example I've chosen colors 30 degrees away from the complementary color...
In my last post Creating an OKLCH Generator Toolhttps://publishing-project.rivendellweb.net/creating-an-oklch-generator-tool/, I wrote about about Triadic and Tetradic palettes and how to build them using vanilla JS. This post will cover what these palettes are and how to use them. Triadic Colors !OKLCH color wheel, provided for reference. Source Coloraidehttps://github.com/facelessuser/coloraidehttps://res.cloudinary.com/dfh6ihzvj/image/upload/cscale,w500/fauto,qauto/oklch-color-wheelkz2mmy.png Triadic colorshttps://www.interaction-design.org/literature/article/triadic-color-scheme are equidistant on the color wheel. Example of Triadic Colors at 0, 120, and 240 degrees in the color wheel If we use blue as our starting color, the palette will loop around, that's why the third color is at 92 on the wheel. ...
This code started as an exercise in ChatGPT prompt generation and a way to explore what we can do with OKLCH colors. It uses vanilla Javascript and deliberately avoids using libraries like Chroma.jshttps://gka.github.io/chroma.js/ or Color.jshttps://colorjs.io/. The basis for the project is a color builder. On top of that, we build a series of additional tools to make other color experiments. CSS support for OKLCH colors is part of the CSS Color Level 4https://www.w3.org/TR/css-color-4/lab-colors specification so you need to be mindful that older versions of your browsers may not support the color space of the notation. The color components are: L...
The ECMAScript specification gained a new set of methods for the Array object. These methods work on copies of the original array rather than modifying the original array directly. There are other ways to complete the tasks these methods do. Which method you use will largely depend on whether you need to keep the original array intact or not. Reversing an array by copy with toReversed When I want to reverse the content of an array, I normally clone the array using fromhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/GlobalObjects/Array/from and then reverse it using reversehttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/GlobalObjects/Array/reverse. js let cars = 'Porsche', 'Ferrari', 'BMW' let reverseCars = Array.fromcars.reverse;...
Jeremy Keith recently published Declarative designhttps://adactio.com/journal/18982 on his blog. The premise of the post is that there are two divergent ways to think about web design and building web content, encapsulated by these two opposed statements: CSS is broken and I want my tools to work around the way CSS has been designed. and CSS is awesome and I want my tools to amplify the way that CSS has been designed. Which of these statements resonates with you will influence the tools that you choose and the comfort you feel when you use tools that don't fit your paradigm. This...
Among the large number of new features in ES6/ES2015 are Template Literals/Stringshttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Templateliterals. These are backtick "\" enclosed expressions that allow for multiline expressions and string interpolations using placeholders ${varName}. js let name = "William" let carMake = "Ferrari" let myTemplateString = My name is ${name} and I own a ${carMake} // -> My name is William and I own a Ferrari White space is significant. Inserting spaces or newline characters will change the resulting string. If we insert newline characters into myTemplateString will produce a different result that may not be what you're expecting. js let name = "William" let...
CSS has evolved significantly over the last few years. Some of these changes deal with a set of selectors known as the functional pseudo-classes. The :not pseudo-class has been around for a while at least since IE9, but when the other selectors we'll discuss on the post were introduced in the Selectors Level 4https://w3c.github.io/csswg-drafts/selectors/ specification, the :nothttps://drafts.csswg.org/selectors/negation pseudo-class was changed to accept a selector list to keep it in line with the other functional pseudo-classes. The :is Pseudo-class The Matches-Any Pseudo-class accepts a comma-separated list of selectors and matches any element that can be selected by one of the items...
