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

Debian dist-upgrade: not a single reboot

Windows updates:

Realized there was a bug in my npm package that made it hard to update the state of the input field conditionally (rather than explicitly through user action) and fixed it, wrote tests to ensure it was working the way I thought it was, updated the dist, updated the package version, merged, cut a GitHub release...

Then uninstalled and reinstalled it in the project I’m using it in and it didn’t work. What the eff, I think. Take a couple hours furiously trying to figure out why the hell the behavior doesn’t seem to match the behavior of the new version.

Then it dawns on me. I check the package.json.

“react-autosuggestions”: “^2.1.0”

.... I forgot to do the “npm publish” step.

*head desk*

Finally made good use of my RPi and setup pi-hole on it. After a painful 4hour long dist-upgrade and picking the right filters it is working like a charm. Why didn't I make this work earlier.

I've also wrote a little script which queries the api and displays different info on the AMOLED screen that was lying around unused for some time.

In case you are interested (from left to right and bottom), the traffic in the last 10 minutes with the max value on a graph, the most active clients query and blocked ratio as lines relative to the top one, and an overview of the total queries/ blocked queries and total clients.

At least I've finally spent a weekend useful not just playing games and watching anime.

When Microsoft shuttered Windows XP, my mom's old laptop became a virus-prone, sluggish machine. She let me have it, soon after which I decided to install Ubuntu on it. One thing I should note about this laptop is that the battery could not hold a charge. The power cord was the laptop's life support, and I made sure to place the power brick on a flat surface.
One day, a new version of Ubuntu was released. I decided to perform a dist-upgrade. Because this laptop was on the older side, the ventilation left a lot to be desired by today's standards. Rather than roast my crotch, I placed my computer on the table and the power brick on a swivel chair next to me.
I was working on an assignment for a class when I saw movement in my peripheral vision. I turned and watched in horror as my power brick fell off the chair, pulling the charging cord out of the laptop and turning off the laptop... MID-UPGRADE!
Moral of the story, learn to navigate a computer via a text interface if you haven't already. It may save your ass someday. It saved mine.

OMG you fucking little cunt!

Previous issue with this co-worker we hate eat other but can maintain minimal contact due to covid. Last interaction was actually nice, we joked a bit.

He teaches me how to do the build and ‘updated’ the confluence page. By update he striked through one paragraph.

Been doing these for week and now others what builds done all the time and since I am not an asshole they can approach me to do this but now I spend all
day long doing builds.

Work on a classified app so it has to
be burned on a disk, taken to a ‘secret machine’ and deployed. Takes about an hour and people are like. Can you rebuild it? I forgot to commit something?

So I updated the page to flush out the directions. Did not remove one thing only added things simple things like do a ls -lah in the dist folder to make sure the are built correctly. Things like check to make the symlink works, bolded words.

He was not at standup so I figured he was out of the office today and was going to ask him to review tomorrow.

Fucker goes in to make changes while I am making changes and doesn’t think to msg me telling me?

He is removing things and moving things which is fine just let me know! What a dick!!!!!

Screenshot of all the activity today, I am
in blue. I will spend all day watching the page to make sure I get the last fucking edit!

Fuck you dist-upgrade!

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)

sudo apt update; sudo apt dist-upgrade -y

Linux roulette!

God, so tilted right now, after having to "urgently" (joke's on them, they will get charged the urgent rate) check why some deployments weren't working due to some npm dependencies not being found.

(Just from mentioning npm you surely think I'm gonna bash JS, but no!)

I'm tilted by TS devs that don't bother to learn the very basics of git pathspecs and just add "dist" to their .gitignore, not knowing that it's gonna exclude any file or directory named "dist" *ANYWHERE* in the project.

And when your poor CI pipeline tries to transfer the build artifacts (so, keeping the .gitignore excludes but manually including node_modules and dist), it excludes the dist dir in some packages and wrecks the deployment.

Please,, please, PLEASE.

if you want to:

A) Make your entry relative to the .gitignore...

Put a slash first.

B) make it only match directories and not files...

Put a slash last.

Today I had to restart a VM that should contain only an apache server, after a period of time some clients complained that there a functionality in the system is not working. I checked the code and I found that this functionality is depends on local server in deferent port, so I back to VM log and found there was a node server was working on this port.
Every thing was fine till now, I check folders but there is no FUCKIN js files for node server.
After hours of searching I found 5 files in the public/assets/dist/js path that named with the same functionality name and a number 1 to 4 and the 5th one is a TEST.js. After checking all files I discovered that the server file is the TEST.js !!!!! seriously WTF ...

I am seeing a lot of people infuriated a lot about windows10 updates.
And I am just sitting here on win7 with disabled updates.

Waiting for some free time to fetch my new computer with ryzen, throwing some linux dist on it and virtualize the shit out of windows for gaming only.

So I broke my beloved Fedora Dist. instead of doing a little "sudo chmod -R 754 ./" on a development folder, I did it on root folder ( / )
Now, OS crashed, and I'm getting infinite loops when booting.
But I'm not even mad. I'm impressed :o

The datepicker saga

Part one

So I begin work on a page where user add their details, project is late, taking ages on this page

Nearly done, just need a component to allow users to put in some date of births. Look for react components.

Avoiding that one because fuck Bootstrap.

Ah-ha, that looks good, let's give it a go.

CSS doesn't exist, oh need copy it over from npm dist. Great it applied but...

... WTF it's tiny. Thought it was a problem with my zoom. Nope found the issue in github.com and it's something to do with using REM rather than EM or something, okay someone provided a solution, rather I saw a couple of solutions, after some hacking around I got it working and pasted it in the right location and yes, it's a reasonable size now.

Only it's a bit crap because it only allows scrolling 1 month at a time. No good. Hunting through the docs reveals several options to add year and month drop downs and allow them to be scrolled. Still a bit shit as it only shows certain years, figure I'd set the start date position somewhere at the average.

Wait. The up button on the scroll doesn't even show, it's just a blank 5px button. Mouse scroll doesn't work

Fucking...

... Bailing on that.

Part 2

Okay sod it I'll just make my own three drop down select boxes, day, month and year. Easy.

At this point I take full responsibility and cannot blame any third party. And kids, take this as a lesson to plan out your code fully and make no assumptions on the simplicity of the problem.

For some reason (of which I regretted much) I decided to abstract things so much I made an array of three objects for each drop down. Containing the information to pretty much abstract away the field it was dealing with. This sort of meta programming really screwed with my head, I have lines like the following:

[...].map(optionGroup =>
optionGroup.options[
parseInt(
newState[optionGroup.momentId]
, 10)
]
)...

But I was in too deep and had to weave my way through this kind of abstract process like an intrepid explorer chopping through a rain forest with a butter knife.

So I am using React and Redux, decided it was overkill to use Redux to control each field. Only trouble is of course when the user clicks one of the fields, it doesn't make sense in redux to have one of the three fields selected. And I wanted to show the field title as the first option. So I went against good practice and used state to keep track of the fields before they are handed off to the parent/redux. What a nightmare that was.

Possibly the most challenging part was matching my indices with moment.js to get the UI working right, it was such a meta mess when it just shouldn't have taken so stupidly long.

But, I begin to see the light at the end of this tunnel, it's slowly coming together. And when it all clicks into place I sit back and actually quite enjoy my abysmal attempt at clean and easy to read code.

Part 3

Ran the generated timestamp through a converter and I get the day before, oh yeah that's great

Seems like it's dependant on the timezone??!

Nope. Deploying. Bye. I no longer care if daylight savings makes you a day younger.

What's that? You committed the tmp/dist/cache field for something only YOU run locally and asked me to review it. Just GET OUT.

Raspi dist-upgrade from wheezy to jessie started. Fingers crossed :D

I thought I found a way to compute PI, but I actually just found a super shitty way to print a variable..

const precision = 1000000

// convert degree to radians
function rad(degree){
return degree * (Math.PI/180);
}
function calculatePI(){
// [x, y]
// take first point on start of unic circle
const point1 = [Math.cos(0) , Math.sin(0)];
// take second point at 0.001 degree
const point2 = [Math.cos(rad(1/precision)), Math.sin(rad(1/precision))];

// Estimate 0.001 degree of circle
const dist = Math.sqrt((point2[0] - point1[0] ) ** 2 + (point2[1] - point1[1]) ** 2);
// Calculate full circle
const perimeter = dist * precision * 180;
return perimeter;
}
console.log(calculatePI());

Upgraded our internal samba fileshare. Was getting too old. So updating the apt sources list and push the dist-upgrade: what could possibly go wrong?
Everything.
Somehow the locale went astray, updating the manpages gave too many errors and now finally everything's fucked up, because it somehow deleted the sudo binary and root is locked or we don't have password.
We noobs.
But samba was updated and it's still serving our files.

> be you, paypal, a billion dollar company
> your react paypal button dist js file, which is a button that makes api calls, is over 1300 lines long
> 🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡

I'm using typescript and run mocha acceptance tests. I was confused as to why my tests were failing on the Jenkins albeit they passed locally just fine.

I couldn't find the error. Just after making a pause, implementing something else, I realized what the problem was:

As I renamed a folder from `fixtures` to `tapes` my test run on the Jenkins suddenly claimed to not find the files in `fixtures`. Yet in my code base there was no occurrence of the string `fixtures` anymore and then it hit me like a brick wall:

I have old transpiled files in my outDir, the `dist` folder on the jenkins! Locally, I make sure to run `git clean -fd` once in a while, so I never was hit by it it locally. Yet my jenkins had really old files in the `dist` folder. And just running `rm dist/* && tsc` fixed the entire ordeal.

Well, JavaScript is so 2012 and typescript is the new shit, yet transpiling the code can leave to some quite strong headaches.

five minute of panic upgrading to xubuntu 17.10

dpkg was interrupted, you must manually run sudo dpkg --configure -a to correct the problem.

Fortunately sudo apt-get dist-upgrade save the day.

I was given a project at work, and instead of committing a src directory, all of the work the person before me did was in the compiled dist directory. fml

So this is really a thing. I'm used to have yarn build/dist/watch and serve commands but my collage is used to laravel mix, and we working with static URLs like client.local. I'm used to localhost:xxxx which is better because you can use hmr. So what do you guys name your development build command and the one for production?? convention

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!

Today's lesson , never

sudo rm -rf /usr/lib/python3.5/dist-packages on a fedora Machine. It breaks everything.

So any ideas how to fix it. A

Wake me up when composer create-project laravel/laravel app --prefer-dist

composer create-project --prefer-dist myapp/bugs --no-dev fml