Forem: Dennis Mathew Philip

Will a Television purchased from the US work in other countries?

Dennis Mathew Philip — Sun, 05 Dec 2021 01:54:16 +0000

Overview

This article suggests a DIY definitive way to understand if you will fry your device connecting to a non 120V supply.

Will it work?

I purchased a LG Television 65UP7670PUC.AUS from a local Costco in the US where the supported voltage is 120V/60Hz to be used in India where the voltage is 240V/50Hz. I was curious if the television would work without a step down transformer.

The specs on the LG Website says the television supports dual voltage.

However, when I received the unit, it had a label on it mentioning it supports only 120V. Quite misleading.

Running the Television with a Step down transformer is a hassle. I wrote to LG asking if this particular model supports 220V and received a reply.

Duh!

🪛 Time to open the backplate

Every television has an internal power supply board that converts the input AC voltage to the desired DC voltage.

Removed the screws behind the television and with a little bit of prying was able to get the backplate off. On checking the input voltage rating on the internal power supply board, voila, it's written input 100-240V. There lies my answer.

If you have a television or any electronic equipment purchased from the US and wondering if that would work in your destination country, the definitive way is to check the input rating voltage labeled on the PCB of the internal power supply board.

The key to HYPER productivity

Dennis Mathew Philip — Sun, 07 Feb 2021 18:35:46 +0000

Have the spiders made a web 🕸 on your CAPS LOCK key? Has it not lost its shine, from the time you bought that keyboard?

Let's find a way to put it to some good use.

What is Hyper Key?

Hyper Key = Your own key for hyper-productivity.

Hyper key is the name given for the combination (in a mac keyboard layout context)

SHIFT + CONTROL + OPTION + COMMAND

🛑 STOP. Read on before you start using your 🦶 toe to keep the keys pressed.

What's great about it?

I have always wished for an easy to remember keys combination for some of my workflows just like elsewhere on the internet Ctrl/Cmd + C is for copying. But, then I realize this combination is already taken.

For me, it may be an easy key for window resizing;
For you, it may be to start playing a Spotify playlist;
or, an easy key to control the brightness of your fifth monitor behind you.

Whatever the use case may be, this key combination is YOURS, made for you. An easy to remember key combination that, does not conflict with any pre-mapping that the machine was shipped with.

We decide how to make use of this. The power is in our hands.

Remap time

What if, we can remap our CAPS LOCK key to be the new HYPER key?

Download and install Karabiner Elements - A powerful and stable keyboard customizer for macOS.

Goto "Complex Modifications"
"Add Rule" to remap caps_lock to our hyper key combo

Easy?

Customize your apps

For window resizing, I use an app called Rectangle. Fire up your app and record the newly minted shortcut.

This is just one example, where we can use the num pad to resize open windows to regions on the screen. The 1-9 keys in num pad region naturally align to 9 regions on screen and can be easily remembered the way it is arranged on the keyboard.

Never again drag your window corners to perfectly align one-third of your screen just because we forgot the shortcut.
Use them in your favorite application where you spend the time the most.

For controlling all monitor brightness, found an app Brightness Slider and configured hyper key to be used with it.

💗 Love little productivity hack like these. They optimize our time to getting things done a tad bit faster.

🙏 Thank you for reading

We saw what Hyper key is, which is just like a combination key Control or Alt. Also, saw how to remap the CAPS LOCK key to optimize some of our workflows. Here, we saw one example of window resizing, but the possibilities this opens up are endless for your daily repetitive tasks. May the force be with you.

What are you going to use Hyper key for?

Please find my other writings here:

Make yourself rich by hacking this juice shop 💵

Dennis Mathew Philip — Mon, 29 Jun 2020 02:38:08 +0000

As a business owner or as a professional, getting your website hacked is no fun. How do hackers do this?

Through this article, I would like to bring your attention to an exciting topic - Web Application Security.

Knowing some of the techniques will help you design a reasonably "secure" web application. Before a release, attacking your own application will help mitigate some of the vulnerabilities.

📖 Learn the techniques

Pay attention to the screenshot below. You may have placed eCommerce orders for 1 or more items. Have you thought what would happen when an order is placed with a quantity of -100 items? This order will return money to the shopper's credit card!

Do you want to be that devastated owner of a business that "pays" money for no juice sold?

You may have read or heard about SQL injection, Cross-site scripting, Cross-site Request Forgery, and other popular attacks.

Let's learn swimming, by actually being in the water.

🥤 Set up your juice shop

Before we start, we need an online juice shop - an insecure vulnerable web application to learn some basic and advanced attacks. Luckily there is one that exists.

Assuming you have NodeJS installed:

Clone the repository
Install the project dependencies
Start the server.

git clone https://github.com/bkimminich/juice-shop.git
npm install
npm start

Your juice shop is up and running.

Navigate to http://localhost:3000

💵 Make yourself rich

The user interface will let you pick only 1 juice.

mmmmm... What about the API?

Open the browser developer tools, firefox will let you resend a request quite easily.

That works 🎉.

Wait, what just happened? We used the API to post the quantity of juice as -100.

Placing this order will pay you $198.01 from the juice vendor!

Obviously, this is a hypothetical situation. The web application is mindfully crafted to be insecure to show the point.

🧊 The tip of the iceberg

"OWASP Juice Shop" is an application that provides awareness for security risks that potentially exist in modern web applications.

This is only one of the many challenges in the set of OWASP Juice Shop exercises. See all the challenges and work through each of them. You will be delighted to learn some of the popular techniques to

Access confidential files on the server
Decrypt coupon codes and get an 80% off an order
Login as a different user without knowing their password

Start here: https://bkimminich.gitbooks.io/pwning-owasp-juice-shop/content

This is definitely one of the best free security training for you out there. Let's create secure web applications together.

🙏 Credits

Björn Kimminich for creating and maintaining this project for the world to learn.

Please find my other writings here:

What makes these borders beautiful?

Dennis Mathew Philip — Tue, 19 May 2020 15:40:25 +0000

Beauty is in the eye of the beholder.

Are you in the camp that feels these borders are beautiful?

These designs are increasingly seen in modern design and in the design community, they are known as Neumorphism. They add extra polish to dashboards and dark mode mobile app designs. I certainly feel these are gorgeous. Let's take a closer look at these.

A tale of two shadows

These borders are created using two complimentary shadows. One lighter and one darker having complimentary offsets. They are professionally hand-crafted to give this soft UI look. The offset and blur of the shadow depend on the size of the element.

For example,

To create a pressed surface create two inset shadows with the slightly darker and lighter surface shades

To create an elevated surface create two shadows again with slightly darker and lighter surface shades

Start here

A great starting point is https://neumorphism.io/

Use in moderation.

Next time you see a neomorphic design, you know they are nothing but, the play of 2 shadows.

Please find my other writings here:

Extend your wireless signal with an old router

Dennis Mathew Philip — Sat, 14 Dec 2019 09:40:52 +0000

A cost-effective alternative to Mesh routers for signal expansion where internet speeds are less than 300Mbps

Introduction

Do you have wifi dead spots in your home? Can you get hold of an old wireless router? Let's fix it by wirelessly linking both routers and then extend your wifi range to reach all the corners.

Typically the Internet Service Provider(ISP)'s cable enters your home at a corner. This forces you to place your router at one corner of your home which is not the ideal placement for optimal coverage.

📖 Background

The technique I am going to explain is called Wireless Distribution System (WDS) which enables us to wirelessly link two routers and thereby extending the reach of the wireless signal.

I purchased a preowned TPLink Archer C50 for $15 for testing purpose. The general theory should work across manufacturers/models that support WDS.

TPLink Archer C50 supports up to 300Mbps over the 2.4Ghz band and 867Mbps over the 5Ghz band. Also, comes with WDS support. My internet speed is well below the 300Mbps limit which made this a cost-effective pick to extend the wifi range of my 2.4Ghz band.

⚙️ Configuration

This requires configuration on the base router as well as the extended router. The base router need not support WDS.

The key to successfully configuring this lies behind the idea we need to bring all the devices on a common LAN address range 192.168.1.x

Base router configuration

The base router is the primary or root router which is the entry point from the ISP to your home. We are going to extend the wifi signal from this router.

Assign an IP 192.168.1.1 to this router and limit the range of IP addresses issued from this router to be between

192.168.1.3 - 192.168.1.99
Set the channel of the wifi signal to be static (eg: 11) instead of auto

This will make sure whenever the router reboots the WDS link does not break. For WDS to work, both routers need to be on the same channel.

Extended router configuration

Extended router is the new router(in my case TPLink Archer C50) which can be positioned optimally for the best wireless reception extending the base router signal.

Assign an IP 192.168.1.2 to this router and limit the range of IP addresses issued from this router between

192.168.1.100 - 192.168.1.199

Assign Static IP
Configure DHCP

(In some other places, you may see instructions to turn DHCP completely off for the extended router. However, this did not work for my case. I had to keep the DHCP on for the extended router)
Configure WDS

Enable the WDS bridging mode. TP-link router had a survey button that conveniently found the mac address of the base router. If your router does not have this, you can find this from the label on the router or issuing a command on the CLI

arp -a

Provide the same SSID and password for this network. Devices will automatically connect to the strongest wireless signal in areas of overlap.

🎖 Results

In areas of overlap, you will see the signal from both routers. In this case, since the signal from the extended router is the strongest, the devices will automatically latch onto the stronger network.

The internet connection speed where I tested this was 20Mbps. I am getting the full 20Mbps on the wired, wireless signal from primary router as well as from the wireless signal from the extended router.

Conclusion

WDS is great for expanding the internet signal range with minimum investment and serves as a great alternative before investing in an expensive mesh router system. This setting is often buried deep inside the router configuration and has not gotten much attention.

Once we link either the 2.4Ghz or 5Ghz band from the base router, the extended router can transmit both bands. This technique works well typically where the internet speeds are less than 300Mbps.

Please find my other writings here:

Automated End to End tests made easy

Dennis Mathew Philip — Wed, 25 Sep 2019 06:41:45 +0000

Time to add some end to end tests for your next application. Today I have a new browser automation tool to share.

This is written from the perspective of the team heavily using JavaScript as the development language. I evaluated a few browser automation frameworks for end-to-end application testing and thought to share things the current landscape of tooling.

An End to end test is also known as functional-tests or happy-path tests which automates the sanity or spot checks before or after a software release.

I needed to pick one considering ease of development, long term maintainability, test framework integration. Let's explore a few interesting players out there.

The good old Selenium
The Chromium based browser automation API Puppeteer
The most hyped Cypress
Taiko - The new kid on the block (It's ok if you have never heard of this. I didn't too)

TL;DR; I ended up picking Taiko for its ❤️ beautiful API and it just works like magic!

1. Selenium ❌

Selenium was built in 2004. The major pain point of Selenium is its architecture.

A system that behaves differently in each run, also termed as flakiness is the major concern with Selenium with its layered architecture. Let's see why Selenium tests are flaky.

In the diagram, it is obvious that the commands have to pass through multiple layers. The drivers are built external to the browser which results in driving the browser "blind" with no feedback on whether the command has successfully been executed.

2. Puppeteer ❌

Fast forward from 2004, 14 years later, Google released v1.0 of Puppeteer.

One thing you will notice from the previous diagram is there are fewer layers between the controller and the browser. This is the key difference between the modern end to end testing frameworks.

Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol.

This is powerful. It uses the DevTools protocol, the same low-level protocol which the Chrome Developer tools uses to interact with the browser.

A code example:

const browser = await puppeteer.launch();

const page = await browser.newPage();
await page.goto('https://example.com');

console.log(await page.content());
await page.screenshot({path: 'screenshot.png'});

await browser.close();

However, it is geared towards browser automation and the end to end web application testing is only one of them. This means you have to explicitly wait for a page to load, assert things you care about which will soon make writing and maintaining tests not so fun.

3. Cypress ❌

Cypress automates the browser with its own unique architecture. Cypress takes a less traveled and hard path to make runs the test from inside the browser and communicates the actions to an outside Node process which makes testing very capable.

It comes with electron baked in. Many times, I found very simple tests work in electron which they bundle by default however fails to run in Chromium or Chrome in a headless environment.

Rave reviews, Marketing, Podcast talks, Beautiful documentation, however, it does not live up to the high expectations you would expect.

I gave it enough energy and wanted this to work. Wanted this to work so badly. However, realized it has dangerous browser proxy mods which fail to set the redirections when run inside a corporate proxy environment and the most annoying limitation, if you are on one domain you cannot visit another domain.

Each test is limited to only visiting a single super-domain.

So if you have an application with a login page which is in another domain get ready to cry 😭. Cry so loud that Cypress team hears. I wish these change in the future. I gave up.

4. Taiko ✅

Taiko is from ThoughtWorks. The same place where Selenium was born. It shines ✨.

It shines really well with its ❤️ beautiful API.

Show me some code...

await openBrowser();
await goto("google.com");
await write("Dennis Mathew Philip");
await click("Google Search");

You will notice there is no waiting for an element to appear. No CSS selectors. It is smart to identify what input field.

✅ Beautiful documentation
✅ Integration with Jest and other popular testing frameworks
✅ No explicit wait needed. Less code
✅ Headless and CI friendly

It also has a REPL which makes the development a breeze.

A straightforward gif from the Taiko team:

I loved using Taiko. I am having fun writing end to end tests. I hope you will too.

To conclude...

End to end testing improves the confidence with which you release the software. We compared some of the free and open-source end to end testing solutions - Selenium, Puppeteer, Cypress and Taiko. The opinion written here is straight what I experienced. Consider your use-case closely and pick the right tool what works best for you. Browser automation tools is a lot of power. Use responsibly.

If your web application does not have at least one functional test, start today.

Please find my other writings here:

Automate your node dependency updates

Dennis Mathew Philip — Sun, 21 Jul 2019 08:36:26 +0000

A reasonably large Node application will have 100's of dependencies. Keeping them all updated is a 🧹chore a developer needs to perform at some point. Either you ignore the dependency updates until you are stuck with a very old set of dependencies hindering your progress with 🦹‍♂️ security vulnerabilities or you spend your valuable application development time manually testing out the updates on a reasonable cadence.

Let's see how to automate this process in an enterprise environment assuming you have some kind of CI/CD environment and a private GitHub repo.

🥒 Ingredients

Solid unit tests for your code. Bonus points if you have end to end tests and snapshot tests for UI components
next-update An npm package which tests whether your dependencies can be updated without breaking the tests.
hub CLI This is a command-line application from Git"Hub" which can interact with your GitHub repo. hub is exactly similar to git CLI and a drop-in replacement but has added features to interact with GitHub. Handy to open a Pull Request after the update operation.

📝 Recipe

npm install next-update --save-dev
Install next-update as a dev-dependency.

Configure an npm script dep:update in your package.json scripts section

// package.json
{
  "name": "a-sample-node-project",
  "version": "0.0.1",
  "description": "A sample node project",
  "scripts": {
    "test": "jest",
    "start": "node app.js",
    "dep:update": "next-update" // Configure an npm script
  },
  "devDependencies": {
    "next-update": "^3.6.0"
  },
  "dependencies": {
  },
}

npm run dep:update
Run the script. next-update will go ahead and find all new packages. Updates them in sequence and keep the update if your tests pass.

Download and install the hub cli

# download-hub.sh
HUB_CLI=/opt/hub-linux/bin/hub

if [[ ! -f $HUB_CLI ]]; then
   wget https://github.com/github/hub/releases/download/v2.12.2/hub-linux-amd64-2.12.2.tgz 
   tar zxvf hub-linux-amd64-2.12.2.tgz 
   rm -rf hub-linux-amd64-2.12.2.tgz /opt/hub-linux
   mv hub-linux-amd64-2.12.2 /opt/hub-linux
fi

Configure hub

git config --global --replace-all hub.host github.yourdomain.com
git config --global --replace-all hub.protocol git

Instruct the 🤖 bot to open a Pull Request

$HUB_CLI add package.json package-lock.json
$HUB_CLI commit -m "🤖 [BOT] Automated dependency update"
$HUB_CLI pull-request \
    --push \
    -m "Pull Request Subject" \
    -m "Pull Request Description" \
    --no-edit \
    --reviewer user-id1,user-id2

Hook up this script in your CI/CD environment to run daily

Wrapping up

We saw how to check and update the node dependencies and automate the process of opening a PR. If your project is open-source, you may use a service like Greenkeeper.

Cheers

Please find my previous writings on Medium: