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

CSS 3 Generators
CSS 3 Generators

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

CSS Triangle Generator
CSS Triangle Generator

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 -webkit-transform: rotate(360deg); for Webkit based browsers. The last tip makes a better anti-aliasing effect, for any reason which I couldn’t found. All in all I really like to use this tool on our projects, even if this website uses the octicon triangle on the navigation items. BTW.: The used Color Picker JavaScript on this website is written by Stefan Petre, it’s a (deprecated) jQuery Plugin from 2009! I couldn’t found this project on GitHub, so I assume that the official website shows really the latest version.

 

3. eMail Link Builder – eMails 4 Everyone

eMail Link Builder
eMail Link Builder

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 <info@pytes.net>) 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!

The website requires a bit more modern JavaScript Browser Environment (above Internet Explorer > 10 should be working, I guess, I’m currently unable to test it) and uses VueJS as Template and Application engine. I’m really not into VueJS at all, but it looks really nice. The design is written using SCSS (Sassy CSS) as pre-processing Stylesheet language. From where I know this? Sam Carlton published the complete application on GitHub. So you can also take a look at this project on the official GitHub Repository.

 

2. Favicons Generator – The Real one

Real Favicon Generator
Real Favicon Generator

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

Regular Expression 101
Regular Expression 101

I hate and love Regular Expressions, and the hate sits in the constant mending and reloading when using RegExp in JavaScript, or preg_match in PHP, or re in Python. But regular expressions 101 makes the ungrateful work so much easier. Just playing, testing and using WITHOUT switching the window, without pressing F5, without clicking the green Play Button on Spyder (Best Python IDE btw).

This extensive Web Application currently supports the most important languages: Python, JavaScript, PHP and Go. It also supports the respective RegExp flags and all the other particular characteristics on the different language implementations. The passed Regex Code is also colorized and described individually, and a smart Quick Reference and documentation helps you out, when you are at the bottom. In short: Add it to your bookmark… Right now, it also has a smart Favicon (as shown below)!