About Me

I’m creating a website about color science and am excited to share it with you! This website is a new and innovative open-source project that’s still a work in progress. So, keep an eye out for updates soon.

Throughout my career, I’ve gathered a ton of knowledge and created various resources related to light and color, including written materials, software programs, libraries, and presentations. I’ve even dabbled in building electronic devices with light and color sensors and their applications. I’ve realized that color is a fascinating and intricate subject, and sharing what I’ve learned might be helpful to others.

The main goal of this website is to become a comprehensive educational hub for anyone interested in delving into the world of color. Whether you’re a student working on a color-related project, a lighting designer, or a photographer, there’s something here for you. You’ll find previews of books I’m writing about Light and Color, exploring various topics in this exciting field in detail.

I’m someone who believes in learning through hands-on experience. That’s why I recommend checking out the CIE-JS Colorimetry library and the interactive color calculators and color vision tests in the toolbox section of the website. The CIE-JS library is well-documented and can perform many calculations you’ll encounter in the books. Besides containing algorithms, the library consists of a large and expanding collection of spectral data from lights, paints, displays, and spectral sensitivities for cameras.

So, stay tuned and get ready to dive into this site’s world of color science!

Site Design

Users should be able to access this site smoothly on their mobile devices. I’ve made this possible by creating a static website with dynamic features powered by Cascading Style Sheets and JavaScript on the client side.

Regarding the user interface, I’ve taken on a significant — for me at least — challenge. Instead of a traditional menu bar with drop-down menus, I’ve opted for a collection of relatively large icon buttons to help you navigate the content. This design adapts to your screen size and orientation, ensuring a seamless experience.

One cool feature is our layout flexibility. On smaller mobile screens, you’ll see content in a single column, but on larger screens, it switches to a multi-column layout to maintain readability without resorting to oversized fonts.

I’ve also implemented a dark mode option to reduce eye strain, especially during low-light conditions in the evening and early morning, and it can also help save battery life, especially if you’re using a device with an OLED display. In brighter settings, a light mode, which matches the display’s surroundings, is preferred. Achieving this dual-mode functionality, particularly for graphical elements, was quite tricky. Our graphics and icons are primarily in SVG format, allowing us to adjust their colors using CSS. Most of these icons are designed as symbols in an SVG container file, with black fills on light backgrounds and white on dark backgrounds.

I’m striving to support the major browsers, including Chrome, Safari, Firefox, and Edge. However, maintaining consistent rendering across all these platforms has proven challenging. For instance, Safari sometimes has trouble with our multi-column layout, but I’m hopeful they’ll resolve these issues in future updates. I’ve heavily utilized CSS Flexbox containers for responsive design, which may not work in older browsers but are crucial for our layout. Additionally, pages with complex calculations can benefit significantly from Web Assembly, a technology not supported by browsers released before 2018.

I kindly ask that you update your browser’s latest version to minimize layout errors and save me time trying to keep backward compatible. I apologize if this requires installing another browser if your preferred platform isn’t fully supported. I am committed to delivering the best experience I can.

Site Nuts and Bolts

When I first considered building this website, I thought about using raw HTML and CSS, which I’m familiar with. However, I quickly realized that maintaining a consistent design across the site this way would be quite challenging. It would mean repeating HTML source code across different files, which could get messy.

I turned to static site generators to simplify the design and make things more efficient. I had some experience with Hugo, a tool that uses themes to define different web pages’ overall look and layout. Unfortunately, I couldn’t find any design that suited my taste, so I attempted to modify an existing one, but it turned out to be too complicated for my needs.

That’s when I came across Zola, a static site generator written in Rust. I was drawn to it because Rust programs are known for being fast and reliable. Zola is a single executable generator that includes everything you need, so there’s no need for complex installation procedures. Although it had a bit of a learning curve, primarily since I hadn’t worked with SCSS style descriptions and template engines before, I managed to grasp it in just a day or two. I built the theme from scratch to better understand Zola’s theme system and keep it simple.

For hosting, I chose Netlify. It offers hosting and serverless backend services for web applications and static websites. Having dealt with servers, containers, and the never-ending task of security and system updates in the past, I appreciate how Netlify’s services handle all of this for me. Now, I can concentrate entirely on creating content. Since the site is static, Netlify efficiently serves it to users worldwide.

The entire site is published from a GitHub repository. The content gets processed and posted automatically whenever I push updates to GitHub. Just because it’s a static site doesn’t mean it lacks interactivity. It simply means the server doesn’t play a role in user interactions. The interactive features on this site, especially the online tools, are powered by client-side apps. Your web browser handles these tasks without needing to communicate with a server. Client-side JavaScript is primarily used to create interactive user interface features and display SVG graphics. Meanwhile, all the complex calculations are carried out using the CIE-JavaScript WebAssembly library.