Tag: budget

Useful Tools for Visualizing Databases on a Budget

A diagram is a graphical representation of information that depicts the structure, relationship, or operation of anything. Diagrams enable your audience to visually grasp hidden information and engage with them in ways that words alone cannot. Depending on the type of project, there are numerous ways to use diagrams. For example, if you want to depict the relationship between distinct pieces, we usually use an Entity Relationship Diagram (ERD). There are many great tools that can help you sketch out your database designs beautifully.

In this article, I will be sharing some of my favorite tools that I use to curate my data structures and bring my ideas to life.

Google Docs Drawing

The drawing function in Google Docs allows you to add illustrations to your pages. You can add custom shapes, charts, graphs, infographics, and text boxes to your document with the built-in drawing tool.

Screenshot of database entity relationships using Google Docs.

Sketching with Google Docs

Although it is simple to add a graphic to your Google Docs, the procedure is not totally visible. Here’s how:

1 . Open a new document on Google Docs.

Screenshot of a new document in Google Docs.

2 . Click on the insert button and select Drawing . Then, from the drop-down option, choose New to open the drawing screen.

Screenshot of adding a new Drawing in Google Docs.

3 . You can use the toolbox on this screen to add text boxes, select lines, and shapes, and modify the colors of your drawing.

Screenshot of selecting an Arrow in Google Docs.

4 . You may also use the cursor to adjust the size of your drawings and the color of your designs by using the toolbox at the top of your screen.

Screenshot of customizing a drawing in Google Docs.

5 . When finished, click the Save and close button. You can click on the “File” toolbar displayed on the top of your screen to download your document.


Cost Free.
CLI? GUI? Online? Online.
Requires an Account? Yes, a Google account is required.
Collaborative Editing? Yes, with Google Drive sharing.
Import SQL Not Applicable.
Export SQL Not Applicable.
Export Formats .doc, .pdf, .rtf, .odt, .txt, .html, .epub
Generate Shareable URL Yes.

Google Docs offers amazing convenience. However, diagramming databases is not something it was intended for. You may find yourself frustrated with redrawing arrows and relationships if you are making frequent edits to your model.


Graphviz is a free graph visualization software that allows us to express information diagrammatically.

Screenshot of database entity relationships using Graphviz.

Graphviz implements the DOT language. The DOT language is an abstract grammar that makes use of terminals, non terminals, parentheses, square brackets, and vertical bars. More information about the DOT language can be found in its documentation.


Cost Free.
CLI? GUI? Online? CLI.
Visual Studio Code, Eclipse, and Notepad++.
Graphical Interfaces.
Requires an Account? No.
Collaborative Editing? Not Applicable.
Import SQL Yes, using SQL Graphviz.
Export SQL Yes, using SQL Graphviz.
Export Formats .gif, .png, .jpeg, .json, .pdf and more
Generate Shareable URL Not Applicable.

Graphviz has an impressive and supportive community. However, a high level of SQL support is only available when you install additional third-party software. This overhead may make it less approachable to users that are not comfortable setting up their computer to support these tools.


ERDPlus is a database modeling tool that allows you to create Entity Relationship Diagrams, Relational Schemas, Star Schemas, and SQL DDL statements.

Screenshot of database entity relationships using ERDPlus.

It includes a brief guide on how to create your ER diagrams, which is especially useful for beginners. You can also easily convert your created ER diagrams to relation schemas.


Cost Free.
CLI? GUI? Online? Online.
Requires an Account? Not required, but recommended for saving.
Collaborative Editing? Not Applicable.
Import SQL No.
Export SQL Yes, with the support of SQL DDL statements.
Export Formats .png
Generate Shareable URL Not Applicable.

ERDPlus is suited for SQL. It does lack additional export formats and ability to share with teams, but these features are not necessary with import and export.


Diagrams.net (previously Draw.io) is a free online diagramming tool that can be used to create flowcharts, UML diagrams, database models, and other types of diagrams.

Screenshot of database entity relationships using Diagrams.net.


Cost Free.
CLI? GUI? Online? Desktop and Online.
Requires an Account? Not required, but recommended for saving.
Collaborative Editing? Sharing requires Google Drive or OneDrive.
Import SQL Yes.
Export SQL No.
Export Formats .png, .jpeg, .svg, .pdf, .html and more.
Generate Shareable URL Yes, export as URL an option.

Diagrams.net is designed to support many different workflows. Its ability to easily integrate with third-party integrations such as Trello, Quip, Notion, and others distinguishes it from the other options. The ability to share and collaborate may make it work well for collaborative teams.


This article is based on using free database tools that could help visualize your ideas and their capabilities with limitations to great details on how to use these tools.

In my research, I also came across other excellent tools with free trials available for creating database diagrams like Lucidchart, EDrawMax, and, DrawSQL. However, these free trials have limitations which may make them less suited for developers working on multiple projects.

I strongly recommend that you read the documentation for each of these tools to determine what works best for you and, most importantly, to avoid any difficulties in using these tools.

Thank you for taking the time to read this far, and I hope you found what you were looking for. Have a wonderful day!

Useful Tools for Visualizing Databases on a Budget originally published on CSS-Tricks. You should get the newsletter.


, , , ,

Reduce Your Website’s Environmental Impact With a Carbon Budget

As I write this, world leaders are gathering in Glasgow for COP26, the international climate change conference, in the attempt to halt (or at least slow down) catastrophic climate change by pledging to end their countries’ dependence on fossil fuels. Only time will tell whether they will succeed (spoiler: it’s not looking good), but one thing that’s increasingly clear is that we in the tech industry can no longer bury our heads in the sand. We all have a responsibility to ensure our planet is habitable for future generations.

It’s all too easy to disassociate climate change from the web. After all, most of us are sitting at our desks day in, day out. We don’t physically see the emissions the web is producing. But according to a report by the BBC in 2020, the internet accounts for 3.7% of carbon emissions worldwide — and rising. That puts our industry on level with the entire air travel industry. So, when I think of what we can do to make our websites “better” I immediately think of how we can make them better for the planet. Because, like it or not, the carbon emissions produced by our websites not only impact our own users, but all the people who don’t use our websites too. We certainly have a lot of work to do.

It’s no secret that web pages have been becoming increasingly bloated. The average web page size now stands at around 2MB. This is terrible news for users, whose experience of browsing such bloated sites will be very poor on slow connections, but it’s also terrible for the planet. Poor performance and energy intensity often go hand in hand. But happily, it means that fixing one will go a long way towards fixing the other — it’s a win-win. So what’s one thing we can do to improve the environmental impact of our websites (and, by extension, improve performance for our users too)?

My suggestion is that we need to set our websites a carbon budget.

Performance budgets in web development are not a new idea, and in many respects go hand-in-hand with carbon budgets. Optimizing for performance should generally have a positive impact on your website’s energy efficiency. But a quantifiable carbon budget as well helps us look at every aspect of our website through the lens of sustainability, and may help us consider aspects that a performance budget alone wouldn’t cover.

How can we begin to calculate a carbon budget for our site? Calculating the amount of carbon produced by a web page is difficult due to the many factors to consider: there’s the power used during development, the data centers that host our files, the data transfer itself, the power consumed by the devices of our end users, and more. It would be virtually impossible to perform our own calculations every time we build a website. But Wholegrain Digital’s Website Carbon Calculator tool, which estimates the carbon footprint of a given website, gives us a good jumping-off point from which to start thinking about this stuff.

Screenshot of the COP26 homepage with a deep blue background, bold white and green lettering on the left with the conference dates, and a swirly illustration of Earth on the right in green and white.
The COP26 site is dirtier than 94% of web pages tested by the Web Carbon Calculator

Let’s take the COP26 website as an example. Running this site through the Carbon Calculator reveals some fairly shocking results: The site is dirtier (i.e. more carbon intensive) than 94% of web pages tested by the tool. Inspecting the homepage in DevTools, we can see that entire page weighs in at around 6.4MB of transferred data — way about average, but sadly not unusual. Further inspection reveals that JavaScript from social media embeds (including YouTube video embeds) are among the worst offenders on the homepage, contributing significantly to the page weight. Fershad Irani has written this detailed analysis of the areas where the site falls short, and what can be done about it. (Up until a few days ago, the total size was 8.8MB, including a 3MB PNG image. Thanks to the Fershad’s work in highlighting this to the COP26 team, the image has now been replaced with a much smaller version.)

By understanding which elements of our design have the greatest impact on performance, we can gain an understanding of where some of our biggest carbon savings could lie, and begin to make trade-offs. The carbon budget might need to be different for every site — sites that require a lot of motion and interactive content, for instance, may inevitably use more resources. But perhaps for a simple web page like this we could aim for under 1g of carbon per page view? When we think about how many page views a site like COP26 would accumulate over the period of the conference, this could amount to significant savings.

Once we can identify where possible carbon savings lie, we can do something about them. Wholegrain Digital’s article “17 Ways to Make your Website More Energy Efficient” is a good place to start. I also recommend reading Sustainable Web Design by Tom Greenwood for a practical guide to holistically reducing the environmental impact of the sites we build. The website Sustainable Web Design has some excellent development resources.

As for convincing clients to buy into the idea of a carbon budget, using Core Web Vitals to kick off that conversation is a good place to start. Using tools like Lighthouse, we can see which aspects of our site have the most impact on performance and how Core Web Vitals are affected. Seeing the impact of that code on your clients’ site performance score (which can affect Google’s search ranking) might just be enough to convince them.

It would be great to see Google (and other industry-leading companies) lead the way on this and build carbon calculations into tools like Lighthouse. By putting that information front and center they could play an important role in empowering developers to make more environmentally-conscious decisions — and show that they’re putting their money where their mouth is. (There’s actually an open GitHub issue for this.) Perhaps we also need some kind of industry-wide certification, as explored in this article by Mike Gifford.

There’s much more we can do to improve the carbon footprint of our sites. It’s time for the web industry to heed this wake-up call. In the words of Greta Thunberg:

No one is too small to make a difference.


, , , , ,

Your first performance budget with Lighthouse

Ire Aderinokun writes about a new way to set a performance budget (and stick to it) with Lighthouse, Google’s suite of tools that help developers see how performant and accessible their websites are:

Until recently, I also hadn’t setup an official performance budget and enforced it. This isn’t to say that I never did performance audits. I frequently use tools like PageSpeed Insights and take the feedback to make improvements. But what I had never done was set a list of metrics that I needed the site to meet, and enforce them using some automated tool.

The reasons for this were a combination of not knowing what exact numbers I should use for budgets as well as there being a disconnect between setting a budget and testing/enforcing it. This is why I was really excited when, at Google I/O this year, the Lighthouse team announced support for performance budgets that can be integrated with Lighthouse. We can now define a simple performance budget in a JSON file, which will be tested as part of the lighthouse audit!

I completely agree with Ire, and much in the same way I’ve tended to neglect sticking to a performance budget simply because the process of testing was so manual and tedious. But no more! As Ire shows in this post, you can even set Lighthouse up to test your budget with every PR in GitHub. That tool is called lighthousebot and it’s just what I’ve been looking for – an automated and predictable way to integrate a performance budget into every change that I make to a codebase.

Today lighthousebot will comment on your PR after a test is complete and it will show you the before and after score:

How neat is that? This reminds me of Gareth Clubb’s recent post about improving web performance and building a culture around budgets in an organization. What better way to remind everyone about performance than right in GitHub after each and every change that they make?

Direct Link to ArticlePermalink

The post Your first performance budget with Lighthouse appeared first on CSS-Tricks.


, , ,