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?

!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.

I recently joined the dark side - an agile consulting company (why and how is a long story). The first client I was assigned to was an international bank. The client wanted a web portal, that was at its core, just a massive web form for their users to perform data entry.

My company pitched and won the project even though they didn't have a single developer on their bench. The entire project team (including myself) was fast tracked through interviews and hired very rapidly so that they could staff the project (a fact I found out months later).

Although I had ~8 years of systems programming experience, my entire web development experience amounted to 12 weeks (a part time web dev course) just before I got hired.

I introduce to you, my team ...

Scrum Master. 12 years experience on paper.
Rote memorised the agile manifesto and scrum textbooks. He constantly went “We should do X instead of (practical thing) Y, because X is the agile way.” Easily pressured by the client to include ridiculous (real time chat in a form filling webpage), and sometimes near impossible features (undo at the keystroke level). He would just nag at the devs until someone mumbled ‘yes' just so that he would stfu and go away.

UX Designer. 3 years experience on paper ... as business analyst.
Zero professional experience in UX. Can’t use design tools like AI / photoshop. All he has is 10 weeks of UX bootcamp and a massive chip on his shoulder. The client wanted a web form, he designed a monstrosity that included several custom components that just HAD to be put in, because UX. When we asked for clarification the reply was a usually condescending “you guys don’t understand UX, just do <insert unhandled edge case>, this is intended."

Developer - PHD in his first job.
Invents programming puzzles to solve where there are none. The user story asked for a upload file button. He implemented a queue system that made use of custom metadata to detect file extensions, file size, and other attributes, so that he could determine which file to synchronously upload first.

Developer - Bootlicker. 5 years experience on paper.
He tried to ingratiate himself with the management from day 1. He also writes code I would fire interns and fail students for. His very first PR corrupted the database. The most recent one didn’t even compile.

Developer - Millennial fratboy with a business degree. 8 years experience on paper.
His entire knowledge of programming amounted to a single data structures class he took on Coursera. Claims that’s all he needs. His PRs was a single 4000+ line files, of which 3500+ failed the linter, had numerous bugs / console warnings / compile warnings, and implemented 60% of functionality requested in the user story. Also forget about getting his attention whenever one of the pretty secretaries walked by. He would leap out of his seat and waltz off to flirt.

Developer - Brooding loner. 6 years experience on paper.
His code works. It runs, in exponential time. Simply ignores you when you attempt to ask.

Developer - Agile fullstack developer extraordinaire. 8 years experience on paper.
Insists on doing the absolute minimum required in the user story, because more would be a waste. Does not believe in thinking ahead for edge conditions because it isn’t in the story. Every single PR is a hack around existing code. Sometimes he hacks a hack that was initially hacked by him. No one understands the components he maintains.

Developer - Team lead. 10 years of programming experience on paper.
Writes spaghetti code with if/else blocks nested 6 levels deep. When asked "how does this work ?”, the answer “I don’t know the details, but hey it works!”. Assigned as the team lead as he had the most experience on paper. Tries organise technical discussions during which he speaks absolute gibberish that either make no sense, or are complete misunderstandings of how our system actually works.

The last 2 guys are actually highly regarded by my company and are several pay grades above me. The rest were hired because my company was desperate to staff the project.

There are a 3 more guys I didn’t mention. The 4 of us literally carried the project. The codebase is ugly as hell because the others merge in each others crap. We have no unit tests, and It’s near impossible to start because of the quality of the code. But this junk works, and was deployed to production. Today is it actually hailed as a success story.

All these 3 guys have quit. 2 of them quit without a job. 1 found a new and better gig.

I’m still here because I need the money. There’s a tsunami of trash code waiting to fail in production, and I’m the only one left holding the fort.

Why am I surrounded by morons?
Why are these retards paid more than me?
Why are they so proud when all they produce is trash?
How on earth are they still hired?

And yeah, FML.

Today was the first time I was able to develop a full stack by my self!!!!
(I mean not by myself, StackOverflow was my Bible)

It's a small project with three modules , and while I've worked front end, back end and machine learning separately, I used to develop on a single component.

Today I built all the components on my own.

The hardest part was linking the nodejs file with the python script. Which seemed easy at first but then I needed to go through the documentation to understand the working behind the scenes.

Just looking how to deploy it now

This is a victory rant.
While it is not something big I feel so proud of myself 🥰

Fuck Unity.
Every single time I try to use Unity to develop my well-along-in-development video game, it finds some way of fucking itself up.
Be it from somehow failing to compile a DLL - which is something completely out of my control, the inspector failing to update itself when I select a new object every five minutes, to the engine managing to fail to load its UI layout because it somehow managed to lose a file responsible for containing the layout, the Inspector forgetting to include a scrollbar and as such trying to cram a bunch of components into one area, crashing in a certain area because I tried using reflections, crashing because I tried running the game in a place that always works, all the way to the whole thing closing instantaneously when I try selecting a new layout.
My experience with using this god-forsaken configuration of code and imagery has been one of endless torment; I've spent hours lamenting about the pain this piece of utter horseshit has caused me to those who'd listen.
I don't know what I did to this thing to deserve to be shown the absolute worst of this engine for the year I've been working on my game for. I can't even take a look at its source code to see if I can piece together things I'll pick up from alien code to fix obnoxious bugs myself because you cunts have it under lock-and-key for some dumbass reason.
Even updating my install of this engine is a gamble; I remember clear-as-day updating my project from 2019.3.14 to whichever one was most recent at the time, and everything breaking. This time, I got lucky and managed to update to 2020.1.4 with no issue on the surface, except I inadvertently let in a host of other issues that somehow made the editor worse than the older one.
There's little point in even bothering to report a bug because this shit happens so randomly that I could be just working on auto-pilot and the next thing I know Unity's stupid "crash handler" rears its ugly head yet again, or you people are probably too busy adding support for platforms no sane person uses like fucking Chromebooks.
There've been times where it's crashed upwards of three times in the span of 40 minutes of light use.
How is one expected to cough up hundreds of dollars a year to use a "pro" version of this horrid editor when every session of use yields a 50/50 chance that it'll either work like it's supposed to, or break in one way or another?
It's a miracle I even managed to type all of this out in one go, I expected the website to just stop responding entirely once I got past four lines.
Do what you will with my post, I don't care.

5000 scss file with the name global.scss styling.

How fucking dumb can you be to fucking mess up a clean component based architecture like Foundation or Bootstrap and fill it with shit in a single file.

No wonder WP gets shit. The legacy code is usually shit.

And to put the shit cherry on top. This motherfucker had a settings.scss file with all general components and he never used it.

Fucker put different font size in px everywhere! Fucking asshole!!!

Just gonna leave this here because I am too lazy to write a proper article for my website:
If anyone is trying to create a Vue.js website with Node.js backend do NOT use express-vue, it is unnecessarily complicated and broken. Instead use this method I found.
You will need:
- IntelliJ IDEA / WebStorm / other IDE supporting multiple modules per project and tasks
- Nodejs and npm
- vue-cli

Step by step:
1. Create new empty project
2. Add your frontend module using vue-cli generator
3. Add your backend module using Express generator
4. Run npm build in your frontend module once
5. Move or remove public folder in your backend module
6. Create a symlink from your backend module root called public pointing to dist folder in your frontend module root
7. Make sure to add "Run npm build" from frontend module to your "bin/www" task (default task for Express module)
8. Enjoy developing your REST API in Node/Express and your frontend in Vue.js with single-file components and it being served by the same server that is providing the backend.
(Since they are separate modules and you are not mixing webpack and Node/Express you can add ts-loader, stylus-loader, pug-loader or any other loaders without screwing anything up)

For deployment you just need to copy the contents of dist into public on the server. (and not upload the symlink)

Angular is not fun to work with. The amount of jumping between files to do a thing is tiring. And its documentation fucking sucks.

I guess I'm just used to single file components and Laravel's amazing docs...

Angular 2+, it's just so elaborate, and over the top complicated. On larger projects it easily becomes a mess. I started a new job where I inherited a angular 2+ project, that is terribly made, it's so frustrating. I now use Vue.js 2, and it's just so beautiful, especially single file components :D

Sharing a first look at a prototype Web Components library I am working on for "fun"

TL;DR left side is pivot (grouped) table, right side is declarative code for it (Everything except the custom formatting is done declaratively, but has the option to be imperative as well).

====

TL;DR (Too long, did read):

I'm challenging myself to be creative with the cool new things that browsers offer us. Lani so far has a focus on extreme extensibility, abstraction from dependencies, and optional declarative style.

It's also going to be a micro CSS framework, but that's taking the back-seat.

I wanted to highlight my design here with this table, and the code that is written to produce this result.

First, you can see that the <lani-table> element is reading template, data, and layout information from its child elements. Besides the custom highlighting code (Yellow background in the "Tags" column, and green gradient in the "Score" column), everything can be done without opening even a single script tag.

The <lani-data-source> element is rather special. It's an abstraction of any data source, and you, as a developer can add custom data sources and hook up the handlers to your whim (the element itself uses the "type" attribute to choose a handler. In this case, the handler is "download" which simply sends a fetch request to the server once and downloads the result to memory).

Templates are stored in an html file, not string literals (Which I think really fucks the code) and loaded async, then cached into an object (so that the network tab doesn't get crowded, even if we can count on the HTTP cache). This also has the benefit of allowing me to parse the HTML templates once and then caching the parsed result in memory, so templates are never re-parsed from string no matter how many custom elements are created.

Everything is "compiled" into a single, minified .js file that you include on your page.

I know it's nothing extraordinary, but for something that doesn't need to be compiled, transpiled, packaged, shipped, and kissed goodnight, I think it's a really nice design and I hope to continue work on it and improve it over time

My work product: Or why I learned to get twitchy around Java...

I maintain a Java based test system, that tests a raster image processor. The client is a Java swing project that contains CORBA bindings to the internal API of the raster image processor. It also has custom written UI elements and duplicated functionality that became available in later versions of Java, but because some of the third party tools we use don't work with later versions of Java for some reason, it's not possible to upgrade Java to gain things as simple as recursive directory deletion, yes the version of Java we have to use does not support something as simple as that and custom code had to be written to support it.

Because of the requirement to build the API bindings along with the client the whole application must be built with the raster image processor build chain, which is a heavily customised jam build system. So an ant task calls out to execute a jam task and jam does about 90% of the heavy lifting.

In addition to the Java code there's code for interpreting PostScript files, as these can be used to alter the behaviour of the raster image processor during testing.

As if that weren't enough, there's a beanshell interface to allow users to script the test system, but none of the users know Java well enough to feel confident writing interpreted Java scripts (and that's too close to JavaScript for my comfort). I once tried swapping this out for the Rhino JavaScript interpreter and got all the verbal support in the world but no developer time to design an API that'd work for all the departments.

The server isn't much better though. It's a tomcat based application that was written by someone who had never built a tomcat application before, or any web application for that matter and uses raw SQL strings instead of an orm, it doesn't use MVC in any way, and insane amount of functionality is dumped into the jsp files.

It too interacts with a raster image processor to create difference masks of the output, running PostScript as needed. It spawns off multiple threads and can spend days processing hundreds of gigabytes of image output (depending on the size of the tests).

We're stuck on Tomcat seven because we can't upgrade beyond Java 6, which brings a whole manner of security issues, but that eager little Java updated will break the tool chain if it gets its way.

Between these two components we have the Java RMI server (sometimes) working to help generate image data on the client side before all images are pulled across a UNC network path onto the server that processes test jobs (in PDF format), by reading into the xref table of said PDF, finding the embedded image data (for our server consumed test files are just flate encoded TIFF files wrapped around just enough PDF to make them valid) and uses a tool to create a difference mask of two images.

This tool is very error prone, it can't difference images of different sizes, colour spaces, orientations or pixel depths, but it's the best we have.

The tool is installed in both the client and server if the client can generate images it'll query from the server which ones it needs to and if it can't the server will use the tool itself.

Our shells have custom profiles for linking to a whole manner of third party tools and libraries, including a link to visual studio 2005 (more indirectly related build dependencies), the whole profile has to ensure that absolutely no operating system pollution gets into the shell, most of our apps are installed in our home directories and we have to ensure our paths are correct for every single application we add.

And... Fucking and!

Most of the tools are stored as source bundles in a version control system... Not got or mercurial, not perforce or svn, not even CVS... They use a custom built version control system that is built on top of RCS, it keeps a central database of locked files (using soft and hard locks along with write protecting the files in the file system) to ensure users can't get merge conflicts by preventing other users from writing to the files at all.

Branching is heavy weight and can take the best part of a day to create a new branch and populate the history.

Gathering the tools alone to build the Dev environment to build my project takes the best part of a week.

What should be a joy come hardware refresh year becomes a curse ("Well fuck, now I loose a week spending it setting up the Dev environment on ANOTHER machine").

Needless to say, I enjoy NOT working with Java. A lot of this isn't Javas fault, but there's a lot of things that Java (specifically the Java 6 version we're stuck on) does not make easy.

This is why I prefer to build my web apps in python or node, hell, I'd even take Lua... Just... Compiling web pages into executable Java classes, why? I mean I understand the implementation of how this happens, but why did my predecessor have to choose this? Why?

What are your opinions of single file components in Vue? Will it actually help maintainability down the road for our codebase? Or do you think it’s better to separate the .js, .sass, and .vue?

I implore ANYONE... please...

Have you EVER written a SINGLE Jest test that didn't have some sort of bullshit spewing stuff like this:

"ReferenceError: You are trying to `import` a file after the Jest environment has been torn down."

"Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."

and yet running on a device, features work flawlessly and quite well, no errors or even warnings in sight logged

This is the most fragile pile of garbage I have ever seen.

I hate this.

inb4 your stupid ass todo boilerplate garbage you wrote tests for in freshman year. i'm talking about a REAL app with HUNDREDS of components.

where the grownup testing tools at? it's a question I've still not answered after a year of fucking around with this framework

Pretty niche tool, but Sencha Architect!
It is a wanna be GUI-Builder/IDE for ExtJS, but neither works properly.
This rant is not about ExtJS, just about Sencha Architect, which my coworkers and I were forced to use.
If you want to join the ride, here an excerpt of just some of the issues:

- installation: already the setup is more of a gamble than an actual setup, either it works on your machine or it doesn't, plain and simple

- GUI Builder: just drag and dropping components is actually nice, but the editing capabilities are frustrating, you can't edit the UI code by hand at all, just through pre defined properties. If there was the need to really mix things up it wasn't possible, I couldn't even rebuild shown examples of their ExtJS documentation. Furthermore the property editor was data type locked, which means if you want to enter a string which ExtJS already supports, but architect locks the value as a boolean, you can't edit it at all, while still using Architect

- code editing: well it is a colored texteditor, which is fine, and I could live with that, but Architect let's you just edit areas where it allows you to - want to change something else? Nope not allowed

- autocompletion: there is none at all, same goes for refactoring, multi highlighting, string replacement, and others

- code storing: well now some may think edit it somewhere else, well no, also not possible... Architect not just only saves simple js, there is also a Json formatted file for everything you have created, which is needed so the tool can actually load it for further editing. They possibly never heard of DRY. But the worst of this code storing was actually using git along with it - have a merge conflict? Merge both files! Every single time, it was so damn tedious

There are a few more, but these were the worst I can remember.
Luckily I don't have to use it anymore!
Maybe they have fixed or changed a lot of it, because the developers were aware of the issues and eager to resolve them, as far as I was told on a roadmap presentation. And some of the tools they had released in the end of my time using ExtJS were actually really good, like an IDE plugin for the framework, and I liked using it.