DeveloperBreeze

Detect Dark Mode Preference

January 26, 2024

javascript

#Console.log #Dark Mode #Media Queries #Window.matchMedia

// Check if the user prefers dark mode using window.matchMedia
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

// Log whether dark mode is preferred by the user
console.log('Dark Mode:', isDarkMode);

Continue Reading

Discover more amazing content handpicked just for you

Tutorial

javascript

Running JavaScript in the Browser Console

Open the browser.
Right-click on the webpage and select Inspect or press Ctrl+Shift+K (Cmd+Option+K on macOS).
Navigate to the Console tab.

Right-click on the webpage and select Inspect or press Ctrl+Shift+I.
Open the Console tab.

Dec 10, 2024

Tutorial

css

CSS Variables and Custom Properties: Dynamic Theming and Beyond

Defining and Using CSS Variables
The Cascade and Inheritance of CSS Variables

Reusable Color Schemes
Dynamic Spacing and Layout Management
Font and Text Size Adjustments

Sep 05, 2024

Tutorial

javascript

Mastering console.log Advanced Usages and Techniques

function recursiveFunction(num) {
  console.count('Recursive function called');
  if (num > 0) recursiveFunction(num - 1);
}
recursiveFunction(5);
// Output: Recursive function called: 1, 2, 3, 4, 5, 6

If your console gets cluttered with too many logs, you can clear it using console.clear.

Sep 02, 2024

Tutorial

css

Advanced CSS Grid and Flexbox Layout Techniques

Creating complex and responsive web layouts has become easier with the advent of CSS Grid and Flexbox. These two powerful layout models offer flexibility and control over your designs, allowing developers to build intricate layouts with less code. In this tutorial, we will dive into advanced techniques for using CSS Grid and Flexbox to create sophisticated and responsive web designs.

To get the most out of this tutorial, you should have a basic understanding of HTML and CSS. Familiarity with CSS Grid and Flexbox fundamentals is also helpful, as we'll focus on advanced techniques.

Aug 05, 2024

Code

javascript

Parse JSON String to Object

// Example JSON string
const jsonString = '{"name":"John","age":30,"city":"New York"}';

// Parse the JSON string into a JavaScript object
const parsedObject = JSON.parse(jsonString);

// Log the parsed object to the console
console.log('Parsed Object:', parsedObject);

Jan 26, 2024

Code

javascript