DEV Community: Bhanu Sunka

The Best Vscode Snippets for React Typescript + Nextjs + Redux Toolkit

Bhanu Sunka — Sun, 31 Mar 2024 19:12:03 +0000

Have you ever tried the ES7 React snippets extension? Have you ever felt overwhelmed by the sheer number of snippets it offers? If not, here's my selection of the most essential snippets. By focusing on just the necessities, you can slim down your Visual Studio Code setup and streamline your coding experience.

React

Most common react Hooks snippets

React useState - us

"React useState": {
    "prefix": "us",
    "body": [
      "const [$1, set$2] = useState($3);"
    ]
  },

React useEffect - ue

  "React useEffect": {
    "prefix": "ue",
    "body": [
      "useEffect(() => {",
      "  $1",
      "}, [$2]);"
    ]
  },

React useCallback - ucb

  "React useCallback": {
    "prefix": "ucb",
    "body": [
      "useCallback(() => {",
      "  $1",
      "}, [$2]);"
    ]
  },

React useMemo - umm

  "React useMemo": {
    "prefix": "umm",
    "body": [
      "useMemo(() => {",
      "  $1",
      "}, [$2]);"
    ]
  },

React Functional components - rafce

"React Function Component": {
    "key": "reactArrowFunctionExportComponent",
    "prefix": "rafce",
    "body": [
      "const ${1:${TM_FILENAME_BASE}} = () => {",
      "  return (",
      "    <div>",
      "      <h1>${1:first}</h1>",
      "    </div>",
      "  )",
      "}",
      "",
      "export default ${1:${TM_FILENAME_BASE}}"
    ],
    "description": "Creates a React Arrow Function Component with ES7 module system",
    "scope": "typescript,typescriptreact,javascript,javascriptreact"
  },

React Functional components with props - rafcep

  "React Function Component with Props": {
    "key": "reactArrowFunctionExportComponent",
    "prefix": "rafcep",
    "body": [
      "interface $1Props {}",
      "",
      "const ${1:${TM_FILENAME_BASE}} = ({}: $1Props) => {",
      "  return (",
      "    <div>",
      "      <h1>${1:first}</h1>",
      "    </div>",
      "  )",
      "}",
      "",
      "export default ${1:${TM_FILENAME_BASE}}"
    ],
    "description": "Creates a React Arrow Function Component with ES7 module system",
    "scope": "typescript,typescriptreact,javascript,javascriptreact"
  },

Nextjs

Nextjs server components

Asynchronous react functional component - arafce

"Async React Function Component": {
    "prefix": "arafce",
    "body": [
      "const ${1:${TM_FILENAME_BASE}} = async () => {",
      "  return (",
      "    <div>",
      "      <h1>${1:first}</h1>",
      "    </div>",
      "  )",
      "}",
      "",
      "export default ${1:${TM_FILENAME_BASE}}"
    ]
  },

Asynchronous react functional component with props - arafcep

"Async React Function Component with Props": {
    "prefix": "arafcep",
    "body": [
      "interface $1Props {}",
      "",
      "const ${1:${TM_FILENAME_BASE}} = async ({}: $1Props) => {",
      "  return (",
      "    <div>",
      "      <h1>${1:first}</h1>",
      "    </div>",
      "  )",
      "}",
      "",
      "export default ${1:${TM_FILENAME_BASE}}"
    ]
  },

Imports alias - imp & imd

  "import": {
    "key": "import",
    "prefix": "imp",
    "body": ["import ${2:second} from '${1:first}'"],
    "scope": "typescript,typescriptreact,javascript,javascriptreact"
  },

"importDestructing": {
    "key": "importDestructing",
    "prefix": "imd",
    "body": ["import { ${2:second} } from '${1:first}'"],
    "scope": "typescript,typescriptreact,javascript,javascriptreact"
  },

Redux Toolkit - rxslice

"reduxSlice": {
    "key": "reduxSlice",
    "prefix": "rxslice",
    "body": [
      "import { createSlice } from '@reduxjs/toolkit'",
      "",
      "const initialState = {",
      "  ${3}",
      "}",
      "",
      "const ${1:${TM_FILENAME_BASE}} = createSlice({",
      "  name: '${2:second}',",
      "  initialState,",
      "  reducers: {}",
      "});",
      "",
      "export const {} = ${1:${TM_FILENAME_BASE}}.actions",
      "",
      "export default ${1:${TM_FILENAME_BASE}}.reducer"
    ],
    "scope": "typescript,typescriptreact,javascript,javascriptreact"
  },
}

Add the above code snippets to your typescriptreact.json file or use my snippet file in your VSCode. Github

Top Free Utility Mac Apps You Aren’t Using

Bhanu Sunka — Mon, 04 Mar 2024 15:15:21 +0000

Do you get the most out of your Mac? Whether you're a seasoned Mac user or new to the ecosystem, there are numerous utility apps available to help you increase productivity, optimize your workflow, and enjoy your Mac experience more. Here's a selected selection of ten top-tier free utility Mac programs that may not be on your radar but deserve a spot in your toolkit.

1. Mission Control Plus

Put the 'control' back in Mission Control.

Tired of the default Mission Control on your Mac? Mission Control Plus enhances this feature, offering more customization options and smoother navigation between your open windows and desktops.

2. Aldente

The ALL-IN-ONE Charge Limiter App for MacBooks.

Li-ion batteries (like the one in your MacBook) last the longest when operated between 20% and 80%. Keeping your battery at 100% most of the time will significantly shorten the lifespan of your MacBook battery, and replacing an old battery is not only harmful to the environment but also costs around $ 200. With AlDente installed, you can set a charging limit in a more healthy charging range, and with more features like Heat Protection, Sailing Mode, and Calibration Mode you can keep your battery healthy even longer.

3. Maccy

Lightweight clipboard manager.

Unlike other Mac clipboard managers, Maccy does only one job - keep your copy history and let you access it fast. You won't be overloaded by unnecessary features.

4. Bluesnooze

Automatically disables Bluetooth on sleep.

If you pair Bluetooth headphones or speakers with both your phone & Mac, it can be frustrating when your sleeping Mac connects intermittently and disrupts the audio.
With Bluesnooze, the Bluetooth connection is switched off when your Mac sleeps, and switched on when your Mac wakes.

5. Paletro

Command Palette in any applications

With Paletro, by pressing ⇧⌘P, you have access to all of the functionality of current focused app, including keyboard shortcuts for the most common operations.

6. Stats

MacOS system monitor in your menu bar

Want to keep an eye on your Mac's performance in real-time? Look no further than Stats. This lightweight app provides detailed insights into your CPU, memory, disk usage, and network activity, helping you identify any bottlenecks or issues that may arise.

7. Disk Disk

The Premier Mac Data Recovery Software.

Accidentally deleted an important file? Disk Drill has got you covered. This powerful data recovery app helps you retrieve lost or deleted files from your Mac's hard drive, external storage devices, or even formatted partitions with ease.

8. Fig

The next-generation command line.

Fig makes the command line easier for individuals and more collaborative for teams.
Our most popular product is Autocomplete. As you type, Fig pops up subcommands, options, and contextually relevant arguments in your existing terminal.

9. IINA

The modern media player for macOS.

Say goodbye to the default media player on your Mac and hello to IINA. This modern and open-source media player supports a wide range of audio and video formats, offers advanced playback controls, and even integrates with streaming services like YouTube, making it a must-have for media enthusiasts.

10. Keyboard Clean Tool

A utility that's an integral part of my everyday routine.

Keep your Mac's keyboard clean and free from dust and debris with this handy utility app. It disables your keyboard temporarily, allowing you to wipe it down without triggering any unintended key presses or actions.

Conclusion:

These ten free utility Mac apps might not be household names, but they certainly pack a punch when it comes to improving your Mac experience. Whether you're looking to boost your productivity, enhance your creativity, or simply keep your system running smoothly, give these apps a try—you won't be disappointed.

10 Mac Apps I Regret Not Using Sooner

Bhanu Sunka — Fri, 01 Mar 2024 16:56:54 +0000

Have you ever come across a piece of Mac software that radically transforms your workflow or simplifies a process you've been battling with for years? That's the beauty of the ever-changing world of software: there's always something new to learn. Here is a list of ten Mac apps that I wish I had discovered much sooner. These apps have made my digital life more manageable, efficient, and pleasant.

1. Bartender

Best app to manage menubar icons

If you're tired of a cluttered menu bar on your Mac, Bartender is the solution you've been looking for. It allows you to tidy up your menu bar by hiding menu bar items or rearranging them as per your preference. No more hunting for that one elusive icon buried under a pile of others.
It is very useful for those who have a notch in their MacBook.

2. NearDrop

Google Nearby Share app for macOS

NearDrop simplifies the process of transferring files between your Mac and nearby devices. Whether you want to share photos, videos, documents, or any other files, NearDrop makes it a breeze with its intuitive interface and seamless connectivity.

3. Dropover

Effortless Drag & Drop on your Mac

Managing files can be a hassle, but Dropover streamlines the process by providing a convenient way to move, copy, and organize files with drag-and-drop simplicity. It's like having a virtual assistant for file management tasks.

4. Intellidock

Hides the Dock. Automatically.

Intellidock enhances the functionality of your Mac's dock by intelligently Hiding the dock when it is overlapped by a window
So useful for those who has small-screen macbooks

5. App Cleaner

A perfect way to Uninstall mac apps

Over time, your Mac accumulates unnecessary files and clutter that can slow it down. App Cleaner helps you reclaim disk space by safely uninstalling unwanted apps and deleting associated files, ensuring your Mac stays clean and optimized.

6. AltTab

Windows alike tab manager

AltTab brings the convenience of Windows-style application switching to macOS, allowing you to quickly switch between open applications with a keyboard shortcut. It's a small tweak that can make a big difference in your productivity.

7. Sodutu

A perfect KDE connect client

For those who work across multiple devices, KDE Connect bridges the gap between your Mac and other devices running on Linux or Android. It allows seamless integration and communication between devices, enabling features like file sharing, notification mirroring, remote input control, and more. With KDE Connect, you can unlock a whole new level of synergy between your devices, making multitasking and collaboration smoother than ever before.

8. Linear Mouse

Very useful if you are using any external mouse with MacOS.

If you find the default mouse acceleration on your Mac too jarring or imprecise, Linear Mouse offers customizable mouse acceleration curves to fine-tune your mouse movement to your liking, resulting in a smoother and more precise cursor control experience.

9. Pure Paste

Paste as plain text by default

Pure Paste lets you paste as plain text by default. It sits in the menu bar and clears formatting (fonts, colors, bold, links, tables, etc.) from the text you copy. However, it does not touch unrelated content like files, images, etc. It also ignores content copied from password managers.
You can also choose to manually clear formatting whenever needed instead of automatically.

10. ReFlix

It's a small utility that lives in your menu bar.

Because the media keys in macOS control whatever app is foremost or last. Maybe? It's confusing.
Imagine you're listening to music, but you just clicked a YouTube link, causing a video to start playing. Of course you want to pause your music, so you hit the play/pause key. But it doesn't pause your music - instead, it pauses the video you're trying to watch. Frustration!
With Reflex running, the media keys are consistent and predictable, and they always do what you want them to do.

Conclusion:

These daily-use Mac apps have significantly enhanced my digital experience, and I encourage you to explore them too. Feel free to try them out and share your feedback in the comments section. I'm eager to hear which ones you find most useful

10 UNIQUE Mac Apps You Can't Live Without!

Bhanu Sunka — Mon, 19 Feb 2024 19:06:10 +0000

In the world of Mac applications, there are some hidden gems that can significantly enhance your productivity, creativity, and overall Mac experience. From streamlining your workflow to improving system performance and ensuring data security, these 10 unique Mac apps are must-haves for any Mac user. Let's explore each of them in detail!

1. Raycast

It's a fantastic spotlight replacement, with endless features.

Raycast isn't just another app launcher it's a productivity Swiss Army knife for Mac users. Forget juggling multiple windows and hotkeys. Raycast puts everything you need at your fingertips with lightning-fast speed and unmatched convenience.
There are so many features! You will end up spending the day exploring the features of Raycast.
Read my blog specifically about Raycast features. I promise you will be amazed at what it offers.

2. Arc Browser

The most feature-rich browser you have ever seen!

Tired of the same old browser experience? Craving organization, focus, and privacy? You might want to check out Arc Browser!
If you're looking for a browser that empowers focus, organization, and privacy, Arc is definitely worth a try.
Arc provides so many features. One of my favorites are arc spaces, Arc Max AI, Essel, built-in note-taking, and split tabs.

3. Rectangle

Superior window management on macOS

Tired of manually dragging windows? Rectangle takes window management to the next level. Snap windows to grids, create custom layouts, and switch between them with intuitive shortcuts, maximizing your screen real estate like never before.

4. Cleanshot X

It is more than just a screenshot tool!

Cleanshot X is a feature-rich screenshot and screen recording tool that offers advanced editing capabilities and cloud storage integration. From capturing screenshots to recording video tutorials, Cleanshot X is your all-in-one solution for visual content creation.
It offers annotation tools, screenshot organization, screen optical character recognition (OCR), and instant sharing with cloud storage services.

5. Karabiner-Elements

A powerful and stable keyboard customizer for macOS.

This powerful app might sound intimidating, but it's a game-changer for keyboard customization. Remap keys, create macros, and even use your keyboard to control system functions. Unleash the full potential of your keyboard with this versatile tool.
Karabiner-Elements has transformed the way I interact with my Mac, allowing me to optimize my workflow and boost my productivity.
Read my blog specifically about the Karabiner-Elements setup that maximizes productivity.

6. BetterTouchTool

An endlessly configurable utility tool.

Elevate your trackpad and touch bar gestures with BetterTouchTool. Create intricate multi-finger swipes, assign actions to specific app windows, and even control your entire system with custom gestures. Say goodbye to repetitive tasks and hello to a more intuitive workflow.
BetterTouchTool has revolutionized the way I interact with my Mac, making navigation and multitasking effortless and intuitive.
I'll attach a separate blog detailing how I set up trackpad shortcuts to maximize productivity.

7. Warp Terminal

Your terminal, reimagined!

This modern, Rust-based terminal emulator takes command-line interaction to the next level. Leverage its built-in Warp AI to translate natural language into executable commands, get suggestions for debugging errors, and even write scripts. Supercharge your terminal experience with AI assistance.

8. Todoist

The world’s #1 task manager and to-do list app.

Todoist is a powerful task management app that helps you organize your tasks, projects, and goals with ease. With features like due dates, reminders, and collaboration tools, Todoist keeps you on track and focused on what matters most.
Todoist's best features are cross-platform synchronization and natural language input.
Todoist has become my trusted companion for staying organized and productive, helping me manage my tasks and projects efficiently.

9. CleanMyMac X

The most beautiful software I have ever seen!

Keeping your Mac clean and optimized is crucial, and CleanMyMac X does just that. Remove junk files, optimize storage, uninstall apps completely, and even monitor system health. It's like spring cleaning for your Mac.
In CleanMyMacX, I mostly use the RAM cleaning feature. Additionally, it allows you to delete Mac software while removing complete app files.

10. Bitwarden

Free and the best password manager app that syncs across all devices.

Bitwarden is a secure and user-friendly password manager that helps you store and manage your passwords across all your devices. With features like password generation, secure sharing, and two-factor authentication, Bitwarden keeps your online accounts safe and secure.
It offers cross-platform synchronization, secure password sharing, and support for two-factor authentication.

Conclusion:

These 10 unique Mac apps are indispensable tools that can significantly enhance your Mac experience. From boosting productivity to improving system performance and ensuring data security, each of these apps offers unique features and capabilities that are sure to make a difference in your daily life. So why wait? Give them a try and unlock the full potential of your Mac today!

Tailwindcss in Styled-Components

Bhanu Sunka — Tue, 18 Apr 2023 17:08:31 +0000

Setup A Next JS Project With TailwindCSS and Twin Macro

In this blog we will be looking at setting up an Next JS project as quickly and easily as possible.

What is Twin macro
Why TailwindCSS + Twin Macro
Initial Setup
Packages Required
File Structure + Setup
Github Repo and Resources

What is Twin macro

Twin.macro is a popular library for styling React components using Tailwind CSS. It is built on top of styled-components and provides a set of macros that allow you to write CSS in a more intuitive way, using the same syntax as Tailwind.
Twin Macro is a powerful way to utilize what TailwindCSS has to offer, and maintain clean code by separating the CSS from our code while still keeping it within the relevant files.

Why TailwindCSS and Twin Macro

There are two problems when it comes to Tailwind.

You must be well-versed in CSS guidelines. However this may be resolved with tonnes of learning, practise, and repetition.
You get the same result as inline styles when classes are applied directly to React/HTML elements: a jumbled visual appearance.
- Twin Macro can help with this. By placing the React/HTML elements into their own constants at the front of our project, this library enables us to segregate the CSS from the React/HTML elements. As a result, our code base will remain organised and we can retain our pertinent styling applied to the React/HTML elements.
- Also, Twin Macro makes it much easier to add conditional styles to our elements, which is a tremendous benefit.

Example

import tw from 'twin.macro'

const Input = ({ hasHover }) => (
  <input css={[tw`border`, hasHover && tw`hover:border-black`]} />
)

Project Setup

Diving straight into things, let’s open up cmd and cd to where we want to create our new project. Once in your desired directory, we need to create our project via npm. Run the following command to download a Next JS app with tailwind preconfigured. Make sure you replace “my-project” with the desired name of your project.

npx create-next-app -e with-tailwindcss my-project

Once the files are finished downloading, follow the instructions in the terminal and run:

cd my-project

If you wish to take a look at the installed boilerplate, feel free to run:

npm run dev

This will make your downloaded boilerplate viewable at http://localhost:3000.

Open that URL in your browser to take a look if you wish to. Please feel free to take a look at this post as it is right now because we won't be modifying any of the basic design.

Packages Required

In order to get Twin.macro up and running in our project, we will need to install a few more package dependencies. These are:

Emotion
babel
twin.macro

Some of these will be installed as regular dependencies, and others will be dev dependencies. Back in your cmd, run the following commands:

npm install @emotion/react @emotion/styled @emotion/css @emotion/server

npm install -D twin.macro @emotion/babel-plugin babel-plugin-macros

These are all the packages we will be using in our setup.

Open your code editor if you haven't done so already. I'll be working with VS Code. Open your project and verify your package.json file. It should seem as follows:

File Structure and Setup

To setup, we need to update a few things to our current files and add a few additional files. Let's first open /pages/ app.js by navigating there.

Here, we need to import GlobalStyles from twin.macro. This brings in the base styles from Tailwind, and makes it work throughout our app. Copy the code below and replace the code in /pages/_app.js with it, and save your file.

// page/_app.js
import { GlobalStyles } from 'twin.macro'

const App = ({ Component, pageProps }) => (
  <div>
    <GlobalStyles />
    <Component {...pageProps} />
  </div>
)

export default App

Next, we must create a _document.js file within our pages folder. The path for it should be /pages/_document.js.

Next JS uses this file to set up certain additional options or do tasks like importing Google fonts. In our situation, we use it to ensure that the styles rendered on the client side and the server side are same.
Add the following code to your _document.js file and then save it.

import Document, { Html, Head, Main, NextScript } from 'next/document'
import { extractCritical } from '@emotion/server'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    const page = await ctx.renderPage()
    const styles = extractCritical(page.html)
    return { ...initialProps, ...page, ...styles }
  }

  render() {
    return (
      <Html lang="en">
        <Head>
          <style
            data-emotion-css={this.props.ids.join(' ')}
            dangerouslySetInnerHTML={{ __html: this.props.css }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

The next step is optional, and only needs to be done if you need to tweak the configuration of Twin. Here is the full list of Twin config options. Open up your package.json file, and past the following code in:

// package.json
"babelMacros": {
  "twin": {
     "preset": "emotion"
  }
},

You package.json should look like this now:

Now for the final step in our setup. In the root folder of your project, create a .babelrc.js file.

Open it, paste to following code in and save it.

// .babelrc.js
module.exports = {
  presets: [
    [
      'next/babel',
      {
        'preset-react': {
          runtime: 'automatic',
          importSource: '@emotion/react',
        },
      },
    ],
  ],
  plugins: ['@emotion/babel-plugin', 'babel-plugin-macros'],
}

Congratulations! 🎉 Your project is now running and functional. You can spin up your server now using npm run dev, and start building out your project!

Github Repo and Resources

Thank you for following along with this article. I do hope it has helped you start your next project with this fantastic tech stack. Here are a few extra resources which may be helpful.

Wanna know how it works?? Checkout Codesandbox.

Github Repo of this project. Feel free to clone and use this for your projects.

Navigate to your desired folder location and run the code below in a terminal to get started.

git clone https://github.com/Bhanu1776/twin-setup
cd next-tw-twin
npm install

Tailwind Docs. This is your go to for anything Tailwind.

Twin Macro Github Repo. This is a great resource to help you pick up Twin’s syntax, learn more about the package, and keep up to date with the latest releases.

Tailwind Twin IntelliSense is a fantastic extension to use when building a project with Twin + Tailwind. I highly recommend using it as it will make make it much easier to write your code via its Tailwind class suggestions.

Swc Error
If you are facing swc compiler error make sure you checkout this article.

Contact with Me

If you wondering which vscode theme i've used, Checkout JellyFish-x-Retro

I hope this blog has helped you to setup this awesome tech stack. Thanks for reading the blog!

DEV Community: Bhanu Sunka

The Best Vscode Snippets for React Typescript + Nextjs + Redux Toolkit

React

React useState - us

React useEffect - ue

React useCallback - ucb

React useMemo - umm

React Functional components - rafce

React Functional components with props - rafcep

Nextjs

Asynchronous react functional component - arafce

Asynchronous react functional component with props - arafcep

Imports alias - imp & imd

Redux Toolkit - rxslice

Top Free Utility Mac Apps You Aren’t Using

Conclusion:

10 Mac Apps I Regret Not Using Sooner

Conclusion:

10 UNIQUE Mac Apps You Can't Live Without!

Conclusion:

Tailwindcss in Styled-Components

Setup A Next JS Project With TailwindCSS and Twin Macro

Table of Contents

What is Twin macro

Why TailwindCSS and Twin Macro

Project Setup

Packages Required

File Structure and Setup

Github Repo and Resources

Contact with Me