Building dashboards in PowerBI quickly is important because decision makers are eager to start using these rocket ships we are creating. However, if you’re new to PowerBI that may be asking a lot! Tracing is helpful because it empowers us to quickly create a solution and design from scratch.
What is tracing? Drawing over lines on a superimposed piece of transparent paper, and with figma, you will be able to do this digitally speaking. Allowing you to trace over any designs to abstract your own.
Tracing dashboards is a good way to recreate something net new and offers a fast path for getting people talking about your dashboard designs.
In this article, you will learn to become a master of making powerful designs from scratch, and this will empower you to Create dashboards in PowerBI quickly. Here’s a lot of screenshots to show you what you’re going to be building and potentially a template you can copy and paste into your next PowerBI Design.
Create visual documentation for PowerBI Design
Here at DEV3LOPCOM, LLC, we passionately believe visual documentation improves project deadlines. Plus, allows for fast data product creation and we want to show you how we would create a dashboard from scratch without any direction on the style or design.
Figma works, but any app that allows tracing over an image will work, and in this blog we will show you how to create this template.
We show the steps to tracing the design, and adding it to PowerBI. This can help you operationalize your templates and improve your dashboarding speed across any dashboarding product.
About this PowerBI dashboard Data and our Goals
First, lets learn about the data and establish goals about our workload to keep us focused on an objective.
All data should have a brief description, otherwise it’s hard for others to collaborate with your data sources.
Using the following data about Social Media and Mental Health, was recently released by University of Maryland in July 2024.
Our goal is to quickly generate a dashboard to help others learn PowerBI. However we have thin requirements, it’s fun to pretend this is a real world software consulting engagement, and similar to a real world use case in a busy business environment, perhaps people are too busy to give us insights.We must research and learn on our own.
About data: The dataset encompasses demographic, health, and mental health information of students from 48 different states in the USA, born between 1971 and 2003.
How do I get my CSV Data into PowerBI?
Open your PowerBI software. You don’t need to buy anything, just go grab the software and get started with me.
In the Home tab, click Get Data. Then select Text/CSV.
Once we have our CSV data open, you may notice we have weird Column headers that aren’t sensible to anyone on the dashboarding end.
This is typical in a lot of APIs, Data Warehouses, and Data Engineering in general is ripe of columns not being named correctly for each team. Luckily for us, PowerBI can change column names with great ease.
Finding Artwork to Trace Your Dashboard
First, we need to start with learning about “artwork.” When learning to draw, an art teach will ask you to trace something 100 times, and then by the 100th time you’ll be drawing it better.
Same with the internet, we often are reverse engineering each others design to improve our design. In this process we will find some artists we enjoy, choose one, and trace our dashboard on this design.
I like using Dribbble to find ideas and learn about modern approaches. It has a lot of really stylish content, and it’s easy to start here as a dashboarding guru.
I search for ‘modern dashboard style…
If working with a client, I will find 3 designs and then ask them to choose one. Then I’ll build everything around this template. I like using figma because it’s easy enough for people to dig into the weeds, and see they can access the design elements.
Pretend our client suggest the following design.
Okay, paste the dashboard we are asked to mimic into figma and lets start tracing.
You’ll notice as you do this you’ll start to create your own unique design to your dashboarding solution.
Start tracing design for PowerBI Dashboard
Cover the surface with a square.
Once hidden completely, lets edit transparency hitting 5 on keyboard. This should adjust the transparency.
Okay, keep flowing. Next same thing for side menu. Trace it. But before we go, adjust the edges to be rounded.
Easy enough in figma, grab little white ball and pull it down until it hits the line we are tracing. adjusting one side adjust all 4 sides.
Okay, hit the side menu.
Next, TEXT overlays. And button overlay with squares.
I prefer starting with a highlighted button so i know the sizing, then replicate that size across. Alt drag and drop for similar copy paste of previous object.
Working through buttons should be easy, let the software guide you to make it perfect too. Notice this has a 7 pixel gap.
Skipping ahead…
Now that we have this style, lets see what it looks like in PowerBI.
Adding your Figma design to PowerBI is simple. It’s a file.
Export the file to your computer.
Add image to PowerBI.
Resize dashboard so it fits cleanly.
Remove padding, this is my least favorite thing to have to do in Tableau and PowerBI. These apps automatically pad everything for some reason, haha.
Making decisions about our new Figma Style for PowerBI
In the beginning stages it’s about speed and repeatability. In more advanced dashboard development Figma saves a lot of time.
Next, lets duplicate our work area, and move the sub button navigation for today to the right side.
This is good enough for PowerBI. But before we leave just yet, lets dive into how we can improve the color pallet. I’m using coolors for an easy one.
Now, start to style your dashboard so that it’s appealing. Don’t spend too much time here because chances are the design will change, and you’re just trying to make it look decent. Use corporate colors so you’re following the “designers” pattern. They can send your a pdf file with the correct style guide, which improves this process, but today we are tracing and coming up with our own style guide.
As you’re applying color, start to focus on subtle details…
Improving PowerBI Dashboard with Logos, Style, and Strategy
Logos make dashboards pop. You know you can easily grab one, so grab the most recent logo. Don’t edit peoples logos, use what they supply online.
I’m choosing the source data logo, to help represent the source information because putting my logo here would not be a factual representation of the effort.
Now, notice what happens when I size it next to the buttons, depending on your screenshot and size of dashboard to be traced, in Figma, it’s subtle… Notice my sizing is subtly off and I can’t seem to make it exact, I generate black guide bars… aim to sync up for “perfect”… people will use your dashboard more often if it’s synced up.
In this example/screenshot I’m demonstrating how lining up this logo is a little more tedious than allowing figma to define things by snapping edges, I created black guide lines to help me follow a consistent flow from top to bottom. This is a kind of “hawk eye” or “pixel perfect” strategy I need you to deploy to create powerful dashboards in any reporting software or designed front-end!
Before we part, a few more subtle wins to consider as you perfect your traced design for PowerBI.
This will give a very nice clean view. In figma, click the red square, paste the image. Very easy process if you created the space for the icon. As you do this selection of icons, realize nothing is perfect, we are prototyping, get something in there because that’s the key, fast/repetitive!
Notice how we made some decisions that moved us away from the original design, this is called “making it your own.”
One more layer of decisions to clean it up.
The strategy here is making things clean and lined up, using LINES to guide ourselves. Delete these guide lines once you’ve mastered this technique and keep duplicating to avoid having to do this process again…
Here’s my work station, notice I’m starting to document what goes inside of buttons, and the documentation is in the same screen. This helps with identifying where our hard work belongs.
The header looks a little close to the first square, however a good starting point, we can optimize that later. The point of using guides/lines is the important part of this training.
Choosing cool icons for PowerBI Navigation
Since we are prototyping and not rushing to production, we need a simply PNG file for icons. Google search will bring up a lot of options you can trace, “black icon mental health heart.”
Simply click a square in figma, and ctrl+v paste.
This is why we created that square in tracing section, it outlines my sizing requirements.
Now, we have two buttons, logo. Things are cooking. Plus, custom icons. Always tell people it’s easy to change icons, this is just a prototype.
Many tracing apps can be found in the figma community. Great for icon tracing. This creates a vector trace of the heart/brain icon.
Once you trace the svg, you can color the file and it’s a vector rendering. I like changing the color to match the pallete.
Now, to finalize the visual. I use more guides but in the shape of a square this time. Find what works best for you.
Insert image into PowerBI
Woot, you’re here! You’re doing you’re own design based on a tracing.
I hope you’re proud of your drawing. If not, simply grab more ideas and trace until you’re satisfied.
Open Insert Tab, then click image. Navigate to the image you created in Figma. Group it and export it.
Start to play with dashboard sizing based on your image size.
Adding your first charts on new style in PowerBI
Okay, so you’re adding your new traced design to PowerBI as an image. You fixed the canvas.
And you’re beginning to add charts.
I’ve started with the easier charts, that feel very global. Like the amounts of states accounted for in the overall survey. The differences between gender, and the general health column popped to mind considering our button says General Health too. Even though it’s a place holder, perhaps we can go into detail about general health as a button too. Also, I like making actionable KPI to flow with buttons, so end users know if they click that bar chart, perhaps they will learn more about General health, and also the button General health will take them there too.
Scaling up on your new Traced PowerBI Design Template
Okay, people are going to ask you to change your PowerBI Design, for example pixels aren’t perfect, maybe 2 pixel boarder around charts isn’t great.
This is why I love having my dashboard design in Figma. Easy to edit. Copy and paste and start new styles.
In powerbi, similar process, right click dashboard tab, and click duplicate to duplicate your dashboard.
Now, delete the background image, and add a new image. Should look like this if you’re still adding charts. As long as you don’t move boxes, you’re safe to simply add back the new image and it will fit perfectly.
This is a good sign, you’re not depending on a reporting platform to manage your design elements. You can slap this background into any reporting software.
Now, you have a duplicate tab in PowerBI, I went with nuerophism, a cool design technique that makes it feel like it’s popping off the screen because of the light and dark shadows. Do you notice the differences in the shadows?
Conclusion to Tracing designs with with Figma for PowerBI Desktop
While working with designers, often we are given screenshots of artwork, and tracing allows us to gain what we need to be successful.
I hope you enjoyed this tutorial on creating quick PowerBI products using Figma to trace.
Keep perfecting your craft and let us know if you need help with any dashboard designing services!
We will add more training like this in our articles here on dev3lop, stay tuned.
Although, we started as a Tableau Consulting Company, we have been navigating into more and more PowerBI the past few years.
Ensuring that even the next data expert won’t find it too daunting.
To excel in quick calculations, it’s essential to identify and address slower ones.
#1 Problem with Slow Tableau Workbooks
Solving slow Tableau workbooks is often a calculation optimization game.
Then the migration of transformations, Boolean style calculations for example are easily pushed to SQL because SQL does Boolean logic with ease, so why make Tableau do this for you? This is a subtle win and as you continue you’ll find bigger wins in our blog below.
Think of Tableau as a tool you don’t need to over complicate. You can protype, transform, build a data product, and then stress about the “improvements” we discuss below in the near future.
Stressing these tiny details now will slow down your project, and stress out business users. Do it when no one is looking or when someone asks “why is this slow?”
During Tableau Consulting engagements, we see it’s easy to move your slow moving calculations into your database after the prototyping phase, and consider pushing heavily updated calculations to your SQL end the hardening phase that you do at the end. Anything being changed often is best to keep in your Tableau Workbook until everyone has completed their apples to apples.
Optimizing Calculations in Tableau Desktop for Better Performance
When it comes to Tableau Desktop, writing fast and efficient calculations isn’t just a nice-to-have—it’s a must for performance and scalability. A calculation that works is great, but one that works fast is better, especially as data grows. Let’s break down why certain choices in your calculations can have a massive impact on performance, focusing on the example provided.
The Problem: Slow String-Based Calculations
Here’s the first example:
if month(date) >= 5 then "blue"
else "orange"
end
Why is this slow? Strings.
Strings Are Heavy: Every time Tableau processes this, it’s comparing strings instead of lighter, numeric values. Strings take up more space and are slower to process than integers.
The else Isn’t Necessary: If your logic doesn’t need an else, don’t add one just to fill in. else assigns a default value—if that value isn’t relevant, you’re doing extra work.
The Improvement: Simplifying the Logic
Here’s a slightly improved version:
if month(date) >= 5 then "blue"
end
This avoids unnecessary processing by dropping the else. If the condition isn’t met, Tableau will simply return NULL. However, this still relies on strings, which slows things down.
The Better Option: Switch to Numbers
if month(date) >= 5 then 1 // blue
elseif month(date) <= 4 then 2 // orange
else 0 // filter out
end
This is a solid step forward. Why?
Databases Love Numbers: Integer-based logic is much faster because databases and Tableau’s data engine process integers far more efficiently than strings.
Strings have thousands of possible values.
Integers have only 10 basic values (0-9) in a single digit, making calculations simpler and faster.
Future-Proof Logic: By using integers, you’re not just optimizing today; you’re setting yourself (and your team) up for easier scaling and maintenance tomorrow. Want to add another category? It’s just another number.
Ease of Filtering: Returning 0 for filtering out irrelevant data reduces additional logic elsewhere, streamlining workflows.
Why Does This Matter?
When you write calculations that rely on strings, Tableau (and the underlying database) has to:
Compare values character by character.
Manage much larger datasets because strings require more storage.
Perform extra lookups if you’re working with case-sensitive text.
Switching to numeric logic tells Tableau to focus on lightweight, easy-to-process values. Over time, this can lead to noticeable performance improvements, especially with large datasets or frequent dashboard updates.
Pro Tip: Comment for Clarity
This isn’t just about optimizing calculations; it’s about teaching better practices. Add comments like this:
if month(date) >= 5 then 1 // blue
elseif month(date) <= 4 then 2 // orange
else 0 // filter out irrelevant months
end
By documenting your choices:
You make your logic easier for others to understand.
You reduce the need for future troubleshooting.
You create a shared knowledge base, improving team productivity.
The Bottom Line: Calcs need to be faster!
When building calculations in Tableau, think beyond “does this work?” to “how efficiently does this work?” Opt for integer-based logic over strings whenever possible. It’s a small change with a big payoff, especially as your dashboards grow more complex. Less work for Tableau = faster insights for you.
Got other optimization tips? Let me know in the comments!
A Faster Tableau Calculation
The simplest and fastest approach? Stick with numbers and Booleans:
if month(date) >= 5 then 1 // blue
else 0 // orange
end
Why It Works: You’re just typing numbers. The comments explain the logic for human readers without bogging down Tableau with unnecessary strings.
Scalable: This approach is ideal for larger datasets and complex workbooks. As your project grows, you’ll appreciate the simplicity and speed of integer-based logic.
For an even lighter touch:
month(date) >= 5
Boolean Flag: This returns TRUE or FALSE directly, which is incredibly efficient. Boolean logic is the leanest and fastest calculation type Tableau can process.
Why Writing Fast Tableau Calculations Matters
Writing fast calculations isn’t just a power move for your own dashboards—it’s a cornerstone for building a thriving Tableau community. Here’s why it matters:
User Adoption: Fast calculations mean responsive dashboards. That translates to better user experiences and higher adoption rates for your work.
Community Growth: When you optimize your calculations, you share best practices that help others master Tableau’s native features.
Future-Proofing: Hundreds of slow calculations will drag your workbook down over time. Optimized logic ensures your dashboards remain scalable and maintainable.
Let’s keep the momentum going: Write fast Tableau calculations, build amazing dashboards, and grow the community together. Pretty dang fast, right? 🚀
Everyone needs software, and they need it now! If project success defines your situation, I’d like to introduce to you a concept that may change your perspective on solving problems. This is where a tedious project maybe completed in minutes VS months, thanks to artificial intelligence.
Micro opp apps or micro ops apps, in our mind, are similar to micro opportunities and are usually operational in nature. Little wins or low hanging fruit that is accessible to win in a short period of time.
Micro is the size of the code, the length of the engagement, the requirements given are thin, and that’s what you need to complete this micro software.
We specialize in micro and macro application development (we are dev3lop) and have over a decade of implementing these applications into hardened rocket ships at enterprise, government, and commercial companies.
Micro Opp apps
Have you ever wanted to craft software but never had the time to invest into the education or fundamentals? Great! AI is in a place where you can ask it to write an entire prototype and within a few minutes you have proper software that solves a business problem!
The open-source world and closed-source LLM revolution are meeting eye to eye from a code perspective, and it’s a great time to dive into this realm of AI-infused development.
Companies are constantly seeking ways to streamline operations without the burden of overly complex software. Micro Operational Applications are emerging as the perfect solution—tailored tools that address specific business needs without the unnecessary bulk of traditional SaaS products.
Why Traditional SaaS Products Fall Short
While SaaS products offer robust features, they often come with limitations that make them less than ideal for certain business requirements. Their one-size-fits-all approach can lead to tedious workflows and inefficiencies. Customizing these platforms to fit specific needs can be time-consuming and costly, involving multiple software engineers, database administrators, designers, and executive approvals.
The Rise of Micro Operational Applications
Micro Operational Applications are changing the game by providing targeted solutions that can be developed in a single working session. Thanks to advancements in AI and development tools like ChatGPT and Claude, non technically savvy individuals can now transform text prompts into working prototypes swiftly.
Prompt: “Create a single html file using cdn <insert javascript framework>: <type what you want the software to do, how you want it to look, and any features you can think of>”
This prompt is how you can begin creating html files that can be a solution to a problem, it’s easy to share with others via chat software, and may start get peoples wheels turning!
Benefits of Micro Operational Applications:
Speed of Development: Quickly create applications without the lengthy timelines of traditional software projects.
Cost-Effective: Reduce the need for large development teams and extensive resources.
Customization: Tailor applications precisely to meet specific business needs.
Agility: Adapt and iterate applications rapidly in response to changing requirements.
AI Assistance Accelerates Development
AI-infused development tools are democratizing the creation of software. They enable individuals who are “technical enough” to develop functional prototypes without deep expertise in coding. This shift not only speeds up the development process but also reduces the dependency on large teams and extensive planning.
A Glimpse Into the Future
Given the rapid advancements in AI-assisted development, it’s foreseeable that Micro Operational Applications will become mainstream in the next few months or years. They represent a significant shift towards more efficient, agile, and customized business solutions.
Embrace the future of business operations with Micro Operational Applications—where efficiency meets innovation.
Authors perspective on micro apps in production environments.
Some projects are easy to complete but require a lot of social skills to understand full requirements. Micro apps win here because it gets the brain moving without much input. Also, micro apps are great when you have all the requirements, this allows for instant prototyping, and instant value proposition.
Micro Operational Applications are used to solve problems that don’t require a SaaS product because the SaaS product is too robust and has limitations that simply make business requirements tedious.
They are software you can create in a single working session, and they are prototypes for what could become a more hardened software in your wheel house. Think of “excel” today, it’s easy to stand up, get moving, and most people know the software. Micro apps are moving this way quickly. You don’t have to be a hero of tech to move it forward.
Micro Operation Applications are becoming easier to develop due to AI assistance.
Tools like Claude and Chatgpt are opening the door for ‘technical’ enough gurus to move the torch from text prompt to working prototype.
These micro apps are helpful because they offer a door into not needing three software engineers, your DBA, your designer, and executives involved in the creation. They can happen faster than any software project has happened.
To make it truly important there’s more engineering required, however given AI infused development is picking up in speed, I can foresee Micro Operational Software becoming main stream soon enough.
The next phase is going to be AI connecting it to backends. Without a lot of work. Until then you’re going to need data engineering to help you make the leap.
So as far as we know, AI is lacking the ability to thread into your current data systems without more lifting, and that’s where you’ll need focused Data Engineering Consulting Services!
Recently we had a client reach out and was unsure if their software was Java or JavaScript. We have all been here at least once in our career. Unsure about two buzzwords that sound similar. This lead us to thinking there’s likely a lot of lesser-known facts about JavaScript, like Java is not JavaScript!
Focused on some of the technical aspects that may improve a dev3lopers day.
Here’s a list of 15 examples of 15 lesser-known facts about JavaScript
JavaScript Is Not Java: Despite their names, Java and JavaScript are unrelated. JavaScript was initially named Mocha and later renamed to LiveScript before Netscape’s marketing team settled on JavaScript to capitalize on Java’s popularity.
First-Class Functions: Functions in JavaScript are first-class citizens, meaning they can be assigned to variables, passed as arguments, and returned from other functions.
Closures: JavaScript functions form closures, which means they have access to variables from their outer (enclosing) functions even after the outer function has returned.
Dynamic Typing: JavaScript is dynamically typed, meaning the same variable can hold different types of values at different times. This flexibility can lead to unexpected behavior if not carefully managed.
Prototype-Based Inheritance: Unlike many object-oriented languages, JavaScript uses prototype-based inheritance, allowing objects to inherit properties and methods from other objects.
NaN Is a Number: The typeof NaN is number, which can be counterintuitive. NaN stands for “Not-a-Number,” yet it’s considered a number type.
Double Equals (==) vs. Triple Equals (===): The == operator performs type coercion, converting operands to the same type before comparison. The === operator is stricter and checks both type and value.
Falsy and Truthy Values: JavaScript has several falsy values (false, 0, '', null, undefined, NaN) that evaluate to false in a boolean context. Everything else is truthy.
Hoisting: JavaScript’s default behavior is to hoist variable and function declarations to the top of their containing scope. However, only the declarations are hoisted; initializations remain in place.
Single-Threaded but Asynchronous: JavaScript runs on a single thread (the event loop) but can handle asynchronous operations like I/O events, thanks to its non-blocking nature and features like Promises and async/await.
IIFE (Immediately Invoked Function Expressions): JavaScript supports defining and invoking functions immediately, allowing developers to create a private scope. Example: (function() { console.log('This runs immediately!'); })();
Global Object: In a browser environment, the global object is window, while in Node.js, it’s global. Variables declared with var are attached to the global object, unlike those declared with let or const.
this Keyword: The value of this depends on how a function is called. In the global context, this refers to the global object (window), but inside an object method, it refers to that object.
Arrow Functions and this: Arrow functions don’t have their own this context; instead, they lexically inherit this from their parent scope. This makes them handy for use in callbacks to preserve context.
null vs. undefined: null is an intentional absence of any value and can be set by the programmer, while undefined means a variable has been declared but not assigned a value yet.
These insights reveal some of JavaScript’s quirks and unique characteristics that make it both powerful and sometimes puzzling!
Hello there, fellow tech enthusiast or manager of a JavaScript guru. You’re in search for the blog about Why Mac is better than Windows for VS Code! Perhaps you need assistance with gaining approval to purchasing your Macbook Pro at work or in your own personal LLC.
Author note: Before I begin I want to explain this isn’t a choice between good or evil. The artwork used for this blog does feel like a choice between good or bad, but that’s not the case! Rather it’s a choice between “what’s right for me tomorrow?”
Have you ever wondered why so many JavaScript developers prefer Mac?
Verse their more well known alternative Windows PCs? Especially when working with Visual Studio Code and the command line? Let’s dive into the reasons in a fun and easy-to-understand way.
Here at dev3lop.com we know first hand the importance of having similar work environments across multiple machines. Also, we have noticed in our time analytics consulting, Microsoft Windows takes more time! Where macs take less time.
Has anyone asked you why you need a MacBook VS Windows, but not 100% how to respond? I built this blog for you/me, a passionate human who wants to source the right information but not sure how to put the words together.
The Unix-Based Advantage on Mac
You’ve probably heard of UNIX! If not, here’s the scoop: UNIX is an operating system created way back in the ‘70s. It’s actually the grandparent of both macOS and Linux (you know, that other popular system developers love). When people say macOS is “Unix-based,” it means it shares the same DNA as UNIX. Unix is famous for being reliable, powerful, and developer-friendly.
So, Why Does Unix-Based Advantages Matter for Mac Developers?
Web development tools, especially those used for JavaScript, were originally designed to run on UNIX or Unix-based systems.
Fewer Setup Hassles: Since macOS and UNIX are so closely related, most developer tools just work right out of the box on a Mac. Need to run a server, install a package, or test out some code? On macOS, it’s often as easy as a one-liner in the Terminal.
Shell Commands are Standardized: UNIX-based systems use familiar shell commands like ls (to list files), cd (to change directories), and cp (to copy files), which makes moving between Linux servers and your Mac seamless. Windows has equivalents, but they’re different commands, and jumping back and forth can get confusing.
Access to Developer-Friendly Shells: macOS comes with zsh and bash shells, which are super common in the coding world. Why’s that nice? It means when you follow tutorials, guides, or code examples online. You won’t need to adjust anything—it’s as if you’re computer is speaking the same language as the instructors computer.
More Consistent with Online Resources: The development community is huge. Most of its resources (like tutorials, Stack Overflow answers, etc.) assume you’re using a UNIX-based system. On macOS, you get to skip any additional adjustments, so you can follow along with most tutorials without any surprises.
Consistency is king in engineering
More consistent is a big deal. Being consistent means less time pulling your hair out over Windows poor experience. Less downtime is king is the world of being in the zone.
So if you’re working with JavaScript and Visual Studio Code, macOS’s Unix roots mean a smoother, more seamless experience overall!
Technical Tidbit: MacOS is built on Unix, the same foundation as Linux. This means many developer tools run smoothly without extra setup, hair pulling, or extra hours figuring something out.
Simple Explanation: Think of macOS as a native speaker of the “developer language.” It understands commands and tools without needing a translator. You can start working faster. Things are easier for the engineers.
The Seamless Command-Line Experience on Mac
If you’ve heard developers talk about “the command line” or “the terminal,” they’re talking about that black screen from the Matrix. The place to tell your computer exactly what to do. Sounds a bit old-school, right? But it’s super powerful and essential for coding.
On a Mac, this command-line experience is especially smooth and developer-friendly. Here’s why:
Technical Tidbit
The Terminal app on macOS gives you access to popular command-line shells like zsh and bash (both are types of “shells,” or environments where you can run commands). These shells are used by developers all over the world and are packed with features and shortcuts that make coding a breeze.
Breaking It Down
No Extra Setup Needed: With macOS, you get Terminal, zsh, and bash right out of the box. You don’t need to download any extra software or make special configurations; they’re just there and ready to go.
Commands that “Just Work”: The commands you type in Terminal are the same ones that work on Linux and many servers. So if you’re running a web server, installing packages, or creating files, the same commands you’d use on a Mac work practically anywhere else in the coding world. On Windows, you’d have to switch to PowerShell or a separate Linux-style shell, which can add some extra steps.
Auto-Complete and Shortcuts: Shells like zsh on macOS have great auto-complete features. You start typing a command, hit Tab, and boom—the Terminal fills it in for you. This makes navigating around your files, running programs, and finding commands faster and easier.
Feels Familiar to Other Developers: Most developers are used to zsh or bash, so if you ever need help or want to collaborate on a project, everyone’s pretty much on the same page. Plus, tutorials and online resources are usually written with these shells in mind, which makes following along a snap!
Simple Explanation
Using the command line on a Mac is like chatting with an old friend who gets all your jokes (commands) without missing a beat. Everything works smoothly, and you don’t have to “explain” anything to get what you need. So if you’re working with JavaScript and Visual Studio Code, the Mac’s Terminal feels intuitive, reliable, and ready for action!
CHOOSE YOUR COMPUTER
Homebrew: Your Handy Helper
Imagine a magical toolbox where you can pull out any tool you need just by saying its name. That’s basically what Homebrew is for Mac users! Homebrew is a package manager. Homebrew is a huge deal in the developer world because it makes installing software and tools a breeze.
Technical Tidbit
Homebrew is a command-line package manager for macOS that allows you to quickly install, update, and manage software packages and developer tools. With just a single command, you can add programs, libraries, and utilities that you might otherwise have to track down individually. It’s super useful because it simplifies the process of setting up and maintaining all the software you need for development.
Breaking It Down
One-Command Installs: With Homebrew, installing something is as easy as opening Terminal and typing brew install <tool-name>. Want to get Node.js for JavaScript development? Just type brew install node. Done! Homebrew downloads, installs, and sets up everything for you.
Automatic Updates and Maintenance: Homebrew doesn’t just install software; it also helps you keep everything up-to-date. You can update all your tools with a simple command (brew upgrade), so you don’t have to check each tool individually.
Built-in Uninstaller: When you’re done with a tool, Homebrew lets you remove it with brew uninstall <tool-name>, clearing it off your system without leaving behind unnecessary files or settings.
Wide Range of Developer Tools: Homebrew has a huge catalog of software, especially for developers. So whether you need Git, Python, Node.js, or even database systems like MySQL, Homebrew has it all, ready to install in seconds.
Simple Explanation
Homebrew on a Mac is like having a magic wand for software. Need a tool? Just type a command, and it appears. Need an update? Another command, and it’s all fresh. With Homebrew, everything you need to start coding is at your fingertips, making your development life way easier!
Consistent Community and Documentation
One of the best parts of being a developer is the massive amount of help, tutorials, and resources out there—often created by other developers who’ve faced the same challenges. When you’re working on a Mac, you get the full benefit of this developer community support since most documentation, guides, and code snippets are written with UNIX-based systems like macOS in mind.
Technical Tidbit
Most JavaScript and web development tutorials, Stack Overflow answers, and online documentation are geared towards UNIX-based systems (like macOS and Linux). Because macOS is so similar to these systems, the commands, setups, and paths match up perfectly. On Windows, there are often extra steps or alternative commands, which can make following along more complicated.
Breaking It Down
Seamless Compatibility with Guides: Since macOS shares its UNIX roots with Linux, almost any tutorial or setup guide for a JavaScript tool or library will work without adjustments on a Mac. You can follow guides word-for-word, and they’ll work just like they’re supposed to.
Popular Among Developers: A lot of developers use macOS, so it’s common to find specific support for macOS issues online. Whether you’re troubleshooting a JavaScript error or setting up VS Code, there’s a good chance someone else has documented their experience on a Mac.
Direct Command-Line Instructions: Most coding resources include command-line instructions written for zsh, bash, or Terminal, which come with macOS by default. On Windows, you might need PowerShell, Command Prompt, or WSL to follow along, but on a Mac, it’s as easy as copy-pasting the commands.
Less Friction in Collaborating: If you’re working with other developers or following a course, you’ll likely find that everyone’s on the same page if they’re using macOS or Linux. No need to translate commands or explain differences between operating systems.
Simple Explanation
Using macOS feels like walking into a community where everyone speaks the same language. When you follow a tutorial, join a class, or work with a team, you won’t have to adjust anything because macOS is the “default” for so many guides. So, you can learn, troubleshoot, and collaborate without any extra hassle.
Docker and Virtualization Made Easy
Technical Tidbit: Docker runs natively on macOS, allowing for efficient containerization and virtualization.
Simple Explanation: Think of it as having a flexible workspace that adapts to any project you’re working on, without any hassle.
Performance and Stability
With many of the latest MacBook’s carrying awesome upgrades, like m1/m2, it becomes a great choice for developers who are creating solutions. Similar to when we create our data engineering solutions on our Macbook Pros, we want the best possible performance, and that’s what our clients expect too!
Technical Tidbit: MacBooks, especially those with M1/M2 chips, offer powerful performance with efficient resource management.
Simple Explanation: It’s like driving a car that’s both super fast and incredibly fuel-efficient—you get speed without sacrificing endurance.
Less Hassle with Setup and Configuration
Technical Tidbit: MacOS requires fewer tweaks to get development environments up and running compared to Windows.
Simple Explanation: Starting a project on a Mac feels like opening a ready-to-use kit, whereas on Windows, you might have to assemble some parts first.
Wrapping It Up
For apps like Tableau, Windows is a best practice and has more features, something we have learned over a period of time doing Tableau Consulting Services!
While Windows PCs have come a long way and offer great tools for developers, MacBooks provide a streamlined, hassle-free environment that’s hard to beat for JavaScript development with Visual Studio Code. The Unix-based system, combined with a supportive community and robust performance, makes it a top choice for many.
Ready to Boost Your Coding Experience?
If you’re looking to make your JavaScript development journey smoother and more enjoyable, giving a MacBook a try might just be the game-changer you need!
Do you have experiences or tips to share about using MacBooks or Windows PCs for development? Drop a comment below—we’d love to hear from you!
As dev3lop continues to focus on javascript app development, we will continue to share more about cool TLDR tech topics that need detailed information.
