update lists
This commit is contained in:
@@ -1,371 +0,0 @@
|
||||
<h1 id="awesome-developer-tools">Awesome Developer Tools</h1>
|
||||
<blockquote>
|
||||
<p>A curated list of in-browser <a
|
||||
href="#bookmarklets">bookmarklets</a>, <a href="#tools">tools</a>, and
|
||||
<a href="#resources">resources</a> for modern full-stack software
|
||||
engineers.</p>
|
||||
</blockquote>
|
||||
<p>Inspired by the <a
|
||||
href="https://github.com/sindresorhus/awesome">awesome</a> list
|
||||
thing.</p>
|
||||
<h2 id="bookmarklets">Bookmarklets</h2>
|
||||
<ul>
|
||||
<li><a href="https://medialab.github.io/artoo/">artoo.js</a> -
|
||||
Client-side scraping utility for the currently loaded uri.</li>
|
||||
<li><a href="http://mir.aculo.us/dom-monster/">DOM Monster</a> - A
|
||||
cross-platform, cross-browser bookmarklet that will analyze the DOM
|
||||
& other features of the page you’re on.</li>
|
||||
<li><a href="https://make-bookmarklets.com">Make Bookmarklets</a> -
|
||||
Online tool to turn JavaScript into a bookmarklet.</li>
|
||||
<li><a href="http://mark-rolich.github.io/RulersGuides.js/">Rulers
|
||||
Guides</a> - A JavaScript library which enables Photoshop-like rulers
|
||||
and guides interface on a web page.</li>
|
||||
<li><a href="http://lab.maltewassermann.com/viewport-resizer/">Viewport
|
||||
Resizer</a> - A browser-based tool to test any website’s
|
||||
responsiveness.</li>
|
||||
</ul>
|
||||
<h2 id="web-based-tools">Web-based Tools</h2>
|
||||
<h3 id="debug-javascript">Debug JavaScript</h3>
|
||||
<ul>
|
||||
<li><a href="https://babel-time-travel.boopathi.in/">Babel Time
|
||||
Travel</a> - Travel in time as babel transpiles.</li>
|
||||
<li><a href="http://debugjs.com/">DebugJS</a> - Debug your JavaScript in
|
||||
the browser (lol?)</li>
|
||||
<li><a href="https://www.endpoints.dev">endpoints.dev</a> - View
|
||||
realtime HTTP requests using a endpoints.dev generated URL.</li>
|
||||
<li><a href="http://httpbin.org/">httpbin</a> - HTTP Request &
|
||||
Response service.</li>
|
||||
<li><a href="https://www.jsv9000.app">JavaScript Visualizer 9000</a> -
|
||||
Loupe-inspired JavaScript execution visualizer</li>
|
||||
<li><a href="https://jsonbin.io/quick-store">JSONBIN.io</a> - Custom,
|
||||
mock JSON API</li>
|
||||
<li><a href="http://latentflip.com/loupe/">Loupe</a> - Similar in goal
|
||||
to SlowmoJS, a JavaScript call stack visualizer.</li>
|
||||
<li><a href="http://toolness.github.io/slowmo-js/">SlowmoJS</a> -
|
||||
Execute JavaScript in slow motion.</li>
|
||||
</ul>
|
||||
<h3 id="postman-alternatives">Postman Alternatives</h3>
|
||||
<ul>
|
||||
<li><a href="https://hoppscotch.io">Hoppscotch</a> - A lightweight,
|
||||
web-based API development suite.</li>
|
||||
<li><a href="https://recipeui.com/editor">RecipeUI</a> - Open source
|
||||
Postman alternative with type safety built in.</li>
|
||||
<li><a href="https://reqbin.com">Reqbin</a> - REST & SOAP API Online
|
||||
Testing Tool</li>
|
||||
</ul>
|
||||
<h3 id="diagramming-scratch">Diagramming & Scratch</h3>
|
||||
<ul>
|
||||
<li><a href="https://asciiflow.com">asciiflow</a> - ASCIIFlow is a
|
||||
client-side only web based application for drawing ASCII diagrams.</li>
|
||||
<li><a href="https://dbdiagram.io/d">dbdiagram</a> - Draw
|
||||
Entity-Relationship Diagrams, Painlessly.</li>
|
||||
<li><a href="https://dot-to-ascii.ggerganov.com">dot-to-ascii</a> -
|
||||
Graphviz to ASCII converter using Graph::Easy.</li>
|
||||
<li><a href="https://excalidraw.com">Excalidraw</a> - Virtual
|
||||
whiteboard.</li>
|
||||
<li><a href="https://jsontochart.com">JSON-to-Chart</a> - Create
|
||||
beautiful charts from JSON data in your browser.</li>
|
||||
<li><a href="https://jsoncrack.com/editor">JSONCrack</a> - Visualize
|
||||
CSV/JSON/TOML/XML/YAML instantly into graphs.</li>
|
||||
<li><a href="https://markmap.js.org/repl">Markmap</a> - Visualize
|
||||
markdown as a feature-rich mindmaps.</li>
|
||||
<li><a href="https://nomnoml.com">nomnoml</a> - A tool for drawing UML
|
||||
diagrams based on a simple syntax.</li>
|
||||
<li><a href="https://sequencediagram.org">Sequence Diagram</a> - An
|
||||
online tool / software for creating UML sequence diagrams.</li>
|
||||
</ul>
|
||||
<h3 id="diffing">Diffing</h3>
|
||||
<ul>
|
||||
<li><a
|
||||
href="https://benjamine.github.io/jsondiffpatch">JSONDiffPatch</a> - Run
|
||||
a visual or non-visual diff on two JSON blobs.</li>
|
||||
</ul>
|
||||
<h3 id="document-editors">Document & Editors</h3>
|
||||
<ul>
|
||||
<li><a href="https://readme.so/editor">README.so</a> - A simple editor
|
||||
to quickly add and customize all the sections you need for your
|
||||
project’s readme.</li>
|
||||
</ul>
|
||||
<h3 id="generators">Generators</h3>
|
||||
<ul>
|
||||
<li><a href="https://www.jsongenerator.io">JSONGenerator</a> - Create
|
||||
random JSON data</li>
|
||||
<li><a
|
||||
href="https://www.digitalocean.com/community/tools/nginx">NGINXConfig</a>
|
||||
- The easiest way to configure a performant, secure, and stable NGINX
|
||||
server.</li>
|
||||
<li><a href="https://nxt-readme.vercel.app">Readme</a> - All in one tool
|
||||
to quickly generate a readme for your project or github profile.</li>
|
||||
</ul>
|
||||
<h3 id="image">Image</h3>
|
||||
<ul>
|
||||
<li><a href="https://bennettfeely.com/clippy">Clippy</a> - CSS clip-path
|
||||
maker and editor.</li>
|
||||
<li><a href="http://www.favicomatic.com/">Favic-o-matic</a> - Literally
|
||||
generates every favicon neccessary + markup.</li>
|
||||
<li><a href="https://jpeg.rocks">JPEG.rocks</a> - Privacy-aware JPEG
|
||||
optimizer</li>
|
||||
<li><a href="https://www.picperf.dev/analyze">PicPerf</a> - Boost web
|
||||
performance with image optimization. Analyze and improve
|
||||
<code><img></code> tags, <code><style></code> tags, and
|
||||
inline CSS.</li>
|
||||
<li><a href="https://png-to-svg.com">PNG-to-SVG</a> - Free conversion
|
||||
from JPG or PNG images To vectorized SVG.</li>
|
||||
<li><a href="https://squoosh.app/">Squoosh</a> - Compress and optimize
|
||||
images in browser</li>
|
||||
<li><a
|
||||
href="https://csspro.com/svg-to-background-image-css">SVG-to-backgroundImage</a>
|
||||
- Convert your SVG files into CSS url (data URIs) by encoding it.</li>
|
||||
<li><a href="https://jakearchibald.github.io/svgomg/">SVGOMG</a> - Try
|
||||
<a href="https://github.com/svg/svgo">SVGO</a> (SVG Optimizer) in the
|
||||
browser!</li>
|
||||
</ul>
|
||||
<h2 id="web-based-services">Web-based Services</h2>
|
||||
<h3 id="copypaste-scripts-styles">Copy/Paste Scripts & Styles</h3>
|
||||
<ul>
|
||||
<li><a href="https://crontab.guru/">crontab guru</a> - The quick and
|
||||
simple editor for cron schedule expressions by Cronitor</li>
|
||||
<li><a href="https://getcssscan.com/css-box-shadow-examples">CSS Scan -
|
||||
Box Shadows</a> - CSS, Ready to use, click to copy</li>
|
||||
<li><a href="https://getcssscan.com/css-buttons-examples">CSS Scan -
|
||||
Buttons</a> - CSS, Ready to use, click to copy</li>
|
||||
<li><a href="https://getcssscan.com/css-checkboxes-examples">CSS Scan -
|
||||
Checkboxes</a> - CSS, Ready to use, click to copy</li>
|
||||
<li><a href="https://getcssscan.com/css-shapes">CSS Scan - Shapes</a> -
|
||||
CSS, Ready to use, click to copy</li>
|
||||
<li><a href="https://devtoolstips.org">Devtools Tips</a> -
|
||||
Copy-and-paste’able collection of useful cross-browser DevTools
|
||||
snippets.</li>
|
||||
<li><a href="https://www.transition.style">transition.css</a> - Drop-in
|
||||
CSS transitions</li>
|
||||
</ul>
|
||||
<h3 id="file-sharing">File Sharing</h3>
|
||||
<ul>
|
||||
<li><a href="https://www.file.io">file.io</a> - Ephemeral file sharing.
|
||||
Convenient, anonymous and secure.</li>
|
||||
<li><a href="https://instant.io">instant.io</a> - Instant file
|
||||
transfer/sharing over WebTorrent</li>
|
||||
<li><a href="https://pairdrop.net">pairdrop</a> - Instant file transfer
|
||||
over your local network (P2P)</li>
|
||||
</ul>
|
||||
<h3 id="performance">Performance</h3>
|
||||
<ul>
|
||||
<li><a href="https://perf.link">Perflink</a> - JS benchmarks</li>
|
||||
</ul>
|
||||
<h3 id="playgrounds">Playgrounds</h3>
|
||||
<ul>
|
||||
<li><a href="http://codepen.io/pen">codepen</a> - Social development
|
||||
environment for front-end designers and developers. Build and deploy a
|
||||
website, show off your work, build test cases to learn and debug, and
|
||||
find inspiration.</li>
|
||||
<li><a href="https://codesandbox.io/s/new">CodeSandbox</a> - Online code
|
||||
editor and sandbox</li>
|
||||
<li><a href="https://ellie-app.com/">Ellie</a> - The Elm Live
|
||||
Editor</li>
|
||||
<li><a href="http://esnextb.in/">ES.nextBin</a> - Like RequireBin but
|
||||
ES2015</li>
|
||||
<li><a href="https://code.esm.sh">ESM</a> - A fast, smart, & global
|
||||
CDN for modern(es2015+) web development.</li>
|
||||
<li><a href="http://jsbin.com/">JSBin</a> -
|
||||
JS/Coffee/Babel/Babel/Live/JSX/HTML/Markdown/Pug/CSS/Stylus/LESS/Sass</li>
|
||||
<li><a href="http://jsfiddle.net/">JSFiddle</a> -
|
||||
JS/ES3/Coffee/HTML/CSS/Sass</li>
|
||||
<li><a href="https://playcode.io/new">playcode.io</a> -
|
||||
JS/Typescript/Coffee/LiveScript/Babel/CSS/Sass/LESS/Stylus/HTML/Pug</li>
|
||||
</ul>
|
||||
<h3 id="regex">Regex</h3>
|
||||
<ul>
|
||||
<li><a href="https://www.debuggex.com/">Debuggex</a> -
|
||||
PCRE/Python/JavaScript regex matching.</li>
|
||||
<li><a
|
||||
href="https://extendsclass.com/regex-tester.html">ExtendsClass</a> -
|
||||
PHP/Python/Ruby/JavaScript regex matching.</li>
|
||||
<li><a href="http://leaverou.github.io/regexplained/">RegExplained</a> -
|
||||
JavaScript regex matching.</li>
|
||||
<li><a href="http://www.regexr.com/">Regexr</a> - JavaScript regex
|
||||
matching.</li>
|
||||
<li><a href="https://jex.im/regulex">Regulex</a> - JavaScript Regular
|
||||
Expression Visualizer.</li>
|
||||
</ul>
|
||||
<h3 id="transformation">Transformation</h3>
|
||||
<ul>
|
||||
<li><a href="http://astexplorer.net/">AST Explorer</a> - Parse JS to an
|
||||
explorable AST tree via acorn, babel, babylon, espree, esprima, recast,
|
||||
shift, and typescript.</li>
|
||||
<li><a href="https://babeljs.io/en/repl">Babel REPL</a> - The compiler
|
||||
for next generation JavaScript</li>
|
||||
<li><a href="https://godbolt.org">Compiler Explorer</a> - Run compilers
|
||||
interactively from your web browser and interact with the assembly</li>
|
||||
<li><a href="http://goatslacker.github.io/fixmyjs.com/">fixmyjs</a> -
|
||||
Automatically fix your JS, driven by JSHint.</li>
|
||||
<li><a href="https://deobfuscate.io">JavaScript Deobfuscator</a> - A
|
||||
simple but powerful deobfuscator to remove common JavaScript obfuscation
|
||||
techniques.</li>
|
||||
<li><a href="http://www.jsnice.org/">JSNice</a> - Statistical renaming,
|
||||
type inference and deobfuscation.</li>
|
||||
<li><a href="https://novicelab.org/jsonabc/">JSON ABC</a> - Sorts JSON
|
||||
alphabetically</li>
|
||||
<li><a href="https://markdowntohtml.com">Markdown to HTML</a> - Paste or
|
||||
type your markdown and see it rendered as HTML. Download or copy the
|
||||
resulting HTML.</li>
|
||||
<li><a href="https://markdowntools.com">Markdown Tools</a> - Tools to
|
||||
convert Markdown to/from a number of formats. E.g. Html to Markdown, or
|
||||
a CSV to a Markdown table.</li>
|
||||
<li><a href="http://sassmeister.com/">Sassmeister</a> - Sass/Scss
|
||||
<-> CSS</li>
|
||||
<li><a href="https://sucrase.io">Sucrase</a> - Super-fast Babel
|
||||
alternative</li>
|
||||
<li><a href="https://swc.rs/playground">SWC</a> - compile JS/TS files
|
||||
using modern JS features and outputs valid code that is supported by all
|
||||
major browsers.</li>
|
||||
<li><a href="https://try.terser.org/">Terser</a> - JavaScript parser,
|
||||
mangler and compressor toolkit for ES6+</li>
|
||||
<li><a href="https://etherdream.com/web2img">Web2Img</a> - A tool to
|
||||
bundle your web files into a single image, and extract them via Service
|
||||
Worker at runtime.</li>
|
||||
<li><a href="https://mbebenita.github.io/WasmExplorer/">WebAssembly
|
||||
Explorer</a> - translate C/C++ to WebAssembly, and then see the machine
|
||||
code generated by the browser.</li>
|
||||
</ul>
|
||||
<h3 id="presentation">Presentation</h3>
|
||||
<ul>
|
||||
<li><a href="https://ray.so">Ray.so</a> - Create beautiful images of
|
||||
code snippets.</li>
|
||||
<li><a href="https://snappify.com/editor">snapify</a> - Snappify enables
|
||||
you to create stunning presentations, with first-class support for code
|
||||
snippets.</li>
|
||||
</ul>
|
||||
<h2 id="resources">Resources</h2>
|
||||
<h3 id="apis">APIs</h3>
|
||||
<ul>
|
||||
<li><a href="http://filltext.com/">FillText</a> - Generate JSON datasets
|
||||
for testing or demonstration purposes</li>
|
||||
<li><a href="https://jsonplaceholder.typicode.com">JSONPlaceholder</a> -
|
||||
Free fake API for testing and prototyping.</li>
|
||||
<li><a href="http://zippopotam.us/">Zippopotamus</a> - Zipcode to
|
||||
Geo</li>
|
||||
</ul>
|
||||
<h3 id="browser-information">Browser Information</h3>
|
||||
<ul>
|
||||
<li><a href="http://www.whatsmybrowser.org/">What’s My Browser?</a></li>
|
||||
</ul>
|
||||
<h3 id="cdn">CDN</h3>
|
||||
<ul>
|
||||
<li><a href="https://www.jsdelivr.com">JSDelivr</a> - A free CDN for
|
||||
open source projects.</li>
|
||||
<li><a href="https://www.skypack.dev">Skypack</a> - Load optimized npm
|
||||
packages with no install and no build tools.</li>
|
||||
<li><a href="https://www.unpkg.com">unpkg</a> - Fast, global content
|
||||
delivery network for everything on npm.</li>
|
||||
</ul>
|
||||
<h3 id="cheat-sheets">Cheat Sheets</h3>
|
||||
<ul>
|
||||
<li><a href="https://cheatsheetseries.owasp.org">OWASP Cheat Sheet
|
||||
Series</a> - A concise collection of high value information on specific
|
||||
application security topics.</li>
|
||||
</ul>
|
||||
<h3 id="css-inliners">CSS Inliners</h3>
|
||||
<ul>
|
||||
<li><a
|
||||
href="https://www.campaignmonitor.com/resources/tools/css-inliner">Campaign
|
||||
Monitor</a></li>
|
||||
<li><a
|
||||
href="http://templates.mailchimp.com/resources/inline-css">MailChimp</a></li>
|
||||
</ul>
|
||||
<h3 id="documentation">Documentation</h3>
|
||||
<ul>
|
||||
<li><a href="http://devdocs.io/">DevDocs</a> - Basically <a
|
||||
href="https://kapeli.com/dash">Dash</a> but a web application and
|
||||
FREE.</li>
|
||||
<li><a href="https://www.proposals.es/stages">ECMAScript Proposal
|
||||
Stages</a></li>
|
||||
<li><a
|
||||
href="https://explainshell.com/explain?cmd=ls+-lisah">ExplainShell</a> -
|
||||
A better way to read MAN pages.</li>
|
||||
</ul>
|
||||
<h3 id="easings-animations">Easings & Animations</h3>
|
||||
<ul>
|
||||
<li><a href="http://matthewlein.com/ceaser/">Ceaser</a></li>
|
||||
</ul>
|
||||
<h3 id="glyphs-icons">Glyphs & Icons</h3>
|
||||
<ul>
|
||||
<li><a href="http://copypastecharacter.com">Copy/Paste Character</a> -
|
||||
Copy & Paste emojis and unicode symbols</li>
|
||||
<li><a href="https://cssicon.space">CSS Icons</a> - Copy & Paste
|
||||
icons in CSS + transition animations!</li>
|
||||
<li><a href="http://entity-lookup.leftlogic.com">Entity Lookup</a> -
|
||||
Enter any character(s) and find its corresponding HTML entity code.</li>
|
||||
<li><a href="https://heroicons.com">heroicons</a> - Beautiful
|
||||
hand-crafted SVG icons, by the makers of Tailwind CSS.</li>
|
||||
<li><a href="https://www.iconfinder.com">Icon Finder</a> - Millions of
|
||||
graphics for your design projects. Created by independent
|
||||
designers.</li>
|
||||
<li><a href="http://iconmonstr.com">Icon Monstr</a> - Discover 4000+
|
||||
free icons in 300+ collections.</li>
|
||||
<li><a href="https://icones.js.org/collection/all">Icônes</a> - Over
|
||||
150,000 open source vector icons.</li>
|
||||
<li><a href="https://tablericons.com">Tabler Icons</a> - 4000+ Open
|
||||
source free SVG icons. Highly customizable. No attribution required. For
|
||||
commercial use.</li>
|
||||
</ul>
|
||||
<h3 id="proxy-as-a-service">Proxy as a Service</h3>
|
||||
<ul>
|
||||
<li><a href="https://cors-anywhere.herokuapp.com/">CORS Anywhere</a> -
|
||||
Proxies any HTTP request through a CORS enabled environment.</li>
|
||||
</ul>
|
||||
<h3 id="responsiveness">Responsiveness</h3>
|
||||
<ul>
|
||||
<li><a
|
||||
href="http://bradfrost.github.io/this-is-responsive/patterns.html">Responsive
|
||||
Patterns</a></li>
|
||||
</ul>
|
||||
<h3 id="validation-parsers">Validation & Parsers</h3>
|
||||
<ul>
|
||||
<li><a href="https://numverify.com/">numverify</a> - Validate phone
|
||||
numbers from over 200 countries.</li>
|
||||
<li><a href="https://csp-evaluator.withgoogle.com">CSP Evaluator</a> -
|
||||
Evaluate CSP rules</li>
|
||||
<li><a
|
||||
href="https://playground.ada-url.com/?url=torrent://blog/post/1?source%7Crest=rss">Ada
|
||||
URL Parser</a> - WHATWG-compliant and fast URL parser written in modern
|
||||
C++, online.</li>
|
||||
</ul>
|
||||
<h2 id="security">Security</h2>
|
||||
<h3 id="ssl">SSL</h3>
|
||||
<ul>
|
||||
<li><a href="https://gethttpsforfree.com/">GetHTTPSForFree!</a> -
|
||||
Genuinely FREE SSL certificates (courtesy of <a
|
||||
href="https://letsencrypt.org/">Let’s Encrypt</a>)</li>
|
||||
<li><a href="http://selfsignedcertificate.com/">Self-Signed Certificate
|
||||
Generator</a> - A self-signed certificate generator.</li>
|
||||
<li><a href="https://ssl-config.mozilla.org">Mozilla SSL Configuration
|
||||
Generator</a> - SSL configuration generator for various server software
|
||||
and platforms.</li>
|
||||
</ul>
|
||||
<h3 id="test">Test</h3>
|
||||
<ul>
|
||||
<li><a href="https://hstspreload.org">HSTS Preload</a> - Check HSTS
|
||||
preload status and elibility.</li>
|
||||
<li><a href="https://observatory.mozilla.org">Mozilla Observatory</a> -
|
||||
A set of tools to analyze your website and inform you if you are
|
||||
utilizing the many available methods to secure it.</li>
|
||||
<li><a
|
||||
href="https://securityheaders.com/?q=https%3A%2F%2Fsecurityheaders.com">Security
|
||||
Headers by Probely</a> - An easy to use tool designed to help you better
|
||||
deploy and understand modern security features that are available for
|
||||
your website.</li>
|
||||
<li><a href="https://web-check.xyz">Web Check</a> - All-in-one OSINT
|
||||
tool for analysing any website.</li>
|
||||
</ul>
|
||||
<h2 id="the-outside-world">The Outside World</h2>
|
||||
<h3 id="swag">Swag</h3>
|
||||
<ul>
|
||||
<li><a href="http://devswag.com/">DevSwag</a></li>
|
||||
<li><a href="http://devswag.com/">DevSwag</a></li>
|
||||
<li><a
|
||||
href="https://www.stickermule.com/marketplace/collections/open-source-stickers/">StickerMule</a></li>
|
||||
</ul>
|
||||
<h2 id="license">License</h2>
|
||||
<p><a href="http://creativecommons.org/publicdomain/zero/1.0/"><img
|
||||
src="http://i.creativecommons.org/p/zero/1.0/88x31.png"
|
||||
alt="CC0" /></a></p>
|
||||
Reference in New Issue
Block a user