# Web Development Tools Here are some tools and resources for web developers. ## Dev Tools - DevToys (Windows) - Selenium - ShareX (Windows) - [Teller](https://teller.io/) Audio/Video - LottieFiles - Remove Bg Video - Remove Bg Image - [OsTicket](https://osticket.com/) ## Chrome Extensions - Awesome Screenshots - Nimbus Screenshot - Medium Enhanced Stats - ColorPick - Colorzilla - Dark Reader - Designer Tools - Eye Dropper - Fonts Ninja - Form Vault - Google Font Previewer - JsonVue - Markup Hero - Momentum - Octotree - Site Pallette - Temp Email - User JavaScript and CSS - Wappalyzer - Web Developer Checklist - WhatFont - Window Resizer UX Design - Bootstrap Grid Overlay - ColorTab - Heurio - Perfect Pixel - UX Check Accessibility - Spectrum - Stark - WAVE ## Safari Extensions - DuckDuckGo Privacy Essentials - Evernote Web Clipper - Hover for Safari - Liner - Web and PDF Highlighter - Neo Noir - NewsGuard - Raindrop.io - RSS Button - Speed Player - Turn Off the Lights - URL Linker ## CSS Tools ### Animista CSS Animation can get tedious to work with. We can work interactively with animations using Animista [1]. ### Clip Path Generator The tool on [2] is a clip path generator. ```css clip-path: polygon(25% 0%, 75% 0%, 100% 53%, 25% 100%, 0% 50%); ``` ### Responsive Font Calculator We can easily create a fluid Typography experience which has wider support and can be implemented with a few CSS lines. This experience is just created by using the viewport width, and or height to smoothly scale the root font size. We can avoid the jumps that are created by just using media queries. The web tool in [3] will make it easy to fine-tune and design a fluid experience for users. All we have to do is configure the options to get CSS output that we can copy/paste to our site. ```css :root { font-size: clamp(1rem, calc(1rem + ((1vw - 0.48rem) * 0.6944)), 1.5rem); min-height: 0vw; } ``` ### Type Scale The fonts are a key aspect of any website, so we have another useful web app to help with fonts. When designing a website is it important to see how the different font sizes play together which is simple to create a consistent font scale using the web app in [4]. We can choose between eight different predetermined scales or build our custom one. We just have to define a growth factor and the tool takes care of the rest. This will generate fonts using the rem unit it is also handy to see how different base size fonts will look. The default is 16px which matches any browser's default root font. Once we have everything looking good, we can copy the generated CSS or view the results in a codepen instance. ## Graphics [Glaze](https://www.glazestock.com/) [icons8](https://icons8.com/illustrations) [unDraw](https://undraw.co/) [Design Resources for Developers](https://github.com/bradtraversy/design-resources-for-developers) ---------- ## Web Development - [Browser frame](https://browserframe.com/) - [Can I use](https://caniuse.com/?search=Grid) - [Codepen](https://codepen.io/) - [DevDocs](https://devdocs.io/) - [LambdaTest](https://www.lambdatest.com/) - [Meta Tags](https://metatags.io/) - [Peppertype](https://www.peppertype.ai/) - [Profile Pic Maker](https://pfpmaker.com/) - [Regex101](https://regex101.com/) - [Resume.io](https:/resume.io) - [Roadmap](https://roadmap.sh/) - [Small Dev Tools](https://smalldev.tools/) - [TypeScript Playground](https://www.typescriptlang.org/) - [Web Page Test](https://www.webpagetest.org/) ## Web Design - [Penpot](https://penpot.app/) - [Storybook](https://storybook.js.org) - [Compressor.io](https://compressor.io/) - [Coolors](https://coolors.co/) - [CSSIcons](https://css.gg/) - [Flaticon](https://www.flaticon.com/) - [Loops](https://loops.wannathis.one/) - [Ls.Graphics](https://www.ls.graphics) - [Best Icon Resources](https://uxplanet.org/best-icon-resources-i-use-daily-9b7c2da26e83) - [Fontjoy](https://fontjoy.com/6 - [FontShare](https://www.fontshare.com/) - [Type Scale](https://type-scale.com/) - [Editor X](https://www.editorx.com/ - [Figma](https://www.figma.com) - [Mockflow](https://mockflow.com) - [Mockuuups](https://mockuuups.studio/) - [Octopus](https://octopus.do/) - [SipApp](https://sipapp.io/) ## CSS Websites - [Animation pausing](https://waitanimate.wstone.uk/) - [Color Palette Generator](https://mybrandnewlogo.com/color-palette-generator) - [CSS Generator](https://html-css-js.com/css/generator/box-shadow/) - [Cubic Bezier Generator](https://cubic-bezier.com/#.17,.67,.83,.67) - [Gradient Generator](https://cssgradient.io/) - [Grid Generator](https://cssgrid-generator.netlify.app/) - [Hamburgers](https://jonsuh.com/hamburgers/) - [Layout Generator](https://layout.bradwoods.io/) - [Layout Patterns](https://web.dev/patterns/layout/) - [Responsively](https://responsively.app/) - [SchemeColor](https://www.schemecolor.com/) - [SVG Generator](https://haikei.app/) - [Transition Animation Generator](https://www.transition.style/) ## References [1]: [Animista](https://animista.net/) [2]: [Clip Path Generator](https://bennettfeely.com/clippy/) [3]: [Responsive Font Calculator](https://websemantics.uk/tools/responsive-font-calculator/) [4]: [Type Scale](https://type-scale.com/)