DEV Community

Bruno Paz
Bruno Paz

Posted on

Paid Developer tools you can´t live without?

In general, I believe most Developers always tend to look for using Free or Open Source Tools.

And the fact is, thanks to the amazing community of Open Source Developers, you can have all the essential development tools for free!

A personal fact, and maybe it´s something that comes with the age or experience, and by getting a better understanding of how valuable development time is, I am realizing that I am more open than ever to pay a fair price for top quality software, sponsoring other Devs, etc.

So I decided to write this article, to open the discussion: What paid software do you use on a daily basis that you can´t live without?

It doesn't need to be a Software per se, can be some site template you bought, for example. Some resource or tool that you gladly paid for it, that makes your life as Dev much easier.

I can start naming a few:

Jetbrains IDEs

Jetbrains

While there are awesome Open Source Code Editors like VS Code, JetBrains IDEs are very popular and powerful.

Some of the features I highlight are the powerful refactoring tools and much more reliable and faster code completion.

I use a mix of VS Code and Jetbrains IDEs (Goland, PHPStorm, WebStorm) but for more "serious" and complex projects, I tend to prefer Jetbrains IDEs.

VSCode is closing the gap and has many more contributions in terms of Extensions and I would love to use it fully, but there are some tasks that Jetbrains is still far superior.

It´s definitely a very powerful software that you might be willing to pay for.

Cacher

Cacher Logo

Cacher is a Code Snippets management tool that helps to organize your snippets library with labels and a powerful search engine and everything is Synced to GitHub Gist.

It´s cross-platform and also provides deep integration with the most popular Editors like VS Code, Jetbrains, Atom, and Sublime.

I couldn´t find anything free with this level of quality and features.

With the usage I am giving to, the personal plan of 6$/month is completely worth it.

Tailwind UI

TailwindUI

TailwindUI is not an application but I think it deserves a mention here.

It is a blessing for backend developers like me who suck at design.

It provides a high-quality set of all kinds of components for building any kind of Web UI, from an application to marketing and landing pages.
The components are pure HTML with Tailwind CSS.

You can see what is included here

The price range from $149 to 249$ one-time payment.

It can look expensive but believe me, it´s an amazing toolkit for building good looking websites and you can see the amount of work put on it.

If you want to build a web application but suck at design, it´s a great investment.


Now, I want to hear from you!

And also start streaming your micro-payments. Let´s see how this Web Monetization thingy really works. 😛

Discussion (39)

Collapse
moopet profile image
Ben Sinclair

It is a blessing for backend developers like me who suck at design.

I think Tailwind, at least as used by them on their linked demo site, is a very bad idea for people who suck at design. It promotes utility classes in HTML, like class="px-4 py-2 border-b border-gray-200 sm:flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline" which is no better than using inline styles. It's basically the same as using Dreamweaver from the 1990s to make your website.

Collapse
mazentouati profile image
Mazen Touati • Edited on

Hi Ben, what you see in their landing page is not how it really meant to be used. It's just for demo purposes and fast prototyping. In practical use cases, you would make components to group classes or to re-use the markup. Read more at Extracting Components docs.

which is no better than using inline styles

Inline Styles does not support media queries and pseudo-classes. Also, it will add a high specificity to your CSS. Last but not least, managing consistent values for padding, margin, color... is very hard with inline-styles unlike using Tailwind utility classes. So it's unfair to assume they are the same or worse.

It may be truly overwhelming at first, but once you get used to it will be very useful and practical.

Collapse
moopet profile image
Ben Sinclair

I don't think it's overwhelming at all, I see what people are doing with it and I'm aware that you can make classes in a similar way to extending in Less or Sass, e.g. (pseudocode):

.my-semantic-element {
 (extend/use/whatever) text-green padding-10px font-cool-caps;
}

However, that's not how people work. It's not how people do things in the real world. Evidence? Their site doesn't. Their site does it that "bad" way, and if even they won't do it right, why would any of their users?

You might point out a couple of technical ways it's better than inline styles, but practice-wise, it's the same. It's encouraging mixing presentation and markup, which wasn't a good idea 10 years ago and it's suddenly a good idea now because it's the easy way.

Thread Thread
patarapolw profile image
Pacharapol Withayasakpunt

Yes, you can @apply in Tailwind as well. So, in the end, it's the good ol' CSS, with Tailwind website acting as a showroom.

Thread Thread
mazentouati profile image
Mazen Touati • Edited on

@ ben

By overwhelming I meant it makes you hesitating or refusing to consider using it. What you see in their site is the compiled code. You can't tell if they are using it wrong or not. Most likely they have used component based approach to re-use the markup. The whole point of the website is to showcase the versatility and the power of their utility-based framework. It will make no sense if they used class names and used @apply directive which will obscure the versatility and dictate a CSS naming convention which is not the aimed goal behind the framework.

which wasn't a good idea 10 years ago [...]

Since 10 years ago a lot has been changed. Mixing presentation and markup is a real complication when using a monolithic approach. But now, you can separate the logic of your app in a small digestible and encapsulated components. Such approach wasn't easily possible 10 years ago as today there's a lot of powerful build tools that make such thing possible.

Some people even decide to mix markup + presentation + business logic in a single component when using JS frameworks like React, Angular or VueJS. Yet, they succeed to delivery a powerful and maintainable web apps.

My point is, as technology advance the decision making changes too. For example, years ago computers were limited in memory and storage that made developers very concerned about managing every single byte of memory. Now such concerns are tend to be called micro-optimization.

Myself included I still hesitate to mix the three layers in a single file. I still tend to be influenced by the old school way. However, when you mix them you're not automatically wrong. It always depends on how you do it.

Collapse
patarapolw profile image
Pacharapol Withayasakpunt • Edited on

Inline Styles does not support media queries and pseudo-classes. Also, it will add a high specificity to your CSS

Still, IMO, it might be only marginally better than plain inline style. (in most aspects)

However, right now, even if I am still not convinced about including the whole Tailwind (and Purge CSS), I am very convinced that I should write CSS in Atomic style. I even used names similar to Tailwind website.

Thread Thread
mazentouati profile image
Mazen Touati • Edited on

I cannot see how supporting responsive design and adding low CSS specificity to the element is "only marginally better". A big portion, if not the biggest, of your visitors will be using mobile devices.

Collapse
brpaz profile image
Bruno Paz Author • Edited on

I completely understand what you are saying and I had exactly the same feeling when I saw it for the first time.

But after playing with it a bit I changed my mind.

I think where it plays better, is together with component-based framework like Vue or React, so you create components to avoid repeating the styles. I mean even to a regular template engine that supports "includes" you can take the same approach.

So let´s say you can create a component "Card" where the HTML contains the tailwind directives and use it everywhere in the application. If you want to change how the card looks, it´s just a single place to change.

Also, you can use normal CSS in an external file and apply the tailwind directives if you really can't stand the inline approach.

I have done very simple applications with it. I don´t know if wil scale well for medium and big size projects with many people working on it. Maybe not. Can I see it become a mess to mantain in some projects? yes! Like any technology.

But for personal and small projects, where you want to have a solid design without much effort, together with the amazing library of pre-made components provided by Tailwind UI, I believe it´s a great choice!

Collapse
moopet profile image
Ben Sinclair

If you want to change how the card looks, it´s just a single place to change.

But if you want to change the theme of your entire page, you'll need to do it repeatedly to every component.

Thread Thread
brpaz profile image
Bruno Paz Author • Edited on

Tailwind has great support for themes,

Yes they have helpers for their default color pallete like, bg-green, text-blue, etc and would have to change it all places.

But, you can define your own names, and having something like "bg-primary", "bg-secondary", etc, so if you want to change your colors, you just have to change in a config file. (tailwindcss.com/docs/customizing-c...).

Maybe they should promote these practices more. I agree it has the potential to become messy if you are not careful.

As I said, I only use it for small personal projects for now, where these points are not that important. What it gives me in terms of speed and good looking design out of the box, largely out-weights the possible problems you mentioned.

Let´s see, where it goes ;)

Collapse
gsarig profile image
Giorgos Sarigiannidis • Edited on

I agree with that. It's the reason I tend to avoid frameworks like Bootstrap. Furthermore, if you need to build more complex custom layouts (e.g. out of a PSD), such frameworks might even end up being an obstacle rather than a help. A few years back I would use bootstrap or whatever framework for its grid layout, but today, with native CSS solutions like flexbox and grid, it seems to me that it's not worth it.

Actually, at some point, I used to use a CSS Grid framework because it was implementing flexbox, which seemed intimidating at the time (Bootstrap was on version 3, which hadn't implemented it yet). It was great for simple layouts, but on more complicated designs trying to fit the HTML markup to the conventions of the framework was a nightmare. Eventually, I ditched it completely and decided to properly learn how to use flexbox. It was one of the wisest choices I've made, as learning was much easier than I thought, and since then styling a page became much easier on every aspect.

In my opinion, the biggest drawback of such frameworks is that there is a danger that you will end up learning the framework and forget the actual CSS without a good enough payoff. Doing <div class="sm:flex;"> instead of putting display: flex; on a media query, not only won't save you from any worthwhile trouble but if you get used to it you might unfamiliarize yourself with how things actually work.

Collapse
patarapolw profile image
Pacharapol Withayasakpunt • Edited on

I think you are still looking for Component libraries, as opposed to atomic CSS.

But that is what current Dev.to don't suggest much, at least according to my another question.

CSS-in-JS components or Single File Components, might be the answer you wanted.

Collapse
brpaz profile image
Bruno Paz Author • Edited on

Also not sure, if this reply is for me, but I read that post and some comments there, from what I read, Tailwind is planning to create Vue, and React components in the future, instead of only HTML versions. I guess it would be similar with Buetify and Vuetify, so you would have a let´s say tw-button element.

Still, for me the big advantage of Tailwind is there good looking design by default.

Thread Thread
patarapolw profile image
Pacharapol Withayasakpunt

Tailwind did made a good showroom, though.

But, originally I intended this for Ben.

Collapse
moopet profile image
Ben Sinclair

Who is this reply to? Sorry, threading is only a level or two deep here :)
If me, then I'm not sure what you mean?

Thread Thread
patarapolw profile image
Pacharapol Withayasakpunt

It is a blessing for backend developers like me who suck at design.

NVM, but I actually mean that Tailwind is not meant for backend dev who are suck at design.

Thread Thread
brpaz profile image
Bruno Paz Author • Edited on

For me, it´s amazing for that. ;)

I can build good looking interfaces without much effort thanks to the solid foundation tailwind provides me.

A full-stack need to carefully pick up their battles. Tailwind gives me time to focus on other areas.

But again, this is my personal experience and my goals.

Collapse
adron profile image
Adron Hall

Basically all of the jetbrains IDE's. I use pretty much all of them.

Other things I happen to pay for because I use em' a lot:

  • Creative Cloud & all that Adobe stuff; Photoshop, Premiere Pro, etc.
  • VMWare Fusion cuz' it's just consistently more performant and reliable than VBox. Albeit I have it around too just in case.

There's some others but those are some of the big $ items I shell out my own cash for.

There are also tons of stuff that I often request from employers.

Collapse
instanceid profile image
instance.id

I as well am a huge fan of Rider, IntelliJ, GoLand, etc. Also, though, I have been a big fan of GitKraken because of it's built-in tools for handling merging and things of that nature.

Collapse
jkhaui profile image
Jordan Lee

Came here to say Jetbrains IDEs (specifically webstorm, being mostly a frontend/JS dev). I'm always changing file and variable names, so its refactoring tool alone is worth the price.

I also pair it with Deep TabNine as my machine learning autocompletion

Collapse
gsarig profile image
Giorgos Sarigiannidis

Here's mine:

  • PHPStorm: If VSCode was around back when I was choosing my IDE I'd probably used it as it seems like a great free alternative. But now that I've used PHPStorm it feels like there is no turning back.

  • LambdaTest. If you build websites you need a way to test various configurations. It was that or BrowserStack, so I went with LamdbaTest, which was more affordable.

  • Office 365 subscription. The entire MS Office suite at its latest version, along with 1TB of OneDrive is definitely worth it.

  • Affinity Design / Affinity Photo. I'm not a Designer, but from time to time I have to deal with Illustrator and Photoshop files, so Affinity offers an affordable, quality alternative to Adobe's products.

  • Dashlane. A good password manager is an essential tool no matter what you do.

  • ACF Pro. I work with WordPress, so ACF Pro was easily the most valuable WordPress-related purchase that I've made over the years. Along with that, I'd include a few other premium WordPress plugins: WPML, WP-All-Import, Gravity Forms, WP-Rocket.

  • Newton Mail. This one is tricky. It's far from perfect and it had a lot of issues over the years. I can't stand Outlook, though and the way that it works with Gmail and GSuite accounts, and I like a mobile app's conveniences on my Desktop's mail client, and Newton was the best solution that I could find on Windows. I am more than willing to switch, though, if I find a better alternative.

Collapse
hondohondo profile image
Ami Amigo

Bruno! You nailed it on JetBrains ...I use both JetBrain's PHPStorm and WebStorm and they're wonderful! The VSCode fanatics gonna love JetBrains products once they try them. At the moment am using them for free through Github Developer Pack...but will definitely buy the license once my free student plan is over. And by the way...WebStorm is a subset of PHPStorm...Everything in WebStorm is inside PHPStorm!

Collapse
mattnot profile image
Matteo Notaro

Actually all the jetbrains products are """forks""" of intellij IDEA

Collapse
seenukarthi profile image
Karthikeyan Vaithilingam

It's not a fork. Jetbrains IDEs are using Intellij platform same as Android Studio.

Collapse
kant312 profile image
Quentin Delcourt

Same here, I pay for PHPStorm.
And as I can never make a proper merge on the command line, I also paid for a SmartGit license.
All the other tools, I have them thanks to the OpenSource developers around the world 🙂

Collapse
adam_cyclones profile image
Adam Crockett

Webstorm, Afiniti products too.

Collapse
guneyozsan profile image
Guney Ozsan

Here are mine:

  • Crashplan: In case your HD dies.
  • Fork: Fluent and user friendly git client, actively maintained.
  • Affinity Photo & Designer: User first design suit. I use it as a helper when implementing designs. I also use it as a personal photo editor for my hobby photography.
  • Shopify: We use it for our ecommerce startup with my wife. I prefer it because of its near to none maintenance overhead.
  • iOS project builder: Allows building, signing and publishing for iOS without a Mac. Indispensible tool if you develop cross platform (Unity 3D developer here). Also makes you wonder how Xcode is an awful development pipeline.
  • Github: Bandwidth for my open source projects.
Collapse
agc93 profile image
Alistair Chapman

I'd definitely echo the suggestion for Affinity!

I only recently picked up Affinity Designer (on sale!) and it's been brilliant for a bunch of different things: rough designs, easier icon/svg editing, mockups for different form factors, all sorts of things.

Collapse
moopet profile image
Ben Sinclair

Stop spreading this misinformation

I'm not spreading misinformation. I'm saying that separation of concerns is still important, and that things like Tailwind - which is only what we're talking about because it's the flavour of the month - are making the web worse for everyone.

Please please please read this page with an open mind

I have. I read it the last time someone objected to my point. However, it says nothing to convince me it's a good idea. It has a section on "extracting classes", which I've ceded before as being an ok way to work, even if nothing novel - but that's not how people are using it. Including Tailwind themselves.

Collapse
gktim profile image
gkTim
  • Todoist
  • Gitkraken
  • Inkdrop
  • Wallaby JS

All great tools I use a lot

Collapse
zooly profile image
Hugo Torzuoli

The only tool I paid for is Codespace, a snippet manager. Else, I use free tools like VSCode, Sublime Merge, Insomnia

Collapse
brpaz profile image
Bruno Paz Author

Didn't know Codespace. It looks nice.

Collapse
sarehprice profile image
Sarah Price

I've never paid for any tools! In fact, I didn't realize that there were any you paid for except for fancy themes for websites or VS Code...

Collapse
renzodiaz profile image
Renzo Diaz

Take a look at Boostnote !

Collapse
vip3rousmango profile image
Al Romano

I use quite a few paid tools & services ...

Notion,
Todoist,
Sizzy App,
Freshbooks,
Zapier,
Affinity Suite (Designer, Photo, Publisher),
Backblaze,
Loom,
Content Snare,
DigitalOcean,
WPMU,
Tunnelbear

Collapse
davispeixoto profile image
Davis Peixoto

Basically Jetbrains tools.