DEV Community: Lucia Cenetiempo

GitHub: Boosting Efficiency with Lesser-Known Features

Lucia Cenetiempo — Fri, 30 Jun 2023 10:49:09 +0000

GitHub is a popular web-based platform that helps developers work together and manage their code effectively. It offers various features that enhance collaboration and streamline the development process.

While many developers are familiar with the basics of GitHub, there are some lesser-known features that can greatly improve efficiency.

Overview of Popular GitHub Features 🧐

Before diving into the lesser-known features, let's briefly talk about the well-known features of GitHub.

These include version control, which allows multiple developers to work on a project simultaneously.

Pull requests and code reviews help ensure code quality and encourage collaboration. GitHub also provides issue tracking and project management tools to organize tasks and track progress effectively.

Lesser-Known Features of GitHub 😎

GitHub Actions for Automation

GitHub Actions is a powerful tool that automates various tasks in your repositories. It lets you define custom workflows to build, test, and deploy your applications automatically. This saves time and allows developers to focus on coding rather than repetitive tasks.

GitHub Pages for Hosting Websites

GitHub Pages provides a simple and free way to host websites directly from your GitHub repositories. It's great for showcasing personal projects, creating portfolios, or sharing documentation. You can quickly deploy and share your projects with others.

GitHub Gists for Sharing Code Snippets

GitHub Gists are useful for sharing small pieces of code or scripts. You can create and share code snippets, notes, or entire files easily. Gists can be embedded in blog posts, documentation, or social media, making collaboration and sharing easier.

GitHub Templates for Project Consistency

GitHub Templates help maintain consistency across projects. You can create custom repository templates that define the structure, files, and settings for new projects. This ensures that every new project starts with a consistent foundation.

GitHub Security for Code Vulnerability Scanning

GitHub Security features help identify common security vulnerabilities in your code. It scans for potential issues and provides recommendations to improve code security. While it's helpful, it's important to use specialized security tools for comprehensive code security.

Benefits of Using Lesser-Known GitHub Features 😏

By using these lesser-known features, developers can enjoy several benefits:

Increased Efficiency and Productivity

GitHub Actions automates tasks, saving time and allowing developers to focus on coding. This leads to increased productivity and faster software delivery.

Simplified Development Processes

GitHub Pages simplifies website deployment, making it easy to share projects with others. It reduces the complexity of setting up infrastructure and streamlines the development workflow.

Improved Code Quality and Security

GitHub Gists promote code collaboration and knowledge sharing. Developers can share snippets and receive feedback, improving code quality. GitHub Security helps identify and address vulnerabilities, enhancing code security.

How to Use Lesser-Known GitHub Features Effectively 🤯

To make the most of these features, consider the following tips:

Explore the Official Documentation and Learning Resources

GitHub provides detailed documentation and learning resources for each feature. Take the time to explore them and learn best practices for effective usage.

Start with Small Steps

Introduce these features gradually into your workflow. Start with one or two features that align with your needs and evaluate their impact. This helps with easier adoption and minimizes disruption.

Encourage Collaboration and Sharing

Promote the use of GitHub Gists and other collaboration features. Encourage developers to share code snippets, best practices, and lessons learned. This fosters collaboration, improves code quality, and boosts productivity.

Real-World Examples of Using Lesser-Known GitHub Features 😉

Let's see how developers have used these features in real-world scenarios:

Automating Continuous Integration and Deployment: Using GitHub Actions to automate building, testing, and deploying applications, resulting in faster and more reliable releases.
Showcasing Personal Projects: Leveraging GitHub Pages to create portfolios, technical blogs, or documentation sites, providing a platform to showcase their work.
Collaborating on Code Snippets: Using GitHub Gists to share code snippets, collaborate on small tasks, and receive feedback or suggestions.
Standardizing Project Structures: Utilizing GitHub Templates to define project structures, files, and guidelines, ensuring consistency across multiple projects.
Enhancing Code Security: Leveraging GitHub Security features to scan code for vulnerabilities and receive recommendations for improvement.

Soooo 🤩

GitHub offers a range of lesser-known features that can significantly enhance development efficiency.

By leveraging GitHub Actions, GitHub Pages, GitHub Gists, GitHub Templates, and GitHub Security, developers can automate tasks, showcase projects, collaborate on code snippets, ensure project consistency, and improve code security.

Beginners and experienced developers alike can benefit from exploring and utilizing these features. So go ahead, discover these hidden gems, and take your development workflow to the next level!

FAQs 🤓

1. Can GitHub Actions be used for non-code-related tasks?

Yes, GitHub Actions can automate various tasks beyond code-related processes. For example, generating documentation, updating project boards, or sending notifications based on specific events can all be accomplished using Actions.

2. Are GitHub Pages suitable for complex web applications?

GitHub Pages is primarily designed for hosting static websites. While it may not be the best choice for complex web applications with server-side functionality, it serves as an excellent platform for showcasing documentation, personal portfolios, simple web projects, or static landing pages.

3. Can GitHub Gists be made private?

Yes, GitHub Gists can be made private. By default, Gists are public, but you have the option to make them private and visible only to you or specific collaborators. This ensures the confidentiality of sensitive code snippets or personal notes.

4. How can I customize GitHub Templates for my projects?

GitHub Templates provide a starting point for new repositories. You can customize them by creating your own templates tailored to your project's specific needs. Define the desired structure, include necessary files, and enforce consistency effortlessly.

5. Is GitHub Security a complete solution for code security?

While GitHub Security helps identify common vulnerabilities, it should not be considered a replacement for dedicated security tools. It's advisable to use specialized security tools in addition to GitHub Security for comprehensive code security. Follow industry best practices and consider additional security measures as required.

Comment and Share 😍

What are your experiences with the lesser-known features of GitHub?

Have you discovered any hidden gems that have significantly boosted your development efficiency?

Share your thoughts, tips, and experiences in the comments below!

Visual Studio Code: Unlocking Powerful Features for Efficient Development

Lucia Cenetiempo — Thu, 29 Jun 2023 14:09:00 +0000

Are you ready to take your coding experience to the next level? If you're a developer, you've probably heard of Visual Studio Code (VS Code). But did you know that there's a whole world of hidden powers waiting to be unleashed within this popular code editor? In this post, we'll dive deep into the untapped potential of Visual Studio Code, uncovering its secret features and functionalities that will supercharge your development workflow.

Intuitive Interface and Customization Options

Visual Studio Code offers an intuitive and user-friendly interface that makes coding a breeze. From its sleek design to its powerful customization options, this code editor is designed with developers in mind. Customize your layout, color themes, and even keyboard shortcuts to create a coding environment that suits your preferences and boosts your productivity.

Extensions: Expand Your Arsenal

One of the greatest strengths of Visual Studio Code lies in its vast library of extensions. These powerful add-ons extend the functionality of the editor, allowing you to tackle various programming languages, frameworks, and tools. Whether you're working with JavaScript, Python, or even Docker, there's an extension to enhance your coding experience and make you more efficient. Explore the marketplace and discover the extensions that will become your coding allies.

Effortless Debugging and Testing

Say goodbye to time-consuming debugging sessions. Visual Studio Code offers a robust set of debugging tools that streamline the process of finding and fixing issues in your code. Set breakpoints, step through your code, inspect variables, and even run unit tests within the editor itself. With these hidden debugging powers, you'll squash bugs and ensure the smooth execution of your applications.

Intelligent Code Editing and Productivity Boosters

Visual Studio Code goes beyond basic text editing. Its intelligent code editing features, powered by AI and machine learning, make writing code a breeze. Benefit from auto-completion, code snippets, and intelligent suggestions that save you time and reduce errors. Discover productivity boosters like Git integration, built-in terminal, and powerful search and replace functionalities. With these hidden powers, you'll code faster and more efficiently.

Collaboration Made Easy

Collaborating with other developers has never been easier. Visual Studio Code offers seamless integration with version control systems like Git, allowing you to work on projects with teammates effortlessly. Share your code, track changes, and resolve conflicts directly within the editor. With real-time collaboration and communication extensions, you can work together remotely, making teamwork a breeze.

Remember, the true potential of Visual Studio Code lies in exploring its hidden powers. With an intuitive interface, a plethora of extensions, powerful debugging capabilities, intelligent code editing, and seamless collaboration tools, Visual Studio Code will become your trusted companion in the world of coding. Embrace these hidden powers, and let your coding journey soar to new heights. Happy coding!

BONUS TRACK

Top 10 Extensions for Visual Studio Code

ESLint: A popular linter for JavaScript that helps you identify and fix code errors, enforce coding styles, and improve code quality.
Prettier: This extension ensures consistent code formatting across your project by automatically formatting code as you type.
GitLens: Enhance your Git workflow with GitLens. It provides valuable insights into your codebase, showing line-by-line Git blame annotations, commit details, and more.
Live Server: Launch a live development server with a single click. This extension reloads your web application automatically as you make changes, allowing you to see the updates in real-time.
Code Runner: Execute code snippets or entire files in various programming languages without leaving the editor. It supports a wide range of languages and provides a convenient way to quickly test code.
IntelliSense for CSS class names: Get intelligent suggestions for CSS class names based on your project's stylesheets. This extension saves time and reduces errors when writing CSS code.
Path Intellisense: Simplify file path input by providing intelligent suggestions as you type. It helps you navigate through your project's files and directories with ease.
REST Client: Test and interact with RESTful APIs without leaving your editor. This extension supports sending HTTP requests, viewing responses, and saving request snippets for future use.
Project Manager: Easily switch between projects and manage project-specific settings with Project Manager. This extension saves you time by organizing your projects and providing quick access to them.
Better Comments: Make your code comments more informative and visually appealing with Better Comments. This extension allows you to categorize and highlight comments based on their significance, making code documentation clearer.

These are just a few of the many fantastic extensions available for Visual Studio Code. Explore the marketplace to find more extensions that cater to your specific needs and enhance your coding experience.

Remember, extensions can unlock hidden powers and boost your productivity, so don't hesitate to try them out and customize your development environment to suit your preferences.

Have you tried any of these extensions? Which ones are your favorites? Are there any other extensions you would recommend?

Share your experiences with VSCODE, insights, and favorite features in the comments below.

Let's unleash the full potential of this incredible code editor together!

Chrome DevTools: Beyond the Basics

Lucia Cenetiempo — Wed, 28 Jun 2023 08:08:40 +0000

Chrome DevTools: Supercharge Your Web Development Skills

Hey there, ready for the next topic?! If you've been using Chrome DevTools, you know it's a lifesaver for web development. But did you know that there's a whole world of beyond-basic features waiting to be discovered? In this exciting post, we'll take a deep dive into the hidden treasures of Chrome DevTools. Get ready to level up your debugging and optimization game like a pro!

Supercharged Inspections

When it comes to inspecting elements, Chrome DevTools is more than meets the eye. We'll explore the lightning-fast shortcuts like Ctrl+Shift+C that let you dive into element inspection in a snap. But that's just the beginning! Discover the powerful Ctrl+Shift+P command that unlocks a whole new dimension of hidden commands, making you a true coding ninja. Say goodbye to spending precious time hunting for the right feature. With DevTools, you're in control!

Unleashing Performance Boosters

Chrome DevTools isn't just about inspecting elements; it's a powerhouse for optimizing your website's performance. We'll show you how to harness the magic of in-place editing to fine-tune your code and eliminate bottlenecks. Dive into the world of cache management and learn how to make your website fly like a gazelle on roller skates. With DevTools, slow-loading pages will become a thing of the past, and your users will thank you for the lightning-fast experience.

Debugging Like a Pro

Debugging is an essential part of web development, and Chrome DevTools takes it to a whole new level. We'll explore advanced debugging techniques like setting breakpoints, stepping through code, and leveraging the powerful JavaScript console. Discover how to monitor network activity, analyze performance, and identify issues with ease. With DevTools by your side, bugs don't stand a chance!

Mastering Device Emulation

Want to test your website's responsiveness on different devices? Chrome DevTools has got your back. We'll guide you through the process of device emulation, allowing you to preview your site on various screen sizes and resolutions. You'll learn how to simulate touch events and even throttle network connections to see how your site performs under different conditions. With DevTools, you can ensure your site looks great and functions flawlessly on any device.

Going Beyond the Basics

Chrome DevTools is a treasure trove of features, and we've only scratched the surface. In this final section, we'll give you a taste of even more advanced capabilities. From source mapping for efficient debugging to auditing and optimizing your site for accessibility and SEO, we'll empower you to take your skills to the next level. There's always something new to discover and master with Chrome DevTools.

Console Magic: Unleashing Hidden Commands

The console in Chrome DevTools is not just for logging messages; it's a powerful command center waiting to be explored. Let's uncover some lesser-known commands that will make your development workflow smoother and more efficient.

$() and $$(): These handy shortcuts allow you to select elements on the page using CSS selectors. No more cumbersome document.querySelector() or document.querySelectorAll(). With $() and $$(), you can quickly grab elements and manipulate them with ease.
$_: Ever needed to reference the result of the last command? Meet $_, your new best friend. It holds the value of the last evaluated expression, saving you from repeating yourself.
monitor(): This nifty command enables you to monitor function calls, helping you understand when and how a particular function is invoked. It's like having a detective that reveals the secrets of function execution.
table(): Tired of logging arrays and objects as plain text? The table() command comes to the rescue! It displays your data in a neat, interactive table format, making it easier to navigate and analyze complex structures.
clear(): When the console gets cluttered with logs and errors, use clear() to give it a fresh start. It's like hitting the reset button, allowing you to focus on what matters without distractions.
$_: Wait, didn't we mention this one already? Yes, but it's worth mentioning again. The $_ command retrieves the value of the last evaluated expression, making it perfect for quick calculations or reusing a result in subsequent commands.
dir(): Want to explore an object's properties and methods? Use dir() to get a handy interactive list of all the available members. It's like peeking into the object's secrets.
copy(): Need to copy text from the console? The copy() command is here to save the day. Simply pass the text you want to copy as an argument, and it will be ready to paste elsewhere.

With these powerful but often overlooked commands, you'll become the master of the console. Whether it's selecting elements, monitoring function calls, or exploring objects, these tools will boost your productivity and take your debugging skills to new heights.

Congratulations! You've just unlocked a treasure trove of hidden console commands in Chrome DevTools. From element selection to function monitoring and data visualization, these lesser-known features will supercharge your development workflow. So dive into the console, experiment with these commands, and let them be your trusty companions on your coding adventures. Happy console hacking!

Leave a Comment and Share Your Thoughts!

I hope you found this post on Chrome DevTools and its powerful features helpful! Now it's your turn to join the conversation. I would love to hear your thoughts, experiences, and any tips you have regarding Chrome DevTools or web development in general. Don't hesitate to leave a comment below and share your insights. Let's learn and grow together!

Looking forward to reading your comments!

Unleash the Developer Tools Magic: Unlocking Top-Secret Hacks!

Lucia Cenetiempo — Tue, 27 Jun 2023 09:17:41 +0000

🤯 SERIES ALERT!

Hey there, fellow devs! So, we all know that developer tools are our trusty sidekicks, but did you know they have some mind-blowing secret features that can take your coding game to the next level? Buckle up and get ready to uncover the hidden treasures of the most popular developer tools in this wild ride of an article!

Chrome DevTools: Beyond the Basics

Alright, let's talk Chrome DevTools, the superhero of web developers. But hold on tight, because we're about to go beyond the usual stuff. You know those moments when you need to inspect an element real quick? Well, get ready to do it at the speed of light with the Ctrl+Shift+C shortcut. And that's not all! Want to access hidden commands like a coding ninja? Just hit Ctrl+Shift+P, and the DevTools universe is at your command. Oh, and let's not forget the mind-blowing power of in-place editing and cache management tricks that will make your website perform like a gazelle on roller skates. Say goodbye to sluggishness and hello to lightning-fast speed!

Visual Studio Code: Unleashing its Hidden Powers

Visual Studio Code, our trusty coding buddy, has some seriously cool tricks up its sleeve. Get ready to unlock the true power of this coding wizard. First up, we have essential extensions like Prettier and ESLint. These little beauties will automatically format and lint your code, making it cleaner than a freshly washed car. And who doesn't love customizing things? With Visual Studio Code, you can create your own commands tailored to your coding style and preferences. Need to debug like a pro? No problemo! This powerhouse has advanced debugging and collaboration tools that will make you feel like a coding superhero. Prepare to be amazed!

GitHub: Boosting Efficiency with Lesser-Known Features

Ah, Git, the lifeblood of version control. But did you know there's more to it than meets the eye? Get ready to uncover the secret arsenal of Git. Let's start with the rebasing technique. It's like a magical dance that streamlines your branching game and keeps your commits tidy. And hey, ever wished for a shortcut to your frequently used commands? Say hello to custom aliases! They'll save you time and make you feel like a Git genius. Oh, and stash... it's not just for hiding your snacks. Use it to temporarily save your changes without committing them, like a secret vault for your code. Git, you sneaky genius, you!

Browser Developer Tools: Taking Debugging to the Next Level

We all love browser developer tools, but have you tapped into their full potential? Prepare to have your mind blown. DOM inspection is not just about clicking around anymore. We're talking about becoming a DOM detective, with powers to uncover hidden elements and troubleshoot layout issues like a pro. Performance analysis tools? Oh yeah, they're like your personal CSI team, helping you identify bottlenecks and optimize your code for ultimate speed. And let's not forget about the network panel, where you can intercept requests, analyze responses, and optimize your app's performance. These hidden gems will elevate your code quality and make your users jump with joy. Say goodbye to pesky bugs and hello to smooth sailing!

Package Managers: Hidden Tricks for Effortless Dependency Management

Let's talk package managers like npm or Yarn. They've got secrets that will make dependency management a breeze. Imagine a world where you can lock down specific versions of packages to ensure stability. Well, it's not a dream; it's a secret power of package managers. And compatibility issues? Not on your watch! Dive into advanced options and conquer them like a boss. But that's not all! Want to speed up your package downloads? Create a custom registry and enjoy the blazing-fast delivery of those lovely dependencies. Package management has never been so delightful!

IDEs and Editors: Hidden Shortcuts for Lightning-Fast Coding

Hold on to your coding hats because we're diving into IDEs and editors like VScode, IntelliJ IDEA, Sublime Text, or Emacs. These babies are packed with shortcuts that will make your fingers fly across the keyboard. Need to navigate through code like a pro? These shortcuts will teleport you to the right places, faster than you can say "code ninja." File management? Piece of cake! You'll be creating, moving, and deleting files like a coding wizard. And let's not forget about refactoring. These shortcuts will help you restructure your code with lightning speed. The best part? You can customize these shortcuts to suit your coding style, turning you into a coding superhero.

Command Line Tools: Unveiling Efficiency Boosters

Command line tools like grep, sed, awk, and curl are the secret sauce to conquer common coding tasks like a champ. Need to search for specific text patterns in files? That's where grep comes to the rescue, making you the Sherlock Holmes of code. And hey, ever wanted to perform powerful text transformations? Say hello to sed and awk, the dynamic duo of text manipulation. Need to make HTTP requests and fetch data like a pro? Curl is your go-to tool, making APIs bow to your commands. With these efficiency boosters in your toolkit, you'll automate repetitive tasks and unleash the true power of the command line.

Whoa, we've just scratched the surface of the mind-blowing secrets hidden in developer tools. I hope this wild and fun-filled article has ignited your curiosity to explore and unleash the full potential of these amazing resources. Remember, these secret features will make you a coding rockstar, delivering better code in less time. So keep exploring, keep hacking, and let the developer tools magic guide you on your coding adventures... but above all, what are your hacking tools?? Tell me about it. I'm ready to expand mine 😁😁

⚡️ Hidden treasures of developer tools ⚡️ Secret features of popular tools ⚡️ Unleashing the power of developer tools ⚡️ Mastering the secrets of coding tools ⚡️ Unveiling hidden tricks of developer tools

Make your life as frontend developer easier

Lucia Cenetiempo — Mon, 20 Jun 2022 12:45:47 +0000

List of JS snippets useful on a daily basis

One liner snippets:

here is a list of my favorite javascript snippet, most of them are one-line code but solve a lot of tasks!

Javascript: Copy text to clipboard

If you work on an e-commerce website sooner or later you need to create a "copy promo code" component. It could be a popup, a push notification, or a simple text on your website. With this one line of code, you rocket it!

const copyToClipboard =  (text) => navigator.clipboard.writeText(text);

// usage example
document.addEventListener('selectionchange', () => {
  copyToClipboard(window.getSelection().toString())
});

Pay attention:
my usage example could be dangerous for performance. Use the function with a specific event and not for a recursive one.

Javascript: Is focused

In a complex application or website it can be helpful to know if an element is in focus.
For example, you may want to know if your login popup is active and in focus to perform some actions on it.

Here's an easy way to do it!

const isOnFocus =  (el) => (el === document.activeElement);

// usage example
isOnFocus(document.querySelector('#popup'))

Javascript: Scroll an element into view

Do you need to create a smooth anchor for your website? You can use this one-line function to put your element smoothly on top.

const scrollToTop =  (el) => el.scrollIntoView( { behavior: 'smooth', block: 'start'});

// usage example
scrollToTop(document.querySelector('#mySection'))

In the same way but changing only the "block" you can anchor your element to the bottom!

const scrollToBottom =  (el) => el.scrollIntoView( { behavior: 'smooth', block: 'end'});

// usage example
scrollToBottom(document.querySelector('#mySection'))

Javascript: Detect device type

Do you want to know if your user is browsing your website from a mobile or desktop device? Check the navigator agent in this way.

const detectDevice =  () => /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
  navigator.userAgent
)  ? 'Mobile' : 'Desktop'

// usage example
detectDevice()

Javascript: Detect dark mode

Check if the user's preferred color scheme is in dark mode to offer them the perfect version of your website for them with this one line feature.

const isDarkMode =  () => window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

// usage example
isDarkMode()

Do you want to create a dark mode for your site?

look at this repository where I create a dark mode toggle with very few lines of code: link), but first you might need to know if the user

Star these snippets on github to keep them handy

What are the snippets you use every day in your work?

Share them with me below!

REMEMBER: Sharing is caring 😁

Why are CSS frameworks so used?

Lucia Cenetiempo — Wed, 08 Jun 2022 15:29:17 +0000

Why are CSS frameworks so used?

I mean, why*??? 🤣

I don't particularly love them, they give me the idea of forcing myself into useless schemes but I am open-minded 😬 and therefore I would like to know which of you uses one of it and what are the actual benefits, obviously in addition to those we all know.

Here are some statistics on the use of CSS frameworks:

As many as 20% of all websites (ALL) use a framework. 😮 80% of these use bootstap.

Source: https://w3techs.com/technologies/overview/css_framework

Okay, come on, it's your turn now.

let me change my mind. 😎

Why you usually use a CSS framework?
What advantage do you find in using a CSS framework?
And which one you prefer?

5 websites to start growing your Frontend Developer skills!

Lucia Cenetiempo — Tue, 31 May 2022 14:10:20 +0000

One of the most often asked questions a novice developer is definitely "where do I start?" 😦

I have also asked myself this question a lot of times.

The best way I could learn was to get my hands on it. Practice, practice and more practice.

So here's a short list of websites I've used in the past (and still use) to practice and improve my s*kills as a frontend developer*. 💪💪💪

FreeCodeCamp

url: freecodecamp.org

One of the best websites for beginners.

You can follow the path that is most interesting for you based on what you would like to know.

You will find lots of useful resources, precise and easy to understand explanations for each topic.

You will learn using a "Project Oriented" approach and you can get many free certifications. 🤩

Javascript30

url: javascript30.com

As mentioned, the best way to learn is to create. 💻

On this site you will find 30 projects (one per day) that will help you build your portfolio with Vanilla Javascript.

You will be guided step by step following the videos by a great instructor and you will be able to improve your javascript skills. 😎

CSS Battle

url: cssbattle.dev

Another way to learn that it always works with me is to have fun and on CSSBattle you can really do it 😁

You will have lots of really fun challenges to complete, take you to challenge friends and colleagues and in the meantime learn new css techniques.

Frontend Mentor

url: frontendmentor.io

Frontend Mentor is a website suitable for all skill levels. 🤯

Through the many challenges that the site offers you will learn Javascript, CSS and HTML with a practical approach and creating real projects that will help you build your portfolio with “real-life” cases.

...and last but not least...

The Odin Project

url: theodinproject.com

The Odin Project is the website that will push you to follow a path more relative to FullStack Development.

You will find many "Curriculum" to follow step by step and which cover everything in a realistic way. 🤠

You will also be supported by a large community ready to help you on your journey.

Ready to get back in the game?

What other websites do you use to improve your web developer experience?

It's Monday again

Lucia Cenetiempo — Mon, 30 May 2022 17:48:11 +0000

Dark Theme Toggle - How to create a dark mode switch in a few lines of JS + CSS

Lucia Cenetiempo — Mon, 30 May 2022 17:11:42 +0000

Switch to dark theme in a couple of lines of Javascript + CSS 🤯

The purpose of this project is to create a toggle button to switch the theme of your website in a few lines of css and javascript code.

Basically we have this file structure:

HTML

In the html file we create a button that calls on click a function toggleTheme()

<button onclick="toggleTheme()">CHANGE ME</button>

Javascript

In javascript instead we manage the switch, first of all let's set the body and the default mode:

const body = document.querySelector ('body')
const defaultTheme = 'light'

This will be used to define the mode chosen by us the first time the user arrives on our page.
Moving on, let's create the function toggleTheme()

const toggleTheme = () => {
  let activeTheme = localStorage.getItem('theme')
  activeTheme == 'light' ? setTheme('dark') : setTheme('light')
}

this is the core of our project, as you can see there is an activeTheme control variable that checks if a preference has been saved in the user's localStorage, on the basis of the value that our localStorage will provide us, we set the opposite value.

So if localStorage.getItem('theme') has the value 'light' we will set 'dark' as parameter for setTheme() function to change the mode.

So what does setTheme() do?

const setTheme = (theme) => {
  localStorage.setItem('theme', theme)
  body.setAttribute('data-theme', theme)
}

In this function we do only two things:

save the new selected mode in our user's localStorage.
add to our body tag the data-theme that will manage the correct css

and to complete our plugin we launch the function that takes care of setting the default mode at startup:

const checkDefaultTheme = () => {
  let savedTheme = localStorage.getItem('theme')
  savedTheme ? body.setAttribute('data-theme', savedTheme) : setTheme(defaultTheme)
}

checkDefaultTheme();

this function starts as soon as the user arrives on the page, then we check if he is a returning user and therefore has already chosen his preferred mode, if it is not present in the local storage we proceed with setting the default mode.

CSS

Let's move to the CSS
we need very few lines of css because we will use variables.

:root {
  --main-bg: white;
  --main-txt: black;
  --button-bg: black;
  --button-txt: white;
}
[data-theme="dark"] {
  --main-bg: black;
  --main-txt: white;
  --button-bg: white;
  --button-txt: black;
}
body {
  background-color: var(--main-bg);
  color: var(--main-txt);
}

in the root we define the colors that we will use for the default mode (in our case the light) then we define the dark mode with [data-theme = "dark"] in which we will change the colors to the same root variables.

And so the magic begins... our body will work on the colors set in the variables and depending on the [data-theme] it will invert them

❤️❤️❤️ feel free to use this snippet, you can find the entire project here on github aaaand, if you liked it, star it on github