Skip to main content

How to fix, external dvd drive not working on windows 10

· 2 min read
D Balaji
Lead Design Technologist

Though you may argue that the end of the DVD era has already begun, I had run into scenarios where CD/DVD is still a suitable storage device given the read-only nature of the device. The data once written cannot be tampered with or overwritten, though one can scratch a lot and make it worthless.

With this task in hand, I dusted my old LG DVD drive which is ideally built to be assembled inside CPUs but we geeks push their limits. So I replaced the SMPS power supply with an adapter and the SATA cable with a USB portable SATA connector.

Given the two mods, the LG dvd writer can work with any laptop or desktop without an issue. However, on windows 10, the CD/DVD drive icon would not show up on my computer. But what could have gone wrong?

Steps to troubleshoot

We geeks don't believe in talent but we believe in the process. The process to troubleshoot the strange behavior is as follows

  1. Observe if the LG/DVD writer powers on. If yes, press the button to eject the tray. This step worked

  2. The second step was to look at my computer to see if any new icon has shown up, but nothing showed up. So fire up the device manager and look for dvd devices

  3. Right-click on the USB DVD drive and uninstall the driver. Then reinstall the driver. Even after this step, the icon would not show up.

  4. Right-click and goto properties and goto volumes. Click on the populate button. A new name should have been created for this device and the corresponding icon would show up on my computer.

  5. Once the icon is available, double-clicking should eject the tray. It works as expected.

Conclusion

Thanks to the LG website for clarifying that no special drivers are required for the DVD RW device since they are plug-and-play only. That means they would work on any Operating system ideally. Later I found windows 10 just put in an extra step that prevented me from using the drive or rather thinking it was dead.

Pinch of common sense, curiousity and passion can open the doors for you in tech.

Why & how to mock date methods in JEST unit tests

· 2 min read
D Balaji
Lead Design Technologist

What are the Date methods?

I have worked with a bunch of web apps and all of them have date-related code in common. The Date utils are written in plain Javascript using the Date constructor.

var date = new Date()

// Sample date methods
date.getMonth()
date.getFullYear()
date.getDate()

I have also worked on issues where the test suite would pass correctly on the day the tests were authored but they would fail on the other day or in the server. This is because the dates are getting dynamically generated in the test but the matcher value is static.

Why is testing Dates tricky?

You cannot assert a dynamically generated date. For instance, if your date until returns a new date by applying some logic. You cannot put a test that looks like this.

// WRONG code, don't use without mocking date.getDate

expect(add2DaysToCurrentDate()).toBe("Some hard coded date")

If you want to use a hardcoded date, you should be able to control the output of the add2DaysToCurrentDate method.

How to make dynamic date logic predictable?

The short answer is JEST mocks. Whenever we want to add 2 days to the current date, we need to ensure the date.getDate() method returns the same value, then we can write a test to assert the returned value.

it("should return new Date which is two days ahead of today", function() {
jest.spyOn(Date, "getDate").mockImplementation(() => 14) // Mocks the getDate method until this test block
expect(add2DaysToCurrentDate()).toBe("Some hard coded date")
})

Downsides to this approach

As I mentioned in the comment, till the end of the test block, we cannot use date.getDate() as if it's a real function. The mock will replace the actual function call in the test block. This might hinder your assertion logic. We need to plan accordingly.

References

https://stackoverflow.com/questions/29719631/how-do-i-set-a-mock-date-in-jest

Turborepo npm workspaces vite react module resolution error resolved

· 3 min read
D Balaji
Lead Design Technologist

From the title it sounds like a lot of cool technologies working side by side isn't it. Let me list them once again

  • Turborepo - managing monorepo
  • NPM - package manager
  • NPM workspaces - also provided by npm, assists in monorepo
  • vite - frontend tooling, rollup wrapper
  • vite react - template for vite

Use case scenario

I have a cool monorepo on github which holds all my sample projects, experimental works and code sample which I play around with.

The monorepo is build with npm workspaces & turborepo. I must admit that I hardly use any turbo repo features yet. Its mostly npm workspaces and npm commands at scale.

I encountered vite for frontend tooling and wanted to give it a try. Without a second thought, I created a directory called tooling and started working with vite.

Glitches and resolutions

  1. The first glitch was the node version requirement of vite. I opened a new terminal and used nvm to set the node version to latest. Thats expected bug while working with latest nodeJS tools.

  2. The vite module was installed locally within the workspace. However the same vite module was referenced in vite.config.js. npm would try to resolve vite by checking in the global node_modules but it would not be there.

To understand why npm installed vite locally instead of global node_modules was easy. vite was used in npm scripts and if vite were to be installed globally then the npm scripts would fail mercilessly.

"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},

But the same module being used in JS modules was not expected by npm, so we need to instruct npm to install vite in both local and global node_modules.

Resolution

At this step I found 2 ways to solve the problem.

  1. The first way is something hinted by turborepo scaffold itself. I had to add vite as dev dependency at the root of the monorepo. This would ensure that vite is installed into the global node_modules.

  2. The second way is to use an alias for vite within the workspace. You can do this with the below command

npm i my-vite@npm:vite -P

This command would ensure that the package vite is alias as my-vite. While checking the global node_modules folder, I noticed a folder with the name my-vite.

The flipside is that, I need to reference the vite package as my-vite within the code.

import { defineConfig } from "my-vite";

Installing Ubuntu Desktop explained in 10 steps

· 2 min read
D Balaji
Lead Design Technologist

Ubuntu desktop download

Installing Ubuntu Desktop is a job with no frills but you do not install Ubuntu quite often so it's natural to forget a few things so here are the 10 steps which I followed while installing Ubuntu desktop in 2022.

  1. Download Ubuntu Desktop and Burn it to a USB through a tool called Ryfus

  2. Google for the key combination which would invoke laptop boot from USB. This would save time.

  3. Choose between options available for installing Ubuntu. This step is irreversible so be cautious. I choose to have dual boot with windows OS. Skip wifi setup while installing OS. I find this step to slow down the installation of OS.

  4. Choose a username and password. Make sure you do not forget it. Sometimes in a dual boot setup, you may not use the OS for months.

  5. Once the installation is complete, set up wifi. Once connected, run sudo apt update.

  6. Install VS Code, node, and a postman from the Snap store

  7. Install git from apt package manager

  8. Set up SSH for GitHub and set config email, user name, etc.

  9. Install extra packages to handle .rar and other file formats

  10. Install Synaptic package manager and remove unwanted bloatware games.

5 tips to Organize meetings at scale with MS teams at your organization

· 7 min read
D Balaji
Lead Design Technologist

dhbalaji teams window

As a lead engineer on the enterprise design language team, I am responsible for evangelizing the work that we do as part of React components and EDL. We have strategic touch points through which we keep in touch with the developers who consume our library. They are

  1. Newsletters through email
  2. Broadcast on monitors across the office or even the display on the coffee machine
  3. MS teams meetings
    1. Training sessions through MS teams meetings
    2. Internal talks for niche audiences again through MS teams meetings
    3. Open office hours for actual developers through MS teams meetings
    4. Highlighting the EDL and its significance to the managers and above through MS teams meetings
    5. Syncing up the designers about the component variants and their usage
    6. Consulting with product teams when they need professional support

At least 60% of our activities outside of the code editor rely on the MS teams. To be successful at MS teams meetings, here are a few tips which I have learned from experience.

Here are the tips

  1. Schedule the meeting at an accessible & convenient time.
  2. Give presenter access to a select few on MS teams, the rest are the audience.
  3. Use the apps & tools in MS teams to boost interactivity and empower the introverted audience.
  4. Use a raised hand to unmute the audience to avoid distractions during meetings.
  5. Have a meeting plan in detail. This includes
    1. Pre-meeting plan
    2. Actual meeting plan
    3. Post-meeting follow-up plan

Tip #1: Schedule the meeting at an accessible & convenient time.

If you are leading with power, then you need not worry about the timing of the meeting. A Friday evening call would work fine but as a lead engineer on a little-known team, your options are limited. Here are things that I look for before scheduling a meeting across the org.

  1. Find out the other events falling on the same day at the organization level and avoid overlapping times or avoid the day. It could be
    1. Town halls for verticals
    2. HR events
    3. Employee engagements
    4. Standup meetings
    5. Coffee time and lunch breaks
  2. Find out if there is a holiday either on the before day or on the next day. People would be in a hurry to get work done from the previous day or leave for the holiday the following day.
  3. Find out if the presenters or organizing committee members are available for the day.

Once the hurdles are identified and inventory is prepared. We have to intimate the team which sends mass emails to the audience.

Tip #2: Give presenter access to a select few and the rest are audience on MS teams.

I have been in multiple meetings where the audience join the meeting with their mic and camera turned on. What a condescending distraction that could be. The cure to this problem is to know your controls on MS teams. I am sure, not everyone in the larger crowd shall be presenters or even willing to do so. Here is what we need to do

  1. While you schedule meetings, go to meeting options and preselect the presenters to organizers. The rest of them are audience by default.
  2. For the audience, the default settings are microphone muted, and camera disabled.

This would reduce the risk of someone joining with the camera or mic on.

Tip #3: Use the apps & tools in MS teams

There are a plethora of apps on MS teams but my favorite is the polls app. You have a bunch of options within polls that would enable you to conduct

  1. polls
  2. anonymous polls
  3. quiz
  4. word cloud

My next favorite is not an app but a setting on meeting options. Checking Q&A would enable you to show the question and answers tab. You can allow the audience to ask questions

  1. Ask questions anonymously
  2. Ask questions
  3. Ask questions but allow questions that go through moderation.

Moderation is a tricky tool. If there is a moderation delay, then the audience asking questions could be disappointed. You can allow/disallow the audience to react to the question. That would act like feedback to the questions.

Tip #4: Use the raise hand feature to interact with the audience

If more than one person is talking on the microphone at the same time. It could be a race-around condition and such things are to be avoided in a professional meeting. It's better to ask the audience to raise hands through teams and then we can ask a moderator to allow their microphone.

If a person is spamming with raised hands, we can put their hand down as well. Here is the workflow.

  1. Allow the audience to enter the meeting as attendees
  2. If an attendee wants to ask a question to the presenter, ask them to raise their hand on the teams
  3. Once a raised hand is spotted, the moderator can unmute their microphone for interaction
  4. If an attendee wants to present/share their screen, we can ask the moderator to promote them as presenters.
  5. Once the attendee has finished his interaction, the moderator needs to do some cleanup activity like disabling the microphone or revoking his presenter access.

Tip #5: Have a meeting plan

Failing to plan is planning to fail

Use your brain to avoid the pain

A bad plan is better than no plan

What wonderful quotes they are, I adore them. I wish I could write them on the office wall. But here is the summary of a bad plan. The meeting starts late and attendees are left in silence for a decent amount of time. When they are about to drop out, they are given some content with no key takeaways or context. The worst part is a bad meeting running late even after the end time.

But here is what you can do to avoid the shame of a bad meeting. Have a

  1. Pre-meeting plan
  2. meeting plan
  3. Post-meeting plan

Pre-meeting plan

The key parts of the pre-meeting plan are

  1. Identify the right date and time for the meeting
  2. Identify the topics of discussion
  3. Identify presenters and moderators
  4. Prepare an introduction for the panel or guests
  5. Plan for contingencies like power cuts or bad networks

Meeting plan

  1. Identify sections of the meeting along with the time
  2. Have games to play with the attendees to break the monotony
  3. Have preset questions to discuss in the Q&A part
  4. Prepare a closing speech
  5. Share notes and key takeaways

Post meeting plan

  1. Send the attendees detailed minutes of the meeting
  2. Send the attendees the solutions to unanswered questions after your research
  3. Ensure the attendees remember your brand/product
  4. Ask the attendees to join the appropriate team's channel
  5. Ask them for feedback and reward them

Summary

Running successful meetings can be hard. It's even harder when your audience never expected or does not have a pain that you can solve. My mantra is

Keep your attendee expectations low but keep your content quality high

Take away for you

  1. If you do a good job, there is a possibility of a repeat audience attending future meetings.
  2. MS team is a tool, as a meeting organizer, you are expected to know the tool in detail.
  3. Have a co-organizer moderate the meeting or contingency.
  4. Use the right mix of apps, content, and features to bring in interactivity.
  5. More than the tool/MS teams it's your energy, passion, and content that matters the most.

Docusaurus - in <p/> * 3

· One min read
D Balaji
Lead Design Technologist

What is Docusaurus

A react based static site generator which is modern and developed at facebook. Has rss generator, dark theme, navbar and other important parts of a website built in. Ideal for documentation websites and blogs. Has no support for backend integration.

Most useful parts

Docusaurus has 3 important parts

  • documents - useful to show online handbooks
  • blog - chronological sequence of articles
  • pages - standalone parts of the website

The hard parts

  • Too many options for authoring content. md, mdx & react.
  • preset classic has lot of bundled plugins, afraid of stepping out of classic preset.
  • swizzle themes to modify react components of the website.

How to prevent focus scroll in react ref?

· One min read
D Balaji
Lead Design Technologist

Some alt text

Have to tried to set focus on an element in react? I have done it multiple times for accessibility reasons. I have uncovered an edge case in setting focus and the page would scroll to the element where the focus was set.

Notes about techniques from Thoughtworks Tech Radar 26

· 3 min read
D Balaji
Lead Design Technologist

techniques

Thoughtworks tech radar is a reputed tech journal available free of cost for subscribers. The content is related to 4 broad categories related to software development. The candidates/techniques are further categorized for easy judgment and use. Here are my notes from episode #26 of tech radar.