DEV Community: Nikhil Agrawal

Switch to Laragon from XAMPP/WAMPP

Nikhil Agrawal — Mon, 14 Aug 2023 06:25:15 +0000

Laragon is gaining importance as it is portable, isolated, fast & powerful universal development environment for PHP.
Instead of using XAMPP or WAMPP for local development in Windows, you can switch to Laragon.

It is a blazing fast local development tool.

what's Laragon?

A Modern & Powerful local development tool packed with all "developer toolkit" you'll need for web development.

Supported Languages:
PHP, Node.js, Python, Java, Go, Ruby

Supported Database:
MySQL/MariaDB, PostgreSQL & MongoDB

Here are top 9 features that make it most powerful...

1. Blazing fast ⚡

It uses only 4MB RAM when running far lesser compared to xampp, so doesn't hang & leave RAM for other apps.

2. Pretty URLs 🔗

Tired of creating virtual hosts or using ugly urls like http://localhost/app?

Laragon automatically does it for you...
a nice, short, beautiful URL like:

http://app.test
http://.test

➡ no commands to run
➡ no file changes required

3. Inbuilt terminal 👩‍💻

Laragon comes with powerful inbuilt terminals like cmder, Powershell & Bash.

➡ Use the one you like
➡ No need to include environment path

4. Share local web apps to Internet 🔌

Share local web app to colleagues/clients for quick demo with just 2 click

➡ No command to run
➡ Nothing to install
➡ Uses ngrox to tunnel localhost to internet

5. Quick App ✨

Quickly install Laravel, Symphony, WordPress, Drupal & many others with 1 click.

➡ Again - no need to run a command or refer docs
➡ It does all the heavy lifting for you

6. Install & quickly switch version of any language 🔀

➡ Install different versions

➡ Need to switch PHP/NodeJs/Python versions between different project?

No worry, Just do it with one click

➡ Automatically handles all environment gotchas for you!

7. Mail Sender & Catcher 📨

➡ Catch all outgoing emails to local
➡ Send all outgoing emails from your email

Best for local email development & testing

8. Portable 💼

You can move Laragon folder after installing without worrying:

➡ to another disk/partition: C:\laragon to D:\laragon or E:\dev,…

➡ to another computer

➡ to USB

➡ sync to Cloud (DropBox, OneDrive, Google Drive)

Carry where you need!

9. Free & Open-Source 😍

Yes, devs love open source... so...

➡ Laragon is free & Open source
➡ Developed by Leo Khoa

➡ With 27 contributors
➡ 7+ years in development & continued

All these features make it the world's most powerful...

Also saves multiple hours every week!

12 Very Helpful HTML attributes that can save Your Hours of coding

Nikhil Agrawal — Mon, 12 Sep 2022 08:26:18 +0000

There are 26.2 million Web Developers but not everyone uses this HTML attribute.
Here are 12 Lesser-Known HTML attributes that you cannot miss

1. Download attribute in ahref:

➡ Easily allow users to download any asset on clicking a link

➡ File specified in href attribute is downloaded

➡ Optionally, specify new name of the file after it is downloaded

2. Input mode in input element:

➡ hints browser about the type of data to be entered by the user

➡ Display appropriate virtual keyboard

➡ & appropriate keyboard in mobile devices

➡ values: numeric, decimal, email, URL, tel

3. Loading attribute in img:

➡ Lazy load or eager load images

➡ Lazy loads defer loading of images until user scrolls near them

➡ Lazy loading increases website performance

4. Accept in file upload

➡ File types that are allowed in upload

➡ Possible values can be accepted mime-types or file extensions.

5. Autofocus form fields:

➡ Focus an input element on page load

➡ Useful to bring users' attention to a particular form fields

➡ Can be used for tags like button, input, select, textarea

6. DNS-prefetch

➡ Resolve domain names before resources get requested

➡ increases website performance by reducing latency for DNS resolution

➡ only used for cross-origin domains requests

7. Custom Data Attributes

➡ data-* allow additional information to be stored in HTML Dom

➡ Custom data can be easily accessed using HTMLElement.dataset property.

8. Autocomplete

➡ Specifies whether the browser has permission to provide autocomplete field values based on history

➡ Values: on/off

9. Tab Index:

➡ Represents the tab order of the current element

➡ Navigation proceeds from the lowest tabIndex to the highest tabIndex

10. Defer:

➡ Defers the script when the page has finished parsing

➡ Defer attribute only has an effect on external scripts

11. Onerror:

➡ Allows calling a javascript function if image loading fails

➡ For example if the original is not loaded the load fallback image

12. Display error if js disabled

➡ Use noscript check to show an error if script execution is disabled.

Please like & Re-Share if you find this post helpful

Connect me on Twitter

[Free & open-source] Beautiful tailwindcss components 👇

Nikhil Agrawal — Tue, 30 Aug 2022 07:45:14 +0000

There are thousands of tailwind design components, but not all are good.

Here are 7 beautiful 🤩 free & Open source tailwindcss components 👇

1.Flowbite:

➡️ Almost all components as bootstrap
➡️ Inbuilt Light/Dark mode
➡️ Figma designs
➡️ Integrates well with Vue, React, Laravel, Svelte, Django & more
➡️ Pro version for complex components

🔗 flowbite.com

2. Daisyui

➡️ Most popular tailwind component
➡️ 11K stars on github
➡️ Beautifully designed
➡️ Comes with theming options like Light, Dark, Cupcake, and 10 more 💅

🔗 daisyui.com

3. Kometa UI:

➡️ 130 sections
➡️ Available for HTML, VueJS, and React
➡️ Beautifully designed

🔗 https://kitwind.io/products/kometa/

4. Tailwind Components:

➡️ Collection of components by community
➡️ 1000's free components
➡️ Not only components but also pages like about us, contact us, coming soon available

🔗 tailwindcomponents.com

5. Mambaui:

➡️ Beautiful components
➡️ 140 components in 37 categories
➡️ Minimal design

🔗 mambaui.com

6. Tailwind Toolbox:

➡️ Collection of components from the community
➡️ Get Templates, Components, Kits, Plugins & More.
➡️ Optional premium marketplace

🔗 http://tailwindtoolbox.com

7. HyperUI:

HyperUI is a collection of free Tailwind CSS components that can be used in your project. With a range of components, you can build your next marketing website, admin dashboard, ecommerce store and much more.

🔗 http://hyperui.dev

8. Web3 Templates:

➡️ A growing library of pre-built, fully responsive & customizable HTML & React UI components built with Tailwind CSS.

🔗 https://web3templates.com/components

Do you know any more good tailwind components? Feel free to reply below.

Let's be friends 🤝

Connect me on Twitter and LinkedIn

Please like & reshare if you find this post useful

Web3 101: 20 most important web3 terms you should know (many won't)

Nikhil Agrawal — Thu, 21 Jul 2022 18:02:36 +0000

Web3 is growing rapidly.

Every developer wants to start or switch to web3 because of it's huge market demand.

Even if you're not a web3 developer you must know some of the common & basic web3 terminologies.

In this post we'll have a quick glance of 20 most common & important web3 terms:

1. Address, Crypto Address, Public Key:

Alphanumeric character string used to send and receive crypto in blockchain network
In Ethereum, the address begins with 0x

2. Block:

A node in a chain
Blockchain network is comprised of millions of such blocks
A block is virtually impossible to hack
It possesses parts or all of the records of the transactions that preceded it

3. Blockchain

Blockchains store data in blocks that are then chained together
Different types of information can be stored on a blockchain but the most common use so far has been as a ledger for transactions
It is Immutable, which means data entered is irreversible
Transactions are permanently recorded & viewable to anyone

4. ENS

Ethereum Name Service

Human-readable and easy-to-remember addresses to Ethereum addresses
Something like yourname.eth

5. ERC-20

A set of specifications for tokens to follow in order to function optimally on the Ethereum blockchain
Using it developers and entrepreneurs can build new tokens
It is one of the foundational pillars of the blockchain ecosystem

6. DAO

Decentralized Autonomous Organization

Blockchain-based system that enables people to coordinate & self-govern
It has self-executing rules deployed on a public blockchain

Ex:
DASH - cryptocurency managed by its users
MakerDAO - A softwre that maintains stablecoin

7. DApp

Decentralized Application

Web app that is built on top of open, decentralized, peer-to-peer infrastructure services

Example:
Decentralized storage and.or a message protocol and platform

8. DeFi

Decentralized Finance

Financial app developed on top of blockchain systems
Removes the control banks & institutions have on money, financial products, & financial services
Derivatives, Asset Management, Insurance

Eg:
Augur - a popular DeFi betting platform

9. Airdrop

Distribution of a cryptocurrency token or coin
Usually for free
Done to gain attention, new followers and popularise a token

10. Alt Coin, Altcoin

Any cryptocurrency that is not Bitcoin
An alternative digital currency
Created after BTC

11. Smart Contract:

Programs stored on a blockchain that run when predetermined conditions are met
Usually an automated agreement between 2 parties
Code controls the execution, and transactions are trackable and irreversible

12. Gas

Fee that is charged for any crypto transaction. Like as sending crypto & minting NFT
Incurred to conduct the transaction or execute a contract on their blockchain platform
Etherum gas prices are denoted in gwei

1 gewi = 0.000000001 ETH

13. Minting:

A process by which digital art becomes a part of the Ethereum blockchain
That is unchangeable & tamper-proof
Similar to the way that metal coins are minted and added into circulation

14. Learn-to-earn:

Mechanism that rewards users when they can prove they've learned something
Often receive cryptocurrencies when they send proof of their new knowledge.

15. ATH, all time high

highest price (or market cap) that an asset has reached since its listing or inception

16. Testnet

A blockchain instance that is used for testing and experimentation without risk to real funds or the main chain

Usually used for a newer version of the underlying software for testing

17. Hodl

hold on for dear life
used among cryptocurrency enthusiasts when encouraging traders to resist the urge to sell one's holdings in response to market fluctuations

18. Seed Phrase:

A series of words generated by your cryptocurrency wallet that give you access to the crypto associated with that wallet
Think of it as a master password to your wallet
You shouldn't share it with others

19. Consensus Mechanism:

A fault-tolerant mechanism that is used in blockchain systems to achieve the necessary agreement on a single data value among distributed processes or multi-agent systems
The consensus mechanism is known as Proof-of-Work (PoW)

20. Some frequent acronyms:

gg = Good Game

gmi = Gonna Make it

lfg = Lets Fucking Go

ngmi = Not Gonna make it

FOMO = Fear Of Missing Out

WAGMI = We're All Gonna Make It

fren = metaverse term for 'friend'

Ser = Sir (respectfully introduce oneself)

Congratuations, now you've learned most common web3 terms 😎

Accelerate your career, learn web3.

Download 100+ web3 resource 👇

💎 Awesome Web3 Resources

How I reduced clients website loading speed from 10 to 2 sec? Time: 2 hours, Charged: $500

Nikhil Agrawal — Mon, 18 Jul 2022 04:41:17 +0000

Few days back...

I optimized a client's website loading speed from 10 sec to < 2 sec

Time spent: 2 hours
Charged client: $500

Here are 8 steps I did which You can follow them to optimize website made with any CMS or technologies:

First, why should you make any website faster?

✔️ Decrease bounce rate by 57% (as per study)
✔️ Increases google ranking
✔️ Happy Visitors/Customers

let's check the steps 👇

1/ Analysing website:

➡ Go to http://gtmetrix.com

➡ Enter the URL and hit "Test your site"

➡ In few secs you'll see complete report containing GTmetrix Grade, Performance & structure.

(GT metric report)

➡ In GT metric report scroll down to "Top Issues"

➡ Which will show issues related to JS, CSS, Images, too many requests, page size & more

👉 GTmetrix will show most of the improvements, BUT NOT ALL

➡ Let's resolve issues pointed by GT metric

2/ Image size optimization:

➡ Reduce all image sizes from MB to KB

➡ Go to http://squoosh.app
➡ Upload original images
➡ Download compressed images
➡ Replace in your website

3/ Lazy load images:

➡ Lazy loads defer loading of images until user scrolls near them

➡ Do only if there are lot of images

➡ Just add loading="lazy" in img tags

(check screenshot)

4/ Caching js & css

➡ Caching assets loads them once & stores them in browser cache

➡ This reduces loading time of subsequent pages

➡ Cache them by adding an asset version

(check screenshot)

5/ Minify JS & CSS:

➡ Minifying JS & CSS will reduce their size by almost 70%

➡ Go to http://smalldev.tools, search js/css minifier

➡ Minify all js & CSS

PS: keep a backup of non-minified files in case it may be required later

6/ Move JS to end of document:

➡ JS blocks all other resources
➡ This increases "First Contentful Paint" time
➡ Move them to end of HTML document

7/ Brotli compression:

➡ It reduces HTML size by almost 80%

➡ Go to http://giftofspeed.com/gzip-test/ & check if enabled or not

➡ If not, contact hosting to enable it

➡ Or use cloudflare to use this for free

Now we're done with optimization suggested by GTmetrix

➡ Re-test your website & you'll see a good improvement 🤩

➡ but not yet 100% optimized

Let's optimize more...

8/ Database optimization:

Unoptimized DB can reduce speed by a lot

DB optimization can be a big topic, but doing this basic will help

➡ Add indexing to fields used for searching, sorting & table joins (basic)

This is my first post. Hope this post helps!

Comment below for an questions you have.

Connect me on Twitter and LinkedIn.