Hi, I am a Javascript apprentice. Can you help me with my project?

- Sure! What do you need?

Oh, it’s very simple, I just want to make a static webpage that shows a clock with the real time.

- Wait, why static? Why not dynamic?

I don’t know, I guess it’ll be easier.

- Well, maybe, but that’s boring, and if that’s boring you are not going to put in time, and if you’re not going to put in time, it’s going to be harder; so it’s better to start with something harder in order to make it easier.

You know that doesn’t make sense right?

- When you learn Javascript you’ll get it.

Okay, so I want to parse this date first to make the clock be universal for all the regions.

- You’re not going to do that by yourself right? You know what they say, don’t repeat yourself!

But it’s just two lines.

- Don’t reinvent the wheel!

Literally, Javascript has a built in library for t...

- One component per file!

I’m lost.

- It happens, and you’ll get lost managing your files as well. You should use Webpack or Browserify for managing your modules.

Doesn’t Javascript include that already?

- Yes, but some people still have previous versions of ECMAScript, so it wouldn’t be compatible.

What’s ECMAScript?

- Javascript

Why is it called ECMAScript then?

- It’s called both ways. Anyways, after you install Webpack to manage your modules, you still need a module and dependency manager, such as bower, or node package manager or yarn.

What does that have to do with my page?

- So you can install AngularJS.

What’s AngularJS?

- A Javascript framework that allows you to do complex stuff easily, such as two way data binding!

Oh, that’s great, so if I modify one sentence on a part of the page, it will automatically refresh the other part of the page which is related to the first one and viceversa?

- Exactly! Except two way data binding is not recommended, since you don’t want child components to edit the parent components of your app.

Then why make two way data binding in the first place?

- It’s backed up by Google. You just don’t get it do you?

I have installed AngularJS now, but it seems I have to redefine something called a... directive?

- AngularJS is old now, you should start using Angular, aka Angular 2.

But it’s the same name... wtf! Only 3 minutes have passed since we started talking, how are they in Angular 2 already?

- You mean 3.

2.

- 3.

4?

- 5.

6?

- Exactly.

Okay, I now know Angular 6.0, and use a component based architecture using only a one way data binding, I have read and started using the Design Patterns already described to solve my problem without reinventing the wheel using libraries such as lodash and D3 for a world map visualization of my clock as well as moment to parse the dates correctly. I also used ECMAScript 6 with Babel to secure backwards compatibility.

- That’s good.

Really?

- Yes, except you didn’t concatenate your html into templates that can be under a super Javascript file which can, then, be concatenated along all your Javascript files and finally be minimized in order to reduce latency. And automate all that process using Gulp while testing every single unit of your code using Jasmine or protractor or just the Angular built in unit tester.

I did.

- But did you use TypeScript?

2010: PHP, CSS, Vanilla JS, and a LAMP Server.

Ah, the simple life.

2016: Node.js, React, Vue, Angular, AngularJS, Polymer, Sass, Less, Gulp, Bower, Grunt.

I can't handle this, I'm shifting domains to Machine Learning.

2017: Numpy, Scipy, TensorFlow, Theano, Keras, Torch, CNNs, RNNs, GANs and LOTS AND LOTS OF MATH!

Okay, okay. Calm down there fella.
JavaScript doesn't seem that complicated now, does it? 🙈

!rant

This was over a year ago now, but my first PR at my current job was +6,249/-1,545,334 loc. Here is how that happened... When I joined the company and saw the code I was supposed to work on I kind of freaked out. The project was set up in the most ass-backward way with some sort of bootstrap boilerplate sample app thing with its own build process inside a subfolder of the main angular project. The angular app used all the CSS, fonts, icons, etc. from the boilerplate app and referenced the assets directly. If you needed to make changes to the CSS, fonts, icons, etc you would need to cd into the boilerplate app directory, make the changes, run a Gulp build that compiled things there, then cd back to the main directory and run Grunt build (thats right, both grunt and gulp) that then built the angular app and referenced the compiled assets inside the boilerplate directory. One simple CSS change would take 2 minutes to test at minimum.

I told them I needed at least a week to overhaul the app before I felt like I could do any real work. Here were the horrors I found along the way.

- All compiled (unminified) assets (both CSS and JS) were committed to git, including vendor code such as jQuery and Bootstrap.
- All bower components were committed to git (ALL their source code, documentation, etc, not just the one dist/minified JS file we referenced).
- The Grunt build was set up by someone who had no idea what they were doing. Every SINGLE file or dependency that needed to be copied to the build folder was listed one by one in a HUGE config.json file instead of using pattern matching like `assets/images/*`.
- All the example code from the boilerplate and multiple jQuery spaghetti sample apps from the boilerplate were committed to git, as well as ALL the documentation too. There was literally a `git clone` of the boilerplate repo inside a folder in the app.
- There were two separate copies of Bootstrap 3 being compiled from source. One inside the boilerplate folder and one at the angular app level. They were both included on the page, so literally every single CSS rule was overridden by the second copy of bootstrap. Oh, and because bootstrap source was included and commited and built from source, the actual bootstrap source files had been edited by developers to change styles (instead of overriding them) so there was no replacing it with an OOTB minified version.
- It is an angular app but there were multiple jQuery libraries included and relied upon and used for actual in-app functionality behavior. And, beyond that, even though angular includes many native ways to do XHR requests (using $resource or $http), there were numerous places in the app where there were `XMLHttpRequest`s intermixed with angular code.
- There was no live reloading for local development, meaning if I wanted to make one CSS change I had to stop my server, run a build, start again (about 2 minutes total). They seemed to think this was fine.
- All this monstrosity was handled by a single massive Gruntfile that was over 2000loc. When all my hacking and slashing was done, I reduced this to ~140loc.
- There were developer's (I use that term loosely) *PERSONAL AWS ACCESS KEYS* hardcoded into the source code (remember, this is a web end app, so this was in every user's browser) in order to do file uploads. Of course when I checked in AWS, those keys had full admin access to absolutely everything in AWS.
- The entire unminified AWS Javascript SDK was included on the page and not used or referenced (~1.5mb)
- There was no error handling or reporting. An API error would just result in nothing happening on the front end, so the user would usually just click and click again, re-triggering the same error. There was also no error reporting software installed (NewRelic, Rollbar, etc) so we had no idea when our users encountered errors on the front end. The previous developers would literally guide users who were experiencing issues through opening their console in dev tools and have them screenshot the error and send it to them.
- I could go on and on...

This is why you hire a real front-end engineer to build your web app instead of the cheapest contractors you can find from Ukraine.

brew install node
npm install bower
bower install jquery

When Bower works but NPM doesn't.

How many programmers does it take to change a light bulb?
None. They just change the environment to dark.

Grunt, gulp, bower, webpack, rollup, yarn, npm, requirejs, commonjs, browserify, brunch, rollup, parcel, fusebox, babel,
wrappers for bundlers, frameworks on frameworks, then for css, theres scss, sass, less, stylus, compass, and for templates, handlebars, mustache, nunjucks, underscore, ejs, pug, jade, and about five billion other word-salad tools, all with their own CLIs, each in some way building on npm, but with their own non-congruent little syntax, like no one realized they were reinventing the same problems introduced by domain specific languages, most happy to announce "configuration takes a little time, but it's worth it!"

No, it's not. Just stop people. Just stop. You're not doing anyone any favors by creating another lib, all you're doing is tooting your own horn and self promoting. Use what exists and stop creating more shit for new people to learn, to add to the giant clusterfuck that is the 2019 hotmess known as "web development."

You're not special. You're not important. You're lib or tool will be famous for 15 minutes and no one cares what you've made.

If you want to contribute to web development, do us all a favor and contribute to global sanity by kindly deleting your contribution and any plans to contribute new solutions to problems that have already been solved.

Really, I hate this composer / bower / npm shitholes!

Why the hell is my app 300MBs?!? Because that shitty pudding composer decided to download the ENTIRE git including README.md, examples, 5 hours of assembly-giraffe porn, my granny's pajamas and two wraps of kebabs!

How hard is it to define the folder that contains the REQUIRED library so that our project might stay at 5MBs instead of 300?

Oh yes, I very much like you, Mr. 1337-DevPro-Ultra-Haxxor. Thank you for using a boilerplate from github, that is bloated like some random female pr0nstar after an orgy. Oh and it is also very funky of you, that the setup scripts and tasks only work on Apple OSX, because using a simple gulpfile with 3 npm dependencies and 5 lines of code would not be trendy enough.

Some JS "devs" should be punished by drowning in their own feces aka a mix of bower, yarn, npm, brew and the crusty stuff that is left behind after running it.

You know it's 2016 when you have to download a package manager to download a package manager to... :S

There are a shitload of them.

!rant
I recently moved all our tasks from grunt to gulp and integrated bower as the front end package manager. Also I wrote a lot of guides to set up standards and how-to for the team.
It's my 3rd month in my job and first major work. It took me more than a month to completely set it up and train everyone to use those new integrations.
Today all my seniors applauded my efforts. So much happiness 😀

You know... fuck frontend development.

I don't mind developing a nice interface and thinking about how users will work with my software. But I HATE (lack of a stronger word) the whole npm/grunt/bower/yarn/everyfuckingframeworkclient chaos.

Can we just pick ONE fucking tool and mature it.

...

There

It literally just happened:

my boss taught me how to use npm, bower and similar to have plugins while developing websites.

This time around we had a project which is divided among different repositories.

One was a foundation project using npm to build, the other one was a socket.io server, using actual nodejs

boss thought: "well they both have node_modules, let's merge them and merge the package.json as well

Nothing worked anymore.

For the dutch devs, I recieved this in my inbox today.

That moment when that peculiar fork of a library that one of your colleagues required in a project disappears on github.

I made sure to commit all changes (from my desktop) before leaving my home for the weekend so I can continue my project at the parents house (going for a monthly visit)..

I arrived, synced all my changes to my laptop, all good and well, going perfect. Updated the bower components etc. Time to start some test runs so I started my localhost, opened my browser,..Ended up with a MySQL errors galore.. Unknown table this and that.. I forgot the export my MySQL database :'( #fml

!rant

What are people thinking when they are building datepickers (or any type of angular/jQuery plugin for that matter)?

Lets put all of the code in one file, place everything that should be dynamic and optimizable in constants, provide no localization support, finish it all up, publish it to bower and npm (so poor devs won't have to struggle) and last but not least don't accept pull requests with useful features for months!

Damn frontend crap.

The fact that you have to mask all of the disease with processable versions of css, html & js is bad enough, but there are like 6 dialects of each bandaid, and every project has traces of each.

The the design kid tells me to run this grunt script, frontender number two screams "no, dont use grunt, we use gulp! or was it bower? I guess just run it through yeoman, it's easy!", after which the third fucking shitty hipster yells "No that's outdated, just edit the webpack file, and then run yarn install... oh but run npm upgrade --global yarn first"

Did you just fucking tell me to upgrade a fucking package manager with another package manager?

Composer, gem or cargo are not always without problems. But at least us backenders have our fucking shit together. The worst we have to deal with is choosing Python 2 vs 3, or porting some old code so the server can migrate to PHP7.

The next person to tell me they found this awesome tool to manage his other tools... I'll fucking throw your latte all over your wacom tablet.

Bower, YOU FUCKING PIECE OF CRAP PACKAGE MANAGER!

WHAT THE ACTUAL FUCK?

This asshole software is fucking with me and steals my time!

bower mapsjs-core#* cached e-tag:64e4e0850

bower mapsjs-core#* resolved e-tag:41af792c9

bower mapsjs-core#* install e-tag:41af792c9

What would you think is the installed version? WRONG! It's the fucking old cached version.

What the fuck is happening? Probably it's thinking "oh, this is the cached version, I'm looking if there is a new version for it. Yep, new version. I'll download it. But I have a cached version in the user home-directory, I better tell the that I installed the new version but take the old one."

Crap software.

F**king hate Windows for its insanely confusing proxy setup required for software development...

> Setup proxy in Windows network settings
> Then, setup HTTP_PROXY & HTTPS_PROXY environment variable at the system/user level.
> Followed by separate proxy settings for java, maven, docker, git, npm, bower, jspm, eclipse, VS Code, every damn IDE/Editor which downloads plugins...
> On top of everything, find out the domains which does not need to go through proxy and add them to NO_PROXY.. at each level..
> It does not end here. Sometimes, I need to setup proxy for SSH connections... like, if I have to use git with SSH and not HTTP/S... Uhhh....

More than half of the problems me and my dev team face is related to setting the right proxy. Why can't it be like, set in one place and everything picks up from there, like in any linux machine or for God's sake, a Mac ?

Worst of all is, my org uses a configuration script, which resolves into a list of proxy servers, from which one of them will be used. So, I need to download that script, find out which is the right proxy server and then, use it in all the aforesaid places... WTH ?????

Is this a common workplace problem for all developers ??? Will this be solved by Windows Subsystem for Linux ???

"Did I seriously just use brew to install NPM so that I could install bower so that I could use a Ruby gem?"

While setting up a node app while sitting behind draconian proxies:
- first, set $http_proxy & $https_proxy
- set git proxy
- then, npm proxy, jspm proxy and bower proxy
- followed by strictSSL to false.....
After moving to home network/VPN, change all of these proxies again. It is a never ending vicious circle :(

I have officially decided to use CI (Jenkins) at work because "apt-get update && apt-get upgrade -y && composer self-update && composer update && npm update -g && npm update && bower install --allow-root && gulp" after a pull doesn't seem healthy 😂

What are your favorite emoticons for working on automated cloud deployments or new open source integrations?

Just spent 4-5 hours debugging a failing staging deployment that was using Bower, among many other things.

Turns out bower has a feature where if any library in bower.json has been deleted, it just hangs, and silently waits for nothing.

Fuck bower, and fuck me for using it in 2014!

My ideal dev job, would be a job I can show compassion towards. A team I can be proud of and learn from. And a vibrant workspace with likeminded individuals who just want to improve themselves even if they feel their at their pinnacle.

My current office tries to make use of new technologies, we've embedded docker, vagrant, a few ci systems on an in need basis per team, and a lot of other tools.

My only real qualms are they feel indifferent towards new languages and eco systems ( Node.js, GoLang, etc ). Our web team is still using angular.js 1.x, bower, refuses to look into webpack or a new framework for our front end which is currently being bogged down by angulars dirty checking.

Our automated quality assurance team is forced to use Python for end to end testing, I've written an extensive package to make their lives easier including an entire JavaScript interface for dispatching events and properly interacting with custom DOMs outside of the scope of the official selenium bindings.

Our RESTful services are all using flask and Python, which become increasingly slow with our increase in services. I've pushed for the use of Node or GoLang with a GraphQL interface but I'm shot down consistently by our principle engineers who believe everything and anything must be written in Python.

I could go on, but tldr; I'm 21 and I have a ton of aspirations for web development. I'd like to believe I'm well rounded for my age, especially without any formal education. I'd love to be surrounded by individuals who want the same, to learn and architect the greatest platforms and services possible.

use apt-get to install node and npm, use npm to install bower, use bower to install angular... Packageception.

Is bower still a thing people use?

!rant

Is there somewhere an overview article/guide on the most popular software associated with web development? There are just so many technologies I know nothing about - Gulp, Grunt, Docker, Webpack, Bower and who knows what else..

Everyone seems to be using something else and it's just total chaos for me.

Pluralsight is so infuriating. First of all my trial lapsed (classiccc move) so I figured I would use it.

They’re content is so outdated.. it’s driving me mad. The past 3 courses have been 2+ years out of date.. and I get it, it’s a lot of work to maintain a course but could you not at least provide links or new annotations?

And I’m not talking a couple of package version updates where things change. This guy is using Bower which to my knowledge is pretty much deprecated and references yarn. Which completely breaks the course.

My thing is, why are you charging $30/month (i think), if I have to jump through these hoops to learn??? I was doing a great job of that on my own via google and YouTube.

The one Udemy course I bought is constantly being updated with notes and annotations and boy do I appreciate that. They’re marketing and cookies are toxic but at least the content is reliable.

PHP: Laravel, Phalcon, Composer
JavaScript: Node.js, Express.js, Restify, Sequelize, AngularJS, React, npm, bower
Python: Django, Flask, Requests, pip, SQLAlchemy
Java: Spring, Dropwizard, Hibernate
DB: MySQL, MariaDB, PostgreSQL, Cassandra

I love it when the bower_component/addon-name/addon-name.js ~ is what I expect it should be, but I still have to open a finder window and check every time to make sure. : /

It would be really nice if bower packages had a consistent naming convention as far as getting to the relevant file path. I'm always surprised how whacky it is. bower_component/special_plugin/code/dist/SpecialPlugin/Script.js ... nonsense!