Where It All Started.

Where It All Started.

Life, Stock Trading, Investments, Business and Startup. Most are programming stuff.

Tag: tricks

Find Unintended CSS Overflow

Ever coded an HTML static design site? I’m sure you’ve encountered problems where you’ve just installed some CSS framework then coded some additional CSS files. After you’ve finished the code you run it on a browser then TADAHHH!


You can only find truth with logic if you have already found truth without it.

— Gilbert Keith Chesterton.

There were overflows horizontal and vertical scrollbars. 😁

It’s a bit cumbersome to find where those scrollbar or overflow originated, so that’s what this article is for. In order to find those overflows, here’s a one liner that you can directly paste on your web developer console or just press F12 then the console tab. The console tab is the place where you look at javascript logs (console.log), anyways just copy this then analyze it first before pasting on your console.

javascript:void(function () {var docWidth = document.documentElement.offsetWidth;[].forEach.call(document.querySelectorAll('*'), function (el) {if (el.offsetWidth > docWidth) console.log(el)})})();

Here is the full script which had been beautified for readability:

var docWidth =  document.documentElement.offsetWidth;
[].forEach.call(document.querySelectorAll("*"), function(el) {
  if (el.offsetWidth > docWidth) {
    console.log(el);
  }
});

If you analyze carefully the code, you’ll see that on the first instruction it gets the current document offset width. Then it loops on all selector which are class and id’s, if it found an offending or greater than the offset width it will print that element attributes and location.

That’s all guys!

Let me know in the comments if you have questions or queries, you can also DM me directly.

Also follow me for similar article, tips, and tricks ❤.

Make Subfolder A Git Submodule

Ever been in a situation where a sub-folder of your git repository needs to branch out as a new repository? Here in this article I’ve tried a new way using a python module to simplify the process. This steps is also recommended by the Git core team as ways to move a sub-folder to a new clean repository (link).


We’re just clones, sir. We’re meant to be expendable.

— Sinker.

Come on let’s jump in! 🚀

Prerequisites

First of all, you must have a Git1 on your machine. Second, must have existing test git repository and Python 32 installed.

If you don’t have Git yet, you can install git from its official sources, its available on all platforms even on android. Or if you have Visual Studio3 installed, just locate it from your drive. Python can also be installed using the Visual Studio installer.

So where do we start?

This will be our initial test repository structure:

+-+ root
  |
  +-+ test-repository
  | |
  | +-+ desired-directory
  |   |
  |   +-+ contents
  | +-+ other-directory

The first step you need to do is clone the test repository by either copying it by cp command or by creating a duplicate cloned copy using git clone.

+-+ root
  |
  +-+ test-repository
  | |
  | +-+ desired-directory
  |   |
  |   +-+ contents
  | +-+ other-directory
  +-+ test-repository-copy
  | |
  | +-+ desired-directory
  |   |
  |   +-+ contents
  | +-+ other-directory

Then install this python module named git-filter-repo. Install the module using the pip utility.

pip3 install git-filter-repo

This git-filter-repo simplifies the process of filtering files, directories and history. This tool as said on its Github page falls on the same category as git-filter-branch. You can check its Github repository page for pro’s and con’s against similar tools.

Next thing we do is go into the cloned test repository and filter the directory you want (in our case its the desired-directory) to separate into a new repository.

cd test-repository-copy
git filter-repo --path desired-directory --subdirectory-filter desired-directory

This will modify the cloned directory history and delete existing content that does not match the subdirectory filter. The new structure of the directory will be like this:

+-+ root
  |
  +-+ test-repository
  | |
  | +-+ desired-directory
  |   |
  |   +-+ contents
  | +-+ other-directory
  +-+ desired-directory
  | |
  | +-+ contents

The desired-directory will now become its own repository retaining the history of files that is inside.

After moving the sub-folder to its own repository, we go back to our original test repository and delete the filtered directory.

cd test-repository
git rm -rf desired-directory

Still on the test-repository, create a new git submodule and link the filtered directory repository.

git submodule add ../desired-directory desired-directory

That’s all the steps needed, check if everything is working. Check the quick review below for a summarized setup.

Quick Review

Here are the simplified steps based on the above:

  1. Make a copy or clone the current project where the sub-folder is located.
  2. Install git-filter-repo using the command pip3 install git-filter-repo.
  3. On the cloned project folder, filter it base on the directory you want to make new repository with the command git filter-repo --path <new-path> --subdirectory-filter <filtered-directory>
  4. Go to your current project folder and delete the sub-folder using the command git rm -rf <filtered-directory>.
  5. On the current project create the sub-module using git submodule add <new-repo-url> <filtered-directory>.
  6. Check if everything is okay.

That’s all guys, always make a backup of your repository before proceeding. Anyways its on git version control system – you can go back and re-fix if there is something wrong.

Conclusion

There are many answers in the internet regarding this matter, but mostly they don’t explain what will occur when you run this command, this one I’ve personally tried it as before I was using a mono repository setup. But it became so large that its hard to maintain especially on cases of testing and checking the history.

Let me know in the comments if you have questions or queries, you can also DM me directly.

Follow me for similar article, tips, and tricks ❤.


  1. Git (/ɡɪt/) is a distributed version-control system for tracking changes in any set of files, originally designed for coordinating work among programmers cooperating on source code during software development. ↩︎
  2. Python is an interpreted, high-level and general-purpose programming language. Python’s design philosophy emphasizes code readability with its notable use of significant whitespace. Its language constructs and object-oriented approach aim to help programmers write clear, logical code for small and large-scale projects. ↩︎
  3. Microsoft Visual Studio is an integrated development environment (IDE) from Microsoft. It is used to develop computer programs, as well as websites, web apps, web services and mobile apps. Visual Studio uses Microsoft software development platforms such as Windows API, Windows Forms, Windows Presentation Foundation, Windows Store and Microsoft Silverlight. It can produce both native code and managed code. ↩︎

Moving ProgramData Folders To Other Drive Using Windows 10

My C: drive became full, and it came to my mind that its hard to move files to a new SSD1 if I buy new one.

So it got me into thinking what are the things I can do to remove and free up space in my C: drive?


I don’t know where I’m going from here, but I promise it won’t be boring.

— David Bowie.

The first thing that comes up, is using the tool Disk Cleanup bundled with Windows 10. It only freed up 10Gb of data, then I check all the folder size which contains the largest amount of data.

The result was my user account and the ProgramData folder.
Here are the things I did in order to move ProgramData contents to my other spare drive.

DISCLAIMER: Before doing this on your machine please test and research first each command before executing on your machine / production environment.

First, I copied and mirrored the ProgramData folder structure and ACL’s2 using the command robocopy. The /MIR flag tells robocopy to retain security settings and state of file.

robocopy /XJ /MIR "C:\ProgramData" "D:\ProgramData"

You could also use this other command flags, this command is non-destructive unlike the mirror flag. The mirror flag deletes the file at destination while this just overwrites and retain if missing in source.

robocopy /xj /s /copyall C:\ProgramData D:\ProgramData

After everything’s done copying, you start creating junction links and symlinks3 from your spare drive (for me its the D: drive). The %~NA tells the batch command it will only get the base folder name, and the %~A gets the whole absolute path. The command below will only create directory junctions to begin with:

FOR /D %A IN ("D:\ProgramData\*") DO (MKLINK /J "C:\ProgramData\%~NA" "%~A")

This next command, specifically create symbolic links to file from source to destination.

FOR %A IN ("D:\ProgramData\*") DO (MKLINK "C:\ProgramData\%~NXA" "%~A")

Then after that restart your machine, and ensure everything’s working fine. I think some folders like Microsoft and Packages should be excluded in copying and making junctions.

That’s all guys. If you have any question DM me or comment in this post.


  1. A solid-state drive (SSD) is a solid-state storage device that uses integrated circuit assemblies to store data persistently, typically using flash memory, and functioning as secondary storage in the hierarchy of computer storage. It is also sometimes called a solid-state device or a solid-state disk, even though SSDs lack the physical spinning disks and movable read–write heads used in hard disk drives (HDDs) and floppy disks. ↩︎
  2. An access-control list (ACL) is a list of permissions associated with a system resource (object). An ACL specifies which users or system processes are granted access to objects, as well as what operations are allowed on given objects. ↩︎
  3. A symbolic link (also symlink or soft link) is a term for any file that contains a reference to another file or directory in the form of an absolute or relative path and that affects pathname resolution. ↩︎

Windows Network Discovery Using Built-in Tools

Success is neither magical nor mysterious. Success is the natural consequence of consistently applying basic fundamentals.

— E. James Rohn.

Hi guys, last week I’ve worked on a vanilla Windows 10 client computer without internet but is connected to a LAN with many computer.

I’ve asked myself on how to get all alive computers in the network using only built in tools from Windows.

Here are the things I’ve did in order to accomplish this feat.

First thing I did was ping all broadcast IP using ping <broadcast ip> -t -i 4. This will ping the broadcast IP, this action will spread and send all message to all active computers in the network. After that we would wait for around 5-10 seconds, and execute the follow up command which is arp -a. The arp command will check the address resolution protocol and list it down.

The -i 4 on the ping command instructs to ping only on IPv4 (Internet Protocol Version 4) network. That’s all there is to it. Kindly check the manual page of the commands for different flag combinations.

❌ Originally posted on August 18, 2019

Check Total File Size of Files with Specific File Extension

Posted on by Edward Fitz

It is simply this: do not tire, never lose interest, never grow indifferent—lose your invaluable curiosity and you let yourself die. It’s as simple as that.

— Tove Jansson in Fair Play.

Recently, I wondered on how to check the file size of all files with a specific file extension on a folder / project. This is what I’ve found out after several experimentation using command line tools in Linux, this specific task could be accomplish with just one line of command. Check below for the actual command:

find . -name "*.dart" | xargs cat | wc -c

What this command does, is first find all file with the dart extension. Then pipe the output of that command in xargs converts the standard input to command arguments. After that pipe the output of xargs again to our favorite word counter wc.

Here are the command line tools use in the process.

  • xargs is a command on Unix and most Unix-like operating systems used to build and execute commands from standard input. It converts input from standard input into arguments to a command. Some commands such as grep and awk can take input either as command-line arguments or from the standard input. Wikipedia
  • find is a command-line utility that locates files based on some user-specified criteria and then applies some requested action on each matched object. Wikipedia
  • wc is a command in Unix and Unix-like operating systems. The program reads either standard input or a list of files and generates one or more of the following statistics: newline count, word count, and byte count. If a list of files is provided, both individual file and total statistics follow. Wikipedia

That’s it!

So guys, do you have any one-liner commands that you want to share? Just message me on my social media accounts. Hope you guys enjoyed this article!