In this article, we’ll look at some of the available tools and resources for web developers that will help you save tons of time of making stuff on your own or using other more time-consuming resources. We’ll cover various generators, like text or hash, image, and design resources, from free stock images to image editing software, code optimization tools, converters, validators, speed testing tools, among others. Well, I’ve spent two days hunting through both Github and Twitter like an insatiable predator on a chase for available tools that can potentially make your work smarter and more productive, so you’d better give this article some love.
Generators
Image Resources
Code Optimization
Converters
Image Compression
Validation and Compatibility
In-Browser Coding
Snippet
Design
Wireframe
Speed Test
Other
GitHub-Related Stuff
Generators
Generators produce an output that is either random or predefined by the input data.
- Text Content Generator – http://www.lipsum.com
Lipsum is a random text generator that produces a dummy text in a number of languages. - Data Generator – https://mockaroo.com/
In case you’re looking for mock data for your app, Mockaroo is a fantastic instrument to generate up to 1,000 rows of realistic test data in CSV, JSON, SQL, XML, Excel, Firebase formats. If you need more data, you can sign up for a plan starting at $50 a year. With Mockaroo, you can design your own mock APIs, and parallelize UI and API development for better and more reliable outcomes of your design and development. - Mobile Mockup Generator – https://mockuphone.com
MockUPhone is a free tool that helps developers and designers wrap app screenshots in different devices (primarily phones, tablets, but also desktop/laptops, and TV screens). In case you need to create a screenshot for App Store submission, you can use the following developer suite: https://shotbot.io/ – the only screenshot designer you might need for Appstore. - Logo Generator – https://www.logaster.com
There are some horrible logo generators on the web, but this one is actually pretty cool: while most of the logos on the site still look “just okay,” some others do seem pretty fine-tuned. You can generate a logo for free and tamper with colors, text, and font a little. One small size logo is free for download, other than that you need to pay. There are also a number of useful logo-related merchandise, like business cards design, letterheads, envelopes, customized email signature designs, and brand books. Overall, this is a great resource, in case you need a logo real quick. - Hash Generator – https://passwordsgenerator.net/sha256-hash-generator/
This tool allows you to generate the SHA256 hash of any string. (There are other options available: generation of MD5, SHA1, and a well-known simple password generator) - Ultimate Code Generator – https://webcode.tools/
WebCodeTools is a website code generator. You can generate HTML, CSS, as well as Twitter Card, Open Graph tags, and Structured Data (Microdata, JSON-LD).
Image Resources
The following websites don’t really require much introduction, except that these websites offer an infinite pool of great pictures or icons that you can download absolutely free of charge. Unsplash also offers an API and is already integrated natively inside tools like Sketch, Framer, and Codepen.
- Free Stock Images – https://www.pexels.com
- Free Stock Images With API – https://unsplash.com/
- Free- Vectors, mockups – https://www.freepik.com
- Free Icons – https://www.flaticon.com/
Code Optimization
- Minify JS & CSS – http://minifier.org
This is a CSS & JavaScript minifier, in PHP, which removes whitespace, strips comments, combines files, and shortens a few programming patterns. - Code Optimization Tools – https://codebeautify.org
This optimization resource has a lot of different tools. Among those are JSON Viewer, JSON Validator, CSS Beautifier, conversion tools like Binary to Decimal and Decimal to Hex, and many others. For example, if you click on JSON Viewer, you can do lots of stuff with your code: validate it, if there’s a mistake, the viewer tells you exactly what the issue is; you can beautify it, to make the syntax look clearly concise and correct; you can download the code; or convert it to XML, or CSV. Apart from that, there are designer tools like conversion from HEX to RGB and visa versa. - Code Diff Checker – https://www.diffchecker.com
This is a great debugging tool to help you find problems within your code. But you’ll have to have some sort of original code to check against it, this way, the program finds out the problematic issue and highlights it.
Converters
- ES6+ & JSX Compiler – https://babeljs.io/repl
Babel is a well-known compiler, that takes the latest JavaScript, like ES6, ES7, and later versions, and compiles them to the ES5 code. - Sass Converter – https://www.sassmeister.com/
Sass is a style sheet language, a preprocessor scripting language that’s interpreted and compiled into regular CSS. To play around with Sass and see what the code yield for common CSS, SassMeister is a good website to do so. - Less Converter & More – http://www.webtoolkitonline.com
The Web Tool Kit has a lot of options: different types of converters (Less to CSS, CSV to XML), encoders/decoders, formatters, generators, minifiers, and testers. - Markdown Editor – https://stackedit.io
StackEdit is an open-source text formatting editor that helps you visualize the final rendering of your files, converting markdown to the corresponding HTML. There are very handy formatting buttons and shortcuts, smart and intuitive layout, and live preview to keep an eye on your output. This is a fantastic tool for web writers, which can sync your files with Google Drive, Dropbox, and GitHub. Moreover, it can also publish them at Blogger, WordPress, and Zendesk. You can leave comments and collaborate with your colleagues, as well as write offline. StackEdit supports different Markdown flavors such as Markdown Extra, GFM, and CommonMark. You can enable or disable all features at your convenience.
Image Compression
The following tools are also pretty straightforward: compressors reduce the size of the pictures while trying to maintain its quality.
- Compress All Images – https://compressor.io/compress – JPEG, PNG, GIF, SVG
- Compress JPG – http://jpeg-optimizer.com/ JPEG
- Compress PNG – https://tinypng.com/ – PNG and JPEG
Validation and Compatibility
- Validate HTML – https://validator.w3.org
This is a tool that checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML. To validate other specific content checks: http://www.w3.org/QA/Tools/ For example, for CSS: https://jigsaw.w3.org/css-validator - Check Browser Compatibility – https://caniuse.com/
If you want to find browser compatibility, then this is a must-have tool; to check where a particular feature would work, just type in the name of that feature into the search box and see which browsers support it. - ES6+ Compatibility Table – https://kangax.github.io/compat-table/es6/
This is a compatibility table which you can check against if any particular feature is available in a designated browser, compiler, etc.
In-Browser Coding
- Client Side Code – https://codepen.io
Codepen is the most well-known environment for in-browser coding, a collaboration between team members, showing off your work, or building test cases. You can also search for inspiration by typing a particular query into the search box and see what others are working on. Like, if you type “landing page,” you’ll come up with different projects along with their HTML, CSS, JS codes to learn or borrow from. - Client Side Code – http://liveweave.com
Liveweave is similar to JS Fiddle, which we’ll describe in a moment, plus it has some other features, like CSS Explorer, where you can play around with colors, borders, backgrounds, etc. - Server Side Code – https://repl.it
Repl is a cloud development environment with linting, debugging, third-party packages, live updates, hosting, and deployment. It’s built more like an educational tool for classroom collaboration and trying out new languages, libraries, and stacks. - JS Fiddle: https://jsfiddle.net/
This is a great tool for JavaScript projects, including live code collaborations, bug reporting, tidying up your code, code snippets hosting, or just playing around with your code. There are multiple boilerplates available, like Vue, React, TypeScript, Bootstrap, etc. - CodeSandBox https://codesandbox.io/
CodeSandBox is an online editor that helps developers create web apps from prototype to deployment. You can live-collaborate, export your code to GitHub, or otherwise unlist your sandbox to make it private. There are an ample number of features and integrations available, like Jest integration, static file hosting, integrated DevTools, linting with ESLint, and more. Besides, you can also search through different projects and learn from others. - Play Code https://playcode.io/
This is another code editor, where you can quickly and easily make your front-end experiments. You can share your projects, create web apps and publish them to a domain like demo.playcode.io, use a console to debug, and use different libraries. - JS Bin https://jsbin.com/
JS Bin is a playground for experimenting with different languages and a great learning tool. JS Bin is mainly used for HTML, CSS, and JavaScript, but it also supports Markdown, Jade, and Sass. You can share your JS Bin URL with anyone for them to see your work and interact with it. You can also add different libraries, or upgrade to Pro to use unlimited private and public bins, as well as 1GB of storage, and many other cool perks, in case you’re coding at scale.
Snippet
Snippet code managers allow you to synchronize and manage your GitHub gists, create and update several snippets, and more. These ones below we found particularly interesting:
- Snippet Manager – https://gist.github.com
- Snippet Manager – https://pastebin.com
- Snippet Manager – https://lauthieb.github.io/code-notes/
Design
- Mockplus – https://www.mockplus.com
Mockplus is a digital product design platform for prototyping, collaboration, and creating design systems. You can quickly turn ideas into functional prototypes with components, icons, and interactions. Mockplus helps you create better design experience faster and easier. - Figma – https://www.figma.com/
Figma is a perfect design tool that allows you to draw graphics and create mock-ups for your apps. The app has different kinds of frames for different devices and is available both as a desktop app and a web app. Figma achieves such great performance results by using Webassembly. Because it’s web-based, you can open your project on any device, continue working on it, share your project, and collaborate with others. Figma is similar to Sketch and has some super powers for app developers because you can mock up different events that can happen on the elements, like Touch Up, Mouse Leave, etc. And you can also export your styles as CSS, or an iOS or Android styles. - Fontflipper – https://fontflipper.com/
Fontflipper’s purpose is to choose the fonts for your designs, it works similar to Tinder in that you swipe left or right depending on if you like a particular font for your project, and then choose the selected fonts for download. - VisBug – https://visbug-1337.firebaseapp.com/
This is a new Chrome extension, a tool that allows you to interact visually with your website. There’s a toolbar on the left and the DOM elements on the right; you can measure elements, move things around, change their style, and do everything live in the browser without having to write a single line of CSS. This is a pretty powerful tool because you can experiment with elements until you actually like them, and copy and paste that code, without rewriting it yourself. - Flare – https://www.2dimensions.com/about-flare
This is a design tool for creating 2D vector animations. It might seem similar to Figma in a sense that you can draw graphics, but you’ll also have keyframes to control the motion of the graphics over time. Moreover, you can see the work of other designers directly on the site and learn from others how exactly they built this or that particular animation. You can export your animations directly to Flutter. - Create Color Schemes – https://color.hailpixel.com
This is helpful if you want to figure out a design scheme for your website. Just hover the mouse around and that will change the colors on the screen. Click on any particular color and it’s put to the side, continue clicking on the next available color within the spectrum until you arrive at your own palette. - Get Color Schemes of Websites – http://stylifyme.com
You can put a URL in the search box and the output yields all the colors used on that site. So if you like any particular website and want to check what colors, fonts, image dimensions have been used, then this is the site to go. - Create Gradients – https://uigradients.com
If you want to generate CSS gradients, you can scroll through different collections, and if you like any of them, you can get the CSS code for that gradient, or download the image as a jpeg. - CSS Button Generator – http://css3buttongenerator.com
You can change the size, colors, fonts, shadows, borders, and it generates the code for your button. - JQuery Cheat Sheet – https://websitesetup.org/jquery-cheat-sheet/
The cheat sheet makes work a whole lot easier for avid jQuery developers and it may be one of, if not the most comprehensive one on the internet because the author literally put together 13 pages (that anyone can download as a PDF document for FREE) covering things such as selectors, Attributes / CSS, manipulation, traversing, and much much more.
Wireframe
- In Browser Wireframing – https://app.moqups.com
This is a powerful tool to create wireframes, mockups, UI concepts, and prototypes for projects. - Basic In Browser Wireframing – https://wireframe.cc
This app has a very simple layout with a clutter-free environment so you can entirely concentrate on your ideas and sketch them before they fade away. Creating wireframes is pretty easy thanks to clicking and dragging, there’s a limited color palette available, a bunch of powerful stencil elements, and much more.
Speed Test
These tools will show you how fast your website is loading.
- Speed & Performance Testing – https://tools.keycdn.com/speed
- Pingdom Speed Test – https://tools.pingdom.com/
Other
- HTML Entity Lookup – http://entity-lookup.leftlogic.com/
You can look up any particular symbol in HTML in this directory. That’s a great tool to ensure all entities on your page are validated and look exactly as you want them to be. - Public API Resources – https://github.com/toddmotto/public-apis?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more
This is a collection of public APIs for use in software and web development. There’s a bunch of different APIs which you can check and see what they do. - Organized Docs for all Popular Web Technologies – https://devdocs.io
This website combines multiple API documentation, as well as a collection of popular technologies and their documentation. - BundlePhobia – https://bundlephobia.com/
BundlePhobia is a web app that allows you to determine how much an npm package will add to your total bundle size. This might prove to be particularly useful if you’re working with a front-end framework and want to keep a bundle size as small as possible to optimize the initial page load for new users. BundlePhobia helps you analyze the overall effect of the addition of a new dependency to your project. All you have to do is enter the package name, and BP will tell you its bundle size, download time, whether or not it’s tree-shakeable, and more. You can also upload your entire package JSON to see all of your dependencies ranked by size. - CloudCraft – https://cloudcraft.co/
This is a web app that will help you design and budget your cloud infrastructure. Unfortunately, though, it’s only available for AWS. The app provides a very intuitive drag-and-drop interface that allows you to connect different cloud infrastructure services together. Once you figure out your infrastructure and put it in place, you can go to the Budget tab and it will break down estimated costs for you. But since most other clouds have similar pricing models, the results here can translate to Azure and GCP. - Insomnia – https://insomnia.rest/
This is a back-end tool that you can use to debug APIs. Whether you’re building a REST API or a GraphQL API, this app will help you organize your entire workflow: it allows you to save reusable values that you can go back and use as to debug your API. Besides the app has a very intuitive and organized user interface.
A Collection of Browser Extensions for GitHub & Other Cool GitHub-Related Stuff
Hereinbelow, I gathered some other valuable resources that would optimize your GitHub workflow.
- Chrome Extensions – https://github.com/stefanbuck/awesome-browser-extensions-for-github
This is the collection of browser extensions for GitHub that are divided into ten categories, like code, notification, profile, pullrequest, and more. - Find a GitHub user – https://gitstalk.netlify.com/
This is a nice app to find any GitHub user or see what they are up to. Instead of searching for a particular person on GitHub, just type in the name here and see what’s going on. - Gitpod https://docs.gitpod.io/00_Introduction.html
Gitpod is based on open source technologies, like VS Code, Docker, and Kubernetes, and is deeply integrated with GitHub, which makes it an extremely useful tool that contains your entire dev workflow in a browser tab. So, basically, it’s an IDE for the web-based development flows of common code hosting platforms. - Pull Reminders https://github.com/marketplace/pull-reminders
This is a tool to reduce review turnaround times and ship the code faster. Pull Reminders app streamlines your pull request workflow with real-time alerts and Slack reminders, greatly increasing the team’s production velocity.
