Unclassified interesting Tech Material - page 3

1.
Achilles' heel of JS ecosystem, bad documentation:

Echart giving this error for build time .
my version is --- 
 "ngx-echarts": "^5.2.1",

  "@angular/cli": "^7.3.1",
 I thought this because of version issue .
 but in documentation for echart they said that.... v5.x for Angular >= 6

So , its not version issue is what was initially thought.


Solution:

npm install echarts@4.2.1 -S   
npm install ngx-echarts@4.1.0 -S

Found out by Piyusha Barhate.


2.
Every front-end JS developer's nightmare (Bundle phobia)
https://bundlephobia.com/

3.
The utility is cool..
https://www.atlassian.com/software/statuspage

- but expensive, may be a good idea to undercut them in pricing 

4.
- some great features provided.

- especially helpful for identifying bottlenecks.

5.
Interesting things AWS has built.
https://docs.aws.amazon.com/AmazonCloudWatch/latest/logs/FilterAndPatternSyntax.html

But, AWS - SNS is pathetic in terms of logging and debugging issues !!
P A T H E T I C !

6.
https://miro.com/

Really think this is going to boost productivity ?!?!?
Seems to be not structured at all.. 

I don't know if I will be able to imagine a "productive" workflow in the "miro" form factor at all.

7.
TODO: review all these:
https://medium.com/better-programming/amazing-developer-tools-that-you-might-not-be-using-1ec7f57d17d5

8.
This bad-boy and the lack of good (cron-like-tasks)task scheduling alternatives in Javascript

- have us (Onco.com) stuck with this one and specific rabbitmq versions and so erlang version
https://github.com/rabbitmq/rabbitmq-delayed-message-exchange#supported-rabbitmq-versions

9.
It seems that rabbitmq is maintaining repos very well:
- compatibility chart
https://www.rabbitmq.com/which-erlang.html

- installation instructions:
https://www.rabbitmq.com/install-debian.html#apt-bintray-erlang
I prefer the bin tray version of the installation

10.
apt - get available versions; install specific versions

- get available versions:
apt-cache madison package - install specific version:
apt-get install package=version

11.
Whatsapp restore chat history, when number is same:
- https://faq.whatsapp.com/android/chats/how-to-restore-your-chat-history/?lang=en

My guess is: 
- whatsapp treats every number as a separate user.
- each user is assigned a 


Decrypting the whatsapp database on android:


12.
Opening a set of windows.. terminals and tabs with correct folders open + other windows with proper settings and may be even positions:
still under research:


13.
Using JQ for formatting JSON in terminal
https://stackoverflow.com/a/48964481

jq '.' # always provide a filter

Just calling jq without a filter will throw errors if stdout isn't a terminal
- so if you want to pipe the output.. it is going to error out

Other acrobatics JQ can do with JSON.. (including process streams)
https://stedolan.github.io/jq/tutorial/

Hail jq !!
- a lightweight and flexible command-line JSON processor


-x-x-x-
Other options:
https://ostechnix.com/how-to-parse-and-pretty-print-json-with-linux-commandline-tools/

  1. jq or jshon, JSON parser for shell, both of them are quite useful.

  2. Shell scripts like JSON.sh or jsonv.sh to parse JSON in bash, zsh or dash shell.

  3. JSON.awk, JSON parser awk script.

  4. Python modules like json.tool.

  5. underscore-cli, Node.js and javascript based.


14.
ArangoDB - How much space is your data going to take:
https://www.arangodb.com/2012/07/collection-disk-usage-arangodb/

- comparison with other dbs also included.

Getting collection stats on a live database:
https://www.arangodb.com/docs/stable/http/collection-getting.html#return-statistics-for-a-collection

15.
Keras - Deep learning for python:
https://keras.io/why_keras/

Seems like they have their adoption strategy figured out:
https://keras.io/why_keras/#keras-makes-it-easy-to-turn-models-into-products



17.
React Native Calculator apps for learning:

https://www.cyblance.com/mobile-application/how-to-develop-a-calculator-app-using-in-react-native/
- good looking shaded buttons / almost looks like a dialer..

https://github.com/ReactNativeSchool/react-native-calculator
- nice rounded buttons 
- may be the zero can be centred
- this is by far.. the most descriptive

- generally like to use calendar apps as my first tutorials

 - easily manage dependencies
- works for a plethora of languages

19.
Vega:
https://github.com/vega/vega

"declarative format for creating, saving, and sharing interactive visualization designs. With Vega you can describe data visualizations in a JSON format, and generate interactive views using either HTML5 Canvas or SVG"

- only js based dependencies



20.
Next time someone asks for architectural diagrams :)
https://www.cloudcraft.co/

Very cool tool.

https://www.cloudcraft.co/pricing
- visualise your topology easily

21.
This theme reminds me of the KTM colour theme :)  
https://marketplace.visualstudio.com/items?itemName=connor4312.codesong

22.
Flutter vs React Native vs Native: Deep Performance Comparison

- again setting up apples to apples testing is so hard !!!!!!!
- surprising results
- how close hybrid can get to native in some case
- and how badly they lack in some areas where native just beats them by miles.

But the quantitative comparison is good to see.

Needs a new maintainer.
I'd love to be a maintainer :D

24.
Cypress - the premise is promising

The docs are pretty good too:



25.
That is a cool cat !
- much adoo about urls.
- well composing urls is nasty business

26.
Remote desktop clients for linux:




28.
Getting UDID from an iPhone
never tried any but for record's sake:



29.
Pre-signed urls for S3 objects -
- Helpful when your client side software is simplistic (cannot handle streaming)
- issue - the resource is easily exposed


30.
Debain based distros with smaller RAM and hard-disk footprint:



31.

- nobody mentions it.. but play store itself gives some basic analytics

32.
Axios interceptors for refreshing auth tokens :)
https://thedutchlab.com/blog/using-axios-interceptors-for-refreshing-your-api-token
nicely done


Why is it so many steps ?!

34.
React Native goto library for firebase notifications:
https://rnfirebase.io/messaging/usage

iOS -
https://rnfirebase.io/messaging/usage/ios-setup

35.
Multi Model Databases
- bench-marking is hard !u
- spark, arangodb, orient


36.
GQL Standard

Just including to keep track that I saw it.
https://www.opencypher.org/

Quoting:
"openCypher is the most widely adopted, fully-specified, and open query language for property graph databases."


37.
Nice tool for keeping dependencies updated:
https://dependabot.com/#how-it-works

38.

Quoting:
"
Modern applications don’t crash; they hang. One of the main reasons for it is the assumption that the network is reliable. It isn’t. 
"
- would like to add that, other services that are being called may be unreliable


The way out:
"never use “infinity” as a default timeout."
"
As a rule of thumb, always set timeouts when making network calls. And if you build libraries, always set reasonable default timeouts and make them configurable for your clients.
"


39.
Nice package, 

why is it a nice package ?

40.
Just found this.. looks interesting
- display pdf files in react app just like natively supported images


Positively cool !!



43.
Confused whether to put it in the humour section or the tech section.
https://ptsv2.com/s/whatisthis.html

Quoting:
- Basically, it's a shittier Request Bin 


45.

46.

47.
JSON -> Animation

cool.. 

48.
How compose a multipart request :)
Curse you react native.. that I have had to dive into all this.

You can create multipart/form-data manually with XMLHttpRequest like this example.

function multiPost(method, url, formHash){
    var boundary = "nVenJ7H4puv"
    var body = ""
    for(var key in formHash){
        body += "--" + boundary
             + "\r\nContent-Disposition: form-data; name=" + formHash[key].name
             + "\r\nContent-type: " + formHash[key].type
             + "\r\n\r\n" + formHash[key].value + "\r\n"
    }
    body += "--" + boundary + "--\r\n"

    var xml = new XMLHttpRequest();
    xml.open(method, url)
    xml.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + boundary)
    xml.setRequestHeader("Content-Length", body.length)
    xml.send(body)
}
Quoted from:

49.
Translate terminal print and color to HTML 
- (usually theses days terminals have the option to copy something as HTML)
- but in any case there is aha !
https://github.com/theZiz/aha


50.
Chrome sessions manual processing:
If you have the great suspender, you will hardly lose your sessions.. 

- But in any case.. here are few utilities to parse the chrome session files:

In case you are wondering where they are:
- Linux: /home/<username>/.config/google-chrome/default




- d on the console / terminal running "npm run start"
- "debug" will open a chrome window and most of the log / code can be seen there..
OR
adb shell input keyevent 82

- d on console
- then click inspects - a limited menu for inspecting similar to js should show up
- if you have the below running:
https://www.npmjs.com/package/react-devtools
all the dubugging can be done from chrome



52.

TODO: read full and summarise

53.
ng server and ng serve both work ??!?!?!?!

Need to solve this mystery..
My be specific to that particular project.

54.
Been looking for the this a very long time:
https://angular.io/api/common/APP_BASE_HREF

finally found.. after almost a year !!!!!

55.
Express Route Tester

https://www.npmjs.com/package/path-to-regexp
Used by express under the hood.


56.
Express static route accedes to the next route if it did not fine a match.
This had me chasing my tail for a few minutes.

57.
Convert curl to fetch:


58.
This Android formData (multipart form data) and making a request have become a tiring hassle:
https://forums.expo.io/t/react-native-fetch-remote-http-request-throws-network-request-failed-on-android-device/34886














I guess this is not related:

This is exact error from XHRHttp



Initial suspect:




Files come from CameraRoll has a different kind of URI, which should looks like assets-library:// on IOS and content:// on Android, these files are just like asset files.

  • These files are readonly, you CAN NOT change them.
  • You CAN copy and read these files.
  • You CAN pass these kind of URI to body of fetch request directly (use wrap).
DID NOT WORK.

Straight forward piece of code:

DID NOT WORK

Worked. Finally.



59.
cd into your android phone mounted as mtp

On nautilus it could show up something like:
Encoded uri:
mtp://%5Busb%3A001,006%5D/Internal%20shared%20storage/
Decoded uri:
mtp://[usb:001,006]/Internal shared storage/


you actually can go to that folder with cd. Though mount or df commands can't list it, but it's available under a gvfsd-fuse mounted folder, in my case it's /run/user/1000/gvfs , find out that with

mount | grep  'gvfsd-fuse'

The mounted MTP device's filesystems are available under that folder with some crappy name.

enter image description here





Use cd and Tab key for easier navigation.  

Some systems don't have gvfsd-fuse running by default. Make sure that you have it installed (on Debian and derivatives, it's in the gvfs-fuse package).


Tried it. Worked for my Redmi Note 4.     



60.
This is a bloody hard to find document:
https://github.com/angular/angular-cli/wiki/angular-cli

61.
Type casting HTML Element to a specific type of node:

Typescript type casting works like  <type>Obj
https://stackoverflow.com/a/12687137
Eg.
var script = <HTMLScriptElement>document.getElementsByName("script")[0];

62.
Seems like I mistook a side effect of #73 as the above issue.
https://stackoverflow.com/a/50447806
this solution seems to work.
This too.. #73 was real unexpected, threw me into many incorrect directions.. with the assumption that the click event was not firing:


But finally found out that the iOS chrome does not have the create object url method.
It is absurd..


63.
Starters for react and react native:
https://github.com/facebook/create-react-app


64.
Expo - running react native in the browser:
https://docs.expo.io/guides/running-in-the-browser/


This one is also interesting:
https://github.com/necolas/react-native-web

65.
Shweta



67.
Stopping gradle daemon process to free RAM:
~/.gradle/wrapper/dists/gradle-6.5-all/2oz4ud9k3tuxjg84bbf55q0tn/gradle-6.5/bin/gradle --stop

How to find where the binary is ?
ps -aux | grep gradle
From the command get the path :D

68.
React Native Setup:

Follow the react native cli quickstart
1. Install Java - OpenJDK - latest compatible version prefer LTS
2. Install Android Studio - complete with Android SDK, Android SDK Platform, and a Virtual Device
3. SDK 29 - separately 
3.5 Setup android home path
4. Emulator install
5. Hardware acceleration install
6. Install watchman 
7. 

But will also need the expo setup to run things in the browser quickly :)
Follow expo cli section on: https://reactnative.dev/docs/environment-setup
https://docs.expo.io/guides/running-in-the-browser/


69.
Install Java:
sudo apt-get install openjdk-11-jdk (LTS)


- this worked for me well

got error:
pywatchman/bser.c:31:10: fatal error: Python.h: No such file or directory
 #include <Python.h>
          ^~~~~~~~~~
compilation terminated.

-- installed python2-dev python3-dev

Test installation with:
watchman -v
OR
watchman version

71.
KVM Hardware acecleration
- this is the one that worked for me

I had forgotten this :P
so got this error: 
https://blog.chirathr.com/android/ubuntu/2018/08/13/fix-avd-error-ubuntu-18-04/

After the installation, you need to relogin so that your user becomes an effective member of kvm and libvirtd user groups. The members of this group can run virtual machines. 



72.
Installing Android Studio:
Download from here:
https://developer.android.com/studio/index.html

README has instructions for installation 

Also, installing all platforms and SDKs doesn't work at once.. I had to try 10-15 times for the dl.google -urls to respond with a 200.

73.
Blob urls are cool:
https://www.html5rocks.com/en/tutorials/workers/basics/#toc-inlineworkers-bloburis

- quoting
"

The magic comes with the call to window.URL.createObjectURL(). This method creates a simple URL string which can be used to reference data stored in a DOM File or Blob object. For example:

blob:http://localhost/c745ef73-ece9-46da-8f66-ebes574789b1

Blob URLs are unique and last for the lifetime of your application (e.g. until the document is unloaded). If you're creating many Blob URLs, it's a good idea to release references that are no longer needed. You can explicitly release a Blob URLs by passing it to window.URL.revokeObjectURL():

window.URL.revokeObjectURL(blobURL);

In Chrome, there's a nice page to view all of the created blob URLs: chrome://blob-internals/.

"

https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
- browser support is almost universal. 
does not work in iOS chrome :P rather odd 
reports the same issue:
https://stackoverflow.com/questions/54398438/downloading-pdf-as-blob-not-working-on-chrome-ios

May be this:
can be used as replacement. Need to find out, not tried yet.
this is in support: https://stackoverflow.com/a/53763420
but says everything else stops working :D


Suggests a similar solution:

- 

75.
Clearing up systemd logs / journal files:
https://ma.ttias.be/clear-systemd-journal/
$ journalctl --vacuum-time=10d
...
Vacuuming done, freed 2.3G of archived journals on disk.

OR
$ journalctl --vacuum-size=2G
...
Vacuuming done, freed 720.0M of archived journals on disk.
This is just so cool.


76.
Disk has free space but still cannot write more file to the disk ?
-- check if you ran our of file descriptors 
(too many small files taking up all the file descriptors)
-- generally happens when rsync-ing a hard-drive with an OS.
-- better copy things as a disk image if you have lots of space
-- but have a selective copy with rsync
generally exclude --> bin, sbin, dev, proc, tmp, usr, boot, lib, opt, mnt, media, srv

####### Mon Jan 15 04:02:40 PM IST 2024 #######
- there are restrictions in FAT32, etc old file systems
- make sure to check them when copying to such file systems


77.
When cloning a disk, what are the most important folders ?


79.
Need to sync clocks (Not GMRT level :D)
https://chrony.tuxfamily.org/doc/3.5/chronyd.html
But, well, close.

80.
Refresh token with HTTP interceptor:
https://itnext.io/angular-tutorial-implement-refresh-token-with-httpinterceptor-bfa27b966f57
Very clean an well commented piece of code:
https://gist.github.com/abereghici/054cefbdcd8ccd3ff03dcc4e5155242b#file-token-interceptor-service-ts

81.
ArangoDB uses only 1 index per query ?
https://www.arangodb.com/docs/stable/indexing-index-utilization.html 
Is it too much to expect an index to be used for every FOR loop enumeration ?
OR am I expecting too much ?


82.
The concept of bulk head in a service based architecture:
https://skife.org/architecture/fault-tolerance/2009/12/31/bulkheads.html

83.

84.
Get the console.log on an iPhone chrome:
https://blog.chromium.org/2019/03/debugging-websites-in-chrome-for-ios.html

Don't know if remote debugging for iOS chrome is available now:
https://stackoverflow.com/a/12607124

Easy with Safari it seems:
https://stackoverflow.com/a/22047495

Haven't tried this yet:
https://stackoverflow.com/a/38180826
Seems promising

85.
They should be awarded:

This is officially by Mozilla:
https://addons.mozilla.org/en-US/firefox/addon/facebook-container/
This is not: (but it should be)

87.
Observables chained:
makes for a very interesting design pattern
https://angular.io/guide/http#intercepting-requests-and-responses

Retrying a failed request with angular observable APIs:
looks pretty neat.
https://angular.io/guide/http#retrying-a-failed-request

getSomething() {
  return this.http.get<SomeType>(this.someUrl)
    .pipe(
      retry(3), // retry a failed request up to 3 times
      catchError(this.handleError) // then handle the error
    );
}

88.
JSON resume
https://jsonresume.org/

They have a lot of themes already !
https://jsonresume.org/themes/
https://npmsearch.com/?q=jsonresume-theme
Hmmn.. been wanting to make something like this for a very long time.
Can be easily exported to PDF.

89.
Realtime json-schema validator: 
https://www.jsonschemavalidator.net/

--x-x-x-x-
####### Sunday 28 May 2023 08:26:35 AM IST #######
ajv (nodejs) based validators:



90.
JPEG vs PNG vs GIF
very nicely explained and compared 
https://stackoverflow.com/a/7752936

91.
A handy git shortcut:
https://git-scm.com/docs/git-diff#Documentation/git-diff.txt--R

to reverse the diff.. generally useful when you view a diff and realise it needs to be reversed.
This can get it done with less typing.

92.
Weird issue: 
- Javascript Generator working with for loop in console when paused in debugger, but not when the same code runs without intervention.
Happens for the generator returned by this particular function: https://www.npmjs.com/package/levenshtein-search#fuzzysearch

93.
Angular build:- Javascript Heap out of memory error

Happens when:
- usually one module has too many components, makes the build process exceed 2GB 

What helps:
- setting the max. heap for the node process:
node --max_old_space_size=5048 ./node_modules/@angular/cli/bin/ng build --prod
https://stackoverflow.com/a/53439291

- how to do it in package.json
"NODE_OPTIONS=--max_old_space_size=2048 ng build --prod --configuration=production --output-hashing=none && ng run ops-portal-web:server:production"


94.
Incognito mode for the terminal:

1.
Kill the history file location env variable:
unset HISTFILE
https://askubuntu.com/a/625287

2.
Slightly cleaner way according to me:

Stops the hisory mechanism from triggeringshopt -uo history # disables
shopt -so history # enables

https://askubuntu.com/a/625288

3. handy temporary fix:

$Space$echo "Some secret text"

 Bash ignores commands starting with space
https://askubuntu.com/a/625284 Note: This only works if the HISTCONTROL variable is set to ignorespace or ignoreboth.

95.
Adding formatted code snippets to blogger:
http://hilite.me/

- remember to copy the preview with the "Preview" text.. you can get things as below!!

94.
How to handle keyboard event in ionic
(generally content gets hidden by keyboard if you are not careful)


Add event listener:

window.addEventListener('native.keyboardshow', this.keyboardShowHandler);
window.addEventListener('native.keyboardhide', this.keyboardHideHandler);
keyboardHideHandler() {
  console.log('gone');
  let removeStyles = <HTMLElement>document.querySelector("ion-app");
  removeStyles.removeAttribute("style");
}


--x-x-x-x-
Implement the event listener:

keyboardShowHandler(e) {
  let kH = e.keyboardHeight;
  console.log("keyboard height", e.keyboardHeight);
  console.log("calculating " + kH + "-" + this.offsetY + "=" + (kH - this.offsetY));
  let bodyMove = <HTMLElement>document.querySelector("ion-app"),
  bodyMoveStyle = bodyMove.style;
  bodyMoveStyle.bottom = (kH) + "px";
}

Thanks to:
-- Anurag Jade


95.
Wow ! How elaborate must the development process be:
https://www.tested.com/art/movies/449542-finding-nemo-3d-interview/

So many assets put together to generate film.
But also makes for a good entry barrier..

96.
Don't know whether to file it in humour or in the sad section:
https://www.youtube.com/watch?v=PI5wz2pwXIg

- stupid npm packages
- stupid using them

97.
Looks like a promising table render plugin.
https://gridjs.io/

98.
Bug in the JSON schema conditionals:
https://json-schema.org/understanding-json-schema/reference/conditionals.html

Bug:
https://www.jsonschemavalidator.net/s/8aOY0cCB
Schema:
{
  "type": "object",
  "properties": {
    "prelimAilment": {
      "type": "object",
      "properties": {
        "confusedAboutStatus": {
          "type": "boolean"
        },
        "cancerType": {
          "type": "string",
          "minLength": 1
        },
        "userCancerType": {
          "type": "string",
          "minLength": 1
        }
      },
      "dependencies": {},
      "required": [],
      "minProperties": 1,
      "if": {
        "properties": {
          "cancerType": {
            "const": "Others"
          }
        }
      },
      "then": {
        "required": [
          "userCancerType"
        ]
      }
    }
  },
  "dependencies": {}
}


Data:

{
  "prelimAilment": {
    "confusedAboutStatus": true
  }
}


Expected to pass.
But:



Solution:
Schema:
{
  "type": "object",
  "properties": {
    "prelimAilment": {
      "type": "object",
      "properties": {
        "confusedAboutStatus": {
          "type": "boolean"
        },
        "cancerType": {
          "type": "string",
          "minLength": 1
        },
        "userCancerType": {
          "type": "string",
          "minLength": 1
        }
      },
      "required": [],
      "minProperties": 1,
      "if": {
        "properties": {
          "cancerType": {
            "const": "Others"
          }
        },
        "required": [
          "cancerType"
        ]
      },
      "then": {
        "required": [
          "userCancerType"
        ]
      }
    }
  }
}
-x-x-x-x-
Solution credit:
Vinakaya S.V.


99.
Angular 2+ detect click outside a div:
Very nice package that does it: https://github.com/arkon/ng-click-outside



Tracking click events outside the current component in Angular 2.


100.
VueJS dynamic components:
https://vuejs.org/v2/guide/components.html#Dynamic-Components
https://vuejs.org/v2/guide/components-dynamic-async.html

Example usage:
https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-dynamic-components-with-binding?file=/index.html:0-16

https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-dynamic-components

A big shout-out to VueJS for the incredible implementation of dynamic components !!
You can even pass a component to a component as an input argument.

Can be done in AngularJS to but VueJS is elegant about it.
Angular will have too much boiler plate too in the implementation.

Continued from:
https://swlearninglog.blogspot.com/2019/02/unclassified-interesting-tech-material.html

Comments

Post a Comment

Popular Posts