Tag: learning

Categories
Blog Learning Learning

Preparing for a frontend or full-stack position interview involves evaluating both technical skills and cultural fit.

Lets dive in & Get Started!

Here’s a structured approach for conducting the interview:

Preparation Steps

  1. Review the Candidate’s Resume:
    • Note their technical skills, past projects, and experience.
    • Identify areas where you need more information or clarification.
  2. Set Up the Interview Environment:
    • Ensure you have a quiet, distraction-free environment.
    • Prepare any necessary tools or platforms if you plan to include a coding test.
  3. Prepare Your Questions:
    • Categorize your questions into opening, technical, and closing segments.

Interview Structure

1. Introduction:

  • Start with a brief introduction of yourself and the company.
  • Explain the interview format.

2. Opening Questions:

  • Goal: Break the ice and get an overview of the candidate’s background and interests.
  • Tell me about yourself and your background in software development.
  • Why are you interested in this position and our company?
  • What do you enjoy most about frontend/full-stack development?

3. Technical Questions:

Frontend Questions:

  • HTML/CSS:
    • Can you explain the box model and how you use it?
    • How do you ensure your web applications are responsive?
  • JavaScript:
    • Can you explain how closures work in JavaScript?
    • How do you handle asynchronous programming in JavaScript?
  • Frameworks/Libraries:
    • What is your experience with frameworks like React/Vue/Angular?
    • Can you describe the lifecycle of a React component?
  • Performance:
    • How do you optimize the performance of a web application?

Full-Stack Questions:

  • Backend Knowledge:
    • What backend technologies have you worked with?
    • Can you explain RESTful APIs and how you’ve used them in your projects?
  • Database:
    • What types of databases have you worked with (SQL/NoSQL)?
    • How do you handle database migrations?
  • DevOps:
    • What is your experience with CI/CD pipelines?
    • How do you manage deployment and scaling of applications?
  • Project Experience:
    • Describe a full-stack project you’ve worked on. What challenges did you face, and how did you overcome them?
  • Coding Exercise:
    • Provide a short coding task relevant to the role. For example, ask them to build a small feature or debug a piece of code.

4. Behavioral Questions:

  • Describe a time when you had to work closely with a difficult team member. How did you handle it?
  • How do you prioritize tasks when working on multiple projects?
  • Can you give an example of a project where you had to learn a new technology quickly?

5. Closing Questions:

  • Do you have any questions for us?
  • Is there anything we haven’t covered that you’d like to discuss?
  • What are your career goals, and how does this position align with them?

Post-Interview

  1. Evaluate the Candidate:
    • Review their technical skills, problem-solving abilities, and cultural fit.
    • Compare notes with other interviewers if applicable.
  2. Follow Up:
    • Send a thank-you email, informing them of the next steps.

By following this structure, you’ll be able to assess the candidate comprehensively, ensuring you make an informed decision.

Hope this guide help you or give hint idea on how to take start taking interviews!

Happy Learning!

Categories
Learning Tech

Placeholder input text color not changing HTML, browser chrome, how to fix?

Hello,

Welcome to the post, if you are facing similar issue on your webpage or simple app where you are trying to change the HTML input element placeholder text color according to your design or theme and changes are not applying you followed very basic documentation from MDW web docs placeholder

What is causing this issue is simple, I was facing similar issue with search field and I am using Chrome browser mainly as my default browser, so I haven’t check it was behaving right or not, so I was looking for the answers.

I have tried this solution from stakeoverflow added simple snippet from here but it still not showing reflection of change. so I though, I am writing my CSS code using SCSS, maybe I need to add in some other way or format syntax-ly, so stumbled upon on another stakeoverflow page, added the mixin in my scss code, hope to see the reflection of color change to placeholder text of input field, sorry this time it didn’t worked too,

I was wondering how to get the fix, so in my browser inspect window, i saw one selector [type=search] and some styles applying via _reboot.scss file, I tried to open that file from my application it was there, because I am using bootstrap, so its coming through that from node_modules dynamically maybe.

So in my main.scss, file where I was earlier adding css code for placeholder text “Search Author”) color to white, but it was still in dark grey color not taking effects

SCSS code

after I thought and tried to add the placeholder wrapping [type=search] selector it worked like a charm!

Finally worked, placeholder text color change to search type input field in HTML!!!

I hope you will get to learn from this simple issue and try to explore something own to figure out the issue we face.

Something some simple things are hard to figure out due to some companies work hard building great stuff making simple stuffs complicated to be fix later!

Anyways happy learning! Enjoy.

P.S

Later found simple text placeholder color text was not taking effect, maybe scss is not compiling the placeholder css code as default placeholder target selector, added below code to target text field, select and textarea individually and it started working for different parts of the application where used.

Categories
Learning

Finding the ending number: What is 60% of 25?

Formula: Multiply the percentage by the total value

.60 x 25 = 15

Categories
Javascript Learning Tech

Function getStaticPaths, How to create paths in getStaticProps function If you have no access to create paths in getStaticPaths, NEXTJS

Hello,

Hope this is very interesting question of scenario you might be facing to solve with next js and

  • when you don’t want to use “function getServerSideProps” to pass dynamic (data as) props to the page components
  • when you don’t want too make a extra API calls to generate the paths for products or whatever list of thing you are creating in “function getStaticPaths”

Here is the quick things we need to work out to work this out of box for specially the scenario were are showing product detail view page which is of route like in Nextjs as “page/product/[id].js“

First in function getStaticPaths() we just need to do this and pass fallback as “true” as we our dynamic path is not pre-rendered!

export async function getStaticPaths() {
    // Empty array since paths will be dynamically created in getStaticProps
    return {
        paths: [],
        fallback: true, // Set to true if there are dynamic paths that are not pre-rendered !! 
    };
};

Next, we need to edit our “getStaticProps” function and then voila;


export async function getStaticProps({ params }) {
    const product = await getProduct(params && params.id);
    if (!product) {
        return {
            redirect: {
                destination: '/',
                permanent: false,
            },
        }
    }

    return {
        props: {
            product,
            error: resp.error ? true : false
        }
    };
}

Boom you are done, and just use those props in your page component like



return (<PhotoProvider
        key={'photoprovider-key-' + product?.id}
        speed={() => 600}
        easing={(type) => (type === 2 ? '' : 'cubic-bezier(.25, 1, .30, 1)')}>

/*...other codes*/
</PhotoProvider>

you will find you page up and working, fine!

Hope this simple steps helps to solve our complex situations arises in the development work of software building on planet earth!

I would also like to the above situation, why we can’t just do the same thing simply with getServerSideProps in single function, I am facing the issue to build using next build && next export for android package, as dynamics cannot be rendered as html files due to getServerSideProps sitting in between, and also as per the Next JS docs we can’t do anything what I have found of my learnings.

Happy Learning! Thanks for reading.

Keep coding & Develop Wonderful.

To Follow help out to know: uidevwork

Categories
Javascript Learning Tech

What is forwardRef and how its helps in react?

Hello, lets quickly take a review on React forwardRef, what it in actual,

In React, the forwardRef function is a utility that allows you to pass a ref through a component to one of its children. It’s commonly used when you need to access the underlying DOM node or React component instance of a child component from the parent component.

When you create a component using functional components in React, you can use the useRef hook to create a ref object. This ref object can then be passed as a prop to child components. However, when you pass the ref as a prop to a child component, React does not automatically pass it down to the underlying DOM element or custom component. This is where forwardRef comes into play.

By using forwardRef, you can create a component that accepts a ref and forwards it to one of its children. Here’s an example:

const ChildComp = React.forwardRef((props, ref) => {
  // Use the ref object to access the underlying DOM node or component instance
  return <input ref={ref} />;
});

const ParentComp = () => {
  const inputRef = React.useRef(null);

  const handleClick = () => {
    // Access the input element using the ref
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    <div>
      <ChildComponent ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

In the example above, the ChildComponent uses forwardRef to forward the ref prop to the <input> element. In the ParentComponent, a ref is created using the useRef hook and passed to ChildComponent using the ref prop. This allows the ParentComponent to access the input element and call the focus method when the button is clicked.

By using forwardRef, helps to bridge the gap between functional components and the imperative DOM or component operations that sometimes require direct access to child component element.

Note here we are accessing child’s component dom node not child component here as ref object, i.e can be consider as subtle difference to understand for our mind.

Hope this helps to clear out the basic concept behind using forwardRef in React.

Happy Learning!

Categories
Learning Learning Tech

Laravel getting error: Target class [App\Http\Controllers\GurbaniReadingController::class] does not exist. But file already exists!!

Hello Guys,

Facing this issue and struggling to find the cause?, okay then lets direct jump in to the fix I found or more precisely mistake I found!

In picture you might seeing controller name is different than I have mentioned below; I am changed it to Book, so don’t get confuse.

In my case I was wrapped the loading on controller in web.php route with single quotes!

Line of code causing this error:

Route::get('/book-readings/upload-photos', ['App\Http\Controllers\BookReadingController::class', 'uploadPhotos']);

Very carefully watch in above code code was wrapped in quotes: ‘App\Http\Controllers\BookReadingController::class’,
Controller should be loaded without single quotes;

And second important reason is it, this line should shall fall before the resource route if you have similar to this controller, in my case it was : 

Route::resource('/book-readings', App\Http\Controllers\BookReadingController::class); 
// this line was defined before the above route I wanted to work! (I am not sure why this line causing to stop showing the page :/)

Finally I make these changes so everything started working smoothly & all routes loading fine and up!.

// Upload Audio Files:
Route::get('/book-readings/upload-photos', [App\Http\Controllers\BookReadingController::class, 'showPhotos'])->name('book-readings.upload-photos');
Route::post('/book-readings/upload-photos', [App\Http\Controllers\BookReadingController::class, 'uploadPhotos']);
Route::delete('/book-readings/upload-photos/{id}', [App\Http\Controllers\BookReadingController::class, 'destroyPhoto']);

Route::resource('/book-readings', App\Http\Controllers\BookReadingController::class);

Hope this will give you a hint to point the issue you might come up like this mostly when we are new and learning and developing new things!

Happy Learnings

Categories
Blog Learning

Curios Question: Wanted to know how much rate would cost me running 10W Laser Machine for 14 mins?

Hello

Welcome here, If you also wondering how much it would cost us for running certain electrical appliance at home for our small work or business and you wondering how to make those calculations to find the rate for that mins or hours of machine running assuming just its running in your home nothing else.

If you were looking for similar answer, lets dive how I have tried to find it out myself with help of latest tech programs online!

Lets Dig In!

Here how I frame my question using the data from my latest Electricity Bill (In India, I am using Tata Power the great source of electricity provider to the nation!)

Based on following data 101-300 Units Energy Charge: 5.65 rupee /kwh, RA charges 0.00 rupee /kwh, CSS charges: 0.35 rupee /kwh, Wheeling Charges : 2.21 rupee /kwh, Fixed Demand Charges: 125.00 rupees, ED 16.00%, Tose: 0.2604 rupee /kwh
If I am running a single machine of 10W laser for 14 mins how much my electricity bill would be?

Question I formed to put in the mouth of AI tool 😛

Here is how AI calculated from the above that and calculate out the result for me:

To calculate the electricity bill, we need to convert the power consumption of the machine from Watts to kilowatts and then multiply it by the energy rate per unit.


10 W = 10/1000 kW = 0.01 kW

The time period is 14 minutes, which we need to convert to hours:

14 minutes = 14/60 hours = 0.2333 hours

The total energy consumption can be calculated as:

Energy consumed = Power x Time = 0.01 kW x 0.2333 hours = 0.002333 kWh

Now, we can calculate the energy charges, demand charges, and other charges as follows:

Energy Charges = Energy consumed x Energy rate per unit
= 0.002333 kWh x 5.65 Rs/kWh = 0.0132 Rs

Fixed Demand Charges = Fixed Demand Charges per billing cycle
= 125.00 Rs (for a single machine)

Wheeling Charges = Energy consumed x Wheeling charges per unit
= 0.002333 kWh x 2.21 Rs/kWh = 0.0051 Rs

CSS Charges = Energy consumed x CSS charges per unit
= 0.002333 kWh x 0.35 Rs/kWh = 0.0008 Rs

ED Charges = Energy charges + Wheeling charges + CSS charges
= 0.0132 Rs + 0.0051 Rs + 0.0008 Rs = 0.0191 Rs

Taxes and Other Surcharges = Energy charges + Wheeling charges + CSS charges + ED charges x Tose rate
= 0.0191 Rs x 0.2604 = 0.00498 Rs

Total Electricity Bill = Energy Charges + Fixed Demand Charges + Wheeling Charges + CSS Charges + ED Charges + Taxes and Other Surcharges
= 0.0132 Rs + 125.00 Rs + 0.0051 Rs + 0.0008 Rs + 0.0191 Rs + 0.00498 Rs
= 125.043 Rs (rounded off to two decimal places)

Therefore, if you run a single 10W laser machine for 14 minutes, your electricity bill would be approximately 125.043 Rs.

Then I said Wow so nice and quick, isn’t it?

But then thought & put my attention on the Fixed Demand Charges which 125/-, would it be a for day? then I thought No its for a month, so how it would calculate for a day? it simply as you would also know this to divide in my number of days in a month, right?

So to see if AI response the result back with more in detail with assuming and consuming similar data passed before, here is reframed question I have put (in the mouth of AI tool)

can you do this divide fixed charges by month of days and return everything again?

question for AI tool

This is what it finally answered back;

Sure, to calculate the fixed demand charges per day, we can divide the monthly fixed demand charges by the number of days in the month.

Assuming a 30-day billing cycle, the fixed demand charges per day would be:

Fixed Demand Charges per day = Fixed Demand Charges per month / Number of days in the month
= 125.00 Rs / 30 days
= 4.1667 Rs per day

Now, we can calculate the updated energy charges, wheeling charges, CSS charges, ED charges, and taxes and other surcharges per unit of energy consumed, which would be:

Energy Charges = 5.65 Rs /kWh
Wheeling Charges = 2.21 Rs /kWh
CSS Charges = 0.35 Rs /kWh
ED Charges = Energy charges + Wheeling charges + CSS charges
= 5.65 Rs/kWh + 2.21 Rs/kWh + 0.35 Rs/kWh
= 8.21 Rs/kWh

Taxes and Other Surcharges = ED charges x Tose rate
= 8.21 Rs/kWh x 0.2604
= 2.1384 Rs/kWh

To calculate the total electricity bill for running a 10W laser machine for 14 minutes per day, we can use the same method as before, but now we have updated values for the fixed demand charges, ED charges, and taxes and other surcharges.

Energy consumed per day = Energy consumed per hour x Hours per day
= 0.01 kW x 0.2333 hours/day
= 0.002333 kWh/day

Energy Charges per day = Energy consumed per day x Energy rate per unit
= 0.002333 kWh/day x 5.65 Rs/kWh
= 0.0132 Rs/day

Fixed Demand Charges per day = Fixed Demand Charges per month / Number of days in the month
= 125.00 Rs / 30 days
= 4.1667 Rs/day

Wheeling Charges per day = Energy consumed per day x Wheeling charges per unit
= 0.002333 kWh/day x 2.21 Rs/kWh
= 0.0051 Rs/day

CSS Charges per day = Energy consumed per day x CSS charges per unit
= 0.002333 kWh/day x 0.35 Rs/kWh
= 0.0008 Rs/day

ED Charges per day = Energy charges per day + Wheeling charges per day + CSS charges per day
= 0.0132 Rs/day + 0.0051 Rs/day + 0.0008 Rs/day
= 0.0191 Rs/day

Taxes and Other Surcharges per day = ED charges per day x Tose rate
= 0.0191 Rs/day x 0.2604
= 0.00498 Rs/day

Total Electricity Bill per day = Energy Charges per day + Fixed Demand Charges per day + Wheeling Charges per day + CSS Charges per day + ED Charges per day + Taxes and Other Surcharges per day
= 0.0132 Rs/day + 4.1667 Rs/day + 0.0051 Rs/day + 0.0008 Rs/day + 0.0191 Rs/day + 0.00498 Rs/day
= 4.2098 Rs/day

Therefore, if you run a single 10W laser machine for 14 minutes per day, your electricity bill would be approximately 4.2098 Rs/day

Hurray! Isn’t it fun?

Hope you enjoyed this puzzle solving question answer game when really you want to know the difficult question you have all time in our head, but latest techs help’s out in secs with such quick answers!

Keep exploring keep learning!

Source : Open AI Chat GPT

P.S. Not sure what it calculated it reflect exact what we are looking, I assuming it calculated to be accurate!

Categories
Blog Javascript Learning

Easy steps to create source endpoints with base url’s in react or any spa applications using ES6 tagged templates as a project utility and maintainbilty

Hello,

Here I would like to share with you a very handy and new innovative approach using ES6 Tag Literals template to ease of creating the base URL’s for use a single source of truth defined as library constants or utility code to refer as the single page application grows.

Let’s get hand dirty and mind free from hassle of maintaining and forming lines cluttered code and creating mess in many files as web application grows.

Hope you understand what I mean, developers get frustrated to follow the best practice as in tight project deadlines,

Heads up on I am currently using 2Factor.in endpoints in this post as I were using part of the project implementation, we will head in list out numbers as steps needs to follow for the quick implementation:

  1. We will save API key and API base URL in env file, (hope you are aware were it will lies in your project code, basically it lies at the core level of project director with named and with extension exactly, .env 
SITE_2FACTORIN_API_BASE_URL=https://2factor.in/API/V1/
SITE_2FACTORIN_API_KEY=XXXXXX-dde0-23ec-XXXXXXXXXX

2. As I were using Nextjs, so I need to configure these env variables in next.config.js file to export it to the FE side contants(.js) file:

//next.config.js
module.exports = {
  publicRuntimeConfig: {
    SITE_2FACTORIN_API_BASE_URL: process.env.SITE_2FACTORIN_API_BASE_URL,
    SITE_2FACTORIN_API_KEY: process.env.SITE_2FACTORIN_API_KEY,
  },
};

3. Next we need to import publicRuntimeConfig object in our constants(.js) file 

import { publicRuntimeConfig } from "./env.settings";

I am importing from .env.settings files which is actually using nextjs getConfig method to export publicRuntimeConfig variable, I am skipping that step to show here, once you search for docs on next/config you will get an idea what we are doing here.

4. Main part here it comes in contants.js file:

export const f2param1 = (param) => param || 1234657890;
export const f2param2 = (param) => param || "myTemplateName-OTP";

export function tagTemplate2FactorAPI(strings, param1, param2) {

  const { SITE_2FACTORIN_API_BASE_URL, SITE_2FACTORIN_API_KEY } = publicRuntimeConfig;
  const prefixBaseUrl = SITE_2FACTORIN_API_BASE_URL + SITE_2FACTORIN_API_KEY + '/';

  let str0 = strings[0] || ""; // "That "
  let str1 = strings[1] || ""; // " is a "
  let str2 = strings[2] || ""; // "."

  // We can even return a string built using a template literal
  return `${prefixBaseUrl}${str0}${param1 || ''}${str1}${param2 || ''}${str2}`;
}

export const factor2API_Endpoint = {
  CHECK_OTP_SMS_BALANCE: `BAL/SMS`,
  SEND_OTP_SMS: tagTemplate2FactorAPI`SMS/${f2param1()}/AUTOGEN`,
  SEND_OTP_SMS_TEMPLATE: tagTemplate2FactorAPI`SMS/${f2param1()}/AUTOGEN/${f2param2()}`,
  SEND_VERIFY_SMS: tagTemplate2FactorAPI`SMS/VERIFY/${f2param1()}/${f2param2()}`,
  CHECK_TRANS_SMS_BALANCE: `/ADDON_SERVICES/BAL/TRANSACTIONAL_SMS`,
  SEND_TRANS_SMS: `/ADDON_SERVICES/SEND/TSMS`,
  SEND_TRANS_SMS_DYNAMIC_TEMPLATE: `/ADDON_SERVICES/SEND/TSMS`,
};

console.log(factor2API_Endpoint.SEND_OTP_SMS);
console.log(factor2API_Endpoint.SEND_OTP_SMS_TEMPLATE);
console.log(factor2API_Endpoint.SEND_VERIFY_SMS);

This is how the final code looks, but there is a catch in this code, just need to handle of passing the params dynamically to the constants property of the object, otherwise with the fixed 2 params in same file would do the trick.

Will share once I got the way of passing dynamic params values to object property in template literal invocation line.

—— Here I found it the other approach —- Edited: 00:44 (after few mins of publishing this post after above approach shared 🙂 )

export function tagTemplate2FactorAPI(strings, ...keys) {

  const { SITE_2FACTORIN_API_BASE_URL, SITE_2FACTORIN_API_KEY } = publicRuntimeConfig;
  const prefixBaseUrl = SITE_2FACTORIN_API_BASE_URL + SITE_2FACTORIN_API_KEY + '/';

  return (function (...values) {
    let dict = values[values.length - 1] || {};
    let result = [strings[0]];
    keys.forEach(function (key, i) {
      let value = Number.isInteger(key) ? values[key] : dict[key];
      result.push(value, strings[i + 1]);
    });

    result.unshift(prefixBaseUrl); //added this line to prefix with base url path
    return result.join('');
  });
}

export const factor2API_Endpoint = {
  CHECK_OTP_SMS_BALANCE: `BAL/SMS`,
  SEND_OTP_SMS: tagTemplate2FactorAPI`SMS/${0}/AUTOGEN`,
  SEND_OTP_SMS_TEMPLATE: tagTemplate2FactorAPI`SMS/${0}/AUTOGEN/${1}`,
  SEND_VERIFY_SMS: tagTemplate2FactorAPI`SMS/VERIFY/${0}/${1}`,
  CHECK_TRANS_SMS_BALANCE: `/ADDON_SERVICES/BAL/TRANSACTIONAL_SMS`,
  SEND_TRANS_SMS: `/ADDON_SERVICES/SEND/TSMS`,
  SEND_TRANS_SMS_DYNAMIC_TEMPLATE: `/ADDON_SERVICES/SEND/TSMS`,
};

 console.log(factor2API_Endpoint.SEND_OTP_SMS(12311312, 'newTemplate-newOTP'));
 console.log(factor2API_Endpoint.SEND_OTP_SMS_TEMPLATE(5656565, 'newTemplate-newOTP'));
 console.log(factor2API_Endpoint.SEND_VERIFY_SMS(456646545, 'newTemplate-newOTP'));

Output log of the above code:

Solution, I found right after reading the basic guide on Tagged template on Mozilla documentation on Tagged Templates

Thanks for reading.

Happy Learning.