WindowSeater

windowseater

For decades, Windows users have been made fun of by the Linux community for the lack of a cool terminal (among other things). Well, it's about time we fight! In this article, we will go through setting up a development workflow in the Windows terminal. Prerequisites Know how to type Windows 10/11 (Some things may not work for you in this article if you are on some other version) (Optional) Know Basic Unix Commands such as , , etc cd mkdir What will we be doing We will set up the following: Powershell Nerd Fonts Theme Scoop z Directory Jumper Terminal Icons Node & Git Neovim Oh-My-Posh Autocomplete Aliases Utilities Well, then, let's get started! Things to remember during the article stands for your root or home directory, the default directory where the terminal will generally open. ~ If anything doesn't work even after installing/configuring just close and reopen the terminal. The command palette opens with . ctrl+shift+p Terminal settings open with ctrl+, Getting Started Powershell First of all, let's install Powershell, this is not Windows Powershell that comes with Windows. You will have to go to the Microsoft Store and search for it, it's free so don't worry. After you have done that open Terminal (not PowerShell or Command Prompt), you can search it up, it's pre-installed on your PC. Press to open settings, here we will set Powershell as our default, it would be Command Prompt in default if you haven’t changed it before. Ctrl+, In the startup menu, change the default profile to PowerShell and save, that's it! Nerd Fonts So, what are Nerd Fonts? Nerd fonts let you use font ligatures and more glyphs in general, it's something everyone should use while coding. You might actually be using it without knowing in your IDE/text editor. I used Fira Code for a long time before knowing it was a Nerd Font. To install a nerd font, first, go to the nerd-fonts and download the zip file of your preferred Nerd Font from the latest release. Extract the zip file and install the fonts. If you have never installed a font before, that’s fine, you can just double-click the files and click on install. GitHub Repo .ttf I use the JetBrains Mono NF and another of my favorites is Hack NF (NF stands for Nerd Fonts). Themes To change the theme of your terminal, open settings and click on "Open JSON file", this will open the file for your terminal. settings.json Now to change the theme you have three options: Choose a theme from the themes already present in the terminal by default Create your own theme from scratch or modify one already present. Use a pre-written theme I use a pre-written theme, you can find a lot of them and paste it into your settings.json under “schemes”. Save the file. here Now, go back to your Terminal settings (not settings.json) and choose the theme you just added. Terminal Tools Scoop Let's first install , a package manager for Windows. We will be then using scoop to install other tools. scoop To install scoop run the following in PowerShell: winget install scoop This will install scoop. If you are wondering what winget is, it is a package manager that comes by default in Windows 10/11. In case, you don't have winget do the following: iwr -useb get.scoop.sh | iex Now type and if it returns an output like the one below then all is good. scoop Usage: scoop <command> [<args>]

Some useful commands are:

alias       Manage scoop aliases
bucket      Manage Scoop buckets
cache       Show or clear the download cache
cat         Show content of specified manifest. If available, `bat` will be used to
            pretty-print the JSON.
checkup     Check for potential problems
cleanup     Cleanup apps by removing old versions
config      Get or set configuration values
create      Create a custom app manifest
depends     List dependencies for an app
download    Download apps in the cache folder and verify hashes
export      Exports (an importable) list of installed apps
help        Show help for a command
hold        Hold an app to disable updates
home        Opens the app homepage
info        Display information about an app
install     Install apps
list        List installed apps
prefix      Returns the path to the specified app
reset       Reset an app to resolve conflicts
search      Search available apps
shim        Manipulate Scoop shims
status      Show status and check for new app versions
unhold      Unhold an app to enable updates
uninstall   Uninstall an app
update      Update apps, or Scoop itself
virustotal  Look for app's hash on virustotal.com
which       Locate a shim/executable (similar to 'which' on Linux)

Type 'scoop help <command>' to get help for a specific command. If it doesn't return an output, just close and reopen the terminal, and it will work. This is the moment you stop using those installers, now you are a terminal guy. You can even install Mozilla Firefox, just do . scoop install firefox There is also which you can use as a package manager but we will stick with scoop for this article. choco/chocolatey z is a directory jumper. What is a directory jumper? Let's say you are in the directory , and you want to go to , the one way of doing this in your terminal would be this: z ~/Desktop/Development/NextJS/tutorial ~/SomewhereElse/Products/Product1/prod-website cd ../../../../

cd SomewhereElse/Products/Product1/prod-website This looks small but you don't always remember where all your projects are so add 4-5 more commands in there. This wastes our time, especially over a prolonged period. This is where a directory jumper comes in, with just a single command you can go from one project to another. Let's take the above example this time you just have to do this (assume you are in ): ~/Desktop/Development/NextJS/tutorial z prod-website That's it! You just should have visited the directory once in your lifetime (which you most probably will during the project setup). You don't even need to use the full name of your project directory, you can just do and you would jump to the most recent directory which has in its name somewhere (in this case, the prod-website). z prod prod One thing to note is, to try not to include spaces in your directory names that may make it hard for the directory jumper to find them. It's a good practice in general too to not include spaces in directory names. Now to install , just type in the following and hit enter, and there you go: z Install-Module -Name z -Force Huh? This is not scoop, is it? Yes, it is not, we are currently installing a PowerShell Module (you can install some modules using scoop or winget too) and thus, we are using the command that is builtin into PowerShell. Install-Module Try it out, if it doesn't work open a new Terminal tab (shortcut: ctrl+shift+t), and it should work now. Terminal Icons As the name suggests it adds icons for when you do . To install it do the following: ls Install-Module -Name Terminal-Icons This will install the module. To be able to use it globally, we need to add it to our PowerShell profile, which we will cover in this article later. Node & Git If you use Node.js install it but if you don’t there is no need to. To install Node, first, install which stands for Node Version Manager, it also lets you have multiple versions of node installed at the same time. nvm scoop install nvm This will install nvm. Now download the stable release of Node.js with: nvm install lts for the latest release do: nvm install latest you can even specify a certain version like this: nvm install 18.1.0 To list out the versions of node available use , the one with a denotes the one being used currently. To change the version do . nvm list * nvm use version_number Quick Tip: You can also install by doing , by using that you don’t have to close and reopen the terminal for admin commands. You can use it like, . sudo scoop install sudo sudo nvm use 18.1.0 Now for git just do either of the following: using scoop: scoop install git or using winget winget install git That's it! Neovim Neovim is a fork of Vim that is better for plugins and extensions. To install Neovim, type in the following and hit the enter key: scoop install neovim Also, install any other packages it asks you to. I don't recommend jumping into Neovim right ahead if you haven't seen it ever before in your life or don't know the common commands/keybindings. You can check out this of mine for learning a bit about it and how to set it up. article I will be using Neovim here for editing files, but it's alright you can just follow along with the steps in your preferred text editor or IDE too. Oh-My-Posh Now that all your terminal tools are all set up, let's start with customizing your prompt. First of all, to install it you can do either of the following: winget install oh-my-posh or scoop install https://github.com/JanDeDobbeleer/oh-my-posh/releases/latest/download/oh-my-posh.json Now, we will start messing with config files! First, let's create a config file for our PowerShell, we will be using this file to customize our prompt as well as to set aliases and utilities. The config file will be in the PowerShell script. You can create it anywhere but you will have to link it accordingly in your PowerShell profile. PowerShell profile is from where PowerShell will load its config, you can write your config there directly but we will write it in a separate file. Let's make ours in . ~/.config/powershell cd .config

mkdir powershell && cd powershell Again, you can name your file anything just make sure it will be the same in your PowerShell profile. Let's get started with the editing then, create a file in your preferred editor, I will be using Neovim here. user_profile.ps1 nvim user_profile.ps1 Now type in the following into your PowerShell config: oh-my-posh init pwsh --config ~/.config/powershell/avi.omp.json | Invoke-Expression Save it now. Here you can see "avi.omp.json" and you can name it anything like "your_name.omp.json" just make sure to replace it in the config. Now, you may ask me though, what even is that file? That file is the one that will contain our oh-my-posh configuration for the prompt. You can create your own custom prompt from scratch by looking at the , but there are a lot of awesome ones already there. I use one of them and just modified it a bit. You can check it out on their website and copy the config. Here's the one I am using: docs {
  "$schema": "https://raw.githubusercontent.com/JanDeDobbeleer/oh-my-posh/main/themes
/schema.json",
  "blocks": [
    {
      "alignment": "left",
      "segments": [
        {
          "foreground": "#41A6B5",
          "style": "plain",
          "template": "@avi",
          "type": "session"
        },
        {
          "foreground": "#7AA2F7",
          "properties": {
            "folder_separator_icon": "/",
            "style": "full"
          },
          "style": "plain",
          "template": " \uf07b {{ .Path }} ",
          "type": "path"
        },
        {
          "foreground": "#BB9AF7",
          "powerline_symbol": "\ue0b0",
          "properties": {
            "fetch_stash_count": true,
            "fetch_upstream_icon": true
          },
          "style": "plain",
          "template": "{{ .UpstreamIcon }}{{ .HEAD }}{{ if gt .StashCount 0 }} \uf692
{{ .StashCount }}{{ end }} ",
          "type": "git"
        }
      ],
      "type": "prompt"
    },
    {
      "alignment": "left",
      "newline": true,
      "segments": [
        {
          "foreground": "#cd5e42",
          "style": "plain",
          "template": "\ue3bf ",
          "type": "root"
        },
        {
          "foreground": "#CD4277",
          "style": "plain",
          "template": "> ",
          "type": "text"
        }
      ],
      "type": "prompt"
    }
  ],
  "version": 2
} Next, open your powershell profile (you can do it by , do it from the home directory if you are not on Neovim, the file is located at ~/My Documents/powershell/Microsoft.PowerShell_profile.ps1), and type in the following: nvim $profile . $env:USERPROFILE\.config\powershell\user_profile.ps1 Save that. Close and reopen the terminal. Your prompt should load now. Awesome! Now, let's add autocomplete. Autocomplete PSReadline is a module of PowerShell that comes pre-installed which will help us out with the autocomplete. To configure it open your and add the following: user_profile.ps1 Set-PSReadLineOption -PredictionSource History

Set-PSReadLineOption -PredictionViewStyle ListView You can choose "HistoryAndPlugin" or "Plugin" too as PredictionSource. For PredictionViewStyle, the other option is InlineView, you can also switch between them by pressing the F2 key. I talked about adding Terminal Icons to the config before, you can do it by just adding the following line into your config: Import-Module Terminal-Icons Aliases Aliases can be useful in saving time. It's quite simple to set aliases, for example: Set-Alias g git The above will set the alias for as , but that will only make it the alias for this particular terminal session/tab not globally. To make it a global alias add the exact same command as above in your PowerShell config file. Now, g is the alias for git. Similarly, you can set other aliases. Here are a few of mine: git g Set-Alias v nvim
Set-Alias g git
Set-Alias y yarn
Set-Alias p pnpm
Set-Alias tig 'C:\Program Files\Git\usr\bin\tig.exe'
Set-Alias explorer explorer.exe These are PowerShell aliases, you can also set up aliases for git to speed up your development process, I won't go into the detail of it here. There is another way to set aliases for commands like , . Here is an example of making an alias for : npm start yarn dev yd yarn dev function yarnDev {
  yarn dev
}

New-Alias yd yarnDev I don’t have experience with PowerShell script, so in the above, I can only explain that we create a function and add whatever we want to run when we call the function. After that, we set the alias to call the function as . yarnDev yd Similarly, you can set up other aliases for such commands. Utilities You can even make your own little commands by setting them in your PowerShell config. For example, command (used to create a file) which is not present in PowerShell, here is how you can add it: touch function touch ($command) {
    New-Item -Path $command -ItemType File | out-null && Write-Host Created $command
} What we are doing above is creating a function and letting it have a parameter. Then, in , we are using built-in PowerShell commands to create a file, you will have to research PowerShell commands to create more utilities on your own, the documentation is amazing, so it won’t be a problem. In the second half of the function, we are just telling it to output . touch New-Item -Path $command -ItemType File Created [file_name] Here is how you can add command from Linux: rm function rm ($command) {
    Remove-Item $command -Recurse && Write-Host Removed $command
} To use this just do and it will delete the file. rm [file_name/directory_name] It is not exactly the same as the command in Linux though. rm Other tools Here are some of the other CLI tools you can use: - Commitizen is used for defining a standard way of committing rules and communicating them in Git. It is designed for teams, but I also use it for my personal projects. Commitizen - gh is GitHub on the command line. It brings pull requests, issues, and other GitHub concepts to the terminal next to where you are already working with git and your code. gh CLI - An extension of gh cli to display a dashboard with pull requests and issues. gh-dash extension - You can use this to get prettier git diffs. dunk - Rich-cli is a command-line toolbox for fancy output in the terminal. Rich CLI WSL Setup Now, you might have already heard of WSL or might even be using it, nothing wrong with it if you are not. WSL stands for Windows Subsystem For Linux, it lets you have the Linux terminal on your windows machine. I will not be discussing WSL setup here but you can check out by @stephanlamoureux, it goes through setting up WSL quite nicely. "The Complete Windows Developer Setup Guide" Conclusion So, that's finished! You can find my config files on GitHub if you want, before copying anything go through the readme once, also do not copy anything you don’t know the meaning of. here If anyone wants to add something, correct me somewhere, or ask anything please feel free to do so in the comments. Resources for themes - or https://windowsterminalthemes.dev/ https://github.com/atomcorp/themes docs for PSReadline - https://docs.microsoft.com/en-us/powershell/module/psreadline/?view=powershell-7.2 video by devsalife on setting up powershell - https://www.youtube.com/watch?v=5-aK2_WwrmM Documentation for all other tools has been linked with their introductions in the article Also published . here

Setting up a Development Workflow in the Windows Terminal

Often when debugging, we need to step outside of the comforting embrace of the IDE to reproduce or track an issue. In this series, I’d like to go over some tools you might find useful for these cases. I’ll try to limit myself to tools that are 100% debugging tools and not those that are useful for development testing. E.g. tools like or are remarkably useful. You can/should use them while debugging. But you probably used them while building and testing the feature. So you would already be familiar with them and should have some sense of what they do. I want to focus on tools that you would mostly reach for when debugging. In that sense, tools like etc. also make no sense here. curl jq SDKMan I also want to avoid tools like database tools. They are remarkably useful when debugging, but again, you’d probably use them during development, too. They’re also very vendor specific, so it’s a vast subject that’s too broad to cover here. The tools I'll cover in this series encompass the following categories: System monitoring tools - as is the case with strace and dtrace, which we'll discuss today Network monitors - also fits in the above bracket but warrants a category of its own VM/Runtime monitoring - e.g. tools that let us inspect the JVM, etc. Profilers and memory monitors In this first post I'd like to discuss two heavyweight champions: dtrace and strace. If you're a Java developer or a Windows user, there's a good chance you never heard of these tools. You might have inadvertently used one of them since so many tools were built on top of them, but that's probably not the case. Both tools will let you debug anything without the source code. You could detect problems and gain a level of understanding you never imagined. Dtrace Back in 2004, I first heard about DTrace while working at Sun Microsystems. It became all the rage in the hallways as it was an innovation that Sun Microsystems was promoting. Dtrace was ported later into MacOS X (it originated on Solaris). Today there are ports on Windows and Linux as well. Dtrace is a powerful low-level dynamic tracing framework. But that's just another superlative and if you never used such a tool and don't have a background in systems programming, you might be feeling a bit confused: what the hell does it do? It lets you "see" everything. Want to know which files a process has opened? OK Want to know who invokes a kernel API and get a stack trace to the caller? OK Want to know why a process dies? OK Want to know how much CPU Time is spent on an operation? OK You might think that dtrace is one of those tools that will destroy your CPU completely... But here's the killer feature: it's fast enough to run in production with minimal to no performance impact! It was revolutionary when it was launched almost two decades ago and it's still the case to this day! Running Dtrace Before we begin, a word of warning. Save your data! This tool can easily crash your machine and enabling it requires disabling important security facilities on MacOS. This is a risky "low level" system service and should be treated as such... On a Mac dtrace conflicts with "System Integrity Protection" which is a security feature that blocks some interactions between processes (among other things). Under normal circumstances, this would be great. But if you want to run dtrace this would be a problem. The solution is booting to recovery mode on Intel Macs; this means holding the keys on boot. On an ARM mac just long-press the power button. Command-R Then, in a recovery mode terminal, issue the command: . csrutil disable Then upon reboot, dtrace should work as expected. Basic Usage As mentioned before, dtrace is a very powerful tool. There are whole books written about it. It has its own programming language based on C syntax that you can use to build elaborate logic. E.g. the following command will log some information from the given callbacks: sudo dtrace -qn 'syscall::write:entry, syscall::sendto:entry /pid == $target/ { printf("(%d) %s %s", pid, probefunc, copyinstr(arg1)); }' -p [PID] The code snippet passed to the dtrace command listens to the sendto callback on the target process ID. Then prints out the information to the console, e.g.: (pid) text If this seems like a bit too much and too hard to get started with... You're 100% right. It's a powerful tool when you need it. But for most of our day-to-day usage, it's just too powerful. What we want is to know a bit of basic stuff and this is just too much! Simple Usage As luck would have it, we have a simple solution: man -k dtrace This prints out a list of tools that's worth reading just to get a sense of how extensive this thing is. Here are a few interesting lines of output from that command: bitesize.d(1m)           - analyse disk I/O size by process. Uses DTrace
dapptrace(1m)            - trace user and library function usage. Uses DTrace
errinfo(1m)              - print errno for syscall fails. Uses DTrace
iotop(1m)                - display top disk I/O events by process. Uses DTrace
plockstat(1)             - front-end to DTrace to print statistics about POSIX mutexes and read/write locks It's worth your time going over this list to realize what you can truly do here. Examples You're facing elevated disk write issues that are causing the performance of your application to degrade... But is it your app at fault or some other app? Just run: sudo rwbypid.d It will print out the reads/writes to the disk: PID CMD                       DIR    COUNT
  2957 wordexp-helper              W        1
  2959 wc                          W        1
  2961 grep                        W        1

... snipped for clarity ...

   637 firefox                     R     6937
   637 firefox                     W    15325
   343 sentineld                   W   100287 The security software is really holding performance down... You can also use to get more specific results on the number of bytes written/distribution. bitesize.d That's pretty high level though. What if you want specifics: file name, process name, etc? sudo iosnoop -a Prints out output that includes pretty much everything you would need: STRTIME              DEVICE  MAJ MIN   UID   PID D      BLOCK     SIZE                     PATHNAME ARGS
2022 Jun 30 12:16:56 ??        1  17   501  1111 W  150777072     4096 ??/idb/3166453069wcaw.sqlite-wal firefox\0
2022 Jun 30 12:16:56 ??        1  17   501   661 W  150777175   487424  ??/index-dir/the-real-index Slack Helper\0
2022 Jun 30 12:16:57 ??        1  17   499   342 W  150777294     4096 ??/persistent/.dat.nosync0156.ztvXap sentineld\0 I can see the process id and how many bytes it wrote to the specific file! Let's say your program spans processes and you want to see what's going on. E.g. I run a source code build in a server I built: sudo errinfo Lets me detect the error returned from system calls to and the command that originally triggered that: EXEC          SYSCALL  ERR  DESC
    WindowServer workq_kernreturn   -2 
    WindowServer workq_kernreturn   -2 
   SentinelAgent workq_kernreturn   -2 
   SentinelAgent workq_kernreturn   -2 
          Signal           Helper    0 
          Google           Chrome    0 
           Brave          Browser    0 
          Google           Chrome    0 These are just the tip of the iceberg. I suggest checking out this old from Oracle or . Disclaimer: I didn't read the book... dtrace tutorial the book strace Amusingly enough, the strace tool also originated at Sun Microsystems in this case in the 90s. This isn't surprising though as the list of technologies originating from Sun Microsystems is absolutely mind-numbing. Strace is much simpler than dtrace in both usage and capabilities. For better and for worse. Since dtrace requires deep OS support, it never became an official feature of common Linux distributions and as a result, on Linux people use strace instead of dtrace. They aren't exactly interchangeable, though. Strace is enabled thanks to the kernel feature known as ptrace. Since ptrace is already in Linux, we don't need to add additional kernel code or modules. Typically, dtrace requires deeper kernel support, to get around licensing issues on Linux it's in a separate loadable module but that still presents some challenges. Working with strace is akin to printing a log entry every time we make a kernel call. This creates very verbose logging for every command you execute. As a result, you can follow what's going on under the hood of a running process. really Running Strace Nowadays, strace is commonly used in Linux, it's my favorite system diagnostic tool on that platform. It's remarkably convenient to work with since we can run it with no special privileges. Notice that, unlike dtrace, you should keep strace away from production environments (unless the code is segregated). It carries a significant performance overhead and would bring a production system down. The most basic usage of strace is just passing the command line to it: strace java -classpath. PrimeMain The output of strace for this is pretty long, lets go over a few of the lines: execve("/home/ec2-user/jdk1.8.0_45/bin/java", ["java", "-classpath.", "PrimeMain"], 0x7fffd689ec20 /* 23 vars */) = 0
brk(NULL)                               = 0xb85000
mmap(NULL, 4096, PROT_READ|PROT_WRITE, MAP_PRIVATE|MAP_ANONYMOUS, -1, 0) = 0x7f0294272000
readlink("/proc/self/exe", "/home/ec2-user/jdk1.8.0_45/bin/j"..., 4096) = 35
access("/etc/ld.so.preload", R_OK)      = -1 ENOENT (No such file or directory)
open("/home/ec2-user/jdk1.8.0_45/bin/../lib/amd64/jli/tls/x86_64/libpthread.so.0", O_RDONLY|O_CLOEXEC) = -1 ENOENT (No such file or directory)
stat("/home/ec2-user/jdk1.8.0_45/bin/../lib/amd64/jli/tls/x86_64", 0x7fff37af09a0) = -1 ENOENT (No such file or directory)
open("/home/ec2-user/jdk1.8.0_45/bin/../lib/amd64/jli/tls/libpthread.so.0", O_RDONLY|O_CLOEXEC) = -1 ENOENT (No such file or directory)
stat("/home/ec2-user/jdk1.8.0_45/bin/../lib/amd64/jli/tls", 0x7fff37af09a0) = -1 ENOENT (No such file or directory) Every one of these lines is a Linux system call. We can google each one of them to get a sense of what's going on. Here's a simple example: open("/home/ec2-user/jdk1.8.0_45/bin/../lib/amd64/jli/tls/x86_64/libpthread.so.0", O_RDONLY|O_CLOEXEC) = -1 ENOENT (No such file or directory) Java tries to load the library from the directory using a system open call to load the file. The exit code of the system call is , which means that the file isn't there. Under normal circumstances, we should get back a file descriptor value from this API. Looking in the directory, it seems the directory is missing. I'm guessing that this is because of a missing JCE installation. This is probably OK but might have been interesting in some cases. pthread tls -1 tls Obviously, the amount of output is overwhelming sometimes. We usually just want to see things like "which file was opened" and "what's going on with our network calls". We can easily accomplish that by only looking at specific system calls using the argument. -e strace -e open java -classpath . PrimeMain Will only show the open system calls: open("/home/ec2-user/jdk1.8.0_45/bin/../lib/amd64/jli/tls/x86_64/libpthread.so.0", O_RDONLY|O_CLOEXEC) = -1 ENOENT (No such file or directory)
open("/home/ec2-user/jdk1.8.0_45/bin/../lib/amd64/jli/tls/libpthread.so.0", O_RDONLY|O_CLOEXEC) = -1 ENOENT (No such file or directory)
open("/home/ec2-user/jdk1.8.0_45/bin/../lib/amd64/jli/x86_64/libpthread.so.0", O_RDONLY|O_CLOEXEC) = -1 ENOENT (No such file or directory)
open("/home/ec2-user/jdk1.8.0_45/bin/../lib/amd64/jli/libpthread.so.0", O_RDONLY|O_CLOEXEC) = -1 ENOENT (No such file or directory)
open("/home/ec2-user/jdk1.8.0_45/bin/../lib/amd64/tls/x86_64/libpthread.so.0", O_RDONLY|O_CLOEXEC) = -1 ENOENT (No such file or directory)
open("/home/ec2-user/jdk1.8.0_45/bin/../lib/amd64/tls/libpthread.so.0", O_RDONLY|O_CLOEXEC) = -1 ENOENT (No such file or directory)
open("/home/ec2-user/jdk1.8.0_45/bin/../lib/amd64/x86_64/libpthread.so.0", O_RDONLY|O_CLOEXEC) = -1 ENOENT (No such file or directory)
open("/home/ec2-user/jdk1.8.0_45/bin/../lib/amd64/libpthread.so.0", O_RDONLY|O_CLOEXEC) = -1 ENOENT (No such file or directory)
open("/etc/ld.so.cache", O_RDONLY|O_CLOEXEC) = 3
open("/lib64/libpthread.so.0", O_RDONLY|O_CLOEXEC) = 3
open("/home/ec2-user/jdk1.8.0_45/bin/../lib/amd64/jli/libjli.so", O_RDONLY|O_CLOEXEC) = 3
open("/home/ec2-user/jdk1.8.0_45/bin/../lib/amd64/jli/libdl.so.2", O_RDONLY|O_CLOEXEC) = -1 ENOENT (No such file or directory) There are many system calls you can learn and use to track many behaviors such as this: connect, write, etc. This is only the tip of the iceberg of what you can do using strace. Julia Evans wrote some of the most . If you want to learn more about it, there's probably no better place (also check out her other stuff... Amazing resources!). exhaustive and entertaining posts on strace Strace and Java As you saw before, strace works great with the JVM. Since strace predates Java and is a very low-level tool, it has no awareness of the JVM. The JVM works like most other platforms and invokes system calls which you can use to debug its behavior. However, because of its unique approach to some problems, some aspects might not be as visible with strace. A good example is allocations. System tools use malloc, which maps to kernel allocation logic, but Java takes a different route. It manages its own memory for efficiency and easier garbage collection logic. As a result, some aspects of memory allocation will be hidden from strace output. This can be a blessing in disguise, as the output can be overwhelming sometimes. At the time of this writing, threading works well with strace. But this might not be the case moving forward as might change the one-to-one mapping between Java threads and system threads. This might make strace output harder to pinpoint in heavily threaded applications. project Loom Finally There's an alphabet soup of "*trace" utilities in various forms that keep borrowing ideas from one another. It's a significant challenge to keep up with all of that noise. There are just too many great tools to cover, I would like to discuss btrace in a future installment though. It's very similar to dtrace but also very JVM specific so probably worth a different post. The tools I discussed today take different approaches to solve similar problems: how do we understand what a binary application "really" does? Security researchers and hackers use these tools to understand your program. They don't need the code and don't need a disassembly to see what you're actually doing. You can also use these tools to understand the impact of your actions. We often invoke an API and let things end there. But the devil is in the details and those details can carry a heavy toll. As a Java developer, I rarely think about signal delivery, process management or such low-level staples. But I do spend time looking at these things since they ultimately impact the stability and performance of my application. Also Published Here

Using External Debugging Tools dtrace and strace

Most modern mobile apps carry out asynchronous operations, operations that would require the user to wait while the app is busy. Creating nice interactive loaders that match the purpose of your app will greatly improve the user experience in your app. For example the gif above showcases an example where i used an animation of a washing machine as a loading animation in a laundromat Android application. The process of creating animations on android application as been greatly simplified by the guys at Lottie: . In this little article, i would outline the steps required to utilize these animations to make awesome loaders for Android. https://lottiefiles.com/ 1. First of all, we would need to search for an appropriate animation on , there are many free or paid animations available on the site. They also have an amazing blog post detailing some neat loading animations at: . Once you have selected an appropriate animation, you would have to create an account on the site, edit some of the colors if you would like using the animation editor and then download the animation in json format, and now we can move to the next step. https://lottiefiles.com/ https://lottiefiles.com/blog/inspiration/a-loading-spinner-slows-down-time-here-s-what-you-can-use-instead 2. We have to add Lottie to our android project by adding implementation 'com.airbnb.android:lottie:$lottieVersion' to your app level build.gradle, the latest version is 3.4.0 at the time of this publication, you can always check out the latest version at : . https://github.com/airbnb/lottie-android 3. Next, we have to move the downloaded json file to the res/raw/ resource  directory as shown below: Next we create an XML layout file to hold the LottieAnimationView, I like to use a FrameLayout so i can centralize the AnimationView. You can set a variety of attributes for the LottieAnimationView, like so: <?xml version="1.0" encoding="utf-8"?> < = = = = > FrameLayout xmlns:android "http://schemas.android.com/apk/res/android" xmlns:app "http://schemas.android.com/apk/res-auto" android:layout_width "match_parent" android:layout_height "match_parent" < = = = = = = = /> com.airbnb.lottie.LottieAnimationView android:layout_width "150dp" android:layout_height "150dp" app:lottie_autoPlay "true" app:lottie_loop "true" app:lottie_repeatMode "reverse" app:lottie_rawRes "@raw/dumbell_anim" android:layout_gravity "center" </ > FrameLayout 4. Next we have to create a DialogFragment that will handle showing, the loader. I created a LoadingDialogFragment.kt file, which is relatively simple file that displays the animation on a transparent background. Here is it: android.graphics.Color android.graphics.drawable.ColorDrawable android.os.Bundle androidx.fragment.app.DialogFragment android.view.LayoutInflater android.view.View android.view.ViewGroup android.view.Window androidx.fragment.app.FragmentManager com.initsng.fitnesscentral.R () { : View? {
        dialog?.requestWindowFeature(Window.FEATURE_NO_TITLE)
        dialog?.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))

        isCancelable = inflater.inflate(R.layout.loading_fragment, container, )
    } { { ft = manager.beginTransaction()
            ft.add( , tag)
            ft.commitAllowingStateLoss()
        } (ignored: IllegalStateException) {

        }

    }

} import import import import import import import import import import : class LoadingDialogFragment DialogFragment override fun onCreateView (inflater: , container: ?, savedInstanceState: ?) LayoutInflater ViewGroup Bundle false return false //over rid  this due to some issues that occur when trying to show a the dialog after onSaveInstanceState override fun show (manager: , tag: ?) FragmentManager String try val this catch We can initialize initialize, show or hide the loader using the methods shown below: loadingDialogFragment lazy { LoadingDialogFragment() } (!loadingDialogFragment.isAdded){
            loadingDialogFragment.show(supportFragmentManager, )
        } (loadingDialogFragment.isAdded) {
            loadingDialogFragment.dismissAllowingStateLoss()
        } //Initialize Loader private val by //Show Loader if "loader" //Hide Loader if Using MVVM and Livedata, I usually set my loading states from the viewmodel and observe the livedata object in the activity so i am able to use it as shown below: viewModel.loading.observe( , Observer{ loadingState -> (loadingState){ -> showLoader() -> hideLoader()
        }
    }) this when true false Another example of using the Lottie animations as loaders is shown below: I hope this article as been simple and straight forward enough for you to improve your loading UX on your Android applications. Credit goes to Chris Shaw https://lottiefiles.com/user/89764 for the washing machine animation, fortunately i could not find the original creator of the dumbbell animation :( Would love to hear any feedback or issues you encounter when using this or any way i can improve  this article. Thank you reading!

How to Create Awesome Loaders on Android with Lottie Animations

We are going to build a simple Front End that will use Scatter for logging in and authorising actions on the EOS blockchain Once upon a time, the only wallet I knew was the one that carries my lunch money. Today there are numerous wallets out there, but instead of keeping your money they keep your private keys. Now among all the wallets out there I have chosen to work with Scatter due to it’s popularity among the EOS community. Most of the EOS Dapps being built these days, almost all of them supports Scatter. Scatter has also become increasingly popular among Ethereum and Tron, making it a solid investment for your future Dapp development. Setting up Scatter Scatter used to come in the form of a Chrome plugin, but now it has officially dropped that in favour of a full native app. If you have not installed Scatter, the first step you need to do is download it from its GitHub page here. For the purpose of this guide we are going to import our EOS account we created on the CryptoKylin testnet the other day into our Scatter wallet. If you have no idea on how to create a testnet account, I have already written about it on my first guide under the EOS Account section, click here. Now once you have your testnet account name and private key, fire up Scatter. On your first run it will ask you to create a password. You will need this password to unlock your wallet when ever you want to use it again at a later time. Since we are planing to import an EOS testnet account, we must add the testnet details to Scatter first. The way to do this is to go to the Settings -> Networks. You will find the Settings button (shape of a gear icon) on the top right corner. Once again you need to key in your password. CryptoKylin Testnet details Under the “Your Networks” tab, click on the Add button. Key-in the details according to the screenshot above. At the time of this writing these inputs are still valid, however to confirm that you have the latest inputs you should always ask in their telegram group here. Import Keys Ok now go back to the main interface of Scatter. Click on the “Add Keys” button on the bottom left corner. Add Keys menu You will see 3 options, click on the “Import Key” button. Import Key menu Another 3 options will be shown, click on the first button “Text” since we have our private key in the text format. Go ahead and paste your testnet private key. Since every account you create on the testnet comes with an Owner and Active key, for simplicity sake you can just import your Active key. Linked Accounts Since we have already added the CryptoKylin details under the networks settings, Scatter automatically links your private key to your account name on the CryptoKylin testnet. You can view this under the Linked Accounts tab. Optionally you can give a nicer name for this key under the “Key Name” text box above. I am going to name it youraccname1@active. At this point, we have completed all the setup necessary for Scatter to work with our Front End. Here is a summary of the main tasks we have accomplished so far: Created a testnet account Added the testnet details to Scatter Imported our testnet private key to Scatter In the next section we will develop the Front End so it will talk with Scatter nicely. You will want to keep Scatter app running in the background so that our Front End detects it. Front End , I have written about building a simple Front End for EOS. It was a simple Dapp that is able to login the user with their account name and private key. To make this Dapp more practical, we are going to modify it so that it can work with Scatter. In my previous guide When ever an action needs to be performed on the blockchain; for example logging in, with Scatter the user does not need to key in their private key every time. On the front-end side we do not need to cache their private key anymore, as this could cause vulnerability issues. By using Scatter, this is how it is going to work from now on: every time we need to perform an action, we invoke Scatter from it’s javascript API. Scatter will then request the user for their permission on which key to use to perform the action. After the user has authorised then Scatter will return us a signature object that we can use to sign the transaction on the blockchain. Super simple, clean and more secure! I have modified our to now work with Scatter. Let’s get started by cloning my latest Github project and I will walk you through the main changes. Open terminal and type this: previous front-end $ git clone https://github.com/shankqr/eos-scatter.git Once all the files have been cloned to your local machine. Get into the project directory and install all the dependencies $ cd eos-scatter$ npm install To avoid any babel/webpack issues with our Vue project, type this: npm i -D @babel/runtime VUEX The first thing we are going to do is store the status of our login with VUEX. VUEX is quite similar to Redux as it is both inspired by FLUX, accept it’s more suited for Vue. I find overall using VUEX more simpler than Redux, however both these state management framework are equally good in my opinion. //store.jsimport Vue from 'vue';import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({state: {loggedIn: false},mutations: {loginStatus(state, status) {state.loggedIn = status;}},getters: {loggedIn: state => state.loggedIn},actions: {}}); Here I created a state called loggedIn and set it to false, then I created a mutation called loginStatus that just changes the value for loggedIn. Lastly I added a getter so we can retrieve the value of our loggedIn state. Ok let’s see how we are going to access this newly created state on the UI part. I have modified the AppTopBar.vue component to include a Logout button.  <template><span><v-toolbar app color="black darken-4" dark><v-spacer class="hidden-md-and-up"></v-spacer><v-toolbar-title>{{appTitle}}</v-toolbar-title><v-spacer></v-spacer><v-btn ="handleLogout()" v-if="$store.state.loggedIn">Logout</v-btn></v-toolbar></span></template> @click <script>export default {name: 'AppTopBar',data() {return {appTitle: 'My EOS Dapp'};},methods: {handleLogout: async function() {this.$store.commit('loginStatus', false);this.$router.push('/');}}};</script> <style scoped></style> The logout button has been wired to the handleLogout method and it calls the $store mutation named loginStatus. This action will set our loggedIn state to false. Pretty simple logic here. Now let’s go through the most important part which is the API calls to work with Scatter. Scatter API From early on I have stored all EOS related methods in a class called EosService. We are going to extend this class so that it is able to talk with Scatter. //EosService.jsimport { Api, JsonRpc } from 'eosjs';import ScatterJS from 'scatterjs-core';import ScatterEOS from 'scatterjs-plugin-eosjs2'; const endpoint = ' ; // kylinconst network = {blockchain: 'eos',protocol: 'https',host: 'api.kylin.alohaeos.com',port: 443,chainId: '5fff1dae8dc8e2fc4d5b23b2c7665c97f9e9d8edf2b6485a86ba311c25639191'}; https://api.kylin.alohaeos.com:443' class EosService {constructor(dappName, contractAccount) {this.dappName = dappName;this.contractAccount = contractAccount;ScatterJS.plugins(new ScatterEOS());this.rpc = new JsonRpc(endpoint);window.ScatterJS = null;} connect = async () => {await ScatterJS.scatter.connect(this.dappName).then(connected => {if (!connected) return console.log('Failed to connect with Scatter!');this.scatter = ScatterJS.scatter;}); await this.scatter.getIdentity({ accounts: [network] }).then(() => {this.account = this.scatter.identity.accounts.find(e => e.blockchain === 'eos');}); if (this.account === null) return false; return true;}; transaction = async (action, data) => {this.api = this.scatter.eos(network, Api, { rpc: this.rpc }); const resultWithConfig = await this.api.transact({actions: [{account: this.contractAccount,name: action,authorization: [{actor: this.account.name,permission: this.account.authority}],data: {...data}}]},{blocksBehind: 3,expireSeconds: 30});console.log(resultWithConfig);return true;};} export default EosService; To work with Scatter, we first need to import 2 libraries: ScatterJS and ScatterEOS. We then specify the constants to store the endpoint and network details, in our case we will be using the testnet details. We will be only needing to main methods here, which is the connect and transaction. Scatter: connect method In the connect method we simply try to link a Scatter account with our Dapp. Scatter will then prompt the user to select an account they would like to use with our Dapp. Scatter: transaction method In the transaction method, we are invoking an action on the EOS smart contract. What Scatter will do in this case is to prompt the user with a dialog to allow or deny this action. Wrapping Up For the final section of this guide let’s have a look at the Login page where we use our EosService.  <template><v-container><v-layout row class="text-xs-center"><v-flex xs3 style="background-image: url(' )"><v-card height="500px"></v-card></v-flex><v-flex xs4 class="grey lighten-4"><v-container style="position: relative;top: 13%;" class="text-xs-center"><v-card flat><v-card-title primary-title><h4>Login</h4></v-card-title><v-form><v-card-actions><v-btn ="handleLogin()" primary large block>Login</v-btn></v-card-actions></v-form></v-card></v-container></v-flex></v-layout></v-container></template> http://cdn.wallpapersafari.com/7/86/gqiGH7.jpg' @click <script>import EosService from '@/eosio/EosService'; export default {data() {return {accountName: '',privateKey: '',eosio: null};},methods: {handleLogin: async function() {if (this.eosio === null) {this.eosio = new EosService(process.env.VUE_APP_DAPP_NAME,process.env.VUE_APP_SMART_CONTRACT_NAME);} if (!(await this.eosio.connect()))return console.log('Failed to get Scatter account'); if (await this.eosio.transaction('login', { user: this.eosio.account.name })) {this.$store.commit('loginStatus', true);this.$router.push('home');}}}};</script> Here we simply import our EosService, initialise our class and pass in the parameters into the class constructor. We then call the connect() method and the transaction() method passing in the name of the action we want to call on the smart contract and it’s input data. If it’s successful the method will return true and we change our loginStatus state to true and route the user to our main page. Dapp main page, console prints out the transaction details If you open the chrome developer tools you should be able to see the transaction details printed out on the console. Congratulations! we have successfully integrated Scatter to your Dapp. We have reached the end of this guide, but I would love to hear what you guys are working on. If you need help don’t be afraid to . reach me

How to integrate Scatter with your EOS Front End

You might already be familiar with , a web/desktop wallet that makes it easy for ordinary users to store their private key and interact with apps. Integrating Scatter into apps can be tricky and, since Scatter is improving quickly, there have been some breaking changes introduced recently. I’ve had a bunch of people ask me about integrating Scatter, so I created this tutorial on how to integrate the latest version of Scatter Desktop into your distributed application. Scatter EOS Create your Scatter Integration We’re going to start by setting up Scatter inside of a Component and creating a transaction method. We’ll be able to use this anywhere in our application to enable users to sign transactions with Scatter. Create Separate Scatter File and install dependencies Make sure you import eosjs, scatterjs-core and scatterjs-plugin-eosjs2. Notice that we’re importing ‘scatterjs-plugin-eosjs2’ as our version of eosjs is greater than 16. npm i -S eosjsnpm i -S scatterjs-core npm i -S scatterjs-plugin-eosjs2 I’d highly recommend breaking out your core Scatter functionality into a separate file, which I typically call eosio-client.js. import React from “react”;import { Api, JsonRpc, JsSignatureProvider } from “eosjs”;import ScatterJS from “scatterjs-core”;import ScatterEOS from “scatterjs-plugin-eosjs2”; Set up your network and endpoint Next, we’ll want to define an endpoint and network. Your endpoint will be the location of your eosio contracts. If you are using a contract on your local machine, it will probably be something like If you’ve deployed to Jungle Net, you can choose an endpoint from here: . On the mainnet, most of the block producers have an api endpoint available and you can choose from any of these: . http://localhost:8888. http://jungle.cryptolions.io/#apiendpoints https://www.eosdocs.io/resources/apiendpoints/ We’re going to be accessing a contract deployed to the Jungle net, so we’ll use the following endpoint: const endpoint = " 0"; http://jungle2.cryptolions.io:8 We’ll set up our network next. Networks reference certain blockchains so you can get accounts and build signature providers. Note that we’re going to use the Jungle (test net) chainId in this example. If we were using the Mainnet, we would use a chainId of “aca376f206b8fc25a6ed44dbdc66547c36c6c33e3a119ffbeaef943642f0e906”. We also specify the blockchain being used since you can actually use Scatter with other blockchains like Ethereum and Tron. const network = {blockchain: "eos",protocol: "http",host: "jungle2.cryptolions.io",port: 80,chainId:      "e70aaab8997e1dfce58fbfac80cbbb8fecec7b99cf982a9444273cbc64c41473"}; Set up your Component We’ll be able to instantiate an instance of the EOSIOClient from anywhere in our app, which will give us access to the variables and methods we’re creating here. We’re going to set up our constructor to accept one parameter, contractAccount. This will enable us to interact with multiple contracts within our application by passing in whichever contract name we want to use for a particular EOSIOClient instance. export default class EOSIOClient extends React.Component {constructor(contractAccount) {super(contractAccount);this.contractAccount = contractAccount; Set up ScatterJS from within our constructor function. Make sure to pass in new ScatterEOS(), which will tell Scatter that we’re using “scatterjs-plugin-eosjs2”. ScatterJS.plugins(new ScatterEOS()); Connect to Scatter and Create References The last thing we’ll do within the constructor is connect to Scatter, create a reference to your account and create a reference to the fully initialized Scatter proxy. This is a lot of code, but it’s best to show it as a single block. Let me know in the comments if this needs more explanation. try {ScatterJS.scatter.connect(this.contractAccount).then(connected => {if (!connected) return console.log("Issue Connecting"); const scatter = ScatterJS.scatter; const requiredFields = {accounts: [network] // We defined this above}; scatter.getIdentity(requiredFields).then(() => {this.account = scatter.identity.accounts.find(x => x.blockchain === "eos"); const rpc = new JsonRpc(endpoint);  
   this.eos = scatter.eos(network, Api, { rpc });  
 });

 window.ScatterJS = null; // Don't forget to do this!  
 
 }); } catch (error) {console.log(error);}} // Close the constructor function Note that it’s incredibly important that you set this.accounts above rather than hardcoding your account information or asking your users for the information. Add a transaction method You are now ready to sign transactions using Scatter. Whenever we call a transaction method on an EOSIOClient instance, we’re going to pass in an action name and data. This is a fairly simple transaction that we’ll use for basic interaction with our smart contracts. You can check out the to structure more intricate (multiple action) methods, but this should work for most basic smart contract interaction. eosjs documentation transaction = (action, data) => {return this.eos.transact({actions: [{account: this.contractAccount,name: action,authorization: [{actor: this.account.name,permission: this.account.authority}],data: {...data}}]},{blocksBehind: 3,expireSeconds: 30});}; Congratulations, you have successfully set up your application so that users can sign transactions using Scatter. You can see a full version of this file . here Create an EOSIOClient Instance in your Application Make sure you import EOSIOClient into your file. import EOSIOClient from "../utils/eosio-client"; Inside of your constructor, create a this.eosio reference. Make sure you head over too and add your app to the apps.json file. Pass that contract account name into your initializer. ScatterApps this.eosio = new EOSIOClient(“YOUR APP NAME”); Create your first transaction We’re ready to create our first transaction. In this example, a user is going to buy RAM. In our interface, a user can enter a number of bytes to buy and click ‘Buy Now’, which triggers this function call. handleBuyRam = async event => { event.preventDefault();let bytes = event.target.bytes.value; const actionName = "buyrambytes";const actionData = {buyer: accountName,receiver: accountName,bytes: parseInt(bytes)}; try {const result = await this.eosio.transaction(actionName, actionData); console.log(result);  
  this.getBalance(); // We can check a user's EOS balance.  
} catch (e) {  
  console.log("\\nCaught exception: " + e);  
  if (e instanceof RpcError) console.log(JSON.stringify(e.json, null, 2));  
} }; Next Steps to the full eosio-client.js file just in case you missed it above. Here is another link You can now set up Scatter, create multiple instances of EOSIOClient pointing at different contracts and call transactions. Please let me know if you’d like me to write a follow-up about getting information from the blockchain to display to your users!

How to Integrate Scatter Desktop Wallet into your EOS Dapps using Reactjs

Web Activities

I love and I love the productivity and flexibility that comes from a good command line interface. If you have read any of my previous articles here: JavaScript _Read writing from Mike Parsons in Hacker Noon. Software Research Geek. Every day, Mike Parsons and thousands of other…_hackernoon.com Mike Parsons - Hacker Noon you know that I am a big fan of getting a lot done in a few lines of code. I spend most of my time inside the browser console and while I love the power and expressiveness of the development tools, they are often overkill for what I want. I also like having a consistent JavaScript Console interface that is available from anywhere, not just inside the browser. For example, there are times when I want to use JavaScript outside the browser to automate Window’s Office Applications or script or use the browser in conjunction with native applications like SQL Server to perform some data tasks that are just not available inside the browser sandbox. One common use case I have frequently is to scrape some data from a web page and insert it into a native application like Microsoft Excel for further data analysis. Node.js While each of the environments listed in the title have there own console environments and REPL’s, I have found the command line interfaces limited in terms of integration with the host Operating System. Most operate inside a sandbox that makes perfect sense for the casual user but really restricts the capabilities I want as a power user or system’s engineer. Another use for this console is during presentations or live coding sessions when you want to demonstrate ideas quickly. I use it frequently to prototype ideas and to validate features available in the browser or the underlying OS. My Universal JavaScript Console is based on the terrific work done by Remy Sharp _jsconsole - Web based console - for presentations and workshops_github.com remy/jsconsole I took Remy’s excellent console and extended it with a few features that allow me to host the console in multiple environments. Let’s get started with the browser interface, found here: _Universal JavaScript Console_s3.amazonaws.com Console When you first navigate to the console, you are presented with this interface: You can start entering any valid JavaScript commands and immediately see the output. Try entering a few commands: Date()locationnavigator.userAgent1+1 You can enter any valid JavaScript, including setting variables and/or creating new functions. Many times you want to leverage an existing JavaScript library such as jQuery, lodash or the amazing ALASQL that allows you to use SQL in the browser. You can simply load the library via it’s URL, for example: I have added a few shortcuts for libraries that I frequently use: jqueryprototypedojomootoolsunderscorelodashmomentyuialasql In addition to loading JavaScript Libraries, you can also load HTML content from another Web Site. This is useful in scraping web pages, for example: These previous examples demonstrate using the Console in standalone mode. This is useful but my number one use for the Console is by leveraging it in the context of an existing Web Page or Site. In this mode, you basically inject the Console inside an existing Web Page and it acquires the context of the page so you can script the contents of the page just as you would if you opened the browser development tools. However, unlike the browser console, which is sandboxed via the web site settings, the Universal Console provides a great deal more power in terms of bringing in existing libraries into an existing web page and/or via extended network capabilities, like WebSockets or cross domain XMHttpRequest calls. This is accomplished via the use of a Bookmarklet, which you can access via the command. Simple drag the Bookmarklet from the help page to your browser Bookmarks and it becomes available from any web site. :help To illustrate this functionality, we are going to navigate to and into this page so we can script it’s contents. For this example, we are going to use the Console and one of my favourite Libraries (ALASQL) to get a list of all the new’s links on the HackerNews web site and export those to Excel. We are going to do this with 2 lines of code: https://news.ycombinator.com/newest Inject the Console :load alasql alasql("select href,innerText INTO XLSX('news.xlsx',{headers:true}) from ? where className='storylink'",[[...page.document.all]]) That’s pretty cool! When you inject the console into the page, it loads an external page ( ) and creates a new variable within the console. This variable is a reference to the JavaScript window object of the host page, so you can access any properties or methods of that page (i.e. , etc, etc). make sure you allow pop ups! page page.document, page.location Unlike the sandbox settings of the host page, however, the console has access to any web page, JavaScript library or Network endpoint (via WebSockets or XMLHttpRequest). Hopefully, this gives you some idea of the power of the Universal Console. Electron Hosting In the title of this article, I mentioned that the Console is also available in environments other than just the browser. First, lets look at how we host it in Electron. The first thing you need to do is download Electron via _Build cross platform desktop apps with JavaScript, HTML, and CSS._electron.atom.io Electron Once you have Electron installed and running, you need to create a new Electron Application, which in this case is a simple as creating a folder(call it console or whatever you like) on your machine and adding these 3 files to the folder: package.json {"name": "console","version":"1.0.0","main": "index.js"} index.js const {app, BrowserWindow} = require('electron')const path = require('path')const url = require('url') let win function createWindow () {win = new BrowserWindow({width: 800, height: 600})win.loadURL(url.format({pathname: path.join(__dirname, 'console.html'),protocol: 'file:',slashes: true})) win.on('closed', () => {win = null})} app.on('ready', createWindow) app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit()}}) app.on('activate', () => {if (win === null) {createWindow()}}) console.html <html><meta http-equiv="X-UA-Compatible" content="IE=Edge"><head><title>Console</title></head><body></body><script src=" "></script></html> https://s3.amazonaws.com/mparsons/jsconsole/js/inject.js Once you have created these files, simply drag the folder on the electron executable to run it: You should see something like the following: And then you can start typing any commands that reference the Electron, Chrome Browser or Node.js objects: NW.js Hosting Hosting in NW.js is just as easy. Download the application from here: _nwjs_nwjs.io NW.js As in the Electron example, create a local folder and add these two files: package.json {"name": "console","version":"1.0.0","main": "console.html"} console.html <html><meta http-equiv="X-UA-Compatible" content="IE=Edge"><head><title>Console</title></head><body></body><script src=" "></script></html> https://s3.amazonaws.com/mparsons/jsconsole/js/inject.js Again, just drag the folder onto the executable to run it and start typing commands to access the NW.JS environment: nw Note that both NW.JS and Electron host Node.js so you can use the Universal Console to script against the Node.js context in both these applications: Finally, we come to my most frequent usage of the Universal Console … Hosting the Console in a Window’s Application. You might say that both NW.JS and Electron are Window’s Applications and you would be correct. However, there are a lost of scenarios where Electron, NW.js as well as Node.js fall short in terms of native Window’s functionality, in particular, COM Automation and specifically Microsoft Office integration. Most businesses still run Microsoft Excel, Word, Outlook, etc and I wanted a way to script these applications using my favourite language, JavaScript. While the Window’s Developer Ecosystem has a ton of ways to build and extend Office Applications, they usually require a ton of dependencies and skills in using C# or Visual Studio, which in my case is overkill if I just want to do something quick and easy. So, we are going to host the Universal Console in a Window’s Application using a technology that already exists on every Window’s machine — the Window’s Scripting Host, and in particular, the HTML Application, or HTA: _On the other hand, an HTA runs as a fully trusted application and therefore has more privileges than a normal HTML file…_en.wikipedia.org HTML Application - Wikipedia This is as simple as creating a text file called console.hta on your local machine: console.hta <html><meta http-equiv="X-UA-Compatible" content="IE=Edge"><head><title>Console</title><HTA:APPLICATION ID="oHTA"APPLICATIONNAME="Console"BORDERSTYLE="normal"CAPTION="yes"CONTEXTMENU="no"ICON="favicon.ico"INNERBORDER="no"MAXIMIZEBUTTON="yes"MINIMIZEBUTTON="yes"NAVIGABLE="yes"SELECTION="yes"SHOWINTASKBAR="yes"SCROLL="no"SCROLLFLAT="yes"SINGLEINSTANCE="yes"SYSMENU="yes"VERSION="1.0"WINDOWSTATE="normal"/></head><body></body><script src=" "></script></html> https://s3.amazonaws.com/mparsons/jsconsole/js/inject.js That’s it! Save this file on your local machine and double click to run it: It works the same as in other environments with the important distinction that it now has access to the entire Window’s Ecosystem via COM integration. That means, you can do stuff like talk to Excel, Word, script Internet Explorer to scrape web sites or use third party applications that have a COM (or OLE Automation Style Interface), like Adobe, AutoDesk, Microsoft Dynamics, etc. Indeed, you will find that most Window’s Applications can be accessed and programmed this way. In this simple example, I am going to load Excel and read and write some simple values using the Excel Object Model. As a security measure, Window’s ask for permission to allow this: This show’s how easy it is to script Excel: Finally, in this next example, I am going to load the contents from an external Web Site and paste the values into the spreadsheet: So the following 6 lines of code are all that’s needed to perform this task: //Load our data from the web :load https://news.ycombinator.com/newest //Assign it to a variable for easy reference [Optional] var doc=docs[" https://news.ycombinator.com/newest "] //load our web page scaping library :load alasql //Run our query to scrape the data var data=alasql("select href,innerText INTO TAB({headers:true}) from ? where className='storylink'",[[].slice.call(doc.all)]) //copy it to the clipboard clipboardData.setData ("Text", data); //Paste it into Excel wb.ActiveSheet.Range("A1").PasteSpecial() Hopefully, this demonstrates the power of our Universal Console. You can access an early version here and I hope to document and share the code on Github soon. _By Mike Parsons_s3.amazonaws.com Universal Console If you like this article, please give it a recommendation! Thank you!

Stories, News & Mentions about WINDOWSEATER

Windowseater’s Stories on HackerNoon