DEV Community: Harshal Kahar

How to remove background color from image & set webpage background using CSS trick only.

Harshal Kahar — Tue, 09 Jan 2024 17:38:03 +0000

Working on my project and stumbled upon a cool 𝘁𝗿𝗶𝗰𝗸 in 𝗧𝗮𝗶𝗹𝘄𝗶𝗻𝗱 𝗖𝗦𝗦 & 𝗖𝗦𝗦 the 𝗺𝗶𝘅-𝗯𝗹𝗲𝗻𝗱-𝗺𝘂𝗹𝘁𝗶𝗽𝗹𝘆 class! 🎨

It's a 𝗴𝗮𝗺𝗲-𝗰𝗵𝗮𝗻𝗴𝗲𝗿 for setting 𝗶𝗺𝗮𝗴𝗲 𝗯𝗮𝗰𝗸𝗴𝗿𝗼𝘂𝗻𝗱𝘀 𝗼𝗻 𝘄𝗲𝗯 𝗽𝗮𝗴𝗲𝘀, 𝗻𝗼 𝗻𝗲𝗲𝗱 𝗳𝗼𝗿 𝗯𝗮𝗰𝗸𝗴𝗿𝗼𝘂𝗻𝗱 𝗿𝗲𝗺𝗼𝘃𝗮𝗹 𝘁𝗼𝗼𝗹𝘀! Works like a charm, even if your image has a 𝗱𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝘁 𝗰𝗼𝗹𝗼𝗿 𝗯𝗮𝗰𝗸𝗴𝗿𝗼𝘂𝗻𝗱.

𝗤𝘂𝗶𝗰𝗸 𝗗𝗲𝘁𝗮𝗶𝗹𝘀:

✨ 𝗧𝗮𝗶𝗹𝘄𝗶𝗻𝗱 𝗖𝗦𝗦: Simply include 𝗺𝗶𝘅-𝗯𝗹𝗲𝗻𝗱-𝗺𝘂𝗹𝘁𝗶𝗽𝗹𝘆 in your class list of an image, and there you go! Seamless, stunning web page backgrounds.

✨𝗖𝗦𝗦: For the traditionalists, use 𝗺𝗶𝘅-𝗯𝗹𝗲𝗻𝗱-𝗺𝗼𝗱𝗲: 𝗺𝘂𝗹𝘁𝗶𝗽𝗹𝘆; same awesome results!

✨ 𝗦𝗶𝗺𝗽𝗹𝗲, 𝘀𝘁𝘆𝗹𝗶𝘀𝗵, 𝗮𝗻𝗱 𝗮𝗱𝗱𝘀 𝗮 𝘂𝗻𝗶𝗾𝘂𝗲 𝘁𝗼𝘂𝗰𝗵 𝘁𝗼 𝘆𝗼𝘂𝗿 𝗱𝗲𝘀𝗶𝗴𝗻𝘀. 𝗡𝗼 𝗺𝗼𝗿𝗲 𝗵𝗮𝘀𝘀𝗹𝗲, 𝗷𝘂𝘀𝘁 𝗽𝘂𝗿𝗲 𝗰𝗿𝗲𝗮𝘁𝗶𝘃𝗲 𝗳𝘂𝗻!

Have you tried this trick? Share your thoughts in the comments! Let's chat and swap design hacks. 🚀💬

𝗣𝗶𝗲𝗰𝗲𝘀 𝗔𝗜-𝗘𝗻𝗮𝗯𝗹𝗲𝗱 𝗣𝗿𝗼𝗱𝘂𝗰𝘁𝗶𝘃𝗶𝘁𝘆 𝗱𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿 𝗽𝗹𝗮𝘁𝗳𝗼𝗿𝗺! 🖥️💻

Harshal Kahar — Thu, 21 Dec 2023 12:56:00 +0000

I explored Pieces—a desktop app seamlessly integrating with popular IDEs like Visual Studio Code. This powerhouse enhances your coding experience and introduces incredible features for a holistic development journey!

𝗞𝗲𝘆 𝗙𝗲𝗮𝘁𝘂𝗿𝗲𝘀:
✨ 𝗚𝗣𝗧-4 𝗳𝗼𝗿 𝗙𝗿𝗲𝗲: Exciting news! Pieces now provide free access to GPT-4, a powerful language model. Elevate your projects with advanced natural language processing capabilities.

✨ 𝗜𝗺𝗮𝗴𝗲 𝘁𝗼 𝗧𝗲𝘅𝘁: Pieces now introduces an incredible Image to Text feature. Convert images into text effortlessly, making data extraction a breeze!

✨ 𝗖𝗼𝗱𝗶𝗻𝗴 𝗜𝗺𝗮𝗴𝗲 𝘁𝗼 𝗖𝗼𝗱𝗲: Unleash your creativity! With Pieces, turn coded images into actual code. A unique feature for developers who think beyond conventional boundaries.

✨ 𝗖𝗼𝗱𝗲 𝗚𝗲𝗻𝗲𝗿𝗮𝘁𝗶𝗼𝗻: Create files, add code, switch languages, or generate code from natural language descriptions—Pieces empower you to code faster and smarter.

✨ 𝗖𝗼𝗱𝗲 𝗖𝗼𝗺𝗽𝗹𝗲𝘁𝗶𝗼𝗻: Say goodbye to repetitive typing with AI-driven code completion—real-time suggestions for accurate and relevant code snippets.

✨ 𝗖𝗼𝗱𝗲 𝗟𝗶𝗻𝘁𝗶𝗻𝗴: Catch errors before they impact your project! Pieces automatically checks your code for cleanliness and errors.

✨ 𝗖𝗼𝗱𝗲 𝗔𝗻𝗮𝗹𝘆𝘀𝗶𝘀: Understand your code's structure and complexity effortlessly. Pieces provides insightful code analysis to optimize your coding practices.

✨ 𝗖𝗼𝗱𝗲 𝗦𝗵𝗮𝗿𝗶𝗻𝗴: Collaboration made easy! Share your code effortlessly by creating links or exporting files. Foster a collaborative coding environment.

✨ 𝗖𝗼𝗱𝗲 𝗖𝗼𝗹𝗹𝗮𝗯𝗼𝗿𝗮𝘁𝗶𝗼𝗻: Real-time collaboration is the future! Pieces support seamless collaboration, making teamwork efficient and enjoyable.

Do you use Pieces or have thoughts on AI developer productivity tools? Share your insights in the comments below! Let's connect and learn from each other. 🤝💬

How much Javascript is needed to learn ReactJS

Harshal Kahar — Wed, 18 Oct 2023 16:49:57 +0000

Don't overwhelm to learn JavaScript,🙄

JavaScript is only this much👇😊

Variables
• var
• let
• const
Data Types
• number
• string
• boolean
• null
• undefined
• symbol

3.Expressions Primary expressions
• this
• Literals
• []
• {}
• function
• class
• async function
• async function*
• /ab+c/i
• string
• ( )
• Property accessors
• ?.
• new
• new .target
• import.meta
• super
• import()

4.operators
• Arithmetic Operators: +, -, *, /, %
• Comparison Operators: ==, ===, !=, !==, <, >, <=, >=
• Logical Operators: &&, ||, !

5.Control Structures
• if
• else if
• else
• switch
• case
• default

6.Iterations/Loop
• do...while
• for
• for...in
• for...of
• for await...of
• while

7.Functions
• Arrow Functions
• Default parameters
• Rest parameters
• arguments
• Method definitions
• getter
• setter

8.Objects and Arrays
• Object Literal: { key: value }
• Array Literal: [element1, element2, ...]
• Object Methods and Properties
• Array Methods: push(), pop(), shift(), unshift(),
splice(), slice(), forEach(), map(), filter()

9.Classes and Prototypes
• Class Declaration
• Constructor Functions
• Prototypal Inheritance
• extends keyword
• super keyword
• Private class features
• Public class fields
• static
• Static initialization blocks

10.Error Handling
• try,
• catch,
• finally (exception handling)

ADVANCED CONCEPTS

11.Closures
• Lexical Scope
• Function Scope
• Closure Use Cases

12.Asynchronous JavaScript
• Callback Functions
• Promises
• async/await Syntax
• Fetch API
• XMLHttpRequest

13.Modules
• import and export Statements (ES6 Modules)
• CommonJS Modules (require, module.exports)

14.Event Handling
• Event Listeners
• Event Object
• Bubbling and Capturing

15.DOM Manipulation
• Selecting DOM Elements
• Modifying Element Properties
• Creating and Appending Elements

16.Regular Expressions
• Pattern Matching
• RegExp Methods: test(), exec(), match(), replace()

17.Browser APIs
• localStorage and sessionStorage
• navigator Object
• Geolocation API
• Canvas API

18.Web APIs
• setTimeout(), setInterval()
• XMLHttpRequest
• Fetch API
• WebSockets

19.Functional Programming
• Higher-Order Functions
• map(), reduce(), filter()
• Pure Functions and Immutability

20.Promises and Asynchronous Patterns
• Promise Chaining
• Error Handling with Promises
• Async/Await

21.ES6+ Features
• Template Literals
• Destructuring Assignment
• Rest and Spread Operators
• Arrow Functions
• Classes and Inheritance
• Default Parameters
• let, const Block Scoping

22.Browser Object Model (BOM)
• window Object
• history Object
• location Object
• navigator Object

23.Node.js Specific Concepts
• require()
• Node.js Modules (module.exports)
• File System Module (fs)
• npm (Node Package Manager)

24.Testing Frameworks
• Jasmine
• Mocha
• Jest

𝗥𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀 (youtube):

Code with Harry : https://youtube.com/playlist?list=PLu0W_9lII9ahR1blWXxgSlL4y9iQBnLpR&si=j2CohRVKVMBfB48e

Thapa technical :

Useful features by NextJS

Harshal Kahar — Wed, 18 Oct 2023 16:46:45 +0000

Next.js empowers developers to create modern, high-performance web application

while simplifying complex tasks. Whether it's optimizing images, improving SEO, or handling routing and middleware, Next.js has you covered. 💪

𝗜𝗺𝗮𝗴𝗲 𝗢𝗽𝘁𝗶𝗺𝗶𝘇𝗮𝘁𝗶𝗼𝗻: Seamlessly enhance your website's performance using the tag. Say goodbye to slow loading times! ⚡️ 2.𝗦𝗲𝗿𝘃𝗲𝗿-𝗦𝗶𝗱𝗲 𝗥𝗲𝗻𝗱𝗲𝗿𝗶𝗻𝗴 (𝗦𝗦𝗥): Serve dynamic content with SSR for faster page loads and better SEO. 📡
𝗖𝗹𝗶𝗲𝗻𝘁-𝗦𝗶𝗱𝗲 𝗥𝗲𝗻𝗱𝗲𝗿𝗶𝗻𝗴 (𝗖𝗦𝗥): Need client-side interactivity? No problem! Next.js offers CSR when it's needed. 🌐 4.𝗦𝘁𝗮𝘁𝗶𝗰 𝗦𝗶𝘁𝗲 𝗚𝗲𝗻𝗲𝗿𝗮𝘁𝗶𝗼𝗻 (𝗦𝗦𝗚): Create blazing-fast, SEO-friendly static websites effortlessly. 🏎
𝗦𝗘𝗢 𝗢𝗽𝘁𝗶𝗺𝗶𝘇𝗮𝘁𝗶𝗼𝗻: Search engine bots can scan and understand HTML meta tags, but they can't interpret JSX directly. With Next.js, you're providing search engines with the rich, meaningful content they crave.📈
𝗣𝗮𝗴𝗲 / 𝗟𝗮𝘆𝗼𝘂𝘁 : The Pages Router has a file-system-based router built on concepts of pages. When a file is added to the pages directory it's automatically available as a route. 🚀
𝗔𝗣𝗜 𝗥𝗼𝘂𝘁𝗶𝗻𝗴:Next.js supports API Routes, which allow you to build your API without leaving your Next.js app.🧰
𝗠𝗶𝗱𝗱𝗹𝗲𝘄𝗮𝗿𝗲: Customize your Next.js application's behavior with middleware.

Do you know any useful features that aren't on this list? 😄

If so, drop them in the comments below! Let's share the knowledge and make life even easier for everyone. 🚀

How to structure your frontend code in ReactJS [with explanations]. 🚀

Harshal Kahar — Sat, 14 Oct 2023 20:34:11 +0000

📁 my-react-app
├── 📄 read.md file
├── 📁 public
│ ├── 📄 index.html
│ ├── 📄 favicon.ico
│ ├── 📁 CSS
│ └── 📁 images
├── 📁 src
│ ├── 📄 index.js
│ ├── 📄 App.js
│ ├── 📁 components
│ │ ├── 📄 Header.js
│ │ ├── 📄 Footer.js
│ │ └── ...
│ ├── 📁 containers
│ │ ├── 📄 Home.js
│ │ ├── 📄 ProductList.js
│ │ └── ...
│ ├── 📁 context
│ │ ├── 📄 AuthContext.js
│ │ └── ...
│ ├── 📁 hooks
│ │ ├── 📄 useApi.js
│ │ ├── 📄 useForm.js
│ │ └── ...
│ ├── 📁 styles
│ │ ├── 📄 App.css
│ │ ├── 📄 Header.css
│ │ └── ...
│ ├── 📁 utils
│ │ ├── 📄 api.js
│ │ ├── 📄 helpers.js
│ │ └── ...
│ └── ...
├── 📁 tests
│ ├── 📁 unit
│ ├── 📁 integration
│ ├── 📁 e2e
│ └── ...
└── 📁 node_modules

𝗔𝗽𝗽.𝗷𝘀:

The control center of your React app, where you set up and manage everything.

𝗽𝘂𝗯𝗹𝗶𝗰:

A storage room for publicly accessible assets like HTML templates, images, and stylesheets.

𝘀𝗿𝗰:

The core of your React app.
index.js: The entry point connecting your app to the DOM.

𝗔𝗽𝗽.𝗷𝘀:

The main component defining the overall layout and routing.

𝗰𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀:

Reusable building blocks for your UI, like buttons and cards.

𝗰𝗼𝗻𝘁𝗮𝗶𝗻𝗲𝗿𝘀:

Main views or pages of your app, such as Home or Profile.

𝗰𝗼𝗻𝘁𝗲𝘅𝘁:

Central hubs for managing global app state, like user authentication.

𝗵𝗼𝗼𝗸𝘀:

Custom tools for handling common functionality, like API requests or local state management.

𝘀𝘁𝘆𝗹𝗲𝘀:

Definitions for CSS or SCSS to style your components.

𝘂𝘁𝗶𝗹𝘀:

Handy tools for tasks like data validation and date formatting.

𝘁𝗲𝘀𝘁𝘀:

Exams for your app to ensure it works correctly, including unit, integration, and e2e tests.

𝗻𝗼𝗱𝗲_𝗺𝗼𝗱𝘂𝗹𝗲𝘀:

Your toolbox is filled with automatically installed dependencies for building your app.

10 game-changing shortcut links that can supercharge your online productivity. 💼🚀

Harshal Kahar — Sat, 14 Oct 2023 20:25:31 +0000

meet.new - Quickly launch a Google Meet for your virtual meetings.
repo.new - Quickly create a new GitHub repository.
notion.new - Quickly open a new Notion page for your ideas and projects.
replit.new - Quickly open a new Replit workspace for coding experiments.
doc.new - Quickly create documents with Google Docs.
sheet.new - Quickly handle data with Google Sheets.
slide.new - Quickly craft engaging presentations using Google Slides.
form.new - Quickly build surveys and forms with Google Forms.
canva.new - Quickly design eye-catching visuals with Canva.
design.new - Quickly collaborate on design projects using Figma.
These shortcuts can save you precious minutes every day! 🕒

Do you know any new shortcuts that aren't on this list? 😄
If so, drop them in the comments below! Let's share the knowledge and make life even easier for everyone. 🚀

Feel free to use this LinkedIn post to share these valuable shortcuts with your network. Engage with comments to foster a discussion and discover even more shortcuts from your connections! 🙌🔍