DEV Community: Alicia Sykes

I built an app in every frontend framework

Alicia Sykes — Mon, 05 Jan 2026 16:20:00 +0000

TL;DR

Which framework should you use? Well, that depends on what you're developing and your prioritie are. But I made a quick comparison tool to help you find the perfect stack for your project. See: Stack Match.

Just want the numbers? I also built the same app using 10 different frameworks, and benchmarked them. See the framework-benchmarks repo for source and results.

Methodology

Why am I writing this? Well I see a lot of articles bigging up specific frameworks, or putting down other frameworks. But rarely does the author cut through the hype and provide an unbiased comparison between all* the options.

My aim here is to briefly outline each frameworks USP, when you should use them, covering their pros, cons and also mention my thoughts.

Talking about unbiased, I need build the same app in each framework to make this a fair test (which I have done!). But that's the first issue, as simple apps do not fully demonstrate a frameworks capabilities in real-world scenarios. As such, I've also included actual / live projects I've built with each. All of these are production ready, with a decent number of active users and/or downloads (actually, a combined 1 million anual users, and 50k github stars).

Since there's literally hundreds of frontend frameworks, so to keep this post reasonably, I'm only going to cover on the "top" 10 latest and greatest, and we're mainly focusing on developer experience (but performance benchmarks will also be included).

That's enough chat, let's get to it!

React

React is everywhere, powering over 1.3 million websites, and used by many (probably most) large companies. It's been around for over 12 years, backed by Meta, with very mature tooling and a large ecosystem. So it's no wonder it's become the default choice for many teams. It's very stable with excellant backwards compatibility (which is actually also one of it's pitfalls, as there's multiple ways of doing everything).

But it's not perfect. It adds a lot of boilerplate making it much more verbose to write than the likes of Svelte or Vue. The virtual DOM also adds quite a significant performance overhead (actually, just the reconciliation, but it's easy to use incorrectly), memoization is often manual, concurrent features are not yet very mature, and bundles tend to be large, even with a lot of tree shaking.

Pros

Plenty of jobs
Ubiquitous, huge ecosystem, good community support, corporate backing
Flexibility, build anything from SPAs, emails to mobile apps (kinda)

Cons

While quick to get started with, React can be slow to master properly, and there's many things to trip up beginners
Less performant out of the box, and the virtual DOM adds an overhead
Quite boilerplate heavy, especially when compared to Svelte or Solid

My Thoughts

If you're vibe coding, React has a huge advantage, since there's just so much code out there for the AIs to consume. Likewise, if you're looking for a job, you can't go wrong with learning React as it's been the dominant framework for most companies for quite a while now.

That said, I personally do not like React: it's slow, heavy, boring and sometimes a bit more complex than other frameworks.

I find it frustrating that I need to do so much manual work to improve performance of an app. It makes the code verbose and prone to mistakes. Even though developer tooling is very good, inspecting the compiled output can still be quite painful. I spend a lot more time with the docs open, as the React spec is quite large and broad.

What I built

Vue

Vue is a progressive framework, meaning it can be used for all app types, from just a drop-in script from enhancing HTML all the way up to a full SPA with SSR. Like Svelte, it uses SFCs (single file components) where each .vue file bundles template, logic and scoped CSS together. For reactivity, Vue uses ES2015 Proxies to track dependencies and update only what’s needed, without manually memoizing.

Pros

Really easy, intuitive and quick to learn and use
Nice Single-file components with scoped styles
Easy, fine-grained reactivity and efficient dependency tracking
Official tools for routing, state, and SSR (bundled separately)

Cons

While Vue can scale very well, a lot of thought is needed when using it for a very large project
There's some inconsistencies (such as the two competing Options vs Composition APIs)
Some reactivity caveats (e.g. .value on refs, destructuring loses reactivity)

My Thoughts

Vue could be seen as the Goldilocks framework, sitting comfortably between React's flexibility and Angular's structure. Vue is fast enough, fun enough and battle-tested enough, but doesn't really excel amazingly in any of these areas.

The reactivity system using Proxies is genuinely impressive. Change a data property and everything dependent on it updates automatically. And, the ecosystem is much stronger than people realize.

I chose Vue for Dashy, because it both has everything I needed, but also is incredbily easy, so contributors could add their own widgets and features, with out a steep learning curve.

What I built

Svelte

Svelte has consistently ranked as one of the most loved frameworks, and for good reason. It's simple, fast, lightweight and really fun. Reactivity is built directly into the language, no hooks, proxies or useEffect weirdness; just assign to a variable and it reacts.

Unlike many other frameworks, it does not ship a runtime or use a virtual DOM. Instead, components get compiled into highly optimized vanilla JS at build-time. So, there's no runtime overhead, no framework code in your bundle and you get near-native performance in the browser. Oh, and the compiled output is surprisingly human readable.

Pros

Smaller, faster bundles than React or Vue
Really simple reactivity model
Less boilerplate than any other framework
Animations are built in

Cons

Ecosystem is still smaller than React/Vue
SvelteKit still maturing, and could be slightly less stable than Next/Nuxt
For large teams or huge projects, the tooling is not as robust

My Thoughts

Building in Svelte makes me happy. I like that it's both modern, intuitive and fast, but also that it's SFCs are very aligned with the core web technologies: just HTML, CSS and JS.

Svelte has been my go-to for building things quickly and beautifully, while shipping a performant result. But I have found that if I don't pay attention to structure, a large project can quickly get messy.

I wouldn’t necessarily use it for a huge enterprise dashboard where you have 15 teams working on the same codebase, React or Angular still offer more predictability, stability and tooling in those scenarios.

What I built

Angular

You're probably thinking Angular is an old-school framework, only used in legacy apps and corporate environments. And yes, the latter is correct, but recent releases (yes, it's still very active) have some awesome features, that make it a very viable choice in 2025.

Unlike other frameworks, Angular ships with everything batteries-included: routing, forms, HTTP, testing, internationalization, animations, SSR, and more - all officially maintained and deeply integrated. No need to cobble together a stack.

But it can be verbose to write with.

Pros

TypeScript from the start
Very stable nowadays
Everything needed for large apps is included
AOT compilation of templates, making it faster than some
Plenty of jobs in the corporate world

Cons

Steeper learning curve (RxJS, DI, modules, zones)
Verbose compared to frameworks like Svelte or Vue
Smaller community than React/Vue in open-source or tutorials
Less flexible — you build the Angular way

My Thoughts

Angular isn't cool, but it is consistent, powerful, and scalable. There isn't really anything missing, so you don't need to npm install a ton of third-party deps just to do common tasks.

I didn't find it complicated to get up to speed with, but there was a lot I needed to learn from the docs, especially with the template syntax, component definitions, directives, injections, etc. The only thing I struggled with, was initially getting hydration working for my SSR routes. Everything else was smooth sailing.

I'd consider Angular again for large apps, where stability, structure and long-term support matter, but not so much for smaller apps.

What I built

Lit

Lit is a super lightweight framework for building standards-based Web Components, built around modern browser APIs (like Custom Elements and Shadow DOM) and is great when you want framework-agnostic, reusable UI components.

Pros

Uses native Web Components and common standards
Performant, as no virtual DOM, and updates are minimal and direct
Works with any framework (or none)

Cons

Verbose syntax: @click, ?disabled, .value, etc.
Class-based components feel outdated
SSR is experimental and hard to set up
Ecosystem and learning resources are niche

My Thoughts

I personally found that writing Lit components was a bit like stepping back into the old days of React. Components are class-based, and even the simplest of components are quite verbose, with a fair amount of boilerplate code.

The funny expression syntax (for attributes), caught me up a few times, forgetting to precede properties with a ., booleans with a ?, event listeners with an @ and all values with a $

Server-rendering is still experimental, and was such a pain to get working in a standalone Vite + Lit project.

Because it's web-components, and using the shadow DOM, each component is totally isolated. Which has it's pros and cons, but if you're not used to this, you might notice that things like your global CSS reset or styles do not work the way you'd expect.

What I built

Marko

Marko is a declarative language and high-performance web framework, built and maintained by eBay.

Pros

Concise syntax, with short-hand options for markup, no need to import components/custom tags
Quite easy SSR and isomorphic UI components
Easy routing with Marko run

Cons

Very niche and limited support - you definitely could not vibe code with Marko!
Amazing when it works, but if you face an issue, you'll be delving into Marko's source and resolving it yourself
Missing docs (e.g. Low level APIs is just empty)

My Thoughts

I actually really liked what Marko was going for, the templating made a lot of sense. But it slightly feels like using a framework from the future, but in the past, it's both futuristic and out-dated at the same time.

The main drawback, and it's a big one - was that there's very limited info online. The docs are sparce, you cannot just grep github to find examples, AI tools have no idea of Marko basics, there's limited community support and even intelisense is very limited. So, if you face issues, you'll be delving into Marko's source yourself. And it does have a few quirks, which are often undocumented (e.g. if you use class {} in a top-level view or layout, all interactivity will just break, without an error message).

So as much as I loved working with Marko, I don't feel I can recommend it for any serious project, just because the community is so small. I also don't think it's going to be actively maintained for much longer, as repo activity as been slowing down for the past few years, and ebay seems to be the only core maintainers.

What I built

jQuery

Did you think I'd forget about our old friend jQuery?! Nearly 20 years since it's first release, and jQuery is still present on over 70% of the top 100k websites (that's largely correlated with WordPress usage).

That number is now starting to decline, and with good reason - for simple apps, many of the features of jQuery can now be done nativity with modern JavaScript, and for more complex apps modern frameworks just do the job far better.

...but earlier this year, and for the first time since 2016, a new major version, jQuery 4 has been published.

Pros

No build tools, dependency managers, transpilers etc
It's very much battle-tested
Useful for supporting (very) old browsers which don't have the newer JavaScript features

Cons

Not much that jQuery can do, which can't be done with vanilla JS

That said, I couldn't quite bring myself to build a modern app using jQuery. Though I have used it (many years ago) for revision-quizzes, intern-magnet and user-monkey.

Alpine

Enables you to easily sprinkle reactivity into server-rendered HTML (no SPAs, no hydration, no SSR). It's ideal for simple UI enhancements without a full build setup.

What's clever is how Alpine stays out of your way. The HTML is still readable, the JavaScript is minimal, and everything degrades gracefully if Alpine doesn't load. It's progressive enhancement done right - the page works without JavaScript, but becomes interactive when it loads.

The syntax reads naturally: x-on:click="searchWeather()", x-text="temperature", x-bind:class="{'active': isExpanded}". It's declarative like Vue templates but lives right in the HTML. The reactive updates happen automatically when you modify the data.

Pros

Zero setup — works with just a <script> tag
Ideal for small enhancements in SSR or static sites
Easy, declarative syntax inspired by Vue
- Progressive enhancement by default

Cons

Not meant for large apps — lacks routing, state management, SSR, etc
Limited tooling and structure for big teams
Can get messy if you cram lots of logic into HTML attributes

My Thoughs

Alpine hits a really sweet spot for simple interactivity. When you don't want a full framework and just need modals, dropdowns, toggles, or light client-side behaviour then Alpine is perfect.

What I built

Solid

Solid looks a lot like React at first glance, but under the hood it's completely different, and much faster. Instead of a virtual DOM, Solid uses fine-grained reactivity (similar to Svelte and Vue's internals) to update only what actually changed. The result is tiny bundles, almost no runtime overhead, and great performance.

You still write JSX, still define components, still use hooks - but everything is reactive by default. Signals (createSignal) replace useState, computations run automatically when their dependencies change, and nothing re-renders unnecessarily. It feels familiar, but without the awkward parts of React.

Pros

Extremely fast: no virtual DOM, fine-grained reactivity, tiny bundle
Feels familiar, if you're from a React background
Very scalable, for large, highly interactive interfaces

Cons

Much smaller ecosystem and community
SSR is strong, but full-stack frameworks like SolidStart are still maturing
JSX.

My Thoughts

Solid feels like "what React could have been" if it were designed today. You get the React ergonomics without the re-rendering dance, memoization hacks, or performance footguns. It genuinely feels snappy to build with. But because it's still relatively niche, you won’t find as many libraries, tutorials, or job listings.

What I built

Astro

Astro is less of a framework, and more of a content-first site builder.

Astro statically builds your site, and uses barley no JavaScript by default. Interactivity comes from "islands", which are tiny isolated components, writen with any framework of your choice (like React, Svelte, Vue, Solid, etc), and are used to sprinkle in interactivity which get hydrated on client-side, only when needed.

Pros

Best option for SEO (SSG,SSR), plus all the benefits of interactivity only when you need it.
First-class MD/MDX support

Cons

It's good for content-heavy sites, but definetly not a good choice for SPA/interactive apps

My Thoughts

For a blog, docs, a marketing site, or a “mostly static with a few interactive bits” project, it’s honestly hard to beat. I love Astro, it's DX and flexibility, but it does have very specific use-case.

What I built

Van.js

Van is a tiny (like seriously tiny - under 1kb) Grab 'n Go reactive UI framework with no virtual DOM, no build tools, no dependencies and no heavy abstractions. It works with entirely with plain DOM nodes, using simple reactive primitives (van.state, van.derive) to update the UI when data changes. It feels closer to "reactive vanilla JS" than a traditional framework.

The API is intentionally minimal. You create components as functions that return DOM elements, bind state directly in your markup-like calls, and that’s… pretty much it. No JSX, no compiler, no bundler, no fancy lifecycle hooks. Just JavaScript and DOM APIs with a sprinkling of reactivity.

Pros

Extremely small and fast, perfect for tiny widgets or embedded components
No build step; works in a <script> tag
Very simple reactivity model
Easy to learn if you’re comfortable with vanilla JS

Cons

Definetly not suitable for larger applications
No component abstraction beyond functions, no templating system, no event system
Awesome for simple reactivity, but gets unwieldy fast for anything larger

What I built

Qwik

Qwik is kinda wild. It completely rethinks how web apps work by doing something called "resumability" - your page loads instantly with zero JavaScript, then individual components wake up only when you interact with them. It's like having a webpage that's asleep until you poke it.

Pros

Super low TTFB, with <1KB JS on initial load
Scales really well for large apps with complex routes or dynamic content
Familiar developer ergonomics, with JSX + Vite + signals + file-based routing

Cons

SSR is required, it cannot work purley client side
Steeper learning curve, and some concepts (like resumability and serialization) may seem alien to devs at first
Debugging can be complex, because logic is split across server boundaries

My Thoughts

If you're working on a very large or complex app, which also needs to be highly performant, then Qwik is a natural option. Sure it has a smaller community, steeper learning curve, and is more complex than other options, but when every byte matters then this is just the price to pay.

What I built

Hol' Up - It's not a fair test if you built different apps!

That's a very fair point, but don't worry - I got you!

In order to more impartially compare these frameworks, I've also built an identical mini-app in each of them, and benchmarked each to compare performance.
You can check this out here: https://github.com/Lissy93/framework-benchmarks.

There's a shared test suite to confirm that each app meets identical requirements, each app uses all the same shared assets and styles, and then I have a set of performance benchmarking scripts which run all the actual performance tests. These results then get processed and put into the results branch, along with some charts and summaries which are in the main readme and on the framework-benchmarks homepage.

Conclusion

So there we go, 12 frameworks, 12 apps (and 12 years of pain). If you're trying to choose a framework for your next project, check out Stack Match the framework comparison tool.

And if you like this kind of content, consider dropping me a follow 🩷
I'm @Lissy93 on GitHub, and @lissy93 here on DEV. I build a lot of developer tools, security and privacy apps and self-hostable stuff for Linux, which you can check out on my site https://010000010110110001101001011000110110100101100001.com (yeah, really memorable domain name!)

Anyway, thanks for reading, happy coding, and happy new year!!

Oh, and almost forgot - which framework is truly the best? Well that would have to obviously be [character limit reached]

50 ways to bring in extra cash as a developer 💰

Alicia Sykes — Mon, 20 Nov 2023 10:00:00 +0000

Times are tough at the moment (cozzie livs), but as developers we've got a unique set of skills which are in high-demand, if you know where to look!

This post briefly outlines 50 side hustles you can use to bring in some extra cash as a developer

Too long? Skip to Conclusion

1. Attention

Engagement-based earnings are where you'll receive a share of revenue, based on the amount of time a user has spent on your site, profile or consuming your content. It's typically a small amount, at least for smaller sites or creators, but adds up over time, and anyone can enable this- so you've got nothing to lose.

Brave - Pays you for the users who visit your site, profile or view your content while using the Brave browser. Funds are paid as BAT into your Uphold account, where they can then be withdrawn as USD, GBP or EUR to your bank account
Flattr - Users who pay to use Flattr have their funds distributed among creators whose content the user has visited

I personally signed up for Brave Rewards a couple of years ago. And after verifying ownership of my domains + profiles, I've consistently been making a couple of quid a month - about £200+ so far (despite being a Firefox user!). It's not much, but for very little effort, it's worth it.

For more info on how this works, take a look at the webmonetization.org spec, a proposal which makes use of payment pointers via ILP to stream income from WM-enabled visitors, via the use of a simple <link rel="monetization" href="proxy.php?url=your-pointer-here" /> tag.

2. API as a Service

Platforms like RapidAPI make it possible to earn passive income from your API.

After you've built and deployed a simple API, you're then able to import it into RapidAPI Hub, select usage and pricing plans, and hit publish. Your API can be as big or small as you desire.

If you're looking for inspiration for an easy first project, consider turning an open dataset into an API. And for beginners, RapidAPI have a video series on how to get started. Other ideas could include wrapping an existing package up as an API, adding features to another service (like OpenAI), or building an endpoint that does some simple calculations.

3. Issue Bounties

These are in-demand feature requests for open source projects. Users can put up "bounties" where they pledge a certain amount, which will then be paid to the first developer who gets that feature completed and merged.

BOSS.dev - Feature requests and bug fixes to complete, with bounties ranging from $30 to $1000.

4. Sponsors

If you've got a presence on GitHub, or another platform, then enabling sponsorships is a rewarding way to bring in some money for your work.

Don't forget to enable the Sponsor button for your GitHub projects, by creating a .github/FUNDING.yml. This works for a variety of platforms, as well as GitHub Sponsors

GitHub Sponsors - A great option for developers however big or small. Zero fees, and low barrier to entry for supporters if they're already on GitHub
Patreon - Allows for providing perks and exclusive content to your supporters. A good option if you've got a presence on other platforms beyond GitHub
LibrePay - Aimed at those creating open source content
Open Collective - Good option if you're collecting funding for a specific project, and are using proceeds to support that project (rather than personally)
Steady
TideLift - Aimed more at those developing enterprise-grade open source projects, larger potential income but only for the biggest projects
LFX - By the Linux Foundation

Sponsorship (specifically GitHub Sponsors) is one of my personal favorite methods, as since paying is optional, you're not preventing access to people who cannot afford it, and those who support you already know what they're getting up-front, so you'll never have disappointed customers.

5. Tips

You've probably been in the situation, where you've found a certain blog post, SO answer, GitHub repo or forum reply so helpful, that you've wished you could buy the author a beer to say thanks.

Platforms which enable these small, one-off payments are free to sign up for, and you've got nothing to lose by including a Tip button in your profile or at the end of a blog post.

Tip: Don't beg. Create something useful, and drop your Tip link at the bottom.

6. Corporate Funding

Many open source projects with a certain number of downloads / recurring users will start to be approached by companies wishing to sponsor the creators work, in return for their company logo + link being included near the top of the readme. Unlike sponsorship from individuals, these usually start at $100-500/month, rising the more usage your project sees.

7. Hackathons

There are coding competitions happening remotely all the time. These are usually sponsored by companies who pay out cash prizes to the winners.

Summer of Code - Run by Google, you'll receive a contributor stipend ranging from $750 to $6000 upon successful acceptance, the amount depends on your country and project size
CodeHeat - Run by FOSS Asia, 100 SGD every 2 weeks plus smaller prizes
HackerEarth
Hackathon.com
Devfolio Hackathons

When I was a student, I used to do a lot of hackathons (mostly in-person), and was often able to fund my Summers just by going to various events! It's also a great way of meeting people, learning new stuff, plus they're just a lot of fun!

8. Dependency Funding

If you've got a package (such as an NPM module), then enabling sponsorship in your config file will let users of your code help contribute financially.

NPM Funding - You're probably familiar with running npm fund, and seeing a list of the packages you're using which are looking for funding. The npm fund was added to make donating to the maintainers of the dependencies your project relies upon easier. If you maintain an NPM package, simply include the funding field in your package.json, and users will be able to support you more easily.
StackAid - Just install the StackAid GitHub app and link your Stripe account, and a share of funds donated by supporters who are either directly or indirectly using your project will be allocated to you each month
GitHub Sponsors - Again GitHub Sponsors comes in again, as it lets users give to their most-used dependencies - although this is a manual process, and not automatic.

9. Reporting Issues

If you've got an eye for security, or enjoy finding bugs and exploits in applications, this one is for you. The most popular platform for this is HackerOne, where you can earn anywhere from $20 to $200,000 per responsibly disclosed bug.

Many other websites also offer a responsible disclosure policy directly, where they'll reward you for your work. If this is something which interests you, I maintain a list of 1000+ bounty programs at: https://bug-bounties.as93.net

I've personally had a lot of success with this approach, it's also a lot of fun - so I highly recommend it!

Other platforms to check out include:

HackerOne - Number 1 platform, most bounties and good protection and payout rate
Immunefi - Specifically for Web3
BugCrowd
Intigriti
Issue Hunt

10. Open-Core model

This is where the majority of your code is open source, but certain extensions or add-ons (specifically those aimed at enterprise customers) are licensed as proprietary.

Therefore, developers can freely use the software in other open source projects. However, companies have to pay for using enterprise-specific modules or integrations.

Bear in mind, this is often easier said than done. You'll need to be able to separate proprietary features, and large companies will often do anything (including disobeying license restrictions) to avoid paying.

11. Premium Packages

These are services that make it easy to offer premium / paid-for packages for common registries. It may be a good option, if you wish to distribute a premium version of an NPM module for example, or charge for specific package features.

PrivJS - Distribute premium versions of your Node packages
CodeShip - Private registry, where users need to pay to use your package

12. Support

Adding the option for professional support plans to an open source project enables customers to pay for one-off or ongoing help and support with getting things up and running.

This can be enabled either via your own system, or using an existing sponsorship platforms, like Patreon and GitHub Sponsors, or with a dedicated service, such as Otechie which adds paid features + support via embedded an chat dialog. Tools like Calendly can enable clients to put time into your calendar, or for larger projects, investing in a dedicated customer support platform, like HelpScout may make this easier.

13. Documentation

Write the Docs is the go-to place for all things documentation.
Season of Docs - Supported by Google, each year technical writers contribute to open source projects. Participating projects receive between $5,000 and $15,000 grant which is then distributed to contributors, usually via Open Collective.
If you look around, there's also plenty of products looking for technical writers. Julia make a good list of companies who will pay you to write tech content
Copyrighting also fits into this category. Services like scripted let you make money by proof-reading or editing others text content.

Even just documenting your own, and other developers repos is a good place to start.
A projects value increases massively if it's documented. Without docs, potential users, clients or developers won't know what it does, how to use it, how to build on top of it, or how to contribute.

I might be the only one, but I personally love writing docs. All my projects include thorough usage, developing and contributing documentation. And this has contributed to their success and adoption. I feel like there's no point spending hours building something awesome, if you don't put a tiny bit of time showing people how they can use it.

14. Advertising

Before you skip past this one - I hate ads too. They're annoying, and often involve some form of tracking which compromises the privacy of your users. But, for open source projects, there are some other options which don't have these drawbacks.

This is a great option if you're maintaining a GitHub repo, website, blog or service that gets consistent traffic. Usually a minimum of about 10k users/month is required, but you'll get much better returns if you're getting 50k+ monthly users.

15. Selling your Code

I personally disagree with this approach, just because a lot of the code being sold is poorly re-skinned versions of open source software, and proper credit isn't always given to the original author. That said, some developers do manage to make it work, building out simple projects then selling them on.

IndieMaker - Sell your entire project
PieceX - Sell ready-to-go source code
Codester - Aimed at PHP and Wordpress

16. Selling Content

This is a commonly suggested one, when you look at side hustles for developers. But for good reason - if you're able to create high-quality content, there is good money to be made. Especially if you have an in-depth knowledge of an emerging field.

Popular sites for selling content include:

GumRoad - Code, courses, posts, art, design, media (10% fee)
AppSumo - Code, apps, extensions, courses, templates, etc

17. Writing

This is a unique skill set. Either you're very good at writing engaging content, or you've got in-depth knowledge on a specific in-demand field. Otherwise if this is something that interests you, consider e-book publishing, where nothing is lost if your book is not a success.

LeanPub - A platform for self-publishing technology / development e-books and courses, with a generous revenue model (you keep 70%)
Amazon KDP - Publish to Amazon Kindle, and make it immediately available to millions of users world-wide (Amazon will take at lease 30% cut, likely more for small publishers)
SmashWords and Draft2Digital - Distribute to other e-book sellers around the globe, so an easy way to start publishing. They take less commission that Amazon, but more than LeanPub.

18. Grants

Grants and corporate sponsorships are available in a number of fields, from open source, innovation, DeFi, AI, etc. They're usually paid to help you fund your living costs for a short period of time, while your working on something specific.

GitHub Sponsors - Platform for individuals and organizations to financially support open source developers. Amount varies based on sponsorships.
Google Summer of Code (GSoC) - Global program for student developers to contribute to open source projects, with stipends typically ranging from $1500 to $3300.
Mozilla Open Source Support (MOSS) - Grants for open source software development, particularly for projects that align with Mozilla's mission.
The Linux Foundation Grants - Offers various grants and fellowships for developers working on Linux Foundation projects.
NumFOCUS Small Development Grants - Supports small projects in data science and scientific computing. Grant amounts vary ($285k split between all applicants).
Apache Software Foundation Sponsorship - Financial support for Apache software projects, focusing on the Apache software ecosystem.
Outreachy - Provides three-month internships for underrepresented groups in technology, with stipends typically around $5,500.
Knight Foundation - Offers grants for tech projects that promote quality journalism. Grant amounts vary widely based on project scope.
Prototype Fund - Supports open source prototypes with up to 47,500 euros over six months, focusing on software developers in Germany.
The Sloan Foundation - Offers grants for open science community projects, especially those enhancing open source software in research.
Chan Zuckerberg Initiative Open Source Software Projects - Focuses on supporting open source software essential to biomedical research. Funding amounts vary.
Raspberry Pi Foundation - Provides grants for educational projects involving Raspberry Pi and computing education.
GitCoin - A crowdfunding platform that funds open source projects, particularly in Ethereum and Web3. Funding varies based on community support.
NLnet Foundation - Supports projects in Internet technology and network research. Grant amounts vary.
Open Technology Fund - Supports projects developing open technologies that promote human rights and open societies. Funding varies.

19. Hosting Events

The events space is a lucrative industry, especially if you're able to put on a good event and land yourself a large sponsor. It's not for everyone, but here are 10 potential revenue streams that hosting events can bring:

Ticket Sales: Generate revenue by charging an entry fee. Use platforms like Eventbrite, Meetup, or Ticketmaster for ticket management.
Sponsorships: Secure financial contributions from tech companies in exchange for promotional opportunities at your event.
Workshops and Training Sessions: Offer specialized, hands-on learning experiences on specific technologies or programming languages, charging a premium fee.
Virtual Events: Organize and charge for webinars, online workshops, or virtual conferences using platforms like Zoom, WebEx, or Hopin.
Hackathons: Host coding competitions with entry fees or find sponsors for covering costs and providing prize money.
Networking Events: Charge for networking events targeting tech professionals, potentially attracting sponsorships from hiring companies.
Speaking Engagements: Organize and charge for speaking events or panels, leveraging your expertise in a particular tech area.
Corporate Training and Retreats: Provide event organizing services for companies' internal training or team-building events.
Affiliate Marketing: Utilize affiliate marketing for tech products or services during your events for additional revenue.
Product Launches: Partner with tech companies to host product launch events, offering your organizing services for a fee.

20. Research

Your opinions are worth something, especially as a developer. There are researchers who will pay you money to take part in their study, survey or think tank. Typically good research opportunities are few and far between, OR will pay quite poorly.

Popular platforms for this kind of work, include: Testable Minds, Respondent

21. Creating Courses

Skillshare - Offers payment based on the number of minutes watched in your classes, along with referral bonuses.
Coursera - Partner with institutions to offer courses; payments are typically based on revenue-sharing agreements.
LinkedIn Learning - Instructors can create courses for professionals; compensation details are arranged with LinkedIn.
Thinkific - Provides tools to create, market, and sell online courses, with various pricing plans including a free option.
Kajabi - All-in-one platform for online courses, marketing, payments, and website building.
Podia - Offers a platform for hosting courses, webinars, and digital downloads with direct sales to your audience.
Pluralsight - Focused on tech and creative courses; pays instructors through royalties based on the popularity of their courses.
MasterClass - High-quality, celebrity-led courses; instructors are typically established experts or celebrities in their field.
uTeach
NewLine

22. Newsletters

Email newsletters and subscription-based RSS feeds are slowly making a comeback, as popular social media channels are becoming more centralized and controlled.

This model works either by offering valuable insights into tech topics or news and building up a large (and hence valuable) subscriber base, or by charging a smaller number of users to receive your updates.

Popular platforms that offer this functionality inclide:

23. Member-only Sites

MemberSpace - Enables you to paywall certain parts of your website, for members-only
Patreon - Popular for setting up membership tiers with exclusive content and perks.
Substack - Ideal for newsletters; offers the ability to have paid subscribers for exclusive content.
Ghost - A professional publishing platform with built-in membership and subscription features.
Podia - Enables the sale of memberships, online courses, and digital downloads.
WordPress with MemberPress Plugin - A plugin for WP users to create membership sites.
Wild Apricot - Membership management software that integrates with your website.
Kajabi - Offers tools for creating online courses, membership sites, and more, with a focus on marketing.
Mighty Networks - Build a community with memberships, subscriptions, and courses.

24. Guest Posts

There's also many companies which will pay you for quality posts shared to their platform. This both increases your visibility (helping you grow your network, and gain future work), as well as bringing in some short-term income.

If you're struggling to get accepted into any of these programs, start by writing your own posts and publishing them to popular dev-based social networks (like here on DEV.to!). This will build up your writing skills, and help you demonstrate your knowledge to potential companies.

For example, the following sites will pay for quality guest posts:

Dmytro Spilka compiled a great list of 300+ sites accepting guest posts. Another great list was put together here by Julia here on Dev.to.

25. Consulting

You may not realize it, but the skills and experience you've built up from your day job can be hugely valuable to many companies. Especially startups and small businesses who cannot yet afford a full-time expert. There's very high demand for professionals who can provide insights into the latest trends, tools, and best practices.

Tips:

The best way to get started at a decent rate, is through networking and word of mouth. But failing that there's always freelancing websites to help you build up experience.
Keep a log of the experience you've gained, or build up a portfolio as you go, as this will help you get better gigs in the future.
Be clear about your availability, terms, day-rate and the scope of work before getting started with any project.
Never dismiss a potential contact. You'll be surprised who might re-connect with you even years down the line asking for consulting support.

26. Mentoring

Whatever your level, you're experience as a developer can really help others who are less experienced. Mentoring is a really rewarding way to help others while also bringing in some extra money.

MentorCruise - Primarily long-term, with monthly rate paid, great for building up professional relationships (earn $50-$500/month per mentee)
CodeMentor - Better for short-term, charged hourly-rate, great for tackling specific problems (earn $60-$300/hour)

27. Tutoring

With CompSci now being part of the national curriculum (at least in the UK and much or Eurpoe), there's an influx of students (from 11-18+) looking for tutors to help them gain coding skills and prepare for exams. Income can range from $15 to $150+ per hour, depending on level, experience and background.

Super Prof - List your services, world-wide ($30-300/hour)
The Profs - Verified tutors (income unknown)
My Tutor - UK only, (£22-£55/hour)
Tutor.com - US-based high-school tuition ($75-$100/hour)

28. Social Media

There's a big gap in the market waiting to be filled by genuinely good development-focused influencers on mainstream social media platforms.

Many social media platforms allow you to monetize content, where you'll usually be paid per view, with the amount varying depending on content category, region and reputation. But do note that you'll usually have to have a certain number of followers to be eligible, and you'll also be at the mercy "the algorithm".

YouTube - Requires min of 1k subs + 4k watch hours/year
X - Requires Twitter Blue subscription, no min following
TikTok - Requires min of 10k followers + 100k views/month
Instagram - Requires min of 10k followers
Snap - 1k followers, 1k views/month, 10+ monthly posts
Facebook - 10k followers or 600k video view minutes
Twitch - 350 monthly paid subscribers

29. Brand Deals

Following on from the social media section above, once you've managed to break through past a few hundred subscribers, you'll likely also be able to start looking into brand deals, which can help bring in extra income. Again, these require a certain proven level of engagement from your audience, and you may also need to agree to the terms of the company offering the sponsorship.

30. Streaming

A rapidly growing niche is dev streams, don't expect to instantly join the leaderboard, but it could be a great place to get started, especially if you already have streaming experience (e.g. with video games). Nick Taylor wrote a great article on Getting Started with Dev Streaming.

31. SaaS

If you're able to pull this off, it's one of the best revenue models for open source projects. Your code remains 100% free and open source, users are still free to download and self-host it, but you also provide a paid-for / managed plan, where you host the app and take care of all the server management for a small recurring fee.

This model keeps with the open source ethos, while also making your application available to a broader variety of users.

Services like Stripe make accepting payments and adding subscription features to your app surprisingly easy.

32. Micro SaaS

If building a production-ready application from scratch sounds like a daunting task (because it is!), then another approach would be a Micro-SaaS app. These are smaller apps, which do one very specific task, for example:

Automating repetitive and/or tedious tasks.
Performing calculations that are currently calculated manually.
Connecting disparate systems.
Replacing Excel spreadsheet workarounds.
Plugging in gaps of missing functionality in host ecosystems
Enhancing reporting

33. Extensions

Unlike SaaS apps, once an extension is built and published, there's usually very little ongoing management required. You may also find it easier for your project to pick up traction quickly if it's adding features for an already well-established site.

Although web extensions may seem like an out-dated, or fully-saturated market, there's still plenty which can be done, and these are great projects for newer developers.

Here's some ideas to get you started:

WA Web Plus has had 2 million downloads (22k ratings), and it charges $12/month per user. Why not create something similar for the likes of Telegram, Threema, Wire, Messenger, etc?
Runkeeper has 45 million users, but the UI is lacking in terms of how data is displayed. Why not create an extension which adds better reporting, filtering, and combining with related external data? (similar to how Elevate for Strava is, but for RunKeeper)
Pick a website which provides an essential service, but has an overly impractical UI (maybe Microsoft Azure?), and create an extension to make navigating easier, surfacing key metrics, or provide a less ugly user experience
Augment any existing website using AI. This is much easier than it sounds, your extension could make use of services like OpenAI's API to, for example summerize a webpage, or re-phrase selected content (for copy/pasting into homework!?)
If you know of a website with high user count, yet a terrible UI, an easy extension idea could be apply CSS overides to re-style it. For example Amazon, Yahoo, Instagram are all high-traffic sites with huge room for design improvement (dark mode?!)
Even simple stand-alone extension apps could have a lot of potential. Like a pomodoro timer, currency converter, IP address widget, or just a web app shortcut.

34. Publishing an App

Building a simple app or game, and making it available on platform app stores, gives you the ability to target millions of customers, with an easy monetization model. All mainstream app stores - Google Play, Apple App Store, Windows Store, Steam, etc offer support for paid apps, premium features and in-app purchases.

Keep in mind, there is usually a setup fee which needs to be paid before you can publish your first app, the app store will also take a cut of your revenue, and it's not uncommon for small creators to get downloads in the single or double figures.

35. Developing Websites for Small Businesses

Lots of small businesses are focused on working within their business and don’t have the time or expertise to build their website. As developers, this is something we're able to get done quite quickly, and if you're hosting their site too, you'll be able to charge a recurring payment.

Once you've got started in web design and development, and have served a few clients, you'll find it considerably easier to find future work, both through word of mouth and by showcasing your portfolio.

To be successful at this, you'll likely also need skills in design, communication and sales.

36. Domains

With the influx in new TLDs, the domain reseller market is seeing a second wave of popularity. Domain flipping involves registering domain names which could be valuable in the future, then reselling them to a buyer wanting to use that name for a business or project.

Although this can be lucrative, it does involves high risk, and requires a good understanding of the market.

Tips:

Look into short or memorable domains, or those which might have high keyword potential (you can use tools like Use tools like Google Keyword Planner to help with this research)
Park domains which you're not currently using, so you can receive a bit of ad-revenue in the meantime
Look at recently expired domains, specifically those which were in use, as these will likely either receive traffic
A domain receiving traffic is much more valuable. So consider building out a website, app or landing page for the domain while you're holding it

37. User Testing

Companies who develop apps often need to get feedback from users. This is where user testing services come in. You spend 10-30 minutes trying out a given website or app, then either give feedback of fill in a survey, and get paid!

Although not specific to developers, with your tech background you'll find that you're uniquely positioned to get these done quickly and offer good feedback, enabling you to earn much faster than the average user. You'll also gain valuable insight into how the user testing process works, which will likely be useful to you when you come to commission testing on your own app.

Try My UI - Averages on $10 per website or app test
Userlytics - Earn between $5 and $50 depending on complexity and length of testing session
User Testing - Pays via PayPal, requires screenshare and/or webcam access during test session. Earn about $10 / test, with longer or live sessions paying up to $50 for some tests
TestingTime - Option for in-person or video call tests. Less regular, but longer testing sessions. Lower paying than alternatives, when you take account for the delay between sessions
IntelliZoom - Earn between $2 and $10 per 10 minute study. Paid via PayPal with a 3-5 day delay

38. Micro Tasking

Less relevant to developers specifically, but if you're coming from a technical background, you'll likely find these gigs more lucrative than those without development skills.

Amazon Mechanical Turk - Crowd sourcing marketplace for outsourcing virtual micro-tasks
Sequence Works - Image annotation, data labeling and clasification
App Jobber - Market research, go to the shops and take photos of specific product placements
GigWalk - App-based micro-tasks on the go
Take a look at GigWorker.com for more micro-tasking and gig-based jobs

39. Surveys

Surveys tend to pay very poorly, although participants with certain skill sets (like software engineering) are in higher demand, so can earn a little more. Even still, this likely won't be a good option unless you have a lot of time on your hands, or use a currency that's much weaker than the USD.

These typically involve either testing out new products or services, and giving feedback - or answering questions to aid in market research campaigns.

There's a lot of different survey-based companies, so I won't link to them all. But Swagbucks, 20Cogs, TestingTime are some prominent ones.

40. Decentralized Nodes

This might not be for everyone, as proceeds are usually paid in crypto which is very volatile. But there are many Web3 projects which you can volunteer to run a node for (usually either on a Rasperry Pi, cloud server or spare laptop), which will pay you for either uptime, bandwidth, diskspace, compute, IP/proxy or some other compute resource.

As developers, managing infrastructure is something we're good at, so if you've got any spare resources lying around, you might be able to put them to work, and earn some extra cash while you sleep.

Storj: Run a Storj node, for decentralized cloud computing
Network3: AIoT layer 2 for training and validating models
Flux: Decentralized infra
Mysterium: P2P VPN node
Koii: Distributed cloud
Helium: Provide wireless connectivity for long-range IoT devices
Filecoin: It is a decentralized storage network that turns cloud storage into an algorithmic market. Users can rent out their spare storage space and earn Filecoin tokens.
Sia Network: This is a decentralized storage platform secured by blockchain technology. Sia stores and encrypts your files across a decentralized network. You earn Siacoins by renting out your unused hard drive space.
Crust Network: Similar to Filecoin and Sia, Crust supports multiple storage layer protocols such as IPFS, and provides storage interfaces for the application layer.
Arweave: A blockchain-based platform that offers data storage in a permanent and decentralized manner. By hosting data, users can earn rewards in the Arweave token.
BitTorrent: This platform tokenizes the world’s largest file-sharing protocol, enabling users to earn BTT for sharing files on the network.
HOLO: A peer-to-peer hosting platform for Holochain apps (hApps). Users who host hApps on their computers are rewarded with HOT tokens.

41. Other Web3 Methods

The crypto sector has many other ways of earning passive income, from PoS staking, holding interest-bearing digital assets, lending, yield farming, cloud mining, dividend-earning tokens, yield farming, trading, local / PoW minding, NFTs to name a few.

I shan't link to any specifics here, as it's a very high-risk industry so it's important you do your own research. But as technologists we're in a good position to be able to understand the fundamental concepts behind any given protocol or Web3 asset, and determine it's viability.

My advice would be to read the white paper, and if you cannot immediately understand it, then stay away from it! It's the wild west out there, and so unless the fundamentals of a project are solid you should be prepared to loose any money you invest into it.

42. Affiliate Marketing

Affiliate marketing is notoriously un-lucrative for those just getting started, but I've included it here because as developers, there is some scope for automating a lot of the process. Also, the more niche of a service you are marketing, the higher the the commission paid usually is. So if you're embedded in a tech community, you may be in a good position to sell low-volume high-return services.

Again, if you've already got a following (social, blog, YouTube channel..) then affiliate marketing might make more sense, as the fractions of a penny you earn from each click are able to add up if you're getting a lot of clicks.

It's worth noting that you should probably not share an affiliate link, without disclosing that it's an affiliate link. And try to avoid advertising products that you have either have not used yourself, or would not recommend to a friend.

As an example, here are some of the services I have used nd have affiliate accounts with. I've never made any meaningful amount from any of them.

43. Reseller

This involves building an application to wrap an existing service, while adding on a USP - either a technological one, customer support, UI, or additional features. If you're from a marketing or sales background, this might be for you. If you want to add on features, or automate the process then there will be a fair amount of up-front work, but you'll then be in a better position to collect revenue.

You can find service providers in most major industries which offer reseller programs.
Some examples include:

Supermetrics: Marketing reporting, analytics, data integration, 20% recurring commission.
Keap: CRM, sales and marketing automation, 20–30% recurring commissions.
Klaviyo: Email and SMS marketing, 5–15% one-time payouts, 10–20% revenue shares.
Drift: Live chat software, 20% revenue share.
ActiveCampaign: Email marketing, CRM, 20–30% commission or discount model.
HubSpot: CRM, inbound marketing, sales, 20% revenue share.
Gorgias: Ecommerce helpdesk, 20% revenue share.
Shopify: E-commerce platform, 20% commission, 10% for Shopify Plus.
LiveChat: Customer service platform, live chat, 20% commission.
GetResponse: Email marketing, online campaign management, 35% discount on sub-accounts, 35% recurring commission.

44. Trials

This doesn't relate to tech at all. But as programmers we're usually able to work from anywhere - so why not code from somewhere you're paid to be at?

You'll usually earn between $2,000 and $10,000 depending on the trial, then length, whether it's residential and specific circumstances.

Places like Flu Camp will pay you £4,000 for a 2-week stay in a comfortable hotel-like suite, while they test new treatments. Those who have a specific condition, like asthma might be able to earn more by participating in a more specialist trial - if you're in the UK you can search on the NIHR Be Part of Research website

45. Freelancing

Freelancing can vary depending on your skills, experience and the niche your operating in. Rates for some areas, like web development tend to be very low for new freelancers, yet the more experience and happy clients you have, the more you'll be able to charge.

Three of the main platforms for developer gig work are:

Fiverr: Known for its diverse marketplace, Fiverr is great for developers who are just starting out in freelancing
Upwork: Upwork caters to a wide range of professionals, but it's particularly beneficial for experienced developers. It offers the potential for long-term contracts and higher-paying jobs. The platform is suitable for those who prefer to work on more substantial projects.
People per Hour: This platform is good for developers in the European market. It emphasizes local business connections and offers a good balance between short-term and long-term projects.

46. Speaking

Both in-person and remove dev meetups and events are happening all the time around the globe. These events need speakers, and many will pay to get good talks. The amount paid varies hugely depending on the size, the audience, the topic, the speaker (you!) and other factors. Usually you'll have to start out by volunteering to do a talk at a small local tech meetup, then gradually work your way up.

47. Remote Tech Support

It's not the most glamorous role, but smaller companies often cannot afford to hire dedicated tech support full-time, therefore there's plenty of part-time gigs that you can pick up. The pay grade for these go up considerably if you've got cloud experience or certifications. Just take a look at any job board (e.g. WeWorkRemotley) and you'll see plenty of roles.

Note that you'll usually need to be available during certain hours, with the expectation that you can reply within a given period of time. Be sure this is something you can work around before applying.

49. Investing

Yes, it's not a side hustle - but hear me out...

If you're earning a modest $60k/year, and have $40k living costs, then after 5 years you could have $100k in savings. If you were to invest that in the S&P 500 which has an average return of 10 - 15%/year - you could be receiving upwards of an extra $1,000 / month in income from your investment, with that rising cumulatively the more you're able to save (of course, investments can go down as well as up). That's already a better return than many of the side hustles listed here!

50. Employment

Let's not forget, that as tough as things may seem at the moment, as developers, with even just a year or 2 of experience, we're in the very fortunate position to be well paid compared to the average earner.

If you're job isn't cutting it - switching companies is usually a sure way to jump up a salary band, and if you're not enjoying your current gig, it could be something worth considering.

Maybe after all of this, it's not a side hustle you're after, but just a better "main hustle"?

Real Speak

Despite what you might see on IndieHackers and Instagram - having a side hustle is not the bee all and end all. It's usually something which takes considerable amount of work, for very limited returns. So before jumping into anything here or elsewhere - take a step back, and think "Why am I doing this?". If you're doing it to build experience, learn new skills and have fun - that's great. If you're doing it to get rich quick - you'll likely be very disappointed.

Something else to note, is that as unfair as it may seem, those who already have a strong following or several successful open source projects will be in a much better position to take advantage of opportunities compared to those who are just starting out.

Therefore, in the short-term your time may be better spent bettering yourself as a developer. If you're not sure where to start with this, here are 5 key tips:

Networks - Build out your networks, go to meetups, hackathons and dev events, join communities, make friends
Open Source - Put your work out there, learn in public, create mini projects which interest you and don't be afraid to fail
Experience - Get hands-on experience, apply for internships, offer your services as a freelance developer
Fundamentals - Ensure you've got a solid understanding of computer science fundamentals, and the rest will be much easier
Have fun! - You'll naturally do so much better in a field that you have a genuine passion for. If you're not enjoying what you're doing, take a step back, and consider if a different approach would work better for you

Disclaimer

The above list is intended only to give you ideas for starting points.
I've not personally tested out all services listed here.
- If you have - I would love to hear your feedback. Likewise, if there's anything which you should be added or removed, let me know below.
Not all services are available in all countries/territories (this list is primarily focusing on UK/Europe and the USA 🇬🇧🇪🇺🇺🇸)
Some platforms take a cut of your revenue. This is usually a small amount, but important that you take account for
Earning is generally much easier if you already have either a large following or a popular open source project
Some methods involve risk. Although I've done my best to highlight this where possible, keep in mind that your investments may fall rather than rise
Your results may vary
No guarantees

If you like this kind of stuff, consider following for more :) Thank you for reading, Alicia 🥰

SvelteKit 1.0 - Building a personal blog, that shows your DEV posts 🦄

Alicia Sykes — Mon, 20 Feb 2023 21:58:07 +0000

The aim of this post is to provide a whistle-stop tour of the latest version of SvelteKit. We're going to build a developer portfolio and blog website, that fetches data from your RSS feed, as well as the GitHub API.

Contents

Intro to SvelteKit
What we're going to build
Let's get Started!
- Step #0 - Prerequisites
- Step #1 - Project Setup
- Step #2 - Finish Setup
- Step #3 - Components
- Step #4 - Creating a Route
- Step #5 - Special Routes
- Step #6 - Fetching Data
- Step #7 - Render Results
- Step #8 - Server-Side
- Step #9 - The Post Route
- Step #10 - Deploy!
The Final Project
- Blog Page (fetched from RSS)
- Projects Page (fetched from GitHub)
- Social Media Links (stats fetched from APIs)

Intro to SvelteKit

Svelte has pretty quickly taken the top spot for most loved web framework ^{[SO Survey]}, and with the recent release of SvelteKit 1.0, you should expect to see demand for Svelte + SvelteKit developers increase, as more projects adopt it.

SvelteKit to Svelte, is sort of like what Next.js is to React - it handles routing, layouts, server-side rendering, deployment and makes developing quality web apps quicker, easier and much more fun.

But why SvekteKit? ... You'll see! It's just so easy to get a fully-featured dynamic web application up and running, with all the quality metrics which would usually take days, or even weeks to implement in traditional frameworks. Think great performance, simple deployments, easy code structures and a sweet sweet developer experience.

What we're going to build

Most of us have a blog, weather it's here on Dev.to, or on another platform. Today we're going to build and deploy you a personal blog, that aggregates all your posts from other platforms, into a single site.

Since I don't know what blogging platforms you're using, I don't want to rely on individual APIs. But thankfully there's a simple solution to this - RSS! Almost all modern (and old) providers support RSS, and it'll let us easily fetch all your posts from a single URL. (For example, here on DEV: https://dev.to/feed/[your-username]).

Here's a live demo: devolio.netlify.app/blog

And here's the full source: @Lissy93/Devolio

Lissy93 / my-website

✨ My personal homepage. A developer portfolio site that aggregates all your projects, blog posts, and stats in one place

✨ My Website

A re-usable aggregated portfolio and blog site for developers
aliciasykes.com

Intro

This is my personal website. It's configurable, so feel free to use it, or any parts of it for yourself :)

About
A self-hosted developer homepage, to showcase your projects, posts, coding stats, and more.
Data is fetched from external sources (GitHub, RSS, social platforms...), so no need for a CMS.
Crafted with SvelteKit + TypeScript- prioritising SEO, performance, accessibility, and compatibility.

Contents

A tutorial, for how to build something similar is available on DEV.to

^{A mirror of this repository is available at codeberg.org/alicia/devolio}

Pages

Portfolio Page - Displays projects from GitHub

The portfolio page displays the projects you've built. Data is fetched from your GitHub profile, with optional extra fields added in the config.

Each project can include: name, description, thumbnail…

View on GitHub

To deploy it yourself - just fork it, update the config with your RSS feed URL(s), and use one of the 1-click deploy options.

Let's get Started!

Step #0 - Prerequisites

You'll need Node.js (LTS or latest) installed. It's also recommended to have Git, a code editor (like VS Code), and access to a terminal. Alternatively, you can use a cloud service, like Codespaces.

Step #1 - Project Setup

We can easily create our project by running:

npm create svelte@latest dev-blog

When prompted, select SvelteKit, then decide weather you'd like TypeScript, ESLint, Prettier, Playwright, Vitest.

Next, we need to navigate into our project (with cd dev-blog), and install dependencies (with npm install).

To launch the app, with live reload enabled, run:

npm run dev

Then open localhost:5173

Step #2 - Finish Setup

To avoid the typical ugly ../../../ in import statements, we're going to add an alias within our svelte.config.js file.

This can be done by just adding alias object under config.sveltekit. Here's an example, where I'll map ./src/ to $src.

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter(),
    alias: {
      '$src/*': 'src/*',
    },
  },
};

export default config;

We can come back to the svelte.config file later, as it's where we put adaptors to deploy to various platforms, like Netlify.

If you'd like to use your own Prettier, ESLint or TypeScript config, you can update .prettierrc, .eslintrc.cjsprett and tsconfig.json respectively. Run npm run format to apply Prettier rules, and npm run check to verify.

Step #3 - Components

Before we proceed, we need to know the basics of components.
One of the reason that Svelte (and SvelteKit) is so easy to work with, is because pretty much everything is just a component. And the structure of components are really, really simple. Here's an example:

<script>
// All JavaScript logic and imports go here
// Append lang="ts" to use TypeScript
</script>

<!-- All markup goes here -->
<p>Example Component</p>

<style>
// All styles go here, and are scoped to the current component
// Append lang="scss" to use SCSS (or another pre-processor)
p {
    color: hotpink;
}
</style>

Here's a real-world example, where we're making a re-usable heading component, with optional level (h1, h2, etc), color, size and font.

<script lang="ts">

// Parameters
export let level: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h1'; // The semantic heading level
export let color: string | undefined = undefined; // An optional override color (defaults to accent)
export let size: string | undefined = undefined; // An optional override size (default depends on level)
export let font: string | undefined = undefined; // An optional override font (defaults to FiraCode)

// Computed values, for reactivity
$: computedColor = color ? `--headingColor: ${color};` : '';
$: computedSize = size ? `--headingSize: ${size};` : '';
$: computedFont = font ? `--headingFont: ${font};` : '';
$: computedStyles = `${computedColor} ${computedSize} ${computedFont}`;

</script>

<svelte:element this={level} style={computedStyles}>
  <slot></slot>
</svelte:element>


<style lang="scss">
  h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    transition: all .25s ease-in-out;
    font-family: var(--headingFont);
    color: var(--headingColor);
  }

  h1, h2, h3 { margin: 1rem 0; }
  h4, h5, h6 { margin: 0.5rem 0; }

  h1 { font-size: var(--headingSize, 2.8rem); }
  h2 { font-size: var(--headingSize, 2rem); }
  h3 { font-size: var(--headingSize, 1.75rem); }
  h4 { font-size: var(--headingSize, 1.5rem); }
  h5 { font-size: var(--headingSize, 1.25rem); }
  h6 { font-size: var(--headingSize, 1rem); }
</style>

Couple of things to note:

We are defining props with export let propName
We can make props optional, by giving them a default value
We can access any of these variables within our component, just surround them in braces {}
If we need attributes to be reactive, we use the $: variabeName syntax
We can specify what type of semantic element is used, with <svelte:element this="div">
A method of passing styles from JS into CSS is to define CSS variables, and pass them into the style prop
- (This isn't as bad as it sounds, as all styles are scoped only to the current component!)

Step #4 - Creating a Route

Next we're going to create a blog page, where all our posts will be displayed. (This could be done on the homepage, in src/routes/+page.svelte, but this is a good opportunity to explain routeing)

SvelteKit will automatically create routes based on the directory structure within the routes directory. All you need is a directory named after the route name, containing a Svelte file names +page.svelte. So let's create that route, with: touch src/routes/blog/+page.svelte - the contents of this file will just be a normal Svelte component, like what we saw above.

<script lang="ts">
  let title = 'Blog Page';
</script>

<svelte:head>
  <title>{title}</title> 
</svelte:head>

<h2>{title}</h2>

<style lang="scss">
h2 {
  color: hotpink;
}
</style>

We'll also need a route that can render individual posts, but we want that URL path to be dynamic, maybe based on the posts title. For this we can create a directory called [slug] that the user will land on when they visit example.com/blog/example-post

Step #5 - Special Routes

Now's a good time to mention that we can have our routed inherit certain components that will appear on all pages, like a navbar and footer. For this, we can create a layout file, which needs to be called +layout.svelte, and since we want this on all pages, we'll put it into src/routes.

Populate this with something like:

<script lang="ts">
  import NavBar from '$src/components/NavBar.svelte';
  import Footer from '$src/components/Footer.svelte';
  import { fade } from 'svelte/transition';
  import { page } from '$app/stores';
</script>

<svelte:head>
  <title>{$page.url.pathname.replaceAll('-', ' ')}</title> 
</svelte:head>

<NavBar />

<main in:fade>
  <slot />
</main>

<Footer />

<style lang="scss">
  @import "$src/styles/color-palette.scss";
  @import "$src/styles/media-queries.scss";
  @import "$src/styles/typography.scss";
  @import "$src/styles/dimensions.scss";

  :global(html) {
    scroll-behavior: smooth;
  }
  :global(::selection) {
    background-color: var(--accent);
    color: var(--background);
  }
</style>

A couple of things to note here:

The main site content will be rendered where <slot /> is placed
We're adding a page transition animation, by importing svelte/transition and setting in:fade on the part of the page which will change
We can get information about the current page (like path), by using the page object (imported from $app/stores) - precede it with a $ to keep the value updated
If we need to set any tags within the <head> we can use <svelte:head> to do so
We can also pop any global style, like a reset or import CSS variables
Global styles can be applied using :global(body) (or whatever selector you're targeting) - but use this sparingly!

Another special route within SvelteKit, is +error.svelte, which will be rendered in place of the current route if an error is thrown within the load() function of any route.

Again, let's create that file in src/routes/+error.svelte and populate it with something like this. (Again, we can get info about the current route, including error code from the $page object)

<script>
    import { page } from '$app/stores';

    const emojis = {
        // TODO add the rest!
        404: '🧱',
        420: '🫠',
        500: '💥'
    };
</script>

<h1>{$page.status} {$page.error.message}</h1>
<span style="font-size: 10em">
    {emojis[$page.status] ?? emojis[500]}
</span>

It's also worth noting, that you can create layout and error pages that are specific to certain routes, by nesting them within the correct route directory. If you need several layout pages, which share characteristics, you can extract those elements out into their own component, to make them more reusable.

By now, our routes directory structure should look something like this:

src/routes
├── +error.svelte
├── +layout.svelte
├── +page.svelte
├── about
│  └── +page.svelte
└── blog
   ├── +page.svelte
   ├── +page.ts
   └── [slug]
      ├── +page.svelte
      └── +page.ts

Step #6 - Fetching Data

Now it's time to get into the good stuff! We're going to fetch the list of blog posts, from the users RSS feed.

Now is a good time to mention, that within the path directory for each route, we can also have a +page.js / +page.ts file (alongside the +page.svelte). This is where we'll do our data fetching.

To keep things simple, we're going to use fast-xml-parser to parse the XML response, into JSON.

The following script simply fetches and parses feeds from a given XML RSS feed.

import { XMLParser } from 'fast-xml-parser';

const parseXml = (rawRssData) => {
  const parser = new XMLParser();
  return parser.parse(rawRssData);
};

/** @type {import('./$types').PageLoad} */
export const load = () => {
  const RSS_URL = `https://notes.aliciasykes.com/feed`;
  const posts = fetch(RSS_URL)
    .then((response) => response.text())
    .then((rawXml) => parseXml(rawXml).rss.channel.item);
  return { posts };
};

Step #7 - Render Results

Rendering the results from the returned data is really easy. In the blog/+page.svelte component (next to the +page.ts file), simply include export let data - this will be the result returned by our fetch function. We can now reference this data in the markup.

<script lang="ts">
  /** @type {import('./$types').PageData} */
  export let data;
</script>

Blog

{#each data.posts as post}
  <li>
    <a target="_blank" href={post.link} rel="noreferrer">
      {post.title}
    </a>
  </li>
{/each}

You'll notice we're using {#each data.posts as post} - this is just a for loop, as the data returned is an array.

This is part of Svelte's template syntax. There are other properties also, like {#if expression}...{/if} for conditionals, or {#await expression}...{:then name}...{/await} for promises, as well as a whole host of other useful features.

Step #8 - Server-Side

What we've got so far works great, but there are a few issues we may encounter with it:

Load times - RSS feeds are large, and fetching them client-side on each load isn't efficient
SEO - Dynamically loaded content isn't going to be crawlable by most search engine bots
CORS - Some RSS feeds won't allow client-side requests from cross-origin hosts

Thankfully, there's an easy fix for this. Renaming +page.ts to +page.server.ts will cause it to be rendered server-side, instead of on the users browser. This should fix those issues, and won't require any code changes.

Note that for server-side code, we cannot use any of the browser APIs. Since a lot of our code will be capable of being run both server and client-side, we will need to check certain features are available before attempting to use them. We can do this, by importing browser from $app/environment, then using if (browser) { /* Can access browser API here */ }

Step #9 - Build the Post Page

Finally, when the user clicks on a post, we'd like to render it. This is pretty straitforward, as the RSS response is already in HTML format, so it's just a case of using the @html directive, then styling it.

<main class="article-content">
  {@html content}
</main>

Step #10 - Deploy!

Now, let's get deploys setup. This is another reason why SvelteKit is so awesome, as deploying to pretty much any provider is just so easy!

Install the adapter for your desired provider
- E.g. for Netlify: npm i --save-dev @sveltejs/adapter-netlify
Import said adaptor in your svelte.config.js file
- E.g. import netlifyAdapter from '@sveltejs/adapter-netlify';
Initiate the adaptor, within the config object, under kit
- kit: { adapter: netlifyAdapter() }
Deploy! Now just head to your Netlify dashboard, and import the project

If you wish to run your project on a VPS, we can use the @sveltejs/adapter-node. Repeat the process above, then run yarn build, and start the node server by running node build/index.js.

We may want to use multiple adapters, so that our project is compatible with several different hosting providers. Here's an example of my config file which does just this:

import autoAdapter from '@sveltejs/adapter-auto';
import netlifyAdapter from '@sveltejs/adapter-netlify';
import vercelAdapter from '@sveltejs/adapter-vercel';
import nodeAdapter from '@sveltejs/adapter-node';

import { vitePreprocess } from '@sveltejs/kit/vite';

const multiAdapter = (adapters) => {
  return {
    async adapt(argument) {
      await Promise.all(adapters.map(item =>
        Promise.resolve(item).then(resolved => resolved.adapt(argument))
      ))
    }
  };
};

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: multiAdapter([autoAdapter(), netlifyAdapter(), vercelAdapter(), nodeAdapter()]),
    alias: {
      '$src/*': 'src/*',
    },
  },
};

export default config;

(don't forget to npm i any adapters before using!)

Finally, let's talk about Docker. As it's a popular deployment method, here's a multi-arch Dockerfile I've written, with a build stage, deploy stage, and some healthchecks.

It's also published to DockerHub (under lissy93/devolio), so you should be able to use it with docker run -p 3000:80 lissy93/devolio - or use the docker-compose.yml as an template for your own container.

The Project

I've had to skip over a few details for the sake of brevity, but all the code is available on GitHub, so that should clear up anything that doesn't yet make sense - if it's still not, feel free to ask below :)

There's a few extra features that I also added:

Extracted all data into a config file, for easy usage, and made it stylable with custom colors and themes
I used a store to keep track of posts (in BlogStore.ts)
Added functionality for loading and combining multiple RSS feeds, as well as sorting and filtering results
Added internationalization functionality (in Language.ts)
I built a page to showcase your projects, with data fetched from your GitHub, via their API
And a contact page, with an email form, social media links and GPG keys
Added more adapters for deploying to various cloud services, and wrote a Dockerfile

Here's some screenshots (with just the plain theme)

Blog Page (fetched from RSS)

Projects Page (fetched from GitHub)

Social Media Links (stats fetched from APIs)

I do plan on expanding the project, add some features and make it into an easily configurable, themeable developer portfolio website, that anyone can easily use. If you'd like to see the updates, drop the repo a star on GitHub :)

And if you'd like to contribute to the source, it's here (MIT) on GitHub, and I'll drop you a mention in the credits if you're able to submit a PR!

Thanks for sticking by this far! I know this post has been quite long, and is a little different from my usual format. If you've got any feedback, questions, suggestions, or comments - drop them below and I'll reply :)

If you like this kind of stuff, consider following for more :)

CLI tools you won't be able to live without 🔧

Alicia Sykes — Thu, 19 Jan 2023 01:30:42 +0000

As developers, we spend a lot of our time in the terminal. There's a lot of helpful CLI tools, which can make your life in the command line easier, faster and generally more fun.

This post outlines my top 50 must-have CLI tools, which I've come to rely on. If there's anything I'm missing - do let me know in the comments :)

At the end of the article, I've included some scripts to help you automate the installation and updating of these tools on various systems/ distros.

↕️ Contents (click to expand)

Utils
- thefuck - Auto-correct miss-typed commands
- zoxide - Easy navigation (better cd)
- tldr - Community-maintained docs (better man)
- scc - Count lines of code (better cloc)
- exa - Listing Files (better ls)
- duf - Disk Usage (better df)
- aria2 - Download Utility (better wget)
- bat - Reading Files (better cat)
- diff-so-fancy - File Comparisons (better diff)
- entr - Watch for changes
- exiftool - Reading + writing metadata
- fdupes - Duplicate file finder
- fzf - Fuzzy file finder (better find)
- hyperfine - Command benchmarking
- just - Modern command runner (better make)
- jq - JSON processor
- most - Multi-window scroll pager (better less)
- procs - Process viewer (better ps)
- rip - Deletion tool (better rm)
- ripgrep - Search within files (better grep)
- rsync - Fast, incremental file transfer
- sd - Find and replace (better sed)
- tre - Directory hierarchy (better tree)
- xsel - Access the clipboard
CLI Monitoring and Performance Apps
- bandwhich - Bandwidth utilization monitor
- ctop - Container metrics and monitoring
- bpytop - Resource monitoring (better htop)
- glances - Resource monitor + web and API
- gping - Interactive ping tool (better ping)
- dua-cli - Disk usage analyzer and monitor (better du)
- speedtest-cli - Command line speed test utility
- dog - DNS lookup client (better dig)
CLI Productivity Apps
- browsh - CLI web browser
- buku - Bookmark manager
- cmus - Music browser / player
- cointop - Track crypto prices
- ddgr - Search the web from the terminal
- khal - Calendar client
- mutt - Email client
- newsboat - RSS / ATOM news reader
- rclone - Manage cloud storage
- taskwarrior - Todo + task management
- tuir - Terminal UI for Reddit
CLI Dev Suits
- httpie - HTTP / API testing testing client
- lazydocker - Full Docker management app
- lazygit - Full Git management app
- kdash - Kubernetes dashboard app
- gdp-dashboard - Visual GDP debugger
CLI External Sercvices
- ngrok - Reverse proxy for sharing localhost
- tmate - Share a terminal session via internet
- asciinema - Recording + sharing terminal sessions
- navi - Interactive cheat sheet
- transfer.sh - Fast file sharing
- surge - Deploy a site in seconds
- wttr.in - Check the weather
CLI Fun
- cowsay - Have an ASCII cow say your message
- figlet - Output text as big ASCII art text
- lolcat - Make console output raibow colored
- neofetch - Show system data and ditstro info
Installations and Management
Conclusion
- What wasn't included
- Credit
- Feedback
- Find More

Utils

`thefuck` - Auto-correct miss-typed commands

thefuck is one of those utilities you won't be able to live without once you've tried it. Whenever you mis-type a command and get an error, just run fuck and it'll auto-correct it. Use up/down to choose a correction, or just run fuck --yeah to just execute the most likely immediately.

Install



# MacOS (via Homebrew)
brew install thefuck

# Arch Linux
sudo pacman -S thefuck

# FreeBSD
pkg install thefuck

`zoxide` - Easy navigation (better cd)

z lets you jump to any directory without needing to remember or specify its full path. It remembers which directories you've visited, so you can jump around quickly - you don't even need to type the full folder name. It also has an interactive selection option, using fzf so you can live-filter directory results

Install



# MacOS (via Homebrew)
brew install zoxide

# Arch Linux
sudo pacman -S zoxide

# Debian / Ubuntu
sudo apt install zoxide

# FreeBSD
pkg install zoxide

# Other (via Rust Creates)
cargo install zoxide --locked

`tldr` - Community-maintained docs (better `man`)

tldr is a huge collection of community-maintained man pages. Unlike traditional man pages, they're summarized, contain useful usage examples and nicely colourized for easy reading

Install



# MacOS (via Homebrew)
brew install tldr

# Other (via NPM)
npm install -g tldr

`scc` - Count lines of code (better `cloc`)

scc gives you a breakdown of number of lines of code written in each language for a specific directory. It also shows some fun stats, like estimated cost to develop and complexity info. It's incredibly fast, very accurate and has support for a wide range of languages

Install



# MacOS (via Homebrew)
brew install scc

# Other (via go)
go install github.com/boyter/scc/v3@latest

`exa` - Listing Files (better `ls`)

exa is a modern Rust-based replacement for the ls command, for listing files. It can display file-type icons, colors, file/folder info and has several output formats - tree, grid or list

Install



# MacOS (via Homebrew)
brew install exa

# Arch Linux
sudo pacman -S exa

# Debian / Ubuntu
sudo apt install exa

`duf` - Disk Usage (better `df`)

duf is great for showing info about mounted disks and checking free space. It produces a clear and colorful output, and includes options for sorting and customizing results.

Install



# MacOS (via Homebrew)
brew install duf

# Arch Linux
sudo pacman -S duf

# Debian / Ubuntu
sudo apt install duf

# FreeBSD
pkg install duf

`aria2` - Download Utility (better `wget`)

aria2 is a lightweight, multi-protocol, resuming download utility for HTTP/HTTPS, FTP, SFTP, BitTorrent and Metalink, with support for controlling via an RPC interface. It's incredibly feature rich, and has tons of options. There's also ziahamza/webui-aria2 - a nice web interface companion.

Install



# MacOS (via Homebrew)
brew install aria2

# Arch Linux
sudo pacman -S aria2

# Debian / Ubuntu
sudo apt install aria2

`bat` - Reading Files (better `cat`)

bat is a clone of cat with syntax highlighting and git integration. Written in Rust, it's very performant, and has several options for customizing output and theming. There's support for automatic piping and file concatenation

Install



# MacOS (via Homebrew)
brew install bat

# Arch Linux
sudo pacman -S bat

# Debian / Ubuntu
sudo apt install bat

`diff-so-fancy` - File Comparisons (better `diff`)

diff-so-fancy gives you better looking diffs for comparing strings, files, directories and git changes. The change highlighting makes spotting changes much easier, and you can customize the output layout and colors

Install



# MacOS (via Homebrew)
brew install diff-so-fancy

# Arch Linux
sudo pacman -S diff-so-fancy

# Debian / Ubuntu
sudo apt install diff-so-fancy

`entr` - Watch for changes

entr lets you run an arbitrary command whenever file changes. You can pass a file, directory, symlink or regex to specify which files it should watch. It's really useful for automatically rebuilding projects, reacting to logs, automated testing, etc. Unlike similar projects, it uses kqueue(2) or inotify(7) to avoid polling, and improve performance

Install



# MacOS (via Homebrew)
brew install entr

# Arch Linux
sudo pacman -S entr

# Debian / Ubuntu
sudo apt install entr

`exiftool` - Reading + writing metadata

ExifTool is handy utility for reading, writing, stripping and creating meta information for a wide variety of file types. Never accidentally leak your location when sharing a photo again!

`fdupes` - Duplicate file finder

jdupes is used for identifying and/or deleting duplicate files within specified directories. It's useful for freeing up disk space when you've got two or more identical files

`fzf` - Fuzzy file finder (better `find`)

fzf is an extremely powerful, and easy to use fuzzy file finder and filtering tool. It lets you search for a string or pattern across files. fzf also has plugins available for most shells and IDEs, for showing instant results while searching. This post by Alexey Samoshkin highlights some of it's use cases.

Install



# MacOS (via Homebrew)
brew install fzf

# Arch Linux
sudo pacman -S fzf

# Debian / Ubuntu
sudo apt install fzf

`hyperfine` - Command benchmarking

hyperfine makes it easy to accurately benchmark and compare arbitrary commands or scripts. It takes care of warm-up runs, clearing the cache for accurate results and preventing interference from other programs. It can also export results as raw data and generate charts.

Install



# MacOS (via Homebrew)
brew install hyperfine

# Arch Linux
sudo pacman -S hyperfine

# Debian / Ubuntu
sudo apt install hyperfine

`just` - Modern command runner (better `make`)

just is similar to make but with some nice additions. It let's you group your projects commands together into recopies, which can be easily listed and run. Supports aliases, positional arguments, different shells, dot env integration, string interprulation, and pretty much everything else you could need

Install



# MacOS (via Homebrew)
brew install just

# Arch Linux
sudo pacman -S just

# Debian / Ubuntu
sudo apt install just

`jq` - JSON processor

jq is like sed, but for JSON - you can use it to slice and filter and map and transform structured data with ease. It can be used to write complex queries to extract or manipulate JSON data. There's also a jq playground that you can use to try it out, or formulate queries with live feedback

`most` - Multi-window scroll pager (better less)

most is a pager, for reading through long files or command outputs. most supports multi-windows and has the option to not wrap text

`procs` - Process viewer (better ps)

procs is an easy to navigate process viewer, it has colored highlighting, makes sorting and searching for processes easy, has tree view and updates in real-time

`rip` - Deletion tool (better rm)

rip is a safe, ergonomic and performant deletion tool. It let's you intuitively remove files and directories, and easily restore deleted files

`ripgrep` - Search within files (better `grep`)

ripgrep is a line-oriented search tool that recursively searches the current directory for a regex pattern. It can ignore the contents of .gitignore and skip binary files. It's able to search within compressed archives, or only search specific extension, and understands files using various encoding methods

`rsync` - Fast, incremental file transfer

rsync lets you copy large files locally or to or from remote hosts or external drives. It can be used to keep files across multiple locations synced, and is perfect for creating, updating and restoring backups

`sd` - Find and replace (better `sed`)

sd is an easy, fast and intuitive find and replace tool, based on string literals. It can be executed on a file, an entire directory, or any piped text

`tre` - Directory hierarchy (better `tree`)

tre outputs a tree stye list of files for your current or a specified directory, with colors. When running with the -e option, it numbers each item, and creates a temporary alias that you can use to quickly jump to that location

`xsel` - Access the clipboard

xsel let's you read and write to the X Selection clipboard via the command line. It's useful for piping command output to the clipboard, or a copied data into a command

CLI Monitoring and Performance Apps

`bandwhich` - Bandwidth utilization monitor

Show bandwidth usage, connection information, outgoing hosts and DNS queries in real-time

`ctop` - Container metrics and monitoring

Like top, but for monitoring resource usage for running (Docker and runC) containers. It shows real-time CPU, memory and network bandwidth as well as the name, status and ID of each container. There's also a built-in log viewer, and options to manage (stop, start, exec, etc) containers

`bpytop` - Resource monitoring (better `htop`)

bpytop is a fast, interactive, visual resource monitor. It shows top running processes, recent CPU, mem, disk and network history. From the interface you can navigate, sort and search - there's also support for custom color themes

`glances` - Resource monitor + web and API

glances is another resource monitor, but with a different feature set. It includes a fully responsive web view, a REST API and historical monitoring. It's easily extendable, and can be integrated with other services

`gping` - Interactive ping tool (better `ping`)

gping can run ping tests on multiple hosts, while showing results in real-time graph. It can also be used to monitor execution time, when used with the --cmd flag

`dua-cli` - Disk usage analyzer and monitor (better `du`)

dua-cli let's you interactively view used and available disk space for each mounted drive, and makes freeing up storage easy

`speedtest-cli` - Command line speed test utility

speedtest-cli just runs an internet speed test, via speedtest.net - but straight from the terminal :)

`dog` - DNS lookup client (better `dig`)

dog is an easy-to-use DNS lookup client, with support for DoT and DoH, nicely coloured outputs and the option to emit JSON

CLI Productivity Apps

Surf the web, play music, check emails, manage calendars, read the news and more, all without leaving the terminal!

`browsh` - CLI web browser

browsh is a fully interactive, real-time, and modern text-based browser rendered to TTYs and browsers. It supports both mouse and keyboard navigation, and is surprisingly feature rich for a purely terminal based application. It also mitigates battery drain issues that plague modern browsers, and with support for MoSH, you can experience faster load times due to reduced bandwidth

`buku` - Bookmark manager

buku is a terminal-based bookmark manager, with tons of configuration, storage and usage options. There's also an optional web UI and browser plugin, for accessing your bookmarks outside of the terminal

`cmus` - Music browser / player

cmus is terminal music player, controlled with keyboard shortcuts. It has support for a wide range of audio formats and codecs, and allows organising tracks into playlists and applying playback settings

`cointop` - Track crypto prices

cointop show current crypto prices, and track the price history of your portfolio. Supports price alerts, historical charts, currency conversion, fuzzy searching, and much more. You can try the demo via the web at cointop.sh, or by running ssh cointop.sh

`ddgr` - Search the web from the terminal

ddgr is like googler, but for DuckDuckGo. It's fast, clean and easy, with support for instant answers, search completion, search bangs, and advanced search. It respects your privacy by default, and also has HTTPS proxy support, and works with Tor

`micro` - Code editor (better `nano`)

micro is an easy to use, fast and extendable code editor with mouse support. Since it's packaged into a single binary, installation is as simple as curl https://getmic.ro | bash

`khal` - Calendar client

khal is a terminal calendar app, which shows upcoming events, month and agenda views. You can sync it with any CalDAV calendar, and add, edit and remove events directly

`mutt` - Email client

mut is a classic, a terminal based mail client for sending, reading and managing emails. It supports all mainstream email protocols and mailbox formats, allows for attachments, BCC/CC, threads, mailing lists and delivery status notifications

`newsboat` - RSS / ATOM news reader

newsboat is an RSS feed reader and aggregator, for reading the news, blogs and following updates directly from the terminal

`rclone` - Manage cloud storage

rclone is a handy utility for syncing files and folders to various cloud storage providers. It can be either invoked directly from the command line, or easily integrated into a script as a replacement for heavy desktop sync apps

`taskwarrior` - Todo + task management

task is a CLI task management/ todo app. It's both simple and unobtrusive, but also incredibly powerful and scalable, with advanced organisation and query features built in. There's also a lot (700+!) of extra plugins for extending it's functionality and integrating with third-party services

`tuir` - Terminal UI for Reddit

tuir is a great one if you want to look like you're working, while actually browsing Reddit! It's got intuitive keybindings, custom themes, and can render images and multi-media content too. There's also haxor for hacker news

CLI Dev Suits

`httpie` - HTTP / API testing testing client

httpie is a HTTP client, for testing, debugging and using APIs. It supports everything you'd expect - HTTPS, proxies, authentication, custom headers, persistent sessions, JSON parsing. Usage is simple with an expressive syntax and colourized output. Like other HTTP clients (Postman, Hopscotch, Insomnia, etc) HTTPie also includes a web UI

`lazydocker` - Full Docker management app

lazydocker is a Docker management app, that lets you view all containers and images, manage their state, read logs, check resource usage, restart/ rebuild, analyse layers, prune unused containers, images and volumes, and so much more. It saves you from needing remember, type and chain multiple Docker commands.

`lazygit` - Full Git management app

lazygit is a visual git client, on the command line. Easily add, commit and puch files, resolve conflicts, compare diffs, manage logs, and do complex operations like squashes and rewinds. There's keybindings for everything, colors, and it's easily configurable and extenable

`kdash` - Kubernetes dashboard app

kdash is an all-in-one Kubernetes management tool. View node metrics, watch resources, stream container logs, analyse contexts and manage nodes, pods and namespaces

`gdp-dashboard` - Visual GDP debugger

gdp-dashboard adds a visual element to the GNU Debugger, for debugging C and C++ programs. Easily analyse memory, step through breakpoints, and view registers

CLI External Sercvices

`ngrok` - Reverse proxy for sharing localhost

ngrok safely* exposes your localhost to the internet behind a unique URL. This lets you share what you're working on with you're remote colleagues, in real-time. Usage is very simple, but it's also got a lot of advanced features for things like authentication, webhooks, firewalls, traffic inspection, custom/ wildcard domains and much more

`tmate` - Share a terminal session via internet

tmate let's you instantly share a live terminal session with someone elsewhere in the world. It works across different systems, supports access control/ auth, can be self-hosted, and has all the features of Tmux

`asciinema` - Recording + sharing terminal sessions

asciinema is very useful for easily recording, sharing and embedding a terminal session. Great to showcase something you've built, or to show the command-line steps for a tutorial. Unlike screenrecording videos, the user can copy-paste the content, change the theme on the fly and control playback

`navi` - Interactive cheat sheet

navi allows you to browse through cheatsheets and execute commands. Suggested values for arguments are dynamically displayed in a list. Type less, reduce mistakes and save yourself from having to memorise thousands of commands. It integrates with tldr and cheat.sh to get content, but you can also import other cheatsheets, or even write your own

`transfer.sh` - Fast file sharing

transfer makes uploading and sharing files really easy, directly from the command line. It's free, supports encryption, gives you a unique URL, and can also be self-hosted.
I've written a Bash helper function to make usage a bit easier, you can find it here or try it out by running bash <(curl -L -s https://alicia.url.lol/transfer)

`surge` - Deploy a site in seconds

surge is a free static hosting provider, that you can deploy to directly from the terminal in a single command, just run surge from within your dist directory! It supports custom domains, auto SSL certs, pushState support, cross-origin resource support - and it's free!

`wttr.in` - Check the weather

wttr.in is a service that displays the weather in a format that's digestible in the command line. Just run curl wttr.in or curl wttr.in/London to try it out. There's URL parameters to customise what data is returned, as well as the format

CLI Fun

`cowsay` - Have an ASCII cow say your message

cowsay is a configurable talking cow. It's based off the original by Tony Monroe

`figlet` - Output text as big ASCII art text

figlet outputs text as ASCII art

`lolcat` - Make console output raibow colored

lolcat makes any text passed to it rainbow coloured

`neofetch` - Show system data and ditstro info

neofetch prints distro and system info (so you can flex that you use Arch btw on r/unixporn)

As an example, I'm using cowsay, figlet, lolcat and neofetch to create a custom time-based MOTD shown to the user when they first log in. It greets them by their name, shows server info and time, date, weather and IP. Here's the source code.

Installations and Management

Most of us have a core set of CLI apps and utils that we rely upon. Setting up a new machine, and individually installing each program would get tiresome very quickly. So the task of installing and updating your terminal apps is the perfect candidate for automation. Here are some example scripts I've written, which can be easily dropped into your dotfiles or just run independently to ensure you're never missing an app.

For MacOS users, the easiest method is using Homebrew. Just create a Brewfile (with touch ~/.Brewfile), then list each of your apps, and run brew bundle. You can keep your package list backed up, by putting it in a Git repo. Here's an example one, to get you started: https://github.com/Lissy93/Brewfile

On Linux, you usually want to use the native package manager (e.g. pacman, apt). As an example, here's a script to install the above apps on Arch Linux systems

Desktop apps on Linux can be managed in a similar way, via Flatpak. Again, here's an example script :)

Conclusion

... So that's it - a list of handy CLI apps, and a method for installing and keeping them up-to-date across your systems.

Hopefully some of these will be useful to some of you :)

I'd love to hear what you're favourite CLI apps are, let me know in the comments below!

Additional Info

What wasn't included

This list doesn't include the basics, like Vim, Tmux, Ranger, ZSH, Git, etc - which you're likely already using
I've also not included anything too niche, or only specific to a small number of users
Nothing system-specific, or that isn't cross-platform (Linux/ Unix, MacOS) is included
And I've not included apps which relate to the terminal, but are not CLI apps (like terminal emulators)
For most of the projects listed, there's a plethora of alternatives that achieve similar things, for brevity those also weren't included

Credit

Huge kudos to the authors, and communities behind each of these apps. Without them and their hard work, our life in the command line would be much less awesome. Where possible, I've tried to credit the authors, but if I've missed any - let me know below, and I'll push an update

Feedback

What have I missed? I'd love to hear your favourite CLI apps, especially if there's something awesome that I've missed!

I'd also like to hear your thoughts and suggestions - I'm always looking to improve :)

Badges

Here's the script that I made to generate the author, language and GitHub star badges:

Repo Badge Generator

Lissy93 / repo-badge-maker

🛡️ Very, very quick script to generate repo badges for blog posts

🛡️ Repo Badge Generator

Quick script to generate embedable badges for a repository
repo-badges.as93.net

About

I made this to quickly generate the project links, for this post: CLI tools you won't be able to live without 🔧

Just a simple script to quickly generate embedable markdown badges to show repository info.
Data is fetched from the GitHub API, and badges are served up using the Shields.io API.
Includes a badge for + link to: the author, the repo + star count, and the language used.
Paste in the URL to a repo, hit 'Generate', and results will be copied to your clipboard.

Deployment

It's just a static HTML page, so serve it with any web server, CDN or static host.
There's a demo hosted on GH Pages, at: lissy93.github.io/repo-badge-maker

Report an Issue

Found something that's not working? Open an issue, and describe the problem, steps to reproduce alond with…

View on GitHub

Find More

If you were enjoying this, I recommend also checking out:

terminals-are-sexy by Nikolaos Kamarinakis
awesome-shell by Caleb Xu
awesome-cli-apps by Adam Garrett-Harris

If you're new to the command line, then The Art of Command Line by Joshua Levy is an excellent resource, as is the Bash Guide by Adnan Ahmed.

And if you are looking for inspiration, you'll love r/unixporn ⚡

If you like this kind of stuff, consider following for more :)

20 Git Commands you (probably) didn't know about 🧙‍♂️

Alicia Sykes — Sun, 18 Dec 2022 13:32:40 +0000

If you've ever browsed the git manual (or run man git), then you'll have noticed there's a whole lot more to git than what most of us use on a daily basis. A lot of these commands are incredibly powerful and can make your life a lot easier (others are a bit niche, but still good to know).

This post outlines 20 of my favourite under-used git features, which you can use to level up your development process, impress your colleagues, help you answer git interview questions, and most importantly - have fun with!

Contents (and TL;DR)

Git Web - Open builtin GUI
Git Notes - Attach extra info to commits
Git Bisect - Debug like a pro
Git Grep - Search for anything
Git Archive - Compress project for sharing
Git Submodules - Import other repos into yours
Git Bugreport - Compile bug report with system info
Git Fsck - Verify and recover unreachable objects
Git Stripspace - Remove trailing whitespaces
Git Diff - Compare changes between two files
Git Hooks - Execute script when a git command is run
Git Blame - Show who wrote a given line
Git Large File Storage - Store big files in git
Git Garbage Collection - Optimize your git repo
Git Show - Easily inspect any git object
Git Describe - Give readable name based on last tag
Git Tag - Create version tags at specific points
Git Reflog - List all git actions made on a repo
Git Log - View commit log, and branch diagrams
Git Cherry Pick - Pull a feature into your branch
Git Switch - Quickly jump between branches
Bonus - Extend git with more commands!

Git Web

Run git instaweb to instantly browse your working repository in gitweb

Git has a built-in web-based visualiser for browsing local repositories, which lets you view and manage your repo via a GUI in the browser. It's packed with useful features, including:

Browsing and stepping through revisions and inspecting diffs, file contents and metadata
Viewing commit logs, branches, directories, file history, and attached data visually
Generating RSS or Atom feeds of commits and repository activity logs
Searching commits, files, changes and diffs

To open it, just run git instaweb from within your repo. Your browser should pop open, and load http://localhost:1234. If you don't have Lighttpd installed, you can specify an alternative web server with the -d flag. Other options can be configured either via flags (like -p for port, -b for the browser to open, etc), or under the [instaweb] block in your git config.

There's also the git gui command, which can open up a GUI-based git app

Git Notes

Use git notes to add extra info to commits

Sometimes you need to attach additional data to a git commit (beyond just the changes, message, date-time and author info).

The notes are stored within .git/refs/notes, and since that's separate from the commit object data, you can modify the notes associated with a commit at anytime, without the SHA-1 hash changing.

You can view notes with git log, using most git GUI apps, or with the git notes show command. Some git hosts also show notes in the commit view (although GH no longer displays notes).

Git Bisect

With git bisect you can find the commit that introduced a bug using binary search

This is one of the most powerful, yet easy to use git commands- bisect is an absolute life saver when it comes to debugging. After starting a bisect, it checks out commits for you, and you tell it weather that commit is good (no bug), or bad (bug introduced), which lets you narrow down the the earliest commit where the bug is present.

To get started, run git bisect start then pass it a known good commit with git bisect good <commit-hash> and a known bad one (defaults to current) with git bisect bad <optional-hash>. It will then checkout the commit in-between the good and bad commits, then you specify weather the bug is present with either git bisect good or git bisect bad. It will then repeat the process, checking out a commit in the center of the bad and good, all the way until you've found the exact commit that introduced the bug. Cancel anytime with git bisect reset.

There's much more to the bisect command, including replays, viewing commits, skipping, so it's worth checking out the docs next time your debugging.

Git Grep

Use git grep to search for code, files, commits or anything else across your repo

Ever find yourself needing to search for a string anywhere within a git project? With git grep you can easily search for any string, or RegEx throughout your project, and across branches (like a more powerful Ctrl + F!).

git grep <regexp> <ref>

It includes plenty of options to narrow down your search, or specify results format. For example, use -l to only return file names, -c to specify number of matches per file to return, -e to exclude results matching a condition, --and to specify multiple conditions, -n to search with line number.

Since git grep is regex-compatible, you can get much more advanced with the string your searching for.
You can also use it to specify a file extension, like git grep 'console.log' *.js which will show all console.logs from within JavaScript files

The second parameter is a ref, and can be a branch name, commit, range of commits, or anything else. E.g. git grep "foo" HEAD~1 will search the previous commit.

Git Archive

Use git archive to combine an entire repo into a single file

When sharing or backing up a repository, it's often preferred to store it as a single file. Using git archive will include all repo history, so it can be easily extracted back to it's original form. The command also includes a lot of additional options, so you can customise exactly what files are and aren't included in the archive.

git archive --format=tar --output=./my-archive HEAD

Git Submodules

Use git submodule to pull any other repository into yours

In git, submodules let you mount one repo into another, and is commonly used for core dependencies or splitting components into separate repositories. For more info, see this post.

Running the following command will pull a module into the specified location, and also create a .gitmodules file so that it's always downloaded when the repo is cloned. Use the --recursive flag to include sub-modules when cloning the repo.

git submodule add https://github.com/<user>/<repo> <path/to/save/at>

There's also git subtree, which does a similar thing, but without the need for metadata files.

Git Bug Report

Use git bugreport to compose a bug ticket, including git and system info

This command will capture system info, and then open up a standard bug template (steps to reproduce, actual + expected output, etc). The completed file should be a very complete bug report, with all necessary info captured.

This is very handy if your a maintainer for an open source package and asking a user (developer) to raise a bug report, as it ensures all necessary data is included.

And if you are raising a bug report to the core git system, you can also run the git diagnose command, and then raise your issue here.

Git Fsck

Use git fsck to check all objects, or recover unreachable ones

Although not often needed, sometimes you may have to verify the objects stored by git. This is where fsck (or File System ChecK) comes in, it tests the object database and verifies the SHA-1 ID of all objects and the connections they make.

It can also be used alongside the --unreachable flag to find objects that are no longer reachable from any named reference (since unlike other commands, it includes everything in .git/objects).

Git Stripspace

Use git stripspace to format whitespaces within a given file

Best practice is to avoid trailing whitespaces at the end of lines, avoid having multiple consecutive blank lines, avoid empty lines from beginning and end of an input, and end each file with a new line. There's plenty of language-specific tools which do this automatically for you (like prettier), but Git also has this functionality builtin.

It's intended for metadata (commit messages, tags, branch descriptions, etc), but also works if you pipe a file to it, then pipe the response back to a file. E.g. cat ./path-to-file.txt | git stripspace or git stripspace < dirty-file.txt > clean-file.txt

You can also use this to remove comments (with --strip-comments), or even comment out lines (with --comment-lines).

Git Diff

With git diff you can compare the difference between 2 sets of code

You're probably aware that you you can run git diff to show all changes since the last commit, or use git diff <commit-sha> to compare either 2 commits, or 1 commit to the HEAD. But there's much more you can do with the diff command.

You can also use it to compare any two arbitrary files, with diff file-1.txt file-2.txt (no more visiting diffchecker.com!)

Or compare 2 branches, or refs with each other, using git diff branch1..branch2

Note that a double dot (..) is the same as a space and indicates the diff input should be the tip of the branches, but you can also use a triple dot (...) to convert the first parameter into a ref of the shared common ancestor commit between the two diff inputs - very useful! If you want to only compare a single file across branches, just pass the files name in as the third argument.

You may want to see all changes made within a given date range, for this use git diff HEAD@{7.day.ago} HEAD@{0} (for the last week), again this can be paired up with a filename, branch names, specific commits or any other ref.

There's also the git range-diff command, which provides a simple interface for comparing commit ranges.

There's much more to the git diff tool (as well as the option of using your own diff checker), so I recommend checking out the docs.

Git Hooks

Use hooks to execute command or run scripts when a given get action occurs

Hooks let you automate pretty much anything. For example: ensuring standards are met (commit message, branch name, patch size), code quality (tests, lint), appending additional info to a commit (user, device, ticket ID), calling a webhook to record an event or run a pipeline, etc.

There's pre and post hooks available for most git events, like commit, rebase, merge, push, update, applypatch, etc.

Hooks are stored in .git/hooks (unless you configure them elsewhere with git config core.hooksPath), and can be tested with the git hook command. Since they're just shell files, they can be used to run any command.

Hooks aren't pushed to the remote repository, so to share and manage them across your team, you'll need to use a hook manager, like lefthook or husky. There's also several 3rd-party tools, which make managing hooks easier, I recommend overcommit.

Remember, hooks can always be skipped (with the --no-verify flag), so never rely purely on hooks, especially for anything security related.

Git Blame

Use git blame to show author info for a specific revision and line

A classic, quickly find out who wrote a specific line of code (aka which of your co-workers to blame for the bug!). But it's also useful to determine at which point in time something changed and inspect that commit and associated metadata.

For example, to view author and commit info for line 400 to 420 of index.rs, you'd run:

git blame -L 400,420 index.rs

Git LFS

Store large files using git lfs to not bog down your repo

Often your project will contain larger files (such as databases, binary assets, archives or media files), which would slow down the git workflow and max out usage limits. That's where Large File Storage comes in - it enables you to store these large assets elsewhere, while keeping them trackable with git and maintaining the same access controls/ permissions. LFS works by replacing these larger files with text pointers that are tracked within git.

To use it, just run git lfs track <file glob>, which will update your .gitattributes file. You can specify files by their extension (e.g. *.psd), directory, or individually. Running git lfs ls-files to view a list of tracked LFS files.

Git GC

Use git gc to optimize your repository

Over time git repos accumulate various types of garbage, which take up disk space, and slow down actions. That's where the built-in garbage collector comes in. Running git gc will remove orphaned and inaccessible commits (with git prune), compress file revisions and stored git objects, as well as some other general house keeping tasks like packing refs, pruning reflog, revere metadata or stale working trees and updating indexes.

Adding the --aggressive flag will aggressively optimize the repository, throwing away any existing deltas and re-computing them, this takes much longer to run but may be needed if you've got a large repository.

Git Show

Use git show to easily inspect any git object

Outputs objects (blobs, treees, tags or commits) in an easily readable form. To use, just run git show <object>. You'll likely also want to append the --pretty flag, for a clearer output, but there's many other options available to customize the output (with --format), so this command can be extremely powerful for displaying exactly what you need.

An instance that this is very useful for, is previewing a file in another branch, without switching branches. Just run git show branch:file

Git Describe

Use git describe to find the latest tag reachable from a commit, and give it a human-readable name

Run git describe and you'll see a human-readable string made from combining the last tag name, with the current commit, to generate a string. You can also pass a specific tag to it,

Note that you must have created tags for this to work, unless you append the --all flag. Git describe will also only use annotated tags by default, so you must specify the --tags flag to make it use lightweight tags as well.

Git Tag

Tag a specific point in your repo's history using git tag

It's often useful to be able to tag specific, important points in a repository’s history most commonly used to denote versions of releases. Creating a tag is as simple as git tag <tagname>, or you can tag a historical commit with git tag -a v4.2.0 <commit sha>. Like with commits, you can include a message alongside a tag, using -m.

Don't forget to push your tag to remote, with git push origin <tagname>.
To list all tags, just run git tag, and optionally use -l for a wildcard search.
You'll then be able to checkout a specific tag, with git checkout <tagname>

Git Reflog

List all updates made on your repo using git reflog

Git keeps track of updates to the tip of branches using a mechanism called reference logs, or "reflogs". Various events are tracked, including: clone, pull, push, commit, checkout and merge. It's often useful to be able to find an events reference, as many commands accept a ref as a parameter. Just run git reflog to view recent events on HEAD.

One thing that reflog is really useful for is recovering lost commits. Git never really loses anything, even when rewriting history (like rebasing or commit amending). Reflog allows you to go back to commits even though they are not referenced by any branch or tag.

By default reflog uses HEAD (your current branch), but you can run reflog on any ref. For example git reflog show <branch name>, or to see stashed changes with git reflog stash. Or show all references with git reflog show --all

Git Log

Use git log to view a list of commits

You're likely already familiar with running git log to view a list of recent commits on your current branch. But there's a few things more you can do with git log.

Using git log --graph --decorate --oneline will show a nice neat commit graph along with ref pointers.

You also often need to be able to filter logs based on various parameters, the most useful of which are:

git log --search="<anything>" - Search logs for specific code changes
git log --author="<pattern>" - Show log only for specific author(s)
git log --grep="<pattern>" - Filter log using search term or regex
git log <since>..<until> - Show all commits between two references
git log -- <file> - Show all commits made only to a specific file

Or, just run git shortlog for a summerized list of commits.

Git Cherry Pick

Use git cherry-pick to pick specified commit(s) by reference and append them to the working HEAD

Sometimes you need to pull a specific commit from elsewhere, into your current branch. This can be very useful for applying hot fixes, undoing changes, restoring lost commits and in certain team collaboration settings. Note that often traditional merges are better practice, since cherry picking commits can cause duplicate commits in the log.

Usage is straightforward, just run git cherry-pick <commit-hash>. This will pull the specified commit into your current branch.

Git Switch

Use git switch

Moving between branches is something that we do often, the switch command is like a simplified version of git checkout, it can be used to create and navigate between branches, but unlike checkout does not copy modified files when you move between branches.

Similar to checkout -b, with the switch command you can append the -c flag to create a new branch, and jump strait into it, e.g. git switch -c <new branch>. And running git switch - will discard any experimental changes you've made, and return you to your previous branch.

Git Standup

Use git standup to recall what you did on the last working day , based on git commits

I've put this one at the end, as it's not included with most git clients, but you can easily install it either with your systems package manager, using a 1-line curl script, or by building from source.

If your boss requires you do a daily standup, to give updates on yesterdays work, but you can never remember what you actually did - this one is for you! It'll show a nicely formatted list of everything done in a given time frame. Usage is simple, just run git standup, or use these options to specify what data should be shown (author, timeframe, branches, etc.

Bonus

Git can be easily extended with add-ons, to add extra commands that do useful tasks. One of the most complete extensions is git-extras by @tj. It gives you 70+ extra commands to automate common git jobs.

For a list of more useful git add-ons, see stevemao/awesome-git-addons.

If you're working with GitHub repos, then the GitHub CLI let's you do common tasks (managing PRs, issues, code reviews, etc) from the command line.

If you like this kind of stuff, consider following for more :)

Super Useful CSS Resources 🌈

Alicia Sykes — Sat, 03 Dec 2022 18:00:23 +0000

A collection of 70 hand-picked, web-based tools which are actually useful.
Each will generate pure CSS without the need for JS or any external libraries.

Full credit goes to the authors behind each of these apps (where possible I've linked to their GH/ socials)

Property Generators
Animations
Backgrounds
Color Tools
Typography
Loaders
Layouts
Informative

Property Generators

1. Neumorphism

Generate Soft-UI CSS styles using inset shadows, by @adamgiebl

2. Shaddows Brumm

Make and preview beautifully smooth shadows, by @brumm

3. Fancy Border Radius

Generate cool shaped objects with border-radius, by @9Elements. Similar to BlobMaker

4. Glow Generator

Generate pure CSS, cross-browser glow effects

5. Clothoid Corners

Generates clothoid rounded corners by CSS clip-path, by Takehiko Ono

6. Glassmorphism

Build semi-transparent, blurred glass-like backgrounds. Similar to ui.glass/generator

7. Clipy

Generate complex shaped objects using clip-path, by @bennettfeely

8. CSS Filters

Generate and preview pure CSS Instagram-style photo filters, by @ghosh

9. Base64 Image

Encode an image directly in your CSS in Base64

10. Quantity Queries

Generate quantity-based CSS queries, by @drewminns

Animations

11. Animista

CSS animation playground and generator, by Ana T

12. Cubic-Bezier

Preview and generate advanced cubic bezier animations, by @LeaVerou

13. Keyframes

Advanced keyframe animation maker, by @mitchas

14. Wait Animate

Use animation-delay to simulate delays, by @will-stone

15. Transition.Style

Copy-paste transition animations, by @argyleink

Backgrounds

16. Hero Patterns

Find and customize simple pure-CSS patterned backgrounds, by @steveschoger

17. Haikei

Generate unique organic SVG banners and backgrounds (similar to Shape Divider)

18. Pattern Generator

Advanced pattern generator

19. CSS Pattern

Collection of pre-made pure CSS patterned backgrounds, by @Afif13

20. Patternizer

Build striped backgrounds, by @matthewlein

21. Patternify

Build your own old-school pattern, by @SachaGreif

22. Animated BG

Generate blurred animated pure CSS backgrounds, by @Vincenius

23. Trianglify

Geometric background designer (note: only semmi-free), by @qrohlf

24. Animated Backgrounds

Collection of pure CSS background animations

25. Magic Pattern CSS Backgrounds

Collection of reusable SVG-based / pure CSS background patterns, with a visual explorer

Colors

26. CSS Gradient

Advanced CSS gradient builder

27. Parametric Mixer

Equaliser-based CSS color composer. by @dawidwoldu

28. Palettte.

Develop and tweak color schemes

29. Paletton

Palette builder using opposing or attracting colors

30. Grabient

Sample gradients.
Similar to CoolHue, WebGradients.com, GradientHunt, GradientButtons and UI gradients

31. Color Hunt

Yet another color palette designer

32. Easing Gradients

Cubic-bezier style pure CSS gradients, by @larsenwork

33. Flat UI Colors

Flat-style handpicked color palettes, by @ahmetsulek

34. Color Tools

Mix, extract, convert and generate colors

35. ColorPalettes.Earth

Natural color pallets from nature

Typography

36. Font Joy

Discover and preview various font pairings, by @Jack000

37. Type set With Me

Typography & legibility sandbox, by @tsmith512

38. Type Scale

Generate heading/ body font sizes, by @jeremychurch

39. Glyphter

Create icon fonts from SVG graphics

40. Font-Library

Tagged library of Google Fonts, by @katydecorah

41. Glitter

Export 90s-style Glitter text

Loaders

42. Spin Kit

Selection of clean CSS loading animations

43. Whirl

100+ CSS loading animations, for copy-paste

44. Loader Generator

Pre-built and custom pure CSS loaders

45. lukehaas - CSS-Loaders

Simple pure CSS loading animations

46. CSSLoaders

Complex pure CSS loaders

47. loading.io/css

CSS implementations of common loaders

Layouts

48. CSS Grid Garden

Interactive game for learning CSS grid, by @thomaspark

49. FlexboxFroggy

Interactive game for learning flexbox, by @thomaspark

50. Flexplorer

Visual flexbox demo, by @bennettfeely

51. Flexulator

An interactive CSS Flexbox space distribution calculator, by @telagraphic

52. Grid Generator

Make grids using the CSS grid-template properties, by @sdras (similar to grid.layoutit.com)

53. Layout Generator

A modern CSS layout maker

54. Box Model Diagram

Just a visual box model demo

Informative

55. CSS Timeline

A history of CSS

56. Screen Size Map

View popular screen sizes for responsive design

57. CSS Ruler

Preview various CSS units relative to each other

58. bada55

List of very funny CSS hex color codes
See also, colors.lol for some overly-descriptive color pallets

59. Who can use?

Checks accessibility grade of a given color combinations, similar to Colorable

60. Can I use?

Browser compatibility check of various, CSS, JS, HTML and web features

61. Can I email?

Similar to Can I use?, but checks if a given CSS property (or HTML elem) is compatible with email clients

62. CSS Processing Tools

Convert to and from any other CSS language

63. Unused CSS

Searches your site for unused CSS, and displays stats

64. Component.Gallery

Global component search

65. Design System Gallery

A collection of open design systems, for inspiration

66. Checklist.design

A collection of design best practices organised as checklists

67. Glyphs

A list of CSS glyph character codes (see also GlyphSearch for library icons)

68. CSS-Tricks.com

The best CSS blog out there

69. Curated Design Tools

A curated list of awesome design tools

70. Awesome-CSS-Frameworks

A list of open source CSS frameworks

71. CSS Reference

A visual guide to CSS properties (similar to htmlreference.io)

72. MDN CSS Docs

Excellent documentation of all available CSS properties

If you like this kind of stuff, consider following for more :)

Fun with console.log() 💿

Alicia Sykes — Sun, 20 Nov 2022 21:50:01 +0000

If you've ever developed a web app, you'll be familiar with console.log(...), the method which prints data to the developer console; useful for debugging, logging and testing.

Run console.log(console), and you'll see that there's much more to the console object.
This post briefly outlines the top 10 neat tricks you can use to level up your logging experience.

Tables
Groups
Styles
Times
Asserts
Counts
Traces
Directory
Debugs
Log Levels
Multi-Values
Log Strings
Clear
Special Browser Methods

Tables

The console.table() method prints objects/ arrays as a neatly formatted tables.



console.table({
  'Time Stamp': new Date().getTime(),
  'OS': navigator['platform'],
  'Browser': navigator['appCodeName'],
  'Language': navigator['language'],
});

Groups

Group related console statements together with collapsible sections, using console.group().

You can optionally give a section a title, by passing a string as the parameter. Sections can be collapsed and expanded in the console, but you can also have a section collapsed by default, by using groupCollapsed instead of group. You can also nest sub-sections within sections but be sure to remember to close out each group with groupEnd.

The following example will output an open section, containing some info



console.group('URL Info');
  console.log('Protocol', window.location.protocol);
  console.log('Host', window.origin);
  console.log('Path', window.location.pathname);
  console.groupCollapsed('Meta Info');
    console.log('Date Fetched', new Date().getTime());
    console.log('OS', navigator['platform']);
    console.log('Browser', navigator['appCodeName']);
    console.log('Language', navigator['language']);
  console.groupEnd();
console.groupEnd();

Styled Logs

It's possible to style your log outputs with some basic CSS, such as colors, fonts, text styles and sizes. Note that browser support for this is quite variable.

For example, try running the following:



console.log(
  '%cHello World!',
  'color: #f709bb; font-family: sans-serif; text-decoration: underline;'
);

You should get the following output:

Pretty cool, huh? Well there's a lot more you can do too!
Maybe change the font, style, background color, add some shadows and some curves...

Here's something similar I'm using in a developer dashboard, the code is here

Time

Another common debugging technique is measuring execution time, to track how long an operation takes. This can be achieved by starting a timer using console.time() and passing in a label, then ending the timer using console.timeEnd(), using the same label. You can also add markers within a long running operation using console.timeLog()



console.time("concatenation");
let output = "";
for (var i = 1; i <= 1e6; i++) {
  output += i;
}
console.timeEnd("concatenation");



concatenation: 1206ms - timer ended

There's also a non-standard method, console.timeStamp() which adds markers within the performance tab, so you can correlate points in your code with the other events recorded in the timeline like paint and layout events.

Assert

You may only want to log to the console if an error occurs, or a certain condition is true or false. This can be done using console.assert(), which won't log anything to the console unless the first parameter is false.

The first parameter is a boolean condition to check, followed by 0 or more data points you'd like to print, and the last parameter is a message to output. So console.assert(false, 'Value was false') will output the message, since the first parameter is false.



const errorMsg = 'the # is not even';
for (let num = 2; num <= 5; num++) {
  console.log(`the # is ${num}`);
  console.assert(num % 2 === 0, { num }, errorMsg);
}

Count

Ever find yourself manually incrementing a number for logging? console.count() is helpful for keeping track how many times something was executed, or how often a block of code was entered.

You can optionally give your counter a label, which will let you manage multiple counters and make the output clearer.
Counters will always start from 1. You can reset a counter at anytime with console.countReset(), which also takes an optional label parameter.

The following code will increment the counter for each item in the array, the final value will be 8.



const numbers = [1, 2, 3, 30, 69, 120, 240, 420];
numbers.forEach((name) => {
  console.count();
});

The following is an example output of labelled counters.

Instead of passing in a label, if you use a value, then you'll have a separate counter for each conditions value. For example:



console.count(NaN);         // NaN: 1
console.count(NaN+3);       // NaN: 2
console.count(1/0);         // Infinity: 1
console.count(String(1/0)); // Infinity: 2

Trace

In JavaScript, we're often working with deeply nested methods and objects. You can use console.trace() to traverse through the stack trace, and output which methods were called to get to a certain point.

You can optionally pass data to also be outputted along with the stacktrace.

Dir

If your logging a large object to the console, it may become hard to read. The console.dir() method will format it in an expandable tree structure.

The following is an example of a directory-style console output:

You can also print XML or HTML based trees in a similar way, by using console.dirxml().

Debug

You may have some logging set up within your app, that you rely on during development, but don't wish the user to see. Replacing log statements with console.debug() will do just this, it functions in exactly the same way as console.log but will be stripped out by most build systems, or disabled when running in production mode.

Log Levels

You may have noticed that there's several filters in the browser console (info, warnings and error), they allow you to change the verbosity of logged data. To make use of these filters, just switch out log statements with one of the following:

console.info() - Informational messages for logging purposes, commonly includes a small "i" and / or a blue background
console.warn() - Warnings / non-critical errors, commonly includes a triangular exclamation mark and / or yellow background
console.error() - Errors which may affect the functionality, commonly includes a circular exclamation mark and / or red background

In Node.js different log levels get written to different streams when running in production, for example error() will write to stderr, whereas log outputs to stdout, but during development they will all appear in the console as normal.

Multi-Value Logs

Most functions on the console object will accept multiple parameters, so you can add labels to your output, or print multiple data points at a time, for example: console.log('User: ', user.name);

But an easier approach for printing multiple, labelled values, is to make use of object deconstructing. For example, if you had three variables (e.g. x, y and z), you could log them as an object by surrounding them in curly braces, so that each variables name and value is outputted - like console.log( { x, y, z } );

Log String Formats

If you need to build formatted strings to output, you can do this with C-style printf using format specifiers.

The following specifiers are supported:

%s - String or any other type converted to string
%d / %i - Integer
%f - Float
%o - Use optimal formatting
%O - Use default formatting
%c - Use custom formatting (more info)

For example



console.log("Hello %s, welcome to the year %d!", "Alicia", new Date().getFullYear());
// Hello Alicia, welcome to the year 2022!

Of course, you could also use template literals to achieve the same thing, which might be easier to read for shorter strings.

Clear

Finally, when you're looking for an output from an event, you might want to get rid of everything logged to the console when the page first loaded. This can be done with console.clear(), which will clear all content, but nor reset any data.

It's usually also possible to clear the console by clicking the Bin icon, as well as to search through it using the Filter text input.

Special Browser Methods

When running code directly in the browser's console, you'll have access to a couple of short-hand methods, which are super useful for debugging, automation and testing.

The most useful of which are:

$() - Short-hand for Document.querySelector() (to select DOM elements, jQuery-style!)
$$() - Same as above, but for selectAll for when returning multiple elements in an array
$_ - Returns value of last evaluated expression
$0 - Returns the most recently selected DOM element (in the inspector)
$1...$4 can also be used to grab previously selected UI elements
$x() - Lets you select DOM elements using an Xpath query
keys() and values() - Shorthand for Object.getKeys(), will return an array of either obj keys or values
copy() - Copies stuff to the clipboard
monitorEvents() - Run command each time a given event is fireed
For certain common console commands (like console.table()), you don't need to type the preceding console., just run table()

There's many more console shorthand commands, here's a full list.

Warning These only work within the dev tools console, and will not work in your code!

And some more...

There's so much more that you can do with logging to the console! For more info, check out the MDN console Documentation or the Chrome Dev Console Docs.

Just a quick note about best practices...

Define a lint rule, to prevent any console.log statements from being merged into your main branch
Write a wrapper function to handle logging, that way you can enable / disable debug logs based on environment, as well as use appropriate log levels, and apply any formatting. This can also be used to integrate with a third-party logging service with code updates only needed in a single place
Never log any sensitive info, the browser logs can be captured by any installed extensions, so should not be considered secure
Always use the correct log levels (like info, warn, error) to make filtering and disabling easier
Follow a consistent format, so logs can be parsed by a machine if needed
Write short, meaningful log messages always in English
Include the context or category within logs
Don't overdo it, only log useful info

If you like this kind of stuff, consider following for more :)

Browser Dev Tools: The Ultimate Guide 🔥

Alicia Sykes — Mon, 14 Nov 2022 17:37:47 +0000

Contents (Click to expand) ↕️

Design Mode
Pretty Print
Command Pallet and Super Search
Snippets
Live Expressions
Tracking Changes
Console Shorthand
Find Unused Code
Rendering Panel
Network Paint Times
Network Timings
Inspect Network Requests
Performance
Identifying Memory Leaks
Raw Memory Inspection
Test bfcache
Full Refresh
Lighthouse
Page Size Breakdown
Record User Flows
Advanced User Flow Operations
Pausing Execution with Breakpoints
Remote Debugging
Mock Location and Sensors
Death by Errors, no more!
View and Edit Storage
Debug Background Services
HTTPS Security Checks
Web Auth
Accessibility Tools
Screenshots
Super-Copying
Animations Timeline
Forcing Elements State
CSS Sizes and Units
Color Pallets
Easy Box Shadows
Easy Animations
Responsive Design Mode
Badges
Rulers
Style Overview
Layers
Saving Changes to Disk
Automation
Familiar Shortcuts
Dark Mode
Useful Add-Ons
Are we finished yet?

Design Mode

Enabling design mode will make the entire web page editable, just by clicking and typing.

To use it, open up the console and run:

document.designMode = 'on'

Pretty Print

Raw files are usually minified, and therefore hard to read. Use the Pretty Print option to format it

In the background, Chrome is creating a new file (names filename.js:formatted), closing that file will undo the formatting.

If doing this each time is getting boring, then there's an experimental setting to auto-enable pretty print for all sources.
Under ⋮ → Settings → Experiments Select Automatically pretty print in the Sources Panel.

Command Pallet and Super Search

The command pellet gives you full access to every command available within the dev tools, and is super valuable for quick navigation.

Type Ctrl + Shift + P to open up the Command Menu, then start typing to filter commands and press enter to execute.

In the same way, if you're only looking to find a function name, you can use Ctrl + Shift + O to filter methods across files.

From the same menu, you can also search through all loaded resources by filename or code (HTML, CSS, JS, etc), all network requests, visible components, memory profiles, snippets and much more. Advanced features like RegEx are supported.

For an app built with a framework, you'll probably see a lot of irrelevant files (like node_modules, webpack output, etc). You can hide this under ⋮ → Hide ignore-list sources. By default, this uses the smart x_google_ignorelist to detect what's likely not relevant, but you can also add your own custom sources, specified by regex under Settings.

Snippets

So you've spent a while crafting a function in the console, and you plan on reusing it across various sites later. That's where snippets come in, they're invoked from the command pallet, and let you save code for later and execute it using the bang ! operator.

Live Expressions

Instead of repeatedly executing a command to monitor for changes, you can watch values in real-time using Live Expressions. Just execute a command, then pin it using the eye icon to see changes reflected automatically.

There's many use cases for this, but one I use often is when testing keyboard navigation of an app, pinning the document.activeElement command will print a log of evertime the focused element changes, even once it's been removed from the GUI.

Tracking Changes

We've all been there, you've been editing your app's HTML, CSS and JS through the dev tools and got things working perfectly, but you can't remember exactly what you changed. That's where the Changes Tab comes in. Access it through the command pallet (with Control+Shift+P, then type "Show Changes"), or through the lower draw.

You'll then be able to see a diff output of all your changes. From here you can Copy changes to clipboard, or revert certain changes.

Console Shorthand

$() - Short-hand for Document.querySelector() (to select DOM elements, jQuery-style!)
$$() - Same as above, but for selectAll for when returning multiple elements in an array
$_ - Returns value of last evaluated expression
$0 - Returns the most recently selected DOM element (in the inspector)
$1...$4 can also be used to grab previously selected UI elements
$x() - Lets you select DOM elements using an Xpath query
keys() and values() - Shorthand for Object.getKeys(), will return an array of either obj keys or values
copy() - Copies stuff to the clipboard
monitorEvents() - Run command each time a given event is fireed
For certain common console commands (like console.table()), you don't need to type the preceding console., just run table()

You can clear the console at anytime using Ctrl + L, using the clear button, or by running clear()

There's many more console shorthand commands, here's a full list.

Warning These tricks only work within the dev tools console, and will not work in your code!

Find Unused Code

Easily identify which bundles are the largest, and how much of their code is actually used, and what the load impact of each file is, using the Coverage tool. This illustrates exactly which code is being loaded but never used, and what the cost of it is.

Click the three dots, select coverage and reload the page. Any red bars indicate unused code, and will likely be making your app slower. Clicking an individual file will let you see specifically what code isn't being used.

Rendering Panel

This tool is super useful for identifying elements that are being edited more often than possibly necessary, and which are likely negatively affecting performance and user experience.

The frame rendering stats is specifically useful, for monitoring CPU and GPU usage, helping you identify things before they become a problem.

[

Network Paint Times

Your probably familiar with the waterfall chart rendered by the Network tab, and how useful that is for detecting slower requests. But from here, you can also enable screenshots to see exactly what parts of your site will load visually for end users on slower connections.

Network Timings

Clicking on an item shows headers and response, but head to the Timing tab, and you'll be able to see what stage the request was held up at, and specific server timings. Using the Server-Timing API, you can pass even more detailed info from your API to your client app, and view data in the Timings tab of the browser dev tools. To use this, just add the Server-Timing header to your response data, and detailed charts will be visible in the dev tools.

To find the total size of your web page, under the Network panel, check Disable Cache, reload the page, and the info bar at the bottom will display total size, total time, total requests and other key stats.

Inspect Network Requests

You likely already know this, but you can also view the request and response for any HTTP request your site makes, as well as view loading times and see where in the code it was triggered.

Performance

It's really worth exploring the performance panel and all that it has to offer. Just hit the record button, then interact with your site like an end-user might. When you're finished, you'll have a really detailed breakdown of CPU usage, FPS and memory allocated to the heap. Where ever there's a spike in the timeline, that usually indicates an area of code that needs to be optimised. You can then investigate this further by drilling down on the flame chart, to see the full stack trace of everything that happened on the main thread.

Identifying Memory Leaks

Modern browser automatically garbage-collect any data that is no longer being referenced to. But poorly written code can mean you have obsolete code references that build up over time causing a memory leak. This can be detrimental to performance and greatly hider user experience.

Thankfully, they're not as hard to find or debug as you might have thought. Under the Memory tab, select "Allocation instrumentation on timeline", then hit record.
The blue bars indicate memory that's still in use, and the grey bars show what was garbage collected. So a rapidly growing blue bar would be where your mem leak is happening, and you can then click that bar to see exactly what data objects they contain, and easily identify the cause.

Worth also noting that the web page isn't the only source of memory leaks. They can also be caused by add-ons, the browser engine itself or even data caching. Use the Statistics view to see a breakdown of what data is using memory.

Raw Memory Inspection

If you're building a web assembly app, this will be particularly important to you. From the memory inspector, you can drill down the scope, and inspect ArrayBuffer, TypedArray, DataView, and Wasm Memory. Here's a WASM demo:

Test bfcache

bfcache is a browser feature that enables instant backward and forward navigation, it works differently from the HTTP cache because it stores a snapshot of the entire page in memory, which is what the user will see while the navigation is happening.

In order for the bfcache feature to work effectively on your site, you need to optimise for it. And that's where the Back/Forward Cache Tester comes in. Under Application → Back/forward cache tab, click "Test back/forward cache", and you'll be presented with the results which will list issues for each frame. Clicking each result will also give you instructions on how you can fix it.

Full Refresh

Some errors are caused by cached content, and for those a normal refresh isn't enough. With the dev tools open, you can hold down the refresh button (for 2 seconds), and you'll see some additional refresh options, including "Empty Cache and Full Reload".
This is also useful for measuring first-time load metrics for new users, when nothing is previously cached.

To refresh all tabs at once, just reun chrome://restart in the address bar.

Lighthouse

Lighthouse is an extremely useful (and easy!) tool for measuring Core Web Vitals - accessibility, SEO, responsivness, performances, security, PWA compatibility, best practices and overall user experience.

Just open the Lighthouse tab, and click "Start Scan".

Lighthouse results can be exported in a range of formats, and there are various external viewers you can use to gain additional insight (like this one).

Lighthouse scans can also be incorporated into your CI/CD system, so that you have constant visibility into your apps core vitals.

Page Size Breakdown

Understanding what data is being loaded into your site will help you reduce overall bundle size. This can be done from the Memory and Network tabs, but sometimes a more visual view helps put things into context.
The Chrome Memory Treemap is really useful for this - to use, just run a Lighthouse scan, export the results in JSON, then import it into googlechrome.github.io/lighthouse/treemap/.
You can click any element, to zoom in and inspect additional info.

Record User Flows

Note (This feature is still in beta, and currently requires Chrome Dev Eddition)

Record, reply and audit user flows under the audit panel. Just click Start new Recording, enter a name and hit go. Everything the user does, including mouse moves, keypresses, pauses and more will be logged. You can then use Replay to view back the users journey.

In the replay settings each step can be expended to view details, you can also edit, add and remove steps in real-time. There are additional options for simulating things like environment of slow network connection. This is super useful for user testing.

You can also import and export user flows as a Pupateer scripts, to share with others.

Advanced User Flow Operations

The recorder tool has many other valuable features which often go under-used. Being aware of what you can do, will help you supercharge your user testing.

Examples of when this can be useful include: sending the exact steps to recreate a bug to another developer, demonstrating to an analyst exactly how users behaved during a testing session, or slowing things down to debug complex issues.

Once you've recorded a user flow, you can:

Replay it (obviously!)
View detailed performance metrics over time
Export it (as JSON, Puppeteer or Puppeteer reply script)
Edit the flow (then re-import it)
Share user flows with others (for testing or demonstration)
Configure replay settings, such as apply throttling or device limitations
Replay in slow mo, with detailed debugging
Apply breakpoints, to pause and inspect at certain steps
Import user flows generated by other tools
Add additional steps, or remove steps

There are several third-party tools that let you do even more, as well as import / export in additional formats, like the Cypress add-on, Nightwatch add-on, Jest add-on, WebDriver add-on and more.

Pausing Execution with Breakpoints

Breakpoints are an absolute essential for debugging. They enable you to pause everything at a certain point to inspect state and discover issues. You're probably already aware that you can trigger a breakpoint at a certain point, either with the debugger statement statement, or by clicking the margin (in the sources panel, or with a compatible IDE). But there's several other types of breakpoints, including:

Conditional line-of-code - On an exact region of code, but only when some other condition is true.
DOM - On the code that changes or removes a specific DOM node, or its children.
XHR - When an XHR URL contains a string pattern.
Event listener - On the code that runs after an event, such as click, is fired.
Exception - On the line of code that is throwing a caught or uncaught exception.
Function - Whenever a specific function is called.

You can also make conditional breakpoints (represented as orange tabs), which will only pause the execution when certain conditions are met. To do so, just right-click, select Edit Breakpoint, then use JavaScript to resolve a boolean using current state.

If there's a specific method you want to pause on, just run debug(methodName) to start, and undebug(methodName) to end.

Once a breakpoint has been hit, you can interact with any current state through the console.

Remote Debugging

As any app developer will tell you, nothing beats testing on a real device. But when it comes to the web, the browser debugging tools are essential. That's where remote debugging comes in - it enables you to test on a physical device while continuing to have the debugging power of the browser tools.

The same can work in the opposite direction, where you run your dev environment locally or host it remotely, but access it on an external device.

This does require either port forwarding or custom domain mapping (but neither are as scary as they sound!). The docs provide setup instructions and proxy configurations.

And if you're developing a native Android app, which has embedded web views, you can use the browser's dev tools to debug these too (docs).

Mock Location and Sensors

In a similar way to the iOS and Android emulators, you can simulate various sensors and hardware settings. This is useful if the app your developing relies on any of this data. Under the Sensors tab, you'll be able to change your location, time zone, locale, screen lock, orientation, motion / acceleration etc.

If you frequently find yourself switching between locations or locales, you can add these under Settings --> Locations.

Death by Errors, no more!

If you're wading through a large code base or dealing with a poorly written library, and drowning in exceptions which are distracting you from what you're actually trying to debug, then under the settings you can opt to ignore any exceptions thrown by certain scripts or from a given framework. The ignore list can be specified by regex patterns for specific targeting.

You can auto-hide source files for most major frameworks by heading to ⋮ → Ignore List, and selecting "Automatically add known third-party sources to Ignore list". This will make the stack trace in the console show less irrelevant info. You'll still be able to view the full stack for any given error, just by clicking "Show more".

By default the console will show output from all contexts. This means if you've got an extension installed that's throwing an error it will be cluttering up your console. Just right-click on the file name, and under Filter select Hide messages from [ext name]. You can unhide these at anytime from the same menu.

View and Edit Storage

While we're in the Application tab, it's worth mentioning how essential these tools are for viewing, deleting and editing data stored in local storage, session storage, cookies, IndexedDB, etc.

From the storage tab, you can also see a breakdown of how much your site is storing, and simulate restraints like custom storage quotas or disabling cookies.

Note that stored data is (usually) only accessible from the domain which set that data. So if you're debugging stored data in the console for any context other than the default one, you'll need to use the frame dropdown at the top to switch domains.

Debug Background Services

If you app includes notifications, sync, background fetch or anything else that should continue running even when the app / current tab is not in the foreground, then these tools are invaluable. Under the Application tab's Background Services section, you can click a API category, start recording, then put your app into the background. When you come back, you'll be able to see specifically which events fired, and inspect each one.

Side note, you can view all registered service workers, manage, debug and de-register them from: chrome://serviceworker-internals

HTTPS Security Checks

The Security tab provides a good starting point, for when verifying common HTTPS issues on your site. It checks for, and highlights common SSL issues, including non-secure main origins and mixed content. You can also check web certificate chains in more detail.

Web Auth

This ones a bit more niche, but absolutely essential if you're building anything with soft-tokens or 2FA. The WebAuthn tool will let you generate and emulate virtual authenticator devices using a variety of protocols (2FA, FIDO/CTAP) and interface types (USB, NFC, Bluetooth, internal) with additional options for user verification, resident keys, etc.

Here's a quick demo:

For an overview of web auth, see WebAuthn.guide, or view the W3 spec

On a side-note, there's an interesting article explaining how they built the webauthn tab.

Accessibility Tools

Accessibility is not just important for inclusion, it's also a legal requirement for most public-facing apps and services. If you're not yet sure the core concepts of web accessibility standards, I recommend the Web.Dev Accessibility Tutorial, which provides a great summary.

Lighthouse provides a good starting point for auditing accessibility, and is easy to use, and built directly into the developer tools.

The CSS tools also have a built-in contrast tool, which will help you apply readable colors to your site. The inspect pop-up will show a warning, and you can analyze this further in the Styles pain.

Beyond that, the Accessibility tab let's you view an element's position in the DOM tree, ARIA attributes, and computed accessibility properties, all of which are used by accessibility tools like screen readers.

There are additional add-ons which can give you much more powerful insights. Mainly, the axe DevTools. This will show you detailed results and instructions of how to fix.

Screenshots

You can capture screenshots directly from the dev tools, including: full-page, specific area or single-node screenshots.
Either open up the command pallet and type screenshot, or for an element screenshot, just right-click on the DOM element in the inspector and select Capture Screenshot.

Super-Copying

From the elements tab, right-click on an element and under Copy, there are several different options. Copy selector will give you a CSS selector to target that element, similarly copy JS path will give you a query string to select the element in JavaScript, and copy outer HTML will copy the actual HTML. Copying the styles of an element, will give you all the computed CSS for a given element.

Animations Timeline

The animations panel (opened by clicking the 3-dots) lets you record any keyframe animations, and then scrub through them to inspect the actual CSS properties that are affected.

Forcing Elements State

If you need to preview the styles of a given element in a particular state (e.g. :hover, :visited, :active, :focus, etc), then either right click it and select Change pseudo class, of from the the styles editor click the :hov icon.

CSS Sizes and Units

Do you ever inspect an element, then hold the arrow keys up/ down for literally ever until the size looks right? Well you can also drag the units horizontally to easily preview different sizes. Similarly, for angles you can use the clock rotater to preview / apply any value. Got the wrong units? Just hover over the size, and click the drop down to quickly switch units.

Color Pallets

Most apps include only a handful of colors, and usually when your changing a color, it will be to one of those values. That's why the palette tool is so useful. By default, there are several pre-made palettes: from your pages current colors, your pages CSS variabels, the Material pelette and an empty custom palette. Switch between them with the arrows.

While we're here, it's worth also touching on just how powerful the color tool is. From here you can:

Change color shades, hue and transparency - with live preview
Convert between units (hex, RGB(A), HSL(A), HWB(A))
Use the eye dropper to pick any color from your screen
Copy color value to the clipboard

If you're not already doing so, try to make use of CSS variables (not SASS vars) throughout your app. That way you can update the color in one place, and have it previewed/ applied everywhere. In the dev tools, click a variables name to go to original definition, from there you can modify it.

Easy Box Shadows

Box shadows are one of those things that are best previewed live. That's why the shadow-editor is so useful. Just click the icon next to any shadow to preview different X/Y offsets, blur, spread and directions of both inset and normal shadows.

Easy Animations

By clicking the animation option, you can easily preview various transitions and effects.

Responsive Design Mode

Easily check that your site displays nicely on a range of devices, using the Responsive Design Mode.

By default only a few devices are shown, but head to Settings --> Devices and you'll be able to enable a whole bunch more from the list, or even create your own custom device with dimensions, user agent, platform, architecture and more.

Badges

You may have notices a little chip/ badge next to certain elements in the Elements tab. These are Badges, and can be used to apply overlays or add extra features to certain element types including Grids, Flex layouts, Ads, Scroll-Snaps, Containers, Slots and more. To enable badges, right-click an element in the DOM tree and select Badge settings, then check / uncheck what you'd like to be visible.

Many of these badges open the door to additional features, like the Flexbox Debugger and Grid layout debugger

Rulers

There's always that one front-end dev, so keen to please the designers that he's using an actual ruler to measure the elements on his screen. Well no need for that, or any dodgy ruler browser extensions, as this feature is built directly into the dev tools. Enable it under ⋮ → Settings → Preferences → Elements → "Show rulers on hover".

In Firefox, there is a built-in ruler feature, available through the Toolbox Buttons in the top-right.

Style Overview

The CSS Overview tab helps you quickly get an overview of CSS improvments you can make. The aim is consistency (colors, fonts, breakpoints, styles, etc).

Color Pallet - Shows all colors used on your site. Useful for identifying elements which don't conform to your desired theme / designs
Fonts - Displays all typefaces, sizes and variations used in your page. A good webpage will be consistent with only a few fonts and text styles.
Media queries - Outputs all breakpoints used in your site, sorted by highest occurrence. You should aim to keep them consistent to make responsive testing easier
Unused Declarations - Lists key information about any unused declarations as well as styles that have no effect. Removing these will speed up load times, and make CSS easier to read.

Layers

The Layers panel (more tools → Layers) will show what's happening both off screen and on additional layers (with 3d mode).

It's particularly useful for visualising how specific animations are working, from a functional perspective, without having to wade through a bunch of keyframes and obfuscated code.

Saving Changes to Disk

There are two methods to save or persist changes you've made in the dev tools. Workspaces and Local Overrides.

Workspaces enable you to save changes you make in the devtools directly to your working copy on disk
Workspaces can be setup under Sources → File System → Add Folder. They support HTML, CSS and JavaScript and content can be edited, previewed and saved directly through the sources panels. Certain frameworks require some extra setup to get properly working.

Local Overrides enable you to persist changes across sessions (but without effecting original source files)
Overrides can be setup under Sources → Overrides. You can use the Changes menu to preview / export a diff of what you've changed.

Automation

For more advanced tasks, everything in the developer tools can be automated, via the Automation APIs using WebDriver Protocol (which is what tools like Selenium use). As an example, see the webdriver devtools package.

Familiar Shortcuts

So almost everything within the browser developer tools has keyboard shortcuts, here's the full list. But if you're struggling to memorise them all, then you can actually switch to familiar VS Code bindings. Under Settings --> Shortcuts, under the Match shortcuts from preset menu, select Visual Studio Code.

Dark Mode

Finally, but by far the most important tip of all: dev tools dark mode!

Under Settings --> Preferences --> Appearances --> Theme, use the dropdown to switch from Light to Dark, and immediately 10x your developer experience. Because like they say... bugs are attracted to the light 🐛🔦

And if you're too cool for the default dark mode, you can write your own stylesheet, then enable the custom loading of CSS! There's a few pre-made stylesheets and an extension available here.

Useful Add-Ons

We're not quite done... so far we've only covered the built-in dev tools, but there are a bunch of super useful add-ons/ extensions

If you're working with a specific framework (like React, Svelte, Vue, etc), then adding their dev tools with give you additional debugging power over components, state and more.

React Dev Tools - Inspect React component hierarchies and profile data
Redux Dev Tools - Debug redux data and monitor state changes
GraphQL Network Inspector - Inspect GQL requests with support for relay batching
Vue Dev Tools - Debug component hierarchy and state in Vue apps
Svelte Dev Tools - Inspect the Svelte state and component hierarchies
Angular Dev Tools - Preview state of directives of Angular component instances
Meteor Dev Tools - Debug Meteor apps

Beyond that, almost everything else can be done nativity / without additional extensions, there's still a few QoL add-ons that can be helpful, but keep in mind, that if you use any of these, you should create a separate Dev profile within your browser, as otherwise they may negatively effect you privacy (installed extensions make you more identifiable).

Visbug - Interact with and modify any websites, without needing any HTML or CSS knowledge
Lighthouse - Automated performance, quality and correctness checker
Designer Tools - Grids and rulers for in-browser measurement and alignment
Motion Tools - Inspect and design complex CSS animations
Pixel Perfect - Overlay designs over webpages for building pixel perfect pages
CPU + Mem Performance Monitor - Add system resources overlay to sites
SEO Inspector - Easy inspection of Meta tags for SEO
Save all Resources - Easily download everything associated with a site, preserving directory structure
Multi-Proxy - Connect to multiple proxies (simultaneously) with IP matching and blocking
Accessibility Insights - Get an overview of accessibile navigation issues
Check my Links - Quickly find and highlight all dead links within a page
Weppalizer - Similar to BuiltWith, quickly check what tech a site is built using
Octotree - Adds sidebar on GitHub for much easier navigation

Are we finished yet?

Alright, this time I swear it's the last section, but I couldn't resist mentioning this too!

There is SO MUCH more to the browser developer tools than covered here. Even if you've been a web developer for several decades, I'm pretty sure there's still a whole bunch of handy features that even you've not yet come across. So don't be afraid to go exploring!

The best features are still experimental. You can try them out by enabling them under Settings --> Experiments. There's a link next to each item where you can view a usage tutorial as well as the API docs.

Other Browsers:

Firefox dev tools has a very similar feature set and layout to Chrome, but includes a few advanced features (around audio, shaders)
Safari's developer tools are lagging behind in terms of features, but are sometimes still required for iOS testing.
Other Chromium-based browsers (like Edge, Brave, Vivaldi, etc) inherit from the same source as Chrome, and as such have virtually identical dev tools.

The following sources are great for staying up-to-date with the latest in debug tools: