Forem: Nazmuz Shakib Pranto

Automate Adding Publix Coupons

Nazmuz Shakib Pranto — Sat, 01 Feb 2025 06:03:10 +0000

Background (feel free to skip)

Ok, let me cut to the chase... I am a software engineer by profession, so I like to use my skills to automate as many of the repeatable tasks as I can to make my life a little easier. I did this very exact thing for auto-adding CVS coupons before as shown in this post: Automate Adding CVS Coupons.

This post is the same as the CVS one, but for Publix users, so for those who use Publix couping frequently, hope this helps a little bit.

With this guide, you will no longer have to manually click on each “Clip coupon” button, rather you will just need to run a script which you can find at the bottom of this post and it will auto-add all the clippable coupons for you.

Anyways, let's get started.

Step 1

Open Google Chrome browser, go over to https://www.publix.com/

Step 2

Log into your Publix account

Step 3

Once logged in, click on the "Savings" dropdown and choose the "Digital coupons" link from the navigation menu up top

Step 4

Now, you should be able to see all of your digital coupons within Publix. There are a lot of coupons here and having to add each one of these manually would be a pain for sure. THIS is the part we want to automate!

Step 5

Ok, now, right click anywhere on the page and click on "Inspect" from the menu

Step 6

This will open up a whole new section on the right side or the bottom of the page. Either is fine.

Step 7

Inside the sidebar, click on "Console" from the top menu

Step 8

Now, here comes the MAIN part: copy over this piece of code and paste it right after the > sign

(async () => {
  console.log("🚀 Starting coupon clipping automation...");

  const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

  const clickLoadMoreBtn = () => {
    const button = document.querySelector('[data-qa-automation="button-Load more"]');
    if (button) {
      console.log("🔄 Clicking 'Load More' button...");
      button.dispatchEvent(new Event('mousedown'));
      button.dispatchEvent(new Event('mouseup'));
      button.dispatchEvent(new Event('click'));
    }
  };

  const findAllClippableCoupons = () => {
    return document.querySelectorAll('[data-qa-automation="button-Clip coupon"]');
  };

  while (true) {
    const clippableCoupons = findAllClippableCoupons();
    const totalCoupons = clippableCoupons.length;

    if (totalCoupons === 0) {
      console.log("✅ No more coupons left to clip 🥳");
      break;
    }

    console.log(`🛍️ Total coupons to clip: ${totalCoupons}`);

    for (const [index, coupon] of clippableCoupons.entries()) {
      console.log(`🎯 Clipping coupon ${index + 1} of ${totalCoupons}...`);
      coupon.scrollIntoView({ behavior: 'smooth', block: 'center' });
      await wait(100);
      coupon.click();
      const couponsLeft = totalCoupons - (index + 1);
      await wait(75);
    }

    console.log("📜 Hold up! Checking for more coupons...");
    window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
    await wait(2000); 
    const loadMoreBtn = document.querySelector('[data-qa-automation="button-Load more"]');
    if (loadMoreBtn !== null) {
      console.log("🔄 More coupons detected! Loading more ...");
      clickLoadMoreBtn();
      await wait(3000);
    } else {
      console.log("🎉 All coupons have been clipped! Enjoy your savings! 🎉");
      break;
    }
  }
})();

Step 9

Then, press ENTER to run the script and watch some magic happen in the background. Notice all the coupons being automatically clicked and added for you.

After all coupons have been added, you should see this message at the end...

Step 12

That's it, now all the coupons should be added to your account. Note, if at any time, you make any mistakes along the way while following these steps, just refresh the page and rerun the script above.

Let me know if you found this helpful. Hope I was able to save at least a little bit of your time through this automation script... until next time 👋

BFE.dev | 176. undefined to null

Nazmuz Shakib Pranto — Wed, 22 May 2024 03:08:21 +0000

Welcome to BFE.dev Challenges!

In this short article, I review my solution for BFE - #176 undefined to null challenge. Read on to see implementation details and my thought process for solving this coding challenge using JavaScript.

Mode: Easy

Problem

One of the differences between null and undefined is how they are treated differently in JSON.stringify().

JSON.stringify({a: null})      // '{"a":null}'
JSON.stringify({a: undefined}) // '{}'
JSON.stringify([null])         // '[null]'
JSON.stringify([undefined])    // '[null]'

This difference might create trouble if there are missing alignments between client and server. It might be helpful to enforce using only one of them.

You are asked to implement undefinedToNull() to return a copy that has all undefined replaced with null

Example(s):

undefinedToNull({a: undefined, b: 'BFE.dev'})
// {a: null, b: 'BFE.dev'}
undefinedToNull({a: ['BFE.dev', undefined, 'bigfrontend.dev']})
// {a: ['BFE.dev', null, 'bigfrontend.dev']}

Step-By-Step Process for Tackling a Coding Challenge:

Read the problem multiple times until you clearly understand all the requirements
Ask clarification questions to clarify potential confusion or knowledge gaps
Identify all the inputs and outputs of the problem
Ask to clarify any constraints of the problem, i.e., maximum input size, time complexity limits, or edge cases
Write down at least 2 to 3 examples with input and output for testing later
Break down the problem:
- Outline each step at a basic level without diving into code yet.
- Focus on a brute-force solution first, even if you know an optimized approach.
- Write pseudocode for each step to visualize the logic.
- Convert each pseudocode step into actual code.
- Skip complex implementations initially and revisit them later.
- Once all steps are implemented, seek confirmation before proceeding.
Ask for permission to test out your implementation on a console
Use the examples you wrote down earlier to test your code.
If the actual result isn't the expected result, try to debug the problem by adding logs or using a debugger (if available)
Discuss the time complexity and space complexity of the solution
Think of ways to optimize your implementation to improve time and space complexity and to increase readability (if possible)
Refactor your code for optimization and test again to ensure the results are still correct.
Explain each step out loud to demonstrate your understanding and thought process.

Solution

/**
 * @param {any} arg
 * @returns any
 */
function undefinedToNull(arg) {
  if (typeof arg === 'undefined') return null;

  if (Array.isArray(arg)) return arg.map(each => undefinedToNull(each));

  if (typeof arg === 'object' && arg !== null) {
    return Object
      .entries(arg)
      .reduce((obj, [key, value]) => {
        obj[key] = undefinedToNull(value);
        return obj;
      }, {});
  }

  return arg;
}

Key Takeaway(s):

Use typeof to get the type of a variable in JavaScript. This is particularly useful in this example in identifying if an argument is undefined or an object.
Don't forget to account for nested values. When dealing with arrays or objects, recursion can automatically apply the same logic to deeply nested structures.
I used recursion to solve this problem, but you can also use for or while loops, so choose the approach that you find easier to understand.

As always, I welcome any feedback on the implementation details of this coding challenge. Otherwise, hope folks found this helpful!

CSSBattle | #32 Band-aid

Nazmuz Shakib Pranto — Mon, 20 May 2024 13:57:03 +0000

Welcome to CSSBattle Challenges!

In this short article, I review my solution for CSSBattle - #32 Band-aid challenge. Please refer to the code snippet below for better insight into my thought processes and the implementation details.

Challenge:

Solution:

<div class="container">
  <div class="layer-1"></div>
  <div class="layer-2"></div>
  <div class="layer-square"></div>
</div>

<style>
  body, * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  .container {
    width: 100vw;
    height: 100vh;
    position: relative;
  }
  .layer-1 {
    width: 50px;
    height: 200px;
    background: #F3AC3C;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .layer-2 {
    width: 200px;
    height: 50px;
    background: #A3A368;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .layer-square {
    width: 50px;
    height: 50px;
    background: #FBE18C;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg)
  }
</style>

Key Takeaway(s):

use multiple transform attributes as translate and rotate to shift and rotate elements

As always, I welcome any feedback or questions regarding the implementation details of the challenge. Otherwise, I hope this was useful!

CSSBattle | #31 Equals

Nazmuz Shakib Pranto — Sun, 16 Oct 2022 16:24:10 +0000

Welcome to CSSBattle Challenges!

In this short article, I go through my solution for CSSBattle - #31 Equals challenge. Please refer to the code snippet below to get a better insight into my thought processes and the implementation detail.

Challenge:

Solution:

<div class="container">
  <div class="semi-circle left"></div>
  <div class="semi-circle right"></div>
</div>
<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  .container {
    width: 100vw;
    height: 100vh;
    background: #aa445f;
  }
  .semi-circle {
    width: 200px;
    height: 100px;
    border-top-right-radius: 100px;
    border-top-left-radius: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
  }
  .right {
    background: #e38f66;
    transform: translate(calc(-50% + 75px), -50%) rotate(90deg);
  }
  .left {
    background: #f7ec7d;
    transform: translate(calc(-50% - 75px), -50%) rotate(-90deg);
  }
</style>

Key Takeaway(s):

create semi-circles with height half the size of the width along with border radius properties

use multiple transform properties to shift or rotate an element in multiple ways

As always, I welcome any feedback or questions regarding the implementation detail of the challenge. Otherwise, I hope this was useful!

CSSBattle | #30 Horizon

Nazmuz Shakib Pranto — Sun, 31 Jul 2022 04:50:00 +0000

Welcome to CSSBattle Challenges!

In this short article, I go through my solution for CSSBattle - #30 Horizon challenge. Please refer to the code snippet below to get a better insight into my thought processes and the implementation detail.

Challenge:

Solution:



<div class="container">
  <div class="layer one"></div>
  <div class="layer two"></div>
  <div class="layer three"></div>
  <div class="layer four"></div>
</div>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .container {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-rows: repeat(1fr, 6);
  }
  .layer {
    width: 100%;
  }
  .one {
    background: #F7EC7D;
  }
  .two {
    background: #E38F66;
  }
  .three {
    background: #AA445F;
  }
  .four {
    background: #62306D;
  }
  .one, .two {
    grid-row: span 1;
  }
  .three, .four {
    grid-row: span 2;
  }
</style>

Key Takeaway(s):

using display grid to align children elements vertically

using span property within display grid for children elements to take up spaces evenly

As always, I welcome any feedback or questions regarding the implementation detail of the challenge. Otherwise, I hope this was useful!

CSSBattle | #29 Suffocate

Nazmuz Shakib Pranto — Fri, 29 Jul 2022 01:11:33 +0000

Welcome to CSSBattle Challenges!

In this short article, I go through my solution for CSSBattle - #29 Suffocate challenge. Please refer to the code snippet below to get a better insight into my thought processes and the implementation detail.

Challenge:

Solution:

<div class="container">
  <div class="transparent-square">
    <div class="circle top-left"></div>
    <div class="circle top-right"></div>
    <div class="circle bottom-left"></div>
    <div class="circle bottom-right"></div>
  </div>
</div>
<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  .circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
  }
  .container {
    background: #f3ac3c;
    width: 100vw;
    height: 100vh;
    position: relative;
  }
  .transparent-square {
    width: 200px;
    height: 200px;
    background: #1a4341;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
  }
  .top-left,
  .top-right,
  .bottom-left,
  .bottom-right {
    background: #f3ac3c;
    position: absolute;
  }
  .top-left {
    transform: translate(-50%, -50%);
  }
  .top-right {
    transform: translate(50%, -50%);
  }
  .bottom-left {
    transform: translate(-50%, 50%);
  }
  .bottom-right {
    transform: translate(50%, 50%);
  }
</style>

Key Takeaway(s):

using different shapes around an element to shape the center element, for example, we surrounded 4 circles around the diamond square to create its shape

As always, I welcome any feedback or questions regarding the implementation detail of the challenge. Otherwise, I hope this was useful!

CSSBattle | #28 Cups & Balls

Nazmuz Shakib Pranto — Sun, 17 Jul 2022 15:37:19 +0000

Welcome to CSSBattle Challenges!

In this short article, I go through my solution for CSSBattle - #28 Cups & Balls challenge. Please refer to the code snippet below to get a better insight into my thought processes and the implementation detail.

Challenge:

Solution:

<div class="container">
  <div class="box">
    <div class="ball bg-lemon-ginger"></div>
    <div class="cup bg-yellow-orange"></div>
    <div class="cup bg-lemon-ginger"></div>
    <div class="ball bg-yellow-orange"></div>
    <div class="cup bg-yellow-orange upside-down"></div>
    <div class="ball bg-lemon-ginger "></div>
    <div class="ball bg-yellow-orange"></div>
    <div class="cup bg-lemon-ginger upside-down"></div>
  </div>
</div>

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .container {
    background: #1A4341;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .bg-yellow-orange {
    background: #F3AC3C;
  }
  .bg-lemon-ginger {
    background: #998235;
  }
  .upside-down {
    transform: rotate(180deg);
  }
  .box {
    width: calc(50px + 50px + 50px + 50px + 60px);
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
  .ball {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .cup {
    width: 50px;
    height: 50px;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
  }
</style>

Key Takeaway(s):

using display: flex to align items both vertically and horizontally

using gap property to create equal spacing between flex children elements

As always, I welcome any feedback or questions regarding the implementation detail of the challenge. Otherwise, I hope this was useful!

CSSBattle | #27 Lock Up

Nazmuz Shakib Pranto — Sun, 17 Jul 2022 15:33:09 +0000

Welcome to CSSBattle Challenges!

In this short article, I go through my solution for CSSBattle - #27 Lock Up challenge. Please refer to the code snippet below to get a better insight into my thought processes and the implementation detail.

Challenge:

Solution:

<div class="container">
  <div class="red-circle"></div>
  <div class="yellow-circle-borders"></div>
</div>

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .container {
    background: #E38F66;
    width: 100vw;
    height: 100vh;
    position: relative;
  }
  .red-circle {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #AA445F;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .yellow-circle-borders {
    border: 30px solid #F7EC7D;
    width: 140px;
    height: 140px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    border-radius: 50%;
    border-left-color: transparent;
    border-right-color: transparent;
  }
</style>

Key Takeaway(s):

using transparent border colors to hide the entirety of an element's shape

As always, I welcome any feedback or questions regarding the implementation detail of the challenge. Otherwise, I hope this was useful!

CSSBattle | #26 Smiley

Nazmuz Shakib Pranto — Sat, 16 Jul 2022 01:53:45 +0000

Welcome to CSSBattle Challenges!

In this short article, I go through my solution for CSSBattle - #26 Smiley challenge. Please refer to the code snippet below to get a better insight into my thought processes and the implementation detail.

Challenge:

Solution:

<div class="container">
  <div class="arc left"></div>
  <div class="arc mid"></div>
  <div class="arc right"></div>
</div>

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .container {
    background: #6592CF;
    width: 100vw;
    height: 100vh;
    position: relative;
  }
  .arc {
    position: absolute;
    width: 120px;
    height: 60px;
    border: 20px solid #060F55;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border-bottom: 0;
    top: 50%;
    left: 50%;
  }
  .left {
    transform: translate(calc(-50% - 100px), calc(-50% - 80px));
  }
  .right {
    transform: translate(calc(-50% + 100px), calc(-50% - 80px));
  }
  .mid {
    transform: translate(-50%, calc(-50% + 80px)) rotate(-180deg);
  }
</style>

Key Takeaway(s):

using arc-like shapes with border properties and transparent background

As always, I welcome any feedback or questions regarding the implementation detail of the challenge. Otherwise, I hope this was useful!

CSSBattle | #25 Blossom

Nazmuz Shakib Pranto — Tue, 12 Jul 2022 14:06:32 +0000

Welcome to CSSBattle Challenges!

In this short article, I go through my solution for CSSBattle - #25 Blossom challenge. Please refer to the code snippet below to get a better insight into my thought processes and the implementation detail.

Challenge:

Solution:

<div class="container">
  <div class="lg-blossom left"></div>
  <div class="lg-blossom right"></div>
  <div class="sm-blossom left"></div>
  <div class="sm-blossom right"></div>
</div>

<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  .container {
    background: #998235;
    width: 100vw;
    height: 100vh;
    position: relative;
  }
  .lg-blossom {
    position: absolute;
    background: #1a4341;
    width: 100px;
    height: 80px;
    left: 50%;
    top: 50%;
  }
  .lg-blossom.left {
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    transform: translate(calc(-50% - 50px), calc(-50% - 40px)) rotate(270deg);
  }
  .lg-blossom.right {
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;
    transform: translate(calc(-50% + 50px), calc(-50% + 40px)) rotate(270deg);
  }
  .sm-blossom {
    position: absolute;
    background: #f3ac3c;
    width: 80px;
    height: 60px;
    left: 50%;
    top: 50%;
  }
  .sm-blossom.left {
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;
    transform: translate(calc(-50% - 50px), calc(-50% + 60px));
  }
  .sm-blossom.right {
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    transform: translate(calc(-50% + 50px), calc(-50% - 60px));
  }
</style>

Key Takeaway(s):

using border-radius property to create blossom like shape

using both translate and rotate properties to control direction and placement of elements

As always, I welcome any feedback or questions regarding the implementation detail of the challenge. Otherwise, I hope this was useful!

CSSBattle | #24 Switches

Nazmuz Shakib Pranto — Tue, 12 Jul 2022 14:04:35 +0000

Welcome to CSSBattle Challenges!

In this short article, I go through my solution for CSSBattle - #24 Switches challenge. Please refer to the code snippet below to get a better insight into my thought processes and the implementation detail.

Challenge:

Solution:

<div class="container">
  <div class="circle bg-yellow left-circle z-1"></div>
  <div class="circle bg-yellow right-circle z-1"></div>
  <div class="cylindrical bg-brown left-cylindrical"></div>
  <div class="cylindrical bg-copper right-cylindrical"></div>
</div>

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .container {
    width: 100vw;
    height: 100vh;
    background: #62306d;
    position: relative;
  }
  .circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
  .cylindrical {
    width: 150px;
    height: 100px;
    border-radius: 100px;
  }
  .bg-yellow {
    background: #f7ec7d;
  }
  .bg-brown {
    background: #aa445f;
  }
  .bg-copper {
    background: #e38f66;
  }
  .z-1 {
    z-index: 1;
  }
  .left-circle,
  .right-circle,
  .left-cylindrical,
  .right-cylindrical {
    position: absolute;
    top: 50%;
    left: 50%;
  }
  .left-circle {
    transform: translate(calc(-50% - 70px), -50%);
  }
  .right-circle {
    transform: translate(calc(-50% + 70px), -50%);
  }
  .left-cylindrical {
    transform: translate(calc(-50% - 70px), calc(-50% - 25px)) rotate(90deg);
  }
  .right-cylindrical {
    transform: translate(calc(-50% + 70px), calc(-50% + 25px)) rotate(90deg);
  }
</style>

Key Takeaway(s):

using z-index to control which element to overlap on top of each other

As always, I welcome any feedback or questions regarding the implementation detail of the challenge. Otherwise, I hope this was useful!

CSSBattle | #23 Boxception

Nazmuz Shakib Pranto — Wed, 06 Jul 2022 03:20:13 +0000

Welcome to CSSBattle Challenges!

In this short article, I go through my solution for CSSBattle - #23 Boxception challenge. Please refer to the code snippet below to get a better insight into my thought processes and the implementation detail.

Challenge:

Solution:

<div class="container flex bg-gold">
  <div class="green-square flex">
    <div class="lightyellow-square flex">
      <div class="gold-square bg-gold"></div>
    </div>
  </div>
</div>

<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  .flex {
    display: flex;
  }
  .bg-gold {
    background: #f3ac3c;
  }
  .container {
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
  }
  .green-square {
    width: 200px;
    height: 200px;
    background: #1a4341;
    align-items: flex-end;
  }
  .lightyellow-square {
    width: 100px;
    height: 100px;
    background: #998235;
    align-items: flex-end;
    justify-content: flex-end;
  }
  .gold-square {
    width: 50px;
    height: 50px;
  }
</style>

Key Takeaway(s):

using display flex can be super useful to position nested children elements to certain corners within the parent container

As always, I welcome any feedback or questions regarding the implementation detail of the challenge. Otherwise, I hope this was useful!