fix: todo uncheck

src/components/UpdateProfile/ProfileUsername.tsx

@@ -57,8 +57,6 @@ export function ProfileUsername(props: ProfileUsernameProps) {
     setIsLoading(false);
   };
 
-  const USERNAME_REGEX = /^[a-zA-Z0-9]*$/;
-
   return (
     <div className="flex w-full flex-col">
       <label
@@ -90,7 +88,7 @@ export function ProfileUsername(props: ProfileUsernameProps) {
                   href={`${import.meta.env.DEV ? 'http://localhost:3000' : 'https://roadmap.sh'}/u/${username}`}
                   target="_blank"
                   className={
-                    'ml-0.5 rounded-md border border-purple-500 px-1.5 py-0.5 text-xs font-medium text-purple-700 transition-colors hover:bg-purple-500 hover:text-white'
+                    'ml-0.5 rounded-md border border-purple-500 px-1.5 py-0.5 text-xs font-medium text-purple-700 transition-colors hover:bg-purple-500 hover:text-purple-800 hover:text-white'
                   }
                 >
                   roadmap.sh/u/{username}
@@ -119,7 +117,7 @@ export function ProfileUsername(props: ProfileUsernameProps) {
               // only allow letters, numbers
               const keyCode = e.key;
               const validKey =
-                USERNAME_REGEX.test(keyCode) && username.length <= 10;
+                /^[a-zA-Z0-9]*$/.test(keyCode) && username.length < 10;
               if (
                 !validKey &&
                 !['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight'].includes(
@@ -129,13 +127,7 @@ export function ProfileUsername(props: ProfileUsernameProps) {
                 e.preventDefault();
               }
             }}
-            onInput={(e) => {
-              const value = (e.target as HTMLInputElement).value?.trim();
-              const isValid = USERNAME_REGEX.test(value) && value.length <= 10;
-              if (!isValid) {
-                return;
-              }
-
+            onChange={(e) => {
               setUsername((e.target as HTMLInputElement).value.toLowerCase());
             }}
             required={profileVisibility === 'public'}

src/data/roadmaps/angular/content/107-routing/104-guards.md

@@ -1,13 +1,11 @@
 # Route Guards
 
-Use route guards to prevent users from navigating to parts of an application without authorization.
+Angular route guards are interfaces provided by Angular which, when implemented, allow us to control the accessibility of a route based on conditions provided in class implementation of that interface.
 
-Angular route guards are interfaces provided by Angular that, when implemented, allow us 
-to control the accessibility of a route based on conditions provided in function implementation of that interface.
-
-Some types of angular guards are `CanActivate`, `CanActivateChild`, `CanDeactivate`, `CanMatch` and `Resolve`.
+Some types of angular guards are `CanActivate`, `CanActivateChild`, `CanLoad`, `CanDeactivate` and `Resolve`.
 
 Visit the following resources to learn more:
 
+- [@official@Angular Official Website](https://angular.dev/guide/routing)
 - [@official@Preventing unauthorized access](https://angular.dev/guide/routing/common-router-tasks#preventing-unauthorized-access)
 - [@official@Resolve](https://angular.dev/api/router/Resolve)

src/data/roadmaps/angular/content/110-state-management/index.md

@@ -5,5 +5,5 @@ Application state management is the process of maintaining knowledge of an appli
 Visit the following resources to learn more:
 
 - [@article@What is State Management?](https://www.techtarget.com/searchapparchitecture/definition/state-management)
-- [@article@Angular state management made simple with NgRx](https://blog.logrocket.com/angular-state-management-made-simple-with-ngrx/)
+- [@article@ Angular state management made simple with NgRx](https://blog.logrocket.com/angular-state-management-made-simple-with-ngrx/)
 - [@article@Angular State Management with NgRx](https://www.syncfusion.com/blogs/post/angular-state-management-with-ngrx.aspx)

src/data/roadmaps/angular/content/111-zones.md

@@ -1,9 +1,3 @@
 # Zones
 
-Zone.js is a signaling mechanism that Angular uses to detect when an application state might have changed. 
-It captures asynchronous operations like setTimeout, network requests, and event listeners. 
-Angular schedules change detection based on signals from Zone.js.
-
-- [@official@Resolving zone pollution](https://angular.dev/best-practices/zone-pollution)
-- [@official@Angular without ZoneJS (Zoneless)](https://angular.dev/guide/experimental/zoneless)
-- [@official@NgZone - API](https://angular.dev/api/core/NgZone)
+- [@official@Angular - NgZone](https://angular.dev/api/core/NgZone)

src/data/roadmaps/blockchain/blockchain.md

@@ -2,7 +2,6 @@
 jsonUrl: '/jsons/roadmaps/blockchain.json'
 pdfUrl: '/pdfs/roadmaps/blockchain.pdf'
 order: 6
-renderer: 'editor'
 briefTitle: 'Blockchain'
 briefDescription: 'Step by step guide to becoming a blockchain developer in 2024'
 title: 'Blockchain Developer'
@@ -11,7 +10,7 @@ isNew: false
 hasTopics: true
 dimensions:
   width: 968
-  height: 2250
+  height: 2173.87
 schema:
   headline: 'Blockchain Developer Roadmap'
   description: 'Learn how to become a Blockchain Developer with this interactive step by step guide in 2024. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'

src/data/roadmaps/blockchain/content/101-blockchain-general-knowledge/100-storage.md

@@ -7,4 +7,4 @@ Visit the following resources to learn more:
 - [@article@Blockchain Storage](https://www.techtarget.com/searchstorage/definition/blockchain-storage)
 - [@article@Decentralized Storage](https://ethereum.org/en/developers/docs/storage/)
 - [@article@How IPFS works](https://docs.ipfs.tech/concepts/how-ipfs-works/)
-- [@feed@Explore top posts about Storage](https://app.daily.dev/tags/storage?ref=roadmapsh)
+- [@feed@Explore top posts about Storage](https://app.daily.dev/tags/storage?ref=roadmapsh)

src/data/roadmaps/blockchain/content/101-blockchain-general-knowledge/109-blockchains/102-evm-based/avalanche.md

@@ -5,4 +5,4 @@ Avalanche describes itself as an “open, programmable smart contracts platform
 Visit the following resources to learn more:
 
 - [@article@Avalanche whitepaper](https://assets.website-files.com/5d80307810123f5ffbb34d6e/6008d7bbf8b10d1eb01e7e16_Avalanche%20Platform%20Whitepaper.pdf)
-- [@article@Avalanche official website](https://www.avax.network/)
+- [@article@Avalanche official website](https://www.avax.network/)

src/data/roadmaps/blockchain/content/101-blockchain-general-knowledge/109-blockchains/102-evm-based/binance-smart-chain.md

@@ -6,4 +6,4 @@ Visit the following resources to learn more:
 
 - [@article@Binance whitepaper](https://www.exodus.com/assets/docs/binance-coin-whitepaper.pdf)
 - [@official@BNB Chain overview](https://www.binance.com/en/blog/all/bnb-chain-blockchain-for-exchanging-the-world-304219301536473088)
-- [@feed@Explore top posts about Crypto](https://app.daily.dev/tags/crypto?ref=roadmapsh)
+- [@feed@Explore top posts about Crypto](https://app.daily.dev/tags/crypto?ref=roadmapsh)

src/data/roadmaps/blockchain/content/101-blockchain-general-knowledge/109-blockchains/102-evm-based/ethereum.md

@@ -9,4 +9,4 @@ Visit the following resources to learn more:
 - [@official@Ethereum whitepaper](https://ethereum.org/en/whitepaper/)
 - [@official@Intro to Ethereum](https://ethereum.org/en/developers/docs/intro-to-ethereum/)
 - [@article@A gentle introduction to Ethereum](https://bitsonblocks.net/2016/10/02/gentle-introduction-ethereum/)
-- [@feed@Explore top posts about Ethereum](https://app.daily.dev/tags/ethereum?ref=roadmapsh)
+- [@feed@Explore top posts about Ethereum](https://app.daily.dev/tags/ethereum?ref=roadmapsh)

src/data/roadmaps/blockchain/content/101-blockchain-general-knowledge/109-blockchains/102-evm-based/fantom.md

@@ -5,4 +5,4 @@ Fantom is a decentralized, open-source smart contract platform that supports dec
 Visit the following resources to learn more:
 
 - [@article@Fantom whitepaper](https://arxiv.org/pdf/1810.10360.pdf)
-- [@article@Fantom overview](https://docs.fantom.foundation/)
+- [@article@Fantom overview](https://docs.fantom.foundation/)

src/data/roadmaps/blockchain/content/101-blockchain-general-knowledge/109-blockchains/102-evm-based/gnosis-chain.md

@@ -5,4 +5,4 @@ Gnosis is a blockchain based on Ethereum, which changed the consensus model to P
 Visit the following resources to learn more:
 
 - [@article@Gnosis whitepaper](https://blockchainlab.com/pdf/gnosis_whitepaper.pdf)
-- [@article@Gnosis overview](https://developers.gnosischain.com/#gnosis-chain)
+- [@article@Gnosis overview](https://developers.gnosischain.com/#gnosis-chain)

src/data/roadmaps/blockchain/content/101-blockchain-general-knowledge/109-blockchains/102-evm-based/huobi-eco-chain.md

@@ -5,4 +5,4 @@ Huobi's ECO Chain (also known as HECO) is a public blockchain that provides deve
 Visit the following resources to learn more:
 
 - [@article@Huobi Eco Chain whitepaper](https://www.hecochain.com/developer.133bd45.pdf)
-- [@article@Introduction to HECO Chain](https://docs.hecochain.com/#/)
+- [@article@Introduction to HECO Chain](https://docs.hecochain.com/#/)

src/data/roadmaps/blockchain/content/101-blockchain-general-knowledge/109-blockchains/102-evm-based/moonbeam-moonriver.md

@@ -7,4 +7,4 @@ Moonriver is an incentivized testnet. It enables developers to create, test, and
 Visit the following resources to learn more:
 
 - [@article@About Moonbream](https://docs.moonbeam.network/learn/platform/networks/moonbeam/)
-- [@article@Moonbeam Vision](https://docs.moonbeam.network/learn/platform/vision/)
+- [@article@Moonbeam Vision](https://docs.moonbeam.network/learn/platform/vision/)

src/data/roadmaps/blockchain/content/101-blockchain-general-knowledge/109-blockchains/102-evm-based/polygon.md

@@ -6,5 +6,8 @@ Polygon, formerly known as the Matic Network, is a protocol that allows anyone t
 - [@official@Polygon PoS](https://polygon.technology/polygon-pos), a proof of stake, EVM compatible side chain
 - [@official@Polygon CDK](https://polygon.technology/polygon-cdk), a Chain Development Kit for building customizable zk powered L2s
 - [@official@Polygon ID](https://polygon.technology/polygon-id), identity infrastructure and SDKs to facilitate trusted and secure relationships between apps and users
+
+Visit the following resources to learn more:
+
 - [@article@Introduction to Polygon](https://wiki.polygon.technology/)
-- [@official@Polygon POL whitepaper](https://polygon.technology/papers/pol-whitepaper)
+- [@official@Polygon POL whitepaper](https://polygon.technology/papers/pol-whitepaper)

src/data/roadmaps/blockchain/content/101-blockchain-general-knowledge/109-blockchains/103-l2-blockchains/arbitrum.md

@@ -5,4 +5,4 @@ Arbitrum aims to reduce transaction fees and congestion by moving as much comput
 Visit the following resources to learn more:
 
 - [@article@Arbitrum whitepaper](https://www.usenix.org/system/files/conference/usenixsecurity18/sec18-kalodner.pdf)
-- [@article@Inside Arbitrum](https://developer.offchainlabs.com/docs/Inside_Arbitrum)
+- [@article@Inside Arbitrum](https://developer.offchainlabs.com/docs/Inside_Arbitrum)

src/data/roadmaps/blockchain/content/101-blockchain-general-knowledge/109-blockchains/103-l2-blockchains/moonbeam-moonriver.md

@@ -7,4 +7,4 @@ Moonriver is an incentivized testnet. It enables developers to create, test, and
 Visit the following resources to learn more:
 
 - [@article@About Moonbeam](https://docs.moonbeam.network/learn/platform/networks/moonbeam/)
-- [@article@Moonbeam Vision](https://docs.moonbeam.network/learn/platform/vision/)
+- [@article@Moonbeam Vision](https://docs.moonbeam.network/learn/platform/vision/)

src/data/roadmaps/blockchain/content/101-blockchain-general-knowledge/109-blockchains/103-l2-blockchains/polygon-zkevm.md

@@ -0,0 +1,18 @@
+# Polygon zkEVM
+
+Polygon zkEVM is a decentralized Ethereum Layer 2 scalability solution that uses cryptographic zero-knowledge proofs to offer validity and quick finality to off-chain transaction computation, also known as a ZK-Rollup.
+
+The ZK-Rollup executes smart contracts transparently, by publishing zero-knowledge validity proofs, while maintaining opcode compatibility with the Ethereum Virtual Machine.
+
+Benefits of Polygon zkEVM
+
+- EVM-equivalence
+- Ethereum security
+- ZKP-powered scalability
+
+Visit the following resources to learn more:
+
+- [@article@Introduction to Polygon zkEVM](https://wiki.polygon.technology/docs/zkevm/introduction/)
+- [@article@Polygon zkEVM Quickstart](https://wiki.polygon.technology/docs/zkevm/develop/)
+- [@article@Polygon zkEVM Faucet Guide](https://wiki.polygon.technology/docs/zkevm/guides/zkevm-faucet/)
+- [@article@Polygon zkEVM Asset Bridging Guide](https://wiki.polygon.technology/docs/zkevm/bridge-to-zkevm/)

src/data/roadmaps/blockchain/content/103-smart-contracts/100-programming-languages/index.md

@@ -0,0 +1,7 @@
+# Programming Languages
+
+Smart contracts can be programmed using relatively developer-friendly languages. If you're experienced with Python or any curly-bracket language, you can find a language with familiar syntax.
+
+Visit the following resources to learn more:
+
+- [@article@Smart Contract Languages](https://ethereum.org/en/developers/docs/smart-contracts/languages/)

src/data/roadmaps/blockchain/content/103-smart-contracts/101-testing/index.md

@@ -0,0 +1,10 @@
+# Testing
+
+Testing smart contracts is one of the most important measures for improving smart contract security. Unlike traditional software, smart contracts cannot typically be updated after launching, making it imperative to test rigorously before deploying contracts onto mainnet.
+
+Visit the following resources to learn more:
+
+- [@article@Testing Smart Contracts](https://ethereum.org/en/developers/docs/smart-contracts/testing/)
+- [@article@How to Test Ethereum Smart Contracts](https://betterprogramming.pub/how-to-test-ethereum-smart-contracts-35abc8fa199d)
+- [@article@Writing automated smart contract tests](https://docs.openzeppelin.com/learn/writing-automated-tests)
+- [@feed@Explore top posts about Testing](https://app.daily.dev/tags/testing?ref=roadmapsh)

src/data/roadmaps/blockchain/content/109-dapps/100-frontend-frameworks/index.md

@@ -6,5 +6,5 @@ Visit the following resources to learn more:
 
 - [@article@Web3 Frontend – Everything You Need to Learn About Building Dapp Frontends](https://moralis.io/web3-frontend-everything-you-need-to-learn-about-building-dapp-frontends/)
 - [@video@What is the difference between a framework and a library?](https://www.youtube.com/watch?v=D_MO9vIRBcA)
-- [@video@Which JS Framework is best?](https://www.youtube.com/watch?v=cuHDQhDhvPE)
+- [@video@ Which JS Framework is best?](https://www.youtube.com/watch?v=cuHDQhDhvPE)
 - [@feed@Explore top posts about Frontend Development](https://app.daily.dev/tags/frontend?ref=roadmapsh)