task.md

Dev.tools TODO:s

Tasks for allready exist component

• every tool change need to be reflect in SEO meta tags for better seo
• add tool link: https://www.fontfabric.com/font-tester/?srsltid=AfmBOoqkzkNO_pSMffdfgjkWiVRWqj2p51Dj6mSX4DtUuZJyxg9AqHWz
• done just remove lib with command, [ ] remove store lib instead use locaStorageState hook if it is good option,
• For editor if mobile need to load simple simple textarea and initially monaco editor take time to load until need to show normal editor if until user allready type something need to show ask first want to change editor to monaco to better experiance
• need to add sitempa.xml and robots.txt based on routes.jsx
• also need to extract color from other tab need to create tools some api available as seen vueUse docs
• need to seperate 3 tools from imgPlaceholderGen component
• in color pallate it pasting json of image data not colors data in placeholderGen component
• create all pages responsive /live-html first priority
• need to use component ToolBox and ToolBoxLayout where it can be usable
• error in LiveReact component : development
• error in GrapejSEditor component: both
• error in ColorConverter component: development
• need to add tip in stringConvertor component that this task can do with vs code using select text want to convert and ctrl+shift+p and search whatever case want to convert for example see this video
• need to rename link and Component name and link name in to SearchEngines Component
• need to add og:image with website name and tools availble
• Need to create eco-system inside website
  • like when I copy something I can paste with button any inputs
• if website opened in mobile show error in Banner that no good experice
  • and use normal inputs instead of monaco editor
• need to add og:image with website name and tools availble
• some time monaco editor did't load because of server give fallback editor after specific time editor did't load
• max length of input text is how browser or system can handle
• Responsiveness:: create reponsive website using grid, position: fixed; and shadcn/ui Resizable or use lib react-resizable-panels
  • <>

New Tools Ideas

[ ] Random data generator : front-end if better

• inspired by : <>
• main :<>
• can be used faker.js
• MOCK.api: in website url
• inspired by.:<>
• <>
• <>
• we can achive by MSW or PUPPITER lib
• <>
  • HTML entity encoder/decoder - <>
    • need to show all entities
      • html_entities - <>
      • html_symbols - <>
      • html_emojis - <>
  • URL encoder/decoder - <> console.log("broswer support storage!!");
  • ES2015 Unicode regular expression transpiler - <>
  • UTF-8 string length & byte counter - <>
• <>
  • Generate Password - <>
    • password complexity options
  • PDF to IMG - <>
  • exif-viewer <>
  • generate-github-badges - <>
• svg editor using lib <>
• if possible better to use use <> vvveb drag and drop web editor better then grapejs
• CSV to Table inspired by this vsCode extension - <>
  • and also json table
• social media id link genrator : <> : <>
  • *also include instrction how find usernames in. wiki
  • instagram
  • whatsApp - inclue two links
  • facebook
  • likedin
  • telegram group join - user link
  • other apps open with a tag like - genrator
  • [email protected]
  • normal sms <>
  • *find more
• (Browser Info) browser all api support need to show table with api name and supprt yes or no example
  • also need add tip how to check in dev-tools like as you resize in dev tools show screen widthxheight in top-right corner
  • device info with navigator API

// this code check localStorage api support or not
if (typeof Storage !== "undefined") {
  // Code for yes in table
} else {
  // Sorry! set no in table
}

| keySomething | value | | --------------------- | ------- | ---------------------------------------- | | height | 45px | <-- need to change as screen size change | | width | 120px | <-- same for it | | localStoage Supported | yes | | ISE supported | no |

• code snippets saving block to save code snippets
• All-in-one code beautifier and minifier if possible give options
• fake data genrator using faker
• HTML and CSS basic all color names and preview with also color code need to show in code * made design
• base64 viewer what that is image or video or auto if better use selectors
  • also genrate base64
• color shades genrator
• robots.txt genrator
  • if user set every site allow to crow notify to use that if all pages allow not reason to add robots.txt file
• css filters
• css tools <>
• textShadow and styling spacing what can do with text - also need to support google fonts
• font *
  • font-family: Specifies the font family for text.
    • give toggle somthing that specify all browser supported built on fonts
  • font-size: Sets the size of the font.
  • font-style: Specifies the style of the font (normal, italic, oblique).
  • font-weight: Sets the weight or thickness of the font (normal, bold, bolder, lighter, 100-900).
  • font-variant: Controls the appearance of small caps in the font.
  • font-stretch: Adjusts the width of the font.
  • font: Shorthand for setting multiple font properties in one declaration (e.g., font: italic bold 12px/30px Arial, sans-serif;).
  • line-height: Sets the height of lines of text.
  • letter-spacing: Adjusts the spacing between characters.
  • word-spacing: Controls the spacing between words.
  • text-align: Specifies the horizontal alignment of text (left, right, center, justify).
  • text-decoration: Adds decorations such as underline, overline, line-through, or blink to text.
  • text-transform: Controls the capitalization of text (uppercase, lowercase, capitalize).
  • text-indent: Sets the indentation of the first line of text.
  • text-shadow: Adds a shadow to text.
  • white-space: Defines how white space inside an element is handled.
  • font-display: Controls how font files are loaded and displayed by the browser.
  • font-feature-settings: Enables or disables specific OpenType features in fonts.
  • font-kerning: Controls the use of kerning pairs in fonts.
  • font-variant-caps: Specifies the capitalization of text (normal, small-caps).
  • font-variant-east-asian: Controls the display of East Asian characters in fonts.
  • font-variant-ligatures: Enables or disables ligatures in fonts.
  • font-variant-numeric: Controls the display of numeric characters in fonts.
  • font-variation-settings: Controls the variation in font styles for variable fonts.
  • font-smooth: This property controls font smoothing, which is the anti-aliasing effect applied to fonts to make them appear smoother on screen. It's mostly supported in older versions of web browsers and is not commonly used anymore.
  • font-size-adjust: This property adjusts the font size based on the x-height of the first-choice font, ensuring that fonts of similar x-heights appear at the same size, regardless of the font family or fallback font used. This property is useful for maintaining consistent text sizes across different fonts.
  • font-optical-sizing: This property allows you to control whether font rendering should optimize for legibility or rendering speed. It's primarily used for fine-tuning the appearance of text in different contexts, such as print or digital screens.
• table *
• border*
• border-radius*
• transform *
• backgoround *
• css sprite genrator +
• css shape genrator+
• css color pallte genrator +
• css timeline editor +
• css responsive designe teste (like in developer tool devices)+
• grid builder +
• css filters also opacity
• css cursor testing
• <>
• Box Shadow
• CSS Cursor
• Border
• Border Radius
• Gradient CSS
• Transform CSS
• RGBA & Hex Color
• Multiple Columns
• Filter
• Html tables code genrater
• Send html templates from client
• add google fonts and google all developer helping products in websites component
• images
  • crop
  • compress
  • convert format
  • [ images corp and compression tool using lib react-image-file-resizer and react-image-crop ]
• more compression tools
  • <>
  • <>
  • <>
• All-in-one Convert Tools
  • as change selector need to chamge link
  • link need to be; .vercel.app/toolName/html-to-jsx and .vercel.app/toolName/jsx-to-html
  • and directly open that particular convertor with link
  • link need to be memorable
  • json-schema-to-openapi-schema.jsx ??
  • toml-to-json.jsx
  • toml-to-yaml.jsx
  • yaml-to-json.jsx
  • yaml-to-toml.jsx
  • json-to-toml.jsx
  • json-to-yaml.jsx
  • html-to-jsx.jsx and jsx-to-html
  • Convert css in js or vanilla css to tailwind css or vice versa

Advance

• electron app:: if app is good enough reponsive create electron app
• Logo Color Matcher: Recommend colors for a logo based on industry standards or psychological impact.
• featureUpdate: live preview for hugo with editor markdown file live preview of website page will look like after upload css