It isn’t really efficient to do the same process again and again and again and therefore you may want to build a small script or an application, which does the work for you. Or which tries to help you, at least. But you know it too: You just starting to code something small, like a LESS Compiler, and it ends up as the most configurable LESS WebRenderer on the internet.
That isn’t always advantageous and it also takes (way too much) time. It’s also very likely that someone (or something) has already done almost the same work / application (MAYBE also with a bit more effort and time). So why shouldn’t we use existing tools, saving time and energy which we can invest in the “main” project itself?
Therefore I will show you 5 WebApplications, which I’m using on my daily work and which simplifies a few parts of my WebDeveloper Life! And you SHOULD try them too.
5. CSS3 Generators – A bunch of CSS Utilities
The website css3generator.com – developed by Randy Jensen – directly offers a full dozen (so… 12) partly useful, partly questionable CSS 3 Generators. The Box Shadow and Text Shadow Syntax Builders with live preview are highly recommended as well as the Multiple Columns, Transform and Flexbox utilities. They all are really easy to use, directly displays any change and are just a CTRL + C / CTRL + V away from your script or template.
The Transition and Outline generators are also very nice, but things like Border Radius, Box Resize, Box Sizing, RGBA and @FontFace are probably less interesting for fast dippers who also likes to use keyboard shortcuts. But they are still “nice-to-have” for newcomers or non-CSS programmers / coder, I guess. The website itself also links to a Gradient Generator hosted and developed by ColorZilla (you know, the Color Picker Plugin for Mozilla Firefox and Google Chrome). A really cool tool to create gradients and color transitions, even if the “current web standard” is designed in a more minimalistic, flat and transition-less way.
4. CSS Triangle Generator – How to triangle
Another really useful WebApplication is the chinese CSS triangle generator developed by eky.hk. It allows to create border based pure CSS triangles in any size, with any color, pointing in one of 8 available directions. Also with an optional support for the Internet Explorer 6+! This feature adds a fallback / overwriting border color, using black instead of transparent, and adds a Microsoft own Chroma transformation filter which shows the black color as transparent. It also adds a zero line-height, but don’t ask me why, it will have a reason!
The Website also recommends to use
border-style: inset; if the Mozilla Firefox renders a gray border around or instead of the triangle, and
3. eMail Link Builder – eMails 4 Everyone
My american namesake Sam Carlton creates a really beautiful and functional eMail Link Builder WebApplication. It supports “To”, “CC”and “BCC” eMail URLs (also available using a named URL like
pytesNET <firstname.lastname@example.org>) as well as a pre-defined “Subject” and “Message” text content. But keep in mind, that URLs are limited in their length (browsers has a de facto limit of 2000 characters, you should still be far below this limit), so don’t write a multipage lecture as default eMail content!
2. Favicons Generator – The Real one
The Real Favicon Generator is currently the BEST solution to create multi-platform compatible and beautiful (okay, this depends on your icon only!) Favicons for your website. This WebApplication itself offers also a corresponding preview per platform / device and allows to upload a “exclusive” / depending version of your icon too. You can also set up the color scheme, which should be used for the mobile chrome browser for example or for your Windows 8 panel.
You may think “What’s the point of this small favicon?”, and the answer is: It makes you and your website unique! Not just for the users of desktop browsers (who only will see the “small” version of this icon). Because the web is taken over by Smartphone users and many of them “stores” Websites as Bookmark on the Homescreen or within any other RSS Reader / Website Managing App. And your Favicon should also be compatible for such devices and applications! A generic icon is just a generic icon, but a unique favicon is a unique favicon!
1. Regex101 – Regex Testing like a Pro