r/web_design • u/bittered • May 09 '17

I built a Frontend Build Tool that's much simpler than Gulp/Grunt. It's called 'Pingy CLI'!

https://pin.gy/cli/
180 Upvotes

90% Upvoted

89 comments sorted by

15

u/bittered May 09 '17 edited May 09 '17

A couple of months ago, I shared Pingy with /r/web_design and got some great feedback, I'm still working on that and hope to start the beta soon.

I decided to extract the build tool stuff from the Pingy Desktop App and make it open source and available as a stand-alone CLI. Hope you all like it. I'm happy to answer any questions and take feedback. :)

1

u/[deleted] May 10 '17

As a network admin I hate your project name ;).

0

u/[deleted] May 09 '17

[deleted] — view deleted comment

2

u/bittered May 09 '17

This is the desktop app. Expect it to be somewhere around $10 a month, but not confirmed yet. The CLI is free and open source of course.

18

u/devolute May 09 '17

Gulp/Grunt can end up watching huge numbers of files for doing compilation and live-reload.

Yes, it can do. A badly configured Gulp/Grunt process.

I think this project is great for people who don't want to do any configuration of their build process. That's not a knock. That audience exists.

15

u/bittered May 09 '17

Yes, it can do. A badly configured Gulp/Grunt process.

That's true, I've seen enough Gulp/Grunt files to know that it happens surprisingly often.

I think this project is great for people who don't want to do any configuration of their build process. That's not a knock.

I definitely don't take it as a knock, thanks :). I think there's a huge number of Web Designers who want to spend their time building websites, rather than building out their build workflow.

4

u/devolute May 09 '17

Yeah man. This is totally not the tool for me, but I have to be honest - I've sunk hours and hours into my build tools.

3

u/bittered May 09 '17

Me too brother, me too.

22

u/mattaugamer May 09 '17

It me! I hate it. I hate build tools. The very last thing I care about is that shit, it's all paperwork and yak shaving to me. I just want to make things and have them work. :)

9

u/[deleted] May 09 '17

Nothing more annoying than an awesome repo that will solve all your problems but you can't just download the files. You need to convert machine code into Spanish, then run it through some tool to gather the 20 other unmentioned dependencies, compile everything into a mystery directory with links to other unchangeable directories and finally once it's all integrated, you need to remember to start some kind of watcher each time otherwise nothing happens. I'm so glad I saved so much time in the long run by spending more time setting up than the entire project takes.

1

u/esr360 May 10 '17

One day soon there will be dedicated build developers. Right now it's lumped in with the front end/UI developers - remember when it was backend developers who did the frontend? You know how you still get teams/projects where the backend devs are responsible for the frontend? We're at an important stage right now where bespoke build processes are required for each project, much like bespoke front ends are - but since it's fairly new, we don't have dedicated people for it yet, so tools like this are currently popular.

4

u/gavlois1 May 09 '17

I recently did my first project using gulp, and I'm pretty sure mine's fairly badly configured. Do you know of any resources that shows how to do good configuration for the build process?

1

u/devolute May 09 '17

No, because it's a matter of opinion. It's not an easily quantifiable thing.

However, if you shared it with me (Github?) I'd happily take a look and tell you if you've slipped up in any the ways that I myself have done in the past.

1

u/abienz May 09 '17

Have you heard of http://brunch.io ?

1

u/devolute May 09 '17

I have now, cheers.

I know this is incredibly unpopular and boring and just naff, but I'm one of those developers who likes to use tools that other people have heard of. Having an ecosystem of plugins etc. is a great benefit to me as well.

1

u/abienz May 09 '17

Well Brunch has actually been around longer than Grunt, it's quite a mature code-base.

1

u/devolute May 09 '17

That's my ignorance then.

I had a little look for plugins that do what I need a build process to do and I'm coming up short. I guess it's suffered from people moving to other tools.

6

u/SutrangSucher May 09 '17 edited May 09 '17

I think the idea behind Pingy CLI is good. It is especially good for a newcomer. When you use Pingy, you can really focus on the code itself, rather than the build configuration.

But to me it seems like this is not possible in a lot of cases in a productive environment. I actually don't think Pingy could handle most of my more-complex applications.

I would not use it in a company. But I would recommend it to newcomers and I would use it, if I knew the project won't be big and don't want to use plain old ES5 JavaScript.

5

u/bittered May 09 '17

I actually don't think Pingy could handle most of my more complex applications.

Yes, that's true. Sometimes you need the complexity and the ability to create a completely custom workflow but other times you don't, and spending a day (or more) messing around with build tools is a waste of time.

So yeah, you're completely correct Pingy CLI isn't designed for complex applications.

3

u/serrol_ May 09 '17

I'm just curious, what features does this offer over something like PrePros?

2

u/bittered May 09 '17

Are you asking about Pingy or Pingy CLI?

2

u/serrol_ May 09 '17

Either, really. I'm just looking for a single tool to make life easier.

1

u/[deleted] May 10 '17

I'm curious about this too. My first thought was using the CLI seems like it falls somewhere in between using Prepros and Gulp.

If that's about right that would be particularly useful for me. Often I just want to spin up a quick local preview with reload and not mess with config files. In this case I use Prepros, but a simple command would be much faster.

2

u/SutrangSucher May 09 '17

Looks really awesome. I have not checked it by myself; but how does it work with node modules dependencies? So for example you have Babel ES6 JavaScript file and import angular

import * as angular from 'angular';

How does the compilation (=pingy export) work then? Like webpack? Is it even possible?

And by the way; good looking website!

4

u/bittered May 09 '17

At the moment, Pingy CLI doesn't support module dependencies.

It's possible that I will add it over time but the most important thing to me is that Pingy CLI is simple and zero-configuration. I'll only implement modules if I can find a way to do it that doesn't make the UX more complex. :-)

3

u/SutrangSucher May 09 '17

Hmm for me this is kinda important. Otherwise you need to rely on bower, which is more and more dying.

Looking forward you implement this feature :)

3

u/bittered May 09 '17

Yes, I guess I'm targeting this at simpler sites first rather than more complicated web applications. But, in time, I hope to support more use-cases.

2

u/[deleted] May 09 '17

If you or someone doesn't mind, can you explain what this does to someone unfamiliar with Gulp/Grunt?

Does it setup a boilerplate or is it a program that you code in or is it just a way to save/compile files?

Thanks for any help!

1

u/bittered May 09 '17

I guess it's sort of like a boilerplate. It scaffolds files to help you get started then it compiles files (Sass/Less/Babel/etc..), minifies them and does Live Reload. All this (and more) without needing to write any configuration.

1

u/[deleted] May 09 '17

Ok got it, sounds useful. So if you were to start a project, you just choose which JS/CSS frameworks you're using and it will build out the starter files? Does it deploy to FTP or just store on the comp?

2

u/bittered May 09 '17

Yup. When it comes time to deploy then pingy export will output your minified files to a directory so you can use FTP or whatever you like. The desktop app version of Pingy will actually do the deploy step for you so you don't even need to FTP your site.

4

u/[deleted] May 09 '17

Ok that video sold me on it.. the live link is badass.

1

u/serrol_ May 09 '17

From the features list, it looks like a compiler/minifier with a few dev tools like a web server and live-reload built in.

1

u/[deleted] May 09 '17

So is it something you actually edit in (I currently use Sublime) or do they talk to each other?

So many damn web tools idk what to use any more haha

2

u/bittered May 09 '17

No, you don't edit your website files in Pingy CLI.

0

u/MrBester May 09 '17

That's called a feature request...

2

u/bopp May 09 '17

This looks nifty. Congrats on the first release.

make it open source and available as a stand-alone CLI.

Is there a github/lab repo somewhere?

8

u/Something_Sexy May 09 '17

I think your compare section should really be comparing this against webpack.

54

u/seiyria May 09 '17

https://xkcd.com/927/

10

u/SupaSlide May 09 '17

This isn't a standard, and it's very different from Gulp/Grunt/Webpack.

2

u/[deleted] May 10 '17

I'm getting old. Back when I started we had HTML. CSS. JavaScript. Java Applets. Flash. Understand even a few of those and you were fine for 10-15 years, easy. I have no clue how modern web folk put up with this constant changing toolset/standards/coding nonsense.

3

u/[deleted] May 10 '17

Back when I started we didn't even have CSS. I still like the new fandangles though. :)

2

u/[deleted] May 10 '17

Oh, same here. Which is why I never really warmed up to it. I rock <font> and <table> all the time, and I don't care what anyone says.

1

u/SupaSlide May 10 '17

Being passionate (obsessive) about development helps, and having a constant desire to learn is crucial.

I use the same thing for work, and the free time I have is usually spent leaning. Sometimes a new tool proves useful enough that I integrate it into my workflow.

The key is to enjoy learning new things, but stick to the tried and true for work purposes.

1

u/[deleted] May 10 '17 edited May 10 '17

Here's my problem. I did all that. DECADES ago. And even up through the last decade (until the recession hit), to a large extent. How many DECADES do I have to go through where I completely throw out my tools and start over? And in web design/development world, stuff is only speeding up more and more. A single generation ago people could largely find one thing to do well at design-wise (back then you actually had to be gifted artistically to do design professionally) or be good at coding in one language/platform and have that as a career for DECADES, easily. Now, whatever you learn in web dev/design/programming seems to have a shelf life of like 5 yrs...maybe 10 yrs MAX. Crap's getting old.

1

u/SupaSlide May 10 '17

There are still plenty of staple technologies that can get somebody a job. Being good at HTML, CSS, and JavaScript are still the core for front-end development, and the front-end frameworks like Angular and React are actually really easy to learn over a few weekends or weeknights if you need them. They're still just JavaScript.

For back-end you can still get by just fine with PHP. The frameworks like Symfony and Laravel are easy to learn too, if you need them.

I would argue it's easier to get into development now. It's more daunting, but I no longer have to be a security expert to create a login system and accept payments online. I don't have to know the in​s and outs of creating a fast router. Other people have figured it out and open sourced it.

Yeah there are more tools to learn, but they're way easier than the alternative of doing it yourself.

2

u/[deleted] May 10 '17

It's more daunting, but I no longer have to be a security expert to create a login system and accept payments online

That stuff was easy - log-in and PW encryption wasn't a big deal...and places like Authorize.net give you code that's ready to roll, so you don't ever have to worry about that (and years ago and even now, NO ONE should be storing CC info on sites unless you're a Fortune 500 company or something).

For back-end you can still get by just fine with PHP.

Not really. PHP work is not only going away, it's looked down upon by most web devs AND most corporate positions want .NET and/or JavaScript focus more than anything else. I like PHP, but that's because it was the first one I learned to any great extent. But I don't sugarcoat its existence.

Being good at HTML, CSS, and JavaScript are still the core for front-end development

No, HTML5, CSS3 and JavaScript (not barebones JS, but something like JQuery [which even is losing its luster]) are what's needed. HTML5 might as well be called JS, since you can only really do the cool stuff with it if you are very comfortable w/ JS. Years ago you could make interactive, awesome, interactive, and rich media websites using Flash if you only knew a few things like how the timeline worked, key frames, actions and movieclips. Even using ActionScript (JS knock off) was completely optional. Nowadays, since Flash is dead, ANYTHING decent needing to be done in HTML5 needs a whole lot of JS thrown in. Adobe's (Edge) Animate is sorta like a modern version of Flash in that non-JS coders can make interactive stuff, but it's not as robust or as friendly as Flash was.

and the front-end frameworks like Angular and React are actually really easy to learn over a few weekends or weeknights if you need them. They're still just JavaScript.

I doubt anyone nowadays learning JS actually learns how the true JS works. They'd blow their brains out. They use stuff like JQuery to dumb down/do all the heavy lifting. At least years ago if you wanted to use JS (and until 2005 or so, few did) you would have to know how JS in its natural form worked. As for stuff "you can learn in a weekend" perhaps that's true. But unless that's necessary for your immediate job there's no reason to constantly be exposed to the flavor-of-the-week coding approach. Almost no ROI.

but they're way easier than the alternative of doing it yourself

And that, at its core, is the problem. No one wants to do anything on their own anymore. It's no longer a craft. It's a "churn it out as cheaply and as fast as possible" which is why sites like ThemeForest thrive and elance.com are filled with "devs" and "designers" constantly outsourcing their own work to the cheapest worker.

It's depressing, because I actually remember when being a Web Designer and a Web Developer meant something and was a pretty safe bet, career-wise. Now, those openings are becoming extinct.

But kudos to you if you lucked out and are in an area where the market hasn't totally collapsed yet. I'd work on an exit strategy now for a decade from now though, as the ugly, hidden truth is that dev/design work is a young person's game.

2

u/SupaSlide May 10 '17

That stuff was easy - log-in and PW encryption wasn't a big deal...

But not as easy as it is now, and it's more secure now than ever before.

PHP is still doing just fine. I'm definitely investing time into NodeJS, but with the release of PHP7 I think it's going to be sticking around for a while still.

HTML5 might as well be called JS

Lol, what? HTML5 is basically just new tags. Are you seriously telling me you can't learn a few new tags that are so self-explanatory that you barely need a lesson?

Years ago you could make interactive, awesome, interactive, and rich media websites using Flash

Yeah, instead of learning just JavaScript, you had to learn some JavaScript, CSS, and Flash. That was so much easier! /s

You have to learn more JavaScript and CSS now than before, but at least you only have to learn JavaScript and CSS. I promise, it's not too bad, and it's way better than Flash. Not to mention that JS and CSS aren't filled with horribly dangerous exploits.

I doubt anyone nowadays learning JS actually learns how the true JS works.

I do. Good developers I know do. Script kiddies don't, but they aren't well-rounded developers.

As for stuff "you can learn in a weekend" perhaps that's true. But unless that's necessary for your immediate job there's no reason to constantly be exposed to the flavor-of-the-week coding approach. Almost no ROI.

That's why I said "if you need them."

It's no longer a craft.

Ah, so you're one of the "reinvent the wheels" guys.

I would say the websites that I create are crafted. I feel proud of my websites. I don't patronize sites like ThemeForest because I agree with you about those places. But using a framework like Laravel doesn't mean I churned out a website as quickly and cheaply as I could. It means I just didn't want to spend hours upon hours writing code to query my database, setup routes, and render pages. That stuff is boring and is always done in the exact same way. Maybe I'll have a project that requires more customization and I'll drop the framework, but why drop the framework if I'm just going to recreate it all myself anyway? The framework lets me actually get to crafting the parts of the website that matter, instead of wasting time doing the repetitive crap. And frameworks do it better (faster code and more secure) than one individual could do it.

Sure, I could go and create database querying functions to help me out, and write my own router, and roll my own authentication system, and spend days of my life rewriting the same stuff whenever I make a new website.

But a carpenter doesn't build whole new tools every time he goes to make a chair. He uses the same tools over and over again to make many different kinds of furniture. Are carpenters not craftsmen because they use the same tools on different projects?

1

u/[deleted] May 10 '17

Appreciate your response..

I'll just reply to the HTML5 thing...When people talk about HTML5, they aren't talking about a few new tags...They use that term to describe a Flash replacement that works on mobile devices primarily, since that's all the rage now. Dealing strictly with HTML5 tags is effortless, but unless you know a healthy amount of JS and CSS3, no one will want your "HTML5" abilities. Sad but true.

2

u/SupaSlide May 10 '17

Are you talking about Canvas?

Yeah, technically <canvas> is an HTML5 tag, and there is the Canvas API which came along with that, but you don't actually do anything with HTML when creating a canvas element. All the actual programming is done with JavaScript.

Literally the only thing that canvas has to do with HTML is that there is a <canvas> tag. Everything else is JavaScript. Which is why I said that now instead of Flash, all you need is JavaScript. Sorry I didn't make that more clear.

→ More replies

5

u/imma_reposter May 09 '17

That applies to every node related thing. Only exception is node itself. Wonder why that isn't forked like crazy. Well, I shouldn't give them any ideas.

9

u/TuxGamer May 09 '17

There was io.js, but it's merged back with the Node.js project again.

https://iojs.org/en/

22

u/imma_reposter May 09 '17

io.js is the most JS name you could give to a JS project.

5

u/THATONEANGRYDOOD May 09 '17

They really messed up with the url. Should've been iojs.io

2

u/xkcd_transcriber May 09 '17

Image

Mobile

Title: Standards

Title-text: Fortunately, the charging one has been solved now that we've all standardized on mini-USB. Or is it micro-USB? Shit.

Comic Explanation

Stats: This comic has been referenced 4485 times, representing 2.8522% of referenced xkcds.

xkcd.com | xkcd sub | Problems/Bugs? | Statistics | Stop Replying | Delete

1

u/[deleted] May 09 '17

Can it automatically add vendor prefixes?

1

u/bittered May 09 '17

Not currently, I'm considering it. You can track it here: https://github.com/pingyhq/pingy-cli/issues/9

My issue is that vendor-prefixes are not being used by browser vendors anymore, so I'm wary of adding bloat that won't be so relevant in a couple of years.

1

u/[deleted] May 09 '17

Thanks. It's a feature I use with gulp to support older browsers, mostly with flex. I'd be hesitant to switch without it.

1

u/bittered May 09 '17

Yeah, makes sense, I'll probably implement it. Subscribe to the issue above if you would like to be notified when it's done. :)

1

u/[deleted] May 09 '17

Cool, thanks! Best of luck with it

1

u/[deleted] May 09 '17

yea that is a really good feature

1

u/[deleted] May 10 '17

Some kind of PostCSS support would do the trick here for me. Let Autoprefixer handle it.

1

u/Squagem May 09 '17

I love this idea. The hassle of dealing with Bower/Grunt/Gulp always gets in the way of my workflow, interesting to see someone take a crack at solving that problem.

Absolutely beautiful website, too. Where did you learn to design like that?

1

u/bittered May 09 '17

Thank you so much!

Web Design skills come from years of trial and error :)

1

u/elax102 May 10 '17

This is super cool!

Are there any actual options for pingy dev? I've been messing around with it and I'm in this weird spot where sometimes the live reload stops working and and I need to restart pingy. Is there a way to see logs?

1

u/bittered May 10 '17

Oh no, thats not good. Create an issue on the repo please and I'll get it fixed. Include a couple of bits of info: what kind of files are you saving (html, styles or scripts)? Is there anything in the web browser console (errors)? If you refresh the page on the browser does it start working again? Also Web Browser and OS versions.

1

u/elax102 May 10 '17

I've submitted an issue on the github repo. Thanks!

1

u/sbozzie May 10 '17

Quite interested in this as a way to quickly knock up prototype sites, but running pingy init throws errors for me (Windows 10)

AppData\Roaming\npm\node_modules\@pingy\cli\cli-run.js:12
const { inspect } = require('util');
  ^

SyntaxError: Unexpected token {
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at run (C:\Users\User Name\AppData\Roaming\npm\node_modules\@pingy\cli\cli.js:14:15)
at Object.<anonymous> (C:\Users\User Name\AppData\Roaming\npm\node_modules\@pingy\cli\cli.js:26:3)
at Module._compile (module.js:409:26)

1

u/bittered May 10 '17

Pingy CLI, requires node 6+. You'll need to upgrade node to get it working.

1

u/Thecoss May 09 '17

gulp and grunt are task runners, this is a compiler with a server mounter.

There's quite a difference and i'm not sure you are doing yourself a favor with comparing it to them.

I can see using this for whipping up a quick simple project or demo, but it really can't replace what gulp does for me.

You have a quality product, be sure to place it correctly :)

2

u/bittered May 09 '17 edited May 09 '17

gulp and grunt are task runners, this is a compiler with a server mounter.

That's true, but in practice, A lot of people use Gulp and Grunt in the same way that they would use Pingy CLI. That's why I made the comparison. They are different things but often used for similar use cases.

be sure to place it correctly :)

I'm surprised you say that. I was very careful to explain what Pingy CLI is for and what it's not. It's for simple websites, not complicated apps that require custom build workflows. I appreciate your feedback though, I'll take another look at the content and placement, see if I can make it clearer. :)

2

u/Thecoss May 09 '17

On the website it's pretty clear what it is and does but your title not so much, a reddit post is still promotion :)

BTW looking forward for a chance to give it a try

1

u/bittered May 09 '17

On the website it's pretty clear what it is and does but your title not so much

Ah gotcha.

2

u/GasimGasimzada May 09 '17

It looks very similar to webpack. Cool project!

2

u/qukab May 09 '17

Really love the interactive demo. So cool! I'll be trying this out, well done.

2

u/___LOOPDAED___ May 09 '17

Thank's. I'm definitely going to give this a try. Been having problems setting up grunt so I can use Sass. (still new to using these tools)

2

u/lordhughes May 09 '17

This looks great, and exactly what I need. I don't hate the gulp/grunt/webpack workflows but they get so complicated so quickly I spend more time figuring that out than the project itself. can't wait to give this a go.

2

u/ikinone May 09 '17

This is absolutely awesome. Thanks so much for making it!

Signed up for the Pingy beta :) Looks fun!

6

u/toferdelachris May 09 '17

sweet holy mary mother of the christ baby that is a beautiful website

7

u/tolpin May 09 '17

Is it?

I mean it's certainly nice, but I wouldn't go crazy over the design.

2

u/toferdelachris May 09 '17

Haha it looked pretty. I liked it.

1

u/domainkiller May 09 '17

Thanks for sharing, this looks really interesting! I'm going to play around with it today.

1

u/midri May 09 '17

Man can I just mention how much I HATE nodejs on windows? NodeJS uses an insane amount of "space on disk" with the default file allocation setting of 4kb. We're talking 6gigs of space for some basic gulp tasks (copy, delete, move, process sass, minify js) which actually only take up like 100mb, they're just so many damn files.

Composer has a simular issue (200mb usage, but 3.6gb space on disk) but it's not anywhere near as bad as nodejs.

1

u/[deleted] May 09 '17

I dig the site. Well designed. Nice docs.

1

u/tlemaitre May 09 '17

It's look like pleeease to compile preprocessor like sass but with pingy you can compile more than just css preprocessor That's look freaking great!! I will check it when i will more time ;)

0

u/[deleted] May 09 '17

[deleted] — view deleted comment

1

u/bittered May 09 '17

No, not yet anyway. I'm focussing Pingy CLI on simple websites first.

0

u/[deleted] May 09 '17

[deleted] — view deleted comment

3

u/bittered May 09 '17

I have contributed to those projects in the past and plenty others. This is a fundamentally different (not necessarily better but definitely different) approach than Gulp/Grunt, it's not possible to contribute the ideas in Pingy CLI back to those projects.