DEV Community: Matthew Mammola

Mastering the Dark and Light: Using CSS Variables for a Dark Mode Toggle

Matthew Mammola — Wed, 13 Sep 2023 21:22:15 +0000

Dark Mode is probably nothing new to you. This eye-pleasing feature not only enhances user experience but also adds a touch of modernity and sophistication to websites. I recently explored the basics of implementing the framework to deploy a light/dark mode toggle from scratch. I had wondered how to seamlessly switch between light and dark modes on a web page, and I found what I was looking for in a very informative post by pqina.

Here, I explore a simple yet effective method to toggle between light and dark modes using CSS variables and a bit of JavaScript. While this example is only a barebones structure, the basic process can be expanded to more complex usage.

Check out the CodePen for the complete example.

Media Query

When I started to implement, I adopted the method of setting the default styling of the web page to be light mode, and then identifying a dark mode preference through a nifty media query prefers-color-scheme.

/* Set variables for base default (light mode) colors */
html {
  --foreground: 40, 30, 220; /* dark blue*/
  --background: 245, 245, 245; /* light  */
}

/* Set variables for base dark mode colors  */
@media (prefers-color-scheme: dark) {
  html[data-theme="dark"] {
    --foreground: 205, 205, 255;
    --background: 40, 30, 220;
  }
}

Using this styling, my font color will be the foreground, and of course the background will be the background color. For an intermediate background color for the section, the foreground color is used with an alpha shift applied.

html {
  color: rgb(var(--foreground));
  background: rgb(var(--background));
}
.panel {
  background: rgba(var(--foreground), 0.25);
}

This works just fine - by default, dark text is on a light background, and vice-versa for dark mode. If your device is broadcasting a preference for dark mode, you'll get just that.

Light mode

Dark mode

But even though your device preference might be dark mode, what if you want to view this particular page in its default styling? We need some user interaction - enter, Javascript.

Preference selection using Javascript

So, what we need is a method of identifying a preference selection of light or dark, plus a method of changing the page styles. Since the previously used media query is simply a one-time check for the page - if the device requests dark mode, it's applied and that's all there is to it - we need to abandon that.

In place of the media query, I am taking advantage of the cascading aspect of CSS. For the updated CSS structure, I will set the default CSS color variables in the HTML element, and then set the dark mode variables in that same element with an attribute selector.

html {
  --foreground: 40, 30, 220; /* dark blue*/
  --background: 245, 245, 245; /* light  */
}

html[data-theme="dark"] {
  --foreground: 205, 205, 255;
  --background: 40, 30, 220;
}

Now, our page colors will change when the HTML element has the attribute of data-theme="dark" applied to it. This means that all we need to do now is make the Javascript that will apply that attribute change.

Upon page load, we can use Javascript to check if this device prefers a dark mode (same as the CSS media query) and apply that choice using a local storage variable.

//pre-check the dark-theme checkbox if dark-theme is set
      if (document.documentElement.getAttribute("data-theme") == "dark") {
toggleSwitch.checked = true;
document.documentElement.setAttribute("data-theme", "dark");
localStorage.setItem("theme", "dark");

      }

And we create a toggle that controls the action to switch back and forth. As the toggle changes selection, the data-theme attribute is adjusted, and the local storage variable is changed.

Review the Code Pen for all the specifics around this activity

Navigating the Coding Challenge Jungle: Where to Begin Amidst Countless Options

Matthew Mammola — Mon, 04 Sep 2023 20:32:37 +0000

So you're out at a networking event and talking with a fellow software engineer - did you the try the latest trending challenge in CodeMazePro? You're talking with a colleague - did you set up your profile on AlgoCrafters? You have a discussion with your mentor - they strongly recommend completing the FizzBuzz course on DevGymChallenge. Do you see where I'm going here? There's just too many resources out there for honing your coding skills through challenge-based exercises.

Sure, I guess it's a good thing. Whether you're a seasoned developer looking to enhance your problem-solving abilities or a job seeker preparing for technical interviews, coding challenge websites can be your best ally. These platforms offer a diverse range of coding problems, allowing you to practice, learn, and hone your coding skills. But I'm not gonna lie - I can find myself overwhelmed when trying think about the best way to devote my time to these ongoing training outlets. I don't have time to deeply explore all of them!

So, in an effort to narrow down the field, here's a quick description of five of the most popular coding challenge websites. Also, in the spirit of paring things down to go simple, I'll choose one of them as a recommendation - CodeWars.

Codewars
Codewars takes a unique approach to coding challenges by framing them as "kata." Each kata is a small coding exercise that encourages you to write clean and efficient code. What sets Codewars apart is its community-driven approach, where users can create and publish their own katas for others to solve.
LeetCode
LeetCode is a renowned platform that offers a vast collection of coding challenges. Problems are categorized by difficulty, including easy, medium, and hard, making it suitable for beginners and experts alike. LeetCode also provides mock interviews and contests, helping you prepare for technical interviews at top tech companies.
HackerRank
HackerRank is known for its extensive library of coding challenges and competitions. It covers a wide spectrum of domains, including algorithms, data structures, artificial intelligence, and more. HackerRank also collaborates with companies to host coding challenges that can directly lead to job opportunities.
Codeforces
Codeforces is a competitive programming platform that hosts regular coding contests. While it may be more geared towards competitive programmers, it's an excellent place to improve your algorithmic and problem-solving skills. The problems on Codeforces are known for their complexity, making it a challenging but rewarding platform.
TopCoder
TopCoder is one of the oldest competitive programming platforms and hosts regular coding competitions. It offers a variety of challenges in algorithmic coding, data science, and more. TopCoder also provides a unique opportunity to compete for cash prizes and even work on real-world projects through their crowdsourcing platform.

So, my cynical perspective aside, no matter your skill level or coding goals, these coding challenge websites offer valuable resources to help you grow as a programmer. Whether you're aiming to land your dream job at a tech giant or simply want to enhance your coding prowess, these platforms can be your ticket to success. So, dive in, start solving problems, and enjoy the journey of becoming a better coder - just make sure not to get overwhelmed.

Scroll-tastic Symphony: Elevating Web Experience with Animate on Scroll Magic

Matthew Mammola — Fri, 25 Aug 2023 01:20:35 +0000

In the dynamic world of web development, user engagement and interaction are paramount. As websites continue to evolve, developers are exploring innovative ways to captivate users and make their online experiences more delightful. One such approach gaining popularity is the use of "Animate on Scroll" (AOS) effects, which infuse life into static web pages by triggering animations as users scroll down.

Understanding Animate on Scroll Effects

The essence of Animate on Scroll effects lies in the seamless integration of animations with the user's scrolling behavior. As users navigate through a webpage, AOS effects dynamically animate elements to capture attention, convey information, and enhance the overall aesthetic appeal. These effects lend a sense of interactivity and engagement that transforms a passive browsing experience into an interactive journey.

The Power of AOS Libraries

While the concept of Animate on Scroll effects can be implemented from scratch using JavaScript and CSS, the development community has produced a range of libraries that simplify the process. One notable player in this field is the Animate on Scroll library developed by Michal Szymanski. You can explore its features and documentation at https://michalsnik.github.io/aos/. This library offers a comprehensive toolkit to effortlessly implement AOS effects, catering to both novice and experienced developers.

Getting Started with AOS Library

Implementing Animate on Scroll effects using the AOS library is a breeze. To begin, you can include the AOS CSS and JavaScript files in your project. Once integrated, you can add the data-aos attribute to HTML elements you want to animate. This attribute specifies the type of animation, like fade, slide, or zoom, among others. Additionally, you can use attributes like data-aos-duration and data-aos-delay to fine-tune the animation timing.

<div data-aos="fade-up" data-aos-duration="800" data-aos-delay="200">
  <!-- Your content here -->
</div>

Customization and Creativity

The AOS library doesn't just stop at standard animations. It empowers developers to customize animations further by providing options like offset, easing, and anchor placement. This level of flexibility ensures that your animations align seamlessly with your website's design and purpose. Whether you're building a sleek portfolio or an engaging e-commerce platform, AOS effects can adapt to your creative vision.

Benefits for User Experience

Implementing Animate on Scroll effects offers a multitude of benefits for user experience. By revealing content gradually, AOS effects maintain a sense of intrigue and prevent information overload. Moreover, these effects can guide users' attention, emphasizing key messages and calls to action. The visual appeal of animations also contributes to longer user engagement and increased time spent on the site.

Conclusion

In the ever-evolving landscape of web development, finding ways to stand out and create memorable user experiences is crucial. Animate on Scroll effects, exemplified by libraries like https://michalsnik.github.io/aos/, present a powerful toolset to achieve this goal. By seamlessly integrating animations with user scrolling behavior, these effects breathe life into web pages and create a captivating journey for users. As you embark on your next web development project, consider the magic of Animate on Scroll effects to elevate your design and engage your audience in new and exciting ways.